آموزش طراحی رابط کاربری با فتوشاپ

آموزش طراحی رابط کاربری با فتوشاپ

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

بوجود آوردن یک قالب سایت عالی

تصور کنید که شما یک گرافیست باشید و بخواهید سایتی برای خود تون بسازید. برای داشتن یک وب سایت تاثیر گذار ، ظاهر سایت شما باید مشتری را مبهوت کند و اگر اینطور باشد، تاثیر نمونه کار های شما چندین برابر خواهد شد.

مرحله ساختن سند سایت 

همانطور که در همه آموزش های طراحی قالب سایت گفتیم،  برای طراحی یک قالب اولین کار ما ایجاد یک سند جدید است . بوم خود را در اندازه های ۹۰۰×۱۴۰۰ ایجاد کنید . ما در هنگام کد نویسی ، سایت های خود را بصورت ریسپانسیو طراحی خواهیم کرد . بنابراین اندازه ثابتی در نهایت نخواهیم داشت.

چگونه پس زمینه مناسب برای سایت بسازیم

ما برای ایجاد رنگ در پس زمینه از لایه تنظیمی Solid Color استفاده کرده ایم . شما علاوه بر اینکه میتوانید لایه تنظیمی را ، از طریق پنل لایه ها اعمال کنید ،میتوانید دستور زیر را نیز برای اینکار استفاده کنید  Select Layer > New Fill Layer > Solid Color برای رنگ از کد هگزا دسیمال ۲۵۲a3b # استفاده کنید:

چگونه خطوط راهنما برای سایت بسازیم

برای سایت ها تبلیغاتی و قالب های آماده شما باید حداقل عرض ناحیه طراحی را مشخص کنید و این عدد باید ۱۰۰۰ پیکسل باشد . تا کاربران دارای مانیتور های ۷۶۸×۱۰۲۴ بتوانند سایت را همانگونه که طراحی کرده ایم مشاهده کنند.  ما در اینجا عرض تصویر را ۱۱۰۰ پیکسل تعیین خواهیم کرد.

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

حالا دستور View > New Guide را اجرا کنید .از آنجا که ما قصد داریم محتوای اصلی در وسط سایت قرار داشته باشد خطوط راهنما را در فواصل ۱۵۰px و ۱۲۵۰px قرار می دهیم.

الگوی بافت مناسب بسازیم 

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

برای ایجاد بافت ابتدا یک سند جدید در ابعاد ۱۲×۱۲ پیکس ایجاد کرده و پسزمینه سند خود را ترانسپرنت می کنیم. حالا یک لایه جدید با رنگ سیاه ایجاد می کنیم:

حالا دستور Layer > New > Layer را اجرا کنید . از ابزار مداد pencil برای ابعاد ۱px برای رسم خطوط زیر استفاده کنید :

بر روی لایه خطوط کلیک کرده و opacity=6% قرار دهید . برای ذخیره این الگو دستور Edit > Define Pattern را اجرا کنید.

به قسمت نوار منو بریم و سایتمونو بسازیم

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

برای ایجاد منو ابتدا یک پوشه ایجاد کنید. ما نام پوشه را Navigation قرار داده ایم . شما میتوانید هر نام دیگری به آن بدهید.

ابزار رسم مستطیل را با کمک کلید میانبر U انتخاب کنید . ما مستطیلی به ابعداد ۶۱×۱۴۰۰ رسم کرده ایم این لایه را به قسمت پایین پنجره خود می کشیم:

حالا ، به این لایه یک گرادینت بدهید . برای اینکار روی لایه راست کلیک کرده و گزینه Blending Options را انتخاب کرده و سپس روی Gradient Overlay کلیک کنید و یا استایل لایه Gradient Overlay را از ایکون استایل ها در پنل لایه و یا با دستور Layer > Layer Style > Gradient Overlay اعمال کنید:

در تنظیمات گرادیانت برای لغزنده سمت چپ از رنگ ۲f313a # و برای لغزنده سمت راست از رنگ ۳c3f49 # استفاده کنید.

