طراحی بنر تبلیغاتی ساده

ابزارهای تولید محتوا » ادوبی فتوشاپ » طراحی بنر تبلیغاتی ساده
۲۲ اسفند ۱۳۸۹ چاپ

خیلی از دوستان درخواست کردند تا آموزش نحوه ی ایجاد یک بنر تبلیغاتی رو براشون آماده کنیم و امروز نوبت به عملی کردن خواسته ی این دوستان عزیز هست.
همونطور که می دونید بنرهای تبلیغاتی نقش مهمی در ایجاد ترافیک سایت / وبلاگ بازی می‌کنند و در‌واقع هرچه بنر بهتر باشه درصد موفقیت برای جذب مخاطب بیشتر خواهد بود.
قبل از شروع لازم هست که برای طراحی بنر یه سری اصول رو بدونیم:

  1. در طراحی بنر از بیش از 3 یا 4 رنگ استفاده نکنید.
  2. از ترکیبی از رنگهای گرم و شاد استفاده کنید.
  3. حداکثر 2 تا 3 نوع فونت رو بکار بگیرید.
  4. نوشته‌های بنر باید کلمات کلیدی تشکیل‌دهنده ی سایت/وبلاگ شما باشند.
  5. از کلماتی گول زننده و عباراتی مثل کلیک کنید خودداری کنید.
  6. تاجای ممکن حجم بنر رو کم کنید (این نکته ممکنه ساده باشه ولی خیلی مهمه!).

خوب نکته ی دیگه ای به ذهنم نمیاد اگه هم اومد در بین آموزش اون رو ذکر خواهم کرد پس مثل همیشه با صدا زدن فتوشاپ عزیز! کار رو شروع می کنیم.

