.. لمن اراد تعلم تصميم المواقع بالفوتوشوب ..

[حسن نور]

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

كثيرا من الأعضاء يستخدمون برنامج الفوتوشوب .. في تصميم التواقيع والصور الشخصية ..
ولكن .. هل فكر احد في استخدام البرنامج لتصميم المواقع http://www.montada.com/images/smilies/new_icons/33.gif

هذا ما سنتعلمه من الشرح .. http://www.montada.com/images/smilies/wink.gif

====
الشرح
====

1- سنبدأ الدرس على برنامج الفوتوشوب الاصدار السابع http://www.montada.com/images/smilies/smile.gif

2- سنعمل على هذه الصورة ..

http://darkgamer.jeeran.com/photoshop/drs-1.gif (http://darkgamer.jeeran.com/photoshop/drs-1.gif)

3- احفظ الصورة السابقة وافتح برنامج الفوتوشوب .. ولنبدأ العمل

4- اضف ما تريد ان تضيفه على الواجهة .. وبالنهاية ستظهر هكذا

http://darkgamer.jeeran.com/photoshop/drs-2.gif (http://darkgamer.jeeran.com/photoshop/drs-2.gif)

5- الان اختر اداة القطع ( http://darkgamer.jeeran.com/photoshop/cut-tool.gif ) وقطع الواجهة الى هذا الشكل

http://darkgamer.jeeran.com/photoshop/drs-3.gif (http://darkgamer.jeeran.com/photoshop/drs-3.gif)

6- اضغط باليمين على كلمة ( المنتدى ) .. واختر Edit Slice Options

http://darkgamer.jeeran.com/photoshop/drs-4.gif (http://darkgamer.jeeran.com/photoshop/drs-4.gif)

7- ستفتح لك نافذة .. اذهب لخانة الـ URL وادخل وصلة ( المنتدى ) .. ولنفرض انها ( http://yoursite.com/vb (http://yoursite.com/vb) ) .. غير الـ yoursite بإسم موقعك

http://darkgamer.jeeran.com/photoshop/drs-5.gif (http://darkgamer.jeeran.com/photoshop/drs-5.gif)

8- بعد ادخال جميع الوصلات .. احفظ الواجهة من قائمة File >>> Save for Web او اضغط على Alt + Shift + Ctrl + S

http://darkgamer.jeeran.com/photoshop/drs-6.gif (http://darkgamer.jeeran.com/photoshop/drs-6.gif)

9- ستفتح لك نافذة .. اضغط على Save .. واحفظ الصفحة بإسم ( Index ) والامتداد ( .html ) .. واحفظها في مجلد htdocs الخاص بسيرفر اباتشي ..
( ملاحظة : الى من لا يملك سيرفر شخصي .. ادخل هنا (http://www.montada.com/showthread.php?t=498142))

http://darkgamer.jeeran.com/photoshop/drs-7.gif (http://darkgamer.jeeran.com/photoshop/drs-7.gif)

+

http://darkgamer.jeeran.com/photoshop/drs-8.gif (http://darkgamer.jeeran.com/photoshop/drs-8.gif)

10- عند ذهابك الى مكان حفظ الصفحة .. ستجد مجلد بإسم ( images ) وهو مجلد الصور التي تم قطعها

http://darkgamer.jeeran.com/photoshop/drs-9.gif

+

http://darkgamer.jeeran.com/photoshop/drs-10.gif (http://darkgamer.jeeran.com/photoshop/drs-10.gif)

11- ارفع ملف الواجهة ومجلد الصور ( images ) الى سيرفرك الشخصي http://www.montada.com/images/smilies/smile.gif

http://darkgamer.jeeran.com/photoshop/drs-10.gif (http://darkgamer.jeeran.com/photoshop/drs-10.gif)

وانتهى الدرس ^_^

موفقين ان شاء الله http://www.montada.com/images/smilies/smile.gif
والسـلام خير ختام

[عاشق النت]

مشكور على الموضوع الرائع يا أخي

[Mr saad]

بارك الله فيك

[talibi]

مشكور على الموضوع الرائع يا أخي

[EL IDRISSI]

بارك الله فيك على الافادة

[sardi1979]

مشكور على الموضوع الرائع يا أخي

[BadrE]

كفيت و وفيت درس اكثر من رائع .....

الف شكر ......

[أيت حمو]

http://img507.imageshack.us/img507/1136/16xw4.gif

[عبد الاله]

رائـــــــــــــع أخي
بارك الله فيك
http://img339.imageshack.us/img339/5350/wow16wf7.gif

[nafiss]

بارك الله فيك.

[azddine]

مشكور على الموضوع الرائع