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

يثير اللون الأحمر الحماس وفقًا لدراسة على الديناميكا اللونية، وهذا يفسر اللون الأحمر لموقع شركة كوكا كولا، الذي يمنحك شعورًا بيوم صيف حار مضجر، وهو الوقت الذي تشعر فيه بالحاجة إلى شرب الكولا، لكن أهمية الألوان في تصميم المواقع تتجاوز الجانب العاطفي، فيميل الناس إلى إنفاق أموالهم أكثر في الأضواء الحمراء من الزرقاء، وهذا يفسر استخدام المدن الباذخة لكثير من الأضواء الحمراء. للألوان أثر على الأداء في العمل، فتجعل الأضواء الحمراء الناس يتصرفون أسرع وتشعرهم بالقوة، إلا أن هذا ليس إيجابيًا بالضرورة، إذ أن الأزرق يجعلهم أكثر تأنيًا وتفكرًا قبل التصرف، وهذا السبب وراء اللون الأحمر لإشارات المرور الآمرة بالتوقف، إذ أن الوضع يتطلب أن تتصرف بسرعة وتوقف مركبتك قبل أن تصبح في خطر. يمكنك الإستزادة من هذا بالقراءة عن سيكولوجية الألوان في عالمي التسويق والعلامات التجارية، والتأثير النفسي للألوان في تصميم الويب، واختيار أفضل المجموعات اللونية للمواقع التي تصممها. مزج الألوان مزج الألوان أمر مُجدٍ إذا تم بالشكل الصحيح، بما في ذلك مزج الألوان المكملة، إلا أن هذا يجب أن يُفعل نادرًا، نظرًا لتأثيرها السلبي على النظر، فموقع أسود بنص وردي لهو صورة فظيعة لا أرغب ببقائها في رأسي. هناك حيلة جيدة لمزج الألوان المكملة معًا، تتضمن رسم خط رفيع في المنتصف باللون الأبيض، أو الرمادي، أو الأسود، بين الشكلين الملونين لتتمكن العين من رؤيتهما منفصلين، ويمكن ملاحظة هذا بالنظر إلى شعار شركة بيبسي في الأسفل: حيث يفرّق بين اللونين الأحمر والأزرق ليس بطبقة رقيقة من الأبيض بل سميكة. العلاقة بين الألوان والثقافات تحمل الألوان معانٍ مختلفة باختلاف الأماكن في العالم، فالأحمر يبشر بالحظ في الصين، بينما يشير إلى النقص لدى الألمان. تنفق شركات ضخمة مبالغ طائلة على دراسة آثار الألوان المختلفة على مختلف الثقافات، قبل الانخراط في أحد الأسواق. وقد يظن البعض هذا مستحيلًا لكن يمكن خسارة العملاء بسبب استخدام الألوان الخاطئة. وعلى الرغم من توظيف شركات كبيرة لخبراء للقيام بهذه الأبحاث لهم، إلا أن النتائج ليست دومًا إيجابية، فكل مصمم، بل كل شخص، يميل للون ما أو زوجٍ ما من الألوان يفضل استخدامه في مناسبات مختلفة لأنه يحبه شخصيًا، وهذه نقطة سلبية في هذه الحالة، لذا على كل المصممين أن يتجردوا من كل تفضيلاتهم الشخصية ويركزوا على العملاء واحتياجاتهم. اختيار الألوان لموقع إلكتروني اختيارك للون موقع إلكتروني ليس مجرد اختيارك للونك المفضل كواجهة له، بل يعني اختيارك اللون الصحيح الذي يحقق الاستجابة المطلوبة من الجمهور، فإذا كنت تعرف جمهورك واكتشفت اللون الذي يناسبهم فتكون هكذا قد قطعت نصف الطريق، إلا أنه من المستحيل اختيار لون يلائم كل زوار موقع فردًا فردًا، لذا فإنه من المهم تحديد اللون اللون الذي يلائم أغلبية الفئة المستهدفة. نصف الحالات التي يزور فيها الزوار الموقع مرة واحدة بلا عودة سببها لون تصميم الموقع، وفقًا لمصادر مختلفة، فأول شيء يحتاج الزوار إلى التقاطه هو الألوان الرئيسية، فإذا احتوى الموقع على عدة ألوان لا يوجد واحد منها سائد بارز على الأقل، فعليك عندها تغيير التصميم. إذا كان لديك منظومة لونية زرقاء، فستكون استجابة الناس إيجابية اعتمادًا على حسن مزاجهم، وإذا كنت ستجعلها بيضاء صافية فلا بأس لكن سيكون عليك جعلها أكثر إثارة، بوضع الأحمر الفاتح أو البرتقالي في بعض المواضع، يتماشى الأبيض والأخضر بشكل رائع، ويمكنك استخدام الأبيض والرمادي للظهور بمظهر عصري وأنيق دون الحاجة إلى الألوان الحادّة، وكل مزيج يظهر شيئًا من البريق، والنعومة، والغضاضة والصفاء. انظر النموذج الراقي في الأسفل. إذا كنت تفضل الظلال الداكنة، فكل شيء يليق بالأسود طالما أن الأسود ليس اللون المهيمن، يمكن للون الأسود في الخلفية أن يعطي الموقع مظهرًا جيدًا وراقيًا، لكن سيجعل القراءة صعبة، لذا فإن أبسط مزيجين هما الأسود مع الأبيض أو الرمادي الفاتح مع واحد منهما، ويمكن للونين شديدي التناقض كالأسود والبرتقالي أن يلقيا ببعضهما، لكن قد يحتاجان إلى الأبيض لتحقيق التوازن. إذا كنت ترغب بدمج كلٍ من الأبيض والأسود مع لون آخر، فإن الأزرق خيار جيد، واحرص على هيمنة الأبيض، وإلا ستحتاج إلى أزرق فاتح جدًا ليحل محله، ولا تعطِ الأسود حضورًا كبيرًا في هذا المزيج، ويمكنك رؤية مثال جيد في الأسفل، فالمثال الثاني فقير ككل ويظهر مدى التعديلات التي يمكن إجراؤها على هذا المزيج، فالتصميم ليس فقط قديمًا بل إن الألوان تزيد الطين بلة. يليق الأسود والأبيض بالأحمر أيضًا، لكن احرص على ألا يطغى الأحمر، جاعلًا التصميم حادًا ويسبب تعاكسًا مزعجًا مع الأسود، يمكنك رؤية مثالين جيدين في الأسفل. والمزيج الثالث الذي يُنصح به هو الأسود، مع الأبيض والأخضر، ويمكنك للمثال في الأسفل أن يظهر لك السبب. والآن بعد أن مررنا بالمنظومات اللونية المختلفة للمواقع وكيفية مزجها، هل وضعت الألوان من قبل بعين اعتبارك بصفتها عوامل مؤثرة في مدى قابلية موقعك للقراءة؟ إذا كانت الإجابة لا، فسوف يعجبك الجزء التالي. ترجمة -وبتصرف- للمقال The Website Color Schemes that Stimulate Human Sense للفريق التحريري لموقع 1st Web Designer

يمتلك برنامج إنكسكيب Inkscape العديد من المميزات والأشكال الجاهزة التي تُسهّل عملية التصميم بشكل كبير وهذه إحدى المزايا الرهيبة التي تجعله ينافس أهم برامج التصميم في العالم. سنقوم في هذا الدرس برسم مجموعة من التروس باستخدام برنامج إنكسكيب، وهذه هي النتيجة النهائية بعد تتبع جميع الخطوات: دعونا نرسم تُرسًا بالذهاب إلى القائمة: Extensions > Render > Gear > Gear قم بتعديل القيم الموضوعة في نافذة التُروس (مع تفعيل Live Preview ستُشاهد معاينة مباشرة لتعديلاتك) وستحصل على عجلة بأسنان. والآن أضف دائرة: والآن قم بمحاذاة الدائرة إلى مركز التُرس عبر نافذة Align and Distribute (من الأسهل جعل Relative to على Biggest Item). اطرح الدائرة من الترس (قد تحتاج إلى إلغاء تجمّع الترس Ungroup حتى تكون العملية أسهل). والآن سنرسم أشعة الترس. أضف مستطيلًا وقم بمحاذاته إلى المركز. اصنع نسخة عن المستطيل ثم دوّرها 90 درجة. حدد كلا المستطيلين ثم دوّرهما قليلًا. حدد كل الأشكال ثم أدمجها بالأمر Union. ارسم دائرة صغيرة وقم بمحاذاتها على مركز الترس المسنن ثم أدمجها مع الترس. ارسم دائرة أصغر وقم بمحاذاتها إلى مركز الترس أيضًا ثم اطرحها من الترس. وبهذا نكون قد رسمنا الترس الأول. ارسم تروسًا أخرى مع الاختلاف في الأحجام واشبك بعضها ببعض بشرط أن تكون الأسنان متطابقة ويمكنك الحصول على التطابق في الأسنان بين التروس عبر إنشاء تروس بذات العدد من الأسنان بغض النظر عن القيم الأخرى. ارسم آلية معقدة. إذا أردت زيادة التعقيد في الرسم فقم برسم المزيد من التروس الموازية بعدد أسنان مختلف قد تشبكها مع بعضها بمعزل عن المسننات القديمة. تلوين التروس المسننة – الذهبيسنمنح التروس مظهرًا أكثر واقعية عبر محاكاة ألوان المعادن كالذهب. بداية يجب أن نتفق على أن اللون المعدني ليس لونًا جامدًا بل هو كلون سطح معدن ما يعكس بعض الإضاءة لذلك سنستعمل التدرّج المتعدد (التدرّج الذي يحوي العديد من نقاط الألوان المتداخلة). بالنسبة للون الذهبي سنستخدم مجموعة من الألوان الصفراء المتداخلة وقد يدخل عليه لون برتقالي الفولاذي هو مجموعة من الألوان الرمادية المتداخلة والبرونز هو مجموعة ألوان صفراء مع لون أخضر وهكذا. وها هو اللون الذهبي: والآن اختر أحد التروس وطبّق عليه هذا التدرج اللوني. ولإعطائه شكلًا بارزًا أضف ظلالًا للتروس (ضاعف الترس ثم اجعله أسود وبعدها حرّكه لليمين وللأسفل قليلًا ثم انقله إلى أسفل الترس بالترتيب ثم امنحه بعض التمويه blur ويستحسن تخفيف مستوى الظهور قليلًا Opacity). أضف خلفية لهذا التصميم عبر رسم مستطيل كبير وتلوينه بذات اللون التدرج الذهبي مع إرساله أسفل كل الأشكال. والآن أضف باقي التروس ولكن لا تنسى أن تضيف بعض الظلال إليها فبدون الظلال سيصعب التمييز بين التروس وبين الخلفية. ولجعل الصورة أكثر وضوحًا سنضيف التدرج الفضي لبعض التروس الموازية. صمم هذا التدرج. والآن طبّق التدرج على بعض التروس. وسنقوم بخدعة ظريفة هنا حيث سنرسم نتوء على هذا الترس عبر رسم دائرتين أصغر من الترس وحجمهما قريب نوعًا ما من بعضها ثم ارسم ذات التدرج اللوني على الدائرة الصغيرة وبذات الاتجاه ولكن ارسم تدرج معاكس بالاتجاه على الدائرة الأكبر واجعل الصغرى فوق الكبرى. ضع الترس الفولاذي مع بقية المجموعة (انتبه لألوان التروس واشبك التروس الذهبية مع بعضها والفولاذية مع بعضها) سنرسم الآن بعض المحاور. جرّب رسم بعضها من الذهب والفولاذ والياقوت والياقوت الأزرق. لا تنسَ إضافة الظلال وتدرجات الإضاءة البيضاء. ضع المحاور في مراكز التروس. سنقوم بتثبيت الأداة الميكانيكية التي رسمناها بالبراغي لذلك سنرسم البراغي. قم برسم دائرة فولاذية واطرح منها مستطيل رفيع في الوسط لصنع الثلم في رأس البرغي ثم أضف مستطيل أقل عرضًا من الدائرة وأرسله للأسفل وأضف عليه تدرجًا لونيًا يتوافق مع الفولاذ واجعله داكنًا من الأعلى ليظهر الظل على الأخدود ثم دوّر الشكل بزاوية 45 درجة ثم عدّل التدرجات اللونية لكامل الشكل حتى تكون ملائمة أكثر ثم أضف ظلالًا لرأس البرغي فوق الحواف وفوق الأخدود (المستطيل) ثم ارسم دائرة أكبر من البرغي وارسم عليها نفس التدرج اللوني الذهبي ولكن بالاتجاه المعاكس ليكون الحفرة التي يثبت عليها البرغي. وزّع البراغي بالتساوي (أو عشوائيًا إذا ظننت أن ذلك أجمل) وهذه هي النتيجة. تلوين التروس – على الورق:والآن سنقوم بتصميم مختلف تمامًا حيث سنجعل تصميم التروس يبدو كمخطط هندسي (رسم قديم على ورق قديم) لذا سنعمل على الحدود. عد الآن إلى التصميم الأبيض والأسود. إذا أبقينا على لون الحدود وقمنا بإزالة التعبئة فسيحصل تداخل بين الأشكال وهذا ما لا يجب أن يحصل. حدد الترس المتضرر من هذا التداخل (أو التروس إن كان هناك أكثر من واحد) ثم حوّل الحدود إلى مسار stroke to path. اذهب إلى الترس الذي يغطي الترس الأول وضاعفه duplicate ثم حدد النسخة الجديدة والحدود السابقة واطرحها من بعضها difference. كرر العملية مع جميع التروس التي تغطي الترس الأساسي حتى تحصل على نتيجة مشابهة لهذه. ثم حوّل الباقي إلى مسارات strokes to paths. الآن نريد أن نجعلها تبدو خشنة. ولكن هناك عدد كبير من النقاط وهذا ما سيستغرق وقتًا طويلا لتعديلها يدويًا للحصول على الشكل المطلوب، لذا وكالعادة غششت باللجوء إلى عملية التبسيط التلقائي simplify. كرر العملية لجميع التروس لنحصل على هذه النتيجة. والآن سنصمم تدرّج لوني يحاكي الورق الأصفر القديم بعدد من النقاط اللونية ما بين الأصفر والبني الفاتح ويمكن أن نجعل الورق كورق التصميم الأزرق المعروف لدى المهندسين برسم التدرجات اللونية الزرقاء ولك الخيار بينهما. هذه الأوراق تحتاج إلى حبر خاص بها بحيث تتناسب مع لون الورق وتُظهر تبايناً كاملًا معها فالورق الأصفر بحاجة إلى حبر بني داكن والورق الأزرق بحاجة إلى حبر أزرق فاتح. ويمكن تطبيقها كتدرّجات لونية أيضًا. ثم أضف بعض الخامات للورق. ارسم شكلًا عشوائيًا بأداة الرسم الحر freehand tool ثم لوّنه بلون مشابه للون الخلفية (أغمق أو أفتح قليلًا) ثم أزِل الحدود ثم بسّطه simplify إن اضطررت لذلك ثم أضف الكثير من التمويه blur. أضف المزيد من هذه الخامات حتى تصبح النتيجة مذهلة. ما تزال الرسومات حادة بعض الشيء بالنسبة إلى مخطط قديم على ورق قديم لذلك سنقوم بتنعيم الرسم قليلًا. حدد التروس ثم ضاعفها duplicate ثم اجعل النسخة الجديدة أغمق ثم طبّق بعض التمويه وخفف opacity. وهذه هي النتيجة النهائية. ترجمة -وبتصرّف- للمقال: Drawing gears in Inkscape.

لم يعد إنتاج الأجهزة اللوحية (التابلت) حِكرًا على شركات معينة مثل Apple وSamsung بل باتت المنافسة شرسة في هذا القطاع تحديدًا حيث برزت للواجهة شركات أخرى بدأت تتفوّق وتنتج أجهزة لوحية مذهلة، ولعل أبرز هذه الإنجازات هو إنجاز شركة Amazon المشهورة حيث أنتجت أجهزة لوحية خاصة بها تحت اسم kindle وهي مصممة لقراءة الكتب التي تبيعها الشركة إلكترونيًّا. هذا الأمر مَنَحَنِي فكرةً لرسم تصميم جهاز لوحي خاص بي، يشبه من حيث المبدأ أجهزة قراءة الكتب ومواقع الإنترنت مع وضع مكبرات صوت في الواجهة للحصول على صوت قوي وواضح للقراءة الآلية للكتب الإلكترونية، لهذا سنتعلم في هذا الدرس كيفية تصميم جهاز لوحي عبر استخدام الأشكال الأساسية والتدرجات اللونية بشكل رئيسي في برنامج Illustrator. لنبدأ بفتح برنامج Illustrator وفتح ملف جديد ثم ارسم مستطيل بحجم 125 للعرض و185 للطول بدون تعبئة أو حدود والآن اذهب للقائمة Effect > Stylize > Round Corners ضع قيمة نصف القطر على 10 طبّق تدرجًا لونيًّا من الأسود إلى الأبيض غيّر اللون الأبيض في التدرج إلى لون رمادي اضغط على الشكل في منتصف التدرج ثم ضع الموقع Location على 80% استخدم أداة التدرج اللوني لتغيير جهة التدرج أو عبر لوحة التدرجات بوضع قيمة الزاوية -90 درجة اذهب إلى القائمة Object > Expand Appearance ثم اذهب إلى القائمة Object > Path > Offset Path طبّق القيمة -3mm في Offset للحصول على مسار موازي إضافي والقيمة السالبة تدل على جهة وضع المسار الإضافي وبما أن المسار الجديد ما يزال محدّدًا اذهب إلى ذات القائمة الأخيرة وطبّق ذات الإعدادات بذات القيم للحصول على مسار إضافي آخر والآن حدّد المسار الإضافي الأول ثم عدّل التدرج اللوني بتغيير موقع النقطة الأولى إلى 10% والآن أضِف نقطة أولية جديدة للتدرج واجعل لونها رماديًّا فاتحًا أكثر ارسم مستطيلًا جديدًا بلون أبيض مؤقتًا بحجم 105 للعرض و140 للطول ولا تنسَ المحاذاة في الوسط أفقيًّا وللأعلى عموديًّا بالنسبة للمستطيل الأساسي ثم أضِف زوايا لهذا المستطيل بقيمة 3.5mm من القائمة Effect > Stylize > Round Corners ثم اذهب للقائمة Object > Expand Appearance طبّق تدرّج ًالونيًّا مشابهًا لآخر تدرج لوني قمت بعمله فإن لم تكن إعدادات هذا التدرج محفوظة وجاهزة فاستخدم أداة القطّارة Eyedropper tool حيث ستقوم بنسخ كافة إعدادات التدرج اللوني المنسوخ استخدم أداة التدرج Gradient tool أو لوحة التدرجات لتعديل اتجاهه بعكس اتجاه التدرجات السابقة اذهب إلى القائمة Object > Path > Offset Path وضع القيمة -3mm لإنشاء مسار إضافي جديد لجهة الداخل سنقوم الآن بإدراج صورة الشاشة والتي سيكون فيها صفحة أكاديمية حسوب ويجب أن تكون شكل هذه الصفحة كما يظهر في أي جهاز لوحي كما في الشكل اسحب الصورة من موقعها على حاسوبك وأسقطها فوق برنامج الإليستريتور ليتم إدراجها ضمن الملف عدّل بحجم الصورة باستخدام أداة التحديد Selection واجعلها مطابقة لحدود آخر مسار إضافي قمنا بإنشائه (إن تشغيل الأدلةّ الذكية سيساعد كثيرًا على المطابقة التامة ويمكن تفعيلها بالاختصار Ctrl+U) وسنرسم الآن انعكاس الإضاءة على الشاشة عبر رسم مستطيل بحجم 208 للعرض و100 للطول دوّر المستطيل بزاوية 45 درجة من لوحة التحويل Transform ثم ضعه ليغطي الجزء العلوي الأيسر من الشاشة الآن قم بمضاعفة آخر مسار إضافي قمنا بإنشائه عبر Ctrl+C ثم Ctrl+F ثم حدد هذا المسار الجديد مع المستطيل المائل ثم انقر على الخيَار Intersect من لوحة Pathfinder ليتم اقتطاع الجزء المشترك بين الشكلين المحددين والآن طبّق تدرجًا لونيًّا على هذا الشكل واجعل نقطتي البداية والنهاية باللون الأبيض خفف قيمة Opacity لنقطة البداية لغاية 0% وعدّل موقع النقطة المتوسطة إلى 40% ثم خفف قيمة Opacity لنقطة النهاية إلى 70% ارسم دائرة بحجم 20mm وحاذِها إلى الوسط أفقيًّا أسفل الشاشة طبّق تدرجًا لونيًّا عليها مطابقًا للتدرج اللوني لأول شكل قمنا برسمه مع عكس اتجاهه انسخ Ctrl+C وألصق في المقدمة Ctrl+F ذات الدائرة مع محاذاتها في مركز الدائرة الأصلية طبّق تدرجًا لونيًّا من الأزرق الداكن إلى درجة أقل بقليل على الدائرة الصغيرة قم بنفس العملية السابقة، ضاعف الدائرة الصغيرة في مركز الدائرة الأصلية ثم طبق عليها تدرجًا لونيًّا بألوان زرقاء فاتحة أكثر بقليل من الدائرة السابقة ارسم مثلثًا صغيرًا أبيضًا وضعه في أقصى يمين الدائرة الصغرى اضغط بالزر الأيمن ثم اختر من Transform الأمر Reflect وذلك لصنع نسخة معكوسة عموديًّا Vertical ثم اضغط Copy حرّك المثلث الجديد إلى أقصى الجهة اليسرى ثم حدّد كلا المثلثين وكرّر نفس عملية النسخ مع تدوير النسخة الجديدة بزاوية 90 درجة والضغط على Copy حتى نحصل على النسخة الجديدة بدون فقدان الأولى وبذلك يصبح لدينا الأسهم الأربعة وذلك للسماح بالتنقل لأعلى الصفحة أو للأسفل وللصفحة التالية أو السابقة والآن لنرسم فتحات مكبّرات الصوت عبر رسم دائرة صغيرة بحجم 4mm والآن طبّق عليها تدرجًا لونيًّا من الأسود إلى الرمادي الداكن مع وضع النقطة المتوسطة على الموقع 20% وارسم دائرة صغيرة سوداء في مركز هذه الدائرة بحجم 2mm اجمع الدائرتين معًا في مجموعة Group من الزر الأيمن ثم ضاعف المجموعة ليصبح عدد الدوائر خمسة مع المحافظة على ثبات المسافة بينها ضاعف هذا الصف مرتين ليصبح عدد الصفوف ثلاثة وحاذِ جميع الدوائر إلى مركز المنطقة على يمين الزر الأوسط أسفل الشاشة انسخ وألصق مجموعة الفتحات في الجهة اليمنى لصنع نسخة وضعها على اليسار والآن سنرسم الظل تحت الجهاز، ارسم دائرة بحجم 175mm طبّق عليها تدرجًا لونيًّا من الأبيض إلى الأسود اضغط شكل الدائرة باستخدام أداة التحديد Selection tool أرسله أسفل كل الأشكال من خلال الزر الأيمن ثم Arrange ثم Send to Back ثم ضعه أسفل الجهاز وبذلك أصبح الجهاز مكتملًا. وبذلك نكون قد صممنا النموذج الأولي لجهاز لوحي باستخدام الأشكال البسيطة الأساسية مع تقنيات التدرجات اللونية ومسارات التعويض الإضافية. يمكنكم ابتكار أجهزتكم اللوحية الخاصة بحسب رؤيتكم وخيالكم.

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

لقد أنهيت للتو تجربة جديدة في الفن الرقمي حيث صممت نقشًا تجريديًّا رائعًا باستخدام الأشكال البسيطة في فوتوشوب. اتبع الخطوات في هذا الدرس لتعلم تصميم تفاصيل هذا الفن مع تأثيرات التدرجات والنقوش. التصميم ذاته مؤلف من مجموعة من الدوائر متّحدة المركز مع اختلاف أحجامها. كل دائرة ملوّنة على أساس حامل ألوان بستة ألوان ثم التدرجات وتعبئة النقوش التي تضيف المزيد من العمق إلى التفاصيل. قبل البدء بالتصميم الرئيسي سنحتاج إلى تصميم النقش المستخدم في هذا التصميم. أنا استخدمت هنا النقش المنقّط المُكرّر. ابدأ ملفًّا جديدًا في فوتوشوب بحجم 40x40px وكبّر منظور العمل. استخدم الأدلّة لتحديد مركز التصميم ثم ارسم دائرة. استمر في الضغط على Alt أثناء رسم الدائرة ابتداءً من المركز للمحافظة على المحاذاة المثالية. استمر في الضغط على Alt أثناء النقر وسحب الدائرة لصنع نسخة عنها. حرّك هذه النسخة الجديدة إلى إحدى زوايا مساحة العمل بحيث يكون مركز هذه الدائرة عند زاوية التصميم تمامًا. كرّر هذه العملية ثلاث مرّات أخرى مع وضع كل دائرة جديدة في زاوية جديدة من زوايا العمل. ثم اذهب إلى القائمة: Edit > Define Pattern أنشئ ملفًّا جديدًا ولكن هذه المرة ارسم مربعين أسودين بحيث يغطي كل مربع ربع حجم العمل. حوّل هذا الرسم إلى نقش كما فعلنا في الخطوة السابقة. لنبدأ العمل على القطعة الفنية الشاملة. أنشئ ملفًّا جديدًا بالحجم الذي تختاره. أنا اخترت مُلصقًا بحجم A3 وبدقة 300dpi. لوّن الخلفية بلون فاتح ثم اذهب إلى القائمة: Filter > Noise > Add Noise لإضافة تأثير الضجيج (البرغلة) إلى الخلفية وجعلها تبدو مثل خامة جميلة. استورد حامل ألوان مناسب، أنا اخترت هذه الألوان من ColourLovers. ارسم أول دائرة ولوّنها بأحد تلك الألوان. انقر نقرًا مزدوجًا على طبقة الدائرة في نافذة الطبقات ليتم فتح نافذة أنماط الطبقة. أضف التلوين بتدرج لوني Gradient Overlay ودع اللونين الأبيض والأسود الأساسيين ولكن بدّل خصائص المزج إلى Soft Light. هذا الأمر سيسمح للونين الأبيض والأسود بالتفاعل مع اللون الأساسي ورسم درجات ألوان قاتمة وفاتحة. أضف حدودًا Stroke للدائرة ولونها بلون أزرق أفتح من اللون الأساسي. وحافظ على الحدود لتكون خارجية واضبط حجمها بما يناسبك. ثم أضف ظلالًا Drop Shadow. اضبط المسافة Distance إلى الصفر، ولكن زِد الحجم حتى تمتد الظلال إلى ما بعد الحدود. خفّف التعتيم Opacity للحصول على تأثير ظل خفيف. أضف بعض التفاصيل للشكل عبر اختيار Pattern Overlay. اختر أحد النقوش التي صممناها سابقًا من القائمة ثم بدّل خصائص المزج إلى Soft Light. استمر بالضغط على CMD/CTRL أثناء النقر على مُصغّر الطبقة في لوحة الطبقات لتحميل تحديد هذه الطبقة ثم استخدم أداة التحديد Marquee Tool وانقر بالزر الأيمن واختر من القائمة Transform Selection. صغّر التحديد مع الضغط على مفتاحي Alt و Shift. لوّن هذه الدائرة الصغيرة بأحد الألوان المحدّدة مسبقًا من حامل الألوان ثم تابع إضافة أنماط الطبقة المختلفة بما في ذلك التدرج اللوني والحدود والظلال. حمّل تحديد الدائرة الصغيرة ثم صغّر التحديد قليلًا. لوّن الدائرة الجديدة بلون جديد وأضف أنماط الطبقة التي تريدها. اجمع Group مجموعة الدوائر هذه في مجموعة واحدة ثم ابدأ العمل على مجموعة دوائر جديدة. استخدم هذه المرّة ألوان متباينة مع ألوان المجموعة القديمة من لوحة الألوان. أضف التدرجات اللونية والحدود والظلال للدائرة الجديدة من أنماط الطبقة بشكل يمنحها عمقًا وأبعادًا. غيّر اتجاه التدرج بشكل عشوائي في كل مرة لتكون كل مجموعة دوائر باتجاه مختلف. اختر نقشًا جديدًا هذه المرة وليكن نقش المربعات المتكررة الذي صممناه سابقًا في هذا الدرس. غيّر خصائص المزج إلى Screen لجعل درجات اللون البرتقالي تتفاعل مع النقش. اضبط التعتيم لتخفيف أية تباينات مزعجة. حمّل تحديد الدائرة الصغيرة وانقر بالزر الأيمن واختر Transform Selection من القائمة. اختر لونًا أزرق فاتحًا للدائرة الصغيرة ومع إضافة مجموعة متنوعة من أنماط الطبقة يمكن الحصول على تصميم متمازج ومتناسق خصوصًا بعد إضافة التفاصيل المتنوعة والنقوش. استمر في إضافة الدوائر وتلوينها وإضافة التفاصيل وأنماط الطبقة حتى يصبح التصميم أكثر جمالية. اجعل مجموعات الدوائر متداخلة فيما بينها مع تغيير الأحجام حتى يمتلأ حجم العمل. بإمكانك أيضًا تعديل حجم النقوش في كل مرة للحصول على تنوّع وتمايز مذهل عبر تكبير وتصغير النقوش في كل مرة. ارسم وصمم المزيد والمزيد من الدوائر حتى يصبح التصميم متطوّرًا أكثر. تأكد من مداخلة الدوائر مع بعضها البعض لتحصل على تداخل بصري ملفت وأنيق. ارسم بعض الدوائر الأساسية ولوّنها بتدرجات لونية زرقاء مختلفة الاتجاهات ومختلفة الأحجام. ارسم مجموعة دوائر برتقالية مبعثرة في أنحاء التصميم باستخدام تقنية التدرجات ذاتها. هذه الجزئيات الصغيرة تساعد على منح التصميم المزيد من التفاصيل والعمق. حدّد الكل CMD+A ثم اضغط CMD+Shift+C لنسخ الجميع مدمجين. ألصق ما تم نسخه في طبقة جديدة فوق كل الطبقات في لوحة الطبقات ثم اذهب إلى القائمة: Filter > Other > High Pass اضبط المزلاج لتصبح التفاصيل بارزة من خلال اللون الرمادي. غيّر خصائص مزج هذه الطبقة الرمادية إلى Color Burn مع جعل التعتيم 35% للسماح لهذه الطبقة بالتفاعل مع الألوان الأساسية للتصميم ما يمنحها مزيدًا من الحيوية. أضف قناعًا للطبقة ثم امسح بشكل عشوائي مساحات من التصميم باستخدام فرشاة ناعمة لمنح التصميم فروقًا مختلفة في الدرجات والألوان. هذا الدرس على وشك أن ينتهي بتصميم مذهل. ارسم إطارًا باستخدام فرشاة ناعمة سوداء ثم كبّر حجمها قليلًا لتلوين أطراف العمل. غيّر خصائص المزج إلى Multiply مع جعل التعتيم 15%. اختر أداة التحديد البيضوي Elliptical Marquee ثم ارسم بعض الدوائر ضمن مساحات على الطبقة السفلية في لوحة الطبقات. استمر في الضغط على Shift أثناء رسم هذه الدوائر للمحافظة على استمرارية رسم التحديد. لوّن هذا التحديد بأحد ألوان حامل الألوان الأساسي للتصميم ثم استخدم أداة Dodge وBurn لزيادة قتامة وإضاءة بعض الأشكال. خفّف التعتيم إلى 50%. التصميم النهائي تم تصميمه ببساطة من مجموعة من الدوائر الأساسية مع بعض التدرجات اللونية والظلال والنقوش فقط. ولكن معًا مجتمعة أنشأت قطعة فنية تجريدية رائعة المظهر. ترجمة -وبتصرّف- للمقال: Create an Abstract Design with Patterns in Photoshop لصاحبه: Chris Spooner.

اتبع الخطوات في هذا الدرس لتتعلم كيفية تصميم ملصق بألوان الطيف ابتداءً بصناعة نص مخصص في إليستريتور، ثم سنأخذ تصميم الفكتور هذا إلى فوتوشوب ونستخدم الفراشي وأنماط المزج وغيرها من الأدوات. تصميم ألوان الطيف مستوحى من حواسيب ZX Spectrum التي ظهرت في ثمانينات القرن الماضي. السمة العامة للتصميم هي رسم نص فني تجريدي مخصص والذي سيتم دمجه بألوان الطيف ثم يُضاف إليه تأثير الكآبة والقِدم (جرونجي) عبر الخامات ودرجات الخلفية الصامتة. السمة العامة هي مزج نموذج تصاميم الثمانينات من القرن الماضي مع أسلوب تصميم الجرونجي الحديث. ابدأ العمل على برنامج إليستريتور. أنشئ ملفًّا جديدًا ثم ارسم الأشكال الأساسية لنص التايبوغرافي المخصص باستخدام أداة القلم. استمر بالضغط على Shift أثناء رسم الخطوط للمحافظة على زوايا ثابتة. موضوع الملصق هو ألوان الطيف لذلك سنقوم بتصميم كلمة Spectrum عبر رسم مجموعة من الخطوط المتجهة بزوايا مختلفة ثابتة والتي توضح هذه الكلمة قدر المستطاع. الهدف متابعة رسم خطوط كل حرف ابتداءً من الحرف الذي قبله دون أي قطع في الخطوط. ومع ذلك قد نضطر في بعض المناطق إلى رسم خطوط إضافية. سنقسّم كلمة Spectrum إلى قسمين ما يساعدنا على تشكيل التصميم وإضافة لمسة إضافية. أنهِ رسم المسارات بحيث تصبح الكلمة مفهومة وواضحة. استخدم الأدلة لمطابقة النقاط المفتاحية في المسارات. استخدم أداة التحديد المباشر Direct Selection tool لسحب المسارات ضمن حدود الأدلة وتنظيم تصميم التايبوغرافي. تذكّر أن تستمر في الضغط على Shift لتقييد تلك الزوايا. وبعد الانتهاء من تعديل النص قم باستعراض التصميم بشكل عام وألقِ نظرة شاملة عليه. إن كان يبدو جيدًا ولا يحتاج إلى أية تعديلات أخرى، عندها قم بزيادة حجم الحدود للمسارات لتصبح خطوط التصميم ثخينة. حدّد تصميم التايبوغرافي بالكامل ثم اذهب إلى القائمة: Object > Expand فعّل خيار الحدود فقط Stroke لتحويل هذه المسارات إلى أشكال جامدة. لوّن النص بالرمادي الفاتح وخفف التعتيم ثم اقفل العنصر بالضغط على CMD+2. ثم استخدم أداة القلم لرسم كل جزء من أجزاء التصميم والحروف. استخدم الأدلة الذكية من خلال الاختصار CMD+U التي ستساعدك على القيام بهذه العملية بسرعة ودقة. استمر في رسم أجزاء كل حرف. في كل مرة يتغيّر فيها اتجاه رسم الخط، ابدأ رسم شكل جديد. بعد الانتهاء من العملية ألغِ قفل النص الأساسي وحرّكه إلى جهة واحدة. سنعمل الآن على التصميم الجديد الذي رسمناه بالقلم للتو والمُؤلّف من عدد كبير من الأجزاء. شكّل حامل ألوان خاص بالتصميم مؤلّف من ألوان الطيف الأحمر، البرتقالي، الأصفر، الأخضر، الأزرق، البنفسجي. استخدم هذه الألوان بالتتالي لتلوين كل جزء من أجزاء التصميم بشكل متتابع وبالترتيب. ضاعف النص وحرّك النسخة الجديدة إلى أحد الجهات. استبدل الألوان بتدرجات لونية من الأسود إلى الأبيض على النسخة الجديدة ثم اضبط زوايا التدرجات لتكون متدفقة باتجاه زاوية رسم الخط لكل جزء من أجزاء النص. من لوحة التدرجات Gradient حدّد مقابض الأسود والأبيض الصغيرة من محرّر التدرج واستبدلها بالألوان من حامل ألوان التصميم الأصلي. سيكون الجزء الأول باللون الأحمر الذي سيتدرج إلى البرتقالي وبذلك سيكون تدرج الكتلة الأولى من الأحمر للبرتقالي. بشكل أساسي يجب أن يبدأ كل تدرج لوني باللون السابق في الكتلة السابقة إلى اللون التالي في الكتلة التالية من التصميم. سيظهر التصميم بشكل سلسلة ألوان متدفقة سلسة بألوان الطيف باستثناء بعض الأشكال المتداخلة والتي يجب تلوينها بأقرب لون تدرج متاح. افتح ملفًّا جديدًا في فوتوشوب واختر ملصق بحجم A3 وهو بأبعاد 297x420 مم بدقة 300dpi. استورد خامة خلفية مناسبة مثل خامة ورق عالي الدقة من موقع Shutterstock. من أجل الحفاظ على قابلية التعديل لكل جزء من التصميم، سنحتاج إلى استيراد كل قطعة على حدة. ارسم مربعًّا حول التصميم وحدّده مع القطعة الأولى. ألصق القطعة الأولى في فوتوشوب بنمط بكسل Pixels. عد مجدّدًا إلى إليستريتور وحدّد القطعة التالية مع المربع الكلي. هذا المربع الكبير سيضمن ترتيب ومحاذاة جميع القطع بشكل منتظم كما هي موجودة بالضبط في إليستريتور وبدقة. اجعل كل قطعة في طبقة منفردة. حدّد جميع طبقات قطع التصميم وغير خصائص مزجها إلى Linear Burn. اجمع جميع القطع في مجموعة واحدة عبر CMD+G. انقر نقرًا مزدوجًا على طبقة أحد القطع لتظهر نافذة أنماط الطبقة. أضف ظلًّا كبيرًا Drop Shadow مع خصائص مزج Color Burn. خفّف المسافة إلى الصفر ولكن زِد الانتشار والحجم لتمديد التأثير إلى ما بعد حواف النص. انقر بالزر الأيمن على تلك الطبقة واختر نسخ نمط الطبقة Copy Layer Style ثم ألصقها على طبقات بقية قطع التصميم. أضف قناع طبقة إلى مجموعة طبقات قِطع التصميم ثم استخدم فرشاة الألوان المائية لفوتوشوب لتطبيق التأثير على النص. عدّل الفرشاة لتخفيف التعتيم وذلك للحصول على مستويات متعددة من الدرجات اللونية وغيّر الزاوية من خيارات الفرشاة لإضافة التنوّع إلى الخامة. شوّه حواف النص قليلًا عبر إضافة نُسخ عن المناطق المجاورة لحواف الأحرف باستخدام أداة ختم الاستنساخ Clone Stamp. هذه المناطق المنسوخة سيتم تطبيق التأثيرات عليها عبر قناع الطبقة ومجموعة طبقات التصميم. أنشئ تحديدًا يحيط بكامل مساحة التصميم ولوّنه بالأسود لإنشاء حدود. غيّر خصائص المزج إلى Overlay بتعتيم 60% لمزج الحدود مع درجات الخلفية. أضف قناع الطبقة وشوّه حدود الحواف النظيفة باستخدام فرشاة الألوان المائية. أخيرًا أضِف عنوانًا للملصق في منطقة تذييل الصفحة. أطلقتُ عليه اسم "Spectrum" مع تاريخ عام 1982 الذي تم فيه اطلاق حواسيب ZX Spectrum. هذه هي النتيجة النهائية: ترجمة -وبتصرّف- للمقال: Create a Distressed Vector Typographic Poster Design لصاحبه: Chris Spooner.

