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

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

گام 1

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

ابتدا یک سند به ابعاد 950x800 پیکس و مود رنگی RGB و رزولوشن 72dpiدر فتوشاپ ایجاد کنید

خط کشها را روشن کنید و 4 خط راهنما به داخل صفحه بکشید بطوری که حاشیه و فضای صفحه طراحی را مشخص کنند. تصمیم داریم چیدمان وبسایت را با عرض ثابت قرار دهیم.

از منو  Image > Canvas Size را انتخاب کنید و طول و عرض سند را بیشتر کنید. اندازه 1200x1000 پیکسل مناسب است. با این روش میتوانیم طراحی را برای صفحه نمایشهایی با رزولوشن عریض تر انجام دهیم. سپس برای مشخص کردن سایر فضاهایی که قصد دارید محتوا در سایت قرار دهید مانند هدر، نوار راهبری ، نوار کناری و فوتر خطوط راهنمای دیگری اضافه کنید

تصور کنید که میخواهیم این صفحه را برای استفاده در قالب وردپرس طراحی کنیم. لذا آنچه نیاز داریم یک هدر، یک نوار منو در داخل هدر ، یک ساید بار و یک فوتر است.

به قسمت پایین تصویر زیر توجه کنید و پس زمینه را با رنگ پر کنید

گام 2

در این مرحله برای پس زمینه هدر سایت یک الگو طراحی میکنیم. یک سند جدید به ابعاد 50 در 300 پیکسل مانند تصویر زیر در فتوشاپ ایجاد کنید.برای اینکه طرح شما بصورت قرینه باشد از خطوط راهنما استفاده کنید. پس از اتمام طراحی الگو از منو Edit > Define pattern را انتخاب کنید و الگو را با نام pattern1 ذخیره کنید

گام 3

در فایل اصلی طراحی در یک لایه جدید با ابزار Rectangle Tool یک مسطیل با ارتفاع 300 پیکسل ایجاد کنید. به قسمت Filters بروید و یک Pattern Overlay اضافه کنید. الگویی را که ساخته بودید پیدا کنید و آن را انتخاب کنید. برای اینکه طرح بطور صحیح در جای خود قرار بگیرید باید گزینه Snap to Origin button را فعال کنید.

گزینه fill لایه را بر روی %0 قرار دهید. در بالای لایه الگو یک لایه خالی ایجاد کنید و هر دو لایه را merg کنید. با این روش میتوانید به لایه الگو افکتهایی اضافه کنید. نام لایه جدید را pattern1 بگذارید

گام 4

لایه pattern1 را انتخاب کنید و چند layer style به آن اضافه کنید. Drop Shadow , Gradient Overlay و Pattern Overlay . سعی کنید افکتهایی شبیه به تصویر زیر ایجاد نمایید و تنظیمات زیر را اعمال کنید

گام 5

حال میخواهیم پس زمینه نوار پیمایش را ایجاد کنیم. یک مستطیل بکشید بطوریکه قسمتی از لایه pattern1 را بپوشاند. یک افکت Pattern overlay ، یک Gradent overley با طیف رنگی سیاه به سمت قرمز تیره و یک Drop Shadow نرم به آن اعمال نمایید. برای تنظیمات از تصویر زیر کمک بگیرید. سپس لایه را ماسک کنید تا مخفی شود و یک گرادیانت انعکاسی با طیف رنگی سیاه به سفید به سیاه به لایه ماسک اعمال کنید . نتیجه کار باید شبیه به تصویر زیر شود.

گام 6

در بالای لایه Pattern1 یک بیضی به رنگ #691E1B ایجاد کنید و نام آن را Light بگذارید. یک افکت Gaussian Blur با Radius به میزان 50 پیکسل به آن اعمال کنید. برای اینکه نور در وسط هدر قرار بگیرد چند خط راهنمای اضافی ایجاد کنید. همه چیز را در زیر منوی راهبری پاک کنید و blendign mode لایه را بر روی Color Dodge قرار دهید.

گام 7

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

برای مشخص کردن مکان دقیق ساید بار چند خط راهنمای جدید ایجاد کنید و خطوط موجود را نیز جابجا کنید.

یک مستطیل قرمز  #3D100B ایجاد کنید. سبکهای زیر را به آن اعمال کنید. Drop Shadow , Color Overlay و Pattern Overlay

