القسم ->

المجموعة: دروس عربية

نشر في الإثنين, 18 يوليو 2011 02:38

كتب بواسطة أيمن السيد محمود

الزيارات: 411

تقييم المستخدم

من الفوتوشوب الى html + css

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

- عمود يمين
- ومحتويات الموقع ستأخذ العمود اليسار وهو العمود الأعرض ومعه الفوتر

الجزء الثانى : التصميم على الفوتوشوب

هناك عدة طرق لاخراج التصميم من الفوتوشوب حتى يصبح صفحة انترنت وأقدم هذه الطرق هو تقطيع الصفحة بأداة الـ Slice Tool لكنها طريقة قديمة ومعقدة وتعقيدها ليس خاصا بأسلوب التقطيع فقط بل يمتد إلى طريقة قراءة المستعرضات لصفحتك وفهمها الفهم الصحيح ، فمجرد أنك تقوم بصناعة جدول table ليس بالشيئ المفيد عمليا بالنسبة لمستعرضات الويب الحديثة اللتى تتطور كل ساعة ،
ولن أطيل النفس فى شرح أن الويب المقسم div المدعم بـ id أو class هو الاسلوب العصرى المتوافق مع جميع المستعرضات
دورتنا هنا تعتمد اعتمادا كليا على طريقة الويب المقسم فلنتوكل على الله ونتعرف سويا على كيفية بناء هذه الصفحة وسأقوم هنا بوضع أساسيات العمل
1. سيكون مقاس صفحتنا 950 بكسل عرض حيث أن معظم صفحات الانترنت الحالية الحديثة تأخذ مقاسات من 950 الى 970
2. لن أضطر لاستخدام كامل الصفحة اللتى سنصممها حيث أننا لن نستخدم كل هذا العمل فيما بعد بل سنستخدم فقط ما يلزمنا من الجرافيك من خلال الفوتوشوب فسنقوم بتصميم البانر وبقية الصور المستخدمة فقط ...
بعضنا فى هذه الدورة سيقع فى مشاكل عديدة تخص المقاسات لذا سأقوم سريعا بتصميم كامل الصفحة فى الفوتوشوب
3. تحميل ما يلزمنا من أيقونات أو تصاميم خارجية مساعدة ولذلك عدة طرق منها عن طريق Google Images وعن طريق موقع Icon Finder فالايقونات اللتى استخدمتها قمت بتحميلها من موقع www.iconfinder.net/browse يمكنك الدخول على الموقع والبحث فيه – بالنسبة لايقونة علامة الاستفهام قمت بجلبها من صور جوجل عن طريق البحث عن كلمة question (www.google.com.eg/images?q=question )، بقية الصور من عندى وهى موجودة مع ملفات العمل...
4. المحتوى التجريبى – هو محتوى لملأ فراغات الصفحة ويمكنك تحميله ونسخه دائما من هنا www.real-idea.net/content.txt

فلنبدأ التصميم

- افتح ملف عمل جديد فى الفوتوشوب بمقاس 950 بكسل عرض x 1300 بكسل ارتفاع (يمكن تغيير الارتفاع)
- قم باختيار أداة الـ Rectangle Shape Tool لعمل البانر

وسنرسم البانر بمقاساته 950 بكسل فى 176 بكسل ، كيف ذلك ؟
عند اختيارك أداة Rectangle Shape Tool كما بالشكل السابق أو الضغط على حرف U من الكيبورد مباشرة سيظهر لنا شريط أدوات داخلى خاص برسم الأشكال ومكانه بالاعلى سنختار Rectangle Options لنكتب مقاسات الرسم كما بالصورة التالية

ثم املأ هذا الشكل بتدرج لونى Gradient من الاعلى بالكود اللونى 7bbcff ومن الأسفل بالكود اللونى b9e5f4

ثم اختر الفرشاة لنرسم شكلا مثل التفريعات الزهرية مثلا أو أى شكل نريده

ثم من الناحية الأخرى مثل ذلك

قم الان بتحضير أيقوناتك لوضعها فوق التصميم بشكل مناسب

انتهينا الآن من رسم البانر كما يجب
- نقوم الآن برسم القوائم الرئيسية بنفس الطريقة بأداة Rectangle Shape Tool لكن بعد ظبط اعداداتها السابقة لكى تكون بارتفاع 30 بكسل فقط بدلا من 176 بكسل

- هذا الجزء ليس له معطيات الا وصف موجز وهو أننا سنقوم الآن بوضع علامة الاستفهام على اليمين والصورة على اليسار، وبالمختصر فالصور ارتفاعها 213 بكسل

- بأداة الـ Rectangle Shape Tool بعد ظبط اعداداتها للاعدادات الافتراضية قم بصنع خمس نسخ كرؤوس عناوين فى العمود الأيمن، ويكون نسبة التباعد بينهم متشابهة.. يمكنك استخدام أداة Ruler Tool لقياس المسافة بينهم

- سنقوم الآن بعمل العمود الأيسر وسنبدأ بالقائمة الثانية وهى تعتبر قوائم داخلية للموقع وسنستخدم لها نفس الاداة السابقة بعد تظبيط اعداداتها ليكون مقاس ال shape عرض 610 بكسل وارتفاع 43 بكسل

- سنقوم الآن بوضع وترتيب الصور المعبرة عن منتجات الشركة مثلا أو عروض أو ما شابه ، الصورة موجودة فى ملف العمل كما يمكنك أن تضع صورة مناسبة من أى مكان..، تذكر فقط أن أحجام مجموعة الصور هنا هو 175 بكسل عرض فى 200 بكسل ارتفاع والحجم هنا مهم لكن تغييره بأصغر أو أكبر لن يشتتنا أو يبعدنا عن التصميم ، فقط سنقوم بتصغير المسافة اللتى تبعد كل صورة عن الأخريات على حسب حجم الصورة نفسها وسنتعرض لذلك فى مرحلة صنع ملف الـ css ..