آموزش طراحی بنر تبلیغاتی (۱)

آموزش طراحی بنر تبلیغاتی (۱)

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

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

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

[button link=”http://aksaya.ir/aksaya/wp-content/uploads/2011/09/aksaya-ir.pdf” newwindow=”yes”] Download[/button] آموزش ساخت بنر

ساخت بنر تبلیغاتی با فتوشاپ

این آموزش ها ( ساخت بنر تبلیغاتی ) تماماٌ بوسله نرم افزار فتوشاپ انجام می گیرد یعنی فریم دادن به بنر هم با خود فتوشاپ انجام میدیم .
شروع کار :
مرحله ۱ : ابتدا فتوشاپ را باز نموده سپس یک فایل جدید ایجاد کنید ولی با تنظمیات زیر :
aksaya banner1 آموزش ساخت بنر  + 5 پست زمینه آماده
مرحله ۲ : حال که فایل را برای ساخت بنر استاندارد ایجاد نموده اید عکس زیر را دریافت نموده و مانند زیر به فایل خود اضافه کنید :
بکگراند بنر متحرک
با کلیک بر روی عکس زیر و دریافت سایز بزرگ آن اقدام نمائید
افزدون بکگراند به بنر تبلیغاتی
برای دیدن سایز واقعی رو عکس کلیک کنید !
مرحله ۳ : افزودن یک لابه در بالای لایه های دیگر ( رنگ این لایه را سفید مطلق قرار دهید ) , سپس از لینک زیر پترن های کاربردی ما را که در طراحی ها خود بسیار مورد استفاده قرار میدهیم را دریافت نموده و به پترن های خود اضافه نماید :
حال تنظیمات زیر را اعمال نمائید :
و در مرحله بعد :
مرحله ۴ : حال با افزودن یک add layear Mask بر روی لایه کاری و با استفاده از ابزار  گرادینت ( G ) و قرار دادن گرادینت در حالت دیفالت ( همون مشکی / سفید ) و استفاده از Liener Gradinet  یا همین شکل که میبینید :
و کشیدن این ابزار از یک سمت به طرف دیگر  بطوری که حالت زیر رو ایجاد کنید : ( البته یادتون نره که opticaly رو هم تا ۶۰ ۷۰ درصد کم کنید )
مر حله ۵ : حال همین لایه را یک بار دیگه کپی نموده ( با میانبر : crtl + j یک کپی ایجاد نمائید ) و آن را به طرف دیگه به صوروت قرینه قرار دهید :
خوب تا اینجا یک پست زمینه ساده و شیک داریم حالا می خوام با یک شیپ یک مکان مناسب برای درج نوشته های تبلیغاتی خودمنون اضافه کنم
مرحله ۶ : به وسیله Rounded Rectangle Tool یا همون میانبر u مانند شکل و با جزئیات زیر یک مستطیل به کارتون اضافه کنید : ( مقدار radious : 8px )
Rounded Rectangle Tool
مرحله ۷ : تنظمیات زیر را بر روی شکل اعمال نمائید :
۱: 
  ۲:
۳ : 
ور در پایان به نتیجه روبرو می رسیم :
مرحله ۸ : افزودن نوشته های دلخواه با فونت دلخواه
من از فونت yeken استفاده می کنم و Drop shadow برای سایه دادن به فونت استفاده می کنم که بر زیبایی کا می افزاید :
ساخت بنر تبلیغاتی
مرحله ۸ : حال هر آنچه دوست دارین بهکارتون اضافه کنید : آدرس سایت / لوگو سایت / آیکون / یا طرح خاصی
من آدرس سایت رو با همین فونت فارسی که کار کردیم اضافه کردم بعدش یک مستطیل همانند روش بالا که توضیح دادم اضافه کردم بعدش هم  اومدم یک آیکون رو به کار اضافه کردم و نتیجش شد :
خوب این پایان مرحله اول هست تا اینجا همه چی ثابت هست … و سعی کردیم تا جایی که میشه با ساده ترین راه زیبا ترین کار رو طراحی کرده باشیم . من با چند تا عکس دیگه ۵ تا طرح شبیه بالا طراحی کردم شما هم میتونید از این نمونه های آماده بنر استفاده کنید :
نمونه آماده بنر
ست بنر تبلیغاتی
بگکراند بنر تبلیغاتی
طرح  آماده بنر
آموزش ساخت بنر با نمونه آماده
فکر کنم از ۵ تا بیشتر شد !  ( اینم هدیه من  )
بکگراند بنر
پست زمینه بنر
تو این  زمان که  این کار ها رو آماده  می کردم یکی از طرح ها نظرمو بیشتر جلب کرد , بعدش یه تصمیمیـــــــــــــــــمی گرفتم ! که برم .. روی همین بنر ادامه آموزش رو تکمیل کنم icon biggrin آموزش ساخت بنر  + 5 پست زمینه آماده
مرحله ۹  ( متحرک سازی اجزا ) : از نوار ابزار بالای فتوشاپ  گزینه انیمشین رو (  window  /  Animation )  رو فعال کنید  , توجه ! این گزینه فقط در ورژن های extended  اگه درست نوشته باشم همون ورژن های کامل هست ! من از cs5 me استفاده می کنم به شما هم این پیشنهاد رو می کنم همیشه سعی کنید آخرین ورژن از نرم افزار ها رو واسه کار کردن خودتون انتخاب کنید که خیلی مزایا داره …
خوب حالا کار ما مثل عکس که میبینید شروع میشه:
یک پیشنهاد اگه تعداد لایه های کارتون خیلی زیاد شد ! سعس کنید اونایی که مربوط به پست زمینه هست یا نیاز به هیچ متحرک سازی ندارن همه لایه ها رو با هم مرج ( همون ترکیب خودمون )
روش ترکیپ لایه ها ( Merge layers ) : تمام لایه هایی که دوست دارین با هم ترکیب بشن سلکتشون کنید ( میتونید از crtl برای تک تک و shift گروهی سلک کردن استفاده کنید )حالا روی یکی از لایه ها جایی که اسم لایه هست کلیک راست و روی گزینه Merge layers کلیک کنید , می بینید که تما لایه ها یکی شد .
مرحله ۱۰ : اول کار تعداد فریم خود را تنظیم نمائید ( هر چه فریم ها کمتر حجم کار کمتر ولی در کنارش یک حرکت واقعی رو ندارید ) معمولا من روی ۱۰ فریم یا ۱۵ یا ۲۰ این حدود کار می کنم
برای این کار مثل شکل زیر عمل کنید و بعد از آن با ابزار پایین که zoom slider هست روی فریم ها زوم کنید
مرحله ۱۱ : حالا یکی از لایه ها و نوشته ها رو نگاه کنید چند تا گزینه داره که هر کدوم وظیفه خاصی دارن من اولین بار که کار کردم خودم بصورت تجربی همه رو تست کردم و میدونم هر کدوم چه کاری انجام میدم
ولی برای آموزش خوب نمیشه تجربه هامو  انتقال بدم .. می گردم از مرجع های اصلی این بخشو بصورت تخصصی براتون آماده می کنم
مرحله ۱۲ : در این بخش آموزشی از بخش انیمیش فتوشاپ رو آماده کردم که از لینک روبرو می تونید ببینید : آموزش پنل انیمیشن فتوشاپ
مرحله ۱۳ : لایه نوشته آموزش بنر تبلیغاتی رو در قسمت فریم ها باز کنید در این بخش می خواهیم از گزینه استایل برای متحرک سازی استفاده کنیم
در حالت اول ناوبر Keyframe رو در فریم ۰ قرار داده بدون هیچ کار اضافی .. بعد از آن یک ناوبر Keyframe در فریم ۵ افزوده و سپس تنظیمات استایل لایه رو مانند زیر تنظمب کنید و ok کنید
در قسمت بعد یک Keyframe در فریم ۱۰ اضافه کنید و استایل اون رو مانند حالت اول قرار دهید . در این مرحله می تونید نتیجه کار ور با play مشاهده کنید .
مرحله ۱۴ : برای ذخیره سازی از میانبر  CRTL + ALT + SHIF + S استفاده نمائید و سپس ذخیره به عنوان gif را انتخاب کنید و تنظمات زیر را اعمال و ذخیره نمائید :
و نتیجه کار :
همین طور که مشاهده کردید بخش توجه ما روی پست زمینه بود جلوه های  انیمیشن ! در بخش بعدی افکت های آماده ( بنر های آماده براتون آماده می کنم ) تا الگو هایی برای افزایش خلاقیت شما باشه .

 

اشتراک گذاری این پست

نظر (10)

  • مهیار پاسخ

    داداشی سلام دمت گرم خیلی آموزش خوبی بود من میخوام یه بنر تبلیغاتی درست کنم با موضوع هاست و دامنه
    اگه میشه چند تا پس زمینه خوب واسم میل کن

    تیر ۱۳, ۱۳۹۱ at ۷:۴۳ ب.ظ
    • علیرضا قلی پور پاسخ

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

      مرداد ۹, ۱۳۹۱ at ۱:۱۰ ق.ظ
  • Pooya vali mohammadi پاسخ

    salam bebakhshid mikhastam age mishe 1 amozesh bezarid darmorede barname EximiousSoft Banner Maker v3.00 man 1 soal dg ham dashtam in banne haye to site haye music ke hast male socks va vpn poshte zamine banner masalan axe ye dokhtare man mikham bedonam ono chetori tarahi mikonam age bem begin mamnoon misham ba tashakor

    تیر ۱۵, ۱۳۹۱ at ۱:۴۵ ب.ظ
    • علیرضا قلی پور پاسخ

      با سلام بررسی میشه و افکت مورد نظر رو هم اشاره می کنم که چطوری کار کنید
      در مورد برنامه مورد نظر هم فکر کنم فتوشاپ بهترین نرمافزار باشه

      مرداد ۹, ۱۳۹۱ at ۱:۱۱ ق.ظ
  • matin پاسخ

    سلام من ایصفحه اموزش به فرومت pdfدر آوردم از مدیر این فایل دانلود کنه تو یه جای مطمئن آپلود کنه و به نمایش بگذاره

    http://www.web2pdfconvert.com/download?path=b5c5f518-9447-457d-9def-66a97138a7a9aksaya-ir.pdf

    شهریور ۵, ۱۳۹۱ at ۳:۵۲ ب.ظ
    • علیرضا قلی پور پاسخ

      با تشکر از دوست عزیز ! فایل رو برای دانلود قرار می دهیم همه ازش استفاده کنن!

      شهریور ۵, ۱۳۹۱ at ۴:۳۳ ب.ظ
      • سعیده پاسخ

        سلام مرسی عالیه مطالب

        شهریور ۱۵, ۱۳۹۱ at ۱۱:۰۶ ق.ظ
        • علیرضا قلی پور پاسخ

          خواهش می کنم باعث خوشححالی ما خواهد بود و تلاش ما را برای ارائه مقالات و آموزش های بعدی چند برابر می کند

          شهریور ۱۵, ۱۳۹۱ at ۵:۲۸ ب.ظ
  • محمد پاسخ

    خیلی به کارم امد تشکر……

    شهریور ۱۹, ۱۳۹۱ at ۹:۴۳ ب.ظ
  • میلاد پاسخ

    سلام
    میتونی چند تا پس زمینه با موضوع کانتر استریک و جی تی ای درست کنی

    اگر درست کردی ممنون میشم

    درست کردی برام ایمیل کن
    viperr12@yahoo.com

    مهر ۳, ۱۳۹۱ at ۳:۴۰ ب.ظ

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *