|
|
|
|||
|
|
|
|
||
|
|||||||
 |
 |
 |
| شـــامل سلسلة الدروس المشروحه جميع الدروس لمختلف برامج التصميم |
 |
|
|
LinkBack | أدوات الموضوع | تقييم الموضوع | أنماط العرض |
12-12-2005, 11:25 PM
|
#1 (permalink) | ||||||
|
شاملي ماحد قدة
|
الآن وحصريا في شامل نت ..../ شرح كيفية عمل صفحة web على الـــ Photoshop .. خيااالي ..
بسم الله الرحمن الرحيم الآن أصبح بإمكانك عمل صفحة انترنت على الفوتوشوب ... والمطلوب لتطبيق هذا الدرس Adobe Photoshop Cs2 بالإستعانة بـــ ImageReady Cs2 ... ويمكن عمل هذا الدرس على ImageReady Cs إذا كانت خبرتك عالية ... ونبدأ الشرح : 1- افتح طبقة جديدة بقياسات الصفحة نت التي تريدها ... وأنا قمت بأخذ 760 بيكسل للعرض و 768 بيكسل للطول ...  ------------------------------------------------------------------------------ 2- قم بإظهار المسطرة ... إما بـــ Ctrl+R ... أو من خلال View ثم Rulers كما بالصورة ...  ------------------------------------------------------------------------------ 3- الآن ضع مؤشر الماوس فوق المسطرة (( إما العامودية أو الأفقية )) واضغط فوق المسطرة ثم قم بسحب يدك إلى الطبقة البيضاء كي يطلع لك خطوط من المسطرة ... إذا ضغطت على المسطرة الأفقية ظهرت خطوط أفقية وإذا ضغطت على المسطرة العامودية ظهرت خطوط عامودية ... ولحذف خط قم بالضغط عليه واسحبه إلى خارج الصفحة ..  ------------------------------------------------------------------------------ 4- قم بتقسيم الصفحة بهذه الخطوط التي أخرجتها من المسطرة بالشكل الذي تريده ... يعني بهذه التقسيمات تسهل عمل إضافة الصور والشعارات ( logo ) إلى الصفحة ... وكذلك تسهل وضع الأزرار ... لذلك أنا قمت بهذه التقسيمات التي بالصورة ... بإمكانك عمل مثلها ...  ------------------------------------------------------------------------------ 5- قم بإدراج الصورة التي تريدها أن تظهر بصفحة النت ... وقم بعمل اللوقو الذي تريده .. وضعه بالمكان الذي صممته له ... فأنا هكذا وضعت اللوقو والصورة بهذه الأماكن ...  ------------------------------------------------------------------------------ 6- الآن سوف نقوم بإضافة الأزرار .... : أ- قم باختيار أدة التحديد  .ب- قم بتحديد مكان الزر الذي تريده كما بالصورة .  جـ - قم باختيار أداة التلوين  د- لا تنسى مراعاة أسماء الطبقات بشكل دقيق جدا ... والآن قم بإضافة طبقة جديدة للزر بعد ترتيب كل زر بمجموعة من أجل الدقة بالعمل كما بالصورة ...  هــ- قم باختيار اللون الذي تريده لخلفية الزر وقم بتلوين المربع الذي حددته من أجل الزر ...  و- قم باختيار أداة الكتابة  .ي- ثم قم بوضعها في مربع الزر الذي لونته ... واكتب داخلها اسم الزر الذي تريده .. واجعلها متناسبة بالقياس ...  الآن سوف نقوم بعمل حركة للزر ... يعني إذا مرت الماوس فوقه أو نقر عليه ... يتغير لونه ... قم بعمل نسخة عن خلفية الزر وعن الكتابة التي وضعتها ... ثم قم بتفتيح أو تغميق ألوان أحد الخلفيات وكذلك قم بتغيير لون أحد النصوص .. ثم قم بعمل التسميات المناسبة للطبقات كما بالصورة ...  والآن .. نكون انتهينا من الزر الأول ... لعمل الزر الثاني اعمله بنفس الطريقة السابقة . ثم قم بتغيير اسم الزر يعني بالأول كان اسمه sound الآن سميه vidio ... ولعمل ذلك بطريقة مختصرة فقط قم بنسخ مجموعة الزر الأولى وغير اسمها وغير اسماء نصوص الأزرار والخلفيات وغير نصوص الأزرار ... فيصبح العمل لديك بهذا الشكل ...  ------------------------------------------------------------------------------ وفي نهاية العمل ... بعد الإنتهاء من عمل الأزرار كاملة ووضع اللوقو (( الشعار )) ووضع الصورة .. سوف يكون العمل لديك بهذا الشكل ..  وسوف تكون الطبقات والمجموعات بهذا الشكل ...  ------------------------------------------------------------------------------ 7- الآن انتهينا من الــ Photoshp ... سوف ننقل عملنا إلى الـــ ImageReady بالضغط على زر النقل الموجود في أشرطة الأدوات ..  ------------------------------------------------------------------------------ 8- بعد ما تم نقل العمل إلى الإيمج ردي بشكل سليم ... قم بالضغط على Slices من قائمة الأدوات ... ثم Create Slices From Guides ... كما بهذه الصورة ..  ------------------------------------------------------------------------------ 9- سوف تلاحظ ظهور التصميم لديك بهذا الشكل ...  ------------------------------------------------------------------------------ 10- الآن قم باختيار أداة Slice Tool من الأدوات  ...------------------------------------------------------------------------------ 11- الآن سوف نقوم بدمج كل مقطع بسلايس ... فقط بعد ما اخترت أداة Slice Tool قم بالضغط على أحد زوايا أي مقطع واسحب يدك لتكمل مربع .. مثلا أنا قمت بالضغط على الزاوية في أعلى الصفحة ودمجت السلايسات تبع اللوقو كلها في سلايس واحد ... لاحظ الصورة ..  وأيضا قمت بدمج سلايسات الصورة كلها بسلايس واحد ... انت ما عليك إلا دمج السلايسات كما بالصورة السابقة ..... أو حسب حاجتك كما وضحت أنا ... 12- الآن قم باختيار أداة Slice Select Tool ....  ثم قم بالضغط على الصورة التي وضعنا فيها shammel.net في نهاية التصميم مثلا ... وانتقل إلى النوافذ التي في يمين الصفحة .. واختر نافذة Slice كما بالصورة هذه ..  لاحظ عند type نضع Image ... يعني النوع : صورة ... وعند URl نضع الرابط الذي اذا ضغطنا على هذه الصورة الصغيرة يفح لنا هذا الرابط .. وبما أني أنا قمت بتسمية الصورة shammel.net سوف أضع بهذا المكان فقط الأعضاء المسجلين يمكنهم رؤية الروابط قم بتسجيل الدخول اولا [نشط عضويتي] - [طلب كود التنشيط] - [نسيت كلمة السر] - [لأصحاب ايميلات الهوتميل ] - [تسجيل كعضو جديد] ...فعندما تقم بالضغط على الصورة تفتح لك صفحة شامل نت الرئيسية ... ------------------------------------------------------------------------------ 13- الآن سوف نقوم بعمل الحركة للأزرار التي أخبرتكم عنها في بداية الشرح ... أ- اختر أداة .ب- وقم بالضغط على أحد الأزرار بالوسط ... كما بالصورة ...  جـ- قم بفتح نافذة Web Content من النوافذ التي على يمين البرنامج ... فتظهر لك هذه النافذة ...  د- عندما تحرك السهم إلى الأعلى أو إلى الأسفل لتلك النافذة سوف تجد الزر الذي ضغطت عليه قبل قليل في هذه النافذة ... عندما تجده قم بالضغط عليه بالزر اليميني ... ثم اختارAdd Rollover State ... كما بهذه الصورة ...  هـ - فيظهر لك بجانب الزر داخل النافذة ... الـــ over ... كما بالشكل ..  و- اضغط عليه بالزر اليميني ... واختر Activate Rollover State ... مثل ما بالصورة تماما ..  ي- الآن انتقل إلى الطبقات (( Layar )) كما بالصورة ..  خ- قم بتنفيذ الخطوات التي بالصورة ... فقط فعل وألغي التفعيل ...  ح- ارجع إلى النافذة السابقة عند الـــ over .. واضغط عليها بالزر اليميني واختر Activate Rollover state ... كما بالصورة التالية ...  ------------------------------------------------------------------------------ 14- الآن انتهينا من عمل الحركة للزر ... لتجربت الزر .. اضغط على ايقونة التحكم الموضحة بالصورة التالية ....  ثم مرر الماوس فوق الزر فسوف تلاحظ تغير لون خلفية الزر وكذلك تغير لون الخط .... ولكن اصبر قليلا عندما تضغط على تلك الأداة .. فالبرنامج ضخم ويحتاج للوقت من أجل الفهم .. ------------------------------------------------------------------------------ 15- لتجعل عند النقر على الزر وليس تمرير الماوس فوق يتغير اللون ... ارجع للــــ over واضغط على الزر اليميني واعمل كما موضح بالصورة ...  ------------------------------------------------------------------------------ 16- وأخيرا انتهينا من عمل صفحة الويب ... الآن لمعاينة الصفحة اضغط على ايقونة النت اكسبلورل الموجود بجانب أداة معاينة الزر ..  ------------------------------------------------------------------------------ 17- وأخيرا ... وأخيرا .. لحفظ صفحة الويب ... اضغط على File ثم Save Optimized As ... أو اضغط Ctrl+Alt+Shift+s ... كما بالصورة ...  ثم اختر مكان الحفظ واضغط على save .... ألف مبروك تمت العملية بنجاح الدرس صعب شوي ويحتاج تركيز ويحتاج خبرة ... لذلك أعتقد أن لمبتدئين لم يطبقوا هذا الدرس بنجاح .. لذلك لا تتردد بوضع سؤال وذكر الخطوة التي توقف عندها ... حتى نسهل عملك ... لمشاهدة صفحة الويب التي طبقناها في الدرس ... فقط قم بتحميلها من هنا ... الزر اليميني ... ثم حفظ الهدف باسم .. فقط الأعضاء المسجلين يمكنهم رؤية الروابط قم بتسجيل الدخول اولا [نشط عضويتي] - [طلب كود التنشيط] - [نسيت كلمة السر] - [لأصحاب ايميلات الهوتميل ] - [تسجيل كعضو جديد] لا تضع رد إذا كان التطبيق على الدرس ليس معك ... هههههههههه ... مع تحيات أخوكم ... Beso __________________ آخر تحرير بواسطة 3yoonh : 12-13-2005 الساعة 05:17 PM. السبب: تعديل الرابط.. بناء على طلب كاتب الموضوع.. |
||||||
|
|
|
|
|
|
|
12-13-2005, 02:43 PM
|
#2 (permalink) | |||||||
|
مراقب عـــام
|
اش اش خيالي صدق حتى صورك في الشرح فيها تطور....  بس وين تطبيقك انت الصفحه ما هيب مضبوطه عشان اجيب تطبيقي.... بس طريقة الحفظ كصفحة web لك عليها شوي.... انا افضل الشغل يكون بالبرنامجين الفوتوشوب والفرونت بيج افضل من انه يكون كله بالفوتو يعني انت ضبطت الوجهه للموقع وخلصت وقسمت الصور في الفوتو خلاص تحفظها مرتين الاولى ايمج فقط وترجع تحفظها مره ثانيه صفحة هتمل وبعدين تنتقل للفرونت بيج عشان تحدد الروابط .... وكذا اضمن.... يعطيك العافيه كفيت ووفيت وعدل رابط تطبيقك عشان العالم تجيب تطبيقها... <<<<< يتهرب  تحياااااااااااتي..... __________________ |
|||||||
|
|
|
|
12-13-2005, 04:32 PM
|
#3 (permalink) | ||||||
|
شاملي ماحد قدة
|
الله يعافيك أختي عيونة ... وبعدين شو هالحجج الي تججت فيا (( ههههههههه )) واذا تطبيقي مو طالع يعني ... وين بتهربي مني ... هي مو حجة ... بدي شوف التطبيق هههههههه ... ممكن الواحد يشتغل على البرنامجين .. ولكن في ناس ممكن تكون غير خبيرة ببرنامج الفرونت بيج ... فمشان هيك كان الشرح بس للفوتوشوب ... وممكن يكون الفرونت بيج أدق وأسرع ... تحياااااااااتي |
||||||
|
|
|
|
12-21-2005, 05:09 PM
|
#5 (permalink) | ||||||
|
شاملي راعي محل
|
ممكن يا بيسو تفتح لون الصور وتصغر كلمة بيسو على الصور لاني ما افهم شي اذا ما وخرتا هالاشياء __________________ |
||||||
|
|
|
|
01-12-2006, 11:40 PM
|
#7 (permalink) | |||||||
|
شاملي غير شكل
|
مشكوررر والله أخيييي __________________ |
|||||||
|
|
|
|
01-24-2006, 12:49 PM
|
#8 (permalink) | ||||||
|
كبار الشخصيات
|
یسلموا بیسو، درس ممتاز. __________________ فقط الأعضاء المسجلين يمكنهم رؤية الروابط
قم بتسجيل الدخول اولا
[نشط
عضويتي]
- [طلب
كود التنشيط]
- [نسيت
كلمة السر] - [لأصحاب
ايميلات الهوتميل
] - [تسجيل
كعضو جديد] فقط الأعضاء المسجلين يمكنهم رؤية الروابط قم بتسجيل الدخول اولا [نشط عضويتي] - [طلب كود التنشيط] - [نسيت كلمة السر] - [لأصحاب ايميلات الهوتميل ] - [تسجيل كعضو جديد] |
||||||
|
|
|
.gif)
