خطوات فن البكسل مع البرنامج

[محب نت]

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


مساكم \ صباحكم بساتين ..~


موضوع عن البكسل ..



اتمنى يعجبكم...


...


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



بكسل كلمة اجنبيه ومنعا


عنصر الصوره او وحدة الصوره


pixel



PIX(picture) and EL(elemint)l


picture elemint


××××


ماذا تعني كلمة بكسل ؟


مامفهوم البكسل أرت ؟؟


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


في العالم كله يوجد نوعان من الصور ،
إما تكون بيكسل أو فيكتور بيسد ...
ما الفرق بينهما ؟


:: البكسل ::


كلما أرت أن تكبر حجم الصورة أكبر من ما هي عليه ،
سوف تفقد ملامحها تدريجيا . وتبدء بضهور المربعات ....


:: الفكتور ::


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


------


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


هذه بعض الأمثله علية


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




http://forum.te3p.com/images/statusicon/wol_error.gifاضغط هنا لمشاهدتة الصورة بالكامل
http://www.gulfson.com/vb/imgulfson/3206.gulfson






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



http://www.gulfson.com/vb/imgulfson/3207.gulfson






××××


فن ال Pixel art


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


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


نعم ال paint فقط يعمل به المعجزات


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



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


موقع عن البكسل أرت



كيفية إعداد الفوتوشوب قبل البدء في تصميم البكسل


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


في الاصدار السابع للفوتوشوب (وما فوق الإصدار السابع)هناك ميزه تريحك من عناء التكبير والتصغير


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


اما الطريقه هي ان تذهب الى قائمة Window
ثم Doucments واخير New window ..
بعدها ستظهر لك نافذه جديد للتصميم ..


مثال :


http://www.gulfson.com/vb/imgulfson/3208.gulfson






××××



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



http://www.gulfson.com/vb/imgulfson/3209.gulfson






:: مقدمة ::


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


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


:: التعريف ::



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




http://www.gulfson.com/vb/imgulfson/3210.gulfson






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



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


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


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


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


:: أقسامه ::


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


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


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


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



http://www.gulfson.com/vb/imgulfson/3211.gulfson






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



http://www.gulfson.com/vb/imgulfson/3212.gulfson






2- غير متماثلة الأبعاد non-isometric


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


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




http://www.gulfson.com/vb/imgulfson/3213.gulfson






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


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




http://www.gulfson.com/vb/imgulfson/3214.gulfson






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



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



http://www.gulfson.com/vb/imgulfson/3215.gulfson






++ مراحل عمل لوحة من نوع Oekaki



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



http://www.gulfson.com/vb/imgulfson/3216.gulfson






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


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


نبدأ الرسم بتحديد الشخصيات و الأجسام في الرسمة Lineart ويعتبر هذا التحديد الخط الأساسي الذي يحدد الشخصية أو الجسم المراد رسمه. ثم تبدأ مرحلة التلوين و من بعدها التظليل، كلما قمت بتظليل المناطق بدرجات مختلفة كلما اصبح للوحة بعد جميل. و نظرا لقلة الألوان على الفنان ان يقوم بعمل التدثير Dithering لصنع تداخل الألوان




http://www.gulfson.com/vb/imgulfson/3217.gulfson






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


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


تعتبر صيغ ال Gif و ال Png الأفضل لحفظ اعمال البكسل ولا يفضل استخدام صيغة ال Jpg لانها لا تحافظ على نقاط البكسل كما و ان حجمها كبير مقارنة بصيغة ال Gif


:: لا تتوقع النجاح من المرة الأولى ::



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



الدرس الثاني: التعامل مع الخطوط و المنحنيات + ورشة عمل


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



http://www.gulfson.com/vb/imgulfson/3218.gulfson






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


