पिक्सेल फोंट डिजाइन करने में क्या विचार हैं?


14

मैं एक गेम के लिए मोनोस्पेस पिक्सेल फोंट डिजाइन कर रहा हूं, और अब तक मैं केवल बहुत छोटे आकार (सबसे बड़ा मैंने 5x9 प्रबंधित किया है) के साथ काम करने में सक्षम रहा हूं, क्योंकि उन लोगों के लिए प्रयास करना और ठीक करना सबसे आसान है। अक्सर परिणाम मैं 7x13 के रूप में छोटे आकार के लिए के साथ आते हैं सभी अवरुद्ध और unappealing हैं।

मैंने कुछ अन्य पिक्सेल फोंट का विश्लेषण किया है, और अधिकांश रेखांकन अपील करने वाले लोगों ने बहुत सारे वैकल्पिक विचार किए हैं जो मैंने कभी नहीं सोचा होगा, जैसे कि पूरे वर्गों को केवल तिरछे जुड़े बनाने के लिए।

क्या कोई विशेष ब्लॉक आकार हैं जो पिक्सेल फोंट डिजाइन करने के लिए "इष्टतम" हैं? क्या कोई विशेष पिक्सेल प्लेसमेंट हैं जिन्हें मुझे ध्यान में रखना पड़ सकता है? क्योंकि कभी-कभी जब मैं एक रेखा खींचता हूं जो केवल 11 पिक्सेल लंबी होती है (या ऐसे छोटे आकारों में चीजों को प्रतिच्छेद करती है), तो यह एक बार ज़ूम आउट करने के बाद कुछ और जैसा दिखता है।

जवाबों:


11

पिक्सेल फोंट छोटे प्रिंट फोंट से बहुत भिन्न नहीं होते हैं जब आप इसे नीचे ठीक करते हैं *। एक बड़ा अपवाद यह है कि आप जानते हैं कि मध्यम पिक्सेल फोंट के साथ क्या करेगा - एक बहुत बड़ा लाभ।

वास्तव में एक आदर्श पिक्सेल ग्रिड नहीं है, प्रति से। जाहिर है एक बड़ा ग्रिड आपको काम करने के लिए अधिक जगह देता है। सबसे छोटे प्रकार जिन्हें मैंने सफलतापूर्वक देखा है वे 7px डिज़ाइन हैं। जो गिलेस्पी के मिनीफोन्स डिजाइन आपको लेगिबिलिटी दहलीज पर डिजाइनिंग को समझने में मदद करेंगे। यहां एक और सवाल उन सूक्ष्म डिजाइनों से जुड़ा है और आपको आगे का संदर्भ दे सकता है।

कहा से शुरुवात करे

हर डिजाइन समस्या एक बाधा के साथ शुरू होती है। एक अच्छे फ़ॉन्ट के साथ यह [आमतौर पर] इच्छित उपयोग है। आपके पिक्सेल फ़ॉन्ट को कहाँ फिट करने की आवश्यकता है? क्या आपके खेल को आसानी से पढ़े गए पाठ से लाभ होगा या पाठ को रास्ते से बाहर रहने की जरूरत है और केवल जरूरत पड़ने पर "निर्णायक" के लिए उपलब्ध होना चाहिए?

आपको यह स्पष्ट करने की आवश्यकता होगी कि आप एक कम मामला चाहते हैं या नहीं। अपेक्षाकृत सरल आकार और एक्सटेंडर की कमी (आधार रेखा के नीचे और टोपी की ऊंचाई से ऊपर) की वजह से एक सभी अपरकेस फ़ॉन्ट एक छोटे ग्रिड में फिट हो सकता है। लेकिन लोअरकेस भी काफी छोटा हो सकता है: गिलेस्पी के मिनक्स प्रदान करते हैं और जो मैं सबसे छोटी उचित लोअरकेस वर्णमाला पर विचार करता हूं उसके लिए उत्कृष्ट संदर्भ बिंदु प्रदान करता हूं।

मिंक्स लगभग उतना ही छोटा है जितना कि लोअरकेस जाता है

विवरण

आप सबसे अच्छे पिक्सेल फोंट में भी कुछ नोटिस करेंगे: जब आप करीब आते हैं तो वे भयानक दिखते हैं और उनका पता लगाने की कोशिश करते हैं। वे "कथित" होने के लिए होते हैं, यही डिजाइन में अंतराल को मस्तिष्क द्वारा भरा जाता है। तो 45 डिग्री से संरेखित दो वर्ग एक विकर्ण रेखा बन जाते हैं। कभी-कभी ग्रिड में एक छेद दो मोटे स्ट्रोक के बीच "पतली" रेखा होती है।

दूर से करीब डिजाइन : यह पिक्सेल फ़ॉन्ट डिजाइनर की चुनौती है। दूसरे शब्दों में, आप अपने आकृतियों को हास्यास्पद रूप से बंद दूरी पर बनाते और संशोधित करते हैं, जबकि यह सामान्य आकार में देखे जाने पर कैसा दिखेगा।

इस भ्रामक स्थिति में कंप्यूटर हमारा मित्र है: बस 100% दृश्य के साथ एक दूसरी खिड़की खुली रखें ताकि आप देख सकें कि आपका डिज़ाइन वास्तव में कैसा दिख रहा है। इस "वास्तविकता दृश्य" के लिए चारों ओर एक दूसरा मॉनिटर रखने से चीजें बहुत अधिक सुविधाजनक हो जाती हैं।

लोअरकेस को बनाना

चूंकि आपने 6 x 12 पर निचले मामले की आवश्यकता का उल्लेख किया है ...

यहाँ एक त्वरित उदाहरण है जो मैंने उस आवश्यकता के साथ विशिष्ट विचारों को स्पष्ट करने के लिए एक साथ फेंका।

मुझे माफ कर दो, यह एक मोटा चित्रण है

शुरुआत के लिए, मैंने आपकी ऊंचाई से एक पिक्सेल काटा। इस तरह के छोटे आकारों में काम करते हुए, आप देखेंगे कि व्यापक चरित्र वाले निकाय से सुगमता लाभ होता है। कैप्स को केवल लोअरकेस की तुलना में थोड़ा लंबा होना चाहिए। 9px Verdana पर एक नज़र डालें कि कैसे एक विस्तृत शरीर को लाभ मिल सकता है।

प्रमुख आरोही के साथ लोअरकेस वर्ण अक्सर बेहतर पढ़ेंगे यदि वे टोपी की ऊँचाई से थोड़ा आगे बढ़ते हैं (जैसे bमेरे उदाहरण में)। मेरा उदाहरण अभी भी एक 11px लंबे शरीर पर रहने का प्रबंधन करता है। यह इस तथ्य से सहायता प्राप्त है कि लंबे समय के डिकेंडरों द्वारा सुगमता कम प्रभावित होती है: बस कुछ युगल पिक्सल वहां करेंगे।

यहां तक ​​कि इस प्रतिबंधात्मक ग्रिड पर, आप देख सकते हैं कि शैली के कितने अच्छे स्पर्श आपको पूरी तरह से अपंगता के बिना जोड़ सकते हैं।

बढ़े हुए, आप देख सकते हैं कि कैसे अजीब चीजें मिलती हैं

संदर्भ के लिए एक्स-ऊंचाई और शरीर पर प्रकाश डाला गया:

यहाँ छवि विवरण दर्ज करें

बढ़े हुए आकार पर, Mएक उल्लेखनीय विचार दिखाता है। सम संख्या ग्रिड के साथ आपके पास पिक्सेल के लिए कोई एकल मध्य-बिंदु नहीं है। यह आवश्यक रूप से एक बुरी बात नहीं है, आपको बस कुछ निर्णय लेने होंगे जो करीब होने पर अजीब लगते हैं। Mउदाहरण के लिए, दूसरा , बहुत अजीब लगता है जब ज़ूम इन किया जाता है, लेकिन वास्तव में स्क्रीन के आकार में सुधार होता है। उन प्रकार की निहित लाइनें अधिकांश पिक्सेल फोंट का एक महत्वपूर्ण घटक हैं।

बेशक, आपको पत्र रिक्ति के लिए आवश्यक अतिरिक्त स्थान को भी ध्यान में रखना होगा। आपके पास निश्चित रूप से वहां खेलने के लिए ज्यादा जगह नहीं है लेकिन यह एक महत्वपूर्ण हिस्सा है।

स्वामी को देखो

किसी भी आर्टफॉर्म के साथ, आप स्वामी को जो करने की कोशिश कर रहे हैं, उससे सबसे अधिक सीखेंगे। ऊपर मैंने जो उदाहरण दिए हैं, वे आपको जानकारी प्रदान करेंगे।

पिक्सेल फ़ॉन्ट उत्कृष्टता में एक क्लासिक केस स्टडी अंडरवेयर की यूनीबॉडी 8 हैउपन्यास "इटैलिक" एचीव्स यह प्रक्रिया में पूरे फ़ॉन्ट से समझौता किए बिना एक इटैलिक फ़ॉन्ट के कोण को लागू करने के लिए 45 ° संरेखण का उपयोग करके प्रभावी है।

एमिग शुरुआती मैक ओएस पर सुसान कारे के साथ अग्रदूतों में से एक था ।

* साइड नोट:
रेटिना इस बात का एक शानदार उदाहरण है कि छोटे आकारों में अप्रत्याशित के लिए एक प्रिंट फ़ॉन्ट कैसे खाता है, जैसा कि मैं इस पर विचार करूंगा कि यह पूर्ववर्ती बेल सेंटेनियल है

एच एंड एफजे की रेटिना


मैं वास्तव में एक कम मामला चाहते हैं। मैं चाहता हूं कि 6x12 का फ़ॉन्ट प्रयोग करने योग्य हो, कहो, एक कंसोल।
जो जेड

लेकिन हां, यह एक बहुत अच्छा जवाब है, बहुत सारे संसाधनों के साथ मैं आगे देख सकता हूं। धन्यवाद।
जो जेड

1
बहुत मामूली जोड़: फ़ोटोशॉप में एक नई विंडो (विंडो मेनू> अरेंज> डॉकनाम -1 के लिए नई विंडो) बनाकर और उनमें से किसी एक को 100% जूम साइज पर साइड में छोड़ कर फोटोशॉप में आसानी से प्राप्त किया जा सकता है। "प्रीव्यू कॉपी"
होरेटियो

1
कोई चिंता नहीं, आपको विचार मिलता है। मुझे नहीं लगता कि आपको अतिरिक्त ऊंचाई की आवश्यकता होगी। मैं बस चौड़ाई पर अतिरिक्त पिक्सेल जोड़ूंगा और 10 और 12 के बीच की ऊँचाई छोड़ दूंगा। कुछ पात्रों के साथ चारों ओर खेलें और देखें कि आप कहाँ समाप्त होते हैं।
सादे वस्त्र

1
वैसे, एक मानक परीक्षण शब्द जो रोमन वर्णमाला के मूल आकार के लिए जिम्मेदार है, हैमबर्गेफोन्स । कई प्रकार के डिजाइनरों के साथ शुरू होगा H, nऔर oआवश्यक विशेषताओं का एहसास दिलाने के लिए।
सादे वस्त्र
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.