یک بوم سفید با عرض 468 پیکسل و ارتفاع 60 پیکسل ایجاد کنید.سپس رنگ‌های پس زمینه و پیش‌زمینه رو به ترتیب بر روی سفید(ffffff#) و قرمز (cf012f#) تنظیم کنید.
ابزار Gradient رو انتخاب کنید و از پایین به بالا یک گرادیان ایجاد کنید تا تصویری مانند تصویر زیر داشته باشیم:
طراحی بنر تبلیغاتی ساده
حالا ابزار Rounded Rectangle رو انتخاب کنید، رنگ رو بر روی نارنجی (#fd7909) تنظیم کنید و یک مستطیل از بالا به پایین ایجاد کنید و سعی کنید حالتی شبیه زیر ایجاد کنید:

طراحی بنر تبلیغاتی ساده
نحوه ی شیشه‌ای کردن رو قبلاً با هم یاد گرفته‌ایم پس اینجا برای جلوگیری از طولانی شدن مطلب از اون فاکتور می گیریم! ( آموزش افکت شیشه ای )
سایر تنظیمات شامل موارد زیر هست:
سایه(drop shadow) با زاویه ی 120 درجه ، Distance 5px و size 5px .

طراحی بنر تبلیغاتی ساده
البته ما مقداری هم از inner Glow و Stroke استفاده کردیم که شما هم می تونید بر حسب سلیقه خودتون از این گزینه ها استفاده کنید.

طراحی بنر تبلیغاتی ساده

 

طراحی بنر تبلیغاتی ساده

خوب در مرحله بعد کلمات کلیدی سایت / وبلاگ خودمون رو با استفاده از ابزار Type وارد می کنیم.ما در اینجا از فونت آبان با رنگ سفید و Stroke مشکی با اندازه 1px استفاده کردیم:

طراحی بنر تبلیغاتی ساده
حالا زیر همین کلمات کلیدی آدرس سایت رو وارد می‌کنیم و از افکت های Stroke و Drop Shadow استفاده می‌کنیم تا بیشتر توی چشم بیاد:

طراحی بنر تبلیغاتی ساده
دوباره به سراغ ابزار Rounded Rectangle می‌رویم و یک مستطیل کوچک به رنگ سفید ایجاد می‌کنیم.سپس با استفاده از منوی
Edit → Free Transform و یا کلید میانبر Ctrl+T این مستطیل ایجاد شده رو کمی مورب می‌کنیم تا شکل زیر رو داشته باشیم:

طراحی بنر تبلیغاتی ساده
افکت هایی که برای این مستطیل استفاده کردیم شامل موارد زیر هست :
Drop Shadow ،Bevel and Emboss ، Satin و Color Overlay !
طراحی بنر تبلیغاتی ساده

 

طراحی بنر تبلیغاتی ساده

توجه کنید با کلیک بر روی Gloss Contour در منوی Bevel and Emboss نمودار رو به شکلی که در پایین میبینید تغییر بدید.

طراحی بنر تبلیغاتی ساده

 

طراحی بنر تبلیغاتی ساده

 

طراحی بنر تبلیغاتی ساده

خوب حالا یک لایه جدید ایجاد می‌کنیم و با استفاده از ابزار Type عنوان سایت رو با رنگ قرمز درون این مستطیل که ایجاد کرده‌ایم می نویسیم و با افکت های Bevel and Emboss و Stroke اون رو تزیین می کنیم! تا تصویری شبیه زیر داشته باشیم:

طراحی بنر تبلیغاتی ساده در فتوشاپ
خوب تقریباً کار ما تموم شده و برای کاملتر شدن این بنر ، لوگوی سایت رو هم به اون اضافه می‌کنیم تا در نهایت بنر ما به این شکل در بیاد!

طراحی بنر تبلیغاتی ساده در فتوشاپ
برای اینکه بتونید حجم و کیفیت بنر رو برای ذخیره کردن اون کنترل کنید می تونید از منوی File → Save For Web and Devices کمک بگیرید!
امیدوارم با استفاده از این تکنیک های ساده و با سلیقه ی خودتون بتونید بنرهای زیبایی برای سایت / وبلاگ خودتون ایجاد کنید و بازدید کننده های زیادی رو جذب کنید.

 

گفتگو پیرامون طراحی بنر تبلیغاتی ساده

(منتشر شده: 12 | در انتظار تایید: 0)
امیز

باید برای ساخت بنر چه نرم افزاری رو دان کنیم؟؟؟؟؟؟؟؟؟

پاسخ دهید
زهره

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

پاسخ دهید
یوسف

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

پاسخ دهید
عصرعلم

در پاسخ به یوسف

سلام
تصاویر Gif متشکل از چند فریم هستند که هر کدام از این فریمها تصاویر gif یا jpg هستند. تصاویر gif معمولا توسط مرورگرها باز میشوند مگر اینکه از نرم افزارهای خاصی استفاده کنید.

پاسخ دهید
یوسف

سلام ممنون از آموزش های بسیار مفید در عین حال ساده
خواستم بدونم وقتی بنر یا انیمیشن دو بعدی رو با فرمت گیف ساختیم چطور میتونیم واسه وبلاگ بزاریم

پاسخ دهید
عصرعلم

در پاسخ به یوسف

سلام
بعد از اینکه بنر رو آپلود کردید باید با استفاده از html در وبلاگ یا سایت قرار بدید، میتونید از کد زیر استفاده کنید:

برای بنر ۴۶۸ در ۶۰ :


<a href="Adrese maghsad" target="_blank" rel="nofollow"><img src="Adrese Tasvir" height="60" width="468" alt="توضیح تصویر" />
</a>

برای بنر ۱۲۰ در ۲۴۰ هم height میشه ۲۴۰ و width میشه ۱۲۰٫

پاسخ دهید
ramin

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

پاسخ دهید
سجاد

در پاسخ به ramin

سلام
با استفاده از فتوشاپ تنها میتونید بنر رو ایجاد کنید و برای لینک دادن به تصویر باید از html استفاده کنید.

پاسخ دهید
ز

سلام
ممنون که کامل آموزش میدید
وقتی فارسی تایپ میکنم برعکس تایپ میکنه اوایل درست کار میکرد ولی بعد نمیدونم چی شد نمیتونم تایپ کنم و لطفا بنرهای متحرک رو هم آموزش بدید

پاسخ دهید
سجاد

در پاسخ به ز

سلام ،
با استفاده از این مطلب و آموزش ساخت انیمیشن میتونید بنرهای متحرک هم بسازید ولی با این حال بزودی یک آموزش برای این کار آماده خواهم کرد.

پاسخ دهید
حامد

سلام ممنون از مطالب جالبتون
اما من اون وسط گیر افتادم
اول اینکه وقتی میخواستم مستطیل کنم رنگش کمرنگتر شد
دوم هم اینکه سایه(drop shadow) رو از کجا پیدا کنم؟
لطفا محل اون ابزارهایی که گذاشتین رو ذکر کنید ممنون

پاسخ دهید
سجاد

در پاسخ به حامد

سلام ، ممکنه دلیل کمرنگتر شدن به خاطر شیشه ای شدن باشه و یا اینکه استایل خاصی رو بهش نسبت دادید (وقتی بر روی ابزار Rounded Rectangle رو انتخاب کنید در نوار بالایی فتوشاپ یک قسمتی هست که استایل ابزار رو نشون میده) که با تمرین بیشتر راحت تر این مشکل رو حل خواهید کرد. اگر بر روی یک لایه کلیک راست کنید گزینه ای رو خواهید دید به نام Blending Options . با کلیک بر روی این گزینه پنجره ای برای تنظیمات لایه براتون نمایش داده میشه که بخش هایی از این پنجره رو ما در این آموزش استفاده کردیم مثل drop shadow,inner glow,stroke و … .
سعی میکنم آموزش ابزارها و کلا مقدمات فتوشاپ رو هم در سایت قرار بدم تا شما دوستان راحت تر و بهتر کار با این نرم افزار رو یاد بگیرید.

پاسخ دهید

فقط گزینه‌ی وسط را تیک بزنید. »مشاهده قوانین