فبمجرد ان تصبح لديك فكرة متكاملة عن ما تريد ان ترسمه، توجه لأحد البرامج المذكورة في الدرس السابق و ابدأ برسم الحدود الأساسية، يعتبر اللون الأسود هو اللون الأساسي لرسم ال Lineart و لكن لا مانع من ان تجرب الوان اخرى .. و دائما تذكر ان تعطي الوقت الكافي لحدود رسمتك لأنها اساس كل شي فبعد ان تبدأ بالتلوين و التظليل تصبح مرحلة التعديل صعبة نوعا ما.


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



هناك زوايا عديدة يتم استخدامها لرسم الخطوط منها الزوايا المعروفة كالزاوية 0، 90، 180، 270 وهي عبارة عن خطوط مستقيمة افقية أو رأسية



http://www.gulfson.com/vb/imgulfson/3219.gulfson






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



http://www.gulfson.com/vb/imgulfson/3220.gulfson






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



http://www.gulfson.com/vb/imgulfson/3221.gulfson






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


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


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


:: رسم المنحنيات ::



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



http://www.gulfson.com/vb/imgulfson/3222.gulfson






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



http://www.gulfson.com/vb/imgulfson/3223.gulfson






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


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



http://www.gulfson.com/vb/imgulfson/3224.gulfson






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


يتبعـ ... :wink2:

[محب نت]

:: ورشة عمل ::

ما رأيكم ان نبدأ بالعمل الآن. سنقوم برسم شكل بسيط باستخدام البكسل .. سنرسم ابتسامات مذهل

اولا كل ما سنحتاجه هو برنامج الفوتوشوب فقط لا غير
فلنفتح البرنامج ..
ثم لنفتح ملفاً جديداً بمساحة 20x20..


http://www.gulfson.com/vb/imgulfson/3225.gulfson





بتلاحظون ان مساحة العمل وايد صغيييييرة .. لازم نكبرها .. يالله نمسك العدسة
http://www.gulfson.com/vb/imgulfson/3226.gulfson



و نكبر الصورة
نقوم باختيار أداة العدسة ..

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

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

قبل ان نكمل يجب ان نجهز برنامج الفوتوشوب لكي يسهل علينا التعامل مع البكسل .. هناك امران اساسيان

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

نقوم باختيار أمر Window>Arrange>New Window for ...


http://www.gulfson.com/vb/imgulfson/3227.gulfson





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

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


http://forum.te3p.com/images/statusicon/wol_error.gifهذه الصورة مصغرة ,اضغط هنا لمشاهدتها بمقاسها الطبيعي علماً بأن مقاسها هو 600x500 , وحجم الصورة هو 73KBhttp://www.gulfson.com/vb/imgulfson/3228.gulfson





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

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


http://www.gulfson.com/vb/imgulfson/3229.gulfson





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


http://forum.te3p.com/images/statusicon/wol_error.gifهذه الصورة مصغرة ,اضغط هنا لمشاهدتها بمقاسها الطبيعي علماً بأن مقاسها هو 600x500 , وحجم الصورة هو 134KBhttp://www.gulfson.com/vb/imgulfson/3230.gulfson





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


http://forum.te3p.com/images/statusicon/wol_error.gifاضغط هنا لمشاهدتة الصورة بالكاملhttp://www.gulfson.com/vb/imgulfson/3231.gulfson





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


http://www.gulfson.com/vb/imgulfson/3232.gulfson





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


http://forum.te3p.com/images/statusicon/wol_error.gifهذه الصورة مصغرة ,اضغط هنا لمشاهدتها بمقاسها الطبيعي علماً بأن مقاسها هو 600x500 , وحجم الصورة هو 100KBhttp://www.gulfson.com/vb/imgulfson/3233.gulfson





:: بدء الرسم ::

والآن أضف طبقة جديدة و لنبدأ برسم الإبتسامة عليها

نختار أداة قلم الرصاص


http://www.gulfson.com/vb/imgulfson/3234.gulfson





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

لاحظ انه باختيارك لأداة قلم الرصاص تصبح حواف الفرش كلها قاسية وهذا يعني انها تحولت لبكسل


http://www.gulfson.com/vb/imgulfson/3235.gulfson





