آموزش طراحی بنر در فتوشاپ

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

سلام خدمت کاربران عزیز

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

سطح مقدماتی: آموزش طراحی بنر در فتوشاپ

بنرها در اندازه های مختلفی ساخته می شوند (اندازه بنر تبلیغاتی) که ما در این پست یک بنر در اندازه 60*468  طراحی می کنیم و خود شما می توانید همان بنر را در اندازه های دیگری نیز طراحی کنید. همچنین بنری که ما طراحی می کنیم در سبک فلت است.

اطلاعات آموزش:

  1. فتوشاپ cc
  2. دانلود گرادیان فلت
  3. سطح: آسان
  4. زمان مورد نیاز: 8 دقیقه

قدم اول: ساخت سند جدید

فتوشاپ خود را باز کنید و یک سند جدید در اندازه های زیر ایجاد کنید.(برای ایجاد سند از کلید های ترکیبی Ctrl+N می توانید استفاده کنید)

آموزش طراحی بنر در فتوشاپ

قدم دوم: تنظیمات اولیه فتوشاپ

باید به منو فتوشاپ مراجع کرده و در بخش Window تیک گیزنه Timeline را بزنید.(مانند تصاویر عمل کنید)

آموزش طراحی بنر در فتوشاپ

آموزش طراحی بنر در فتوشاپ

آموزش طراحی بنر در فتوشاپ

خب تا اینجای کار فتوشاپ ما آمادست تا بنرمون رو طراحی کنیم.

قدم سوم: نوشتن متن و انتخاب بک گراند

حالا متن خودتون رو با استفاده از فونتی که براتون قرار دادم بنویسین و اندازه متن رو روی 20px قرار بدین.

آموزش طراحی بنر در فتوشاپ

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

1. سایت های مختلفی وجود دارن که می تونیم به آن ها مراجعه کنیم و رنگ مورد نظرمون را انتخاب کنیم که من سایت flatuicolorpicker رو پیشنهاد می کنم. سایت های دیگری هم هستن که با جستجو داخل گوگل می توانید از آن ها استفاده کنید.

2.این راه گزینه بهتری هست به نظر من که از همین راه استفاده می کنیم من یک پک گرادیان 50 تایی از رنگ های فلت برای دانلود گزاشتم که شما آن را دانلود می کنید و فایل گرادیان را داخل فتوشاپ اجرا می کنید حالا شما به راحتی می توانید به رنگ های گرادیان خود دسترسی داشته باشید

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

کد رنگی لایه متن: ecf0f1

کد رنگی لایه بک گراند: 2ecc71

اینم تا اینجای کار:

آموزش طراحی بنر در فتوشاپ

قدم چهارم: متحرک کردن بنر

حالا میرسیم به قسمت مهم کار و اونم متحرک ساختن بنر تبلیغاتیمون هست.اول شما باید لایه متنی که نوشتین رو کاملا به سمت راست ببرید که دیده نشود(توجه به تصویر)

آموزش طراحی بنر در فتوشاپ

بعد یک فرم جدید در منو Timeline ایجاد می کنیم

آموزش طراحی بنر در فتوشاپ

فرم دوم را انتخاب کنید و سپس لایه متنی را به سر جای اولش برگردانید

آموزش طراحی بنر در فتوشاپ

حالا بر روی فرم اول بروید و سپس روی گزینه ای که در تصویر مشاهده می کنید کلیک کنید

آموزش طراحی بنر در فتوشاپ

خب در پنجره باز شده تنظیمات لازم رو مطابق تصویر انجام دهید و سپس دکمه ok را بزنید.

آموزش طراحی بنر در فتوشاپ

امیدوارم تا اینجای کار خسته نشده باشید اینا رو یک بار انجام بدین دیگه راحت کمتر از 1 دقیقه می تونید هر بار انجام بدین.

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

