البحث في الموقع

تعلّمنا في المقال السابق ما هو فن البِكسل Pixel Art وماهي أنواعه وأشهر استخداماته. في هذا الدرس سنتعلّم أساسيات الرسم بهذا الفن من نوعية غير-إيزمترك Non-Isomertic وهو النوع المسطّح البسيط بدون أبعاد متساوية أو شبه ثلاثي أبعاد بل رسومات عادية بسيطة تُظهر الموضوع المرسوم من جهة واحدة فقط. هناك عدة برامج يمكنها القيام برسم هذه النوعية من الرسومات، بعضها بسيط وسهل للغاية وبعضها احترافي ومخصّص لرسم هذه النوعية. أسهل وأبسط هذه البرامج برنامج الرسّام MS Paint من مايكروسوفت والذي يأتي عادة مع نظام التشغيل ويندوز Windows ولاستخدام هذا البرنامج يكفي أن نستخدم أداة القلم مع أصغر قياس لحجم الخط وتكبير المنظور إلى أكبر درجة وهي 800% لتتمكن من رسم رسومات بِكسل. وفي هذا الدرس سنتعلّم كيفية تخصيص الفوتوشوب لرسم رسومات بِكسل. بدايةً سنرسم شيئًا بسيطًا لفهم الفكرة الأساسية. افتح برنامج الفوتوشوب وأنشئ مستندًا جديدًا، عليك اختيار حجم العمل الذي سنرسمه، وبما أننا سنرسم بفن البكسل الصغير نسبيًّا فإن حجم العمل سيكون صغيرًا أيضًا، وفي هذه المرحلة سنرسم رسمًا صغيرًا جدًّا، لذلك اختر حجم 24x24 بكسل ولتكن الخلفية بيضاء. طبعًا يمكننا رسم رسومات بِكسل كبيرة وحتى ضخمة بالقياسات الكبيرة وستكون مذهلة ورائعة تلك الرسومات، ولكن رسمها سيستغرق وقتًا وهذا ما ستقوم به لاحقًا بعد أن تتعلم كيفية القيام بذلك. كما سنشاهد ستكون مساحة العمل صغيرة للغاية وسيكون الرسم بداخلها مستحيلًا لذلك سيتوجب علينا تكبير منظور العمل من خلال أداة المُكبّر أو بالضغط على أيقونة حجم المنظور أسفل يسار البرنامج والذي سيكون حاليًّا 100% لنجعله 800% على الأقل. وأنا في هذه الحالة هنا جعلته 1600%. الآن اختر أداة القلم والتي ستظهر بعد الضغط بالفأرة باستمرار على أداة الفرشاة ثم اختيار أداة القلم Pen Tool. لا يمكننا استخدام أداة الفرشاة لأنها تتميز بحواف ناعمة بينما تتميز رسومات البِكسل بحواف خطوطها ونقاطها القاسية والحادة تمامًا. سيصبح شكل المؤشر بشكل مربع وهو بحجم 1 بكسل حيث يجب أن نتأكد من أن حجم أداة القلم هو 1 بكسل من شريط أدوات أداة القلم. وللتأكد من حدّة وقساوة الحواف اجعل قيمة Hardness عند 100%. في البداية قد تجد صعوبة في فهم أين سيتم وضع كل نقطة ستقوم برسمها لذلك من الأفضل أن تقوم بإظهار الشبكة Grid حتى تكون الأمور واضحة أكثر وستقوم لاحقًا بالاستغناء عن هذه الخطوة حيث سيكون الأمر أكثر سهولة وستفهم كيفية العمل بدونها، لذلك فعّل الشبكة عبر القائمة View > Show > Grid أو بالاختصار Ctrl + ‘ وستظهر الشبكة على حقل العمل. قد تكون الشبكة غير منتظمة وتحوي مربعات فاتحة الحدود داخل مربعات داكنة الحدود، في هذه الحالة عليك بالذهاب إلى القائمة Edit > Preferences > Guides, Grid and Slices ثم ضع القيمة 1 في خانة Gridline Every وفي خانة Subdivisions وتأكد من أن وحدة قياس Gridline Every هي Pixels. في بعض الأحيان قد يقوم الفوتوشوب بتنعيم الحواف قليلًا لجعل الصورة تبدو بدقّة عالية ولتجنّب ذلك عليك بالذهاب إلى قائمة Edit > Preferences > General أو بالضغط على الاختصار Ctrl + K ثم ضع خيار Image Interpolation عند البند Nearest Neighbor (Preserve Hard Edges) وبذلك نحافظ على قساوة الحواف في كافة الظروف. الآن سنبدأ عملية الرسم. ابدأ برسم الخطوط الخارجية لشكل فاكهة ولتكن كمثرى على سبيل المثال. اتبع خطوات الرسم في الأسفل لتحصل على شكل الفاكهة المطلوب. حصلنا على شكل الفاكهة الخارجي والآن سنقوم بتلوين هذا الشكل باستخدام ذات الأداة أداة القلم مع تغيير اللون واختيار اللون المناسب. ورسم جميع المناطق الداخلية للفاكهة. شكل الفاكهة حتى هذه اللحظة سيبدو بهذا الشكل بدون خطوط شبكة (يمكنك إظهار خطوط الشبكة وإخفاءها بالاختصار Ctrl + ‘). وبالحجم الطبيعي ستبدو بهذا الشكل. تظهر بهذا الحجم وكأنها أحد الرموز التعبيرية المستخدمة في برامج المحادثة عبر أجهزة الهواتف المحمولة وهي تقريبًا بحجم مشابه لها. من الممكن اعتبار هذا الرسم جاهزًا في حال أردت رسم تصميم بِكسل مسطّح أو بسيط ولكن نستطيع جعل هذا الرسم أكثر جمالًا وروعة عبر إضافة آثار الظلال والإضاءة ما يضفي مزيدًا من الحيوية على التصميم وللقيام بذلك سنقوم باستخدام لون داكن أكثر قليلًا من لون الفاكهة الأساسي ثم سنرسم ظلالًا من جهة واحدة كما يلي. والآن سنقوم بوضع آثار انعكاس الإضاءة على الجهة المقابلة من الفاكهة عبر استخدام ألوان فاتحة أكثر من اللون الأساسي وقد نستخدم اللون الأبيض للتعبير عن شدة الإضاءة واللمعان في نقطة معينة. شكل التصميم بدون شبكة سيكون بهذا الشكل. والشكل النهائي بالحجم الطبيعي. طبعًا يمكن تعديل الحجم بما يتناسب مع رغبتك والهدف من التصميم بحيث يمكن استخدام هذا التصميم كرمز تعبيري لبرنامج محادثة أو كعنصر من عناصر لعبة ما تقوم ببرمجتها أو أي استخدام آخر ويمكن أيضًا إلغاء الخلفية بحيث تقوم بالرسم على مستند جديد بدون خلفية أو قص هذا الشكل من الخلفية بسهولة. هذا الدرس لتعلّم أساسيات تصميم رسومات Pixel Art من نوع Non-Isometric باستخدام برنامج الفوتوشوب وسيكون هناك دروس قادمة لرسومات أكثر تقعيدًا وأكبر حجمًا كذلك لدروس من نوعية Isometric الرائعة والممتعة. يمكنكم القيام برسومات مشابهة وإدراجها في التعليقات أسفل الدرس لنتشارك هذه الخبرة الجديدة.

