أهلًا بكم في مقال جديد من سلسلة تعلّم برنامج كاركتر أنيميتور، سنتعرف على موضوع جديد وشيق سيضفي الكثير من الحركة والمتعة على بناء الشخصيات الكرتونية، وهو التحكم بالسلوكيات. تُعَد السلوكيات Behaviors واحدةً من أهم ميزات برنامج الأنيميتور، إذ تساعد على إنشاء شخصيات كرتونية جميلة ومسلية بسهولة، سنتعرف في هذا المقال على خاصيتي السحب Dragger والتمايل Dangle، واللتان تُعَدان سلوكيات لاحتواء برنامج الأنيميتور على سلوكيات تتشابه مع الأدوات بالاسم، وفي الحقيقة فإن السلوكيات تتحكم بعمل الأدوات وهو ما سنلقي الضوء عليه، كما سنتعرف على أداتين مميزتين للتحكم بسلوكيات الشخصية، وهما التحريك باستخدام لوحة المفاتيح Keyboard triggers والطبقات الدوارة Cycle layers.

أداة Dragger

عليك أوّلًا ضبط وضع التحريك لـ Rig mode ثم أنقر على أيقونة الشخصية في اللوحة على جانب الشخصية الكرتونية.

تظهر في اللوحة الجانبية للخصائص كافة السلوكيات التي تملكها الشخصية افتراضيًّا، وسنركز اليوم على عمل Dragger.

عندما تفتح أيًّا من السلوكيات فبإمكانك رؤية كافّة إعداداتها، حيث تُظهِر مقابض الهدف Target handles أماكن استخدام خاصية Dragger، وكما نرى في الصورة فالأداة مُستخدمة عند ذراعي -اسم الشخصية الكرتونية- Vicky، حيث يساعدك خيار الحركة التالية After move على اختيار الخطوة التالية التي ستفعلها الذراعان بعد تحريكهما، فتستطيع اختيار إرجاع الذراعين إلى بقية الجسم أو تثبيتهما في مكانهما بعد الحركة، سنرى من خلال الفيديو التوضيحي طريقة تطبيق ذلك:

يمكنك تجربة عدة خيارات مختلفة باستخدام أداة التثبيت في المكان Hold in place ومن ثم تجربة تأثيرات أخرى، حيث يساعدك خيار مدة العودة Return duration مثلًا على تحديد المدة الزمنية التي تحتاجها Vicky لتعود ذراعيها إلى مكانهما بجانب جذعها.

ولنشاهد معًا تطبيق ذلك من خلال الفيديو:

تبدو حركة الذراعين غير طبيعية عند اختيار مدة 0 ثانية مثل زمنٍ لعودة الذراعين إلى موضعهما، وتظهر الذراعان بمظهر غريب عند اختيار زمن أطول أي حوالي 3 ثوانٍ مثلًا، لذلك من الأفضل اختيار أرقام مقبولة مثل 0.5 أو 1 وهو أمر اختياري يختلف من مصمم لآخر حسب متطلبات التصميم.

بقي لدينا خيار أخير ضمن Dragger للتحكم بالذراعين مع مجموعة خيارات تساعدك على إنشاء حركات مختلفة ومسلية، لذا تابع الفيديو التالي لتستمتع بهذا الخيار:

عند إضافة الإشارة بأداة Dragger إلى ورك Vicky، نستطيع إضافة حركات رقص إلى حركات الشخصية، ومع دمج خيار Hold in place نستطيع إنشاء العديد من الحركات المسلية.

أداة Dangle

عند تصفّح خيارات أداة Dangle سنجد المقابض المستخدَمة سابقًا للتحكّم بالسلوك وضبط حركة Vichy، حيث تظهر المقابض على تسريحة شعر Vichy، ويظهر تحت المقابض خيار spring ،stiffness والذي يحدد مدى صلابة السلوك، بحيث تكون القيمة الافتراضية المُحددة للخيار هي 100% ولكنك تستطيع تغيير هذه النسبة، ولترى التغيرات الحاصلة شاهد هذا الفيديو:

عندما ضُبط خيار stiffness إلى نسبة 100% نلاحظ حركة الشعر المحدودة، ولكن بتغيير النسبة إلى 50%، ستبدأ تسريحة الشعر بالتحرك بحرية؛ أما الخيار التالي فهو خيار قوة الجاذبية Gravity strength والتي تُعطى قيمة 10% افتراضيًّا، وبإمكاننا تقليل النسبة للحصول على تأثير مختلف، كما تستطيع بالطبع تغيير اتجاه الجاذبية من خلال المؤشر مما سيمنحك مجموعة تأثيرات مضحكةً ومسلية. تستطيع فهم ذلك أكثر عبر مشاهدة هذا الفيديو:

عندما تغير قيمة قوة الجاذبية من 10% إلى 60% ستلاحظ أن شعر Vicky يبدو أثقل، وبتغيير اتجاه الجاذبية يمكنك إنشاء صورة مزيفة للشخصية وكأنها معلّقة رأسًا على عقب، خيارنا التالي مسلٍّ ومميز، إذ بإمكانك الدمج بين خيار قوة الرياح Wind strength واتجاه الرياح Wind direction وتنوع الرياح Wind variation، وذلك لإنشاء تأثيرات جميلة وغريبة.

لنتابع معًا كيفية تطبيق هذه الخيارات:

ستلاحظ أن تغيير قيمة أحد الخيارات السابقة وحدها لن يعطي نتيجةً مميزة، ولكن سيبدو التأثير أوضح وأجمل عندما تغير قيمة قوة الرياح مع تغيير قيمة تنوع الرياح في نفس الوقت، وعند تغيير اتجاه الرياح إلى عمودين لأعلى فستبدو Vicky وكأنها تسقط! وبزيادة كلٍّ من القوة والتنوع في نفس الوقت لنسبة أعلى من 200% سنحصل على مشهد يشبه العاصفة!

هذه هي خيارات سلوكيّ Dragger وDangle المميزين، جرّب الخيارات المتنوعة بنسب مختلفة ولا تفوّت الجزء القادم من السلسلة الذي سيسلط الضوء على مجموعة مهمة من سلوكيات الشخصيات في برنامج كاركتر أنيميتور.

Keyboard triggers

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

افتح ملف الفوتوشوب أو الاليستريتور الذي يتضمن تصميم شخصيتك وانسخ الطبقة التي تحوي الذراع للحصول على طبقتين متماثلتين.

حدّد الطبقة المنسوخة من الذراع واحذف كل شيء من الصورة باستثناء اليد باستخدام أداة الممحاة، ثم أعد تسمية المجموعة المتبقية في طبقة الفوتوشوب، بحيث تحمل اسم normal وضعها في مجموعة "+arm 2".

إخفِ اليد الجديدة وحدّد اليد الأصلية "+arm 2"، وفي هذه المرة احذف اليد فقط، والآن لقد أصبح لديك يد وذراع منفصلتان عن بعضهما.

سنرسم يدًا تشير بأحد أصابعها ونضعها في مجموعة اليد الأصلية التي أسميناها normal.

أصبح لدينا في مجموعة "+arm 2" ذراعًا من الكتف إلى المعصم، ومجموعةً تضم اليد الأصلية واليد التي تشير بإصبعها.

اترك اليد التي تشير بإصبعها مخفيّةً بحيث ترى اليد الأصلية فقط، وانقر على خيار الحفظ لتلاحظ انسجام التغيرات مع شخصيتك في برنامج الأنيميتور، لاحظ ظهور مجموعة جديدة لكل من اليدين في واجهة البرنامج، وهنا يبدأ دور أداة Keyboard triggers.

انقر على طبقة Point التي تضم اليد المشيرة بإصبعها، وستشاهد كافة إعدادات الطبقة في اللوحة الجانبية للخصائص، حيث تضم قائمة الخصائص كُلًا من الطبقة Layer وشبكة الطبقة Layer mesh، والعلامات Tags، والتحريك Trigger. وهنا افتح قائمة Trigger وتفقّد الخيارات.

يظهر أولًا خيار المفتاح Key ويضم زر لوحة المفاتيح الذي ستُسند إليه مهمة إظهار اليد المشيرة بإصبعها عند الضغط عليه في لوحة المفاتيح، إذ تستطيع اختيار أي زر تريده (وقد اخترنا هنا الزر 1). تحت خيار Key يظهر خيار Latch والذي إذا حدّدته أثناء التسجيل فستحتاج للضغط على زر المهمّة Trigger key مرةً واحدةً فقط، وسيبقى العنصر الجديد مرئيًّا حتى تعيد الضغط على الزر نفسه مُجددا (والعنصر في مثالنا هو اليد التي تشير بإصبعها)، وإذا لم تحدد زر Latch فإنك ستحتاج للضغط المتواصل على زر التحريك لتظهر صورة اليد المطلوبة. بعد خيار Latch يوجد خيار إخفاء بقية العناصر ضمن المجموعة، حيث يؤدي هذا الخيار إلى إخفاء بقية العناصر الموجودة في المجموعة نفسها (العنصر المخفي في مثالنا هو اليد الأصلية normal)، ونحتاج إلى استخدام هذا الخيار عندما نرغب باستبدال عنصر بعنصر آخر، وسنرى الآن ماذا يحدث في وضع التسجيل Record mode عندما نضغط على الزر 1 الذي ضبطناه بوصفه زر Trigger.

تظهر اليد المشيرة بإصبعها عندما نضغط على زر Trigger، ويمكننا تحريك ذراع Vicky بأي اتجاه نريده باستخدام مؤشر الفأرة. ويستخدم خيار Keyboard triggers لإضافة عناصر أخرى إلى الشخصية مثل بعض العناصر التجميلية، ولنجرب هنا مثلًا إضافة نظارة شمسية تُفرح Vicky.

نرسم النظارة الشمسية أولًا في الاليستريتور ثم نبقيها مخفيةً في الملف، ثم نختار زر التحريك وليكن زر الرقم 2، ومن المفيد تفعيل زر Latch حتى تبقى النظارة على عيني Vicky دون الحاجة إلى الضغط باستمرار على الزر المحدد. لن نستخدم خيار هنا إخفاء بقية العناصر ضمن المجموعة لأن استخدامه سيُخفي رأس Vicky، ولن تبقى سوى النظارة تحوم وحدها في مساحة العمل.

يعطي سلوك Keyboard trigger الكثير من الإمكانيات لتبدع في عملك الفني مثل الإيماءات وعناصر الزينة وتغيير اللون وأشكال الفم المختلفة.

وسنتعرف الآن على سلوك جديد يضفي المزيد من الغنى والحيوية إلى عملك الفني.

Cycle layers

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

لنرسم مثلًا خمسة إطارات تمثل حركة اللسان بحيث تضم تحريك اللسان إلى خارج الفم وداخله، سنضع الإطارات في مجموعة واحدة ونرقمهم بالترتيب حسب مظهر اللسان عند كل حركة، ولا تنسى حفظ الإطارات والعودة إلى برنامج الأنيميتور لرؤية النتائج.

لا نرغب بإظهار لسان Vicky دائمًا خارج الفم، ولذلك سنستخدم زر Trigger لإظهاره فقط عندما نرغب بذلك، ولنختر مثلًا زر الرقم 3 دون نسيان الضغط على خيار إخفاء بقية العناصر ضمن المجموعة، والآن سننتقل إلى السلوكيات وننقر على رمز (+) لإضافة سلوك جديد إلى هذا العنصر.

ستظهر أمامك قائمةً توضح جميع السلوكيات التي تستطيع إضافتها إلى العنصر المحدد، ولنختر مثلًا سلوك Cycle layer ونطّلع على الخيارات المختلفة التي يقدمها.

من خيار البدء اختر وقت بدء الحركة، وفي مثالنا سنختار البدء عند الضغط على زر الحركة المحدد (3). يفيد خيار immediately الموجود في نفس القائمة بإنشاء أنواع أخرى من التأثيرات الحركية مثل الحركة المستمرة للعنصر، أما الخيار الثاني فهو ترتيب الطبقة.

بإمكانك اختيار الترتيب الذي ستتبعه الحركة وليكن من أعلى لأسفل مثلًا.

نستطيع تحديد سرعة الحركة من خلال خيار Advances every، ولنفرض مثلًا أننا نريد للحركة التقدم مع كل إطار واحد (يختلف هذا الرقم طبعًا باختلاف التأثير الذي نحاول إنشاءه).

ونستطيع أيضًا اختيار once أو مرة واحدة في حالة لسان Vicky الذي نعمل على تحريكه.

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

لاحظ أننا عندما نضغط على الزر مطوّلًا يختفي الفم بأكمله، ومن هنا سننتقل إلى الخيار التالي وهو Hold on last layer.

هذا ما سيبدو عليه الأمر عندما نستخدم خياري Hold on last layer وforward and reverse معًا.

عندما نستخدم خياري Hold on last layer وForward and reverse معًا ستبدأ الحركة العكسية عندما تحرر زر التحريك Trigger، ولهذا سنستخدم في مثالنا خيار Hold on last layer فقط.

لننتقل معًا إلى الخيار التالي وهو On trigger، يتحكم هذا الخيار بالإجراء الذي يتخذه البرنامج عند تحرير زر Trigger، ويُنهي خيار Let cycle finish الحركة حتى وإن كان الضغط على الزر مستمرًّا، بينما سينهي خيار Stop immediately الحركة عندما تحرر الزر سواءً كانت حركة الإطار قد انتهت أم لا، لنشاهد كيف سيبدو استخدام الخيارين معًا:

عندما تحدد خيار Stop immediately فستتوقف الحركة عند تحرير زر Trigger، كما يعرض البرنامج الإطارين الأول والثاني عندما نضغط على الزر ونحرره بسرعة. لا يعمل هذا الخيار جيّدًا في عمليات التحريك ولكنه قد يفيد في حالات أخرى، ولهذا سنحافظ على خيار Let cycle finish ونتابع.

يتيح خيار إيقاف الطبقات إمكانية إيقاف الحركة عند طبقة محددة ومن ثم المتابعة، ولكي تبدأ استخدام هذا الخيار عليك أن تربط الطبقة التي تريد تحريكها مع علامة إيقاف الحركة، وذلك بفتح مجموعة الحركة من اللوحة الجانبية للشخصية، وفي مثالنا سنفتح مجموعة اللسان ثم نختار الطبقة التي نريد التوقف عندها، ثم نفتح قائمة Tags في اللوحة الجانبية للخصائص.

انتقل إلى أسفل اللوحة الجانبية وستجد خيار Cycle pause ضمن قسم Miscellaneous، حدّده وسترى كيفية ظهور العلامات المعبّرة على واجهة معاينة الشخصية.

اضغط على مجموعة اللسان في اللوحة الجانبية للشخصية للعودة إلى سلوك Cycle layers الذي نعمل عليه.

تظهر طبقة الرقم 3 تحت خيار Pause layers وهو رقم الطبقة التي اخترناها لنقف عندها، وهي مرقمة بالرقم 1 لأنه لدينا طبقة واحدة فقط مرتبطة مع سلوك Cycle pause، لنشاهد ما يحدث عند الضغط على الزر المُخصص لحركة اللسان.

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

الخيار الأخير وهو المتابعة بعد الإيقاف، والذي تستطيع استخدامه إذا أردت متابعة الحركة بالضغط على الزر مرةً أخرى أي خيار When triggered، أو إذا أردت إيقاف حركة الإطار عند الضغط على الزر ثم تحريره وهو خيار When trigger released، وهو أمر اختياري يعتمد على تفضيلك للأمور.

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

ترجمة -وبتصرّف- للمقالين Character Animator Tutorials Part 5: Behaviors 1، وCharacter Animator Tutorials Part 6: Behaviors 2 لصاحبته Slavena Simeonova.

اقرأ أيضًا

• التمثيل والأدوات في برنامج كاركتر أنيميتور
• أساسيات بناء الشخصية الكرتونية في برامج التصميم الشهيرة
• مقدمة عن برنامج أدوبي كاراكتر أنيميتور Adobe Character Animator

أهلًا بكم في الجزء الرابع من سلسلة تعلّم برنامج كاركتر أنيميتور الجديد، بعدما ناقشنا سابقًا كيفية تصميم الشخصية الكرتونية المناسبة ثم تحريكها في برنامج الأنيميتور، سنشرح في هذا المقال كيف نُضفي الحياة على شخصيتنا المميزة.

واجهة برنامج الأنيميتور

لنفتح معًا برنامج كاركتر أنيميتور ونبدأ بإنشاء مشروع جديد.

تبدو واجهة البرنامج مشابهةً إلى حد ما واجهة برنامج الفوتوشوب، وسننشئ مشروعًا جديدًا لاستيراد الشخصية الكرتونية إليه ثم تحريكها وذلك عبر الخطوات التالية ١. استيراد الموجود في قائمة ملف ٢.اختيار ملف الفوتوشوب أو الاليستريتور المطلوب، وقبل البدء بعملية التحريك لنتعرف قليلًا على واجهة البرنامج الأساسية:

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

للانتقال إلى وضع التسجيل، انقر على زر إضافة مشهد جديد أسفل اللوحة الجانبية للمشروع ليعمل وضع التسجيل تلقائيًّا، وستشاهد وجهك في اللوحة الجانبية المخصصة للكاميرا والميكروفون، حيث تظهر الصورة مظلمةً بعض الشيء في البداية ولكن يجد البرنامج وجهك بدقة أكبر بعد النقر المزدوج عليه في اللوحة الجانبية، وسيُظهر البرنامج نقاطًا حمراءً على وجهك وأخرى زرقاء على صورة الشخصية الكرتونية.

تستطيع مشاهدة شخصيتك أثناء تقليدها لحركات رأسك في اللوحة الجانبية للمشهد، وأن تشاهد أيضًا تعابير الوجه التي يتعرف عليها البرنامج تلقائيًّا، والتي ذكرناها سابقًا، وهي الجفنان والبؤبؤان وطرفة العين وأشكال الفم المختلفة. تملك شخصيتنا Vicky كافة هذه الوظائف، وكل ما علينا فعله هو تنظيم ملف الفوتوشوب أو الاليستريتور جيّدًا، وسنتعرّف معًا على طريقة إدراك البرنامج لهذه الخصائص في وضع التشغيل، ولكن لنستكشف أولًا واجهة وضع التسجيل. لا تزال اللوحة الجانبية مرئيةً على يسار الشاشة وتُظهر أيقونةً على شكل شريط صغير، حيث تشير إلى وجود مشهد حالي في وضع التسجيل.

تتموضع اللوحة الجانبية للمشهد في مركز الشاشة، حيث تبدو Vicky جاهزةً للحركة وتحتها أزرار التسجيل، وتظهر اللوحة الجانبية للخط الزمني في أسفل النافذة، حيث تستطيع تعديل شخصياتك، ويظهر الخط الزمني أسفل الشخصية بهدف التعديل على تسجيلاتك.

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

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

ستلاحظ في الصورة التالية الطريقة التي يربط من خلالها برنامج الأنيميتور تعابير الوجه المختلفة تبعًا لأسمائها، ولكن وجب التنويه مجدّدًا إلى رمز التاج ودلالته، إذ يتحول رمز "+" الذي استخدمناه في برنامجي الفوتوشوب والاليستريتور إلى أيقونة تاج صغير عندما نستورد ملف الشخصية إلى الأنيميتور، ويشير التاج إلى استقلالية حركة عضو جسد الشخصية عن بقية الأعضاء.

أدوات برنامج كاركتر أنيميتور

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

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

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

والآن لنبدأ باستخدام أداة جديدة تساعدنا على ضبط حركة شخصيتنا الكرتونية، وهي أداة التشبيك Staple tool، إذ تستخدم لربط أجزاء معينة من جسد الشخصية مع بقية الجسد.

لنجرب استخدام Staple tool لربط ذراعي Vicky مع جذعها، وننوّه على الفرق بين أداتي Pin وStaple في آلية التثبيت، إذ تثبت أداة Pin منطقة معينة من الجسد بالنسبة لموقع معين، أما أداة Staple فهي تربط أجزاءً معينةً من الجسد مع الجسد ككل، أي أنها أداة لربط الجزء مع الكل، لنغير مثلًا النقطة المرجعية لرأس شخصيتنا وجسمها بحيث تبدو أكثر واقعيّةً، وفي الفيديو التالي مثال واضح عن تطبيق الأداة:

تبدو حركة Vicky في هذه المرحلة غريبةً نوعًا ما، إذ يظهر رأسها بصورة غير متوازنة مع جسمها، ولكن بتغيير النقطة المرجعية تحرّكت Vicky بعفوية وأريحية، فمن المفيد تحديد النقطة المرجعية للرأس بحيث تتصل بالعنق ليتمحور الرأس حول هذه النقطة.

نلاحظ أن ذراعي Vicky مرتبطتان بجسدها لذلك سنحاول جعلهما متحركتين بواسطة الفأرة أو شاشة اللمس، حيث تمكّننا أداة السحب Dragger tool من ذلك.

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

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

لقد تحسّن مظهر ذراعي Vicky بعد إجراء التعديلات السابقة، ولكن لا يزال مظهرهما غير واقعيّ بما يكفي، ولحل المشكلة سنتعرف على أداة جديدة تفي بالغرض وهي أداة العصا Stick tool.

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

ها هي شخصيتك تتحرك بحرية وانسيابية، ولكن تذكّر ألا تُقاطع خطين معًا أثناء استخدام أداة العصا ويمكنك استخدام هذه الأداة على الجسد والساقين إذا تطلّبت حركة الشخصية ذلك.

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

الأداة الأخيرة في درسنا هذا هي أداة Handle.

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

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

ترجمة -وبتصرّف- للمقال Character Animator Tutorials Part 4: Rigging and tools لصاحبته Slavena Simeonova.

اقرأ أيضًا

• مقدمة عن برنامج أدوبي كاراكتر أنيميتور Adobe Character Animator
• أساسيات بناء الشخصية الكرتونية في برامج التصميم الشهيرة
• السلوكيات في برامج كاركتر أنيميتور

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

البناء والتسمية

تُعَد طريقة تسمية الطبقات والمجموعات في البرنامج مهمةً جدًّا، إذ يستخدم البرنامج هذه التسميات للتعرف على أجزاء جسد الشخصية، وعندما تعمل على برنامج الإليستريتور، فمن المفيد ترتيب مكونات عملك ضمن طبقة واحدة فقط وعدة مجموعات داخلها، بحيث تشمل الأجزاء المختلفة لجسد الشخصية، وللتوضيح أكثر اتبع طريقة التسمية الموضحة في الصورة:

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

إذ ترتب أجزاء جسم الشخصية في طبقة واحدة بدون اسم، ومن الجيد تسمية الطبقة الرئيسية باسم الشخصية أو تسمية تعبّر عنها مثل طفل أو فتاة أو غيرها، فقد سُميت الشخصية في مثالنا هذا على سبيل المثال، باسم "+Vicky"، وانتبه إلى رمز "+" الموجود قبل الاسم، لأنه عنصر أساسي في تسمية الطبقات والمجموعات في البرنامج، حيث يُحدد هذا الرمز مدى قدرة الطبقة أو المجموعة على التحرّك باستقلالية عن المكونات الأخرى مما يعني حركة العنصر بغض النظر عن بقية أجزاء الجسد، وستلاحظ استخدام رمز + أمام العديد من التسميات في مثالنا هذا. والآن لنبدأ معًا بإنشاء مجموعة الرأس ومجموعة الجسد، حيث ستجد في الصورة طبقةً لاسم +Vicky تضم مجموعةً تحمل اسم الرأس Head ومجموعةً أخرى تحمل اسم الجسد Body وذلك بالنسبة لبرنامج الإليستريتور:

بينما في الفوتوشوب فإن تنورة الشخصية وساقيها في طبقة واحدة إذ لن يكون لهذين المكونين أي سلوكيات، وينطبق الأمر ذاته على شكل الوجه والجزء العلوي من الشعر والأنف ونمش الوجه؛ أما الأجزاء التي ستوضع في طبقات مستقلة، فهي بؤبؤي العينين والرموش والحاجبين والفم والذراعين وضفيرتي الشعر، وقد وُضعت كافة الطبقات التي تضم مكونات الشخصية في مجموعة واحدة غير مسمّاة، وكما في الإليستريتور فإن من المفيد في الفوتوشوب تسمية المجموعة باسم الشخصية أو تسمية تعبّر عنها مثل طفل أو فتاة أو غيرها، فقد سُميت الشخصية -كما شرحنا بالنسبة للإليستريتور- باسم +Vicky، وهنا أيضًا انتبه دائمًا إلى رمز "+" الموجود قبل الاسم لأنه عنصر أساسي في تسمية الطبقات والمجموعات في البرنامج، حيث يحدد هذا الرمز قدرة الطبقة أو المجموعة على التحرك باستقلالية عن المكونات الأخرى، مما يعني حركة العنصر بغض النظر عن بقية أجزاء الجسم، وستلاحظ استخدام رمز "+" أمام العديد من التسميات في مثالنا، ولنبدأ معًا بإنشاء مجموعة الرأس ومجموعة الجسم، حيث ستجد في الصورة طبقةً لاسم "+Vicky" تضم مجموعةً تحمل اسم الرأس Head، ومجموعةً تحمل اسم الجسم Body:

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

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

ها نحن نرى رمز + مجدّدًا ليدل على حركة ذراعي الشخصية بحرية واستقلالية، سنعيّن لاحقًا مظهرًا متدليًا لتسريحة ذيل الحصان لشعر شخصيتنا، لذلك سنضع رمز + قبل اسمه أيضًا، ولنتابع تسمية وترتيب ملامح وجه الشخصية التي سيتعرف عليها برنامج كاركتر أنيميتور تلقائيًّا، إذ تتمتع هذه الملامح بسلوكيات محددة سنخصص لها قسمًا مستقلًّا هو ما يأتي

الملامح التي يتعرف عليها البرنامج تلقائيا

هي الحاجب وبؤبؤ العين وأشكال الفم، فمن ميزات برنامج كاركتر أنيميتور أنه يستطيع إضفاء الحركة على الملامح السابقة إذا رُتّبت جيّدًا داخل واجهة البرنامج، كما سنضفي الحياة على ملامح وجه الشخصية في الخطوات التالية:

العينان

سنبدأ بعينَي شخصيتنا وسنبدأ أولًا ببرنامج الإليستريتور، وهنا عليك أن تنتبه إلى أهمية تسمية العين اليسرى باسم Left eye، والعين اليمنى باسم Right eye، وذلك تبعًا لجسد الشخصية وليس لاتجاهات الشاشة أمامك، بعد ذلك سمِّ البؤبؤ الأيمن باسم +Right pupil، أما البؤبؤ الأيسر باسم +Left pupil، وتذكر أهمية إضافة رمز "+" قبل اسمي البؤبؤين، وذلك من أجل منحهما القدرة على الحركة دائريًّا بحرية.

ومن الجيد إنشاء مجموعة في الفوتوشوب نضع فيها أجزاء العين اليسرى، مثل البؤبؤ وبياض العين والرموش ومجموعة أخرى مشابهة نضع فيها أجزاء العين اليمنى، وهنا أيضًا سنعمل على تسمية العين اليسرى باسم Left eye والعين اليمنى باسم Right eye، وذلك تبعًا لجسم الشخصية وليس لاتجاهات الشاشة، بعد ذلك سمِّ البؤبؤ الأيمن أيضًا باسم +Right pupil والبؤبؤ الأيسر باسم +Left pupil، ولا تنسى أيضًا إضافة رمز "+" قبل اسمي البؤبؤين لتمنحهما القدرة على الحركة دائريًّا بحرية.

في برنامج الإليستريتور سمِّ بياض عيني الشخصية بأسماء واضحة مثل Left pupil range لبياض العين اليسرى وتسمية Right pupil range لبياض العين اليمنى، حيث يتعرف البرنامج على هذين العنصرين من خلال اسميهما بوصفهما الحدود المحيطة ببؤبؤ كل من العينين. تملك شخصيتنا Vicky رموشًا أيضًا، ولكن يصنّف البرنامج رموش الشخصيات تحت صنف العناصر التزيينية والتجميلية فقط، وليس لها وظيفة محددة، لذلك تستطيع تسمية الرموش بالأسماء التي تريدها، حيث سيتعرف البرنامج على كافة الأسماء التي ذكرناها سابقًا ويعمل على بناء الشخصية تبعًا لها، لذلك انتبه إلى تسميتها بدقة واستخدامها لمرة واحدة لا أكثر.

لنبدأ الآن بطرفة العين، ستجد في الصورة أدناه أننا ننشئ عنصر طرفة العين لشخصيتنا، بحيث نسمي طرفة العين اليمنى باسم Right blink، أما طرفة العين اليسرى فتسمى باسم Left blink، وتذكّر أنه في كل مرة تطرف بعينيك سيُظهر البرنامج الجفنين مغلقين لشخصيتك ويتعامل مع كافة العناصر الأخرى الموجودة في نفس مجموعة طرفة العين وكأنها غير مرتبة، لذلك انتبه إلى ترتيب طرفة العين في نفس مجموعة مكونات العينين الأخرى كما هو موضح في الصورة.

اتبع نفس طريقة التسميات بالنسبة لبرنامج الفوتوشوب أيضًا، وبالنسبة لطرفة العين في الفوتوشوب ستجد في الصورة أننا ننشئ عنصر طرفة العين لشخصيتنا بنفس الطريقة في الإليستريتور بحيث نسمي طرفة العين اليمنى باسم +Right blink وطرفة العين اليسرى باسم +Left blink وهنا أيضًا انتبه إلى ترتيب طرفة العين في نفس مجموعة مكونات العين الأخرى كما هو موضح في الصورة.

الحاجبان

سنتعامل مجددًا مع رمز "+"، إذ سنسمي الحاجب الأيمن باسم "+ Right eyebrow"، والحاجب الأيسر باسم "+ Left eyebrow" العادة، وهي المرة الأخيرة التي سنستخدم فيها هذا الرمز مع عناصر الوجه، حيث توضح الصورة التالية في الإليستريتور كافة الخطوات التي نفذناها حتى الآن:

والأمر ذاته بالنسبة للفوتوشوب.

الفم

تنشأ الأشكال المختلفة للفم تبعًا للصوت، وهي المكونات الوحيدة التي تعتمد على الميكروفون بغض النظر عن الكاميرا، ولكن لا يعني ذلك أنّ البرنامج يُنشئ تلك الأشكال بنفسه، إذ أن لكل شخصية كرتونية متكاملة يجب امتلاك 14 شكل مختلف للفم، كما تختلف أشكال الفم باختلاف الحرف المنطوق، ونستخدم عمومًا شكلًا واحدًا لكل من الأحرف A وE وI، كما نستخدم شكلًا آخرًا لكل من الأحرف O وR وU وW، وشكلًا آخر مغاير لكل من الأحرف F وV وPH، وشكلًا رابعًا لكل من الأحرف B وM وP، بعد ذلك نستخدم شكلًا لحرف L وشكلًا أخيرًا لبقية الأحرف، ومما يجب التنويه عليه، ضرورة مراعاة وجود اختلاف في التصميم عند النطق باللغة العربية بما يتماشى مع شكل الفم عند النطق بالحروف العربية، حيث يختلف ذلك التمثيل تبعًا للرؤية الفنية لكل مصمم ورغبته في إضفاء المزيد من الواقعية على حركة الشخصية.

إليك هذه المعلومة الممتعة، تُنشئ صورة كاميرا الويب ثلاثة أشكال مختلفة للفم بدلًا من إنشائها بواسطة الميكروفون وهي الأشكال المحايدة التي تحاكي فيها الشخصية صمتك أو وضع الراحة الظاهر على وجهك، وكذا شكل الابتسامة، إلى جانب شكل ملامح المفاجأة من خلال فتح فمك ذهولًا. وهنا تذكر وضع كافة أشكال الفم المختلفة في مجموعة واحدة تحمل اسم Mouth، مما يساعدك على معرفة تمثيل هذه الأشكال في البرنامج، حيث تُظهر الصورة التالية في الإليستريتور مثالًا على أشكال الفم المختلفة للشخصية وطريقة التسمية المناسبة:

