الموضوع: درس طريقة تصميم ستايل منتدى من البداية إلى النهاية

اقدم لكم اليوم

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

الدرس مطول ويمكن تواجهه صعوبه لو ماتركز او تطمر نقاط ؟

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

في البدايه كل مانحتاج له هو برنامج الفتوشوب للتصميم
وبرنامج الفرنت بيج

بسم الله نبداء

نفتح برنامج الفتوشوب

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




راح نتعلم شغله حلوه بالفتوشوب تساعدك كثير بترتيب تصميمك



لحظ ان رسمة الملف هذي تجعل جميع عملك مرتب
راح نحتاج لها بحافظه للعمود الاول وحافظه للعمود الثاني
وكذالك للهيدر والفولدر





انتهينا من انشاء الحافظات

نطلق الان بالبداء بالعمود الاول


الي مو عارف يضيف ليرة يعلمنا ونقوله

هنا طريقة الاضافة



الان نقوم برسم عمود بالجانب الايسر او الايمن بالاداة التاليه





قم باختيار اداة تدرج الون كما هو موضح بالصوره


هنا طريقة تدرج الون انت تتحكم بالشغله هذي


بعد كذا على التحديد قم بسح اداة التدرج


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


انتهينا الان من العمود


نروح الان وننسخ الحافظه الي باسم العمود التالي



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



هنا شكل الحافظات بعد الانتهاء


نبداء ونضيف ليره مثل ماشرحنا في البدايه عن طريقة اضافة اليره


نرسم مستطيل من طرف العمود للطرف الاخر مثل ماهو موضح بالصوره



وهنا بعد التحسين


نفس الطريقه راح نطبقها على الفولدر


نرسم مستطيل ونضيف له الاضافات الي حابب ان تكون موجوده


كذا انتهينا بالكامل من تصميم الستايل وباقي علينا التقطيع
__________________

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

نظره سريعه عن الستايل وكيف راح يكون تقطيع





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



كيف راح تبداء التقطيع ؟؟

الاجابه : راح نقوم بتقطيع الستايل الى ثلاث خانات

1- الجزء العلوي من الستايل ( الهيدر )2- الجزء الاوسط من الستايل ( الاعمده )3- الجزء السفلي من الستايل (الفوتر )

شوف الصوره قسمتها حسب التوزيع الي ذكرنه



الهيدر : عدد الصور خمس
زاويه يمين +زاويه يسار + صوره تجميله يمين + صور تجميليه يسار + تمدد

الاعمده :
عمود يمين + عمود يسار

الفوتر:
زاويه يمين +زاويه يسار + صوره تجميله يمين + صور تجميليه يسار + تمدد


نحتاج لمعرفة ما الاداوات الي تساعدنا على التقطيع ...

فقط راح نستخدم اداة المربع ( التحديد ) ومقاسات القص ووضحتها لك بالصوره





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

شوف الصوره


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

وتروح تسوي لصق من خلال نفس طريقة القص بس بدل حرف ( X ) نضغط ( V )

وبكذا قدرنا نقطع الستايل



يجب التركيز المقاسات لو تختلف باكسل واحد راح يخرب شغلك كله



وهنا شكل الستايل بعد التقطيع
عدد الصور الي تم تقطيعها 12 صوره شاهد المثال



************************* ***

او من هنا

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

من هنا

طريقة تغيير لون الستايل في اقل من دقيقتان

من هنا

******************


او من هنا شرح بالفوتوشوب والفرونت بيج

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

أضغط على الصورة لتراها بالوضع الموضح


من الصورة العلوية رأيتم كيف تم التقطيع

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

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

+++============+++

بعد التقطيع والحفظ نبدأ فى الدرس اليوم وهوه التوزيع الحر

نفتح الفرونت بيج
نوذيل كافة الاكواد الموضوعة ونجعل الصفحه فارغه
ثم
نحدد ثلاث خلايه عمودية موضح بالصورة التالية


ونحدد أتجاه الخلايا كى يتم التوجيه بالطريقة الصحيحة كما موضح بالصورة التالية


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

يلى الان إداخل ثلاث صفوف داخل كل خليه
مثل الصورة الموضوحه التالية


وبالتتابع كل جدول داخلة ثلاث صفوف جديدة حتى يتم عندنا هذا الشكل النهائى



وبعد الإنتهاء من ترصيص الجداول الداخليه نعطى خصائص جل جدول كما هوه موضح



وبعد أنتهائك من ألغاء الحدود سوف يظهر لك الجدول كالمعتداد
ولكم صورتان توضح قبل وبعد إلغاء الحدود

هذا الجدول قبل إلغاء الحدود كاملة



وهذه الجدول بعد الأنتهاء من إذالة الحدود



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



كما موضح بالصورة تم إعطاء الخليه اليمنى نسبة مئوية 1%
ومن هنا يتم عمل الاتى إعطاء كل خليه على الأطراف نفس النسبة المئوية 1%
كما موضح
أفتراضاً الإستايل المصمم لدينا مصمم ليكون الأطراف كل طرف خليتان
فكل خلية تأخذ 1%
فأجعلونا فى التصميم الذى أمامنا كى لا تحوسوا فى الموضوع

كما ترون تم أعطاء الخليه اليمنى النسبة المئوية وعند إدراج الخليه اليسرى تم أعطائها نسبة مئوية 1%
بالله ركزو لحظه
كده أصبح مجموع النسب المئوية المعطاه 2% فاضل عندنا نسبة مئوية 98%
نقوم بإعطائها للخليه الوسطى موضح بالصورة



بكدة نكون أكملنى النسبة المئوية 100%
1% يمين + 1% يسار + 98% وسط = 100%
كما موضح بالصورة التالية



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

مشاهدة الإستايل الذى تم أجراء الدرس عليه

هنـــــــــــــــــــــــ ــــــا

ملحوظه
أختلفت الطرق إلى الوصول للحل الصحيح
ولاكن هذا أسهلهم

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

في النهاية

لتحميل الدرس لمن لم تظهر عندة الصور

Download

لمن أردا نقل الدرس بالكامل

Download