<center>اهلا وسهلا بكم في اول الردوس في القسم
ملحوظة قبل البدا
اذا وجدت ان هناك صور او عددت خطوات
غير موجودة فهذا يعني انك غير منتسب الي الدورة
و للانتساب ارسل رسالة لي او للادارة او احد المشرفين
بالمعلومات التالية
الاسم
الاميل
اصدار الفوتوشوب المستخدم
فقط
و للعلم من سينتسب الي الدورة
سوف يتم ارسال روابط التحميل له
و هيا الواجه بصيغة الفوتوشوب ليعدل عليا
و الفرش و التدرجات و كل شئ و كل جديد نستخدمه بالدوره
نبدا
بسم الله الحمن الرحيم
أهلا بكم إخواني الأعزاء في أول حلقة منحلقات تصميم واجهة موقع كاملة إن شاء الله منذ البداية خطوة بخطوة و حتىالنهايةباسم الله نبدأ :
::+: تصميم هيكل الواجهة :+::
افتح الفوتوشوب على المقاسات التالية :
Width العرض = 779 بكسل
Height الطول = 400 بكسل
كما في الصورة التالية : 
و بعدها قم بإنشاء لير (طبقة) جديد بالضغط على Ctrl + Shift + N و من ثم Ok .. و من ثم قم باختيار أداة التحديد كما في الصورة و تأكد أنك على الليرالجديد في منطقة الطبقات (الليرات) :
بأداة التحديد و بزر الماوس الأيسر ارسم تحديد على المنطقةكاملة و لكن مع مراعاة ترك فراغ بحجم بكسل واحد عند الحواف كما تشاهد في الصورةالتالية : 
الآن و بعد رسم التحديد قم بفتح قائمة Select و من ثم Modify ثم اختر Contract و ضع القيمة 9 و اضغط Ok و سيتم تصغير التحديد و ترك فراغ بحجم أكبر بين التحديد و حواف المنطقة ... الآن و من نفس قائمة Select ثم Modify اختر Smooth و ضع القيمة 4 و اضغط Ok .. الآن حواف التحديد أصبحت غير حادة و هذا التحديد المطلوب ... و الآن من قائمة Select اختر Inverse و أهم شي قبل هالخطوات
كلها الليسويناها من قائمة Select لازم تتأكد إنك مختار أداة التحديد و أنك على اللير الليأنشأته .. الآن قم باختيار أداة التعبئة كما في الصورة :
الآن قم بتعبئة التحديد اللي سويناه و لا تضغط على أي منطقة و إنما اضغط بداخل التحديد المستطيل و قبل هذا عليك أن تختار لون يكون فاتح مثلا أنا اخترت لون وردي فاتح جدا و كود تبعه هو : d9ffd9 و إذا ما عرفت من وين تختار لون فالطريقة هي إنك تضغط على مربع الألوان الأمامي الموجود مع شريط الأداوات و اختيار لون يناسبك و الفاتح أفضل و في آخر التصميم بتعرف ليش اللون الفاتح بكون افضل و هذي صورة توضح لك مربع الألوان و الصورة اللي بعدها بتوضح لك مكان تعبئة اللون :
1- اللون الأمامي اللي راح نستخدمه
2- اللون الخلفي
* صورة مكان تعبئة التحديد :
الآن و بعد تعبئة التحديد اضغط Ctrl + D من لوحة المفاتيحلإلغاء التحديد ... بعد ذلك اضغط على اللير (الطبقة) مرتين و لكن لا تضغط على اسمالطبقة و إنما في المكان الفارغ لأنك لو قمت بالضغط مرتين على اسمها فهذا لتغييراسم الطبقة و ممكن يفيدك عشان تميز كل طبقة عن الأخرى و إنما اللي محتاجينه هو عملتأثيرات على اللي سويناه لذلك اضغط مرتين على المربع الموجود بجانب اسم الطبقة و هومربع صغير كما في الصورة :
الآن ستخرج لك نافذة لإضافة خصائص للإطار اللي سويناه و كل ماعليك هو اتباع خاصية خاصية كما في الصور و كل صورة قم باتباع ما فيها من قيم وخصائص و كل خاصية نريدها من الخصائص الموجودة بالنافذة على اليسار نضغط على اسمها وسيتم وضع علامة صح عليها و اختيارها و نقوم بعمل الخصائص كما في الصور الموضحة لكالآن :
أولاً : اختيار خاصيةOuter Glowكما فيالصورة : 
ثانياً : اختيار خاصيةInner Glowكمافي الصورة : 
ثالثاً : اختيار خاصيةStrokeكما فيالصورة :
الآن نقوم بالضغط من منطقة الطبقات على طبقة الخلفية اللي اسمها Background و نختار أداة التعبئة و نختار لنا لون فاتح للخلفية أو اللي تحبه إنتأما عن نفسي فاخترت لون فاتح و نضغط على منطقة العمل لتعبئة الخلفية باللون اللياخترناه و أنا اخترت اللون : عزرا انت لست مسجل .. الآن أصبح عندنا خلفية و إطار و ما بقيعلينا إلى بعض الحركات اللي بنسويها الآن ...... فاصل و نعود من جديد << كملبدون كلام فاضي.... الآن نقوم باختيار أداة التحديد مرة أخرى و ننشئ طبقة جديد أيضا وهالكلام عارفين كيف نسويهو قبل كل شيء نخلي طبقة الإطار اللي سويناه أول طبقة فوق في منطقةالطبقات يعني الآن أنشأنا إطار ممكن يكون فوقها و لازم نمسكها و نرفعها فوق و أهمشي لآخر العمل راح تبقى هذا الطبقة فوق و إن شاء الله بنذكركم كل شوي إنكم ترفعوهافوق ... بأداة التحديد نرسم مستطيل أفقي و مساحته صغيرة كما في الشكل : 
و نستطيع الضغط على علامة الخطأ أو علامة المنع اللي تتسمى هذيلإلغاء اللي سويناه إذا طلع عندنا شي خطأ ... الآن أصبح عندنا مستطيع بشكل جميل وهذا ما يسمى بالزخارف و الأشكال اللي تضيف لمسات للواجهة و الآن هذا الشكل الليسويناه نقوم بتعبئته باللون اللي نريده و أنا عبأته باللون الفاتح اللي عبأنا فيهالإطار في أول العمل و أضفت له بعض الخصائص مثل التدرج و كيفية إضافة التدرجكالتالي :
عزرا انت لست مسجل
نقوم باختيار أداة التدرج كما في الصورة :
عزرا انت لست مسجل
أداة التدرج موجود مع أداة التعبئة و لاختيار إحداهما نضغط ضغطةمستمرة على مكان أداة التعبئة أو التدرج و ستخرج لنا قائمة فيها الأداتين و نختارمنها أداة التدرج كما شاهدت في الصورة أعلاه ... راح نلاقي فوق في الفوتوشب بعداختيار أداة التدرج و بعد التأكد أن التحديد ما زال موجودا للشكل و بعد التأكد أنناعلى طبقة التحديد اللي أنشأناها و بعد التأكد أيضا أن طبقة الإطار أول طبقة فوق وبعد التأكد أخيرا أن طبقة الشكل أو الزخرف اللي سويناه بعد طبقة الخلفية يعني ثانيشيء و تحت طبقات المستطيلات اللي سويناها و هذه التأكدات مهمة نضغط على مكان التدرجالموجود في الأعلى كما في الشكل :
و من ثم بتطلع لك نافذة لاختيار ألوان التدرج و عمل تدرج علىكيفك و أنا ما راح أقول لك و أحدد لك ألوان أو شيء بس حبيت أقلك اتبع ما في الصورةلمعرفة كيفية عمل تدرج و إضافة ألوان على كيفك :
عزرا انت لست مسجل
الآن بعد ما سوينا التدرج و اخترنا الألوان نضغط Ok و نعمل تدرجللمستطيل من فوق لتحت يعني بزر الماوس الأيمن نرسم المستطيل عموديا من فوق لتحت وعلى حجم الشكل و تستطيع تضغط زر Shfift و ترسم من فوق لتحت عشان يطلع معك تدرجمستقيم من فوق لتحت و من ثم نضغط Ctrl + D لإلغاء التحديد و سيكون الشكل كما فيالصورة :
عزرا انت لست مسجل
الآن نقوم بالضغط مرتين على طبقة الشكل لإضافة بعض الخصائص له وعرفنا كيفية الضغط مرتين و إضافة خصائص و كل ما علينا هو نختار اللي يعجبنا منالخصائص و إضافتها للشكل و أنا أضفت له خصائص مثل Inner Glow و Outer Glow و Stroke
و هي أفضل خصائص تعجبني في إضافة اللمسات للتصاميم ... و المهم بدون كثرة كلامنقوم باختيار السهم اللي عرفنا الموجود بجانب أداة التحديد و نحرك الشكللتحت و نضعه في الوسط مثلا لأنه أفضل مكان له ينفع بالوسط تحت و سيكون عندنا هذاالشكل : 
الآن ما علينا سوى إنشاء طبقة جديدة فوق طبقة الشكل تماما و رسممستطيل صغير بأداة التحديد كما في الشكل :
و من ثم من قائمة Select ثم Modify نختار Smooth و نضع القيمة 4و نضغط Ok .... الآن نقوم بتعبئة المستطيل المدور اللي سويناه بلون يعجبك و ليكنلون فاتح و من ثم نلغي التحديد Ctrl + D و من ثم نعطي المستطيل بعض الخصائص علىكيفنا و اللي يعجبنا و نقوم بإنزاله تحت و يكون فوق الشكل اللي سويناه و هذا هوالشكل اللي راح يطلع لنا بعد كل اللي سويناه :
الآن نقوم لوحدنا بعمل أشكال على كيفنا مثلا نسوي نفس الشكلالأول و لكن نقلبه و طريقة قلبه هي إنه بعد ما نسويه له تدرج و كل شي و ننتهي منخصائصه و نتأكد إنه احنا على طبقته الخاصة نضغط Ctrl + T لتحديد و من ثم نضغط كلكيمين عليه و نختار Flip Vertical أي نقلبه رأسيا و من ثم نضغط على زر علامة الصح فيالأعلى يمينا في الفوتوشوب كما تعلمنا في الأعلى و نحركه و نضعه في المكان اللييعجبنا و أنا سويت بعض الأشكال و حطيتهم في أماكن مختلفة و هذا الشكل النهائي طلعمعي :
ملحوظة اذا وجدت ان الدرس لا تظهر به عدد 9 صور و 7 خطوات فهذا يعني انك غير منتسب الي الدورة
و للانتساب الي الدورة
عليك ارسال رسالة خاصة لي بالمعلومات اتالية
الاسم
الاميل
اصدار الفوتشوب
هذا هو الشكل الذي سوف نعدل عليه في المرة القادمة
طبعا جميع الخطوات قد وضحت للمنتسبين في الدوره
و هذا رابط للصور لمن لم ظهر معه الصور و للعلم الصورة لا تزال جديد و لكن للاحتياط طبعا هذا رابط للاعضاء الغير منتسبين للدورة و لا يوجد كلمة مرور لتجنب الاخطاء
في امان الله</center>
.:: إعلانات الموقع ::. 
العرض العادي
