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

هل تبحث عن أيقونات مصممة وفق التصميم المادي (Material Design Icons) ذات جودة عالية لإضافتها لمشاريعك؟ أنت في المكان الصحيح! لقد جمعت لك قائمة ضخمة من أيقونات مصممة وفقًا للتصميم المادي (Material Design Icons) التي يمكنك توظيفها في تصاميمك المستقبلية. تمتلك الأيقونات دورًا مميزًا في أي تصميم إذ تضفي انطباعًا بصريًا جميلًا للعديد من الحركات، والأدوات، والمنتجات، والخدمات ...إلخ. بإمكانك توظيف أيقونات التصميم المادي هذه في مشاريع متعددة، وإضافة لذلك، فإن تصاميمها تواكب آخر الصيحات. أثِر اهتمام مستخدميك بتصاميم الأيقونات الملفتة هذه. ستكتشف العديد من الأيقونات المتجهية مصممة بتصاميم يدوية وسلسة، ومصنوعة بأيدي مصممين خبراء. تحتوي هذه المقالة على مجموعة كبيرة جدًا ويوجد ما يناسب الجميع. قم بتحميلهم بعدة صيغ، حسب حاجتك. إضافة لذلك، فإن تصاميم هذه الأيقونات تغطي الكثير من الزوايا والمواضيع المختلفة. Material Design Icons Custom Shape هذه مجموعة كبيرة تضم 431 أيقونة تصميم من الفوتوشوب. يمكن تحميل هذه التصاميم واستخدامها بالمجان. Android L Icon Pack by Icons8 لديك هنا مجموعة ضخمة تحتوي على 840 أيقونة مصممة وفق التصميم المادي (Material Design Icons) وهي متاحة بصيغة PNG. وتشمل أيقونات التواصل الاجتماعي، والأسهم، والخدمات ...إلخ. Material Design Icon Grid صمَّم هذه الأيقونات المصمم Jiangping Hsu ويمكن تحميلها بصيغة ملفات PSD. بإمكانك استخدامها في أشرطة العمل كأيقونات بدء. Google Material Icons أيقونات جوجل هذه تم صنعها خصيصًا لتطبيق Sketch. ألق نظرة على كل شيء وحدد إذا ما كانت هذه التصاميم مفيدة لمشاريعك. Material Design Powerpoint & Keynote Icons يوجد هنا مجموعة كبيرة مكونة من 425 أيقونة بإمكانك استخدامها في برنامج Powerpoint و Keynote. بإمكانك تغيير الألوان حتى تناسب ما تريد وضعها معه. Isometric Material Icons وهي مجموعة رائعة تشمل أيقونات مصممة تصمميًا جيدًا. بإمكانك تحميلها بأكثر من صيغة ملف مثل PNG، و PSD، و AI. Material Design Icons with Bounds 250 أيقونة تصميم مادي (Material Design Icons) بإمكانها أن تندمج بداخل مشاريع Sketch الخاصة بك. تفقد هذه الأيقونات وحدد إن كنت تستطيع استخدامها في تصاميمك الحالية. Material Design Icon Templates سوف تجد هنا العديد من قوالب أيقونات التصميم المادي (Material Design Icons) المختلفة والتي بإمكانك استخدماها في تصاميمك الحالية أو المستقبلية. Material Icons Pack وهي مجموعة كبيرة أخرى مكونة من 435 أيقونة مصممة وفق التصميم المادي (Material Design Icons). بإمكانك تحميل هذه العناصر في برنامج Sketch وصيغة SVG. Material Design System Icons أيقونات النظام هذه تم صُنعها بواسطة Walmyr Carvalho. ستجد في الرابط الموجود بالعنوان 20 أيقونة جميلة بإمكانك استخدامها في كل من Sketch وبصيغة PNG. Material Design Icons by Google لديك 900 أيقونة مصممة وفق التصميم المادي (Material Design Icons) بين يديك وجاهزة للاستخدام فورًا. هذه الأيقونات لديها تصاميم بسيطة ولكن مذهلة وسوف تترك انطباعًا إيجابيًا لدى مستخدميك. Mprphing Material Design SVG Icons – SVG Morpheus يوجد هنا مجموعة رائعة من أيقونات SVG المرسومة والتي يمكنك استخدامها في تصاميمك. اضغط على الرابط المرفق بالأسفل لتشاهدها. Material Design Webfont Icons هذه مجموعة مميزة وتضم أكثر من 1900 أيقونة مصممة وفق التصميم المادي (Material Design Icons). هذه المجموعة تشمل تصاميم أيقونات متعددة الاستخدام ومتوفرة بعدّة صيغ وألوان وأحجام. Material Design Icons ألق نظرة على أيقونات التصميم هذه بصيغة PSD الرائعة والتي يمكنك تحميلها واستخدامها في مشاريعك مجانًا. هذه الأيقونات لديها تصاميم ذات تفاصيل مفعمة بالألوان وسوف تبدو رائعة في مشاريعك. Material Design Icon Templates ستجد هنا مجموعة رائعة من قوالب أيقونات التصميم المفيدة والتي بإمكانك استخدامها لصنع عناصرك الخاصة. Free Set of Server – Hosting Material Design Icons تشمل هذه المجموعة 12 أيقونة جميلة مصممة وفق التصميم المادي (Material Design Icons) والتي تتعلق بالخوادم والمستضيفات. بإمكانك تحميلها بصيغة PSD أو PNG ويمكنك أيضًا استخدامها في كلا المشاريع المجانية والتجارية. Google Maps & Streetview Icons تجد هنا بعض الأيقونات المرسومة الخاصة بخرائط جوجل (Google maps) ووضع رؤية الشارع (Streetview) والتي يمكنك استخدامها في مشاريعك الحالية أو القادمة. Angular Material Icons (eps) لديك هنا مجموعة رائعة من الأيقونات الزاويّة التي يمكنك تحميلها واستخدامها بالمجان. هذه العناصر لديها تصاميم مفصّلة بألوان جميلة. Material Design +420 Free Icons (SVG, EPS, PSD, PNG Files) أيقونات التصميم هذه متواجدة بصيغة vector مما يجعلها مثالية لأي مشروع، مهما كان حجمه. بإمكانك الاختيار بين أكثر من 420 أيقونة مجانية وتأتي بصيغة SVG، و PNG، و PSD وصيغ ملفات أخرى. ترجمة -بتصرف- للمقال ‎7000+ Material Design Icons - Ultimate Icon Roundup لصاحبه Iggy

كثيرًا ما سمِعتَ بأنك تستطيع صنع مجموعتك الخاصة من الأيقونات في فوتوشوب، او بإمكانك البحث عنها على الإنترنت، ولكن ماذا إن أخبرتك بأنك تستطيع الوصول إلى مكتبات كبيرة من الأيقونات مباشرةً في فوتوشوب؟ نود اليوم أن نقدم لك هذه الإضافة في فوتوشوب. أولًا: مجموعة FlatIcon أكثر من 10,000 شكل متجه تضاف مباشرةً إلى فوتوشوب. ثانيًا: مجموعة Pixel 2 Vector تعرّف على أكبر مجموعة من الأيقونات المستخدمة في فوتوشوب بالمجان! ثالثًا: مجموعة Creative Market الوصول المباشر لمحتوى التصميم المميز من Creative Market. بإمكانك إيجاد المزيد على موقع blogging.com، وبإمكانك إيجاد مكونات إضافية اكثر من المتجهات في فوتوشوب: هذه القائمة تحتوي على أفضل الإضافات لفوتوشوب: تصميم المواقع الإلكترونية، والفُرَش، وأنماط الرسم، وتعديلات الألوان، وسير العمل، والفلترة، والمؤثرات الخاصة والتحجيم. ترجمة -بتصرف- للمقال ‎Access vector icons لصاحبه Zsolt Mathe

نكمل في هذا الجزء الأخير باقي خطوات تصميم يد تحكم باستخدام برنامج أدوبي إلستريتور. رابط الجزء الثاني من الدرس. 41. باستخدام الأداة (Rectangle Tool (M نرسم مستطيلا مقاسه: 39x25px بعدها نحذف نقطة الزاوية اليسرى العلوية ثم نسحب النقطة اليسرى السفلية إلى الأعلى مسافة 13px. نحدد الشكل الناتج ثم نتبع المسار التالي: Effect > Stylize > Round Corners ونختار القيمة 6px لـ: Radius ثم نضغط على زر موافق ونختار له اللون R=3, G=3, B=4. 42. نحدد المثلث الدائري الذي تحصلنا عليه ونتبع المسار التالي: Object > Transform > Transform Each ثم نختار نفس القيم الموجودة في الصورة أدناه ونضغط Copy. نقوم بعمل نسخة للشكل الجديد ونسحبها إلى الأعلى مسافة 5px ثم نغير لونها إلى R=35, G=31, B=32. نضاعف الشكل مرة واحدة ونخفي النسخة، بعدها نحدد الشكلين ونطبق خاصية blend بينهما: 43. نضغط على (Ctrl +Alt +3) لإظهار الشكل الذي قمنا بإخفائه ثم نغير لونه إلى R=75, G=74, B=76. بعدها وباستخدام أداة (Pen Tool (P نرسم مسارين منحنيين كما يظهر في الصورة، ثم نحدد المسار الأحمر ونقوم بإلغاء التعبئة اللونية أما قيمة stroke فنحددها بـ: 1pxواللون (R=109, G=110, B=113)، بعدها نطبق النمط Width Profile 1 على الشكل الناتج ثم نجمع كل الأشكال بدءا من الخطوة 41 بالضغط على (Ctrl +G). 44. نضع المجموعتين الجديدتين في مكانهما المخصص كما يظهر في الصورة، بعدها نختار أداة الكتابة (Type Tool (T ثم نضغط على: Window > Type > Character ونحدد نفس القيم التي في الصورة ونكتب الكلمات التي تظهر في الصورة أيضا: تصميم Analog Sticks45. باستخدام الأداة (Ellipse Tool (L نرسم دائرة بالمقاسات: 124x115px ثم نقوم بتدويرها بزاوية 20درجة، بعدها نملأها بالتدرج اللوني الخطي linear gradient كما يظهر في الصورة: 46. نضاعف الشّكل مرتين (Ctrl +C ثم Ctrl +F ثم Ctrl +F) ثم نخفي إحدى النسخ (Ctrl +3)، نحدد النسخة المتبقية ونغير لونها إلى التدرج اللوني linear gradient. نسحب الشكل الناتج مسافة 36px إلى الأسفل و 5px إلى اليمين، ثم نضغط على (Ctrl +Left Square Bracket) لوضعه في الخلف. نحدد الشكلين الجديدين ونطبق الخاصية blend بينهما لدمجهما: 47. نضغط على (Ctrl +Alt +3) لإظهار الشكل الذي قمنا بإخفائه ونغير لونه إلى linear gradient، نحدد الشكل ثم نتبع المسار التالي: Object > Path > Offset Path ونغير قيمة Offset إلى -1px ثم نضغط على OK. ونغير لون الشكل الجديد إلى linear gradient. 48. نضاعف الشكل الذي قمنا بعمله في الخطوة السابقة ونغير لونه إلى linear gradient. ثم نحدد قيمة التأثير Feather بـ: 6px ونخفض قيمة الشفافية Opacity إلى 50%. نقوم بعمل نسخة للشكل الجديد ثم وباستخدام لوحة تحديد المسارات Appearance نقوم بحذف خاصية Feather. نتأكد بأن الشكل الجديد محدد ثم نضغط على: Effect > Texture > Grain ونختار نفس القيم الموضحة في الصورة ونضغط على زر موافق، بعدها نغير خاصية Blending Mode للشكل الجديد إلى Soft Light مع تخفيض قيمة الشفافية إلى 60%. 49. لإضافة بعض التفاصيل نرسم شكلا مثل الذي في الصورة ونملأه بالتدرج اللوني الخطي linear gradient. 50. نحدد الشكل الذي في الصورة الثانية في الخطوة 48 ثم نتبع المسار التالي: Object > Path > Offset Path ونحدد قيمة Offset بـ: -12px ونضغط على OK. نستمر في تحديد الشكل الجديد ثم وباستخدام لوحة Appearance نحذف تأثير Grain. الخطوة التالية هي تغيير خاصية Blending Mode للشكل الجديد إلى Normal وقيمة Opacity إلى 100% ثم نغير اللون إلى radial gradient بعدها نحدد قيمة التأثير Feather بـ: 5px. 51. نحدد الشكل الذي قمنا بعمله في الخطوة السابقة ثم نتبع المسار التالي: Object > Path > Offset Path ونحدد قيمة Offset بـ: -2px ثم نضغط على زر موافق. نقوم بحذف التأثير Feather من الشكل الجديد ونغير لونه إلى R=5, G=5, B=5. 52. نحدد الشكل الجديد ونتبع المسار التالي: Object > Path > Offset Path ثم نحدد قيمة Offset بـ: -4px ونضغط على زر موافق ثم نسحب الشكل الجديد مسافة 1px إلى الأسفل. نضاعف الشكل الذي تحصلنا عليه ثم نقوم بسحب النسخة مسافة 13px إلى الأعلى و 2px إلى اليسار ونغير لونها إلى R=65, G=64, B=66 ثم ننسخ النتيجة التي تحصلنا عليها ونخفيها. بعدها نحدد الدائرتين الجديدتين ونطبق خاصية blend بينهما. 53. نضغط على (Ctrl +Alt +3) لإظهار الدائرة التي قمنا بإخفائها، نقوم بمضاعفتها ونخفي النسخة الجديدة. ثم نحدد الدائرة الأصلية ونسحبها مسافة 4px إلى الأسفل مع تغيير لونها إلى R=28, G=28, B=30 أما قيمة Feather فنحددها بـ 10px. الآن نضغط على (Ctrl +Alt +3) ونُظهر الدائرة. ثم نغير لونها إلى التدرج اللوني الخطي radial gradient، ونحدد قيمة stroke بـ: 2px واللون (R=33, G=32, B=35). ننسخ الشكل الذي تحصلنا عليه ونتبع المسار التالي: Effect > Texture > Texturizer ثم نختار نفس القيم التي تظهر في الصورة ونضغط على زر موافق، أخيرا نقوم بتغيير خاصية Blending Mode إلى Multiply ونخفض قيمة Opacity إلى 20%. 54. سنحاول إضافة بعض اللمسات لجعل الشكل أكثر واقعية، حيث نقوم أولا برسم ثلاث مسارات منحنية باستخدام أداة (Pen Tool (P كما هو موضح في الصورة، ثم نحدد المسار الذي يظهر باللون الأخضر ونلغي تعبئته اللونية أما قيمة stroke فنحددها بـ: 2px ونختار اللون (R=100, G=103, B=110)، بعدها نختار النمط Width Profile 1 للشكل الناتج ونطبق عليه التأثير Gaussian Blur بقيمة: 2px. الآن نحدد بقية المسارات ونلغي التعبئة اللونية أما قيمة stroke فنحددها بـ: 3px واللون (R=128, G=130, B=133) بعدها نطبق النمط Width Profile 1 على الشكل الناتج والتأثير Gaussian Blur بقيمة: 3px. آخر خطوة هي جمع الأشكال الثلاثة الجديدة في طبقة واحدة (Ctrl +G). 55. نحدد الشكل الذي يظهر في الصورة الثالثة والذي قمنا بعمله في الخطوة 53 ونضاعفه مرة واحدة، ثم نضع النسخة في الواجهة، نتأكد من أن الشكل لا يزال محددا ونزيل التأثير Texturizer وفي المقابل نقوم بتغيير خاصية Blending Mode إلى Normal مع تحديد قيمة Opacity بـ: 100%. الآن نحدد الشكل الجديد ونضغط بشكل مستمر على المفتاح Shift ثم نضغط على المجموعة الجديدة التي قمنا بعملها ونتبع المسار التالي: Object > Clipping Mask > Make Ctrl +7 56. نحدد جميع الأشكال بدءا من الخطوة 45 ونجعها في طبقة واحدة (Ctrl + G)، ثم نتبع المسار التالي: (;+View > Guides > Show Guides (Ctrl لإظهار الخط التوجيهي العمودي والذي قمنا بإخفائه في الخطوة 11. الآن نحدد مجموعة الأشكال الجديدة ونضغط على (Reflect Tool (O، نضغط باستمرار على المفتاح Alt ونحدد الخط التوجيهي العمودي. بعدها وفي علبة Reflect التي تظهر لنا نعين القيمة Vertical ونضغط على Copy آخر خطوة هي الضغط على (Ctrl +;) لإخفاء الخط التوجيهي. إضافة تأثير الظل Shadows57. في هذه الخطوة سنقوم بعمل تأثير الظل على يد التحكم لجعلها تظهر بشكل ثلاثي الأبعاد. فنقوم أولا برسم شكل مثل الذي في الصورة وذلك باستخدام أداة القلم (Pen Tool (P ثم نقوم بتعبئته باللون R=0, G=0, B=0 بعدها نطبق عليه التأثير Gaussian Blur بقيمة 5px ونحدد قيمة Opacity بـ: 90% ثم نضعه في الخلف. 58. باستخدام أداة (Pen Tool (P نرسم شكلا آخر كما يظهر في الصورة ثم نملأه باللون R=0, G=0, B=0، بعدها نطبق عليه التأثير Gaussian Blur بقيمة 18px ونحدد قيمة Opacity بـ: 80% ثم نضعه في الخلف. عمل الخلفية59. باستخدام الأداة (Rectangle Tool (R نرسم مستطيلا مقاسه 700x507px ونختار له اللون R=209, G=211, B=212. آخر شيء نقوم بعمله هو وضع يد التحكم التي قمنا بعملها في مكانها المناسب كما يظهر في الصورة الثانية: وبهذا نكون قد أنهينا آخر جزء من درسنا، وهذه هي النتيجة النهائية: ترجمة وبتصرّف للمقال How to Create a Realistic Game Controller in Adobe Illustrator لصاحبه Bao Nguyen.

حاول أن تتبع خطوات هذا الدرس لتتمكن من رسم ملصق لجمجمة باستخدام برنامج أدوبي اليستريتور Adobe Illustrator، والذي سيناسب حتما المبتدئين بشكل كبير. لن نكتفي فقط برسم الجمجمة وعظمتين متقاطعتين باستخدام أهم أدوات برنامج اليستريتور، لكن سنتعلم أيضا طريقة إعداده للطباعة باستخدام الخاصيتين bleeds والخطوط التوجيهية guides سنستخدم أشكال فكتور vector بسيطة لرسم كلا من الجمجمة والعظمتين المتقاطعتين لعمل شكل كرتوني لطيف، سنستخدم أيضا بعض الخامات لجعل الرسمة تبدو قديمة. يمكنك أن تختار الأبعاد التي عادة تستخدمها لتصميم لملصق وتوجيهه للطباعة، بالنسبة لي فقد اخترت القياسات التالية 38x38mm، وبما أن ذلك يتطلب أن تكون قيمة bleed: 1mm فسيصبح مقاس العمل: 40x40mm. في أي مشروع اليستريتور بإمكاننا استخدام إعدادات الخاصية bleed لإضافة بعض التوجيهات لملف العمل، لكن الملصق الذي سنقوم به سيكون دائري الشكل وبالتالي فلن نحتاج لتلك الخاصية. حتى نرسم الشكل الدائري الذي يظهر في الملصق فنحن بحاجة إلى رسم دائرة واختيار الحجم المناسب لها، وذلك باختيار الأداة Ellipse tool والنقر في أي جزء من مساحة العمل. نستعين بلوحة المحاذاة Align palette لتعديل مكان الدائرة وجعلها تتناسب مع مساحة العمل، تأكد من أن لوحة المحاذاة محددة على قائمة الخيارات. عند الانتهاء من رسم الدائرة ومحاذاتها، نضغط على الزر الأيمن للفارة ونختار Make Guides ، حتى نستطيع التحكم بالشكل أكثر. يحتوي التصميم على خطوط توجيه حول حوافه، لكننا بحاجة أيضا إلى خطوط توجيهية أخرى تحدد الجزء الذي سيقص عند الطباعة، حيث أن عمل التصميم وفق تلك الخطوط التوجيهية سيتجنب قص أي عناصر موجودة خارجها. بعد إظهار الخطوط التوجيهية ووضع الخطين في مكانهما، نضغط على الزر الأيمن للفأرة ونختار Lock Guides، حتى نضمن عدم تحركها أو تحديدها بالخطأ. يتميز التصميم الذي سنقوم بعمله باحتوائه على خلفية سوداء، لذلك نقوم بإضافة دائرة مقاسها 40x40mm ثم نقوم بمحاذاتها إلى الوسط. نستخدم أداة Ellipse tool لإنشاء الجزء الرئيسي من الجمجمة، بعدها نحدد أداة المستطيل مدور الحواف Rounded Rectangle tool لرسم جزء الفك، بإمكاننا استخدام مفاتيح الأسهم لتعديل أنصاف أقطار الزوايا قبل أن نفلت الفأرة. نقوم برسم العينين وذلك برسم دائرتين نختار لهما اللون الأسود، ثم نسحب أحداهما إلى الأسفل قليلا لخلق تعبير يوحي بالارتباك. في هذه الخطوة سنقوم برسم شكل العظم، نبدأ أولا برسم دائرتين متداخلتين، بعد أن نرسم أول دائرة نضغط على المفتاح ALT ونسحبها لعمل نسخة منها، ثم نرسم مستطيلا مائلا نضعه بين الدائرتين. نحدد جميع الأشكال التي تمثل شكل العظام ونضغط على CMD+G لجمعهم في طبقة واحدة. ننسخ الشكل (CMD+C) ونلصقه في الخلف (CMD+F) ثم نتبع المسار التالي: Object > Transform > Reflect لوضع النسخة بشكل معاكس. نضع شكلي العظام فوق الشكل الأساسي للجمجمة لخلق حدود حولها ثم نحدد الشكلين ونتبع المسار التالي: Object > Path > Offset Path نحدد قيمة offset بـ: 1mm لتعبئة الأشكال الجديدة باللون الأسود. سنحتاج إلى الجمع بين الحدود السوداء الجديدة وشكل العظام بشكل صحيح لنتمكن من عمل التأثيرات التي نريدها، نستخدم الاختصار CMD+[ و CMD+] لترتيب الأشكال وجعلها تظهر كما في الصورة: ننهي رسم الجمجمة بإضافة فم للوجه، حيث نقوم برسم سلسلة مكررة من الخطوط العمودية وذلك بالضغط على المفتاح ALT وسحب الخط العمودي لنسخه، بعدها نضغط على الاختصار CMD+D لعمل سلسلة خطوط عمودية متباعدة بشكل متساو. تصميم الملصق يظهر بشكل جيد لحد الآن، حيث أن استخدام تلك الأشكال البسيطة سيساعدنا على عمل ملصق جميل لشكل جمجمة كما هو ظاهر في الصورة: سيظهر التصميم بشكل أفضل إذا أضفنا إليه بعض التأثيرات الخاصة، لذلك نقوم بتحميل الخامة Vector Bumper Pack ولصقها على التصميم. ننسخ ونلصق شكل الدائرة ونضعها في الأعلى باستخدام الاختصار CMD+Shift+]، ثم نحدد الشكل مع الخامة ونضغط على الزر Crop من لوحة تحديد المسارات لإزالة الأجزاء الزائدة من الخامة وإضافة بعض التعبئة البيضاء على الجزء الأسود من الملصق. نضيف خامة جديدة لكن هذه المرة نقوم بنسخ جميع عناصر التصميم ثم نضغط على الزر Merge من لوحة تحديد المسارات لتحويل تلك العناصر إلى شكل واحد. نضع شكل الجمجمة والعظمتين في الأعلى، سنلاحظ أن الخامة تجعل التصميم يظهر وكأنه قديم و تم عمله منذ سنوات. نقوم بحفظ الملف بصيغة JPEG أو EPS ثم نرسله إلى الطباعة، تذكر أن الخطوط التوجيهية لن تظهر عند طباعة التصميم لكنها تساعد على تحديد هوامش التصميم وتضمن عدم قص أجزاء منه عند حفظه. ترجمة وبتصرف للمقال Create a Skull & Crossbones Sticker Design in Illustrator لصاحبه Chris Spooner.

هذا الدرس عبارة عن مدخل إلى 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

إنّ برنامج أدوبي إليستريتور هو برنامجي المفضّل لتصميم الشخصيات اللطيفة والمرحة. يمكنك إنشاء رسومات رائعة باستخدام بعض الأشكال البسيطة ومزيج من التدرجات اللونية وبعض الظلال. هذه عملية إنشاء شخصية باندا لطيفة خطوة بخطوة من الخطوط الأساسية حتى التفاصيل الدقيقة. تتكون الشخصية التي سنرسمها اليوم من سلسلة من الأشكال العشوائية السريعة التي توضع معًا في الإليستريتور. وهو ما يوفّر الأساس لمزج التدرجات اللونية مع الألوان لإظهار شخصية يمكن التعرّف عليها. عندما يوضع كل شيء معًا ضمن التصميم فإنّ بعض الظلال ستضيف مستوًا جديدًا من العمق والواقعية للتصميم. افتح برنامج أدوبي إليستريتور وأنشئ ملفًّا جديدًا. ارسم دائرة داخل لوح الرسم ثم اسحب النقطة العلوية للأسفل قليلًا باستخدام أداة التحديد المباشر Direct Selection Tool لضغط الدائرة قليلًا. ارسم دائرة أخرى أصغر قليلًا لتشكيل الأنف. اسحب النقطة العلوية لهذه الدائرة لضغطها وجعلها مفلطحة. أضِف دائرتين مثاليتين لرسم أطراف الفم مع التأكّد من تقابلهما في المركز. من الممكن رسم العين باستخدام مجموعة من الدوائر. ارسم دائرة كبيرة ثم انسخ CMD+C وألصق CMD+C ثم صغّر الحجم مع الضغط على مفتاح Shift وAlt معًا. استخدم دائرةً كحدود للعين وأخرى لبؤبؤ العين ودائرتين صغيرتين كانعكاس للإضاءة. استخدم دوائر لرسم الأذن واضغط الاختصار ]+CMD+Shift لإرسال الدوائر أسفل باقي الأشكال. انسخ العين والأذن ثم اعكس النسختين من القائمة: Object > Transform > Reflect وضعهما في الجهة المقابلة. الجسم الرئيسي للباندا يتكوّن من مستطيل مستدير الزوايا كبير. اضغط على مفتاح السهم العلوي عدّة مرّات لزيادة نصف قطر الزوايا. لا نحتاج إلى زوايا مستديرة في الجزء السفلي لذلك ارسم شكلًا مؤقّتًا لتستخدمه كوسيلة لقص المستطيل مستدير الزوايا عبر الأداة Minus Front من لوحة Pathfinder. استخدم أداة القلم Pen Tool لإضافة نقطة إضافية أسفل ووسط الحافة السفلية. ثم اسحب هذه النقطة للأسفل مع الضغط على مفتاح CMD باستخدام أداة القلم Pen (هذا بديل مؤقّت عن أداة التحديد المباشر Direct Selection Tool). استمر بالضغط على مفتاح Alt أثناء سحب النقطة للخارج. هذا سيُنتِج مقابض البيزير التي ستسمح لنا بتعديل الانحناء للحافة السفلية. ارسم دائرة صغيرة في مكان ما على لوح الرسم ثم ارسم مستطيلًا مؤقتًّا يغطّي نصف مساحة هذه الدائرة. استخدم خيار Minus Front من لوحة Pathfinder لقص الأشكال من بعضها. ضع نصفي دائرة أسفل شكل الجسم لتكون الأقدام ثم ارسم خطوط الساقين باستخدام خطوط قاسية بأداة القلم. طابق الزوايا العلوية مع حواف الجسم ثم اضغط ]+CMD+Shift لإرسالها للخلف. ألصق نسخة جديدة من نصف الدائرة وقم بتدويرها بزاوية 180 درجة ثم كبّرها قليلًا لتكون يد الباندا. استخدم أداة القلم Pen لرسم بقية الذراع. اسحب منحنيات البيزير لإضافة حافة منحنية. ضاعف الذراع واعكسها ثم ضعها في الجهة المقابلة. أرسل هذه الذراع الجديدة للأسفل لتبدو ظاهرة خلف الجسم. بعد اكتمال رسم الخطوط الأساسية للشخصية سنقوم بإضافة الألوان. أزِل لون الحدود من شكل الرأس ثم استبدل لون التعبئة بتدرج لوني من الأبيض إلى الرمادي. اضبط الإعدادات ليكون التدرج دائريًا واسحب المزلاج الأبيض للتدرج ليكون قريبًا من الرمادي وذلك لجعل المساحة البيضاء أكبر. استخدم أداة التدرج اللوني Gradient لسحب ووضع التدرج اللوني بدقة فوق الرأس للحصول على التلوين المطلوب. استمر في استبدال ألوان التعبئة لجميع العناصر بشكل فردي بتدرجات لونية. أية مساحات سوداء يجب أن تكون بتدرج لوني من الرمادي الداكن إلى الأسود ويجب ضبط الزوايا باستخدام أداة التدرج اللوني Gradient. دائرتي الفم يمكن ضبط التدرج اللوني فيهما ليكون من الرمادي إلى الشفافية وذلك لمنح التأثير المناسب. اضبط الزوايا لتظهر من المركز إلى الخارج. ارسم بعض التفاصيل الإضافية كبعض الدوائر الصغيرة لتبدو كالشوارب. ضعها على كلا طرفي الفم. ضاعف دائرة الفم وحرّكها قليلًا للداخل. ألصق نسخة أخرى من الدائرة واستخدمها كوسيلة للقص باستخدام أدوات Pathfinder. سيكون الشكل الناتج عبارة عن هلال قم بتلوينه بالرمادي الداكن لإظهار شكل الفم أكثر. ضع نسخة أخرى من الهلال في الجهة المقابلة وأنهِ تصميم المساحة الوجهية عبر رسم دائرتين صغيرتين سوداوين لتكونا فتحتي الأنف. أضف ذات التدرج اللوني من الأبيض إلى الرمادي للجسم واضبط الزوايا إن كان ذلك ضروريًّا. أضِف توهّجًا داخليًّا Inner Glow من القائمة: Effect > Stylize > Inner Glow بتدرج لوني من الرمادي إلى امتداد الظل حول الحواف للجسم ما يُبقي الخطوط العريضة بارزة. يمكن إنشاء منطقة البطن للباندا بواسطة دائرة بسيطة مع تدرج لوني مناسب من الرمادي إلى الشفافية. لوّن جميع الأطراف بتدرج لوني من الأسود إلى الرمادي الداكن واضبط الزوايا بحيث تجعل التدرجات متدفقة عموديًّا. تم تلوين جميع أجزاء الشخصية ولكن لا يزال هناك بعض اللمسات الأخيرة التي ستضيف الكثير إلى التصميم. أضِف ظلالًا Drop Shadow من القائمة: Effect > Stylize > Drop Shadow إلى الخطوط الخارجية للعينين والأنف. استخدم إعدادات مناسبة مثل 30% للتعتيم Opacity و 0 للتعويض Offset و1مم للتمويه. ضاعف الخط الخارجي لشكل الرأس واضغطه قليلًا. لونّه باللون الأسود ثم أضِف تمويه ضبابي Gaussian Blur من القائمة: Effect > Blur > Gaussian Blur مع وضع 30 بكسل لنصف القطر ضمن الإعدادات. اضغط ]+CMD عدة مرات حتى يكون العنصر الأسود خلف الرأس ولكن فوق الجسم. خفّف الشفافية حتى 10% ليتم إنشاء الظل المناسب. كرّر العملية مع شكل الذراع واليد. أدمج Merge الشكلين معًا من لوحة Pathfinder ولونه باللون الأسود الصافي ثم أضف التمويه الضبابي واضبط التعتيم والترتيب. تقنيات الظلال هذه تساعد على إضافة العمق للشخصية وتمنح العناصر الكثير من الحيوية. استخدم أداة القلم لرسم غصن قاسي يخرج من يد الباندا. لونّه بتدرج أخضر ثم أضف أضلاعًا للغصن على طول هذا الشكل باستخدام أداة القلم. استمر في استخدام أداة القلم وارسم بعض الأشكال المنحنية لتشكيل الأوراق. انقر واسحب النقطة الأولى متبوعة بنقرة على الطرف ثم انقر مجدّدًا على النقطة لإعادة المنحنيات للوضع افتراضي ثم أكمل رسم الشكل من البداية. انسخ غصن الخيزران بالكامل وأدمج النسخة مع بعضها ولوّنها بالأسود ثم أضِف تمويهًا ضبابيًّا إليها وضعها في موقع الظل للغصن فوق يد الباندا. أضِف تدرجًا لونيًّا بسيطًا للخلفية لتكون شخصية الباندا مكتملة. ما بدأ ببعض الخطوط والأشكال الأساسية البسيطة أصبح شخصية مكتملة مع الظلال والألوان المتنوعة. ترجمة -وبتصرّف- للمقال: Create a Cool Vector Panda Character in Illustrator لصاحبه: Chris Spooner.

الأمر الرائع في تصميم أشكال الفكتور هو أن أي تصميم وخصوصًا الشخصيات يمكن تطويرها من الأشكال الأساسية وبذلك نحصل على تصميم بسيط وأنيق. لنبدأ بالعمل على أدوبي إليستريتور ونقوم بتصميم شخصية دب لطيف ونجعل التصميم بلونين فقط بحيث يكون تصميم قميص جاهز للاستخدام. سنعمل على تصميم يتضمن دبًّا لطيفًا جالسًا وسط محيطه الطبيعي مع العبارة اللطيفة "?Do bears sit in the woods" ولكن مع بعض التعديل بالطبع. أحيانًا في بعض أنواع الطباعة على الأقمشة نكون محكومين بعدد ألوان محدّد خصوصًا إذا كنت تستخدم تقنية شاشة الطباعة الشائعة في الطباعة على القماش. عادةً ما يتم تحديد الألوان من خلال حوامل بانتون لذلك ستكون مهمتنا الأولى هي فتح مكتبة حوامل بانتون من داخل برنامج أدوبي إليستريتور. انقر على سهم الخيارات الصغير في لوحة الحوامل Swatches واختر Color Books و Pantone Solid Coated. من هنا تستطيع اختيار حوامل الألوان التي ستعمل عليها. ابدأ بالعمل على برنامج أدوبي إليستريتور وافتح ملفًّا جديدًا. بما أننا سنصمم رسومات فكتور وبما أن الفكتور قابل للتحجيم كما نريد فلن يكون حجم العمل الأولي مهمًا ولكن حجم 11x11 بوصة سيكون مناسبًا للطباعة على القميص ونستطيع تعديل الحجم بسهولة من خلاله وفقًا لقوالب أي طابعة. ارسم مستطيلًا مستدير الزوايا داخل لوح الرسم واضبط نصف قطر الزوايا أثناء سحب الشكل عبر الضغط على مفاتيح الأسهم في لوحة المفاتيح. ارسم دائرة مثالية بحيث يطابق قطرها عرض المستطيل ويتداخل مع الجزء العلوي منه. حدّد كلا العنصرين ثم وحدهما من خلال الخيار Unite من لوحة Pathfinder وبذلك نمزجهما معًا. ارسم شكلًا بيضويًّا أبيض فوق العنصرين السابقين ثم استخدم لوحة المحاذاة Align لتوسيط العناصر سوية. امنح عنصر الجسم نقرة إضافية ليكون العنصر المفتاح ويتم توسيط العناصر بالنسبة له (يتم تمييز العنصر المفتاح بخط تحديد أزرق ثخين يحيط بالعنصر). ارسم دائرة إضافية بحيث تتداخل مع الشكل البيضوي الأبيض ثم ضاعفها وحرّكها للجهة المقابلة. استمر في رسم الدوائر لرسم العينين. دائرتين كبيرتين سوداوين مع بريقين صغيرين باللون الأبيض ستفي بالغرض. اجمع العين ثم ضاعفها وحرّكها للجهة المقابلة. لإنشاء الأنف قم باختيار أداة النجمة Star Tool ثم اضغط على السهم السفلي من مفاتيح الأسهم في لوحة المفاتيح وذلك حتى تقلل عدد أضلاع النجمة حتى يبقى ثلاثة أضلاع فقط ويصبح بذلك الشكل مثلثًّا. اضبط الشكل قليلًا عبر تحريك النقطة السفلية باستخدام أداة التحديد المباشر Direct Selection Tool ثم أضِف نمط الزوايا المستديرة عبر الذهاب إلى القائمة: Effect > Stylize > Round Corners بدأ شكل الوجه يبدو رائعًا، أنهِ هذا الوجه عبر شكل بيضوي يمثّل فمًا طريفًا. ارسم زوجين من الدوائر واحدة سوداء وأخرى أصغر قليلًا بيضاء لتشكيل الأذن. اضغط على ]+CMD لتغيير ترتيب العناصر وإرسال الأذن أسفل شكل الرأس بالترتيب. انسخ وألصق الأذن ثم اذهب إلى القائمة: Object > Transform > Reflect وضع النسخة الجديدة في الجهة المقابلة من الرأس. ارسم شكلًا بيضويًّا كبيرًا ليكون منطقة بطن الدب. قم بتوسيط كل شيء ثم ضاعف شكل جسم الدب الرئيسي. أرسله فوق كل الأشكال ثم حرّكه للأعلى قليلًا ثم حدّده مع شكل بطن الدب ثم قاطع هذين الشكلين من الخيار Intersect من لوحة Pathfinder لقصّ البطن بحسب شكل الجسم. ارسم شكل الذراع من خلال رسم دائرة كبيرة في البداية ثم استخدم أداة التحديد المباشر Direct Selection tool لحذف نقطتين من نقاط الدائرة الأربع ليبقى لدينا شكل ربع دائرة. اضبط الحدود إلى 25pt واختر خيار النهايات المستديرة. أرسل هذه الذراع أسفل شكل الجسم وكل بقية الأشكال من خلال الاختصار ]+CMD+Shift ثم ضاعف الشكل واعكسه وضعه في الجهة المقابلة من الجسم. ما تزال الذراعان عبارة عن حدود ومسارات فقط لذلك حدّدهما ثم اذهب إلى القائمة: Object > Expand وحدّد فقط خيار الحدود. وبذلك تتحول الحدود والمسارات إلى أشكال جامدة. أنهِ تصميم شكل الدب عبر رسم شكلين بيضويين كبيرين أسفل الجسم يمثّلان قدمي دبٍّ جالسٍ على الأرض. تذكّر أن تُحاذِي كل العناصر عموديًّا ليكون تصميم شخصية الدب متناظرًا تمامًا. سنبدأ بتصميم المحيط الطبيعي للدب عبر رسم شكل بيضوي أخضر كبير ووضعه في أسفل ومنتصف التصميم. استخدم أداة القلم Pen Tool لرسم أشكال أشجار تقريبية باستخدام اللون الأسود. ابدأ بالجذع ثم أنشئ أغصانًا بشكل عشوائي. استمر في رسم الجذوع والأغصان حتى يصبح لديك زوج من أشكال الأشجار تملأ الخلفية. استخدم مجموعة من الدوائر الخضراء لتمثيل الأوراق واخضرار الأشجار ووضعهم خلف جميع الأغصان. سنضيف الآن شعار التصميم وهي العبارة التي أخبرتكم عنها في بداية الدرس. استخدمتُ هنا خط Futura Extra Bold لكتابة هذه العبارة ثم حوّلتُ النص إلى خطوط خارجية عبر تحديده والضغط على الاختصار CMD+Shift+O ليصبح ببساطة قابلًا للتعديل كما لو كانت الحروف عبارة عن أشكال فقط. استخدم الأدلّة ثم اضبط أحجام الكلمات بحيث تتطابق الحواف الخارجية لكامل النص. ضع كل عنصر في موضعه الصحيح لإنهاء التصميم. إنَّ جعل النص خلف أشكال الأشجار يساعد على توحيد عناصر التصميم مع بعضها. كل ما عليك القيام به هو تحديد الكل عبر CMD+A ثم جمعها معًا في مجموعة واحدة عبر CMD+G ليصبح التصميم جاهزًا ليتم تصديره كملف فكتور أو كملف PDF. ترجمة -وبتصرّف- للمقال: How to Create a Cute Vector Bear T-Shirt Design لصاحبه: Chris Spooner.

اتبع الخطوات واحدة تلو الأخرى في برنامج Adobe Illustrator لتصميم فكتور شخصية بطريق لطيف. سنستخدم العديد من أشكال الإليستريتور الأساسية لرسم هيكل الشخصية. ثم سنستخدم عدة تدرجات لونية مختلفة لإضافة الحيوية والعمق والأبعاد. هذه هي شخصية البطريق البدين اللطيف التي سنصممها في هذا الدرس. الجسم بالكامل مرسوم باستخدام أنواع مختلفة من الدوائر والأشكال البيضوية التي تساعد على منح البطريق المظهر اللطيف بينما التدرجات اللونية والظلال ساعدت على جعل الشخصية تقفز من الشاشة بالرسم ثلاثي الأبعاد. افتح ملف جديد ببرنامج Adobe Illustrator وارسم شكل بيضوي على لوح الرسم ثم حدد واسحب النقطة السفلية إلى الأعلى باستخدام أداة التحديد المباشر Direct Selection Tool. ارسم شكل بيضوي آخر واجعله متداخلًا مع الشكل الأول (فراء البطن) ثم حاذِ الشكلين إلى وسط المحور Y. سنحتاج إلى قص الفائض من الشكل الجديد لذلك انسخ CMD+C شكل الجسم الأساسي وألصقه في المقدمة CMD+F ثم أرسله إلى أعلى كل الأشكال بالضغط على الاختصار CMD+Shift+]. حدد النسخة الجديدة مع شكل فراء البطن ثم انقر على الخَيَار Intersect من لوحة Pathfinder ليتم قص الأشكال بحسب التقاطع بينهما. ارسم شكل بيضوي آخر سيكون الجناح. استخدم نسخة أخرى عن الجسم وقص شكل الجناح. انسخ وألصق جناح آخر على لوح الرسم ثم اذهب للقائمة: Object > Transform > Reflect ضع الجناح الجديد في الجهة المقابلة من الجسم. ارسم الشكل الأساسي للقدم باستخدام ثلاثة أشكال بيضوية. ثم ادمجها باستخدام الخَيَار Merge من لوحة Pathfinder. انسخ واعكس وضَع النسخة على الجهة المقابلة. ارسم العين باستخدام ثلاث دوائر مختلفة الأحجام. قم بعمل Offset (إنشاء مسار تعويض إضافي) لبؤبؤ العين لمنحها مظهر المذهول. انسخ، ألصق وضاعف أشكال العين ثم ضعها في الجهة المقابلة. استخدم شكل بيضوي آخر لرسم منقار البطريق ولكن اسحب النقطة السفلية للأسفل واضبط مقابض البيزير Bezier ليتواجد انحناء طفيف على الحافة السفلية. وبذلك ننهي تصميم البنية الأساسية وسوف نبدأ بالتلوين. استبدل اللون الأساسي والتعبئة بتدرج ألوان من الرمادي الفاتح إلى الأسود ثم اضبط الزوايا ودع التدرج يكون دائريًّا ويتدفق من مركز الجسم إلى آخره. لوّن العين بتدرج لوني من الرمادي الفاتح إلى الأبيض. اضبط شكل التدرج للعثور على توافق مع حدود كرة العين. استخدم ذات التدرج اللوني (الرمادي إلى الأبيض) على شكل فراء البطن. اضبط هذه التدرجات بحيث تكون المنطقة السفلية بالرمادي الداكن لتبدو كالظلال ويمنح التصميم المظهر ثلاثي الأبعاد. من أجل الأجنحة استخدم أداة Gradient Mesh tool. لوّن الجناح أولًا باللون الأسود ثم انقر مرة واحدة على الجزء السفلي من الجناح. حدد أخف ظل رمادي لإضافة اللون إلى نقطة gradient mesh. الإليستريتور سيسمح بتدفق التدرج عبر الشكل. أضف تدرج gradient mesh آخر على المنقار هذه المرة وابدأ من قاعدة المنقار البرتقالية السفلية وبعدها أضف اللون الأصفر الفاتح قرب الحافة العلوية لتُشكّل انعكاس الإضاءة. ارسم دائرتين متداخلتين لتكون إحدى فتحات الأنف وبعدها ارسم الفتحة الثانية. الدائرة السفلية يجب أن تكون باللون الأصفر الفاتح لإضفاء تأثير highlight لطيف. أضف تدرج الرمادي إلى الأسود على الدائرتين التي سنرسمهما حول العينين كتدرجات خطية ثم خفف Opacity لنحو 50%. البطريق أصبح حيويًا ورائعًا بهذه الألوان. وبذلك يبقى لنا القليل من العمل بعد. حدد المنقار والعينين واذهب للقائمة: Effect > Stylize > Drop Shadow غيّر offset على الصفر ثم أضف التأثير. في مكان آخر على لوح الرسم ارسم شكل بيضوي ولوّنه بتدرج من الرمادي إلى الشفافية بشكل خطي. اضغط على Shift و Alt أثناء سحب نسخة عموديًّا ثم كرر العملية بالضغط على CMD+D حتى تكمل الصف. اضغط على Alt أثناء سحب نسخة عن كل الصف لإنشاء صف إضافي ثم اضغط CMD+D حتى يصبح لديك سلسلة كاملة من الأشكال المنقوشة. اجمع Group كل هذه الأشكال معًا ثم غيّر خصائص المزج إلى overlay حتى تتفاعل مع منطقة فراء بطن البطريق. سنحتاج إلى نسخ منطقة فراء البطن لنتمكن من استخدامها كأداة مع لوحة Pathfinder لذلك اضغط على CMD+2 لتقفل شكل النقش وبذلك يمكنك تحديد العناصر المُتَضَمّنَة. ألصق منطقة الفراء المنسوخة وأرسلها للأعلى CMD+Shift+] ثم حدد كلا العنصرين (اضغط CMD+Alt+2 لإلغاء جميع الأقفال) انقر على زر Crop من لوحة Pathfinder. إذهب إلى القائمة: Object > Envelop Distort > Make with Warp حدد تأثير الانتفاخ Bulge. اضبط الإعدادات لمنح نقش الريش مظهرًا ثلاثي الأبعاد. حوّل تأثير الغلاف المشوّه إلى شكل جامد بالذهاب على قائمة: Object > Expand وفعّل فقط خَيَار Object. النقش أصبح خارج حدود منطقة فراء البطن لذلك ألصق نسخة أخرى من الشكل وكرر عملية القص Crop من لوحة Pathfinder لتقص الزوائد وتعيد الشكل إلى وضعه الطبيعي. اضبط opacity لعناصر نقش الريش حتى تضيف تفاصيل إضافية إلى الشخصية ولكن أليست رائعة أكثر من اللازم. تصميم البطريق اكتمل وأصبح جاهزًا. لم نستخدم في تصميمه سوى الدوائر والأشكال البيضوية مع بعض المساعدة من التدرجات اللونية والظلال لنضيف لمسة من العمق والأبعاد إلى التصميم. ترجمة -وبتصرّف- للمقال: Create a Cute Vector Penguin Character in Illustrator لصاحبه Chris Spooner.

اتبع الخطوات في درس إليستريتور هذا لتتعلم كيفية تصميم لوح تزلج رائع. سنبني هذا التصميم باستخدام مصفوفة من الأشكال البرّاقة، الخطوط الشائعة والنقوش لإنتاج تركيب خاص من الفكتور البرّاق. التصميم النهائي سيكون عبارة عن نموذج لقالب خشبة لوح تزلج عملي يظهر فيها كامل روعة التصميم. لوح التزلج الطبيعي يكون عادة بحجم 42x12 إنش، ولكن بما أننا نصمم بالفكتور فيمكننا العمل على حجم أقل مثل 32x6 إنش لتخفيف الضغط على المعالجات ويمكننا بعدها تكبير الحجم كما يحلو لنا بدون تشويه التصميم. افتح ملفًّا جديدًا في برنامج أدوبي إليستريتور بالأبعاد المحدّدة مع اختيار نظام ألوان CMYK. الخطوة الأولى هي تخطيط مخطط الألوان الموحّد للتصميم. لقد اخترت مخطط ألوان رائع من موقع ColourLovers الذي يحوي على تمازج رائع بين درجات الألوان البرّاقة واللون الأزرق الداكن الذي سيكون مثاليًّا ليكون لون أرضية التصميم. اختر أداة المستطيل Rectangle tool وانقر على لوح الرسم. ادخل الأبعاد 32x6 إنش وحاذِ المستطيل باستخدام لوحة لمحاذاة Align. اضغط على الاختصار CMD+2 لقفل هذا العنصر وتجنّب تحديده بالخطأ. في مكان آخر على لوح الرسم ارسم مربّعًا صغيرًا، لاحظ الأبعاد، ثم انسخ CMD+C وألصق في المقدمة CMD+F. اضغط على مفتاح Enter لإظهار خيارات التحريك ثم أدخل ذات القيم كارتفاع المربع في الخانة الأفقية. اضغط على اختصار اللصق في المقدمة ثم اضغط CMD+D لتكرار عملية التحريك حتى يصبح لديك صف من أربعة مربعات. لوّن كل مربع من المربعات الأربعة بلون من ألوان مخطط الألوان التي حصلنا عليه سابقًا ثم حدّد جميع المربعات ثم اضغط على أيقونة New الموجودة أسفل لوحة الفرش Brushes. حدّد خيار New Art Brush من نافذة الخيارات التي ستظهر. تأكّد من أن السهم المتّجه يمر عبر المربعات ثم اضغط OK لإنشاء فرشاة جديدة. اختر أداة القلم Pen tool لرسم مسار متعرج عبر التصميم. استمر بالضغط على Shift للمحافظة على زاوية الرسم 45 درجة. أضِف الفرشاة المنشأة حديثًا كحدود للمسار. حدّد هذا المسار ثم اذهب إلى القائمة: Effect > Stylize > Round Corners أدخل قيمة نصف القطر لنحو 1.5 إنش لتحوّل الزوايا الحادة إلى منحنية ناعمة. ارسم مسارين آخرين مع مراعاة استدارة الزوايا بنفس الطريقة السابقة. خفّف سماكة الحدود لإنشاء مسارات أنحف. لتحويل المسارات إلى أشكال جامدة وقابلة للتعديل حدّد كل مسار منها ثم اذهب إلى القائمة: Object > Expand Appearance استخدم أداة التحديد المباشر Direct Selection Tool لتعديل نهايات كل شريط من الشرائط الملونة بحيث تكون نهاياتها متفاوتة. استمر في الضغط على Shift أثناء ذلك للمحافظة على الزاوية 45 درجة. ارسم دائرة على لوح الرسم وأضِف لها حدودًا رقيقة. حاول أن تجعل سماكة حدود الدائرة مقاربة جدًّا لسماكة الشرائط الملونة. استخدم أداة التحديد المباشر Direct Selection Tool لحذف النقطة العلوية واليمنى وترك ربع دائرة مرسومة فقط. كبّر المنظور وطابق بين الشرائط المنحنية والشرائط المستقيمة. مدّد الحواف المستقيمة بعد الانحناء عبر متابعة المسار باستخدام أداة القلم Pen tool. يمكننا الحصول على تأثيرات رائعة عبر وصل الشرائط مختلفة السماكة مع تداخل الألوان التي تتدفق بسلاسة بين المسارات. ارسم دائرة صغيرة في مكان آخر على لوح الرسم ولوّنها بأحد ألوان مخطط ألوان التصميم. ارسم مربعًّا أكبر قليلًا بدون لون تعبئة حول الدائرة وحاذِ العنصرين بدقة. حدّدهما معًا واسحبهما إلى لوحة Swatches. استخدم فرشاة Blob brush لتعبئة مناطق محدّدة مغلقة ضمن التصميم يتم رسمها باستخدام أداة القلم ثم تتم التعبئة بلون النقش الذي أنشأناه للتو. هذا النقش (الدائرة) سيتكرر آليًّا ليملأ المنطقة المحدّدة. اضغط على الاختصار CMD+[ بشكل متكرر لإرسال هذا النقش تحت أشكال الشرائط الملونة. ارسم سلسلة من الدوائر الملونة على أحد نهايات التصميم ثم أدمجها معًا باستخدام أدوات Pathfinder. ارسم مستطيلًا رفيعًا طويلًا في مكان ما على لوح الرسم ثم ضاعفه عبر سحبه أثناء الضغط على ALT و Shift. اضغط على الاختصار CMD+D لتكرار العملية وإنشاء سلسلة من الخطوط. حدّد سلسلة المستطيلات التي رسمناها للتو ثم اذهب إلى القائمة: Object > Compound Path > Make هذا سيجعلها قابلة للاستخدام مع أدوات Pathfinder في الخطوة التالية. ارسم دائرة في مركز سلسلة المستطيلات ثم استخدم خيار التقاطع Intersect من لوحة Pathfinder لقص المستطيلات بحسب شكل الدائرة. استخدم نُسخًا من أشكال الدوائر المخطّطة لتزيين التصميم. عدّل في أماكن ترتيب هذه النُسخ واجعلها تقبع تحت أشكال التصميم عبر الاختصار CMD+[. ادرس التصميم من أجل المساحات الفارغة المتبقية واملأها باستخدام أشكال ورسومات مختلفة ومتنوعة. بعض الدوائر البسيطة المتداخلة من نفس اللون يمكن أن تُشكّل تأثيرات رائعة. إن التمسّك بألوان مخطط ألوان التصميم يسمح للعناصر المتماثلة باللون بالاندماج مع بعضها وخلق التوازن في التصميم مع ذات السلسلة من الألوان المتدفقة عبر كامل اللوح. وبعد الانتهاء من تصميم جميع الأشكال والزخرفة اجمعهم جميعًا في مجموعة Group واحدة. لا تنسَ أن تضغط على الاختصار CMD+Alt+2 لإلغاء قفل مستطيل الخلفية. أضِف مستطيلًا فارغًا فوق التصميم وحاذِه مركزيًّا إلى وسط لوح الرسم. حدّد مجموعة العناصر واذهب إلى القائمة: Object > Expand Appearance لتحويل باقي المسارات والحدود إلى عناصر. حدّد مجموعة العناصر والمستطيل الفارغ ثم اضغط على الخيار القطع Crop من لوحة Pathfinder لقص كل شيء إلى حجم المستطيل الفارغ. وبهذا ننتهي من تصميم خشبة لوح التزلج. ألصق التصميم داخل قالب مخصص لطابعتك لإنهاء العمل كملف جاهز للطباعة. في غضون ذلك يمكننا تطبيق نموذج التصميم باستخدام قالب لوح التزلج العملي المصمم بواسطة Nunosk8. ترجمة -وبتصرّف- للمقال: Create a Bright Vector Snowboard Design in Illustrator لصاحبه: Chris Spooner.

اتبع خطوات هذا الدرس خطوة خطوة لتتعلم كيفية تصميم فكتور شخصية حيوان الرنّة اللطيفة الصغيرة باستخدام برنامج إليستريتور. سنبدأ بإنشاء أساس الشخصية بالأشكال الأساسية ثم سنصمم التفاصيل الدقيقة من خلال التدرجات اللونية والتأثيرات. هذا هو الشكل النهائي للشخصية التي سنرسمها في هذا الدرس. إنّ الأشكال المستديرة والبسيطة تساعد على إظهار اللطافة بينما شكل الجسم الممتلئ ووقوف الشخصية على قدمين تساعد على تأمين الجاذبية لهذا التصميم الرائع. هناك ثلاث مراحل أساسية لعملية التصميم. أولًا سنقوم بتصميم الخطوط الأساسية للهيكل الأساسي للشخصية، وبعد الانتهاء من بناء جميع خطوط الشخصية التي تكوّن الأشكال الأساسية لها، عندها نستطيع تلوين هذه الأشكال. وأخيرًا سنقوم بإضافة المزيد من العمق والأبعاد للتصميم عبر إضافة التأثيرات والظلال والتدرجات اللونية. افتح برنامج أدوبي إليستريتور وارسم شكلًا بيضويًّا على لوح الرسم ليكون الجسم الرئيسي للشخصية. دع الألوان الافتراضية كما هي، لون التعبئة الأبيض والحدود السوداء. ارسم شكلًا بيضويًّا أصغر بقليل من الشكل الأول ومتداخلًا معه ليكون رقعة بطن الشخصية. انسخ CMD+C وألصق في المقدمة CMD+F نسخةً عن شكل الجسم الأساسي ثم أرسلها إلى المقدمة باستخدام الاختصار [+CMD+Shift. حدّد النسخة الجديدة مع الشكل الذي رسمناه للتو واستخدم خيار التقاطع Intersect من لوحة Pathfinder لإزالة الجزء الفائض خارج شكل الجسم الرئيسي. استمر بإضافة بعض الأشكال البيضويّة الصغيرة في اتجاهات مختلفة لرسم الرأس ومقدمة الفم. ابدأ بإضافة شكل بيضويّ أصغر لرسم الأذن، دوّره قليلًا. انسخ CMD+C وألصق في المقدمة CMD+F نسخة من الأذن ثم اذهب إلى القائمة: Object > Transform > Reflect لعكس نسخة الأذن. حدّد كلا الأذنين مع شكل الرأس ثم أدمجها معًا من خلال خيار الدمج Merge من لوحة Pathfinder. ارسم بعض الدوائر على منطقة الرأس لتقدّم العينين والأنف ثم أضف دائرة فوق أسفل منطقة مقدمة الفم. اصنع نسخة عن مقدمة الفم لتستخدمها كأداة مع لوحة Pathfinder لقص الدائرة الأخيرة التي رسمناها وكانت متداخلة مع مقدمة الفم. استخدم أداة فرشاة البقع Blob Brush tool لرسم فرعة من قرن الوعل. اصنع نسخة عنه ثم اذهب إلى القائمة: Object > Transform > Reflect ثم اجمع Group القرنين معًا. حدّد هذين القرنين والرأس ثم انقر نقرةً إضافيةً على الرأس لجعله العنصر المفتاح. استخدم لوحة المحاذاة Align لتوسيط العناصر. استخدم الاختصار ]+CMD+Shift لإرسال القرون خلف الرأس. ارسم في مكان آخر على لوح الرسم مستطيلًا مستدير الزوايا مع أقصى نصف قطر ممكن للزوايا. حدّد هذا الشكل الأخير ثم اذهب إلى القائمة: Object > Envelope Distort > Make with Warp في خيارات الانحناء Warp احنِ المستطيل لنحو 40% عموديًّا باستخدام أدوات القوس. أرسل الشكل خلف باقي الأشكال بالاختصار ]+CMD+Shift ثم ضعه في موضع الذراع. ارسم شكلًا بيضويًّا فوق الجزء السفلي من الذراع لتكون حافر الحيوان. اصنع نسخةً عن الذراع لتستخدمها كأداة مع لوحة Pathfinder لتتقاطع مع الشكل البيضوي الصغير كما في الصورة. اجمع Group الذراع مع الحافر الجديد في مجموعة واحدة ثم اصنع نسخة عنهما واعكسها وضعها في الجهة المقابلة من الجسم. اجمع الذراعين مع الحافرين ثم حاذِهما وسطيًّا بالنسبة للجسم. استخدم أداة المستطيل مستدير الزوايا لرسم الساقين. ارسم دائرتين أسفل الساقين لتكون الأقدام ثم استخدم أداة التحديد المباشر Direct Selection tool للتلاعب بالأشكال وتحريك النقطة السفلية من كل شكل للأعلى قليلًا لجعلها على شكل حافر. شخصية حيوان الرنّة تبدو بسيطة للغاية ومؤلّفة من مجموعة من الأشكال الأساسية فقط ولكن هذا سيتغيّر بمجرد إضافة الألوان إلى هذه الشخصية. اختر كل جزء من الشخصية بشكل فردي واستبدل لون التعبئة الأبيض والحدود السوداء ببعض ألوان التدرجات الدائرية. استخدم أداة التدرج اللوني Gradient tool لتصنع تمازجًا بين الإضاءة والظلال. هذا التغيير في الألوان سيعطي الانطباع بأن التصميم ثلاثي الأبعاد. استخدم لون البيج الفاتح لمقدمة الفم ومنطقة البطن حتى تُشكّل تباينًا مع لون الفرو الداكن وطبعًا لوّن الأنف باللون الأحمر الفاتح. مصادر الضوء غالبًا ما تأتي من الأعلى لذلك تأكّد من جهة تمرير التدرج اللوني ليكون اللون الفاتح في الأعلى ما يترك اللون الداكن أسفل الشكل. يمكن تمييز حيوان الرنّة الآن بوضوح من خلال الألوان التي تكسو الشخصية ولكن التصميم لا يزال يبدو بدائيًّا بعض الشيء. لذا سنضيف القليل من تأثيرات الإضاءة والظلال لجعل الشخصية أكثر حيوية. ارسم المزيد من الأشكال البيضويّة حول العينين وداخل الأذنين. اجعل هذه الأشكال الجديدة بتدرج لوني من اللون البني الداكن أكثر إلى الشفافية. هذه التدرجات تعطي الانطباع بالبروز والضمور في أجزاء الشخصيّة عبر استخدام اللون الداكن في أعلى التدرج والذي يشبه الظلال في الحياة الواقعيّة. حدّد شكل الجسم الرئيسي واذهب إلى القائمة: Effect > Stylize > Inner Glow حافظ على الإعدادات الافتراضية عبر الإبقاء على الخيار Screen واللون الأبيض ولكن غيّر مستوى الظهور opacity إلى 30% وعدّل قيمة التمويه إلى 5mm. استمر في تحديد باقي أشكال الجسم البنّية وأضف تأثير التوهّج الداخلي ذاته. على الأجزاء الأصغر كالرأس والذراعين استخدم قيمة أقل من التمويه كقيمة 3mm مثلًا. أضف تأثير التوهّج الداخلي إلى الأنف ثم أضف إليه بعض الظلال لمنحه الانطباع ثلاثي الأبعاد. حدّد قيمة opacity عند 30% والمحور X عند الصفر والمحور Y ومستوى التمويه عند 1mm. امنح رقعة البطن تأثير ظلال ناعمة ولكن هذه المرة فلتكن قيمة المحور Y عند -2mm ومستوى التمويه عند 2mm. طبّق تأثير التوهج الداخلي على جميع الأجزاء الرمادية من الجسم كالقرون والحوافر مع تحديد الخيار Multiply واللون الأسود هذه المرة. اصنع نسخة عن أحد القرون ثم ارسم شكلًا بيضويًّا فوق الشكل المنسوخ بحيث يمر طرف الشكل البيضوي على امتداد طول القرن. استخدم خيار الطرح Subtract من لوحة Pathfinder لقص الشكل من القرن المنسوخ ثم لوّن الشكل الناتج باللون الأسود واجعل مستوى الظهور opacity عند 20%. ارسم دائرتين مختلفتي القياس فوق الأنف لتطبيق تأثير لمعان الإضاءة. لوّن هذه الدوائر باللون الأبيض واجعل مستوى الظهور opacity عند 20%. نفّذ ذات العملية السابقة التي قمنا بها مع القرن على جميع الحوافر بحيث تجعل لون الظلال الداكن على الجزء الأسفل من الحوافر. هذه الإضافات الأخيرة من التوهج الداخلي وتأثيرات الظلال منحت التصميم أبعادًا وعمقًا إضافيًّا. المزيد من الظلال وتسليط الإضاءة منح الشخصية بعض الواقعية حتى وإن كانت مصمّمة بالأشكال الأساسية فقط كالسيد حيوان الرنّة هنا. ترجمة -وبتصرّف- للمقال: Create a Cute Vector Reindeer Character in Illustrator لصاحبه: Chris Spooner.

انضمّوا إلي في هذه المحاولة الصغيرة لإنشاء علامة تجارية مؤهّلة وبارزة لشكل رأس أسد مُصمّم كشعار فكتور بالكامل باستخدام برنامج إليستريتور. وسوف نتعلّم أيضًا كيفية تخصيص خطٍّ مدهش بالفعل وجعله مترابطًا كليًّا مع تصميم شعارنا. الإلهام لقد كنتُ أعبثّ في الإليستريتور وقطعة من الورق في محاولة لتصميم رسم لطيف المظهر لأسد. فخطرت لي فكرة في لحظة بأن أقدّم درسًا تعليميًّا لكم يا أصدقائي حول تصميم شعار بسيط. وهذه هي الصورة التي سنقوم بتصميمها في هذا الدرس. الدرس سنبدأ الآن بفتح برنامج إليستريتور. في كثير من التصاميم البسيطة لسنا مضطرين للقيام برسم التصميم المبدئي أو المخطط الأساسي على ورقة قبل البدء بالتصميم على برنامج إليستريتور، بما أن التصميم بسيط وغير معقّد فمن الأفضل تصميمه مباشرة على برنامج إليستريتور بدلًا من إضاعة الوقت على المسودات. لهذا يجب علينا التركيز على إليستريتور وحده. الخطوة 1 افتح ملفًّا جديدًا في إليستريتور واختر الأبعاد التي تناسبك فهي غير مهمة في الواقع. اختر أداة الدائرة Ellipse Tool عبر الضغط على مفتاح L وارسم شكلًا بيضويًّا معقولًا شبيهًا بالصورة في الأعلى. الخطوة 2 ارسم دائرة أخرى في مكان آخر على لوح الرسم واسحب النقطة اليمنى إلى اليمين باستخدام أداة التحديد المباشر Direct Selection tool. أضِف هذا الشكل إلى لوحة الفرش Brush palette كفرشاة جديدة واختر خيارات Art Brush. وتأكّد من صحة اتجاه الفرشاة. الخطوة 3 اضغط B لاختيار أداة الفرشاة Brush tool لرسم خُصل رفيعة من الفرو حول رأس الأسد. لا تقلق حيال المناطق الداخلية للأشكال، إنما ركّز فقط على إنشاء الخطوط الجديدة. الخطوة 4 عند الانتهاء من إضافة حدود الفرشاة قم بتحديدها جميعًا ثم اذهب إلى القائمة: Object > Expand Appearance لتحويلها جميعًا إلى أشكال جامدة. حدّدها جميعًا مجدّدًا مع الشكل البيضوي في الأسفل ثم اختر Unite من لوحة Pathfinder. الخطوة 5 لعلّ هذا هو الجزء الأصعب من الدرس حيث سيتم تحديد أساس وجه الأسد في هذه الخطوة. وقد ترتكب الكثير من الأخطاء أثناء محاولتك رسم هذا الجزء، لذلك أنصحك باستخدام مسودّة لإنشاء الشكل الدقيق الذي تريده. التقنية المستخدمة هنا هي رسم نصف وجه الأسد ثم تطبيق خيارات التناظر لإكمال شكل الوجه. استخدم أداة القلم Pen Tool وابدأ بالرسم ثم لوّن الشكل باستخدام اللون #F5F5DC. الخطوة 6 بعد الانتهاء من رسم الشكل الصحيح انسخه وألصقه باستخدام Ctrl+C و Ctrl+F. حدّد هذا العنصر ثم اعكسه بالضغط عليه بالزر الأيمن ثم اختيار القائمة: Transform > Reflect ثم اختر الخيار العمودي Vertical في النافذة التي ستظهر ثم اضغط OK. كل ما تبقى علينا فعله هو محاذاة هذا العنصر مع العنصر الآخر وتوحيد هذين العنصرين عبر تحديدهما ثم اختيار Unite من لوحة Pathfinder. الخطوة 7 اختر أداة القلم Pen Tool وابدأ برسم الخطوط الخارجية لإحدى العينين ولوّنها باللون #DCDEBF. الخطوة 8 استخدم أداة الدائرة Ellipse Tool لرسم دائرة مثالية عبر الضغط على مفتاح Shift أثناء الرسم. ضعها في موقع مشابه لما في الصورة في الأعلى. الخطوة 9 حدّد الدائرة والشكل المحيط بها وانسخهما ثم ألصقهما عبر Ctrl+C و Ctrl+F. حدّد النسخ الجديدة واعكسها عبر القائمة من الزر الأيمن Transform > Reflect. ثم اختر الخيار العمودي Vertical من النافذة المنبثقة ثم اضغط OK. كل ما تبقى عليك القيام به هو محاذاتهما مع بعضها البعض. يمكن محاذاتهما مع التصميم ككل عبر جمع Group العينين وتوسيطها بالنسبة إلى لوح الرسم للمحافظة على التناظر. الخطوة 10 استخدم سلسلة من الدوائر لرسم شوارب الأسد. أعطِ هذه الأشكال ذات اللون المستَخدم في عرف الأسد. الخطوة 11 استخدم أداة القلم Pen Tool لرسم نصف شكل الجزء السفلي من فم الأسد. والآن استخدم ذات التقنية التي استخدمتها في الخطوات السابقة وانسخ وألصق نسخة من الشكل ثم اعكسها وحاذِها مع الشكل الأساسي ثم أدمج الشكلين معًا. لوّن الشكل النهائي باللون المستخدم في الوجه. الخطوة 12 لكسر عملية التناظر التي طبّقناها طوال الوقت استخدم أداة التحديد المباشر Direct Selection Tool ثم عدّل مواقع نقاط الجزء الأيمن من شكل الفم السفلي. الخطوة 13 من جديد استخدم أداة القلم لرسم شبه منحرف مستدير الزوايا وخصلتي فراء واقعيتين أعلى الشكل. حدّد كلا الشكلين ثم طبّق Minus Front من لوحة Pathfinder. الخطوة 14 اصنع نسخةً عن الشكل واعكسها ثم ضعها في الجهة اليمنى من وجه الأسد. الخطوة 15 لقد انتهينا من تصميم شكل العلامة التجارية وسنبدأ العمل على تصميم الخط المناسب لشعارنا. سنستخدم خط Banana Brick Font لصاحبه Artmaker. بعد الانتهاء من تحميله وتثبيته على حاسوبك اكتب كلمة ROAR بالأحرف الكبيرة باستخدام هذا الخط. الخطوة 16 بعد الانتهاء من الكتابة حدّد النص الذي كتبته ثم قم بتوسيعه عبر الاختصار Ctrl+Shift+O من لوحة المفاتيح. الخطوة 17 لملء الشقوق التي تجعل من هذا الخط فريدًا من نوعه ولكن غير لائقة في هذه الحالة لهذا الشعار سنستخدم بعض الأشكال المستطيلة التي سنقوم بمحاذاتها جنبًا إلى جنب مع الجوانب الداخلية للحروف ثم أدمج النص مع هذه الأشكال باستخدام لوحة Pathfinder. الخطوة 18 قد نضطر لاستخدام أداة التحديد المباشر Direct Selection Tool لتصحيح أية بقايا أو نقاط غير مرغوبة. لا تنسَ أن تكمل الأشكال ذات الخطوط والمسارات المفتوحة باستخدام أداة القلم Pen Tool. الخطوة 19 آخر الشقوق على حرفي R يجب أن تزال باستخدام أداة التحديد المباشر لتحريك النقطة للأعلى حتى تتداخل مع الخط في الأعلى. احذف النقطة الإضافية لليمين وأغلق العنصر باستخدام أداة القلم. الخطوة 20 والآن وبعد أن قمنا بتنظيف الخط استخدم أداة التحديد المباشر لتحديد كافة النقاط التي في الأعلى ثم اضغط على Convert selected anchor points to smooth من شريط الأدوات العلوي. الخطوة 21 حدّد النقاط السفلية للنص ثم زِد حجم أرجل الحروف لنحو 2px لجعل الحروف قابلة أكثر للتمييز. سيتوجب عليك أن تشمل النقطة الداخلية السفلية من حرف O والمحافظة عليها موحدة. عند هذه النقطة ستقوم بتتبع مسارات خطوط النص يدويًّا للتأكد من عدم وجود أي تلامس بين الخطوط الخارجية للأحرف. الخطوة 23 أخيرًا استخدم أداة المستطيل Rectangle Tool لرسم مربّع مثالي عبر الضغط على مفتاح Shift أثناء سحب الشكل. حاذِه مع أسفل حروف النص ثم اجعل الزوايا العلوية مستديرة لمنحه ذات المظهر للحروف. النتيجة النهائية أتمنى أن تكونوا قد استمتعتم في هذا الدرس وتعلمتم شيئًا مفيدًا أو أكثر أثناء إنشاء شعار. يمكنكم الحصول على ملف الدرس بصيغة EPS من خلال التوجه إلى الصفحة الأصلية للدرس. ترجمة -وبتصرّف- للمقال: How to create a Lion inspired vector logo design in Illustrator لصاحبه: Loic Ginet.

في هذا الدرس سنتعلم كيفية تصميم أيقونات خطّية بخطوط فكتور وباستخدام الأشكال الأساسية في برنامج إليستريتور لتستخدمها في واجهة الموقع أو على حاسوبك أو حتى في هاتفك المحمول. سنبدأ بتصميم أيقونة كاميرا رقمية. افتح برنامج إليستريتور ثم ابدأ ملفًّا جديدًا واستخدم أداة المستطيل Rectangle Tool لرسم مستطيل. ستلاحظ في هذا الدرس أننا لن نستخدم أبعادًا محدّدة بل سنعتمد على الرؤية الفنّية في التصميم ولكن بإمكانك التقيد بأبعاد محددة. ولاختصار الوقت قمتُ بجعل لون الحدود بلون معين وأزلت لون التعبئة. استخدم أداة التحديد Selection Tool وانقر على دائرة الزوايا ثم اسحبها لتجعل زوايا المستطيل منحنية. استخدم أداة الدائرة Circle Tool لرسم دائرة وحتى تحصل على الدائرة بشكل صحيح اضغط على مفتاحي Alt و Shift معًا أثناء رسم الدائرة حيث ستحافظ على مركزيّة الرسم وعلى أبعاد الدائرة الصحيحة. استخدم الأدلّة الذكية لتساعدك في هذا التصميم. ارسم دائرة أخرى بذات الطريقة الأولى مع البدء من مركز الدائرة القديمة واجعل الدائرة الجديدة أصغر بقليل. كرّر ذات العملية ولكن هذه المرّة ارسم دائرة بنصف حجم الدائرة السابقة. استخدم أداة الخط Line Tool لرسم خط قُطري ومع الاستعانة بالأدلّة الذكية لن يكون ذلك صعبًا. سيُمثّل هذا الشكل شكل العدسة المغلقة للكاميرا الرقمية. استخدم أداة المستطيل مستدير الزوايا Rounded Rectangle Tool لرسم فتحة الإضاءة الفورية (الفلاش) واجعل الزوايا بنصف قطر صغير وذلك عبر استخدام مفاتيح الأسهم أثناء سحب الفأرة ورسم الشكل. ارسم دائرةً صغيرةً تعادل بحجمها ارتفاع المستطيل الصغير المجاور وسنقوم بذلك بمساعدة الأدلّة الذكيّة مجددًا. ارسم مستطيلًا مستدير الزوايا في القسم العلوي الأيسر من الكاميرا بحيث يكون نصفه ضمن جسم الكاميرا والآخر خارجها. ارسم مربّعًا صغيرًا مستدير الزوايا بنفس ارتفاع المستطيل المجاور. اجعل لون تعبئة جسم الكاميرا بالأبيض ثم حدّد المستطيل والمربّع الصغير الخارجين من جسم الكاميرا وأرسلهما للخلف بالاختصار CMD+Shift+[. ارسم مستطيلًا صغيرًا في الركن الأيسر السفلي من الكاميرا. انسخ هذا المستطيل مرتين عبر Ctrl+C و Ctrl+F وضع النسختين على نفس المحور العمودي للشكل الأصلي. ارسم دائرةً صغيرةً يبلغ قطرها ارتفاع المستطيل الصغير الذي رسمناه للتو وباستخدام الأدلة الذكية ضع الدائرة بحيث يكون نصفها خارج المستطيل. انسخ الدائرة بذات الطريقة التي نسخنا فيها المستطيلات الصغيرة. حدّد جميع المستطيلات الصغيرة الثلاث والدوائر الصغيرة الثلاث أيضًا واختر الخيار Merge من لوحة Pathfinder لدمج جميع هذه الأشكال معًا. وبهذا نكون قد انتهينا من تصميم شكل الكاميرا الرقمية. والآن سنتجه لتصميم شكل آخر وهو القلم الذي سيرمز إلى المقالات أو الدروس. ارسم مستطيلًا نحيفًا بارتفاع كبير (استخدمتُ هنا لونًا مغايرًا وبإمكانك اختيار الألوان التي تناسبك). انسخ Ctrl+C وألصق في المقدمة Ctrl+F هذا المستطيل مرتين وحرك النسختين لتصطف جميع المستطيلات بجوار بعضها البعض. ارسم مستطيلًا مستدير الزوايا عرضيًا في الجزء العلوي من المستطيلات الثلاثة وليكن نصف قطر زوايا المستطيل صغيرًا. ارسم مستطيلًا آخر مستدير الزوايا وهذه المرة فليكن نصف قطر الزوايا كبيرًا واجعل نصفه السفلي يغطي المستطيل العرضي السابق ثم أرسل هذا الشكل للأسفل باستخدام الاختصار CMD+Shift+[. استخدم أداة القلم Pen Tool لرسم مثلّث يُشكّل رأس القلم وللحصول على مثلث مثالي استخدم الأدلة الذكية لمساعدتك على تحقيق الأبعاد المثالية لهذا المثلث (لا أنفك أذكر استخدام الأدلّة الذكية في كل مرّة ولكن استخدامها في الرسم اليدوي وبدون التقيّد بأبعاد محددة يسهّل عملية التصميم بشكل مذهل). ارسم دائرةً متوسطة الحجم مركزها هو نقطة رأس المثلث السفلي. ضاعف شكل المثلث ثم حدّده مع شكل الدائرة واستخدم الخيار Intersect من لوحة Pathfinder لقص الجزء المشترك بين الشكلين. وهكذا سيبدو القلم بعد الانتهاء من رسمه. حدّد كل أشكال القلم ثم دوّره باستخدام لوحة Transform بزاوية 45- درجة. هذا هو الشكل النهائي للقلم. والآن سنرسم أيقونة سنجعلها تبدو كشخصين للدلالة على الجمع وسنغيّر لون الخط إلى أخضر. ابدأ برسم مثلث كبير باستخدام أداة المضلعات Polygon Tool واجعل قاعدته للأسفل. استخدم أداة الدائرة مع الضغط على مفتاحي ALT و Shift لرسم دائرة مركزها رأس المثلث. ارسم دائرةً أخرى أكبر قليلًا من الدائرة الأولى تتشاركان ذات المركز. حدّد الدائرة الكبيرة والمثلث ثم انقر خيار Minus Front من لوحة Pathfinder لإزالة مساحة الدائرة المتداخلة مع المثلث من المثلث. حدّد هذا الشكل مع الدائرة ثم انسخ Ctrl+C ثم ألصق في المقدمة Ctrl+F ثم حرّكها لليسار قليلًا وبعدها صغّر حجمها قليلًا. انسخ الدائرة الكبيرة مجدّدًا ثم ألصقها في المكان في المقدمة ثم كبّرها بشكل طفيف مع استخدام مفتاحي ALT و Shift للمحافظة على موقع مركز الدائرة ونسبة الأبعاد. حدّد الدائرة الكبيرة الجديدة والدائرة الصغيرة على اليسار ثم استخدم Minus Back من لوحة Pathfinder لتقص شكل الدائرة الكبيرة من الصغيرة. كرّر ذات العملية مع شكل أعلى الجسم الكبير من نسخ ولصق وتكبير. مجدّدًا كرّر عملية تحديد شكلَي الأجسام واذهب إلى الأمر Minus Back من Pathfinder وذلك لقص الأشكال من بعضها. وبهذا يصبح هذا الشكل جاهزًا للاستخدام. لقد تعلمت في هذا الدرس الطريقة الأساسية لتصميم أيقونات خطيّة باستخدام الأشكال الأساسية وبإمكانك الآن تصميم أشكال أخرى من الأيقونات باستخدام ذات الأسلوب المستخدم في هذا الدرس. ويمكنك استخدام هذه الأشكال الآن كأيقونات بسهولة، يمكنك أن تجعل ألوان التعبئة بيضاء أو تتركها بدون تعبئة ومن الممكن حتى تغيير ألوان الخطوط ولا ننسى أنه بإمكاننا أن نعدّل حجم هذه الأشكال بدون أن تتشوّه لأنها ببساطة رسومات فكتور، كل ما عليك القيام به الآن هو أن تصدّر Export هذه الأشكال إلى صورة PNG وتستخدمها.

من أفضل استخدامات برنامج أدوبي اليستريتور هو تحويل الرسومات اليدوية أو المسودات إلى رسومات حيوية. فمن الرائع أن ترى أفكارك تتحول إلى حقيقة عبر عمل متقن وألوان واضحة، إلا أن النتيجة في بعض الأحيان تكون مخيبة للآمال عندما نحصل على رسمة فيكتور vector ليست كالتي كنا نتوقعها، لذا سنحاول تتبع هذه الخطوات العملية واحدة تلو الأخرى لنكتشف بعض التقنيات البسيطة والتي ستمنح عملنا مظهرا رائعا. العمل الفني الذي سنقوم به في هذا الدرس هو رسم خوذة والتي قررت بشكل عشوائي رسمها على ورقة هذا الصباح فبدأت ذلك باستخدام وسائل تقليدية من ورقة وقلم. وهي حقا أفضل طريقة لعمل تصور مبدئي للرسمة التي نريد عملها، حيث سيكون من السهل أن تجسد فكرتك أو رسمتك باستخدام قلم مجاني والتحكم به باستخدام أداة رقمية وهي الفأرة. رسم السكتش SKETCH نقوم بفتح برنامج أدوبي اليستريتور ونختار: File > Place لجلب ملف السكتش، بعدها نحدد قيمة Opacity بـ: 20% ثم نستعمل الاختصار CMD+2 لقفله وتثبيته في مكانه حتى لا نحدده دون قصد. نبدأ عملية الرسم باستخدام الأشكال الهندسية كلما استطعنا ذلك، حيث يمكن استخدام الدائرة لرسم الخطوط العلوية للخوذة كما في الصورة ولأننا لا نحتاج للدائرة كلها نقوم بقصّها باستخدام الأداة Scissors tool وحذف الجزء الزائد. ننسخ الشكل (CMD+C) ونضع النسخة في الواجهة (CMD+F) ثم نضغط على alt+shift لتكبير الشكل قليلا. نقوم بالتعديل على الحواف باستخدام أداة المقص Scissors tool ونحاول أن نجعلها تتطابق مع رسمة السكتش SKETCH. نستخدم أداة القلم Pen tool لإكمال المسارات التي تنقصنا، نضغط على النقطة المفتوحة التي توجد في نهاية المسار الأول، فنلاحظ ظهور خط صغير والذي يبين أن المسار مستمر. نضيف نقطة جديدة على المسار الثاني للربط بين المسارين كما يظهر في الصورة: نكمل رسم بقية عناصر السكتش باستخدام أداة القلم Pen tool. الطريقة التي أفضلها هي الضغط على مساحة العمل ثم سحب المسار المنحني، بعدها نضغط على النقطة التي توجد في نهاية المسار لتحويل نقطة الارتكاز ثم نحذف مؤشر bezier handle ....قبل إكمال المسار. حيث أن ذلك سيسمح لنا بإضافة خطوط مستقيمة أو منحنية دون أن يكون هناك bezier handle فيؤثر سلبا عليه. نكمل رسم بقية الستكش باستخدام الكثير من المسارات، بعض المسارات ستنتج عنها الأشكال كاملة، في حين أن بعض نقاط النهاية للمسارات ستحتاج لربطها مع بقية المسارات الموجودة. نضغط على CMD+Alt+2 لإزالة القفل على السكتش ونقوم بسحبه إلى الجانب الآخر لرؤية نتيجة عملنا منفردة . يبدو الشكل الناتج جميل ونظيف مقارنة مع الرسم التقريبي، لكنه قد يكون مملا قليلا جعل التصميم يبدو طبيعياإن الفتاح الرئيسي الذي يجعل من الرسومات الرقمية تبدو طبيعية هو محاكاة جميع التفاصيل الصغيرة المتعلقة بالخطوط وأحجامها حتى تظهر كما لو أنها رُسمت بفرشاة حقيقية. هناك طرق كثيرة لعمل ذلك كاستخدام فرش الفكتور vector brushes أو رسم المساحات السلبية يدويا، إلا أن الخطوات القادمة التي سأستعرضها هي الطريقة المفضلة لدي. نحدد جميع المسارات التي قمنا بعملها في تصميمنا ثم نزيد من قيمة stroke لتعزيز حجم الخطوط. نختار: Object > Expand ثم نحدد خصائص حدود التصميم option Stroke، و نضغط على زر موافق لتحويل جميع الحدود إلى شكل ثابت. نختار أداة التحديد المباشر Direct Selection tool ونبدأ بتعديل النقاط حتى نغير من سُمك الخطوط في الأماكن الرئيسية للتصميم وذلك لمحاكاة الفرشاة brush والتي تتميز بخط يندرج من السمك الغليظ إلى السمك الرقيق. أحينا نجد أن عملية تكبير الأشكال ينتج عنها جزء منه يتكون من عدة نقاط مما يؤثر على تناغم الشكل، فنحدد كل تلك النقاط الموجودة في الزاوية للتأكد من استمرارية المسار ونقوم بتنعيمها. هذه التقنية البسيطة كفيلة بتحويل رسمة الفيكتور vector illustration، حيث أنها تضيف ديناميكية أكثر عليه مقارنة بالخط ذو السمك الواحد. تلوين الرسمةيوجد أيضا الكثير من الطرق لتلوين الرسمة التي قمنا بعملها فأداة Live Paint تعتبر خيارا جيدا، إلا أن الخطوات التي سنتبعهما ستعطينا مرونة أكثر كما أنها تُبقى اللون منفصل عن الشّكل. نقوم بعمل طبقة جديدة ونضعها أسفل طبقة الرسمة الأصلية ثم نضغط على رمز القفل الخاص بها(طبقة الرسمة) وذلك تجنبا لتحديد عناصرها. نحدد لونا معينا من لوحة النماذج swatches palette ثم نقوم بتلوين المنطقة التي اخترناها وذلك باستخدام أداة القلم Pen tool. مع التأكد من أننا لا نتعدى الخطوط السوداء التي قمنا بعملها في الخطوات السابقة. نحدد جميع الأجزاء التي تكون فردية ثم نقوم بتعبئتها بلون يكون متناسقا مع بقية الألوان، لكن قد نجد أحيانا أنه من السهل اختيار التعبئة اللونية و تحديد قيمة stroke أثناء الرسم، مما يسمح لنا من متابعة تقدمنا أثناء الرسم . أنهينا تلوين تصميمنا لكنه لا يزال مسطحا ومملا قليلا. تظليل الرسمةالاستعانة بقليل من الظلال هو ما سيمنح التصميم الحياة، حتى إذا نسينا تلك القواعد الفنية الهامة، فإن إضافة بعض الإضاءة والظلال العشوائية سيحول العمل الذي نقوم به إلى عمل فني. نبدأ بإضافة قليل من الإضاءة، فنحدد أداة القلم Pen tool ونختار اللون الأبيض ونبدأ بالرسم على المساحة التي نحتاج إلى إضافة بعض الإضاءة عليها، ثم نتأكد بأن الخط الذي نستخدمه ناعما. نقوم بتغيير نمط شكل الإضاءة إلى Soft Light حتى نتمكن من تفتيح اللون الأساسي للشكل. في الجهة المقابلة نقوم بعمل قليل من الظلال، ونستخدم اللون الأسود ثم نخفض قيمة Transparency إلى 40 بالمئة. الشيء الجميل في هذه الطريقة هو أن الأشكال البيضاء والسوداء ستخلق تدرجات داكنة وفاتحة من اللون الأساسي بشكل تلقائي كما أنه لا يهم على أي جزء من الرسمة نقوم بتطبيقها. أنهينا من تصميم الخوذة وذلك باستخدام أشكال بسيطة، كما يمكننا أيضا الاستعانة بأداة Pathfinder لتجميع بعض من تلك الأشكال. إنهاء الرسمةمجموعة التقنيات التي قمنا باستخدامها جعلتنا نضيف الحياة لرسمة الاسكتش حيث أن المفتاح الأساسي هو استخدام خطوط مختلفة الحجم بالإضافة إلى الاستعانة بقليل من التظليل أما بدون استخدام ما ذكرناه سيجعله سطحي وبلا حياة. ترجمة -وبتصرف- للمقال Illustrator Techniques to Turn a Sketch into Vector Art لصاحبه Chris Spooner.

في هذا الدرس سنتعلم كيفية رسم شخصية وحش لطيفة برسومات متجهة. هذا هو ما سنرسمه، أو لنقل، من سنصنعه. ستساعدنا أشكال الـIllustrator البسيطة في إضفاء مظهر نظيف ومشابه للرسومات الكرتونية على وحشنا، مما يضيف أيضًا المزيد من اللطف لشخصيتها. لنبدأ برسم جسم وحشنا، افتح برنامج Illustrator وأنشئ طبقة جديدة، ارسم باستخدام أداة الشكل البيضاوي Ellipse Tool شكلاً بيضاويًا بقياسات 165x185px، ثم استخدم أداة التحديد المباشر Direct Selection Tool لتسحب النقطة السفلية إلى الأعلى 80px (تستطيع تسريع هذه العملية بالضغط المستمر على SHIFT واستخدام السهم العلوي) وتحصل بهذا على انحناء داخليّ أنيق. ارسم دائرة بقياسات 155x155px لتشكّل الفك، اجعل ترتيب هذه الدائرة المرئي في آخر الوثيقة (باستخدام SHIFT+CTRL+[ أو SHIFT+CMD+[ إذا كنت تستعمل Mac) وحاذِها أفقيًّا إلى مركز الشكل البيضاوي وعموديًا إلى أعلاه باستخدام قائمة Align. أظن أن الفك السفلي سيبدو أفضل إن رفعناه قليلاً، اسحب الدائرة إلى الأعلى لمسافة تقارب 5px باستخدام أداة التحديد Selection Tool أو حتى تكون راضيًا عن المظهر العام الناتج. سنحتاج إلى مسح التداخل بين الشكلين، اختر جميع أشكال الجسم واستخدم أداة بناء الأشكال Shape Builder Tool، اضغط دون إفلات زر ALT (يفترض أن تتحول إشارة الجمع الظاهرة أسفل المؤشر إلى إشارة السالب) واضغط على منطقة التداخل أعلى الأشكال التي رسمناها لحذفها. إذا كنت تمتلك إصدار CS4 أو أقدم فإنك ستحتاج إلى استخدام زر التقسيم Divide من قائمة الـPathfinder قبل حذف التداخل. ستحتاج بعدها إلى دمج شكل الجسم العلوّي باستخدام زر الدمج Unite بما أنها قد قُسّمت في الخطوة السابقة. لنبدأ الآن برسم العين، ارسم ثلاث دوائر (بقياسات 70x70px ،35x35px و 15x15px) ثم حاذها أفقيَّا ورأسيَّا إلى الوسط باستخدام قائمة Align. غيّر لون الدوائر ذات الحجم المتوسط إلى الأسود واجعلها بلا حد، سيسهّل هذا علينا معرفة ما نحاول الوصول إليه. اختر أصغر الدوائر الثلاثة وحرّكها إلى الأعلى واليمين حوالي 10px، ثم باستخدام قائمة Pathfinder اطرحها Subtract من الدائرة السوداء عبر الضغط على زر Minus Front. اجمع كل عناصر العين معًا (CTRL+G) ثم حاذها أفقيًّا إلى الوسط ورأسيًّا إلى أعلى جسم وحشنا. اسحب العين إلى الأسفل مسافةَ 20px أو حسب القدر الذي تجده مناسبًا. بما أن المفترض هو أن شخصية الوحش التي نرسمها أنثى، فسنحتاج إلى إعطائها بعض الرموش. ارسم مثلثًا (بقياسات 5x10px)، اضغط زر الفأرة اليمين واختر Transform > Transform Each من القائمة المنبثة (ALT+SHIFT+CTRL+D). غيّر قيمة Move الأفقية في صندوق الحوار إلى 10px ثم اضغط Copy. اضغط CTRL+D (CMD+D إذا كنت تستعمل حاسوب Mac) عدة مرات لتعيد عملية الـTransform حتى تحصل على ستة مثلثات متساوية المساحات اجمع المثلثات معًا ثم من قائمة Effect اختر Wrap ثم Arc. اضبط قيمة الانحناء الأفقي Horizontal Bend إلى 50% ثم اضغط على زر OK. حدّد الرموش واختر من قائمة Object خيار Expand Appearance. أخيرًا، حاذِ الرموش بحيث يصبح مكانهم فوق العين مباشرة. نحن الآن مستعدّون لإعطاء وحشنا قرونًا. ارسم دائرة (بقياسات 50x50px) واستخدم أداة التحديد المباشر Direct Selection Tool لسحب النقطة العلوية إلى الأعلى مسافةَ 50px، ثم اسحب النقطة اليمنى واليسرى إلى الأسفل مسافةَ 10px. اختر من قائمة Effect خيار Wrap ثم Arc مرة أخرى، لكننا هذه المرة سنضبط قيمة الانحناء الرأسي Vertical Bend إلى 25% قبل الضغط على OK. قم بعمل Expand للشكل باستخدام زر Expand Appearance من قائمة Object ثم أدرها بزاوية 15° عبر النقر بزر الفأرة الأيمن واختيار Transform من القائمة المنبثقة. أرسل القرن إلى خلفية الوثيقة قبل اختياره وباقي الوحش ومحاذاتهما إلى الأعلى رأسيَّا واليسار أفقيًّا باستخدام قائمة Align. اسحب القرن إلى اليمين مسافة 5px تقريبًا وإلى الأعلى مسافة 10px، أو حتى تقتنع بالمكان المناسب لها. لا نستطيع ترك مظهر أنثى الوحش التي رسمناها هكذا، إنها مائلة نوعًا ما، انسخ وألصق القرن في نفس المكان (CTRL+C ثم CTRL+F)، انقر بزر الفأرة اليمين على النسخة ثم اختر Transform وقم بالعكس من القائمة المنبثقة. تأكد أن محور العكس رأسي ثم اضغط OK. اجعل موضع القرن الجديد متناظرًا مع القرن الأول. ما رأيك بإعطاء الوحش الذي نرسمه أسنانًا؟ لن تكون مرعبة بدون أسنان، الوحوش الجميلة أيضًا ستحتاج إلى المقدرة على الخروج وإخافة البعض. هذه العمليّة ستكون مشابهة جدًا لعمليّة رسم القرون. ارسم دائرة (بقياسات 30x30px) واسحب النقطة السفلية هذه المرة إلى الأسفل مسافةَ 50px. قم بلوي السن باستخدام خيار Wrap من قائمة Effect، مع ضبط قيمة الانحناء الرأسي Vertical Bend إلى 25% قبل إجراء عملية Expand Appearance. حاذِ السن رأسيَّا إلى الأعلى وأفقيًّا إلى يسار الوحش باستخدام قائمة Align. بعدها، اسحب السن إلى الأسفل حوالي 55px وإلى اليسار ما يقارب 10px. انسخ وألصق السن في مكانه قبل عكسه رأسيَّا ووضعه في الجانب المقابل لفم الوحش. بعد تحديد الأسنان التي رسمناها انسخ الأسنان وألصقها في أماكنها قبل النقر بزر الفأرة اليمين واختيار إجراء Transform ثم Scale من النافذة المنبثقة. اضبط قيمة Uniform إلى 80% ثم اضغط OK. اجمع الأسنان معًا واجعلها أسفل فم الوحش وأعلى الفك السفلي (ستحتاج لعمل هذا إلى فك تجميع عناصر الجسم Ungroup أو النقر بالفأرة عدة مرات حتى يصبح شكل الرأس منعزلاً Isolated). أخلِ بعض المساحة بحيث لا تتلامس الأسنان (سيكون سحب السن الداخلي 5px كافيًا) ثم التأكد من أنهم متحاذون وسطيًّا مع جسم الوحش. نحن الآن مستعدون لرسم القدم. سنبدأ بالأصابع، ارسم دائرة (بمقاسات 20x20px) ثم استخدم أداة التحديد المباشر Direct Selection Tool لتسحب النقاط العلوية والسفلية إلى الأعلى مسافة 5px، بعدها، ارسم شكلاً بيضاويًا (بمقاسات 3x10px) ليكوّن ظفرًا وحاذه إلى الوسط أفقيًّا وأسفل الإصبع رأسيَّا قبل سحبه إلى الأسفل قليلاً (يفترض أن تفي مسافة 2px بالغرض). اصنع نسختين من الإصبع وضعها بجانب بعضهما البعض مع شيء من التداخل. اجعل ترتيب الإصبع الوسطى في مقدمة الوثيقة (بالضغط على SHIFT+CTRL+]) واسحبه إلى الأسفل مسافة 2px قبل تجميع Group الأصابع. لرسم القدم ارسم دائرة (بمقاسات 35x35px) واحذف نقطتها السفلية مستعملاً أداة التحديد المباشر Direct Selection Tool، لدمج Join النقطتين اليسرى واليمنى، حدد النقطتين وانقر بزر الفأرة اليمين ثم اضغط على الخيار Join من القائمة. قم بمحاذاة الأصابع إلى الوسط أفقيًّا وإلى أسفل القدم رأسيَّا قبل سحبها إلى الأسفل حوالي 10px. لرسم الساق ارسم مستطيلاً (بمقاسات 6x30px) وحاذه أفقيًّا إلى الوسط ورأسيَّا إلى أسفل القدم، اسحب الساق إلى الأعلى ما يقارب 20px ثم ادمجها مع القدم مستعملاً زر Unite من قائمة الـPathfinder واجمعها Group مع الأصابع. اجعل الساق في الجزء الخلفي من الوثيقة قبل محاذاتها إلى أسفل ويسار وحشنا، ثم اسحبها إلى الأسفل 40px وإلى اليمين 25px. انسخ وألصق الساق في مكانها واسحبها إلى اليمين مسافة 60px. اجمع الساقين معًا (Group) وتأكد من توسطهما جسم الوحش. كل ما تبقى لنا هو إضافة بعض الألوان والقليل من التفاصيل لوحشنا اللطيف الصغير. حالما تضيف الألوان زد من ثخانة الحد Stroke إلى 2px حتى تُظهر الحد الخارجي أكثر. وبالنسبة للتفاصيل، حدّد رأس الوحش واستعمل أداة الرسم الداخلي Draw Inside Tool لتضيف بعض الدوائر المنوّعة في في أطوال أقطارها واجعل لونها أغمق من لون الجسم. إذا كنت تستخدم برنامجًا من نسخ الـCS التي لا تحتوي أداة الرسم الداخلي (نسخة CS4 وما قبلها)، حدّد الدوائر وانقر بزر الفأرة اليمين ثم اختر Make Compound Path من القائمة المنبثقة. انسخ الرأس (CTRL+C) وألصقه، مستمرًا في تحديدها حدد الدوائر واضغط على زر القطع Intersect من قائمة الـPathfinder. ألصق الرأس خلف مكانه الأصلي (CTRL+F) وأعد ترتيبه بحيث يتموضع خلف العين. قد تحتاج إلى استخدام قائمة Stroke لتحاذي الحد خارجيًا كيلا تتداخل حواف الدوائر. لا بأس بهذا، إذا أردت اتباع القسم الإضافي في نهاية الدّرس فاستخدم هذه الطريقة عوضًا عن أداة الرسم الداخلي Draw Inside Tool. أخيرًا، أضف بعض التظليل للقرون، حدّد القرن الذي يقع على يسارك واضغط على زر Unite من قائمة Pathfinder (وهذا ضروري لأننا فصلنا تعبئة وحدّ القرن سابقًا أثناء إزاحة مظهر Expand appearance القرن). انسخ وألصق القرن في مكانه قبل تحريك النسخة إلى اليسار مسافة 10px. حدّد الشكلين معًا واختر من قائمة Pathfinder زر Minus Front. اضغط من لوحة المفاتيح على زرّي CTRL+F لتلصق القرن الأصلي في مكانه واضبط تموضع الطبقات حدّد تظليل القرن، احذف الحد وحول خيار دمجه Blending mode إلى Multiply مستعملاً قائمة Transparency. كرّر هذه العملية للقرن الآخر مع عكس الإجراءات التي اتخذتها بحيث تجعل النسخة الأخرى متجهة إلى اليسار لا اليمين. ألا يبدو وحشنا رائعًا؟ كل ما تبقى لك لتفعله هو إعطاؤها اسمًا وقصة شخصيّة. القسم الإضافي تود إضافة مظهر الزومبي إلى وحشنا اللطيف الصغير؟ حسنًا، أنت محق، سيكون هذا ممتعًا. أول ما يجب أن تقوم به هو تغيير ألوان الوحش، فاللون الزهري لا يناسب وحوش الزومبي عمومًا. والآن، دعنا نعمل على العين، فهي محببة زيادة عن اللزوم حاليًا، احذف بؤبؤ العين وارسم مستطيلاً دائريّ الزوايا (بمقاسات 35x5px) مع التفاف للزوايا مقداره يساوي 5px. انسخ وألصق المستطيل دائريّ الزوايا في مكانه قبل تدويره بزاوية 45° ودمج الأشكال باستعمال زر Unite من القائمة Pathfinder. أدِر الشكل المدموج بزاوية 45° وضعه في مركز عين الوحش. لنضف القليل من اللعاب. لا تشتهر وحوش الزومبي عادة بأدب تعاملهم الرفيع، ولا حرج ببعض قطرات اللعاب لذلك. استعمل أداة PenTool لترسم حد اللعاب الخارجي، مع تلطيف الزوايا الحادة مستعملاً ـSmooth Tool. حالما تكون راضيًا عن الشكل الذي رسمته، أعد ترتيب اللعاب إلى الوراء بحيث تصبح خلف الرأس والأسنان وأمام الفك السفلي. أزِل الحد الخارجي ولوّن اللعاب بلون يتناسق مع الجسم قبل تغيير خيار دمجه Blending mode إلى Multiply مع درجة 75% للعتامة مستعملاً قائمة Transparency. يبدو مظهر وحشنا مصقولاً بعض الشيء، لنعطه مظهرًا أكثر حدة. ارسم ثلاث دوائر (مقاساتها 25x25px) وضعها بجانب بعضها البعض مع شيء من التداخل قبل دمجهم مستعملاً زر Unite من القائمة Pathfinder. أدِر الأشكال المدمجة بزاوية -25° وحاذها أفقيًّا إلى اليسار ورأسيَّا إلى أسفل الوحش. اسحب الدوائر إلى اليسار بما يقارب 20px وإلى الأعلى حوالي 55px ثم احذفها من رأس الوحش مستعملاً زر Minus Front (كما ذكرنا سابقًا، ستحتاج إلى اتباع وسيلة الـPathfinder لرسم بقع الوحش، عوضًا عن استخدام أداة الرسم الداخلي Draw Inside Tool لتحصل على النتائج المرجوة). وبهذا نكون قد انتهينا، لقد أضفينا مظهر الزومبي إلى وحشنا. ترجمة -وبتصرّف- للمقال Create a cute vector monster in Illustrator لصاحبته Liz Canning.

عادة يتم عمل نمط التصميم Low Poly Art باستخدام تطبيقات ثلاثية الأبعاد كبرنامج Cinema 4D لكن يمكننا تنفيذ نفس النمط ويكون ثنائي الأبعاد باستخدام برنامج أدوبي اليستريتور Adobe Illustrator، تابع هذا الدرس لتتمكن من عمل تصميم جميل لجبل باستخدام Low Poly Art ومسارات الفيكتور vector paths. سنضيف أيضا بعض التدرجات اللونية لمحاكاة التأثير 3D، بعدها ننقل التصميم إلى برنامج الفوتوشوب Photoshop لإضافة بعض اللمعان عليه باستخدام خامات textures جميلة. هذه هي النتيجة النهائية التي سنحصل عليها حيث سنستخدم في البداية أدوات برنامج أدوبي اليستريتور Adobe Illustrator المخصصة لإنشاء فيكتور دقيق ثم ننقله إلى برنامج الفوتوشوب Photoshop لإضافة بعض الخامات textures والتي ستجعله أكثر حيوية. نقوم بفتح ملف جديد في برنامج اليستريتور Illustrator ونرسم مخطط لجبل باستخدام أداة القلم Pen tool، أثناء رسم الخطوط نضغط مرة واحدة على أداة القلم لتوليد خطوط مستقيمة بين النقاط أما في الجزء السفلي فنحاول أن نتبع مسارا منحنيا ليساعدنا على ظهوره بشكل 3D في وقت لاحق. نزيل التحديد عن المخطط الذي قمنا برسمه ثم نضيف خطوط متقاطعة عليه تمتد من الأعلى إلى الأسفل، بعدها نستخدم خطوط التوجيه الذكية (CMD+U) ليسهل علينا نزع snap النقاط الموجودة. نستمر في رسم المزيد من الخطوط المتقاطعة بين النقاط لتقسيم المخطط إلى قطع صغير كما يظهر في الصورة. في النهاية ستصبح الخطوط الجديدة قصيرة وبالتالي سنحصل على أشكال مضلعة أصغر، نحاول أن لا نبالغ في إضافة الكثير من التفاصيل للرسمة حتى لا تفقد قالب النمط "low poly". نحدد جميع الخطوط التي رسمناها لحد الآن ثم نضغط على الزر Divide من لوحة تحديد المسارات Pathfinder لتتقاطع الخطوط وينشأ لنا شكل واحد. نضغط على الزر الأيمن للفأرة ونختار فك التجميع Ungroup حتى نستطيع تحديد الأشكال الفردية التي تحصلنا عليها من لوحة تحديد المسارات Pathfinder كل على حدا. نرسم بعض المربعات ا(لتي سنستخدمها بشكل مؤقت) على جانب مساحة العمل ونملأها بتدرجات لونية مختلفة، بالنسبة لي فقد اخترت تدرجات اللون الأسود بين 70-90%، 60-80% و50-70% ثم تدرجات أخف بين 0-20% و10-30%. نضغط على المفتاح Shift ونحدد بعض القطع من مخطط الجبل بشكل عشوائي، ثم نستخدم أداة Eyedropper tool لتعبئة الأشكال المحددة بالتدرج اللوني الأول. نحدد بعض من الأشكال المتبقية ونطبق عليهم التدرج اللوني الثاني، ثم ننهي التعبئة باستخدام التدرج اللوني الفاتح. إذا كان هناك قطع متواجدة في نفس المساحة وملونة بنفس التدرج اللوني فيمكننا تعديلها واختيار تدرج لوني مختلف لخلق نوع من التباين. نستخدم التدرج اللوني الفاتح لعمل قمة ثلجية على الجبل، نلون الجبل بالتناوب بين التدرج اللوني الغامق والتدرج الفاتح لإضافة اختلاف في المظهر. استخدام التدرجات اللونية يساعدنا على التخلص من المظهر الثنائي الأبعاد المسطح للشكل، لكن في تصميمنا هذا فإن جميع التدرجات تتخذ نفس الاتجاه لذلك نستخدم أداة التدرج اللوني لتغيير اتجاه تعبئة كل شكل عشوائيا. تضيف التدرجات اللونية لخلق بعدا آخر للشكل، بعدها نأخذ شكل الفكتور الذي تحصلنا عليه إلى برنامج الفوتوشوب لإضافة بعض اللمسات النهائية. نقوم بلصق الرسم على ملف داخل برنامج الفوتوشوب، ونختار لون أزرق- رمادي غامق لملأ الخلفية. نرسم تحديد باستخدام أداة the Polygonal Lasso tool ثم نقوم بتعبئته بلون بني-بيج لتصميم مساحة أرض أسفل الجبل. نستخدم فرشاة كبيرة ناعمة لإضافة إضاءة بيضاء على طبقة جديدة نضعها فوق الخلفية لكن دون إضافتها على رسمة الجبل. نقوم بتغيير نمط طبقة الإضاءة من blending إلى Overlay حتى تمتزج الألوان وتخلق لنا توهجا أزرق حيوي. نضاعف طبقة رسمة الجبل ونلونها بالأسود ثم نضغط على CMD+T لتحويله، بعدها نحدد الخيار Distort حتى تمتد الرسمة وُتشكل لنا ظل طويل للجبل. نخفض من قيمة شفافية الظل إلى 10% ونضعه تحت طبقة رسمة الجبل الرئيسية. نفتح الخامة subtle grunge texture ونضعها في طبقة جديدة فوق تصميمنا، ثم نضيف الفلتر Sharpen مرة أو مرتين لإظهار التفاصيل الدقيقة. بعد تطبيق الخامة على التصميم نغير نمط الطبقة من blending إلى Color Burn لتركيبها مع الرسمة وخلق تأثير جميل، بعدها نخفض قيمة الشفافية إلى حوالي 35٪. نحدد الفرشاة Spraypaint-Brushes ونرش بعض البقع البيضاء في طبقة جديدة نضعها أسفل رسمة الجبل، نبقي الجزء الرئيسي من الفرشاة خلف الجبل لإضافة بعض الرش المضيئ على قمة الجبل ، نكرر نفس العملية مع اختيار اللون الأسود للجزء السفلي. الخامة التي قمنا بتطبيقها على التصميم باستخدام الفوتوشوب أضافت لها لمسة حيوية من خلال إزالة المظهر المسطح لرسمة الفيكتور، كما أن تأثير low poly في حد ذاته نمط رائع والذي يمكننا استخدامه لجميع أنواع التصاميم. ترجمة -وبتصرف- للدرس How To Create a Low Poly Art Mountain Illustration لصاحبه: Chris Spooner.

في الماضي كنتُ أحتفظ بأعمال الخامات textures لبرنامج فوتوشوب ولكن مؤخرًا بدأتُ باستخدام خامات الفكتور لإنشاء رسومات مهترئة مباشرة ببرنامج Adobe Illustrator. اتبع الخطوات في هذا الدرس لرسم مسدس فكتور مع الخامات. سنقوم برسم المنحنيات يدويًّا بأداة القلم لإنشاء أعمال خطيّة مميزة وتلوين الأشكال باستخدام أداة LivePaint واستخدام بعض خامات الفكتور لتحقيق المظهر النهائي الرائع. سنصمم مسدس الفكتور هذا بواسطة أشكال فكتور منحنية وألوان جامدة (ليست حيوية) وستساعد خامات الفكتور على إخفاء المظهر الرقمي المسطح للتصميم وإعطائه تأثيرات بنمط معين. سنرسم تصميمنا على صورة مسدس فردي حربي قديم من الغرب القديم. حمّل صورة المسدس من Wikimedia Commons على برنامج الإليستريتور. خفف مستوى الظهور للصورة opacity إلى 50% ثم اضغط CMD+2 للعمل داخل الصورة. استخدم أداة القلم Pen لرسم مسارات حدود إطار المسدس وقبضته مع ترك ماسورة المسدس حاليًا. انقر واسحب كل نقطة ثم انقر على النهاية المفتوحة لتعديل الانحناء قبل المتابعة للنقطة التالية في الرسم. استخدم المستطيل مستدير الزوايا لرسم الماسورة. اضبط نصف قطر الزوايا مع مفاتيح المؤشر قبل ترك زر الفأرة أثناء السحب والإفلات. استخدم أداة التحديد المباشر Direct Selection لتحديد وحذف النقطتين الأخيرتين. انقر واسحب كل نقطة من النقاط الأخيرة لتتداخل مع حدود الجسم الرئيسي للمسدس. ارسم مستطيل مستدير زوايا آخر ولكن هذه المرة احذف الحافة العليا بالإضافة إلى النقطتين الأخيرتين. قم بمحاذاة المستطيلين بدقة إلى حدود الأسطوانة. إن تفعيل الأدلّة الذكية Smart Guides بالضغط على CMD+U ستساعد كثيرًا لوضع الأشياء في الأماكن الصحيحة بدقة. ارسم دائرة تقريبية حول حدود القبة عند مؤخرة المسدس. اقطع المسار عند التقاطع مع مستطيلات الأسطوانة باستخدام أداة المقص Scissors واحذف النصف الأيمن الغير مطلوب في الرسم. ارسم قطع ناقص عند حدود المنطقة المجوفة من الأسطوانة ثم حدد واحذف النقطة اليمنى بواسطة أداة التحديد المباشر Direct Selection. استخدم أداة القلم لتحديد وفتح نهايات المسار ومتابعة رسم الخطوط حتى حافة شكل الأسطوانة. كرر العملية للتجويفين الآخرين وذلك للانتهاء من رسم منطقة الأسطوانة. أضف التفاصيل إلى المناطق الأخرى من الرسم بواسطة أداة القلم مع مراعاة اصطفاف نقاط البداية والنهاية مع حدود المسدس. اضغط CMD+Shift+2 لإلغاء قفل صورة الخلفية. انقر delete لحذف الخلفية من لوح الرسم ولرؤية خطوط الفكتور الأساسية التي قمنا برسمها. قم بتحديد جميع العناصر ثم اختر أداة LivePaint. انقر في أي مكان ضمن التحديد لتفعيل الأداة. اختر الألوان من لوح الألوان ثم انقر على الأشكال في منطقة الرسم بواسطة أداة LivePaint لتلوين كل منطقة. وبعد الانتهاء من تلوين كل الأقسام اذهب إلى القائمة: Object > Expand حدد الخيَار Object لتحويل العناصر إلى أشكال جامدة مجددًا. اضغط بالزر الأيمن ثم انقر Ungroup عدة مرّات حتى يصبح بالإمكان تحديد كل شكل على حدة. أضف حدودًا بقيمة 2pt إلى الإطار الرئيسي واختر المحاذاة إلى الداخل Align to Inside من لوحة الحدود Stroke. اذهب للقائمة: Object > Expand Appearance لتحويل الحدود إلى عناصر جامدة. بالزر الأيمن انقر Ungroup لتفكيك مجموعة العناصر ومن ثم احذف شكل الحدود. إن إزالة الحدود سيترك فراغًا بين الأشكال المختلفة مما يساعد على تباعد العناصر وتطبيق التأثيرات عليها. انسخ CMD+C وألصق في المقدمة CMD+F نسخة عن أشكال تجاويف الأسطوانة. غيّر اللون إلى الظل الأخف من الرمادي ثم قلّص الشكل لإعطائه تأثير الظلال والإضاءة. أنهِ عملية التلوين بإضافة بعض المستطيلات البسيطة لإضفاء منظر الإضاءة على الماسورة. استخدم الأدلة الذكية Smart Guides ليصبح اصطفاف الحواف سهلًا للغاية. حمّل وافتح مجموعة خامات Vector Bumper Pack وألصق هذه الخامة على لوح الرسم. حدد جميع العناصر ثم اضغط Shift مع النقر على الخامة لإزالتها من التحديد. انسخ وألصق في المقدمة نسخة عن المسدس ثم اختر خيَار الدمج Merge من لوحة Pathfinder لمزج جميع الأشكال المكررة معًا. بالزر الأيمن اختر Ungroup لتفكيك العناصر ثم أنشئ مسارًا مركبًا Compound Path بالضغط على الاختصار CMD+8. حدد المسار المركب للمسدس والخامة الفكتور ثم انقر خيَار Intersect من لوحة Pathfinder لقص الخامة بحسب حجم المسدس. غيّر لون تعبئة الخامة إلى اللون الأسود ثم غيّر خصائص المزج إلى Multiply وعدّل قيمة opacity إلى 30%. كرر العملية للخامة الثانية لإضافة مزيد من تفاصيل علامات الاهتراء إلى الرسم. ألصق عددًا من أشكال رذاذ الطلاء وضعها في أماكن مختلفة حول الرسم وبذلك تكون قطرات الرذاذ الرئيسية مبعثرة على المسدس. حدد العناصر مع إزالة الخامات من التحديد وأنشئ مسارًا مركبًّا آخر (Merge, Ungroup, CMD+8). انسخ المسار المركب وألصقه لنستخدمه مع خامة رذاذ الطلاء التالية ثم استخدم أداة Intersect لقص الخامة حسب حجم المسدس. بدّل ألوان هذه العناصر إلى الأسود وبدّل خصائص المزج إلى Multiply مع وضع قيمة 30% أيضًا لإنهاء رسم المسدس. الأشكال البسيطة تساعد على تصميم رسومات فكتور منمقة رائعة في حين أن تراكب الخامات على التصميم تضيف تأثير الاهتراء والقِدَم وتوفر لمسة من التظليل حيث أن بقع الخامات الداكنة تخفي مظهر الرسم المسطح للتصميم. ترجمة -وبتصرّف- للمقال: How To Create a Textured Vector Revolver Illustration لصاحبه Chris Spooner.

هل تريد تعلّم أساسيات Adobe Illustrator؟ في هذا الدرس سنستخدم الأدوات والتقنيات المختلفة لإنشاء شخصية رجل آلي. مع هذا الرجل الآلي سنستخدم العديد من الأشكال الأساسية ما يجعل هذا الدرس جيدًا للمبتدئين حتى يعتادوا البرنامج ويُحكِموا سيطرتهم على أدواته المختلفة. هذه هي شخصية الرجل الآلي الذي سنقوم بتصميمه في هذا الدرس. إنه مصنوع بشكل أساسي باستخدام الكثير من الأشكال الأساسية كالمستطيلات والدوائر ولكن الحدود المميزة والتدرّجات اللونية وانعكاس الإضاءة الخاص هو ما سيضفي الحيوية على التصميم. افتح البرنامج وابدأ ملفًا جديدًا. اختر أداة المستطيلات Rectangle tool وارسم أشكال الرأس الأساسية والهوائي. انتقل إلى أداة الدوائر Circle tool وارسم دوائر شكل الهوائي. اضغط CMD+Shift+[ مع تحديد الدائرة لإرسالها أسفل المستطيل. ارسم دائرة لشكل العين ثم اذهب للقائمة: Object > Path > Offset Path وأدخل القيمة 1.5mm في خيار Offset لإنشاء دائرة أكبر بقليل محاذية بشكل كامل للدائرة الأصلية. استخدم مزيجًا من الأشكال كالمستطيلات، الدوائر والمستطيلات مستديرة الزوايا لإنهاء تفاصيل رأس الرجل الآلي المختلفة. اجمع Group كل زوجين من الأشكال معًا كالعينين والأذنين ثم حاذِ جميع الأشكال للوسط. ارسم شكل جسم الرجل الآلي وأضف العديد من الأزرار والمعدات عبر استخدام الأشكال الأساسية ثم حاذِ كل شيء انطلاقًا من منتصف الرأس. ارسم الشكل الأساسي للذراع مع رسم دائرة كبيرة لليد. انسخ CMD+C الدائرة وألصقها في المقدمة CMD+F ثم استمر بالضغط على ALT و Shift أثناء تصغير حجم الدائرة الجديدة وذلك للمحافظة على المحاذاة والنسبة بين الأبعاد. حدّد الدائرتين ثم انقر على خيار Subtract من لوحة Pathfinder لتقص الدائرة الصغيرة وتحذفها من شكل الدائرة الكبيرة. ارسم مربع ودوّره بزاوية 45 درجة ثم ضعه في منتصف حلقة اليد من الأسفل. فعّل الأدلة الذكية Smart guides بالضغط على CMD+U وذلك لتُسهّل عملية المحاذاة. استخدم لوحة pathfinder مجددًا لقص المربع من الحلقة. حدد كل الأشكال التي تُكوّن الذراع ثم انسخها وألصقها في المقدمة. اذهب إلى القائمة: Object > Transform > Reflect واختر الخيار العمودي Vertical لعكس العناصر ثم ضعها في الجهة المقابلة. على الرغم من أننا نستخدم الأدوات القياسية لإنشاء زوج من الأشكال المتقابلة إلا أن الرجل الآلي يبدو رائعًا حتى الآن. استخدم أداة المضلعات Polygon tool وارسم شكلًا داخل لوح الرسم. قبل إفلات زر الفأرة يمكنك زيادة أو تخفيف عدد النقاط إلى 5 من خلال الضغط على مفاتيح الأسهم في لوحة المفاتيح. حاذِ هذا الشكل بشكل مطابق تمامًا للزوايا السفلية لمستطيل الجسم. فعّل نمط الخطوط بالضغط على CMD+Y لرؤية واضحة ودقيقة. ارسم خطًا مائلًا وموازيًا للجزء السفلي من الجسم باستخدام أداة الخط Line tool. انسخ ثم ألصق ثم اعكس الخط وضع النسخة الجديدة في الجهة المقابلة. حدّد الخطين ثم اذهب للقائمة: Object > Blend Make ثم عد للقائمة: Object > Blend > Blend Options غيّر مسافة الخطوات المحددة Specified Steps ثم أدخل الرقم الذي يناسبك. أنهِ رسم الرجل الآلي باستخدام المستطيل كساق وشكل سُباعي كقدم وقص الجزء السفلي من الشكل السُباعي باستخدام مستطيل مؤقت ومن خلال أدوات لوحة Pathfinder. حدّد كل الأشكال التي تُكَوّن الرجل الآلي وانسخها ثم ألصقها في المقدمة ثم أدمجها معًا بالخيَار Merge من لوحة pathfinder. ألغِ لون التعبئة ثم زِد حجم الحدود إلى 5pt مع محاذاتها للخارج. حدّد كل عنصر من العناصر بشكل منفرد وعدّل بحجم حدوده بحسب الأهمية والترتيب والموقع بحسب ما تراه مناسبًا. يمكن أن تستخدم حجم 3pt للعناصر المهمّة كالرأس مثلًا وحجم 2pt للعناصر الأقل أهمية وحجم 1pt للتفاصيل الدقيقة. والآن سنبدأ بإضافة الألوان. أعطِ كل شكل لونًا. لقد استخدمت درجتين من اللون الرمادي لأجزاء الجسم، الأحمر لليدين وكرة الهوائي، الأزرق أو الأصفر للأزرار والمفاصل. لإضافة المزيد من العمق على مظهر التصميم سنقوم باستبدال الألوان المُسطّحة بتدرجات لونية تقوم أساسًا على الألوان المسطحة الأساسية. أنشئ لوحة ألوان وتقابلها لوحة تدرجات بحيث تكون هذه التدرجات بين الفاتح والداكن لذات اللون المسطح. اضبط زاوية اتجاه التدرج اللوني بحسب الحاجة باستخدام أداة التدرّج اللوني Gradient tool. يمكننا أن نضيف المزيد من العمق لمظهر التصميم بإضافة بعض انعكاسات الإضاءة الناعمة والخفيفة فوق أجزاء الرجل الآلي. انسخ وألصق نسخة من كرة الهوائي ثم لوّنها بالأبيض. ارسم مؤقتًّا شكل بيضوي يغطي النصف السفلي من الهوائي ثم قاطع الشكلين باستخدام أدوات لوحة Pathfinder. عدّل مستوى Opacity للشكل الجديد لنحو 20% لإنشاء الانعكاس الذي يعطي انطباع اللمعان البرّاق للمادة اللامعة. كرّر العملية على أجزاء الرجل الآلي بإضافة الانعكاس البرّاق لإعطاء المزيد من العمق ولمسةً من الواقعية للتصميم. سننهي التصميم برسم الظلال تحت الرجل الآلي. ارسم دائرة ولوّنها بتدرج لوني من الرمادي للشفافية. اضغط شكل الظل وضعه تحت الرجل الآلي. استخدم الاختصار CMD+Shift+[ لإرسال الظل أسفل كل الأشكال. وبهذا نكون قد انتهينا من رسم الرجل الآلي. ومع أننا استخدم الأدوات القياسية والأشكال الأساسية فقط إلا أنّ استخدامنا للتدرجات اللونية وإضافة الانعكاسات البرّاقة منحت التصميم الحيوية والروعة. ترجمة -وبتصرّف- للمقال: Create a Cool Vector Robot Character in Illustrator لصاحبه Chris Spooner.

سنتعلم في هذا الدرس كيفية العمل على برنامج Inkscape لتصميم شارة لمشروع فيدورا Fedora Project (وهو شراكة عالمية من أعضاء مجتمع البرمجيات الحرة برعاية Red Hat) وستبدو هذه الشارة كإحدى الشارات المستخدمة في المهمات الفضائية لوكالة الفضاء الأمريكية ناسا. الشارةالشارة عادة تكون دائرية، لذا سنبدأ برسم دائرة (اضغط على Ctrl أثناء رسمها للمحافظة على النسبة بين الطول والعرض). تأكد من إلغاء الحدود وتطبيق لون تعبئة كما تشاء (بما أننا نصمم شارة لمشروع فيدورا فقد استخدمتُ ألوان هوية فيدورا الزرقاء الداكنة). والآن نحتاج لنص دائري ولكي نستطيع تنفيذ ذلك فإننا نحتاج إلى مسار نطبّق عليه النص لذلك سنرسم دائرة أخرى أصغر (لوّنها بلون مختلف لنتمكن من العمل بسهولة وتمييز العناصر). حدد الدائرتين واستخدم لوحة المحاذاة Align and Distribute لتُحاذِي الدائرة الصغرى إلى مركز الكبرى عموديًّا وأفقيًّا (لا تنسَ وضع نسبة المحاذاة إلى العنصر الأكبر biggest object). استخدم أداة النص Text Tool لكتابة النص على الشارة. وبما أننا نصمم شارة لمشروع فيدورا فسوف نختار الأسس الأربعة للمشروع "Freedom, Friends, Features, First" باستخدام خط MgOpen Modata (أحد الخطوط المكمّلة للمشروع). لقد تعمّدت ترك فراغ كبير بين الكلمات لأتمكن من رسم بعض النجوم بينها لاحقًا. حدد النص والدائرة الداخلية ثم ضع النص على المسار من القائمة: Text > Put on Path لقد أصبح النص الآن منحنيًا ولكن ليس في أفضل موضع. حدد الدائرة الداخلية ودوّرها كما تشاء (سيدور النص مع الدائرة تلقائيًّا). اضبط شكل النص، غيّر نمط الخط وحجمه كما تشاء (أنا جعلته كبير وعريض). واضبط المسافة بين الحروف من شريط أدوات النص حتى تصبح المسافة مناسبة. إن لم يكن موقع النص مثاليًّا دوّر الدائرة الداخلية حتى يكون الموقع مثاليًّا. سنقوم بإدراج نص منحني أسفل المسار الدائري، ارسم دائرة أخرى (أنا ضاعفت الدائرة الداخلية) ولكي نستطيع العمل بسهولة أكبر اختر لها لونًا مختلفًا واكتب النص المطلوب، أنا كتبت "for all mankind". حدد النص والدائرة الجديدة ثم ضع النص على المسار بنفس الطريقة التي اتبعناها مع النص الأول put the text on path. سيكون هذا النص فوق النص الأول، سنقوم بتصحيح الوضع بعد قليل. دوّر الدائرة لتجعل النص في الأعلى. حدد الدائرة واقلبها عموديًّا. سيقفز النص تلقائيًّا إلى الأسفل، هذا أفضل ولكن ليس مثاليًّا، الانحناء صحيح ولكن الموضع خاطئ. للحصول على رؤية أفضل أثناء العمل على ضبط النص الجديد قم بإرسال الدائرة السماوية تحت الدائرة الحمراء ثم قم بزيادة حجم الدائرة السماوية (مع الضغط على Ctrl للمحافظة على نسبة العرض والارتفاع) ثم قم بمحاذاتها مع الدائرة الأكبر أفقيًّا وعموديًّا. استمر بتعديل الضبط حتى يتخذ النص الثاني موقعه الصحيح بالنسبة للنص الأول. حدد النص السفلي ثم استخدم أدوات النص لزيادة المسافة بين الحروف بأسلوب مشابه للنص الأول. حدد الدائرة ودوّرها حتى يصبح النص في الموضع الصحيح. حدد الدائرتين الداخليتين ثم أزِل لون التعبئة وبذلك ستصبح هذه الدوائر غير مرئية ولكنها موجودة في حال احتجنا إليها فيما بعد. لوّن النص باللون الأبيض وبذلك تبدأ الملامح الأولية للشارة بالظهور. ولجعل الشكل يبدو كشارة حقيقية قم برسم دائرتين جديدتين مع حدود بيضاء وبدون لون تعبئة (استخدم لوحة التعبئة والحدود Fill and Stroke للقيام بذلك). ثم قم بتعديل حجم الحدود (أنا جعلتها 3 px من ذات لوحة الأدوات). حدد الدائرتين الجديدتين مع الدائرة الكبيرة (الزرقاء الأساسية) ثم قم بمحاذاتها إلى مركز الدائرة الكبيرة. استخدم أداة النجمة star tool لرسم نجمة بيضاء بخمس زوايا وضعها بين أي كلمتين. ضاعف النجمة عدة مرات. ثم انشر النجوم في جميع الفراغات بين الكلمات. ثم دوّر كل واحدة بما يتلاءم مع وضعها. التزيينحتى هذه النقطة أصبح لدينا شارة. نحن بحاجة إلى صورة جميلة في الوسط. ضاعف الدائرة الداخلية (تلك التي بحدود بيضاء وبدون لون تعبئة) ثم أزِل الحدود ولوّنها بأي لون حيث سنستخدمها كقناع. نحتاج الآن إلى الصورة، من الممكن استخدام صورة فكتور (إن كان لديك رسم مذهل) أو حتى صورة نقطية (على فرض أنك تريد وضع صورة فضائية). أنا ذهبت إلى موقع مشروع فيدورا وحمّلت صورة نقطية (PNG) من إحدى الصور المرشحة لتكون خلفية فيدورا 13. أدرج صورة الخلفية (سيكفي أن تسحبها إلى نافذة البرنامج). اجعل صورة الخلفية تحت دائرة القناع وبذلك نستطيع أن نرى الجزء الذي سنقصّه. غيّر حجم الصورة (مع الضغط على Ctrl للمحافظة على النسبية) وحرّكها حتى تغطي دائرة القناع الجزء الذي تراه مناسبًا لقصّه. حدد الدائرة وصورة الخلفية ثم اذهب إلى القائمة: Object > Clip > Set والآن اجعل الدائرة الجديدة ذات الصورة تحت الدائرة ذات الحدود البيضاء حتى تظهر الحدود البيضاء كاملة. ومن أجل الزينة الرئيسية استخدم شعار فيدورا. قم بكل ما يلزم من العمل ليكون الشعار بالشكل والموضع والحجم المناسبين. والآن دورك لتصنع شارتك الخاصة، سواء بأسلوب فيدورا أم لا، ولربما قد تطبعها على رقعة مطاطية وتضعها على المعطف. ترجمة -وبتصرّف- للمقال: NASA mission styled badges with Inkscape لصاحبه Nicu Bulelei.

حاول أن تتبع خطوات هذا الدرس حتى تتمكن من عمل رسم متجهي بسيط لنينجا باستخدام برنامج Illustrator adobe، والذي يتكون من مجموعة أشكال رئيسية بالإضافة إلى استخدام بعض الأدوات الأساسية لبرنامج اليستريتور مما يجعل الدرس مناسب للمبتدئين. لعمل رسمة النينجا سنقوم باستخدام أشكال بسيطة والتي ستمنحه مظهرا جميلا، ورغم استخدامنا للألوان المعتمة بعض الشيء إلا أننا سنقوم بتعديل ذلك بواسطة استخدامنا لحدود التصميم strokes وإضافة بعض التدرجات اللونية لعمل تغييرات بسيطة على الشكل. نفتح برنامج أدوبي اليستريتور ونرسم دائرة والتي ستمثل شكل رأس النينجا. نستمر باستخدام أداة الدائرة لرسم العينين، حيث نبدأ أولا برسم فتحة القناع والتي تظهر على شكل بيضاوي مستدير ثم رسم دائريتين معبأتين باللون الأسود تمثلان شكل العين. نستخدم أداة القلم Pen tool لرسم الجسم، نضغط ثم نسحب الخط لعمل خط منحني بعدها نضغط على الاختصار CMD+Shift+[ لوضع العنصر الجديد خلف شكل الرأس. نضغط و نسحب الخطين الذين يقطعان الجسم لتمثيل الذراعين والساقين في وضعية قتال مع تمديد الخطوط المتدفقة (bezier handles). نحدد قيمة حدود الخطين المنحنيين stroke بـ: 25pt ثم نحدد الخيار Round Cap ( تجده في لوحة stroke) لتنعيم نهايات الخط. نحدد الخطين المنحنيين ونتبع المسار التالي Object > Expand، ثم نعين فقط قيمة حدود التصميم stroke وذلك لعمل شكل ثابت. نختار شكل الرأس ونقوم بتحديده ثم نضغط على الاختصار CMD+C لعمل نسخة منه والتي سنحتاجها لاحقا ثم نضيف شكل الجسم والذراعين والساقين إلى التحديد ونختار Merge من لوحة تحديد المسارات Pathfinder. نغير لون التعبئة إلى 90% أسود ثم نغير قيمة حدود التصميم ونختار القيمة 8pt لإبرازها. من لوحة المظهر Appearances palette نحدد الخيار Add New Stroke من القائمة المنسدلة الموجودة أعلى الزاوية اليسرى. نضيف تغييرات على stroke بتحديد القيمة 4pt و 93% من اللون الأسود لخلق تأثير مزدوج لحدود التصميم وإبرازها. نضغط على الاختصار CMD+F لوضع النسخة التي قمنا بعملها سابقا، بعدها نغير قيمة التعبئة اللونية إلى 90% من اللون الأسود، أما قيمة stroke فنحددها بـ: 4pt و93% من اللون الأسود ثم نضغط على الاختصار لوضعه تحت شكل العينين. نحدد فتحة القناع ونختار اللون الرمادي لحدود التصميم stroke، ثم نقوم بضبط لون التعبئة حتى يكون قريبا من لون البشرة الطبيعي، ثم نختار حدود التصميم الثانية ونقوم بسحبها قليلا إلى الداخل ونختار لها لون أغمق من لون البشرة الذي قمنا باستخدامه. نختار أداة القلم ونرسم شكل الحزام الذي يقطع شكل الجسم ونختار له لون 93% أسود ليندمج مع حدود التصميم. رسمة النينجا التي قمنا بعملها تظهر بشكل جيد لحد الآن، لكن حتى نتمكن من إضافة بعض العمق إليها والمزيد من الأبعاد فإننا سنستعين ببعض التدرجات اللونية. نحدد كلا من شكل الرأس والجسم ونقوم بتعبئتهما بالتدرج اللوني الشعاعي 90% و 93% أسود، ونستعين في ذلك بأداة التدرج اللوني. ننهي رسم شكل النينجا بإضافة خلفية بسيطة له، حيث نقوم برسم مستطيل نختار له اللون الأبيض ثم نحدد النقاط المحورية ونستخدم أداة التدوير لتدويرها بعدها نسحب نسخة جديدة من الشكل مع الضغط على المفتاح ALT. نضغط على الاختصار CMD+D لمضاعفة الشكل، نستمر في مضاعفته حتى نحصل على شكل دائرة ثم نقوم بجمعها في طبقة واحدة ونخفض من قيمة الشفافية إلى 2%. أنهينا الآن من رسم النينجا حيث ساعدتنا الأشكال الأساسية في إعطاء مظهر متجهي للتصميم في حين ساهم استخدامنا لكل من التدرجات اللونية وحدود التصميم في إضافة stealthiness لشكل النينجا على خلفية داكنة. ترجمة -وبتصرف- للمقال Create a Simple Vector Ninja Character in Illustrator لصاحبه Chris Spooner.

يحظى التصميم المسطح بشعبية كبيرة في تصميم مواقع الانترنيت، بالإضافة إلى كونه أسلوب رسم ممتع ويعطي نتيجة فنيه رائعة. حيث سيكون مناسب جدا إذا ما تم وضعه في تصاميم الأنفوجرافيك Infographics أو تصميم الأيقونات وحتى العلامات التجارية (Branding). في درسنا هذا سنتعلم طريقة رسم مشهد لفضاء على شكل فيكتور vector باستخدام برنامج Adobe Illustrator. العمل الفني الذي سنقوم به في درسنا سيحتوي على رسم لمنظر بسيط من الفضاء، كوكب،قمر ونجوم. جميعها مصمم بطريقة مسطحة وبألوان مشعة. الخطوط الدائرية تمنح التصميم تأثير الظلال عل الكوكبين والذي يعتبر من أشهر التأثيرات التي يتبناها مصممو النمط المسطح. نبدأ بفتح ملف جديد في برنامج أدوبي اليستريتور Adobe Illustrator ثم نرسم مستطيلا يغطي مساحة العمل وذلك لعمل خلفية لتصميمنا. نختار له اللون الأزرق الغامق (1e1e3a #) بالضغط مرتين على مربع التعبئة الموجود أسفل شريط الأدوات. في جزء آخر من مساحة العمل نرسم مستطيلا طويلا، ثم نُظهر الخطوط التوجيهية الذكية smart guides وذلك بإتباع المسار التالي: view > smart guides بعدها نضغط على alt+shift ونسحب المستطيل فنحصل على نسخة جديدة منه نضعها بالأسفل، ستساعدنا الخطوط التوجيهية الذكية في تحديد المكان المناسب للشكل بسهولة. نضغط باستمرار على cmd+t (اختصار للمسار object > tansforme > transforme again) لعمل سلسلة مستطيلات متوازية. نختار أداة التحديد ونقوم بتعديل عرض جميع المستطيلات مرة بتكبيرها ومرة بتصغيرها بشكل عشوائي لتظهر على شكل تدريجات كما هو موضح في الصورة: بعد الانتهاء من تعديل مقاس المستطيلات نقوم بتحديدهم ونضغط على زر unite من لوحة تحديد المسارات pathfinder لدمجها في شكل واحد. نختار أداة التحديد الحر فتظهر لنا نقاط الزوايا (بدءا من الإصدار cs6+) نضغط عليها ونسحبها لتدويرها، بالنسبة لمن يستخدم إصدارات أقدم من البرنامج فبإمكانه عمل ذات التأثير بإتباعه للمسار: effect > stylize > round corner وتحديد القيمة المناسبة. نتبع المسار التالي: object > transforme > rotate وندخل القيمة 25° ثم نغير لونه إلى الأزرق (313166 #) ونضع الشكل الذي تحصلنا عليه فوق الخلفية مع جعل الخطوط تتموضع على الجهة اليمنى في الأعلى. نضغط على الزر shift ثم على الخلفية لتحديدها مع الشكل السابق، بعدها نُفعل أداة Shape Builder tool من شريط الأدوات، ونضغط على المفتاح ALT ثم خارج المستطيل لقص الشكل حسب حجم مساحة العمل. نخفض قيمة الشفافية opacity إلى 20% لعمل تغيير خفيف على لون الخلفية. نقوم برسم دائرة باستخدام الأداة Ellipse tool في جزء من مساحة العمل دون أن ننسى الضغط على المفتاح Shift، ثم نقوم بتعبئتها باللون الأزرق السماوي مثلا اللون (0ceef4). نستخدم أداة المستطيل لرسم سلسلة من المستطيلات بنفس الخطوات السابقة مع تعديل أحجامها. ندمج أشكال المستطيلات باستخدام لوحة تحديد المسارات Pathfinder tool، ثم نقوم بتدوير الزوايا عن طريق سحب نقاط الزوايا التي تظهر لنا أو باستخدام تأثير Round Corners كما في الخطوة السابقة. نتبع المسار التالي: Object > Transform > Rotate وندخل القيمة 25° ونضع الشكل الذي تحصلنا عليه فوق الدائرة مع جعل الخطوط تتموضع على الجهة اليسرى السفلية. نغير لون تعبئة الخطوط إلى الأزرق الغامق (34bfd6#) وسينتج لنا تأثير ظلال بسيط بتقنية التصميم المسطح. نحدد كلا الشكلين ونستخدم أداة Shape Builder tool لقص الخطوط التي تكون خارج الدائرة. نزيل التحديد على الأشكال ثم نحدد الدائرة التي تمثل شكل الكوكب فقط ونتبع المسار التالي: Effect > Stylize > Outer Glow نغير لون الشكل إلى أزرق سماوي 0ceef4 أما قيمة الشفافية فنحددها بـ 100 % والحجم حوالي: 20 mm لعمل تأثير التوهج. نعيد نفس الخطوات لعمل الشكل الثاني والذي يمثل القمر لكن مع اختيار لون مختلف قد يكون اللون الأرجواني أو الأصفر، بالنسبة لي فقد اخترت اللونين e517be و af2b83، لا تنسى إضافة التأثير Outer Glow لكن بحجم أقل حتى تتناسب مع حجم القمر/الكوكب. نرسم دائرة بيضاء صغير في مكان آخر من مساحة العمل ثم نتبع المسار التالي: Effect > Distort & Transform > Pucker & Bloat نقوم بسحب مؤشر التأثير Pucker إلى غاية القيمة 85-% لنحصل على شكل نجمة. في هذه الخطوة نقوم بإضافة التأثير Outer Glow لكن مع اختيار اللون الأبيض وتخفيض قيمة blur إلى حوالي 2 mm. نضغط على الرمز"New icon" الموجود أسفل لوحة الرموز وذلك لإنشاء رمز جديد، لسنا بحاجة إلى تغيير الخاصية Movie Clip أو إعدادات الجرافيك Graphic setting. من شريط الأدوات نختار الأداة Symbol Sprayer tool بعدها نقوم بالضغط والسحب على جميع مساحة العمل لتوزيع العديد من النجوم الإضافية. في هذه الخطوة نختار الأداة Symbol Sizer tool من القائمة الفرعية للأداة Symbol Sprayer tool، ونضغط على المفتاحalt عند سحب الأداة على أشكال النجوم وذلك لتعديل حجمها. عند تمرير الأداة على كامل مساحة العمل فإنها تقوم بتغيير حجم الأشكال بطريقة عشوائية وعمل تأثيرات على البعض منها. نحدد المستطيل الذي يمثل الخلفية ونضغط على CMD+C لنسخه ثم على CMD+F لوضع النسخة في الواجهة، نحدد الشكل مع الرموز ونضغط على الزر الأيمن للفأرة ونختار Make Clipping Mask. سنلاحظ أن النجوم تظهر على سطح الكوكب والقمر، يمكننا تعديل ذلك من خلال تحديد الخاصية: Arrange > Send to Back لوضع النجوم فوق الخلفية. النتيجة النهائية عبارة عن تصميم مسطح جميل لمشهد من الفضاء. واستخدام الأشكال الأساسية له دور أساسي لعمل هذا النوع من التصاميم كما أن الألوان الحيوية التي قمنا باستخدامها أعطت للتصميم إضاءة إضافية وجعلته أكثر إشراقا. ترجمة بتصرف للمقال How To Create a Flat Style Vector Planet in Illustrator لصاحبه Chris Spooner.

سنتعلم في هذا الدرس رسم شخصية الفطر الظريفة بالفكتور خطوة خطوة مع تأثير اللطافة اليابانية. سنرسم البنية الأساسية للشخصية بالأشكال الأساسية بالإضافة إلى التخطيط لتحديد حواف الشخصية وسننهي هذا كله ببعض الألوان المتنوعة الحيوية. الشخصية التي سنصممها ستكون لشخصية فطر صغير مع نمط اللطافة النموذجية اليابانية. الأشكال البسيطة والحواف الملتفة الناعمة ستساعد على جذب الانتباه لجمال الشخصية وجعلها محبوبة. هناك ثلاث خطوات أساسية: إنشاء البنية الأساسية للشخصية، الحدود المتنوعة لتمييز أجزاء الشخصية، ثم إضافة الألوان لإضفاء الحيوية على التصميم. ارسم دائرة على لوح الرسم مع الاستمرار بالضغط على Shift. استخدم أداة التحديد المباشر Direction Selection tool لسحب النقطة السفلية للأعلى عموديًّا لتشويه الحافة السفلية للدائرة. ارسم مستطيل مستدير الزوايا يُمَثّل ساق الفطر ثم حدد الساق والرأس معًا ثم انقر مجددًا على الرأس لجعلها العنصر المفتاح ثم حاذِها إلى الوسط على المحور Y. استخدم أداة التحديد المباشر Direct Selection tool لتحديد كل النقاط العلوية لشكل الساق ثم اذهب إلى القائمة: Object > Transform > Scale ثم أدخل القيمة 80% في الخيارات الظاهرة في النافذة المنبثقة. ارسم باقة من الدوائر عشوائية الأحجام فوق رأس الفطر مشكّلًا مجموعة من النقاط. تأكد من وضع بعض النقاط فوق حواف الرأس حتى تبدو وكأنها تلتف حول الشكل. حدد كل الدوائر واجعلها مسار مركب Compound Path عبر القائمة: Object > Compound Path > Make أو بالضغط على CMD+8. انسخ CMD+C وألصق في المقدمة CMD+F لمضاعفة رأس الفطر. اضغط CMD+Shift+] لجعل الشكل فوق كل الأشكال ثم حدد المسار المركب ونسخة الرأس الجديدة وانقر على Intersect من لوحة Pathfinder. ارسم دائرتين باللون الأسود ستكون العينان ثم اضغط على Shift وAlt واسحب نسخة. اجمع العينين Group ثم حاذِهما إلى وسط الجسم الرئيسي. تأكد من أن الجسم هو العنصر المفتاح وبذلك لن يتحرك من مكانه. ارسم دائرة بحدود سوداء ثم اسحب دليل لقص الجزء العلوي. اقسم المسار عبر الدليل باستخدام أداة المقص Scissors tool ثم احذف الجزء العلوي. زِد سماكة الحدود إلى 5pt ثم اختر خيَار Round Cap من لوحة الحدود لتحصل على ابتسامة صغيرة. حاذِ الابتسامة إلى وسط الجسم باستخدام لوحة المحاذاة Align وتذكّر أن تعطي الجسم نقرة إضافية ليكون العنصر المفتاح. ضاعف أشكال الجسم الرئيسي والرأس عبر CMD+C وCMD+F وأدمجها معًا Merge من لوحة Pathfinder. زِد الحدود الخارجية للشكل العام نحو 11pt وحدد وحاذِ هذه الحدود للخارج وذلك من لوحة الحدود Stroke. اضبط حدود شكل الرأس الأصلي نحو 6pt وحاذِ هذه الحدود للخارج. أضف بعض الألوان البسيطة إلى الأشكال الأصلية كالأحمر للرأس ولون الجلد الفاتح للساق (الجسم). لا تنسَ إضافة دائرتين زهريتين كخدود وردية. استخدم الألوان الأساسية لتطبيق تدرجات لونية معقدة. استخدم أكثر من مقبض للتدرج، واحد فاتح والآخر داكن ثم استبدل اللون البسيط للرأس بهذا التدرج. استخدم تدرج لوني آخر لساق (جسم) الفطر واجعل اتجاهه عموديًّا مع وضع اللون الداكن في الأعلى ليبدو وكأنه ظل. استخدم تدرج من اللون الرمادي الناعم للغاية إلى الأبيض لتلوين البقع على رأس الفطر حتى لا تبقَ ألوانها بيضاء مسطحة. سننهي تصميم الشخصية بتصميم الخلفية الجميلة. ارسم مستطيل ولوّنه بتدرج لوني دائري من الأبيض إلى اللون الأخضر الفاتح. أضف دائرة مع تلوينها من الرمادي الفاتح إلى الشفافية ثم اضغطها وضعها تحت شخصية الفطر بحيث ستكون الظلال. بعد وضع الظلال تحت شخصية الفطر ستبقى فوق ساق الفطر لذلك اضغط CMD+Shift+[ لإرسال الظلال تحت كل الأشكال ثم اضغط CMD+] لرفعها درجة للأعلى حتى تصبح فوق شكل الخلفية. وبهذا نكون قد انتهينا من تصميم شخصية الفطر اللطيفة ذات المظهر اللطيف الياباني. التصميم العام للشخصية كان باستخدام الأشكال الأساسية الملتفة لمنحها مظهرًا محببًا. اختلاف الخطوط وسماكتها ساعد على إظهار ملامح الشخصية والتدرجات اللونية أعطتها عمقًا وبعدًا إضافيَّا. ترجمة -وبتصرّف- للمقال: How To Create a Cute Vector Mushroom Character لصاحبه Chris Spooner.

اتبع الخطوات في هذا الدرس لتتعلم كيفية تصميم شخصية جندي بسيط. سنبدأ ببناء هيكل الشخصية بالأشكال الأساسية ثم نضبط بين سماكة الخطوط لإظهار الوضوح بين العناصر. ولجعل التصميم أكثر حيوية سنقوم بإضافة كتل لونية وبعدها سنطبّق بعض تقنيات التظليل البسيطة. سنرسم هذا الجندي الكرتوني بواسطة مجموعة من الأشكال الأنيقة. بإمكانك استخدام الأسلوب ذاته مستقبلًا مع تغيير الملابس والملامح قليلًا لتُشكّل مجموعة متكاملة من شخصيات المهن المختلفة. تستطيع العمل بمراحل من رسم الأشكال الأساسية بالخطوط الأبيض والأسود ثم تعديل سماكة الخطوط إلى تلوينها مع إمكانية استخدام كتل لونية وفي النهاية يكتمل العمل بوضع الظلال التي تعزز من جمالية التصميم. افتح برنامج الإليستريتور وارسم دائرة ومستطيل على لوح الرسم حيث سيمثّلان الرأس والجسم. استخدم أداة المستطيل مستدير الزوايا Rounded Rectangle Tool مع أقصى قيمة لنصف قطر الزوايا لإضافة بعض الأطراف. حاذِ القدمين مع حواف الجسم ثم دوّر الذراعين 45 درجة وضعهما تحت الرأس. حدد جميع العناصر التي تُشكّل الجسم وادمجها معًا بالخَيَار Merge من لوحة Pathfinder. انسخ الرأس CMD+C وألصق في المقدمة CMD+F ثم حرّك النقطة السفلية عموديًّا بواسطة أداة التحديد المباشر Direct Selection. الآن استخدم أداة التحديد Selection Tool وكبّر حجم الشكل ليصبح الخوذة. ضاعف الشكل ثم حرّكه للأعلى حتى تصنع خطًّا موازيًا على طول الحافة السفلية ثم استخدم أداة المقص Scissors لتقص الشكل حيث تتقاطع الخطوط. احذف الجزء الفائض. استخدم سلسلة من المستطيلات والأشكال البيضوية لرسم الخطوط الخارجية لدرع الجسم. استخدم أداة التحديد المباشر Direct Selection Tool لحذف الحواف والنقاط وذلك لتصنع مسارًا مفتوحًا. هذه المسارات يمكن أن تتم محاذاتها ووصلها بعد تكبير منظور العرض وتحديد النقاط المفتوحة من كل شكل والضغط على CMD+J. ارسم شكلًا بيضويًّا في المنطقة السفلية من الجسم ثم احذف النقطة العلوية ليصبح لديك خط منحني للدلالة على حافة درع الجسم. قم برسم ووضع مجموعة من أشكال المستطيلات والأشكال المرسومة بأداة القلم Pen tool لتصمم المسدس. أدمج Merge جميع هذه الأشكال معًا من لوحة Pathfinder. استخدم شكلًا بيضويًّا كأساس لعدسة النظارة الشمسية. اضبط الشكل عبر تحريك النقاط لتعديل الشكل. اصنع نسخة منها واعكسها في الجهة المقابلة ثم حدد كلا الشكلين واذهب للقائمة: Object > Path > Offset Path أدخل القيمة 1.25mm لإنشاء إطار للنظارة الشمسية. استمر في إضافة التفاصيل الدقيقة إلى الشخصية حتى تصبح مميزة وواضحة المعالم. ارسم بعض الخطوط البسيطة في الذراعين والساقين لتحديد نهاية الملابس. من أجل إنشاء خط سميك على حواف الشخصية استخدم أداة المقص Scissors لقص المسارات المتقاطعة عند الحواف الخارجية. أعد توصيل المسارات لتُشكّل الخط الخارجي المتصل المحيط بالشخصية. زِد حجم الحدود الخارجية إلى 4pt وحاذِ الحدود إلى الخارج. اضبط حجم الحدود في المنطقة الوسطى من الشخصية. استخدم حجم 2pt لتحديد التفاصيل الهامة بحسب حجم الحدود. إن الشخصية الآن تتبلور مع اتخاذ أحجام مختلفة للحدود الداخلية والخارجية وذلك لتحديد الفوارق بين التفاصيل في الشكل. هذا الرسم لا يجب أن يكون بلون أبيض لأي من العناصر لذلك عليك التأكد من عدم وجود فواصل بين العناصر. استخدم أداة المقص Scissors لتنظيف التصميم ومسح الخطوط والأشكال غير المرغوبة. الجزء العلوي من الدائرة يُستخدم للرأس ولذلك يجب أن تقصَّ جميع المناطق الفائضة من درع الجسم والنظارات الشمسية ومن ثم تُحذف. أنشئ طبقة جديدة وألصق نسخة عن الحدود الخارجية للشكل. ثم طبّق اللون الأسود للحدود والأخضر للتعبئة لتكون الأساس لبناء الكتل اللونية. اقفل طبقة العمل الخطي واستخدم أداة القلم بدقة لرسم مسار حول كل عنصر مع تلوينه بلون مختلف. الهدف هنا هو الحفاظ على مناطق الحدود السوداء. استمر في بناء كتل الألوان لتعريف كل جزء من الملابس والجلد والدرع. تذكر أن هذه الخطوط يمكن أن تكون سريعة وخشنة ولكنها لن تظهر طالما أنها تحت خطوط الحدود السوداء. الرسم أصبح جميلًا مع الألوان ولكنه لا يزال يبدو مسطّحًا. هنا سنستخدم تقنيات التظليل لإضافة الحيوية إلى التصميم. استخدم أداة القلم لرسم مجموعة من بُقع التمويه عبر الشخصية ولوّنها بلون أفتح بقليل من الأخضر. حدد البقع واضغط CMD+8 لإنشاء المسار المركب. انسخ شكل الحدود الخارجية واجلبه إلى المقدمة بالضغط على CMD+Shift+] ثم استخدمه مع خَيَار Intersect من لوحة Pathfinder لتُقَاطِع الأشكال وتقصّها. وبالنسبة للبقع الداخلية اضغط مرارًا على CMD+[ لتُنزِلها أسفل العناصر الملوّنة حيث ستختفي الأجزاء الفائضة. أضف تدرّج لوني من البرتقالي إلى الأصفر على النظارات الشمسية واضبط الزاوية من أداة التدرّج Gradient tool. ارسم دائرة كبيرة سوداء فوق منطقة الرأس مع تغطية جزء صغير من أعلى الجسم. ضاعف هذا الشكل وحرّكه للأعلى قليلًا ثم انقر على خَيَار Subtract من لوحة Pathfinder لطرح الأشكال من بعضها. استخدم أداة القلم لرسم أشكال فوق الأجزاء الفائضة المتداخلة مع الخوذة واحذفها باستخدام أدوات لوحة Pathfinder. غيّر خصائص المزج لهذا الشكل الأسود إلى Multiply وضع قيمة Opacity على 15% لإنشاء لون الظلال. استمر في رسم مناطق الظلال عبر التصميم لمنحه شعورًا بالعمق. اصنع نسخًا من الأشكال التي تم إنشاؤها لصُنع خطوط موازية ثم قص الأجزاء الفائضة باستخدام أدوات لوحة Pathfinder. استخدم أداة القلم لرسم الظل عبر الذراع والساق والجسم. أعطِ هذا الشكل نفس الضبط 15% مع أسلوب Multiply لتحويله إلى ظلال. هذه الظلال ليست واقعية ودقيقة 100% ولكن بعض الكتل من الظلال المناسبة ستقوم بعمل عظيم وستضيف أبعادًا مذهلة إلى رسمك. شخصية الجندي أصبحت جاهزة وبإمكانك الآن القيام برسومات مشابهة مع تغيير في الشخصيات لمهن مختلفة. ترجمة -وبتصرّف- للمقال: How To Create a Vector Soldier Character in Illustrator لصاحبه Chris Spooner.

اتبع الخطوات في هذا الدرس لنرسم شخصية Yeti (رجل الثلج الخرافي) الظريفة. سنستخدم الكثير من الأشكال الأساسية قدر الإمكان لنحصل على الأسلوب المنحني في الرسم ثم سنضيف بعض الألوان للشخصية لتصبح أكثر حيوية ومفعمة بالحياة. على الرغم من أننا سنستخدم الأشكال الأساسية لكن هناك بعض التقنيات المتوسطة والمتقدمة التي سنتطرق إليها في هذا الدرس. سنحافظ على طابع الرسم البسيط لهذه الشخصية التي سنرسمها بالأشكال الأساسية. الشكل المنتفخ يجعل من هذا المخلوق شخصية محببة ولطيفة بينما الأكتاف العالية والوقوف العريض لها يمنحها شخصية الكسول والبطيء. كلّما أردت تصميم شخصية ما عليك دائمًا أن ترسم مخطّطًا أوليًّا واضحًا لها لتضع عليها عناصر الفكتور. ضع المخطط في ملف الإليستريتور واستخدم شكل بيضوي كبير حول حدود الجسم الرئيسي. اطرح النصف السفلي من الشكل البيضوي من مستطيل مؤقت واستخدمه لإزالة ذلك الجزء عبر زر Subtract من لوحة Pathfinder. طَابِق الأشكال الأساسية لتُجسّد المظهر العام للشخصية. فعّل الأدلة الذكية Smart Guides بالضغط على CMD+U لتُصبح المحاذاة أسهل بكثير. أنا استخدمتُ هنا مستطيلين مستديري الزوايا للقدمين ودائرة صغيرة بينهما في الوسط ستكون صلة الوصل بينهما لاحقًا. أدمج مستطيلات الأقدام مع الجسم الرئيسي باستخدام زر Merge من لوحة Pathfinder ثم استخدم أداة التحديد المباشر Direct Selection لحذف النقاط العلوية من المستطيلات والنقطة السفلية من الدائرة ليصبح لدينا مسارين مفتوحين. حدد إحدى نهايات المسار المفتوح وقم بتوصيلها لتملأ الفجوة. كرر العملية مع الجهة المعاكسة ليصبح المسار موصول بالكامل ومحيط بكامل الجسم. ارسم دائرة كبيرة بحيث تكون مطابقة لعرض الذراعين. حرّك النقطة السفلية للأعلى حتى تتطابق مع نهاية اليدين. اضغط CMD+C و CMD+F لتنسخ وتلصق نسخة من الجسم الرئيسي ثم اضغط [+CMD+Shift لإرساله إلى الأعلى فوق كل الأشكال ثم استخدم هذا الشكل كأداة مع زر Subtract من لوحة Pathfinder لتطرح هذا الشكل من شكل الذراعين. انقر بالزر الأيمن ثم اختر Ungroup لتفصل شكل الذراعين إلى شكلين منفصلين. ارسم ثلاث دوائر متزايدة في الحجم تباعًا في أسفل الذراع لتُمثّل يدًا بسيطة. أدمج الدوائر معًا بالأمر Merge ثم اصنع نسخة عنها. تأكد من أن شكل اليد فوق جميع الأشكال بالترتيب من خلال الضغط على [+CMD+Shift ثم استخدمها لقص الجزء المتداخل مع الذراع. اصنع نسخة أخرى من اليد وأرسلها فوق كل الأشكال أيضًا ثم حدد هذا الشكل مع الجسم الرئيسي وانقر زر Subtract من لوحة Pathfinder لتقص التداخل بين هذين الشكلين. ارسم ثلاث دوائر متطابقة وبمحاذاة بعضها البعض أفقيًّا وحاذِها مع أسفل القدم. حدد الدوائر الثلاثة واضغط CMD+8 لتُنتِج مسارًا مركّبًا Compound Path ثم اصنع نسخة عن الجسم الرئيسي واستخدم الأمر Intersect من لوحة Pathfinder لتقاطعه مع الدوائر وتُشكّل أصابع القدم. ارسم دائرة بحيث تكون أساس شكل الوجه ثم استخدم أداة التحديد المباشر Direct Selection لتتلاعب بالشكل وتحرّك النقاط وتجعله يتخذ شكل الوجه. ارسم دائرة صغيرة بيضاء بداخل دائرة أكبر سوداء لتُشَكّل العين ثم استمر بالضغط على ALT واسحب الشكل لتصنع منه نسخة أخرى. ارسم دائرة كبيرة وأخرى صغيرة في أي مكان على لوح الرسم واصنع مزيجًا منهما بالذهاب للقائمة: Object > Blend > Make اذهب إلى خيارات المزج من القائمة: Object > Blend > Blend Options وبدّل الإعدادات إلى Specified Steps مع قيمة مرتفعة 800. ثم أعطِ الشكل انحرافًا وانحناءً عبر القائمة: Object > Envelope Distort > Make with Warp استخدم الخيار Arc واضبط قيمة Bend الانحناء للشكل. أعِدْ الشكل إلى عنصر قابل للتعديل بالذهاب للقائمة: Object > Expand وفعّل خياري Object و Fill معًا. الشكل بالفعل لديه 800 من الأسطح لذا ادمجها معًا من لوحة Pathfinder لتُبَسّط الشكل. الحدود مؤلفة من عدد كبير وغير ضروري من النقاط لذا استخدم الأمر Simplify من قائمة Path لتخفف عدد النقاط مع المحافظة على الشكل العام. ضع هذا الشكل ضمن الوجه بحيث سيكون الفم ثم ارسم ثلاث دوائر صغيرة بيضاء بحيث ستكون الأسنان. أدمج الأسنان في شكل موحد من الأمر Merge ثم اصنع نسخة عن الفم واجعله فوق الأشكال ثم استخدم الأمر Intersect من لوحة Pathfinder لتقصّها بحسب حجم الفم. كرّر العملية ذاتها ولكن هذه المرة مع دائرة كبيرة حمراء بحيث ستكون اللسان. الشكل العام الأساسي أصبح جاهزًا ولكن مخلوق اليتي عادة ما يكون مغطى بفراء. الشكل الحالي يبدو أصلع جميل. ارسم دائرة في أي مكان على لوح الرسم واسحب النقطة اليمنى من الدائرة لليمين باستخدام أداة التحديد المباشر Direct Selection. أضف هذا الشكل إلى لوح الفرش Brush palette كفرشاة جديدة وحدد الخَيَار Art Brush. في الخيارات تأكد من أن اتجاه الفرشاة صحيح ثم بدّل النمط إلى Tints. استخدم أداة الفرشاة Brush لرسم شعيرات صغيرة من الفرو حول أحد نصفي جسم الشخصية والذراع. لا تقلق حول المناطق الداخلية من الأشكال فقط انتبه إلى الحدود الجديدة المُشَكّلة بواسطة الفرشاة. بعد الانتهاء من رسم فراء نصف شكل الشخصية قم بتحديد أشكال الفراء كلها ثم اذهب للقائمة: Object > Expand Appearance لتحول الحدود إلى أشكال جامدة. انسخ وألصق سلسلة الحدود ثم اذهب للقائمة: Object > Transform > Reflect لتعكسها على الجهة المقابلة. أضف أي لون لتُسَهّل على نفسك رؤية أية تداخلات حاصلة خُصوصًا فوق قمّة الرأس. ابدأ مع الذراع، حدد كل أشكال الفِراء على طول شكل الذراع وأدمجها معًا باستخدام لوحة Pathfinder. كرّر العملية مع الذراع الأخرى ثم استبدل لون التعبئة باللون الأبيض والحدود باللون الأسود ثم أرسل شكل الذراع أسفل كل الأشكال وبذلك لن تتداخل مع الجسم الرئيسي. حدد شكل الجسم الرئيسي مع بقية أشكال الفِراء المحيطة به وأدمجها جميعًا. استبدل لون التعبئة والحدود وأعد ترتيب الأشكال فوق بعضها لتظهر معالم الوجه مجددًا. سلسلة الحدود المرسومة بالفرشاة والتي شكّلت الفراء حول الشخصية منحت هذه الشخصية شكلًا مشعرًا محببًا. استخدم مجددًا فرشاة الفراء ذاتها لتطويق شكل الوجه ورسم مخطط للبطن. اتجاه أشكال الفرشاة حول الوجه يجب أن تكون للداخل على عكس اتجاه الأشكال المرسومة سابقًا على حواف الجسم حيث رُسمت للخارج. قم بعملية التوسيع Expand ودمج أشكال فِراء الوجه معًا ولكن هذه المرّة قصّها من شكل الوجه الأساسي عبر الأمر Subtract من لوحة Pathfinder. زِد حجم الوجه إن اضطررت لذلك. وسّع وأدمج أشكال مخطط البطن واستخدم أداة التحديد المباشر لتحذف كل النقاط حول الحافة السفلية ليصبح المخطط عبارة عن خط وحيد. الرسم العام بالخطوط للشخصية قد اكتمل وأصبح جاهزًا لإضافة الألوان إليه. استبدل لون التعبئة الأبيض باللون الأزرق/الرمادي الخفيف ثم أضف حدود زرقاء/رمادية بقيمة 3pt. حاذِ الحدود للخارج مستخدمًا الأيقونات في لوحة الحدود Stroke palette. لوّن الوجه باللون الأزرق الخفيف وأضف حدودًا بقيمة 3pt وهذه المرة حاذِها للداخل. استخدم ذات الألوان لتلوين الأيدي والأقدام. هذا سيمنح الشخصية بعض الحيوية والحياة ولكنها لا تزال تبدو مسطحة بعض الشيء. من لوحة المظهر Appearance palette اختر خيَار إضافة حدود جديدة Add New Stroke لشكل الجسم والذراعين. اضبط هذه التعبئة باللون الأزرق الخفيف بقياس 11pt وحاذِها للداخل. أضف ذات التعبئة لشكل الوجه مع محاذاتها للخارج. خفف من مستوى اللون الأسود للعينين والفم ليصبح 90% وأضف حدودًا خارجية لها باللون الأزرق/الرمادي للمساعدة في إبرازها. ارسم خلفية لشخصية اليتي ولوّنها بتدرّج لوني كامل مستدير وبذلك ننتهي من رسم الشخصية تمامًا. أضف دائرة ولوّنها بتدرّج لوني من الأسود للشفافية ثم اضغط هذا الشكل عموديًّا ليصبح بيضوي مسطح. ضع هذا الشكل أسفل قدمي شخصية اليتي وبذلك نمنح الشخصية ظلالاً ستضيف المزيد من الجمالية للتصميم. أصبح التصميم جاهزًا ومكتملًا. اجمع جميع الأشكال في مجموعة واحدة بالأمر Group ليصبح بإمكانك استخدام التصميم كشعار أو في أي مكان على موقعك الإلكتروني. ترجمة -وبتصرّف- للمقال: How To Create a Cool Vector Yeti Character in Illustrator لصاحبه Chris Spooner.

درس اليوم مثالي للمبتدئين في برنامج الإليستريتور. ليس من الضروري أن تكون محترفًا لتصمم عملًا فنيًّا رائعًّا، وباستخدام الأشكال الأساسية ومجموعة محدودة من الألوان يمكن أن تنتج تصاميم وأعمال فنيّة مذهلة. في هذا الدرس سنتعلّم استخدام أشكال الإليستريتور الأساسية وأدواته لتصميم منظر طبيعي رائع ومن ثم ننهي التصميم ببعض الإضافات ببرنامج الفوتوشوب. سيكون العمل الفني (المنظر الطبيعي) بسيطًا مصممًا باستخدام الأشكال الأساسية وألوان محدودة باللونين الأخضر والأصفر. عمل الفكتور هذا يميل ليبدو كرسم مسطّح جامد لا حياة فيه لذلك فإن الخطوة الأخيرة ستكون بنقل هذا التصميم إلى الفوتوشوب لحل تلك المشكلة وإضفاء الحيوية على التصميم. افتح ملفًا جديدًا في برنامج Adobe Illustrator. أبعاد الملف غير مهمة فقط اذهب للقائمة التالية لإخفاء حدود لوح الرسم: View > Hide Artboards سنحتاج إلى مخطط ألوان رائع لرسمنا، أنا اخترت سلسلة الألوان التالية. ألصق لقطة من سلسلة الألوان هذه على لوح الرسم ثم أنشئ سلسلة مربعات صغيرة وقم بتعبئة كلٍّ منها بأحد الألوان من السلسلة باستخدام أداة القطّارة Eyedropper. استخدم اللون الأفتح لرسم مستطيل كبير سيكون خلفية الرسم. اختر أحد الألوان الخضراء المتوسطة وارسم بها مستطيلًا وشكلًا بيضويًّا لتشكيل الأرضية والتلّة. بما الشكلين بنفس اللون فسيبدو وكأنهما مندمجان معًا ولكنها منفصلان ويمكن تحريكهما فرديًّا. اختر أقتم لون أخضر وارسم شكلًا بيضويًّا آخر ليكون تلّةً أخرى. حدّد الأشكال البيضوية وأرسلها خلف شكل الأرضية بالزر الأيمن ثم اختر Arrange > Send Backward ولكن أبقها فوق شكل الخلفية ذو اللون الأفتح. استمر بالضغط على Shift أثناء الرسم بأداة Ellipse لتثبيت الأبعاد ورسم دائرة مثالية. وفي مكان آخر على لوح الرسم استخدم أداة القلم Pen لرسم مثلث بأربع نقرات بسيطة. لضبط الشكل استخدم أداة التحديد المباشر Direct Selection لتحديد وتحريك أي من التقاط الثلاث. استخدم أداة القطّارة Eyedropper لإعطاء هذا الشكل اللون الأخضر القاتم من مربعات الألوان المعدّة مسبقًا. حرّك شكل المثلث إلى فوق الدائرة ليكون جذع الشجرة ثم انسخه وألصق النسخة بعد تصغير حجمه وتدويره لتشكيل غصن الشجرة. قم بمداخلة الشكلين حتى يبدو أنهما مندمجان بسلاسة. حدّد كل شكل من الأشكال التي تكوّن الشجرة مع الاستمرار بالضغط على Shift وبعد ذلك اضغط على Alt أثناء سحبها إلى إحدى الجهات لصنع نسخة عنها. عد للخلف واضبط اتجاهات الأغصان لإعطاء كل شجرة شكلًا فريدًا. حدّد الخلفية الصفراء المستطيلة ثم انسخ CMD+C وألصق في المقدمة CMD+F. امسح لون التعبئة في شريط الأدوات toolbar. حدد الأرضية الخضراء المستطيلة مع التلال بالضغط على Shift باستمرار لتحديدها جميعًا. انقر على زر القص Crop من لوحة Pathfinder لقص هذه الأشكال بحسب حجمها. عملية القص الأخيرة سوف تعبث بطبقات العناصر. استخدم اختصار ]+CMD لإرسال العناصر للخلف حتى تظهر عناصر الأرضية مجددًا. مرحلة الرسم الأساسية في درسنا قد انتهت. استخدمنا الأدوات الأساسية لتصميم فكتور منظر طبيعي صغير بسيط ولكننا سنضفي بعض الحياة على هذا المنظر الطبيعي بنسخ كامل التصميم ولصقه داخل برنامج الفوتوشوب Photoshop. افتح صورة Subtle Grunge Texture من موقع LostAndTaken وألصقها فوق العمل الفني في الفوتوشوب. استخدم الاختصار CMD+Shift+U لإشباع الصورة بشكل سريع ثم غيّر خصائص المزج لهذه الطبقة إلى Soft Light. هذا سيجعل الصورة تتفاعل مع ألوان التصميم الذي رسمناه. اذهب إلى القائمة: Filter > Sharpen > Sharpen هذا سيظهر ملامح الصورة الفوقية أكثر. اضغط CMD+F مرة أو مرتين لتكرار التأثير الأخير وإظهار علامات الاهتراء لتتطابق مع شدة الحدة sharp المطبّقة على التصميم. إن كان تأثير الصورة الفوقية يبدو قاسيًا، خفف من opacity لتلك الطبقة لتخفيف التأثير قليلًا. هذا ينهي تصميمنا بشكل كامل. إن استخدام الأشكال الأساسية يمكن أن ينتج بعض الأعمال الفنية المذهلة وبإضافة بعض التأثيرات في الفوتوشوب سيرفع من مستوى التصميم فعليًّا ويمنحه تأثير مرور الزمن عليه خصوصًا أننا استخدمنا سلسلة ألوان محدودة. ترجمة -وبتصرّف- للمقال: How To Create a Simple Landscape Scene in Illustrator لصاحبه Chris Spooner.

تحالف IGN هو شبكة IGN على YouTube للألعاب واللاعبين (IGN هو من أشهر المواقع التي تعنى بالألعاب). سنصمم هذا الشعار الخاص بأسلوب عسكري يمكن استخدامه لألعاب إطلاق النار والحروب مثل لعبة Call of Duty و Battlefield. وسيكون هذا الشعار هو شارة رقيب محاطة بإكليل غار مع لافتتين كبيرتين في الأعلى والأسفل وسنقوم بتصميم كل ذلك من الصفر بواسطة أدوات الفكتور في الإليستريتور. سنبدأ مع شارة الرقيب، ارسم مربعًا أسود على لوح الرسم ثم استمر بالضغط على shift ودوّره بزاوية 45 درجة. استمر بالضغط على Alt و Shift أثناء النقر وسحب المربع لتُشَكّل نسخة عنه. ضعه بشكل يصبح فيه أول شكل من أشكال الرتبة ثم قم بمقاطعة الشكلين بواسطة Intersect من لوحة Pathfinder. من القائمة: Object > Envelope Distort > Make with Warp ضع الخَيَار Arc في Style وعموديًا بقيمة -20% في Bend لتحقيق انحناءة بسيطة في الشكل. استخدم مستطيلًا مؤقتًّا مع أداة Subtract من لوحة Pathfinder لقطع أطراف شكل الرتبة والحصول على حواف مستقيمة. اصنع نسختين عن الشكل بسحبه مع الضغط على Alt و Shift وستلاحظ أن الانحناء ليس مثاليًا من حيث المحاذاة لذلك قم بتعديل الانحناء حتى تصبح المسافات بين الأشكال متساوية. ارسم دائرة وحدّد 3 نقاط من أصل الأربعة باستخدام أداة التحديد المباشر Direct Selection واحذفها لتبقى ربع دائرة. دوّر ربع الدائرة بزاوية 45 درجة ثم زِد سماكة حدودها حتى تتطابق مع سماكة أشكال رتبة الرقيب. حدد ربع الدائرة مع أحد أشرطة الرتبة ثم انقر نقرة إضافية على شريط الرتبة ليصبح هو العنصر المفتاح ثم قم بمحاذاة العناصر عموديًا. إن جعل شريط الرتبة العنصر المفتاح سيمنعه من الحركة من مكانه. حدد ربع الدائرة وعدّل حجمها لتصبح بعرض شرائط الرتبة ثم اذهب للقائمة: Object > Transform > Reset Bounding Box استخدم المقبض السفلي للمربع المحيط بربع الدائرة لتمدد الشكل وتصنع انحناءة أكبر. كبّر وعدّل بالأحجام حتى تتطابق الحدود تمامًا ثم ارسم مستطيلات صغيرة لملء الفجوات. اذهب إلى القائمة: Object > Expand واختر Stroke لتحول المسار إلى شكل جامد. ارسم تحديدًا حول العناصر واختر Merge من لوحة Pathfinder لمزج جميع الأشكال الفردية معًا. اذهب إلى القائمة: Object > Path > Offset Path أدخل القيمة 8mm. انقر بالزر الأيمن ثم اختر Ungroup وبذلك أصبحت عناصر رتبة الرقيب منفصلة يمكن تحديدها أو حتى جمعها مجددًا. أدمج كل الأشكال المجزأة من المسارات الإضافية معًا ثم أرسل الخطوط الخارجية للخلف (زر أيمن ثم Arrange > Send to Back) واحذف أو عدّل النقاط التي تصنع مناطق غير مرغوبة. في مكان آخر على لوح الرسم ارسم شكلًا بيضويًا بأداة ellipse. استخدم أداة Convert Anchor Point من لوح أدوات القلم Pen لإنشاء نقطة في الأعلى. أعطِ هذا الشكل حدودًا سوداء بقيمة 2 pt. دوّر الشكل قليلًا ثم انسخ CMD+C وألصق في المقدمة CMD+F لتصنع نسخة عنه. Object > Transform > Reflect لتعكس اتجاه رسم الشكل الثاني. اجمع الشكلين Group ثم اسحب نسخة منها مع الضغط على ALT و Shift بشكل متباعد باتجاه الأعلى على لوح الرسم. حدّد الشكلين ثم من القائمة: Object > Blend > Make ثم: Object > Blend > Blend Options لضبط العدد تحت خطوات محددة حتى تبدأ الأوراق بالتداخل. اذهب إلى القائمة: Object > Envelope Distort > Make With Warp وحدد الخيار Arc عموديًا بقيمة -100% لتحقق انحناءة للأوراق حتى تشكّل نصف دائرة. اذهب إلى: Object > Expand وحدد الخيار Object ثم استخدم أداة التحديد المباشر لتحديد واحذف زوجين من الأوراق في قمة الشكل وبذلك لن تتشكل دائرة كاملة متصلة فيما بعد. أنسخ وألصق وأقلب اتجاه النسخة لتصبح بنمط دائري. اجمع Group هذه العناصر معًا. عدّل حجم وموضع أوراق الغار فوق رتبة الرقيب. اجعل بعض الأوراق تتداخل مع أطراف الرتبة. أضف مسار تعويض Offset Path بقيمة 3mm لعناصر الأوراق. ألغِ تجمّع الأشكال Ungroup لتحديد عناصر مسار التعويض Offset Path كل على حدة من الأوراق الأساسية. أدمج (Merge) مسارات التعويض offset path معًا من لوحة Pathfinder لإعطاء شكل تعبئة سوداء كاملة. اضغط CMD+[ لتغيير ترتيب العناصر وإرسال مسار تعويض تحت الإكليل والشعار. استخدم أداة ellipse لرسم دائرة تشمل الفجوات في منتصف التصميم ثم اضغط ]+CMD+Shift لإرسالها إلى أسفل العناصر جميعها. حدد شكل الخلفية الأسود من شعار الرقيب ثم اذهب إلى: Object > Path > Offset Path ضع القيمة 3mm في الخيارات. أعطِ شكل مسار التعويض تعبئة بلون أبيض لتمييزها عن الخلفيات السوداء. في مكان آخر قم برسم مستطيلات لتشكيل لافتة بسيطة. أعطِ هذه الأشكال تعبئة بيضاء بحدود سوداء. استخدم أداة القلم Pen لملء الفجوات بأشكال سوداء لإعطاء انطباع عن حواف مثنية. قم بتقريب المشهد واستخدم الأدوات الذكية Smart Guides بالضغط على CMD+U للمطابقة على النقاط الموجودة. أعطِ هذا الشكل انحناءً طفيفًا باستخدام أداة Envelope Distort. ضع هذا الشكل أعلى تصميم الشعار وقم بمحاذاتها وسطيًا مع العناصر الموجودة. زيّن اللافتة ببعض النصوص أو بشعار مع بعض النجوم لتملأ المساحات الفارغة من اللافتة. اجلب أشكال رتبة الرقيب للمقدمة بالضغط على [+CMD+Shift ثم أضف حدودًا سوداء بقيمة 5pt . التداخل المناسب سيساعد على إنشاء تأثير ترتيب وتراص مثير للاهتمام وتثبّتُ الأشكال معًا. ارسم لافتة أخرى وإنما هذه المرّة اجعلها أطول ومنحنية بالاتجاه المعاكس وقم بمحاذاتها مع أسفل الشعار مستخدمًا لوح المحاذاة Align palette. اضبط ترتيب العناصر لتتداخل اللافتة مع عناصر الشعار. في مكان على لوح الرسم اكتب كلمة Alliance بخط من اختيارك استخدمت خط Franchise ولكن لتتناسب مع الموضوع العسكري أضفت خطوطًا محددة لخلق تأثير stencil (الرسم باللوح المثقوب وهو معتمد لدى معظم الجهات العسكرية). استخدم خط stencil الأصلي لإظهار الفواصل بين الحروف بشكل واضح لذا كن حذرًا عند محاذاة خطوط الحدود لتتدفق بسلاسة عبر كل حرف. حدد كل المسارات ثم اذهب إلى: Object > Expand لتحويلها إلى أشكال جامدة. حوّل النص إلى شكل خطوط بالضغط على CMD+Shift+O ثم ألغِ تجمع الأحرف ungroup ثم ألغِ تجمع الخطوط. أنشء مسارين متراكبين منفصلين للحروف والخطوط باستخدام الاختصار CMD+8. حدد كلاهما ثم اخرج الخطوط من النص باستخدام لوح Pathfinder وتحديدًا أداة Subtract من ذاك اللوح. ضع النص فوق اللافتة السفلية وأضف انحناء عبر أداة Envelope Distort ليتناسب انحناؤها مع شكل اللافتة. أنهِ التصميم بوضع سلسلة من الأيقونات في المساحة الفارغة المتبقية من شعار الرقيب. استخدمت أشكال جاهزة قمت بتحميلها من الإنترنت وبهذا ينتهي تصميم هذا الشعار. شارة الرقيب الكبيرة والنصوص المميزة بأسلوب الكتابة العسكرية عبر اللافتات وأوراق الغار، كل هذا ساعد على تشكيل شعار أنيق دائري مميز. ترجمة -وبتصرّف- للمقال: How To Create a Military Style Emblem Logo Design لصاحبه Chris Spooner.