تصميم شريط زاوية - وشاح إحترافي مطوي من الطرفين الدرس الرابع abc4web Ribbon 04

[abohmam]

بسم الله الرحمن الرحيم

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

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

:PS:

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

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

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

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

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

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

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

:photoshop:

التصميم الرابع وهو التصميم الرائع فى هذه السلسة ان شاء الله لكثرة إستخدامه كوشاح أو إضافة فى تصاميم الجوائز والشعارات

الوشاح المطوي من الطرفين هو وشاح بتصميم ثلاثي الأبعاد إحترافي يظهر وكأنه شريط لاصق حول الشكل .

هذا هو الشكل العام للوشاح الذى سوف نشرحه

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

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

أسأل الله لكم جميعا التوفيق


نستعن بالله ونبدا الشرح أيضا فى خطوات برجاء مراجعة الدروس السابقة لمعرفة بعض خصائص الأدوات عند رسم الأشكال

1- نبدأ عمل جديد بالمساحة المطلوبة ولتكن 600*400 بيكسل ونضيف خلفية ذات تدريج خاص باللون الرصاصي.

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

2- نقوم بتغير اللون العلوي وليكن مثلا 656565 ثم من أداة رسم الأشكال Rectangle Tool وبهذه الإعدادات


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

نقوم برسم مستطيل صغير فى الجهة اليسرى هكذا ونسميه ( نهاية الوشاح )

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


3- سوف نقوم الآن بقطع جزء من هذا الشكل لنحصل على الشكل الذى حددناه للتصميم وللحصول على ذلك نضيف طبقة جديدة ونسميها ( منطقة القطع ) ونرسم شكل جديد وليكن " شكل معين " من خلال إستخدام أداة رسم الأشكال Custom Shape Tool ونختار من الأشكال شكل المعين أو مربع ونقوم بتدويره طبعا .
ونضيفه أسفل الشكل السابق ونقوم بتحديده من خلال الضغط على Ctrl من لوحة المفاتيح
ثم نقف على طبقة الشكل الأول ( نهاية الوشاح ) ونضغط على Del من لوحة المفاتيح ثم نقوم بإخفاء طبقة ( منطقة القطع ) لأننا سوف لانحتاج إليها ثانية.

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

-----------------------------

4- الآن سنقوم بتصميم طية الوشاح

نقوم مجددا برسم مستطيل صغير بإستخدام أداة Rectangle Tool وبنفس الإرتفاع للشكل الأول ( نهاية الوشاح ) ولكن العرض صغير كما فى الصورة
ومن شريط الأدوات نذهب إلى Edit > Transform > Perspective للتحكم المخصص فى الشكل كما تعلمنا فى الدروس السابقة
ثم نقوم بتصغير الشكل الداخلي للمستطيل الصغير وذلك من خلال الإمساك بالماوس بأحد أطرافه ثم التحريك للداخل .

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


5- بعد الإنتهاء من طبقة ( نهاية الوشاح ) نضيف لها تأثير كتدريج اللون Gradient Overlay بهذه الإعدادات كما فى الصورة التالية

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


6- بعد أن إنتهينا من رسم الطية سنقوم أيضا بتغير اللون الخاص بها وذلك بإضافة تدريج خاص لها من خلال Gradient Overlay بهذه الإعدادات كما فى الصورة التالية

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


7- سوف نحصل على هذا الشكل

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

من صندوق الطبقات قم بتجميع الطبقتين فى مجلد كى ننسخهما للجهة اليمنى


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

نضغط على Ctrl + T للتحديد الحر ثم نقف على الشكل فى مساحة العمل وبيمين الماوس نختار إنعكاس الإتجاه Flip Horizontal

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

------------------------------

9- الآن سنقوم بتصميم الجسم العلوى للوشاح

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

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

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


9- بعد الإنتهاء من طبقة ( واجهة الوشاح ) نضيف لها تأثير كتدريج اللون Gradient Overlay بهذه الإعدادات كما فى الصورة التالية

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

وسوف نحصل على هذا التأثير

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

10- أخيرا نحرك طبقات الجهة اليمنى للوشاح إلى بداية مستطيل واجهة الوشاح لنحصل على الشكل النهائي

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

مراجعة للخطوات فى صورة متحركة

http://www.abc4web.net/uploaded/1_11331740878.gif (http://www.abc4web.net/vb)

وبذلك نكون قد إنتهينا من الشرح بحمد الله

:fasel8:

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

:PSD:

:morfqat:

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

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


:fasel6:
أبوهمام
.

[عبد حميد]

السلام عليكم ورحمة الله وبركاته
شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

[أبو يوسف]

بارك الله بجهودك اخي ابو همام

:teslam:

[abohmam]

جزاكم الله خيرا إخوانى على المرور والتواصل

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

