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

عندما تقوم بالضغط على إعلانٍ لمنتجٍ أو خدمة ما تَهمك، يظهر أمامك ثلاثة منتجاتٍ بثلاثة أسعارٍ مختلفة. تقوم بمسح القائمة بسرعة ثم تختارُ أحدها كليًا بمفردك. هل يحصل ذلك فعلًا؟ غالبًا لعبت الألوان والأحجام وتوضع السعر الذي قام بتحديده مصمم جرافيكي ذكي دورًا في السعر الذي اخترته. يلعب التصميم دورًا ضخمًا في تفضيل خيارات الأسعار بشكلٍ خفيّ لدى المستهلكين، وفي استراتيجية الأسعار بشكلٍ عام. نريد في هذا المقال أن نتعمّق في هذه المسألة ونوضّح كيفيّة تشكيل عنصر تصميمي، كخيار سعر مفضّل، يَبرز للمستهلك من خلال بعض الخدع البسيطة. لون حسب الأرقام: وظف الألوان لترشد المستخدمين إلى أفضل منتجاتك وأنواعها لا يمكنك إجراء محادثةٍ حول التصميم دون إعراب الآراء حول أهميّة الألوان. إن نظرية اللون هي الحديث المفضل للأطباء النفسيين، حيث تزيد الألوان الدافئة من الطاقة؛ أما الألوان المُعتدلة فتبعث على الهدوء والتأمّل. الأخضر يجعل الأشخاص يشعرون بالجوع، أما الأزرق فيجعلهم يشعرون بالامتلاء. هل هناك دليل لدعم ذلك؟ في الحقيقة يوجد، ولكنّك بكل الأحوال لا تريد لاستراتيجية الأسعار الخاصة بك أن تجعل بطون الناس تصدر أصواتاً غريبة، وإنما تريد أن تجذب العين إلى مجموعة الأسعار المفضّلة لمنتجاتك وخدماتك. الألوان الأساسيّة، الأحمر والأزرق والأصفر، هي الألوان التي يُعتقد أنها تلفت النظر بالشكل الأكبر. ولكن عندما يكون الموقع مملوءًا بألوان أولية فقط سيبدو مثل عدّة تلوين مُبعثرة. عوضًا عن ذلك نقترح تقنيّة ألوان تدعى "التقسيم المُتمّم". الألوان المتمّمة هي ألوان تقع بالجهة المعاكسة لبعضها البعض على دائرة الألوان: الأحمر والأخضر، الأزرق والبرتقالي، الأصفر والبنفسجي. عوضًا عن استخدام هذين اللونين فقط، اختر لونًا أوليًّا وأحِطه بعدة تدرّجات من الجهة المعاكسة. هذه التقنية ستجعل لونك الأولي يبرز بقوة، مشدّدًا على النص الذي ستلوّنه به. ألق نظرة على Zcope كمثال مثيرٍ للاهتمام على هذا المبدأ. إلى أين تذهب عينيك مباشرةً؟ هل حقا الأكبر أفضل؟ التمييز ببراعة بين أحجام المنتجات/الأنواع المستهدفة هناك خلاف كبير في مجتمع التصميم حول الحجم، حيث يؤمن بعض المصممين أنه كلما كان حجم الكتابة أو المساحة التي تعرِض السعر أكبر كلما زادت احتمالية أن يدرس الزبون هذا العرض ويختاره. بينما يستنكر ذلك مصممون آخرون بحجّة أنه لا يمكن خداع الزبائن بتلك السهولة. ومن وجهة نظر نفسيّة بحتة، نعم، الكتابة والمساحة الأكبر ستجذب انتباهًا أكبر. ولكن هناك خيطٌ رفيع بين أن يكون العنصر كبيرًا بما يكفي ليجذب الانتباه وبين الكبر الذي يجعل الزبون يشعر أنّك تحاول خِداعه. نريد هنا أن نسعى إلى التوسط. إن Shopify يستخدمون الحجم في تمييزهم بين العروض بتحفّظ شديد، ولكنني أضمن أن المجموعة تلك تحصل على المزيد من النقرات بل وحتى الطلبات. العين الكسولة: وضع المنتجات الأفضل في المركز يحقق النتائج المرجوة هنالك شيءٌ يجب أن تعرفَه عن الجسم البشريّ؛ إنه آلة، آلةٌ فعّالةٌ جدًا. وبإمكاننا القول أن الجسم البشري فعّال لدرجة تجعله كسولًا. إن كان بمقدرة الجسم تخطي مهمّة غير ضروريّة سيقوم بذلك. وإن كان بإمكان الدماغ التوصل إلى استنتاج ما بأقل قدر ممكن من البيانات، سيقوم بذلك أيضًا. وكذلك إن كان باستطاعة العين التركيز على سعرٍ يبدو معقولًا دون الحاجة إلى البحث في كل الصفحة، سوف تفعل ذلك بكل تأكيد. بإمكان هذه "العين الكسولة" أن تكون صديقة المصمم المفضّلة. في حال كنت تقوم بتصميم موقع يعرض عدّة منتجاتٍ أو خدماتٍ ذات أسعار مختلفة، قم بوضع خيار السعر المفضّل في منتصف الصفحة. تمتصّ العين مباشرةً المعلومات التي تقع أمامها، وبالتالي يكون خيار السعر المفضّل هو ما ستراه العين أولًا. قام موقع Shopify المذكور سابقًا بتوظيف هذه الطريقة في الأعلى إلى جانب استخدام اللون للتمييز بين العروض. ألقِ نظرة على Basecamp، هذا مثالٌ على خطّة مصمّمة خصّيصًا من أجلك. طبعًا تلك التقنية لن تقوم بخداع أحد، حيث سيقرأ الزبائن جميع خيارات الأسعار التي تقدمها، وسيختار المستهلكون الحذقون السعر الذي يناسبهم بدقّة. ولكنك بالرغم من ذلك ستؤثّر على قرار الزبون بشكل خفيّ. لأن الخيار المتمركز في الصفحة سيتم رؤيته أولًا، وسيفترض الزبون أن الخيار المتوسّط هو الأكثر شعبيّة، والموصى به أكثر وحتى أكثر ما يناسب حاجاتهم. ختام بشكلٍ عام، التصميم هام لخطّة الأسعار الخاصة بك بشكل حيوي، لأنه يدعم الصّفحة التي تعرضها. ولكن تمامًا مثل تسعير المنتج، التصميم هو عمليّة بحاجة إلى التدقيق، التعديل والتحديث مع الوقت لتناسب حاجات أي مستهلك وقيَمه. ترجمة -وبتصرف- للمقال: 3Design Tactics for Software Pricing Optimization لصاحبه Nick Beske. حقوق الصورة البارزة: Designed by Freepik.

يمكن لأي تعديل ومهما تناهى في الصِغر أن يكون له القول الفصل بين التصميم الجيّد والتصميم الآسر، وبالأخص مع تصاميم الويب، ويميل مُصممي مواقع الإنترنت إلى التركيز على الصور وألوان الصّفحة وتوزيع عناصرها والخطوط المستخدمة وإليه من هذه العناصر، ولكن يوجد بين السطور أمور أخرى يجب الاهتمام بها فيما عدا الجمالية، وهذا هو شأن المسوّقين الإلكترونيين، والذي يقضون جلّ وقتهم في الدراسة والاختبار لمعرفة كيف للمستخدم النهائي أن يتفاعل مع الموقع، فمثلًا: أين يتجه نظر الزائر في الزيارة الأولى؟ على ماذا سينقر؟ كم يقضي من الوقت في صفحة معينة وأخرى من مثيلتها؟ إن كنت تملك موقع وتحاول فيه الحصول على زوّار ودفعهم نحو القيام بإجراء، مثلًا: شراء منتج، أو التسجيل في النشرة البريدية newsletter، إذًا سيتوجب عليك الاهتمام بالأرقام والإحصائيات، وتصميم الجزئيات الصغيرة مثل أزرار دعوة الإجراء Call To Action (وهي الأزرار من نوع "اشترِ" أو "سجّل الآن") يُمكن أن يكون لها تأثيرًا قابلًا للقياس في طريقة تفاعل الزوار مع موقعك (تجربة المستخدم، أو اختصارًا UX) وعلى نتائج هذه التفاعل، فزرّ دعوة الإجراء CTA ذو التصميم الجيّد سيُساعد على تحويل الزوّار إلى زبائن، أو ربما متبرعين، أو مشتركين، أو أيًا كان الإجراء المطلوب. كيف يمكن تصميم زر دعوة إجراء CTA قادر على دفع الزوار للمتابعة قدما؟ هذا بيت القصيد ومربط الفرس، إليك أبرز الإرشادات بجانب أمثلة من فضاء الشبكة العنكبوتيّة: كيف يصمم زر دعوة الإجراء Call To Action؟ حجم زر دعوة الإجراء CTA إن المطلوب هو استجابة الزوّار إلى دعوة الإجراء عبر النقر على زر، فإذًا على هذا الزر أن يكون بارزًا وواضحًا ويجذب النظر مباشرةً، وهذا هو أساس ومفتاح نجاح أزرار دعوة الإجراء، ولكن مع الانتباه إلى عدم الغلو في الحجم لكيلا تبدو الصّفحة غير متناسقة وينقلب السحر على الساحر. يُمكن اختبار بروز الزر عن طريق إجراء اختبار "squint test"، وذلك عن طريق الابتعاد قليلًا عن الشاشة وإغلاق العينين بشكل غير كامل إلى إن يتمّ تغشية عناصر الصفحة، وإن استطاع الزر الحفاظ على بروزه حينها يمكن القول إن الزر ذو بروز مناسب. لون زر دعوة الإجراء لا يوجد لون سحري قادر على تقديم معدّلات عالية ولجميع الحالات والمواقع، رغم ذلك يبقى اختيار اللون اختيارًا هامًا ويجب الفصل فيه، تملك بعض الألوان دلالات قوية وارتباطات سيكولوجية، والتي يجب أخذها بعين الاعتبار، بالإضافة إلى وجوب انسجام هذه الألوان مع تصميم الموقع ككل. تَستمد الصّفحة التّالية ألوانها من تضارب الألوان التقليدية، وذلك عبر استخدام زر أخضر فاتح مع تدرّج بين البرتقالي الأحمر، والذي يُسيطر على باقي أجزاء الصّفحة، فأزواج الألوان والتي هي متعاكسة بطبيعتها، مثل التضاد بين الأحمر والأزرق، والتضاد بين الأخضر والبرتقالي، تملك تأثير مرئي عالي وستجذب النظر أكثر. يجب موازنة اللون مع الحجم في سبيل تحسين الظهور والمرئية الخاصّة بالزر، على سبيل المثال، يُمكن لزرٍ كبير مع لون ساطع أن يعطي نتائج عكسيّة، وعليه فإن تدرّج لوني خفيف مع الحجم الكبير سيفي بالغرض، وعلى الجهة الأخرى، فيمكن لزر صغير أن يستفيد من تدرّج لوني غامق ليحصل على البروز والوضوح اللازمين. هيئة زر دعوة الإجراء إن زر دعوة الإجراء CTA يمكن أن يفقد قيمته وهدفه ويضيع في الزحام إن لم يُدرك الزوّار أنهم قادرون على الضغط عليه، فاستخدام الأزرار هو أكثر من مجرّد تصميم وتقليد للواقع، بل هو وظيفة وأداة للتفاعل، والتي يبحث عنها المستخدم ويتوقّع وجودها حينما يتصفّح المواقع. إن الأمر المهم هو أن يبدو الزر في حقيقة الأمر زرًّا قابلًا للضغط، إن الشكل هو لاعب قوي في المعادلة هنا، حيث تأتي الأزرار عادةً بشكل مستطيلي إما بزوايا دائريّة أو حادّة، فإن تمّ اختيار شكل مختلف، فيجب جعلها واضحة وعدم ترك مجال للشك في أنها أزرار قابلة للضغط، ولتحقيق ذلك يُمكن الاستفادة من الظلال، أو شيء من البعد الثالث 3D. التباين والتضاد في أزرار دعوة الإجراء يمكن اعتبار التباين جزئيّة هامّة لأي تصميم، ولكن ومن أجل أزرار دعوة الإجراء call to action، يجب التفكير بها بطريقتين: أوّلًا: توافق لون الزرّ مع لون الخلفية: إن امتزج لون الزر مع لون خلفية الصفحة، فمن المحتمل جدًا فقدان بروز زرّ دعوة الإجراء CTA، وعليه يجب على الزر أن يكون بارزًا بدون التعارض مع الخلفية أو الألوان الأخرى في الصفحة. يُظهر المثال التالي، كيف تماشى تباين الأزرق الداكن مع الخلفيّة الصفراء، بالإضافة إلى عدم بروز الزر الآخر بلونه الخافت والقريب من لون الخلفية وليمثّل الخيار المُستبعد للمستخدم بجانب الإنشاء copywriting المحكم. ثانيًا: لون النص مع لون الزر: إن وضوح النص المكتوب داخل الزر هو من الأمور الهامة التي لا يجب تجنّبها، فبجانب اختيار خط مقروء وذو حجم مناسب، فإن اختيار لونًا ملائمًا للنص سيُساعد على تحسين قابليّة القراءة، ويجب دائمًا تجنّب الألوان التي هي قريبة جدًا من لون الزر نفسه، وبالإضافة إلى تجنّب الألوان التي تصبح غير واضحة عندما تمتزج مع بعضها (نص أبيض مع زر أصفر مثلًا)، والألوان كالأبيض مع الألوان الداكنة والأسود أو الأزرق الداكن مع الألوان الفاتحة هي ألوان مناسبة وتعطي نتائج جيّدة في معظم الأحيان. الموضع الأنسب لزر دعوة الإجراء ستكون الخطوة التالية هي تَموضُع الزر في الصفحة، وسيعتمد مكان الزر المناسب على مخطّط الصّفحة layout وتصميمها في أغلب الحالات. يُنصح عامةً بتوضيع الزر أعلى الصّفحة كما هو الأمر مع الجرائد، والتي تخصّص النصف العلوي من الصّفحة الأولى إلى الأخبار الهامة، وعليه من الممكن تطبيق نفس الفكرة في صفحة الموقع، وذلك من خلال توضيع الزر في المنطقة التي يراها الزائر أولًا والتي لا تستدعي التدرّج scroll down، ومهما كان موضع الزر، فإن إحاطته بالمساحة البيضاء −بعيدًا عن مزاحمته بالعناصر المختلفة− سيساعد على جذب الانتباه وإعطائه وزن بصري. الصياغة المناسبة لزر دعوة الإجراء Call-to-Action مخاطبة الزائر إن استخدام جمل فعلية تتحدّث إلى المستخدم وتسأله بوضوح تام إلى أخذ إجراء معيّن سيكون لها أثر إيجابي أكثر منه من استخدام الجمل الأسمية، فمثلًا، أيهما أفضل؟ زرّ ذو محتوى "اشترِ الآن" أم "صفحة الشراء"؟ ماذا عن زر يحتوي على عبارة "اختبر المنتج مجانًا" أم "نسخة تجريبية"؟ وبالتالي كلما كانت صيغة زر دعوة الإجراء ذات طابع شخصي، كلما كانت فرصة الاستجابة إلى الدعوة أكبر. العمل على ابتداع حاجة ملحة في نفس الزائر لا يُمكن الحصول على نتائج مرضية ودفع الزائر إلى النقر على الزر من خلال استخدام الطابع الشخصي فقط، بل يجب تقديم محفّز من نوع ما، والذي سيكون من خلال صياغة دعوة الإجراء call to action، حيث يمكن استخدام كلمات مثل "الآن" أو "اليوم"، أو "لفترة محدودة" أو تقديم عروض من نوع: "حسم لأوّل عشرة زبائن" وهكذا. يمكن لهذا الأسلوب أن يقدّم نتائج جيّدة في حض الزوّار على التفكير بأنهم يخسرون شيء ما في حال أنهم لا يُقدِموا على القيام بإجراء، ولكن يجب الانتباه إلى نقطة هامّة هنا، وهي الوفاء بالوعد، بمعنى لا يجب خداع الزبون وتقديم وعود لا يُمكن الوفاء بها (عن قصد أو غير قصد). العفوية في صيغة أزرار دعوة الإجراء لا يُفترض على دعوة الإجراء أن تُكره الزوّار على تلبية الدعوة، كما لا يجب التلاعب بالألفاظ فقط لكسب زبون جديد، فإن كانت النبّرة التي تستخدمها صيغة دعوة الإجراء ودودة وتحمل في طياتها قدر من الرحابة، فسيشعر الزائر بنوع من الارتياح بدل من أن تكون النبرة نبرة تسويقية بحتة، فصيغة غير متكلفة مثل "لنتواصل" أو "انضم إلينا" هي صيغة تدفع الزوّار إلى التواصل والاستجابة إلى دعوة الإجراء والتفاعل مع الموقع. الاختصار وتبسيط الأمور يجب على دعوة الإجراء CTA أن تجعل من الأمور واضحة وضوح الشمس، وتوضّح ومن اللحظة الأولى ماذا على المستخدم أن يتوقّع من استجابته إلى النقر على زر CTA، حيث يُساعد الحفاظ على نص واضح ومقتضب على تجنّب التباس من أي نوع، والذي قد يؤدي إلى تردّد المستخدم وعدم استجابته إلى الدعوة، ولكن وفي بعض الأحيان قد يتطلّب الأمر بعض التوضيح والذي قد لا يتّسع له المجال داخل الزر، وفي هذه الحالة، يُمكن كتابة معلومات إضافية خارج الزر (عادة ما يكون ذلك أسفل الزر وبخط صغير). التلميحات البصريّة مع أزرار دعوة الإجراء إن تحسين نص الزر بالتلميح البصري مثل أيقونة أو رسوم توضيحية يمكن أن يُساعد على إنشاء ارتباط مباشر وإضافة توضيح مباشر لزر دعوة الإجراء، فعلى سبيل المثال، يمكن استخدام سلّة الدفع الإلكترونيّة shopping cart للدلالة على المشتريات، أسهم متجهة نحو الأعلى أو الأسفل للدلالة على التحميل/الرفع upload والتنزيل download وهلم جرّا، مع الانتباه إلى نقطة عند استخدام هذا النوع من التلميح، وهي تضمين مساحة كافية بين العناصر وحواف الزر وذلك لكيلا تبدو العناصر متداخلة ومزدحمة فيما بينها. دراسة حالات واختبار A/B ستفيد العديد من مصمّمي الويب من اختبار A/B وذلك لمقارنة تأثير تصميمين مختلفين وجمع معلومات عن أداء كل منهما، ويُمكن للمسوّق إعداد الاختبار بنفسه أو الاعتماد على أدوات معيّنة تسهّل من العلمية، وسنتطرّق إلى بعض الدراسات التي تتحدّث عن هذا النوع من الاختبارات، حيث شارك موقع ContentVerve.com العديد من الحالات والنتائج فيما يخص أزرار دعوة الإجراء call-to-action buttons، طبعًا لا يوجد خلطة سحرية تُناسب جميع المواقع، ولذلك الاختبار هو الفيصل والحكم. لون الزر: يوضّح المثال في الصورة السابقة كيف أنه عندما تمّ تغيير لون الزر من الأزرق إلى الأخضر ارتفع معدّل المبيع بشكل ملحوظ، ويعود السبب على ما يبدو إلى الظهور والمرئية، حيث أن الزرّ الأزرق مشابه إلى لون النص المحيط بالزر وبالتالي امتزج معه ولم يبرز، ولكن وعلى الجهة المقابلة فإن الزرّ الأخضر كان أكبر حجمًا وذو سطوع لوني بارز، مما سمح له بالظهور ليقدّم هذه الفعالية، ولذلك يُنصح دائمًا باختيار لون واضح وجلي ومُتباين مع بقية أجزاء الصّفحة. يتوضّح من المثال التالي أيضًا كيف أن امتزاج ألوان الزر مع النص لها تأثير واضح على النتائج النهائية: تناقصت عدد النقرات في المثال السابق بعد تغيير اللون من الأسود إلى الأصفر، وعلى ما يبدو أن السبب في ذلك يؤول إلى أن النص مشابه جدًا إلى لون الزر، وبالتالي يُنصح دائمًا باختيار لون خط يتمايز بشكل مناسب مع لون الزر، فالأسود مع الألوان الفاتحة، والأبيض مع الألوان المعتمة/الغامقة عادةً ما تعطي نتائج إيجابية. تعبير/إنشاء الزر: يتوضّح من المثال كيف أن اختيار كلمات واضحة وصريحة تعبّر بالضبط عما سيحصل عليه الزائر لدى استجابته لدعوة الإجراء، قدّمت نوع من الطمأنينة للزائر ودفعته نحو التفاعل مع الموقع بعد أن أدرك نتائج استجابته لهذه الدعوة، وكان ذلك من خلال تحسين الإنشاء الخاص بالزر وإضافة عبارة "اختر المركز الرياضي" بعد أن كانت "احصل على العضوية" فقط، والنتائج كانت زيادة غير متوقعة بعدد النقرات والتي وصلت إلى زيادة قدرها 200%، ويستخلص من ذلك كيف أن التوضيح واختيار الصيغة الصحيحة من خلال توضيح وتفسير نتيجة النقر على الزر له أثر كبير على النتائج. الختام يمكن للتفاصيل الصغيرة أن يكون لها تأثيرًا بليغًا، سواءً مع التصميم عمومًا أو عند إنشاء أزرار دعوة الإجراء CTA، لذلك من المستحسن مراجعة أزرار دعوة الإجراء واختيار ما يناسب المنتج والتصميم، ويمكن الاستعانة ببعض الأدوات مثل: buttonoptimizer.com لإنشاء أزرار تلبّي الحاجة وقادرة على تقديم معدّلات تحويل عالية. ترجمة وبتصرّف للمقال Design a Call To Action Button That Converts: Tips, Best Practices, and Inspiration لصاحبته Janie Kliever.

يختلف تصميم الأيقونات Icons كثيرًا عن تصميم الرسومات Graphics، فهناك الكثير من القواعد والحدود التي لا يمكن تخطّيها أثناء تصميم الأيقونات. وفي أي منصة ومهما اختلف التصميم، فالأيقونة دائمًا تُعَد أداةً لإيصال فكرة معينة، فالأيقونات هي تصاميم صغيرة تُغني عن استخدام الكلمات وتحسّن التصميم عمومًا، نظرًا لعدم إمكانية تزويد المواقع والتطبيقات بتصاميم ومعلومات مرئية متكاملة لكل خطوة، وهذا ما يزيد من جدوى استخدام الأيقونات. يجب مراعاة الكثير من الجوانب أثناء تصميم الأيقونات لتتميزها عن الرسومات. ولتوجيهك في هذا المجال إليك قائمةً تجمع 14 خطأً لتجنّبه، حيث نعرض فيها أخطاءً فادحةً يسهل الوقوع فيها، مع كيفية تجنبها. 1. التصميم دون استراتيجية وخطة واضحة إياك البدء بتصميم دون تخطيط مسبق ووضع خطة استراتيجية واضحة للتصميم. قد لا تحتاج لتخطيط محكم ومناقشة لاستراتيجيات الأيقونات بحد ذاتها، لكن الأمر جوهري للعلامات التجارية وتجربة المستخدم، وهذا ما يفعله المحترفون والساعون للكمال، لذا ناقش المشروع كاملًا بأهدافه ومتطلباته مع عميلك وفريقك، ويُفضّل وضع الأهداف بعيدة المدى نصب عينيك قبل التفكير بمرحلة التصميم، إذ ستجد فرقًا في التصميم وتجربة المستخدم عندما تتبع أسلوبًا منظمًا جيدًا ومتسلسلًا واختيارًا مناسبًا لمواقع الأيقونات، وكذا خطةً محكمةً للتصميم، فقد لا تلبّي أيقوناتك دوافع التصميم وتطلعات تجربة المستخدِم بدون استراتيجية أساسية وتخطيط مسبق. 2. إهمال تنوع أبعاد الشاشات أثناء تصميم الأيقونات عليك أخذ أبعاد الشاشة التي تُعرض فيها أيقوناتك بالحسبان، حيث يجب إبقاء الأيقونات واضحةً مهما اختلفت أبعاد الشاشة، أي يجب تصميم الأيقونة بحيث تتكيف بمرونة مع اختلاف الأبعاد. تستطيع إضافة عناصر وتفاصيل لإبراز تصميمك في تصميم الرسومات، لكن في تصميم الأيقونات تكون المساحة محدودةً جدًّا، بحيث أن إضافة التفاصيل سيزيدها تعقيدًا وسيؤثر على التصميم عند اختلاف الشاشة، فقد تبدو مشوشةً وغير واضحة في الشاشات الصغيرة، لذا حافظ دومًا على بساطة التصميم وفكّر بالأحجام المختلفة للشاشات، وكيف ستبدو أيقوناتك فيها، وتجنّب تصميم الشكل على حساب وضوح الأيقونات. 3. الاختيار الخاطئ لمكان الأيقونات إذا كنت تعمل على تصميم كامل أو على تصميمك الخاص، فستصمم الأيقونات بدايةً وتختار أماكنها أيضًا. ومكان الأيقونة هو الموقع الذي ستأخذه لمساعدة المستخدِم وإيصال الرسالة المطلوبة له بصورة صحيحة، طبعًا يجب طرح هذا السؤال قبل تصميم الأيقونات، فتحديد الموقع يُمكّنك من إنشاء تصميم أوضح وأكثر فعالية، ويُعَد مكان الأيقونة أحد العناصر الأساسية التي قد تؤثر سلبًا على التصميم إن لم تنتبه لها كفايةً، فوضع الأيقونة المناسبة في المكان المناسب يجعل التصميم مريحًا ويساعد المستخدِم على فهم أفضل للتصميم، لذا خُذ الموقع المبدئي للأيقونات بالحسبان أثناء تصميمها. 4. التصميم دون استخدام الشبكات Grids الشبكة Grid هي مربعات تملك الحجم ذاته تفصلها مسافات متساوية، وتساعد في الحفاظ على تناسق الأيقونات ضمن حدود موحدة، فقد تتجاوز حجم أو مساحة العنصر سهوًا أثناء تصميمك للأيقونات، وإن لم يكن لأيقوناتك الحجم والمسافات ذاتها، فقد لا تبدو مثل أيقونات أساسًا، وسيعطي التصميم النهائي للأيقونات المبعثرة والعشوائية انطباعًا خاطئًا. ولتجنّب هذا النوع من الأخطاء اعتمد على الشبكات في تصميمك للأيقونات، حيث ستساعد الشبكات المصممين الهواة كثيرًا، وبالتدريب المستمر سيتمكنون من التصميم جيدًا دونها. 5. كثرة العناصر من الأخطاء التي يجب تجنّب الوقوع بها أيضًا، هي زيادة الإضافات والعناصر غير الضرورية إلى الأيقونات لأسباب مختلفة منها تحسين مظهر أيقوناتك، والتي تنتهي عادةً بجعل التصميم أسوأ، لأن أي زيادة بدون توجّه ودراسة ستعيق وصولك للغاية من الأيقونات، إذ يجب تحقيق التوازن بين العناصر الأساسية والكمالية. قد تتمكن من توظيف المنظور والظلال بحكمة في التصميم، لكن لا يمكن للأشكال والخطوط والعناصر غير الضرورية تحسين تصميمك بالطريقة التي تتوقعها، لذا تجنّب استخدام الكثير من العناصر لأجل المظهر فقط. 6. أخطاء المنظور والظلال بفرض أنك تصمم مجموعة أيقونات لموقع أو برنامج معقد، وعليك تصميم أيقونات صغيرة مبتكرة لجعلها أكثر تميّزًا، فإذا حاولت تمييزها بمنظور غير مألوف، فسيكون الأمر صعبًا، إذ في معظم الحالات يجب امتلاك كل أيقونات المجموعة للمنظور ذاته، وعند تغييرك للمنظور من أيقونة إلى أخرى، فهذا سيعرّض مهاراتك التصميمية للنقد. وذات الشيء بالنسبة للظلال، فلها ارتباط مباشر بالمنظور، وتطبيق تأثير الظل على وجه خاطئ أو مبالغ به، سيُفقِد التصميم شكله الاحترافي. لذا يفضل الحفاظ على البساطة إن لم تكن ترغب بإهدار الوقت في إنشاء منظور مميز وظلال فريدة، وإذا أردت ذلك فتأكد من أن المنظور والظل يحسّنان التصميم بزيادة وضوحه وتناسقه. 7. استخدام النصوص يُعَد استخدام النصوص أمرًا آخر عليك تجنّبه أثناء تصميم الأيقونات، وهذا أمر شخصي لأنك قد تضطر أحيانًا لاستخدام نصوص، مثل تصميم أيقونة تتضمن شعار علامة تجارية تحتوي نصًّا، فوقتها ستصبح ملزمًا بإدراجه، ويجدر بك الاهتمام أكثر بالتصميم لأن الشعارات التي تحوي خطوطًا صغيرة ستبدو أصغر عند استخدامها ضمن الأيقونات، كما قد تفقد الوضوح وجمال التصميم. عدا ذلك لا تجعل النص أحد عناصر أيقوناتك، لأن النص قد يجعل الأيقونة مشوّشةً ويخل بالتعريف الأساسي لتصميم الأيقونات، لهذا استغل المساحة في إضافة عنصر مميز واجعل الأيقونات مفيدةً في إيصال أبسط المعلومات للمتلقين. 8. أخطاء التناسق تجنّب ارتكاب أخطاء التناسق Consistency Mistakes، وهي الإضافات التي تُفقد التصميم تناسقه، حيث يجب لمجموعة الأيقونات امتلاك تناسق مرئي، يمنحها هويةً واحدةً، وإذا صنعت تعديلًا مميزًا لكل أيقونة بالمجموعة، فلن تحافظ على درجة واحدة من الاتساق وستُفقدها الترابط المرئي بينها، لذا تذكر الحفاظ على التناسق دون خسارة الإبداع والجمال. 9. عدم أخذ تغيير الأبعاد بالحسبان إذا زدت حجم تصاميمك النقطية Raster Designs فستحصل على نسخ مُخرّبة ومموهة لأيقوناتك، لذا يُفضّل العديد من المصممين تصميم الأيقونات بصيغة الرسومات الشعاعية Vector Format، ولكنها ليست الطريقةً العملية المثالية، ففي بعض الأحيان قد لا تملك أدنى فكرة أين ستُستخدم تصاميمك وكيف ستُعدّل، وإن لم يكن عميلك متأكّدًا من مكان استخدامها النهائي، فقد تواجه تصاميمك بعض المشاكل، وفي هذه الحالات يفضّل إنشاء الأيقونات بأحجام مختلفة كيلا تتأثر عند تغيير حجمها، بحيث تحافظ على جودتها. لذا فالأفضل تصميمها أساسًا بمختلف الأحجام المطلوبة. 10. عدم التركيز على الفئة المستهدفة يُعَد عدم فهمك للفئة المستهدفة هو أحد الأخطاء الفادحة التي قد يرتكبها المصمم، فالتصميم النهائي له هدف، وإن لم يفهم المستخدمون الأيقونات أو لم يتقبلوها، فستكون خاطرت بعدم تحقيق هدفك، إذ قد لا يكون الشكل أو التصميم المثالي بالنسبة لك جيّدًا كفايةً للمستخدِمين، لذا قبل تصميم الأيقونات عليك أن تأخذ بالحسبان أعمار المستخدمين ومعتقداتهم التقليدية وعاداتهم الاجتماعية والمعاني الثقافية وما إلى ذلك، فإن لم تكن الأيقونات مناسبةً أو مقبولة، فستكون المسؤول عن خسارة التصميم كاملًا، ولهذا فمن الأفضل إعطاء الوقت المطلوب وإجراء البحث الكافي لفهم فئتك المستهدفة. 11. اختيار لوحات ألوان غير ملائمة تُعَد الألوان عنصرًا أساسيًا في أي تصميم، ويمكن مساهمة مخطط ألوان Color Scheme جيّد بتحسين تصميمك إلى مستوىً أفضل، وبالعكس، فقد يدمّر مخطط ألوان سيء تصميمًا رائعًا، لذا في تصميم الأيقونات عليك عدم العبث بالألوان كثيرًا، وهذا لا يقلل من أهميّة اللون بأي شكل، حيث يجب أن تتميّز تصاميمك عن تصاميم الآخرين لتبقى في ذهن المستخدِمين ويتمكّنوا من تذكّرها بسهولة، ولهذا تجنّب التصاميم أحادية اللون Monochromatic colors والألوان الباهتة Bland Colors في الأيقونات، واستخدم مخططات لونية Color Schemes جذّابة ومؤثرة لجذب الانتباه المطلوب والتميّز عن المنافسين. وفي نقطة أخرى، لا تغير اللون من أيقونة لأخرى ضمن نفس المجموعة، فقد يخلّ ذلك بعنصر التناسق. 12. الأيقونات المتشابهة كثيرا من المهام الصعبة على المصمم، الحفاظ على تناسق الأيقونات فيما بينها مع إضفاء لمسة مميزة لكل أيقونة بمفردها، فقد يخل أحيانًا بالتوازن بين عنصري التناسق والإبداع عندما يُطلب تصميم مجموعة أيقونات كاملة، فإن كانت أيقوناتك متشابهةً كثيرًا فيما بينها، فقد لا يفرّق المستخدم بينها، وبالتالي لا يُفهم الهدف المحدد لكل منها، كما قد تربك المستخدِمين. لذا حاول الحفاظ على تناسق العناصر الأساسية مع جعل كل تصميم مميّزًا عن البقية لضمان فهم أسهل. 13. تعقيد التصميم التصميم المعقد هو التصميم المتضمن لكثيرٍ من التفاصيل ضمن الأيقونات التي قد تبدو جيدةً في مواقع محددة لكنها غير عملية، فعند إضافة الكثير من التفاصيل لتصميمك، فسيصعُب الفهم على المستخدم، لأن التصميم المعقد يستهلك منك الوقت ويمنح المستخدم تجربةً سيئة، لذا عليك الاكتفاء بتفاصيل تقنعك، ولا تعقّد تصميمك وتجعله صعب الاستخدام. 14. التصميم من الصفر أسهل طريقة لإيجاد الأيقونات هي تصميمها من الصفر، لكن عندها من المحتمل تكرار العناصر الموجودة مسبقًا، وهناك سبب لإنشاء المصممين تصاميم جديدة، فهو أمر مهم لكل من العملاء والمستخدِمين إضافةً لكسره حاجز اللغة، فالأيقونات القديمة والمتشابهة لا تخدم أي هدف، ورغم أهمية استخدام العناصر المتداولة للحصول على أيقونة مألوفة، فيجب تجربة العديد من النماذج والسير والمضي بالعمل حتى الوصول إلى مجموعة أيقونات مميزة وجذابة وعصرية، وبهذه الطريقة تشحذ إبداعك وتتحدى مهاراتك لإنشاء أيقونات مألوفة لكن بطريقة مبتكرة. خاتمة يبدو تصميم الأيقونات بسيطًا للوهلة الأولى، فهو إظهار لخصائص عنصر ما بطريقة مباشرة ومفهومة، إلا أن صعوبة تصميم الأيقونات تكمن في السبب ذاته، ففي تصميم الرسومات Graphic designing، ينصهر إبداعك بعدة عناصر أخرى بهدف إيصال رسالة ما؛ أما بتصميم الأيقونات فأنت تملك إبداعك مع القليل من العناصر الأخرى فقط، وتجعل مجموعة الأيقونات الناجحة التصميم ملفتًا وواضحًا سهل الفهم، وبذلك تخدم العلامات التجارية في منح المستخدِم تجربةً أفضل، فارتكاب أبسط الأخطاء أثناء تصميم الأيقونات يسبِّب التباسًا في رسائل واضحة بمعلومات مضللة، مؤديًا إلى تجربة غير موفقة للمستخدِم، لقد شملت القائمة المذكورة بالأعلى كل تفصيل دقيق ومهم عليك معرفته بصفتك مصممًا، ويكمن دورك الآن في توظيف هذه المعرفة في تصميم أفضل للأيقونات. ترجمة -وبتصرّف- للمقال 14 Things Not To Do When Designing Icons. اقرأ أيضًا تصميم عالم صغير في زجاجة بالفوتوشوب تصميم ملصق لشعار فيلم Deadpool ببرنامج الفوتوشوب تصميم ملصق فضاء ذو أسلوب قديم مع أضواء ملونة بالفوتوشوب

