طراحی بنر سایت در فتوشاپ

مقدمه 

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

ایجاد فایل جدید

فایل جدید با مشخصات زیر ایجاد کنید:

 

نرسیم مستطیل

لایه جدیدی ایجاد کنید. ابزار Rounded Rectangle را انتخاب کنید. اندازه شعاع را ۱۵ پیکسل انتخاب کنید. برای وارد کردن اندازه دقیقفلش کنار شکل را همانند تصویر زیر باز کنید:

عرض را ۷۶۰ وارد کرده و ارتفاع را خالی رها کنید. رنگ روزمینه را ۹۹۰۰۰۰ را انتخاب کنید. هنگام رسم شکل عرض ثابت می­ماند اما ارتفاع بستگی به اندازه دلخواه خودمان دارد. شکل را رسم کنید. برای ایجاد انحنا در قسمت پایین شکل از ابزار Pen استفاده می­شود. همانند شکل زیر با نگه داشتن کلید Shift‌ مسیر زیر را رسم کنید:

اکنون ابزار Add anchor point tool را انتخاب کنید. روی نواحی که می­خواهید انحنا ایجاد کنید کلیک کنید. کلید Ctrl را نگه داشته و نقاط لنگر را تغییر دهید تا مسیری به شکل منحنی ایجاد شود. دوباره ابزار Pen  را انتخاب کنید و از انتهای مسیر شروع به ترسیم مسیر تا خط ابتدا نمایید. همانند تصویر زیر:

اعمال نور به بنر

روی مسیر کلیک راست کرده و Male Selection را انتخاب کنید. میزان Feather باید صفر باشد. Ok را کلیک کنید. کلید Delete را بزنید تا قسمت انتخابی پاک شود. می­توانید با کلید جهتی مکان انتخاب را تغییر داده و دوباره ناحیه را با Delete پاک کنید. فرمان Deselect‌ را اجرا کنید تا ناحیه­ای نباشد.کلید Ctrl‌ را نگه داشته و روی لایه کلیک کنید تا شکل ترسیم شده انتخاب گردد. فرمان Contract Selection را از منوی Select و زیر منوی Modify اجرا کنید. عدد ۲ را وارد کرده و Ok‌ را کلیک کنید تا ناحیه انتخابی ۲ پیکسل کوچکتر شود. لایه جدیدی ایجاد کرده و ابزار Gradient‌ را انتخاب کنید. رنگ روزمینه را سفید انتخاب کنید. گزینه دوم را از نوار موارد اختیاری انتخاب کنید. از بالا به پایین بکشید تا به صورت یک ناحیه Highlight‌ به نظر برسد. فرمان Deselect‌ را اجرا کنید. شکل به صورت زیر تغییر می­یابد:

کلید Ctrl را نگه داشته و روی لایه شکل کلیک کنید تا شکل انتخاب شود. با کلید جهتی ناحیه انتخابی را به سمت بالا بکشید. فرمان زیر را اجرا کنید:

Image–>Adjustment–>Brightness/Contrast

اعداد را به شکل زیر تغییر دهید.

این کار باعث می­شود که قسمت پائین شکل دارای یک Border باشد. فرمان Deselect‌ را اجرا کنید. تصویر به شکل زیر تغییر می­یابد:

اضافه کردن متن بنر

