شیرین وبفا

azaronline
خانه / اموزش / اموزش ساخت فاوآیکن متحرک

اموزش ساخت فاوآیکن متحرک

favicon

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

توجه : این اموزش با استفاده از نرم افزار فتوشاپ اموزش داده شده است.
آموزش :
بعد از اجرای فتوشاپ ، با استفاده از سربرگ File و روی New… کنید.تا سند جدید باز کنید.(مطابق تصویر زیر ) :

 http://shwebfa.ir/wp-content/uploads/2015/01/create-favicon-1-300x164.png

خب حالا یک اندازه ی دلخواه انتخاب کنید. من در اینجا 150*150 انتخاب کرده ام ، البته بعد از اماده شدن فاوآیکن سایز ان را تغییر خواهیم داد که در اخر به ان اشاره خواهم کرد. مطابق تصویر زیر:

[ می توانید تنظیمات را همانند تنظیمات من کنید ]

حال برای ساختن فاوآیکن متحرک و البته فلت ، از کنار ابزار مطابق شکل روی Paint Bucket Tool کلیک کنید.

سپس رنگ مورد نظر خود را از پایین برنامه انتخاب کنید و در سند باز شده با استفاده از ابزار بالایی بطور کل رنگ کنید ( که با کلیک روی سند می توانید ان را رنگی کنید. ) که در اینجا من رنگ سیاه انتخاب کردم.
حال من اسم دامنه ی سایت رو گذاشتم :

S H W E B F A

و روی اون تصویری که سیاه کردم کلمه S را گذاشتم. مطابق تصویر زیر :

حالا در سمت راست برنامه لیر های ایجاد شده را خواهید دید.

شما دکمه ی Ctrl کیبرد را نگه دارید و روی لایه ی که سیاه ( Layer ) است کلیک کنید و در حالی که کنترل را نگه داشته را لایه S را نیز کلیک کنید. مطابق شکل:

زمانی که دکمه ی Ctrl را فشار داده اید دکمه ی E کیبرد را فشار دهید تا دو لایه ترکیب شوند.

بعد از ترکیب شدن به یک لایه:

حال از بخش Window تیک Animation را بزنید .مطابق شکل زیر :

سپس مطابق شکل زیر در پایین برنامه بخش Anumation -frames ظاهر خواهد شد.

روی دکمه ای که در شکل زیر نشان داده ام , کلیک کنید تا یک کپی از فریم ساخته شود . مطابق شکل:

بعد از ساخته شدن فریم جدید ( همان فریم 2 ) به فریم 1 بازگردید. ( روی فریم 1 کلیک کنید تا هایلات – ابی – شود ) .

ابزار فلش ( Move tool ) در سایدبار فتوشاپ را انتخاب کنید. مطابق شکل زیر :

سپس با استفاده از ان ابزار ، لایه ترکیب شده را به هر طرفی که میخواهید بکشید. مثلا در اینجا من به طرف بالا کشیده ام :

طوری به بالا بکشید که در محدوده دیده نشود. ( من اینجا کمی پایین کشیده ام تا شما قضیه را متوجه شوید. )

حالا در بخش فریم خود خواهید دید.

حال روی دکمه نشان داده شده در تصویر کلیک کنید.

در اینجا تعداد فریم ها رو نشون میده که به تصویر اصلی چه تاثیری بزاره ، من در اینجا روی 2 قرار داده ام.

روی ok کلیک کنید. خواهید دید که تصویر از بالا به پایین در محل اصلی کشیده می شود.

حال بهتر است در فریم اخری حدود 0.5 ثانیه نگه دارید.در پایین زمان را با second نشان داده است.

حالا یک کپی از اخرین فریم خود مطابق اموزش بالا بزنید.

حالا به بخش دوم نام سایت همان H میرسیم که میشه گفت از این به بعد مراحل تکراری هست .

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

خب مثلا در اینجا شما رنگ ابی را انتخاب کنید.

و روی ان کادر سیاه بکشید . بطوری که تمام بخش مربعی را بپوشاند.

سپس طبق اموزش بالایی ، شما باز هم متن را بنویسید و دو لایه را با هم دیگر ترکیب کنید.

سپس یک کپی از فریم که کپی شده را بزنید.

و در فریم قبلی ان کادر مربعی یا مستطیلی شکل را به هر طرفی که میخواهید ببرید.

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

تصویری از نمای کار شده :

.

بعد از تکمیل فرایند ، از بخش فایل  Save for web & Devices را انتخاب کنید.

حالا :

اول از همه نوع فرمت را gif انتخاب کنید. مطابق شکل :

حال برای تغییر اندازه فاوآیکن که در بالا عرض کردم ، در پایین ارتفاع و عرض رو مطابق با نوع سلیقه انتخاب کنید. ( بهتر است 16*16 کنید. ) مطابق شکل ( البته من تغییر ندادم ):

حالا روی save کلیک کنید و فایوایکن خود را ذخیره کنید.

با ویوور اصلی کامپیوتر نتیجه ی اصلی کار خود را خواهید دید.

نتیجه ی کار من :

http://shwebfa.ir/wp-content/uploads/2015/01/shirinwebfa.gif

توجه : معمولا فاوآیکن ها هم به صورت gif می باشند و هم به صورت ico و مشکلی در انتخاب فرمت وجود ندارد.

البته من تازه کار هستم و میدونم زیاد خوب نشده است 🙂

منبع و تصایر مطلب : اختصاصی “ شیرین وبفا

در صورت کپی برداری ذکر نام منبع و لینک به نوشته فراموش نشود.

Print Friendly
Email this to someoneShare on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInDigg this