كيفية جعل أيقونة الويب الخاص بك

في هذه المقالة ، سأقوم بفحص العلم وراء إنشاء رموز UI الناجحة قبل أن يعلمك كيفية إنشاء خط الرمز القابل للتضمين الخاص بك.

من تصميم الرموز الفردية لتحويلها ل @font-face تضمين ، وحتى الترخيص لهم للتوزيع ، سنستخدم فقط البرامج المجانية والخدمات عبر الإنترنت. ماذا عن ذلك؟ لن تحتاج إلى الاعتماد على أي من المعرفة الباطنية المطلوبة لإنشاء حروف أبجدية رقمية ناجحة ؛ مجرد تصميم لتصميم الأشياء التي قد تبدو صغيرة جدًا جدًا .

في نهاية المطاف ، يجب أن تختفي مع عملية صنع عناصر التصميم التي تمتد إلى ما وراء تصنيع الرموز البسيطة.

قبل أن نستمر ، يجب أن يقال شيء حول ما نحاول بالضبط achieve باستخدام الرموز في تصميماتنا في المقام الأول ، وما الذي يجعل أيقونة واحدة أكثر نجاحًا من الأيقونة التالية. النظرية قبل التطبيق. من أجل القيام بذلك ، يجب علينا النظر في دور الرمز كجزء من علم الأحياء.

ما الذي يجعل أيقونة جيدة؟

علم الرموز بالمعنى الأوسع ، هو دراسة أنظمة الإشارات ، وكيف نساهم في تكوينها وصيانتها ، وتأثيرها على فهمنا للعالم داخلنا ومن دوننا.

عندما تفكر في جزء من أعمال التصميم الخاصة بك من منظور ما يدل على - ما يقوله لجمهورك أو للمفاهيم التي يتذكرها لهم - أنت تفكر في تصميمك كسيسموتيك. على الرغم من أن علم الأحياء ، مثل اللسانيات ، يغطي اللغة ، فهناك العديد من الأشياء على موقع الويب التي "تقول" شيئًا بدون كلمات ، مثل الألوان والمحارف والأشكال التي نسميها الرموز . يجب أن يكون المرء حذراً من أن ما تقوله هذه الأشياء له بعد ثقافي قوي. في الصين يمكن أن يدل اللون الأحمر على الحظ السعيد ، في كثير من الدول الغربية ، يستخدم للدلالة على الخطر.

(على أساس صورة من قبل ايل البني )

مصطلح "أيقونة" له معنى خاص في مجال علم الأحياء. الرمز هو قطعة أثرية تدل على شيء من خلال تشابهه. خذ على سبيل المثال ، رمز دبوس الخريطة . كشكل يشبه دبوس الخريطة "الحقيقي" ، فإنه قادر على دلالة ذلك. في المقابل ، يضع دبوس الخريطة الحقيقي في ذهنه كل أنواع المفاهيم ذات المغزى . ومن بين هذه المفاهيم المجردة مثل الموقع وكذلك المفاهيم المجردة أقل ، مثل الخريطة التي قد تنتمي إليها الدبوس.

بعض الرموز ما يسمى ليست مبدع حقا. إن أيقونة RSS في كل مكان ، بنقطتها ومقطعتين دائريتين متحدة المركز ، لا تشبه المشاركة أكثر مما تشبه عبارة "Really Simple Syndication". تكوين الأشكال التي تشكل رمز RSS يشير إلى RSS بواسطة الاتفاقية وحدها؛ اتفقنا على أن هذا هو ما هم عليه. رمز RSS بشكل صحيح يسمى رمز RSS .

الآن ، آمل أن نكون قد أثبتنا أن رموز الويب الناجحة يجب أن تلبي أحد المعيارين التاليين أو كليهما:

تشابه قوي مع شيء حقيقي ، على سبيل المثال رمز الطباعة الذي يشبه طابعة حقيقية
التأسيس ، وبالتالي ، الألفة كرمز يمكن التعرف عليه داخل نظام الإشارات

خطوط الرموز تكتسب شعبية

لطالما اعتبرت الأيقونات طريقة جيدة لتحسين تصميمات واجهة المستخدم لأنها توفر اختصارًا بصريًا يساعد على فهم رسالة نصية بحتة. يتم توزيع صفحات صور الرموز في جميع أنحاء مجتمع تصميم الويب مثل السلع المهربة ، وكل مجموعة تعد بأن تجعل تصميمك أكثر لمعانا وأكثر إغراءًا وأكثر قابلية للنقر عليه مقارنةً بالآخر .

بالمقارنة مع الصور ، فإن فكرة استخدام الخطوط المضمنة للرموز هي فكرة جديدة نسبيًا. ومع ذلك ، فإنه هو الذي يكتسب قدرا كبيرا من الجر بسبب العديد من المزايا المتأصلة على الصورة (أو background-image ) طريقة. أنا كتب عن بعض هذه المزايا على مدونتي الصغيرة في أوائل سبتمبر. كريس كويير من الواضح أن لديها فكرة مشابهة ، مقدمة الفكرة إلى جمهور أكبر (أكبر ، كثير ) في وقت لاحق. بالاعتماد على المنشرين وغيرهم ، قمت بتجميع هذه القائمة الشاملة من الميزات:

يتم تغيير حجمها بسهولة دون تدهور (لأنها في الأساس ناقلات)
إعادة تلوين الرمز تافهة مثل إعادة تلوين النص. فمثلا، color: orange للحصول على أيقونة RSS
يتم تجميع العديد من الرموز في ملف واحد ، مما يستدعي طلب HTTP واحدًا فقط
كما يشير كريس ، فهي عبارة عن أشكال لها "بالضربة القاضية" شفافة تعمل في المتصفحات في وقت مبكر مثل IE6 (على عكس PNG alpha)
بالنسبة للرموز التي يجب أن تظهر بجوار النص ، فإن المحاذاة والتفاف غير مشكلات (لأنهما نص)
يمكنك تطبيق تأثيرات CSS3 عبر text-shadow و background-clip:text التي تحترم شكل الصورة الرمزية
على عكس SVG ، يسهل الوصول إلى الدعم عبر المستعرض

مشاكل

في كلمات كريس ، إن استخدام الخطوط للرموز فكرة جيدة ، فأنا أخبرك بذلك . ومع ذلك ، فإن الوضع الراهن فيما يتعلق باستخدام خط الرمز ليس مثاليًا. أولا ، معظم الخطوط الجودة المتاحة ، وتسمى أشياء مثل Pictos ، فيكو و Klepto و Cheetos و Ponyo و بحار القمر (ربما أكون قد حصلت على بعض هذه الأخطاء) ، يتم دفع مقابل الخطوط. في الواقع ، هذا يعني أن هناك مشكلتان حقيقيتان :

قد تضطر إلى التخلي عن المال
سواء أكنت مضطرا للتخلي عن المال أم لا ، سيكون عليك قبول عمل تصميم قذر لشخص آخر

بصرف النظر عن برامج الزاحف الآلية ، أفترض أن معظم مصممي الويب هم الذين سيقرؤون هذه المقالة. أنا مصمم نفسي ولا أعتقد أنني وحيد في الاستياء من فكرة الاضطرار إلى تسوية تصميمي الخاص من خلال الاعتماد على عمل شخص آخر. وبطبيعة الحال ، أنا أقل افتتانًا بفكرة الدفع مقابل الامتياز. أعرف الرموز التي أريد استخدامها وأعرف بدقة كيف أرغب في تصميمها حسب التصميم العام. اريد هذا التحكم .

بعد بعض البحث ، كنت في النهاية قدم إلى الاحتمالات من إنكسكيب محرر SVG الخط . باستخدام القليل من التدريب باستخدام Inkscape ومساعدة المحول عبر الإنترنت لتحويل خط SVG إلى TTF ، تمكنت من إنشاء "Heydings". هذا الخط موجود الآن في قائمة Simurai (كما هو مرتبط بمقالة Coyier). أنا لا أحاول أن أبيع لك خطي (إنه مجاني على أي حال) ، لكني أعتقد أن هذا الأمر يقدم دليلاً جيدًا على المفهوم :

جعل أيقونات الحروف مع Inkscape

إعداد إنكسكيب

دعونا نبدأ من قبل جارى التحميل وتثبيت Inkscape. يجب أيضًا استخدام قالب بداية خط الرمز ، الموجود في مجلد الموارد الخاص بـ هذا مستودع جيثب (المزيد على هذا المشروع GitHub في وقت لاحق). بمجرد فتح هذا الملف في تثبيت Inkscape الجديد ، يجب عليك إعداد مساحة العمل الخاصة بك عن طريق فتح النوافذ التالية من القائمة الرئيسية:

الهدف → FILL AND STROKE
الهدف → ALIGN وتوزيعها
النص → SVG FONT EDITOR

في جزء محرر SVG الخط ، انقر فوق "الخط 1" تحت "الخط". يجب أن تبدو مساحة العمل الخاصة بك الآن مثل لقطة الشاشة هذه:

تجدر الإشارة إلى أن خط الأساس لا يقع الدليل أسفل الحد السفلي من اللوحة القماشية عن طريق الخطأ: لأسباب معروفة على نحو أفضل لشخص آخر ، فإن الرموز الخاصة بك يجب أن تعلو قليلاً من أسفل اللوحة إذا كنت ترغب في مشاركة نفس خط الأساس مثل الخطوط المجاورة. لقد اختبرت هذا مع جورجيا ، Arial وعدد من الخطوط على شبكة الإنترنت.

جعل الصورة الرمزية الأولى

لتعريف الحرف الرسومي ، انقر فوق علامة التبويب الحروف الرسومية في جزء محرر SVG الخط ، ثم انقر فوق الزر إضافة حرف رسومي في الجزء السفلي من الجزء. لا يتضح على الفور عند أول عملية تفتيش ، ولكن إذا قمت بالنقر فوق الصورة الرمزية ("Glyph 1") فسيظهر حقل يسمح لك بإدخال الحرف الذي ترغب في تعيين الرمز الخاص بك إليه. سنقوم بعمل شكل نجمة بسيط أولاً ، لذا أوصيك بإدخال الحرف "s" أو "S" أو "*":

الآن بعد أن حددنا الحرف المرتبط بالحرف الرمزي ، نحتاج إلى إنشاء الصورة الرمزية نفسها. نظرًا لأننا نجعل نجمًا فقط هذه المرة ، يجب أن نختار أداة Stars and Polygons المفيدة من Inkscape من شريط الأدوات الأيسر ونرسم نجمة في اللوحة. ستلاحظ أن هذه الأداة تأتي مع خيارات تسمح لك بتغيير مظهر النجم. في المثال الخاص بي ، لقد اخترت 5 زوايا ، ونسبة تكلم 0.5 وقيمة مستديرة 0.1.

توسيط النجمة أفقيًا باستخدام لوحة Align and Distribute (التي قد تكون مخفية أسفل SVG Font Editor ) واسحب الشكل لأسفل لتتوافق مع الخط الأساسي. عند إيقاف تشغيل الشبكة ، يجب أن تبدو اللوحة كالتالي:

الصور الرمزية في خط الرمز الخاص بنا هي مجرد أشكال ؛ أشكال بلا ألوان أو طبقات أو تدرجات. لذا ، لجعل نجمنا مرشحًا شرعيًا لخطنا ، يجب علينا تحويله من كائن إلى شكل يستند إلى المسار. للقيام بذلك ، حدد النجمة واختر PATH → OBTING TO PATH من القائمة الرئيسية. الآن ، مع اختيار النجمة ، يمكننا الانتقال إلى محرر SVG الخط ، وتسليط الضوء على الحرف "s" القابل للتطبيق والضغط على زر الحصول على المنحنيات من التحديد :

عند إدخال "s" في حقل Sample Text ، يجب أن يظهر نجمك الآن كمعاينة ، مثل:

