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

اولین چیزی که از یک سایت نمونه کار انتظار دارید چیست؟ متمایز بودن

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

طراحی سایت نمونه کار بیادماندنی

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

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

یک طراح گرافیست حرفه ای به طور معمول کسی است که طراحی های جذاب و خارق العاده دارد اما از نظر طراحان و توسعه دهندگان وب یک طراح واقعی کسی است که بتواند مرزهای کدنویسی و ux و ui را کنار بگذار تا بتواند خلاقانه ترین طرح خود را ارائه نماید.

در این آموزش با استفاده از برخی روشهای ساده اما نوآوارنه UX و UI یک سایت نمونه کار طراحی خواهیم کرد تا بتواند با افکتهای تعاملی و جلوه های نوری ظریف انتظارات کاربران را برآورده کند.

گام اول : تنظیمات صفحه

یک سند جدید به ابعاد 1400x900 در فتوشاپ ایجاد کنید. در نسخه نهایی HTML رندرشده سایت المانها دارای ویژگی Liquid (قابلیت تغییر اندازه) هستند بنابراین باید بخاطر داشته باشید که طرح نهایی دارای اندازه ثابتی نیست.

گام 2 : ایجاد طرح پایه

ایجاد یک پس زمینه سیاه رنگ ساده ترین روش برای شروع است. در این طراحی تصمیم داریم یک رنگ پایه برای طراحی انتخاب کنیم.

این رنگ تیره برای متمایز کردن عکسهای نمونه کار از پس زمینه کافیست علاوه بر این عکسهایی که دارای رنگ سیاه خالص باشند از پس زمینه متمایز خواهند بود. 

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

از منو Select Layer > New Fill Layer > Solid Color را انتخاب کنید و رنگ #252a3b را اعمال کنید

گام 3 : ایجاد خطوط راهنما

از آنجا که میخواهیم از یک چیدمان قابل تغییر مقیاس استفاده کنیم باید حداقل عرض برای سایت را در نظر بگیریم. برای اکثر سایتهای تجاری این اندازه 1000 پیکسل برای استفاده عمومی کاربران در رزولوشن 1024x768 است. برای این سایت اندازه 1100 پیکسل را بعنوان حداقل عرض در نظر میگیریم.

در ابتدا مطمئن شوید که واحد اندازه گیری برای شبکه خطوط راهنما پیکسل باشد. این تنظمات را میتوانید Preferences > Units & Guides کنترل کنید.

سپس از منو  View > New Guide را انتخاب کنید. میخواهیم محتوای سایت را در وسط قرار دهیم و همچنین عرض سایت را 1100 پیکسل تنظیم کنیم. بنابراین اولی خط عمودی راهنما را با فاصله 150 پیکسل و خط دوم عمودی را با فاصله 1250 پیکسل تعریف می کنیم.

گام 4 : ایجاد الگوی بافت

حال میخواهیم با ایجاد الگوی نوارهای اریب در پس زمینه علاوه بر متمایز شدن المانهای سایت از پس زمینه به طراحی نیز جلوه خاصی ببخشیم اما ابتدا باید الگو را بسازیم

یک سند به ابعاد 12x12 پیکسل ایجاد کنید و آنرا با رنگ سیاه #000000 پر کنید

حال یک لایه جدید درست کنید.Layer > New > Layer. با استفاده از ابزار pencil tool و انتخاب براشی به اندازه 1 پیکسل سه خط اریب مانند تصویر زیر بکشید

لایه fill را خاموش کنید و شفافیت لایه نوارهای سفید را %6 تنظیم کنید. برای ذخیر این طرح بعنوان یک الگو از منو Edit > Define Pattern را انتخاب کنید.

به پروژه اصلی باز گردید. یک لایه جدید ایجاد کنید. از منو Layer > New Fill Layer > Pattern را انتخاب کنید. الگویی را که قبلا انتخاب کرده بودید انتخاب کنید.

