×

][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][]

بسم الله الرحمن الرحيم السلام عليكم ورحمة الله وبركاته ،،،،،، وبعد : أعود إليكم في الدرس الثاني من دروس الدورة .. لعل وعسى أن أكون

قديمة 17 - 08 - 2005, 18:11
المشاركة 1
بسم الله الرحمن الرحيم

][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][]
][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][]

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

أعود إليكم في الدرس الثاني من دروس الدورة .. لعل وعسى أن أكون قد وفقت في عمل مايرضي الله عز وجل أولاً .. ثم مايرضيكم .. والأهم عندي هو دعواتكم لي .. عسى الله أن لايحرمنا وإياكم الأجر .

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

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

في البداية أعلم يارعاك الله أن موقعك يشاهده الناس عبر شاشات مختلفة .. منا ماهو صغير ( 15 بوصة ) .. ومنها ماهو كبير ( 17 ، 19 بوصة ) .. وعلى ذلك وفي معظم الأحيان تختلف دقة الشاشة .. بعضهم تكون دقة شاشته 800*600 بكسل .. وبعضهم تكون 1024*768 .. الخ

إذن هذه مشكلة كبيرة ! .. إذا صممنا موقعنا بقياس يناسب دقة 800*600 فسوف يظهر صغيراً في دقة 1024*768 .. والعكس صحيح !

مالحل ؟! .. هناك شيء يسمنوه [ منطقة التمدد ] .. حيث تعمل منطقة التمدد على جعل الموقع ملائماً لجميع المقاسات .. ومن وجهة نظري المتواضعة أنه لاحاجة لنا لذلك في أمر تصميم المواقع .. أما المنتديات فيجب علينا فعلها - وهذا ليس محور حدينا - ؛ لذلك لن أتطرق لهذه النقطة في الشرح .. لكني أحببت توضيحها كمعلومة بسيطة في البداية .. لأني أتوقع أن هذا السؤال يتبادر إلى أذهان الكثير ][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][] ، وسيكون تصميمنا اليوم في المقاس المناسب لدقة 800*600 ولاإشكال في ظهوره في مقاس 1024*768 إذا أحسنا التصميم ][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][] .

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

الآن قم بفتح برنامج الفوتوشوب ][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][] .. ثم من قائمة :
File >> New
][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][]

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

بعد ذلك ستظهر لك نافذة تقوم بتحديد طول وعرض الملف الجديد .. قم بوضع التالي :
العرض : 777

الطول : 702


ملاحظة : العرض ثابت في كل التصاميم ، أما الطول فهو يتغير بحسب رغبتك .

ثم أضغط زر ok ( كما في الصورة التالية ) .
][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][]


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

بعد ذلك قمنا بإختيار لونين متقاربين من بعضهم .. أحدهما فاتح .. والآخر أغمق منه بقليل .. كما في الصورة التالية .
][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][]
( اللون الذي في الأعلى هو الفاتح .. والذي في الأسفل هو الغامق )

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

الآن نريد أن نعمل إطار خارجي ( باللون الفاتح ) للموقع .. نقوم بإختيار الأداة الموضحة في الصورة .. ونقوم بالضغط عليها بالزر الأيمن ، ثم أختر الأداة الموضحة بالصورة .
][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][]

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

سيظهر لك في أعلى البرنامج شريط يحتوي على إعدادات متعددة .. طبّق عليه الإعدادات التالية .

][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][]

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

الآن قم برسم الإطار الخارجي على تصميمك كما في الصورة التالية .
][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][]

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

الآن إذهب إلى طبقة الإطار الخارجي ( LAYER ) .. واضغط عليها بالزر الأيمن واختر
( Blending options )

كما في الصورة التالية .
][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][]


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

ثم من القائمة اليسرى أختر (Stroke ) ، ثم طبّق الإعدادات التي في الصورة .
][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][]
ثم اضغط ok

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

الآن إنتهينا من الإطار الخارجي .. ونريد أن نعمل بنر علوي للموقع .. فنقوم بإختيار الأداة الموضحة في الصورة .. ونقوم بالضغط عليها بالزر الأيمن ، ثم أختر الأداة الموضحة بالصورة .
][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][]

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

سيظهر لك في أعلى البرنامج شريط يحتوي على إعدادات متعددة .. طبّق عليه الإعدادات التالية .

][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][]

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

الآن قم برسم البنر العلوي على تصميمك بحيث تكون أطرافه قبل نهاية أطراف الإطار الخارجي بقليل ، كما في الصورة التالية .

][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][]

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

الآن إذهب إلى طبقة البنر العلوي ( LAYER ) .. واضغط عليها بالزر الأيمن واختر
( Rasterize Layer )
كما في الصورة التالية .

][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][]

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

الآن أحتاج لتركيزك .. فسوف نقوم بالتعديل على البنر وإضافة حركة جمالية له ، انظر إلى أعلى البنر .. تجد أن فيه زوايا في اليمين واليسار .. مارأيك لو حذفناها وجعلنا شكل البنر وكأنه ستارة نازلة من الأعلى ][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][] ؟ .. فقط أتبع الآتي .. قم بإختيار أداة التحديد ][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][] ثم قم بتحديد الجزء العلوي من البنر .. كما في الصورة التالية .
][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][]

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

الآن قم بحذف الجزء الذي تم تحديده وذلك بالضغط على زر Delete
][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][]

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

الآن قم بالضغط على زر Ctrl + سهم للأعلى حتى يصبح أعلى البنر مطابق للإطار الخارجي .. كما في الصورة التالية .
][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][]

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

مارأيكم أن نقوم بتدليع البنر ؟! ][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][] ، وذلك بأن نقوم بإضافة بعض اللمسات الجمالية عليه .. حسناً .. أتبع الخطوات التالية ][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][] .

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

الآن إذهب إلى طبقة البنر العلوي ( LAYER ) .. واضغط عليها بالزر الأيمن واختر
( Blending options )

كما في الصورة التالية .
][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][]

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

ثم من القائمة اليسرى أختر ( Gradient Overly ) ، ثم افعل كما في الصورة التالية .
][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][]

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

الآن ستظهر لك نافذة طبّق عليها ماتراه في الصورة التالية .
ثم اضغط زر OK
][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][]


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

ثم من القائمة اليسرى أختر (Stroke ) ، ثم طبّق الإعدادات التي في الصورة .
ثم اضغط ok
][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][]

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

الآن خلونا ننبسط شوي ونكحّل عيوننا ونشوف العمل اللي ظاهر معنا ][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][] !
][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][]

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

الآن قم بالضغط على زر CTRL + R من لوحة المفاتيح ؛ وذلك لإطهار المسطرة .. ثم قم بحساب 80 بكسل من نهاية البنر العلوي .. كما في الصورة .
][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][]

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

بعد ذلك قم بإختيار لون أخضر أغمق بقليل من لون الإطار الخارجي .. كما في الصورة التالية .
][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][]

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

الآن نريد أن نعمل إطار داخلي للموقع .. نقوم بإختيار الأداة الموضحة في الصورة .. ونقوم بالضغط عليها بالزر الأيمن ، ثم أختر الأداة الموضحة بالصورة .
][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][]

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

سيظهر لك في أعلى البرنامج شريط يحتوي على إعدادات متعددة .. طبّق عليه الإعدادات التالية .
][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][]


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

الآن قم برسم الإطار الداخلي على تصميمك واجعل بدايته تكون على بعد 80 بكسل من نهاية البنر العلوي ، كما في الصورة التالية .
][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][]

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

الآن إذهب إلى طبقة الإطار الداخلي ( LAYER ) .. واضغط عليها بالزر الأيمن واختر
( Blending options )

كما في الصورة التالية .
][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][]

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

ثم من القائمة اليسرى أختر (Stroke ) ، ثم طبّق الإعدادات التي في الصورة .
][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][]

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

الآن مارأيكم أن نقوم بعمل قائمة فوق الإطار الداخلي ؟ نقوم بوضع الإقسام الرئيسية فيها ..
حسناً .. أتبع التالي .


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

الآن انتبه لهذه الخطوة .. اذهب إلى الطبقة ( Layer ) الخاصة بالإطار الداخلي .. ثم اضغط على الطبقة التي تقع تحته .. كما هو موضع في الصورة التالية .
][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][]

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

نقوم بإختيار الأداة الموضحة في الصورة .. ونقوم بالضغط عليها بالزر الأيمن ، ثم أختر الأداة الموضحة بالصورة .
][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][]

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

سيظهر لك في أعلى البرنامج شريط يحتوي على إعدادات متعددة .. طبّق عليه الإعدادات التالية .
][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][]

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

الآن قم برسم مستطيل محدب الأطراف .. واجعل نصفه في أعلى الإطار الداخلي .. ونصفه الباقي أسفل الإطار الداخلي .. كما في الصورة التالية .
][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][]

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

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

كما في الصورة التالية .
][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][]

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

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

كما في الصورة التالية .
][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][]


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

ثم من القائمة اليسرى أختر ( Drop Shadow ) ، ثم افعل كما في الصورة التالية .
][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][]
--------------------------------------------------------------------------------

ثم من القائمة اليسرى أختر ( Gradient Overly ) ، ثم افعل كما في الصورة التالية .
][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][]

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

الآن ستظهر لك نافذة طبّق عليها ماتراه في الصورة التالية .
ثم اضغط زر OK
][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][]


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

ثم من القائمة اليسرى أختر (Stroke ) ، ثم طبّق الإعدادات التي في الصورة .
ثم اضغط OK
][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][]


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

الآن شاهد كيف أصبح شكل الزر ، ياسلااااام ][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][] .
][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][]

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

الآن نريد أن نصنع مستطيلين آخرين بجانب هذا المستطيل ..!
لكن هناك طريقة أفضل وأسرع ..

قم بالضغط على طبقة المستطيل المحدب بالزر الأيمن ثم اختر

( Duplicate Layer )

كما هو موضح في الصورة التالية .
][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][]


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

الآن تجد أن هناك مستطيلاً آخر مطابق للمستطيل الذي صنعناه .. قم بتحريكه جهة اليسار بمسافة بسيطة وذلك بواسطه أداة السهم ][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][] ، ولاتنسى أن تضغط زر Shift أثناء تحريك المستطيل الثاني لليسار ؛ كي تحافظ على الإتزان .. كما في الصورة التالية .
][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][]

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

قم بالضغط على طبقة المستطيل المحدب ( الثاني ) بالزر الأيمن ثم اختر
( Duplicate Layer )

كما هو موضح في الصورة التالية .
][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][]


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

الآن تجد أن هناك مستطيلاً ثالثاً مطابق للمستطيلين السابقين.. الآن قم بتحريكه جهة اليسار بمسافة بسيطة وذلك بواسطه أداة السهم ][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][] ، ولاتنسى أن تضغط زر Shift أثناء تحريك المستطيل الثاني لليسار ؛ كي تحافظ على الإتزان .. كما في الصورة التالية .
][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][]

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

الآن نريد أن نفعل حركة جمالية في المستطيل الآخير .. نقوم بإختيار الأداة الموضحة في الصورة .. ونقوم بالضغط عليها بالزر الأيمن ، ثم أختر الأداة الموضحة بالصورة .
][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][]

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

ثم نقوم بعمل تحديد مشابه للذي في الصورة التالية .
][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][]
--------------------------------------------------------------------------------

الآن قم بالضغط على زر Delete ستجد أن المستطيل أصبح بهذا الشكل الجميل ..!
][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][]

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

الآن نريد أن نعمل حركة جمالية آخرى .. لكن ماهي الألوان المناسبة التي نستخدمها ؟
حسب ذوقي المخيس ][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][] .. أتوقع أن اللون الأخضر الفاتح يناسبه اللون البرتقالي الفاتح والأزرق الفاتح ! .. ربما يكون كلامي صحيحاً ربما لا ..!

أترك التجربة تجيبنا على هذا السؤال .


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

نقوم بإختيار الأداة الموضحة في الصورة .. ونقوم بالضغط عليها بالزر الأيمن ، ثم أختر الأداة الموضحة بالصورة .
][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][]

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

سيظهر لك في أعلى البرنامج شريط يحتوي على إعدادات متعددة .. طبّق عليه الإعدادات التالية .
][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][]

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

الآن قم برسم مستطيل كما في الصورة التالية :
][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][]

ولكن يجب عليك وضعه أسفل الطبقات ( Layers ) الخاصة بـالثلاث مستطيلات الخضراء التي رسمناها قبل قليل .

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

الآن إذهب إلى طبقة المستطيل الذي صنعناه قبل قليل .. واضغط عليها بالزر الأيمن واختر
( Rasterize Layer )

كما في الصورة التالية .
][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][]


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

الآن إذهب إلى طبقة المستطيل الذي صنعناه قبل قليل .. واضغط عليها بالزر الأيمن واختر
( Blending options )

كما في الصورة التالية .
][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][]

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

ثم من القائمة اليسرى أختر ( Gradient Overly ) ، ثم افعل كما في الصورة التالية .
][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][]

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

الآن ستظهر لك نافذة طبّق عليها ماتراه في الصورة التالية .
ثم اضغط زر OK
][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][]

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

ثم من القائمة اليسرى أختر (Stroke ) ، ثم طبّق الإعدادات التي في الصورة .
][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][]
ثم اضغط ok

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

هذه النتيجة التي حصلنا عليها الآن .
][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][]

الحمدلله كل شيء تمام ..


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

الآن بقي شكل جمالي آخر .. نقوم بتصميمه كما صممنا السابق .. لكن نجعله أطول من السابق بقليل .. نقوم بإختيار الأداة الموضحة في الصورة .. ونقوم بالضغط عليها بالزر الأيمن ، ثم أختر الأداة الموضحة بالصورة .
][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][]

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

سيظهر لك في أعلى البرنامج شريط يحتوي على إعدادات متعددة .. طبّق عليه الإعدادات التالية .
][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][]


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

الآن قم برسم مستطيل كما في الصورة التالية :
][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][]

ولكن يجب عليك وضعه أسفل الطبقة ( Layers ) الخاصة بالمستطيل البرتقالي التي رسمناها قبل قليل .

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

الآن إذهب إلى طبقة المستطيل الذي صنعناه قبل قليل .. واضغط عليها بالزر الأيمن واختر
( Rasterize Layer )

كما في الصورة التالية .
][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][]


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

الآن إذهب إلى طبقة المستطيل الذي صنعناه قبل قليل .. واضغط عليها بالزر الأيمن واختر
( Blending options )

كما في الصورة التالية .
][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][]


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

ثم من القائمة اليسرى أختر ( Gradient Overly ) ، ثم افعل كما في الصورة التالية .
][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][]

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

الآن ستظهر لك نافذة طبّق عليها ماتراه في الصورة التالية .
ثم اضغط زر OK
][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][]


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

ثم من القائمة اليسرى أختر (Stroke ) ، ثم طبّق الإعدادات التي في الصورة .
][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][]
ثم اضغط ok


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

هذه النتيجة التي حصلنا عليها الآن .
][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][]

الحمدلله كل شيء تمام ..


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

اممممممممم ، ماذا احتاج في موقعي ؟
نعم تذكرت .. أحتاج لـ شريط سفلي بتصميم جميل أكتب عليه عبارة لحفظ الحقوق .. لكن .. ماأنسب طريقة لصنع هذا الشريط ؟ .. أتبّع الآتي .

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

نقوم بإختيار الأداة الموضحة في الصورة .. ونقوم بالضغط عليها بالزر الأيمن ، ثم أختر الأداة الموضحة بالصورة .
][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][]

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

سيظهر لك في أعلى البرنامج شريط يحتوي على إعدادات متعددة .. طبّق عليه الإعدادات التالية .
][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][]


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

الآن قم برسم مستطيل في أسفل الإطار الداخلي ، كما في الصورة التالية :
][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][]

ولكن يجب عليك وضعه أعلى الطبقة ( Layers ) الخاصة بالإطار الداخلي .

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

الآن إذهب إلى طبقة المستطيل السفلي الذي صنعناه قبل قليل .. واضغط عليها بالزر الأيمن واختر
( Rasterize Layer )

كما في الصورة التالية .
][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][]

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

الآن إذهب إلى طبقة المستطيل السفلي الذي صنعناه قبل قليل .. واضغط عليها بالزر الأيمن واختر
( Blending options )

كما في الصورة التالية .
][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][]


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

ثم من القائمة اليسرى أختر ( Gradient Overly ) ، ثم افعل كما في الصورة التالية .
][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][]

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

الآن ستظهر لك نافذة طبّق عليها ماتراه في الصورة التالية .
][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][]
ثم اضغط زر OK

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

ثم من القائمة اليسرى أختر (Stroke ) ، ثم طبّق الإعدادات التي في الصورة .
][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][]
ثم اضغط ok


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

هذه النتيجة التي حصلنا عليها الآن .
][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][]

الحمدلله كل شيء تمام ..


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

اممممممممم ، ماذا احتاج في موقعي غير الشريط السفلي ؟ ؟
نعم تذكرت .. أحتاج لـ شريط علوي بتصميم مناسب أكتب عليه الأقسام الفرعية التي في موقعي .. لكن .. ماأنسب طريقة لصنع هذا الشريط ؟ .. أتبّع الآتي .


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

نقوم بإختيار الأداة الموضحة في الصورة .. ونقوم بالضغط عليها بالزر الأيمن ، ثم أختر الأداة الموضحة بالصورة .
][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][]

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

سيظهر لك في أعلى البرنامج شريط يحتوي على إعدادات متعددة .. طبّق عليه الإعدادات التالية .
][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][]

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

الآن قم برسم مستطيل في أسفل البنر العلوي ، كما في الصورة التالية :
][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][]

ولكن يجب عليك وضعه أعلى الطبقة ( Layers ) الخاصة بالبنر العلوي .

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

الآن إذهب إلى طبقة المستطيل ( الشريط العلوي ) الذي صنعناه قبل قليل .. واضغط عليها بالزر الأيمن واختر
( Rasterize Layer )

كما في الصورة التالية .
][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][]


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

الآن إذهب إلى طبقة المستطيل ( الشريط العلوي ) الذي صنعناه قبل قليل .. واضغط عليها بالزر الأيمن واختر
( Blending options )

كما في الصورة التالية .
][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][]


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

ثم من القائمة اليسرى أختر ( Gradient Overly ) ، ثم افعل كما في الصورة التالية .
][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][]

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

الآن ستظهر لك نافذة طبّق عليها ماتراه في الصورة التالية .
ثم اضغط زر OK
][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][]


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

ثم من القائمة اليسرى أختر (Stroke ) ، ثم طبّق الإعدادات التي في الصورة .
][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][]
ثم اضغط ok


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

هذه النتيجة لكامل التصميم][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][] .
][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][]

الحمدلله الأمور على مايرام .. !


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

الآن إنتهينا من التصميم .. بقي عليك إضافة النصوص إلى التصميم ( البنرات ، أسماء الأقسام ، ..الخ ) !
إضافة النصوص يكون عن طريق هذه الأداة ][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][] .. والتحكم بتنسيق النص يكون عن الطريق هذا الشريط الذي يظهر في أعلى البرنامج:
][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][]

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

عن نفسي فقد قمت بإضافة النصوص التي أحتاجها كذلك صممت لي شعاراً خاصاً وضعته في البنر .. وأتيت ببعض الأيقونات الجمالية ووضعتها بطريقة من اختياري .. ووضعت مساحة إعلانية .. حتى أصبح الشكل النهائي لتصميم كما في الصورة التالية :
][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][]

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


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

ملاحظة هامة : الكثير يسألني عن كيفية عمل مثل الخط الذي كتبت فيه البسملة في أعلى البنر .. كما في هذه الصورة :
][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][]

الأمر بسيط جداً .. فقط طبّق الإعدادات التالية في شريط تنسيق النص الموجود في أعلى الفوتوشوب ( بعد اختيار الأداة ][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][] ) :

][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][]

وبإذن الله سوف تحصل على النص بهذا التنسيق الجميل ][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][] ..!


--------------------------------------------------------------------------------
بهذا .. نكون قد انتهينا من الدرس الثاني ][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][] ... وبدون مبالغة .. لاأذكر أني قد تعبت مثلما تعبت في هذ الدرس .. فقد أخذ من أكثر من 3 أيام ! ، أسأل الله العلي القدير أن ينفع به الإسلام والمسلمين وأن أكون قد وفقت في شرح طريقة العمل .. فإن أصبت فمن الله وإن أخطأت فمن نفسي والشيطان .. وانتظرونا في الدرس الثالث .. فسوف نتكلم بإذن الله عن الخطوة الأهم .. وهي تقصيص التصميم وحفظه على هيئة صفحات انترنت ( Webpage ) ، انتظرونا ولاتنسوني من دعائكم ][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][] ..




انتهى الدرس .. بإنتظار تطبيقاتكم واستفساراتكم ! ][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][]

][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][]
][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][]

تحياتي .. ابو ريناز
www.AboRenaz.com
كرز ديزاين معجب بهذا.
المشاهدات 6166 | التعليقات 43
قديمة 17 - 08 - 2005, 18:17
المشاركة 2
ألالـمـأس
:: عضو نشيط ::
تاريخ الإنضمام: 04 - 03 - 2005
رقم العضوية : 2033
الدولة : ولأيــــــــ.الــعــيــون.ـــــــة
العمر: 35
المشاركات: 1,011
افتراضي رد : ][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][]
يعطيك العافية

درس مميز
قديمة 17 - 08 - 2005, 18:18
المشاركة 3
صورة 'x_5' الرمزية
x_5
:: TRAIDNT ::
:: رفيق الدرب ::
تاريخ الإنضمام: 20 - 09 - 2004
رقم العضوية : 11
الدولة : :: UAE ::
المشاركات: 258,267
11
افتراضي رد : ][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][]
ما شاءالله عليك
يعطيك العافية اخوي كفيت ووفيت
قديمة 17 - 08 - 2005, 18:28
المشاركة 4
الشريف
:: عضو نشيط ::
تاريخ الإنضمام: 12 - 01 - 2005
رقم العضوية : 1058
الدولة : مكة [قبلة الدنيا]
المشاركات: 4,489
افتراضي رد : ][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][]
تسلم هاليد يابو ريناز


كفيت ووفيت

لا عدمتك
(عسل على حَدّ الموس!)
~~~
للخط حدّ و حدّه (ا) خطوطه الصُفْر ... وكـلٍ بما يـكتب يحـدّد مسـاره
إما تعيـقل و أدرك الخير والشـر ... و إما تخيـبل و لِبْس عقله حَمَاره
يا خط فكري خلك اليوم في الخُضْر ... و إن حوّلت بـقعا فعَـدّ الإشـارة

~~~
جبلٌ صامت ،،، تحوم الصقور حول قمته ،،، و تحيا بحممه البركانية!
قديمة 17 - 08 - 2005, 18:30
المشاركة 5
ksa512
:: عضو فعال ::
تاريخ الإنضمام: 05 - 04 - 2005
رقم العضوية : 3432
المشاركات: 135
افتراضي رد : ][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][]
الله يجزاك خير اخوى
كيف تم عمل هذا التحديد بهذا الشكل
رد : ][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][]
ارجو الافادة اخوى
والف شكر
قديمة 17 - 08 - 2005, 22:31
المشاركة 6
ابو ريناز
:: عضـــو::
تاريخ الإنضمام: 15 - 04 - 2005
رقم العضوية : 3694
المشاركات: 101
افتراضي رد : ][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][]
شكراً لكم جميعاً ..
اخي ksa512 .. لم افهم قصدك .. اتقصد كيف جعلته متحركاً ..؟

ام كيف صنعته في الفوتوشب .. ان كان الثاني هو سؤالك .. فالإجابة في الشرح
قديمة 17 - 08 - 2005, 23:30
المشاركة 7
*الفهد*
:: عضـــو::
تاريخ الإنضمام: 06 - 08 - 2005
رقم العضوية : 6872
المشاركات: 118
افتراضي رد : ][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][]
جزاك الله كل خير بالفعل درس متميز من شخص متميز

ويستحق الاشاده بكل ما يقدم ..


لا هنت عزيزي وعساك على القوه
قديمة 17 - 08 - 2005, 23:37
المشاركة 8
يوسفksa
:: عضو جديد ::
تاريخ الإنضمام: 10 - 08 - 2005
رقم العضوية : 7037
المشاركات: 7
افتراضي رد : ][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][]
مشكوووووور والله يعطيك العافيه حبيبي وماقصررررررت
قديمة 18 - 08 - 2005, 03:11
المشاركة 9
صورة 'عرب سوفت' الرمزية
عرب سوفت
:: عضو نشيط ::
تاريخ الإنضمام: 03 - 02 - 2005
رقم العضوية : 1416
الدولة : القطيف
العمر: 33
المشاركات: 4,299
افتراضي رد : ][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][]
ماشاء الله

درس روعه

يسلموووووووووو اخوي
قديمة 18 - 08 - 2005, 06:18
المشاركة 10
meshari1.com
:: عضـــو::
تاريخ الإنضمام: 19 - 01 - 2005
رقم العضوية : 1146
العمر: 28
المشاركات: 107
افتراضي رد : ][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][]
الله يعطيك العافيه أخوي أبو ريناز على الشرح والمجهود الرائع

كفيت وفيت ياغالي

تحياتي
قديمة 18 - 08 - 2005, 08:03
المشاركة 11
الماستر
:: عضو نشيط ::
تاريخ الإنضمام: 24 - 09 - 2004
رقم العضوية : 29
الدولة : جدة
المشاركات: 318
افتراضي رد : ][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][]
حقيقي ياابو ريناز درس قمة بالروعه

يعطيك الف عافيه

ومشكوووووور ياعسل ماقصرت

وجزيت خيراً على هذا الدرس
قديمة 18 - 08 - 2005, 08:48
المشاركة 12
صورة 'درب الامـارات' الرمزية
درب الامـارات
::عضو شرف::
تاريخ الإنضمام: 12 - 08 - 2005
رقم العضوية : 7110
المشاركات: 7,986
افتراضي رد : ][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][]
بارك الله فيك على المجهود

وربي يقويك اخوي

اخوك

درب الامارات
قديمة 18 - 08 - 2005, 11:51
المشاركة 13
صورة 'سيف الغرام' الرمزية
سيف الغرام
:: عضو نشيط ::
تاريخ الإنضمام: 03 - 02 - 2005
رقم العضوية : 1420
الدولة : :: KSA ::
المشاركات: 440
افتراضي رد : ][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][]
يعطيك الف عافية اخوي ابو ريناز
على الشرح
قديمة 26 - 08 - 2005, 02:27
المشاركة 14
صورة 'M!ss N!le' الرمزية
M!ss N!le
:: عضو شرف ::
تاريخ الإنضمام: 09 - 03 - 2005
رقم العضوية : 2292
الدولة : .:+ تـرايـدنـت +:. :
المشاركات: 15,073
افتراضي رد : ][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][]
اخى الكريم ابو ريناز

ماشاء الله تبارك الرحمن درس جميل وواضح

ومتعوب عليه

وتفضل تطبيقى المتواضع على درسك الرائع

وننتظر الدرس الثالث

[bimg]http://www.traidnt.org/up/pic.php?u=23iTs1A&i=732[/bimg]



اختك فى الله

مس نيل
قديمة 26 - 08 - 2005, 03:23
المشاركة 15
li1il.com
:: عضو نشيط ::
تاريخ الإنضمام: 26 - 07 - 2005
رقم العضوية : 6442
المشاركات: 388
افتراضي رد : ][][§¤°^°¤§][ دورة تصميم المواقع الإحترافية ~ الدرس الثاني ~ ][§¤°^°¤§][]
الله يجزاك الجنة
أخي ابو ريناز ... وحقيقة ... درس .. 100%

ننتظر الدرس القادم ... وبقوة ..
منتديات . شــخامـــيــــط

http://www.li1il.com/vb
مواضيع ذات صلة

 
اضافة رد
 

350 كتاب لموقعك ويتبعها اكثر 4000 كتاب شرح بالصور طريقة التسجيل في webstats4u

أدوات الموضوع ابحث في الموضوع
ابحث في الموضوع:

البحث المتقدم
طرق العرض


الساعة معتمدة بتوقيت جرينتش +3 . الساعة الآن : 18:47.
المعهد غير مسؤول عن أي اتفاق تجاري أو تعاوني بين الأعضاء
فعلى كل شخص تحمل مسئولية نفسه إتجاه مايقوم به من بيع وشراء وإتفاق وأعطاء معلومات موقعه
التعليقات المنشورة لا تعبر عن رأي معهد ترايدنت ولا نتحمل أي مسؤولية قانونية حيال ذلك (ويتحمل كاتبها مسؤولية النشر)

جميع الحقوق محفوظة Traidnt 2019
  • 00966138651070
  • 00966138648289
  • 2051033691
Powered by vBulletin® Version 3.8.11 .Copyright ©2000 - 2019, Jelsoft Enterprises Ltd
SEO by vBSEO ©2011, Crawlability, Inc.