آموزش Photoshop : طراحی رابط کاربری اپلیکیشن Music Player آیفون – قسمت اول

آموزش Photoshop : طراحی رابط کاربری اپلیکیشن Music Player آیفون – قسمت اول

آموزش Photoshop : طراحی رابط کاربری اپلیکیشن Music Player آیفون قسمت اول

Photoshop، نرم افزار قدرتمندی برای ویرایش وکتوری ست. بنابراین توی این آموزش، نحوه طراحی رابط کاربری اپلیکیشن Music Player آیفون با Photoshop رو هم با رزولوشن اصلی آیفون و هم روزولوشن رتینا، با هم می بینیم. بیاین شروع کنیم!

با آموزش ” آموزش Photoshop : طراحی رابط کاربری اپلیکیشن Music Player آیفون ” با ما همراه باشید…

  • سطح سختی: متوسط
  • مدت آموزش: ۶۰ تا ۸۰ دقیقه
  • نرم افزار استفاده شده: Adobe Photoshop

” آموزش Photoshop : طراحی رابط کاربری اپلیکیشن Music Player آیفون – قسمت اول “

” آموزش Photoshop : طراحی رابط کاربری اپلیکیشن Music Player آیفون – قسمت دوم”

فایل های تمرین- Project Files

دانلود فایل های استفاده شده در این دوره – Project Files

گام اول

یک فایل جدید درست می کنیم و مقدار ۳۲۰px  رو برای Width و ۴۸۰px رو برای Height در نظر می گیریم.

آموزش Photoshop: طراحی رابط کاربری اپلیکیشن Muisc Player آیفون – قسمت اول

گام دوم

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

یک گروه جدید درست می کنیم و اسمش رو میزاریم Background. ابزار Rectangle یا R رو بر می داریم و از نوار امکانات، Tool Mode رو روی Shape قرار میدیم و بعد روی دکمه ای که کنار اون قرار داره کلیک می کنیم تا Shape Fill Type انتخاب بشه. از لیست Fill Type، روی دکمه Gradient کلیک می کنیم. مقادیری که در تصویر زیر می بینید رو وارد می کنیم و برای گرادیانت هم از مقادیر رنگی #۳f4042 و #۳۰۳۱۳۳ استفاده می کنیم.

آموزش Photoshop: طراحی رابط کاربری اپلیکیشن Muisc Player آیفون – قسمت اول

حالا روی بوم کلیک می کنیم. موقعی که پنجره Create Rectangle ظاهر شد، Ok رو می زنیم و مطمئن میشیم که ابعاد شکل، ۷۰۰ در ۷۰۰ پیکسل باشه. اسم لایه حاصل رو Background میزاریم.

آموزش Photoshop: طراحی رابط کاربری اپلیکیشن Muisc Player آیفون – قسمت اول

آموزش Photoshop: طراحی رابط کاربری اپلیکیشن Muisc Player آیفون – قسمت اول

Ctrl+A رو فشار میدیم و کل بوم رو به حالت انتخاب در میاریم. حالا میریم سراغ ابزار Move یا V و بعد هم نوار امکانات و روی دکمه های Align Horizontal Center و Align Vertical Center کلیک می کنیم.

آموزش Photoshop: طراحی رابط کاربری اپلیکیشن Muisc Player آیفون – قسمت اول

روی Thumbnail لایه Background دابل کلیک می کنیم و مطمئن میشیم که Dither تیک داشته باشه. این طوری گرادیانت صاف تری داریم.

آموزش Photoshop: طراحی رابط کاربری اپلیکیشن Muisc Player آیفون – قسمت اول

گام سوم

فایل Statusbar.psd رو باز می کنیم و بعد هم گروه Status Bar رو وارد فضای فتوشاپ می کنیم. از روش قبل برای قرار دادن این فایل در مرکز صفحه استفاده می کنیم (Ctrl+A رو فشار میدیم و کل بوم رو به حالت انتخاب در میاریم. حالا میریم سراغ ابزار Move یا V و بعد هم نوار امکانات و روی دکمه های Align Horizontal Center و Align Vertical Center کلیک می کنیم).

آموزش Photoshop: طراحی رابط کاربری اپلیکیشن Muisc Player آیفون – قسمت اول

گام چهارم

یک گروه جدید به زیر گروه Status Bar اضافه می کنیم و اسمش رو میزاریم Navigation Bar. ابزار Rounded Rectangle یا U رو بر می داریم و مقادیری که در زیر می بینید رو برای این ابزار در نظر می گیریم. برای گرادیانت از مقادیر رنگی #۵f8f1d و #۹۹b83d استفاده می کنیم. حالا روی بوم کلیک می کنیم و موقعی که پنجره Rounded Rectangle ظاهر شد، Ok می زنیم. اسم لایه جدید رو Nav Bg میزاریم.

آموزش Photoshop: طراحی رابط کاربری اپلیکیشن Muisc Player آیفون – قسمت اول

مثل تصویر زیر، روی دکمه های Align Horizontal Center و Align Vertical Center کلیک می کنیم تا شکل در مرکز صفحه قرار بگیره.

آموزش Photoshop: طراحی رابط کاربری اپلیکیشن Muisc Player آیفون – قسمت اول

ابزار Rectangle رو بر می داریم و یک شکل مستطیل مشابه چیزی که در تصویر زیر می بینید، می کشیم. یادتون باشه که این شکل فقط باید پایین لایه Nav Bg رو بپوشونه. هیچ رنگی هم برای این شکل در نظر نمی گیریم.

آموزش Photoshop: طراحی رابط کاربری اپلیکیشن Muisc Player آیفون – قسمت اول

از ابزار Path Selection یا A برای انتخاب شکل جدید استفاده می کنیم. حالا Ctrl+C رو فشار میدیم تا شکل روی Clipboard کپی بشه. لایه Nav Bg رو از پنل Layers انتخاب می کنیم و Ctrl+V رو فشار میدیم. شکل جدید روی لایه Nav Bg که داشتیم، Paste میشه.

آموزش Photoshop: طراحی رابط کاربری اپلیکیشن Muisc Player آیفون – قسمت اول

با ابزار Path Selection، روی دکمه Path Operation نوار امکانات کلیک می کنیم و بعد Subtract Front Shape رو تیک می زنیم.

آموزش Photoshop: طراحی رابط کاربری اپلیکیشن Muisc Player آیفون – قسمت اول

یک بار دیگه روی دکمه Path Operation نوار امکانات کلیک می کنیم و بعد Merge Shape Component رو تیک می زنیم.

آموزش Photoshop: طراحی رابط کاربری اپلیکیشن Muisc Player آیفون – قسمت اول

با ابزار Path Selection، دو نقطه پایین رو انتخاب می کنیم و تا زمانی که ارتفاع شکل به ۴۳ پیکسل برسه، درگ می کنیم.

آموزش Photoshop: طراحی رابط کاربری اپلیکیشن Muisc Player آیفون – قسمت اول

Layer Style زیر رو روی لایه Nav Bg اعمال می کنیم:

آموزش Photoshop: طراحی رابط کاربری اپلیکیشن Muisc Player آیفون – قسمت اول

گام پنجم

با استفاده از ابزار Rounded Rectangle، یک شکل با مقادیری که در زیر می بینید، رسم می کنیم. Fill Type شکل رو روی Solid Color قرار میدیم و اسم این لایه رو Settings Bg میزاریم.

آموزش Photoshop: طراحی رابط کاربری اپلیکیشن Muisc Player آیفون – قسمت اول

آموزش Photoshop: طراحی رابط کاربری اپلیکیشن Muisc Player آیفون – قسمت اول

Layer Style زیر رو روی شکل اعمال می کنیم:

آموزش Photoshop: طراحی رابط کاربری اپلیکیشن Muisc Player آیفون – قسمت اول

لایه Settings Bg رو به صورت عمودی در مرکز لایه Nav Bg قرار میدیم. این لایه باید به صورت افقی هم ۶ پیکسل با لبه فاصله داشته باشه.

