تدریس وب
جستجو در سایت
گروه مقاله : مقالات و انتشارات
تاريخ انتشار : 1395/12/22 - 16:08
كد :285

آموزش فتوشاپ حرفه ای طراحی ظاهر نرم افزار موبایل

طراحی یک اپلیکیشن موبایل با ظاهری بسیار ساده ، را در این آموزش باهم مرور خواهیم کرد.

آموزش فتوشاپ حرفه ای طراحی ظاهر نرم افزار موبایل

آموزش فتوشاپ حرفه ای طراحی ظاهر نرم افزار موبایل

در این آموزش ما نحوه ایجاد ظاهر یک نرم افزار ساختگی را آموزش خواهیم داد، این طراحی برای نرم افزار های واقعی در هنگام ارائه توضیحات و معرفی نرم افزار کمک خواهند کرد.

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

در تصویر زیر میبینید که در پایان این آموزش ما چه افکتی را طراحی خواهیم کرد.

آموزش فتوشاپ حرفه ای طراحی ظاهر نرم افزار موبایل

برای آنجام این آموزش شما به فتوشاپ نسخه CS3  و یا جدید تر و همچنین 30 دقیقه زمان و دانستن اصولی مانند نحوه تایپ کردن با فتوشاپ و نحوه ترکیب تصاویر را نیاز دارید.

گام 1: ایجاد یک سند جدید

برای ایجاد یک گرافیک شما باید ابتدا یک سند جدید ایجاد کنید در مقاله آموزش فتوشاپ پایه ایجاد یک فایل جدید نحوه انجام اینکار را خواهید آموخت. از اندازه های 750pxبرای widthو 1334pxبرای heightاستفاده کنید این ابعاد متعلق به گوشی iPhone 6است .

آموزش فتوشاپ حرفه ای طراحی ظاهر نرم افزار موبایل

گام 2:  ایجاد خطوط راهنما

حالا باید تعدادی خطوط عمودی ایجاد کنیم تا بتوانیم همه چیز را بر اساس آنها مرتب کنیم.برای اینکار از دستور View > New Guideو تنظیمات زیر استفاده کنید.

guidelines: 40px, 250px, 375px, 500px and 710px.

 

آموزش فتوشاپ حرفه ای طراحی ظاهر نرم افزار موبایل

گام 3: یک پوشه ایجاد کنید

برای ایجاد یک پوشه از دستور Layer > New > Groupاستفاده کرده و نام پوشه را Top Barبگذارید. ابزار انتخاب مستطیل را بردارید. و یک مستطیل 750x129px رسم کنید. روی پوشه راست کلیک کرده و از منوی راست کلیک گزینه Blending Options را انتخاب کنید.

آموزش فتوشاپ حرفه ای طراحی ظاهر نرم افزار موبایل

گام 4: ایکون های ایفون 6 را دانلود و یا ایجاد کنید

ما اینجا از اینترنت ایکون های بالای گوشی ایفون 6 را دانلود کرده ایم همانطور که میبینید تصاویر پیچیده ای نیستند و میتوانید آنها را رسم کنید. باابزار تایپ و رنگ سفید نوشته ها را ایجاد کنید:

آموزش فتوشاپ حرفه ای طراحی ظاهر نرم افزار موبایل

گام 5: عنوان نرم افزار خود را تایپ کنید

حالا که کادر بالای را ایجاد کرده ایم میتوانیم با ابزار تایپ متن عنوان را در آن تایپ کنیم ما از فونت Sans Pro (Regular) 40pxاستفاده می کنیم شما میتوانید این فونت را دانلود و یا از فونت دیگری استفاده کنید. رنگ  این عنوان هم باید سفید باشد هنگام انتخاب ابزار تایپ میتوانید رنگ آن را از نوار آپشن انتخاب کنید:

آموزش فتوشاپ حرفه ای طراحی ظاهر نرم افزار موبایل

