[::+: درس مفصل تصميم واجهه احترافية (مميز جداً) :+::]

[walid]

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

اقدم لكم درس مفصل مميز جدا جداً لتصميم واجهه احترافية كاملة

بنــر + فوتر + أزرار + قوائم + و الستايل styleات + رسم البنر

اتمنا انه يعجبكم .. الدرس مفصل ويحوز على رضاكم .. ورضا اعضائنا في الديزاد باتنة .. إداريين المنتدى forum الأفاضل

قبل أن نبدأ أحبائي حبية أقدم لكم كم نصيحة في مجال التصميم واتمنا تتقيدون فيها :-

1- المحافظة على تناسق الألوان ...

2- عدم إضافت ودمج الكثير من الصور...

3- عدم التقيد بطريقه وحده في التصميم مثل استخدام الستايل styleات فقط او ايستخدام الفلاتر فقط ..

4-عدم احتكار التصميم بلون واحد او لونين

5-نعومة التصميم ان يكون التصميم ناعم وخفيف وكل ما كان التصميم خفيف كل ما كان اجمل ..

طولت عليكم بالكلام ... ادري .. http://www.dzbatna.com/images/smilies/nosweat.gif

بســــم الله الرحمـــــن الرحيــــــم نبـــدأ .....http://www.dzbatna.com/images/smilies/icon31.gif

أول ما نقوم به نقوم برسم البنر http://www.q84design.com/alwajhh/index.1.gif

نستطيع رسم البنر بأدوات أخرى ولا كن هذه الأداة تعطي شكل جميل واحترافي


نختار الأداة http://www.q84design.com/alwajhh/index.1.gif ونضغط .. في المكان المناسب ..
مثل هذا الشكل

http://www.q84design.com/alwajhh/q84design222.jpg

بعد أن نوصلها ببعض نرى أن الشكل أصبح هكذا

http://www.q84design.com/alwajhh/index.2.jpg

ونلاحظ ان الخلفية لونها ابيض نضغط على http://www.q84design.com/alwajhh/index.3.gif
فتضره لنا الأوان ونختار اللون المناسب

وبنسبة للإنحنآت :

لرسم هذا الانحناء نقوم بضغط على Shift و زر الفارة الأيسر

____________________________________________

بعد ان نقوم باختيار لون جديد

نقوم بصنع ستايل style خاص للبنر وأضافت البترن وانشالله سوف اضع لكم بعض

الستايل styleات الي في جهازي ومعها ستايل style البنر

وهذا الستايل style اللذي استخدمناه في البنر http://www.q84design.com/alwajhh/index.4.gif

____________________________________________

ثم نقوم برسم الفوتر مره بنفس طريقة رسم البنر

لنرى
http://www.q84design.com/alwajhh/q84design1.jpg

نلاحظ ان التصميم يفتقر للخلفيه

وفيه جزء كبير من التصميم تقريباً خالي ويجب علينا ملئه بشكل ناعم وخفيف جدا

وانا أفضل استخدام التدريج http://www.q84design.com/alwajhh/index.2.gif
هذه الأداه ادات التدريج
نذهب لأخير الليرات
http://www.q84design.com/alwajhh/q84design2.jpg

نقوم بإضافت لير فوقه

بهذه الطريقة ... http://www.q84design.com/alwajhh/q84design3.jpg

بعد إضافة اللير نقوم بوضع تدريج على اللير بالأداة السابقة http://www.q84design.com/alwajhh/index.2.gif
بعد الضغط عليها سترى في أعلى الشاشة
http://www.q84design.com/alwajhh/q84design5.jpg




هذه الألوان إلي اخترتها انا

مهم جداً: استخدام ألوان متناسقة

وهذا التصميم

http://www.q84design.com/alwajhh/q84design7.jpg
نحتاج إلى قوائم و صور للبنر و الفوتر وأزرار

نقوم بوضع صوره للبنر

وأتمنى أخواني الأعزاء أنكم ما تحطون صور بنات

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

نضع الصوره فوق البنر
http://www.q84design.com/alwajhh/q84design8.jpg

بعد ان نضع الصوره فوق البنر نقوم بالضغط على ctrl + G من الكي بورد

سوف تضهر لنا بهذا الشكل

http://www.q84design.com/alwajhh/q84design9.jpg

نلاحظ ان الصورة لم تظهر منضر جميل للستايل style نقوم بدمج خفيف وجميل وسهل جداً

* نضغط على ليير الصورة ثم ندمج بهذه الطريقة http://www.dzbatna.com/images/smilies/icon30.gif
http://www.q84design.com/alwajhh/q84design10.jpg

بيكون البنر بهذا الشكل

http://www.q84design.com/alwajhh/q84design11.jpg

ونقوم بعمل نفس الطريقه على الفوتر (الجزء السفلي من التصميم)

الآن انتهينا من البنر و الفوتر ... تبقى القائمة و الأزرار
____________________________________________

نرسم القائمة بالمكان الذي يناسبك بهذه الأداة http://www.q84design.com/alwajhh/index.5.gif

وهذا شكلها

http://www.q84design.com/alwajhh/q84design12.jpg

نقوم بإضافت فلتر .. لإعطائها شكل جميل وإنحنآت مميزه

الفلتر Filter >> Destort >> Shear

http://www.q84design.com/alwajhh/q84design13.jpg

هذي طريقة تطبيقي

http://www.q84design.com/alwajhh/q84design14.jpg

وستصبح ... هكذا

http://www.q84design.com/alwajhh/q84design15.jpg

http://www.dzbatna.com/images/smilies/icon30.gif الدرس مفصل طويل ...... نقول لا إله إلا الله ونكمل http://www.dzbatna.com/images/smilies/icon30.gif

بعد ذلك ... نقوم بإضافة ستايل style بسيط وجميل في نفس الوقت ليعطي القائمة منضر جميل
وانا صممت لكم ستايل style سوف يتم رفعه مع الستايل styleات : شكل الستايل style : http://www.q84design.com/alwajhh/index.6.gif

____________________________________________
بعد ذالك نصمم الأزرار على القائمة ...

اول ما نقوم به .. نرسم مستطيل من هذه الأداة

بعد رسمه نقوم بوضع الحدود على المستطيل .... من اعدادات الستايل style Stroke
بعد ذالك نضع المستطيل فوق القائمة

http://www.q84design.com/alwajhh/q84design17.jpg

بعد ذالك نقوم بدمج المستطيل على القائمة بالضغط على Ctrl + G
ستصبح

http://www.q84design.com/alwajhh/q84design19.jpg

ثم نقوم بنسخ المستطيل ووضعه اسفل المستطيل السابق بالترتيب

http://www.q84design.com/alwajhh/q84design20.jpg

بعد ذالك إذا حبينا ننسخ نسخه ثانيه من القائمة لتكون قائمه على اليمين و على اليسار ندمج ليرات القائة و الأزرار

http://www.q84design.com/alwajhh/q84design22.jpg

بعد شبكها ندمجها بالضغط على Ctrl + e

بعدها ستصبح في لير واحد

http://www.q84design.com/alwajhh/q84design23.jpg

بعد ذالك نقوم بقلب القائمة

نضغط Ctrl + T
بعد ذاللك

http://www.q84design.com/alwajhh/q84design25.jpg

سنقلبها ونقلها للجزء الأيسر

http://www.q84design.com/alwajhh/q84design26.jpg

بعد ذالك نقوم بتزين الواجهة interface

ككتابة اسم الموقع في الأعلى

ووضع مدخل شات

او رسم دوائر على الأزرار

وأنت وذوقك .............

وانا بــ ارفق لكم التصميم كملف مفتوح هدية مني لكم .........

و الستايل styleات كثيرة (عدد الستايل styleات اكثر من 800 ستايل style)

ولا تنسى تغير اسم موقعك إلى اسم موقعك الحقيقي

ولا تنسى تغير name.com إلى اسم موقعك الحقيقي

ولاتنسى الدعاء لي ولوالداي و لا تنسى حفظ حقوق التصميم

رابــــــــط الـــــــــــــــــــــدرس مفصل (http://www.q84design.com/alwajhh/)

رابط تحميل التصــــــــــــــــميم (http://www.q84design.com/alwajhh/q84design.psd)

رابط الاستــــــــــــــــــــــــيلاتــ (http://www.q84design.com/tjmee3-gulf-Styles.rar)


مع تحياتي

محبكم G u l f..



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