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

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

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

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


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

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

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

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

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



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




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



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


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

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

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

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

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



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




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



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



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



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

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

في الرد التالي طريق تصميم الأزرار ورز شات

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

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

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

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

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

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

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

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

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

في الرد التالي سنقوم بأهم شئ انا لا يهمني شئ مما سبق

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



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

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

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

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



لتفتح لنا



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

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



ثم



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

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

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

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

تطبيقي :d

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

كاتب الموضوع : محمد االفرح
اسم الموقع : كتاب العرب
رابط الموضوع : http://www.vb.arabsbook.com/showthread.php?t=7867