گام 6: تمام عناصر این قسمت را در پوشه ای به نام Top Barقرار داده ایم این پوشه را به کمک مثلث کنار آن ببندید حالا یک پوشه جدید ایجاد کنید. میتوانید از دستور Layer > New > Groupبرای اینکار استفاده کنید. نام این پوشه را  Read 1بگذارید.

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


/Uploads/Public/articles/photoshop/photoshop-third/photo-effects/mobile-app-8.jpg" / >

گام 7:  یک تصویر را به این بکگراند اضافه کنید

با توجه به موضوع نرم افزار عکس مناسبی را برای نرم افزار خود یافته و آن را در بالای ناحیه انتخابی که ایجاد کرده اید قرار دهید. این تصویر را با لایه زیرین آن که مستطیل مربوط به همین ناحیه است کلیپ ماسک کنید میتوانید به کمک کلید Alt و نگه داشتن موس بین دولایه اینکار را انجام دهید. در آموزش فتوشاپ مقدماتی-کار با منوها-پنل ها - ابزار ها- کلیپ ماسک نحوه کار با کلیپ ماسک را میتوانید مطالعه نمائید.

آموزش فتوشاپ حرفه ای طراحی ظاهر نرم افزار موبایل

گام 8: افزودن گرادیانت

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

آموزش فتوشاپ حرفه ای طراحی ظاهر نرم افزار موبایل

یک لایه جدید ایجاد کنید برای اینکار علاوه بر کلیک بر روی آیکون ایجاد لایه جدید میتوانید دستور Layer > New > Layerرا نیز اجرا کنید نام این لایه را Shadowبگذارید. این لایه را هم با لایه بکگراند اصلی کلیپ ماسک کنید. با کمک کلید Shiftاز پاییین به بالا دراگ کنید و Opacity لایه را تا 60% کاهش دهید.

آموزش فتوشاپ حرفه ای طراحی ظاهر نرم افزار موبایل

گام 9: یک متن برای نمونه مقاله در این قسمت تایپ کنید

حالا میتوانیم عنوان این قسمت را و یا یک پاراگراف متن را به این قسمت اضافه کنیم ابزار تایپ را برداشته و شروع به تایپ کنید ما از فونت Playfair Displayدر حالت ضخیم و در اندازه 46px استفاده کرده ایم شما میتوانید با هر فونتی این کار را انجام دهید،

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

آموزش فتوشاپ حرفه ای طراحی ظاهر نرم افزار موبایل

 بای یک فونت کوچکتر تعداد دفعات خوانده شدن متن را تایپ کنید ما از فونت Sans Proدر حالت ایتالیک و در اندازه 28 پیکسل استفاده کرده ایم شما میتوانید از هر فونت دیگری استفاده نمایید. این عبارت را به خط افقی پایانی بچسبانید.

آموزش فتوشاپ حرفه ای طراحی ظاهر نرم افزار موبایل

گام 10: پوشه Read 1را کپی کنید

ابتدا پوشه Read 1را بسته و سپس روی آن کلیک کرده و دوبار کلید CMD/CTRL+J را بزنید . مکان لایه های موجود در پوشه ها را در زیر یک دیگر قرار دهید. تا ظاهر نرم افزار را کامل کنند. نام این پوشه ها را Read 2و Read 3بگذارید. حالا به این پوشه ها عکس های جدید مطالب جدید و تعداد دفعات خوانده شدن جدید اضافه کنید.

آموزش فتوشاپ حرفه ای طراحی ظاهر نرم افزار موبایل

گام 11: ایجاد نوار منو در پایین صفحه

نوار منو کمک می کند که کاربران بسادگی در یک اپلیکیشن جابجا شوند و از قسمت های مختلف آن دیدن کنند. برای ایجاد این نوار ابتدا یک پوشه به نام Navigation Barایجاد کنید. پوشه Top Barرا باز کنید و سپس لایه ای که در آن شکل مستطیلی قرار دارد را یافته  و با کلیدهای CMD/CTRL+Jآنرا کپی و کپی را به پوشه جدید ببرید. حالا کلید های CMD/CTRL+Tرا بزنید. و مستطیل را با آخرین مستطیل مقالات و همینطور پایین صفحه هماهنگ کنید. اندازه مستطیل من 750x101pxاست.

آموزش فتوشاپ حرفه ای طراحی ظاهر نرم افزار موبایل

گام 12: ایکون های نوار منو را ایجاد کنید

ایکون های که ما استفاده کردیم بصورت رایگان موجود نیست ولی با ایکون های رایگان فتوشاپ هم میتوان این ایکون ها را ایجاد کرد. ابتدا ایکون ستاره را ایجاد ویا دانلود کنید این ایکون را در یک لایه جدید قرار دهید و استایل لایه Color Overlayرا به آن اعمال کنید و رنگ آن را سفید انتخاب کنید و حالا با ابزار CMD/CTRL+Tاندازه آن را به 54x52pxتغییر دهید.

آموزش فتوشاپ حرفه ای طراحی ظاهر نرم افزار موبایل

آموزش فتوشاپ حرفه ای طراحی ظاهر نرم افزار موبایل

گام 13: نام منوها را در زیر آن تایپ کنید

بعد از ایجاد ایکون ستاره عنوان Favoritesرا با یک فونت کوچک زیر آن تایپ کنید ما از فونت Sans Proو اندازه 24px استفاده کرده ایم فاصله متن تایپ شده از بالا و پایین را منظم کنید:

آموزش فتوشاپ حرفه ای طراحی ظاهر نرم افزار موبایل

گام 14 : ایکون های profileو discoverرا ایجاد کنید

از همان روش بالا اینبار دو ایکون دیگر برای مشاهده جزئیات کاربر نرم افزار و برای جستجو اضافه کرده و به این دو ایکون هم استایل لایه و هم متن اضافه کنید. شما میتوانید با کمک اشکال فتوشاپ ایکون های دیگری را جایگزین کنید:

آموزش فتوشاپ حرفه ای طراحی ظاهر نرم افزار موبایل

گام 15: طراحی هاور موس روی ایکون ها

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

آموزش فتوشاپ حرفه ای طراحی ظاهر نرم افزار موبایل

تصویر نهایی ما به این صورت در آمده است :

آموزش فتوشاپ حرفه ای طراحی ظاهر نرم افزار موبایل

آموزش فتوشاپ حرفه ای طراحی ظاهر نرم افزار موبایل

برای مشاهده آموزش های بیشتر به صفحه آموزش فتوشاپ مراجعه نمائید . 

 

 

 

 

 

 

نويسندگان BALAHANG
نظرات كاربران :
نام :
ايميل :
متن نظر : * 
 
متن بالا را وارد نماييد* 
 
