Pac-man لعبة معروفة لدى غالبيّة الناس، وتعدّ اليوم أحد رموز ثمانينيات القرن الماضي، تلك اللعبة التي يتجول فيها باك مان في المتاهات وهو يتناول النقاط، هاربًا من أعداءه الوحوش تارة، وملتهمًا إيّاهم تارة أخرى. سينصبّ تركيزنا على الوحوش: Blinky ،Pinky ، Inky وClyde. سنصنع معًا وحش لعبة باك مان الخاصّ بنا بنظام ألوان 8-بت في برنامج Illustrator، وستتمكن في نهاية الدّرس من صنع وحش إضافي بنظام ألوان 8-بت لتحصل على نقاط إضافيّة.

سنصنع اليوم الوحش Pinky والمعروف كذلك باسم Speedy.

افتح ملفًّا جديدًا في Illustrator، ولتكون الأمور سهلة قدر الإمكان سنعدّل الشبكة لنتمكّن من العمل في مربعات قياس ضلعها 20px. افتح قائمة Edit ثم اختر:

Preferences > Guides & Grid

في مربّع حوار Preferences غيّر إعدادت الشبكة إلى خطّ شبكة Gridline لكل 20px والتقسيمات الفرعية Subdivisions إلى 1 ثم اضغط Ok. في حال أردت العودة إلى الإعدادات الافتراضية فإن قيمة خطّ الشبكة الافتراضية هي خطّ شبكة لكل 72pt و التقسيمات الفرعية 8.

