أعود إليكم في الدرس الثاني من دروس الدورة .. لعل وعسى أن أكون قد وفقت في عمل مايرضي الله عز وجل أولاً .. ثم مايرضيكم .. والأهم عندي هو دعواتكم لي .. عسى الله أن لايحرمنا وإياكم الأجر .
في البداية .. لاتظن أن هناك طريقة واحدة فقط لتصميم المواقع في الفوتوشوب .. إنما هي طرقٌ لاحصر لها .. كل إنسان يصمم حسب ذوقه ، لذلك . أحترت كثيراً في كيفية تقديم هذا الدرس .. أو بشكل عام تقديم هذه الدورة .. فلم أجد طريقة افضل من المحاكاة .. وأقصد بالمحاكاة هي أن نختار موقعاً ما ونقوم بشرح كامل لكيفية تصميم موقع مثله ، أما عن الموقع الذي أخترته . فهو موقعي هذا في نسخته الثانية ، بالطبع فسوف يشاهد هذه الدورة أصناف متعددة من الناس .. المتوسط منهم والمبتدئ .. لذلك سأحاول أن تكون الخطوات واضحة .. وأنتم عليكم فهم طريقة التصميم .. وتطبيق دروس هذه الدورة .. ثم تبحرون في عالم تصميم المواقع .. كيفما أردتم .. بإذن الله .
في البداية أعلم يارعاك الله أن موقعك يشاهده الناس عبر شاشات مختلفة .. منا ماهو صغير ( 15 بوصة ) .. ومنها ماهو كبير ( 17 ، 19 بوصة ) .. وعلى ذلك وفي معظم الأحيان تختلف دقة الشاشة .. بعضهم تكون دقة شاشته 800*600 بكسل .. وبعضهم تكون 1024*768 .. الخ
إذن هذه مشكلة كبيرة ! .. إذا صممنا موقعنا بقياس يناسب دقة 800*600 فسوف يظهر صغيراً في دقة 1024*768 .. والعكس صحيح !
مالحل ؟! .. هناك شيء يسمنوه [ منطقة التمدد ] .. حيث تعمل منطقة التمدد على جعل الموقع ملائماً لجميع المقاسات .. ومن وجهة نظري المتواضعة أنه لاحاجة لنا لذلك في أمر تصميم المواقع .. أما المنتديات فيجب علينا فعلها - وهذا ليس محور حدينا - ؛ لذلك لن أتطرق لهذه النقطة في الشرح .. لكني أحببت توضيحها كمعلومة بسيطة في البداية .. لأني أتوقع أن هذا السؤال يتبادر إلى أذهان الكثير ، وسيكون تصميمنا اليوم في المقاس المناسب لدقة 800*600 ولاإشكال في ظهوره في مقاس 1024*768 إذا أحسنا التصميم .
بعد ذلك قمنا بإختيار لونين متقاربين من بعضهم .. أحدهما فاتح .. والآخر أغمق منه بقليل .. كما في الصورة التالية .
( اللون الذي في الأعلى هو الفاتح .. والذي في الأسفل هو الغامق )
الآن نريد أن نعمل إطار خارجي ( باللون الفاتح ) للموقع .. نقوم بإختيار الأداة الموضحة في الصورة .. ونقوم بالضغط عليها بالزر الأيمن ، ثم أختر الأداة الموضحة بالصورة .
الآن إنتهينا من الإطار الخارجي .. ونريد أن نعمل بنر علوي للموقع .. فنقوم بإختيار الأداة الموضحة في الصورة .. ونقوم بالضغط عليها بالزر الأيمن ، ثم أختر الأداة الموضحة بالصورة .
الآن أحتاج لتركيزك .. فسوف نقوم بالتعديل على البنر وإضافة حركة جمالية له ، انظر إلى أعلى البنر .. تجد أن فيه زوايا في اليمين واليسار .. مارأيك لو حذفناها وجعلنا شكل البنر وكأنه ستارة نازلة من الأعلى ؟ .. فقط أتبع الآتي .. قم بإختيار أداة التحديد ثم قم بتحديد الجزء العلوي من البنر .. كما في الصورة التالية .
ثم من القائمة اليسرى أختر ( Drop Shadow ) ، ثم افعل كما في الصورة التالية .
--------------------------------------------------------------------------------
ثم من القائمة اليسرى أختر ( Gradient Overly ) ، ثم افعل كما في الصورة التالية .
الآن تجد أن هناك مستطيلاً آخر مطابق للمستطيل الذي صنعناه .. قم بتحريكه جهة اليسار بمسافة بسيطة وذلك بواسطه أداة السهم ، ولاتنسى أن تضغط زر Shift أثناء تحريك المستطيل الثاني لليسار ؛ كي تحافظ على الإتزان .. كما في الصورة التالية .
الآن تجد أن هناك مستطيلاً ثالثاً مطابق للمستطيلين السابقين.. الآن قم بتحريكه جهة اليسار بمسافة بسيطة وذلك بواسطه أداة السهم ، ولاتنسى أن تضغط زر Shift أثناء تحريك المستطيل الثاني لليسار ؛ كي تحافظ على الإتزان .. كما في الصورة التالية .
الآن نريد أن نفعل حركة جمالية في المستطيل الآخير .. نقوم بإختيار الأداة الموضحة في الصورة .. ونقوم بالضغط عليها بالزر الأيمن ، ثم أختر الأداة الموضحة بالصورة .
الآن نريد أن نعمل حركة جمالية آخرى .. لكن ماهي الألوان المناسبة التي نستخدمها ؟
حسب ذوقي المخيس .. أتوقع أن اللون الأخضر الفاتح يناسبه اللون البرتقالي الفاتح والأزرق الفاتح ! .. ربما يكون كلامي صحيحاً ربما لا ..!
الآن بقي شكل جمالي آخر .. نقوم بتصميمه كما صممنا السابق .. لكن نجعله أطول من السابق بقليل .. نقوم بإختيار الأداة الموضحة في الصورة .. ونقوم بالضغط عليها بالزر الأيمن ، ثم أختر الأداة الموضحة بالصورة .
اممممممممم ، ماذا احتاج في موقعي ؟
نعم تذكرت .. أحتاج لـ شريط سفلي بتصميم جميل أكتب عليه عبارة لحفظ الحقوق .. لكن .. ماأنسب طريقة لصنع هذا الشريط ؟ .. أتبّع الآتي .
اممممممممم ، ماذا احتاج في موقعي غير الشريط السفلي ؟ ؟
نعم تذكرت .. أحتاج لـ شريط علوي بتصميم مناسب أكتب عليه الأقسام الفرعية التي في موقعي .. لكن .. ماأنسب طريقة لصنع هذا الشريط ؟ .. أتبّع الآتي .
الآن إنتهينا من التصميم .. بقي عليك إضافة النصوص إلى التصميم ( البنرات ، أسماء الأقسام ، ..الخ ) !
إضافة النصوص يكون عن طريق هذه الأداة .. والتحكم بتنسيق النص يكون عن الطريق هذا الشريط الذي يظهر في أعلى البرنامج:
عن نفسي فقد قمت بإضافة النصوص التي أحتاجها كذلك صممت لي شعاراً خاصاً وضعته في البنر .. وأتيت ببعض الأيقونات الجمالية ووضعتها بطريقة من اختياري .. ووضعت مساحة إعلانية .. حتى أصبح الشكل النهائي لتصميم كما في الصورة التالية :
لاحظ أني لم أكتب النصوص في الشريط الذي في البنر ( آخر شريط قمنا بصنعه ) .. أتدرون لماذا ؟ .. لأنه بإمكاني عمل ذلك عن طريق الفرنت بيج .. واستخدام صورة صغيرة تتمدد على كامل الخلية .. وبالتالي يصغر الحجم وتصبح الصفحة خفيفة .. ولاتأثير على الشكل النهائي .. ! ، أعلم أن بعضكم لم يفهم ماأقصد .. لكن هذا لايهم .. لأن كل ذلك سنعرفه بالتفصيل إن شاء الله في الدرس القادم من هذه الدروة .
ملاحظة هامة : الكثير يسألني عن كيفية عمل مثل الخط الذي كتبت فيه البسملة في أعلى البنر .. كما في هذه الصورة :
الأمر بسيط جداً .. فقط طبّق الإعدادات التالية في شريط تنسيق النص الموجود في أعلى الفوتوشوب ( بعد اختيار الأداة ) :
وبإذن الله سوف تحصل على النص بهذا التنسيق الجميل ..!
--------------------------------------------------------------------------------
بهذا .. نكون قد انتهينا من الدرس الثاني ... وبدون مبالغة .. لاأذكر أني قد تعبت مثلما تعبت في هذ الدرس .. فقد أخذ من أكثر من 3 أيام ! ، أسأل الله العلي القدير أن ينفع به الإسلام والمسلمين وأن أكون قد وفقت في شرح طريقة العمل .. فإن أصبت فمن الله وإن أخطأت فمن نفسي والشيطان .. وانتظرونا في الدرس الثالث .. فسوف نتكلم بإذن الله عن الخطوة الأهم .. وهي تقصيص التصميم وحفظه على هيئة صفحات انترنت ( Webpage ) ، انتظرونا ولاتنسوني من دعائكم ..
تكلمنا في الدرس السابق عن طريقة تصميم الموقع ببرنامج الفوتوشوب .. ودرسنا اليوم تكملة للدرس السابق .. فسوف نتعلم اليوم بإذن الله كيفية تقطيع التصميم .. والأمور الخاصة به .. ثم حفظ التصميم على شكل صفحة ويب - يعني صفحة انترنت - ، لكن بصراحة .. تقطيع التصميم بحد ذاته .. فنّ سهل صعب ! .. سهلٌ في تطبيقه .. وصعب في إحتياجه لتفكير عميق حتى يظهر بأجمل صورة وأكملها ! .. لاأطيل عليكم في المقدمة .. وأترككم مع هذا الدرس .
ثالثاً : قص الصورة التي نريد أن نحذفها ونضع في مكانها لوناً ؛ ليخف حجم الموقع .
الآن نقوم بقص الأماكن التي تحتوي على لون واحد .. لكي نقوم بحذفها [ فيما بعد ] ثم نقوم باستبدالها بلون مطابق للون الصورة التي حذفنها ، الآن عليك فقط قص الصورة التي تحتوي على لون واحد .. كما في الصورة التالية ( قمت بتوضيح الحدود باللون الأحمر ) :
رابعاً : قص الصورة التي نريد أن نحذفها ونضع مكانها صورة صغيرة تتمدد على كل الخلية ؛ ليخفّ حجم الموقع .
هذه بصراحة أصعب نقطة أواجهها في الشرح ! ، قم الآن بتحديد الصور التي ترى أنها يمكن أن تستبدل بصورة صغيرة [ فيما بعد ] .. لاأدري هل وضحت النقطة أم لا ! .. عموماً شاهدوا هذه الصورة المكبّرة :
وهذه صورة لكل الصور التي قمت بتحديدها في موقعي .. لأحذفها فيما بعد وأستبدلها بصورة صغيرة تتمدد على كامل الخلية ! :
الآن .. يجب عليك أن تتذكر الأماكن التي قمت بقصها لتمسحها وتضع مكانها صورة ً صغيرة تتمدد على كامل الخلية .. ثم بعد ذلك قم بإختيار هذه الأداة .. ثم قم بتحديد جزء صغير من الصورة .. كما في الصورة التالية :
ثم اضغط على Ctrl + C لنسخها ..
ثم أضغط على Ctrl + N لفتح ملف جديد ( واترك المقاس كما هو ) .
ثم اضغط على Ctrl + V للصق الصورة في الملف الجديد .. لتصبح مثل الصورة التالية :
ثم قم بحفظها في مجلد الصور images ..
File >> Save for Web
لكن أجعل إعدادات الحفظ كما في الصورة التالية ( سم الصورة بأي اسم تريد .. هنا اسميتها up ) :
هذه الصورة صغيرة الحجم .. وبإمكاننا إستخدامها لتخفيف حجم الموقع وزيادة سرعة تحميل الصفحة ! .. سندرس التفاصيل بعد قليل إن شاء الله ..
الآن عليك عمل مثل الذي عملنا قبل قليل ( قص صورة صغيرة ) مع كل الصور التي قمنا بتحديدها لنقوم بمسحها واستبدالها بصورة تتمدد على كل الخلية .. الصورة التالية توضح مناطق التمدد التي اقصدها :
الآن قم بفتح برنامج الفرونت بيج ( Microsoft Office FrontPage 2003 ) .. ثم قم بفتح صفحة Index التي حفظتها عن طريق الفوتوشوب قبل قليل ..
ثم قم بالضغط بالزر الأيمن على أي منطقة .. واختر ( خصائص الصفحة ) .. كما في الصورة التالية :
بهذا .. نكون قد انتهينا من الدرس الثالث بحمد الله .. أتمنى أن يكون الدرس وضجاً وبسيطاً عليكم .. وأعذروني على التقصير .. فقط أريد منكم الدعاء لي ولوالدي .
درس تصميم واجهة احترافية
النمط المتتابع
