admin
10-30-2013, بتوقيت غرينيتش 03:46 AM
بسم الله الرحمن الرحيم
أهلا و سهلا بكم في أول حلقة من حلقات تصميم استايل style للسكربت الشهير في كارد
باسم الله نبدأ :
لتعرف كيفية تحميل السكربت على موقعك و الذي سوف نقوم بالتعلم عليه من هنا :
http://www.allulu.org/vb/showthread.php?t=155
النسخة معربة بالكامل و اتبع الطريقة في موضوع النسخة
الآن بعد تحميل النسخة أدخل على لوحة التحكم عن طريق هذا الرابط :
http://www.name.com/vcard/admin
اسم المستخدم : Allulu
الباسوورد : allulu.org
يمكن تكون عندك نسخة أخرى 2.9 أو أي نسخة إصدار 2 و اليوسر و الباسوورد غير المعطى فعلى حسب اللي عندك
على اليسار قائمة لخيارات التحكم انزل تحت في القائمة راح تلاقي خيار اسمه "قالب template" و فيه كلمة (تحرير) اضغط عليها .. الآن دخلنا إلى قائمة القوالب و راح نشتغل فقط على القوالب التالية في جميع الحلقات :
1- header لوضع صورة البانر العلوية و قائمة الخيارات و خلفيتها
2- footer لوضع صورة سفلية (الفوتر)
3- mainpage لوضع صورة ترحيبية و صور تجميلية للرئيسية و تغيير خلفية الصفحة الرئيسية
4- browsecategory لنغيير خلفية الأقسام
5- postcard_imagelink لتغيير خلفية بطاقة ما
6- category_imagelink لتغيير خلفية عدد البطاقات في الرئيسية
7- newcardspage لتغيير خلفية صفحة جديد البطاقات
8- toppage لتغيير خلفية صفحة أفضل البطاقات
9- topratedpage لتغيير خلفية صفحة الأكثر ترشيحا
10- helppage لتغيير خلفية صفحة المساعدة
11- create لتغيير جزء من خلفية صفحة البطاقة و خيارات الإرسال
12- create_form لتغيير جزء من خلفية صفحة البطاقة و خيارات الإرسال
13- rating_box لتغيير خلفية تقييم البطاقة
و سوف نتناول في هذه الحلقة تصميم صور للفي كارد و هي صور قليلة و عددها 8 صور فقط و هي :
1- البانر
2- الفوتر
3- صورة تجميلية في الصفحة الأولى
4- صورة ترحيبية في الصفحة الأولى
5- خلفية صغيرة للاستايل style
6- صورة لقائمة السكربت
7- خلفية لصورة قائمة السكربت
8- صورة مربعة بشكل جميل للأقسام
ملاحظة : أهم شيء إنك تشتغل على الاستايل style اللي أنا مركبه في البرنامج و هو الاستايل style الوردي راح نشتغل عليه لأنه كل شيء فيه جاهز و الحلقات كلها تعديلات بسيطة في الاستايل style
الآن نبدأ في التصميم .. باسم الله نبدأ :
قبل كل شيء في مجلد vcard نقوم بإنشاء مجلد لصورنا و تصميمنا الذي نريد تصميمه و نقوم بتسميته على سبيل المثال allulu و جميع الصور التي سنقوم بتصميمها نضعها في هذا المجلد و عددها ثمانية صور
افتح الفوتوشوب على المقاسات التالية :
Width العرض = 779 بكسل (إجباري)
Height الطول = 200 بكسل (اختياري)
قم بتصميم بانر في المقاس الذي أنشأناه و عند الانتهاء قم بتخزينه بصيغة الفوتوشوب PSD و بصيغة jpg أفضل من gif و أعطيه اسم مثلا banner و من ثم نقوم بفتح عمل جديد بنفس العرض و لكن لو يكون الطول أصغر يعني العرض = 779 و الطول = 150 بكسل مثلا و نقوم بتصميم صورة سفلية للفوتر يعني و لو نعطيها اسم footer يكون تمام
الآن نختار لون للخلفية و نقوم بإنشاء صورة جديدة بمقاس 2 بكسل للطول و العرض لانها سوف تتجمع لكامل الصفحة و لا نريدها كبيرة لكي لا تأخذ مساحة دون فائدة .. بأداة التعبئة كما في الصورة نقوم باختيار لون و نقوم بتعبئة العمل باللون و اللون طبعا سيكون الخلفية (لو يكون لون أفتح من البانر أفضل) :
http://www.allulu.org/dros/vcard/01/01.gif
الآن نقوم بتخزين الصورة على صيغة gif باسم back.gif و مرة أخرى باسم background.gif و الصورة background.gif نضعها في مجلد images فوق الصورة القديمة يعني على هذا الامتداد : vcard/images .. لو تقوم بالذهاب إلى صف الفوتوشوب و تتعلم درس مفصل النقوش و الدمج لأنه تقدر تستخدمهم و تحترف فيهم .. فقط الدرس مفصلين يسوولك استايل style و الدمج أهم شيء مشان تسوي بانر بشكل جميل و مش لازم تمدد طبعاً و في هذه الحلقات ما في تقطيع يعني أسهل بكثير من الفي بي
المهم الآن نقوم بفتح عمل جديد (كل صورة لها عمل جديد) بمقاس العرض = 280 (أفضل عرض) و الطول (100) أفضل طول .. و نقوم بعمل صورة ترحيبية يعني نقوم بتعبئة العمل بنفس لون الخلفية طبعا و نكتب كلمة ترحيبية جميلة و نستطيع أن ندمج بعض الصور و نكتب فوقهم كلمة جميلة ترحيبية بخط جميل و مرتب و لو دمجت انتبه لا تخلي حواف الصور ظاهرة يعني حاول تمسح بأداة التدرج كما في درس مفصل الدمج لأنه لو خليت الحواف ما راح تكون الصورة الترحيبية جميلة في المقدمة و نقوم بتخزين الصورة الترحيبية بصيغة gif أو jpg لو سويت كلمة مضيئة مثلا طبعا راح تخزنها بصيغة gif و درس مفصل الكلمة المضيئة في صف الفوتوشوب و نعطي الصورة مثلا اسم main-middle
الآن نفتح عمل جديد بمقاس العرض = 250 بكسل و الطول = 270 بكسل و كلاهما كما تحب و لكن لو يكون نفس المقاس أو أصغر أفضل .. نقوم بعمل صورة تجميلية مثلا نقوم بوضع صور و ندمجها و خلفية الصورة مثل الخلفية اللي سويناها للاستايل style أهم شيء و من ثم لا نترك حواف للصور المدموجة مثل ما قلنا في الصورة الترحيبية و نقوم بتخزين الصورة بصيغة jpg أو gif و لن أتكلم مرة أخرى عن الصيغ و لك الخيار على حسب عملك و نعطي الصورة مثلا الاسم main-left
الآن ستكون أقسام السكربت 6 أقسام و هي :
1- الرئيسية
2- جديد البطاقات
3- أفضل البطاقات
4- الأكثر ترشيحا
5- أخبر صديقك
6- مساعدة
الآن نقوم بفتح عمل جديد بعرض = 530 تقريبا و طول = 55 على حسب ما إنت بتحب طبعا و نقوم بعمل شكل جميل مثلا نسوي للصورة تدرج كما في الخصائص التي في الصورة التالية :
http://www.allulu.org/dros/vcard/01/02.gif
و من ثم نسحب من أعلى إلى أسفل و يطلع عندنا تدرج في الوسط اللون أبيض
الآن مثلا بنسوي إطار للصورة بأداة التحديد على طبقة جديد نقوم باستخدام أداة التحديد و نرسم على نفس شكل العمل يعني مستطيل و لكن أصغر من العمل كما في الصورة التالية :
http://www.allulu.org/dros/vcard/01/03.gif
و من ثم نقوم بعمل حواف غير حادة عن طريق الضغط من الخيارات من القائمة Select على خيار Modify و نختار Smooth و نعطه القيمة 6 تقريبا أو 5 .. و من ثم نضغط من القائمة على Select و نختار الخيار Inverse أو بالاختصار نضغط من الكيبورد على Shift + Ctrl + I .. أهم شيء ما ننسى إنه عملنا على لير جديد و نقوم بتعبئة التحديد بلون على حسب رغبتنا و نعطي اللير خصائص على كيفنا كما نحب عن طريق الضغط على اللير (الطبقة) كلك يمين و نختار Blending Options و نعطي الطبقة بعض الخصائص الجميلة .. الآن نقوم بكتابة أسماء الأقسام و بينهم مسافة متوسطة أو بينهم أعمدة مثلا و نسويها بأداة التحديد و تلوينها و إعطاؤها بعض الخصائص و طبعا الأعمدة طبقتها تكون تحت طيقة الإطار أهم شيء و نكتب جميع أسماء الأقسام و لما ننتهى نخزن العمل و نعطيه الاسم مثلا menu
الآن نقوم بفتح عمل جديد بنفس طول القائمة السابقة أي أن العرض مثلا = 5 بكسل و الطول = 55 أهم شيء طول خلفية القائمة هذي اللي بدأنا فيها تكون بنفس طول القائمة و نقوم بعمل تدرج مثلا مثل تدرج القائمة في الأول و نخزن الصورة و نعطها اسم مثلا menu-back
أخيرا نفتح عمل جديد لتصميم صورة لأسماء الأقسام التي تريد وضعها و نقوم بفتح العمل على المقاس العرض = 120 بكسل و الطول = 120 بسكل .. نقوم بعمل صورة لأسماء الأقسام التي نريد عملها و تكون مربعة بشكل جميل و نقوم بتخزينها و أهم شيء يكون عندنا نسخة PSD لأنه عند إنشاء قسم جديد سنقوم بفتح العمل و تغيير الاسم و حفظ العمل على صيغة مثلا صيغة gif أفضل لأسماء الأقسام و عندما ننشئ قسم جديد و نسوي له صورة نضعها في مجلد images/category و نضيفها من لوحة التحكم
الآن أصبحت الصور جميعها جاهزة و هذه هي الصور :
1- البانر banner.jpg
http://www.allulu.org/dros/vcard/01/banner.jpg
2- الفوتر footer.jpg
http://www.allulu.org/dros/vcard/01/footer.jpg
3- صور تجميلية للرئيسية main-left.jpg
http://www.allulu.org/dros/vcard/01/main-left.jpg
4- صورة ترحيبية للرئيسية main-middle.jpg
http://www.allulu.org/dros/vcard/01/main-middle.jpg
5- خلفية الاستايل style back.gif/background.gif
http://www.allulu.org/dros/vcard/01/back.gif
6- قائمة السكربت menu.jpg
http://www.allulu.org/dros/vcard/01/menu.jpg
7- خلفية قائمة السكربت menu-back.gif
http://www.allulu.org/dros/vcard/01/menu-back.gif
8- صورة مربعة للأقسام category.gif
http://www.allulu.org/dros/vcard/01/category.gif
سبحانك اللهم و بحمدك أشهد أن لا إله إلا أنت أستغفرك و أتوب إليك http://www.dzbatna.com/images/smilies/icon31.gif
تم بحمد الله الانتهاء من حلقة التصميم و يوجد وقت كافي بين كل حلقة للتطبيق و التعلم و ترقبونا بالحلقة القادمة إن شاء الله و السلام عليكم و رحمة الله و بركاته
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
أهلا و سهلا بكم في أول حلقة من حلقات تصميم استايل style للسكربت الشهير في كارد
باسم الله نبدأ :
لتعرف كيفية تحميل السكربت على موقعك و الذي سوف نقوم بالتعلم عليه من هنا :
http://www.allulu.org/vb/showthread.php?t=155
النسخة معربة بالكامل و اتبع الطريقة في موضوع النسخة
الآن بعد تحميل النسخة أدخل على لوحة التحكم عن طريق هذا الرابط :
http://www.name.com/vcard/admin
اسم المستخدم : Allulu
الباسوورد : allulu.org
يمكن تكون عندك نسخة أخرى 2.9 أو أي نسخة إصدار 2 و اليوسر و الباسوورد غير المعطى فعلى حسب اللي عندك
على اليسار قائمة لخيارات التحكم انزل تحت في القائمة راح تلاقي خيار اسمه "قالب template" و فيه كلمة (تحرير) اضغط عليها .. الآن دخلنا إلى قائمة القوالب و راح نشتغل فقط على القوالب التالية في جميع الحلقات :
1- header لوضع صورة البانر العلوية و قائمة الخيارات و خلفيتها
2- footer لوضع صورة سفلية (الفوتر)
3- mainpage لوضع صورة ترحيبية و صور تجميلية للرئيسية و تغيير خلفية الصفحة الرئيسية
4- browsecategory لنغيير خلفية الأقسام
5- postcard_imagelink لتغيير خلفية بطاقة ما
6- category_imagelink لتغيير خلفية عدد البطاقات في الرئيسية
7- newcardspage لتغيير خلفية صفحة جديد البطاقات
8- toppage لتغيير خلفية صفحة أفضل البطاقات
9- topratedpage لتغيير خلفية صفحة الأكثر ترشيحا
10- helppage لتغيير خلفية صفحة المساعدة
11- create لتغيير جزء من خلفية صفحة البطاقة و خيارات الإرسال
12- create_form لتغيير جزء من خلفية صفحة البطاقة و خيارات الإرسال
13- rating_box لتغيير خلفية تقييم البطاقة
و سوف نتناول في هذه الحلقة تصميم صور للفي كارد و هي صور قليلة و عددها 8 صور فقط و هي :
1- البانر
2- الفوتر
3- صورة تجميلية في الصفحة الأولى
4- صورة ترحيبية في الصفحة الأولى
5- خلفية صغيرة للاستايل style
6- صورة لقائمة السكربت
7- خلفية لصورة قائمة السكربت
8- صورة مربعة بشكل جميل للأقسام
ملاحظة : أهم شيء إنك تشتغل على الاستايل style اللي أنا مركبه في البرنامج و هو الاستايل style الوردي راح نشتغل عليه لأنه كل شيء فيه جاهز و الحلقات كلها تعديلات بسيطة في الاستايل style
الآن نبدأ في التصميم .. باسم الله نبدأ :
قبل كل شيء في مجلد vcard نقوم بإنشاء مجلد لصورنا و تصميمنا الذي نريد تصميمه و نقوم بتسميته على سبيل المثال allulu و جميع الصور التي سنقوم بتصميمها نضعها في هذا المجلد و عددها ثمانية صور
افتح الفوتوشوب على المقاسات التالية :
Width العرض = 779 بكسل (إجباري)
Height الطول = 200 بكسل (اختياري)
قم بتصميم بانر في المقاس الذي أنشأناه و عند الانتهاء قم بتخزينه بصيغة الفوتوشوب PSD و بصيغة jpg أفضل من gif و أعطيه اسم مثلا banner و من ثم نقوم بفتح عمل جديد بنفس العرض و لكن لو يكون الطول أصغر يعني العرض = 779 و الطول = 150 بكسل مثلا و نقوم بتصميم صورة سفلية للفوتر يعني و لو نعطيها اسم footer يكون تمام
الآن نختار لون للخلفية و نقوم بإنشاء صورة جديدة بمقاس 2 بكسل للطول و العرض لانها سوف تتجمع لكامل الصفحة و لا نريدها كبيرة لكي لا تأخذ مساحة دون فائدة .. بأداة التعبئة كما في الصورة نقوم باختيار لون و نقوم بتعبئة العمل باللون و اللون طبعا سيكون الخلفية (لو يكون لون أفتح من البانر أفضل) :
http://www.allulu.org/dros/vcard/01/01.gif
الآن نقوم بتخزين الصورة على صيغة gif باسم back.gif و مرة أخرى باسم background.gif و الصورة background.gif نضعها في مجلد images فوق الصورة القديمة يعني على هذا الامتداد : vcard/images .. لو تقوم بالذهاب إلى صف الفوتوشوب و تتعلم درس مفصل النقوش و الدمج لأنه تقدر تستخدمهم و تحترف فيهم .. فقط الدرس مفصلين يسوولك استايل style و الدمج أهم شيء مشان تسوي بانر بشكل جميل و مش لازم تمدد طبعاً و في هذه الحلقات ما في تقطيع يعني أسهل بكثير من الفي بي
المهم الآن نقوم بفتح عمل جديد (كل صورة لها عمل جديد) بمقاس العرض = 280 (أفضل عرض) و الطول (100) أفضل طول .. و نقوم بعمل صورة ترحيبية يعني نقوم بتعبئة العمل بنفس لون الخلفية طبعا و نكتب كلمة ترحيبية جميلة و نستطيع أن ندمج بعض الصور و نكتب فوقهم كلمة جميلة ترحيبية بخط جميل و مرتب و لو دمجت انتبه لا تخلي حواف الصور ظاهرة يعني حاول تمسح بأداة التدرج كما في درس مفصل الدمج لأنه لو خليت الحواف ما راح تكون الصورة الترحيبية جميلة في المقدمة و نقوم بتخزين الصورة الترحيبية بصيغة gif أو jpg لو سويت كلمة مضيئة مثلا طبعا راح تخزنها بصيغة gif و درس مفصل الكلمة المضيئة في صف الفوتوشوب و نعطي الصورة مثلا اسم main-middle
الآن نفتح عمل جديد بمقاس العرض = 250 بكسل و الطول = 270 بكسل و كلاهما كما تحب و لكن لو يكون نفس المقاس أو أصغر أفضل .. نقوم بعمل صورة تجميلية مثلا نقوم بوضع صور و ندمجها و خلفية الصورة مثل الخلفية اللي سويناها للاستايل style أهم شيء و من ثم لا نترك حواف للصور المدموجة مثل ما قلنا في الصورة الترحيبية و نقوم بتخزين الصورة بصيغة jpg أو gif و لن أتكلم مرة أخرى عن الصيغ و لك الخيار على حسب عملك و نعطي الصورة مثلا الاسم main-left
الآن ستكون أقسام السكربت 6 أقسام و هي :
1- الرئيسية
2- جديد البطاقات
3- أفضل البطاقات
4- الأكثر ترشيحا
5- أخبر صديقك
6- مساعدة
الآن نقوم بفتح عمل جديد بعرض = 530 تقريبا و طول = 55 على حسب ما إنت بتحب طبعا و نقوم بعمل شكل جميل مثلا نسوي للصورة تدرج كما في الخصائص التي في الصورة التالية :
http://www.allulu.org/dros/vcard/01/02.gif
و من ثم نسحب من أعلى إلى أسفل و يطلع عندنا تدرج في الوسط اللون أبيض
الآن مثلا بنسوي إطار للصورة بأداة التحديد على طبقة جديد نقوم باستخدام أداة التحديد و نرسم على نفس شكل العمل يعني مستطيل و لكن أصغر من العمل كما في الصورة التالية :
http://www.allulu.org/dros/vcard/01/03.gif
و من ثم نقوم بعمل حواف غير حادة عن طريق الضغط من الخيارات من القائمة Select على خيار Modify و نختار Smooth و نعطه القيمة 6 تقريبا أو 5 .. و من ثم نضغط من القائمة على Select و نختار الخيار Inverse أو بالاختصار نضغط من الكيبورد على Shift + Ctrl + I .. أهم شيء ما ننسى إنه عملنا على لير جديد و نقوم بتعبئة التحديد بلون على حسب رغبتنا و نعطي اللير خصائص على كيفنا كما نحب عن طريق الضغط على اللير (الطبقة) كلك يمين و نختار Blending Options و نعطي الطبقة بعض الخصائص الجميلة .. الآن نقوم بكتابة أسماء الأقسام و بينهم مسافة متوسطة أو بينهم أعمدة مثلا و نسويها بأداة التحديد و تلوينها و إعطاؤها بعض الخصائص و طبعا الأعمدة طبقتها تكون تحت طيقة الإطار أهم شيء و نكتب جميع أسماء الأقسام و لما ننتهى نخزن العمل و نعطيه الاسم مثلا menu
الآن نقوم بفتح عمل جديد بنفس طول القائمة السابقة أي أن العرض مثلا = 5 بكسل و الطول = 55 أهم شيء طول خلفية القائمة هذي اللي بدأنا فيها تكون بنفس طول القائمة و نقوم بعمل تدرج مثلا مثل تدرج القائمة في الأول و نخزن الصورة و نعطها اسم مثلا menu-back
أخيرا نفتح عمل جديد لتصميم صورة لأسماء الأقسام التي تريد وضعها و نقوم بفتح العمل على المقاس العرض = 120 بكسل و الطول = 120 بسكل .. نقوم بعمل صورة لأسماء الأقسام التي نريد عملها و تكون مربعة بشكل جميل و نقوم بتخزينها و أهم شيء يكون عندنا نسخة PSD لأنه عند إنشاء قسم جديد سنقوم بفتح العمل و تغيير الاسم و حفظ العمل على صيغة مثلا صيغة gif أفضل لأسماء الأقسام و عندما ننشئ قسم جديد و نسوي له صورة نضعها في مجلد images/category و نضيفها من لوحة التحكم
الآن أصبحت الصور جميعها جاهزة و هذه هي الصور :
1- البانر banner.jpg
http://www.allulu.org/dros/vcard/01/banner.jpg
2- الفوتر footer.jpg
http://www.allulu.org/dros/vcard/01/footer.jpg
3- صور تجميلية للرئيسية main-left.jpg
http://www.allulu.org/dros/vcard/01/main-left.jpg
4- صورة ترحيبية للرئيسية main-middle.jpg
http://www.allulu.org/dros/vcard/01/main-middle.jpg
5- خلفية الاستايل style back.gif/background.gif
http://www.allulu.org/dros/vcard/01/back.gif
6- قائمة السكربت menu.jpg
http://www.allulu.org/dros/vcard/01/menu.jpg
7- خلفية قائمة السكربت menu-back.gif
http://www.allulu.org/dros/vcard/01/menu-back.gif
8- صورة مربعة للأقسام category.gif
http://www.allulu.org/dros/vcard/01/category.gif
سبحانك اللهم و بحمدك أشهد أن لا إله إلا أنت أستغفرك و أتوب إليك http://www.dzbatna.com/images/smilies/icon31.gif
تم بحمد الله الانتهاء من حلقة التصميم و يوجد وقت كافي بين كل حلقة للتطبيق و التعلم و ترقبونا بالحلقة القادمة إن شاء الله و السلام عليكم و رحمة الله و بركاته
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
