دورة تصميم ستايل ( بالتفصيل الممل )

[فيروس خائف]

:: الدرس الأول ::


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

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

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

نبدأ أولاً مستعينين بالله

ثم نقوم بفتح برنامج الفوتوشب
ملاحظة : البرنامج الذي سنقوم بالشرح عليه هو برنامج الفوتوشب 8 إنجليزي . ويدعم العربي ..

بعد فتح البرنامج نقوم بالضغط من لوحة المفاتيح على ( Ctrl+N ) أي فتح عمل جديد .

بعد ذلك سيخرج لنا مربع الحوار لكي نضع فيه المساحة المطلوبة

أنا عن نفسي أُفضل هذه المساحة 680 × 450 ونجعل الخلفية بيضاء ثم إضغط OK وعندي وبصراحة ان هذه المساحة افضل مساحة مناسبة لدقة أي شاشة والله أعلم .. تابع الصورة


http://www.caifnet.com/vb/1.bmp

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



http://www.caifnet.com/vb/2.gif
والآن قم برسم مربع مثل الشكل التالي

http://www.caifnet.com/vb/3.gif

ثم إختر الأداة الجاهزة لرسم المربع

http://www.caifnet.com/vb/4.gif


وارسم مثل هذا الشكل

http://www.caifnet.com/vb/5.gif

الآن إدبل الشكل الذي قمنا برسمه قبل قليل حتى يصبح إثنان وطريقة ذلك من قائمة Layer إختر منها Duplicate Layer...
كما بالصورة


http://www.caifnet.com/vb/6.gif

والآن إسحب اللير المنسوخ أو المدبل لأعلى الهيدر بالماوس مع الضغط بإستمرار من لوحة المفاتيح على مفتاح Shift ... سيصبح كهذا الشكل

http://www.caifnet.com/vb/7.gif



إلى الآن والتصميم ماله سنع وتصميم من عمل بزارين صح http://www.caifnet.com/vb/images/smilies/3.gif

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

طيب نختار لير المربع الي صممناه أول شي ونضغط عليه مرتين ليفتح لنا Layer styls
http://www.caifnet.com/vb/8.gif


ونضع علامة صح على المربعات التالية كما بالصورة

http://www.caifnet.com/vb/9.gif

===================

1ـ ثم نضغط على Gradient Overlay كما بالصورة

http://www.caifnet.com/vb/10.gif


2ـ ثم نضغط على Gradient تبع الألوان المدمجة


سيظهر لنا مربع الألوان طبعاً الألوان على حسب ذوقكم



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

http://www.caifnet.com/vb/11.gif

1+ 5 ـ نضغط هنا مرتين لنفتح نافذة الألوان ونضع هذا الكود 96D493
2ـ الون الأبيض الفاتح
3+ 4 ـ نضع في مربع ******** القيمة رقم 27 لنهاية اللون الأبيض من الجهة اليمنى و25 لنهايته من الجهة اليسرى

بعد الإنتهاء من عمل الألوان السابقة نرجع لعلامة الصح الثانية التي وضعناها سابقة ونضغط على Stroke التابع للتحديد
http://www.caifnet.com/vb/12.gif

1ـ بعد تحديد هذا الخيار .
2ـ قم بتغيير اللون إلى اللون الذي تريد .
3ـ دع القيمة ( 1 ) .
4ـ بعد الإنتهاء إضغط OK لإتمام العمل .

وبكذا طلع الهيدر شبه جميل

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


لكن هناك طريقة أسهل واسرع وهي :

إضغط على المربع التابع للير الهيدر كلك يمين وأختر من القائمة Copy Layer stayle
وذلك لكي نقوم بنسخ ماقمنا بعمله في هذا اللير ثم نلصقه في جميع الليرات الحالية

http://www.caifnet.com/vb/13.gif

بعد انا قمنا بعمل النسخ نقوم بعمل اللصق بالطريقة التالية :

نختار أحد الليرات ثم نضغط عليه كلك يمين ونختار Paste Layer stayle

http://www.caifnet.com/vb/14.gif

والآن لننظر كيف اصبح الشكل

http://www.caifnet.com/vb/15.gif

وهذه الطريقة اسهل من أن نقوم كل مرة بعمل الحدود ودمج الألون وعمل الاستايلات وغيرها ..


========================================

بعد الأنتهاء من المقطع الأول من الدرس سنبدأ في زبدة الدرس ....


سوف نقوم بإذن الله بإخراج الهيدر بشكل رائع يعجب الجميع بإذن الله ..

أولا: نقوم بإختيار الاداة الجاهزة لرسم المربع

http://www.caifnet.com/vb/4.gif

نضغط من لوحة المفاتيح ( ط + Ctrl ) ثم نرسم مربع كما بالشكل التالي

http://www.caifnet.com/vb/16.gif

لا تنسى وضعه في أعلى الليرات ..http://www.caifnet.com/vb/images/smilies/023.gif


ثم نقوم بإختيار هذه الأداة

http://www.caifnet.com/vb/17.gif


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

والمطلوب هنا سحب الزوايا العلوية لهذا المربع لمايقارب الوسط كما بالصورة

http://www.caifnet.com/vb/18.gif

ثم قم بالضغط من لوحة المفاتيح على مفتاحي Ctrl +T وذلك لتَّحكم بحجم مساحة المربع حتى نجعله كما بالصورة


http://www.caifnet.com/vb/19.gif




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

http://www.caifnet.com/vb/4.gif


ونرسم مربع صغير في الجهة اليسرى مثل هذا الشكل


http://www.caifnet.com/vb/20.gif



ثم نقوم بإختيار هذه الأداة

http://www.caifnet.com/vb/17.gif


ثم نقوم بسح زاية المربع العلوية في الجهة اليمنى بزر الماوس الأيسر مع الإستمرار بالضغط من لوحة المفاتيح على Ctrl كما بالصورة

http://www.caifnet.com/vb/21.gif


ثم نقوم بسحب نفس الزاية بزر الأيسر مع الإستمرار بالضغط من لوحة المفاتيح على Ctrl

والآن بنفس الأداة نقوم بسحب نفس الزاوية لكن بدون أن نضغط Ctrl
وذلك لكي نعمل مثل هذا الشكل

http://www.caifnet.com/vb/22.gif



تماااااااااااااااااااااااااااااااااااااااام

نقوم بعد الإنتهاء بجعل هذا اللير تحت الليرات السابقة إلا لير المربع الأول
http://www.caifnet.com/vb/23.gif


ليخرج لنا التصميم بهذا الشكل

http://www.caifnet.com/vb/24.gif



نقوم بعمل بدبل هذا الليل ليصبح اثنان بنفس الكل

ثم نقوم بإختيار اللير الثاني ثم من قائمة Edit نختار ماهو موضح في الصورة التالية :

http://www.caifnet.com/vb/25.gif

ثم نسحب اللير للجهة اليمنى ليصبح التصميم بهذا الشكل

http://www.caifnet.com/vb/26.gif


أعتذر على الإطالة ..

واتمنى ان الجميع ان شاء الله فهم الدرس

وانتظر تطبيقاتكم واستفساراتكم في هذا الدرس ..

وإن شاء الله إن سمح لنا لوقت سنقوم بتكملة الدرس قريباً .






رابط الدروس

http://www.caifnet.com/vb/showthread.php?t=418 (http://www.caifnet.com/vb/showthread.php?t=418)

[فيروس خائف]

:: الدرس الثاني ::



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



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



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



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



بعد أن قمنا بتصميم الجزء الأول في الهيدر وأصبح معنا بهذا الشكل



http://www.caifnet.com/vb/26.gif



سوف ننتهي من الهيدر في هذا الدرس بإذن الله حتى نخرجه بشكل جميل ومناسب كهذا الشكل




http://www.caifnet.com/vb/dawraat/Untitled-1.gif




نبدأ مستعينين بالله تعالى




ثم نختار الأداة الجاهزة لرسم المربع



http://www.caifnet.com/vb/4.gif





ثم نرسم مستطيل عرض الهيدر كما بالصورة




http://www.caifnet.com/vb/dawraat/1.gif




ثم نختار الأداة الموضحة في الصورة التالية




http://www.caifnet.com/vb/dawraat/2.gif



وهي لزيادة نقاط التحكم في الرسم






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




http://www.caifnet.com/vb/dawraat/3.gif





ثم نختار هذه الأداة الموضحة بالصورة التالية



http://www.caifnet.com/vb/17.gif



ثم نقوم بالضغط على النقطه رقم ( 2) مرة واحدة ثم نقوم بسحبها بالسهم الأعلى من لوحة المفاتيح 22 مرة



وكذلك النقطة رقم ( 3 )



حتى يطلع الشكل هكذا



http://www.caifnet.com/vb/dawraat/4.gif





تمااااااااااااام



الآن نقوم بسحبه للأعلى حتى يصبح هكذا



http://www.caifnet.com/vb/dawraat/5.gif





ثم نضغط من لوحة المفاتيح على مفتاحي ( Ctrl+T ) للتحكم في حجم مساحة المستطيل



ثم نصغر طوله ليصبح كهذا الشكل




http://www.caifnet.com/vb/dawraat/6.gif




(( ملاحظة هامة :: هناك طريقة قد تكون أسهل وهي بإستخدام أداة ( الباث ) القلم هذه



http://www.caifnet.com/vb/dawraat/10.gif




ثم رسم الشكل مباشرة



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



والآن نقوم بإختيارالأداة الجاهزة لرسم المربع




http://www.caifnet.com/vb/4.gif






ونرسم مستطيل عمودي
بحجم صغير كهذا الشكل
http://www.caifnet.com/vb/dawraat/7.gif





ونختار هذه الأداة



http://www.caifnet.com/vb/dawraat/2.gif




ونعمل نفس الحركة الي عملناها في المستطيل الأفقي



هكذا



http://www.caifnet.com/vb/dawraat/8.gif






وايضا نفس الحركة الي سويناها في التصميم الإفقي



نختار بهذه الأداة
http://www.caifnet.com/vb/17.gif



النقطة رقم ( 2 ) نضغط عليها مرة واحدة فقط ثم نسحبها بأسهم الكي بورد ( لوحة المفاتيح ) إلى اليمين 22 مرة ونفعل نفس الشي مع النقطة رقم ( 3 )




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



http://www.caifnet.com/vb/dawraat/9.gif



ثم قم بسحب النقطة رقم ( 2) للاسفل ثم النقطة رقم ( 3) بنفس الطريقة



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





http://www.caifnet.com/vb/dawraat/11.gif




ضع هذا الير تحت ليرات الأعمدة الافقية العلوية والسفلية حتى يخرج هكذا




http://www.caifnet.com/vb/dawraat/12.gif



قم بمضاعفة هذ اللير



وذلك بالضغط عليه يمين ثم إختر ( Duplicate Layer .. )



http://www.caifnet.com/vb/dawraat/13.gif





من قائمة Edit نختار ماهو موضح في الصورة التالية :



http://www.caifnet.com/vb/25.gif



ثم نسحب اللير للجهة اليمنى ليصبح التصميم بهذا الشكل



http://www.caifnet.com/vb/dawraat/14.gif




================================================

[فيروس خائف]

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



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



إما بالضغط عليه باليمن



http://www.caifnet.com/vb/dawraat/13.gif




أو من قائمة لير




http://www.caifnet.com/vb/6.gif




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




طيب إختفت الليرات الي صممناها قبل شوي http://www.caifnet.com/vb/images/smilies/54.gif




ماعليكم



إضغط على هذا اللير مرتين أو ضغط باليمين وإختر هذا الخيار كما بالصورة




http://www.caifnet.com/vb/dawraat/16.gif




لفتح Layer styls




http://www.caifnet.com/vb/9.gif





إعمل التالي




(( أولاً ))




http://www.caifnet.com/vb/dawraat/17.gif





(( ثانياً ))





http://www.caifnet.com/vb/dawraat/18.gif




ليصبح شكل التصميم هكذا



http://www.caifnet.com/vb/dawraat/19.gif




والآن قم بإدراج صورة مناسبة مع ألوان تصميمك



إضغط Ctrl+O



وإبحث عنها في جهازك ثم قم بفتحها



ثم انسخها لهذا العمل



انا قمت بسحب هذه الصورة



http://www.caifnet.com/vb/dawraat/natu24.JPG



وللتحكم في حجمها إضغط Ctrl+T للحجم الذي يناسب ذوقك




ضع لير هذه الصورة فوق اللير الثالث الشكل المنحني في الجهة اليمنى



ثم إضغط Ctrl+G لجعلها ماسك ( قناع )



ستختفي الصورة كلياً وذلك بسبب اللألوان المتدرجة



ولإخفاء الألوان المتدرجة تابع معي الشرح بالصور



http://www.caifnet.com/vb/dawraat/20.gif



تم إلغاء الألوان المتدرجة بعد إلغاء الخيار الموضح في الصورة السابقة



والآن سنقوم ببعض التنقيحات تابع الشرح



http://www.caifnet.com/vb/dawraat/24.gif



http://www.caifnet.com/vb/dawraat/25.gif





http://www.caifnet.com/vb/dawraat/26.gif





ثم إضغط OK




قم بدبلكيت للصورة التي ادرجناها سابقاً
http://www.caifnet.com/vb/6.gif




ثم



http://www.caifnet.com/vb/25.gif



ضع لير هذه الصورة فوق اللير الخامس الشكل المنحني في الجهة اليسرى



ثم إضغط Ctrl+G لجعلها ماسك



ستختفي الصورة كلياً وذلك بسبب اللألوان المتدرجة



ولإخفاء الألوان المتدرجة إفعل كما شرحنا قبل قليل




ثم تابع التنقيحات




http://www.caifnet.com/vb/dawraat/21.gif



http://www.caifnet.com/vb/dawraat/22.gif




http://www.caifnet.com/vb/dawraat/23.gif





سيصبح التصميم بهذا الشكل



http://www.caifnet.com/vb/dawraat/27.gif




بقي علينا فقط كتابة اسم الموقع أو المنتدى



وسنكتبها بإذن الله عندما نبدأ في التقطيع وسأوضح بإذن الله معنى الخطين الحمراوين في هذا التصميم
http://www.caifnet.com/vb/dawraat/Untitled-1.gif



وسيتضح مقصدي من هذين الخطين بإذن الله



هذا هو تطبيقي في هذا الدرس




http://www.caifnet.com/vb/dawraat/28.gif




أعتذر على الإطالة في الشرح



وأسال الله التوفيق والإعانة للجميع




لا أحد يتردد في طرح أي استفسار في هذا الدرس



انا مستعد ان شاء الله


:: الدرس الثالث ::

[فيروس خائف]

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



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


اخواني الكرم احب انوه للأخوة المتابعين لهذا الدرس بأهمية الدروس السابقة


رجائاً الي يبي يفهم الدروس الأخيرة يتابع الدورة أول بأول وإلاسيختلط الحابل بالنابل عنده


على بركة الله نبدأ هذا الدرس هو درس ( تصميم الاعمدة )


هذا الدرس سهل جداً وخصوصاً على المتابعين للدروس معنا


بعد ان انتهينا من تصميم الهيدر بشكل ( شبه مرضي )


الآن نقوم بإختيار الاداة التالية :


http://www.caifnet.com/vb/2.gif




ثم نرسم مثل هذا الشكل :


http://www.caifnet.com/vb/dawraat/dawraat/29.gif
ملاحظة : ( لا تنسى نسخ اللير ستايل بالطريقة التي قمنا بشرحها في دروسنا السابقة ثم لصقها في هذا اللير الذي سنرسمه اللآن )




لاحظ ان اللير ستايله موجود اساساً ولم اقم بنسخة


هناك طريقة لجعل الاستايل يستمر معك تلقائياً فقط طبق معي الخطوات التالية :



http://www.caifnet.com/vb/dawraat/dawraat/32.gif




ثم تابع الشرح


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


http://www.caifnet.com/vb/dawraat/dawraat/30.gif



قم بسحب الشكل الذي رسمناه قبل قليل لاقصى اليمين هكذا :



http://www.caifnet.com/vb/dawraat/dawraat/31.gif



الآن قم برسم مستطيل بهذه الأداة :


http://www.caifnet.com/vb/4.gif



ونفس هذا الشكل التالي :



http://www.caifnet.com/vb/dawraat/dawraat/33.gif


ثم قم بتطبيق الأعدادات عليه كما بالصور التالية :


( 1 )


http://www.caifnet.com/vb/dawraat/dawraat/34.gif



( 2 )


http://www.caifnet.com/vb/dawraat/dawraat/35.gif



ثم اسحبه لأقصى اليمين فوق العمود السابق كالتالي :







http://www.caifnet.com/vb/dawraat/dawraat/36.gif




الآن ارسم مربع صغير كهذا الشكل



http://www.caifnet.com/vb/dawraat/dawraat/37.gif




ثم قم بعمل تطبيقات السحب بهذه الاداه :


http://www.caifnet.com/vb/17.gif


حتى نجعله هكذا


http://www.caifnet.com/vb/dawraat/dawraat/38.gif





ثم اسحبه لأسف الأعمدة


الآن إدبل الشكل الذي قمنا برسمه قبل قليل حتى يصبح إثنان وطريقة ذلك كما بالصورة :


http://www.caifnet.com/vb/6.gif


ثم قم بقلب اللير الثاني بالطريقة التالية :
http://www.caifnet.com/vb/dawraat/dawraat/39.gif
Edit>>Transform>>> Path>>> Flip Vertical


ثم وصلها للأعمدة حتى تتصل بها كهذا الشكل :


http://www.caifnet.com/vb/dawraat/dawraat/40.GIF


ارسم دائرة بيضاوية كهذا الشكل :
http://www.caifnet.com/vb/dawraat/dawraat/41.GIF


مستخدم أداة رسم الدوائر :
http://www.caifnet.com/vb/dawraat/dawraat/42.gif


قم بعمل دبل كيت لها وسحبها للأعمدة
ثم قم بتطبيق الإعدادات عليها كما بالصور التالية :


( 1 )


http://www.caifnet.com/vb/dawraat/dawraat/34.gif



( 2 )


http://www.caifnet.com/vb/dawraat/dawraat/35.gif



ستصبح هكذا :
http://www.caifnet.com/vb/dawraat/dawraat/43.GIF
انا قمت بعمل دائرة اخرى عادية
http://www.caifnet.com/vb/dawraat/dawraat/44.GIF



الآن قم بعمل دبل كات لجميع ليرات هذا العمود وقم بسحبها للجهة اليسرى مستخدماً طريقة قلب الشكل هذه :
http://www.caifnet.com/vb/25.gif


حتى يصبح الشكل بعد هذه العملية هكذا


http://www.caifnet.com/vb/dawraat/dawraat/45.GIF



ومن هذه النقطة انتهينا من درس الأعمدة .
ذهب الكثير من دروس التصميم ولم يبقى إلا القليلل .


واي استفسار في هذا الدرس لا احد يتردد في طرحة هنا وانا مستعد بإذن الله للإجابة .


ننتظر تطبيقاتكم يالحبايب حتى نكمل الدرس ..
وبالله التوفيق ,,,




رابط الدرس (http://www.caifnet.com/vb/showthread.php?t=338)

[فيروس خائف]

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



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



وبعد ان وفقنا الله وانتهينا من تصميم الأعمدة نبدأ في هذا الدرس في تصميم الفوتر




رجاءً الي مافهم شي في الدروس السابقة لا يدخل هذا الموضوع



الدروس السابقة هي اساس هذا الدرس ( يعني الي ماعمل تطبيقات فيها ولا راجعها ماراح يفهم هذا الدرس )



ـ طريقة نسخ ولصق اللير ستايل الخاصة بالتصميم لن اعيد منها في هذاا لدرس إلا الأشياء التي لم نأخذها .



ـ حاولت قدر الإمكان التقليل من طول الدرس .



ـ لا يسمح ابداً بكتابة استفسارات في دروس سابقة .



ـ التطبيق من مصلحة المصمم نفسه وليس من مصلحتي .



ـ اختر الوقت المناسب لقراءة ومراجعة الدرس .



ـ الدرس يعتمد على التركيز والفهم لذا حول عدم طرح استفساراتك إلا إذا كنت لم تفهم الدرس .



لا أطيل عليكم



نبدأ مستعينين با الله



نختار هذه الأداة



http://www.caifnet.com/vb/2.gif




ثم نرسم مثل هذا الشكل




http://www.caifnet.com/vb/dawraat/dawraat/46.GIF




قم بعمل دبل كيت له للجهة الأخرى



سيصبح هكذا



http://www.caifnet.com/vb/dawraat/dawraat/47.GIF




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



http://www.caifnet.com/vb/dawraat/dawraat/48.GIF




بنفس الأداة ايضاً ارسم نفس الشكل وصغر حجمة من الجهتين قليلاً



وضع عليه هذه الإعدادات



http://www.caifnet.com/vb/dawraat/dawraat/49.GIF




http://www.caifnet.com/vb/dawraat/dawraat/50.GIF





http://www.caifnet.com/vb/dawraat/dawraat/51.GIF





http://www.caifnet.com/vb/dawraat/dawraat/53.GIF
هذا هو الشكل الذي قمنا برسمة وتطبيق الأعدادات الموضحة سابقاً





==========================================



والآن اختر نفس الأداة



وارسم هذا الشكل



http://www.caifnet.com/vb/dawraat/dawraat/52.GIF






والآن اختر أداة رسم الدوائر



هذه



http://www.caifnet.com/vb/dawraat/dawraat/54.gif




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



http://www.caifnet.com/vb/dawraat/dawraat/56.GIF




=========================================




والآن بقي آخر نقطتين نعملها طبعاً لمن أراد عملها




إختار هذه الأداة



http://www.caifnet.com/vb/2.gif




وقم برسم نفس هذا الشكل




http://www.caifnet.com/vb/dawraat/dawraat/58.GIF




بالإعدادات هذه




http://www.caifnet.com/vb/dawraat/dawraat/59.GIF





طبعا الحدود درسناها سابقاً




====================================

[فيروس خائف]

الآن بقي علينا الكتابة حقوق التصميم وهذه انتم احرار في كتابتها



وهذي الصورة الثائية للتصميم




http://www.caifnet.com/vb/dawraat/dawraat/60.GIF





الخطوط الحمراء هي حدو نهاية كل صورة أثناء التقطيع



وبكذا انتهينا من الدرس النهائي في تصميم ستايل اسأل الله لكم التوفيق



وترقبوا بقية الدروس قريباً بإذن الله






المرفقات (http://www.caifnet.com/vb/attachment.php?attachmentid=82&stc=1&d=1165740915)






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



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



وبعد ان انتهينا من تصميم الاستايل نبدا اليوم بالتقيع



الآن نحفظ التصميم بصيغة ( JPEG )



إضغط Ctrl+Alt+S ثم قم بالحفظ ...



http://www.caifnet.com/vb/dawraat/dawraat/61.GIF




ثم بعد ذلك قم بضغط Ctrl+O
لفتح التصميم



http://www.caifnet.com/vb/dawraat/dawraat/62.GIF




والآن جاء وقت التقطيع



على بركة الله



نبدأ مستعينين به



نقوم باختيار أداة تقطيع الشرائح



http://www.caifnet.com/vb/dawraat/dawraat/63.GIF




هذه الأداة هي سهلة جداً مع الممارسة باستعمالها




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



http://www.caifnet.com/vb/dawraat/dawraat/64.GIF




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



ملاحظة هامة http://www.caifnet.com/vb/images/smilies/frown.gif إذا اخطئت في تقطيع اي جزء معين اثناء التقيع إضغط على نفس الجزء وبنفس اداة تقطيع الشرائح بـ Ctrl ثم إضغط بزر الفارة الايسر على الجزء الذي اخطأت فيه ثم إضغط Delete ثم أعد تقطيعه مرة أخرى )



والآن بدأ بتقطيع الصور التجميلية كما الصورة التالية



http://www.caifnet.com/vb/dawraat/dawraat/65.GIF



الآن الشعار مع حقوق التصميم



http://www.caifnet.com/vb/dawraat/dawraat/66.GIF




بقي آخر النقاط في الدرس



الآن بعد التقطيع سنحتاج لقطع تمدد بين الصور



طيب كيف نحصل على هذه القطع ؟؟



تابعو معي الشرح



نختار أداة التحديد هذه



http://www.caifnet.com/vb/dawraat/dawraat/67.GIF




نأخذ قطعة صغيرة الحجم من الهيدر من العرف تابعو معي الصورة




http://www.caifnet.com/vb/dawraat/dawraat/68.GIF



أنا أخذت أقل حجم أقدر عليه



ثم إضغط Ctrl+C للنسخها ثم



إضغط Ctrl+N لفتح عمل جديد بنفس مقاس القطعة التي نسخناها ولا تقم بالتعيدل عليها لانها تأتي تلقائية



كما بالصورة



http://www.caifnet.com/vb/dawraat/dawraat/70.GIF




إضغط OK



سينفتح العمل على المقاس الذي نسخناه



إضغط Ctrl+V



للصق الصورة



لحظ



http://www.caifnet.com/vb/dawraat/dawraat/69.GIF



على نفس المقاس بالضبط



والآن أحفظها



و بنفس الطريقة نعملها للأعمدة والفوتر



ملاحظة ( الباترن قد يسبب تشوه للاستايل اثناء التقطيع للأخوة الذين لم ينتقو الباترين السهل )



والآن بعد ان انتهيت من تقطيع شرائح التمدد



خرج معي هكذا



قطعة التمدد للهيدر
http://www.caifnet.com/vb/dawraat/ALDAWRAA/Untitled-4.gif
قطعة التمدد للعمود الأيمن



http://www.caifnet.com/vb/dawraat/ALDAWRAA/Untitled-2.gif






قطعة التمدد العمود الأيسر




http://www.caifnet.com/vb/dawraat/ALDAWRAA/Untitled-3.gif



قطعة التمدد للفوتر





http://www.caifnet.com/vb/dawraat/ALDAWRAA/Untitled-1%20copy.GIF




اصبح عندنا أربع قطع تمدد



الآن مشروعنا الأول هذا
http://www.caifnet.com/vb/dawraat/dawraat/66.GIF



نقوم بحفظه



إضغط Ctrl+Alt+Shift+S



ثم تابع الصورة



http://www.caifnet.com/vb/dawraat/dawraat/71.GIF




والآن والحمد لله انتهينا من التقطيع



وهذه نتيجة التقطيع



http://www.caifnet.com/vb/dawraat/dawraat/72.GIF




أعتذر أشد الاعتذار على طول الشرح



واعتذر إذا كان الموضوع مايفتح بسرعة نسيت اخفف من حجم الصور http://www.caifnet.com/vb/images/smilies/f67.gif



بقي القليل من الدروس



أتمنى لكم التوفيق http://www.caifnet.com/vb/images/smilies/122.gif



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

أخواني الكرام

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

نبدأ مستعينين بالله

نفتح برنامج فرونت بيج

http://www.caifnet.com/vb/dawraat/dawraat/73.GIF
Microsoft Office FrontPage 2003

وهذي واجهة البرنامج
http://www.caifnet.com/vb/dawraat/dawraat/74.GIF

واعذروني على الدقة المخيسة لاني سويتها بالرسام

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

http://www.caifnet.com/vb/dawraat/dawraat/76.gif

الآن إضغط بزر الفارة الأيمن في مكان التصميم واختر خصائص الصفحة
اختر تصميم
http://www.caifnet.com/vb/dawraat/dawraat/77.gif
ثم أضغط بزر الفارة الأيمن واختر خصائص الصفحة

http://www.caifnet.com/vb/dawraat/dawraat/78.gif

وإعمل الإعدادات التالية
http://www.caifnet.com/vb/dawraat/dawraat/79.gif
والآن من قائمة جدول أختر ادراج ثم أختر جدول ...

ثم قم بعمل الإعدادات التالية :

كما بالصورة
http://www.caifnet.com/vb/dawraat/dawraat/81.gif
إعمل التالي :
http://www.caifnet.com/vb/dawraat/dawraat/82.gif

والآن نبدأ بإدراج الصور

ضع مؤشر الماوس في الخلية اليمنى العلوية
http://www.caifnet.com/vb/dawraat/dawraat/83.gif

ثم من قائمة إدراج >> صورة >>> من ملف ..
http://www.caifnet.com/vb/dawraat/dawraat/84.gif
ابحث عن الصورة ثم أضغط إدراج كما بالصورة التالية :

http://www.caifnet.com/vb/dawraat/dawraat/85.gif
وهكذا مع جميع الزواي حتى يصبح الشكل كالتالي :
http://www.caifnet.com/vb/dawraat/dawraat/86.gif


طيب نبدأ بالتمدد الآن

نضغط في الخلية الوسطى
http://www.caifnet.com/vb/dawraat/dawraat/87.gif
بزر الفارة الأيمن ونختار خصائص الخلية ...
http://www.caifnet.com/vb/dawraat/dawraat/88.gif
ثم إضغط على استعراض
http://www.caifnet.com/vb/dawraat/dawraat/89.gif

[فيروس خائف]

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

ثم إضغط على فتح كما بالصورة التالية :


http://www.caifnet.com/vb/dawraat/dawraat/90.gif


وكرر نفس العملية مع الفوتر والأعمدة حتى يخرج الشكل النهائي هكذا

http://www.caifnet.com/vb/dawraat/dawraat/91.gif




والآن قم بسحب أعمدة الخلايا حتى تصبح هكذا



http://www.caifnet.com/vb/dawraat/dawraat/92.gif



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

http://www.caifnet.com/vb/dawraat/dawraat/93.gif




واعمل الإعدادات التالية :


http://www.caifnet.com/vb/dawraat/dawraat/94.gif



اصبح لدينا ثلاث خلايا



http://www.caifnet.com/vb/dawraat/dawraat/95.gif

قم بإدراج الصور التجميلية كما شرحنا طريقة الإدراج قبل قليل

ثم قم بعمل محاذاه لليمين للصورة اليمنى ومحاذاة لليسار للصورة اليسرى وتوسيط أو ضبط لشعار المنتدى
سيصبح الشكل هكذا
http://www.caifnet.com/vb/dawraat/dawraat/96.gif


أعمل نفس الشي في الفوتر


كما لا ننسى تقسيم الفوتر ثم إدارج الصور ثم عمل المحاذاة حتى نخرج كما بالشكل التالي :

http://www.caifnet.com/vb/dawraat/dawraat/97.gif

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

واعتذر عن شرح تركيب المنتدى
هذا الشرح خاص لمن لهم منتدى يعملون عليه في الجهاز
================================================== =================================================

بعد الانتهاء من التركيب في الفرونت بيج نبدا بتركيبه في المنتدى بالطريقة التالية
لوحة تحكم المشرف العام >> الاستايلات والقوالب >> التحكم بالاستايلات

ثم أختر كما بالصورة


http://www.caifnet.com/vb/dawraat/dawraat/100.gif



ستنفتح لك كما بالصورة التالية


http://www.caifnet.com/vb/dawraat/dawraat/99.gif




انسخ الأكواد التي في التعليمات البرمجية كالتالي :


http://www.caifnet.com/vb/dawraat/dawraat/98.gif



ضعها كما شرحت هنا



http://www.caifnet.com/vb/dawraat/dawraat/99.gif



ثم أختر حفظ

http://www.caifnet.com/vb/dawraat/dawraat/101.gif

ومن هذه النقطة انتهينا من تركيب الاستايل
مبرووووووووووووووك للجميع


لمشاهدة الأستايل

http://www.caifnet.com/vb/index.php?styleid=19 (http://www.caifnet.com/vb/index.php?styleid=19)

اتمنى ان الشرح كان واضحاً واعتذر عن اي تقصير
اسأل الله التوفيق للجميع


رابط الدرس (http://www.caifnet.com/vb/showthread.php?t=386)

[-الزعيم-]

http://www.samygames.com/forumim/shokre/2/eaea256680.gif

موضوع في غاية الروعة و الابداع لا تمنعنا من مواضيعك

[فيروس خائف]

نورت

[ήsέť άήsάќ]

شرح رائع ~


يعطيك العافية ,, :9:

[فيروس خائف]

نورت / ـو في موضوعي
حياآك / ـم

[lifeline4host.com]

لا توجد صور بالشرح!!

[فيروس خائف]

نورت

[عبدالله ابراهيم]

تسلم

[فيروس خائف]

نورت

[ابو فاطمة]

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


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

بس اخوي العفو ملاحظة الصور ولا صورة ظاهرة بدون امر عليك ارفع الصور مرفق للحفاض عليها واكون ممنون اذا ترفعها على مركز http://imageshack.us/ للحفاض عليها

ممنون جدا على تلبيت طلبنا اخوي

[فيروس خائف]

نورت سيتم مشاهده تحديث الموضوع ونثل الصور المجدده

[الحزين]

أكون ممتن لك إذا طلعت الصور

[نواف الشوق]

مشكووور اخوي على المجهود

لكن الصور لم تظهر

تحياتي لك

[MaX_10]

يسلموووووووووووووووووووو’,,

[كذا يرضيك]

بارك الله فيك اخي الكريم

وبإنتظار جديدك المشوق دوماً

, , ,

[عبودي الجنابي]

كفووووو يا بطل

[ابو فاطمة]

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

جزاك الله خير ياذيب تسلم


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

[الرجل القناص]

يسلمو ع الدوره