الان درس مفصل تصيم واجهة interface موقع من خلال برنامج Macromedia Fireworks 8 !!

[romaissa]

اول شروحات في ديزاد باتنة

وان شاء الله اوصل لكم المعلومه تمام

لتحميل البرنامج من خلال الرابط التالي:

http://dndon.net/docman/task,doc_dow...,56/Itemid,45/ (http://dndon.net/docman/task,doc_download/gid,56/Itemid,45/)

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

من خلال الدرس مفصل سوف بإذان الله تستطيع استخدام البرنامج بسهوله

وتبدء مشوارك في عالم التصميم والخيال

وبسم الله نبدء:

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


http://3elmdgn.com/firworks-dgn/fierworks-3elmdgn1.1.jpg

المقاسات الي انا استخدمها
780*700

http://3elmdgn.com/firworks-dgn/fierworks-3elmdgn1.2.jpg

الحين نبدء بستخدام اداة رسم المربع من فكتور

http://3elmdgn.com/firworks-dgn/fierworks-3elmdgn1.3.jpg

لتكون دقيق سويت لك رسم بحجم الطول العرض

http://3elmdgn.com/firworks-dgn/fierworks-3elmdgn1.4.jpg

ومدده الى الاعلى الصفحه لنبدء في الهيدر header

http://3elmdgn.com/firworks-dgn/fierworks-3elmdgn1.5.jpg

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

http://3elmdgn.com/firworks-dgn/fierworks-3elmdgn1.6.jpg

1- اخيار Solid
2- اختيار Gradient
3- اختبار Bars

وحيطع لك بشكل هذا وانت عدل زي ماتبي

http://3elmdgn.com/firworks-dgn/fierworks-3elmdgn1.7.jpg

الحين نتقل الى الخلفية عشان نخلي لون متوافق مع الهيدر header

http://3elmdgn.com/firworks-dgn/fierworks-3elmdgn1.8.jpg

اختار على حسب لون الهيدر header عشان التنسيق

الحين نتقل الى رسم الاعمده من خلال اداة Rounded

http://3elmdgn.com/firworks-dgn/fierworks-3elmdgn1.9.jpg

بعد كذا عليك تحدد المكان العمود

http://3elmdgn.com/firworks-dgn/fierworks-3elmdgn1.10.jpg

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

http://3elmdgn.com/firworks-dgn/fierworks-3elmdgn1.11.jpg

الحين تنسخ الشكل كلك يمن بعدين Edit و Clone

http://3elmdgn.com/firworks-dgn/fierworks-3elmdgn1.12.jpg

راح يطلع لك الشكل التالي

http://3elmdgn.com/firworks-dgn/fierworks-3elmdgn1.13.jpg





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

نروح فكتور ونختار الاداة Rounded

http://3elmdgn.com/firworks-dgn/fierworks-3elmdgn1.14.jpg

تعدل مكان التدرج مثل الصوره

http://3elmdgn.com/firworks-dgn/fierworks-3elmdgn1.15.jpg


راح يكون الشكل

http://3elmdgn.com/firworks-dgn/fierworks-3elmdgn1.16.jpg


الحين نزخرف الشكل الازرار تروح الفكتور وترسم نفس الشكل
وترسم مربع في نفس الشكل عشان نقص اعلى شكل ونضيفة الى قائمة الازرار

http://3elmdgn.com/firworks-dgn/fierworks-3elmdgn1.17.jpg

1- نفس شكل القائمة الازرار
2- رسمنا مربع حول الشكل عشان نقصه
حدد على الشكلين ومن قائمة Modify

http://3elmdgn.com/firworks-dgn/fierworks-3elmdgn1.18.jpg

اتبع نفس الخطوات من الصوره وراح يطلع لك الشكل التالي

http://3elmdgn.com/firworks-dgn/fierworks-3elmdgn1.19.jpg

تقوم بحسب الشكل الى قائمة الازرار


http://3elmdgn.com/firworks-dgn/fierworks-3elmdgn1.20.jpg

راح يطلع لك شوي جز منه صغير عشان تمدده على حدود القائمة

من اداة التكبير وتصغير

http://3elmdgn.com/firworks-dgn/fierworks-3elmdgn1.21.jpg

زي مو موضح تكبر من الجهتين

1- ترسم عمود 2- ايضا ترسم عمود

وبيطلع لك الشكل التالي

http://3elmdgn.com/firworks-dgn/fierworks-3elmdgn1.22.jpg

انسخها وضعها في الجهة اليمن واليسار

وشكل النهائي لدرس مفصل

http://3elmdgn.com/firworks-dgn/fierworks-3elmdgn1.23.jpg


http://3elmdgn.com/firworks-dgn/fierworks-3elmdgn1.24.jpg
واسف اذا شي ناقص

واي سؤال انا جاهز

تم رقع الصور على موقع عالم الديزاين


تحياتي
yousef



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