شريط تنقل أسود مع أزرار ( درس مترجم )

[أبو الوليد]

http://www.abc4web.net/vb/imgcache2011/10244.abc4web.gif (http://img.farfosh.com/)

http://www.abc4web.net/vb/imgcache2011/10246.abc4web.gif (http://img.farfosh.com/)


بسم الله الرحمن الرحيم :abc_022: أمتعكم الله بالصحة والعافية

1.نفتح مشروع جديد بمقاس 430×130 بيكسل ونملأ الخلفية باللون الأسود رمادي 161616 #

http://www.abc4web.net/vb/imgcache2011/10248.abc4web.png

2.نضيف لير جديد ومن ثَمّ نختار أداة التحديد المستطيلة ( Rectangular MarqueeTool ) بقياس 400×34 ونملأ التحديد باللون 393939 #

http://www.abc4web.net/vb/imgcache2011/10251.abc4web.png

3.الشكل الناتج

http://www.abc4web.net/vb/imgcache2011/10253.abc4web.png


4.من قائمة الليرات نختار خيارات المزج ( Blending Options ) وسنعمل على الخيار Gradient Overlay بالقيم الآتية :


http://www.abc4web.net/vb/imgcache2011/10256.abc4web.png

5.نضيف لاير جديد ونحدد على الشريط بالضغط على Ctrl وزر الماوس الأيسر ، ثم نملأ التحديد بالباترين المرفق



http://www.abc4web.net/vb/imgcache2011/10259.abc4web.png


6.نخفف الضبابية ( Opacity ) إلى 30 % والنتيجة :

http://www.abc4web.net/vb/imgcache2011/10260.abc4web.png

7.نضيف لاير جديد ، وبأداة التحديد المستطيلة ( Rectangular Marquee Tool ) نرسم تحديد داخل الشريط بقياس 300×26 كالآتي :

http://www.abc4web.net/vb/imgcache2011/10261.abc4web.gif

8.نملأ التحديد باللون 161616 # كما في المثال التالي :

http://www.abc4web.net/vb/imgcache2011/10262.abc4web.gif


9.الأن من خاصية خيارات المزج ( Blending Options ) سنعمل على ثلاث تأثيرات وهي :

Inner Glow
Gradient Overlay
Stroke

http://www.abc4web.net/vb/imgcache2011/10263.abc4web.png



http://www.abc4web.net/vb/imgcache2011/10264.abc4web.png



http://www.abc4web.net/vb/imgcache2011/10265.abc4web.png


10.خطوة مهمة : نضيف لاير جديد ثم نضع تحديد بقياس 1×26 أو بأداة قلم الرصاص ( Pencil Tool ) نرسم خط من أعلى إلى أسفل لنحصل على الآتي :



http://www.abc4web.net/vb/imgcache2011/10266.abc4web.png


11.نطبق تأثير Gradient Overlay على اللاير الذي أنشأناه آنفا بالإعدادات التالية :


http://www.abc4web.net/vb/imgcache2011/10267.abc4web.png


12.الشكل الناتج :

http://www.abc4web.net/vb/imgcache2011/10268.abc4web.gif

13.نضاعف اللاير ( Duplicate Layer ) ونضع الليرات المضاعفة في أماكن محددة من الشريط بحسب الحاجة

14.ندمج بعد ذلك الليرات التي ضاعفناها ثم نقلل الضبابية ( Opacity ) إلى 50 %

15.نضيف لاير جديد ونختار أداة القلم ( Pencil Tool ) ونرسم الشكل التالي : [ يجب تكبير الصورة لإتقان الشكل ]


http://www.abc4web.net/vb/imgcache2011/10269.abc4web.png


16.نضاعف اللير ( الشكل الذي رسمناه ) ثم نذهب إلى تحرير > تحويل > توجيه أفقي ( Edit > Trasform > Flip Horizontal ) ثم بأداة التحريك ( Move Tool ) ننقله إلى الطرف الآخر من السطر المقابل كمايلي :

http://www.abc4web.net/vb/imgcache2011/10270.abc4web.jpg (http://img.farfosh.com/)

17.نضاعف اللير ونفعل نفس الشيء حتى ننقل الشكل بجانب جميع الأسطر.

18.ندمج الليرات التي ضاعفناها ثم نغير النمط ( Mode ) إلى Softlight مع تقليل الضبابية ( Opacity ) إلى 50 % لنحصل على التالي :

http://www.abc4web.net/vb/imgcache2011/10271.abc4web.gif (http://img.farfosh.com/)

19.نضيف لاير جديد ونختار أداة التدرج ( Gradient Tool ) بالخيار التالي :

http://www.abc4web.net/vb/imgcache2011/10272.abc4web.png (http://img.farfosh.com/)

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

http://www.abc4web.net/vb/imgcache2011/10273.abc4web.png (http://img.farfosh.com/)

21.نضغط على Ctrl وبزر الماوس الأيسر على لاير الشريط الداخلي لننشئ تحديد حول الشريط ، ثم نطبق تحديد > عكس التحديد ( Select > Inverse ) ثم نضغط على زر المسح ( Delete ) ثم نغير النمط ( Mode ) إلى Overlay ونسبة الغموض ( Opacity ) إلى 40 % والشكل الناتج :

http://www.abc4web.net/vb/imgcache2011/10274.abc4web.png (http://img.farfosh.com/)

22.الشريط الآن جاهز ويمكنك إضافة العناوين الخاصة بكل قسم :abc_028: مع إضافة التأثيرات على الخط ليزيد من جمالية التصميم

http://www.abc4web.net/vb/imgcache2011/10275.abc4web.png (http://img.farfosh.com/)

http://www.abc4web.net/vb/imgcache2011/10246.abc4web.gif (http://img.farfosh.com/)



ـــــــــــــــــــــــــ ــــــــــ< تقبــــــــــــــــــــــ ـــــــــلوا تحيات أخيكم أبو الوليد :abc_025: >ـــــــــــــــــــــــــ ـــــــ

[فلسطيني]

شرح جميل جداً

بارك الله فيك اخي ابو الوليد

:abc_152:

[الدمشقي]

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

[جروح بارده]

بوركت الانامل على الشرح

يعطيك العافية

[أبو يوسف]

سلمت يداك أخي الكريم وليد

إن شاء الله سأحاول التطبيق بعد التفرغ

[أبو الوليد]

جزاكم المولى خيرا على التواصل :abc_086: مروركم أسعدني

[كينج نت]

http://img198.imageshack.us/img198/9667/54861876.gif

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

حياك الله أخي العزيز أبوالوليد

ماشاء الله درس مميز وشرح احترافي ينفع لواجهات المواقع وخصوصاً مع Css3

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

http://img59.imageshack.us/img59/8162/64344772.png

بارك الله بجهودك الطيبة وجزاك عنا كل خير

:abc_152:

مع خالص شكري وتقديري

http://img198.imageshack.us/img198/9667/54861876.gif

[رجل السيف]

ربي يمتعك بكل خير أخي العزيز أبو الوليد درس جميل ومميز من دروسك الرائعه التي
تتحفنا بها بين الفينة والاخرى :abc_028::abc_022:
اشكرك جزيل الشكر والشكر موصول لي اخونا كينج نت على التفاعل وسرعة التطبيق
وعلى مجهوداته الطيبة التي يبذلها
لي عودة مع التطبيق :abc_088:
تقبل خالص شكري وتقديري

[toufik_alg]

بارك الله بجهودك الطيبة وجزاك عنا كل خير

[mero]

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

بارك الله فيك اخي الفاضل ابو الوليد
شرح رائع ودرس اروع
لك مني اجمل تحية :abc_152:

[أبو الوليد]

حياكم المولى وبارك فيكم :abc_152: شكرا لمروركم

[ام هشام]

ألف شكر وكل عام وأنت بألف خير
http://www.3andna.com/photo/ToP/floor/FLOOR_3ANDNA14.gif

[ام هشام]

http://www.waraqat.net/2008/09/eid5.gif

[abohmam]

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

إن شاء الله بمجرد تثبيت البرنامج لى عودة مع التطبيق

:abc_152:

[أبو الوليد]

جزاكم الله خيرا وبارك فيكم :abc_022::abc_152: كل عام وأنتم بخير

[أميرال النوفل]

:abc_139::abc_139::abc_139::abc_139: