1. مهمان گرامی، جهت ارسال پست، دانلود و سایر امکانات ویژه کاربران عضو، ثبت نام کنید.
    بستن اطلاعیه

آموزش ساخت Favicon متحرک و ثابت برای وبلاگ خود / همراه تصاوير

شروع موضوع توسط minaaa ‏18/3/12 در انجمن طراحی سایت

  1. minaaa

    کاربر پیشرفته

    تاریخ عضویت:
    ‏9/12/10
    ارسال ها:
    19,773
    تشکر شده:
    6,457
    امتیاز دستاورد:
    113
    [h=2][/h]
    [​IMG]
     ​

    اگر به قسمت آدرس بار هر سایت توجه کنید یک آیکون کوچک در ابعاد ١۶*١۶ میبینید که به آنها Favicon میگویند .

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

    طراحی به صورت ثابت :

    برای این کار شما احتیاج دارید به یک طرح که در ابعاد ١۶*١۶ پیکسل باشد . میتوانید توسط فتوشاپ و یا دیگر نرم افزارهای گرافیکی این کار را انجام دهید . سپس آن را در یکی از سایت های آپلود عکس که لینک مستقیم میدهد بارگذاری کنید . پس از اینکه آیکن خود را بارگذاری کردید به قسمت ویرایش کد قالب خود بروید و کدی که در پایین معرفی میکنیم را بعد از کد <head> در قالب وب خود قرار دهید و آدرس عکس خود را جایگزین آن کنید .
    [​IMG]​

    در کد بالا به جای نقطه چین ها آدرس آیکن خود را جایگزین کنید .

    طراحی به صورت متحرک :

    ما در اینجا بیشتر میخواهیم آموزش به صورت متحرک را به نمایش بگذاریم و به خاطر همین توضیح کوچکی در رابطه با طراحی به صورت ثابت را درج کرده ایم .

    اما نوبت میرسد به متحرک که نیازمند دو نرم افزار معروف از جمله فتوشاپ و فلش که اکثرا انها را دارند

    ابتدا به فتوشاپ رفته و یک فایل جدید در ابعاد ۵٠٠*١۶ پیکسل ایجاد میکنیم .


    [​IMG]


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


    [​IMG]

    ​
    میتوانید بعد از نوشته خود یک تصویر نیز اضافه کنید (توجه کنید که تصویر باید در رابطه با مطالب وب خود باشد به عنوان مثال اگر وب شما در رابطه با موبایل است تصویر یک قلب و یا یک فلش که معرف دانلود میباشد زیاد به یکدیگر مرتبط نمی باشند پس سعی کنید همگام با مطالب خود پیش بروید) .​


    [​IMG]



    در قسمت لایه ها اولین لایه از پایین که Background نام دارد بر روی آن دابل کلیک میکنیم در پنجره باز شده ok را میزنیم . دوباره بر روی همان لایه دابل کلیک میکنیم تا پنجره Layer Style باز شود . بر روی گزینه Gradient Overlay کلیک میکنیم تا تیک آن فعال شود در قسمت سمت راست تنظیمات آنرا مشاهده میکنید . بر روی نوار سیاه سفید رنگ یک بار کلیک کنید . همانطور که مشاهده میکنید پنجره جدیدی باز میشود در پایین آن پنجره چهار فلش وجود دارد که سه تای آن مشکی و یکی سفید میباشد . ابتدا بر روی فلش مشکی سمت چپ پایین یک بار کلیک کرده و از قسمت Color رنگ آن را 12438f قرار میدهید . به تصویر زیر توجه کنید :

    ​


    [​IMG]



    پس از اینکه رنگ مورد نظر را انتخاب کردید ok را بزنید . اینبار بر روی فلش سفید سمت راست پایین یک بار کلیک کنید و از قسمت Color رنگ 26a3ff را انتخاب کنید .​




    [​IMG]

    .
    .
    .
    ​
     
    minaaa, ‏18/3/12
    #1
  2. minaaa

    کاربر پیشرفته

    تاریخ عضویت:
    ‏9/12/10
    ارسال ها:
    19,773
    تشکر شده:
    6,457
    امتیاز دستاورد:
    113
    پاسخ : آموزش ساخت Favicon متحرک و ثابت برای وبلاگ خود / همراه تصاوير

    [h=2][/h]
    سپس هر دو پنجره را تایید کنید . با استفاده از ابزار Crop Tool همانند تصویر زیر قسمت مورد نظر را انتخاب کنید و از صفحه کلید اینتر را بزنید .​


    [​IMG]​

    تا به اینجای کار طرح ما آماده شده است .


    [​IMG]​


    حالا نوبت میرسد به متحرک سازی آن . قبل آن طرح خود را به صورت jpg ذخیره کنید . حالا نرم افزار فلش را اجرا کنید از منوی Modify گزینه Document را میزنیم (Ctrl+M) . در پنجره باز شده width و height را هر دو بر روی 16 تنظیم میکنیم و ok را میزنیم .​


    [​IMG]​

    به منوی File رفته و Import to Library را بزنید سپس به محل ذخیره سازی طرح خود بروید و آنرا open کنید . از صفحه کلید Ctrl+L را بزنید , پنجره کوچکی باز میشود که در آن نام فایل شما وجود دارد که اگر یک بار بر روی آن کلیک کنید شکل آن در بالای همان پنجره مشاهده میشود .​


    [​IMG]​

    بر روی فایل خود و یا همان طرح یک بار کلیک کنید و آنرا به داخل صفحه کاری بکشید (Drag and Drop) . آنرا قبل از صفحه سفید کوچک قرار دهید همانند تصویر زیر :​


    [​IMG]​

    در قسمت بالای پنجره فریم ها را مشاهده میکنید (تصویر زیر) بر روی مستطیل زیر عدد 50 یک بار کلیک کنید و F6 را از صفحه کلید بزنید .


    [​IMG]​

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


    [​IMG]​



    باز دوباره بر روی مستطیل زیر عدد 50 راست کلیک کنید و گزینه Select All Frames را بزنید تا تمام فریم های شما انتخاب شود دوباره بر روی همان فریم و یا مستطیل راست کلیک کنید و اینبار گزینه اول یعنی Create Motion Tween را بزنید .​
    اگر کلید اینتر را بزنید میبینید که طرح شما از سمت چپ شروع به حرکت میکند و در سمت راست متوقف میشود . حالا میخواهیم به صورت gif ذخیره کنیم :​
    قبل از هر کاری پروژه خود را در محلی ذخیره کنید .​
    برای اینکار به منوی File رفته و گزینه Publish Settings را بزنید سپس در پنجره باز شده بر روی گزینه Gif Image (.gif) یک بار کلیک کنید تا تیک آن فعال شود سپس از قسمت تب های بالا تب جدیدی ظاهر میشود که بر روی آن هم نوشته شده Gif . بر روی آن کلیک کنید و از قسمت تنظیمات همانند تصویر زیر تنظیمات آنرا انجام دهید .​


    [​IMG]​

    بر روی گزینه Publish یک بار کلیک کنید تا آیکن متحرک شما با تنظیمات انجام شده ذخیره شود و ok را بزنید .​
    به محل ذخیره سازی پروژه خود بروید و در آنجا فایلی به نام Untitled-1.gif وجود دارد که آیکن متحرک شما میباشد .​
    خوب کار متحرک سازی ما هم به اتمام رسید و میتوانید پایان کار را مشاهده کنید : [​IMG]​
    تصویر متحرک خود را در جایی از اینترنت که لینک مستقیم میدهد آپلود کنید سپس به قسمت ویرایش کد قالب خود بروید و کد زیر را بعد از کد <head> قرار دهید .​

    ​
    [​IMG]​




    در کد بالا به جای نقطه چین ها آدرس آیکن خود را جایگزین کنید .​
    این هم از آیکن متحرک خود ما که در کنار آدرس وبسایت هم نیز مشاهده میشود . [​IMG]​
    [​IMG]​

    ​
     
    minaaa, ‏18/3/12
    #2