البحث في الموقع

سنتعلّم في هذا الدرس كيفية تصميم انفوجرافيك بسيط يوضح أكثر دول العالم استخدامًا للفيسبوك عام 2016، وسيتم وضع الخمس دول الأكثر استخدامًا للفيسبوك. افتح برنامج أدوبي إليستريتور واختر الأبعاد الافتراضية 960 في 560 لملف جديد من قائمة File>New وليكن نظام الألوان RGB وبدقة 72ppi بما أن تصميمنا سيكون للعرض على الشاشة كما هي حال غالبية تصاميم الانفوجرافيك. ستكون الفكرة العامة للتصميم هي وجود خريطة العالم وتحديد الدول المطلوبة بألوان مميزة مع ربطها بمستطيلات تحوي المعلومات التفصيلية لهذه الدول. لذلك سيكون علينا الحصول على خريطة العالم، هناك طريقتان للقيام بفكرة هذا التصميم، الأولى هي الحصول على خريطة العالم كعنصر فكتور واحد، والحصول على خرائط الدول المستهدفة وإسقاطها فوق خريطة العالم. والثانية استخدام خريطة العالم المفصلة والمجزأة سلفًا لعناصر عديدة تمثّل دول العالم. في هذا الدرس سنستخدم الطريقة الثانية. ابحث عبر الإنترنت عن هذه الخريطة، أنا وجدت خريطة فكتور مجانية بعنوان World map blue template من موقع FreePik وهي عبارة عن خريطة العالم بتصميم فكتور باللون الأزرق مجزّأة بحسب دول العالم الحالية. قم بفتح الملف وتحديد الخريطة فقط ونسخها ثم ألصقها في الملف الجديد الذي أنشأناه للتو. سيعتمد تصميمنا على أن تكون الخلفية سوداء، لذلك ارسم مستطيلًا أسود بحجم المستند كامًلا باستخدام أداة رسم المستطيلات Rectangle Tool. حدّد هذا المستطيل ثم أرسله للخلف من خلال النقر بالزر الأيمن للفأرة عليه واختيار القائمة Arrange > Send to Back أو من خلال الاختصار ]+Shift+Ctrl ستظهر الخريطة مجدّدًا في الواجهة ولكن حدود الدول داخل الخريطة بحسب التصميم الأساسي الذي حمّلناه باللون الأبيض وهو غير متناسق مع الخلفية السوداء. حدّد الخريطة ثم استبدل لون الحدود الأبيض باللون الأسود. ستلاحظ أن الخريطة مجموعة ككل في مجموعة واحدة عند التحديد ولكي نتمكّن من تمييز الدول المطلوبة سيكون علينا إلغاء التجميع عبر تحديد الخريطة ثم النقر بالزر الأيمن ثم اختيار Ungroup من القائمة. الدول الموجودة في رأس القائمة هي الهند, الولايات المتحدة, البرازيل، اندونيسيا والصين. لذلك سنبدأ بتمييز تلك الدول الخمسة والبداية ستكون مع الولايات المتحدة، حدّد خريطة الولايات المتحدة ثم استبدل اللون الأزرق الأساسي بلون أحمر R:255 B:0 G:0 مع ترك الحدود باللون الأسود. تابع تلوين بقية الدول الخمسة بألوان مختلفة. اخترت اللون الأبيض للبرازيل والأصفر للصين والأخضر لأندونيسيا والبنفسجي للهند. ولرسم خطوط توصيل لمستطيلات المعلومات بدقة وتناسق ومحاذاة مثالية قم بتفعيل خطوط الشبكة Grid ثم فعّل المطابقة إلى الشبكة Snap to Grid من خلال القائمة View كما في الصورة. قياس مربعات الشبكة كبيرة جدًّا كما في الصورة السابقة لذلك سنقوم بتجهيز إعداداتها عبر القائمة Edit > Preferences > Guides & grid اضبط Gridline every على 5mm وsubdivisions على 3. استخدم أداة القلم Pen Tool لرسم خط بحجم 1px باللون الأحمر ذاته المستخدم في تلوين خريطة الولايات المتحدة وسيكون الخط خارجًا من الولايات المتحدة ثم يتجّه يسارًا إلى قرب الطرف الأيسر للتصميم ثم يتّجه للأعلى. ارسم مستطيلًا أحمر باللون ذاته وبالاستعانة بالمطابقة مع خطوط الشبكة بحجم 45mm في 6.667mm مستخدمًا أداة المستطيلات Rectangle Tool. حدّد هذا المستطيل ثم اضغط باستمرار على مفتاح Alt أثناء سحب نسخة عنه باتّجاه الأسفل مستعينًا بالمطابقة إلى خطوط الشبكة ثم اضغط على الاختصار Ctrl+D ثلاث مرّات لتكرار عملية النسخ والتحريك ذاتها ثلاث مرّات وبذلك تحصل على أربع نسخ عن المستطيل الأساسي. لوّن المستطيلات الجديدة بلون أحمر فاتح FC7070# . ارسم دائرة مثالية باستخدام أداة رسم الأشكال البيضوية Ellipse Tool عبر الضغط المستمر على مفتاح Shift أثناء سحب الشكل وليكن أبعاد هذه الدائرة 6.667mm وبذات لون المستطيلات الجديدة الأخيرة. اسحب الشكل مستعينًا بميزة المطابقة إلى المستطيل الفاتح الأول بحيث يكون نصف الدائرة خارج المستطيل. حدّد الدائرة ثم انسخها وألصقها في المقدمة من خلال Ctrl+C وCtrl+F ثم حدّدها مع المستطيل المجاور واختر الخيار Minus Front من لوحة Pathfinder ليتم قص شكل الدائرة من جسم المستطيل. حدّد الدائرة واجلبها إلى المقدمة عبر النقر بالزر الأيمن واختيار القائمة Arrange > Bring to Front أو من خلال الاختصار [+Ctrl+Shift. من لوحة الحدود زّد حجم حدود هذه الدائرة إلى 2px مع محاذاتها للخارج ولوّنها باللون الأسود. غيّر لون الدائرة إلى اللون FF4848#. كرّر العملية ذاتها لبقية المستطيلات. في مكان آخر عبر البرنامج استخدم أداة القلم لرسم شكل كما في الصورة بحدود سوداء وبدون لون تعبئة وبحجم صغير جدًّا حيث أن الصورة التالية تم تكبيرها 1200% للعمل عليها. حدّد الشكل ثم انقر بالزر الأيمن واختر القائمة Transform > Reflect اختر الخيار العمودي Vertical ثم اضغط COPY. حدّد الشكلين وانقر بالزر الأيمن للفأرة واختر Join ليتم توحيد الشكلين في شكل واحد. اعكس الألوان في لوحة الألوان ليصبح لون التعبئة الأسود بدون لون. ارسم دائرة مثالية أعلى وسط الشكل. ضاعف شكل الدائرة ثم حدّد الدائرة الجديدة مع الشكل المرسوم سابقًا معًا واختر Minus Front من لوحة Pathfinder. حدّد الدائرة ثم انقر بالزر الأيمن واختر القائمة Transform > Scale ضع القيمة 90% ثم اختر OK. اختر أداة التحديد المباشر Direct Selection Tool ثم حدّد النقاط العلوية في شكل الجسم. اسحب شكل النقطة المجاورة لحدود الشكل ليتم تحقيق انحناء للزوايا القاسية. انسخ شكلي الجسم والرأس وحرّك النسخة الجديدة للأعلى واليسار قليلًا. صغّر حجم النسخ الجديدة لنحو 80%. حدّد الجسم والرأس الأساسيين ثم اذهب إلى القائمة Object > Path > Offset Path ضع القيمة 0.25mm ثم اضغط OK. حدّد الشكلين الجديدين ثم اختر Unite من لوحة Pathfinder لتوحيدهما في شكل واحد. استخدم أدوات Pathfinder لقص الشكل الجديد من شكل الجسم والرأس الخلفيين الصغيرين. اجمع هذه الأشكال Group ثم لوّنها باللون الأبيض وعدّل الحجم وضعها داخل الدائرة الأولى. سيدلُّ هذا الشكل إلى عدد السكان للبلد. ارسم خطًّا أبيض صغيرًا مائلًا بزاوية 45 درجة بداخل الدائرة الثانية وبحجم 1px ثم استخدم نهايات سهم من الطرفين كما في الصورة من خلال لوحة Stroke . سيمثّل هذا الشكل مساحة البلد. حدّد الدائرة الثالثة ثم انقر بالزر الأيمن واختر Transform > Scale ثم صغّر حجمها بنسبة 60% ثم اضغط COPY. لوّن حدود الدائرة باللون الأبيض وأزِل لون التعبئة ثم خفّف حجم الحدود إلى 1px. مجدّدًا اصنع نسخة عن الدائرة الجديدة وعدّل حجمها عبر تصغير الحجم أفقيًّا 40% والمحافظة على الحجم عموديًّا كما هو. اصنع نسخة أخرى عن الدائرة وصغّر الحجم عموديًّا هذه المرة بنحو 40% والمحافظة على الحجم الأفقي. وبهذا سيكون الشكل النهائي كما في الصورة، وسيكون للدلالة على عدد مستخدمي الإنترنت في هذا البلد. أخيرًا يمكنك الحصول على شكل رمز الفيسبوك فكتور مجانًا من خلال آلاف المصادر المتوفرة ووضعه ضمن الدائرة الرابعة وتلوينه باللون الأبيض للدلالة على عدد مستخدمي الفيسبوك في البلد. انسخ إحدى الدوائر ثم ضعها في طرف الدائرة الأساسية الحمراء العليا ثم أزِل لون الحدود واجعل لون التعبئة باللون الأحمر ذاته ثم ادمج الدائرة مع المستطيل باستخدام أدوات Pathfinder. حدّد جميع هذه الأشكال ثم اجمعها في مجموعة Group واحدة. استخدم خطًّا مناسبًا ولكن يجب أن يكون من الخطوط العريضة Bold وذلك لكتابة اسم البلد في الصف الأول وبالحجم المناسب أيضًا وباللون الأسود. استخدم ذات الخط والحجم واللون لكتابة باقي المعلومات بحيث سيكون الصف الثاني يضم عدد السكان والتالي سيكون مساحة البلد والثالث سيكون عدد مستخدمي الإنترنت والأخير سيكون حجم مستخدمي الفيسبوك. انسخ مجموعة الأشكال التي جمعناها سابقًا ثم ألصقها في أطراف التصميم بالقرب من الدول المطلوبة مع رسم الخطوط الواصلة بين هذه الأشكال وخرائط الدول مع مراعاة الألوان للدول. ثم اكتب البيانات الصحيحة الخاصة بكل دولة. لاحظ أنني قمت بتغيير لون الأيقونات الدلالية لبعض الدول إلى اللون الأسود وذلك بحسب درجة قتامة لون الدائرة الخلفية. استخدم خطًّا خاصًا بالعناوين العريضة لكتابة عنوان الانفوجرافيك وهو "أكثر دول العالم استخدامًا للفيسبوك 2016” وبحجم كبير وبلون أبيض. وفي أسفل التصميم ضع نسخة عن الأيقونات المستخدمة باللون الأبيض واستخدم ذات خط العنوان وبحجم صغير لكتابة شرح دلالة الأيقونات. هذا انفوجرافيك بسيط وعملي يوضّح ببساطة معلومة عن أكثر دول العالم استخدامًا للفيسبوك عام 2016. تم تصميمه ببساطة باستخدام أداوت الإليستريتور الأساسية وبدون أية تأثيرات. الأسلوب البسيط لهذا الانفوجرافيك وبدون مؤثرات هو الأسلوب الأكثر انتشارًا بين مصممي الانفوجرافيك بشكل عام، بحيث يُستخدم لإيصال المعلومة بكل وضوح وبساطة وبدون تشتيت التركيز على الهدف من التصميم. المصادر القائمة التي تضم ترتيب الدول الأكثر استخدامًا للفيسبوك Leading countries based on number of Facebook users as of May 2016 من موقع Statista المتخصص في الدراسات والتحليلات والإحصاء. المعلومات التفصيلية للدول من عدد السكان والمساحة وعدد مستخدمي الإنترنت من كتاب The World Factbook من موقع CIA. خريطة العالم المفصّلة بحسب الدول فكتور مجانية من موقع FreePik. أيقونة الفيسبوك فكتور مجانية بعنوان Colored buttons for social networks بواسطة ibrandify / Freepik.

