محتوا
به عنوان طراحان و توسعه دهندگان ، می دانیم که تایپوگرافی عالی چیزی فراتر از انتخاب یک قلم دلپذیر است. اما چه تکنیک های عملی ای وجود دارد که بتوانیم متن خود را به سطح بالاتری برسانیم؟ و چگونه می توانیم آن تکنیک ها را در یک ابزار طراحی مانند Sketch اجرا کنیم یا در وب سایت پیاده سازی کنیم؟
در این مقاله ، من می خواهم به سه روش برای تقویت بازی تایپوگرافی شما بپردازم: متن در مسیر ، ویژگی های قلم OpenType پنهان و شخصیت های خاص. این تکنیک ها هیجان انگیز هستند زیرا افراد کمی می دانند که چگونه از آنها در Sketch استفاده کنند و می توانند به حرفه ای تر بودن کار شما کمک کنند. من این مقاله را با یک صفحه وب اختصاصی از منابع و گالری نمونه های زیبا برای الهام گرفتن از کد و همراه کردن شما همراه کرده ام. به چند تایپوگرافی عالی نیاز دارید؟ خلاصه بهترین فونت های رایگان ما را ببینید.
ارسال پیام در یک مسیر
«متن در مسیر» زمانی است که رشته ای از متن دیگر بر روی یک خط صاف قرار نمی گیرد بلکه به جای یک خط یا شکل سفارشی می پیچد. این زمانی بیشترین تأثیر را دارد که مسیر یک دایره کامل یا یک قوس بسیار ظریف باشد. هرچه مسیر شما پیچیده تر یا منحنی باشد ، به احتمال زیاد متن شما کودکانه به نظر می رسد - به راحتی می توانید از این ویژگی استفاده کنید!
در Sketch ، متن در یک مسیر یک ویژگی قدیمی و کمی ریز است که تشخیص آن به تنهایی گیج کننده است. نکته اصلی این است که بفهمید مسیرهای برداری تحت هود چگونه کار می کنند ، که هم به خطوط و هم به اشکال بسته مربوط می شود. هر مسیر برداری دارای یک نقطه شروع و یک نقطه پایان و یک جهت برای کامپیوتر است
حرکت در حالی که ترسیم آن مسیر است.
وقتی از ابزار Sketch’s Vector (معروف به ابزار قلم) استفاده می کنید ، به راحتی می توانید به یاد بیاورید که از کجا شروع به طراحی کرده اید و مسیر سفارشی خود را در کدام جهت ترسیم کرده اید. اما برای اشکال مانند دایره - که به نظر می رسد یک مسیر مداوم باشد - هیچ راهی مشخص برای دانستن نقطه شروع یا جهت مسیر وجود ندارد.
با انتخاب لایه مسیر و سپس زدن کلید بازگشت وارد حالت ویرایش شوید. Sketch به طور خودکار یک نقطه بردار را در طول مسیر انتخاب می کند ، و این همان نقطه شروع شما است. اگر کلید Tab را بزنید ، Sketch نقطه بردار بعدی را انتخاب کرده و مسیر را طی می کند (و بنابراین نشان می دهد).
این برای متن موجود در مسیر مهم است زیرا جهت مسیر جهتی است که متن شما به آن حرکت می کند. اگر مسیر از چپ به راست حرکت نکند ، متن شما به صورت وارونه ظاهر می شود. برای تغییر جهت مسیر خود ، به "Layer> Paths> Reverse Order" در نوار منو بروید.
اکنون مسیر شما آماده است ، وقت آن است که آن را با لایه متن خود مرتبط کنید. لایه متن باید مستقیماً بالای لایه مسیر در لیست لایه ها باشد و من پیشنهاد می کنم این دو لایه را گروه بندی کنید تا اطمینان حاصل کنید که این تغییر نمی کند. لایه متن خود را انتخاب کنید ، سپس به "Type> Text on Path" بروید. در مرحله بعدی ، برای جابجایی مجدد لایه متن در اطراف بوم خود ، بکشید تا متن دقیقاً همان جایی که دوست دارید در طول مسیر قرار بگیرد.
نکات برتر
این می تواند کمی طول بکشد ، زیرا به نظر می رسد موقعیت لایه متن ارتباط کمی با محل ظاهر شدن آن در مسیر دارد. علاوه بر این ، موتور رندر Sketch هنگام کار با متن در یک مسیر ، ممکن است دست و پا کند ، به نظر می رسد که متن را در مکان های عجیب برش می دهد. با بزرگنمایی و کوچک کردن سریع ، این اشکال ارائه به طور معمول برطرف می شود.
آخرین نکته برای کار با متن در مسیر: متوجه شدم که این ویژگی وقتی مسیر مانند خط باز باشد ، به جای اینکه مانند یک دایره بسته و مداوم باشد ، بهترین عملکرد را دارد. ابزار Sketch’s Scissors در آنجا به شما کمک خواهد کرد ، و من یک مقاله کامل در مورد نحوه استفاده از آن نوشتم.
در وب سایت خود ، می توانید متن را در یک مسیر با استفاده از عنصر SVG پیاده سازی کنید. Sketch در حال حاضر از این ویژگی در SVG های صادر شده پشتیبانی نمی کند ، اما افزودن عنصر خود آسان نیست. در صفحه منابع الگوی CodePen را پیدا خواهید کرد که این کار را آسان می کند.
ویژگی های فانتزی فانتزی
هنگام انتخاب قلم و شروع به تایپ کردن ، فقط کسری از توانایی قلم را مشاهده می کنید. کلاه های کوچک ، تابلوهای اختیاری و شخصیت های جایگزین - که اغلب به عنوان ویژگی های OpenType شناخته می شوند - تنها برخی از قابلیت های پنهان است.
اکثر مردم نمی دانند که ویژگی های OpenType در Sketch و حتی برنامه های دیگر در macOS مانند iWork موجود است. با استفاده از Sketch ، در لایه متن خود وارد حالت ویرایش شده و "همه را انتخاب کنید". بعد ، با رفتن به «View> Show Fonts» ، پنل پیش فرض macOS Fonts را باز کنید. نوار ابزار موجود در پانل Fonts شامل یک منوی نماد چرخ دنده در نزدیکی سمت چپ است که دارای گزینه ای به نام مرموز "تایپوگرافی ..." است. آنجاست که جادو اتفاق می افتد!
پانل تایپوگرافی نشان می دهد که کدام ویژگی های فونت فانتزی برای متن انتخاب شده شما وجود دارد. به عنوان مثال ، در بالا اغلب کادر تأیید "Rare Ligatures" را پیدا خواهید کرد که ترکیب نامه های تزئینی بیشتری مانند "Qu" یا "ity" را امکان پذیر می کند.
بسیاری از ویژگی های جالب چاپی وجود دارد که می تواند در یک فونت قرار گیرد ، اما در اینجا یکی دیگر از موارد مورد علاقه من وجود دارد: کلاه های کوچک. کلاه های کوچک مجموعه ای از حروف بزرگ کوچک هستند که به طور معمول هم قد با حروف کوچک "x" هستند. با استفاده از پانل تایپوگرافی می توانید تمام حروف کوچک را به حروف کوچک تبدیل کنید ، که برای زیرنویس های کوتاه یا سطر اول مقاله عالی هستند.
چیز هایی برای به یاد آوردن
اگرچه این ویژگی های قلم از داخل Sketch قابل دسترسی هستند ، اما می توانند کمی ریز باشند. این چیزی است که باید از آن آگاه باشید: اول ، وقتی در صفحه تایپوگرافی ویژگی ها را روشن و خاموش می کنید ، ممکن است لازم باشد لحظه ای صبر کنید یا قبل از انجام تغییرات ، بالای متن انتخاب شده بروید.
دوم ، اگر اندازه یا وزن قلم را با استفاده از Sketch’s Inspector تغییر دهید ، هر ویژگی چاپی فانتزی به طور پیش فرض بازنشانی می شود. من پیشنهاد می کنم این دو ویژگی را در پنل Fonts تنظیم کنید. تغییر سایر ویژگی های مربوط به قلم (مانند رنگ ، فاصله نویسه یا ارتفاع خط) در Sketch’s Inspector بر ویژگی های تایپی شما تأثیری نخواهد داشت.
پیاده سازی این ویژگی های فونت فانتزی در وب سایت شما به آسانی افزودن چند ویژگی CSS است که اکنون توسط همه مرورگرهای اصلی پشتیبانی می شود.
شخصیت های خاص
علاوه بر ویژگی های فانتزی مانند لیگاتور و کلاه های کوچک ، بسیاری از فونت ها حاوی شخصیت های خاصی مانند dingbats ، شکوفا و نمادها هستند. در تصویر ابتدایی این مقاله ، بطری ، نماد آفتاب و اشاره دست همه بخشی از فونت های مختلف است.
هنگام کار بر روی طراحی خود ، دو روش برای دستیابی به نویسه های خاصی وجود دارد که در یک فونت گنجانده شده اند. اولین مورد استفاده از برنامه Font Book داخلی اپل است که به شما امکان می دهد با کلیک روی نماد شبکه در نوار ابزار ، "Repertoire" هر فونت (شبکه حروف و حروف کوچک) را مشاهده کنید. همانطور که از رایج ترین نویسه ها (A-Z) پیمایش می کنید ، خواهید دید که مجموعه متشکل از لیگاتورها ، کلاه های کوچک ، دیاکتریک ها (علائم لهجه) و نمادهای خاصی را که طراح نوع با عشق برای افراد عصبی مانند ما ایجاد کرده است ، خواهید دید.
وقتی مکان نما را روی یک نویسه قرار دهید ، یک راهنمای کوچک با نام کاراکتر و مقدار Unicode مشاهده خواهید کرد. از همه بهتر ، می توانید آن شخصیت را از Font Book خارج کرده و به برنامه دیگری (مانند Sketch) که در آن متن ویرایش می کنید ، بکشید. قبل از کشیدن و رها کردن ، مطمئن شوید که در Sketch لایه متن شما در حالت ویرایش است - با نشانگر متن چشمک زده نشان داده می شود.
پنل شخصیت ها
Font Book تنها راهی نیست که می توانید به این نویسه های خاص دسترسی پیدا کنید. بیشتر آنها را می توان از طریق پنل Character وارد کرد. این پانل در Sketch و در کل macOS ، در پایین منوی ویرایش در نوار منو قابل دسترسی است (اکنون "Emoji & Symbols" نامیده می شود). اگر پانل Character کوچک به نظر می رسد ، روی نماد کوچکی که در گوشه بالا سمت راست قرار دارد کلیک کنید.
پانل شخصیتهای توسعه یافته قدرتمند است و به شما امکان دسترسی به تعداد بیشماری از نمادها ، علائم نگارشی و تصاویر را می دهد. کافیست روی یکی از این نویسه ها دوبار کلیک کنید تا آن را در کنار متن خود قرار دهید. مورد علاقه شخصی من عدد ("نه") است که بسیار زیبا تر از "#" و جمع و جورتر از نوشتن "شماره:" است.
برای شخصی سازی لیست دسته ها در نوار کناری ، روی نماد چرخ دنده در بالای پنل Character کلیک کنید. حتی می توانید یونی کد را به لیست اضافه کنید ، که به شما امکان می دهد تک تک هزاران کاراکتر سازگار با یونیکد را مرور کنید. به عبارت دیگر ، این تقریباً به هر شخصیتی که می توانید تصور کنید دسترسی پیدا می کند! همچنین کشیدن نویسه های خاصی که مرتباً از آنها در لیست علاقه مندی ها استفاده می کنم ، برای من مفید است که هر زمان که می خواهید از آن استفاده کنید ، دیگر نیازی به جستجوی آن نیست.
وقتی نوبت به اجرای طرح شما در وب می رسد ، درج کاراکترهای خاص آسان است. با استفاده از ارجاع به مقدار HTML مربوط به شخصیت یا با استفاده از محتوای تولید شده توسط CSS با مقدار hex هونیکس شخصیت ، می توان از هر کاراکتر Unicode در وب سایت استفاده کرد. در صفحه منابع برای یافتن سریع این مقادیر برای هر کاراکتر و وب سایت دیگری که نحوه پیاده سازی آنها در CSS را توضیح می دهد به یک وب سایت عالی پیوند داده ام.
نتیجه
همانطور که می توانید بگویید ، این مقاله صرفاً سطح هر مبحث را حذف می کند. به همین دلیل است که من بسیاری از منابع منابع را ذکر کرده ام! این مجموعه شامل گالری نمونه های زیبا ، فونت های رایگان انتخاب شده همراه با ویژگی های OpenType برای آزمایش ، فایل های پروژه Sketch من برای جدا کردن و بسیاری از وب سایت ها و الگوهای مفید دیگر است. حروفچینی مبارک!
این مقاله در اصل در مجله نت شماره 284. از اینجا بخرید
