آموزش طراحی بنرهای متحرک

[Mohammad Moradi 39]

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

بنرهای ساخته شده در زیر قرار گرفته اند به ترتیب شماره

هرکدام را که مایل به یادگیری آن هستید با ذکر نام شماره بگید تا آموزشش قرار بگیره

بنر1

بنر2

بنر3

[Mohammad Yousefi 14]

ضمن عرض سلام و خسته نباشید حضور استاد مرادی عزیز، به اطلاعتون می رسونم که قبلا یکی از دوستان به نام آثای ساطوری آموزش ویدئویی این کار رو در انجمن قرار دادند.

[Mohammad Moradi 39]

ممنون- ولی ما که با این انگیزه اومدیم جلو چطور باید شه؟!............

شاید در هر آموزش نکته هر چند ریز باشد که جای یادگیری و مرور دارد

ضمن عرض سلام و خسته نباشید حضور استاد مرادی عزیز، به اطلاعتون می رسونم که قبلا یکی از دوستان به نام آثای ساطوری آموزش ویدئویی این کار رو در انجمن قرار دادند.

[hadi20 10]

با سلام و سپاس از شما

امکان دارد که بنرهای فلش را هم آموزش دهید ؟

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

ممنون

[hamedalizadeh 10]

بنر2

به نظر من بهتر باشه

[mohsenshams 10]

بنر 3 را محبت کنید آموزش بدهید

[Komail 12]

به نظرم ایده ی خوبی هستش دوست عزیز

در صورت امکان بنرهای شماره 2 و شماره 3

متشکرم

موفق باشید دوست عزیز

[masood111 13]

شماره 2

بي زحمت

[Mohammad Moradi 39]

خوب مثل اینکه شماره 2 و 3 برگزیده شده اند

[Mohammad Moradi 39]

آموزش طراحي بنر شماره 2

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

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

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

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

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

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

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

[mrshir 10]

دوست عزیز نمی گدارید

[Mohammad Moradi 39]

قسمت دوم آموزش طراحي بنر- شماره 2

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

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

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

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

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

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

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

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

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

[Mohammad Moradi 39]

قسمت سوم آموزش طراحي بنر - شماره 2

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

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

16. بعد از فعال کردن پنل انیمیشن اولین فریم ، فریم بنر شما می باشد . دقت کنید که تمام لایه ها به غیر از لایه اول باید غیر فعال باشد . به تصویر زیر دقت کنید . از لایه کادر آبی رنگ 3 کپی بگیرید .از کادر زرد 3 کپی بگیرید . از بقیه کادرها به غیر لایه اصلی یک کپی به غیر از لایه اصلی بگیرید .

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

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

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

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

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

21. حالا باید کادر زرد و آبی را طی دو مرحله محو کنیم . دفعه قبل از بالا به پایین کادرها را می آوردیم ایندفعه از پایین به بالا

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

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

23. نوبت میرسه به آن سه کادری که در آخر درست کردیم .

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

به تصویر زیر دقت کنید تا مراحل و زمانبندی فریم ها را بهتر متوجه شوید

[parmis 10]

از آموزش خوبتون ممنون

بنری که در بالای آپلود سنتر سایت قرار داره را با چه برنامه ای ساخته اند؟

http://jupload.ir/do.php?filename=joomlaforum.ir_13506827661.pdf

[baharloo75 18]

دوست عزیز

سلام

این بنر با فلش طراحی شده عزیزم

برقرار باشید

[bizinesman 10]

با سلام و عرض ادب

درصورت امکان بنر شماره 3 را نیز آموزش بدهید

ممنون

[Mohammad Moradi 39]

بله همون طور كه دوست خوبمون گفتند با فلش

البته با فتوشاپ هم مي تونيد خيلي سخته و به زيبايي فلش در نمياد به اين صورت...

دوست عزیز

سلام

این بنر با فلش طراحی شده عزیزم

برقرار باشید

[Mohammad Moradi 39]

بزودي آموزش ساخت بنر شماره 3 رو هم آماده و در اختيار شما عزيزان قرار مي دهم

من دانش خود را در اين راه در اختيار شما قرار مي دهم

شما هم اين دانش را به ديگران با حفظ حق ناشر و راوي آن در اختيار ديگران قرار دهيد

[Komail 12]

سلام دوست عزیز

قصد ادامه کار رو ندارید ؟؟؟

[saam1367 10]

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

[reza.sh 19]

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

مطئمن شیدبا فرمت gif. ذخیره میشه

[saam1367 10]

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

[Mohammad Moradi 39]

با سلام

وقتی که در فتوشاپ تمام کار کردید از منوی file/save as webpage یا save for web

را انتخاب کنید در پنجره باز شده در قسمت سمت راست بالا می تونید نوع فرمت رو مشخص کنید jpg یا gif

در پایین پنجره سمت چپ روی preview کلیک کنید تا بن شما در مرورگر باز شود

حال تمامی کدها برای درج در سایت نمایش می ده و هم می تونید با کلیک راست بر روی بنر و انتخاب گزینه save pictures as بنر خود را ذخیره کنید

کار تمومه

سعی کنید همون gif باشه

من فتوشاپ cs5 را گفتم تو تمانی مشابه هستند

[Mohammad Moradi 39]

بزودی آموزش طراحی شماره 3 رو هم آموزششو قرار می دهم

[Mohammad Moradi 39]

آموزش طراحي بنر متحرك - شماره 3

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

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

3. بزارید در همین ابتدا بگم که می خواهم این بنر را به چه صورتی طراحی کنم . روش کار به این صورت هست که ابتدا 2 یا 3 متن را در ابتدا قرار میدهیم که در ابتدا محو بوده و یکدفعه ظاهر می شوند سپس تصویر دستگاه X.VISION را وارد بنر میکنیم و باز در مرحله بعدی تصویر را محو و متنهای دیگر را به همان حالت اول جایگزین می کنیم .