دورة قوالب ووردبريس[2]: التخطيط على الورق، التصميم، التقطيع.

__________________

بعد أن وُلدت الفكرة، و قمت بدراسة الإمكانية لهذه الفكرة في المرحلة الأولى من دورة قوالب ووردبريس للمبتدئين، واكتمل تخيلك لقالبك الذي ستصممه، بعد التعديلات النظرية، وبعد تعرفنا على بيئة القالب مكتملة، نأتي إلى مرحلة ضرورية جدا، هي تخطيط القالب على الورق.

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


الصورة من الموقع الفرنسي fran6art.com

إذا أردت أن يكون قالبك، كما تخيلته أو أكثر رونقا واحترافية، أنصحك أن لا تلمس الفأرة قبل أن تمسك ورقة وقلما وتخط قالبك أولا بأول، وخطوة خطوة.
---- فكر أولا هل قالبك يحتاج عمودا (بدون قائمة جانبية) أم عمودين (بقائمة واحدة) أم ثلاثة أعمدة (بقائمتين جانبيتين).
---- ثم إبدأ بهيكلة الصفحة، أعلى الصفحة، الروابط الأساسية أو الصفحات، المحتوى في الوسط، القائمة أو القوائم الجانبية، أسفل الصفحة.
---- إذا كنت ستخصص الأقسام الداخلية على ضوء الملفات التي فصلناها في المرحلة الأولى، قم بتخطيط كل ملف على حدة.
- - - - نصيحة: قصد تطوير قالبك أو قوالبك التي أنت بصددها حاول:
- أن لا تخط قبل الإطلاع على أعمال مصممين آخرين لا لتقلدها ولكن لتنمي قدرة الإبداع لديك لتتعلم أساسيات قد تنطبع في عقلك الباطن دون أن تدري حول التصاميم والقوالب.
- هناك أمور بديهية يسمونها بالمعايير القياسية يجب عليك احترامها، لا تجعل رأس الصفحة في الأسفل والقائمة الجانبية في الوسط والمواضيع في الهامش.
- كن بسيطا ما أمكن في تخطيطك.. لا تجعل قالبك رقاقة متشابكة الأسلاك.

للتوسع أكثر في الموضوع (متجدد):
كيف تقوم بتخطيط التصميم

الصور المصغرة للصور المرفقة

 

__________________

لن أستطيع إعطاء الكثير خلال هذه الفقرة، لأنه لا أحد يستطيع أن يعلمك الإبداع كل ما تحتاج تعلمه قليل من الإحتكاك ببرامج التصميم، زيارة مواقع الدونين الكبار، الإطلاع على أعمال المصممين في هذا الميدان:

إليك موقع يجمع أفضل المدونات تصميما، الموقع إنجليزي في انتظار مثيل له بالعربية:

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



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

إلى أن أعود أستودعكم الله

الصور المصغرة للصور المرفقة

 

__________________

استاذي العزيز ... كلمات مختاره بعناية شديده وسرد رائع ..
فكلمة في اذن كل مبتدأ في التصميم .. كل عمل وليدته الفكرة .. اطلع على اعمال من سبقوك .. ولا مانع من تطبيق اي عمل اعجبك ..
بشرط ان يكون بينك وبين نفسك للتدريب فقط ... واكررها مرارا للتدريب .. حتى تتعود على :
تناسق الالوان وتركيبها .. من حيث :
* الألوان المتقاربة ...
* الألوان المتضادة ..
* الالوان المتقابلة ..
- ثم بعدها راح تجد ان تمرسك في استخدام الاداة اكثر يسر وسهولة ..
وهنالك امور كثيرة .. يحتاج الى تفاصيل ..
السموحه

يعطيك الف عافية

مجهود جبار

__________________

أناشد الاخوه الاداريين ... ان يضعوا قسم خاص للدروس والشروحات ..
كما أناشد الأخوه المشاركين في المنتدى استخدام مفتاح للموضوع مثل :
(دورة) ثم عنوان الموضوع
( درس ) ثم عنوان الموضوع
( طلب ) ثم عنوان الموضوع
( تصميم ) ثم عنوان الموضوع
( اضافة ) ثم عنوان الموضوع
هذه المفاتيح راح تساعد كثيرا .. في البحث

صممت قالبك إذن على أحد برامج التصميم، تريد أن تقطعه، لنقوم فيما بعد بتخصيصه ب css و html:

لن أعتمد هنا على طريقة تقطيع الفوتوشوب لأمرين:

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

+ ليس كل التصاميم يستعمل فيها الفوتوشوب، (في تصاميمي أضع الفوتوشوب في المرتبة الثالثة)

سأعتمد إذن طريقة بسيطة، أساسها تحديد العناصر "جرافيكس في الموقع" والتي ستتكرر مع كل عنصر من نفس الفئة، للتوضيح أكثر إليك الصورة التالية.



سأركز على العناصر "الصورة" في القالب:



العناصر باللون الأحمر هي العناصر الصورة: ستلاحظ أنها تتكر في القالب ككل

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

+قم بقص تلك العناصر الحمراء، وضع كل واحدة منها في صورة مستقلة من نوع معين، وأفضل Gif (حاول أن تعرف أكثر حول الصور وملحقاتها).
+ أحضر تلك الورقة التي خططت فيها لقالبك -إن كنت جادا و فعلت ذلك- وعند حفظ كل صورة دون اسمها وحجمها بالبكسل (الطول*العرض)
في تلك الورقة فستحتاجها في خطوات لا حقة.

+ في هذا القالب غيبت الألوان في التصميم واعتمدت على تدرجات الأسود، في حالة وجود الألوان ستحتاج مناسقة ألوان النصوص مع ألوان التصميم لذلك احتفظ بأكواد الألوان المستخدمة في التصميم فقد تحتاجها، لكي توفر جهد اختيارها بأدوات الألوان من بعد.

+ هناك عناصر لا بد أن تتذكرها عند التصميم والتقطيع، وهي التأثيرات التي تريد أن تضيفها للعناصر الفعالة في قالبك . قد تحتوي عناصر القائمة مثلا على روابط تتغير خلفيتها عند الإشارة بسهم الفأرة، وأخرى عند النقر # العناصر المفعلة # وأخرى للروابط التي سبقت زيارتها...
هذه الخلفيات عليك حفظها كذلك وتدوينها في الورقة مع الصور السابقة.
+ كذلك هناك عناصر في قوالب المدونات قد تحتاج لصورة رمزية مثل النص المقتبس blockquote أو عناصر أخرى تضيفها لاستخدامها في التدوين فيما بعد (كعنصري التنبيه والقصيدة في مدونتي)

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

في حال وجود تقصير أو خلل في شرح خطوة ما أرجو تنبيهي.

الصور المصغرة للصور المرفقة

 

__________________

أخي زلزال شكرا لإضافتيك بخصوص الامر الثاني لا أدري الحكمة من إيراده هنا، اتكلم شو عملت أنا يعني
سأحاول الإتزام بها ما أمكن شكرا جزيلا لك


أخي أبو زياد شكرا لمرورك الكريم دمت بود

__________________

الله يعطيك العافية

جهد تشكر عليه استاذي

__________________

بارك الله فيك
جهد جبار
لغة سهله في الشرح..

جزاك الله خير..

__________________

شكرا لمرورك الطيب أخي فيصل
هو واجبي تجاه هذا الصرح العظيم

بوركت وبوركت خطواتك التي قادتك إلى هنا أخي عبود
طبعا لأنها موجهة للمبتدئين بالدرجة الأولى حاولت تغييب المصطلحات التقنية كثيرا.

__________________

تم الاستيعاب ,,

جزاك الله خيرا

و بارك بك ,,

السلام عليكم ورحمة الله وبركاته ....
اخوي اقلام ... اعذرني على التأخير في الرد عليك ...
وآسف على الكلام اللي بدر مني .. لكن لم يكن موجه اليك ... الكلام لنا جميعا ...
حتى يكون هنالك التنظيم في المنتدى ...
فقط اخذني الحماس قليلا

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

__________________

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

والله يعجز اللسان عن الشكر أخي الكريم ..

جزاك الله خير ..

__________________

أخي thequeen شكرا جزيلا لمرورك الكريم
أحمد الله أني وفقت في التوصيل، أعذرني لم أوفك حقك من قبل.

أختي فاطمة، إنما هو شيء يسير من واجبي أختي، شكرا لمرورك الطيب
دمت بود

__________________

جزاك الله ألف خير..

أبدعت وكأنما أنت معلم متخصص..

ألف ألف ألف شكر....

شكرا لك أختي الهاشمية
هو بعض مما تعلمناه من هذا المنتدى الجليل
والفضل له بعد الله عز وجل

__________________

شكرا اخي علي الشرح
لاكن ممكن مقاسات التصميم المناسبة

يعطيك العافية يالغالي

وعساك على القوة

جاري التطبيق

__________________

شكرا على الشرح الواضح

جزاك الله خيرا