صمم موقعك بالفوتوشوب

[رحال للتصميم]

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


لابد ان الجميع يحلم بامتلاك موقعه الخاص على الشبكة العنكبوتية
ويكون بتصميمه الخاص المتماشي مع افكاره و ذوقه

قاعات سماء ستحقق لك هذا الحلم بطريقة سهلة ميسرة راعيةُ فيها الإيجاز و التبسيط

حتى ان مبتدأي الفوتوشوب يستطيعون القيام بها و لا تتطلب الاحتراف !







نبدأ


بسم الله الرحمن الرحيم


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



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



تم بحمد الله

[MSHAER]

الله يعطيك العافيه اخوي وينقل لركن دروس التصميم

[رحال للتصميم]

:) شكراً لمرورك اخى العزيز و شكراً لنقلك الدرس الى مكان الصحيح

[صحرءا]

مشكورررررررررررررررررررر

[alra7eel]

بارك الله بك وجعله بميزان اعمالك وحسناتك
في الحقيقة درس رائع وطريقة الشرح تسعد القلب
ليت لدينا رحال آخر لكنا بخير :icon30:
لاعدمتك

[شبيه الريح]

شاكر لك اخي الكريم

[بوح الروح]

بارك الله فيك اخي رحال للتصميم

وجزلك خيرا

تحيتي

أختك aamaal

[TeEmOoR]

مشكور ويعطيك العافيه

[ألفا]

جهد متعوب عليه

لا هنت يالرحااااااااااااال