ضع إعلانك هنا

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

استعرض الموضوع السابق استعرض الموضوع التالي اذهب الى الأسفل

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

مُساهمة من طرف keko_ferkeko في الجمعة يونيو 05, 2009 5:44 pm

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




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

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

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

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

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

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


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

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


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


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



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


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



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

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




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






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














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





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






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

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






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










________________________________________
.::الَّلهُمَّـ اجعَلْـ عَمَلَنَا خَالِصًا لِوَجهَكَـ الكَرِيمِـ::.


keko_ferkeko
عضو محترف
عضو محترف

البلد :
السن : 24
تاريخ التسجيل : 16/08/2007
المشاركات : 3254
الاهتمامات : القراءة-التصميم-بناء المواقع-النت
الوظيفة : طالب جامعي
الأوسمة :


معاينة صفحة البيانات الشخصي للعضو http://nf-son.forumotion.com

الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

مُساهمة من طرف comando في السبت يونيو 06, 2009 12:27 am

مشكور كيكو على الدرس الجميل واليك تطبيقى

ولكن لدى سؤال فى الطريقة الاولى
يجب ان يتوفر لها لونين
الاولى فى الوضع العادى
والثانية عند مرور الماوس
والسؤال هو كيف يمكن تحديد اللونين المذكورين اعلاه
وشكراً على الدرس وفى انتظار باقى الدورة

comando
عضو محترف
عضو محترف

البلد :
السن : 23
تاريخ التسجيل : 31/07/2008
المشاركات : 689
الاهتمامات : التصميم و البرمجة و اللغات .
الوظيفة : المندوب المقيم امام الكمبيوتر
الأوسمة :


معاينة صفحة البيانات الشخصي للعضو http://nf-son.forumotion.com

الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

مُساهمة من طرف keko_ferkeko في الأحد يونيو 07, 2009 1:00 am

أشكرك على التطبيق


بالنسبة لسؤالك
في الالوان
1. إطار الأساس.
2. عند مرور المؤشر.

________________________________________
.::الَّلهُمَّـ اجعَلْـ عَمَلَنَا خَالِصًا لِوَجهَكَـ الكَرِيمِـ::.


keko_ferkeko
عضو محترف
عضو محترف

البلد :
السن : 24
تاريخ التسجيل : 16/08/2007
المشاركات : 3254
الاهتمامات : القراءة-التصميم-بناء المواقع-النت
الوظيفة : طالب جامعي
الأوسمة :


معاينة صفحة البيانات الشخصي للعضو http://nf-son.forumotion.com

الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

مُساهمة من طرف a7mad 3a6ef في الأربعاء يوليو 29, 2009 9:40 pm

مشكور جداااااا شرح بسيط وجميل

________________________________________
انقطاع طفيف

كل عام و انتم بالف خير

a7mad 3a6ef
عضو محترف
عضو محترف

البلد :
السن : 22
تاريخ التسجيل : 15/07/2008
المشاركات : 1145
الاهتمامات : النت
الوظيفة : طالب
الأوسمة :


معاينة صفحة البيانات الشخصي للعضو http://www.nf-son.forumotion.com

الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

مُساهمة من طرف sherif في الثلاثاء سبتمبر 22, 2009 4:54 pm

شكرا كيكو انا استفدت كتير
هذا التطبيق
[img][/img]

________________________________________
كل عام و انتم طيبون

sherif
عضو محترف
عضو محترف

البلد :
السن : 21
تاريخ التسجيل : 31/01/2009
المشاركات : 545
الاهتمامات : النت و و القراءة
الوظيفة : طالب
الأوسمة :


معاينة صفحة البيانات الشخصي للعضو http://nf-son.forumotion.com

الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

مُساهمة من طرف الدب الكبير في السبت سبتمبر 26, 2009 8:04 am

[url=islamup.com/download.php?img=55378][/url]

بصراحة الدرس حلو جدا

عايزة اشوف باقى الدروس

الدب الكبير
عضو جديد
عضو جديد

البلد :
السن : 20
تاريخ التسجيل : 08/07/2009
المشاركات : 36
الاهتمامات : القراءة-النت
الوظيفة : طالبة

معاينة صفحة البيانات الشخصي للعضو

الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

مُساهمة من طرف keko_ferkeko في السبت سبتمبر 26, 2009 12:38 pm

أهلا بكم..
في الحقيقة القسم دا كان مفتوح فقط لأعضاء مجموعة التصميم، و تم اعطائهم الدورة فعلا لكن مش على المنتدى..

________________________________________
.::الَّلهُمَّـ اجعَلْـ عَمَلَنَا خَالِصًا لِوَجهَكَـ الكَرِيمِـ::.


keko_ferkeko
عضو محترف
عضو محترف

البلد :
السن : 24
تاريخ التسجيل : 16/08/2007
المشاركات : 3254
الاهتمامات : القراءة-التصميم-بناء المواقع-النت
الوظيفة : طالب جامعي
الأوسمة :


معاينة صفحة البيانات الشخصي للعضو http://nf-son.forumotion.com

الرجوع الى أعلى الصفحة اذهب الى الأسفل

استعرض الموضوع السابق استعرض الموضوع التالي الرجوع الى أعلى الصفحة


 
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى