ansaralhojah
March 17th,2006, 05:47 AM
السلام عليكم و رحمة الله و بركاته
أهلا بكم إخواني الأعزاء في أول حلقة من حلقات تصميم واجهة موقع كاملة إن شاء الله منذ البداية خطوة بخطوة و حتى النهاية
باسم الله نبدأ :
::+: تصميم هيكل الواجهة :+::
افتح الفوتوشوب على المقاسات التالية :
Width العرض = 779 بكسل
Height الطول = 400 بكسل
كما في الصورة التالية :
http://www.allulu.org/dros/wajeha/01/01.gif
و بعدها قم بإنشاء لير (طبقة) جديد بالضغط على Ctrl + Shift + N و من ثم Ok .. و من ثم قم باختيار أداة التحديد كما في الصورة و تأكد أنك على اللير الجديد في منطقة الطبقات (الليرات) :
http://www.allulu.org/dros/wajeha/01/02.gif
بأداة التحديد و بزر الماوس الأيسر ارسم تحديد على المنطقة كاملة و لكن مع مراعاة ترك فراغ بحجم بكسل واحد عند الحواف كما تشاهد في الصورة التالية :
http://www.allulu.org/dros/wajeha/01/03.gif
الآن و بعد رسم التحديد قم بفتح قائمة Select و من ثم Modify ثم اختر Contract و ضع القيمة 9 و اضغط Ok و سيتم تصغير التحديد و ترك فراغ بحجم أكبر بين التحديد و حواف المنطقة ... الآن و من نفس قائمة Select ثم Modify اختر Smooth و ضع القيمة 4 و اضغط Ok .. الآن حواف التحديد أصبحت غير حادة و هذا التحديد المطلوب ... و الآن من قائمة Select اختر Inverse و أهم شي قبل هالخطوات كلها اللي سويناها من قائمة Select لازم تتأكد إنك مختار أداة التحديد و أنك على اللير اللي أنشأته .. الآن قم باختيار أداة التعبئة كما في الصورة :
http://www.allulu.org/dros/wajeha/01/04.gif
الآن قم بتعبئة التحديد اللي سويناه و لا تضغط على أي منطقة و إنما اضغط بداخل التحديد المستطيل و قبل هذا عليك أن تختار لون يكون فاتح مثلا أنا اخترت لون وردي فاتح جدا و كود تبعه هو : FFD9D9 و إذا ما عرفت من وين تختار لون فالطريقة هي إنك تضغط على مربع الألوان الأمامي الموجود مع شريط الأداوات و اختيار لون يناسبك و الفاتح أفضل و في آخر التصميم بتعرف ليش اللون الفاتح بكون افضل و هذي صورة توضح لك مربع الألوان و الصورة اللي بعدها بتوضح لك مكان تعبئة اللون :
* صورة مربع الألوان :
http://www.allulu.org/dros/wajeha/01/05.gif
1- اللون الأمامي اللي راح نستخدمه
2- اللون الخلفي
* صورة مكان تعبئة التحديد :
http://www.allulu.org/dros/wajeha/01/06.gif
الآن و بعد تعبئة التحديد اضغط Ctrl + D من لوحة المفاتيح لإلغاء التحديد ... بعد ذلك اضغط على اللير (الطبقة) مرتين و لكن لا تضغط على اسم الطبقة و إنما في المكان الفارغ لأنك لو قمت بالضغط مرتين على اسمها فهذا لتغيير اسم الطبقة و ممكن يفيدك عشان تميز كل طبقة عن الأخرى و إنما اللي محتاجينه هو عمل تأثيرات على اللي سويناه لذلك اضغط مرتين على المربع الموجود بجانب اسم الطبقة و هو مربع صغير كما في الصورة :
http://www.allulu.org/dros/wajeha/01/07.gif
الآن ستخرج لك نافذة لإضافة خصائص للإطار اللي سويناه و كل ما عليك هو اتباع خاصية خاصية كما في الصور و كل صورة قم باتباع ما فيها من قيم و خصائص و كل خاصية نريدها من الخصائص الموجودة بالنافذة على اليسار نضغط على اسمها و سيتم وضع علامة صح عليها و اختيارها و نقوم بعمل الخصائص كما في الصور الموضحة لك الآن :
أولاً : اختيار خاصية Outer Glow كما في الصورة :
http://www.allulu.org/dros/wajeha/01/08.gif
ثانياً : اختيار خاصية Inner Glow كما في الصورة :
http://www.allulu.org/dros/wajeha/01/09.gif
ثالثاً : اختيار خاصية Stroke كما في الصورة :
http://www.allulu.org/dros/wajeha/01/010.gif
الآن نقوم بالضغط من منطقة الطبقات على طبقة الخلفية اللي اسمها Background و نختار أداة التعبئة و نختار لنا لون فاتح للخلفية أو اللي تحبه إنت أما عن نفسي فاخترت لون فاتح و نضغط على منطقة العمل لتعبئة الخلفية باللون اللي اخترناه و أنا اخترت اللون : FFF7F7 .. الآن أصبح عندنا خلفية و إطار و ما بقي علينا إلى بعض الحركات اللي بنسويها الآن ...... فاصل و نعود من جديد << كمل بدون كلام فاضي http://www.allulu.org/vb/images/smilies/lulu18.gif .... الآن نقوم باختيار أداة التحديد مرة أخرى و ننشئ طبقة جديد أيضا و هالكلام عارفين كيف نسويه http://www.allulu.org/vb/images/smilies/lulu125.gifو قبل كل شيء نخلي طبقة الإطار اللي سويناه أول طبقة فوق في منطقة الطبقات يعني الآن أنشأنا إطار ممكن يكون فوقها و لازم نمسكها و نرفعها فوق و أهم شي لآخر العمل راح تبقى هذا الطبقة فوق و إن شاء الله بنذكركم كل شوي إنكم ترفعوها فوق ... بأداة التحديد نرسم مستطيل أفقي و مساحته صغيرة كما في الشكل :
http://www.allulu.org/dros/wajeha/01/011.gif
الآن نقوم بتعبئة المستطيل بنفس اللون اللي عبأنا فيه الإطار و هو اللون الفاتح FFD9D9 و من ثم نقوم بنسخ خصائص طبقة الإطار عن طريق الضغط بزر الماوس الأيمن على طبقة الإطار و اختيار Copy Layer Style و من ثم نقوم بالضغط بزر الماوس الأيمن على طبقة المستطيل اللي سويناه جديد و اختيار Paste Layer Style و الآن أصبح عندنا مستطيل و بانر فارغ ... نقوم الآن و بالتأكد أننا على الطبقة الخاصة بالمستطيل نضغط Ctrl + J لتكرار طبقة المستطيل و نقوم بإنزالها تحت طبقة المتسطيل الأول الأصليه بسحبها أسفل منه و من ثم من أسهم الكيبورد نقوم بإنزال المستطيل المنسوخ بعض الشيء و لكن بعد اختيار السهم من الأدوات و هو السهم الأساسي الموجود بجانب أداة التحديد و هذا الشكل بكون عندنا :
http://www.allulu.org/dros/wajeha/01/012.gif
الآن أصبح عندنا هذا الشكل :
http://www.allulu.org/dros/wajeha/01/013.gif
الآن أصبح علينا صنع بعض الزخارف لإضافتها للتصميم و اللي سويناه قبل هذا فقط ما هو إلا هيكل بدائي للواجهة <<< لا يا شيخ كل هذا و بالأخير تقلنا بدائي http://www.allulu.org/vb/images/smilies/wacko.gif ... يجب عليك التأكد من أن طبقة الإطار هي الطبقة الأولى في الطبقات يعني تكون فوق كل الطبقات
أهلا بكم إخواني الأعزاء في أول حلقة من حلقات تصميم واجهة موقع كاملة إن شاء الله منذ البداية خطوة بخطوة و حتى النهاية
باسم الله نبدأ :
::+: تصميم هيكل الواجهة :+::
افتح الفوتوشوب على المقاسات التالية :
Width العرض = 779 بكسل
Height الطول = 400 بكسل
كما في الصورة التالية :
http://www.allulu.org/dros/wajeha/01/01.gif
و بعدها قم بإنشاء لير (طبقة) جديد بالضغط على Ctrl + Shift + N و من ثم Ok .. و من ثم قم باختيار أداة التحديد كما في الصورة و تأكد أنك على اللير الجديد في منطقة الطبقات (الليرات) :
http://www.allulu.org/dros/wajeha/01/02.gif
بأداة التحديد و بزر الماوس الأيسر ارسم تحديد على المنطقة كاملة و لكن مع مراعاة ترك فراغ بحجم بكسل واحد عند الحواف كما تشاهد في الصورة التالية :
http://www.allulu.org/dros/wajeha/01/03.gif
الآن و بعد رسم التحديد قم بفتح قائمة Select و من ثم Modify ثم اختر Contract و ضع القيمة 9 و اضغط Ok و سيتم تصغير التحديد و ترك فراغ بحجم أكبر بين التحديد و حواف المنطقة ... الآن و من نفس قائمة Select ثم Modify اختر Smooth و ضع القيمة 4 و اضغط Ok .. الآن حواف التحديد أصبحت غير حادة و هذا التحديد المطلوب ... و الآن من قائمة Select اختر Inverse و أهم شي قبل هالخطوات كلها اللي سويناها من قائمة Select لازم تتأكد إنك مختار أداة التحديد و أنك على اللير اللي أنشأته .. الآن قم باختيار أداة التعبئة كما في الصورة :
http://www.allulu.org/dros/wajeha/01/04.gif
الآن قم بتعبئة التحديد اللي سويناه و لا تضغط على أي منطقة و إنما اضغط بداخل التحديد المستطيل و قبل هذا عليك أن تختار لون يكون فاتح مثلا أنا اخترت لون وردي فاتح جدا و كود تبعه هو : FFD9D9 و إذا ما عرفت من وين تختار لون فالطريقة هي إنك تضغط على مربع الألوان الأمامي الموجود مع شريط الأداوات و اختيار لون يناسبك و الفاتح أفضل و في آخر التصميم بتعرف ليش اللون الفاتح بكون افضل و هذي صورة توضح لك مربع الألوان و الصورة اللي بعدها بتوضح لك مكان تعبئة اللون :
* صورة مربع الألوان :
http://www.allulu.org/dros/wajeha/01/05.gif
1- اللون الأمامي اللي راح نستخدمه
2- اللون الخلفي
* صورة مكان تعبئة التحديد :
http://www.allulu.org/dros/wajeha/01/06.gif
الآن و بعد تعبئة التحديد اضغط Ctrl + D من لوحة المفاتيح لإلغاء التحديد ... بعد ذلك اضغط على اللير (الطبقة) مرتين و لكن لا تضغط على اسم الطبقة و إنما في المكان الفارغ لأنك لو قمت بالضغط مرتين على اسمها فهذا لتغيير اسم الطبقة و ممكن يفيدك عشان تميز كل طبقة عن الأخرى و إنما اللي محتاجينه هو عمل تأثيرات على اللي سويناه لذلك اضغط مرتين على المربع الموجود بجانب اسم الطبقة و هو مربع صغير كما في الصورة :
http://www.allulu.org/dros/wajeha/01/07.gif
الآن ستخرج لك نافذة لإضافة خصائص للإطار اللي سويناه و كل ما عليك هو اتباع خاصية خاصية كما في الصور و كل صورة قم باتباع ما فيها من قيم و خصائص و كل خاصية نريدها من الخصائص الموجودة بالنافذة على اليسار نضغط على اسمها و سيتم وضع علامة صح عليها و اختيارها و نقوم بعمل الخصائص كما في الصور الموضحة لك الآن :
أولاً : اختيار خاصية Outer Glow كما في الصورة :
http://www.allulu.org/dros/wajeha/01/08.gif
ثانياً : اختيار خاصية Inner Glow كما في الصورة :
http://www.allulu.org/dros/wajeha/01/09.gif
ثالثاً : اختيار خاصية Stroke كما في الصورة :
http://www.allulu.org/dros/wajeha/01/010.gif
الآن نقوم بالضغط من منطقة الطبقات على طبقة الخلفية اللي اسمها Background و نختار أداة التعبئة و نختار لنا لون فاتح للخلفية أو اللي تحبه إنت أما عن نفسي فاخترت لون فاتح و نضغط على منطقة العمل لتعبئة الخلفية باللون اللي اخترناه و أنا اخترت اللون : FFF7F7 .. الآن أصبح عندنا خلفية و إطار و ما بقي علينا إلى بعض الحركات اللي بنسويها الآن ...... فاصل و نعود من جديد << كمل بدون كلام فاضي http://www.allulu.org/vb/images/smilies/lulu18.gif .... الآن نقوم باختيار أداة التحديد مرة أخرى و ننشئ طبقة جديد أيضا و هالكلام عارفين كيف نسويه http://www.allulu.org/vb/images/smilies/lulu125.gifو قبل كل شيء نخلي طبقة الإطار اللي سويناه أول طبقة فوق في منطقة الطبقات يعني الآن أنشأنا إطار ممكن يكون فوقها و لازم نمسكها و نرفعها فوق و أهم شي لآخر العمل راح تبقى هذا الطبقة فوق و إن شاء الله بنذكركم كل شوي إنكم ترفعوها فوق ... بأداة التحديد نرسم مستطيل أفقي و مساحته صغيرة كما في الشكل :
http://www.allulu.org/dros/wajeha/01/011.gif
الآن نقوم بتعبئة المستطيل بنفس اللون اللي عبأنا فيه الإطار و هو اللون الفاتح FFD9D9 و من ثم نقوم بنسخ خصائص طبقة الإطار عن طريق الضغط بزر الماوس الأيمن على طبقة الإطار و اختيار Copy Layer Style و من ثم نقوم بالضغط بزر الماوس الأيمن على طبقة المستطيل اللي سويناه جديد و اختيار Paste Layer Style و الآن أصبح عندنا مستطيل و بانر فارغ ... نقوم الآن و بالتأكد أننا على الطبقة الخاصة بالمستطيل نضغط Ctrl + J لتكرار طبقة المستطيل و نقوم بإنزالها تحت طبقة المتسطيل الأول الأصليه بسحبها أسفل منه و من ثم من أسهم الكيبورد نقوم بإنزال المستطيل المنسوخ بعض الشيء و لكن بعد اختيار السهم من الأدوات و هو السهم الأساسي الموجود بجانب أداة التحديد و هذا الشكل بكون عندنا :
http://www.allulu.org/dros/wajeha/01/012.gif
الآن أصبح عندنا هذا الشكل :
http://www.allulu.org/dros/wajeha/01/013.gif
الآن أصبح علينا صنع بعض الزخارف لإضافتها للتصميم و اللي سويناه قبل هذا فقط ما هو إلا هيكل بدائي للواجهة <<< لا يا شيخ كل هذا و بالأخير تقلنا بدائي http://www.allulu.org/vb/images/smilies/wacko.gif ... يجب عليك التأكد من أن طبقة الإطار هي الطبقة الأولى في الطبقات يعني تكون فوق كل الطبقات