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

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

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

توی این آموزش، طراحی رابط کاربری بازی چکرز موبایل رو با Photoshop با هم می بینیم. اول از همه با تنظیم خطوط چهارخانه شروع می کنیم. بعد هم مولفه های اصلی این بازی رو با استفاده از شکل های وکتور طراحی می کنیم. در نهایت، با نحوه اضافه کردن سایه، هایلایت و تکسچر با استفاده از Layer Style، آشنا میشیم. بیاین ادامه بدیم!

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

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

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

  1. اضافه کردن سایه و هایلایت به صفحه بازی

گام اول

ابزار Rectangle رو بر می داریم. Fill رو روی مشکی با کد رنگی #۰۰۰۰۰۰ تنظیم می کنیم و یک شکل ۶۴۰ در ۹۴۰ پیکسل رسم می کنیم. بعد هم اون رو در محلی که توی تصویر اول می بینین قرار میدیم.

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

گام دوم

شکل مشکی که توی گام قبل درست کردیم رو Duplicate می کنیم. نسخه کپی رو انتخاب می کنیم و اون رو در پایین پنل Layers درگ می کنیم و بالای شکل Background قرار میدیم. وارد پنل Layers میشیم و اسم شکلی که توی این مرحله درست کردیم رو میزاریم Shadow. پنجره Layers Style مربوط به این شکل رو باز می کنیم. Outer Glow رو فعال می کنیم و مقادیری که توی تصویر زیر می بینین رو وارد می کنیم.

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

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

گام سوم

میریم سراغ شکل مشکی جلو. Fill رو تا ۰ درصد کاهش میدیم و پنجره Layer Style اون رو باز می کنیم. Inner Glow رو فعال می کنیم و مقادیری که توی تصویر زیر می بینین رو وارد می کنیم.

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

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

گام چهارم

ابزار Rectangle رو بر می داریم و Fill رو روی #۰۰۰۰۰۰ تنظیم می کنیم. یک شکل ۶۴۰ در ۵ پیکسل رسم می کنیم و اون رو در محلی که توی تصویر زیر می بینین قرار میدیم. مطمئن میشیم که این مستطیل همچنان انتخاب شده باشه. وارد پنل Layers میشیم و Opacity رو تا ۱۰ درصد کاهش میدیم.

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

گام پنجم

ابزار Rectangle رو بر می داریم و Fill رو روی #۰۰۰۰۰۰ تنظیم می کنیم. یک شکل ۶۵۰ در ۵ پیکسل رسم می کنیم و اون رو در محلی که توی تصویر زیر می بینین قرار میدیم. مطمئن میشیم که این مستطیل همچنان انتخاب شده باشه. وارد پنل Layers میشیم و Opacity رو تا ۱۰ درصد کاهش میدیم.

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

  1. طراحی قطعات چکرز

گام اول

ابزار Ellipse رو بر می داریم و Fill رو روی #d11812 تنظیم می کنیم. یک دایره ۵۵ پیکسلی رسم می کنیم و اون رو در محلی که توی تصویر اول می بینین، قرار میدیم. وارد پنل Layer Style این شکل جدید میشیم و مقادیری که توی تصویر می بینین رو وارد می کنیم.

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

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

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

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

گام دوم

ابزار Ellipse رو بر می داریم و Fill رو روی کد رنگی #bd0400 تنظیم می کنیم. یک دایره ۵۵ پیکلسی جدید رسم می کنیم و اون رو در محلی که توی تصویر می بینین قرار میدیم. مطمئن میشیم که این شکل جدید و ابزار Ellipse انتخاب شده باشن. Alt رو نگه می داریم و یک دایره ۴۵ پیکلسی به شکلی که توی تصویر دوم می بینین رسم می کنیم. پنجره Layer Style این شکل رو باز می کنیم و مقادیری که توی تصویر می بینین رو وارد می کنیم.

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

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

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

گام سوم

Grid رو غیر فعال و Pixel Grid رو فعال می کنیم. ابزار Ellipse رو بر می داریم. Fill رو روی کد رنگی #bd0400 تنظیم می کنیم. یک دایره ۴۱ پیکلسی رسم می کنیم و اون رو در محلی که توی تصویر اول می بینین قرار میدیم. مطمئن میشیم که این شکل جدید و ابزار Ellipse انتخاب شده باشن. Alt رو نگه می داریم و دایره ای ۳۷ پیکسلی به شکلی که توی تصویر دوم می بینین رسم می کنیم. پنجره Layer Style شکل حاصل رو باز می کنیم و مقادیری که توی تصویر زیر می بینین رو وارد می کنیم. بر می گردیم سراغ پنل Layers. روی شکل وکتوری که توی این مرحله درست کردیم کلیک راست می کنیم و Copy Layer Style رو می زنیم.

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

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

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

گام چهارم

ابزار Ellipse رو بر می داریم. Fill رو روی کد رنگی #bd0400 تنظیم می کنیم. یک دایره ۳۳ پیکلسی رسم می کنیم و اون رو در محلی که توی تصویر اول می بینین قرار میدیم. مطمئن میشیم که این شکل جدید و ابزار Ellipse انتخاب شده باشن. Alt رو نگه می داریم و دایره ای ۲۹ پیکسلی به شکلی که توی تصویر دوم می بینین رسم می کنیم. پنجره Layer Style شکل حاصل رو باز می کنیم و مقادیری که توی تصویر زیر می بینین رو وارد می کنیم. بر می گردیم سراغ پنل Layers. روی شکل وکتوری که توی این مرحله درست کردیم کلیک راست می کنیم و Paste Layer Style رو می زنیم.

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

گام پنجم

ابزار Ellipse رو بر می داریم. Fill رو روی کد رنگی #bd0400 تنظیم می کنیم. یک دایره ۲۵ پیکلسی رسم می کنیم و اون رو در محلی که توی تصویر اول می بینین قرار میدیم. مطمئن میشیم که این شکل جدید و ابزار Ellipse انتخاب شده باشن. Alt رو نگه می داریم و دایره ای ۲۱ پیکسلی به شکلی که توی تصویر دوم می بینین رسم می کنیم. پنجره Layer Style شکل حاصل رو باز می کنیم و مقادیری که توی تصویر زیر می بینین رو وارد می کنیم. بر می گردیم سراغ پنل Layers. روی شکل وکتوری که توی این مرحله درست کردیم کلیک راست می کنیم و Paste Layer Style رو می زنیم.

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

گام ششم

ابزار Ellipse رو بر می داریم. Fill رو روی کد رنگی #bd0400 تنظیم می کنیم. یک دایره ۱۷ پیکلسی رسم می کنیم و اون رو در محلی که توی تصویر اول می بینین قرار میدیم. مطمئن میشیم که این شکل جدید و ابزار Ellipse انتخاب شده باشن. Alt رو نگه می داریم و دایره ای ۱۳ پیکسلی به شکلی که توی تصویر دوم می بینین رسم می کنیم. پنجره Layer Style شکل حاصل رو باز می کنیم و مقادیری که توی تصویر زیر می بینین رو وارد می کنیم. بر می گردیم سراغ پنل Layers. روی شکل وکتوری که توی این مرحله درست کردیم کلیک راست می کنیم و Paste Layer Style رو می زنیم.

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

گام هفتم

ابزار Ellipse رو بر می داریم. Fill رو روی کد رنگی #bd0400 تنظیم می کنیم. یک دایره ۷ پیکلسی رسم می کنیم و اون رو در محلی که توی تصویر اول می بینین قرار میدیم. پنجره Layer Style شکل حاصل رو باز می کنیم و مقادیری که توی تصویر زیر می بینین رو وارد می کنیم.

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

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

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

گام هشتم

Pixel Grid رو غیر فعال و Grid رو فعال می کنیم. تمام شکل هایی که به عنوان قطعات چکرز درست کردیم رو انتخاب و با هم گروه می کنیم. وارد پنل Layers میشیم و اسم این گروه جدید رو میزاریم RedPiece. این گروه رو Duplicate می کنیم. نسخه کپی رو انتخاب و اون رو چند پیکسل به پایین و راست درگ می کنیم. وارد پنل Layers میشیم و اسم این گروه کپی رو میزاریم BlackPiece و بعد هم اون رو باز می کنیم. شکل ها رو یک به یک انتخاب می کنیم و کد رنگی #۱e1e1e رو جایگزین می کنیم.

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

گام نهم

