[درس] تصميم زر بإنحناء إحترافي بأدوات البن تول (Pen Tool)

[hilmi]

نتيجة الدرس


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

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


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



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


نحدد من شريط المهام درجة الإنحناء (10 بكسل)


ثم قم بالرسم مع مراعاة عدم الخروج من الخطوط التى قمت بتحديدها سابقاً


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



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


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



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



هكذا



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



هكذا



ثم نختار الأداة التحديد (Direct Selection Tool) لسحب النقاط إلى خطوط الشبكة


هكذا


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



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


نضغط ضغطتان بسرعة لنعدل على قائمة الإستايلات تدرج اللون


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


ضع قيمة اللون فى المربع المشاؤ إلية بالسهم


ليصبح الشكل النهائى هكذا


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


ثم نختار من القائمة اليسرى (Bevel and Emboss) لوضع بروز للزر ، ضع القيم كما فى الصورة التالية





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


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


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



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



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



وبما إننا استخدمنا فى ليرة الزر إستايل سيظهر الإستايل عند رسم الدائرة ، لا تعره إهتمامك سنقوم بإذالة كل من الظل والبروز بعد الإنتهاء من رسم دائرتى الإنحناء


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



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



نرجع إلى قائمة اللير ونضغط ضغطتان بسرعة لتغيير أسم الليرة إلى (الإنحناء) ثم نحذف الظل (Drop Shadow) والبروز (Bevel and Emboss) ثم نخفى ليرة الزر


نختار من أدوات البن تول (Pen Tool) المربع (Rectangle Tool)


نحدد من شريط المهام زر حذف من الشكل


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



نظهر ليرة الزر بالضغط على العين ، عندها سوف نلاحظ أن الإنحناء والزر يحملا نفس تدرج اللون الفاتح لذا لابد من عكس تدرج اللون لإستايل الإنحناء بالضغط على (Gradient Overlay)


ثم نضع علامة صاح على (Reverse) لعكس تدرج اللون


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


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



من قائمة اللير ونضغط ضغطتان بسرعة لتغيير أسم الليرة إلى (القائمة) ثم ضغط مع السحب لوضع ليرة (القائمة) آخر ليرة ثم نضغط على (Gradient Overlay) لنغير إعدادات الإستايل لما يناسب القائمة


نضغط ضغطتان بسرعة لنعدل على قائمة الإستايلات تدرج اللون


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



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



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



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

الملفات المرفقة button.zip (11.3 كيلوبايت) images.zip (735.5 كيلوبايت)