استفاده از فونت های فارسی در طراحی سایت

شاید بشه گفت فونت ۹۰% وبلاگ ها و وبسایت های فارسی tahoma هست . فونت استانداردی که برای زبان فارسی توی وب تعریف شده و توی تمامی کامپیوترها به صورت پیشفرض قرار داره . اگر یک وبلاگ نویس توی وبلاگش از فونت مثلن B Titr استفاده کنه ممکنه خودش و خیلی های دیگه اون فونت رو درست ببینن ، ولی اگه کسی این فونت رو نداشته باشه اون متن رو با فونت Arial می بینه و وبلاگ حالت اصلی خودش رو برای اون فرد از دست می ده . اما چاره ی کار کجاست و چجوری می شه از فونت های مختلف توی وبسایت ها و وبلاگ ها استفاده کرد ؟

با اومدن css3 این مشکل نه تنها برای فارسی نویس ها بلکه برای همه ی زبون هایی که مشکل فونت داشتن برطرف شده و شما می تونید با چند خط کد نویسی با فونت مورد نظرتون توی وبلاگ یا وبسایتتون بنویسید .

اول از همه باید فونت مورد نظرتونو در ۴ فرمت ttf ، eot ، svg ، woof تهیه کنید . فونتی که شما روی ویندوزتون دارید فرمتش ttf هست و برای تبدیلش به فرمت های دیگه می تونید از سرویس های آنلاین استفاده کنید . سایت های زیادی برای این کار وجود داره ولی من سایت www.onlinefontconverter.com رو بهتون پیشنهاد می دم که خیلی خوبه .

وقتی عضو سایت شدید و وارد اکانتتان شدید ، از منوی بالای سایت روی My fonts کلیک کنید . در اینجا می تونید فونت مورد نظرتون رو به فرمت های مختلف تبدیل کنید . فرض کنید من می خوام توی سایتم از فونت B Koodak استفاده کنم ، اگر فونت رو با فرمت ttf داشته باشم که هیچی ، اگر نداشته باشم و این فونت روی سیستمم موجود باشه ، توی درایو ویندوز می رم و از شاخه ی Windows\Fonts فونت B Koodak رو پیدا می کنم و اونو یه جای دیگه کپی می کنم .

حالا توی سایت روی گزینه ی  Select fonts کلیک کنید و فونت مورد نظرتونو باز کنید و صبر کنید تا آپلود بشه . بعد از آپلود شدن زیر اسم فونتتون مجموعه ای از فرمت ها وجود داره و همونجور که گفتم باید روی گزینه های eot ، svg ، woof کلیک کنید تا فونت به این فرمت ها تبدیل بشه . بعد از تبدیل ، ۳ فرمت ساخته شده رو دانلود کنید .

حالا مرحله ی اول که تبدیل فونت ها بود تموم شده و به سراغ CSS می ریم . اول ۴ تا فونت رو توی یک فولدر داخل سایتتون قرار بدید که نظم بیشتری داشته باشه . حالا فایل style قالب سایتتون و یا کد CSS اصلی سایتتون رو باز کنید و در ابتدای همه ی کد ها کد زیر رو بنویسید :

@font-face {
font-family: ‘b koodak’;
src: url(‘Fonts/BKoodak.eot’);
src: url(‘Fonts/BKoodak.eot?#iefix’)
format(’embedded-opentype’),
url(‘Fonts/BKoodak.woff’) format(‘woff’),
url(‘Fonts/BKoodak.ttf’) format(‘truetype’),
url(‘Fonts/BKoodak.svg#BKoodakRegular’) format(‘svg’);
font-weight: normal;
font-style: normal;
}

کد بالا رو من برای فونت B Koodak نوشتم و همونجور که توی خط دوم هم می بینید گفتم اسم این فونت b koodak هست . این یعنی اینکه هر جایی که توی سایتم فونت B Koodak رو نیاز داشته باشم ، سایت فونت رو از این قسمت شناسایی می کنه و نشون می ده .

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

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

پ.ن : اینم چند تا سایت که از این روش فونت سایتشون رو عوض کردن :

به اشتراک بگذارید
جودی فشن تی وی ۲ !

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

اپیزود دومش رو بلاخره ۲-۳ روز پیش تموم کردم و الانم آماده کردم که ببینیدش . همون روال اپیزود اولشو طی می کنه ولی با سوژه های جدیدتر .

اما نکته ی دیگه اینه که این انیمیشن رو با لوگوی جدید Olo Animation می بینید ! راستش خیلی وقت بود دلم می خواست انیمیشن هامو یه جا آرشیو کنم و به فکر یه سایت افتادم . کلی اسم به نظرم اومد تا بلاخره Olo رو به چند دلیل انتخاب کردم که دو تا از مهمتریناش اینان : دلیل اولش که خیلی خوشحالم کرد این بود که آدرس Olo.ir باز بود و تونستم ثبتش کنم . دلیل بعدیش حالت این اسم هست که شبیه صورت و چشمه . کلن اصلن به خود کلمه و معنیش کاری ندارم و این اسم رو برای این انتخاب کردم که حالت انیمیشن داره .

آدرسش رو هم همونجور که گفتم ثبت کردم ولی فعلن در دسترس نیست و دارم روی طرح سایت کار می کنم و معلوم نیست کی راه می افته . سعی می کنم تا عید راش بندازم ( البته قول نمی دم ) . فعلن این کانال ها رو براش ساختم تا از این طریق نمایششون بدم و بعدش به سراغ سایت برم :

خب حالا بریم سراغ اپیزود دوم جودی فشن تی وی ! اونو می تونید توی یوتیوب از طریق این لینک ببینید و یا توی ویمیو از طریق این لینک . اگرم نمی تونید از این راه ها ببینید می تونید از اینجا دانلود کنید و ببینید . امیدوارم که خوشتون بیاد و مثل اپیزود اولش دوست داشته باشین .

به اشتراک بگذارید
طراحی با اشکال هندسی در MotionStudio 3D

توی مقدمه ای که قبلن درباره ی MotionStudio 3D اینجا نوشتم ، توضیح دادم که این برنامه شامل چه قسمت هاییه و چی کار می شه باهاش کرد . توی این قسمت می خوام نحوه ی طراحی چندتا درخت ساده با اشکال هندسی رو یاد بدم . البته فقط نحوه ی طراحی و رنگ آمیزی سادش رو می گم و چیزی درباره بافت و نورپردازی و این چیزاش نمی نویسم . بعد از خوندن این مطلب می تونید با اشکال هندسی ، طرح های ساده ی دیگه ای مثل خونه ، در ، پنجره و … هم بسازید .

  • طراحی درخت

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

این درخت همونجور که می بینید از یک کُره و یک استوانه تشکیل شده و طراحیش خیلی سادست . وقتی نرم افزار MotionStudio 3D رو باز می کنید بکگراند پروژه مشکی هست . اول از همه اگه دوست دارید رنگ بکگراند رو عوض کنید از منوهای پنجره ی Attribute Panel روی Background کلیک کنید و رنگ مورد نظرتونو انتخاب کنید . من برای نمایش بهتر از سفید استفاده کردم .

حالا برای طراحی درخت از اشکال هندسی موجود در نوار Object Toolbar کُره یا Sphere را انتخاب کنید .

یک کُره در پروژه طراحی می شه . منوی پنجره ی Attribute Panel شما رو به Geometric Objects منتقل می کنه و توی اون قسمت مقابل Radius عدد ۲۰ نوشته شده . با تغییر این عدد می تونید ابعاد کره رو بزرگ یا کوچیک کنید . ( ما با همون مقدار ۲۰ طراحی می کنیم و نیازی نیست بزرگترش کنیم )

برای تنه ی درخت ، باز منوی اشکال هندسی رو باز کنید و استوانه یا Cylinder را انتخاب کنید . یک استوانه در پروژه ساخته می شه که احتمالن به خاطر تداخلش با کره نمی تونید اون رو ببینید ! برای اینکه استوانه رو به پایین کره بیاریم و تنه ی درخت رو بسازیم ، از نوار ابزار روی آیکون دست یا Move کلیک کنید . ۳ پارامتر X ، Y و Z در مقابل این آیکون وجود داره که هر سه تاش عدد ۰ رو نشون می ده . مقدار پارامتر Y رو کنم کنید و مثلن به -۱۰۰ تغییر بدید . می بینید که استوانه به زیر کره میاد و می تونید اون رو ببینید . با کم و زیاد کردن پارامتر Y می تونید جای ساقه رو مشخص کنید و دقیقن اون رو زیر کره قرار بدید .

حالا برای اینکه بالای تنه رو جمع تر کنیم تا شکل طبیعی تری بگیره ، از منوی پنجره ی Attribute Panel به قسمت Geometric Objects برید . در اینجا سه تا متغیر وجود داره . با تغییر متغیر Radius Top می تونید قطر بالای استوانه رو کم کنید و به شکل دلخواه برسید . متغیرهای بعدی هم به ترتیب قطر پایین و طول استوانست .

تا الان یه درخت بی رنگ درست کردیم . به همین روش می شه درخت های دیگه رو هم طراحی کرد . همونجور که دیدید توی منوی اشکال هندسی ، انواع مدل های هندسی سه بعدی وجود داره که می تونید اون ها رو انتخاب کنید و توی مدل هاتون استفاده کنید ، همچنین دیدید هر شکل هندسی در قسمت Geometric Objects خودش یه سری متغیر داره که با تغییر اونها می شه ابعاد شکل رو تغییر داد . ابزار دست یا Move هم برای جا به جا کردن این اشکال در محیط استفاده می شه .

  • رنگ آمیزی اولیه

برای رنگ آمیزی طبیعی تر توی MotionStudio 3D از بافت استفاده می کنیم ولی من درباره ی بافت ها توی یک مطلب جدا خواهم گفت و فعلن روش رنگ آمیزی ساده رو می گم .

همونجو که می بینید توی پنجره ی Object Manager دو تا آبجکت ظاهر شده که یکیش کره ی شما و اون یکیشم استوانتونه . اول آبجکت کره رو انتخاب کنید . حالا از منوی پنجره ی Attribute Panel به قسمت Color بروید . در اینجا با دو قسمت Surface color و Specular color روبرو می شید . در قسمت Surface color می تونید رنگ شکل رو مشخص کنید که در اینجا رنگ سبز رو برای کره انتخاب می کنیم . اون ۳ تا درجه یا نوار لغزنده ای که زیر رنگ هست برای کم و زیاد کردن رنگ و تنظیماتی از این قبیل هست .

در قسمت Specular color می تونید رنگ نور بازتابی از جسم و شدت اون رو تعیین کنید . چون برگ درخت نور رو از خودش بازتاب نمی کنه و یه جسم کدره باید رنگ مشکی رو انتخاب کنیم تا هیچ بازتاب نوری صورت نگیره .

برای ساقه هم به همین روش می تونید از رنگ قهوه ای استفاده کنید و اون رو هم رنگ آمیزی کنید .

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

به اشتراک بگذارید
دکستاپتونو جم و جو کنید

صفحه ی دکستاپ منو هر وقت هر کی می بینه تعجب می کنه و می گه : چقدر شلوغه ! البته فکر کنم دکستاپ بیشتر کسایی که با کامپیوتر چند تا کار رو همزمان انجام می دن و می خوان همه چی دم دستشون باشه همینجوریه ! این شلوغی بعضی وقتا برای خودمم دردسرساز می شه و دنبال یه آیکون یا برنامه ی خاص باید کلی بگردم و معمولن هم با فشار دادن حرف اول کلمه ی اون شورتکات ( Shortcat ) پیداش می کنم و مستقیم نمی تونم ببینم که کجاست !

اما چند روزه که با Fences آشنا شدم و اینقدر به کارم اومد که گفتم به شما هم معرفی کنم . کار این برنامه دسته بندی آیکون ها بر اساس فرمتشونه و یه دکستاپ جم و جور براتون درست می کنه . با این برنامه می تونید فایل ها و فولدرای دکستاپتون رو دسته بندی کنید و هر دسته رو توی هر جایی از دکستاپتون بزارین . البته خوبی این برنامه اینه که جایگزین دکستاپ نمی شه ! فقط یه سری پنجره به دکستاپتون اضافه می کنه و بهتون اجازه می ده توی هر پنجره طبق دسته بندی ای که تعریف کردین آیکوناتونو اضافه کنید . دکستاپتونم سر جاشه و می تونید آیکون های مهم ترو توی همون دکستاپ بزارین و به اون پنجره ها منتقل نکنید .

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

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

به اشتراک بگذارید
ایمیلتون رو توی کادر زیر وارد کنید و عضو خبرنامه ی جنتلمن بشید تا همیشه آخرین مطالب رو توی ایمیلتون بخونید :
اگه نمی خواید از طریق ایمیل جنتلمن رو دنبال کنید راه های دیگه ای هم برای اشتراک هست !
آرشیو ماهانه
برچسب ها
لینک های خوشمزه