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

چگونه با فوتوشاپ یک آیکن iCloud اپل را طراحی کنیم
  • 1390/8/15
  • مهرداد ارجمندی
  • 7

 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 بود . اگر در این زمینه سئوالی داشتید می توانید در قسمت نظرات آنها را مطرح کنید .

 

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

دیدگاه خود را وارد کنید
تعداد دیدگاه ها : 7 دیدگاه
  1. سلام
    وقتی این عکس رو دیدم یاد ارائه ی خودم افتادم
    و خواستم از شما بپرسم که شما اطلاعاتی در مورد رایانش ابری
    دارید؟؟
    من خیلی سرچ کردم ولی در مورد تجهیزاتش چیزی پیدا نکردم..
    آخر هم متوجه نشدم که امنیتش خوب هست یا نه!
    ممنون میشم اگه مطلبی داشته باشید و واسم ایمیل کنید.

    1. با سلام
      اگر توي گوگل فضاي ابري رو جستجو كنيد نتايج بهتري بدست مياريد

      اما امنيت رو خود فضا دهندگان برقرار ميكنند

  2. من درهنرستان دبیر فتوشاپ هستم ولی بعلت مشغله فروان بیشتر از حد کتاب مطالعه ندارم ،ازآموزش این ترفند جالب ممنون .
    در کتاب هنرستان ها تمامی این ایتم ها توضیح داده شده ولی بدون مثال ،وبرای دانش آموزان جذابیت نداردآیا شما می توانیدکتابی معرفی نمایید ویا نام کتاب خودتان را بگوییدتا تهیه ودر اختبار دانش آموزان قراردهم .با سپاس ظزیف از مشهد

  3. سلام همشهری
    طبق معمول همیشه کارهایتان عالی بود. خیلی ممنونم.
    در زمینه حقوق، تایپ و چاپ کتاب فعالیت جدی دارم. از آشنایی‌تان خوشحال شدم. موفق باشیدم. gholamreza.ghanaat@gmail.com

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