در این بخش از آموزش طراحی سایت تکنیک های بسیار ساده استفاده از گرادیانت ها و استایل لایه ها را برای ایجاد افکت های ظریف و زیبا در طراحی سایت ، شرح می دهیم.
مرحله اول
یک سند جدید با ابعاد 1000 در 750 پیکسل ایجاد نمایید. بر روی لایه پس زمینه دوبار کلیک کنید و در بخش Color Overlay (رنگ روکش)، رنگ قهوه ای تیره را انتخاب نمایید.
مرحله دوم
رولر ها را (View>Rulers) در سند خود فعال کنید و چند راهنما اضافه کنید. دو راهنمای افقی ایجاد کنید که اندازه اولی 30 پیکس و دومی 250 پیکسل باشد. بعد از آن دو راهنمای عمودی با اندازه های به ترتیب 100 و 900 پیکسل اضافه کنید.
گام سوم
با استفاده از ابزار Rectangle Tool، یک مستطیل ایجاد کنید. از guideها به عنوان مرجع استفاده کنید. نام لایه را به header تغییر دهید.
گام چهارم
برای رنگ پیش زمینه، سیاه را انتخاب نمایید. ابزار Ellipse را انتخاب کنید و شکلی را ایجاد کنید که در آینده به صورت سایه خواهد بود. و کمی از مستطیل سفید رنگ خارج شوید. نام لایه را به shadow تغییر دهید و آن را زیر لایه هدر بگذارید. سپس آن را به امارت فیلتر تبدیل کنید و از Gaussian Blur استفاده کرده و opacity آن را به 60 درصد تغییر دهید.
مرحله پنجم
لایه هدر را انتخاب کنید، دوبار بر روی آن کلیک کنید تا پنجره Layer Style باز شود. سبک گرادیانت را به رادیال تغییر دهید. رنگ را به دلخواه انتخاب کنید.
مرحله ششم
در این مرحله، ابزار لاین را انتخاب کنید و رنگ روشن تری از گرادیانت هدر (مثلا قرمز) سلکت کرده و یک خط ایجاد نمایید. سپس رنگ سیاه را انتخاب کنید و یک خط دیگر با فاصله یک پیکسل در بالای خط قرمز بکشید. دو خط را انتخاب کرده و آنها را با هم ترکیب (گروه) کنید و نام آن را "vDivider" بگذارید. به این آدرس Layer>Layer Mask>Reveal All رفته، از ابزار گرادیانت استفاده کنید، یک گرادیانت رادیال از مشکی به سفید انتخاب کنید و یک ماسک به گروه اعمال نمایید. گرادیان را از مرکز گروه آغاز کنید.
مرحله هفتم
منو را با استفاده از ابزار Horizontal Type ایجاد کنید. از رنگ سفید برای رنگ متن استفاده کنید. تمام لینک ها را انتخاب کنید و آنها را گروه نمایید و نام گروه را به White Links تغییر دهید. گروه را کپی کنید و آن را در زیر White Links قرار دهید. رنگ متن را به مشکی تغییر دهید و گروه را یک پیکسل به سمت بالا چپ جابه جا نمایید. این موجب ایجاد یک سه بعدی عالی در طراحی سایت می شود.
مرحله هشتم
مرحله 6 را مجددا تکرار کنید، اما این بار تقسیم افقی را برای لینک ها ایجاد نمایید. از ابزار لاین برای کشیدن خط قرمز و با فاصله یک پیکسل سمت چپ خط مشکی استفاده کنید. آن ها را با هم یک گروه کنید و گروه را 5 بار کپی نمایید.
مرحله نهم
همه گروه خطوط را انتخاب کنید و در یک گروه جدید قرار دهید و نام آن را toDividers بگذارید. بعد از آن یک لایه ماسک بر روی آن اعمال کنید از این طریق Layer>Layer Mask>Reveal All، اما این بار از لاینر (Linear) استفاده کنید.
مرحله دهم
فایل الگو را باز کنید و یا هر الگویی را که دوست دارید را انتخاب کنید.همه را انتخاب کنید و به مسیر Edit>Define Pattern بروید و آن را webPattern بنامید. لایه هدر را کپی کنید و نام آن را به الگو تغییر دهید. به Layer Styles رفته و ویژگی Gradient Overlay را غیر فعال کنید و یک Pattern Overlay تنظیم نمایید. webPattern را انتخاب کنید و Blend Mode را به Color Overlay تغییر دهید. و پس از آن یک لایه ماسک به لایه الگو با استفاده از گرادیانت رادیال اعمال نمایید. و در نهایت لوگو را اضافه کنید.
در هنگام طراحی سایت باید به واردی نظیر اندازه فایل، سازگاری با مرورگر و بسیاری مسائل دیگر توجه کرد. گاها استفاده از جزیات کوچک در طراحی سایت مثل شیب ظریف و بردر های دو رنگ می توانند یک سبک منحصر به فرد و افکت بصری بسیار عالی به طراحی سایت اضافه نماید.