سلسلة دروس احتراف الـ Pen Tool هدية للجميع


نبدأ ولله الحمد أول درس من سلسلة أو خلونا نقول مجموعة دروس الـ Pen Tool صارت أسهل !
سبب التسمية في الحقيقة أنو البن تول / Pen Tool أصلاً سهلة !! وبسيطة للغاية كل مافي الأمر وزيها زي أي شي في العالم تحتاج للمارسة !! الي راح نقدمه في هذه الدروس توضيحتوصيل النقاط في هذه التدوينة ( من هنا ) قبل أن نخوض في شرح المتجهات / Vectors راح نوضح حاجة بسيطة ومهم كل شخص يكون فاهمها وعارفها للتقنيات الي راح تساعدك في أستخدامك لهذه الأداة . ولا ترى فكرتها وطريقتها سهلة جدا وواضحة زي ما كان

|[ ماهي المتجهات ؟ ]|
عندنا في مجال الجرافيكس شكلين أو خلونا نقول نظامان للتصميم وراح نحتاج نتفلسف ونشرحهم بوضوح :

01 ] Bitmap Images أو الرسوم النقطية , وتسمى أيضا Raster Images , وتتكون من شبكة من المربعات الصغيرة Pixels ,وكل مربع يكون له مكان ثابت ودرجة لونية ثابتة كما أن العدد الإجمالى للمربعات يكون ثابتا ,ولذلك عند تغيير حجم العمل بالتكبير فإنه يفقد جزءا كبيرا من وضوحه ودقته ,
هذا النوع من الصور يظهر درجة مقبولة من تفاوت الألوان والظلال , و يندرج
تحت هذا القسم الصور الفوتوغرافية والتصاميم المنتجة بالفوتوشوب أوبرامج
التلوين الأخرى. الصيغ الي تدعم هذا النظام [ Jpg , Gif , Png , Bmp ... ]

02 ] Vector Graphics أو الرسومات المتجهة أو الشعاعية , وتتكون من خطوط ومنحنيات تعرف بطريقة الأشكال الحسابية وتسمى المتجهات Vectors, وتصف المتجهات الرسم وفقا لأرقام هندسية. ورسومات المتجهات يمكن إظهارها فى أى حجم بالتصغير أو التكبير دون أن يؤثر ذلك على جودتها ودرجة وضوحها , فعند التكبير ستتعدل الصيغة الرياضية ببساطة ويتم عرض الصورة بوضوح بنفس التناسب مع أبعاد الصورة الصلية , حيث تحتفظ بمنحنياتها وخطوطها الناعمة . الصيغ الي تدعم هذا النظام [ Eps , Svg , Ai , Pdf , cdr ]
طبعاً الكلام الي فوق مقتبس مع شوووية إضافات أنا ما أتفلسف بختصار زي كدا
زي محنا شايفين كمان أنو في النظام الأول الصورة لمن تكبرت صار في مربعات كدا مزعجة وتشوه الحرف هذه المربعات هي الـ Pixels
وفي النظام الثاني كبرنا ومازالت الحواف و الانحناءات زي ماهيا
طيب دحين راح نتعمق أكتر ونشرح أيش هيا المتجهات .. !!!! لحظة لحظة يا بشرية ! مو كأننا قد سمعنا هادي الكلمة من قبل ؟!
للي تزكر و الي ماتزكر راح نبين لكم شو هيا المتجهات :

أيووووووه بالزبببط هادي هيا المتجهات بختصار !! أي واحد وصل النقاط في تحدي توصيل النقاط ( من هنا ) يعتبر نفسو فاهم في أداة البن تول ويعتبر نفسوا كمان محترف فيها !!
حيجي واحد يقول لي : ياهووو عارفين أنو الهرجة متجهات ونقاط لكن مانعرف نسوي المنحنيات بفن وكدا !!!
صدقوني يا إخوة الشغلة مرة بسيطة أهم شي فهمنا انها نقاط وتوصلت !! زي كدا مثلا :



