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

[said]

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

اولاً نقوم بتشغيل برنامج الفوتوشوب بمقاس 800 * 600 بيكسل

ثم نقوم بانشاء طبقة جديدة بالضغط على ctrl + shift + n كما بالصورة:

http://www.albasha.info/up/uploads/7a85e46636.gif (http://www.albasha.info/up/)

ثم نختار اداة rectangle tool كما بالصورة:

http://www.albasha.info/up/uploads/31bd488a14.gif (http://www.albasha.info/up/)

ثم نضغط على السهم الصغير الموجود بلوحة الاستايل styleات كما بالصورة:

http://www.albasha.info/up/uploads/65063b38cd.gif (http://www.albasha.info/up/)


ثم نضغط على buttons كما بالصورة:

http://www.albasha.info/up/uploads/0245bfc266.gif (http://www.albasha.info/up/)

ثمستظهر لنا نافذة و نضغط فيها على append كما بالصورة:

http://www.albasha.info/up/uploads/7fc004b3c9.gif (http://www.albasha.info/up/)

ثم ستظهر لنا استايل styleات جديدة فى لوحة الاستايل styleات و نحتار منها الاستايل style الاحمر الذى سيمى ب red gil كما بالصورة:

http://www.albasha.info/up/uploads/46d02c4987.gif (http://www.albasha.info/up/)

ثم نقوم بانشاء طبقة جديدة بنفس الطريقة المذكورة فى بداية الشرح طريقة و نرسم باداة rectangle tool مستطيل كما بالصورة:

http://www.albasha.info/up/uploads/4d5a6d14dc.gif (http://www.albasha.info/up/)

و نجعل لونه بالاستايل style bright red bevel كما بالصورة:

http://www.albasha.info/up/uploads/d22a583190.gif (http://www.albasha.info/up/)

ثم نضغط على filter و نختار من القائمة التى ستظهر لنا distort و من القائمة التى ستظهر بعد ذلك نختار ripple كما بالصورة:

http://www.albasha.info/up/uploads/9d37efa7c7.gif (http://www.albasha.info/up/)

و بعد ذلك نضغط على قائمة filter و نختار من القائمة التى ستظهر لنا distort ثم نخ تار من القائمة الاخرى التى ستظهر لنا wave كما بالصورة:

http://www.albasha.info/up/uploads/0068583d12.gif (http://www.albasha.info/up/)

ثم نقوم بعمل طبقة جديدة بنفس الطريقة المذكورة فى اول الشرح طريقة و نرسم باداة rectangle tool مستطيل اخر بنفس الطريقة المذكورة فى اول الشرح طريقة و بعد ذلك نضغط على قائمة edit و نختار منه transform و نختار من القائمة الاخرى التى ستظهر لنا warp كما بالصورة:

http://www.albasha.info/up/uploads/63115b0cc4.gif (http://www.albasha.info/up/)

ثم نغير شكلها بتحريك الدائرة الصغيرة الثانية من اليمين بالطريقة المطلوبة ليصبح الشكل كما ترى فى الصورة:



http://www.albasha.info/up/uploads/1f33db94e6.gif (http://www.albasha.info/up/)


و نرسم مستطيل اخر بالطريقة المذكورة فى البداية و نقوم بعمل نفس التاثير warp على المستطيل
ثم نقوم بانشاء طبقة جديدة و نرسم مستطيل فى المنتصف و يوازى المستطيلان الموجودان على اليميمن و اليسار و نقوم بعمل التاثير warp عليه ثم نرسم مستطيل اخر بالاسفل تحت كل ما تم تصميمه
و نقوم بعمل التاثير ripple الموجود فى قائمة distort الموجودة بقائمة filter و ستكون النتيجة كالتالى:

http://www.albasha.info/up/uploads/cfb1940dd7.gif (http://www.albasha.info/up/)

ثم نقوم برسم الزرار التى تريدها كما تشاء باستخدام اداة rectangle tool و قم بالتعديل عليها و تلوينها كما تحب و بعد ذلك قم بكتابة الكلمات التى تريدها على تلك الازرار و عمل التاثيرات التى تريدها عليها




و صورة للناتج النهائى قبل وضع الازرار و التاثيرات المطلوبة:
http://www.albasha.info/up/uploads/8a2d1ee17d.gif (http://www.albasha.info/up/)




انتهى الشرح طريقة و اعتذر على الاطالة و التقصير فى الشرح طريقة
كما اعتذر ايضاً على حجم الصور الكبير فهذا اول شرح طريقة تصميم واجهة interface قمت بعمله

واريد ان ارى تطبيقاتكم

مع تحيات عمر محسن شاكر



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