چاپ کردن این صفحه

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

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

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

banner

تا به حال 4 آموزش طراحی بنر متحرک یا فلش را برای شما مرحله به مرحله در بخش آموزش با نرم افزار فتوشاپ به صورت کاملا تصویری توضیح داده ام . طبقه قولی که داده بودم قرار بود مرحله به مرحله آموزشها پیچیده تر و دارای جذابیت بیشتری بشه . امروز یک بنر تبلیغاتی در یک سایت اینترنتی فارسی زبان دیدم که از لحاظ رنگ بندی و ترکیب عناصر در کنار هم دارای جذابیت بیشتری نسبت به مدل های مشابه بود که می خواهم برای شما طراحی کنم . روش درست کردن بنر هم به این صورت می باشد که ابتدا کلیه آبکت ها را طراحی کرده سپس بوسیله پنل Animation کلیه عناصر را همان طور که می خواهیم حرکت میدهیم .

 

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

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

 

shoe magic asarayan1

flash-banner-in-photoshop1

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

 

flash-banner-in-photoshop2

flash-banner-in-photoshop3

flash-banner-in-photoshop4

3. ابزار Rounded rectangle Tool را با Redius : 5px انتخاب کرده و یک کادر با درصد رنگی 0054ff همانند تصویر زیر بکشید .

flash-banner-in-photoshop5

مد لایه را برابر با Overlay قرار بدهید

flash-banner-in-photoshop6

4. من در این مرحله یک آیکون را روی کادر کشیده شده قرار داده (جهت دانلود به آخر آموزش مراجعه کنید)و با ابزار تایپ Horizontal Type Tool یک متن را در جای مشخص شده تایپ میکنم . درصد رنگی متن تایپ شده : ffdf00 و ffffff

flash-banner-in-photoshop7

4.1. کادر کشیده شده تا پایان آموزش به صورت ثابت در بنر وجود داره به همین دلیل با پایین نگه داشتن کلید Ctrl از روی کیبرد هر 5 لایه را انتخاب کرده و کلیدهای Ctrl+E را بزنید تا هر 5 لایه تبدیل به یک لایه شود

 

flash-banner-in-photoshop8

flash-banner-in-photoshop9

ابزار Rounded Tectangle Tool را با Redius : 5px انتخاب کرده و یک کادر با درصد رنگی 0054ff همانند تصویر زیر بکشید بعد از کشیدن کادر روی لایه کشیده شده دابل کلیک کرده و تنظیمات پیش فرض گزینه Stroke را همانند تصویر زیر تغییر بدهید

flash-banner-in-photoshop10

flash-banner-in-photoshop11

flash-banner-in-photoshop12

flash-banner-in-photoshop13

5. مرحله 5 را یکبار دیگر با یک آیکون دیگر و متن متفاوت با متن اصلی برای کادر جدید تکرار میکنم

flash-banner-in-photoshop14

6. یک کادر دیگه با ابزار Rounded Tectangle Tool با  Redius : 5px با درصد رنگی edb904 میکشم و یک متن را روی کادر کشیده شده تایپ میکنم .

flash-banner-in-photoshop15

flash-banner-in-photoshop16

7. حالا باید مرحله 4.1 را تکرار کنیم به این صورت که کادر نارنجی با متن خودش باید تبدیل به یک لایه بشه و کادر آبی کوچک رنگ با متن و آیکونی که روی آن قرار داره تبدیل به یک لایه .من اینکار را انجام داده و هر دو لایه را غیر فعال میکنم تا کادر جدید بکشم .

flash-banner-in-photoshop17

8. بعد از اینکه دو کادر را غیر فعال کردید یک مستطیل با ابزار Rectangle بکشید .

flash-banner-in-photoshop18

9. ابزار Custome Shape Toolرا انتخاب کرده و از لیست اشکال پیش فرض مثلث را همانند تصویر زیر انتخاب کنید . برای چرخش کادر کشیده هم باید از ابزار Free Transform با فشردن کلیدهای Ctrl+T از روی کیبرد استفاده کنید .

flash-banner-in-photoshop19

flash-banner-in-photoshop20

10. Fill لایه را برابر با صفر قرار دهید سپس روی کادر کشیده شده دابل کلیک کرده و تنظیمات گزینه Stroke را تغییر بدهید

flash-banner-in-photoshop21

flash-banner-in-photoshop22

flash-banner-in-photoshop23

11. با فشردن کلیدهای Ctrl+J یک کپی از کادر کشیده شده بگیرید و در طرف مقابل قرار بدهید

flash-banner-in-photoshop24

12. در مرحله بعدی یک کادر با ابزار Rectangle بکشید و تنظیمات آن را با توجه به مرحله 10 و 11 تغییر بدهید

flash-banner-in-photoshop25

13. بسیار خوب در این مرحله من داخل هر کادر یک متن تایپ میکنم سپس مثل مراحل قبل متن  با کادر کشیده شده را تبدیل به یک کادر میکنم

flash-banner-in-photoshop26

flash-banner-in-photoshop27 flash-banner-in-photoshop28

 

flash-banner-in-photoshop29

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

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

Flash Banner ASARAYAN2

Flash Banner ASARAYAN3

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

Flash Banner ASARAYAN4

16. بعد از فعال کردن پنل انیمیشن اولین فریم ، فریم بنر شما می باشد . دقت کنید که تمام لایه ها به غیر از لایه اول باید غیر فعال باشد . به تصویر زیر دقت کنید . از لایه کادر آبی رنگ 3 کپی بگیرید .از کادر زرد 3 کپی بگیرید . از بقیه کادرها به غیر لایه اصلی یک کپی به غیر از لایه اصلی بگیرید .
ممکنه از خودتان سوال کنید چرا 4 کپی !!! روش حرکت به این صورت هست که ابتدا کادر آبی رنگ طی دو مرحله به جای اصلی خودش حرکت داده می شود سپس کادر زرد رنگ با دو مرحله به پایین کادر آبی رنگ هدایت میشه . کادر زرد رنگ طی دو مرحله محو میشه . از دوباره کادر آبی  طی دو مرحله مثل کادر زرد رنگ محو میشه . هر دو کادر برای هر مرحله باید یک لایه داشته باشند . میشه 4 لایه

 

flash-banner-in-photoshop30

17. زمان اولین فریم را به 5 دهم ثانیه تغییر بدهید

 

flash-banner-in-photoshop31

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

 

flash-banner-in-photoshop32

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

 

flash-banner-in-photoshop33

20. مرحله 18 و 19 را برای کادر نارنجی تکرار میکنم . به تصاویر زیر دقت کنید

 

flash-banner-in-photoshop34

 

flash-banner-in-photoshop35

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

 

flash-banner-in-photoshop36

 

flash-banner-in-photoshop37

22. برای کادر آبی رنگ هم مثل کادر زرد باید در یک مرحله یک فریم جدید ایجاد کرده و کادر آبی رنگ را کمی به بالا ببریم . سپس یک کادر دیگر ایجاد و هر دو لایه را غیر فعال میکنیم

 

flash-banner-in-photoshop38

 

flash-banner-in-photoshop39

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

 

flash-banner-in-photoshop40

banner

 

برای دانلود فایل PSD کلیک کنید || PSD :سرورمستقیم 

رمز فایل : www.asarayan.com

این مورد را ارزیابی کنید
(0 رای‌ها)
آخرین ویرایش در دوشنبه, 04 خرداد 1394 ساعت 16:23

آخرین‌ها از سعید صبح خیز

تک وب دیزاین-قالب فارسی جوملا