دورة تصميم استايلات المواقع 613623
عزيزي الزائر / عزيزتي الزائرة يرجي التكرم بتسجبل الدخول اذا كنت عضو معنا
او التسجيل ان لم تكن عضو وترغب في الانضمام الي اسرة المنتدي
سنتشرف بتسجيلك
شكرا دورة تصميم استايلات المواقع 829894
ادارة المنتدي دورة تصميم استايلات المواقع 103798
دورة تصميم استايلات المواقع 613623
عزيزي الزائر / عزيزتي الزائرة يرجي التكرم بتسجبل الدخول اذا كنت عضو معنا
او التسجيل ان لم تكن عضو وترغب في الانضمام الي اسرة المنتدي
سنتشرف بتسجيلك
شكرا دورة تصميم استايلات المواقع 829894
ادارة المنتدي دورة تصميم استايلات المواقع 103798
هل تريد التفاعل مع هذه المساهمة؟ كل ما عليك هو إنشاء حساب جديد ببضع خطوات أو تسجيل الدخول للمتابعة.



 
الرئيسيةتبادل الأعلاناتأحدث الصورالتسجيلدخول

 

 دورة تصميم استايلات المواقع

اذهب الى الأسفل 
كاتب الموضوعرسالة
الباشمهندس

دورة تصميم استايلات المواقع Admin110
الباشمهندس


عدد المساهمات : 8310
عدد المواضيع : 3771
الجنس : ذكر

خدمات المنتدى
الساعة الآن فى مصر:
من فضلك:


لاتنسى متابعتنا على:

 Facebook Twitter YouTube Rss
دورة تصميم استايلات المواقع Empty
مُساهمةموضوع: دورة تصميم استايلات المواقع   دورة تصميم استايلات المواقع I_icon_minitimeالجمعة 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 )

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]



( ج ) نحتاج الآن ( قبل حفظ الصورة ) إلى إنشاء مجلد نضع فيه ملفاتنا .

أتبع الصور التالية لعمل ذلك .
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

( د ) سنقوم الآن بتسمية ملف الانترنت .. وهي الصفحة التي ينشئها برنامج الفوتوشوب نظرا لاختيارنا ( حفظ للويب ) .


[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]


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


------------ المرحلة القادمة بإذن الله هي مرحلة تصغير الصور ( أو تجزئة التقطيع ) والتي تمكننا من اختصار بعض الصور وحذف البعض ----------




>>>>> أضغط الصورة للإنتقال للدورة <<<<<

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
الرجوع الى أعلى الصفحة اذهب الى الأسفل
https://ahlasohba.123.st
 
دورة تصميم استايلات المواقع
الرجوع الى أعلى الصفحة 
صفحة 1 من اصل 1
 مواضيع مماثلة
-
»  برنامج تصميم المواقع html ، Wordpress ، Joomla
» كود متحرك لتضع بة مجموعة من الخيارات مثل كود افضل استايلات الشهر
» المواقع الإسلامية
» كود بار لاشهار المواقع ( جديد )
» للتحميل دورة فوتوشوب بالعربي

صلاحيات هذا المنتدى:لاتستطيع الرد على المواضيع في هذا المنتدى
 :: ركن التصاميم والجرافيكس :: برامج واصدارات الفوتوشوب :: دروس الفوتوشوب للمبتدئين-
انتقل الى: