آموزش ایجاد آیکون نوار آدرس وبلاگ(favicon) با فتوشاپ


عضو شوید


نام کاربری
رمز عبور

:: فراموشی رمز عبور؟

عضویت سریع

نام کاربری
رمز عبور
تکرار رمز
ایمیل
کد تصویری
براي اطلاع از آپيدت شدن وبلاگ در خبرنامه وبلاگ عضو شويد تا جديدترين مطالب به ايميل شما ارسال شود



تاریخ : پنج شنبه 16 آبان 1392
بازدید : 5862
نویسنده : وب سایت پی سی اید

 

آموزش ایجاد آیکئن نوار آدرس وبلاگ(favicon) 

مطمئناً در بسیاری از وب سایتها یا وبلاگ های مختلف، آیکون های کوچکی را در نوار آدرس آن‌ها دیده‌اید. به آیکونی که در نوار آدرس سایت ها قرار می‌گیرد، اصطلاحاً Favicon گفته می‌شود.

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

 

ایجاد آیکون دلخواه توسط فتوشاپ:

برای ایجاد طرح آیکون خود، می‌توانید از نرم‌افزارهای مختلفی که برای این کار ساخته شده‌اند استفاده کنید.

اما اگر دوست دارید از امکانات فتوشاپ برای ساخت آیکون کمک بگیرید، می‌توانید به روش زیر عمل نمایید:

با فشرده کلید Ctrl + N و یا انتخاب New از منوی File، یک سند جدید ایجاد کنید. چون ما آیکون را با اندازه 16 در 16 لازم داریم، مطمئناً واردکردن چنین اندازه‌ای در سند ایجاد شده و کار کردن روی آن، چندان جالب نیست. پس بهتر است اندازه آن را مثلاً 600 در 600 قرار دهید تا بتوانید با خیال راحت آیکون را طراحی کنید و در پایان آن را به اندازه 16 در 16 تغییر دهید.

اکنون طرح دلخواه خود را ایجاد کنید. برای اینکار می‌توانید از براش، ابزار Pen، تایپ متن و ... استفاده کنید. همچنین می‌توانید از ابزار Shape  هم کمک بگیرید. این ابزار دارای اشکال و طرح‌های آماده‌ای می‌باشد که می‌تواند در این مورد به شما کمک کند. اگر طرح‌های آماده این ابزار مورد توجه شما قرار نگرفت، می‌توانید Shape هایی را با طرح‌های دلخواه از اینترنت و یا CD ابزارهای فتوشاپ تهیه نمایید.

برای مثال ما یک آیکون را با استفاده از ابزار Shape رسم کرده‌ایم و با استفاده از لایر استیل (Layer style) به آن افکت می‌دهیم.

 

در تصویر زیر نتیجه کار پس از اعمال استیل روی آن را می‌بینید.

 

تغییر اندازه آیکون:

پس از رسم کردن و تکمیل آیکون مورد نظر، باید آن را به اندازه مورد نظر در آوریم. برای این کار به منوی Image رفته و Image size را انتخاب نمایید. اکنون در کادر Width و Height مقدار 16 پیکسل را وارد کرده و رزولیشن آن را هم روی 300 قرار دهید و در نهایت آن را Ok نمایید.

 

ذخیره آیکون:

اکنون باید از آیکون خود خروجی بگیرید. قبل از هر چیز باید ذکر کنم که تنها می‌توانید از فرمت های PNG،GIF و Ico برای قرار دادن آیکون در نوار آدرس سایتتان استفاده کنید.

پس برای این کار در منوی File گزینه Save as را انتخاب کنید. در کادر مربوط به انتخاب فرمت، می‌توانید از بین گزینه PNG و GIF یکی را انتخاب کنید. اما با توجه به اینکه فتوشاپ قالب Ico را برای خروجی ندارد، می‌توانید با نصب پلاگین افزودن فرمت آیکون، این فرمت را به فتوشاپ اضافه کنید.

اگر به پلاگین مورد نظر دسترسی نداشتید، می‌توانید با کمک نرم‌افزارهای تبدیل تصویر، آیکون خود را به فرمت Ico تغییر دهید.

نکته: بهترین فرمت برای این کار ico می‌باشد. همچنین می توانید آیکون انیمیشن (متحرک) را با فرمت Gif تهیه و برای این کار از آن استفاده کنید.

 

آپلود آیکون و دریافت لینک آن:

اگر فضای میزبان اختصاصی ندارید، می‌توانید از سایت های مربوط به آپلود عکس استفاده کنید. اگر آیکون خود را به فرمت Ico تبدیل کرده‌اید، باید دقت کنید که سایت های آپلود، این فرمت را پشتیبانی کنند.

 در زیر آدرس سایت های ایرانی رایگانی که امکان آپلود رایگان تصویر را به شما می‌دهند ملاحظه می‌نمایید.

