https://mwadah.com/images/imgcache/2009/10/138.gif
اقدم لكم اليوم
دروس تعليم تصميم الستايل من الصفر حتى النهائية
الدرس مطول ويمكن تواجهه صعوبه لو ماتركز او تطمر نقاط ؟
راح نتعلم كذا شغله بالتصميم
في البدايه كل مانحتاج له هو برنامج الفتوشوب للتصميم
وبرنامج الفرنت بيج
بسم الله نبداء
نفتح برنامج الفتوشوب
عمل جديد
ونقوم بتحديد المقاسات كم هو موضح بالصوره
https://mwadah.com/images/imgcache/2009/10/139.gif
راح نتعلم شغله حلوه بالفتوشوب تساعدك كثير بترتيب تصميمك
https://mwadah.com/images/imgcache/2009/10/140.gif
لحظ ان رسمة الملف هذي تجعل جميع عملك مرتب
راح نحتاج لها بحافظه للعمود الاول وحافظه للعمود الثاني
وكذالك للهيدر والفولدر
https://mwadah.com/images/imgcache/2009/10/141.gif
https://mwadah.com/images/imgcache/2009/10/142.gif
انتهينا من انشاء الحافظات
نطلق الان بالبداء بالعمود الاول
https://mwadah.com/images/imgcache/2009/10/143.gif
الي مو عارف يضيف ليرة يعلمنا ونقوله
هنا طريقة الاضافة
https://mwadah.com/images/imgcache/2009/10/144.gif
الان نقوم برسم عمود بالجانب الايسر او الايمن بالاداة التاليه
https://mwadah.com/images/imgcache/2009/10/145.gif
https://mwadah.com/images/imgcache/2009/10/146.gif
قم باختيار اداة تدرج الون كما هو موضح بالصوره
https://mwadah.com/images/imgcache/2009/10/147.gif
هنا طريقة تدرج الون انت تتحكم بالشغله هذي
https://mwadah.com/images/imgcache/2009/10/148.gif
بعد كذا على التحديد قم بسح اداة التدرج
https://mwadah.com/images/imgcache/2009/10/149.gif
بعطي للعمود كذا لمسه عن طريق الشرح بالصوره التاليه
https://mwadah.com/images/imgcache/2009/10/150.gif
انتهينا الان من العمود
https://mwadah.com/images/imgcache/2009/10/151.gif
نروح الان وننسخ الحافظه الي باسم العمود التالي
https://mwadah.com/images/imgcache/2009/10/152.gif
بيصير عندي كبي للحافظه الاولى نقوم بتحريكها للجهة المقابل من خلال التحريك بالسهم
https://mwadah.com/images/imgcache/2009/10/153.gif
هنا شكل الحافظات بعد الانتهاء
https://mwadah.com/images/imgcache/2009/10/154.gif
نبداء ونضيف ليره مثل ماشرحنا في البدايه عن طريقة اضافة اليره
https://mwadah.com/images/imgcache/2009/10/155.gif
نرسم مستطيل من طرف العمود للطرف الاخر مثل ماهو موضح بالصوره
https://mwadah.com/images/imgcache/2009/10/156.gif
وهنا بعد التحسين
https://mwadah.com/images/imgcache/2009/10/157.gif
نفس الطريقه راح نطبقها على الفولدر
https://mwadah.com/images/imgcache/2009/10/158.gif
نرسم مستطيل ونضيف له الاضافات الي حابب ان تكون موجوده
https://mwadah.com/images/imgcache/2009/10/159.gif
كذا انتهينا بالكامل من تصميم الستايل وباقي علينا التقطيع
__________________
طريقة تقطيع الستايل الي قمنا بتصميمه
نظره سريعه عن الستايل وكيف راح يكون تقطيع
https://mwadah.com/images/imgcache/2009/10/160.gif
قسمت الصوره لعدة الوان تختلف والي تتشابه بالون تكون مقاساتها وحدة
كيف راح تبداء التقطيع ؟؟
الاجابه : راح نقوم بتقطيع الستايل الى ثلاث خانات
1- الجزء العلوي من الستايل ( الهيدر )2- الجزء الاوسط من الستايل ( الاعمده )3- الجزء السفلي من الستايل (الفوتر )
شوف الصوره قسمتها حسب التوزيع الي ذكرنه
https://mwadah.com/images/imgcache/2009/10/161.gif
الهيدر : عدد الصور خمس
زاويه يمين +زاويه يسار + صوره تجميله يمين + صور تجميليه يسار + تمدد
الاعمده :
عمود يمين + عمود يسار
الفوتر:
زاويه يمين +زاويه يسار + صوره تجميله يمين + صور تجميليه يسار + تمدد
نحتاج لمعرفة ما الاداوات الي تساعدنا على التقطيع ...
فقط راح نستخدم اداة المربع ( التحديد ) ومقاسات القص ووضحتها لك بالصوره
https://mwadah.com/images/imgcache/2009/10/162.gif
طريقة القص تكون عن طريق استخدام لوحة المفاتيح الخاصه بجهازك
شوف الصوره
https://mwadah.com/images/imgcache/2009/10/163.gif
الان يبدو ان طريقة القص اصبحت واضحه ... عند القص تقوم باختيار فتح ملف جديد وبدون ماتغير اي مقاسات تعطيه اوكي
وتروح تسوي لصق من خلال نفس طريقة القص بس بدل حرف ( X ) نضغط ( V )
وبكذا قدرنا نقطع الستايل
https://mwadah.com/images/imgcache/2009/10/164.gif
يجب التركيز المقاسات لو تختلف باكسل واحد راح يخرب شغلك كله
https://mwadah.com/images/imgcache/2009/10/165.gif
وهنا شكل الستايل بعد التقطيع
عدد الصور الي تم تقطيعها 12 صوره شاهد المثال
https://mwadah.com/images/imgcache/2009/10/166.gif
************************* ***
او من هنا
شرح طريقة تصميم ستايل للمنتدى متكامل بالفيديو
من هنا
طريقة تغيير لون الستايل في اقل من دقيقتان
من هنا
******************
او من هنا شرح بالفوتوشوب والفرونت بيج
كما ترون سوف يتم التقطيع على راحتك وعلى حسب التصميم المقطع
توضيح اكثر يقطع الإستاايل تقطيع حر
بدون التقيد بعرض محدد فى الهيدر والفوتير أختلاف كامل فى المقاسات
أضغط على الصورة لتراها بالوضع الموضح
https://mwadah.com/images/imgcache/2009/10/172.jpg
من الصورة العلوية رأيتم كيف تم التقطيع
وكان التقطيع الدائم فى حالة تواجد هيدر بيه منطقة توسيط يتم تقطيعه عى خمس أجزاء اما فى حالتنا هذه يتم تقطيع الهيدر ثلاث أجزاء
واحدة يمين وواحدة يسار وواحدة وسط
كدة توفير أثنان صورة فراعى الفارق فى التحميل حين يكونو خمس صور والان ثلاثه
+++============+++
بعد التقطيع والحفظ نبدأ فى الدرس اليوم وهوه التوزيع الحر
نفتح الفرونت بيج
نوذيل كافة الاكواد الموضوعة ونجعل الصفحه فارغه
ثم
نحدد ثلاث خلايه عمودية موضح بالصورة التالية
https://mwadah.com/images/imgcache/2009/10/173.jpg
ونحدد أتجاه الخلايا كى يتم التوجيه بالطريقة الصحيحة كما موضح بالصورة التالية
https://mwadah.com/images/imgcache/2009/10/174.jpg
وهنا أنتهينا من الجزء الخاص الذى من خلاله سوف يتم فصل الخلايا عن بعض
ويلى نعرف كيف نأتى بمنطقة التمدد
يلى الان إداخل ثلاث صفوف داخل كل خليه
مثل الصورة الموضوحه التالية
https://mwadah.com/images/imgcache/2009/10/175.jpg
وبالتتابع كل جدول داخلة ثلاث صفوف جديدة حتى يتم عندنا هذا الشكل النهائى
https://mwadah.com/images/imgcache/2009/10/176.jpg
وبعد الإنتهاء من ترصيص الجداول الداخليه نعطى خصائص جل جدول كما هوه موضح
https://mwadah.com/images/imgcache/2009/10/174.jpg
وبعد أنتهائك من ألغاء الحدود سوف يظهر لك الجدول كالمعتداد
ولكم صورتان توضح قبل وبعد إلغاء الحدود
هذا الجدول قبل إلغاء الحدود كاملة
https://mwadah.com/images/imgcache/2009/10/177.jpg
وهذه الجدول بعد الأنتهاء من إذالة الحدود
https://mwadah.com/images/imgcache/2009/10/178.jpg
بسم الله نبدا فى التوزيع كالمعتاد ونستتدعى اول صورة
ومع أستعداء اول صورة نلاحظ ما سوف يتم الرجاء الإنتباه الله يرحم والديكم
https://mwadah.com/images/imgcache/2009/10/179.jpg
كما موضح بالصورة تم إعطاء الخليه اليمنى نسبة مئوية 1%
ومن هنا يتم عمل الاتى إعطاء كل خليه على الأطراف نفس النسبة المئوية 1%
كما موضح
أفتراضاً الإستايل المصمم لدينا مصمم ليكون الأطراف كل طرف خليتان
فكل خلية تأخذ 1%
فأجعلونا فى التصميم الذى أمامنا كى لا تحوسوا فى الموضوع
كما ترون تم أعطاء الخليه اليمنى النسبة المئوية وعند إدراج الخليه اليسرى تم أعطائها نسبة مئوية 1%
بالله ركزو لحظه
كده أصبح مجموع النسب المئوية المعطاه 2% فاضل عندنا نسبة مئوية 98%
نقوم بإعطائها للخليه الوسطى موضح بالصورة
https://mwadah.com/images/imgcache/2009/10/180.jpg
بكدة نكون أكملنى النسبة المئوية 100%
1% يمين + 1% يسار + 98% وسط = 100%
كما موضح بالصورة التالية
https://mwadah.com/images/imgcache/2009/10/181.jpg
وبنائاً على هذا الأساس
يتم التوزيع لكافة الجداول
الأطراف تأخز 1% والوسط يأخذ المتبقى من النسبة المئوية
التووضيح النهائى بعد التوزيع فى الفرونت بيج
https://mwadah.com/images/imgcache/2009/10/182.jpg
مشاهدة الإستايل الذى تم أجراء الدرس عليه
هنـــــــــــــــــــــــ ــــــا
ملحوظه
أختلفت الطرق إلى الوصول للحل الصحيح
ولاكن هذا أسهلهم
وبكده يكون الإستايل والحمدلله فى الصدارة بلا كلام
وصل اللهم وسلم على سيدنا محمد وعلى اله وصحبه وسلم
في النهاية
لتحميل الدرس لمن لم تظهر عندة الصور
https://mwadah.com/images/imgcache/2009/10/167.gif Download
لمن أردا نقل الدرس بالكامل
https://mwadah.com/images/imgcache/2009/10/167.gif Download
https://mwadah.com/images/imgcache/2009/10/168.gif