كل هذه صحيحة لكن حبة حبة شوية شوية تكون أفضل و أجود
|[ ماهي مزايا الرسم بالمتجهات ؟ ]|
1 – التحكم الكامل بالشكل المرسوم في أي وقت [ عدل زي ماتحب ] :
مع
المتجهات أنسى أنو يجيك انهيار عصبي و أنت في منتصف عملك عشان تعديل بسيط
في أحد أجزاء عملك الي ممكن ياخذ من وقتك وجهدك الكثير ، التعديل مع
المتجهات أو الفيكتور في أي وقت وبكل بساطة وسهولة !!
2 - التكبير و التصغير بكل مرونة مع الحفاظ على الدقة [ كبر وصغر إلى مالانهاية ] :
التكبير و التصغير لم يعد مشكلة !! نظام المتجهات يعطيك مرونة عالية في التكبير و التصغير مع الحفاظ على تفاصيل العمل 100% !
(
دائما إذا أضطريت أحول شكل من Vector إلى Layer أحتفط بنسخة من نفس الملف
بنظام الـ Vector يمكن أحتاج أكبر الشكل أو اعدل في نص الشغل !! )
3 - حجم الملف المستخرج - النهائي - في نظام المتجهات / Vector أقل بكثير منه في نظام البكسلات / Bitmap [ خفيف زي الريشة ] :
أحد
الأشياء الي نفتخر فيها في TooTStudio أن ملفات الفلاش خفيييفة جداً وهذا
يرجع أن كل الصور و المحتوى داخل الفلاش مرسوم بأداة الـ Pen Tool - أداة الـ Pen Tool متوفرة في غالب برامج التصميم الثابت و المتحرك حتى الثلاثية الأبعاد –
نديكم كدا مثال سريع :

شايفين صورة الولد هذا ؟؟

حفظناها في المرة الأولى بصيغ نظام الـ Bitmap و اخترنا هنا صيغة jpg صار عندنا حجم الملف : 46.2 كيلو بايت

المرة الثانية حفظناها بأحد الصيغ الي تدعم نظام الـ Vector كمشغل و محرر صيغة Swf - الملفات الفلاشية - والمفاجئة أن الحجم أنخسف من 46 كيلو بايت إلى 4 كيلو بايت تقريباً !! فعلاً خفيف زي الريشة .
للتأكد هذه الملفات [ jpg - swf ]
|[ بعض برامج الرسم بالمتجهات ]|
برامج
الرسم المتخصصة بالمتجهات قريبة من بعض بشكل كبير بالطبع كلها تعتمد على
الـ Pen Tool بشكل كبير ، المصيبة مو هنا المصيبة أن أداة البن تول راح
تلاحقك في غالب برامج الرسم فا مافي برنامج رسم سواء كان صغير أو كبير
ثابت أم متحرك إلا وتلاقي هذه الأداة فيه لإمكانياتها العالية و مرونتها
تقريباً أبرز البرامج المتخصصة في هذه الأداة 3 :
1 - Corel DRAW
2- Adobe Illustrator
3- Free Hand
يهمنا
الأول والثاني و المنافسة الحقيقية بينهما ، الأخير تبع شركة مكروميديا
وبما أن شركة Adobe أشترتها وعندها برنامجها المتخصص أهملت تطوير هذا
البرنامج .
نستعرض هنا تجربة سريعة جدا للبرنامجين الأول والثاني - صورة متحركة أصبروا شوي - :

Corel DRAW

Adobe Illustrator
في فروقات واضحة بين البرنامجين في التعامل مع الأداة ولكل برنامج مميزاته
مارح
نتشعب في هذه النقطة لكن بعد ماتتقنوا التعامل مع الأداة على الفوتوشوب
وعلى هذا ستكون الدورة جربو تتعاملو مع الأداة على برامج أخرى مارح
تلاحظون فروقات كبيرة وهذا المميز في هذه الأداة
|[ أعمال بالمتجهات ]|




بعد
مانتعلم ونتقن الـ Pen Tool راح نكون قادرين على تصميم الشعارات و
البطاقات و التلوين عن طريق الأداة و الرسم كذلك و الخط الحر و القص وكمان
راح تساعدنا في تصاميم الفلاش و القائمة تطوووول بإمكانيات حبيبتنا البن
تول
بكذا أنتهينا من التعريف وبإذن الله راح نبدأ في الدرس القادم نشرح أداة الـ Pen Tool ونعرف أوضاع الرسم و أدوات الرسم كذلك
[ مافي واجب اليوم أنبسطوا ]

