راهنمای طراح برای اشاره به پیکسل

آیکون‌ها و تایپوگرافی با پیکسل کامل در میان جمعیت آنلاین برجسته هستند. بدیهی است که همه ما می‌خواهیم برای چنین کارهای ظریفی تلاش کنیم، اما گاهی حتی پس از تلاش، باز هم به چیزی کم‌تر دست می‌یابیم. Pixel Hinting یکی از مهارت هایی است که از ویژگی های خودکار استفاده می کند و نتایج آن را بهبود می بخشد. علیرغم وضوح فوق العاده بالای نمایشگرهای امروزی – مانند نمایشگرهای شبکیه چشم اپل – ما همچنان باید منحنی های صاف را “جعل” کنیم تا مبادا با یک آشفتگی پیکسلی مواجه شویم.

بسیاری از طراحان و توسعه دهندگان در حال حاضر بیشتر به سمت رویکردهای SVG و بردار حرکت می کنند. با پشتیبانی فقط روز به روز بهتر می شود. اما با این حال، راه حل های مبتنی بر برداری تا رسیدن به بلوغ کافی برای استفاده در تولید راه درازی در پیش دارند. SVG برای نمایش اشکال برداری عالی است، اما در تغییر اندازه آن اشکال چندان داغ نیست. بنابراین مانند هر چیز دیگری که وجود دارد، برای هر راه حل زمانی و مکانی وجود دارد.

 

بردارها چیست؟

بردارها اساساً نتایج نمایش ریاضی یک شکل هستند. وقتی چیزی را روی صفحه نمایش خود می بینید، به این دلیل است که رایانه شما آن اشیاء را رندر کرده و آنها را به پیکسل های صفحه نمایش شما متصل کرده است. با انجام این کار، رایانه شما همچنین تصمیماتی در مورد اینکه چه چیزی باید و چه چیزی نباید به صورت پیکسل کامل نمایش داده شود، گرفته است. به عنوان مثال، حرف بزرگ “D” هم یک خط کاملاً مستقیم و هم یک خط منحنی دارد.

همان‌طور که می‌بینید، خط منحنی روی D کاملاً پیکسل‌شده است. بنابراین برای جبران، زمانی که اشکال برداری ارائه می شوند، معمولاً برای ارائه ظاهری قوی تر، ضد مستعار هستند. به جای نمایش تنها پیکسل هایی که به طور کامل در طرح بردار قرار می گیرند، پیکسل ها به تدریج از بین می روند. این کار مغز شما را فریب می دهد تا خطوط صاف تری را روی اشکال منحنی ببیند که به طور کامل به شبکه پیکسل نمی چسبند.

در بالا می‌توانید ببینید که چگونه به «D» رندر شده چیزی داده می‌شود که نیم پیکسل نامیده می‌شود تا به حذف پیکسل‌های ناهموار کمک کند. با این حال، همین ویژگی یک مشکل را نیز ایجاد می‌کند: رایانه‌ها در تشخیص اینکه چه چیزی از نظر بصری جذاب است، افتضاح هستند. بنابراین در حالی که افزودن این نیم پیکسل‌ها باعث می‌شود گوشه‌های گرد فوق‌العاده به نظر برسند، خط داخلی بالا/پایین را نیز تار می‌کند. آنتی آلیاسینگ خودکار که هنگام رندر شدن یک شکل برداری رخ می دهد، در نهایت باعث می شود بیشتر قسمت های اشکال و تایپوگرافی عالی به نظر برسند، اما سایر قسمت ها را با کیفیتی حتی بدتر از آنچه که با آن شروع شده بود، می کند.

 

سلام، اشاره پیکسل.

