چگونه با فوتوشاپ یک آیکن iCloud اپل را طراحی کنیم

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

 

به نظر کمی پیچیده می آید ولی در واقع ما فقط به تعدادی Layer Styles ، شکل های وکتوریی پایه ای و کمی نقاشی دستی نیاز داریم ، خوب پس بهتره که کار را شروع کنیم !

قدم اول :

کار را با ایجاد یک فایل با اندازه ی 512 x 512 پیکسل شروع می کنیم . Rounded Rectangle Tool را فعال کنید . در نوار آپشن شعاع و radius آن را به 75 پیکسل تنظیم کنید . کلیک کنید و یک مستطیل تمیز را بکشید . رنگ آن را به کد #5d5d5d تنظیم کنید .

 

بر روی لایه دابل کلیک کنید تا باکس  Layer Style dialog باز شود . یک Gradient Overlay با یک گرادیان پیش فرض اضافه کنید گرادیانی از  سیاه تا سفید و شفافیت آن را به 76درصد برسانید .

 

قدم دو

کنترلL+ را فشار بدهید تا لایه را کپی و تکرار کنید ( داپلیکیت ) . بر روی Edit > Free Transform کلیک کنید و یا Ctrl + T را فشار بدهید تا حالت تغییر اندازه را فعال کنید . از نوار آپشن سایز آن را به 98درصد برسانید .

 

در پنل لایه ها ، Layer Style را با کشیدن آیکن fx  به درون آیکن سطل زباله که در پایین سمت راست پنل لایه ها قرار دارد بکشید و آن را حذف کنید . سپس بر روی تامنیل لایه ها کلیک کلیک کنید تا باکس Layer Style dialog را بیاورید . به آن سایه داخلی و Gradient Overlay اضافه کنید .

 

در تنظیمات  Gradient Overlay گرادیان را از حالت Style  به Angle تبدیل کنید . بر روی باکس پیش نمایش گرادیان کلیک کنید تا ویرایش گر گرادیان باز شود و در آنجا از رنگ کد  #8e8e8e ، #a5a4a4 و #d8d8d8 استفاده کنید . راحت باشید و هر رنگ دیگری را که فکر می کنید مناسب این کار است را انتخاب کنید فقط دقت کنید رنگ اول و آخری را که انتخاب می کنید به یک صورت و همرنگ هم باشند .

 

بعد از آنکه  Layer Styles را به آن  اضافه می کنیم به نتیجه زیر می رسیم.

 

قدم 3 :

یک لایه جدید درست کنید آن را با گرادیان شعاعی از سیاه تا سفید پر کنید .

 

کلید ALT  را پایین نگه دارید و ماسک وکتوری را از لایه قبلی به لایه فعلی بکشید . حالا این گرادیان تمام آیکن ما را پر می کند .

 

Layer Style را باز کنید و حالت آن را به Screen تغییر دهید .

 

قدم چهار

یک مستطیل درون آیکن بکشید . شعاع آن را 75 پیکسل و رنگ آن را کد #2a2a2a قرار دهید .

 

دو شکل دایره ای دیگر اضافه کنید ( ابزار Ellipse را انتخاب کنید و سپس کلید شیفت را پایین نگه دارید و بکشید ) از نوار آپشن حالت path را به اضافه کردن به ناحیه شکل تنظیم کنید .

 

برو روی لایه ابر دابل کلیک کنید و سپس به آن سایه داخلی، Bevel و Emboss و همچنین Stroke  اضافه کنید

 

 

 

 

 

قدم پنجم

لایه ابر را با استفاده از کلید های میان بر کنترل+j دابلیکت کنید . با کشیدن آیکن  fx از تامنیل لایه به سطل زباله Layer Style آن را حذف کنید . به کمک کلید های کنترل T+ آن را تغییر اندازه دهید و به 89 درصد سایز اولیه برسانید .

 

رنگ شکل را به کد #5d5d5d تغییر دهید . جای تمام شکل ها را تغییر دهید تا اندازه ابر کوچک متناسب ابر بزرگ شود .

 

بر روی لایه ابر دابل کلیک کنید و Layer Styles زیر را اضافه کنید .

 

 

 

 

برای Gradient Overlay مطمئن شوید که از تنظیمات دقیق از Gradient Overlay که در قدم2 با آن کار کردید استفاده کنید .

 

در اینجا  نتیجه اضافه شدن Layer Styles را به ابر کوچک مشاهده می کنیم .

 

قدم 6 : اضافه کردم بافت فلزی

طرح حاضری که پیش رو داریم خیلی صاف و ساده است . اجازه بدهید یک بافت براق فلزی بر روی سطح آن قرار دهیم . یک لایه جدید درست کنید . بر روی Edit > Fill کلیک کنید و رنگ سیاه را انتخاب کنید تا لایه را با آن رنگ پر کنید .

 

 

بر روی Filter > Noise > Add Noise کلیک کنید  .

 

بر روی Filter > Blur > Radial Blur کلیک کنید . به ترتیب انتخاب کنید : Blur Method: Spin and Quality: Best

 

این فیلتر باعث ایجاد فر و نویز می شود و یک دایره موج دار را ایجاد می کند .

 

قدم 7 :

بر روی Image > Adjustments > Level کلیک کنید و یا با استفاده از کلیدهای میان بر Ctrl + L آن را باز کنید . در جعبه ای که ظاهر می شود  نوار مشکی رنگ را به سمت سطح خارجی مرکز بکشید تا دایره موج دار را روشن تر کنید .

 

کلید ALT را نگه دارید و ماسک برداری را از لایه اصلی آیکن به لایه فعلی ببرید . حالا دایره ی موج دار درون آیکن است .

 

ابزار Path Selection را فعال کنید و مسیر ابر را همان طور که در مرحله 4 انجام دادیم ، انتخاب کنید . کلید های کنترلC+  را فشار دهید تا کار را در کلیپبرد ذخیره کنید . سپس کلید های کنترل V+ را فشار دهید تا آن را بر روی ماسک برداری بچسبانید . حالت path آن را به حالت Subtract تنظیم کنید .

 

در آخر ، ابر کوچکی را که در مرحله 5 ساختیم را کپی و پیست کنید . حالت path آن را به حالت اضافه کردن شکل تنظیم کنید .

 

در اینجا می توانید نتیجه کار را ببینید . دایره ی دوار درون سطح آیکن ابر قرار دارد .

 

حالت ترکیبی لایه را به حالت اسکرین تغییر دهید .

 

 

قدم 8 : سایه

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

 

 

یک سایه نرم با استفاده از فیلتر درست کنید . با استفاده از فیلتر Gaussian Blur . برای این کار بر روی Filter > Blur > Gaussian Blur کلیک کنید .

سایه را با استفاده از کلید های کنترل+j داپلیکیت کنید . یک فیلتر Gaussian Blur دیگر اضافه کنید . این بار از یک شعاع بزرگتر برای کار استفاده کنید تا سایه نرم تری ایجاد شود . اگر هنوز سایه ها مناسب نیستند و کمی شارپ اند می توانید شفافیت لایه را پایین بیاورید .

 

نتیجه نهایی

 در اینجا نتیجه این آموزش و کار را مشاهده می کنید . همانطور که می بینید فرایند تهیه آیکن بسیار ساده و آسان است . به تنها چیزهایی که نیاز داشتیم تعدادی شکل های برداری ساده و Layer Style بود . اگر در این زمینه سئوالی داشتید می توانید در قسمت نظرات آنها را مطرح کنید .

 

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