موضوع: تعلم كيفية تصميم واجهة موقع احترافية ببرنامج الفوتوشوب

ردود: 14 | زيارات: 7966
  1. #1
    عضو نشيط
    صور رمزية telpo
    تاريخ التسجيل
    Jul 2004
    المنطقة
    في أي مكان .. تظل الهوية إسلامية عربية
    ردود
    972

    Thumbs up تعلم كيفية تصميم واجهة موقع احترافية ببرنامج الفوتوشوب

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

    قبل البدأ : كلمة CGTelpo هي علامة مائية لحفظ الحقوق فقط وليست ضمن الدرس

    نبدأ بمشيئة الله

    أولاً قم بفتح ملف جديد بحجم 770*800 كما بالصورة



    ثم قم بتلوين الخلفية باللون الرصاصي ولكن حاول أن تجعله في فاتح اللون
    واليك كود اللون #F0F0F0


    ثم قم برسم مربع تحديد كما بالصورة التالية




    قم بفتح لاير جديدة
    وقم بتلوينها باللون الأزرق ثم قم بفتح التأثيرات المخصصة لهذه اللاير كما في الصورة



    قم بالاشارة على الخصائص التالية كما بالصورة



    وفي كل خاصية أدخل القيم التالية

    Drop Shadow



    Bevel and Emboss



    Gradient Overlay :



    هذه هي أكواد اللون

    First : #014FA0
    Second : #166AC1

    هنا توضيح لكيفية وضع كود اللون






    1- والان قم باختيار اداة الشك كمال بالصورة السفلي
    2- واختر هذا الشكل من القائمة



    قم برسمه ومن ثم قم باختيار اداة القلم

    ثم اضغط بالزر الايمن على الشكل الذي رسمته تظهر لك هذه القائمة اختر منها


    ستظهر لك كما بالشكل التالي



    قم بالتأكد أنك على هذه اللاير ثم اضغط
    Delete



    والان قم باختيار مربع التحديد




    ارسم تحديداً كالذي في الصورة



    قم بتطبيق جميع الخصائص عليه كما فعلنا سابقاً عدا اللون في الـ
    Gradient Overlay
    اجعلها كما في الصورة التالية
    كود اللون
    First : #FFFFFF
    Second : #D6D6D6



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



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



  2. #2
    عضو نشيط
    صور رمزية telpo
    تاريخ التسجيل
    Jul 2004
    المنطقة
    في أي مكان .. تظل الهوية إسلامية عربية
    ردود
    972
    والان قم باختيار مربع التحديد وارسم به تحديداً كما في الصورة التالية



    ثم من قائمة

    Select ------------ Feather

    أو اضغط

    Ctrl + Alt + D

    واختر القيمة واحد كما هو موضح







    في الصورة التالية







    1- اختر أداة التعبئة... وان لم تكن موجودة وموجود بدلاً منها أداة الدلو اضغط ضغطة طويلة بالماوس تظهر لك أداة التعبئة قم باختيارها

    2- اضغط هنا لجعل اللون انفرادياً ولا تنسي أن هذه الالوان مأخوذة من الالوان الرئيسية الموجودة في الادوات

    3 - قم باختيار المربع الثاني كما في الشكل





    اسحب الماوس بطريقة لطيفة لعمل هذا التحديد الأبيض







    اضغط بالزر الايمن للماوس على اللاير الخاصة بكلمة

    O2learn

    كما هو موضح بالصورة







    اختر

    Select -------- Modify ----------- Expand







    اجعل القيمة 3 كما بالصورة







    اختر

    Select --------- Inverse







    ثم اضغط على زر

    Delete







    بهذا تكون قد أضفت التأثير الي البانر









    والان هيا لنصمم الأزرار

    أولاً نقوم بانشاء مساحة عمل جديدة حتي نعبث(eyelash) فيها كما نريد بدون التأثير على العمل .......... حتي أنك من الممكن أن تقوم بعمل عدة أزرار وتختار أيها أفضل ويتناسب مع التصميم ....... المهم بلاش تطويل لحسن تقولوا عامل نفسه فاهم ::eyelid::

    طبعاً لعمل هذه المساخو انظر الي الصورة في الاسفل







    الان قم باختيار أداة الـ

    Rounded

    كما في الصورة التالية









    ابدأ في رسم الحجم الذي تراه مناسباً

    واجعل اللون رصاصي فاتح

    كود اللون

    #E9E9E9

    تظهر كما في الصورة









    قم بتكرارها مرة أخر وذلك باتباع الخطوات في الصورة التالية









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

    Ctrl + T

    ثم ابدأ التصغير ولاتنسي تثبيت يدك على زر الـ

    Shift

    الان قم بالذهاب الي مشروع الموقع الاول وختار الموبع الازرق في البانر واضغط على اللاير الخصصة له بالزر الايمن للماوس ثم اختار

    Copy Layer Style

    كما بالصورة







    ثم اذهب الي الزر واضغط على اللاير التي كنا قد نسخناها بالزر الأيمن ثم

    Paste Layer Style

    كما بالصورة التالية









    قم بتكرار نفس عملية لصق التأثير على الجزء الخلفي للزر .......... المقصود اللاير الثاني



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




  3. #3
    عضو نشيط
    صور رمزية telpo
    تاريخ التسجيل
    Jul 2004
    المنطقة
    في أي مكان .. تظل الهوية إسلامية عربية
    ردود
    972
    والان قم بدمج اللاير ونقلها الي المشروح الأصلي وتكرار الزر ......... ثم الكتابة عليه فيصبح بهذا الشكل









    والان لنضع جزء الاخبار



    قم باختيار أداة الـ

    Rounded

    كما بالصورة التالية







    وقم برسم مربع في منتف الموقع ثم قم بعمل

    Paste Layer Style

    على اللاير الخاصة بهذا المربع



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









    قم بعمل

    Restrize

    للصورة اذا كانت على هيئة ماسك كما هو موضح في الصورة التالية









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









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











    والان بعد اضافة صورة سيرفر وبعض البيانات يصبح بهذا الشكل







    والان لنصمم جزء لواجهة بيانات الموقع



    قم باختيار أداة القلم كما بالصورة التالية







    قف في منتصف الصفحة وارسم على لاير جديدة خط مستقيم وذلك بالضغط على زر الـ

    Shift







    والان قم برسم دائة أو مربع تحديد ثم اختر



    Select ------------ Feather



    وضع القيمة 10 ثم ثم بالضغط على زر Delete مرة أو مرتين











    كرر نفس الخطوة مع الجزء السفلي



    والان باضافة بعض الصور والكلام يصبح هذا هو الشكل النهائي للموقع











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



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


    والجزء القادم بمشيئة الله سيكون في كيفية عم الانعكاسات كالتي على السيرفر وأيضاً التأثيرات الموجودة على البانر



    تــــــــــــــابعونا

  4. #4
    عضو نشيط
    صور رمزية telpo
    تاريخ التسجيل
    Jul 2004
    المنطقة
    في أي مكان .. تظل الهوية إسلامية عربية
    ردود
    972
    هذا الرابط به الدرس والصور المستخدمه فيه مع الملف المصدري للمشروع

    http://eyelash.ps/upload/admin/telpo/Tutorials/eX.rar

    والله المستعان

  5. #5
    مجهود جميل الله ينور عليك

    وللأمام دايما

    وياريت لو تحط دروس لعمل أزرار شكلها جميل وهيدر

  6. #6

    Thumbs up

    بارك الله فيك ياأخى
    أرجو منك إعداد دروس للمبتدئين أمثالى
    أو حتى إرشادى إلى مواقع تشرح كتابة
    أو ملفات شرح pdf

  7. #7
    مجهود طيب جدا منك اخي الكريم
    بارك الله فيك و جعله في ميزان حسناتك

  8. #8
    مجهود رائع بمعنى الكلمه .. وساكون من المتابعين لك دايم



    شكرا لك على الشرح الوافي والدرس المذهل .. لاتحرمنا كمان وكمان



    احترامي لك .. المهندســـــــــــــــــــــــــــــــــه

  9. #9
    روابط الصور لا تعمل لكن مشكور كتير

  10. #10
    عضو متميز
    صور رمزية abou_mazen
    تاريخ التسجيل
    Feb 2005
    المنطقة
    المغرب/البيضاء
    ردود
    3,875
    مجهود طيب جدا منك اخي الكريم
    بارك الله فيك و جعله في ميزان حسناتك



    بأبي أنت وأمي يا رسول الله



    فدتك نجد و طيبة ومكة وأرض الأسراء


    اللهم احشرني مع نبيك يوم يكون اللقاء


    اجمل شئ في الحياة حينما تكتشف اناس قلوبهم مثل اللؤلؤ المكنون في الرقة والبريق والنقاء قلوبهم مثل افئدة الطير
    اللهم اني احبهم فيك

    لك نصحي وما عليك جدالي ........وافة النصح ان يكون جدال

    دعوة لحفظ القرآن الكريم عن طريق المنتدى










  11. #11
    ابدعت اخوي وتشكر على هذا الدرس نرجو منك اكمال الدرس اذا كان فية مجال

    تشرح لنا كيف نعمل menu بشكل جميل وونتظر اذا كان عندك دروس اضافية

    نحن محتاجين مثل هذه الدروس وانا عندي مشروع تصميم موقع لجامعة

  12. #12
    مجنون AfterEffects
    صور رمزية فن ثلاثي
    تاريخ التسجيل
    Jun 2005
    المنطقة
    الســعوديــــة
    ردود
    1,087
    يعطيك العفية أخي على ماقدمت



    مو لازم التوقيع

  13. #13
    عضو
    صور رمزية sherroki
    تاريخ التسجيل
    Mar 2006
    المنطقة
    ام الدنيا
    العمر
    34
    ردود
    79
    ماشاء الله علي مجهودك
    في المقدمة دائما
    انا مبسوطة جدا من التمرين لاني كنت محتاجاه و مكنش في وقت ادور عليه
    فحاسة ان حظي كويس اوي الحمد لله

    اما بالنسبة للاخ اللي كان عايز كتاب فوتوشوب للمبتدئين pdf (انجليزي)
    فانا عندي كتاب الفوتوشوب سي اس 2 و جاهز للتحميل بس نظرا لضيق الوقت حاليا
    فممكن ارسل لك اللينك الخاص بيه غدا بأذن الله
    أخر تعديل بواسطة sherroki في 22 / 04 / 2006 الساعة 05:30 PM

  14. #14
    عضو فعال
    صور رمزية tariqtaha
    تاريخ التسجيل
    Nov 2004
    المنطقة
    البحرين
    العمر
    32
    ردود
    150
    عمل ممتاز وللأمام دائما،،،، جزاك الله خيرا

Bookmarks

قوانين الموضوعات

  • لا يمكنك اضافة موضوع جديد
  • لا يمكنك اضافة ردود
  • لا يمكنك اضافة مرفقات
  • لا يمكنك تعديل مشاركاتك
  •  
  • كود BB مفعّل
  • رموز الحالة مفعّل
  • كود [IMG] مفعّل
  • [VIDEO] code is مفعّل
  • كود HTML معطل