وتُظهر الصورة التالية نفس الأمر بالنسبة للفوتوشوب:

تستطيع تحميل ملف الإليستريتور الذي يضم تصميم الشخصية Vicky الذي يتضمن ملف الإليستريتور أو ملف الفوتوشوب.

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

وبينما يميل المصممون عادةً إلى بناء الشخصيات الكرتونية باستخدام أحد برنامجي الفوتوشوب أو الإليستريتور، وقد يُفاجئك أن الفرق بينهما في مجال تصميم الشخصيات ليس جوهريًّا، إذ يتفق البرنامجان على الأدوات الأساسية المستخدمة في بناء الشخصيات طالما أن الملف النهائي للعمل سيكون بإحدى الصيغتين PSD. أو AI.، وهما الصيغتان اللتان يتعرف عليهما برنامج كاركتر أنيميتور ويتعامل مع طبقاتهما ويسمح بإجراء التعديلات عليها، فاحرص على تطوير مهاراتك في كلا البرنامجين واستخدم البرنامج الذي يناسب المخرجات المطلوبة وتذكّر أن نظرتك الفنية هي الأهم.

ترجمة -وبتصرّف- للمقالين Character Animator Tutorials Part 2: Basic Puppet in Illustrator وCharacter Animator Tutorials Part 3: Basic Puppet in Photoshop لصاحبتهما Slavena Simeonova.

اقرأ أيضًا

• مقدمة عن برنامج أدوبي كاراكتر أنيميتور Adobe Character Animator
• التمثيل والأدوات في برنامج كاركتر أنيميتور
• السلوكيات في برامج كاركتر أنيميتور

نبدأ معًا الدرس الأول من سلسلة تعلُّم أساسيات العمل على برنامج كاركتر أنيميتور Adobe Character Animator المتخصّص ببناء شخصيات الرسوم المتحركة وتحريكها، وسنشرح لمحةً عامةً عن البرنامج وكيفية البدء بإنشاء مشروعك الأول، واستخداماته ومستلزمات العمل عليه:

ما هو برنامج كاراكتر أنيميتور Adobe Character Animator؟

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

ما مستلزمات البدء بالعمل على البرنامج

حساب على السحابة الإبداعية لأدوبي

أول ما تحتاجه لبدء العمل على البرنامج هو إنشاء حساب على "لسحابة الإبداعية" وهي خدمة تمنحك الوصول إلى تطبيقات أدوبي المختلفة وفقًا لخطتك على السحابة، ويتيح لك البرنامج تجربةً مجانية للعمل عليه بتفعيل وضع المؤدي Performer mode، وهو ما يمنحك الفرصة لإضافة الحركة لشخصية ما وتصديرها مع وجود بعض الحدود للتجربة الكاملة طبعًا، مثل عدم القدرة على إجراء التعديلات على شخصيتك الفنية، ومن خلال وضع المؤدي تستطيع استخدام الشخصيات الجاهزة على الانترنت بدلًا من إنشاء شخصية جديدة كليًا.

يُعَد كاراكتر أنيميتور برنامجًا مستقلًا بحيث تستطيع استخدامه منفردًا، ولكنه جزءًا لا يتجزأ من برامج أدوبي آفتر افكت After Effect أي وجود برنامج آفتر افكت يعني بالضرورة وجود برنامج كاراكتور انيميتور، وتستطيع الوصول له من قائمة ملف في الواجهة الأساسية للبرنامج.

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

على الرغم من إمكانية استخدام كاركتر أنيميتور بوصفه برنامجًا مستقلًّا، إلا أنه جزء لا يتجزأ من برنامج أدوبي أفتر إفكت After Effect، أي أن وجود برنامج أفتر إفكت على جهازك يعني ضمنًا وجود برنامج كاركتر أنيميتور، حيث تستطيع الوصول إليه من قائمة ملف في الواجهة الأساسية لبرنامج أفتر إفكت.

الشخصية الكرتونية

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

يبدأ العمل باستيراد الشخصية الكرتونية إلى واجهة كاركتر أنيميتور، مثل ملف فوتوشوب أو إليستريتور، ثم إجراء التعديلات عليها ولا بد من حفظ التغييرات الجديدة التي تُحفظ في الملف الأصلي على كاركتر أنيميتور، وتستطيع طبعًا تغيير كل الخصائص الشكلية لشخصيتك مثل اللون والحجم وأجزاء الجسم المختلفة، وستظهر كل التغييرات مباشرةً في واجهة البرنامج.

كاميرا الويب وميكروفون

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

واجهة البرنامج وتعلم الأساسيات

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

إذا نقرت على الملف الأول لفتحه فستظهر شخصيتك في الواجهة التصميمية تحضيرًا لإضافة الحركة إلى الشخصية، حيث تستطيع التحكم بالسلوكيات والإيماءات والملامح، أما إذا فتحت الملف الثاني فستظهر شخصيتك في الواجهة البيضاء مجدّدًا، وإلى يمينها الواجهة التي يظهر فيها وجهك أمام الكاميرا وهي الواجهة التي تبدأ فيها شخصيتك بالحركة والتفاعل تبعًا لملامحك وحركاتك. وللتأكد من تفعيل الكاميرا والميكروفون، يجب ظهور الأيقونتين باللون الأزرق، فإذا لم يكونا مفعّلتين اضغط على قائمة "الكاميرا والميكروفون في يمين واجهة الشخصية، واختر "wireless virtual camera" لتفعيل بث الفيديو اللاسلكي، وهنا ستجد شريطًا يومض باللون الأخضر كلما تحركت أمام الكاميرا؛ أما لتفعيل الميكروفون فاختر من قائمة Edit في شريط القوائم خيار Wireless virtual microphone.

لتحكّم أكبر بالشخصية، احرص على قربك بما يكفي من الكاميرا وأرِح ملامح وجهك؛ ولاختبار حركة الشخصية تبعًا لحركتك ولإيقاف الحركة لإجراء التعديلات، جرّب زر "الإيقاف والتشغيل"، والموجود أسفل النافذة التي تظهر فيها صورتك إلى جانب أيقونتي الكاميرا ومكبر الصوت. عند ضبط الإعدادات السابقة ابدأ بتحريك رأسك أو اطرف بعينيك أو ابتسم للكاميرا، وستلاحظ أن شخصيتك تحاكي كل ما تفعله.

لنحاول إجراء بعض التعديلات على الشخصية الجاهزة التي اخترتها، فعند ضغط زر "اسم المشروع" الموجود على يسار الشاشة، ستلاحظ ظهور عملك الفني في واجهة برنامج الفوتوشوب أو الإليستريتور تبعًا لبرنامج التصميم المُستخدم مسبقًا، وستجد طبقات المشروع معروضةً على يمين الشاشة بنفس الترتيب، لهذا انتبه إلى ترتيب الطبقات أثناء العمل وسمِّ كل طبقة باسم يعبّر عن محتواها لتسهيل التعديل، وجمّع الطبقات في مجلدات تحمل أسماءً تعبّر عنها، فمثلًا سمِّ المجلد الأساسي الذي يحتوي على ملامح وجه الشخصية باسم head أو رأس، وهكذا لبقية المجلدات، بعدها عدّل ما تشاء ثم عُد إلى واجهة "المشهد" وستجد الشخصية الجديدة بالتعديلات التي أضفتها. عند العودة إلى واجهة المشروع انتبه إلى أن الطبقات تعمل مستقلةً عن بعضها البعض، فمثلًا إذا وضعت تصميم الحاجب الأيمن للشخصية في طبقة والحاجب الأيسر في طبقة ثانية، فلن يتأثر أحدهما بحركة الآخر، والسبب هو وجود رمز (+) الذي يظهر على شكل تاج يسار اسم الطبقة، لذلك جرّب إضافة رمز (+) أو حذفه تبعًا لما ترغب برؤيته أثناء حركة الشخصية.

إذا أردت التحكم بكل مكون من مكونات وجه الشخصية على حِدَة، فحدّد المكون وانقر على قائمة Tags يمين الشاشة وستشاهد المكون مرسومًا ومظلّلًا باللون الأزرق. وتُسمى الأوامر التي تتحكم بحركة الشخصية السلوكيات أو التصرفات، وهي تُحدَّد تلقائيًّا عندما تبدأ شخصيتك بتقليد حركاتك التي تظهر على الكاميرا، وتستطيع التحكم بحدّة هذه السلوكيات من خلال التعديل على النسبة المئوية المحددة جانب كل سلوك، إذ تظهر قائمة السلوكيات على يمين الشاشة في قائمة الخصائص.

لنبدأ الآن بإنشاء شخصية جديدة كلّيًّا دون استخدام أي نماذج جاهزةً انطلاقًا من شكل وجهك وحركتك أمام الكاميرا فقط، أولًا سنختار من قائمة ملف الموجودة في شريط القوائم في واجهة البرنامج الأساسية خيارًا جديدًا يسمح بفتح كاميرا الويب لترصد شكل وجهك، بعدها انقر على خيار Open characterizer الذي يفتح مصمم الخصائص، وستفتح نافذة تحوي رمز + وتحته زر إنشاء لقطة جديدة، طبعًا لا يُحبّذ استخدام هذا الخيار مباشرةً من قبل المبتدئين، إذ تؤثر إضاءة المكان والضجيج على جودة لقطة البدء، لذلك اختر من قائمة الخيارات الإضافية خيارًا بعنوان لقطة يدوية أو Manual ،capture وستفتح واجهةً جديدةً تظهر فيها صورة وجهك أمام الكاميرا ضمن إطار بيضوي يلائم شكل الوجه أكثر كلما كان موقعك مناسبًا أمام الكاميرا، ثم اضغط على زر بدء الالتقاط أو Start capture، وسينصحك البرنامج في هذه المرحلة باستخدام ملامح وجه طبيعية أمام الكاميرا.

يطلب منك البرنامج مجموعةً من التعابير الوجهية المتنوعة مثل الابتسام وإظهار ملامح الدهشة ونطق بعض الحروف وغيرها، لهذا نفّذ التعابير المطلوبة واضغط بعد كل تعبير وجه على زر Capture ليحفظ البرنامج تعابيرك المختلفة، بعدها انتظر قليلًا وستجد واجهةً تحوي شخصيةً تحمل وجهك بتعابيره وملامحه المختلفة، حيث تستطيع تغيير السِمة العامة للوجه من خلال التبديل بين مجموعة سمات جاهزة يقدمها البرنامج، وهنا اختر ما تشاء، ثم فعّل خيار تحريك الرأس Head turns لتتأكد من إمكانية تحريك الرأس بالاتجاهات المختلفة بالتزامن مع تحريك ملامح الوجه، ثم انقر على زر توليد الشخصية في الزاوية العلوية اليمنى من الشاشة وانتظر اكتمال التصميم، تهانينا! ها هي شخصيتك جاهزة.

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

ترجمة -وبتصرّف- للمقال Character Animator Tutorials Part 1: Introduction لصاحبته Slavena Simeonova.

اقرأ أيضًا

• أساسيات بناء الشخصية الكرتونية في برامج التصميم الشهيرة
• التمثيل والأدوات في برنامج كاركتر أنيميتور
• السلوكيات في برامج كاركتر أنيميتور

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

أهم القواعد والمبادئ

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

البساطة

دائمًا ما يتكرر هذا المبدأ في جميع أنواع اختصاصات تصميم الرسوميات وهو أساسًا من أهم المبادئ العامة لتصميم الرسوميات. يمكنك تطبيق هذا المبدأ عبر اختصار النصوص إلى كلمات أو عبارات قصيرة وسهلة الفهم، ويجب أن تكون الألوان المستخدمة في التصميم متناسقة لجذب انتباه المشاهدين. محاولة إظهار الكثير من التفاصيل في الرسوم البيانية تجعل الناس يشعرون بالملل والتعب من قراءتها.

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

العنوان أولًا

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

رسم بياني يبرز العنوان بشكل واضح أعلى التصميم من الهيئة العامة للإحصاء في السعودية.

المحاذاة

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

رسم بياني يوضح بروتوكولات الحج من تصميم سلمى العُمر.

التباين

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

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

التوازن

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

لاحظ التوازن المتماثل بين طرفي التصميم في الرسم البياني الذي يشرح الهلع للمصمم محمد السعيدي.

الهرمية

يساعد تطبيق هذا المبدأ على توجيه سير المخطط البياني وتدفقه، حيث يعمل هذا المبدأ على تنظيم العناصر حسب الأهمية، وبهذا النمط يقع عنوان الرسم البياني دائمًا في الجزء العلوي من التصميم حتى يسهل رؤيته وقراءته وفهمه من النظرة الأولى، ثم تتبعه عناوين فرعية وفقرات وأيقونات ورسومات أخف من ناحية الوزن البصري بالتسلسل بحسب الأهمية.

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

التناغم اللوني

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

الرسم البياني يطبق التناغم اللوني الأحادي من موقع الأمم المتحدة.

مطابقة الخطوط

من المعروف في قواعد التصميم الالتزام بعدم استخدام أكثر من ثلاثة خطوط مختلفة في أي تصميم. يميل المصممون المبتدؤون إلى الإفراط في استخدام الخطوط، بسبب وجود الكثير من الخطوط للاختيار من بينها ويريدون دائمًا البحث عن شيء جديد ومثير للاهتمام. ولكننا بحاجة إلى التأكد من إقرانه بشيء مألوف وقابل للتطبيق، وعادة ما يكون هناك خط مهيمن وخط مساعد.

استخدم في هذا الرسم البياني نوعان متناغمان من الخطوط من موقع الأناضول.

الوحدة

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

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

أشهر الأدوات والتطبيقات لتصميم الرسومات البيانية

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

برامج التصميم الاحترافية

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

Adobe Spark

وفرت أدوبي كعادتها حلولًا لتصميم الرسومات البيانية عبر تطبيق الويب والهاتف المحمول وهو تطبيق أدوبي سبارك Adobe Spark، ويتضمن التطبيق قوالب عديدة لتصميم قصص ومنشورات ثابتة ومتحركة لمختلف وسائل التواصل الاجتماعي، وكذلك لمواقع الإنترنت والتطبيقات. يحوي العديد من العناصر والأدوات إضافة إلى القوالب القابلة للتعديل.

Snappa

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

Piktochart

يعد تطبيق Piktochart بسيطًا وسهلًا أكثر من سواه من التطبيقات لتصميم الرسوم البيانية، حيث يحتوي على قوالب سهلة التخصيص، بمجرد إضافة بياناتك ستتمكن من تعديل التخطيط ونظام الألوان وغيرها.

Visme

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

خاتمة

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

بعد أن تعرّفنا على ماهية التصميم وعناصره ومبادئه، وألقينا نظرة على برامجه وتطبيقاته الأكثر شهرة، يمكننا البدء بالعمل على تصاميم مختلفة بناء على تعلمناه في المقالات السابقة في هذه السلسلة، يبقى لدينا فقط أن نعلم ما هي القواعد الأهم والمتبعة في التصميم وذلك تبعًا للمشروع الذي سنعمل عليه، دون أن ننسى استخدام العناصر بالطريقة الأمثل والالتزام بالمبادئ وإتقان استخدام برامج التصميم.

وتتضمن هذه المقالة أهم القواعد الواجب اتباعها لتصميم كل من الأيقونات (الرموز) والشعارات نظرًا للتشابه الكبير من حيث المبدأ في قواعد تصميم هذين العنصرين، وسنبدأ أولًا بتعلم قواعد تصميم الأيقونات.

قواعد تصميم الأيقونات

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

كما نستخدم الأيقونات المصممة داخل صفحات الويب للدلالة على الخدمات أو الفئات أو الميزات أو أي شيء آخر. ومثالًا على تلك النوعية من الأيقونات تلك المستخدمة على فئات الدروس والمقالات في أكاديمية حسوب.

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

تحديد الهدف

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

قابلية تبديل الحجم

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

لاحظ أن الأيقونات الأصغر حجمًا هي ليست نفس الأيقونة الكبيرة، بل هي تصميم جديد مشابه ولكنه واضح ضمن الحجم الصغير.

اتباع الهوية البصرية

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

لاحظ الأيقونات أسفل صفحة الويب الخاصة بشركة تويوتا للسيارات تتبع نهج الهوية البصرية للشركة.

البساطة والوضوح

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

بينما تبدو الأيقونات في المثال التالي واضحة وتدل بوضوح على معنى الميزة المشار إليها.

اتباع الارشادات

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

تناسق الوزن البصري

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

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

نوعية ملفات الأيقونات

توجد عدة أنواع لملفات الأيقونات ولعل أشهرها هي GIF وPNG وSVG. وتُعَدّ GIF أقدم تنسيق استُخدم لتصميم الأيقونات في الماضي كما تستخدم ICO لملفات أيقونات برامج أنظمة الويندوز، واستُخدم GIF نظرًا لصغر حجمه وإمكانية إدراج الشفافية فيه عكس JPG و BMP الشائعة في ذلك الوقت، إلا أن من سلبياتها عدم إمكانية استخدام حزمة ألوان واسعة حيث تعتمد نظامًا مؤلفًا من 256 لونًا فقط، ومع مرور الوقت تطورت الأدوات والتطبيقات وأصبح بالإمكان استخدام تنسيق PNG لصناعة الأيقونات والذي يتميز بمجال طيف واسع من الألوان بالإضافة إلى إمكانية تضمين الشفافية فيه، ولكن PNG هو تنسيق للرسومات النقطية وعند محاولة تكبير التصميم من أجل بعض الواجهات و التطبيقات فسوف تظهر التشوهات والعيوب.

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

الأيقونات والشعارات

مثل أي نوع من أنواع التصاميم فإن تصميم الأيقونات جزء من فن تصميم الرسوميات (التصميم الجرافيكي) ولهذا يجب استخدام العناصر وتطبيق المبادئ الخاصة بتصميم الرسوميات لإنجاز تصاميم احترافية خالية من الأخطاء ومثيرة للاهتمام. ويتشابه تصميم الشعارات من حيث المبدأ مع تصميم الأيقونات حيث أن كليهما يجب أن يحدد الهدف والغرض من هذا العنصر (الأيقونة أو الشعار) والجمهور المستهدف ويجب أن يصمم بأحجام مختلفة بحسب موضع الاستخدام ويجب أن يكون متناسقًا ومتكاملًا مع بقية عناصر الهوية البصرية، ويجب أن يُصمم الشعار كأول عنصر من عناصر الهوية البصرية ومن ثم يتم استخراج لوحات الألوان وباقي عناصر الهوية البصرية بناءً على نموذج الشعار، كما أن تنسيق ملفات تصميم الشعار عادة ما تكون أيضًا SVG أو PNG بحسب موقع استخدامه.

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

قواعد تصميم الشعار

ما هو الشعار؟ هو واجهة أي علامة تجارية وهو الانطباع الأول الذي يتكون لدى الجمهور بمجرد رؤيته، لذا فإن تصميمه مهم للغاية. وبما أن تصميم الشعارات والأيقونات تعتمد قواعد ومبادئ مشتركة، إذ يجب تحديد الهدف والغرض من الشعار كما يجب مراعاة قابلية التكبير والتصغير بحسب موضع الاستخدام ويفضّل الالتزام بمبدأ البساطة والوضوح في تصميمه لضمان وصول فكرته ورسالته للجمهور، وعلى عكس الأيقونات فإن الشعار هو العنصر الأول في تصميم الهوية البصرية، وتتبع الهوية البصرية تصميم الشعار في تحديد شكل وأسلوب التصميم العام، كما يفضل استخدام تنسيق SVG لملفات الشعار مع تصديرها إلى PNG بالمقاس المناسب عند الحاجة.

تجنب التقليد

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

اكتب في بحث الصور على جوجل (شعار برجر) وستحصل على العديد من شعارات البرجر، لذا حاول تجنب إنشاء تصميم مطابق أو مشابه لأي منها، وليكن تصميمك فريدًا من نوعه.

ابدأ برسم المخطط يدويًا

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

الصورة بوساطة rawpixel.com من موقع Freepik.

الأبيض والأسود

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

في الشكل التوضيحي التالي ستشاهد شعارات بالأبيض والأسود ومن ثم ستشاهد الشعارات الملونة الأصلية في الشكل التالي، لاحظ كيف من الصعب التعرف على الشعار من النظرة الأولى في الشكل الأول.

لاحظ صعوبة تحديد هوية هذه الشعارات.

لاحظ كيف يمكن التعرف على الشعارات بسهولة من خلال الألوان وهي شعارات MasterCard، PayPal، Tommy Hilfiger، Flickr، Microsoft وTarget.

الألوان

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

شعار متصفح الانترنت فاير فوكس (الثعلب الناري) بتدرجات لون النار.

مراعاة نماذج الألوان

من المهم أن تعلم إذا ما كان الشعار سيستخدم للشاشات فقط أم للطباعة فقط أم لكلاهما، حيث يجب أن تصمم الشعار بنموذج ألوان RGB الخاص بالشاشات وبنموذج ألوان CMYK في حالة الطباعة، وفي هذه الحالة ستلاحظ تغيرًا على الألوان بين الشعارين وهذا طبيعي نظرًا لاختلاف نظام مزج الألوان بين النموذجين. في المثال التالي قسّمت شعار إنستجرام إلى نصفين بشكل قطري (مائل) وطبّقت على كل شطر نموذجًا لونيًا مختلفًا، الاختلاف بسيط للغاية ولكنك ستلاحظه إن دققت النظر.

الشعارات النصية

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

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

شعارات قناتي الجزيرة والعربية.

مجموعة من الشعارات النصية العربية مصممة من قبل عبدالرحمن ممدوح على موقع Behance.

مجموعة من الشعارات النصية العربية لمختلف المصممين العرب.

مجموعة من أشهر الشعارات النصية العالمية.

تنظيم عملية التصميم

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

• تلقي الطلب من العميل.
• فهم كافة جوانب الشعار المطلوب تصميمه ابتداءً بالهدف ودراسة الجمهور المستهدف والمنطقة المستهدفة والألوان المطلوبة وهوية العميل البصرية والخطوط وغير ذلك. ليس من الضروري أن تتوافر كل هذه المعلومات من قبل العميل ولكن حاول الحصول على أكبر قدر منها لتختصر الكثير من الوقت في تعديلات كثيرة لا داعي لها عبر فهم رؤية العميل وتطلعاته.
• البحث عن كل ما يتعلق بالشعار من أفكار وأمثلة وشعارات مشابهة.
• اجلس مع نفسك وفكّر في كيفية تصميم الشعار وفي كيفية تجنب تصميم شعار مشابه لما هو موجود مسبقًا.
• أمسك بالورقة والقلم وابدأ برسم النماذج الأولية وطورها على الورقة إلى أن تصل لفكرة مبهرة.
• انقل فكرتك من الورقة إلى برنامج التصميم على الحاسوب واحرص على رسم الشعار بالرسومات الشعاعية Vector لسهولة تعديلها والتلاعب بحجمها.
• أرسل تصميمك إلى العميل.
• أجرِ جميع التعديلات المطلوبة التي سيقترحها العميل.
• أنهِ التصميم وسلّمه للعميل.

بهذه الطريقة يمكنك أن تصمم شعارًا دون إرباك أو قلق على ما يجب أن تفعله تاليًا.

خاتمة

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

لا يختلف تصميم الأيقونة كثيرًا عن تصميم الشعار إلا أن الاستخدامات تختلف، ويظل الشعار هو الأساس في تصميم الرسوميات حيث تتبعه تصاميم بقية العناصر وهذا ما سنكتشفه في مقال قواعد تصميم الهوية البصرية الذي سينشر لاحقًا.

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

من المهم أن نفهم أن تصاميمنا على الحاسوب ستكون بوحدات قياس مختلفة عن وحدات القياس على أرض الواقع، إلا أن برامج التصميم تحدد النسبة بين الوحدات وهو ما يعرف بالدقة أو دقة التفاصيل، والتي نحددها أيضًا عند فتح مستند تصميم جديد على أحد برامج التصميم مثل النسبة (بكسل / بوصة) وهي تعني عدد وحدات البكسل في البوصة الواحد، وتزداد الدقة بازدياد قيمة هذه النسبة وتزداد معها المساحة التخزينية لملف التصميم كما يزداد معها استهلاك موارد الحاسوب أو أي جهاز نستخدمه للتصميم. فهذه الصورة على سبيل المثال صممت بنوعين من الدقة، الأولى كانت بدقة 300 بكسل/البوصة والثانية بدقة 72 بكسل/البوصة لهذا بلغت المساحة التخزينية للأولى 1.85 ميغا بايت بينما بلغت للثانية 285 كيلو بايت.

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

أنواع ووحدات القياس

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

المتر m

النظام المتري وتعد وحدة المتر m الوحدة الرئيسية لهذا النظام ومن مضاعفاته الكيلومتر km وتعادل 1000 متر، ونحن لا نستخدم الكيلومتر في التصميم لأنه لا يوجد أي آلة يمكنها طباعة ورقة أو لوحة قماشية بهذا الحجم، لذلك فإن اعتمادنا سيكون على عوامل أو قواسم المتر وهي السنتيمتر cm ويعادل المتر الواحد 100 سنتيمتر، والميليمتر ويعادل المتر واحد 1000 ميليمتر.

البوصة (الإنش) in

نظام القياس بالبوصة أو الإنش وهو نظام قياس أطوال إنجليزي ما يزال معتمدًا في الولايات المتحدة الأمريكية وبريطانيا، وهو أحد وحدات القياس الإمبراطورية والتي تضم إلى جانبها وحدات القدم والميل وغيرها، وتعادل البوصة الواحدة 2.54 سنتيمتر أي 25.4 ميليمتر.

وهذه خريطة توضح أماكن استخدام نظام القياس المتري و الإمبراطوري في العالم.

النقطة Point

هي وحدة قياس حجم أشكال الحروف وتباعد الأسطر وهي وحدة صغيرة جدًا حيث أن البوصة الواحدة تعادل 72 نقطة.

البيكا Pica

هي وحدة قياس مطبعية تم تطويرها في عام 1785. تتألف البيكا من 12 نقطة Point، وتعد البيكا Pica وحدة قياس رئيسية للطباعة اليوم، لكن العديد من المصممين ما زالوا يفضلون استخدام الوحدات المنتشرة على نطاق واسع مثل البوصات والمليمترات. وتستخدم في التصميم لقياس جوانب تخطيط الصفحة وعرض النص والمسافات وما إلى ذلك. عادةً ما يتم تمثيل بيكا بالنقاط على هذا النحو كمثال: 1p2، أي 1 بيكا و2 نقطة وهو يعني وحدة قياس بيكا واحدة مضافًا إليها نقطتين. وبالتالي تساوي في هذه الحالة 14 نقطة، كيف ذلك؟ دعني أشرحها أكثر.

طريقة عرض وحدة البيكا في الإليستريتور

بما أن البيكا تعادل 12 نقطة فإن 1p2 تعني 1 بيكا + 2 نقطة وباستبدال البيكا بـ 12 نقطة يصبح القياس هو 12 نقطة + 2 نقطة والمحصلة هي 14 نقطة، وهذه أمثلة أخرى لفهم المعادلة:

• 0p5 بيكا تعادل 5 نقطة
• 1p6 بيكا تعادل 18 نقطة
• 2p0 بيكا تعادل 24 نقطة
• 3p3 بيكا تعادل 39 نقطة

وفيما يلي جدول يبين لك وحدات القياس المختلفة ومعادلتها مع بقية الوحدات.

جدول يتضمن وحدات القياس المختلفة والمعادلة بينها.

البكسل Pixel

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

مثال على صورة نقطية بحجم 16×16 بكسل حيث تظهر وحدة البكسل الواحدة في التكبير.

ضبط قياسات التصميم والدقة

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

ppi

يعتمد هذا النوع على نسبة البكسل إلى وحدات القياس الأخرى كالبوصة ويرمز لها ppi أي Pixel per Inch بكسل في البوصة، هي الأكثر استخدامًا ولكن قد نستعمل بكسل مقابل السنتيمتر في حالات أخرى. نستخدم عادة دقة 72ppi للتصاميم العاملة على الشاشات مثل تصاميم الويب ودقة 300ppi للتصاميم الطباعية، فما الفرق بين دقة 72 المنخفضة ودقة 300 العالية في التصميم؟

يظهر هنا الفرق في عدد البكسل ضمن البوصة وهو الفرق بين الدقة العالية والمنخفضة.

وفي الصورة التالية مثال واضح على الفرق بين الدقتين في صورة واحدة.

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

dpi

هذا النوع من الدقة يستخدم لقياس دقة الطباعة للطابعات بأنواعها وتعني مقدار النقاط ضمن البوصة الواحدة Dot per Inch وكلما كانت الدقة أكبر وأعلى حصلنا على صور أو رسومات مطبوعة أفضل وكلما كانت أقل ظهرت التشوهات في الطباعة وبتفاصيل أقل. وتختلف القيمة العظمى لهذه الدقة من طابعة لأخرى، وهو ما يؤثر على سعر الطابعة بحيث يرتفع سعرها كلما كانت دقة طباعتها أعلى.

وعادة تعمل أغلب الطابعات الليزرية على الطباعة بدقة 600dpi، بينما تبلغ دقة أجهزة فصل الألوان 1200dpi أو أعلى في الطابعات الاحترافية والمراكز الطباعية، وتعتمد الطابعات نفّاثة الحبر على نفث رشّات صغيرة جدًا من الحبر على شكل رذاذ، أي أنها ليست نقاطًا حقيقية، فلا تتجاوز دقة طباعتها 300dpi إلى 720dpi.

المصدر

قياسات التصاميم

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

قياسات المطبوعات

يتضمن الجدول التالي أكثر المطبوعات شيوعًا والتي تصمم لمختلف الأغراض التجارية والإعلانية:

قياسات الشاشات

يتضمن الجدول التالي أهم القياسات المستخدمة لشاشات الحواسيب والهواتف المحمولة والأجهزة اللوحية وشاشات التلفاز.

النسب القياسية (3:4 - 16:9- 4:6) ونحوها

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

ما سبب أهمية النسبة القياسية؟

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

الفروقات بين النسب المختلفة – الصورة بواسطة WikimediaImages من موقع Pixabay

سنستعرض تاليًا أمثلة عن صور مختلفة بالنسب القياسية الأشهر.

1:1

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

صورة الملف التعريفي للفيس بوك مربعة الشكل بنسبة قياسية 1:1

3:4

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

مشهد من فيلم بياض الثلج والأقزام السبعة معروض بنسبة 3:4

9:16

تستخدم هذه النسبة في شريحة واسعة من الهواتف المحمولة وفي غالبية شاشات التلفاز الحديثة المسطحة.

مشهد من فيلم The searchers بنسبة 16:9

2.35:1

وتستخدم بشكل رئيسي في صالات السينما حيث تصوّر الأفلام الحديثة وفقًا لهذه النسبة والتي تعرض إطارًا عريضًا لمشاهد الفيلم لمشاهدة تفاصيل أكثر.

صورة من فيلم ضمن لعبة Fallout 3 بنسبة 2.35:1

خاتمة

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

هو أحد أهم عناصر التصميم، حتى وإن شاهدت تصميمًا بالأبيض والأسود فهو يحتوي بذلك على لونين وهما الأبيض والأسود. إذًا لا يوجد تصميم بدون ألوان حتى وإن كانت بلون واحد. فاللون أساس أي تصميم. لهذا يجب الاهتمام بهذا العنصر وفهم كل ما يتعلق به ليكون أحد أهم أسباب نجاح أي تصميم.

ما هو اللون؟

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

اقتباس

الأشكال والألوان وترتيبها هي العناصر الأساسية للتصميم، ومن بين هذه العناصر، يمكن القول إن اللون هو أقوى سلاح في ترسانة المصمم.

Linda Holtzschue من كتاب Understanding color – An introduction for designers.

أهمية اللون

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

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

على المصممين جميعًا فهم ماهية اللون ونظرياته ودراسة تأثيراته على المجتمعات المستهدفة من خلال فهم ثقافاتهم وطبيعة الرسالة والهدف من التصميم.

الصورة بواسطة Tom Radetzki من موقع Unsplash

المصطلحات المحددة لسمات الألوان

عندما تسير في سوق الألبسة سيلفت انتباهك الألوان المختلفة للألبسة، فهذا أزرق فاتح وذاك أخضر داكن ولكن الذي بجانبه داكن أكثر قليلًا وهناك ما هو أفتح درجة لونية منه، هناك العديد من الدرجات للألوان، لاستخراج تلك الدرجات المختلفة من كل لون هناك علامات ومصطلحات رئيسية محددة للحصول على التدرجات المختلفة من الألوان، وهي الصبغة Hue والسطوع Tint والتظليل Shade والدرجة اللونية Tone والتشبع Saturation والصفاء Chroma والقيمة Value.

اقتباس

من خلال الدراسات والأبحاث المتعلقة باللون، ظهرت مصطلحات خاصة تنطبق على مجالات مختلفة في تطبيقات اللون. المصطلحات الثلاثة الأكثر شيوعًا المرتبطة باللون هي الصبغة Hue والقيمة Value والصفاء Chroma، وتسمى أيضًا تنسيقات اللون أو مكوناته. Billmeyer & Saltzman من كتاب Principles of Colour Technology.

الصبغة Hue

أي نموذج من نماذج الألوان يتضمن ألوانًا رئيسية نقية نستخرج منها باقي الألوان بكافة درجاتها عبر تنسيقات معينة، فعلى سبيل المثال يتألف نموذج ألوان RGB من ثلاثة ألوان رئيسية هي الأحمر والأخضر والأزرق، وتختلف هذه الألوان الرئيسية كما يختلف عددها من نموذج ألوان لآخر، وتختلف نتائج دمج هذه الألوان بحسب النظام المتبع. ولهذه الألوان مستويات كالألوان الأساسية والثانوية. ومن المهم أن نعلم بأن الصبغة Hue لا تحوي اللونين الأبيض والأسود.

ويعرّف اللون النقي بأنه اللون الذي لا يحوي أي درجة من اللون الأسود أو الأبيض، أي لا يحوي أي درجة من الدرجات الداكنة أو الساطعة.

السطوع Tint

يعرّف السطوع (Tint) بأنه درجة اللون النقي من الصبغة Hue مضافًا إليه مقدار معين من اللون الأبيض، وهو ما يجعل درجات ذلك اللون فاتحة وساطعة. يعمل السطوع على تفتيح اللون، لكنها لا تجعله أكثر إشراقًا، حتى وإن بدى أكثر إشراقًا ولكنه ليس كذلك، فهو في الواقع نفس اللون ولكنه باهت أكثر. ولا يحتوي السطوع على اللون الرمادي ولا الأسود.

التظليل Shade

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

الدرجة اللونية Tone

تعرف الدرجة اللونية Tone على أنها درجة اللون النقي من الصبغة Hue مضافًا إليه مقدار معين من اللون الرمادي فقط. وعملية دمج الألوان باللون الرمادي سيقلل من حدة اللون.

القيمة Value

وهي مقدار الفرق بين السطوع Tint والتظليل Shade للون.

التشبع Saturation والصفاء Chroma

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

معاني الألوان واستخداماتها في التصميم (نظرية الألوان)

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

الألوان الدافئة

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

الأحمر

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

تصميم Nissan GT-R Sale- Landing page Concept للمصمم DMTR STFNSHN بترخيص المشاع CC BY-NC-ND 3.0

البرتقالي

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

تصميم KTM duke 200 specification page للمصمم Goprotoz Design بترخيص المشاع CC BY-NC-ND 3.0

الأصفر

لون الشمس وهو لون السعادة ويرتبط ارتباطًا وثيقًا بأشعة الشمس والأمل. يمكن أيضًا ربطه بالحذر والجُبن.

تصميم Geo Protocol — Visual Identity and Web Design للمصممين LEAGUE \ Design Agency و Julia Zamiatina و leksandr Gusakov بترخيص المشاع CC BY-NC-ND 3.0

الألوان الباردة

الأخضر والأزرق والأرجواني ودرجاتها المختلفة. بشكل عام، هي أكثر تحفظًا واسترخاء واحترافية وهدوءًا من الألوان الدافئة.

الأزرق

لون البحر والسماء، يدل على الثقة والاستقرار وهو مهدئ ويمثل أيضًا الصدق والولاء. كما أنه ينطوي على الثقة والمهنية والسلام وحتى الروحانية.

تصميم ProDent للمصممة lizaveta Yaryhina بترخيص المشاع CC BY-NC-ND 3.0

الأخضر

لون النبات والحياة ويعني النمو والانسجام والطبيعة ويرتبط بالثراء والمال والاستقرار، خاصة في الظلال الداكنة.

تصميم redesign website للمصممة Amani Abu Zanouna بترخيص المشاع CC BY-NC-ND 3.0

أرجواني

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

تصميم OrderMe للمصمم Stas Ilin بترخيص المشاع CC BY-NC-ND 3.0

الألوان المحايدة

الألوان المحايدة مهمة جدًّا لتصميم الرسوم لأنها تعمل غالبًا كخلفية ومن المتوقع أن تنتج التأثيرات الصحيحة بالتنسيق مع ألوان مميزة أكثر إشراقًا. ومع ذلك، يمكن أن تحمل معانيها الخاصة ورسائلها المعقدة.

الأبيض

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

تصميم Glanz Project للمصممة Bilawal Shah بترخيص المشاع CC BY-NC-ND 3.0

الأسود

لون الظلام والليل والفحم، وهو لون أنيق وراقٍ، ولكن يمكن أيضًا أن يكون حزينًا وممثلًا للموت والحداد. ويستخدم للتعبير عن إحساس حاد أو غامض أو أنيق. الأسود هو أيضًا اللون الافتراضي للطباعة.

تصميم My personal web للمصممة Denitsa Damyanova بترخيص المشاع CC BY-NC-ND 3.0

الرمادي

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

تصميم Skymob - Logo & Website للمصممة Detlef Aioanei بترخيص المشاع CC BY-NC-ND 3.0

البني والبيج

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