باتباعك للخطوات التالية ستحصل على أيقونة لخريطة يمكنك استخدامها بالطريقة التي ترغب بها. خطوات رسم أيقونة خريطة نزيل إطار الصفحة عن طريق اختيار قائمة الملف File نختار خصائص المستند Document properties ثم من النافذة المنبثقة أزل العلامة عند عبارة Show page border. نكبر مساحة العمل من قائمة العرض View اختر Zoom ثم Zoom 1:1 لنتمكن للعودة لها – أي المساحة – بالضغط على رقم 1 من لوحة المفاتيح، في حال اضطررنا للتصغير أو التكبير . نرسم مستطيلا بزوايا حادة وذلك بتحريك الدائرة الوهمية في حافة المربع للأعلى في حال لم تكن كذلك، أو بالضغط على رمز الزاوية الحادة من الشريط العلوي. نكتب قياس الطول والعرض للمربع في خانتيهما في الشريط العلوي حيث يمثل الحرف w العرض وقيمته 450 ويمثل الحرف H الطول وقيمته 300 ثم نقلل شفافية الشكل Opacity من شريط التعبئة والحدود Fill and stroke من تبويب التعبئة Fill إلى المنتصف. نرسم مستطيلا رفيعا بحيث يقطع المستطيل الأول بالعرض ونقوم بتدويره بالضغط على المستطيل مرتين من أجل إظهار أسهم التدوير. نكرر المستطيل الرفيع مجددا عن طريق تحديده ثم بالزر الأيمن نختار Duplicate وندوره بحيث يشكل علامة شبيهة بحرف T المقلوب وبحيث يشكل زاوية قائمة مع المستطيل السابق. نختار كلا المستطيلين الحديثين ومن قائمة المسار Path نختار Union لتوحيدهما معا. نلون المستطيل الأصل بالأحمر مؤقتا لتمييز ما نقوم بعمله، ثم نكرره مجددا ونختاره هو والمستطيلين المتعامدين ومن قائمة المسار نختار التقاطع Intersection لإزالة الزوائد الخارجة عن إطار المستطيل. نكرر الشكل المتعامد مجددا ثم نختاره هو والمستطيل الأصل ومن قائمة المسار نختار الفرق Difference . نختار المستطيل ومن قائمة المسار نختار Break apart لتجزئته حيث أزلنا منه في الخطوة السابقة المساحة التي كانت تشغل الخطين المتعامدين. بهذا نكون قد حصلنا على الشكل الأساسي للخريطة ويبقى لنا تلوينها وطيها، نزيل الشفافية ونجعل قيمتها 100، ثم نختار القطعتين العلويتين ونلونهما باللون الأخضر ونلون القطعة السفلية باللون الأزرق، بينما نلون الخطين المتعامدين باللون الأصفر من الشريط السفلي. ملاحظة: يمكن معرفة قيم الألوان التي اخترناها في التصميم من لوحة التعبئة والحدود. نحدد جميع أجزاء الخريطة ونجمعها من اختصار التجميع Group في الشريط الأعلى، ونصغر مساحة العمل بالضغط على علامة – من لوحة المفاتيح، وفي حال رغبنا بتكبير مساحة العمل نضغط على علامة +. نكرر الشكل مرتين ونحركهما تحت الشكل الأول مع الضغط على Ctrl أثناء السحب حتى تكون محاذية لبعضها البعض. نرسم مستطيلا جديدا حاد الزوايا بعرض 150 وارتفاع 300 ونكرره ثلاث مرات، ثم نختار النسخة الأولى ثم نختار الخريطة الأولى ومن لوحة المحاذاة والاصطفاف Align and distribute نختار محاذاة الحافة اليسرى ثم نقوم بمحاذاتهما أفقيا. ملاحظة: تأكد من تحديد خيار Last selected في لوحة المحاذاة والاصطفاف ليقوم بمحاذاة الشكل المختار أولا مع آخر ما قمنا بتحديده. نختار النسخة الثانية من المستطيلات ونحاذيها مع الخريطة الثانية أفقيا وعاموديا، ثم نختار الثالث ونحاذيه مع الخريطة الثالثة مع الحافة اليمنى ثم نحاذيهما أفقيا. نختار جميع الأشكال الموجودة في الشاشة بما في ذلك الخرائط والمستطيلات ثم من الشريط العلوي نختار فك التجميع أو بالضغط على الزر الأيمن نختار UnGroup. نأتي للخريطة الأولى ونكرر المستطيل الذي فوقها مرتين، ثم نختار المستطيل مع القطعة الخضراء ومن قائمة المسار نختار Intersection، ثم نختار المستطيل الثاني مع الخطوط الصفراء ثم نكرر نفس الأمر من قائمة المسار وهكذا نفعل الشيء نفسه مع القطعة الزرقاء مع حذف القطعة الخضراء الزائدة بتحديدها ثم من لوحة المفاتيح نختار زر الحذف Delete. نكرر نفس الخطوات السابقة مع الخريطة الثانية والثالثة إلا أننا سنكرر المستطيل أربع مرات مع الخريطة الثانية لنأخذ التقاطع من كلا القطعتين الخضراوين يمين ويسار المستطيل. نجمع أجزاء كل قطعة من الخريطة ونضعها بجانب بعضها البعض ولسنا بحاجة لمحاذاتها بل يكفي أن نجعلها تقريبا في نفس المستوى. نختار الجزء الأخضر العلوي من القطعة اليمنى واليسرى دون اختيار الوسطى ثم من لوحة التعبئة والحدود من تبويب Fill نحرك الشريط عند الحرف L لجهة اليسار ليعطينا لونا أقتم. نكرر نفس الخطوات مع اللون الأصفر واللون الأزرق. نحدد أجزاء كل قطعة من الخريطة في مجموعة مع بعضها بحيث يكون عندنا ثلاث قطع للخريطة في ثلاث مجموعات. نختار القطعة اليسرى ثم نحددها مجددا لتظهر لنا أسهم الاستدارة ونسحب السهم المتوسط الأيمن قليلا للأعلى. نفعل الشيء نفسه مع القطعة المتوسطة إلا أنا سنحرك السهم للأسفل بدلا من الأعلى، ثم نختار القطعة اليمنى ونحرك السهم للأعلى بنفس مقدار القطعة اليسرى تقريبا. من الشريط العلوي نتأكد من تفعيل الكبس والالتقاط Enable snapping منه نفعل Snap cusp nodes ليتم التقاط حواف عقد الشكل، ثم نقرب القطعة اليمنى ثم القطعة اليسرى للقطعة الوسطى ونلاحظ أنها تلتقط حوافها. نكرر جميع أجزاء الخريطة ونفك تجميعها ثم من قائمة المسار نختار Union لتوحيد جميع الأجزاء ثم نلونه باللون الرمادي من الشريط السفلي ثم نعيدها للخلف للأخير من الشريط العلوي. ومن لوحة التعبئة والحدود نختار تبويب سمة الحد Stroke style ونختار عرض الحد 35 ونختار الخيارات الحادة في كل من Join و Cap. مع كون الشكل ما زال محددا نختار من قائمة المسار Stroke to Path لتحويل الحد لمسار ثم نختار Break apart ثم مع التأكد من كون جزئي الشكل ما زالا محددين نختار Union. نكرر القطعة الرمادية مجددا، ثم نرسم بأداة الرسم المنحني Bezier -مع كون الجذب والالتقاط ما زال مفعلا- في طرف القطعة مضلعا ثم نختار القطعة الرمادية المكررة مع المضلع ومن قائمة المسار نختار Intersection ونلون القطعة الناشئة بلون أقتم من شريط L في تبويب التعبئة. ثم نعيد القطعة خطوة واحدة للخلف من الشريط العلوي. نعيد تكرار نفس الخطوات مع فرق رسم المضلع في الجهة اليمنى من الشكل. نحدد جميع أجزاء الشكل ونضعها في مجموعة عن طريق الاختصار Ctrl+g لنتمكن من التصغير والتكبير للحجم المناسب. وبهذا نكون وصلنا للنتيجة النهائية المقال مستفاد من فيديو بعنوان: Inkscape Tutorial: Vector Map Icon لصاحبه Nick Saporito.