ابزار Type را انتخاب کرده و روی تصویر کلیک کنید و متن مورد نظر خود را تایپ کنید. در این پروژه متن ۱۰۰ ROMANTIC IDEAS‌ وارد شده است. بهتر است تمام حروف را بزرگ تایپ کنید. عنوان ROMANTIC را BOLD کنید. فاصله بین حروف را با استفاده از پالت کاراکتر کمتر کنید. متن دیگری تایپ کرده و اندازه آنرا کوچکتر کنید و مکان آنرا پایین متن دیگر قرار دهید. لایه متن را انتخاب و Layer Style را اجرا کنید. گزینه Outer Glow  را انتخاب کرده و تغییراتی به شکل دلخواه روی متن اعمال کنید. اگر تغییرات مد نظر نبود کلیک Alt‌ را نگه داشته، دکمه Cancel‌ به Reset تغییر نام می­یابد. روی آن کلیک کنید. تغییرات را انجام داده و روی متن اعمال کنید. روی لایه متن کلیک راست کرده و Copy Layer Style‌ را اجرا کنید. روی لایه متن دیگر کلیک راست کرده و Paste Layer Style را انتخاب نمایید. تصویر تا کنون به شکل زیر تغییر یافته است:

درج تصویر بنر

تصویر مربوط به گلبرگها را باز کرده و آن را انتخاب کنید. فرمان Copy‌ را اجرا کرده و به فایل اصلی بازگردید. لایه Layer1 را با نگه داشتن کلید Ctrl انتخاب کنید. از منوی Edit  فرمان Paste Into‌ را اجرا کنید. فرمان Free Transform‌ را اجرا کرده و اندازه را تغییر دهید و مکان آن را نیز تغییر دهید. تغییرات به شکل زیر می­باشد:

اکنون Blending Mode همین لایه را بر روی Overlay قرار دهید. می­توانید حالتهای مختلف را آزمایش کنید. اکنون فایل Flowers‌ را از پوشه پروژه باز کنید. کل تصویر را انتخاب کنید و فرمان Copy را اجرا نمایید. کلید Ctrl را نگه داشته و روی Layer1‌ کلیک کنید تا ناحیه مربوط به شکل انتخاب شود. روی لایه مربوط به تصاویر گلبرگ کلیک کنید. از منوی Edit‌ فرمان Paste Into‌ را اجرا نمایید. اندازه تصویر را با Free Transform تغییر دهید و مکان آنرا روی تصویر تنظیم کنید. Blending Mode‌ را روی Luminosity‌ قرار دهید. همانطور که در تصویر زیر مشاهده می­کنید سمت چپ تصویر یک خط عمودی دیده می­شود که می­خواهیم آنرا پاک کنیم:

 

ویرایش بنر

با فرمان Paste Into یک ماسک روی لایه ایجاد می­شود. ماسک را انتخاب کرده و ابزار Brush‌ را با رنگ مشکی انتخاب کنید. میزان Hardness‌ را روی صفر قرار دهید. روی خط عمودی بکشید. تصویر به شکل زیر تغییر می­یابد:

ناحیه مربوط به حاشیه زیرین با تصویر گل از بین رفته است. روی لایه Layer1 همراه با نگه داشتن کلید Ctrl‌ کلیک کنید. با کلید جهتی ناحیه انتخابی را بالاتر ببرید. فرمان Inverse‌ را از منوی Select اجرا کنید. اکنون لایه مربوط به تصویر گل را انتخاب کرده و کلید Delete را فشار دهید. روی لایه گلبرگ نیز کلیک کرده و Delete را فشار دهید. تصویر به شکل زیر تغییر می­یابد:

هر تصویر دیگری که می­خواهید می­توانید به فایل اضافه کنید. اما باید اندازه و مکان آنرا تغییر دهید. Blending Mode‌ را تغییر دهید و تمامی نکاتی که در این پروژه استفاده شده است را با دقت انجام دهید. اکنون باید تمامی فضای اضافی دور تصویر را حذف کنیم. زیرا این تصویر قرار است در صفحه وب به عنوان سر صفحه استفاده شود. به همین دلیل فایل اصلی را بزرگتر از اندازه معمول ایجاد کردیم. از منوی Image فرمان Trim… را اجرا کنید. گزینه Top Left Pixel Color را انتخاب کرده و Ok را کلیک کنید تمام فضای اضافی حذف خواهد شود. از منوی File  فرمان Save For Web‌ را انتخاب کنید.