السلام عليكم ورحمة الله وبركاته
اقدم لكم درس مفصل مميز جدا جداً لتصميم واجهه احترافية كاملة
بنــر + فوتر + أزرار + قوائم + و الستايل styleات + رسم البنر
اتمنا انه يعجبكم .. الدرس مفصل ويحوز على رضاكم .. ورضا اعضائنا في الديزاد باتنة .. إداريين المنتدى forum الأفاضل
قبل أن نبدأ أحبائي حبية أقدم لكم كم نصيحة في مجال التصميم واتمنا تتقيدون فيها :-
1- المحافظة على تناسق الألوان ...
2- عدم إضافت ودمج الكثير من الصور...
3- عدم التقيد بطريقه وحده في التصميم مثل استخدام الستايل styleات فقط او ايستخدام الفلاتر فقط ..
4-عدم احتكار التصميم بلون واحد او لونين
5-نعومة التصميم ان يكون التصميم ناعم وخفيف وكل ما كان التصميم خفيف كل ما كان اجمل ..
طولت عليكم بالكلام ... ادري ..![]()
بســــم الله الرحمـــــن الرحيــــــم نبـــدأ .....![]()
أول ما نقوم به نقوم برسم البنر
نستطيع رسم البنر بأدوات أخرى ولا كن هذه الأداة تعطي شكل جميل واحترافي
نختار الأداةونضغط .. في المكان المناسب ..
مثل هذا الشكل
بعد أن نوصلها ببعض نرى أن الشكل أصبح هكذا
ونلاحظ ان الخلفية لونها ابيض نضغط على![]()
فتضره لنا الأوان ونختار اللون المناسب
وبنسبة للإنحنآت :
لرسم هذا الانحناء نقوم بضغط على Shift و زر الفارة الأيسر
____________________________________________
بعد ان نقوم باختيار لون جديد
نقوم بصنع ستايل style خاص للبنر وأضافت البترن وانشالله سوف اضع لكم بعض
الستايل styleات الي في جهازي ومعها ستايل style البنر
وهذا الستايل style اللذي استخدمناه في البنر![]()
____________________________________________
ثم نقوم برسم الفوتر مره بنفس طريقة رسم البنر
لنرى
نلاحظ ان التصميم يفتقر للخلفيه
وفيه جزء كبير من التصميم تقريباً خالي ويجب علينا ملئه بشكل ناعم وخفيف جدا
وانا أفضل استخدام التدريج
هذه الأداه ادات التدريج
نذهب لأخير الليرات
نقوم بإضافت لير فوقه
بهذه الطريقة ...
بعد إضافة اللير نقوم بوضع تدريج على اللير بالأداة السابقة
بعد الضغط عليها سترى في أعلى الشاشة
هذه الألوان إلي اخترتها انا
مهم جداً: استخدام ألوان متناسقة
وهذا التصميم
نحتاج إلى قوائم و صور للبنر و الفوتر وأزرار
نقوم بوضع صوره للبنر
وأتمنى أخواني الأعزاء أنكم ما تحطون صور بنات
نذهب للنبر ونضغط على لير البنر لكي تكون الصورة فوق البنر ونضع صورة التي نريدها وسنرى المثال
نضع الصوره فوق البنر
بعد ان نضع الصوره فوق البنر نقوم بالضغط على ctrl + G من الكي بورد
سوف تضهر لنا بهذا الشكل
نلاحظ ان الصورة لم تظهر منضر جميل للستايل style نقوم بدمج خفيف وجميل وسهل جداً
* نضغط على ليير الصورة ثم ندمج بهذه الطريقة![]()
بيكون البنر بهذا الشكل
ونقوم بعمل نفس الطريقه على الفوتر (الجزء السفلي من التصميم)
الآن انتهينا من البنر و الفوتر ... تبقى القائمة و الأزرار
____________________________________________
نرسم القائمة بالمكان الذي يناسبك بهذه الأداة
وهذا شكلها
نقوم بإضافت فلتر .. لإعطائها شكل جميل وإنحنآت مميزه
الفلتر Filter >> Destort >> Shear
هذي طريقة تطبيقي
وستصبح ... هكذا
الدرس مفصل طويل ...... نقول لا إله إلا الله ونكمل
![]()
بعد ذلك ... نقوم بإضافة ستايل style بسيط وجميل في نفس الوقت ليعطي القائمة منضر جميل
وانا صممت لكم ستايل style سوف يتم رفعه مع الستايل styleات : شكل الستايل style :
____________________________________________
بعد ذالك نصمم الأزرار على القائمة ...
اول ما نقوم به .. نرسم مستطيل من هذه الأداة
بعد رسمه نقوم بوضع الحدود على المستطيل .... من اعدادات الستايل style Stroke
بعد ذالك نضع المستطيل فوق القائمة
بعد ذالك نقوم بدمج المستطيل على القائمة بالضغط على Ctrl + G
ستصبح
ثم نقوم بنسخ المستطيل ووضعه اسفل المستطيل السابق بالترتيب
بعد ذالك إذا حبينا ننسخ نسخه ثانيه من القائمة لتكون قائمه على اليمين و على اليسار ندمج ليرات القائة و الأزرار
بعد شبكها ندمجها بالضغط على Ctrl + e
بعدها ستصبح في لير واحد
بعد ذالك نقوم بقلب القائمة
نضغط Ctrl + T
بعد ذاللك
سنقلبها ونقلها للجزء الأيسر
بعد ذالك نقوم بتزين الواجهة interface
ككتابة اسم الموقع في الأعلى
ووضع مدخل شات
او رسم دوائر على الأزرار
وأنت وذوقك .............
وانا بــ ارفق لكم التصميم كملف مفتوح هدية مني لكم .........
و الستايل styleات كثيرة (عدد الستايل styleات اكثر من 800 ستايل style)
ولا تنسى تغير اسم موقعك إلى اسم موقعك الحقيقي
ولا تنسى تغير name.com إلى اسم موقعك الحقيقي
ولاتنسى الدعاء لي ولوالداي و لا تنسى حفظ حقوق التصميم
رابــــــــط الـــــــــــــــــــــدرس مفصل
رابط تحميل التصــــــــــــــــميم
رابط الاستــــــــــــــــــــــــيلاتــ
مع تحياتي
محبكم G u l f..
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى©