تجربیـــات و آموختـه های من

My Experiences and Learnings
تجربیـــات و آموختـه های من
طبقه بندی موضوعی

بنرهای تبلیغاتی

يكشنبه, ۲۶ مرداد ۱۳۹۳، ۰۳:۲۸ ب.ظ

در این پست قصد دارم آموزش کاربردی فتوشاپ در قالب طراحی یک بنر تبلیغاتی ساده،را داشته باشم،بیش از چند ماه هست به تعدادی از دوستان قول آموزش فتوشاپ را داده ام! زمان اجازه نمیداد و به انضمام چاشنی فراموش کاری !

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

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

فتوشاپ کمی بد قلق هست اما شیرین! ولی با کمی سرو کله زدن به معنای واقعی(!) باهاش میتونید راحت درامد خوبی رو بدست بیارید!

بعد از اینکه این نرم افزار را دانلود کردید و لینکهای زیر را برای آشنایی با تولزها (ابزارها) ی آن مطالعه کردید و تا حدودی با شورت کی های آن اشنا شدید(برای حرفه ای کار کردن ،شورت کی یا شورت کات یا کلید های میانبر خیلی مهمه!)،میتوانیم آموزش گام به گام را آغاز کنیم؛


بنر چیست؟به زبان خیلی ساده،یک کادر یا یک تصویری که در اندازه معین تعریف شده که شما میتوانید تبلیغاتتان را در آن در قالب متن و تصویر بگنجانید، هم میتواند متحرک باشد و هم ساده.
مهمترین نکته برای یک بنر،کوتاهی جملاتش،سادگی و جذابیت رنگ ها و تصاویر به کار رفته در آن می باشد.
بنر 60*468 به فول بنر معروف هست و در اکثر سایت ها این بنر کاربرد بیشتر ی داره.و ما از این بنر شروع میکنیم؛

قسمت اول طراحی بنرساده 60*468  :

گام اول:برنامه فتوشاپ را باز میکنید و یک فایل جدید با ابعاد،عرض 60 پیکسل و طول 460پیکسل ایجاد میکنید.
(file > new == ctrl + n) همراه با بک گراند ترسنپرنت.به باقی تنطیمات هم دست نزنید .


(1)برای شروع اول باید بک گراندی مناسب با محتوا و موضوع بنرتان درست کنید.با استفاده از ابزار Set foreground color
(2) برای رنگ کردن بک گراندتان باید از سطل رنگ استفاده کنید .ابزار Paint buket tool
(3)بعد از انتخاب سطل رنگ آن را به روی بنرتان آورده وکلیک میکنید.

برای مرحله بعد شما باید یک لایه جدید بسازید. (layer>new>layer == ctrl+shift+n)
نکته:برای راحتی کارتان برای هر مرحله ای که میخواهید انجام دهید یک لایه بسازید تا در صورت عدم نیاز به آن لایه، آن را بتوانید به راحتی پاک کنید بدون اینکه مراحل قبلی را از بین ببرید!
روی لایه ی جدید میخواهیم یک مستطیل بگذاریم،از منوی سمت راست تولز مورد نظر را انتخاب کنید و بر روی لایه ی جدید بکشید.

وقتی مستطیل خود را بکشید ،برای زیبایی کار که وابسته به سلیقه شماست،کمی آن را به پایین بیاورید تا بدین شکل شود.
نکته :برای حرکت لایه هایی که ایجاد میکنید دوراه دارید:
  1. اول بر روی لایه از سمت راست کلیک کنید،کلید ctrl را بگیرید و با استفاده از موس یا کلید های بالا و پایین و چپ و راست،آن را به حرکت در بیاورید.
  2. کلید میانبر V از روی کیبرد یا ابزار Move tools میتوانید به راحتی حرکت دهید.


همین کار را سه مرتبه دیگر انجام دهید تا بدین شکل دربیاید.


لایه هایمان نیز به این تعداد شدند.

مرحله ی بعد،ما باید بر روی سه مستطیلی که ایجاد کردیم،متنی بنویسیم.
برای این کار بر روی لایه ی دو که کلیک میکنیم و بعد از سمت راست Horizontal type tool یا کلید میانبر T را میزنیم و بر روی کادر آبی فیروزه ایمان کلیک میکنیم.همان طور که در لایه ها میبینید،یک لایه از نوع تکست با نام layer 5 ایجاد شد. 
بر روی کادر شروع میکنید به تایپ کردن، مانند نمونه .


برای انتخاب نوع فونت و سایز آن و رنگ آن از منوی ایجاد شده در بالای صفحه استفاده کنید.(کارکردی شبیه به ورد دارد.)


همین کار را برای لایه های دیگر،کادرهای دیگر نیز انجام دهید. مانند نمونه .


نکته: ctrl + s فراموش نشه !  file > save as

حالا میخواهیم برای هر یک از کلمه های نوشته شده بر روی کادرها،کمی استایل بدهیم برای زیبایی بیشتر و  البته مشخص تر شدن نوشته ها در بنر.
برای این کار بر روی گوشه ی سمت راست لایه ی تسکت اول یعنی "طراحی سایت" دابل کلیک میکنید تا یک پنجره Layer style باز شود
 ( Layer > Leyer style <Belending Options )
 گزینه ی اول drop shodw را برای سایه ی کلمات انتخاب میکنیم.
گزینه ی Stroke را انتخاب را انتخاب میکنیم تا برجسته و بلدتر شود.
اوکی کنید پنجره style را.



این کار را برای باقی نوشته های کادر های "لوگو و بنر" و " کارت ویزیت" نیز انجام میدهیم.
اما برای کادر اخر "وبلاگ مای جهان" که تمام هدف بنر هست و تمام بنر بر روی این کادر مانور میدهند را باید کمی استایل بیشتری بدهیم که بلدتر و در چشم تر باشد.
باز بر روی لایه ی تکست "وبلاگ مای جهان" دابل کلیک میکنیم.
همان دو استایل Drop Shadow و Stroke را انتخاب میکنیم به علاوه ی استایل Gradient Overlay.
بر روی خود نوشته ی گردینت دابل کلیک کنید و استایل مورد نظر را انتخاب کنید.
برای من استایلی هست که ترکیبی از رنگهای زرد و نارنجی هست.
پنجره را اوکی کنید و ببندید.
بنر ما تمام شد.
خروجی بنر شما با فرمت PNG. به این شکل درامد.
امیدوارم مفید بوده باشه.
خسته نباشید :-)

اما دو نکته: برای خروجی گرفتن از برنامه ی فتوشاپ فرمت خروجیمان PSD. یا PDD. هست .
 و برای اینکه بنر خود را مشاهده کنید باید از آن خروجی با فرمت PNG. بگیرید.


دریافت فایل PSD
حجم: 41.6 کیلوبایت

نظرات  (۲)

  • نسیم منافی
  • سلام 
    خیلی عالیه زینب جان خسته نباشی
    مشتاقانه  منتظر ادامه آموزش هات هستم.
    پاسخ:
    سلام
    ممنونم .امیدوارم مفید بوده باشه :-)
    انشاالله طی یک یا دو قسمت آینده اموزش بنر متحرکم میذارم  .
    بله حتما؛

  • فرشته حسینی
  • سلام

    ممنون از آموزشی که گذاشتین..خیلی مفید بود
    پاسخ:
    سلام

    بالاخره تشریف آورید خانم حسینی؛
    خیلی وقت پیش به شما قولش را داده بودم،دیر شد!
    تایم آزادی نبود و فراموشی هم مزید بر علت شد.
    عذرتقصیر آوردم :-)

    خوشحالم که مفید بوده
    خداراشکـــر.

    ارسال نظر

    ارسال نظر آزاد است، اما اگر قبلا در بیان ثبت نام کرده اید می توانید ابتدا وارد شوید.
    شما میتوانید از این تگهای html استفاده کنید:
    <b> یا <strong>، <em> یا <i>، <u>، <strike> یا <s>، <sup>، <sub>، <blockquote>، <code>، <pre>، <hr>، <br>، <p>، <a href="" title="">، <span style="">، <div align="">
    تجدید کد امنیتی