++ لاحظ الفرق بين فرش أداة الفرشاة (على اليمين) و فرش أداة قلم الرصاص (على اليسار) ++

نرسم اولا الوجه باستخدام اللون رقم #604810



http://forum.te3p.com/images/statusicon/wol_error.gifهذه الصورة مصغرة ,اضغط هنا لمشاهدتها بمقاسها الطبيعي علماً بأن مقاسها هو 600x500 , وحجم الصورة هو 108KBhttp://www.gulfson.com/vb/imgulfson/3236.gulfson





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


http://forum.te3p.com/images/statusicon/wol_error.gifهذه الصورة مصغرة ,اضغط هنا لمشاهدتها بمقاسها الطبيعي علماً بأن مقاسها هو 600x500 , وحجم الصورة هو 109KBhttp://www.gulfson.com/vb/imgulfson/3237.gulfson





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

من الطبيعي ان يقع الإنساء في الخطأ .. فإذا اخطأت يمكنك ان تمسح ما اخطأت فيه باستخدام اداة الممحاة

http://www.gulfson.com/vb/imgulfson/3238.gulfson







ولكن تذكر ان تحدد خيارات المسح كالتالي حتى تستطيع ان تمسح بالبكسل
http://www.gulfson.com/vb/imgulfson/3239.gulfson








:: التلوين ::

ولتلوين الإبتسامة نقوم بتعبئة المنطقة باللون التالي #FFE020

هناك طريقتان للتعبئة ..
1- إما ان تقوم بتلوين المساحة نقطة نقطة وهي تعطي نتائج افضل


http://forum.te3p.com/images/statusicon/wol_error.gifهذه الصورة مصغرة ,اضغط هنا لمشاهدتها بمقاسها الطبيعي علماً بأن مقاسها هو 600x500 , وحجم الصورة هو 126KBhttp://www.gulfson.com/vb/imgulfson/3240.gulfson





او تقوم بتحديد الوجه باستخدام أداة تحديد مناسبة ثم تقوم بتعبئته باستخدام أداة التعبئة
http://www.gulfson.com/vb/imgulfson/3241.gulfson







لكن انتبه فقد تقوم ادوات التحديد و التعبئة بإضافة نقاط إضافية تشوه منظر لوحتك


http://forum.te3p.com/images/statusicon/wol_error.gifهذه الصورة مصغرة ,اضغط هنا لمشاهدتها بمقاسها الطبيعي علماً بأن مقاسها هو 600x500 , وحجم الصورة هو 131KBhttp://www.gulfson.com/vb/imgulfson/3242.gulfson





++ هنا استخدمت أداة magic wand
http://www.gulfson.com/vb/imgulfson/3243.gulfson





لعمل تحديد و من ثم قمت بتعبئة التحديد باللون .. لاحظ النقاط الإضافية ++

في هذه الحالة يجب عليك ان تقوم بحذف النقاط الإضافية

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


الدرس الثالث : تلوين و تظليل أعمال البكسل + ورشة عمل

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

يتبعـ... :wink2:

[محب نت]

:: أساسيات التلوين ::




يستخدم الكمبيوتر ثلاث ألوان اساسية لينتج منها مجموعة الألوان التي نراها على الشاشة و هي الأحمر و الأخضر و الأزرق ( Red, Green, Blue ) او يطلق عليها اختصارا RGB .. في داخل الكمبيوتر كل لون من الألوان يمتلك رقما من 0 إلى 255 و يتم خلط و مزج هذه الألوان لتنتج ألوانا مختلفة مثلا 255,0,0 تعني ان اللون الأحمر يساوي 255 و اللون الأخضر يساوي 0 و اللون الأزرق يساوي 0 ومنها 0,0,0 تعني اللون الأسود و 255,255,255 تعني اللون الأبيض ..
معظم برامج الرسم الحالية تحتوي على صناديق لاختيار الألوان كهذا الشكل الظاهر أمامنا


http://www.gulfson.com/vb/imgulfson/3244.gulfson






