25- إنشاء أيقونات icons باستخدام جمب

نشره Fahad في

تقريباً كل بيئة لسطح المكتب من الذين رأيتهم لها تطبيقات خاصة لإنشاء الأيقونات وعادة ما تكون تطبيقات رسم محدودة للغاية، في هذا الدرس القصير سنبين لكم كيف تستفيدون من GIMP في إنشاء أيقونات لسطح مكتبكم.

قبل البدء:

بالتأكيد يجب أن نتعرّف على بعض المفاهيم الأساسية قبل أن نبدأ:

أسماء الملفات والهيكل files names and structure


GIMP يمكنك من حفظ الملفات المضغوطة والعمل معها بشفافية، باستخدام تنسيق .xcf.  ومع ذلك ، وبما أننا نعمل مع ملفات صغيرة جداً، والضغط ببساطة لا يحفظ مساحة كافية وخصوصاً برامج إدارة الملفات مثل نوتيلوس nautilus لديها مشاكل مع خلق الصور المصغرة للصور المضغوطة لذلك من الأفضل إرفاق مع أية من ملفات xcf نسخة png(انظر إلى الصورة أعلاه).
Nautilus)(gnome-vfs)) لا يمكنه التعامل مع ملفات GIMP المضغوطة بعد.

اختيار لوحات الألوان:


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

لنبدأ:

عندما تكون مستعداً، قم بتشغيل برنامج GIMP من خلال: Applications -> Graphics -> GIMP Image Editorمن القائمة الخاصة بك أو كتابة gimp في سطر الأوامر، إذا كنت لم تستخدم GIMP من قبل، فقد يكون ترتيب النوافذ الافتراضي مربكاً بعض الشيء،ولكن الكثير من برامج الرسم مثل الفوتوشوب والبرامج الأخرى المشابهة تستخدم الكثير من المربعات والنوافذ.
حدد كائناً من القائمة File -> Dialogs لاختيار أي من النوافذ التي تريدها أن تبقى مفتوحة وأيها التي تريد أن تغلقها. لإنشاء أيقونة ربما تجد أن الأكثر ملائمة للاستخدام هو الإطار الرئيسي بالإضافة إلى مربع الطبقات واللوحات وبالتأكيد الصورة التي تعمل بها.
لإنشاء ملف صورة جديدة ،اضغط على Ctrl + Nوحدد الصورة على 48x48 بكسل(الحجم المعياري لأيقونة gnome)لأن العمل على مثل هذه pixmap الصغيرة يتطلب الكثير من التفاصيل، قم بالتكبير للعمل على كل بكسل بدقة، جرب التكبير 8:1 من خلال:      Image> View -> Zoom -> 8:1
في هذا التكبير على أية حال سوف نفقد الرؤية الكاملة للأيقونة لذا من الأفضل أن نبقي على نافذة إضافية مفتوحة، حتى تتمكن من رؤية أيقونتك بشكلها النهائي، لذا اختر: Image> View -> New view وذلك من قائمة سياق الصورة(السهم الصغير في الجانب الأيسر العلوي من الإطار)واستخدم التكبير 1:1 حيث يمكنك أن ترسم في وضع 8:1 وترى النتائج على الفور.
تأكد من إيقاف تأثيرات الزينة والديكور على وضع 1:1 وللقيام بذلك ركز على النافذة واضغط ctrl+t واختر
Image> View -> Toggle selection

بعض الحيل:

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

التنعيم Antialiasing

 


أحد الجوانب الأساسية من الصور النقطية هو التأثير السلبي للتعرج.
على الرغم من أن العديد من الأدوات مثل أداة الفرشاة تعمل بشكل جيد في الصور الكبيرة ،فهي ليست فعالة في حجم الأيقونة. وعلى وجه الخصوص، فرشاة 1X1  بكسل لا تعطي نتائج مثلما هو متوقع منها.
الحل هو تنعيم الحواف يدوياً، بعض الناس يفضلون العمل في دقة أعلى مع تنعيم الحواف بشكل كامل، ومن ثم تحجيم الصورة لحجم الأيقونة، ولكن الأيقونة تفقد النعومة والكثير من فوائد الحجم الكبير.  وفي النهاية يصبح الأمر ضروريا أن تعدل الصور يدويا. وفي معظم الحالات فإنه من الجيد البدء بمربع 48*48 ولا تلجأ إلى تحجيم الصورة.
وبقدر ما يبدو صعباً فإن التنعيم بشكل يدوي سهل وممتع لكن ما تحتاجه هو إعداد الشفافية والتعتيم لأداة قلم الرصاص. لنقل أننا بحاجة لرسم حد خارجي منعم ( مثل الصورة على اليسار)  حدد فرشاة 1x1 وحدد الشفافية لنسبة مثل 40%، و عندما تبدأ بالرسم بهذه الفرشاة باللون الأسود من خلال الضغط على المساحة البيضاء فإنها ستصبح رمادي فاتح وبعدة ضغطات إضافية تصبح أغمق وبهذه الطريقة سيمكنك خلق التحويلات بطلاقة بين الألوان الحدين ويمكنك تغيير اللون النشط من خلال ctrl MB اليساري أو عن طريق مبادلة الألوان مع ألوان الخلفية باستخدام اختصار (x )
إذا كنت تستخدم الطبقات للحصول على حرية أكبر في التجريب سوف تجد أن أداة الممحاة مفيدة للتنعيم كقلم الرصاص ( الصورة اليمين).تأكد من تفعيل الحواف الصلبة للحصول على دقة أعلى.

التظليل مع التدرجات اللونية

يمكنك استخدام التدرجات اللونية لتعزيز شكل الكائن. للكائنات المستديرة، اختر التدرج الشعاعي radial gradient، وللكائنات المنحنية ، اختر  الانحدار الخطيlinear gradient.  لملء السطوح فأنك ستريد استخدام تدريجات خطية في كل مرة تقريباً حتى عندما يفترض أن يكون السطح مسطحا فإن التدرج طفيف يضيف الواقعية.
تأكد من الإبقاء على تدرج خفيفا، على كل حال، لأن الفرق الكبير بين نقيضين، سوف يفسد التأثير.

الأضواء والظلال

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

مثال

في هذا الدرس الفنان Jakub Steine سيستعرض معظم التقنيات التي تكلمنا عنها في فقرة "بعض الحيل " أثناء رسمها أيقونة تلفزيون.

الشكل الأساسي:



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

التحويل إلى البلاستيك


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


الآن حان الوقت لإضافة القليل من العمق، وذلك من خلال خدعة تسليط الضوء من قسم يسمى الأضواء والظلال highlights and shadows استخدم قلم رصاص أبيض 1x1 بكسل لإنشاء الأضواء، وأسود لإنشاء الظلال، عن طريق ضبط تعتيم الفرشاة على 20%تقريباً وذلك للحصول على نتائج كما في الصورة أعلاه.

نمذجة الشاشة

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

جانب هام من جوانب الواجهات الزجاجية وهو الانعكاس، لجعل شاشة التلفزيون تبدو لامعة وعاكسة، قلص التحديد بمقدار بكسل واحد وأنشئ طبقة جديدة واختار أداة البخاخة وفرشاة متوسطة الحجم ضبابية وارسم انعكاس أبيض كما في الصورة أعلاه.
إذا كنت ترغب في إنشاء خطوط أفقية على الشاشة يمكنك استخدام التأثير المتداخلinterlace للقيام بذلك، أنشيء طبقة جديدة واجعل الخطوط الأفقية بيضاء من خلال:
Image> Filters -> Render -> Pattern -> Grid
وتأكد من ضبط نمط الطبقة إلى وضع التراكبOverlay.

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

نمذجة جهاز التحكم عن بعد


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



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

يمكنك التطبيق على أية صورة، وخاصة الصور الصغيرة، ويكون أسهل للفهم من خلال إضافة كائن أسود مع خطوط عريضة لتعزيز التباين، للقيام بذلك عليك استخدام عكس التقنية التي استخدمتها في إنشاء صورة التلفزيون المظللة مع خطوطها، أولاً انقر بالزر الأيمن على طبقةجهاز التحكم ثم اختر:
Layers -> Alpha to selection
أنشئ طبقة جديدة فارغة تحت طبقة التحكم عن بعد، وقم بزيادة حجم التحديد 1 بكسل، واملأ الاختيار مع الأسود.

GIMP قد لا يطور هذا الاختيار بشكل كامل، فعلى الأرجح يجب أن تغير النتيجة يدوياً، في هذه الحالة سوف نستخدم أداة المحو 1x1 بكسل، والتعتيم ما بين 60%و70%واختر رسم الخطوط المستقيمة draw straight lines وقم بتنعيم الخط الخارجي عن طريق الرسم بالقرب من حدود الكائن.

الآن لجعل الكائن أكثر واقعية، سنستخدم خدعة تسليط الضوء، استخدم أداة قلم الرصاص 1x1 بكسل، والشفافية منخفضة قرب 20%. النتيجة ستجعل الكائن واقعي جدا.

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

إضافة الوهج

للواقعية الإضافية يمكنك إضافة التوهج للتفلزيون. أنشئ طبقة جديدة فوق الشاشة لكن تحت جهاز التحكم عن بعد، ثم أنشئ تحديد مستطيل للشاشة، وزد حجمها بمقدار 6 بكسل واملأه باللون الأزرق، والآن قلص هذا التحديد بمقدار 3 بكسل واملأه باللون الأبيض وألغ التحديد من خلال ctrl + shift + A واختر:
Image> Filter -> Blur -> Gaussian Blur RLE by about 5 pixels

وفعل وضع التراكب overlay لإنشاء تأثير الشفافية.

الشكل النهائي:

الآن لديك الشكل النهائي، تلفزيون مع جهاز تحكم عن بعد.

الدرس الأصلي هنا.