در این مرحله باید محل برش تصاویر را برای استفاده از کدنویسی در html و css در نظر داشته باشید. در تنظیمات Drop shadow  گزینه Distance را 0px تنظیم کنید. و تنها از گرادیانتهای افقی و عمودی استفاده کنید. بافتی که در این مرحله میخواهیم استفاده کنیم از تعداد زیادی خطوط افقی تشکیل شده است. باید آن را طوری تنظیم کنید که به راحتی بتوان آن را بعنوان یک پس زمینه تکرار شونده استفاده کرد. بنا براین سعی کنید لایه ها را در پنل لایه ها در داخل پوشه هایی قرار دهید تا سازماندهی و منظم شوند

گام 8

حال برای اضافه کردن جزییات میخواهیم نام سایت را در یک مکان متمایز در سایت قرار دهیم. برای این منظور از تصویر یک لیبل به سبک قدیمی و فرسوده استفاده می کنیم. تصویر لیبل را از پس زمینه آن جدا کنید و در گوشه بالا سمت چپ سایت قرار دهید. سعی کنید چیزی شبیه به تصویر پایین درست کنید. سپس با استفاده از ابزار Magic Wand tool دایره ه قهوه ای کوچک را انتخاب کنید. با انتخاب دکمه های Ctrl+Shift+I انتخاب را برعکس کنید. با توجه به تصویر زیر Levels و Hue/Saturation تصویر را تنظیم کنید.

گام 9

حال با استفاده از Eraser tool و یک براش نامنظم قسمتهایی از لبه های لیبل را پاک کنید. برای اضافه کردن افکت paper cut ابزار Dodge tool را انتخاب کنید.و همان براش نامنظم را انتخاب کنید و افکت dodge بر روی لبه های لیبل اعمال کنید

گام 10

حال میخواهیم به لیبل سایه اضافه کنیم. از لایه کپی بگیرید. Hue/Saturation را انتخاب کنید و گزینه Lightness را بر روی 100- قرار دهید. یک افکت Gaussian Blur با شعاع 10 پیکسل به آن اعمال نمایید. سپس blendig mode لایه کپی لیبل را بر روی Multiply قرار دهید و شفافیت را بر روی %75 تنظیم کنید

گام 11

در آخر در Hue/Saturation گزینه Saturation بر روی 40- قرار دهید تا بیشتر تم خاکستری به خود بگیرد

گام 12

حال چند تصویر جانبی به طرح اضافه می کنیم. سعی کنید تصاویری را انتخاب کنید که مفهومی را برساند. چون در این آموزش بیشتر از تکنیک صحبت می کنیم بنابراین تصویری از یک لوکوموتیو قدیمی  انتخاب کرده ایم. تصویر را از پس زمینه اش جدا کنید و در طرح در جای مناسب قرار دهید و blending mode آن را بر روی Darken تنظیم کنید

گام 13

بیایید چند متن اضافه کنیم. ابتدا نام صفحه وب را ایجاد می کنیم. برای این متن از فونتی با سبک گرانج استفاده کنید. برای عنوان از رنگ سیاه استفاده کنید و blending mode را بر روی overlay قرار دهید. سپس از لایه کپی بگیرید و شفافیت را بر روی %75 قرار دهید. برای ایجاد یک افکت ظریف بلور لایه کپی شده را به اندازه یک یا دو پیکسل به سمت راست یا چپ جابجا کنید. چند متن دیگر مانند یک شعار یا نظیر آن با استفاده از همین تکنیک اضافه کنید. سپس میتوانید متن لینکهای راهبری سایت را اضافه کنید

گام 14

در این مرحله المانهای بیشتری اضافه میکنیم تا به سایت ظاهری به سبک شلوغ و فرسوده و قدیمی بدهیم. براشهای نامنظمی در اینترنت پیدا کنید و از آنها استفاده کنید. این براشها افکتهای خارق العاده ای به ظاهر سایت میدهند. با استفاده از این براشها المانهایی نظیر اعداد و اشکال مختلف و گوشه ها و شکلهای کاستهای قدیمی و مانند آن ایجاد کنید. فقط توجه داشته باشید که تمام این اشکال باید در زیر لایه های Label و Label Copy قرار داشته باشند

گام 15

حال بخشهای صفحه را اضافه می کنیم. در ابتدا فیلد جستجو را در هدر ایجاد می کنیم. یک متن بعنوان لیبل جستجو تایپ کنید. سپس یک مستطیل قرمز #6A0400 بعنوان فیلد ورودی جستجو ایجاد کنید. سپس یک افکت stroke و Pattern overlay به آن اضافه کنید.