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

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

تصميم قائمة زرقاء Blue Menu فوتوشوب

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

  • تصميم قائمة زرقاء Blue Menu فوتوشوب

    [frame="7 90"]


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


    (( درس عمل قائمه زرقاء ))



    نفتح صفحة عمل بمقاس 540×440


    نجعل اللون الأمامى 343435
    والخلفى 222222

    نختار اادة التدرج اللونى ثم نوع التدرج Radial



    نسحب من أعلى الى أسفل



    ندرج طبقه جديده

    بإستخدام rounded rectangle بهذه الإعدادات




    أنقر على طبقة العمل لإدارج المسار
    وبيمين الماوس اختر Make Selection ثم OK
    لعمل التحديد


    أجعل اللون الأمامى 007ccb
    والخلفى 004877


    نختار أدة التدرج اللونى ثم نوع التدرج Radial كما فعلنا سابقا
    نسحب من أعلى اليسار الى أسفل اليمين داخل التحديد هكذا





    نضغط (Ctrl + D) لإلغاء التحديد يصبح الشكل هكذا



    نحرك الصندوق للوسط :-
    نعمل (Ctrl + A) لتحديد كامل صفحة العمل
    أو من Select نختار Select All
    نختار أداة التحريك Move Tool او بالضغط على حرف V
    بالوقوف على طبقة الصندوق نقوم بالأتى






    أصبح الشكل كالتالى






    أجعل اللون الأمامى أبيض FFFFFF


    أو نضغط D للرجوع الى الألوان الأفتراضيه
    ثم نضغط X لعكس الألوان (الأمامى أبيض والخلفى أسود)


    الأن نضيف Belnding Options لطبقة الصندوق

    Drop Shadow



    Gradient Overlay



    للحصول على التدرج اللونى السابق تابع الصوره المتحركه





    نضيف عنوان موقعنا (الخط المستخدم Bassam Ostorah)

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




    ليصبح هكذا




    الأن نضيف عدة فواصل


    ندرج طبقة جديده
    بإستخدام أداة rectangular marquee tool




    نعمل تكبير بالضغط على حرف Z ثم الضغط على صفحة العمل عدة مرات حتى نرى التحديد
    نملا التحديد باللون الأبيض

    نعدل خيارات الدمج (blend mode) الى Overlay
    والشفافيه (Opacity) الى 20%






    نحرك الفاصل الى وسط الصندوق بنفس الشكل السابق





    نضاعف طبقة الفاصل بالضغط على (Ctrl + J)
    ونحركها لأسفل 30 بيكسل


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

    أو


    2- الضغط على مفتاح Shift ثم نضغط على مفتاح التحريك لأسفل 3 مرات


    بمعنى ان الضغط على مفتاح التحريك لأسفل يحرك 1 بيكسل
    أما Shift مع المفتاح تحرك 10 بيكسلات


    نكرر العمل عدة مرات يصبح الشكل هكذا




    الان نضيف اللينكات ونفصلها بـ 30 بيكسل
    الخط المستخدم MCS FREEDOM





    الان نعمل تأثير hover على العمل ليصبح الشكل جميلا


    ندرج طبقة جديدة ونسميها hover


    بإستخدام أداة rectangular marquee tool
    نعمل تحديد بأبعاد 260 × 30 حول أى لينك وليكن الثانى
    نملا التحديد باللون الأبيض ffffff




    نعدل خيارات الدمج (blend mode) الى Soft Light
    والشافيه (Opacity) الى 20%


    الشكل النهائى بعد إخفاء الخلفيه




    تحميل ملف الـ PSD مع الخطوط المستخدمه


    * بعد التركيب بالفرونت بيدج كما فى شرح أخى الدمشقى
    * أو شرح أخى أبو همام بلغة CSS

    معاينة التطبيق
    من هنا


    أخير لا نُجيز إستخدامه فيما حرم الله



    [/frame]


  • #2
    رد: درس تصميم قائمة زرقاء

    هنا توضع التطبيقات بإذن الله

    1- تطبيق أخى أبو همام




    1- تطبيق أخى أبو الوليد

    التعديل الأخير تم بواسطة محمود عفيفى; الساعة 14-02-2010, 01:58 AM.

    تعليق


    • #3
      رد: درس تصميم قائمة زرقاء

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

      تعليق


      • #4
        رد: درس تصميم قائمة زرقاء

        جزاك الله خيرا أخى محمود على هذا الدرس الرائع

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

        لك أجمل تحية

        تعليق


        • #5
          رد: درس تصميم قائمة زرقاء

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

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

          تعليق


          • #6
            رد: درس تصميم قائمة زرقاء

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

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

            لك أجمل تحية
            حياك الله أستاذنا أبو همام وبارك الله فيك
            وفقك الله لما يحب ويرضى

            تعليق


            • #7
              رد: درس تصميم قائمة زرقاء

              حياك الله أخى محمود وعذرا على التأخير

              وهذا تطبيقي مع تغير اللون المستخدم والخلفية





              أتمنى أن يعجبك أحدهم

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

              تعليق


              • #8
                رد: درس تصميم قائمة زرقاء

                ما شاء الله روعه أخى أبو همام
                ربنا يزيدك من فضله

                التعديل الأخير تم بواسطة محمود عفيفى; الساعة 14-02-2010, 03:03 AM.

                تعليق


                • #9
                  رد: درس تصميم قائمة زرقاء

                  شرح وواضح ورائع
                  جزاك الله خيرا أخي محمود وبارك الله فيك

                  تعليق


                  • #10
                    رد: درس تصميم قائمة زرقاء

                    بوركت أخى أبو يوسف
                    فين التطبيقات يا حج

                    تعليق


                    • #11
                      رد: درس تصميم قائمة زرقاء

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

                      مشكور أخي العزيز محمود العفيفي

                      درس مميز وشرح واضح واحترافي

                      لنا عوده بالتطبيق بإذن الله تعالى

                      جزاك الله عنا كل خبر



                      .

                      تعليق


                      • #12
                        رد: درس تصميم قائمة زرقاء

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

                        تعليق


                        • #13
                          رد: درس تصميم قائمة زرقاء

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

                          تعليق


                          • #14
                            رد: تصميم قائمة زرقاء Blue Menu فوتوشوب

                            بارك الله فيك أخى الهمام

                            تعليق


                            • #15
                              رد: تصميم قائمة زرقاء Blue Menu فوتوشوب

                              جزاك الله كل الخير ولي عوده بالتطبيق

                              بارك الله فيك

                              تعليق

                              مواضيع تهمك

                              تقليص

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