[ دورة ] تـصْـمـيـم الـوُجــوهِ الـتعْـبـيـريّـة smiles

[said]

بسم الله الرحمن الرحيم

يتناول هذا الشرح طريقة تفاصيل صناعة وجه تعبيري حسب الطلب والرغبة، وذلك من خلال المراحل الآتية:

1) الفكــرة
2) التخطيط
3) الإدراك
4) تحريك الصور
5) تحقيق الأمثلية والقص
6) تقديم العمل إلى المستخدم.

"فـكــرة" كل منا - بشكل طبيعي - يولد وبداخله "مولّد أفكار" لذا سأتجاوز هذه المرحلة ونوفر الحديث فيها لمراحل أخرى.

التخطيط Sketching هو تطبيق مرئي للفكرة على الورق، هذا يجعل الأمور أوضح وأنظف. مثال:

http://www.arabsgate.com/eduimages/images1/485810/1.jpg

البرامج المستخدمة
هنالك العديد من البرامج التي يمكن من خلالها إنشاء صور متحركة، لكن سنستخدم الفوتوشوب والإيميج ريدي Photoshop - ImageReady

وهذه هي اللوحات palettes التي تلزمنا بالعمل:

Tools

http://www.arabsgate.com/eduimages/images1/485810/2.gif

Layers

http://www.arabsgate.com/eduimages/images1/485810/3.gif

Swatches

http://www.arabsgate.com/eduimages/images1/485810/4.gif

أما في برنامج الإيميج ريدي
Animation

http://www.arabsgate.com/eduimages/images1/485810/5.gif

Optimization

http://www.arabsgate.com/eduimages/images1/485810/6.gif

Color Table

http://www.arabsgate.com/eduimages/images1/485810/7.gif

بالإمكان إغلاق اللوحات الأخرى لتوفير مساحة للعمل


------| نبداء الشرح طريقة |-------

الإنشـاء

في برنامج الفوتوشوب، من قائمة ملف File نختار جديد New ونعطي اسماً للمستند الجديد. نحدد مساحة العمل، يفضل أن تكون 60x60 pixels. فيما بعد بإمكانك زيادة المساحة لو اقتضى الأمر.
ثم اختر الشفافية Transparent، بعد ذلك أنقر على موافق OK

http://www.arabsgate.com/eduimages/images1/485810/8.gif

عملنا بشكل جيد حتى الآن لكن لا تنسى أن تقوم بعملية الحفظ بانتظام، هذا سيضمن عدم فقدان أي عنصر أو عملية من التصميم والعمل الشاق.
طبعا أنت تعرف كيف يتم حفظ العمل. أنت لا تعرف؟ لا بأس، من خلال قائمة ملف اختر حفظ Save ومن خلال نافذة الحفظ اختر مكان الحفظ (لا تنسى مكانه فيما بعد) ثم اضغط موافق. الآن كل شيئ على ما يرام.

الآن، من شريط الأدوات اختر أداة القلم pencil واجعل القطر 15 بيكسل

http://www.arabsgate.com/eduimages/images1/485810/9.gif

واختر اللون الأسود

http://www.arabsgate.com/eduimages/images1/485810/10.gif

اعمل بقعة في منتصف صفحة العمل

http://www.arabsgate.com/eduimages/images1/485810/11.jpg

الآن غير لون القم إلى الأصفر واجعل القطر 13 بيكسل واعمل بقعة منتصف البقعة السابقة تماماً

http://www.arabsgate.com/eduimages/images1/485810/12.gif

استعمل أداة التكبير لتكبير مساحة العمل.
حتى الآن كل شيء يبدو إبداعاً، أليس كذلك؟ إذا لم يكن كذلك - تنهّد (خذ نفساً) - وابدأ من جديد، طبعا
هذا الوقت المهدور في الإعادة ليس لمجرد تضييع الوقت وإنما يزيد من قدرتك في استعمال برنامج الفوتوشوب.

الآن نلقي نظرة على ورقة التخطيط (هات الورقة من فضلك) لا أتحدث إليك طبعاً (والآن اخرج واتركني أعمل بهدوء)، لنرى ماهي العناصر الأخرى التي نحتاجها .. آها - نحتاج أربعة أزواج من العيون!

الصورة رقم (6) ننشئ طبقة جديدة ونعطها اسماً وليكن eyes1

http://www.arabsgate.com/eduimages/images1/485810/13.gif

الصورة رقم (7) اجعل القلم حاداً بمقدار 1 بيكسل واللون أسود وارسم كما يلي

http://www.arabsgate.com/eduimages/images1/485810/14.gif

يمكن أن يكون للعيون أي شكل، مثل http://img219.imageshack.us/img219/4139/e13dfbfbau9.png أو http://www.arabsgate.com/eduimages/images1/485810/15.png أو حتى http://img219.imageshack.us/img219/5350/e343b5cdsg5.png

كل الألوان يمكن أن نغيرها ونبدلها، لا تقلق حول ذلك وتابع العمل.

الصروة رقم (8) ننسخ الطبقة eyes1 ونعيد تسميتها إلى eyes2

http://www.arabsgate.com/eduimages/images1/485810/16.gif

الصور رقم (9) من شريط الأدوات نختار أداة التحريك Move ونزيح الطبقة eyes2 إذا احتجنا لذلك، حسب التخطيط.
استخدم أدوات الممحاة Eraser والقلم Pencil لإنجاز المهمة.


http://www.arabsgate.com/eduimages/images1/485810/17.jpg

بنفس الطريقة نعمل بقية العيون - نسخ من طبقة أخرى ونعيد التسمية ثم محو أي جزء لست بحاجة إليه مع السحب إذا كان ضرورياً. بذلك نكون انتهينا من العيون، مبروك !!

جميع العناصر يجب أن تكون على طبقات منفصلة.

الصورة رقم (10) الأيدي. لا نستطيع أن نعمل بدونها، طبقاً للتخطيط سنحتاج لثلاثة أزواج منها. ننشئ طبقة جديدة ونرسم:

http://www.arabsgate.com/eduimages/images1/485810/18.gif

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

الصورة رقم (11) كيف يتم العمل:

http://www.arabsgate.com/eduimages/images1/485810/19.gif

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

http://www.arabsgate.com/eduimages/images1/485810/20.jpg

الـتـحــريــك

انتقل إلى الإيميج ريدي من خلال الأيقونة أسفل شريط الأدوات أو الضغط على Shft+Ctrl+M.

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

بمعنى كم من الثواني يبقى الإطار مرئياً دون الحاجة لإزعاج المشاهد.

لاحظ، بأن أي علمية نقوم بها ستتم على الطبقات النشطة فقط، في حالتنا هذه لونها أزرق. لتنشيط

الطبقة يتم النقر مرة واحدة على الطبقة أو الإطار المراد العمل عليه.

لــنـــبــدأ ...

الإطار الأول يتضمن Layer1 و eyes1

http://www.arabsgate.com/eduimages/images1/485810/21.gif

الإطار الثاني. افتح إطاراً جديداً وأغلق عيون الوجه بالتحويل من eyes1 إلى eyes3:

http://www.arabsgate.com/eduimages/images1/485810/22.gif

الإطار الثالث هو نسخة كاملة من الإطار الأول، ببساطة ننسخه ونحركه إلى نهاية التسلسل:

http://www.arabsgate.com/eduimages/images1/485810/23.gif

الإطار الرابع. نفتح إطار جديد، ثم نفتح عيون الوجه الواسعة بالتحويل طبقة eyes1 إلى eyes2 ووضع الأيدي

hands1.

الإطار الخامس. في هذا الإطار نغلق طبقتي eyes3 و hands1 ونفتح hand_left و hand_right، يبدو الأمر

ساحراً، أليس كذلك؟

الإطار السادس. نفتح العيون eyes4 ونستخدم أداة التحريك لنزيح الأيدي بعيداً عن بعض.

http://www.arabsgate.com/eduimages/images1/485810/24.gif

حسنا، نعمل بشكل جيد لحد الآن. طيب سؤال .. ماذا عملنا؟ دعنا نرى:

http://www.arabsgate.com/eduimages/images1/485810/25.jpg

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

تم تحديد 1 ثانية زمن تأخير لكل إطار مع 0.2 ثانية لعملية الرمش، اضغط على زر معاينة لرؤية التغييرات:

http://www.arabsgate.com/eduimages/images1/485810/26.gif




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

http://www.arabsgate.com/eduimages/images1/485810/27.gif

لإنشاء مثل هذا التحريك، نحدد زمن التأخير للإطار الرابع بـ 0 ثانية، نستنسخه، ننشط طبقة Layers1، نربط جميع الطبقات ذات الصلة ونزيحها بيكسل أو 2 بيكسل بأداة التحريك.

http://www.arabsgate.com/eduimages/images1/485810/28.gif

نختار الإطارات 4 و 5 ونفتح إطار جديدا.

http://www.arabsgate.com/eduimages/images1/485810/29.gif

الآن نحتاج إلى إطار جديد آخر لإضافة انتقال ناعم وسلس بين البداية والنهاية. ننسخ الإطار الأول، نحركه حتى نهاية التسلسل، نفصل الربط بين Eyes1 وبين Layer1 ثم نحرك العيون إلى منتصف المسافة حيث هي في الإطار الأول والأخير. زمن التأخير يكون 0 ثانية:

http://www.arabsgate.com/eduimages/images1/485810/30.gif

وهنا معاينة أخرى http://www.arabsgate.com/eduimages/images1/485810/27.gif

تحقيق الأمثلية Optimization

"وزن" حجم الصورة المنشورة على الويب مهم جداً، الأقل هو الأفضل، دعنا نرى نجعل هذا الوجه يخسر بعض البايتات:

http://www.arabsgate.com/eduimages/images1/485810/32.jpg

1) File Format menu قائمة صيغة الملف: الخيار الوحيد أمامنا هو GIF.

2) Color Reduction menu قائمة تخفيض الألوان: إنشاء جداول ألوان.

3) Dither menu قائمة التردد: بعض الصور على الويب تنشر باستعمال 24 بت، لكن معظم متصفحات الإنترنت تعرض فقط ألوان 8 بت (نمط 256 لون). بحيث نسعمل أقل ألوان ممكنة والتي سيتم عرضها في جميع المصتفحات.

4) Transparency الشفافية: بحيث يبدو الوجه واضحا على أي خلفية أخرى.

5) Interlaced: غير مهم، لا تشغل بالك به.

6) Compression الضغط: تخفيض حجم الملف بشكل انتقائي للبيانات.

7) Colors الألوان: من خلال التصميم في الفوتوشوب والانتقال إلى التحريك في الإيميج ريدي، تم توليد جدول ألوان تضمن في النهاية أربعة ألوان.

http://www.arabsgate.com/eduimages/images1/485810/33.gif

8) matte: غير مهم.

9) Web Snap: نفس رقم 8.

من قائمة ملف اختر Save Optimized واضغط موافق.

الـقــص Cropping

الآن دعنا نقص المساحات الزائدة من مساحة العمل.

نفتح الملف من جديد بصيغة Gif، وباستعمال أداة التحريك نحدد دلائل القص من خلال السحب من

المسطرة.

http://www.arabsgate.com/eduimages/images1/485810/34.gif

من شريط الأدوات نختار أداة القص knife Crop، ثم نقطع على حدود الدلائل ثم نضغط على مفتاح الإدخال من الكيبورد Enter key.

http://www.arabsgate.com/eduimages/images1/485810/35.jpg

تمام، من الآن نقدر أن نغير أي لون للوجه

http://www.arabsgate.com/eduimages/images1/485810/36.gif

من لوحة جدول الألوان أنقر على اللون الذي ترغب بتغييره، ومن لوحة انتقاء الألوان اختر أي لون آخر، مثلاً البرتقالي، اضغط موافق واستعرض الوجه في المتصفح:

http://www.arabsgate.com/eduimages/images1/485810/37.gif

بهذا نكون قد انتهينا، والحمد لله رب العالمين.

اي استفسار انا تحت الامر انشاء الله

اتمني ان يكون في تطبيقات حتي يكون قد وفقت في الشرح طريقة ............. وشكرا لكم .

اخوكم في الله بومازن؛؛




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