آموزش فتوشاپ - طراحی یک آیکون پوشه دانلود در فتوشاپ

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

Resolution: 72dpi Color Mode RGB color ابعاد سند: 600×600 پیکسل
با استفاده از ابزار Pen شکلی شبیه آنچه در تصویر زیر مشاهده می کنید رسم نمایید.

مرحله2- طراحی اشکال با استفاده از ابزار Pen
قسمت پشت فلدر را با استفاده از ابزار Pen رسم کنید. سپس نوارهایی شبیه آنچه در تصویر مشاهده می کنید رسم کنید.

مرحله3- تکمیل شکل
پس از اینکه کشیدن شکل فلدر به پایان رسید، مطابق شکل یک کاغذ اضافه کنید. حالا باید 5 لایه ای که در تصویر مشاهده می کنید را داشته باشید. هر شکل درون لایه خود قرار دارد. مطمئن شوید همه لایه ها نام گذاری شده است.

مرحله4- اضافه کردن افکت های رنگ
layer styleهای زیر را روی قسمت های جلوی فلدر اضافه کنید. مقدار opacity را به 90 درصد کاهش دهید.

ترجمه تصویر (این افکت را از طریق تنظیمات Layer blending اضافه کنید (روی لایه کلیک راست کرده و گزینهBlending Option را انتخاب کنید.)

layer styleهای زیر را روی لایه Paper (کاغذ) اعمال کنید. مقدار opacity این لایه را بین 90 تا 95 درصد تنظیم کنید.
ترجمه تصویر(این افکت را از طریق تنظیمات Layer blending اضافه کنید (روی لایه کلیک راست کرده و گزینه Blending Option را انتخاب کنید)

layer styleهای زیر را به لایه Stripe اعمال کنید.
ترجمه تصویر(این افکت را از طریق تنظیمات Layer blending اضافه کنید (روی لایه کلیک راست کرده و گزینه Blending Option)

layer style های زیر را قسمت پشت فلدر اعمال کنید.
ترجمه تصویر(این افکت را از طریق تنظیمات Layer blending اضافه کنید (روی لایه کلیک راست کرده و گزینه Blending Option  را انتخاب کنید)

layer style های زیر را روی پیکان اعمال کنید.

حالا باید به نتیجه ای شبیه تصویر زیر دست پیدا کنید.

مرحله5- اضافه کردن بازتاب
یک فلدر (group) جدید با نام "refs" اضافه کنید. مطابق شکل با ابزار pen بازتاب را نقاشی کنید. مطمئن شوید ابزار pen در حالت paths قرار دارد (به پیکان سیاه رنگ توجه کنید). پس از بستن مسیر، روی صفحه کلیک راست کرده و گزینه "make selection"را انتخاب کنید (feather 0). یک براش بزرگ برداشته (master diameter حدود 470 و hardness 0) سپس براش را روی قسمت سمت راست انتخاب، مثل کاری که برای ایجاد بازتاب سفید انجام دادم، اعمال کنید. blending mode را به Overlay و opacity را به 63 درصد تغییر دهید.

مرحله6- حاشیه ها (Margin)
یک فلدر جدید به نام "margins" بسازید و یک لایه جدید درون آن اضافه کنید. اضافه کردن سایه روشن روی حاشیه ها باعث می شود افکت سه بعدی آیکون بیشتر و بهتر آشکار شود. از ابزار pen برای ایجاد خطوط استروک در اطراف گوشه ها و همه حاشیه های پوشه، کاغذ و پیکان استفاده کنید. سپس روی صفحه کلیک راست کرده و گزینه stroke path - brush را انتخاب کنید. تنظیمات براش باید این گونه باشد: master diameter: 8px hardness: 0

ترجمه تصویر(با استفاده از ابزار Pen خطوط را رسم کنید کلیک راست> stroke path
با یک براش بزرگ قسمت های مشخص شده را پاک کنید )

Blending mode را در حالت Overly قرار داده و مقدار Opacity را به 55 درصد کاهش دهید
از تکنیک ایجاد حاشیه (Margin) برای پیکان و کاغذ استفاده کنید

مرحله7- سایه ها
یک لایه جدید برای سایه ها اضافه کنید (Ctrl + Shift + N) و آن را درون یک فلدر یا (group (Ctrl + G جدید قرار دهید. مطابق مرحله 5 یک انتخاب ایجاد کنید. انتخاب ها را با رنگ سیاه رنگ آمیزی کنید، سپس با استفاده از ابزار blur حاشیه ها را مات کنید. اگر شدت سایه ها زیاد به نظر می رسد، یعنی باید مقدار opacity لایه را به 40 درصد کاهش دهید.

ترجمه تصویر(اضافه کردن سایه)


مرحله8- اضافه کردن متن
با فونت مورد نظر خود متن را اضافه کنید. در اینجا من از فونت "Agency FB" با سایز 40 استفاده کرده ام، مقدار Opacity آن را نیز روی 75 درصد قرار دادم.

برای تغییر دادن محل قرارگیری متن از ابزار (Free Transform (Ctrl+T استفاده کنید


مرحله9- اضافه کردن بازتاب ها و سایه های نهایی
با استفاده از تکنیک های مرحله 5 بازتاب های بیشتری به کاغذ اضافه می کنیم.

با استفاده از ابزار (ellipse tool (E یک سایه اضافه کنید. مطابق شکل یک بیضی رسم کرده و یک افکت motion blur ملایم به آن اضافه کنید. مقدار opacity آن را کاهش دهید تا به نتیجه مطلوب دست پیدا کنید.
ترجمه تصویر(برای تغییر دادن سایز از ابزار (Free Transform (Ctrl+T استفاده کنید مقدار opacity لایه را به 75 درصد کاهش دهید)

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