استخدم الألعاب النارية لإنشاء تفاصيل رائعة على الأيقونات

في هذا المقال نستخدم برنامج الألعاب النارية لإنشاء بعض التفاصيل على صورة الأيقونة الجاهزة لجعل الأيقونة أكثر دقة وجمالاً!

هناك نقطتان رئيسيتان يجب ملاحظتهما عند استخدام Fireworks (المشار إليها فيما يلي باسم FW) لتصميم الأيقونات:

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

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

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

الخطوة 01

قم بقص الأيقونة التي تريد نسخها كمرجع وقفل الطبقة. يتم استخراج لوحة المسار الخاصة بـ FW هنا من Fireworks CS4، ولكن ليس لها أي تأثير على العمليات اللاحقة لأنني أستخدم جميع الوظائف المضمنة في CS3.

الخطوة 02

استخدم أداة Rounded Rectangle لرسم مستطيل دائري مشابه لعينة الصورة، واستخدم نقاط التحكم في الزوايا الأربع المستديرة لضبط نصف قطر الزوايا الدائرية، ثم اضغط على Ctrl+Shift+G لتقسيم الشكل.

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

لا يمكننا استخدام Stroke لإضافة حد خارجي إلى مستطيل، لأن الحد الافتراضي سيقتلك. إذا كان المستطيل الدائري الذي رسمته باستخدام أداة Rounded Rectangle يحتوي على حواف افتراضية بدون حدود، فقم بتوزيع العقد، وحدد المسار باستخدام أداة السهم الأسود، وانقر فوق Round Points to Pixels في لوحة Path لإرجاع جميع عقد المسار الموضع إلى تقاطع البكسل (يمكنك أيضًا استخدام أداة السهم الأبيض لتحديد عقدة لتوجيه فردي).

الخطوة 03

انسخ المستطيل المستدير الكبير وضعه على الطبقة العليا. استخدم السهم الأبيض ومفاتيح Shift + الأسهم للحصول على مثلث مقلوب، ثم املأ المثلث المقلوب العلوي بالتدرج الخطي؛ واملأ المثلث المقلوب السفلي باللون البني الصلب تعيين ريش 1px.

الخطوة 04

استخدم الأسهم البيضاء لتحديد العقد الموضحة في المنتصف، ثم استخدم مفاتيح أسهم لوحة المفاتيح للتحرك لأسفل بمقدار بكسلين لجعل المظروف يبدو أطول (لأن الرمز الفردي هنا غير مقيد بالنمط العام).

الخطوة 05

اقلب المثلث المقلوب المملوء بالتدرج المرسوم عموديًا مسبقًا، وقم بعمل نسخة منه، ثم ضعه كما هو موضح في الصورة أدناه. يتم الفصل بين المثلثين المقلوبين بما يزيد قليلاً عن 1 بكسل من الأعلى إلى الأسفل. يمكنك استخدام أداة السهم الأبيض لتحديد العقد الأربع فوق المثلث المقلوب ذو اللون البني الداكن، واسحب الماوس بالخط المساعد لتحريك العقد لأعلى بمقدار 0.3 إلى 0.5 بكسل، وهذا سيجعل اللون البني الداكن يبدو أقل ضبابية أولاً (ثم مرة أخرى، تخلى عن فكرة استخدام Stroke للحدود في أسرع وقت ممكن، هذا ليس فوتوشوب).

الخطوة 06

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

نقوم بتحديد ونسخ المستطيل السفلي المستدير مرتين بعد تحريك الموضع، نحصل على مستطيلين دائريين متباعدين بمقدار 2 بكسل عن بعضهما البعض، نستخدم طريقة طرح المسارين المستطيلين للحصول على مسار جديد، ونملأه بالقطع الناقص (أبيض 0). -100 شفافية)، وأخيرًا قم بتعيين وضع التراكب لمسار التمييز هذا على تراكب.

الخطوة 07

أضف تسليط الضوء على 1px إلى الأسفل.

الخطوة 08

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

الخطوة 09

بتغيير الخلفية مؤقتًا إلى اللون الأبيض، يمكننا أن نرى أنه بسبب التدرج المستخدم في المثلث المقلوب السابق، فاضت بعض وحدات البكسل قليلاً من جانبي المظروف.

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

الخطوة 10

دعنا نعود إلى الخلفية المظلمة، هل تشعر أن جوانب الظرف مسطحة بعض الشيء، فلنستخدم أشرطة أو تعبئة شعاعية لإضافة بعض التأثير.

الخطوة 11

بعد ذلك، قم بإضافة تمييزات أحادية البكسل إلى المثلثات العلوية والسفلية للمظروف نظرًا لأن عملية طرح المسار (Punch Path، يمكنك العثور عليها ضمن قائمة Modify – Combine Paths) قد تمت مناقشتها بشكل متكرر من قبل، فلن أشرحها. هنا كما هو موضح أدناه:

الخطوة 12

بنفس الطريقة، قم بإضافة الضوء إلى المثلث أدناه.

الخطوة 13

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

الخطوة 14

ثم أضف تسليط الضوء على 1px أدناه.

الخطوة 15

في هذه المرحلة، تكون الأيقونة قد اكتملت بشكل أساسي، وندخل الآن في مرحلة الصقل. نقوم بتحديد جميع الطبقات و"نسخها"، ثم نضغط سريعًا على Ctrl+Alt +Shift+Z لتسوية الطبقات إلى صور نقطية، ثم نضبط وضع التراكب على Overlay والشفافية على 60، حتى نتمكن من رؤية تشبع اللون تم تحسين الدرجة والتباين. هذه هي الطريقة المفضلة لدي شخصيًا للتلميع السريع، ولكنها غير قابلة للتطبيق في جميع الأوقات. في بعض الأحيان يتعين عليك استخدام مرشحات FW المدمجة يدويًا لضبط المعلمات مثل المنحنيات والتباين. والتشبع.

ينهي

التأثير النهائي (المثلث الموجود أسفل المغلف يستخدم المسار كإسقاط)