Notice: Trying to get property of non-object in /home/asalearn/domains/learning.asarayan.com/public_html/plugins/system/jak2tocomcontentmigration/jak2tocomcontentmigration.php on line 86
آموزش طراحی آیکن شخصی برای وب سایت

بنر بالای مطالب

banner

آموزش طراحی آیکن شخصی برای وب سایت

در صورت مفید بودن این مقاله حتما نظر خودتان را در پایین مطلب برای ما ارسال کنید

10 آموزش طراحی آیکن شخصی برای وب سایت

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

10 آموزش طراحی آیکن شخصی برای وب سایت

1. یک صفحه به ابعاد 800×600 ایجاد کنید . 
1.1. رنگ پس زمینه را با درصد رنگی 2e1f13 از سفید به قهوه ای تغییر بدهید . 
1.2. بافت چوب را از این قسمت دانلود کرده و وارد طرح اصلی کنید . بافت را باید از طریق کادر جستجو Search کنید . 
1.3. بعد از دانلود بافت باید دو کپی از آن بگیرید (Ctrl+J) و همانند تصویر زیر مد لایه همراه با Fill را تغییر بدهید . 

1 آموزش طراحی آیکن شخصی برای وب سایت

 

2. ابزار elliptical marquee tool را انتخاب کرده و یک دایره همانند تصویر زیر با درصد رنگی F05528 بکشید . ابعاد دایره را برابر با 100×100 قرار بدهید . 

2 آموزش طراحی آیکن شخصی برای وب سایت

 

3. در این مرحله میخواهم قسمت پایین کادر دایره کشیده شده برش بدهم . ابزار polygonal lasso tool را انتخاب کرده و قسمت پایین سمت راست را همانند تصویر زیر انتخاب کنید . 
3.1. برای جدا کردن قسمت پایین بریده شده بر روی آن کلیک راست کرده و گزینه layer via cut را انتخاب کنید . 
3.2. در این مرحله کادر جدا شده باید به طرف بالا بچرخد.  برای انجام اینکار مسیر edit > transform > rotate 180 را دنبال کنید . 

3 آموزش طراحی آیکن شخصی برای وب سایت

 

4. رنگ قسمت جدا شده را برابر با سفید قرار بدهید . 
4.1. بر روی لایه کادر سفید دوبار کلیک کرده تا تنظیمات Layer Styles نمایش داده شود .
4.2. دقت داشته باشید که تصویر اول مربوط به تنظیمات قسمت سفید می باشد که باید تغییر بدهید . تصویر دوم هم مربوط به تنظیمات دایره اصلی .

4 آموزش طراحی آیکن شخصی برای وب سایت

5 آموزش طراحی آیکن شخصی برای وب سایت

6 آموزش طراحی آیکن شخصی برای وب سایت

 

5. در مرحله بعدی ابزار تایپ یا همان horizontal type tool را انتخاب کنید . 
5.1. فونت بکار برده شده در طرح اصلی را از این قسمت دانلود کنید و با رنگ سفید یک یا دو کلمه به دلخواه تایپ کنید . 
5.2. در مرحله یکی به آخر کافیست متن را با ابزار Free Transform  کمی بچرخانید و روی آیکون قرار بدهید . 

7 آموزش طراحی آیکن شخصی برای وب سایت

8 آموزش طراحی آیکن شخصی برای وب سایت

 

6. بر روی لایه متن تایپ شده دابل کلیک کرده و تنظیمات پیش فرض را با توجه به تصویر زیر تغییر بدهید . 

9 آموزش طراحی آیکن شخصی برای وب سایت

10 آموزش طراحی آیکن شخصی برای وب سایت

 

اگر میخواهید دو دایره دیگر هم همانند طرح اصلی ایجاد کنید باید از درصد رنگی fb9d39 برای دایره نارنجی سمت چپ و درصد رنگی 37bbe1 و ابزار براش برای دایره آبی استفاده نمایید .  

(منبع اصلی آموزش photoshopstar)

آخرین ویرایش درچهارشنبه, 18 شهریور 1394 10:39

آخرین مطالب آموزشی

«
  • 1
  • 2
  • 3
»

گالری پست

تک وب دیزاین-قالب فارسی جوملا