منتديات جيمز عرب
درس اخر صمم واجهة باحتراف Untitl20
منتديات جيمز عرب
درس اخر صمم واجهة باحتراف Untitl20
منتديات جيمز عرب
هل تريد التفاعل مع هذه المساهمة؟ كل ما عليك هو إنشاء حساب جديد ببضع خطوات أو تسجيل الدخول للمتابعة.


احدث العاب الكمبيوتر الكاملة . اقوي الافلام . احدث البرامج . دعم منتديات احلي منتدي . فوتوشوب
 
الرئيسيةدرس اخر صمم واجهة باحتراف Emptyأحدث الصورالتسجيلدخول
                         

 

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

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


درس اخر صمم واجهة باحتراف 71322149
عدد النقاط : 53154
عدد المساهمات : 413

درس اخر صمم واجهة باحتراف Empty
مُساهمةموضوع: درس اخر صمم واجهة باحتراف   درس اخر صمم واجهة باحتراف Emptyالأحد سبتمبر 26, 2010 3:57 pm

الآن قم بفتح برنامج الفوتوشوب درس اخر صمم واجهة باحتراف Photoshop_icon .. ثم من قائمة :
File >> New
درس اخر صمم واجهة باحتراف Tasmem_mongt001

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

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

الطول : 702

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

ثم أضغط زر ok ( كما في الصورة التالية ) .
درس اخر صمم واجهة باحتراف COURSE_lesson2_001


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

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

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

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

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

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

درس اخر صمم واجهة باحتراف COURSE_lesson2_004

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

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

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

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

كما في الصورة التالية .
درس اخر صمم واجهة باحتراف COURSE_lesson2_006


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

ثم من القائمة اليسرى أختر (Stroke ) ، ثم طبّق الإعدادات التي في الصورة .
درس اخر صمم واجهة باحتراف COURSE_lesson2_007
ثم اضغط ok

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

الآن إنتهينا من الإطار الخارجي .. ونريد أن نعمل بنر علوي للموقع .. فنقوم بإختيار الأداة الموضحة في الصورة .. ونقوم بالضغط عليها بالزر الأيمن ، ثم أختر الأداة الموضحة بالصورة .
درس اخر صمم واجهة باحتراف COURSE_lesson2_003

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

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

درس اخر صمم واجهة باحتراف COURSE_lesson2_008

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

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

درس اخر صمم واجهة باحتراف COURSE_lesson2_009

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

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

درس اخر صمم واجهة باحتراف COURSE_lesson2_010

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

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

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

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

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

الآن قم بالضغط على زر Ctrl + سهم للأعلى حتى يصبح أعلى البنر مطابق للإطار الخارجي .. كما في الصورة التالية .
درس اخر صمم واجهة باحتراف COURSE_lesson2_013

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

مارأيكم أن نقوم بتدليع البنر ؟! درس اخر صمم واجهة باحتراف Biggrin23 ، وذلك بأن نقوم بإضافة بعض اللمسات الجمالية عليه .. حسناً .. أتبع الخطوات التالية درس اخر صمم واجهة باحتراف Thumbdown .

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

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

كما في الصورة التالية .
درس اخر صمم واجهة باحتراف COURSE_lesson2_006

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

ثم من القائمة اليسرى أختر ( Gradient Overly ) ، ثم افعل كما في الصورة التالية .
درس اخر صمم واجهة باحتراف COURSE_lesson2_015

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

الآن ستظهر لك نافذة طبّق عليها ماتراه في الصورة التالية .
ثم اضغط زر OK
درس اخر صمم واجهة باحتراف COURSE_lesson2_016


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

ثم من القائمة اليسرى أختر (Stroke ) ، ثم طبّق الإعدادات التي في الصورة .
ثم اضغط ok
درس اخر صمم واجهة باحتراف COURSE_lesson2_014

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

الآن خلونا ننبسط شوي ونكحّل عيوننا ونشوف العمل اللي ظاهر معنا درس اخر صمم واجهة باحتراف Nosweat !
درس اخر صمم واجهة باحتراف COURSE_lesson2_017

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

الآن قم بالضغط على زر CTRL + R من لوحة المفاتيح ؛ وذلك لإطهار المسطرة .. ثم قم بحساب 80 بكسل من نهاية البنر العلوي .. كما في الصورة .
درس اخر صمم واجهة باحتراف COURSE_lesson2_020

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

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

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

الآن نريد أن نعمل إطار داخلي للموقع .. نقوم بإختيار الأداة الموضحة في الصورة .. ونقوم بالضغط عليها بالزر الأيمن ، ثم أختر الأداة الموضحة بالصورة .
درس اخر صمم واجهة باحتراف COURSE_lesson2_003

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

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


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

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

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

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

كما في الصورة التالية .
درس اخر صمم واجهة باحتراف COURSE_lesson2_006

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

ثم من القائمة اليسرى أختر (Stroke ) ، ثم طبّق الإعدادات التي في الصورة .
درس اخر صمم واجهة باحتراف COURSE_lesson2_014

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

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


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

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

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

نقوم بإختيار الأداة الموضحة في الصورة .. ونقوم بالضغط عليها بالزر الأيمن ، ثم أختر الأداة الموضحة بالصورة .
درس اخر صمم واجهة باحتراف COURSE_lesson2_003

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

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

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

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

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

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

كما في الصورة التالية .
درس اخر صمم واجهة باحتراف COURSE_lesson2_010

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

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

كما في الصورة التالية .
درس اخر صمم واجهة باحتراف COURSE_lesson2_006


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

ثم من القائمة اليسرى أختر ( Drop Shadow ) ، ثم افعل كما في الصورة التالية .
درس اخر صمم واجهة باحتراف COURSE_lesson2_025
--------------------------------------------------------------------------------

ثم من القائمة اليسرى أختر ( Gradient Overly ) ، ثم افعل كما في الصورة التالية .
درس اخر صمم واجهة باحتراف COURSE_lesson2_029

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

الآن ستظهر لك نافذة طبّق عليها ماتراه في الصورة التالية .
ثم اضغط زر OK
درس اخر صمم واجهة باحتراف COURSE_lesson2_027


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

ثم من القائمة اليسرى أختر (Stroke ) ، ثم طبّق الإعدادات التي في الصورة .
ثم اضغط OK
درس اخر صمم واجهة باحتراف COURSE_lesson2_028


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

الآن شاهد كيف أصبح شكل الزر ، ياسلااااام درس اخر صمم واجهة باحتراف Nosweat .
درس اخر صمم واجهة باحتراف COURSE_lesson2_030

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

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

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

( Duplicate Layer )

كما هو موضح في الصورة التالية .
درس اخر صمم واجهة باحتراف COURSE_lesson2_031


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

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

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

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

كما هو موضح في الصورة التالية .
درس اخر صمم واجهة باحتراف COURSE_lesson2_031


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

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

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

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

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

ثم نقوم بعمل تحديد مشابه للذي في الصورة التالية .
درس اخر صمم واجهة باحتراف COURSE_lesson2_036
--------------------------------------------------------------------------------

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

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

الآن نريد أن نعمل حركة جمالية آخرى .. لكن ماهي الألوان المناسبة التي نستخدمها ؟
حسب ذوقي المخيس درس اخر صمم واجهة باحتراف Biggrin23 .. أتوقع أن اللون الأخضر الفاتح يناسبه اللون البرتقالي الفاتح والأزرق الفاتح ! .. ربما يكون كلامي صحيحاً ربما لا ..!

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


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

نقوم بإختيار الأداة الموضحة في الصورة .. ونقوم بالضغط عليها بالزر الأيمن ، ثم أختر الأداة الموضحة بالصورة .
درس اخر صمم واجهة باحتراف COURSE_lesson2_003

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

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

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

الآن قم برسم مستطيل كما في الصورة التالية :
درس اخر صمم واجهة باحتراف COURSE_lesson2_038

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

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

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

كما في الصورة التالية .
درس اخر صمم واجهة باحتراف COURSE_lesson2_010


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

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

كما في الصورة التالية .
درس اخر صمم واجهة باحتراف COURSE_lesson2_006

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

ثم من القائمة اليسرى أختر ( Gradient Overly ) ، ثم افعل كما في الصورة التالية .
درس اخر صمم واجهة باحتراف COURSE_lesson2_015

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

الآن ستظهر لك نافذة طبّق عليها ماتراه في الصورة التالية .
ثم اضغط زر OK
درس اخر صمم واجهة باحتراف COURSE_lesson2_039

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

ثم من القائمة اليسرى أختر (Stroke ) ، ثم طبّق الإعدادات التي في الصورة .
درس اخر صمم واجهة باحتراف COURSE_lesson2_040
ثم اضغط ok

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

هذه النتيجة التي حصلنا عليها الآن .
درس اخر صمم واجهة باحتراف COURSE_lesson2_041

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


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

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

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

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


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

الآن قم برسم مستطيل كما في الصورة التالية :
درس اخر صمم واجهة باحتراف COURSE_lesson2_042

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

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

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

كما في الصورة التالية .
درس اخر صمم واجهة باحتراف COURSE_lesson2_010


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

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

كما في الصورة التالية .
درس اخر صمم واجهة باحتراف COURSE_lesson2_006


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

ثم من القائمة اليسرى أختر ( Gradient Overly ) ، ثم افعل كما في الصورة التالية .
درس اخر صمم واجهة باحتراف COURSE_lesson2_029

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

الآن ستظهر لك نافذة طبّق عليها ماتراه في الصورة التالية .
ثم اضغط زر OK
درس اخر صمم واجهة باحتراف COURSE_lesson2_043


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

ثم من القائمة اليسرى أختر (Stroke ) ، ثم طبّق الإعدادات التي في الصورة .
درس اخر صمم واجهة باحتراف COURSE_lesson2_044
ثم اضغط ok


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

هذه النتيجة التي حصلنا عليها الآن .
درس اخر صمم واجهة باحتراف COURSE_lesson2_045

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


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

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

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

نقوم بإختيار الأداة الموضحة في الصورة .. ونقوم بالضغط عليها بالزر الأيمن ، ثم أختر الأداة الموضحة بالصورة .
درس اخر صمم واجهة باحتراف COURSE_lesson2_003

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

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


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

الآن قم برسم مستطيل في أسفل الإطار الداخلي ، كما في الصورة التالية :
درس اخر صمم واجهة باحتراف COURSE_lesson2_046

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

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

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

كما في الصورة التالية .
درس اخر صمم واجهة باحتراف COURSE_lesson2_010

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

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

كما في الصورة التالية .
درس اخر صمم واجهة باحتراف COURSE_lesson2_006


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

ثم من القائمة اليسرى أختر ( Gradient Overly ) ، ثم افعل كما في الصورة التالية .
درس اخر صمم واجهة باحتراف COURSE_lesson2_015

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

الآن ستظهر لك نافذة طبّق عليها ماتراه في الصورة التالية .
درس اخر صمم واجهة باحتراف COURSE_lesson2_047
ثم اضغط زر OK

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

ثم من القائمة اليسرى أختر (Stroke ) ، ثم طبّق الإعدادات التي في الصورة .
درس اخر صمم واجهة باحتراف COURSE_lesson2_048
ثم اضغط ok


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

هذه النتيجة التي حصلنا عليها الآن .
درس اخر صمم واجهة باحتراف COURSE_lesson2_049

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


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

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


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

نقوم بإختيار الأداة الموضحة في الصورة .. ونقوم بالضغط عليها بالزر الأيمن ، ثم أختر الأداة الموضحة بالصورة .
درس اخر صمم واجهة باحتراف COURSE_lesson2_003

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

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

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

الآن قم برسم مستطيل في أسفل البنر العلوي ، كما في الصورة التالية :
درس اخر صمم واجهة باحتراف COURSE_lesson2_050

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

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

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

كما في الصورة التالية .
درس اخر صمم واجهة باحتراف COURSE_lesson2_010


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

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

كما في الصورة التالية .
درس اخر صمم واجهة باحتراف COURSE_lesson2_006


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

ثم من القائمة اليسرى أختر ( Gradient Overly ) ، ثم افعل كما في الصورة التالية .
درس اخر صمم واجهة باحتراف COURSE_lesson2_015

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

الآن ستظهر لك نافذة طبّق عليها ماتراه في الصورة التالية .
ثم اضغط زر OK
درس اخر صمم واجهة باحتراف COURSE_lesson2_047


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

ثم من القائمة اليسرى أختر (Stroke ) ، ثم طبّق الإعدادات التي في الصورة .
درس اخر صمم واجهة باحتراف COURSE_lesson2_048
ثم اضغط ok


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

هذه النتيجة لكامل التصميمدرس اخر صمم واجهة باحتراف Nosweat .
درس اخر صمم واجهة باحتراف COURSE_lesson2_051

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


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

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

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

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

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


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

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

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

درس اخر صمم واجهة باحتراف COURSE_lesson2_052

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

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

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

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

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

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

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

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

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


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

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

بعد قص جميع الزوايا في الموقع يصبح لهذا الشكل :
درس اخر صمم واجهة باحتراف COURSE_lesson3_003

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

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

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


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

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

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

درس اخر صمم واجهة باحتراف COURSE_lesson3_005

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

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

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

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



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

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

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

من قائمة :
File >> Save for Web
درس اخر صمم واجهة باحتراف COURSE_lesson3_008

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

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

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

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


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

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

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

كما الصورة التالية .
درس اخر صمم واجهة باحتراف COURSE_lesson3_011

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

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


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

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

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

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

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

درس اخر صمم واجهة باحتراف Main_37

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

File >> Save for Web

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


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

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



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

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

درس اخر صمم واجهة باحتراف COURSE_lesson3_015


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

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

درس اخر صمم واجهة باحتراف COURSE_lesson3_016

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

ثم من القائمة الموجودة في الجهة اليسرى السفلية .. طبّق مافي الصورة التالية :
درس اخر صمم واجهة باحتراف COURSE_lesson3_017

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

درس اخر صمم واجهة باحتراف COURSE_lesson3_018

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

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


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

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

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

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

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


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

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

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

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

طبّق ما في الصورة التالية :
درس اخر صمم واجهة باحتراف COURSE_lesson3_020


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

ثم من تبيويب ( عام ) طبّق الإعدادات التالية .
درس اخر صمم واجهة باحتراف COURSE_lesson3_021

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

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

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

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


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

ثم اعمل مافي الصورة التالية :
درس اخر صمم واجهة باحتراف COURSE_lesson3_024


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

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

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


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

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

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


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

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

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


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

الآن اضغط على كلمة ( استعراض ) الموجودة في الصورة التالية :
درس اخر صمم واجهة باحتراف COURSE_lesson3_027

ثم اخترالصورة الصغيرة التي قمت بقصّها وحفظها في الخطوة رقم 12 .. كما في الصورة التالية :
درس اخر صمم واجهة باحتراف COURSE_lesson3_028


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


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


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

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

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


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


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

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


انتهى الدرس درس اخر صمم واجهة باحتراف Bye1
الرجوع الى أعلى الصفحة اذهب الى الأسفل
http://gamesarap.co.cc
mahmoudelarapi
عضو مشارك
عضو مشارك
mahmoudelarapi


درس اخر صمم واجهة باحتراف 71322149
عدد النقاط : 51984
عدد المساهمات : 73

درس اخر صمم واجهة باحتراف Empty
مُساهمةموضوع: رد: درس اخر صمم واجهة باحتراف   درس اخر صمم واجهة باحتراف Emptyالأربعاء أكتوبر 06, 2010 2:10 pm

درس اخر صمم واجهة باحتراف 3
الرجوع الى أعلى الصفحة اذهب الى الأسفل
عبدالرحمن
مدير عام المنتدي
مدير عام المنتدي
عبدالرحمن


درس اخر صمم واجهة باحتراف 71322149
عدد النقاط : 53154
عدد المساهمات : 413

درس اخر صمم واجهة باحتراف Empty
مُساهمةموضوع: رد: درس اخر صمم واجهة باحتراف   درس اخر صمم واجهة باحتراف Emptyالأربعاء أكتوبر 06, 2010 7:24 pm

نورت يا جميل
الرجوع الى أعلى الصفحة اذهب الى الأسفل
http://gamesarap.co.cc
 
درس اخر صمم واجهة باحتراف
الرجوع الى أعلى الصفحة 
صفحة 1 من اصل 1
 مواضيع مماثلة
-
»  درس قص الصور باحتراف
» درس مهم جدا . تصميم واجهة احترافية
» اطلب واجهة تصميم زراير مجانا
»  برنامج تقسيم الهارد باحتراف Partition Wizard

صلاحيات هذا المنتدى:لاتستطيع الرد على المواضيع في هذا المنتدى
منتديات جيمز عرب :: منتديات البرامج المتنوعة :: منتدي الفوتوشوب :: تعليم photoshop-
انتقل الى:  

free counters


العاب الكمبيوتر الكاملة | العاب الريباك | حلول مشاكل الالعاب | طلبات الالعاب | الافلام الاجنبي | افلام عالية الجودة | المسلسلات الاجنبية | طلبات الافلام | الافلام العربي  المسلسلات العربية | المسلسلات التركية | افلام الزمن الجميل | طلبات الافلام | البرامج | انظمة التشغيل | تبادل الخبرات | كتب تعليمية | البرامج المحمولة | تجميعات AIO | حلول مشاكل الاعضاء | الفوتوشوب | برامج | خلفيات | تعليم | ملحقات | دعم المنتديات | اكواد css |اكواد html | طلبات التصميمات | قسم الحوار العام | المنتدي الديني | تعليم اللغات | المواضيع المثيرة والغريبة


جميع الحقوق محفوظة لـمنتديات جيمز عرب
 Powered by Aseer Al Domoo3 ® www.gamesarap.com
حقوق الطبع والنشر©2011 - 2010 جميع المشاركات والمواضيع في منتدى جيمز عرب لا تعبر بالضرورة عن رأي إدارته بل تمثل وجهة نظر
كاتبها .