سلسلة دروس احتراف الـ Pen Tool هدية للجميع


درس اليوم بسيط مرة زي الموية شفتوا لمن تجغمو جغمة موية زيها بالضبط ههههههههه جغم جغم ههههه

|[ قبل البداية ]|
أول شي لازم نفرق مابين الـ Pen Tool و الـ Path

البن تول / Pen Tool : أداة لرسم ووصل نقاط المتجهات .

المتجهات / Vectors : جمع متجهة وهي سهم يتجه من نقطة إلى أخرى .

الباث / Path : هو المسار الكلي للمتجهات الناتجة من النقاط التي تصنعها أداة البن تول .

نظام الـ Bitmap : يعتمد على البكسلات ، بشكل أدق يعتمد على الألوان ، مثلا عشان يوصف العمل حيقول : في البكسل رقم 10 فيه القيمة اللونية ( 7d2727 ) وهكذا لبقية بكسلات العمل .. - الأرقام هذه هي كود اللون - .
نظام المتجهات / Vector : يعتمد على المعادلات الرياضية ، لأنو زي مافهمنا ، المتجهات مجموعة نقاط موصلة مع بعض فا عشان يوصف نقطة معينة حيقول : قيمة ( ص ، س ) هي ( 253 ، 563 ) و القيمة هذه هي قيمة نقطة واحدة في العمل .
كل هذه مجرد أمثلة عشان تفهموا أنهم نظامين مختلفين عن بعض جذرياً ولا يمكن في أي حال ندمجهم مع بعض في Layer واحد سواء في الـ Photoshop أو الـ Illustrator .
* الفوتوشوب يعمل بنظام الـ Bitmap ولكن يقرأ ويحرر المتجهات بشكل قوي جداً .
من هذا نستنتج أنو تقريباً كل أدوات الفوتوشوب ( الفرشة و الممحاة و الختم و الإصبع .. إلخ ) تتعامل بنظام الـ Bitmap إلا بعض الادوات المخصصة للمتجهات .
———————————————————————–
طيب دحين راح نتعرف على الأوضاع الي راح نستخدمها لمن نبدأ في رسم [b]الأشكال / Shapes أو الباث / Path
نشوف مع بعض لوحة الخيارات الي تطلع لك بمجرد تضغط على أيقونة الأداة من لوحة الأدوات [ ]

( للعلم حذفت الأشياء الي ما أحتاجها عشان كدا صغيرة )
في البداية عندنا مجموعة اللون الأحمر الي هيا 1 ، 2 ، 3 :

|[[b]أوضاع الرسم ]|
1- الوضع القياسي Shape Layers:
* في هذا الوضع راح نستفيد من كل خصائص الأداة و خصائص المتجهات .. كيف يعني ؟
مثلاً : لمن تجي تشتغل على الأداة و قاعد ترسم شكل ، فجأة في نص العمل تبغى تعدل ، تبغى تكبر ماعندك مشكلة عدل كبر زي ما تحب !! مو كأني قاعد أذكر مميزات ” المتجهات / Vector “ ؟؟ حلو نفهم من كدا أنو هذا الخيار الصحيح لو نبغى نخرج بعمل فيكتور 100%
* نشوف شكل الـ Layer لمن نرسم بهذا الوضع :

* في هذا الوضع يحتفظ الشكل بمساره ( الباث / Path ) وكذلك نقاط المتجهات ، نتأكد مع بعض :

* في هذا الوضع يتم تعبئة الشكل تلقائياً بلون ، ويمكن التحكم بالصبغة وبقية المؤثرات عن طريق Layer Style .
* في هذا الوضع لايمكنك أستخدام أداة الممحاة أو الفرشة للمسح أو الإضافة ، التحرير يتم فقط عن طريق الـ Pen Tool .
2- الوضع الرسومي Path :
* في هذا الوضع تضحي بخصائص المتجهات / Vector مقابل بعض مميزات الـ Bitmap كيف يعني ؟
لم نرسم شكل بالبن تول ويكون محتفظ بخصائص المتجهات مانقدر نستخدم أداة الممحاة مثلا أو حتى نضيف فوقه بالفرش لأنك قاعد تحاول تدمج نظامين في Layer واحد !!
وفي نفس الوقت أداة البن تول سلسة في الرسم ، و التعديل فيها أسهل يعني إذا مازبط عندك ميلان معين تقدر تعدله بكل سهولة !
فا مشان هيك أخترعوا هذا الوضع أنك تقدر تحتفظ بمسار المتجهات ( Path ) و بعد ماتنتهي من رسم المسار تصبغه يدوياً بلون معين على Layer عادي !
نشوف تسجيل ، بعد ما أنتهينا من رسم المسار ( Path ) أضفنا Layer جديد و صبغنا عليه شكل المسار وكذلك صبغنا الحدود فقط :

شايفين بعد ما أنتهينا من التعبئة حذفنا المسار لأننا ماعدنا بحاجته بعد التعبئة .
نشوف شكل الـ Layer في هذا الوضع :

*
في هذا الوضع نقدر نحتفظ بالمسار ( Path ) في نافذة ( Paths ) بعد
الإنتهاء من الصبغ أو التعبئة ، ولكن لم يعد له أي تأثير على الشكل .
* في هذا الوضع نستطيع أستخدام كافة أدوات الفوتوشوب بنظام الـ Bitmap .. سؤال لماذا ؟
3- الوضع التعبئة Fill Pixels :
هذا الوضع ناااااادراً مانستعمله هو فكرته يقوم بتعبئة ( الأشكال / Shapes ) على Layer مباشرة
يعني مباشرة يحمل خصائص الـ Bitmap مجرد تختار الشكل الي تبغاه من القائمة
و تضيف Layer جديد وتبدأ في تحديد مقاس الشكل ويصبغه لك على الـ Layer
بنظام الـ Pixels او الـ Bitmap
0]ماقد عمري أستعملته ]
———————————————————————–
نكتفي بهذا لليوم ، و أحب أوجه سؤال وعطوني الصراحة فهمتوا شيء !!
لأني أحس المادة مكثفة ودسمة و أخاف ماتوصل المعلومة ولا كنت مخطط لأهذا الدرس نشرح الأدوات كذلك
جربوا أقرو بعدين طبقوا يعني روحوا أستكشفوا و أرجعوا اقرو مرة ثانية لأنو بالتطبيق تتضح الصورة أكثر .
عموما واجب اليوم هو جواب السؤال في الأعلى
ملحوظة : كل مافي هذا الدرس من مخيخي ، وبما أن لغتي الثانية أسبانية مالقيت دروس بهذا الخصوص باللغة الأسبانية بس لقيت كيف ترسم قيتار بالبن تول فا يعني لو في خطأ هيك ولا هيك أعذرونا .

سلسلة دروس احتراف الـ Pen Tool هدية للجميع


عشان ماتطول المقدمة و أنو أشتقت لكم و .. إلخ خلونا نخش في درسنا دغري
اليوم راح نتكلم عن رسم المستقيمات فقط !! مع توضيح بعض النقاط المهمة في عملية الرسم .
قبل مانخش في الرسم ، لازم نتكلم عن نقطة مهمة جدا وراح تساعدنا في الرسم بأداة الـ Pen Tool

|d]الأستعداد ]|
حتى يكون رسمنا أكثر دقة - مستقبلاً مارح تحتاجونها – راح نفعل إضافة مميزة جدا في الفوتوشوب الي هيا الشبكة / Grid
وهذه صورة بسيطة حتى نعرف من وين نقدر نفعلها :

نلاحظ انو اختصار الإضافات Ctrl + H هادي مهمة لازام نحفظها ، طبعا هي مجموعة من الإضافات تساعدنا في الرسم حالياً راح نحتاج الشبكة فقط و أختصارها مباشرة ‘ + Ctrl أو ط + Ctrl راح يصير ملف العمل عندنا بهالشكل :

* لإلغاء الإضافة أضغط نفس الأختصار ‘ + Ctrl أو ط + Ctrl


|d]أداة الرسم الحر ]|


