نتيجة الدرس
http://upload.traidnt.net/upfiles/Vt899380.gif

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

بسم الله نبدأ
أفتح عمل جديد ::: الطول = 111 بكسل ::: العرض= 41 بكسل ::: الخلفية = شفافة
كما موضح فى الصورة التى بالأسفل

http://upload.traidnt.net/upfiles/VKS99413.gif
سنقسم الشرح على ثلاثة ليرات :
1/ ليرة الزر
2/ ليرة إنحناء الزر
3/ ليرة القائمة التى تحمل الزر
ليرة الزر
نقم بسحب خطوط من خلال الضغط والسحب من المسطرة لتحديد منطقة العمل كما موضح فى الصورة التى بالأسفل

http://upload.traidnt.net/upfiles/1Bj99441.gif

نختار من أدوات البن تول (Pen Tool) المستطيل منحنى الأطراف (المعين)

http://upload.traidnt.net/upfiles/8YZ99467.gif
نحدد من شريط المهام درجة الإنحناء (10 بكسل)

http://upload.traidnt.net/upfiles/vea99491.gif
ثم قم بالرسم مع مراعاة عدم الخروج من الخطوط التى قمت بتحديدها سابقاً
http://upload.traidnt.net/upfiles/tPR99522.gif

قم بزيادة حجم الصورة يمين ويسار بمقدار (4 بكسل) من خلال قائمة (Image) الخيار (
Canvas Size)

http://upload.traidnt.net/upfiles/SKi99545.gif

وبعملية حسابية بسيط بما أننا نريد إضافة (4 بكسل) يمين ويسار يصبح العرض بدلاً من (111 بكسل) (119 بكسل)
http://upload.traidnt.net/upfiles/I3L99577.gif

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

http://upload.traidnt.net/upfiles/H8Z99610.gif

ثم نختار الأداة (Add Anchor Point Tool) لإضافة نقطتان للشكل

http://upload.traidnt.net/upfiles/2fw99639.gif

هكذا

http://upload.traidnt.net/upfiles/fFr99670.gif

ثم نختار الأداة (Convert Point Tool) لجعل النقاط زوايا قائمة

http://upload.traidnt.net/upfiles/UnR99932.gif

هكذا

http://upload.traidnt.net/upfiles/y5h99959.gif

ثم نختار الأداة التحديد (Direct Selection Tool) لسحب النقاط إلى خطوط الشبكة
http://upload.traidnt.net/upfiles/Tpl00014.gif

هكذا
http://upload.traidnt.net/upfiles/s8w00043.gif

ثم من قائمة اللير نضغط ضغطتان بسرعة على أسم الليرة لتسميتها بأسم (الزر) ثم من أسفل قائمة اللير نضغط على (FX) لوضع إستايل للزر

http://upload.traidnt.net/upfiles/iZK00069.gif

لتظهر قائمة نختار منها (Gradient Overlay)

http://upload.traidnt.net/upfiles/1wu00102.gif
نضغط ضغطتان بسرعة لنعدل على قائمة الإستايلات تدرج اللون
http://upload.traidnt.net/upfiles/P4U00128.gif

نضغط ضغطتان بسرعة على المنطقة المحددة ونحدد قيمة اللون اليمين (e97db1) واليسار (d84974)

http://upload.traidnt.net/upfiles/SdE00156.gif
ضع قيمة اللون فى المربع المشاؤ إلية بالسهم

http://upload.traidnt.net/upfiles/pFB00192.gif
ليصبح الشكل النهائى هكذا
http://upload.traidnt.net/upfiles/LNn00221.gif

ثم نختار من القائمة اليسرى (Drop Shadow) لوضع ظل للزر ، ضع القيم كما فى الصورة التالية

http://upload.traidnt.net/upfiles/oub00250.gif
ثم نختار من القائمة اليسرى (Bevel and Emboss) لوضع بروز للزر ، ضع القيم كما فى الصورة التالية
http://upload.traidnt.net/upfiles/OS700281.gif




ليصبح شكل الزر النهائي (مكبر 200%) هكذا

