درس رائع لتصميم واجهة موقع فى برنامج فوتوشوب

[abohmam]

بسم الله الرحمن الرحيم

الحمدلله والصلاة والسلام على رسول الله وعلى آله وصحبه أجمعين

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

طريقة تصميم واجهة موقع .... شرح سابق ولكنه فعلا رائعة ومميز

وقد وضعت لكم الملف مفتوح فى المرفقات بصيغة PSD الفوتوشوب للتعديل عليه كما تريدون

:bar:
.....
..
بسم الله نبدا : نفتح صفحه جديده بمقاس

778×584
و بخلفية بيضاء كهذه

http://www.abc4web.net/upload/images/386_tempalet_01.gif (http://www.abc4web.net/upload/view-386_tempalet_01.gif)

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

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

http://www.abc4web.net/upload/images/623_tempalet_02.gif (http://www.abc4web.net/upload/view-623_tempalet_02.gif)

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

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

http://www.abc4web.net/upload/images/756_tempalet_03.gif (http://www.abc4web.net/upload/view-756_tempalet_03.gif)

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

http://www.abc4web.net/upload/images/489_tempalet_04a.gif (http://www.abc4web.net/upload/view-489_tempalet_04a.gif)

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

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

356AC8

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

http://www.abc4web.net/upload/images/854_tempalet_04.gif (http://www.abc4web.net/upload/view-854_tempalet_04.gif)

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

http://www.abc4web.net/upload/images/226_tempalet_05.gif (http://www.abc4web.net/upload/view-226_tempalet_05.gif)

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

http://www.abc4web.net/upload/images/612_tempalet_06.gif (http://www.abc4web.net/upload/view-612_tempalet_06.gif)

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

http://www.abc4web.net/upload/images/313_tempalet_07.gif (http://www.abc4web.net/upload/view-313_tempalet_07.gif)

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

http://www.abc4web.net/upload/images/399_tempalet_08.gif (http://www.abc4web.net/upload/view-399_tempalet_08.gif)

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

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

http://www.abc4web.net/upload/images/793_tempalet_09.gif (http://www.abc4web.net/upload/view-793_tempalet_09.gif)

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

http://www.abc4web.net/upload/images/201_tempalet_10.gif (http://www.abc4web.net/upload/view-201_tempalet_10.gif)

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

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

http://www.abc4web.net/upload/images/203_tempalet_11.gif (http://www.abc4web.net/upload/view-203_tempalet_11.gif)

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

http://www.abc4web.net/upload/images/975_tempalet_12.gif (http://www.abc4web.net/upload/view-975_tempalet_12.gif)

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

http://www.abc4web.net/upload/images/716_tempalet_13.gif (http://www.abc4web.net/upload/view-716_tempalet_13.gif)

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

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

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

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

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

http://www.abc4web.net/upload/images/378_tempalet_14.gif (http://www.abc4web.net/upload/view-378_tempalet_14.gif)

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

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

http://www.abc4web.net/upload/images/981_tempalet_15.gif (http://www.abc4web.net/upload/view-981_tempalet_15.gif)

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

http://www.abc4web.net/upload/images/353_tempalet_16.gif (http://www.abc4web.net/upload/view-353_tempalet_16.gif)

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

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

هنا نكون انتهينا من الشرح
أتمنى لكم الفائدة

ولاتنسونا من صالح دعائكم
أبوهمام
.
.

[أبو يوسف]

جزاك الله خيرا وبارك الله فيك اخي ابو همام

.

[جروح بارده]

جزاك الله خيرا

والله يعطيك العافية

[ريوم قطر]

جزاك الله الف خير كان عندي استفسار اخوي انا لما اسوي الواجهة بنفس المقاسات الي قلت وافتحها تطلع الصورهصغيره ولما احطها في نافدة اكبر تطلع مو بواضحه نفس لما تسوي زوم على الصوره استفساري هو هل هذي هي مقاسات تنفع اسوي بها صفحة اندكس حق موقع ولا لازم تكون اكبر وسؤالي على دمج الصور في الفوتوشوب حصلتله الجواب بما اني استعمل cs2 لو ابي ادمج صورة لازم اسوي ctrl+alt+g حبيت احطه للافادة :abc_022:

[جروح بارده]

http://www.dala3.ateiba.com/uploads/images/ateiba-434ff48154.gif


http://img244.imageshack.us/img244/4686/26522949kz6bd9.gif

[كينج نت]

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

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

[أبو أيهم]

بسم الله الرحمن الرحيم


شكرا جدا ابا همام


هل يوجد شرح لبرنامج فرونت بيج لعمل المواقع

[أبو أيهم]

يعطيك الف عافية ابو همام ويخلف عليك درس رائع وشيق

[رومان]

الله يطول بعمرك ويحفضك وتنال امنياتك درس رائع

[سالي الفلسطينية]

شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

[محمود عفيفى]

ما شاء الله روعه
تم التحميل وجارى ....
:abc_152:

[محمود عفيفى]

جزاك الله خيرا
تطبيقى

http://img242.imageshack.us/img242/3468/dsdswd.png

[محمد العنزي]

مشكور الشرح وفوق الممتاز واستفدنا منه كثير ..
انا عندي مشكلة في الاخير بعد ما اصمم الواجهة في الفوتوشوب واقطعها وارسلها لفرنت بيج واعدل عليها
وارسلها للشبكة تطلع الواجهة مقطعه واتمنى الاقي الحل هنا
وهذا مثال للواجهة www.dmrm.hostaim.com وشكرا

[abohmam]

حياكم الله جميعا

أشكر لكم مروركم وتواجدكم العطر
تطبيق رائع أخى محمود تسلم الأيادى

مشكور الشرح وفوق الممتاز واستفدنا منه كثير ..
انا عندي مشكلة في الاخير بعد ما اصمم الواجهة في الفوتوشوب واقطعها وارسلها لفرنت بيج واعدل عليها
وارسلها للشبكة تطلع الواجهة مقطعه واتمنى الاقي الحل هنا
وهذا مثال للواجهة www.dmrm.hostaim.com وشكرا

تمت الإجابة أخى فى مشاركتك الخاصة

موفق بإذن الله ... لك مني أجمل تحية .

[مغترب]

السلام عليكم ورحمة الله وبركاته
شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

[أبو الوليد]

جزاك المولى خيرا وبارك فيك :abc_022: درس احترافي ..استفدت منه كثيرا

[ايمن سالم]

جزاك الله كل خير اخي ابوهمام
شرح اكثر من رائع:abc_152:

[ashrafhisham]

الف الف شكر وبارك الله فيك اخي الكريم

[امير محمد]

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

[المدار الأخير]

شكـــــــــــــــــــــــ ـــــــــــــــــــــــــ ــــــــــراااً

[المدار الأخير]

شكرااااااا لكـــــــــ . إلى الأمام ...
.

[القصيبي]

السلام عليكم ورحمة الله وبركاته شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

[أميرال النوفل]

يعطيك عافية يالغالي

[علي حمدان]

شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

[الكشفي]

شكرا لك على الموضوع الجميل :abc_152:

[عبد حميد]

شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

[هاخد شئ وخارج]

لو سمحت عايزين الواجهه كامله للتركيب على لاشبكه نرجو ارفاقها

[الليبى]

جزاك الله خيرا

[ذ عبد الرحيم]

Jazaka Allaho bikol khayr