تعال تعلم تصميم موقع بالفوتو شوب ارجوا التثبيت

[HaMaDa-AlKaBeTh]

السلام عليكم و رحمة الله و بركاته

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

في البدايه : نفتح صفحه جديده بمقاس 778×584
و بخلفية بيضاء كهذه

http://www.alamuae.com/dros/images/172/ward-1102416952.gif


لتحري الدقه و ترتيب العمل , سنقوم باضافة grid للعمل

و هذا سيساعدنا لتحديد المساحه التي نريدها من خلال المربعات التي ستظهر في ساحة العمل


http://www.alamuae.com/dros/images/172/ward-1102417111.gif

سنضيف طبقة جديدة و سنحدد ثلاث مربعات من اسفل التصميم و سنصبغة باللون الازرق

استخدمنا هذا الكود : 356AC8


http://www.alamuae.com/dros/images/172/ward-1102417155.gif


سنقوم باضافة طبقة جديده للعمل و سنحدد 9 مربعات من اعلى الصفحه
و نقوم باستخدام اداة التدرج بصبغ هذه القسم



http://www.alamuae.com/dros/images/172/ward-1102417212.gif



مره اخرى نضيف طبقة جديده للعمل و نحدد مربع و نصف فقط

ثم نصبغة بنفس الكود السابق

356AC8

: , ثم نضيف له ظل من خلال blending options


http://www.alamuae.com/dros/images/172/ward-1102417212.gif


single row marquee tool سنختار اداة
و سنضع له stroke ابيض
بمقدار ( 1 بيكسل )



http://www.alamuae.com/dros/images/172/ward-1102417265.gif


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



http://www.alamuae.com/dros/images/172/ward-1102417547.gif



ثم نضيف له تاثير الظل بهذه الاعدادات المبينه هنا


http://www.alamuae.com/dros/images/172/ward-1102417732.gif


من المفترض ان نحصل في هذه المرحلة على شي كهذا


http://www.alamuae.com/dros/images/172/ward-1102417952.gif
بعد ان حصلنا على واجهة مبدئية بسيطه , بنضيف طبقه جديده للعمل , ثم باستخدام الفرشاه راح نرسم نقط متباعده على الشريط الازرار البرتقالي

ثم نختار اداة التحديد المربع و بنرسم خط رفيع باللون البني هكذا

http://www.alamuae.com/dros/images/172/ward-1102418244.gif


نضيف طبقة جديده للعمل و نرسم شكل بيضاوي مثل هذا و نضع له ستروك ابيض بمقدار 1 بيكسل فقط



http://www.alamuae.com/dros/images/172/ward-1102418364.gif

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

الى ان نحصل على شي كهذا


http://www.alamuae.com/dros/images/172/ward-1102418430.gif

و في اخر مرحله قمت باضافة بعض شكال الشيبز المتوفره في الفوتوشوب و اضفت سلة ورود في اسفل العمل




نقوم باضافة الكتابة و النصوص البسيطه

http://www.alamuae.com/dros/images/172/ward-1102418855.gif

لعمل التقطيع يجب ان يكون الرولر ظاهر

ان لم يكن موجودا , نضغط على ctrl+r

ثم من نقوم بتنزيل خطوط زرقاء وهميه من الاعلى و اليمين , نحدد بها المناطق التي تحتاج لتقطيع

كمناطق الكتابة و الازرار

ثم نختار اداة السكين slice tool
ثم نضغط على الزر المبين للاعلى

http://www.alamuae.com/dros/images/172/ward-1102419027.gif



نستطيع اضافة المزيد من التقطيع باستخدام اداة السكين ايضا


سكون لدينا شكل مقطع كهذا تقريبا






ثم نقوم بحطفة عن طريق save for ***
و بعد اختيار الصيغة , نختار ان يكون الحفظ html +images



بعدها يجب عمل بعض التعديلات للعمل عن طريق الفرونت بيج


, ثم يتم رفع الصفحه للنت

هنا نكون انتهينا من الشرح , اتمنى اكون افدتكم


في النهاية اقدم ملف المفتوح للعمل

ward-1091811855.zip (http://www.zshare.net/download/ward-1091811855-zip.html)


لاتنسونا من خالص الدعاء
الردود

[Hak Baghdad]

مشكور وردة وعاشت ايدك

[ليله بكا فيها القمر]

الف شكر ورده

[HaMaDa-AlKaBeTh]

مشكوووووووووورين على المرور

[عزيزي عزوز]

عاشت ايدك على المجهود الطيب ومشكور


http://www.r44r.net/uploads/d19e4afa47.jpg

[HaMaDa-AlKaBeTh]

مشكورين على المرور ان شاء الله ماهو جديد ومفيد

[اهات الرسام]

مشكووووووور تسلم ايديك

[DJ-Amar]

مشكوووووووووووووووووووووووور حماده

[DJ-Amar]

تـــــــــــــــم الــتــثــبــيــت

[ღ؟ღعـمـوري الخـبـيـثღ؟ღ]

شكرا حمادة

[.:LORD:.]

عاشت ايدك حياتي بس لو مخلي حقوق النشر يعني اسمك واسم المنتدى لان ابشرك هسه تلكي بكل المنتديات نتشر

[Ramy-Aliraqi]

مشكووووووووور

[ابو الليل]

شكراااااااااااااااااااااااااااااااااااا

[عزيزي عزوز]

عاشت ايدك مبدع

[IBRAHIM-HUMAX]

مشكور حبيبي عل شرح
وهذا تطبيقي
وشرح جدا مفيد بس الحقيقة ما ذاكر طريقى الوضوح يعني عل شاشة واني لمن سويتة عل موقع طلع اعوج وياريت تعدلة حبي او تزيدة
شوف الصورة وبعدين ادز الموقع تشوفة عل موقع بعد التعديل
http://www3.0zz0.com/2007/10/31/18/70431412.jpg
http://www3.0zz0.com/2007/10/31/18/70431412.jpg
ان شاء الله يعجبكم وشكرا
الحقيقة اني اسوي احسن من هذا بس حبيت اسوي تطبيق على شرحك الوفي وشكرا

[°o.O (مجرد احساس) O.o°]

شكرا الموضوع جدا جميل
واتمنى لك التوفيق
تقبل مروري

[أنومي]

كس خواتكم

[دالي]

عاشت ايدك على المجهود الطيب ومشكور

[على امين]

عاشت اناملك على الطرح الرائع

[Demolition Man]

حلو كلش عاشت ايدك