آموزش Photoshop: طراحی رابط کاربری اپلیکیشن Muisc Player آیفون – قسمت اول

فایل Icons.psd رو باز می کنیم و اون رو روی لایه Settings Bg  قرار میدیم. این آیکن رو به صورت افقی و عمودی با این لایه تراز می کنیم.

آموزش Photoshop: طراحی رابط کاربری اپلیکیشن Muisc Player آیفون – قسمت اول

Layer Style زیر رو روی اون اعمال می کنیم:

آموزش Photoshop: طراحی رابط کاربری اپلیکیشن Muisc Player آیفون – قسمت اول

گام ششم

با استفاده از ابزار Rounded Rectangle، یک شکل جدید با مقادیری که در زیر می بینید، رسم می کنیم. Fill Type شکل رو روی Solid Color قرار میدیم و اسم لایه جدید رو Back Bg میزاریم.

آموزش Photoshop: طراحی رابط کاربری اپلیکیشن Muisc Player آیفون – قسمت اول

آموزش Photoshop: طراحی رابط کاربری اپلیکیشن Muisc Player آیفون – قسمت اول

با استفاده از ابزار Anchor Point، یک Anchor Point به سمت چپ مستطیل اضافه می کنیم. یک Anchor Ponit هم به بالا اضافه می کنیم طوری که ۱۴ پیکسل از لبه فاصله داشته باشه.

آموزش Photoshop: طراحی رابط کاربری اپلیکیشن Muisc Player آیفون – قسمت اول

برای کلیک روی همون Anchor Point از ابزار Convert Point استفاده می کنیم.

آموزش Photoshop: طراحی رابط کاربری اپلیکیشن Muisc Player آیفون – قسمت اول

حالا ابزار Direct Selection یا A رو بر می داریم و Anchor Point رو ۱۰ پیکسل به سمت چپ می کشیم.

آموزش Photoshop: طراحی رابط کاربری اپلیکیشن Muisc Player آیفون – قسمت اول

آموزش Photoshop: طراحی رابط کاربری اپلیکیشن Muisc Player آیفون – قسمت اول

با ابزار Direct Selection، هر دو Anchor Point مشخص شده در تصویر زیر رو انتخاب می کنیم و اون ها رو ۱ پیکسل به سمت چپ می کشیم. بعد ابزار Convert Point رو بر می داریم و روی هر کدوم از دو Anchor Point کلیک می کنیم.

آموزش Photoshop: طراحی رابط کاربری اپلیکیشن Muisc Player آیفون – قسمت اول

این شکل رو به صورت عمودی در مرکز لایه Nav Bg قرار میدیم و به صورت افقی هم ۶ پیکسل از لبه سمت چپ بوم فاصله میدیم.

آموزش Photoshop: طراحی رابط کاربری اپلیکیشن Muisc Player آیفون – قسمت اول

گام هفتم

حالا که کار این شکل تمام شد، می تونیم Layer Style بهش اضافه کنیم. روی لایه Settings Bg کلیک راست می کنیم و Copy Layer Styleر و انتخاب می کنیم. بعد هم روی لایه Back Bg کلیک راست می کنیم و Paste Layer Style رو می زنیم.

آموزش Photoshop: طراحی رابط کاربری اپلیکیشن Muisc Player آیفون – قسمت اول

متنی که در زیر می بینید رو اضافه می کنیم. من از فونت Helvetica Neue استفاده کردم. متن رو در مرکز شکل قرار میدیم و Layer Style لایه Settingsر و کپی می کنیم.

 

آموزش Photoshop: طراحی رابط کاربری اپلیکیشن Muisc Player آیفون – قسمت اول

متنی که در زیر می بینید رو به شکل اضافه می کنیم و اون رو در مرکز لایه Navigation Bar قرار میدیم.

آموزش Photoshop: طراحی رابط کاربری اپلیکیشن Muisc Player آیفون – قسمت اول

آموزش Photoshop: طراحی رابط کاربری اپلیکیشن Muisc Player آیفون – قسمت اول

گام هشتم