گام 5 : منوی راهبری

حال که المانهای اصلی سایت را ساختیم چند لایه مسطح ایجاد می کنیم تا سایر المانهای سایت را بر روی آنها قرار دهیم.

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

در پنل لایه ها یک گروه ایجاد کنید و نام آن را Navigation بگذارید.

حال با ابزار Rectangle Tool (U) یک لایه جدید ایجاد کنید. پنجره Info را باز کنید. اندازه مستطیل را 1400x61 انتخاب کنید. به اندازه عرض سایت و ارتفاع 61 پیکسل. این لایه در پایین صفحه اصلی قرار دهید.

حال در پنل لایه ها بر روی لایه جدید راست کلیک کنید و Blendign Options را انتخاب کنید و از منو Gradient Overlay را انتخاب کنید. روش دیگر اینست که از منو Layer > Layer Style > Gradient Overlay را انتخاب کنید.

در تنظیمات گرادیانت بر روی انتخابگر رنگ سمت چپ کلیک کنید و رنگ #2f313a بعنوان رنگ پایینی انتخاب کنید. بر روی انتخابگر رنگ سمت راست کلیک کنید و رنگ #3c3f49 بعنوان رنگ بالایی انتخاب کنید.

حال یک لایه جدید ایجاد کنید نام آن را highlight بگذارید. ابزار  Pencil tool را با براشی به اندازه 1 پیکسل و رنگ  #ffffff انتخاب کنید و با نگهداشتن دکمه Shift یک خط راست در بالای مستطیلی که قبلا ایجاد کردید بکشید. شفافیت لایه را بر روی %6 قرار دهید.

گام 6 : ساخت لوگوی سایت

با فاصله 20 پیکسل از سمت راست صفحه یک لایه متن ایجاد کنید. دقت کنید متن لوگو در وسط مستطیل منوی راهبری قرار بگیرد

در این مثال فونت Din light را با ارتفاع  14 پیکسل .انتخاب کردیم. loose tracking را 200 تنظیم کنید

برای ایجاد تفاوت بین دو قسمت متن لوگو از دو رنگ مختلف استفاده کنید. رنگ بخش اول  #dddddd و برای بخش دوم رنگ #737375 انتخاب کنید.

حال یک افکت سایه ظریف به متن اضافه میکنیم تا به آن ظاهری تو رفته در پس زمینه بدهیم. از منو Layer > Layer Style > Drop Shadow انتخاب کنید

گزینه Use Global Light را غیر فعال کنید.direction را بر روی 45- درجه قرار دهید. size را بر روی 0 پیکسل و distance را بر روی 1px و شفافیت را بر روی %30 تنظیم نمایید.

گام 7 : ساخت دکمه های راهبری

برای دکمه های راهبری اصلی از شکل مستطیل گوشه گرد استفاده می کنیم

یک گروه جدید بنام buttons ایجاد کنید

یک مستطیل به ابعاد 279x31 پیکسل با فاصله 20 پیکسل از لبه سمت راست صفحه و در راستای عمودی در وسط مستطیل راهبری سایت ایجاد کنید

در پنل لایه ها بر بروی لایه دکمه کلیک سمت راست کنید و Blending Option را انتخاب کنید. Gradient Overlay را از لیست انتخاب کنید و طیف رنگ گرادیانت را از رنگ  #292c33 به سمت رنگ #43464f انتخاب کنید. Ok را انتخاب کنید و سپس Bevel & Emboss را انتخاب کنید

در پنجره Bevel & Emboss مقدار size را بر روی 0 پیکسل با direction به میزان 122 درجه تنظیم کنید. شفافیت را در Highlight and Shadow برابر %10 قرار دهید تا یک جلوه نوری ظریف و ثابت به دکمه اعمال شود.

برای لیبل دکمه  همان فونت و تنظیماتی که در لوگو استفاده کردیم را بکار ببرید. 

