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

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


تصميم الفوتوشوب


اولاً نفتح عمل جديد



[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]



باداة التحديد


[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]


بتحديد داخلي



[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]



ثم نعدل زاوية التحديد كما في الصوره



[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]




[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]



لكي تكون الزاويه مائله




[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]




نفتح لير جديد



[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]



باداة الصبغ نقوم بصبغة



[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]




[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]



باداة التحديد نقوم بتحديد داخل الجدول



[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]






[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]





لكي نقوم بمسحه عن طريق الكيبورد نضغط على



Delete



[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]




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



اما الاخضر لا نقوم بتاثير عليه



كل شخص على حسب ذوقه شنو حاب يضع فيه زخارف نقوش شعار



تدريج


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




[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]



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





[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]





الان نبداء بقص الاطار لكي نستخدمه ببرنامج الفرنت بيج



عن طريق اداة القص



[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]






[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]




نبداء بالقص


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



[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]




بعد القص نقوم بحفظ العمل



[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]




[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]



نضعها بصيغة jpg
ونرفع من الجوده حتى لا نفقد اللوان التصميم



ثم نقوم بحفظ العمل



[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]




نقوم بحذف الصور الغير مرغوب فيها بعد القص




[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]




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




[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]






نقوم بوضع الصور في مجلد الستايل الخاص بنا







الان تركيب الصور عن طريق برنامج الفرنت بيج



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





[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]


ونقوم بمسح الاكواد التي بداخله





[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]




نذهب الى التصميم




[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]




ونقوم بدراج جدول




[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]



ثلاث جداول عمودي وافقي



[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]




نضع الماوس على الجدول ونضغط كلك يمين




[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]




نعدل على خصائص الجدول




كما في الصوره



[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]





وضعنا القيم الموضحه







[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]




الجدول الان بلا حدود ومن جهة اليمين الى اليسار




الان نقوم بادراج الصور التي قمنا بتصميمها




نذهب الى اول خليه فوق على اليمين ونضع الماوس عليها




ثم نقوم بادارج صورة الاطار




في زوايا الجدول

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]




[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]







[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]





بعد ادراج الصور في زوايا الجدول كما هو موضح بطريقة الادراج




اصبح بهذا الشكل




[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]





نضع الماوس كما في النقطه الحمراء




[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]





ونضغط كلك يمين بالماوس




[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]




ونختار له خلفيه عن طريق




[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]




[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]





ونعمل هذه الطريقه في الجههة المقابلة بوضع لها خلفيه




[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]




ونقوم بشد الجدول من اليمين واليسارالى اخر الجدول




حتى يصبح


[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]





بهذا الشكل



ونقوم باضافة خلفيه للجدول العلوي والسفلي



[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]




كلك يمين مكان النقطه

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]




[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]





ونختار صورة الخلفيه



ثم موافق




[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]






وكذالك نقوم بعملها للجدول السفلي




[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]





نجعل الماوس مكان النقطه




مع كلك يمين ونختار كما هو موضح في الصوره




[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]





ونقوم بادارج ثلاث صفوف في الخلية





[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]





[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]



نقوم بادراج الصور اليمين والشمال




[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]




ثم نقوم بالسحب يمين وشمال





[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]





كي تاخذ كل صورة موقعها





[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]








الحين خلصنا تصميم الباقي هي الاكواد الي نضيفها في ستايل المنتدى
نذهب الى



[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]







[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]





نلاحظه ان روابط الصور غير صحيحه لو اضفناها في الموقع




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







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




ثم



نذهب الى بحث


[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]




نختار استبدال كلمات
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]





نضع مجلد الستايل الي في الصور على الجهه الاخر




ثم نضغط استبدل الكل



[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]





تم استبدال جميع الروابط




الان


نذهب الى التصميم




[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]




ونضع الماوس كما في النقطه الحمراء



ونذهب الى الكود لنعرف اي موقع هذه النقطه من الكود



[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]




الي فوق مؤشر الماوس هذا هو الجدول العلوي




ولي تحت الماوس هذا السفلي صورة توضيحيه




[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]




الاحمر هذا هو الكود الي نضعه في الاعلى




والاصفر نضعه في الاسفل في التمبلت اثناء التركيب




انت خزنها في ملفين ضع ملف اسمه hed.txt



والثاني اسمه fot.txt



علشان يسهل عليك التركيب واحفظ ملفات



txt


---------------------------------------------------------------------------------------------------------------------------

تاطير تمبلت navbar





[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]





[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]



الي بلون الاحمر هذا الجدول العلوي والي بالاصفر الجدول السفلي
الان نبي نركبه في النف بار navbar



اولا نفتح لوحة التحكم ثم نذهب للبحث عن تمبلت navbar




[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]




[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]



ثم نضغط بحث



[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]


نضع كود الجدول العلوي فوق كلمة

كود PHP:














اقتباس:

<!-- breadcrumb, login, pm info -->

وكود الجدول السفلي تحت كلمة
كود PHP:

:









اقتباس:

<!-- / nav buttons bar -->

ونقوم بحفظ العمل
النتيجه



[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]


-----------------------------------------------------***********---------------------------------------------------



تاطير الصفحة الرئيسية للمنتدى





[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]






الي بلون الاحمر هذا الجدول العلوي والي بالاصفر الجدول السفلي






الان نبي نركبه في قوالب الصفحة الرئيسية






اولا .. افصل الاقسام عن طريق هذا الشرح





ثم افتح تمبلت





كود PHP










واضف الجدول العلوي قبل هذه الكلمة






















وضع الجدول السفلي قبل هذه الكلمة

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

---------------------------------------------------------------------------------------------
تاطير الصفحات الداخلية تمبلت forumdisplay



[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]



الي بلون الاحمر هذا الجدول العلوي والي بالاصفر الجدول السفلي



الان نبي نركبه في قوالب الصفحة الداخلية
قالب
forumdisplay
قم بفتح قالب
كود PHP:













اقتباس:

forumdisplay

وابحث عن كلمة


كود PHP:

واضف تحتها الجدول العلوي



الان ابحث عن




كود PHP:












اقتباس:

$forumbits

اقتباس:

</table>

واضف تحتها الجدول السفلي


النتيجه



[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

لم ننتهي في نفس القالب







كود PHP:










اقتباس:

forumdisplay

ابحث عن



كود PHP:








اقتباس:

<!-- / controls above thread list -->

واضف اعلاه الجدول العلوي






ثم ابحث عن



كود PHP:










اقتباس:

<!-- end show no threads message -->

واضف اسفلهم الجدول السفلي



وابحث عن



كود PHP:













اقتباس:

<!-- Active Users in this Forum (and sub-forums) and Moderators -->

واضف فوقه الجدول العلوي





وابحث عن




كود PHP:
















اقتباس:

<!-- End Active Users in this Forum (and sub-forums) and Moderators -->

واضف اسفله الجدول السفلي





وقم بحفظ التمبلت



النتيجة



[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]



------------------------------------------------------------------------------------------------------------





تاطير المواضيع والردود





هذا الاطار قمنا بعمله في الدرس السابق






[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]


[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]











الي بلون الاحمر هذا الجدول العلوي والي بالاصفر الجدول السفلي







الان نبي نركبه حول الردود والموضوع




في قالب





SHOWTHREAD





نفتح قالب





كود PHP:













اقتباس:

SHOWTHREAD

ونبحث عن كلمة





كود PHP:











اقتباس:

<!-- toolbar -->

ونضع اعلاه الجدول العلوي للإيطار






[size=12]ثم نبحث عن كلمة[/size]