FREEDOM
2006-12-21, 02:46 PM
السلام عليكم و رحمة الله و بركاته
من خلال هذا الدرس بنتعلم كيف نصمم واجهة موقع بسيطه و مرتبه
في البدايه : نفتح صفحه جديده بمقاس 778×584
و بخلفية بيضاء كهذه
الرابط لايظهر فى الأرشيف
لتحري الدقه و ترتيب العمل , سنقوم باضافة grid للعمل
و هذا سيساعدنا لتحديد المساحه التي نريدها من خلال المربعات التي ستظهر في ساحة العمل
الرابط لايظهر فى الأرشيف
سنضيف طبقة جديدة و سنحدد ثلاث مربعات من اسفل التصميم و سنصبغة باللون الازرق
استخدمنا هذا الكود : 356AC8
الرابط لايظهر فى الأرشيف
سنقوم باضافة طبقة جديده للعمل و سنحدد 9 مربعات من اعلى الصفحه
و نقوم باستخدام اداة التدرج بصبغ هذه القسم
الرابط لايظهر فى الأرشيف
مره اخرى نضيف طبقة جديده للعمل و نحدد مربع و نصف فقط
ثم نصبغة بنفس الكود السابق
356AC8
: , ثم نضيف له ظل من خلال blending options
الرابط لايظهر فى الأرشيف
single row marquee tool سنختار اداة
و سنضع له stroke ابيض
بمقدار ( 1 بيكسل )
الرابط لايظهر فى الأرشيف
سنقوم باضافة طبقة اخرى للعمل و سنحدد مربععين و نصف و نصبغة بالتدرج المبين هنا
الابيض و البرتقالي
الرابط لايظهر فى الأرشيف
ثم نضيف له تاثير الظل بهذه الاعدادات المبينه هنا
الرابط لايظهر فى الأرشيف
من المفترض ان نحصل في هذه المرحلة على شي كهذا
الرابط لايظهر فى الأرشيف
بعد ان حصلنا على واجهة مبدئية بسيطه , بنضيف طبقه جديده للعمل , ثم باستخدام الفرشاه راح نرسم نقط متباعده على الشريط الازرار البرتقالي
ثم نختار اداة التحديد المربع و بنرسم خط رفيع باللون البني هكذا
الرابط لايظهر فى الأرشيف
نضيف طبقة جديده للعمل و نرسم شكل بيضاوي مثل هذا و نضع له ستروك ابيض بمقدار 1 بيكسل فقط
الرابط لايظهر فى الأرشيف
نقوم بتقطيع الشكل و مسح اطرافها باستخدام المساحه متدرجة الاطراف
الى ان نحصل على شي كهذا
الرابط لايظهر فى الأرشيف
و في اخر مرحله قمت باضافة بعض شكال الشيبز المتوفره في الفوتوشوب و اضفت سلة ورود في اسفل العمل
الرابط لايظهر فى الأرشيف
نقوم باضافة الكتابة و النصوص البسيطه
الرابط لايظهر فى الأرشيف
لعمل التقطيع يجب ان يكون الرولر ظاهر
ان لم يكن موجودا , نضغط على ctrl+r
ثم من نقوم بتنزيل خطوط زرقاء وهميه من الاعلى و اليمين , نحدد بها المناطق التي تحتاج لتقطيع
كمناطق الكتابة و الازرار
ثم نختار اداة السكين slice tool
ثم نضغط على الزر المبين للاعلى
الرابط لايظهر فى الأرشيف
نستطيع اضافة المزيد من التقطيع باستخدام اداة السكين ايضا
سكون لدينا شكل مقطع كهذا تقريبا
الرابط لايظهر فى الأرشيف
ثم نقوم بحطفة عن طريق save for web
و بعد اختيار الصيغة , نختار ان يكون الحفظ html +images
الرابط لايظهر فى الأرشيف
بعدها يجب عمل بعض التعديلات للعمل عن طريق الفرونت بيج
, ثم يتم رفع الصفحه للنت
هنا نكون انتهينا من الشرح , اتمنى اكون افدتكم
في النهاية اقدم ملف المفتوح للعمل
ward-1091811855.zip (الرابط لايظهر فى الأرشيف)
من خلال هذا الدرس بنتعلم كيف نصمم واجهة موقع بسيطه و مرتبه
في البدايه : نفتح صفحه جديده بمقاس 778×584
و بخلفية بيضاء كهذه
الرابط لايظهر فى الأرشيف
لتحري الدقه و ترتيب العمل , سنقوم باضافة grid للعمل
و هذا سيساعدنا لتحديد المساحه التي نريدها من خلال المربعات التي ستظهر في ساحة العمل
الرابط لايظهر فى الأرشيف
سنضيف طبقة جديدة و سنحدد ثلاث مربعات من اسفل التصميم و سنصبغة باللون الازرق
استخدمنا هذا الكود : 356AC8
الرابط لايظهر فى الأرشيف
سنقوم باضافة طبقة جديده للعمل و سنحدد 9 مربعات من اعلى الصفحه
و نقوم باستخدام اداة التدرج بصبغ هذه القسم
الرابط لايظهر فى الأرشيف
مره اخرى نضيف طبقة جديده للعمل و نحدد مربع و نصف فقط
ثم نصبغة بنفس الكود السابق
356AC8
: , ثم نضيف له ظل من خلال blending options
الرابط لايظهر فى الأرشيف
single row marquee tool سنختار اداة
و سنضع له stroke ابيض
بمقدار ( 1 بيكسل )
الرابط لايظهر فى الأرشيف
سنقوم باضافة طبقة اخرى للعمل و سنحدد مربععين و نصف و نصبغة بالتدرج المبين هنا
الابيض و البرتقالي
الرابط لايظهر فى الأرشيف
ثم نضيف له تاثير الظل بهذه الاعدادات المبينه هنا
الرابط لايظهر فى الأرشيف
من المفترض ان نحصل في هذه المرحلة على شي كهذا
الرابط لايظهر فى الأرشيف
بعد ان حصلنا على واجهة مبدئية بسيطه , بنضيف طبقه جديده للعمل , ثم باستخدام الفرشاه راح نرسم نقط متباعده على الشريط الازرار البرتقالي
ثم نختار اداة التحديد المربع و بنرسم خط رفيع باللون البني هكذا
الرابط لايظهر فى الأرشيف
نضيف طبقة جديده للعمل و نرسم شكل بيضاوي مثل هذا و نضع له ستروك ابيض بمقدار 1 بيكسل فقط
الرابط لايظهر فى الأرشيف
نقوم بتقطيع الشكل و مسح اطرافها باستخدام المساحه متدرجة الاطراف
الى ان نحصل على شي كهذا
الرابط لايظهر فى الأرشيف
و في اخر مرحله قمت باضافة بعض شكال الشيبز المتوفره في الفوتوشوب و اضفت سلة ورود في اسفل العمل
الرابط لايظهر فى الأرشيف
نقوم باضافة الكتابة و النصوص البسيطه
الرابط لايظهر فى الأرشيف
لعمل التقطيع يجب ان يكون الرولر ظاهر
ان لم يكن موجودا , نضغط على ctrl+r
ثم من نقوم بتنزيل خطوط زرقاء وهميه من الاعلى و اليمين , نحدد بها المناطق التي تحتاج لتقطيع
كمناطق الكتابة و الازرار
ثم نختار اداة السكين slice tool
ثم نضغط على الزر المبين للاعلى
الرابط لايظهر فى الأرشيف
نستطيع اضافة المزيد من التقطيع باستخدام اداة السكين ايضا
سكون لدينا شكل مقطع كهذا تقريبا
الرابط لايظهر فى الأرشيف
ثم نقوم بحطفة عن طريق save for web
و بعد اختيار الصيغة , نختار ان يكون الحفظ html +images
الرابط لايظهر فى الأرشيف
بعدها يجب عمل بعض التعديلات للعمل عن طريق الفرونت بيج
, ثم يتم رفع الصفحه للنت
هنا نكون انتهينا من الشرح , اتمنى اكون افدتكم
في النهاية اقدم ملف المفتوح للعمل
ward-1091811855.zip (الرابط لايظهر فى الأرشيف)