ISOMETRIC - PIXEL ART ... GET STARTED - الكل يستطيع مهما كان مستواه -

السلام عليكم ورحمة الله وبركاته ,,,

فكرة عن لماذا قمت بهذا الدرس

سمعت إنكم تكهرون أسلوبي <<<<< إلي نصه جانب نظري ..

و عشان الإخفاقات التي قمت بها و أخرها دورة الرسم إلي إعتذر KELOKERA عن القيام بها .. أحس إني لازم اسوي شي .
__________

أسلوبي

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


مُقَدمات:-
Isometric
أصل كلمة Isometric باللغة الإغريقية هو "having equal measurement" أي أن تكون القياسات أو الأبعاد مُتساوية .و هنا إن لم أُكن مُخطيئة سيكون المُصطلح الصحيح و الأدق (و الأقل إستخداماً) Isometric projection . فسنرى كيف لنا رسم أو تصميم مُجسمات من نوع 3D (ذات الثلاثة أبعاد - أو- ثلاثية الأبعاد) عن طريق أساليب و برامج من نوع 2D (ذات البُعدين) . أي تمثيل ثلاثيات الأبعاد عن طريق ذات البُعدين . حيث تُستخدم الإحداثيات الثلاثة X,Y,Z (ع,س,ص) في هذا النوع من التصاميم أو الأساليب (شكل 1). هذا المربع من اليوم صديقك و بصفة عامة هذه القاعدة .. هي أهم عنصر في المُعادلة بنظري (شكل2) . الأبعاد مُهمة و معروقة عاليماً (شكل 1). يمكن للبعض القول قياس الدرجات صعب , لا أُخفيكم سراً بأنني أخذت القاعدة (شكل2) و قمت بصنع أغلب الاشياء ! ضعها نُصب عينيك ولن تضيع برأئي .

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

لم أحكي بقية ما ذُكر عن الـisometric Projection لأنه للفائدة لا أكثر و برأيي يُترك لكل قرأ يبحث بنفسه .. هنا تتمة لما سردت في موقع Wikipedia

http://www.m5zn.com/uploads/cab3e8e6d6.gif
شكل 1*

http://www.m5zn.com/uploads/e1e9693a5e.gif
شكل 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 تتخذ ذلك النمط في المقاسات . إلا أن من يُصممون في المجلات و غيرها هم خارج هذا التقيد لما لطباعة تقيدات آخرى كزيادة الجودة و المقاس و غيرها.
  

http://www.m5zn.com/uploads/737674b53c.gif
شكل 3

http://www.m5zn.com/uploads/4afcb122c6.GIF
شكل 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)رسم من الصفر عن طريق القلم . قت تبدوا الكثير من الزايا غير منطقية ولكن مع التصغير (المجهر)تختفي العيوب


http://upload.wikimedia.org/wikipedi...5/The_Gunk.png
شكل 5***
http://upload.wikimedia.org/wikipedi...nk_details.png
شكل 6***

http://www.m5zn.com/uploads/e5575db256.gif
شكل 7*

http://gas13.ru/v3/tutorials/b1.gif
شكل 8****

http://www.m5zn.com/uploads/a401b62183.GIF
شكل9

هناك طريقتين لرسم زوايا اليزومتريك حين تلتقي الأبعاد الثلانة في نقطة. الاول : هو أكش نعومة من غيره حيث تكون ثلاث نقط كل منها على جانب كما هو موضح في (شكل10) تحت إسم TYPE 1 . النوع الثاني وهو أن يكون هناك بكسل في الأعلى و إثنان على جانبه و في(شكل10) تحت إسم TYPE 2 . [COLOR="RoyalBlue"]عند صُنع صورة أكبر بِصَف الصناديق على سبيل المثال . سيظهر هناك عيب في النوع الأول حيث لن يظهر بين كل مكعبين ثغرة مما يؤدي إلى نقص الواقعية .كما هو موضح في (شكل11 ). لذا فإن النوع الثاني أفضل لصف الصناديق منه في الأول .فنلاحظ في النوع الاول أنه لا يوجد واقعية أما الثاني فغنه يحتوي على ثغرات.أما عن كيفية الصنع .. هو حركة واحدة لا غير غندما يتلاقى خطين في الأعلى أو الأسفل إجعلها ثلاث بكسلات بجانب بعضها بدلاً عن إثنين *إستنتاجي والإثبات محاولتي*[/COLOR]

