درس تصميم الـnavigation bar..

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

إخواني الأعزاء..
اقدم لكم اليوم درس تصميم الورقة المعنونة أو شريط الابحار في الموقع و الموجود بأعلى الصفحة..

أولا و قبل كل شئ يجب عليك من أجل تصميم الاستايلات أن يكون لديك منتدى خاص تقوم فيه برفع استايلاتك و ترجبتها و ما إلى ذلك..
يمكنك إنشاء هذا المنتدى مجاناً من هنا
www.ahlamontada.com

أو يمكنني أن أنشئه لك أنا إذا أردت، فقط ضع طلبك هنا و سأقوم بنتفيذه..

ثانياً:
===================================
شريط الابحار هذا يضم عدة أزرار أهمها:

المنتدى
البوابة
البحث
الأعضاء
المجموعات
الدخول\\الخروج
التسجيل
التعليمات(س و ج)
البيانات الشخصية
حقيبة الرسائل الخاصة\\رسالة جديدة

===================================


لتصميم الورقة المعنونة -أو كاسم صحيح متداول على الانترنت (navigation bar) - هناك 3 طرق:

1. أن تترك الورقة المعنونة كنص فقط بدون صور.
2. أن تكون الورقة المعونة نص + صورة.
3. أن تكون الورقة المعنونة صورة فقط.


الطريقة الأولى و هي لا تحتاج لأي تدخل تصميمي:
افتح منتداك و من لوحة الادارة في أسفل الصفحة >>> مظهر المنتدى
>>> إدارة الصور >>> لوحة إدارة كاملة >>>
اجعل كل الصور اللي في الورقة المعنونة فاضية.
(كود الصورة الفاضية: https://2img.net/i/empty.gif)..


الطريقة الثانية هي التي سنقوم فيها باستخدام صور صغيرة مثل الأيقونات
لوضعها بجانب النص، يمكنك ان تصنع الأيقونات بنفسك إذا كنت تستطيع ،لكن
السهل و ربما الأفضل ان تقوم باختيار الأيوقنات المعروفة من مواقع البحث
عن الأيقونات.
مثل:
iconlook.com
iconlet.com
نقوم بأخذ رابط الأيقونة و نضعه في نفس المكان اللي وضعنا فيه الصور الفاضية في الطريقة الأولى.



الطريقة الثالثة و هي الأهم و الأكثر استخداما:
نقوم بوضع صورة من دون نص، و ذلك عن طريق تصميم الأزرار باستخدام الفوتوشوب، هناك طرق كثيرة أذكر منها الان واحدة و الباقي لاحقاً:

هذا نموذج الشرح



1. نقوم بفتح عمل جديد بمقاس (180×80).

2. نقوم بعمل طبقة جديد، و من ثم باستخدام أداة
“Rectangular Marque Tool”
نقوم بعمل تحديد..




3. نقوم بملئ التحديد بأي لون يعجبنا باستخدام أداة
“Paint Bucket Tool”






4. من نافذة
“Blending Options”
نقوم بعمل الاعدادات التالية:














5. نقوم بكتابة النص على الصورة
(بوابة-منتدى-بحث)
كل مرة نكتب نص و نحفظ الصورة و نكتب غيره و نحفظ الصورة لغاية لما ننتهي من كل الأزرار





6. يمكنك أن تضيف تأثير على النص كالتالي






بعد ذلك نقوم برفع الصور و وضعها في مكانها كما ذكرت سابقا..
بقيت خطوة واحدة و هي إخفاء النص و إظهار الصور فقط:

افتح منتداك و من لوحة الادارة في أسفل الصفحة >>> مظهر المنتدى >>> الصفحة الرئيسية و أزرار التصفح >>> اظهار الصور فقط في لوحة الازرار >>> اختر نعم >>>ثم اضغط تسجيل..






بكدة نكون انهينا أول جزء في دورة الاستايلات، أرجو أن تقوم بتطيبقه سريعا و أروني التطبيقات..
و اي سؤال أو استفسار أنا موجود إن شاء الله