سلسلة دروس البن تول

View previous topic View next topic Go down

سلسلة دروس البن تول

Post by discovery on Sat Mar 31, 2012 8:03 pm

سلسلة دروس البن تول


1 أبريل, 2009

Pen Tool, تعالوا نستفيد

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


<blockquote>

</blockquote>
نبدأ ولله الحمد أول درس من سلسلة أو خلونا نقول مجموعة دروس الـ 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 ونعرف أوضاع الرسم و أدوات الرسم كذلك

[ مافي واجب اليوم أنبسطوا ]



<blockquote>

</blockquote>


جميع الحقوق محفوظة لـ Abdullah Saeedwww.asaeed.ws

[ الرجاء ذكر المصدر عند النقل ]

Enjoy



http://www.asaeed.ws/blog/2009/%d8%a7%d9%84%d9%80-pen-tool-%d8%b5%d8%a7%d8%b1%d8%aa-%d8%a3%d8%b3%d9%87%d9%84-%d8%a7%d9%84%d9%85%d8%aa%d8%ac%d9%87%d8%a7%d8%aa-vectors/

____________________________________________________
avatar
discovery

الجنس : Male

عدد المساهمات : 1113
النقاط : 29819
التقييم : 12
تاريخ التسجيل : 2010-04-28

View user profile

Back to top Go down

Re: سلسلة دروس البن تول

Post by discovery on Sat Mar 31, 2012 8:54 pm


|[ قبل البداية ]|

أول شي لازم نفرق مابين الـ Pen Tool و الـ Path



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



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



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


-| تذكير مهم جداً |-

نظام الـ Bitmap : يعتمد على البكسلات ، بشكل أدق يعتمد على الألوان ، مثلا عشان يوصف العمل حيقول : في البكسل رقم 10 فيه القيمة اللونية ( 7d2727 ) وهكذا لبقية بكسلات العمل .. - الأرقام هذه هي كود اللون - .

نظام المتجهات / Vector : يعتمد على المعادلات الرياضية ، لأنو زي مافهمنا ، المتجهات مجموعة نقاط موصلة مع بعض فا عشان يوصف نقطة معينة حيقول : قيمة ( ص ، س ) هي ( 253 ، 563 ) و القيمة هذه هي قيمة نقطة واحدة في العمل .

كل هذه مجرد أمثلة عشان تفهموا أنهم نظامين مختلفين عن بعض جذرياً ولا يمكن في أي حال ندمجهم مع بعض في Layer واحد سواء في الـ Photoshop أو الـ Illustrator .

* الفوتوشوب يعمل بنظام الـ Bitmap ولكن يقرأ ويحرر المتجهات بشكل قوي جداً .

من هذا نستنتج أنو تقريباً كل أدوات الفوتوشوب ( الفرشة و الممحاة و الختم و الإصبع .. إلخ ) تتعامل بنظام الـ Bitmap إلا بعض الادوات المخصصة للمتجهات .

———————————————————————–

طيب دحين راح نتعرف على الأوضاع الي راح نستخدمها لمن نبدأ في رسم الأشكال / Shapes أو الباث / Path

نشوف مع بعض لوحة الخيارات الي تطلع لك بمجرد تضغط على أيقونة الأداة من لوحة الأدوات [ ]



( للعلم حذفت الأشياء الي ما أحتاجها عشان كدا صغيرة )

في البداية عندنا مجموعة اللون الأحمر الي هيا 1 ، 2 ، 3 :



|[أوضاع الرسم ]|

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]ماقد عمري أستعملته ]

———————————————————————–

نكتفي بهذا لليوم ، و أحب أوجه سؤال وعطوني الصراحة فهمتوا شيء !!

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

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

____________________________________________________
avatar
discovery

الجنس : Male

عدد المساهمات : 1113
النقاط : 29819
التقييم : 12
تاريخ التسجيل : 2010-04-28

View user profile

Back to top Go down

Re: سلسلة دروس البن تول

Post by discovery on Sat Mar 31, 2012 8:57 pm


خلونا ناخد لفة على الي شرحناه في هذه السلسلة

في الدرس الأول تعرفنا على المتجهات أو الـ vector وعرفنا بساطتها وسهولتها وفوائدها كمان .

في الدرس الثاني تعرفنا على أوضاع الرسم الي ممكن نستخدمها

مع هذه الأداة الرااااائعة و السهلة كمان

