در این مقاله رابط کاربری یک سایت را ایجاد خواهیم کرد. با ما همراه باشید.
آموزش طراحی رابط کاربری در فتوشاپ
در پایان این آموزش تصویر زیر را به دست خواهیم آورد:
امروزه کمتر سایتی را می بینیم که رابط کاربری آن منحصر به فرد باشد. در این آموزش تلاش کرده ایم که رابط کاربری یک سایت را به شیوه ای منحصر به فرد طراحی کنیم.
ایجاد یک قالب سایت فراموش نشدنی
تصور کنید که شما یک گرافیست باشید و بخواهید سایتی برای خود ایجاد کنید. برای داشتن یک وب سایت تاثیر گذار ، ضاهر سایت شما باید مشتری را مبهوت کند و اگر اینطور باشد، تاثیر نمونه کار های شما چندین برابر خواهد شد.
شرکت طراحی سایت سارگون مجری تخصصی سایت های سفارشی ، برای مشاوره رایگان با ما تماس بگیرید.
در این مثال به شما نشان میدهیم که با کارهای ساده گرافیکی ، چگونه میتوان یک رویکرد نوآورانه داشت.
گرافیک سایت خود را به حرفه ای ترین تیم گرافیکی بسپارید .
گام نخست : ایجاد بوم
همانطور که در همه آموزش های طراحی قالب سایت گفتیم، برای طراحی یک قالب اولین کار ما ایجاد یک بوم جدید است . بوم خود را در اندازه های 900×1400 ایجاد کنید . ما در هنگام کد نویسی ، سایت های خود را بصورت ریسپانسیو طراحی خواهیم کرد . بنابراین اندازه ثابتی در نهایت نخواهیم داشت.
گام دوم : ایجاد پس زمینه
ما برای ایجاد رنگ در پس زمینه از لایه تنظیمی Solid Color استفاده کرده ایم . شما علاوه بر اینکه میتوانید لایه تنظیمی را ، از طریق پنل لایه ها اعمال کنید ،میتوانید دستور زیر را نیز برای اینکار استفاده کنید Select Layer > New Fill Layer > Solid Color برای رنگ از کد هگزا دسیمال 252a3b # استفاده کنید:
گام سوم: ایجاد خطوط راهنما
برای سایت ها تبلیغاتی و قالب های آماده شما باید حداقل عرض ناحیه طراحی را مشخص کنید و این عدد باید 1000 پیکسل باشد . تا کاربران دارای مانیتور های 768×1024 بتوانند سایت را همانگونه که طراحی کرده ایم مشاهده کنند. ما در اینجا عرض تصویر را 1100 پیکسل تعیین خواهیم کرد.
ابتدا مطمئن شوید که سیستم خطوط راهنما بر روی پیکسل تنظیم است. برا اینکار از دستور Preferences > Units & Guides استفاده کنید:
حالا دستور View > New Guide را اجرا کنید .از آنجا که ما قصد داریم محتوای اصلی در وسط سایت قرار داشته باشد خطوط راهنما را در فواصل 150px و 1250px قرار می دهیم.
گام 4 : ایجاد الگوی بافت
یک طراحی خوب، طراحی است که بین طرح ها و محتوای شما با بافت پسزمینه اختلاف ایجاد کند ، تا محتوا براحتی هردو قابل دیده شدن و خوانده شدن باشند.
برای ایجاد بافت ابتدا یک سند جدید در ابعاد 12×12 پیکس ایجاد کرده و پسزمینه سند خود را ترانسپرنت می کنیم. حالا یک لایه جدید با رنگ سیاه ایجاد می کنیم:
حالا دستور Layer > New > Layer را اجرا کنید . از ابزار مداد pencil برای ابعاد 1px برای رسم خطوط زیر استفاده کنید :
بر روی لایه خطوط کلیک کرده و opacity=6% قرار دهید . برای ذخیره این الگو دستور Edit > Define Pattern را اجرا کنید.
گام 5: نوار منو
این سایت بصورتی طراحی شده است که اسکرول نداشته باشد بنابراین منوی را در زیر سایت طراحی کرده ایم .
برای ایجاد منو ابتدا یک پوشه ایجاد کنید. ما نام پوشه را 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 را نگه داشته و یک مربع گوشه گرد به اندازه های 25x25 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% لایه را تنظیم کنید
با همین روش سایر ایکون های شبکه های اجتماعی را اضافه کنید:
گام نهم: افزودن خطوط راهنمای بیشتر
در مثال ما نمایی برای تصویر اصلی سایت یا همان بنر سایت ایجاد خواهیم کرد. اندازه این تصویر 640x480 px است .
از آنجا که قصد داریم تصویر از جهت عمودی وسط چین باشد باید خطوط راهنمایی را اضافه کنیم . برای اینکار از دستور View > New Guide> Add horizontal guides>180px , 660px استفاده کنید. اینکار باعث میشود که تصویر ما در وسط صفحه قرار گیرید.
ما متونی برای سمت چپ تصویر لازم داریم ، برای اینکار خطوط راهنمای خود را add vertical guides=400px and 350px ایجاد خواهیم کرد. اینکار فضای کافی به متن ها در کنار تصویر خواهد داد. در آخر هم خطوط راهنمای add vertical guides=1040px and 1070px را اضافه کنید. اینکار لبه های نمایش تصویر را مشخص خواهد کرد و margin لازم برای عکس را به کد نویس ارائه خواهد داد.
گام 10: ایجاد یک قاب برای عکس
یک پوشه به نام 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 پیکسل قرار دهید:
گام 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% قرار دهید.
تصویر ما بعداز اینکه تمام فلش ها را در سرجای خود قرار دادیم به این صورت در آمده است :
تهیه و تنظیم توسط شرکت سارگون با ما همراه باشید.