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

در این مقاله می‌خوانید:

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

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

برای آموزش های بیشتر از ” بنرساز ” روی لینک کلیک کنید.

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

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

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

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

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

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

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

برای سایت ها تبلیغاتی و قالب های آماده شما باید حداقل عرض ناحیه طراحی را مشخص کنید و این عدد باید 1000 پیکسل باشد . تا کاربران دارای مانیتور های 768×1024 بتوانند سایت را همانگونه که طراحی کرده ایم مشاهده کنند.  ما در اینجا عرض تصویر را 1100 پیکسل تعیین خواهیم کرد.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

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

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

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

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

با کمک کلید میانبر Shift+U مستطیل گوشه گرد را انتخاب کرده و اندازه آن را 31×279 قرار داده و گردشدگی آن را 20 پیکسل تنظیم کنید. از سمت راست سند در حالیکه در حالت عمودی وسط نوار منو قرار دارید مستطیل را رسم کنید:

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

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

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

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

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

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

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

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

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

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

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

استایل بعدی Color Overlay است رنگ #353741 را برای ظاهری تخت به دکمه اضافه کنید:

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

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

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

 

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

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

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

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

در مثال ما نمایی برای تصویر اصلی سایت یا همان بنر سایت ایجاد خواهیم کرد. اندازه این تصویر 640×480 px است .

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

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

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

یک پوشه به نام Projects ایجاد کنید . با ابزار رسم مستطیل یک مستطیل 640x480px ایجاد و آنرا در سمت بالاچپ خط راهنمای عمودی در 400px پیکسل قرار دهید و در بالای خط افقی در 180px پیکسل رسم کنید. این مربع قاب چهار عکس را مهیا می کند.

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

 

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

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

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

 

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

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

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

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

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

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

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

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

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

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

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

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

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

ما یک خط برای دسته بندی پروژه اضافه کرده ایم که اندازه فونت 14px و tracking=100   رنگ این متن را 338966 # قرار دهید:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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