فن البكسل خطوه بخطوه

وانا افحط بالنت جاتني حاله مدري وش اسمها عجزت اشخصها بصراحه
بس لقيت نفسي احب البيكسل أرت وادور عنه بشراسه <-جايه بالغلط الكلمه هذي
المهم اني لفيت على مواقع عربيه واجنبيه وجمعت اشياء حلوه بصراحه فهمت البيكسل زين
واحس اني وقعت في غرامه
بس مشكلته العيون تروووح ملــح من التركيز
اترككم مع الدرس هذا وهو حصيلة مواقع عربيه ( الحقوق محفوظه لاصحابها)
والمره الجايه اجيب لكم شغل الاجانب

نبدا الدرس


معنى كلمة بكسل

بكسل كلمة اجنبيه ومعناها
عنصر الصوره او وحدة الصوره
pixel
PIX(picture) and EL(elemint)l
picture elemint


ماذا تعني كلمة بكسل ؟
مامفهوم البكسل أرت ؟؟


قبل الإجابة على هذا السؤال ؟ لدي سؤال ؟ ...
ماذا تعني كلمة بكسل ؟



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


الجميع يعلم بهذا الشيء ..
في العالم كله يوجد نوعان من الصور ،


إما تكون بيكسل أو فيكتور بيسد ...

ما الفرق بينهما ؟


:: البكسل ::

كلما أرت أن تكبر حجم الصورة أكبر من ما هي عليه ،

سوف تفقد ملامحها تدريجيا . وتبدء بضهور المربعات ....


:: الفكتور ::

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

بعد التوضيح بين البكسل والفكتور ...
سوف أعود إلى بداية حديثي( ماهو البكسل أرت )


البكسل أرت هي عبارة عن مربعات أو دوائر
تقوم برسمها بحيث أن في شكلها النهائي تعطيك

شكلا ما . فبإمكانك التصمم على أي برنامج تريده سواء الفوتوشوب أو الإليستريتر ....

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


هذه بعض الأمثله علية
ستلاحضون أن التصميم عبارة عن مربعات ودوائر صغيرة ..




,‘

وهذا مثالا أخر




فن ال Pixel art

فن ال Pixel art فن جميل وبسيط من فنون التصميم حيث انه يعتمد كليا على ال Pixel والبيكسل هي اصغر وحدة في مقاسات التصميم

اول سؤال يسال هنا هل هذا الفن يحتاج اية برامج تكون الاجابة نعم برنامج
واحد فقط هو ال paint الذي تجده في قائمة Accessories من شريط البدء
نعم ال paint فقط يعمل به المعجزات

ماذا يلزمك لكي تكون مصمم بيكسل


1- برنامج ال paint او الفوتوشوب كلاهما واحد في هذا الفن
2- خيال واسع جدا
3- الصبر الطويل


هنالك الكثير والكثير ي هذا الفن الجديد الجميل ولقد كان اول من بدا في نشره هي المجلة العظيمة

computer art حيث بعدها استهوى البعض وكانت النتيجة مذهلة

منقول والموضوع لكاتبه DaRk EyEs





,‘

موقع عن البكسل أرت
www.sheismartha.com

,‘


كيفية إعداد الفوتوشوب قبل البدء في تصميم البكسل
من المعرووف ان قياسات التصاميم
في البكسل ارت صغيرة جداا .. فعند التصميم
تحتاج الى التكبير بواسطة العدسة حتى
ترسم جيدا ولكن في نفس الوقت تريد ان تعرف
كيف ستصبح الرسمه في مقاسها الطبيعي ...
في الاصدار السابع للفوتوشوب (وما فوق الإصدار السابع)هناك ميزه تريحك من عناء التكبير والتصغير
وهي نسخ التصميم في نافذه ثانيه ...
بحيث يمكنك تكبير النافذه الاولى .. وترك النافذه الثانيه
بقياسها الطبيعي .. واي تغير ترسمه
في النافذه الاولى .. يحدث في النافذه الثانيه
اما الطريقه هي ان تذهب الى قائمة Window
ثم Doucments واخير New window ..
بعدها ستظهر لك نافذه جديد للتصميم ..
مثال :



××××










«[ فن البكسل خطوة بخطوة ]»

:: مقدمة ::

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

الدرس الأول: نظرة تعريفية عن فن البكسل

:: التعريف ::

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


** ++ لاحظ شكل اللوحة بعد التقريب .. اصبحت عبارة عن نقاط ملونة ++

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


:: المهارات المطلوبة في فنان البكسل ::

يجب ان يمتلك فنان البكسل :

