~][ دورة تصميم ستايلات منتديات ][~

مجتمع رجيم / منتدى دروس الفوتوشوب
كتبت : دمعة غزة
-

بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته


لنبدأ الآن أخواتي في الله الدورة
وفي درسها الأول
واذكر مرة اخرى بدورة تعليم الفوتوشوب السابقة
لمدرسة قطعة سكر


المهم

أولاً دعونا نتعرف على هذه الدورة في سطور بسيطة :
قد تظن بعض الاخوات ان هذه الدورة صعبة ومتعبة وو .. الخ
في الحقيقة اختي الدورة بسيطة جداً
تفيدك اذا كانت لديك ادارة منتدى
او حتى تفيدنا نحن لتقديم ستايلات بين الحين والآخر لمنتدانا الغالي
ريجيم


لذلك تابعوا معي الدورة خطوة..خطوة

56356356363.gif

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

e3dufg1v2v5smreln4vu



نقوم أولاً بفتح عمل جديد بهذه الإعدادات
tmD31564.png

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


الآن نقوم باختيار
view > show >Grid

أو نضغط على ctrl + '
UdC31564.png

ليصبح لدينا مربعات على العمل
0zm31778.png

ثم نقوم باختيار اللون العام للتصميم وهذا على ذوقك واختيارك
انا هنا اخترت اللون الأخضر

JlY31778.png

ثم نقوم باستخدام اداة المربع
79494773eb.png

ونرسم جزء علوي بمقدار خانتين ، كالتالي
eedd750159.png

الآن نأتي للخطوة الاهم وهي :
إذا كنتِ محترفة بإمكانك رسم ما تريدين في الهيدر
أما انت كنتِ مبتدئة فبإمكانك ادراج هذه الصورة يميناً

462dbd215c.png

لتصبح كالتالي
6995dc6801.png

بعض المواقع والمنتديات [كمنتدى ريجيم لا للحصر] تترك الخانة اليسار للإعلانات وغير ذلك
وبعضها يحب وضع ازرار [ال او المنتدى] او اي صورة يساراً بدلاً من الإعلانات

لذلك اذا احببتي وضع صورة يساراً استخدمي هذه إن اردت
417c801486.png

لتصبح بالشكل التالي
5346500330.png

الآن انتهينا من الهيدر

ونأتي للفوتر

نقوم باستخدام اداة المربع
79494773eb.png

ونرسم جزء سفلي بالمقدار الموضح بالصورة
9384087065.png

هكذا نكون قد انتهينا من التصميم

234324324.gif


نأتي الآن لمرحلة التقطيع

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



ملحوظات هامة :
1- أثناء التقطيع يجب تساوي الأطوال.
2- نقطة التمدد [النقطة التي بدأنا بها] تكون في موضع خالي من الصور او ليرات او او ..الخ ، (بالمعنى الصحيح ، هنا في تصميمنا لدينا صورة يمين ويسار
نقوم بعمل نقطة التمدد بين هاتين الصورتين ، أتمنى كلامي واضح).
3- قد تكون واحدة منا وضعت اكثر من صورتين
في هذه الحالة ستكون لدينا نقتطين تمدد ، الأولى بين اليمين والوسط ، والاخرى بين اليسار والوسط ، وكما ذكرت نقطة التمدد في موضع خالي وصافي .

4- اذا كانت صورة واحدة تملأ كل الهيدر ، في هذه الحالة لن يكون هناك مجال لعمل نقطة تمدد.

الآن نقوم باستخدام اداة التقطيع اللازمة
c2140ff122.png


نأتي الآن لضبط التقطيع
ستكون لدينا التقسيمات ثلاثة :
عن اليمين
والوسط [عند نقطة التمدد]
ويسار

كيف ذلك ؟
نقوم برسم مستطيل قائم بسيط باداة التقطيع في الوسط بين الصورتين ، كالتالي
4638f727c1.png

لاحظوا : بمجرد رسم المستطيل كما بالصورة السابقة ، سينقسم لدينا العمل الآن الى اربعة اقسام
1 لليسار
2 للوسط
3 لليمين
4 للمنطقة الأفقية للهيدر كله


وبنفس الطريقة نقوم برسم مستطيل اعرض قليلاً عند الفوتر ، كالتالي
b29f072a21.png

إذاً الآن لدينا سبع تقسيمات
الاربعة السابقة
5 يسار الفوتر
6 وسط الفوتر
7 يمين الفوتر


ملحوظة هامة : يجب ان يكون الترتيب كما هو موضح بالشرح.

هكذا نكون قد انتهينا من التقطيع والحمد لله icon7.gif.

نحفظ العمل كالتالي :

File > save for web
b0d8e2a9eb.png

ثم نضغط على save
eba29daef7.png

ثم
43598c2da2.png

وبامكانك تسميته بما تريدين ، على ان تكون اللغة المستخدمة [الإنجليزية]
ثم ستظهر لنا رسالة صغيره نضغط
OK

fe00fce5ba.png


بعد ذلك بإمكانك الذهاب لموضع حفظك للعمل
ستجدين ملف باسم
images
وآخر باسم الملف الذي حفظتيه لكن بصيغة ويب
كالتالي

45e9ac8557.png


ivioiunnokaamzt6fs.g

إلى هنا نكون قد انتهينا من الشرح من الدرس الأول للدورة

انتظرونا في الدرس الثاني ان شاء الله

smile15.gifاستودعكم الله والسلام عليكم ورحمة الله وبركاتهsmile15.gif

أختكم : دمعة غزة



كتبت : دمعة غزة
-

بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته


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

ولتحميله وطريقة التنصيب تفضلي هنا

http://forum.rjeem.com/t106247.html#post1774033

ولتحميل الفرونت بيج المحمول 2003 والذي سيعتمد عليه شرحنا ان شاء الله
http://forum.rjeem.com/t106501.html#post1777648

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



بسم الله الرحمن الرحيم
نبدأ الدرس




نقوم بفتح برنامج الفرونت بيج
ونضغط على كلمة
[code]


ونظلل الأكواد ونقوم بحذفها


ثم نضغط على كلمة
[Design]


ونقوم بالضط كليك يمين في الصفحة ونضغط على
page properties
خصائص الصفحة


ثم نطبق هذه الإعدادات بالصورتين



ثم نضغط على
OK


طبعاً في الدرس الأول أخذنا التقطيع
ونتج لنا صور
3 للهيدر
و3 للفوتر
تمام؟
الآن سنأتي لعمل جدول لتلك الصور
نبدأ بالهيدر

نضغط على أيقونة الجدول
ونختار 3 خانات أفقية
كالتالي


ثم نضغط أسفل الجدول الذي انشأناه
ونضغط على ايقونة الجدول ونختار خانة واحدة فقط ، لعمل جدول وسط بين الهيدر والفوتر


وننزل الى اسفل مرة اخرى
ونطبق ما قمنا به في الهيدر
3 خانات أفقية


سيكون الشكل النهائي لنا هكذا



لاحظوا الترتيب السابق
1,2,3 للهيدر
5,6,7 للفوتر

نرجع الى فولدر images الذي قمنا بإنشائه اثناء عملية التقطيع
نلاحظ الصور


الآن سوف نرتب الصور بأرقامها على مكانها في الجداول بالفرونت بيج

نقوم بالضغط أولاً على الجدول الأيسر للفوتر
ونضغط على ايقونة اضافة الصور
كالتالي


ونختار الصورة رقم 1 ، كما هو موضح


وهكذا في ترتيب باقي الجدول
بمعنى : الصورة 2 في الموضع الوسط من الهيدر
الصورة 3 في الموضع اليمين للهيدر
الصورة 5 في الموضع اليسار للفوتر
الصورة 6 في الموضع الوسط للفوتر
الصورة 7 في الموضع اليمين للفوتر

الى ان يصبح بهذا الشكل


الآن نريد إزاله حواف الجدول
نضغط كليك يمين على كل جدول
ونختار
خصائص الجدول
Table properties


ونطبق هذه الإعدادات في كل جدول


وأذكر : في كل جدول نطبق هذه الإعدادات

ثم بعد ذلك نضغط مرتين على صورة الجدول الأيسر للهيدر


نحفظ في بالنا مقاس الصورة
ثم نضغط cancel
نضغط الآن على نفس الصورة كليك يمين ونختار
cell properties


ونطبق مقاس الصورة
كالتالي


نطبق ما قمنا به في صورة الجزء الأيسر للهيدر على الآتي :
1- صورة الجزء الأيمن للهيدر
2- صورة الجزء الأيسر للفوتر
3- صورة الجزء الأيمن للفوتر


لاحظي : تركنا صورة الجزء الوسط للفوتر والهيدر ، كذلك لاتنسي تطبيق الإعدادات السابقة على كل صورة
يعني كل صورة لها مقاساتها ، وننسخ هذه المقاسات في cell properties

المهم.

نأتي للصورة الوسط للهيدر والفوتر

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



الآن بعد ان قمنا بنسخه
نضغط كليك يمين على نفس الصورة صورة الوسط للهيدر
ونختار cell properties



وننسخ الرابط في هذا الموضع


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


الى ان يصبح الشكل هكذا



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




الحمد لله انتهينا من ثلاثة أرباع المشوار

نأتي الآن لنسخ الكود

أولاً ننسخ كود الهيدر :

والرجااااء ملاحظة ما تم نسخه من الكود

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

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


ثم ننسخ الآن كود الفوتر
ولاحظي الرمز المشار اليه بالعلامة الحمراء
تركناه من عملية النسخ
لماذا؟
لأنه نقطة المنتصف بين الهيدر والفوتر
اضغطي مرتين على الصورة لعرضها بحجمها الطبيعي


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



الآن صار لدينا كودين
كود للهيدر
وكود للفوتر


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



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

[ للمصممات ] درس عمل ازرار للمواقع > دمعة غزة

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


أما بالنسبة لإعدادات الـ css
وهي اكواد خاصة بالديزاين
فسوف انزل قريباً إن شاء الله شرح خاص بها وحدها


وإذا كان هناك اي استفسار بخصوص موضوع تصميم الستايلات بشكل عام
تفضلي بوضع استفسارك هنا


الى هنا نكون قد وصلنا الى نهاية الدورة

وانتظرونا في مسابقة رائعة قريباً

أتمنى تكون الدورة عجبتكم
فإن أصبت فمن الله تعالى وفضله
وإن أخطأت فمن نفسي والشيطان

أستودعكم الله الذي لا تضيع ودائعه

وسلام الله عليكم ورحمته وبركاته


كتبت : دمعة غزة
-
السلام عليكم ورحمة الله وبركاته

تم فتح الموضوع لإستقبال إستفساراتكم وأسئلتكم حبيباتي


في امان الله وحفظه
كتبت : حب ومرح
-
مافهمت شي
لوسمحتي ابغى شرح احسن او اسهل من كذا
كتبت : دمعة غزة
-
class="quote">اقتباس : المشاركة التي أضيفت بواسطة حب ومرح:
مافهمت شي
لوسمحتي ابغى شرح احسن او اسهل من كذا
السلام عليكم حبيبتي
الموضوع سهل جداااا
أتمنى حضرتك تركزي بالشرح وحدة وحدة...
الموضوع سهل
واذا في شي بالشرح مو واضح اتمنى تذكريه
وشكرا لك
كتبت : كلمة صدق
-
انا طبقت الدرس الاول وكله تمام
بس حاسة ان موضوع الاكواد ده صعب شويه ههههههههههه
ربنا يسهل واقدر عليه

شكرا لك دمعة على الدرس المميز
الصفحات 1 2  3 

التالي

شرح : تصميم توقيع إحترافي وسهل ببرنامج الفوتوشوب والسويتش ماكس

السابق

درس عن كيفية إستخدام animation palette الجديدة في الفوتوشوب العاشر او عمل الاكشن

كلمات ذات علاقة
منتديات , تسليم , دورة , ستايلات , ][~ , ~][