از آنجا که فضای عمودی دربرگیرنده لیبل دکمه کمتر است اندازه فونت را 12 پیکسل انتخاب کنید و tracking را بر روی 100 تنظیم نمایید. برای رنگ نیز از همان رنگهای لوگو استفاده کنید با اینت تفاوت که برای حالت پیج فعال (هاور دکمه) از رنگ روشنتری استفاده کنید.

برای جداکردن دکمه ها از یکدیگر دو خط به ضخامت 1 پیکسل بکشیم. اولین خط را به رنگ سیاه #000000 و برای دومی رنگ سفید #FFFFFF را انتخاب کنید. شفافیت خط سفید را %6 و خط دوم را %12 انتخاب کنید. دو خط را با Shift + کلیک بر روی هر کدام و راست کلیک بر روی هر انتخاب تکثیر کنید.

خطها را با فاصله ثابتی در بین دکمه ها در نوار راهبری قرار دهید.

گام 8 : ساخت دکمه های شبکه های اجتماعی

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

در ابتدا یک گروه جدید بنام social در پنل لایه ها بسازید و آن را در گروه اصلی navigation قرار دهید.

حال ابزار Rounded Rectangle tool  را انتخاب کنید و شعاع گوشه ها را 4 پیکسل انتخاب کنید. با نگهداشتن دکمه shift یک مربع شکل مربع به اندازه 25x25 پیکسل ایجاد کنید. این مربع را در وسط مستطیل راهبری و با فاصله 25 پیکسل از سمت چپ دکمه های اصلی راهبری قرار دهید.

بر روی دکمه ای که ساخته اید راست کلیک کنید و Blending Option را انتخاب کنید.

یک افکت Drop Shadow اضافه کنید . رنگ سفید #FFFFF را برای این افکت انتخاب کنید. Blend mode را بر روی Lighten قرار دهید. برای Distance مقدار 1 پیکسل را انتخاب نمایید. Spread را بر روی %0 تنظیم کنید و سایز را بر روی 0px قرار دهید. با این تنظیمات یک افکت فرورفتگی به دکمه میدهیم

در مرحله بعدی در حالی که هنوز در پنجره Layer Style هستید گزینه inner shadow را انتخاب کنید. رنگ سیاه #000000 را انتخاب کنید. شفافیت را %39 قرار دهید. Distance را بر روی 1 پیکسل و Size را بر روی 4 پیکسل قرار دهید.

در نهایت گزینه Color Overlay را انتخاب کنید و رنگ  #353741 را انتخاب کنید. با این تنظیمات یک ظاهر مسطح با تمایز از پس زمینه به دکمه میدهیم

برای آیکونهای شبکه های اجتماعی از تصاویر آماده استفاده کنید. با ابزار pen tool لبه های تصاویر را Trace کنید. یک path در اطراف تصویر اصلی ایجاد نمایید.(دقت نمایید که در منوی tool option گزینه Paths را فعال کنید)

بعد از ایجاد Path بدور آیکون ابزار Path Selection Tool را انتخاب کنید و بر روی Path راست کلیک کنید (دقت کنید که گزینه Path در پالت Paths فعال باشد)

Define Custom Shape را انتخاب کنید و شکل را ذخیره کنید

حال میتوانیم آیکون را بعنوان یک آبجکت وکتور مقیاس پذیر استفاده کنیم. با استفاده از ابزار Pen tool گزینه Options را بر روی Shape layer قرار دهید.(آیتم بالاسمت چپ در نوار Option.). ابزار Custom Shape Tool را انتخاب کنید. آیکونی را که ساخته اید انتخاب کنید. با نگهداشتن دکمه shift شکل را بکشید تا در دکمه جا شود. شفافیت آیکون را بر روی %20 قرار دهید

همین مراحل را برای بقیه دکمه های شبکه های اجتماعی باقیمانده تکرار نمایید.