تصميم واجهة موقع احترافي بالفوتوشوب ... خطييييييييييير...

[sara_a]

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

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

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


http://atsharing.com/vb/images/statusicon/wol_error.gifهذه الصورة تم تصغيرها تلقائيا . إضغط على هذا الشريط هنا لعرض الصورة بكامل حجمها . أبعاد الصورة الأصلية 538x310 وحجمها 12 كيلو بايت .
http://www.alamuae.com/dros/images/172/ward-1102416952.gif

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

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


http://atsharing.com/vb/images/statusicon/wol_error.gifهذه الصورة تم تصغيرها تلقائيا . إضغط على هذا الشريط هنا لعرض الصورة بكامل حجمها . أبعاد الصورة الأصلية 538x310 وحجمها 22 كيلو بايت .
http://www.alamuae.com/dros/images/172/ward-1102417111.gif

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

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


http://atsharing.com/vb/images/statusicon/wol_error.gifهذه الصورة تم تصغيرها تلقائيا . إضغط على هذا الشريط هنا لعرض الصورة بكامل حجمها . أبعاد الصورة الأصلية 470x242 وحجمها 11 كيلو بايت .
http://www.alamuae.com/dros/images/172/ward-1102417155.gif

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

و نقوم باستخدام اداة التدرج بصبغ هذه القسم


http://atsharing.com/vb/images/statusicon/wol_error.gifهذه الصورة تم تصغيرها تلقائيا . إضغط على هذا الشريط هنا لعرض الصورة بكامل حجمها . أبعاد الصورة الأصلية 514x302 وحجمها 31 كيلو بايت .
http://www.alamuae.com/dros/images/172/ward-1102417212.gif

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

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

356AC8

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


http://atsharing.com/vb/images/statusicon/wol_error.gifإضغط على هذا الشريط هنا لعرض الصورة بكامل حجمها .


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

single row marquee tool سنختار اداة

و سنضع له stroke ابيض

بمقدار ( 1 بيكسل )

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

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

الابيض و البرتقالي


http://atsharing.com/vb/images/statusicon/wol_error.gifإضغط على هذا الشريط هنا لعرض الصورة بكامل حجمها .
http://www.alamuae.com/dros/images/172/ward-1102417547.gif

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


http://atsharing.com/vb/images/statusicon/wol_error.gifإضغط على هذا الشريط هنا لعرض الصورة بكامل حجمها .
http://www.alamuae.com/dros/images/172/ward-1102417732.gif

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


http://atsharing.com/vb/images/statusicon/wol_error.gifهذه الصورة تم تصغيرها تلقائيا . إضغط على هذا الشريط هنا لعرض الصورة بكامل حجمها . أبعاد الصورة الأصلية 778x584 وحجمها 14 كيلو بايت .
http://www.alamuae.com/dros/images/172/ward-1102417952.gif

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

على الشريط الازرار البرتقالي

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


http://atsharing.com/vb/images/statusicon/wol_error.gifهذه الصورة تم تصغيرها تلقائيا . إضغط على هذا الشريط هنا لعرض الصورة بكامل حجمها . أبعاد الصورة الأصلية 496x340 وحجمها 17 كيلو بايت .
http://www.alamuae.com/dros/images/172/ward-1102418244.gif

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


http://atsharing.com/vb/images/statusicon/wol_error.gifإضغط على هذا الشريط هنا لعرض الصورة بكامل حجمها .
http://www.alamuae.com/dros/images/172/ward-1102418364.gif

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

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


http://atsharing.com/vb/images/statusicon/wol_error.gifهذه الصورة تم تصغيرها تلقائيا . إضغط على هذا الشريط هنا لعرض الصورة بكامل حجمها . أبعاد الصورة الأصلية 778x156 وحجمها 15 كيلو بايت .
http://www.alamuae.com/dros/images/172/ward-1102418430.gif

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


http://atsharing.com/vb/images/statusicon/wol_error.gifهذه الصورة تم تصغيرها تلقائيا . إضغط على هذا الشريط هنا لعرض الصورة بكامل حجمها . أبعاد الصورة الأصلية 778x584 وحجمها 49 كيلو بايت .
http://www.alamuae.com/dros/images/172/ward-1102418527.gif

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


http://atsharing.com/vb/images/statusicon/wol_error.gifهذه الصورة تم تصغيرها تلقائيا . إضغط على هذا الشريط هنا لعرض الصورة بكامل حجمها . أبعاد الصورة الأصلية 778x584 وحجمها 55 كيلو بايت .
http://www.alamuae.com/dros/images/172/ward-1102418855.gif

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

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

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

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

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

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

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

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

ثم نختار اداة السكين slice tool

ثم نضغط على الزر المبين للاعلى

http://atsharing.com/vb/images/statusicon/wol_error.gifإضغط على هذا الشريط هنا لعرض الصورة بكامل حجمها .http://www.alamuae.com/dros/images/172/ward-1102419027.gif

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

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

http://atsharing.com/vb/images/statusicon/wol_error.gifهذه الصورة تم تصغيرها تلقائيا . إضغط على هذا الشريط هنا لعرض الصورة بكامل حجمها . أبعاد الصورة الأصلية 767x592 وحجمها 67 كيلو بايت .http://www.alamuae.com/dros/images/172/ward-1102419139.gif

ثم نقوم بحطفة عن طريق save for web

و بعد اختيار الصيغة , نختار ان يكون الحفظ html +images

http://atsharing.com/vb/images/statusicon/wol_error.gifهذه الصورة تم تصغيرها تلقائيا . إضغط على هذا الشريط هنا لعرض الصورة بكامل حجمها . أبعاد الصورة الأصلية 582x133 وحجمها 6 كيلو بايت .http://www.alamuae.com/dros/images/172/ward-1102419303.gif

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

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

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


http://atsharing.com/vb/images/icons/21.gif تحياتيhttp://atsharing.com/vb/images/icons/21.gif

[خالدf15]

مشكورهـ أختي الغاليـه ساره

مجهـود رائـع منكي كل الشكـر لكي عليـه

دمتي لنا بـ كل ما هو جديد

[aminossss]

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

[-ECKO-]

الله يبارك فيك

[man utd]

مشكورة اختي سارة
درس جميل جدا
ننتظر جديدك

[sara_a]

شكرا جميعا للمرور والردود

[egysamba]

إيه الحجات الجامدة دى

أيوة كدا هى دى دروس سارة

تسلم إيدك ياباشا

تحياتى لك

[lavender]

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