Mr.ATef
07-07-2006, 01:12 PM
بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته ،،،،،، وبعد :
- الدرس الأول - حددّ تخصص موقعك وخطط لأمورك جيداً ! (http://www.aborenaz.com/dros/bena_web/aldorh/lesson_01.htm)
- الدرس الثاني - تصميم الموقع بالفوتوشوب (http://www.aborenaz.com/dros/bena_web/aldorh/lesson_02.htm)
[COLOR=darkred]تكلمنا في الدرس السابق عن طريقة تصميم الموقع ببرنامج الفوتوشوب .. ودرسنا اليوم تكملة للدرس السابق .. فسوف نتعلم اليوم بإذن الله كيفية تقطيع التصميم .. والأمور الخاصة به .. ثم حفظ التصميم على شكل صفحة ويب - يعني صفحة انترنت - ، لكن بصراحة .. تقطيع التصميم بحد ذاته .. فنّ سهل صعب ! .. سهلٌ في تطبيقه .. وصعب في إحتياجه لتفكير عميق حتى يظهر بأجمل صورة وأكملها ! .. لاأطيل عليكم في المقدمة .. وأترككم مع هذا الدرس .
--------------------------------------------------------------------------------
1
في الدرس السابق إنتهينا من التصميم بهذا الشكل :
http://www.aborenaz.com/dros/img/COURSE_lesson2_053.gif
الآن يجب علينا أن نقوم بإختيار هذا الأداة http://www.aborenaz.com/dros/img/COURSE_lesson3_001.gif من شريط الأدوات في برنامج الفوتوشوب .. حتى نقوم بعملية القص .
لكن .. أنتبه .. فهناك عدة أنواع من القص :
أولاً : قص الزوايا .
ثانياً : قص الصورة التي نريد أن نضع عليها رابطاً .. أي نجعل الزائر ينتقل إلى صفحة أخرى عندما يضغط عليها .
ثالثاً : قص الصورة التي نريد أن نحذفها ونضع في مكانها لوناً ؛ ليخف حجم الموقع .
رابعاً : قص الصورة التي نريد أن نحذفها ونضع مكانها صورة صغيرة تتمدد على كل الخلية ؛ ليخفّ حجم الموقع .
الآن نأتي للتفاصيل .
--------------------------------------------------------------------------------
2
[COLOR=red]أولاً : قص الزوايا
بعد أختيار أداة التحديد قم بقص جميع الزوايا وأحرص على أن تكون بنفس المقاسات .. شاهد الصورة التالية :
http://www.aborenaz.com/dros/img/COURSE_lesson3_002.gif
بعد قص جميع الزوايا في الموقع يصبح لهذا الشكل :
http://www.aborenaz.com/dros/img/COURSE_lesson3_003.gif
--------------------------------------------------------------------------------
3
ثانياً : قص الصورة التي نريد أن نضع عليها رابطاً .. أي نجعل الزائر ينتقل إلى صفحة أخرى عندما يضغط عليها .
الآن نقوم بقص الأماكن التي تريد أن تضع عليها روابطاً فيما بعد .. كما في الصورة التالية :
http://www.aborenaz.com/dros/img/COURSE_lesson3_004.gif
--------------------------------------------------------------------------------
4
ثالثاً : قص الصورة التي نريد أن نحذفها ونضع في مكانها لوناً ؛ ليخف حجم الموقع .
الآن نقوم بقص الأماكن التي تحتوي على لون واحد .. لكي نقوم بحذفها [ فيما بعد ] ثم نقوم باستبدالها بلون مطابق للون الصورة التي حذفنها ، الآن عليك فقط قص الصورة التي تحتوي على لون واحد .. كما في الصورة التالية ( قمت بتوضيح الحدود باللون الأحمر ) :
http://www.aborenaz.com/dros/img/COURSE_lesson3_005.gif
--------------------------------------------------------------------------------
5
رابعاً : قص الصورة التي نريد أن نحذفها ونضع مكانها صورة صغيرة تتمدد على كل الخلية ؛ ليخفّ حجم الموقع .
هذه بصراحة أصعب نقطة أواجهها في الشرح ! ، قم الآن بتحديد الصور التي ترى أنها يمكن أن تستبدل بصورة صغيرة [ فيما بعد ] .. لاأدري هل وضحت النقطة أم لا ! .. عموماً شاهدوا هذه الصورة المكبّرة :
http://www.aborenaz.com/dros/img/COURSE_lesson3_007.gif
وهذه صورة لكل الصور التي قمت بتحديدها في موقعي .. لأحذفها فيما بعد وأستبدلها بصورة صغيرة تتمدد على كامل الخلية ! :
http://www.aborenaz.com/dros/img/COURSE_lesson3_006.gif
--------------------------------------------------------------------------------
6
جميلٌ جداً .. الآن أنتهينا من مرحلة التقصيص .. ويجب علينا حفظ التصميم كـ [ صفحة ويب ] .. كيف ذلك ؟! .. تابع التالي .
--------------------------------------------------------------------------------
7
من قائمة :
File >> Save for Web
http://www.aborenaz.com/dros/img/COURSE_lesson3_008.gif
--------------------------------------------------------------------------------
8
من الزاوية اليمنى العلوية أختر ( Save ) .
http://www.aborenaz.com/dros/img/COURSE_lesson3_009.gif
--------------------------------------------------------------------------------
9
تظهر لك نافذة حفظ الملف .. وفي أسفلها شريط إعدادات .. طبقّ الإعدادات كما في الصورة التالية .
ثم أضغط زر Save .
http://www.aborenaz.com/dros/img/COURSE_lesson3_010.gif
ملاحظة : أنصحك بإنشاء مجلد جديد خاص للموقع .
--------------------------------------------------------------------------------
10
الآن أرجع إلى موقعك بالفوتوشوب .. وقم بمضاعفته .. من قائمة :
Image >> Duplcate
كما الصورة التالية .
http://www.aborenaz.com/dros/img/COURSE_lesson3_011.gif
--------------------------------------------------------------------------------
11
ستظهر لك نافذة مثل النافذة التالية .. لاتنس أن تضع علامة " صح " على العبارة الموجودة في الصورة :
http://www.aborenaz.com/dros/img/COURSE_lesson3_012.gif
--------------------------------------------------------------------------------
12
الآن .. يجب عليك أن تتذكر الأماكن التي قمت بقصها لتمسحها وتضع مكانها صورة ً صغيرة تتمدد على كامل الخلية .. ثم بعد ذلك قم بإختيار هذه الأداة http://www.aborenaz.com/dros/img/most6el.gif .. ثم قم بتحديد جزء صغير من الصورة .. كما في الصورة التالية :
http://www.aborenaz.com/dros/img/COURSE_lesson3_013.gif
ثم اضغط على Ctrl + C لنسخها ..
ثم أضغط على Ctrl + N لفتح ملف جديد ( واترك المقاس كما هو ) .
ثم اضغط على Ctrl + V للصق الصورة في الملف الجديد .. لتصبح مثل الصورة التالية :
http://www.aborenaz.com/images/main_37.gif
ثم قم بحفظها في مجلد الصور images ..
File >> Save for Web
لكن أجعل إعدادات الحفظ كما في الصورة التالية ( سم الصورة بأي اسم تريد .. هنا اسميتها up ) :
http://www.aborenaz.com/dros/img/COURSE_lesson3_014.gif
هذه الصورة صغيرة الحجم .. وبإمكاننا إستخدامها لتخفيف حجم الموقع وزيادة سرعة تحميل الصفحة ! .. سندرس التفاصيل بعد قليل إن شاء الله ..
الآن عليك عمل مثل الذي عملنا قبل قليل ( قص صورة صغيرة ) مع كل الصور التي قمنا بتحديدها لنقوم بمسحها واستبدالها بصورة تتمدد على كل الخلية .. الصورة التالية توضح مناطق التمدد التي اقصدها :
http://www.aborenaz.com/dros/img/COURSE_lesson3_006.gif
السلام عليكم ورحمة الله وبركاته ،،،،،، وبعد :
- الدرس الأول - حددّ تخصص موقعك وخطط لأمورك جيداً ! (http://www.aborenaz.com/dros/bena_web/aldorh/lesson_01.htm)
- الدرس الثاني - تصميم الموقع بالفوتوشوب (http://www.aborenaz.com/dros/bena_web/aldorh/lesson_02.htm)
[COLOR=darkred]تكلمنا في الدرس السابق عن طريقة تصميم الموقع ببرنامج الفوتوشوب .. ودرسنا اليوم تكملة للدرس السابق .. فسوف نتعلم اليوم بإذن الله كيفية تقطيع التصميم .. والأمور الخاصة به .. ثم حفظ التصميم على شكل صفحة ويب - يعني صفحة انترنت - ، لكن بصراحة .. تقطيع التصميم بحد ذاته .. فنّ سهل صعب ! .. سهلٌ في تطبيقه .. وصعب في إحتياجه لتفكير عميق حتى يظهر بأجمل صورة وأكملها ! .. لاأطيل عليكم في المقدمة .. وأترككم مع هذا الدرس .
--------------------------------------------------------------------------------
1
في الدرس السابق إنتهينا من التصميم بهذا الشكل :
http://www.aborenaz.com/dros/img/COURSE_lesson2_053.gif
الآن يجب علينا أن نقوم بإختيار هذا الأداة http://www.aborenaz.com/dros/img/COURSE_lesson3_001.gif من شريط الأدوات في برنامج الفوتوشوب .. حتى نقوم بعملية القص .
لكن .. أنتبه .. فهناك عدة أنواع من القص :
أولاً : قص الزوايا .
ثانياً : قص الصورة التي نريد أن نضع عليها رابطاً .. أي نجعل الزائر ينتقل إلى صفحة أخرى عندما يضغط عليها .
ثالثاً : قص الصورة التي نريد أن نحذفها ونضع في مكانها لوناً ؛ ليخف حجم الموقع .
رابعاً : قص الصورة التي نريد أن نحذفها ونضع مكانها صورة صغيرة تتمدد على كل الخلية ؛ ليخفّ حجم الموقع .
الآن نأتي للتفاصيل .
--------------------------------------------------------------------------------
2
[COLOR=red]أولاً : قص الزوايا
بعد أختيار أداة التحديد قم بقص جميع الزوايا وأحرص على أن تكون بنفس المقاسات .. شاهد الصورة التالية :
http://www.aborenaz.com/dros/img/COURSE_lesson3_002.gif
بعد قص جميع الزوايا في الموقع يصبح لهذا الشكل :
http://www.aborenaz.com/dros/img/COURSE_lesson3_003.gif
--------------------------------------------------------------------------------
3
ثانياً : قص الصورة التي نريد أن نضع عليها رابطاً .. أي نجعل الزائر ينتقل إلى صفحة أخرى عندما يضغط عليها .
الآن نقوم بقص الأماكن التي تريد أن تضع عليها روابطاً فيما بعد .. كما في الصورة التالية :
http://www.aborenaz.com/dros/img/COURSE_lesson3_004.gif
--------------------------------------------------------------------------------
4
ثالثاً : قص الصورة التي نريد أن نحذفها ونضع في مكانها لوناً ؛ ليخف حجم الموقع .
الآن نقوم بقص الأماكن التي تحتوي على لون واحد .. لكي نقوم بحذفها [ فيما بعد ] ثم نقوم باستبدالها بلون مطابق للون الصورة التي حذفنها ، الآن عليك فقط قص الصورة التي تحتوي على لون واحد .. كما في الصورة التالية ( قمت بتوضيح الحدود باللون الأحمر ) :
http://www.aborenaz.com/dros/img/COURSE_lesson3_005.gif
--------------------------------------------------------------------------------
5
رابعاً : قص الصورة التي نريد أن نحذفها ونضع مكانها صورة صغيرة تتمدد على كل الخلية ؛ ليخفّ حجم الموقع .
هذه بصراحة أصعب نقطة أواجهها في الشرح ! ، قم الآن بتحديد الصور التي ترى أنها يمكن أن تستبدل بصورة صغيرة [ فيما بعد ] .. لاأدري هل وضحت النقطة أم لا ! .. عموماً شاهدوا هذه الصورة المكبّرة :
http://www.aborenaz.com/dros/img/COURSE_lesson3_007.gif
وهذه صورة لكل الصور التي قمت بتحديدها في موقعي .. لأحذفها فيما بعد وأستبدلها بصورة صغيرة تتمدد على كامل الخلية ! :
http://www.aborenaz.com/dros/img/COURSE_lesson3_006.gif
--------------------------------------------------------------------------------
6
جميلٌ جداً .. الآن أنتهينا من مرحلة التقصيص .. ويجب علينا حفظ التصميم كـ [ صفحة ويب ] .. كيف ذلك ؟! .. تابع التالي .
--------------------------------------------------------------------------------
7
من قائمة :
File >> Save for Web
http://www.aborenaz.com/dros/img/COURSE_lesson3_008.gif
--------------------------------------------------------------------------------
8
من الزاوية اليمنى العلوية أختر ( Save ) .
http://www.aborenaz.com/dros/img/COURSE_lesson3_009.gif
--------------------------------------------------------------------------------
9
تظهر لك نافذة حفظ الملف .. وفي أسفلها شريط إعدادات .. طبقّ الإعدادات كما في الصورة التالية .
ثم أضغط زر Save .
http://www.aborenaz.com/dros/img/COURSE_lesson3_010.gif
ملاحظة : أنصحك بإنشاء مجلد جديد خاص للموقع .
--------------------------------------------------------------------------------
10
الآن أرجع إلى موقعك بالفوتوشوب .. وقم بمضاعفته .. من قائمة :
Image >> Duplcate
كما الصورة التالية .
http://www.aborenaz.com/dros/img/COURSE_lesson3_011.gif
--------------------------------------------------------------------------------
11
ستظهر لك نافذة مثل النافذة التالية .. لاتنس أن تضع علامة " صح " على العبارة الموجودة في الصورة :
http://www.aborenaz.com/dros/img/COURSE_lesson3_012.gif
--------------------------------------------------------------------------------
12
الآن .. يجب عليك أن تتذكر الأماكن التي قمت بقصها لتمسحها وتضع مكانها صورة ً صغيرة تتمدد على كامل الخلية .. ثم بعد ذلك قم بإختيار هذه الأداة http://www.aborenaz.com/dros/img/most6el.gif .. ثم قم بتحديد جزء صغير من الصورة .. كما في الصورة التالية :
http://www.aborenaz.com/dros/img/COURSE_lesson3_013.gif
ثم اضغط على Ctrl + C لنسخها ..
ثم أضغط على Ctrl + N لفتح ملف جديد ( واترك المقاس كما هو ) .
ثم اضغط على Ctrl + V للصق الصورة في الملف الجديد .. لتصبح مثل الصورة التالية :
http://www.aborenaz.com/images/main_37.gif
ثم قم بحفظها في مجلد الصور images ..
File >> Save for Web
لكن أجعل إعدادات الحفظ كما في الصورة التالية ( سم الصورة بأي اسم تريد .. هنا اسميتها up ) :
http://www.aborenaz.com/dros/img/COURSE_lesson3_014.gif
هذه الصورة صغيرة الحجم .. وبإمكاننا إستخدامها لتخفيف حجم الموقع وزيادة سرعة تحميل الصفحة ! .. سندرس التفاصيل بعد قليل إن شاء الله ..
الآن عليك عمل مثل الذي عملنا قبل قليل ( قص صورة صغيرة ) مع كل الصور التي قمنا بتحديدها لنقوم بمسحها واستبدالها بصورة تتمدد على كل الخلية .. الصورة التالية توضح مناطق التمدد التي اقصدها :
http://www.aborenaz.com/dros/img/COURSE_lesson3_006.gif