لعرض الشبكة التي أنشأناها اذهب إلى قائمة View ثم اختر إظهار الشبكة Show Grid. تأكد كذلك ومن خلال قائمة Edit من تحديد خيار الانجذاب نحو الشبكة ("+Snap to Grid (SHIFT+CTRL سيساعدنا هذا الخيار في محاذاة العناصر بالاعتماد على الشبكة.

بما أننا سنصنع شخصية الوحش Pinky سنختار اللون الوردي كلون للتعبئة Fill color وحد خارجي Stroke شفاف (استخدمت اللون ذي القيمة #fcbee3، ولكن بإمكانك استخدام اللون الذي يعجبك)، بعدها سنصنع الشكل الأساسي للوحش Pinky بواسطة أداة المستطيل (Rectangle Tool (M لتعبئة المربعات المفردة عن طريق السحب من زاوية معينة باتجاه الزاوية المعاكسة لها.

استمر في تعبئة جسم الوحش Pinky حتى تحصل في نهاية المطاف على شكل وحش بنظام 8-بت.

اصنع عيني Pinky مستخدمًا اللونين الأبيض والأزرق الغامق للحدقتين (استخدمت اللون ذا القيمة #3b2ea2 للأزرق الغامق).

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

لجعل Pinky ثلاثي الأبعاد اذهب إلى قائمة Effect ثم اختر:

3D > Extrude & Bevel

وفي مربع الحوار غيّر قيمة Extrude Depth إلى 30pt، وBevel إلى Tall-Round وHeight إلى 3pt واضغط OK.

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

نقاط إضافية

لماذا لا نصنع وحش باك مان على هيئة زومبي، باستخدام الطريقة ذاتها؟

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

ترجمة -وبتصرّف- للمقال Create an 8-bit PacMan Style Ghost 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.

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

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

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

نستخدم خطوط التوجيه الذكية (CMD+U)، لالتقاط نقاط المسارات بسهولة، بعدها نقوم برسم خط متعرج آخر فوق المربع.

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

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

نضغط على الزر الأيمن للفأرة ونختار Ungroup، ثم نحدد مساحة المربع ونحذف أي خط زائد.

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

نختار الأداة Eyedropper ونضغط على CMD+Shift ثم على الأشكال بشكل عشوائي لتحديدهم، الآن نضغط مرة أخرى على الأداة Eyedropper ونختار المربع الأول لتحديد تعبئته ثم نطبقها على الأشكال المضلعة.

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

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

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

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

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

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

من خلال إطار الشفافية نغير النمط من blending إلى Overlay وذلك لجعل اللون الأبيض يتفاعل مع اللون الأزرق الأساسي وإضافة المزيد من التباين في الألوان.

نضاعف الدائرة ونضعها عشوائيا في مكان ما على التصميم وذلك لإضافة إضاءة ساطعة جميلة عليه.

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

ترجمة وبتصرف للمقال How To Create an Icy Blue Vector Geometric Design لصاحبة 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.

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

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

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

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

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

احذف الأجزاء غير المرغوبة من شكل الأذن، والذي لا يزال بإمكاننا تحديده بشكل منفرد.

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

Object > Transform > Reflect

ارسم دائرة أصغر داخل منطقة الرأس الرئيسية ثم استمر بالضغط على Alt وShift أثناء سحب الشكل لصنع نسخة عنه. استخدم الأدلة الذكية Smart Guidesبالضغط على CMD+U ما سيجعل محاذاة الأشكال جنباً إلى جنب أسهل.

اصنع نسختين عن تلك الدوائر وداخلهما قليلاً مع الأصلية.

حدد الدوائر الأربعة واضغط على خَيَار Merge من لوحة Pathfinder لتدمج المسارات في شكل مُوَّحَد. صحيح أنّ هناك بعض الفجوات ولكننا نقوم بسدّها.

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

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

أعطِ الوجه الداخلي للشكل حدوداً حمراء مع تكبير الحدود إلى 10 pt (أقل بقليل من حدود الشكل الرئيسي).

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

في مكان آخر على لوحة الرسم ارسم دائرة أخرى. أضف قَطعَاً بأداة المقص Scissors بين نقطتي ربعي الدائرة ثم حدد النقاط الثلاثة المتبقية بأداة التحديد المباشر Direct Selection واحذفهم.

ارفع سماكة الحدود على هذا المسار القصير إلى 16 pt وحدد خَيَار Round Cap لتجعل نهايتي المسار مستديرتين.

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

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

استخدم أداة الخط Line tool لرسم مسار قصير بزاوية 45° (بالضغط على Shift). أعطِ هذا المسار حدوداً حمراء بسماكة 10 pt وبنهايات مستديرة.

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

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

Object > Expand 

واختر Stroke فقط. اضغط OK لتحول هذه المسارات إلى أشكال.

في بعض الحالات لا يسمح لك الإليستريتور بعملية Expand للمسار مع حدوده الخارجية ولذلك تحتاج إلى أمر Expand Appearance. إذا جربت Expand بعد تحديد كل شيء سترى أنّ خَيَار Expand Appearance هو الوحيد المُفعّل والذي قد لا يحوّل باقي المسارات. أعلم أنّ هذا جنون.

العينين والأنف هي أشكال ذات تعبئة بالتأكيد (ليست مسارات بحدود) لذلك لا تحتاج إلى توسيع Expand . حدد كل الكائنات وتأكد للمرة الأخيرة أنه لا يوجد مسارات بحدود ثم ادمجهم Merge من Pathfinder.

هذا يجعل شكل الملصق النهائي كاملاً.

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

ترجمة -وبتصرّف- للمقال: How To Create a Monkey Face with Vector Line Work لصاحبه Chris Spooner.l.

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

هذا هو الشعار الذي سنقوم بتصميمه "Virgil’s Classic Barber Shop". لقد استعملت الأسلوب القديم الشائع وقتها مع أيقونات صغيرة تعبّر عن طبيعة العمل. سوف نقوم ببناء كل العناصر ونؤلف تنسيق الشعار ثم نضيف تأثير الخشونة عليهم لإضفاء الشعور بالزمن الذي مرّ عليها.

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

حدد الدائرتين المرسومتين وانقر على Subtract من لوحة Pathfinder لإنشاء الشكل المحصور بين الدائرتين مع إهمال قلب الدائرة الداخلية. واستبدل الحدود السوداء بتعبئة سوداء.

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

أزِل صورة المقص القديم ثم اذهب إلى القائمة:

Object > Transform > Reflect

انقر على Copy لإنشاء نسخة ثم قم بتدويره لتُشَكّل أيقونة مقصّ كامل.

ارسم تحديداً حول الأشكال الأربعة ثم اختر Merge من لوحة Pathfinder لتدمجهم في شكل واحد.

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

بإمكاننا رسم أيقونة الشاربين يدوياً. انقر واسحب أربع نقاط بأداة القلم Pen لتشكيل منحني ناعم أشبه بشكل دمعة.

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

حدد العنصرين واصنع نسخة معكوسة أفقياً.

حرك النسخة نحو اليمين تاركاً مداخلة طفيفة بين النسختين ثم ادمجهما Merge من لوحة Pathfinder.

في مكان آخر على لوح الرسم استخدم أداة المستطيل لرسم خط طويل رفيع. دوّره بزاوية 45° مع الضغط على Shift ثم انسخ CMD+C وألصق في المقدمة CMD+F لتصنع نسخة أخرى ثم دوّرها بزاوية معاكسة تماماً.

عدّل حجم ومواضع الرسومات الصغيرة داخل العنصرين الأخيرين ثم أضف التاريخ لتعبئة الفراغات.

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

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

أدمج الكتابة مع عناصر التصميم وقم بمحاذاة كلاهما مع محور Y باستخدام لوحة Align.

سنكتب السطر الثاني في تصميمنا والذي سنستخدم خط sans-serif Avenir لكتابته. قم بزيادة دقة Tracking بشكل دراماتيكي إلى 350 وعدّل حجم النص الجديد تحت الشعار بشكل متناسب وملائم.

اضغط على Alt وShift واسحب دائرة من مركز الخطين المتقاطعين بأداة Ellipse. احذف النقطة السفلية بأداة التحديد المباشر Direct Selection ثم انقر على مسار نصف الدائرة المتبقي باستخدام خَيَار النص من أداة

استخدم نوعية الخط الأخيرة نفسها لإدخال قائمة خدمات المحل ثم حرّك مقابض النص على أداة المسار Path tool إلى حواف المسار باستخدام Direct Selection. غيّر محاذاة النص إلى المنتصف لتحقيق محاذاة مثالية مع منتصف المنحني.

زِد المسافة بين الكلمات ثم عدّل حجم ودوران وموضع الشاربين لجعله يفصل بين الكلمات.

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

Object > Expand

حدد فقط خَيَار Object لجعل كافة التعديلات دائمة.

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

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

Effect > Distort & Transform > Roughen

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

ضع الإعدادات التالية:

• Options = 0.2mm
• Absolute Detail = 15/in Smooth

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

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

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

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

ترجمة -وبتصرّف- للمقال: Create a Trendy Vintage Style Barber Logo in Illustrator لصاحبه Chris Spooner.

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

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

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

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

ارسم دائرة على لوح الرسم بدون تعبئة إنما بحدود سوداء فقط. اختر سماكة الحدود التي ستتابع بها بقية الرسم، أنا اخترت سماكة 3 pt. انسخ CMD+C وألصق في الأمام CMD+F وبذلك نكون قد نسخنا الدائرة والآن غيّر حجم الدائرة الجديدة بالاستمرار بالضغط على مفتاحي Alt و Shift. قم بزيادة سماكة الحدود لتمثّل العجلة الخلفية الكبيرة.

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

ارسم مستطيل طويل نحيف أسود مستدير الزوايا ذو نهايات نصف دائرية كاملة. أضف مؤقتاً مستطيل لقص الجزء العلوي بواسطة أدوات Pathfinder وتحديداً أداة إلغاء المقدمة Minus Front.

قم بمحاذاة مستطيل عادي إلى مركز الزاوية المستديرة واجعله بدون تعبئة ولتكن الحدود بسماكة 3 pt.

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

استخدم أداة القلم لرسم إطار جسم الدراجة بخطوط مستقيمة.

حدد المسار ثم اذهب إلى القائمة:

Effect > Stylize > Round Corners 

وعدّل قيمة نصف القطر حتى تتحول الزوايا الحادة إلى مسارات ناعمة منحنية.

استخدم أداة القلم Pen tool لإضافة بعض التفاصيل الأساسية إلى شوكة التعليق ولبناء المقود. حدد خَيَار Round Cap في قائمة Stroke لتنعيم نهايات كل الخطوط.

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

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

انسخ وألصق في المقدمة نسخة عن العجلات وبدّل الحدود إلى 3 pt. كبّر حجمها قليلاً ثم قص المسار بأداة المقص Scissors tool فقط بعد النقطة العلوية.

حدد واحذف النقاط اليمنى والسفلى لنُشَكّل رفرف مطابق للعجلة. غيّر إعدادات السماكة لإعطاء المسار مظهر قبعة مستديرة.

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

ارسم خط مفرد أفقي بسماكة 3 pt مع إعدادات أطراف مستديرة، ثم استمر بالضغط على مفتاحي ALT و Shift واسحب نسخة مباشرة إلى الأسفل. كرر الضغط على CMD+D لتنتج سلسلة من الخطوط المتباعدة بشكل متساوٍ.

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

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

ضاعف وقم بتدوير كلا النسختين لتشكّل محرك موديل V-Twin.

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

غيّر حجم وموضع المحرك الكلي داخل إطار الدراجة.

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

مدّد المسار مستخدماً أداة القلم Pen tool. انقر على نقطة النهاية المفتوحة لتتابع المسار ثم ضع نقطة أخرى أثناء الاستمرار بالضغط على Shift لإنشاء خط مستقيم.

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

اذهب إلى:

Object > Expand 

وفعّل فقط خَيَار Stroke. هذا سيحوّل المسار إلى شكل جامد.

سنعطي هذا الشكل الجامد حدود ظاهرة بسماكة 3 pt لتتناسب مع تنسيق الرسم ككل.

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

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

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

Object > Expand Appearance

والآن اذهب إلى القائمة:

Object > Expand

فعّل الخيارات Appearance وExpand وهذا ما سيحول كافة الحدود إلى أشكال.

اضغط على أيقونة Merge من الخط السفلي لخيارات لوحة Pathfinder لمسح أي مسارات متقاطعة حيث تتداخل مختلف الأشكال.

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

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

Select > Same > Fill Color

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

ألصق المخطط وقم بجمع Group العناصر معاً. يمكنك الآن تغيير لون هذه العناصر بأمان بدون أن تتلون أية مساحات سلبية بين العناصر.

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

ترجمة -وبتصرّف- للمقال: How To Create Stylish Pictogram Inspired Illustrations لصاحبه Chris Spooner.

سنقوم في هذا الدرس بتصميم رسمٍ لبوصلةٍ مزخرفةٍ مظللةٍ باللونين الأبيض والأسود وبتفاصيل دقيقة باستخدام تأثيرات نقوش مختلفة متناظرة.

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

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

ملاحظة: سيتكرر ذكر المفتاح CMD في هذا الدرس وهو فعلياً المفتاح Command في الأجهزة التي تعمل بنظام ماكنتوش وتعادل المفتاح Ctrl في نظام ويندوز.

فعّل الأدلة الذكية Smart Guides بالضغط على CMD+U لتجعل المؤشر يتطابق مع نقاط الارتكاز عند استخدام أداة الخط Line tool لرسم التقاطعات بين النقاط الداخلية والخارجية للنجمة.

ارسم تحديداً حول كامل الكائن وانقر على خَيَار التقسيم Divide من لوحة إيجاد الأثر Pathfinder. اضغط بالزر الأيمن وألغِ تجميع العناصر Ungroup حتى يصبح بالإمكان تحديد كل شكل فردياً.

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

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

ضع عناصر كلا الكائنين معاً في مجموعة واحدة Group وقم بمحاذاتهم للمركز. استخدم الاختصار ]+CMD+Shift أو استخدم الزر الأيمن وافتح قائمة الترتيب Arrange لإرسال النقاط 16 جميعاً إلى خلف جميع الأشكال.

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

استمر بالضغط على Alt وابدأ برسم دائرة سوداء من مركز النجوم. انسخ بالضغط على CMD+C وألصق في الأمام بالضغط على CMD+F لتصنع نسخة وبدّل لون التعبئة إلى الأبيض وغير الحجم إلى دائرة أصغر حجماً قليلاً بالاستمرار بالضغط على Alt.

في مكان آخر على اللوحة ارسم خطاً صغيراً عمودياً بحدود 1 pt. استمر بالضغط على Alt وShift واسحب نسخة جديدة إلى الموقع. اضغط مراراً على الاختصار CMD+D لتكرر العملية مجدداً لتُشَكّل سلسلة من الخطوط المتباعدة بشكلٍ متساوٍ. أزل الحدود من آخر خط فقط.

ارسم تحديداً حول سلسلة الخطوط وانقر على أيقونة New أسفل لوحة الفراشي Brushes palette. اختر فرشاة النقش Pattern Brush من الخيارات المتاحة أمامك.

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

ابدأ برسم شكل جديد بأدوات النجمة Star tool في مكان ما على اللوحة. خفف عدد النقاط إلى 3 ثم اضغط على Alt باستمرار لتعيد تعيين الزوايا لتنتج مثلثاً صغيراً. اسحب النقطة العليا في المثلث عمودياً للأعلى باستخدام أداة التحديد المباشر Direct Selection مع الاستمرار بالضغط على Shift لتمديد الشكل.

أنشئ سلسلة نسخٍ متباعدة بشكل متساوٍ من هذا الشكل باستخدام تقنية السحب مع Alt وبعدها CMD+D كما فعلنا سابقاً. حدد النقاط في أعلى يمين آخر مثلث واحذفهم قبل إنشاء فرشاة نقش جديدة. إنّ ترك النقاط فارغة تسمح لفرشاة النقش بالتكرار حتى مع التباعد.

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

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

استمر بالضغط على Alt وارسم دائرة أكبر بحدود 1 pt وبدون تعبئة من مركز التصميم. اضغط ]+CMD+Shift لإرسال هذا الشكل إلى الأسفل، ثم اذهب إلى قائمة:

Object > Transform > Scale 

وأدخل القيمة 105%. انقر على Copy لتُنشِئ نسخاً أكبر قليلاً.

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

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

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

لصناعة عناصر متباعدة بالتساوي حول التصميم اختر أداة الدوران Rotate استمر بالضغط على Alt وقم بمحاذاة نقطة المحور مع مركز التصميم. في نافذة الخيارات احسب الزاوية بقسمة عدد العناصر على 360° وبذلك فإنّ الزاوية المطلوبة في حالة عنصر 16 نقطة هي 22.5 .انقر على نسخ Copy لإنشاء أول نسخة ثم اضغطCMD+D لتكرار العملية.

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

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

ترجمة -وبتصرّف- للمقال: How To Create an Ornate Compass Rose in Illustrator لصاحبه Chris Spooner.

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

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

لنبدأ بصناعة النقش الأساسي الذي سيكوّن الحبل. افتح برنامج Adobe Illustrator وارسم قَطْعًا ناقصًا ellipse على لوحة العمل. فعّل الأدلة الذكية Smart Guides بالضغط على (CTRL+U, CMD+U) ثم اضغط مفتاح ALT واسحب لمضاعفة الشكل ثم اجعله محاذيًا تمامًا للشكل الأصليّ.

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

استخدم أداة المقص Scissors Tool لقصّ مسار القطعين الناقصين في النقطة التي يتقاطع فيها المستطيل معهما.

حدّد واحذف النقاط السفلية واليسرى للشكل الأول، والنقاط العلوية واليمنى للشكل الثاني، للحصول على خط منحنٍ.

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

كرّر الخطوة السابقة عدّة مرات وذلك بالضغط على CMD+D أو CTRL+D لتحصل على قطعة صغيرة من الحبل.

استخدام أداة المقصّ لقص المسار الزائد في نهاية الشكل حيث يتقاطع مع المسار اللاحق.

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

كررّ العملية في الجهة الأخرى من الحبل. يمكن استخدام نصف الدائرة هذا مرة أخرى عن طريق تدويره بزاوية 180°.

ارسم تحديدًا حول جميع المسارات وزِد قيمة وزن الحدّ الخارجي Stroke. قم بتوسيع الشكل Expand من خلال الذهاب إلى:

Object > Expand

والضغط على OK لتحويل الحد الخارجيّ إلى شكل صلب.

اختر التوحيد Unite من لوحة Pathfinder لمزج جميع الأجزاء المفردة في شكل واحد.

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

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

اضغط ALT واسحب الشكل بوساطة أداة التحديد Selection Tool لتصنع نسختين أخريين من الشكل.

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

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

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

اختر كل قطعة من الحبل بالإضافة إلى المستطيل المحيط بتلك القطعة، ثم اختر خيار القصّ Crop من لوحة Pathfinder لقص الشكل بحجم المستطيل.

اسحب القطع الثلاثة المتكونة إلى لوحة Swatches.

افتح لوحة الفُرش Brushes واضغط على أيقونة (جديد New) وأنشئ فرشاة جديدة. اختر فرشاة النقش Pattern Brush.

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

ارسم مسارًا باستخدام أداة القلم Pen Tool ثم طبّق الفرشاة الجديدة عليه لاختبارها.

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

ولكن انتظر هناك مشكلة

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

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

نعود إلى لوحة العمل

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

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

قُصّ المسار قبل وبعد كل مساحة يتراكب الحبل فيها، ثم استخدم الاختصارات CMD+} أو CTRL+} أو CMD+{ أو CTRL+{  لتغيير تراتبية القطع المقصوصة فوق بعضها البعض.

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

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

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

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

لنخط خطوة أبعد

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

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

انتقل إلى برنامج Photoshop وألصق اللوحة التيبوغرافية على خلفيّة جميلة لإضافة بعض اللمسات النهائية إلى التصميم.

أضف لونًا إلى الحبل بواسطة Color Overlay مع نمط مزج Multiply، ثم اختر نمط المزج Screen للطبقة لتصبح المناطق البيضاء مرئية فقط.

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

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

ترجمة -وبتصرّف- للمقال How To Create Ropes & Knots with Illustrator Brushes لصاحبه Chris Spooner.

يعتبر برنامج أدوبي اليستريتور adobe illustrator أداة مثالية لعمل ما يسمى بالفن التجريدي عن طريق استخدام الأشكال الأساسية ومجموعة من الخطوط، وفي درسنا هذا سنتعلم طريقة عمل شريط هندسي فني عن طريق الاستعانة بـ custom Art Brush. التأثير الذي سنقوم بعمله سيظهر بشكل رائع رغم أننا لن نستخدم سوى مجموعة من الخطوات البسيطة كما انه بإمكاننا استخدام تلك الخطوات لعمل شعار جميل أو لعمل كتابة فنية typography.

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

نقوم بفتح ملف جديد ثم وباستخدام أداة المستطيل rectangle tool نرسم مستطيل يكون طويلا ورفيعا ثم نختار له اللون الأسود . نقوم بإظهار الخطوط التوجيهية عن طريق الاختصار (CMD+U) ثم نقوم بسحبه مع الضغط على المفتاحين alt و shift في نفس الوقت وذلك لمضاعفته. حيث أن الخطوط التوجيهية ستساعدنا على وضع الأشكال جنبا إلى جنب بدقة.

نقوم بتكرار العملية عن طريق الضغط على الاختصار CMD+D وذلك لمضاعفة الشكل وعمل سلسلة مرتبة ومتناسقة.

نحدد جميع المستطيلات الناتجة (التي تكون بين المستطيلات السوداء) ونقوم بتعبئتها باللون الأبيض لينتج لنا شريط كالذي في الصورة:

نضغط على الأيقونة "New" الموجودة على لوحة الفُرش لعمل فرشاة جديدة، ثم نضغط على option و نختار وضع الفرشاة بشكل عمودي من قائمة الإعدادات ثم نضغط على زر موافق:

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

نستخدم أداة القلم Pen tool ونضيف نقطتين على الشكل بحيث تكون بين النقطتين الموجودتين سابقا. بعدها نضغط على الفتاح delete ونحذف جزء من الدائرة ونبقي 3/4 منها:

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

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

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

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

إذا قمنا بمحاذاة الأشكال بطريقة جيدة سنلاحظ أنها تتوزع بسلاسة من شكل لآخر:

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

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

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

في مكان آخر من مساحة العمل نرسم مستطيل كبير ونملأه بالتدرج اللوني، حيث نختار لونين من الألوان الزاهية لينتج لنا تدرج لوني حيوي:

نقوم بتحديد المستطيل، ثم ومن لوحة الشفافية Transparency panel نضيف له الخاصية Make Opacity Mask:

نستخدم الاختصار CMD+V لوضع الشكل الذي قمنا بنسخه داخل التأثير Opacity Mask، أما اللونين الأبيض والأسود فهما لإظهار وإخفاء المناطق التي تحتوي على تدرج اللوني. نضغط على المربع الموجود يسار لوحة الشفافية للإيقاف خصائص mask mode:

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

ترجمة -وبتصرف- للمقال How To Create Geometric Stripy Line Art in Illustrator لصاحبه Jon-Kristian.

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

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

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

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

ارسم مستطيلًا مدوّر الحوافّ في مكان آخر على لوحة العمل، انسخ (CTRL+C) وألصق في المقدمة (CTRL+F) ثم اسحب أفقيًا إلى أن تصبح الحوافّ متحاذية مع بعضها البعض. اضغط (CTRL+Y) للدخول إلى نمط عرض الحدود الخارجية للحصول على دقّة أعلى. كرّر هذه العملية مرة أخرى للحصول على ثلاثة مستطيلات متحاذية.

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

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

استخدم أداة التحديد المباشر لحذف المنحنيات العلويّة والجوانب من المستطيلين المجاورين.

اسحب مربعًا للتحديد بين النقطتين المفتوحتين بين المستطيل الأيسر، الأيمن والأوسط، ثم اضغط (CTRL+J) لربط الأشكال بمسار مستمر.

حدّد الجزء السفليّ، والمستطيل الرئيسيّ العلويّ، ثم اضغط على خيار الدمج Unite من لوحة Pathfinder.

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

ارفع قيمة الحدّ الخارجي Stroke للمسار إلى حوالي 28pt، ثم حدّد خَيَار الأغطية المدوّرة Round Cap.

اذهب إلى:

Object > Expand

ثم حدد خيار Stroke فقط. سيحوّل هذا الأمر الحدّ الخارجي إلى شكل صلب.

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

استخدم أداة المستطيل مدوّر الحواف لرسم شكل الفم، ثم اذهب إلى:

Object > Path > Offset path

لصنع شكل أكبر موازٍ للشكل الأصلي.

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

Object > Blend > Make

ثم غيّر إعدادات المزج وأدخل القيمة 3 في خانة الخطوات المحددة Specified Steps.

اذهب إلى:

Object > Expand

مرّة أخرى ولكن حدد الخيار Object هذه المرّة لتحويل المزج إلى أشكال مفردة.

أزل التجميع Ungroup من الأسنان، ثم اذهب إلى:

Object > Compound Path > Make

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

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

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

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

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

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

أضف بعض العمق إلى الشكل وذلك باستخدام التوهّج الداخلي Inner Glow اذهب إلى:

Effect > Stylize > Inner Glow

اختر لونًا أزرق أغمق بقليل من لون الجسم وأدخل القيمة 5mm في خانة Blur.

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

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

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

املأ الشفاه باللون الأحمر الفاتح، ثم أضف توهّجًا داخليًا ورديّ اللون لإضفاء مظهر دائري عليها.

أضف توهّجًا خارجيًّا إلى الشفاه بنفس اللون الذي استخدمته للعينين.

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

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

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

Select > Same > Fill Color

لتحدد جميع الدوائر بسهولة.

عدّل تراتبية الأشكال بالضغط على CTRL+[ لتمنع الدوائر من التداخل مع تعابير وجه الوحش. ثم غيّر نمط المزج Blending Mode إلى Color Burn لتسمح للون التعبئة بالتداخل مع التدرج اللوني لجسم الوحش.

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

ترجمة -وبتصرّف- للمقال Create a Cute Baby Monster Character in Illustrator لصاحبه Chris Spooner.

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

سنتعلم أيضا طريقة استخدام أداة (Mesh Tool (U، لوحة الأشكال Symbol Panel وكذلك أداة (Symbol Sprayer Tool (Shift+S.

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

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

1. نقوم بفتح ملف جديد واختيار الإعدادات التالية:

• الأبعاد: 800x600px.
• نمط الألوان: CMYK .

ثم وباستخدام أداة القلم (Pen tool (P نرسم شكلًا أوّليا يمثل شكل الإجاصة مثل الذي في الصورة:

2. نتبع المسار التّالي:

Effect > Stylize > Round corners

ونحدد قيمة  radius بــ: 30px، أو أي قيمة أخرى مناسبة. إذا قمت بالضّغط على زر موافق ok وأردت بعدها تعديل قيمة  radius فبإمكانك فعل ذلك بإتباع المسار التالي:

Windows > Appearance > Round Corners

3. يمكننا تعديل الشّكل الذي قمنا برسمه وذلك بتحريك النقاط الموجودة على المحيط باستخدام أداة التّحديد المباشر  (Direct Selection Tool (A.عند تغيير أماكن النقاط سنلاحظ أنها تتحرّك بنفس قيمة radius التي حدّدناها سابقا. نستمر في تحريكها والتلاعب بها إلى غاية الحصول على شكل شبيه بالذي في الصورة. ثم نتبع المسار التالي:

 Object > Expand Appearance

4. أنهينا رسم شكل الفاكهة الأوّلي. سنعمل الآن على إضافة بعض اللّمسات التي ستجعل الفاكهة شبه حقيقية. نقوم أولا بملئها باللّون الأساسي C=50, M=35, Y=100, K=12.

5. نحدّد الأداة  (Mesh Tool (U ثم نغير تموضع بعض النقاط كما في الصورة:

6. يمكننا تغيير لون كل نقطة قمنا بتعديل تموضعها أو فعل ذلك بعد الانتهاء من تصميم الشّكل عن طريق استخدام أداة التحديد المباشر Direct Selection Tool وذلك بتحديد كل نقطة على حدا و تغيير لونها:

7. نضيف نقطة جديدة أعلى الشّكل:

8. نحدّد الأداة (Pen Tool (P ونرسم شكلا آخر كما هو مبين في الصورة ثم نملأه باللون C=35 M=70 Y=100 K=30. بعدها نستخدم أداة the Mesh Tool لتلوين الشّكل كما في الصورة:

9. نضع الشكل الجديد فوق الشكل السابق الذي قمنا برسمه:

10. سنقوم الآن برسم الأوراق وذلك باستخدام أداة القلم (Pen Tool (P، ثم نقوم بتلوينها باللّون الأخضر مع استخدام أداة (Mesh Tool (M بنفس الطّريقة السابقة:

11. نضع الأوراق التي قمنا برسمها في مكانها المخصّص كما هو موضح في الصورة، ثم نتّبع المسار التالي:

Object > Arrange > Send Backward

كما بإمكاننا استخدام الاختصار  Ctrl+[ لوضعها خلف الشكل السّابق:

12. نحتاج إلى إضافة بعض النقاط على الشكل. نقوم أوّلا برسم دائرة صغيرة باستخدام الأداة (Ellipse Tool (L ونملأها بالتدرج اللوني C=40 M=90 Y=45 K=0  والأبيض C=0 M=0 Y=0 K=0. ثم نتبع المسار التالي:

Window > Transparency Panel

ونختار القيمة 40%

13. نحدّد الدّائرة التي قمنا برسمها ثمّ نتّبع المسار التالي:

Window > Symbols Panel > Graphic

14. باستخدام لوحة الرموز Symbol Panel نحدّد الشكل الجديد. ثم نحدّد أداة (Symbol Sprayer Tool (Shift+S ونقوم بـتوزيع الدّوائر الصغيرة على جميع الشّكل:

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

بعد إنهاء التعديلات نقوم بالضغط مرتين على المساحة البيضاء وذلك لإيقاف خاصية تعديل الرموز symbol. أما لإكمال عملية توزيع النقاط فإننا نقوم بتحديدها وبعدها نستخدم أداة  Symbol Sprayer Tool لإنهاء عملية التوزيع على الشّكل.

16. نتبع المسار التّالي:

Object > Expand

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

17. نقوم برسم دائرة جديدة باستخدام الأداة Ellipse Tool وملئها بالتدرج اللوني الأبيض والأسود أو من الأخضر الغامق إلى الأبيض.

18. نقوم بضغط الدّائرة لوضعها وراء شكل الفاكهة وذلك بإتباع المسار التالي:

Object > Arrange > Send to Back

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

ملاحظة: في هذا الدرس قمنا باستخدام نمط الألوان CMYK، لكن إذا كان التصميم سيُستخدم على الويب (وليس للطباعة) فالأصح أن يتم استخدام النّمط  RGB.

ترجمة -وبتصرّف- للدّرس Create a Realistic Delicious Pear - Illustrator tutorial.

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

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

افتح مستند Adobe Illustrator جديد (الحجم اختياري) واكتب النّص الذي تريده واختر نوع الخط الذي تريده أيضًا.

قم بعمل حدود خارجيّة للنص outlines عن طريق الاختصار Ctrl+shift+O، ثمّ اضغط بزر الفأرة الأيمن على النص واختر Ungroup لفصل الحروف عن بعضها.

قم بعمل تحديد selection حول كل كلمة (أو مجموعة كلمات) ثمّ أعِد جمع الحروف group معًا باستخدام الاختصار Ctrl+G.

حدّد أوّل مجموعة كلمات ثمّ اذهب إلى المسار:

Effect > Distort > Transform > Free Distort

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

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

حدّد الكلمة التالية ثمّ قم بتحريفها عموديًا (Object > Transform> Shear) إلى أن تتطابق الزاوية مع شكل الكلمة السابقة.

ارسم مستطيلا رفيعا عبر اللوحة، ثم اذهب إلى المسار:

Object > Transform > Shear

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

استخدم أداة القلم (P) لرسم مثلّث لكي تملأ أي مساحة فارغة في المخطط.

حدّد الكلمة التي بعدها ثم طّبق نفس التحويل للحصول على شكل الوتد السابق عن طريق المسار:

  Effect > Apply Free Distort

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

قم بتغيير إعدادات تأثير Free Distort من لوحة المظهر Appearance Panel:

 fx > Distort & Transform > Free Distort

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

بالإمكان نسخ الأشكال الإضافيّة التي تمّ رسمها سابقًا (المثلّث) ثمّ عكسها حول كِلا المحورين الأفقي والعمودي عن طريق المسار:

Object > Transform > Reflect

للحصول على تصميم متناظر.

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

قم بإضافة باقي الكلمات (إن وجدت) إلى المخطط.

قم برسم مستطيل يحيط بالنّص بأكمله. ثم احذف لون الملء لهذا المستطيل ولكن قم بإضافة حد Stroke بعرض 7pt. انسخ الحد (Ctrl+C) ثم الصقه في المقدّمة (Ctrl+F). حدّد النسخة الأمامية ثم اضغط على المفتاح ALT بينما تقوم بتصغير حجم المستطيل لكي تشكّل حد ثاني. قم بتقليل عرض الحد الثاني إلى 2pt.

حدّد أكبر كلمة في النّص وقم بنسخها (Ctrl+C)، ثمّ قم بإضافة حد أبيض سميك بحوّاف مدوّرة ومحاذاة إلى الداخل؛ لاحظ الإعدادات في الصّورة أعلاه.

قم بتحويل الحدّ إلى أشكال مصمتة عن طريق المسار:

Object > Expand Appearance

ثمّ اضغط بزرّ الفأرة الأيمن واختر Ungroup لتحويل الكلمة إلى حروف منفصلة.

حدّد كل حرف من حروف الكلمة السابقة على حِدة ثم اضغط على زرّ Minus Front من لوحة مستكشف المسارات Pathfinder Panel لقص الشكل والحصول على أشكال داخلية جديدة.

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

ارسم في مكان آخر من المستند مربّع صغير أسود اللون ثمّ انسخه (Ctrl+C ثم Ctrl+F). غيّر حجم النسخة الثانية إلى نصف حجم الأولى، فعّل الدلائل (View > Smart Guides) لتساعدك في المحاذاة. غيّر لون المربّع الصغير إلى اللون الأبيض ثم اسحب كلا الشكلين إلى لوحة الحوامل Swatches Panel.

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

بإمكانك الآن إضافة اللمسات الأخيرة بالتعديل على مواضع العناصر أو تحرير مخطط التّصميم.

حدّد جميع عناصر المكّونة للتصميم ثم اجمعها معًا group وقلل قيمة Opacity إلى 15%.

قم بطباعة التّصميم. يجب أن يظهر بشكل باهت على الورقة بسبب تقليل قيمة Opacity. الان، احضر أداة الرسم التّقليديّة؛ قلم الرّصاص.

ابدأ بتلوين التصميم بملء ما بين الخطوط بحذر باستخدام قلم الرّصاص. هذه التّقنية تقلّص الفجوة بين الرسم اليدوي والتّصميم الرّقمي.

بعد أن تنتهي من تلوين النص بقلم الرّصاص قم بمسحه ضوئيًّا scan. ما زال التّصميم مطابقًا للأصل لكن مع بعض التّشويه الناتج عن الرسم اليدوي.

افتح الصورة في برنامج فوتوشوب ثمّ اتبع المسار :

Image > Adjustments > Invert

بعدها اتبع المسار:

Image > Adjustment > Desaturate

لإزالة إي لون ناتج عن المسح الضّوئي. والنتيجة ستكون صورة باللونين الأسود والأبيض.

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

Image > Adjustment > Levels

ثم اسحب منزلق التمييز highlights slider إلى الداخل إلى أن يطابق المخطط البياني الخاص بالمستويات levels histogram.

قم بتنزيل خامة السبورة التالية:

قم بإضافة طبقة ضبط adjustment layer (من أسفل لوحة الطبقات) ثم اختر Black & White لإزالة الألوان من الخامة.

قم بإضافة طبقة ضبط أخرى ولكن هذه المرّة اختر Levels. حرّك منزلقا التظليل shadows والدرجات المتوسّطة midtones لكي تجعل درجة لون الخامة أغمق.

الصق التصميم السابق فوق خامة السّبّورة وغيّر وضع الطبقة Lighten لتجعل الخلفية الناتجة عن المسح الضّوئي شفّافة.

وبذلك تكون وصلت للنتيجة النهائيّة؛ نص بتأثير طباشيري واقعي جدًّا.

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

ترجمة -وبتصّرف- للدّرس How To Create a Realistic Chalk Lettering Effect لصاحبه: Chris Spooner.

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

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

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

أساسا، سنعمل بأداة (Shape tool)، وكذلك (Pathfinder) ثمّ ننظر كيفيّة عمل (Swatches) والخطوط لتحقيق هذا العمل الفنّيّ.

تشكيل سحابة

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

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

اضغط على خاصّيّة (Unite) من (Pathfinder) وذلك من أجل لمّ الأجزاء ودمجها كلّيّة.

غيّر خطّ السّحابة حتّى يكون مثل غرز الإبر وذلك عن طريق تفعيل (Dash Line) واملأ الفراغين (Dash/Gap) بعددين لتعيين المسافة بين أجزاء الخطّ المقسّم ثمّ اضغط على زرّ (Round Cap) حتَّى تجعل نهاية أجزاء الخطوط انسابيّة وجميلة لا مستطيلة حادّة.

غيّر البياض الطبيعي الذي يملأ الشّكل، واضغط مرّتين على لون الخطّ ثم اختر لونا أرجوانيا فاتحا وللتّسهيل فهذا رمز اللّون الذي عملنا عليه في درسنا هذا (#C093C6).

اجعل شكل السّحابة مضغوطا عليه ثم اذهب إلى:

Object > Path > Offset Path

ثمّ اجعله ثلاثة مليمتر (3mm).

حدّد الأخير المعدّل للتو ثمّ حسّنه عبر زيادة حجمه بستّ نقاط (6pt) وعدّل (Dash/Gap) إلى صفر وخمسة نقاط (0pt , 5pt). هذا سيجعل الخطّ المتقطّع يبدو كدائرات متداخلة ممّا يجعلها تبدو جميلة من جهة أحرف الشّكل الذي نصممّه.

غيّر لون الخطّ المنقّط الخارجيّ للّون الورديّ الطّفوليّ، وفي درسنا هذا اخترنا (#F7B5D3).

اختر أداة رسم المستطيل (Rectangle tool) ثمّ قم بنقرة واحدة في مكان ما على لوحة الرّسم، ثمّ أدخل بيانات حجم هذا المستطيل ثلاثة على ستة مليمتر (3x6mm) ليكون لديك مستطيل مثل الذي نستعمله في درسنا هذا بالضّبط.

لوّن المستطيل بنفس اللّون الورديّ ثم انسخه والصقه أمام الأوّل وذلك عبر ضغط الأزرار بالتّوالي (Ctrl+C ثم Ctrl+F).

أدر المستطيل المنسوخ لتسعين درجة ليبدو كالقاطع والمقطوع (90°) ثمّ زد في الشّفافيّة عبر تخفيض (Opacity) لكلا الشّكلين بخمسين بالمائة (50%).

اسحب الشّكلين نحو (Swatches palette)، فإنّ هذا سيولّد (Swatch) تمكنك من صبغِ كلّ الأجزاء بنفس اللّون وهذا ما سيمكّننا من تكوين (Pattern) منقوش.

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

تشكيل القلب

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

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

(Shape builder) يمكنه أيضا مزجها معا مثل (Pathfinder)، قم برسم خطّ يقطع الأجزاء الثلاثة لجعلهما شيئا واحدا.

يمكننا الآن اتّباع نفس الطريقة لعمل النموذج الورديّ مبتدئين مع الخط الخارجيّ بثلاثة مليمتر (3mm) .

بدلا من إعادة كلّ الخطوات السابقة بالإمكان استعمال (eyedroppper) وهي ستنسخ لك النموذج على الشّكل الجديد بلا عناء.

تشكيل الشجرة

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

استعمل (Pathfinder) أو (Shape builder) لدمج الشّكليْن معا.

اجعل الخطّ مقطّعا متّبعا نفس الخطوات المشروحة سابقا باستخدام (Eyedroppper) من أجل تزيين الشّكل بالنّموذج الورديّ.

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

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

تذكّر أنّه يمكنك دائما تعيين الخطّ وإعادة رسمه بالقلم إذا لم يكن رسمك الأوّل سليما أو إذا أردت تعديل بعض النّقاط في رسمك فإنّه يمكنك تحريكها بـ (Direct selection tool).

إضافة بعض الخطوط والرسّوم يدويّا تزيد من جمال الرّسم، والآن فتعالوا نتقدّم خطوة أخرى إلى الأمام.

تشكيل الفراشة

الآن باستخدام أداة (Ellipse tool) و(Pathfinder) فقط، سنرسم ثمّ ندمج مجموعة من الرّسومات حتى نكوّن الجسم الأساسيّ للفراشة الطّائرة.

لتحقيق التطابق بين الطّرف الأيمن و الأيسر اذهب إلى:

Object > Transform > Reflect

ثمّ اختر (Vertical) ثمّ اضغط على (Copy)، ثمّ ضع الجناح الجديد في مكانه.

انسخ الجسم الأساسيّ إلى ذاكرة الحاسوب (Ctrl+c) لأنّنا سنلصقه فيما بعد.

ادمج كلّ الأشكال مستعملا (Pathfinder) أو (Shape Builder) ثمّ انجز النموذج الورديّ الذي أعددناه.

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

الآن سنرسم ابتسامة جميلة على وجه فراشتنا.

يمكننا تزيين الأجنحة أيضا باستعمال القلم نستخدمه في ذلك مع خاصّيّة (Keep selected option) لأنّه من الصّعب أن نرسم دائرة أو دوائر بالقلم دون أن نعدّل آخر جزء منها والخاصّيّة (Keep selected) معطّلة في حين أنّ تفعيلها يجمع أواخر الرّسم بالقلم معا فيكون حينئذ الشّكل أفضل بكثير.

الآن ارسم دوائر مركزيّة بالقلم ولا تكترث للزّلات لأنّه يمكنك بسهولة إعادة رسم الأجزاء لتنظيف الرّسم أكثر.

اذهب إلى:

Object > Transform > Reflect

لقلب الرّسم مع التطابق للجهة الأخرى.

تتمة الرسم

ارسم دائرة صغيرة ومستطيلا في لوحة الرّسم ثمّ قم باستعمال (Align panel) لتصفيفهما من الجهتين كما يظهر في الصّورة:

أعط الدّائرة لونا أرجوانيّا وشفافيّة بـعشرين بالمائة (20% Opacity) ثمّ أزل اللّون الذي يملأ المستطيل وكذلك لون المحيط حتّى يكون غير مرئيّ، ثمّ اسحب الشكليْن نحو (Swatches panel) لصناعة نموذج جديد منهما.

طبّق نموذج الّنقاط على مستطيل كبير حتى يستوعب الرّسوم التي هي أصغر منه، واضغط على (Crtl+Shit) ورمز "]" أو اضغط الزّر الأيمن للفأرة واختر:

select Arrange > Send to Back

استعمل القلم لرسم خطوط على الخلفيّة.

أخف هذه الخطوط خلف الرسوم عن طريق إرجاعها للخلف مرّات عديدة بالضّغط على(Crtl+Shit) ورمز "]" أوبالضّغط على الزّر الأيمن للفأرة واختر:

select Arrange > Send to Back

الصّورة النهائيّة تمتاز بمجموعة من الأشكال التي رسمناها في هذا الدّرس، قمنا بذلك باستعمال (Pathfinder) و(Shape Builder) وكذلك عن طريق العمل على الخطوط وخصائصها و(Swatch palette) وأخيرا استعمال القلم من أجل إضافة بعض الإمتيازات لرسومنا.

ترجمة -وبتصرف- للدرس Beginner Illustrator Tutorial: Cute Baby Style Artwork.

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

• الرسم باستخدام الأشكال الأساسية كالمستطيل والمربع والدائرة وغيرها.
• الرسم باستخدام أداة القلم P) Pen tool).
• الرسم باستخدام أداة القلم الحر N) pencil tool).

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

نقوم بفتح ملف جديد ونختار نوع الألوان CMYK.

باستخدام أداة الشّكل البيضاوي ellipse tool نرسم شكلا مقاسه: 257px*198px ونملأه بأي لون نختاره لأننا سنغيّره لاحقا، ثم نلغي خاصية stroke.

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

باستخدام أداة القلم الحر N) pencil tool) نرسم شكلا مثل الذي في الصورة ونملأه باللّون 8C4E11 #، يمكنك الإستعانة بأداة قلم التّنعيم smoothe tool لتعديله.

باستخدام نفس الأداتين القلم الحر N) pencil tool) وقلم التّنعيم smoothe tool نرسم شكلا آخر شبيه بالشّكل الأوّل لكن أصغر منه، ونملئه بلون مختلف ثم نضعه فوق الشّكل الاوّل.

نضاعف الشّكل الذي تحصّلنا عليه ctrl+c ثم ctrl+v ونضع النسخة والشّكل الأصلي جانبا. ثم نبدأ بوضع الخلفية لأننا سنستخدم اللّون الأبيض ونحتاج إلى خلفية بلون مختلف (بإمكانك وضع أي خلفية تعجبك). نرسم مستطيلا يغطي كامل مساحة العمل ونستخدم التّدرّج اللّوني لملئه وذلك باستخدام اللّونين fcbc68 # و fed39b # كما هو موضّح في الصّورة ثم نقوم بتثبيتها مع التأكد أن الطّبقة layer تتواجد في الأسفل.

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

باستخدام أداة القلم P) Pen tool) نرسم قوسا صغيرا مع إلغاء خاصية التعبئة وتحديد قيمة stroke بـ:2px (أو أي قيمة أخرى تراها مناسبة).

فوق شكل القوس نرسم 3 خطوط أخرى وذلك لعمل شكل الرموش كما هو موضّح في الصّورة:

نقوم بجمع الخطوط في طبقة واحدة ctrl+G ثم نضاعفها ctrl+c ثم ctrl+v بعدها وباستخدام أداة التّدوير (R) نقوم بتدوير النسخة ووضعها في الجهة المقابلة.

يمكننا الإستعانة بلوحة المحاذاة align لوضع الأشكال في مكانها الصحيح.

باستخدام أداة ellipse tool نرسم دائرة مقاسها 59px*95px ونختار لها اللون FFD2D5 # ثم نضاعفها ونضع واحدة في الجهة اليسرى والاخرى في الجهة اليمنى.

نرسم دائرة أخرى صغيرة مقاسها 27px*32px ونملأها باللون FF7C7F #، باستخدام أداة التحديد المباشر نسحب النّقطة السفلية من الدائرة إلى الأسفل قليلا.

بعدها وباستخدام أداة القلم P) Pen tool) نرسم شكل الفم كما هو موضح في الصورة وذلك برسم قوسين متماثلين وقوس ثالث يختلف في درجة الإنحناء.

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

باختيار اللون CD854A# وأداة البن تول نتبع الخطوات التي في الصورة ونرسم شكلا مشابها.

نضاعف الشكل مرتين مع تصغير النستختين قليلا ووضعهم في أعلى رأس القطّة.

نستخدم أداة ellipse tool مرة أخرى ونرسم شكلا بالمقاسات التّالية: 108px*179px ونملأه باللون CD854A#، مع وضع الطبقة الخاصة به أسفل باقي الطبقات كما هو في الصورة:

باستخدام أداة القلم نرسم شكلا مشابها للصورة، بالنسبة للأجزاء البنية فيمكنك استخدام أداة المستطيل والتعديل عليها بواسطة أداة التحديد المباشر (A).

رسم شكل القلب

نرسم دائرتين باستخدام الأداة ellipse tool ثم نضيف مثلث أسفلهما باستخدام أداة القلم.

باستخدام أداة pathfinder نحدد جميع الأشكال ونختار unite، ثم نقوم بتعديله باستخدام أداة التحديد المباشر (A) ليظهر كما في الصورة كما بإمكانك رسمه باستخدام القلم أو أداة القلم الحر N) pencil tool).

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

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

رابط الجزء الثاني من الدرس.

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 Sticks

45. باستخدام الأداة (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 +;) لإخفاء الخط التوجيهي.

إضافة تأثير الظل Shadows

57. في هذه الخطوة سنقوم بعمل تأثير الظل على يد التحكم لجعلها تظهر بشكل ثلاثي الأبعاد. فنقوم أولا برسم شكل مثل الذي في الصورة وذلك باستخدام أداة القلم (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 سيكون برنامجك المفضّل، مع إعداد بعض الأدوات وتقنيات يمكنك استعمال ما يقدّمه لك Illustrator من أدوات إنشاء وتعديل الأشكال للقيام برسوم رائعة لكلّ شيء.

في درس اليوم، سأطلعكم على طريقتي في كيفيّة قيامي برسم مسدّس مائيّ بسيط.

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

الموضوع الذي سأتطرّق إليه في هذا الدّرس هو رسم مسدّس مائيّ، لا لشيء إلّا لأنّه رائع، وهذا من الأشياء المدهشة في Illustrator وهو أنّه لا حدود لما يمكنك عمله ورسمه، كلّ الرّسم مبنيّ على أشكال بسيطة مثل المستطيل ذي الزوايا المدوّرة، والدّوائر ثمّ إضافة الألوان بــ Live paint tool.

افتح Adobe Illustrator وانشئ ملفّا جديدا، خذ أداة Rounded Rectangle ثمّ ارسم أشكالا مختلفة لأحجام مختلفة لتكوين شكل فوّهة مسدّس المياه، استعمل مؤشّر الفأرة لتعديل الزّوايا المدوّرة ثمّ تأكّد من أنّ كلّ الأشكال مصطفّة أفقيّا باستخدام الزرّ المناسب في Align panel.

كبّر حجم الزّاوية حتّى يصير الشّكل شبيها بالنّقانق ثمّ اجعلها فوق الفوّهة، ثمّ اضغط على Alt+Shift واسحب الشّكل لمكان آخر حتّى تحصل على نسخة منه، ثمّ اضغط على Ctrl+D مرّات عديدة لزيادة التّعديل والحصول على مجموعة من الأشكال متباعدة بشكل متساو.

حدّد كلّ الأشكال التي هي على شكل نقانق ثم اضغط على Ctrl+G لضمّها معا جميعا، ثمّ حدّد المستطيل الكبير مع الأشكال ثمّ اضغط على Alt ثمّ اضغط على الزّوائد بـأداة Shape builder لمحوها.

حدّد المستطيل الكبير حتّى يكون Key object، ثمّ استعمل أداة Align panel للتّأكّد من أنّ الأشكال مصطفّة عموديّا.

ارسم مستطيلا طويلا ليكون فوّهة البندقيّة ثمّ أضف مستطيلا مدوّرا، وارسم منطقة محدّدة Selection حول النّقاط السّفلى باستخدام Direct selection tool، ثمّ عدّل النقاط لتطابق شكل الزّاوية، وإذا لم تظهر تلك النّقاط فأضف خاصّية Live corner في:

View > Show Corner Widget menu

ارسم دائرة صغيرة لإضافة شيء من التّفاصيل، ثم انسخها وغيّر مكانها في آخر المستطيل.

استعمل Align panel لجعلهما في الوسط ولا تنس تحديد المستطيل قبل ذلك ليكون Key object.

حدّد المستطيل والدّائرتين ثم اضغط على Alt+Shift واسحب بعض النّسخ أسفل الفوّهة.

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

اضغط على ]+Ctrl أو اختر:

 Arrange > Send Backward

لجعل العنصر خلف الدّوائر ثمّ حدّد الدّائرتين السّفليتين واحذفهما.

كبّر حجم الزّاوية عند رسم مستطيل مدوّر مصوّرا شكل النقانق بحيث يكون متداخلا مع الجزء السّفلي من المقبض. شغّل Smart Guides عن طريق:

View > Smart Guides

ثمّ استعن بـ green tooltips لتصفيف الأشكال التي تنسخها بالضغط على Alt+Shift ثمّ اسحب الشكل.

اضغط على Ctrl+D مرّات عديدة للحصول على نسخ عديدة ثمّ انقر Shift+Click وصوّر مستطيلا كبيرا. حدّد هذا الشّكل مجدّدا لجعله Key Object وكذلك لتصفيف الأشكال في الوسط بأداة Align Panel.

اجعل كلّ الأشكال محدّدة، ثم استعمل Shape Builder لإزالة الأجزاء الزّائدة، وتذكّر أن تبقي Alt مضغوطا إذا أردت إزالة شيء ما.

بجانب نهاية الفوّهة ارسم مستطيلا عاديّا، ثم استعمل Direct Selection لسحب الزّاوية السفلى إلى الدّاخل، واضغط على Shift للحفاظ على استقامة الحافة السّفلى.

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

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

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

ارسم مجموعة من الدّوائر متّحدة المركز داخل جسم المسدّس في مكان خال من الرّسوم عبر الضّغط على Ctrl+C للنسخ و Ctrl+F للصق في الأمام، ثمّ عدّل أحجام الدّوائر المنسوخة ضاغطا على Alt+Shift ثمّ أضف مستطيلا يتقاطع مع الدائرتين المركزيتين ثم استعمل Shape Builder لحذف بعض الأجزاء ليبقى شكل قوس في الأخير.

استعمل أداة Polygon لرسم مثلّث وذلك بتقليص أحد أجزائه عند سحب الفأرة أثناء الرّسم، ثمّ حرّك أعلى نقطة نحو الأعلى بـ Direct Selection tool وأنت ضاغط على Shift، ثمّ حدّد النقطتين السفليّتين لتعديل الزّوايا لتصير مدوّرة.

عدّل حجم الشّكل وأدره وضعه في مكانه ليكون ملائما عند إضافته لرسم المسدّس المائيّ.

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

ارسم مستطيلا مدوّرا كقاعدة للمقبض ثم استعمل أداة Shear لتعديل الزّاوية، وأبق Shift مضغوطا عليه عند الرّسم للحفاظ على الحواف الأفقيّة مضمنة.

ضع المستطيل في مكانه على الرّسم، ثمّ استعمل مجموعة من الأشكال لتكوين منطقة الزّناد والمقبض، هذه الأشكال يمكن أن تُدمج بــ Pathfinder panel أو عن طريق الضّغط والسّحب بأداة Shape Builder.

حدّد رأس الزّاوية اليمنى بـDirect Selection ثمّ عدّل حافة زاوية المقبض للحصول على حافة مستديرة.

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

حدّد رسم الزّناد والقبضة ثمّ اضغط على Alt ثمّ مدّدهما مستخدما Shape Builder.

ارسم دوائر متداخلة لتشكيل الزّناد ثم استعمل Shape Builder لإزالة الزّوائد وإبقاء الشّكل نظيفا ثمّ اجعلهما في الخلف بالضغط على ]+Ctrl+Shift أو انقر باليمين ثمّ اختر:

Arrange > Send to Back

أضف بعض التّفاصيل للزّناد مستعملا في ذلك أداة Arc، استعمل Smart Guide tooltip لرسم الشّكل من رأس الزّاوية إلى أسفل الزّناد.

ارسم دائرة واسعة بحيث تكون متداخلة في بعض المستطيلات، ثمّ ادمج كلّ هذه الأشكال معا بــ Pathfinder أو بــ Shape Builder.

واصل عملك في رسم عناصر مخزّن الماء مستعملا نفس الطّرق التي تعلّمناها، وتذكّر أن تستخدم Align Panel كي يكون كلّ شيء سليمَ الاصطفاف.

املأ بعض الأشكال الثّانويّة بالألوان لتكوين مجموعة من الألوان لرسمك. حدّد (Selection) كلّ الرّسم ثمّ فعّل أداة Live paint ثمّ انقر في مكان العمل لتشكيل مجموعة قابلة للتّلوين.

الغ تعيين كلّ شيء (Deselect) ثمّ خذ أوّل لون في الأشكال الثانويّة التي جهّزناها لاقتناء الألوان بــ Eyedropper، ثمّ ارجع إلى Live Paint tool وانقر على الفراغات التي تريد تلوينها بذلك اللّون، وقم بنفس الطّريقة لتغيير اللّون وتلوين الفراغات في الرّسم.

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

عند إتمامك تلوين كلّ الرّسم اذهب إلى:

Object > Expand

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

انقر بيمين الفأرة واختر Ungroup مرّات عديدة حتّى تصبح "Ungroup” غير قابلة للنّقر وذلك من أجل تفكيك كلّ أجزاء الرّسم.

اضغط على أحد عناصر الرّسم ثمّ:

Select > Same > Fill Color

لتحديد كلّ العناصر التي لها نفس اللّون.

اضغط على زرّ Unite في أداة Pathfinder لتوحيد كلّ هؤلاء مجموعين حسب اللّون.

اضغط على Ctrl+8 لتكوين مسار مركّب (Compouned path) أو اذهب إلى:

Object > Compound Path > Make

هذه خطوة حاسمة عند استخدام Pathfinder مع أشكال متعدّدة.

أعد نفس الخطوات من تحديد للّون وتوحيد الأجزاء وتكوين المسار المركّب (Compound path) لكلّ أجزاء الرّسم ثمّ حدّد جزءا من الخط الخارجيّ للرّسم واختر:

 Select > Same > Stroke Color

أبق الخطّ الأسود محدّدا واذهب إلى:

Object > Expand

واختر Stroke لتحويلهم إلى أشكال مليئة.

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

انقر على واحد من الأشكال الملوّنة ضاغطا على Shift لجعل جميعها محدّدة ثمّ اختر Minus Front من Pathfinder لقصّ الخطّ الخارجيّ عن الأشكال.

اضغط على Ctrl+F للصق الشكل ذي الخطّ الخارجيّ الأسود ثمّ أعد ذات الخطوات مع الأشكال الملوّنة المتبقّية.

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

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

قم بنسخ العمل إلى Photoshop في ملفّ جديد ثمّ حمّل نماذجي المجّانيّة Halftone Patterns.

انقر على الصورة المصغّرة لرسمنا في Layers ضاغطا على Ctrl لتحديده ثمّ املأه بــ halftone pattern في layer جديد. 

اعكس الألوان بالضغط على Ctrl+I ثمّ غيّر الـ Blending mode إلى Screen لجعل الخلفيّة السّوداء شفّافة وبروز بعض الّنقاط قريبة إلى البياض.

في بعض المناطق في الرّسم أين ثمّة ضوء خافت لنّقاط القريبة إلى السّواد تكون أجمل، استعمل أداة Magic Wand لتحديد بعض المناطق في الرّسم ثمّ املأها في Layer جديد بنموذج halftone pattern ثمّ غيّر Blending mode إلى Multiply.

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

بتعديلات بسيطة على بعض الأشكال مع قوّة Illustrator واتّساعه كلّ شيء يصير ممكنا.

ترجمة -وبتصرف- للدرس How to create a vector illustration from start to finish. 

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

رابط الجزء الأول من الدرس.

21. نحدد الأشكال التي قمنا بعملها في الخطوة السّابقة ثم نضغط مرتين على Reflect Tool، نختار القيمة Vertical ونضغط على Copy. بعدها نسحب النسخ التي قمنا بعملها إلى مكانها المناسب كما يظهر في الصورة، ثم نغير لون الشكل العُلوي إلى R=62, G=64, B=69.

22. لجعل الشّكل أكثر واقعية نضيف قليلا من الإضاءة على الأزرار. نقوم أوّلا برسم بعض المسارات كما في الصورة ثم نحدّد المسار الذي يظهر باللّون الأرجواني ونلغي تعبئته اللونية ثم نحدد قيمة stroke بـ: 2px واللون (R=209, G=211, B=212).

ثم نطبق النمط Width Profile 1 على الشكل الناتج ونحدد قيمة التأثير Feather  بـ: 2px. بعدها نحدد المسار الذي يظهر باللون الأصفر ونلغي تعبئته اللونية ثم نحدد قيمة stroke بـ: 2px واللون (R=109, G=110, B=113).

ثم نطبق النمط Width Profile 1 على الشكل الناتج ونحدد قيمة التأثيرFeather  بـ: 2px. وهكذا نكرر نفس العملية على بقية المسارات.

23. نحدد المثلثات الأربعة ونختار لهم الّلون R=5, G=5, B=5، ثم نحدد المثلث الأيمن والمثلث الأيسر ونتبع المسار التّالي:

Object > Path > Offset Path

نحدد قيمة Offset بـ: -1px ونضغط على زر موافق. نقوم بتغيير لون الشّكلين الجديدين بالتدرج اللوني الخطي linear gradient. الآن نحدد المثلثين العُلوي والسُفلي ونتبع المسار التّالي:

Object > Path > Offset Path

نغير قيمة Offset إلى: -1px ونضغط على زر موافق. ثم نقوم بتغيير لون المثلث العلوي إلى R=0, G=0, B=0 ولون المثلث الذي في الأسفل إلى R=135, G=134, B=140.

24. في هذه الخطوة سنضيف بعض الإضاءة على المثلثات، فنقوم أولا برسم أربع مسارات كما في الصورة. نحدّد المسار الذي في الأسفل ونلغي التعبئة اللونية أما قيمة stroke فنحددها بـ: 0.5px ونختار لها اللون (R=167, G=169, B=172) ثم نطبق النمط Width Profile 1 على الشكل الناتج.

نحدد بقية المسارات ونلغي التعبئة اللونية أما قيمة stroke فنحددها بـ: 0.5px ونختار لها اللون (R=109, G=110, B=113) ثم نطبق النمط Width Profile 1 على الشكل الناتج. الآن نحدد جميع الأشكال التي قمنا بعملها بدءا من الخطوة 12 ونضعها في مكانها المناسب كما يظهر في الصّورة:

25. نحدد التصميمين الذين يظهران على شكل زائد (+) والذين قمنا بعملهما في الخطوة رقم 16 ثم نتبع المسار التالي:

Object > Transform > Reflect

في علبة Reflect التي تظهر لنا نختارVertical  ونضغط Copy ثم نضع النسخ في مكانها المناسب:

26. نرسم دائرة مقاسها (39x36px) باستخدام الأداة (Ellipse Tool (L ثم نقوم بتعبئته باللون R=13, G=13, B=12.

27. نحدد الدّائرة التي في الأسفل ثم نتبع المسار التالي:

Object > Path > Offset Path

ونختار قيمة Offset  بـ: -2px  ثم نضغط على ok و نستبدل لون الشكل الجديد بـ R=35, G=31, B=32. نتأكد من أن الشكل محدد ثم نقوم بمضاعفته مرة واحدة (Ctrl +C ثم Ctrl +F)، نسحب النسخة إلى الأعلى مسافة 4px ثم نغير اللون الأصلي باللون R=65, G=64, B=66. بعدها ننسخ الشكل الجديد ونقوم بإخفاء النسخة (Ctrl +3) ثم نحدد الدائرتين الجديدتين ونطبق خاصية  blend بينها.

28. نضغط على (Ctrl+Alt+3) لإظهار الشّكل الذي قمنا بعمله في الخطوة السابقة، بعدها نحدد جميع الأشكال التي قمنا بعملها في الخطوة 27 ونقوم بمضاعفتهم مرة واحدة ووضع النسخ في مكانها المناسب كما يظهر في الصورة:

29. نحدد الدائرة التي في اليسار ونتبع المسار التّالي:

Object > Path > Offset Path

ثم نحدد قيمة Offset  بـ: -2px  ونضغط على زر موافق بعدها نغير لون الشكل الأصلي بـ: R=35, G=31, B=32. نتأكد من أن الشكل الجديد لازال محددا ثم نقوم بمضاعفته مرة واحدة (Ctrl +C ثم Ctrl +F). نسحب النسخة مسافة 4px إلى الأعلى و إلى اليسار 1px ثم نغير لونها إلى R=65, G=64, B=66. بعدها نقوم بعمل نسخة للشكل الناتج مع إخفائها (Ctrl+3) ثم نحدد الدائرتين الجديدتين ونطبق خاصية  blend بينها:

30. نضغط على (Ctrl+Alt+3) لإظهار الشكل الذي قمنا بإخفائه في الخطوة السابقة، بعدها نقوم بتحديد جميع الأشكال التي قمنا بعملها بدءا من الخطوة  29 ثم نتبع المسار التالي:

Object > Transform > Reflect

ونختار Vertical ونضغط على Copy ثم نضع جميع الأشكال في مكانها المناسب كما في الصورة:

31. نقوم بتغيير لون الأشكال واستخدام radial gradients كما يظهر في الصورة، ولإضافة بعض اللمسات التي ستجعل من الشكل أكثر واقعية نضيف بعض الإضاءة على الأزرار الجديدة. فنقوم برسم أربع مسارات منحنية كما في الصورة بعدها نقوم بتحديدها وإلغاء التعبئة اللونية أما قيمة stroke فنحددها بـ: 1px واللون (R=109, G=110, B=113) ثم نطبق النمط Width Profile 1 على الشكل الناتج:

32. باستخدام الأداة (Rectangle Tool (M نرسم شكلا مقاسه 22x19px، نحدد الشكل ونتبع المسار التالي:

Object > Path > Offset Path

ثم نحدد قيمة Offset  بـ: -3px ونضغط على زر موافق. نتأكد أن الشكل الجديد محدد ثم نضغط باستمرار على Shift بعدها نضغط على بقية المستطيلات. نفتح لوحة تحديد المسارات (Window > Pathfinder) ونضغط على زر Minus Front ثم نملأ الشكل بالتدرج اللوني الخطي linear gradient:

33. نرسم مستطيلا آخر مقاسه: 28x21px ثم نقوم بحذف نقطة الزاوية اليمنى العلوية بعدها نقوم بتحريك نقطة الزاوية اليسرى العلوية بمسافة 13px نحو اليمين. نحدد الشكل الجديد مرة أخرى ثم نتبع المسار التالي:

Object > Path > Offset Path

مع تحديد قيمة Offset  بـ: -3px والضغط على زر موافق. نتأكد أن الشكل الجديد محدد ونضغط باستمرار على المفتاح Shift ثم نضغط على بقية المستطيلات و على الزرMinus Front من لوحة تحديد المسارات Pathfinder أخيرا نملأ الشكل بالتدرج اللوني الخطي linear gradient  كما في الصورة:

34. باستخدام أداة (Ellipse Tool (L نرسم دائرة مقاسها 29x26px ثم نقوم بتدويرها بزاوية -15 درجة، نستمر في تحديد الشكل ونتبع المسار التالي:

Object > Path > Offset Path

نحدد قيمة Offset بـ -3px ونضغط على OK. نتأكد بأن الشكل الجديد محدد ونضغط على المفتاح Shift باستمرار ثم نضغط على الدائرة المتبقية. نختار الزر  Minus Front من لوحة تحديد المسارات Pathfinder بعدها نقوم بملأ الشكل الذي تحصلنا عليه بالتدرج اللوني الخطي linear gradient كما في الصورة:

35. باستخدام أداة (Rectangle Tool (M نرسم مستطيلا مقاسه 3x30px ونختار له اللون R=215, G=227, B=244، نستمر في تحديد الشكل ونضغط مرتين على الأداة Rotate Tool ونحدد قياس الزاوية ب45  درجة ثم نضغط على Copy. نحدد الشكلين الجديدين ونقوم بتدويرهما بزاوية 45 درجة. نستمر في تحديد الشكلين ونضغط على زر Unite من لوحة تحديد المسارات Pathfinder:

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

37. نحدد أداة الكتابة (Type Tool (T ونفتح:

Window > Type > Character

ونحدد نفس القيم التي تظهر في الصورة.

نضغط على artboard ونضيف الحرفين "R" و"L" ثم نحددهما ونتبع المسار التالي:

Effect > Stylize > Drop Shado

ونختار نفس القيم التي في الصورة ونضغط على زر موافق:

38. باستخدام الأداة (Rectangle Tool (M نرسم مستطيلا مقاسه 30x19px ونختار له اللون R=10, G=10, B=10. نحدد الشكل ونتبع المسار التالي:

Effect > Stylize > Round Corners

ونحدد قيمة Radius بـ: 3px ثم نضغط على زر موافق. الخطوة التالية هي رسم مسار منحني كما في الصورة، نلغي منه التعبئة اللونية ونحدد قيمة stroke بـ: 1px واللون (R=109, G=110, B=113) ثم نطبق النمط Width Profile 1 على الشكل الناتج:

39. نحدد المستطيل مدور الزوايا ونتبع المسار التّالي:

Object > Transform > Transform Each

ثم نختار نفس القيم التي في الصورة ونضغط على Copy. نقوم بعمل نسخة للشكل الجديد ونسحبه إلى الأعلى بـ: 5px ونغير لونه إلى  R=35, G=31, B=32 ثم نقوم بمضاعفته مع إخفاء النسخة الجديدة بعدها نحدد الشكلين الجديدين ثم نطبق الخاصية  blend بينهما:

40. نضغط على (Ctrl+Alt+3) لإظهار الشكل السابق ثم نغير لونه إلى R=75, G=74, B=76. بعدها وباستخدام الأداة   (Pen Tool (P نرسم مسارين منحنيين كما في الصورة. نحدد المسار الذي يظهر باللون الأخضر و نلغي منه التعبئة اللونية ونحدد قيمة stroke بـ: 1px واللون (R=35, G=31, B=32) ثم نطبق النمط Width Profile 1على الشكل الناتج.

نحدد بقية المسارات ونلغي منها التعبئة اللونية ونغير قيمة stroke إلى: 1px واللون (R=109, G=110, B=113) ثم نطبق النمط  Width Profile 1 على الشكل الناتج. آخر خطوة هي تحديد جميع الأشكال التي قمنا بعملها بدءا من الخطوة 38 والضغط على (Ctrl +G) لجمعها في طبقة واحدة:

ترجمة وبتصرّف للمقال How to Create a Realistic Game Controller in Adobe Illustrator لصاحبه Bao Nguyen.

في هذا الدّرس سنتعلم طريقة تصميم يد تحكم Game Controller ثلاثية الأبعاد وشبه حقيقية باستخدام بعض الأدوات الأساسية، لوحة تحديد المسارات Pathfinder palette، تقنيّات إنشاء أشكال فيكتور vector shape، التدرجات اللونية gradients، مضاعفة الأشكال، وأشياء أخرى كثيرة. بعد نهاية الدرس سنحصل على الشكل التالي:

دعونا نبدأ.

فتح ملف جديد

1. نقوم بفتح برنامج أدوبي اليستريتور Adobe Illustrator ونضغط على (Ctrl + N) لفتح ملف جديد، ثم نحدّد الإعدادات التالية:

• الأبعاد: 700px*500px.
• نمط الألوان: RGB.
• الدّقة: 72ppi.

ونتأكد أن الخاصيّة Align New Objects to Pixel Grid لا توجد أمامها علامة، ثم نضغط OK.

رسم الجزء الأيسر من يد التحكم

2. نبدأ برسم دائرة باستخدام الأداة (Ellipse Tool (L. نحدد الدائرة التي رسمنها ثم نتبع المسار التّالي:

Object > Transform > Transform Each

نختار نفس القيّم الموضّحة في الصورة ونضغط copy، بعدها وباستخدام أداة القلم (Pen Tool (P نرسم شكلا شبيها بالذي في الصورة نملأه باللون الأبيض:

3. نحدّد الشّكل الأبيض الذي قمنا برسمه مع الدّائرة الصّغيرة، ثم نفتح لوحدة تحديد المسارات Pathfinder:

Window > Pathfinder

ونضغط على زر Unite. النتيجة التي تحصلنا عليها نملأها باللون R=18 ،G=18 ،B=20.

4. في هذه الخطوة سنحاول إضافة خاصية 3d للشّكل الجديد الذي قمنا بعمله. أولا نقوم برسم شكلين باستخدام أداة القلم (Pen Tool (P كما هو موضح في الصّورة. نحدّد أكبر شكل رسمناه ثم نختار له اللون R=133 ،G=137 ،B=146، بعدها نتبع المسار التّالي:

Effect > Blur > Gaussian Blur

نحدّد قيمة Radius بـ: 8px ثم نضغط على ok، أما الشكل المتبقي فنختار له اللون R=58 ،G=59 ،B=65 مع تحديد قيمة Gaussian Blur بـ: 4px للشّكل الناتج.

نقوم بجمع الأشكال في طبقة واحدة (Ctrl +G) بعدها نحدد الشكل الأسود الذي قمنا بعمله في الخطوة الثالثة ونضاعفه (Ctrl +C ثم Ctrl +F) مرة واحدة مع وضع النسخة في الواجهة (Ctrl +Shift +Right Square Bracket). نتأكّد من أنّ الشكل الجديد لا يزال محددا ونضغط باستمرار على المفتاح Shift، بعدها نضغط على مجموعة الأشكال التي قمنا بجمعها في طبقة واحدة سابقا ونتبع المسار التالي:

(Object > Clipping Mask > Make (Ctrl +7

5. نحدد الدائرة الحمراء التي قمنا برسمها في الخطوة الثانية ونضعها في الأمام (Ctrl +Shift +Right Square Bracket). نقوم بنسخها (Ctrl +C ثم Ctrl +F) ثم نخفي النسخة (Ctrl +3). نحدد الدائرة الحمراء مرة أخرى ونقوم بتعبئتها بالتدرج اللوني الشعاعي radial gradient كما يظهر في الصورة.

نستمر في تحديد الشكل ونتبع المسار التالي:

Object > Transform > Transform Each

مع تحديد نفس القيم التي تظهر في الصورة ثم نضغط على Copy، بعدها نستبدل لون الشكل بالتدرج اللوني الشعاعي radial gradient. ثم نتبع المسار التالي:

Effect > Stylize > Feather

مع تحديد قيمة Radius بـ: 4px ونضغط ok.

6. ننسخ الشّكل الجديد و نتبع المسار التالي:

Window > Appearance

ثم نقوم بإزالة الزّوائد. نستمر في تحديد الشكل الذي تحصلنا عليه ونتبع المسار التالي:

Effect > Texture > Grain

مع تحديد نفس القيم التي تظهر في الصورة بعدها نضغط على ok. نحدد خاصية Blending Mode بـ: Soft Light ونخفض قيمة Opacity إلى 60%.

7. نضغط على (Ctrl +Alt +3) لإظهار الدائرة التي قمنا بإخفائها في الخطوة الخامسة ووضعها في الأمام.

باستخدام أداة Add Anchor Point Tool (+) نضيف نقطتين (موضحة في الصورة باللون الأزرق)، ثم نحدد النقطتين ونضغط على زر"Cut path at selected anchor points" الذي نجده في شريط الخصائص Properties. نحدّد المسارات العلوية ونحذفها ثم نحدد بقية المسارات ونلغي التعبئة اللونية، بعدها نقوم بتحديد قيمة stroke بـ: 3px واللون (R=35 ،G=31 ،B=32) ثم نختار Width Profile 1 ونطبقه على الشكل الذي تحصلنا عليه.

نقوم برسم مسار منحني آخر مثل الذي يظهر في الصورة الرابعة ثم نلغي التعبئة اللونية و نحدد قيمة stroke بـ: 4px و اللون (R=128 ،G=130 ،B=133) ثم نحدد Width Profile 1 ونطبقه على الشكل الذي تحصلنا عليه.

8. باستخدام أداة القلم (Pen Tool (P نرسم شكلا مثل الذي في الصورة بعدها نقوم بتعبئة الشكل الأحمر باللون  R=15, G=11, B=12  أما الشكل الأخضر فنقوم بتعبئته باللون R=45, G=45, B=49. نحدد الشكلين الجديدين ونضعهما في الخلف (Ctrl +Shift + Left Square Bracket). أخيرا نحدد ونجمع كل الأشكال التي قمنا بعملها بدءا من الخطوة الثانية (Ctrl + G):

9. باستخدام الأداة (Rectangle Tool (M نرسم مجموعة من المستطيلات ونرتبها بالشكل الذي يظهر في الصورة وبنفس التعبئة اللونية.

10. باستخدام الأداة Line Segment Tool (\) نقوم برسم مسار أفقي كما يظهر في الصورة ثم نلغي التعبئة اللونية و نحدد قيمة stroke بـ: 2px واللون (R=130, G=128, B=135) أما قيمة  Gaussian Blur فنحددها بـ: 1px لنحصل في الأخير على نفس النتيجة التي في الصورة.

11. نقوم بإظهار أداة المسطرة

View > View Rulers > Show Ruler

أو عن طريق الاختصار (Ctrl + R) ثم نسحب الخط التوجيهي العمودي منها (إذا كان الخط التوجيهي مقفل يمكنك إتباع المسار التالي:

View > Guides > Lock Guides

أو (Ctrl + Alt + ; ) . نحدد أكبر شكل موجود والذي قمنا بعمله في الخطوة التاسعة ثم نضغط باستمرار على المفتاح shift.

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

الخطوة التالية هي استخدام خاصية المحاذاة (Window > Align) ثم اختيار الزر Horizontal Align Center. الآن نحدد مجموعة الأشكال التي قمنا بعملها في الخطوة الثامنة ونختار الأداة (Reflect Tool (O مع الضغط باستمرار على المفتاح Alt ثم على الخط التوجيهي.

في المربع الذي يظهر لنا نختار Vertical ونضغط Copy. آخر خطوة نقوم بها هي إتباع المسار التالي:

Ctrl + ; أو View > Guides > Hide Guides

تصميم الأزرار

12. باستخدام الأداة (Rectangle Tool (M نرسم مستطيلا مقاسه: 140x46px، بعدها نضغط مرتين على Rotate Tool ونختار قيمة الزاوية 90 درجة ثم نضغط Copy. نحدد الشكلين ونفتح لوحة تحديد المسارات (Window > Pathfinder) ونختار Unite.

13. باستخدام الأداة (Rectangle Tool (M نرسم مستطيلا مقاسه: 37x27px مثل الذي في الصورة، ثم وباستخدام الأداة Add Anchor Point Tool (+) نضيف نقطة جديدة (موضحة في الصورة باللون الأسود). نسحب تلك النقطة مسافة 13px إلى الأعلى ونرسم مثلثا صغيرا مثل الذي في الصورة. نحدد الأشكال الثلاثة التي قمنا برسمها ونضغط على تقاطع المستطيلات التي تظهر على شكل زائد (+) لتثبيته. بعدها نفتح لوحة المحاذاة (Window/ Align) ونختار Horizontal Align Center.

14. نقوم بسحب خط توجيهي عمودي وآخر أفقي من المسطرة، ثم نحدد التقاطع الذي على شكل زائد (+) مع الضغط باستمرار على المفتاح shift. نضغط على الخطين التوجيهين (دون أن نضغط على المفتاح shift ) ثم على شكل زائد مرة أخرى لتثبيته. بعدها نفتح لوحة المحاذاة (Window/ Align) ونختار الزرHorizontal Align Center ثم الزرVertical Align Center. الآن نحدد الشكلين الذين قمنا بعملهما في الخطوة السابقة ونختار الأداة (Rotate Tool (R ثم نحدد قيمة الزاوية بـ: 90 درجة ونضغط Copy.

نضغط على (Ctrl + D) مرتين للحصول على نفس النتيجة التي تظهر في الصورة:

15. نحدد جميع الأشكال التي قمنا برسمها ابتداء من الخطوة 12 ثم نتبع المسار التالي:

Effect > 3D > 3D Rotate Options

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

Effect > Stylize > Round Corners

ونحدد قيمة  Radius بـ: 5px ونضغط على ok أخيرا نحدد المثلثات الأربعة ونتبع المسار التالي:

Effect > Stylize > Round Corners Corners

نختار قيمة  Radius 3px ونضغط على ok.

16. نقوم بتعبئة التقاطع الذي يظهر على شكل زائد (+) بالتدرج اللوني الخطي، نستمر في تحديده ونتبع المسار التالي:

Object > Path > Offset Path

بعدها نحدد قيمة Offset بـ: -1px ونضغط على ok. نستبدل اللون الأساسي للشكل الجديد بالتدرج اللوني الموضح في الصورة التالية:

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

Object > Path > Offset Path

نحدد قيمة Offset بـ: -1px ونضغط على ok بعدها نغير لون الشكل إلى R=8, G=8, B=8. نتأكّد بأن الأشكال الأربعة الجديدة محددة ونتبع المسار التالي:

Object > Path > Offset Path

ثم نحدد قيمة Offset بـ: -1px ونضغط على ok مع استبدال ألوان الأشكال بالألوان التي تظهر في الصورة:

18. نحدد الأشكال التي قمنا بعملها ونتبع المسار التالي:

Object > Transform > Transform Each

ثم نختار نفس القيم التي تظهر في الصورة ونضغط على Copy، نُبقي الشكل محدد ونختار (Window > Appearance)  ثم نضغط على Round Corners. نحدد قيمة Radius بـ: 2px  ونضغط ok.

نغير لون الشكل الناتج إلى R=12, G=12, B=12 ثم نقوم بمضاعفته (Ctrl + C, Ctrl + F) مرة واحدة مع سحب النسخة مسافة 5px إلى الأعلى و 4px إلى اليسار. بعدها نضاعف الشكل مرة أخرى ونقوم بإخفاء النسخة الجديدة (Ctrl +3). نقوم بتحديد الشكلين الجديدين ثم نتبع المسار التالي:

Object > Blend > Blend Options

ونحدد نفس القيم التي تظهر في الصورة ثم نضغط على زر موافق.

نتبع المسار التالي:

(Object > Blend > Make (Ctrl +Alt +B

بعدها نضغط على (Ctrl + Alt + 3)  لإظهار الشكل الذي قمنا بإخفائه ثم نغير لونه إلى R=54, G=53, B=57 ونحدد قيمة Feather بـ: 3px.

19. نقوم بتحديد الشكل كما يظهر في الصورة ثم نتبع المشار التالي:

Object > Transform > Transform Each

نختار نفس القيم الموضحة ونضغط Copy ثم نغير لون الشكل إلى R=12, G=12, B=12. الخطوة التالية هي مضاعفة الشكل (Ctrl + C, Ctrl + F) مرة واحدة ثم نقوم بتحريك النسخة مسافة 5px إلى الأعلى و1px إلى اليسار ثم نضاعفه ونخفي النسخة (Ctrl + 3).

نحدد الشكلين الجديدين ونتبع المسار التالي:

Object > Blend > Blend Options

ونحدد نفس القيم الموضحة في الصورة ثم نضغط OK.

نختار هذا المسار Object > Blend > Make أو  (Ctrl + Alt + B) ونضغط (Ctrl + Alt + 3) لإظهار الشكل الذي قمنا بإخفائه سابقا ثم نغير لون الشكل إلى:

R=100, G=100, B=106 ونختار قيمة التأثير Feather كـ 3px.

20. نحدد الشكل الذي يظهر في الصورة ونتبع المسار التالي:

abject > Transform > Transform Each

نحدد نفس القيم ونضغط على زر موافق ثم نغير لون الشكل إلى R=8, G=8, B=8 ونضاعفه مرة واحدة (Ctrl + C, Ctrl + F). نقوم بسحب النسخة مسافة 8px إلى الأعلى و2px إلى اليمين بعدها نغير لون النسخة إلى R=2, G=2, B=3.

نضاعف الشكل مرة واحدة ونقوم بإخفاء النسخة (Ctrl + 3)، نحدد الشكلين الجديدين ونتبع المسار التالي:

Object > Blend > Blend Options

ثم نختار نفس القيم التي في الصورة ونضغط على زر موافق. الخطوة التالية هي إتباع المسار:

(Object > Blend > Make (Ctrl + Alt + B

والضغط على زر  (Ctrl + Alt + 3) لإظهار الشكل الذي أخفيناه، ثم نقوم باستبدال لون الشكل بـ: R=90, G=89, B=93 و نختار قيمة التأثير 3px :Feather.

نلتقي في الجزء الثاني مع باقي الخطوات.

ترجمة وبتصرّف للمقال How to Create a Realistic Game Controller in Adobe Illustrator لصاحبه Bao Nguyen.

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

بداية سنحتاج إلى تحميل هذه الملفات:

• خط Lato
• حزمة الأيقونات
• مع قليل من الصّبر والوقت (أقل من 30 دقيقة).

إعدادات مساحة العمل

1. نقوم بفتح ملف جديد خاص بالدّرس، نختار اسمًا للملف قد يكون Audio Player أو أي اسم آخر ثم نحدد قياسه 1280px*1280px ونتأكّد أننا اخترناه مخصص للويب ( profile: web).

(عادة نختار المقاسات الكبيرة للتصميم حتى لا يتأثر عند تصغيره)

2. باستخدام أداة Rounded Rectangle Tool نرسم شكلا ونختار له المقاسات التّالية: 598px*244px*8px، ثم نحدد له اللون EFEFEF#:

3. باستخدام أداة المستطيل (M) نرسم مستطيلا نقوم بوضعه فوق الشّكل الأوّل كما في الصورة ونحدد اللون D35353 #:

4. نقوم بتحديد الشّكلين بالضّغط على CTRL+A، أوعن طريق الضّغط على الشّكلين وفي نفس الوقت نضغط CTRL+Shift:

5. بعد تحديد الشّكلين نختار الأداة (Shape Builder tool (Shift+M لجعلهما متناسقين:

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

7. نُعيد تطبيق الخطوتين 4 و6 لتصميم مؤشّر المسار الخاص بمشغل الموسيقى فنتحصل على الشكل التالي:

8. نقوم بإضافة بعض اللّمسات على التّصميم، كإضافة عنوان الملف الموسيقي، مدّته الزمنيّة، والملف التّالي.

نختار نوع الخط: Lato Regular، مقاسه: font، ولونه: 7C7C7C#:

9. نقوم بتحريك مؤشّر الحجم (للتوضيح بأن الملف الموسيقي قيد التّشغيل)، وذلك باستخدام أداة rounded rectangle ورسم مستطيل فوق الشكل السَابق، نختار له المقاس: 422px*14px*15px radius واللون: CCCCCC#.

10. الآن نضيف مستطيل آخر على المستطيل السّابق نختار له اللّون d84848 #، ثمّ نحدد مسار كلاً من المستطيل الأوّل والثاني.

باستخدام أداة Shape Builder tool نقوم بحذف الجزء الزّائد من المستطيل الذي في الأعلى فنحصل على هذا الشكل التالي:

11. باستخدام أداة (Ellipse tool (L نرسم دائرة ونختار لها اللون d74948 #، ثم نقوم بإضافة أيقونة الصّوت الموجودة في ملف الأيقونات كما يظهر في الصّورة:

تصميم أزرار التحكم الخاصة بالتشغيل

12. نرسم مستطيلا نضعه على الخلفية الرّئيسية للمشغّل ونختار له اللّون d85656 #:

13. نحاول أن نجعل المستطيل على شكل دائري وذلك باستخدام أداة the Shape builder tool وحذف الأجزاء الزّائدة:

14. الآن، نضيف العناصر الموجودة في ملف الأيقونات:

تصميم قائمة التشغيل

15. نقوم بنسخ كل ما سبق لنا تصميمه:

16. نقوم بتكبير الخلفيّة الرّئيسية بمقدار 460px، أو أي قيمة تريدها:

17. نقوم بتمديد خلفيّة العناصر بحيث تصبح أكبر من الخلفيّة الأساسية، ثم نحذف الأجزاء الزّائدة باستخدام أداة the Shape Builder.

الهدف من ذلك هو جعل الجزء الذي يحتوي على أزرار التحكّم لا يظهر بشكل دائري في الأطراف.

18. نضع للقائمة عُنواناً:

19. باستخدام أداة the rectangular grid tool، نرسم شبكة تحتوي علي 6 تقسيمات أفقية فقط (نضع 0 أمام التقسيمات العموديّة):

20. نقوم بتوسيع الشّبكة لتتناسب مع خلفيّة مشغل الصوتيات، ونغير قيمة opacity إلى حوالي 20%، وباستخدام أداة the scissors tool نحذف الخط الأفقي:

21. لاستخدام أداة (scissors tool (C، يكفي أن نحدّد جزء من المسارالذي نريد حذفه ونضغط مرتين، ثم نستخدم زر الحذف delete من لوحة المفاتيح أو زر backspace:

22. الآن الشبكة جاهزة، نقوم بوضع الأدوات الموجودة في ملف الأيقونات والذي سبق وقمنا بتحميله ثم نضع عنوانا للقائمة:

23. لتصميم شريط التّمرير، نقوم برسم مستطيل باستخدام الأداة rounded rectangle tool، نحدّد له اللون cccccc# أما لمؤشّر التوقف فنختاراللّون 262626# مع استخدام أداة the Shape Builder tool:

24. أنهينا تصميم واجهة Audio Player، بإمكانك أن تحفظ العمل على شكل: AI, PSD, JPG, PDF أو SVG.

ترجمة -وبتصرّف- للدرس How to Create a Music Player UI Using Adobe Illustrator لصاحبه James Richman.