1- خلفية عن الألوان والتعامل معها
2- خلفية عن التظليل
3- خلفية عن رسم الأشكال و الأجسام في حال الرغبة في صنع لوحات من انتاجه
4- خلفية عن الأبعاد

في حال لم يمتلك الفنان الخبرة في نقطة معينة يمكنه ان يكتسب الخبرة من ملاحظة اعمال الغير و من التجربة ايضا

:: أقسامه ::

ينقسم البكسل آرت لمجموعتين فرعيتين هما:


1- متماثلة الأبعاد isometric

وهي عبارة عن رسومات بكسلية ثلاثية الأبعاد يتم رسمها بدون استخدام برامج 3D


++ لاحظ الصور التالية كلها لأعمال بكسلية من نوع isometric ++



++ و هنا صورة متحركة لبناء بيت من نوع isometric ++



2- غير متماثلة الأبعاد non-isometric
عبارة عن رسومات بكسلية غير ثلاثية الأبعاد كرسم شكل من الأمام او الخلف او الجنب

++ أمثلة بكسلية من نوع non-isometric ++





:: البرامج و الأدوات ::


عادة لا نحتاج لاكثر من برنامج ال Paint المعروف ولكن توفر برنامج يتعامل
مع الطبقات كالفوتوشوب (وهو البرنامج الذي سنستخدمه خلال هذه السلسلة من
الدروس) سيكون دعامة كبيرة للفنان خصوصا عند الرغبة في صنع اشكال متحركة.

من البرامج الرائعة ايضا برنامج يدعى GraphicsGale وهو يسمح بالتعامل مع الطبقات وله ميزات اخرى كثيرة

++ واجهة برنامج GraphicsGale



وللرسم نستخدم اداة قلم الرصاص Pencil Tool ونبدأ في الرسم نقطة نقطة
(Pixel Pushing) وبدون استخدام اي نوع من الفلاتر. من المسموح استخدام
أدوات الأشكال ( كأداة الخط المستقيم و أداة الدائرة ) وأداة التعبئة ولكن
بانتباه شديد.

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

++ مجموعة من الصور المبكسلة للممثل جوني ديب من نوع Photorealism ++

:: تقنية الرسم ::

++ تقنية الرسم خطوة بخطوة ++

:: حفظ الملفات ::

++ الطريقة الصحيحة لرسم الخطوط ++

المجموعة الثانية من الخطوط هي التي تكون بقياس 45، 135، 225، 315 درجة ويتم رسمها بوضع نقاط البكسل بالشكل التالي

بكل بساطة تستطيع رسم اي خط مستقيم إذا عرفت ميله (
درس في الرياضيات ) مثلا لرسم خط ميله نصف تستطيع ان تقول ان لكل نقطة
رأسية نرسم نقطتين افقيتين








++ هنا امثلة على خطوط ذات ميول مختلفة ++

:: الخطوط غير المستقيمة ::

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



:: رسم الدوائر ::

بتلاحظون ان مساحة العمل وايد صغيييييرة .. لازم نكبرها .. يالله نمسك العدسة و نكبر الصورة
نقوم باختيار أداة العدسة .. .. و نضغط على اللوحة عدة مرات .. لنكبرها لأقصى حد و هو 1600%

:: تجهيز الفوتوشوب ::

سنلاحظ ان ملفا جديدا قد فتح .. نتركه جانبا .. الآن اي تغيير يحدث في الملف الأول سيظهر في الملف الثاني

سيكون شكل مساحة العمل لديكم كالتالي



الثاني: نجهز الخطوط المساعدة التي تساعدنا على رسم البكسل و تسمى Grids وهي فقط للمساعدة و لا تظهر عند حفظ الرسمة

نقوم باختيار امر View>Show>Grid



في حال ظهرت لك الخطوط كالشكل التالي:


فكل ما عليك فعله هو الذهاب لقائمة Edit>Preferences>Guides, Grid & Slices


وتقوم بتغيير الخيارات التالية



الأن اصبح كل مربع يمثل بكسل واحد ..





ركزو زين مع الشرح لاتنامون


:msn_tongu

ثم نرسم العينان و الفم باستخدام اللون رقم #403010



:: تصحيح الأخطاء ::

وهي عبارة عن تظليل كامل الشكل بتدرجات الرمادي و
بعدها تتم إضافة الألوان حيث تتم إضافة طبقة فوق الطبقة الرمادية مع تغيير
نوع دمجها إلى multiply و يتم تلوينها



ملاحظة: لا تقم باختيار اللونين الأبيض و الأسود عند التلوين بهذه الطريق لانهما لا يحدثان اي تغيير