http://www.m5zn.com/uploads/433ebc535d.gif
شكل10

http://www.m5zn.com/uploads/7b7b7b8759.gif
شكل11

صُنع الأشكال

Ｏالصناديق (أو المكعبات)
يَسهل رسم المكعبات بالطرق التي سبقنا و ذكرناها .ولكنك لست مُقيداً بتلك الطريقة , أسهل طريقة لرسم المكعب هو رسم الوجه العلوي له و من ثم قم بنسخه , وبعد ذلك حركه إلى اسفل (الشريحة المنسوخة*****)و من ثم قُم بوصل الأضلاع بخطوط رأسية كما هو موضح في (شكل12).

http://www.m5zn.com/uploads/86a98a6b98.gif
شكل12(الثغرات الموجودة ليست من الرسمة الأصل)

Ｏالأهرام (و كل ما كان له وجه مُثلثي)
في(الشكل 13)توضيحاً للمقصود بالأهرام . أرسم قاعدة مربعة كما وضحنا سابقة عن طيفية رسمها , و من ثم قم برفع عامود من الزاوية السفلية للأعلى وصل بقية الزوايا به كما في (شكل14)


http://www.m5zn.com/uploads/e9183175b7.GIF
شكل13

http://www.m5zn.com/uploads/5db1d6de61.gif
شكل14

Ｏأشكال آخرى كالدائرية و الأسطوانية
تُعتبر الدائرة يسهل صُنع الكرة بأداة التحديد الدائرية . إلا أن الأسطوانة أصعب منها عند صُنعها إلا أن التركيز و العناية بالدقة عند المُصمم تجعل من تلك المهمة مُنجزة (شكل15). طريقة العمل بسيطة بالنسبة للكرة قم بأخذ المُحدد . و من ثم إملأه و بعد ذلك قلل التحديد عن طريق select>>modify>>contract مقدار بيكسل واحد . و قم بزيادة الإضاءة بالتحديد على جزء جزء وزادته درجة درجة . الاسطوانة سهلة جداً . لو دققتم في الصورة التي قمت أنا بالعمل بها للاحظتم أنه توجد بقعة شطرنج من اللونين على جانبهما .. هذا لندمج اللونين و نعطي تأثيراً يدل على الإضائة . قم بعمل شكل بيضاوي إنسخه كما قمنا في المكعب أنزل النسخة غلى أسفل صلهم بخطوط أفقية من الجانبينة .هذه الأجسام في (شكل 17)عملي انا لأثبت مدى سهولته .

في (شكل16)أشكال يمكنك القيام بها بسهولة - أمثلة-.

http://gas13.ru/v3/tutorials/d2.gif
شكل15 ^

http://gas13.ru/v3/tutorials/d3.gif
شكل16^

http://www.m5zn.com/uploads/9e2e290584.gif
شكل17


Ｏالإضاءة و التلوين
عند رسم أس مُجسم لابد من أن نقوم بعمل خطوط أساسية outline(شكل18), كما ذكرنا عن طيفية رسم بعضها , هنا سنستخدم في الشرح مُكعباً - نظراً لانه الأكثر وُروداً و الأكثر رواجاً و الأسهل توضيحاً في الشرح. عموماً , علينا عندما نعمد للتلوين أولاً وقبل كل شيء إختيار زاوية الضوء . هنا نحن إخترنا أن تكون زاويتنا تسقط على المُكعب من الجهة العلوية اليسرى , هذا يعني أننا سنركز الضوء على الوجه و لميلان الزاوية فإن جزاً يسيراً نت الضوء يصل إلى الجهة اليسرى .. ولكن الجهة اليمنى يكاد أن يصل إليها النور .كما في (شكل19)نلاحظ أن لون الصندوق أزرق ولكي نُثبت صفة ثلاثية الأبعاد به لابد من أن نوضح وصول اللنور إلى المكعب . فالجهة العلوية هي لون أزرق زاهي - أو يمكنك إستخدام اللون الاساسي الذي أردته - الجهة اليسرى أقل منها في النور, فتسود بعض الشيء (يقل النور) .. قم بإختيار أي درجة اقل من الأولى (يُنصح بأن يكون الفرق واضحاً*وجهة نظر شخصية*)و اليمنى تكون أقتم من الدرجتين السابقتين .


الآن نحن نمتلك مُكعب ثلاثي الابعاد .. ولكن هناك بضعة أشياء يمكننا إضافتها ليكون المكعب أفضل . نحن الآن لا نحتاج إلى كل الخطوط الأولية أو الأساسية لذا يمكننا أن نُعطي بعضها نوراً مما يجعها أكثر جمالاً حيث تكون أفتح من كل الدرجات الموجودة في المكعب , يمكن غستخدام اللون الأزرق الفاتح جداً - سماوي فاتح جداً- على سبيل المثال. (شكل20).


يمكننا ايضاً إضافة لمعة إضافية أو نصاع على الزاوية المواجهة للضوء باللون الأبيض مثلاُ .(شكل21).

http://www.m5zn.com/uploads/bf9baefb89.GIF
شكل18

http://www.m5zn.com/uploads/dfb15354c2.GIF
شكل19

http://www.m5zn.com/uploads/dfcf5fe29b.GIF
شكل20

http://www.m5zn.com/uploads/f53b2e19d9.GIF
شكل21



_________________________________
*قمت أنا برسم هذا المكعب عن طريق تكرير(شكل 2)و إضافة لما يلزم من موقع Wikipedia مع مراعاة المطلوب و التعديل عليه.
** الشكل مأخوذ من موقع IsoCity .
*** المصدر Wikipedia.
**** المصدر GAS13 .
*****النسخ يتم عن طريق الزر الايمن بالماوس على الشريحة المُراد نسخها و من ثم إختيار Duplicate Layer , أو عن طريق إختيار الشريحة المُراد نسخها و الظغط على لوحة المفاتيح بـ Cntl+J.
^المصدر Gas13 .

________________________________
________________________________
سأضيف للموضوع من فترة إلى آخرى أمهلوني فقط.
الصور في المرفقات
________________________________
________________________________

والله من الصور اعجبتني النتايج ..

للأسف ما قريت الموضوع كامل بس راح ارجع و اقراه .. انا مسافر بكره فما اتوقع ارد إلا إذا رجعت ^__^ ..


بالتوفيق و مرحبا بعودتك فيلسوفه تشان (&) ..

مــــــــا شاء الله عليك اختي فيلسوفة
موضوع مرتبـــ و شرح شاملــ
جزاك الله الـــف خير على المجهود
في انتظار الجديد دائـــما
في امــــــان الله

:)

...
(لــي عودة لقراءة الموضوع بتمعن)

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

أهلين أختي
موضوع رائع وودي من زمان اتعلمه
قريت نص الموضوع وباقي النص الثاني
ماشاء الله شرح واضح
مكفية وموفية
بانتظار البقية ^^

حبيت أسجل اني متابــــــــــع للدورة

وأشكرك أختي على جهدك
وأهنئك أيضا على الدورة

وان شاء الله نستفيد جميعا
وننمي مهاراتنا معا

موفقة باذن الله

وعليكم السلام ورحمة الله وبركاته :] ..

يعطيج الف عافيه على الموضوع الممتاز والشرح الوافي بالمنطق والبرهان ^_^ ..

