نکات ساخت و ذخیره ی بنر gif

نکات ساخت و ذخیره ی بنر gif

ساخت بنر توی فتوشاپ تقریبا راحته و همه میتونن یک بنر زیبا با فتوشاپ خلق کنن، اما خلق یک بنر فقط به قدرت انیماتوری فرد بر نمیگرده!فکر نمیکنید یک بنر باید در کنار زیبا بودن،حجم کمی نیز داشته باشه؟فکر نمیکنید رنگ بندی مناسبی برای یک بنر احتیاج داریم؟به نظرتون سرعت فریم ها در بنر مهمه؟!آیا نباید سایز مناسبی برای بنر داشته باشیم تا بشه در همه جا ازش استفاده کرد؟
در ادامه با ما باشید…

انواع سایز بندی برای ساخت بنرهای اینترنتی!

انتخاب سایز بنر یک امر توافقی بین مشتری و طراح هست!یعنی مشتری میگه من سایز X رو میخوام و طراح بنری در همون ابعاد طراحی میکنه،اما با این حال یک سری سایزهای استاندارد از قبل تعیین شده برای طراحی بنرهای اینترنتی وجود داره که شما معمولا بنرهایی با اون اندازه هارو تو ی اینترنت میبینید!سایزهایی مثل:468×60 یا 120×240 یا 120×120 و برخی سایزهای برزگتر که در سایت های موزیک دیده میشن! با این حال اگه میخواید با سایزهای استاندارد و عرف در اینترنت آشنا بشید بهتره به سایت designerstoolbox سری بزنید!

رنگبندی کم حجم برای بنر

رنگبندی بنر یک امر حیاتی توی طراحی بنر هست! یک بنر با کلی افکت زیبا و جذاب رو تجسم کنید که با پس زمینه ی صورتی جیغ و نوشته های قرمز ساخته شده! حالا همین بنر رو با پس زمینه ی قبلی و نوشته ای به رنگ سفید مجسم کنید! شما دوست دارید نوشته های کدوم بنر رو بخونید؟

بین خودمون یه نکته که همه جا کاربرد نداره رو بگم:رنگ های تیره،معمولا حجم کمتری دارن!

good color in banner   bad color in banner

نکته ی دیگر درباره ی انتخاب رنگ در طراحی بنر که باعث میشه حجم بنر نهایی شما کم باشه،فعال کردن گزینه ی only web colors هست!برای این کار روی آیکونی که شما رو به پالت رنگ در فتوشاپ راهنمایی میکنه کلیک کنید و مثل تصویر زیر تیک گزینه ی Only Web Colors رو بزنید!

only web colors

فریم های بنر و سرعت حرکت

فریم ها در زیبایی کار شما بسیار تاثیر دارند!پیشنهاد میشه برای فریم هاتون سرعتی معادل 0.03ثانیه در نظر بگیرید!

سرعت 0.03 ثانیه در بنر   سرعت 0.3 ثانیه در بنر

به جای استفاده از آیکون duplicates-selected-frames اضافه کردن فریم بین دو فریم و اعمال تغییرات به وسیله موس و دست،بهتره از آیکون tweens-animation-freams استفاده کنید و فقط تعداد فریم هایی که دوست دارید اضافه شه رو به فتوشاپ بدید تا بقیه ی کارهارو فتوشاپ انجام بده!

بعد از چند فریم که تعدادی متن وارد صفحه میشن یک مکث کوتاه بین 0.8s تا 1s به چشم بیننده بدید تا استراحت کنه و سرعت همه ی فریم هارو یکسان و کم نکنید!

کم کردن حجم بنر نهایی

در انتهای کار وقتی که میخواید بنرتونو ذخیره کنید تمام تلاشتون رو بکنید تا بنر رو تا جایی که میتونید کم حجم ذخیره کنید!

چند سال پیش که اینترنت دیال آپ مرسوم بود،این نکته خیلی ضروری بود ولی باید توجه کنید که الان هم این اینترنت در ایران نفس میکشه و همچنین گاهی ADSL ایران هم در همون اندازه ی Dial up کار میکنه! اونموقه اس که حجم بالای بنرشما براتون مشکل ساز میشه!چون لود نمیشه که بیننده بخواد اونو ببینه! برای ذخیره ی بنر gif باید به مسیر File > save for web برید یا دکمه ی Alt+Shift+Ctrl+S رو فشار بدید تا پنجره ای برای ذخیره ی فایلتون باز بشه! در قسمت ذخیره ی بنر به صورت GIF شما با این قسمت برخورد خواهید کرد که بسته به نوع رنگبندی بنرتون رنگ متفاوتی خواهد داشت(بنر من رنگ آبی زیاد داشته و پالت من بیشتر رنگ آبی داره)

پالت رنگی

فرض کنید هر مربع توی این پالت 1KB حجم داشته باشه!اگه اینجوری باشه این بنر من باید حدودا 240KB حجم داشته باشه که خیلی زیاده!

معمولا حجم بنر مناسب باید زیر 60 کیلوبایت باشه(این یک استاندارد تصویب شده نیست) .

همچنین اگه به پالت رنگی من دقت کنید میبینید که انگار بعضی رنگ ها خیلی شبیه هم هستن!(اگه کد هرکدوم رو دربیاریم میبینیم که شبیه هم نیستن ولی چون چشم انسان خطا داره،ممکنه بعضی از اونها رو شبیه هم ببینه).

ما باید رنگ های مشابه رو حذف کنیم و یک رنگ از رنگ هایی که شبیه هم هستن داخل پالت بمونه! اونموقه در ازای هر رنگ مشابهی که حذف میشه 1KB از حجم بنر من که با مثال بالا شده بود 240KB باید کم بشه!

برای حذف هر رنگ مشابه میتونید روی رنگ مورد نظر کلیک کنیم و دکمه ی delete رو بزنیم تا از پالت ما کم بشه!یا باید از قسمت colors در همون پنجره تعداد رنگ رو کم کنیم!مثلا روی 128 یا 64 قرار بدیم! همچنین با افزایش اعداد web snap و lossy هم میشه حجم بنر نهایی رو کم کرد ولی توجه کنید که اگه مقدار حذف رنگ ها زیاد بشه،کیفیت بنر کاهش پیدا خواهد کرد!

پس حد معقولی رو برای اون در نظر بگیرید! سایر گزینه هارو مثل تصویری در زیر میبینید قرار بدید تا خروجی بنر شما حجم کمی داشته باشه!

کم کردن حجم بنر

تمام!

اگر سوالی بود در انجمن در خدمتتون هستیم!

منتظر نظرات شما کاربر گرامی هستیم! با تشکر


نویسنده

00mostafa00
سلام مصطفی خرمی هستم مدیر جدید سایت بزرگ بنر ساز تسلط کامل بر html,html5,css,css3 دارم و کمی هم گرافیک بلدم

پست های مرتبط

بدون پست مرتبط یافت نشد.

4 نظر

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *