خیلی از دوستان طی چند ماه گذشته با ما تماس گرفتند و پرسیدند که favicon متحرک سایت رو چطوری درست کردیم ؟ وقتی ما این علاقه مندی رو دیدیم تصمیم گرفتیم که آموزش طراحی favicon متحرک رو در سایت منتشر کنیم.
favicon آیکونی است که پس از باز کردن سایت در مرورکر، در تب بالای مرورگر نمایش داده میشه. favicon متحرک رو برخی سایت های طراحی و گرافیک با هزینه درست می کنند اما اگر شما میخواهید بدون هزینه یک favicon برای سایت یا وبلاگتون طراحی کنید با ما همراه باشید.
برای ساخت این ایکون متحرک به دو نرم افزار Adobe photoshop و Macromedia Flash احتیاج داریم.
1) فتوشاپ را باز کنید و یک صفحه جدید با زدن کلید های Ctrl+N باز کنید. اندازه و سایر موارد را مطابق تصویر زیر ست کنید و ok بزنید تا صفحه ایجاد شود:
2) متن مورد نظر خود را در صفحه ایجاد شده تایپ کنید و اگر میخواهید آیکون یا هر چیزی نیز به آن اضافه کنید آنرا در امتداد نوشته قرار دهید. هر مرحله را ما با تصویر زیر همان مرحله نشان داده ایم که به شما در انجام مراحل کمک شایانی می کند.
3) از منوی سمت راست، Layers را انتخاب کنید و لایه Backgroud را دو بار کلیک کنید. یک پنجره باز می شود، ok را بزنید و مجددا لایه Background را دو بار کلیک کنید تا پنجره Layer Style باز شود. تیک Gradiant Overlay را بزنید و روی آن کلیک کنید، در سمت راست مطابق تصویر زیر یک سری ابزار باز می شود.
4) روی نوار مشکلی/سفید رنگ سمت راست که در مقابل Gradiant: قرار دارد یک بار کلیک کنید، پنجره جدیدی مطابق تصویر زیر باز می شود. در قسمت پایین این پنجره یک نوار سیاه/سفید وجود دارد که چهار فلش کوچک در چهار طرف آن قرار دارد. سه فلش سیاه و یک فلش سفید. ابتدا روی فلش مشکی سمت چپ پایین، کلیک کرده واز قسمت color مقدار کد رنگ آن را 0c7cfa قرار دهید. توجه داشته باشید که رنگ هایی که اینجا داریم قرار میدیم دلخواه هستند و شما میتونید با توجه به اینکه طرحتون چه رنگی هست این رنگ ها رو به دلخواه تغییر بدید. بعد از انتخاب رنگ مورد نظر ok کنید تا اعمال بشه
5) حالا روی فلش سفید سمت راست پایین کلیک کنید و رنگ اون رو روی 0730fe قرار بدید.
6) حالا هر دو پنجره موجود را ok کنید تا بسته شود. دقت کنید که رنگ متن تایپ شده را طوری قرار دهید که همرنگ زمینه نباشد و ترجیحا از رنگ های متضاد و قابل تمایز استفاده کنید تا طرحتون قشنگ تر در بیاد. اینجا ما رنگ نوشته رو به سفید تغییر میدیم و با استفاده از ابزار crop tool متن نوشته شده رو برش می زنیم
7) و سپس Enter را میزنیم تا برش اعمال شود:
و در نهایت طرح را بصورت فایل JPG را زدن کلید های Shift+Ctrl+S یا گزینه save as از منوی file ذخیره می کنیم.
8) طرح ما تا اینجای کار آماده شده و باید با استفاده از نرم افزار Macromedia flash آنرا متحرک کنیم. برای شروع نرم افزار Marcomedia flash را باز می کنیم و از منوی file گزینه Flash Ducument را انتخاب می کنیم. سپس document را از منوی modify انتخاب کرده و و اندازه را روی 16 در 16 پیکسل و frame rate را روی 12 تنظیم کنید و ok را بزنید (مطابق تصویر زیر) .رنگ background را نیز سعی کنید با رنک background طرحتان یکسان انتخاب کنید . مثلا طرح ما دارای زمینه آبی است و اینجا باید رنگ آبی را انتخاب کنید اما برای اینکه در تصاویری که میخواهیم اینجا قرار دهیم برای شما واضح و شفاف باشد، زمینه را اینجا سفید در نظر میگیریم.
9) از منوی file گزینه import و سپس import to Library را انتخاب و فایل JPG طرحمان را import می کنیم. دکمه های Ctrl+L را می زنیم تا پنجره Library در سمت راست باز شود (اگر باز است نیازی نیست). میبینیم که فایل JPG ما در Libraty ظاهر شده. روی آن یکبار کلیک می کنیم. با این کار محتوای تصویر در قسمت بالای آن نمایش داده می شود
10) فایل یا تصویر ران را با موس گرفته و روی صفحه می کشیم و تصویر طرحمان را در کنار مربع سفید رنگ وسط صفحه می کشیم. (رنگ این مربع همان رنگی است که در مرحله 8 انتخاب کردیم)
طرحمان را طوری در کنار مربع وسط صفحه قرار میدهیم که از لحاظ ارتفاع دقیقا در یک راستا قرار بگیرند و اندکی فاصله فقط با هم داشته باشند
11) در قسمت بالایی نرم افزار فلش، پنجره فریم ها را قرار دارد. در این پنجره روی مستطیل کوچک زیر عدد 80 یک بار کلیک کرده، کلید F6 را روی کیبورد می فشاریم.
12) حالا طرحمان را با استفاده از کلید های جهت دار کیبورد از طرف دیگر روی مربع وسط صفحه می بریم. به تصویر زیر دقت کنید:
13) دوباره روی مستطیل کوچک زیر عدد 80 این بار کلیک راست کرده و گزینه Select All Frames رامیزنیم تا تمام فرم های از 0 تا 80 انتخاب شود و دوباره روی همان مستطیل کلیک راست کرده و گزینه Create Motion Tween را می زنیم.
حالا اگر کلید Enter را بزنیم میبینیم که طرحمان حرکت می کند.
برای اینکه بعدا بتوانیم در انیمیشنمان تغییراتی اعمال کنیم با زدن کلید های Ctrl+S پروژه را در جایی ذخیره می کنیم.
14) در پایان برای گرفتن خروجی از منوی File گزینه Publish Setting را انتخاب می کنیم و تیک مربوط به GIF را می زنیم، با این کار یک tab بنام GIF ظاهر می شود. روی آن کلیک می کنیم و تنظیمات را مطابق تصویر زیر اعمال میکنیم و با زدن دکمه Publish ، طرح favicon متحرک ما در محل ذخیره سازی پروژه که پیشتر اشاره کردیم ذخیره می شود.
فایل متحرک ما آماده شد که آنرا در تصویر ذیل میبینیم:
15) فایل مذکور را به favicon تغییر نام می دهیم. برای استفاده از این favicon در سایت یا وبلاگ، اگر قالب سایت امکان انتخاب favicon را بدهد، آن را در مکان مشخص شده که در کنترل پنل قالب تعبیه شده قرار میدهیم. در بعضی موارد، قالبی که نصب شده خود دارای favicon می باشد که میتوانیم فایل خودمان را با فایل موجود جایگزین یا replace نماییم. در مواردی هم که قالب فاقد favicon باشد میتوانیم از کد زیر در قالب سایت یا وبلاگ (بعد از تگ <head>) استفاده نماییم.
<link rel="icon" type="image/gif" href="http://yoursite.com/favicon.gif" />
در کد بالا بجای http://yoursite.com/gif-favicon.gif آدرس url مربوط به favicon خود که آنرا در جایی آپلود کرده اید وارد نمایید.
سخنی با کاربران و بازدیدکنندگان عزیز:
1) در این آموزش طرح ما بصورت انگلیسی نوشته شده که باید از چپ با راست خوانده شود، بنابر این ما تصویر را از راست به چپ حرکت دادیم. اما اگر بخواهید جمله ای فارسی را نمای دهید، باید نوشته را از چپ به راست حرکت دهید. یعنی در مرحله 10 که ما تصویر را در سمت راست طرح قرار دادیم شما آنرا در سمت چپ طرح قرار دهید و در مرحله بعدی که طرح را باید از سمت دیگر روی مربع وسطی قرار دهید، با کشیدن طرح به سمت راست این کار را انجام دهید.
2) favicon متحرک فقط در مرورگر فایرفاکس پشتیبانی می شود. برای قرار دادن favicon بصورت غیر متحرک، میتوانید ایکون خود را در سایز 16*16 پیکسل و با پسوند ico طراحی کنید و با استفاده از کد زیر آنرا بعنوان favicon سایتتان قرار دهید:
<link rel="shortcut icon" href="http://yoursite.com/favicon.ico" type="image/x-icon" />
3) اگر میخواهید یک favicon ثابت و یک favicon متحرک داشته باشید تا در مرورگر هایی که امکان نمایش favicon متحرک را ندارند، نسخه ثابت نمایش داده شود از کد زیر استفاده کنید:
<link rel="shortcut icon" href="http://yoursite.com/favicon.ico" type="image/x-icon" / > <link rel="icon" href="http://yoursite.com/favicon.gif" type="image/gif" >
4) سرعت انیمیشن، بستگی به عددی دارد که در مرحله 11 انتخاب می کنید، اگر میخواهید سرعت بیشتر شود، عدد کمتری انتخاب کنید و اگر میخواهید سرعت کمتر شود، عدد بزرگتری را انتخاب نمایید. البته میتوانید با کشیدن مستطیل کوچک زیر عدد 80 به سمت چپ یا راست این مقدار را تغییر دهید.
5) این مطلب توسط اینجانب و با بهره گیری از راهنما های مختلف نظیر mfaa، وبلاگ سیاه سفید و … تهیه و اختصاصا در “دانشنامه مهندس” ارائه می گردد، درج در وبلاگ یا سایت شما تنها با ذکر منبع بلامانع است.
سلام چجوری میشه انگلیسی و فارسی اسم سایتو نوشت
سلام واقعا خسته نباشید ممنووووون خیلی استفاده کردم برای وبم ساختم میدونم وقتشو ندارید به وب ما سر بزنید ولی تمام سعیتون رو بکنید میخوام نظرتون رو درباره ی وبلاگم بدونم خیلییییییییییییییی ممنون
سلام. عالی بود. ممنون.