آموزش ساخت فونت آیکون های اختصاصی – قسمت اول – تبدیل عکس به فونت

2961 بازدید
دوشنبه ۲۰ اردیبهشت ۱۳۹۵
آموزش ساخت فونت آیکون های اختصاصی - قسمت اول - تبدیل عکس به فونتReviewed by جواد نبوی on May 9Rating: 5.0

آموزش ویدیویی در تاریخ ۹۵/۲/۲۰ اضافه شد.

سلام دوستان! در این مطلب قصد داریم نحوه ساخت فونت آیکون های اختصاصی رو برای شما توضیح بدیم. همونطور که می دونید , فونت آیکون ها (Font Icon) یا همون آیکون فونت ها, در واقع یک نوع فونت هستند که به جای داشتن حروف با اشکال خاصِ اون فونت , آیکن های پر استفاده رو که تا قبل از این توسط عکس در وب قرار داده میشدن رو در بر دارن. واضحترش این میشه که از این به بعد شما به جای استفاده از عکس به عنوان آیکن در قسمت های مختلف سایتتون, میاید از فونتی استفاده می کنید که هر حرفش به شکل یک آیکن هست(یه چیز تو همین مایه ها). خُب قاعدتاً استفاده از این روش مزایای بیشتری نسبت به استفاده از عکس داره. از مزایای فونت آیکن ها میشه به موارد زیر اشاره کرد:

  1. وکتور بودن (یعنی هرچی زوم کنیم کیفیتش پایین نمیاد, یا هرچی سایزشو بزرگ کنیم کیفیتش پایین نمیاد!)
  2. حجم کمتر نسبت به عکس => فونت آیکن ها به دلیل ماهیت فونت بودنشون حجم کمتری نسبت به عکس ها دارن. از طرفی چون در این سیستم ,مجموعه آیکن ها در یک فایل فونت قرار دارن سرعت لود شدن بالاتر میره. اما در سیستم عکس ها چون هر عکس جدا لود می شه سرعت لود صفحه پایین میاد.
  3. و غیره.

اما معایب شون:

  1. امکان استفاده از آیکن های سه بعدی یا چند رنگ یا غیر خطی وجود نداره.(این مورد با توجه به مُد بودن طراحی فلت, زیاد مهم نیست)
  2. در سیستم عامل ویندوز (در اکثر مرورگر های این سیستم عامل) , آیکن ها در سایز کوچک کمی بد نمایش داده می شن که البته این مورد در سیستم عامل مکینتاش وجود نداره و احتمالا به زودی در ویندوز هم برطرف می شه.
  3. اگر حرفه ای نباشید (یعنی این آموزش رو تا آخر نخونده باشید!) مجبورید از پک های آماده که در نت وجود دارن مثل مجموعه معروف fonte awsome استفاده کنید که علاوه بر آیکن های مورد نیاز شما, صدها آیکن دیگه هم تو همون پک وجود داره و حجم فونت شما رو بالا میبره. در حالی که با روشی که به شما میگیم میتونید فقط آیکن های مورد نیازتون رو جدا کنید و تو یه پک جدا ازشون استفاده کنید که حجم کمتری اشغال کنه.(در نتیجه سرعت لود سایت بالا میره و میزان استفاده از پهنای باند هاست کم میشه)

نتیجه گیری:

باتوجه به موارد بالا نتیجه می گیریم که استفاده از فونت آیکون ها کاملا به صرفه تر و بهتره. خب, ما تا اینجا فهمیدیم فونت آیکن چیه و مزایاش نسبت به آیکن های عکسی چه چیزایی هستن. برای استفاده از فونت آیکن ها شما میتونید از پک های آماده (مثل Font Awsome) استفاده کنید, که در این صورت مجبورید یک فایل تقریبا حجیم رو وارد قالب سایتتون بکنید که خب این روش به دلیل اینکه شما قطعا از همه ی ۵۰۰ و خرده ای آیکنی که توش وجود داره استفاده نمی کنید, به صرفه نیست و آیکن های غیرقابل استفاده ی این پک, حجم اضافی اشغال می کنن. منظورم چیه؟ منظورم اینه که فرض کنید شما پک font awsome رو دانلود کردید; خب تو این پک یک فایل مشخص (دقت کنید فایل های دیگه ای هم وجود داره اما فایلی که مربوط به فونت آیکن برای مرورگری خاص هست یک فایله) وجود داره که تمام ۵۰۰ آیکن تو این فایل وجود دارن. مرورگر(browser) هم برای اینکه آیکن ها رو در سایت نمایش بده, مجبوره این فایل رو کامل لود کنه (طبیعیه که مرورگر توانایی جدا کردن آیکن های مورد نیاز شما از داخل یک فایل از نوع فونت و لود کردنشون رو نداره), اما ما فقط از یه سری از آیکن ها استفاده می کنیم و نمیخوایم آیکن های بلااستفاده لود بشن. پس باید از ترفندی استفاده کنیم که بتونیم آیکن های موردنیازمون رو از پک font awsome جدا کنیم و در یک فایل مجزا قرار بدیم که حجم کمتری اشغال کنه. این ترفند رو تو همین مطلب به شما یاد میدیم.

اما مسئله ی دیگه ای که وجود داره اینه که اگه بخوایم خودمون یک فونت آیکن اختصاصی (مثلا لوگوی هدر سایت وب تستر, آیکون فونت هست) رو بسازیم باید چه کار کنیم؟ خب; برای این هم راهی وجود داره. تو این مطلب به شما یاد میدیم که چطور آیکن اختصاصی خودتون رو به شکل فونت در بیارید و به مجموعه آیکن های font awsome مورد نیازتون اضافه کنید و یک پک کامل از آیکن های اختصاصی و خالی از آیکن های اضافه داشته باشید. پس تا آخر این آموزش با ما همراه باشید.

مراحل این آموزش به ترتیب زیره:

  1. ساخت فونت از آیکن یا لوگوی اختصاصی شما
  2. تبدیل فونت ساخته شده به فرمت svg
  3. تبدیل فایل svg به فونت آیکن
  4. اضافه کردن آیکون فونت های مورد نیاز شما از مجموعه font awsome (یا هر مجموعه دیگه ای) به فونت آیکن اختصاصی شما – گرفتن خروجی نهایی
  5. استفاده از مجموعه آیکون فونت ساخته شده در طراحی وب

به دلیل طولانی شدن آموزش, ما این آموزش رو به چهار قسمت تقسیم کردیم و هر قسمت رو تو یه مطلب جداگانه قرار دادیم. تو این پست میریم سراغ قسمت اول آموزش:

مرحله اول : ساخت فونت, از آیکن یا لوگوی اختصاصی خودتان

برای شروع این مرحله , باید لوگوی مورد نظرتون رو در فتوشاپ آماده کرده باشید (البته میتونید در نرم افزار Adobe Illustrator هم لوگو رو بسازید که بصورت وکتور باشه و با فرمت svg ذخیره کنید که این مورد در بحث ما نمی گنجه). توجه داشته باشید که لوگو باید کاملا خطی , تک رنگ و دوبعدی باشه(سه بعدی نباشه!). برای مثال من میخوام لوگوی وب تستر رو به فونت آیکن تبدیل کنم که به شکل زیره:

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

این لوگوی وب تستره. من قراره این لوگو رو تبدیل به فونت آیکن کنم. شما هم باید لوگوی خودتون رو مثل این با فتوشاپ آماده کنید. توجه داشته باشید که پس زمینه لوگوتون کاملا خالی باشه (یعنی هیچ عکس و رنگی نباشه ; درواقع همون طرح شطرنجی فتوشاپ توی پس زمینه باشه) بعد تو فتوشاپ از منوی File گزینه Save for Web رو بزنید و در کادر باز شده گوشه بالا سمت راست زیر قسمت Preset یک منوی کشویی وجود داره. از منوی کشویی گزینه PNG-24 رو انتخاب کنید و روی دکمه Save کلیک کنید. بعد از ذخیره کردن عکس نوبت به تبدیل عکس به فونت میرسه.

