شنبه 8 تير 1387, 3:22 قبلازظهر
یه مدت بحث آیکون ها و معرفی آیکون ها در انجمن ها بسیار داغ بود ، به همین خاطر یه معرفی کامل از آیکون های دایره ای پیدا کردم ، گفتم شاید جالب باشه که آیکون ها دقیقا همون چیزی باشن که می خواهیم و کاملا جدید و منحصر به خودمون باشن . پس اون آموزش رو اینجا گذاشتم ...
ساخت آیکون های کروی برای وب سایت:
1 : یک فایل جدید به اندازه ی 250x250 px درست کرده و پشت صحنه ی آن (background ) را با کد رنگی #828282 رنگ کنید.
2: ابزار بیضی را انتخاب کرده و یک دایره رسم کنید. پس از آن یک لایه ی جدید خالی ایجاد کرده و Gradient را انتخاب کنید . سپس پست صحنه رنگ با کد #571f00 را انتخاب و برای پس زمینه رنگ با کد #ff5a00 انتخاب کنید.
حالا یک gradient از بالا به پایین آن لایه رسم کنید.
3 : حالت انتخاب باید تاکنون فعال باشد .
دوباره یک لایه ی جدید درست کرده و آن را مشکی کنید . که برای انجام دادن سریع این کار ابتدا کلید D را فشار داده و سپس کلیدهای Ctrl+, را فشار دهید.
حالا مراحل زیر را طی کنید .
/ را انتخای و 1 پیکسل آن را در هم کنید . (-Select / Shrink: 1px)
/ را نتخاب و 100پیکسل باز کنید. (-Select / Feather: 100px)
سپس کلید Delete را دو بار فشار دهید تا قسمت انتخاب شده پاک شود.
4 : لایه ای که در آن gradient بود را فعال کنید(انتخاب کنید).
حالا به منوی Filter > Light& Shadow رفته و در Drop Shadow ، مقادیر زیر را قرار دهید.
X/Y : 0/0 و transparency : 60%
5 : لایه ی حاوی gradient را انتخاب و از منوی لایه ها (Layers) Alpha to Selection را انتخاب کنید.
یک لایه ی دیگر اضافه و رنگ سفید را برای پس زمینه آن انتخاب کنید. Gradient را انتخاب کرده و و در منوی gradient چهارمین option در بالا و پایین منو (FG to Trasparent)برای gradient انتخاب کنید. حالا این gradient را از بالا تا پایین فعال کنید.
6: Select / None
ابزار Scale را انتخاب کنید.
روی لایه کلیک کنید وقتی که منوی آن ظاهر شد در آن برای پهنا (width) 175 و برای ارتفاع (height) جدید 150 px وارد کنید و روی ok کلیک کنید.
7 : حالا ابزار Move را انتخاب کرده قسمت درخشنده ی سفید رنگ را که به صورت gradient می باشد را به قسمت مرکز و بالای دایره ی مرکزی بکشید.
8 : به منوی Filter > Blur > Gaussian Blure رفته و مقدار آن را 5 قرار دهید .
9 : تقریبا کار انجام شده است . حالا شما می توانید یک حرف یا علامت که می خواهید بر روی آن قرار دهید .
برای این کار من ابزار متن را انتخاب و بر روی آن قرار دادم و یک علامت سؤال روی آن قرار دادم .
و این هم یک تصویر از لایه ها:
10 : و اما این هم شکل پایانی:
خوب حالا می توانید طرح و رنگ مورد نظر خود را جایگزین نمایید ، تا آیکون ها به شکل های دلخواهتان باشد و منحصر به شما باشند.
منبع : [ جهت مشاهده لينك عضو شويد ! ]
ساخت آیکون های کروی برای وب سایت:
1 : یک فایل جدید به اندازه ی 250x250 px درست کرده و پشت صحنه ی آن (background ) را با کد رنگی #828282 رنگ کنید.
2: ابزار بیضی را انتخاب کرده و یک دایره رسم کنید. پس از آن یک لایه ی جدید خالی ایجاد کرده و Gradient را انتخاب کنید . سپس پست صحنه رنگ با کد #571f00 را انتخاب و برای پس زمینه رنگ با کد #ff5a00 انتخاب کنید.
حالا یک gradient از بالا به پایین آن لایه رسم کنید.
3 : حالت انتخاب باید تاکنون فعال باشد .
دوباره یک لایه ی جدید درست کرده و آن را مشکی کنید . که برای انجام دادن سریع این کار ابتدا کلید D را فشار داده و سپس کلیدهای Ctrl+, را فشار دهید.
حالا مراحل زیر را طی کنید .
/ را انتخای و 1 پیکسل آن را در هم کنید . (-Select / Shrink: 1px)
/ را نتخاب و 100پیکسل باز کنید. (-Select / Feather: 100px)
سپس کلید Delete را دو بار فشار دهید تا قسمت انتخاب شده پاک شود.
4 : لایه ای که در آن gradient بود را فعال کنید(انتخاب کنید).
حالا به منوی Filter > Light& Shadow رفته و در Drop Shadow ، مقادیر زیر را قرار دهید.
X/Y : 0/0 و transparency : 60%
5 : لایه ی حاوی gradient را انتخاب و از منوی لایه ها (Layers) Alpha to Selection را انتخاب کنید.
یک لایه ی دیگر اضافه و رنگ سفید را برای پس زمینه آن انتخاب کنید. Gradient را انتخاب کرده و و در منوی gradient چهارمین option در بالا و پایین منو (FG to Trasparent)برای gradient انتخاب کنید. حالا این gradient را از بالا تا پایین فعال کنید.
6: Select / None
ابزار Scale را انتخاب کنید.
روی لایه کلیک کنید وقتی که منوی آن ظاهر شد در آن برای پهنا (width) 175 و برای ارتفاع (height) جدید 150 px وارد کنید و روی ok کلیک کنید.
7 : حالا ابزار Move را انتخاب کرده قسمت درخشنده ی سفید رنگ را که به صورت gradient می باشد را به قسمت مرکز و بالای دایره ی مرکزی بکشید.
8 : به منوی Filter > Blur > Gaussian Blure رفته و مقدار آن را 5 قرار دهید .
9 : تقریبا کار انجام شده است . حالا شما می توانید یک حرف یا علامت که می خواهید بر روی آن قرار دهید .
برای این کار من ابزار متن را انتخاب و بر روی آن قرار دادم و یک علامت سؤال روی آن قرار دادم .
و این هم یک تصویر از لایه ها:
10 : و اما این هم شکل پایانی:
خوب حالا می توانید طرح و رنگ مورد نظر خود را جایگزین نمایید ، تا آیکون ها به شکل های دلخواهتان باشد و منحصر به شما باشند.
منبع : [ جهت مشاهده لينك عضو شويد ! ]