romaissa
10-30-2013, بتوقيت غرينيتش 05:18 AM
السلام عليكم ورحمة الله وبركاتة
درس مفصل واجهة interface احترافية بشكل سلس وسهل للمبتدئين والمحترفين
الموضوع منقول ولكن تم التعديل عليه قليلا
--------------------------------------------------------------------------------
الآن قم بفتح برنامج الفوتوشوب http://absba7.absba.org/teamwork5/member/aborinaz/photoshop_icon.gif .. ثم من قائمة :
File >> New
http://absba7.absba.org/teamwork5/member/aborinaz/tasmem_mongt001.gif
--------------------------------------------------------------------------------
بعد ذلك ستظهر لك نافذة تقوم بتحديد طول وعرض الملف الجديد .. قم بوضع التالي :
العرض : 777
الطول : 702
ملاحظة : العرض ثابت في كل التصاميم ، أما الطول فهو يتغير بحسب رغبتك .
ثم أضغط زر ok ( كما في الصورة التالية ) .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_001.gif
--------------------------------------------------------------------------------
بعد ذلك قمنا بإختيار لونين متقاربين من بعضهم .. أحدهما فاتح .. والآخر أغمق منه بقليل .. كما في الصورة التالية .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_002.gif
( اللون الذي في الأعلى هو الفاتح .. والذي في الأسفل هو الغامق )
--------------------------------------------------------------------------------
الآن نريد أن نعمل إطار خارجي ( باللون الفاتح ) للموقع .. نقوم بإختيار الأداة الموضحة في الصورة .. ونقوم بالضغط عليها بالزر الأيمن ، ثم أختر الأداة الموضحة بالصورة .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_003.gif
--------------------------------------------------------------------------------
سيظهر لك في أعلى البرنامج شريط يحتوي على إعدادات متعددة .. طبّق عليه الإعدادات التالية .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_004.gif
--------------------------------------------------------------------------------
الآن قم برسم الإطار الخارجي على تصميمك كما في الصورة التالية .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_005.gif
--------------------------------------------------------------------------------
الآن إذهب إلى طبقة الإطار الخارجي ( LAYER ) .. واضغط عليها بالزر الأيمن واختر
( Blending options )
كما في الصورة التالية .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_006.gif
--------------------------------------------------------------------------------
ثم من القائمة اليسرى أختر (Stroke ) ، ثم طبّق الإعدادات التي في الصورة .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_007.gif
ثم اضغط ok
--------------------------------------------------------------------------------
الآن إنتهينا من الإطار الخارجي .. ونريد أن نعمل بنر علوي للموقع .. فنقوم بإختيار الأداة الموضحة في الصورة .. ونقوم بالضغط عليها بالزر الأيمن ، ثم أختر الأداة الموضحة بالصورة .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_003.gif
--------------------------------------------------------------------------------
سيظهر لك في أعلى البرنامج شريط يحتوي على إعدادات متعددة .. طبّق عليه الإعدادات التالية .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_008.gif
--------------------------------------------------------------------------------
الآن قم برسم البنر العلوي على تصميمك بحيث تكون أطرافه قبل نهاية أطراف الإطار الخارجي بقليل ، كما في الصورة التالية .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_009.gif
--------------------------------------------------------------------------------
الآن إذهب إلى طبقة البنر العلوي ( LAYER ) .. واضغط عليها بالزر الأيمن واختر
( Rasterize Layer )
كما في الصورة التالية .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_010.gif
--------------------------------------------------------------------------------
الآن أحتاج لتركيزك .. فسوف نقوم بالتعديل على البنر وإضافة حركة جمالية له ، انظر إلى أعلى البنر .. تجد أن فيه زوايا في اليمين واليسار .. مارأيك لو حذفناها وجعلنا شكل البنر وكأنه ستارة نازلة من الأعلى http://www.aborenaz.com/smilies/smilies2/9'hk_w_frfsh/happy.gif ؟ .. فقط أتبع الآتي .. قم بإختيار أداة التحديد http://absba7.absba.org/teamwork5/member/aborinaz/most6el.gif ثم قم بتحديد الجزء العلوي من البنر .. كما في الصورة التالية .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_011.gif
--------------------------------------------------------------------------------
الآن قم بحذف الجزء الذي تم تحديده وذلك بالضغط على زر Delete
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_012.gif
--------------------------------------------------------------------------------
الآن قم بالضغط على زر Ctrl + سهم للأعلى حتى يصبح أعلى البنر مطابق للإطار الخارجي .. كما في الصورة التالية .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_013.gif
--------------------------------------------------------------------------------
مارأيكم أن نقوم بتدليع البنر ؟! http://www.aborenaz.com/smilies/smilies2/9'hk_w_frfsh/biggrin23.gif ، وذلك بأن نقوم بإضافة بعض اللمسات الجمالية عليه .. حسناً .. أتبع الخطوات التالية http://www.aborenaz.com/smilies/smilies2/ok_no/thumbdown.gif .
--------------------------------------------------------------------------------
الآن إذهب إلى طبقة البنر العلوي ( LAYER ) .. واضغط عليها بالزر الأيمن واختر
( Blending options )
كما في الصورة التالية .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_006.gif
--------------------------------------------------------------------------------
ثم من القائمة اليسرى أختر ( Gradient Overly ) ، ثم افعل كما في الصورة التالية .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_015.gif
--------------------------------------------------------------------------------
الآن ستظهر لك نافذة طبّق عليها ماتراه في الصورة التالية .
ثم اضغط زر OK
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_016.gif
--------------------------------------------------------------------------------
ثم من القائمة اليسرى أختر (Stroke ) ، ثم طبّق الإعدادات التي في الصورة .
ثم اضغط ok
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_014.gif
--------------------------------------------------------------------------------
الآن خلونا ننبسط شوي ونكحّل عيوننا ونشوف العمل اللي ظاهر معنا http://www.aborenaz.com/smilies/smilies2/9'hk_w_frfsh/nosweat.gif !
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_017.gif
--------------------------------------------------------------------------------
الآن قم بالضغط على زر CTRL + R من لوحة المفاتيح ؛ وذلك لإطهار المسطرة .. ثم قم بحساب 80 بكسل من نهاية البنر العلوي .. كما في الصورة .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_020.gif
--------------------------------------------------------------------------------
بعد ذلك قم بإختيار لون أخضر أغمق بقليل من لون الإطار الخارجي .. كما في الصورة التالية .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_018.gif
--------------------------------------------------------------------------------
الآن نريد أن نعمل إطار داخلي للموقع .. نقوم بإختيار الأداة الموضحة في الصورة .. ونقوم بالضغط عليها بالزر الأيمن ، ثم أختر الأداة الموضحة بالصورة .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_003.gif
--------------------------------------------------------------------------------
سيظهر لك في أعلى البرنامج شريط يحتوي على إعدادات متعددة .. طبّق عليه الإعدادات التالية .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_019.gif
--------------------------------------------------------------------------------
الآن قم برسم الإطار الداخلي على تصميمك واجعل بدايته تكون على بعد 80 بكسل من نهاية البنر العلوي ، كما في الصورة التالية .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_021.gif
--------------------------------------------------------------------------------
الآن إذهب إلى طبقة الإطار الداخلي ( LAYER ) .. واضغط عليها بالزر الأيمن واختر
( Blending options )
كما في الصورة التالية .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_006.gif
--------------------------------------------------------------------------------
ثم من القائمة اليسرى أختر (Stroke ) ، ثم طبّق الإعدادات التي في الصورة .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_014.gif
--------------------------------------------------------------------------------
الآن مارأيكم أن نقوم بعمل قائمة فوق الإطار الداخلي ؟ نقوم بوضع الإقسام الرئيسية فيها ..
حسناً .. أتبع التالي .
--------------------------------------------------------------------------------
الآن انتبه لهذه الخطوة .. اذهب إلى الطبقة ( Layer ) الخاصة بالإطار الداخلي .. ثم اضغط على الطبقة التي تقع تحته .. كما هو موضع في الصورة التالية .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_023.gif
--------------------------------------------------------------------------------
نقوم بإختيار الأداة الموضحة في الصورة .. ونقوم بالضغط عليها بالزر الأيمن ، ثم أختر الأداة الموضحة بالصورة .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_003.gif
--------------------------------------------------------------------------------
سيظهر لك في أعلى البرنامج شريط يحتوي على إعدادات متعددة .. طبّق عليه الإعدادات التالية .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_022.gif
--------------------------------------------------------------------------------
الآن قم برسم مستطيل محدب الأطراف .. واجعل نصفه في أعلى الإطار الداخلي .. ونصفه الباقي أسفل الإطار الداخلي .. كما في الصورة التالية .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_024.gif
--------------------------------------------------------------------------------
الآن إذهب إلى طبقة المستطيل المحدب الأطراف الذي صنعناه قبل قليل .. واضغط عليها بالزر الأيمن واختر
( Rasterize Layer )
كما في الصورة التالية .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_010.gif
--------------------------------------------------------------------------------
الآن إذهب إلى طبقة المستطيل المحدب الأطراف الذي صنعناه قبل قليل .. واضغط عليها بالزر الأيمن واختر
( Blending options )
كما في الصورة التالية .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_006.gif
--------------------------------------------------------------------------------
ثم من القائمة اليسرى أختر ( Drop Shadow ) ، ثم افعل كما في الصورة التالية .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_025.gif
--------------------------------------------------------------------------------
ثم من القائمة اليسرى أختر ( Gradient Overly ) ، ثم افعل كما في الصورة التالية .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_029.gif
--------------------------------------------------------------------------------
الآن ستظهر لك نافذة طبّق عليها ماتراه في الصورة التالية .
ثم اضغط زر OK
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_027.gif
--------------------------------------------------------------------------------
ثم من القائمة اليسرى أختر (Stroke ) ، ثم طبّق الإعدادات التي في الصورة .
ثم اضغط OK
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_028.gif
--------------------------------------------------------------------------------
الآن شاهد كيف أصبح شكل الزر ، ياسلااااام http://www.aborenaz.com/smilies/smilies2/9'hk_w_frfsh/nosweat.gif .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_030.gif
--------------------------------------------------------------------------------
الآن نريد أن نصنع مستطيلين آخرين بجانب هذا المستطيل ..!
لكن هناك طريقة أفضل وأسرع ..
قم بالضغط على طبقة المستطيل المحدب بالزر الأيمن ثم اختر
( Duplicate Layer )
كما هو موضح في الصورة التالية .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_031.gif
--------------------------------------------------------------------------------
الآن تجد أن هناك مستطيلاً آخر مطابق للمستطيل الذي صنعناه .. قم بتحريكه جهة اليسار بمسافة بسيطة وذلك بواسطه أداة السهم http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_032.gif ، ولاتنسى أن تضغط زر Shift أثناء تحريك المستطيل الثاني لليسار ؛ كي تحافظ على الإتزان .. كما في الصورة التالية .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_033.gif
--------------------------------------------------------------------------------
قم بالضغط على طبقة المستطيل المحدب ( الثاني ) بالزر الأيمن ثم اختر
( Duplicate Layer )
كما هو موضح في الصورة التالية .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_031.gif
--------------------------------------------------------------------------------
الآن تجد أن هناك مستطيلاً ثالثاً مطابق للمستطيلين السابقين.. الآن قم بتحريكه جهة اليسار بمسافة بسيطة وذلك بواسطه أداة السهم http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_032.gif ، ولاتنسى أن تضغط زر Shift أثناء تحريك المستطيل الثاني لليسار ؛ كي تحافظ على الإتزان .. كما في الصورة التالية .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_034.gif
--------------------------------------------------------------------------------
الآن نريد أن نفعل حركة جمالية في المستطيل الآخير .. نقوم بإختيار الأداة الموضحة في الصورة .. ونقوم بالضغط عليها بالزر الأيمن ، ثم أختر الأداة الموضحة بالصورة .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_035.gif
--------------------------------------------------------------------------------
ثم نقوم بعمل تحديد مشابه للذي في الصورة التالية .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_036.gif
--------------------------------------------------------------------------------
الآن قم بالضغط على زر Delete ستجد أن المستطيل أصبح بهذا الشكل الجميل ..!
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_037.gif
--------------------------------------------------------------------------------
الآن نريد أن نعمل حركة جمالية آخرى .. لكن ماهي الألوان المناسبة التي نستخدمها ؟
حسب ذوقي المخيس http://www.aborenaz.com/smilies/smilies2/9'hk_w_frfsh/biggrin23.gif .. أتوقع أن اللون الأخضر الفاتح يناسبه اللون البرتقالي الفاتح والأزرق الفاتح ! .. ربما يكون كلامي صحيحاً ربما لا ..!
أترك التجربة تجيبنا على هذا السؤال .
--------------------------------------------------------------------------------
نقوم بإختيار الأداة الموضحة في الصورة .. ونقوم بالضغط عليها بالزر الأيمن ، ثم أختر الأداة الموضحة بالصورة .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_003.gif
--------------------------------------------------------------------------------
سيظهر لك في أعلى البرنامج شريط يحتوي على إعدادات متعددة .. طبّق عليه الإعدادات التالية .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_022.gif
--------------------------------------------------------------------------------
الآن قم برسم مستطيل كما في الصورة التالية :
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_038.gif
ولكن يجب عليك وضعه أسفل الطبقات ( Layers ) الخاصة بـالثلاث مستطيلات الخضراء التي رسمناها قبل قليل .
--------------------------------------------------------------------------------
الآن إذهب إلى طبقة المستطيل الذي صنعناه قبل قليل .. واضغط عليها بالزر الأيمن واختر
( Rasterize Layer )
كما في الصورة التالية .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_010.gif
--------------------------------------------------------------------------------
الآن إذهب إلى طبقة المستطيل الذي صنعناه قبل قليل .. واضغط عليها بالزر الأيمن واختر
( Blending options )
كما في الصورة التالية .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_006.gif
--------------------------------------------------------------------------------
ثم من القائمة اليسرى أختر ( Gradient Overly ) ، ثم افعل كما في الصورة التالية .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_015.gif
--------------------------------------------------------------------------------
الآن ستظهر لك نافذة طبّق عليها ماتراه في الصورة التالية .
ثم اضغط زر OK
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_039.gif
--------------------------------------------------------------------------------
ثم من القائمة اليسرى أختر (Stroke ) ، ثم طبّق الإعدادات التي في الصورة .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_040.gif
ثم اضغط ok
--------------------------------------------------------------------------------
هذه النتيجة التي حصلنا عليها الآن .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_041.gif
الحمدلله كل شيء تمام ..
--------------------------------------------------------------------------------
الآن بقي شكل جمالي آخر .. نقوم بتصميمه كما صممنا السابق .. لكن نجعله أطول من السابق بقليل .. نقوم بإختيار الأداة الموضحة في الصورة .. ونقوم بالضغط عليها بالزر الأيمن ، ثم أختر الأداة الموضحة بالصورة .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_003.gif
--------------------------------------------------------------------------------
سيظهر لك في أعلى البرنامج شريط يحتوي على إعدادات متعددة .. طبّق عليه الإعدادات التالية .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_022.gif
--------------------------------------------------------------------------------
الآن قم برسم مستطيل كما في الصورة التالية :
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_042.gif
ولكن يجب عليك وضعه أسفل الطبقة ( Layers ) الخاصة بالمستطيل البرتقالي التي رسمناها قبل قليل .
--------------------------------------------------------------------------------
الآن إذهب إلى طبقة المستطيل الذي صنعناه قبل قليل .. واضغط عليها بالزر الأيمن واختر
( Rasterize Layer )
كما في الصورة التالية .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_010.gif
--------------------------------------------------------------------------------
الآن إذهب إلى طبقة المستطيل الذي صنعناه قبل قليل .. واضغط عليها بالزر الأيمن واختر
( Blending options )
كما في الصورة التالية .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_006.gif
--------------------------------------------------------------------------------
ثم من القائمة اليسرى أختر ( Gradient Overly ) ، ثم افعل كما في الصورة التالية .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_029.gif
--------------------------------------------------------------------------------
الآن ستظهر لك نافذة طبّق عليها ماتراه في الصورة التالية .
ثم اضغط زر OK
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_043.gif
--------------------------------------------------------------------------------
ثم من القائمة اليسرى أختر (Stroke ) ، ثم طبّق الإعدادات التي في الصورة .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_044.gif
ثم اضغط ok
--------------------------------------------------------------------------------
هذه النتيجة التي حصلنا عليها الآن .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_045.gif
الحمدلله كل شيء تمام ..
--------------------------------------------------------------------------------
اممممممممم ، ماذا احتاج في موقعي ؟
نعم تذكرت .. أحتاج لـ شريط سفلي بتصميم جميل أكتب عليه عبارة لحفظ الحقوق .. لكن .. ماأنسب طريقة لصنع هذا الشريط ؟ .. أتبّع الآتي .
--------------------------------------------------------------------------------
نقوم بإختيار الأداة الموضحة في الصورة .. ونقوم بالضغط عليها بالزر الأيمن ، ثم أختر الأداة الموضحة بالصورة .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_003.gif
--------------------------------------------------------------------------------
سيظهر لك في أعلى البرنامج شريط يحتوي على إعدادات متعددة .. طبّق عليه الإعدادات التالية .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_022.gif
--------------------------------------------------------------------------------
الآن قم برسم مستطيل في أسفل الإطار الداخلي ، كما في الصورة التالية :
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_046.gif
ولكن يجب عليك وضعه أعلى الطبقة ( Layers ) الخاصة بالإطار الداخلي .
--------------------------------------------------------------------------------
الآن إذهب إلى طبقة المستطيل السفلي الذي صنعناه قبل قليل .. واضغط عليها بالزر الأيمن واختر
( Rasterize Layer )
كما في الصورة التالية .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_010.gif
--------------------------------------------------------------------------------
الآن إذهب إلى طبقة المستطيل السفلي الذي صنعناه قبل قليل .. واضغط عليها بالزر الأيمن واختر
( Blending options )
كما في الصورة التالية .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_006.gif
--------------------------------------------------------------------------------
ثم من القائمة اليسرى أختر ( Gradient Overly ) ، ثم افعل كما في الصورة التالية .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_015.gif
--------------------------------------------------------------------------------
الآن ستظهر لك نافذة طبّق عليها ماتراه في الصورة التالية .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_047.gif
ثم اضغط زر OK
--------------------------------------------------------------------------------
ثم من القائمة اليسرى أختر (Stroke ) ، ثم طبّق الإعدادات التي في الصورة .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_048.gif
ثم اضغط ok
--------------------------------------------------------------------------------
هذه النتيجة التي حصلنا عليها الآن .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_049.gif
الحمدلله كل شيء تمام ..
--------------------------------------------------------------------------------
اممممممممم ، ماذا احتاج في موقعي غير الشريط السفلي ؟ ؟
نعم تذكرت .. أحتاج لـ شريط علوي بتصميم مناسب أكتب عليه الأقسام الفرعية التي في موقعي .. لكن .. ماأنسب طريقة لصنع هذا الشريط ؟ .. أتبّع الآتي .
--------------------------------------------------------------------------------
نقوم بإختيار الأداة الموضحة في الصورة .. ونقوم بالضغط عليها بالزر الأيمن ، ثم أختر الأداة الموضحة بالصورة .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_003.gif
--------------------------------------------------------------------------------
سيظهر لك في أعلى البرنامج شريط يحتوي على إعدادات متعددة .. طبّق عليه الإعدادات التالية .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_022.gif
--------------------------------------------------------------------------------
الآن قم برسم مستطيل في أسفل البنر العلوي ، كما في الصورة التالية :
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_050.gif
ولكن يجب عليك وضعه أعلى الطبقة ( Layers ) الخاصة بالبنر العلوي .
--------------------------------------------------------------------------------
الآن إذهب إلى طبقة المستطيل ( الشريط العلوي ) الذي صنعناه قبل قليل .. واضغط عليها بالزر الأيمن واختر
( Rasterize Layer )
كما في الصورة التالية .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_010.gif
--------------------------------------------------------------------------------
الآن إذهب إلى طبقة المستطيل ( الشريط العلوي ) الذي صنعناه قبل قليل .. واضغط عليها بالزر الأيمن واختر
( Blending options )
كما في الصورة التالية .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_006.gif
--------------------------------------------------------------------------------
ثم من القائمة اليسرى أختر ( Gradient Overly ) ، ثم افعل كما في الصورة التالية .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_015.gif
--------------------------------------------------------------------------------
الآن ستظهر لك نافذة طبّق عليها ماتراه في الصورة التالية .
ثم اضغط زر OK
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_047.gif
--------------------------------------------------------------------------------
ثم من القائمة اليسرى أختر (Stroke ) ، ثم طبّق الإعدادات التي في الصورة .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_048.gif
ثم اضغط ok
--------------------------------------------------------------------------------
هذه النتيجة لكامل التصميمhttp://www.aborenaz.com/smilies/smilies2/9'hk_w_frfsh/nosweat.gif .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_051.gif
الحمدلله الأمور على مايرام .. !
--------------------------------------------------------------------------------
الآن إنتهينا من التصميم .. بقي عليك إضافة النصوص إلى التصميم ( البنرات ، أسماء الأقسام ، ..الخ ) !
إضافة النصوص يكون عن طريق هذه الأداة http://absba7.absba.org/teamwork5/member/aborinaz/msn_font.gif .. والتحكم بتنسيق النص يكون عن الطريق هذا الشريط الذي يظهر في أعلى البرنامج:
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_052.gif
--------------------------------------------------------------------------------
عن نفسي فقد قمت بإضافة النصوص التي أحتاجها كذلك صممت لي شعاراً خاصاً وضعته في البنر .. وأتيت ببعض الأيقونات الجمالية ووضعتها بطريقة من اختياري .. ووضعت مساحة إعلانية .. حتى أصبح الشكل النهائي لتصميم كما في الصورة التالية :
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_053.gif
لاحظ أني لم أكتب النصوص في الشريط الذي في البنر ( آخر شريط قمنا بصنعه ) .. أتدرون لماذا ؟ .. لأنه بإمكاني عمل ذلك عن طريق الفرنت بيج .. واستخدام صورة صغيرة تتمدد على كامل الخلية .. وبالتالي يصغر الحجم وتصبح الصفحة خفيفة .. ولاتأثير على الشكل النهائي .. ! ، أعلم أن بعضكم لم يفهم ماأقصد .. لكن هذا لايهم .. لأن كل ذلك سنعرفه بالتفصيل إن شاء الله في الدرس مفصل القادم من هذه الدروة .
--------------------------------------------------------------------------------
ملاحظة هامة : الكثير يسألني عن كيفية عمل مثل الخط الذي كتبت فيه البسملة في أعلى البنر .. كما في هذه الصورة :
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_054.gif
الأمر بسيط جداً .. فقط طبّق الإعدادات التالية في شريط تنسيق النص الموجود في أعلى الفوتوشوب ( بعد اختيار الأداة http://absba7.absba.org/teamwork5/member/aborinaz/msn_font.gif ) :
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_052.gif
وبإذن الله سوف تحصل على النص بهذا التنسيق الجميل http://www.aborenaz.com/smilies/smilies2/abtsamat_3'mzat/flowers.gif ..!
--------------------------------------------------------------------------------
بهذا .. نكون قد انتهينا من الدرس مفصل الثاني http://www.aborenaz.com/smilies/smilies2/dokhh/stretcher.gif ... وبدون مبالغة .. لاأذكر أني قد تعبت مثلما تعبت في هذ الدرس مفصل .. فقد أخذ من أكثر من 3 أيام ! ، أسأل الله العلي القدير أن ينفع به الإسلام والمسلمين وأن أكون قد وفقت في شرح طريقة طريقة العمل .. فإن أصبت فمن الله وإن أخطأت فمن نفسي والشيطان .. وانتظرونا في الدرس مفصل الثالث .. فسوف نتكلم بإذن الله عن الخطوة الأهم .. وهي تقصيص التصميم وحفظه على هيئة صفحات انترنت ( Webpage ) ، انتظرونا ولاتنسوني من دعائكم http://www.aborenaz.com/smilies/smilies2/abtsamat_3'mzat/smilie3.gif ..
يتبع ...
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
درس مفصل واجهة interface احترافية بشكل سلس وسهل للمبتدئين والمحترفين
الموضوع منقول ولكن تم التعديل عليه قليلا
--------------------------------------------------------------------------------
الآن قم بفتح برنامج الفوتوشوب http://absba7.absba.org/teamwork5/member/aborinaz/photoshop_icon.gif .. ثم من قائمة :
File >> New
http://absba7.absba.org/teamwork5/member/aborinaz/tasmem_mongt001.gif
--------------------------------------------------------------------------------
بعد ذلك ستظهر لك نافذة تقوم بتحديد طول وعرض الملف الجديد .. قم بوضع التالي :
العرض : 777
الطول : 702
ملاحظة : العرض ثابت في كل التصاميم ، أما الطول فهو يتغير بحسب رغبتك .
ثم أضغط زر ok ( كما في الصورة التالية ) .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_001.gif
--------------------------------------------------------------------------------
بعد ذلك قمنا بإختيار لونين متقاربين من بعضهم .. أحدهما فاتح .. والآخر أغمق منه بقليل .. كما في الصورة التالية .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_002.gif
( اللون الذي في الأعلى هو الفاتح .. والذي في الأسفل هو الغامق )
--------------------------------------------------------------------------------
الآن نريد أن نعمل إطار خارجي ( باللون الفاتح ) للموقع .. نقوم بإختيار الأداة الموضحة في الصورة .. ونقوم بالضغط عليها بالزر الأيمن ، ثم أختر الأداة الموضحة بالصورة .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_003.gif
--------------------------------------------------------------------------------
سيظهر لك في أعلى البرنامج شريط يحتوي على إعدادات متعددة .. طبّق عليه الإعدادات التالية .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_004.gif
--------------------------------------------------------------------------------
الآن قم برسم الإطار الخارجي على تصميمك كما في الصورة التالية .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_005.gif
--------------------------------------------------------------------------------
الآن إذهب إلى طبقة الإطار الخارجي ( LAYER ) .. واضغط عليها بالزر الأيمن واختر
( Blending options )
كما في الصورة التالية .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_006.gif
--------------------------------------------------------------------------------
ثم من القائمة اليسرى أختر (Stroke ) ، ثم طبّق الإعدادات التي في الصورة .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_007.gif
ثم اضغط ok
--------------------------------------------------------------------------------
الآن إنتهينا من الإطار الخارجي .. ونريد أن نعمل بنر علوي للموقع .. فنقوم بإختيار الأداة الموضحة في الصورة .. ونقوم بالضغط عليها بالزر الأيمن ، ثم أختر الأداة الموضحة بالصورة .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_003.gif
--------------------------------------------------------------------------------
سيظهر لك في أعلى البرنامج شريط يحتوي على إعدادات متعددة .. طبّق عليه الإعدادات التالية .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_008.gif
--------------------------------------------------------------------------------
الآن قم برسم البنر العلوي على تصميمك بحيث تكون أطرافه قبل نهاية أطراف الإطار الخارجي بقليل ، كما في الصورة التالية .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_009.gif
--------------------------------------------------------------------------------
الآن إذهب إلى طبقة البنر العلوي ( LAYER ) .. واضغط عليها بالزر الأيمن واختر
( Rasterize Layer )
كما في الصورة التالية .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_010.gif
--------------------------------------------------------------------------------
الآن أحتاج لتركيزك .. فسوف نقوم بالتعديل على البنر وإضافة حركة جمالية له ، انظر إلى أعلى البنر .. تجد أن فيه زوايا في اليمين واليسار .. مارأيك لو حذفناها وجعلنا شكل البنر وكأنه ستارة نازلة من الأعلى http://www.aborenaz.com/smilies/smilies2/9'hk_w_frfsh/happy.gif ؟ .. فقط أتبع الآتي .. قم بإختيار أداة التحديد http://absba7.absba.org/teamwork5/member/aborinaz/most6el.gif ثم قم بتحديد الجزء العلوي من البنر .. كما في الصورة التالية .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_011.gif
--------------------------------------------------------------------------------
الآن قم بحذف الجزء الذي تم تحديده وذلك بالضغط على زر Delete
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_012.gif
--------------------------------------------------------------------------------
الآن قم بالضغط على زر Ctrl + سهم للأعلى حتى يصبح أعلى البنر مطابق للإطار الخارجي .. كما في الصورة التالية .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_013.gif
--------------------------------------------------------------------------------
مارأيكم أن نقوم بتدليع البنر ؟! http://www.aborenaz.com/smilies/smilies2/9'hk_w_frfsh/biggrin23.gif ، وذلك بأن نقوم بإضافة بعض اللمسات الجمالية عليه .. حسناً .. أتبع الخطوات التالية http://www.aborenaz.com/smilies/smilies2/ok_no/thumbdown.gif .
--------------------------------------------------------------------------------
الآن إذهب إلى طبقة البنر العلوي ( LAYER ) .. واضغط عليها بالزر الأيمن واختر
( Blending options )
كما في الصورة التالية .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_006.gif
--------------------------------------------------------------------------------
ثم من القائمة اليسرى أختر ( Gradient Overly ) ، ثم افعل كما في الصورة التالية .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_015.gif
--------------------------------------------------------------------------------
الآن ستظهر لك نافذة طبّق عليها ماتراه في الصورة التالية .
ثم اضغط زر OK
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_016.gif
--------------------------------------------------------------------------------
ثم من القائمة اليسرى أختر (Stroke ) ، ثم طبّق الإعدادات التي في الصورة .
ثم اضغط ok
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_014.gif
--------------------------------------------------------------------------------
الآن خلونا ننبسط شوي ونكحّل عيوننا ونشوف العمل اللي ظاهر معنا http://www.aborenaz.com/smilies/smilies2/9'hk_w_frfsh/nosweat.gif !
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_017.gif
--------------------------------------------------------------------------------
الآن قم بالضغط على زر CTRL + R من لوحة المفاتيح ؛ وذلك لإطهار المسطرة .. ثم قم بحساب 80 بكسل من نهاية البنر العلوي .. كما في الصورة .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_020.gif
--------------------------------------------------------------------------------
بعد ذلك قم بإختيار لون أخضر أغمق بقليل من لون الإطار الخارجي .. كما في الصورة التالية .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_018.gif
--------------------------------------------------------------------------------
الآن نريد أن نعمل إطار داخلي للموقع .. نقوم بإختيار الأداة الموضحة في الصورة .. ونقوم بالضغط عليها بالزر الأيمن ، ثم أختر الأداة الموضحة بالصورة .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_003.gif
--------------------------------------------------------------------------------
سيظهر لك في أعلى البرنامج شريط يحتوي على إعدادات متعددة .. طبّق عليه الإعدادات التالية .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_019.gif
--------------------------------------------------------------------------------
الآن قم برسم الإطار الداخلي على تصميمك واجعل بدايته تكون على بعد 80 بكسل من نهاية البنر العلوي ، كما في الصورة التالية .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_021.gif
--------------------------------------------------------------------------------
الآن إذهب إلى طبقة الإطار الداخلي ( LAYER ) .. واضغط عليها بالزر الأيمن واختر
( Blending options )
كما في الصورة التالية .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_006.gif
--------------------------------------------------------------------------------
ثم من القائمة اليسرى أختر (Stroke ) ، ثم طبّق الإعدادات التي في الصورة .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_014.gif
--------------------------------------------------------------------------------
الآن مارأيكم أن نقوم بعمل قائمة فوق الإطار الداخلي ؟ نقوم بوضع الإقسام الرئيسية فيها ..
حسناً .. أتبع التالي .
--------------------------------------------------------------------------------
الآن انتبه لهذه الخطوة .. اذهب إلى الطبقة ( Layer ) الخاصة بالإطار الداخلي .. ثم اضغط على الطبقة التي تقع تحته .. كما هو موضع في الصورة التالية .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_023.gif
--------------------------------------------------------------------------------
نقوم بإختيار الأداة الموضحة في الصورة .. ونقوم بالضغط عليها بالزر الأيمن ، ثم أختر الأداة الموضحة بالصورة .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_003.gif
--------------------------------------------------------------------------------
سيظهر لك في أعلى البرنامج شريط يحتوي على إعدادات متعددة .. طبّق عليه الإعدادات التالية .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_022.gif
--------------------------------------------------------------------------------
الآن قم برسم مستطيل محدب الأطراف .. واجعل نصفه في أعلى الإطار الداخلي .. ونصفه الباقي أسفل الإطار الداخلي .. كما في الصورة التالية .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_024.gif
--------------------------------------------------------------------------------
الآن إذهب إلى طبقة المستطيل المحدب الأطراف الذي صنعناه قبل قليل .. واضغط عليها بالزر الأيمن واختر
( Rasterize Layer )
كما في الصورة التالية .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_010.gif
--------------------------------------------------------------------------------
الآن إذهب إلى طبقة المستطيل المحدب الأطراف الذي صنعناه قبل قليل .. واضغط عليها بالزر الأيمن واختر
( Blending options )
كما في الصورة التالية .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_006.gif
--------------------------------------------------------------------------------
ثم من القائمة اليسرى أختر ( Drop Shadow ) ، ثم افعل كما في الصورة التالية .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_025.gif
--------------------------------------------------------------------------------
ثم من القائمة اليسرى أختر ( Gradient Overly ) ، ثم افعل كما في الصورة التالية .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_029.gif
--------------------------------------------------------------------------------
الآن ستظهر لك نافذة طبّق عليها ماتراه في الصورة التالية .
ثم اضغط زر OK
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_027.gif
--------------------------------------------------------------------------------
ثم من القائمة اليسرى أختر (Stroke ) ، ثم طبّق الإعدادات التي في الصورة .
ثم اضغط OK
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_028.gif
--------------------------------------------------------------------------------
الآن شاهد كيف أصبح شكل الزر ، ياسلااااام http://www.aborenaz.com/smilies/smilies2/9'hk_w_frfsh/nosweat.gif .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_030.gif
--------------------------------------------------------------------------------
الآن نريد أن نصنع مستطيلين آخرين بجانب هذا المستطيل ..!
لكن هناك طريقة أفضل وأسرع ..
قم بالضغط على طبقة المستطيل المحدب بالزر الأيمن ثم اختر
( Duplicate Layer )
كما هو موضح في الصورة التالية .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_031.gif
--------------------------------------------------------------------------------
الآن تجد أن هناك مستطيلاً آخر مطابق للمستطيل الذي صنعناه .. قم بتحريكه جهة اليسار بمسافة بسيطة وذلك بواسطه أداة السهم http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_032.gif ، ولاتنسى أن تضغط زر Shift أثناء تحريك المستطيل الثاني لليسار ؛ كي تحافظ على الإتزان .. كما في الصورة التالية .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_033.gif
--------------------------------------------------------------------------------
قم بالضغط على طبقة المستطيل المحدب ( الثاني ) بالزر الأيمن ثم اختر
( Duplicate Layer )
كما هو موضح في الصورة التالية .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_031.gif
--------------------------------------------------------------------------------
الآن تجد أن هناك مستطيلاً ثالثاً مطابق للمستطيلين السابقين.. الآن قم بتحريكه جهة اليسار بمسافة بسيطة وذلك بواسطه أداة السهم http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_032.gif ، ولاتنسى أن تضغط زر Shift أثناء تحريك المستطيل الثاني لليسار ؛ كي تحافظ على الإتزان .. كما في الصورة التالية .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_034.gif
--------------------------------------------------------------------------------
الآن نريد أن نفعل حركة جمالية في المستطيل الآخير .. نقوم بإختيار الأداة الموضحة في الصورة .. ونقوم بالضغط عليها بالزر الأيمن ، ثم أختر الأداة الموضحة بالصورة .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_035.gif
--------------------------------------------------------------------------------
ثم نقوم بعمل تحديد مشابه للذي في الصورة التالية .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_036.gif
--------------------------------------------------------------------------------
الآن قم بالضغط على زر Delete ستجد أن المستطيل أصبح بهذا الشكل الجميل ..!
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_037.gif
--------------------------------------------------------------------------------
الآن نريد أن نعمل حركة جمالية آخرى .. لكن ماهي الألوان المناسبة التي نستخدمها ؟
حسب ذوقي المخيس http://www.aborenaz.com/smilies/smilies2/9'hk_w_frfsh/biggrin23.gif .. أتوقع أن اللون الأخضر الفاتح يناسبه اللون البرتقالي الفاتح والأزرق الفاتح ! .. ربما يكون كلامي صحيحاً ربما لا ..!
أترك التجربة تجيبنا على هذا السؤال .
--------------------------------------------------------------------------------
نقوم بإختيار الأداة الموضحة في الصورة .. ونقوم بالضغط عليها بالزر الأيمن ، ثم أختر الأداة الموضحة بالصورة .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_003.gif
--------------------------------------------------------------------------------
سيظهر لك في أعلى البرنامج شريط يحتوي على إعدادات متعددة .. طبّق عليه الإعدادات التالية .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_022.gif
--------------------------------------------------------------------------------
الآن قم برسم مستطيل كما في الصورة التالية :
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_038.gif
ولكن يجب عليك وضعه أسفل الطبقات ( Layers ) الخاصة بـالثلاث مستطيلات الخضراء التي رسمناها قبل قليل .
--------------------------------------------------------------------------------
الآن إذهب إلى طبقة المستطيل الذي صنعناه قبل قليل .. واضغط عليها بالزر الأيمن واختر
( Rasterize Layer )
كما في الصورة التالية .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_010.gif
--------------------------------------------------------------------------------
الآن إذهب إلى طبقة المستطيل الذي صنعناه قبل قليل .. واضغط عليها بالزر الأيمن واختر
( Blending options )
كما في الصورة التالية .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_006.gif
--------------------------------------------------------------------------------
ثم من القائمة اليسرى أختر ( Gradient Overly ) ، ثم افعل كما في الصورة التالية .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_015.gif
--------------------------------------------------------------------------------
الآن ستظهر لك نافذة طبّق عليها ماتراه في الصورة التالية .
ثم اضغط زر OK
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_039.gif
--------------------------------------------------------------------------------
ثم من القائمة اليسرى أختر (Stroke ) ، ثم طبّق الإعدادات التي في الصورة .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_040.gif
ثم اضغط ok
--------------------------------------------------------------------------------
هذه النتيجة التي حصلنا عليها الآن .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_041.gif
الحمدلله كل شيء تمام ..
--------------------------------------------------------------------------------
الآن بقي شكل جمالي آخر .. نقوم بتصميمه كما صممنا السابق .. لكن نجعله أطول من السابق بقليل .. نقوم بإختيار الأداة الموضحة في الصورة .. ونقوم بالضغط عليها بالزر الأيمن ، ثم أختر الأداة الموضحة بالصورة .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_003.gif
--------------------------------------------------------------------------------
سيظهر لك في أعلى البرنامج شريط يحتوي على إعدادات متعددة .. طبّق عليه الإعدادات التالية .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_022.gif
--------------------------------------------------------------------------------
الآن قم برسم مستطيل كما في الصورة التالية :
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_042.gif
ولكن يجب عليك وضعه أسفل الطبقة ( Layers ) الخاصة بالمستطيل البرتقالي التي رسمناها قبل قليل .
--------------------------------------------------------------------------------
الآن إذهب إلى طبقة المستطيل الذي صنعناه قبل قليل .. واضغط عليها بالزر الأيمن واختر
( Rasterize Layer )
كما في الصورة التالية .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_010.gif
--------------------------------------------------------------------------------
الآن إذهب إلى طبقة المستطيل الذي صنعناه قبل قليل .. واضغط عليها بالزر الأيمن واختر
( Blending options )
كما في الصورة التالية .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_006.gif
--------------------------------------------------------------------------------
ثم من القائمة اليسرى أختر ( Gradient Overly ) ، ثم افعل كما في الصورة التالية .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_029.gif
--------------------------------------------------------------------------------
الآن ستظهر لك نافذة طبّق عليها ماتراه في الصورة التالية .
ثم اضغط زر OK
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_043.gif
--------------------------------------------------------------------------------
ثم من القائمة اليسرى أختر (Stroke ) ، ثم طبّق الإعدادات التي في الصورة .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_044.gif
ثم اضغط ok
--------------------------------------------------------------------------------
هذه النتيجة التي حصلنا عليها الآن .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_045.gif
الحمدلله كل شيء تمام ..
--------------------------------------------------------------------------------
اممممممممم ، ماذا احتاج في موقعي ؟
نعم تذكرت .. أحتاج لـ شريط سفلي بتصميم جميل أكتب عليه عبارة لحفظ الحقوق .. لكن .. ماأنسب طريقة لصنع هذا الشريط ؟ .. أتبّع الآتي .
--------------------------------------------------------------------------------
نقوم بإختيار الأداة الموضحة في الصورة .. ونقوم بالضغط عليها بالزر الأيمن ، ثم أختر الأداة الموضحة بالصورة .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_003.gif
--------------------------------------------------------------------------------
سيظهر لك في أعلى البرنامج شريط يحتوي على إعدادات متعددة .. طبّق عليه الإعدادات التالية .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_022.gif
--------------------------------------------------------------------------------
الآن قم برسم مستطيل في أسفل الإطار الداخلي ، كما في الصورة التالية :
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_046.gif
ولكن يجب عليك وضعه أعلى الطبقة ( Layers ) الخاصة بالإطار الداخلي .
--------------------------------------------------------------------------------
الآن إذهب إلى طبقة المستطيل السفلي الذي صنعناه قبل قليل .. واضغط عليها بالزر الأيمن واختر
( Rasterize Layer )
كما في الصورة التالية .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_010.gif
--------------------------------------------------------------------------------
الآن إذهب إلى طبقة المستطيل السفلي الذي صنعناه قبل قليل .. واضغط عليها بالزر الأيمن واختر
( Blending options )
كما في الصورة التالية .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_006.gif
--------------------------------------------------------------------------------
ثم من القائمة اليسرى أختر ( Gradient Overly ) ، ثم افعل كما في الصورة التالية .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_015.gif
--------------------------------------------------------------------------------
الآن ستظهر لك نافذة طبّق عليها ماتراه في الصورة التالية .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_047.gif
ثم اضغط زر OK
--------------------------------------------------------------------------------
ثم من القائمة اليسرى أختر (Stroke ) ، ثم طبّق الإعدادات التي في الصورة .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_048.gif
ثم اضغط ok
--------------------------------------------------------------------------------
هذه النتيجة التي حصلنا عليها الآن .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_049.gif
الحمدلله كل شيء تمام ..
--------------------------------------------------------------------------------
اممممممممم ، ماذا احتاج في موقعي غير الشريط السفلي ؟ ؟
نعم تذكرت .. أحتاج لـ شريط علوي بتصميم مناسب أكتب عليه الأقسام الفرعية التي في موقعي .. لكن .. ماأنسب طريقة لصنع هذا الشريط ؟ .. أتبّع الآتي .
--------------------------------------------------------------------------------
نقوم بإختيار الأداة الموضحة في الصورة .. ونقوم بالضغط عليها بالزر الأيمن ، ثم أختر الأداة الموضحة بالصورة .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_003.gif
--------------------------------------------------------------------------------
سيظهر لك في أعلى البرنامج شريط يحتوي على إعدادات متعددة .. طبّق عليه الإعدادات التالية .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_022.gif
--------------------------------------------------------------------------------
الآن قم برسم مستطيل في أسفل البنر العلوي ، كما في الصورة التالية :
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_050.gif
ولكن يجب عليك وضعه أعلى الطبقة ( Layers ) الخاصة بالبنر العلوي .
--------------------------------------------------------------------------------
الآن إذهب إلى طبقة المستطيل ( الشريط العلوي ) الذي صنعناه قبل قليل .. واضغط عليها بالزر الأيمن واختر
( Rasterize Layer )
كما في الصورة التالية .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_010.gif
--------------------------------------------------------------------------------
الآن إذهب إلى طبقة المستطيل ( الشريط العلوي ) الذي صنعناه قبل قليل .. واضغط عليها بالزر الأيمن واختر
( Blending options )
كما في الصورة التالية .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_006.gif
--------------------------------------------------------------------------------
ثم من القائمة اليسرى أختر ( Gradient Overly ) ، ثم افعل كما في الصورة التالية .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_015.gif
--------------------------------------------------------------------------------
الآن ستظهر لك نافذة طبّق عليها ماتراه في الصورة التالية .
ثم اضغط زر OK
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_047.gif
--------------------------------------------------------------------------------
ثم من القائمة اليسرى أختر (Stroke ) ، ثم طبّق الإعدادات التي في الصورة .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_048.gif
ثم اضغط ok
--------------------------------------------------------------------------------
هذه النتيجة لكامل التصميمhttp://www.aborenaz.com/smilies/smilies2/9'hk_w_frfsh/nosweat.gif .
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_051.gif
الحمدلله الأمور على مايرام .. !
--------------------------------------------------------------------------------
الآن إنتهينا من التصميم .. بقي عليك إضافة النصوص إلى التصميم ( البنرات ، أسماء الأقسام ، ..الخ ) !
إضافة النصوص يكون عن طريق هذه الأداة http://absba7.absba.org/teamwork5/member/aborinaz/msn_font.gif .. والتحكم بتنسيق النص يكون عن الطريق هذا الشريط الذي يظهر في أعلى البرنامج:
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_052.gif
--------------------------------------------------------------------------------
عن نفسي فقد قمت بإضافة النصوص التي أحتاجها كذلك صممت لي شعاراً خاصاً وضعته في البنر .. وأتيت ببعض الأيقونات الجمالية ووضعتها بطريقة من اختياري .. ووضعت مساحة إعلانية .. حتى أصبح الشكل النهائي لتصميم كما في الصورة التالية :
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_053.gif
لاحظ أني لم أكتب النصوص في الشريط الذي في البنر ( آخر شريط قمنا بصنعه ) .. أتدرون لماذا ؟ .. لأنه بإمكاني عمل ذلك عن طريق الفرنت بيج .. واستخدام صورة صغيرة تتمدد على كامل الخلية .. وبالتالي يصغر الحجم وتصبح الصفحة خفيفة .. ولاتأثير على الشكل النهائي .. ! ، أعلم أن بعضكم لم يفهم ماأقصد .. لكن هذا لايهم .. لأن كل ذلك سنعرفه بالتفصيل إن شاء الله في الدرس مفصل القادم من هذه الدروة .
--------------------------------------------------------------------------------
ملاحظة هامة : الكثير يسألني عن كيفية عمل مثل الخط الذي كتبت فيه البسملة في أعلى البنر .. كما في هذه الصورة :
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_054.gif
الأمر بسيط جداً .. فقط طبّق الإعدادات التالية في شريط تنسيق النص الموجود في أعلى الفوتوشوب ( بعد اختيار الأداة http://absba7.absba.org/teamwork5/member/aborinaz/msn_font.gif ) :
http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_052.gif
وبإذن الله سوف تحصل على النص بهذا التنسيق الجميل http://www.aborenaz.com/smilies/smilies2/abtsamat_3'mzat/flowers.gif ..!
--------------------------------------------------------------------------------
بهذا .. نكون قد انتهينا من الدرس مفصل الثاني http://www.aborenaz.com/smilies/smilies2/dokhh/stretcher.gif ... وبدون مبالغة .. لاأذكر أني قد تعبت مثلما تعبت في هذ الدرس مفصل .. فقد أخذ من أكثر من 3 أيام ! ، أسأل الله العلي القدير أن ينفع به الإسلام والمسلمين وأن أكون قد وفقت في شرح طريقة طريقة العمل .. فإن أصبت فمن الله وإن أخطأت فمن نفسي والشيطان .. وانتظرونا في الدرس مفصل الثالث .. فسوف نتكلم بإذن الله عن الخطوة الأهم .. وهي تقصيص التصميم وحفظه على هيئة صفحات انترنت ( Webpage ) ، انتظرونا ولاتنسوني من دعائكم http://www.aborenaz.com/smilies/smilies2/abtsamat_3'mzat/smilie3.gif ..
يتبع ...
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
