منتديات المسلم
هل تريد التفاعل مع هذه المساهمة؟ كل ما عليك هو إنشاء حساب جديد ببضع خطوات أو تسجيل الدخول للمتابعة.



 
الرئيسيةالبوابةأحدث الصورالتسجيلدخول

 

 طريقة تصميم واجهة موقع بإستخدام الفوتوشوب

اذهب الى الأسفل 
كاتب الموضوعرسالة
عبدالله




عدد الرسائل : 603
تاريخ التسجيل : 14/09/2006

طريقة تصميم واجهة موقع بإستخدام الفوتوشوب Empty
مُساهمةموضوع: طريقة تصميم واجهة موقع بإستخدام الفوتوشوب   طريقة تصميم واجهة موقع بإستخدام الفوتوشوب Emptyالأحد 8 أكتوبر - 11:42

طريقة تصميم واجهة موقع بإستخدام الفوتوشوب

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

الأن الطريقة:-
اولا إفتح عمل جديد بالقياسات التالية :-
طريقة تصميم واجهة موقع بإستخدام الفوتوشوب 1

وختار اللون الذي تريده وادهن بهن اللوحة (انا اخترت الازرق الفاتح)

الأن اختر لوناُ افتح او اغمق من السابق

واصنع مسطيلا كما بالشكل (لاتنسى ضعه بالير جديد)

http://www.alfarh.com/up/ar/tasmemwajha/2.gif

الأن نذهب الى اللير ونختار strok لعمل تحديد له (كماب الصورة)

طريقة تصميم واجهة موقع بإستخدام الفوتوشوب 3

وضع هذه الخيارات (كمابالصورة)

طريقة تصميم واجهة موقع بإستخدام الفوتوشوب 4


الأن لعمل خيال لها نذهب الى drop shado (كما بالضورة) ونضع الإعدات التي بالصورة

طريقة تصميم واجهة موقع بإستخدام الفوتوشوب 5

لينتج لنا أخيرا هذا الشكل
http://www.alfarh.com/up/ar/tasmemwajha/6.gif
الجزء السفلي نفس الطريقة لكن لاتنسى السفلي في لير والعلوي في لير اخر


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




عدد الرسائل : 603
تاريخ التسجيل : 14/09/2006

طريقة تصميم واجهة موقع بإستخدام الفوتوشوب Empty
مُساهمةموضوع: رد: طريقة تصميم واجهة موقع بإستخدام الفوتوشوب   طريقة تصميم واجهة موقع بإستخدام الفوتوشوب Emptyالأحد 8 أكتوبر - 11:44

طريقة تصميم الأعمدة

الأن طريقة تصميم الأعمد

في لير جديد مد عمود له نفس لون المستطيل من احدى الجواني (كما بالصورة)

قم بتغيير اداة الدهن الى الاداة المحددة

طريقة تصميم واجهة موقع بإستخدام الفوتوشوب 8

وقم بالتحديد على على العمود الذي قمت بعملة بطريقة افقية لينتج لك

طريقة تصميم واجهة موقع بإستخدام الفوتوشوب 7


الأن لنقم بعمل له حدود ضع stork للير (كما بالصورة)

طريقة تصميم واجهة موقع بإستخدام الفوتوشوب 9

وضع هذه الاعدادات

طريقة تصميم واجهة موقع بإستخدام الفوتوشوب 4

الأن لعمل خيال لها نذهب الى drop shado (كما بالضورة) ونضع الإعدات التي بالصورة

طريقة تصميم واجهة موقع بإستخدام الفوتوشوب 5

الأن كرر اللير لكن على الحهة اليسرى لينتج لك شكل نهائي لما قمنا بإنجازه حتى الأن

http://www.alfarh.com/up/ar/tasmemwajha/10.gif

في الرد التالي طريق تصميم الأزرار ورز شات
الرجوع الى أعلى الصفحة اذهب الى الأسفل
عبدالله




عدد الرسائل : 603
تاريخ التسجيل : 14/09/2006

طريقة تصميم واجهة موقع بإستخدام الفوتوشوب Empty
مُساهمةموضوع: رد: طريقة تصميم واجهة موقع بإستخدام الفوتوشوب   طريقة تصميم واجهة موقع بإستخدام الفوتوشوب Emptyالأحد 8 أكتوبر - 11:44

