هذا الموضوع عبارة عن سلسلة (( كيف تبني موقعك الإلكتروني على الإنترنت بنجاح ))
تصفح وتابع :
* الجزء الأول
* الجزء الثاني
* الجزء الثالث
* الجزء الرابع
أو أكمل الجزء الخامس معنا هنا …
يتكون الجزء الخامس من النقاط التالية :
* تصميم الموقع أو المدونة.
* تقطيع التصميم بعد تصميمه.
* تركيب التصميم في الموقع او المدونة.
بسم الله الرحمن الرحيم , نبدأ
تصميم الموقع أو المدونة
سنبدأ في هذا الجزء بتصميم الموقع أو المدونة.
هناك أمور يجب ان نحددها في تصميم الموقع مثل لون الموقع وتنسيق الموقع وأن نحدد العرض المناسب للموقع,
هل نريده متمدد بنسبة 100% او نريده ثابت بمقاس واحد ؟ أغلب المواقع المشهورة تستخدم تصاميم ذات عرض ثابت مثل Yahoo, Wordpress, Facebook, YouTube وطبعاً الموقع الشهير عالم التقنية
لذالك سنقوم بعمل تصميم ذات عرض مقاس ثابت , مقاسات العرض الثابته يفضل أن يكون أقصى عرض 1003px لكي تكون مناسبه لأكثر الشاشات المستخدمه حالياً وهذا ما يتم عمله لأكثر المواقع الشهيره, سابقاً كانت تستخدم مقاسات العرض 779px لكي تتناسب مع دقة الشاشة 800*600 لجميع المستخدمين لكن بدأت هذه الظاهره تنقرض وهذا لأن أغلب اذا ما كان كل المستخدمين يستخدمون حالياً مقاس دقة شاشة اكبر من 800*600 مثل 1280*800.
هذا هو تصميمي الذي سأشرح كيفية عمل مثله بالفوتوشوب وسأشرح طريقة تقطيعه وتركيبه كمدونه
أضغط على الصورة لتكبيرها
وطبعاً بعد ما نخلص من عمل وتقطيع الموقع راح أطرح الستايل مجاناً للجميع وكذالك مصدر الفوتوشوب موجود في هذا الموضوع
بعض الأجزاء في التصميم مثل اسم الموقع والجمله التي تحت اسم الموقع وعناوين المقالات وعناوين القوائم الجانبية والنصوص المختلفه توضيحيه للتصميم وهي عباره عن امثله بحيث تقوم بتصميمها لكي ترى النتيجه النهائيه وبعد تقطيع واخذ الصور من التصميم تكتب النصوص بصيغة HTML وتنسق نوع الخطوط وألوانها بإستخدام CSS بنفس الخطوط والألوان التي استخدمتها في التصميم لكي تتناسق بالشكل المطلوب.
الأن بسم الله نبدأ
نفتح الفوتوشوب
نفتح صفحة جديدة بالضغط من القائمة العلوية ( File -> New ) أو ( ملف -> جديد )
اكتب اسم الملف الجديد << حركه مالها داعي بس احب اتفلسف , اكتب العرض 1003 ويجب ان لا يتعدى هذا الرقم دائماً في تصميم المواقع الإلكترونية كمعيار لأغلب مواقع الشركات العالمية, دائماً دقة الوضوح في تصميم المواقع يجب ان تكون 72 اما في انواع التصميم المختلفه تختلف الدقه فمثلاً في حال كان التصميم للطباعه فستكون افضل دقة هي 300 بيكسل.
محتويات الخلفية موضوعه على شفاف يفضل جعلها أبيض بدل شفاف او يمكنك تعبئة الخلفيه باللون الأبيض بعد إنشاء الصفحة بأداة التعبئة
الان بعد إنشاء الصفحة نختار أداة المربع من هنا
ونرسم مستطيل كبير في أعلى الصفحة بهذا الشكل تماماً , لون المربع يمكنك وضعه أي لون تريده لا يهم
الان من نافذة الطبقات اضغط الزر الأيمن من الفأرة ثم اختر خيارات الدمج او Blending Options وهي على نفس الطبقه التي انشأناها قبل قليل التي تكون طبقة الشكل المستطيل
في حال ان نافذة الطبقات غير موجودة توجه لاعلى القائمة ثم اختر ( نافذة ثم طبقات ) او windows ثم layers
ثم عند فتح النافذة قم بإختيار تغشية متدرجة بالألوان 185ba2 إلى درجة اللون 92c7fd
كما رسمنا المستطيل الكبير في اعلى الصفحة نرسم مستطيل آخر تحته ولكن ارتفاعه اصغر بكثير
باستخدام اداة رسم الشكل المربع التالية :
و في هذه الحاله يفضل ان يكون اللون نفس اللون الموجود بالصورة وهو درجة اللون هذه ( 86c542 ) #
الأن نريد ان نضع على هذا المستطيل الأخضر تعبئة محشيه او قناع مثلاً نقاط بشكل جميل
فبالتالي نفتح صفحة جديدة بالضغط على ملف جديد او file new ثم نحدد المقاس العرض 7 والارتفاع 7 ثم نختار اداة القلم وليس الفرشاة وذالك بالضغط عليه من الأدوات الظاهره لك او اذا لم تكن ضاهرة فبالضغط على الزر الأيمن من الفأرة على اداة الفرشاة ثم اختيار اداة القلم
نختار اللون كما هو موجود في الشكل التالي بدرجة اللون هذه ( c7e4a7 ) # ثم نرسم شكلاً جميلاً بإمكانك عمل كما رسمت او الإبداع بنفسك بكل سهوله بالتنقيط
ولا تنسى ان تكون الخلفية شفافه لكي يضهر اللون الذي سنضع عليه القناع
الأن لنجعل هذا التصميم نموذج قناع لإستخدامه في اداة التعبئة المحشيه بالضغط على تحرير ثم تحديد النموذج او Edit ثم Define Pattern
واكتب اسم النموذج ثم اضغط موافق ونغلق الصفحة التي انشأناها
الأن نرجع إلى مستطيلنا الطويل الأخضر ونختار نمط الطبقه بالضغط على الطبقه بالزر الأيمن ثم اختيار خيارات الدمج او Blending Options
نختار نمط تعبئة الحشو ونختار من انواع الحشو وسنجد الحشوه التي انشأناها سابقاً , نختار عليها ثم موافق
سترى ان الشكل المستطيل ضهرت عليه نقشة جميلة ,
الأن نريد ان نصمم خلفية الجزء السفلي من الموقع والذي يسمى بـ (Footer) نقوم بمضاعفة طبقتي المستطيلين بأختيار واحد منهم ثم من لوحة المفاتيح الضغط على CTRL مع اختيار الطبقات التي تريدها وفي حالتنا هذه يكون المستطيل الآخر
ثم نضغط بالزر الأيمن من الفأرة ونختار مضاعفة طبقات او Duplicate Layer
http://www.tech-wd.com/wd/wp-content...-wd-web/11.gif
سنجد ان الطبقتين تضاعفت
http://www.tech-wd.com/wd/wp-content...-wd-web/12.gif
الأن نختار اداة التحريك او الـ move من ادوات التحكم او بالضغط على لوحة المفاتيح حرف V
http://www.tech-wd.com/wd/wp-content...-wd-web/13.gif
طبعاً بما انك قمت بمضاعفة الطبقتين ستكون الطبقتين المتضاعفة لا زالت محدده عليها كما في الصورة السابقه ولكن اذا لم تكن محدده قم بتحديد الطبقتين التي تضاعفت قبل قليل
ثم في الصفحة اسحب الطبقتين إلى الأسفل واقلبهما بالضغط على CTRL + T ثم الضغط على الزر الأيمن من الفأرة واختيار قلب افقي او دوران افقي او Flip Vertical
بعد ذالك نود ان نعكس تدرجات الخلفية التي في المستطيل الكبير لكي يكون تصميماً جميلاً بشكل افضل , فنختار طبقة المستطيل الكبير ونختار على خيارات الدمج او Blending Options ثم في نمط تعبئة متدرجة نضع صح على ( عكس ) او Reverse
http://www.tech-wd.com/wd/wp-content...-wd-web/14.gif
ليصبح لدينا مثل هذا الشكل
http://www.tech-wd.com/wd/wp-content/uploads/14a.gif
الأن لدينا خلفية الجزء العلوي (Header) وخلفية الجزء السفلي (Footer) , ونريد ان نصمم خلفية جزء المحتوى او الجزء الوسطي (Content, Middle)
نختار اداة رسم الشكل المستطيل ذو الزوايا المائلة ونختار درجة الميلان 25 بكسل ( درجة الميلان تكون في أعلى القائمة )
http://www.tech-wd.com/wd/wp-content...-wd-web/15.gif
نرسم شكل مستطيل كبير في وسط الصفحة يقطع جزء بسيط من الجزء العلوي والجزء السفلي على ان يكون درجة اللون له ( cdeaf9 ) # كما في الصورة التالية
http://www.tech-wd.com/wd/wp-content/uploads/15a.gif
الأن على نفس الطبقة نختار خصائص الدمج او Blending Options لكي نقوم بتغيير نمط هذا المستطيل ذو الزوايا المائلة
من على خيارات الدمج: تخصيخ نضع دمج متطور وتضليل بقدر 59% او قريبه منها لكي يكون المستطيل شبه شفاف ويبين الجزء العلوي والسفلي من التصميم بشكل جذاب
http://www.tech-wd.com/wd/wp-content...-wd-web/16.gif
مع اختيار خاصية الحدود بمقاس 13 بكسل واللون ( 70a7e1 ) #
http://www.tech-wd.com/wd/wp-content...-wd-web/17.gif
لتظهر النتيجة كما في الشكل التالي :
http://www.tech-wd.com/wd/wp-content...-wd-web/18.gif
الأن لدينا تصميم خلفيه جميله للموقع
سنبدأ بملئ محتوى الجزء العلوي بكتابة اسم الموقع اولاً بأختيار أداة النص
http://www.tech-wd.com/wd/wp-content...-wd-web/19.gif
والكتابة في اعلى الصفحة في مكان مناسب يكون موازي لبداية خلفية المحتوى ويكون خصائص الخط كالتالي
http://www.tech-wd.com/wd/wp-content...-wd-web/20.gif
ومن ثم نكتب في اسفل عنوان الموقع هذا السطر ( الرئيسية | من أنا ؟ | سجل الزوار | إتصل بي ) والذي يمثل القائمة العلوية ونقوم بتحديد الكلمات ووضعها باللون 3372b6
http://www.tech-wd.com/wd/wp-content...-wd-web/21.gif
وتحديد الخطوط ووضعها باللون 96c4db لتظهر بشكل جميل وجذاب
http://www.tech-wd.com/wd/wp-content...-wd-web/22.gif
بكل بساطه نرسم مستطيل صغير تحت كلمة الرئيسية ( هذا المستطيل يمثل بأنك انت في هذه الصفحة عند الدخول على الموقع ) سنتطرق لكيفية عملها لاحقاً بإذن الله في درس عملية تقطيع وتركيب الستايل في المدونة
http://www.tech-wd.com/wd/wp-content...-wd-web/23.gif
الأن بودي ان نضع في الجانب الأيسر من التصميم صورة للـ RSS ويمكنك أختيار صوره متنوعة كثيرة ومختلفة من محرك بحث قوقل للصور من هنا
rss icons - Google Image Search
ستجد الكثير والكثير من الصور الجميلة والرائعة والممتعة المتعلقة بأيقونات RSS او ما تسمى بالخلاصات
فمثلاً انا اخترت هذه الصورة
http://www.tech-wd.com/wd/wp-content/uploads/23a.gif
نقوم بنسخها بالضغط على الزر الأيمن ثم نسخ او نسخ الصورة من المتصفح ثم لصقها في الفوتوشوب بالضغط على CTRL + V او تحرير ولصق او Edit Paste
ونختار اداة العصا السحرية لنحدد الجزء الأبيض من الصورة بالضغط على الجزء الأبيض ثم من لوحة المفاتيح نضغط Delete
http://www.tech-wd.com/wd/wp-content...-wd-web/24.gif
لتظهر النتيجة الجميلة التالية :
http://www.tech-wd.com/wd/wp-content...-wd-web/25.gif
لكي يتناسق التصميم من الممكن تغيير لون الصورة بالضغط على CTRL + U ثم اختيار اللون المناسب كما في النافذة من الصورة التالية
http://www.tech-wd.com/wd/wp-content...-wd-web/26.gif
لكي نزيد من جمالية التصميم ووضحه نكتب فوق الصورة RSS باللون الأبيض بكل بساطة
http://www.tech-wd.com/wd/wp-content...-wd-web/27.gif
الأن خلصنا من محتوى الجزء العلوي باقي التشطيبات عليه مثل ما يقولون ,
فراح نستخدم الفراشي لزيادة تجميل الجزء العلوي او الـ Header
لتصبح النتيجة كالتالي :
http://www.tech-wd.com/wd/wp-content/uploads/28.gif
ستجد الكثير والكثير من الفراشي من هنا Free Photoshop Brushes at Brusheezy!
وراح اضيف لكم الفراشي المستخدمة في التصميم في نهاية الموضوع
بعد تحميل الفراشي التي تناسبك ستجد طريقة تركيب الفرشاة من هنا
دامنا خلصنا من الجزء العلوي راح نتفرغ للجزء السفلي Footer عشان نتفرغ للجزء الوسطي المتعلق بمحتوى الموقع
نضيف هذا النص في الجزء السفلي في وسط الصفحة ( جميع الحقوق محفوظة powerd by Wordpress تصميم عبدالملك ) اللهم استبدال تصميم عبدالملك بأسمك
http://www.tech-wd.com/wd/wp-content/uploads/29.gif
الأن نضيف على الجزء السفلي تأثيرات فراشي كما في الجزء العلوي لتصبح النتيجة كالتالي (وكما اوضحت بأن الفراشي ستكون مطروحة في أسفل الموضوع)
http://www.tech-wd.com/wd/wp-content/uploads/30.gif
الأن ننتقل إلى تصميم الجزء المتعلق بمحتوى الموقع الذي يكون في وسط الموقع
http://www.tech-wd.com/wd/wp-content/uploads/31.gif
بسم الله نبدأ
لننتهي من القائمة الجانبية الأن ونختار أداة رسم الخط لنرسم الفاصل بين القائمة الجانبية ومقالات الموقع كالتالي :
http://www.tech-wd.com/wd/wp-content/uploads/32.gif
http://www.tech-wd.com/wd/wp-content/uploads/33.gif
الأن احب اوضح بأن القائمة الجانبية دائماً في المدونات تتكون من قوائم ( عنوان ) و ( قائمة خاصة بالعنوان ) او عنوان ( ومحتوى بسيط ) وهذا ما سنقوم بتصميمه
فنبدأ بالعنوان لنرسم خلفية جميله ونوع ولون نص مناسب للعنوان, نختار اداة الفرشاة
http://www.tech-wd.com/wd/wp-content/uploads/34.gif
ثم نختار من الأعلى شكل الفرشاة من قسم الفراشي الأساسية ونختار شكل الفرشاة هذه
http://www.tech-wd.com/wd/wp-content/uploads/35.gif
ننشأ طبقة جديدة فارغة من نافذة الطبقات لكي نرسم عليها بالفرشاة
http://www.tech-wd.com/wd/wp-content/uploads/36.gif
ثم نرسم في الصفحة بأعلى القائمة الجانبية خط مستقيم بنفس الفرشة التي اخترناها سابقاً ولعمل ذالك اضغط بالفأرة في المكان المناسب مع الضغط على Shift وتحريك الفأرة إلى الجانب الآخر وهكذا سيكون خط مستقيم تماماً غير متعرج
http://www.tech-wd.com/wd/wp-content/uploads/38.gif
لزيادة الجمالية في خلفية العنوان الخاص بالقائمة الجانبية اضفت بالفرشاة باللون الأخضر مستطيل جانبي كالتالي
http://www.tech-wd.com/wd/wp-content/uploads/39.gif
الأن نكتب نص العنوان باللون الأبيض ونوع الخط Arial و حجم
http://www.tech-wd.com/wd/wp-content/uploads/40.gif
هنا أحب أن أبين بأن بعض النصوص مثل التصنيفات واسم الموقع وحقوق الموقع في أسفل التصميم تكون نصيه في الموقع الفعلي بعد التقطيع لذالك يجب على النصوص الحقيقة والتي لن يتم إستخدامها كصورة ان تكون نصوص معروفه مثل Arial أو Tahoma لكي يستطيع اي زائر تشغيلها حيث الخطوط الغير إفتراضيه في انظمة التشغيل لا يمكن تشغيلها للزوار الذين لا يمتلكون هذه الخطوط في اجهزتهم
وبعض النصوص التي صممناها مثل التي في أعلى صورة RSS سيتم قطعها كصوره لكي تكون صورة كاملة برابط واحد
الأن انتهينا من عنوان القائمة الجانبية ننتقل إلى قائمة العنوان وهي كالتالي
نختار أداة الخط
http://www.tech-wd.com/wd/wp-content/uploads/32.gif
ونرسم مستطيل كالتالي باللون cce7f4
http://www.tech-wd.com/wd/wp-content/uploads/41.gif
ثم نرسم النقطه الخاصه بالقائمة والتي تسمى Bullet عن طريق اختيار اداة رسم الشكل المربع
http://www.tech-wd.com/wd/wp-content...h-wd-web/3.gif
ونختار اللون الأخضر 92e33a ونرسم الشكل التالي
http://www.tech-wd.com/wd/wp-content/uploads/42.gif
هنا أحب أن أوضح بأننا في تصميم المواقع نعمل على تناسق الألوان دائماً وهو علم بحد ذاته ونقطة مهمة جداً في تصميم المواقع
الأن نكتب نص القائمة بكل سهولة ( Tahoma , لون أزرق غامق )
http://www.tech-wd.com/wd/wp-content/uploads/43.gif
نقوم بمضاعفة الثلاث طبقات الأخيره التي أنشأناها الخط والنقطة والنص ( عملية المضاعفة شرحناها سابقاً ) ثم نحرك الطبقات المضاعفة للأسفل قليلاً كالتالي
http://www.tech-wd.com/wd/wp-content/uploads/44.gif
نغير كلمة عام إلى برامج او اي قسم مثلاً
http://www.tech-wd.com/wd/wp-content/uploads/45.gif
ونعيد الخطوتين الأخيرتين لكي نضيف اقسام وتصنيفات المدونة لتظهر كالتالي
http://www.tech-wd.com/wd/wp-content/uploads/46.gif
ثم لننشأ قائمة اخرى اسفل قائمة التصنيفات وذالك بمضاعفة جميع طبقات قائمة التصنيفات وتحريكها للأسفل لتصبح كالتالي
http://www.tech-wd.com/wd/wp-content/uploads/47.gif
نغير المسميات من تصنيفات إلى الأرشيف وتغيير القائمة الخاصة بالأرشيف لتكون كأرشفة شهرية كما يتم وضعها في أغلب المدونات
http://www.tech-wd.com/wd/wp-content/uploads/48.gif
ونفس العمل للخطوتين الأخيرتين لعنوان
روابط و منوعات
http://www.tech-wd.com/wd/wp-content/uploads/49(2).gif
تلاحظون بأن تصميم الموقع ليس بالسهولة المتوقعة فتصميم الموقع يأخذ جهد ويأخذ وقت ويأخذ أفكار كثيرة ويأخذ ذوق ويأخذ خبرة !
نرجع لمحور حديثنا الحمد لله خلصنا من القائمة الجانبية وباقي المحتوى التي تكون المقالات من اجزائها عنوان المقالة معلومات عن المقالة ( التاريخ والكاتب والتعليقات ) ونص المقالة وزر ( اقرء المزيد … )
بسم الله نبدأ
نكتب نص ( عنوان مقالة جديدة ) بخط Arial ولون أزرق غامق بخط كبير كالتالي :
http://www.tech-wd.com/wd/wp-content/uploads/50.gif
نرسم اسفله مستطيل بأستخدام أداة رسم الشكل المربع ويكون باللون الأبيض
http://www.tech-wd.com/wd/wp-content...h-wd-web/3.gif
http://www.tech-wd.com/wd/wp-content/uploads/51.gif
ثم نرسم خطين اسفل وأعلى المستطيل الأبيض باللون الأزرق الغامق باستخدام اداة رسم الخط كالتالي
http://www.tech-wd.com/wd/wp-content/uploads/32.gif
http://www.tech-wd.com/wd/wp-content/uploads/52.gif
نكتب داخل المستطيل الأبيض ( المدون : admin عدد التعليقات : 1 التصنيف : غير مصنف ) باللون a0c3ea
كالتالي :
http://www.tech-wd.com/wd/wp-content/uploads/53.gif
ثم نكتب اسفل المستطيل الأبيض نص المقالة باستخدام نوع الخط Tahoma واللون الأزرق الغامق ( يفضل أن يكون نص المقالة نص صحيح لكي تكون الصورة اوضح لك في رؤية التصميم بشكله الجميل وتنسيقه في حال كان غير ذالك )
http://www.tech-wd.com/wd/wp-content/uploads/54.gif
الأن نضع لمسة جمالية باستخدام الفرشاة في صندوق المقالة وذالك في المكان الفارغ بجانب عنوان المقالة لتصبح كالتالي ( وكما اعيد تجدون الفراشي في أسفل الموضوع )
http://www.tech-wd.com/wd/wp-content/uploads/55.gif
الأن بكل بساطة وكما عملنا سابقاً أكثر من مرة نضاعف الطبقات الأخيرة التي أنشأناها المتعلقة بصندوق المقالة ونحركها أسفل الموجودة
لتصبح النتيجة كالتالي
http://www.tech-wd.com/wd/wp-content/uploads/56.gif
نضع ( < السابق ) و ( التالي > ) في أسفل المقالات بنوع الخط Arial باللون 60a01b بالحجم 18pt لتصبح النتيجة كالتالي
http://www.tech-wd.com/wd/wp-content/uploads/57.gif
الحمد لله أنتهينا من هذا الدرس واتمنى ان تكون سهلت عليكم جميع الخطوات ولأي استفسار انا موجود وسيفرحني ويشرفني الرد عليكم
حتى لو أضطريت ان اشرح الموضوع كاملاً بالفيديوفي حال كانت هناك نقطه غير واضحة
لتحميل الفرشات من هنا
لتحميل مصدر الفوتوشوب من هنا
انتظرونا في درس قادم من سلسلة كيف تبني موقعك بنجاح بإذن الله حيث سنتطرق إلى تقطيع وتركيب التصميم كـ XHTML و CSS في مدونة Wordpress
تحياتي للجميع عبدالملك الثاري من عالم التقنية
