درس مفصل تصميم واجهة interface إحترافية " مقدم من عمالقة التصميم "

[linnou]

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

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

http://www.giants-d.com/dros/1.jpg


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

http://www.giants-d.com/dros/2.png


ثم نضغط Ctrl + N لفتح عمل جديد


نضع المقاسات التي في الصورة

http://www.giants-d.com/dros/3.png


يتم تنسيق الالوان على زوق المصمم .. مثلاً نحن وضعنا هذه الالوان

http://www.giants-d.com/dros/4.png


نقوم بالاختيار من القائمة اليسرى هذا الشكل

http://www.giants-d.com/dros/5.png


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

http://www.giants-d.com/dros/6.png


ثم نرسم هذا الشكل بالذي اخترناه من القائمة اليسرى

http://www.giants-d.com/dros/7.png


نؤدي مضاعفة للشفيفة

http://www.giants-d.com/dros/8.png

ثم نختار الشكل الذي إخترناه مسبقاً في رسم الصفحة لنرسم الهيدر header

http://www.giants-d.com/dros/5.png

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

http://www.giants-d.com/dros/9.png

بعد رسم الهيدر header نراه في هذا الشكل

http://www.giants-d.com/dros/10.png

ثم نقوم بتنقيط الشفيفة أي يعني نجعلها لير بالتحكم بها

http://www.giants-d.com/dros/11.gif

نحدد الجزء الأعلى من الهيدر header كما في الصورة

http://www.giants-d.com/dros/12.gif

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

http://www.giants-d.com/dros/13.gif

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

http://www.giants-d.com/dros/14.gif

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

أولاً إختيارات الدمج أعمل كما في الصورة

http://www.giants-d.com/dros/15.gif


نذهب إلى تغشية متدرجة ونضغط عليها ومن ثم نقوم بالضغط ضغطتين على التغشية لتعديل الألوان


http://www.giants-d.com/dros/16.gif


http://www.giants-d.com/dros/17.gif


ومن ثم نقوم بعمل حدا للهيدر كما في الصورة

http://www.giants-d.com/dros/18.gif


http://www.giants-d.com/dros/19.gif


حتى يصبح الهيدر header بهذا الشكل


http://www.giants-d.com/dros/20.gif


نذهب للأشكال اليسرى ونختار الشكل هذا

http://www.giants-d.com/dros/5.png


نرسم وسط الصفحة الشكل

ومن ثم نبدء برسم الازرار كما في الصورة


http://www.giants-d.com/dros/21.gif


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


http://www.giants-d.com/dros/22.gif


ومن ثم نذهب إلى إخيارات الدمج


http://www.giants-d.com/dros/23.gif


نذهب إلى التغشية المتدرجة كما في السابق


http://www.giants-d.com/dros/24.gif


ومن ثم نقوم بمضاعفة الزر الذي وضعناه إلى ثلاثة ونضعهم بجانب بعض

http://www.giants-d.com/dros/26.gif





بعدها نحدد هذا الشكل


http://absba7.absba.org/teamwork5/member/aborinaz/COURSE_lesson2_035.gif


ونرسمه بجانب الزر الأخير


http://www.giants-d.com/dros/27.gif


نضغط على Delete لنجلعه أكثر جمالية وإحترافية


ومن بعدها نرسم هذا الشكل خلف الأزرار الذي قمنا بصنعها

http://www.giants-d.com/dros/28.gif


بعدها نقوم بتنقيط الشفيفة

http://www.giants-d.com/dros/29.gif


ونذهب إلى إختيارات الدمج مرة آخرى


ونقوم بالضغط على تغشية متدرجة


http://www.giants-d.com/dros/30.gif


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


http://www.giants-d.com/dros/31.gif


نذهب إلى إختيارات الدمج مرة آخرى

ونقوم بالضغط على تغشية متدرجة

http://www.giants-d.com/dros/32.gif


ومن ثم نقوم بالضغط على الحد

http://www.giants-d.com/dros/33.gif


أضغط موافق


مبروك عليك إنتهى التصميم

وبدى بهذا الشكل


http://www.giants-d.com/dros/35.gif


لتحميل التصميم هو في المرفقات

الملفات المرفقة
http://www.traidnt.net/vb/images/attach/zip.gif عمالقة التصميم.zip (http://www.traidnt.net/vb/attachments/224402d1204570317-عمالقة-التصميم.zip) (38.6 كيلوبايت, عدد مرات المشاهدة 60 مرة)


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