3- Modified Gray
وهي عبارة عن صنع تدرجات من الالوان باستخدام اللون الرمادي كالتالي

1-افتح ملف جديدا في الفوتوشوب على حسب عدد التدرجات التي تود استخدامها
(ساستخدم اربعة تدرجات و سأفتح ملفا بحجم 4x1 px) و سأقوم بعمل تدرج من
اللون الرمادي
2-نضيف طبقة جديدة و نغير دمجها إلى multiply و نقوم بتلوينها أي لون نريد
3-ندمج الطبقتين و نحفظ الملف للإستخدام لاحقا ..ونستخدم الألوان الناتجة في التظليل



4- Multiply

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


5- Modified Multiply

وهي عبارة عن صنع تدرجات باستخدام طريقة ال multiply السابقة

1-افتح ملف جديدا في الفوتوشوب على حسب عدد التدرجات التي تود استخدامها
(ساستخدم اربعة تدرجات و سأفتح ملفا بحجم 4x1 px) و سأقوم بتلوينه بأي لون
اساسي
2-نضيف اربع طبقات من نوع multiply وكل طبقة لها Opacity معينة .. بااستخدام اللون الأساسي نقوم بتلوين الطبقات
3-ندمج الطبقات و نحفظ الملف للإستخدام لاحقا ..ونستخدم الألوان الناتجة في التظليل

6- Opacity

وهي طريقة رائعة لصنع تدرجات متداخلة و مختلفة من الألوان

1- افتح ملف جديد بحجم 10x1 px
2- قم بتلوين الطبقة بلون اساسي .. (انا اخترت اللون الأصفر)
3- غير اللون (انا اخترت اللون البنفسجي) اضف طبقة جديدة و قم بتغيير Opacity الفرشاة إلى 20% مثلا و ارسم التدرج الأول
4- كرر العملية مع تغيير Opacity الفرشاة تدريجيا إلى ان تصل إلى 100%
5- احفظ الصورة واستخدم التدرج في اعمالك




[b]:: ورشة عمل : تظليل ابتسامات مذهل ::

[/b]

هذه هي التدرجات التي سنستخدمها للتظليل




نضيف طبقة جديدة و نبدأ التظليل فيها من الأغمق للأفتح او الأفتح للأغمق

وسيكون الناتج كالتالي:



لا ننسى ان نضيف التحديد الأبيض الذي يعطي ايحاء بتجسيم الإبتسامه

ونكون بذلك قد انتهينا من تظليل الإبتسامة

الدرس الخامس: تحريك الأشكال البكسلية + ورشة عمل


في الدروس السابقة تعلمنا اساسيات رسم الأشكال البكسلية .. وركزنا على الرسمات غير التماثلية non-isometric
ثم تعلمنا كيف نلونها و نضيف لها الظل و كيف نقوم بعملية التدثير المبسطة ..

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

هيا نبدأ

1- هل تذكرون ابتسامة
مذهل التي قمنا بصنعها ؟ .. سنقوم بتحريكها لتكون لدينا مجموعة متحركة من
الإبتسامات .. إذا لنفتح ملف الإبتسامة التي قمنا بصنعها في برنامج
الفوتوشوب



2- الآن نقوم برسم الشكل الذي نود ان تصبح عليه الإبتسامه عند الحركة .. فيصبح لدينا طبقتان كل واحدة فيها حركة معينة للإبتسامة



3- نحن جاهزون الآن لعمل الحركة .. سنقوم بفتح الملف في الإيميج ريدي ..
اضغط على آخر زر في لوحة الأدوات .. ليفتح لك الملف في برنامج الإيميج ريدي



4- لعمل الحركة نفتح لوحة الحركة (Animation) إذا لم تكن ظاهرة امامنا عن
طريق قائمة Window > Animation ستكون واجهة برنامج الإيميج ردي كالتالي:



5- لنقم بإخفاء الطبقة العلوية


6- قم بإضافة طبقة حركة من خلال لوحة الحركة .. و قم بإخفاء الطبقة السفلية و إظهار الطبقة العلوية في لوحة الطبقات


7- قم بتغيير زمن الحركة كما هو موضح في الشكل .. أيضا بإمكانك ان تغير هذه القيم حسب ما تراه مناسبا


8- استعرض الحركة لترى هالنتيجة جيدة ام لا .. من خلال الضغط على زر الحركة



9- بعد التأكد من الحركة نقوم بحفظ الملف بصيغة Gif لأنها تدعم الحركة.. من خلال قائمة File > Save Optimized As




منقــgggل

وانتظروا القادم من ترجمتي صخصيا
... وأتمنى أنني قد أفدتكم ولو بالقليل ....