أساسيات تصميم الرسوميات قواعد التعامل مع الصور والرسوميات

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

قواعد استخدام الصور

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

التحضير

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

هذه الصورة من موقع piqsels وهي مجانية ولكنها بحجم كبير جدًا 3989x5983px لذلك لا يمكننا استخدامها بحجمها الحالي للتصميم.

صُغّرت حجم الصورة وعولجت ألوانها لتتناسب مع غرض التصميم

الاقتران

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

هذه الصورة الأولى للرجل الذي يشعر بالضيق - الصورة بوساطة Alex Green من موقع Pexels

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

التعليق

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

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

مراعاة لوحة الألوان والهوية البصرية

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

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

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

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

وأحضرنا مجموعة أيقونات جاهزة كما في الشكل التالي.

مجموعة الأيقونات الرسومية هذه من موقع Freepik.

ثم أدخلنا الأيقونات المطلوبة ضمن الموقع دون تعديل، ستبدو كما يلي.

نلاحظ أن ألوان الأيقونات لا تتناسب مع نمط ألوان الموقع لذلك سنعمل على تعديل ألوان الموقع كما يلي.

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

التركيز على الجمهور

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

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

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

الصورة بواسطة Italo Melo من موقع Pexels

التأكد من حقوق الملكية

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

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

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

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

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

مصادر الصور والرسوميات ذات حقوق ملكية

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

1. Shutterstock: يحتوي على صور فوتوغرافية ورسوميات نقطية وشعاعية.
2. Adobe Stock: يحوي صور وفيديوهات ورسوميات وصوتيات ونماذج ثلاثية الأبعاد.
3. Getty Images: يحوي صور فوتوغرافية وفيديوهات فقط.
4. DepositPhotos: يحوي صور وفيديوهات ورسومات شعاعية ورسوميات فنية.
5. Creative Market: ويحوي كل شيء تقريبًا من الصور والخلفيات والخامات والملمس والرسوميات الشعاعية والفنية والأنماط والأيقونات والشعارات والقوالب لكل أنواع التصاميم والنماذج ثلاثية الأبعاد والخطوط وغيرها.
6. StockUnlimited: يضم الصور الفوتوغرافية والرسوميات الشعاعية والأيقونات.
7. istockphoto: يحوي صور فوتوغرافية ورسوميات شعاعية وفنية وفيديوهات.
8. fotolia: يحوي صور فوتوغرافية ورسوميات شعاعية وفنية وفيديوهات أيضًا.
9. iclipart: يحوي قصاصات فنية (كليب آرت) وصورًا وفيديوهات ورسوميات شعاعية وفنية ورسومات متحركة وغيرها.
10. Bigstock: يحوي صور وفيديوهات فقط.
11. dreamstime: يحوي صور وفيديوهات عالية الدقة.
12. 123rf: يحوي صور وفيديوهات ورسوميات شعاعية وصوتيات.

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

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

هذا رسم توضيحي يبين أنواع تراخيص المشاع الإبداعي وسمات كل منها.

وإليك أهم مصادر الصور المجانية بمختلف التراخيص:

1. Freepik: يتضمن مجموعة كبيرة من الصور ولكنه مختص أكثر بالرسوميات الشعاعية والفنية النقطية، وهو من أشهر المصادر التي يعتمد عليها المصممون. ومع أن غالبية محتوياته مجانية للتحميل إلا أن ذلك بشرط إسنادها إلى الموقع.
2. Unsplash: يحوي صورًا مذهلة من المصورين المحترفين والمبتدئين.
3. Pixabay: أكبر مجموعة من الصور والرسوميات الشعاعية والفنية المجانية عبر الإنترنت.
4. Gratisography: مجموعة من الصور للمصور الموهوب ومصمم الرسوميات Ryan McGuire.
5. Pexels : صور مجانية ضمن النطاق العام من جميع أنحاء العالم.
6. Pikwizard: مصدر ممتاز إذا كنت بحاجة إلى صور ذات مظهر طبيعي للأشخاص.
7. Negative Space: موقع صور مجانية من المصورين الصاعدين.
8. StockSnap.io: يضيف الموقع مئات الصور يوميًا ويتم إصدار جميع الصور ضمن النطاق العام للمشاع الإبداعي CC0.
9. Burst: هو مصدر من شوبيفي Shopify يوفر صورًا مجانية لصالح رجال الأعمال. بعض الصور مرخصة بموجب الترخيص Creative Commons CC0 بينما تندرج الأخرى تحت رخصة الصورة الخاصة بشوبيفي.
10. Reshot: هي مكتبة ضخمة من الصور المجانية المنتقاة بعناية والتي لن تجدها في أي مكان آخر.
11. unDraw: أنشأت كاترينا ليمبيتسوني مكتبة من الرسوم البيانية المذهلة والقابلة للتخصيص والمرخصة من معهد ماساتشوستس للتكنولوجيا، إنها مجانية وليس هناك حاجة للإسناد أيضًا.
12. flaticon: يضم أكثر من 4 ملايين أيقونة على شكل رسوميات شعاعية ونقطية.
13. Vector4Free: تضاف كل يوم الرسوميات الشعاعية المجانية بواسطة فنانين من جميع أنحاء العالم وتتراوح من الرسوم الكرتونية الهزلية إلى الرموز والرسوم البيانية الخاصة بالأعمال والتكنولوجيا. ترخيصهم يفرض الإسناد إليهم.
14. Vecteezy: يحتوي Vecteezy على أكثر من 100000 من الرسوميات الشعاعية المجانية، ويدّعي أنه أكبر مجتمع للرسوميات الشعاعية في العالم، بعض رسوماته مجانية بشرط الإسناد والأخرى ليست مجانية.
15. Free Vector: يحوي مجموعات من الشعارات والرسوميات الشعاعية والأيقونات والفئات لتسهيل البحث. هناك أكثر من 16000 صورة متوفرة. بعض رسوماته مجانية بشرط الإسناد والأخرى ليست مجانية.

خاتمة

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