تصميم مواقع على الفوتو شوب

بسم الله الرحمن الرحيم
الحمد لله و الصلاة و السلام علي خير الخلق وامام الحضرة سيدنا وحبيبنا محمد صلي الله عليه وسلم اما بعد فهده بعض المبادئ البسيطة و السهلة قي استخدام برنامج الفوتوشوب و اسال من الله ان تكون عونا لكم و للمسلمين اجمعين بادنه ومنه,
-----------------------------------
1 – افتح الفوتوشوب وافتح صفحه جديده بالمقاسات اللي تناسبك ويفضل بالعرض
750 الى 800 بيكسل والطول حسب الخانات اللي حاب تضيفها على الصفحه
مثلا انا بالدرس هذا مقاسات الصوره 790 بيكسل عرض في 700 بيكسل طول
2- صمم الموقع حسب ذوقك وهنا يبدأ الابداع وبعد ماتصمم وتخلص احفظ العمل
على صيغة jpg او gif ولا تنسى تحفظه على امتداد psd عشان التعديلات لو حبيبت تعدل .. سكر جميع الصفحات وخل الفوتوشوب مفتوح
كل هذه الخطوات السابقه ماراح نسترسل فيها لان الاغلبية يعرفها واللي حاب
يستفسر او يسأل شئ عليه بي البحث المعمق
والان ناتي الي الخطوة المقبلة
والان افتح التصميم اللي حفظته على jpg او gif عن طريق الفوتوشوب عشان نقطع الصوره الى صور صغيره والسبب ........... ؟؟؟
نشوف السبب بالمرحله رقم 3
3- مرحلة تقيطع الصور :
نبذه عن هذه المرحله :
نقوم بتقطيع الصورة الى اجزاء عديده والهدف من ذلك هو ادراج رابط على تلك الصور المراد تقطيعها .. والهدف الاخر هو سرعة فتح الصفحه
بالعاميه .. لما تدرج رابط على الصوره راح تطلع لك صورة اليد اللي تبين لك ان
هذه الصوره تقدر تضغط عليها وراح تحولك الى صفحه ثانيه
والهدف الثاني لو كانت الصفحه صورة وحدة راح تطول معاك على ماتفتح
فالتقطيع يسرع فتح الصفحه .. لان كل تقطيع تسويه يعتبر صوره لحالها
مثال
قم بااختيار اداة Slice Select Tool (K) من شريط الادوات
بعد اختيار اداة التقطيع نقوم بتقطيع الصوره بدقه
ملاحظه : يجب ان يكون تقطيع صوره بنر ( المساحه الاعلانية ) دقيق جدا
لان لما تبي تحط اعلان لاي موقع اخر ،، راح تبدل الصوره الموجوده حاليا
بصورة الاعلان اللي بتحطه .. فكل اللي عليك انك تجيب بنر الاعلان اللي بتحطه
بنفس مقاس البنر الموجود حاليا وترفعه على موقعك بنفس اسم الصوره لان بعد التقطيع راح يكون كل صوره لها اسم ورقم .. وراح نبين هالشي لاحقا
الملاحظه الثانيه .. الحقوق تكون بصوره وحده عشان نضيف عليها ايميل الموقع اذا حاب ..
واذا مو حاب تحط ايميل الموقع عادي قطعها مثل ماتبي .. بس اشوي اشوي عليها خخخخخ
والان سوف اضع لكم صوره تبين شكل الموقع مقطع بالكامل ..
بعد مانقطع الصوره نجي لمرحله الحفظ بصيغه الـ HTML
ملاحظه .. حفظ الملف باسم الموقع .. لان كل صوره تم تقطيعها تتسمى بااسم الموقع
مثل ..
alqamra_01
alqamra_02
alqamra_03
alqamra_04
الى آخره
وهكدا انتهينا من النفاخ المبدئ ليلفوتوشوب. ونلاحظ بعد ما نحفظ الملف راح يطلع لنا
ملف باامتدادHTML وبااسم الموقع ومجلد الصور images
ونجي لمرحله الفرونت بيج
ومن ملف >> فتح >> بعدين افتح الصفحه اللي حفظناها على شكل HTML
بعد مانفتحها نختار كلمه تصميم من الاسفل ..
طبعا راح نلاحظ ان خلفيه الموقع بيضا .. فانت باامكانك تتحكم بلون الخلفيه
او تقدر تضيف بدل اللون صوره . وراح نوضح هالشي .
روح بااي مكان بالصفحه واضغط زر الفاره الايمن .. بعدها خيارات الصفحة
بعد ماخلصنا من لون الخلفية .. نجي الحين لاضافة الروابط على الصفحة
طبعا عندنا نوعين من الروابط ،، يا اما تكون رابط جاهز من النت مثل
المنتدى [عزيزي الزائر يتوجب عليك التسجيل للمشاهدة الرابطللتسجيل اضغط هنا]
او تكون من الجهاز مثل
C:\*********************************************** *************************s and Settings\super ssh\My ************************************************** **********************s\New Folder
ملاحظه على الرابط اللي يكون من الجهاز ..
لازم كل الروابط اللي تاخذها من الجهاز تكون بمجلد واحد لانك بعد ماتخلص الشغل راح ترفع هالمجلد على موقعك .
لاضافة الروابط اتبع الاتي
كلك يمين على الصورة اللي نبي نضيف عليها الرابط بعدها نختار
ارتباط تشعبي
بعدها موافق وبكذا اضفت الرابط .. بس احيانا بعد ماتضيف الرابط تطلع عندك
مشكله مثل اللي طالع عندي ..
لاحظوا ان الصوره طلعت كأنها متشققة ..
طبعا لو صارت عندك هالمشكلة اتبع الاتي
كلك يمين على الصورة اللي اضفت عليها الرابط >> خصائص الصورة
سمك الحدود :
خل سمك الحدود زيرو وبكذا انحلت المشكلة
وتوه تعالي للجو التاني
لو تلاحظون المواقع بالنت ،، تلاقون الروابط نوعين
نوع لما تضغط عليه يفتح لك بنفس الصفحة ونوع لاا لما تضغط عليه يفتح لك بصفحة مستقله بروحها ..
طريقتنا اللي شرحناها فوق هي الطريقه الاولى اللي هي لما تضغط على الرابط
يفتح لك بنفس الصفحة .. بس تعالوا خلونا نشوف كيف نضغط على الرابط ويطلعنا بصفحة ثانية
طبعا نفس طريقة اضافة الرابط بس نضيف عليها شي واحد الا وهو
وبكذا اضفنا الرابط بصفحة مستقلة ..
طيب في شغله ثانية : كيف نسوي صفحة الزخارف للشات وكيف تقدر تنسخ الكلام اللي فيها
بالفرونت بيج .. ملف >> جديد ثم اختر صفحة فارغة
بعدها بتطلع لك صفحة بيضة
اختر كلك يمين ثم خيارات الصفحة وغير لون الخلفيه حسب اللون اللي يناسبك
وسبق اننا شرحنا طريقة تغيير لون الخلفية .
اختر من القائمة جدول >> ادراج جدول
وعلى حسب طلبك ،، مثلا اختر
الصفوف 10 ... والاعمدة 1
وبكذا صار عندك جدول واضف فيه الزخارف على ذوقك .. بعدها حفظ بااسم
ملاحظه بالحفظ :
شوف بالصورة . نلاحظ كلمه (( تغيير العنوان )) هذه عشان تعطينا اسم الصفحه اللي يطلع فوق بالشريط الازرق ..
بينما اسم الملف هذا راح يكون داخل لوحه تحكم الموقع
طبعا انا سميته زخارف بالانجليزي لانه الرابط راح يكون
[عزيزي الزائر يتوجب عليك التسجيل للمشاهدة الرابطللتسجيل اضغط هنا]
وبكذا انت سويت صفحه للزخارف مثل هذه
[عزيزي الزائر يتوجب عليك التسجيل للمشاهدة الرابطللتسجيل اضغط هنا]
طيب توا نجي لمرحلة تركيب الشات
طبعا انا بالتصميم اللي شفتوه فوق .. حاط بدل الشات صورة
والان نضع الشات
روح على كلمة تصميم اللي تحت بالفرونت بيج
بعدها اضغط ضغطه وحده على مكان الشات (( اللي انا حاط صوره بدال الجافا ))
روح على كلمة تصميم اللي تحت بالفرونت بيج
بعدها اضغط ضغطه وحده على مكان الشات (( اللي انا حاط صوره بدال الجافا ))
بعدها روح على تعليمات برمجية بدل ماكانت على تصميم
راح تشوف روابط شكثر .. انت ماعليك من هالروابط
كل اللي عليك من الرابط اللي مظلل باازرق ..
استبدل هالرابط
برابط الجافا وبكذا انت اضفت الشات على الصفحة
وهذا شات القمرا لو حاب تضيفه عشان تتأكد من شغلك
http://host1.ya3arb.com/DigiChat/DigiClasses/
height=102 archive=Client.jar width=211 align=middle
code=com.diginet.digichat.client.DigiChatApplet.cl ass
name=DigiChat><PARAM NAME="cab************************************" VALUE="Client.cab"><PARAM
NAME="language" VALUE="arabic.lang"><PARAM NAME="siteID"
VALUE="1255"><PARAM NAME="background" VALUE="000000"><PARAM
NAME="textcolor" VALUE="FFFFFF"><PARAM NAME="MenuItem1" VALUE="???? ????
???????"><PARAM NAME="MenuLocation1" VALUE="http://www.5shost.com">
Digi Chat Requiresa Java Compatible *************************** browser
torun.</APPLET>
طيب في عمليه تعتبر من الكمليات الا انها تعطي شكل حلو وتناسق بالتصميم
الا وهي ،، لون جافا الشات ،، ولون كلمه (( Nickname ))
من الاسفل ،، اختر تصميم .. ثم اضغط ضغطه وحده على الشات
بعدين روح على تعليمات برمجيه ،، راح تشوف روابط مظلله
اتبع هذه الروابط وراح تشوف الآتي
غير اكواد اللون باللون اللي يناسبك ..
وبكذا خلصنا من تصميم الواجهه الرئيسيه للموقع
طبعا في تفاصيل اخرى لكن هذه هي الفكره الاساسيه ..
الا وهي .. رفع المجلد على سيرفر الموقع .. طبعا المجلد شامل كل شي
بعد ماتخلص من كل العمليات هدي تنتهي العملية ولمزيد من المعلومات الرجاء البحث في المواقع حتي توضح لكم العملية ببساطه اكثر
تحياتي لكم
الزواوى