المساعد الشخصي الرقمي

مشاهدة النسخة كاملة : تصميم شريط زاوية - وشاح إحترافي الدرس الثالث abc4web Ribbon 03


abohmam
27-02-2012, 10:33 PM
بسم الله الرحمن الرحيم

الحمدلله والصلاة والسلام على رسول الله وعلى آله وصحبه أجمعين

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

:PS:

تصميم شريط زاوية - وشاح إحترافي الدرس الثالث abc4web Ribbon 03

نتابع معا دروس التصاميم المودرن والتى قد بدأناها فى شرح الأوشحة الإحترافية فى هذه المشاركات

تصميم شريط زاوية - وشاح إحترافي الدرس الثاني abc4web Ribbon 01 (http://www.abc4web.net/vb/showthread.php?t=21867)

تصميم شريط زاوية - وشاح إحترافي الدرس الثاني abc4web Ribbon 02 (http://www.abc4web.net/vb/showthread.php?t=21874)

وهذا الدرس الثالث الإحترافي الذى تم طلبه وينتظره الكثير من محبي هذه التصاميم وهو شرح الوشاح المطوي

http://www.abc4web.net/upload/images2/tfpka0wigjt2mov.jpg (http://www.abc4web.net/upload/)

http://www.abc4web.net/upload/images2/hdhlmfvef6ua5td.jpg (http://www.abc4web.net/upload/)


:photoshop:


التصميم الثالث وهو التصميم الأهم فى هذه السلسة ان شاء الله لكثرة السؤال عنه ولشكله الرائع الإحترافي الذى سوف نحصل عليه .


1- نبدا عمل جديد بحجم 400*400 بيكسل مثلا والخلفية شفافة ، ثم نرسم مربع أو مستطيل لونه أبيض بإستخدام أداة ....... ونسمى هذه الطبقة مثلا ( الجسم )

http://www.abc4web.net/upload/images2/1faaqgppln2kxah.jpg (http://www.abc4web.net/upload/)


2- نجعل اللون الأمامي أحمر ( AA250B ) مثلا ثم نضيف طبقة جديدة ونسميها ( الوشاح ) ونقوم برسم مستطيل دائري الحواف بإستخدام أداة Rounded Rectangle Tool كما فى هذه الصورة :

http://www.abc4web.net/upload/images2/8wmx04yyhs73arz.jpg (http://www.abc4web.net/upload/)

نقوم بالتكبير بإستخدام العدسة كي نتحكم فى التصميم بدقة

http://www.abc4web.net/upload/images2/mjmtm0edk0ipsqp.jpg (http://www.abc4web.net/upload/)

ملحوظة هامة : أنا قمت بتنفيذ الشرح على وشاح عمودي ليسهل إستيعاب الشرح وبعد الإنتهاء سوف نجمع الطبقات ونقوم بتدوريها مثلا يمين أو يسار من قائمة التحديد ثم Transform أخيرا نختار Rotate 90° CCW -أو- Rotate 90° CW .


3- نضيف طبقة جديدة ونستخدم أداة رسم المستطيل Rectangle Tool ونرسم مستطيل بمحاذاة أعلى المستطيل الأول ولكن بالعرض شاهد الصورة

http://www.abc4web.net/upload/images2/srlbzlngf1tzzov.jpg (http://www.abc4web.net/upload/)

4- نقوم بدمج الطبقتين وذلك بالضغط Ctrl + E من لوحة المفاتيح .

5- نذهب إلى أداة التحديد Rectangle Marquee Tool ثم تقوم بتحديد أسفل شكل الوشاح ، ثم نقوم بإنشاء طبقة جديدة لكن عن طريق نسخ التحديد راجع الصورة التالية ليتضح المقصود .

http://www.abc4web.net/upload/images2/s1sadqdqjumtia0.jpg (http://www.abc4web.net/upload/)


6- الآن حصلنا على طبقة جديدة للجزء الأسفل من جسم الوشاح نقوم بعكس هذه الطبقة راسيا وذلك من خلال قائمة Edit ثم Transform أخيرا Flip Vertical . ثم يتم تحريك هذه الطبقة لأعلى إلى حافة جسم الوشاح مع مراعاة المحاذاة وعدم ترك مسافات أو الدخول على أى طبقة أخرى ( شاهد الصورة )

http://www.abc4web.net/upload/images2/hoywz4ucpurfjnf.jpg (http://www.abc4web.net/upload/)


7- مازال تحديد الطبقة نشيط نتركه كما هو ونقف على طبقة جسم الوشاح ونضغط على Del من لوحة المفاتيح ونقوم بإخفاء هذه الطبقة لنحصل على هذا الشكل :

http://www.abc4web.net/upload/images2/mqgqcy1s4panvuu.jpg (http://www.abc4web.net/upload/)

من لوحة المفاتيح إضغط على Ctrl + D لإزالة التحديد .


8- نقوم بتكرار هذه الخطوات فى الجهة اليسرى لنحصل على هذا الشكل :

http://www.abc4web.net/upload/images2/clhoucu2feklfoy.jpg (http://www.abc4web.net/upload/)


9- الآن سنقوم بتصميم العُمق أو التجويف وسيتم ذلك بإضافة طبقة جديدة واللون أغمق قليلا وليكن 751401 ونرسم دائرة صغيرة بإستخدام أداة Ellispse Tool

http://www.abc4web.net/upload/images2/mpd9vrgsfpxa35e.jpg (http://www.abc4web.net/upload/)


10- من صندوق الطبقات نقوم بسحب هذه الطبقة خلف طبقة الجسم لتكون آخر طبقة حتى نرى الحجم والشكل المناسب لها قبل قصها ونحركها للوضع المناسب .

لنحصل على هذا الشكل :

http://www.abc4web.net/upload/images2/en5jmyygqajyvfj.jpg (http://www.abc4web.net/upload/)

سوف أقوم بتحريك طبقة الجسم ( اللون الأبيض ) لأعلى لأنني كنت قد أبعدتها لإظهار الأشكال التى نرسمها فى الشرح !!!
لم أحرك جميع الطبقات لضمان عدم نسيان أى طبقة لأننا بعد الإنتهاء سوف نجمع جميع الطبقات فى مجلد ليسهل علينا النقل وتدوير الوشاح كاملا لليمين أو واليسار وهكذا ...

http://www.abc4web.net/upload/images2/gcwyvlqiwkkfdts.jpg (http://www.abc4web.net/upload/)


11- كرر الخطوة السابقة على جهة اليسار وذلك بمضاعفة طبقة الدائرة وتحريكها إلى المكان المناسب لنحصل على هذا الشكل :

http://www.abc4web.net/upload/images2/ejwdtwohrsf6h4t.jpg (http://www.abc4web.net/upload/)

الآن سوف اقوم بإخفاء الخطوط المساعدة وإستعادة الحجم الطبيعي لمساحة العمل

http://www.abc4web.net/upload/images2/rfg01b54xqlutvu.jpg (http://www.abc4web.net/upload/)

لنرى العمل قبل إعتماده

http://www.abc4web.net/upload/images2/fsyory2rxuml2uy.jpg (http://www.abc4web.net/upload/)

الآن سوف أقوم بقص الشكل الزائد من الدوائر وذلك بتحديد الجسم ( المستطيل الأبيض ) ثم الوقوف على الدائرة الأولى ثم الضغط على Del للحذف بعد ذلك الدائرة الثانية والضغط على Del لحذف الزوائد أيضا

http://www.abc4web.net/upload/images2/qxcf3upsenbr4ve.jpg (http://www.abc4web.net/upload/)

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

http://www.abc4web.net/upload/images2/qxcf3upsenbr4ve.jpg (http://www.abc4web.net/upload/)

يجب تحويله إلى طبقة نقطية لنتمكن التعديل عليها نقف على الطبقة ثم بيمين الماوس نختار Rasterize Layer

http://www.abc4web.net/upload/images2/fhz5qwttluayhhb.jpg (http://www.abc4web.net/upload/)

لاحظ تغير شكل الطبقة

http://www.abc4web.net/upload/images2/81q1fh7zsvnggia.jpg (http://www.abc4web.net/upload/)

أخيرا سوف نحصل على هذا الشكل

http://www.abc4web.net/upload/images2/fevuago4lxrrgr9.png (http://www.abc4web.net/upload/)

نضيف لمعان جميل كي يظهر الوشاح واقعي وإحترافي وسوف اشرح ذلك فى خطوات مختصرة

نضيف طبقة جديدة نستخدم أداة التحديد ونختار Festher 5 px ثم نرسم مستطيل صغير أعلى الوشاح ونملئه باللون الأبيض

http://www.abc4web.net/upload/images2/ukuxqoxxjoy0oca.jpg (http://www.abc4web.net/upload/)

من خيارت الطبقة نقوم بإختيار Opacity 40%

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


وهذه هى النتيجة النهائية


http://www.abc4web.net/upload/images2/d5qv6bn0g9empqo.png (http://www.abc4web.net/upload/)


لمن يريد إستخدام هذا التصميم يمينا أو يسارا :

قم بنسخ المجلد وذلك بسحبه إلى أيقونة الطبقات فى أسفل صندوق الطبقات أو بيمين الماوس ونختار Duplicate Group وغير إتجاه الوشاح كما تريد

إضغط من لوحة المفاتيح على Ctrl + T للتحديد ثم قف على التصميم وبيمين الماوس إختر ماتريد تدوير يمين ( Rotate 90 CW ) أو يسار (Rotate 90 CCW)

http://www.abc4web.net/upload/images2/7awqmbnusqdckvt.jpg (http://www.abc4web.net/upload/)

http://www.abc4web.net/upload/images2/1zdtc1m1hyggpzu.jpg (http://www.abc4web.net/upload/)



:fasel8:

لتحميل ملف العرض كامل الطبقات ومفتوح

:PSD:

:morfqat:

أتمنى لكم جميعا الفائدة

لاتنسونا من صالح دعائكم

درسنا القادم إن شاء الله تعالى

http://www.abc4web.net/upload/images2/rmxoqdrexqne7cy.png (http://www.abc4web.net/upload/)

:fasel6:
أبوهمام
.

أبو يوسف
28-02-2012, 11:53 AM
بارك الله اخي ابو همام ؛ وليتني أتفرغ لهذا البرنامج العملاق ففيه متعة حقيقية

.

جروح بارده
28-02-2012, 06:17 PM
ما شاء الله


ابداع منك لا يوصف سيدي

بوركت الانامل

abohmam
28-02-2012, 07:07 PM
جزاكم الله خيرا على المرور والتواصل

وفى إنتظار التطبيقات إن شاء الله

بالتوفيق

طيف عآبر
28-02-2012, 08:25 PM
السلام عليكم ورحمة الله وبركاته

شرح سهل ورائــع جزاك الله خيراً

هذه تطبيقي..


http://media01.arabsh.com/uploads/image/2012/02/28/0a3f424f60f0.jpg


/
http://media01.arabsh.com/uploads/image/2012/02/28/0a3f424f64f5.jpg


ان شاء الله يكون صح
ومنتظره الملاحظات على التطبيق اذا فيه خطأ


وفقكم الله للخير

abohmam
28-02-2012, 08:54 PM
السلام عليكم ورحمة الله وبركاته

شرح سهل ورائــع جزاك الله خيراً

هذه تطبيقي..

http://media01.arabsh.com/uploads/image/2012/02/28/0a3f424f60f0.jpg
http://media01.arabsh.com/uploads/image/2012/02/28/0a3f424f64f5.jpg

ان شاء الله يكون صح
ومنتظره الملاحظات على التطبيق اذا فيه خطأ

وفقكم الله للخير

ماشاء الله تطبيقات رائعة وأحلى من الشرح فى النفيذ :abc_022:

فقط نسيت أثناء الشرح خطوة إضافة ظل لجسم الوشاح كي يكون أكثر تجسيما .

بالتوفيق ان شاء الله

azizsoft
28-02-2012, 09:27 PM
ماشاء الله استاذ أيو همام
هذا ابداع يا أخي

بارك الله فيكم ونفع بكم

أبو الوليد
28-02-2012, 10:00 PM
بارك المولى فيك أخي أبا همام وشكر لك جهودك الكبيرة :abc_022: موضوع احترافي يا طيب

http://www.abc4web.net/upload/images2/tsjnjqyxmdbvuzu.jpg (http://www.abc4web.net/upload/)

abohmam
28-02-2012, 11:30 PM
بارك المولى فيك أخي أبا همام وشكر لك جهودك الكبيرة :abc_022: موضوع احترافي يا طيب

http://www.abc4web.net/upload/images2/tsjnjqyxmdbvuzu.jpg (http://www.abc4web.net/upload/)

ماشاء الله على التطبيقات

إحترافي كالعادة

تسلم الأيادى أخى ابا الوليد والقادم أفضل إن شاء الله

فراس البطل
06-03-2012, 09:39 PM
جزاك الله خيرا

أبو صخر
11-03-2012, 03:08 PM
موفق بإذن الله ... لك مني أجمل تحية .

مصطفى أبو عبد الرحمن
18-03-2012, 11:58 AM
السلام عليكم ورحمة الله وبركاته
شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

رامي مشتهى
22-03-2012, 03:54 AM
ما شاء الله عليك ابو همام انسان مبدع بكل ما في الكلمه من معني يعطيك العافيه وكثر من امثالك

أبوعبدالرحمن
26-03-2012, 08:27 AM
بارك الله اخي ابو همام ؛ وليتني أتفرغ لهذا البرنامج العملاق ففيه متعة حقيقية

ذيب 2001
01-04-2012, 10:14 PM
شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية . :abc_022:

abohmam
10-04-2012, 10:36 PM
جزاكم الله خيرا جميعا إخوانى

أشكر لكم مروركم العطر وتواصلكم الجاد

بالتوفيق

للتميز مكان
11-04-2012, 02:11 PM
شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

ماستر فيوز
11-04-2012, 06:25 PM
:abc_138::abc_152::abc_023:

المسافر السعودي
25-04-2012, 12:23 AM
شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

حكايه
25-04-2012, 03:05 AM
شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

المعتمد
30-05-2012, 03:55 PM
شكرااااااااااا

الهمام
01-06-2012, 10:04 PM
موفق بإذن الله ... لك مني أجمل تحية .

م حجازي
07-06-2012, 01:15 PM
بسم الله الرحمن الرحيم
شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .
https://encrypted-tbn3.google.com/images?q=tbn:ANd9GcRIETMRxixPO_DhknIi_YQ6kaBK4opnj FLZiCv_2sO-cEqSLq2R

قولولها
04-08-2012, 01:40 PM
وعليكم السلام ورحمة الله وبركاته

تسلم اخي الكريم في ميزان حسناتك

أبو هاجر المغربي
07-08-2012, 06:25 PM
موفق بإذن الله ... لك مني أجمل تحية .

رائد الغامدي
24-08-2012, 02:27 PM
ما شاء الله


ابداع منك لا يوصف سيدي

بوركت الانامل

عدي حسن جعفر
24-08-2012, 06:34 PM
عاشت ايدكم دخت حته لكيت طريقة عمل ورقة الزاوية مشكوريييييييييييييييييييي ييييييييييييييييين

عدي حسن جعفر
06-09-2012, 05:50 PM
حلووووووووووووووووووووووو ووووووووووووووووو

المصمم
27-10-2012, 09:56 PM
شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

http://www.abc4web.net/upload/images2/jobv77ridu.gif (http://www.abc4web.net/upload/)

كفى بالموت واعظا
05-01-2013, 07:30 PM
جزاكم الله خير شرح وافي ومميز بارك الله فيكم

صقر الحقيقة
23-01-2013, 08:54 PM
الشرح ممتاز

زهرة فلسطين
24-01-2013, 10:44 PM
مشكور عل تلك المعلومات

أبــويـحـيـى
26-01-2013, 11:39 PM
شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية . :abc_022:

بروتون
05-02-2013, 02:20 AM
شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

abohmam
17-02-2013, 09:13 PM
جزاكم الله خيرا إخوانى جميعا

أشكر لكم هذا المرور العطر والتواصل الجاد

أين التطبيقات ؟

بالتوفيق ان شاء الله

ينالو
12-03-2013, 09:46 AM
شكرا صديقي

kamaya
15-03-2013, 07:42 PM
than:abc_028:ksssss a looooot

أبوربيع
06-06-2013, 07:10 AM
مشكووووووور

أبوربيع
06-06-2013, 07:12 AM
مشكوووووووووووووووووور

زوهير
28-03-2014, 07:22 AM
شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

ابوشحاتة
12-10-2014, 01:48 PM
بارك الله اخي ابو همام ؛ وليتني أتفرغ لهذا البرنامج العملاق ففيه متعة حقيقية

فتى الدموع
04-05-2015, 08:37 AM
:abc_050::abc_050:مشكووووووووووووو وور:abc_050::abc_050::abc_050:

نهر الخير
20-01-2016, 02:52 PM
درس رائع جزاكم الله خيرا
http://cdn.top4top.co/p_194arr1.png (http://up.top4top.net/)

اسامهخليل
28-04-2016, 11:13 PM
:abc_050::abc_138:تسلم:abc_052::abc_152:

بن لقصم المقبلي
19-06-2016, 10:22 PM
السلام عليكم ورحمة الله وبركاته
شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

رجل السيف
26-12-2016, 12:33 AM
لي عودة اخي ابا همام بعد ان احل مشكلة جهازي الذي دخل فيه برنامج تجسس

سامر السنهوري
24-01-2017, 10:07 AM
ابدااااع
مشكوووووووووووووووور

عبد العزيز البسكري
19-06-2017, 01:05 PM
شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

وائل وهيب
28-06-2017, 04:12 PM
وفقكم الله للخير

رشوان
13-10-2017, 10:21 PM
جزاك الله خيرا