إعـــــــلان

تقليص
لا يوجد إعلان حتى الآن.

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

تقليص
هذا الموضوع مغلق.
X
X
 
  • تصفية - فلترة
  • الوقت
  • عرض
إلغاء تحديد الكل
مشاركات جديدة

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





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

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


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


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



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



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





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


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


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



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

    Inner Glow
    Gradient Overlay
    Stroke









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





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




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


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

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

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



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


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

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


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


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


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


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





    ـــــــــــــــــــــــــ ــــــــــ< تقبــــــــــــــــــــــ ـــــــــلوا تحيات أخيكم أبو الوليد >ــــــــــــــــــــــــ? ?ـــــــ
    الملفات المرفقة

  • #2
    شرح جميل جداً

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

    تعليق


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

      تعليق


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

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

        تعليق


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

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

          تعليق


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

            تعليق


            • #7
              [frame="7 90"]


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

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

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

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



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



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


              [/frame]
              التعديل الأخير تم بواسطة كينج نت; الساعة 12-11-2010, 09:58 PM.

              تعليق


              • #8

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

                تعليق


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

                  تعليق


                  • #10
                    بسم الله الرحمن الرحيم

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

                    تعليق


                    • #11
                      حياكم المولى وبارك فيكم شكرا لمروركم

                      تعليق


                      • #12
                        ألف شكر وكل عام وأنت بألف خير

                        تعليق


                        • #13

                          تعليق


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

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

                            تعليق


                            • #15
                              جزاكم الله خيرا وبارك فيكم كل عام وأنتم بخير

                              تعليق

                              مواضيع تهمك

                              تقليص

                              المنتدى: القسم العام نشرت بواسطة: ماريا عبد الله الوقت: 06-08-2025 الساعة 11:33 PM
                              المنتدى: القسم العام نشرت بواسطة: ماريا عبد الله الوقت: 06-04-2025 الساعة 05:29 PM
                              المنتدى: القسم العام نشرت بواسطة: ماريا عبد الله الوقت: 05-31-2025 الساعة 10:07 PM
                              المنتدى: القسم العام نشرت بواسطة: ماريا عبد الله الوقت: 05-30-2025 الساعة 11:48 PM
                              المنتدى: التصنيع والانتاج نشرت بواسطة: HaMooooDi الوقت: 05-30-2025 الساعة 09:36 AM
                              يعمل...
                              X