جعل الرموز أكثر تعقيدا

لقد جعلت الآن الصورة الرمزية لأحرف SVG القابلة للتحجيم الأولى. باستخدام خيارات من جزء Fill و Stroke ، يمكنك تعديل عقد المسار ودمج الكائنات والسكتات الدماغية ، ستتمكن من عمل تصميمات رموز أكثر طموحًا. لا أريد الخوض في برنامج Inkscape التعليمي الكامل لأن لدينا الكثير لتغطيته ، ولكن اتباع هذه القواعد البسيطة سيبقيك في وضع جيد:

التزم باستخدام الخطوط السوداء والتعبئات ، فقط لتذكيرك بأن الرموز هي مجرد أشكال ، وليست رسومات متجهة معقدة. تلوين الرمز ممكن في المنتج النهائي باستخدام CSS.
يجب تحويل جميع الكائنات والسكتات (الخطوط) إلى مسارات باستخدام إما PATH → OBTING TO PATH أو PATH → STROKE TO PATH
يجب دمج الكائنات المتعددة و / أو السكتات الدماغية المستخدمة في تكوين رمز رسومي واحد معًا باستخدام PATH → COMBINE (أو ، في بعض الحالات ، PATH → UNION)
لتقطيع الأشكال من الأشكال (مثل استخدام قطع ملف تعريف الارتباط) ضع الشكل الذي سيخلق "ضربة قاضية" على الشكل الرئيسي ، وحدد كليهما واختر PATH → DIFFERENCE. المناطق البيضاء على الأسود التي تشبه "ضربة قاضية" لن تكفي ، حيث ستكتشف عندما تضغط على الحصول على منحنيات من الاختيار انظر القاعدة 1.

إعداد الخط الخاص بك لتضمينها

تخيل أنك قد قمت بإنشاء عدد من الرموز المفيدة للخط الخاص بك بتكرار طريقة وضع الصورة الرمزية التي قمت بتوصيفها وحفظها كملف myicons.svg . الآن ، سترغب في إعداد مكتبة الرموز هذه لاستخدامها في صفحات الويب.

تحويل SVG إلى TTF

أول قياس يجب أن تتخذه هو تحويل خط SVG إلى تنسيق أكثر اعتيادية وتنوعا. TTF هو الشكل البارز للتركيب المحلي وكذلك التوزيع. كما يوفر قاعدة جيدة لإعادة التحويل @font-face المتطلبات. تتضمن الخدمات عبر الإنترنت التي تتيح لك تحويل الخطوط بين التنسيقات http://onlinefontconverter.com/ ، http://www.fontconverter.org/ و http://www.font2web.com/ . المفضلة الشخصية ، ومع ذلك ، هو http://www.freefontconverter.com/ لأنني لا أقف في طوابير ولم أكن أعرف أبداً أنها ستعيد أي خلل.

لن أرعيتك من خلال شرح كيفية استخدام هذا المورد. حقل تحميل الملف المتتالي ، حدد عنصر وزر تحويل عملاق التحدث عن أنفسهم ، حقا.

تحرير معلومات التعريف في الخط

الآن بعد أن حصلت على TTF في يدك ، أوصيك بتحرير بيانات التعريف التي تم إنشاؤها. إن إعادة تسمية الخط وربطه ووصفه حسب رضائك يجعله جاهزًا للتثبيت والتضمين والتوزيع . إنها أيضًا طريقة لإظهار أن الخط هو عملك الخاص. يتمتع القراء الذين يديرون Windows بخيار استخدام الصوت الكبير المخادع محرر خصائص خط مايكروسوفت أو في الأيام المجانية Typograf . بالنسبة لمستخدمي Apple و Linux ، أتوجه إلى هؤلاء الذين لديهم معلومات أفضل مما أقوم به لمساعدتك في التعليقات.

ومحرر خصائص الخط ولكن مهنيا للخدمة

