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

گام 16

حال محتوای اصلی طرح را ایجاد می کنیم. در ابتدا یک فیلد برای قرار دادن متن ویژه ایجاد می کنیم. در زیر ساید بار یک مستطیل به رنگ خاکستری تیره #0D0F0E ایجاد کنید.

برای سازماندهی چیدمان سایت 4 پوشه ایجاد می کنیم. یک پوشه بنام Header در بالای همه، یک پوشه بنام Side bar  در زیر پوشه Header ، یک پوشه بنام Content در زیر پوشه های Header , Side bar و در آخر یک پوشه بنام Footer

این مستطیل را در پوشه Content قرار دهید. در صورت لزوم میتوانید پوشه های دیگری در داخل هریک از این پوشه ها ایجاد کنید. بعد اینکه مستطیل را در جای خود قرار دادید افکتهای Drop Shadow و Stroke را با تنظیماتی که در تصویر زیر نشان داده شده بر روی آن اعمال کنید

گام 17

چند تصویر گوشه و کناره به سبک گرانج انتخاب کنید. یکی از آنها را در روی پس زمینه خاکستری پیست کنید. سپس یک افکت Overlay با رنگ #171612 بر روی آن اعمال کنید. یک تصویر گوشه دیگر بر روی پس زمینه سایدبار قرار دهید و اینبار شفافیت آن را بر روی %25 قرار دهید.

گام 18

چند متن به طرح اضافه می کنیم. چند متن نمایشی اضافه کنید.تصور کنید که آخرین پستها و یا یک پست ویژه توسط جاوا اسکریپت در سایت نمایش داده می شود یا چیزی شبیه به آن.

همان فونتی را که برای نوار راهبری استفاده کردید برای این متنها با رنگ #4D0D0D بکار ببرید. برای بدنه متن نیز از فونت Arial با رنگ #3F3F3F استفاده کنید

افکت Drop shadow به عنوانها و همان افکت را بر روی متنهای راهبری اعمال کنید

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

گام 19

نوار ویژه سایت کمی خالی بنظر میرسد. لذا چند تصویر به آن اضافه می کنیم. تصویری از یک عکس پولاروید انتخاب کنید. تصویر را از پس زمینه آن جدا کنید و آن را در بالای پس زمینه خاکستری و تصویر گوشه گرانج در پوشه Content پیست کنید. Hue/Saturation را در تصویر طور تنظیم کنید که بیشتر حالت sepia به خود بگیرد (گزینه Colorize option ) را انتخاب کنید

همان تکنیکی را که در گام 9 برای لبه های لایه های Label بکار بردید استفاده کنید. لبه های تصویر پولاروید را حذف و تیره کنید. سر انجام با همان تکنیکی که در گام 10 بکار بردید یک افکت Drop shadow به تصویر اضافه کنید.

گام 20

یک تصویر sepia انتخاب کنید.تصویر را در یک لایه جدید در بالای لایه تصویر پولاروید قرار دهید. مربع سیاه رنگ تصویر پولاروید را انتخاب کنید. سپس با فشار دادن دکمه های Ctrl+Shift+I انتخاب را برعکس کنید. لایه تصویر را انتخاب کنید و تمام قسمتهای انتخاب شده را پاک کنید. حال میتوانید جزیئات گرانج بیشتری شبیه به تصویر زیر به طرح اضافه کنید. مانند تصویر ماسک شده کاست  یا چیزی شبیه به آن . به تصویر کاست یک افکت Drop Shadow به اندازه 1 پیکسل اضافه کنید

گام 21

حال آیکون فید RSS را به سایدبار اضافه می کنیم. یک مربع با گوشه گرد به رنگ #99917E بکشید. این افکتها را به آن اعمال کنید: Inner glow ، Pattern overlat و Drop shadow

تنظیمات نشان داده شده در تصویر را برای افکتها انجام دهید

آیکون استاندارد RSS را در بالای لایه مربع در یک لایه جدید پیست کنید یا آن را بکشید و با رنگ سیاه پر کنید. در نهایت blending mode لایه RSS را بر روی Overlay قرار دهید.

گام 22

