دليل المصمم إلى Pixel Hinting
تبرز الأيقونات والطباعة المتميزة من بين الحشود على الإنترنت. من الواضح أننا جميعًا نرغب في السعي إلى تحقيق مثل هذا العمل المكرر ، ولكن في بعض الأحيان حتى بعد المحاولة ، لا نزال ننتهي بشيء قليل ... أقل. Pixel Hinting هي إحدى المهارات التي تأخذ ميزة تلقائية وتتحسن نتائجها. على الرغم من الدقة الفائقة لشاشات اليوم - مثل شاشات أبل في الشبكية - فإننا ما زلنا بحاجة إلى منحنيات "زائفة" خشية أن ننتهي بفوضى مختبرة.
يتحرك العديد من المصممين والمطورين الآن نحو أساليب SVG و vector القائمة ؛ مع الدعم فقط تتحسن يوما بعد يوم. ولكن حتى مع ذلك ، لا يزال أمامك حلول طويلة الأمد قبل أن تصبح ناضجة بما يكفي لاستخدامها في الإنتاج. يعد SVG رائعًا لعرض الأشكال المتجهة ولكن ليس ساخناً في تغيير حجم تلك الأشكال. لذا مثل كل شيء آخر هناك ، هناك وقت ومكان لكل حل.
ما هي ناقلات الأمراض؟
يتم بشكل أساسي تقديم المتجهات للتمثيل الرياضي للشكل. عندما ترى أي شيء على شاشتك ، يرجع ذلك إلى قيام الكمبيوتر الخاص بك بعرض هذه الكائنات وتقييدها بوحدات البكسل على الشاشة. عند القيام بذلك ، قام جهاز الكمبيوتر الخاص بك أيضًا باتخاذ قرارات حول ما يجب ، ولا يجب ، عرضه كوحدات بكسل كاملة. على سبيل المثال ، يحتوي الحرف الكبير "D" على خط مستقيم تمامًا وخط منحني.
كما ترون ، من دون أن تنحني يكون الخط المنحني على "D" متقطعاً بشكل كامل. لذلك للتعويض ، عندما يتم تقديم أشكال المتجهات ، فإنها عادة ما تكون غير مستعصية لتوفير مظهر أكثر قوة. فبدلاً من عرض وحدات البكسل التي تقع ضمن مخطط الخطوط المتجهة بالكامل فقط ، يتم تظليل وحدات البكسل بشكل تدريجي. هذه الحيل دماغك في رؤية خط أكثر سلاسة على الأشكال المنحنية التي لا تنزلق إلى شبكة بكسل بشكل مثالي.
يمكنك أن ترى أعلاه كيف يتم إعطاء ما يسمى "D" ما يسمى نصف بكسل للمساعدة في إزالة بيكسل خشنة. ومع ذلك ، فإن هذه الميزة نفسها تطرح مشكلة أيضًا: فالأجهزة مروعة في معرفة ما هو جذاب بصريًا. عند إضافة هذه البكسلات النصفية ، تجعل الزوايا الدائرية تبدو رائعة ، كما أنها تجعل المظهر الداخلي العلوي / السفلي يبدو غير واضح. وينتج عن التعرية التلقائية التي تحدث عندما يتم تقديم شكل متجه ، مما يجعل معظم أجزاء الأشكال والطباعة تبدو رائعة ، ولكنها تترك الآخرين في نوعية أسوأ مما كانت عليه.
مرحبًا ، تلميح بالبكسل.
الآن بعد أن أصبحت لديك خلفية قصيرة عن أشكال المتجهات وكيف تعمل ، دعنا نقفز إلى العمل الحقيقي. يتضمن التلميح بالبكسل تحريك نقاط ربط vector للراحة على حدود البكسل بطريقة أكثر جمالية إرضاء. جعل هذه الخطوط المستقيمة أكثر مثالية ، في حين لا تزال ترك نصف بكسل إلى المنحنيات. في الغالب ، يتم استخدام تلميح البكسل على الطباعة والأشكال للصور النقطية (الشعارات ، الرموز ، العلامات التجارية ، الخ). الآن ، والأهم من ذلك ، من أجل ضبط ناقلات الخاص بك بشكل صحيح يجب أن يكون في الحجم والشكل الذي تريده. وبمجرد أن تلمح البكسلات إلى عملك ، فإن الدوران أو تغيير الحجم قد يؤديان ـ وربما على الأرجح ـ إلى التخلص من كل هذا العمل عن طريق منعه مرة أخرى تلقائيًا. قبل البدء ، تأكد من ضبط الإعدادات التالية (سأستخدم Photoshop لهذه المهمة):
- قم بتشغيل شبكة البيكسل الخاصة بك (عرض> إظهار> الشبكة ، تأكد أيضًا من أن الإضافات محددة فوق قائمة Show)
- تأكد من أن الشبكة تحتوي على خط شبكة كل 10 بكسل ، مع 10 تقسيمات فرعية. أو شيء مماثل حتى يكون هناك خط بين كل بكسل.
- تعطيل الانجذاب (عرض> إلغاء الغلق). لا نريد أن تلتقط نقاط الربط بزيادات بمقدار 1 بكسل ، فنحن نريد نقل النقاط داخل البكسل.
Pixel hinting typography
تختلف طريقة عمل الأشكال مقابل الطباعة اختلافًا طفيفًا ، لذا سأساعدك في كلا الاتجاهين. من الناحية المثالية مع الطباعة ، تحتاج إلى تحديد نوعك قبل أو أثناء عملية التلميح. بغض النظر ، يجب أن تكون تلميحات البكسل واحدة من آخر الأشياء التي تقوم بها.
أولاً ، حدد الطباعة التي تريد تمييزها بالبكسل وإنشاء نسخة من الطبقة ، ثم قم بتحويل تلك الطبقة إلى شكل.
يمكنك أن ترى أن النص يقع خارج الشبكة بشكل محرج ، سواء على المحور الأفقي أو الرأسي. لإصلاح هذا ، سنقوم برفق بتحريك نقاط الربط لكل حرف حتى تتماشى بشكل أكثر قربًا مع شبكة البيكسل الموضوعة. الهدف ، هو الحصول على خطوط الشكل قريبة ، إن لم يكن مباشرة ، خطوط الشبكة. قم بالتكبير لحث نقاط الربط بشكل أكثر دقة. أثناء القيام بذلك ، قم بالتكبير بشكل متكرر لضمان أن تبدو تعديلاتك على ما يرام.
أنت لا تريد أن تتطابق بدقة مع الشبكة ، لأن ذلك ينزع مزايا الصقل في المقام الأول. بدلاً من ذلك ، حاول ببساطة إبقاء الأمور متناسقة - فقط اسمح بنصف بكسل على جانب واحد من كل محور. على سبيل المثال ، أسمح دائمًا بنصف بكسل إلى اليمين والجزء العلوي من الأحرف ، مع إجبار الحواف اليسرى والسفلية على التدفق إلى الشبكة.
كما ترون ، تم ضبط "الدخول" تقريبًا ، في حين أن "اللمس" لا يزال كما هو. تمامًا مثل تقنين الأحرف ، فإن hinting البكسل هو أكثر من مجرد حرفة من العلم. يأخذ عينيه حريصين على النظر وتحديد ما إذا كان العمل يبدو أفضل أو أسوأ بعد التعديل. لا تحبط إذا وجدت بكسل مطبعي يلمح الخام ، وتكرار والعمل المستمر معها. إذا كانت النتيجة لا تزال تبدو دون المستوى ، فيمكنك دائمًا حذف الطبقة ونسخها من المستند الأصلي مرة أخرى. يستغرق الأمر بعض الوقت للحصول على الطباعة على وجه الخصوص لتبدو رائعة ، فكل ما عليك فعله هو الاستمرار ، وعاجلاً أو آجلاً ، سيحقق عملك الجاد ثماره.
Pixel hinting vector forms
بشكل عام ، يتم حجز أشكال hinting بكسل للرموز أو الشعارات. مرة أخرى ، تحتاج إلى التأكد من أن الشكل الخاص بك بالحجم والتدوير الذي تريده قبل البدء في تعديله لاحقًا قد يؤدي إلى التخلص من كل عملك الشاق. ضبط الأشكال أسهل بكثير ويتطلب القليل من العين للحصول على تفاصيل جوهرية. ومع ذلك ، فالأشكال الأكثر تعقيدًا تستغرق وقتًا أطول ويصعب ضبطها ، لذا من الأفضل البدء بشيء بسيط.
أعلاه ، يمكنك أن ترى أن السهم والدائرة يجلسان قليلاً إلى ما نريدهما. تتسبب البكسلات النصفية التي تم إنشاؤها باستخدام الصقل في جعل الشكل بأكمله باهتًا نتيجة لذلك. لذلك دعونا نحرك كل شيء للسقوط على الشبكة بشكل أفضل.
هناك نذهب! من خلال ضبط نقاط الربط لتتماشى مع الشبكة ، ننتهي برمز أكثر حدة. من المهم أن نذكر أنه نظرًا لأن هذا الرمز عبارة عن دائرة ، يجب أيضًا عكس أي تعديلات في العرض مع الارتفاع أيضًا. أيضًا ، لا تنس أن تتأكد من أن شكل الشكل الداخلي جيد ومتسق كذلك. إذا نظرت إلى الصورة السابقة ، فستلاحظ أن الجوانب الداخلية للدائرة لا تنفصل عن نفسها.
فى الختام
مع العمل أعلاه ، فإن النتيجة هي صورة تبدو أكثر وضوحًا واحترافية. بالطبع ، يمكنك تطبيق هذه التقنيات على أشياء أكثر أهمية بكثير من مجرد زر.
على الرغم من أن مانع التعرية التلقائي الذي يقوم به الكمبيوتر يبدو مقبولاً ، إلا أنه قد يكون أفضل. لذلك عندما يتعلق الأمر بشعارك أو أيقوناتك / طباعتك الهامة في شكل خطوط المسح ، فإن التمييز بالبكسل هو أكثر من مجرد مهارة متخصصة ؛ حتى اليوم الذي نستخدم فيه جميعًا شاشات عالية الكثافة بالبكسل ، من الضروري.