یک گروه جدید به زیر گروه navigation Bar اضافه می کنیم و اسمش رو میزاریم Position. ابزار Rectangle رو بر می داریم و مقادیری که تصویر زیر می بینید رو در نظر می گیریم. حالا روی بوم کلیک می کنیم. مقادیری رنگی #۲e2f30 و ۴۹۴a4c رو برای گرادیانت در نظر می گیریم و اسم لایه رو میزاریم Position Bg.

آموزش Photoshop: طراحی رابط کاربری اپلیکیشن Muisc Player آیفون – قسمت اول

شکل رو زیر Navigation Bar قرار میدیم اما باید مطمئن بشیم که بین شون ۱ پیکسل فاصله باشه. بعد هم شکل رو به صورت افقی با بوم تراز می کنیم.

آموزش Photoshop: طراحی رابط کاربری اپلیکیشن Muisc Player آیفون – قسمت اول

Layer Style زیر رو روی شکل اعمال می کنیم:

آموزش Photoshop: طراحی رابط کاربری اپلیکیشن Muisc Player آیفون – قسمت اول

آموزش Photoshop: طراحی رابط کاربری اپلیکیشن Muisc Player آیفون – قسمت اول

گام نهم

ابزار Rounded Rectangle رو بر می داریم و مقادیر زیر رو در نظر می گیریم. بعد روی بوم کلیک می کنیم. مقدار Radius رو افزایش میدیم. من گذاشتم روی ۵۰px.

آموزش Photoshop: طراحی رابط کاربری اپلیکیشن Muisc Player آیفون – قسمت اول

اسم لایه رو میزاریم Position Empty و به صورت عمودی و افقی با مرکز لایه Position Bg تراز می کنیم.

آموزش Photoshop: طراحی رابط کاربری اپلیکیشن Muisc Player آیفون – قسمت اول

Layer Style زیر رو اعمال می کنیم:

آموزش Photoshop: طراحی رابط کاربری اپلیکیشن Muisc Player آیفون – قسمت اول

ابزار Rounded Rectangle رو بر می داریم و مقادیر زیر رو وارد می کنیم. حالا روی بوم کلیک می کنیم. مقادیر #۸۵ad2a، a0d028 و #b6d028 رو برای گرادیانت در نظر می گیریم. بار دیگه مقدار Radius رو افزایش میدیم و اسمش رو میزاریم Position Full.

آموزش Photoshop: طراحی رابط کاربری اپلیکیشن Muisc Player آیفون – قسمت اول

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

آموزش Photoshop: طراحی رابط کاربری اپلیکیشن Muisc Player آیفون – قسمت اول

آموزش Photoshop: طراحی رابط کاربری اپلیکیشن Muisc Player آیفون – قسمت اول

Layer Style زیر رو اعمال می کنیم:

آموزش Photoshop: طراحی رابط کاربری اپلیکیشن Muisc Player آیفون – قسمت اول

گام دهم

ابزار Ellipse رو بر می داریم و مقادیری که در زیر می بینید رو وارد می کنیم. بعد روی بوم کلیک می کنیم و #۴۴۴۵۴۷ و #۵c5e61 رو برای گرادیانت در نظر می گیریم. اسم این لایه رو میزاریم Handle.

آموزش Photoshop: طراحی رابط کاربری اپلیکیشن Muisc Player آیفون – قسمت اول

این شکل رو در سمت راست لایه Position Full قرار میدیم.

آموزش Photoshop: طراحی رابط کاربری اپلیکیشن Muisc Player آیفون – قسمت اول

Layer Style زیر رو اعمال می کنیم:

آموزش Photoshop: طراحی رابط کاربری اپلیکیشن Muisc Player آیفون – قسمت اول

یک بار دیگه ابزار Ellipse رو بر می داریم. بعد روی بوم کلیک می کنیم و #۶۳۶۶۶۹ و #۳۸۳۹۳b رو برای گرادیانت در نظر می گیریم. اسم این لایه رو میزاریم Handle Circle.

آموزش Photoshop: طراحی رابط کاربری اپلیکیشن Muisc Player آیفون – قسمت اول

