شرح برامج » دروس في الفتوشوب والفلاش » كيف تصنع صفحة وب Interface

 كيف تصنع صفحة وب Interface  أضيف في: 22-3-1427هـ
تصميم المواقع بالفوتوشوب ..




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








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




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




http://www.psdland.com:8080/lesson/upload/uploading/volite_small.jpg




طبعا هذا مصغر




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




http://www.psdland.com:8080/lesson/upload/uploading/size.gif




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




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








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



http://www.psdland.com:8080/lesson/upload/uploading/roller.jpg
.





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




http://www.psdland.com:8080/lesson/upload/uploading/line.jpg




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




http://www.psdland.com:8080/lesson/upload/uploading/slice.jpg




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




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




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




فيه أداة في شريط الادوات بها الشكلSlice Tool ..http://www.psdland.com:8080/lesson/upload/uploading/toolslice.jpg




لما تختارينه بيطلع لك فوق في الاعلى زر بها الشكل http://www.psdland.com:8080/lesson/upload/uploading/slicegide.jpg




اضغطي عليه ..




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




http://www.psdland.com:8080/lesson/upload/uploading/divide.jpg




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




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




http://www.psdland.com:8080/lesson/upload/uploading/aria.jpg




ملاحظة ..




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




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




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




اذهبي الى




File >> Save as web




http://www.psdland.com:8080/lesson/upload/uploading/save.jpg




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




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




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




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




http://www.psdland.com:8080/lesson/upload/uploading/file.jpg




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




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




http://www.psdland.com:8080/lesson/upload/uploading/edit.jpg




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




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




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




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




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




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




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




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




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




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




http://www.psdland.com:8080/lesson/upload/uploading/table.jpg




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




http://www.psdland.com:8080/lesson/upload/uploading/center.jpg




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




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




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




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




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




http://www.psdland.com:8080/lesson/upload/uploading/pic.jpg




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




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




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




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




http://www.psdland.com:8080/lesson/upload/uploading/emb.jpg




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




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




http://www.psdland.com:8080/lesson/upload/uploading/cel.jpg




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




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




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




Insert > Inline Frame</B>




http://www.psdland.com:8080/lesson/upload/uploading/insert.jpg




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




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




http://www.psdland.com:8080/lesson/upload/uploading/ifre.jpg




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




http://www.psdland.com:8080/lesson/upload/uploading/pr.jpg




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




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




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




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




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




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




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




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




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




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


لما تسوين لنك للصورة او الكلمة على شكل لنك .. بتطلع لك هاي النافذة
http://www.psdland.com:8080/lesson/upload/uploading/traget.jpg


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

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

http://www.psdland.com:8080/lesson/upload/uploading/ft.jpg

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



و بكذا انتهيناااااا

الكاتب: فتيات للابد انقر هنا لمراسلة فتيات للابد أنقر هنا للإنتقال إلى موقع فتيات للابد إضافة للمفضلة إضافة لمفضلة Google إضافة لمفضلة Delicious إضافة لمفضلة Digg إضافة لمفضلة Facebook
خيارات الدرس : ارسل الدرس لصديق ارسل الدرس لصديق  طباعة الدرس طباعة الدرس  حفظ الدرس كملف Word حفظ الدرس كملف Word 



 

مكتبة الصور

مكتبة الصوتيات

مكتبة البطاقات

مكتبة الأخبار

مكتبة الفيديو

مكتبة الفلاشيات

مكتبة الجوال ألعاب الجوال نغمات الحمية والرجيم موسوعة الاعشاب تطوير الذات
ديوان الشعر عالم الجنس عالم المرأة الأذكار شرح البرامج

قنوات فضائية

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

مجلة قصيمي نت

موسوعة الكتب