منتديات ليلاس - دورة تصميم المواقع :الدرس الاول التصميم و التقطيع

مرحبا اعزائي

اليوم ان شاء الله سنتطرق للجانب "الجرافيكي" من الدورة

و بالنسبة لغير المتمكنين من برنامج الفوتوشوب من الممكن اعتماد تصاميم بسيطة او استعمال السكرابز

مثل ما ذكرت سابقا سنقوم باعتماد مقاس عرض 800 بيكسل لتصميم موقعنا و ترك الحرية لكم في اختيار الطول المناسب لتصميمكم على أن لا يقل عن 600 بيكسل. و سنقوم بتصميم صفحتين على الفوتوشوب كي نتعلم اكبر قدر ممكن من التقنيات (من الممكن فيما بعد استخدام صفحة فقط لكامل الموقع).

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

و بالأسفل الفوتر و يكون تصميمه مستوحى من تصميم الهيدر و لكن بشكل أكثر بساطة و نكتب فيه توقيعنا

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

و على الجانب يوجد بنرات صغيرة للروابط التي تنقلنا للصفحات الفرعية لموقعنا

و قمت بترك مساحة فارغة بين الإطار و الهيدر لنتعلم فيما بعد كيفية اضافة الشريط المتحرك

التصميم الثاني متماثل مع الأول حيث سيحتوي على هيدر و فوتر بينما المنطقة الوسطى تكون خالية من أية إضافات لأنها المنطقة التي سيتم فيها إضافة محتوى الموقع (منطقة تمدد) لذلك قمت بتحويل البنرات إلى أسفل الهيدر( مقاسات التصميم 800 بيكسل عرضا على 600 بيكسل للطول)

بعد الانتهاء من التصميم علينا تحويل هذه الصور الى صفحات ويب عن طريق أداة التقطيع و بعد التقطيع سنقوم بتسجيل الصفحة كصفحة ويب مع ملف للصور المقطعة عن طريق الخيار

File---> Save for web

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

و في الأخير سنقوم بتسجيل صفحتنا بصيغة هتمل و صور في ملف أعددناه خصيصا ليحتوي صفحات موقعنا و ستكون نتيجة عملنا صفحتي ويب مع ملف واحد للصور

الدرس المصور

http://images.imagehotel.net/uewarlnis9_tn.jpg

فيديوات التقطيع

4shared.com - online file sharing and storage - download slicing.rar

نتيجة تقطيع التصميم الأول

http://images.imagehotel.net/gn43oojm4l_tn.jpg

نتيجة تقطيع التصميم الثاني

http://images.imagehotel.net/u265sxlrd2_tn.jpg

بالتوفيق :flowers2: :flowers2:

.