ایجاد بنر های متحرک در فتوشاپ

ایجاد بنر های متحرک در فتوشاپ

حتما در بسیاری از وب سایت ها بنر های تبلیغاتی متحرک را دیده اید. برای تهیه این بنر ها از برنامه هایی مثل Flash یا Photoshop می توان استفاده کرد.

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

من از Photoshop CS2 استفاده می کنم اما اصول و روش کار در همه ورژن ها تقریبا به همین شکل است. ابتدا برنامه را باز کنید و از منوی Window گزینه Animation را انتخاب کنید:

پنجره انیمیشن به فتوشاپ شما اضافه می شود.

حال یک فایل New با سایز دلخواه خود ایجاد کنید. بیشتر بنر های افقی استاندارد بطور ۴۶۸ و ارتفاع ۶۰ پیکسل و با دقت ۷۲ پیکسل می باشند. ما هم در طراحی مثال از همین سایز استفاده می کنیم.

و برای شروع کار یک رنگ تیره به زمینه کار می زنیم.

حال قصد داریم سه مدل حرکت در این تصویر داشته باشیم.۱- حرکت ورود متن مستقیم از بالا به داخل که برای آن لایه تکست جدید shivahost را ایجاد می کنیم.۲- حرکت ورود متن بصورت شیبدار از گوشه ای از تصویر بداخل که لایه تکست server را برای آن ایجاد می کنیم.۳- حرکت چرخش متن در داخل تصویر که برای آن دو لایه text بنام های rotate یک کپی از آن بنام rotate copy ایجاد می کنیم.برای هریک از افکت های فتوشاپ و رنگ های دلخواه می توانید استفاده کنید. همچنین می توانید بجای لایه text از انواع دیگر لایه ها مثل تصاویر استفاده کنید.

همانطور که می بینید دو لایه rotate فعلا بر هم منطبق هستند.

حال بایستی شروع به ساخت انیمیشن کنیم. برای این کار احتیاج به ۲ فریم شروع و پایان کار داریم. با کلیک روی گزینه Duplicate selected frame یک کپی از فریم اولیه بسازید. همانطور که در شکل زیر مشاهده می کنید:

در مرحله بعد بایستی فریم اول را طراحی کنید. برای اینکار ابتدا آن را انتخاب کنید تا روی آن کار شود.قبل از هر کار با کلیک بر روی تک تک لایه ها و انتخاب آنها تیک Propagate frame 1 را برای هم بردارید:

ابتدا لایه shivahost را که قرار است از بالا وارد شود به بالا خارج از تصویر بصورت مستقیم می بریم:

سپس لایه server را که قرار است از گوشه بالا سمت راست وارد شود به محل اولیه آن که قرار است باشد می بریم.

در نهایت برای افکت سوم لایه rotate copy را در فریم اول خاموش نمایید:

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

همانطور که می بینید در این فریم همه لایه ها روشن هستند.

لایه shivahost به مقصد رسیده، لایه server نیز به مقصد رسیده.

در این فریم بایستی لایه rotate copy که در لایه قبل خاموش بود را روسن کنیم و لایه rotate که در لایه قبل روشن بود را خاموش کنیم.

حال بایستی لایه rotate copy را به مقدار دلخواه دوران دهیم مثل شکل زیر:

در این مرحله با کلیک بر روی Play animation می توانید تصویر زیر را ببینید:

حالا زمان ایجاد حرکت و ساختن فریم های میان این دو فریم است.با کلیک بر روی Tween animation frames در پنچره Animation پنجره ای باز می شود

در شکل فوق مشاهد می کنید که می توانید تعداد فریم های دلخواه را اضافه کنید. تعداد فریم بیشتر یعنی حرکت آهسته تر اما روانتر. در اینجا ما ۵ فریم در نظر می گیریم.

مشاهده می کنید که گزینه دیگری هست که از شما می پرسد از فریم قبلی یا تا فریم بعدی انیمیشن را بسازد که البته فعلا ما فقط ۲ فریم داریم اما در انیمیشن های حرفه ای تر بعدا می توانید از این گزینه ها و دیگر گزینه های آن استفاده کنید.

فرض کنید می خواهید در فریم آخر ۲ ثانیه مکث داشته باشید و بعد تکرار انیمیشن. برای اینکار مطابق شکل زیر پایین فریم آخر کلیک کنید و گزینه ۲ ثانیه را انتخاب کنید.

حال کافیست انیمیشن خود را Paly کنید.

برای ذخیره انیمیشن بایستی گزینه Save for web را انتخاب کنید:

و تصویر را با فرمت gif مطابق عکس زیر ذخیره نمایید:

و در نهایت نتیجه کار شما چنین خواهد بود:
و نمونه هایی دیگر:
شیوا هاست
شیوا هاست

4 دیدگاه

ارسال دیدگاه