وعرفنا في البداية الفرق بين الـ pen tool و الـ path tool .

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


طلبت منكم سابقاً رسم قلب مثل هذا بالضبط :



وماشاء الله 500 واحد رسموه عشان كذا جبتوا لي الصمرقع وين الدرس الي بعدوا وين الي بعدو

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

* القلب حصل عليه بعض التعديلات أرجعوا أرسموه .



في البداية نفعل الشبكة زي ماتعلمنا في الدرس الثالث

الآن نبغى نسوي مستقيم بسيط جدا من 3 نقاط بس



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

كيييف ؟؟

راح نستعمل أداتين أعتبرهم شيء أساس في التعامل مع الفكتور /Vector




Convert Point Tool : هذه الأداة خاصة بإنشاء وتعديل المنحنيات ، الأداة هذه تؤثر مباشرة في المسار / Path مستخدمةً النقاط كمحور أو نقطة أرتكاز لذراعا التحويل .



هذا تصور بسيط لمسار مستقيم مكون من 3 نقاط نلاحظ مع بعض الأذرع الي تقوم أداة الـ Convert بالتأثير عليها وبالتالي يتأثر المسار تبعاً للأذرع .

نلاحظ كيف يتأثر المسار مع تحريك الأذرع عن طريق الأداة



في البداية كنا شغالين على أداة الـ Pen Tool فجأة تحولت الأيقونة لأيقونة الـ Convert لأني كنت ضاغط زر Alt من الكيبورد .

Alt يقوم بتفعيل أو التبديل بين الأداتين ( Convert << Pen Tool ) أو بالإمكان أختيارها مباشرة من قائمة أدوات البن تول .

ملاحظة : تتفعل الـ Convert عند المرور بالنقطة فقط .

لاحظوا في الصورة التالية أن قمة المنحنى تتبع نقطة الذراع



أرجعوا شوفوا الصورة المتحركة الأولى وراح
تلاحظونها أكثر .. إذاً المنحنى يتحرك تبعاً للأذرع والأداة الي نقدر
نتحكم بها في الأذرع هي الـ convert .





[b]Direct Selection Tool
: هذه الأدة مهمتها تحديد النقاط بكل بساطة وسلاسة وفي نفس الوقت تحدد الأذرع نشوف مع بعض كمان :



لاحظنا كمان أنو الاداة هذه تقوم مقام الـ convert عندما تكون الأذرع مُفعلة !!

واااو يعني نضرب راسين بشاكوش واحد





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

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

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

ملاحظة مهمة : الأداتين متلازمتين ، إذا أخترت الـ convert مباشرة من قائمة الادوات راح تظهر لك أداة الـ Direct Selection وبمجرد المرور على النقطة تتحول إلى convert .

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





نجي دحين لتحليل المقطعين

واضح أني أستخدمت الاداتين Direct Selection & convert بشكل كبير والتنقل بينهم يكاد يكون متعاقب و سريع

كان ذلك بالتبديل بين الثلاث أدوات عبر الأختصارات على الكيبورد

Pen Tool : P

convert : P+Alt

Direct Selection : A

الأختصارات جدا جدا مهمة ودائما أقول المصمم الذكي يعرف كيف يستغلها لتسهيل المهمة

لاحظنا كمان في الصورة الثانية أو اللقطة الثانية أنو في أدوات أستخدمتها لإضافة و حذف النقاط

: إضافة نقطة جديدة للمسار

: حذف نقطة من المسار

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

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

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

ركزوا كثيراً في اللقطتين مرة ومرتين
وثلاثة وجربوا مليون مرة لا تقولوا مافهمنا من مجرد قراءة !! الممارسة تثبت
المعلومة أكثر و أكثر

واجب هذا الدرس أبغاكم تعملون منحنيات للقلب حقنا ، وهذه صورة متحركة لطريقة العمل عشان خاطر عيوناتكم الصفرا << تخيلوا واحد عيونه صفراء





نصيحة في الآخر : صدقني عمرك مارح تتعلم هذه الاداة لو حطيت في راسك أنها صعبة ، أو جلست تقرأ هالمعلومات بدون ماتطبق .
[/b]

____________________________________________________
avatar
discovery

الجنس : Male

عدد المساهمات : 1113
النقاط : 29819
التقييم : 12
تاريخ التسجيل : 2010-04-28

View user profile

Back to top Go down

Re: سلسلة دروس البن تول

Post by Sponsored content


Sponsored content


Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum