كيف تصنع صفحة ويب Interface عن طريق الفوتوشوب

من طرف **MOYYED** الجمعة مارس 12, 2010 11:31 pm

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

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

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

ما ادري عنه خخخخخخخ بس حبيت اضيفه لعل احد يستفيد منه

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

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

اول شي جهزي لك تصميم واجهة موقع يفضل في حالة المبتدئين تصميم بسيط قبل كل شي

مثل مثل هذا التصميم ..

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

طبعا هذا مصغر

ليكن في الحسبان ان تصميمك لا يتجاوز 770 بكسل عرضا ..، و 570 طولا او براحتك ما تفرق الطول كثير ..

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

الان ندخل على التصميم في الفوتوشوب ..

و نصمم التصميم الذي نريده باي شكل كان ..
ملاحظة /
وانتي تصممين حاولي ان تكون الاطراف من جميع الجهات بنفس درجة اللون لا يكون فيها تدرج
او منطقه افتح من منطقه او لون يختلف عن لون .. في جميع الاطراف

1- اضغطي Ctrl + R ستظهر لك مسطرة العمل في جوانب التصميم .

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

.

اقتربي بالماوس منها ثم اسحبي و استمري في الضغط على الزر ، ستظهر لك خط تقسيمي .. ( سواء بالطول او بالعرض ) .

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

حددي المنطقه التي تريدين تفريغها وقصها .. بحسب التصميم المتواجد لديك ..

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

طبعا فكرة التقطيع تعتمد على ..

مكان الازرار و منطقة الكتابة ..

حددنا الازرار و حددنا مكان الكتابة .. الان وصلنا للمرحلة الي تليها ..

فيه أداة في شريط الادوات بها الشكلSlice Tool ..[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

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

اضغطي عليه ..

بعض الضغط عليه راح تلاحظين انه تم قص التصميم بها الطريقة

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

الان بنفس الادة

ابدئي بتحديد المناطق الي ما تحتاجين فيها قص كثير مثل منطقه الكتابة و منطقة الصور الجانبية .. مثل كذا ..

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

ملاحظة ..

وقت القص بالنسبة لمنطقة الكتابة .. حاولي دائما ان لايكون فيها صور من النوع الذي لو تكرر افسد الشكل .. ( يفضل دائما ان تكون منطقة مستوية خالية من اي شي .. )

--------------

--------------

الان بامكانك حفظ العمل ..

اذهبي الى

File >> Save as web

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

و بعدها احفظي العمل

ملاحظة // احفظي العمل بحروف انقليزية ..

ستجدين ظهر لك في المكان الذي تم الحفظ فيه

مجلد images + صفحة html بنفس اسم التصميم ..

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

---------------------------

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

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

سيفتح لك برنامج الفرونت بيج .. و سنبدا من جديد التعديل حتى يصبح جاهزا للكتابة ..

----------------------------------

اول ما تفتحين التصميم بالفرونت بيج راح تلاحظين ..
* التصميم جاي على يسار الصفحة
* لون الخلفية ابيض .

----------------------------------

الان علينا اعداد لون الخلفية لانه يختلف عن العمل

اضغطي رايت كلك ثم Page Properties

وحاولي تغيل لون الخلفية سيظهر لك مربع الالوان اختاري منه More
ثم اختاري اداة القطارة .. واقتربي من طرف التصميم لتحصلي على نفس الدرجة

( كما تم شرحة سابقا )

---------------------------------

الان اضغطي على التصمي بالزر الايسر للفارة و اختاري Table Properties

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

من بين الخواص يوجد Alignment
اختاري منها Center

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

سيصبح الان التصميم بالمنتصف ..

---------------------------------------

الان بقي ان نفرغ منطقه لكتابة

الان اختاري الصورة التي سيكون مكانها الكتابة ..

اضغطي عليها مرتين وانسخي اسمها .. ( سنستخدمها الان كخلفية لصفحة اخرى .. )

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

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

واحفظي الصفحة باسم home.htm لكن يجب ان يكون في نفس مكان عملنا .

-------------------------------------------

عودي للعمل في التصميم السابق
و امسحي الصورة التي في مكان العمل

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

بعد مسحها .. اضغطي الزر اليسار للفاره واختاري Cell properties

و اعملي للخلية خلفية بنفس الصورة السابقة

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

من براوز = ابحثي عن اسم الصورة و اضغطي اوكي ..
يجيب ان تضعي علامة صح في المربع
use background picture

---------------------------------------

الان من شريط الادوات بالاعلى اختاري

Insert > Inline Frame

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

بعد اختيارك لهذه الخاصية سيظهر لك مربع بهذا الشكل ..

اضغطي عليه مرتين

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

ستفتح لك خواصه

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

Name هذا اسم الاطار الذي نعمل عليه الان ليكن ft
initial page الصفحة التي سيتم عرضها >> اكتبي home.htm
الان و عدلي المقاسات من Frame size ضعي علامة صح على المربعين و حددي المقاسات وانتبهي يجب ان تكون بالبكسل
في اغلب الاحيان ناخذ نفس مقاسات الصورة التي كانت موجوده ..

scrollbars هذي اختاري منها if needed او اذا كنتي لا تريدين الشريط ان يظهر never

ازيلي علامة الصح من show border

بامكانك تعديل مقاسات الاطار بتمديده مع اطرافه

------------------------

بعد ان يتم اخذ مقاسات مظبوطه له

لم يبقى سوى اللنكات..

-------------------------

مثلا في صفحة من انا كما هو معروف كيف تضعين لنك للصورة

ولكن قبل ان تنهي

لما تسوين لنك للصورة او الكلمة على شكل لنك .. بتطلع لك هاي النافذة

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

This image has been resized. Click this bar to view the full image. The original image is sized 610x328 and weights 20KB.

اختاري منها Target Frame

بعدها بتظهر لك هالنافذة

طبعا لاننا سمينا الاطار السابق باسم ft فهاهو طلع لنا ضمن الاطارات الترقت ..
اختاريه بعدين حطي علامة صح تحت عشان يصير هو الاساسي كل ما حطيتي لنك يفتح لك بداخله ..

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