منتديات شامل نت - عرض المشاركة وحيدة - الآن وحصريا في شامل نت ..../ شرح كيفية عمل صفحة web على الـــ Photoshop .. خيااالي ..

بسم الله الرحمن الرحيم

الآن أصبح بإمكانك عمل صفحة انترنت على الفوتوشوب ... والمطلوب لتطبيق هذا الدرس Adobe Photoshop Cs2 بالإستعانة بـــ ImageReady Cs2 ...
ويمكن عمل هذا الدرس على ImageReady Cs إذا كانت خبرتك عالية ...

ونبدأ الشرح :

1- افتح طبقة جديدة بقياسات الصفحة نت التي تريدها ... وأنا قمت بأخذ 760 بيكسل للعرض و 768 بيكسل للطول ...

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

2- قم بإظهار المسطرة ... إما بـــ Ctrl+R ... أو من خلال View ثم Rulers كما بالصورة ...

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

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

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

4- قم بتقسيم الصفحة بهذه الخطوط التي أخرجتها من المسطرة بالشكل الذي تريده ... يعني بهذه التقسيمات تسهل عمل إضافة الصور والشعارات ( logo ) إلى الصفحة ... وكذلك تسهل وضع الأزرار ... لذلك أنا قمت بهذه التقسيمات التي بالصورة ... بإمكانك عمل مثلها ...

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

5- قم بإدراج الصورة التي تريدها أن تظهر بصفحة النت ... وقم بعمل اللوقو الذي تريده .. وضعه بالمكان الذي صممته له ... فأنا هكذا وضعت اللوقو والصورة بهذه الأماكن ...

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

6- الآن سوف نقوم بإضافة الأزرار .... :

أ- قم باختيار أدة التحديد .

ب- قم بتحديد مكان الزر الذي تريده كما بالصورة .

جـ - قم باختيار أداة التلوين

د- لا تنسى مراعاة أسماء الطبقات بشكل دقيق جدا ... والآن قم بإضافة طبقة جديدة للزر بعد ترتيب كل زر بمجموعة من أجل الدقة بالعمل كما بالصورة ...

هــ- قم باختيار اللون الذي تريده لخلفية الزر وقم بتلوين المربع الذي حددته من أجل الزر ...

و- قم باختيار أداة الكتابة .

ي- ثم قم بوضعها في مربع الزر الذي لونته ... واكتب داخلها اسم الزر الذي تريده .. واجعلها متناسبة بالقياس ...

الآن سوف نقوم بعمل حركة للزر ... يعني إذا مرت الماوس فوقه أو نقر عليه ... يتغير لونه ...

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

والآن .. نكون انتهينا من الزر الأول ... لعمل الزر الثاني اعمله بنفس الطريقة السابقة . ثم قم بتغيير اسم الزر يعني بالأول كان اسمه sound الآن سميه vidio ... ولعمل ذلك بطريقة مختصرة فقط قم بنسخ مجموعة الزر الأولى وغير اسمها وغير اسماء نصوص الأزرار والخلفيات وغير نصوص الأزرار ...
فيصبح العمل لديك بهذا الشكل ...

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

وفي نهاية العمل ... بعد الإنتهاء من عمل الأزرار كاملة ووضع اللوقو (( الشعار )) ووضع الصورة .. سوف يكون العمل لديك بهذا الشكل ..

وسوف تكون الطبقات والمجموعات بهذا الشكل ...

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

7- الآن انتهينا من الــ Photoshp ... سوف ننقل عملنا إلى الـــ ImageReady بالضغط على زر النقل الموجود في أشرطة الأدوات ..

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

8- بعد ما تم نقل العمل إلى الإيمج ردي بشكل سليم ... قم بالضغط على Slices من قائمة الأدوات ... ثم Create Slices From Guides ... كما بهذه الصورة ..

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

9- سوف تلاحظ ظهور التصميم لديك بهذا الشكل ...

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

10- الآن قم باختيار أداة Slice Tool من الأدوات ...

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

11- الآن سوف نقوم بدمج كل مقطع بسلايس ...
فقط بعد ما اخترت أداة Slice Tool قم بالضغط على أحد زوايا أي مقطع واسحب يدك لتكمل مربع ..
مثلا أنا قمت بالضغط على الزاوية في أعلى الصفحة ودمجت السلايسات تبع اللوقو كلها في سلايس واحد ... لاحظ الصورة ..

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

12- الآن قم باختيار أداة Slice Select Tool ....

ثم قم بالضغط على الصورة التي وضعنا فيها shammel.net في نهاية التصميم مثلا ...
وانتقل إلى النوافذ التي في يمين الصفحة .. واختر نافذة Slice كما بالصورة هذه ..

لاحظ عند type نضع Image ... يعني النوع : صورة ...
وعند URl نضع الرابط الذي اذا ضغطنا على هذه الصورة الصغيرة يفح لنا هذا الرابط .. وبما أني أنا قمت بتسمية الصورة shammel.net سوف أضع بهذا المكان www.shammel.net ...
فعندما تقم بالضغط على الصورة تفتح لك صفحة شامل نت الرئيسية ...

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

13- الآن سوف نقوم بعمل الحركة للأزرار التي أخبرتكم عنها في بداية الشرح ...

أ- اختر أداة .

ب- وقم بالضغط على أحد الأزرار بالوسط ... كما بالصورة ...

جـ- قم بفتح نافذة Web Content من النوافذ التي على يمين البرنامج ... فتظهر لك هذه النافذة ...

د- عندما تحرك السهم إلى الأعلى أو إلى الأسفل لتلك النافذة سوف تجد الزر الذي ضغطت عليه قبل قليل في هذه النافذة ... عندما تجده قم بالضغط عليه بالزر اليميني ...
ثم اختارAdd Rollover State ... كما بهذه الصورة ...

هـ - فيظهر لك بجانب الزر داخل النافذة ... الـــ over ... كما بالشكل ..

و- اضغط عليه بالزر اليميني ... واختر Activate Rollover State ... مثل ما بالصورة تماما ..

ي- الآن انتقل إلى الطبقات (( Layar )) كما بالصورة ..

خ- قم بتنفيذ الخطوات التي بالصورة ... فقط فعل وألغي التفعيل ...

ح- ارجع إلى النافذة السابقة عند الـــ over .. واضغط عليها بالزر اليميني واختر Activate Rollover state ... كما بالصورة التالية ...

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

14- الآن انتهينا من عمل الحركة للزر ... لتجربت الزر ..
اضغط على ايقونة التحكم الموضحة بالصورة التالية ....

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

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

15- لتجعل عند النقر على الزر وليس تمرير الماوس فوق يتغير اللون ... ارجع للــــ over واضغط على الزر اليميني واعمل كما موضح بالصورة ...

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

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

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

17- وأخيرا ... وأخيرا .. لحفظ صفحة الويب ... اضغط على File ثم Save Optimized As ...
أو اضغط Ctrl+Alt+Shift+s ... كما بالصورة ...

ثم اختر مكان الحفظ واضغط على save ....

ألف مبروك تمت العملية بنجاح

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

لمشاهدة صفحة الويب التي طبقناها في الدرس ... فقط قم بتحميلها من هنا ... الزر اليميني ... ثم حفظ الهدف باسم ..
http://www.freewebs.com/beso5/Web%20Site.zip

لا تضع رد إذا كان التطبيق على الدرس ليس معك ... هههههههههه ...
مع تحيات أخوكم ... Beso