آموزش ساخت بنر گیف با حجم کم در فتوشاپ

امروزه تبلیغات اینترنتی جایگاه خود را آنطور که باید و شاید پیدا کرده اند و بخش عظیمی از این تبلیغات هم به صورت بنرها و تصاویر تبلیغاتی صورت میگیرد.
اما نکته ای که باید در طراحی این نوع بنرها که اصطلاحا به آن ها به خاطر پسوندشان گیف گفته میشود، جلوه ی زیبایی و حجم آن هاست که هم گیرایی خاص خود را داشته باشد و هم لود و بارگزاری سریع تری را به نسبت باقی تبلیغات در خود جای دهد.
بنرهای تبلیغاتی انواع و اقسام گوناگونی دارند ولی ما امروز به طراحی بنری با سایز 468 در 60 پیکسل خواهیم پرداخت که میتوانید با ما همراه باشید.

آموزش ساخت بنر گیف با حجم کم در فوتوشاپ

برای شروع کار ابتدا یک فایل با همان سایز بالا یعنی 468 در 60 پیکسل با پس زمینه ی سفید باز میکنیم و سپس یک لایه جدید ساخته و آن را با ابزار paint bucket tool به رنگ دلخواه خود رنگ خواهیم کرد. ( توجه داشته باشید بسیاری از افراد برای پس زمینه ی و بک گراند بنرها از انواع و اقسام تصاویر و بک گراند های آماده استفاده میکنند که خوب این امر حجم فایل نهایی را به نسبت قابل توجهی بالا خواهد برد، پس سعی کنید تا حد ممکن از رنگ ها استفاده نمایید)

سپس لوگوی خود را در سایز کوچک تری نسبت به فایل اصلی آن وارد لایه ای جدید در همان پردازش بنر کنید و هر کجا که فکر میکنید نیاز است قرار دهید.

حال از منوی window گزینه ی animition را فعال کنید.

بعد از آن یک پنجره ی جدید به سری پنجره های درون فوتوشاپ شما اضافه می شود که توضیحات مربوط به هر بخش آن را میتوانید مشاهده نمایید.

شماره 1 – کادر نمایش فریم ها، که شما میتوانید تعداد فریم ها و پیش نمایش کوچکی از آن ها را مشاهده نمایید. هر تغییری که نیاز است بعدها انجام دهید باید با انتخاب همان فریم باشد، چرا که اگر هر فریمی که در حالت انتخاب باشد فقط تاثیر بر روی آن فریم می گذارد. (البته توجه داشته باشید با تغییر در اولین فریم، فریم های بعدی نیز دارای تغییراتی خواهد شد)

شماره 2 – زمان ثابت ماندن یک فریم و برگشت پذیری همه ی فریم ها میتوانید مشاهده کنید. اگر تمایل دارید بنر شما در یک فریم خاص مدت زمان بیشتری را ثابت بماند میتوانید این زمان را از این قسمت تنظیم نمایید. و یا اگر تمایل دارید بنر شما بعد از اتمام همه ی فریم هایش دوباره از اول شروع به نمایش کند میتوانید گزینه ی forever را انتخاب نمایید.

شماره 3 – گزینه های مربوط به جلو و عقب بردن فریم ها و همچنین پلی کردن فریم ها برای دیدن فایل پیش نمایش خروجی را میتوانید در این قسمت ببینید.

شماره 4 – گزینه ی مربوط به duplicate کردن یا همان کپی کردن یک فریم و یا حذف آن را در این گزینه ها میتوانید ببینید.

شماره 5 – در این قسمت شما میتوانید نحوه ی نمایش فریم ها را ببینید که آیا به صورت storyboard باشد و یا timeline که در حالت نمایش داده تایم لاین فعال می باشد.

حال به آموزش برگردیم، ما برای اینکه جلوه ای به کارمان بدهیم و بنرمان را به صورت حرکتی در آوریم فریم اول را به صورت ثابت قرار میدهیم و در فریم دوم گزینه ی لایه ی logo را با کم کردن opacity به رنگ کمتری در خواهیم آورد که با پلی کردن پیش نمایش میتوانید آن را مشاهده نمایید.

پیش نمایش باید به صورت زیر باشد.

شما میتوانید انواع و اقسام جلوه ها مثل حرکت دادن به لوگو یا عوض کردن آن را انجام دهید (تعویض لوگو و نوشته ها با برداشتن تیک علامت نمایش کنار هر لایه امکان پذیر است)

برای ذخیره و تهیه فایل خروجی انتهایی میتوانید از تب file بر روی گزینه ی save for web & devices را انتخاب نمایید (کلید ترکیبی : alt+shift+ctrl+s ).

در پنجره ی باز شده میتوانید با زدن گزینه ی save و انتخاب مسیر ذخیره شدن یک فایل نهایی داشته باشید.

توجه داشته باشید که ما امروز فقط از یک لوگو استفاده کردیم و هیچ فایل اضافه ای را به بنرمان اضافه نکردیم، که حجم فایل خروجی فقط 7kb شد و با اضافه کردن یک سری فایل های دیگر عموما حجم انتهایی فقط به 50kb خواهد رسید که عالی خواهد بود و شما خواهید توانست در تبلیغات خود موفق ظاهر شوید.