ما در این مرحله از نرم افزار Font Creator برای ساخت فونت استفاده می کنیم. با یک سرچ در گوگل می تونید این نرم افزار رو به راحتی دانلود کنید. بعد از دانلود, نرم افزار رو نصب و اجرا کنید. سپس از منوی File گزینه New Project رو انتخاب کنید و در کادر باز شده در قسمت Font family name نام دلخواه خودتون رو بنویسید. به بقیه موارد کاری نداشته باشید و روی OK کلیک کنید. با انجام این مرحله یک پروژه جدید ایجاد کردیم. درون پنجره اصلی نرم افزار, یک پنجره کوچکتر وجود داره که قسمت بالاش اسم فونتی که شما انتخاب کردید رو می بینید. تو همین پنجره کوچیک یه اسکرول بار هست که اگه اونو کمی پایین بکشید باکس های مربوط به حروف بزرگ انگلیسی رو میبینید که هر حرف با رنگ خاکستری کم رنگ نمایش داده شده. روی یکی از این حروف بزرگ (مثلا A) دابل کلیک کنید تا پنجره طراحی شکل حرف A به نمایش در بیاد. البته شما نباید حرف A انگلیسی رو طراحی کنید. بلکه شما آیکن مورد نظر خودتون رو به جای حرف A طراحی می کنید تا مثلا وقتی که با این فونت حرف A رو تایپ کردید آیکن مورد نظرتون نمایش داده بشه. بعد از اینکه روی باکس حرف A دابل کلیک کردید, از منوی Tools روی گزینه Imort Image کلیک کنید و در پنجره باز شده, عکس (لوگو) ی مورد نظرتون رو انتخاب و روی Open کلیک کنید.

در مرحله بعد پنجره ای با نام Import Raster Image براتون باز میشه. در این پنجره در قسمت Smooth Filter گزینه None رو تیک دار کنید و در قسمت Threshold , در کادر عددی که سمت راست وجود داره مقدار ۲۱۳ رو وارد کنید. روی دکمه ی Generate کلیک کنید. (دقت کنید تنظیمات شما باید مثل تنظیمات شکل زیر باشه)

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

توجه: درصورتی که در کادر سمت راست پنجره Import Raster Image با حرکت دادن اسکرول بار نتونستید پیش نمایش آیکون تون رو ببینید مقدار ۲۱۳ رو بیشتر کنید. (عکس بالا نمونه ی صحیح پیش نمایش هست)

در مرحله بعد عکس شما که حالا تبدیل به فونت شده در پنجره ای با زمینه شطرنجی نمایش داده میشه. یک پنجره کوچک هم با نام Transform در سمت راست وجود داره که باید تو این پنجره کوچیک تب Position رو انتخاب کنید و مقدار X Position و Y Position رو صفر وارد کنید. سپس روی Apply کلیک کنید.

توجه: درصورتی که پنجره Transform در نرم افزار شما به طور پیشفرض مشاهده نمیشه, کلید F6 رو در صفحه کلید فشار بدید یا از منوی View و زیرمنوی Toolbars روی گزینه Transform کلیک کنید. حالا پنجره Transform باز میشه.

بعد از انجام مراحل بالا, در پنجره ای که زمینه شطرنجی داره و عکستون داخلش هست, یک کلیک بکنید و کلید های Ctrl+A رو در صفحه کلید فشار بدید. سپس از تولبار بالای نرم افزار, سمت چپ, ابزار Selection (که به شکل یک مستطیل نقطه چین هست) رو انتخاب کنید و با دراگ کردن گوشه های عکستون اونو کوچیک کنید. توجه داشته باشید که عکسو باید تا جایی کوچیک کنید که مرز بالایی عکستون زیر خط چین WinAscent قرار بگیره. همچنین تو این پنجره دو تا خط چین عمودی قرمز رنگ میبینید که باید سمت راستیه رو به اندازه ای جابجا کنید که منطبق بر مرز سمت راست عکستون بشه. مثل عکس زیر:

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

در مرحله بعد, در قسمت بالا,سمت راست نرم افزار روی دکمه ای که به شکل تیک هست کلیک کنید و در دو مرحله روی Next کلیک کنید و بعد روی close کلیک کنید. حالا اولین آیکون رو ساختیم. اگر میخواید آیکن های دیگه ای هم به این آیکن اضافه کنید (البته نه اون آیکون هایی که گفتیم از پک های آماده میگیریم و متصل می کنیم; اون بحثش جداست و در قسمت آخر همین آموزش بهش می پردازیم). مثلا اگر سایت شما دو لوگو داره میتونید عکس لوگوی دوم رو هم با طی همین مراحل به جای حرف B (یا هر حرفی که خودتون دوست دارین) قرار بدین.