http://upload.traidnt.net/upfiles/asc00310.gif
ليرة إنحناء الزر
قم بزيادة حجم الصورة يمين ويسار بمقدار (3 بكسل) من خلال قائمة (Image) الخيار (Canvas Size)
http://upload.traidnt.net/upfiles/TpF00338.gif

وبعملية حسابية بسيط بما أننا نريد إضافة (3 بكسل) يمين ويسار يصبح العرض بدلاً من (119 بكسل) (125 بكسل)

http://upload.traidnt.net/upfiles/x2O00370.gif

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

http://upload.traidnt.net/upfiles/Lkz00406.gif

نختار من أدوات البن تول (Pen Tool) الدائرة (Ellipse Tool)

http://upload.traidnt.net/upfiles/L5J00453.gif

وبما إننا استخدمنا فى ليرة الزر إستايل سيظهر الإستايل عند رسم الدائرة ، لا تعره إهتمامك سنقوم بإذالة كل من الظل والبروز بعد الإنتهاء من رسم دائرتى الإنحناء
http://upload.traidnt.net/upfiles/lSM00483.gif

نحدد من شريط المهام زر إضافة لرسم الدائرة الثانية فى نفس الليرة

http://upload.traidnt.net/upfiles/NQ700537.gif

ثم نرسم الدائرة الثانية

http://upload.traidnt.net/upfiles/9t100565.gif

نرجع إلى قائمة اللير ونضغط ضغطتان بسرعة لتغيير أسم الليرة إلى (الإنحناء) ثم نحذف الظل (Drop Shadow) والبروز (Bevel and Emboss) ثم نخفى ليرة الزر
http://upload.traidnt.net/upfiles/2ra00596.gif

نختار من أدوات البن تول (Pen Tool) المربع (Rectangle Tool)
http://upload.traidnt.net/upfiles/1tJ00625.gif

نحدد من شريط المهام زر حذف من الشكل
http://upload.traidnt.net/upfiles/EPF00652.gif

ثم نحذف المنطقة التى سوف تختفى عند وضع القائمة التى تحمل الزر

http://upload.traidnt.net/upfiles/vW400680.gif

نظهر ليرة الزر بالضغط على العين ، عندها سوف نلاحظ أن الإنحناء والزر يحملا نفس تدرج اللون الفاتح لذا لابد من عكس تدرج اللون لإستايل الإنحناء بالضغط على (Gradient Overlay)
http://upload.traidnt.net/upfiles/vZe00715.gif

ثم نضع علامة صاح على (Reverse) لعكس تدرج اللون
http://upload.traidnt.net/upfiles/j5E00743.gif

ليصبح الشكل النهائى للزر والإنحناء (مكبر 200%) هكذا
http://upload.traidnt.net/upfiles/mB900779.gif

ليرة القائمة التى تحمل الزر
نختار من أدوات البن تول (Pen Tool) المربع (Rectangle Tool) ثم نرسم مربع أسفل المنطقة التى حذفنا منها نصف الدائرة

http://upload.traidnt.net/upfiles/GqL00809.gif

من قائمة اللير ونضغط ضغطتان بسرعة لتغيير أسم الليرة إلى (القائمة) ثم ضغط مع السحب لوضع ليرة (القائمة) آخر ليرة ثم نضغط على (Gradient Overlay) لنغير إعدادات الإستايل لما يناسب القائمة
http://upload.traidnt.net/upfiles/YaA00839.gif

نضغط ضغطتان بسرعة لنعدل على قائمة الإستايلات تدرج اللون
http://upload.traidnt.net/upfiles/jfE00867.gif

نضغط ضغطتان بسرعة على المنطقة المحددة ونحدد قيمة اللون : على اليمين (ffffff) و (d0d0d0) وعلى اليسار (e6e6e6) و (ffffff)

http://upload.traidnt.net/upfiles/Gt300900.gif

ثم نختار من القائمة اليسرى (Drop Shadow) لوضع ظل للزر ، ضع القيم كما فى الصورة التالية

http://upload.traidnt.net/upfiles/JFa00940.gif

ليصبح الشكل النهائى للزر والإنحناء والقائمة هكذا

http://upload.traidnt.net/upfiles/hw200969.gif

فى المرفقات صور الدرس (images) وناتج الدرس (button)