الباشمهندس
عدد المساهمات : 8310 عدد المواضيع : 3771 الجنس :
خدمات المنتدى الساعة الآن فى مصر: من فضلك: لاتنسى متابعتنا على:
| موضوع: دورة تصميم استايلات المواقع الجمعة 12 نوفمبر 2010 - 23:51 | |
| دورة تصميم استايلات المواقع
مرحباً أحبتي في الله .. والسلام عليكم ورحمة الله في هذه الدورة بمشيئة الله سنتعلم طريقة ( تصميم استايلات المواقع ) وذلك لكي نكون أصحاب الريادة فيما نريده لمواقعنا . سيتم تقسيم الدورة إلى خمس مراحل سهله ويسيرة بإذن الله وهي : 1 - مرحلة تصميم الاستايل ببرنامج معالجة الصور . 2- مرحلة تقطيع الاستايل . 3- مرحلة ( تجزئة قطع الاستايل ) للحصول على صور أصغر . 4- مرحلة الإعداد ببرنامج فرونت بيج . 5 - مرحلة التركيب النهائي على سيرفر الموقع . التقديم : قبل أن نبدأ ............ دعنا نسال أنفسنا كيف يمكننا تخيل ماسنقوم به : حسناً .. للإجابة على هذا السؤال , كل المطلوب هو تخيل الأشياء التالية : ( أ ) نتخيل الشكل العام للاستايل . ونستطيع مقارنته في الواقع كأحد المباني المكوّنة من ثلاث طوابق وبعض النوافذ والأبواب ( الطابق الأعلى ) نسميه ( الهيدر Header ) , و( الطابق الأوسط ) نسميه ( بلوك الوسط Block ) , و( الطابق السفلي ) نسميه ( الفوتر Footer ) . بالنسبة للنوافذ هي ( البلوكات الجانبية ) والأبواب هي ( أشرطة التنقل ) ونسميها ( الناف بار Navbar ) . ( ب ) نتخيل الألوان التي سنستخدمها في صبغ المبنى , أو في تزيين الاستايل . طبعاً ( اختيار الألوان يخضع لذوقك ) فكلما كانت الألوان متناسقة ومقبولة للزائر , كلما كان الإقبال على موقعك أكثر . ( ج ) نختار مقاول البناء ( أي برنامج معالجة الصور ) وذكرنا سابقاً أن مقاول بناء الاستايل في هذه الدورة سيكون برنامج ( فوتوشوب ) . الآن بعد أن أكملنا تخيّل المعطيات الأساسية لبناء الاستايل دعني أطلعك على ماسنقوم بالتطبيق عليه في هذه الدورة من شرح .. ففي الصورة التالية الجواب لما يمكننا تخيله في تصميم الاستايل: [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
أولا : مرحلة ( تصميم الاستايل ) ببرنامج معالجة الصور . 1 - افتح برنامج ( فوتوشوب ) . 2 - من قائمة ( ملف File) اختر ( جديد New ) . 3- أجعل الصفحة بعرض Width 780 , وطول Height 800 ( بيكسل ) . ثم اضغط ( زر Ok موافق ) 4 - يمكنك جعل خلفية الصفحة ملوّنة بتعبئتها , أو تركها كما هي بيضاء . 5 - الآن أضف ( لير جديد ) وارسم ( بأداة التحديد مستطيلاً ) .... للوصول السريع لأداة التحديد أضغط حرف M من لوحة المفاتيح , سيكون هذا المستطيل هو ( الهيدر Header ). 6- أختر لوناً تريده , ثم املأ مستطيل الهيدر باللون . 7- مرة أخرى أضف ( لير جديد ) واستخدم أداة التحديد لرسم مستطيل أصغر من السابق سيكون هو ( الفوتر Footer ) -- هنا يمكنك نسخ المستطيل السابق ثم لصقه في اللير الجديد وتصغيره , إختصاراً للجهد والوقت . 8 - مرة ثالثة أضف ( لير جديد ) واستخدم أيضاً أداة التحديد لرسم مستطيل سيكون هو ( بلوك الوسط Block ) -- وهنا يمكنك جعله مستطيلا مفردا أو إضافة بعض الزخارف الجانبية إليه .
الصورة التالية توضح ( الليرات المطلوبة ) للبدء في إنشاء ( استايلك الخاص ) . [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة] . هنا المرحلة الثانية , من المراحل المهمة في تصميم استايلات المواقع وهي ( مرحلة تقطيع الاستايل ) . ويستخدم في مرحلة التقطيع برنامج معالجة الصور ( وهو هنا برنامج فوتوشوب ) . إذا كنت جاهز .. ولديك الرغبة للتقطيع .. طبعا تقطيع الاستايل مو التقطيع في الأوادم ههههههههههه . توكل على الله . ولنبدأ : 1 - افتح برنامج فوتوشوب . 2 - قم بفتح صورة تصميم الاستايل ( في المرحلة الأولى قمنا بتصميم الاستايل .. تتذكر ) ممتاز . 3 - أنظر الصورة التالية والتي تظهر ( أداة التقطيع في برنامج الفوتوشوب ) . [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة] أداة التقطيع تظهر ثالث أداة من الأعلى يمين ( عد معي 1 - 2 - 3 ) أسلم هي الثالثة .. اللي تشبه سكين الفواكه هههههه أضغطها لاهنت . 4 - الحين شمّر عن ساعدك وقم بتقطيع الاستايل حسب الصورة التالية .. أو حسب ماتراه مناسب لتصميمك . [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة] الآن ركّز جيداً .. ( أ ) سنقوم بحفظ الصورة بعد التقطيع . نضغط قائمة ( ملف file ) في الفوتوشوب ثم ( حفظ للويب save for web ) . حسب الصورة التالية : [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة] ( ب ) أضغط زر ( حفظ save ) [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة] ( ج ) نحتاج الآن ( قبل حفظ الصورة ) إلى إنشاء مجلد نضع فيه ملفاتنا . أتبع الصور التالية لعمل ذلك . [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة] ( د ) سنقوم الآن بتسمية ملف الانترنت .. وهي الصفحة التي ينشئها برنامج الفوتوشوب نظرا لاختيارنا ( حفظ للويب ) . [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة] وبكذا تم حفظ الاستايل بعد تقطيعه وصفحة انترنت ..
------------ المرحلة القادمة بإذن الله هي مرحلة تصغير الصور ( أو تجزئة التقطيع ) والتي تمكننا من اختصار بعض الصور وحذف البعض ----------
| |
|