درس تصميم واجهة احترافية

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

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

درس تصميم واجهة احترافية

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

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

في البداية أعلم يارعاك الله أن موقعك يشاهده الناس عبر شاشات مختلفة .. منا ماهو صغير ( 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

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

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

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

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

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

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

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

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

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

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

الأمر بسيط جداً .. فقط طبّق الإعدادات التالية في شريط تنسيق النص الموجود في أعلى الفوتوشوب ( بعد اختيار الأداة [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة] ) :

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

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

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

--------------------------------------------------------------------------------
1

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

الآن يجب علينا أن نقوم بإختيار هذا الأداة [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة] من شريط الأدوات في برنامج الفوتوشوب .. حتى نقوم بعملية القص .

لكن .. أنتبه .. فهناك عدة أنواع من القص :

أولاً : قص الزوايا .

ثانياً : قص الصورة التي نريد أن نضع عليها رابطاً .. أي نجعل الزائر ينتقل إلى صفحة أخرى عندما يضغط عليها .

ثالثاً : قص الصورة التي نريد أن نحذفها ونضع في مكانها لوناً ؛ ليخف حجم الموقع .

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

الآن نأتي للتفاصيل .

--------------------------------------------------------------------------------
2

أولاً : قص الزوايا
بعد أختيار أداة التحديد قم بقص جميع الزوايا وأحرص على أن تكون بنفس المقاسات .. شاهد الصورة التالية :
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

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

--------------------------------------------------------------------------------
3

ثانياً : قص الصورة التي نريد أن نضع عليها رابطاً .. أي نجعل الزائر ينتقل إلى صفحة أخرى عندما يضغط عليها .

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

--------------------------------------------------------------------------------
4

ثالثاً : قص الصورة التي نريد أن نحذفها ونضع في مكانها لوناً ؛ ليخف حجم الموقع .

الآن نقوم بقص الأماكن التي تحتوي على لون واحد .. لكي نقوم بحذفها [ فيما بعد ] ثم نقوم باستبدالها بلون مطابق للون الصورة التي حذفنها ، الآن عليك فقط قص الصورة التي تحتوي على لون واحد .. كما في الصورة التالية ( قمت بتوضيح الحدود باللون الأحمر ) :

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

--------------------------------------------------------------------------------
5

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

هذه بصراحة أصعب نقطة أواجهها في الشرح ! ، قم الآن بتحديد الصور التي ترى أنها يمكن أن تستبدل بصورة صغيرة [ فيما بعد ] .. لاأدري هل وضحت النقطة أم لا ! .. عموماً شاهدوا هذه الصورة المكبّرة :
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

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

--------------------------------------------------------------------------------
6

جميلٌ جداً .. الآن أنتهينا من مرحلة التقصيص .. ويجب علينا حفظ التصميم كـ [ صفحة ويب ] .. كيف ذلك ؟! .. تابع التالي .

--------------------------------------------------------------------------------
7

من قائمة :
File >> Save for Web
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

--------------------------------------------------------------------------------
8

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

--------------------------------------------------------------------------------
9

تظهر لك نافذة حفظ الملف .. وفي أسفلها شريط إعدادات .. طبقّ الإعدادات كما في الصورة التالية .
ثم أضغط زر Save .
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

ملاحظة : أنصحك بإنشاء مجلد جديد خاص للموقع .

--------------------------------------------------------------------------------
10

الآن أرجع إلى موقعك بالفوتوشوب .. وقم بمضاعفته .. من قائمة :
Image >> Duplcate

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

--------------------------------------------------------------------------------
11

ستظهر لك نافذة مثل النافذة التالية .. لاتنس أن تضع علامة " صح " على العبارة الموجودة في الصورة :
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

--------------------------------------------------------------------------------
12

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

ثم اضغط على Ctrl + C لنسخها ..

ثم أضغط على Ctrl + N لفتح ملف جديد ( واترك المقاس كما هو ) .

ثم اضغط على Ctrl + V للصق الصورة في الملف الجديد .. لتصبح مثل الصورة التالية :

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

ثم قم بحفظها في مجلد الصور images ..

File >> Save for Web

لكن أجعل إعدادات الحفظ كما في الصورة التالية ( سم الصورة بأي اسم تريد .. هنا اسميتها up ) :
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

هذه الصورة صغيرة الحجم .. وبإمكاننا إستخدامها لتخفيف حجم الموقع وزيادة سرعة تحميل الصفحة ! .. سندرس التفاصيل بعد قليل إن شاء الله ..

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

--------------------------------------------------------------------------------
13

الآن قم بفتح برنامج الفرونت بيج ( [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة] Microsoft Office FrontPage 2003 ) .. ثم قم بفتح صفحة Index التي حفظتها عن طريق الفوتوشوب قبل قليل ..
ثم قم بالضغط بالزر الأيمن على أي منطقة .. واختر ( خصائص الصفحة ) .. كما في الصورة التالية :

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

--------------------------------------------------------------------------------
14

الآن قم بعمل مافي الصورة التالية :

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

--------------------------------------------------------------------------------
15

ثم من القائمة الموجودة في الجهة اليسرى السفلية .. طبّق مافي الصورة التالية :
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

ثم اعمل التالي :

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

ثم اضغط ( موافق ) ثم ( موافق ) ثم ( موافق ) .

ستجد أن التصميم أصبح في منتصف الصفحة ..

--------------------------------------------------------------------------------
16

جميلٌ جداً .. الآن سنعمل التالي :
أولاً : عمل روابط على الصور التي نريد أن نضع عليها روابط ! .

ثانياً : حذف الصور ذات اللون الواحد وإبدالها بلون ؛ ليخف حجم الموقع .

ثالثاً : حذف الصور التي يمكن استبدالها بصورة صغيرة متمدة ؛ ليخفّ حجم الموقع .

إلى التفاصيل :

--------------------------------------------------------------------------------
17

أولاً : عمل روابط على الصور التي نريد أن نضع عليها روابط :

أضغط على الصورة التي تريد وضع رابط عليها بالزر الأيمن .. ثم اختر ( خصائص الصورة ) .. كما في الصورة التالية .
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

--------------------------------------------------------------------------------
18

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

--------------------------------------------------------------------------------
19

ثم من تبيويب ( عام ) طبّق الإعدادات التالية .
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

ثم اضغط ( موافق ) .

وأفعل هذا مع كل الصور التي تريد أن تضع عليها رابطاً .

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

ملاحظة : البعض سألني عن أكواد جعل الموقع كصفحة رئيسية و إضافة الموقع للمفضلة .. سأضعها لكم هنا ..

- كود جعل الموقع كـ صفحة رئيسية بموقغك ! :

كود:

مع تغيير مايلزم .

- كود إضافة الموقع للمفضلة :

كود:

مع تغيير مايلزم .

--------------------------------------------------------------------------------
20

ثانياً : حذف الصور ذات اللون الواحد وإبدالها بلون ؛ ليخف حجم الموقع .

اذهب الى الصور التي قمت بقصّها في الخطوة رقم 4 واضغط عليها بالزر الأيمن .. ثم اختر ( خصائص الخلية ) .. كما في الصورة التالية :
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

--------------------------------------------------------------------------------
21

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

--------------------------------------------------------------------------------
22

الآن قم بسحب شافط الألوان .. وافلته على الصورة التي ضغطت عليها بالزر الأيمن قبل قليل ! .. كما في الصورة التالية :
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

قم اضغط ( موافق ) ثم ( موافق ) .

--------------------------------------------------------------------------------
23

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

أفعل هذه الخطوة مع باقي المساحات التي قمنا بتحديدها في الخطوة رقم 4 .

--------------------------------------------------------------------------------
24

ثالثاً : حذف الصور التي يمكن استبدالها بصورة صغيرة متمدة ؛ ليخفّ حجم الموقع .

اذهب الى الصور التي قمت بقصّها في الخطوة رقم 5 واضغط عليها بالزر الأيمن .. ثم اختر ( خصائص الخلية ) .. كما في الصورة التالية :
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

--------------------------------------------------------------------------------
25

الآن اضغط على كلمة ( استعراض ) الموجودة في الصورة التالية :
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

ثم اخترالصورة الصغيرة التي قمت بقصّها وحفظها في الخطوة رقم 12 .. كما في الصورة التالية :
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

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

أفعل هذه الخطوة مع باقي المساحات التي قمنا بتحديدها في الخطوة رقم 5 .

--------------------------------------------------------------------------------
26

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

عن نفسي فقد قمت بإضافة بعض اللمسات البسيطة حتى أصبح الموقع بهذا الشكل :
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

ولمعاينة الموقع .. أضغط على هذا الزر [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة] من شريط التنسيق .

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

بهذا .. نكون قد انتهينا من الدرس الثالث بحمد الله .. أتمنى أن يكون الدرس وضجاً وبسيطاً عليكم .. وأعذروني على التقصير .. فقط أريد منكم الدعاء لي ولوالدي [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة] .

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

عاشت ايدك

تقبل مروري

» Newnew درس تصميم خامة الحجر
» [Patience] واجهة لجميع المواقع والشبكات
» تصميم ساعة ببرنامج المايا
» حصريا درس فوتوشوب عمل تصميم احترافي
» صور تصميم Stock Photo - Spa Stones