گرافیستار | ارائه دهنده ی جدیدترین و برترین آموزش ها و محصولات گرافیکی
آموزش ساخت بنر سایت در فتوشاپ
آموزش ساخت بنر سایت در فتوشاپدر این آموزش نحوه ساختن بنر برای سایت رو در آموزش رایگان فتوشاپ با هم پیش خواهیم رفت. طرح و الگوی بنر ما ۲ عنصر اصلی تشکیل شده است: یک پیشنهاد و یک دعوت برای انجام کاری. در صورت تمایل می توانید لوگوی خود را اضافه کنید، و تصویری برای تقویت پیام.
پیشنهاد باید مختصر و قابل توجه باشد. شما باید به خوانندگان خود بگویید که چه چیزی تبلیغ می کنید. دعوت به انجام کاری یا فراخوان عمل، یک متن یا دکمه است که مخاطب را به وب سایت شما دعوت می کند. عبارات کوتاه مانند “اکنون بخرید” یا “اشتراک” مناسب هستند.
در این آموزش فتوشاپ، یک بنر عمودی نیمه صفحه را طراحی خواهیم کرد که شامل همه عناصر اساسی است. ما این طرح را در اندازه بنرهای بازشو خواهیم ساخت، که نمونه ایی خوبی برای طراحی قالب های بنر می باشد.
بخش اول – تنظیم یک فایل طراحی بنر وب
مرحله ۱
در فتوشاپ، به File> New بروید. سند جدید را در ابعاد زیر تنظیم کنید:
عرض تا ۳۰۰ پیکسل
قد تا ۶۰۰ پیکسل
جهت گیری به پرتره
وضوح تا ۷۲ پیکسل
حالت رنگ به RGB
روی Create کلیک کنید
مرحله ۲
با رفتن به View > New Guide، حاشیه در اطراف سند ایجاد کنید. در پنجره گزینه New Guide ، Horizontal را انتخاب کرده و Position را روی ۲۰ px قرار دهید. تأیید را کلیک کنید
به View > New Guide بروید , این بار موقعیت را به ۵۸۰ px تنظیم کنید.
برای ایجاد خطوط عمودی، به View > New Guide بروید. گزینه Vertical را انتخاب کرده و Position را روی ۲۰ px قرار دهید. تأیید را کلیک کنید
به این قسمت View > New Guide بروید، این بار موقعیت را روی ۲۸۰ px تنظیم کنید.
بخش دوم – آموزش طراحی بنر سایت
مرحله ۱
تصویر سبک retro را بر روی سند رها کنید. عرض تصویر باید با عرض بنر مطابقت داشته باشد. در صورت نیاز به تغییر اندازه ، Command-Transform را برای تبدیل فشار دهید.
مرحله ۲
با فشار دادن کلید I از صفحه کیبورد، ابزار Eyedropper را انتخاب کنید. از رنگ زرد نمونه برداری کنید.
به پنل Layers بروید و به ایجاد یک لایه جدید Fill یا Adjustment Layer> Solid Color بروید. نمونه پیش زمینه باید بطور خودکار تنظیم شود. اگر اینطور نیست ، از کد زیر استفاده کنید: # fcf1d3. تأیید را کلیک کنید
لایه رنگ جامد را زیر لایه تصویر حرکت دهید.
مرحله ۳
با فشار دادن Shift-Ctrl-N یک لایه جدید در پنل Layers ایجاد کنید.
با استفاده از ابزار Brush (B) و # fcf1d3 به عنوان پیش زمینه، گوشه سمت راست بالای تصویر را قلم مو بزنید. این کار ظاهری یکپارچه ایجاد می کند.
مرحله ۴
با نگه داشتن Shift و انتخاب لایه های اول و آخر ، تمام لایه ها را انتخاب کنید. بر روی دکمه Create a New Group کلیک کنید. بر روی پوشه دوبار کلیک کرده و آن را Background تغییر نام دهید.
مرحله ۵
از نوار ابزار ، متن ابزار (T) را انتخاب کنید. پیشنهاد یا آنچه را که تبلیغ می کنید اضافه کنید. در این حالت ، من “بهار” را با قلم متفاوت از بقیه بنرها برای تأکید بر فصل اضافه می کنم.
به پنل Character بروید (Type > Panels > Character Panel). قلم را روی Awosem و اندازه را بر روی ۱۷۵ pt تنظیم کنید. روی swatch Color کلیک کرده و آن را به رنگ سیاه تنظیم کنید.
برای قرار دادن متن در مرکز بنر از راهنما استفاده کنید.
مرحله ۶
با استفاده از ابزار متن (T)، بقیه نسخه خود را اضافه کنید. در این حالت ، بقیه متن خود را اضافه کنید: ‘فروش ، تا ۵۰٪ تخفیف از موارد انتخاب شده. فقط به صورت آنلاین. “می توانید این کار را روی یک لایه یا چند لایه انجام دهید.
به پنل Character بروید و از تنظیمات زیر استفاده کنید:
SALE: قلم Morton Bold، اندازه ۱۱۰ پوند. Color swatch را تنظیم کرده و آن را روی # d82a2e قرار دهید.
UP TO 50%:: فونت Morton Bold، اندازه ۱۱۰ پوند ، پیشرو ۴۰ پوند. Swatch Color را روی سیاه تنظیم کنید.
OFF SELECTED ITEMS: فونت Morton پررنگ ، اندازه ۲۵ پلات ، پیشرو ۲۵ تن.
ONLINE ONLY: فونت Morton Bold اندازه ۴۰ pt ، پیشرو ۳۵ pt.
این لایه را زیر لایه Spring قرار دهید. هر دو لایه را انتخاب کرده و یک پوشه جدید با نام Copy ایجاد کنید.
مرحله ۷
اکنون زمان آن رسیده است که دکمه تماس به اقدام را ایجاد کنید. در این حالت ، ما آن را “اکنون خرید کنید”Shop Now قرار می دهیم.
با استفاده از ابزار متن (T) ، فراخوانی را به اکشن اضافه کنید و از تنظیمات زیر استفاده کنید: Font Morton Bold ، اندازه ۱۱۰ pt ، Tracking 100 pt. Swatch Color را روی سیاه تنظیم کنید.
با استفاده از ابزار Rectangle (U) یک مستطیل ایجاد کنید. به نوار Control بروید و رنگ آن را به رنگ سفید، عرض به ۱۴۵ پیکسل ، و ارتفاع ۳۵ px تنظیم کنید.
مرحله ۸
برای اینکه دکمه Shop Now برجسته شود، سایه ای به آن اضافه خواهیم کرد. در پنل Layers ، روی لایه Rectangle کلیک راست کرده و Blending Options را انتخاب کنید.
در پنجره گزینه Layer Style ، گزینه Drop Shadow را بررسی کرده و انتخاب کنید. در تنظیمات Drop Shadow ، Opacity را روی ۳۵٪ ، زاویه در ۱۳۰ ، فاصله تا ۱۰ پیکسل و اندازه را ۲۰ پیکسل تنظیم کنید. تأیید را کلیک کنید
متن ها و لایه های مستطیل را انتخاب کنید و آنها را در یک پوشه بنام “فراخوانی برای اقدام” ترکیب کنید.
آموزش خروجی کم حجم و مناسب وب در فتوشاپ:
پروژه را طبق معمول ذخیره کنید.
جهت ذخیره سازی با JPEG برای وب، به File > Save for Web بروید. نوع پرونده موردنظر برای ذخیره سند را در in من JPEG choosing را انتخاب می کنم و ۱۰۰ را برای کیفیت تنظیم کردم. در صورت وجود محدودیت در اندازه ، می توانید اندازه پیکسل تصویر را تغییر دهید.
در قسمت سمت چپ پایین، می توانید پیش نمایش اندازه پرونده را مشاهده کنید. این کار زمانی مفید است که محدودیت هایی در اندازه در وب سایت وجود داشته باشد و شما نیاز به کاهش کیفیت یا اندازه تصویر داشته باشید.
برای انتخاب مکان در پنجره جدید ، روی Save… کلیک کنید و دوباره روی Save کلیک کنید.
کارتون عالی بود! شما ساخت بنر در فتوشاپ را تمام کرده اید!
نتیجه گیری
در این آموزش یاد گرفتیم که چگونه یک بنر برای سایت در فتوشاپ طراحی کنیم. ما ابزارهایی را پوشش داده ایم که به شما در طراحی بنرهای وب برای کمپین بعدی بازاریابی کمک می کنند. امروز یاد گرفتیم که:
- یک فایل بنر وب سایت تنظیم کنید
- از ماسک های لایه ای استفاده کنید
- لایه ها را در پوشه ها سازماندهی کنید
- یک خروجی JPEG برای وب انجام بدید.
در پایان اگر قصد دارید وارد دنیای بی حدومرز فتوشاپ شوید و از آن درآمدزایی کنید لازم است مهارت کافی در این زمینه کسب کنید. توصیه می‌کنم پکیج آموزش پیشرفته فتوشاپ در قالب پروژه را پشت سر بگذارید. اگر درباره نرم‌افزار پریمیر سوالی داشتید از بخش نظرات برای ما ارسال کنید تا تیم گرافیستار پاسخگوی مشکلات شما باشد.
جهت دانلود مجموعه ۶ ساعت آموزش فتوشاپ رایگان کلیک کنید.
سلام ممنون از سایت خوب و مطالب کاملتون