[الدرس مفصل الثاني] تصميم قالب template جملة joomla بالفوتوشوب

[linnou]

[الدرس مفصل الثاني]


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




http://z00m-n.com/index.php

http://z00m-n.com/images/stories/z00m-n82ea8c6e6d.gif

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



http://www.z00m-n.com/up/uploads/images/z00m-n37d4fd9524.jpg




قم بتحميل برنامج الفوتوشوب من الروابط التالية:


تحميل البرنامج من هنا (http://download.adobe.com/pub/adobe/photoshop/win/cs2/Photoshop_CS2_tryout.zip)





قم بتشغيل برنامج الفوتوشوب.



قم بفتح مساحة عمل جديدة بالقياسات التالية لتصميم الهيدر header ((سيتم تصميم الهيدر header والفوتر منفصلين للتسهيل وهذا ما يميز جملة joomla ))



http://www.z00m-n.com/up/uploads/images/z00m-nb5674fe6a9.jpg






سيكون شكل العمل كالتالي:


http://www.z00m-n.com/up/uploads/images/z00m-nae21565d21.jpg


قم بإختيار أداة التعبئة وإختيار اللون المناسب ( إختياري ) كما موضح في الصورة.


http://www.z00m-n.com/up/uploads/images/z00m-n3c8cd097dc.jpg




قم بتعبئة مساحة العمل كما موضح في الصورة.


http://www.z00m-n.com/up/uploads/images/z00m-n1b99d26300.jpg


قم بإختيار طبقة التعبئة وقم بالنقر فوق الطبقة نقر مزدوج.


http://www.z00m-n.com/up/uploads/images/z00m-n13c41b23fc.jpg


قم بإختيار الإعدادات كما موضح في الصورة.


http://www.z00m-n.com/up/uploads/images/z00m-nb13809cf0f.jpg




وستكون إعدادت التدرج كالتالي:


http://www.z00m-n.com/up/uploads/images/z00m-n97adda6595.jpg


ستكون النتيجة كالتالي:


http://www.z00m-n.com/up/uploads/images/z00m-nf6ab691200.jpg


قم بإختيار أداة المربع وقم بإختيار لون أغمق قليلاً كما موضح في الصورة.


http://www.z00m-n.com/up/uploads/images/z00m-n450c4e1cdb.jpg


قم برسم مستطيل في نهاية مساحة العمل كالتالي:


http://www.z00m-n.com/up/uploads/images/z00m-n041b89e40c.jpg


قم باختيار طبقة المستطيل وقم بالنقر المزدوج فوق الطبقة.


http://www.z00m-n.com/up/uploads/images/z00m-n6e0766289e.jpg




إختار الإعدادات التالية كما موضح في الصورة.


http://www.z00m-n.com/up/uploads/images/z00m-n3a8b89a930.jpg


ستكون النتيجة كالتالي:


http://www.z00m-n.com/up/uploads/images/z00m-n9017a5f024.jpg


بعد إضافة بعض الإضافات واللمسات على التصميم ليكون بالشكل التالي ( إختياري )


http://www.z00m-n.com/up/uploads/images/z00m-n54db8f6301.jpg


قم بإختيار أداة التقطيع كما موضح في الصورة.


http://www.z00m-n.com/up/uploads/images/z00m-n1097d3125a.jpg


قم بتقطيع الصورة بالطريقة الموضحة ( مع الإنتباه لمنطقة التمدد )


http://www.z00m-n.com/up/uploads/images/z00m-nb56b1782f1.jpg


قم بالذهاب إلى قائمة File وإختار التالي:


http://www.z00m-n.com/up/uploads/images/z00m-n92b70ce70a.jpg




ستظهر نافذة جديدة.


http://www.z00m-n.com/up/uploads/images/z00m-n07b7d1084b.jpg


قم بحفظ العمل كما موضح في الصورة.


http://www.z00m-n.com/up/uploads/images/z00m-nc005dee0b2.jpg


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


http://www.z00m-n.com/up/uploads/images/z00m-nbc3636124b.jpg


وهذا هو الشكل النهائي للفوتر


http://www.z00m-n.com/up/uploads/images/z00m-nc8effde59a.jpg





https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©