تصميم اطارات لاقسام المنتدى بالفوتوشوب + فرنت بيج .. الدرس التاسع

[خالد القحطاني]

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


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


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



http://www.new-style.ws/vb/up/ta6ur-vb/1.jpg



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


http://www.new-style.ws/vb/up/ta6ur-vb/2.jpg


بتحديد داخلي



http://www.new-style.ws/vb/up/ta6ur-vb/3.jpg



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



http://www.new-style.ws/vb/up/ta6ur-vb/4.jpg




http://www.new-style.ws/vb/up/ta6ur-vb/5.jpg



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




http://www.new-style.ws/vb/up/ta6ur-vb/6-0.jpg




نفتح لير جديد



http://www.new-style.ws/vb/up/ta6ur-vb/6.jpg



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



http://www.new-style.ws/vb/up/ta6ur-vb/7.jpg




http://www.new-style.ws/vb/up/ta6ur-vb/8.jpg



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



http://www.new-style.ws/vb/up/ta6ur-vb/2.jpg






http://www.new-style.ws/vb/up/ta6ur-vb/9.jpg





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



Delete



http://www.new-style.ws/vb/up/ta6ur-vb/10.jpg




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



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



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



تدريج


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




http://www.new-style.ws/vb/up/ta6ur-vb/11.jpg



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





http://www.new-style.ws/vb/up/ta6ur-vb/12.jpg





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



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



http://www.new-style.ws/vb/up/ta6ur-vb/110.jpg






http://www.new-style.ws/vb/up/ta6ur-vb/120.jpg




نبداء بالقص


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



http://www.new-style.ws/vb/up/ta6ur-vb/15.jpg




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



http://www.new-style.ws/vb/up/ta6ur-vb/16.jpg




http://www.new-style.ws/vb/up/ta6ur-vb/17.jpg



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



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



http://www.new-style.ws/vb/up/ta6ur-vb/18.jpg




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




http://www.new-style.ws/vb/up/ta6ur-vb/19.jpg




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




http://www.new-style.ws/vb/up/ta6ur-vb/20.jpg






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







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



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





http://www.new-style.ws/vb/up/ta6ur-vb/f-1.jpg


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





http://www.new-style.ws/vb/up/ta6ur-vb/f-2.jpg




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




http://www.new-style.ws/vb/up/ta6ur-vb/f-3.jpg




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




http://www.new-style.ws/vb/up/ta6ur-vb/f-4.jpg



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



http://www.new-style.ws/vb/up/ta6ur-vb/f-5.jpg




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




http://www.new-style.ws/vb/up/ta6ur-vb/f-6.jpg




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




كما في الصوره



http://www.new-style.ws/vb/up/ta6ur-vb/f-7.jpg





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







http://www.new-style.ws/vb/up/ta6ur-vb/f-8.jpg




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




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




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




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




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

http://www.new-style.ws/upload/uploads/images/new-style-ws-6d7d9cb705.jpg




http://www.new-style.ws/vb/up/ta6ur-vb/f-9.jpg







http://www.new-style.ws/vb/up/ta6ur-vb/f-10.jpg





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




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




http://www.new-style.ws/vb/up/ta6ur-vb/f-11.jpg





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




http://www.new-style.ws/vb/up/ta6ur-vb/f-111.jpg





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




http://www.new-style.ws/vb/up/ta6ur-vb/13.jpg




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




http://www.new-style.ws/vb/up/ta6ur-vb/f-13.jpg




http://www.new-style.ws/vb/up/ta6ur-vb/f-14.jpg





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




http://www.new-style.ws/vb/up/ta6ur-vb/f-15.jpg




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




حتى يصبح


http://www.new-style.ws/vb/up/ta6ur-vb/16f--.jpg





بهذا الشكل



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



http://www.new-style.ws/vb/up/ta6ur-vb/f-16.jpg




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

http://www.new-style.ws/vb/up/ta6ur-vb/13.jpg




http://www.new-style.ws/vb/up/ta6ur-vb/f-13.jpg





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



ثم موافق




http://www.new-style.ws/vb/up/ta6ur-vb/f-17.jpg






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




http://www.new-style.ws/vb/up/ta6ur-vb/f-18.jpg





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




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




http://www.new-style.ws/vb/up/ta6ur-vb/f-19.jpg





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





http://www.new-style.ws/vb/up/ta6ur-vb/f-20.jpg





http://www.new-style.ws/vb/up/ta6ur-vb/f-21.jpg



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




http://www.new-style.ws/vb/up/ta6ur-vb/f-22.jpg




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





http://www.new-style.ws/vb/up/ta6ur-vb/f-23.jpg





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





http://www.new-style.ws/vb/up/ta6ur-vb/f-24.jpg








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



http://www.new-style.ws/vb/up/ta6ur-vb/f-25.jpg







http://www.new-style.ws/vb/up/ta6ur-vb/f-26.jpg





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




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







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




ثم



نذهب الى بحث


http://www.new-style.ws/vb/up/ta6ur-vb/f-27.jpg




نختار استبدال كلمات
http://www.new-style.ws/vb/up/ta6ur-vb/f-28.jpg





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




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



http://www.new-style.ws/vb/up/ta6ur-vb/f-29.jpg





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




الان


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




http://www.new-style.ws/vb/up/ta6ur-vb/f-30.jpg




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



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



http://www.new-style.ws/vb/up/ta6ur-vb/f-31.jpg




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




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




http://www.new-style.ws/vb/up/ta6ur-vb/f-32.jpg




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




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




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



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



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



txt


عندك


الدرس القادم تركيب الاطارات في الستايل

[كويتي]

مواضيع رائعه

وشرووح ارووع


الف شكر عزيزي new style

[شمس الدين]

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

[وحــ(عمان)ــش]

تسلمو على الشرح الرائع يالغالي


تحياتي

[Sanhaji Rida]

بارك الله فيك أخي خالد
على هذا الشرح الرائع

[رقم واحد]

..


جزاك الله الف خير


..

[تعال عمري]

يعطيك الف عافية


مررررة الشرح جونان



دمت بحفظ الرحمن

[zuhairtaha]

شرحك لهذا الدرس رائع جداً أخي خالد
جزاك الله كل خير