سنحاول هنا أن نحيط قدر الإمكان بجوانب هذا الفن الرائع ورسوماته المذهلة عبر معرفة ماهيته، أنواعه، تطورّه، تاريخه وأهم البرامج المستخدمة في رسمه. وسنتعلّم لاحقًا كيفية رسم رسومات البكسل المتنوعة. ما هو فن البِكسل؟ فن البِكسل أو Pixel Art هو فن رسومات قديم يشبه من حيث المبدأ الحياكة الصوفية كالرسومات على الملابس الصوفية إلا أن بداية هذا النوع من الفنون بدأ مع بدء ظهور أجهزة اللعب والحواسيب حيث لم يكن بمقدور تلك الأجهزة القديمة عرض رسوميات معقدّة وكثيرة الألوان وثلاثية الأبعاد كما في يومنا هذا لذلك اعتمد مطوّرو الألعاب في ذلك القوت على هذا النوع الوحيد المتوفّر لرسم خلفيات وشخصيات الألعاب بألوانها البسيطة، وعلى الرغم من بساطتها في ذلك الوقت إلا أنها كانت رائعة وممتعة للغاية ولعّل ألعاب Pacman و Mario وStreet Fighters وKingKong وSonic أبرز ألعاب تلك المرحلة شاهد ومثال رائع على روعة تلك الرسومات في تلك الحقبة من الزمن. ويعتمد الرسم هنا على رسم النقاط الصغيرة بجانب بعضها بحيث تكون النقطة الواحدة بحجم بكسل واحد فقط ما يجعل هذه الرسومات دقيقة وصغيرة نسبيًّا بالنسبة إلى المقاسات المعتمدة في الأجهزة المتطوّرة في أيامنا هذه بينما كانت أكثر من كافية لأجهزة تلك الحقبة القديمة. لذلك عند الرسم بأي برنامج للرسم عليك تكبير منظور العمل إلى أكبر درجة ممكنة تستطيع معها التعامل مع نقاط البكسل بسهولة وعند العودة للحجم الطبيعي ستشاهد نتيجة العمل الذي قمت به. هذا مثال رسمته باستخدام برنامج الرسام Paint الموجود ضمن نظام الويندوز Windows حيث تظهر نقاط البكسل بوضوح عند التكبير وفي شكل الرأس الصغير تظهر النتيجة بالحجم الطبيعي. وكانت رسومات البكسل بسيطة جدًّا في البداية حيث اعتمدت نظام ألوان 8bit لتتطور إلى 16bit ومنها إلى أكثر وأكثر حتى أصبحت متطورة جدًّا لدرجة أن الرسومات الحديثة منها أصبحت تتضمن تدرجات لونية عادية بعد زيادة حجم العمل وعدد الألوان المستخدم. على الرغم من انتشار الرسومات عالية الدقة والرسومات ثلاثية الأبعاد إلا أن رسومات البكسل مازالت موجودة بقوة وبخاصة في ألعاب الأجهزة المحمولة كالهواتف الذكية وغيرها. ومن الممكن رسم هذه الرسومات باستخدام تقنيات وأدوات اعتيادية كأدوات برنامج الرسّام Paint والفوتوشوب Photoshop أو يمكن رسمها بدون أدوات وبشكل يدوي وهو ما ينتج إبداعًا مميزًا قد لا تستطيع الأدوات تقديمه. أنواعه: تم تقسيم رسومات البِكسل إلى نوعين: الإيزومِترِك Isometric: ويُطلق عليها اسم ثلاثي البعاد أو متساوي القياس أيضًا وهي رسومات بكسل تبدو بثلاثة أبعاد وتظهر فيها ثلاث جوانب للأشكال المرسومة ما يعطي انطباعًا بأنها ثلاثية الأبعاد وعادة ما تكون بمنظور جانبي بزاوية معينة وتكون غالبًا 30 درجة وتستخدم لرسم مناظير معينة لمواقع شهيرة أو افتراضية وفي بعض الأحيان لرسم خلفيات لعبة من هذا النمط وقد ظهرت بعض الألعاب التي تعتمد على هذا النمط من الرسوميات خصوصًا للأجهزة المحمولة كالهواتف الذكية فيما يتباهى الآن المصممون برسوماتهم المعقّدة والرائعة باستخدام هذا النمط. وهذه صور لبعض الألعاب القديمة التي تستخدم هذا النمط سلسلة ألعاب Age of Empires Diablo Transport Tycoon وهذه صور لبعض ألعاب الهواتف المحمولة تستخدم هذا النمط من الرسومات Pocket Harvest Zombie Commando وهذه بعض الرسومات لهذا النمط لبعض المصممين للمصممة Sylvia Flores Espinoza للمصمم Robert Podgórski للمصمم Sergey Kostik غير الإيزومِترِك Non-Isometric: وهو نمط رسومات بِكسل عادي والأكثر انتشارًا وهو الصورة بشكل مباشرة من جهة واحدة من الأمام أو الجانب أو حتى من الأعلى بدون زوايا وهو معروف في عالم الألعاب القديمة وأيضًا الحديثة الخاصة بمنصات الأجهزة المحمولة عادة. ولعل أشهر الصور والألعاب المعروفة التي تستخدم هذا النمط هو ألعاب ماريو وسونيك وغيرها بالإضافة إلى الألعاب الجديدة على منصات الهواتف المحمولة وهذه بعض الأمثلة Random Heroes 2 Sword Of Xolan وقد اشتهرت مؤخرًا هذه الرسمات كثيرًا في رسم الوجوه التعبيرية (سمايلات) وخصوصًا في رسم الأيقونات التي تعتمد بشكل كبير على هذا النوع من الرسومات وبخاصة أيقونات مواقع الإنترنت. ولتوضيح الفرق بين نوعي فن البيكسل إليك هذا المثال Non-Isometric Isometric وسنتعلّم في الدرس التالي كيفية تصميم رسومات بفن Pixel Art بنوعية Non-Isometric وكذلك في الدرس الذي يليه سنتعلّم كيفية تصميم نوعية Isometric. مصادر الصور: صور المصممين من صفحاتهم على Behance. صورة التلفاز التوضيحية من موقع ويكيبيديا تحت رخصة CC BY-SA 3.0.

