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

[abohmam]

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

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

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

:PS:

تصميم شريط زاوية - وشاح إحترافي الطريقة الأولى abc4web Ribbon 01

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

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

وبعض الأفكار التى يتم إستخدامها فى التصاميم الحديثة " المودرن "

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

اصل التصميم فقط .

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

الدرس الأول : وشاح جانبي ثلاثي الأبعاد بطريقة سهلة ومميزة

صورة لما يمكن أن تحصل عليه من خلال هذا الشرح

1- وشاح يمين
2- وشاح شمال
3- وشاح افقي
4- وشاح راسي
5- أفكار جديدة ومنوعة ..... مثال خاص

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

:photoshop:

بسم الله نبدأ الشرح فى خطوات

1- ننُشئ عمل جديد بالمقاس الذى نريد ثم نرسم الجسم الذى سوف نصمم عليه الوشاح ( وهذا فقط لمعرفة ابعاد الوشاح وإتقانه )

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

2- نرسم مستطيل باللون الذى نريد (FF9C00) على يسار الجسم كما فى هذا الشكل

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

3- نقوم بتغير اللون (995001) ونرسم مستطيل آخر بنفس إرتفاع الشكل الأول ولكن إلى

حافة الجسم من الخارج كما فى هذا الشكل

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

4- نقوم بتحرك هذه الطبقة للاسفل بحيث تكون أسفل طبقة المستطيل الأول وذلك بسحب الطبقة فى صندوق الطبقات إلى أسفل أو ( يمكن

إضافة هذه الطبقة أسفل الطبقة الأولى مسبقا عند الرسم ) ونضغط من لوحة المفاتيح على Ctrl + T للحصول على تحرير الشكل
ملحوظة : يمكننا الوصول إلى هذه الأداة ايضا من قائمة Edit ثم Free

Transform

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

5- نعود الى قائمة Edit ثم Free Transform ونختار Distord
وذلك لجعل تأثير التحرير على الزوايا فقط



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

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

7- نعتمد التغيرات وذلك بالظغط على Enter من لوحة المفاتيح أو بالضغط بالماوس على سهم التحريك أو فى اى جزء من التصميم

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

8- نقوم بإضافة ظل لجسم الوشاح لمزيد من إتقان العمل والحصول على شكل رائع

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

9- العمل النهائي الذى سوف نحصل عليه

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

10 - يمكننا أن نحصل من خلال هذا الشرح وتطبيقه على المزيد من التصاميم مثل صورة العرض التى بالأعلى هكذا

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

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


:fasel7:

تم بحمد الله

وهذا سيكون درسنا القادم إن شاء الله تعالى

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


:abc4web:

حمل الملف المفتوح للتطبيقات من المرفقات

:morfqat:


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

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

:fasel6:
أبوهمام
.

[المصمم]

جزاك الله خيرا على هذا الشرح وفى إنتظار المزيد

[أبو الوليد]

جزاك المولى خيرا أخي أبا همام :abc_022: درس قوي وتصميم مميز ..شكرا لك على الإفادة

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

[abohmam]

ماشاء الله

تطبيقات رائعة أخى أبا الوليد تسلم الأيادي

إن شاء الله سيتم عرض نموذج الشرح و تجميع التطبيقات للتحميل فى قسم vip الخاص بتحميل الأعضاء مجانا

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

سوف نوفرها لهم باشكال والوان مختلفة للتحميل مجانا إن شاء الله

[جروح بارده]

ما شاء الله

ابداع منك اخى

بارك الله فيك

[أبو يوسف]

:teslam:

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

.

[abohmam]

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

تم إضافة الملف المفتوح فى المرفقات للتحميل لمن يريد ان شاء الله

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

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

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

[طيف عآبر]

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

درس جميل هذه محاوله تطبيق
في التطبيق الثاني ما انتبهت للون الا بعد الحفظ


http://www.pal3shq.com/up/uploads/images/domain-68de5ab1f9.jpg

http://www.pal3shq.com/up/uploads/images/domain-15090a7ef1.jpg

/





تحيتي

[abohmam]

رائع ماشاء الله

فى انتظار باقى التطبيقات

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

[رامي مشتهى]

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

مبدع وفنان اشكرك جزيل الشكر اخي

[أبو صخر]

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

[مهلهل]

جزاك الله خيرا على هذا الشرح وفى إنتظار المزيد

[للتميز مكان]

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

[م حجازي]

مشكور على الشغل الجامد دا .. ميه ميه

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

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

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

[المسافر السعودي]

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

[صقور العز]

:abc_023::abc_114::abc_022:

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

الشرح ممتاز

[قلم أحمر]

درس راائع جدا ..
تسلم أخووي وان شاء الله متابعه سلسلة الدروس من البدايه للإحتراف ..

[abohmam]

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

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

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

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

[غريب يا فؤادي]

رووووووووووعه

جزاك الله عالي الجناااااااان

[أبو بندر]

أنت مبدع وشكرا للمعلومات الجيدة

[أبوربيع]

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

[زوهير]

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

[أبو فارس]

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

[ابوشحاتة]

جزاك الله خيرا على هذا الشرح وفى إنتظار المزيد

[سليمان الفحلي]

يا سلام على الإبداع
بارك الله فيكم

[جميل علي]

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

[abohmam]

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

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

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

[ابوشحاتة]

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

[abohmam]

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

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

بالتوفيق

[فتى الدموع]

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

[انيقتي]

تطبيقي
http://cdn.top4top.co/i_14295767001.jpg

[نهر الخير]

محاولة ...يارب تكون صحيحة

[نهر الخير]

http:// http://cdn.top4top.co/p_19r7jf1.png (http://up.top4top.net/)