http://www.upcity.ir

http://8pic.ir/

http://uplod.ir

http://www.imgup.com/

اما بنده پیشنهاد می‌کنم که حتما به سایت های خارجی زیر سر بزنید چرا که علاوه بر امکان آپلود آیکون، منبع وسیعی از آیکون‌ها را در اختیارتان قرار می‌دهند :

http://findicons.com

http://www.iconj.com/

به عنوان مثال ما آیکون خود را به فرمت Ico تبدیل کرده‌ایم و آن را در وب سایت http://www.iconj.com/ آپلود می‌کنیم. پس از اینکه آیکون ما آپلود شد، لینک آدرس آن را به ما می‌دهد که باید آن را کپی کنیم و در قالب وبلاگ خود قرار دهیم که این کار در ادامه توضیح داده می‌شود.

از مزایای این سایت این است که «لینک قرار دادن آیکون در نوار آدرس سایت» را به طور مستقیم به شما می‌دهد. پس شما دیگر نیازی به برنامه‌نویسی ندارید و تنها با کپی لینکی که در کادر دوم  قرار گرفته است و قرار دادن آن در قالب سایت، برای سایتتان آیکون قرار می‌دهید. در پایین نمونه لینکی که این وب سایت به ما داده است را مشاهده می‌کنید:

 


نکته: قسمت آبی رنگ لینک فوق، آدرس آیکون است. پس در صورتی که شما آیکون خود را در سایت های دیگری آپلود کرده‌اید، لینک آن را در این قسمت قرار دهید.

قرار دادن لینک آیکون در قالب وبلاگ یا وب سایت:

برای قرار دادن لینک در وب سایت یا وبلاگ، به قسمت مدیریت وبلاگتان بروید و گزینه «ویرایش قالب» را انتخاب کنید. سپس لینک ذکرشده را بعد از تگ قرار دهید و قالب را Ok کنید. OK کردن به معنی ثبت تغییرات قالب است که در وبلاگ های مختلف با عناوین مختلفی ذکر شده است. به تصویر زیر دقت نمایید...


اکنون اگر به نوار آدرس ما نگاهی بیاندازید، همین آیکون را خواهید دید...

 

پایان


 

نویسنده: ناصری

منبع: http://pcaid.lxb.ir

ایمیل:Pcaid2013@gmail.com


 

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




:: موضوعات مرتبط: آموزش اینترنت , ترفند و آموزش مرورگرها , آموزش فتوشاپ , آموزش نرم افزار فتوشاپ , تمرین های فتوشاپ , ,
:: برچسب‌ها: آموزش ایجاد favicon , روش ایجاد Favicon در فتوشاپ , روش ایجاد آیکون برای نوار وبلاگ , ایجاد آیکون با فتوشاپ , ایجاد آیکون نوار آدرس سایت , قرار , آیکون وبلاگ , آموزش طراحی آیکون در فتوشاپ , منبع آیکون برای سایت و وبلاگ , آپلود آیکون , آموزش فتوشاپ , آموزش طراحی آیکون وبلاگ در فتوشاپ , نحوه قرار دادن لینک آیکون در وبلاگ , آموزش فتوشاپ Cs6 , آموزش فتوشاپ CC , آموزش قرار دادن آیکون در قالب وبلاگ , ویرایش قالب وبلاگ , ,
می توانید دیدگاه خود را بنویسید


نام
آدرس ایمیل
وب سایت/بلاگ
:) :( ;) :D
;)) :X :? :P
:* =(( :O };-
:B /:) =DD :S
-) :-(( :-| :-))
نظر خصوصی

 کد را وارد نمایید:

آپلود عکس دلخواه:


همراه با وب سایت آموزشی پی سی اید، حرفه ای شوید...!

نظر شما در مورد وب سایت pcaid چیست؟ (نظر سنجی جدید)

تبادل لینک هوشمند
برای تبادل لینک  ابتدا ما را با عنوان آموزش حرفه ای رایانه و آدرس pcaid.LXB.ir لینک نمایید سپس مشخصات لینک خود را در زیر بنویسید. در صورت وجود لینک ما در سایت شما لینکتان به طور خودکار در سایت ما قرار میگیرد.






آمار وب سایت:  

بازدید امروز : 28
بازدید دیروز : 282
بازدید هفته : 310
بازدید ماه : 4390
بازدید کل : 556153
تعداد مطالب : 372
تعداد نظرات : 251
تعداد آنلاین : 1

RSS

Powered By
loxblog.Com