حالا میتونید کلید F5 رو از صفحه کلید فشار بدید و نحوه عملکرد فونتتون رو آزمایش کنید. در صفحه ای که باز شد زبان صفحه کلید رو به انگلیسی تغییر بدید و حرف A بزرگ (یا هر حرفی که خودتون انتخاب کرده بودین) رو تایپ کنید. میبینید که لوگوی شما به صورت یک حرف از یک فونت به نمایش در میاد. مثل عکس زیر:

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

بعد از اتمام کار, باید فایل خروجی از فونت ساخته شده بگیریم. برای اینکار از منوی File و زیرمنوی Export Font روی گزینه ی Export as True Type/Open Type Font کلیک کنید و فونت رو در محل مشخصی سیو کنید. (فایل فونت در محل انتخابی شما با فرمت otf سیو میشه که در قسمت دوم این آموزش به اون نیاز خواهیم داشت.

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

آموزش ویدیویی ساخت فونت آیکون های اختصاصی – قسمت اول

قسمت های بعدی این آموزش:

تبلیغات

نویسنده (مدیر سایت)

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

9 دیدگاه برای “آموزش ساخت فونت آیکون های اختصاصی – قسمت اول – تبدیل عکس به فونت”

  1. مهدی گفت:

    سلام خسته نباشید
    من میخواستم از فونت ایکون توی زیان برنامه نوسی بیسیک فور اندروید استفاده کنم
    میش بگین تا قسمت چندم آموزش ب کار من مرتبط میش ؟
    استفاده فونت ایکون در زبان b4a را هم آموزش میدید؟

    1. جواد نبوی گفت:

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

    2. سید صالح شجاعی گفت:

      دوست عزیز میتونی این آیکون رو توی یه فایل html ذخیره کنی.
      بعد توی بیسیک بازش کنی
      ebView.loadUrl(“file:///android_asset/filename.html”);
      توی دیزاینر یه وب ویو درست کن وفایل html رو هم وارد کن

      موفق باشی
      یادت باشه اینی که گفتم رایگان نیست
      باید ۳ تا صلوات بدی…
      (-;

  2. جواد گفت:

    طراحی فونت نستعلیق به چه صورتیه؟ آنهم داخل یه برنامه نوشته شده مثلا با C# چگونه است؟ ممنون اگه راهنمایی کنید!!!

    1. جواد نبوی گفت:

      یعنی فونت رو از اول درست کنید؟ یا ازش توی یک برنامه استفاده کنید؟

  3. مجید گفت:

    سلام
    من طبق مراحلی که گفتین پیش رفتم ولی مشکلی که برام پیش اومد این بود که تو قسمت تست آیکونی که ساختم تایپ نشد!
    حتی وقتی Export کردم جایی سیو نشد که مرحله دوم رو انجام بدم!
    اطلاعات برنامه :FontCreator 10.0
    ممنون میشم راهنماییم کنید
    سپاس

    1. جواد نبوی گفت:

      سلام مجید جان

      دقت داشته باشید که باید همون حرفی که آیکون رو جاش قرار دادید، تایپ کنید. مثلا اگر به جای حرف A بزرگ آِیکون خودتون رو ساختید، باید حرف A بزرگ رو تایپ کنید تا نتیجه رو ببینید. یعنی شیفت و A رو بزنید.
      به نظرم بهتره از ورژن ۷ این نرم افزار استفاده کنید. چون آموزشی که دادیم بر اساس این ورژن بود. ممکنه ناهماهنگی هایی بین نسخه های مختلف نرم افزار وجود داشته باشه.
      ضمنا نرم افزار هم کرک شده باشه.

    2. مجید گفت:

      ادمین عزیز، یه تشکر ویژه بابت کمکت
      مشکلم حل شد
      مرسی بابت سایت خوبتون، خسته نباشین

    3. جواد نبوی گفت:

      خواهش میکنم دوست گلم
      سلامت باشید

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *