danger
11-16-2008, 11:38 AM
السلام عليكم و رحمة الله و بركاته
اهلا بكم في موقع بكسل التعليمي , و اهلا بكم ايضا في درس جديد من سلسلة الدروس المترجمه خصيصا لموقع بكسل ,
درس اليوم يندرج تحت تصنيف الدروس الخاصه بتصميم المواقع , سنتعلم سويا إن شاء الله من خلال الدرس كيف نصنع هيدر (HEADER) بسيط و في نفس الوقت جميل و انيق للمواقع , سنتابع الخطوات خطوه خطوه من خلال برنامج الفوتوشوب ,
يمكنك تحميل الملف المفتوح للدرس من خلال المرفقات الموجوده في نهاية الموضوع ,,
النتيجه النهائيه للدرس :
الدرس :
1- قم بعمل مساحة عمل جديده ,,,
انا استعملت الابعاد التاليه 891×132 و هي ملائمه لهدف الدرس ,,
2- سنقوم الان بإلغاء القفل الموجود علي الطبقه المسماه (background) , لذا سنقوم بالضغط مرتين علي الطبقه ,
الان بعد ان قمنا بإلغاء القفل اصبح بإمكاننا ان نقوم بإضافة Blending Options عليها ,,
لإضافة Blending Options عليها قم بالنقر بزر الماوس الايمن علي الطبقه ثم إختر blending options و إضبط الاعدادات كالتالي ,,
3- يجب ان تكون حصلت علي نتيجه تشبه الاتي :
4- الان نحن نريد ان نصمم ال navigation bar ,,
و لعمل ذالك قم بإستعمال اداة Rectangle Marquee Tool و قم بتحديد منطقه تشبه الاتي و قم بتلوينها باللون الابيض ,,
5- قم بالضغط بزر الماوس الايمن علي تلك الطبقه ثم إختر blending options و اضبط الاعدادات كالتالي ,,
6- النتيجه الحاليه :
7- نريد ان نضيف لمعان إلي ال navigation , لذالك و بإستعمال اداة Marquee too قم بتحديد حوالي 1 px كما في الصوره التاليه ,,
قم بتلوين المنطقه المحدده باللون الابيض و ضعها فوق الطبقه الاصليه الخاصه بال navigation ,,
ينبغي عليك عمل zoom علي مساحة العمل حتي تستطيع العمل بدقه و لعمل zoom إستعمل الطريقه المختصره CTRL و زر + ,,
8- بعد الخطوه السابقه قم بعمل deselect للتحديد ,,
قم بتغير ال layer style إلي Soft Light ,,
قم بتقليل نسبة ال opacity إلي حوالي 43% ,,
ستحصل علي نتيجه تشبه الاتي ,,
9- الشئ التالي الواجب فعله هو إضافة النصوص الكتابيه علي الازرار ,,
قم بإستعمال خط يدعي Helvetica ,,
و قمت بإستعمال ال blending options التاليه ,,
النتيجه الحاليه :
11- الان علينا تصميم خط بمثابة فاصل بين الازرار بعضها البعض ,,
لعمل هذا سنستعمل اداة Marquee Tool مره اخري ,و
سنحدد منطقه سمكها حوالي 2 بكسل ,,
بينما الطبقه الجديده مالزالت الطبقه النشطه قم بإاضافة ال blending options التالي ,,
12 - يبدو انه قووي جدا , لذا سيتوجب علينا تقليل opacity إلي حوالي 20% , حتي تحصل علي نتيجه تشبه الاتي ,
13- قم بعمل نسخ لتلك الطبقه و ضعها بين باقية الازرار , حتي تحصل علي شكل يشبه الاتي
14- الان قم بعمل طبقه جديده اعلي الطبقه الخاصه ب (navigation background) نحن نقوم بتصميم الحركه التي نريدها ان تنفذ كطريقة إستجابه للروابط ,,
في الطبقه الجديده قم بتحديد المنطقه كما في الصوره التاليه ,,
15 - قم بعمل blending options التالي علي الطبقه الجديده ,,
16 - يجب ان تكون قد توصلت إلي نتيجه تشبه الاتي الان :
الان يمكننا التوقف عند تلك المرحله ,,و لكن سيكون من الممتع اكثر ان نقوم بإاضافة مجال للبحث ,,
17-قم بعمل طبقه جديده ,,
قم بعمل تحديد للمنطقه كما في الصوره التاليه ,,
18/ قم بالضغط بزر الماوس الايمن علي الطبقه الجديده ثم قم بتطبيق ال blending options التالي :
19- النتيجه الحاليه
20 - نريد الان ان نصنع زر البحث ,,
سنستعمل الاداه Rounded Rectangle Tool , و سنضبط الاعدادات كالتالي :
radius حوالي 5px ,,
قم بتحديد المنطه كما في الصوره التاليه ,,
21 - الان نضيف ال blending options التالي :
22 - النتيجه الحاليه
23- قم بالضغط علي CTRL + النقر علي الطبقه التي قمنا بعملها منذ قليل ,,
قم بعمل طبقه جديده اعلاها , و قم بتلوينها باللون الابيض ,,
بينما هي مالزالت نشطه قم بالذهاب إلي SELECT>MODIFY>CONTRACT و اختر 1px ,,
قم بالذهاب إلي EDIT>CLEAR
يجب الان ان تكون حصلت علي النتيجه التاليه :
25- قم بتغير ال layer style إلي Soft Light ,,
قم بتغير ال opacity إلي 47% ,,
26 - الان كل ما علينا فعله هو إضافة تلك اللمعه علي الزر لمنحه منظر جذاب ,,
و ستكون النتيجه كالتالي ,,
27 - قم بإاضافة اللمسات النهائيه و النصوص المطلوبه , ها نحن انتهيا ,,
لا تنسي ان الملف المفتوح الخاص بالدرس موجود في المرفقات
إنتهي الدرس
اهلا بكم في موقع بكسل التعليمي , و اهلا بكم ايضا في درس جديد من سلسلة الدروس المترجمه خصيصا لموقع بكسل ,
درس اليوم يندرج تحت تصنيف الدروس الخاصه بتصميم المواقع , سنتعلم سويا إن شاء الله من خلال الدرس كيف نصنع هيدر (HEADER) بسيط و في نفس الوقت جميل و انيق للمواقع , سنتابع الخطوات خطوه خطوه من خلال برنامج الفوتوشوب ,
يمكنك تحميل الملف المفتوح للدرس من خلال المرفقات الموجوده في نهاية الموضوع ,,
النتيجه النهائيه للدرس :
الدرس :
1- قم بعمل مساحة عمل جديده ,,,
انا استعملت الابعاد التاليه 891×132 و هي ملائمه لهدف الدرس ,,
2- سنقوم الان بإلغاء القفل الموجود علي الطبقه المسماه (background) , لذا سنقوم بالضغط مرتين علي الطبقه ,
الان بعد ان قمنا بإلغاء القفل اصبح بإمكاننا ان نقوم بإضافة Blending Options عليها ,,
لإضافة Blending Options عليها قم بالنقر بزر الماوس الايمن علي الطبقه ثم إختر blending options و إضبط الاعدادات كالتالي ,,
3- يجب ان تكون حصلت علي نتيجه تشبه الاتي :
4- الان نحن نريد ان نصمم ال navigation bar ,,
و لعمل ذالك قم بإستعمال اداة Rectangle Marquee Tool و قم بتحديد منطقه تشبه الاتي و قم بتلوينها باللون الابيض ,,
5- قم بالضغط بزر الماوس الايمن علي تلك الطبقه ثم إختر blending options و اضبط الاعدادات كالتالي ,,
6- النتيجه الحاليه :
7- نريد ان نضيف لمعان إلي ال navigation , لذالك و بإستعمال اداة Marquee too قم بتحديد حوالي 1 px كما في الصوره التاليه ,,
قم بتلوين المنطقه المحدده باللون الابيض و ضعها فوق الطبقه الاصليه الخاصه بال navigation ,,
ينبغي عليك عمل zoom علي مساحة العمل حتي تستطيع العمل بدقه و لعمل zoom إستعمل الطريقه المختصره CTRL و زر + ,,
8- بعد الخطوه السابقه قم بعمل deselect للتحديد ,,
قم بتغير ال layer style إلي Soft Light ,,
قم بتقليل نسبة ال opacity إلي حوالي 43% ,,
ستحصل علي نتيجه تشبه الاتي ,,
9- الشئ التالي الواجب فعله هو إضافة النصوص الكتابيه علي الازرار ,,
قم بإستعمال خط يدعي Helvetica ,,
و قمت بإستعمال ال blending options التاليه ,,
النتيجه الحاليه :
11- الان علينا تصميم خط بمثابة فاصل بين الازرار بعضها البعض ,,
لعمل هذا سنستعمل اداة Marquee Tool مره اخري ,و
سنحدد منطقه سمكها حوالي 2 بكسل ,,
بينما الطبقه الجديده مالزالت الطبقه النشطه قم بإاضافة ال blending options التالي ,,
12 - يبدو انه قووي جدا , لذا سيتوجب علينا تقليل opacity إلي حوالي 20% , حتي تحصل علي نتيجه تشبه الاتي ,
13- قم بعمل نسخ لتلك الطبقه و ضعها بين باقية الازرار , حتي تحصل علي شكل يشبه الاتي
14- الان قم بعمل طبقه جديده اعلي الطبقه الخاصه ب (navigation background) نحن نقوم بتصميم الحركه التي نريدها ان تنفذ كطريقة إستجابه للروابط ,,
في الطبقه الجديده قم بتحديد المنطقه كما في الصوره التاليه ,,
15 - قم بعمل blending options التالي علي الطبقه الجديده ,,
16 - يجب ان تكون قد توصلت إلي نتيجه تشبه الاتي الان :
الان يمكننا التوقف عند تلك المرحله ,,و لكن سيكون من الممتع اكثر ان نقوم بإاضافة مجال للبحث ,,
17-قم بعمل طبقه جديده ,,
قم بعمل تحديد للمنطقه كما في الصوره التاليه ,,
18/ قم بالضغط بزر الماوس الايمن علي الطبقه الجديده ثم قم بتطبيق ال blending options التالي :
19- النتيجه الحاليه
20 - نريد الان ان نصنع زر البحث ,,
سنستعمل الاداه Rounded Rectangle Tool , و سنضبط الاعدادات كالتالي :
radius حوالي 5px ,,
قم بتحديد المنطه كما في الصوره التاليه ,,
21 - الان نضيف ال blending options التالي :
22 - النتيجه الحاليه
23- قم بالضغط علي CTRL + النقر علي الطبقه التي قمنا بعملها منذ قليل ,,
قم بعمل طبقه جديده اعلاها , و قم بتلوينها باللون الابيض ,,
بينما هي مالزالت نشطه قم بالذهاب إلي SELECT>MODIFY>CONTRACT و اختر 1px ,,
قم بالذهاب إلي EDIT>CLEAR
يجب الان ان تكون حصلت علي النتيجه التاليه :
25- قم بتغير ال layer style إلي Soft Light ,,
قم بتغير ال opacity إلي 47% ,,
26 - الان كل ما علينا فعله هو إضافة تلك اللمعه علي الزر لمنحه منظر جذاب ,,
و ستكون النتيجه كالتالي ,,
27 - قم بإاضافة اللمسات النهائيه و النصوص المطلوبه , ها نحن انتهيا ,,
لا تنسي ان الملف المفتوح الخاص بالدرس موجود في المرفقات
إنتهي الدرس