ترايدنت

ترايدنت (https://www.traidnt.net/vb/)
-   دروس عامة و عالم التصاميم (https://www.traidnt.net/vb/f4/)
-   -   تصميم زر بإنحناء إحترافي بأدوات البن تول (Pen Tool) (https://www.traidnt.net/vb/traidnt1849235/)

أكرم أحمد 04 - 05 - 2011 05:36

تصميم زر بإنحناء إحترافي بأدوات البن تول (Pen Tool)
 
يتضمن 2 ملف مرفق
نتيجة الدرس
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)

@الطائر الجريح@ 04 - 05 - 2011 06:08

مجهود رائع يستحق الشكر والثناء

Mido Torres 04 - 05 - 2011 12:12

مآشآء الله
درس ولا آروع والله
ومُفيد جداً
تسلم آيدكـ

عزف الجروح 04 - 05 - 2011 12:28

بطل

ماشاء الله عليك

تسلم ايديك

++

UAE SUPPORT 04 - 05 - 2011 12:43

بطل .. والله .. يعطيك ربي العافية

SOKON 04 - 05 - 2011 12:47

عافاك الله
شرح ولا اروع
جزاك الله كل خير

ياقلبي إبتسم 04 - 05 - 2011 13:30

شكرا اخووووووووووووي احلى درس ....!^^

صوت الغضب 04 - 05 - 2011 17:39

جزاك الله كل خير

جهد جبار

أكرم أحمد 08 - 05 - 2011 23:33

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

abyhafs 09 - 05 - 2011 12:31

بارك الله فيك

درس طيب

lamasat4u 09 - 05 - 2011 13:11

جميل جدااا ،،

يعطيك العافيه عالمجهود

Mr.Hamoudi 09 - 05 - 2011 13:18

بآرك الله فيك ،

ماى اون لاين 09 - 05 - 2011 13:33

يعطيك العافية
شرح رائع
مبدع كالعادة

عاشق ومفارق 09 - 05 - 2011 21:38

ابداع لاحدود له يسلمو وعساك على القوه

Rida Sanhaji 12 - 05 - 2011 23:01

شرح ولا اروع
جزاك الله كل خير


الساعة معتمدة بتوقيت جرينتش +3 . الساعة الآن : 16:23.
المعهد غير مسؤول عن أي اتفاق تجاري أو تعاوني بين الأعضاء
فعلى كل شخص تحمل مسئولية نفسه إتجاه مايقوم به من بيع وشراء وإتفاق وأعطاء معلومات موقعه
التعليقات المنشورة لا تعبر عن رأي معهد ترايدنت ولا نتحمل أي مسؤولية قانونية حيال ذلك (ويتحمل كاتبها مسؤولية النشر)

Powered by vBulletin® Version 3.8.7 .Copyright ©2000 - 2019, Jelsoft Enterprises Ltd


SEO by vBSEO ©2011, Crawlability, Inc.