شرحنا فيما سبق الخيارات باللون الأحمر ( 1 ، 2 ، 3 )
اللون الأخضر بكل بساطة :
4 – أداة الـ Pen Tool : مايحتاج لها فتاكة هي الأداة نفسها الهرجة في الي بعدها .
5 – أداة الرسم الحر Freeform :
هذه طال عمركم الكل يعلم أنو أداة البن تول أسهل في الرسم و أكثر دقة و تحكم من الفرشاة مثلاً !
فا بهذه الأداة نقدر نرسم مسار / Path بشكل حُريعني كأننا نتعامل مع الفرشاة ، و الفوتوشوب راح يحط لنا نقاط المسار تلقائياً !
مو أول كنا أحنا نرسم النقاط أول عشان يتكون لنا المسار ؟ الحين احنا نرسم المسار وهو يحط لنا النقاط على حسب رسمنا و المنحنيات فيه ، نشوف مع بعض صورة متحركة تشرح الفكرة ..
قبل ما أوريكم الصورة ، أحب أنبه أنو نقدر نرسم بالوضع القياسي Shape Layers أو حتى بالوضع الرسومي Path .
[ لمزيد من المعلومات حول الأوضاع راجع الدرس الثاني من هنا ]

ملاحظات :
* نلاحظ أنو لمن نرسم يحاول يعدل لنا الرسم بحيث يكون أنعم - ستلاحظونها في Illustrator بشكل أكبر - .
* نلاحظ أن النقاط توزعت مو بعشوائية بل حاول الفوتوشوب يتعامل مع المنحنيات الي رسمناها وحط النقاط على أثرها .
* هذه الأداة يستفيد منها بشكل أكبر الرسامين الذين يستخدمون القلم الضوئي / Tablet حيث الرسم يكون أدق .
[ يقدر أحد يقول لي في أيش ممكن نستفيد من هذه الأداة ؟ ]

|[ رسم المستقيمات ]|
راح نبدأ الآن برسم المستقيمات ، بعد مافعلنا الشبكة ، تابعوا معاي هذه الصورة المتحركة و أنا أرسم مربع :

شايفين سهولة الرسم مع ” الشبكة ” طيب دحين راح نشرح الأيقونات الي ظهرت لنا :
: الأستعداد لبدأ رسم جديد ، لاحظنا أنو أداة البن تول عند بداية الرسم وعند نهاية الرسم تتحول لهذا الشكل .
: هذه تعبر عن آخر نقطة تم رسمها و أنت لسى قاعد ترسم يعني مالها تأثير مجرد إشارة مثل الأولى .
: النهاية و إقفال المسار ، زي ما لاحظنا أنو لمن رجعنا لنقطة البداية لإقفال المربع جاتنا هذه الإشارة .
* حتى نقفل المسار نحتاج نرجع لنقطة البداية ( نقطة البداية هي نفسها نقطة النهاية )
* باقي أدوات لكن نذكرها في وقتها إن شاء الله .
طيب نجرب نرسم بدون الشبكة ولكن هالمرة راح نرسم مثلث :

لاحظتوا الفرق بين المثلثين ؟
الأول كان مكسر ومو مستقيمة أضلاعه ، أما الثاني كان في ضلعين مستقيمين تمام !!
وكمان
الأول لمن كنت أرسم النقاط ، مكان ما أحط النقطة تكون ، خصوصا الزاوية
اليمنى لكن في المثلث المستقيم الثاني لأ أنا حطيت الفارة في مكان و
النقطة جات في مكان مختلف !!

شايفين هنا المكان الي كبست عليه صارت فيه النقطة .

لكن هنا لأ !!
في المثلث الأول الأضلاع مو مستقيمة :

في المثلث الثاني الأضلاع مستقيمة :

ياترى أيش الي سويته حتى صارت هالأستقامة ؟؟
الجواب : زر Shift !!!
ضغط زر Shift *من الكيبورد وقت الرسم يحافظ على أستقامة المسار مابين النقطة المرسومة سابقاً و النقطة الي راح ترسمها للتوضيح :

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

* تم تعديل القلب ببعض التعديلات ، الي رسموه يرجعوا يعيدوه
أحب أشكر الأخ عبدالرحمن 90 ألي لولا الله ثم هو ماكنت سويت الدرس ياهو دخل في خشمي وطفش أهلي ” أحوبك ” فا يعني كل واحد يشكره و نصيحة أنا ماينفع معاي إلا كدا تنشب في حلقي أمشي معاك << معوق

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