ستتعلم في هذا التوضيحي كيفية تصميم شعار شارة بيسبول باستخدام مرشحات الالتفاف Warp وبعض الأشكال الأساسية، مثل أداة رسم مستطيل Rectangle Tool وأداة رسم شكل بيضوي Ellipse Tool وأداة القلم Pen Tool، حيث ستُرسم الأشكال التي تحتاجها للحصول على الشعار النهائي. إنشاء مستند عمل جديد بعد تشغيل برنامج أدوبي إليستريتور اضغط على Ctrl+N لإنشاء مستند عمل جديد، ومن القائمة المنسدلة Units اختر Pixels، ثم أدخل العرض Width:‏ 1000 والارتفاع Height‏:‏ 740، ثم اضبط الإعدادات من خلال الانتقال إلى Advanced باختيار التالي: نظام الألوان Color Mode‏:‏ RGB التأثيرات النقطية Raster Effects‏:‏‏ (Screen (72ppi ثم تأكد من عدم تفعيل خيار Align New Objects to Pixel Grid قبل الضغط على OK. تشكيل الدرع ارسم مستطيلًا أسودًا بأبعاد 172x415 بكسل باستخدام أداة المستطيل (Rectangle Tool (M، وارسم شكلًا أحمرًا بمساعدة أداة القلم (Pen Tool (P كما هو موضح في الصورة الثانية، ثم حدّد المستطيل الأسود وأزله، بعد ذلك حدّد الشكل الأحمر واختر أداة الانعكاس (Reflect Tool (O، ثم اضغط باستمرار على Alt وانقر على الجانب الأيمن من الشكل الأحمر، ثم حدّد Vertical في مربع الحوار Reflect وانقر فوق Copy. يجب أن يبدو الشكل الناتج مثل الصورة الأخيرة أدناه. حدّد الشكلين الأحمرين المُنشأين في الخطوة 1، وانقر من القائمة Window على Pathfinder، ثم انقر على الزر Unite، بعدها انقر من القائمة Effect على Stylize > Round Corners، وأدخل في مربع Radius قيمة 16 بكسل وانقر فوق OK. احتفظ بالشكل الناتج محددًا، وانقر من القائمة Object على Expand Appearance، ثم أزل حد هذا الشكل وعبئه باللون الأزرق الداكن #103056. حدّد الشكل الأزرق الداكن المُنشأ في الخطوة 2، وانقر من القائمة Object على Path > Offset Path، وأدخل إزاحة Offset بمقدار 14 بكسل مع النقر فوق OK، ثم استبدل لون التعبئة الحالي للشكل الجديد باللون الأبيض #ffffff. حافظ على تحديد الشكل الأبيض وافتح مربع حوار Offset Path، ثم أدخل إزاحة Offset بمقدار - 12بكسل وانقر فوق OK، ثم استبدل لون التعبئة الحالي للشكل المُنشأ حديثًا باللون البرتقالي الساطع #f5873c، بعدها افتح مربع حوار Offset Path مرةً أخرى، وأدخل إزاحة Offset بمقدار-10 بكسل وانقر فوق OK، ثم استبدل لون التعبئة الحالي للشكل المُنشأ حديثًا بلون أزرق داكن #103056. ركّز الآن على الصورة التالية حتى الصورة الأخيرة وحدد نقطتي الربط المظللتين باللون الأحمر، ثم انقر من شريط Properties على Cut path at selected anchor points لقص المسار عند نقاط الربط المحددة، حيث سيُقسم الشكل البرتقالي اللامع إلى جزأين. وفي الأخير حدّد الجزء الأيمن واستبدل لون التعبئة الحالي باللون الأحمر الفاتح #e23c24. اختر أداة المستطيل (Rectangle Tool (M وارسم مستطيلًا برتقاليًا بأبعاد 40.5×454 بكسل وبلون #f5873c، ثم انقر من قائمة Object على Transform > Move، وأدخل 63 بكسل في مربع Horizontal، ثم انقر فوق Copy واضغط Ctrl + D مرتين للحصول على النتائج كما هو موضح في الصورة الأخيرة. أخيرًا حدّد المستطيلات الأربعة المُنشأة في هذه الخطوة وجمّعها بضغط Ctrl + G. حدد المجموعة المُنشأة في الخطوة 4 بإستخدام أداة التحديد (Selection Tool (V واضغط باستمرار على مفتاح Shift، ثم انقر على الشكل الأزرق الداكن المُنشأ في الخطوة 2، بعدها حرّر مفتاح Shift وانقر على الشكل الأزرق الداكن المُنشأ في الخطوة 2 مرةً أخرى لإصلاح موقعه، وانقر من القائمة Window على Align، بعدها انقر على Horizontal Align Center button ثم فوق الزر Vertical Align Center. حدد الآن الشكل الأزرق الداكن المُنشأ في الخطوة 3، وكرره من خلال الضغط على Ctrl+C ثم Ctrl+F، بعدها أحضر النسخة إلى الأمام Ctrl + Shift + ]. احتفظ بهذه النسخة محددةً واضغط باستمرار على مفتاح Shift ثم انقر على المجموعة المُنشأة في الخطوة 4 وانقر بزر الفأرة الأيمن على لوح الرسم artboard، بعدها حدِّد قسم Make Clipping Mask من القائمة المنسدلة. ركّز على الصورة التالية حتى الأخيرة، واختر أداة التحديد المباشر (Direct Selection Tool (A لتحديد المستطيلين البرتقاليين على اليمين، ثم استبدل لون التعبئة الحالي باللون الأحمر الفاتح #e23c24، وفي الأخير حدد جميع الأشكال المُنشأة من بداية الخطوة 1 وحتى الآن وجمّعها بضغط Ctrl + G. أصبح الدرع جاهزًا. انقر من القائمة Window على Type ثم Character، وحدد خط Rockwell Condensed واجعله داكنًا Bold، مع اضبط الحجم على 131 بكسل، ثم اختر أداة الكتابة (Type Tool (T وانقر فوق لوح الرسم وأضِف النص التالي: BASEBALL، واضبط لونه على اللون البرتقالي الزاهي #ef9d1c. انقر من القائمة Effect على Warp > Arc Lower واكتب البيانات كما تراها في الصورة الثانية وانقر فوق OK، واحتفظ بالنص الناتج محددًا وكرّره بضغط Ctrl+C ثم Ctrl+F. مع المحافظة على تحديد النسخة الجديدة، انقر على القائمة Object ثم انقر على Expand Appearance، وبدّل لون التعبئة والحد للنص الناتج عن طريق النقر فوق السهم المنحني ذي الرأسين بجوار حوامل اللون Fill and Stroke في Toolbox، بعد ذلك غيّر ثخن الحد للنص الناتج stroke إلى 12 بكسل، واستبدل لون الحد الحالي باللون الأزرق الداكن #092a41، ثم انقر من القائمة Window على Stroke وانقر على Align Stroke to Outside، بعد ذلك أخفِ النص الناتج خلف النص البرتقالي الزاهي. حدّد النص البرتقالي الزاهي وكرره بضغط Ctrl+C ثم Ctrl+F، ثم استبدل لون التعبئة الحالي للنسخة باللون الأصفر الرمادي الفاتح #fcf3d2، واحتفظ بالنص الناتج محددًا ثم انقر من القائمة Object على Expand Appearance، استمر في تحديد النص الناتج وكرّره، ثم اضغط على Ctrl + [، وذلك لوضع النسخة خلف النص الأول المُنشأ في هذه الخطوة. بعد ذلك انقل هذه النسخة 3 بكسل لأعلى و4 بكسل إلى اليسار، ثم حدد جزئي النص المُنشأين في هذه الخطوة وانقر من القائمة Object على Blend > Blend Options، واكتب البيانات كما هو موضح في الصورة الثالثة ثم انقر فوق OK. بعد ذلك انقر من القائمة Object على (Blend > Make (Ctrl +Alt +B، ثم أخفِ الشكل الممزوج خلف النص البرتقالي الزاهي. حدد جميع الأشكال المُنشأة من بداية الخطوة 6 حتى الآن وجمّعها بضغط Ctrl + G، ثم ضع المجموعة المُنشأة حديثًا في الموضع كما هو موضح في الصورة أدناه. تصميم الشعار اختر أداة الشكل البيضوي (Ellipse Tool (L، وارسم شكلًا بيضويًا أزرقًا بأبعاد 566x186 بكسل وكرره بضغط Ctrl+C ثم Ctrl+F، ثم انقل النسخة بمقدار 53 بكسل للأعلى. حدد الآن الشكلين الأزرقين المُنشأين في هذه الخطوة وانقر من القائمة Window على Pathfinder، ثم انقر على زر Minus Back. يجب أن يبدو الشكل الناتج مثل الصورة الأخيرة أدناه. اختر أداة المستطيل (Rectangle Tool (M، وارسم مستطيلًا أحمر بأبعاد 283x139 بكسل، ثم ضعه في المكان الموضح في الصورة الأولى، بعد ذلك حدد نقطة ربط المستطيل الأحمر السفلية اليسرى باستخدام أداة التحديد المباشر (Direct Selection Tool (A وانقلها بمقدار 20 بكسل إلى اليمين، ثم حدد نقطة الربط السفلية اليمنى وحركها 20 بكسل إلى اليسار. حدد الآن الشكل الأزرق المُنشأ في الخطوة 1 والشكل الأحمر المُنشأ في هذه الخطوة، ثم انقر من قائمة Window على Pathfinder وانقر على زر التقاطع Intersect. يجب أن يبدو الشكل الناتج مثل الصورة الأخيرة أدناه. اختر أداة القلم (Pen Tool (P، وارسم الشكل الأزرق الموضح في الصورة الأولى. حدد الآن الشكل الأحمر المُنشأ في الخطوة 2 وأزل حده واملأه باللون الأحمر الفاقع #f05730، ثم حدد الشكل الأزرق وأزل حده واملأه باللون البرتقالي الفاتح #ff7c3a. اختر أداة القلم (Pen Tool (P وارسم شكلًا أرجوانيًا كما هو موضح في الصورة الأولى، ثم حدده وكرره بالضغط على Ctrl+C ثم Ctrl+F مع استبدال لون الحد الموجود للنسخة باللون الأزرق. ركز الآن على الصورة الثانية واختر أداة Add Anchor Point Tool (+)، وانقر على النقطة المميزة باللون الأصفر لإضافة نقطة ربط جديدة. بعد ذلك حدد نقطتي الربط المظللتين باللون الأسود وأزلهما، ثم حدد الشكل الأرجواني الذي رسمته في هذه الخطوة وأزل حده واملأه باللون الأحمر الفاتح #f05730. حدد بعد ذلك الشكل الأزرق وأزل حده واملأه باللون البرتقالي الفاتح #ff7c3a. ارسم شكلًا أحمرًا داكنًا #a41c0e بمساعدة أداة القلم (Pen Tool (P كما هو موضح في الصورة الأولى والثانية، ثم حدد الأشكال الثلاثة المُنشأة من بداية الخطوة 4 حتى الآن وأخفِها خلف الشكل الأحمر الفاتح المُنشأ في الخطوة 3. حدد الأشكال الثلاثة المُنشأة من الخطوة 4 حتى الآن، وانتقل من القائمة Object إلى Transform > Reflect وأنقر على Vertical، ثم فوق Copy، بعدها اسحب النُسخ إلى اليمين وضعها كما هو موضح في الصورة الثانية. حدد الأشكال الثلاثة الحمراء الزاهية كما هو موضح في الصورة الأولى وكررها بالضغط على Ctrl+C ثم Ctrl+F، ثم أحضر النسخ إلى الأمام بضغط Ctrl + Shift + ]. احتفظ بتحديد هذه النسخ وانقر من القائمة Window على Pathfinder، ثم انقر على الزر Unite. مع استمرار تحديد الشكل الناتج، بدّل ألوان التعبئة والحد عن طريق النقر فوق السهم المنحني ذي الرأسين الموجود بجوار حوامل لون Fill and Stroke في Toolbox، وغيّر ثخن الحد للعنصر الناتج إلى 8 بكسل، مع استبدال لون الحد الحالي بلون أزرق داكن #103056. احتفظ بالكائن الناتج محددًا وانقر من القائمة Window على Stroke، ثم انقر على Align Stroke to Outside. انقر من القائمة Window على Type > Character، وحدد نوع الخط Myriad Pro واجعله داكنًا Bold، واضبط الحجم على 30 بكسل، بعدها اختر أداة الكتابة (Type Tool (T، ثم انقر فوق لوح الرسم وأضف النص TOURNAMEN مع ضبط لونه على الأبيض #ffffff. تأكد من أن النص محددًا وانقر من القائمة Effect على Warp > Arc، واكتب البيانات المُبينة في الصورة الثانية مع النقر فوق OK، ثم ضع النص الناتج في المكان الموضح في الصورة الثالثة. حافظ على تحديد هذا النص وكرّره بالضغط على Ctrl+C ثم Ctrl+F، ثم النقر من القائمة Object على Expand Appearance، بعدها غيّر ألوان التعبئة والحد للنص الناتج عن طريق النقر فوق السهم المنحني ذي الرأسين بجوار حوامل لون Fill and Stroke في Toolbox، ثم غيّر ثخن حد stroke weight النص الناتج إلى 2 بكسل واستبدل لون الحد الحالي باللون البرتقالي الفاتح #ff7c3a. تأكد من أن هذا النص لا يزال محددًا، وانقر من القائمة Window على Stroke، ثم على أيقونة Align Stroke to Outside. اختر أداة النجمة Star Tool وانقر على لوح الرسم، ثم أدخل البيانات الموضحة في الصورة الأولى وانقر OK، بعدها حدد شكل النجمة وانقر من القائمة Object على Transform > Rotate، وأدخل زاوية Angle بمقدار -29 درجة وانقر OK. بعد ذلك ضع النجمة الناتجة في الموضع كما هو موضح في الصورة الثالثة، وكرر شكل النجمة بالضغط على Ctrl+C ثم Ctrl+F، ثم غيّر ألوان التعبئة والحد للنسخة بالنقر فوق السهم المنحني ذي الرأسين بجوار حوامل ألوان Fill and Stroke في شريط الأدوات Toolbox. بعد ذلك، غيّر ثخن الحد للنجمة الناتجة إلى 2 بكسل، واستبدل لون الحد الحالي باللون البرتقالي الفاتح #ff7c3a. تأكد من أن هذه النجمة لا تزال محددة وانقر من القائمة Window على Stroke ثم على Align Stroke to Outside، بعدها حدّد النجمتين المُنشأتين في هذه الخطوة، وانتقل من القائمة Object إلى Transform > Reflect مع النقر على Vertical ثم Copy، ثم اسحب النُسخ إلى اليمين وضعها كما هو موضح في الصورة الأخيرة. يجب أن يبدو الرسم التوضيحي في هذه المرحلة كما في الصورة التالية: تصميم مضرب بيسبول خشبي بهذا يكون قد حان الوقت لرسم مضارب البيسبول الخشبية. اختر أداة القلم (Pen Tool (P وارسم شكلًا أسودًا كما تراه في الصورة الأولى، وأزل حده ثم املأه بالتدرج الخطي كما هو موضح في الصورة الثانية. ارسم شكلًا برتقاليًا ناعمًا باستخدام أداة القلم (Pen Tool (P وأداة التدرج (Gradient Tool (G كما هو موضح في الصورتين السابقتين، واحتفظ بالشكل الناتج محددًا ثم انقر من القائمة Effect على Blur > Gaussian Blur، وأدخِل نصف قطر Radius بمقدار 3 بكسل وانقر OK. حدد الآن الشكل المُنشأ في الخطوة 1 وكرره بالضغط على Ctrl+C ثم Ctrl+F، ثم أحضر النسخة إلى الأمام بالضغط Ctrl + Shift + ] مع الحفاظ على النسخة محددةً واضغط باستمرار على مفتاح Shift، ثم انقر على الشكل المُطبق عليه مرشح التمويه blur effect ضمن هذه الخطوة، ثم انقر بزر الفأرة الأيمن على لوح الرسم وحدد قسم Make Clipping Mask من القائمة المنسدلة. اختر أداة الشكل البيضوي (Ellipse Tool (L وارسم شكلًا بيضويًا أحمرًا بأبعاد 122x15 بكسل، ثم ضعه في الموضع الموضح في الصورة الأولى، بعدها تأكد من أن الشكل البيضوي الأحمر لا يزال محددًا وانقر من القائمة Object على Transform > Scale، واختر Uniform في مربع الحوار Scale، ثم أدخل قيمة %158 وانقر فوق Copy، بعدها استبدل لون حد الشكل البيضوي المُنشأ حديثًا إلى اللون الأزرق واستمر في رسم المزيد من الأشكال البيضوية حتى تحصل على شيءٍ يشبه الصورة الثالثة. بعد ذلك حدد جميع الأشكال البيضوية الزرقاء المُنشأة في هذه الخطوة، وأزل حدودها واملأها باللون البرتقالي الخفيف #d2a171، ثم حدد جميع الأشكال البيضوية الحمراء وأزل حدودها واملأها باللون البرتقالي الخفيف #d6aa7f، ثم حدد كل الأشكال البيضوية المُنشأة في هذه الخطوة وجمّعها بضغط Ctrl + G، واحتفظ بهذه المجموعة محددةً مع تغيير وضع المزج Blending Mode إلى Overlay، واستمر في تحديد المجموعة الناتجة واضغط على Ctrl + X لقصها. بعد ذلك وبمساعدة أداة التحديد (Selection Tool (V، انقر نقرًا مزدوجًا فوق مجموعة الأشكال المُنشأة في الخطوة 2، ثم اضغط على Ctrl+F للصق المجموعة المقصوصة في هذه الخطوة، وفي الأخير انقر نقرًا مزدوجًا فوق أي مكان خارج مجموعة الأشكال. ارسم شكلًا بيضويًا باستخدام أداة القلم (Pen Tool (P وأداة التدرج (Gradient Tool (G كما هو موضح في الصورة الأولى والثانية، ثم أرسل الشكل البيضوي إلى الخلف بضغط Ctrl + Shift + [. ارسم الشكل الأزرق كما تراه في الصورة الأولى باستخدام أداة القلم (Pen Tool (P، ثم أزل حده واملأه بالتدرج الخطي كما هو موضح في الصورة الثانية. ارسم الشكل الأصفر الموضح في الصورة الأولى باستخدام أداة القلم (Pen Tool (P، ثم أزل حده واملأه بالتدرج الخطي كما هو موضح في الصورة الثانية، بعدها طبّق عليه مرشح Gaussian Blur بمقدار 3 بكسل، ثم غيّر وضع المزج Blending Mode إلى Multiply. بعد ذلك ارسم شكلًا أحمرًا فاتحًا باستخدام أداة القلم (Pen Tool (P وأداة التدرج (Gradient Tool (G كما هو موضح في الصورة الرابعة والخامسة بالخطوة 3، ثم طبّق عليه مرشح Gaussian Blur بمقدار 2 بكسل مع تغيير وضع المزج Blending Mode إلى Lighten. حدد الآن الشكل المُنشأ في الخطوة 5 وكرره بضغط Ctrl+C ثم Ctrl+F، ثم أحضر النسخة إلى الأمام بضغط Ctrl + Shift + ] واحتفظ بالنسخة محددةً، ثم اضغط باستمرار على Shift وانقر على الشكلين مع تطبيق مرشحات التمويه effects applied في هذه الخطوة، بعدها انقر بزر الفأرة الأيمن على لوح الرسم وحدد قسم Make Clipping Mask من القائمة المنسدلة. حدد الأشكال الثلاثة كما تراها في الصورة الأولى وكررها بالضغط على Ctrl+C ثم Ctrl+F، ثم أحضر النسخ إلى الأمام بالضغط Ctrl + Shift + ]، وانقر من القائمة Window على Pathfinder ثم على الزر Unite. احتفظ بالشكل الناتج محددًا، وغيّر ألوان التعبئة والحد عن طريق النقر فوق السهم المنحني ذي الرأسين بجوار حوامل لون Fill and Stroke في Toolbox، ثم غيّر ثخن الحد للأشكال الناتج إلى 10 بكسل واستبدل لون الحد الحالي باللون الأزرق الداكن #103056، بعد ذلك حدد الشكل الناتج وانقر من القائمة Window على Stroke ثم انقر على زر Align Stroke to Outside. حدد كل الأشكال المُنشأة من بداية الخطوة 1 وحتى الآن وجمّعها بالضغط على Ctrl + G، وبذلك نكون قد انتهينا من مضرب البيسبول الخشبي. احتفظ بالمجموعة المُنشأة حديثًا محددةً، وتأكد من أن الشكل الناتج لا يزال محددًا ثم انقر من القائمة Object على Transform > Rotate، وأدخل Angle بمقدار 35 درجة ثم انقر فوق OK، بعدها انتقل من القائمة Object إلى Transform > Reflect وأنقر على Vertical ثم على Copy، والآن ضع مضربي البيسبول هذين في المواضع كما هو موضح في الصورة التالية إلى الأخيرة، ثم أرسلهما للخلف بضغط Ctrl + Shift + [. تصميم الكرة اختر أداة الشكل البيضوي (Ellipse Tool (L وارسم شكلًا بيضويًا مائلًا إلى الرمادي #bdbec0 كما هو موضح في الصورة الأولى أدناه، وكرره بالضغط على Ctrl+C ثم Ctrl+F، ثم غيّر لون التعبئة الحالي للنسخة إلى اللون الأزرق الرمادي الفاتح #e6e7e8 وانقله بمقدار 50 بكسل للأعلى. احتفظ بالشكل البيضوي الناتج محددًا وانقر من القائمة Object على Path > Offset Path، ثم أدخل إزاحة Offset بمقدار -58 بكسل وانقر فوق OK، بعد ذلك استبدل لون التعبئة الحالي للشكل البيضوي المُنشأ حديثًا باللون الأبيض #ffffff. والآن حدد اثنين من الأشكال البيضوية المُنشأة حديثًا وجمّعها بالضغط على Ctrl + G، ثم حدد الشكل البيضوي الأول المُنشأ في هذه الخطوة وكرره بالضغط على Ctrl+C ثم Ctrl+F، واحضر النسخة إلى الأمام بضغط Ctrl + Shift + ]. احتفظ بهذه النسخة محددةً واضغط باستمرار على Shift، ثم انقر على المجموعة المُنشأة في هذه الخطوة، بعد ذلك انقر بزر الفأرة الأيمن على لوح الرسم وحدد قسم Make Clipping Mask من القائمة المنسدلة. ارسم مسارًا منحنيًا بعض الشيء باستخدام أداة القلم (Pen Tool (P، وأعطِه حدًا بمقدار 3 بكسل بلونٍ أزرقٍ داكن #103056، ثم احتفظ بالمسار المُنشأ حديثًا محددًا وافتح من القائمة Window لوحة Stroke وانقر على زر Round Cap. تابع باستخدام أداة القلم (Pen Tool (P لرسم مسارين منحنيين كما ترى في الصورة الثانية، ثم حدد المسار الأحمر وغيّر ثخن الحد إلى 6 بكسل، واستبدل لون الحد الحالي باللون الأزرق الداكن #103056 مع الاحتفاظ بالمسار الناتج محددًا، بعدها افتح من القائمة Window لوحة Stroke، وانقر على زر Round Cap، ثم حدِّد مربع الخط المتقطع Dashed Line box وأدخل 0 بكسل في مربع dash، و11 بكسل في مربع gap. بعد ذلك حدد المسار الأرجواني واختر أداة القطّارة (Eyedropper Tool (I، ثم انقر على المسار المتقطع المُنشأ في هذه الخطوة، وافتح من القائمة Window لوحة Stroke، وغيّر مربع gap إلى 10 بكسل. اختر أداة Line Segment Tool () وارسم بعض المسارات الحمراء الموضحة في الصورة الأولى، وارسم كذلك بعض المسارات الأرجوانية كما هو موضح في الصورة الثانية، ثم حدد جميع المسارات المُنشأة في هذه الخطوة، وغيّر ثخن الحد إلى 4 بكسل مع استبدال ألوان الحد الحالية باللون الأزرق الداكن #103056. احتفظ بالمسارات الناتجة محددةً، ثم افتح من القائمة Window لوحة Stroke وانقر على زر Round Cap. حدد كل الأشكال المُنشأة من بداية الخطوة 2 حتى الآن وجمّعها بالضغط على Ctrl + G، واحتفظ بهذه المجموعة محددةً ثم انتقل من القائمة Object إلى Transform > Reflect، وانقر على Vertical ثم على Copy، بعد ذلك اسحب المجموعة المُنشأة حديثًا إلى اليمين وضعها كما هو موضح في الصورة الثانية. حدد الشكل البيضوي الأول المُنشأ في الخطوة 1 وكرره بالضغط على Ctrl+C ثم Ctrl+F، بعدها أحضر النسخة إلى الأمام Ctrl + Shift + ]، واحتفظ بهذه النسخة محددةً وغيّر ألوان التعبئة والحد عن طريق النقر فوق السهم المنحني ذي الرأسين بجوار حوامل ألوان Fill and Stroke في Toolbox. بعد ذلك غيّر ثخن الحد للشكل البيضوي الناتج إلى 12 بكسل، ثم غيّر لون الحد الحالي إلى اللون الأزرق الداكن #103056. حدد كل الأشكال المُنشأة من بداية الخطوة الأولى حتى الآن، وجمّعها بالضغط على Ctrl + G لينتهي بذلك تصميم الكرة. بعد ذلك ضع هذه الكرة في الموضع الذي تراه في الصورة أدناه، ثم حدّد جميع الأشكال المُنشأة من بداية الخطوة 1 لتصميم الشعار حتى الآن، وجمّعها بالضغط علىCtrl + G. بهذا نكون قد انتهينا من شعار شارة البيسبول وسيبدو التصميم كما في الصورة. تصميم الخلفية ارسم مستطيلًا بأبعاد 1000x740 بكسل بمساعدة أداة المستطيل (Rectangle Tool (M وأداة التدرج (Gradient Tool (G كما هو موضح في الصورة أدناه، ثم ضع شعار شارة البيسبول في الخلفية المُنشأة في هذه الخطوة. وبذلك نكون قد أنهينا المهمّة بنجاح. ترجمة وبتصرّف للمقال Adobe Illustrator tutorial – Create a Baseball Badge Logo لصاحبه Bao Nguyen. اقرأ أيضًا كيفية تصميم مضرب كرة الريشة باستخدام برنامج Adobe Illustrator كيفية تصميم قبعة ساحر باستخدام برنامج Adobe Illustrator كيفية تصميم شعار نصي للطباعة على الملابس كيفية إنشاء صورة رمزية مصغرة باستخدام برنامج Illustrator من أدوبي

سنتعلم في هذا المقال كيفية تصميم ملصق جذَاب ومؤثر بطابع قديم، حيث سنطبق خطوات إنشاء خطوط ضوئية جميلة وفريدة تعطي الملصق طابعه المميز، ولفهم المحتوى بصورة أفضل سنحتاج لمعرفة مسبقة بأساسيات الفوتوشوب، فتصميمه يتطلّب استخدام أدوات البرنامج الأساسية، مثل أداة الحرق Burn Tool وفُرَش الرسم والمرشحات Filters وغيرها، وفي النهاية سنضيف بعض البُنى المميزة التي توحي بأن الشكل من عالم آخر، ويمكنك توظيف التقنيات المشروحة في تصميم الملصقات الإعلانية أو استخدامها مثل تأثيرات أنيقة لصورك، وذلك فقط باطّلاع بسيط على مجال التصميم وقليل من الجهد، ونتمنى لك تعلّم أساليب جديدة. 1. أنشئ مستندا جديدا بالفوتوشوب أنشئ مستندًا جديدًا بالفوتوشوب Ctrl/Cmd + N واضبط الإعدادات كما يلي: ثم اختر أداة دلو الطلاء Paint Bucket Tool واختصارها B، ولوّن الخلفية بالأسود ذو الدرجة #000000. 2. أضف تدرجا لونيا للخلفية لإضافة تدرج لوني Gradient Overlay، اضغط مرتين على طبقة الخلفية من نافذة الطبقات لإلغاء القفل عنها، ثم كرر الضغط عليها مرتين لفتح نافذة الإعدادات Layer Styles، واضبط الإعدادات مثل الصورة التالية: 3. أضف المزيد من الألوان إلى الخلفية في الخطوة السابقة أضفنا تدرجًا لونيًا للخلفية، والآن سنضيف المزيد من الألوان لجعلها أجمل، لهذا أدرج طبقةً جديدةً واختر فرشاة رسم كبيرة وناعمة لأداة الفرشاة Brush Tool واختصارها B، ثم لوّن ضمن اللوحة عشوائيًا، وغيّر خيارات الفرشاة حتى تصل لنتيجة مُرضية. لقد اخترنا درجات من اللونين الأصفر والبرتقالي، ولست مضطرًا طبعًا للتقيّد بذلك ويمكنك اختيار أي درجة تُلائم ملصقك. حوّل هذه الطبقة إلى طبقة ذكية، وذلك بالنقر عليها بالزر الأيمن ثم اختر Convert to Smart Object، ولدمجٍ أفضل للألوان، طبّق مرشح تمويه الحركة Motion blur filter من شريط الأدوات بالأعلى Filter > Blur > Motion Blur وفق الإعدادات المرفقة بالصورة التالية، ثم غير اسم الطبقة إلى "ألوان 1" واجعل التعتيم Opacity 15%. يجب إبقاء الخلفية داكنةً، فلن يعطي تأثير الإضاءة الذي سنصممه لاحقًا التأثير ذاته عندما يُطبّق على خلفية فاتحة، سنحاول حاليًّا إضفاء بعض الألوان بلطف على الخلفية السوداء. 4. استمر بإضافة المزيد من الألوان إلى الخلفية أدرج طبقةً جديدةً، وكرر الخطوات السابقة بألوان مختلفة، وللحفاظ على ترتيب وتنظيم العمل، سمِّ هذه الطبقة "ألوان 2". 5. ادمج بنية أضواء النجوم ابحث في الإنترنت عن صورة مشابهة لصورة الإضاءة بموقع Star-Light، ثم افتحها على فوتوشوب وحرّكها إلى ساحة العمل بأداة التحريك Move Tool ذات الاختصار V، بعد ذلك حوّلها إلى طبقة ذكية Smart object، ثم اجعل الصورة أصغر باختيار Edit > Free Transform أو الاختصار Ctrl/Cmd + T، ثم قلِّل الأبعاد أثناء ضغط زر Shift دون إفلاته، وذلك للحفاظ على تناظر الصورة. غيّر الآن اسم الطبقة إلى "بنية أضواء النجوم" ثم غيّر نمط الدمج Blending mode إلى Overlay وتعتيم 20%. 6. أضف صورة الفضاء ابحث عن صورة فضاء مناسبة وافتحها على الفوتوشوب، وبما أننا نريد بُنية الصورة فقط دون ألوانها، فألغِ إشباعها اللوني من شريط الأدوات بالأعلى Image > Adjustment > Desaturate، أو بالاختصار Ctrl/Cmd + Shift + U. حرّك الصورة إلى ساحة العمل الأساسية بأداة التحريك Move Tool، ثم حوّل الطبقة إلى طبقة ذكية واستخدم التحريك الحر Ctrl/Cmd + T لتغيير حجم الصورة وتدويرها بالزاوية التي تجدها مناسبة، ثمّ سمِّ هذه الطبقة "بنية الفضاء"، وغيّر نمط الدمج إلى Soft Light وتعتيم 30%. 7. إنشاء النجوم أدرج طبقةً جديدةً ولوّنها بالأسود #000000 بأداة دلو الطلاء Paint Bucket Tool التي اختصارها G، وانقر على هذه الطبقة بالزر الأيمن وحوّلها إلى طبقة ذكية، ثم من شريط الأدوات بالأعلى اختر Filter > Noise > Add Noise واضبط الإعدادات مثل الصورة الآتية، وسمِّ الطبقة "نجوم"، مع تغيير نمط الدمج إلى Screen لإزالة اللون الأسود، والآن أصبح لديك الكثير من النقاط البيضاء لكنها لا تشبه النجوم بعد. أدرج طبقة ضبط المستويات Levels adjustment layer لإنقاص عدد النقاط البيضاء، وذلك عبر Layer > New Adjustment Layer > Levels واستخدم الإعدادات الموضحة بالصورة، ولإنقاص عدد النجوم أكثر ومنح التأثير المزيد من الواقعية، يمكنك إضافة قناع Mask إلى طبقة النجوم Layer > Layer Mask > Reveal All والرسم بفرشاة سوداء B لإزالة المزيد. 8. ابدأ تصميم تأثير الأضواء الملونة أدرج طبقةً جديدةً أعلى الطبقات Shift + Ctrl/Cmd + N، واختر أداة مستطيل التحديد Rectangular Marquee Tool التي اختصارها M، وحدد شكلًا كما في الصورة، واضبط اللون إلى الأبيض #ffffff، ثم اختر أداة التدرج Gradient Tool التي اختصارها G، وتأكد من نافذة الخيارات بأن التدرج هو بين اللون الأبيض والشفافية، ثم اضغط زر Shift. وبدون إفلاته اسحب الخط الأفقي لأداة التدرج من الحافة اليسرى لإطار التحديد إلى حافته اليمنى، ثم اختر Select > Deselect أو الاختصار Ctrl/Cmd + D لإزالة التحديد. حافظ على ترتيب العمل بتسمية هذه الطبقة "خط"، ولإضافة قناع إلى هذه الطبقة اضغط Layer > Layer Mask > Reveal All، واضبط اللون إلى الأسود #000000 مع التأكد من أن أداة التدرج ما زالت بوضع التدرج بين اللون الأبيض والشفافية، ثم أضف تدرجًا يبدأ هذه المرة من أعلى الخط الأبيض، ثم تدرجًا آخرًا من أسفل هذا الخط كما توضح الصورة: 9. العمل على الخط انقر بالزر الأيمن على طبقة "خط" التي أنشأتها في الخطوة السابقة، واختر Convert to Smart Object، ثم ضاعف هذه الطبقة Ctrl/Cmd + J واختر Edit > Transform > Flip Horizontal، ثم حدد طبقتي الخطين معًا من قائمة الطبقات من خلال الضغط على الطبقات المطلوبة مع زر Shift أو Ctrl/Cmd، وبعد تحديد طبقتي الخطين اضغط Edit > Free Transform أو الاختصار Ctrl/Cmd + T، ثم اسحب الحافة العلوية للأسفل لتقليل ارتفاعهما فلا نريد أن تصل الخطوط إلى نهاية الحافة العلوية للّوحة. 10. تغيير إعدادات الطبقة ضع طبقتي الخطين معًا في مجموعة جديدة وسمّها "1". يمكنك إنشاء المجموعة بالاختصار Ctrl/Cmd + G، ثم غيّر تعتيم المجموعة "1" إلى 80%، ولإنشاء تأثير الإضاءة ضع المجموعة "1" ضمن مجموعة جديدة وسمّها "خطوط"، ثم غيّر نمط الدمج إلى Color Dodge. الآن يفترض أنك حصلت على خطين ملونين شبيهين بالصورة الموالية: 11. ضاعف الخط سنستخدم الخط المُنشأ مثل قالب للخطوط الأخرى، ثم نعدل كل منها لمنحه هيئةً واقعيةً، بدايةً ضاعف المجموعة "1" وذلك بسحبها ووضعها فوق أيقونة إدراج الطبقة الجديدة أسفل نافذة الطبقات، ثم حرّك عناصر المجموعة الجديدة إلى اليمين بأداة التحريك Move Tool واختصارها V، وذلك حتّى تتقاطع مجموعتا الخطوط كما في الصورة. قلّل ارتفاع المجموعة الثانية بتحديدها، ثم اضغط على Edit > Free Transform أو الاختصار Ctrl/Cmd + T، ثم اسحب الخط العلوي لمربع التحريك إلى الأسفل قليلًا، وغيّر تعتيم المجموعة إلى 70%. 12. أنشئ المزيد من الخطوط كرر الخطوة السابقة لإنشاء المزيد من الخطوط، وغيّر ارتفاع كل مجموعة باستخدام التحريك الحر واختصاره Ctrl/Cmd + T، خفّض تعتيم كل مجموعة بالتدريج مع الاقتراب إلى طرفي اللوحة. 13. أنشئ خطوطا أصغر أنشئ مجموعةً جديدةً وسمِّها "خطوط صغيرة"، وغير نمط الدمج إلى Color Dodge وضعها أسفل مجموعة "خطوط"، ثم ضاعف إحدى طبقات الخطوط من مجموعة "خطوط" Ctrl/Cmd + J، وضعها في المجموعة الجديدة. اجعل الطبقة أصغر بتحريكها بينما تضغط زر Shift من Edit > Free Transform، أو الاختصار Ctrl/Cmd + T. ضاعف هذه الطبقة Ctrl/Cmd + J ثم اختر Edit > Transform > Flip Horizontal. وأخيرًا ضع هذين الخطين منتصف اللوحة كما في الصورة الآتية. 14. إنهاء الخطوط استمر بإضافة خطوط صغيرة بين الخطوط الكبيرة، وغير التعتيم لكل طبقة منها ضمن المجال 40-70%. 15. تخصيص فرشاة جديدة خصص فرشاةً جديدةً لإضفاء بعض التفاصيل على الملصق، وذلك باختيار أداة الفرشاة Brush Tool التي اختصارها B، ثم اختر فرشاةً قاسيةً مثل نقطة بداية ننطلق منها، ثم افتح نافذة الفرشاة F5 واضبط الإعدادات مثل الصورة التالية لتخصيص فرشاتك، بعدها احفظها بالضغط على زر Create new brush الموجود أسفل هذه النافذة: 16. استخدم الفرشاة الجديدة ضاعف طبقة "خطوط" وحولها إلى طبقة ذكية بالضغط عليها بالزر الأيمن واختيار Convert to Smart Object، بعدها أدرج قناعًا لهذه الطبقة Layer > Layer Mask > Reveal All، وغير اللون إلى الأسود #000000، ثم اختر الفرشاة التي أنشأتها، ولوّن بها القناع لإزالة أجزاء من هذه الطبقة، مما يعطي الإضاءة تفاصيل أنيقة، بعد ذلك استخدم الفرشاة بقطر رئيسي حوالي 50px في مركز الخطوط، ثم أصغر من ذلك بالاتجاه نحو أطراف الخطوط. غيّر نمط الدمج إلى Overlay بتعتيم 25%، وأضف تأثير تمويه من Filter > Blur > Motion Blur، مع ضبط الإعدادات كما في الصورة، ثم أضف بعض التشويش من Filter > Noise > Add Noise. 17. أدرج صورة الفضاء ابحث في الإنترنت عن صورة لمجرة كونية وافتحها على الفوتوشوب، ثمّ ألغِ إشباعها اللوني بالاختصار Ctrl/Cmd + Shift + U وحرّكها إلى لوحة العمل، سمّ هذه الطبقة "بنية"، ثم حوّلها إلى طبقة ذكية، واجعلها أصغر ودوّرها من Edit > Free Transform أو بالاختصار Ctrl/Cmd + T، واضغط على زر Shift دون إفلاته أثناء تصغير الحجم. ضع هذه الطبقة ضمن مجموعة جديدة Ctrl/Cmd + G سمّها "فضاء"، واضبط نمط الدمج إلى Color Dodge، مع الضغط على طبقة "بنية" لتفعيلها وأضف قناع أسود اللون من Layer > Layer Mask > Hide All، الآن اختر فرشاةً بيضاء ناعمةً لأداة الفرشاة Brush Tool واختصارها B بتعتيم 50% وقطر رئيسي 100px، ثم لوّن باستخدام الفرشاة ضمن الجزء العلوي من اللوحة لإظهار الأجزاء التي ترغب بها من صورة الفضاء. 18. اجعل درجات الألوان ذات طابع قديم احفظ ملف العمل بالصيغة التي تريدها، ويفضّل بصيغة PSD (صيغة فوتوشوب)، ثم حمّل مجموعة تأثيرات الفوتوشوب الجاهزة من صفحة DeviantART، وجرّبها للحصول على ألوان متنوعة، وعندما تجد ما يناسبك تكون قد أنهيت العمل. حدّد كامل العمل Ctrl+A ثم انسخه وادمج عناصره Ctrl+Shift+C وألصقه، ثم اختر Filter > Sharpen > Unsharp Mask > OK مما يجعل الشكل أوضح، وحاول عدم المبالغة باستخدام هذا التأثير. ختاما بهذا نكون قد أنهينا ملصق الفضاء القديم وأنشأنا تأثير إضاءة مميزة باستخدام الفوتوشوب، كما أنشأنا نجومًا من تأثير التشويش. نتمنى ان تكون استمتعت وتعلمت بعض تقنيات التصميم المفيدة. اقرأ أيضًا تصميم ملصق لشعار فيلم Deadpool ببرنامج الفوتوشوب كيفية تصميم ملصق مستوحى من فيلم حرب النجوم باستخدام فوتوشوب كيفية إنشاء تأثير كاريكاتيري مضحك في Adobe Photoshop كيفية قص الشعر من الخلفيات المعقدة في الفوتوشوب

في عالم اليوم، لم يعد بالإمكان قصر اهتمامنا على الهواتف المحمولة والحواسيب، فلدينا أجهزة لوحية وأخرى "تُرتدى" كالسّاعات والنّظارات الذكيّة. سيكون موضوعنا اليوم عن التصميم لمختلف أنواع الأجهزة. فهرس سلسلة مدخل إلى تجربة المستخدم: مدخل إلى تجربة المستخدم User Experience فهم ودراسة المستخدمين في مجال تجربة المستخدم دراسة الشريحة المستهدفة في مجال تجربة المستخدم كيفية التصميم للأجهزة المختلفة (هذا الدرس) هندسة المعلومات في تجربة المستخدم تعرف على أنماط التصميم في مجال تجربة المستخدم أشياء لا يمكن اعتبارها رسوما تخطيطية (Wireframes) في مجال تجربة المستخدم تعرف على الرسوم التخطيطية (Wireframes) في مجال تجربة المستخدم مفهوم الثقل المرئي (Visual Weight) والألوان في مجال تجربة المستخدم التكرار ومخالفة الأنماط في مجال تجربة المستخدم المحاذاة والقرب في مجال تجربة المستخدم تعرف على أساليب مسح الواجهة والتراتب المرئي في مجال تجربة المستخدم أساليب الإطلاع في مجال تجربة المستخدم: التصفح، البحث والاكتشاف تصميم هيكل صفحة الويب والعناصر الأساسية في مجال تجربة المستخدم الأزرار، النماذج والدعوات إلى الإجراء في مجال تجربة المستخدم استخدام علم النفس في مجال تجربة المستخدم لتكييف المستخدم وإقناعه كيف تغير الخبرة من تجربة المستخدم؟ تصميم تجربة المستخدم من خلال بيانات وإحصائيات المستخدمين تعرف على أنواع المخططات الإحصائية في مجال تجربة المستخدم اختبارات أ/ب (A/B Test) في مجال تجربة المستخدم الخطوة الأولى: كيف سيكون التعامل مع الواجهة؟ باللمس بالإصبع أم بمؤشّر الفأرة؟ الخطوة الثانية: ابدأ بالأجهزة الصغيرة يعتقد البعض أن عبارة "mobile first" الشّائعة تأتي من صعود شعبيّة الهواتف الذّكية، وهذا جزء من الحقيقة، أمّا الجزء الآخر فهو قائم على أن التّصميم للأجهزة الصّغيرة محدودة القدرات يُجبر المصمّم على التّركيز على المحتوى والوظيفة الأساسيّة للمشروع، مؤدّيًا بدوره إلى تطبيقات بسيطة وجميلة؛ أمّا العكس (أي البدء بالأجهزة القويّة) فهو أشبه بإقحام قطّ في قفص عصفور، أمر ليس بسيطًا ولا جميلًا! الخطوة الثالثة: ما الإمكانيات المميزة لهذا الجهاز؟ تتنقّل الهواتف الذّكية معنا طيلة اليوم، وهذا يعني أنّنا نقضي وقتًا طويلًا في استخدامها، وأن باستطاعتنا استخدام الموقع في تطبيقاتنا، كما أنّها أجهزة صغيرة الحجم ويسهل نقلها، أمّا الحواسيب المحمولة فهي أقل سهولةً في النّقل ولكنّها أكثر قدرةً، وشاشاتها أكبر حجمًا، وفيها لوحة مفاتيح مُريحة، ومؤشّر يسمح بتحديد أكثر دقّة ووظائف أكثر. لا تُصرَّ كثيرًا على فكرة "وحدة الواجهة" بين الأجهزة المختلفة، بل فكّر بأسلوب مختلف لكلّ جهاز. الخطوة الرابعة: لا تنس البيئة التي يعمل فيها التطبيق هناك اختلاف في الخطوط العامّة لتجربة المستخدم بين Mac OS X وWindows، وكذلك يختلف Windows Vista عن Windows 8، وiOS 7 عن iOS 6، وقد تُضطّر لاختيار إصدارات محدودة لاستهدافها، وأخرى تتجاهلها، ففي كلّ مرّة توفّر تطبيقك لإصدار جديد، يتضاعف جهد التصّميم والتّطوير والصّيانة في المستقبل. كن بعيد النّظر! الخطوة الخامسة: كن مستجيبا هل ستوفّر تطبيقك على الويب؟ هل يدعم بضعة أنواع من الهواتف فقط؟ كيف سيعمل على الأجهزة القادمة؟ كل الأجهزة تستطيع التّواصل مع الإنترنت اليوم، لذا احرص على أن باستطاعة تطبيقك التلاؤم مع مختلف الأجهزة التي قد يرغب مُستخدمو تطبيقك باستعمالها. الخطوة السادسة: فكر بأكثر من شاشة واحدة في الوقت نفسه قد يكون هذا الموضوع متقدّمًا، ولكنّ بإمكانك بشيء من الجهد تحقيقه. هل يمكن استخدام هاتفك وحاسوبك سويّة كما يمكن التّحكم بالتّلفاز عن بُعد؟ هل يمكن لمجموعة من الهواتف أن تتحكّم بلعبة على حاسوب لوحيّ في غرفة واحدة؟ وإذا كنت تستخدم جهازين في وقت واحد، فهل يمكن نقل البيانات بينهما؟ ماذا عن مزامنة البيانات؟ هل ستؤدّي إلى مشاكل في الاستعمال؟ فكّر في الأمر! سنتعرّف في الدّرس القادم على أنماط التّصميم، وهي مجموعة من الأساليب الشّائعة لحلّ المشكلات المُتكّررة في تصميم تجربة المُستخدم. ترجمة بتصرّف للدرس Designing For Devices من سلسلة Daily UX Crash Course لصاحبها Joel Marsh. اقرأ أيضًا النسخة العربية الكاملة لكتاب مدخل إلى تجربة المستخدم (User Experience - UX) 1.0.0 كيف تعيد تصميم موقع إلكتروني قائم بالشكل الصحيح عشرة أمور أساسية يجب أخذها في الحسبان لدى تصميم النوافذ المنبثقة عشر مبادئ رئيسية لتصميم تجربة مستخدم على الهواتف الذكية التصميم للهواتف: التصميم البصري

كثيرا ما نتلقى أسئلة كهذه: يعد تصميم المنتجات الرقمية ممارسة وليدة، لذلك كثيرًا ما لا نملك إجابة عن مثل هذه الأسئلة، ما هو الطبيعي، ما هو الاكتشاف الفريد، وماذا كان كذلك منذ ثلاث سنوات. لذلك، أجرينا أكبر استطلاع للرأي في مجال التصميم (2200 شركة تعمل في 24 مجال في 77 دولة) لاكتشاف كيفية تطور علم تصميم المنتجات الرقميّة وإلى أين وصل في الوقت الحاضر. إنه بحث غير مسبوق في بيئة تصميم المنتجات الرقمية وتأثيرها على عالم الأعمال. العبرة هي: كلما تبنت المؤسسة ممارسات التصميم وأدمجتها، كانت النتائج إيجابية. يمكنك الاطلاع على التقرير بالكامل هنا، الذي نوضح فيه ما الذي تفعله الشركات التي تتمتع بخاصية "نضج التصميم"، لكننا نذكر في هذا المقال عدد قليل (جدا) من نتائج هذا البحث: في البداية، تعرف على المشاركين في استبياننا: كانت الشركات المشاركة في الاستبيان من كل حجم ونوع ومجال. تناول تقريرنا شركات تعمل في مجال الدعاية، التأمين، التعليم، وغيرها. 48 في المئة من الشركات في الدول السبعة والسبعين التي شملها استطلاعنا خارج أمريكا الشمالية. المثير للدهشة هو التشابه بين الشركات العاملة في مجال التصميم عالميًا. تنتشر نفس التوجُّهات والمواضيع عبر مناطق جغرافيّة مختلفة، وعبر الشركات مع تباين أحجامها، وكذلك عبر الشركات والوكالات سواء بسواء. العبرة هي أنه كلما تبنت الشركة ممارسات التصميم ودمجتها كانت النتائج إيجابيّة. إليك بعض النقاط الأساسيّة: الحقيقة الأولى: 41% من الشركات لديها مصمِّم في مستوى المدير، أو أعلى نحو ربع المشاركين لم يكن لديهم أي مصمِّمين في مستوى القيادة، بينما لدى عدد كبير منهم مصمِّمين في مستوى القيادات التنفيذيّة العليا. الحقيقة الثانية: متوسط عدد المصمِّمين في كل شركة 27 كان متوسط عدد المصمِّمين في كل شركة من الشركات المشاركة 27، لكن نحو ثلث العدد المشارك لم يكن لديهم سوى مصمِّمين اثنين أو أقل. الحقيقة الثالثة: 79% من المصمِّمين يقولون إن المشروعات تتضمن التصميم "بصورة شبه دائمة" أو "بكثرة" لم يعد إدماج التصميم عملية إنتاجيّة مستحدثة في الشركات التي تتَّصف بنضج التصميم، بل أصبح عاملًا أساسيًا. الغالبية العظمى من الشركات المشاركة في الاستبيان تستخدم التصميم عند إنتاج منتج جديد، و66% منهم يرون أن التصميم "مدمج بصورة جيدة في عمليّة تطوير المنتج" في مؤسساتهم. الحقيقة الرابعة: 16% من الشركات عدد المصمِّمين لديها أكثر من عدد المهندسين يقال أن عدد المهندسين يفوق عدد المصمِّمين بما لا يوازن في معظم الشركات. لكن بحثنا يظهر أن هذا ليس صحيحًا تمامًا. فلدى 43% من الشركات تكون نسبة المصمِّمين إلى المطورين 1 إلى 4 أو أكثر. إن تحقيق الاستفادة الأمثل من التصميم تتطلب استخدام التصميم بصورة صحيحة أكثر مما تتطلَّب الحصول على موارد تصميميّة كافية. الحقيقة الخامسة: في 33% من الشركات يتبع المصمِّمون رئيس مجلس الإدارة مباشرة ذكرت 60% من الشركات أن لديها هيكل مركزي التصميم. لكننا وجدنا أن هيكل الشركة لا يرتبط بقوة بنضج التصميم. فلدينا أمثلة لهياكل مختلفة معمول بها في شركات مختلفة. لا توجد طريقة معينة هي وحدها "الصواب". (المجموع لا يساوي المئة لأن المصمِّمين في العديد من المؤسسات يتبعون لإدارات عدَّة) الحقيقة السادسة: كلما زاد تبني الشركة للتصميم، جنت الفوائد ربما تتساءل: "ما هو الهيكل التنظيمي الأمثل للتصميم؟" الأمر يعتمد على ما الذي تنشد تحقيق أقصى استفادة فيه. وفقا لما تختاره شركتك ستكون الفوائد التي تحققها أعلى أو أقل من المستوى المتوسط. توازن هذه الرسوم البيانية بين الإجابة وإجابة المشارك المتوسط. كما هو موضح في المثال التالي، نجد أن تبعية التصميم للمنتج يزيد من احتمالية تأثير التصميم على سهولة الاستخدام. ليس هذا مفاجئًا. فحين يتبع التصميم إلى نوع النشاط تزداد الأرباح عن المتوسط. لقد رأينا هذا في Design Systems Video Series: حين يتعاون المطوِّرون والمصمِّمون عن قرب، تظهر النتيجة الإيجابية على المنتج، ويستفيد المستخدم. التبعية للتسويق تحقق المكاسب في قمع المقاييس وسهم العلامة التجارية. لكن من الحكمة أن ينتبه المصمِّمون الذين يتبعون التسويق دائمًا لتأثير عملهم. في النهاية، من الجيد أن تكون بالقرب من القمة. وازن بين مؤسستك وبين نموذج نضج التصميم الجديد الخاص بنا، (فقط 5% من الشركات تتسم بنضج التصميم) وفكِّر فيما يمكنك فعله لتطوير التصميم في مؤسّستك. مترجم بتصرف عن Facts about design today بقلم Sean Blanda

يُدرك كل مصمّم جرافيك أنّ مهمّة اختيار تركيب ومزج الألوان وتناسقها هي واحدة من أهم أجزاء عمليّة التّصميم، سواء أكان ذلك التّصميم موجّه للطّباعة أم للعرض على شبكة الويب. لا يوجد أي تركيبة ألوان عالميّة وموحّدة بإمكانها أن ترضي جميع العملاء. بالنّسبة لبعض المصمّمين فإنّ عمليّة تركيب الألوان هي مسألة التّجربة وتحديد الأخطاء ثم التجربة مجدّدًا وهكذا، إلى غاية الحصول على التّركيبة المناسبة، ولكن اعتماد هذه الطّريقة يعني إهدار الكثير من الوقت الثمين. الوقت الذي يُعتبر سلعةً هامة في عالم تصميم الجرافيك والذي يسير بخطوات متسارعة. إلاّ أنّه يُمكن التّقليل من ذلك الوقت عن طريق الاعتماد على بحوث ودراسات متخصّصة ومناسبة، وكذلك من خلال استخدام الذّوق الذي تتمتّع به كمصمّم أو حدسك السّليم تجاه الأنماط. كيف تفهم أساسيات عجلة الألوان Color Wheel قبل كلّ شيء، من المهم أن تعرف أساسيّات عجلة الألوان، ويجب على كلّ مصمّم أن يطّلع عليها عن ظهر قلب. الضّوء الأبيض هو مزيج من كل ألوان الطّيف، والتي تنقسم إلى ثلاث مجموعات أساسيّة هي: الأحمر، الأزرق والأصفر، ومن خلال المزج بين تلك الألوان الثلاثة بإمكانك أن تركّب أي لون تتخيّله ويمكن للعين البشرية أن تراه. وحتّى تكون قادرا على خلق تركيبات ألوان جميلة وجذّابة يجب عليك أوّلا أن تعرف عجلة الألوان Color Wheel، حيث سأحاول شرحها لك بطريقة سهلة خالية من التّعقيدات. الألوان الأحادية monochromatic colors تجعلك تستخدم لون واحد من مجموعة ألوان مختلفة، على سبيل المثال: بإمكانك استخدام تركيبة هذه الألوان لتصميم موقع معيّن : الّلون الأساسي الذي قمنا باستخدامه في الصورة السابقة هو الّلون الأخضر، الأخضر الفاتح (50% أبيض) والأخضر الغامق (50% أسود). واستخدام الألوان الأحادية monochromatic colors في التصاميم يضيف لها رونقًا واحترافية، فيكون التصميم بسيطًا لا تعقيد فيه (خاصة إذا كان التصميم يستخدم قليلا من الإضافات والتأثيرات إلا أن ذلك قد يجعل منه تصميما مملًا ومنفرًا. الألوان المكملة Complementary colors من أكثر تركيبات الألوان جاذبيّة هي تلك التي تُظهر التّناقض وتلفت الانتباه. وتنتج تلك النّوعية من خلال المزج بين الألوان التي تكون متقابلة في الدّائرة اللّونيّة، حيث تتميز بكونها ألوانا جريئة، مثيرة للاهتمام وجذّابة بصريا. تأكّد خلال تركيبك للألوان الخاصة بتصاميم عملائك أن تختار تلك التي تظهر بشكل جميل حين تقوم بمزجها، بعض التّركيبات سينتج عنها ألوانا جدّ صارخة، حاول أن تتجنّبها. الألوان التماثلية Analogous colors الألوان التّماثلية Analogous colors هي الألوان التي تصطف بجانب بعضها البعض علي عجلة الألوان الأساسية، وهي شبيهة بالألوان الأحادية monochromatic colors في كونها مناسبة جدا للتّصاميم المهنية والتّجارية، كما أنّها ملفتة للانتباه باعتبارها تضيف نوعا من التباين والجاذبية على التّصميم. الألوان التّماثلية سهلة الاستخدام ودائما تظهر بشكل جميل. الألوان المثلثية Triadic colors الألوان المثلّثية Triadic colorsهي ألوان مستقلة موجودة على العجلة والتي تشكل مثلّثا بمجرد الربط فيما بينها، ويتميز هذا النمط من الألوان في كونه يخلق نوعا من الجماليّة والتوازن. إرضاء العملاء باستخدام تركيبات لونية صحيحة ومناسبة كما ذكرنا سابقا فإنّه لا يمكننا إقناع جميع العملاء باستخدام نموذج ألوان معيّن، يجب أن تعرف أولا مؤسّسة عميلك (إذا كان التصميم مثلا خاص بمؤسّسته)، وقبل أي شيء آخر يجب أن تعرف ما تقوم به الشركة والمنتجات أو الخدمات التي تقدّمها، ذلك سيعطيك فكرة أولية حول نوعيّة الألوان التي ستختارها، وأيضا لا تنسى أن تطلع على مجموعة من تصاميم لشعارات ناجحة. المطاعم، الوجبات السريعة والمنتجات الغذائية بالنّسبة للشّركات التي تركّز على الغذاء والطعام، حاول أن تستخدم اللّونين الأحمر والأصفر بكثرة، لأنها تعتبر ألوانًا جذّابة وسهلة الالتصاق بذهن المتلقي (الشخص الذي يراه)، بالإضافة إلى أنه يُنصح باستخدام الألوان الحارة والصّلبة، لأن اللونين الأصفر والأحمر يحفزان على الشعور بالجوع من خلال تسريع عمليّة الأيض، الأمر الذي يؤدّي إلى فتح الشهية ورفع من نسبة الطلب على الأكل أكثر مما ينبغي، تجنب استخدام اللون الأزرق والأرجواني للمطاعم نهائيا، لأنها تعمل على التخفيف من شهية الأكل لا شعوريا. أجسامنا تتفاعل سلبيا مع اللون الأزرق والأرجواني، أما الأخضر والبني فهما لونين مناسبين للاسترخاء و الأطعمة غير الرسمية (casual) كالمقاهي مثلا، كذلك جرّب أن تستخدم الألوان المكمّلة والألوان المثلثية. هذه مجموعة من لوحات الألوان الجذابة والتي يمكن استخدامها للمطاعم، الوجبات السريعة والمنتجات الغذائية: مساحيق التجميل ومواد التنظيف هنا نختار الألوان التي تعبر عن الأنوثة، النعومة والنّظافة. ألوان الباستيل مثل الأبيض، الأرجواني، الأزرق الفاتح، والزهري الفاتح هي اختيار رائع يمكنك استخدامه. تجنّب الألوان الحارّة وغير الناعمة، كما بإمكانك استخدام الألوان الأحادية والألوان الحيادية لأنها تدل على النظافة والبساطة. هذه مجموعة من لوحات الألوان الجذابة والتي يمكن استخدامها لمساحيق التّجميل ومواد التّنظيف: المؤسسات الحكومية، المؤسسات العامة، المنظمات الحكومية وغير الحكومية عند قيامك بتصميم لإحدى المؤسّسات الحكومية، أو المؤسسات العامة أو لإحدى المنظمات، عليك أن تأخذ بعين الاعتبار أنها يجب أن تظهر كمؤسسات محترمة، جديرة بالثقة وذات كرامة. لذا اختر ألوانا تكون إيجابية وجميلة في نفس الوقت، كاللون الأخضر والأزرق. تمنح هذه الألوان الجميلة نوعا من الإيجابية وتعطي صورة عن المؤسسة أنها صلبة، قوية وجديرة بالثقة. المنظّمات الحكومية وغير الحكومية تفضل أن تستخدم الأحمر، الأبيض والأزرق في تصاميم شعاراتها مثل ما هو مستخدم في العلم الأمريكي وهي أيضا علامة على القومية والنزاهة. حاول استخدام الألوان الأحادية والتماثلية وقلل من استخدام الألوان المتباينة (الألوان المكملة). هذه مجموعة من لوحات الألوان الجذابة والتي يمكن استخدامها للمؤسّسات الحكومية، المؤسسات العامّة، المنظّمات الحكومية وغير الحكومية: الشّعارات أو التّصاميم الجرافيكية الخاصّة بالمؤسّسات التّعليمية، شركات التّأمين والمستشفيات أيضا تتبنّى ذات القاعدة. الفنادق، المنتجعات ومنشآت الضيافة الأخرى عند قيّامك بتصاميم تخص الفنادق والمنتجعات ركز على الشعور بالراحة، الاسترخاء والضيافة واختر الألوان الترابية والطبيعية. اللون البني، الأخضر والأزرق هي من أكثر الألوان التي توحي بالاسترخاء والهدوء، تجنب الألوان الصّارخة كما بإمكانك استخدام الألوان الأحادية monochromatic colors. لكن حاول أن تستخدم الألوان بحد أدنى. الأسود، الأبيض، الفضي والذهبي هي الأخرى اختيارات رائعة لتصاميم الفنادق والمنتجعات، خاصة إذا كانت من تصنيف خمس نجوم وكانوا يرغبون في الاستفادة من الترف والرقي. الخلاصة تعتبر الألوان طريقة جيدة لجذب انتباه المشاهدين، إلا أن استخدام الكثير منها سيصرف القرّاء، لذلك حاول التقليل قدر الإمكان من استخدامها واكتف فقط باستخدام من 2-4 ألوان. عمليّة مزج وتركيب الألوان ليست مجرّد عملية تتم حسب مزاج المصمم، وإنما تتم من خلال البحث والدراسة المتأنية، وكذلك من خلال معرفة أساسيات عجلة الألوان والتركيب، كلّ ذلك سيمكنك من إنشاء الآلاف من تركيبات الألوان الرّائعة والمبهرة. ترجمة -وبتصرّف- للدّرس Guide to Choosing Color Combinations When Building Sites For Clients لصاحبه James Richman. حقوق الصورة البارزة: Designed by Freepik.

في هذا الدرس سوف نقوم بتحويل تصميم تم إعداده باستخدام فوتوشوب وجعله صفحة ويب جاهزة وذلك باستخدام لغتي HTML وCSS (وهو أمر يُعرف أيضا تحت اسم “التكويد”). هذا هو التصميم الذي سوف نعمل على تكويده في هذا الدرس: استخراج بعض الصورقبل أن نبدأ في تكويد التصميم سوف نحتاج إلى استخراج بعض الصور منه (في الأسفل يوجد صورة توضيحية للملفات التي نحتاجها، وكوننا لا نملك الملف لاستخراج الملفات منه فيمكنك استعمال أي بديل تراه مناسبًا فالمهم هو أن تعرف كيفية التكويد وكتابة أكواد مناسبة). بنية ملف HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Chris Spooner Design Portfolio</title> <link href="style.css" rel="stylesheet" type="text/css" media="screen" /> </head> <body> <div id="container"> </div> </body> </html> يبدأ ملف الـHTML كما هو معتاد على وسم <doctype> و <head> وأخيرًا وسم <body>. كما أننا قمنا بربط ملف CSS بواسطة استعمال وسم <link> وأضفنا أيضًا وسم <div id="container"> ليعمل كحاوٍ لجميع محتوى الصفحة. <p id="logo"> <a href="#"><img src="images/logo.png" alt="Chris Spooner logo" /></a> </p> <ul id="nav"> <li><a href="index.html">Home</a></li> <li><a href="about.html">About</a></li> <li><a href="portfolio.html">Portfolio</a></li> <li><a href="contact.html">Contact</a></li> </ul> <div id="header"> <h1>Hello, I'm Chris Spooner.</h1> <h2>I craft websites that are beautiful on both the inside and out.</h2> <p class="btn"><a href="portfolio.html">View my portfolio</a></p> </div>لو نظرت إلى التصميم سوف تجد أن القائمة تأتي قبل الشعار ولكن مع ذلك فإننا سوف نقوم بإضافة الشعار قبل القائمة حتى نبقي كل شيء مرتّبًا ومنظمًا. وضعنا الشعار داخل وسم <p> واستعملنا العنصر <ul> ليحتوي على عناصر القائمة وأضفنا أيضًا وسمي <h1> و <h2> وبداخلهما عنوان ومقدمة بسيطة. <div id="content"> <h3>About Chris Spooner</h3> <p>I earn a living by creating custom brands and logo designs from scratch, as well as designing and building high quality websites and blogs, but I also enjoy producing the odd t-shirt graphic, illustration or character design. I pride myself in having the nerdy skills to build top notch creations online, as well as being knowledgeable in the print side of design.</p> <h3>My latest work</h3> <p>I’m forever creating design work for both myself as personal projects and as a hired gun for clients from around the world. Here’s a few of my most recent works.</p> <div class="portfolio-item"> <a href="#"><img src="images/portfolio-1.jpg" alt="View more info" /></a> <p class="btn"><a href="#">See more</a></p> </div> <div class="portfolio-item"> <a href="#"><img src="images/portfolio-2.jpg" alt="View more info" /></a> <p class="btn"><a href="#">See more</a></p> </div> <div class="portfolio-item"> <a href="#"><img src="images/portfolio-3.jpg" alt="View more info" /></a> <p class="btn"><a href="#">See more</a></p> </div> <div class="portfolio-item"> <a href="#"><img src="images/portfolio-4.jpg" alt="View more info" /></a> <p class="btn"><a href="#">See more</a></p> </div> </div> <div id="footer"> <p id="copyright">&copy; Chris Spooner / SpoonGraphics (Please don’t steal my work)</p> <p id="back-top"><a href="#">Going up?</a></p> </div>قمنا بعد ذلك بإضافة وسم <h3> وبداخله نص يعتبر أقل أهمية عن النص السابق (فكما تعلم أنّ وسم <h1> أهم من <h2> ومن <h3> وهكذا). بعد ذلك قمنا بإضافة العنصر <div id="content"> وبداخله يوجد المحتوى الرئيسي للصفحة والعديد من وسوم <div> كل واحد منها يحتوي على صورة مصغرة عن أحد الأعمال التي قمنا بها (وكأنها معرض أعمال مُصغّر). وأخيرًا يوجد هناك التذييل (footer) ممثلًا بالعنصر <div id="footer"> وبداخله حقوق الملكية وزر العودة للأعلى. الآن وبعد أن انتهينا من ملف الـHTML دعونا ننتقل إلى تنسيق الصفحة باستعمال CSS. تنسيقات CSSbody, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote { margin: 0; padding: 0; border: 0; } body { background: #f2f0eb url(images/bg.png); font: 16px Helvetica, Arial, Sans-Serif; color: #636363; line-height: 24px; } #container { width: 960px; margin: 0 auto; } #logo { margin: 10px auto 0 auto; position: relative; width: 183px; } بدأنا ملف الـCSS بتنسيقات بسيطة لإزالة التنيسقات الافتراضية للمتصفحات، وبعد ذلك قمنا بإضافة بعض التنسيقات لجسم المدونة (وسم <body>). لاحظ أننا قمنا في البداية بإضافة خلفية مزخرفة (صورة) إلى جسم المدونة وبعدها أضفنا بعض التنسيقات التي تخص الخطوط في الصفحة. قمنا بعدها بإعطاء العنصر الحاوي (container div) عرضًا بقيمة 960px واستعملنا أيضًا الخاصية margin: 0 auto لتوسيط العنصر في منتصف الصفحة، كما أننا أضفنا نفس الخاصية السابقة إلى الشعار حتى يتوسط في الصفحة. ul#nav { width: 940px; list-style: none; overflow: hidden; margin: -134px auto 25px auto; } ul#nav li { width: 126px; height: 33px; float: left; padding: 13px 0 0 0; background: url(images/nav-bg.png); font-weight: bold; text-align: center; text-transform: uppercase; } ul#nav li:nth-child(1) { margin: 0 60px 0 0; } ul#nav li:nth-child(2) { margin: 0 316px 0 0; } ul#nav li:nth-child(3) { margin: 0 60px 0 0; } ul#nav li:nth-child(4) { margin: 0; } ul#nav li a { color: #616369; text-decoration: none; } ul#nav li a:hover { color: #a12121; } سوف نحتاج لإضافة مجموعة من الخصائص للقائمة الرئيسية حتى تتماشى وتتوافق مع التصميم الذي نعمل عليه، فقمنا أولًا بتحريك العنصر <ul> إلى الأعلى وذلك باستخدام قيمة margin سالبة وبعدها قمنا بإعطاء كل عنصر من عناصر القائمة (عناصر <li>) مجموعة خصائص، أبعاد، خلفيات وتنسيقات خطوط حتى تتوافق مع التصميم الذي نريده. وحتى نجعل الصفحة تبدو كالتصميم تمامًا فإننا استخدمنا المحدد ()nth-child: حتى نُعطي قيم margin مختلفة لكل عنصر. #header { height: 244px; padding: 52px 0 0 57px; background: url(images/home-header.jpg); } #header h1 { font: 38px Georgia, Serif; color: #f2f0eb; letter-spacing: 2px; margin: 0 0 20px 0; text-shadow: 0px 3px 3px #494949; } #header h2 { width: 510px; font: 30px Georgia, Serif; color: #f2f0eb; letter-spacing: 2px; margin: 0 0 20px 0; text-shadow: 0px 3px 3px #494949; } #header p.btn a { display: block; width: 225px; height: 50px; overflow: hidden; background: url(images/home-header-btn.jpg); text-indent: -9999px; } لاحظ أننا أعطينا الترويسة (header) ارتفاعًا بقيمة 244px وذلك لأن ارتفاع صور الخلفية الذي أعطيناها لها هو 244px. بعد ذلك استخدمنا padding مناسب حتى نُبعد النصوص عن الحواف ونجعل كل شيء مناسبًا ومتوافقًا مع التصميم، وقمنا أيضًا بإعطاء الوسمين <h1> و <h2> الموجودين في الترويسة بعض تنسيقات الخطوط حتى تتوافق مع التصميم (نوع الخط Georgia واستخدمنا أيضًا الخاصية letter-spacing لزيادة المسافة بين كل أحرف الكلمات). يمكننا كذلك محاكاة تأثير الظل عن طريق استخدام الخاصية text-shadow، بينما أضفنا عرضًا بقيمة 510px للوسم <h2> حتى نمنع النص من الظهور فوق المنطقة المخصصة له. وأخيرًا قمنا باستخدام الخاصية ()background: url وبعض الخصائص الأخرى على العنصر الذي يحمل الفئة btn. وذلك لتحويله إلى زر كما هو موجود في التصميم. #content { background: url(images/content-bg.png) repeat-y; padding: 57px 69px 50px 69px; overflow: hidden; } #content h2 { font: 30px Georgia, Serif; letter-spacing: 2px; margin: 0 0 20px 0; } #content h3 { font: 26px Georgia, Serif; letter-spacing: 2px; margin: 0 0 20px 0; } #content p { margin: 0 0 30px 0; } #content a { color: #a12121; text-decoration: none; } #content a:hover { color: #671111; } #content .portfolio-item { width: 182px; padding: 4px; background: #eee; text-align: center; float: left; margin: 0 7px 14px 7px; } #content .portfolio-item p.btn { margin: 0; } #content .portfolio-item p.btn a { display: block; width: 183px; height: 29px; padding: 7px 0 0 0; background: url(images/see-more-bg.png); font-weight: bold; text-align: center; text-transform: uppercase; text-decoration: none; } الآن سنقوم بتنسيق المحتوى الرئيسي للمدونة. لاحظ أننا أعطينا العنصر content# صورة كخلفية وأضفنا padding بقيم معينة حتى نُبعد المحتوى عن الأطراف. بعد ذلك استخدمنا overflow: hidden حتى نتأكد من أنّ جميع العناصر الموجودة داخل هذا العنصر والتي تحمل الخاصية float لن تقوم بتشويه التصميم وتخطيط الصفحة (استخدام الخاصية overflow: hidden في مثل هذه الحالة يسمى clearing floats). قمنا كذلك باستخدام بعض الخصائص البسيطة للنصوص الموجودة داخل هذا العنصر (كنوع الخط وحجمه وبعض الأمور الأخرى). قمنا بعد ذلك بتنسيق الصور المصغرة وذلك بإعطائها خلفية بلون رمادي وإعطائها الخاصية float: left حتى تظهر جميع الصور إلى جانب بعضها أفقيًا، وأخيرًا قمنا بتنسيق عناصر <a> لنجعلها تبدو وكأنها أزرار وذلك بإعطائها خلفية باستعمال الخاصية ()background: url. #footer { background: url(images/footer-bg.png) no-repeat; padding: 40px 0 0 0; overflow: hidden; margin: 0 0 30px 0; } #footer p#copyright { font-size: 12px; float: left; margin: 0 0 0 30px; color: #b8b6b2; } #footer p#back-top { font-size: 12px; float: right; margin: 0 30px 0 0; } #footer a { color: #a12121; text-decoration: none; } #footer a:hover { color: #671111; } بقي علينا الآن تنسيق التذييل الخاص بالصفحة. الجزء الأسفل من المحتوى تم إضافته كخلفية للتذييل، وبعدها أضفنا padding بقيم مناسبة حتى ندفع بمحتوى التذييل إلى أسفل صورة الخلفية. لاحظ أننا استخدمنا no-repeat وذلك حتى نتأكد بأنّ الصورة تظهر مرة واحدة فقط ولا تتكرر. قمنا بإضافة خصائص نصيّة لكل من حقوق الملكية وكذلك زر العودة إلى الأعلى وقمنا أيضًا باستخدام الخاصية float لإزاحة العنصرين إلى يمين ويسار الصفحة. إضافة بعض الجافاسكربت لدعم متصفح IE8 وأقلإنّ متصفح IE8 والنسخ الأقدم منه لا تدعم المحدد nth-child: لذلك إذا أردت أن تدعم هذه المتصفحات فبإمكانك أن تستخدم مكتبة jQuery لتساعدنا في ذلك: $(document).ready(function() { $("ul#nav li:nth-child(1)").css("margin-right", "60px"); $("ul#nav li:nth-child(2)").css("margin-right", "316px"); $("ul#nav li:nth-child(3)").css("margin-right", "60px"); $("ul#nav li:nth-child(4)").css("margin-right", "0px"); });حتى وإن كانت تلك المتصفحات لا تدعم المحدد nth-child إلا أن استخدام هذا المحدد مع jQuery ممكن وسوف تقوم تلك المتصفحات بتطبيق التنسيقات بدون أي مشاكل. إنهاء الصفحات الداخليةبعد أن قدمنا بإنهاء الصفحة الرئيسية فإننا سوف نقوم ببناء الصفحات الداخلية للموقع. سوف تكون بنية هذه الصفحات متشابهة نوعًا ما مع القليل من الاختلافات كما أن فيها بعض العناصر المشتركة لذلك سيكون بناؤها أمرًا يسيرًا. <div id="header" class="page"> <h1>About Chris Spooner</h1> </div>لنقوم بتنسيق ترويسة أخرى يمكننا بكل بساطة أن نضيف فئة (class) للترويسة الخاصة بالصفحات الداخلية وبعدها نقوم بإعطاء هذه الترويسة حجمًا أصغر وصورة خلفية معينة. لقد قمنا مسبقًا بإنشاء الشيفرة البرمجية الخاصة بعناصر معرض الأعمال، لذلك يمكننا تكرار هذه العناصر لكل مشروع على حدة، وكل ما نحتاج لتغييره هو الصورة المصغرة الخاصة بكل مشروع. خاتمةوهكذا نكون قد قمنا بتكويد كامل التصميم. أتمنى أن تكونوا قد استفدتم من الدرس. ترجمة -وبتصرّف- للمقال How to Code a Stylish Portfolio Design in HTML/CSS لصاحبه Iggy.

ربّما تكون شاشات اللّمس أحد الأسباب التي جعلت الأجهزة الجوّالة ذات شعبيّة كبيرة جدّا. تحذف شاشات اللمس المسافة بين الشخص والجهاز التفاعليّ، ونتيجةً لذلك، يحسّ الأشخاص بأنّ شاشات اللمس بديهيّة وسهلة الاستخدام. لهذا السبب، يمكن إدماج المنزلقات (Sliders) بسهولة في الأجهزة الجوّالة. تشجّع المنزلقات المستخدمين على استكشاف محتوى موقع بسهولة عن طريق إجراء حركات أفقيّة على الشاشة. رغم ذلك، فإنّ المنزلقات خيار قليل الاستخدام للتصفّح على الجوّال. تقدّم المنزلقات خيّار تصفّح رائعًا للمواقع والتطبيقات التي لديها عناصر قليلة لاستكشافها. تبدو المنزلقات طبيعيّة للمستخدمين، وتوفّر طريقة مرحة لتعديل الإعدادات أو استكشاف الميزات. يسهُل على الزوّار التعرّف على المنزلقات، ممّا يجعلها سهلة الاستخدام؛ وبالتالي، خيّارًا عمليًّا جدًّا ليستغلّه المصمّمون. ما لذي تصلُح له المنزلقات المنزلقات سهلة الفهم والاستكشاف، وهو ما يجعلها بديهيّة. تمثّل المنزلقات - نظرًا لكونها لا تأخذ مساحة كبيرة - خيّارًا جيّدًا في الأجهزة التي تستخدم شاشات لمس، التي هي شاشات صغيرة. كما أنّ المنزلقات مناسبة لما تمثّله من إضافة لتصميم واجهات المستخدم. تساعد المنزلقات المستخدمين في التحرّك جيئة وذهابًا، أو زيّادة السرعة أو الصوت، وتمنح حسَّا نسبيًّا للأنشطة (جعل مستوى الصوت أرفع ممّا هو عليه الآن). مصاعب عند استخدام المنزلقات النظر إلى التصميم من زاويّة المستخدم أمر مهمّ في سبيل التأكد من قابليّة الاستخدام (Usability). مستخدمو الجوّال – في الغالب – مستعجِلون أو مشتّتو الانتباه عند استخدام أجهزتهم. يمكن أنْ يستخدموا أجهزتهم وهم يتجوّلون في مركز تسوّق، أو يتناولون الطعام، أو يتنزهون في الحديقة. عندما يمرّ المستخدمون على منزلق، فهم يفعلون ذلك في الغالب مشتّتي الانتباه أو مستعجِلين. يعني هذا غالبًا دفع المنزلق كثيرًا إلى أحد الجانبيْن أثناء محاولة إبعاد أصابعهم عن الشاشة. يمكن أن تكون المنزلقات كذلك صعبة الاستخدام بالنسبة للأشخاص الذين لديهم صعوبات حركيّة. قد يكون من الصعب جعل المنزلق يعمل بالطريقة التي تفضّل أن يعمل بها إذا تلقّى ضغطًا زائدًا قليلًا على الشاشة. قد تكون المنزلقات كذلك صعبة الاستخدام بالنسبة للمستخدمين المتقدّمين في السنّ الذين ترتعش أيديهم؛ وهو ما يجعل ضمان نتيجة محدّدة صعبًا أثناء استخدام المنزلق. ربّما يفقد المستخدمون في مثل هذه الحالات الأمل في إمكانيّة تصفّح الموقع. ضع الجمهور المستهدَف من الموقع بالحسبان. إنْ كنت تستهدف زوّارًا متقدّمين في السن، أو أشخاصًا لديهم صعوبات حركيّة أو صحيّة، فلن يكون المنزلق خيّارك الأمثل. فكّر في مشاكل قابليّة الاستخدام بعد التأكّد من ملاءمة استخدام المنزلقات لجمهورك المستهدَف، يأتي الوقت للتفكير في قابليّة استخدام التصميم. يعتمد مستخدمو شاشات اللمس – غالبًا – الأصابع عند العمل على أجهزتهم. بما أنّك تريد أن يكون تصميمك قابلًا للاستخدام، فمن المهمّ استكشاف أماكن شاشة اللمس التي سيشغلها الأصبع أو اليد عند استخدام الجهاز الجوّال. سيساعد ذلك في وضع المنزلق بحيث يمكن استخدامه والتعامل معه. يختلف التصميم لسطح المكتب، حيث تُستخدَم الفأرة لتحريك المنزلق، عن الأجهزة بشاشات لمس. يجب أن تسعى في حالة شاشة لمس إلى التقليل من إمكانيّة الخطأ، أو الضغط على روابط أخرى، أو تغطيّة التعليمات أثناء وضع المستخدمين أصابعهم على الشاشة. يجب أن تظهر جميع اللافتات (Labels) والقيّم التي تفسّر المنزلق بجانب أصابع المستخدم وزرّ التمرير، أو فوقهما. استخدم المنزلقات لترك انطباع بصريّ واضح يفيد غالبًا استخدام المنزلق لتقديم متتاليّة من الصوّر البصريّة للمستخدمين إذا كان لديك محتوى مهمّ لعرضه، ولكنّ به معلومات كثيرة جدًّا، يصعُب استكشافها أو استيعابها على زوّار الموقع. على سبيل المثال، إنْ رغبت في عرض سلسلة من الأحداث التي يمكن للمستخدم متابعتها بهدف شراء منتَج من موقع تجارة إلكترونيّة، فإنّ مجموعةَ صوّر واضحة تقود المستخدم عبر خطوات متتاليّة يمكن أن تكون مفيدة ولا تتطلّب الكثير من العمل. تقتصد الطريقة السابقة أعلاه من وقت الزائر وتجعل الموقع سهل التصفّح. يمكن استخدام هذه العمليّة في حالات كثرة لمساعدة المستخدم في تصفّح موقع أو تطبيق للجوّال. أنواع المنزلقات التي يمكنك استخدامها توجد أنواع عدّة يمكن استخدامها عند تصميم موقع أو تطبيق: المنزلقات المنفردة (Single sliders): مناسبة للعمل مع قيمة وحيدة في كلّ مرة. المنزلقات المزدوجة (Double sliders): مناسبة للعمل مع مجال من القيم (مثلًا، منزلق للقيمة الدنيا وآخر للقيمة القُصوى). المنزلقات المتواصلة (Continuous sliders): تسمح المنزلقات المتواصلة بتحديد موقع نسبي على مجال مُحدَّد بقيمتين دنيا وقُصوى. المنزلقات المتقطّعة (Discrete sliders): تتميّز بنقاط توقّف يمكن للمستخدم استعمالها لإعطاء قيمة دقيقة. الدقة أم التخمين؟ قد يكون صعبًا أو معقّدًا بالنسبة للزائر استخدامُ منزلق بصورة دقيقة. يتأكّد هذا الأمر على شاشات اللمس. من الصعب جدًّا الحصول على الدقّة في التحديد إذا كنت أمام مؤشّر تمرير صغير على شاشة لمس. يكون استخدام المنزلقات – غالبًا – أسهل عندما لا تكون دقّة القيمة المُختارة مهمّة. إنْ كان المستخدم يستطيع استخدام المنزلق لمشاركة قيمة تقريبيّة، فسيكون ذلك – غالبا – كافيّا. مالعمل إنْ احتجت لقيمة دقيقة؟ يمكن إنشاء منزلق بقيم عدديّة قابلة للتعديل إذا كان من اللازم على المستخدم إدخال قيمة مضبوطة. يعني هذا أنّه سيكون باستطاعة المستخدم لمس المنزلق ثم إدخال عدد في صندوق نصّيّ. يمكن أن يُصبح الصندوق قابلًا للتعديل كلّ ما لمس الأصبعُ المنزلق. رغم ذلك، إنْ كانت واجهة المستخدم تتطلّب قيمة دقيقة من أجل قابليّة الاستخدام، فسيكون من الأفضل عدم استخدام المنزلقات. عرض مجال قِيم تسخدم بعض المنزلقات قيمًا عدديّة بحيث يمكن للزائر تحديد اختيّارات. يمكن لتطبيق تجارة إلكترونيّة أن يوفّر مجموعة من المنتجات تبدأ أسعارها من دولار واحد، لكنّها تصل إلى 999 دولار. يكون من المفيد في هذه الحالة – غالبًا – عرضُ مجال القيّم المتوفّرة على المتجر بدقّة. تمنح هذه الطريقة المستخدم إمكانيّة إنشاء مجال مخصَّص للعناصر التي يريدون استكشافها. تتجنّب بتخصيص مجال من القيّم حصول الزائر على إجابة بمجموعة عناصر فارغة. ستوفّر مجموعة قليلة من قيّم البحث نتيجة بعناصر أقلّ، في حين يوفّر مجال بحث أوسع عناصر أكثر. على الرغم من ذلك، لن يحدّد المستخدمون مجموعةً من القيّم إلّا لسبب، ولن يزعجهم غياب مجموعة من الخيّارات لا يمكنهم دفع ثمنها. أعط للمستخدمين القدرة على استكشاف التطبيق، حتى ولو لم يكونوا يفهمون مغزى المنزلق والمجالات التي يتيحها للمستخدم. وفّر تغذيّة راجعة بصريّة للمستخدمين أضف تغذيّة راجعة بصريّة لتفاعلات المستخدمين مع المنزلق، فتلك هي طريقة العمل التي يتوقّعها المستخدم. وفّر إجابة بصريّة فوريّة للمستخدم عند استخدامه لمنزلق أو عندما يُدخل معلومات في صندوق إدخال. يمكن استخدام التحريكات (Animations)، حالات الحومان (Hover)، والتأشير فوق العناصر (Rollover) للتواصل مع المستخدم. تجذب هذه الميزات انتباه المستخدم وتخلُق بالتالي قناة اتّصال معه. مواقع الويب التفاعليّة جذّابة دائما. عندما تمدّ المستخدم بتغذيّة راجعة بصريّة فإنّه يشعُر بالتقدير، ممّا ينتُج عنه إحساس بالثقة في قدرته على تصفّح الموقع. خاتمة تبدو المنزلقات بديهيّة وسهلة الاستخدام في تطبيقات الويب؛ كما أنّها خيّار جمالي، إلّا أنّها ليست دائمًا الأداة الأفضل للاستخدام. إنْ كنت تبحث عن قيم نسبيّة، وتعلم أنّ الجمهور المستهدَف لديه قدرة حركيّة جيّدة، فإنّ المنزلقات قد تكون خيّارًا جيّدا. أمّا إذا كنت تبحث عن قيّم دقيقة، فسيكون من المفيد توفير خيّارات لإدخال تلك القيّم. اعمل، بوصفك مصمِّمًا، على إنشاء شرائط تمرير يمكن للمستخدم من خلالها اختيار مجال من القيّم يمكن استغلاله على الموقع. يساعد هذا الأمر المستخدمين الذين قد يجدون صعوبة في تحديد قيم دقيقة عند استخدام المنزلق. ترجمة – بتصرّف – للمقال How to Create a Good UI Slider in Mobile Design لصاحبه Bogdan Sandu.

قمنا مؤخرًا بتحديث تصميم صفحة "?Why Should You Attend" التي كانت ماتزال تحتفظ بالتصميم القديم للموقع وقد احتجنا إلى أن نوائمها مع باقي الموقع. وعندما بدأنا العمل عليها قررنا أن نحسّن تصميم هذه الصفحة بأحدث التقنيات المستخدمة في التصميم حاليًا ألا وهي: الأشكال العائمة غير المستطيلة non-rectangular float shapes وميزة الكشف المباشر من قبل المتصفح عن قدرته على تطبيق تعليمات css وهذا مايعرف بـ feature queries. ولكن ليكن واضحًا بأننا لم نقم ببناء هذا المثال المتطور من دون أن يزودنا Mike Pick صاحب Monkey Do بالتصميم حيث أدركنا بأن رؤيته تتوافق بشكل جميل مع ميزات CSS الحديثة وقد كنا سعداء جدًا بالنتائج التي حصلنا عليها من خلال هذه التقنيات الحديثة لذلك أردنا مشاركتها معكم. تصميم الفقاعات styling bubbles هنا يوجد بعض المقتطفات من تصميمنا الأولي (التصميم النهائي لم يتم إنشاؤه كبطاقة صور لذلك لايمكنني عرض الشكل النهائي ولكن هذا الشكل قريب جدًا). مايهمني في هذا المثال هو طريقة استخدام الصور الدائرية، التي كنا نشير إليها باسم "الكُوّة portholes" ولكن بعد التفكير أفضل تسميتها بـ "الفقاعات". عندما بدأت التحضير لتنفيذها من خلال التعليمات البرمجية عدت بالتفكير إلى ما قالته جين سيمون عن الاتجاه الفني الحقيقي في الويب. وبالتحديد كنت أفكر حول الأشكال في CSS وكيف يمكن أن أكون قادرًا على استخدامهم بحيث تكون أسطر الكتابة مرتبة حول محيط الدائرة بشكل انسيابي. تقوم طريقة بناء هذا التنسيق على دمج مجموعة من التقنيات المستخدمة في التعامل مع الأشكال في CSS وهي Ragged Float وفكرتها تقسيم الصورة المنحنية إلى مجموعة من الشرائط مستطيلة الشكل ثم عرضها بالتسلسل لتظهر الشكل النهائي المنحني. و Sliced Sandbags التي تقوم على مبدأ بسيط هو بناء مجموعة من div التي تتوضع فوق الصورة الأساسية وبالتالي هذه الأقسام لاتكون الصورة الحقيقية التي سيتوضع النص حولها وإنما عبارة عن مجموعة من تعليمات php. الآن نمتلك الأشكال العائمة float shapes حيث يمكننا أن نعرّف دائرة أو مضلع ثم نقوم بتوصيف كيفية انسياب النص حول الشكل. أعلم ستقول بأنك لم تسمع أبدًا عن دعم هذه الأشكال في المتصفحات، بالتأكيد هذا صحيح حيث أن المتصفحات التي تدعمها إلى الآن هي WebKit/Blink family—Chrome, Safari, and Opera ولكن ذلك لايشكل عائقًا أمام هذه التقنية لأن المتصفحات التي لاتدعم الأشكال العائمة float shapes ستنفذ الطريقة القديمة boxy float في التعامل مع هذه الأشكال وذلك من خلال عرضها كألبوم صور. من أجل إضافة فقاعة سيكون الشكل الأساسي لتعليمات CSS هو: img.bubble.left { float: left; margin: 0 40px 0 0 ; shape-outside: circle(150px at 130px 130px); } img.bubble.right { float: right; margin: 0 0 0 40px; shape-outside: circle(150px at 170px 130px); } وبالمناسبة هذه الصور الفقاعة هي عبارة عن صور مربعة أبعادها 260px سوف يتم عرضها على سطح المكتب بهذا الحجم ولكن عند تصغير العرض إلى مساحات أصغر سيتم تحجيمها بنسبة 30% لتتناسب مع العرض الجديد. طريقة توضع الشكل لنفهم طريقة إعداد شكل الفقاعة النهائي سنقوم بحساب عدد بكسلات توضع الصورة، أولًا أبعاد الصورة الفقاعة هو 260×260 بكسل ونقوم بإضافة 40 بكسل عند الهامش الأيمن للصورة وبالتالي يتشكل لدينا مربع يحوي الصورة وأبعاده هي 300 بكسل بالعرض و 260 بكسل بالطول وتشغل الصورة الأساسية القسم اليساري من هذا المربع. إذًا وعند القيام بحساب بسيط نجد مركز الدائرة هو عند النقطة 130px 130px ونصف قطر الصورة الدائرية الفقاعة هو 130 بكسل ونمدد المحيط الخارجي للفقاعة 20 بكسل فيصبح نصف قطر الدائرة النهائي هو 150 بكسل. وبنفس الطريقة نبني الفقاعات الموجودة على الجانب الأيمن، حيث تنزاح نقطة المركز إلى 170px 130px لأننا أضفنا 40 بكسل كهامش أيسر للصورة، وستشرح الصورة كيفية توضع مركز كل دائرة من أجل كل صورة سنلاحظ مايلي: الصندوق الأزرق الفاتح يُظهِر العنصر نفسه المعرف بالصف img. المربع البرتقالي الفاتح هو منطقة الهامش الأساسية وعرضها 40 بكسل. الدائرة البنفسجية والتي تمّ تعريفها في تعليمات css بالمعرف shape-outside. بالإمكان ملاحظة كيفية انسياب النص إلى المنطقة البرتقالية حيث يصل إلى أعلى الدائرة البنفسجية وهذا هو تأثير خاصية shape-outside. المناطق خارج هامش الشكل يكون طريقة عرض النص فيها عادي. نلاحظ أن الدائرة البنفسجية تمتد خارج منطقة الهامش وذلك لأنه باستخدام خاصية shape-outside يتم قص الدائرة بحسب الأبعاد المعطاة بغض النظر عن مربع الهامش، لذلك فإنه إذا قمنا بزيادة نصف قطر الدائرة مثلًا 400 بكسل فهذا يعني أن الصورة ستغطي نصف الصفحة مع أن التصميم الأساسي للنص سيبقى حول حواف هامش الصورة العائمة كما لو أنه لايوجد أي شكل على الإطلاق. استجابة الأشكال Being Responsive حتى الآن طريقة التصميم جيدة فالنص ينساب حول الشكل العائم بطريقة سلسلة في متصفحات chrome /safari / opera ويتعامل مع الأشكال كما لو أنها مربع شكل عادي في Firefox /Edge وستبقى هذه طريقة تعامل المتصفحات مع الأشكال جيدة طالما أنه لم يتم تصغيير نافذة المتصفح وتتسبب في التفاف النص بين الفقاعات ولكن بالطبع يمكن حدوث ذلك في هذه الحالة بالنسبة للصور العائمة على اليمين لن يكون الوضع سيئًا على عكس الصور اليسارية التي لن يكون الأمر جميلًا بالنسبة لها. ففي بعض الحالات سيكون الالتفاف مقبولًا كما شاهدنا في الصورة السابقة وذلك في حالة كون النص عبارة عن عدة أسطر، أما في حالة كان النص فقط كلمة أو كلمتين وعند حدوث الالتفاف لهما سيكون شكلهما غير مقبول قليلًا ولذلك من الأفضل تغيير طريقة إعداد الهوامش في النصوص بحيث لايتم الالتفاف حول الفقاعات المرافقة للنص. على سبيل المثال: .complex-content div:nth-child(even):not(:last-child) p { margin-right: 20%; } .complex-content div:nth-child(odd):not(:last-child) p { margin-left: 20%; } أي أنه من كل الكتل div الأبناء زوجية الأرقام (وليست الابن الأخير) نضيف 20% كهامش على المحتوى ونقوم بنفس الأمر من أجل الكتل الأبناء أصحاب الأرقام الفردية. بإضافة هذه التعليمات الجديدة سيظهر شكل النصوص عند تصغيير نافذة المتصفح بشكل جيد في Chrome حيث سيتم التفاف النص على طول الفقاعة وسيتم إدخال النصوص إلى داخل هوامش الصورة بقيم معقولة ولكن في متصفح firefox الذي لايزال يمتلك النظام القديم boxy float في التعامل مع الصور لن يكون هناك التفاف في النص ودفع إلى الداخل وإنما سيتم إظهار شريط التمرير على طول الصفحة ومن جهة أخرى فإن زيادة قيمة الهامش من أجل اصطفاف السطور كما في firefox (الهامش كان بنسبة 33%) لامعنى له في الأشكال العائمة float shape في chrome وذلك لأن النص لن يصل أبداً حتى النصف السفلي من الدوائر. دعم ميزة Querying feature تشغيل ميزة feature query يتم من خلال إضافة سطر supports@ إلى التعليمات حيث نستطيع من خلال هذه الطريقة معرفة المتصفحات التي لاتدعم الأشكال العائمة التي أضفناها فتقوم تعليمة support@ بتعديل الهوامش إلى 33% كما أنها تقلل هذه الهوامش في حال كانت المتصفحات تستطيع التعامل مع هذه الأشكال، ويتم هذا من خلال إضافة تعليمات: .complex-content div:nth-child(even):not(:last-child) p { margin-right: 33%; } .complex-content div:nth-child(odd):not(:last-child) p { margin-left: 33%; } @supports (shape-outside: circle()) { .complex-content div:nth-child(even):not(:last-child) p { margin-right: 20%; } .complex-content div:nth-child(odd):not(:last-child) p { margin-left: 20%; } } وبهذا سيظهر تصميم العناصر بشكل جيد في جميع المتصفحات، بالرغم من وجود بعض الأشياء الصغيرة جدًا التي يمكن إضافتها. ولكن بشكل عام طريقة العرض في جميع الحالات التي تدعم الأشكال العائمة أو لا تبعث على السرور في الفيديو الأول طريقة العرض في متصفح chrome تحميل الفيديو الأول والفيديو الثاني يظهر طريقة العرض في متصفح firefox الذي لايدعم الأشكال العائمة تحميل الفيديو الثاني بالأخير إنها نعمة وجود ميزة مثل feature queries تسمح للمتصفحات مثل firefox و MS Edge الحصول على دعم لإظهار الأشكال العائمة. ومع أنه لايوجد تحسينات قريبة للمتصفحات ولكن يتم العمل بشكل دائم على إدخال التحسينات على CSS نفسها بحيث سيصبح شعارها قريبًا "صمم وانسى"، كما يمكن القول بأن التعديل الأساسي في CSS هو طريقة التعامل مع الأشكال وتحسين عمليه استجابتها من دول وجود الدعم الكافي في المتصفحات لها. ترجمة –وبتصرّف- للمقال A Redesign with CSS Shapes لصاحبه Eric Meyer

أن تكون مبدعًا فهو أمر عميق شخصيًا. حيث يبدو وكأنك تضع قطعًا من ذاتك في كل عمل تقوم بإبداعه. وبالنسبة لكثير من المصممين، فإن العمل يكون حقًا نابعًا من الحب. إن فكرة مشاركة العميل بتصميم جديد مميز هو أمر مثير. فإن كنت متحمسًا للعمل الذي قمت به للعميل، يجب عليه أن يشعر بنفس الشعور بشأن ما يراه. لسوء الحظ فإن الأمور لا تسير دائمًا بهذه الطريقة. قد لا يرى العملاء الأمور بنفس الطريقة التي تراها بها أنت. وأحيانًا قد تكون تعليقاتهم بنّاءة؛ وأحيانًا قد تكون قاسية بعض الشيء. وفي كلتا الحالتين، فإن رؤية العمل الذي بذلت فيه قلبك وروحك لإبداعه دون أن يتم تقييمه بشكل مناسب هو أمر سيء. يتعرض المصمم بشكل دائم لتلقي ردود فعل سلبية وغير سارّة. لذا دعونا نلقي نظرة على بعض الطرق التي يمكننا فيها التعامل مع ردود الفعل تلك بشكل أفضل. ردود الفعل تلك غير شخصية إن تلقي الانتقادات يمكن أن يكون أمرًا صعبًا للغاية - وخاصة بالنسبة للمصممين الذين لا يتمتعون بالخبرة. عندما يقول أحدهم بأنه لم يعجب بما قمت به، فمن الممكن أن يجعلك ذلك تشعر بالفشل. لقد أمضيت ساعات من العمل الجاد ليأتي هذا الشخص الذي تراه غير مؤهل لنقد تصميم ويقوم بنقد أفكارك. في الحقيقة جميعنا نواجه هذا الأمر. ففي حياتي المهنية، أستطيع أن أذكر الحالات التي شعرت فيها كما لو أني أسوأ مصمم ويب في العالم. عليك أن تبدأ بالتفكير بأن الآخرين ليس لديهم ثقة بقدراتك لإنجاز هذه المهمة. عليك أن تبدأ بالتساؤل فيما إذا كانوا على حق أم لا. أحيانًا تولي عقولنا الكثير من الأهمية للمواقف أكثر مما تستحق في الواقع. وفي معظم الحالات، فإنه يتم نقد التصميم – ولا يتم نقدك شخصيًا. في الواقع، قد يكون الشخص الذي تتعامل معه يحترمك بشدة ولا يرغب بإيذائك بأي شكل من الأشكال. لكنه في الوقت ذاته صادق بآرائه - سواء اتفقت معها أم لا. كلما تعاملت أكثر مع مواقف كهذه يصبح من الأسهل بالنسبة إليك تقسيم النقد الموجه للتصميم بشكل أفضل. قد تشعر بالإحباط نتيجة إجراء بعض التغييرات، ولكن يجب ألا يجعلك ذلك تشعر بالفشل. تذكر، حتى أفضل الرياضيين لا يتمكنون من الفوز من المرة الأولى. فهم بحاجة ليقوم ببعض التعديلات ومن ثم يعودون للعبة بشكل أقوى. وينطبق الأمر ذاته على التصميم. العمل ليس طفلك من الطبيعي أن تكون صاحب ملكية ما قمت بابتكاره - حتى إن كنت قد عملت عليه لصالح شخص آخر. ولذا فإننا نشعر بشعور سيء عندما لا يشعر شخص ما بسعادة غامرة تجاه التصميم مثلنا. وفي الحقيقة، يمكن اعتبار ذلك ميزة جيدة حيث تظهر مدى الرعاية التي توليها لعملك. ومن ناحية أخرى، فإن ملكية العمل الذي تقوم به لصالح شخص تعود إليه في النهاية. لذلك لذا لا تنسى حين تشعر بخيبة أمل بأنهم يمتلكون الحق في إبداء استيائهم من جزء معين في التصميم. في بعض الأحيان قد يكون لدى العميل اقتراح أو طلب ترى بأنه سيدمر مفهوم التصميم بأكمله. شخصيًا، أجد أنه من الصعب تقبل هذا الأمر. ولكن هناك بعض الطرق التي يمكن استخدامها للتعامل مع حالة كهذه. قم أولًا بتوضيح رأيك. اشرح بهدوء أسبابك التي تدعوك لاتخاذ بعض الخيارات المحددة للتصميم. لقد تم اختيارك بسبب خبرتك لذا فإنك تمتلك الحق في التعبير عن رأيك المهني. أحيانًا يكون ذلك كافيًا لتساعد العميل في رؤية الأمور من وجهة نظرك، أو لتساعده في إيجاد حل وسط. إن لم تجدي تلك الطريقة نفعًا، عليك أن تقوم ببساطة بما يطلبه منك العميل مستخدمًا أفضل القدرات لديك. الأمر ليس بسيطًا كما يبدو. فعندما تكون على يقين من أن التغيير سيكون له تأثير سلبي على التصميم، سيكون من الصعب عليك أن تشعر بما يكفي من الحماس للقيام بالتعديل. لذلك فإنك تحتاج لتذكير نفسك بأنك تعمل لصالح عميلك - وليس العكس. ابذل قصارى جهدك وقم بتنفيذ العمل بصدق وبأفضل طريقة ممكنة. حاول أن تظهر بأنك على استعداد لتقوم بمحاولة القيام بذلك بشكل مهني حيث سيكون ذلك محل تقدير كبير. إنه جزء من عملك إن قمت بتوظيف شخص لإعادة تصميم مطبخك، فإنك سترغب في التعبير عن رأيك بشأن رؤيتك للمطبخ بعد التصميم. قد يكون هناك بعض الجوانب التي تريد تغييرها أثناء ذلك العمل، وبالتالي فإن ردود فعلك هي تأثير جانبي طبيعي. وبتلك الطريقة يجب علينا التعامل مع الموضوع. عندما تتعلم قبول النقد كجزء من العمل في التصميم، ستكون أفضل بكثير في التعامل معه. إن مراقبة الأمور المختلفة التي يرغب بها الأشخاص الآخرون يمكن أن يكون موردًا قيّمًا في مشاريعك المستقبلية. ستصبح مستمع أفضل وستصبح أكثر تركيزًا على وجهة نظر العميل. إن تعلم كل ذلك يمكن أن يجعلك مصمم أفضل. في المرة القادمة التي تتلقى فيها ردود فعل سلبية، فكر بأنها ليست إهانة ولكنها فرصة للتطور. ترجمة –وبتصرّف- للمقال Not Taking Negative Feedback from a Client Too Personally لصاحبه Eric Karkovack حقوق الصورة البارزة محفوظة لـ Freepik

سواءًا كنت تعمل على صفحة هبوط لمنتج، لخدمة أو على صفحتك الشخصية من أجل عملك الحر، فإن كل الصفحات تشترك في عدة أمور بينها. اليوم سنشاهد دور كل واحد منها، وأنواعاها ومتى نستعلمها وما الفائدة منها. في هذا الدرس سنتطرق إلى 6 أجزاء مهمة في كل صفحة، وهي على الترتيب كالتالي: رأس الصفحة (Header) التعريف القيمة أو الشيء المميز محل الثقة نقطة التحويل (Call to action) ذيل الصفحة (Footer) سنستعين برسوم تويضحية في الطريق لفهم وشرح كل نقطة وكيف نستخدمها على أتم وجه، وفي نهاية الدرس ستكون قادرا على إنشاء صفحة هبوط أو صفحة شخصية بكل سهولة. لكن تذكر، لا صفحة تشبه الأخرى، ولا منتج يشبه الآخر، لذا قد لا يفيدك هذا الأمر تماما ولا يغطي احتياجياتك. ماهي صفحة الهبوط؟حتى نعرف ما الذي نقوم به، علينا أن نعرف أولا ماهي صفحة الهبوط، حسب موقع unbounce فإن صفحة هبوط هي: إذا، حسب هذا المفهوم، صفحة الهبوط تستطيع أن تكون صفحة لبيع كتاب، لبيع منتج ما، للتسجيل في خدمة، لطرح فكرة، لتقديم خدمة... كل هذه الأمور مختلفة، ولكنها تشترك في شيء واحد وهي أنّها تريد أن تحول الزائر إلى زبون. صفحات الهبوط تنقسم إلى قسمين اثنين، صفحات التحويل (Click Through) وصفحات التجميع (Lead Generation). صفحات التحويلصفحات التحويل هي كل الصفحات التي تحول المستخدم إلى صفحة أخرى، صفحات مثل هذه تحول المستخدم إلى متجر، إلى منصة البيع، أو بشكل عام هذه الصفحات تقدم المعلومات الشاملة للشيء، وليست مسؤولة عن تحويل المستخدم إلى زبون بشكل مباشرة، ولكن لها علاقة كبيرة بالأمر. صفحات التجميعصفحات التجميع هي الصفحات الأخرى، وتكون هذه الصفحات للتسجيل، للبيع مباشرة، للاشتراك، أو لملأ استمارة ما، أو للتواصل المباشرة، للحصول على نسخة الكترونية من كتاب أو منتج ما أو للتعريف بمنتج ما (مع هدف مشاركة المستخدم له عبر حساباته في الشبكات الاجتماعية). 1. رأس الصفحة (Header)من بين كل الأجزاء الأخرى، رأس الصفحة يكاد يكون أهم جزء في أيّ صفحة، فهو يستغل منطقة fold وهي المنطقة التي يراها المستخدم فور وصوله للصفحة بدون التمرير للأسفل، نشر أحمد مجدي في معمل ألوان مقالا ممتازا عن هذه النقطة. بهذه المنطقة بالتحديد، على المصمم أن يستعرض بعض النقاط المهمة، وهذه النقاط تكون كالتالي: الفكرة الموجزة تكون هذه الفكرة عادة عنوانا كبيرا بخط عريض في وسط الصفحة ليدل المستخدم على ماهية المنتج أو الخدمة (برنامج، أو خدمة ويب). أو عنوانا لكتاب مع شرح بسيط له وغلاف الكتاب: أو الاسم ومجال التخصص في حال كانت صفحة شخصية لمستقل أو شركة: في الحالات السابقة يتم إضافة شعار فوق الفكرة الموجزة، وفي حال صفحة شخصية يتم إضافة صورة شخصية، في حال منتج ككتاب أو شيء مشابه، يتم إضافة الغلاف. نقطة التحويل (Call to action) يتم إضافة هذا الجزء للهيدر عادة لأهميته. سنتكلم عن التفاصيل أكثر في جزئه المخصص، أما هنا فنشرح أهم النقاط. عادة هذا الجزء يكون زرا، أو مُدخلا (input). الزر يسمح للشخص بالانتقال إلى جزء الشراء، أو إلى صفحة التسجيل، أو إلى استمارة التواصل: وعندما لا يوجد شيء ليقود له هذا الجزء، يتم استعمال زر للتنقل إلى الجزء الذي بعده. يمكن أن يكون مُدخلا للاشتراك في قائمة بريدية من أجل التنبيه، أو للتسجيل في الخدمة، أو للحصول عل المنتج عبر إرساله في البريد. روابط التصفح (navigation) تكون روابط التصفح عادة موجزة ومسؤولة عن التصفح داخل الصفحة وليس من أجل روابط لخارج الصفحة، تحتوي القائمة على أقسام الصفحة (مثل التعريف، نقطة التحويل، التسعير...) يستحسن أن تكون متلصقة (sticky أو fixed) من أجل أن تكون في متناول اليد دوما. يوجد أكثر من نوع لذلك الجزء، تستطيع مثلا وضع زر للتسجيل بداخله: لإبقاء الزر قريبا من المستخدم دوما، عادة يحدث هذا للصفحات التي تبيع منتجا أو تقدم خدمة، بحيث في أيّ نقطة ما يكون المستخدم قد حصل على ما يكفي من المعلومات وهو بالتالي مستعد للطلب أو التواصل. 2. التعريفالتعريف هو جزء مهم في بعض الحالات ولكنه أمر اختياري في حالات أخرى، مثلا في صفحات لمنتج ما أو خدمة فيمكن الاستغناء عن التعريف حيث أنّه سيكون مدمجا في جزء "القيمة"، في حالات أخرى قد يكون مفيدا، في حال كنت مستقلا أو شركة أو خدمة جديدة، فالتعريف سيعطي الزائر فكرة عن الموقع أو الخدمة، التعريف يكون نصيا، التعريف التي يستخدم الصور محله يكون في جزء "القيمة". كمثال تعريف لمستقل يجب أن يحتوي على اسم المستقل، ربما البلد (في حالات معينة) ومجال الاختصاص وما ستقوم به بالتحديد عادة، نبذة عن الشخص وعن مراكز عمله السابقة ستعطي ثقة أكثر للعميل، حيث سيدرك أنه لا يتواصل مع آلة بل مع انسان فعلي. نفس الأمر ينطبق على الشركات، حاول أن تجعل الجزء قصيرا ومباشرا، لا أحد يملك الوقت لقراءة نص طويل. إذا وجدت أن "الفكرة الموجزة' رأس الصفحة تكفي لتشرح الفكرة فلا داعي لوضع تعريف. كما قلنا التعريف أمر اختياري تماما والعديد من الأشخاص يختارون عدم استخدامه. 3. القيمةالقيمة أو الشيء المميز هي أهم جزء في أيّ صفحة هبوط، فهي تشرح الخواص والمميزات لمنتج ما، أو خدمة ما، تقدم شرحا وافيا للكتاب، أو تقدم مجالات خبرة المستقل أو خدمات الشركة. أحيانا يختار المستقل تجاهل هذه المرحلة وجعل العمل يتكلم عن نفسه في جزء "محل الثقة" لكن ليتم هذا على المستقل أو يصف كامل مهاراته في الجزء الأسبق وهو "التعريف". بالنسبة للتطبيقات فهي تستغل هذه النقطة في عرض مميزات للتطبيق مثلا: أما عن المواقع أو خدمات الويب فهي تعرض المميزات على شكل نقاط مع أيقونة لكل جزء: 4. محل الثقةلأنّك لا تستطيع أن تقفز على شخص في الطريق من اللامكان ثم تخبره أنّ عليه أن يشتري منتجك المذهل أو يستأجرك للعمل، أنت أيضا لا تستطيع أن تطلب من زائر دخل لتوه الموقع أن يشتري منتجك، لذا عليك أن تبني ثقة لدى الزائر، وهنا يأتي جزء محل الثقة. محل الثقة قد تعني أكثر من شيء، ولكنها بالمجمل العام المكان الذي يُكسب الزائر ثقة في المنتج أو المشروع أو الشخص. ويكون له أكثر من شكل: العملاء: عادة ما يستخدم هذا بكثرة مع المستقلين ومع البرامج والخدمات. جزء العملاء يكون بأن يتم وضع مجموعة من شعارات أهم العملاء الذين مروا على العميل/منتج [figure 11]. يكسب العميل ثقة مباشرة في المنتج في حال رؤية شعارات شركات معروفة، هذا يعني له أنّ المنتج جيد وبالتالي يستحق المال الذي سيصرفهالتغطية الإعلامية: التغطية الإعلامية تكون عندما لا يوجد عملاء لاستخدامهم، أو عندما لا يكون من المنطقي استخدام عملاء (كتاب مثلا). في هذه الحالات يتم إضافة شعارات المواقع الإخبارية التي قامت بتغطية المنتج ويكون شكلها شبيها بشكل العملاء السابقيين، التغطية الإعلامية تُكسب قدر جيد من الثقة أيضا.الشهادات: الشهادات هي الخيار الثالث ومن أكثر الخيارات شيوعا، ببساطة تعتمد طريقة الشهادات على إدراج شهادات حقيقية من العملاء السابقين أو أشخاص جربوا الخدمة. أن تقول جملة عشوائية لوحدك، وأن تقول نفس الجملة ثم تُرفق أنها من قول العالم الفلاني أمران مختلفان، فالأخير يكسب ثقة أكبر في الجملة وبالتالي يجعلها ذات مصداقية، لذلك شهادات العملاء يجب أن تتبع نفس النسق، لذا ينصح أن يتم إضافة اسم صاحب الشهادة، وكذى صورته، حيث الصورة تجعل الزائر يعرف أنّه يسمع من شخص ما ربما قد رآه من قبل. وإضافة منصب العمل قد يكون مهما أيضا، أنت ستثق بمسؤول التصميم في شركة ما إذا كان يتكلم حول برنامج تصميم مثلا.الشبكات الاجتماعية: في حال لم يتوفر شيء مما سبق، فخيار آخر هو الشبكات الاجتماعية، لكن الأمر لا يصلح دوما، فعدد قليل من الصفحات تستفيد من الشبكات، ولكن إن كانت خدمتك أو موقعك يملك جمهوريا جيدا على الشبكات الاجتماعية، فمن المستحسن أن تضيف عدد المتابعين أو المعجبين من الشبكات الاجتماعية.صاحب المنتج: قد يبدو الأمر غريبا بعض الشيء لأول وهلة، ولكن إذا قرر بيل غيتس إنشاء صفحة لمنتجه فالأغلب أنه سيضيف صورته أو يجعل الأمر واضحا أنّه هو المالك . الأمر لا ينجح كثيرا لأننا لست دوما مشاهير، ولكن ربما كنت تسوق كتابا لكاتب معروف، فإضافة صورته ونبذة عنه تولد بعض الثقة أيضا. المشاريع السابقة: الأمر مخطط للمستقلين أو الشركات والوكالات بشكل خاص. المشاريع السابقة أو معرض الأعمال (Portfolio) هو أهم جزء في صفحة هبوط لمستقل، أن تقول أنّك مصمم بارع، وأن تظهر للزائر أنّك مصمم بارع بعرض أمثلة حقيقية هما أمران مختلفان. النمط السائد في عرض في المشاريع هو على شكل مربعات (grid) ولكن أنت حر بعرضها بأيّ طريقة تشاء.5. نقطة التحويل (Call to action)يأتي أهم جزء في كل الصفحات، أو كما يقول المثل الشعبي (الزبدة). فكل ما سبق كان لتحضير الزائر لهذه النقطة بالتحديد. لقد عرفت المنتج، أعطيت قيمته الفعلية، وبنيت الثقة لدى الزائر، تأتي النقطة التي يحين فيها تحويل الزائر إلى زبون، عادة هذا الجزء يكون زرا يقود لصفحة للتسجيل، أو لتحميل ملف ما، لإدخال معلومات للتسجيل في نشرة، جدول للاشتراكات. دعنا نشاهد أشكاله المختلفة: الزر: هذا الشكل هو الأكثر شيوعا وهو يتكون من زر كبير نسبيا، ويكون واضحا ويملك لونا مختلفا عن بقية العناصر حتى يستقل عنهم، يجب أن يكون بعبارة واضحة وغير خادعة للزائر، كأن تعرض فترة تجريبية وعندما يسجل الزائر لا يجد شيئا. العبارة يجب أن تكون لطيفة وغير عدائية، عبارات مثل "اشتري الآن" أو "حمل الكتاب" أو "سجل معنا" أو "تواصل" هي عبارات معتادة ولا تقدم الكثير من الحماس أو الرغبة للزبون لذا عليك أن تجرب عبارات تبدو وكأنها صدرت من انسان أو أقل عدائية مثل "هيا لنبني شيئا معا". اللون شيء مهم في كل زر، إلا أذا كنت ملزما بلون واحد لهوية الموقع أو المنتج، فعليك أن تختار الألوان بحذر، في تجربة قام بها موقع Performable وُجد أن تغيير لون الزر من الأخضر إلى الأحمر رفع نسبة التحويل (وهي عدد الزبائن على عدد الزوار) بنسبة 21% حيث أنّ اللون الأحمر يصنع شعورا بالعجلة ويَبرز أكثرمن بقية الألوان، والقاعدة العامة هي أنّ كل الألوان الساخنة (أحمر، برتقالي، أصفر، بنفسجي محمر...) مرحب بها. استمارة: وهو النوع الثاني الأكثر شيوعا وهو يتكون من استمارة يملأها الزائر من أجل الاشتراك في نشرة بريدية، أو من أجل الاشتراك في الخدمة، أو من أجل التواصل الجداول: شكل آخر شائع هو الجداول، فهي تسمح لك بعرض خطط الاشتراك، الاستضافة، باقات الشراء، وأيّ شيء تستطيع أن تبيعه في أكثر من باقة بأكثر من سعر، عادة يتم التركيز على العرض أو الباقة الأكثر شيوعا ووضعه في المنتصف وتمييزه عن البقية. 6. ذيل الموقع (Footer)ذيل الموقع لا تكون له أهمية كبيرة في بعض الصفحات، بعض الصفحات تختار أن تزيله تماما لأنها تريد أن ينصب تركيز الزائر على جزء التحويل فحسب. إذا كانت الصفحة هي تقديما لموقع ما، فالأحرى أن تضيف الذيل لتضع فيه روابط ترسل إلى أماكن أخرى، إلى جانب الصفحات الاجتماعية نظرة على صفحات حقيقيةفي هذا الجزء سنلقي نظرة على صفحات هبوط من الواقع، وكيف طبقت القواعد البسيطة العامة. صفحة كتاب Zero to oneكتاب Zero to one كتاب رائع قد سبق وأن قرأته، وكتاب رائع كهذا لابد أنّه سيملك صفحة رائعة لبيعه: Zero to One book. رأس الصفحة مباشر ويحتوي أهم المعلومات المتوقعة، فهو يحتوي على روابط للتصفح داخل الصفحة مثل معلومات حول الكتاب وحول صاحبه، الواجهة تملك صورة لغلاف الكتاب إلى جانب سطر تشويقي للكتاب، مع وجود زرين، أول زر وهو أهمهم ويعمل بصفته زر Call to action من أجل شراء الكتاب، الزر الثاني هو من أجل قراءة مقتطف من الكتاب بشكل مجاني. عند النزول تحصل على شهادات حول الكتاب من شخصيات معروفة وهذا لبناء الثقة حول المنتج. الموقع مقسم إلى أكثر من صفحة للتوزيع الجيد للمحتوى، مع تواجد جزء التحويل (call to action) أسفل كل صفحة لضمان وجوده قرب المستخدم دوما. تطبيق التصميم InvisionInvision هو منصة وتطبيق لصنع التصاميم الأولية (prototype) جنبا إلى جنب مع فريقك. في الأغلب ستتوقع تصميما ممتازا من منصة للتصميم، وهذا ما ستحصل عليه مع صفحة هبوط تطبيق Invision. رأس الصفحة يقدم أهم العناصر اللازمة لأيّ زائر، جزء التصفح يملك روابطا تأخذك إلى أجزاء مهمة في المنصة إلى جانب زر بارز للتسجيل. تحتوي الصفحة على عنوان كبير يصف المنصة إلى جانب سطر آخر للشرح. مع وضع زر CTA. بالنزول نجد مميزات المنصة وإلى جانب كل واحدة منها شهادة أحد الزبائن إلى جانب شعار شركته من أجل بناء الثقة في كلامه. في الأسفل نجد جزء بناء الثقة حيث يقوم التصميم بعرض أهم العملاء وقصصهم مع التطبيق. أخيرا يتم التطرق إلى جزء التحويل حيث أنّه استمارة للاشتراك في التطبيق خاتمةفي هذه المقالة تطرقنا إلى مامعنى صفحة هبوط، وإلى أهم الأساليب والعناصر في كل صفحة، كما عرضنا بعض الأمثلة الناجحة من الحياة اليومية. في المقالين القادمين سنقوم بتصميم وبناء صفحة هبوط خاصة بنا باتباع ما تكلمنا عنه هنا.

واحدة فقط من تطبيقات الطّقس هذه تسعى لحلّ المشكلة الحقيقيّة: أمورٌ متباينة تقع وسط مجتمع التصميم. لدينا من جهةٍ كتاباتٌ بديعة من أمثال راين سينقر وجولي شو، تدفع بحرفتنا قُدُمًا. ولدينا من الجهة المقابلة عدد متزايد ممّن يضعون أعمالهم ويتناقشونها على Dribbble، ما مُجمل حصيلته الدفع بحرفتنا إلى الوراء. ليس هذا المقال عن Dribbble نفسه، ولكن عمّا يُجلّه مجتمع Dribbble. سأستعمل في ما يأتي مصطلح "تصميم المنتجات" Product Design، ولكنّ ذلك يشمل أيضا تصميم تجربة المستخدم UX وتصميم التفاعل Interaction Design. ”يبدو مذهلًا!“ هي ما يكافئ به مجتمع Dribbble العملَ السّطحيّ خلال مراجعتي ﻷعمال تصميم العديد من المُتقدّمين إلى وظائف التّصميم العام الماضي، لدى فيس بوك والآن في إنتركوم، لاحظت نمطًا مثيرا للقلق. يقوم كثيرٌ من المصمّمين بالتّصميم فقط لينالوا إعجاب نُظرائهم بدل أن يعالجوا مشاكل عمليّة حقيقيّة. طويلا ما كان يمثّل هذا الأمر مشكلة في مجال الإعلان الإبداعيّ (حيث كثيرا ما يميل العمل الإبداعيّ إلى نيل الجوائز أكثر من تحقيق اﻷهداف التّجارية اﻷساسيّة للعملاء) وهو الآن يبرز أكثر فأكثر في مجال تصميم المنتجات. الكثير من أعمال تصميم المنتجات التي رأيت مؤخرا كانت سطحيّة، ومنجزة بعين صوب Dribbble. أشياءٌ تبدو رائعة ولكن لا تعمل بشكل جيّد. تنفيذٌ متقن لبكسلات التّصميم المسطّح، ولكن عملٌ لا يستهدف أغراضا تجارية حقيقية، لا يحلّ مشاكل يواجهها النّاس يوميًّا، ولا يأخذ بعين الاعتبار نظاما تجاريّا بشكل كليّ. Dribbble نفسه يساهم في صياغة الحوار إلى حدٍّ ما، بكونه الواسطة التي تتشكّل من خلالها تلك الرسائل، وبإبرازه للواحات الألوان وغيرها من التفاصيل السّطحية الشائعة في مجال تصميم واجهة المستخدم. النّاس يلاحظون ويقلّدون. الأغلبية السّاحقة من أعمال تصميم المنتجات في Dribbble تبدو متطابقة. سواءً كان برنامجا اجتماعيا، برنامج محاسبة، موقعًا للتسويق، أو تطبيق طقس، يتمّ اعتماد نفس الأساليب. أغلق عينيك قليلا ثمّ حاول أن تحدد الفرق بين هذه التّطبيقات: أهمّ أعمال تصميم المنتجات هي عادةً أشدُّها قبحا في المقابل، أفضل طالبي الوظائف الذين رأيتهم قاموا بإرسال منهجيّة تفكيرهم. رسومات و مخططات بيانية، إيجابيات وسلبيات، مشاكل حقيقية، مساومات وحلول. نماذج مبدئية Prototypes تبين كيفية التفاعل والحركة. أشياء تنتقل، تتغير، وتتحرك. أشياء تستعمل بيانات حقيقية. أسوء المتقدمين أرسلوا ملفات PNG مسطحة. ملفات PDF مليئة بالإطارات الشبكية Wireframes. لا فيها تعبير عن السياق ولا عن المشكل الذي يُقصد حلّه. قد تبدو ملفات PNG المتقنة تلك رائعة على Dribbble، لكنها ستفقد من قيمتها إذا اتُّخذت كأداة تصميم أساسيّة في بيئة صنع منتجات حقيقية. لهذا السبب يُعدّ قيام بعض المُصمّمين بإعادة تصميم أعمال شركات أخرى ونشرها مضيعة وقت (كأن يقترح مُصمم ما إعادة تصميم لموقع أو لشعار)، كما هو الحال في اقتراحات إعادة تصميم شعار ياهوو، نظام iOS، إعادة تصميم واجهة فيس بوك، أو تويتر أو حتّى إعادة تصميم شعار الخطوط الجوية الأمريكية، وغيرها الكثير. لا يدرك الناس السّياق ولا منهجيّة اتخاذ القرارات في تلك المشاريع، ليسوا على علم بالمتطلبات و القيود، ولا بسياسة الشركة. باعتبار أنّ تصميم المنتجات يرمي إلى حلّ مشاكل لمُستخدمين في إطار قيود تجارة معينة، فالأمر ببساطة أنّ الكثير ممّن يطلقون على أنفسهم مصمّمي منتجات/واجهة المستخدم هم في الحقيقة يمارسون الفنّ الرقمي Digital Art. هم فنانون ينجزون أشياء جميلة المظهر، ما يعدّ بالتأكيد مهارة مهمّة، لكنهم ليسوا يمارسون تصميم المنتجات. تصميم المنتجات يُعنى بمهمّة، برؤية، و بهندسة بدءا من التصور العامّ ونزولا إلى تفاصيل مستوى البكسلات، يجب على المصمّمين أن يضعوا نصب أعينهم مهمّة شركتهم، رؤيتها، وهندسة منتجها. يجب أن يمرّ كل شيء يقومون به من خلال هذا الطّريق. ينشأ التصميم من أعلى الشّركة ابتداءً بمهمّتها، ومن ثَمّ برؤيتها. من الصّعب جدّا إنجاز تصميم جيّد في غياب مهمّة ورؤية واضحتين. لا تستهن أبدًا بأهميّة هذا اﻷمر. إذا كانت شركتك تفتقر إلى مهمّة واضحة، فيجدر بك المبادرة إلى خلق واحدة. بعد المهمّة و الرؤية تأتي هندسة المنتج. ليست الهندسة التقنيّة، وإنّما باﻷحرى أجزاء المنتج وعلاقة بعضها ببعض. هي النظام في حدّ ذاته. في صباح أوّل يوم عملٍ لي في فيس بوك، قام كريس كوكس (نائب رئيس المنتجات) بإلقاء كلمة تقديميّة رائعة (بإمكانكم مشاهدة بعض منها هنا). بحضور مُوظّفين من أقسام متنوّعة في الشّركة، وبينما كان بإمكانه الحديث عن الكثير من الأمور، أخذ يركّز على شرح هندسة المنتج، وعلاقته بمهمّة الشّركة. بالنّسبة لفيس بوك، تلك الهندسة هي عبارة عن مجلّد ضخم يضمّ مجموعة من اﻷشخاص، وأصدقائهم، واهتماماتهم؛ يضمّ أيضا مجموعة من الشّركات، ابتداءً من كبرى الشّركات ونزولا إلى المتاجر المحليّة الصّغيرة. وفوق ذلك المجلّد خارطة تظهر العلاقة بين تلك اﻷشياء كلّها. إنّه وصف واضح وضوح الشّمس لهندسة المنتج، ومرتبط مباشرة بمهمّة الشّركة. حسب تجربتي، من الصّعب جدّا القيام بتصميم جيّد في ظلّ غياب هندسة منتج واضحة المعالم. في العديد من الأحيان، وتماما كما هو الحال مع المهمّة، يجدر بالمصمّم أن يساعد على تحديد هذه الهندسة و تطويرها. عندما كنت أصف فيس بوك للشّركاء الخارجيّين، كثيرا ما أرسم على السّبورة مخططات بيانية كهذا: ليست هندسة المنتج هي هندسة معلومات. ليست مجموعة صفحات مرتبطة ببعضها البعض، أو شيئا يظهر النوافذ الفرعية ويشرح ما تفعله اﻷزرار. سيلبّي النموذج المبدئي هذا الغرض بشكل أفضل. هندسة المنتج مستوى أعمق من هذا. إنّها البنية. إنّها اللّبنات. هي تظهر اﻷشياء في النّظام والعلاقة فيما بينها. في انتركوم نتصوّر التصميم وفق هندسة منتجنا: لا أذكر أنّه سبق لي رؤية هندسة منتج على Dribbble. لا زال من النّادر أن ترى مصمّما يتحدث عن كيفيّة ارتباط عمله بمهمّة ما، عن كيفيّة سيره وفق رؤية ما، أو عن موقعه من هندسة منتج ما. يجب أن تكون هذه هي القاعدة وليس الاستثناء. بمجرّد أنّ تكون لديك مهمّة واضحة، ورؤية، وهندسة منتج، بإمكانك أن تبدأ التّفكير في باقي التّفاصيل. في اﻷهداف التي لدى النّاس، فيما يسعدهم، يلبّي احتياجاتهم، ويساهم في نجاحهم. كذلك في الوظيفة التي يؤديها منتجك لهم، أين يعمل بشكل جيد، وأين لا يعمل. الرسومات والخربشات القبيحة والمبعثرة التي تصوّر هذه اﻷشياء هي أهمّ بكثير من ملفّات PNG و PDF التي ينتهي بها المطاف في Dribbble. بالنّسبة لي، ملفّات فوتوشوب و PNG هي الجانب اﻷقلّ أهميّة في العمليّة كلّها من البداية و إلى غاية تقديم منتج جاهز. ما يهمّ أكثر هو حينما تُناقش الإيجابيّات والسّلبيات، حينما تُربط اﻷفكار برؤية الشّركة، أو تُطوّر اﻷشياء بناء على هندسة المنتج. كلّ تلك المخطّطات على السّبورة، كلّ تلك الرّسومات اليدويّة وحلول المشاكل على ظهر المنديل، هي ما يجدر بالمصمّمين أن ينشروه على Dribbble. أروني ذلك. بل إنّ وصفا مكتوبا لما يُقصد بناؤه هو أهمّ بكثير من ملفّات الـ PNG أو PDF. فكّر في أربع طبقات للتّصميم التّصميم عمليّة متعدّدة الطّبقات. من خلال خبرتي، يوجد ترتيب مثاليّ للانتقال بين تلك الطّبقات. أبسطها هو أن تنظر إليها كأربعة طبقات: أرى المصمّم تلو المصمّم يركّزون على الطّبقة الرّابعة دون أن يولوا اهتماما بالطّبقات الأخرى. يعملون من اﻷسفل إلى اﻷعلى، بدل العكس. تُعدّ الشبكة، و نوع الخطّ، و اﻷسلوب الجماليّ أمورا غير مهمّة إذا أُهملت الطّبقات اﻷخرى. يدّعي كثيرٌ من المصمّمين أنّهم يقومون بجميع الطبقات لكّنهم لا يثبتون ذلك تطبيقا، ذلك ﻷنّ رسم صور جميلة والانغماس وسط البكسلات هو أكثر متعة من التّعامل مع قرارات تجاريّة معقّدة وأشخاص بآراء مختلفة. لا بأس في أن تبقى في الطّبقة الرّابعة، لكنّ هذا يعدّ فنًّا لا تصميما. أنت بهذا فنّان ولست مصمّما. سيزداد تصميم اﻷنظمة أهميّة مع وصول الويب إلى المزيد من اﻷشياء سيكون لاختراع الويب أكبر تأثير على المجتمع منذ الثورة الصّناعية. يبلغ الويب كلّ شيء. إنّه في منازلنا، في أماكن عملناـ، عند أسرّتنا حال نومنا، و في جيوبنا أينما ذهبنا. الويب معنا في جميع اﻷوقات. هو ينتقل إلى سيّاراتنا، إلى ملابسنا، إلى اﻷشياء التي نملك، وإلى متابعة صحّتنا. بحلول عام 2020، وإن لم يكن قبله، ستكون جميع الشّركات مبنيّة على الويب. كما قال شارل إيمس مرّة،" في النهاية، كل الأشياء ستتصل ببعضها". تصميم صفحات ويب ساكنة ومرتبطة بعضها ببعض هي مهنة في طريقها إلى الموت. الصّعود الباهر للتكنولوجيات الهواتف والأجهزة المُتحرّكة، واجهات برمجة التطبيقاتAPI ، حزمات تطوير البرمجيّات SDK ، والشّراكات المفتوحة بين مختلف المنصّات والمنتجات يرسم صورة واضحة لمستقبل سنقوم فيه جميعنا بتصميم أنظمةٍ متكاملة. ملفاتُ PDF المليئة بالإطارات الشّبكية هي تسليماتdeliverable في طريقها للاضمحلال، فوتوشوب هو أداة تصميم منتجات في طريق الاضمحلال أيضا. المصمّمون الذين يدفعون حقّا بحرفتنا إلى اﻷمام ينتقلون بين الرّسومات، والسبّورات، وأدوات تصنيع النّماذج اﻷوليّة (Quartz Composer، After Effects، Keynote ، CSS/HTML). هذه إحدى الأسباب للاعتقاد بأنّه يجب على المصمّمين أن يبرمجوا. سواءً وافقت على هذا أم لم توافق، يجب على المصمّمين حتما تحديد المشكلة وحلّها ليس عن طريق البكسلات، ولكن بوصف ما يحصل بين أجزاء النّظام، ثمّ الشّروع في البرمجة وبناء نماذج أوّليّة، ليكون بعدها التّعديل الدّقيق كلّما أظهرت البيانات أمورا لم تكن في الحسبان. يعطي العمل على التّفاعل مع بيانات حقيقيّة تصوّرا أفضل لما عليه اﻷمور. تصميمنا يدور حول الوظائف في انتركوم، نتّبع إطار عمل كلاي كريستنسن للوظائف لتصميم المنتجات. نعمل على حصر كل مشكلة تصميم في وظيفة، مركّزين في ذلك على الحدث المسببّ، على الدافع والغاية، والنتيجة المرجوّة: عندما _______ ، أودّ أن _______ ، حتّى أتسطيع أن _______ . على سبيل المثال: عندما يسجّل مستخدم جديد، أودّ أن أُنبَّه بذلك، حتّى أستطيع أن أبدء معه محادثة. هذا يعطينا وضوحا، ويمكنّنا من ربط هذه الوظيفة بالمهمّة وإعطائها أولويّةً بشكل مناسب. هذا يضمن لنا كذلك التّفكير باستمرار في طبقات التصميم اﻷربع، ويتيح لنا رؤية أجزاء النّظام المتعلّقة بهذه الوظيفة والعلاقات والتفاعلات اللّازمة لتسهيلها. يمكنّنا هذا من التّصميم من اﻷعلى إلى اﻷسفل، مرورا بالنتيجة، فالنظام، فالتفاعلات، قبل الوصول إلى التصميم المرئيّ. بالإضافة إلى استعمال الوظائف، نحن نعمل أيضا على بناء مكتبة أنماط تعكس الطّبيعة المتعلّقة بالنّظام في أعمال تصميمنا. سنقوم بالتّصميم أكثر فأكثر باستخدام شيفرات من المكتبة بدل الاعتماد على الفوتوشوب. ليست هذه الطّريقة مثاليّة، لكنّنا نعمل على تحسينها باستمرار. ترجمة -وبتصرّف- للمقال The Dribbblisation of Design لصاحبه: Paul Adams. tuto-gratuit-photoshop-les-dents-de-la-mer.zip

تحدثنا في المقالات السابقة من هذه السلسلة عن مفهوم الإنفوجرافيك عمومًا موضحين أهميته وأنواعه، بعدها انتقلنا للحديث عن أهم البرامج والأدوات المستخدمة في إنشاء الإنفوجرافيك وقدمنا لكم مجموعة متنوعة من الخيارات في هذا المجال. ثم تناولنا هيكلية الإنفوجرافيك وأهم الأشياء التي ينبغي تضمينها لأي إنفوجرافيك وكيفية التعامل مع الأبعاد والألوان، بعدها تطرقنا إلى مراحل إنشاء الإنفوجرافيك. وحاولنا خلال هذه السلسلة تقديم معلومات كافية تساعد المختصين في مجال التسويق أو رواد الأعمال وأصحاب المواقع والمستقلين، على التعاطي مع الإنفوجرافيك بصورة صحيحة وأكثر فاعلية، بالإضافة إلى تقديم فكرة متكاملة حول الموضوع. وفي هذا الجزء "الأخير" من السلسلة سنستعرض معكم بعض النصائح والإرشادات الهامة والنهائية لإنشاء إنفوجرافيك فعال ويحقق الفائدة المرجوة منه، وستكون هذه النصائح في جميع النقاط التي قمنا بتغطيتها في المقالات السابقة. فدعونا نبدأ. البساطةسأبدأ بهذه النصيحة لأنها تشمل كل الأجزاء المتعلقة بالإنفوجرافيك، من اختيار الموضوع وجمع المحتوى والبيانات إلى التصميم والنواحي الفنية. في أي خطوة تتخذها عند إنشاء الإنفوجرافيك تذكر هذه الكلمة "البساطة"، فالمستخدمين يرغبون بقراءة الإنفوجرافيك ظنًا منهم أنه يُقدم طريقة أبسط في شرح الموضوع، وبالتالي حين تغيب هذه الميزة عن الإنفوجرافيك لن تحقق أي فائدة تُذكر. صدقني لن تستفيد أي شيء. مثلاً وضوح النص، عدم حشو كمية كبيرة من البيانات في مساحة صغيرة، تجنب إضافة نصوص لا فائدة منها، الترتيب المنطقي والخالي من الفوضى، استخدام الألوان بطريقة صحيحة، استخدام أبعاد مناسبة، تجنب البهرجة الفنية، كل هذه الأشياء تعكس بساطة الإنفوجرافيك. لذا عند إضافتك لأي شكل أو صورة أو بيانات إلى داخل الإنفوجرافيك حاول أن تسأل نفسك، هل هذه الإضافة ستعمل على تشويش الإنفوجرافيك وجعله أكثر تعقيدًا، أم ستساهم في تبسيطه؟ المعلومات والبياناتالنصيحة الوحيدة التي يمكنني أن أخبرك بها عند الحديث عن البيانات والمعلومات المدرجة في الإنفوجرافيك هي أن تكون هذه المعلومات مقنعة، وافية، موثوقة ومثيرة للجدل. ربما جميعكم يتفق معي على البنود الثلاث الأولى، لكن لماذا مثيرة للجدل؟ حسنًا، لا شك أن الكثير منا يعلم بأن المحتوى التقليدي مثل "المقالات أو مقاطع الفيديو" الذي يتناول مواضيع مثيرة للجدل هو الأكثر انتشارًا عبر الشبكات الاجتماعية، وبالتالي فإن تناول هذه المواضيع عبر الإنفوجرافيك سيضمن لك تحقيق نسب مشاركة أقوى عبر الإنترنت، وستخلق فرصة أكبر للنقاش والردود بين المستخدمين. دعوني أضرب لكم هذا المثال البسيط لتوضيح الفكرة: نفترض أنني أعمل في تغطية ما يتعلق بالرياضة العالمية بإحدى المدونات أو المواقع أو عبر صفحة تواصل اجتماعي، وأرغب باختيار موضوع لإنفوجرافيك يحقق شروط المعلومات الأربعة التي ذكرتها، بكل بساطة سأقوم بعقد مقارنة بين لاعبين في أندية متنافسة، مثلاً ميسي ضد رونالدو، أو بين أندية متنافسة مثل تشيلسي ضد أرسنال، وبالتالي سأقوم بجمع معلومات موثوقة ورسمية لإدراجها في الإنفوجرافيك وبنفس الوقت سأقوم بعقد المقارنة لمعلومات مقنعة مثل متوسط عدد الأهداف في كل مباراة، الألقاب التي حصل عليها كل لاعب وهكذا، لا أن أذهب لعقد مقارنة في أمور فرعية قد لا تعكس مهارة اللاعب مثل قيمة الصفقة الخاصة بكل منهما، وهكذا ينطبق الأمر على بقية المواضيع. بمعنى، ابحث عن مسألة مثيرة للجدل ضمن تخصصك، ثم دعمها بمعلومات موثوقة ومقنعة ووافية، بعدها سيتكفل المستخدمين بنشر الإنفوجرافيك بالنيابة عنك، ولا بأس لو تلقيت بعض الانتقادات من قبل المتعصبين، فهذا سيدل على نجاحك في تنفيذ الفكرة بالصورة المطلوبة. تحديد الغرض والجمهورلا تبدأ بإنشاء الإنفوجرافيكس لأن الجميع يفعل ذلك، فليس لذلك أي أهمية. ولا يعني اختيار الموضوع المناسب وطرحه بواسطة الإنفوجرافيك، أنك تسير في الاتجاه الصحيح. ما تحتاجه قبل إنشاء أي إنفوجرافيك هو أن تأخذ دائمًا خطوة إلى الوراء، وهي تحديد الغرض والهدف من الإنفوجرافيك والرسالة التي ترغب بإيصالها عند اختيارك للموضوع. فالأفكار والمواضيع التي يُمكن أن تتناولها لا نهائية ومتجددة باستمرار، لذلك لن تجد مشكلة إطلاقاً عند إيجاد فكرة مناسبة، الأهم أن تحدد الهدف من وراء هذه الفكرة. من المهم أيضاً أن تحدد الجمهور المستهدف بصورة جيدة، وربط الأهداف الخاصة بالإنفوجرافيك مع الاتجاهات الخاصة بالجمهور، اسأل نفسك قبل تحديد الهدف من الإنفوجرافيك: ما الذي أريده من المستخدم بعد انتهائه من قراءة الإنفوجرافيك؟ ما الشيء الذي أرغب بأن يفكروا به؟ ما هي المعلومة التي أرغب بوصولها لجميع القراء وبصورة واضحة؟ حاول أن تطرح الأسئلة على الدوام. لا تنشر إنفوجرافيك لجمهور غير مهتم بالموضوع ولا تعنيه المعلومات الواردة بداخله، وفي عالم الإنترنت عليك أن تفترض دائمًا انشغال المستخدم، فهو يريد أن يتخطى ما تطرحه لأشياء أخرى وبسرعة، وبالتالي فإن تحديد الأهداف الخاصة بالإنفوجرافيك تساعدك على إنشائه بصورة تضمن جذب اهتمام القارئ المستهدف. تمثيل المحتوى بصورة مفهومةتعتبر مرحلة تمثيل المحتوى على هيئة إنفوجرافيك من أصعب المراحل بالنسبة للكثير من المستخدمين، فهي تحتاج إلى اختيار دقيق لشكل التصميم العام، ومن الملاحظ أن الكثير من الإنفوجرافيكس تحاول التركيز على الناحية الفنية أكثر من تمثيل المحتوى بصورة مفهومة، وبالتالي قد يخلق المستخدم لنفسه العديد من الصعوبات عند التعامل مع التصميم سواءً كان التصميم عبر متخصص في هذا المجال أو من خلال المستخدم نفسه وذلك عبر الأدوات التي سبق وذكرنها في الجزء الثاني. وفي الحقيقة فلا يجب أن تشغل نفسك بمسألة التصميم بصورة زائدة عن الحد، ما عليك فعله هو التفكير في كيفية إيصال المحتوى بصورة مفهومة وسلسلة للقارئ، وأشرنا أكثر من مرة إلى أن الوظيفة الأساسية للإنفوجرافيك هي جعل المعلومات بسيطة ومفهومة، وبالتالي ما حاجتي بإنفوجرافيك مبهر ورائع من الناحية البصرية لكنني لم أفهم كلمة واحدة بداخله؟ وظيفة المصمم لا تقتصر على جعل الإنفوجرافيك يظهر بصورة جميلة ومذهلة من الناحية الفنية، ما يجب التفكير به عند التصميم وتمثيل المحتوى هو جعل البيانات سهلة للفهم بأقصى درجة ممكنة. ولا شك أن استخدام الألوان والأشكال المناسبة والصور يلعب دورًا هامًا عند تصميم الإنفوجرافيك، لكن الأهم من ذلك هو خلق توازن منطقي بين الناحية الفنية وعملية استيعاب المحتوى بصورة سلسلة. تقسيم الإنفوجرافيكوأعني بذلك ضرورة وجود مقدمة، ووسط، ونهاية للإنفوجرافيك. هذه الطريقة تساعد على ظهور الإنفوجرافيك بصورة أكثر احترافية، وتدفع المستخدم لقراءة كل المعلومات الواردة به حتى نهايتها. فمثلاً، ليس من المنطقي أن تبدأ إنفوجرافيك حول أسباب ظاهرة الاحتباس الحراري بدون طرح مقدمة صغيرة عن الظاهرة، تخيل أنك استبدلت المقدمة بهذه العبارة "أكسيد النيتروز أصبح أعلى بحوالي 18% من مقدار تركيزه قبل الثورة الصناعية" أو استبدلتها بمخطط يوضح ارتفاع نسبة الغازات عبر السنوات الماضية، على الأرجح حينها أنني سأغلق الصفحة وأذهب لتناول عصير بارد للتخفيف من حدة الصدمة. لا تعتمد على رأيك فقط عند انتهائك من إنشاء الإنفوجرافيك لا تتعجل بنشره مباشرة، بل حاول أن تستشير بعض من لديهم معرفة داخل هذا المجال، أو يُمكنك معرفة رأي أصدقائك كمستخدمين عاديين، والأشياء التي لم تعجبهم به. وتذكر دائمًا، أن هناك خيط رفيع بين "معلومات كافية" و"معلومات زائدة عن الحد"، فقد ترى أن محتوى الإنفوجرافيك يتضمن معلومات مناسبة، بينما يرى غيرك أن المعلومات كثيرة ومرهقة، لذا حاول أن تتلقى بعض ردود الأفعال حول الإنفوجرافيك قبل نشره، وهل هناك أشياء مشتركة في هذه الردود، بعدها عليك إعادة تقييم الإنفوجرافيك وفقاً لهذه الملاحظات. التسويق باحترافيةأشرنا في مقال سابق من هذه السلسلة على ضرورة الإشارة لعلامتك التجارية في الإنفوجرافيك وإضافة روابط مهمة قد تفيد المستخدم في نهاية الإنفوجرافيك، لكن هذا لا يعني أن تقوم باستخدام علامتك التجارية بصورة صارخة، والإفراط في التسويق لها من خلال الإنفوجرافيك، وتذكر أنك تقوم بتقديم محتوى مفيد لجمهورك، لا إغراقهم بأشياء ليست مرتبطة بالموضوع، فمثلاً هناك من يضع علامة مائية خاصة بموقعه خلف الإنفوجرافيك وبصورة مؤثرة على البيانات الواردة بداخلة، ويدافع عن ذلك بأن لصوص المحتوى يقومون بسرقة الإنفوجرافيك، وبالتالي فهو يضطر لفعل ذلك. حسنًا، يسعدني أن أقول لك، تبًا لك وتبًا لأولئك اللصوص، لأن لا أحد سيتابع ما تقدمه عبر هذه الإنفوجرافيكس المشوهة واللعينة. وعلى العكس تمامًا، يقدر المستخدمون الترويج لعلامتك التجارية بصورة أنيقة وبسيطة، ويدفعهم ذلك لمشاركة الإنفوجرافيك مع أصدقائهم عبر الشبكات الاجتماعية، طالما أن المحتوى المطروح مميز ومفيد، لذلك لا تُفكر كثيرًا في كيفية إظهار علامتك التجارية بواسطة الإنفوجرافيك، فكر في محتوى عالي الجودة، وبعدها سيشير الجميع إلى علامتك التجارية. أخيرًا، من الضروري أن تعلم بأن استخدام الإنفوجرافيك لا يعني حل أي مشكلة من المشاكل التي تواجهك أثناء عملية التسويق، وعلى الرغم من أن الإنفوجرافيك يحظى بشعبية واسعة ويجذب الكثير من الجمهور إلا أن استخدامه بصورة مكثفة، وازدياد أعداد الإنفوجرافيكس المنشورة يومياً قد يؤدي إلى تراجع اهتمام المستخدمين بهذه النوعية من المحتوى مع مرور الوقت، وبالتالي يجب عليك دائمًا كمسوق إيجاد وسائل وطرق بديلة عند حدوث شيء كهذا، ومن الطبيعي أن يحدث. وبالطبع لا أقصد أنه في مرحلة من المراحل يجب علينا عدم استخدام الإنفوجرافيك، بل ما أقصده هو استخدام الإنفوجرافيك باعتدال وبدون مبالغة، وبشكل يتوافق مع استراتيجية التسويق التي تتبعها. حقوق الصورة البارزة: Designed by Freepik.

قد ينتهي المطاف بمعظمنا إلى كتابة مراجعة عن موقع إلكتروني بحكم خبرتنا في المجال الرقمي وعالم الإنترنت؛ عندما نريد القيام بذلك فإنَّنا بحاجة إلى التعمق والنبش عن بعض التفاصيل عوضًا عن أخذ الأمور بسطحية. لقد أدركت، مثل حال أغلب زملائي، أنَّني كنت أتناول موضوع مراجعات المواقع بطريقة خاطئة تمامًا لذا سأشارك في هذه المقالة تجربتي عن مراجعات المواقع والطريق الذي يؤدي إلى كتابة مراجعة جيدة وذات تأثير كبير. هل يحوي المنهج الذي تتَّبعه في مراجعات المواقع خللًا؟ يُفترض أن تضم مراجعات المواقع قائمة بأعطال الموقع، ومشاكل الأداء، والجوانب التقنيَّة، وسهولة الاستعمال، وجمالية المظهر، والمحتوى، وغيرها من الأخطاء؛ تبدو وكأنَّها أوسع بكثير من أن تحوي أسماء مواقع التواصل الاجتماعي ومحركات البحث وعناوينها. يجب أن تسلِّط مراجعات المواقع الضوء على المشكلات بدقة متناهية مستعينة ببعض أنظمة التقييم ثمَّ تقترح الحلول المتوافرة لها، كما توصي بإجراء التحسينات للأداء. حسنًا، هذا يبدو مفيدًا جدًا ولكنَّه للأسف نادر الوجود في الواقع. قد تتطرق مراجعات المواقع في الحقيقة إلى تلك المواضيع بسطحية وتحاول إصلاح بعض الأمور التي تحسِّن من الموقع باقتضاب دون أن تُحدث فرقًا شاسعًا مع مرور الوقت. بعبارة أخرى، إنَّها تحاول معالجة أعراض تلك الحالات دون التمحيص في مسبِّباتها. هل تركِّز على على الأعراض وتتجاهل المرض؟ هل يعقل أن يركِّز طبيب على أعراض سرطان الرئة مثلًا دون مناقشة المريض في السبب الذي أدى إلى المرض وهو عدد مرات تدخينه التي تصل إلى أربعين مرة يوميًّا؟! هكذا تفعل أغلب المراجعات حيث تضع لزقة جرح على أعطال حسَّاسة ومهمَّة دون التطرق للأسباب التي أدت إلى حدوثها، وهذا الفشل في معالجة جذور المشكلة هو سبب نفوري من مراجعات المواقع؛ أعلمُ أن المسؤول الأول عن تلك المشكلة هو الفريق الرقمي (digital team)، وهو الفريق المسؤول عن تطوير وتجريب وتنفيذ الاستراتيجيات اللازمة لتحقيق الأهداف وجذب الجمهور عبر الوسائل التقنية مثل الويب، والذي أنشأ تلك المراجعات ولكن بحسب الخبرة التي اكتسبتها فإنَّ ذلك قلَّما يكون مصدر المشكلة. لنأخذ مثالًا عن هندسة المعلومات (information architecture) لموقع ما حيث أغلب المواقع التي راجعتها تكون هيكلة ومعمارية المعلومات فيها مرعبة والتي لا تعكس رؤية وتطلعات المستخدمين. من جهة أخرى، إن كانت جميع مراجعات الويب التي أكتبها تشير إلى هذه المشكلة وتقترح حلًا لها فأنا حقيقةً لا أقدم شيئًا ذو قيمة إذ يَعرف أغلبية الفريق المسؤول عن الموقع مسبقًا طريقة هيكلة وهندسة المعلومات بما يتوافق مع حاجة المستخدم؛ أي أنَّني أخبرهم في النهاية بما يعرفونه وأعطيهم لائحة أوامر لتوجيههم وهذا قد يعطي انطباعًا بأنَّهم حمقى لعدم إصلاحهم تلك المشكلة، وهذا المثال ينطبق على جميع المجالات. يَعرف معظم الفريق المسؤول عن الموقع حق المعرفة أنَّه يجب أن يكون الموقع سريعًا، وسهل الوصول إليه، وسهل الاستخدام، ويظهر في أعلى نتائج البحث ...إلخ. كما أنَّهم يمضون كل ساعة من عملهم في فحص الموقع وسيكتشفون بالتأكيد جميع ما أشرتُ إليه ويحتمل أنَّهم يعرفون الحل أيضًا ولا تظنَّنَّ أنَّهم لم يفكروا بتلك المشكلات قط. ما هي الأشياء المفيدة التي يفترض أن تقدمها مراجعات المواقع؟ إن كان الفريق المسؤول عن الموقع يعلم الجواب مسبقًا فهذا يدعنا أمام السؤالين التاليين: ما هي الأشياء المفيدة التي يجب أن تقدمها مراجعات الويب؟ ولماذا لم يعمل الفريق على إصلاح المشكلات إن كان يعرفها ويعرف الحلول المقابلة لها مسبقًا؟ لم يسبق لي أن قابلت فريقًا يتكاسل عن إصلاح المشكلات التي تعترض مواقعهم أو يغض الطرف عنها؛ يُعزى السبب دائمًا لبعض الأمور الخارجية التي تحد من قدرتهم والتي لا يمكنهم التغلب عليها. عندما انظر إلى موقعٍ فلا أرى التصميم والكود والمحتوى فقط بل ألاحظ وجود القيود التي تعترض الشركة أو التي تتصف بها، وأرى كيف تقيِّم وتتفهم الشركة العالم الرقمي، وأرى كيف تبدو من الداخل وكيف لا تعي حاجات المستخدم. الموقع الإلكتروني هو كنافذة يطل على جوهر الأعمال، كما يكشف كل عيوبها ونقاط ضعفها للعالم. ركز على قصور الأعمال لا على فريق الموقع يجب أن تركز المراجعة الجيدة على النقائص والعيوب في الموقع لا على الأشياء الجمالية والظاهرية فقط، ويجب أن تركز أيضًا على ضعف الأعمال لا على فريق الموقع بالإضافة إلى لفت الانتباه للمشاكل الأخرى مثل تلك المتعلقة بهندسة المعلومات. يجب أن يُذكر فيها أنَّه يجب البدء بحل تلك المشكلات حتى يكون الموقع سهل الاستخدام. ربما تودُّ الإشارة إلى ضعف الأداء، عند الحديث عن الأداء، والذي قد يكون بسبب انشغال الفريق بمشاريع أخرى. عندما تواجه مشكلة مثل الافتقار إلى سهولة الاستخدام فلا تشير إلى المشكلة وحلها فحسب بل حاول شرح الحاجة لإنشاء معايير ثابتة لفحص سهولة الاستخدام، وأشر إلى القيود والأشياء التي يُسبِّب وجودها تلك المشكلة. بعبارة أخرى، لا تصف المشكلة والحل فقط بل سلِّط الضوء على الأشياء الرئيسيَّة التي أدت إلى حدوثها. تحديد المشكلات الأساسيَّة والمهمَّة ربما لا تستطيع تحديد درجة أهمية المشكلات وأولويتها دومًا لذا استعن بأحد مصممي الويب فهو يستطيع مساعدتك وقد يحدِّد لك سبب وجود تلك المشكلات التي تحتاج إلى ذكرها. مع مرور الوقت يمكنك أن تخمن الجواب دون سؤال أحد عنه؛ لقد رأيت الكثير من المشكلات التي لها المسببات ذاتها مرات عديدة بدءًا من واجهة سيئة التصميم أنشأها أحد المختصين بمجالات أخرى مثل الطباعة وحتى كتابة المحتوى من قبل شخص ليس لديه أي خبرة بالكتابة في مواقع الويب، لذا أستطيع الآن معرفتها بسهولة بمجرد النظر إلى أي موقع. رأيت مرارًا وتكرارًا مشكلات مثل نقص الاستثمار وضعف القيادة والعداء بين أعضاء الإدارة وغيرها والتي يجب تحديدها ضمن المراجعة. الدور الحقيقي لمراجعات المواقع قد تحوي بعض مراجعات المواقع على لهجة غير ودودة وأنا أتفهم سبب ذلك. على أي حال، إن كان لدي الخيار بين كتابة مراجعة أو إجراء اختبار مع المستخدمين للموقع فسأختار الخيار الثاني دومًا، ومع ذلك فأنا أعتقد أنَّ المراجعة إن كتبت بشكل صحيح مع أخذ الملاحظات السابقة بعين الاعتبار فسيكون لها تأثير كبير مشابه للخيار الأخير. سيساعدك اختبار سهولة الاستخدام على تحديد المشكلات وإصلاح بعض الأشياء السطحية ولكنَّها نادرًا ما تُظهر ما هي مسببات المشكلة. من المفيد الحصول على وجهة نظر خارجيَّة إن كان المراجع (الناقد) سيلقي نظرة عميقة نحو الجذور مبتعدًا عن القشور السطحية. ترجمة -وبتصرف- للمقال Website Reviews: Why they suck and how to make them better لصاحبه Paul Boag. حقوق الصورة البارزة محفوظة لـ Freepik

سنتعلم في هذا الدرس – المكوّن من أجزاء - كيفية إنشاء هاتف محمول واقعي باستخدام الأشكال والتدرجات البسيطة في إلستريتور. وسنقوم باستخدام لوحات المحاذاة Align، مستكشف المسار Pathfinder والحدود Stroke بالإضافة إلى دمج العناصر للحصول على النتيجة النهائية. لنبدأ! تبدو النتيجة النهائية على النحو التالي. أنشئ ملفًا جديدًا 1: افتح برنامج إلستريتور ثم اضغط على Ctrl+ N لإنشاء ملف جديد. اختر Pixels من القائمة المنسدلة Units، أدخل 1308 في حقل العرض width و876 في حقل الارتفاع height ثم انقر على زر Advanced لفتح الخيارات المتقدمة. اختر RGB، Screen (72ppi)، وتأكّد من إلغاء تأشير مربّع الخيار Align New Objects to Pixel Grid قبل أن تنقر على OK. أنشئ الشكل الأساسي للهاتف 2: باستخدام أداة رسم المستطيلات Rectangle Tool (M) قم بإنشاء مستطيل بأبعاد 247 × 222 بكسل. بعد ذلك أظهر المساطر عبر المسار View> View Rulers> Show Ruler أو باستخدام مفتاحي الاختصار Ctrl +R، ثم قم بسحب دليل guide عمودي من المساطر (إذا كانت الدلائل مقفلة، إذا اذهب إلى View> Guides> Lock Guides أو اضغط على Ctrl +Alt + ; حدّد المستطيل الأحمر، اضغط على Shift، ومع الاستمرار بالضغط انقر على الدليل الذي أنشأته للتو، أفلت المفتاح Shift ثم انقر على المستطيل الأحمر مجددًا لتثبيت موضعه. بعد ذلك افتح لوحة المحاذاة Align عبر المسار Window> Align وانقر على زر Horizontal Align Center. الآن اختر أداة إضافة النقاط Add Anchor Point (+) وانقر على النقطتين المميزتين بالأزرق. بعد ذلك قم بتحديد النقطة العلوية الوسطى وحرّكها إلى الأعلى بمقدار 50 بكسل، ثم اضغط على زر Covert selected anchor points to smooth من شريط الخصائص Properties. بعد ذلك قم بتعديل مقابض النقاط التي قمت بتحريكها لتصبح بالشكل الموضّح في الصورة التالية مستخدمًا أداة التحديد المباشر Direct Selection Tool (A) والمفتاح Shift. الآن حدّد النقطة السفلية الوسطى وحرّكها بمقدار 12 بكسل إلى الأسفل. وأخيرًا اختر أداة تحويل النقاط Convert Anchor Point Tool (Shift +C)، انقر على النقطة التي قمت بتحريكها للتو واسحبها إلى اليسار أثناء الضغط على المفتاح Shift. في النهاية يجب أن يصبح العنصر الجديد كما موضّح في الصورة الأخيرة أدناه. 3: قم بإنشاء مستطيل بإبعاد 215 × 220 بكسل باستخدام أداة رسم المستطيلات (M) وضعه في الموضع الموضّح أدناه. الآن حدد العنصر الأحمر الذي قمت بإنشائه في الخطوة 2، اضغط على Shift، انقر على المستطيل الأزرق الذي أنشأته في هذه الخطوة، أفلت المفتاح Shift، وانقر على العنصر الأحمر مجددًا لتثبيت موضعه، ثم انقر على زر Horizontal Align Center من لوحة المحاذة Align. حدد النقطة العلوية اليسرى للمستطيل الأزرق وحرّكها بمقدار 15 بكسل إلى اليسار، ثم حدد النقطة العلوية اليمنى وحرّكها بمقدار 15 بكسل إلى اليمين: 4: باستخدام أدار رسم المستطيلات (M) أنشئ مستطيلًا بأبعاد 100 × 50 بكسل وبلون أسود، ثم ضعه في الموضع الموضّح أدناه. الآن حدّد العنصر الأزرق الذي قمت بإنشائه في الخطوة 3، اضغط على Shift، انقر على المستطيل الأسود الذي أنشأته في هذه الخطوة، أفلت المفتاح Shift، وانقر على العنصر الأزرق مجددًا لتثبيت موضعه، ثم انقر على زر Horizontal Align Center من لوحة المحاذاة. وبمساعدة الأداة Add Anchor Point Tool (+)، قم بإضافة نقطتي ربط باللون الأحمر للعنصر الأزرق. بعد ذلك قم بإزالة المستطيل الأسود ثم أعِد تحديد النقطتين التي أنشأتهما للتو وحرّكهما بمقدار 48 بكسل إلى الأسفل. استخدم الأداة Convert Anchor Point Tool (Shift +C) وانقر على النقطة السفلية اليسرى للعنصر الأزرق، ثم اسحب النقطة إلى اليمين بينما تضغط على المفتاح Shift. كرّر نفس الخطوات للنقطة السفلية اليمنى. بعد ذلك استخدم أداة إضافة النقاط (+) وقم بإضافة نقطة مميزة بالأحمر وحرَكها إلى الأعلى بمقدار 2 بكسل للحصول على الشكل الموضّح في الصورة الأخير أدناه. 5: بعد الانتهاء من تعديل الشكل الأزرق، قم بإعادة تحديد هذا الشكل واملأه باللون R=35، G=31، B=32. بعد ذلك حدد العنصر الأحمر واملأه بلون متدرّج خطي linear كما موضّح أدناه، ثم قم بإضافة حدّ بعرض 2 بكسل وبلون R=65، G=64، B=66. 6: باستخدام أداة رسم المستطيلات (M) أنشئ مستطيلًا بأبعاد 290 × 6 بكسل وبلون أحمر، ثم ضعه في الموضع الموضّح أدناه. حدّد الشكل الأسود الذي أنشأته في الخطوة 5 واعمل نسخة ثانية منه (Ctrl +C، Ctrl +F). ثم حدّد هذه النسخة من الشكل الأسود، اضغط على Shift ثم انقر على المستطيل الأحمر الذي أنشأته في هذه الخطوة. بعد ذلك افتح لوحة مستكشف المسار Pathfinder (Window> Pathfinder) وانقر على زر Intersect. استخدم أداة إضافة النقاط (+) لإضافة نقطة مميزة بالأصفر للعنصر الأحمر، ثم حرّك النقطة الجديدة بمقدار 70 بكسل إلى الأسفل. استعِن بالأداة Convert Anchor Point Tool (Shift +C) لتعديل شكل العنصر الأحمر ليصبح كالذي تراه في الصورة السادسة أدناه. بعد الانتهاء من تعديل شكل العنصر الأحمر، قم بتطبيق تدرّج خطي جميل كما موضّح في الصورة الأخيرة أدناه. 7: في هذه المرحلة يجب أن يبدو شكل الهاتف كالتالي: أنشئ زر التحكّم 8: ابدأ برسم دائرة بلون أحمر وبأبعاد 56 × 56 باستخدام الأداة Ellipse Tool (L)، ثم ضع هذه الدائرة في الموضع المناسب كما موضّح أدناه. املأ الدائرة باللون R=35، G=31، B=32 ثم قم بإضافة حدّ لها باللون R=167، G=169، B=172 وبسمك 3 بكسل. واصل تحديد هذه الدائرة ثم افتح لوحة الحدود (Window> Stroke) وانقر على أيقونة Align Stroke to Inside. بعد ذلك افتح لوحة المظهر (Window> Appearance)، انقر على زر Add New Stroke (يوجد هذا الزر على الزاوية السفلية اليسرى من لوحة المظهر). هذه الخطوة ستضيف حدًّا ثانيًا للدائرة. املأه باللون R=188، G=190، B=192 وغيّر سمك الحدّ إلى 1.5 بكسل. 9: حدد الدائرة التي أنشأتها في الخطوة 8 ثم اذهب إلى Object> Transform> Scale، قم بتأشير الخيار Uniform ثم أدخل القيمة 16 في حقل Scale، وانقر على Copy. لا تُلغِ تحديد الدائرة الجديدة وافتح لوحة المظهر (Window> Appearance) ثم قم بإزالة الحد ذي السُمك 3 بكسل لهذه الدائرة. بعد ذلك استبدل لون الحدّ الحالي باللون R=128، G=130، B=133 واستبدل لون التعبئة الحالي باللون R=209، G=211، B=213. تأكد من أنّ شكل الدائرة الناتج ما زال محدّدًا، افتح لوحة الحدود (Window> Stroke) وانقر على أيقونة Align Stroke to Outside. 10: باستخدام أداة رسم المستطيلات (M) أنشئ مستطيلًا بأبعاد 1.5 × 50 بكسل وبلون R=65، G=64، B=66. حدّد الدائرة التي أنشأتها في الخطوة 9، اضغط على Shift، انقر على المستطيل الذي أنشأته للتو، أفلِت المفتاح Shift، ثم انقر على الدائرة التي أنشأته في الخطوة 9 مجددًا لتثبيت موضعها. بعد ذلك افتح لوحة المحاذاة (Window> Align) وانقر على زر Horizontal Align Center، قم انقر على زر Vertical Align Center. حدّد المستطيل الذي أنشأته في هذه الخطوة من جديد ثم اذهب إلى Object> Transform> Rotate، أدخل القيمة 90 في حقل Angle وانقر على Copy. وأخيرًا، حدّد المستطيلين الذَين أنشأتهما في هذه الخطوة وقم بإخفائهما خلف الدائرة التي أنشأتها في الخطوة 9. 11: باستخدام أداة رسم المستطيلات (M) أنشئ مستطيلًا بأبعاد 14 × 9 بكسل وبلون R=199، G=190، B=192. حدد النقطة العلوية اليسرى للمستطيل الجديد وأزِلها. ثم حدد النقطة العلوية اليمنى وحرّكها بمقدار 7 بكسل إلى اليسار. ضع المثلث الجديد في الموضع المناسب كما موضّح في الصورة الثالثة أدناه. باستخدام أداة إضافة النقاط (+) انقر على مركز الجزء السفلي من المثلث ثم حرّك النقطة الجديد بمقدار 5 بكسل إلى الأعلى. بعد ذلك اسحب دليلًا أفقيًا من المساطر. حدّد الدائرة التي أنشأتها في الخطوة 9، اضغط على مفتاح Shift، انقر على الدليل الأفقي، أفلِت المفتاح Shift، ثم انقر على الدائرة التي أنشأتها في الخطوة 9 مجددًا لتثبيت موضعها. بعد ذلك افتح لوحة المحاذاة (Window> Align) وانقر على زر Vertical Align Center. الآن أعِد تحديد الشكل الأبيض الذي أنشأته في هذه الخطوة، اختر أداة التدوير Rotate Tool (R)، اضغط على المفتاح Alt وانقر على نقطة التقاطع للدليلين. في مربّع الحوار Rotate، أدخل الزاوية 90 في حقل Angle وانقر على Copy، ثم اضغط على Ctrl +D مرّتين للحصول على النتيجة الموضّحة في الصورة السادسة أدناه. 12: حدّد الدائرة التي أنشأتها في الخطوة 8 واذهب إلى Object> Transform> Scale. قم بتأشير الخيار Uniform وأدخل القيمة 95 في حقل Scale وانقر على Copy. حرّك هذه النسخة إلى المقدمة (Ctrl +Shift+ [)، املأها بتدرّج قطري radial كما مبيّن أدناه، ثم احذف الحد منها. بعد ذلك غيّر قيمة Blending Mode للدائرة الناتجة إلى Soft Light. عند هذه الخطوة، يجب أن يبدو شكل الهاتف كما مبيّن في الصورة أدناه. ترجمة- بتصرّف - للمقال How to create a Realistic Cell Phone لصاحبه Bao Nguyen.

تحدثنا في المقالات السابقة من هذه السلسلة عن مفهوم الإنفوجرافيك عمومًا موضحين أهميته وأنواعه، بعدها انتقلنا للحديث عن أهم البرامج والأدوات المستخدمة في إنشاء الإنفوجرافيك وقدمنا لكم مجموعة متنوعة من الخيارات في هذا المجال. ثم تناولنا هيكلية الإنفوجرافيك وأهم الأشياء التي ينبغي تضمينها لأي إنفوجرافيك وكيفية التعامل مع الأبعاد والألوان، والآن سنكمل معكم هذه السلسلة باستعراض مراحل إنشاء الإنفوجرافيك والتعامل مع البيانات بصورة مفصلة. في جميع المقالات السابقة من هذه السلسلة، ذكرت أكثر من مرة أن الإنفوجرافيك يُعد من ضمن أشكال المحتوى المختلفة، وبالتالي فإن عمق المعلومات وقيمتها ستحدد ما إذا كان الإنفوجرافيك جديرًا بالقراءة أم لا، أي أنك أثناء مطالعتك لبعض المقالات فلن يستغرق ذلك الكثير من الوقت لتحدد هل المقال جيد أو سيء، يُقدم قيمة وفائدة حقيقية، أو يُقدم بعض الهراء والخزعبلات، وهذا يجب أن يدفعنا لتقديم إنفوجرافيك قوي وعالي الجودة أو على الأقل لا يُصنف تحت خانة "الهراء". لذلك قبل قراءة هذا المقال أو أي مقال من هذه السلسلة لا تنسى هذه الحقيقة "استخدام الإنفوجرافيك لا يعني تقديم محتوى أقل قيمة أو أهمية من بقية أنواع المحتوى". المرحلة الأولى: الفكرةكل شيء يبدأ بفكرة، فحصولك على فكرة قوية ومميزة يعني إتمامك لأهم مرحلة من مراحل إنشاء الإنفوجرافيك، وليس هناك فكرة صحيحة وأخرى خاطئة، المهم أن تكون الفكرة واضحة ومبسطة. وكلما كانت الفكرة الخاصة بالإنفوجرافيك غير تقليدية ومبتكرة، كلما حقق الإنفوجرافيك المزيد من الانتشار عبر شبكة الإنترنت. ويُمكن أن تكون الفكرة بسيطة لدرجة لا يمكن تصورها، لكنها في نفس الوقت تقع في دائرة اهتمام ملايين المستخدمين، وبالتالي ما يتبقى عليك هو العمل على هذه الفكرة وتحويلها إلى إنفوجرافيك بأفضل صورة. وعند الحديث عن الأفكار لابد أن نتناول مسألة هامة جدًا وهي كيفية الحصول على أفكار فعالة، بالإضافة إلى الأفكار التي تجذب المستخدمين بشكل أكبر. لذا إليك بعض النصائح الهامة في كيفية الحصول على أفكار ومواضيع جيدة للإنفوجرافيك: الشبكات الاجتماعيةاليوم هناك ملايين المستخدمين يومياً يطرحون العديد من القضايا الحيوية والهامة، يحللون ويناقشون قضايا مختلفة ومتنوعة، وبالتالي تُعد هذه الشبكات مصدرًا غنياً للحصول على أفكار جديدة وطرحها عبر الإنفوجرافيك، لذا حاول أن تتبع المواضيع المتداولة حالياً عبر الشبكات الاجتماعية والحصول على أفكار جيدة من خلالها. اسأل جمهوركإن كنت تمتلك مدونة أو صفحة عبر فيس بوك أو غيرها من وسائل التواصل الاجتماعية مع المستخدمين، فمن الجيد أن تسأل جمهورك حول بعض الأفكار أو أن يقترحوا بعض المواضيع التي يرغبوا برؤيتها على هيئة إنفوجرافيك، أيضًا من الممكن أن تمتلك فكرة جيدة لكنك لا تزال مترددًا في طرحها بواسطة الإنفوجرافيك، لذا من الجيد أن تتواصل مع جمهورك قبل ذلك وأن تقوم بقياس ردة فعلهم، وهل هم مهتمون بهذه الفكرة أم لا، أي أنه يجب عليك التفاعل مع جمهورك المستهدف بصورة دورية ومباشرة لمعرفة المواضيع المفضلة بالنسبة لهم. الإنفوجرافيكس القديمةهناك العديد من الإنفوجرافيكس التي تم طرحها منذ عدة سنوات، وتناولت بعض المسائل الهامة، لكن مع مرور الوقت تصبح المعلومات والبيانات الواردة بهذه الإنفوجرافيكس غير واقعية، وبالتالي يُمكنك إعادة إخراج هذه الإنفوجرافيكس مع المعطيات والبيانات الحالية، فمثلاً نفترض أن هناك إنفوجرافيك يتناول بعض الإحصائيات حول تطبيق واتس آب عام 2011، وبالتالي بعد مرور فترة زمنية معينة ستلاحظ اختلاف الإحصائيات المتعلقة بالتطبيق، نفس الأمر ينطبق على العديد من المواضيع الأخرى. تعلم من منافسيكفي فضاء الإنترنت الواسع، تذكر دائمًا أنك لست وحدك، فهناك العديد من المنافسين الأقوياء لك، ومن الجيد لو استفدت من هؤلاء المنافسين في معرفة المواضيع الأكثر شعبية لديهم، ومعرفة كيفية تفاعل القراء مع الأفكار المختلفة التي يتم طرحها، وبالتالي من المهم أن تتابع جميع المنافسين المحتملين لك، وأن تركز على الأفكار التي تحظى بشعبية واسعة. الأحداث الحاليةونقصد بها الأخبار المتعلقة بأي موضوع في الوقت الراهن، أو الأبحاث والدراسات الجديدة المتعلقة بمجال معين، أو الأخبار والمواضيع المتداولة على المستوى العالمي، لذا متابعتك الجيدة لآخر التطورات في مجالك سيساعدك في الحصول على أفكار ومواضيع فعالة للإنفوجرافيك. ويمكنك الاستعانة ببعض الأدوات الهامة لتحديد أبرز المواضيع الشائعة حالياً منها: اتجاهات جوجل Google Trends توفر الخدمة العديد من الإحصائيات حول كلمات معينة يحددها المستخدم وربطها بحسب الانتشار الجغرافي حول العالم، وشخصياً اعتبرها من أفضل الأدوات التي تطلعني على الاتجاهات الحالية والمواضيع الأكثر تداولاً عبر جوجل في دول معينة. المواضيع الأكثر شعبية عبر تويتر يوفر موقع تويتر قائمة ثابتة بأبرز الوسوم وأكثرها شعبية خلال الساعات الأخيرة، وذلك حسب النطاق الجغرافي التي تحدده، كما يوجد العديد من الأدوات والحسابات المختلفة التي تُقدم تقارير دورية بأبرز المواضيع الشائعة عبر تويتر. ستامبل أبون stumbleupon وهي خدمة مميزة تسمح لك باستعراض المواضيع الأكثر شعبية اعتمادًا على اهتمامات المستخدم. والآن إليك بعض الإرشادات حول الأفكار التي تتمتع بشعبية واسعة بشكل عام: التعليم يميل المستخدمين إلى الأفكار التعليمية بصورة كبيرة جدًا، وبالتالي يُمكن للمتخصصين في مجال معين توضيح وشرح مسألة مهمة في مجالهم أو تصحيح مفهوم مغلوط أو تبسيط لأشياء معقدة ضمن مجالاتهم بواسطة الإنفوجرافيك، هذه الأفكار عمومًا تحظى بثقة أكبر من قبل المستخدمين وتحقق نسب أعلى من المشاركة. القوائم بمعنى إنشاء قائمة معينة ومرتبة بصورة متسلسلة في موضوع معين، وغالبًا تحظى المقالات الخاصة بالقوائم بشعبية أكبر من المقالات التقليدية نظرًا لطبيعتها السلسلة والبسيطة، وبالتالي يُمكن استخدام الإنفوجرافيك في إنشاء قوائم معينة بصورة جميلة وخفيفة. الأسباب والنتائج أي قارئ جيد في مجال معين يحتاج لمعرفة مسببات ظاهرة أو أزمة أو غيرها من الأحداث، وفي نفس الوقت معرفة النتائج المترتبة على هذه الظاهرة أو الأزمة، وبالتالي يُمكن للإنفوجرافيك توضيح مسببات ونتائج ظاهرة معنية بصورة سلسلة وأنيقة، وكلما استطعت ربط الظواهر والأزمات مع الأحداث الحالية، كلما استطعت الوصول إلى شريحة أوسع من المستخدمين، فمثلاً خبر تحطم الطائرة الماليزية، أو الأزمة الاقتصادية في اليونان، كانت من ضمن المواضيع الجارية والتي يرغب الناس بمعرفة أسبابها ونتائجها، وهكذا بالنسبة لبقية المواضيع. اقتراحات أخرى هناك العديد من المواضيع الهامة والتي يتم تداولها بصورة واسعة عبر الإنفوجرافيك منها مثلاً كيفية عمل منتج معين، أو من خلال الإجابة عن بعض الأسئلة الافتراضية مثل "ماذا لو، كيف أقوم بـ"، أيضًا الحقائق تمتلك شعبية أكبر مقارنة بالمواضيع الأخرى. المرحلة الثانية: التعامل مع البياناتبعد الانتهاء من اختيار الفكرة والموضوع الخاص بالإنفوجرافيك، تبدأ مرحلة التطبيق الفعلي، ألا وهي التعامل مع البيانات، وللتبسيط سنقوم بتقسيم هذه الجزئية إلى عدة خطوات وهي: جمع البياناتأول خطوة يجب عليك البدء بتنفيذها بعد اختيار الفكرة هي عملية جمع البيانات الخاصة بالفكرة أو الموضوع المحدد، ويلزمك في هذه المرحلة أن تبحث عن كل معلومة بإمكانها أن تخدم الفكرة وتساعد القارئ على استيعاب الموضوع بصورة سلسلة، ومن الضروري أيضًا أن تهتم أثناء هذه المرحلة بالوصول إلى الإحصائيات المتعلقة بهذا الموضوع لاستخدامها ضمن الإنفوجرافيك، حاول الوصول إلى أحداث زمنية مهمة متعلقة بالفكرة أو الحصول على أرقام وإحصائيات مرتبطة بالموضوع لإدراجها ضمن الإنفوجرافيك. القراءةأثناء عملية جمع البيانات، قد تقوم بتخزين العديد من المعلومات والبيانات غير الضرورية والتي لن يتم استخدامها ضمن التصميم، لذا عليك قراءة المعلومات والبيانات التي تم جمعها واختيار ما يلائم منها للإنفوجرافيك فقط. وتشمل هذه المرحلة اختصار المعلومات بعد دراستها وتحويلها بصورة تتناسب مع التصميم. وتعد هذه المرحلة ضرورية جدًا للتأكد من عدم إهمالك لأي معلومات أو بيانات هامة، بالإضافة إلى التأكد من الحقائق أو البيانات التي تم جمعها مسبقًا. السرد المنطقي والممتعفي مقال المحتوى هو التسويق للكاتب Des Traynor أشرنا إلى ضرورة الاهتمام بالمقدمة الخاصة بالمقال، دعونا نعيد قراءة هذه الفقرة: نفس الشيء ينطبق على الإنفوجرافيك، فالسرد العشوائي للمعلومات وعدم تسلسلها بصورة منطقية سيمنع القارئ من مواصلة الاهتمام بالإنفوجرافيك، وبالتالي إن بدأت بمعلومات مملة سيصبح الإنفوجرافيك كله مملاً، وتذكر دائمًا أن البيانات أو المعلومات التي ستذكرها في الإنفوجرافيك قد تكون مألوفة لدى القارئ، لذلك عليك خلق قصة مقنعة تستحق القراءة، لا مجرد عملية حشو للمعلومات. المرحلة الثالثة: التصميمهذه المرحلة تُعد الأهم من ناحية الإخراج النهائي للإنفوجرافيك، وتناولنا في المواضيع السابقة بعض النقاط المتعلقة بمسألة التصميم، من ضمنها الأدوات المستخدمة لتصميم الإنفوجرافيك بالإضافة إلى التعامل مع الألوان والأبعاد. لكن دعونا نشير إلى بعض النقاط الأخرى المتعلقة بالتصميم، أولها وضع تصور مبدئي للشكل النهائي للإنفوجرافيك واختيار النوع المناسب الذي تريد إدراج الإنفوجرافيك ضمنه، حيث تحدثنا في الجزء الأول من هذه السلسلة عن الأنواع المختلفة للإنفوجرافيك، وبالتالي فإن اختيارك لنوع محدد سيسهل عليك عملية اختيار الشكل الأنسب أثناء التصميم، كما يُمكنك مطالعة بعض الإنفوجرافيكس التي تحظى بشعبية واسعة واستلهام بعض الأفكار الخاصة بالتصميم. من الأشياء التي أود أن أشير لها في مسألة التصميم هي نوع الخط المستخدم، حيث يُفضل أن يتم استخدام نوع خط واحد أو نوعين فقط أثناء التصميم، وذلك لإعطاء الإنفوجرافيك المزيد من التناسق والترتيب. المخططاتفي حال تضمن الإنفوجرافيك لبعض البيانات والإحصائيات، فيجب أن يتم طرحها على هيئة مخططات بيانية، تمامًا كما هو الحال عند إنشاء مخططات على برنامج أوفيس إكسل أو وورد، ومن الجيد إنشاء هذه المخططات بشكل متوافق مع التصميم من حيث الألوان والأبعاد العامة للتصميم، ولا يُنصح استخدام الإحصائيات أو المخططات في بداية الإنفوجرافيك، والأفضل استخدامها بصورة منطقية وموزعة بشكل متكامل على أجزاء الإنفوجرافيك، لا أن يتم إضافتها كقطعة واحدة. المرحلة الأخيرة: النشرحسنًا، لدينا الآن إنفوجرافيك متكامل ولم يبقى لنا سوى عملية النشر عبر الإنترنت، وهي مرحلة مهمة جدًا لكي يلقى الإنفوجرافيك الصدى المتوقع منه. في البداية يجب نشر الإنفوجرافيك في مدونتك أو موقعك الإلكتروني، وبعدها مشاركته عبر الشبكات الاجتماعية المختلفة، ويُنصح باستخدام الوسوم "الهاشتاغ" المرتبطة بموضوع الإنفوجرافيك أثناء نشره عبر تويتر أو فيس بوك. إن كانت لديك بعض الإنفوجرافيك باللغة الإنجليزية فمن المهم نشرها على شبكة pinterest والتي تعتبر واحدة من أكثر الشبكات فاعلية في نشر الإنفوجرافيكس، ولغاية الآن لا يوجد اهتمام قوي على صعيد العالم العربي بهذه الشبكة، وبدلاً من ذلك يُمكنك الاعتماد على شبكة انستجرام. لا تنسى أيضًا مشاركة الإنفوجرافيك عبر المواقع المتخصصة في هذا المجال، أو من خلال التواصل مع المواقع المهتمة بمحتوى الموضوع، فمثلاً في حال قمت بإنشاء إنفوجرافيك في المجال الطبي، فمن الجيد التواصل مع أشهر المواقع الطبية وإرسال الإنفوجرافيك لهم، ليتم نشره من خلالهم. حقوق الصورة البارزة: Designed by Freepik.

سنقوم برسم تصميم ثلاثي الأبعاد بنمط Isometric لرمز الوجه المبتسم باستخدام برنامج انكسكيب. ولنستطيع الرسم بشكل صحيح ودقيق سيتوجب علينا رسم مخطط مسطح للتصميم للعمل انطلاقًا منه، ولذلك رسمت هذا المخطط. وبما أننا سنرسم بنمط الإيزومترك فسيكون علينا تحضير المكعب الأساسي الذي سنقوم بنسخه وتوزيعه للحصول على الشكل المطلوب. افتح برنامج الإنكسكيب ثم كبّر منظور العرض إلى القياس الطبيعي عبر القائمة View > Zoom > Zoom1:1 استخدم أداة رسم النجمة والمضلعات، عدّل عدد الزوايا في شريط أدوات الأداة إلى 6 لنحصل على مضلع سداسي (مسدس) مع اختيار رسم شكل المضلع بدل النجمة ثم ارسم المسدس مع الاستمرار بالضغط على Shift+Ctrl أثناء سحب الشكل باستخدام الفأرة وذلك لنحصل على شكل مسدس مركزه نقطة بداية السحب وليكون بمحاذاة عمودية مثالية. تأكد من جعل الشكل كما في الصورة تمامًا. سنحتاج إلى تحديد ميزة المطابقة لتصبح عملية التصميم أكثر سهولة ودقة. في حال لم يكن شريط المطابقة Snap موجودًا، قم بإظهاره عبر الذهاب إلى القائمة View > Show/Hide > Snap Controls Bar وتأكّد من وجود إشارة التفعيل بجانب Snap Controls Bar. ثم فعّل خيار المطابقة الموضح في الدائرة الحمراء وهو خيار Snap cusp nodes. استخدم أداة رسم منحنيات البيزير (يقابلها أداة القلم في برامج أدوبي المختلفة) ثم ارسم خطًّا مستقيمًا من إحدى زوايا المسدس إلى الزاوية المقابلة مستعينًا بميزة المطابقة Snap. والآن ارسم خطًّا آخر من زاوية أخرى. وأخيرًا ارسم خطًّا آخر عموديًّا من الزاوية العلوية إلى السفلية. ارسم باستخدام ذات الأداة شكلًا رباعي الأضلاع يمتد من الزوايا العلوية الثلاث للمسدس ومع نقطة التقاط الخطوط السوداء في المركز. وبما أن هذا الشكل الجديد ما يزال مُحدّدًا قم بإزالة لون الحدود وإضافة لون للتعبئة وليكن الأزرق بشكل مبدئي. ارسم الجانب الأيمن للمكعب عبر رسم شكل ممتد بين النقطة اليمنى العلوية والسفلية والنقطة السفلية إلى نقطة التقاء الخطوط في مركز الشكل. أزِل لون الحدود وأضِف لون تعبئة مختلف وليكن الأخضر. وأخيرًا ارسم الجانب الأيسر من ما بقي من شكل المسدس. وبنفس الطريقة أزِل لون الحدود ولوّن هذا الجانب باللون الأصفر. استخدم أداة التحديد والتحويل Select and Transform ثم حدّد الجانب العلوي ثم اضغط باستمرار على مفتاح Shift وانقر على الجانب الأيمن واستمر بالضغط على مفتاح Shift ثم انقر على الجانب الأيسر وأفلت مفتاح Shift وبذلك يكون قد تم تحديد الجوانب الثلاثة الملونة بدون تحديد شكل المسدس والخطوط المتقاطعة الموجودة تحت أشكال هذه الجوانب. اجمع هذه الأشكال في مجموعة واحدة عبر النقر على خيار Group في شريط الأدوات أو من خلال الاختصار Ctrl+G. حرّك مجموعة الأشكال هذه بعيدًا عن الأشكال الأساسية التي تحتها. احذف الأشكال الأساسية المستخدمة لرسم المكعب وهي شكل المسدس بالإضافة إلى الخطوط السوداء المتقاطعة. حدّد مجموعة المكعب ثم ألغِ التجمّع عبر الخيار Ungroup في شريط الأدوات أو من خلال الاختصار Shift+Ctrl+G وذلك لنقوم بإعادة تلوين جوانب المكعب بشكل صحيح. حدّد الجانب العلوي ثم لوّنه باللون الأصفر الفاتح ذو القيمة RGBA تعادل FFE680FF. والجانب الأيسر بلون أصفر فاقع بقيمة FFCC00FF. وأخيرًا الجانب الأيمن بلون أصفر داكن بقيمة AA8800FF. قم بجمع الجوانب مجدّدًا عبر الاختصار Ctrl+G أو من خيار Group في شريط الأدوات. في تصميمنا هذا لم نحدّد حجم التصميم أو الصفحة ولا أحجام المكعب وباقي الأشكال وذلك لأننا لا نقوم بتصميم محدّد بل الهدف من هذا التصميم هو تعلّم الرسم بتقنية Isometric لذلك قد تكون جوانب الصفحة ظاهرة وهو ما قد يشوش عملية التصميم في هذه الحالة لذا سنقوم بإزالة هذه الحدود عبر الذهاب إلى القائمة File > Document Properties أو من خلال الاختصار Shift+Ctrl+D. أزِل تفعيل خيار Show Page Border ثم أغلق نافذة الخصائص. سنقوم الآن بالبدء بعملية رسم التصميم المطلوب، وعبر الاستعانة بمخطط التصميم الأساسي في بداية الدرس سنقوم بالبدء برسم الجزء الأيسر من حدود الوجه. حدّد شكل المكعب ثم ضاعفه عبر الاختصار Ctrl+D ثم اسحب الشكل الجديد للأعلى مستعينًا بمزايا المطابقة لوضع الشكل الجديد بشكل مطابق فوق الشكل الأول. ضاعف الشكل الأخير عبر الاختصار Ctrl+D مجدّدًا ثم اسحبه بذات الطريقة نحو الأعلى أيضًا. من خلال المخطط فإن الجانب الأيسر المستقيم للوجه وكذلك بقية الجوانب بحجم خمس مكعبات. لذلك تابع مضاعفة الأشكال ورفع النسخ الجديدة للأعلى حتى يصبح عدد المكعبات خمسة. ضاعف الشكل الأخير ثم حرّكه بمقدار مكعب للأعلى وبمقدار مكعب أيضًا لليمين وذلك بحسب المخطط مع الاستعانة بمزايا المطابقة المفعلّة التي ستحقق مطابقة تامة للزوايا في تحريك الأشكال. ضاعف الشكل الأخير وحرّك النسخة الجديدة للأعلى. ضاعف النسخة الأخيرة وحرّكها للأعلى واليمين. كرّر ذات العملية الأخيرة تمامًا. ضاعف المكعب الأخير وحرّك النسخة لليمين (لاحظ أننا وبالعودة إلى شكل مخطط التصميم فإننا نتبع إرشادات المخطط بحذافيرها). ضاعف الشكل الأخير ثم حرّكه للأعلى واليمين. ضاعف هذا الشكل الأخير أربع مرّات إضافية وحرّكها لليمين في كل مرّة لتحصل على خمسة مكعبات في صف واحد. والآن اصنع نسختين جديدتين وضعهما كما في الصورة وبحسب المخطط. واصنع نسخة أخرى وحرّكها للأسفل واليمين. وواحدة أخرى بعد بذات الطريقة والاتجاه. اصنع نسخة عن الشكل الأخير ثم حرّكها للأسفل. هنا ستلاحظ أن الشكل الجديد قام بتغطية الشكل السابق ما يجعل المنظور غير متناسق ومنطقي. ولتصحيح هذا الوضع حدّد الشكل الجديد ثم أرسله للأسفل عبر الخيار Lower Selection to Bottom أو من خلال المفتاح End من لوحة المفاتيح، وبذلك سيتم إرسال هذا الشكل أسفل الشكل السابق ويصبح منظور التصميم منطقيًا وصحيحًا. اصنع نسخة جديدة وحرّكها للأسفل واليمين. اصنع نسخة جديدة وحرّكها للأسفل. ستلاحظ تكرار عملية الترتيب غير الصحيح للأشكال في هذه المرحلة وذلك بحسب شكل المكعب وترتيب النسخ الجديدة. مجدّدًا قم بإرسال النسخة الجديدة للأسفل عبر الخيار Lower Selection to Bottom أو من خلال المفتاح End من لوحة المفاتيح. كرّر هذه العملية مع إرسال النسخة الجديدة للأسفل في كل مرّة حتى يصبح لدينا خمسة مكعبات فوق بعضها. حرّك نسخة جديدة من المكعب الأخير للأسفل واليسار ولاحظ أن عملية التحريك الأخيرة توحي بأن المكعب الجديد موجود أمام المكعب السابق بصورة مختلفة عن نسق سير التصميم وهذه هي روعة تصميم الإيزومترك حيث أن مجالات الإبداع فيها كبيرة وتسمح لنا برسم تصاميم محيّرة للعقل وجميلة في نفس الوقت ولكننا هنا لسنا بصدد تصميمٍ من هذا النوع لذلك سنقوم في الخطوة التالية بتصحيح الوضع. من جديد أرسل الشكل الأخير للأسفل عبر الخيار Lower Selection to Bottom أو من خلال المفتاح End من لوحة المفاتيح. والآن أصبح شكل التصميم صحيحًا ومطابقًا للمخطط الأساسي. حرّك نسخة جديدة للأسفل ثم أعد ترتيبها أسفل بقية الأشكال بذات الطريقة. تابع الرسم بحسب المخطط وبذات الأسلوب حتى تتم رسم دائرة حدود الوجه كاملًا. وأخيرًا ارسم مكعبات جديدة مع تغيير ألوانها إلى تدرجات الرمادي وضعها بحسب المخطط مكان العينين والفم المبتسم. يمكنك إضافة خلفية تدرج دائري بسيطة لإنهاء التصميم بشكل بسيط وناعم. أو يمكنك تعديل التصميم للحصول على الشكل التالي أيضًا. هذه هي إحدى طرق رسم الإيزومترك في الإنكسكيب وهناك طرق أخرى لرسم المكعب الأول في التصميم بتقنية الإيزومترك وهي: طريقة ثانية لرسم مكعب إيزومترك في الإنكسكيب: تعتمد هذه الطريقة على تجهيز إعدادات المستند بشكل يظهر فيه شبكة إيزومترك جاهزة وصحيحة ليتم استخدامها مع تفعيل مزايا المطابقة لرسم المكعب. افتح ملفًّا جديدًا في الإنكسكيب ثم اذهب إلى القائمة File > Document Properties أو من خلال الاختصار Shift+Ctrl+D ستقوم بفتح نافذة خصائص المستند. افتح تبويب Grids. ثم اختر من قائمة Creation الخيار Axonometric grid ثم اضغط على New بجوارها لتظهر شبكة مضلعة مع خصائص هذه الشبكة وهنا يمكنك اختيار حجم هذه الشبكة من خيار Spacing Y كما يمكن تحديد دمج خطوط الشبكة لكل عدد محدد من الخلايا. والآن استخدم أداة رسم منحنيات البيزير مع الاستعانة بمزايا المطابقة لرسم الجانب العلوي من المكعب كما في الصورة. وباستخدام ذات الأداة ارسم الجانب الأيمن. ثم الجانب الأيسر. أزِل ألوان الحدود من الأشكال الثلاثة ثم لوّن الجوانب الثلاثة بألوان مناسبة. يمكنك إزالة تفعيل ظهور الشبكة من خلال خصائص المستند وتبويب Grids ثم إزالة تفعيل Enable أو يمكن الإبقاء على هذه الشبكة لسهولة رسم تصاميم الإيزومترك بالاستعانة بها. طريقة ثالثة لرسم مكعب إيزومترك في الإنكسكيب: ارسم باستخدام أداة رسم النجمة والمضلعات ذات شكل المسدس وبذات الطريقة المشروحة في هذا الدرس ولوّنه بلون أزرق مع إزالة لون الحدود واجعل مستوى التعتيم Opactiy عند 50%. مع تفعيل مزايا المطابقة المستخدمة في هذا الدرس تحديدًا قم بمضاعفة هذا الشكل وتحريكه إلى الجانب السفلي الأيسر من الشكل الأساسي. ضاعف الشكل الأخير وحرّكه إلى الجهة اليمنى تمامًا كما في الصورة. اصنع نسخة جديدة وضعها في مركز هذه الأشكال كما في الصورة. ضاعف الشكل الأوسط ثم حدّده مع الشكل العلوي باستخدام مفتاح Shift ثم اذهب إلى القائمة Path > Intersection ليتم قص الجزء المشترك بين الشكلين وهو في هذه الحالة الجانب العلوي من المكعب المطلوب. لوّن هذا الشكل الأخير بلون مختلف لتمييزه كجانب علوي. ضاعف مجدّدًا الشكل الأوسط ثم حدّد النسخة الأخيرة مع الشكل الأيسر ثم اذهب إلى القائمة Path > Intersection ليتم قص الجانب الأيسر للمكعب. لوّن هذا الجانب بلون مناسب بحسب اللون الأول. الآن لست مضطرَّا إلى مضاعفة الشكل الأوسط لأنه لم يتبقَ إلّا جانب واحد. حدّد الشكل الأوسط والشكل الأيمن ثم اذهب إلى القائمة ذاتها لقص الجانب الأيمن للمكعب. لوّن الجانب الأيمن باللون المناسب وبذلك نحصل على المكعب المطلوب. إن مجالات التصاميم الإيزومترك كبيرة وواسعة ولا يحدّها إلّا خيال المصمم فقط، وفي هذا الدرس تعلّمنا أساسيات الرسم بهذا الأسلوب وطرق رسم المكعبات المختلفة وما عليك إلا متابعة العمل الجاد لتطوير مهاراتك في رسم تصاميم إبداعية بهذا الأسلوب.

نأتيكم بدرس جديد من سلسلة دروس تعلم التصميم باستخدام مجموعة من الصورة والتقنيات على برنامج Photoshop، مستوى الدرس متوسط وبه تقنيات جد ممتازة للتعلم. ستكون نتيجة درسنا اليوم كما في الصورة التالية: قبل البدء أدعوكم لتحميل الحزم المرفقة مع الدرس (الرابط) افتح مشروعًا جديدًا على Photoshop بالإعدادات التالية: 1920x1080pixels Resolution 720Dpi Color Mode RVB8bit باستعمال أداة الطلاء (G) نلوّن الخلفية باللون #acbfd7. في طبقة جديدة Ctrl+Shift+N وباستعمال أداة الفرشاة (B) بالخصائص التالية : الحجم 500-600 بكسل الشفافية: 0% التدفق -Flow- 30% : ثم نرسم باللون #3a5475 الشكل : أيضا باللون #9acbe7 نجلب الصورة التالية للمشروع. من القائمة Menu > Edit > Free Transform>Distort نغير شكل الصورة في طبقة جديدة وبأداة الفرشاة باللون الأبيض نرسم دائرة في أعلى الصورة ثم نضيف صورة أخرى للمشروع، كما هو مبين: نزيل بأداة الممحاة (E) أطراف الصورة نذهب إلى القائمة : Menu>Filter>Blur>Gaussian Blur نغير خصائص الدمج إلى القيمة Screen نجلب صورة البناية التالية للمشروع باستخدام أداة التحديد Lasso Tool (L) نحدد البناية ثم نضغط الاختصار Ctrl+j للحصول على طبقة بها الجزء المحدد فقط بنفس الطريقة مع باقي صور البنايات حتى نحصل على صورة مشابهة للصورة ندمج طبقات البنايات عن طرق تحديد الطبقات واستعمال الاختصار Ctrl+E ثم من القائمة : Menu > Image >Adjustments > Hue/Saturation و Menu>Filter>Blur>Gaussian Blur ننسخ طبقة البنايات Ctrl+J ثم Ctrl+T لتغيير حجمها – نكبّر حجم الطبقة قليلا- نجلب صورة العربات الحربية للمشروع. ثم Menu>Filter>Blur>Gaussian Blur و Menu > Image >Adjustments > Hue/Saturation في طبقة جديدة Ctrl+Shift+N وباستعمال أداة الفرشاة (B) بالخصائص التالية : الحجم 20 بكسل الصلابة -Hardness- 100%: الشفافية: 60% التدفق -Flow- 100% : ثم نرسم بالألوان #ffdf00، #9a8b48، #ff9c04، #ff0404، #fffff أضواء البنايات كما في الصورة – الأمر سيتطلب بعض الصبر- نذهب إلى القائمة Menu>Filter>Blur> Motion Blur نخفض قيمة الشفافية إلى 56 نجلب صورة الأرضية و من القائمة Menu > Edit > Free Transform>Distort نغير في شكلها : إلى Menu>Filter>Blur>Gaussian Blur في طبقة جديدة، باستعمال الفرشاة باللون #6a82a2 نرسم خطًا أفقيًا ثم باللون #363d45 نستعمل أداة ( Clone Stamp Tool (S لأخذ عينة من منطقة ولصقها في منطقة أخرى (لأن قبعة الجندي غير مكتملة) بأداة الممحاة نزيل الشوائب حتى تبدو القبعة مكتملة . نذهب إلى Menu > Layer >New Adjustments Layer > Hue/Saturation في طبقة جديدة Ctrl+Shift+N وباستعمال أداة الفرشاة (B) بالخصائص التالية : الحجم 300-400 بكسل الصلابة -Hardness- 0%: الشفافية: 60% التدفق -Flow- 30% : نرسم باللون الأسود في المكان باللون الأحمر في طبقة جديدة وبنفس الطريقة نلون على مستوى ركبتي الجندي نغيّر خصائص الدمج إلى القيمة Overlay ننسخ الطبقة نضيف الصورة للمشروع ومن Menu > Edit > Free Transform>Distort نغير من شكلها. نُغيّر خصائص الدمج إلى القيمة Color Dodge مع استعمال الممحاة لإزالة الأطراف في طبقة جديدة وبفرشاة ذات لون أبيض نرسم : نُغيّر خصائص الدمج إلى القيمة Soft Light نفس العملية على مستوى الركبتين مع خصائص الدمج إلى القيمة Overlay في طبقة جديدة باللون الأبيض بفرشاة نضفي بعض اللون فوق السيارة والجندي ونخفض من قيمة الشفافية نجلب الصورة نغيّر خصائص الدمج إلى القيمة Screen ننسخ طبقة الصورة – الضوء – ونموضعها في أماكن مختلفة حتى تعطينا منظر أضواء البنايات لتغير لون الضوء ننسخ إحدى الصور ونغير خصائصها عن طريق Menu > Image >Adjustments > Hue/Saturation باستخدام نفس الطريقة يمكننا الحصول على ألوان مختلفة في طبقة جديدة مع أداة الفرش باللون #fa7f00 نغير خصائص الدمج إلى القيمة Color ثم نقوم بجلب الصورة . نغير خصائص الدمج إلى القيمة Screen ننسخ الصورة ونضعها في أماكن أخرى كما هو مبين. في طبقة جديدة وبفرشاة باللون السابق (#fa7f00) نلون امتداد أضواء السيارات. مع تغيير خصائص الدمج إلى القيمة Color نضيف الصورة التالية للمشروع ونضعها في الأعلى : إلى القائمة Menu>Filter>Blur>Gaussian Blur نغيّر خصائص الدمج إلى القيمة Screen في طبقة جديدة من القائمة Menu>Filter>Render >Clouds باستعمال الاختصار Ctrl+T نكبّر من حجم طبقة السحب نذهب إلى القائمة Menu>Layer>Layer Mask>Hide All مما سيخفي جميع الطبقات ، ثم نحدد Mask بجانب الطبقة في نافذة الطبقات وباستعمال أداة الفرشاة (B) بالخصائص التالية : الحجم 420 بكسل الصلابة -Hardness- 0%: الشفافية: 50% التدفق -Flow- 40% : باللون الأبيض كما هو موضح نغيّر خصائص الدمج إلى القيمة Overlay نضيف الصورة التالية للمشروع: نغيّر خصائص الدمج إلى القيمة Lighten Color في طبقة جديدة نلون بالفرشاة ذات اللون #3e738c كما هو مبين نغيّر خصائص الدمج إلى القيمة Screen نذهب إلى القائمة Menu>Layer>New Layer Adjustment> Balance Color ثم Menu>Layer>New Layer Adjustment> Hue/Saturation في طبقة جديدة نلون بالفرشاة ذات اللون # ff1a00 كما هو مبين نغيّر خصائص الدمج إلى القيمة Overlay و الشفافية إلى 59 في طبقة أخرى باللون #fc8a39 ثم خصائص الدمج إلى القيمة Overlay في طبقة ثالثة باللون #f9c43d و #fecb69 ثم خصائص الدمج إلى القيمة Overlay ننسخ الطبقة ونزيحها قليلا ثم إلى القائمة Menu>Layer>New Layer Adjustment> Curves نغيّر خصائص الدمج إلى القيمة Overlay ننسخ الخط مرات كثيرة وفي كل مرة نزيحه حتى نعطي للصورة تدرجًا في الخطوط- تموجات- ننشئ نسخة تدمج جميع الطبقات عن طريق الاختصار Ctrl+Alt+Shift+E من القائمة Menu>Filter>Sharpen > Sharpen ترجمة -وبتصرّف- للدّرس: Réaliser l’effet de Battlefield 4 avec Photoshop لصاحبه Grafolog

المخططات البيانية مهمة جدًّا لتتبع سير العمل ومدى النجاح والإخفاق في المشاريع، أو لشرح أفكار أو نظريات وحتى لتوضيح بيانات معينة، فمجالات استخدام المخططات البيانية واسع جدًّا. تقدّم البرامج والتطبيقات المختلفة أدوات خاصة لرسم هذه المخططات البيانية بأسلوب بسيط كحزم برامج المكتب وغيرها، ولكننا قد نحتاج في بعض الأحيان إلى رسم مخطط بياني أنيق وأكثر حيوية من المخططات البيانية البسيطة لجذب الانتباه أو لاتباع نمط معين في العرض التقديمي على سبيل المثال. وباستخدام برنامج أدوبي إليستريتور يمكننا رسم مخطط بياني مميز وحفظه بصيغة فكتور ما يمنحنا الحرية في تكبير حجم المخطط وتصغيره بحسب التصميم الذي نعمل عليه بالإضافة إلى سهولة تعديل الخطوط البيانية وتغيير ألوانها وإضافة أو إزالة بعض الخطوط بحسب الحاجة. كما نرى فهذا مخطط بياني لبيان عدد الزيارات التي تمت لمواقع إحدى الشركات وذلك لتتبع الأيام الأكثر زيارة والقيام بنشر أهم البيانات عليها للحصول على الاهتمام الأكبر من قبل الزائرين للموقع وخصوصًا إذا كان الموضوع يتعلق بإعلان معين. وسنقوم في هذا الدرس باستخدام الأدوات الأساسية مع خصائص المظهر وبعض التأثيرات كالظلال والتحريك البسيط للحصول على خطوط بيانية بارزة وحيوية أكثر من الخطوط العادية البسيطة مع إضافة تدرج لوني بسيط وجميل للخلفية في نهاية الدرس. افتح برنامج أدوبي إليستريتور وقم بفتح مستند جديد بحجم 800 في 800 وفي خيار Advanced قمت باختيار نمط ألوان RGB مع دقة 72ppi وذلك لأن تصميمي سيكون مخصصًّا للعرض على الشاشة وليس للطباعة. أمّا إذا كنت تنوي طباعة المخطط فيجب عليك اختيار نمط ألوان CMYK ودقة تصل إلى 300ppi للحصول على نتائج أفضل في الطباعة. من المهم أن تعوّد نفسك كمصمم على استخدام الشبكة Grid للعمل على التصاميم بدقة أكبر. لذلك قم بتفعيل إظهار الشبكات وفعّل ميزة المطابقة إلى الشبكات عبر الاختصارين ”+Ctrl و”+Shift+Ctrl أو عبر القائمتين التاليتين على التوالي: View > Show Grid View > Snap to Grid علينا الآن تخصيص إعدادات الشبكة عبر الذهاب إلى القائمة Edit > Preferences > Guides & Grid وفي حقل Grid ضع القيمة 10px في خانة Gridline every وذلك حتى يتم إعداد خطوط الشبكة كل 10 بكسل، ثم ضع القيمة 1 عند خانة Subdivisions وذلك لجعل خانة من خانات الشبكة بدون تقسيم. والآن سنرسم مربع الخلفية عبر استخدام أداة رسم المستطيلات Rectangle Tool ثم النقر نقرًا مزدوجًا على لوح الرسم لتفتح نافذة إنشاء المستطيلات. ضع القيم 800 للعرض والطول معًا وذلك لأننا جعلنا حقل الرسم بهذا الحجم عند إنشاء المستند ليغطّي كامل مساحة لوح الرسم. لوّن هذا المربع باللون الأحمر الداكن المائل للبني ذو القيمة اللونية 440000#. ولجعل المربع المرسوم يطابق لوح الرسم بشكل مثالي وخصوصًا أنهما بذات الحجم افتح لوحة المحاذاة Align من قائمة Window ثم اضغط على الأيقونة في الزاوية السفلية اليمنى من اللوحة واختر من القائمة خيار المحاذاة إلى لوح الرسم Align to Artboard وذلك لنقوم بمحاذاة المربع إلى لوح الرسم تحديدًا ثم حدّد المستطيل وحاذه إلى الوسط أفقيًّا وعموديًّا. افتح لوحة الطبقات Layers من قائمة Window ثم أنشئ طبقة جديدة من الأيقونة أسفل لوحة الطبقات ثم قم بالنقر بجانب رمز العين لطبقة الخلفية لوضع قفل للطبقة وبذلك لن نستطيع تعديل أو تحريك الخلفية ممّا يُسهّل علينا العمل لاحقًا فوق هذه الخلفية بسهولة. سنرسم الآن جدول المخطط البياني لذلك استخدم أداة رسم الشبكة المستطيلة Rectangular Grid Tool التي تجدها بالضغط المستمر على أداة الخط Line لتظهر بقية الأدوات المرتبطة في القائمة أسفل أداة الخط. انقر نقرًا مزدوجًا على لوح الرسم باستخدام هذه الأداة لتفتح نافذة أدوات إنشاء الشبكة. اختر حجم الشبكة ليكون بعرض 600 وارتفاع 400 بكسل وبعدد 10 أقسام أفقية و12 عمودية ثم اضغط OK. ضع الشبكة في النصف السفلي من المخطط لوضع العنوان وبيانات الشرح في الأعلى لاحقًا. حدّد هذه الشبكة ثم انقر بالزر الأيمن واختر Ungroup من القائمة. قم بحذف الإطار الخارجي المحيط بالشبكة عبر تحديده هو فقط والضغط على مفتاح Delete من لوحة المفاتيح . وسنقوم بجعل خطوط شبكة المخطط منقطّة وذلك عبر تحديد جميع الخطوط الطولية والعرضية ثم فتح لوحة الحدود Stroke، أبقِ على جميع الإعدادات الأولية على حالها ثم فعّل خيار Dashed Line ثم ضع القيمة 5px في dash وgap الأولى فقط وشاهد النتيجة بنفسك. يُعتبر dash هو الخط في التنقيط وgap هو الفجوة التي تلي الخط dash ويمكن تخصيص شكل تنقيط معيّن عبر تعبئة باقي الخانات للخطوط والفجوات المتبقية في لوحة الحدود ولكننا في هذه الحالة نريد أن يكون حجم الخط في التنقيط 5 بكسل مع وجود فجوات بين الخطوط بحجم 5 بكسل أيضًا لذلك اكتفينا بالخانتين الأوليتين ليتم تكرار هذه القيم على طول الخطوط المُحدّدة. خفّف مستوى ظهور هذه الشبكة عبر تحديدها والذهاب إلى لوحة الشفافية Transparency ثم تخفيف التعتيم Opacity لنحو 32%. سنضيف تأثيرًا إضافيًّا على هذه الشبكة بإنشاء ظل خفيف لها. حدّد الشبكة ثم اذهب إلى القائمة Effect > Stylize > Drop Shadow في نافذة خيارات الظلال اختر النمط Soft Light ثم خفّف التعتيم Opacity إلى 30% ثم ضع القيمة 1px في خانتي الإزاحة على المحورين x وy وباللون الأسود لهذه الظلال اضغط على OK. الآن سنرسم الخط البياني الأوّل. في هذا الدرس سنتعلّم فقط كيفية تصميم رسوميات المخطط البياني ولن نهتم لدقة البيانات والخطوط بينما في العمل الحقيقي سيتوجب علينا أولًا تحديد القيم على المحورين العمودي والأفقي أوّلًا ثم تحديد القيمة الحقيقية للبيانات ومن ثم رسم الخط البياني بدقة بناء على ما هذه البيانات. في هذا الدرس سنختصر الوقت ونرسم خطًّا عشوائيًّا غير دقيق. استخدم أداة القلم Pen Tool وابدأ برسم خطٍّ عشوائيٍّ على شبكة المخطط وستشعر بأنك مقيّد الحركة ضمن نقاط محدّدة وذلك لأننا فعّلنا خيار المطابقة على خطوط الشبكة لذلك ستتحرك أداة القلم للرسم بمستوى 10 بكسل في كل حركة بناءً على الإعدادات التي خصصّناها في بداية الدرس. اختر لونًا مميزًا وليكن اللون السماوي 00CFFF#. هذا الخط حاد جدًّا عند المنحنيات لذلك سنقوم بتنعيم هذه المنحنيات. حدّد الخط البياني السماوي ثم اذهب إلى لوحة الحدود Stroke ثم اختر الخيار الأوسط (المنحني) في Corner ولاحظ النتيجة. وسنجعل نهايات الخط مستديرة عبر ذات اللوحة (Stroke)، اختر الخيار الأوسط (المستدير) في Cap ولاحظ النتيجة أيضًا. سنقوم الآن بإضافة تأثيرات البروز الحيوية. افتح لوحة المظهر Appearance من قائمة Window ثم حدّد الخط البياني وستشاهد عناصر مظهر هذا الخط وهي التعتيم الافتراضي ولون التعبئة لا يوجد ولون الحدود السماوي بحجم 4 بكسل. حدّد الحدود ثم انقر على أيقونة New لإنشاء نسخة عن عنصر الحدود. انقر على أيقونة اللون للحدود الجديدة ثم اختر لونًا سماويًّا كلون الحدود الأساسي ثم انقر عليه نقرًا مزدوجًا لتفتح نافذة تعديل اللون بحيث يمكنك الآن تعديل اللون وتخصيصه. سنجعل اللون الجديد داكنًا أكثر لذلك ضع القيم التالية R:0 G:133 B:222 وستلاحظ الفرق بين اللون القديم والجديد في المربعين الصغيرين على يسار النافذة بحيث يظهر اللون القديم في المربع العلوي والجديد في السفلي. خفّف سماكة الحدود الجديدة إلى 3 بكسل. تأكّد من أنك تُحدّد الحدود الجديدة في لوحة المظهر ثم اذهب إلى القائمة Effect > Distort & Transform > Transform وفي نافذة Transform Effect أضِف إزاحة بمقدار 1px على المزلاج العمودي وألغِ تفعيل الخيارات أسفل النافذة باستثناء خيار Transform Objects. وبذلك سيتم تحريك الحدود الجديدة عموديًّا إلى الأسفل بمقدار 1 بكسل فقط. وبعد هذه الخطوة فقط بدأ الخط البياني يصبح أفضل مظهرًا، ولكننا لم ننتهِ بعد. ضاعف الحدود الأخيرة من لوحة المظهر بنفس الطريقة المُتّبعة سابقًا. هذه المرّة خفّف سماكة الحدود الجديدة إلى 1px وغيّر اللون إلى لون أكثر قتامةً من السابق بالقيم التالية R:0 G:97 B:216. ومجدّدًا اذهب إلى القائمة Effect > Distort & Transform > Transform وقم بذات التعديلات السابقة من إزاحة مزلاج المحور العمودي بمقدار 1px وأبقِ على خيار Transform Objects فقط مفعّلًا. وهكذا سيبدو الخط البياني مع التعديلات والمزايا المُضافة كما في لوحة المظهر. ومن لوحة المظهر حدّد الحدود الأولى ذات اللون السماوي الفاتح والحجم 4 بكسل ثم اذهب إلى القائمة Effect > Stylize > Drop Shadow واجعل النمط Soft Light ومستوى التعتيم Opacity 50% وإزاحة المحور X 0 وإزاحة المحور Y بمقدار 2 مع اختيار اللون الأسود. وبهذه الظلال المُضافة أصبح الخط حيويًّا ونابضًا بالحياة وبعبارة أخرى أصبح غير مسطّح وجميل المظهر. وعلى الرغم من أننا جعلنا الانحناءات ناعمة ومستديرة وغير قاسية إلا أن المظهر العام للخط يبدو قاسيًّا عند المنحنيات لذلك سنقوم بجعلها أكثر انحناءً. حدّد كامل مسار الخط البياني من لوحة المظهر Path ثم اذهب إلى القائمة Effect > Stylize > Round Corners ضع القيمة 10px عند خانة نصف القطر. ولاحظ زيادة الانحناء للمنعطفات في الخط البياني. الآن أصبح الخط البياني جاهزًا. وإذا كنّا سنقوم برسم خطوط بيانية أخرى فيجب علينا حفظ هذا النمط من التعديلات الرسومية على الخط في لوحة Graphic Style وذلك حتى لا نضطّر لإعادة جميع المراحل السابقة على كل خط بياني جديد سنقوم برسمه. حدّد الخط البياني ثم افتح لوحة Graphic Style من نافذة Window ثم اضغط على أيقونة نمط جديد أسفل اللوحة ليتم حفظ النمط المستخدم على هذا الخط ضمن الأنماط الموجودة في اللوحة. ارسم خطًّا بيانيًّا جديدًا بشكل عشوائي (لا تنسَ أننا نرسم خطوطًا عشوائيةً في هذا الدرس لشرح عملية التصميم ولكن في المخططات الحقيقية يجب عليك اتباع قيم البيانات التي تعمل عليها لرسم الخطوط البيانية). حدّد الخط البياني الجديد ومن لوحة Graphic Style انقر على النمط الذي سبق وأن حفظناه في الخطوة السابقة. ستلاحظ أن الخط الجديد أصبح يمتلك بروزًا وظلالًا كالخط القديم تمامًا وبنقرة واحدة فقط. هذه العملية مفيدة جدًّا خصوصًا عندما نعمل على تصميم عناصر كثيرة في التصميم الواحد ويكون الكثير منها مرسومًا بذات النمط وله نفس التأثيرات المختلفة بحيث لن نضطّر لإعادة القيام بكل تلك الخطوات بل سنكتفي بنقرة واحدة للقيام بذلك. كل ما علينا القيام به هنا هو الذهاب إلى لوحة المظهر Appearance وتغيير ألوان الحدود الثلاثة للخط الجديد فقط لتمييزه عن الخط القديم مع الانتباه إلى جعل الحدود قاتمة أكثر بالتدريج من الأسفل إلى الأعلى كما في نمط الخط الأول. في هذه الحالة اخترت سلسلة من الألوان البنية لتلوين الخط الجديد. ارسم خطًّا بيانيًّا ثالثًا. طبّق عليه النمط أيضًا. غيّر ألوان الحدود الثلاثة إلى سلسلة من الألوان الخضراء. والآن لسنا مضطّرين لإبقاء عملية الرسم على الشبكة Grid بمستوى 10 بكسل في كل حركة. سنعيد ضبط إعدادات الشبكة من القائمة Edit > Preferences > Guides & Grid ثم ضع القيمة 1 بكسل في خانة Gridline every. استخدم أداة النص بالخط الذي تراه مناسبًا لتصميمك. أنا اخترت خط Adobe Arabic القياسي وبحجم 30px ثم اكتب القيم على المحور العمودي.وباعتبار أننا نرسم مخطّطًا بيانيًّا لبيان عدد الزيارات اليومية لمواقع الإنترنت فسنضع القيم من 100 إلى 1000 كما في الصورة. وكما قلنا فهو مخطط بياني لعدد الزيارات اليومية لذلك سنضع أسماء الأيام في الخط الأفقي أسفل المخطط. حدّد جميع النصوص وطبّق ظلًّا عليها من خلال الذهاب إلى القائمة Effect > Stylize > Drop Shadow اجعل النمط المستخدم Soft Light كالعادة والتعتيم 85% والإزاحة على المحورين بقيمة 2px. أصبحت النصوص حيوية أكثر بوجود الظلال تحتها. اكتب عنوان المخطط أعلى التصميم مع زيادة حجم الخط إلى 42 ولتطبيق ذات التأثير الأخير اضغط الاختصار Shift+Ctrl+E أو اذهب إلى القائمة Effect > Apply Drop Shadow ارسم ثلاثة خطوط صغيرة فوق بعضها أسفل العنوان مباشرة إلى جهة اليمين وطبّق عليها النمط المستخدم على الخطوط البيانية واستخدم ألوان الخطوط البيانية الثلاثة. حدّد الخطوط الثلاثة ثم افتح لوحة المحاذاة Align وغيّر خيار Align to أسفل يسار اللوحة إلى Align to Selection ثم اختر الخيار الخيار العمودي من Distribute Spacing بحيث ستقوم هذه العملية بتوزيع المسافات بالتساوي بين الخطوط. أكتب أسماء المواقع الثلاثة الافتراضية بجانب الخطوط الثلاثة. اذهب إلى لوحة الطبقات Layers ثم ألغِ القفل من طبقة الخلفية. استبدل لون التعبئة الجامد للخلفية بتدرج لوني ثم قم بتعديل اللون الأيسر للتدرج اللوني عبر النقر المزدوج عليه واختيار اللون 440000#. ثم غيّر اللون الأيمن من التدرج اللوني إلى اللون 220000#. استخدم أداة التدرج اللوني من لوحة الأدوات ثم ارسم اتجاه التدرج بشكل قطري من الركن العلوي الأيسر إلى الركن السفلي الأيمن. وبهذا نكون قد انتهينا من تصميم مخطط بياني أنيق وحيوي وجميل ومفعم بالألوان والتأثيرات المتنوعة. تعلّمنا في هذا الدرس أهمية حفظ كامل النمط من تأثيرات وتعديلات على المظهر من لوحة المظهر عبر وضعها في نمط واحد يمكن الرجوع إليه وإعادة تطبيقه مجدّدًا على عناصر جديدة من خلال لوحة Graphic Style، كما تعلمنا كيفية إضافة حدود على العنصر وتلوينها وتحريكها وتعديل أحجامها للحصول على بروز وتأثير جميل على العنصر بالإضافة إلى تطبيق تأثير الظلال على العناصر المختلفة.

فن الزخرفة والتزيين، وهو فن عريق ورائع تميّزت به الحضارة الإسلامية وخاصة في العهد الأندلسي وقد أذهلت بقية الحضارات إلى يومنا هذا، ويتميز هذا الفن بالأشكال الهندسية والخطوط المتداخلة وكذلك استخدام الأوراق والأزهار وغيرها. سنتعّلم في هذا الدرس كيفية رسم بعض أنواع من الزخارف الإسلامية التابعة لهذا الفن ببرنامج الإليستريتور ويمكنكم القياس على هذه التمارين لتصميم المزيد من الأشكال الزخرفية والهندسية. سنتعلم في الدرس تصميم شكلين من أشكال فن الأرابيسك. لنبدأ بالشكل الأول، افتح برنامج الإليستريتور ثم أنشئ مستندًا جديدًا، الأبعاد غير مهمة ولكنني اخترت حجمًا يؤمّن لي المساحة الكافية للعمل 1280 × 800. استخدم أداة رسم المستطيلات Rectangle Tool ثم اسحب مربّعًا باستخدام الفأرة على لوح الرسم مع الاستمرار بالضغط على مفتاح Shift لضمان الحصول على مربّع مثالي (متساوي الأضلاع). انقر بالزر الأيمن للفأرة على المربع ثم اختر من القائمة Transform > Rotate حدّد الزاوية 45 درجة ثم انقر على زر COPY. بهذه الطريقة أنشأنا نسخةً عن المربع الأول مع الاختلاف في الزاوية بمقدار 45 درجة والحفاظ على المربع الأصلي. حدّد كلا المربعين ثم انقر على الزر Unite من لوحة Pathfinder لتدمج الشكلين في شكل واحد. وبذلك نحصل على هذا الشكل الذي يعتبر النواة الأساسية لتصميم الأرابيسك الأول الذي نعمل عليه في هذا الدرس. فعّل الأدلّة الذكية عبر الاختصار Ctrl+U وذلك لنتمكّن من الرسم بدقةٍ وتوازٍ ومحاذاةٍ مثاليةٍ في كافة الاتجاهات خصوصًا وأننا في صدد العمل على تصميم هندسي متناظر. حدّد هذا الشكل الجديد واختر أداة التحديد Selection Tool ثم اضغط باستمرار على مفتاح Alt واسحب هذا الشكل باتجّاه اليمين مع الاستعانة بالأدلّة الذكية، وبعد بدء عملية السحب مباشرة اضغط باستمرار على مفتاح Shift مع المحافظة على الاستمرار بضغط مفتاح Alt الذي بدأنا بضغطه مسبقًا. إن استخدام مفتاح Alt مع استخدام أداة التحديد سيقوم بسحب نسخة عن الشكل المحدّد كما أن استخدام مفتاح Shift يحافظ على ثبات المحاور أثناء عملية السحب. استعن بالأدلّة الذكية لجعل النسخة الجديدة تبدأ عند نهاية النسخة الأصلية تمامًا. سنقوم بعمل نسخٍ إضافية مشابهة وحتى لا نكرّر ذات العملية فإن الإليستريتور يؤمن طريقة سهلة للقيام بذلك وهي اختصار يقوم بتكرار العملية الأخيرة على البرنامج وهو Ctrl+D. اضغط هذا الاختصار عدّة مرات ليقوم بإنشاء نسخٍ على نفس النمط الأول عدّة مرات حتى تملأ الصف بهذه الأشكال. حدّد جميع الأشكال في الصف ذاته ثم انسخها للأسفل بذات الطريقة الأولى. مجدّدًا اضغط على الاختصار Ctrl+D لتكرار العملية الأخيرة. هذا شكل من أشكال الزخرفة يمكن استخدامها لصنع خلفية أرابيسك جميلة ويمكنك أن تضيف لونًا آخر على التصميم عبر رسم مستطيل باستخدام أداة المستطيلات باللون الأسود مثلًا وترسله للأسفل عبر الاختصار Shift+ctrl+[ وتجعل لون التعبئة للأشكال الهندسية باللون الأبيض وتشاهد النتيجة الجديدة. وبإمكانك اعتماد إنشاء نقش أو نمط تستطيع تكراره بالقدر الذي تريد على أي شكل أو مساحة أو خلفية بدلًا من نسخ الشكل وتكرار العملية كما فعلنا في الخطوات السابقة. يتم ذلك عبر تحديد الشكل المراد جعله نمطًا ثم الذهاب إلى القائمة Object > Pattern > Make الآن سيتم فتح نافذة إنشاء الأنماط والذي سيعطيك مثالًا عن كيفية ظهور النمط الذي حدّدته بشكل متكرر بالإضافة إلى وضع هذا النمط ضمن لوحة الحوامل Swatches كما يمكنك التعديل على إعدادات هذا النمط كتغيير اسمه مثلًا وطريقة تكراره وغيرها من التعديلات. بعد الانتهاء من تجهيز النمط انقر على زر Done أعلى نافذة خيارات النمط ليتم حفظ هذا النمط ضمن لوحة الحوامل وتستطيع استخدامه لاحقًا. ولتجربة هذا الأمر وفهم كيفية عمل النمط قم برسم مستطيل أسود. استخدم لوحة الحوامل لتحديد النمط الذي قمنا بإنشائه مع التأكّد من تحديد المستطيل سلفًا ليتم تعبئة هذا المستطيل بالنمط الذي قمنا بإنشائه سابقًا. وكما قلت سابقًا هذا الشكل هو النواة الأساسية لتشكيلات عديدة يمكن البناء عليه لإنشائها وسأعلّمكم إحداها وأترك البقية لخياراتكم وإبداعاتكم. حدّد الشكل الأساسي ثم انسخه Ctrl+C وألصقه في المقدمة Ctrl+F ثم عدّل الحجم لتصغيره من خلال أداة التحديد Selection Tool عبر النقر على السهم في زاوية الشكل والسحب نحو الداخل لتتم عملية التصغير، ولا تنسَ أن تستمر في الضغط على مفتاحي Shift وAlt أثناء عملية السحب للمحافظة على تساوي الأبعاد من جهة والمحافظة على مركزية عملية التحجيم من جهة أخرى. صغّر حجم النسخة الجديدة قليلًا كما في الشكل التالي. افتح لوحة الحدود Stroke وزِد حجم الحدود لنحو 20pt. مع القيام بعملية التكرار وإضافة الألوان إلى تعبئة الأشكال جميعها وإلى حدودها سنحصل على أشكال مثيرة وجميلة توضّح جوهر فن الأرابيسك. قم بعملية إنشاء نمط (نقش) جديد بالأشكال الجديدة الملونة لترى روعة تصاميم الأرابيسك. بالإمكان إضافة وتعديل هذا الشكل للحصول على أشكال أخرى مرتبطة بالشكل الأساسي كقاعدة للتصميم. سنقوم الآن برسم الشكل الهندسي الآخر وهو أكثر تعقيدًا وصعوبة، هناك عدّة طرق لرسم هذا النموذج منها الطريقة التي شَرَحَتها المصمّمة جومانا مدلج والتي تحتاج لرسم الكثير من الخطوط المتقاطعة في المركز ومن ثم وصلها بطريقة معينة للحصول على الشكل. ولكنني سأشرح كيفية رسمه بطريقة يدوية بسيطة تقريبية. استخدم أداة رسم المضلعات Polygon Tool واسحب شكلًا وأثناء السحب وقبل افلات زر الفأرة اضغط على سهم الأعلى من مفاتيح الأسهم في لوحة المفاتيح لزيادة عدد الأضلاع، اجعلها ثمانية، كذلك استمر في الضغط على مفتاح Shift للمحافظة على استقامة الشكل أفقيًّا. انقر بالزر الأيمن للفأرة واختر القائمة Transform > Rotate وذلك لتدوير الشكل. من نافذة خيارات التدوير أدخل القيمة 22.5 درجة في زاوية الدوران Angle ثم اضغط OK. سيصبح الشكل كما في الصورة التالية. فعّل الأدلة الذكية من الاختصار Ctrl+U ثم استخدم أداة القلم Pen Tool وارسم الشكل الواضح بالنقاط بالترتيب من 1 إلى 4 بالاستعانة بالأدلّة الذكية واستخدام مفتاح Shift للمحافظة على استقامة زاوية الرسم أثناء رسم الخطوط الأفقية. عليك جعل النقطة 1 في أقل من منتصف الضلع المرسوم عليه تلك النقطة. حدّد الشكل الجديد الذي أنشأناه بأداة القلم ثم انقر بزر الفأرة الأيمن عليه واختر القائمة Transform > Reflect اختر الخيار الأفقي Horizontal ثم اضغط على زر COPY لإنشاء نسخة معكوسة عن هذا الشكل. حرّك النسخة الجديدة مع الاستعانة بالأدلة الذكية إلى أسفل الشكل الأصلي مع المحافظة على تطابق الضلع الطويل الأفقي بين الشكلين. حدّد كلا الشكلين واختر الخيار Unite من لوحة Pathfinder ليندمج الشكلان في شكل واحد. حدّد الشكل الجديد وانقر بالزر الأيمن للفأرة عليه واذهب إلى القائمة Transform > Rotate لتدوير هذا الشكل. أدخل القيمة 45 درجة ثم اضغط على زر COPY لإنشاء نسخة مختلفة بالزاوية عن هذا الشكل. اضغط على الاختصار Ctrl+D مرتيّن لتكرار العملية الأخيرة وإنشاء نسختين جديدتين بزاوية إضافية 45 درجة في كل مرّة. ألغِ لون التعبئة وحافظ على لون الحدود الأسود. امسح شكل المضلع الثُماني. هذا الشكل الأخير رائع ويمكن استخدامه على وضعه الحالي في العديد من التصاميم. ولكنه ليس الشكل النهائي الذي نطمح له. حدّد أحد الأشكال المُكَوِّنَة للشكل الكلّي ثم اذهب للقائمة Object > Path > Add Anchor Points كرّر العملية مرة أخرى للحصول على ثلاث نقاط على كل ضلع. استخدم أداة التحديد المباشر Direct Selection Tool وقم بتحريك النقاط على كل ضلع بحيث نحافظ على النقطة الوسطى في مكانها ونجعل كل نقطة من النقطتين الأخريين عند تقاطع الضلع مع الضلع المائل من الشكل المائل المتداخل مع الشكل الأساسي الذي نعمل عليه. الآن وباستخدام ذات الأداة حدّد النقطة الوسطى واضغط على المفتاح Delete من لوحة المفاتيح لتمسح النقطة والخطوط التي تصل بينها ويصبح الشكل الأساسي فارغ في المنتصف. حافظ على هذا الشكل الجديد وامسح بقية الأشكال ثم حدّد كافة أضلاع هذا الشكل وانقر بالزر الأيمن للفأرة عليه واذهب للقائمة Transform > Rotate أدخل ذات القيم الأخيرة وهي الدرجة 45 مع الضغط على زر Copy ثم اضغط الاختصار Ctrl+D مرتين للحصول على الشكل الذي نريده بالفعل. ارسم مربعًا مؤقتًّا بشكل يلامس رؤوس الأشكال ثم أكمل باستخدام أداة القلم أو أداة رسم الخطوط رسم خطوطٍ إضافيةٍ امتدادًا لرؤوس الأشكال حتى حدود المربع المؤقت. كرّر العملية مع رؤوس الأشكال الأخرى على الزوايا الأربعة. الآن امسح المربع المؤقت وقم بإنشاء نمط (نقش) بذات الطريقة التي استخدمها خلال هذا الدرس. وهذه النتيجة الرائعة التي ستحصل عليها عند استخدام هذا النمط لتعبئة مستطيل ما مثلًا. يمكنك أن تلون أجزاء الشكل بالألوان التي تريد. وتستخدمها كنمط أيضًا للحصول على أشكال فن أرابيسك مذهلة. يمكنك أيضًا التعديل على الشكل الأخير للحصول على أشكال هندسية زخرفية مختلفة ومميزة. أضِف لمستك وإبداعك على تصاميم فن الأرابيسك الرائع وهذين المثالين ما هما إلا نموذجين بسيطين عن مزايا هذا الفن الرائع.

سنحاول هنا أن نحيط قدر الإمكان بجوانب هذا الفن الرائع ورسوماته المذهلة عبر معرفة ماهيته، أنواعه، تطورّه، تاريخه وأهم البرامج المستخدمة في رسمه. وسنتعلّم لاحقًا كيفية رسم رسومات البكسل المتنوعة. ما هو فن البِكسل؟ فن البِكسل أو Pixel Art هو فن رسومات قديم يشبه من حيث المبدأ الحياكة الصوفية كالرسومات على الملابس الصوفية إلا أن بداية هذا النوع من الفنون بدأ مع بدء ظهور أجهزة اللعب والحواسيب حيث لم يكن بمقدور تلك الأجهزة القديمة عرض رسوميات معقدّة وكثيرة الألوان وثلاثية الأبعاد كما في يومنا هذا لذلك اعتمد مطوّرو الألعاب في ذلك القوت على هذا النوع الوحيد المتوفّر لرسم خلفيات وشخصيات الألعاب بألوانها البسيطة، وعلى الرغم من بساطتها في ذلك الوقت إلا أنها كانت رائعة وممتعة للغاية ولعّل ألعاب Pacman و Mario وStreet Fighters وKingKong وSonic أبرز ألعاب تلك المرحلة شاهد ومثال رائع على روعة تلك الرسومات في تلك الحقبة من الزمن. ويعتمد الرسم هنا على رسم النقاط الصغيرة بجانب بعضها بحيث تكون النقطة الواحدة بحجم بكسل واحد فقط ما يجعل هذه الرسومات دقيقة وصغيرة نسبيًّا بالنسبة إلى المقاسات المعتمدة في الأجهزة المتطوّرة في أيامنا هذه بينما كانت أكثر من كافية لأجهزة تلك الحقبة القديمة. لذلك عند الرسم بأي برنامج للرسم عليك تكبير منظور العمل إلى أكبر درجة ممكنة تستطيع معها التعامل مع نقاط البكسل بسهولة وعند العودة للحجم الطبيعي ستشاهد نتيجة العمل الذي قمت به. هذا مثال رسمته باستخدام برنامج الرسام Paint الموجود ضمن نظام الويندوز Windows حيث تظهر نقاط البكسل بوضوح عند التكبير وفي شكل الرأس الصغير تظهر النتيجة بالحجم الطبيعي. وكانت رسومات البكسل بسيطة جدًّا في البداية حيث اعتمدت نظام ألوان 8bit لتتطور إلى 16bit ومنها إلى أكثر وأكثر حتى أصبحت متطورة جدًّا لدرجة أن الرسومات الحديثة منها أصبحت تتضمن تدرجات لونية عادية بعد زيادة حجم العمل وعدد الألوان المستخدم. على الرغم من انتشار الرسومات عالية الدقة والرسومات ثلاثية الأبعاد إلا أن رسومات البكسل مازالت موجودة بقوة وبخاصة في ألعاب الأجهزة المحمولة كالهواتف الذكية وغيرها. ومن الممكن رسم هذه الرسومات باستخدام تقنيات وأدوات اعتيادية كأدوات برنامج الرسّام Paint والفوتوشوب Photoshop أو يمكن رسمها بدون أدوات وبشكل يدوي وهو ما ينتج إبداعًا مميزًا قد لا تستطيع الأدوات تقديمه. أنواعه: تم تقسيم رسومات البِكسل إلى نوعين: الإيزومِترِك Isometric: ويُطلق عليها اسم ثلاثي البعاد أو متساوي القياس أيضًا وهي رسومات بكسل تبدو بثلاثة أبعاد وتظهر فيها ثلاث جوانب للأشكال المرسومة ما يعطي انطباعًا بأنها ثلاثية الأبعاد وعادة ما تكون بمنظور جانبي بزاوية معينة وتكون غالبًا 30 درجة وتستخدم لرسم مناظير معينة لمواقع شهيرة أو افتراضية وفي بعض الأحيان لرسم خلفيات لعبة من هذا النمط وقد ظهرت بعض الألعاب التي تعتمد على هذا النمط من الرسوميات خصوصًا للأجهزة المحمولة كالهواتف الذكية فيما يتباهى الآن المصممون برسوماتهم المعقّدة والرائعة باستخدام هذا النمط. وهذه صور لبعض الألعاب القديمة التي تستخدم هذا النمط سلسلة ألعاب Age of Empires Diablo Transport Tycoon وهذه صور لبعض ألعاب الهواتف المحمولة تستخدم هذا النمط من الرسومات Pocket Harvest Zombie Commando وهذه بعض الرسومات لهذا النمط لبعض المصممين للمصممة Sylvia Flores Espinoza للمصمم Robert Podgórski للمصمم Sergey Kostik غير الإيزومِترِك Non-Isometric: وهو نمط رسومات بِكسل عادي والأكثر انتشارًا وهو الصورة بشكل مباشرة من جهة واحدة من الأمام أو الجانب أو حتى من الأعلى بدون زوايا وهو معروف في عالم الألعاب القديمة وأيضًا الحديثة الخاصة بمنصات الأجهزة المحمولة عادة. ولعل أشهر الصور والألعاب المعروفة التي تستخدم هذا النمط هو ألعاب ماريو وسونيك وغيرها بالإضافة إلى الألعاب الجديدة على منصات الهواتف المحمولة وهذه بعض الأمثلة Random Heroes 2 Sword Of Xolan وقد اشتهرت مؤخرًا هذه الرسمات كثيرًا في رسم الوجوه التعبيرية (سمايلات) وخصوصًا في رسم الأيقونات التي تعتمد بشكل كبير على هذا النوع من الرسومات وبخاصة أيقونات مواقع الإنترنت. ولتوضيح الفرق بين نوعي فن البيكسل إليك هذا المثال Non-Isometric Isometric وسنتعلّم في الدرس التالي كيفية تصميم رسومات بفن Pixel Art بنوعية Non-Isometric وكذلك في الدرس الذي يليه سنتعلّم كيفية تصميم نوعية Isometric. مصادر الصور: صور المصممين من صفحاتهم على Behance. صورة التلفاز التوضيحية من موقع ويكيبيديا تحت رخصة CC BY-SA 3.0.

سنتعلّم في هذا الدرس كيفية استخدام تقنيات رسم الأشكال المختلفة وأساليب التلوين والكتابة والأنماط المختلفة في برنامج الإليستريتور لتصميم شعار خيالي لمدينة دبي. سنرسم رموزًا تعبيرية لأهم معالم المدينة بالإضافة إلى وضع بعض الأنماط على اسم المدينة وإدراج صور شعارات المدينة السياحية والدولة. افتح برنامج أدوبي إليستريتور وأنشئ مستندًا جديدًا بأبعاد 1600x1200، سنعتمد هذا الشعار للويب لذلك سندع نظام الألوان RGB والدقة 72ppi. استخدم أداة رسم الأشكال البيضوية وارسم دائرة مثالية مع الاستمرار بالضغط على مفتاح Shift أثناء سحب الشكل للمحافظة على تساوي الأبعاد وبالتالي الحصول على دائرة مثالية. اجعل حجم هذه الدائرة يغطي النصف الأعلى من لوح الرسم. استخدم أداة رسم المنحنيات Arc Tool وارسم قوسًا يبدأ من النقطة اليسرى للدائرة وينتهي في أسفل لوح الرسم بالتوازي مع منتصف الدائرة. لتتمكن من القيام بذلك بدقة وسهولة قم بتفعيل الأدلّة الذكية من الاختصار Ctrl+U واتبع الخطوط الخضراء التي ستقدّم لك المساعدة في الحصول على المطابقة أثناء الرسم. انقر بالزر الأيمن للفأرة على القوس واختر القائمة Transform > Reflect ومن نافذة Reflect اختر الخيار العمودي Vertical ثم انقر على زر COPY للحصول على نسخة معكوسة من القوس عموديًّا. حرّك النسخة الجديدة مع الاستعانة بالأدلّة الذكية إلى الجهة المقابلة من التصميم. استخدم أداة القلم Pen Tool لرسم الشكل التالي اعتبارًا من منتصف الدائرة تقريبًا. كرّر العملية السابقة لإنشاء نسخة معكوسة عن هذا الشكل وحرّك تلك النسخة إلى مكانها الصحيح في الجهة المقابلة. حدّد كلا الشكلين وافتح لوحة Pathfinder ثم اختر الخيار Unite لدمج هذين الشكلين في شكل واحد. استخدم أداة النص Text Tool لكتابة عبارة "مدينة دبي" مع مراعاة الحجم الكبير المتناسب مع حجم الشعار. اختر خطًّا عريضًا، أنا اخترت هنا خط Motken Noqta II. والآن استخدم مجدّدًا أداة القلم لرسم هذا الشكل أيضًا بذات الطريقة أسفل اسم المدينة. كرّر العملية ذاتها من إنشاء نسخة معكوسة وحرّكها إلى موضعها الصحيح ثم أدمج الشكلين معًا في شكل واحد. سنبدأ الآن برسم معالم المدينة، وسيكون برج خلفية أعلى برج في العالم أول ما سنبدأ به. استخدام أداة القلم لرسم شكل تخطيطي تقريبي يشبه البرج. وضعه فوق النصف العلوي من الدائرة. ارسم الآن باستخدام أداة القلم أيضًا شكلًا يمثّل انعكاس الإضاءة داخل شكل البرج للجهة اليسرى. لوّن شكل البرج الأساسي بلون أسود وأبقِ الشكل الداخلي باللون الأبيض. سنرسم الآن شكلًا رمزيًّا لفندق برج العرب. استخدم أداة القلم لرسم الخطوط الخارجية لشكل الفندق الخارجي. ويجب أن يكون أقصر من شكل برج خليفة. زِد حجم الحدود من لوحة الحدود Stroke واجعلها 8 ثم ارسم شكل انعكاس الإضاءة في الجزء الأيسر من المبنى أيضًا مع رسم الشكل العلوي المميز للفندق، وارسم شكلًا بيضويًّا مضغوطًا في الأعلى يمثّل مهبط الطائرات. لوّن شكل الفندق بالأسود وشكل الإضاءة بالأبيض. استمر بذات الطريقة والأسلوب وارسم أشكالًا إضافية تمثّل أهم مباني ومعالم المدينة الأخرى. يجب الانتباه إلى توافق الارتفاعات بشكل متناسب مع الواقع إلى حد ما، كما يجب التنبّه إلى المحافظة على وحدة جهة انعكاس الإضاءة لجميع المباني. حدّد شكل الشريط الملتوي العلوي واذهب إلى لوحة الحدود Stroke ثم زِد حجم الحدود لنحو 12. لوّن هذا الشكل باللون الأسود. أنشئ نسخة عنه وصغّر حجمها قليلًا واجعل لونها أبيض واستخدم أداة التحديد المباشر Direct Selection Tool لتحريك النقاط السفلية من الجزء العلوي من الشريط للداخل قليلًا لمنح شعور وجود ظلال كثيفة أسفل الشكل العام للشريط. زِد حجم الحدود بذات الطريقة والقيمة للشريط السفلي. سنقوم بإنشاء ظلال بطريقة مختلفة هذه المرّة وذلك لتتعلموا كيفية استخدام الطرق المختلفة للقيام ببعض الأمور. حدّد شكل الشريط واذهب للقائمة Effect > Stylize > Drop Shadow نحن بصدد تصميم شعار مسطّح لذلك لا نريد استخدم أية توهّجات حول الأشكال أو ظلال متلاشية لذلك اجعل قيمة Opacity عند 100% وقيمة Blur عند 0، وبما أننا جعلنا ظلال الشريط العلوي للأسفل تحديدًا فيجب علينا أن نطبّق التناسق بين عناصر التصميم لذلك اجعل قيمة المحور x عند 0 وقيمة المحور y عند 10، وسيكون اللون هو الأسود. سنقوم بتجهيز النص الآن. كبّر حجم الخط للنص إلى 175. انقر على زر Warp لتفتح خيارات التحويل الخاصة به. اختر من قائمة Style الخيار Bulge ثم ضع الخيار Bend عند -6%. حدّد النص واذهب إلى القائمة Object > Path > Offset Path ضع القيمة 8 عند خيار Offset واضغط OK. ألغِ تجمّع الشكل الجديد عبر الزر الأيمن للفأرة والخيار Ungroup ثم حدّد الشكل الإضافي الأكبر من النص الأصلي ولوّنه بلون مختلف وبدون لون للحدود. لوّن النص الأساسي باللون الأبيض والحدود بالأسود وزِد حجم الحدود لإبرازها. ارسم هذا الشكل فوق النص السفلي من النص. يمكنك رسم هذا الشكل باستخدام أداة القلم أو باستخدام رسم مستطيل والتعديل عليه للوصول إلى هذا الشكل. أنشئ نسخة عن الشكل الأساسي للنص عبر Ctrl+C للنسخ وCtrl+F للصق ثم حدّد النسخة الجديدة مع الشكل الأسود الذي يغطي نصف النص السفلي واختر Intersect من لوحة Pathfinder. لوّن الشكل الجديد بلون رمادي فاتح. الشكل العام للشعار بدأ يتضّح أكثر فأكثر. لوّن الدائرة بتدرج لوني من الأزرق إلى البرتقالي الفاتح. ارسم شكلًا هندسيًّا بنمط فن الأرابيسك الذي يرمز إلى الأصالة العربية والإسلامية للمدينة. يمكنك تعلّم كيفية رسم مثل هذه الأشكال من درس فن الأرابيسك. سنقوم الآن بدمج أشكال الشعار الخارجية والتي تتضمن الدائرة والقوسين. حدّد جميع هذه الأشكال ثم انقر بزر الفأرة الأيمن واختر Join وبذلك سيتم وصل القوسين وتشكيل شكل موّحد يتضمن ما بينهما. حدّد الدائرة والشكل الجديد ثم انقر على خيار Unite من لوحة Pathfinder ليتم توحيد جميع هذه الأشكال ضمن شكل واحد. لوّن الشكل الكلي بتدرج لوني مطابق للتدرج المستخدم من قبل. أصبح هذا الشكل فوق شكل الأرابيسك لذلك اختفى نموذج الأرابيسك ولاستعادته قم بإرسال الشكل الكلي الجديد للخلف عبر النقر بالزر الأيمن للفأرة واختيار القائمة Arrange > Send to Back أضِف حدودًا سوداء للشكل الكلي الجديد وبحجم 10pt. استخدم أداة التحديد المباشر Direct Selection Tool واختر النقطة السفلية للشكل وحرّك للأعلى لتضغط الشكل عموديًّا. ومن شريط خيارات الأداة في الأعلى اختر من قسم Convert الزاوية الحادة. أضِف مستطيلًا مستدير الزوايا من خلال استعمال أداة رسم المستطيلات مستديرة الزوايا وضعه في منتصف الشريط السفلي بشكل يمتد من أعلى وأسفل الشريط. لوّنه باللون الأبيض وأضِف له حدودًا مطابقة لحدود الشريط باللون الأسود. احصل على شعار دبي السياحي من البحث في الإنترنت من أحد المصادر المجانية ثم أدرجه داخل المستطيل الأخير. أضِف نصًّا جديدًا بلون أسود وبخط عادي عريض واكتب عبارة " تأسست 1833 " ثم اجعل النص منحنيًّا بذات انحناءة الشريط وضعه داخل الشريط السفلي وعدّل الحجم بما يتناسب مع حجم الشريط. والآن أضِف نصًّا جديدًا "مدينة المستقبل" وضعه بإعدادات متناسبة ضمن الشريط العلوي مع وضع ثلاثة نجوم على كل من طرفي الشريط. استخدم أداة القلم لرسم زاويتي إشعاع بيضاء أسفل شكل الشعار الكلي. احصل على شعار دولة الإمارات وأدرجها في المساحة الفارغة في أسفل شكل الشعار الكلي. هذا هو شكل الشعار النهائي ويمكن إنشاء شعارات لمدن أخرى على ذات النمط والأسلوب مع تغيير رموز معالم المدن وشعاراتها. ومع تعديل الألوان وإلغاء التدرجات اللونية سنجعل الشعار مسطّحًا بالكامل ونجعله بنمط مختلف، طبعًا لكل منّا أسلوبه التصميمي المميز وقد يضطر المصمم إلى إجراء الكثير من التعديلات بما يتناسب مع رغبة العميل أو الرؤية العامة للمشروع الذي يعمل عليه.

إن مصطلح Polygons أي المضلعات معروف لدى مصممين الرسوميات (الجرافيك) وخصوصًا لدى مصممي الرسومات ثلاثية الأبعاد حيث يتألف سطح المجسم ثلاثي الأبعاد من مجموعة من الأشكال المضلعة أو ما يعرف بالمضلعات، وكلما زاد عدد المضلعات ازدادت نعومة سطح المجسم وأصبح أكثر دقة وواقعية. ولكن في عالم التصميم ثنائي الأبعاد كالصور الفوتوغرافية وتصاميم الرسم فإن هذا المصطلح يستخدم كأحد فنون التصميم مثل فن Pixel وفن WPAP وغيرها من فنون التصميم، فن التصميم المعروف باسم Low Poly أي المضلعات الخفيفة أو القليلة هو فن يعتمد على رسم تصاميم مؤلفة من أشكال مضلعة متلاصقة ومتجاورة لتشكيل لوحة فنية، أو تحويل صورة فوتوغرافية إلى مجموعة من المضلعات المتلاصقة والمتناسقة بالأشكال والألوان للحصول على لوحة فنية متميزة، ويعتبر فن التصميم WPAP ART أحد فروع فن Low Poly إلا أنه يختلف عنه من حيث استخدام ألوان عشوائية مختلفة غير متناسقة مع الصورة الأصلية ولذلك يعتبر WPAP ART فنًا تجريديًا. في هذا الدرس سنتعلّم الأسلوب التقليدي لتحويل صورة فوتوغرافية إلى لوحة مضلعات خفيفة Low Poly بشكل مبسّط وسريع وذلك عبر رسم عدد مخفّف من المضلعات وذلك لسهولة وصول الفكرة الأساسية لهذا الفن. هناك بعض البرامج والمرشحات (الفلاتر) وحتى بعض مواقع الإنترنت التي تقوم بتحويل الصور بشكل تلقائي إلى لوحات مضلعات خفيفة، ولكن الرسم اليدوي يمنح التصميم جمالية وأناقة أكثر حيث لا تستطيع هذه البرامج التلقائية التركيز على التفاصيل المهمة والمميزة لكل صورة ما يُفقدها رونقها وميزتها الحقيقية، لذلك لا أنصح باستخدام هذا الأسلوب لتحويل الصور، بل على المصمم الحقيقي الاعتماد على نفسه لإنشاء تصاميمه حتى يضع أسلوبه الخاص وبصمته على جميع التصاميم التي يعمل عليها. سنبدأ أولًا باختيار الصورة التي سنقوم بتحويلها، أنا اخترت هنا صورة هذه القطة الرمادية. يمكن القيام بهذه التصاميم بأي برنامج تصميم سواء أكان برنامج تصميم نقطي أو فكتور، ولكننا في هذا الدرس سنتعلّم القيام بهذا التصميم باستخدام برنامج أدوبي إليستريتور. افتح برنامج الإليسترتيور وأنشئ مستندًا جديدًا بأبعاد 1280 في 874 وهو نفس حجم صورة القطة. ولإدراج صورة القطة داخل لوح الرسم اذهب إلى القائمة File > Place… أو عبر الاختصار Shift+Ctrl+P. ثم أدرج الصورة بحيث تملأ كامل مساحة لوح الرسم. افتح لوحة الطبقات من خلال الاختصار F7 ثم أنشئ طبقة جديدة، ومن ثم سنبدأ برسم المضلعات عليها. قم بقفل طبقة الصورة الأساسية للقطة حتى لا تتأثر أثناء عملية الرسم. الفكرة الأساسية في رسم هذه النوعية هي التناظر، لذلك سنقوم برسم نصف الصورة فقط ثم سننسخ ذلك النصف ونعكس النسخة الجديدة ونضعها في الجهة المقابلة للحصول على تصميم متناظر، كما أن هذه الطريقة تختصر الوقت بحيث سنرسم نصف الصورة فقط، بالإضافة إلى أن صورة الحيوانات وحتى البشر عادة ما تكون متناظرة بطبيعة الحال. لذلك سنقوم برسم دليل يقسم الصورة إلى نصفين، اضغط على الاختصار Ctrl+R لإظهار المساطر على جانبي التصميم إن لم تكن موجودة أصلًا ثم اسحب من المسطرة الجانبية دليلًا وضعه في منتصف الصورة تمامًا بحيث تقسمها بشكل متناظر إلى نصفين قدر المستطاع. في حال لم تكن الصورة مستقيمة عموديًّا فيمكنك رسم خط مائل يقسم الصورة إلى نصفين متناظرين ومن ثم تحويله إلى دليل. اختر أداة القلم Pen Tool وألغِ لون التعبئة واختر لونًا للحدود كاللون الأبيض مثلًا ثم اختر نقطة لتبدأ منها. أنا اخترت الأنف للبدء برسم مضلع. عادةً ما تكون تصاميم المضلعات مؤلفة من مثلثات على الغالب ولكن تتخلل هذه التصاميم بعض الأشكال المضلعة التي تتألف من عدد أكبر قليلًا من الأضلاع إلا أن العدد يجب أن يبقى قليلًا، كلما زاد عدد الأشكال المضلعة كلما زادت جمالية التصميم. كبّر منظور العرض بحيث تركّز على الأنف ثم ارسم مثلّثًا حول الجزء العلوي من الأنف. المهم في رسم الأشكال المضلعة هو التركيز على اختلاف الألوان والظلال ودرجات اللون الواحد بحيث يجب أن تحاول قدر الإمكان حصر كل لون وكل درجة لونية متقاربة في مضلع خاص به. ارس مثلثات ومضلعات لباقي شكل نصف الأنف بناءً على هذه القاعدة. سنقوم بتلوين هذه الأشكال الآن عبر اختيار لون من أصل اللوحة وهي الصورة الأساسية، لذلك سنحتاج إلى استخدام أداة القطّارة Eyedropper Tool من شريط الأدوات أو عبر الضغط على مفتاح I من لوحة المفاتيح وكذلك أداة التحديد Selection Tool عبر الضغط على مفتاح V من لوحة المفاتيح، بحيث نضغط V أولًا لتحديد المضلع المراد تلوينه ثم نضغط على I لاستخدام القطارة واختيار اللون العام الذي يمثّله ذلك المضلّع من أرضية الصورة الأساسية، ومن ثم الانتقال إلى المضلع التالي وهكذا... . من المهم الانتباه لعدم تلوين مضلعين متجاورين بلونين متماثلين أو متقاربين جدًّا وإلا سيبدو المضلعان مضلعًا واحدًا. قم بإخفاء طبقة الصورة الأساسية الخلفية من لوحة الطبقات وذلك بإزالة إشارة العين من جانب تلك الطبقة لتبقى الخلفية البيضاء الافتراضية مع طبقة المضلعات فوقها. يمكنك الاطلاع على كيفية ظهور التصميم في كل حين للتأكد من الشكل العام ومن الاختيار الصحيح للألوان وتصحيح الأخطاء. قد تظهر بعض الفجوات بين المضلعات وذلك أمر طبيعي بسبب الرسم اليدوي التقريبي غير الدقيق لذلك سنقوم بتصحيح هذه المشكلة. الأفضل القيام بالتدقيق في هذه المسألة بعد رسم مجموعة قليلة من المضلعات لسهولة البحث عن الفجوات في منطقة صغيرة نسبيًّا. انتقل إلى نمط الخطوط الخارجية Outline عبر الضغط على الاختصار Ctrl+Y أو من القائمة View > Outline لتظهر لك الخطوط الخارجية لأشكال المضلعات. اختر أداة التحديد المباشر Direct Selection Tool من شريط الأدوات أو من خلال الاختصار A ثم ارسم تحديدًا حول مجموعة النقاط المتباعدة بين المضلعات والتي تُشكّل الفجوة لتقوم بتحديد هذه النقاط. يمكنك الذهاب إلى لوحة المحاذاة Arrange والقيام بمحاذاة النقاط عموديًّا وأفقيًّا مع بعضها لتجعلها متطابقة أو اختصار ذلك بالذهاب إلى القائمة Object > Path > Average… أو بطريقة أسرع، استخدم الاختصار Alt+Ctrl+J لتفتح صندوق Average. يمكنك اختيار المحاور الأفقية أو العمودية وفي هذه الحالة سنختار كليهما من الخيار الثالث والأخير Both ثم اضغط OK. تمت مطابقة النقاط المحدّدة مع بعضها لتصبح في الموضع ذاته وبذلك تم حل مشكلة الفجوة. عُد مجدّدًا إلى النمط الطبيعي عبر الضغط مجدّدًا على الاختصار Ctrl+Y لتشاهد اختفاء الفجوة. تابع رسم المضلعات انطلاقًا من النقطة التي انتهينا عندها مع مراعاة فوارق الألوان والدرجات اللونية والعناصر الأساسية في الصورة كالأنف والعين. قم بتلوين المضلعات الجديدة بنفس الأسلوب التي اعتمدناه سابقًا مع تجنّب اختيار ألوان متطابقة للمضلعات المتجاورة. في بعض الأحيان قد يَصعُب تحديد بعض المضلعات ما يمنعنا من تلوينها كما حصل في هذه الحالة هنا. ولحل هذه المشكلة افتح لوحة الطبقات ثم انقر على السهم المجاور لاسم الطبقة لتفتح لك قائمة بجميع المضلعات المرسومة. ابحث عن المضلعات غير الملونة وانقر عليها لتقوم بتحديدها وتستطيع تلوينها. تابع رسم باقي المضلّعات لبقية الصورة. قم بتلوينها بذات الطريقة المتّبعة في السابق. وكما جرت العادة سنقوم بعد رسم مجموعة من المضلعات بالانتقال إلى وضعية الخطوط الخارجية Outline بالاختصار Ctrl+Y وذلك لإزالة الفجوات بين المضلعات. ومجدّدا استخدم أداة التحديد المباشر Direct Selection Tool لتحديد مجموعة النقاط المتجاورة والتي بينها مسافة تسبب ظهور الفجوة. وأيضًا بالاختصار Alt+Ctrl+J سنقوم بدمج موقع هذه النقاط في نقطة مركزية موحّدة. لنحصل على نقطة واحدة وتختفي الفجوة. ونعود للنمط الطبيعي بالضغط مجدّدًا على Ctrl+Y لنشاهد النتيجة. سنضطّر أحيانًا للقيام بعمليات دمج متكرّرة لنقاط متجاورة بحيث قد تظهر فجوات جديدة بسبب محاولة إخفاء فجوات أخرى لذلك يجب التدقيق بشكل دائم في كافة أنحاء التصميم والتحقق من عدم وجود الفجوات. وبعد التخلص من جميع الفجوات سيظهر التصميم بهذا الشكل. للحصول على النصف الآخر علينا بتحديد جميع الأشكال المضلعة المرسومة ثم القيام بنسخها Ctrl+C ومن ثم إنشاء طبقة جديدة من لوحة الطبقات وبعدها لصق النسخة الجديدة فوق الطبقة الجديدة عبر الاختصار Ctrl+F. اضغط على النسخة الجديدة بالزر الأيمن للفأرة واختر القائمة Transform > Reflect أو حدّد النسخة الجديدة بالكامل واذهب إلى القائمة Object > Transform > Reflect اختر من النافذة المنبثقة الخيار العمودي Vertical ثم اضغط OK. حرّك هذه النسخة الجديدة المعكوسة بمفاتيح الأسهم أو بالفأرة مع الاستمرار بالضغط على مفتاح Shift وذلك للمحافظة على المحاور أثناء التحريك وضعها في الجهة المقابلة للنسخة الأصلية. وبعد التحقّق من موضع النسخة الجديدة سيبدو التصميم بهذا الشكل. والآن سنرسم بعض التفاصيل المهمة والتي ستضفي رونقًا خاصًّا على التصميم. افتح لوحة الطبقات ثم أنشئ طبقة جديدة وأخفِ طبقتي نصفي الوجه وأظهِر طبقة الصورة الأساسية. ارسم أشكالًا مضلعة فوق الخطوط الداكنة على وجه القطة بالإضافة إلى بؤبؤ العين. لوّن هذه المضلعات بالألوان الموجودة أصلًا على الصورة الأساسية بنفس الطريقة المُتّبعة سابقًا في هذا الدرس. وبذات الطريقة قم بنسخ هذه الأشكال ولصقها في طبقة جديدة ثم اعكسها وضعها في الجهة المقابلة. أنشئ طبقة جديدة وارسم عليه مضلعات طويلة ورقيقة فوق شعر شارب القطة ولوّنها باللون المشابه للون شوارب القطة. ثم انسخها أيضًا واعكسها وضعها في الجهة المقابلة. الشكل النهائي يبدو جميلًا ولكنه بعدد مضلعات خفيف جدًّا ومن الممكن زيادة عدد المضلعات وأن يكون أغلبها مثلثات للحصول على تصميم متميّز حيث توجد تصاميم ذات عدد مضلعات كبير وأخرى قليلة.