Mohammad Moradi

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

27 پست در این موضوع

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

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

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

بنر1

baneer.gif

بنر2

banner.gif

بنر3

head.gif

Share this post


Link to post
Share on other sites
آموزش ووکامرس قالب جوملا قالب وردپرس قالب رایگان وردپرس قالب رایگان جوملا هاست نامحدود هاست جوملا هاست لاراول هاست وردپرس هاست ارزان هاست ربات تلگرام خرید دامنه آموزش ساخت ربات تلگرام با php آموزش لاراول آموزش cPanel آموزش php آموزش فرم ساز RSform آموزش ساخت ربات جذب ممبر آموزش ساخت ربات دوستیابی آموزش ساخت ربات فروشگاهی برای ووکامرس آموزش طراحی سایت داینامیک با php آموزش بخش پشتیبانی با rsticket

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

Share this post


Link to post
Share on other sites

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

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

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

Share this post


Link to post
Share on other sites

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

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

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

ممنون

Share this post


Link to post
Share on other sites

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

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

متشکرم

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

Share this post


Link to post
Share on other sites

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

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

business card_ASARAYAN1.gif

joomlaforum.ir_13512608241.gif

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

joomlaforum.ir_13512608242.gif

flash-banner-in-photoshop4.gif

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

مد لایه را برابر با Overlay قرار بدهیدflash-banner-in-photoshop6.gif

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

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

flash-banner-in-photoshop9.gif

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

flash-banner-in-photoshop11.gif

joomlaforum.ir_13512609771.gif

Share this post


Link to post
Share on other sites

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

flash-banner-in-photoshop13.gif

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

flash-banner-in-photoshop14.gif

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

flash-banner-in-photoshop15.gif

flash-banner-in-photoshop16.gif

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

flash-banner-in-photoshop17.gif

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

flash-banner-in-photoshop18.gif

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

flash-banner-in-photoshop19.gif

flash-banner-in-photoshop20.gif

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

flash-banner-in-photoshop21.gif

flash-banner-in-photoshop22.gif

flash-banner-in-photoshop23.gif

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

flash-banner-in-photoshop24.gif

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

flash-banner-in-photoshop25.gif

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

flash-banner-in-photoshop26.gif

flash-banner-in-photoshop27.gifflash-banner-in-photoshop28.gif

flash-banner-in-photoshop29.gif

Share this post


Link to post
Share on other sites

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

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

Flash_Banner_ASARAYAN2.gif

Flash_Banner_ASARAYAN3.gif

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

Flash_Banner_ASARAYAN4.gif

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

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

flash-banner-in-photoshop30.gif

17. زمان اولین فریم را به 5 دهم ثانیه تغییر بدهید flash-banner-in-photoshop31.gif

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

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

20. مرحله 18 و 19 را برای کادر نارنجی تکرار میکنم . به تصاویر زیر دقت کنید flash-banner-in-photoshop34.gif

flash-banner-in-photoshop35.gif

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

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

flash-banner-in-photoshop37.gif

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

flash-banner-in-photoshop39.gif

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

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

به تصویر زیر دقت کنید تا مراحل و زمانبندی فریم ها را بهتر متوجه شوید flash-banner-in-photoshop40.gif

banner.gif

Share this post


Link to post
Share on other sites

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

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

ممنون

Share this post


Link to post
Share on other sites

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

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

دوست عزیز

سلام

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

برقرار باشید

Share this post


Link to post
Share on other sites

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

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

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

Share this post


Link to post
Share on other sites

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

Share this post


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

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

با سلام

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

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

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

joomlaforum.ir_13527939671.jpg

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

کار تمومه

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

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

Share this post


Link to post
Share on other sites

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

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

business card_ASARAYAN1.gif

Flash_Banner_XVISION_ASARAYAN1.gif

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

Flash_Banner_XVISION_ASARAYAN2.gif

Flash_Banner_XVISION_ASARAYAN3.gif

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

Share this post


Link to post
Share on other sites

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

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

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری