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


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


 

 كيفية تصميم واجهة....

اذهب الى الأسفل 
+4
شاب القنفذة
جبل الحب
اسامة المبدع
ليلين
8 مشترك
كاتب الموضوعرسالة
ليلين
المـــدير العـــام
المـــدير العـــام
ليلين


انثى
المشاركات : 51
معدل تقيم المستوى : 5167
0
عمرى : 27

كيفية تصميم واجهة.... Empty
مُساهمةموضوع: كيفية تصميم واجهة....   كيفية تصميم واجهة.... Icon_minitime9/24/2010, 18:38

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

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

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

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

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

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

الآن قم بفتح برنامج الفوتوشوب كيفية تصميم واجهة.... 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 ..!



الرجوع الى أعلى الصفحة اذهب الى الأسفل
اسامة المبدع

اسامة المبدع


المتصفح : كيفية تصميم واجهة.... Fmfire10
ذكر
احتراق القوانين : كيفية تصميم واجهة.... Full100
المشاركات : 71
معدل تقيم المستوى : 2182
0
عمرى : 32

كيفية تصميم واجهة.... Empty
مُساهمةموضوع: رد: كيفية تصميم واجهة....   كيفية تصميم واجهة.... Icon_minitime9/25/2010, 11:26

ما شاء الله
اختى الفاضلة

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

بالتوفيق لكى كيفية تصميم واجهة.... Icon_biggrin
الرجوع الى أعلى الصفحة اذهب الى الأسفل
جبل الحب

جبل الحب


ذكر
المشاركات : 172
معدل تقيم المستوى : 4289
0
عمرى : 27

كيفية تصميم واجهة.... Empty
مُساهمةموضوع: رد: كيفية تصميم واجهة....   كيفية تصميم واجهة.... Icon_minitime9/25/2010, 23:21

عاشت الايادي اختي على هذا الشرح الرائع واكثر من جميل شكراااااااااا
الرجوع الى أعلى الصفحة اذهب الى الأسفل
http://dreamshouse.ba7r.org/
شاب القنفذة

شاب القنفذة


ذكر
المشاركات : 45
معدل تقيم المستوى : 1155
0
عمرى : 33

كيفية تصميم واجهة.... Empty
مُساهمةموضوع: رد: كيفية تصميم واجهة....   كيفية تصميم واجهة.... Icon_minitime9/26/2010, 19:21

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

صادق المعبري


ذكر
المشاركات : 68
معدل تقيم المستوى : 180
0
عمرى : 32

كيفية تصميم واجهة.... Empty
مُساهمةموضوع: رد: كيفية تصميم واجهة....   كيفية تصميم واجهة.... Icon_minitime10/4/2010, 13:51

جزاكي المولى الف خير

ويعطيك الف عافية
الرجوع الى أعلى الصفحة اذهب الى الأسفل
http://yemen5.own0.com/forum.htm
ليلين
المـــدير العـــام
المـــدير العـــام
ليلين


انثى
المشاركات : 51
معدل تقيم المستوى : 5167
0
عمرى : 27

كيفية تصميم واجهة.... Empty
مُساهمةموضوع: رد: كيفية تصميم واجهة....   كيفية تصميم واجهة.... Icon_minitime10/4/2010, 16:03

يسلمو على المرور
الرجوع الى أعلى الصفحة اذهب الى الأسفل
hamzamostapha




ذكر
المشاركات : 17
معدل تقيم المستوى : 121
0
عمرى : 29

كيفية تصميم واجهة.... Empty
مُساهمةموضوع: رد: كيفية تصميم واجهة....   كيفية تصميم واجهة.... Icon_minitime10/4/2010, 23:08

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


انثى
المشاركات : 51
معدل تقيم المستوى : 5167
0
عمرى : 27

كيفية تصميم واجهة.... Empty
مُساهمةموضوع: رد: كيفية تصميم واجهة....   كيفية تصميم واجهة.... Icon_minitime10/5/2010, 18:08

كيفية تصميم واجهة.... 946240
الرجوع الى أعلى الصفحة اذهب الى الأسفل
hamzamostapha




ذكر
المشاركات : 17
معدل تقيم المستوى : 121
0
عمرى : 29

كيفية تصميم واجهة.... Empty
مُساهمةموضوع: رد: كيفية تصميم واجهة....   كيفية تصميم واجهة.... Icon_minitime10/18/2010, 19:57

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

لعيون


انثى
المشاركات : 10
معدل تقيم المستوى : 114
0
عمرى : 37

كيفية تصميم واجهة.... Empty
مُساهمةموضوع: رد: كيفية تصميم واجهة....   كيفية تصميم واجهة.... Icon_minitime10/20/2010, 07:38

يعطيكي الف عافيه على الشرح
بس سؤال اذاخلصت وسويته كيف احطه على المنتدى
الرجوع الى أعلى الصفحة اذهب الى الأسفل
ليلين
المـــدير العـــام
المـــدير العـــام
ليلين


انثى
المشاركات : 51
معدل تقيم المستوى : 5167
0
عمرى : 27

كيفية تصميم واجهة.... Empty
مُساهمةموضوع: رد: كيفية تصميم واجهة....   كيفية تصميم واجهة.... Icon_minitime10/20/2010, 13:42

الطريقة سهلة كتير

رح احكي الخطوات وانتي اتبعيها

::::::

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

بتروحي على مظهر المنتدى

بعدين الصور ولالوان

بتختاري ادارة الصور

بعدين * لوحة إدارة كاملة

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

وبتحطيها مكان الواجهة الاصلية

وهيك بنكون خلصنا

باأإآاإأآيووو
الرجوع الى أعلى الصفحة اذهب الى الأسفل
المبدع المحمدي




ذكر
المشاركات : 28
معدل تقيم المستوى : 1134
0
عمرى : 30

كيفية تصميم واجهة.... Empty
مُساهمةموضوع: رد: كيفية تصميم واجهة....   كيفية تصميم واجهة.... Icon_minitime11/7/2010, 05:46

مشكور أختي
بس أنا مره مدري كيف أحطها بالمنتدى بالطريقة الي شرحتيها توك وطرق شرحتها أحلى منتدى ما أعرف ياليت تعلميني بالصور
الرجوع الى أعلى الصفحة اذهب الى الأسفل
http://photoshop-cs.ba7r.org
 
كيفية تصميم واجهة....
الرجوع الى أعلى الصفحة 
صفحة 1 من اصل 1

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