المساعد الشخصي الرقمي

مشاهدة النسخة كاملة : (شرح طريقة)صمم موقعك بالفوتوشوب شرح طريقة 100%100



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)©

استعمل مربع البحث في الاسفل لمزيد من المواضيع


سريع للبحث عن مواضيع في المنتدى