ملاحظة هامة: على الرغم من أن محرر خصائص خطوط Microsoft يسمح لك بإضافة المؤلف والوصف ومعلومات الترخيص ، فلا يبدو أنه يسمح لك بتحرير البيانات الأساسية مثل اسم الخط واسم التذييل . هذه الحقول معطلة. إذا كنت تستخدم هذا البرنامج بعينه ، فستحتاج إلى تحديد وتحرير القيم المحظورة في شفرة SVG قبل تحويل TTF. افتح SVG الأصلي في محرر النصوص المفضل لديك (استخدمه المفكرة ++ ) وتعديل ما يلي:

اسم الخط: Found in tag، font-family صفة، عزا

اسم بوستسكريبت: وجدت في العلامة ، id صفة، عزا

الوصف: يجب عليك إضافة وصف (مؤلف ، ترخيص ، إلخ) في العلامة. يرجى ملاحظة أن هذا لا يساوي نص وصف TTF ولن يتم الحفاظ عليه من خلال التحويل ؛ سيكون عليك إضافة وصف TTF بشكل منفصل.

مما يجعل الخط يمكن تضمينه

بمجرد تثبيت TTF على النظام المحلي الخاص بك ومعاينته قليلاً للتأكد من أن أي شيء قد انتهى ، فقد حان الوقت لتشغيله عبر Font Squirrel @ مولد الخط - وجه . لجعل الكود الناتج ككفاءة وفعالية قدر الإمكان ، هناك عدد قليل من الخيارات الجديرة بالملاحظة في وضع الخبير في المولد:

Subsetting: يسمح لك خيار subsetting بتضمين الأحرف التي قمت بتفويضها فقط ، مما يقلل من حجم الملف.

إزالة تقنين الأحرف: ستظهر الرموز دائمًا في عزلة ، لذلك لا يلزم إجراء التجانب (إضافة معلومات بخصوص قرب الأحرف لبعضها البعض). سيؤدي هذا ، على نحو مزعوم ، إلى تقليل حجم الملف أيضًا.

WebOnly ™ : إذا كنت شخصًا إنجيليًا عن الأشخاص الذين يستخدمون الخط الخاص بك كما هو مطلوب - ولا يعودون إلى إخراج الصور من الصور الرمزية في Photoshonk - يمكنك تحديد هذا الخيار. وقد يناسب أيضًا خطة الترخيص الخاصة بك. سأغطي الترخيص الآن.

توزيع الخط الخاص بك

إذا كنت مهتمًا بإصدار الخط ، فيُعتبر أنه من الممارسات الجيدة منحه ترخيصًا. لن يحمل العديد من مواقع الخطوط الخط الخاص بك دون واحد. بما أننا استخدمنا برنامجًا مفتوح المصدر ومجانيًا لتصميم الرموز ، فمن المناسب أن نوزعها على هذا النحو.

هناك العديد من خيارات الترخيص المتاحة والتحقق منها في بعض الأحيان محير. ال رخصة جنو العمومية العامة مقبول تماما ، ولكن قد ترغب في النظر في SIL فتح الخط رخصة . تتمثل الميزة الرئيسية لهذا الترخيص في توفير اسم خط محجوز : يُسمح للمصممين الآخرين بتعديل الخط ، طالما أنهم يذكرونه بشكل مختلف. في الواقع ، هذا يعني أن الجرائم ضد تصميم الأيقونات لا يمكن تنفيذها "باسمك".

في حالة أي ترخيص ، يجب تضمين إصدار في ملف نصي ، بالإضافة إلى إدراج إشعار حقوق الطبع والنشر ورابط إلى عنوان URL الكامل للترخيص في meta في الخط. قم بزيارة صفحات الترخيص المعنية (المرتبطة أعلاه) للحصول على تعليمات أكثر تحديدًا.

نهاية المغلق spriting