فن البكسل جميل ونتائجة راقية .. وشخصياً كنت مره ناوي اعمل "Project Pixel" وبالفعل بديت بالرسم ولكن توقفت بعد نصف ساعه xD .. وكانت نتائجي عنصرين فقط للمدينة الي كنت ناوي اعملها وطبعاً انتهت في فولدر المشاريع المؤجله خخخ :-
http://img267.imageshack.us/img267/7618/tree1zo7.gif - http://img210.imageshack.us/img210/510/house1oy8.gif
ان شاء الله هالموضوع بيكون مرجع لكل اعضاء المنتدى , بل سيكون مرجع لكل مرتادي الانترنت لفن البكسل بشرح مبسط مدعوم بالصور لكي يستفيدو وينمو مواهبهم ^_^ ..

عجبني جزء صنع الاشكال والاضاءه لان هذا الجزء شخصياً اواجه صعوبة فيه ببعض الاحيان برسمات البكسل ^_^ .

شكراً على الجهد المبذول وان شاء الله سنتابع كل جديد معاً :) .

وشــــــــــ:yup::yup::yup::yup:ـــــــــــكراً

ماشاء الله
موضوع خطير و جميل
وانا شايف البكسل بدا ينتشر بالمنتدى و هذا شي حلو
وشكرا

واااااااااااااو البكسل مرة مفييد وشكلي رح اخش فيهاا مشكوور ة اختي

[IMG]http://www.**********com/up/uploads/f462cc2b20.gif[/IMG]
هذه احد محاولاتي في البكسل
يعطيك العافية اختي فيلسوفة

:)

تصميم "katsumi san" ما ادري ليش بس حمسني اعمل شي خخخ , عملت هالمره دائرة مع بعض الاضاءه :-
http://img212.imageshack.us/img212/4...xelgameyq2.gif

كان ودي اعدل على الدائرة واضاءتها وهي تمشي بشكل اكبر بس مشكله ما اقدر احرك الا بزوايا محدده علشان يبقى الشكل بكسلي ومايخرب xD .

وشــــــــــ:yup::yup::yup::yup:ـــــــــــكراً

اقتباس:

---

http://img212.imageshack.us/img212/4...xelgameyq2.gif

---

Very nice ^^

---------
My
pixels
(PNG)
^^

[IMG]http://www.**********com/up/uploads/1d620c66ee.png[/IMG]
كــرة بكسلية

::

[IMG]http://www.**********com/up/uploads/f44f3d40f8.png[/IMG]

اسطوانة بكسلية

::

[IMG]http://www.**********com/up/uploads/1e946989b9.png[/IMG]

قطرة ماء

::
Animated pixel
^^

[IMG]http://www.**********com/up/uploads/5d815e4a3b.gif[/IMG]

::
Pixel Table
^^

[IMG]http://www.**********com/up/uploads/ec6a0c942d.png[/IMG]

هممممم.. أول مرة أعرف إن فيه أحد مهتم بالبكسلة هنا, غير إنه مهتم بالغزومترية بالتحديد.

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

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

ما عندي أعمال بالإيزومتري مؤخرا, لكن عندي بكسلات أشارككم فيها ^_^
أولها توقيعي و الصورة الشخصية.

و يوجد هذا اللوغو اللي صممته لموقع ألعاب.

http://xs217.xs.to/xs217/07293/AGCLogoPurple.png

هذي Place Holder لأحد المواقع حتى ينتهي تصميم الموقع:

http://xs219.xs.to/xs219/07371/Under_Construction.png

عندي أعمال أخرى, و أعتذر إنها مو إيزومترية, إن شاء الله لو سويت شيء إيزومتري أشاركه معاكم, من حسن الحظ لعبتي الجاية إيزومترية.

great lessons you are really really great writer

دروس مفيدة جداً
شكراً لك

اقتباس:

---

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

---

نعم إحنا معك يا مراقبنا العزيز
إحنا نبكسل بأيدينا ورجولنا