الأن طريقة تصميم الأزرار

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

واكتب فوقها كلمة chat واستخدم اي ستايل لكتون بشكل جميل

http://www.alfarh.com/up/ar/tasmemwajha/11.gif

الأن تصميم زر الإختصارات والمنتديات .... الخ

نقم بتحديد بلير جديد على المكان الذي نريد ان نضع به الزر (كما بالصورة) ونعمل له خيال + حدود لينتج لنا

وقم بتكرار الزر واكتب علية ماتشاء

الشكل النهائي للتصميم

http://www.alfarh.com/up/ar/tasmemwajha/12.gif

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




عدد الرسائل : 603
تاريخ التسجيل : 14/09/2006

طريقة تصميم واجهة موقع بإستخدام الفوتوشوب Empty
مُساهمةموضوع: رد: طريقة تصميم واجهة موقع بإستخدام الفوتوشوب   طريقة تصميم واجهة موقع بإستخدام الفوتوشوب Emptyالأحد 8 أكتوبر - 11:45

الأن طريقة تقطيع
بإستخدام الأداة المحدده

طريقة تصميم واجهة موقع بإستخدام الفوتوشوب 13

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

http://www.alfarh.com/up/ar/tasmemwajha/14.gif

ترى الأرقام بس عشان اعرف كم قسم يعني مو مرتبة ولا شرط تسير على هذا الترتيب
في الرد التالي طريقة وضع روابط + حفظ العمل بصيغة html
الرجوع الى أعلى الصفحة اذهب الى الأسفل
عبدالله




عدد الرسائل : 603
تاريخ التسجيل : 14/09/2006

طريقة تصميم واجهة موقع بإستخدام الفوتوشوب Empty
مُساهمةموضوع: رد: طريقة تصميم واجهة موقع بإستخدام الفوتوشوب   طريقة تصميم واجهة موقع بإستخدام الفوتوشوب Emptyالأحد 8 أكتوبر - 11:46

الان طريقة وضع رابط نأتي على الجزء الي قطعناه ونضغظ كلك يمين ونختار المحدد

طريقة تصميم واجهة موقع بإستخدام الفوتوشوب 15

لتفتح لنا

طريقة تصميم واجهة موقع بإستخدام الفوتوشوب 16

1- ضع رابط الصفحة
2-ضع الشرح الذي سوف يضهر اسفل الصفحة
3-ضع الشرح الذي سوف يضهر عند مرور الماوس على الزر

الأن طريقة الحفظ
اتبع التالي

طريقة تصميم واجهة موقع بإستخدام الفوتوشوب 17

ثم

طريقة تصميم واجهة موقع بإستخدام الفوتوشوب 18

1- نوع الصورة (gif jpg ..الخ)

ثم قم بحفظ العمل على المكان الذي تريد حفظها به

ستجد ملفين index.html ومجلد imges ارفعهن على الموقع وترى النتيجة

بعد ان ارى الردود وكل شئ سوف أضع الواجهة ,,,,, الي يسمعه يقول ان الواجهة الي عاملها حلوة :d

تطبيقي :d

الرجاء عند النقل كتاب المصدر

كاتب الموضوع : محمد االفرح
اسم الموقع : كتاب العرب
رابط الموضوع : http://www.vb.arabsbook.com/showthread.php?t=7867
الرجوع الى أعلى الصفحة اذهب الى الأسفل
 
طريقة تصميم واجهة موقع بإستخدام الفوتوشوب
الرجوع الى أعلى الصفحة 
صفحة 1 من اصل 1
 مواضيع مماثلة
-
» شرح طريقة تصميم موقع متكامل بلغة php
» واجهة موقع اسلامي او ستايل منتدى
» كتاب طريقة تصميم ستايل احترافي بالتفصيل الممل
» كتب الفوتوشوب
» تعليم تصميم موقع كامل بطريقة احترافية

صلاحيات هذا المنتدى:لاتستطيع الرد على المواضيع في هذا المنتدى
منتديات المسلم :: المنتديات التقنيه :: التصميم و برامج الصور و شروحاتها-
انتقل الى: