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

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

إن المشاريع الشخصية للمصممين والرسامين مثل مشروع 36 Days of Type أو تحقيق تحدّيات مثل Daily Drop Cap حيث الفنانون ينتجون بأسلوبهم الخاص حرفًا جديدًا أو رقمًا جديدًا كل يوم، هي ما حفزني لكتابة درس اليوم. إن زخرفة الحروف الاستهلالية قديم عبر التاريخ مع أمثلة كثيرة في النصوص المبكرة. في درس اليوم سنقوم بزخرفة حرف باستخدام برنامج أدوبي إليستريتور مع مجموعة متنوعة من زخارف الفكتور. سنستخدم تقنيات مفيدة ستحتاجها في جميع مشاريعك المستقبلية. اخترت في الدرس حرف S ولكن من الممتع العمل على باقي الحروف لمشاهدة كيفية اختلاف مساحات العمل التي سنعمل عليها. باستخدام بعض التقنيات وأدوات بناء الأشكال القوية في الإليستريتور سنضيف مجموعة متنوعة من النقوش التي تتبع الحرف وسنصمم بعض الزخرفة لتزيين المساحات الداخلية. افتح برنامج أدوبي إليستريتور وأنشئ مستندًا جديدًا. استخدم أداة النص Type tool لإدخال حرف من اختيارك ثم اختر نوع الخط الذي سيمنحك مساحة جيدة لإبداعاتك. أنا اخترت حرف S بخط أنيق حديث اسمه Goku. من أجل العمل على الحرف كشكل مادي سنحتاج إلى تحويله إلى خطوط خارجية. انقر عليه بالزر الأيمن واختر Create Outlines أو استخدم الاختصار CMD+Shift+O. سنقوم باستخدام أداة Offset Path مرّات كثيرة في هذا الدرس. اذهب إلى القائمة Object > Path > Offset Path وأدخل القيمة 3px. لوّن هذا الشكل باللون الأبيض. عُد مجدّدًا إلى القائمة Object > Path > Offset Path لإضافة خطٍ محاذٍ جديد ولكن هذه المرة أدخل القيمة 2px. ولوّنه بالأسود. انقر بالزر الأيمن واختر Ungroup لفصل الأجزاء الثلاثة عن بعضها (الحرف الأصلي والمسارين الإضافيين). اختر الشكل الخارجي ثم انسخ CMD+C وألصق في الخلف CMD+B نسخةً عنه. حرّك الشكل قُطريًّا نحو الأسفل واليسار ثم اضغط على Shift واختر الشكل الأساسي مجدّدًا. اذهب إلى القائمة Object > Blend > Make اذهب إلى القائمة Object > Blend > Blend Options وغيّر المسافات إلى خطوات محدّدة Specified Steps برقم كبير مثل 100 لتشكيل انتقال سلس بين الشكلين. طبّق هذا التأثير بشكل دائم عبرالذهاب إلى القائمة Object > Expand وبذلك سيتحوّل التأثير إلى سلسلة من الأشكال الفردية. أدمج جميع هذه الأشكال الفردية في شكل واحد عبر اختيار Unite من لوحة Pathfinder. حدّد شكل الحرف الأساسي ثم اذهب إلى القائمة Object > Path > Offset Path أدخل القيمة السلبية -16px لإنشاء خط داخلي محاذٍ لحدود الشكل الأساسية. لوّن الشكل الجديد باللون الأبيض. انسخ CMD+C وألصق في المقدمة CMD+F نسخة عن هذه الأشكال. امسح لون التعبئة ثم اجعل الحدود بلون أسود. زِد سماكة الحدود إلى 11PT ثم فعّل خيار Round Cap. فعّل خيار الخط المنقّط Dashed Line ثم حدّد الخط بالقيمة صفر والفجوة بالقيمة 11pt. هذا الأمر سيُولِّد سلسلة من النقاط الدائرية ما يمنح الحدود الداخلية للشكل نقشًا مميزًا وجميلًا. ألصق نسخة أخرى عن هذه الأشكال واجعل اللون الأبيض للحدود. اضبط سماكة هذه الحدود بحيث تجعلها لمسة إضافية زخرفية رائعة. حدّد شكل الحرف الأساسي مجدّدًا وأضف مسارًا إضافيًّا موازيًا جديدًا Offset Path. أدخِل نصف القيمة الأخيرة هذه المرة لإنشاء حدود تقع في وسط المسافة بين الحدود السابقة والتي قبلها. اجعل لون الحدود أبيض واجعلها خطًّا منقطًّا بالإعدادات Round Cap وحجم النقطة 0pt ما سيُنتِج نقاطًا فحسب. اضبط حجم الحدود للتحكم بحجم النقاط بينما يتم تحديد الفجوة بينها. كبّر منظور العرض وارسم دائرة مثالية باستخدام أداة Ellipse tool في الفجوة في جوانب الحرف. استخدم تقنيات الحدود لإنتاج نقاط سوداء صغيرة. انسخ وألصق في المقدمة نسخة عن الدائرة الأخيرة واستبدل الحدود بلون تعبئة أسود. صغّر الحجم قليلًا مع الضغط على Alt وShift وذلك لتغيير الحجم مع المحافظة على مركزية الدائرة وموقعها ومثالية الاستدارة ثم اضغط CMD+F للصق نسخة أخرى. صغّر حجم النسخة الجديدة مع منحها لونًا أبيض. أضِف شكلًا ثالثًا وغيّر حجمه أيضًا وذلك لإنتاج حلقات بيضاء وسوداء. حدّد واجمع Group جميع عناصر هذه الزخرفة ثم انسخها وضع النُّسخ في أماكن أخرى من الحرف. في مكان آخر على لوح الرسم استخدام أداة رسم الدائرة لرسم دائرة صغيرة. ثم استخدم أداة التحديد المباشر Direct Selection tool لسحب النقطة من أحد جوانب الدائرة للخارج أثناء الضغط على مفتاح Shift. اختر أداة القلم واضغط على Alt أثناء النقر على النقطة البعيدة لإزالة مقابض وانحناءات البيزير تاركًا نقطة ذات زاوية حادّة. أضِف دائرة صغيرة بيضاء كلمسة زخرفية بسيطة. انسخ وألصق هذه الأشكال ثم دوّرها بزاوية 45 درجة ثم صغّرها قليلًا وضعها بجانب النسخة الأصلية. انسخ النسخة الأخيرة وألصقها في المقدمة ثم اذهب إلى القائمة Object > Transform > Reflect لعكسها على طول المحور الأفقي وضعها في الجهة المقابلة. اصنع نسخة عن شكل الدمعة ومدّد النقطة البعيدة منها أبعد لصنع ما يشبه زخرفة جذع زهرة. عدّل حجم ودوّر وضع شكلًا أصغر سيشكّل ورقة ثم اصنع ثلاث نسخ إضافية منها على طول الجذع. صغّر حجم الشكل الثاني قليلًا ثم حدّد الشكل الثالث واضغط على CMD+D لتكرار العملية الأخيرة (عملية التصغير) مع الضغط على هذا الاختصار مرّتين. استخدم هذا الاختصار ثلاث مرّات على الشكل الأخير ما يجعل التغيير في الحجم بين الأشكال تدريجي. حدّد جميع أشكال الأوراق ثم اختر خيار Horizontal Distribute Spacing من لوحة Align لتوزيعها بين بعضها بالتساوي. اصنع نسخة عن أشكال الأوراق واعكسها أفقيًا مستخدمًا قائمة Reflect. حرّكها للجهة المقابلة من الجذع. حدّد جميع الأشكال التي تُشكّل هذا العنصر وأدمجها من خيار Unite من لوحة Pathfinder في شكل واحد. اذهب إلى القائمة Object > Envelope Distort > Make وعدّل خيارات القوس إلى -35%. ثم اذهب إلى القائمة Object > Expand لتطبيق هذا الانحراف بشكل دائم. انسخ ،عدّل حجم ،دوّر وضع أشكال الزخرفة الأخيرة هذه في أماكن الفراغ المتبقية داخل الحرف بشكل متناظر. أشكال بسيطة كالدوائر يمكن أن تُستخدم لملء الفجوات الصغيرة لإضافة التفاصيل الدقيقة لهذا العمل الفني. وكخطوة أخيرة، ارسم تحديدًا حول كل شيء ثم اذهب إلى القائمة Object > Expand لتحويل جميع الحدود إلى أشكال جامدة. الحرف بحاجة إلى رشّة ألوان ليصبح مكتملًا. بعض العناصر بحاجة إلى إلغاء تجمّعها Ungrouped للوصول إلى القطع الفردية. استبدل لون التعبئة الأسود بألوان من اختيارك. فن الفكتور المسطّح شعبيٌّ جدًّا هذه الأيام ولكن إضافة بعض التدرجات اللونية سيمنح التصميم لمسة إضافية. حدّد جميع الأشكال ثم اضغط CMD+C وCMD+F لصنع نسخة. انقر على الخيار Unite من لوحة Pathfinder لإنتاج شكل واحد ثم طبّق عليه تدرّجًا من الأسود إلى الأبيض. غيّر خصائص المزج إلى Soft Light من لوحة الشفافية Transparency للسماح للتدرج بالتفاعل مع الألوان الأصلية. الشكل النهائي للحرف يبدو عظيمًا. إنّ تقنيات الإليستريتور البسيطة من المسارات الإضافية والنقوش المنقطّة تجعل من السهل زخرفة الحرف. تمت إضافة المزيد من التفاصيل الدقيقة التي أضافت زخرفة منمقة وجعلت النتيجة النهائية أكثر أناقة بالرغم من أن هذه التفاصيل مجرد أشكال أساسية بسيطة. بإمكانك إنشاء المزيد من الحروف المزخرفة والأرقام باتباع ذات النمط في هذا الدرس. ترجمة -وبتصرّف- للمقال: How To Create a Decorative Drop Cap in Adobe Illustrator لصاحبه: Chris Spooner

من الممتع جدًّا تصميم شخصيات كرتونية في برنامج أدوبي إليستريتور. لا تحتاج حتى إلى مهارات عظيمة في الرسم. إن استخدام الأشكال الأساسية البسيطة لا تقوم بتبسيط الرسم فقط بل وتجعله أنيقًا ولطيفًا. في درس اليوم سأعلمكم كيفية تصميم فكتور ديناصور خطوة بخطوة. إنه مصنوع فقط من المستطيلات والدوائر ولكن باستخدام بعض الأدوات الذكية سنصمّم شخصية واضحة وبسيطة. الشخصية التي سنقوم بتصميمها هنا هي ديناصور لطيف. الأشكال الدائرية والألوان الفاتحة ستمنح الشخصية شكلًا محبّبًا ما يجعلها مثالية لجميع المشاريع التي تتعلق بالأطفال. هذا النوع من التصاميم بات شائعًا بشكل كبير حيث يتم تبسيط التفاصيل إلى أشكال مسطحة. افتح برنامج الإليستريتور ثم أنشئ مستندًا جديدًا واختر أداة المستطيل مستدير الزوايا. أثناء سحب الشكل انقر على مفتاح السهم الأيمن من لوحة المفاتيح لتكبير نصف قطر زاوية المستطيل حتى تصل إلى أكبر قياس. اختر أداة المستطيل العادي وارسم شكلًا يمثّل الساق. اختر أداة التحديد العادية واسحب المستطيل للجانب مع الاستمرار بالضغط على مفتاحي Shift وAlt لمضاعفته مع المحافظة على التوازي. كرّر العملية لإنشاء الأقدام الأربعة مع محاذاة القدم الأخيرة مع حافة جسم الديناصور. اختر أداة التحديد المباشر Direct Selection ثم انقر واسحب النقطة في الزاوية العلوية الأخيرة من مستطيل القدم للأعلى حتى تصل إلى جسم الديناصور. استمر في الضغط على مفتاح Shift لتقييد اتجاه الحركة. حدّد جسم الديناصور الرئيسي مع الأقدام الثانية والأخيرة ثم اضغط على خيار Unite من لوحة Pathfinder لدمج جميع هذه الأشكال معًا. في مكان آخر على لوح الرسم ارسم مستطيلين مستديري الزوايا صغيرين لتشكيل الرأس. تأكّد من مطابقة الحافة اليمنى. أدمج الشكلين Unite من لوحة Pathfinder. استخدم أداة الدائرة لرسم العينين الصغيرتين مع لون تعبئة أسود ثم ارسم دائرة أخرى واجعل لون الحدود أسود بدون لون تعبئة. استخدم أداة التحديد المباشر لحذف النقطة السفلية تاركًا نصف دائرة. اجعل نهايات الحدود مستديرة Round Cap من لوحة الحدود Stroke ثم ضاعفها لتشكيل فتحتي الأنف. ارسم دائرة أكبر قليلًا داخل مساحة الرأس ولوّنها بالأبيض مع حدود سوداء. واستخدم أداة التحديد المباشر لحذف النقطة العلوية تاركًا نصف دائرة. اختر أداة التحديد واسحب الشكل للجانب مع الاستمرار بالضغط على مفتاحي Alt وShift. استخدم الأدلة الذكية لمطابقة بداية النسخة مع نهاية الشكل الأصلي. استخدم الاختصار CMD+D لإعادة تكرار العملية الأخيرة ثلاث مرات لتشكيل سلسلة أشكال محاذية لبعضها. استخدم أداة الخط Line لإضافة مسار فوق سلسلة أنصاف الدوائر لتشكيل الفم. استخدم خيار النهايات المستديرة Round Cap من لوحة الحدود Stroke لجعل طرفي الخط مستديرين. حدّد جميع الأشكال التي تشكّل الفم ثم اذهب إلى القائمة Object > Transform > Envelope Distort اختر شكل القوس Arc وعدّل الانحناء لنحو 17%. ضع كامل شكل الرأس فوق الجسم ثم ارسم مستطيلًا سيكون الأساس لرقبة طويلة مستخدمًا الأدلّة الذكيّة لمطابقة الحواف مع الخطوط. استخدم أداة التحديد المباشر لتحريك النقطة العلوية اليسرى للداخل لتعديل الشكل الكلّي للرقبة مانحًا إياها مظهرًا مدبّبًا. ارسم دائرة باستخدام أداة الدائرة ثم اضغط Alt مع سحب نسخة عنها بشكل متداخل مع الدائرة الأصلية. اختر خيار Subtract من لوحة Pathfinder لتشكيل شكل هلال. دوّر شكل الهلال وضعه على جانب جسم الديناصور ليكون الذيل ثم حدّد شكل الذيل والرأس والجسم واختر الخيار Unite من لوحة Pathfinder. ترتيب تراص العناصر سوف يتأثّر، لذلك اضغط بشكل متكرر على ]+CMD لإرسال الجسم أسفل باقي العناصر حتى تظهر عناصر الوجه، ولكن لا ترسله زيادة حتى لا يكون الجسم تحت شكل الأقدام. اختر أداة الدائرة وارسم دائرة عند قاعدة رقبة الديناصور. استمر بالضغط على Alt وShift أثناء سحب نسخة من الدائرة ثم اضغط على CMD+D لتكرار عملية النسخ الأخيرة إلى أن تغطي الدوائر رقبة الديناصور. اسحب نسخًا أخرى باتجاه ظهر الديناصور. ارسم تحديدًا حول جميع الدوائر على الرقبة والظهر مع تحديد الجسم نفسه. البديل للوحة Pathfinder هو أداة بناء الشكل Shape Builder. استمر بالضغط على Alt أثناء النقر على الخط المحدّد باللون الأحمر من الدوائر الموجودة داخل جسم الديناصور لإزالتها. ارسم مجموعة متنوعة من الدوائر مختلفة الأحجام عبر جسم الديناصور حتى ولو كانت تمتد خارج مساحة الجسم. استخدم ذات الأداة Shape Builder لقص هذه الدوائر أيضًا وهذه المرّة انقر على منطقة الشكل الرئيسي أثناء الاستمرار بالضغط على Alt. ارسم دائرة جديدة قرب منطقة القدم. احذف النقطة السفلية من الدائرة ثم اسحب ثلاث نسخ عنها. عدّل حجم هذه الدوائر بشكل يتناسب مع حجم أسفل القدم. انسخ هذه الأشكال وضعها أسفل جميع الأقدام. العملية الرئيسية لبناء الشخصية قد اكتمل. سنقوم الآن بإضافة بعض الألوان. حدّد الجسم الرئيسي ولوّنه باللون الأخضر. قم بإلغاء الحدود السوداء. لوّن باقي الأقدام بلون أخضر أكثر قتامة بقليل، واللون الزهري لنتوءات الرقبة والظهر، واللون الأصفر للبقع على الجسم. احصل على أي خامة جرونجي من الإنترنت وألصقها في الإليستريتور. استخدم لوحة Live Trace لتحويلها إلى فكتور. فعّل خيار تجاهل الأبيض Ignore White وألغِ تفعيل خيار مطابقة المنحنيات إلى الخطوط Snap Curves to Lines ثم حرّك المزلاج إلى الخلف وللأعلى حتى تجد أفضل نتيجة. عدّل حجم وموقع الخامة لتتداخل مع لوحة الديناصور الكليّة. الهدف هو إيجاد المنطقة المناسبة لإبراز آثار الجرونجي وتأثيراتها على التصميم. اذهب إلى القائمة Object > Expand لتحويل التتبع الحي إلى شكل فكتور جامد. انسخ CMD+C وألصق في المقدمة CMD+F نسخة عن الجسم الرئيسي ثم حدّد نسخة الجسم الجديدة مع الخامة واختر الخيار Crop من لوحة Pathfinder لقص شكل الخامة ضمن حدود الجسم الرئيسي. خفّف التعتيم opacity للخامة إلى 10% فقط للحد من تأثيرها على شكل الجسم الرئيسي للديناصور. النتيجة النهائية لشخصية فكتور الديناصور أصبحت جاهزة ومكتملة مع الأشكال البسيطة والألوان الفاتحة والخامة المناسبة. إن استخدام الأشكال المستديرة الزوايا والدوائر منح الشخصية مظهرًا لطيفًا ومحبّبًا ما يجعله مثاليًّا لمشاريع التصميم من أجل الأطفال. يمكن استخدام ذات التقنيات لإنشاء شخصيات لطيفة بحيث أن كل ما تحتاجه هو العمل باستخدام الأشكال الأساسية البسيطة وخيالك لتصميم الشخصيات الرائعة. ترجمة -وبتصرّف- للمقال: How To Create a Cute Dinosaur Character in Adobe Illustrator لصاحبه: Chris Spooner