لماذا تتوقف عند عمل الرموز العامة باستخدام خطوط SVG؟ مع القدرة على صنع أيقونات تأتي القدرة على صنع المزيد من الأشكال الخاصة بالموقع ، وعناصر العلامات التجارية والديكورات. مثل النقوش المغلقية ، يمكن الاحتفاظ بكافة هذه العناصر المرئية في ملف واحد ، مما يقلل من مكالمات الخادم إلى طلب HTTP فريد . بخلاف CSS sprites ، تكون العناصر قابلة لتغيير الحجم ولا تعتمد على إحداثيات الموقع ( background-position القيم) لعرضها بشكل صحيح. وهذا يجعلها أكثر ملاءمة بشكل كبير للتصميم سريع الاستجابة .

دعنا نتظاهر بأنني اخترت استخدام خط SVG لتغطية بعض عناصر التصميم الأساسية في غموضاتي steampunk -مثل مدونة . قد يبدو عرض جدول HTML بسيط لتصميمات المكونات شيئًا كالتالي:

واحدة من أفضل الأشياء في هذا النهج هي التنوع. على سبيل المثال ، يمكن استخدام شكل الترس الثاني من اليسار على هيئة تصميم نقطي صغير وزخارف خلفية عملاقة مستخرجة. التلوين سهلا مثل استخدامه color:maroon ، ولكن ليس هناك حاجة للالتزام بألوان مسطحة ؛ يمكن استخدام عدد وافر من تأثيرات CSS3 لإضافة نسيج وحاسة اللمس. للحصول على القليل من الإلهام لتبدأ ، اختبر هذا المعرض ممتاز من webfonts المحسنة CSS3 .

ملاحظة سريعة حول قارئات الشاشة

مشكلة واحدة في استخدام الخطوط لعرض العناصر المرئية بهذه الطريقة هو التأثير على قارئ الشاشة انتاج. سيشاهد زائر للموقع الذي يقرأ بصريًا التروس والسهام وما شابه ذلك ، ولكن قارئ الشاشة سيصر على قراءة الأحرف التي تحدد هذه التصميمات. بالنسبة إلى استخدامات عناصر الخط SVG المزخرفة ، أوصيك بالالتزام بطلب Coyier: قم بتعيين المتجهات إلى منطقة الاستخدام الخاص التكميلي من يونيكود. هذه الشخصيات لا ينبغي قراءتها من قبل القراء.

رمز تعاوني webfont

بصفتي معلم جافا سكريبت الخاص بي ، روبرت ، أشار لي في اليوم الآخر ، باستخدام خطوط SVG لإنشاء مجموعات رمز يوفر فرصة رائعة للتعاون. كما ترى ، فإن شفرة SVG - وهي عبارة عن شكل من أشكال لغة الترميز القابلة للامتداد - تتميز بأنها قياسية للغاية ويمكن قراءتها بسهولة. هو بالضبط نوع كود المصدر المناسب للتنمية باستخدام خدمة "الترميز الاجتماعي" مثل جيثب .

لقد ترددت الفكرة معي بسبب انعكاساتها السيميائية: إذا تم تحديد قابلية أيقونة ما بتوافق الآراء ، فمن المؤكد أن الإجماع يجب أن يلعب دوراً في تشكيله. من خلال التعاون على "نظام تسجيل" أيقونة لدينا ، يجب أن تظهر فقط التصاميم الأيقونية أكثر من أي وقت مضى. يجب أن نكون قادرين على إنشاء مفردات الرموز التي تنتمي بحق إلى المجتمعات التي يجب أن تعني شيئًا لها.

لقد قمت بإنشاء مستودع GitHub عام للمساعدة في تعزيز هذه الفكرة. مسمي مجتمع رمز الخط ، قاعدة كود المستودع ليست معقدة: فحص دقيق للبرنامج التعليمي Inkscape السابق وقراءة سريعة لل صفحة المشروع يجب أن يوفر لك كل ما تحتاجه للمشاركة. إذا كنت جديدًا على GitHub ، فحاول النظر إلى صفحات المساعدة أو تطلب من فني الحي الخاص بك (وهذا ما أفعله).

طباعة تصميم الويب الرموز الخطوط تصميم أيقونة خطوط الويب انكسكيب

كيف اصنع بنفسك أيقونة Webfont