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

[loulou ange]

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

اخواني الاعضاء اقدم لكم شرح طريقة كيفية عمل واجهة interface للموقع و هذه هي هدية الوداع

بسم الله نبدأ الدرس مفصل

اولا نفتح برنامج الفوتوشوب

و نقوم بفتح عمل جديد بالمقاسات التي بالصورة التالية

http://www.nwras.net/nwras_up/uploads/f81174a19b.gif (http://www.nwras.net/nwras_up)

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

http://www.nwras.net/nwras_up/uploads/491b47e371.gif (http://www.nwras.net/nwras_up)

و نقوم بإختيار الالوان حسب كل واحد وذوقه

http://www.nwras.net/nwras_up/uploads/b5b79a37ef.gif (http://www.nwras.net/nwras_up)

و الان نصبغ الصفحة بالون الذي اخترناه

و الان نأتي الى عمل هيدر للصفحة

افتح لير جديدة

http://www.nwras.net/nwras_up/uploads/79c1a13cb3.gif (http://www.nwras.net/nwras_up)

و قم بإختيار أداة التحديد

http://www.nwras.net/nwras_up/uploads/7cf8869db0.gif (http://www.nwras.net/nwras_up)

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

http://www.nwras.net/nwras_up/uploads/9448bdba39.gif (http://www.nwras.net/nwras_up)

و الان نقوم بإختيار اللون بس راح يكون اغمق من لون الخلفية

http://www.nwras.net/nwras_up/uploads/ae1e509b5d.gif (http://www.nwras.net/nwras_up)

و نقوم بإختيار اداة السطل

http://www.nwras.net/nwras_up/uploads/491b47e371.gif (http://www.nwras.net/nwras_up)

و نصبغ الهيدر header باللون الذي اخترناه و الان نقوم بعمل شكل جميل على الهيدر header اتبع الصورة

http://www.nwras.net/nwras_up/uploads/022024a5af.gif (http://www.nwras.net/nwras_up)

تابع

http://www.nwras.net/nwras_up/uploads/9ed7f386ec.gif (http://www.nwras.net/nwras_up)

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

http://www.nwras.net/nwras_up/uploads/075d76bfd1.gif (http://www.nwras.net/nwras_up)

والان الهيدر header كذا مش حلو انتم معي ؟؟

نذهب لإضافة له ظل تابع

http://www.nwras.net/nwras_up/uploads/bb6bb2e9b4.gif (http://www.nwras.net/nwras_up)

و نعمل الي يريحنا بعدها شوفوا كيف طلع الهيدر header بعد اضافة الظل

http://www.nwras.net/nwras_up/uploads/05cbae31cd.gif (http://www.nwras.net/nwras_up)

و الان سوف نأتي لإضافة صورة على البنر مما يعطيه جماله

نقوم بإدراج صورة

http://www.nwras.net/nwras_up/uploads/9ee9768734.gif (http://www.nwras.net/nwras_up)

و بعد ادراجها اسحبها على التصميم بتاعك

و من ثم تابع الصورة

http://www.nwras.net/nwras_up/uploads/a5c1afe98c.gif (http://www.nwras.net/nwras_up)

اظن الشرح طريقة الي بالصورة واضح

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

http://www.nwras.net/nwras_up/uploads/496a3542fa.gif (http://www.nwras.net/nwras_up)

انتظر على المظلل باللون الاحمر و بعد عمل ذلك

قم بالضغط على

Cntrl + G

شوفوا الان كيف طلع الهيدر header

http://www.nwras.net/nwras_up/uploads/774f9a3bb5.gif (http://www.nwras.net/nwras_up)

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

و الان انتهينا من الهيدر header بقي علينا الفوتر

نقوم بإضافة لير جديدة كما تعلمنا سابقا

و نختار اداة التحديد

http://www.nwras.net/nwras_up/uploads/7cf8869db0.gif (http://www.nwras.net/nwras_up)

و نحدد الجزء الاسفل من الواجهة interface الي تحت خالص

و الان بعد التحديد نختار اداة السطل

http://www.nwras.net/nwras_up/uploads/491b47e371.gif (http://www.nwras.net/nwras_up)

و نختار اللون نفسه الذي اخترناه مع الهيدر header

http://www.nwras.net/nwras_up/uploads/ae1e509b5d.gif (http://www.nwras.net/nwras_up)

و نصبغ الجزء المحدد السفلي من الواجهة interface الذي حددناه

و الان سوف يظهر لنا بعد الصبغ ازل التحديد بواسطة الضغط على




Cntrl + D

و الان سوف نضيف عليه بعض اللمسات

تابع الصورة

http://www.nwras.net/nwras_up/uploads/c687912bb7.gif (http://www.nwras.net/nwras_up)

تابع

http://www.nwras.net/nwras_up/uploads/e644907342.gif (http://www.nwras.net/nwras_up)

وبعدها سوف يظهر لنا الفوتر كذا شوف الصورة

http://www.nwras.net/nwras_up/uploads/294f74e9bc.gif (http://www.nwras.net/nwras_up)

و الان نضيف الظل عليه و اشياء اخرى حتى يصبح جميل شوف الصورة

http://www.nwras.net/nwras_up/uploads/acc48797c6.gif (http://www.nwras.net/nwras_up)

تابع

http://www.nwras.net/nwras_up/uploads/b0a5bee213.gif (http://www.nwras.net/nwras_up)

اعمل كما هو محدد لك بالصورة


و بعدها اضغط على ok

و الان نقوم بإضافة صورة اخرى على الفوتر كما تعلمنا سابقا

http://www.nwras.net/nwras_up/uploads/ecf31b21bf.gif (http://www.nwras.net/nwras_up)

و نمد الصورة كما فعلنا مع الهيدر header بالضغط على

Cntrl + T

و الان شوف الصورة

http://www.nwras.net/nwras_up/uploads/927993230d.gif (http://www.nwras.net/nwras_up)



اعمل كما هو مظلل في الصورة باللون الاحمر


والان بعد ما فعلنا كما بالصورة

نضغط على

Cntrl + G

لدمج الصورة

شوف كيف طلع الان

http://www.nwras.net/nwras_up/uploads/4758920584.gif (http://www.nwras.net/nwras_up)



و بعدها انت ضيف عليه اشياء كما تحب



و الان انتيهنا من الفوتر و الهيدر header بقي لدينا ازرار



نقوم بإختيار اداة المربع او اي شكل تريده انا اخترت اداة الشكل العشوائي


http://www.nwras.net/nwras_up/uploads/187b47eef7.gif (http://www.nwras.net/nwras_up)

نقوم بإختيار الاشكال

و نرسم الأشكال و نعطيها الظل و الأشياء الاخرى كما تعلمنا سابقا

و كذا نكون انتينها من التصميم

و هذا التصميم النهائي للدرس مفصل

http://www.nwras.net/nwras_up/uploads/18fc73d64f.gif (http://www.nwras.net/nwras_up)



اتمنى كل المنى و الرجاء ان يحوز الدرس مفصل على رضاكم و ان تكونوا قد فهمتم منه

و دمتم بود اخوكم النورس الطائر

و ننتظر تطبيقاتكم

الرجاء عند نقل الدرس مفصل ذكر المصدر منتديات النورس الطائر



https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©