این شکل رو در مرکز لایه Handle قرار میدیم.

آموزش Photoshop: طراحی رابط کاربری اپلیکیشن Muisc Player آیفون – قسمت اول

این بار متن اضافه می کنیم. من از فونت Helvetica Neue به صورت Bold استفاده کردم. Size رو روی ۱۰pt و Color رو روی #۲b2b2b قرار دادم. متن رو در محلی که در تصویر می بینید، قرار میدیم.

آموزش Photoshop: طراحی رابط کاربری اپلیکیشن Muisc Player آیفون – قسمت اول

گام یازدهم

یک گروه جدید درست می کنیم و اسمش رو میزاریم Playback Controls. با استفاده از ابزار Ellipse، یک دایره به ابعاد ۵۰ در ۵۰ پیکسل رسم می کنیم. به پارامترهای دیگه توجه نمی کنیم و اسم لایه رو میزاریم Play Bg.

آموزش Photoshop: طراحی رابط کاربری اپلیکیشن Muisc Player آیفون – قسمت اول

آموزش Photoshop: طراحی رابط کاربری اپلیکیشن Muisc Player آیفون – قسمت اول

گروه Position رو باز می کنیم، روی Handle کلیک راست می کنیم و Copy Shape Attributes رو زا منو انتخاب می کنیم.

آموزش Photoshop: طراحی رابط کاربری اپلیکیشن Muisc Player آیفون – قسمت اول

بر می گردیم سراغ گروه Playeback Controls. روی لایه Play Bg کلیک راست می کنیم و Paste Shape Attributes رو از منو انتخاب می کنیم. این یکی از ویژگی های جدید این ورژن فتوشاپ هست. این طوری به جای اینکه تمام مقادیر مثل Shape Fill Type و Gradient Color و Angle و غیره رو دوباره وارد کنیم، این ویژگی ها رو از لایه Handle کپی می کنیم و توی لایه جدید، Paste می کنیم.

آموزش Photoshop: طراحی رابط کاربری اپلیکیشن Muisc Player آیفون – قسمت اول

این لایه رو به صورت افقی در مرکز لایه قرار میدیم اما باید ۲۰ پیکسل زیر لایه Position Bg قرار داشته باشه.

آموزش Photoshop: طراحی رابط کاربری اپلیکیشن Muisc Player آیفون – قسمت اول

Layer Style زیر رو اعمال می کنیم:

آموزش Photoshop: طراحی رابط کاربری اپلیکیشن Muisc Player آیفون – قسمت اول

آموزش Photoshop: طراحی رابط کاربری اپلیکیشن Muisc Player آیفون – قسمت اول

گام دوازدهم

روی لایه Play Bg کلیک راست می کنیم و Duplicate Layer رو می زنیم. اسم این لایه جدید رو میزاریم Fast Backward  Bg.

آموزش Photoshop: طراحی رابط کاربری اپلیکیشن Muisc Player آیفون – قسمت اول

با استفاده از ابزار Past Selection، روی لایه Fast Backward کلیک می کنیم و ابعاد نوار امکانات رو روی ۳۴ در ۳۴ پیکسل قرار میدیم.

آموزش Photoshop: طراحی رابط کاربری اپلیکیشن Muisc Player آیفون – قسمت اول

این لایه رو به صورت عمودی در مرکز لایه Play Bg قرار میدیم اما باید ۸ پیکسل از سمت چپ فاصله داشته باشه.

آموزش Photoshop: طراحی رابط کاربری اپلیکیشن Muisc Player آیفون – قسمت اول

لایه Fast Backward Bg رو Duplicate می کنیم و اسمش رو میزاریم Fast Forward Bg. این لایه رو مثل قبل، اما در سمت راست قرار میدیم.

آموزش Photoshop: طراحی رابط کاربری اپلیکیشن Muisc Player آیفون – قسمت اول

ادامه آموزش ” آموزش Photoshop : طراحی رابط کاربری اپلیکیشن Music Player آیفون – قسمت دوم”

0نظرات
دیدگاه خود را بنویسید

پاسخی بگذارید

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