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

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

درس عمل زر ويب أنيق وجميل 2

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

  • درس عمل زر ويب أنيق وجميل 2

    [frame="1 95"]
    بسم الله الرحمن الرحيم
    السلام عليكم ورحمة الله وبركاته

    خطوات الدرس:

    1- افتح صفحة عمل جديدة ولتكن بمقاس 120 × 50 بكسل. وقم بعبئة الخلفية بلون أسود فاتح (838383#)
    2- اخنر أداة Ronded Rectangle Tool واضبط الخيارات كما في الصورة أدناه ثم ارسم مستطيلا.



    3- املأ الشكل المرسوم باللون الأسود (111111#) فتظهر الصورة هكذا:




    4- من قائمة : طبقة > نمط الطبقة > خيارات الدمج
    Layer > Layer Style > Blending Options
    أو بالنقر بالزر على الشفيفة من قائمة الشفائف واختيار : Blending Options أو خيارات الدمج ثم قم بضبط القيم حسب الصور:

    Drop Shadow


    Inner Glow



    Bevel and Emboss



    Gradient Ovrlay



    Stroke



    فتصبح الصورة هكذا:



    5- ننشيء طبقة جديدة ومن قائمة الأدوات نختار أداة القلم Pencel Tool ونضبط الحجم على 2 بكسل ونغير اللون الافتراضي إلى القيمة eee1cd# ونرسم خطاً في اسفل الصورة ليصبح شكلها هكذا :



    6- من قائمة : طبقة > نمط الطبقة > خيارات الدمج
    Layer > Layer Style > Blending Options
    أو بالنقر بالزر على الشفيفة من قائمة الشفائف واختيار : Blending Options أو خيارات الدمج ثم قم بضبط القيم حسب الصور:

    Inner Shadow



    Outer Glow



    النتيجة:




    7- ابق المؤشر على الطبقة السابقة (طبقة Pencel).
    اذهب لقائمة : Layer > Layer Mask > Reveal All وانقر على Reveal All
    ومن قائمة الأدوات اختر أداة Gradient Tool واضبط خياراتها من الأعلى كما في الصورة:



    ثم اسحب المؤشر كما في الصورة وانتبه لنقطة البداية والنهاية ( قم بتكبير الصورة ليسهل تنفيذ العمل)



    النتيجة:



    8- من قائمة الأدوات اختر أداة القلم Pen Tool واضبط خيارات الأداة من الشريط في الأعلى كما في الصورة:



    الآن ارسم شكلاً واملأه باللون الأسود كما في الصورة:



    9- من قائمة: Filter > Blur > Guassian Blur واضبط قيمة Radius على 0.6 بكسل.
    قد تأتيك رسالة تطلب منك تحويل الطبقة لطبقة نقطية Rasterize the layer فوافق عليها.

    10- عد للطبقة الأساسية التي رسمنا عليها الزر في الخطوة رقم 2 وانقر عليها مع استمرار على مفتاح ctrl فنحصل على التحديد بالشكل الآتي:



    اعكس التحديد من قائمة Select > Inverse وعد إلى الطبقة الأخيرة التي رسمنا عليها الشكل في خطوة رقم 8 وبعد النقر عليها انقر على مفتاح delete من لوحة المفاتيح ثم الغ التحديد بالنقر على ctrl+D
    النتيجة:



    11- ضاعف هذه الطبقة بالنقر بالزر الأيمن عليها ثم اختيار Duplicate Layer ثم اقلبها من قائمة Image > Transform > Flip Horizontal واسحبها إلى الجانب الآخر من الشكل لتصبح هكذا:



    12- عد للطبقة الأساسية وانقر عليها مع النقر المستمر على مفتاح ctrl فيتم تحديد الشكل. أنشيء طبقة جديدة ومن القائمة Edit > Stroke اضبط القيم كما في الصورة:



    13- قم بإلغاء التحديد بالنقر على ctrl+D ثم قم بتطبيق الخطوة رقم 4 مرة أخرى هنا مع ملاحظة البداية والنهاية لسحب أداة Gradient كما في الصورة:



    اضبط قيمة opacity على 75% كما في الصورة:




    النتيجة:



    14- قم بدمج الطبقات كلها في طبقة واحدة من قائمة Layer > Merge Visible ثم قم بمضاعفة الطبقة الجديدة واعكسها من قائمة:
    Image > Transform > Flip Vertical
    ومن القائمة Layer > Layer Mask > Reveal All ننقر على Reveal All ونستخدام أداة Gradient tool كما استخدمناها في الخطوات السابقة ليصبح الشكل النهائي للتطبيق هكذا:







    انتهى الدرس والحمدلله الذي بنعمته تتم الصالحات.


    تحياتي الطيبة: ذوالجناح
    [/frame]


  • #2
    رد: درس عمل زر ويب أنيق وجميل 2

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

    تعليق


    • #3
      رد: درس عمل زر ويب أنيق وجميل 2

      جزاك الله خيرا
      ان شاء الله فى الصباح أطبقه
      شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

      تعليق


      • #4
        رد: درس عمل زر ويب أنيق وجميل 2

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

        .

        تعليق


        • #5
          رد: درس عمل زر ويب أنيق وجميل 2

          جزاك الله خيرا أخى ذا الجناح

          درس رائع بل أكثر من رائع مع هذا الشرح الماتع

          وهذا تطبيقي على السريع إن شاء الله يعجبك



          أما عن طريقة الإستفادة من مثل هذه الأزرار فقد قمت بعمل واجهة للكتب الإلكترونية أو لتجميعة إسطوانات ( كمثال فقط)


          الحجم الأصلي ( 780:580 )

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

          تعليق


          • #6
            رد: درس عمل زر ويب أنيق وجميل 2

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

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

            درس جميل وشرح واضح

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

            .

            تعليق


            • #7
              رد: درس عمل زر ويب أنيق وجميل 2


              13- قم بإلغاء التحديد بالنقر على ctrl+D ثم قم بتطبيق الخطوة رقم 4 مرة أخرى هنا مع ملاحظة البداية والنهاية لسحب أداة Gradient كما في الصورة:
              بعد تطبيق الخطوه الرابعه
              طلع معايا الشكل كده بعد ما كان أفضل من هذا

              تعليق


              • #8
                رد: درس عمل زر ويب أنيق وجميل 2

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

                تعليق


                • #9
                  رد: درس عمل زر ويب أنيق وجميل 2



                  ما طلع معي حلو اعملت زر تاني

                  تعليق


                  • #10
                    رد: درس عمل زر ويب أنيق وجميل 2

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

                    تعليق


                    • #11
                      رد: درس عمل زر ويب أنيق وجميل 2

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

                      تعليق


                      • #12
                        رد: درس عمل زر ويب أنيق وجميل 2

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

                        طريقه رائعه وجميله جداً ...

                        ساقوم بعمل افضل من هذا الزر الي صممته ليكون من ازرار الستايل الجديد ان شاء الله ..

                        تفضل هذا تطبيقي المتواضع وقد طبقت بعض الخطوات وليس كلها .

                        تعليق


                        • #13
                          رد: درس عمل زر ويب أنيق وجميل 2

                          وهذا تطبيق مع الخيال لكل الزر

                          تعليق

                          مواضيع تهمك

                          تقليص

                          المنتدى: القسم العام نشرت بواسطة: ماريا عبد الله الوقت: 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