تصميم Coffee Trading Landing Page للمصممة Tatiana Dudik بترخيص المشاع [CC BY-NC-ND 3.0}(http://creativecommons.org/licenses/by-nc-nd/3.0/)

الاختلافات الثقافية

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

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

يمكنك النظر لهذا التصميم من موقع جامعة ناني يانغ التكنولوجية في سنغافورة حيث يظهر لك اختلاف تأثير الألوان بحسب المناطق حول العالم.

الرسم البياني يوضح رؤية القائمين على الدراسة، وقد تختلف دراسات أخرى معها حول تأثيرات الألوان تبعًا للثقافة

الدائرة اللونية (عجلة الألوان)

تتضمن هذه الدائرة اللونية قياسيًا الألوان الرئيسية الثلاث والألوان الثانوية والثالثية. وتقوم جميع الشروحات والتصاميم على هذه الألوان تحديدًا، وهي الألوان الأساسية في دراسات نظرية الألوان. وقد صمم إسحاق نيوتن أول رسم تخطيطي دائري للألوان في عام 1666.

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

الألوان الثانوية هي الأخضر والبرتقالي والأرجواني والتي تتشكل عن طريق خلط الألوان الرئيسية.

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

القواعد الرقمية لتمثيل الألوان والفروقات فيما بينها (النماذج اللونية)

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

فيما يلي، سنلقي نظرة على نماذج الألوان RGB وHSV وCMYK وLAB، وهي جميعها سائدة في أدوات التصميم الرقمي والطباعي ولغات البرمجة الحالية.

RGB

نموذج الألوان RGB (الأحمر Red والأخضر Green والأزرق Blue) هو الأكثر شهرة والأكثر استخدامًا كل يوم. يحدد مساحة اللون من حيث ثلاثة مكونات وهي الأحمر والأخضر والأزرق وجميعها تتراوح من 0-255. ويستخدم هذا النموذج في عمل التصاميم الخاصة بالشاشات مثل تصاميم الويب وتطبيقات الهواتف المحمولة وتطبيقات سطح المكتب.

نموذج ألوان RGB هو نموذج مضاف، أي أنه يتم دمج قيم الأحمر والأخضر والأزرق (المعروفة باسم الألوان الرئيسية الثلاثة) لإعادة إنتاج ألوان أخرى.

على سبيل المثال، يمكن تمثيل اللون "الأحمر" بـ [R = 255 ، G = 0 ، B = 0] ، "بنفسجي" بـ [R = 238 ، G = 130 ، B = 238].

وتمثيلها الرسومي المشترك هو الصورة التالية:

HSB

يحدد نموذج الألوان HSB بالسمات التالية (الصبغة Hue، التشبع Saturation، السطوع Brightness).

الصبغة: نوع اللون (مثل الأحمر أو الأزرق أو الأصفر). وتتراوح من 0 إلى 360 درجة في معظم التطبيقات.

التشبع: شدة اللون. وتتراوح من 0٪ إلى 100٪ (0 يعني عدم وجود لون و100 يعني لون كثيف مشبع). وتسمى أحيانًا "الصفاء" كما ذكرنا سابقًا.

السطوع (أو القيمة): سطوع اللون. وتتراوح قيمته من 0٪ إلى 100٪ (0 دائمًا أسود اعتمادًا على التشبع وقد يكون 100 أبيض أو لون مشبع أكثر أو أقل).

ويُعرف نموذج HSB أيضًا باسم نموذج HSV (الصبغة والتشبع والقيمة). تم إنشاء نموذج HSV في عام 1978 بواسطة Alvy Ray Smith.

تمثيلها الرسومي المشترك هو الصورة التالية:

الصورة من Wikia

CMYK

النموذج اللوني CMYK، المعروف أيضًا باسم CMJN، يرمز إلى: أزرق سماوي Cyan، أرجواني Magenta، أصفر Yellow وأسود blacK وتتراوح قيم جميعها من 0٪ إلى 100٪ في معظم التطبيقات. إنه نموذج ألوان مطروح يستخدم في الطباعة الملونة. يعمل CMYK على خداع بصري يعتمد على امتصاص الضوء. المبدأ هو مزج ثلاث ألوان واحد للسماوي والآخر للأرجواني والآخر للأصفر والتي ستعيد إنتاج الألوان.

تمثيلها الرسومي المشترك هو الصورة التالية:

مثل نموذج ألوان RGB، يعد CMYK مزيجًا من الألوان الأساسية (السماوي والأرجواني والأصفر والأسود). ويعاني CMYK من نقص في ظلال الألوان التي تسبب ثغرات في طيف ألوان هذا النموذج. لهذا السبب غالبًا ما توجد اختلافات عندما يقوم شخص ما بتحويل الألوان بين CMYK إلى RGB.

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

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

LAB

نموذج الألوان LAB والذي يعمل بمبدأ مختلف عن باقي النماذج لأنه يحدد الألوان بناءً على محاور كما في التمثيل الرسومي التالي

لذلك يعد نموذج LAB اللوني أكثر دقة في تحديد الألوان من بقية النماذج اللونية، يستخدم ثلاث قيم (L و A و B) لتحديد الألوان. تحدد مساحات ألوان RGB و CMYK لونًا عن طريق إخبار الجهاز بكمية كل لون مطلوب. يعمل النموذج Lab بطريقة أشبه بالعين البشرية، حيث يحدد لونًا باستخدام نظام ثلاثي المحاور. المحور A (الأخضر إلى الأحمر) والمحور B (الأزرق إلى الأصفر) ومحور الإضاءة L.

وهذا يعني أنه من الأسهل الحصول على نفس اللون تمامًا عبر وسائط مختلفة، ولذلك يستخدم بشكل أساسي في صناعة البلاستيك والسيارات والمنسوجات.

مخططات ولوحات الألوان

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

مخططات الألوان

1. المخطط أحادي اللون Monochromatic color scheme: يستخدم درجات مختلفة من السطوع Tint والظلال Shade لنفس الصبغة اللونية Hue. وهو ما سيصبغ التصميم أو الواجهة بتدرجات لون واحد.

2. مخطط الألوان المتماثل Analogous color scheme: يستخدم الألوان الموجودة بجانب بعضها على عجلة الألوان. ينتج عن ذلك تصميم متجانس بعيد كل البعد عن التباين.

3. مخطط الألوان التكميلي Complementary color scheme: يستخدم الألوان المتقابلة على طرفي عجلة الألوان. وهو المخطط الخاص بتصاميم تعتمد أساسًا على التباين. وتتواجد الألوان الدافئة والباردة معًا في التصميم ذاته.

4. مخطط الألوان التكميلية المنقسمة Split Complementary: يستخدم لونًا من جهة في عجلة الألوان ومن الجهة المقابلة تمامًا لونين منقسمين بفارق بسيط بينهما. ويعد اللون الأول مهيمنًا واللونين الآخرين ثانويين.

5. مخطط الألوان الثلاثي التكميلي Triadic Complementary (Triad): يستخدم ألوانًا متباعدة بالتساوي على عجلة الألوان.

6. مخطط ألوان تتراديك (التكميلي المزدوج) Tetradic (Double Complementary): يستخدم مجموعتين متقابلتين من الألوان التكميلية.

لوحات الألوان

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

Colorlisa

موقع يتضمن مجموعة من لوحات الألوان الشهيرة مع ذكر أسمائها وأسماء مؤلفيها.

Color Hunt

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

Paletton

تطبيق ويب متميز لاختيار لوحة الألوان.

Coolors

من أشهر المواقع المتخصصة في لوحات الألوان ويضم خاصية البحث والقوائم الأكثر رواجًا والأحدث.

Adobe Color

أقوى أداة لإنشاء لوحات الألوان اعتمادًا على أحد المخططات الأساسية بشكل واضح ومباشر.

تجربة عملية لاختيار ألوان التصميم

سنقوم الآن بتجربة عملية لاختيار الألوان لتصميم واجهة المستخدم لتطبيق هاتف محمول مخصص للتسوق عبر الإنترنت. نبدأ أولًا برسم التخطيط المبدئي لشكل الواجهة كما في الشكل التالي:

ثم نضيف الشعار والعناصر النصية التجريبية للتطبيق.

ثم نذهب إلى موقع Coolors لنبحث عن لوحة الألوان المناسبة.

اخترت هذه اللوحة مع الأخذ بالحسبان أن التطبيق موجه للمنطقة العربية، لذلك درست نظرية التأثير النفسي للألوان على جمهور هذه المنطقة ووجدت اللون الأزرق وتدرجاته تشير إلى ألوان السماء والبحار وهي ألوان مريحة وتبعث الإحساس على الثقة والراحة للشراء، وتعمّدتُ وجود اللون الأحمر الفاتح لاستخدامه في زر الشراء حتى أحقق التباين ويكون زر الشراء عنصرًا بارزًا ويجذب الانتباه والاهتمام لناحية تنفيذ عملية الشراء وهو الهدف من تصميم هذه الواجهة. استخدمت لوحة الألوان هذه كما يلي:

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

المصدر المجاني لصور المنتجات

خاتمة

لماذا يجب أن تهتم بنظرية الألوان؟ ببساطة بسبب العلامات التجارية والتسويق والمبيعات. باستخدام هذه المعرفة الأساسية حول الألوان وأنظمة الألوان، أنت على استعداد لاتخاذ قرارات فعّالة بشأن العلامة التجارية، مثل اللون الذي يجب أن يكون عليه الشعار، أو المشاعر التي تثيرها الألوان لدى المستهلكين وعلم النفس وراء اختيارات الألوان على موقع الويب. ستساعدك معرفة نظرية الألوان في التسويق وفي فهم أفضل لأسلوب المنافسة في السوق، كما ستساعدك على جعل العلامة التجارية لعملائك مميزة وجذابة وتجنبك استخدام الألوان الرديئة التي ستؤدي إلى مبيعات سيئة.

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

مبادئ تصميم الرسوميات الرئيسية

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

1. التكرارية Repetition

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

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

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

النصوص والفقرات في صفحة هذه المجلة تتبع النسق والنمط ذاته في تطبيق واضح لمبدأ التكرارية - تصميم Red Fleece Editorial Newspaper للمصممة Stephanie Toole بترخيص المشاع CC BY-NC-ND 3.0

2. التباين Contrast

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

التباين في التصميم الأيمن جيد وعنصر النص يبدو واضحًا على عكس التصميم الأيسر.

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

لاحظ التباين البارز على زر (أوافق) بغية جذب الانتباه إليه عكس زر (لا أوافق)

تباين الألوان الكلاسيكي في تصميم هذا الكتيب جعله مثيرًا للاهتمام وباعثًا على التركيز والرغبة في المشاهدة - التصميم NRV Booklet Design للمصمم Shwin … بترخيص المشاع CC BY-NC-ND 3.0

3. الإيقاع Rhythm

من السهل فهم مبدأ الإيقاع باستخدام الموسيقى كمثال، فعندما تستخدم عناصر متكررة في التصميم، ينتج عن ذلك مسافات بين هذه العناصر، وهذا ما ينتج عنه إيقاع مرئي كما يحدث في التراكيب الموسيقية تمامًا، حيث يمكن للمسافات بين العناصر المكررة أن تسبب إحساسًا بالإيقاع، على غرار الطريقة التي تتسبب بها المسافة بين النغمات في تكوين إيقاع موسيقي. وهناك خمسة أنواع أساسية من الإيقاع البصري يمكن للمصممين إنشاؤها، وهي إيقاع عشوائي ومنتظم ومتناوب ومتدفق وتدريجي.

الإيقاعات العشوائية هي الإيقاعات التي ليس لها نمط يمكن تمييزه، والإيقاعات المنتظمة تتبع نفس التباعد بين العناصر دون تغيير، وتتبع الإيقاعات المتناوبة نمطًا محددًا يتكرر بالتناوب مع وجود تباين بين العناصر مثل النمط 1-2-3-1-2-3، وتتبع الإيقاعات المتدفقة المنحنيات على غرار طريقة تموج الكثبان الرملية أو تدفق الأمواج، وأخيرًا تتغير الإيقاعات التدريجية مع استمرارها، مع إضافة كل تغيير إلى التكرارات السابقة بالزيادة أو النقصان أو التكبير أو التصغير أو التغيير اللوني وغير ذلك.

مثال قوي عن الإيقاع العشوائي المتبع في تصميم الصفحة الرئيسية لموقع The Art Center

4. التوازن Balance

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

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

عناصر التصميم الأيمن متوازنة على جانبي التصميم على عكس التصميم الأيسر حيث أن العناصر في النص الأيمن منه أثقل بصريًّا من الأيسر.

5. البساطة Simplicity

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

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

اقتباس

"البساطة يمكن أن تكون أصعب من التعقيد. عليك أن تعمل بجد لتنقية تفكيرك لجعله بسيطًا، لكن الأمر يستحق ذلك في النهاية لأنه بمجرد وصولك إلى ذلك المستوى، يمكنك تحريك الجبال"

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

التصميم الأيمن بسيط ومريح للنظر والمتابعة على عكس التصميم الأيسر حيث اعتمد التعقيد ما سبب عدم الارتياح لمشاهدته.

6. التقارب Proximity

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

العناصر متقاربة ومنتظمة في التصميم الأيمن على عكس التصميم الأيسر الذي تباعدت فيه العناصر عن بعضها ما يؤثر سلبًا على جودة التصميم.

7. الهرمية Hierarchy

الهرمية مبدأ مهم من مبادئ تصميم الرسوميات والتي تعتمد على إنشاء تسلسل تنازلي للعناصر من حيث الأهمية، بحيث يكون العنصر الأهم أولًا فالذي يليه. ويتم تحديد مستوى هذه الأهمية من خلال زيادة الوزن البصري للعنصر ويتم ذلك عبر زيادة الحجم للعناصر والنصوص أو من خلال زيادة ثقل سمات النصوص فحسب، أي الخط الثخين يليه الخط الرفيع. ما يساعد على شد انتباه المشاهد إلى العنصر الأكثر أهمية ويوجه نظره إليه مباشرة، ومن ثم يتابع النظر تسلسليًا إلى العنصر الأقل أهمية فالذي يليه. وبهذا يُوجّه المشاهد نظره باتجاه محدد ويساعد على تنظيم المحتوى بشكل أنيق ومدروس.

لاحظ تطبيق هذا المبدأ بصورة صحيحة في التصميم الأيمن بحيث أن العنوان الرئيسي هو الأكبر حجمًا لأنه العنصر الأهم على عكس التصميم الأيسر.

يظهر مبدأ الهرمية في عناصر النصوص ضمن التصميم لصفحة الهبوط هذه - التصميم Landing pages للمصمم Saurabh Sharma بترخيص المشاع CC BY-NC-ND 3.0

8. الانسيابية Fluidity

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

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

9. المحاذاة Alignment

وهو توزيع وترتيب العناصر على محور واحد وهمي، ما يصنع اتصالًا مرئيًّا بين العناصر المختلفة. ويساعد تطبيق هذا المبدأ على تنظيم مظهر التصميم وإزالة التشوهات التصميمية المزعجة للنظر. ويمكن محاذاة العناصر بشكل أفقي أو عمودي أو حتى مائل، كما تنقسم المحاذاة على المحاور بحسب الاتجاهات مثل المحاذاة الأفقية العلوية أو الوسطى أو السفلية، وكذلك المحاذاة العمودية اليمنى أو الوسطى أو اليسرى وهكذا. ويمكن تصنيف المحاذاة على أنها امتداد لمبدأ التقارب، إذ يتبعان المفهوم ذاته تقريبًا.

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

لاحظ المحاذاة التامة لكافة عناصر تصميم هذه الصفحة من نصوص وصور من إحدى المجلات، ما منحها أناقة ورُقيًا وجاذبية - تصميم VERLAG | Magazine Template للمصمم Fahd Tohry بترخيص المشاع CC BY-NC-ND 3.0

10. النسبة Proportion

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

لاحظ الوزن البصري الثقيل للنص والذي يشير إلى أهميته بالنسبة للعناصر الأخرى

11. التنوع Variety

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

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

12. التركيز Emphasis

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

عنصر النص الأكثر أهمية في التصميم يجب أن يكون بارزًا من خلال زيادة وزنه البصري عبر اللون الداكن والحجم الأكبر والموضع البارز كما في التصميم الأيمن.

تعمّد المصمم في لوحة الإعلانات أن يضع صورة البرجر في حجم أكبر من باقي العناصر وفي موضع مميز وبلون خلفية مميز بغية التأكيد على هذا العنصر ما يجعل المشاهد ينظر إلى هذه الصورة أولًا ويفهم المقصود من التصميم وتصل الرسالة - الصورة التصميم Burger Billboard للمصمم arch shimul بترخيص المشاع CC BY-NC-ND 3.0

13. الحركة Movement

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

تتفاعل عين المشاهد للتصميم الأيمن عبر الحركة من الدائرة الكبيرة الداكنة باتجاه الصغيرة الفاتحة بطريقة منتظمة ومريحة، عكس حركة عين المشاهد للتصميم الأيسر.

تساعد الأرقام المتسلسلة والمائلة على توجيه نظر المشاهد باتجاه ترتيب العد وبذلك تحقق مبدأ الحركة - الصورة لموقع AbbyStolfo

14. الوحدة Unity

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

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

وحدة التصميم الأيمن زادت من جودة وجمالية التصميم بحيث انتمت جميع العناصر لبعضها على عكس التصميم الأيسر.

مثال على الوحدة في التصميم للعلامة التجارية لشركة الشحن العالمية DHL من مواقع أخبارية

خاتمة

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

عناصر التصميم هي الوحدات الأساسية للتصميم والمكونات الرئيسية التي يتم من خلالها إنشاء جميع التصاميم. فالتصميم الجميل والمبهر ليس ناتجًا عن فكرة ما أو خيال خصب لأحدهم، بل هو نتيجة العمل على عناصر التصميم وإيلائها اهتمامًا كبيرًا من حيث التوظيف لإنشاء تمثيل مرئي لتلك الفكرة أو لذلك الخيال. وحتى لو نظرت لتصميم ما في الشارع أو عبر الإنترنت وقلتَ في نفسك باستطاعتي القيام بتصميم مشابه، ثم جلستَ خلف شاشة الحاسوب وفتحتَ برامج التصميم للعمل على إنشاء التصميم، فإنك ستجد أن محاولاتك لا ترقى للمستوى الاحترافي للتصميم الذي شاهدته، والسبب أن المصمم المحترف وظَّف عناصر التصميم الأساسية جيدًا لإخراج نتيجة مذهلة.

إذًا عناصر التصميم هي ببساطة مكونات الفن الراقي، ومع توظيفها والاهتمام بها بشكل جيد ستكون قد قطعت شوطًا كبيرًا في طريقك نحو الاحتراف. ولكل عنصر من عناصر التصميم مجموعة من الصفات والخصائص الخاصة به، والتي قد تكون جيدة ولصالحك في اتجاهك التصميمي أو عكس رغبتك وضد إرادتك، وذلك بحسب التوجّه والفكرة العامة التي تعمل عليها. ويمكن استخدام بعض هذه العناصر أو جميعها لتحقيق المطلوب وإنتاج تصميم مميز.

النقطة

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

ثلاث نقاط في الفراغ

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

النقاط في التصميم

نلاحظ من هنا أن النقطة أساسية لتركيز الاهتمام عليها ومنها يبدأ التصميم ككل. وعملية قيام الدماغ بتوصيل الأجزاء تسمى نظرية الجشطالت (Gestalt psychology)، وهي شكل من أشكال علم النفس الذي يهتم بالعمليات الإدراكية ذات الترتيب الأعلى بالنسبة للسلوكية. ترتبط جوانب نظرية الجشطالت التي تهم المصممين بالإدراك البصري، وبشكل أساسي العلاقة بين الأجزاء والتجربة البصرية بأكملها.

الخط

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

أنواع الخطوط

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

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

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

خط الأفق الطولي الباعث على الراحة والهدوء الصورة بواسطة Emma Harper من موقع Unsplash

خطوط الأشجار العمودية تبعث على الشعور بالقوة والصلابة والنمو الصورة من موقع Pixabay

تثير الخطوط المنحنية الواسعة للنهر وللطريق الإحساس بالهدوء الصورة بواسطة Pok Rie من موقع Pexels

خطوط الجبال ذات الانحناءات الحادة تمنح الشعور بالحدة والقوة الصورة بواسطة Stephan Seeber من موقع Pexels

استخدمت الخطوط الأفقية والعمودية في هذا الموقع لفصل أجزائه وتوضيحها بأناقة وبساطة الصورة لموقع KeyBank

الشكل

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

الأشكال الهندسية

وكما أن للألوان تأثيرًا على المشاهد فإن للأشكال تأثيرها أيضًا حيث أن دراسة أجرتها مجلة أبحاث المستهلك والعلامات التجارية لشركة سجيل وجيل أكّدت أن الأشكال ذات الحواف الدائرية والمنحنية والأشكال العضوية ترتبط بالنعومة، العطف، العناية، المرح والود فيما ترتبط الأشكال الهندسية وذات الحواف القاسية بالصلابة، المتانة، القوة، ،التعاون، الاحترام والذكاء.

الأشكال العضوية

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

الملمس (الخامة)

الملمس (Texture) ويسمى أيضًا الخامة وأحيانًا أخرى يطلق عليه مصطلح النسيج، وهو صورة أو رسم لمادة معينة أو نسيج يطبّق على سطح شكل ما أو على خلفية التصميم بدل اللون الجامد، ويبعث تطبيق هذا الملمس شعورًا وهميًّا بملمس المادة. وللملمس نوعان أولهما ملمس مرئي مثل مشاهدتك للحاء شجرة أو للعشب أو لقطعة مسطحة فولاذية، والنوع الثاني حسّي وهو يتمثل بالشعور الوهمي لملمس المادة كنعومتها وخشونتها.

ملمس الخشب - صورة ملمس الخشب من موقع PxHere

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

النمط

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

نمط أوراق منقوش - الصورة بواسطة Gordon Johnson من موقع Pixabay

عندما تفكر في استخدام الأنماط في تصميم الويب أو التطبيق، سترغب في التفكير في مدى تعقيد النمط. على الرغم من أنه قد يبدو فكرة جيدة أن تقوم بتكرار صورة واحدة كخلفية، إلا أن ذلك قد يجعل قراءة نصٍّ مضافٍ فوق النمط أكثر صعوبة. يمكن أن يؤدي استخدام هذه الأنماط إلى تحسين تجربة المستخدم، فضلاً عن تصميم المنتج النهائي ومظهره، ولكن يجب استخدامها بحكمة لتجنب التصميم المعقد أو التصميم غير الجذاب.

القيمة

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

القيمة في التصميم

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

الحجم

الحجم يشير إلى المقياس النسبي لعنصر التصميم بالمقارنة مع عنصر آخر، فلا يوجد مقياس لشيء واحد حتى يتم رؤيته موازنة بشيء آخر. يمكن أن يؤثر الحجم على المعنى والنبرة والتكوين الكامل للتصميم، فالحجم مسؤول عن إنشاء تسلسل هرمي مرئي بين عناصر التصميم بحيث توجّه المشاهدين إلى العناصر التي يجب أن ينظروا إليها، وترتيب النظر إليها، والأهم الذي يجب التركيز عليه. تذكّر أن تفكر في السبب الذي يدفعك للتلاعب بالأحجام، لماذا تجعل هذا العنصر أكبر من الآخر؟ لماذا يظهر هذا الكائن في المقدمة وذاك الكائن في الخلفية؟ يجب أن ترتبط الإجابة دائمًا بالرسالة العامة لتصميمك.

الأحجام

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

الحجم في التصميم (ويبرز فيها الحيوان بالحجم الصغير ويحصل على النسبة الأعلى من التركيز بهدف الدلالة على البرنامج التالي ومحتواه)

صورة لقناة Nat Geo Channel بواسطة Juan Bautista Fittipaldi تحت ترخيص المشاع CC BY-ND 3.0

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

العمق

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

رسم شعاعي بسيط يستخدم عنصري الحجم والقيمة لإضفاء الشعور بالعمق وأن التصميم يستمر عميقًا نحو الداخل

الصورة بواسطة OpenClipart-Vectors من موقع Pixabay

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

المنظور

يُعرّف المنظور بأنه أسلوب تصوير الأحجام والعلاقات المكانية في تصميم ثنائي الأبعاد بغية إضافة البعد الثالث إليها وتحويلها إلى ثلاثية أبعاد. ويرتبط هذا العنصر ارتباطًا وثيقًا بعنصري الحجم والعمق، لأن التصميم الذي يحوي منظورًا معينًا يضم بالضرورة عناصر بأحجام متدرجة وإظهار العمق ضمن التصميم. ويعتبر المنظور هو الأداة التي نستخدمها للإشارة إلى العمق.

رسم تخطيطي يوضح المنظور

الصورة بواسطة Clker-Free-Vector-Images من موقع Pixabay

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

المساحة (الفراغ)، المسافة والإطار

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

تصميم تجريدي بسيط يوضح استغلال المساحات العامة في التصميم وخصوصًا المحيطة بالكائن في الوسط

تصميم Posters بواسطة Warsheh تحت ترخيص المشاع CC BY-NC-ND 3.0

اقتباس

يعد استخدام المساحات البيضاء عنصرًا أساسيًا ومهمًا في التصميم يمكن أن يوفر العديد من الفوائد، عند إنشاء علامة تجارية ما، يمكن للمساحة البيضاء أن تخلق شعورًا بالتطور والأناقة. المساحة البيضاء تبعث على الانسجام والراحة، وتحسّن قابلية القراءة، وتنشئ التوازن وهي السبب الرئيسي لإبراز العناصر الرئيسية على الصفحة. بشكل أساسي، وهي ببساطة بمثابة عنصر مراقبة الجودة للتصميم، وبالتالي فهي تعتمد على رسالتك ومن هو جمهورك المستهدف. فإذا كان منتجك منخفض القيمة عمليًّا، عندها ستحتاج إلى مساحة بيضاء أقل، وعلى العكس فإضافة المزيد من المساحة البيضاء يعطي المنتج مظهرًا ذا قيمة وجودة عالية. من كتاب Must Read Design tips from Designers to Designers

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

صورة تصميم إطار بالاستعانة بالإطار الطبيعي للصورة المتمثل بالأشجار

الصورة بواسطة Niklas Tinner من موقع Unsplash

النصوص والخطوط

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

أسلوب الطباعة في موقع 1MD | Creative Studio

أسلوب الطباعة في موقع Chris Wilhite Design

أسلوب الطباعة في موقع Tomas Bata University in Zlín

أسلوب الطباعة في موقع The Next Rembrandt

أسلوب الطباعة في موقع Vito Salvatore - Interactive Art Director

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

الصور والرسوميات

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

توظيف الصور في تصميم المواقع - الصورة من موقع Exposure

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

توظيف الرسوميات في تصميم المواقع - الصورة لموقع Skupos

خاتمة

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

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

ما هو تصميم الرسوميات (التصميم الجرافيكي)؟

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

صور لتصاميم مجلات - الصورة من موقع Foter.com

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

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

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

شعار شركة آبل - الصورة بواسطة Trac Vu من موقع Unsplash

لذلك يمكننا تعريف تصميم الرسوميات (التصميم الجرافيكي) على أنه:

اقتباس

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

ماذا يفعل مصمم الرسوميات

أساس التصميم - الصورة بواسطة Karol D من موقع Pexels

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

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

تاريخ تصميم الرسوميات

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

المحارف - الصورة بواسطة Lucio Alfonsi من موقع Pixabay

وكانت بدايات تطوّر التصميم عبر اختراع الخطوط المختلفة لاستخدامها في التصاميم الإعلانية أو حتى في الوسائط المطبوعة، وكان من أبرز روّاد هذا العصر ويليام أديسون دويجينز الذي صمّم محارف خطوط منذ عشرينات القرن الماضي، ولا تزال تستخدم بكثافة إلى يومنا هذا، ولعل من أشهر ما أنتج Caravan Metro، Electra، Caledonia، Eldorado و Falcon. ثم اخترع دوغلاس إنجلبارت الفأرة للحاسوب، مهّد اختراع جهاز التوجيه الدقيق هذا الطريق لما يمكن أن يكون أعظم ابتكار في أدوات التصميم لهذا الجيل. لتبرز بعدها أجهزة الحاسوب ومعها ظهرت برامج التصميم المتطورة أمثال الفوتوشوب والإليستريتور وسواها، وليتمكن مصممو هذا العصر من تقديم تصاميم عصرية مذهلة متطورة.

تصميم الرسوميات في العصر الحاضر وأهميته

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

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

التصميم المتجاوب - الصورة من موقع Foter.com

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

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

مجالات العمل لتصميم الرسوميات وتخصصاته

إن الحياة المهنية في تصميم الرسوميات مثيرة وتجمع بين الفن والتكنولوجيا والاتصالات. هناك حاجة إلى هؤلاء المهنيين في العديد من المشاريع وفي مجموعة متنوعة من المجالات، بما في ذلك التسويق والإعلان والنشر والاتصالات الرقمية.

مجالات العمل - الصورة بواسطة Caio من موقع Pexels

ينشئ مصممو الرسوميات تصاميم وتخطيطات لمجموعة متنوعة من المنتجات، بما في ذلك شعارات الشركة والمواقع الإلكترونية والملابس والكتب والألعاب وأدلة استخدام المنتج وغيرها. يجب أن يمتلك هؤلاء المحترفون معرفة قوية بنظرية الألوان وتحرير الصور وأنواع الخطوط والعديد من المبادئ الفنية الأخرى لتحديد أقوى جاذبية للسوق المستهدف للعلامة التجارية. يستخدمون مجموعة متنوعة من برامج التصميم المتخصصة لرسم تصميمات جديدة مبتكرة تجذب الجمهور المستهدف. ومن أهم هذه المجالات والتخصصات:

• تعديل الصور حيث توكل للمصمم مهمة ضبط وتصحيح الألوان ودمج الصور وغير ذلك للوصول إلى النتيجة النهائية، كما أن له دورًا مهمًا في تعديل وتجهيز صور المنتجات لتقديمها للسوق.
• مصمم ويب وهو الذي يعمل على إنشاء صفحات فردية وتصميم مخططات هذه الصفحات وتطوير رسومات الموقع إضافة إلى تصميم قوائم التنقّل والقوائم المنسدلة وهيكل الموقع.
• مدير فني وهو مسؤول عن توجيه رؤية فريق التصميم ككل والإشراف على جميع أعمال التصميم. وتتضمن هذه الوظيفة مهارات الإدارة والقيادة وقدرات إدارة الوقت والميزانية غالبًا بالإضافة إلى الرؤية الإبداعية.
• مصمم واجهة المستخدم (UI) هو المسؤول عن تصميم واجهات تطبيقات جذّابة ومحفزة بصرياً، ونموذج التصميم مناسب مع الغرض من التطبيق، ومتناسب مع شخصية التطبيق. وعليه التأكد من أن كل العناصر مترابطة، وجميلة وتؤدي الغرض.
• مصمم تجربة المستخدم (UX) وهو من يحدد هيكلية الواجهة ووظائفها، وكيف يتم ترتيبها ومدى ترابط كل جزء بالآخر، باختصار هو يصمم كيفية عمل الواجهة، والتأكد من أن الواجهة تعمل بشكل سلس وسهل.
• مصمم النشر وهو الذي يعمل على تطوير التخطيط والمظهر المرئي والرسومات لمجموعة من المنشورات المطبوعة.
• مصمم إعلانات وهو الذي يستخدم تصميم الرسوميات والتصوير الفوتوغرافي لإنشاء مواد تسويقية جذابة بصريًا لعلامة تجارية أو شركة.
• مصمم وسائط متعددة (ملتيميديا) وهو الذي ينشئ صورًا ومقاطع فيديو ورسومات متحركة باستخدام برامج الرسوم المتحركة ثنائية وثلاثية الأبعاد. ويمكن لمصممي الوسائط المتعددة العمل في مجموعة متنوعة من المجالات بما في ذلك الإنتاج التلفزيوني أو السينمائي وتصميم المواقع وتطوير ألعاب الفيديو.
• مصمم التغليف والعبوات والذي يعمل على تصميم العلبة والعبوة والملصق للمنتجات.
• مصمم الشعارات وهو الذي يصمم الشعارات والرموز بطريقة جذابة بصريًا لتمثيل شركة أو منتج أو علامة تجارية أو خدمة.
• مصمم الأزياء والملابس وهو الذي ينشئ صورًا ومخططات للملابس. ويطوّر فهمًا قويًا لعملاء العلامة التجارية ويضمن أن رسوماته متماسكة وجذابة بصريًا لذلك الجمهور.
• فنان تخطيط وهو الذي يقوم بتصميم هيكل وتخطيط الصور والنص بتنسيق ممتع للوسائط المطبوعة. يمكن أن يشمل ذلك عمل المجلات والكتيبات والنشرات والكتب والملصقات.
• مصمم الهوية البصرية للعلامة التجارية وهو الذي يصمم جميع عناصر مواد الشركة مثل بطاقات العمل، والقرطاسية، والمنشورات الإعلانية، والعروض الترويجية، وما إلى ذلك.

وهناك العديد من التخصصات الأخرى والتي تجعل عالم التصميم واسعًا وشاملًا لمختلف مناحي الحياة.

عناصر ومبادئ تصميم الرسوميات

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

عناصر ومبادئ التصميم - الصورة بواسطة Kristin Hardwick من موقع StockSnap

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

أدوات تصميم الرسوميات لغير المصممين

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

لكنها جيدة جدًا للتصاميم الجامدة والبسيطة، والتي قد تكون ذات فعالية جيدة، كتصاميم منشورات وسائل التواصل الاجتماعي أو أغلفة قنوات اليوتيوب أو حتى بعض التصاميم الطباعية البسيطة كالملصقات والمطويات وبطاقات المعايدة وبطاقات الأعمال.

بعض هذه التطبيقات مجاني بالكامل وبعضها الآخر يقدّم أدوات وقوالب بسيطة مجانية بينما سيتوجب عليك الدفع مقابل أدوات وقوالب أكثر احترافية وهناك بعض التطبيقات غير المجانية.

ولعل من أهم وأشهر هذه التطبيقات Stencil وCrello وPiktochart وSnappa وBeFunky. ويمكن تعديل الصور باستخدام برنامج شبيه بالفوتوشوب ولكنه أبسط وأسهل هو تطبيق PIXLR. أو يمكن استخدام تطبيق Vectr كبديل بسيط وسهل لبرنامج الإليستريتور بغية إنشاء تصاميم رسوميات شعاعية.

أدوات تصميم الرسوميات للمصممين

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

العتاد

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

كما سنحتاج إلى لوحة مفاتيح وفأرة مميزة بحيث تتوافر في الأسواق فأرة بدقة حركة تصل إلى 2400dpi أو حتى أكثر مما يساعد على تحريك المؤشر أثناء التصميم بدقة أعلى وثبات أكبر.

ويجب اختيار طاولة حاسوب خاصة وكرسي مريح، حيث سيضطر المصمم للجلوس ساعات طويلة يوميًا، ما قد يؤثر على صحته وبالتالي يخفف من إنتاجيته. ويجب اختيار شاشة كبيرة قدر الإمكان لكي تظهر جميع عناصر وأدوات التصميم بوضوح أكبر، وتوفير الراحة للعين أثناء النظر المستمر للشاشة.

جهاز Wacom اللوحي للرسم - الصورة بواسطة Steve Buissinne من موقع Pixabay

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

البرامج والتطبيقات

هناك العديد من البرامج الشهيرة المستخدمة في التصميم ومن أشهرها برنامج أدوبي فوتوشوب Adobe Photoshop المتخصص في معالجة الصور بشكل أساسي، ولكنه برنامج غير مجاني، وقد وفّر مجتمع البرامج مفتوحة المصدر بديلًا جيدًا ومجانيًا وهو برنامج جيمب Gimp الذي يؤدي نفس الوظائف. وعلى الرغم من أن الفوتوشوب يبقى أقوى برنامج من نوعه على الإطلاق إلا أن برنامج جيمب قدّم إمكانات رائعة وضخمة ترقى لمستوى الاحترافية.

ولإنشاء الرسوميات الشعاعية (Vector) فإن برنامج أدوبي إليستريتور Adobe Illustrator هو الأفضل بلا منازع، لكن برنامج إنكسكيب Inkscape المجاني غيّر نظرة المجتمع التصميمي تمامًا، إذ قدّم مستوىً يفوق التوقعات ويرتقي للاحترافية بقوة.

وتتميز الرسومات الشعاعية ( Vector) عن الرسومات النقطية (Raster) التي ينتجها الفوتوشوب أنها لا تتأثر أو تتشوه في حال تغيير الحجم سواء للتكبير أو التصغير ولهذا فهي تحافظ على دقتها العالية بثبات.

برامج التصميم - الصورة بواسطة Tranmautritam من موقع Pexels

ويتخصص برنامج أدوبي إن ديزاين Adobe InDesign في تصاميم النشر مثل تصميم الكتب والمجلات وأغلفة الكتب ومختلف التصاميم الطباعية، إضافة إلى الكتب الإلكترونية والكتيبات والكتالوجات.

للتصميم ثلاثي الأبعاد برامج كثيرة وشهيرة منها برنامج 3D Studio MAX وبرنامج Maya وCinema 4D وغيرها الكثير، إلا أن أسعارها تفوق الخيال، يتعذّر على الفرد اقتناء أحدها، ولكن برنامج بلندر Blender حلّ هذه المشكلة لكونه مجاني وقوي ويفي بالغرض تمامًا.

وبرز مؤخرًا تصميم الرسوميات البيانية المتحركة أو ما يعرف بالموشن جرافيك Motion Graphic والتي يشيع استخدامها لشرح خدمة أو تقديم منتج أو طرح قضية وحتى كمقدمة لفيديوهات قناة يوتيوب، وأقوى برنامج يقوم بذلك النوع من التصاميم هو أدوبي أفتر إفكتس Adobe After Effects ولا يقتصر عمله على هذا المجال إذ يمكن من خلاله تعديل الفيديو أيضًا.

وهناك برامج أخرى بحسب الاختصاصات المتنوعة مثل برامج خاصة بتحرير الفيديو وبرامج أخرى للتصميم الإنشائي وتصاميم الديكور وبرامج لإنشاء وتحرير الرسومات الكرتونية وبرامج تصميم واجهات المستخدم وغيرها.

ماهي شروط تصميم الرسوميات الجيد؟

أصبحت مهنة تصميم الرسوميات مهنة قائمة بحد ذاتها ولها تخصصات وجامعات وأكاديميات، وباتت مطلوبة بكثرة من قبل المؤسسات والشركات، كما أن لها نسبة كبيرة إن لم تكن الأكبر في وظائف العمل الحر حول العالم. ولتتمكن من الارتقاء بمهنتك هذه، يجب عليك مراعاة عدة أمور، منها أن تكون ملمًا بأحدث التقنيات المستخدمة في التصميم ومتابعًا لآخر البرمجيات والعتاد المتعلق بهذا الأمر، فالإصدارات الحديثة من إنكسكيب وجيمب تقدّم مزايا وأدوات لا تتوافر في القديمة منها.

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

يجب عليك الإلمام بسيكولوجية الألوان وفهم معانيها وتأثيرها لتتمكن من توظيفها بشكل صحيح في التصميم بحسب اتجاه وهدف التصميم. كما يجب اتباع كافة قواعد التصميم الأساسية واستخدام العناصر بالطريقة الأمثل مع مراعاة مبادئ التصميم المعروفة، فالتصميم الجيد يراعي كافة النواحي ويولّد أثرًا بالغًا في الجمهور المستهدف ويرسخ في أذهانهم من خلال إيصال الرسالة وتحقيق الهدف المنشود من التصميم.

ما الذي أحتاجه لأكون مصمم رسوميات؟

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

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

مصمم رسوميات - الصورة بواسطة Anthony Shkraba من موقع Pexels

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

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

ويمكنك اتباع خطوات عملية لتبدأ مسيرتك في عالم تصميم الرسوميات بشكل ناجح:

1. ابحث عن مصدر للمعلومات التدريبية الخاصة بتصميم الرسوميات ويفضّل أن تكون دراسة أكاديمية لفهم كافة نواحي التصميم وليس فقط معرفة استخدام برامج التصميم، لأن ذلك ليس كافيًا ولن يوصلك للاحترافية بسهولة، فإن استطعت إيجاد جامعة أو أكاديمية تتمكن من الدراسة بها فذلك أفضل، إذ ستتعلم أساسيات ومهارات التصميم بشكل صحيح، وستحصل على شهادة أكاديمية تساعدك على شق طريقك في عالم أعمال تصميم الرسوميات بسهولة لاحقًا.
2. في حال عدم إيجاد مصدر أكاديمي للدراسة فسوف تبدأ بالبحث بشكل فردي عن مصادر بديلة على الإنترنت أو في المكتبات لدراسة وفهم التصميم، وهذه السلسلة هي أفضل دليل يمكنك البدء به لفهم أساسيات ومبادئ تصميم الرسوميات، كما يتوفر في أكاديمية حسوب ومواقع عربية أخرى دروس ومقالات عديدة تغطي هذا المجال.
3. درّب نفسك ذاتيًا على استخدام أدوات وبرامج التصميم المختلفة، ويمكنك متابعة الدروس والمقالات وكذلك شروحات الفيديو لتتعلّم استخدام هذه الأدوات وإنجاز التصاميم.
4. بعد أن تبدأ في التعلّم وتتمكن من استخدام برامج التصميم مع فهم كامل لقواعد وأساسيات التصميم، ابدأ بالعمل على معرض أعمالك، وليكن منوّعًا ومتضمنًا لتصاميم مختلفة واحرص على جعل تصاميمك احترافية ولافتة للنظر وكلما كان معرض أعمالك أكبر وتصاميمك احترافية وبارزة أكثر، زادت فرص نجاحك كمصمم رسوميات. يمكنك أن تجمع معرض أعمالك على مواقع متخصصة مثل Behance أو Adobe أو يمكنك الاستعانة بصفحة معرض أعمالك على مواقع العمل الحر كموقع مستقل .
5. تعلّم كيفية إدارة الوقت، فبعد أن تصبح مصممًا قد تضطر للعمل على أكثر من مشروع في نفس الوقت، وحتى لا تفشل في تنفيذ كافة المشاريع قم بدراسة مشاريعك بدقة وارسم مخططًا زمنيًا للعمل عليها بغية الحفاظ على الإنتاجية العالية.
6. من المهم جدًّا أن تتعلم اللغة الإنجليزية ولو بدرجة متوسطة على الأقل حتى تتمكن من استخدام برامج التصميم المختلفة، لأن اغلبها لا تتضمن واجهات باللغة العربية وخصوصًا البرامج الاحترافية الأهم مثل الفوتوشوب والإليستريتور وغيرها. مع أن البعض قام بتوفير ملفات تعريب واجهات تلك البرامج إلا أن التعريب ناقص ولا يشمل كافة الأدوات والقوائم، وكذلك جميع الدروس والدورات التعليمية لهذه البرامج تتضمن الواجهات الإنجليزية حتى وإن كانت الدروس باللغة العربية وهذا سيسبب ارباكًا في تعلمك وعملك على هذه البرامج.

تصميم الرسوميات - الصورة من موقع PxHere

خاتمة

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

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

الخطوة الثانية في شريط الأدوات انقر على أداة الشكل الأساسي واختر شكل قطرة ماء من قائمة الأشكال المثالية ثم اسحب الشكل إلى مساحة العمل.
انقر على على أيقونة الانعكاس العمودي في شريط الخصائص.

اذهب إلى قائمة

Arrange>Convert to Curve

أو اضغط على الاختصار Ctrl+Q. ثم انقر على الاختصار F10 لتفعيل أدوات الأشكال ثم حدّد النقطة السفلية واختر أيقونة Made Node Symmetrical لجعل النقطة متناظرة.
حرّك النقطة للأسفل حتى يظهر الشكل كما في الصورة.

الخطوة الثالثة انقر على مفتاح F10 لتفعيل أدوات الأشكال. اختر النقطة العلوية وانقر على أيقونة Make Node A Cusp في شريط الخصائص.
اذهب إلى القائمة

Window>Color Palletes>Default CMYK Pallete

في لوحة الألوان اختر اللون الأرجواني لتعبئة الشكل بهذا اللون وانقر بالزر الأيمن على المربع الأبيض لإزالة الخطوط الخارجية.

الخطوة الرابعة اختر أداة المضلعات ضمن مجموعة أدوات Freehand لرسم ورقة الثمرة.

الخطوة الخامسة اذهب إلى أدوات الأشكال مرة أخرى واختر أيقونة Convert Line to Curve من شريط الخصائص. لون الشكل باللون الأخضر. أزل لون الخطوط الخارجية. وأنشئ الورقة كما في الصورة.

الخطوة السادسة اختر أداة المستطيلات بالنقر على مفتاح F6 وارسم ساق النبتة كما في الصورة. لوّنه باللون الأخضر. والخطوط الخارجية بلا لون. اختر أداة التحديد Pick وحدّد الورقة والساق ثم انقر على أيقونة Weld من شريط الخصائص لتوحيد العنصرين.

الخطوة السابعة سنقوم برسم البذار الآن. انقر على أدوات الأشكال الأساسية ثم اختر شكل قطرة الماء من القائمة واصنع نسخًا مختلفة من البذار.

وباستخدام أداة التحديد حدّد جميع العناصر. اجمعهم معًا في مجموعة واحدة عبر الاختصار Ctrl+G.

الخطوة الثامنة انقر نقرًا مزدوجًا على أيقونة أداة المستطيل لإنشاء خلفية بناءً على حدود الصفحة. لوّنها باللون C= 2, M= 41, Y= 13, K= 0 وأزِل الحدود الخارجية.
اختر أداة الشفافية التفاعلية Interactive Transparency ثم اختر الخيار Uniform من القائمة.

الخطوة التاسعة باستخدام أداة التحديد ضع الشكل النهائي لثمرة الفراولة في الموقع x= 0 px, y= 600 px.

الخطوة العاشرة اذهب إلى القائمة

Edit>Step and Repeat

أو من خلال الاختصار Ctrl+Shift+D. حدّد المسافة الأفقية عند 600 بكسل والعمودية عند 0. عدد النسخ 1. انقر على زر Apply.

حدّد ثمرتي الفراولة بأداة التحديد. وكرّر الخطوة الأخيرة.

ضع حجمًا مختلفًا ودوّرها أو قم بتغيير الألوان. واملأ المساحة الفارغة قدر الإمكان.

الخطوة الحاديةعشرة افتح لوحة إدارة العناصر من خلال القائمة

Window>Dockers>Object Manager

حدّد جميع ثمرات الفراولة باستخدام أداة التحديد ثم اضغط الاختصار Ctrl+G.

الخطوة الثانيةعشرة اذهب إلى القائمة

Effects>PowerClip >Place Inside Container

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

الخطوة الثالثةعشر افتح لوحة تحويل المواقع Transformation Position. وسيكون نقش الفراولة كما يلي.

ترجمة -وبتصرف- لمقال How to Make Strawberry Pattern in CorelDRAW لصاحبته Yessi Jie

هذا الدرس عبارة عن مدخل إلى SVG. سنتعلم فيه المعلومات الأولية التي تحتاجها لرسم أشكال SVG بسيطة باستخدام لغة XML الأساسية. فإن لم تستخدم SVG من قبل فهذا هو الدرس المناسب لك.
في الماضي كان تنسيق الصور الوحيد المعتمد من قبل جميع المتصفحات هو تنسيق GIF وهو ملف صورة مطوّر من قبل CompuServe. ثم ظهرت ملفات صور JPEG التي تسمح بضغط الصور دون ضياع للتفاصيل مع حجم صغير مقارنة بملفات GIF.
بعد فترة من الزمن ظهرت الحاجة إلى رسومات فكتور ثنائية الأبعاد على الإنترنت. وبعد دخول عدد من تنسيقات الصور إلى المنافسة في رابطة الويب W3C تم تطوير تنسيق SVG أخيرًا عام 1999.
سوف أريكم الآن كيفية إنشاء أشكال باستخدام SVG. هذا الدرس سيشرح كيفية استخدام SVG في صفحات الويب.

ما هو SVG؟

إن مصطلح SVG هو اختصار إلى Scalable Vector Graphics أي رسومات فكتور القابلة لتغيير الحجم وهو عبارة عن تنسيق صور قائم على لغة XML من أجل الويب. وعلى عكس تنسيقات GIF وPNG وJPEG فإن تنسيق SVG قابل لتعديل الحجم بسهولة دون أي ضياع للدقة ولتفاصيل الرسومات.
إن ملف XML الذي يحوي صور SVG يمكن إنشاؤه وتخصيصه وتكامله مع بقية لغات W3C القياسية الأخرى مثل DOM وXSL باستخدام أي محرر نصوص. كما يمكن إنشاء صور SVG بصريًّا باستخدام برامج الرسم والفكتور كبرنامج أدوبي إليستريتور Adobe Illustrator.

لماذا نستخدم SVG؟

• يمكن إنشاؤها وتعديلها باستخدام أي محرر نصوص.
• يمكن طباعتها بدقة عالية جدًّا.
• يمكن استخدامها من أجل الرسومات المتحركة.
• موصى بها من قبل W3C.
• تعمل مع بقية لغات W3C القياسية مثل DOM.
• مظهرها عظيم للعروض البصرية.
• يمكن تعديل حجمها إلى أي حجم نريد بدون أي تشوه قد يطرأ عليها.

SVG على صفحات HTML

يمكن تضمين SVG بسهولة داخل ملفات HTML باستخدام وسم SVG. كما في أسطر الأوامر التالية.
 

<svg width=" " height=" "> 
	[element code here..] 
</svg>

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

• Circle
• Rectangle
• Ellipse
• Line
• Polyline
• Polygon
• Path
• Text

فلنبدأ الآن بتعلم استخدام هذه العناصر في الرسم.

إنشاء الدائرة في SVG

دوائر الـ SVG يمكن تنفيذها باستخدام وسم circle. كهذا المثال.

<svg height="300" width="300">
  <circle cx="60" cy="60" r="50" style="fill: blue; stroke: black; stroke-width: 2px;" />
</svg>

النتيجة هي صورة الدائرة الظاهرة في الصورة التالية.

في هذا المثال استخدمت وسم circle ثم cx (إحداثيات x) وcy (إحداثيات y) والتي تحدد مركز الدائرة المرسومة. ثم وضعت القيمة 50 للمتغير r (نصف القطر) والذي سيحدد طول الخط الواصل بين مركز الدائرة ومحيطها. أخيرًا أضفت أنماط للون التعبئة والحدود وعرض الحدود.

إنشاء مستطيل في SVG

يمكن تنفيذ رسم المستطيل عبر وسم rectangle ويمكن تحديد قيم مختلفة من الارتفاع والعرض.

<svg height="300" width="300"> 
  <rect width="250" height="100" rx="11" ry="11" style="fill: yellow; stroke: green; stroke-width: 4px;"/>
</svg>

النتيجة النهائية هي صورة SVG عبارة عن مستطيل كما في الصورة التالية.

قمتُ بتحديد العرض والارتفاع باستخدام وسم rectangle. ثم أضفت rx وry التي تحدد استدارة حدود المستطيل. إذا قمت بإزالة القيمتين الأخيرتين فستحصل على حواف حادة. ثم نضيف أنماطًا عبر لون التعبئة والحدود وعرض الحدود.

إنشاء القطع الناقص (شكل بيضوي) في SVG

يتم تنفيذ هذا الشكل عبر وسم ellipse. القطع الناقص ليس له ارتفاع وعرض متساويين وعلى عكس الدائرة فإن نصف القطر cx وcy مختلفان. انظر الكود البرمجي التالي.

<svg height="300" width="300">
  <ellipse cx="190" cy="70" rx="100" ry="50" style="fill:red; stroke:green;stroke-width:2"/>
</svg>

صورة القطع الناقص (الشكل البيضوي) النهائية كما في الصورة التالية.

إن cx وcy يحددان مركز شكل القطع الناقص بينما rx وry يحددان قطري الشكل. وكما ترى فإن rx يحدد عرض الشكل بينما ry يحدد ارتفاع الشكل. ثم نضع الأنماط من ألون التعبئة والحدود وعرضها كما في كل مرة.

إنشاء خط في SVG

يمكن إنشاء خط SVG باستخدام وسم line. كما هو واضح من الاسم فإن هذا الوسم يرسم خطوطًا، كما في المثال التالي.

<svg height="300" width="300">
  <line x1="0" y1="0" x2="100" y2="150" style="stroke:#000; stroke-width:5" /> 
</svg>

النتيجة النهائية ستظهر كما في الصورة التالية.

في هذا المثال يمثّل x1 الاحداثي x فيما يمثّل y1 الاحداثي y وهو ما يحدد نقطة بداية الخط. فيما تحدد الاحداثيات x2 وy2 نقطة النهاية. وباستخدام ميزات الانماط وضعتُ لون الحدود أسود ولعرض 5بكسل.

إنشاء الخطوط المتعددة في SVG

يمكن تنفيذ هذه الخطوط عبر وسم polyline. حيث يستخدم لرسم الأشكال المكونة من خطوط مستقيمة كهذا المثال.

<svg height="300" width="300"> 
  <polyline points="60,50 150,120 100,220 200,170" style="fill:none;stroke:black;stroke-width:3" />
</svg>

والنتيجة كما هي واضحة في الصورة.

وباستخدام الاحداثيات x وy يمكنك تعيين كل نقطةمن النقاط الفردية لإنشاء أي شكل تريده. وكما ترى هنا لدي أربع نقاط تم وصلها ببعضها لتشكيل الخطوط. وأضفت حدودًا سوداء وبعرض 3 بكسل.

إنشاء شكل مضلع في SVG

يمكن تنفيذه عبر وسم polygon. هذا العنصر سيرسم شكلًا مكونًا من أكثر من ثلاثة جوانب. شاهد الترميز التالي.

<svg height="300" width="300">
  <polygon points=" 60,20 100,40 100,80 60,100 20,80 20,40" style="fill:cyan;stroke:red;stroke-width:1" />
</svg>

النتيجة النهائية كما في الصورة.

في هذا الشكل نقاط يتم تحديدها عبر الاحداثيات x وy لكل جانب من جوانب الشكل من النقطة الأولى إلى النقطة الأخيرة. في المثال، أنشأتُ شكلًا مسدّسًا بست جوانب. كما ترى هناك 6 نقاط متصلة ببعضها محددة بالاحداثيات x وy. ثم حددت لون التعبئة باللون السماوي مع لون حدود أحمر وبعرض 1 بكسل.

إنشاء مسارات في SVG

يمكن تنفيذه عبر وسم path. هذا العنصر سيرسم مسارًا مخصّصًا وأشكالًا تتكون من منحنيات، خطوط وأقواس. من بين جميع عناصر SVG هذا هو العنصر الأصعب للتعلم. مسارات SVG تستخدم الأوامر التالية.

• M للحركة
• L للخط
• V للخط العمودي
• H للخط الأفقي
• C للمنحني
• S للمنحني الناعم
• T لمنحنيات البيزير التربيعية
• A للأقواس البيضوية
• Z لإغلاق المسار

وتحدد الأحرف الكبيرة الموقع بدقة بينما تحدد الأحرف الصغيرة الموقع بشكل تقريبي. كما في المثال التالي.

<svg height="300" width="300">
  <path d="M 30 40 C 140 -30 180 90 20 160 L 120 160" style="fill: none; stroke: black; stroke-width: 6px;" />
</svg> 

النتيجة ستكون كالصورة التالية

من خلال الترميز في الأعلى سترى بأنني استخدمت حرف d. ميزة حرف d هذا ستكون دائمًا أمر التحريك. ثم استخدمت حرف M الذي يعني التحرك نحو اتجاه معين. وقبل رسم أي شيء عليك أن تحرك المؤشر الافتراضي إلى الموقع المفضّل.
في هذا المثال حرّكتُ المحور x إلى 30 والمحور y إلى 40. المنحني يبدأ عند 140,-30 كنقطة للبداية. تاليًا نزلت نقاط المنحني للأسفل واليمين عند النقطة 180,90 وتنتهي عند 20,160 ولإنهاء المسار أنشأت خطًّا عند النقطة 120,160.

إنشاء النص في SVG

يمكن تنفيذ هذا الأمر من خلال الوسم المغلق text. هذا العنصر يستخدم لرسم النص في صورة

SVG. <svg height="300" width="300">
  <text x="20" y="30" fill="blue" font-size="20">This a great sample for Text SVG! </text> 
</svg>

النتيجة ستكون كالتالي.

في المثال استخدمت موقع المحور x للنص عند 20. هذا سيضع النص على بعد 20 بكسل من اليسار بينما وضعت المحور y عند 30 ما يجعل النص على بعد 30 بكسل عن الحافة العلوية. ثم لوّنت النص باللون الأزرق وجعلت حجمه عند 20 بكسل. هذا سيظهر العبارة التالية "This a great sample for Text SVG!".

ترجمة -وبتصرف- للمقال How to Create Simple Shapes with SVG لصاحبه Editorial Team