آموزش ساخت بنر متحرک در این بخش از آموزش توجه ما بر روی بکگراند یا همون پست زمینه بنر هست , سعی می کنم تکنیکی رو بهتون آموزش بدم که بتونید از هر عکس و وکتوری برای پست زمینه کار استفاده کنید و بر کیفیت کارتون بیا افزایید
برای دیدن این آموزش کامل و دریافت بکگراند های آماده به ادامه مطلب مراجعه کنید..
دانلود آموزش طراحی بنر تبلیغاتی که توسط یکی از بازدید کننددگان خوب ( متین ) تهیه شد
[button link=”http://aksaya.ir/aksaya/wp-content/uploads/2011/09/aksaya-ir.pdf” newwindow=”yes”] Download[/button] آموزش ساخت بنر
ساخت بنر تبلیغاتی با فتوشاپ
این آموزش ها ( ساخت بنر تبلیغاتی ) تماماٌ بوسله نرم افزار فتوشاپ انجام می گیرد یعنی فریم دادن به بنر هم با خود فتوشاپ انجام میدیم .
شروع کار :
مرحله ۱ : ابتدا فتوشاپ را باز نموده سپس یک فایل جدید ایجاد کنید ولی با تنظمیات زیر :
مرحله ۲ : حال که فایل را برای ساخت بنر استاندارد ایجاد نموده اید عکس زیر را دریافت نموده و مانند زیر به فایل خود اضافه کنید :
با کلیک بر روی عکس زیر و دریافت سایز بزرگ آن اقدام نمائید
برای دیدن سایز واقعی رو عکس کلیک کنید !
مرحله ۳ : افزودن یک لابه در بالای لایه های دیگر ( رنگ این لایه را سفید مطلق قرار دهید ) , سپس از لینک زیر پترن های کاربردی ما را که در طراحی ها خود بسیار مورد استفاده قرار میدهیم را دریافت نموده و به پترن های خود اضافه نماید :
حال تنظیمات زیر را اعمال نمائید :
و در مرحله بعد :
مرحله ۴ : حال با افزودن یک add layear Mask بر روی لایه کاری و با استفاده از ابزار گرادینت ( G ) و قرار دادن گرادینت در حالت دیفالت ( همون مشکی / سفید ) و استفاده از Liener Gradinet یا همین شکل که میبینید :
و کشیدن این ابزار از یک سمت به طرف دیگر بطوری که حالت زیر رو ایجاد کنید : ( البته یادتون نره که opticaly رو هم تا ۶۰ ۷۰ درصد کم کنید )
مر حله ۵ : حال همین لایه را یک بار دیگه کپی نموده ( با میانبر : crtl + j یک کپی ایجاد نمائید ) و آن را به طرف دیگه به صوروت قرینه قرار دهید :
خوب تا اینجا یک پست زمینه ساده و شیک داریم حالا می خوام با یک شیپ یک مکان مناسب برای درج نوشته های تبلیغاتی خودمنون اضافه کنم
مرحله ۶ : به وسیله Rounded Rectangle Tool یا همون میانبر u مانند شکل و با جزئیات زیر یک مستطیل به کارتون اضافه کنید : ( مقدار radious : 8px )
Rounded Rectangle Tool
مرحله ۷ : تنظمیات زیر را بر روی شکل اعمال نمائید :
۱: 
۲:
۳ :
ور در پایان به نتیجه روبرو می رسیم :
مرحله ۸ : افزودن نوشته های دلخواه با فونت دلخواه
من از فونت yeken استفاده می کنم و Drop shadow برای سایه دادن به فونت استفاده می کنم که بر زیبایی کا می افزاید :
مرحله ۸ : حال هر آنچه دوست دارین بهکارتون اضافه کنید : آدرس سایت / لوگو سایت / آیکون / یا طرح خاصی
من آدرس سایت رو با همین فونت فارسی که کار کردیم اضافه کردم بعدش یک مستطیل همانند روش بالا که توضیح دادم اضافه کردم بعدش هم اومدم یک آیکون رو به کار اضافه کردم و نتیجش شد :
خوب این پایان مرحله اول هست تا اینجا همه چی ثابت هست … و سعی کردیم تا جایی که میشه با ساده ترین راه زیبا ترین کار رو طراحی کرده باشیم . من با چند تا عکس دیگه ۵ تا طرح شبیه بالا طراحی کردم شما هم میتونید از این نمونه های آماده بنر استفاده کنید :
ست بنر تبلیغاتی
طرح آماده بنر
آموزش ساخت بنر با نمونه آماده
فکر کنم از ۵ تا بیشتر شد ! ( اینم هدیه من )
بکگراند بنر
پست زمینه بنر
تو این زمان که این کار ها رو آماده می کردم یکی از طرح ها نظرمو بیشتر جلب کرد , بعدش یه تصمیمیـــــــــــــــــمی گرفتم ! که برم .. روی همین بنر ادامه آموزش رو تکمیل کنم ![icon biggrin آموزش ساخت بنر + 5 پست زمینه آماده]( "آموزش ساخت بنر + 5 پست زمینه آماده")
مرحله ۹ ( متحرک سازی اجزا ) : از نوار ابزار بالای فتوشاپ گزینه انیمشین رو ( window / Animation ) رو فعال کنید , توجه ! این گزینه فقط در ورژن های extended اگه درست نوشته باشم همون ورژن های کامل هست ! من از cs5 me استفاده می کنم به شما هم این پیشنهاد رو می کنم همیشه سعی کنید آخرین ورژن از نرم افزار ها رو واسه کار کردن خودتون انتخاب کنید که خیلی مزایا داره …
خوب حالا کار ما مثل عکس که میبینید شروع میشه:
یک پیشنهاد اگه تعداد لایه های کارتون خیلی زیاد شد ! سعس کنید اونایی که مربوط به پست زمینه هست یا نیاز به هیچ متحرک سازی ندارن همه لایه ها رو با هم مرج ( همون ترکیب خودمون )
روش ترکیپ لایه ها ( Merge layers ) : تمام لایه هایی که دوست دارین با هم ترکیب بشن سلکتشون کنید ( میتونید از crtl برای تک تک و shift گروهی سلک کردن استفاده کنید )حالا روی یکی از لایه ها جایی که اسم لایه هست کلیک راست و روی گزینه Merge layers کلیک کنید , می بینید که تما لایه ها یکی شد .
مرحله ۱۰ : اول کار تعداد فریم خود را تنظیم نمائید ( هر چه فریم ها کمتر حجم کار کمتر ولی در کنارش یک حرکت واقعی رو ندارید ) معمولا من روی ۱۰ فریم یا ۱۵ یا ۲۰ این حدود کار می کنم
برای این کار مثل شکل زیر عمل کنید و بعد از آن با ابزار پایین که zoom slider هست روی فریم ها زوم کنید
مرحله ۱۱ : حالا یکی از لایه ها و نوشته ها رو نگاه کنید چند تا گزینه داره که هر کدوم وظیفه خاصی دارن من اولین بار که کار کردم خودم بصورت تجربی همه رو تست کردم و میدونم هر کدوم چه کاری انجام میدم
ولی برای آموزش خوب نمیشه تجربه هامو انتقال بدم .. می گردم از مرجع های اصلی این بخشو بصورت تخصصی براتون آماده می کنم
مرحله ۱۲ : در این بخش آموزشی از بخش انیمیش فتوشاپ رو آماده کردم که از لینک روبرو می تونید ببینید : آموزش پنل انیمیشن فتوشاپ
مرحله ۱۳ : لایه نوشته آموزش بنر تبلیغاتی رو در قسمت فریم ها باز کنید در این بخش می خواهیم از گزینه استایل برای متحرک سازی استفاده کنیم
در حالت اول ناوبر Keyframe رو در فریم ۰ قرار داده بدون هیچ کار اضافی .. بعد از آن یک ناوبر Keyframe در فریم ۵ افزوده و سپس تنظیمات استایل لایه رو مانند زیر تنظمب کنید و ok کنید
در قسمت بعد یک Keyframe در فریم ۱۰ اضافه کنید و استایل اون رو مانند حالت اول قرار دهید . در این مرحله می تونید نتیجه کار ور با play مشاهده کنید .
مرحله ۱۴ : برای ذخیره سازی از میانبر CRTL + ALT + SHIF + S استفاده نمائید و سپس ذخیره به عنوان gif را انتخاب کنید و تنظمات زیر را اعمال و ذخیره نمائید :
و نتیجه کار :
همین طور که مشاهده کردید بخش توجه ما روی پست زمینه بود جلوه های انیمیشن ! در بخش بعدی افکت های آماده ( بنر های آماده براتون آماده می کنم ) تا الگو هایی برای افزایش خلاقیت شما باشه .
9 Responses
داداشی سلام دمت گرم خیلی آموزش خوبی بود من میخوام یه بنر تبلیغاتی درست کنم با موضوع هاست و دامنه
اگه میشه چند تا پس زمینه خوب واسم میل کن
با سلام تشکر! خوشحالم که مورد استفاده قرار گرفته. در صورت امکان حتما بزودی براتون ارسال می کنم
با سلام بررسی میشه و افکت مورد نظر رو هم اشاره می کنم که چطوری کار کنید
در مورد برنامه مورد نظر هم فکر کنم فتوشاپ بهترین نرمافزار باشه
سلام من ایصفحه اموزش به فرومت pdfدر آوردم از مدیر این فایل دانلود کنه تو یه جای مطمئن آپلود کنه و به نمایش بگذاره
http://www.web2pdfconvert.com/download?path=b5c5f518-9447-457d-9def-66a97138a7a9aksaya-ir.pdf
با تشکر از دوست عزیز ! فایل رو برای دانلود قرار می دهیم همه ازش استفاده کنن!
سلام مرسی عالیه مطالب
خواهش می کنم باعث خوشححالی ما خواهد بود و تلاش ما را برای ارائه مقالات و آموزش های بعدی چند برابر می کند
خیلی به کارم امد تشکر……
سلام
میتونی چند تا پس زمینه با موضوع کانتر استریک و جی تی ای درست کنی
اگر درست کردی ممنون میشم
درست کردی برام ایمیل کن
viperr12@yahoo.com