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

مقدمه

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

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

فايل جديد با مشخصات زير ايجاد كنيد:

نرسیم مستطیل

لايه جديدي ايجاد كنيد. ابزار 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‌ را انتخاب كنيد.