آموزش کامل طراحی بنر تبلیغاتی در فتوشاپ - از سطح مبتدی

راهنمای مطالعه :

طراحی بنر تبلیغاتی وب چیست؟
مهترین نکات در طراحی بنر تبلیغاتی
چگونه یک بنر تبلیغاتی تاثیرگذار بسازیم؟
سخن پایانی در مورد این آموزش

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

برای طراحی بنر تبلیغاتی می‌بایست نکات و اصولی را رعایت کنید که برای شما کلیک و ترافیک مناسبی به همراه آورد. طراحی بنر تبلیغات دارای اصولی و روشی سیستماتیک است که عناصر آن به یکدیگر مرتبطند. به عنوان مثال مکان قرارگیری و یا اندازه‌ی بنر در تاثیرگذاری تبلیغات نقش به سزائی دارند. در ادامه در قالب لیستی از نکات و دستورالعمل‌هایی که می‌بایست در طراحی بنر تبلیغاتی وب در نظر بگیرید، شما را در طراحی یک بنر تاثرگذار و فوق العاده راهنمایی می‌کنیم:

۱. از تاثیرگذارترین اندازه استاندارد بنر استفاده کنید

بر اساس گزار Google Adsense ، موفق‌ترین و تاثیرگذارترین اندازه استاندارد بنر، اندازه‌های زیر می‌باشند:
. اندازه‌ی ۷۲۸ در ۹۰ پیکسل - Leaderboard
. اندازه ۳۰۰ در ۶۰۰ پیکسل - Half Page
. اندازه ۳۰۰ در ۲۵۰ پیکسل - Medium Rectangle
. اندازه ۳۳۶ در ۲۸۰ پیکسل - Large Rectangle

۲. بنر تبلیغاتی خود را در جای مناسب بگذارید

مکانی از وبسایت را خریداری کنید که طراحی شما برجسته‌تر به نظر بیاید مثل بالای صفحه‌ی اول و یا نزدیک محتوای اصلی صفحه.

۳. سلسله مراتب را رعایت کنید

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

لوگوی شرکت شما

لوگوی شرکت شما برای بیشتر دیده شدن باید در طراحی شما وجود داشته باشد. اطمینان حاصل کنید که لوگوی شما به خوبی دیده می‌شود اما توجه داشته باشید، به اندازه‌ی قسمت‌های دعوت به عمل یا گزاره ارزش شما نباشد.

گزاره ارزش

گزاره ارزش نمایش سرویس یا محصولی است که شما ارائه می‌دهید و توجه مشتری را با ارائه پیشنهادات مختلف مانند تخفیف جلب می‌کنید. چیزهایی مثل « کیفیت بالا » یا « ۵۰ درصد تخفیف » یا « پیشنهاد با محدودیت زمان ». این چیزی است که باید بیشتر فضای بنر تبلیغاتی شما را بگیرد و اولین چیزی باشد که بیننده خواهد دید.

دعوت به عمل

دعوت به عمل یا به اختصار CTA یک متن یا دکمه است که کاربران را به کلیک کردن دعوت می‌کند. عباراتی مانند « بیشتر بخوانید » یا « از اینجا شروع کنید » یا « اینجا تماشا کنید » می‌تواند بهترین انتخاب برای این قسمت باشند. این قسمت می‌بایست کاملا مشخص و به صورت کانونی در بنر طراحی و قرار داده شود.

۴. ساده باشد

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

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

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

پیشنهادتان می‌بایست مختصر و مفید باشد و به بینندگان نشان دهید که چه چیزی را ارائه می‌کنید. دعوت به عمل یک متن یا یک دکمه است که مشتریان را به وبسایتتان دعوت می‌کند. عبارات کوتاهی مثل « اکنون بخرید » یا « مشترک شوید » از نمونه‌های مناسب می‌باشند.

در ادامه می‌خواهید بنری نیم صفحه یا Half page طراحی کنیم که شامل تمامی عناصر مهم و مورد نیاز یک بنر تبلیغاتی موثر باشد. همچنین این طراحی را بر روی بنر سایز پاپ آپ نیز اعمال خواهیم کرد که مثالی فوق العاده برای درک ایجاد قالب در کارهای آینده است.

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

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

۱. فایل طراحی بنر تبلیغاتی خود را تنظیم کنید

قدم اول

در فوتوشاپ به مسیر File > New بروید. نامی برای فایل بنر تبلیغاتی خود انتخاب کرده و بنویسید. فایل را با این ابعاد تنظیم کنید:

• عرض « Width » با اندازه ۳۰۰ پیکسل
• ارتفاع « Height » با اندازه ۶۰۰ پیکسل
• گرایش « Orientation » بر روی حالت Portrait
• وضوح « Resolution » با اندازه ۷۲ پیکسل
• حالت رنگ بندی « Color Mode » بر روی حالت RGB
• حالا بر روی دکمه‌ی Create کلیک کنید.

قدم دوم

برای دور تا دور صفحه طراحی خود را حاشیه بسازید. برای این کار به مسیر View > New Guide رفته، پنجره‌ی New Guide باز شده، گزینه‌ی افقی یا Horizontal را انتخاب کرده و قسمت Position را بر روی عدد ۵۸۰ پیکسل تنظیم کنید.

برای ساخت خطوط عمودی نیز دوباره به مسیر View > New Guilde رفته و در پنجره باز شده، گزینه‌ی عمودی را انتخاب کرده و قسمت Position را بر روی عدد ۲۰ پیکسل تنظیم کرده و بر روی دکمه‌ی OK کلیک کنید.

حال دوباره به مسیر View > New Guide رفته و این بار در قسمت Position عدد ۲۸۰ پیکسل را تنظیم کنید.

۲. بنر تبلیغاتی خود را طراحی کنید

قدم اول

شما می‌توانید از هر طرحی که مد نظر دارید استفاده کنید اما ما در اینجا از تصویر خانمی بلوند یا مو طلایی برای طراحی بنرمان استفاده می‌کنیم. عرض یا Width تصویر می‌بایست عرض بنر تطابق داشته و یکسان باشد. اگر نیاز به تغییر اندازه یا resize دارید از دکمه Command به همراه T در مک و Ctrl به همراه T در ویندوز استفاده کنید.

قدم دوم

حال دکمه‌ی I کیبورد را فشار دهید تا از ابزار Eyedropper استفاده کنید. نشانگر ابزار را بروی قسمت زرد رنگ تصویر اضافه کرده در قسمت قبل برده و رنگ آن را انتخاب کنید.

وارد پنل لایه‌ها « Layers » شده و به مسیر Create a New Fill or Adjustment Layer > Solid Color بروید. لایه پیش زمینه می‌بایست به صورت خودکار به رنگ زردی که انتخاب کرده‌ایم در بیاید در غیر این صورت از کد رنگ fcf1d3 را وارد کرده و بر روی دکمه‌ی OK کلیک کنید. حال لایه رنگ ثابتی که ساخته‌ایم را به زیر لایه تصویر ببرید.

قدم سوم

لایه‌ی جدیدی را در پنل لایه‌ها با استفاده از کلید‌های میانبر Shift و Command و N در مک و Shift به همراه Ctrl و N در سیستم‌عامل ویندوز بسازید.

حال با استفاده از ابزار قلمو یا Brush Tool ( که با کلیک میانبر B نیز می‌توانید به آن دسترسی پیدا کنید ) که رنگ پس زمینه آن را بر روی کد رنگ fcf1d3 تنظیم کرده اید، بر روی قسمت گوشه‌ی بالا، سمت راست عکس رنگ‌ آمیزی کنید. با این کار یک نمای یک دست به کار خواهید بخشید.

قدم چهارم

همه‌ی لایه‌ها را با نگه داشتن دکمه‌ی Shift و کلیک بر روی اولین لایه و آخرین لایه، انتخاب کنید. بر روی دکمه‌ی Create a New Group کلیک کنید. بر روی فولدر به وجود آمده دوبار کلیک کرده و نام آن را به Background تغییر دهید.

قدم پنجم

ابزار ساخت متن یا Text Tool را که در تولبار موجود است را انتخاب کنید ( همچنین می‌توانید از طریق کلید میانبر T به این ابزار دسترسی پیدا کنید). پیشنهادتان یا تبلیغات خود را به بنر اضافه کنید. در اینجا من کلمه‌ی Spring را با استفاده از فونت متفاوت و خاصی اضافه می‌کنم که بر روی موضوع فصل متمرکز است. در این قسمت می‌توانید از دیگر ابزار‌های متنوع فوتوشاپ مانند جلوه‌های سه بعدی استفاده کنید. توصیه ما برای یادگیری این مبحث استفاده از آموزش ارائه شده در لینک زیر است.

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

