هنگام انتشار این محصول ، به من اطلاع رسانی شود به محظ انتشار محصول به شما اطلاع رسانی می گردد ، ایمیل صحیح خودتان را در فیلد زیر درج کنید.
Email نشانی ایمیل شما نزد آریاگستر محفوظ می ماند
آموزش Photoshop : طراحی رابط کاربری اپلیکیشن دانلود – قسمت دوم - آریاگستر - آریاگستر
آموزش Photoshop : طراحی رابط کاربری اپلیکیشن دانلود – قسمت دوم

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

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

توی این آموزش، طراحی رابط کاربری اپلیکیشن دانلود رو با Photoshop با هم می بینیم. فتوشاپ یک نرم افزار فوق العاده برای طراحی اپلیکیشن های موبایل هست و ابزارهای وکتور، افکت های Layer Style به طراح هاجازه میده که طرح پروژه رو به راحتی و به سرعت طراحی کنن. بعد از اتمام این آموزش، با روش طراحی رابط کاربری مدرن و همچنین طراحی نمودار آشنا میشین. بیاین ادامه بدیم!

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

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

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

گام هفتم

ابزار Type رو بر می داریم و بخش میانی دایره ها رو انتخاب می کنیم. بعد هم عدد ۶۲ رو توی قسمت مشخص شده، به صورت زیر تایپ می کنیم:

Font روی Arial Black

Size روی ۱۰۰pt

Coloe روی #ffffff

حالا متن رو کاملا در وسط دایره قرار میدیم.

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

یک لایه متنی دیگه در کنار لایه ۶۲ درست می کنیم و این بار علامت % رو توی اون تایپ می کنیم. برای این کار از جزئیات زیر استفاده می کنیم:

Font روی Arial Regular

Size روی ۲۰pt

Color روی #۵b6773

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

علامت % رو در محلی که می بینین قرار میدیم.

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

گام هشتم

باز هم میریم سراغ ابزار Type و درست در زیر لایه ۶۲، یک لایه متنی دیگه درست می کنیم و جزئیات زیر رو براش در نظر می گیریم:

Font روی Arial Regular

Size روی ۱۳pt

Tracking روی ۴۰۰

Color روی #۵b6773

بعد هم کلمه Download رو با حروف بزرگ تایپ می کنیم.

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

این لایه متنی رو در محلی که می بینین قرار میدیم.

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

به این ترتیب، نوار Progress تکمیل شده و به صورتی که در زیر می بینین، در اومده.

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

گام نهم

حالا باید دو تا دکمه دایره ای کوچک رو هم اضافه کنیم. با کمک خط راهنمای سمت چپ، و با استفاده از ابزار Ellipse، یک دایره به اندازه ۱۰۰ پیکسل رسم می کنیم. کد رنگی #۱۹۲۲۲a رو براش در نظر می گیریم. اسم لایه این دایره رو میزاریم Circle 5. بعد هم این دایره رو در محلی که توی تصویر زیر مشاهده می کنین، قرار میدیم.

یک دایره دیگه به ابعاد ۷۸ پیکسل هم رسم می کنیم. اسم لایه مربوط به این دایره جدید رو میزاریم Circle 5a و بعد هم کد رنگی #۲b3642 رو براش در نظر می گیریم.

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

گام دهم

هر دو لایه Circle 5 و Circle 5a رو انتخاب می کنیم. بعد هم روی اون ها کلیک راست می کنیم و Duplicate Layers رو می زنیم.

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

بعد از اینکه لایه ها Duplicate شدن، اسم اون ها رو میزاریم Circle 6 و Circle 6a. بعد هم اون ها رو در سمت راست قرار میدیم.

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

از فایل Additional Icons PSD، آیکن Pause رو انتخاب می کنیم و اون رو در وسط دایره لایه Circle 5 قرار میدیم.

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

از مجموعه Free Icon، آیکن Link رو انتخاب می کنیم و اون رو در وسط دایره مربوط به لایه Circle 6 قرار میدیم.

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

با استفاده از ابزار Transform، ابعاد اون رو به ۳۸ در ۴۸ پیکسل تغییر میدیم. به این ترتیب، ۲۰۰ درصد بزرگ تر میشه. هر افکتی که روی آیکن هست رو حذف می کنیم. برای این کار، روی لایه کلیک راست می کنیم و Clear Layer Style رو می زنیم. بعد هم کد رنگی #a8afb6 رو براش در نظر می گیریم.

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

  1. بخش پایینی