بالتوفيق

[أبوفاطمه]

شـكــ وبارك الله فيك ـــرا لك ... على هذه الدروس الشيقه

[abohmam]

شـكــ وبارك الله فيك ـــرا لك ... على هذه الدروس الشيقه

حياك الله أخانا فهمي

أشكر لك مرورك وأتمنى لك الفائدة

[جروح بارده]

ما شاء الله

ابدعت بالشرح

بارك الله فيك

[أبو الوليد]

بارك الله فيك أخي أبا همام :abc_022: درس رائع جزاك الباري خيرا

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

[الجنتل]

بارك الله فيك أبو همام
دروس روعه
هل انتهت السلسله أم شي باقي
لاني أريد ان اصنع لها كتاب ألكتروني

[طيف عآبر]

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

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

لي عودة بالتطبيق بس انصب البرنامج

تحيتي

[طيف عآبر]

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

هذا تطبيقي بس أحس فيه خطأ. بالزاويه الصغيره

http://www.pal3shq.com/up/uploads/images/domain-04f7b47d7d.jpg


تحيتي

[abohmam]

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

هذا تطبيقي بس أحس فيه خطأ. بالزاويه الصغيره

تحيتي

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

حياك الله

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

http://im23.gulfup.com/2012-03-14/1331737682341.jpg

مراجعة سريعة للتطبيق

http://www.abc4web.net/uploaded/1_11331740878.gif (http://www.abc4web.net/vb)

مرفق الملف المفتوح

[abohmam]

بارك الله فيك أبو همام
دروس روعه
هل انتهت السلسله أم شي باقي
لاني أريد ان اصنع لها كتاب ألكتروني

وفيك بارك الله أخى الجنتل لفتة طيبة منك ياطيب

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

سيتم إضافة مجموعة جديدة قريبا إن شاء الله تعالى

هناك دروس يستكملها أخى أبو الوليد إن شاء الله تعالى

[طيف عآبر]

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

حياك الله

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

http://im23.gulfup.com/2012-03-14/1331737682341.jpg

مراجعة سريعة للتطبيق

http://www.abc4web.net/uploaded/1_11331740878.gif (http://www.abc4web.net/vb)

مرفق الملف المفتوح

الله يعافيك اخوي على الملاحظات بالفعل في مكانها

ان شاء الله احاول مرة ثانيه اطبقه

لك الشكر

[طيف عآبر]

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

محاوله للتطبيق مرة ثانيه

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

http://www.pal3shq.com/up/uploads/images/domain-766dd13187.jpg

احترامي

[abohmam]

تسلم الأيادى

هذه المرة تمام ماشاء الله

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

[رامي مشتهى]

شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

[مصطفى أبو عبد الرحمن]

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


موفق بإذن الله ... لك مني أجمل تحية .

[أبو صخر]

http://www.karom.net/up/uploads/13141371723.gif

[أبوعبدالرحمن]

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

[العراق]

شكراااااااااااااااااااااا اااااااااااااااااااا

[abohmam]

بالتوفيق لكم جميعا إخواني

أشكر لكم مروكم وتواصلكم

[ماستر فيوز]

:abc_152::abc_138::abc_023::abc_052:

[المعتمد]

شكراااااااااااااااااااااا اااااا

[الرجل الميت]

:abc_085::abc_050::abc_138::abc_152::abc_028:

[abohmam]

جزاكم الله خيرا اخواني جميعا

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

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

[قولولها]

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

مبدع إلى الأمام دائماً في ميزان حسناتك

[عدي حسن جعفر]

حلووووووووووووووووووووووو وووووووووووو

[الكناني]

مشكوووووووووووووووووووووو ر بس ابي اخذها يلعن ابو المنتدى

[المصمم]

شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

http://up.hawahome.com/nupload/438498_1311209852.gif

[صادق الموسوي]

شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

[كفى بالموت واعظا]

وعليكم السلام ورحمة الله وبركاته
درس شيق ورائع بارك الله فيكم

[صقر الحقيقة]

الدرس رائع

[زهرة فلسطين]

يسلموا يديك

[قسورة قادم]

جزاك الله خيرا و رحم الله والديك

[أبو بندر]

شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

[أبوربيع]

مشكووووورررررررر

[تركمان]

shukran 3la maghodk :abc_005:

[شرف الجزائر]

موضوع راااااااااااااااائع ...بارك الله فيك

[زوهير]

شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

[زوهير]

شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

[المحترف فالكون]

شكرا ً لك أخى

[جميل علي]

مشششششششششششششششكور...........

[abohmam]

جزاكم الله خيرا إخوانى جميعا

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

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

[فتى الدموع]

:abc_050::abc_050::abc_050:مشكوووووووو� �وووور