الصفحة الرئيسية >> الدروس >> دروس بناء المواقع>> دورة تصميم المواقع الإحترافية والناجحة بإذن الله >>

- الدرس الثالث - تقطيع التصميم وحفظه كصفحة ويب !

تكلمنا في الدرس السابق عن طريقة تصميم الموقع ببرنامج الفوتوشوب .. ودرسنا اليوم تكملة للدرس السابق .. فسوف نتعلم اليوم بإذن الله كيفية تقطيع التصميم .. والأمور الخاصة به .. ثم حفظ التصميم على شكل صفحة ويب - يعني صفحة انترنت - ، لكن بصراحة .. تقطيع التصميم بحد ذاته .. فنّ سهل صعب ! .. سهلٌ في تطبيقه .. وصعب في إحتياجه لتفكير عميق حتى يظهر بأجمل صورة وأكملها ! .. لاأطيل عليكم في المقدمة .. وأترككم مع هذا الدرس .
في الدرس السابق إنتهينا من التصميم بهذا الشكل :

الآن يجب علينا أن نقوم بإختيار هذا الأداة من شريط الأدوات في برنامج الفوتوشوب .. حتى نقوم بعملية القص .

لكن .. أنتبه .. فهناك عدة أنواع من القص :

أولاً : قص الزوايا .

ثانياً : قص الصورة التي نريد أن نضع عليها رابطاً .. أي نجعل الزائر ينتقل إلى صفحة أخرى عندما يضغط عليها .

ثالثاً : قص الصورة التي نريد أن نحذفها ونضع في مكانها لوناً ؛ ليخف حجم الموقع .

رابعاً : قص الصورة التي نريد أن نحذفها ونضع مكانها صورة صغيرة تتمدد على كل الخلية ؛ ليخفّ حجم الموقع .

الآن نأتي للتفاصيل .
أولاً : قص الزوايا
بعد أختيار أداة التحديد قم بقص جميع الزوايا وأحرص على أن تكون بنفس المقاسات .. شاهد الصورة التالية :

بعد قص جميع الزوايا في الموقع يصبح لهذا الشكل :
ثانياً : قص الصورة التي نريد أن نضع عليها رابطاً .. أي نجعل الزائر ينتقل إلى صفحة أخرى عندما يضغط عليها .
الآن نقوم بقص الأماكن التي تريد أن تضع عليها روابطاً فيما بعد .. كما في الصورة التالية :

ثالثاً : قص الصورة التي نريد أن نحذفها ونضع في مكانها لوناً ؛ ليخف حجم الموقع .
الآن نقوم بقص الأماكن التي تحتوي على لون واحد .. لكي نقوم بحذفها [ فيما بعد ] ثم نقوم باستبدالها بلون مطابق للون الصورة التي حذفنها ، الآن عليك فقط قص الصورة التي تحتوي على لون واحد .. كما في الصورة التالية ( قمت بتوضيح الحدود باللون الأحمر ) :

رابعاً : قص الصورة التي نريد أن نحذفها ونضع مكانها صورة صغيرة تتمدد على كل الخلية ؛ ليخفّ حجم الموقع .
هذه بصراحة أصعب نقطة أواجهها في الشرح ! ، قم الآن بتحديد الصور التي ترى أنها يمكن أن تستبدل بصورة صغيرة [ فيما بعد ] .. لاأدري هل وضحت النقطة أم لا ! .. عموماً شاهدوا هذه الصورة المكبّرة :

وهذه صورة لكل الصور التي قمت بتحديدها في موقعي .. لأحذفها فيما بعد وأستبدلها بصورة صغيرة تتمدد على كامل الخلية ! :
جميلٌ جداً .. الآن أنتهينا من مرحلة التقصيص .. ويجب علينا حفظ التصميم كـ [ صفحة ويب ] .. كيف ذلك ؟! .. تابع التالي .
من قائمة :

File >> Save for Web
من الزاوية اليمنى العلوية أختر ( Save ) .
تظهر لك نافذة حفظ الملف .. وفي أسفلها شريط إعدادات .. طبقّ الإعدادات كما في الصورة التالية .

ثم أضغط زر Save .

ملاحظة : أنصحك بإنشاء مجلد جديد خاص للموقع .
الآن أرجع إلى موقعك بالفوتوشوب .. وقم بمضاعفته .. من قائمة :

Image >> Duplcate

 كما الصورة التالية .

اضغط هنا للإنتقال الصفحة الثانية ..