طبق تصویر زمان اولین فرم را روی 0/2 ثانیه و زمان آخرین فرم را روی 0/5 ثانیه قرار می دهیم و تایمر دیگر فرم ها را روی 0 قرار می دهیم. همچنین باید گزینه تکرار شونده را انتخاب کنید تا هر بار بنر ما تکرار شود.

آموزش طراحی بنر در فتوشاپ

قدم پنجم: جذاب کردن بنر

برای این که بنرمون یکم بهتر بشه و از این حالت خشکی در بیاد یک افکت دیگه هم بهش میدم(نمیدونم اسمش افکت میشه یا چیز دیگه به بزرگواری خودتان ببخشید:)

در منو تایم لاین روی آخرین فرم کلیک کنید و یک فرم جدید ایجاد کنید و زمان آن را روی 0 بگزارید.دیگه آموزشش رو جزئی نمیگم چون بالا آموزشش رو یک بار گفتم می تونید برگردید به قدم چهارم و یک بار دیگه آموزشش رو ببینید.

بعد یک بار دیگر هم از لایه آخر یک فرم جدید بسازید

آموزش طراحی بنر در فتوشاپ

حالا فرم اخر را انتخاب کرده و سپس لایه متن را انتخاب کنید و opacity آن را روی %0 قرار دهید. طبق تصویر مراحل را شماره گزاری کردم.

آموزش طراحی بنر در فتوشاپ

زمان آخرین فرم را روی 0/2 ثانیه قرار می دهیم و بعد بر روی فرم قبلی بروید (شماره 10) و سپس روی گزینه مشخص شده کلیک می کنیم و تنظیمات را مطابق با تصویر انجام می دهیم.

آموزش طراحی بنر در فتوشاپ

و حالا با کلیک بر روی این گزینه بنر ما شروع به حرکت می کند

آموزش طراحی بنر در فتوشاپ

قدم ششم: ذخیره فایل و مرحله پایانی

دیگه به آخر خط رسیدیم و کار بنرمون تا اینجا تموم شد فقط مونده که اون رو ذخیره کنیم. برای ذخیره بنر به منو File و سپس گزینه Save for Web را انتخاب کنید و یا این که می توانید از کلید های ترکیبی Alt + Shift + Ctrl + S استفاده کنید. در پنجره باز شده تنظیمات را مانند تصویر انجام دهید و روی دکمه save کلیک کنید.

آموزش طراحی بنر در فتوشاپ

اینم از بنرمون، بنر شما چجوری شده ؟

آموزش طراحی بنر در فتوشاپ

این اولین پست من در این سایت بود و امیدوارم شما دوستان با نظراتتان قوت قلبی برای من شوید تا انرژی چندین برابری برای پست های بعدی داشته باشم.

آموزش طراحی بنر در فتوشاپ

کامنت ها

5 پاسخ به “آموزش طراحی بنر در فتوشاپ”

    • درود
      منظورتون رو درست نفهمیدم بنر برای کجا گوشی میخواین.
      اگر از بنر منظورتون داخل مروگر گوشی نشون بده که همین اندازه بزنین سایت ریسپانسیو باشه فکر میکنم درست میشه.
      اگر منظورتون از بنر برای استفاده داخل نرم افزار های گوشی هست که باید از کسی که نرم افزار رو طراحی کرده بپرسین بنده اطلاع دقیقی ندارم ولی فکر میکنم 128*720 هست.
      خیلی ممنون از نظرتون اولین نظر هست و منو خوش حال کرد D:

      • منظورم داخل تلگرام و شبکه های مجازیه
        اندازه را خودم امتحان کردم به دست اوردم ولی رزولیشن رو نمیدونم چون عددی میدم واضح نمیشه.
        خواهش می کنم، من همیشه پیگیر سایت و کارهای شما هستم

لطفا اگر سوالی نامرتبط با این مطلب دارید، از تب «پرسیدن سوال» استفاده کنید

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد.

لطفا اگر سوالی خارج از موضوع این مطلب دارید آن را در فروم مطرح کنید.

<