Chakira
10-30-2013, بتوقيت غرينيتش 05:49 AM
السلام عليكم و رحمة الله و بركاته
لابد ان الجميع يحلم بامتلاك موقعه الخاص على الشبكة العنكبوتية
ويكون بتصميمه الخاص المتماشي مع افكاره و ذوقه
قاعات سماء ستحقق لك هذا الحلم بطريقة سهلة ميسرة راعيةُ فيها الإيجاز و التبسيط
حتى ان مبتدأي الفوتوشوب يستطيعون القيام بها و لا تتطلب الاحتراف !
نبدأ
بسم الله الرحمن الرحيم
قبل البدء ... اود توجيه نصيحة في غاية الأهمية و هي ان في حال رغبتك الجدية في تصميم موقع على النت انشئ اولا مجلد على سطح المكتب و ضع به جميع الصور التي تحتاجها من اجل موقعك بدلا من بعثرتها هنا و هناك
http://www.psdsky.com/super/algory/1.jpg
الآن نبدأ
بعد فتح برنامج الفوتوشوب
1- قم بفتح صفحة جديدة مقاسها 600 * 800
ستظهر لك الصفحة بيضاء ,,, قم بتلوينها بأداة Gradient Tool أو Paint Tool
http://www.psdsky.com/super/algory/15.jpg
وانا عملت التالي
http://www.psdsky.com/super/algory/2.psd.jpg
2- بعد التلوين اضف الصور كما تحب في الصفحة
و هذا نموذج لما قمت به و هو بسيط فقط للتوضيح
http://www.psdsky.com/super/algory/3.psd.jpg
3- اكتب اسم الموقع بطريقة مميزة و جذابة او يمكنك وضع بنر خاص لموقعك
وانا قمت بالكتابة
http://www.psdsky.com/super/algory/4.psd.jpg
4- نأتي لوضع الازرار و هنا يمكن ان تصنعها بسهولة مع البرنامج او ان كانت لديك صور جاهزة للازرار يمكنك وضعها بترتيب معين و كما تحب
و الآن سنقوم بصنع ازرار بسيطة و بنفس الوقت جميلة و بخطوة سهلة جدا
اضغط على اداة custom shape Tool او اضغط على اختصارها U
بعد الضغط عليها سيظهر لك في الأعلى هذا الشريط
http://www.psdsky.com/super/algory/5.psd.jpg
اختر شكل المستطيل او المربع او أي شكل تحب ثم قم برسمه على الصفحة بالمكان الذي تريد
كرر الخطوة على عدد الازرار التي تريد وضعها
انا قمت بعمل 3 ازرار وو ضعتها بالترتيب التالي مع زرين لشكل غيوم
http://www.psdsky.com/super/algory/6.psd.jpg
ملاحظة : بدلا من رسم المستطيل 3 مرات يمكنك اختصار الخطوة عن طريق عمل Duplicate layer لأول مستطيل تعمله ثم حرك النسخة المضاعفة بالمكان المناسب لها
5- الآن اكتب ما تريد داخل ازرارك بعد تنسيقها طبعا
http://www.psdsky.com/super/algory/7.psd.jpg
6 - بعد ذلك لا تنسى ان تحفظ حقوقك ! لذا يجب عليك كتابة كلمة حفظ الحقوق المعتادة وهي
http://www.psdsky.com/super/algory/8.psd.jpg
7- اكتملت لدينا صورة الموقع
http://www.psdsky.com/super/algory/9.psd.jpg
8 - نأتي لأهم خطوة على الإطلاق و التي بدونها كانك صممت صورة و ليس موقعا
الروابط
يتوجب علينا وضع روابط للأزرار التي وضعناها ولعمل ذلك
نستخدم أداة تقطيع الصور Slice Tool و اختصارها K
http://www.psdsky.com/super/algory/10.psd.jpg
و الطريقة هي ان تاتي بهذه الاداة على زر الرئيسة مثلا و تمشي الأداة حوله هكذا
http://www.psdsky.com/super/algory/11.psd.jpg
لاحظ انه تكون لديك مربع فيه اسم الصورة و و الآن لوضع الرابط للرئيسة
بنفس الاداة يمين بالماوس على الصورة واختار
http://www.psdsky.com/super/algory/12.psd.psd.jpg
سيظهر لك المربع التالي
http://www.psdsky.com/super/algory/13.psd.psd.jpg
وبنفس الطريقة على باقي الروابط إلى ان تنتهي من وضع جميع الروابط ليصبح الموقع جاهزرا للاستخدام
9- الخطوة الأخيرة
من File >>> Save For Web
و نحفظ العمل باسم index.html
http://www.psdsky.com/super/algory/14.psd.psd.jpg
تم بحمد الله
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
لابد ان الجميع يحلم بامتلاك موقعه الخاص على الشبكة العنكبوتية
ويكون بتصميمه الخاص المتماشي مع افكاره و ذوقه
قاعات سماء ستحقق لك هذا الحلم بطريقة سهلة ميسرة راعيةُ فيها الإيجاز و التبسيط
حتى ان مبتدأي الفوتوشوب يستطيعون القيام بها و لا تتطلب الاحتراف !
نبدأ
بسم الله الرحمن الرحيم
قبل البدء ... اود توجيه نصيحة في غاية الأهمية و هي ان في حال رغبتك الجدية في تصميم موقع على النت انشئ اولا مجلد على سطح المكتب و ضع به جميع الصور التي تحتاجها من اجل موقعك بدلا من بعثرتها هنا و هناك
http://www.psdsky.com/super/algory/1.jpg
الآن نبدأ
بعد فتح برنامج الفوتوشوب
1- قم بفتح صفحة جديدة مقاسها 600 * 800
ستظهر لك الصفحة بيضاء ,,, قم بتلوينها بأداة Gradient Tool أو Paint Tool
http://www.psdsky.com/super/algory/15.jpg
وانا عملت التالي
http://www.psdsky.com/super/algory/2.psd.jpg
2- بعد التلوين اضف الصور كما تحب في الصفحة
و هذا نموذج لما قمت به و هو بسيط فقط للتوضيح
http://www.psdsky.com/super/algory/3.psd.jpg
3- اكتب اسم الموقع بطريقة مميزة و جذابة او يمكنك وضع بنر خاص لموقعك
وانا قمت بالكتابة
http://www.psdsky.com/super/algory/4.psd.jpg
4- نأتي لوضع الازرار و هنا يمكن ان تصنعها بسهولة مع البرنامج او ان كانت لديك صور جاهزة للازرار يمكنك وضعها بترتيب معين و كما تحب
و الآن سنقوم بصنع ازرار بسيطة و بنفس الوقت جميلة و بخطوة سهلة جدا
اضغط على اداة custom shape Tool او اضغط على اختصارها U
بعد الضغط عليها سيظهر لك في الأعلى هذا الشريط
http://www.psdsky.com/super/algory/5.psd.jpg
اختر شكل المستطيل او المربع او أي شكل تحب ثم قم برسمه على الصفحة بالمكان الذي تريد
كرر الخطوة على عدد الازرار التي تريد وضعها
انا قمت بعمل 3 ازرار وو ضعتها بالترتيب التالي مع زرين لشكل غيوم
http://www.psdsky.com/super/algory/6.psd.jpg
ملاحظة : بدلا من رسم المستطيل 3 مرات يمكنك اختصار الخطوة عن طريق عمل Duplicate layer لأول مستطيل تعمله ثم حرك النسخة المضاعفة بالمكان المناسب لها
5- الآن اكتب ما تريد داخل ازرارك بعد تنسيقها طبعا
http://www.psdsky.com/super/algory/7.psd.jpg
6 - بعد ذلك لا تنسى ان تحفظ حقوقك ! لذا يجب عليك كتابة كلمة حفظ الحقوق المعتادة وهي
http://www.psdsky.com/super/algory/8.psd.jpg
7- اكتملت لدينا صورة الموقع
http://www.psdsky.com/super/algory/9.psd.jpg
8 - نأتي لأهم خطوة على الإطلاق و التي بدونها كانك صممت صورة و ليس موقعا
الروابط
يتوجب علينا وضع روابط للأزرار التي وضعناها ولعمل ذلك
نستخدم أداة تقطيع الصور Slice Tool و اختصارها K
http://www.psdsky.com/super/algory/10.psd.jpg
و الطريقة هي ان تاتي بهذه الاداة على زر الرئيسة مثلا و تمشي الأداة حوله هكذا
http://www.psdsky.com/super/algory/11.psd.jpg
لاحظ انه تكون لديك مربع فيه اسم الصورة و و الآن لوضع الرابط للرئيسة
بنفس الاداة يمين بالماوس على الصورة واختار
http://www.psdsky.com/super/algory/12.psd.psd.jpg
سيظهر لك المربع التالي
http://www.psdsky.com/super/algory/13.psd.psd.jpg
وبنفس الطريقة على باقي الروابط إلى ان تنتهي من وضع جميع الروابط ليصبح الموقع جاهزرا للاستخدام
9- الخطوة الأخيرة
من File >>> Save For Web
و نحفظ العمل باسم index.html
http://www.psdsky.com/super/algory/14.psd.psd.jpg
تم بحمد الله
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©