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

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

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

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

آموزش طراحی بنر فلش با ابعاد 240×120 مطلب ویژه

توسط 20 فروردين, 1392 5267 0

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

banner

با یکی دیگر از آموزشهای طراحی بنر تبلیغاتی برای وب سایت ، در خدمت شما بازدید کنندگان عزیز هستم .

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

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

ابعاد این بنر به صورت استاندارد 240×120 با فرمت Gif می باشد . امیدوارم از این آموزش لذت ببرید .

 

 

فتوشاپ را اجرا کنید

1. یک صفحه به ابعاد 240×120 میلیمتر با رزولیشن 72 ایجاد کنید .

 

shoe magic asarayan1

Design-Banner-Tutorial ASARAYAN1

2. بر روی لایه کادر کشیده شده دابل کلیک کرده و تنظیمات گزینه Gradient Overlay را تغییر بدهید  .

Design-Banner-Tutorial ASARAYAN2

Design-Banner-Tutorial_ASARAYAN3

3. بعد از تغییر رنگ پس زمینه ، با ابزار Rounded Rectangle Tool یک کادر میکشم . درصد رنگی کادر کشیده شده : d7d7d7 | بعد از کشیدن کادر مورد نظر روی لایه آن دابل کلیک کرده و تنظیمات پیش فرض گزینه های مورد نظر را تغییر بدهید  .

Design-Banner-Tutorial_ASARAYAN4

Design-Banner-Tutorial_ASARAYAN5

4. یک کادر دیگه همانند کادر بالا میکشم

Design-Banner-Tutorial_ASARAYAN6

بر روی لایه کادر کشیده شده دابل کلیک کرده و تنظیمات پیش فرض را با توجه به تصویر زیر تغییر بدهید

Design-Banner-Tutorial_ASARAYAN7

Design-Banner-Tutorial_ASARAYAN8

Design-Banner-Tutorial_ASARAYAN9

Design-Banner-Tutorial_ASARAYAN10

5. یک دایره کوچک با درصد رنگی c0c1c2 کشیده و روی لایه دایره کشیده شده دابل کلیک کنید و تنظیمات گزینه inner shadow را تغییر بدهید

Design-Banner-Tutorial_ASARAYAN11

Design-Banner-Tutorial_ASARAYAN12

6. در مرحله بعدی هم سه کادر دیگه میکشم و سه آیکون که از اینترنت دانلود کرده ام را در گوشه کادر قرار میدهم . تنظیمات در تصویر زیر مشخص شده است .درصد رنگی کادر کشیده شده برابر است با : d7d7d7

Design-Banner-Tutorial_ASARAYAN13

Design-Banner-Tutorial_ASARAYAN14

Design-Banner-Tutorial_ASARAYAN15 Design-Banner-Tutorial_ASARAYAN16 Design-Banner-Tutorial_ASARAYAN17

7 . نوبت میرسه به تایپ متن در کادرهایی که تا این مرحله کشیده ام . دقت داشته باشید که بعد از تایپ متن باید تمام قسمت های مربوط به یک کادر را با هم Marge کنیم . یعنی اگر داخل بک کادر یک آیکون با یک متن تایپ شده است ، با انتخاب کلید Ctrl از روی کیبرد هر 3 لایه را انتخاب کنیم و بعد از آن کلیدهای Ctrl+E را از روی کیبرد بفشاریم تا هر سه لایه تبدیل به یک لایه شود .

Design-Banner-Tutorial_ASARAYAN18 Design-Banner-Tutorial_ASARAYAN19

شروع کار با پنل انیمیشن

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

Flash Banner ASARAYAN2

Flash Banner ASARAYAN3

 

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

Flash Banner ASARAYAN4

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

Design-Banner-Tutorial_ASARAYAN20

11. بعد از گرفتن کپی از لایه اول ابتدا لایه شماره 1 (1 از چهار ) را انتخاب کنید و فیلتر Blur > Motion Blur را با تنظیمات مشخص شده بر روی لایه اول اعمال کنید .

Design-Banner-Tutorial_ASARAYAN21

Design-Banner-Tutorial_ASARAYAN22

مرحله 11 را برای 2 لایه باقیمانده هم تکرار میکنم اما با تنظیمات دیگر . دقت داشته باشید که در هر مرحله باید لایه قبلی را غیر فعال کنید تا تغییرات را بدرستی مشاهده کنید

Design-Banner-Tutorial_ASARAYAN23

Design-Banner-Tutorial_ASARAYAN24

لایه چهارم باید بدون تغییر باشد

12. بعد از ایجاد لایه ها یک فریم جدید ایجاد میکنم و لایه اول را (مرحله 11) را فعال میکنم . زمانش را برابر با 0.2 قرار میدم .این مرحله را تا چهارمین لایه تکرار میکنم  .

Design-Banner-Tutorial_ASARAYAN25

Design-Banner-Tutorial_ASARAYAN26

Design-Banner-Tutorial_ASARAYAN27

Design-Banner-Tutorial_ASARAYAN28

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

Design-Banner-Tutorial_ASARAYAN29

Design-Banner-Tutorial_ASARAYAN30

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

Design-Banner-Tutorial_ASARAYAN31

Design-Banner-Tutorial_ASARAYAN32

Design-Banner-Tutorial_ASARAYAN33

15. حالا باید 3 کادر پایین صفحه را با هم انتخاب کنیم و یک فریم جدید ایجاد و کمی 3 کادر را به طرف چپ حرکت بدیم . opacity را هم برابر با 50 درصد قرار میدهم . زمانها را تغییر دادم  از روی تایم لاین تنظیم کنید

Design-Banner-Tutorial_ASARAYAN34

Design-Banner-Tutorial_ASARAYAN35

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

Design-Banner-Tutorial_ASARAYAN36

Design-Banner-Tutorial_ASARAYAN37

 

Design-Banner-Tutorial_ASARAYAN38


برای دانلود فایل PDF + PSDکلیک کنید || رمز فایل : www.asarayan.com
لینک دانلود فایل PDF + PSD :سرورمستقیم

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