حالا یک لایه جدید ایجاد کنید. و نام این لایه را highlight بگذارید از ابزار مداد Pencil با اندازه ۱px و رنگ سفید برای رسم خطوط در بالای مستطیل استفاده کنید. و میزان opacity=60% لایه را کم کنید:

چگونه یک لوگو برای سایت بسازیم 

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

برای تایپ متن زیر از فونت رایگان DIN Light استفاده شده است و اندازه فونت ۱۴px و tracking=200 برای اولین قسمت متن از رنگ dddddd #و برای قسمت دوم از رنگ ۷۳۷۳۷۵ # استفاده خواهیم کرد:

 

حالا به این لایه یک سایه بدهید . اینکار به متن ظاهری مناسب در برابر پس زمینه میدهد . برای اینکار از دستور  Layer > Layer Style > Drop Shadow استفاده کنید  . Use Global Light= Unselect, direction=-45,  size=0px, distance=1px, opacity=30%  را تنظیم کنید :

ایجاد کلید های منو سایت 

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

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

با کمک کلید میانبر Shift+U مستطیل گوشه گرد را انتخاب کرده و اندازه آن را ۳۱×۲۷۹ قرار داده و گردشدگی آن را ۲۰ پیکسل تنظیم کنید. از سمت راست سند در حالیکه در حالت عمودی وسط نوار منو قرار دارید مستطیل را رسم کنید:

در پنل لایه ها روی لایه راست کلیک کنید و گزینه Blending Options را انتخاب و سپس گزینه Gradient Overlay را کلیک کنید و از گرادینت۲۹۲c33 # تا ۴۳۴۶۴f # استفاده کنید. روی OK کلیک کنید. و سپس گزینه Bevel & Emboss را انتخاب کنید.

برای استایل Bevel & Emboss تنظیمات زیر را اعمال کنید. size=0px , direction=122 degrees  را انتخاب کرده و سپس Highlight opacity و Shadow opacity را برابر ۱۰% تنظیم کنید. اینکار جلوه بسیار محوی از روشنایی ایجاد می کند:

به منو ، متن های خود را اضافه کنید.  برای اینکار از تنظیماتی برای متن لوگو استفاده کرده بودید استفاده کنید. بعنوان متن دکمه باید اندازه آن را ۱۲ پیکسل بگذارید و میزان tracking=100 قرار دهید ، از همان فونت لوگل برای تایپ استفاده کنید. برای متن صفحه فعال رنگ روشنتری را انتخاب کنید.

برای جدا کردن دکمه ها از هم دیگر از دو خط به عرض ۱px یکی به رنگ مشکی و دیگری به رنگ سفید استفاده کنید. میزان opacity=6%  خط سفید  و میزان opacity=12%  خط سیاه را تغییر دهید. مکان این دو خط را با فاصله ۱px از هم قرار دهید. ما  این خط ها را در یک پوشه قرار داده و آنها را برای دکمه های دیگر کپی کرد ایم.

آموزش طراحی رابط کاربری با فتوشاپ

کلید های شبکه های اجتماعی بسازیم

دکمه های شبکه های اجتماعی،  کارکردی متفاوت با سایر دکمه های منو دارند ، بنابراین آنها را با ظاهری متفاوت ایجاد خواهیم کرد.

یک پوشه به نام social در پنل لایه ها ایجاد کنید و این پوشه را در پوشه منو navigation قرار دهید.

حالا ، از ابزار رسم مستطیل گوشه گرد با گرد شدگی ۴ px استفاده کنید و کلید Shift را نگه داشته و یک مربع گوشه گرد به اندازه های ۲۵×۲۵ px ایجاد کنید. این مربع از جهت عمودی در وسط نوار منو قرار دارد. و۲۲ pxاز سمت راست با منوی اصلی فاصله خواهد داشت:

به لایه یک استایل  drop shadow بدهید ، سایه را با این تنظیمات ایجاد کنید. color=#FFFFFF ، size=0px و blend mode= Lighten ، distance=1px ، spread=0% این تنظیمات افکتی را در زیر دکمه ایجاد کرده و باعث میشوند که زیر دکمه روشنتر به نظر برسد:

درپنجره استایل لایه ، روی گزینه inner shadow کلیک کنید و رنگ مشکی با opacity=39% ، distance= 1px  و size 4px را انتخاب کنید.