جدیدترین مقالات
آموزش فتوشاپ ایجاد براش رعدوبرق
آموزش فتوشاپ ایجاد براش رعدوبرق
آموزش فتوشاپ  تایپوگرافی سایه دراز
آموزش فتوشاپ تایپوگرافی سایه دراز
آموزش فتوشاپ تغییر رنگ رژلب
آموزش فتوشاپ تغییر رنگ رژلب
آموزش فتوشاپ شارپ کردن چشم ها همه تکنیک ها
آموزش فتوشاپ شارپ کردن چشم ها همه تکنیک ها
آموزش فتوشاپ پوست روشن طبیعی
آموزش فتوشاپ پوست روشن طبیعی
آموزش فتوشاپ روتوش صورت
آموزش فتوشاپ روتوش صورت
آموزش فتوشاپ تمام تکنیک های کنتراست تصویر
آموزش فتوشاپ تمام تکنیک های کنتراست تصویر
آموزش فتوشاپ پیر کردن چهره
آموزش فتوشاپ پیر کردن چهره
آموزش فتوشاپ ایجاد استایل موزیسین
آموزش فتوشاپ ایجاد استایل موزیسین
آموزش فتوشاپ ایجاد یک پرتره فضایی
آموزش فتوشاپ ایجاد یک پرتره فضایی
آموزش فتوشاپ تبدیل پرتره به سفیدبرفی
آموزش فتوشاپ تبدیل پرتره به سفیدبرفی
آموزش فتوشاپ ترکیب تصویر دو درخت
آموزش فتوشاپ ترکیب تصویر دو درخت
آموزش فتوشاپ طراحی کارت ویزیت
آموزش فتوشاپ طراحی کارت ویزیت
آموزش فتوشاپ حرفه ای طراحی ظاهر نرم افزار موبایل
آموزش فتوشاپ حرفه ای طراحی ظاهر نرم افزار موبایل
آموزش فتوشاپ حرفه ای آرایش با فتوشاپ
آموزش فتوشاپ حرفه ای آرایش با فتوشاپ
آموزش فتوشاپ حرفه ای تصویر دوربین مادون قرمز واقعی
آموزش فتوشاپ حرفه ای تصویر دوربین مادون قرمز واقعی
آموزش فتوشاپ حرفه ای ترکیب رویایی چهار تصویر
آموزش فتوشاپ حرفه ای ترکیب رویایی چهار تصویر
آموزش فتوشاپ حرفه ای تایپوگرافی پوستر فیلم مکس دیوانه
آموزش فتوشاپ حرفه ای تایپوگرافی پوستر فیلم مکس دیوانه
ادغام دو تصویر با هم از یک چهره در فتوشاپ
ادغام دو تصویر با هم از یک چهره در فتوشاپ
آموزش فتوشاپ حرفه ای در کار با رنگ ها استاد شوید
آموزش فتوشاپ حرفه ای در کار با رنگ ها استاد شوید
آموزش فتوشاپ مقدماتی تقلب در ایجاد ماسک لایه
آموزش فتوشاپ مقدماتی تقلب در ایجاد ماسک لایه
آموزش فتوشاپ شارپ کردن تصویر با فیلتر highpass
آموزش فتوشاپ شارپ کردن تصویر با فیلتر highpass
آموزش فتوشاپ حرفه ای 6 نکته ای که هر عکاسی درباره فتوشاپ باید بداند
آموزش فتوشاپ حرفه ای 6 نکته ای که هر عکاسی درباره فتوشاپ باید بداند
آموزش فتوشاپ حرفه ای روتوش و رنگی کردن پوست
آموزش فتوشاپ حرفه ای روتوش و رنگی کردن پوست
ذخیره و سویچ کردن میان محیط های کاری در فتوشاپ CS6
ذخیره و سویچ کردن میان محیط های کاری در فتوشاپ CS6
آموزش فتوشاپ حرفه ای ایجاد یک پرتره از متن
آموزش فتوشاپ حرفه ای ایجاد یک پرتره از متن
آموزش فتوشاپ حرفه ای افزودن انعکاس به عینک های آفتابی
آموزش فتوشاپ حرفه ای افزودن انعکاس به عینک های آفتابی
آموزش فتوشاپ حرفه ای تبدیل عکس به کلاژی از مربع ها
آموزش فتوشاپ حرفه ای تبدیل عکس به کلاژی از مربع ها
آموزش فتوشاپ حرفه ای افزودن قطرات آب واقعی به تصویر
آموزش فتوشاپ حرفه ای افزودن قطرات آب واقعی به تصویر
آموزش فتوشاپ حرفه ای افزودن ذرات درخشان
آموزش فتوشاپ حرفه ای افزودن ذرات درخشان
پربازدیدترین مقالات
آموزش فتوشاپ پوست روشن طبیعی
آموزش فتوشاپ پوست روشن طبیعی
آموزش فتوشاپ روتوش صورت
آموزش فتوشاپ روتوش صورت
آموزش فتوشاپ شارپ کردن چشم ها همه تکنیک ها
آموزش فتوشاپ شارپ کردن چشم ها همه تکنیک ها
آموزش فتوشاپ تغییر رنگ رژلب
آموزش فتوشاپ تغییر رنگ رژلب
آموزش فتوشاپ  تایپوگرافی سایه دراز
آموزش فتوشاپ تایپوگرافی سایه دراز
آموزش فتوشاپ ایجاد براش رعدوبرق
آموزش فتوشاپ ایجاد براش رعدوبرق