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

1100 بازدید
پنج شنبه ۲۳ اردیبهشت ۱۳۹۵
آموزش ساخت فونت آیکون های اختصاصی - قسمت دوم - تبدیل فونت به فایل SVGReviewed by جواد نبوی on May 12Rating: 5.0

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

سلام; همونطور که میدونید ما تو پست قبلی, آموزش ساخت فونت آیکن های اختصاصی رو شروع کردیم. در قسمت اول این آموزش نحوه تبدیل عکس به فونت رو یاد گرفتیم و اون رو ذخیره کردیم. در این قسمت قراره فایل فونت رو به فایل SVG تبدیل کنیم. احتمالا میدونید که SVG یا Scalable Vector Graphic, نوعی فرمت برای نمایش عکس در صفحات وب هست که برخلاف فرمت های دیگه از نوع عکس, به وسیله پیکسل ها در صفحه رسم نمیشه و توسط کد ها و اعداد ریاضی , به شکل خطی رسم میشه. درحالی که قبلا, تصاویر و عکس ها محدود به پیکسل ها بودند و در طول و عرض, تعداد پیکسل مشخصی وجود داشت که با تغییر اندازه مرورگر, تعداد این پیکسل ها چند برابر میشد (که افت کیفیت رو به همراه داشت) اما الان کیفیت تصاویر SVG به دلیل مقیاس پذیر بودن (در این عکس ها, اندازه ها براساس نسبت و نه پیکس تعیین میشه)درصورت زوم شدن کاهش پیدا نمیکنه و حجم کمتری هم داره. اما طرح های خیلی پیچیده با این روش قابل رسم نیستند.

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

شکل زیر یک تصویر با فرمت SVG رو نمایش میده. میتونید هرچی میخواید زوم کنید تا ببینید کیفیتش تغییر نمیکنه:

توجه: اگر عکس بالا رو نمیبینید به این معنیه که مرورگر شما از svg پشتیبانی نمیکنه.

مرحله دوم: تبدیل فونت به فایل SVG

در این قسمت از آموزش ساخت فونت آیکون اختصاصی در وب تستر قصد داریم فونتی که قبلا ساخته بودیم رو به فایل SVG تبدیل کنیم. برای اینکار به آدرس everythingfonts.com/otf-to-svg برید.

سمت چپ این سایت در قسمت The EULAs of the font allow this conversion, روی دکمه ای که جلوش قرار داره کلیک کنید تا به حالت Yes دربیاد.

بعد روی دکمه ی Pick Font File کلیک کنید و فایل Otf ای که تو قسمت اول آموزش ساختیم رو وارد کنید. سپس روی دکمه Convert کلیک کنید. با کلیک روی این دکمه, بعد از چند ثانیه از شما درخواست میکنه که فایل SVG ساخته شده رو دانلود کنید. بعد از اینکه فایل دانلود شد , اون رو باز کنید و در یک محل مشخص که یادتون بمونه از حالت فشرده خارج (اکسترکت) کنید.(به این فایل در مرحله سوم آموزش نیاز خواهیم داشت.)

توجه: اگر به هرعلتی موفق نشدید در سایتی که معرفی کردیم فایل SVG بسازید, میتونید با جستجوی عبارت Convert otf to SVG سایتهای مشابه رو پیدا کنید و این عملیات رو انجام بدید.

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

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

تا قسمت بعد, خدانگهدار

قسمت قبلی این آموزش:

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

تبلیغات

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

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

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

  1. شرکت گفت:

    عااالی بود
    ممنونم از زحماتتون

پاسخ دهید

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