درس مفصل متطور جدا ومــن أفضل دروس تصميم المواقع

[salima]

إفتح الفايروركس وإبدأ بعمل بمقاس 630 × 330 بيكسل وبلون خلفية http://dndon.net/images/stories/2/webc.gif .
سنقوم الآن بعمل مثل هذا الشكل وهو هيدر ( رأس ) الموقع .

http://dndon.net/images/stories/2/web2.gif

حدد أداة المربع http://dndon.net/images/stories/tools/reg.jpg وقم بعمل مستطيع في منتصف العمل بهذه الخيارات الموضحة بالصورة :

http://dndon.net/images/stories/2/web3.gif

الآن حدد أداة التحديد هذه http://dndon.net/images/stories/tools/arrow2.jpg وإضغط بزر الفأرة على المربع الصغير الموجود في الزاوية السفلية على يسارك ليتم تحديد هذه النقطه وتكون مجال العمل ... إضغط على زر shift ثم حرك بالسهم المتجه لليمين في لوحة المفاتيح مرة واحده وهذا يعني تحرك النقطة 10 بيكسل الي اليمين .. الآن اترك shift وحرك الي اليمين مرة أخرى مرتين أي بمعدل 2 بيكسل ليكون إجمالي التحريك 12 بيكسل .. طبق نفس العملية على الزاوية اليمنى السفلية ولكن بإتجاه اليسار لنحصل على هذا الناتج لاحظ الصورة :

http://dndon.net/images/stories/2/web4.gif

الآن حدد أداة القلم http://dndon.net/images/stories/tools/p.jpg وإضغط على المربع الصغير الموجود في أعلى اليسار ولا تترك الفأرة أو القلم وقم بسحب النقطة الى أعلى لنحصل على هذا الشكل :

http://dndon.net/images/stories/2/web5.gif

الآن حدد أداة التحديد http://dndon.net/images/stories/tools/arrow2.jpg على المربع الصغير في الزاوية اليمنى العلوية . واضغط على زر shift وإضغط على السهم المتجه للأعلى في الكيبورد ( لوحة المفاتيح ) ثلاث مرات وذلك لرفع النقطة بمعدل 30 بيكسل ..
الآن حدد أداة المربع http://dndon.net/images/stories/tools/reg.jpg وقم بعمل مربع باللون الأحمر بهذه الخيارات الموضحة في الصورة التالية :

http://dndon.net/images/stories/2/web6.gif

وسنحصل على هذه النتيجة :

http://dndon.net/images/stories/2/web7.gif

حدد الطبقتين عن طريق أحد الطرق التي تعلمتها معنا في الدروس السابقة أو بطريقة سريعة حدد أداة http://dndon.net/images/stories/tools/arrow.jpg واضغط على shift وإضغط على الشكلين لتحديدهم ... توجه الآن الى Modify > Combine Paths > Punch لنحصل على هذه النتيجة :

http://dndon.net/images/stories/2/web8.gif

الآن من شريط الأدوات العلوي توجه الى Edit > Clone لنحصل على نسخة طبق الأصل .. مرة أخرى من شريط الأدوات توجه الى Modify > Transform > Flip Horizontal ثم إسحب الطبقة الجديدة الى اليمين . لتكون بهذه الإعدادات الموضحة :

http://dndon.net/images/stories/2/web9.gif

حدد الآن الطبقتين وقم بدمجهم عن طريق Modify > Combine Paths > Union وسنحصل على الصورة التالية :

http://dndon.net/images/stories/2/web10.gif

بعد دمج الطبقتين تأكد من تعديل الشكل الى هذه المقاسات :

http://dndon.net/images/stories/2/web11.gif

حدد أداة المربع http://dndon.net/images/stories/tools/reg.jpg وقم بعمل مربع بهذه المقاسات الموضحة :

http://dndon.net/images/stories/2/web12.gif

قم بعمل تدوير أو إنحراف للمربع كما هو موضح في الصورة التالية http://dndon.net/images/stories/2/web15.gif
من شريط ادوات الفايروركس حدد Window > Align واعمل كما هو موضح في الصورة التالية :

http://dndon.net/images/stories/2/web13.gif

الآن عن طريق السهم المتجه للأسفل في الكيبورد ( لوحة المفاتيح ) إضغط على Shift وإضغط على السهم 5 مرات الى الأسفل لنحصل على الناتج التالي :

http://dndon.net/images/stories/2/web14.gif

حدد الطبقتين ( المستطيل والشكل ) وأمدج الطبقتين عن طريق عمل التالي من خلال شريط الفايروركس العلوي Modify > Combine Paths > Union وسنحصل على النتيجة التالية :

http://dndon.net/images/stories/2/web16.gif
ملاحظة يجب أن يكون ناتج هذا الشكل المقاسات التالية
http://dndon.net/images/stories/2/web17.gif

إنتهى الجزء الأول من الدرس مفصل ...







__________________________________________________ ________________________________




سنتعلم في الجزء الثاني كيفية تحويل الشكل الناتج في الجزء الأول الى موقع مميز جدا وبسيط في نفس الوقت .
إستخدم أداة المربع http://dndon.net/images/stories/tools/reg.jpg وقم بعمل مستطيل ( المحتويات ) بهذه الخيارات :

http://dndon.net/images/stories/2/we1.gif

مرة أخرى أداة http://dndon.net/images/stories/tools/reg.jpg لنعمل مستطيل ( القائمة اليمينية ) جديد بهذه الخيارات :

http://dndon.net/images/stories/2/we2.gif

مرة أخرى أداة http://dndon.net/images/stories/tools/reg.jpg لنعمل مستطيل ( روابط الرأس ) جديد بهذه الخيارات :

http://dndon.net/images/stories/2/we3.gif

الخطوة التالية هي تعديل ألوان هذا التصميم وعمل التأثير اللازم له .
لذلك نقوم أولا بإعادة تسمية الطبقات لتسهل علينا عملية الشرح طريقة . حدد الطبقة ومن خيارات حجمها تجد مكان فارغ للإسم قم بتغيره الى ماهو موضح في هذا الشكل :

http://dndon.net/images/stories/2/we5.gif

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

http://dndon.net/images/stories/2/we4.gif

حدد طبقة shape وقم بعمل خيارات تدرج بهذا الشكل :

http://dndon.net/images/stories/2/we6.gif

حدد أداة http://dndon.net/images/stories/tools/fil.jpg وقم بعمل التدرج كما هو موضح في هذا الشكل :

http://dndon.net/images/stories/2/we7.gif

إعمل نسخة من طبقة shape عن طريق Edit ثم Clone وقم بتغير لونها الى ماهو موضح في هذا الشكل :

http://dndon.net/images/stories/2/we8.gif

قم بإعطاء تأثير Effect - Blur - Gaussian Blur بمقدار 1.5 وقم بعمل التالي من شريط الأدوات Modify > Arrange > Send To Back بهذه الطريقة أصبحت الطبقة المنسوحة تحت الطبقة الأصلية وأعطت تأثير رائع جدا .
الآن حدد طبقة nav واعمل لها Edit ثم Clone لأخذ نسخة منها وقم بتغير الإعدادات الى التالي :

http://dndon.net/images/stories/2/we9.gif

قم بإعطاء تأثير Effect - Blur - Gaussian Blur بمقدار 1 ثم قم بنقل الطبقة لأسفل الطبقة الأصلية .
الآن نفس العملية مع الطبقة ******* قم بتحديدها وعمل نسخة منها Edit ثم Clone ثم قم بإجراء ماهو موضح في الصورة :

http://dndon.net/images/stories/2/we10.gif

قم بإعطاء تأثير Effect - Blur - Gaussian Blur بمقدار 1 ثم قم بنقل الطبقة لأسفل الطبقة الأصلية .
وأخيرا حدد الطبقة menu واعمل نسخة منها Edit ثم Clone وقم بإجراء التعديلات الموضحة في الصورة :

http://dndon.net/images/stories/2/we11.gif

قم بإعطاء تأثير Effect - Blur - Gaussian Blur بمقدار 1 ثم قم بنقل الطبقة لأسفل الطبقة الأصلية .
سنحصل الآن على هذا الشكل الشبه نهائي :

http://dndon.net/images/stories/2/we12.gif

إنتهى الجزء الثاني من الدرس مفصل





























__________________________________________________ __







في الجزء الثالث سنقوم بعمل التأثيرات واللمسات الإحترافية للتصميم أو شكل التصميم الذي قمنا به .. سنحتاج في هذا الجزء الدقة في إستخدام القلم .
الآن سنقوم بعمل إنحناء وتدرج لوني لرأس الموقع كما هو مبين في الصورة التالية :

http://dndon.net/images/stories/2/w1.gif

كلمة Step تعني الخطوة لذلك إتبع الخطوات بترقيمها التصاعدي إستخدم أداة القلم http://dndon.net/images/stories/tools/p.jpg وقم بتطبيق الخطوات التالية:
الخطوة 1 : قم بوضع نقطة عند أعلى اليسار كما هو موضح في الصورة .
الخطوة 2 : قم بوضع نقطة في منتصف التصميم في الأعلى ولا تترك الفأرة أبدا واسحب في القلب الى جهة اليمين كما هو موضح في الصورة التالية :

http://dndon.net/images/stories/2/w2.gif

الخطوة 3 : قم بوضع نقطة أسفل الزاوية اليمنى واترك الفأرة لاحظ الصورة التالية :

http://dndon.net/images/stories/2/w3.gif

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

http://dndon.net/images/stories/2/w4.gif

الخطوة 5 : ضع النقطة كما هو موضح في الصورة التالية مع عدم ترك الفأرة وسحب النقطة الى الأعلى بمعدل حركتين بسيطتين :

http://dndon.net/images/stories/2/w5.gif

الخطوة 6 : إضغط على نقطة البداية لإغلاق الشكل والإنتهاء منه وتحظيره لعملية التأثير



الآن قم بتحديد الشكل وقم بعمل تدرج له بهذه الإعدادات الموضحة بالصورة التالية :

http://dndon.net/images/stories/2/w6.gif

الآن حدد أداة التدرج http://dndon.net/images/stories/tools/fil.jpg وقم بعمل ماهو موضح في الصورة التالية :

http://dndon.net/images/stories/2/w7.gif

إنتهينا من عمل تأثير الشفايفة على رأس الموقع الآن نتجه الى الأجناب ونبدأ من جهة اليسار لاحظ الصورة التالية لنقوم بعمل شكل مماثل لها :

http://dndon.net/images/stories/2/w8.gif

إستخدم أداة المربع http://dndon.net/images/stories/tools/reg.jpg وقم بعمل مربع مماثل لهذا الموضح في الصورة :

http://dndon.net/images/stories/2/w9.gif

الآن قم بالضغط على أداة التحديد المعينة http://dndon.net/images/stories/tools/arrow2.jpg واضغط على نقطة المربع السفلية بالجهة اليسرى مرة واحده وأرفع النقطة الى الأعلى بمقدار خمس بيكسل ... استخدم أداة القلم http://dndon.net/images/stories/tools/p.jpg وقم بسحب هذه النقطة الى اليسار لتكوين شكل منحرق وشبه دائري كما هو موضح في الصورة التالية :

http://dndon.net/images/stories/2/w10.gif

الآن قم بعمل مستطيل آخر كما هو موضح في الصورة التالية :

http://dndon.net/images/stories/2/l1.gif

الآن قم بالضغط على أداة التحديد المعينة http://dndon.net/images/stories/tools/arrow2.jpg واضغط على نقطة المربع السفلية بالجهة وحرك النقطة اتجاه اليمين لتقارب النقطة الموجودة على اليمين وقم بعمل انحناء عن طريق أداة القلم http://dndon.net/images/stories/tools/p.jpg كما عملنا في الخطوة السابقة لنحصل على هذا الإنحناء

http://dndon.net/images/stories/2/l2.gif

الآن حصلنا على هذا الشكل :

http://dndon.net/images/stories/2/l3.gif

الآن نقوم بإعطاء التأثير على كل شكل قمنا بعمله .. حدد الشكل العلوي وقم بعمل له تدرج بهذه الإعدادات :

http://dndon.net/images/stories/2/l4.gif

إستخدم أداة التدرج http://dndon.net/images/stories/tools/fil.jpg واعمل ماهو موضح في الصورة :

http://dndon.net/images/stories/2/l5.gif

الآن حدد الشكل السفلي واعمل عليه تأثير تدرج كما هو موضح بالصورة التالية :

http://dndon.net/images/stories/2/l6.gif

حدد أداة http://dndon.net/images/stories/tools/fil.jpg وقم بعمل تدرج بهذا الشكل :

http://dndon.net/images/stories/2/l7.gif

الآن انتهينا من الجهة اليسرى يتبقى لنا اليمنى .. حدد أداة http://dndon.net/images/stories/tools/arrow.jpg واضغط على زر shift وحدد الطبقتين ثم اختر edit ثم Clone بعد ذلك إختر Modify ثم Trnasform ثم Flip Horizontally الآن انقل الشكلين الى الجهة اليمنى وننتهي من الشكل الكلي للموقع وحصلنا على هذا الشكل النهائي :

http://dndon.net/images/stories/2/lf.gif

ومن خلال تطبيقي الدرس مفصل شخصيا حصلت على هذا الناتج :

http://dndon.net/images/stories/2/websiteme.jpg (http://dndon.net/images/stories/2/websiteme.jpg)

إنتهى الجزء الثالث من الدرس مفصل ...










_____________________________________________




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

http://dndon.net/mambots/*******/mostips/tip.gifلا يعتبر درس مفصل تقطيع التصميم هو درس مفصل لكيفية التصميم في برامج تصميم المواقع مثل فرونت بيج ودريم ويفر وغيرها من برامج .. انما يقتصر الدرس مفصل على تقطيع التصميم ثم بعد ذلك معالجته عن طريق برنامج المفضل في تصميم المواقع

استخدم أداة التقطيع http://dndon.net/images/stories/tools/web.jpg وقم بعمل ماهو موضح في الصورة التالية :

http://dndon.net/images/stories/2/ww1.gif

طريقة عمل هذا التقطيع بسيطة جدا أولا قم بعمل تقطيع أفقي على على شكل أربع مستطيلات من بداية الموقع من فوق الى آخر الموقع . بعد ذلك قم بعمل التقطيعات الموضحه بالأسماء في التصميم .
وهذا هو ملف التقطيع قمت بعمله خلال تطبقي للدرس مفصل وهو ملف مفتوح يمكنك الإستعانة به لمعرفة أخطائك . إضغط بزر الفأرة الأيمن على هذا الرابط وإختر حفظ بإسم أو Save target as لتنزيل الملف المفتوح (http://dndon.net/images/stories/2/websites.png) .
بعد انتهائك من التقطيع اعمل مجلد في جهازك بأي اسم تريد وعلى سبيل المثال assets .. بعد انتهائك من عمل المجلد اختر كلمة File في الشريط العلوي للفايروركس واختر من هناك كلمة Export بعد ظهور نافذة التصدير حدد ماهو موضح في الصورة التالية :

http://dndon.net/images/stories/2/ww2.gif

بعد إجراء التعديلات إضغط على كلمة Options وقم بإجراء ماهو موضح في هذه الصورة :

http://dndon.net/images/stories/2/ww3.gif

اضغط على Ok وسيتم انشاء التصميم بالكامل مع وضع الصور المقطعة في مجلد images لتسهيل عملية التصميم والترتيب العام .
بهذا إنتهينا من الجزء الأخير من تصميم الموقع .. أما الإخوان الذين يريدون مواصلة عمل الموقع عن طريق برنامج الدريم ويفر لتعديل التصميم وعمل اللازم له يمكنهم مراجعة الرابط التالي اضغط هنا (http://www.macromedia.com/devnet/mx/fireworks/articles/layout_editing_09.html) .








__________________________________________________ ______


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

جبته لكم هنا





https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©