ستتعلّم في هذا الدرس كيفية صناعة زوجٍ من المزالج الثلجية باستعمال برنامج Adobe Illustrator. سنقوم بذلك عبر البدء بأشكالٍ بسيطة واستخدام بعض الحيل جنبًا إلى جنبٍ مع قائمة الـ Pathfinder. ستتعلّم فيما سيأتي كيفية إضافة تفاصيلٍ ومعالم باستخدام قائمة الحدود Stroke بالإضافة إلى خيارات المزج Blend Options وبعض التأثيرات (كالإضاءة الداخلية، الظلال...). وبالمضي قدمًا ستتعلّم كيفية صناعة نصٍّ باستعمال فرشاةٍ فنيّة Artistic Brush. وستنهي العمل بصناعة خلفيّة جميلة باستخدام تأثير Sketch وتأثير التمويه الضبابي Gaussian Blur، لنبدأ بالعمل! أنشئ وثيقة جديدة ابدأ الـ Illustrator واضغط (CTRL+N) لإنشاء وثيقة جديدة. اختر Pixels من القائمة المنسدلة Units، أدخل قيمة 996 في حقل العرض و 914 في حقل الطول ثم اضغط زر الخيارات المتقدّمة Advanced. حدّد الصيغة اللونية RGB، دقة الشاشة Screen 72ppi وتأكد من أن خيار محاذاة العناصر الجديدة لشبكة البكسلات -المربّعات- غير مفعّل قبل ضغطك زر OK. ارسم الحذاء ابدأ برسم عنصرٍ مستخدمًا أداة القلم (Pen Tool (P كما في الصورة أدناه. حالما تنتهي من رسم العنصر، ضاعفه (CTRL+C ثم CTRL+F) مرةً واحدة ثم استبدل لون حدّ النسخة الحالية بالأحمر. باستخدام أداة إضافة النقاط Add Anchor Point Tool (+) أضف نقطتين في الأماكن المعلّمة باللّون الأزرق. حدّد بعدها كل النقاط المعلّمة باللّون الأزرق وحرّكها باتجاهات الأسهم الظاهرة. باستعمال أداة Convert Anchor Point Tool من خلال الاختصار (SHIFT+C) اضبط شكل العنصر الأحمر كما في الصورةِ الثالثة. أعِد تحديد العنصر الأسود، ضاعفه مرّتين (CTRL+C ثم CTRL+F ثم CTRL+F) وحرّك النسخة إلى الأسفل بمقدار 2 بكسل، ثم حرّكها إلى اليمين 2 بكسل. اختر الآن العنصرين الأسودين المرسومين في هذه الخطوة وافتح القائمة (Window > Pathfinder) ثم اضغط على زر Minus Front. املأ العنصرين الأسودين بتدرّج خطّي Linear gradient كما يظهر في الصور أدناه. املأ العنصر الأحمر بالقيم اللونية R=154, G=154, B=156. اختر الشكل المصنوع في الخطوة السادسة وضاعفه مرةً واحدة. أبق النسخة محدّدة، امسح لون التعبئة Fill Color وأضف حدًا Stroke بقيمة 1 بكسل (بلونٍ أزرق)، ثم حرّك هذا العنصر الأزرق 14 بكسل إلى الأعلى. أعد الآن اختيار الشكل المصنوع في الخطوة السادسة مرةً أخرى وضاعفه مرةً واحدة. أبقِ النسخة محدّدة، اضغط باستمرارٍ على زر SHIFT واضغط على العنصر الأزرق. افتح الآن القائمة (Window > Palette) واضغط زر Intersect. أخيرًا بمساعدة أداة التحديد المباشر (Direct Selection Tool (A اضبط شكل العنصر الأزرق كما هو موضّح في الصورة الأخيرة أدناه. اختر الشكل الأزرق المصنوع في الخطوة السابعة، أزِل الحد Stroke وأضف تعبئة لونية Fill بالقيم اللونية R=208, G=212, B=221. تأكد من أن الشكل الناتج ما زال محدّدًا، توجّه إلى: Effect > Blur > Gaussian Blur وأدخل قيمة 10 بكسل في حقل Radius واضغط OK. حدّد الآن الشكل المصنوع في الخطوة السادسة، ضاعفه مرةً واحدة واجلب النسخة إلى مقدمة الوثيقة (CTRL+SHIFT+Right Square Bracket). أبق الشكل المصنوع حديثًا محدّدًا، اضغط باستمرارٍ على زر SHIFT واضغط على الشكل المموّه، ثم اذهب إلى القائمة التالية أو من خلال الاختصار (CTRL+7). Object > Clipping Mask > Make لإضافة بعض التفاصيل، ارسم أوّلًا مسارًا منحنيًا curved path كما يظهر أدناه. ثم اجعل التعبئة اللونية Fill لهذا المسار فارغة none وأضف حدًّا Stroke بقيمة 1 بكسل (R=83, G=77, B=66)، ثم طبّق الـ Width Profile 2 للعنصر الناتج. باستعمال أداة القلم (Pen Tool (P اصنع ثلاثة مساراتٍ منحنية curved paths كما ترى في الصورة أدناه. حالما تنتهي من رسم المسارات، استبدل لون الحد Stroke الحالي للمسار الأحمر والمسار الأزرق بالتدرّج الخطّي Linear gradient على الحد، ثم غيّر سمك الحد Stroke weight إلى 2 بكسل. أبقِ المسارات الناتجة محدّدةً وافتح قائمة الحدود (Window > Stroke). في صندوق المحادثة Stroke، اختر خيار الخط المتقطّع Dashed Line وأدخل قيمة 5 بكسل في حقل dash و 3 بكسل في حقل gap. حدّد الآن المسار الأصفر، استخدم أداة (Eyedropper Tool (I واضغط على واحدٍ من المسارين المتقطّعين، ثم استبدل لون الحد Stroke الحالي للمسار الناتج بتدرّج خطّي Linear gradient على الحد كما يظهر في الصورةِ الثالثة. لنستمر مع لسان الحذاء. باستخدام أداة القلم (Pen Tool (P اصنع عنصرًا كما هو موضّح في الصورةِ أدناه. حدّد الآن الشكل المصنوع في الخطوة السادسة، ضاعفه مرةً واحدة (CTRL+C ثم CTRL+F) وأحضر النسخة إلى مقدمة الوثيقة (CTRL+SHIFT+Right Square Bracket). أبقِ الشكل الجديد محدّدًا، اضغط باستمرارٍ على زر SHIFT واضغط على العنصر الأحمر، ثم اضغط على زر Minus Front من قائمة الـPathfinder. املأ العنصر الأحمر بتعبئة لونية Fill قيمها R=211, G=211, B=211 ثم توجّه إلى: Effect > Stylize > Inner Glow اتبع التعليمات كما هو موضّح أدناه ثم اضغط OK. حان وقت رسم الثقوب، ابدأ برسم شكلٍ بيضاوي مستخدمًا أداة الشكل البيضاوي (Ellipse Tool (L. ثم املأ هذا الشكل البيضاوي بتدرّج شعاعي Radial gradient كما هو موضّح في الصورة الثانية. أبقِ الشكل الناتج محدّدًا، توجّه إلى: Effect > Stylize > Drop Shadow اتبع المعلومات كما هو موضّح في الصورة الثالثة واضغط OK. استمر في صناعة شكلٍ بيضاويٍ آخر كما ترى في الصورة الرابعة واملأه بالقيم اللونية R=45, G=39, B=36. بطريقةٍ مماثلة، أعد نفس العمليّة كما هو موضّح في الخطوات السابقة لرسم المزيد من الثقوب. تاليًا سنعمل على الشرائط. باستخدام أداة القلم (Pen Tool (P اصنع بعض المسارات المنحنية curved paths كما هو موضّح في الصور أدناه. حدّد المسارات الزرقاء والمسار الأصفر ثم استبدل لون حدّها Stroke الحالي بتدرّجٍ خطّي Linear gradient على الحد كما هو موضّح أدناه. غيّر سمك المسارات الناتجة إلى 5 بكسل. تأكد من أن المسارات الناتجة ما زالت محدّدة، اضغط باستمرارٍ زر SHIFT واضغط على أقصر مسارٍ لإلغاء تحديده، طبّق الـ Width Profile 3 على بقية المسارات. أعد الآن تحديد جميع المسارات التي عُدّلت في هذه الخطوة وتوجّه إلى: Effect > Stylize > Drop Shadow اتبع المعلومات كما هو موضّح في الصورة الثانية واضغط OK، ثم اضغط (CTRL+Left Square Bracket) بضعة مراتٍ لتخفي المسارات الناتجة خلف مقدّمة الحذاء. حدّد كل المسارات الحمراء ثم استبدل لون حدودها Stroke الحالي بتدرّج خطّي Linear gradient على الحد كما هو موضّح أدناه. افتح بعدها قائمة (Window > Stroke) وغيّر سمك الحد Stroke Weight الناتج للمسارات إلى 5 بكسل، ثم اضغط على زر Round Cap. تأكد من أن المسارات الناتجة ما زالت محدّدة وتوجّه إلى: Effect > Stylize > Drop Shadow استعمل القيم الظاهرة في الصورة الثانية واضغط OK. لنعمل على صناعة خطّافات الحذاء. استعمل أداة القلم (Pen Tool (P لصناعة عنصرٍ كما هو موضّح أدناه. حالما تنتهي من رسم عنصرك، املأه بتدرّج خطّي Linear gradient. اصنع نسخةً (CTRL+C ثم CTRL+F) من الشكل الناتج وحرّك النسخة 2 بكسل إلى الأعلى، ثم حرّكها 1 بكسل نحو اليمين. أخيرًا استبدل لون الشكل الجديد بتدرّج خطّي جديد Linear gradient. أنشئ نسخةً من الشكل الجديد الذي صنع في الخطوة الثامنة عشر ثم أخفي النسخة (CTRL+3). أعِد الآن تحديد الشكلين المصنوعين في الخطوة الثامنة عشر وتوجّه إلى: Object > Blend > Blend Options استخدم القيم الموضّحة أدناه واضغط OK، ثم توجّه إلى: Object > Blend > Make أو من خلال الختصار (CTRL+ALT+B). أبقِ العنصر الناتج محدّدًا وتوجّه إلى: Effect > Stylize > Drop Shadow أدخل القيم التي تراها في الصورة الثانية ثم اضغط OK. أخيرًا اضغط (CTRL+ALT+3) لتظهر الشكل المخفي في الخطوة السابقة واستبدل بعدها لون الشكل الحالي بتدرّج خطّي جديد كما ترى في الصورة الثالثة. بطريقةٍ مماثلة، أعد العمليّة نفسها كما في الخطوات السابقة لترسم المزيد من الخطّافات. في النهاية يجب أن يبدو الحذاء الذي صنعته مقاربًا للذي في الصورة الثانية. حان الوقت الآن لرسم أخمص الحذاء. باستخدام أداة القلم (Pen Tool (P اصنع عنصرًا كما هو موضّح أدناه. حدّد بعدها الشكل المصنوع في الخطوة السادسة، ضاعفه مرةً واحدة (CTRL+C ثم CTRL+F) وأحضر النسخة إلى مقدّمة الوثيقة (CTRL+SHIFT+Right Square Bracket). تأكد من أن الشكل الجديد ما زال محدّدًا، اضغط باستمرارٍ على زر SHIFT واضغط على العنصر الأحمر، ثم اضغط على زر Minus Front من قائمة Window> Pathfinder. املأ أخيرًا الشكل الناتج بتدرّج خطّي Linear gradient كما ترى في الصورة الخامسة أسفله. سنعمل تاليًا على الكعب. استخدم أداة القلم (Pen Tool (P لصناعة عنصرٍ كما هو موضّح في الصورة أدناه. حالما تنتهي من رسم العنصر، املأه Fill بالقيم اللونية R=35, G=34, B=35. استمر باستخدام أداة القلم (Pen Tool (P لصناعة مسارٍ منحنٍ curved path كما هو موضّح أدناه. أعد بعدها تحديد المسار الجديد وتوجّه إلى: Object > Transform > Move أدخل قيمة 4 بكسل في حصل الإدخال Vertical واضغط Copy، اضغط بعدها (CTRL+D) سبع مراتٍ للحصول على النتائج التي تراها في الصورة الثانية. أعد الآن تحديد كل المسارات المصنوعة مؤخّرًا واستبدل لون حدودهم Stroke بتدرّج خطّي Linear Stroke في الحد، ثم طبّق الـWidth Profile 3 للمسارات الناتجة. حدّد كل المسارات المصنوعة في الخطوة 23 وجمّعهم في مجموعة (Group (CTRL+G. حدّد بعدها الشكل المصنوع في الخطوة 22 وضاعفه مرةً واحدة ثم أحضره إلى مقدّمة الوثيقة. تأكد من أن الشكل الناتج ما زال محدّدًا، اضغط باستمرارٍ زر SHIFT واضغط على المجموعة التي صنعتها خلال هذه الخطوة، ثم توجّه إلى: Object > Clipping Mask > Make اصنع شفرة التزلج باستعمال أداة القلم (Pen Tool (P اصنع عنصرًا كما هو موضّح أدناه. بعد ذلك، استعمل الـاختصار (Convert Anchor Point Tool) (SHIFT+C) وأداة إضافة النقط Add Anchor Point Tool (+) لضبط شكل العنصر الجديد كما هو موضّح في الصورة الثانية. بعدما تنتهي من ضبط شكل العنصر طبّق تدرّجًا خطيًّا لطيفًا كما ترى في الصورة الثالثة. أخيرًا أرسل الشكل الناتج إلى مؤخرة الوثيقة (CTRL+SHIFT+Left Square Bracket). حدّد الشكل الجديد الذي صنعته في الخطوة 26، ضاعفه مرةً واحدة وحرّك نسخته نحو الأسفل بمقدار 1 بكسل، ثم حرّك النسخة 3 بكسل تجاه اليمين. أنشئ نسخةً من الشكل المصنوع مؤخّرًا وأخفي النسخة. أعد الآن تحديد الشكلين الجديدين المصنوعان في الخطوة 26 والخطوة 27 ثم توجّه إلى: Object > Blend > Blend Options اتبع المعلومات كما هو موضّح في الصورة الثانية ثم اضغط OK. اضغط (CTRL+ALT+3) لإظهار الشكل المخفي في الخطوة 27 ثم استبدل لونه الحالي بتدرّج خطّي Linear gradient جديد. أنشئ نسخة (CTRL+C ثم CTRL+F) من الشكل المصنوع حديثًا في الخطوة 28 وأزل لون تعبئة Fill Color النسخة، ثم أضف حدًّا Stroke بمقدار 1 بكسل (بلونٍ أحمر). حدّد الآن ثلاث نقاطٍ معلّمة بالأصفر واضغط على زر "Cut path at selected anchor points" من شريط Properties. سيجعل هذا العنصر مكوّنًا من ثلاث مسارات. املأ المسار الأصفر بتعبئة لونية من النوع none وأضف حدًّا Stroke بقيمة 0.5 بكسل (R=149, G=151, B=151)، ثم طبّق الـ Width Profile 2 على المسار الناتج، املأ بعدها المسار الأحمر بتعبئة لونية من النوع none ثم أضف حدًّا Stroke بقيمة 0.5 بكسل (R=73, G=73, B=75)، ثم طبّق الـ Width Profile 3 على المسار الناتج. ركّز على المسار الأخضر، حدّد عشر نقاطٍ معلّمة بالأزرق واضغط على زر "Cut path at selected anchor points" من شريط Properties. حدّد بعدها خمس مساراتٍ كما ترى في الصورة الثانية واحذفهم. حدّد أطول مسارٍ أخضر واستبدل لون الحد Stroke الحالي بالقيم اللونية R=169, G=171, B=171، ثم غيّر سمك الحد Stroke Weight إلى 0.5 بكسل. يفترض الآن بمزلاجك أن يبدو كما في الصورة أدناه. لإضفاء لمسةٍ أكثر واقعية سأضيف ظلًّا لشفر التزلّج. اصنع أوّلًا عنصرًا كما هو موضّح أدناه واملأ هذا العنصر باللون الأصفر. أبقِ الشكل الناتج محدّدًا وتوجّه إلى: Effect > Stylize > Drop Shadow اتبع المعلومات كما ترى في الصورة واضغط OK. لقد انتهينا من المزلاج الثلجي للتو. حدّد الآن واجمع (CTRL+G) كل العناصر المصنوعة من الخطوة الثانية حتى الآن. تأكد من أن المجموعة ما زالت محدّدة وتوجّه إلى: Object > Transform > Reflect علّم خيار Vertical واضغط OK. اجعل موضع النسخة كما هو موضّح أدناه. اصنع الخلفية باستخدام أداة الشكل المستطيل (Rectangle Tool (M اصنع عنصرًا بمقاسات 966 بكسل في 914 بكسل. املأ بعدها هذا المستطيل بتدرّج شعاعي Radial gradient كما هو موضّح أدناه. اصنع نسخةً (CTRL+C ثم CTRL+F) من الشكل المصنوع حديثًا واستبدل لون النسخة الحالي بتدرّج خطّي Linear gradient. تأكد من أن الشكل الناتج ما زال محدّدًا، توجّه إلى: Effect > Skectch > Reticulation اتبع المعلومات الظاهرة في الصورة التالية واضغط OK. اضبط أخيرًا وضع المزج Blending Mode الخاص بالشكل الناتج إلى Soft Light وقلّل الشفافية إلى 50%. استمر بصناعة عنصرٍ واملأه Fill بعدها بتدرّج شعاعي Radial gradient كما ترى في الصور أدناه. أبقِ الشكل الناتج محدّدًا وتوجّه إلى: Effect > Blur > Gaussian Blur أدخل قيمة 20 بكسل في حقل الإدخال Radius واضغط OK. لنعمل على صنع الثّلج. ارسم أوّلًا شكلًا بيضاويًا أبيض كما هو موضّح في الصورة أدناه ثم طبّق تمويهًا ضبابيًا Gaussian Blur بقيمة 3 بكسل لهذه الدائرة. بنفس الطريقة، كرّر العملية نفسها عدة مرات لرسم المزيد من بياض الثلج كما ترى في الصورة الثالثة. وها قد انتهينا! ترجمة -وبتصرف- للمقال: How to Create a pair of Ice Skates in Adobe Illustrator لصاحبه Bao Nguyen.

أفضل طريقة للتعلق ببرنامج ما وتعلّم العمل عليه هو الانغماس في مشروع على هذا البرنامج. هذا الدرس يغطي الخطوات البسيطة لتصميم رمز أيقونة RSS مع مختلف التقنيات اليدوية التي ستساعد المبتدئين على تطوير مهاراتهم للعمل على هذا البرنامج مستقبلًا. إن برنامج أدوبي إليستريتور هو برنامج تصميم رسومات فكتور، لذلك لا يهم حجم الأيقونة التي سنصمّمها لأننا نستطيع تكبيرها وتصغيرها بدون التأثير على دقّة الرسم. على عكس فوتوشوب حيث أن جميع الخطوط والأشكال ذات هيكل هش وكذلك الألوان وذلك لأنها مصنوعة من الحسابات الرياضية النقطيّة بدلًا من الاعتماد على تصميم البيكسل الأساسي. افتح برنامج إليستريتور وأنشئ ملفًّا جديدًا. انقر مُطوّلًا على أداة المستطيل لتظهر قائمة أدوات الأشكال واختر أداة المستطيل مستدير الزوايا Rounded Rectangle. ارسم الشكل على لوح الرسم مع الضغط على مفتاح Shift وذلك لرسم مربع ويمكنك الضغط على مفاتيح الأسهم على لوحة المفاتيح لزيادة أو تخفيف استدارة الزوايا للمربع. هناك اختلاف آخر بين إليستريتور وفوتوشوب في أسفل شريط الأدوات حيث أن مربعي الألوان في فوتوشوب يدلّان على لوني المقدمة والخلفية بينما في إليستريتور المربعان يمثّلان لون العنصر والثاني لون الحدود. قم بإزالة لون الحدود ثم اضغط على مربع لون العنصر واذهب إلى لوحة التدرجات اللونية وأضف تدرجًا لونيًّا من البرتقالي الداكن إلى البرتقالي الفاتح عموديًّا عبر الشكل. حدّد الشكل المرسوم ثم اذهب إلى القائمة: Object > Path > Offset Path أدخل القيمة 1mm- في الخيارات. انقر على زاوية الشكل الجديد ودوّره بزاوية 180 درجة لتصبح جهة التدرج اللوني معكوسة. اختر أداة الدائرة وارسم دائرة في مكان ما على لوح الرسم. أزِل لون العنصر الداخلي وأبقِ على لون الحدود الأسود ثم اجعل سماكة هذه الحدود 16pt من لوحة الحدود. استخدم أداة التحديد المباشر Direct Selection Tool (السهم ذو الرأس الأبيض) وحدّد النقطتين السفلية واليسرى من الدائرة. انقر على مفتاح Delete في لوحة المفاتيح لمسح هاتين النقطتين ويبقى من الدائرة فقط ربع دائرة. انسخ هذا الربع بالاختصار CMD+C ثم ألصقه في المقدمة بالاختصار CMD+F. صغّر حجم النسخة الجديدة مع الضغط على مفتاح Shift للمحافظة على نسبة الأبعاد. عدّل حجم حدود الشكل الأصغر ليكون 16pt كما الشكل الأصلي. اضغط على الاختصار CMD+R لإظهار المسطرة ثم اسحب زوجين من الأدلّة لتحاذي أطراف أرباع الدائرة. استخدم التقاطع بين الأدلة كأساس لرسم دائرة صغيرة بحيث ننتهي من تصميم رمز RSS. حدّد ربعي الدائرة وذلك لتحويلهما من مجرد حدود إلى أشكال جامدة عبر الذهاب إلى القائمة: Object > Expand واختيار خيار الحدود Stroke فقط. حدّد أشكال الرمز الثلاثة ثم أضِف تدرّجًا لونيًّا من الرمادي إلى الأبيض عموديًّا وأضِف حدودًا لهذه الأشكال بلون رمادي وبقيمة 1pt. اضغط على الاختصار CMD-G لجمع هذه الأشكال الثلاثة في مجموعة واحدة، ثم عدّل الحجم بشكل مناسب لوضعها ضمن المربع البرتقالي. حدّد المربع البرتقالي الداخلي ثم اضغط CMD+C لنسخه وألصقه في المقدمة عبر CMD+F ثم لوّنه باللون الأبيض. ملاحظة أخرى حول الاختلاف بين فوتوشوب وإليستريتور هو أن في إليستريتور يمكن وضع عدد كبير من العناصر في طبقة واحدة مرتبة فوق بعضها البعض ويمكن التحكم بكل عنصر على حدة إذا ما أردنا بينما لا يمكن القيام بذلك في فوتوشوب. ارسم شكلًا بيضويًّا كبيرًا مسطّحًا يغطي الجزء العلوي من المربع. حدّد هذا الشكل مع المربع الأبيض الذي رسمناه للتو واختر Intersect من لوحة Pathfinder. خفّف التعتيم Opacity للشكل الجديد الناتج عن العملية السابقة إلى نحو 15% ليبدو كلمعان أعلى شكل المربع. أنهِ هذا التصميم عبر رسم دائرين صغيرتين متفاوتتين بالحجم في زاوية المربع لتبدو مثل انعكاس إضاءة. استخدم نسبة التعتيم 15% مجدّدًا للحصول على مظهر متناسب. ها قد حصلنا على رمز فكتور RSS بسيط وأنيق في عدد من الخطوات البسيطة ولكنها تغطي مجموعة مهمة من أدوات إليستريتور الهامة. ترجمة -وبتصرّف- للمقال: Beginner Illustrator Tutorial – Create a Vector RSS Icon لصاحبه: Chris Spooner.

إذا أردت تطوير مهاراتك في برنامج إليستريتور فهذا الدرس من أجلك. اتبع الخطوات في هذا الدرس لتتعلم كيفية إضافة طبقة فوق طبقة من أشكال الفكتور، مع مختلف التدرجات اللونية ومساحات الخامات لإنشاء تصميم رسم ساعة يبدو بنمط الأيقونة. إن العنصر الرئيسي في هذا التصميم، بالإضافة إلى مجموعة الدوائر طبعًا، هو التدرجات اللونية والتي تضفي الكثير من الحيوية على التصميم وتضيف المزيد من العمق كما تقدّم الظلال لمسةً جميلة ما يُظهِر التصميم بشكل أكثر واقعيةً. افتح ملفًّا جديدًا في برنامج إليستريتور. أنا شخصيًّا استخدم نظام ألوان CMYK، ببساطة لأنه يمكنني التحكم بمستوى الأسود في كل لون ولكنك بالطبع قد تستخدم نظام RGB لاحتوائه على شريحة واسعة من الألوان. ارسم دائرة على لوح الرسم. استمر في الضغط على مفتاح Shift أثناء رسم الدائرة للحصول على دائرة مثالية ثم لوّنها بتدرج لوني من الأزرق الداكن إلى الفاتح. اضغط على CMD+C لنسخ هذا العنصر ثم اضغط CMD+B للصقه في الخلف. انقر على زاوية العنصر لتستطيع تكبير العنصر قليلًا وذلك باستخدام أداة التحديد Selection Tool. تذكّر أن تستمر في الضغط على Shift أثناء عملية التكبير للمحافظة على توازن العنصر. اضبط الدرجة اللونية الفاتحة في التدرج اللوني إلى درجة أفتح من اللون الأزرق. انسخ CMD+C الشكل الخارجي ثم اضغط CMD+F للصق النسخة في المقدمة. صغّر حجم النسخة مع الضغط على مفتاحي Alt وShift. اضبط زاوية التدرج اللوني بحيث تتدفق قُطريًّا في الاتجاه المعاكس. اضغط CMD+F مرة أخرى للصق نسخة جديدة من الدائرة الكبيرة فوق باقي الأشكال. لوّن هذه الدائرة الجديدة باللون الأسود ثم اذهب إلى القائمة: Effect > Texture > Grain غيّر خصائص المزج للدائرة المليئة بالحبيبات إلى Multiply ثم خفف مستوى التعتيم Opacity حتى 15%. إن تأثير الحبحبة أضاف خامةً بسيطةً على غلاف الساعة ما يساعد على منحها لمسةً من الواقعية. في النهاية، ليست كل الأشياء ملساء ناعمة في الحياة الواقعية. ألصق دائرةً أخرى وصغّرها بحيث ستكون وجه الساعة. غيّر ألوان التدرج اللوني إلى تدرج جديد دائري من الرمادي إلى الأبيض. اضبط المزالج بحيث لا تبتعد كثيرًا عن المنتصف. في مكان آخر على لوح الرسم ارسم مستطيلًا نحيفًا. لوّن هذا المستطيل باللون الرمادي ثم ضاعفه مع الضغط على Alt واسحب الشكل للأسفل. استمر في الضغط على Shift للمحافظة على محور القيادة الرئيسي عموديًّا. هذين الشكلين سيكونان القاعدة الأساسية لعناصر وجه الساعة ولكننا نحتاج إلى مضاعفتها بشكل دقيق حتى نملأ المساحة المتبقية. اجمع الشكلين معًا CMD+G ثم اذهب إلى القائمة: Object > Transform > Transform Each 360(وهي عدد الدرجات في الدائرة) مقسّمة على 12(عدد العناصر على وجه الساعة) يساوي 30 درجة لذلك سيتوجب علينا إدخال الرقم 30 في خانة الزاوية. اضغط على الخيار Copy للحصول على أول نسخة من العناصر في وجه الساعة وبعد ذلك سنقوم بالضغط باستمرار على الاختصار CMD+D لتكرار العملية الأخيرة. بعد الانتهاء من تصميم عناصر وجه الساعة اجمعها معًا وضعهم في مكانهم الصحيح ضمن وجه الساعة الأبيض. انسخ وألصق نسخة أخرى من وجه الساعة الأبيض ثم صغّر النسخة حتى المركز. اضبط التدرج اللوني ليتدفق عموديًّا من الرمادي المتوسط إلى الفاتح. استخدم أداة المستطيل مستدير الزوايا لرسم بعض العناصر المختلفة في الحجم. لوّن كل عنصر باللون المناسب للموضوع بحيث يكون اللون الرمادي الداكن لعقرب الساعة الصغير والرمادي الفاتح للعقرب الكبير وأخيرًا اللون الأحمر لعقرب الثواني. دوّر هذه الأشكال وضعها فوق وجه الساعة. استخدم الاختصار ]+CMD لتضبط ترتيب العناصر على لوح الرسم بحيث ستظهر هذه العقارب تحت دائرة مركز وجه الساعة. حدّد الأشكال الثلاثة ثم ضاعفها للأسفل مع الضغط على Alt. غيرّ ألوان الأشكال الثلاثة الجديدة إلى اللون الأسود ثم غيّر خصائص المزج إلى Multiply عند 20%. هذا يمنح الانطباع بوجود ظلال تحت عقارب الساعة. استخدم أداة النص Type tool لوضع العلامة التجارية على الساعة. تذكّر أن تستخدم ]+CMD لتضبط ترتيب العناصر بحيث سيكون النص تحت العقارب مباشرة. انسخ وألصق نسخة أخرى عن دائرة وجه الساعة ولوّنها باللون الأسود. استخدام أداة الدائرة لرسم شكل بيضوي مؤقت متداخل مع الدائرة السوداء. الهدف من هذه العملية هو الحصول على منحني متدفق لطيف يتقاطع مع العنصر الأسود. حدّد كلا العنصرين ثم استخدم الخيار Minus Front من لوحة Pathfinder لقص الشكل. غيّر خصائص المزج إلى Multiply عند 3% لتشكيل الظل المناسب الخفيف. لنبدأ بتصميم الخلفية. استخدم أداة المستطيل لرسم مربع كبير ثم لوّنه بتدرج لوني قُطري سماوي. استخدم الاختصار ]+CMD+Shift لإرسال الشكل خلف جميع الأشكال. انسخ وألصق في المقدمة مربع الخلفية ثم لوّنه بنقش متكرر. هذا نقش متكرر لسمكة مريعة مخفي داخل مجموعة الحوامل الأساسية في إليستريتور. غيّر خصائص المزج إلى Overlay لدمج الألوان الزرقاء مع التدرج اللوني. ارسم دائرة سوداء أكبر قليلًا خلف الساعة ثم غيّر خصائص المزج إلى Multiply عند 30% ثم حرّكها قليلًا للأسفل. حدّد الدائرة السوداء الأخيرة ثم اذهب إلى القائمة: Effect > Blur > Gaussian Blur أدخل القيمة 30px لنصف القطر في لوحة الخيارات. وهذه هي النتيجة النهائية لهذا الدرس: ترجمة -وبتصرّف- للمقال: How To Build a Vector Clock Graphic in Illustrator لصاحبه: Chris Spooner.

من الأشياء الممتعة في إنكسكيب، عندما نفتح مساحة الرسم الفارغة ثم عن طريق الأدوات والخطوات نحصل على النتيجة النهائية المطلوبة بعد التفكير بالطريقة الأمثل للحصول عليها. ماذا عن تجربة القليل من الأدوات والخطوات لرسم جوهرة لطيفة في إنكسكيب؟ خطوات رسم جوهرة في إنكسكيب نبدأ خطواتنا برسم مثلث عن طريق أداة النجمة والمضلع Stars and polygons مع التأكد من اختيار المضلع وجعل جميع القيم صفر باستثناء عدد الزوايا corners والتي سنجعلها 3 بطبيعة الحال. اضغط على Ctrl أثناء الرسم لنحصل على مثلث بقاعدة مستقيمة دون ميلان. نكرر المثلث عن طريق اختياره بالزر الأيمن ثم نختار Duplicate ومن الشريط العلوي نعكسه عاموديا. من الشريط العلوي نفعل من شريط الكبس والالتقاط Enable snapping خيار Snap cusp nodes لتلتقط عقد المثلثين الحادة بعضها البعض عند تحريك النسخة الثانية للأعلى. قم بتصغير المثلث المكرر عن طريق سحب سهم التحجيم الأوسط العلوي للأسفل، ثم كرر المثلث الأول مجددا واجعل عقدته السفلية تلتقط عقدة المثلث الثاني العلوية، وعن طريق سهم التحجيم العلوي المتوسط صغره من الأعلى. بأداة الرسم المنحني Bezier tool مع كون خيارات الالتقاط أعلاه ما زالت مفعلة نرسم مثلثا جهة اليمين بالاستعانة بزوايا المثلث الثاني والثالث والتي ستلتقط الأداة. قم بعكس المثلث الصغير الذي حصلت عليه بعد تكراره عاموديا وأفقيا واجعله على يمينه، ثم بنفس الأداة نرسم مثلثا يصل بين المثلث الجديد الذي كررناه توا مع حافة المثلث الأصل الذي رسمناه في البداية. نحدد المثلثات الجديدة التي رسمناها ونعكسها أفقيا ونضعها في الجهة المقابلة يسارًا، ثم نحدد جميع المثلثات ونعطيها تعبئة من تبويب التعبئة Fill من لوحة التعبئة والحدود Fill and stroke، وفي المقابل نزيل الحدود من تبويب رسم الحدود Stroke paint من نفس اللوحة. حصلنا على هيئة الجوهرة، إلا أننا نحتاج إلى بعض اللمسات لتكتمل. سنلون قطع المجوهرات بنفس اللون لكن بدرجات متفاوتة، وقد اخترنا هنا اللون السماوي، حيث أعطينا المثلث الأول الأصل القيمة a0e1faff وبقية المثلثات يمكنك معرفة القيم التي اخترناها عن طريق لوحة التعبئة والحدود. المثلثات المتقابلة لوناها بنفس اللون بالاستعانة بأداة القطارة Dropper tool من لوحة التعبئة والحدود؛ للحصول على شكل متناسق، ويمكنك الحصول على القيم الجديدة للألوان عن طريق تحريك المؤشرات عند حرفي s و L في نفس اللوحة. بأداة النجمة والمضلع سنرسم لمعانا للجوهرة عن طريق اختيار النجمة من الشريط العلوي، وقد اخترنا عدد الزوايا 6 وقللنا قيمة Spoke ratio والتي تعمل على تحريك أو تضييق عُقَد النجمة الداخلية إلى المركز. ملاحظة: نلاحظ في طرف النجمة عقدتين يمكن تحريكهما يدويا؛ تحريك العقدة الداخلية يقوم مقام خانة Spoke ratio في تضييق العقد الداخلية إلا أن تحريكها يمينا أو يسارا سيعطينا تموجا، بينما العقدة الطرفية يمكن عن طريقها تحريك العقد الطرفية للشكل لتصغير امتدادها أو تكبيره. نلون النجمة باللون الأبيض لتعطينا شكل اللمعان ونقوم بتدويرها عن طريق أسهم التدوير، وذلك بالضغط على النجمة مرتين لتظهر أسهم التدوير. ثم من لوحة التعبئة والحدود نجعل شفافية النجمة Opacity مقاربة للمنتصف ومن تبويب رسم الحدود نزيل حدود النجمة، ومن نفس اللوحة يمكنك إعطاء النجمة بعض الضبابية من شريط Blur وقد وضعنا هنا القيمة 1.1 . حصلنا على الشكل النهائي للجوهرة؛ ولأن تطبيق فكرة جديدة من النموذج الأساسي يزيد المتعة، سنحدد جميع أجزاء الجوهرة إما عن طريق سحب مؤشر الفأرة حولها أو تحديد القطع قطعة قطعة مع الضغط على Shift أثناء التحديد، ثم نكررها ونسحب النسخة المكررة جهة اليمين مع الضغط على Ctrl أثناء السحب من أجل الحفاظ على المحاذاة، ثم نحذف النجمة اللامعة لعدم حاجتنا لها. نعيد تكرار أجزاء الجوهرة للمرة الثالثة، إلا أننا سنزيل التعبئة من النسخة المكررة ونضع لها حدودا. للتعديل على قيمة الحدود بحرية يمكننا سحب النسخة الثالثة ذات الحدود جانبا للتعديل عليها وقد اخترنا قيمة عرض الحد 2 من تبويب سمة الحد Stroke style . ملاحظة: لتحديد جميع المثلثات الجديدة دون اختيار أحد المثلثات من النسخة السابقة، يمكن اختيار أحد المثلثات ذات الحدود ثم بالزر الأيمن نختار Same select ثم اختيار Fill color لكونها تتفق جميعها في تعبئتها. بعد التعديل على عرض جميع الحدود مع التأكد من كونها جميعا محددة، سنحولها إلى مسارات من قائمة المسار Path ثم اختيار Stroke to path ثم من تفس القائمة نختار Union لتكون جميعها قطعة واحدة ثم نعيدها لمكانها على الجوهرة الثانية. نلون الحدود السوداء بلون متدرج عن طريق اختيار التدرج الشعاعي Radial gradient من لوحة التعبئة والحدود. يمكننا جعل لون العقدة الوسطى بيضاء والطرفية بلون شفاف كما يظهر في الصورة. للتعديل على التدرج سنختار من لوحة التعبئة زر Edit gradient ثم نختار العقدة الوسطى ونلونها باللون الذي نرغب به، وقد اخترنا هنا درجة قاتمة من نفس لون الجوهرة. ثم نختار العقدة الطرفية وقد جعلناها هنا بلون أسود شفاف. نضيف مستطيلا كخلفية للجوهرتين، ونلاحظ وجود فراغات في الجوهرة اليسرى. إن أردنا التخلص من هذه الفراغات فيمكننا تكرار جميع أجزاء الجوهرة وتوحيدها معا عن طريق Union من قائمة المسار، ثم إرسال الشكل الموحد إلى خلف الجوهرة لسد الفراغات الناتجة عن إزالتنا مسبقا للحدود. بذلك نكون قد حصلنا على الجوهرتين بشكل كامل، سنقوم بتجميع كل جوهرة لوحدها عن طريق تحديد أجزاء ثم اختيار Group بالزر الأيمن. نلون الخلفية باللون المناسب عن طريق التدرج الشعاعي، ثم نجمع كلا الجوهرتين معا وذلك لجعلها وسط الخلفية. تأكد من اختيار الجوهرتين أولا ثم اختيار الخلفية ثم من لوحة المحاذاة والاصطفاف Align and distribute نحاذي الجوهرتين مع الخلفية عاموديا وأفقيا. النتيجة النهائية

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

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

سنتعلم في هذا الدرس كيف رسم عصير الليمون المنعش باستخدام برنامج إنكسكيب مع خلفية مناسبة له. خطوات رسم عصير الليمون نبدأ برسم الكأس، باستخدام أداة المستطيل نرسم مستطيلا بالارتفاع والعرض الذي نرغب به. باستخدام أداة التحرير Node tool نختار من الشريط العلوي Object to path لتحويل الشكل لمسار. من الشريط العلوي لأداة التحرير نضيف عقدتين nodes في ضلعي المستطيل الأيمن والأيسر، وذلك بتحديد الضلع ثم من الشريط العلوي نختار Insert new nodes . ثم نحدد العقدتين الجديدتين ومن الشريط العلوي نختار Make selected nodes symmetric لتصبح أذرع العقد Node handles متناسبة، بمعنى أن التغيير على أحد ذراعي العقدة بسحبها أو تحريكها ينطبق على الذراع الأخرى. نحدد العقدتين الأخيرتين في الطرف السفلي للكأس، ثم نقوم بتضييق المسافة بينهما بالاختصار <+Ctrl ثم نقوم بنفس الشيء مع العقد العلوية بالقدر الذي نرغب أن يكون عليه اتساع الكأس. نكرر الكأس ثم نلونه من شريط الألوان السفلي باللون الرمادي، ثم نرسم مستطيلا يغطي الكأس باستثناء قاعدته التي ستكون رمادية اللون حيث نجعلها تظهر بالارتفاع الذي نرغب أن تكون عليه، ثم نختار النسخة المكررة الرمادية مع المستطيل ومن قائمة المسار Path نختار Difference. نلون النسخة الأصلية من الكأس باللون الأبيض ونقلل قيمة الشفافية Opacity قريبا من العشرين ومن لوحة التعبئة والحدود Fill and stroke نختار تبويب رسم الحدود Stroke paint ونعطي الكأس حدودا بلون أسود حتى تكون واضحة عند تقليل الشفافية. نكرر الكأس مجددا ونلونه بلون عصير الليمون ونزيل الشفافية، وقد لوناه هنا بالتدرج الخطي Linear gradient من تبويب التعبئة Fill واخترنا القيمتين التاليتين للوني التدرج: f6ffd5ff و e3ff81ff. نعيد العصير خطوة للخلف من الشريط العلوي عن طريق اختيار Page down ثم نرسم مستطيلا أعلى العصير من أجل تقليل ارتفاعه في الكأس، ثم نحدد العصير مع المستطيل ومن قائمة المسار نختار Difference ثم نزيل حدود العصير باختيار x من تبويب رسم الحدود. سنرسم على الكأس مجموعة من الفقاعات، لذا سنكبر الشاشة عن طريق زر + من لوحة المفاتيح، ثم نرسم بأداة الرسم المنحني Bezier خطا صغيرا مكون من عقدتين، ثم باستخدام أداة التحرير نعدل عليه بسحب الخط ما بين العقدتين للأسفل لإعطائه انحناء، ويمكننا التعديل على المنحنى بتحريك أذرع العقدة Node handles، ثم من لوحة التعبئة والحدود سنختار تبويب سمة الحد Stroke style لتقليل عرض المنحنى. سنكرر المنحنى عن طريق تحديده ثم من الزر الأيمن نختار Duplicate وبما أننا سنكرر النسخة لعدد كبير من المرات، يمكننا سحب المنحنى بزر التحديد والضغط على زر المسافة أثناء السحب، ومع كل ضغطة من زر المسافة أثناء السحب ستنشأ لنا نسخة جديدة، ومن أسهم التحديد والتحجيم يمكننا أن نغير في حجمها وارتفاعها، وباستخدام أداة الدائرة سنرسم بعض الفقاعات الصغيرة حيث نجعل حدودها بعرض حدود المنحنى، ونزيل التعبئة من تبويب التعبئة Fill، وسنقوم أيضا باستخدام أداة الرسم المنحني برسم خطوط بنفس عرض المنحنيات ونجعلها منحنية ونضيف لها بعض العقد عن طريق أداة التحرير. نرسم دائرة متساوية الأبعاد في أحد الطرفين العلويين للكأس مع الضغط على Ctrl أثناء الرسم، ونلونها بلون الليمون ثم نكررها ونصغرها مع الضغط على Ctrl+Shift أثناء التصغير للمحافظة على أبعادها وعلى مركزها وسط الدائرة الأولى ونلونها بلون أصفر باهت. باستخدام أداة النجمة والمضلع Stars and polygons نرسم مثلثا باختيار المضلع من الشريط العلوي ونختار عدد الزوايا corners 3 ويمكننا أن نجعل المثلث مستديرا بإضافة القيمة التي نريد لخانة rounded أو تركه كما هو مع الضغط على Ctrl أثناء الرسم لجعل قاعدة المثلث مستقيمة ومتوازية مع المسطرة دون انحناء. نعدل حجم المثلث حسب رغبتنا ومع بقائه محددا نحدد الدائرة البيضاء ونحاذيهما عاموديا من لوحة المحاذاة والاصطفاف Align and distribute. نُفَعّل من الشريط العلوي الالتقاط والكبس Enable snapping ثم منه نُفَعّلSnap an item's rotation center لالتقاط مركز الشكل، ثم نحدد الدائرة بالضغط عليها مرتين حتى تظهر أسهم الاستدارة ويظهر مركز الدائرة على شكل علامة + في وسطها، ثم نسحب من الأعلى من عند المسطرة خطا وهميا ونتجه بعقدة الخط لمركز الدائرة ليلتقطها وكذلك نسحب من الجهة اليسرى. نضغط على المثلث مرتين ليظهر لنا مركزه ثم نسحبه مع الضغط على Ctrl أثناء السحب لمركز الدائرة وسنلاحظ أنه سيتم التقاطه بسبب وجود الخطين المتقاطعين، ثم نكرر المثلث ونقوم بتدويره مع الضغط على Ctrl أثناء التدوير للمحافظة على مسافة ثابتة بين المثلثات. نكرر الدائرة الصفراء ونصغرها مع الضغط على Ctrl+Shift أثناء التصغير. بهذا تكون شريحة الليمونة قد اكتملت، نحدد جميع أجزائها ونجمعها عن طريق الزر الأيمن ثم نختار Group أو عن طريق الاختصار Ctrl+G ثم نعيد شريحة الليمونة للأخير عن طريق Lower selection to bottom. سنرسم الماصة التي سنستخدمها لشرب العصير عن طريق أداة المستطيل بارتفاع أعلى من الكأس، ثم عند طرفه العلوي سنرسم مستطيلا بنفس العرض أو أعرض منه بشيء يسير مع جعل ارتفاعه قصير جدا، ثم نسحب مركزه في حافته اليمنى ثم نكرره ونرفعه قليلا لأعلى المستطيل السابق مع تدويره قليلا مع اتجاه عقارب الساعة وهكذا نستمر في التكرار والرفع والتدوير عدة مرات، ثم نختم الماصة برأسها الذي سيكون بنفس عرض الماصة إلا أنه سيكون بارتفاع أقل وندوره بما يتناسب مع اتجاه المستطيلات الصغيرة. نجمع الماصة ونرسلها للأخير، ثم نحدد جميع أجزاء الكأس ونجمعها، وبهذا يكون عصير الليمون المنعش قد اكتمل. خطوات رسم النظارة الشمسية ارسم مستطيلا بزوايا مستديرة وذلك بتحريك العقدة في زاوية المستطيل اليمنى إلى الأسفل. نحول الشكل إلى مسار عن طريق أداة التحرير باختيار Object to path ثم نحدد العقد الأربعة السفلية ومن الشريط العلوي نختار Make selected node auto smooth لجعلها ناعمة تلقائيا أو يمكننا تركها دون تغيير نوعها. نغير مكان العقد برفع العقد السفلية الأكثر ارتفاعا للأعلى والعقد السفلية نحركها لليمين واليسار بحيث نضيق المسافة بينهما إلى أن نحصل على شكل زجاجة النّظّارة. نكرر الزجاجة التي حصلنا عليها ونعكسها أفقيا من الشريط العلوي، ونلونها باللون الأسود مع تقليل الشفافية، ثم نرسم بينهما مستطيلا نثني وسطه بإضافة عقد من أداة التحرير ونرفع العقد للأعلى. لنضيف لمعانا للنظارات، نكرر الزجاجة اليمنى مجددا ونلونها باللون الرمادي ثم نصغرها قليلا بالضغط على Ctrl+Shift ثم نكرر النسخة المكررة ونلونها بلون مميز وليكن الأزرق ونحركها ليمين الزجاجة الرمادية ونكبرها قليلا من الأعلى والأسفل، ثم نحدد القطعة الرمادية مع الزرقاء ومن قائمة المسار Path نختار Difference. نكرر نفس الخطوات مع الزجاجة اليسرى، ويمكننا اختصار الخطوات بتكرار اللمعان الذي رسمناه على اليمنى وعكسه وتحريكه على الزجاجة اليسرى، ولعمل بعض الاختلاف بين اللمعانين سنرسم مربعا على الطرف السفلي للمعان الأيسر ونختاره هو اللمعان ومن قائمة المسار نختار Difference. نرسم حامل النظارة عن طريق أداة المستطيل، حيث سنرسم مستطيلا بارتفاع الحامل نكرر الحامل ونقلل من ارتفاعه لنحصل على طرف الحامل الذي يمتد خلف الأذن، وندوره بحيث يكون بزاوية قائمة مع المستطيل الأول. ومن لوحة المحاذاة والاصطفاف نختارهما ونحاذيهما من الطرف العلوي. من قائمة المسار سنختار Union لتوحيد المستطيلين، ثم باستخدام أسهم التحجيم سنحركه من السهم العلوي المتوسط إلى اليمين لتغيير بعده، ثم سنحرك السهم المتوسط الأيمن للأعلى، ثم نضغط عليه مجددا لتظهر أسهم التدوير وندوره عكس عقارب الساعة ثلاث خطوات تقريبا، إن احتاج لمزيد من التحريك بالأسهم أو التدوير قمنا بها حسب ما يلزم. باستخدام أداة التحرير سنحرك العقد القريبة من طرف الزجاجة اليمنى لتعديل موضع العقدتين على حافة الزجاجة اليمنى، ثم نكرر الحامل ونعكسه أفقيا ونحركه لطرف الزجاجة الأخرى، ثم نلونهما باللون الأسود. اكتملت النظارة ويبقى أن نحدد أجزاءها ونجمعها. سنضع خلفية مناسبة للعصير والنظارة عن طريق أداة المستطيل ونلونها باللون الأرق. نرسم باستخدام أداة الرسم المنحني خطين، الأول سيكون مكانه حيث نرغب أن يكون طول السماء في الخلفية، والثاني حيث نرغب أن يكون طول البحر في الخلفية، سنضيف للسفلي منهما ثلاثة عقد، ونجعل عقد الخط ناعمة ثم نرفع العقدة الثانية والرابعة - بحسب ترتيبها من اليمين إلى اليسار - إلى الأعلى ليعطينا شكل الأمواج. نحدد الخلفية مع الخط المستقيم الأول ومن قائمة المسار نختار Division لتقسيم الخلفية وبالتدرج الخطي نلون القسم العلوي بالتدرج السماوي والأبيض. نكرر الخط المتموج ونضعه جانبا، لنعود إليه لاحقا ثم نحدد الجزء السفلي من الخلفية مع الخط المتموج الأصلي ونعيد اختيار الأمر Division ثم نلون البحر بالتدرج الخطي واخترنا له لوني التدرج: 7ca3dbff و 00ffffff، ثم نلون القطعة الأخيرة بلون الرمل واخترنا له لوني التدرج: ffb380ff و ff7b24ff. يمكن أن تكون خلفيتنا قد اكتملت عند هذا الحد وإن شئنا أضفنا مزيدا من التفاصيل عن طريق الخط المتموج الذي تركناه جانبا، وذلك بتعريضه من تبويب سمة الحد ثم تكراره ونشره على الرمل وعلى البحر، مع تلوينه باللون المناسب. قمنا بعدها بإضافة مجموعة من الدوائر في السماء لتشكيل الغيوم. النتيجة النهائية هذه هي النتيجة النهائية لهذا الدرس:

سنتعرف في هذا الدرس على خطوات رسم جسم كروي ثلاثي الأبعاد في برنامج إنكسكيب، وحتى يسهل عليك تتبع هذه الخطوات يُفضّل أن تستخدم نفس الألوان والأحجام المستخدمة في الشرح، وخصوصا تلك التي سنستخدمها في بداية المقال. في البداية سنزيل الإطار الموجود في الصفحة عن طريق: File > Document properties ثم من النافذة المنبثقة نزيل علامة الصح بجانب عبارة Show page border. ثم نبدأ بخطوات الدرس: ارسم دائرة حمراء اللون بأبعاد متساوية وذلك بالضغط على Ctrl أثناء الرسم، واجعل شفافيتها قريبة من المنتصف. كرر الدائرة ولونها باللون الأزرق وكبرها مع الضغط على Ctrl+Shift أثناء التكبير للمحافظة على بعدها. كرر الدائرة الزرقاء ولونها باللون الأخضر ثم من السهم العلوي المتوسط قم بتصغير الدائرة لنحصل على شكل بيضاوي، ثم اسحبها إلى الأعلى مع الضغط على Ctrl إلى الأعلى بحيث يظهر طرف من الدائرة الوسطى أسفله. من أحد الأسهم الجانبية الوسطى اليمنى أو اليسرى صغر الشكل البيضاوي مع أهمية الضغط على Ctrl+Shift أثناء التصغير إلى أن تصبح حافة الشكل البيضاوي ملاصقة لحافة الدائرة الزرقاء، وللتأكد من ذلك كبر بالضغط على + من لوحة المفاتيح أو من الشريط الأيسر للأدوات اختر أداة التكبير وبمؤشر الفأرة اسحب مربعا وهميا حول المنطقة التي تريد تكبيرها، ويمكنك تكرار التكبير عدة مرات. عند التكبير تأكد أن الشكل البيضاوي الأخضر ليس خارجا عن حدود الدائرة الزرقاء بشكل كبير وفي نفس الوقت لابد من التأكد من أنه ملاصق أو متقاطع مع الدائرة الزرقاء ولو بجزء يسير جدا منه. ملاحظة: لتصغير الشاشة سنختار علامة – من لوحة المفاتيح، أو نضغط رقم 1 لتعود الشاشة لحجمها الطبيعي. نكرر الشكل البيضاوي ونسحبه للأعلى مع الضغط على Ctrl للطرف المقابل، ثم نتأكد بتكبير إحدى حافتي الشكل من ملامسته لجدار الدائرة الزرقاء وتقاطعه مع جزء صغير جدا معها، ولكننا في هذه المرة لن نصغر الشكل من أجل الوصول لذلك بل سنحركه للأعلى أو الأسفل مع أهمية الاستمرار بالضغط على Ctrl أثناء ذلك إلى أن نصل لنفس النتيجة التي وصلناها مع الشكل البيضاوي السابق. نكرر الشكل البيضاوي الأخضر العلوي مجددا، ونحركه لأسفل الشكل الأصل، ثم نكبره بالضغط على Ctrl+Shift أثناء التكبير ونتأكد بنفس الطريقة السابقة من التصاقه بجدار الدائرة الزرقاء، ثم نكرر الشكل الذي كبرناه توًا ونحركه للأسفل مع الضغط على Ctrl أثناء ذلك إلى أن يلامس حافة الدائرة الزرقاء كسابقه. نحدد الأشكال الأربعة البيضاوية ونكررها جميعها وبعد التأكد من كون الأشكال المكررة محددة جميعها سنختار من قائمة المسار Path الخيار Union لنجعلها شكلا واحدا. نختار الدائرة الزرقاء مع الأشكال البيضاوية التي وحدناها ثم من قائمة Path نختار Difference ليتم حذف مواضع التقاء هذه الأشكال مع الدائرة الزرقاء. مع التأكد من كون الدائرة ما زالت محددة سنختار من قائمة Path الخيار Break apart ليجزئ لنا ما تبقى من الدائرة. سنلاحظ أن الدائرة صارت عبارة عن مجموعة من الأجزاء، سنختار الجزء أعلى الدائرة مع الشكل البيضاوي الأخضر الذي يليه ثم نتبع المسار: Path > Union سنقوم بحذف الجزء الذي يلي الجزء العلوي من الدائرة الزرقاء إلا أنا سنبقي على الشكل البيضاوي الذي يليه دون حذفه. نحدد القطعة الوسطى من الدائرة الزرقاء مع الشكل البيضاوي أسفلها ثم نوحدها بالأمر Union ثم نحذف القطعة الزرقاء التي تليها دون حذف الشكل البيضاوي الأخضر. تبقى لنا ثلاث قطع من الدائرة الزرقاء وشكلين بيضاويين نحدد الأعلى منهما ونعيده من الشريط العلوي خطوتين إلى الخلف ليكون خلف الدائرة الحمراء. نكرر الشكل البيضاوي الأخضر ونلونه باللون الأسود، ثم مع الضغط على Ctrl+Shift نصغره مع أهمية جعل حدوده اليمنى واليسرى أكبر من حدود الدائرة الحمراء. ثم نعيد الشكل المكرر خطوتين للخلف بحيث يكون خلف الدائرة الحمراء. حدد كلا الشكلين البيضاويين الأخضر والأسود ثم كررهما مجددا ومع بقاء تحديد الشكلين المكررين اختر من قائمة Path الأمر Difference ليتكون عندنا شكل حلقة تحيط بالدائرة. لون الحلقة باللون البرتقالي واجعل قيمة شفافيتها opacity 100 لتتمكن من تمييزها. كرر الدائرة الحمراء الوسطى واخترها هي والحلقة البرتقالية ثم اتبع المسار: Path > Intersection ثم نجزئ ما تبقى من الحلقة بالأمر Break apart ليظهر لنا شكلين منفصلين عن بعضهما سنحذف العلوي منهما بتحديده ثم من لوحة المفاتيح نضغط على زر الحذف. ثم نحدد الشكل السفلي البرتقالي المتبقي مع الدائرة الحمراء الأصلية ونطبق الأمر Difference من قائمة المسار. الهدف من هذه الخطوات هو أن يظهر شكل الحلقة المحيطة بالدائرة الوسطى لتبدو كأنها في وسط الدائرة الزرقاء التي تحيط بها وهذا سيظهر لنا عند تلوين الشكل وإزالة الشفافية بشكل أوضح. سنكرر نفس الخطوات على الشكل البيضاوي الأخضر السفلي والتي اتبعناها مع الشكل العلوي، يمكنك متابعة الصور أو العودة للخطوات السابقة وتطبقيها كما هي. تأكد بعد حصولك على الحلقة الصفراء أن تكرر الدائرة الحمراء وتحددها مع الحلقة وتختار من قائمة المسار الأمر Intersection كما فعلنا مع سابقتها ثم تتابع بقية الخطوات. وكما فعلنا سابقا سنحدد الدائرة الأصلية الحمراء مع الجزء الأصفر المتبقي ونختار الأمر Difference من قائمة المسارات. وبهذا نكون حصلنا على الشكل الكروي ثلاثي الأبعاد، ويتبقى لنا تلوينه وإضافة الضلال والتدرجات اللونية التي ستعطيه برزا وبعدا. نحدد جميع أجزاء الشكل الكروي ونجعل قيمة الشفافية 100 . نختار الدائرة الوسطى الحمراء ونلونها باللون الوردي الفاقع والذي اخترناه من الشريط السفلي. ملاحظة: يمكنك الاستفادة من القيم الموجودة في لوحة التعبئة والحدود Fill and stroke إذا أردت الوصول للألوان الموجود في الصورة بدقة. نجعل نوع تعبئة الدائرة تدرجا شعاعيا Radial gradient من تبويب التعبئة Fill وعند اختيار نوع التدرج سيظهر لنا في أسفل لوحة التعبئة خيار للتعديل على اللون. نختار أحد العقد الطرفية التي ستظهر على الشكل وفي لوحة التعبئة عند الحرف A سنجعل القيمة 255 أو نسحب المؤشر الموجود لأقصى اليمين وذلك لنزيل شفافية اللون. نحدد العقدة الوسطى ثم من الشريط العلوي سنختار الرمز + لإضافة عقد إضافية. نختار العقدة الوسطى مجددا ثم من الخيار + في الشريط العلوي سنضيف عقد إضافية، ثم من الشريط العلوي أيضا عند كلمة stops يمكننا عرض مجموعة العقد اللونية الأربعة التي حصلنا عليها واختيار العقدة التي نرغب بتغيير لونها ونغير كل عقدة باللون الذي نرغب به. وهذه قيم الألوان التي استخدمناها للعقد بترتيبها من الأعلى إلى الأسفل في القائمة Stops: ff83b5ff ff0066ff a70043ff 2c0012ff والتي يمكنك نسخها ولصقها في تبويب التعبئة Fill في قيمة RGBA أسفل اللوحة. سنسحب العقدة الوسطى ونحركها ليمين الدائرة لإضفاء المزيد من التأثيرات اللونية. نختار القطع الزرقاء الثلاثة ونوحدها معا عن طريق الأمر Union حتى نلونها كقطعة واحدة. نلونها باللون الأصفر ثم نعطيها تدرجا شعاعيا كما فعلنا مع الدائرة الوردية السابقة. نجعل قيمة شفافية اللون في القعد الطرفية كاملة ونضيف المزيد من العقد اللونية كما فعلنا سابقا. القيم التي استخدمناها مع العقد الأربعة هي كالتالي بترتيبها من الأعلى إلى الأسفل في القائمة Stops: ffea97ff ffcc00ff ff9c00ff ff0000ff في حال رغبتنا بتوسعة تدرج الشكل مع المحافظة على التوزيع من الجانبين يمكننا سحب إحدى العقد الطرفية مع الضغط على Ctrl+Shift أثناء السحب. كما يمكننا أن نقوم بتحريك العقد المتوسطة بنفس الطريقة. نحرك التدرج إلى الجزء العلوي من القطع الثلاث الصفراء. نلون الأشكال البيضاوية الخضراء بالتدرج الخطي حيث سنختار للعقدة اليمنى اللون البرتقالي، ولليسرى اللون الأصفر بعد إزالة شفافية اللون. ثم نقوم بتلوين الشكل البيضاوي السفلي باللون الأصفر دون تدرج، ونبقي التي لوناها باللون الأسود كما هي دون تغيير. لإضافة ظل على الدائرة الوردية، سنكرر القطع الثلاث الصفراء التي وحدناها مسبقا، ونلونها باللون الأسود. نحركها قليلا للأسفل إلى الحد الذي نريد أن يبدو عليه ارتفاع الظل، ثم نقوم بتجريئها عن طريق الأمر Break apart ونحذف القطعة الثالثة السفلية لعدم حاجتنا لها، ثم نعيد تجميع القطعتين المتبقيتين عن طريق الأمر Union. نكرر الدائرة الوردية ونختارها هي والظل الذى أنشأناه ثم نختار الأمر Intersection من قائمة Path ليتبقى لنا الظل في حدود الدائرة فقط ثم نعيده خطوة للخلف. نرسم دائرة جديدة متساوية الأبعاد بالضغط على Ctrl أثناء رسمها، ثم من لوحة المحاذاة والاصطفاف Align and distribute نحاذيها عاموديا مع الدائرة الوردية. نرفعها للأعلى لحافة القطعة الصفراء العلوية مع الضغط على Ctrl أثناء التحريك للمحافظة على محاذاتها، ثم من السهم السفلي الأوسط مع الضغط على Ctrl نقوم بتصغيرها للحد المناسب. نكرر القطع الثلاث الصفراء مجددا ونختارها هي والدائرة التي أنشأناها حديثا ثم نختار الأمر Intersection. ونلون الشكل المتبقي باللون الأبيض مع تقليل الشفافية لأكثر من المنتصف. نحدد أجزاء الجسم الكروي جميعها ثم نقوم بتجميعها عن طريق الاختصار Ctrl+G أو بالزر الأيمن نختار Group. ندور الجسم الكروي بالاتجاه الذي نريد، وبهذا نكون وصلنا للنتيجة النهائية للشكل الكروي. الدرس مستفاد من مقطع فيديو بعنوان: Inkscape Tutorial: 3D Sphere لصاحبه Nick Saporito.

قبل التعرف على التنسيقات والألوان في Canvas سنقوم بتطبيق مثال رسومي للعبة شهيرة باستخدام أنواع المسارات التي تعلّمناها في الدرس السابق لإنشاء شخصيات لعبة Pacman الشهيرة. تصميم واجهة اللعبة سنحتاج لرسم مستطيلات بحواف دائرية لتمثيل الحواجز في اللُّعبة لذا سننشئ دالة ولتكن roundRect ونعطيها المعاملات parameters المناسبة لإنشاء مستطيل بحواف دائرية. السّياق Context سنحتاج لتمرير نوع السّياق للدالة التي سيتم إنشاؤها. إحداثيات نقطة بداية الرسم (x,y). عرض المستطيل width. طول المستطيل height. القطر radius. function roundedRect(ctx, x, y, width, height, radius) في بداية كل عملية رسم سنحتاج لاستدعاء الدالة beginPath لإنشاء القائمة List التي ستحوي نقاط المسار كما شرحنا في الدرس السّابق. تتبعها الدالة moveTo لتحديد النقطة التي سيبدأ عندها الرسم. سيتم تمرير المعاملات x,y للدالة moveTo مع جمع قيمة القطر radius للقيمة y. نبدأ الآن برسم خط مستقيم باستخدام الدالة lineTo وتمرير القيمة x نفسها التي بدأنا عندها الرسم مع قيمة y المضاف إليها طول المستطيل height ليتم رسم خط مستقيم بطول المستطيل وطرح قيمة القطر radius وهكذا ينشأ الضلع الأول للمستطيل. الآن رسم حافة المستطيل باستخدام الدالة quadraticCurveTo وتحديد المعاملات: quadraticCurveTo(x, y + height, x + radius, y + height); ثم رسم الضلع الثاني للمستطيل باستدعاء الدالة lineTo: ctx.lineTo(x + width-radius, y + height); رسم الحافة الثانية للمستطيل: ctx.quadraticCurveTo(x + width, y + height, x + width, y + height-radius); رسم الضلع الثالثة للمستطيل: ctx.lineTo(x + width, y + radius); رسم الحافة الثالثة للمستطيل: ctx.quadraticCurveTo(x + width, y, x + width-radius, y); رسم الضلع الرابعة للمستطيل: ctx.lineTo(x + radius, y); رسم الحافة الرابعة للمستطيل: ctx.quadraticCurveTo(x, y, x, y + radius); أخيرًا استدعاء الدالة stroke لرسم المستطيل بشكل مفرغ: function roundedRect(ctx, x, y, width, height, radius){ ctx.beginPath(); ctx.moveTo(x, y + radius); ctx.lineTo(x, y + height-radius); ctx.quadraticCurveTo(x, y + height, x + radius, y + height); ctx.lineTo(x + width-radius, y + height); ctx.quadraticCurveTo(x + width, y + height, x + width, y + height-radius); ctx.lineTo(x + width, y + radius); ctx.quadraticCurveTo(x + width, y, x + width-radius, y); ctx.lineTo(x + radius, y); ctx.quadraticCurveTo(x, y, x, y + radius); ctx.stroke(); } حان الوقت الآن لاستدعاء الدالة roundedRect ورسم المستطيلات التي ستمثل الحواجز في لعبة pacman. في الدالة draw سيتم استدعاء الدالة roundedRect على عدد المستطيلات (الحواجز) التي ستكون في الشكل. سأقوم بإنشاء جزء من واجهة اللُّعبة (جزء من الإطار الخارجي وعدد من المستطيلات) كما في الشيفرة التالية: function draw() { var canvas = document.getElementById('tutorial'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); roundedRect(ctx, 12, 12, 150, 150, 15); roundedRect(ctx, 19, 19, 150, 150, 9); roundedRect(ctx, 53, 53, 49, 33, 10); roundedRect(ctx, 53, 119, 49, 16, 6); roundedRect(ctx, 135, 53, 49, 33, 10); roundedRect(ctx, 135, 119, 25, 49, 10); } } سينتج الشكل: رسم شكل pacman سنحتاج لرسم شكل pac man إلى استدعاء الدالة arc لرسم الشكل الدائري والدالة lineTo لتحديد الفم: ctx.beginPath(); ctx.arc(37, 37, 13, Math.PI / 7, -Math.PI / 7, false); ctx.lineTo(31, 37); ctx.fill(); رسم مستطيلات صغيرة تمثل طعام pacman سنحتاج إلى حلقات تكرار لإنشاء مستطيلات صغيرة بين الحواجز كما في المثال التالي: for (var i = 0; i < 8; i++) { ctx.fillRect(51 + i * 16, 35, 4, 4); } for (i = 0; i < 6; i++) { ctx.fillRect(115, 51 + i * 16, 4, 4); } for (i = 0; i < 8; i++) { ctx.fillRect(51 + i * 16, 99, 4, 4); } رسم الشبح لرسم هيكل جسم الشبح سنستخدم الدالة bezierCurveTo لعمل الشكل العلوي من الجسم ثم استدعاء الدالة lineTo بإحداثيات مناسبة لعمل المنحنيات السّفلية للجسم: 1- رسم هيكل الشبح ctx.beginPath(); ctx.moveTo(83, 116); ctx.lineTo(83, 102); ctx.bezierCurveTo(83, 94, 89, 88, 97, 88); ctx.bezierCurveTo(105, 88, 111, 94, 111, 102); ctx.lineTo(111, 116); ctx.lineTo(106.333, 111.333); ctx.lineTo(101.666, 116); ctx.lineTo(97, 111.333); ctx.lineTo(92.333, 116); ctx.lineTo(87.666, 111.333); ctx.lineTo(83, 116); ctx.fill(); 2- العينان ctx.fillStyle = "white"; ctx.beginPath(); ctx.moveTo(91, 96); ctx.bezierCurveTo(88, 96, 87, 99, 87, 101); ctx.bezierCurveTo(87, 103, 88, 106, 91, 106); ctx.bezierCurveTo(94, 106, 95, 103, 95, 101); ctx.bezierCurveTo(95, 99, 94, 96, 91, 96); ctx.moveTo(103, 96); ctx.bezierCurveTo(100, 96, 99, 99, 99, 101); ctx.bezierCurveTo(99, 103, 100, 106, 103, 106); ctx.bezierCurveTo(106, 106, 107, 103, 107, 101); ctx.bezierCurveTo(107, 99, 106, 96, 103, 96); ctx.fill(); 3- البؤبؤ الأيمن ctx.fillStyle = "black"; ctx.beginPath(); ctx.arc(101, 102, 2, 0, Math.PI*2, true); ctx.fill(); 4- البؤبؤ الأيسر ctx.beginPath(); ctx.arc(89, 102, 2, 0, Math.PI*2, true); ctx.fill(); يمكنك استعراض المثال على JSFiddle. الكائن Path2D كما لاحظت في المثال السّابق أن كل شكل هو عبارة عن سلسلة من التعليمات التي تنفذ بالترتيب للحصول على المسار المطلوب ولا يوجد ارتباط واضح بين سلسلة التعليمات والشكل الناتج. ما رأيك أن نقوم بعملية تبسيط وتحسين وذلك بتحديد التعليمات الخاصة بكل شكل عن طريق استخدام الكائن Path2D. يقوم المنشئ Constructor عند إنشاء كائن Path2D بإرجاع كائن Path2D. new Path2D(); new Path2D(path); new Path2D(d); جميع الدوال الخاصة بإنشاء المسارات مثل moveTo ،rect ،arc، أو quadraticCurveTo..الخ يمكن استدعاؤها عن طريق الكائن Path2D. يوفّر Path2d API طريقة للجمع بين المسارات باستخدام الدالة addPath ويكون ذلك مفيدًا عندما ترغب في بناء شكل من عدة مكونات. سأقوم بإنشاء مستطيل ودائرة باستخدام الكائن Path2D. كل من المستطيل والدائرة يُخزن ككائن Path2D بحيث تكون متاحة للاستخدام في وقت لاحق. function draw() { var canvas = document.getElementById('canvas'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); var rectangle = new Path2D(); rectangle.rect(10, 10, 50, 50); var circle = new Path2D(); circle.moveTo(125, 35); circle.arc(100, 35, 25, 0, 2 * Math.PI); ctx.stroke(rectangle); ctx.fill(circle); } } لاحظ أنه تم استدعاء الدالتين stroke و fill من خلال السّياق ctx وتمرير الكائنين rectangle و circle من نوع Path2D كمعاملات. وكذلك أصبح واضحًا ما الشكل الذي ترسمه كل سلسلة من التعليمات. الألوان Colors حتى الآن تعرّفنا على الخاصيّة fillStyle والتي تقوم بملأ المسار بلون معين. سنتعرّف أيضًا على الخاصيّة fillStroke والتي تقوم بتلوين المسار المفرّغ (تلوين الحواف). إذًا يوجد خاصيتين أساسيتين لتطبيق الألوان على الأشكال: fillStyle = color strokeStyle = color القيمة الافتراضية لـ color هي اللون الأسود والتي تمثل القيمة #000000، يمكن تمثيل اللون color بعدة طرق. مثلًا تطبيق اللون البرتقالي باستخدام الخاصيّة fillStyle: ctx.fillStyle = "orange"; ctx.fillStyle = "#FFA500"; ctx.fillStyle = "rgb(255, 165, 0)"; ctx.fillStyle = "rgba(255, 165, 0, 1)"; تطبيق الألوان على شكل باستخدام الخاصية FillStyle سأعرض مثالًا لكيفية ملء شكل باستخدام مجموعة مستطيلات بألوان مختلفة ليبدو شكل متعدد الألوان. سيتم إنشاء حلقتي تكرار وذلك لتوليد مجموعة ألوان RGB مختلفة بتغيير قيمة red وgreen باستخدام المتغيرين i و j وترك القيمة blue ثابتة 0 سيبدو لك الشكل وكأنه منشأ باستخدام photoshop. unction draw() { var ctx = document.getElementById('canvas').getContext('2d'); for (var i = 0; i < 6; i++){ for (var j = 0; j < 6; j++){ ctx.fillStyle = 'rgb(' + Math.floor(255-42.5*i) + ',' + Math.floor(255-42.5*j) + ',0)'; ctx.fillRect(j*25, i*25, 25, 25); } } } النتيجة: تطبيق الألوان على شكل باستخدام الخاصية StrokeStyle سيكون المثال التالي مشابهًا للمثال السّابق مع تغيير الخاصيّة fillStyle إلى strokeStyle واستخدام الدالة arc لرسم دوائر داخل مستطيل وتوليد مجموعة ألوان RGB مختلفة بتغيير قيمة green و blue باستخدام المتغيرين i و j وترك القيمة red ثابتة. function draw() { var ctx = document.getElementById('canvas').getContext('2d'); for (var i = 0; i < 6; i++){ for (var j = 0; j < 6; j++){ ctx.strokeStyle = 'rgb(0,' + Math.floor(255-42.5*i) + ',' + Math.floor(255-42.5*j) + ')'; ctx.beginPath(); ctx.arc(12.5+j*25, 12.5+i*25, 10, 0, Math.PI*2,true); ctx.stroke(); } } } النتيجة: الشفافية Transparency بالإضافة لرسم الأشكال الواضحة يمكن أيضًا رسم أشكال شبه شفافة أو شفافة ويتم ذلك إما عن طريق تعيين الخاصيّة globalAlpha أو عن طريق تحديد الشفافية في اللون RGB باستخدام الخاصيّتين StrokeStyle أو FillStyle: globalAlpha = transparencyValue تشبه الدالة ()rgba الدالة ()rgb باختلاف المعامل الأخير والذي يحدد قيمة الشفافية اللَّونية. تأخذ الشفافية قيمتها من 0.0 شفافية مطلقة إلى 1.0 شفافية معدومة. مثال لتحديد الشفافية باستخدام الدالة ()rgba: ctx.strokeStyle = "rgba(255, 0, 0, 0.5)"; ctx.fillStyle = "rgba(255, 0, 0, 0.5)"; تحديد الشفافية باستخدام GlobaAlpha سأقوم بعرض مثال لرسم 4 مربعات متلاصقة وبألوان مختلفة ليتم تشكيل مربع كبير ثم تطبيق شفافية بشكل دوائر متدرجة الأحجام مركزها هي نقطة تلاقي المربعات (مركز المربع) وذلك عن طريق إنشاء حلقة تكرار ورسم الدوائر بقطر متزايد فوق بعضها البعض. function draw() { var ctx = document.getElementById('canvas').getContext('2d'); ctx.fillStyle = '#FD0'; ctx.fillRect(0, 0, 75, 75); ctx.fillStyle = '#6C0'; ctx.fillRect(75, 0, 75, 75); ctx.fillStyle = '#09F'; ctx.fillRect(0, 75, 75, 75); ctx.fillStyle = '#F30'; ctx.fillRect(75, 75, 75, 75); ctx.fillStyle = '#FFF'; ctx.globalAlpha = 0.2; for (i = 0; i < 7; i++){ ctx.beginPath(); ctx.arc(75, 75, 10+10*i, 0, Math.PI*2, true); ctx.fill(); } } تحديد الشفافية باستخدام ()RGBA سأقوم بعرض مثالًا مشابهًا للمثال السّابق ولكن بدلًا من رسم دوائر فوق بعضها بقطر متزايد سأرسم مستطيلات بشفافية متزايدة (زيادة التعتيم) باستخدام ()rgba: function draw() { var ctx = document.getElementById('canvas').getContext('2d'); ctx.fillStyle = 'rgb(255, 221, 0)'; ctx.fillRect(0, 0, 150, 37.5); ctx.fillStyle = 'rgb(102, 204, 0)'; ctx.fillRect(0, 37.5, 150, 37.5); ctx.fillStyle = 'rgb(0, 153, 255)'; ctx.fillRect(0, 75, 150, 37.5); ctx.fillStyle = 'rgb(255, 51, 0)'; ctx.fillRect(0, 112.5, 150, 37.5); for (var i = 0; i < 10; i++){ ctx.fillStyle = 'rgba(255, 255, 255,'+(i+1)/10+')'; for (var j = 0; j < 4; j++){ ctx.fillRect(5+i*14, 5+j*37.5, 14, 27.5); } } } تصاميم وتنسيقات الخطوط يمكنك إنشاء ورسم خطوط بأشكال وتنسيقات مختلفة باستخدام مجموعة من الخصائص: lineWidth = value تحدد سمك الخط المراد رسمه: lineCap = type تحدد مظهر نهاية الخط: lineJoin = type تحدد مظهر الزوايا عند الخطوط المتلاقية: getLineDash() تُرجع مصفوفة لخط من نمط dashes تحوي على أرقام تحدد المسافات لتناوب رسم الخط والمسافة: setLineDash(segments) تحدد الخط الحالي ليأخذ نمط dash: lineDashOffset = value تحدد أين ستبدأ مصفوفة النمط dash على الخط. خاصية lineWidth هذه الخاصيّة تُحدد سمك الخط الحالي وتأخذ قيم موجبة، القيمة الافتراضية لها هي 1.0. عرض الخط هو سمك الحواف Stroke التي تتركز على مسار معين. المثال التالي يعرض 10 خطوط مسقيمة ذات سمك متزايد. function draw() { var ctx = document.getElementById('canvas').getContext('2d'); for (var i = 0; i < 10; i++){ ctx.lineWidth = 1+i; ctx.beginPath(); ctx.moveTo(5+i*14, 5); ctx.lineTo(5+i*14, 140); ctx.stroke(); } } خاصية lineCap تحدد الخاصيّة lineCap كيف ستُرسم النقاط النهائية للخط حيث تأخذ الخاصيّة lineCap ثلاث قيم butt ،round وsquare. القيمة الافتراضية هي butt. butt: تحدد نهايات الخطوط لتكون مربعة. round: تحدد نهايات الخطوط لتكون دائرية. square: تقوم بإنشاء مربع بنفس عرض الخط وارتفاع يساوي نصف سماكة الخط وتضيفه عند نهاية الخط. سأقوم بعرض مثال يرسم ثلاثة خطوط بقيم lineCap مختلفة سيتم تحديد بداية ونهاية الخطوط بواسطة دليلن (خطين أفقيين) لتمييز الفرق بين الخطوط الثلاثة: function draw() { var ctx = document.getElementById(‘canvas’).getContext(‘2d’); var lineCap = [‘butt’,’round’,’square’]; // Draw guides ctx.strokeStyle = ‘#09f’; ctx.beginPath(); ctx.moveTo(10,10); ctx.lineTo(140,10); ctx.moveTo(10,140); ctx.lineTo(140,140); ctx.stroke(); // Draw lines ctx.strokeStyle = ‘black’; for (var i=0;i } كما تلاحظ في الخط اليساري رُسم بقيمة butt. الخط في المنتصف رُسم بقيمة round الخط الأخير رسم بقيمة square والتي تقوم بإنشاء مربع بنفس عرض الخط وارتفاع يساوي نصف سماكة الخط. خاصية lineJoin تحدد الخاصيّة lineJoin كيف لمسارين (خطوط، أقواس، منحنيات) أن يرتبطا معًا أي أنها تحدد شكل نقطة الارتباط بين مسارين. تأخذ الخاصيّة lineJoin ثلاث قيم round ،bevel وmiter. القيمة الافتراضية لـ lineJoin هي miter. Round: تقوم بتدوير زوايا الشكل عن طريق ملئها بقطاعات دائرية نصف قطر هذه الزوايا الدائرية يساوي عرض الخط. Bevel: تقوم بسد المنطقة المثلثية الناتجة من تلاقي خطين بحيث تقوم بحذف المثلث الناتج من تلاقي الخطين. وملأ المساحة المتبقية. Miter: تقوم بملأ المساحة بين نهايتي الخطين المتلاقين لتشكل مثلث. المثال التالي يوضح عمل كل واحد من تلك الخصائص: function draw() { var ctx = document.getElementById('canvas').getContext('2d'); var lineJoin = ['round', 'bevel', 'miter']; ctx.lineWidth = 10; for (var i = 0; i < lineJoin.length; i++){ ctx.lineJoin = lineJoin[i]; ctx.beginPath(); ctx.moveTo(-5, 5+i*40); ctx.lineTo(35, 45+i*40); ctx.lineTo(75, 5+i*40); ctx.lineTo(115, 45+i*40); ctx.lineTo(155, 5+i*40); ctx.stroke(); } } استخدام الشرطات dashes يمكنك تحديد الخط ليأخذ نمط الشرطات dashed باستخدام الدالة setLineDash والخاصيّة lineDashOffset لتحديد نمط الشرطات للخطوط. تأخذ الدالة setLineDash قائمة list من الأرقام التي تحدد المسافات لتناوب رسم الخط والمسافة. الخاصيّة lineDashOffset تحدد القيمة التي سيبدأ عندها النمط. في المثال أدناه سأقوم بإنشاء شكل يشبه تأثير مسيرة النمل مع تأثير حركي عادةً يوجد في أداة التحديد selection tool في برامج الجرافيكس.( سيتم شرح التأثيرات الحركية بالتفصيل لاحقًا) var ctx = document.getElementById('canvas').getContext('2d'); var offset = 0; function draw() { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.setLineDash([4, 2]); ctx.lineDashOffset = -offset; ctx.strokeRect(10, 10, 100, 100); } function march() { offset++; if (offset > 16) { offset = 0; } draw(); setTimeout(march, 20); } march(); التدرجات اللونية Gradient يوجد نوعان من التدرّجات اللَّونية في canvas: تدرجات لونية خطية Linear Gradient. وتدرجات لونية شعاعية Radial Gradient. يتم إنشاء تدرُّجات لونية عن طريق إنشاء كائن CanvasGradient باستخدام أحد الدالتين التالييتن ثم نطبق أحد الخاصيّتين fillStyle أو strokeStyle على الكائن. 1- الدالة CreateLinearGradient createLinearGradient(x1, y1, x2, y2) تنشئ كائن من نوع linear gradient حيث تمثل x1, y1 نقطة البداية و x2, y2 نقطة النهاية. 2- الدالة Create RadialGradient createRadialGradient(x1, y1, r1, x2, y2, r2) تنشئ تدرج لوني شعاعي حيث تمثل المعاملات دائرتين x1, y1 مركز الدائرة الأولى ونصف قطرها r1 و x2, y2 مركز الدائرة الثانية ونصف قطرها هو r2. مثال: var lineargradient = ctx.createLinearGradient(0, 0, 150, 150); var radialgradient = ctx.createRadialGradient(75, 75, 0, 75, 75, 100); بعد إنشاء نوع التدرّج اللَّوني يمكنك تطبيق الألوان عليه باستخدام الدالة ()addColorStop: gradient.addColorStop(position, color) المعامل position هو رقم بين 0.0 و 1.0 ويحدد الوضع النسبي للون في الإنحدار. المعامل color يحدد اللون ويجب أن يكون نص string ممثل بـ CSS. يمكن إضافة العديد من نقاط اللّون إلى التدرّج فيما يلي مثال لانحدار خطي بسيط من اللّونين الأبيض والأسود: var lineargradient = ctx.createLinearGradient(0, 0, 150, 150); lineargradient.addColorStop(0, 'white'); lineargradient.addColorStop(1, 'black'); تطبيق تدرج لوني خطي Linear Gradient مع الخاصيتين fillStyle و strokStyle كما ستلاحظ في المثال التالي أن كلا الخاصيّتين fillStyle و strokeStyle تأخذان كائنًا من نوع canvasGradient. function draw() { var ctx = document.getElementById('canvas').getContext('2d'); var lingrad = ctx.createLinearGradient(0, 0, 0, 150); lingrad.addColorStop(0, '#00ABEB'); lingrad.addColorStop(0.5, '#fff'); lingrad.addColorStop(0.5, '#26C000'); lingrad.addColorStop(1, '#fff'); var lingrad2 = ctx.createLinearGradient(0, 50, 0, 95); lingrad2.addColorStop(0.5, '#000'); lingrad2.addColorStop(1, 'rgba(0, 0, 0, 0)'); ctx.fillStyle = lingrad; ctx.strokeStyle = lingrad2; ctx.fillRect(10, 10, 130, 130); ctx.strokeRect(50, 50, 50, 50); } المثال أعلاه يشرح كيفيّة عمل تدرج لوني خطي يمثل لون السماء والأرضية عن طريق إنشاء متغير lingrad ثم استدعاء الدالة ()addColorStop لتطبيق الألوان الأزرق والأبيض ثم الأخضر والأبيض ثم إسنادها للخاصية fillStlye ثم إنشاء تدرج لوني أسود عن طريق إنشاء متغير 2lingrad وتطبيق نقاط لونية باللون الأسود ثم إسناده للخاصية strokeStyle. أخيرًا رسم الأشكال بالإحداثيات المناسبة: تطبيق تدرج لوني شعاعي Radial Gradient مع الخاصيتين fillStyle و strokStyle لفهم كيفية عمل التدرّج اللَّوني الشّعاعي لابد من عرض مثال. المثال أدناه يحدد أربعة تدرجات شعاعية مختلفة حيث سيتم إنشاء تدرّجات شعاعية أكثر تعقيدًا عن التدرّجات الشّعاعية الكلاسيكية. function draw() { var ctx = document.getElementById('canvas').getContext('2d'); var radgrad = ctx.createRadialGradient(45, 45, 10, 52, 50, 30); radgrad.addColorStop(0, '#A7D30C'); radgrad.addColorStop(0.9, '#019F62'); radgrad.addColorStop(1, 'rgba(1,159,98,0)'); var radgrad2 = ctx.createRadialGradient(105, 105, 20, 112, 120, 50); radgrad2.addColorStop(0, '#FF5F98'); radgrad2.addColorStop(0.75, '#FF0188'); radgrad2.addColorStop(1, 'rgba(255,1,136,0)'); var radgrad3 = ctx.createRadialGradient(95, 15, 15, 102, 20, 40); radgrad3.addColorStop(0, '#00C9FF'); radgrad3.addColorStop(0.8, '#00B5E2'); radgrad3.addColorStop(1, 'rgba(0,201,255,0)'); var radgrad4 = ctx.createRadialGradient(0, 150, 50, 0, 140, 90); radgrad4.addColorStop(0, '#F4F201'); radgrad4.addColorStop(0.8, '#E4C700'); radgrad4.addColorStop(1, 'rgba(228,199,0,0)'); ctx.fillStyle = radgrad4; ctx.fillRect(0, 0, 150, 150); ctx.fillStyle = radgrad3; ctx.fillRect(0, 0, 150, 150); ctx.fillStyle = radgrad2; ctx.fillRect(0, 0, 150, 150); ctx.fillStyle = radgrad; ctx.fillRect(0, 0, 150, 150); } كما تلاحظ تم إنشاء 4 تدرجات لونية شعاعية وتحديد إحداثيات ونصف قطر كل من الدائرتين اللَّونيتين لكل تدرج شعاعي. كانت هذه المعلومات بمثابة طرف الخيط الذي يقودك للبدء في تعلُّم رسم الأشكال على Canvas كالمحترفين. يحتاج الأمر منك للكثير من التجريب والتخيل لتتقن العمل على هذه الأداة واكتشاف ميزاتها. المصادر

سنقوم في هذا الدرس باستخدام عددٍ من الصور والنماذج الجاهزة ثم سنقوم بالتعديل عليها وإضافة بعض التأثيرات مع رسم بعض الأشكال البسيطة وتطبيق تأثيرات الألوان والحدود والتدرجات اللونية للوصول في النهاية إلى مشهد دراماتيكي لنافذة في قاعة عملاقة على المدينة. سنحتاج في البداية إلى الصورة الأساسية التي ستغطي كامل مساحة التصميم والمُتمثّلة بمشهد عام للمدينة في الليل. وفي موقع eskipaper.com وجدتُ مجموعةً رائعةً من هذه النوعية من الصور واخترت منها هذه الصورة. افتح هذه الصورة في فوتوشوب ثم تأكّد من أن المسطرة مُفعّلة، فإن لم تكن مُفعّلة فاضغط Ctrl+R لتظهر المسطرة ثم استخدم أداة التحريك Move Tool من خلال الضغط على المفتاح V واسحب دليلًا من المسطرة العلوية الأفقيّة وضعه على الثلث السفلي من الصورة. استعن بهذا الدليل وحدّد باستخدام أداة التحديد المستطيل Rectangular Marquee Tool الجزء العلوي من الصورة ابتداءً من الدليل ثم اضغط Ctrl+J لنسخ التحديد في طبقة جديدة ثم اقلب النسخة رأسًا على عقب من القائمة: Edit > Transform > Flip Vertical ثم حرّك النسخة أسفل الدليل مباشرة. الآن اصنع نسخةً عن الطبقة الجديدة ثم اذهب للقائمة: Filter > Blur > Gaussian Blur وضع قيمة نصف القطر 5. ثم نطبّق قناع Mask على هذه الطبقة المموّهة بحيث يكون الجزء العلوي من الطبقة شديد الوضوح على عكس الجزء السفلي. ويتم ذلك عبر رسم تدرج لوني من الأسود إلى الأبيض فوق طبقة القناع تحديدًا بشكل يغطي الجزء السفلي المنسوخ من الصورة. إنّ الجزء السفلي في هذه الصورة والذي نعمل عليه هو عبارة عن أرضيّة القاعة التي تعكس صورة أضواء المدينة في الليل وعملية التمويه الأخيرة تدلُّ على أن الأرضية ليست مرآة وإنما هي مصقولة بحيث تعكس الصور ولذلك يظهر التمويه عليها وبما أنها داخل قاعة فيجب أن تكون الإضاءة متفاوتة حيث أن الضوء قرب حافة القاعة قوي كفاية بينما سيخبو تدريجيًّا كلّما اتّجهنا للداخل، لذلك أنشئ طبقة جديدة ثم لوّنها بالكامل باللون الأسود ثم طبّق عليها قناع MASK وارسم فوقه تدرّجًا لونيًّا من الأسود إلى الأبيض بحيث تكون الحافة سوداء والطرف السفلي للصورة بيضاء. وستكون النتيجة بهذا الشكل. أنشئ طبقة لون فوق كل الطبقات في لوحة الطبقات. اختر اللون الأزرق ذو القيمة 486eeb من لوحة الألوان. اجعل خصائص المزج لهذه الطبقة Overlay. هذا اللون يضفي رونقًا خاصًّا على المشهد الليلي للمدينة. الآن استخدم أداة رسم شكل المستطيل Rectangle Tool وارسم مستطيلًا أسود رفيعًا يقطع الصورة عرضيًّا عند الدليل تمامًا. ثم انقر على هذه الطبقة بالزر الأيمن واختر Rasterize Layer. ارسم مستطيلًا طوليًّا هذه المرة يبدأ من أعلى الصورة وينتهي عند المستطيل الأفقي بعرض متقارب مع سماكة المستطيل الأفقي. انسخ هذه الطبقة بالضغط على Ctrl+J ثم وزّع المستطيلات عرضيًّا بشكلٍ متوازن. تُشكّل هذه الأشكال منظر عدّة نوافذ عملاقة تُطلُّ على المدينة. الآن ضاعف المستطيل العمودي الأوسط (الثاني من اليمين) وحرّك النسخة على يمين الأصل ثم حدّده بالنقر على مُصغّر الطبقة مع الضغط على مفتاح Ctrl ثم استخدم تدرجًّا لونيًّا من الأزرق إلى الأسود مع اختيار الخيَار Reflected من شريط أدوات التدرج اللوني العلوي واجعل التدرج يغطي جزءًّا صغيرًا وسط العمود الأسود. طبّق تأثير الحدود من ضمن أنماط الطبقة على المستطيل واجعلها حدودًا سوداء قليلة السماكة بقيمة 2. ضاعف هذه الطبقة الجديدة وحرّك النسخة الجديدة إلى يسار العمود الأوسط الأيمن. تُمثّل الأشكال الجديدة انعكاس إضاءة المدينة على جوانب الأعمدة. ولمنح الواقعية الهندسية على التصميم انسخ طبقتي الانعكاس وحرّكهما إلى جوانب الأعمدة الجانبية مع مراعاة جهة المحاذاة واستخدم أدوات التعديل Transform وذلك بالضغط على Ctrl+T ثم كبّرهما عرضيًّا فقط بشكل طفيف. هذا يمنح المشهد نظرة هندسية واقعية حيث يبدو العمودان في المنتصف مختلفان بالرؤية عن العمودين الجانبيين من حيث زاوية النظر. حدّد جميع الأعمدة العمودية مع طبقات الانعكاس الخاصة بها من خلال النقر عليها مع الضغط على مفتاح Shift ثم انقر بالزر الأيمن عليها واختر Merge Layers وبذلك يتم دمجها في طبقةٍ واحدة تكون فوق طبقة العمود الأفقي الأرضي. طبّق تأثير الظلال Drop Shadow على طبقة العمود الأفقي الأرضي واجعل لون الظلال أزرق والزاوية -90 درجة وDistance بقيمة 4 والحجم Size بقيمة 7. الآن أدمج طبقات الأعمدة جميعها في طبقة واحدة بنفس الطريقة السابقة ثم ضاعف الطبقة الجديدة واعكسها عموديًّا كما فعلنا مع الصورة الأساسية في بداية الدرس، وحرّكها أسفل الدليل لتكون انعكاسًا لشكل الأعمدة على الأرضية، وتأكّد من أن طبقة اللون الأسود المتدرج فوق الجزء السفلي من الصورة فوق كل الطبقات في لوحة الطبقات. ثم ارسم خطًّا رفيعًا جدًّا يفصل بين العمود الأفقي وصورته لتمييز طرف الغرفة. والآن سنُدرج خيالَ رجلٍ واقفٍ يشاهد منظر هذه المدينة من النافذة، وسنستخدم لأجل ذلك نموذجًا مرسومًا جاهزًا مجانيًّا من موقع Cliparts.co وقد اخترت هذه الصورة وبالتحديد الرجل الثاني من اليسار. ضعه وسط أرضيّة الغرفة. طبّق نمط التوهج الداخلي على الرجل Inner Glow بحيث يكون خصائص المزج Normal وقيمة Opacity نحو 70% وبلون أزرق داكن وبحجم 5. وبذلك يظهر الرجل مع تأثير الإضاءة الزرقاء على حوافه ما يمنح التصميم مزيدًا من الواقعيّة. اصنع نسخةً عن طبقة الرجل ثم اقلبها عموديًّا وحرّكها أسفل شكل الرجل الأساسي واجعل طبقة النسخة تحت الطبقة الأصل ثم استخدم أداة الممحاة لمسح أطرف الأقدام البارزة من تحت أقدام الأصل في النسخة المعكوسة. ارسم خطًّا أبيض بسماكة 1 فقط عمودي من طرف الغرفة إلى أسفل الصورة. ضاعف هذا الخط عدّة مرات ووزّع الخطوط بشكل متساوِ على عرض التصميم. استخدم أدوات التحويل Transform من الاختصار Ctrl+T على كل خط من الخطوط وامنح كل خط زاوية انحراف بشكل متناظر مع ترك الخط الأوسط عموديًّا. ارسم خطّين أفقيين وسط الجزء السفلي من الصورة. أدمج جميع الخطوط في طبقة واحدة ثم خفّف مستوى Opacity لهذه الطبقة الجديدة لنحو 15% حيث تُمثّل هذه الخطوط شكل البلاط في الغرفة. تعلّمنا في هذا الدرس استخدام تقنيات عديدة في فوتوشوب كأنماط الطبقات، عكس الصور، رسم الأشكال وتحويلها وتعديلها وفي النهاية يتطلب التصميم رؤية هندسية لتحقيق أكبر قدر من الواقعية من حيث زوايا الرؤية.

اتبع الخطوات في هذا الدرس لتتعلم كيفية تصميم شخصية وحش فكتور ظريف ببرنامج Illustrator. سوف نستخدم الأشكال الأساسية لنصمم هذا الشكل المحبب لهذه الشخصية وسنضيف إلى هذا التصميم الحيوية عبر التدرجات اللونية وتأثيرات تفاصيل الفرو. وحش الغابة الخرافي الذي سنصمّمه مصنوع من الكثير من الأشكال المستديرة البسيطة ما يمنحه مظهرًا لطيفًا. العينين الكبيرتين بالمقارنة مع حجم الجسم هي ما تمنح هذه الشخصية الشكل المُحبب واللطيف. افتح برنامج Adobe Illustrator وارسم شكلًا بيضويًّا عل لوح الرسم. استخدم أداة التحديد المباشر Direct Selection tool لتحريك النقطة السفلية عموديًّا للأعلى لجعل الحافة السفلية مسطّحة. حدّد النقطة العلوية واسحبها عموديًّا للأعلى. ارسم دائرةً داخل شكل الجسم باستخدام أداة الدائرة Circle tool لتكون العين. انسخ CMD+C وألصق في المقدمة CMD+F نسخةً عن الدائرة ثم صغّر حجمها مع الضغط على Shift و Alt. اصنع نسخةً عن أشكال العين ثم اجمعها Group معًا. حدّد العين مع شكل الجسم ثم انقر مرة ثانية على شكل الجسم لجعله العنصر المفتاح. استخدم لوحة المحاذاة Align palette لتوسيط العناصر إلى بعضها. ارسم شكل الفم البيضوي ثم استخدم أداة التحديد المباشر Direct Selection tool لخفض وتسطيح الحافة العلوية منه. حدّد شكل الفم ثم اذهب للقائمة: Object > Path > Offset path وأدخِل القيمة 3mm في نافذة الخيارات. انقر بالزر الأيمن على الشكل واختر Ungroup. ارسم شكلين بيضويين صغيرين كأسنان ثم اصنع نسخةً عن شكل الفم الداخلي. استخدم هذا الشكل كأداة مع لوحة Pathfinder لقص الأسنان ضمن مساحة الفم. اجمع الأشكال الثلاثة حيث ستكون قدم بسيطة، ثم أرسلهم خلف الشكل الأساسي بالاختصار CMD+Shift+[. ارسم دائرة سوداء في مكان آخر على لوح الرسم ثم اسحب النقطة اليمنى أفقيًّا للخارج. استخدم أداة Convert Anchor Point tool الموجودة ضمن أدوات القلم Pen لجعل تلك النقطة التي سحبناها حادةً ثم اضغط أيقونة 'new' أسفل لوحة الفُرش Brushes palette. تأكّد من أن اتجاه الفرشاة صحيح من خيارات الفرشاة، ثم بدّل نمط التلوين إلى Tints. استخدم هذه الفرشاة بأداة الفرشاة Brush tool لرسم سلسلة من الخطوط حول حواف الشخصية. حدّد واحدةً من أشكال الفرشاة السوداء ثم اذهب للقائمة: Select > Same > Appearance ثم اذهب للقائمة Object > Expand Appearance لتُحوّل الحدود إلى أشكال صلبة. مع الضغط على مفتاح Shift انقر على شكل الجسم لإضافته إلى التحديد ثم اختر خيار Merge من لوحة Pathfinder لمزج كافة الأشكال معًا. لوّن الشكل باللون البني ثم أضف تأثير التوهج الداخلي Inner Glow مُستخدمًا لونًا بنيًّا أفتح بقليل. بدّل الإعدادات إلى Normal واضبط الحجم حتى يصبح مناسبًا. ابدأ بإضافة مجموعة من التدرجات اللونية إلى العينين. استخدم الرمادي الفاتح إلى الأبيض على الشكل الخارجي وسلسلة من الألوان البرّاقة للقزحية والأسود إلى الرمادي الداكن للبؤبؤ. خفّف Opacity إلى 70% للدائرتين الإضافيتين البيضاء اللون لتعطي انطباع عن تسليط الضوء البرّاق. حدّد الشكل الخارجي للعين ثم اذهب للقائمة: Effect > Stylize > Drop Shadow اضبط الإعدادات على 0 من أجل Offset و 100% من أجل Opacity. اضبط الحجم على 5mm. لوّن الفم بالألوان المتعلّقة به ثم أضف توهج داخلي إلى الشفاه لمنحه لون أحمر أفتح حول حواف الفم. أنهِ عملية التلوين عبر بعض التدرجات اللونية البسيطة الدائرية للأقدام. استخدم الفرشاة التي أنشأناها لرسم المزيد من الأشكال باستخدام أداة الفرشاة Brush tool. استخدم ألوانًا عشوائيةً ليكون من السهل تمييزها. ارسم صفوف من الأشكال حتى تغطي كامل الجسم. حدّد أحد الأشكال الجديدة ثم اذهب للقائمة: Select > Same > Appearance لتحديد جميع هذه الأشكال ثم اذهب للقائمة: Object > Expand Appearance لوّن هذه الأشكال بتدرج لوني مستخدمًا درجة البني الفاتح. اجعل أحد أطراف التدرج شفافًا عبر منح القيمة 0% إلى Opacity ثم اضبط زاوية التدرج لتتدفق عموديًّا. طبقة واحدة من أشكال الشعر تضيف بعض التفاصيل الرائعة للشخصية، ولكن طبقتين ستضيف المزيد من العمق لتفاصيل الشخصية. استخدم أداة الفرشاة لرسم سلسلة جديدة من أشكال الشعر. اذهب للقائمة: Select > Same > Appearance ثم اذهب إلى: Object > Expand Appearance لتحوّل الحدود إلى أشكال. الفرو الإضافي سيغطي ملامح الوجه. أسهل طريقة لتحديد هذه الأشكال هي البدء بالجسم الرئيسي ثم اختيار Select > Next Object Above من القائمة المنبثقة. بعد تحديدها اضغط على الاختصار CMD+Shift+] لإرسال الأشكال للأعلى. وبهذا ننتهي من تصميم شخصية الوحش الصغير اللطيف. وبالرغم من أنه صُمِّمَ من الأشكال الأساسية إلا أن التدرجات اللونية وتأثير الفرو ساعدت فعلًا على إضافة الحيوية إلى الشخصية. ترجمة -وبتصرّف- للمقال: How To Create a Cute Hairy Vector Monster Character لصاحبه: Chris Spooner.

اتبع الخطوات في هذا الدرس لتتعلم كيفية تصميم شعار ملوّن ومنوّع بنمط رسومات الأيقونة. هذا النوع من الفن ثلاثي الأبعاد في تصميم الأيقونات أصبح شعبيًّا ومطلوبًا على مستوى العالم. اليوم سنرى كيف يمكن تصميم هذا النوع من الرسومات باستخدام الإليستريتور عبر استخدام مجموعة من الأدوات والتقنيات. عادةً ما أفضّل تصميم الشعار بأشكالٍ ذات علاقة بالشركة أو بالعلامة التجارية بصورة توضيحية، ولكننا اليوم سنتعلم استخدام التقنيات لتصميم أيقونة عامة. يتميز هذا الرسم بالعديد من الاتجاهات في التصميم وهي الأكثر شعبية اليوم كالتصميم ثلاثي الأبعاد والتدرّجات اللونيّة والاختلاف في الألوان. افتح ملفًّا جديدًا في الإليستريتور. استخدم أداة رسم الدوائر Circle tool وابدأ برسم الأشكال الأساسية للأيقونة. ارسم دائرةً صغيرةً داخل دائرةٍ كبيرةٍ ثم أضف دائرةً أصغرَ بين حدود الدائرتين. كبّر المشهد قليلًا ثم اضغط CMD+Y لتنتقل إلى عرض الخطوط فقط. سيساعدك هذا على محاذاة الأشكال بدقةٍ متناهيةٍ وبدون أي تداخل بين الأشكال. استخدم أداة المقص Scissors tool لقص أي مسار عند موضع التقاء الخطوط ثم حدّد الأجزاء غير المطلوبة واحذفها. كبّر المشهد أكثر هذه المرة وحدّد النقطتين المفتوحتين لكل المسارات ثم انقر بالزر الأيمن ثم اختر Join. كرّر هذه العملية لجميع لخطوط التي تم قصّها سابقًا حتى تكون جميع الخطوط موصولةً ومستمرّة. اصنع نسخةً عن هذا الشكل حيث سنحتاجه لاحقًا. ارسم دائرةً أخرى فوق الشكل يمر عبره وبحدودٍ متقاربةٍ من حدود الشّكل الأساسي. استخدم أداة المقص Scissors tool لقصِّ النقاط في موقع التقاء الخطوط ثم احذف الأجزاء الإضافيّة الخارجة من الشكل الأساسي لتبقى الخطوط المتواجدة داخل حدود الشكل الأساسي فقط. استمر في رسم خطوطٍ إضافيةٍ داخل الشكل عبر رسم دوائرَ مختلفةِ الأحجام وقص واحذف الأجزاء الإضافية باستخدام أداة المقص Scissors tool. استخدم أداة القلم Pen tool وانقر على النقطة المفتوحة للخط لرسم مسار مستمر. ارسم خطًا خشنًا حول الشكل حتى تصل إلى نقطة النهاية للخط وتغلق المسار ثم كرّر العملية لباقي الخطوط. حدّد كل خط من هذه الخطوط مع الشكل الأساسي ثم اختر Divide من لوحة Pathfinder. انقر بالزر الأيمن واختر Ungroup، ثم احذف الخطوط الخارجية من الشكل الأساسي. لوّن هذا الجزء حتى تميّزه. كرّر العملية لجميع الأجزاء ولوّنها بألوان عشوائية. استخدم أداة التدرّج اللوني Gradient tool لتحويل هذه الألوان الجامدة إلى تدرّجات لونية. حدّد الألوان بشكل متتابع من لوحة الألوان حيث سنجعل التدرّج الأول من الأحمر إلى البرتقالي والثاني من الأصفر إلى الأخضر وهكذا. عدّل نمط اتجاه التدرّج إلى دائري Radial ثم اضبط اتجاه الألوان لتتدفق بسلاسة عبر التصميم. الشكل يبدو رائعًا ولكننا نستطيع أن نُحسّن ذلك عبر إضافة بعض الظلال بذكاء، ارسم دائرةً متقاطعةً مع الشكل الأول. حدّد هذه الدائرة مع الجزء الأول واختر Intersect من لوحة Pathfinder. كرّر العملية لباقي الأجزاء وامنح هذه الأشكال الجديدة تعبئةً سوداء مع تخفيف Opacity إلى 10% وتغيير خصائص المزج إلى Multiply. أنت تتذكر بأننا صنعنا سابقًا نسخةً عن الشكل الأساسي، الآن سنحتاجها لتتداخل مع الشعار. ضع هذا الشكل فوق الشعار الملوّن بدقّة متناهية. أعطِ هذا الشكل تعبئةً بيضاءَ مع خصائص مزج Multiply ثم اذهب إلى القائمة: Effect > Stylize > Inner Glow عدّل الإعدادات إلى Multiply واللون الأسود و20% opacity وأخيرًا 5mm للتمويه Blur. التدرّجات المتنوعة المُضافة إلى الشكل وعناصر الظلال بالإضافة إلى التوهّج الداخلي حَسّنت من جمالية الشكل ومنحته بُعدًا إضافيًّا ليبدو ثلاثي الأبعاد. ترجمة -وبتصرّف- للمقال: How To Create a Colorful Logo Style Icon in Illustrator لصاحبه: Chris Spooner.

هل تحتاج إلى بطاقة أعمال جديدة؟ اتبع الخطوات في هذا الدرس لتصميم بطاقة أعمال رائعة باستخدام برنامج أدوبي إليستريتور. سنبدأ بإنشاء تأثير النقوش المتنوعة، ثم سوف ننسق معلومات الاتصال وسنُجهّز ملف الطباعة لإرساله إلى مركز الطباعة. يتألف تصميم بطاقة الأعمال من شقّين الأول يتعلق بواجهة حيوية تُبرز معلومات الاتصال والجهة الخلفية مصممة بنمط حيوي مليء بالنقوش الملونة. البطاقة النهائية المطبوعة ستكون مقصوصة عند الزوايا لذلك سنُجهّز ملف الطباعة الجاهز ليتناسب مع الأبعاد الصحيحة والهوامش ومساحات قطع الطباعة. افتح برنامج الإليستريتور وأنشئ ملفًا جديدًا، ثم حدّد حجم بطاقة الأعمال التي ستُصمّمها، يجب أن تَحصُل على المقاسات المطلوبة من مركز الطباعة الذي ستتعامل معه وبما أنني أتعامل مع UPrinting فسوف أستخدم أبعادَهُم وهي 3.5" في 2" مع هوامش قطع 0.125" وهذا التصميم سيكون لكلا الجانبين لذلك أدخل الرقم 2 في خانة عدد ألواح الرسم Number of Artboards. ارسم مستطيلًا أبيض على كامل مساحة لوح الرسم الأول مُتضمّنًا خطوط هوامش القطع الحمراء. استخدم أداة الخط Line tool لرسم خطوط متقاطعة أفقيًّا وعموديًّا. أضف المزيد من الخطوط المتقاطعة ولكن هذه المرة بشكل قُطري باستخدام الضغط على مفتاح Shift. حدد كل الخطوط المتقاطعة وحوّلها إلى مسار مركّب Compound Path عبر اختيارها من القائمة أو بالضغط على CMD+8. أضف المستطيل الأبيض إلى التحديد ثم انقر على خيَار Divide من لوحة Pathfinder. انقر بالزر الأيمن واختر Ungroup ثم حدد كل الخطوط خارج مساحة العمل واحذفها. جهّز مخطط الألوان الخاص بتصميمك (أنا اخترت واحدًا من ColourLovers) ثم ابدأ بتعبئة الأشكال عشوائيًّا باللون الأول من المخطط. استمر باستخدام بقية الألوان وتعبئة باقي الأشكال عشوائيًّا. اصنع نسخة عن مخطط الألوان وحوّل النسخة من الألوان المسطّحة إلى التدرجات اللونية المقابلة لها بحيث يبدأ كل تدرج باللون ذاته وينتهي بلونٍ أكثر إشراقًا. استخدم أداة العصا السحرية Magic Wand tool وحدّد كل الأشكال ذات اللون الأول من اللوحة ثم استخدم أداة القطّارة Eyedropper tool لاستبدال اللون المسطح بالتدرج اللوني الجديد. بعد أن ننتهي من تطبيق التدرجات اللونية على جميع الأشكال، كبّر العرض Zoom in ثم استخدم أداة التدرجات Gradient Tool لتغيير اتجاه التدرجات لكل شكل بصورة عشوائية. التعبئة العشوائية مع الاتجاهات المختلفة للتدرجات اللونية تمنح الجانب الخلفي للبطاقة تأثير نقشٍ رائعٍ وجميل. فعّل الأدلّة الذكية Smart Guides ثم استخدم أداة القلم Pen tool لرسم شكل محدد وسط البطاقة يسمح بإضافة عنوان الموقع الإلكتروني. أدخل عنوان الموقع الإلكتروني بالخط المفضّل لديك ثم اضبط حجم الخط أصغر قليلًا للبادئة واللاحقة. لوّنهُ باللون الداكن في مخطط ألوان البطاقة. حدّد عنصر النص والشكل المحيط به ثم انقر نقرةً إضافيةً على الشكل المحيط لتجعله العنصر المفتاح. استخدم أدوات المحاذاة لجعل النص يقعُ في مركز الشكل المحيط. اختر أداة المستطيل مستدير الزوايا Rounded Rectangle tool وانقر على لوح الرسم لإدخال الأبعاد الخاصة. أدخل القيم 2.5" في 2" مع نصف قطر زوايا بقيمة 0.25" . انقر بالزر الأيمن على الشكل الجديد ثم اختر Make Guides من القائمة. هذا سيُنشئ خطوط أدلّة تعطينا رؤيةً عن كيفية قص البطاقة أثناء الطباعة. بعد أن أنهينا هذا الجانب من البطاقة سننتقل للعمل على الجانب الآخر. ارسم مستطيلًا على كامل مساحة لوح الرسم الثاني ولوّنه باستخدام مخطط الألوان الذي نعمل عليه. حدّد وانسخ سلسلة من الأشكال المختلفة من الجانب الآخر للبطاقة وضعها في هذا الجانب. ضعها بشكل متّصل ومائل في الركن الأسفل الأيسر من هذا الجانب. في المساحة المُتبقية استخدم أداة النّص وأدخل اسمك، عنوان العمل وتفاصيل الاتصال مستخدمًا خطًّا من اختيارك. امنح هذه العناصر النصية بروز بصري مميز عبر تعديل الحالة والأحجام. رَقَمِي الاتصال الهاتفي وُضِعا بجانب بعضهما البعض، لذا ارسم نقطةً صغيرةً باستخدام أداة الدائرة لفصلهما عن بعضهما البعض. قم بمحاذاة عناصر النص وضعها في الزاوية السفلية اليمنى. استمر بالضغط على مفتاح Shift وحرّك عناصر النص للخلف قليلًا داخل المساحة المُستخدمة في التصميم. تصميم البطاقة أصبح جاهزًا بالكامل لذلك سنقوم بتحضير الملف للطباعة. بدايةً حدّد الجميع وحوًل عناصر النص إلى عناصر خطوط خارجية لتجنب مواجهة أي مشاكل في الخطوط أثناء الطباعة. اذهب إلى القائمة File > Save As واختر خيَار PDF. في الإعدادات بدّل الإعداد المُسبق Preset إلى وضعية دقة الطباعة Press Quality والوضع القياسي Standard إلى الوضع الذي يفضّله مركز الطباعة. في هذه الحالة اخترت PDF/X-1a:2001. استخدم فقط إعدادات قَطع الطباعة للمستند وتأكّد من أنها مفعّلة. بطاقة الأعمال المُعدّة للطباعة أصبحت جاهزة لإرسالها إلى مركز الطباعة. سيقومون بطباعة البطاقة وقصّها بحسب الأبعاد التي قمت بتصميمها أصلًا في هذا الدرس. والآن حان دورك أنت. صمّم بطاقة مُماثلة تحمل اسمك وشارك معنا النّتيجة لنرى من سيُصمّم أجمل بطاقة. ترجمة -وبتصرّف- للمقال: How To Design a Print Ready Die-Cut Business Card لصاحبه Chris Spooner

لقد شاهدت مؤخرًا الشعار الجديد للفريق الأولمبي الكندي فجاءتني فكرة إنشاء تصميم وطني بذات تأثير الفسيفساء. اتبع الخطوات خطوة خطوة لتتعلم كيفية تصميم تأثير نص تجريدي ملوّن مصنوع من عناصر فسيفسائية. إن التصميم الأساسي الذي حفّز هذه الفكرة مبني على دولة كندا، أما تصميمي فسيكون عن عبارة "Great Britain". الخطوط الفاصلة عبر النص تتبع بشكل واضح تصميم العلم البريطاني مع ظلال مختلفة لكل لون لإضافة التنوع في الدرجات اللونية. افتح برنامج Adobe Illustrator وأدخل عبارة من اختيارك. لقد استخدمت هنا الخط الجميل المجاني Nevis font. اختر أداة الخط Line tool وابدأ برسم مجموعة من الخطوط المتقاطعة عبر النص. زوايا العلم البريطاني جميعها تتلاقى في الوسط، ولكن قد ترغب في استخدام الخطوط الأفقية أكثر من الخطوط العمودية من أجل النجوم والشرائط. بكل الأحوال صمم بأسلوبك. حدد عناصر النص وحولها إلى خطوط خارجية بالضغط على CMD+Shift+O. ثم أنشئ مسارًا مُركّبًا Compound Path مستخدمًا الاختصار CMD+8. حدّد التصميم بالكامل ثم استخدم Shift مع النقر على الكلمات لإزالتها من التحديد واصنع من جميع الخطوط مسارًا مركّبًا Compound Path. حدد الخطوط والنص ثم انقر على خَيَار Divide من لوحة Pathfinder. هذا سيسبب قطعًا عبر النص في كل موقع تمر الخطوط عبره. انقر بالزر الأيمن ثم اختر Ungroup واحذف جميع الأجزاء الفائضة حول النص. انتقل إلى نمط الخطوط Outline Mode بالضغط على CMD+Y لرؤية منظور آخر للخطوط غير المرئية التي ما تزال موجودة بين الحروف. قم بحذف جميع الخطوط بين الحروف. امنح كل الأشكال حدودًا بقيمة 0.25pt باللون الأبيض لجعل كل جزء من أجزاء الفسيفساء مرئية. إن كان هناك قطع بالغة في الصِغر قم بدمجها مع القطع المجاورة لإنشاء قطع أكبر. استخدم ماصة الألوان Eyedropper tool لالتقاط الدرجة اللونية الباهتة والداكنة من كل لون من ألوان العلم. هنا استخدمت صورة عن العلم البريطاني. حدد عشوائيًّا الأشكال عبر التصميم كله مع الاستمرار بالضغط على Shift حتى تحددهم مجتمعين ثم لوّنهم باللون الذي اخترته بأداة ماصة الألوان Eyedropper tool. تابع العملية لكل الألوان وقم بتحديد الأشكال عشوائيًّا حتى تصبح غالبيتها باللون الأحمر أو الأزرق أو الأبيض. الألوان في لوحة الألوان مسطحة لذلك سنقوم بمضاعفتها ثم سنقوم بتلوين النسخة الجديدة بتدرجات لونية انطلاقًا من اللون الأساسي إلى درجة أفتح قليلًا. حدد اللون المسطح الأول في لوحة الألوان ثم اذهب للقائمة: Select > Same > Fill Colour انقر بأداة ماصة الألوان على التدرج اللوني المقابل للون المسطح وبذلك سيتم استبدال اللون في التصميم بالتدرج اللوني المطلوب. كرر العملية لباقي الألوان حتى يصبح التصميم بالكامل بتدرجات لونية. التدرجات اللونية تمنح التصميم الحيوية والإحساس بالعمق أكثر من الألوان المسطحة. جميع التدرجات اللونية الحالية تتجه إلى الاتجاه نفسه لذلك استخدم أداة التدرج اللوني Gradient tool واضبط زاوية كل شكل لإضافة التنوع على التصميم. والآن سننتقل إلى برنامج فوتوشوب لإنهاء التصميم. لا يوجد أي شيء لا يمكننا القيام به في برنامج الإليستريتور ولكن فوتوشوب يميل للتعامل بشكل أفضل مع التأثيرات كالضوضاء والظلال. لوّن الخلفية بتدرج لوني أزرق متناسق مع لون التصميم. أضف لمسة من الضوضاء من القائمة: Filter > Noise > Add Noise قيمة 2% ستكون كافية لإضافة خامة ضوضاء خفيفة. ألصق تصميم النص من برنامج الإليستريتور وأعطه ظلالًا خفيفة مستخدمًا تأثيرات أنماط الطبقة. انقر على مُصَغّر النص في لوحة الطبقات مع الضغط على CMD لكي تحدد النص ثم لوّن التحديد باللون الأبيض على طبقة جديدة. طبّق فلتر Add a Noise على هذه الطبقة بمقدار 12%. غيّر خصائص المزج لهذه الطبقة إلى Multiply لجعل المناطق البيضاء شفّافة ثم خفّف Opacity حتى يظهر تأثير الضوضاء الخفيف على النص الأصلي. وبهذا ننتهي من هذا الدرس. إن الخطوط المتقاطعة تعطي مظهرًا رائعًا للتصميم في حين أن الألوان والتدرجات اللونية منحته الحيوية والحياة. ترجمة -وبتصرّف- للمقال: How To Create an Abstract Geometric Mosaic Text Effect لصاحبه Chris Spooner.

التصوير بالأبيض والأسود له متابعون وعشاق كثر حتى أن العديد من الناس اليوم يقومون بتحويل صورهم الملونة إلى أبيض وأسود وهو ما يضفي رونقًا خاصًا وجمالية مميزة للصورة، وعلى الرغم من توفّر الكاميرات الرقمية عالية التقنية اليوم تبقى صور الأبيض والأسود فريدة ولها تأثيرها المميز، ولكن بدلًا من البحث عن كاميرا تلتقط الصور بهذا الأسلوب وبطريقة مميزة أصبح هناك برمجيات عديدة تساعد على تحويل الصور إلى هذه النوعية من الصور. وهناك الكثير من الأدوات التي تقوم بالمهمة ولكن النتائج ستكون مختلفة من برنامج لآخر ومن أداة لأخرى ولذلك سنتعلم اليوم ما هي أفضل وأسوأ الطرق لتحويل الصور الملونة إلى أبيض وأسود. سنبدأ أوّلًا بأسوأ الطرق لتحويل الصور الملونة إلى الأبيض والأسود حيث أن هذه الأساليب تأتي بنتائج سيئة لن تريد استخدامها أو التطرّق إليها. DESATURATE التشبع هي ميزة موجودة في برنامج فوتوشوب في قائمة: Image > Adjustments > Desaturate أو في إحدى خيارات Hue/Saturation من ذات القائمة وهو أحد أول الأساليب التي يلجأ إليها الناس عادة لتحويل صورهم إلى الأبيض والأسود.. هذه التقنية تقوم بهذا العمل بالتأكيد ولكن الفرق هو أنها تزيل الألوان فقط بدون الأخذ بالاعتبار نقاوة التدرجات اللونية للصورة بحيث إذا ما نظرنا للقناة الزرقاء أو الحمراء ستبدو مطابقة تقريبًا للقناة الرمادية ضمن قنوات الألوان. GRAYSCALE الرمادي وهو خطأ شائع بين مستخدمي الفوتوشوب حيث يلجؤون على الفور إلى هذه التقنية لتحويل صورهم، وهذا ما يدمر كل التعديلات على الصورة وتلغي كل بيانات ألوان الصورة وتمنحها مظهرًا مملًا. حتى برنامج الفوتوشوب يعطيك تحذيرًا "هل أنت متأكد حقًّا من أنك تريد القيام بذلك؟". معظم الكاميرات تملك خيار التقاط صورة بالأسود والأبيض ولكن لا يوجد أي سبب يدفعك للقيام بهذا الأسلوب فهناك خيارات عديدة للتلاعب بالخيارات أثناء التحويل وذلك سيمنحك نتيجة أفضل من أي كاميرا تقوم بهذا العمل. وبعد رؤية ما هي الأساليب السيئة في التحويل إلى الأبيض والأسود سنقوم الآن بأخذ نظرة على أفضل الطرق للحصول على صور ذات تأثير داكن وذات تأثير أسود وأبيض حيوي. CHANNEL MIXER مازج القنوات مازج القنوات هو أداة التحويل الكلاسيكية للأبيض والأسود. فهو يسمح لك باستهداف كل ألوان الطيف بشكل فردي لتضبط بدقة وتوازن النطاق اللوني حتى تتمكن من العثور على التباين الأفضل للصورة. طبّق مازج القنوات كطبقة تعديلات لتتجنب تمامًا التعديل على الصورة، ثم تحقق من تفعيل خَيَار Monochrome. يمكنك بعدها تحريك مزلاج الأحمر، الأزرق والأخضر لكل قناة لتعزيز التباين بالطريقة التي تريدها عبر تغميق أو تفتيح المناطق المحددة كالسماء مثلًا. أبقِ عينيك على المستويات الكلية فإذا تجاوزت 100% فهذا يعني أنك أطفأت بعض الألوان البيضاء. Black and White الأسود والأبيض إن طبقة تعديلات الأسود والأبيض وُجدت منذ إصدار الفوتوشوب CS3 التي حلّت بشكل كبير محل مازج القنوات. حيث أن لها أدوات تحكم مشابهة لمازج القنوات ولكن مع إضافة المزيد من زلاجات الألوان وخيارات إضافية مثل القدرة على إضافة صبغة تأثير اللون البني الداكن الكلاسيكية أو إحساس فيلم الرعب البارد. هناك مجموعة من الإعدادات المسبقة للاختيار من بينها فلاتر محاكيه لعدسات المدرسة القديمة أو بإمكانك ضبط درجات اللون للصورة مباشرة عبر خَيَار التحقق والنقر والسحب. B&W Mix حتى الآن لم نتحدث سوى عن أدوات الفوتوشوب ولكن يوجد ما يعادل أداة الأسود والأبيض في الفوتوشوب موجودة في خيارات B&W Mix في برنامج Lightroom. وتضم هذه الميزة المزيد من زلاجات الألوان لتسمح لك باستهداف المزيد من الدرجات اللونية للوصول إلى أدق نتيجة. Gradient Map خريطة التدرجات التقنية الأخيرة لتحويل الصور إلى الأبيض والأسود هي استخدام خريطة التدرجات. هذه التقنية لا تمنحك التحكم الاحترافي بالقنوات كباقي الأدوات ولكن نتائجها ذات تأثيرات فريدة من نوعها. بعد إضافة طبقة تعديلات خريطة التدرجات عدّل الألوان المحددة في شريط التدرجات. بإمكانك اختيار لونين ببساطة كالأسود والأبيض أو على غير العادة يمكن اختيار الأزرق الداكن والأصفر الكريمي للحصول على مظهر مختلف من حيث الدرجات اللونية. إن خريطة التدرجات تقوم على استبدال الألوان في الصورة بما يعادلها في شريط التدرجات اللونية المحدد مسبقًا. أضف المزيد من الخطوات في شريط التدرجات لإضفاء تأثيرات حقيقية رائعة والتي تضيف المزيد من الدرجات اللونية على أجزاء معينة من الصورة ما يجعل هذه الصورة أكثر روعة وجذبًا للاهتمام على الانستجرام. أرجوا أن تكون هذه النصائح حول تحويل الصور إلى الأبيض والأسود مفيدة. ترجمة -وبتصرّف- للمقال: The Best and Worst Ways to Make Your Photos Black & White لصاحبه Chris Spooner.

إن رسم صاروخ ليس صعبا كعلم الصواريخ. سنقوم في هذا الدرس برسم صاروخ بسيط باستخدام برنامج Inkscape. افتح إنكسكيب وارسم مستطيلا بحيث يكون طوله أكبر من عرضه ويجب ألا تكون الزوايا مستديرة بل مستقيمة. حدد المستطيل ثم اذهب للقائمة: Path > convert to path سنقوم بتعديل النقاط في الشكل. انقر على أداة node editor وحدد النقطتين في أعلى المستطيل وقم بالمباعدة بينهما بالضغط على <+Ctrl+Alt، النتيجة يجب أن تكون شبه منحرف بضلع علوي كبير. مع إبقاء ذات النقطتين محددتين انقر على أداة add a new node لإضافة نقطة جديدة في وسط الضلع الواصل بينهما. حدد النقطة الجديدة وحركها للأعلى (استمر بالضغط على Ctrl أثناء السحب للمحافظة على ثبات الحركة عموديًّا بدون انحراف). حدد النقطتين العلويتين التي عملنا عليهما سابقًا ثم انقر على أداة symmetric وسيصبح الشكل بعدها يشبه الرصاصة/الصاروخ. للانتهاء من رسم جسم الصاروخ الرئيسي علينا أن نجعل قاعدة الصاروخ منحنية للأعلى. حدد النقطتين أسفل الصاروخ ثم أضف نقطة متوسطة جديدة بنفس الطريقة التي فعلناها مع أعلى الصاروخ ثم حدد النقطة الجديدة وحركها للأعلى قليلًا ثم طبّق عليها symmetric أيضًا وبذلك يصبح شكل جسم الصاروخ جاهزًا. يحتاج الصاروخ إلى أجنحة ولذلك سنرسم مستطيل صغير هذه المرة على جانب أسفل الصاروخ. حدد المستطيل الصغير وانقر عليه مرة أخرى لتتحول أدوات التحكم المحيطة به إلى أدوات الدوران والانحراف حيث سنقوم بحرف المستطيل عموديًّا عبر تحريك السهم على أحد جوانبه كما في الصورة. حرّكه ليصبح ملاصق لجسم الصاروخ. فعّل مجددًا أدوات الدوران/الانحراف وقم بتدوير المستطيل الصغير عبر النقر والتحريك لأحد الأسهم في أحد أركان المستطيل حتى يصبح محاذيًا لجسم الصاروخ. ملاحظة: لا تقلق إن لم تكن المحاذاة مثالية، أرسل المستطيل الصغير أسفل جسم الصاروخ وستتكفل ألوان التعبئة فيما بعد بإخفاء العيوب. حدد الجناح ثم ضاعفه duplicate من قائمة Edit. أعكس الجناح الجديد أفقيًّا ثم حرّكه للجهة المقابلة من الصاروخ (استمر بالضغط على Ctrl لتحافظ على الثبات الأفقي أثناء التحريك). الجناح المقابل لنا سيكون عبارة عن مستطيل رفيع جدًّا مع المحافظة على ذات الارتفاع بالمقارنة مع الأجنحة الأخرى. (تقنيًّا يجب أن يكون هناك جناح رابع خلف الصاروخ لكننا لن نقوم برسمه بالطبع). لمحاذاة الجناح الجديد وسط الصاروخ حدد الجناح وجسم الصاروخ ثم أظهر لوحة المحاذاة والتوزيع عبر الضغط على أيقونتها في شريط الأدوات العلوي ثم غيّر خيَار (بالنسبة إلى) Relative to على (العنصر الأكبر) Biggest object والذي هو جسم الصاروخ. سنقوم برسم نافذة لهذا الصاروخ المضحك حتى يتمكن روّاد الفضاء من النظر للفضاء عبرها. ارسم دائرة وستكون هذه الدائرة إطار النافذة (لرسم دائرة صحيحة وليس شكل بيضوي استمر بالضغط على Ctrl أثناء رسم الدائرة). حدد الدائرة وجسم الصاروخ وحاذِ الدائرة عموديًّا مع وسط الجسم. ارسم دائرة أخرى أصغر وستكون النافذة. حدد الدائرتين وقم بمحاذاتهما عموديًّا وأفقيًّا مع بعضهما. الآن لوّن العناصر باستخدام لوحة الألوان في أسفل البرنامج، وتستطيع الحصول على المزيد من الخيارات في حال نقرت على زر التعبئة والحدود Fill and Stroke في شريط الأدوات العلوي لتظهر لك لوحة التعبئة والحدود. الصاروخ عادةً فضّي اللون لذلك استخدم تدرجات الرمادي لتلوينه. فلنجعل صاروخنا يطير برسم النيران الصادرة من قاعدته لذلك استخدم أداة قلم البيزير Bezier لرسم بعض الخطوط المتكسرة لتُشكّل اللهب. لوّن اللهب باللون الأحمر أو البرتقالي المحمر وأرسله أسفل جسم الصاروخ. سنرسم الآن نواة اللهب عبر نفس الأداة Bezier بشكل أصغر من اللهب الأول ولوّنه بالأصفر. بإمكانك إن أردت أن تجعل الصاروخ يطفو في الجو بدل أن ينطلق شاقوليًّا فقط وذلك بتحديد كل المشروع وتدويره. يمكننا أن نُحَسّنَ من مظهر الصاروخ وإعطائه مظهرًا أكثر واقعية من الشكل الحالي الذي يبدو فيه كرسم كرتوني. أزِل كل الحدود (يمكنك القيام بذلك من لوحة التعبئة والحدود مثلًا) استخدم التدرجات الرمادية لكل العناصر المعدنية في الصاروخ، قم بذلك من خلال أداة التدرّج Gradient والسحب وتعديل الألوان. استخدم التدرّجات اللونية على كل العناصر بما في ذلك النافذة واللهب. حدد اللهب الصغير الأصفر ثم عدّل بقيمة التمويه Blur من لوحة التعبئة والحدود Fill and Stroke لمنحه المزيد من الواقعية. نفّذ تأثير التمويه Blur أيضًا على اللهب الكبير. وبذلك ننتهي من تصميم الصاروخ وأصبح جاهزًا للإقلاع والطيران نحو النجوم. ترجمة -وبتصرّف- للمقال: Drawing a rocket with Inkscape is not rocket science لصاحبه Nicu Bucelei.

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

اتبع هذا الدرس خطوة بخطوة لتتعلم كيفية إنشاء شعار من الشرائط المرسومة ببرنامج الإليستريتور مع التدرجات اللونية والتأثيرات. سوف نرسم الشكل كتصميم فكتور لنسمح بتغيير حجمه بسهولة وسنصمم مقاطع مسطحة وأحادية للحفاظ على تنوع الشعار. عادة ما يتضمن مشروع تصميم الشعار الكثير من البحوث من أجل تطوير العلامة التجارية التي تعكس الشركة، ولكن في هذا الدرس سوف نركّز فقط على المهمة العملية لرسم شعار رائع المنظر في الإليستريتور. سيكون التصميم عبارة عن شريط مستمر غير متقطّع ملتف باستمرار بشكل لولبي. افتح برنامج Adobe Illustrator وارسم مستطيل رفيع طويل على لوح الرسم. تذكّر أن الأبعاد الأوليّة لتصميم الشعار غير مهمة لأننا نعمل على الفكتور ما يسمح لنا بتغيير الحجم بكل حرّية فيما بعد وذلك على عكس الفوتوشوب الذي لا نستطيع معه أن نعدّل حجم الشعار بعد تصميمه بدون فقدان الدقة والجودة والوضوح. انسخ CMD+C وألصق في المقدمة CMD+F نسخة عن المستطيل ثم حدد النقطتين في أعلى المستطيل الجديد بأداة التحديد المباشر Direct Selection. استمر بالضغط على Shift وحرّك هاتين النقطتين إلى اليمين لنُشَكّل انحرافًا في الشكل. حدد كلا الشكلين وانسخ ثم ألصق النسخ الجديدة في المقدمة. حرّكها أفقيًّا نحو اليمين لتُشَكّل تتمةً للشريط ثم انقر بالزر الأيمن واختر من القائمة: Arrange > Send to Back حتى يصبح الرسم متتابعًا. كبّر منظور العمل ثم اضغط CMD+Y لتفعيل الخطوط الخارجية. حدد المستطيلين الجديدين وارصفهما بعناية ليتطابقا مع النسخ الأصلية. كرر العملية لتمديد الشريط ثم أضف مستطيل مائل واحد على الحافة اليسارية للانتهاء من الشريط. انسخ أحد المستطيلات المائلة ثم اذهب للقائمة: Object > Transform > Reflect وحدد الخَيَار Vertical لعكس الشكل إلى الجهة المعاكسة. ضع الشكل المعكوس على الحافة اليمنى للشريط وبذلك ننتهي من رسم التصميم العام للشعار. جهّز مخطط ألوان الشعار بنفسك أو حمّل أحد المخططات الجاهزة الرائعة من الإنترنت مثل موقع ColourLovers.com وابدأ باستبدال ألوان التعبئة والحدود بالألوان الجديدة النابضة بالحياة. سنصمم إصدار خاص بالألوان المسطحة للشعار لاحقّا أما الآن فسنلوّن الشعار بتدرجات لونية رائعة تجعل الشعار حيويًّا. اصنع نسخة من الشعار ثم لوّن كل جزء بتدرج لوني خاص. سنختار اللون القاتم الأصلي في بداية كل تدرج لوني ونجعل نهاية التدرج هو اللون التالي في ترتيب الألوان. إن القيام بمزج الألوان في كل تدرج لوني بشكل متتالي بحسب ترتيب الألوان يعطي انطباعًا عن الاستمرارية في الشريط بينما الألوان القاتمة للمستطيلات الخلفية تعطي مظهرًا ثلاثي الأبعاد للشعار. في آخر جزء اختر اللون الأفتح من مخطط الألوان ولكن أضف مظهر الظلال عليه بجعل بداية التدرج اللوني يبدأ بلون أكثر قتامةً بقليل من اللون الأصلي. انقر واسحب أداة التدرج اللوني Gradient لتضبط زاوية تدفق الألوان في التدرجات اللونية لكل مستطيل على حدة لتحقيق أفضل مزج ممكن للألوان. حدد كلًّا من المستطيلات العمودية الخلفية وأعطها التدرج اللوني الأقرب لأقرب مستطيل منها بنفس الطريقة واختر الألوان بأداة القطّارة eyedropper. لتحافظ على تقنية الخداع البصري والإيهام بالشعور ثلاثي الأبعاد يجب أن تجعل تدرجات ألوان هذه المستطيلات أكثر قتامة من مثيلاتها الظاهرة في المقدمة وذلك لتمثيل الضوء والظل. انتهينا من تصميم الشعار ويبدو رائعًا بألوانه الحيوية فالتدرجات اللونية وتأثيرات الإضاءة والظلال تجعل هذا الشعار غاية في الحيوية. ارسم دائرة في مكان ما على لوح الرسم واجعلها بتدرج لوني من الأسود إلى الشفافية. اضغط الشكل عبر سحب المقبض السفلي للأعلى حيث سيكون هذا الشكل ظلالًا لبقية الأشكال. خفف مستوى الظهور opacity إلى 15% ثم ضعه تحت أسفل حافة أحد المستطيلات. استمر بالضغط على ALT و Shift أثناء سحب الشكل لصنع نسخ ووضعها أسفل جميع المستطيلات. تأثير الظلال الذي رسمناه للتو يمنح الشعار مظهرًا ثابتًا وراسخًا على الأرض. هذا هو الإصدار الأول الكامل من الشعار ولكننا سنصمم بسرعة الإصدار المسطح والأحادي للحفاظ على التنوع في الشعار. إن الشعار المسطح مفيد عند استخدام الأحجام الصغيرة من الشعار حيث لن تظهر التدرجات اللونية بشكل واضح ولن يشكل وجودها أي تأثير أو فرق. اصنع نسخة عن الشعار وأزِل كل التدرجات اللونية والظلال تاركًا الألوان الجامدة فقط بدون أي تأثيرات. الشعار الأحادي اللون مفيد عند وضع الشعار في الخلفيات غير العادية حيث سيضيع الشعار الأساسي. استبدل كل الألوان باللون الرمادي مؤقتًّا. الشعار سيفقد كل وضوح له بدون القيام ببعض التعديلات. حدد الأشكال المائلة ثم اذهب للقائمة: Object > Path > Offset Path أضف قيمة صغيرة offset بمقدار 0.3mm. حدد كافة الأشكال الإضافية الجديدة واصنع مسارًا مركّبًا Compound Path. والآن قم بتحديد المستطيلات العمودية في المقدمة مع المستطيل الأخير المائل في المقدمة أيضًا واصنع مسار مركب جديد Compound Path. حدد مع الضغط على Shift كلا المسارين المركبين واختر Subtract من لوحة Pathfinder لنَقُصّ الأشكال الإضافية offset من المستطيلات الأصلية ولترك تأثير حدود فارغة. أصبح الشعار أحادي اللون جاهزًا وبالإمكان تمييزه وباستطاعتنا استخدام أي لون نريده الآن. وبهذا نكون قد انتهينا من تصميم الشعار وأصبحنا جاهزين لتسليمه للعميل. الصيغة الأولية تبدو عظيمة مع كل هذه التدرجات اللونية والتأثيرات وستحتفظ بجودتها عند تعديل حجمها. أما الصيغتين المسطحة وأحادية اللون فهي تحافظ على تعددية استخدامات الشعار ونسخه في أي مكان. ترجمة -وبتصرّف- للمقال: Create a Cool Ribbon Style Logo Graphic in Illustrator لصاحبه Chris Spooner.