گروه های RedPiece و BlackPiece رو چند بار کپی می کنیم و اون ها رو به شکلی که توی تصویر اول می بینین، پخش می کنیم. یکی از این مهره های بیرون صفحه رو انتخاب می کنیم و Ctrl+T رو فشار میدیم. Shift رو نگه می داریم و اون رو به اندازه ۵۰ پیکسل در میاریم. همین تکنیک ساده رو روی چند تا از مهره های بیرون تکرار می کنیم. در نهایت وارد پنل Layers میشیم. مهره های قرمز رو از بیرون صفحه، بین شکل های MiddleSide و MiddleSideFront از گروه Top درگ می کنیم. مهره های مشکی رو هم بین شکل های MiddleSide و MiddleSideFront از گروه Bottom درگ می کنیم.

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

گام دهم

یکی از گروه های RedPiece و BlackPiece رو مجددا انتخاب و Duplicate می کنیم. این دو نسخه کپی رو Resize می کنیم و در محلی که توی تصویر می بینین قرار میدیم.

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

  1. طراحی دکمه ها و صفحه امتیاز

گام اول

ابزار Rounded Rectangle رو بر می داریم. Fill رو روی #bd6e34 تنظیم می کنیم و Radius رو روی ۵ پیکسل قرار میدیم. یک شکل ۱۵۵ در ۵۵ پیکسل و یک شکل ۵۵ پیکسل رسم می کنیم. این دو تا شکل رو در محلی که توی تصویر اول می بینین قرار میدیم. بعد هم پنجره Layer Style اون رو باز می کنیم و مقادیری که در زیر می بینین رو وارد می کنیم.

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

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

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

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

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

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

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

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

گام دوم

ابزار Type رو بر می داریم و روی بوم کلیک می کنیم. عبارت PLAYER 1 رو وارد می کنیم و در محلی که توی تصویر اول می بینین قرار میدیم. فونت رو روی Tidal و Size رو روی ۳۵pt و رنگ رو روی #۶e2e0d قرار میدیم. با استفاده از همین ابزار، یک عبارت دیگه هم اضافه می کنیم و در محلی که توی تصویر اول می بینین قرار میدیم. وارد پنل Layers میشیم. پنجره Layer Style متن اضافه شده رو باز می کنیم و مقادیر زیر رو وارد می کنیم.

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

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

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

گام سوم

ابزار Rounded Rectangle رو بر می داریم. Fill رو روی #b06e34 تنظیم می کنیم و Radius رو روی ۵ پیکسل قرار میدیم. یک شکل ۱۰۰ در ۵۵ پیکسل یک شکل ۲۰۰ در ۵۵ پیکسل و یک شکل ۱۲۰ در ۵۵ و در آخر یک شکل ۱۴۵ در ۵۵ پیکسل رسم می کنیم و اون ها رو در محلی که توی تصویر اول می بینین قرار میدیم. Layer Style مورد استفاده برای چهار مستطیل دیگه رو کپی و روی این شکل های جدید Paste می کنیم. در نهایت، چیزی شبیه تصویر دوم به دست میاد.

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

گام چهارم

با استفاده از ابزار Type، چند تا متن جدید اضافه می کنیم و اون ها رو در محلی که توی تصویر زیر می بینین قرار میدیم. همون ویژگی های متن های قبلی رو برای این متن ها هم در نظر می گیریم. یعنی Layer Style اون ها رو کپی و روی این متن ها Paste می کنیم. در نهایت، چیزی شبیه تصویر دوم به دست میاد.

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

  1. اضافه کردن Pattern به شکل پس زمینه

گام اول

در نهایت، پنجره Layer Style مربوط به شکل Background رو انتخاب می کنیم. Pattern Overlay رو فعال می کنیم و مقادیری که توی تصویر زیر می بینین رو وارد می کنیم.

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

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

گام دوم

به جای Pattern چوبی می تونین از Pattern چرمی هم استفاده کنین. Pattern یا الگوی چرمی رو می تونین از بخش فایل های تمرینی دانلود کنین.

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

تبریک! تمام شد!

این هم از نتیجه نهایی. امیدوارم بتونین این تکنیک ها رو توی پروژه های بعدی هم استفاده کنین.

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

این هم از ظاهر بازی توی صفحه موبایل.

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

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

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

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

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

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

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

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

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

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

مطالب مرتبط

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

پاسخ دهید

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


*

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