بالشرح المصور : تصميم موقع كامل بمنظور WEB 2009

السبت فبراير 07, 2009 7:59 pm

بالشرح المصور : تصميم موقع كامل بمنظور WEB 2009

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

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

النتيجه النهائيه لدرس اليوم : ( إضغط علي الصوره لتراها بالحجم الطبيعي )

الخطوه 1 :

قم بفتح مساحة عمل جديده بالابعاد التاليه 1024×1906 ,,,

قم بتلوينها باللون #333225 ,,

الخطوه 2 :

سنقوم الان بإستعمال اداة Rectangle tool ,,

قم و بإستعمال الاداه سابقة الذكر بتصميم شكلين مثل الموجودين في الصوره التاليه ,,

قمت بإستعمال لون خفيف , استعملت اللون #eee9d9 ,,

الخطوه 3 :

قم بالذهاب إلي اسفل مساحة العمل و قم بتصميم شكل يشبه الشكل المصمم في الخطوه 2 , و لكن تلك المره استعمل لون اخف من اللون المستعمل في الخطوه 2 , انا استعملت اللون #f1eee1 ,,

تاكد من إن تلك الطبقه اسفل الطبقه الخاصه بالخطوه 2 ,,

الخطوه 4 :

بالنسبه للشكل الخاص بالخطوه 3 قم بتطبيق تلك الاعدادات في خيار blending mode الخاص له ,,

الخطوه 5 :

قم بعمل folder جديد و تأكد من انه اعلي جميع الطبقااات ,,

قم بتسمية هذا الfolder بإسم Lower Side ,,

الخطوه 6 :

قم بعمل zoom علي المكان الموجود فيه الشكل الكبير و الشكل الصغير في اسفل مساحة العمل و ستجد المنطقه التي اقصدها مشارلها بالسهم و مكتوب عليه intersect ,,

الان سنقوم بعمل فاصلين عرض كل منهما 1 pixel , و لعمل ذالك سنستعمل اداة Line Tool و اضبطها علي 1 px ,,

قم بإستعمال الالوان #a6a38b و #ffffff و قم بعمل الخطوط كما فعلت انا في الصوره التاليه ,,,

ايضا سأقوم بإاضافة ال copyright الخاصه بالتصميم ,,,

الخطوه 7 :

نحن الان سنقوم بعمل قائمة الخيارات الخاصه بالموقع ,,,

انا عن نفسي احب البساطه , و سأقوم بعمل القائمه في الاعلي ,,

هذا هو الشكل اللذي سنصممه في الخطوات القادمه ,,

يتبع .................................................................

السبت فبراير 07, 2009 8:03 pm

الخطوه 8 :

للحصول علي الشكل السابق عليك اولا عمل folder جديد ,,

قم بتسمية ال folder الجديد بإسم category ,,

قم بجعل هذا folder في اعلي لوحة الطبقات بكل محتوياتها ,,

قم بعمل الشكل الجديد الملون بالاخضر الفاتح #9bb800 كما في الصوره التاليه ,,,

الخطوه 9 :

قم بعمل طبقه جديده فوق الطبقه الخاصه بالشكل الاخضر ,,

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

قم بالضغط علي زر CTrl + النقر علي الصوره المصغره الخاصه بالشكل الاخضر من لوحة الطبقااات لتحديدها ,,

و الان تاكد من انك علي الطبقه الجديده الفارغه ,,

الان قم بإستعمال التدرج و اجعله من اللون الاسود إلي شفااف ,, و التدرج إشعاعي Radial Gradient ,,

قم بالمرور علي الشكل بالمؤشر و قم بعمل شكل يشبه الاتي ,,

الخطوه 10 :

قم بضبط ال Opacity الخاص بالطبقه الخاصه بالتدرج علي 50% ,,

و إضبط الطبقه علي Multiply ,,

الخطوه 11 :

الان سنقوم بإاضافة خطين فاصلين كما فعلنا من قبل ,,,

سنضيف تلك المره خطين باللون الابيض كما تلاحظون في الصوره التاليه ,,

بعد ان ترسم الخطين قم بتغير ال Opacity الخاص بالفاصل العلوي إلي 40% و إضبط الثاني علي 70% ,

الخطوه 12 :

قم بعمل folder جديد داخل ال folder المسمي Category و تأكد من إنه اعلي الطبقات الموجوده في هذا folder ,

في هذا ال folder الجديد قم بكتابة النص الكتابي الخاص بقائمة الموقع ,,

الخطوه 13 :

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

قم بعمل folder جديد و سيكون اعلي واحد في لوحة الطبقاات ,,

قم بتسميته بإسم Tutorial ,,

و بإستعمال اداة Rounded Rectangle مع ضبط ال radius علي 5px قم بعمل شكل يشبه الاتي ,,

انا استعملت اللون #f5f5f5 ,,

الخطوه 14 :

قم بإستعمال الاعدادات التاليه في خيار blending options ,,

الخطوه 15 :

قم بتصميم شكل جديد داخل الشكل اللذي قمنا يتصميمه في الخطوه 13 ,و لكن تلك المره قم بإستعمال اللون #f2f2e8 ,,

الخطوه 16 :

قم بإاضافة الصوره المصغره الخاصه بالمحتوي ,,

اقترح عليك ان تعمل من خلال guidelines الان و في أثناء الخطوات القادمه ,,

www.alawaied.com

الخطوه 17 :

قم بإضافة النصوص الكتابيه ...الخ

الخطوه 18 :

سأقوم بجعل اسم الكاتب يظهر علي شكل اخر ,,

الان و بإستعمال المرشد (guidelines) و تحديد المكان المناسب لوضع الشكل ,,

قم بإستعمال اداة Rounded Rectangle Tool و قم برسم شكل مثل التالي ,, و قم بتلوينه باللون #434130 ,,,

الخطوه 19 :

قم بإضافة ال blending options الاتي علي الشكل ,,

الخطوه 20 :

قم بإاضافة فاصلين من الخطوط الرفيعه كما فعلت انا , و اجعل واحد منهم ابيض و الثاني اسود , ,,

قم بضبط ال Opacity الخاص بالفاصلين علي 50% ,,

قم بإاضافة النص الكتابي اللذي تريده ,,,

الخطوه 21 :

الان اريد ان نميز بين اسم الموضوع باقي الموضوع نفسه (بالنسبه للمحتوي الخاص بالموقع ^_^ )

قم بعمل طبقه جديده ,,,

قم و بإستعمال اداة التدرج gradient tool و باللون الاسود و التدرح Linear Gradient و قم بعمل شئ يشبه الاتي ,,,

و في طبقه جديده ايضا قم بعمل نفس الخطوه و لكن باللون الابيض ,,,

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

قم بعمل فاصل ابيض بسيط و قم بوضعه كما وضعته انا ,,

قم بمزج Merge الفاصل و التدرج معا ,,,

الان و بإستعمال اداة المحو قم بضبط ال Hardness علي 0 و اجعل حجم الفرشاه نفسها كبييير ,

قم بمحو جوانب الشكل و اجعلها تختفي او تمتزج مع الخلفيه ,,

الان قم بتقليل ال Opacity ,,,

الخطوه 22 :

الان قم بتكرير Duplicate ال folder المسمي Tutorial و نسق بينهم كما في الصوره التاليه ,,,

الخطوه 23 :

الان سنقوم بتصميم الركن الجانبي الخاص بالموقع ,,

قم بعمل folder جديد , و اجعل هذا ال folder خلف ال folder المسمي Tutorial ,,

قم بتسمية هذا ال folder الجديد بإسم Right side ,,

قم و بإستعمال اداة Rounded Elliptical Tool برسم شكل جديد بالسمك 5px و باللون #bebeaf ,,

www.alawaied.com

الخطوه 24 :

الان و بالنسبه لل Blending options قم بإستعمال الاعدادات التاليه .,.

الخطوه 25 :

قم بإستعمال نفس الشكل اللذي صنعناه في الخطوه 18 ,,

قم بعمل شكل يشبه الاتي ,,

الخطوه 26 :

سأقوم الان فقط بإاضافة النص الكتابي ,,

ايضا قم بإستعمال الفاصل اللي صممناها في الخطوه 21 ,,

( إضغط علي الصوره لتراها بالحجم الطبيعي )

بالشرح المصور : تصميم موقع كامل بمنظور WEB 2009

بالشرح المصور : تصميم موقع كامل بمنظور WEB 2009

رد: بالشرح المصور : تصميم موقع كامل بمنظور WEB 2009