السلام عليكم ورحمة الله وبركاته ,,,
فكرة عن لماذا قمت بهذا الدرس
سمعت إنكم تكهرون أسلوبي <<<<< إلي نصه جانب نظري ..
و عشان الإخفاقات التي قمت بها و أخرها دورة الرسم إلي إعتذر KELOKERA عن القيام بها .. أحس إني لازم اسوي شي .
__________
أسلوبي
كل شي بيكون واضح بالصور .. و شرح مُفصل بخطوات .. أي شي باللون الأزرق مو مهم لو ما قرأته بتكون خطوات أو تعليق إضافي .. و اي شي باللون الأحمر جداً مهم
أببدأ بمقدمة لو ما قراتها ما فيه مشكلة و تشمل بشكل عام صورة عامة عن هذا الفن و مُتطلباته و أهميته كل شيء تحت عنوان .كما أن أغلب المصادر مذكورة عند كل فقرة << إن شاء الله بشكل واضح وبعيد عن الغموض.
__________
مُقَدمات:-
Isometric
أصل كلمة Isometric باللغة الإغريقية هو "having equal measurement" أي أن تكون القياسات أو الأبعاد مُتساوية .و هنا إن لم أُكن مُخطيئة سيكون المُصطلح الصحيح و الأدق (و الأقل إستخداماً) Isometric projection . فسنرى كيف لنا رسم أو تصميم مُجسمات من نوع 3D (ذات الثلاثة أبعاد - أو- ثلاثية الأبعاد) عن طريق أساليب و برامج من نوع 2D (ذات البُعدين) . أي تمثيل ثلاثيات الأبعاد عن طريق ذات البُعدين . حيث تُستخدم الإحداثيات الثلاثة X,Y,Z (ع,س,ص) في هذا النوع من التصاميم أو الأساليب (شكل 1). هذا المربع من اليوم صديقك و بصفة عامة هذه القاعدة .. هي أهم عنصر في المُعادلة بنظري (شكل2) . الأبعاد مُهمة و معروقة عاليماً (شكل 1). يمكن للبعض القول قياس الدرجات صعب , لا أُخفيكم سراً بأنني أخذت القاعدة (شكل2) و قمت بصنع أغلب الاشياء ! ضعها نُصب عينيك ولن تضيع برأئي .
قد يتسائل البعض عن إستخداماته بشكل عام , إستخدامته تكون من قِبل المهندسين حيث يستخدمونها عندما يرسمون المُخططات. يُقال إن إحدى عيوبه أنه لايمكن تميز القياسات وذلك لأنه عند رسمه فإن الخطوط مُتوازية لا يمكن تحديد التباعدات التي بينها عند تكبير او تصغير الرسمة عن المشاهد.
لم أحكي بقية ما ذُكر عن الـisometric Projection لأنه للفائدة لا أكثر و برأيي يُترك لكل قرأ يبحث بنفسه .. هنا تتمة لما سردت في موقع Wikipedia
شكل 1*
شكل 2**
Pixel art
هذا الفن المُسمى بالفن البيكسلي( أو النُقطي) هو أحد أشكال الفن الرقمي , و يتم عن طريق برامج الرسم(برامج الجرافيكس) المعروفة. حيث تُعدل الرسمة و تُصمم على المستوى البيكسلي أو (النُقطي).و إن الرسوم القديم في الكمبيوتر أو ألعاب الفيديو و الجوال و غيرها في غالبها من هذا النوع من الفن.كما أنه يُسمى في بعض الأحيان من حيث أسلوبه Spriting . لقرأة المزيد عن الـ Spriting أو pixel art الرجاء زيارة Wikipedia علماً بأن الأخيرة سيتم أخذ منها بعض النقاط في الرسم و اساليبه لأنها مُهمة في الأساسيات كمبادئ.
المُتَطلبات
- برنامج من أدوبي حيث يُفَضَل ImageReady أو Photoshop و عن نفسي أنصح بالإثنين سوياً ولاسيما لمن سيحرك الصور .أي برنامج آخر يقوم بالغرض لطالما يحفظ الصور بصيغة GIF .
- مساحة عمل شفافة.
- فرشاة أو قلم رصاص بمقاس 1 px .
هذه أهم النقاط .. لن تحتاج إلا لها عموماً - بالعربي بَسَاطَة- سأفرض هنا أنكم تستخدمون برامج Adobe لأنها اكثر مرونة بنظري .
__________
البداية :-
الآن وبعد ان تكلمنا عن المُقدمة لنبدأ بسرد المهم فالأهم..
الأدوات وملاحظات عند إستخدامها
- كما ذكرنا أولاً أننا نحتاج لفرشاة أو قلم رصاص من مقاس 1 بيكسل , على رغم من صغرها إلا انها ذا همية كبيرة لنا هنا ..(شكل3)يُبين الفرق في الأداء .. بنظري الفرق بسيط و أرى أن لكل منهم حاجته ولكم القرار. و يقول أحد المصممين "get to love this tiny square pixel you'll be seeing a lot of it."موقعGas13
- أداة مُهمة ألا وهي التكبير المهمل لا بُد أن يكون على نطاق أو رؤية قريبة لذا ستحتاج المُكبر . يُنصح بفتح نافذتين الأول بالمقاس الأصلي و الثانية عبارة عن نسخة للأصل عن طريق الطريقة الموضحة في (شكل4)يُجرى عليها كافة التعديلات في الأصلية.عن نفسي أنا لا أستخدم هذه الطريقة و إنما بالطريقة التقليدية الا وهي التكبير و التصغير . كما أن التكبير لمساحات أصغر للتولين أو الرسم يزيد في الدقة و ان الرسم البيكسلي يختلف عن الرسم العادي وذلك لانه مُقيد بعدد المساحات البيكسلية التي تمكنك أن ترسم بها غير ذلك إنها تأخذ الشكل المُربع . فإن مكان بيكسل عن غيره يغير في الصورة بشكل ملحوظ عادةً .
- عند إستخدام أي من أدوات التحديد يجب التأكد من أن الـAnti Aliasing مُغلق (مُعطل) .لأنه لا يتماشى مع هذا النوع من الفن . إلا أن بعض أعمال الـsprite تتطلب الـAnti Aliasing . لكنها قليلة ويرجى عدم إستخدامه إلا عند الحاجة.
- إصنع palette (صحن أو مكان) للألوان و أنت تعمل في أي مكان فارغ على مساحة العمل أو إفتح مساحة صغيرة لجمع الألوان . إستخدم التحديد بأي شكل و إسكب اللون بأداة سطل الدهان , و بذلك يسهل عليك الرجوع للألوان حين الحاجة لها عن طريق آداة القطارة.
- الرسم يكون في بعض الأحين بالرصاص و الـsketch الأولي أسهل منه بالكمبيوتر أو تريد أن تعمل على رسمتك الأصلية . لذا كان نسخ الصورة عن طريقة الماسح الضوئي (Scanner) جيد إلا أنه مُقيد بأن يكون ذا جودة مقدارها 72DPI وقم بالتحديد عليها..ولكن قبل ذالك يستحسن تصغير الرسمة - لتزيد جودتها من ناحية هذا الفن- إلى مضاعفات الثمانية مثل 8×8 أو 16×16 أو 32×32 وهكذا .. لأان أغلب الـVideogame sprites تتخذ ذلك النمط في المقاسات . إلا أن من يُصممون في المجلات و غيرها هم خارج هذا التقيد لما لطباعة تقيدات آخرى كزيادة الجودة و المقاس و غيرها.
شكل 3
شكل 4
الرسم
يتضمن قسمين الأول التحديد و يبدأ عادة الرسم به ,وهو في هذه المرحلة يسمى فن الخطوط " line art" و هو عبارة عن خط أساسي يحدد معالم الرسمة (من شخصيات أو مباني أو غيرها) , وهذا النوع من الفن عادة يستخدم عند تحديد رسمة مأخوذة عن طريق الماسح الضوئي .القسم الثاني ألا وهو التلوين ويأخذ أشكال من فن التلوين مثل الـpainting و هنا يُقيد المصمم نفسه بدرجات معينة لتكون مفتاحه بالتلوين كما ذكرنا يقوم بـpalette للألوان. ليلون رسمته أو تصمميه و يضفي عليها النور و الظلال و ألوان آخرى في ظل تلك الألوان التي أنتقاها وهو يعمل في الـpalette التابع للتصميم .وكل ذلك يكون باليد (عمل كامل باليد) من ناحية التلوين و إنتقاء الألوان .(شكل5) صورة لشخصية تُدعى "The Gunk"قام راسم هذه الرسمة بـرسم تفاصيلها كالآتي (شكل6): أخذنا 3 مربعات عن الرسمة .. الأول يتضح فيه أنه لم يستخدم إلا لوينين فقط , و إتخذ أسلوبه رقعة الشطرنج نوع 2×2 . ويباعد بين الألوان في مكان ويجمعها في آخرى ليغير درجات الألوان . الثاني إستخدم أسلوب الـNoise (أو البقع النقطية) هنا بعثر مربعات بكسلية صغيرة بشكل عشوائي و مترامي و يمكن أن تجد دوائر أيضاً .الثالث قام بإستخدام ال anti-aliasingـ لينعم الإنحناءات *مجدداً لضرروة فقط نستخدم الـ anti-aliasing* كما يقوم بعض المصممين بـ anti-aliasing بنفسهم للدقة لا أكثر ..
كما ذكرنا سابقاً بأن للأيسوميتريك قوانين . يستحسن إتباعها . و بشكل عام تكون القاعدة بالشكل المعين الموضح في (شكل 7) . و زاوية هذه المعين الحادة 30ْ درجة . إلا أن شاشات الكمبيوتر تُعطي خطاً غير مستوي عند رسمه بالزاية المطلوبة لذا . يُرسم عادة بمقدار 25.565ْ درجة . الفرق في (شكل 8) ولا تقلقوا بالأرقام أو الرياضيات هنا ليست مُهمة فقط للمعلومية .طريقة عمله قم بوضع *قلم الرصاص مهم في التحديد*ضح بكسلين بجانب بعضهم ثم أرفع و هكذا .(شكل 9)رسم من الصفر عن طريق القلم . قت تبدوا الكثير من الزايا غير منطقية ولكن مع التصغير (المجهر)تختفي العيوب
شكل 5***
شكل 6***
شكل 7*
شكل 8****
شكل9
هناك طريقتين لرسم زوايا اليزومتريك حين تلتقي الأبعاد الثلانة في نقطة. الاول : هو أكش نعومة من غيره حيث تكون ثلاث نقط كل منها على جانب كما هو موضح في (شكل10) تحت إسم TYPE 1 . النوع الثاني وهو أن يكون هناك بكسل في الأعلى و إثنان على جانبه و في(شكل10) تحت إسم TYPE 2 . [COLOR="RoyalBlue"]عند صُنع صورة أكبر بِصَف الصناديق على سبيل المثال . سيظهر هناك عيب في النوع الأول حيث لن يظهر بين كل مكعبين ثغرة مما يؤدي إلى نقص الواقعية .كما هو موضح في (شكل11 ). لذا فإن النوع الثاني أفضل لصف الصناديق منه في الأول .فنلاحظ في النوع الاول أنه لا يوجد واقعية أما الثاني فغنه يحتوي على ثغرات.أما عن كيفية الصنع .. هو حركة واحدة لا غير غندما يتلاقى خطين في الأعلى أو الأسفل إجعلها ثلاث بكسلات بجانب بعضها بدلاً عن إثنين *إستنتاجي والإثبات محاولتي*[/COLOR]
شكل10
شكل11
صُنع الأشكال
Ｏالصناديق (أو المكعبات)
يَسهل رسم المكعبات بالطرق التي سبقنا و ذكرناها .ولكنك لست مُقيداً بتلك الطريقة , أسهل طريقة لرسم المكعب هو رسم الوجه العلوي له و من ثم قم بنسخه , وبعد ذلك حركه إلى اسفل (الشريحة المنسوخة*****)و من ثم قُم بوصل الأضلاع بخطوط رأسية كما هو موضح في (شكل12).
شكل12(الثغرات الموجودة ليست من الرسمة الأصل)
Ｏالأهرام (و كل ما كان له وجه مُثلثي)
في(الشكل 13)توضيحاً للمقصود بالأهرام . أرسم قاعدة مربعة كما وضحنا سابقة عن طيفية رسمها , و من ثم قم برفع عامود من الزاوية السفلية للأعلى وصل بقية الزوايا به كما في (شكل14)
شكل13
شكل14
Ｏأشكال آخرى كالدائرية و الأسطوانية
تُعتبر الدائرة يسهل صُنع الكرة بأداة التحديد الدائرية . إلا أن الأسطوانة أصعب منها عند صُنعها إلا أن التركيز و العناية بالدقة عند المُصمم تجعل من تلك المهمة مُنجزة (شكل15). طريقة العمل بسيطة بالنسبة للكرة قم بأخذ المُحدد . و من ثم إملأه و بعد ذلك قلل التحديد عن طريق select>>modify>>contract مقدار بيكسل واحد . و قم بزيادة الإضاءة بالتحديد على جزء جزء وزادته درجة درجة . الاسطوانة سهلة جداً . لو دققتم في الصورة التي قمت أنا بالعمل بها للاحظتم أنه توجد بقعة شطرنج من اللونين على جانبهما .. هذا لندمج اللونين و نعطي تأثيراً يدل على الإضائة . قم بعمل شكل بيضاوي إنسخه كما قمنا في المكعب أنزل النسخة غلى أسفل صلهم بخطوط أفقية من الجانبينة .هذه الأجسام في (شكل 17)عملي انا لأثبت مدى سهولته .
في (شكل16)أشكال يمكنك القيام بها بسهولة - أمثلة-.
شكل15 ^
شكل16^
شكل17
Ｏالإضاءة و التلوين
عند رسم أس مُجسم لابد من أن نقوم بعمل خطوط أساسية outline(شكل18), كما ذكرنا عن طيفية رسم بعضها , هنا سنستخدم في الشرح مُكعباً - نظراً لانه الأكثر وُروداً و الأكثر رواجاً و الأسهل توضيحاً في الشرح. عموماً , علينا عندما نعمد للتلوين أولاً وقبل كل شيء إختيار زاوية الضوء . هنا نحن إخترنا أن تكون زاويتنا تسقط على المُكعب من الجهة العلوية اليسرى , هذا يعني أننا سنركز الضوء على الوجه و لميلان الزاوية فإن جزاً يسيراً نت الضوء يصل إلى الجهة اليسرى .. ولكن الجهة اليمنى يكاد أن يصل إليها النور .كما في (شكل19)نلاحظ أن لون الصندوق أزرق ولكي نُثبت صفة ثلاثية الأبعاد به لابد من أن نوضح وصول اللنور إلى المكعب . فالجهة العلوية هي لون أزرق زاهي - أو يمكنك إستخدام اللون الاساسي الذي أردته - الجهة اليسرى أقل منها في النور, فتسود بعض الشيء (يقل النور) .. قم بإختيار أي درجة اقل من الأولى (يُنصح بأن يكون الفرق واضحاً*وجهة نظر شخصية*)و اليمنى تكون أقتم من الدرجتين السابقتين .
الآن نحن نمتلك مُكعب ثلاثي الابعاد .. ولكن هناك بضعة أشياء يمكننا إضافتها ليكون المكعب أفضل . نحن الآن لا نحتاج إلى كل الخطوط الأولية أو الأساسية لذا يمكننا أن نُعطي بعضها نوراً مما يجعها أكثر جمالاً حيث تكون أفتح من كل الدرجات الموجودة في المكعب , يمكن غستخدام اللون الأزرق الفاتح جداً - سماوي فاتح جداً- على سبيل المثال. (شكل20).
يمكننا ايضاً إضافة لمعة إضافية أو نصاع على الزاوية المواجهة للضوء باللون الأبيض مثلاُ .(شكل21).
شكل18
شكل19
شكل20
شكل21
_________________________________
*قمت أنا برسم هذا المكعب عن طريق تكرير(شكل 2)و إضافة لما يلزم من موقع Wikipedia مع مراعاة المطلوب و التعديل عليه.
** الشكل مأخوذ من موقع IsoCity .
*** المصدر Wikipedia.
**** المصدر GAS13 .
*****النسخ يتم عن طريق الزر الايمن بالماوس على الشريحة المُراد نسخها و من ثم إختيار Duplicate Layer , أو عن طريق إختيار الشريحة المُراد نسخها و الظغط على لوحة المفاتيح بـ Cntl+J.
^المصدر Gas13 .
________________________________
________________________________
سأضيف للموضوع من فترة إلى آخرى أمهلوني فقط.
الصور في المرفقات
________________________________
________________________________
..
- 