از طریق مسیر Type > Panels > Character Panel وارد پنل کاراکتر « Character » شوید. فونت خود را بر روی گزینه‌ی Awosem تنظیم کرده ( اگر این فونت را بر روی سیستم خود ندارید، می‌توانید از طریق جستجو در گوگل آن را دانلود کرده و نصب کنید ) و همچنین اندازه یا Size را بر روی 175pt تنظیم کنید. بر روی دکمه‌ی رنگ یا Color کلیک کرده و بر روی رنگ سیاه تنظیم کنید. حال با استفاده از خطوط راهنما، متن را در مرکز بنر تنظیم می‌کنیم.

قدم ششم

دوباره با استفاده از ابزار متن یا Text Tool ( با کلید میانبر T )، بقیه متن تبلیغاتی خود را اضافه کنید. در اینجا باقی پیشنهادمان را که « فروش تا ۵۰ درصد تخفیف، تنها به صورت آنلاین » را اضافه می‌کنیم. شما می‌توانید این کار را در قالب یک لایه یا هر کدام از قسمت‌ها و خطوط را در لایه‌های جداگانه انجام دهید.

وارد پنل کاراکتر یا Character شده و تنظیمات زیر را انجام دهید:

• کلمه‌ی SALE را بر روی فونت Morton حالت Bold با اندازه 110pt قرار دهید. بر روی دکمه‌ی رنگ یا Color کلیک کرده و بر روی کد رنگ d82a2e قرار دهید.


• عبارت UP TO 50% را بر روی فونت Morton حالت Bold قرار داده با اندازه‌ی 110pt و Leading 40pt، با تنظیم رنگ سیاه قرار دهید.


• عبارت OFF SELECTED ITEMS را بر روی فونت Morton حالت Bold با اندازه 40pt و Leading 35pt قرار دهید.


• این لایه را زیر لایه Spring قرار داده و هر دو لایه را انتخاب کرده و فولدر جدیدی با نام Copy بسازید.

قدم هفتم

حالا زمان آن رسیده است که دکمه‌ی دعوت به عمل را به طرحمان اضافه کنیم. در این مورد ما عبارت «اکنون بخرید» یا Shop Now > را انتخاب کرده‌ایم.

با استفاده از ابزار Text ( با کلید میانبر T )، متن دکمه‌ی دعوت به عمل را با تنظیمات فونت Morton با حالت Bold، اندازه‌ی 110pt با Tracking 100pt و رنگ سیاه به طرحمان اضافه می‌کنیم.

با استفاده از ابزار مستطیل یا Rectangle Tool که از طریق کلید میانبر U نیز قابل دسترس است، یک مستطیل به دور متن دعوت به عملمان می‌کشیم. به نوار کنترل یا Control bar رفته و رنگ سفید با اندازه عرض ۱۴۵ پیکسل و ارتفاع ۳۵ پیکسل را انتخاب و تنظیم کنید.

قدم هشتم

برای آن که دعوت به عملمان نسبت به دیگر عناصر بنر، متمایز به نظر بیاید، می‌بایست کمی سایه به آن اضافه کنیم. در پنل لایه‌ها، بر روی لایه‌ی مستطیل راست کلیک کرده و گزینه‌ی Blending Options را انتخاب کنید.

در پنجره‌ی Layer Style گزینه‌ی Drop Shadow را انتخاب و چک کنید. بر روی تنظیمات Drop Shadow، شفافیت یا Opacity را بر روی ۳۵ درصد، زاویه یا Angle را بر روی ۱۳۰، فاصله یا Distance را بر روی ۱۰ پیکسل و اندازه یا Size را بر روی ۲۰ پیکسل تنظیم کنید. سپس بر روی دکمه‌ی OK کلیک کنید.

حال لایه‌های متن و مستطیل دعوت به عمل را انتخاب کرده و در قالب فولدری به نام Call to action با یکدیگر ترکیب کنید.

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

برای مشاهده وبسایت فرادرس - کلیک کنید