كما تلاحظون توجد لدينا العديد من الخيارات و بامكانك ان تختار اللون الذي ترغب به باستخدام الفأرة بالضغط على مساحة الألوان او كتابة رقم اللون سواء RGB او Hexa


هنا بعض المواقع التي تساعد على اختيار الألوان المناسبة


الاول...


الثاني...


الثالث...


الرابع...


تتوفر ايضا في الإنترنت بعض الباليتات التي تحتوي على مجموعة من الألوان مع تدرجاتها لتساعدك على تحديد اللون المطلوب .. كما و توجد باليتات جاهزة في الفوتوشوب تجدونها في ال Swatches


http://www.gulfson.com/vb/imgulfson/3245.gulfson






++ تستطيع فتح السواتش من قائمة Window > Swatches ++


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


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


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


:: أساسيات التظليل ::


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


:: مصدر الضوء ::


لابد اولا ان نحدد مصدرا للضوء و على أساسه نبدأ في التظليل ..


http://www.gulfson.com/vb/imgulfson/3246.gulfson






يجب ان نراعي انه كلما ابتعدنا عن مصدر الضوء كلما قلت الإضاءة
:: التظليل ::


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


http://www.gulfson.com/vb/imgulfson/3247.gulfson






لاحظ ان الجهة المواجهة لمصدر الضوء تحتوي على تظليل فاتح ونقوم بتغميقه كلما ابتعدنا عن مصدر الضوء .. دائما تحتاج لمعرفة تفاصيل الشكل الذي تقوم بتظليله فمثلا تظليل الوجوه يحتاج في بعض الحالات لانتباه و اهتمام شديدين و في البعض الآخر لا يهم كثيرا


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


http://www.gulfson.com/vb/imgulfson/3248.gulfson






:: تقنيات التظليل ::


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


1- Eyeballing
في هذه التقنية يتم اختيار لون او تدرجات من الألوان مشابهة للون الأساسي .. ابدأ التلوين من الأفتح للأغمق او العكس من الأغمق للأفتح حسب ما يناسبك .. مع مراعاة ان نزيد عدد الوان التظليل حسب المطلوب


http://www.gulfson.com/vb/imgulfson/3249.gulfson






++ هنا قمت بالتظليل بستخدام تدرج واحد ++


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


http://www.gulfson.com/vb/imgulfson/3250.gulfson






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


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


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


http://www.gulfson.com/vb/imgulfson/3251.gulfson






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


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


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


http://www.gulfson.com/vb/imgulfson/3252.gulfson






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


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


http://www.gulfson.com/vb/imgulfson/3253.gulfson






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


نبدأ بفتح ملف الإبتسامة التي قمنا بصنعها في الدرس السابق


http://forum.te3p.com/images/statusicon/wol_error.gifهذه الصورة مصغرة ,اضغط هنا لمشاهدتها بمقاسها الطبيعي علماً بأن مقاسها هو 549x473 , وحجم الصورة هو 128KBhttp://www.gulfson.com/vb/imgulfson/3254.gulfson






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


http://www.gulfson.com/vb/imgulfson/3255.gulfson






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


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


http://forum.te3p.com/images/statusicon/wol_error.gifهذه الصورة مصغرة ,اضغط هنا لمشاهدتها بمقاسها الطبيعي علماً بأن مقاسها هو 549x473 , وحجم الصورة هو 137KBhttp://www.gulfson.com/vb/imgulfson/3256.gulfson






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


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



الدرس الرابع: أساسيات التدثير


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


:: تعريف التدثير ::


تقنية دمج الألوان مع بعضها البعض عن طريق عمل تدرج بين الألوان.


:: مثال على التدثير ::


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


:: طرق التدثير ::


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


http://www.gulfson.com/vb/imgulfson/3210.gulfson






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


يتبعـ... :wink2:

[محب نت]

:: طرق التدثير ::

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

http://www.gulfson.com/vb/imgulfson/3257.gulfson





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

http://www.gulfson.com/vb/imgulfson/3258.gulfson





اما هنا فتظهر تدرجات الألوان الأساسية المستخدمة بدون اي عملية تدثير

http://www.gulfson.com/vb/imgulfson/3259.gulfson





هنا أشكال مختلفة على التدثير

http://www.gulfson.com/vb/imgulfson/3260.gulfson





:: تطبيق على التدثير ::

سنقوم هنا بعمل مثال بسيط على التدثير (Pattern Dithering)

1- في هذا المثال سنختار لونين مختلفين في درجة التباين حتى تكون عملية التدثير واضحة

http://www.gulfson.com/vb/imgulfson/3261.gulfson





- في منطقة تلاقي اللونين نبدا عملية التدثير و هي عادة ما تكون على شكل شبكة من نفس اللونين المستخدمين سابقا كما في الصورة التالية

http://www.gulfson.com/vb/imgulfson/3262.gulfson





- نقوم بزيادة مساحة التدثير قليلا كما في الصورة التالية

http://www.gulfson.com/vb/imgulfson/3263.gulfson





o••°°• بــرامج البكسل آرت o••°°•

.+. Adobe Photoshop .+.

.+.+.+.+.+.+.

.+. GraphicsGale .+.

برنامج مجاني - للتحميل اضغط هنا (http://www.humanbalance.net/cgi-bin/log.cgi?type=dl&name=dlgaleusfree&url=http://www.humanbalance.net/gale/setgalefreeus.exe)
الموقع الرسمي (http://www.humanbalance.net/gale/us/)

.+.+.+.+.+.+.

.+. MS Paint .+.

يوجد مع برامج نظام التشغيل ويندوز .. للوصول إليه اضغط على
Start > All Programs > Accessories > Paint

.+.+.+.+.+.+.

.+. GIMP .+.


برنامج مجاني مشابه للفوتوشوب - للتحميل GIMP 2.2.13 اضغط هنا (http://dw.com.com/redir?pid=10635470&merid=87737&mfgid=87737&ltype=dl_dlnow&lop=btn&edId=3&siteId=4&oId=3040-2192_4-10635470&ontId=2192_4&destUrl=http://www.download.com%2F3001)
الموقع الرسمي (http://www.gimp.org/)

.+.+.+.+.+.+.

.+. Pixen .+.

برنامج مجاني للماك Mac OS X - للتحميل اضغط هنا (http://opensword.org/Downloads/Pixen_3.0.dmg)
الموقع الرسمي (http://opensword.org/pixen/)


.+.+.+.+.+.+.

.+. Pro motion .+.

http://www.thegamecreators.com/g/tgc/promotion1.gif





برنامج نسخة تجريبية و لكن تستطيع من خلاله التحريك و التحكم بسهولة بدون الإنتقال لبرنامج آخر , و هو خفيف الحجم .
للتحميل إضغط هنا (http://www.download.com/3001-2186_4-10493948.html)
معلومات عن البرنامج (http://www.cosmigo.com/promotion/)

دمتم سالمـــــــــــــــين
م.ن

[kakarot]

والله درس جميل استفدت منه
في برامج لل الفكتور عشان أكبر الصورة وما تتاثر ؟
شكراً جزيلاً لك

[Ahmedbna]

والله موضوعك جميل ومفيد حقا ويبدو منسق وفعلا هو موضوع احترافى - مشكور عليه كثيرا - تحياتى لك

[محب نت]

شكرا على ردوودكم
وانتظر الباقي...^^

مع العلم ان علامة م.ن

اي منقول

[محب نت]

والله درس جميل استفدت منه
في برامج لل الفكتور عشان أكبر الصورة وما تتاثر ؟
شكراً جزيلاً لك


برنامج Illustrator هو برنامج متخصص في الفيكتور

لتحميل البرنامج الاصدار الـ10 ــمــنــ ــهــنــاـ (http://soft.vip600.com/modules.php?name=Downloads&d_op=getit&lid=3367)

تحياتي

[yukii]

موضوع جميل جدا كنت ادور دروس للبكسل ×_× واخيرا شفت درس يشمل كل شي
يوم أبدء بالتطبيق برفعه هني ابا رايك وشو الاخطاء الي سويتها.... ^-^

[PrinceOfSorrow]

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

موضوع في قمة الأبداع ورائع ومفيد جدا جدا
وعفو أخوي ياليتك تحط اسم صاحبة الأصلي في الموضوع

[محب نت]

شكرا لك وننتظر تطبيق



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

موضوع في قمة الأبداع ورائع ومفيد جدا جدا
وعفو أخوي ياليتك تحط اسم صاحبة الأصلي في الموضوع





اخي مع العلم اني لم انقل من صاحبه الاصلى نقلتة وهو منقول
ولاكن مكتوب في الصورة رابط الموقع سوف ابحث عن الموضوع



تعديل
الرجاء عدم الدخول للرابط

السبب

موقع هجوم مُبلغ عنه!
تمّ الإبلاغ عن الموقع mothhel.net على أنّه موقع هجوم و مُنع بناء على تفضيلات الأمن عندك.
تحاول مواقع الهجوم تثبيت برامج تسرق المعلومات الشخصية، أو استخدام حاسوبك للهجوم على الآخيرن، أو إيذاء حاسوبك.
توزّع بعض مواقع الهجوم البرامج المشبوهة بشكل مقصود، ولكن الكثير منها مخترق دون علم أو إذن أصحابها.

لذا لا اعرف صاحب الموضوع الاصلى

تحياتي

[محب نت]

هاذا انا مسويه بــ GraphicsGale

http://up111.arabsh.com/s/7pkyuiolz8.png

حجار اريد رايكم وراي نور ^^

طبعا سويتها في 30 دقيقة مع التعديلات التي عملتها على الحجر

[Noor Xp]

اهلا أخي محب نت

مشكرو على الموضوع .....
ماأعرف ليش تريد رأيي ,لاتظن أني محترف بكسل.
رأيي أنك تحتاج المزيد من التدرب على الظلال,وقت كبير جداً
نصف ساعة لأجل هذه الصخرة ^^" ,انصح بأستخدام
برنامج PhotoShop لأنه يسهل لك تدريج الألوان ويختصر
لك الوقت.


بالتوفيق

[arnold91]

الف شكر على الدرس الرائع

[محب نت]

نور
انا كان لدي برنامج فتوشوب
ولاكن نسيته لذا لا تصبح مثلى
انا تركت البرنامج سنة وانظر ماذا حل بي اصبحت سىء جدا في الفتوشوب
انت لست فنان ولاكنك رسام يلا نشوفك لمن ترسم نفسك وتعطيتها رسمتك
العفو شكرا على المرووور



اخي ارنولد91

العفو شكرا لك على المرووور

[abu2020]

جمييييييييييييييل جدا اخي
بالتوفيق

[محب نت]

العفو شكرا لك على المرور

[AMB0]

الصراحة درس مفيد

لازم يخلونه من الموضوعات المميزة

لأنه شامل كامل

[محب نت]

اهلا بك

شكرا لك على الرد الحلو .... ^^

انا نقلته حتى يستفيد كل شخص

[Karim Ghazal]

الصراحة درس مفيد

لازم يخلونه من الموضوعات المميزة

لأنه شامل كامل



مواضيع القسم المُميز قسم حساس , و مواضيعه حصرية و ليست منقولة ..

[محب نت]

مواضيع القسم المُميز قسم حساس , و مواضيعه حصرية و ليست منقولة ..



أكيد :أفكر:

مع العلم حتى لو كان مميز انا لا افرق بينهما :wink2:

والاكن فرق بسيط هو المميز غير منقول
الغير مميز منقول

[dante-55]

موضوع اسطوري و شامل و وافي للي حاب يبكسل :)
لحسن الحظ اني قريته من قبل و صاحبة الموضوع اعرفها
المبدعه سيلفري و هذا موقعها لو حابون تضعون الحقوق http://www.silveryworld.com/

[PrincOfTheDark]

موضوع ممتاز ابحث عن مثله منذ زمن
شكرا لك يا اخي