آموزش ساخت بنر متحرک (تصویری)

[mohammadshamosi]

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

۱- ابتدا فتوشاپ را باز کنید . یک صفحه جدید با سایز ۴۶۸ در ۶۰ ایجاد کنید و رنگ پس زمینه را مشکی کنید .

۲- یک نوشته به دلخواه در وسط صفحه بنویسید . ( با رنگ روشن )

۳- روی لایه نوشته کلیک راست کنید و گزینه Blending Options را انتخاب کنید تا پنجره Layer Style باز شود و تنظیمات زیر را برای آن انجام دهید . ( تنظیمات دلخواه می باشد )

۴- کسانی که از CS4 استفاده می کنند باید از منو Window بخش Animation را فعال کنید ، ولی اگر از ورژن پایینتر استفاده می کنید برای انتقال به ایمیج ردی کلیدهای Ctrl + M را بزنید . (ما فعلا از ورژن های پایینتر برای واضح بودن استفاده می کنیم) بعد از انتقال در قسمت Animation (اگر غیر فعال است از منو Window بخش Animation را فعال کنید) روی کلید مشخص شده در شکل زیر برای ایجاد یک فریم دیگر کلیک کنید.

۵- حالا دو فریم دارید . در فریم اول هیچ تغییری ایجاد نکیند. روی فریم دوم کلیک کنید و آن را در حالت انتخاب قرار هید . سپس در سمت راست در بخش Layers لایه نوشته را پنهان کنید .

۶- حالا شما دو فریم متفاوت یکی با نوشته و یکی بدون نوشته دارید حالا برای دیدن نتیجه از بخش Animation روی کلید Plays کلیک کنید تا انیمیشن نمایش داده شود .

۷- اگر می خواهید مدت زمان تغییر بین فریم ها را تغییر دهید یا کمتر کنید در بخش زیرین هر فریم یک فلش وجود دارد که با کلیک بر روی آن می توانید مدت زمان نمایش همان فریم را تنظیم کنید . در این بنر چشمک زن زمان هر دو فریم ۰ ثانیه می باشد .

۸- جهت ذخیره بنر اگر از Image Ready استفاده میکنید به منو File بروید و گزینه Save Optimized As رو انتخاب کنید و اگر از Photoshop ورژن جدید استفاده میکنید گزینه Save For Web & Devices را بزنید و با فرمت Gif ذخیره کنید .
کار ساخت این بنر متحرک ساده به پابان رسیده . شما با خلاقیت و سلیقه خود می توانید انیمیشن های زیباتری را بسازید که با تکنیک های فتوشاپ همراه باشد تا کار زیباتر و حرفه ای تر به نظر برسد . نکته قابل توجه در ساخت انیمیشن فقط بخش فریم ها و پنهان و پیدا کردن و ایجاد تغییر در میان اشیاء موجود در صفحه است که آموزش آن را به صورت ساده و واضع ارائه دادم . ممنون از توجه شما کاربران عزیز

نتیجه کار

​

با تشکر از سایت : ایران هکس

 

[یاسی جون]

ممنون عالی بود

 

[toop]

سلام لطفا آموزش دهید چطوری بنری مثل این تبلیغات ی که تو این صفحه هست درست کنیم:توافق:

 

[mohammadshamosi]

سلام لطفا آموزش دهید چطوری بنری مثل این تبلیغات ی که تو این صفحه هست درست کنیم:توافق:

سلام
دوست عزیز کدوم یکی از بنرها رو میفرمایید؟
هر کدوم ازبنرها که مد نظرتون هست رو بگید تا آموزشش قرار بگیره

 

[tazeha]

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

1. یک صفحه به ابعاد 200×300 با رزولیشن 100 ایجاد کنید .

​

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

​

3. در مرحله سوم بعد از ایجاد صفحه جدید باید پنل انیمیشن را از مسیر Window = > Animation فعال کنید تا کادر تنظیمات آن در پایین صفحه ظاهر شود .

​

4. در پایین صفحه کادر انیمیشن را مشاهده می کنید . این پنل تشکیل شده است از : قسمت فریم ها / قسمت Forever و قسمت

Playes Animation

در قسمت راست پنل انیمیشن پایین صفحه روی آیکون Convert To Frame Animation کلیک کنید تا اولین فریم ساخته شود .

​

. ابزار Rectangle Marquee Tool را انتخاب کرده و گزینه Style را برابر با Fixed Size قرار دهید . سپس ابعاد 50 در 50PX را برای هر دو کادر وارد کنید .

6. حالا یک لایه جدید ایجاد کنید و کادری که کشیدید را درست پایین صفحه قرار بدهید . در مرحله بعدی باید رنگ کادر کشیده شده را با ابزار Paint به رنگ سفید تغییر بدهیم .

7. حالا باید از کادری که کشیدید با زدن کلیدهای CTRL+J به اندازه کل تصویر کپی بگیرید .در لایه های مستقل

8. من یک تصویر دیگه هم بالای کادرهایی که کشیدم قرار میدهم .

9. حالا نوبت میرسه به ایجاد انیمیشن و ساخت بنر به صورت متحرک فریم اول را که ایجاد کرده اید باید زمانش را به 1 ثانیه تغییر بدهید . دقت داشته باید که همه لایه ها به غیر از لایه اصلی را غیر فعال کنید

حالا باید تمام Fill لایه را برابر با 50 قرار بدهیم . به غیر از تصویر دوم

روش کار به این صورت هست که با ایجاد یک فریم جدید یک لایه فعال می شود . زمان هر لایه هم 1صدم ثانیه باید تنظیم شود .

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

بعد از اینکه مرحله آخر را انجام دادید بابد یک فریم از دوباره ایجاد کنیم و لایه مربع اول را Fill را برابر با 100 قرار دهیم .تا مرحله آخر به همین منوال . یک فریم ایجاد Fill لایه اول برابر با 100

​

100

بسیار خوب امیدوارم تا این قسمت خسته نشده باشید . فریم آخر هم زمانش را روی 5 صدم ثانیه تنظیم کنید تا کمی بیشتر توقف داشته باشد .
یک فریم با زمان 1صدم ثانیه ایجاد کنید فقط عکس دوم را می خواهم در 4 مرحله به صورت کامل در صفحه نمایش بدهم. یعنی 4 فریم ایجاد کرده و در هر فریم فقط قسمتی از کادر را به طرف بیرون بیاورید تا کل تصویر دوم در وسط صفحه ظاهر شود

:گل:موفق باشین دوستان عزیز:گل:
​