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

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

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

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

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

التخطيط Sketching هو تطبيق مرئي للفكرة على الورق، هذا يجعل الأمور أوضح وأنظف. مثال:
تـصْـمـيـم الـوُجــوهِ الـتعْـبـيـريّـة smiles 1

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

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

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

Tools
تـصْـمـيـم الـوُجــوهِ الـتعْـبـيـريّـة smiles 2

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

Layers

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

Swatches

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

أما في برنامج الإيميج ريدي
Animation
تـصْـمـيـم الـوُجــوهِ الـتعْـبـيـريّـة smiles 5

Optimization
تـصْـمـيـم الـوُجــوهِ الـتعْـبـيـريّـة smiles 6

Color Table
تـصْـمـيـم الـوُجــوهِ الـتعْـبـيـريّـة smiles 7

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

الإنشـاء - اليوم الأول

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

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

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

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

الآن، من شريط الأدوات اختر أداة القلم pencil واجعل القطر 15 بيكسل
تـصْـمـيـم الـوُجــوهِ الـتعْـبـيـريّـة smiles 9

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

واختر اللون الأسود
تـصْـمـيـم الـوُجــوهِ الـتعْـبـيـريّـة smiles 10

اعمل بقعة في منتصف صفحة العمل
تـصْـمـيـم الـوُجــوهِ الـتعْـبـيـريّـة smiles 11

الآن غير لون القم إلى الأصفر واجعل القطر 13 بيكسل واعمل بقعة منتصف البقعة السابقة تماماً
تـصْـمـيـم الـوُجــوهِ الـتعْـبـيـريّـة smiles 12

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

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

الصورة رقم (6) ننشئ طبقة جديدة ونعطها اسماً وليكن eyes1
تـصْـمـيـم الـوُجــوهِ الـتعْـبـيـريّـة smiles 13

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

الصورة رقم (7) اجعل القلم حاداً بمقدار 1 بيكسل واللون أسود وارسم كما يلي
تـصْـمـيـم الـوُجــوهِ الـتعْـبـيـريّـة smiles 14

يمكن أن يكون للعيون أي شكل، مثل تـصْـمـيـم الـوُجــوهِ الـتعْـبـيـريّـة smiles E13dfbfbau9

أو

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

أو حتى

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

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

الصروة رقم (8) ننسخ الطبقة eyes1 ونعيد تسميتها إلى eyes2
تـصْـمـيـم الـوُجــوهِ الـتعْـبـيـريّـة smiles 16

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

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

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

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

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

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

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

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

الصورة رقم (11) كيف يتم العمل:
تـصْـمـيـم الـوُجــوهِ الـتعْـبـيـريّـة smiles 19

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

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

لتبسيط الأمور سنوجز ما عملناه فيما يلي (مازلت أملك بعض الوقت قبل العشاء):
تـصْـمـيـم الـوُجــوهِ الـتعْـبـيـريّـة smiles 20

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

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

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

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

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

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

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

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

الإطار الأول يتضمن Layer1 و eyes1
تـصْـمـيـم الـوُجــوهِ الـتعْـبـيـريّـة smiles 21

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

الإطار الثاني. افتح إطاراً جديداً وأغلق عيون الوجه بالتحويل من eyes1 إلى eyes3:
تـصْـمـيـم الـوُجــوهِ الـتعْـبـيـريّـة smiles 22

الإطار الثالث هو نسخة كاملة من الإطار الأول، ببساطة ننسخه ونحركه إلى نهاية التسلسل:
تـصْـمـيـم الـوُجــوهِ الـتعْـبـيـريّـة smiles 23

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

hands1.

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

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

الإطار السادس. نفتح العيون eyes4 ونستخدم أداة التحريك لنزيح الأيدي بعيداً عن بعض.
تـصْـمـيـم الـوُجــوهِ الـتعْـبـيـريّـة smiles 24

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

حسنا، نعمل بشكل جيد لحد الآن. طيب سؤال .. ماذا عملنا؟ دعنا نرى:
تـصْـمـيـم الـوُجــوهِ الـتعْـبـيـريّـة smiles 25

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

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

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

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

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

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

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

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

نختار الإطارات 4 و 5 ونفتح إطار جديدا.
تـصْـمـيـم الـوُجــوهِ الـتعْـبـيـريّـة smiles 29

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

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

وهنا معاينة أخرى تـصْـمـيـم الـوُجــوهِ الـتعْـبـيـريّـة smiles 31

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

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

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

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

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

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

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

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

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

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

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

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

8) matte: غير مهم.

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

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

الـقــص Cropping

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

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

المسطرة.
تـصْـمـيـم الـوُجــوهِ الـتعْـبـيـريّـة smiles 34

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

من شريط الأدوات نختار أداة القص knife Crop، ثم نقطع على حدود الدلائل ثم نضغط على مفتاح الإدخال من الكيبورد Enter key.
تـصْـمـيـم الـوُجــوهِ الـتعْـبـيـريّـة smiles 35

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

تمام، من الآن نقدر أن نغير أي لون للوجه.
تـصْـمـيـم الـوُجــوهِ الـتعْـبـيـريّـة smiles 36

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

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

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

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

لا أنسى بأن أذكّر: حقوق الترجمة محفوظة لـ reesha.

ووووووووووووووووووووووووووووووووواوووووووووووووووووووووووووووو
مشكوووووووووووووووووووووووووووووووووووووووووووووووووووووووووور
عللللللللللللللللللللللللللللللللللللللللللللللللللللللللللللللللللللللللللللللللللللللللللللللللللللللللللللللللللللللللى
الللموووووووووووووووووووووووووووووووووووووووووووووووووووووضووووع

شكرا
عاشت ايدك
اني من محبي الفوتو شوب

شكرا جزيلا شموس على الموضوع الرائع
بارك الله فيك

تحياتي ...