میریم سراغ بخش پایینی. این بخش به سه ردیف تقسیم میشه.

گام اول

ابزار Rectangle رو انتخاب می کنیم. یک مستطیل رسم می کنیم و از بالای سند شروع می کنیم و ۱۰۸ پیکسل به سمت پایین میایم. اسم این لایه رو میزاریم Lower 1.

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

روی Thumbnail مربوط به این لایه دابل کلیک می کنیم. کد رنگی #۱۹۲۲۲a رو براش در نظر می گیریم. میریم سراغ پنل Layers. روی اون کلیک راست می کنیم. Blending Options رو انتخاب می کنیم. Drop Shadows رو تیک می زنیم. Distance رو روی ۱ پیکسل و Angle رو روی ۹۰ درجه و Color رو روی #۲b3642 تنظیم می کنیم.

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

لایه Lower 1 رو Duplicate می کنیم و اسم لایه جدید رو میزاریم Lower 2. این لایه رو مستقیما زیر لایه Lower 1 قرار میدیم. باز هم اون رو Duplicate می کنیم و اسم نسخه جدید رو میزاریم Lower 3 و اون رو زیر لایه Lower 2 قرار میدیم.

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

گام دوم

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

با کمک خط راهنمای سمت چپ و ابزار Ellipse، یک دایره ۵۰ پیکسلی روی لایه Lower 1 رسم می کنیم. اسم این لایه رو میزاریم Lower Circle 1.

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

وارد Blending Options میشیم. Outer Stroke رو انتخاب می کنیم. Size رو روی ۳ پیکسل و Color رو روی #eb6c4d قرار میدیم.

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

Fill لایه Lower Circle 1 رو روی ۰ درصد قرار میمید.

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

با دنبال کردن مسیر Layer > Smart Object > Convert to Smart Object، این لایه رو به Smart Object تبدیل می کنیم.

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

حالا باید درصد رو مشخص کنیم. بنابراین برای این کار از Layer Mask کمک می گیریم. میریم سراغ نوار ابزار و Polygonal Lasso رو انتخاب می کنیم.

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

بخشی رو به صورتی که توی تصویر زیر مشاهده می کنین، از قسمت میانی لایه Lower Circle 1 انتخاب می کنیم.

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

بعد از اینکه انتخاب رو انجام دادیم، وارد مسیر Layer > Layer Mask > Hide Selection میشیم و Layer Mask رو انتخاب می کنیم. بعد هم از مجموعه ای که دانلود کردین، آیکن ابری که فلش به سمت پایین داره رو انتخاب می کنیم. این آیکن رو روی طرح کپی می کنیم و اون رو در وسط شکل مربوط به لایه Lower Circle 1 قرار میدیم.

هر Layer Effect که وجود داره رو حذف می کنیم. برای این کار، روی لایه کلیک راست می کنیم و Clear Layer Style رو می زنیم. کد رنگی #db66a4 رو براش در نظر می گیریم. حالا باید به صورتی که توی تصویر زیر می بینین، در اومده باشه.

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

گام سوم

سمت راست این علامتی که طراحی کردیم، متن اضافه می کنیم. برای این کار، ابزار Type رو بر می داریم. حدود ۳۰ پیکسل از سمت راست لایه لایه Lower Circle 1 رو انتخاب می کنیم. بعد هم متن رو با جزئیات زیروارد می کنیم:

Font روی Arial Regular

Size روی ۱۲pt

Color روی #۵b6779

بعد هم عبارت LATEST DOWLOAD رو با حروف بزرگ تایپ می کنیم.

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

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

گام چهارم

ابزار Type رو بر می داریم و سمت راست خط راهنما کلیک می کنیم و بعد هم متن رو راست چین می کنیم.

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

اعداد و حروف ۵۵٫۱ of 81 MB رو به صورت زیر وارد می کنیم:

Font روی Arial Black

Size روی ۲۰pt

Color روی #a8afb6

Of و MB رو هایلایت می کنیم و به صورت زیر تنظیم می کنیم:

Font روی Arial Regular

Font Size روی ۱۲pt

Color روی #۵b6773

