• Dubai, UAE
  • +971 54 408 4441
  • moe.rayan@gmail.com
الدرس الأول: طريقة أو كيفية تصميم قالب ووردبريس

الدرس الأول: طريقة أو كيفية تصميم قالب ووردبريس

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

كيفية تصميم قالب ووردبريس

او بإمكانك تنزيل الكتاب كامل
اضغط هنا

في هذه السلسة سوف نقوم بإنشاء قالب وسنسميه “معهد الويب” تيمناُ بإسم الموقع سابقاً
في الدرس الاول..

  • 1. سوف نقوم بإنشاء تصميم جميل وبسيط في الفوتوشوب..
  • 2. الدرس الثاني..سوف نقوم بتحويل التصميم من الفوتوشوب الى Html ليعمل على الووردبريس
  • 3. الدرس الثالث سنقوم بتحويل الموقع الى قالب ووردبريس
  • تابعو معي
    نبدأ الدرس الأول
    افتح الفوتوشوب..صفحة جديدة
    900X1100
    العرض:900 بيكسل
    الارتفاع:1100 بيكسل
    (ملاحظة..اختيار الالوان راجعلك)
    اعمل لير جديد
    حدد 25 بيكسل باستخدام اداة الrectangle
    واختار gradient tool انا اخترت هذه الالوان
    # 39a4ff
    و
    # 114dff
    اسحب من اعلى التحديد الى اسفله
    لتصبح في هذا الشكل

    تصميم قالب ووردبريس

    والآن حدد 200 بيكسل كما في الصورة

    تصميم قالب ووردبريس

    الالوان المستخدمة
    # 434343
    و
    #000000
    نسوي شعار بسيط

    تصميم قالب ووردبريس

    نسوي فورم البحث
    باستخدام اداة الrectangle
    نعمل كما في الشكل

    تصميم قالب ووردبريس

    مرة اخرى..بإستخدم اداة الrectangle
    نرسم مستطيل بعرض الصفحة تحت الهيدر بارتفاع 50 بيكسل

    تصميم قالب ووردبريس

    ونطبق نفس الاعدادت

    تصميم قالب ووردبريس

    نرسم خط ابيض بعرض 1 بيكسل تحت القائمة
    بالضغط على shift والسحب من اليمين الى اليسار او العكس
    ونلون الخلفية باللون # e6e6e6
    شوف كيف راح تظهر

    تصميم قالب ووردبريس

    نرسم خط آخر فوق الخط الابيض باللون # 797979 بعرض 1 بيكسل
    لاحظ الصورة

    تصميم قالب ووردبريس

    ارسم خط بهذا الشكل

    تصميم قالب ووردبريس

    ومن ثم الذهاب الى filter>>blur>>motion blur

    تصميم قالب ووردبريس

    نكرر العملية عدة مرات كما في الصورة

    تصميم قالب ووردبريس

    طيب نيجي لمحتوى المقالات
    بأداة الrectangle .. حدد الاخيار fixed size
    الارتفاع :225
    العرض:600
    حدد مساحة كما في الصورة..ولونها بأي لون

    تصميم قالب ووردبريس

    وطبق الخيارات التالية

    تصميم قالب ووردبريس

    تصميم قالب ووردبريس

    تصميم قالب ووردبريس

    تكون عندنا مستطيل رائع بهذا الشكل

    تصميم قالب ووردبريس

    داخل هذا المستطيل..ضع فيه صورة صغيرة لتمثل المقالة او الموضوع
    واكتب فيه اي شيء..
    ثم انسخ المستطيل 3 مرات
    لاحظ الصورة

    تصميم قالب ووردبريس

    الآن نسوي العمود الجانبي
    بنفس اداة الrectangle
    حدد المساحة..وسوي نفس الاعدادات اللي سويناها في المستطيل اللي في الاعلى
    واعمل التالي

    تصميم قالب ووردبريس

    واخيرا
    الفوتر

    راح يكون بسيط..
    فقط باستخدام الrectangle
    سوي مثل هذا الفوتر
    انا استخدمت نفس الوان الهيدر…واستخدمت نفس الاعدادات blending options

    تصميم قالب ووردبريس

    بذلك نكون انتهينا من الفوتوشوب
    لتنزيل ملف الفوتوشوب
    اضغط هنا
    بالدرس الثاني .
    سنتحدث عن كيفية تحويل موقعنا من فوتوشوب الى CSS
    انتظرونا…

    تحياتي

    الدرس الثاني

10 آراء على “الدرس الأول: طريقة أو كيفية تصميم قالب ووردبريس”

  1. تنبيه: dad
  2. يوسف قال:

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

  3. واو قال:

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

  4. عآيض قال:

    ممكن تعطيني الادآة الي استخدمتهآ في الموضوع

  5. IABUQASEAM قال:

    جزاك الله خير اخي الكريم على هذه الجهود
    اين الدرس الثاني اخي الكريم

  6. تنبيه: غير معروف
  7. tina قال:

    awesome 😛

أضف تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *