Html Help !!~~

[~ Sweet Duff ~]

السلام عليكم..
شلونكم و شخباركم؟؟

أنا توني بالـPhotoShop

و أبي أعرف لما أسوي LayOut حق سايتي
مثل

تصميم موقع احترافي بالفوتوشوب ( شرح بالصور + من الألف الى الياء )

و لما أخلص أبي الــ Html حقه من وين أطلعه..

و بس هاذا سؤالي

( الـPhotoShop مالي الأصدار السابع و عندي التاسع بعد )

و مشكووورين

C Ya
Bu.Bye

[العبقري حسان]

أختي
بعد الإنتهاء من العمل تقومين بالضغط على File ثم Save for web

بعدين افتحي أحد البرامج المتخصصة في تصميم المواقع مثل Dreamweaver
واكتبي الكود Html الذي تريدينه

في أمان الله

[Warm Heart]

عليكم السلام و الرحمه

الرد ليس من جهدي إنما من جهود العضوه الجــــــوري من موقع سماء الفوتوشوب

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


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




الآن نبدأ

بعد فتح برنامج الفوتوشوب

1- قم بفتح صفحة جديدة مقاسها 600 * 800


ستظهر لك الصفحة بيضاء ,,, قم بتلوينها بأداة Gradient Tool أو Paint Tool



وانا عملت التالي



2- بعد التلوين اضف الصور كما تحب في الصفحة
و هذا نموذج لما قمت به و هو بسيط فقط للتوضيح



3- اكتب اسم الموقع بطريقة مميزة و جذابة او يمكنك وضع بنر خاص لموقعك
وانا قمت بالكتابة




4- نأتي لوضع الازرار و هنا يمكن ان تصنعها بسهولة مع البرنامج او ان كانت لديك صور جاهزة للازرار يمكنك وضعها بترتيب معين و كما تحب

و الآن سنقوم بصنع ازرار بسيطة و بنفس الوقت جميلة و بخطوة سهلة جدا

اضغط على اداة custom shape Tool او اضغط على اختصارها U

بعد الضغط عليها سيظهر لك في الأعلى هذا الشريط




اختر شكل المستطيل او المربع او أي شكل تحب ثم قم برسمه على الصفحة بالمكان الذي تريد
كرر الخطوة على عدد الازرار التي تريد وضعها

انا قمت بعمل 3 ازرار وو ضعتها بالترتيب التالي مع زرين لشكل غيوم




ملاحظة : بدلا من رسم المستطيل 3 مرات يمكنك اختصار الخطوة عن طريق عمل Duplicate layer لأول مستطيل تعمله ثم حرك النسخة المضاعفة بالمكان المناسب لها



5- الآن اكتب ما تريد داخل ازرارك بعد تنسيقها طبعا



6 - بعد ذلك لا تنسى ان تحفظ حقوقك ! لذا يجب عليك كتابة كلمة حفظ الحقوق المعتادة وهي



7- اكتملت لدينا صورة الموقع



8 - نأتي لأهم خطوة على الإطلاق و التي بدونها كانك صممت صورة و ليس موقعا

الروابط

يتوجب علينا وضع روابط للأزرار التي وضعناها ولعمل ذلك

نستخدم أداة تقطيع الصور Slice Tool و اختصارها K



و الطريقة هي ان تاتي بهذه الاداة على زر الرئيسة مثلا و تمشي الأداة حوله هكذا



لاحظ انه تكون لديك مربع فيه اسم الصورة و و الآن لوضع الرابط للرئيسة
بنفس الاداة يمين بالماوس على الصورة واختار



سيظهر لك المربع التالي



وبنفس الطريقة على باقي الروابط إلى ان تنتهي من وضع جميع الروابط ليصبح الموقع جاهزرا للاستخدام


9- الخطوة الأخيرة

من File >>> Save For Web

و نحفظ العمل باسم index.html



تم بحمد الله


:::: ملاحظات ::::

- البرنامج التي تم عمل الشرح به هو الفوتوشوب باصداره ال7
- جميع الحقوق محفوظة لسماء و لكاتبة الموضوع ( الجــــــوري ) و المصدر ( www.psdsky.com ) .

تمنياتي للجميع بالتوفيق

اختكم وارموووووه