اکنون که یک پس‌زمینه کوتاه در مورد اشکال برداری و نحوه کار آنها دارید، بیایید به کار واقعی بپریم. اشاره پیکسلی شامل حرکت دادن نقاط لنگر بردار برای قرار گرفتن بر روی مرزهای پیکسل به روشی زیباتر است. این خطوط مستقیم را کامل تر می کند، در حالی که هنوز نیم پیکسل ها را به منحنی ها واگذار می کند. به طور معمول، اشاره پیکسل در تایپوگرافی و اشکال برای تصاویر شطرنجی (آرم ها، نمادها، نام تجاری، و غیره) استفاده می شود. اکنون، مهمتر از همه، برای اینکه وکتور خود را به درستی تنظیم کنید باید به اندازه و شکلی باشد که می خواهید. هنگامی که پیکسل به کار خود اشاره کردید، چرخاندن یا تغییر اندازه آن می‌تواند – و احتمالاً – همه آن کار را با حذف خودکار دوباره آن حذف کند. قبل از شروع مطمئن شوید که تنظیمات زیر تنظیم شده اند (من از Photoshop برای این کار استفاده خواهم کرد):

• شبکه پیکسلی خود را روشن کنید (مشاهده > نمایش > شبکه، همچنین مطمئن شوید موارد اضافی در بالای منوی نمایش علامت زده شده باشد)
• مطمئن شوید که شبکه شما دارای یک خط شبکه در هر 10 پیکسل، با 10 زیربخش است. یا چیزی مشابه به طوری که بین هر پیکسل یک خط وجود داشته باشد.
• غیرفعال کردن snapping (مشاهده > علامت snap را بردارید). ما نمی‌خواهیم نقاط لنگر با افزایش 1 پیکسلی به هم برسند، بلکه می‌خواهیم نقاط را درون پیکسل‌ها جابه‌جا کنیم.

تایپوگرافی اشاره به پیکسل

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

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

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

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

همانطور که می بینید، “دریافت کردن” تقریباً تنظیم شده است، در حالی که “لمس” به همان صورت باقی می ماند. درست مانند کرنینگ، اشاره کردن به پیکسل بسیار بیشتر یک هنر است تا یک علم. نگاه تیزبین و تشخیص اینکه آیا کار پس از تنظیم بهتر به نظر می رسد یا بدتر، نیاز به یک نگاه دقیق دارد. اگر متوجه شدید که پیکسل‌های تایپی اشاره‌ای خشن، تکراری و ادامه کار با آن دارند، ناامید نشوید. اگر نتیجه شما همچنان پایین تر به نظر می رسد، همیشه می توانید لایه را حذف کرده و دوباره از نسخه اصلی کپی کنید. مدتی طول می کشد تا بخصوص تایپوگرافی عالی به نظر برسد، فقط به راه خود ادامه دهید و دیر یا زود کار سخت شما نتیجه خواهد داد.

اشکال بردار اشاره پیکسل

به طور کلی، اشکال اشاره‌ای پیکسل برای نمادها یا آرم‌ها رزرو می‌شوند. مجدداً، می‌خواهید قبل از شروع، مطمئن شوید شکل شما به اندازه و چرخشی است که می‌خواهید، زیرا تنظیم کردن آن بعداً می‌تواند تمام کار سخت شما را دور بریزد. تنظیم اشکال بسیار ساده تر است و نیاز به توجه کمتری برای جزئیات ذاتی دارد. همانطور که گفته شد، شکل‌های پیچیده‌تر بیشتر طول می‌کشد و تنظیم آنها سخت‌تر است، بنابراین بهتر است با چیز ساده شروع کنید.

در بالا، می‌توانید ببینید که فلش و دایره ما کمی دورتر از جایی که می‌خواهیم قرار دارند. نیم پیکسل های ایجاد شده توسط anti-aliasing باعث می شوند که در نتیجه کل شکل تار به نظر برسد. پس بیایید همه چیز را به هم بزنیم تا کمی بهتر روی شبکه بیفتد.

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

 

در نتیجه

با کار بالا، نتیجه تصویری واضح تر و حرفه ای تر به نظر می رسد. البته، می‌توانید این تکنیک‌ها را در موارد بسیار مهم‌تر از یک دکمه اعمال کنید.

در حالی که ضد الایاس خودکار انجام شده توسط رایانه شما قابل قبول به نظر می رسد، می تواند بهتر باشد. بنابراین وقتی نوبت به لوگو یا نمادها/تایپوگرافی های مهم به شکل شطرنجی می رسد، اشاره به پیکسل چیزی بیش از یک مهارت خاص است. تا روزی که همه از نمایشگرهای با تراکم پیکسلی بالا استفاده می کنیم، ضروری است.