ولاء شبلاق

ستتعلم في هذا الشرح التوضيحي طريقة رسم حوض أسماك، في حالك كونك مبتدئًا ستتعلم كيف تصمم الأشكال الرئيسية باستخدام الأدوات الأساسية في البرنامج وستتعلم أيضًا بعض التقنيات لبناء الأشكال المتجهة. بعدها ستتعلم كيف تصمم زينة حوض الأسماك مثل الرمل والصخور والنباتات المائية. ومع تتابع خطوات العمل ستتعلم كيف ترسم الأسماك باستخدام الأشكال البسيطة والتأثيرات الأساسية وأخيرًا تصميم خلفية جميلة للعمل. إنشاء مستند عمل جديد بعد تشغيل البرنامج اضغط على Ctrl+N لفتح مستند عمل جديد، من القائمة المنسدلة Units اختر Pixels ثم أدخل قيمة العرض 615 والارتفاع 610، بعدها انتقل إلى الخيارات المتقدمة Advanced واختر نظام الألوان RGB، ثم (Screen (72ppi، وتحقّق من عدم تفعيل مربع Align New Objects to Pixel Grid قبل الضغط على OK. رسم حوض الأسماك باستخدام أداة (Ellipse Tool (L ارسم شكلًا بيضاويًا أسود اللون بأبعاد px350*80، حدد الشكل واذهب إلى Scale < Transform < Object. في مربع الحوار Scale اختر Non-Uniform، ثم أدخل قيمة 75 في مربع Horizontal و67 في مربع Vertical بعدها اضغط Copy. استبدل لون حدود الشكل الجديد باللون الأزرق وحرّكه 308px لأعلى. باستخدام الأداة (Rectangle Tool (M ارسم شكلًا مستطيلًا أصفر اللون بأبعاد 263*312px واضبط موضعه كما هو موضح في الصورة أدناه. باستخدام أداة (Direct Selection Tool (A حدد نقطة التحكم السفلية اليسرى للشكل وحركها لليسار بمقدار 41px. انتقل بعدها لتحديد نقطة التحكم السفلية اليمنى وحركها 41px لليمين. أعد تحديد الشكل الأصفر وانسخه بالضغط على Ctrl+F ،Ctrl+C ثم استبدل لون حدود الشكل إلى اللون الأحمر. الآن التقط أداة (Anchor Point Tool (Shift+C واضغط على نقطة التحكم العلوية اليسرى للشكل الأحمر واسحبها لليسار مع الضغط على مفتاح Shift. حدد ذراع التحكم اليسرى للنقطة العلوية اليسرى واسحبها للأسفل. استكمالًا بأداة Convert Anchor Point Tool اضغط على نقطة التحكم السفلية اليسرى للشكل الأحمر وبالضغط على مفتاح Shift اسحب النقطة إلى اليمين. بعدها حدد ذراع التحكم اليسرى للنقطة السفلية اليسرى واسحبها لأعلى. وصولًا إلى هذه المرحلة سيظهر الشكل الأحمر كما توضحه الصورة الأخيرة المرفقة. بعد انتهائك من ضبط الشكل الأحمر، أعد تحديده واختر أداة Reflect Tool من شريط الأدوات. في مربع الحوار Reflect اختر Vertical ثم Copy. تأكد من أن الشكل المنسوخ لا زال محددًا وبالضغط على مفتاح Shift انقر على الشكل الأصفر الناتج من خطوة 3، بعدها حرر مفتاح Shift واضغط على الشكل الأصفر مجددًا لتعديل موضعه. افتح نافذة Align بالذهاب إلى Align < Window ثم اضغط على أيقونة Horizontal Align Left. أعد تحديد الشكلين باللون الأحمر وافتح نافذة Pathfinder بالذهاب إلى Pathfinder < Window واضغط على أيقونة Unite. أخيرًا حدد الشكل الأصفر واحذفه. حدد الشكل البيضاوي ذو اللون الأزرق الناتج من خطوة 2 واذهب إلى Offset Path < Path < Object. أدخل قيمة Offset 1px ثم OK، بعدها استبدل لون الحدود للشكل الجديد باللون التركوازي وحرك الشكل 7px لأسفل. حدد الشكلين التركوازيّ والأسود واصنع نسختين منهما بالضغط على Ctrl+F ،Ctrl+F ،Ctrl+C. الآن حدد الشكل الأحمر الناتج من خطوة 4 وانسخه. أبق على تحديد الشكل المنسوخ وبالضغط على مفتاح Shift انقر على الشكل البيضاوي ذو اللون التركوازي. افتح نافذة Pathfinder بالذهاب إلى Pathfinder < Window واضغط على أيقونة Unite. ومع إبقائك على تحديد الأشكال الناتجة وبالضغط على مفتاح Shift انقر على الشكل المنسوخ ذو اللون الأسود. بعدها اضغط على Minus Back من نافذة Pathfinder وضع الشكل الناتج في خلفية سطح العمل بالضغط على Ctrl +Shift +Left Square Bracket. حدد الشكل الأحمر الأصلي وباقي نسخ الشكل البيضاوي ذو اللون التركوازي، ثم اضغط على Minus Back من نافذة Pathfinder. أبق على تحديد الأشكال الناتجة وبالضغط على مفتاح Shift انقر على باقي نسخ الشكل البيضاوي الأسود، بعدها اضغط على Unite. ثم ضع الأشكال المحددة في مقدمة العمل بالضغط على Ctrl +Shift +Right Square Bracket. حدد الشكل الأحمر الناتج من خطوة 5، وأزل لون حدوده ثم املأه باللون الأبيض ffffff#، وقلل شفافية الشكل الناتج حتى 20%. بعدها حدد الشكل الأحمر الناتج من خطوة 6 وأزل لون حدوده ثم املأه بتدرج إشعاعي كما هو موضح في الصورة الثانية المرفقة. أبقٍ على تحديد الشكل الناتج وغير نظام الدمج إلى Hard Light. الآن حدد الشكل البيضاوي الأسود وأزل لون حدوده ثم املأه بتدرج إشعاعي كما يظهر في الصورة الأخيرة. أخيرًأ ضع الشكل الناتج في خلفية سطح العمل بالضغط على Ctrl +Shift +Left Square Bracket. حدد الشكل ذو اللون التركوازي واذهب إلى Scale < Transform < Object، اختر Non-Uniform ثم أدخل قيمة 117 في مربع Horizontal و103 في مربع Vertical بعدها اضغط Copy. استبدل لون حدود الشكل الناتج باللون الأحمر وحرّكه لأسفل 21px. الآن حدد الشكل في مقدمة سطح العمل الناتج من خطوة 7 ثم اذهب إلى Offset Path < Path < Object، وأدخل قيمة 4px Offset- ثم OK. ركز على الصورة الرابعة، اختر أداة Add Anchor Point Tool (+) واضغط على النقطتين المشار إليهما لإضافة نقطتي تحكم جديدتين. بالاعتماد على أداة (Direct Selection Tool (A وبالضغط على مفتاح Shift حدد نقطتي التحكم المشار إليهما باللون الأحمر واحذفهما. من المفترض أن يظهر الشكل الناتج كما هو موضح في الصورة الأخيرة أدناه. حدد الشكل البيضاوي ذو اللون الأحمر وانسخه بالضغط على Ctrl+F، Ctrl+C. أبقِ على تحديد النسخة ومع الضغط على مفتاح Shift انقر على الشكل الناتج من خطوة 8. افتح نافذة Pathfinder بالذهاب إلى Pathfinder < Window واضغط على Unite. استبدل لون الشكل بتدرج إشعاعي كما توضحه الصورة الثانية. ومع إبقائك على تحديد الشكل الناتج غيّر نظام الدمج إلى Normal. أخيرًا ضع الشكل الناتج خلف الشكل المتكون من خطوة 7. حدد الشكل البيضاوي الأحمر المتبقي وأزل لون حدوده ثم املأه بتدرج إشعاعي كما هو موضح أدناه. تأكد من أن الشكل الناتج لايزال محددًا وغيّر نظام الدمج إلى Hard Light وقلل الشفافية حتى 20%. انسخ الشكل بالضغط على Ctrl+F ،Ctrl+C وأزل لون التعبئة للشكل المنسوخ وأضف حدود بالون أزرق cfe8ff# وبسماكة 4px. أبق على تحديد الشكل الناتج وأضف تأثيرات Width Profile2 و** 2px Gaussian Blur**. أبق على تحديد الشكل الناتج وغيّر نظام الدمج إلى *Lighten* وقلل الشفافية حتى 40%. ارسم مسارًا منحنيًا باستخدام أداة (Pen Tool (P وأعطه سماكة بمقدار 11px لهذه المرحلة. بعدها أضف تأثير Width Profile 1 واملأ المسار الجديد بتدرج إشعاعي. أبقِ على تحديد المسار وأضف تأثير 8px Gaussian Blur وغير نظام الدمج إلى Hard Light ثم قلل الشفافية حتى 50%. حدد الشكلين الأزرق والتركوازي وضعهم في مقدمة العمل بالضغط على Ctrl +Shift +Right Square Bracket. حدد الشكل البيضاوي ذو اللون الأزرق وانسخه بالضغط على Ctrl+F،Ctrl+C، بعدها اضغط على Ctrl+3 لإخفاء النسخة. بالاعتماد على أداة (Direct Selection Tool (A وبالضغط على مفتاح Shift حدد نقاط التحكم الأربعة المشار إليها باللون الأحمر ثم انقر على أيقونة Cut path at selected anchor points من شريط Properties. هذا سيحول الشكلين البيضاويين إلى أربعة مسارات منحنية. الآن حدد المسارين العلويين وبالضغط على زر الفأرة الأيمن اختر Join من القائمة المنسدلة. اضغط مجددًا على زر الفأرة الأيمن في أي مكان على مسطح العمل، واختر Join. كرر نفس الخطوات السابقة للمسارين المنحنيين المتبقيين. أعد تحديد الشكلين الناتجين في هذه الخطوة وأزل لون الحدود ثم املأهما باللون الأبيض ffffff#، وقلل الشفافية حتى 30%. الآن اضغط على Ctrl+Alt+3 لإظهار الشكل البيضاوي الأزرق المخفي، ثم ضعه في مقدمة سطح العمل بالضغط على Ctrl +Shift +Right Square Bracket. استبدل لون الحدود للشكل البيضاوي باللون الرمادي الفاتح e6e7e8‏# وغيّر سماكة الحدود إلى 3px. أخيرًا قلّل شفافية الشكل الناتج حتى 70%. وصولًا إلى هذه الخطوة سيظهر شكل حوض الأسماك كما يلي: إضافة الرمل إلى حوض الأسماك حدد الشكل الناتج من خطوة 9 وانسخه بالضغط على Ctrl+F،Ctrl+C، ثم ضعه في مقدمة سطح العمل بالضغط على Ctrl +Shift +Right Square Bracket. أزل لون التعبئة للشكل الناتج ولون حدوده باللون الأزرق. باستخدام أداة (Pen Tool (P ارسم الشكل الموضح في الصورة الثانية باللون الأحمر. الآن ركز على الصورة الثالثة، اختر أداة Add Anchor Points Tool (+) وانقر على النقطتين المشار إليهما باللون الأصفر. بعدها حدّد جميع نقاط التحكم أعلى النقطتين المُدرجتين واحذفهم. حتى هذه المرحلة من المفترض أن يظهر الشكل الأزرق كما توضحه الصورة الأخيرة أدناه. حدد الشكل الناتج من خطوة 14 وأزل لون حدوده ثم املأه بلون بني فاتح d1a66e#. انسخ الشكل وحافظ على تحديده، ثم استبدل لون التعبئة باللون البني الداكن 967b54‏#. مع إبقائك على تحديد الشكل إذهب إلى Grain < Texture < Effect واتبع التعليمات الموضحة في الصورة الثانية أدناه ثم اضغط OK. بعدها أضف تأثير Featherpx 5 على الشكل الناتج. حدد الشكل الأحمر وأزل لون حدوده ثم املأه باللون البرتقالي e3c07b#. أبقِ على تحديد الشكل ثم انسخه بالضغط على Ctrl+F، Ctrl+C ثم اذهب إلى Grain < Texture < Effect واتبع التعليمات الموضحة في الصورة الثانية ثم OK. حدد الشكل الأخير الناتج وأضف تأثير Feather 5px وغير نظام الدمج إلى Multiply ثم قلل الشفافية حتى 60%. التقط أداة (Pen Tool (P وارسم الأشكال الخمسة الموضحة في الصورة أدناه. بعدها أزل لون الحدود واملأ الأشكال بتدرج إشعاعي. حدد الأشكال المرسومة في الخطوة السابقة وانسخها ثم استبدل لون التعبئة باللون البرتقالي الهادئ e3c07b#. استمر في تحديد الشكل الناتج واذهب إلى Grain < Texture < Effect واتبع التعليمات الموضحة في الصورة الأولى ثم اضغط OK. أبق على تحديد الشكل الناتج وأضف تأثير Feather 2px وغير نظام الدمج إلى Multiply ثم قلل الشفافية حتى 60%. الآن حدّد جميع الأشكال الناتجة من خطوة 14 حتى الآن وخبئها خلف الأشكال الناتجة من خطوة 7. تصميم بعض النباتات المائية حان وقت إضافة بعض النباتات المائية. بالاعتماد على أداتي (Pen Tool (P و(Gradient Tool (G ارسم الشكلين الموضحين في الصورة أدناه. استمر بالعمل مع أداة (Pen Tool (P وارسم مسارين منحنيين باللون البرتقالي ffb700‏# كما يظهر في الصورة الثالثة. فور انتهائك من رسم المسارات حددهم وغير سماكة الحدود إلى 8px وأضِف تأثير Width Profile 5 إلى المسارات الناتجة. أبق على تحديد المسارين وافتح نافذة Stroke بالذهاب إلى Stroke < Window وفعّل مربع DAsh Line. أدخل قيمة 4px في مربع Dash و2px في مربع Gap. اتبع تسلسل الصور المرفقة وكرر الخطوات السابقة لرسم المزيد من النباتات الخضراء. بالاعتماد على أداتي (Pen Tool (P و(Gradient Tool (G ارسم الشكل الموضح في الصور أدناه. حدد الشكل الناتج وانسخه. ثم أزل لون التعبئة للنسخة وأضف حدود للشكل بسماكة 5px وبلون برتقالي هادئ ffb700‏#، ثم أضف تأثير Width Profile 2 على الشكل الناتج. حدد الشكل المتكون وافتح نافذة Stroke بالذهاب إلى Stroke < Window وفعّل مربع Dash Line. أدخل قيمة 4px في مربع Dash و قيمة 6px في مربع Gap. غيّر نظام الدمج إلى Overlay ثم حدد الشكل الأول المرسوم في هذه الخطوة وانسخه بالضغط على Ctrl+F، Ctrl+C وضع الشكل المنسوخ في مقدمة سطح العمل بالضغط على Ctrl +Shift +Right Square Bracket. أبق على تحديد الشكل الناتج وبالضغط على مفتاح Shift انقر على الشكل ذو اللون البرتقالي الناتج عن هذه الخطوة. انقر بزر الفأرة الأيمن على مسطح العمل ومن القائمة المنسدلة اختر Make Clipping Mask. كرر الخطوات السابقة لرسم المزيد من النباتات الخضراء الموضحة في الصور أدناه. وصولُا إلى هذه المرحلة من المفترض أن تظهر النباتات الخضراء كما هو موضح في الصورة أدناه. حدد النباتات الخضراء المرسومة واضبط موضعها كما هو موضح في الصورة، ثم ضعها خلف الشكل الأيسر الناتج من خطوة 17. بالنسبة للنباتات الخضراء المتبقية اضبط موضعها داخل الحوض كما ترى في الصورة. سننتقل الآن لرسم بعض الحشائش المتسلقة. التقط أداة (Pen Tool (P وارسم بعض المسارات المنحنية كما هو موضح في الأسفل. فور انتهائك من رسم المسارات حددهم واستبدل لون الحدود باللون الأخضر الغامق 276201# وغيّر سماكة الحدود إلى 3px. أضف تأثير Width Profile 4 للمسارات الناتجة. أبق على تحديد المسارات الناتجة واضغط على Ctrl+G لوضعهم في مجموعة واحدة. بالاعتماد على أداة (Pen Tool (P ارسم أربعة مسارات باللون الأحمر الداكن 540d01‏# كما ترى في الصور المرفقة. أعد تحديد المسارات الجديدة وغيّر سماكة الحدود إلى 3px ثم أضف تأثير Width Profile 4 على المسارات الناتجة ثم حددها وضعها في مجموعة واحدة بالضغط على Ctrl+G. كرر الخطوات السابقة لرسم المزيد من الأشكال. حدد الأعشاب الكبيرة واضبط موضعها كما هو موضح في الصورة الأولى. بعدها ضعهم خلف النباتات القصيرة، وأكمل في ترتيب باقي الحشائش كما هو موضح في الصورة الأخيرة. باستخدام أداة (Pen Tool (P ارسم مسارًا منحنيا باللون الأبيض كما هو موضح أدناه، وغيّر سماكة الخطوط إلى 8px ثم أضف تأثير Width Profile 4 على المسار الناتج. أبق على تحديد المسار ثم افتح نافذة Stroke بالذهاب إلى Stroke < Window وفعّل مربع Dashed Line. أدخل قيمة **2px ** في مربع dash و8px في مربع gap. أبقِ على تحديد الشكل الناتج واذهب إلى Roughen < Stylize < Effect. اتبع التعليمات الموضحة في الصورة الثالثة ثم اضغط OK. تأكد من تحديد المسار الناتج وغيّر نظام الدمج إلى Overlay وقلل الشفافية حتى 60%. كرر نفس الخطوات لرسم شكلين إضافيين من تلك الفقاعات البيضاء واضبط موضع الأشكال كما هو موضح في الصور المرفقة، ثم ضعهم خلف الكتلة الزجاجية اليسرى. أخيرًا اضبط موضع باقي الأشكال داخل حوض الأسماك كما هو موضح في الصورة. تصميم بعض الصخور المائية الصغيرة انتقالًا إلى رسم الصخور أكمل بالاعتماد على أداتي (Pen Tool (P و(Gradient Tool (G، ارسم شكلًا مشابهًا للشكل الموضح في الصورة الثانية. حدد الشكل المرسوم واذهب إلى Drop Shadow < Stylize < Effect واتبع التعليمات الموضحة في الصورة الثالثة ثم اضغط OK، اتبع تسلسل الصور التالية وكرر الخطوات السابقة لرسم المزيد من الصخور. في هذه المرحلة من المفترض أن تظهر الصخور كما هو موضح في الصورة الأولى أدناه. الآن حدد شكل الصخرة الكبيرة واضبط موضعها كما تراه في الصورة الثانية، وضعها خلف النباتات القصيرة. ثم ضع باقي الصخور في مكانها المناسب داخل حوض الأسماك. ستتوصل للشكل الموضح في الصورة الأخيرة أدناه. رسم الأسماك التقط أداة (Rectangle Tool (M وارسم مستطيلًا أبعاده px95*62. ثم باستخدام أداة (Pen Tool (P ارسم الشكل الموضح في الصورة الثانية. فور انتهائك من رسم الشكل ذو اللون الأحمر حدد المستطيل المرسوم واحذفه. أعد تحديد الشكل الأحمر وأزل لون الحدود ثم املأ الشكل بتدرج إشعاعي كما هو موضح في الصورة الأخيرة أدناه. بالاعتماد على أداتي (Pencil Tool (N و(Gradient Tool (G ارسم الأشكال الثلاثة الموضحة في الصور أدناه. حدد أكبر الأشكال المرسومة في خطوة 29 وأضف تأثير Gaussian Blur 3px. بعدها حدّد الشكلين المتبقيين في خطوة 29 وأضف لهما تأثير **Gaussian Blur 2px **. قبل أن تكمل حدد الأشكال الثلاثة الناتجة من بداية الخطوة 29 وحتى الآن وضعهم في مجموعة واحدة بالضغط على Ctrl+G. حدّد الشكل الناتج من خطوة 28 وانسخه بالضغط على Ctrl+F، Ctrl+C وضع النسخة في مقدمة مسطح العمل بالضغط على Ctrl +Shift +Right Square Bracket. أبقِ على تحديد النسخة ومع الضغط المستمر على مفتاح Shift انقر على المجموعة الناتجة من هذه الخطوة. بعدها انقر بزر الفأرة الأيمن على مسطح العمل واختر Make Clipping Mask من القائمة المنسدلة. حدد الشكل الناتج من خطوة 28 واذهب إلى Offset Path < Path < Object وأدخل قيمة **Offset 5px ** ثم اضغط OK. ضع الشكل المتكون في مقدمة سطح العمل وذلك بالضغط على Ctrl +Shift +Right Square Bracket واستبدل لونه بدرجة من البرتقالي caa491‏#. أبقِ الشكل محددًاا واذهب إلى Craquelure < Texture < Effect ثم اتبع التعليمات الموضحة في الصورة الثالثة واضغط OK. بعدها أضف تأثير **Feather 5px ** على الشكل الناتج وغيّر نظام الدمج إلى Overlay. مع إبقائك على تحديد الشكل اضغط على Ctrl+X لقصّه. ثم التقط أداة (Selection Tool (V وانقر نقرًا مزدوجًا على المجموعة المتكونة في خطوة 30 ثم اضغط على Ctrl+F لِلصق الشكل. أخيرًا انقر نقرًا مزدوجًا في أي مكان خارج المجموعة. سنبدأ بإضافة بعض الظلال لشكل السمكة وذلك لإعطائها شكلًا ثلاثيّ الأبعاد. التقط أداة (Pen Tool (P وارسم المسار المنحني بسماكة حدود 2px بلون أصفر f3c22b‏#. أعد تحديد المسار المرسوم وأضف تأثير **Gaussian Blur 2px *. استمر بالعمل مع أداة (Pen Tool (P وارسم مسارًأ منحنيًا باللون الأسود #341f06 وبسماكة حدود 5px وبلا تعبئة، ثم أضف تأثير Width Profile 5 و*Gaussian Blur 4px **. حدّد المسارين المرسومين في هذه الخطوة واضغط على Ctrl+X لقص المسارين. التقط أداة (Selection Tool (V وانقر نقرًأ مزدوجًا على المجموعة الناتجة من خطوة 30 ثم اضغط Ctrl+F للصق المسارين. أخيرًا انقر نقرًا مزدوجًا في أي مكان خارج المجموعة. التقط أداة (Ellipse Tool (L وارسم شكلًا بيضاويًا باللون الأحمر da3833‏# واضبط موضعه كما هو موضح أدناه. بعد تحديد الشكل اضغط على Ctrl +Left Square Bracket لإخفائه خلف المجموعة الناتجة من خطوة 30. بالاعتماد على أداة (Pen Tool (P ارسم الشكل الموضح أدناه في الصورة الثالثة بسماكة 2px وبلون حدود 611d05‏# وبلا تعبئة. بعدها أزل حدود الشكل المنسوخ واملأه بتدرج إشعاعي كما هو موضح في الصورة الرابعة. أعد تحديد الشكل ذو اللون البرتقالي وأضف تأثير **Gaussian Blur 1px **. ارسم شكلًا بيضاويًا باللون الأسود باستخدام أداة (Ellipse Tool (L كما ترى في الصورة السادسة. انسخ الشكل المرسوم وأزل لون التعبئة ثم أضف حدود بسماكة 1px باللون الأبيض، بعدها أضف تأثير Width Profile 5 على الشكل البيضاوي الناتج. أخيرًأ ارسم شكلًا بيضاويًا صغيرًا كما ترى في الصورة الأخيرة. ابدأ الآن برسم فم السمكة. باستخدام أداة (Pen Tool (P ارسم الشكلين الموضحين أدناه. لإضافة المزيد من التفاصيل ارسم مسارًا منحنيًا باستخدام أداة (Pen Tool (P بسماكة 3px وأضِف تدرجًا خطيًا لتعبئة الحدود واحتفظ بالشكل بلا تعبئة. بعدها أضف تأثير Width Profile 5 على المسار الناتج. حدد المسار وانسخه بالضغط على Ctrl+F، Ctrl+C. استبدل لون الحدود بعمل تدرج خطي وغيّر سماكة الحدود إلى 1px. أخيرًا أضف تأثير **Feather 2px ** للمسار الناتج. بالرجوع إلى أداة (Pen Tool (P مرةً أخرى، ارسم ثلاثة مسارات منحنية كما ترى في الصورة الأولى. بمجرد انتهائك من الرسم حدّد المسارين السفليين واستبدل تعبئة لون الحدود بتدرجٍ خطي، بعدها أضف تأثير Width Profile 1 للمسارات الناتجة. الآن حدّد المسار المنحني ذو اللون الأصفر واستبدل لون الحدود بتدرج خطي. بعدها غيّر سماكة المسار إلى 2px ثم أضف تأثير Width Profile 1. أخيرًا حدّد المسارات الثلاثة وأضف تأثير **Gaussian Blur 0.5px **. استكمالًا برسم زعانف السمكة. باستخدام أداتي (Pen Tool (P و(Gradient Tool (G ارسم الشكل الموضح في الصورة الأولى والثانية أدناه. بعدها أضف تأثير Feather 5px على الشكل الجديد. باستخدام أداة (Pen Tool (P ارسم المسارات المنحنية الموضحة في الصورة أدناه. من المفترض أن تصل إلى الشكل الموضح في الصورة الرابعة. حدد المسارات وغيّر سماكة الحدود إلى 2px واستبدل لون الحدود بتدرج خطي. بعدها أضف تأثير Width Profile 5 للمسارات الناتجة. لإضافة مظهر أقل انتظامًا للزعانف، استبدل لون حدود للمسارات المنحنية كما هو موضح في الصورة أدناه. أخيرًا حدّد جميع الأشكال الناتجة من خطوة 37 وحتى الآن وضعهم في خلفية سطح العمل بالضغط على Ctrl +Shift +Left Square Bracket. بالاعتماد على أداتي (Pen Tool (P و(Gradient Tool (G ارسم شكلًا مشابهًا للصورة الأولى والثانية. بعدها أضف تأثير Feather 5px على الشكل الناتج. أكمل باستخدام أداة (Pen Tool (P ارسم المسارات المنحنية المُوضحة في الصورة الأولى أدناه، ثم حدد المسارات الناتجة وغيّر سماكة الحدود إلى 2px واستبدل لون الحدود بتدرج خطي. بعدها أضف تأثير Width Profile 4 للمسارات الناتجة. لإضافة مظهر أقل انتظامًا للزعانف استبدل لون الحدود لبعض المسارات كما هو موضح في الصورة الثالثة. أخيرًا حدد جميع الأشكال الناتجة من خطوة 40 وحتى هذه المرحلة وضعهم في خلفية سطح العمل بالضغط على Ctrl +Shift +Left Square Bracket. بالاعتماد على أداتي (Pen Tool (P و(Gradient Tool (G ارسم الأشكال التي تراها في الصور أدناه.بمجرد انتهائك من رسم الأشكال حدد الشكل الأكبر وأضف تأثير Feather 3px. بعدها حدد الأشكال المتبقية وأضِف عليها تأثير Feather 2px. أكمل بأداة (Pen Tool (P وارسم بعض المسارات المنحنية القوية باللون الأحمر b63212‏# كما يظهر في الصورة الأولى. حدّد المسارات المرسومة وغيّر سماكة حدودها إلى **2px ثم أضف تأثير *Width Profile 4* للمسارات الناتجة. وهكذا كرّر نفس الخطوات لرسم المزيد من المسارات المنحنية كما تظهر في الصور الثالثة والرابعة. أخيرًا حدد جميع الأشكال المرسومة من بداية الخطوة 42 وحتى هذه اللحظة وضعهم في خلفية سطح العمل بالضغط على Ctrl +Shift +Left Square Bracket. كرّر نفس الخطوات السابقة لرسم المزيد من الزعانف ثم حدد جميع الأشكال المرسومة من بداية الخطوة 28 وحتى الآن وضعهم في مجموعة واحدة بالضغط على Ctrl+G. انتهى العمل على السمكة! رسم الفقاعات التقط أداة (Ellipse Tool (L وارسم شكلًا بيضاويًا بأبعاد px1010* باللون الأبيض f1f2f2‏#. انسخ الشكل الناتج وصغّر حجمه ثم استبدل لونه بتدرج إشعاعي. أبق على تحديد الشكل البيضاوي الناتج وانسخه ثم قلل حجمه واستبدل لون التعبئة بتدرج إشعاعي. الإضافة المزيد من التفاصيل ارسم الشكل الموضح في الصورة أدناه ثم أضف تأثير Feather 1px للشكل الناتج. باستخدام أداة (Pen Tool (P ارسم مسارين منحنيين كما ترى في الصورة الثانية بسماكة حدود 0.5px وبلا تعبئة. بعدها أضف تأثير Width Profile 4 على المسارات الناتجة. أخيرًا ارسم ثلاثة أشكال بيضاوية باللون الأبيض كما ترى في الصورة الأخيرة. الآن حدّد جميع الأشكال المرسومة من بداية الخطوة 45 حتى هذه اللحظة وضعهم في مجموعة واحدة بالضغط على Ctrl+G. وهكذا ننتهي من رسم الفقاعات. حدد مجموعة الفقاعات المرسومة في خطوة 46 وانع منها أربعة نسخ. بعدها غيّر في حجمها كما تراه مناسبًا وبعد تحديدهم قلّل شفافية الأشكال حتى 50%. أخيرًا اضبط أماكن الفقاعات الجديدة كما هو موضح في الصورة الثالثة أدناه ثم خبّئهم خلف الجزء الأمامي من حوض الأسماك. رسم السمكة الحجرية باستخدام أداة (Pen Tool (P ارسم الشكلين الموضحين في الصورة الأولى والثانية. بمجرد انتهائك من رسمهم حدّد الشكل ذو اللون الأحمر وضعه خلف الشكل ذو اللون الأسود. الآن حدد الشكلين المرسومين في هذه الخطوة وأزل لون الحدود، ثم املأهم باللون البرتقالي المائل للرمادي c2b59b‏#. أبق على تحديد الأشكال المرسومة ثم اذهب إلى Reticulation < Sketch < Effect. اتبع التعليمات الموضحة في الصورة الرابعة ثم اضغط **OK. مع إبقائك على تحديد الأشكال الناتجة أضف تأثير *Gaussian Blur 1px* وغير نظام الدمج إلى Difference ثم قلل الشفافية حتى 90%. حدّد الأشكال الناتجة مجدّدّا وانسخها بالضغط على Ctrl+F، Ctrl+C. مع إبقائك على تحديد الأشكال افتح نافذة Appearance بالذهاب إلى Appearance < Window وأزل جزئية **Reticulation. أبق على تحديد الأشكال الناتجة ثم اذهب إلى *Glass < Distort < Effect*. اتبع التعليمات الموضحة في الصورة الأخيرة ثم اضغط *OK*، بعدها قلل الشفافية حتى *100%*. التقط أداة (Pen Tool (P وارسم الشكلين الموضحين في الصورة الأولى واملأهما باللون d3aa7e‏#. حدد الشكلين مجددّا ثم اذهب إلى Glass < Distort < Effect واتبع التعليمات الموضحة في الصورة أدناه ثم اضغط OK. أضف تأثير Gaussian Blur 1px للأشكال الناتجة وغير نظام الدمج إلى Difference وقلل الشفافية حتى 70%. باستخدام أداة (Pen Tool (P ارسم الشكلين الموضحين في الصورة الأولى واملأهم باللون البرتقالي المائل للرمادي c2b59b‏# ثم انسخ الشكلين بالضغط على Ctrl+F، Ctrl+C، بعدها استبدل لون التعبئة باللون البرتقالي d3aa7e‏#. أبقِ على تحديد الأشكال واذهب إلى Reticulation < Sketch < Effect واتبع التعليمات الموضحة في الصورة الثانية ثم اضغط OK. مع إبقائك على تحديد الأشكال الناتجة أضف تأثير Gaussian Blur 1px وغير نظام الدمج إلى Difference ثم قلل الشفافية حتى 90%. انسخ الأشكال المحددة بالضغط على Ctrl+F، Ctrl+C. أبق على تحديد الأشكال المنسوخة ثم افتح نافذة Appearance بالذهاب إلى *Appearance < Window وأزل جزئية *Reticulation*. مع إبقاء الأشكال الناتجة محددة اذهب إلى *Glass < Distort < Effect* واتبع التعليمات الموضحة في الصورة الأخيرة ثم اضغط OK وقلل الشفافية حتى **100%. الآن اتبع تسلسل الصور المرفقة أدناه وكرر نفس الخطوات لرسم المزيد من الأشكال المشابهة. التقط أداة (Pen Tool (P وارسم الأشكال الثلاثة الموضحة واملأها باللون البرتقالي d3aa7e‏#، أبقِ على تحديد الأشكال الناتجة ثم اذهب إلى Reticulation < Sketch < Effect واتبع التعليمات الموضحة في الصورة الثانية ثم اضغط OK. أبق على تحديد الأشكال ثم أضف تأثير Gaussian Blur 1px وغير نظام الدمج إلى Difference وقلل الشفافية حتى 90%. استكمالًا بالعمل مع أداة (Pen Tool (P ارسم شكلًا باللون البرتقالي c2b59b# كما تراه في الصورة وانسخه بالضغط على Ctrl+F، Ctrl+C ثم استبدل لونه باللون البرتقالي d3aa7e‏#. أبقِ على تحديد الشكل الناتج ثم اذهب إلى Reticulation < Sketch < Effect واتبع التعليمات الموضحة في الصورة ثم اضغط OK. طبق تأثير Gaussian Blur 1px على الشكل المحدد ثم غير نظام الدمج إلى Difference وقلل الشفافية حتى 90% وانسخ الشكل الناتج بعد تحديده. أبق على تحديد الشكل المنسوخ ثم افتح نافذة Appearance بالذهاب إلى Appearance < Window وأزل جزئية **Reticulation. مع تحديد الشكل الناتج اذهب إلى *Glass < Distort < Effect* واتبع التعليمات الموضحة في الصورة الأخيرة ثم اضغط OK، بعدها قلل الشفافية حتى 100%. استكمالًا بالعمل مع أداة (Pen Tool (P ارسم الشكل الموضح أدناه واملأه باللون الرمادي الداكن 6b6f58‏# وأضف تأثير Gaussian Blur 3px للشكل الناتج ثم غير نظام الدمج إلى Hard Light. الآن حدد جميع الأشكال المرسومة من بداية الخطوة 48 وحتى الآن ثم ضعهم في مجموعة واحدة بالضغط على Ctrl+G. بعد الانتهاء من رسم شكل السمكة الحجرية اضبط موضعها كما هو موضح في الصورة الثانية، بعدها ضع الشكل خلف تجمع العشب ذو اللون الأحمر الداكن. تصميم الخلفية حدد جميع الأشكال المرسومة من بداية الخطوة 2 وحتى الآن وضعهم في مجموعة واحدة بالضغط على Ctrl+G. حتى هذه المرحلة نحن انتهينا بالفعل من رسم حوض الأسماك وسنبدأ بتصميم خلفية العمل. باستخدام أداتي (Rectangle Tool (M و(Gradient Tool (G ارسم شكلًا مستطيلًا بأبعاد px612*606 كما هو موضح أدناه. بعدها اضبط مكان حوض الأسماك على الخلفية الجديدة المرسومة. لإضافة مشهد أكثر واقعية سنبدأ بإضافة بعض الظلال في بعض المناطق الهامة. التقط أداة (Ellipse Tool (L وارسم شكلًا بيضاويًأ بأبعاد 336*77px واضبط مكان الشكل كما هو موضح أدناه. حدد الشكل الناتج مجددًا وأزل لون الحدود ثم املأه باللون الأسود 000000#. أضف تأثير Gaussian Blur 3px وقلل الشفافية حتى 90%. أخيرًا ضع الشكل الناتج خلف حوض الأسماك. أكمل برسم شكل بيضاوي بأبعاد 395*px112 باستخدام أداة (Ellipse Tool (L، بعدها اضبط موضع الشكل كما هو موضح أدناه. أبق على تحديد الشكل الناتج وأزل لون الحدود ثم املأ الشكل بتدرج إشعاعي. أضف تأثير Gaussian Blur 10px على الشكل الناتج ثم ضعه خلف الشكل البيضاوي المرسوم في خطوة 56. انتهينا! ترجمة -وبتصرف- للمقال How to create a realistic Fishbowl in Adobe Illustrator لصاحبه Bao Nguyen

في الوقت الذي ستُلقي فيه نظرة على هذا المقال قد تكون معايير SMIL أصبحت شيئًا من الماضي، لكن مهلًا! في هذا المقال ستجد دليلًا لاستبدال بعض الميزات وتطويرها. لمحة عامة يمكن تحريك الرسوم المتجهة (SVG graphics) باستخدام عناصر التحريك المعرفة في مواصفات لغة التكامل المتزامن للوسائط المتعدّدة SMIL، تشمل تلك العناصر ما يلي: <animate>: يسمح لك هذا العنصر بتحريك خاصيات HTML وخاصيات الكائنات على مدى فترة زمنية محددة. <set>: وهو اختزال مناسب للتحريك، فهو يفيد في تعيين قيم التحريك لخاصيات HTML وخاصيات الكائنات مثل خاصية الظهور والرؤية. <animateMotion>: يعمل على تحريك العنصر على امتداد مسار الحركة. <animationColor>: تستطيع من خلال هذا العنصر تعديل القيم اللونية لخاصيات HTML وخاصيات الكائنات مع مرور الوقت. لاحظ إهمال العنصر <animateColor> لمجرد استخدام عنصر التحريك لاستهداف خصائص من الممكن أن تمتلك قيم لونية. بالرغم من ذلك لا يزال ذلك العنصر متاحًا في مواصفات SVG1.1، على العكس من SVG2 فهو مهمل ومحذوف بالكامل. بالإضافة إلى عناصر التحريك المعرفة في مواصفات SMIL تحتوي الرسوم المتجهة SVG ملحقات متوافقة مع مواصفات SMIL والتي تحتوي على خاصيات توسع نطاق عمل العنصر <animateMotion> وعناصر إضافية أخرى. تشمل ملحقات الرسوم المتجهة SVG ما يلي: <animateTransform>: يتيح لك تحريك إحدى خاصيات الرسوم المتجهة مع مرور الوقت، مثل خاصية transform. path (خاصية HTML): تسمح بتحديد أي خاصية من صيغ بيانات مسار الرسوم المتجهة SVG في خاصية المسار لعنصر animateMotion، (التحريك اعتمادًا على SMIL فقط يسمح بتفرع صيغ بيانات الرسوم المتجهة خلال مسار). سنتطرق بالحديث أكثر عن animateMotion في الفقرات القادمة. <mpath>: يستخدم بالاقتران مع عنصر animateMotion للإشارة إلى مسار حركة الذي سيستخدم كمسار لتحريك العناصر. مع العلم أن عنصر mpath مضمن داخل عنصر animationMotion قبل علامة الإغلاق. <keypoints> (خاصية HTML): تستخدم كخاصية لـ animateMotion لتوفير تحكم دقيق في سرعة حركة العناصر في مساراتها. <rotate> (خاصية HTML): تستخدم أيضًا كخاصية لـ animateMotion للتحكم في ما إذا كان الكائن يستجيب للدوران تلقائيًا بحيث يشير المحور السيني له في نفس الاتجاه (أو الاتجاه المعاكس) مثل متجه الظل الاتجاهي لمسار الحركة. هذه الخاصية هي مفتاح نجاح تحريك العناصر على امتداد مسار ما كما تتوقع للحركة أن تكون. مزيدًا من التوضيح في الجزئية الخاصة بشرح animationMotion. حركة رسوم SVG من الممكن أن تكون مشابهة لرسوم CSS والانتقالات عبرها حسب طبيعتيهما. مفاتيح الحركة تُضبط وبالتالي تتحرك العناصر وتتغير الألوان …إلخ. مع ذلك بإمكان رسوم SVG القيام بأمور لا تستطيع رسوم CSS القيام بها وهذا ما سنتطرق له لاحقًا. لماذا قد تستخدم الرسوم المُتجهة (SVG Animation)؟ من الممكن تصميم وتحريك الرسوم المتجهة (SVG) باستخدام CSS. بشكل أساسي التأثيرات الحركية التي تطبق على عناصر HTML من الممكن أيضًا تطبيقها على عناصر SVG. ولكن هناك بعض الخصائص التي يمكن تطبيقها على SVG ليست فعالة على CSS. مسار SVG على سبيل المثال يأتي مع مجموعة من البيانات (d=""‎ خاصية HTML) التي تعطي للمسار شكلًا. تلك البيانات يمكن تعريفها وتحريكها خلال SMIL ولكن الأمر لا ينطبق على CSS. ذلك لأن عناصر SVG تتصف بمجموعة من خاصيات HTML تُعرف بخاصيات للعرض. بعض تلك الخاصيات من الممكن معايرتها والتحكم فيها وتحريكها باستخدام CSS وهذا لا ينطبق على الخاصيات جميعها. وهكذا ترى أن العديد من تأثيرات الحركة يمكن تطبيقها حاليًا باستخدام CSS. وأما الفجوات في استخدام SVG CSS من الممكن تجاوزها عند استخدام JavaScript أو SVG المستمدة من SMIL. إذا كنت تفضل استخدام JavaScript فيستحسن أن تجرب snap.svg بواسطة Dmitry Baranovsky الذي يعد كمكتبة حافلة بالكثير من النصوص البرمجية الخاصة بـ SVG. ويمكنك الاطلاع على العديد من الأمثلة على ذلك. أما إذا كنت تفضل الخوض في مسار تعريفي أكثر بإمكانك استخدام عناصر التحريك التي سيتطرق لها هذا الدليل. ميزة أخرى تميز SMIL عن JS هي أن رسوم JS لا تعمل عند تضمين رسوم SVG كصور img أو استعمالها كصورة خلفية (background-image) في CSS. رسوم SMIL تعمل في كلا الحالتين أو هكذا ينبغي. وهذه ميزة عظيمة. لربما ستجد نفسك قد اخترت SMIL عن غيرها من الخيارات بسبب تلك الميزة. ومن هنا فهذا الدليل سيؤدي دور المساعد لتتعلم كيف تستخدم SMIL بدءًا من اليوم. دعم المتصفح والنسخ الاحتياطية دعم المتصفح لرسوم SMIL لائق للغاية. حيث أنه يعمل في جميع المتصفحات باستثناء Internet Explorer و Opera Mini. للحصول على نظرة شاملة حول دعم المتصفح، يمكنك الرجوع إلى جدول التوافق. إذا كنت بحاجة إلى توفير نسخة احتياطية لحركة الرسوم لـ SMIL، يمكنك اختبار دعم المتصفح أثناء التنقل باستخدام Modernizr. إذا لم يكن SMIL مدعومًا ، فيمكنك تقديم نوع من الاستعاضة (رسوم JavaScript متحركة، تجربة بديلة، …إلخ). تحديد الهدف من الحركة باستخدام xlink: href بغض النظر عن أي من عناصر التحريك الأربعة التي تختارها، فأنت بحاجة إلى تحديد هدف الحركة المحدد بواسطة هذا العنصر. لتحديد الهدف يمكنك استخدام خاصية xlink: href. تعطي خاصية HTML هذه مرجع URI للعنصر المستهدف في التحريك والذي سيجري تعديله بمرور الوقت. يجب أن يكون العنصر المستهدف جزءًا من مستند SVG الحالي. <rect id="cool_shape" ... /> <animate xlink:href="#cool_shape" ... /> إذا واجهت عناصر التحريك في SVG من قبل، فمن المحتمل أنك رأيتها متداخلة مع العنصر المفترض تحريكه. هذا ممكن تبعًا لمحددات: إذا لم تتوفر خاصية xlink: hrefHTML، فسيكون العنصر المستهدف هو العنصر الأصل المباشر لعنصر الحركة الحالي. <rect id="cool_shape" ... > <animate ... /> </rect> لذلك إذا كنت تريد "تضمين" الرسم المتحرك في العنصر الذي ينطبق عليه، فبإمكانك القيام بذلك. وإذا كنت تريد أن تبقي الرسم المتحرك منفصل في مكان آخر في المستند، فيمكنك القيام بذلك أيضًا، وحدّد الهدف من كل حركة باستخدام xlink: href. كلا الطريقتين تعملان بشكل جيد. تحديد الخاصية المستهدفة للحركة باستخدام attributeName وattributeType تشترك جميع عناصر التحريك أيضًا في خاصية HTML أخرى وهي attributeName. تُستخدم attributeName لتحديد اسم خاصية HTML التي تقوم بتحريكها. على سبيل المثال، إذا كنت ترغب في تحريك موضع مركز الدائرة <circle> على المحور السيني (x-axis)، حدد cx كقيمة لخاصية attributeName. تأخذ attributeName قيمة واحدة فقط، ولا تقبل قيم متعددة، لذلك يمكنك تنشيط خاصية HTML واحدة فقط في كل مرة. إذا كنت ترغب في تحريك أكثر من خاصية HTML واحدة فأنت بحاجة إلى تعريف أكثر من تحريك واحد للعنصر. لربما لا توجد طريقة أخرى ولهذا لـ CSS أفضلية عن SMIL. ولكن مرة أخرى، نظرًا للقيم المحتملة لخاصيات الحركة الأخرى (والتي سنتطرق لها بعد ذلك)، فمن المنطقي تحديد اسم خاصية HTML واحد فقط في المرة الواحدة، وإلا فقد تصبح قيم الخاصيات الأخرى معقدة للغاية بحيث لا يمكن التعامل معها. عند تحديد اسم خاصية HTML، يمكنك إضافة البادئة XMLNS (اختصار namespace XML) للإشارة إلى مجال اسم خاصية HTML. يمكن أيضًا تحديد مجال الاسم باستخدام الخاصية attributeType. على سبيل المثال، تعد بعض الخاصيات جزءًا من مساحة اسم CSS (مما يعني أنه يمكن العثور عليها كخاصية CSS أيضًا) والبعض الآخر XML فقط. يمكن العثور على جدول يوضح هذه الخاصيات هنا. خاصيات HTML في الجدول ليست كلها من خاصيات SVG إنها فقط تلك التي يمكن ضبطها باستخدام CSS. بعضها متاح بالفعل كخصائص CSS. إذا لم تُعيّن قيمة attributeType بشكل صريح أو عُيّنت على "تلقائي"auto، يجب أن يبحث المتصفح أولاً من خلال قائمة خصائص CSS عن اسم خاصية مطابق، وإذا لم يُعثر على أي منهما سيبحث في مجال اسم XML الافتراضية للعنصر. على سبيل المثال، يوضح المقتطف التالي التحكم في تحريك شفافية مستطيل SVG. نظرًا لأن خاصية HTML للشفافية opacity متوفرة أيضًا كخاصية CSS، تُعين attributeType على مجال اسم CSS: <rect> <animate attributeType="CSS" attributeName="opacity" from="1" to="0" dur="5s" repeatCount="indefinite" /> </rect> سنتجاوز خاصيات الحركة الأخرى في الأمثلة التالية أدناه. جميع خاصيات التحريك متعارف عليها ما بين جميع عناصر التحريك ما لم يذكر خلاف ذلك. تحريك خاصية HTML لعنصر من قيمة لأخرى على مدار فترة زمنية وتحديد الحالة النهائية: from وby وto وdur وfill ابدأ بتحريك دائرة من موقع إلى آخر عن طريق تغيير قيمة الخاصية cx الخاصة بها (والتي تحدد قيمة x لمركزها). عنصر <animate> سيتيح لك القيام بذلك حيث يستخدم لتحريك خاصية واحدة في كل مرة. عادةً ما تتحرك الخاصيات التي تأخذ قيم رقمية ولونية باستخدام هذا العنصر. تفقد الجدول للتعرف على الخاصيات التي يمكن تحريكها. للتغيير من قيمة إلى أخرى خلال فترة زمنية يمكنك استخدام الخاصيات From وto وdur. ستحتاج أيضًأ إلى تحديد بداية الحركة عن طريق خاصية begin. <circle id="my-circle" r="30" cx="50" cy="50" fill="orange" /> <animate xlink:href="#my-circle" attributeName="cx" from="50" to="450" dur="1s" begin="click" fill="freeze" /> يوضح المثال السابق طريقة تعريف دائرة وتحريكها من مركزها من الموضع الأولي عند 50 وحدة ثم إلى الموضع الجديد 450 وحدة على امتداد محور السينات (x-axis). تتحدد قيمة البداية begin بالنقر click أي أن الدائرة سوف تتحرك عند النقر عليها. ويمكنك أيضًا قيمة البداية كقيمة زمنية. على سبيل المثال، تعيين القيمة "begin="0s يعني أن حركة العنصر ستبدأ بمجرد تحميل الصفحة. بإمكانك تأخير حركة العنصر عند تحديد قيمة موجبة، مثلًا "begin="2s تعني أن حركة العنصر ستبدأ بعد ثانيتين من تحميل الصفحة. الأكثر إثارةً هو أنه بإمكانك تعيين قيمة البداية begin مثل s1+click لتبدأ حركة العنصر خلال ثانية واحدة بعد النقر عليه! علاوةً على ذلك بإمكانك استخدام قيم أخرى تسمح لك بمزامنة العنصر بدون حساب المدة الزمنية وزمن التأخير للعناصر المتحركة الأخرى. ستعرف المزيد لاحقًا. خاصية dur تكافئ animation-duration في CSS. الخاصيتان from وto تشبهان الإطارين المفتاحيين (keyframes)‏ from وto في قاعدة ‎@keyframe الخاصة بـ CSS: @keyframes moveCircle { from { /* start value */ } to { /* end value */ } } أما خاصية HTML التعبئة fill (والتي تحمل نفس اسم خاصية HTML "التعبئة" التي تحدد لون العنصر لسوء الحظ) فهي تشبه خاصية وضع ملء الرسوم fill-mode property والتي تحدد ما إذا كان على العنصر أن يعود لحالته الأولية بعد انتهاء عملية التحريك. تتشابه قيم SVG مع تلك الموجودة في CSS، باستثناء اختلاف التسميات: freeze: يُعني هذا التأثير بتجميد قيمة التأثير لآخر قيمة في الفترة النشطة. يبقى التأثير مجمدًا للفترة الزمنية المتبقية في المستند أو حتى إعادة تشغيل الحركة. remove: يقوم هذا التأثير بإزالة تأثير الحركة (أي أنه لم يعُد مُطبقًا) عند انتهاء المدة النشطة للحركة. بعد انتهاء زمن الحركة لم يعد الهدف متأثرًا بالحركة ما لم يُعاد تشغيل الحركة من جديد. حاول تغيير القيم في العرض الحي المباشر لترى كيف تتأثر الحركة: تستخدم خاصية by لتعيين إزاحة نسبية للحركة. كما يوحي الاسم فبإمكانك استخدام الخاصية HTML لتحديد مقدار الإزاحة التي تريد للحركة أن تتقدم بها. يكون تأثير الخاصية by مرئيًا عند تقدمك خلال مدة الحركة في خطوات منفصلة، على غرار الطريقة المعمول بها في CSS عبر steps()‎. المكافئ لدالة steps()‎ في CSS هو "calcMode="discrete في SVG، وسنتطرق لخاصية calcMode لاحقًا في المقالة. الحالة الأخرى عندما يكون تأثير by أكثر وضوحًا عند تحديد خاصية to. سيأتي مثال على ذلك لاحقًا. وأخيرًا وليس آخرًا، تأتي by بفائدة أخرى عند العمل مع الحركة المضافة والتراكمية. إعادة تشغيل الحركة باستخدام restart قد يكون من المفيد وقف إعادة تشغيل الحركة أثناء نشاطها. للقيام بذلك تمنح SVG خاصية restart المزودة بخيارات ثلاثة: always: تمكنك من إعادة تشغيل الحركة في أي وقت حيث أنها القيمة الافتراضية. whenNotActive: يمكن إعادة تشغيل الحركة فقط عندما لا تكون نشطة (أي بعد النهاية النشطة). أما محاولات إعادة تشغيل الحركة خلال المدة النشطة فيتم تجاهلها. never: لا يمكن إعادة تشغيل العنصر لما تبقى من المدة البسيطة الحالية لحاوية الزمن. (في حالة SVG نظرًا لأن حاوية الوقت الأصلية هي جزء من مستند SVG، فلا يمكن إعادة تشغيل الحركة للفترة المتبقية من مدة المستند). تسمية الحركة ومزامنتها افترض أننا نريد تحريك موضع ولون دائرة، بحيث يتغير اللون في نهاية الحركة. بإمكانك القيام بذلك عن طريق تحديد قيمة begin لحركة تغيير اللون لتكون مساوية لمدة الحركة dur، هذه هي الطريقة التي نفعلها عادة في CSS. SMIL مع ذلك، لديها ميزة لطيفة التعامل مع الأحداث. لقد ذكرنا قبل ذلك أن الخاصية begin تقبل قيمًا مثل click + 5s. تسمى هذه القيمة "قيمة الحدث (event value)، وتتكون في هذه الحالة من مرجع حدث متبوعًا بـ "قيمة الساعة". الجزء المثير للاهتمام هنا هو تسمية الجزء الثاني: "قيمة الساعة". لماذا ليست مجرد "قيمة زمنية"؟ حسنًا، الجواب هو أنه يمكنك استخدام قيمة الساعة حرفيًا مثل "10min" أو "01:33" أي ما يعادل "دقيقة و 33 ثانية"، أو حتى "02:30:03" (ساعتان، 30 دقيقة، و 3 ثوان). في وقت كتابة هذا التقرير، لم تُطبق قيم الساعة بالكامل في أي متصفح. لذا، إذا أردنا العودة إلى العرض الحي السابق واستخدمت click + 01:30، إذا بدأ متصفح يدعمه، ستبدأ الحركة خلال دقيقة و 30 ثانية بعد النقر فوق الدائرة. نوع آخر من القيم التي يمكن أن يقبلها هو معرف رسوم متحركة أخرى يتبعها مرجع حدث. إذا كان لديك حركتان (أو أكثر) (سواء طبقت على نفس العنصر أم لا!) وتريد مزامنتهما بحيث تبدأ إحداهما نسبة إلى الأخرى، يمكنك القيام بذلك دون الحاجة إلى معرفة مدة الحركة المتبقية. على سبيل المثال، في العرض الحي التالي، يبدأ المستطيل الأزرق في التحرك لمدة ثانية واحدة بعد بدء حركة الدائرة. و ذلك عن طريق إعطاء معرف كل حركة ID، ثم استخدام هذا المعرف مع الحدث begin كما هو موضح في التعليمات البرمجية التالية: <circle id="orange-circle" r="30" cx="50" cy="50" fill="orange" /> <rect id="blue-rectangle" width="50" height="50" x="25" y="200" fill="#0099cc"></rect> <animate xlink:href="#orange-circle" attributeName="cx" from="50" to="450" dur="5s" begin="click" fill="freeze" d="circ-anim" /> <animate xlink:href="#blue-rectangle" attributeName="x" from="50" to="425" dur="5s" begin="circ-anim.begin + 1s" fill="freeze" id="rect-anim" /> البداية "begin="circ-anim.begin + 1s هي الجزء الذي يخبر المتصفح ببدء الحركة للمستطيل بعد ثانية واحدة من بداية الدائرة. تفقد العرض التوضيحي التالي: يمكنك أيضًا بدء الحركة للمستطيل بعد انتهاء حركة الدائرة باستخدام حدث النهاية end بتتبع الشيفرة التالية: <animate xlink:href="#blue-rectangle" attributeName="x" from="50" to="425" dur="5s" begin="circ-anim.end" fill="freeze" id="rect-anim"/> يمكنك حتى بدء تشغيله قبل نهاية حركة الدائرة باستخدام الشيفرة التالية: <animate xlink:href="#blue-rectangle" attributeName="x" from="50" to="425" dur="5s" begin="circ-anim.end - 3s" fill="freeze" id="rect-anim"/> تكرار الحركة باستخدام repeatCount إذا كنت ترغب في تشغيل الحركة أكثر من مرة، فيمكنك القيام بذلك باستخدام خاصية repeatCount. يمكنك تحديد عدد المرات التي ترغب في تكرارها، أو استخدام الكلمة المفتاحية الأساسية غير المحددة لجعلها تتكرر إلى ما لا نهاية infinite. لذلك، إذا أردنا تكرار الحركة للدائرة مرتين، ستكون الشيفرة كما يلي: <animate xlink:href="#orange-circle" attributeName="cx" from="50" to="450" dur="5s" begin="click" repeatCount="2" fill="freeze" id="circ-anim" /> يمكنك التحقق من العرض الحي هنا. في المثال الحي، عين عدد التكرار ليكون 2 على الدائرة، وبشكل غير نهائي في المربع infinite. لاحظ طريقة إعادة تشغيل الحركة من القيمة الأولية from من القيمة بدلاً من القيمة التي وصلت إليها في نهاية الحركة. لسوء الحظ، لا تتضمن SMIL طريقة للرجوع إليها بين قيم البداية والنهاية مثل CSS التي تتيح لنا القيام بذلك. في CSS، تحدد خاصية اتجاه الحركة animation-direction ما إذا كانت الحركة يجب أن تنفذ بشكل معاكس على بعض أو كل الدورات أو التكرارات. Animation-direction: alternate: تعني القيمة البديلة أن عمليات تكرار دورة الحركة ذات القيم الفردية يتم تشغيلها في الاتجاه الطبيعي، وأما القيم الزوجية فتكون في اتجاه عكسي. هذا يعني أن الدورة الأولى ستكون من البداية إلى النهاية، ثم ستليها الدورة الثانية من النهاية إلى البداية، ثم الدورة الثالثة من البداية إلى النهاية، وهكذا. في SMIL للقيام بذلك، يجب عليك استخدام JavaScript لتغيير قيم الخاصيات from وto بشكل صريح. كتب جون مكبارتلاند من Big Bite Creative منشورًا لفترة من الوقت يشرح فيه كيف فعل ذلك من أجل تحريك رمز القائمة الذي عمل عليه. حل آخر هو تحديد القيمة النهائية كقيمة متوسطة ومن ثم تكون القيمة النهائية هي نفسها القيمة الأولية. على سبيل المثال، يمكنك تعيين الحركة لتبدأ من from قيمة وتنتهي بنفس القيمة مع to وكذلك باستثناء أنك تحدد ما كنت قد حددته ليكون قيمة نهائية كقيمة وسيطة بين from وto. في CSS، سنفعل ذلك باستخدام شيء مثل هذا: @keyframes example { from, to { left: 0; } 50% { left: 300px; } } المكافئ في SMIL هو استخدام خاصية values، والتي سنشرحها قريبًا. ومع ذلك، فإن الحل المذكور أعلاه قد يعمل أو لا يعمل وفقًا لنوع الحركة التي تتبعها، وما إذا كنت تقوم بسلسلة الحركة أم لا، أو تكرارها، أو القيام برسوم متحركة إضافية. إليكم رسمًا جميلًا بسيطًا من قِبل Miles Elam يستخدم فيه بعض أوقات البدء المتأخرة: تقييد وقت التكرار باستخدام repeatDur قد تصبح حركة العنصر المستمرة مزعجة أو غير متآلفة مع الاستخدام في حالة استمرار الحركة لفترة طويلة. لذلك، قد يكون من الجيد ضبط وقت التكرار على فترة زمنية معينة، وإيقاف التكرار بعد مرور بعض الوقت بالنسبة لبداية المستند. هذا هو المعروف باسم وقت العرض. يشير وقت العرض التقديمي إلى أن الموضع في الخط الزمني بالنسبة للمستند يبدأ من جزء معين. يُحدد باستخدام خاصية repeatDur. يشبه بناء الجملة الخاص بقيمة الساعة، ولكن بدلاً من أن يكون متصلاً بحدث حركة آخر أو حدث تفاعلي، فهو يتعلق ببداية المستند. على سبيل المثال، ستؤدي الشيفرة التالية إلى إيقاف تكرار الحركة لمدة دقيقة و 30 ثانية بعد بدء المستند: <animate xlink:href="#orange-circle" attributeName="cx" from="50" to="450" dur="2s" begin="0s" repeatCount="indefinite" repeatDur="01:30" fill="freeze" id="circ-anim" /> وهنا تستطيع مشاهدة العرض الحي: مزامنة الحركة على أساس عدد التكرارات الآن لنرجع خطوة إلى المزامنة بين موضوعين في التحريك. في الواقع، في SMIL يمكنك مزامنة الحركة بحيث تبدأ حركة إحداهما بناء على عدد تكرار حركة الأخرى. على سبيل المثال، يمكنك بدء رسم متحرك بعد تكرار رقم آخر، بإضافة أو طرح مقدار الوقت الذي قد ترغب في إضافته. المثال التالي يبدأ في تحريك للمستطيل في التكرار الثاني لحركة الدائرة: <animate xlink:href="#blue-rectangle" attributeName="x" from="50" to="425" dur="5s" begin="circ-anim.repeat(2)" fill="freeze" id="rect-anim" /> يوضح العرض التالي بداية حركة المستطيل بعد ثانيتين من ثاني تكرار لحركة الدائرة: يمكنك الاطلاع على نموذج لأساسيات SVG بإصدارها الثاني من إعداد David Eisenberg. التحكم في قيم الإطارات المفتاحية للحركة: keyTimes وvalues في CSS يمكننا تحديد القيم التي نريد أن تأخذها حركة الرسوم الخاصة بنا في إطار معين أثناء التحريك. على سبيل المثال، إذا كنت تحرك العنصر بإزاحة لليساربدلًا من تنشيطه من 0 إلى 300 مثلاً، يمكنك تحريكه بحيث يأخذ قيمًا معينة مثل هذا: @keyframes example { 0% { left: 0; } 50% { left: 320px; } 80% { left: 270px; } 100% { left: 300px; } } الإطارات 0٪ و 20٪ و 80٪ و 100٪ هي إطارات الحركة، والقيم الموجودة في كل إطار تحدد قيمته. التأثير الموصوف أعلاه هو أحد العناصر التي ترتد عن الحائط، ثم تعود إلى الموضع النهائي. في SMIL، يمكنك التحكم في القيم لكل إطار بطريقة مماثلة، لكن بناء الشيفرة مختلف تمامًا. لتحديد إطارات مفتاحية، يمكنك استخدام خاصية keyTimes ثم لتحديد قيمة الخاصية المتحركة لكل إطار، يمكنك استخدام خاصية values. اصطلاحات التسمية في SMIL مريحة للغاية. إذا أردنا العودة إلى الدائرة المتحركة التي رافقتنا في الأمثلة السابقة، واستخدمنا قيمًا مماثلة لتلك الموجودة في إطارات CSS الأساسية أعلاه، فإن الشيفرة سيبدو كما يلي: <animate xlink:href="#orange-circle" attributeName="cx" from="50" to="450" dur="2s" begin="click" values="50; 490; 350; 450" keyTimes="0; 0.5; 0.8; 1" fill="freeze" id="circ-anim" /> إذن ماذا فعلنا هناك؟ أول ما يجب ملاحظته هنا هو تحديد أوقات الإطار الرئيسي والقيم الوسيطة كقوائم. خاصية keyTimes هي قائمة مفصولة بفواصل منقوطة لقيم الوقت المستخدمة للتحكم في سرعة الحركة. في كل مرة في القائمة يتوافق مع قيمة في قائمة خاصية values، ويحدد متى تُستخدم القيمة في وظيفة التحريك. تُحدد كل قيمة زمنية في قائمة keyTimes كقيمة نقطة عائمة بين 0 و 1 (ضمنًا)، مما يمثل إزاحة متناسبة في المدة البسيطة لعنصر الحركة. لذا تشبه أوقات المفاتيح تلك الموجودة في CSS، إلا أنه بدلًا من تحديدها كنسب مئوية، فإنك تحددها ككسر. ما يلي هو العرض الحي للشيفرة أعلاه. انقر على الدائرة لبدء الحركة. لاحظ أنه إذا استخدمت قائمةvalues، فإن الحركة ستطبق القيم بالترتيب على مدار فترة الحركة. إذا حددت قائمة values، فسيتم تجاهل أي من الخاصيات from وto وby. في هذه المرحلة، تجدر الإشارة أيضًا إلى أنه يمكنك استخدام خاصية values بدون خاصية keyTimes - تنتشر القيم تلقائيًا بالتساوي خلال الوقت لكل قيمة calcMode بخلاف paced (راجع القسم التالي). التحكم في سرعة الحركة باستخدام التخفيف المخصص: calcMode و keySplines سنتطرق إلى موازنة CSS-SMIL مرة أخرى لأن بناء SMIL ومفاهيمه سيكون أسهل بكثير لفهم ما إذا كنت ستعتاد بالفعل على التحريك بواسطة CSS. في CSS، يمكنك اختيار تغيير سرعة الحركة الافتراضية الموحدة وتحديد وظيفة تخفيف مخصصة تتحكم في الحركة، باستخدام خاصية animation-timing-function. يمكن أن تكون وظيفة التوقيت واحدة من الكلمات المفتاحية المحددة مسبقًا، أو وظيفة مكعب cubic bezier. يمكن إنشاء ذلك باستخدام أداة مثل هذه المعدة بواسطة Lea Verou. في SMIL، تُحدد سرعة الحركة باستخدام خاصية calcMode. سرعة الحركة الافتراضية هي linear لجميع عناصر الحركة باستثناء animateMotion (سنصل إليها لاحقًا في المقالة). بالإضافة إلى قيمة linear، يمكنك تعيين القيمة إلى: discrete أوpaced أوspline. discrete: تحدد أن وظيفة الحركة ستقفز من قيمة إلى أخرى دون أي تقاطع. هذا مشابه للدالة steps()‎ في CSS. paced: يشبه linear، إلا أنه سيتجاهل أي أوقات تقدم وسطية تحددها keyTimes. ويحسب المسافة بين القيم اللاحقة ويقسم الوقت وفقًا لذلك. إذا كانت قيمك كلها بترتيب خطي linear، فلن تلاحظ الفرق. ولكن إذا كانت ذهابًا وإيابًا، أو إذا كانت ألوانًا (والتي يعامل معها كقيم متجه ثلاثي الأبعاد)، فسترى بالتأكيد القيم الوسيطة. فيما يلي عرض حي من Amelia Bellamy-Royds، يُظهر الفرق بين قيم calcMode الثلاث المذكورة حتى الآن: spline: وهي القيمة الرابعة المقبولة بواسطة calcMode. يتشابك من قيمة واحدة في قائمة values إلى القيمة التالية وفقًا لوظيفة الوقت المحددة بواسطة cubic Bezier spline. تعرف نقاط الشريحة في خاصية keyTimes، وتحددد نقاط التحكم لكل فاصل زمني في خاصية keySplines. ربما لاحظت الخاصية HTML الجديدة في الجملة الأخيرة: خاصية keySplines. لذا، ماذا تفعل خاصية keySplines؟ مرة أخرى، إلى ما يعادلها في CSS. في CSS، يمكنك تحديد سرعة الحركة داخل كل إطار رئيسي، بدلاً من تحديد سرعة حركة واحدة للحركة بأكملها. يمنحك هذا تحكمًا أفضل في كيفية متابعة كل حركة للإطار الرئيسي. مثال باستخدام هذه الميزة هو إنشاء تأثير ارتداد الكرة. قد تبدو الإطارات المفتاحية لذلك كما يلي: @keyframes bounce { 0% { top: 0; animation-timing-function: ease-in; } 15% { top: 200px; animation-timing-function: ease-out; } 30% { top: 70px; animation-timing-function: ease-in; } 45% { top: 200px; animation-timing-function: ease-out; } 60% { top: 120px; animation-timing-function: ease-in; } 75% { top: 200px; animation-timing-function: ease-out; } 90% { top: 170px; animation-timing-function: ease-in; } 100% { top: 200px; animation-timing-function: ease-out; } } بدلاً من تسهيل الكلمات المفتاحية، كان بإمكاننا استخدام الدالة ()cubic-bezier ذات الصلة: ease-in = cubic-bezier(0.47, 0, 0.745, 0.715) ease-out = cubic-bezier(0.39, 0.575, 0.565, 1) لنبدأ بتحديد الأوقات الرئيسية وقائمة القيم للدائرة البرتقالية لتخضع لنفس تأثير الارتداد: <animate xlink:href="#orange-circle" attributeName="cy" from="50" to="250" dur="3s" begin="click" values="50; 250; 120;250; 170; 250; 210; 250" keyTimes="0; 0.15; 0.3; 0.45; 0.6; 0.75; 0.9; 1" fill="freeze" id="circ-anim" /> ستبدأ الحركة عند النقر، وستتوقف بمجرد وصولها إلى القيمة النهائية. بعد ذلك، من أجل تحديد وتيرة كل إطار رئيسي، سنضيف خاصية keySplines. تأخذ خاصية keySplines مجموعة من نقاط التحكم bezier المرتبطة بقائمة keyTimes، وتحديد وظيفة bezier المكعبة التي تتحكم في سرعة الفاصل الزمني. قيمة الخاصية HTML هي قائمة مفصولة بفواصل منقوطة لوصف نقطة التحكم. كل وصف لنقطة التحكم عبارة عن مجموعة من أربع قيم: y1 x1 x2 y2، تصف نقاط التحكم bezier لشريحة وقت واحدة. يجب أن تكون جميع القيم في النطاق من 0 إلى 1، وتستبعد الخاصية HTML ما لم تُعين calcMode على شكل spline. بدلاً من أخذ دوال cubic-bezier كقيم، تأخذ keySplines إحداثيات نقطتي التحكم المستخدمة لرسم المنحنى. يمكن رؤية نقاط التحكم في لقطة الشاشة التالية المأخوذة من أداة Lea. تعرض لقطة الشاشة أيضًا إحداثيات كل نقطة، كل لون بنفس لون النقطة نفسها. بالنسبة لخاصية keySplines، هذه هي القيم التي سنستخدمها لتحديد سرعة الحركة الموجودة في keyframe. يسمح SMIL بفصل هذه القيم إما بفواصل بمسافة بيضاء اختيارية أو بمسافة بيضاء فقط. قيم keyTimes التي تحدد الجزء المرتبط هي "نقاط الربط" bezier، وقيم keySplines هي نقاط التحكم. وبالتالي، يجب أن يكون هناك مجموعة واحدة أقل من نقاط التحكم من keyTimes. إذا عدنا إلى مثال الكرة المرتدة، تُعرض إحداثيات نقطة التحكم للدالتين ease-in و ease-out كما هو موضح في الصور التالية: لترجمة ذلك إلى عنصر متحرك في SVG، نحصل على الشيفرة التالي: <animate xlink:href="#orange-circle" attributeName="cy" from="50" to="250" dur="3s" begin="click" values="50; 250; 120;250; 170; 250; 210; 250" keyTimes="0; 0.15; 0.3; 0.45; 0.6; 0.75; 0.9; 1" keySplines=".42 0 1 1; 0 0 .59 1; .42 0 1 1; 0 0 .59 1; .42 0 1 1; 0 0 .59 1; .42 0 1 1; 0 0 .59 1;" fill="freeze" id="circ-anim"/> وهنا تتابع العرض الحي: إذا كنت ترغب فقط في تحديد دوال التسارع (easing function) بأكملها دون أي قيم وسيطة، فلا يزال يتعين عليك تحديد الإطارات المفتاحية باستخدام خاصية keyTimes، ولكن عليك فقط تحديد إطارات المفاتيح للبداية والنهاية، وهي1 ؛ 0، وليس القيم المتوسطة values. الحركات المضافة والتراكمية: addictive وaccumulate في بعض الأحيان، من المفيد تحديد رسم متحرك يبدأ من حيث انتهت الحركة السابقة؛ أو آخر يستخدم المجموع التراكمي للحركات السابقة كقيمة للمتابعة. لذلك، يحتوي SVG على خاصيتين مناسبتين: addictive وaccumulate. افترض أن لديك عنصرًا تريد أن "يزداد" عرضه، أو خطًا تريد زيادة طوله، أو عنصرًا تريد نقله خطوة بخطوة من موضع إلى آخر، عبر خطوات منفصلة. هذه الميزة مفيدة بشكل خاص للحركة المتكررة. تمامًا مثل أي حركة أخرى، ستحدد قيم from وto. ومع ذلك، عند تعيين additive إلىsum، ستكون قيمتهما متناسبة مع القيمة الأصلية للخاصية HTML المتحركة. لذا، بالعودة إلى دائرتنا، يكون الموضع الأولي لـ cx هو 50. عندما تقوم بتعيين from = "0"‎ وto = "100"‎، فإن الصفر إذا كان في الواقع هو 50 الأصلي، و 100 هو في الواقع 50 + 100؛ بمعنى آخر، من الناحية العملية يشبه from = "50" to = "150"‎. من خلال القيام بذلك، نحصل على النتيجة التالية: هذا هو كل ما تفعله خاصية additive. إنه تحدد فقط ما إذا كان يجب أن تكون القيم from وto متناسبة مع القيمة الحالية أم لا. تأخذ الخاصية HTML واحدة من قيمتين فقط: sum وreplace. الأخير هو القيمة الافتراضية، وهذا يعني بشكل أساسي أن القيم from وtoسوف تحل محل القيم الحالية /الأصلية، والتي قد تؤدي في النهاية إلى قفزة غريبة قبل بدء الحركة. (حاول استبدال sum بـreplace في المثال أعلاه للحصول على مقارنة أفضل). ومع ذلك، ماذا لو أردنا إضافة القيم بحيث يبدأ التكرار الثاني من قيمة نهاية القيمة السابقة؟ هذا هو المكان الذي تأتي فيه خاصية accumulate. تتحكم خاصية accumulate فيما إذا كانت الحركة تراكمية أم لا. القيمة الافتراضية هي none، مما يعني أنه عند تكرار الحركة على سبيل المثال، ستبدأ من البداية. ومع ذلك، يمكنك تعيينها علىsum، والتي تحدد أن كل إعادة للتكرار بعد الأول يبني على القيمة الأخيرة للتكرار السابق. لذلك، إذا أردنا العودة إلى الحركة السابقة وتحديد accumulate = "sum"‎، فسنحصل على النتيجة المفضلة التالية: لاحظ أنه يتم تجاهل خاصية accumulate إذا كانت قيمة الخاصية HTML الهدف لا تدعم الإضافة، أو إذا كان العنصر المتحرك لا يتكرر. سيتم تجاهله أيضًا إذا عُينت وظيفة الحركة مع خاصية to فقط. تحديد نهاية الحركة باستخدام end كما أنه بإمكانك تحديد بداية حركة الرسوم فبإمكانك أيضًا تحديد نهايتها باستخدام خاصية end. على سبيل المثال، يمكنك تعيين حركة عنصر ما لتتكرر بشكل دائم ومن ثم إيقاف الحركة عند بداية حركة عنصر آخر. تأخذ خاصية end قيم شبيهة للقيم التي تأخذها begin. بإمكانك تحديد قيم مطلقة أو نسبية للوقت أو تطبيق إزاحة أو تكرار أو غيرها. فمثلًا في العرض الحي التالي تتحرك الدائرة ذات اللون البرتقالي ببطء في دورة تستمر 30 ثانية بالاتجاه الآخر لمسطح العمل. الدائرة ذات اللون الأخضر ستتحرك فقط عند النقر عليها. حركة الدائرة البرتقالية ستنتهي عند بدء حركة الدائرة الخضراء. انقر على الدائرة الخضراء وانظر كيف ستتوقف حركة الدائرة البرتقالية: يمكن تحقيق نفس التزامن للحركة عند تطبيق حركتين على نفس العنصر. على سبيل المثال، افترض تعيين حركة تغيير لون عنصر ما من قيمة لأخرى بشكل لانهائي. بعدها عند النقر على العنصر فإنه يتحرك للناحية الأخرى من مسطح العمل. والآن أوقف حركة تغيير اللون عند النقر على العنصر ومن بعدها تتوقف الحركة كليًا. تعيين فترات الحركة باستخدام قيم كلًا من begin وend في الواقع، تقبل كل من الخاصية begin وend قائمة القيم شبه المفصولة. ستتوافق كل قيمة في خاصية begin مع قيمة في خاصية end، وبالتالي تتشكل فواصل متحركة نشطة وغير نشطة. يمكنك أن تفكر في هذا على أنه يشبه سيارة متحركة، حيث تكون إطارات السيارة نشطة ومن ثم غير نشطة لفترات زمنية، اعتمادًا على ما إذا كانت السيارة تتحرك أم لا. يمكنك أيضًا إنشاء تأثير سيارة متحركة من خلال تطبيق الحركة على السيارة: أحدها يترجم السيارة أو يحركها على طول مسار يمثل أيضًا حركة مضافة وتراكمية، والأخرى تدور إطارات السيارة في فواصل يمكن مزامنتها مع عملية التحويل. مثال يوضح أوقات البدء والانتهاء المتعددة (أي الفواصل الزمنية) هو العرض الحي التالي، حيث يدور المستطيل استنادًا إلى الفواصل الزمنية المحددة، ويتغير من نشط إلى غير نشط وفقًا لذلك. (أعد تشغيل العرض الحي إذا فاتتك الحركة). لاحظ أنه في المثال أعلاه، استخدمت عنصر<animateTransform> لتدوير المستطيل حول مركزه. سنتحدث عن هذا العنصر بمزيد من التفصيل في القسم التالي أدناه. لاحظ أيضًا أنه، حتى إذا قمت بتعيين تكرار repeatCount بشكل غير نهائي indefinite، سيتجاوز من خلال قيم end ولن يتكرر بتلك الصورة النهائية. تقييد المدة النشطة لعنصر باستخدام min وmax مثلما يمكنك تقييد وقت تكرار الحركة، يمكنك أيضًا تقييد المدة النشطة الخاصة بها. تحدد خاصيات min وmax الحد الأدنى والحد الأقصى لقيمة المدة النشطة على التوالي. حيث أنها توفر لنا وسيلة للسيطرة على الحد السفلي والعلوي من فترة العنصر النشط. تأخذ كلا الخاصيتين قيمة الساعة كقيمة. بالنسبة لـ min، يحدد طول الحد الأدنى لقيمة المدة النشطة، ويقاس بالوقت الفعلي للعنصر. يجب أن تكون القيمة أكبر من أو تساوي 0، وهي القيمة الافتراضية ولا تقيد المدة النشطة على الإطلاق. بالنسبة إلىmax، تحدد قيمة الساعة طول الحد الأقصى لقيمة المدة النشطة، وتُقاس في وقت العنصر النشط. يجب أن تكون القيمة أكبر من 0. القيمة الافتراضية لـ max هي indefinite. وهذا لا يقيد المدة النشطة على الإطلاق. إذا حددت كل من الخاصيتين min وmax، فيجب أن تكون قيمة max أكبر من أو تساوي قيمة min. وإلا فسيتم تجاهل كلا الخاصيتين. ولكن ما الذي يحدد المدة النشطة لعنصر ما؟ ذكرنا مدة التكرار من قبل، بالإضافة إلى "المدة البسيطة"، وهي مدة الحركة دون أي تكرار (محدد باستخدام dur)، فكيف تعمل كل هذه الأشياء معًا؟ من الذي يتجاوز ماذا؟ ثم ماذا عن الخاصية end التي سيتم تجاوزها ومن ثم ببساطة تنتهي الحركة؟ الطريقة التي يحدث بها ذلك هي أن المتصفح سيقوم أولاً بحساب المدة النشطة بناءً على قيم dur و repeatCount وrepeatDur وend. بعد ذلك، تعمل المدة المحسوبة مقابل قيم min وmax المحددة. إذا كانت النتيجة ضمن الحدود، تكون قيمة المدة المحسوبة الأولى صحيحة ولن تتغير. وإلا قد تحدث حالتان: إذا كانت المدة الزمنية المحسوبة الأولى أكبر من قيمة max، تعرف المدة النشطة للعنصر بأنها تساوي قيمة max. إذا كانت المدة المحسوبة الأولى أقل من قيمة min، تصبح المدة النشطة للعنصر مساوية للقيمة min ويكون سلوك العنصر كما يلي: إذا كانت مدة التكرار (أو المدة البسيطة إذا لم يتكرر العنصر) للعنصر أكبر من min، يُشغل العنصر بشكل طبيعي لمدة نشطة (min مقيدة). بخلاف ذلك، يعمل العنصر بشكل طبيعي خلال مدة التكرار (أو المدة البسيطة إذا لم يتكرر العنصر) ثم يُجمد أو يختفي عتمادًا على قيمة خاصية fill. هذا يتركنا مع تساؤل عن طريقة قيام المتصفح بحساب المدة النشطة فعليًا. من أجل الإيجاز، لن نخوض في التفاصيل هنا. ولكن هناك جدول شامل للغاية في المواصفات التي تعرض التكوينات المختلفة لخصائص dur، وrepeatCount، وrepeatDor وend، ثم توضح المدة الفعلية التي ستستند إليها كل مجموعة. يمكنك التحقق من الجدول وقراءة المزيد حول هذا الموضوع في هذا القسم من المواصفات أخيرًا، إذا حدد عنصر للبدء في الحركة قبل العنصر الآخر (على سبيل المثال مع قيمة إزاحة سالبة بسيطة)، يُقاس الحد الأدنى للمدة من وقت البدء المحسوب وليس بداية الملاحظة. هذا يعني أن قيمة min قد لا يكون لها أي تأثير ملحوظ. أمثلة على <animate>: تحوير المسارات إحدى الخاصيات التي يمكن تحريكها في SMIL (ولكن ليس في CSS)هي الخاصية d (اختصار لـ data) الخاصة بـ SVG <path>‎. تحتوي الخاصية d على البيانات التي تحدد الخطوط العريضة للشكل الذي ترسمه. تتكون بيانات المسار من مجموعة من الأوامر والإحداثيات التي تخبر المتصفح عن مكان وكيفية رسم النقاط والأقواس والخطوط التي تشكل المسار النهائي. يسمح لنا تنشيط هذه الخاصية HTML بتحويل مسارات SVG وإنشاء تأثيرات ربط الأشكال. ولكن لكي تتمكن من تحوير الأشكال، يجب أن يكون لأشكال المسار البداية والنهاية وأي مسار وسطي نفس عدد الرؤوس /النقاط بالضبط، ويجب أن تظهر بنفس الترتيب. إذا لم يتطابق عدد النقاط، فلن تعمل الحركة. والسبب في ذلك هو أن تغيير الشكل يحدث فعليًا عن طريق تحريك الرؤوس، وتحريف مواقعها، لذلك إذا كانت نقطة واحدة مفقودة أو غير متطابقة، فلن تُقرب المسارات. لتحريك مسارSVG، يمكنك تحديد attributeName لتكون d، ثم اضبط قيم from وto التي تحدد أشكال البداية والنهاية، ويمكنك استخدام خاصية values لتحديد أي قيم وسيطة تريد أن يمر الشكل فيما بينها. من أجل الإيجاز، لن نخوض في تفاصيل كيفية القيام بذلك هنا. بدلًا من ذلك، يمكنك قراءة هذا المقال الممتاز من تأليف Noah Blon، إذ يشرح كيف قام بتحوير الأشكال لإنشاء حركة التحميل باستخدام <animate>. بإمكانك الاطلاع على العرض الحي للمقال: وهنا مثال آخر لتحوير الأشكال من إعداد Felix Hornoiu: يمكنك حتى تحوير قيم المسار المستخدم كـ clipping mask مثال على ذلك من إعداد Heather Buchel: الحركة على طول المسارات الافتراضية: العنصر <animateMotion> يعد عنصر<animateMotion> عنصر الحركة المفضل في SMIL. يمكنك استخدامه لنقل عنصر على طول المسار. عن طريق تحديد مسار الحركة باستخدام إحدى الطريقتين اللتين سنتطرق لهما بعد ذلك، ثم لإعداد العنصر بحيث يتحرك على طول هذا المسار. يقبل عنصر<animateMotion> نفس الخاصيات المذكورة سابقًا، بالإضافة إلى ثلاث خاصيات أخرى: keyPoints، و rotate، وpath. أيضًا، هناك اختلاف واحد فيما يتعلق بخاصية calcMode، حيث تكون القيمة الافتراضية لـ <animateMotion> هي paced، وليست linear. تحديد مسار الحركة باستخدام خاصية path تستخدم خاصية path لتحديد مسار الحركة. حيث يُعبر عنها بنفس التنسيق وتُفسر بنفس طريقة الخاصية d في العنصر path. يتمثل تأثير الحركة لمسار الحركة في إضافة مصفوفة تحويل تكميلية إلى مصفوفة التحويل الحالية للكائن المشار إليه والتي تتسبب في ترجمة على طول المحورين x و y لنظام إحداثيات المستخدم الحالي بواسطة قيم X و Y المحسوبة على زمن. بمعنى آخر، يُحسب المسار المحدد بالنسبة إلى الموضع الحالي للعنصر، باستخدام بيانات المسار لتحويل العنصر إلى موضع المسار. بالعودة إلى دائرتنا، سنقوم بتحريكها على طريق يشبه ما يلي: بإمكانك تطبيق تلك الحركة على الدائرة باستخدام الشيفرة التالي: <animateMotion xlink:href="#circle" dur="1s" begin="click" fill="freeze" path="M0,0c3.2-3.4,18.4-0.6,23.4-0.6c5.7,0.1,10.8,0.9,16.3,2.3 c13.5,3.5,26.1,9.6,38.5,16.2c12.3,6.5,21.3,16.8,31.9,25.4c10.8,8.7,21,18.3,31.7,26.9c9.3,7.4,20.9,11.5,31.4,16.7 c13.7,6.8,26.8,9.7,41.8,9c21.4-1,40.8-3.7,61.3-10.4c10.9-3.5,18.9-11.3,28.5-17.8c5.4-3.7,10.4-6.7,14.8-11.5 c1.9-2.1,3.7-5.5,6.5-6.5" /> هناك أمر واحد ركزنا عليه هنا: الإحداثيات في بيانات المسار. يبدأ المسار عن طريق تحريك (M) إلى النقطة مع الإحداثيات (0، 0)، قبل أن يبدأ في رسم منحنى (c) إلى نقطة أخرى. من المهم أن نلاحظ أن النقطة (0، 0) هي في الواقع موضع الدائرة، بغض النظر عن مكانها - ليست الزاوية العليا اليسرى من نظام الإحداثيات. كما ذكرنا أعلاه، فإن الإحداثيات في خاصية path تتعلق بالموضع الحالي للعنصر! نتيجة الشيفرة أعلاه هي: إذا كنت ترغب في تحديد المسار الذي يبدأ من نقطة أخرى غير (0، 0)، ستقفز الدائرة فجأة بالمقدار المحدد في نقطة البداية. على سبيل المثال، افترض أنك رسمت مسارًا في Illustrator ثم قمت بتصدير بيانات المسار لاستخدامها كمسار حركة (هذا ما فعلته في المرة الأولى التي قمت فيها بهذا)؛ قد يبدو المسار المُصدّر كالتالي: <path fill="none" stroke="#000000" stroke-miterlimit="10" d="M100.4,102.2c3.2-3.4,18.4-0.6,23.4-0.6c5.7,0.1,10.8,0.9,16.3,2.3 c13.5,3.5,26.1,9.6,38.5,16.2c12.3,6.5,21.3,16.8,31.9,25.4c10.8,8.7,21,18.3,31.7,26.9c9.3,7.4,20.9,11.5,31.4,16.7 c13.7,6.8,26.8,9.7,41.8,9c21.4-1,40.8-3.7,61.3-10.4c10.9-3.5,18.9-11.3,28.5-17.8c5.4-3.7,10.4-6.7,14.8-11.5 c1.9-2.1,3.7-5.5,6.5-6.5"/> نقطة بداية المسار في هذه الحالة هي (100.4، 102.2). إذا أردنا استخدام هذه البيانات كمسار للحركة، ستقفز الدائرة بمقدار 100 وحدة تقريبًا إلى اليمين و102 وحدة تقريبًا لأسفل، ثم تبدأ الحركة على طول المسار بالنسبة للموضع الجديد. لذلك، تأكد من وضع ذلك في الاعتبار عند إعداد مسار الحركة للحركة الخاصة بك. في حالة استخدامها، تحدد الخاصيات from وby وto وvalues شكلًا على مساحة العمل الحالية التي تمثل مسار الحركة. تحديد مسار الحركة باستخدام عنصر <mpath> هناك أيضًا طريقة أخرى يمكنك من خلالها تحديد مسار الحركة. بدلًا من استخدام خاصية HTML المسار النسبي path، يمكنك الرجوع إلى مسار خارجي باستخدام عنصر <mpath> التابع لعنصر <animateMotion>، والذي يشير إلى المسار الخارجي باستخدام الخاصية xlink: href. <animateMotion xlink:href="#circle" dur="1s" begin="click" fill="freeze"> <mpath xlink:href="#motionPath" /> </animateMotion> يمكن تحديد مسار الحركة <path> في أي مكان في المستند؛ يمكن تعريفه حرفيًا فقط داخل عنصر <defs> ولا يُعرض على سطح العمل على الإطلاق. في المثال التالي، المسار ظاهر وواضح لأنه في معظم الحالات قد ترغب في إظهار المسار الذي يتحرك فيه العنصر. لاحظ أنه، وفقا للمواصفات: مرة أخرى، "يتضاعف" موضع الدائرة أو "يتحول" بواسطة الإحداثيات في بيانات المسار. في المثال التالي، لدينا مسار في منتصف اللوحة. تُوضع الدائرة في بداية المسار. ومع ذلك، عند تطبيق مسار الحركة، لا تبدأ الدائرة حركتها من موضعها الحالي. تفقد العرض الحي للحصول على شرح أفضل. انقر على الدائرة لتحريكها. انظر كيف تتبع الدائرة نفس شكل المسار، ولكن على موضع مختلف؟ هذا يرجع إلى حقيقة أن موضع الدائرة يُحول بواسطة قيم بيانات المسار. تتمثل إحدى طرق الالتفاف حول ذلك في البدء بوضع الدائرة في (0، 0)، بحيث عند استخدام بيانات المسار لتحويلها، ستبدأ وتستمر كما هو متوقع. هناك طريقة أخرى تتمثل في تطبيق تحويل "يعيد تعيين" إحداثيات الدائرة بحيث تُحسب على الصفر قبل تطبيق المسار. فيما يلي نسخة معدلة من العرض الحي أعلاه، وذلك باستخدام مسار مغلق وتكرار الحركة بشكل غير نهائي. تجاوز القواعد لـ <animateMotion> نظرًا لوجود أكثر من طريقة واحدة لفعل نفس الشيء مع animateMotion، فمن المنطقي أن يكون هناك قواعد تجاوز لتحديد القيم التي تتجاوز القيم الأخرى. قواعد التجاوز لـ animateMotion كالتالي: فيما يتعلق بتعريف مسار الحركة، يتجاوز عنصر mpath خاصية path، التي تتجاوز values، والتي بدورها تتجاوز from وby وto. فيما يتعلق بتحديد النقاط التي تتوافق مع خاصيات keyTimes، فإن مسارkeyPoints يتخطى path، والذي يتجاوز values، والذي بدوره يتخطى from وby وto. تحديد اتجاه عنصر على طول مسار الحركة باستخدام rotate في المثال السابق، حدث أن العنصر الذي كنا نتحرك فيه على طول المسار هو دائرة. ولكن ماذا لو كنا نحرك عنصرًا له اتجاه معين، على سبيل المثال، رمز سيارة؟ رمز السيارة في المثال التالي من إعداد Freepik. في هذا المثال، استبدلت الدائرة بمعرف "السيارة"، الذي يحتوي على العنصر الذي يُكون المجموعة. بعد ذلك، من أجل تجنب مشكلة الحركة على طول المسار المذكور أعلاه، ثم تطبيق تحويل على السيارة بحيث يترجمها بمقدار معين، بحيث ينتهي الموضع الأولي عند (0، 0). القيم الموجودة داخل التحويلات هي في الواقع إحداثيات النقطة التي يبدأ فيها رسم المسار الأول للسيارة (مباشرة بعد أمر النقل M). ثم تبدأ السيارة تتحرك على طول مسار الحركة. لكن… هكذا تبدو الحركة: اتجاه السيارة ثابت، ولا يتغير لمطابقة مسار الحركة. لتغيير ذلك، سنستخدم خاصية rotate. تأخذ خاصية rotate إحدى القيم الثلاث: auto: تشير إلى أن الكائن يدور بمرور الوقت بزاوية الاتجاه (أي متجه الظل الاتجاهي) لمسار الحركة. auto-reverse: تشير إلى أن الكائن يدور بمرور الوقت بزاوية الاتجاه (أي متجه الظل الاتجاهي) لمسار الحركة بإضافة 180 درجة. رقم: يشير إلى أن العنصر الهدف يحتوي على تحويل دوران ثابت مطبق عليه، حيث تكون زاوية الدوران هي العدد المحدد من الدرجات. لإصلاح اتجاه السيارة في المثال أعلاه، سنبدأ بتعيين قيمة الدوران على auto. سننتهي بالنتيجة التالية: أما في حال أردت تدوير السيارة خارج المسار، قيمة auto-revesre ستتكفل بذلك. يبدو هذا أفضل، لكن لا تزال لدينا مشكلة واحدة وهي أن السيارة تبدو وكأنها تتحرك للخلف على طول المسار! لتغيير ذلك، نحتاج إلى قلب السيارة على طول محورها y. يمكن القيام بذلك عن طريق تحجيمه بعامل "-1" على طول هذا المحور. لذلك، إذا طبقنا التحويل على g باستخدام معرف السيارة car، فستتحرك السيارة للأمام كما هو متوقع. سيرتبط التحجيم مع الترجمة السابقة التي طبقناها سابقًا. <g id="car" transform="scale (-1, 1) translate(-234.4, -182.8)"> وبالتالي، ستكون النتيجة كما هي موضحة في العرض: التحكم في مسافة الحركة على طول مسار الحركة باستخدام keyPoints توفر خاصية keyPoints القدرة على تحديد التقدم على طول مسار الحركة لكل من قيم keyTimes المحددة. إذا حددت ذلك، فإن keyPoints تؤدي إلى تطبيق keyTimes على القيم الموجودة في keyPoints بدلاً من النقاط المحددة في خاصية values أو النقاط الموجودة في خاصية path. تأخذ keyPoints قائمة مفصولة بفواصل منقوطة لقيم الفاصلة العائمة بين 0 و 1 وتشير إلى مدى طول مسار الحركة التي يجب أن يتحرك فيها الكائن في الوقت المحدد بواسطة قيمة keyTimes المقابلة. تُحدد الحسابات عن بعد من خلال خوارزميات المتصفح. تقابل كل قيمة تقدم في القائمة قيمة في قائمة خاصية keyTimes. عند تحديد قائمة نقاط KeyPoints، يجب أن يكون هناك بالضبط العديد من القيم في قائمة keyPoints كما هو الحال في قائمة keyTimes. أحد الأشياء المهمة التي يجب ملاحظتها هنا هو ضبط قيمة calcMode على linear لكي تعمل KeyPoints. يبدو أيضًا أنه يجب أن يعمل بشكل منطقي مع الحركة، إذا كانت النقاط الرئيسية تتحرك ذهابًا وإيابًا، لكنها لا تعمل. فيما يلي مثال من إعداد Amelia Bellamy-Royds (تفقد صفحتها الشخصية) توضح فيه استخدام keyPoints لتقليد السلوك فتبدأ الحركة على مسار من إزاحة محددة مسبقًا، لأننا لا نملك هذه القدرة حاليًا بشكل افتراضي في SMIL. تحريك النص على طول مسار افتراضي يختلف نقل النص عبر مسار افتراضي عن نقل عناصر SVG الأخرى عبر المسارات. لتحريك النص، سيتعين عليك استخدام عنصر <animation>، وليس عنصر <animateMotion>. أولاً، لنبدأ بوضع النص على طول المسار. يمكن القيام بذلك عن طريق تداخل عنصر<textPath> داخل عنصر <text>. سيتحدد النص الذي سيوضع على طول مسار داخل عنصر<textPath>، وليس كتابع لعنصر<text>. ستقوم textPath بعد ذلك بالإشارة إلى المسار الفعلي المراد استخدامه، تمامًا كما فعلنا في الأمثلة السابقة. يمكن أيضًا تقديم المسار المشار إليه على مسطح العمل أو تعريفه داخل <defs>. تحقق من الشيفرة في العرض الحي التالي: لتحريك النص على طول هذا المسار، سنستخدم العنصر <animate> لتحريك خاصية startOffset. تمثل startOffset إزاحة النص على المسار. 0٪ هي بداية المسار؛ 100 ٪ تمثل نهايته. لذلك، على سبيل المثال، إذا ضبطت الإزاحة على 50٪، فسيبدأ النص في منتصف المسار. ومن هنا ستتضح الأمور للذهاب قدمًا. عن طريق تنشيط startOffset، سنقوم بإنشاء تأثير نقل النص على طول المسار. تحقق من الشيفرة في العرض الحي التالي. تحولات الحركة: عنصر <animateTransform> ينقل عنصر <animateTransform> خاصية HTML تحويل على عنصر مستهدف، مما يسمح للحركة بالتحكم في التحوير والتحجيم و/أو التدوير و/أو الربط. يستغرق نفس الخصائص المذكورة للعنصر <animation>، بالإضافة إلى خاصية HTML إضافية: type. تستخدم خاصية type لتحديد نوع التحويل الذي تُطبق الحركة عليه. وتأخذ أحد القيم الخمسة: translate وscale وrotate وskewX وskewY. تأخذ الخاصيات from وby وto قيم يعبّرعنها باستخدام تركيب الجملة نفسه المتاح لنوع التحويل المحدد: بالنسبة لـ"type="translate، يُعبر عن كل قيمة فردية كـ [<tx> [,<ty> بالنسبة لـ "type="scale، يُعبر عن كل قيمة فردية كـ [<sx> [,<sy> بالنسبة لـ "type="rotate، يُعبر عن كل قيمة فردية كـ[<rotate-angle> [<cx> <cy> بالنسبة لـ "type="skewX و"type="skewY، يُعبر عن كل قيمة فردية كـ <skew-angle> إذا لم تكن معتادًا على بناء جملة SVG لخاصية transform، ومن أجل إيجاز هذه المقالة، ولأن تفاصيل بناء الجملة وكيفية التعامل معها خارج نطاقها، بإمكانك قراءة مقال فهم أنظمة تنسيق SVG والتحولات (الجزء 2): خاصية HTML التحويل، قبل الانتقال إلى هذا الدليل. بالعودة إلى العرض الحي السابق، حيث قمنا بتدوير المستطيل الوردي باستخدام عنصر <animateTransform>. تبدو شيفرة الدوران كما يلي: <rect id="deepPink-rectangle" width="50" height="50" x="50" y="50" fill="deepPink" /> <animateTransform xlink:href="#deepPink-rectangle" attributeName="transform" attributeType="XML" type="rotate" from="0 75 75" to="360 75 75" dur="2s" begin="0s" repeatCount="indefinite" fill="freeze" /> تحدد خاصيات from وto زاوية الدوران (البداية والنهاية) ومركز الدوران. في كليهما، يبقى مركز الدوران كما هو بالطبع. إذا لم تُحدد المركز، فسيكون ذلك هو الركن العلوي الأيسر من سطح العمل SVG. العرض الحي للرمز أعلاه هو ما يلي: هنا مثال آخر ممتع لـ animateTransform من إعداد Gabriel: إن تنشيط عملية تحويل واحدة أمر بسيط، ومع ذلك، يمكن أن تصبح الأمور فوضوية ومعقدة حقًا عند تضمين تحويلات متعددة، خاصة لأن أحد تحويلات الحركة animateTransform يمكنه تجاوز الآخر، لذلك بدلاً من إضافة التأثيرات وتسلسلها، قد ينتهي بك الأمر على العكس تمامًا. هذا بالإضافة إلى طريقة تنسيق SVG للأنظمة والتحولات في الواقع (راجع المقالة المذكورة سابقًا حول الموضوع). الأمثلة واسعة، وخارج نطاق هذه المقالة. لتحويل SVGs، يوصى باستخدام تحويلات CSS. تعمل التطبيقات على جعل هذا الأخير يعمل بشكل مثالي مع SVG، لذلك قد لا تضطر أبدًا إلى استخدام SMIL لتنشيط التحويلات في SVG على الإطلاق. عنصر <set> يوفر عنصر set وسيلة بسيطة لتعيين قيمة الخاصية HTML لمدة محددة. يدعم جميع أنواع الخاصيات، بما في ذلك الأنواع التي لا يمكن تحريفها بشكل معقول، مثل قيم السلسلة والقيمة المنطقية. عنصر set غير مضاف ولا يُسمح بالخاصيات المضافة والإجمالية، وسيتم تجاهلها عند تحديدها. نظرًا لاستخدام <set> لتعيين عنصر إلى قيمة محددة في وقت معين، فإنه لا يقبل جميع الخاصيات المذكورة لعناصر التحريك السابقة. على سبيل المثال، لا يحتوي على خاصية from أو by، لأن القيمة التي تتغير لا تتغير تدريجيًا خلال الفترة الزمنية. بالنسبة لـ set، يمكنك تحديد العنصر الذي تستهدفه، واسم الخاصية HTML ونوعها، وقيمة to، ويمكن التحكم في توقيت الحركة: begin وdur وend وmin وmax وrestart وrepeatCount وrepeatDur وfill. فيما يلي مثال يضبط لون المستطيل الدوّار إلى اللون الأزرق عند النقر فوقه. يظل اللون أزرق لمدة 3 ثوانٍ، ثم يعود إلى اللون الأصلي. في كل مرة ينفر فوق المستطيل، تعمل حركة set، ويتغير اللون لمدة ثلاث ثوانٍ. العناصر وخاصيات HTML وخاصيات الكائنات التي يمكن تحريكها لا يمكن تحريك كل خاصيات SVG، ولا يمكن تحريك كل الخاصيات التي يمكن تحريكها باستخدام جميع عناصر التحريك. للحصول على قائمة كاملة بجميع الخاصيات المتحركة، وجدول يربط الخاصيات بالعناصر التي تحركها، يرجى الرجوع إلى هذا القسم من مواصفات SVG Animation. أخيرًا لدى SMIL الكثير من الإمكانيات، وبالكاد تعرض المقال لمعلومات سطحية جدًا ولم يتطرق إلا إلى الأساسيات والتقنيات الخاصة بكيفية عملها فيSVG. يمكن إنشاء الكثير من التأثيرات المؤثرة للغاية، خاصة تلك التي تنطوي على تحوير الأشكال وتحويلها. لتكن حدودك هي السماء؛ عليك أن تكمل أنت الآن فامض بشغف! ولا تنس مشاركة ما تصنعه مع الآخرين. شكرًا لقراءتك! ترجمة وبتصرف للمقال A Guide to SVG Animations (SMIL)‎ لصاحبته Sara Soueidan

ليست جميع المواقع الإلكترونية صالحةً لأن تستمر بالقوالب التي صممت عليها لوقتٍ طويلٍ جدًا، وهنا لابد من التفكير بشكلٍ أوسعٍ بخصوص ما الذي ينبغي عمله. سيتطرق المقال لشرح طريقة إدارة عملية إعادة التصميم للمواقع الإلكترونية القائمة بدءًا بالحديث عن الطرق الخاطئة التي تتبعها المؤسسات أثناء عملية إعادة تصميم المواقع الإلكترونية. لماذا تخطئ المؤسسات في إدارة عملية إعادة تصميم المواقع الإلكترونية القائمة عادةً ما تبدأ عملية إعادة تصميم المواقع الإلكترونية باستنتاجٍ شخصيٍ لفردٍ ضمن تلك المؤسسة بضرورة إعادة التصميم بغض النظر عن السبب. مع ذلك، نادرًا ما يعتمد هذا الاستنتاج على أي بياناتٍ محددة. عادةً ما يكون السبب وراء تلك الخطوة هو الشعور بأن التصميم قد أصبح قديمًا أو أن التكنولوجيا غير مناسبة للغرض. وذلك لأن المؤسسات ليس لديها أي فكرةٍ واضحةٍ عن مؤشرات الأداء الرئيسية لموقعها. وما يثير القلق أكثر أن قرار إعادة التصميم غالبًا ما يؤدي إلى التخلص من الموقع بأكمله والبدء من جديد. ويبدو أن هناك محاولةً صغيرةً لعزل المشكلة وحلها. بعد ذلك، يجتمع مختلف أصحاب المصلحة لتحديد ما يحتاجه الموقع الجديد من حيث الأداء الوظيفي. مرةً أخرى، نادرًا ما يعتمد أصحاب المصلحة على أساسٍ قويٍّ من البيانات أو تحليل احتياجات المستخدمين. إنهم يتخذون قرارهم بناءً على ملاحظاتهم و استنتاجاتهم. فقط بمجرد اتخاذ هذه القرارات، تجلب المؤسسة خبراء رقميين. غالبًا ما يكون ذلك في صورة تكليف من وكالة خارجية، ولكن يمكن أن يشمل أيضًا نقل الملخصات إلى فريق عملٍ داخليٍ يُعامل غالبًا على أنه ليس أكثر من قسم خدمات يُتوقع منه أن ينشئ الموقع. في كلا الحالتين، تُحدد مواصفات إعادة تصميم الموقع الحالي دون أي مدخلاتٍ من أولئك الذين يفهمون معظم الإمكانات والمحددات الرقمية. في هذه المرحلة، تُعطى عروض الأسعار وتُعيّن الجداول الزمنية مع مناقشاتٍ محدودةٍ فقط حول ما إذا كان المشروع ضروريًا أم أن أهدافه ونطاقه صحيح. بمجرد قبول السعر يبدأ العمل ويتمثل الخطر في نطاق الزحف كما وأن المواعيد النهائية غير قابلةٍ للتأجيل. لا يترك ذلك أي مجال في إعادة تصميم موقع ويب حالي للتعلم والتكيف أثناء مرحلة البناء. نعم، قد يتم إجراء بعض التعديلات الطفيفة على طول الطريق، ولكن مع قيود المواصفات والمواعيد الزمنية والميزانية المحددة، لن يحدث تغييرٌ حقيقيٌ كبير. مرةً أخرى يتم تجاهل تعليقات المستخدمين إلى حدٍ كبير. والنتيجة هي أن المنظمة ليس لديها وسيلةً لمعرفة ما إذا كان كل هذا الجهد والمال يستحق العناء حتى بعد إطلاق الموقع. عندها فقط سيعرفون ما إذا كان موقع الويب الجديد يعمل بشكلٍ أفضل من الموقع القديم، على افتراض أن لديهم أي مقاييس لقياس نجاحه. والأسوأ من ذلك أنه بمجرد إطلاق موقع الويب، فإن الأموال تجف، وينتقل الأشخاص، مما يعني أنه لا توجد موارد لإصلاح أي مشكلاتٍ رئيسيةٍ قد تطرأ. نعم، سيكون هناك بعض الصيانة البسيطة، لكن هذا كل شيء. كيف يمكن إذن تجنب هذه المشاكل؟ 10 خطوات لإعادة التصميم الناجح لموقع ويب موجود إن مفتاح الحل لإعادة التصميم الناجح لموقع ويب حالي هو إدراك أنه لا ينبغي تشغيل المشروعات الرقمية مثل المشروعات التقليدية. مع التكنولوجيا الرقمية، من السهل التعرف على ما يصلح وما لا يصلح، وكذلك التكيف بسرعةٍ مع ما نتعلمه. مع وضع ذلك في عين الاعتبار، إليك الخطوات العشر لاتباعها عند إعادة تصميم موقع ويب موجود. امتلك أهدافًا واضحة قبل أن تفكر في إعادة تصميم موقع ويب حالي، أنشئ رؤيةً واضحةً لما سيبدو عليه النجاح. بدون أهدافٍ واضحة، لن تتوفر لديك أي فكرةٍ عما إذا كنت بحاجةٍ لإجراء إعادة التصميم أو ما الذي يجب على الموقع الجديد تحقيقه. ستحتاج إلى جعل هذه الأهداف قابلةً للقياس حتى تتمكن من تقييم الموقع الحالي وإبلاغ الاختبارات أثناء تطوير الموقع الجديد. من الجيد التركيز على ثلاثة مجالاتٍ أساسية: مقاييس معدل التحويل. مقاييس المشاركة. مقاييس قابلية الاستخدام. بمجرد أن أتمكن من التعبير بوضوحٍ عن أهداف عمل موكلي من حيث المقاييس القابلة للقياس، أقوم بتحويل انتباهي عما يريده العمل إلى ما يحتاجه المستخدم. أجري بحث المستخدم الخاص بك لتشجيع الأشخاص على التفاعل مع موقعٍ ما فأنت بحاجةٍ إلى معرفتهم. ما هي التساؤلات التي تنتابهم، وما هي المهام التي يريدون إنهائها وكيف يودّون التفاعل مع موقع العميل. هذا يعني أنه من المهم أن تُجري عملية بحث المستخدم قبل أن تبدأ التفكير في مواصفات المشروع. ليس من المنطق أن تحدد المحتوى والوظائف قبل أن تتعرف على نوعية المستخدمين ممن هم بحاجتها. تحقق من الموقع الإلكتروني الموجود خذ مؤشرات الأداء الرئيسية وأبحاث المستخدم التي عملت عليها مع العميل واستخدمها لتقييم الموقع الحالي. بإمكانك أيضًأ أن تجري بعض اختبارات قابلية الاستخدام على موقع الويب أيضًا وتطلع في بعض الأحيان إلى المنافسة للحصول على إطارٍ مرجعي. القيام بذلك يوفر لك رؤيةً أكثر موضوعيةٍ لحالة الموقع، بدلًا من مجرد إلقاء عبء إعادة تصميمه على كاهل العميل. حتى لو كان من الواضح أن إعادة التصميم مطلوبة وواجبةً لا تزال هذه الخطوة مستحسنة. قد يكون العميل مخطئًأ، وحتى لو لم يكن الأمر كذلك، فإن تقييم موقع الويب الحالي سيُساعد في التأكد من حجم التصميم المطلوب إعادة النظر فيه. حدد ما الذي من الممكن الاحتفاظ به (إن وُجد) ليس من الحكيم أن ترجع إلى نقطة الصفر، بإمكانك الاستفادة من تصميم الموقع الحالي وتجديده. فإذا كان محتوى الموقع جيدًا فاحفظه، وإذا كانت منصة التكنولوجيا تقوم بمهمتها فلا تغيرها لمجرد أن المطورين يرغبون بلعبة جديدة لامعة. الأهم من ذلك كله ألا تبدأ بتصميم جديد كليًا إذا كان بإمكانك تطوير التصميم الحالي. هذا ليس مجرد اعتبارٍ نقدي. هذا أيضًا لأن المستخدمين الحاليين لا يستجيبون جيدًا عند إجراء التغييرات. يمكنك كسر النموذج العقلي للموقع وبالتالي زيادة الحمل المعرفي. إذا كان ذلك ممكنًا فمن الأفضل تجنب ذلك. من المهم أيضًا التأكد من عدم وجود سببٍ تحتاجه لتغيير كل شيءٍ دفعةً واحدة. في بعض الأحيان يكون من السهل ترقية موقع الويب على مراحل. يجب أن تتخذ هذا الحكم على أساس كل حالةٍ على حدة وهنا لا توجد قواعد صارمةٍ وسريعة. ابدأ بالمحتوى يبدو أن المحتوى هو الجزء الأكثر إهمالًا في أي إعادة تصميم لموقع ويب حالي. غالبًا ما يكون العملاء غير راغبين في دفع أموال لأحد المحترفين لإنشاء محتواهم، وغالبًا ما يكون هذا هو العنصر الأخير في إعادة تصميم موقع ويب موجود يعالجه العميل. يعد هذا الموقف تجاه المحتوى خطيرًا لأنه السبب الذي يجعل المستخدمين يزورون موقع الويب الخاص بك وليس بدافع التصميم أو التكنولوجيا. أيضًا من المستحيل إنشاء واجهة مستخدمٍ جذابة لموقع ويب دون فهم المحتوى الذي سيدعمه. لذلك ابدأ عملية إعادة تصميم موقع ويب موجود بالمحتوى وتأكد دائمًا من أن المحتوى يبدأ باحتياجات المستخدم وليس فقط ما ترغب الشركة في قوله عن نفسها. لا تفكر في التصميم إلى حين حصولك على المسودة الأولى لبعض المحتوى على الأقل، ستحتاج أيضًا إلى مخططٍ تفصيليٍ لجميع المحتويات التي تحتاج إلى إنشاء من أجل هيكلة بنية المعلومات. العمل على هيكلة المعلومات بمجرد فهم المحتوى الذي يحتاج إلى إنشاء، ابدأ في معالجة بنية المعلومات. غالبًا ما يحدث هذا قبل التصميم، لأنك ستعتمد على عملية إنشاء بنية المعلومات لإنشاء التسلسل الهرمي المرئي. من الممكن الاعتماد على تحليل المهام العليا وفرز البطاقات لإنشاء بنية المعلومات الخاصة بك. وهذا يضمن أن تتوافق مع النموذج العقلي للمستخدم ويعالج أسئلتهم. النموذج الأولي واختبار الواجهة قد لا تكون الاستكشافات الأولى في مرحلة إعادة التصميم للموقع الحالي أكثر من بضعة رسومات. ومع ذلك يمكن اختبارها لمعرفة ما إذا كان المستخدم يفهم الفرضية الأساسية للموقع وبرى المكونات الهامة. في بعض الأحيان من الممكن الانتقال إلى الرسومات للبدء في تحسين التصميم. يمكن اختبار هذه النماذج الأولية باستخدام اختبارات الفلاش واختبارات التفضيل وغيرها من أشكال اختبار التصميم. ومع ذلك فإن المشكلة في أدوات مثل الاسكتش أو الفوتوشوب في أنها ربما تكون أسوأ طريقةٍ لإظهار الطبيعة التفاعلية والديناميكية لموقع الويب. لهذا السبب انتقل بسرعةٍ إلى المتصفح. بمجرد الدخول إلى المتصفح بإمكانك البدء في إنشاء نموذجٍ أوليٍ لبُنية الموقع وحتى إدخال أول تمرير للمحتوى. قد يفتقر هذا النموذج الأولي إلى تصميمٍ مصقول، ولكنه سيسمح لك بإجراء اختبار قابلية الاستخدام على بنية المعلومات وإمكانية العثور على المحتوى. تدور مرحلة النماذج الأولية هذه حول الاختبار والتكرار مع تقدم النماذج الأولية بشكلٍ متزايدٍ نحو نهجٍ يمكنك الوثوق به. سيصبح التكرار النهائي لهذا النموذج هو القالب الذي سيبنى الموقع النهائي منه. يحل هذا محل المواصفات، ولكنه بدلاً من ذلك يعتمد على الأدلة ويسمح لك بتجنب النقاش والحوار اللانهائِيين. بمجرد أن تثق في النموذج الأولي الخاص بك، انتقل إلى بنية إعادة التصميم النهائية للموقع الحالي. بناء Beta يستخدم الإصدار التجريبي أساسًا النموذج الأولي كنقطة انطلاقٍ ولكنه ينتج عنه مستوى جاهز للإصدار مع وظائف كاملةٍ وقدرةٍ على العمل على نطاقٍ واسع. اعمل مع العميل على تحسين محتواها وبعد الاختبار اقضِ بعض الوقت مع المطورين لمساعدتهم على فهم النموذج الأولي وكن واضحًا بشأن ما يقومون ببنائه. قضاؤك المزيد من الوقت مع العميل والمُطورين والمصممين الذين ينشئون نظام تصميمٍ ومكتبة أنماطٍ مرتبطةٍ للموقع المعاد تصميمه. يعد هذا جزءًا مهمًا من العملية حيث سيُساعد ذلك على ضمان تطور الموقع الإلكتروني بعد الإطلاق. لا تنتظر أن يكون الموقع مثاليًا قبل البث المباشر وهذا ما يجعل النقطة السابقة مهمة. إطلاق منتج قابل للنمو بالحد الأدنى الكثير من عمليات إعادة التصميم تأخرت نظرًا لأن المتورطين قد قاموا بتعديل لا نهاية له. وهذا مذهلٌ بشكلٍ سخيف لأنه في معظم الحالات يكون الموقع بالفعل أفضل بكثيرٍ مما هو موجود حاليًا. أعتقد أن هذا ينبع من عقلية الطباعة والشعور بأنه بمجرد نشرها لن تتاح لك الفرصة لتغيير الأشياء. لكن لا ينبغي أن يكون هذا هو الحال مع الويب إذا كان لديك الموقف الصحيح والتمويل والعلاقة مع المطورين. في معظم الحالات تعامل مع لحظة البدء المباشرة على أنها حوالي ثلثي الطريق على المشروع بدلًا من النهاية. بدلًا من إطلاق موقع مثالي، ابدأ بمنتج الحد الأدنى القابل للتطبيق. يخشى بعض العملاء من أنهم قد ينفرون المستخدمين إذا أطلقوا موقع ويب أقل من الكامل. في مثل هذه الحالات ابدأ بإصدار تجريبي عام. في هذا السيناريو يظل الموقع الحالي متصلًا بالانترنت ويدعى المستخدمون إلى تجربة الموقع الجديد. في كلتا الحالتين راقب عن كثب سلوك المستخدم عند البدء بالعمل حتى تتمكن من التعلم والتكرار عليه. احتضان التكرار المستمر بمجرد تشغيل موقعٍ ما، من الجيد القيام بالتحليلات واستخدام الأدوات مثل Fullstory لمشاهدة جلسات المستخدم. إذا كان الموقع تجريبيًا مفتوحًا، شاهد عن كثبٍ عدد المستخدمين الذين يقومون بمراجعة الموقع الجديد وعدد الذين يعودون إلى الموقع السابق. ولكن سواءً كان الإصدار التجريبي المفتوح أو الموقع المباشر، اتبع المقاييس المحددة مع العميل في البداية لتحديد مدى أداء الموقع مقارنةً بالإصدار السابق. بناءً على ما تلاحظه ابدأ في تحسين الموقع وإدخال التحسينات. إذا اكتشفت شيئًا ما أقل أداءً أجري اختبار A/B باستخدم الإصلاحات الممكنة ومعرفة ما إذا كان أداؤها أفضل. بمرور الوقت قد تتراجع لكن العمل مستمرٌ مع تولي العميل دور مراقبة الموقع واختبار التحسينات الممكنة. من خلال التحسين المستمر والتكرار على الموقع الحالي فإنه يتجنب الدخول إلى حالةٍ يحتاج فيها إلى إعادة تصميمٍ كاملةٍ مرةً أخرى. بالطبع للتأكد من أن الموقع سيستمر في الحصول على الاهتمام الذي يحتاجه سوف يحتاج إلى فريقٍ من الأشخاص الذين يعملون عليه باستمرار. سينتقل الموقع من حساب رأس المال إلى حساب تشغيلي. على الأقل سيحتاج الموقع إلى مالكٍ منتجٍ يكون مسؤؤلًا في النهاية عن نجاحه. لسوء الحظ غالبًا وعلى الرغم من بعض التحذيرات من الممكن أن تتعثر مواقع الويب بمجرد العودة إلى الوراء فلا أحد يكرس نفسه لنجاحها. بدلًا من ذلك من الممكن تقسيم المسؤولية بين الكثيرين وبالتالي تنتهي في أسفل قائمة مهام الجميع. لذلك تأكد من إنهاء الواجبات الرئيسية للتأكد من أن إعادة التصميم التالية هي آخر عملية إعادة تصميم. المفاتيح الرئيسية تجنب إعادة تصميم موقع الويب الخاص بك إذا كان ذلك ممكنًا. بدلًا من ذلك أجري عليها التطويرات اللازمة كما هو مطلوب. التوقف عن التعامل مع موقع الويب الخاص بك على أنه مصدر لرأس المال كل بضع سنوات وبدلًا من ذلك استثمر فيها بشكلٍ مستمر. امتلك أهدافًا واضحةً لموقع الويب الخاص بك. تحقق واختبر كل مرحلة أثناء تقدمك في العمل. استخدم النماذج الأولية بدلًا من كتابة المواصفات الطويلة. ابدأ بالمحتوى. تأكد من أن شخصًا ما يمتلك الموقع ويكون مسؤولًا عن نجاحه. إذن كانت هذه لمحة سريعة عن منهجي عمل قد تساعدك خلال عملية إعادة التصميم التالية. ترجمة -وبتصرف- للمقال How to Redesign an Existing Website the Right Way لصاحبه Paul Boag

في هذا الشرح التوضيحي سنخوض في تجربة تصميم لرمز ساعة ذكية، باستخدام بعض الأشكال والعناصر الأساسية المتوفرة في البرنامج. وكما في كل مرة، جهّز كربًا من مشروبك المفضل ولنبدأ! البرنامج: Adobe Illustrator CS6 – CC 2016 المستوى: مبتدئ مدة العمل: 20 دقيقة خطوة 1 قبل أن نبدأ في هذا المشروع تأكد من تهيئة ملف عمل جديد بالذهاب إلى New < File (أو بالضغط على مفاتيح Ctrl+N)، بعدها اضبط الإعدادات كالتالي: Number of Artboards: ‏1 Width:‏ ‏96px Height‏:‏ 96px Units:‏ ‏Pixels ومن لائحة Advanced اضبط التالي: Color Mode‏:‏ RGB Raster Effects‏:‏‏ (Screen (72ppi Preview Mode‏:‏ Default نصيحة سريعة: أغلب الإعدادات المذكورة يمكن تفعيلها تلقائيًا عند ضبط إعدادات الملف على Profile to Web، ويتبقى عليك تحديد أبعاد العمل Width x Height. خطوة 2 سنبدأ بالعمل على حزام الساعة. ارسم الشكل الأساسي للجزء الأيمن برسم مستطيل ذو حواف دورانية بالأبعاد 64*86 px بدوران للحواف بمقدار 20 px، وبلون تعبئة D3928D#، واضبط محاذاة الشكل في منتصف مسطح العمل وعلى بعد 6 px من الحافتين العلوية واليمنى. خطوة 3 انسخ الشكل المرسوم بالضغط على Ctrl+F، Ctrl+C واضبط موضعه على بعد 2 px من الحافة اليسرى، حدد الشكلين ثم من نافذة Pathfinder اختر Minus Front Shape Mode لاقتطاع الشكل المطلوب. خطوة 4 ميز الشكل الناتج بسماكة لحدوده وذلك بنسخ الشكل بالضغط على **Ctrl+C ثم لصقه في في المقدمة بالضغط على *Ctrl+F* وغير لونه للدرجة 262A35‏# ثم اعكس تعبئته داخل حدوده بالضغط على Shift+x وتأكد من ضبط سماكة الحدود على 4 px والدوران على Round Join. قبل أن ننتقل للخطوة التالية، حدد الشكلين وضعهم في مجموعة واحدة بالضغط على Ctrl+G خطوة 5 ارسم الجزء المطوي من حزام الساعة، انسخ الأشكال بالضغط على Ctrl+F، Ctrl+C بعد إلغاء تجميعها وذلك بالضغط على زر الفأرة الأيمن واختيار Ungroup ثم احذف حدود الشكل المنسوخ. غير لون التعبئة للشكل الناتج إلى FFBFB6‏# واحذف النصف السفلي من الشكل كما يظهر في الصورة المرفقة. خطوة 6 اضبط طول الشكل الناتج بتحديد نقاط التحكم السفلية باستخدام أداة (Direct Selection Tool (A، واسحبهم للأسفل مسافة 14 px باستخدام أداة Move عن طريق الضغط على ** px 14 < Vertical < Move < Transform < right click** خطوة 7 حدد نقطتي التحكم السفلية مجددًأ وباستخدام أداة (Direct Selection Tool (A أعطهم بعض الانحناء بتحديد قيمة نصف قطر الانحناء 12 px في المربع المخصص لذلك. أعط الشكل الناتج سماكة حدود 4 px بلون 262A35‏#، حدد الشكلين وضعهم في مجموعة واحدة بالضغط على Ctrl+G وانتقل للخطوة التالية. خطوة 8 [08.png] لنرسم شريط الربط ارسم دائرة بأبعاد 8*8 px بلون E89054‏# بسماكة حدود 4 px ولون 262A35‏#، ثم ضعهم في مجموعة واحدة وضعها في المكان الموضح على مسافة 8 px من الحافة السفلية. بمجرد انتهائك حدد الحزام وشريط الربط معًا وضعهما في مجموعة واحدة بالضغط Ctrl+G. خطوة 9 أضف زر الربط برسم دائرة أبعادها 4*4 px وبلون 262A35‏#، وضعها أسفل طية الحزام على مسافة 2 px. بمجرد انتهائك من الرسم حدد جميع الأشكال الحالية بالضغط على Ctrl+G. خطوة 10 ارسم الجزء الأيسر من الحزام بنسخ الجزء الأيمن وعكسه بشكل رأسي وذلك عن طريق Vertical < Reflect < Transform < right click ثم اضبط موضع الشكل على بعد 16 px من الحافة اليسرى لسطح العمل. غيّر لون تعبئة الشكل الناتج إلى اللون EA755E‏#، ثم حدد جميع الأجزاء المكونة للحزام وضعهم في مجموعة واحدة بالضغط على Ctrl+G. خطوة 11 لنبدأ العمل على الهيكل الفعلي للساعة. لرسم المقطع الجانبي ارسم مستطيلًأ بأبعاد 16*48 px باللون E89054‏#، واضبط الشكل على أن يكون نصف قطر دوران الزوايا اليمنى 8 px وذلك من مربع خصائص الشكل. أعط الشكل الناتج سماكة 4 px ولون 262A35‏# ضع الأشكال في مجموعة واحدة بالضغط على Ctrl+G واضبط الموضع على بعد 36 px عن الحافة اليسرى لمسطح العمل. خطوة 12 لرسم الواجهة الأمامية للساعة ارسم مستطيلًا ذو حواف دورانية بأبعاد 40*48 px باللون FFC06C# وبسماكة حدود 4 px ولون 262A35‏#، ضع العناصر في مجموعة واحدة واضبط الموضع كما هو موضح في الصورة المرفقة. خطوة 13 لرسم الشاشة ارسم شكلًا مستطيلًا ذو حواف دورانية بأبعاد 32*40 px باللون 262A35‏# ودوران 4 px، واضبط محاذاة الشكل على الواجهة الأمامية للساعة. خطوة 14 أضف أزرار التحكم برسم دائرة بأبعاد 8*8 px ولون 262A35‏#، وضعها على الجزء الجانبي من الساعة على مسافة 8 px من الحافة العلوية. خطوة 15 أنهِ رسم الساعة بإضافة المفتاح الثانوي وذلك برسم مستطيل ذو حواف دورانية بأبعاد 8*16 px باللون 262A35‏# وبدوران 4 px للزوايا، وضعه أسفل الزر السابق على بعد 4 px. حدد الأشكال وضعها في مجموعة واحدة بالضغط على ctrl+G واحفظ العمل. عمل رائع! كان هذا شرحًا توضيحيًا خفيفًأ خطوة بخطوة لتتعلم كيف ترسم رمز لساعة ذكية باستخدام بعض الأشكال والأدوات الأساسية. ترجمة وبتصرف للمقال Create a Smartwatch Icon in Adobe Illustrator لصاحبه Andrei Stefan

ستتعلم في هذا الدرس التوضيحي طريقة رسم مشهد لطائرة مركونة على مدرج الطيران باستخدام برنامج Adobe Illustrator. وبالاعتماد على الأشكال الأساسية مثل الشكل البيضاوي والشكل المستطيل والمستطيل ذو الحواف الدائرية لعمل الرسم المطلوب، ستتعلم تقنيات متعددة لإضافة بعض التدرجات والتأثيرات اللونية للحصول على نتيجة واقعية قدر الإمكان. فلتبدأ المهمّة! إنشاء مستند عمل جديد 1- بعد تشغيل البرنامج اضغط على Ctrl+N لإنشاء ملف عمل جديد، واضبط الإعدادات التالية: Number of Artboards: ‏1 Units:‏ ‏Pixels Width:‏px‏860 Height‏:‏ 640px ثم بالانتقال إلى Advanced اضبط الإعدادات كالتالي: Color Mode‏:‏ RGB Raster Effects‏:‏‏ (Screen (72ppi Preview Mode‏:‏ Default ثم تحقق من عدم تفعيل خيار Align New Objects to Pixel Grid قبل الضغط على OK. رسم هيكل الطائرة 2- باستخدام أداة رسم الشكل البيضاوي (Ellipse Tool ltr (L ارسم شكلًا بيضاويًا باللون الأسود وبأبعاد 95107px، ثم بأداة التحديد (Direct Selection Tool (A حدد نقاط التحكم اليمنى واليسرى للشكل البيضاوي وحركهم بمقدار 4px لأعلى. بنفس أداة التحديد (Direct Selection Tool (A مع الضغط على مفتاح Shift اسحب ذراع التحكم العلوية للوصول إلى الشكل المرفق أدناه. باستخدام أداة (Rectangle Tool (M ارسم مستطيلًا باللون الأصفر بأبعاد 1004.5px، واضبط موضعه كما هو موضح في الصورة. 3- حدد الشكل البيضاوي الناتج من الخطوة 2 واصنع نسخة منه بالضغط على Ctrl+F ،Ctrl+C واستبدل لون حدود الشكل المنسوخ إلى اللون الأحمر. أعد تحديد الشكل البيضاوي الأحمر والمستطيل الأصفر واصنع نسخة منهم، أبقِ الأشكال محددة ثم انتقل إلى نافذة Pathfinder وذلك بالذهاب إلى pathfinder < window واضغط على أيقونة Minus Front. ثم اضغط على مفاتيح Ctrl+Shift+G لإلغاء تجميع العناصر في المجموعة الناتجة. حدّد الشكل العلوي الناتج وغيّر لون حدوده إلى اللون الأزرق، ثم انتقل للجزء السفلي وغيّر لون حدوده إلى اللون التركوازي، حدّد الجزء المتبقي من الشكل البيضاوي الأحمر والشكل المستطيل الأصفر ثم انقر على أيقونة intersectمن نافذة Pathfinder. أخيرًا ضعِ الشكل الناتج في مقدمة سطح العمل بالضغط على Ctrl +Shift +Right* *Square Bracket. 4- بالرجوع إلى الشكل البيضاوي من خطوة 2، حدّد الشكل وضعه في مقدمة سطح العمل بالضغط على Ctrl +Shift** +Right Square Bracket**، ثم حدّد نقطة التحكم العلوية واحذفها. بالاستفادة من أداة *Convert Anchor Point Tool* أو بالضغط على مفاتيح اختصارها Shift +C اضغط على ذراع التحكم العلوية لنقطة التحكم اليسرى واسحبها للأسفل ناحية اليمين. كرر العملية مع نقطة التحكم اليمنى واسحب ذراع التحكم إلى الأسفل ناحية اليسار. 5- حدد الشكل ذو اللون التركوازي الناتج من الخطوة 3، أزل حدود الشكل واملأه بتدرج قطري كما يظهر في الصورة الثانية أدناه. انتقل إلى الشكل الأصفر وأزل لون حدوده واملأه باللون الأسود درجة 000000#، مع إبقائك على الشكل محددًا غير نظام الدمج (Blending Mode) إلى Hard Light وقلل الشفافية حتى 50%. انتقل الآن إلى الشكل الأسود وأزل لون حدوده واملأه بتدرج قطري كما هو موضح في الصورة. أبق على تحديد الشكل الناتج واذهب إلى Feather < stylize < Effect، اضبط القيمة على 2px ثم اضغط OK. وأخيرًا غير نظام دمج الشكل الناتج إلى Soft Light. 6- بالاعتماد على الأدوات (Pen Tool (P و(Tool (G ارسم شكلًا مضيئًا باللون الأزرق الأقرب للرمادي كما هو ظاهر في الصورة المرفقة، أعد تحديد الشكل الناتج واذهب إلى Gaussian Blur < Blur < Effect، ثم اضبط القيمة على 3px Radius ثم OK. غير نظام الدمج للشكل الناتج إلى overlay وقلل الشفافية حتى 70%. 7- انتقالًا إلى حجرة القيادة، ارسم مستطيلًا بأبعاد 5*px17 باللون الأزرق، حدّد المستطيل الناتج وبالضغط على مفتاح Shift انقر على الشكل العلوي الناتج من خطوة 5. حرر مفتاح Shift واضغط على الجزء العلوي الناتج من خطوة 5 مجددًا (لتعديل موضعه)، بعدها افتح نافذة Align بالذهاب إلى Align > Window، اضغط على أيقونة **Horizontal *Align Center ثم Vertical Align Top. أعد تحديد المستطيل الأزرق وحرّكه بمقدار 20px لأسفل. انتقالًا إلى أداة رسم المستطيل (Rectangle Tool (M أدرج مستطيلين بأبعاد: 2017px و7.5*15.5px واضبط موضع المستطيلين كما هو موضح في الصورة. ثم بالاعتماد على أداة (Direct Selection Tool (A حدد نقطة التحكم السفلية من جهة اليمين الخاصة بالمستطيل الأحمر وحركها بمقدار 9px لليمين. وانتقل إلى نقطة التحكم السفلية من جهة اليسار وحركها بمقدار 8px لليمين. أخيرًا حدد نقطة التحكم السفلية من جهة اليمين للمستطيل الأحمر المتبقي وحركها بمقدار 9px لليمين. 8- حدّد الشكل الأحمر الكبير واذهب إلى Move < Transform < Object وأدخل القيم -1.5px في مربع Horizontal و3.5px في مربع Vertical، ثم اضغط على Copy. استبدل لون حدود الشكل الناتج إلى اللون الأصفر، الآن حرر الشكل الأحمر الكبير واصنع نسخة منه بالضغط على Ctrl+F ،Ctrl+C. أبقِ على تحديد الشكل ثم بالضغط على مفتاح Shift اضغط على الشكل الأصفر. افتح نافذة Pathfinder بالذهاب إلى **Pathfinder > **Window واضغط على أيقونة Minus Front. بعدها استبدل لون حدود الشكل الناتج إلى اللون الأصفر. ركز على الصورة الثالثة أدناه، حدد نقطتي التحكم المشار إليهما بعلامة زرقاء ثم اضغط على أيقونة Cut path at selected anchor points من شريط Properties، وهذا سيجعل الشكل الأصفر بمسارين. حدّد المسار العلوي ثم بالضغط على الزر الأيمن للفأرة في مسطح العمل اختر Join من القائمة المنسدلة واستبدل لون حدود الشكل الناتج باللون الأخضر. أخيرًا حدّد المسار المتبقي من الشكل الأصفر واضغط على Ctrl+J لتحصل على النتيجة الموضحة أدناه. 9- حدد الشكل الأحمر الصغير واذهب إلى Move < Transform < Object وأدخل القيم -1.5px في مربع Horizontal و2.5px في مربع Vertical ثم اضغط Copy. استبدل لون حدود الشكل الناتج باللون التركوازي. حرر الشكل الأحمر الصغير واصنع نسخةً منه بالضغط على Ctrl+C ،Ctrl+F. أبقِ على تحديد النسخة الجديدة، اضغط على مفتاح Shift ثم انقر على الشكل التركوازي. افتح نافذة Pathfinder بالذهاب إلى Pathfinder < Window واضغط على أيقونة Minus Front. ثم استبدل لون حدود الشكل الناتج إلى اللون الأصفر. ركز على الصورة الثالثة أدناه وحدد نقاط التحكم المشار إليها باللون الأزرق ثم اضغط على Cut path at selected anchor points من شريط Properties. وهذا سيجعل للشكل الأصفر مسارين، حدد المسار العلوي وبالنقر على زر الفأرة الأيمن على مسطح العمل اختر Join من القائمة المنسدلة. ثم استبدل لون حدود الشكل الناتج إلى اللون الأخضر. أخيرًا حدد المسار المتبقي للشكل الأصفر واضغط على Ctrl+J للحصول على النتيجة الموضحة أدناه. 10- حدد الشكلين باللون الأحمر وأزل لون الحدود ثم املأ الشكلين بدرجةٍ من الأزرق الغامق 0e1520‏#. انتقل إلى تحديد الشكلين باللون الأخضر وأزل لون الحدود واملأ الشكلين بدرجةٍ من الأزرق المائل للرمادي 2e333d‏#. ثم انتقل للشكلين باللون الأصفر وكرر الخطوات السابقة واملأ الأشكال باللون الأزرق الداكن المائل للرمادي 454954‏#. الآن أعد تحديد أول شكلين صنعتهم في هذه الخطوة وبالضغط على Ctrl+F ،Ctrl+C اصنع نسخةً منهم، عدّل موضع النسخ لتصبح في مقدمة سطح العمل بالضغط على Ctrl +Shift +Right Square Bracket. أبق على تحديد الأشكال الناتجة واستبدل لون التعبئة بعمل تدرج خطي كما يظهر أدناه. أخيرًا غّير نظام دمج الأشكال الناتجة إلى screen وقلل الشفافية حتى 80%. 11- حدد الأشكال الناتجة من الخطوة 7 وحتى الآن -باستثناء المستطيل الأزرق- واضغط على Ctrl+G لتجميعهم معًا. أبقِ على تحديد المجموعة الجديدة واذهب إلى Reflect < Transform < Object، اختر vertical ثم copy، ثم حرك النسخة إلى اليسار. حدد وأزل المستطيل الأزرق. أخيرًا حدّد العناصر الناتجة من خطوة 2 وحتى الآن وبالضغط على Ctrl+G ضعهم معًا في مجموعةٍ واحدة. رسم ذيل الطائرة 12- باستخدام الأداة (Rectangle Tool (M ارسم شكلًا مستطيلًا أبعاده 12123px بلون أحمر، واضبط موضعه كما يظهر في الصورة. ثم بالاعتماد على أداة التحديد (Direct Selection Tool (A حدد نقطة التحكم العلوية اليمنى للمستطيل الجديد وحرّكه لليسار بمقدار 5px، وانتقل لنقطة التحكم العلوية اليسرى وحركها أيضًا بمقدار 5px لليمين. أعد تحديد الشكل باللون الأحمر واذهب إلى Round Corners < Stylize < Effect وأدخل قيمة 2px Radius ثم OK. ارسم شكلًا بيضاويًا باستخدام أداة (Ellipse Tool (L أبعاده 15.51.6px، واضبط موضعه كما هو موضح في الصورة الرابعة أدناه. أعد تحديد الشكلين الناتجين من هذه الخطوة وأزل لون الحدود، ثم املأ الشكلين بتدرجٍ خطيٍّ كما يظهر في الصورة أدناه. أخيرًا أخفِ الشكل البيضاوي خلف الأشكال المتبقية في هذه الخطوة. 13- حدد الشكل الكبير الناتج عن خطوة 12، اختر أداة (Rotate Tool (R وبالضغط على مفتاح Alt انقر على النقطة الوسطى أسفل الشكل. في مربع الحوار Rotate أدخل قيمة 83 درجة للزاوية واضغط Copy. حرك الشكل الناتج 3px لأسفل ولليمين بمقدار 3px أيضًا، واستبدل لون تعبئته بعمل تدرجٍ خطيٍّ كما يظهر في الصورة أدناه. احتفظ بتحديد الشكل واذهب إلى Reflect < Transform < Object، اختر Vertical واضغط Copy. اسحب النسخة إلى اليمين كما يظهر في الصورة الأخيرة. أخيرًا حدد جميع الأشكال التي نتجت من بداية الخطوة 12 للآن وضعهم في الخلفية Ctrl +Shift +Left Square Bracket. رسم أجنحة الطائرة 14- ستكون البداية برسم الجناح الأيمن، حدد الشكل كما هو موضحٌ في الصورة الأولى المرفقة واذهب إلى **Scale < **Transform < Object، اختر Uniform وأدخل القيمة 275% في خانة Scale ثم Copy. أبقِ على تحديد الشكل الأخير وحرّكه بزاوية دوران -1.5 درجة ثم اضبط موضعه كما هو موضحٌ في الصورة الرابعة أدناه، واستبدل لون التعبئة للشكل بتدرجٍ خطيٍّ كما يظهر في الصورة الخامسة. اختر أداة (+) Add Anchor Point Tool واضغط على النقطة المحددة باللون الأحمر، أعد تحديد نقطة التحكم الجديدة وحركها لأعلى 6px. 15- ارسم شكلًا مستطيلًأ باللون الأحمر باستخدام أداة (Rectangle Tool (M واضبط موضعه كما هو موضحٍ في الصورة الأولى أدناه. أعد تحديد الشكل الناتج عن خطوة 14 وانسخه بالضغط على Ctrl+F ،Ctrl+C، احتفظ بتحديد النسخة وبالضغط على مفتاح Shift وانقر على المستطيل الأحمر ثم افتح نافذة Pathfinder بالذهاب إلى Pathfinder < Window واضغط على Intersect. أزل لون حدود الشكل الناتج واملأه بتدرجٍ خطيٍّ كما يظهر في الصورة. باستخدام أداة () Line Segment Tool ارسم خطًا رأسيًا، بسماكة 1px وحدوده بلون أحمر قاتم 231f20‏# وبلا تعبئة. أخيرًا طبق Width Profile 1 للخط المرسوم. 16- باستخدام أداة (Pen Tool (P ارسم عنصرًا باللون الأسود كما يظهر في الصورة الأولى أدناه، وانسخ الشكل الناتج بالضغط على Ctrl+F ،Ctrl+C، ثم استبدل لون الحدود باللون الأحمر. بالاعتماد على أداة (Direct Selection Tool (A اضبط ذراع التحكم للعنصر الأحمر كما يظهر في الصورة. أعد تحديد الشكلين الناتجين من هذه الخطوة وأزل لون الحدود ثم املأ الشكلين بتدرج ٍ خطيٍّ كما يظهر في آخر صورتين. 17- اتبع تسلسل الخطوات المُوضح في الصور التالية وكرر نفس طريقة الرسم في الخطوات السابقة لرسم المزيد من الأشكال. رسم المحرك النفاث 18- باستخدام أداة (Ellipse Tool (L ارسم شكلًا بيضاويًا باللون الأحمر بأبعاد 13.5px12.5. أبقِ على تحديد الشكل واذهب إلى Offset Path < Path < Object وأدخل قيمة 1.5px Offset- واضغط OK. انتقل إلى أداة رسم المستطيل (Rectangle Tool (M وارسم مستطيلًا باللون الأصفر بأبعاد 1.5px12 واضبط موضعه كما هو موضحٌ في الصورة. بالاعتماد على أداة (Direct Selection Tool (A حدد نقطة التحكم العلوية اليمنى للمستطيل الأصفر وحركها لليمين 1px، وكرر نفس العملية مع نقطة التحكم العلوية اليسرى 1px بالاتجاه المعاكس. أعد تحديد الشكل الأصفر واذهب إلى Round Corners < Stylize < Effect، أدخل قيمة 1px Radius ثم اضغط OK. أبقِ على تحديد الشكل الناتج وأزل لون حدوده واملأه بتدرجٍ خطيٍّ كما هو موضحٌ في الصورة الأخيرة. 19- حدد الشكل الأسود الناتج من خطوة 18 ثم استخدم الأداة (Rotate Tool (R ومع الضغط على مفتاح Alt انقر على مركز الشكل البيضاوي ذو اللون الأحمر. في مربع الحوار Rotate أدخل قيمة الزاوية 15 درجة واضغط Copy. كرر الخطوة بالضغط على Ctrl+D حتى تصل إلى النتيجة الموضحة في الصورة الثانية أدناه. حدد الشكلين باللون الأحمر من خطوة 18 وضعهم في مقدمة سطح العمل بالضغط على Ctrl +Shift +Right Square Bracket. أعد تحديد الشكل البيضاوي الكبير وأزل لون حدوده واملأه باللون الأزرق الداكن المائل للرمادي 404952#. ثم حدد الشكل البيضاوي الأحمر المتبقي وأزل لون حدوده واملأه بتدرجٍ خطيٍّ كما في الصورة السابقة. أخيرًا حدد كافة الأشكال الناتجة من خطوة 18 حتى الآن وضعها في مجموعة. 20- اختر أداة (Ellipse Tool (L وارسم شكلًا بيضاويًا باللون الأحمر بأبعاد 38.5*36px. أبقِ على تحديد الشكل واذهب إلى Offset Path < Path < Object وأدخل قيمة 7.5px Offset ثم OK، بعدها حرك الشكل الناتج 1px لأسفل ثم انسخ الشكل الأخير وذلك بالضغط على Ctrl+F ،Ctrl+C، واستبدل لون حدوده باللون الأزرق. أبقِ على تحديد الشكل البيضاوي الأزرق وافتح نافذة Transform بالذهاب إلى Transform < Window وغير قيم العرض إلى 60.5px والارتفاع إلى 53.5px. حرك الشكل الناتج 2px لأعلى وكذلك 2px لليسار، وأخفهِ خلف الشكل البيضاوي الأحمر الكبير. 21- حدّد المجموعة الناتجة من خطوة 19 ومع الضغط على مفتاح Shift انقر على الشكل البيضاوي الأحمر الصغير. افتح نافذة المحاذاة Align وذلك بالذهاب إلى Align < Window، ثم اضغط على Horizontal Align Center واضغط على Vertical Align Center. أعد تحديد المجموعة الناتجة من خطوة 19 وافتح نافذة Transform بالذهاب إلى Transform < Window، ثم غير قيم العرض إلى 38.5px والارتفاع إلى 36px. 22- حدّد الشكل البيضاوي الأحمر صغير الحجم وانسخه بالضغط على Ctrl+F ،Ctrl+C. أبقِ على تحديد النسخة وبالضغط على مفتاح Shift انقر على الشكل البيضاوي الكبير. افتح نافذة Pathfinder وذلك بالذهاب إلى Pathfinder < Window واضغط على زر Minus Front. أزل حدود الشكل الناتج واملأه بتدرجٍ خطيٍّ كما يظهر في الصورة الثانية أدناه. طبق تأثير Feather 4px على الشكل الناتج، ثم غير نظام الدمج إلى Screen وقلل الشفافية حتى 80%. 23- حدد الشكل الناتج من خطوة 22 وانسخه بالضغط على Ctrl+F ،Ctrl+C. باستخدام أداة (Selection Tool (V انقر نقرًا مزدوجًا على المسار الجديد. حدد الشكل البيضاوي الصغير واذهب إلى Scale < Transform < Object، اختر Uniform، وأدخل قيمة 115% في مربع Scale ثم OK. حدد الشكل المتبقي ثم افتح مربع حوار Scale من جديد. فعّل Non-Uniform وأدخل 86% في مربع Horizontal و89% في مربع Vertical ثم OK. بعدها انقر نقرًا مزدوجا في أي مكانٍ بعيدًا عن المسار المركّب. ركز في الصورة الرابعة أدناه، استبدل لون التعبئة للمسار الناتج بتدرجٍ خطيٍّ. مع إبقائك للمسار الجديد محددًا افتح بند Feather. في مربع حوار Feather أدخل 2px Radius ثم اضغط OK. وغير نظام الدمج للمسار إلى Lighten. 24- حدّد الشكل البيضاوي الأحمر المتبقي وأزل لون حدوده ثم املأه بلونٍ أسود 000000#. بعدها ضع الشكل البيضاوي الناتج في الخلفية Ctrl +Shift +Left Square Bracket. أكمل بتحديد البيضاوي الأزرق وأزل لون حدوده واملأ الشكل بتدرجٍ إشعاعيٍّ كما هو موضحٌ في الصورة الثانية أدناه. الآن حدد جميع الأشكال الناتجة من خطوة 18 وضعهم معًا في مجموعةٍ واحدة. واضبط مكانها وفق ما تراه في الصورة المرفقة. 25- باستخدام أداة (Pen Tool (P ارسم الشكلين الموضحين في الصورة الأولى، ثم أعد تحديد الشكل الأحمر وانسخه، واستبدل لون حدود الشكل باللون الأخضر. ركز على الصورة الثانية وحدد نقطتي التحكم المشار إليهما في الصورة باللون الأحمر ثم اضغط على أيقونة Cut path at selected anchor points من شريط Properties. هذا سيجعل للشكل الأخضر مسارين منحنيين. حدد وأزل المسار الأطول. بعدها حدد المسار الأخضر المتبقي ثم اختر Join من القائمة المنسدلة التي تظهر عند النقر على مسطح العمل بالزر الأيمن للفأرة. أعد الخطوة مجددًا واختر Join. الآن أعد تحديد الشكلين الناتجين من هذه الخطوة وأزل لون الحدود ثم املأهما بتدرجٍ خطيٍّ كما يظهر في الصورة الخامسة والسادسة. أخيرًا ارسم شكلين باللون الأزرق الداكن المائل للرمادي 393d41‏# كما يظهر في آخر صورتين، ثم أرسلهما إلى الخلفية Ctrl +Shift +Left Square Bracket. رسم عجلة الهبوط 26- باستخدام أداة (Pen Tool (P ارسم الشكلين الموضحين في الصورة الثانية. أعد تحديد الشكل الأزرق وأزل لون حدوده ثم املأه بتدرجٍ خطيٍّ كما يظهر في الصورة الثالثة. انسخ الشكل واستبدل لون تعبئته بالتدرج الخطي. أضف تأثير Feather بقيمة 3px للشكل الجديد وغير نظام الدمج إلى Hard Light. الآن أعد تحديد الشكل الأحمر وأزل لون حدوده واملأه بالتدرج الخطي الموضح أدناه. انسخ الشكل الناتج واستبدل تعبئته بتدرجٍ لونيٍّ مجددًا، أخيرًا غيّر نظام الدمج إلى Hard Light. 27- باستخدام أداتي (Rectangle Tool (M و(Gradient Tool (G ارسم مستطيلًأ كما هو موضحٌ في الصورتين الأولى والثانية. التقط أداة Rounded Rectangle Tool من شريط الأدوات وانقر على مسطح العمل. في مربع الحوار Rounded Rectangle أدخل البيانات الموضحة في الصورة الثالثة أدناه واضغط OK. بعدها اضبط مكان المستطيل كما يظهر في الصورة الثالثة أدناه. انسخ الشكل بالضغط على Ctrl+F ،Ctrl+C واسحب النسخة إلى موضعها الصحيح الذي توضحه الصورة الرابعة ولا تنسَ الضغط على مفتاح Shift لسحب الشكل باستقامة. أعد تحديد الشكلين وأزل لون الحدود ثم املأهما بتدرجٍ خطيٍّ كما يظهر في الصورة الأخيرة. 28- حدد الأشكال الناتجة من خطوة 14 وحتى هذه المرحلة وضعهم معًا في مجموعةٍ واحدةٍ وذلك بالضغط على Ctrl+G، ثم أرسل إلى الخلفية Ctrl +Shift +Left Square Bracket. أبق على تحديد المجموعة واذهب إلى Reflect < Transform < Object، اختر Vertical ثم Copy. بعدها اسحب النسخة إلى اليسار واضبط موضعها كما يظهر في الصورة الثانية مع الضغط على مفتاح Shift لضمان الاستقامة أثناء السحب. رسم الترس الأمامي 29- باستخدام أداة (Rectangle Tool (M أرسم مستطيلين أحدهما بالأبعاد 4px26.5 والآخر بأبعاد 38.5px، ثم اضبط موضعهما كما هو موضحٌ في الصورة الثانية أدناه. أعد تحديد الشكلين وأزل لون الحدود ثم املأهما بتدرجٍ خطيٍّ كما في الصورة الثالثة. انسخ المستطيلين بالضغط على Ctrl+F ،Ctrl+C واستبدل لون التعبئة بتدرجٍ خطيّ. أضف تأثير Feather 3px للأشكال الناتجة وغيّر نظام الدمج إلى Hard Light. ثم باستخدام الأدوات (Rectangle Tool (M و(Gradient Tool (G ارسم مستطيلًا كما يظهر في آخر صورتين. 30- باستخدام أداة (Pen Tool (P ارسم الشكل الموضح في الصورة باللون الأزرق الغامق المائل للرمادي 40474d#، بعدها أخفِ الشكل الجديد خلف الأشكال الناتجة من الخطوة 29. التقط أداة Rounded Rectangle Tool من صندوق الأدوات وانقر على مسطح العمل، ومن مربع الحوار Rounded Rectangle أدخل البيانات الموضحة في الصورة الثانية واضغط OK. ثم اضبط مكان الشكل الجديد كما توضحه الصورة الثانية. انسخ الشكل واسحب النسخة إلى اليسار واضبط موضعها كما هو موضح في الصورة الثالثة مع الضغط على مفتاح Shift لضبط الاستقامة. أخيرًا أعد تحديد الشكلين وأزل لون الحدود ثم املأهما بتدرجٍ خطيٍّ كما توضحه الصورة الأخيرة. 31- حدد جميع الأشكال المتكونة من خطوة 29 وحتى الآن وضعهم في الخلفية بالضغط على **Ctrl +Shift +Left **Square Bracket. بعدها حدد العناصر الناتجة من بداية الخطوة 2 وحتى هذه المرحلة وضعهم في مجموعةٍ واحدةٍ بالضغط على Ctrl+G. ستظهر الطائرة كالتالي: رسم الخلفية 32- باستخدام أداة (Rectangle Tool (M ارسم مستطيلًا أسود اللون بأبعاد 854*px640 واصنع نسخةً منه بالضغط على Ctrl+F ،Ctrl+C، ثم استبدل لون الحدود للنسخة باللون الأحمر. أبقِ على تحديد المستطيل الأحمر وافتح نافذة Transform وذلك بالذهاب إلى Transform < Window. اضبط نقطة المرجعية على النقطة المتوسطة السفلية، ثم غيّر الارتفاع إلى 210px. أعد تحديد المستطيل الأسود وأزل لون حدوده ثم املأه بتدرجٍ إشعاعيٍّ كما يظهر في الصورة الأخيرة. 33- للبدء بمدرج الطيران انسخ المستطيل الأحمر واستبدل لون الحدود باللون الأزرق، أبقِ على تحديد المستطيل الأزرق الناتج وافتح نافذة Transform بالذهاب إلى Transform < Window. اضبط النقطة المرجعية على النقطة الوسطى العلوية، بعدها غيّر العرض إلى 952px والارتفاع إلى 246px. أبقِ المستطيل الأزرق محددًا وأزل لون التحديد ثم املأه بتدرجٍ إشعاعيٍّ كما يظهر في الصورة الثانية. استمر في تحديد المستطيل الناتج واذهب إلى **Film **Grain < Artistic < Effect. اتبع التعليمات التي تظهر في الصورة الثالثة ثم OK. بعدها أضف تأثير Feather 20px للمستطيل الناتج. 34- باستخدام أداة (Rectangle Tool (M ارسم مستطيلًا باللون الأصفر بأبعاد 44*px210، أبقِ على تحديد الشكل وبالضغط على مفتاح Shift انقر على المستطيل بتأثير Film Grain من خطوة 33. افتح نافذة المحاذاة Align بالذهاب إلى Align < Window، ثم اضغط على (Horizontal Selection Tool (A، حدد نقطة التحكم العلوية اليمنى للمستطيل الأصفر وحركها 19px لليسار. بعدها حدد نقطة التحكم العلوية اليسرى وحركها لليمين 19px. أعد تحديد الشكل الأصفر وأزل لون حدوده قم املأه بتدرجٍ خطيٍّ كما يظهر في الصورة الثالثة. أكمل باستخدام الأدوات (Pen Tool (P و(Gradient Tool (G وارسم الشكل الموضح في الصورة الرابعة والخامسة. انسخ الشكل الجديد الناتج ثم اعكس النسخة بشكلٍ رأسيٍّ وضعها في الجانب الأخر من خلفية العمل. أخيرًا أعد تحديد الأشكال الثلاثة الناتجة من هذه الخطوة وغير نظام الدمج إلى Overlay. 35- حدد جميع الأشكال الناتجة من الخطوة 33 وحتى هذه المرحلة وضعهم في مجموعةٍ واحدةٍ، ثم حدد المستطيل الأحمر الناتج من خطوة 32 وبالضغط على مفتاح Shift وانقر على المجموعة الناتجة من هذه الخطوة. انقر بزر الفأرة الأيمن على مسطح العمل واختر Make Clipping Mask من القائمة المنسدلة. في هذه المرحلة من المفترض أن تظهر خلفية العمل كما هو موضحٌ في الصورة الثانية، بعدها اضبط مكان الطائرة على الخلفية التي قمت برسمها. إضافة الظلال 36- لإضافة مظهرٍ أكثر واقعيةٍ ستحتاج إضافة بعض الظلال، لذلك التقط أداة (Rectangle Tool (M وارسم مستطيلين بأبعاد 9.5px1 والآخر 5px8. بعدها اضبط مكان الشكلين كما يظهر في الصورة الثانية. انسخ المستطيل الأحمر واسحب النسخة جهة اليمين واضبط مكانها كما يظهر في الصورة الثالثة ولا تنسَ الضغط على مفتاح Shift لضمان الاستقامة أثناء سحب الشكل. أعد تحديد المستطيل الأصفر وأزل لون حدوده واملأه باللون الأحمر الداكن 231f20‏#. بعدها حدد الشكلين باللون الأحمر وأزل لون الحدود ثم املأ الشكلين بالتدرج الموضح في الصورة اللاحقة. أخيرًا أضف تأثير Gaussian Blur 1px للأشكالِ الناتجة وضعهم خلف العجلة الأمامية في الرسم. 37- استكمالًأ بعمل الظلال للعجلات واعتمادًا على أداة (Rectangle Tool (M ارسم ثلاثة أشكالٍ مستطيلةٍ كما يظهر في الصور المرفقة. فور انتهائك من رسمهم حددهم وضعهم في مجموعةٍ واحدة، بعدها أضف تأثير Gaussian Blur 1px على المجموعة الجديدة وضعها خلف العجلة اليسرى. انسخ المجموعة الناتجة بالضغط على Ctrl+F ،Ctrl+C واسحب النسخة جهة اليمين كما يظهر في الصورة الأخيرة أدناه ولا تنسَ الضغط على مفتاح Shift أثناء السحب. 38- وإلى هنا ستكون النتيجة كما يلي: 39- باستخدام أداتي (Ellipse Tool (L و(Gradient Tool (G ارسم شكلًا بيضاويًا بأبعاد 14*px610 كما يظهر في الصورة الأولى والثانية، أكمل بأداة رسم الأشكال البيضاوية وارسم ثلاثة أشكالٍ أخرى كما يظهر في الصور اللاحقة. أضف تأثير Gaussian Blur 4px على الأشكال البيضاوية الناتجة من هذه الخطوة. أخيرًا غيّر نظام الدمج إلى Multiply وقلّل الشّفافية حتى 50%. تمّت المهمة! لقد تمت المهمة بنجاح! وهذا ما حصلنا عليه: ترجمة -وبتصرف- للمقال Learn how to create an Airplane in Adobe Illustrator لصاحبه Bao Nguyen

يا له من أمرٍ عظيمٍ أن تنجز الكثير في أقل وقتٍ ممكن، أليس كذلك؟ إذن فلتجرب هذه النصائح والتلميحات لتتمتع بتجربة عملٍ أكثر ذكاءً في مجال UX! هذا المقال هو خلاصة ورشة عمل عُقدت في مدينة Manchester في عام 2019، المحتوى متاحٌ الآن. تغطي تلك النصائح والتلميحات المجالات التالية: إدارة العمل الصحة والسلامة العامة البحوث ورش العمل التصميم الأدوات إدارة العمل 1: تخطيط العمل حضر خطة العمل للأسبوع بأكمله وكن واضحًا بشأن أهدافك لهذا الأسبوع وما الذي عليك تحقيقه حافظ على متابعة لائحة المهام (To-do list) اليومية والأسبوعية لتساعدك على هيكلة عملك وتنظيمه، من الأفضل اعتماد اللائحة الورقية فضلًا عن أي وسيلةٍ إلكترونيةٍ أخرى لا تخف من المبالغة في تقدير أي جزءٍ من العمل وأعط لنفسك مجالًا منظمًا لإتمامه رتب الأولويات، حدد ما هو الأهم وما الذي يمكن تأجيله ليومٍ آخر لا تخف من قول لا، كن واضحًا في ردة فعلك وتبريرك عن عدم كونك متاحًا لتنفيذ المهمة 2: إتمام المهام حاول أن تركز على شيءٍ واحدٍ في كل مرة، وابتعد عن أي مشتتاتٍ تعيق تركيزك فوّض المهام للآخرين عند استطاعتك، فكر بالمهام التي عليك القيام بها والأخرى التي باستطاعتك تفويضها أنهِ المهام السهلة أولًا، سيتولد لديك شعورٌ جميلٌ بالإنجاز كافئ نفسك عند إتمامك المهام، فنجانٌ شهيٌ من القهوة مثلاً بمقابل إتمامك للمهمة جرب تقنية Pomodoro – استخدم مُؤقتًا لجدولة المهام في 25 دقيقة، مع فاصلٍ زمنيٍ يستغرق 5-10 دقائق بين المهام اعتمد تقليل المدة الزمنية للمهام وكأنك في سباق، فمثلًا بإمكانك تقليل مدة المهام إلى أسبوع بدلًا من أسبوعين حاول أن تصل باكرًا إلى مكان عملك واحظ بوقتٍ مناسبٍ لإنجاز المهام بدون أي مشتتات (وهذا يتيح لك المغادرة باكرًا أيضًا) 3: الاجتماعات أجرِ الاجتماعات بدون مقاعد، هذا يعطي الاجتماع جوًا من الجدية ويمنع التكاسل لا تخف من امتناعك عن حضور الاجتماع وغادر باكرًا إن لم تكن لك صلةٌ به حافظ على وقت الاجتماع قصيرًا. ستتفاجأ بما يمكنك تنفيذه خلال تلك المدة القصيرة كن واضحًا بشأن أهداف ومخرجات الاجتماعات، يجب أن يعرف الجميع ما هي أهداف الاجتماع وما هي مخرجاته 4: البريد الإلكتروني تجنب التشتت وقلل عدد مرات تفقدك البريد الإلكتروني، مثلًا من 2-3 مرات يوميًا أعد قراءة رسائل البريد الإلكتروني التي كتبتها وأنت غاضب، امنح نفسك وقتًا كافيًا لتهدأ قبل أن تُقدم على فعل أي شيءٍ ستندم عليه 5: جدول الأعمال ضمّن يوم عطلةٍ إضافيٍ في خطاب مغادرتك للمكتب أو في تقويم العمل وبذلك تستطيع العودة للحاق بجدول أعمالك بدون اجتماعاتٍ أو مهام طارئة وضّح في جدول العمل متى تكون مُتاحًا ومتى لا تكون كذلك، لا تخف من رفض الاجتماعات في الأيام التي لا تكون مُتاحًا فيها كن واضحًا بشأن ساعات التواصل المتاحة. مثلًا بإمكانك تحديد ساعات الصباح عندما تكون في أقل حالاتك تشتيتًا حدد في جدول عملك الأوقات التي تخطط فيها للعمل داخل المنزل حتى لا تنزعج من الرسائل المرسلة باستمرار لمعرفة مكان تواجدك 6: أدوات إدارة العمل أضع بعض المرح باستخدام Habitica جرب أداة Trello لتتبع مهامك عيّن بعض التذكيرات، مثلًا باستخدام تقويمات Slack أو Google اجعل حجم العمل المكلف به أنت وفريقك مرئيًا، واستخدم سبورة لتتبع مدى تقدم الفريق في العمل 7: بيئة العمل أنجز بعض المهام التي تتطلب منك تركيزًا وتعاونًا خارج حدود المكتب بعيدًا عن التشتيت والضغط لا تتقيد بطاولة العمل، اذهب لمكانٍ هادئٍ وأعط نفسك وقتًا ومكانًا هادئًا للتفكير تجول باستخدام العجلات، إنها أسرع من المشي المكتب الدافئ والمريح قد يكون طريقةً جيدةً لإنجاز المهام بعيدًا عن المشتتات حاول أن تعمل من داخل المنزل لمرةٍ واحدةٍ على الأقل في الأسبوع، ستندهش بما تنجزه بعيدًا عن المكتب الصحة والسلامة العامة 1: التوازن ما بين الحياة والعمل أنجز مهام العمل الموكلة إليك خلال وقت الدوام ولا تحملها معك إلى البيت فكر فيما إذا كان بإمكانك ضغط ساعات العمل أو تقليل عدد أسابيع الدوام، مثلًا خصص أيام الجمعة لقضاء مزيدٍ من الوقت مع العائلة والأصدقاء استمتع باستراحة الغداء كاملة، وإلا فلماذا سميت باستراحة! حافظ على أجهزتك الخاصة لاستخدامك الشخصي، لا تثبت أدوات العمل على أجهزتك الخاصة 2: التعامل مع الضغط حاول قدر استطاعتك أن تضبط نفسك ولا تبالغ في شعورك بالضغط والإرهاق، فكر بمشاعر الآخرين ووجهات نظرهم تمامًا كما تفكر بنفسك لا تخف من طلب المساعدة! اعثر على هواية تمارسها خارج المكتب، عليك أن تعمل لتعيش وليس العكس اعقد اجتماعاتك أثناء ممارستك للمشي، وبهذا تضرب عصفورين بحجر قد يكون التأمل والتأمل الواعي طرقًا فعالةً للحفاظ على هدوئك والتقليل من توترك 3: خلق بيئة إيجابية أدخل ولو القليل من لمسة الطبيعة داخل بيئة المكتب واهتم بالنباتات والمساحات الخضراء لا تعامل الآخرين بطريقةٍ لا ترغب في أن يعاملوك بها حاول أن تغرس ثقافة ردود الفعل الإيجابية، مثلًا اسأل عن الطريقة الأفضل وما الذي سينجز بطريقةٍ أفضل بدل التركيز على الجوانب السلبية فقط أضف جوًا من المرح أثناء تقدم العمل، ولا تخف من تشجيع الفريق على إظهار روح الدعابة فيما بينهم البحوث 1: بحوث التخطيط ابدأ بالسؤال عن المشكلة التي تحاول حلها وما النتيجة التي ستتوصل إليها، أو مثلًا حاولوا معًا صياغة هدفٍ تودون تحقيقه فكر بالشيء الذي ستُقدم على قياسه، ما الذي يستثير اهتمامك؟ اطلع على نتائج الأبحاث السابقة المشابهة، وابدأ من حيث انتهى الآخرون ابحث عن نطاقٍ من الخبراء في المجال، هذه الطريقة قد تكون سريعة في معرفة الحقائق المعروفة بالفعل في المجال انتبه وتجنب الانحياز أثناء قيامك بالبحث، مثلًا في طريقة تقديمك للأسئلة أو لمهام المستخدم حالات الدعم قد تكون مصدرًا غنيًا لرؤى المستخدم 2: المشاركون في البحث حدد من الذي يجب أن تتحدث إليه حتى تتمكن من إشراك المجموعة الصحيحة من المستخدمين في البحث حاول أن تتحدث إلى مجموعةٍ متنوعةٍ من الناس، حتى "الأشخاص المصابين بالملل" قد يكونوا مصدرًا للمعلومات العينات الصغيرة غالبًا ما تكون كافيةً لبحوث المستخدم (من 5-10 مثلًا)، أنت لست بحاجةٍ إلى التحدث مع الكثير من المستخدمين 3: المقابلات واختبار المستخدم مارس الاستماع الفعال، لا تستمع فقط إلى ما يُقال ولكن انتبه إلى لغة الجسد بشكلٍ جيد عند إجرائك البحوث، انتبه أن ما يواجه الآخرين قد يكون مختلفًا تمامًا لتجربتك في ذلك الموقف (أظهر بعض التعاطف) سجل جلسات البحث (مثل المقابلات واختبار قابلية الاستخدام) إذا أمكن لإكمال أي ملاحظات، قد تحتاج إليها في فترةٍ لاحقة احرص دائمًا على اختبار أسئلة المقابلة مسبقًا، تأكد من وضوح الأسئلة وارتباطها بموضوع المقابلة تجنب استخدام كلمة "اختبار" عند إجراء اختبار المستخدم، لا تريد أن يشعر المستخدمون بأنهم يخضعون للاختبار والتقييم لا تخف من الصمت أثناء المقابلات وجلسات اختبار المستخدم، قاوم إغراء التدخل حتى يتمكن المستخدمون من متابعة حديثهم تأكد دائمًا من تقديم المشهد وضبطه عند إجراء بحث المستخدم، مثلًا عند تقديم مهام المستخدم للمحاولة يمكن استخدام أدوات مثل Marvel وInVision وAxure لإنشاء نموذجٍ أوليٍ قابل للنقر بسرعة لاختبار المستخدم يمكن أن يكون النسخ المتطابق من هاتفك المحمول مفيدًا جدًا لاختبار المستخدم 4: مخرجات البحوث كن مُختصَرًا في نتائج البحوث الخاصة بك، واجعلها سهلة الاستيعاب لجمهورك، لا أحد يحب الاضطرار إلى نبش بحثٍ طويلٍ لاستخراج الأفكار منه عليك أن تستفيد من عداد الوقت الحقيقي لتوصيل أنشطة البحث ومخرجاته ورش العمل 1: تخطيط ورش العمل حدد عدد الأشخاص في ورشة العمل على ألا يتجاوز العدد 15 شخصًا، في حال زاد العدد عن ذلك شكل ورش عمل متعددة للتعامل مع الأعداد الكبيرة حاول أن تحصل على مزيجٍ جيدٍ من الشخصيات داخل ورشة العمل، بهدف تحقيق التنوع طالما كان ذلك ممكنًا من المهم تواجد الأشخاص المناسبين في ورشة العمل، فكر بمن ينبغي عليهم الحضور وأيضًا من يتوجب عليهم المغادرة استعد لتواجد الشخصيات "الكبيرة" الخارج عن الخطة، فكر في خطةٍ لاستيعاب مشاركة هؤلاء فكر في استخدام منسقٍ خارجيٍ إذا كانت هناك حاجة لوجهة نظرٍ أكثر استقلالية تأكد من وجود فترات استراحةٍ منتظمةٍ خلال ورشة العمل، على الأقل استراحة كل ساعة توقع أن تتجاوز الأنشطة الجدول الزمني المحدد، فاحرص على التخطيط لوقت إضافي 2: إعداد ورشة العمل فكر في تنظيم الغرفة، هل تريد مجموعةً واحدةً كبيرةً أم مجموعاتٍ صغيرةً متعددة؟ ما هي نقطة الجذب المحورية في الفراغ؟ قد يكون من المفيد أن يتوفر لديك مساعدٌ لإدارة ورشة العمل بحيث يمكنك التركيز على قيادة الجلسة، مثلًا بإمكان المساعد أن يلتقط النقاط المثارة في الجلسة ويشارك في التحضير قدم وجبةً خفيفة، أي ورشة عمل لا يتوفر فيها البسكويت تعد تموذجًا سيئًا 3: المقدمات قدم نفسك دائمًا عند إدارة ورشة العمل، لا تفترض أن الجميع يعرف من أنت اجعل جدول ورشة العمل واضحًا ومرئيًا (اعرضه على السبّورة مثلًا)، وحافظ على متسعٍ يسمح لك بإدراج العناوين الطارئة التي يمكن تغطيتها فيما بعد حدد تفاصيل جدول الورشة، وضّح ما الذي ستتحدث عنه وما هو المتوقع من المشاركين اطلب من الحضور إخفاء أي مشتتات، استخدام أجهزة الحاسوب المحمولة أو الهواتف ليس محتملًا (ما لم يُطلب استخدامهم) 4: البدء بالورشة استخدم الأمثلة كلما أمكن، لا تتبع الأسلوب النظري، إذا كان بمقدورك أن تربط الأحداث بنماذج حقيقةٍ من الواقع فافعلها التقط الكثير من الصور، استخدم هاتفك لالتقاط المخرجات مثل الملاحظات والرسومات التوضيحية على السبورة إلقاء أمثلة مرئية لما أنت بحاجةٍ إلى تنفيذه تعد طريقةً رائعةً لضبط التوقعات حرك الأشخاص خلال ورشة العمل، فكر بنشاطٍ مختلفٍ عن قيام –جلوس، اطلب من الحضور الوقوف والتحرك ابق عينيك على الساعة، لا تخف من تجاوز أو قطع أي نشاطٍ عندما يداهمك الوقت 5: الأنشطة في ورش العمل تبنى أنشطةً تتطلب مشاركةً من جميع الحضور، واحرص على تفاعل الجميع طالما أمكن جدول أنشطة ورشة العمل، مثلًا 10 دقائق لتكوين فكرة اطلب من المشاركين أن يرسموا بدلًا من الكتابة، هذه طريقةٌ رائعةٌ في إشعال المناقشة والتوصّل لخلاصةٍ إبداعية شجع التحدث خلال بعض الأنشطة، مثلًا تمارين لمساعدة المشاركين في التعرف على بعضهم بعضًا طبق أسلوب التصويت الصامت (مثلًا التصويت بالنقطة) ومن ثم ناقش كمجموعة 6: معدات ورشة العمل استخدم ورق الملاحظات اللاصق ذو جودةٍ عاليةٍ فيلتصق بسهولة على الأسطح المختلفة جرب تطبيق Post-it Plus فهو يعد تطبيقًا رائعًا للاحتفاظ بالملاحظات بطريقة إلكترونية استخدم أقلامًا ذات خطوطٍ واضحةٍ سهلة الكتابة على ورق الملاحظات، ما يجعل الملاحظات أسهل في القراءة وأوضح في حال تصويرها اسحب ورق الملاحظات من العلبة بطريقةٍ صحيحةٍ كي لا يتجعد وذلك بشدها للأسفل لتتمكن من فتح العلبة أسرع اضغط على حزمة الأوراق بدلًا من إضاعة الوقت في البحث عن شريط الفتح 7: متابعة ورشة العمل بعد انتهاء ورشة العمل، أرسل بريدًا إلكترونيًا للمتابعة، اشكر فيه من حضر وأرسل لهم تذكيرًا يلخص محتويات الورشة والقائمين عليها وأي مواعيد هامة لاحقة من المهم مشاركة مخرجات ورشة العمل، قد يكون من الجيد تذكير الحضور بمخرجات الورشة بعد مضيّ أسبوعين من عقدها بعد انتهاء الورشة خصص بعض الوقت للتفكير بشكلٍ عكسيٍ واجمع ردود الأفعال وفكر في طريقة لتحسين الأمور في المرات القادمة التصميم 1: تحديد المشكلة حافظ على أهدافك واضحةً خلال مرحلة التصميم وركز على ما تريد تحقيقه حدد المشكلة قبل معالجة التصميم، وكن واضحًا في تحديد المشكلة التي تعالجها تعرف على محددات التصميم مسبقًا، مثلًا: التكنولوجيا والعلامات التجارية وغيرها… لا تعتمد اختصارات الكلمات، هناك بعض المرونة في القيام بذلك ولكن تأكد من تفسيرك لتلك الاختصارات مع العميل قبل أن تتورط لا تنجرف ببساطة وراء طلبات العميل، فكر في احتياجاته ولا تخف من الخوض في التحديات 2: استلهام أفكار التصميم لا تحاول اختراع العجلة من جديد، بإمكانك الاستفادة من تصاميم أخرى سابقةٍ أو استلهام أفكارك منها لا تخف عند البدء بعمل التصاميم السخيفة، تدريجيًا ستتوصل لمرحلةٍ مرضيةٍ وستكون على درايةٍ بماهية التصميم الجيد عندما تختبر نماذج التصميم السخيفة تلك ابدأ دائمًا باستخدام الورقة والقلم ابدأ العمل الآن، إياك والتأجيل لا تخف من كونك مبدعًا، شجع نفسك وشجع الآخرين على التفكير خارج الصندوق 3: التوصل للإبداع نوّع في مكتبة الموسيقى الخاصة بك لخلق أجواء مختلفة وملهمة عليك أن توقف تشغيل الإشعارات لتقليل التشتت احمل المفكرة معك دائمًا، فأنت لا تعلم متى يأتيك الإلهام خذ استراحةً بانتظام، ولا تضغط على نفسك للوصول لمرحلة الإبداع استقطع بعض الوقت للإلهام، أعط الإبداع متسعًا ومتنفسًا ولو ضئيلًا 4: إدارة أطراف المصلحة فكر بالأطراف الذين لديهم حدةٌ في صوت الأنا العليا (Ego) فهذا يجعلهم مغرورين وحادي الطباع، ما يُرغبك فعلًا في التوصل لطريقةٍ مناسبةٍ للتعامل معهم إدارة التوقعات مسبقًا جزءٌ مهمٌ من العمل أبقِ أطراف العمل على اطلاعٍ بسير أعمال التصميم والبحث، تأكد من عدم حدوث مفاجآتٍ سيئة فكر في تأثير التصميم أو قرار التصميم، التصميم لن ينسكب داخل فراغ بل حتمًا يؤثر على أمورٍ عديدة 5: الاتصالات اللازمة حافظ على وسائل التواصل مع العميل ومع أطراف العمل المقابلة وجهًا لوجه والمحادثة على الهاتف أفضل من البريد الإلكتروني تتبع اتصالاتك مع العملاء وأطراف العمل، لا تعتمد ببساطة على تذكُر ما قيل أبقِ الجميع على اطلاعٍ بتغييرات التصميم، كن سبّاقًا في الإطلاع عن التغييرات خصص سبورة بيضاء لأعمال التصميم لتطويرها ومشاركتها 6: تقديم التصاميم لا تعرض تصاميم لا ترغب في اعتمادها من قبل الزبون، التصاميم التي لا تعجبك كثيرًا دائمًا ما تكون محط الاختيار لا تقدم العديد من خيارات التصميم (لا تزيد عن 2-3) وتجنب ارتباط جوانب مختلفة من التصميم معًا سيبدو التصميم كوحش فرانكشتاين فكر في الجهة أو الشخص الذي ستعرض عليه التصميم، وكيف بإمكانك تطويع العرض للحاضرين 7: الحصول على تغذية راجعة حول التصميم كن دائمًا منفتحًا على التعليقات –فأنت تتجاهلها عادةً بينك وبين نفسك اعرض التصاميم بانتظام، ستحصل على تغذية راجعة أفضل وأسرع كن واضحًا في الجوانب التي تريد جمع الملاحظات حولها، لا تترك الأمر مفتوحًا 8: فريق عمل التصميم خصص بضع ساعاتٍ خلال الأسبوع لاجتماع الفريق، قد يكون هذا وقتًا لإتمام مهام مختلفةٍ معًا ضمن مشروع أو برنامج اقتطع بعض الوقت للعمل معًا على مهمة ما، مثلًا جلسة تصميم جماعية جرب أعمال التصميم في فرق من شخصين، ستكون طريقة رائعة لعمل تعاوني وتبادل الخبرات 9: التخطيط الشبكي التخطيط الشبكي والرسومات السريعة وسيلة رائعة لضبط توقعات أطراف العمل والتأكد من رضاهم عن اتجاه التصميم استخدم مجموعةً لونيةً صغيرة (لا تزيد عن 3 ألوان) فيكون التصميم ككل ثابت وواضح 10: صمم للهاتف المحمول أولًا فكر تدريجيًا، صمم للهاتف المحمول قبل أن تخوض في تصميم سطح المكتب اطلع على الثغرات الموجودة في التصاميم، وكيف يبدو التصميم بالنسبة لها 11: أدوات التصميم استخدم دائمًا مكتبات التصميم والأدوات قدر الإمكان، فهي توفر عليك الوقت والجهد وتحافظ على تصاميمك متناغمة ومتماسكة احرص على عمل نسخٍ احتياطيةٍ واحفظ كل شيء! لا شيء أسوأ من فقدان عملك الثمين أدوات التصميم السحابية مثل Figma تعمل بشكلٍ جيد جدًا مع أنظمة التصميم حيث يسهل الحفاظ على مكونات وأنظمة التصاميم محدثة استخدم أداة مثل InVision لغرض تجميع الملاحظات والتعليقات الخاصة بالتصاميم يمكن لأدوات مثل Zeplin وInVision أن تسمح للمطورين بفحص التصاميم، مثلًا في تكوين الكود اللازم لبناء التصميم الأدوات 1: اختيار الأدوات تبنّى حدس جيد لاختيار البرمجيات المحتمل العمل معها، جربها على مشروع حقيقي لمعرفة مدى نجاحها قبل اعتماد أي أداة أخرى قيّم الأدوات التي تستخدمها بشكل دوري، مثلًا هل تتوفر أدوات جديدة أكثر فعالية لك وللفريق مثل Adobe XD وFigma وInVision Studio حدد الأدوات المناسبة للتصميم، لا تخف من تغيير أدواتك حسب الموقف اتفقوا على الأدوات المستخدمة كونكم فريقًا واحدًا، ليس من الضرورة أن تتبعوا جميعًا نفس الأداة، لكن قد يصبح الحال صعبًا عند استخدام أدوات غير متوافقة في الفريق كن حذرًا من تقييد الأدوات لعملك، مثلًا استعمال أداة معقدة وبالتالي لن تستخدم إلا في مجالٍ محدد من قبل خبير الورق أفضل أداة لديك! 2: صندوق الأدوات خصّص أدوات UX الموجودة، مثلًا القوالب، والرسوم، ومكونات واجهة المستخدم (UI) 3: التدرب على الأدوات تعلم اختصارات لوحة المفاتيح لأدواتك، ستوفر لك الكثير من الوقت احتفظ لديك بنسخةٍ مطبوعةٍ من اختصارات لوحة المفاتيح إلى حين تتأقلم عليها استخدم الإنترنت وابحث فيه عن مقاطع فيديو لمساعدتك في تعلم أداة جديدة 4: الرسم استخدم أدوات الرسم الملحقة، هناك مجموعةٌ متنوعة من الأدوات ستجد فيها ما تبحث عنه استخدم ميزة in-tool للمساعدة في محاذاة التصميم، مثلًا ضبط المحاذاة الأفقية والرأسية داخل الرسم استخدم مكتبات الرموز والرسوم حيثما أمكن، ستكون بمثابة تدريبٍ جيدٍ واختصار عظيمٍ للوقت اعتماد الصورة لقاء وثيق مع فكرة لامعة لصاحبها Fachy Marín على Unsplash ترجمة وبتصرف للمقال ‎150 UX life hacks to help you work smarter لصاحبه Neil Turner

دائمًا ما هنالك خطوة واحدة تود من زوار الموقع الخاص بك اتخاذها بنظرك تكون هي الخطوة الأهم. قد تكون متعلقة بزر الاشتراك للموقع الخاص بك، أو زر المتابعة أو حتى زر الشراء. بغض النظر عن الوظيفة المرجوة من ذلك الزر، تذكر دائمًا أن نقر زوار الموقع على الزر أو عدمه يعتمد على طبيعة الشعور الذي يحظون به أثناء تواجدهم على موقعك. للاستزادة ربما تود القراءة عن إدراك الألوان، وعلم نفس الألوان، أو المزيد عن كيف تحفز المجموعات اللونية إدراك الإنسان. 1. موقع Pinterest زاخر بالكثير من اللون الأحمر بلا شك، يعد اللون الأحمر اللون الأكثر حرارة. إذا تفقدت المجموعة اللونية الخاصة بموقع Pinterest ستلاحظ على الفور أن اللون الأحمر هو اللون الأساسي. يرتبط اللون الأحمر عادةً بالحب، وهو لونٌ ديناميكيٌ وقوي، هذا يضعك في جوٍ عالٍ من الحماس بخصوص أي شيء يتمركز حول هذا اللون. غالبًا ما يُرى اللون الأحمر في عروض التصفيات والمبيعات، حيث تضفي شدته شعورًا ملحًا على من يرى العروض بضرورة إلزامية الشراء. على الرغم من أن هذا اللون الحاد يمكن أن يترك انطباعًا حماسيًا ومشجعًا للزوار، كن حذرًا دائمًا. الكثير من اللون الأحمر يمكن أن يُقصيهم تمامًا عن نطاق رد الفعل المطلوب. يمكنك استخدام اللون الأحمر في نظام الألوان الخاص بك للتركيز على تصميم الويب خاصتك. امزجه في خليطٍ لونيٍ من اللون الأبيض أو الرمادي أو الأزرق الفاتح أو الفضي. مثال رائع لاستخدام اللون الأحمر في تصميم الويب أتحدى أن تكون على علمٍ بهذا مجموعة لونية جذابة بإضافة اللون الأحمر 10 أشياء مرتبطة باللون الأحمر الدم الحرب النار الرجولة الشغف الإغراء الغضب القوة الطاقة الشجاعة إحداثيات اللون الأحمر حسب نظام الألوان Hex Triplet: ‏FF0000‏# RGB: ‏(0, 0, 225) 2. موقع Amazon يحتفل بقوة اللون البرتقالي اللون البرتقالي لونٌ حار، لكن ليس بحدة اللون الأحمر فهو يوحي بالدفء أكثر من الحرارة. هذا اللون النابض بالحياة والمليء بالحيوية، يحفز الناس على فعل الشيء بدلًا من دفعهم أو إجبارهم عليه بصورة عاجلة. يعد اللون البرتقالي عدوانيًا أحيانًا في الطريقة التي يشجع بها إلى اتخاذ إجراءٍ مثل الشراء أو الاشتراك أو البيع أو المتابعة. يُوصى باستخدام اللون البرتقالي إذا كنت ترغب في ترك شعورٍ بالتحفيز والبهجة والإبداع والحماس الكامل للأشخاص بعد زيارتهم للموقع. كيف ينبغي عليك استخدام اللون البرتقالي أتحدى أن تكون على علمٍ بهذا مجموعة لونية جذابة بإضافة اللون البرتقالي 10 أشياء مرتبطة باللون البرتقالي التفاؤل العزم الحريق التخذير الخريف الأديان قوة الاحتمال التعاطف موسم الهالوين الحياة إحداثيات اللون البرتقالي حسب نظام الألوان Hex Triplet: ‏FF7F00‏# RGB: ‏(0, 127, 225) 3. اللون الأزرق في موقع Facebook يُشعرنا بالأمان ستجد العديد من المواقع التجارية والشركات تستخدم درجات اللون الأزرق. هذا اللون يجعلنا نفكر في شيءٍ مُحكمٍ وآمنٍ ومُعتمد ومليءٍ بالخبرة. لذلك، ليس من المفاجئ أن كل مشروعٍ تجاريٍ يهتم بشعور العملاء على المدى البعيد يفضل استخدام اللون الأزرق. يخلق اللون الأزرق شعورًا مُخالفًا تمامًا عن اللون الأحمر، فالأزرق يوحي بالهدوء ومن هنا فلا يجب أن تقلق بشأن استخدامه أكثر من اللازم. يمكنك نثر اللون الأزرق كيفما تشاء في تصميم الويب خاصتك. كيف ينبغي عليك استخدام اللون الأزرق أتحدى أن تكون على علمٍ بهذا مجموعة لونية جذابة بإضافة اللون الأزرق 10 أشياء مرتبطة باللون الأزرق الصدق الصداقة السحر الأولاد الجليد النبل الشتاء الشرطة السماء الحياة إحداثيات اللون الأزرق حسب نظام الألوان Hex Triplet: ‏#0000FF RGB: ‏(255, 0, 0) 4. اللون الأخضر في موقع Groupon يضفي صفة القوة الجماعية تشعر بالتفاؤل الآن؟ لنخمّن -كنت تنظر إلى شيءٍ أخضر؟ ربما كنت تنظر إلى نباتٍ أخضر، بما أنك تشعر بالهدوء والتفاؤل. أي شخصٍ مرتبطٍ بالحياة الخضراء أو أي أنشطةٍ بيئيةٍ من المرجح أن يستخدم اللون الأخضر على الأقل في بعض الأجزاء خلال مرحلة التصميم. ألقِ نظرة على ورقة 100$. إنها خضراء! مواقع أخرى مثل Groupon تتبنى اللون الأخضر في علامتها التجارية، كونها تتعامل مباشرةً مع المال. اللون الأخضر منعشٌ ومريحٌ للغاية، هذا يولّد شعورًا بالتوازن والإلهام. ويعكس التوازن والانسجام في التصميم. استخدام رائع للون الأخضر في تصميم الويب أتحدى أن تكون على علمٍ بهذا مجموعة لونية جذابة بإضافة اللون الأخضر 10 أشياء مرتبطة باللون الأخضر المال الطمع النمو الحسد الطبيعة الربيع الصحة الشباب العشب الأمل إحداثيات اللون الأخضر حسب نظام الألوان Hex Triplet: ‏#00FF00 RGB: ‏(0, 255, 0) 5. موقع Yahoo ينثر الكثير من اللون الأرجواني في شعاره غالبًا ما يوصف اللون الأرجواني بكلماتٍ مثل الخيال والإبداع والوقار والنبل والوفرة. ترتبط درجات الظلال الأرجوانية بالربيع والعاطفة القوية، في حين ترتبط الدرجات الداكنة بالرفاهية والثراء. يستخدم اللون الأرجواني بتنوعٍ في الجمال والموضة ومنتجات الملابس، لما له من تأثيرٍ كبيرٍ في إضفاء الهدوء والسكينة أكثر من أي لون آخر. كما ويعد لونٌ أنثويٌ وعاطفيٌ أكثر من كونه لونٌ ذكوري. عند النظر إلى أي شيءٍ أرجوانيٍ، يشعر الكثيرين بأنه يبدو مصطنعًا، نظرًا لندرة وجوده في الطبيعة. تمامًا مثل اللون الأحمر، يضيف اللون الأرجواني تأثيرٌ قويٌ لا يُقاوم ويشكل بعض الضغط على الأشخاص لاتخاذ ردة فعل. لذا سيكون من الحكيم الجمع بين اللون الأرجواني وأي لونٍ آخر مثل الأسود والأبيض. استخدام رائع للون الأرجواني في تصميم الويب أتحدى أن تكون على علمٍ بهذا مجموعة لونية جذابة بإضافة اللون الأرجواني 10 أشياء مرتبطة باللون الأرجواني الثروة الملكية النبل الأناقة العاطفة الاصطناع الغرابة الروحانية الترف الأنوثة إحداثيات اللون الأرجواني حسب نظام الألوان Hex Triplet: ‏#800080 RGB: ‏(128, 0, 128) 6. استخدام عبقري للألوان المحايدة في موقع 1WD's عادةً ما تستخدم الألوان المحايدة مثل الأبيض والأسود والرماديات الفاتحة والداكنة كخلفيات في التصاميم مع إضافة ألوان أكثر قوةٍ وسطوع. ألقِ نظرةً على موقع 1stwebdesigner – 1WD. هناك استُخدم القليل من اللون البرتقالي كونه لون قوي وساطع -لكن فقط في مزيجٍ جيدٍ مع الرمادي الداكن والفاتح. والأبيض بالتأكيد (ما هو لون الخلفية في الموقع؟) تمامًا كحقيقة أن العصافير دومًا ستطير، فاللون الأسود يعبر دومًا عن الحداثة والقوة والأناقة. في حين أن اللون الرمادي هو لونٌ محايد، يعبر عن أشياء هادئةٍ وغير مرئيةٍ مثل الظلال. إذا كان اللون الرمادي يبدو متّسخًا في بعض الأحيان، فعلى العكس سيولد اللون الأبيض تأثيرًا مُعاكسًا. يعبر اللون الأبيض عن الرحابة والانفتاح والبساطة. استخدام رائع للون الأبيض في تصميم الويب أتحدى أن تكون على علمٍ بهذا مجموعة لونية جذابة بإضافة اللون الأرجواني 10 أشياء مرتبطة بالألوان المحايدة القوة الأناقة الفراغ النعومة الجنة السلام البراءة التشاؤم الكآبة الملل إحداثيات اللون الأرجواني حسب نظام الألوان اللون الأسود: Hex Triplet: ‏#000000 RGB: ‏(0, 0, 0) اللون الرمادي: Hex Triplet: ‏#808080 RGB: ‏(128, 128, 128) اللون الأبيض: Hex Triplet: ‏FFFFFF# RGB: ‏(255, 255, 255) والآن، ما هو لونك المفضل؟ ما الشعور الذي يمنحك إياه لونك المفضل؟ تطرقنا للحديث عن أكثر 5 ألوان شيوعًا. الآن حان دورك لتختبر تأثير الألوان على الحسّ الإنساني وكيف يمكن دمجها في مجموعات لونية مؤثرة في صفحات الويب التي تقوم بتصميمها. ترجمة وبتصرف للمقال Choosing the Best Color Scheme for the Websites You Design لصاحبه Editorial Team

في الأيام الأولى لظهور مصطلح تجربة المستخدم (UX)، كان ظهورُ الخبراء والمختصين في هذا المجال محدودًا ونادرًا (بإمكانك أن تتخيلهم كطيورٍ نادرةٍ تستحق قطع الأميال لأجل التعرف عليها). غالبًا ما يكون القائم على مشروع UX شخصًا منفردًا، أو إن شئت فقل فريقًا متعدد المهام مندمجًا في كيان شخص واحد. تنصب تلك المهام في تصميم واجهة المستخدم (UI design) واستخراج كافة المتطلبات من المستخدمين المعقدين وإجراء جلسات اختبار للمستخدم والتحقق من عدم نسيان إمكانية الوصول بالتأكيد. مع ازدهار مجال UX، وتزايد أعداد الخبراء ظهرت مسارات أكثر تخصصية بما يتعلق بتجربة المستخدم (UX). ما عدنا نسمع عن شخصٍ خبيرٍ في تجربة المستخدم (UX)، أصبحنا نرى مصممي UX أو باحثي UX أو خبراء استراتيجيين في UX أو مصمم متفاعل أو مصمم UX للهواتف… واللائحة تطول. عادةً ما تكون الأدوار والمسؤوليات لأي مشروع ضيقة فهناك باحثون معنيون بمهام UX البحثية (مثل جمع الملاحظات والانتقادات من المستخدم، واختبار المستخدم.. وما إلى ذلك) وهناك أيضًا مصممون معنيون بمهام تصميم UX (مثل تصميم مخطط العمل wireframe، وتصميم النماذج الأولية، وتنقلات المستخدم وهلم جرًا). لدى المصممين اهتمامٌ ضئيلٌ بمجال البحث، كما أن اهتمام الباحثين بمجال التصميم ضئيلٌ أيضًا. بعد كل هذا نحن لا نريد خلط الأدوار أم أننا سنفعل؟ من المحتمل أن يعمل كلٌ من المصممين والباحثين في نفس المكان، غالبًا في نفس الفريق ولربما في نفس الغرفة، لكنهم بالتأكيد يشغلون وظائف مختلفة. وهذا مخجلٌ في حقيقة الأمر، لأنه يوسع الفجوة ما بين التصميم والبحث. ليس بالضرورة من الناحية المادية ولكن الأخطر أنه يؤثر على مدى المعرفة والتفاهم المشترك فيما بينهما. ماذا لو انخرط كلٌ من المصمم والباحث في مجال الآخر استقلالية دور الباحث والمصمم في مجال UX ليس بالشيء الخاطئ، ولكن يتوجب أن تحدث الكثير من التقاطعات بين الدورين. على المصمم أن ينخرط بعمقٍ في عمل الباحث، وعلى الباحث أيضًا أن ينخرط بعمقٍ في عمل المصمم. تتساءل عن السبب؟ التصميم المثالي يُبنى على بحث مثالي تصميم UX المثالي لا يتحقق بطريقةٍ سحرية (مع أن بعض العملاء يميلون للتفكير بتلك الطريقة)، بل يُبنى وفق رؤى المستخدم وفهمه، وهذا يتحقق بالبحث الجيد ومعرفة المستخدمين ودراسة ما هو الأفضل لهم. في حال حصر المصمم والباحث نفسيهما في مهمتي التصميم والبحث كمهام محددة ومنفصلة ولم ينخرط كلٌ منهما في عمل الآخر فلن تُستخدم الرؤى والتفاهمات بالطريقة الأمثل لخلق تجربة مستخدمٍ رائعةٍ بحق. يساعد في تعزيز التعاطف البحث المتعلق بالمستخدم يساعد على تعزيز التفاهم والتعاطف معه. الاستماع إلى شخصٍ ما يتحدث عن "المستخدمين" يختلف عن مقابلتهم مباشرةً أو التحدث إليهم. بالتأكيد الملفات الشخصية وملفات تعريف المستخدمين رائعة، ولكن في الواقع مقابلة المستخدمين وجهًا لوجه (حتى لو لم يكن على أرض الواقع) سيكون لها مردودٌ أكبر. انخراط المصممين أكثر في البحث وكذلك انخراط الباحثين في مجال التصميم يساعد أيضًا في تعزيز التفاهم والتعاطف فيما بينهم. ويساعد على تحطيم فكرة الفاصل بين "هم" و"نحن". بعد كل هذا، لا شيء يعدل أن تخوض في مجال الطرف الآخر وأن تسير قدمًا لتحقيق الفهم الأفضل لهم ولطبيعة عملهم. نتائج الأبحاث لا تضيع خلال نقلها أو ترجمتها الباحث (أو أي شخص يمت له بصلة) الذي يحاول إيصال نتائج البحث الرئيسية يشبه إلى حدٍ ما زميلك في محاولته ليشرح لك قصة فيلمٍ شاهده في السينما. بالتأكيد سيكون زميلك قادرًا على وصف جوهر الأحداث، ولكن الكثير من التفاصيل ستسقط منه وهو يحاول نقلها إليك. من الأفضل دائمًا والأكثر إمتاعًا أن تشاهد الفيلم بنفسك. نتائج الأبحاث أقل عرضة لأن تكون مهملة قد يكون من السهل جدًا على المصممين التقليل من قيمة النتائج المهمة أو رفضها تمامًا ما لم يكونوا جزءًا من عملية البحث. أن يُطلعك أحدهم على رؤى المستخدم أو مشاكل قابلية الاستخدام ليس كأن تختبرها بنفسك، وبالتالي فهي ليست مقنعة. من غير المرجح أن يُلقى بالمهام للطرف الآخر صدق أو لا تصدق، عقلية إلقاء المهام على حائط الطرف الآخر لا تزال مسيطرةً في الكثير من الفرق والمنظمات. ينجز المصمم بعض التصاميم ثم يلقي بها للباحث لجمع بعض الملاحظات من المستخدمين ليعيد توجيهها مجددًا للمصمم. وهنا تجد نفسك في ملعب كرة طاولة ما بين المصمم والباحث، وهي ليست ممتعةً أبدًا، وهي بالتأكيد ليست أفضل طريقة لخلق تجارب رائعةٍ للمستخدم. هناك مشاركة وارتباط أكثر في مجال UX من المحتمل أن تتحول الأفكار البحثية إلى أفكارٍ تصميميةٍ وتغييراتٍ فعالة في حال وجود شخص حاضرٍ طوال تلك الرحلة. إذا انخرط المصممون في البحث، وانخرط الباحثون بدورهم في التصميم، سنتوصل لدرجة أكبر من المشاركة والارتباط بما يتعلق بـ UX في أي مشروع، وهذا قد يكون شيئًا جيدًا. الملاحظات والانتقادات من طرف المستخدم يمكن تجميعها بطريقة أسرع في حال أراد المصمم الحصول على مراجعات وانتقادات من المستخدم واضطر إلى انتظار الباحث حتى يصبح متفرغًا لذلك، فهناك احتمال حدوث تأخر كبير ما بين التصميم المعد والملاحظات الموجهة من المستخدم. بينما يمكن تجميعها بطريقةٍ أسرع إذا تمكن المصممين من القيام بذلك بأنفسهم. البحث مركز بطريقة أفضل التوافق الجيد مع بحث UX يتضمن اختبار المستخدم للتصاميم وتقييمها. بعدّك شخصًا معنيًا بالخروج بتصميم من الطراز الأول (على الأقل أنت تأمل ذلك)، يكون المصمم في وضع فريد لتحديد الأسئلة التصميمية والافتراضات التي تحتاج إلى ملاحظات عاجلة. على سبيل المثال، هل هذه الفكرة مفهومة لدى المستخدمين؟ هل تعمل خاصية التنقل؟ هل رمز الطعام سيُشعر المستخدم بالجوع؟ باستطاعة الباحثين والمصممين بناء مجموعة المهارات الخاصة بهم تحدث فريق موقع uxforthemasses في مقالة سابقة عن أهمية امتلاك محترفي UX لمجموعة مهارات على شكل T. تمتلك من خلالها عدة مهارات بقدر كبير من الخبرة والمعرفة مع تعمق أكبر في جوانب محددة. بالنسبة للمصممين، سينعكس هذا العمق في التصميم وأما الباحثين فسينصب في البحث، ولكن الأهم أن كلاً منهما لديه المقدرة والفرصة للعمل على حدٍ سواء. تشجيع المصممين على المشاركة في البحوث وتشجيع الباحثين على المشاركة في التصميم، يتيح للجميع الفرصة لتوسيع مهاراتهم ويساعد في إصلاح الوضع المتأزم للمصممين والباحثين الذين يعملون باستقلاليةٍ عن وجود الطرف الآخر. هل يستحسن أن تكون أدوار التصميم والبحث منفصلة؟ الحديث عن كل ما سبق لربما يضخم السؤال –هل يستحسن أن تكون أدوار التصميم والبحث منفصلةً في مجال UX؟ في هذا العالم الحديث المتسارع تجاه المشاريع والأعمال (والذي يزدري المتخصصين) هل ينبغي أن يكون هناك دورٌ "تصميميٌ بحثيّ" (Deresearch) يجمع بين الدورين؟ تكمن مشكلة الجمع بين الدورين في أن ما يميز الباحث الجيد ليست بالضرورة نفس المهارات والمواصفات التي تجعل المصمم جيدًا. كما أن العثور على شخصٍ يمتلك مهاراتٍ تصميميةً وبحثيةً رائعةً في نفس الوقت هو ضربٌ من الحظ النادر. بالتأكيد من الممكن إيجاد مثل هذا الشخص لكن يبدو أن العثور عليه أصعب مما نتخيل. لا ندافع عن فكرة توحيد أدوار التصميم والبحث في UX، بل نعتقد أنه من المهم وجود تقاطعات عديدةٍ بين الدورين. من ناحيةٍ مثالية، ينبغي أن يكون هناك خطٌ وهميٌ بين مصممي وباحثي UX، بدلًا من السياج الفاصل الكبير الذي تراه في بعض المنظمات. على المصممين أن ينخرطوا في عملية البحث، وعلى الباحثين أن ينخرطوا في عملية التصميم. بل على فريق العمل كافة أن يخوض في مهام البحث والتصميم، في النهاية كل شخصٍ يتحمل جزءًا من المسؤولية لخلق تجربة رائعةٍ للمستخدمين. من المؤكد أن المصمم الرئيسي سيقود عملية التصميم، والباحث الرئيسي سيوجه عملية البحث، ولكن المسؤوليات والأعباء محملةٌ على الطرفين، بل هي بمجملها محملةٌ على الفريق بكامله، وهنا لا بد من عمل المصممين والباحثين ككيانٍ واحد. ترجمة وبتصرف للمقال Why designers should research and researchers should design لصاحبه Neil Turner

سنتطرق في هذا المقال لشرح مراحل تصميم رمز طبق فضائي طائر، باستخدام بعض الأشكال والأدوات الأساسية في برنامج Adobe Illustrator، حضر كوبًا من مشروبك المفضل وارتدي قبعة الفضاء خاصّتك وهيا ننطلق! البرنامج: Adobe Illustrator CS6 – CC 2017 المستوى: مبتدئ مدة العمل: 20 دقيقة تصميم جسم الطبق الطائر خطوة 1 قبل أن نقلع في هذا المشروع، تأكد من تحضير ملف جديد بالذهاب إلى New < File (أو باستخدام اختصار Ctrl+N من لوحة المفاتيح)، واضبط الاعدادات التالية: Number of Artboards: ‏1 Width:‏ ‏128px Height‏:‏ 128px Units:‏ ‏Pixels ومن لائحة Advanced اضبط التالي: Color Mode‏:‏ RGB Raster Effects‏:‏‏ (Screen (72ppi Preview Mode‏:‏ Default نصيحة سريعة: أغلب الإعدادات المذكورة يمكن تفعيلها تلقائيًا عند ضبط إعدادات الملف على Profile to Web، ويتبقى عليك تحديد أبعاد العمل Width and Height. خطوة 2 ابدأ برسم قمرة القيادة وذلك برسم شكل بيضاوي بأبعاد px 32 x 48، وأعطها الدرجة لونية 8FCCBC#، ثم اضبط محاذاتها في وسط سطح العمل وعلى مسافة px 6 من الحافة العلوية. خطوة 3 ميّز الحدود الخارجية للشكل بعمل stroke، وذلك لعمل نسخة من الشكل بالضغط على Ctrl+C والصقها في المقدمة (Front) بالضغط على Ctrl+F، غيّر الدرجة اللونية إلى 595959# ثم اعكس نمط التعبئة بعمل stroke بالضغط على Shift+X، تحقق من ضبط سماكة الخط على px 4. عند انتهائك من تلك الخطوات حدّد الشكلين معًا وضعهم في مجموعة واحدة بالضغط على اختصار Ctrl+G من لوحة المفاتيح. خطوة 4 انتقالًا إلى الجزء الأعلى من الطبق الطائر، ارسم شكلًا بيضاويًا بأبعاد px 64 x 116، وأعطها درجة لونية C1C1C1‏# ثم اضبط محاذاتها مع سطح العمل على مسافة px 18 من الحافة العلوية. خطوة 5 احذف النصف السفلي من الشكل وذلك بتحديده أولًا ثم بالنقر على زر الفأرة الأيسر على نقطة التحكم في أسفل الشكل ثم Delete Anchor Point Tool. أعط الشكل الناتج سماكة خارجية بمقدار px 4 ودرجة 595959#، تحقق من ضبط الزوايا على Round Join في نافذة Stroke. خطوة 6 بالانتقال إلى رسم تفاصيل الحلقة الأفقية للطبق الطائر، ارسم شكلًا بيضاويًا بأبعاد px 38 x 130 ثم Stroke بسماكة px 2 بدرجة لونية 595959#، واضبط محاذاتها كما هو موضح في الصورة. خطوة 7 ننتقل لعمل قناع للشكل الذي توصلنا له، أدرج نسخة من الشكل بالضغط على Ctrl+C والصقها في المقدمة Ctrl+F، حدد الشكلين معًا ثم بالنقر على زر الفأرة الأيمن اختر Make Clipping Mask. خطوة 8 أضف تفاصيل الواجهة الأمامية للشكل باستخدام مستطيل بالأبعاد px 3 x 8، بدرجة لونية 595959#، ثم اضبط محاذاته في الوسط مع الحافة العلوية للحلقة. عندما تنتهي ضع العناصر في مجموعة واحدة Ctrl+G لننتقل بعدها للخطوة التالية. خطوة 9 ننتقل إلى الجزء السفلي من جسم الطبق الطائر، ارسم شكلا بيضاويَا بأبعاد px 24 x 116 بدرجة لونية 878787# وسماكة خارجية بقيمة px 4 ولون 595959#، ضع العناصر في مجموعة واحدة وركبها على الجزء السابق كما هو موضح في الصورة. خطوة 10 أضف فجوة المدخل برسم شكل بيضاوي بأبعاد px 8 x 40 ولون 6D6D6D# وسماكة خارجية بقيمة px 4 ولون 565656#، ضع العناصر في مجموعة Ctrl+G واضبط محاذاة الشكل. خطوة 11 لرسم المحركات أدرج مجموعتين في كلٍ منها ثلاثة أشكال بيضاوية بأبعاد px 2 x 8 ولون 595959#، وثبت موضعهم كما هو موضح في الصورة. خطوة 12 لإضافة بعض الظلال ارسم شكل بيضاوي بأبعاد px 24 x 116 ولون 595959#، ثم اضبط المحاذاة وسط مسطح العمل على ارتفاع px 4 من الحافة السفلية. إضافة شعاع الضوء خطوة 13 سننتقل للعمل على أنبوب السحب، صمم الهيكل الأساسي له برسم مستطيل بأبعاد px 66 x 16، ولونه بدرجة F2BB79‏#، وضعه في النصف العلوي من الظل كما توضح الصورة. خطوة 14 عدل الشكل المدرج بتحديد نقاط التحكم باستخدام أداة Direct Selection Tool‏ (A) ثم تحريكها للخارج مسافة** px 8** من خلال أداة Move كل نقطة على حدة (8px < Vertical < Move < Transform < right click +/- اعتمادًا على الجهة التي ستبدأ بها) خطوة 15 ارسم شكلًا بيضاويًا في نهاية أنبوب السحب لتحديد نهايته بأبعاد px 8 x 32، ولون F2BB79‏# ثم اضبط محاذاته في منتصف الجزء السفلي كما توضح الصورة. خطوة 16 لإضافة الجزء المعتم من الأنبوب ارسم دائرة بأبعاد px 4 x 24 ولون D6A36B#، ثم اضبط محاذاتها. خطوة 17 أنهِ الرمز بعمل قناع للجزء العلوي للأنبوب وذلك بنسخ حدود فجوة المدخل أولًا Ctrl+C، ولصقها في المقدمة Ctrl+F، ثم باستخدام أداة تحديد A) Direct Selection Tool) حرر نقطة التحكم السفلية وبالضغط على Delete احذفها. اضبط إعدادات Cap على Round للمسار الناتج، وأخيرًا حدد عناصر العمل وضعها في مجموعة Ctrl+G. عمل رائع! لقد خضت تجربةً جميلة، وصممت رمزًا لطبقٍ فضائيٍ طائر باستخدام بعض الأشكال والأدوات الأساسية المتوفرة في برنامج Illustrator. تمكنت من اتباع الخطوات بنجاح، والأهم أنك قد تعلمت شيئًا جديدًا خلال الطريق. ترجمة وبتصرف للمقال How to Create a UFO Icon – Adobe Illustrator Tutorial لصاحبه Andrei Stefan

في هذا الشرح التوضيحي سنقوم بتصميم شعار لشمعة باستخدام الأشكال والأدوات الأساسية في برنامج Adobe illustrator. لذلك كن مستعدًا وحضّر كوبًا دافئًا من شرابك المفضل وهيا نبدأ معًا! البرنامج: CC 2017– Adobe Illustrator CS6 المستوى: مبتدئ زمن التطبيق: 20 دقيقة خطوة 1 كما نفعل عند بداية أي مشروع سنقوم بإدراج ملف جديد بالذهاب إلى New < File أو بالضغط على Ctrl+N، وأدخل القيم التالية في الحقول الخاصة بها: Number of Artboards:‏1 Width:‏ ‏128px Height‏:‏ 128px Units:‏ ‏Pixels Color Mode‏:‏ RGB Raster Effects‏:‏‏ (Screen (72ppi Preview Mode‏:‏ Default نصيحة سريعة: أغلب الإعدادات المذكورة يمكن تفعيلها تلقائيًا عند ضبط إعدادات الملف على Profile to Web، ويتبقى عليك تحديد أبعاد العمل Width and Height. خطوة 2 سنبدأ بعمل خلفية لتجميع عناصر العمل عليها وذلك برسم دائرة بأبعاد 120x120‏ px وتلوينها بدرجة FF8257‎#، ثم توسيط محاذاتها مع ورقة العمل. خطوة 3 سنبدأ برسم حامل الشمعة وذلك برسم مستطيل بأبعاد 44x8‏ px وتلوينه بدرجة FFB769‎#، ثم محاذاته على مسافة (22‏px) أعلى حافة الدائرة السفلية. خطوة 4 ميّز حدود الشكل بعمل stroke، وذلك بعمل نسخة من الشكل Ctrl+C ولصقها في المقدمة Ctrl+F. غيّر لون التعبئة إلى ‏ #534D54 ثم اعكس نمط تعبئتها Shift+X وتأكد من ضبط سماكتها على 4‏ px وزاوية الدوران على Round Join. عند الانتهاء من هذه الخطوات حدد الأشكال وجمّعها معًا بالضغط على Ctrl+G. خطوة 5 أضف خطًا أفقيًا بالمواصفات التالية ‏thick Stroke px2 ,‏wide px44 وبدرجة لونية ‏ #534D54، ووسّط محاذاته مع الأشكال التي تم تجميعها سابقًا. خطوة 6 ارسم الشكل الأساسي لحامل الشمع على يمين الشكل وذلك برسم مستطيل 12x20 ‏ px سماكة 4px Stroke ودرجة لونية ‏ #534D54 ثم Round Cap وJoin، وضعه كما هو موضح في الصورة المرفقة. خطوة 7 عدّل الضلع العلوي من الشكل واضبط دورانه على 6 px من خلال نافذة (Rectangle Properties < Transform). خطوة 8 افتح مسار الشكل الناتج عن طريق تحديد الجزء السفلي والأيمن باستخدام أمر (Direct Selection Tool (A واحذفه (Delete). اجمع كافة الأشكال معًا بالضغط على Ctrl+G. خطوة 9 سنبدأ بالعمل على عنصر الشمعة برسم مستطيل بالأبعاد 20x40‏ px وتعبئته بدرجة لونية F9CFA2‏# ومن ثم تحديد الأطراف بسماكة 4‏ px وتلوينها ‏ #534D54، ثم تجميع الشكل بالضغط على Ctrl+G وضعه أعلى الحامل الذي رسمناه سابقًا. خطوة 10 ارسم تفاصيل الشمعة وأضف 9 خطوط مائلة بأبعاد 20‏ px حدودها بسماكة 1‏ px وبدرجة لونية ‏ #534D54، ورصّها على مسافة رأسية 2‏ px، اضبطها على شكل الشمعة بتحديدها وسحب نقطة ارتكازها لأعلى مسافة 4‏ px وذلك باستخدام أداة Move واتبع الأوامر التالية: -4px < Vertical < Move < Transform < right click. ثم اجمع خطوط العمل معًا بالضغط على Ctrl+G. خطوة 11 سنبدأ العمل على المقطع العلوي لجسم الشمعة برسم مستطيل بأبعاد 20x6 ‏px وتلوينه بدرجة لونية ‏F9E0C0‏# ووضعه أعلى الأشكال التي تم تجميعها في الخطوات السابقة. خطوة 12 أضف المقطع الرأسي للشمعة برسم مستطيل 6x12 ‏px وتلوينه بدرجة F9E0C0‏# ونصف قطر للجزء السفلي 3‏ px، وضعه على الرسم كما هو موضح في الصورة، ووحّد الشكلين معًا عن طريق Pathfinder’s Unite Shape Mode. خطوة 13 باستخدام Live Corners Tool اضبط انحناءات الشكل الداخلية على 2‏px، وأعط الحدود سماكة 4‏px بلون ‏#534D54. واجمع الأشكال معًا. خطوة 14 لرسم الشعلة ارسم دائرة بأبعاد 12x12‏px ولون FFB769‏# ثم تحكم بنقاط الارتكاز للوصول إلى الشكل المطلوب، قم بمحاذاتها أعلى الشكل على ارتفاع 4‏px باستخدام أداة Move عن طريق 4px < Vertical < Move < Transform < right click-. خطوة 15 أعط الشكل الناتج سماكة 4px ولون ‏#534D54، وارسم خطًا بالخصائص 12px tall, 4px thick stroke, #534D54، واجمع العناصر معًا بالضغط على Ctrl+G. خطوة 16 ارسم خطوط للأشعة المتوهجة وجمّعها في مجموعتين من ثلاثة خطوط بسماكة 4px stroke ولون ‏#534D54 بانحناء Round Cap، وضعهم على جوانب شكل الشعلة كما يظهر في الصورة. خطوة 17 لرسم شكل النجمة ارسم 4 دوائر بالخصائص 20x20 px, 2px thick stroke‏ ,F9E0C0 #، وعدل التقاطع فيما بينها كما يظهر في الصورة. حدد الشكل الناتج عن التقاطع باستخدام ShapeBuilder Tool أو الضغط على Shift+M ثم احذف الدوائر المتبقية. خطوة 18 كرر الخطوة السابقة لرسم نجمة أخرى على الجزء الأيمن من الشكل وارسم الدوائر بالخصائص 12x12 px, 2px stroke, #F9E0C0، وجمّع العناصر مجددًا بالضغط علىCtrl+G ولا تنس حفظ الملف (Save). انتهى! لقد أنجزتها أخيرًا، كان هذا شرحًا مبسطًا لرسم شمعة باستخدام عناصر وأوامر أساسية في البرنامج. وكما العادة، أتمنى أنك قد اتبعت الخطوات بشكل سلس والأهم أنك قد تعلمت شيئًا جديدًا! ترجمة -وبتصرف- للمقال Adobe Illustrator Tutorial: Create a Christmas Candle Icon لصاحبه Andrei Stefan

سنتعلم اليوم طريقة تصميم شريحة من البطيخ في برنامج Adobe illustratorباستخدام الأشكال الأساسية في البرنامج وطريقة إضافة الألوان والتفاصيل وبعض التأثيرات الأساسية بالإضافة إلى طريقة عمل الظلال والخلفيات. فتح نافذة عمل جديدة 1- افتح برنامج أدوبي اليستريتور واضغط على Ctrl+N لفتح نافذة عمل جديدة. اختر Pixels من Units drop down menu، أدخل القيم 665 width 830, height ثم 72ppi < screen < RGB < Advanced، تأكد من أن وضعية Align New Objects to Pixel Gridغير مفعلة قبل الضغط على موافق (ok). رسم الأشكال الأساسية 2- ارسم مستطيلًا من أداة M) Rectangle Tool) بالأبعاد 560x318 px وبلون أحمر. بمساعدة أداة Pen Tool ‏(P) ارسم الشكل الموضح أدناه. ثم أزل التحديد واحذف المستطيل الأحمر. 3- حدد الشكل الأسود الناتج من الخطوة 2 وانسخه بالضغط علىCtrl+c ثم Ctrl+f وغيّر لون حدود الشكل المنسوخ إلى اللون الأرجواني. باستخدام أداة A) Direct Selection Tool) حدد نقطة الارتكاز اليمنى من الجزء العلوي وحركها لليسار بمقدار 3 px. ثم انتقل لنقطة الارتكاز المقابلة على الجهة اليسرى وحركها بمقدار 3 px لليمين. حدد نقطة الارتكاز السفلية وحركها لأعلى بمقدار 40 px. عدّل الجزء السفلي كما يظهر في الصورة. 4- بنفس الطريقة وبتتابع الخطوات السابقة كرر رسم الشكل مرتين. 5- حدد الشكل باللون الأسود من الخطوة 2، أزل سماكة حدوده stroke وأعطه تدريجًا لونيًا كما هو موضح في الصورة أدناه. حدد الشكل باللون الأرجواني من الخطوة 3 وأزل سماكة حدوده ولوّنه بلون أخضر غامق درجة 60b020‏#. 6- حدد الشكل الأزرق من الخطوة 4 وأزل سماكة حدوده (stroke) ولون الشكل باللون البرتقالي الفاتح fae2ba#. ابق الشكل محددًا واذهب إلى (Gaussian Blur < Blur < Effect)، أدخل القيمة 5px radius واضغط ok. أكمل مع الشكل باللون الأخضر وأزل سماكة حدوده مجددًا ولون الشكل بالدرجة fe361a#. وابق على تحديد الشكل وأدخل قيمة 4px لتأثير Gaussian Blur. 7- لإضافة بعض التفاصيل للجزء الأخضر من شريحة البطيخ، أولًا ارسم شكل باللون الأخضر الغامق درجة ‏#3e6725 كما ترى في الصور التالية. تأكد أن الشكل الجديد ما زال محددًا واذهب إلى Gaussian Blur < Blur < Effect. أدخل قيمة 5px radius واضغط ok. 8- باستخدام الأدوات P) Pen Tool, (N) Pencil Tool) ارسم 5 أشكال كما هو موضح في الصور أدناه. بعد ذلك حدد الأشكال مرة أخرى وافتح قائمة Pathfinder من خلال الذهاب إلىPathfinder < Window واضغط على Minus Front. أزل سماكة حدود الشكل الناتج ولوّنه بلون أحمر فاتح درجة f2bec4 #. 9- حدد الشكل ذو اللون الأحمر الفاتح من خطوة 8 واذهب إلى Roughen < Distort & Transform < Effect. اتبع التعليمات كما يظهر في الصورة الأولى أدناه واضغط ok. أبق الشكل محددًا ثم اذهب إلى Grain < Texture < Effect واتبع التعليمات الظاهرة في الصورة الثانية واضغط ok. أضف تأثير Feather 15px على الشكل الناتج وغير إعدادات Blending Mode إلى Soft light وقلل الشفافية (Opacity) إلى 60%. 10- حدد الشكل الأول المنفذ في الخطوة 5 وانسخه بالضغط على Ctrl+C ثم Ctrl+F وضعه في المقدمة Ctrl+ Shift +Right Square Bracket. أزل لون التعبئة للشكل الجديد وأضف سماكة لحدوده بالخصائص التالية 1px yellow stroke. ركز على الصورة المرفقة الثانية، حدد نقطتي الارتكاز الموضحة بالأزرق ثم اضغط على أيقونة cut path at selected anchor points من شريط Properties. هذا سيجعل الشكل ذو اللون الأصفر بمسارين. حدد المسار العلوي مجددًا واستبدل لون حدوده باللون الأزرق. 11- حدد الشكل باللون الأزرق من خطوة 10 واذهب إلى (Zigzag < Distort & Transform < Effect). اتبع التعليمات كما يظهر في الصورة الأولى أدناه ثم ok. أبق المسار محددًا ثم اذهب إلى (Roughen < Distort & Transform < Effect). واتبع التعليمات كما تظهر في الصورة الثانية ثم ok. تأكد من أن المسار الحالي لازال محددًا واذهب إلى Appearance < Expand < Object. 12- حدد المسارين الأزرق والأصفر مجددًا، انقر بزر الفأرة الأيمن واختر Join من القائمة المنسدلة. انقر مرة أخرى بزر الفأرة الأيمن واختر Join. حدد جميع الأشكال التي تم رسمها بدءًا من الخطوة 2 وحتى الآن. انقر بزر الفأرة الأيمن واختر Make Clipping Mask من القائمة المنسدلة. رسم بذور البطيخ 13- ارسم شكلًا بيضاويًا بأداة ellipse toolبلون أزرق وبالأبعاد 16x37 px. حدد نقاط الارتكاز اليمنى واليسرى للشكل البيضاوي وحركهم للأسفل بمقدار 3 px. باستخدام أداة A) Selection Tool) والضغط على Shift حرك نقاط الارتكاز للوصول إلى الشكل المرفق أدناه. 14- حدد الشكل باللون الأزرق من الخطوة 13 أزل سماكة الحدود ولون الشكل بالدرجة d62911 #. أبق على تحديد الشكل وانسخه Ctrl+C ثم Ctrl+F. حدد الشكل المنسوخ وقم بتمويه التعبئة (sap the fill) بالضغط على أيقونة السهم المزدوج بجانب Fill and Stroke color swatches في صندوق الأدوات. غير سماكة التحديد إلى 2 px واستبدل لون التحديد بتدرج لوني. أضف تأثير Gaussian Blur 1px للشكل الناتج. حدد الأشكال التي تم رسمها في هذه الخطوة ثم Ctrl+G. 15- انسخ المجموعة التي كوّنتها في خطوة 14 بالضغط على Ctrl+C ثم Ctrl+F وضعها في مكان آخر. قبل أن تكمل حدد المجموعة الجديدة واضغط Ctrl+ Shift +G لإلغاء تجميعها. الآن باستخدام أداة P) Pen Tool , (G) Gradient TOOL) ارسم شكلًا باللون الأحمر الغامق كما في الصور أدناه. خبئ الشكل الجديد خلف الشكل ذو تأثير Blur effect. أخيرًا حدد الأشكال التي رسمتها في هذه الخطوة وجمّعها معًا Ctrl+G. 16- كرر نفس الخطوات السابقة لرسم المزيد من الأشكال. 17- انسخ عددًا من البذور التي رسمتها في الخطوة السابقة. ضعها بشكل جميل على شريحة البطيخ وغيّر من حجمها وفق ما تراه مناسبًا. من المفترض أن تكون النتيجة النهائية مشابهة لما تراه في الصورة التالية. حدد العناصر مجددًا وجمّعها معًا Ctrl+G. تصميم الخلفية 18- انتهينا من العمل على شريحة البطيخ وحان وقت العمل على خلفية الصورة. باستخدام أداة M) Rectangle Tool, (G) Gradient Tool) ارسم مستطيلًا بالخصائص التالية 830x665 px, light grayish blue كما هو موضح في الصورة. أضف شريحة البطيخة على الخلفية. 19- لإضافة تأثير أكثر واقعية للنتيجة النهائية سنقوم بإضافة بعض الظلال لشريحة البطيخ. انقر على أداة Ellipse Tool L وارسم شكل بيضاوي بالأبعاد 519x45 px، وضعها كما هو موضح في الصورة. حدد الشكل البيضاوي وأزل سماكة حدوده ثم املأه بتدرج لوني كما هو ظاهر في الصورة. أضف تأثير Gaussian Blur 6px على الشكل البيضاوي المحدد. ثم انقل الشكل البيضاوي خلف شريحة البطيخ. ترجمة -وبتصرف- للمقال Create a Tasty Watermelon Slice لصاحبه Bao Nguyen

في هذا المقال سيتم استعراض خطوات تحويل رسوم يدوية لشخصية كرتونية إلى لعبة ورقية ثلاثية الأبعاد باستخدام برنامج اليستريتور (Adobe Illustrator)، ستكون شخصية Frankenspoon هي محور فكرة التصميم. سيتم استعراض الأفكار والمهارات اللازمة للعمل لكن دون التطرق لشرح طويل ومفصل لأدوات البرنامج، المهم هنا هو توضيح خطوات صناعة لعبة ورقية يمكنك تطبيقها بنفسك بكل سهولة. 1ـ فكّر بالشخصية التي تود تطبيق الفكرة عليها، وارسمها رسمًا ثلاثي الأبعاد بحيث يمكن إفرادها بعد ذلك إلى مستويات رأسية وأمامية وجانبية بنفس فكرة إفراد المكعب إلى ستة أوجه، حافظ على أفكارك بسيطة قدر الإمكان لتسهيل العمل في الخطوات اللاحقة. 2ـ افرد الرسم الثلاثي الأبعاد إلى مستويات أفقية وحدد أماكن الثني، من الممكن عمل مكعب ورقي ثم القيام برسم الشخصية عليه ومن ثم إفراده وتفكيكه إلى شبكة مسطحة ستكون الأساس للقيام بخطوات الرسم الرقمية فيما بعد. بما أن موسم الهالوين قد اقترب رسمت بعض النماذج للوحوش لتطبيق فكرة اللعبة. 3ـ الخطوة التالية ستكون رسم الشخصية المختارة لكن بإضافة تفاصيل أكثر، بإمكانك عمل مسح ضوئي لرسومك اليدوية بحيث تستخدمها كمرجع للرسم على برنامج إليستريتور. 4ـ بعد قيامك بمسح الصور باستخدام ماسح ضوئي (scanner) أدرجها في طبقة جديدة في برنامج إليستريتور وقلل الشفافية. استخدم أداة pen tool وتتبع فيها خطوط الرسم واحرص على عمل أشكال كاملة مغلقة كشكل الفم مثلًا. 5ـ لإضافة تأثير أجمل للرسم استخدم تأثير فرشاة مشابه لقلم الحبر بحيث تكون الخطوط متنوعة الكثافة. طبق ذلك من خلال رسم دائرة مع الضغط المطول على مفتاح shift، بعدها باستخدام direct selection اسحب النقطة بشكل أفقي واستمر بالضغط على مفتاح shift. في النافذة الخاصة بالفرشاة انقر على أيقونة new brush واختر من القائمة new art brush، غيّر إعداد colorization إلى Tints ثم اضغط OK. 6ـ اجعل محاذاة الشكل أفقية وأدرجه كفرشاة جديدة، الآن أنت تملك الخيار في ما إذا كان الخط يتدرج من السميك إلى الرفيع أو العكس. 7ـ طبق تلك التأثيرات للفرشاة على الخطوط التي رسمتها في البرنامج باستخدام pen tool واضبط إعدادات stroke على suit. في حال كانت الشخصية التي تعمل عليها متماثلة بإمكانك رسم نصفها الأول فقط ثم نسخه ولصقه في الجهة المعاكسة وبذلك يكتمل رسم الشخصية بشكل أسهل وأسرع. 8ـ أكمل رسم الخطوط في الجهة الأمامية للعبة واستخدم إطار بنفس بعد الصندوق للحفاظ على أبعاد ثابتة في الرسم. 9ـ استخدم تدرجات لونية مناسبة وأعط خطوط الرسم بعضًا من الحياة، وأضف تأثيرات الظل والنور اللازمة لجعل الشكل وكأنه ثلاثي الأبعاد وإعطائه العمق اللازم. 10ـ أبق كل التأثيرات اللونية في الخلفية تحت خطوط الرسم الأولى باستخدام الأمر ‎CTRL/CMD+] والأمر CTRL/CMD+[. في محاولتي لرسم شخصية Frankenspoon أبقيت بعض الخطوط سوداء حادة وأخرى دمجتها أكثر خلال الرسم. 11ـ لعمل البنطال الخاص بشخصية Frankenspoon أدرج خلفية سوداء ثم ارسم خطوط أفقية فوقها بلون أفتح، حدّد الخطوط ثم باستخدام blend tool أضف المزيد من الخطوط عن طريق: (Object ‏> Blend ‏> Blend Options /‏ Object ‏> Blend ‏> Make) 12ـ عند الانتهاء من الجزء الأمامي للعبة، انتقل لرسم الأجزاء الجانبية الأخرى. انسخ إطار العمل الإرشادي وحركه إلى الموضع المناسب إما عن طريق إدخال الإحداثيات الأفقية والرأسية x,y بعد إجرائك للحسابات في ذهنك، أو اضغط على مفتاح Enter وأدخل عرض الإطار في الشريط الأفقي ليتم نقله إلى الجانب الآخر. أكمل برسم الخطوط وإضافة التفاصيل على الجوانب والأطراف. يمكن توسيع بعض العناصر كالبنطال والقميص بحيث تمتد بشكل كاف لتغطية الجسم. 13ـ انتبه لوضعية إفراد الشكل وضع الأجزاء العلوية في مكانها الصحيح بحيث يمكن إغلاقها معًا بشكل مناسب، وانتبه لأبعاد الطول والعرض للأجزاء جميعها بحيث تنطبق معًا بشكل صحيح. بإمكانك إضافة بعض التفاصيل كالشعر والتي ستعطي الشخصية مظهر أجمل عند تجميعها. 14ـ الخطوة التالية ستكون رسم الأذرع للشخصية وتلوينها كما سبق. وجمّعهاا بحيث يمكن طيها على جوانب اللعبة. 15ـ احرص على عمل فتحات جانبية لطي الأذرع فيها أو لتبسيط الأمر بإمكانك لصقها على جوانب الشكل دون الحاجة لعمل فتحات. 16ـ أضف بعض الهوامش على أجزاء الشكل لتسهيل لصقها وتجميعها ببعضها. بحيث تربط بين الجوانب التي ستتصل معًا عند طي اللعبة. 17ـ بإمكانك تطبيق الهوامش من خلال رسم مستطيل ثم باستخدام direct selection tool حدد نقطتين طرفيتين على الضلع الطويل واذهب إلى object ‏>Transform ‏> Scale وأدخل قيمة 80% لعمل شكل الهامش ولونها وفقًا للتصميم بحيث تبدو مرتبة عند تجميعها معًا. 18ـ حدد على الرسم أماكن القص والثني برموز خاصة أو بخطوط مرجعية، مثلًا يمكنك تمييز مناطق الثني بعمل خطوط متقطعة بينما يمكنك تمييز خطوط القص بخط واحد متصل. استخدام أداة Scissors tool سيكون مفيد جدًا لعمل خطوط محيطة بالأشكال وبالتالي تمييز المتقطع والمتصل منها. لا تجعل خطوط الهوامش ظاهرة بشكل قد يشوه التصميم ولكن بقدر كافٍ لتمييزه ورؤيته. 19ـ أضف ملاحظاتك النهائية لطريقة تجميع الشكل وجعلها بسيطة وواضحة قدر الإمكان. 20ـ أخيرًا افرد التصميم على ورقة بحجم A4 أو Letter وبذلك يمكنك مشاركته مع الآخرين، وأضف بعض الشعارات و الكتابات أو أي معلومات شخصية أخرى. ترجمة -وبتصرف- للمقال Design and Create Your Own Fun Flat Pack Toy لصاحبه Chris Spooner

كنت أود الخوض في تجربة التصميم تبعًا للأسلوب (low-fi style) منخفض الدقة والذي يرتبط عادة بالأسلوب الدعائي الجريء والثوري، لكنني لم أقرر بعد ما الفكرة الأساسية التي سيتمحور حولها التصميم. صادف ذلك مشاهدتي لإعلان فيلم Rogue one حينها لمعت في رأسي فكرة التصميم المستوحاة من الفيلم وتتابع أحداث حرب النجوم! تابع الشرح التوضيحي التالي لتتعرف على طريقة تصميم بوستر دعائي باستخدام برنامج الفوتوشوب وذلك بالاعتماد على تأثيرات الطلاء المرشوش والخلفيات المعتمة وبتأثير العمل اليدوي رخيص المظهر. التصميم المراد تطبيقه في هذا الشرح يصور الخطاب الثائر لـRebel Alliance. سيكون التصميم على طراز النشرات والملصقات التي تصنعها الحركات الثورية السرية والتي تعتمد على طرق إنتاج منخفضة التكاليف مثل قص ولصق الصور الفوتوغرافية وأسلوب الكتابة اليدوي الحر والمطبوعات منخفضة الجودة. سنطبق تلك الأفكار بشكل رقمي 100% ولكن بالاعتماد على بعض المواد يدوية الصنع والتي ستساعد على تحقيق القيم الجمالية المطلوبة للملصق. 1- ابدأ بتنزيل صورة لخامة ورقية وافتحها باستخدام برنامج الفوتوشوب. 2- اضغط على CMD+A لتحديد الكل متبوعًا بضغطة واحدة على زر الفأرة الأيمن، من القائمة التي ستظهر اختر transfer selection لتحرير منطقة التحديد ثم اضغط ضغطة مطولة على مفتاح Alt وصغّر منطقة التحديد لعمل حاشية. املأ المنطقة المحددة بدرجة لونية dcbd88# وغير وضعية دمج الطبقة إلى Multiply. 3ـ ابحث على صورة Darth Vader في محرك بحث جوجل والصقها في منطقة العمل. سنقوم بتجاوز حقوق الملكية في هذا الشرح التوضيحي ونأمل أن شركة ديزني لن تبدي غضبها على ذلك! 4ـ قلل الإشباع اللوني للصورة، ومن ثم اذهب إلى قائمة filter واختر منها noise ثم add noise. أدخل القيمة 5% وحدد الخيار Gaussian and Monochromatic. 5ـ لإضافة تأثير الصور المطبوعة اذهب لقائمة filter واختر sharpen ثم smart sharpen. واملأ الحقول كالتالي **Amount 400% ،radius 15px ،0% noise **. 6ـ استخدم أداة التحديد (polygonal lasso tool) وتتبع حدود الشكل الخارجي ثم اذهب إلى قائمة select واختر inverse. من لوحة المفاتيح اضغط على backspace لإزالة الخلفية. 7ـ حمل الفرشاة ذات التأثير الخشن rough and grungy photoshop brushes أو استخدم فرشاة جافة Dry brush strokesوحدد الحجم وزاوية التأثير من مربع الإعدادات واصنع بعض اللطخات على الوجه. 8ـ استخدم نمط خط مناسب لإضافة تأثيرات الكتابة اليدوية الحرة، بإمكانك استخدام نمطAgainst مثلًا والذي يعكس نمط كتابة فوضوية. 9ـ لإظهار خط يدوي واقعي من المفترض أن يتم رسمه يدويًا وإدخاله على الماسح الضوئي بعد ذلك، لكن العديد من أنظمة عرض وتصميم الخطوط الحديثة لديها خيارات بديلة للتحكم في مظهر الخطوط بشكل أفضل. 10ـ ألصق صورة لجنود العاصفة في فيلم حرب النجوم وضعْها أسفل صورة Darth Vader وعدل حجمها بحيث تظهر خلف رأسه، ليس من الضروري أن تكون الصورة منخفضة الجودة لإعطاء التأثير المطلوب. قلل إشباع الألوان في الصورة وأضف تأثير grain 5% كما في الخطوات السابقة. 11ـ تابع التأثيرات بعمل smart sharpen filter لإعطاء تأثير الصور المطبوعة، واضبط القيمة على 250% لتلاشي ظهور النقاط البيضاء بشكل مبالغ فيه. 12ـ استخدم أداة التحديد polygonal lasso tool على حدود صورة الجنود لإظهار تأثير حواف مقصوصة حادة ثم اعكس التحديد واحذف الخلفية. 13ـ استخدم إحدى تأثيرات الفرشاة بزاوية مناسبة لعمل بعض اللطخات على وجوه الجنود، غير شكل التأثير كل مرة لتلاشي التكرار. 14ـ افتح صورة خامة الورق الأولى في نافذة جديدة وارسم تحديد بشكل مربع حاد الأطراف باستخدام أداة التحديد (polygonal lasso tool) انسخ والصق هذا التحديد إلى منطقة العمل. 15ـ باستخدام أداة الكتابة أضف المزيد من النصوص على العمل الفني. الإعلانات الشبيهة بالتي نصممها هنا تستعمل خيارات عشوائية لحروف مقصوصة من الجرائد، لكن نمط الكتابة المستعمل هنا Blackout Noon سيمنحك المظهر المطلوب للمطبوعات منخفضة الجودة. 16ـ اضغط على CMT+T للتحكم في حجم قصاصات الورق بحيث تتلاءم مع حجم الكتابة وامنحها بعض العشوائية. 17ـ انقر نقرة مزدوجة على الطبقة التي تحتوي على صورة القصاصات الورقية واضبط إعدادات الظلال (drop shadow) كالتالي: colour‏: black blind mood‏: linear burn opacity‏: 35% distance:‏ 2px spread‏: 1px size‏: 3px وهنا ستحصل على تأثير مشابه لتأثير فن الملصقات (collage). 18ـ أكمل إدخال كلمات "Destroy the empire" كل كلمة على حدة بأحجام مختلفة، ثم أضف صورة لشريحة ورقية وأدرجها في الخلفية ووحد تأثير الطبقات من خلال ونسخ ولصق التنسيق copy and paste layer style 19ـ نفس التأثير السابق الذي تم تطبيقه على النص من الممكن تطبيقه مرة أخرى على أي عنصر في البوستر لكن بعكس التأثير فتصبح الخلفية باللون الأسود والكتابة باللون الأبيض وذلك بالضغط على CMD+I من لوحة المفاتيح. 20ـ حمل صورة لشعار Rebel alliance وضعها في مكان مناسب في التصميم. اضغط على CMD وانقر على الطبقة لتحميل التحديد الخاص بها، ومن ثم اذهب إلى قائمة select واختر modify ثم feather، وأضف قيمة 10 px ثم أخف تلك الطبقة. 21ـ أدرج طبقة جديدة واستخدم تأثير الفرشاة spray paint Photoshop brushes لملء التحديد بلون أحمر ‎#cc0705. وبذلك يتم تعبئة منطقة التحديد بتأثير لوني مرشوش وليس كطبقة لونية مصمتة. 22ـ غير إعدادات الفرشاة وغيّر حجمها لإضافة بعض اللطخات حول الحواف. 23ـ أعد تحميل تحديد الشعار من الطبقة الأصلية واستخدم فرشاة بتأثير الرش واملأ منطقة التحديد بشكل ناعم ومتموج. 24ـ قلل نسبة التعبئة إلى 96% للسماح بالعناصر الخلفية بالظهور، فيبدو وكأن الشعار قد تم تنفيذه بطريقة الاستنسل (stencil). 25ـ ألصق نسخة من شعار الإمبراطورية المستوحى من الفيلم ثم ارسم دائرة باستخدام أداة رسم الشكل البيضاوي، أضف تأثير stroke بلون أحمر كبداية لتصميم علامة الرفض (NO). 26ـ ارسم خط قطري يتقاطع مع الدائرة ووحّد خصائص كل منهما، بعدها حدد الشكلين وقم بـتنقيطها (rasterize) ثم ادمجهم في طبقة واحدة من خلال الضغط على CMD+E. 27ـ حمل مجددًا تحديد الشعار وعدل قيمة feather واتبع الخطوات السابقة لعمل تأثير الاستنسل المطبوع. 28ـ كرر العملية مع شعار الإمبراطورية ولكن هذه المرة استخدم اللون الأسود لتحقيق بعض التناقض والحدة مع اللون الأحمر. عدل قيمة feather هذه المرة إلى 5px نظرًا لصغر حجم الشعار وكثرة التفاصيل الموجودة فيه. 29ـ لإنهاء العمل بمزيد من الخامات والتأثيرات الحادة قم بنسخ الخلفية الورقية واسحبها إلى أعلى الطبقات، اذهب إلى قائمة Filter وأضف قيمة 5% noise. 30ـ غير نظام دمج الطبقة (blending mode) إلى multiply وأضف تأثير smart sharpen filter لإظهار التفاصيل وإضافة المزيد من الحدة للتصميم. تحقق من العمل ككل واختر قيمة مناسبة للحصول على نتيجة مرضية. هكذا إذن نحصل على تصميم بروح ثورية متمردة اعتمادًا على أسلوب تصميم (low-fi poster) حيث تظهر تأثيرات الطباعة اليدوية الرخيصة لكن بطريقة رقمية وبتنوع ملهم في الخامات والمواد المستعملة. وكل ذلك أبرز بطل التصميم وكأنه الثائر الأكثر فوضى في المجرة. ترجمة -وبتصرف- للمقال How To Create a Grungy Star Wars Propaganda Poster in Photoshop لصاحبه Chris Spooner