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

[Dark Gamer]

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

كثيرا من الأعضاء يستخدمون برنامج الفوتوشوب .. في تصميم التواقيع والصور الشخصية ..
ولكن .. هل فكر احد في استخدام البرنامج لتصميم المواقع :33:

هذا ما سنتعلمه من الشرح .. ;)

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

1- سنبدأ الدرس على برنامج الفوتوشوب الاصدار السابع :)

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

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

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

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

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

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

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

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

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

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-8.gif

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

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

+

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

11- ارفع ملف الواجهة ومجلد الصور ( images ) الى سيرفرك الشخصي :)

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

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

موفقين ان شاء الله :)
والسـلام خير ختام

[نسر القاهرة]

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

تستاهل الترشيح ;)

[Dark Gamer]

الله يبارك فيك درس ممتاز :)

تسلم ع الاطراء .. هذا من ذوقك =)

ويشرفني انه نال اعجابك :)



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

اهم شي الفائدة =)



تستاهل الترشيح ;)

الف شكـــر ع المرور والترشيح ..

منور الموضوع بمرورك اخي نسر القاهرة ;)

والسـلام خير ختام

[" Tidus "]

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

[Dark Gamer]

السـلام


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

جميل ان يكون شرحي عجبك .. :)

ولكن هل تقصد ستايل للمنتدى .. :33:

اعذرني اخي .. ولكن الى الان لم اصمم ستايل لأي منتدى

والسـلام خير ختام

[CHALLENGER]

و الله شرح بسيط و رائع و لكن هناك نقطة يجب الانتباه لها و هي ان عند عمل مثل هذه التصاميم لمواقع dynamic فإن الامور تختلف

[Olga]

حلوة الطريقة أو لمرة أعرف إن ها الأداة وظيفتها جذا

ممكن سؤال أخوي: هل فيه قياس محدد للصفحة او القالب اللي صممناه ؟ وكم القياس اللي استخدمته هنا

على فكرة شرحك حلو وبسيط

[Dark Gamer]

السـلام

====
CHALLENGER
====

يالله ان تحييه بشالنجر :D


و الله شرح بسيط و رائع

هذا من ذوقك اخوي =)


و لكن هناك نقطة يجب الانتباه لها و هي ان عند عمل مثل هذه التصاميم لمواقع dynamic فإن الامور تختلف

صحيح .. واعتذر عن عدم ذكر هذي النقطة المهمة :33:

منور الموضوع مراقبنا .. والسموحة ع الرد المتأخر =)

..

====
Olga
====


حلوة الطريقة أو لمرة أعرف إن ها الأداة وظيفتها جذا

الصراحة وضيفتها كبيرة في عالم تصميم المواقع =)


ممكن سؤال أخوي:

اسأل .. حياك :)


هل فيه قياس محدد للصفحة او القالب اللي صممناه ؟ وكم القياس اللي استخدمته هنا

نعم .. والقياس هو 752 × 1002 .. تستطيع تغيرها لو حاب تصمم واجهة =)


على فكرة شرحك حلو وبسيط

تسلم .. هذا من ذوقك أخوي =)
وحياك الله في أي وقت

والسـلام خير ختام

[CHALLENGER]

الله يخليك الموضوع منور فيك و بالجميع

كإضافة : يمكنك طبعا تصميم المواقع التفاعلية بهذه الطريقة و لكن يجب الاخذ بعين الاعتبار حجم النص اذا كان محدد ام انه مفتوح عندها يجب عليك ان تقوم بعمل خلفية تتكرر و غيرها من الأمور التي سوف احاول وضع دروس لها فيما بعد

[son-x]

ممكن احد يعرض تطبيقة علشان تتفتح عندي الفكره

وشكرا علي الموضوع ^__^

أخوكم في الله

[N.F.S]

شكرا على الموضوع الرائع بس ياليت أخوي تعلمانا كيف نصمم الصورة الأولى اللي كان عليها التصميم