سنتعلم في هذا الدرس كيفية تصميم لوحة لوجه طفل بأسلوب الفن الراقي الحديث WPAP ART وكما ترى في صورة النتيجة النهائية فإن اللوحة مفعمة بالألوان والأشكال المضلعة ما يجعلها مميزة وجميلة ومن السهل تصميم هذا النوع من الفنون، سنقوم بذلك في برنامج الإليستريتور. ما هو فن WPAP ART؟ هو فن متميز بإعادة رسم الوجوه بشكل خاص وبطريقة فنية مبتكرة ويمكن رسم شخصيات أو حيوانات أو حتى أشكال جامدة بهذا الأسلوب إلّا أن روّاد هذا الفن يقومون برسم الوجوه في الغالب. اختصار WPAP هو لعبارة Wedha’s Pop Art Potrait وذلك لأن هذا الفن منسوب باسمه بالكامل لمؤسسه الفنان المصمم وضاح عبد الرشيد وهو إندونيسي يستخدم الإليستريتور في التصميم وهذا الفن مميّز بكثرة ألوانه والمضلعات المتكسرة بحيث يبدو منبثقًا بطريقة ما من فن البكسل. وجميع اللوحات المصممة بهذا الأسلوب تعتبر تصاميم مسطحة. بكل الأحوال لا يحتاج إلى أية أدوات خاصة فقط برنامج الإليستريتور أو الفوتوشوب أو الإنكسكيب أو الكوريل درو أو أي برنامج قادر على رسم أشكال فكتور سيكون قادرًا على رسم هذه التصاميم. كيفية الرسم بأسلوب WPAP ART؟ سأعتمد في هذا الدرس على أسلوب مؤسس هذا الفن المصمم وضاح عبد الرشيد. سنحتاج إلى صورة أساسية لنقوم بتحويلها إلى لوحة WPAP ART لذلك حمّلت هذه الصورة المجانية لطفل صغير من موقع Flicker. افتح برنامج الإليستريتور ثم افتح ملفًّا جديدًا وهو بأبعاد 1067×1600 بكسل كما في الصورة التالية. وسندرج الصورة الأساسية عبر القائمة File > Place ثم نختار الصورة المطلوبة ونضعها بشكل تملأ لوح الرسم. وحتى نستطيع العمل فوق الصورة الأساسية بكل حرية سنقوم بقفل طبقة هذه الصورة من لوحة الطبقات. ثم سنقوم بإنشاء طبقة جديدة وهي الطبقة التي سنعمل عليها. يمكنك أن تستخدم أداة رسم المستطيلات Rectangle Tool لرسم أجزاء كثيرة من اللوحة وفي هذه اللوحة سنقوم بالرسم اعتمادًا على أداة القلم Pen Tool بالكامل. ابدأ برسم مسار حول الأجزاء الداكنة من العين وهي بؤبؤ العين بشكل موصول مع الرموش العليا. كما تشاهد فطريقة الرسم ليست دقيقة على الإطلاق بل هي تعبيرية وتجريدية أكثر بحيث ستشعر بالراحة والحرية أثناء الرسم وهو ما يجعل الرسم بهذه الطريقة سهلًا وممتعًا على عكس ما قد يبدو من خلال النتائج النهائية للوحات المصممة بهذا الأسلوب، إذ قد تبدو للوهلة الأولى معقدة وصعبة. من أهم مميزات هذا الأسلوب أن جميع خطوط الرسم مستقيمة فلا انحناءات فيها. فكما تشاهد في الصورة السابقة قمتُ برسم الرموش بشكل تقريبي فوق الرموش الأصلية كما أن حدود البؤبؤ مضلعة وليست دائرية. يمكنك في أي وقت أثناء عملية التصميم أن تقوم بإزالة إشارة العين من جانب طبقة الصورة الأصلية المقفلة في لوحة الطبقات لإخفائها والإبقاء فقط على طبقة التصميم لتشاهد كيفية ظهور التصميم والتعديل عليه إن اضطررت لذلك. قم بإزالة اللون من حدود الشكل والإبقاء فقط على لون التعبئة. الآن ارسم بياض العين بلون فاتح جدًّا وبنفس الطريقة عبر أداة القلم وبخطوط مضلعة فقط. والآن سننتقل إلى جفون العين وهنا سنبدأ بالإبداع بطريقتنا الخاصة حيث أننا لسنا مضطرين إلى رسم الجفن كله كجزء واحد كما فعلنا مع العين بل سنقوم برسم الجفون بعدّة أشكال مضلعة متداخلة ملونة بألوان مختلفة. ابدأ برسم الشكل الأول ولوّنه باللون الذي تريده. كما تلاحظ قمتُ برسم هذا الشكل متداخلًا مع أشكال العين وفوق بعض مساحة العين وذلك حتى لا أترك أي فراغات بين الأشكال. لهذا يجب علينا بعد الانتهاء من رسم كل شكل إرسال هذا الشكل الجديد خلف بقية الأشكال وذلك عبر الضغط على الاختصار ]+Ctrl+Shift في كل مرة أو بالذهاب إلى القائمة Object > Arrange > Send to Back والآن سنتابع بنفس الأسلوب بحيث سنرسم شكلًا جديدًا يكون متراكبًا قليلًا فوق الأشكال المحيطة المرسومة سابقًا لتجنب وجود أي فراغات في التصميم ثم نرسله للخلف وهكذا مع تغيير الألوان في كل مرّة. وسنتابع مع مراعاة بعض الأجزاء الأساسية في اللوحة الأصلية كالحاجبين بحيث سنقوم برسمها بشكل تقريبي مضلع وبلون داكن يمثّل وجودهما. أمّا باقي الأشكال الأخرى فستكون أيضًا متداخلة وملوّنة. ويمكنك في أي وقت أن تغيّر ألوان بعض الأشكال التي رسمتها في حال وجدتها غير متناسقة بالطريقة التي تريد رسم اللوحة بها. ولستَ مضطرًّا لرسم الأجزاء الكبيرة كالأنف والفم بشكل واحد كبير بل يجب أن يتم رسم عدّة أشكال بحيث تغطّي مساحة العنصر مع توضيح وجود هذا العنصر. هنا رسمتُ الأنف بشكلين منفصلين مع ترك المساحة الوسطى فارغة ما يجعلها تظهر في النتيجة النهائية باللون الأبيض بما أن لون الخلفية النهائي سيكون باللون الأبيض في هذا التصميم كما رسمتُ فتحتي الأنف بشكل منفصل أيضًا. يمكننا أن نرسم أشكالًا مضلعة رقيقة فوق منطقة الشعر للدلالة على اتجاه الشعيرات مثلًا أو قد يمكننا القيام بذلك فوق مساحات انعكاس الإضاءة على الشعر ولكنها في النهاية ستبقى أشكالًا مضلعة وغير منحنية، ولا ننسى تغيير الألوان. سنرسم الشعر بعدة أشكال متداخلة كما سنرسم الأذن أيضًا بعدة أشكال متداخلة مع مراعاة الشكل الأصلي والرسم فوق تفاصيل أجزاء العضو. نلاحظ أننا قمنا برسم الشعيرات الصغيرة قبل رسم كتل الشعر الكبيرة وذلك حتى لا تكون الأشكال الصغيرة خلف الأشكال الكبيرة لأننا نقوم بإرسال كل شكل جديد للخلف. ارسم الآن حلي الطفل. الدقة غير مطلوبة بحيث من الممكن أن نجعل الحلي على شكل مستطيلات فقط للتعبير عن وجودها. ارسم الشفتين واللسان وداخل الفم والسن الصغير الظاهر مع رسم بعض الأشكال المتعرجة فوق الشفاه للدلالة على انعكاس الإضاءة. تابع رسم باقي أشكال الوجه الملونة المتداخلة. والآن انتهينا من رسم أشكال الوجه كاملًا. يمكنك في أي وقت أن تعدّل ألوان الأشكال المرسومة. من الممكن الاكتفاء بهذا القدر من الرسم وذلك بحسب طبيعة التصميم الذي تعمل عليه في حال كنت بحاجة إلى الوجه فقط. ارسم أشكال الملابس بذات الطريقة مع مراعاة انحناءات الملابس وأجزاءها. الآن قم بإخفاء طبقة الصورة الأصلية وشاهد التصميم النهائي. أية تعديلات على الأشكال يمكنك القيام بها عبر أداة التحديد المباشر Direct Selection Tool كما يمكنك القيام بالتعديلات على الألوان أيضًا. وبعد الانتهاء من كافة التعديلات سنقوم بوضع اللمسة الأخيرة وهي الخلفية بحيث يمكنك جعلها بلون مختلف مع رسم بعض المضلعات العشوائية أو المربعات والمستطيلات العشوائية الملونة فيها أو أن تقوم برسم أشكال كبيرة بسيطة تغطي بعض الأجزاء منها كما فعلتُ هنا حيث رسمتُ شكلين كبيرين يغطيان مساحة كبيرة من الخلفية مع ترك باقي الخلفية باللون الأبيض. يمكننا بعدها نقلها إلى الفوتوشوب للقيام ببعض التعديلات كإضافة تأثير الجرونجي بالخامة المناسبة عبر وضع طبقة خامة الجرونجي فوق طبقة التصميم ثم تغيير خصائص مزج هذه الطبقة إلى Multiply مع تخفيف التعتيم للنصف تقريبًا حتى لا يطغى تأثير الخامة على التصميم الأساسي ومن ثم إضافة التوقيع أو الشعار. هذه لوحة مرسومة بأسلوب فن WPAP ART بسيطة وسهلة وجميلة. يمكنكم أيضًا القيام بذلك فالأمر سهل وغير معقّد. المصادر: صورة الطفل من موقع Flicker مجانية بالترخيص CC BY 2.0 للمصوّر GeniusDevil. صورة خامة الجرونجي مجانية ضمن حزمة Mega Freebie Bundle من موقع AlienValley.com.