برای اینکه متن به درستی دیده بشه شاید مجبور بشین یک سری چیزها رو جا به جا کنین. در نهایت، لایه Lower 1 به صورت زیر در میاد.

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

گام پنجم

توی لایه Lower 2 هم به همین اطلاعات نیاز داریم. با در نظر گرفتن خط راهنمای چپ، یک دایره به اندازه ۵۰ پیکسل درست می کنیم. اسمش رو میزاریم Lower Circle 2. بعد هم میریم سراغ Blending Options و Outer Stroke رو تیک می زنیم. Distance رو روی ۳ پیکسل و Color رو روی #eb6c4d تنظیم می کنیم.

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

هر افکتی که روی آیکن هست رو حذف می کنیم. برای این کار، کلیک راست می زنیم و Clear Layer Style رو انتخاب می کنیم. بعد هم کد رنگی #۳c4651 رو براش در نظر می گیریم.

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

گام ششم

سمت راست این علامتی که طراحی کردیم، متن اضافه می کنیم. برای این کار، ابزار Type رو بر می داریم. حدود ۳۰ پیکسل از سمت راست لایه لایه Lower Circle 2 رو انتخاب می کنیم. بعد هم متن رو با جزئیات زیروارد می کنیم:

Font روی Arial Regular

Size روی ۱۲pt

Color روی #۵b6779

بعد هم عبارت LATEST UPLOADS رو با حروف بزرگ تایپ می کنیم.

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

گام هفتم

متن ۵۵٫۱ of 81 MB رو Duplicate می کنیم.

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

این لایه جدید رو روی Lower 2 درگ کرده و متن رو به ۱۲۷٫۴GB تغییر میدیم.

Font روی Arial Black

Size روی ۲۰pt

Color روی #a8afb6

تنظیمات زیر رو برای GB مورد استفاده قرار میدیم:

Font روی Arial Regular

Size روی ۱۲pt

Color روی #۵b6773

تا اینجا به صورت زیر در میاد.

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

گام هشتم

می رسیم به آخرین ردیف یعنی Lower 3. که مشابه Lower 2 هست و می تونیم محتوای اون رو تکرار کنیم. یک دایره ۵۰ پیکسلی درست می کنیم. اسمش رو میزاریم Lower Circle 3. میریم سراغ Blending Options. حالا Outer Stroke رو تیک می زنیم. Distance رو روی ۳ پیکسل و Color رو روی #eb6c4d قرار میدیم.

Fill مربوط به لایه Lower Circle رو روی  ۰ درصد تنظیم می کنیم. این بار آیکنی که توی تصویر می بینین رو انتخاب می کنیم. اون رو روی طرح کپی می کنیم و در وسط لایه Lower Circle 3 قرار میدیم.

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

گام نهم

سمت راست این علامتی که طراحی کردیم، متن اضافه می کنیم. برای این کار، ابزار Type رو بر می داریم. حدود ۳۰ پیکسل از سمت راست لایه لایه Lower Circle 3 رو انتخاب می کنیم. بعد هم متن رو با جزئیات زیروارد می کنیم:

Font روی Arial Regular

Size روی ۱۲pt

Color روی #۵b6773

بعد هم عبارت SPACE USED رو با حروف بزرگ تایپ می کنیم.

گام دهم

در نهایت، ۱۲۷٫۴GB رو از Lower 2 کپی می کنیم.

لایه جدید رو روی Lower 3 درگ می کنیم و متن رو به ۴۶٫۹GB تغییر میدیم.

Font روی Arial Black

Size روی ۲۰pt

Color روی #a8afb6

GB هم به صورت زیر تنظیم میشه:

Font روی Arial Regular

Size روی ۱۲pt

Color روی #۵b6773

نتیجه

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

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

– صفر تا صد آموزش فتوشاپ

– صفر تا صد آموزش  فتوشاپ در عکاسی

 جادوی فتوشاپ پک ۱

 جادوی فتوشاپ پک ۲

– صفر تا صد آموزش دیجیتال پینتینگ – پک ۱

– صفر تا صد آموزش دیجیتال پینتینگ – پک ۲

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

مطالب مرتبط

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

پاسخ دهید

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


*

ارسال رایگان تمام سفارشات به سراسر ایران - تا 35 درصد تخفیف ویژه در خرید همزمان چند محصول - کلیک کنید! رد کردن