آیکون RSS را در بالا و سمت چپ سایدبار قرار دهید. یک متن به آن اضافه کنید بعنوان مثال RSS FEED. تصویر ماسک شده دیگری از کاست به طرح اضافه کنید و نام تعدادی از مشتریان را تایپ کنید. بخاطر داشته باشید که در پوشه Side bar  مشغول طراحی هستید

گام 23

وفت آن رسیده که یک پست تکی به طراحی اضافه کنیم. چند متن نمایشی بعنوان تایتل ، تاریخ ، نویسنده و دسته بندی بنویسید. یک پاراگراف نمایشی نیز بعنوان متن پست ایجاد کنید. در این مرحله تایپوگرافی بسیار مهم است. برای عناوین از فونت Serif fonts  و برای بدنه متن از فونت Sans-Serif استفاده کنید. اما میتوانید هر فونتی که حس میکنید برای طرح مناسب تر است استفاده کنید.

گام 24

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

تصویری از یک فیلم 35 میلیمتری انتخاب کنید. دو نوار باریک از آن جدا نمایید. Hue/Saturation تصاویر را شبیه به تصویر تنظیم نمایید. با یک پاکن نامنظم قسمتهایی از نوارها را حذف کنید.سپس به هریک از آنها افکت Drop shadow اعمال کنید. کار بر روی نوارهای فیلم که تمام شد تصویر دلخواهی را در زیر  آنها قرار دهید. یک افکت Stroke به رنگ #2F261D به تصویر اضافه کنید

گام 25

یک خط افقی قرمز رنگ به ضخامت 2 پیکسل و چند متن بعنوان comment به پست اضافه کنید.بهترین کار اینست که تمام لایه های مربوط به پست را در پوشه ای بنام پست قرار دهید.

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

گام 26

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

گام 27

حال یک آیکون لیست ایجاد کنید. میتوانید از Costom Shape های فتوشاپ استفاده کنید.چند متن رندم انتخاب کنید. میتوانید از فونت Georgia استفاده کنید.آیکونها را کپی کنید و یکی از آنها را برای حالت Hover طراحی کنید.

همین مراحل را برای هریک از آیتمها تکرار کنید

گام 28

کم کم به پایان طراحی نزدیک می شویم. مقداری جزئیات به سبک گرانج به پایین سایدبار اضافه کنید. در یک لایه جدید در بالای لایه پس زمینه ساید چند براش به سبک گرانج اضافه کنید. لایه پس زمینه سایدبار را انتخاب کنید سپس از منو Layer > Layer Mask > Reveal all  را انتخاب کنید. سپس با یک براش نامنظم برنگ سیاه قسمتهایی از ناحیه پایین سمت چپ پس زمینه سایدبار را حذف کنید.

گام 29

سر انجام لایه پس زمینه سایدبار را انتخاب کنید و راست کلیک کنید و Copy layer styles را انتخاب کنید. در پایین سند در پوشه Footer یک مستطیل بکشید و افکتها را بر روی آن کپی کنید. تصویری از یک کاغذ پاره شده مانندتصویر انتخاب کنید . آن را ز پس زمینه جدا کنید و در بالای لایه فوتر پیست کنید. saturation تصویر را تنظیم کنید تا خاکستری رنگ به نظر برسد. یک افکت Drop Shadow  با استفاده از تکنیکهای استفاده شده در گام 10 به تصویر کاغذ اعمال کنید. چند متن بر روی کاغذ اضافه کنید مانند یک شعار یا مانند آن همچنین متنهایی که در فوتر استفاده میشود مانند یک نوار راهبری کوچک و متن کپی رایت

سخن آخر

طراحی سایت آسان نیست اما امیدواریم این آموزش توانسته باشد مهارتهای شما را افزایش دهد. میتوانید خود وبسایتهای بیشتری در فتوشاپ طراحی کنید و همچنین میتوانید نسخه فتوشاپی طراحی شده سایتها را دانلود کنید و از آنها الهام بگیرید یا آنها را تغییر دهید. سبک گرانج یکی از سبکهای زیبا در طراحی سایت است که میتوانید سایتهای جذابی با آن طراحی کنید.