ورود به اکانت شما

نام کاربری *
رمز عبور *
مرا بخاطر بسپار

ایجاد حساب کاربری

فیلد های ستاره دار را پر کنید.
نام *
نام کاربری *
رمز عبور *
تکرار رمز عبور *
ایمیل *
تکرار ایمیل *
کپچا *
بارگذاری کپچا

آموزش طراحی بنر فلش آسا رایان با فتوشاپ مطلب ویژه

توسط 21 ارديبهشت, 1392 16195 0

در صورت مفید بودن این مقاله حتما نظر خودتان را در پایین مطلب برای ما ارسال کنید

flash banner home

آموزش تصویری طراحی بنر فلش  آسا رایان با فتوشاپ | آموزش مرحله به مرحله طراحی بنر فلش با فتوشاپ
یکی از دغدغه هایی که برای صاحبان سایت های اینترنتی وجود دارد طراحی بنرهای فلش می باشد . یکی از حرفه ای ترین نرم افزارها برای انجام اینکار Adobe Flash Professional می باشد که مختص ساخت تصاویر متحرک بوده و هست . فتوشاپ نیز قابلیت ساخت تصاویر متحرک را دارا می باشد اما تفاوتی که بنرهای نرم افزار فلش با فتوشاپ دارد که مزییت نیز محسوب می شود سبک بودن خروجی بنرها بدلیل برداری بودن اشکال کشیده شده و کیفیت و وضوح بالاتر می باشد . به هر ترتیب این بخش نیز در قسمت آموزش فتوشاپ به درخواست کاربران و بازدید کنندگان عزیز راه اندازی و در بخش مربوطه قرار می گیرد .
ابعاد استاندارد بنرهای فلش به شرح زیر می باشد .
(کاربران و بازدیدکنندگانیکه مشکل سرعت اینترنت دارند در پایان آموزش فایل PDF آموزش را دانلود کنند)

 flash banner home

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

Standard_Web_banner_Sizes

فتوشاپ را اجرا کنید .
1. یک صفحه به ابعاد 60×468 با رزولیشن 72 ایجاد کنید .

 

Flash_Banner_ASARAYAN1

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

Flash_Banner_ASARAYAN2

Flash_Banner_ASARAYAN3

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

Flash_Banner_ASARAYAN4

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

Flash_Banner_ASARAYAN5

Flash_Banner_ASARAYAN6

بعد از ساختن فریم اول روی لایه کادر کشیده شده دابل کلیک کنید تا تنظیمات پیش فرض گزینه Gradient Overlay را با توجه به تصویر زیر تغییر بدهیم .

Flash_Banner_ASARAYAN7

 

Flash_Banner_ASARAYAN8

4. به این مرحله دقت کنید و هرقسمتی را که متوجه نشدید برگردید و از دوباره تکرار کنید .
فریم اول ساخته شد
رنگ پس زمینه کادر نیز تغییر کرد
حالا به ترتیب من ابزار تایپ Horizantal Type Tool را انتخاب میکنم و سه متن را به دلخواه در قسمت های مختلف کادر در لایه های مستقل تایپ میکنم . در لایه های مستقل

 

Flash_Banner_ASARAYAN9

 

Flash_Banner_ASARAYAN10

 

Flash_Banner_ASARAYAN11

 

Flash_Banner_ASARAYAN12

 

Flash_Banner_ASARAYAN13

 

Flash_Banner_ASARAYAN14

به ترتیب لایه ها دقت کنید . همه لایه ها را با برداشتن تصویر چشم از کنار آنها غیر فعال کنید .با کادر قرمز مشخص کرده ام

Flash_Banner_ASARAYAN15

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

Flash_Banner_ASARAYAN16

 

Flash_Banner_ASARAYAN17


فریم اول بدون هیچ تنظیمات و تغییراتی می باشد . یک فریم دیگر با کلیک بر روی آیکون Duplicates Selected Frame ایجاد کنید . با کادر قرمز و فلش مشخص کرده ام

Flash_Banner_ASARAYAN18

زمان این فریم را به یک ثانیه تغییر داده و آیکون چشم کنار لایه را فعال کنید .

Flash_Banner_ASARAYAN19

 

Flash_Banner_ASARAYAN20

حالا در فریم بعدی باید متن اول ناپدید بشه تا 4 متن بعدی جایگزینش بشن . برای انجام اینکار یکبار دیگه روی کلید Duplicates Selected Frame کلیک کنید تا یک فریم دیگه ساخته بشه بعد از اون باید آیکون چشم متن اول را غیر فعال کنیم . زمانش را هم برگدونید به 5میلی ثانیه

 

Flash_Banner_ASARAYAN21


به ترتیب یک فریم با Duplicates Selected Frame ایجاد کرده و 4 لایه متن های تایپ شده را به ترییب فعال می کنیم . یک فریم ساخته و یک لایه را فعال کنید

Flash_Banner_ASARAYAN22

 

Flash_Banner_ASARAYAN23

 

Flash_Banner_ASARAYAN24

 

 Flash_Banner_ASARAYAN25

  

Flash_Banner_ASARAYAN26

  

Flash_Banner_ASARAYAN27

  

Flash_Banner_ASARAYAN28

  

Flash_Banner_ASARAYAN29

 

حالا باید یک فریم ایجاد کرده و 4 آیکون چشم کنار 4 لایه را غیر فعال کنیم .فریم خالی .زمان را روی 1ثانیه تنظیم کنید

 Flash_Banner_ASARAYAN30

فریم آخر هم با زمان 1 ثانیه ایجاد کرده و لایه آخر را فعال کنید .

 

Flash_Banner_ASARAYAN31


در مرحله آخر هم یک فریم خالی ایجاد کرده و روی کلید Paly کلیک کنید تا تغییراتی که ایجاد کرده اید را مشاهده کنید .

Flash_Banner_ASARAYAN32

 

Flash_Banner_ASARAYAN33

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

Flash_Banner_ASARAYAN34


برای ذخیره فایل کلیدهای ترکیبی ALT + SHIFT +CTRL+S را با هم بفشارید تا صفحه Save For Web نمایش داده شود . حالا بنر مورد نظر را با فرمت GIF ذخیره کنید تا تغییرات را بهتر متوجه بشوید . امیدوارم از این آموزش لذت برده باشید . نظر فراموشتون نشه

 

flash_banner_home

لینک دانلود فایل PSD :سرورمستقیم
لینک دانلود PDF آموزش : سرور مستقیم

این مورد را ارزیابی کنید
(0 رای‌ها)
آخرین ویرایش در پنج شنبه, 07 خرداد 1394 ساعت 18:49
کلیه حقوق متعلق است به فروشگاه آسارایان. طراحی و پشتیبانی: webriz
تک وب دیزاین-قالب فارسی جوملا