استایل بعدی Color Overlay است رنگ #۳۵۳۷۴۱ را برای ظاهری تخت به دکمه اضافه کنید:

ما قصد داریم با ابزار Pen ایکون فیسبوک را ایجاد کنیم . بنابراین ابتدا یک ایکون از این شبکه اجتماعی را دانلود کرده و با ابزار Pen در حالت path یک مسیر برای واژه F این شبکه اجتماعی ترسیم می کنیم:

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

و گزینه Define Custom Shape را انتخاب کنید تا مسیر ذخیره شود.

 

حالا با کمک ابزار رسم شکل سفارشی با کلید میانبر Shift+U شکلی را که ایجاد کرده اید را انتخاب و در اندازه مناسب با مکان آن دراگ کنید.

حالا میزان opacity=20% لایه را تنظیم کنید

با همین روش سایر ایکون های شبکه های اجتماعی را اضافه کنید:

ایجاد خطوط راهنمای بیشتر

در مثال ما نمایی برای تصویر اصلی سایت یا همان بنر سایت ایجاد خواهیم کرد. اندازه این تصویر ۶۴۰×۴۸۰ px است .

از آنجا که قصد داریم تصویر از جهت عمودی وسط چین باشد باید خطوط راهنمایی را اضافه کنیم . برای اینکار از دستور View > New Guide> Add horizontal guides>180px , 660px   استفاده کنید. اینکار باعث میشود که تصویر ما در وسط صفحه قرار گیرید.

ما متونی برای سمت چپ تصویر لازم داریم ، برای اینکار خطوط راهنمای خود را add vertical guides=400px and 350px  ایجاد خواهیم کرد. اینکار فضای کافی به متن ها در کنار تصویر خواهد داد. در آخر هم خطوط راهنمای add vertical guides=1040px and 1070px  را اضافه کنید. اینکار لبه های نمایش تصویر را مشخص خواهد کرد و margin لازم برای عکس را به کد نویس ارائه خواهد داد.

یک قاب برای عکس سایت بسازیم 

یک پوشه به نام Projects ایجاد کنید . با ابزار رسم مستطیل یک مستطیل ۶۴۰x480px ایجاد و آنرا در سمت بالاچپ خط راهنمای عمودی در ۴۰۰px پیکسل قرار دهید و در بالای خط افقی در ۱۸۰px پیکسل رسم کنید. این مربع قاب چهار عکس را مهیا می کند.

روی لایه راست کلیک کنید و گزینه Rasterize را انتخاب کنید:

 

آموزش طراحی رابط کاربری با فتوشاپ

کلید Alt را نگه داشته و لایه را دراگ کنید تا کپی شود . لایه کپی را به سمت راست بکشید تا ۳۰px از خط راهنمای ۱۰۷۰px فاصله داشته باشد.

دو کپی دیگر برای قرار دادن در زیر خط راهنما ایجاد کنید به هر کدام ۳۰px فاصله بدهید:

 

از ابزار سطل رنگ استفاده کرده و هر کدام از این اشکال را با رنگ ۲۵۲a3a # پر کنید.

ساختن افکت محو شدگی برای سایت 

یک پوشه جدید به نام Vignette در زیر پوشه Navigation و بالای پوشه Projects ایجاد کنید.

یک لایه جدید ایجاد کرده و با ابزار سطل رنگ لایه را با رنگ ۰f1219 # پر کنید.

ابزار رسم بیضی را انتخاب کنید، یک خط دایره ای در گوشه قسمت اصلی تصویر ایجادکنید:

حالا افکت محو شدگی را به اجرا بگذارید. ما باید این قسمت را در گوشه های آن محو کنیم. برای اجرای این کار دور شکل دایره یک ناحیه انتخاب ایجاد کنید . و دستور=۶۰px Select > Modify > Feather را اجرا کنید. حالا ناحیه انتخاب را کات کنید  Ctrl-x:

کلیپ ماسک کردن تصویر اسلاید

ما یک تصویر برای قرار دادن در اسلاید شو انتخاب کرده ایم،  به پوشه Projects رفته و عکس را در آن اضافه کرده ایم . این عکس الان در بالای لایه قاب قرار دارد . این لایه را با لایه قاب کلیپ ماسک کنید:

تصاویر بیشتری را به این قسمت اضافه کنید:

میزان opacity=20%  همه عکس ها بجز عکس اصلی را کاهش دهید.

چگونه متن به سایت اضافه کنیم 

ما سه کادر متن برای بخش متن خواهیم داشت .

اولین کادر متن با فونت DIN Light اجرا شده و سمت چپ خط راهنمای  عکس اصلی با ۴۰px فاصله در زیر خط راهنما ایجاد شده است. رنگ را روی سفید تنظیم کنید. و tracking=-25  بگذارید. برای متن های نازکتر از اندازه فونت ۲۸px استفاده کنید.

ما یک خط برای دسته بندی پروژه اضافه کرده ایم که اندازه فونت ۱۴px و tracking=100   رنگ این متن را ۳۳۸۹۶۶ # قرار دهید:

برای متن های قسمت اصلی سایت از فونت Lucida Grande  یا Lucida Sans Unicode با اندازه فونت ۱۲px با رنگ ۸C8F95 # و line height=18PX استفاده کرده ایم .

 چطوری کنترل های موس بسازیم 

برای اینکه در آینده هم بتوانیم از این اشکال استفاده کنیم.سندی با اندازه های ۳۷x37px ایجاد می کنیم و سپس شکل زیر را با ابزار pen رسم می کنیم. ما تصویر یک پیکان را دانلود و روی آن با ابزار Pen یک شکل ایجاد کرده ایم . حالا ابزارانتخاب شکل را انتخاب و روی شکل کلیک و سپس راست کلیک کنید و شکل را ذخیره کنید.

در سند اصلی خود با شکل سفارشی ، شکل فلش ایجاد شده را اضافه کنید:

از شکل یک کپی ایجاد کرده و سپس دستور Edit > Transform > Flip horizontal را اجرا کرده و سپس یک کپی دیگر و دستور Edit > Transform > Rotate 90cw را اجرا کرده و به این ترتیب در جهت های اصلی فلش خواهیم داشت:

این فلش ها را در سه جهت عکس اصلی بگذارید و میزان opacity=12%  قرار دهید و فاصله هر کدام از عکس ها را ۱۵ پیکسل قرار دهید:

ایجاد افکت خطوط جهت دار

یک پوشه جدید به نام Orientation ایجاد کرده و آن را در بالای پوشه Vignette قرار دهید.

با ابزار مداد Pencil و انتخاب شکل مربع و رنگ سفید و اندازه ۵px خطی را مماس با خط راهنمای سمت چپ به طول ۶۰px ایجاد کنید.

لایه را کپی کنید تا ۱۲ خط ایجاد شود . این خطوط از هم ۲px فاصله داشته باشند:

در پنل لایه ها میزان opacity=12% لایه را کاهش دهید :

با کمک دستور Edit > Free Transform خطوط را بزرگ و کوچک کنید تا به افکت زیر برسید:

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

 بوجود اوردن کلید های کیبرد برای سایت 

جاوا اسکریپت هم مانند هر زبان دیگری امکان ایجاد عملگر برای دکمه های کیبورد را دارد.  برای ایجاد این افکت در فتوشاپ ابتدا یک پوشه به نام Keyboard ایجاد کرده و آنرا بالای پوشه Vignette قرار دهید. با ابزار رسم مستطیل و نگهداشتن کلید Shift مربعی به اندازه  ۲۰x20pxبا رنگ ۲۶۲a34 # ایجاد کنید. به لایه استایل Stroke بدهید stroke=1px و رنگ خط دور را  ۳۲۳۴۳f  # انتخاب کنید.

با کمک ابز ار pen و رنگ سفید فلش های مربوط به کیبرد را ایجاد کنید و opacity=20%  قرار دهید.

تصویر ما بعداز اینکه تمام فلش ها را در سرجای خود قرار دادیم به این صورت در آمده است :

0 پاسخ

دیدگاه خود را ثبت کنید

تمایل دارید در گفتگوها شرکت کنید؟
در گفتگو ها شرکت کنید.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *