لوحة المتصدرين

ارتفاع أعداد السُكان ونمو توجّهاتهم الاستهلاكيّة أدى إلى خلق تنافس رهيب على مستوى العالم بين الجهات المُصنِّعة المُنتِجة التي عملت -ولا تزال- على إغراق الأسواق بألوان مُختلفة من السّلع والخدمات. أدرك مُدراء التّسويق في تلك الشركات أهميّة الرّسائل التّسويقيّة المُناسبة، إضافة إلى تكاملها مع التّصميم الجيّد كعامل أساسي في جذب المُستهلكين ودفعهم إلى شراء المُنتجات، سواء كان شكل هذه الرّسالة على هيئة تغليف مصحوب بتصميم مُميّز للمُنتج أو على هيئة هويّة مُناسبة "Brand" أو إعلان لاصق "Poster" أو غلاف مجلة "Cover" أو غيرها. إنّ عملية الإخراج الفنّي للتّصميم يجب أن تتكامل مع إخراج طباعي جيّد للوصول إلى أفضل النتائج، فوجود تصميم جاهز مُميّز وجذّاب معروض على شاشة الحاسب لا يعني بالضّرورة أن يظهر بنفس النّتيجة عند وبعد الطّباعة. سنتناول في هذا المقال (والمقال الذي سيليه) المفاتيح الأساسية للدّخول إلى عالم التّصميم الطّباعي والتي يجب على أي مُصمّم أن يكون على دراية بأساسيّاتها. ما هو التّصميم الموجّه للطّباعة؟ندعو أي تصميم بأنه موجّه للطّباعة لمّا تكون نتيجة عرضه النّهائية على شكل حسّي مطبوع، وتندرج تحت هذا المفهوم جميع التّصاميم المُتعلّقة بالمُنتجات وتغليفها، وجميع التّصاميم الإعلانية المطبوعة كالجرائد والمجلّات واللّوحات الطُرقية، والتّصاميم التّرويجية المطبوعة كالمُلصقات الإعلانيّة " Posters" والمطويّات "Brochures" وبطاقات العمل "Business Cards" والأغلفة المُتنوّعة "Covers" ... الخ. لماذا نظام اللون CMYK في التّصاميم المُوجّهة للطّباعة وما هو الفرق بينه وبين RGB؟ ببساطة، يُمكن القول بأن CMYK هو اختصار لمزيج لوني مُؤلّف من الألوان التّالية: السّماوي Cyan – الأحمر الأرجواني Magenta – الأصفر Yellow - والأسود Black، ويُستخدم هذا النّظام مع الطابعات الكبيرة الأوفسيت Offset والطّابعات الرقميّة المُتطوّرة، بحيث نقول بأن الطّابعة ذات أربعة رؤوس كِناية عن الألوان الأربعة CMYK. لذا فعند طباعة المُلصقات الإعلانيّة " Posters" والمطويّات "Brochures" وبطاقات العمل "business Cards" وما شابهها نقوم بفرز التّصاميم وفق هذا النّظام. بينما النّظام الثاني RGB أو ما نُعبِّر عنه تجاوزًا بنظام "ألوان الشّاشة" فهو قائم على مزيج لوني مُؤلّف من الألوان الأساسية التّالية: الأحمر Red – الأخضر Green – الأزرق Blue، وهو يُستخدم مع أي تصاميم تُعرض على شاشة الحاسب كتصاميم المواقع الإلكترونيّة. إضافة إلى ذلك، هُناك طابعات منزليّة بسيطة من النوع Ink Jet تستخدم هذا النّظام من الألوان. لمحة سريعة للتعرف على أنواع الطّباعة والطابعات:تعدّدت منذ الأزل أشكال الطّباعة، وسنتحدّث بإيجاز عن أشهر التّقنيّات الطّباعية المتوفّرة حاليًّا والخاصّة بطباعة التّصاميم الإعلانيّة والترويجيّة والتّصاميم الخاصّة بالمُنتجات وتغليفها، والتي يتوجّب على المُصمّم أن يكون على اطّلاع على أساسياتها على الأقل. الطّباعة بالأوفسيت Offset: تُعدّ أشهر أنواع الطّباعة التّجاريّة في الوقت الحالي، وهي تعتمد مفهوم الطّباعة على اللوح Indirect Offset Lithography، ومن أهم مُميزاتها سهولة إعداد ألواح الطّباعة والأمان في نقل أدقّ التّفاصيل إلى المادّة المُراد الطّباعة عليها، كونها تقوم على تقنيّة طباعة أربع مسودات "أفلام طباعيّة " طبقًا للألوان الأربعة CMYK عبر ماكينة خاصّة بفرز الألوان، ثُم يتم طباعة المسوّدات على صفيحة معدنيّة "Plate" لتأتي بعدها عمليّة الطّباعة على المكنة. وتتميّز تقنيّة الطّباعة بالأوفسيت بإمكانية الطّباعة على مُختلف السّطوح والمواد كالورق والخشب واللّدائن والأقمشة وغيرها. الطّباعة الرقميّة Digital: تقوم على مبدأ أساسي وهو الطّباعة مُباشرة من الحاسب، مُستبعِدة الخطوات الميكانيكية التي تقوم عليها الطّباعة بالأوفسيت Offset، والتي ذكرناها آنفًا، وبالتّالي فإن الطّباعة الرّقميّة أسرع من سابقتها وتتميّز بإمكانية طباعة كمّيّات قليلة مع مرونة أكبر في إجراء تغييرات على كل طبعة. البرامج التصميميّةهُناك العديد من البرامج التّصميميّة المُتخصّصة، ولعل أهمها وأشهرها البرامج الصّادرة عن شركة Adobe، وسنشمل حديثنا باقة مُتكاملة بالإمكان استخدامها طبقًا للغرض المطلوب: Adobe illustrator ملك الرّسم الشُّعاعي عالي الدقة، أو ما يُدعى أدوبي إليستريتور، يُعدّ من أهم البرامج في مجاله، ويتميّز بدقّته العالية مهما صغرت أو كبرت تفاصيل العمل، وهو يُكامل بشكل مُمتاز باقي برامج شركة Adobe وعلى رأسها Photoshop. Adobe Photoshop من أشهر برامج التّصميم حول العالم، ويُعد الأفضل على الإطلاق فيما يخصّ الرّسوميات والصّور. إن تكامل العمل بين برنامجيّ فوتوشوب وإليستريتور كافٍ لجعل أيّ تصميم الأفضل من ناحيّة الرّسوميات والخطوط الفنّيّة من جهة والدّقة من جهة أخرى، ويُمكن استخدام أيّ منهما لوحده بحسب نوع العمل المُنفّذ. Adobe InDesign يُعدّ من أشهر وأهم البرامج للتّصميم والتّنسيق السّريع للمجلّات والجرائد والكتب الإلكترونية والمطبوعة، بحيث يحوي أدوات ومساحات عمل تُساهم في إنجاز أعمال احترافية خلال أوقات قصيرة نسبيًّا، ويُستخدم البرنامجُ في أقسام التّصميم لدى أهم المجلات والجرائد حول العالم. مُلاحظة: تتوفّر العديد من البرامج التّصميميّة التي تُعدّ جيدة وخيارات بديلة، وبعضها قد يكون بقوّة برامج شركة Adobe آنفة الذّكر، ولعل أهمّها تلك البرامج الصادرة عن شركة Corel المرموقة كبرنامج CorelDRAW المُتخصّص بالرّسوميات عاليّة الدقة، إضافة إلى برنامج Painter الصّادر عن ذات الشركة والمُتخصّص بالرسم الفنّي الاحترافي، إضافة إلى برامج صادرة عن جهات أخرى نذكر منها inkscape و Gimp مفتوحي المصدر. سبب تركيزنا على برامج Adobe هو كونها شائعة ولتكامُلها وتلبيتها الغرض من جهة، واعتمادها كبرامج عمل وتركيب montage أساسيّة من جهة أخرى، حيث أن مُعظم المطابع تُفضّل استلام ملفّات جاهزة للطّباعة بصيغ أحد برامج Adobe. التحضير الصحيح لمساحات العملالبداية الصّحيحة لأيّ تصميم مُوجّه للطّباعة تكمن في التّحضير الصّحيح لمساحات العمل والذي يقوم على الإجراءات الأساسية التّالية: 1- اختيار برنامج التّصميم الأفضل طبقًا لنوع العمل. 2- وضع نظام الألوان CMYK، واختيار المقاسات المُناسبة طبقًا لنوع التّصميم، واستخدام الدقة 300 dpi. 3- التّرتيب "مُهم" يُبعد التّشتّت ويزيد الإنتاجيّة: إن البداية الصّحيحة والترتيب الأنيق لأيّ عمل تصميمي سيجعل العمل سلسًا ومُمتعًا بشكل أكبر ويزيد من الإنتاجيّة للمُصمّم، كما أنّه سيساعد المطبعة أيضًا ويُقلل من عدد الأخطاء التي قد تظهر، لذا لا تغفل أبدًا عن ما يلي: - قُم بتسمية العمل بشكل واضح بجميع أجزاءه، وبالأخص إن تنوّعت المُنتجات أو تعدّدت الصّفحات. - اختر مقاسات سليمة واضحة. - رتّب الطبقات "Layers" ضمن مجموعات من المُجلّدات بشكل مُناسب واستخدم ألوان إيضاحيّة لذلك. 4- ضع هوامش مُناسبة على حواف التّصاميم المُوجهة للطّباعة (تمديدات لونيّة على الأطراف وليس نصوصًا) وذلك بسبب وجود احتمال تحرك مكنة القص (القاطعة – Cutting Machine) قليلاً بعد الطّباعة، ويُفضّل عادة استخدام هوامش بمقدار 1 سم كمسافة أمان "Safe Zone". (لاحظ الصورة) 5- لا تعتمد على ذاكرتك أبدًا، ووثّق كل شيء بدقّة وبخاصّة المعلومات الرّئيسيّة التي لها علاقة بالفرز وأي معلومات مُهمّة ستكون عُرضة للنّسيان مع مرور الوقت. مقاسات أشهر القوالبتذكّر بأنّه في عالم الطّباعة والتّصميم الطّباعي لا تُوجد مقاسات مُحددة للتقيّد بها، إنما بالإمكان على الدّوام ابتداع أفكار خلاّقة حسب الطّلب والحاجة. على سبيل المثال: - بطاقات العمل "Business Cards": عُرفت عادة بالمقاس 90 ملم للعرض و55 ملم للارتفاع، إنّما قد تجد أحد دور الأزياء الفاخرة قد اعتمدت نصف المقاس التقليدي المُتعارف من باب تحقيق نعومة أكثر للبطاقة. - المطويات "Brochures": كوجود إضافات مُعيّنة أو حواضن بداخلها لوضع البطاقات، أو وجود أحرف غير مُضلّعة، إضافة إلى أفكار كثيرة أخرى. وعلى سبيل الذكر فإننا نوضح لكم المقاسات العالميّة المُتعارف عليها على النّحو التّالي: أولاً: المقاسات العالميّة للتصاميم الدعائية والمُغلفاتالنوع العرض الارتفاع الوحدة الدّقة مطويّة Brochure 300 500 mm 300 dpi مطويّة صغيرة 95 210 mm 300 dpi بطاقة عمل Business Card 90 55 mm 350 dpi مُفكّرة Note book 75 115 mm 350 dpi كُتيّب booklet 120 170 mm 300 dpi علبة أسطوانة CD Box 240 (مقسومة من المنتصف) 120 mm 300 dpi ثانياً: المقاسات العالميّة للورق هذه المقاسات مُعتمدة من طرف الطابعات، وتُنفّذ بموجبها المُلصقات الإعلانيّة Poster والمطوياتBrochures عادة: النّوع العرض الارتفاع الوحدة الدّقة A4 210 297 mm 300 dpi A6 105 148 mm 300 dpi A5 148 210 mm 300 dpi A3 297 420 mm 300 dpi نصيحة: اجعل أدوات القياس حاضرة بجانبك، واطّلع على أي تصاميم مُشابهة لأيّة أعمال تودّ تنفيذها قبل البدء للاستلهام من جهة واستعراض المقاسات على الواقع من جهة أخرى. خلاصةكُنا معكم في مُقدّمة موجزة حول الأمور التي يجب ألّا يغفلها أي مُصمّم يسعى للانطلاق في مجال تنفيذ التّصاميم المُجهّزة للطّباعة أو لإثراء معلوماته في هذا الجانب. عرّجنا على أشهر الطّابعات التّجاريّة المُستخدمة مع أهم البرامج التّصميميّة في مجالها وطرق التّحضير الصّحيح لمساحات العمل إضافة إلى تعريفكم بمقاسات أشهر القوالب الموجودة. سنكون سعداء بإثراء المقال بتعليقاتكم وإضافاتكم القيّمة.

يُعتبر التصميم الجرافيكي مجالًا واسعًا جدًّا، ومهمّة الحصول على وظيفة مصمّم جرافيك ليست بالسّهلة. فعملية الحصول على وظيفة على شبكة الإنترنت تتطلب، بالإضافة إلى المهارات التي يجب أن تكتسبها، سِمات شخصية كمقاومة الإجهاد، الإبداع، والحافز الذاتي. لكنّ الجزء العملي يُعتبر، وبشكل واضح، هو الجزء الأهمّ، وهو الذي يتمّ الحكم من خلالهِ حتّى قبل تقييم مهاراتك الشخصيّة. لذلك سنبدأ اليوم بسلسلة من المقالات التي تدور حول أساسيات التصميم الجرافيكي، وسنستعرض في هذا الجزء العناصر الأكثر شيوعًا في هذا المجال. إنّ وظيفة مصمّم الجرافيك الرئيسية هي تصميم عناصر مرئية يمكن استخدامها في شبكة الإنترنت أو لغرض الطباعة. كمثال على ذلك؛ مخططات المواقع (التي يتم تحويلها في أغلب الأحيان إلى مواقع حقيقية من قِبل مصممي المواقع)، الملصقات، الكُتيّبات، النشرات، أو الحملات الإعلانية (في كِلا من شبكة الإنترنت والواقع). توجد في المجموع ستّة عناصر خاصّة بالتصميم يجب أن تكون مُلمًّا بها: الخط، الشكل، اللون، الخامة، القيمة والمساحة. 1. الخط يتواجد الخط عادةً في كلّ تصميم، حتّى لو كان إطارًا مُصمَتًا بعرض 1 بكسل أو خطًّا منقّطًا بعرض 5 بكسل. تحتوي جميع مواقع الإنترنت على خطوط، لكن مع أسلوب التبسيط للحدّ الأدنى (يُعرف أيضًا بالتبسيطية أو التقليليةMinimalism ) الذي أصبح شائعًا في السنوات الأخيرة هنالك محاولة لمسح الخطوط من مخططات الصفحات، أو على الأقل تقليل استخدمها. يمكن أن تكون الخطوط طويلة، حمراء، مستقيمة، رفيعة، زرقاء، متقطّعة، قصيرة، سوداء، أو منحنية، لكن تندرج جميعها تحت نفس الفئة. تستخدم الخطوط في أغلب الأحيان لرسم الحدود بين أقسام التصميم، أو لتوجيه نظر المشاهد نحو وجهة معيّنة. تعمل الخطوط على خلق تأثيرات ووقوع بصريّة مختلفة. تجذب الخطوط السميكة، العريضة الانتباه بسبب قوّتها البصرّية، بينما يكون للخطوط الرفيعة تأثيرًا مختلفًا معاكسًا لذلك. كما إن الألوان لها وقعٌ أيضًا، فالألوان الداكنة تكون سهلة الرؤية وجذب الانتباه أكثر من الألوان الفاتحة أو الباهتة. وهذا ليس كلّ ما في الأمر. فنمط الخط يمكن أن يؤثّر أيضًا في طريقة رؤية المستخدم له. هذا النمط يمكن تحديده بسهولة خلال CSS، ويمكن أن يكون، من بين الأنماط الأخرى، مصمتًا، منقّطًا، ومتقطّعًا. الخطوط المصمتة لها تأثير مختلف عن تأثير الخطوط المنقّطة، لأنّ الأولى تكون بارزة بشكل أكبر. في أسلوب التبسيط للحد الأدنى الذي تحدّثنا عنه سابقًا يتمّ إما استخدام الخطوط المصمتة بشكل أقلّ أو استخدم الخطوط المنحنية بشكل أكبر لأنها تعطي مظهرًا حركيًّا وانسيابيًّا للتصميم، والذي يعتبر أيضًا هدف من أهداف هذا الأسلوب. وهذه الخطوط توحي بالطاقة، تُبقي المستخدم مهتمًّا، وإذا ما تمّ دمجها مع الرسوم الإيضاحية سيصبح لها قوة فعّالة أمام عين الإنسان. كانت للخطوط المصمتة شعبية كبيرة قبل سنوات عديدة لأنها تحدد أسلوب التصميم؛ متين، متماسك، ومنظّم. لكنّ مواقع الإنترنت تغيّرت في السنوات الماضية ولم يعُد هذا النمط ذو شعبية بعد الآن، خاصّةً في معارض الأعمال Portfolio التابعة للمصمّمين والصفحات الأخرى ذات الحاجة الكبيرة إلى اللمسة الشخصية. فصلت الخطوط بين العمودين، وهي ليست بالعريضة جدًّا. استُخدمت الخطوط المصمتة للفصل بين أجزاء مختلفة من الموقع. 2. الشكل الشكل، أو الهيئة، هو العنصر الثاني الأكثر استخدامًا في تصميم المواقع. وهو في الواقع عبارة عن خطوط مجموعة جنبًا إلى جنب بأشكال مختلفة. ما زالت الأشكال تحظى بشعبيّة، وسبب هذا يعود إلى الحاجة إلى إبراز شيء ما، والأشكال هي إحدى الطرق للقيام بذلك. قد تكون الأشكال دوائر، مربّعات، مستطيلات، مثلّثات، أو غيرها من الأشكال التجريدية، ومعظم التصاميم تحتوي على الأقل على واحد من هؤلاء. يتمّ استخدام العديد من هذه الأشكال في تصاميم التبسيط للحد الأدنى، لأنها في الغالب تقوم على أساس الرسوم الإيضاحية والمخطّطات. كما إنّ النمط القديم لتصميم المواقع تضمّن الأشكال أيضًا، لذلك بقيت ذات شعبيّة طوال الوقت، وعلى الأرجح ستستمرّ على هذا المنوال. الأشكال، حالها كحال الخطوط، مرتبطة بذهن الإنسان بطرق مختلفة. على سبيل المثال؛ الدوائر مرتبطة بالحركة والطبيعة، بينما يتم النظر إلى المربّعات على أنها تصاميم أساسية هيكلية. وكما هو الحال في الخطوط فإن لون، نمط، خلفية أو خامة الشكل يمكن أن تغيّر كلّيًّا الإدراك الحسّي للمُشاهد. في معرض الأعمال الخاصّ بفريد مايا أعلاه، تمّ استخدام الأشكال لإبراز الشعار والأعمال السابقة. 3. الخامات Textures لم تكن الخامات ذات شعبيّة منذ بضع سنواتِ مضت، لكنّها تميل إلى أن تصبح أكثر وأكثر استخدامًا. وقد حلّت محل (أو نافست، إذا استطعنا تسميتها منافسة) الخلفيات ذات اللون المفرد. قد تبدو الخامات شبيهة بالخلفيات ذات الألوان المصمتة، لكن عند معاينتها عن قرب، يمكن ملاحظة اختلافات صغيرة ولكنّها فعّالة. تتضمّن أنماط الخامات الورق، الحصى، الخرسانة، الطوب، الألياف، والعناصر الطبيعية، وما بين الألوان الباهتة أو الناعمة. ويمكن للخامات أيضًا أن تكون دقيقة أو بارزة، وأن تستخدم باعتدال أو بإسباغ؛ يمكنها أن تعمل مع أي شيء تقريبًا. من شأن الخامات أن تغيّر شكل الموقع كليّا حتّى وإن بدت غير مهمّة، فهي توفّر وقعًا بصَريًّا مختلفًا تمامًا. في معرض الأعمال الخاص بجيسون جوليان أعلاه، تم استخدام خامة ذات النمط البالي grunge. في هذه الصفحة تمّ استخدام خامة مختلفة عن الخامة في المثال الأول، تبدو هذه كدفتر رياضيات. 4. اللون قد يكون اللون هو العنصر الأكثر أهميّةً في التصميم لأنه يعطي التأثير البصري الأقوى في لمحة واحدة. اللون واضح ولا يحتاج إلى مهارات رسم أساسية لملاحظتها. فبينما تعني الخطوط والأشكال الشيء نفسه كما في الواقع، عدا المستويات الأكثر عمقًا، تعني الألوان الشيء نفسه بالضبط كما في الطبيعة. الألوان تخلق الأحاسيس؛ الأحمر هو العاطفة، الأزرق هو الهدوء، والأخضر هو الطبيعة. للألوان تأثيرٌ واضحٌ على عقولنا حتّى وإن لم نُدرك ذلك. تم إجراء الدّراسات حول هذا الموضوع، ووجِد أن الشخص الذي يعيش في بيئة حمراء يمتلك ضربات قلب ونبضًا أعلى من الشخص الذي يعيش في بيئة زرقاء. الدماغ البشري يرى ذلك ويؤثّر على بقية الجسد تِبَعًا لما يراه. لذلك من المهم معرفة نظرية الألوان، حيث لا يمكن للعديد من المصممين أن يدعوا أنفسهم بالخبراء في هذا المجال. أن تكون خبيرًا في الألوان هو الذي يصنع الفرق بين التصميم الجيّد والتصميم المذهل. لا نقول إنه يجب أن تعرف كل شيء، لكن معرفة كيفية عمل خصائص اللون معًا كالصبغة Hue، الإشباع Saturation، الظل Shade، المشيج Tint، الدرجة Tone، أو الصفاء Chroma لهو أمرٌ جوهريّ بالنسبة لمصمم الجرافيك. في موقع Feed Fever تم استخدام ألوان مختلفة للنصوص في محاولة لإبراز أهمية كل خط باختلاف دقيق. 5. القيمة لم نتحدّث عن القيمة Value في النقطة السابقة على الرغم من أنها مرتبطة بشكل وثيق بعنصر اللون، لأن القيمة هي أكثر عمومية وهي التي تحدّد كون التصميم داكِنًا أو فاتِحًا. كما أن القيمة لها تأثير على المزاج أيضًا، ولكن فقط في مستويات أعمق. إنّ فهمك لخصائص الألوان يأخذك إلى مستويات قريبة من الإتقان، ولكن معرفة عمل وتأثير القيمة يأخذك إلى مستويات أبعد من ذلك. التصاميم الفاتحة تعطي انطباعًا وشعورًا مختلفًا عن التصاميم الداكِنة، ولذلك تحتاج إلى عينيّ خبير لملاحظة الفرق واختيار الأفضل تبعًا لذلك. 6. المساحة للمساحات وطريقة استخدامها تأثيرٌ مهمٌّ جدًّا في التصميم. أصبحت "المساحات البيضاء" (تسمّى أيضًا المساحات السلبية) تستخدم بشكل واسع في الآونة الأخيرة، لأنها تسمح للعين بالقراءة بشكل أسهل. ولمن لا يعرف مصطلح "المساحة البيضاء"؛ لا نقصد هنا أنها مملوءة باللون الأبيض على وجه التحديد، ولكن كل مساحة ضمن التصميم مملوءة فقط بلون الخلفية. يمكنك رؤية العديد من الأمثلة أدناه لفهم أفضل لهذا المفهوم. إذا كان تصميم الصفحة يحتوي على العديد من المساحات السلبيّة فإن هذا يضفي إضاءةً وشعورًا منفتحًا. وبخلاف ذلك يصبح التصميم مبعثرًا وقديم الطراز. وبذلك يكون للمساحات تأثيرٌ مهمّ في الطريقة التي يُنظر بها إلى التصميم من قِبل العين البشريّة. المساحات في مقدمة عناصر التصميم المهمّة، حتّى وإن قلنا إن اللون قد يكون العنصر الأهم، لأن المساحات من السهل ملاحظتها من قِبل العين المبتدئة. كما يمكنها أن تحوّل التصميم لصالحك والحصول على أفضل النتائج لمخطط صفحتك. صفحة جوجل هي أبسط مثال على استخدام المساحات السلبيّة بكثرة. في موقع Site Inspire تمّ استخدام المساحات السلبيّة على الجوانب وجُمع بينها وبين فنون الطباعة المناسبة. الخلاصة كانت هذه هي العناصر الأساسية التي يجب على كل مصمّم جرافيك مبتدئ أن يعرفها. وبالاطلاع على هذه العناصر يمكنك أن تفكّر أكثر من وجهة نظر المستخدم وبالتالي تستطيع التصميم بأسلوب أفضل. لكن هذا ليس كلّ شيء، هنالك المزيد عن مبادئ التصميم سنتحدث عنها في مقالات قادمة -إن شاء الله-. ترجمة -وبتصرّف- للمقال: Graphic Design Basics Part 1: Elements لصاحبه: James Richman. حقوق الصورة البارزة: Designed by Freepik.

هل بدأت رحلتك في التصميم مؤخرَا؟ تشعر بالتخبط وبتدني المستوى، وتتمتع بمستوى من التصاميم أقل ما يوصف بالبشاعة؟! لا تقلق هذا طبيعي للغاية فأنت في مرحلة الاكتشاف وبداية تعلم مهارة جديدة، ولكن لأساعدك على تخطي تلك المرحلة في أسرع وقت وبأقل قدر ممكن من الأخطاء، تعرف على بعض الأخطاء التي يقع بها الكثير من المبتدئين في مجال التصميم والتي تؤخر بشدة من عملية التطوير السريع والفعال لمستواهم. البدأ في استعمال البرامج على الفورمعظمنا اكتشف حبه للتصميم عندما رأى بعض التصاميم الجميلة على مواقع الويب، وتمنى لو استطاع صناعة مثلها وبأسرع وقت ممكن، ولذلك ابتدأ فورَا بالتصميم على إحدى البرامج مثل الفوتوشوب مثلَا. استخدامك للبرنامج سيساعدك على إخراج التصميم الذي تريد ولكن بدون فهم أو دراسة لما تفعله وسيجعلك متمكن من أدوات لا تفهم آلية عملها فتكون أقرب للتقني المطبق منك إلى المصمم أو المبتكر. لا ألومك إن وقعت في هذا الخطأ فمعظم ورش ودورات التصميم المدفوعة أو المتاحة على الإنترنت لا تقوم بتوفير أساسات قوية بل تقوم بتعليمك الأدوات بشكل مباشر لتمكنك من صنع ما تريد من التصاميم المتنوعة، كما أن كثرة الدروس المرفوعة في كل مكان تجعلك مشتت الذهن بما عليك البدأ بتعلمه في الوقت الصحيح والأهم من ذلك بالترتيب الصحيح! وتكون النتيجة كارثية بالطبع! عوضَا عن البدأ بالبرامج مباشرة هل سألت نفسك يومَا بعضَا من هذه الأسئلة؟ هل لديك فكرة عن عناصر التصميم؟ هل تدرك ما هي أساسيات التصميم أصلَا؟هل روادتك الأفكار مرة عن كيفية استعمال مهارات التصميم المختلفة لتوصيل الأفكار؟هل تعرف الأدوات اللازمة لتكون مصمم بغض النظر عن البرامج؟بالطبع لم تفكر في تلك الأسئلة لإنك مشغول وبشدة في كيفية صنع التصاميم بأسرع وقت ممكن تفكر طوال الوقت في السؤال الأبدي "كم من الوقت يلزمني لأصل للاحتراف؟". من الصعب والنادر توفر كليات دراسة أكاديمية للتصميم الجرافيكي فإن لم تجدها حاول تعويض ذلك بفهمك العميق للتصميم ومحاولة الإجابة عن الأسئلة السابقة. قد تفضل الكتب المطولة أو المدونات الإلكترونية أو ربما تشترك في إحدى مواقع الدروس المدفوعة إن سمحت لك مادياتك، ولكن أيَا كان الأسلوب الذي ستلجأ إليه للتعلم رجاءَ لا تصمم بدون فهم تلك الأساسيات. عدم ترتيب الأفكار قبل البدأ في التصميملا تبدأ تصاميمك على ورقة بيضاء تحدق فيها متساءلَا ماذا أصمم! سيكون من الجيد لو نظمت أفكارك ابتداء من مشاهدة بعض التصاميم للاستلهام ورسم بعض الخرائط الذهنية والمخططات لاختيار أفضل الأفكار ومن ثم الانتقال للبرامج للتطبيق ابتداءَ من اختيار البرنامج المناسب والتفكير في آليات التطبيق مرورَا بالتعديلات النهائية وكيفية عرض الأعمال على العميل. هذا سيختصر عليك الكثير من الوقت والجهد إضافة إلى جعل تصاميمك أكثر دقة واحترافية. لا تكن مصممَا من الإبرة للصاروخ!لأكن صادقة معك معظم المشكلات التي أكتبها هنا هي نتاج تجربة ذاتية عانيت منها. بعضها قد تخلصت منه والبعض الآخر أعمل على علاجه إلى الآن، ومن أهم المشكلات التي واجهتني هي عدم التخصص! كنت أرى أن المصمم المثالي لا بد أن يكون على خبرة بجميع برامج التصميم ابتداء من البرامج الرسومية إلى برامج الحركة والتصاميم ثلاثية الأبعاد إضافة لتعديل الصور وتصميم الخطوط! كثير من الوقت قضيته أحاول بلا جدوى التوفيق بين هذا الكم الرهيب من البرامج لأكتشف أن البرنامج الواحد منهم قد يحتاج إلى سنوات للتخصص العميق فيه والوصول لمستوى مميز. لم أدرك ذلك في بداية الأمر فكنت دومَا أشعر بالتقصير إضافة إلى مقارنة مستواي المتوسط في البرنامج الواحد والتشتت وحساب كم الوقت اللازم لاحترافهم جميعَا! أعلم هذا لأن الكثيرين إلى الآن يؤمنون أن تخصصات أكثر تعني فرص عمل أعلى ومرونة أعلى بالضرورة وهي مدرسة في التفكير أفخر بتخلصي منها إلى الأبد! دراسة تخصص بعينه والوصول لمستوى الاحتراف فيه قد يستلزم منك قضاء حوالي 10,000 ساعة فماذا عن أربع إلى خمس تخصصات معَا! من الضروري للغاية أن تتعرف على التخصصات المختلفة للتصميم وتسأل نفسك إذا ما كنت تميل لأحدهم وترغب في قضاء عمرك كاملَا في هذا المجال! هل تريد أن تصبح مصمم جرافيكي أم تعشق الرسم وتود التخصص في مجال الـ Illustration، ربما تهتم بأن تكون مصمم لتجربة المستخدم أو مصمم حركة أو حتى مصمم هوية وشعارات! أيَا كان التخصص الذي اخترته لا تشتت نفسك في محاولة جمع بين أكثر من تخصص هذا سيضيع وقتك وسيقلل من جودتك في كلا التخصصين. تلميح: التخصص كلمة مطاطة بعض الشيء البعض يبالغ فيقول أن المصمم لا يجب أن يفكر وتخصصيته تكمن في تطبيق أفكار الآخرين وحسب! والآخر يصمم كل شيء وأي شيء. تذكر أن هناك من صنع لنفسه تخصص في تصميم الأغلفة للكتب فقط أو أغلفة الأكواب الورقية ولكن هناك أيضَا مصممون عالميون يستمتعون بتصاميم الهويات إضافة إلى تصاميم الـIllustration. الأمر مفتوح في النهاية لأسلوبك في التفكير لكن تذكر أنه كلما زاد توسعك في دائرة التخصص كلما أصبحت في وضع حرج وفقدت احترافيتك في العمل. عدم معرفة أساسيات البرامجصدق أو لا تصدق هناك من يفخر بكونه تعلم برنامج معين بدون دروس عن طريق فتح الواجهة وبدأ التجربة! لا أمانع أبدَا من أن تجرب بنفسك و أن تحاول اكتشاف البرامج عن طريق استخدام الأدوات ولكن على الأقل تعرف على الأساسيات! المشكلة أن الكثيرين ينخدعون بقدرتهم على بدأ التصميم فورَا بسبب استعمالهم لبرنامج ذو واجهة استخدام سهلة فيتجاهلون الأساسيات و يستمرون هكذا لفترة طويلة دون ملاحظة المشكلات نظرَا لقدرتهم على صنع تصاميم بالفعل مثل التصاميم المستخدمة في مواقع التواصل الاجتماعي أو المنتديات الإلكترونية. لأعطيك مثال حقيقي أنا واحدة من هؤلاء الأشخاص الذين ظلوا لفترة لا بأس بها يتعلمون الدروس ويطبقونها دون معرفة أساسيات وأدوات البرنامج في الفوتوشوب، والنتيجة أنني كنت إذا أخطأت خطأً واحدَ صغيرَا في التصميم أمسحه وأقوم بالتصميم من البداية لإنني لم أكن أعرف أداة الـ History، أو أستغرب بشدة عندما يعرض أحد المصممين تصميمَا له ويرحب بالانتقادات ويعدل التصميم المرة بعد المرة، بالنسبة إليّ آخر خطوة لا أستطيع التراجع بعدها هي الخطوة التي أقوم فيها بحفظ التصميم بصيغة JPEG لإنني لم أكن أعرف صيغة الـPSD وبالتالي طلب أي تعديل في التصميم كان يتطلب مني بدأ التصميم منذ البداية في كل مرة! هناك عشرات التفاصيل الأخرى التي ندمت عليها في طريقة تعلمي للبرنامج وهذا ما تجنبته تمامَا في أي برنامج جديد تعلمته في مشواري لاحتراف التصميم. الثبات على المستوىغالبَا تحدث هذه المشكلة عندما تتوقف عن تعلم الجديد وتقوم بتكرير أسلوبك في جميع التصاميم الجديدة. لا تبتكر أي شيء جديد ولا تقوم بمحاولة تغيير الطريقة التي تصمم بها لإنك لا تعرف غيرها! الثبات على المستوى هو واحد من أهم المشكلات التي يواجهها المصممون بشكل عام طوال رحلتهم ولكن أن تصاب بثبات المستوى في بداية الرحلة وأنت ما زال لديك الكثير لتتعلمه هو أمر كارثي لا محالة! ضع لنفسك تحديات مختلفة وحاول ألا تقولب نفسك في تصاميم سهلة أو بسيطة لا تستوجب منك الكثير من العناء. حاول أن تتعلم كل يوم أو كل فترة زمنية قصيرة -تبعَا لجدولك- درسَا جديدَا أو تقنية مختلفة أو حتى قراءة كتاب عن التصميم جديد بالنسبة إليك. ماذا عن ورش العمل أو محاولة نقل خبراتك للآخرين؟ لا تستبعد فكرة الاشتراك في ورش عمل بعيدة عن التصميم لتجديد أفكارك مثل ورش الخط العربي أو الرسم على الحائط أو غيرها. أي نوع من أنواع الفنون المختلفة قد يساعدك في استلهام أفكار مميزة وغير تقليدية في تصاميمك. والأهم ألاّ تنسى متابعة مواقع الإلهام العالمية بشكل دوري من وقت للآخر أو قبل البدأ في تصاميمك الجديدة دومَا لا لتنقلها كما هي بل لتنشظ ذاكرتك وتعينك على التفكير بطرق إبداعية أكثر. المشاهدة بدون تطبيقواحدة من تجاربي الأليمة هي احتراف مشاهدة الدورات التعليمية وفهم التقنيات المستعملة في التصميم فهم جيد ولكن بدون التطبيق! حجتي في هذا كانت كثرة الدروس والدروات التي يتوجب عليَ الانتهاء منها قبل فترات الدراسة مثلَا فأعمل بجد لكي أنهي الدورات ولو جاء هذا على حساب التطبيق! من جديد اكتشفت التبعات الرهيبة لهذا الأسلوب! فبعد مشاهدة أكثر من ثلاثين إلى أربعين ساعة في برنامج معين اكتشفت بعد شهرين أو أكثر أنني قد نسيت معظم ما تعلمته لأنني لم أطبقه واكتفيت بالمشاهدة فقط! صدقني لا شيء قد يؤثر فيك ويرتبط في ذاكرتك بشكل قوي مالم تكن قد طبقته بشكل جيد أيَا كانت وسيلة التطبيق. كلما طبقت أكثر صار من الصعب جدَا عليك أن تنسى تلك المهارة حتى يصبح استعمالها أسهل من شرب الماء وتكتشف أنك أصبحت تمارسها بدون وعي تقريبَا! عدم تقبل النقد والابتهاج الشديد بالمدحمن العيوب القاتلة التي قد تدمر مستقبل أي مصمم مبتدئ هو عدم تقبل النقد! أوافقك تمامَا في أنّ تقبل فكرة أن ينتقدك أحدهم مُظهرَا أسوأ ما في تصاميمك حتى لا يكاد يترك شيئَا واحدَا لم ينتقده هي عملية ليست سعيدة إلى تلك الدرجة! ولكن لك أن تتخيل مغبة أن تكون مصمم مبتدئ يمتلئ تصميمك -على الأرجح- بعيوب كثيرة ومتنوعة ثم يأتي أحدهم ليقول لك: " يا لك من مصمم عظيم لقد أصبحت محترف!" هكذا تسترخي في مقعدك بكل أريحية وتتوقف عن التصميم لأسبوع ربما شاعرَا أنك قد بذلك الكثير من الجهد وحان وقت إعطاء نفسك القليل من الراحة! لا تستسلم لفكرة تقبل المديح من الآخرين وحاول أن تكون أنت العين الناقدة لتصميماتك وخذ دومَا آراء الآخرين بعين الاعتبار وحاول ألا تجعل الموضوع شخصيَا بينك وبين من ينتقدك. على الجانب الآخر أعلم أن الكثيرين لا يجيدون فن تزويق الكلام أو الانتقاد بالأسلوب السليم الذي يظهر المحاسن قبل المساوئ ويشجع المصمم على أن يكمل التعلم ليصل لمستوى أفضل! ولكن بربك ليس هذا الذي سيوقفك عن إكمال هدفك لتصبح مصمم مميز أليس كذلك؟! استعمال "الجاهز" هو خيارك الأول!لماذا أصمم تدرجات لونية أو تأثير معين طالما أنه يوجد الكثير منهم مصممين بالفعل؟ هل عليَ رسم التصميم من البداية للنهاية بدون استعمال بعض الفكتورز الجاهزة والمصممة بالفعل؟ نعم! كلنا كمصممين نُصاب بالإرهاق أحيانَا من كثرة التفاصيل التي يجب أن تنتبه إليها وتعدلها وتأخذها بحسبانك فنركن للحل الأسهل وهو استعمال الأدوات الجاهزة قدر الإمكان. مشكلات هذا الأسلوب عديدة للأسف فأولَا أنت على الأغلب لم تقم بعمل تصميم أصيل أو مختلف بل جمعت بعض العناصر في تصميمك و قمت بعملية تجميع ليس أكثر! وثانيَا لم تقم بابتكار فكرة جديدة. وثالثَا وهو الأهم لم تقم بتنمية أو تطوير مهاراتك في عملية التصميم وعلى الأرجح لم تكتسب أي خبرة جديدة أو مشكلة واجهتك وبحثت عن حل لها لإنك تجنبت كل هذا الألم النسبي والمؤقت لتلجأ للحل الأمثل وهو استعمال تصميم جاهز! لن أقل لك توقف عن فعل هذا فهو أمر قد يستوجب بعض الوقت و كثيرَا ما يحتاج لرفع درجة مهاراتك للتخلي عن بعضهم ولكن حاول تقنين استخدامهم قدر الإمكان ولا تعتمد عليهم بشكل كلي. الاهتمام المبالغ فيه بنسخ البرامج المستخدمة والأجهزة المستخدمة للتصميمأدرك تمامَا أن هناك فروقات شاسعة بين نسخ الفوتوشوب القديمة والحديثة. بل إن إضافة واحدة قيمة في نسخة جديدة قد توفر عليك ساعات وساعات من العمل الشاق! لكن ما أعترض بشأنه هو المبالغة في تصور قدرة البرنامج على إخراج تصميم مميز إلى النور! قد تمتلك أحدث نسخة من الفوتوشوب ولكن مع مهارات فقيرة للغاية وأسلوب تصميم رديء تخرج أبشع التصاميم الممكنة! أعرف مصممون مازالوا يستخدمون إلى اليوم الإصدار السابع للبرنامج وتتمتع تصاميمهم بدرجة من الإبداع مذهلة وعجيبة! لا تجعل النسخة هي أهم شواغلك فيما يخص إخراج تصميم جيد إلى الوجود وركز أكثر على تعلم التقنيات الصحيحة وتطوير مهاراتك بشكل أساسي. الأمر نفسه في ولع البعض الشديد في امتلاك أجهزة مميزة مثل ماك أو استعمال تابلت للرسم في بداية مشوارهم في التصميم! سرقة التصاميم!نعم لم تخطئ القراءة! بعد كل تلك المشكلات التي وضعتها لكي تتجنبها كمصمم مبتدئ يبدو الأمر معقدًا للغاية وصعب! كل ما تريده هو كسب المال بأقل قدر ممكن من الجهد والوقت! تفكر في سرقة الأفكار فأنت لست ملاكًا كما أنه ليس أمرًا مستبعدًا فأكبر الشركات العربية والعالمية تقوم بسرقة الأفكار والمخططات فلماذا تختلف أنت عنهم؟! لن أجيبك على هذا السؤال من منطلق الضمير أو الدين ولكن بشكل عملي أكثر كن متأكدَا أن عالم الويب صغير للغاية! أكثر مما تتخيل. وتدمير سمعتك فيه كفيل بإنهاء حياتك المهنية من قبل أن تبدأ أصلَا. هناك مواقع متخصصة لفضح لصوص التصاميم،و إرفاق بعض سوابق الأعمال التي سرقتها من غيرك في سيرتك الذاتية للتقدم للعمل كفيلة بتقليل فرصك في الحصول على وظيفة جيدة إلى الحد الأدنى! إن لم تكن محوها نهائيَا. أنت تصم نفسك أيضَا عوضَا عن السرقة بقلة الإبداع وبعدم القدرة على الابتكار وبالتالي أنت تلجأ لسرقة الأفكار ونقلها حرفيَا في معرض أعمالك. لا تفكر حتى في هذا الموضوع وأسقطه من اعتباراتك وبشكل قاطع! أسئلة مفتوحة للنقاشمنذ متى تصمم وما هي أهم الأخطاء التي وقعت بها كمصمم مبتدئ؟كيف تعلمت التصميم بالدراسة الذاتية أم بالالتحاق بالدورات والورش وأيهما أفضل برأيك؟كيف اخترت تخصصك في التصميم؟

لكل شيء تجربة مُستخدم. مهمّتنا ليست خلق تجربة المُستخدم، بل تحسينها. ولكن ما معنى "تحسين" تجربة المُستخدم؟ هذا هو الدرس الأول من سلسلة مدخل إلى تجربة المستخدم: مدخل إلى تجربة المستخدم User Experience (هذا الدرس) فهم ودراسة المستخدمين في مجال تجربة المستخدم دراسة الشريحة المستهدفة في مجال تجربة المستخدم كيفية التصميم للأجهزة المختلفة هندسة المعلومات في تجربة المستخدم تعرف على أنماط التصميم في مجال تجربة المستخدم أشياء لا يمكن اعتبارها رسوما تخطيطية (Wireframes) في مجال تجربة المستخدم تعرف على الرسوم التخطيطية (Wireframes) في مجال تجربة المستخدم مفهوم الثقل المرئي (Visual Weight) والألوان في مجال تجربة المستخدم التكرار ومخالفة الأنماط في مجال تجربة المستخدم المحاذاة والقرب في مجال تجربة المستخدم تعرف على أساليب مسح الواجهة والتراتب المرئي في مجال تجربة المستخدم أساليب الإطلاع في مجال تجربة المستخدم: التصفح، البحث والاكتشاف تصميم هيكل صفحة الويب والعناصر الأساسية في مجال تجربة المستخدم الأزرار، النماذج والدعوات إلى الإجراء في مجال تجربة المستخدم استخدام علم النفس في مجال تجربة المستخدم لتكييف المستخدم وإقناعه كيف تغير الخبرة من تجربة المستخدم؟ تصميم تجربة المستخدم من خلال بيانات وإحصائيات المستخدمين تعرف على أنواع المخططات الإحصائية في مجال تجربة المستخدم اختبارات أ/ب (A/B Test) في مجال تجربة المستخدم يشيع الاعتقاد أن تجربة المُستخدم الجيدة هي تحقيق سعادة المستخدمين؛ وهذا غير دقيق! لو كانت السعادة غايتنا لاكتفينا بصور القطط و عبارات المديح العشوائية وعدنا إلى بيوتنا! للأسف لن يكون مديرك في العمل راضيًا (مع أن الفكرة ليست سيّئة!) هدف مصمّمي تجربة المُستخدم هو الوصول إلى كفاءة المستخدم. تجربة المستخدم ليست سوى قمّة جبل الجليد: يعتقد كثير من الناس أن كلمة UX تعني تجربة المستخدم، ولكنها بالأحرى تعني عملية تصميم تجربة المستخدم. تجربة كل مستخدم على حدة ليست سوى رأيه الشّخصي عن موقعك أو تطبيقك. صحيح أن رأي المستخدم مهم (أحيانًا) ولكن على عاتق مصممي التجربة مسؤوليات أكبر من ذلك. تصميم تجربة المُستخدم: يشمل تصميم تجربة المُستخدم (UXD اختصارًا) إجراءات مشابهة جدًّا لأصول البحث العلمي، فنحن نبدأ بفهم طبيعة المستخدمين، ثم التفكير بتلبية حاجاتهم (وحاجات المشروع)، ثم نبني هذه الحلول ونقيس أداءها على أرض الواقع. تابع معنا لتتعلم الكثير عن تجربة المُستخدم، أو تابع صور القطط إن لم تكن مهتمًّا! ركنا تجربة المستخدم الأساسيان ينبغي عليك عندما تبدأ مشروع تجربة مُستخدم جديدًأ وقبل أن تصمّم أيّ شيء، أن تفهم أهدافك؛ هدفين اثنين على وجه الدقّة. كل شيء تفعله قائم على هذين الهدفين ولا شيء أهمّ منهما لنجاح عملك كمصمّم تجربة المُستخدم: أهداف المستخدمين، وأهداف المشروع. أهداف المستخدمين يريد المستخدم شيئًا ما منك، فهو إنسان، وللإنسان دومًا حاجات. سواء كانت هذه الحاجات هادفة أو لا. أهداف المشروع لكل مؤسسة هدف من وراء الموقع أو التطبيق الذي تبنيه، عادة يكون الهدف المال، ويمكن أن يكون الدعاية للشركة، أو جذب المستخدمين للمجتمع… إلخ. تحديد نوع هذا الهدف أمر مهمّ. فلو كان الهدف عرض إعلانات أكثر، فإنّ سياسة تجربة المُستخدم ستكون مختلفة كلّ الاختلاف عمّا إذا كان الهدف هو بيع المنتجات أو الترويج للمشروع في الإعلام الاجتماعيّ. تُسمّى هذه الأمور "القياسات" (metrics) أو "مؤشرات الأداء الأساسيّة" (KPIs) كما يحلو لرجال الأعمال تسميتها. التنسيق بين الهدفين حسن التنسيق بين الهدفين السابقين هو الامتحان الحقيقي لمصمم تجربة المُستخدم، والمقصود هو كيف تجعل غاية المشروع تتحقّق عندما يحصل المستخدم على ما يريد (وليس العكس!). يجني YouTube أرباحه من الإعلانات، ويريد مستخدموه مشاهدة مقاطع فيديو جيدة، ولذلك فإن وضع الإعلانات في المقطع نفسه (أو في الصفحة نفسها) أمر منطقيّ. ولكن الأمر الأهمّ هو أن تسهيل البحث عن مقاطع الفيديو وإيجاد المقاطع المشابهة سيؤدي إلى زيادة ما يشاهده المستخدم، وهذا بدوره يزيد في أرباح YouTube. لو لم يكن الهدفان مُنسّقين، لاستطاع المستخدمون تلبية حاجتهم دون إفادة المشروع (مستخدمون كثر ولكن بلا نجاح) أو أن الأمر على العكس، أي أن المستخدمين لا يستطيعون تلبية حاجتهم (لا مستخدمين ولا نجاح). لو فرض YouTube إعلانًا مدّته دقيقة على كل نصف دقيقة تشاهدها، لانتهى به الأمر سريعًا نهاية عسيرة، ولكنّ إعلانًا مدّته بضع ثوانٍ هو ثمن قليل تدقعه مقابل مشاهدة دب الباندا وهو يعطس… صحيح؟ المكونات الخمسة لتجربة المستخدم في عملية تصميم تجربة المُستخدم، على المصمم أن يحفظ في ذهنه خمسة أمور طيلة العملية. المكوّنات الخمسة لتجربة المُستخدم: الجانب النفسي، وقابليّة الاستخدام، والتصميم، والجمل الترويجية، والتحليل. بإمكاننا أن نفرد في الحديث سلسلة طويلة لكلّ من هذه الجوانب، ولكنّنا سنبُسِّط الأمور بعض الشيء، فهذه السلسلة موجزة، وليس الغرض منها التعمّق في التفاصيل. أولا: الجانب النفسي عقل المستخدم معقّد، وأنت تعرف ذلك. يتعامل مصمّم تجربة المُستخدم مع ذهنيّة غير موضوعيّة تتحكّم بها المشاعر كثيرًا؛ ولهذه الذّهنيّة تأثير سلبيّ أو إيجابيّ على نتائجك، وعلاوةً على ذلك ينبغي على المصمم تجاهل جانبه النفسيّ الخاص أحيانًا، وهذا أمر عسير. اسأل نفسك: ما الذي يدفع المستخدم ليزور خدمتي في الأساس؟ ما شعوره عندما يفعل ذلك؟ كم من الجهد يبذله ليصل إلى ما يريد؟ ما العادات الّتي تنشأ مع تكرار ذلك مرارًا؟ ما الذي يتوقّعه عندما ينقر على هذا؟ هل تفترض أنّه يعلم شيء وهو لم يتعلّمه بعد؟ هل يريد أن يكرّر هذا الأمر؟ كم مرّة؟ هل تفكّر بحاجات المستخدم ورغباته، أم بحاجاتك ورغباتك؟ كيف تكافئ التّصرّف السّليم؟ ثانيا: قابلية الاستخدام صحيح أن الجانب النفسيّ للمستخدم أمر متعلّق ببواطنه، ولكن قابليّة الاستخدام على العكس من ذلك، وباستطاعتك ملاحظة حيرة المستخدم. أحيانًا تكون صعوبة تنفيذ شيء ما أمرًا ممتعًا (كما في الألعاب)، ولكن الغالب لكل ما سوى الألعاب أن تكون سهولة الإنجاز هي ما نريده. اسأل نفسك: هل يستطيع المستخدم إنجاز العمل المطلوب بأقل قدر من الإدخال؟ هل باستطاعتنا تجنيب المستخدم الوقوع في الخطأ؟ (الجواب: نعم!) هل الأمر واضح ومباشر، أم أنّه غامض؟ هل الأمر سهل إيجاده (وهذا أمر جيّد)، أم صعب تفويته (أفضل)، أم متوقّع دون تفكير (الأفضل)؟ هل يتلاءم تصميمك مع افتراضات المستخدم أم يعاكسها؟ هل وفّرت كل ما ينبغي على المستخدم معرفته؟ هل يمكن إنجاز الأمر نفسه بالجودة نفسها ولكن بطريقة مألوفة أكثر؟ هل تبني قراراتك على منطقك أنت؟ أم على بديهة المستخدم؟ كيف تتأكد؟ إن لم يقرأ المستخدم النصوص المكتوبة بخطّ صغير، هل يبقى الأمر مفهومًا؟ هل يمكن إنجازه؟ ثالثا: التصميم تعريفك لكلمة "التصميم" كمصمم تجربة المُستخدم مختلف بعض الشيء عن المفهوم الفنّي الذي يعرفه المصمّمون. لا يهمّ إن كانت الكلمة تعجبك أم لا. التصميم في تجربة المُستخدم يعني كيف تسير الأمور، وهو شيء يمكن إثباته؛ ولا علاقة له بالأسلوب. اسأل نفسك: هل يعتقد المستخدم أن المنتج جميل؟ هل يثقون فيه فورًا؟ هل يوصل المنتج الهدف والوظيفة دون كلمات؟ هل يمثّل العلامة التجارية؟ هل تنسجم مكوّناته معًا؟ هل يقود التصميم عيني المستخدم إلى المواضع الصحيحة؟ كيف تتأكّد؟ هل تساعد الألوان والأشكال والخطوط المستخدم في إيجاد ما يريده وتزيد من قابلية مُستخدم التفاصيل؟ هل تبدو العناصر الّتي يمكن النقر عليه مختلفة عن تلك الّتي لا يمكن النقر عليها؟ رابعا: الإنشاء/النصوص Copywriting هناك فرق هائل بين الإنشاء الخاص بالعلامة التجارية والإنشاء الخاص بقابليّة الاستخدام. فالأولى تعزّز صورة الشركة، والثانية هدفها إنجاز الأمور بأسرع وأبسط ما يمكن. اسأل نفسك: هل تبدو النّصوص واثقة وتُعلِم المستخدم بما عليه فعله؟ هل تحثّ المستخدم على إتمام هدفه؟ هل هذا ما تريده؟ هل أكبر النصوص هي أهمّها؟ إن كان الجواب لا، فلماذا؟ هل تُعلّم المستخدم أم تفترض أنّه يعلم؟ هل هي واضحة ومباشرة وبسيطة وفعّالة؟ خامسا: التحليل التحليل هو نقطة ضعف معظم المصمّمين في رأيي، ولكن يمكن إصلاح هذا الخلل. التحليل هو الفارق الرئيسي بين تجربة المُستخدم وأنواع التصميم الأخرى، وفهمه يُعلي من قيمتك. وإتقانه يعني حرفيًّا دخلًا أعلى. فاسأل نفسك إذًا: هل تستخدم البيانات لإثبات صحّة تصميم، أو الوصول إلى التصميم الصّحيح؟ هل تبحث عن آراء غير موضوعيّة أم حقائق موضوعيّة؟ هل جمعت المعلومات الّتي تعطيك الإجابات المطلوبة؟ هل تعرف لم يفعل المستخدمون ما يفعلونه؟ أمّ أنك تفسّر سلوكهم فقط؟ هل تبحث عن أرقام مجرّدة؟ أم تهدف إلى إدخال تحسينات بناء عليها؟ كيف ستقيس شيئًا ما؟ هل تقيس الجوانب المطلوبة فعلًا؟ هل تبحث عن النتائج السيّئة أيضًا؟ لم لا؟ كيف تطبّق هذا التحليل لتحسين المنتج؟ ترجمة وبتصرّف لكل من المقالات التالية للكاتب Joel Marsh: What is UX User Goals & Business Goals The 5 Main Ingredients of UX حقوق الصورة البارزة: Designed by Freepik. اقرأ أيضًا المقال التالي: فهم ودراسة المستخدمين في مجال تجربة المستخدم النسخة العربية الكاملة من كتاب مدخل إلى تجربة المستخدم (User Experience - UX) 1.0.0 تاريخ موجز عن تجربة المستخدم ثلاثون مصطلحًا في تجربة الاستخدام لا غنى عنها لمصممي الويب

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

مع اقتراب شهر رمضان المبارك، يحب الناس تبادل البطاقات التي يهنئون بها بعضهم البعض بالشهر الفضيل، أو تلك البطاقات التي تحتوي على الآيات والأحاديث النبوية والتوجيهات والفتاوى المتعلقة بالشهر. سنصمم نموذج لبطاقة تهنئة بشهر رمضان المبارك بنمط إسلامي، مع إمكانية استخدامها في مناسبات أخرى كالعيد مثلا! تتكون بطاقتنا من هلال ومساجد وخلفية بزخارف إسلامية، سنشرحها على أقسام. رسم الهلال ارسم دائرة كاملة الاستدارة بالضغط على Ctrl أثناء الرسم، واجعل شفافيتها Opacity للمنتصف من لوحة التعبئة والحدود Fill and stroke. كرّر الدائرة مجدّدا عن طريق اختيار Duplicate من الزر الأيمن ولوّنها بلون مختلف. صغّر الدائرة المكرّرة مع الضغط على Ctrl أثناء التصغير، ثم اسحبها حيث الموضع الذي يتشكل الهلال بحذفه من الدائرة الأولى. حدّد كلا الدائرتين معا بالاستعانة بزر Shift لتحديد الدائرة الأخرى، ثم من قائمة المسار Path من شريط المسارات العلوي اختر أمر الفرق Difference. رسم المساجد ارسم عددا من المستطيلات وصفها عاموديا لتشكل المئذنة. بأداة النجمة والمضلع Stars and polygons سنرسم المثلث الذي يقع في رأس المئذنة مع الضغط على Ctrl أثناء الرسم للتحكم باتجاه المثلث، بعد اختيار المضلع من الشريط العلوي، وقيمة عدد الزوايا 3 وإعطاء القيمة المناسبة للاستدارة التي نرغب بها. عدّل عرض المثلث بأسهم التحديد والتحجيم، وقم بمحاذاة جميع أجزاء المئذنة عاموديا من لوحة المحاذاة والاصطفاف Align and distribute. أضف عددًا من الدوائر فوق المئذنة ليكتمل شكلها. ارسم مستطيلا كقاعدة للقبة، ثم ارسم فوقه شكلا بيضاويا بالعرض الذي ترغب أن تكون عليه القبّة. حوّل الشكل البيضاوي لمسار عن طريق الشريط العلويّ لأداة التحرير Node tool أو اختيار Object to path من قائمة المسار. ارفع العقدة العلوية Node قليلا إلى الأعلى مع الضغط على Ctrl أثناء سحبها للمحافـظة على محاذتها . حوّل العقدة إلى زاوية من شريط أداة التحرير العلوية باختيار Make selected nodes corner. حرّك الذراع الأيمن Node handle للعقدة العلوية مع عقارب الساعة مع الضغط على Ctrl إلى أن تحصل على الميلان المناسب، ثم حرّك الذراع الأيسر بشكل متقابل في الاتجاه المعاكس. حوّل العقدتين الجانبيتين إلى عقد متناسبة باختيار Make selected nodes symmetric بمعنى أن أي تغيير في أحد ذراعي العقدة سيحصل للذراع الآخر. اسحب الذراع العلوي للعقدة اليمنى للأعلى مع الضغط على Ctrl وستلاحظ أن الذراع الآخر سيسحب في الاتجاه المعاكس تلقائيا. اسحب دليلا من جهة المسطرة العلوية بمؤشر السهم (وهو عبارة عن خط وهمي) إلى موضع ارتفاع ذراع العقدة اليمنى، وذلك لتستعين به لسحب ذراع العقدة اليسرى لنفس الارتفاع، ثم احذفه بتحديده بالسهم واختيار زر الحذف Delete من لوحة المفاتيح. كرّر المئذنة والقبة عدة مرات مع التغيير في أحجام القباب وطول المآذن. ارسم مستطيلا يصل بين المآذن والقباب وبين الهلال. حدّد جميع الأشكال بسحب المؤشر حولها جميعها ثم من قائمة المسار اختر Union. يمكنك أن تعدل في العقد بين الأشكال إلى عقد ناعمة عن طريق اختيار Make selected nodes smooth من الشريط العلوي لأداة التحير، ثم حركّها يمينا ويسارا لجعل الشكل أكثر انسيابية. رسم الخلفية والزخارف نضيف خلفية للبطاقة ونعيدها لخلف الهلال، ونلوّنها من لوحة التعبئة والحدود أو من شريط الألوان السفلي باللون المناسب. اجعل شكل الهلال والمساجد شفافا عن طريق خيار Opacity من لوحة التعبئة والحدود وأعطه القليل من الضبابية blur ولتكن القيمة 2 ولوّنه باللون الأسود. كرّر الشكل وأزل الضبابية واجعل الشفافية مئة مع تلوينه باللون الأبيض وتحريكه قليلا للأعلى بحيث يظهر الظل تحته. في الطرف السفلي الأيمن للخلفية ارسم مربعا بالضغط على Ctrl أثناء الرسم، ثم كرّر المربع مجددا وقم بتدويره مع الضغط على Ctrl إلى أن يعطينا شكل المعين. كرّر كلا المربعين وضعهما جانبا حيث سنعود لهما بعد قليل. حدّد المربعين الأصليين ومن تبويب رسم الحد Stroke paint ضع لهما حدودا، ومن تبويب سمة الحد Stroke style اختر العرض المناسب. بينما كلا المربعين محدّدين حولهما إلى مسار من خيار Stroke to path من قائمة المسار، ثم قم بتوحيدهما عن طريق خيار Union من قائمة المسار. عد للمربعين الذين تركناهما جانبا وقم بتوحيدهما عن طريق Union. من لوحة المحاذاة والاصطفاف حاذ المربعين المعبأين مع المربعين الأصليين عاموديا وأفقيا. حدّد كلا الشكلين الموحدين ومن قائمة المسار اختر أمر الفرق Difference. كرّر الشكل الناتج وصغره بأسهم التحجيم عن طريق الضغط على Ctrl+Shift للمحافظة على تمركزه وسط الشكل الأول وللمحافظة على أبعاده. ثم من قائمة المسار قم بتجزئة الشكل الذي كرّرته وصغرته عن طريق خيار Break apart ثم قم بتوحيد الشكل المجزأ توًا، ليتكون لنا قطعتين إحداهما مفرغة والأخرى معبئة. لوّن كلتا القطعتين بلون مناسب للخلفية. قم بتجميع القطعتين بتحديدهما ثم بالزر الأيمن تختار Group. اختر الشكل المجمع أولا ثم الخلفية تاليا ومن لوحة المحاذاة والاصطفاف اختر محاذاة حوافهما من جهة اليمين. كرّر الشكل مجددا واحذف الشكل الأوسط من الشكل المكرّر بعد فك تجميعه عن طريق Ungroup من الزر الأيمن. ليتم صف الأشكال بشكل متناسق، فعّل من الأعلى خيار الالتقاط والكبس Enable Snapping ومنه فعّل خيار Snap cusp node لتلتقط الأشكال بعضها البعض من حواف العقد الحادة. قم بتجميع جميع الأشكال المكرّرة في مجموعة واحدة وتأكد من كونها داخل حدود الخلفية، إن لم تكن كذلك عدل في حجم مجموعة الزخارف بما يتناسب مع الخلفية. كرّر المجموعة واخترها -أي المجموعة المكرّرة- ثم حدّد الخلفية ومن شريط المحاذاة قم بمحاذاتهما من حوافهما العلوية. كرّر الخلفية ولوّنها بلون مختلف، وقم بتصغيرها من الأعلى مع الضغط على Shift أثناء التصغير لتصغر من الجانبين بشكل متساوٍ، ثم أعدها خلف الهلال من الشريط العلوي. اختر من تبويب التعبئة Fill التدرج الشعاعي Radial gradient ثم من نفس التبويب اختر تعديل التدرج Edit gradient. ستظهر ثلاث عقد، الوسطى تمثل لون التدرج الداخلي والجانبيتين تمثلان لون التدرج الخارجي. أزل الشفافية من لون التدرج الخارجي بتحديد العقدة وإعطاؤها لونا متناسقا. بأداة الكتابة Text tool سنكتب العبارة التي نرغب بها، ومن الشريط العلوي للأداة سنختار نوع الخط وحجمه وغيرها من الخيارات، مع إمكانية تكبير وتصغير الخط عن طريق الأسهم. لوّن النص باللون الأسود وأعطه الشفافية والضبابية المطلوبة. كرّره ولوّنه باللون الأبيض وحرّكه بحيث يظهر الظل تحته. قم بتجميع جميع أجزاء البطاقة في مجموعة واحدة. حتى تكون بطاقتنا جاهزة لنشرها لمعارفنا عبر وسائل التواصل، اختر Export PNG image من قائمة الملف File لتصدير الصورة بصيغة PNG لتظهر لوحة التصدير على يمين الشاشة. من نفس اللوحة اختر تبويب Selection ليقوم بتصدير ما تم اختياره فقط، ثم حدّد البطاقة المجمعة. اختر عبارة Export as من لوحة التصدير. في النافذة المنبثقة حدّد المكان الذي ستحفظ فيه البطاقة واكتب في خانة الاسم اسمها وامتدادها ثم اختر زر الحفظ Save. ثم من لوحة التصدير اختر أمر التصدير Export. الآن صارت البطاقة جاهزة للإرسال، ويمكنك بخطوات مشابهة إبداع المزيد من البطاقات.

هناك العديد من المرشّحات أو ما نُطلق عليه عادة نحن معشر المصمّمين اسم الفلاتر Filters وهي أدوات مساعدة تقوم بمهام رائعة وهناك فلاتر أساسية توجد بطبيعة الحال ضمن قائمة Filters في البرنامج، كما أنه هناك فلاتر يمكن تحميلها من الإنترنت وإضافتها على البرنامج. سنقوم في هذا الدرس باستخدام أكثر من فلتر لنشكّل تأثير تموّج لانعكاس شعار أكاديمية حسوب على أمواج الماء. نبدأ أولاً بفتح ملف جديد في الفوتوشوب وقد اخترت الحجم 1024×683 لهذا الدرس. سنقوم باستخدام أداة سطل الدهان Paint Bucket Tool أو نضغط على مفتاح G ثم نلوّن الصورة باللون الأسود. والآن سنستخدم صورة الأمواج المائية وقد اخترت هنا الصورة التالية الرائعة التي التقطتها MALIZ ONG وسنقوم بإدراجها ضمن الملف وتعديل حجمها لتتناسب مع حجم العمل. بعد ذلك سنذهب الى القائمة: Layer > New Adjustment Layer > Hue and Saturation وسندخل القيم التالية: Hue = 0Saturation = -71Lightness = 0 Layer > New Adjustment Layer > Levels أدخل القيم: 0 - 0.5 - 255. Layer > New Adjustment Layer > Brightness and Contrast أدخل القيم: Brightness = 0Contrast = -35 والآن نحفظ الملف باسم "Hsoub-Water.PSD" وانتبه يجب أن تكون صيغة الملف PSD. والآن سنقوم بإدراج الشعار. Filter > Distort > Displace أدخل القيم وتأكد من اختيار جميع الخيارات الموجودة تماماً كما في الصورة: وعند الضغط على OK سيفتح نافذة لاختيار ملف وهنا نختار الملف الذي حفظناه قبل قليل "Hsoub-Water.PSD". والآن انسخ طبقة الشعار نسخة ثانية ثم طبق الفلتر على طبقة الشعار الأصلية وليس المنسوخة من القائمة: Filter > Blur > Gaussian Blur وضع القيمة 3. وستكون النتيجة كما في الصورة: والآن أدمج طبقتي الشعار معاً بتحديد الأولى ثم اضغط على Shift وحدد الثانية ثم اضغط Ctrl+E. ثم طبق خصائص المزج لطبقة الشعار Overlay. ثم ننقر مرتين على طبقة الشعار لتفتح نافذة التأثيرات ونطبّق التأثير Color Overlay وندخل القيمة 70% مع المحافظة على خصائص المزج داخل النافذة كما هي Normal. والآن نفتح طبقة جديدة فوق كل الطبقات ونلونها بالكامل باللون الأسود ثم ننقر مرتين على الطبقة لأجل التأثيرات ونضع الإعدادات كما في الصور: لتكون النتيجة حتى اللحظة: وأخيراً نضيف طبقة جديدة فوق كل الطبقات ونلونها بالكامل باللون الأزرق بحسب القيم في الصورة: ثم نغير خصائص المزج للطبقة إلى Overlay. والنتيجة النهائية هي: بإمكانكم تجربة الأمر مع شعاراتكم الخاصة وتجربة تغيير الإعدادات كما تشاؤون واستمتعوا بالنتائج المذهلة.

نُتابع معكم ما بدأناه في الجزء السّابق من المقال، وسنحاول رسم المسارات الصّحيحة للتّصاميم الموجّهة للطّباعة. آلية تصدير التّصاميم إلى المطبعةبعد الانتهاء من التّصميم الطّباعي بشكل كامل يأتي دور التّصدير إلى أفضل صيغة لإرساله إلى المطبعة إنشاء ملف جاهز للطّباعة في Adobe Photoshop 1- تأكدّ بأن تكون الألوان مفروزة وفق النّمط CMYK. 2- قُم بدمج العمل بالكامل عبر الذّهاب إلى نافذة الطّبقات ثم بالضّغط بالزّر الأيمن على الطّبقة السّفلية (الأرضية) والضّغط على Flatten Image. 3- خزّن العمل النّهائي على هيئة ملف PDF من خلال اتّباع ما يلي: File ثم Save as ثم اختر من القائمة المُنسدلة Format حفظ العمل على صيغة Photoshop PDF في المكان المُراد. 4- عند الضّغط على Save ستظهر لك نافذة تتطلّب بعض الإعدادات، احرص على اختيار القيم حسب الصّورة أدناه، ثم اضغط على Save PDF. إنشاء ملف جاهز للطباعة في Adobe illustrator1- تأكدّ بأن تكون الألوان مفروزة وفق النّمط CMYK. 2- عدّل جميع الخطوط إلى outlines من خلال اتّباع ما يلي: Select ثم All وبعد ذلك Type ثم Create outline. 3- خزّن العمل النهائي على هيئة ملف PDF من خلال اتّباع ما يلي: File ثم Save as ثم اختر من القائمة حفظ العمل على صيغة Adobe PDF في المكان المُراد. 4- عند الضّغط على Save ستظهر لك نافذة تتطلّب بعض الإعدادات، احرص على اختيار القيم حسب الصّور الثّلاث أدناه، ثم اضغط على Save PDF. إنشاء ملف جاهز للطباعة في Adobe indesign1- تأكدّ بأن تكون الألوان مفروزة وفق النمط CMYK. 2- اضغط File ثم Export ثم اختر من القائمة حفظ العمل على صيغة Adobe PDF في المكان المُراد واضغط Save. 3-عند الضّغط على Save ستظهر لك نافذة تتطلّب بعض الإعدادات، احرص على اختيار القيم حسب الصّور الثّلاث أدناه، ثم اضغط على Save PDF فرز التّصاميم الطّباعيّة في المطابع - الألواح الطباعيّة – المقاسات والتقسيماتهناك أنواع مُختلفة من الورق والتي تُشكّل الألواح الطّباعية ولعل أكثرها شيوعًا: الكوشيه "kosheh paper" والكرتون وورق العجينة وورق الطبع الأبيض. يأتي كل نوع من أنواع الورق وفق أحجام وكثافات وأوزان "Grams" مُختلفة تُستخدم حسب الطّلب، ويأتي بعضها بالسطح اللامع "Gloss" وبعضها بسطح المت أو المطفي "Matte". تحدثنا مُسبقاً عن أشهر الطابعات التّجاريّة الحالية الأوفسيت Offset ويأتي منها عدة مقاسات أشهرها: - الطابعات ذات المقاس الصغير (50 × 35 سم) ويُدعى اللّوح الطّباعي printing board أو ما يُعرف بالمُصطلح العربي الدّارج "ربُع فرخ" نسبة إلى أن الفرخ من مقاس (100 × 70 سم). - الطابعات ذات المقاس الكبير (100 × 70 سم) ويُدعى اللّوح الطّباعي "فرخ". أشهر مقاسات ألواح الطباعة المُستخدمة وتقسيماتها:المقاس الفرخ (100 × 70 سم) وأشهر تقسيماته: (50 × 70 سم) ويُدعى نصف فرخ (50 × 35 سم) ويُدعى ربع فرخ (25 × 35 سم) ويُدعى ثُمن فرخ هُناك تقسيمات ثانويّة أخرى تُوزّع بحسب مقاسات التصميم، فمثلاً بإمكان تقسيم الفرخ إلى 16 قطعة كلٍ منها بمقاس (25 × 17.5 سم). ليس بالضرورة أن تكون التصاميم مُطابقة تمامًا للتّوزيع على الفرخ، فمثلًا إن كان لدينا تصميم بالمقاس (33 × 70 سم) يتم تكراره على ثلاثة قطع ضمن الفرخ وتزداد مساحة صغيرة تُدعى استريشة (ورق مهدور – wasted paper)، لاحظ الصورة: مقاس الجاير الكبير (66 × 88 سم) وأشهر تقسيماته: (44 × 66 سم) ويُدعى نصف جاير (44 × 33 سم) ويُدعى ربع جاير (22 × 33 سم) ويُدعى ثُمن جاير ليس بالضّرورة أن تكون التّصاميم مُطابقة تمامًا للتوزيع على الجاير، فقد تزداد بعد التوزيع مساحات صغيرة تُدعى استريشة (ورق مهدور – wasted paper). التقنيات والإضافات الطباعيّةالفن الطّباعي لا يقتصر على الطّباعة المُلوّنّة فحسب، وإنّما تتخلّله العديد من الإضافات الطّباعيّة ومن أهمها: اللّون الإضافي (اللّون الخامس) Extra color print هو عبارة عن لون إضافي يُمكن إسقاطه بعد طباعة التّصميم بألوانه الأربع الأساسيّة CMYK، وعادة يكون هذا اللون فضيًّا أو ذهبيًّا أو حتى أسود، ويُستخدم لأمرين أساسيين: - إضفاء حركة جذّابة على الطّباعة للفت الانتباه (ألم تلحظ يومًا إعلانًا مُميّزًا داخل مجلّة يحوي لونًا فضّيًّا أو ذهبيًّا بارزًا وبقوّة). - يُستخدم أيضًا لإضافة معلومات قابلة للإزالة أو التّعديل على الطّبعة الأساسيّة (مثل الوزن – التّاريخ – عنوان مُعيّن .. الخ)، فلو افترضنا على سبيل المثال تصميمًا لمُنتج مُعيّن يحوي شفرة خيطيّة "Barcode" مطبوعًا فوق التّصميم على هيئة لون خامس إضافي، وتغيّرت هذه الشفرة لاحقًا لسبب مُعيّن، بالإمكان هُنا عدم التكلّف بعمل المُسوّدات والصفائح المعدنيّة الطباعيّة مُجدّداً، وإنما الاكتفاء فقط بتعديل صفيحة الشّفرة الخيطيّة إلى صفيحة أخرى. مُلاحظة: اللّون الإضافي قد لا يكون لونًا خامسًا فقط بل قد يكون لونًا سادسًا أو سابعًا ... الخ (الفكرة هي أنه لون يُضاف بشكل مُنفصل بعد الطّباعة)، ويُسمى هذا اللون في Photoshop بـ Special color، وله قناة لونيّة مُستقلّة داخل مكان الألوان. الختم الحراري Hot Foil Stamping بعد الانتهاء من الطّباعة، بالإمكان وفي مواضع مُعيّنة إضافة طباعة حراريّة فوق التّصميم، كزخرفة أو ما شابه، ويُستخدم اللّون الذّهبي في الغالب لهذا الإجراء. التقنيّة عبارة عن ورق يوضع بين الطّبعة وبين مكبس حراري (جهاز يدوي بسيط غالبًا) بحيث يُطبع الشّكل (المحفور على المعدن) على التّصميم، ويُطلق على هذا النّوع من الطّباعة أيضًا اسم "البصمة”. لتوجيه الموضوع إلى المطبعة يتوجب على المُصمّم إرسال ملف مفتوح مُنفصل يحوي رسمة الشّكل المطلوب طباعته باللون الأسود الدّاكن مع توضيح مكان تموضع الشّكل داخل الطّبعة وإعلام المطبعة باللون المُراد (ذهبي – فضي .. الخ). يُنفّذ هذا النّوع من الطّباعة على الجلد أو الأوراق المُلوّنة غير المطبوعة في الغالب (تُستخدم بشكل كبير في الطّباعة على المصاحف والأجندات المُغلّفة بجلد أو ورق جلدي). التلميع البُقعي Spot UV عبارة عن تقنية جماليّة تُستخدم في مطبوعات المُنتجات أو المجلات أو البطاقات لإضافة لمعة بلاستيكيّة ضمن مواضع مُحدّدة للفت الانتباه، وتُعدّ من أكثر التّقنيات الطّباعيّة الإضافيّة استخدامًا، وتتوفر طبقات مُختلفة من التّلميع البُقعي بحيث تكون النّتيجة ملساء مع السّطح أو تُشعر اللّامس ببروز نافر عن الطبعة. السُلفان Lamination عبارة عن طبقة حماية بلاستيكيّة رقيقة تُلصق بشكل آلي على الطّبعة، تُساهم في حماية الطّبعة من عوامل الجوّ وتزيد الورق أو الكرتون المطبوع متانة، وتُضفي عليه ثقلًا لونيًّا. هُناك نوعان من السُلفان (اللّامع Gloss – والمت أو المطفي Matte ). على المُصمّم أن يكون حريصًا على توجيه المطبعة إلى أفضل نوع يُناسب تصميمه بحسب الشّكل العام للتّصميم وحسب الأسواق الموجّهة إليه. مُلاحظة: يبرز السُلفان اللّميع بشكل أفضل في تصاميم المُنتجات ذات الألوان البرّاقة وتُعطيها شكلًا بلاستيكيًّا لميعًا، أما السُلفان المت أو المطفي تزيد من ثقل المطبوعات التي تحمل الطابع الفخم (مثال: مطويّة "Brochure" لشركة أزياء بألوان بنّية فاتحة وتدرّجات البُني سيكون السُلفان المت أفضل عليه من اللميع). إرشادات عليك اتباعها كمُصمم عند إرسالك التصميم إلى المطبعةللمُنتجات أو المطبوعات ذات الأحرف المقصوصة بطرق غير مألوفة يجب أن تُرفق قوالب القص "die cutting" إلى المطبعة بشكل مُنفصل. رسم قوالب القص بسيط ويُفضّل أن يتم باستخدام برنامج Adobe illustrator نظرًا لدقّة الرّسم، بحيث يُعبّر الخط المُتّصل عن حد القصّ، أما الخط المُتقطّع فيُعبّر عن الطّي (الثّني). يُفضّل إرسال نماذج مطبوعة بشكل مُسبق (إن وجدت) إلى المطبعة لتقوم بدورها بمُطابقة الألوان عند الطّباعة، وإن لم يتوفر الأمر وكان لديك تصميم مُهتم بوصوله إلى أفضل نتيجة خاصّة ترغبها بإمكانك حينها أن تطلب من المطبعة بالتّواجد لديها عند بداية الطّباعة للاطلاع على النّماذج الأوّلية قبل إتمام كامل الطّبعة. معلومات وإرشادات هامّة لضمان أفضل نتائجللحصول على لون صافي اجعل نسبته 100% وباقي النّسب 0%. لاستعراض الألوان الأساسية الأربع بشكل سريع عبر برنامج أدوبي فوتوشوب اضغط Ctrl + 1 و Ctrl + 2 و Ctrl + 3 و Ctrl + 4. يتوجّب عليك كمُصمّم (مُتخصّص في التّصاميم الطّباعيّة) امتلاك كُتيّب (جدول النِمَر اللونيّة - Pantone Color Chart) خاص بالألوان CMYK لسحب أرقام الألوان المرغوبة مُباشرة، وهو يأتي عادة مع الطابعات الكبيرة عند شراءها، لكن بإمكانك البحث عنه بشكل مُنفصل وشراءه عبر أحد المتاجر الإلكترونية. * بالإمكان تحميل الجداول على هيئة ملفات PDF مجانيّة باستخدام الرابط التالي: http://www.tidyform.com/cmyk-color-chart.html حاول على الدّوام استخدام نِمَر لونيّة ثابتة، وخاصة في تصاميم المُنتجات للشركات وأيضاً الهويات Brands، بحيث أنه وببساطة لن تقلق بتغيير المطبعة وستضمن ظهور المطبوعات بنفس درجة اللون بالضبط في كُل مرة. ابتعد عن التدرجات اللونيّة الكثيرة واستخدم التقنيّة التي تجمع بين البساطة والأناقة عبر استخدام ألوان ثابتة واضحة موزّعة بشكل سليم. ابتعد عن الألوان الفاتحة جدًّا (الباهتة) وعلى أقل تقدير اختر كثافة اللون أكثر من 8% حتى تظهر بعد الطباعة، وتذكّر كُلما كانت كثافة اللّون أكثر وقلّ اختلاطه مع ألوان أخرى كُلما كانت النتائج أفضل. استخدم برنامج Adobe illustrator في حالة النّصوص الصّغيرة جدًّا، لأنه يعتمد على التصميم الشُّعاعي عالي الوضوح مهما كبر أو صغر الحجم، بينما Adobe Photoshop يُظهر تكسيرًا في الخطوط الصغيرة جدًّا كونه يعتمد نظام النُقاط Pixels. بالإمكان الدّمج في العمل بين فوتوشوب للرّسوميات والتّعديل على الصّور، وإليستريتور للكتابة. سوف تحتاج أحيانًا كمُصمّم لأن تضع نُصوصًا كتابيّة مُتناهية في الصّغر لسبب صغر حجم المُنتج أو كثرة المعلومات الكتابيّة المطلوبة (كالمُحتويات والقيمة الغذائية التي تُوضع في مواضع مُعينة خلف المُنتج).

على مدى سنوات عديدة، حاول المؤلفون، الفنانون، والمسوّقون تسخير قوّة الألوان لجعل كتبهم، أعمالهم، وشركاتهم بارزة. لكن بما أنّ كلّ شخص منّا يفضّل لونًا معينًا، اتفق أغلب الباحثين تقريبًا على عدم وجود قواعد عامة عندما يتعلّق الأمر بكيفية تأثير الألوان على شعورنا. إذًا، كيف ستنتقي اللون (أو الألوان) التي تناسب علامتك التجارية؟ ذلك اللون الذي يجعلها جذّابة وبارزة، ويتوافق في الوقت نفسه مع الوعود الأخرى لعلامتك التجارية. لنكتشف ذلك! كيف يتعامل عقلك مع الألوان لكي نفهم كيفية تأثير اللون على تفكيرنا، يجب أن نفهم أولًا الطريقتين الأساسيتين اللتين تتعامل عقولنا بواسطتهما مع محفّزٍ كاللون: المعنى الضمني، وهو محفّز داخلي؛ هذا يعني أنّه متأصّل داخل شيء ما، ولا يتشكل المعنى اعتمادًا على عواطفنا أو تجاربنا. المعنى المرجعي، ويعتمد على شبكة من الارتباطات التي تنشط عندما نتعرّض لمحفّز. بعبارة أخرى، نحن نخلق المعنى من خلال ما نفكر به فورًا عندما نراه. لقد أظهرت تقريبًا كل الدارسات التجريبية حول الألوان عدم وجود معنى عام لكل لون. لذا فإنّ لونًا كالأزرق يعدّ في بعض الثقافات علامة للتعاسة، في حين أنّك قد تربطه بالسعادة والأمان. لذلك عليك أن تدرك أنّ معنى اللون لن يكون له وقع على عملائك في حال كنت تختار الألوان على أساس كيفية شعورك. وهذا يدفعنا إلى السؤال: إذا لم يكن بوسعنا استخدام أيّ من المعاني الضمنية للألوان للتأثير على الناس، ما الذي يمكننا فعله؟ فعالّية ارتباطات الألوان (وكيفية استخدامها) من الأساليب الفعّالة لاختيار لون علامتك التجارية أن تستخدم ارتباطات اللون بدلًا من محاولة ربطه بنوع من الرابط الثقافي أو الشخصي. ما الذي يفكّر به المستخدمون عندما يرون ألوان علامتك التجارية؟ أو ما هو أهم من ذلك، ماذا تريد منهم أن يروه؟ ابدأ بالتفكير حول هوية علامتك التجارية. فقد وجد الباحثون في دراسة The Interactive Effects of Colors (التأثيرات التفاعلية للألوان) أنّ العلاقة بين العلامات التجارية والألوان تتوقّف على "المُلاءمة المحسوسة للّون المُستخدم في العلامة التجارية". بعبارة أبسط، يجب أن يُشعِر اللون بالتلاؤم الجيّد مع المنتج أو الشيء المُباع. انظر إلى استخدام Apple للّون الأبيض وكيف أنّه يجسّد قيمهم للتصاميم البسيطة والواضحة، أو إلى استخدام Victoria’s Secret للّون الوردي بكثافة في علامتهم التجارية ومنتجاتهم؛ الشركتان كلتاهما تستخدمان اللون لدعم هويتهما. سيبدأ عملاؤك بتمييزك أكثر من خلال الألوان كلّما زاد استخدامك لها لتعزيز قيم علامتك التجارية. فقد أوضح المؤلفان Labrecque و Milne في دراستهما Exciting red and competent blue: the importance of color in marketing (الأحمر المثير والأزرق المنافس: أهمية الألوان في التسويق): "عندما تقترن العلامات التجارية بالألوان، تصبح ألوان العلامة التجارية وارتباطاتها مرتبطة بالذاكرة، وبالتالي تُنشَأ المعاني الدلالية للألوان من خلال عملية ديناميكية وانعكاسية. كما أنّ تنشيط ارتباطات الألوان، بالإضافة إلى تأثيرها على الوَقْع، الإدراك، والسلوك، يمكن أن يحدث بدون إدراك أو نيّة واعية من الشخص، ويعمل كمحفّز غير واع ذي قدرة على تنشيط حوافز متعددة". تمثل ألوان علامتك التجارية فرصة لبناء معنى رمزي يمكن أن يؤثر على طريقة تفكير الناس عندما يشاهدون علامتك التجارية أو عملك حتّى دون أن يعُوا ذلك. وفي الواقع، وجد الباحثون في دراسة Impact of Color in Marketing (تأثير الألوان في التسويق) أنّ 62% - 90% من الأحكام السريعة حول المنتجات يمكن أن تكون مبنية على اللون وحده. دليل مفصّل إلى إنشاء لوحة ألوان لعلامتك التجارية إنّ عقولنا مبرمجة لرفض كلّ من المعلومات قليلة التحفيز والمعلومات عالية التحفيز، لذا من المهم إنشاء لوحة ألوان تعمل على خلق كلّ من الاهتمام البصري والحسّ بالاتساق. فالمعلومات البصرية الكثيرة جدًا تُشعِر بعدم الانسجام، والمعلومات القليلة جدًا لا يمكنها أن تعبّر عن قيم وهوية العلامة التجارية بوضوح. فيما يلي دليل أساسي سريع يوضّح خطوة بخطوة كيف تُنشِئ لوحة الألوان لعلامتك التجارية. الخطوة 1: اختر الألوان الأساسية يمكنك اختيار اللون الأساسي الذي ستبدأ به حسب رغبتك، ومن ثم ستقوم ببناء الارتباطات حوله بينما تطوّر علامتك التجارية. لكن، من المهم أن تختار في البداية لونًا يتوافق مع قيم علامتك التجارية. فكّر في البني والأخضر لشركات معدات التخييم مثلًا، أو الأزرق الفاتح أو الأبيض للمنظمات غير الحكومية التي توفّر الماء الصافي...وهكذا. بعد أنّ تختار اللون الأساسي، يجب أن تتعلّم بعض نظريات الألوان لتعثر على التدرجات المكمّلة. لنبدأ بعجلة الألوان: طوّر العالِم إسحاق نيوتن عام 1666 عجلة الألوان الأولى القائمة على الألوان الأساسية، الأحمر، الأصفر، والأزرق، وقد ظلّت من الطرق المهمة لوضع نظام الألوان. هناك 3 أنواع أساسية من العجلات: الألوان الأساسية، الألوان الثانوية، والألوان الثالثية (وهي الموضّحة أعلاه). تحتوي عجلة الألوان الأساسية على ثلاثة ألوان فقط: الأحمر، الأصفر، والأزرق، والتي تعدّ، في نظرية الألوان التقليدية، الألوان الصبغية الثلاثة التي تُشتق منها بقية الألوان. وتتضمّن عجلة الألوان الثانوية الألوان الأخضر، البرتقالي، والأرجواني؛ أي الألوان التي يُتحصَّل عليها بدمج الألوان الأساسية معًا. أمّا عجلة الألوان الثالثية فتحتوي على تدرجات مثل البرتقالي المصفرّ، البرتقالي المحمرّ، الأخضر المزرقّ، والأخضر المصفرّ. ويُتحصَّل على هذه الألوان بدمج الألوان الأساسية والثانوية معًا. ملاحظة: يمكن عمل عجلة ألوان أكثر تعقيدًا، لكننا سنتوقف إلى هذا الحد في هذا المثال. بما أنّه أصبح بإمكاننا الآن رؤية التناسب الطبيعي للألوان المختلفة، حان الوقت لمعرفة كيفية عمل هذه الألوان معًا. وكما في الموسيقى، يمكنك خلق التوازن والاهتمام من خلال انسجام الألوان. إذا نظرنا إلى عجلة الألوان سنجد أنّه يمكن خلق انسجام الألوان بعدد من الطرق المختلفة: الطريقة الأولى هي باستخدام الألوان المتقاربة: ويقصد بها الألوان الثلاثة المتجاورة. على سبيل المثال، إذا أردت أن يكون الأخضر هو اللون الأساسي لشركتك، سيكون اللونان المقاربان المكمّلان له هما الأخضر المصفرّ والأخضر المزرقّ. الطريقة الأخرى، والتي يمكن أن تكون أكثر لفتًا للنظر، هي باستخدام الألوان المكمّلة؛ ويقصد بها الألوان المقابلة لبعضها مباشرة على عجلة الألوان، مثل الأخضر والأحمر، أو الأصفر والبنفسجي. وأخيرًا، إذا رغبت في التوسّع أكثر والعثور على ألوان أخرى منسجمة، يمكنك استخدام الألوان المُقاربة المكمّلة للألوان المكمّلة الرئيسية. في هذه الحالة يمكن أن تتضمّن الألوان الأربعة لعلامتك التجارية الأخضر، الأخضر المصفر، الأحمر، والأحمر المائل إلى الأرجواني. كانت هذه نظرة أساسية جدًا على نظرية الألوان، وهناك بعض المصادر المفيدة التي يمكن أن تساعدك في العثور على الألوان المكمّلة. الخطوة الثانية: اخلق المزيد من الانسجام (أو التباين) صحيحٌ أنّ الألوان المنسجمة والمكمّلة مهمة للشعارات والمواقع، إلّا أنّ بعض الحالات تحتاج إلى استخدام لون معين للفت الانتباه. ووفقًا لتأثير العزلة، يتم تذكّر العناصر، النصوص، والصور بوضوح أكثر إذا كانت ملفتة جدًا للنظر. فعندما يكون أحد هذه الأشياء مختلفًا عن غيره، سيكون بإمكاننا تذكّره بسهولة أكبر. تتمثل إحدى الطرق الجيدة لجعل العناصر بارزة، كنماذج الاشتراك أو الدعوة إلى إجراء call-to-action، باستخدام لون غير منسجم مع لوحة الألوان الرئيسية. وكما تلاحظ من خلال المثال أعلاه، يجذب الزر الأحمر الفاقع على الخلفية ذات اللون الأزرق الفاتح انتباهنا على الفور. للعثور على مثل هذه الألوان المتباينة، تلاعب بألوانك المكمّلة، ولاحظ كيف تتأثر الألوان المختلفة عند وضعها جنبًا إلى جنب. هل تلاحظ كيف يبدو اللون الأصفر نفسه مختلفًا نسبة إلى لون الخلفية في المثال أعلاه؟ إذ تجده أكثر زهاءً مع الأسود، وأقّل إشراقًا مع الأبيض. ويندمج ويبهت أكثر مع اللون البرتقالي، بينما يبرز مع الأزرق السماوي. ما تبقى لك بعد أن تنتهي من إنشاء لوحة الألوان الرئيسية لعلامتك التجارية هو التجربة. الخطوة 3: أنشئ مجموعة من قواعد الألوان بعثورك على الألوان التي تريد استخدامها يحين وقت إنشاء مجموعة من القواعد. هنا ستقوم بعمل توافق بين قيم علامتك التجارية والألوان. يمكن أن تكون هذه العملية أساسية جدًا لدرجة القول بأنّ "الأحمر يدل على الابتكار، والأخضر يدل على الوعي البيئي". إذا كنت تواجه صعوبة في تحديد قيمك الأساسية، حاول أن تكتب قصة من 4 كلمات: ابدأ بسؤال نفسك: ما هي الصفات التي تتبادر إلى ذهنك كلّما تحدثت عن شركتك؟ اكتبها ولا تهمل أيّة أفكار. بعد ذلك، تخلّص من الصفات غير ذات الصلة تمامًا ونظّم بقية الصفات في مجموعات. يمكن أن تتضمّن مجموعاتك واحدة تتحدّث عن مزايا علامتك التجارية، أو أخرى تصف عملاءك/جمهورك. بعد إنشاء المجموعات، قم بتقليصها حتّى تحصل على 4 مجموعات. اختر كلمة أساسية واحدة من كل مجموعة. الآن رتّب تلك الكلمات الأربعة من الأكثر إلى الأقل أهمية. عيّن لونًا رئيسيًا للكلمة الأكثر أهمية، ولونًا مكمّلًا للكلمة التي تليها بدرجة الأهمية. بعد ذلك، عيّن لبقية سماتك ألوانًا معينة. بذلك تكون قد انتهيت من إنشاء قواعد الألوان. بالنسبة لشركتك، ستكون هذه الألوان ملائمة دائمًا للقيم التي خصصتها لها. وبمرور الوقت، سيبدأ العملاء بفهم معانيها، سواء بوعي أو بدون وعي. خاتمة من المذهل أن أرى، بوصفي كاتبا يكتب من أجل لقمة العيش، مدى سرعة الألوان في تمثيل القيم التي يمكن أن تتطلب صفحات للتعبير عنها بالكلمات. لهذا السبب يعدّ فهم عمل الألوان وتأثيرها، حتّى لو كان على مستوى أساسي، من الطرق الرائعة والسريعة لإضفاء معنى فريد لعملك. لوحة الألوان الخاصة بعلامتك التجارية هي فرصتك لتصبح معروفًا ومميزًا. ولهذا السبب يمكنك أن تميّز جهاز iPhone على الجانب الآخر من الشارع، أو يافطة ماكدونالدز على بعد أميال على الطريق. لذا اختر لونًا وانطلق! ترجمة – بتصرّف - للمقال How to pick the perfect colors for your brand لصاحبه: Jory MacKay. حقوق الصورة البارزة محفوظة لـ Freepik

بغض النظر عن نوع العمل الذي تقوم به، كُن على يقين من أنّ معظم المشاريع تتطلب قص صورة ما من خلفيتها. أحياناً تكون العملية سهلة جداً إذا تمّ تسليط إضاءة استوديو احترافية في الصورة، لكنها ستكون أصعب إذا ما كانت الخلفية تتضمن تفاصيل دقيقة. في هذا الدرس سأقدّم نظرة عامة على مجموعة من تقنيات القص التي تعلمتها على مر السنين وسأقدم المشورة حول الأسلوب الأفضل للاستخدام. اختيارات سريعة ورديئةأحياناً تحتاج إلى قص شيء ما بسرعة من الخلفية وبدون طرح أية أسئلة. إن لم يكن من المفترض أن تكون النتيجة النهائية دقيقة تماماً فهناك عدة أدوات في الفوتوشوب تقدم لك حلولاً سريعة وسهلة. أداة الممحاة Eraserإن كان المطلوب إزالة الخلفية من الصورة ببساطة فإنّ كل ما عليك القيام به هو فركها بأداة الممحاة Eraser tool. الفكرة الأساسية ليست سيئة، ولكن هناك تقنيات أفضل بكثير من الممحاة وهي لا تخرّب الصورة، كما سنرى لاحقاً عند استخدام قناع الطبقة Mask. كيف نستخدم أداة الممحاةاختر فرشاة الممحاة واضبط إعدادات النعومة والحواف. بإمكانك بعدها أن ترسم مساحة الخلفية مع الانتباه والحذر حول حواف المواضيع التي تهمك والتي لا تريد تخريبها. متى نستخدم أداة الممحاةإنّ نعومة الفرشاة ستحقق نتائج ناعمة، وخصوصاً إذا استخدمت Wacom tablet (جهاز لوحي يستعمل مع قلم خاص للرسم باحترافية على الكمبيوتر) لتسريع العملية ولتتحكم بشكل أفضل بالأداة. على كل حال إن الأثر المدمّر للممحاة ستجعلك تبدو أبلهاً إذا ما ارتكبت أيّ خطأ لذلك أنصحك باستخدام قناع الطبقة Layer Mask بدلاً من ذلك. أداة العصا السحرية Magic Wandغالباً ما كانت العصا السحرية أول أداة قمنا بتجربتها كمبتدئين بالفوتوشوب ولكن كلّما زادت خبرتك أكثر كلّما أدركت أن قدرات هذه الأداة محدودة أكثر. مع ذلك فإنّ العصا السحرية أداة صغيرة رائعة لقص الصور البسيطة والسهلة التي تتميز بتباين واضح بين الحواف. كيفية استخدام أداة العصا السحريةانقر على الجزء الذي تريد تحديده والفوتوشوب سيقوم بكل العمل من أجلك. يمكنك أيضاً أن تتلاعب بمستوى التسامح Tolerance لتضبط التحديد بشكل دقيق إلّا أنّ القيمة الافتراضية غالباً ما تفي بالغرض. متى نستخدم أداة العصا السحريةإنّ هذه الأداة رائعة لتحديد مساحات في صورة ذات حواف متنافرة بين أجزاءها ولتحديد الألوان الجامدة وأيضاً التباين المرتفع. أداة التحديد السريع Quick Selectionأداة التحديد السريع تتبع أداة العصا السحرية. وبدلاً من السماح للفوتوشوب باتخاذ كافة القرارات (كما في العصا السحرية) فإنّ هذه الأداة تُمَكّنُك من الرسم بالضبط فوق المنطقة التي تريد تحديدها والفوتوشوب سيقوم بتطبيق التحديد وفقاً لتعليماتك. إنّها أسهل بكثير من التجريب والخطأ في إعدادات Tolerance للعصا السحرية. كيف نستخدم أداة التحديد السريعنجدها في نفس مجموعة الأدوات التي تضم العصا السحرية وهي تستعمل أسلوب الفرشاة لرسم التحديد. سيقوم الفوتوشوب باحتساب المنطقة المراد تحديدها وفقاً للحواف القريبة. اضبط حجم الفرشاة باستخدام [ و ] مفاتيح الأقواس لتتحكم بالدقة. بإمكانك إلغاء تحديد بعض المناطق بالضغط على مفتاح Alt والنقر على المناطق المراد إزالة التحديد عنها. متى تُستَخدم أداة التحديد السريععندما تحتاج لقدرة تحكّم أكبر من العصا السحرية ولكنك لا تزال غير مهتم بالدقة العالية للنتيجة النهائية عندئذ ستكون فرشاة التحديد السريع هي الأداة المناسبة لهذه المهمة. التحديد اليدويقد تكون مملة، ولكن أفضل نتائج القص غالباً ما تأتي من الرسم اليدوي للتحديد حول موضوعك. سرعان ما أصبح مصممو الرسوميات محترفين في استخدام أداة القلم وذلك من خلال الاستخدام اليومي لهذه الأداة. أداة الحبل المضلّع Polygonal Lassoأداة الحبل هي أداة أخرى اعتمد عليها المبتدؤون حتى وصلوا تدريجياً لاستعمال أداة القلم. أداة الحبل رائعة للتحديد السريع ولكنها تعتمد على وجود سلسلة حواف مستقيمة وإذا نقرت بالخطأ نقرة مزدوجة وأغلقت التحديد قبل الأوان فإنّ ذلك سيجعل هذه الأداة كابوساً خصوصاً عند القيام بتحديدات معقدة. كيف نستخدم أداة الحبللهذه الأداة ثلاثة أنواع وهي الرسم الحر Freehand، المضلّعات Polygonal والخيارات المغناطيسية Magnetic. أداة الحبل المضلّع هي الأكثر استخداماً. كل ما عليك القيام به هو تتبع الصورة من خلال سلسلة من النقرات حتى تصل لنقطة البداية مجدداً وذلك لكي تغلق التحديد أو بالنقر المزدوج حيث يغلق التحديد مع حافة مستقيمة تمتد بين نقطتي البداية والنهاية. وفي حالة الاستمرار بالضغط على مفتاح Shift أثناء التحديد فإنه سيتم التحديد باتجاه الزاوية 45° والزاوية 90° لرسم تحديدات متّجهة بدقة. متى نستخدم أداة الحبلإنّ المضلعات المختلفة لهذه الأداة تحديداً غير فعّالة لعملية القص واللصق حيث غالباً ما تقص خارج الموضوع. وإن كان موضوعك معقّد التفاصيل فسوف تفشل بالتأكيد مع هذه الأداة وسيتوجب عليك استخدام أداة القلم. أداة القلم Pen toolأداة القلم مفيدة أكثر من أداة الحبل. بالنسبة للمبتدئين بإمكانكم رسم خطوط منحنية، وهذا مفيد لأولئك اللذين يعيشون خارج عالم ماين كرافت (لعبة مشهورة بعدم وجود أي منحنيات فيها). أداة القلم تقوم بإنشاء مسارات يمكن تعديلها وحفظها لاستخدامها مستقبلاً، وهي ميزة رائعة عند العمل على مشاريع حقيقية. كيفية استخدام أداة القلمإنّ منحنيات البيزيير Bezier هي من الآليات الأساسية لأداة القلم وهي تحتاج إلى درس كامل لشرحها، ولكن بمجرد أن تتقن هذه الأداة ستصبح صديقك الجديد المفضّل. تتبع صورتك لتصنع مساراً دقيقاً ببعض البكسلات (البكسل هي وحدة قياس الصور النقطية) داخل حواف موضوعك لتجنب التقاط أي جزء من الخلفية المُراد القص منها، ثم أغلق المسار عند نقطة البداية. هذا المسار يمكن تعديله بواسطة أداة التحديد المباشر أو يمكنك حفظه بإعطائه اسماً جديداً في لوحة المسارات Paths panel. يمكنك تحويل مسارك الذي قمت برسمه بهذه الأداة إلى تحديد في أي وقت. يمكنك حتى إضافة جوانب لإلغاء الحواف المزعجة. متى نستخدم أداة القلمأداة القلم هي بمثابة سكين الجيش السويسرية بالنسبة لأدوات الفوتوشوب. لا يوجد الكثير من الحالات التي لا يمكن استخدامها فيها ولكن قد يكون هناك تقنيات أخرى أسرع وخصوصاً عندما تحاول معالجة الأشياء المعقدة مثل الشعر والفراء أو التفاصيل الدقيقة. الاختيارات اللونيةالاختيارات اللونية هو اسم استخدمته لوصف التقنيات التي تستخدم التباين والألوان في الصورة لصنع التحديد. هذه الطرق عظيمة للتفاصيل الشديدة التعقيد في الصور حيث لن ينفع معها رسم التحديد يدوياً. القنوات Channelsكل الصور تتكون من قنوات الأحمر، الأخضر والأزرق التي تحوي كل منها على درجة لونية مختلفة من الصورة. القنوات لديها قابلية إنشاء معظم التحديدات الدقيقة للتفاصيل البالغة الدقة والتعقيد مثل الشعر أو الفرو ولكنها لا تعمل بشكل جيد مع الخلفيات المعقّدة أو حيث يكون هناك تباين ضعيف. كيفية استخدام القنواتشاهد قنوات الأحمر، الأخضر والأزرق بشكل فردي لتجد الأكثر تبايناً بين المناطق التي تريدها وبين المناطق التي لا تريدها. اسحبها إلى فوق new icon (أيقونة جديدة) لصنع نسخة جديدة منها. يمكنك زيادة التباين أيضاً عن طريق ضبط المستويات Levels أو المنحنيات Curves لتعتيم الألوان السوداء وتفتيح الألوان البيضاء. عندما تحقق التباين الجيد بين التفاصيل الدقيقة لصورتك ستحتاج لتعبئة المناطق المتبقية من التحديد المرغوب يدوياً بالفرشاة السوداء. حمّل تحديد قناتك بواسطة الضغط على CMD أو Ctrl مع الضغط على القناة اللونية المحددة من لوحة القنوات. متى نستخدم القنواتكلّما كان لديك صورة واضحة التباين بين الموضوع المراد قصّه وبين الخلفيّة كلّما كان أسلوب القنوات للتحديد أفضل وتقدّم لك أنظف تحديد ممكن وخصوصاً عند تحديد الشعر أو الفرو ولكن بشرط أن تكون الخلفية واضحة ونظيفة. مجال اللون Color Rangeستجد هذه الميزة في قائمة التحديد Select وهي أداة يدوية يمكن استخدامها لإنشاء تحديد سريع مبني على درجات اللون في الصورة. وهي مفيدة خصوصاً لتحديد الإضاءات highlights أو الظلال shadows أو إن أردت تحديد منطقة بلون معين من الصورة. كيفية استخدام مجال اللوناذهب إلى قائمة: Select > Color Range لتفتح خيارات مجال اللون. يمكنك الاختيار بين الألوان البسيطة (لون المقدمة الذي قمت باختياره) أو اختيار الأضواء الساطعة (الأجزاء الفاتحة) Highlights، الدرجات اللونية النصفية Midtones أو الظلال (الأجزاء الداكنة) Shadows إذا أردت فقط اختيار المناطق الفاتحة أو الداكنة في الصورة. متى نستخدم مجال اللونإنّ أفضل استخدام لهذا الأسلوب هو التحديد السريع للخلفيات البيضاء من لقطات الاستوديو وبعد ذلك سنقوم بعكس التحديد من قائمة التحديد لتحديد الموضوع المطلوب بسهولة. تحديد القناع Maskالأقنعة هي أداة للتعديل تحقق لك أقصى حدود عدم التخريب أثناء التعديل. بدلاً من مسح الصورة باستمرار هي تقوم بإخفاء الأجزاء الغير مرغوبة فقط وسيمكنك تعديل التحديد لاحقاً. ارسم أقنعتك يدوياً أو اصنعهم باستخدام أي تقنية من تقنيات التحديد المذكورة سابقاً لتزيل بشكل مؤقت أجزاءً من صورتك. أقنعة الطبقة Layer Masksوتطبّق على طبقة واحدة بالضغط على أيقونة Add Layer Mask أسفل لوحة الطبقات. وستكون المناطق السوداء في القناع هي المناطق المخفية من الطبقة. كيفية استخدام أقنعة الطبقةلقد تحدّثنا سابقاً عن كون أسلوب أقنعة الطبقة أفضل بديل لأداة الممحاة. لاستخدام هذه التقنية سيتوجب عليك استعمال أداة الفرشاة في مكان استعمال الممحاة ورسم تلك المناطق الغير مرغوبة بالفرشاة السوداء. الفرق هنا أنّه في حال ارتكبت أي خطأ فإنّك ستتداركه بالرسم باللون الأبيض مكان وقوع الخطأ. متى نستخدم أقنعة الطبقةإنّ أفضل طريقة لاستخدامها هي أن تستخدم مع تقنيات أخرى للتحديد وذلك لضمان التعديل غير المُخَرّب. أقنعة القُصَاصَة Clipping Masksإنّها شبيه بأقنعة الطبقة إلّا أنّها يمكن تطبيقها على مجموعة من الطبقات. مبدأ العمل واحد لكلا الأسلوبين حيث المناطق السوداء مخفية والبيضاء ظاهرة. كيفية استخدام أقنعة القُصَاصَةبالضغط على مفتاح Alt وبالنقر بين طبقتين في لوحة الطبقات أو بالزر الأيمن على الطبقة المعينة ومن ثم اختيار Make Clipping Mask من القائمة. تذكّر أن تضع قناع القصاصة تحت الصورة الرئيسية ضمن مجموعة طبقات. متى نستخدم أقنعة القُصَاصَةإنّها فعّالة بشكل خاص مع التحديد اللوني. قم بتعبئة طبقة أحادية اللون أو تحديد مجال اللون بالأسود في طبقة جديدة ثم طبّق هذه الطبقة كقناع قُصَاصَة. نصائح احترافيةالآن أصبح لديك ترسانة كاملة من تقنيات التحديد التي ستجعلك جاهزاً للتصدّي لأي نوع من أنواع الصور في مشاريعك ولكن لدي بعض نصائح التحديد الإضافية التي ستساعدك على تحقيق نتيجة أفضل. استخدام أداة تنعيم الحواف Refine Edge لقص الشعر والفروتقنية القنوات ممتازة لقص نموذج لقطات بخلفيات استوديو مثالية ولكن بالنسبة لبقية الأوضاع التي لا تكون فيها الخلفية مثالية فإننا سنستخدم أداة تنعيم الحواف Refine Edge والتي ستكون الخَيَار الأفضل. هذه الأداة يجب تسميتها فعلياً "أداة الشعر" حيث أن استخداماتها تتمحور حول الشعر بشكل خاص. هي تتناغم مع التحديد الأساسي للعصا السحرية / القلم / الحبل وتمدّد هذا التحديد بذكاء ليشمل تلك التفاصيل الدقيقة. تتبع المسار حول الموضوع المراد تحديده ولكن بشكل قريب من حدود مناطق الشعر أو الفرو بدون أن نقلق بشأن تنعيم الشُعَيرَات. اذهب إلى القائمة Select > Refine Edge وقم بزيادة قيمة نصف القطر لرؤية الشعر يظهر بشكل سحري في التحديد. وسّع خيارات الفرشاة وارسم فوق مناطق أطراف الشعر التي تريدها ضمن التحديد مع أداة تنعيم نصف القطر Refine Radius tool. انتقل إلى أداة تحسينات الممحاةErase Refinements tool وارسم حول أي منطقة لا تتطلب تعديلات تنعيم الحواف التي قمنا بها للتو. سيكون التحديد النهائي جيد خصوصاً فيما يتعلق بتحديد الشعر حتى بوجود الخلفيات ذات التفاصيل المعقّدة طالما يوجد ما يكفي من التباين لإتمام العملية. القيام بعملية Defringe لإزالة الهالات والحدودفي بعض الأحيان عندما تقوم بلصق ما قمت بقصّه داخل خلفية داكنة ستلاحظ أن لها حواف رقيقة فاتحة أو هالة. هناك طريقة رائعة وسهلة لإزالتها باستخدام خَيَارDefringe. اذهب إلى القائمة Layer > Matting > Defringe وأدخل القيمة px 1 في الخيارات. بمجرد النقر مرة واحدة على هذا الأمر ستختفي كل الحدود البشعة على الفور. كن حذراً فقد تخرّب لك القواطع ذات التفاصيل الدقيقة جداً. استخدام أدوات Dodge و Burn على الصورة لضبط التباينأسلوب التحديد اللوني التي تَستَخدم القنوات يمكنها أن تُولّد تحديدات ممتازة إذا كان فقط التباين والدرجة اللونية في الصورة بالشكل الصحيح. المستويات Levelsوالمنحنيات Curves ستعدّل الصورة كاملة ولكن يمكنك تنعيم المناطق المحددة بأدوات Dodge و Burn. استخدم أداة Dodge لتفتيح مناطق في الخلفية كالسماء مثلاً. فالسماء الزرقاء ستبدو بلون رمادي متوسط في تحديدات القنوات ولكن يمكن تفتيحها بإضافة المزيد من التباين بينها وبين موضوعك الأساسي. أداة Burn ستساعدك على تعتيم مناطق داخل التحديد والتي تكون دقيقة جداً ولا يمكن رسمها بالفرشاة السوداء. قم بتغيير الوضع إلى Shadows، Midtones أو Highlights لاستهداف المنطقة الصحيحة بأمان. إعادة رسم الشعر مجددافي بعض الأحيان سيكون من المستحيل إنشاء تحديد نظيف ودقيق لشعر شخص ما بسبب الخلفية الشديدة التعقيد وكثيفة التفاصيل. في تلك الحالة يوجد نصيحة أخيرة يمكنها أن تنقذ الوضع وهي رسم بعض الشُعَيرَات الجديدة. اصنع تحديد قاسي حول خط شعر موضوعك وألصق ما قمت بقصّه في طبقة جديدة. ثم قم بتخفيف مستوى شفافية الصورة الأصلية الموجود في الأسفل في لوحة الطبقات. استخدم أداة Smudge مع فرشاة ناعمة لرسم شُعَيرَات منفردة. ابدأ مع فرشاة ناعمة بمقاس 3-4 px لتجسيد القاعدة السميكة ثم خفف الفرشاة تدريجياً لرسم نهايات الشعر الناعمة. سيبدو هذا العمل مملاً للغاية ولكنه لن يستغرق وقتاً طويلاً خصوصاً إذ استخدمت الجهاز اللوحي Wacom Graphics tablet. اشتري إضافات فوتوشوب Photoshop pluginأنا ليس لدي الكثير من الخبرة في إضافات الفوتوشوب Plugins لذلك لا يمكنني منحكم نصائح احترافية ولكنني أعلم أنّ هناك مجالات للتحديد كثيرة قائمة على الإضافات في الفوتوشوب. أكثرها شعبية هو إضافة Fluid Mask الذي يحتوي على ميزات مصممة خصيصاً لاختيار الشعر المعقّد، الأشجار، الزجاج والأقمشة شبه الشفافة. إن كنت ترى بأنّك تضيّع ساعات طويلة في قص الصور ربما ستجد مساعدة إضافية في إضافات الفوتوشوب Plugins التي تساعدك على تسريع العمل وتمنحك نتائج أفضل. ترجمة -وبتصرّف- للمقال: The Ultimate Guide to Cutting Stuff Out in Photoshop لصاحبه Chris Spooner.

سأقدِّم لك أداةً رائعةً للتصميم: أرأيت؟ ألم ترَ؟ إنها الفراغات البيضاء! حسنًا، ربما مزاحي لم يكن في محلّه، أعترف بذلك. أنا آسف. صحيحٌ أنَّ تعريفي للفراغات البيضاء لك لم يكن مثاليًا، لكن الفراغات البيضاء هي من أهم الأدوات في تصميم الويب، ولكن يغفل عنها الناس معظم الوقت. أعلمُ أنَّ من الممتع العمل على عناصر أخرى من تصميم الويب، مثل سمة الألوان، أو الخطوط، أو التخطيط العام للصفحة… خصوصًا عندما تُنشِئ مشروعًا لعميلٍ ما (ملاحظة شخصية: لا أظن أنَّ هنالك عميلًا في العالم يلقي بالًا لطريقة تحسين الفراغات البيضاء لموقعه الجديد!). ومع ذلك، قد تستفيد من الفراغات البيضاء خيرَ استفادة إن استطعت استخدامها استخدامًا صحيحًا. وسأتطرّف في هذا الدرس إلى آلية فعل ذلك. لماذا الفراغات البيضاء مهمة في تصاميم الويب بدايةً، الفراغات البيضاء ليست مفهومًا جديدًا في عالم التصميم، إذ استعمِلَت لقرون كالأداة رقم 1 لإعطاء تركيز على العناصر المهمة في التصميم. والأمر سيانٌ في يومنا هذا. على سبيل المثال، إذا كانت لديك لوحةٌ جميلةٌ وتريد أن تُظهِر اهتمامك بها، فإن أفضل طريقة هي: (1) وضع إطار حولها، و (2) ألّا تضع أيَّ شيءٍ آخر على ذاك الجدار (انظر الصورة أدناه). وبشكلٍ مشابه، أفضل طريقة لإعطاء أولوية لأحد عناصر صفحة الويب هي عدم وضع أي شيء حوله، وكلما قلَّت الأشياء التي حول ذاك العنصر، كلما كان ذلك أفضل. ما رأيك أن ترى مثالًا بدلًا من إطالة الكلام (الصورة خيرٌ من ألف كلمة). هذا موقعٌ تدخل إليه يوميًا: يستعمل موقع Google هذا المظهر منذ سنوات، وربما أصبح شكله مألوفًا، لهذا قد لا تفكّر في تصميم الصفحة كثيرًا. لكن دعنا نتوقف قليلًا ونفكِّر كم أنَّ من السهل أن تضع Google بعض الأشياء الإضافية في الصفحة. إذ يستطيعون تضمين الأخبار (من Google News) وسيكون بعض الأشخاص سعداء بذلك. ويستطيعون أيضًا تضمين مربع لبريد Gmail لكي يتمكن الجميع من التحقق من الرسائل التي تأتيهم على بريدهم مباشرةً. أو أن يضعوا مربعًا لتقويم Google، وهلم جرًا… الاحتمالات والإمكانيات غير محدودة، إلا أنَّ Google قرروا عدم وضع أيّا من تلك الاحتمالات في الصفحة الرئيسية؛ إذ قرروا أنَّ يضعوا حقل البحث فقط (بالإضافة إلى الشعار، وبعض الأشياء في الركن العلوي الأيمن إن سجَّلتَ دخولك). لكن لماذا؟ لماذا وضعوا حقل البحث فقط؟ الجواب بسيطٌ للغاية، وإنّي واثقٌ أنَّك تعرفه مسبقًا: بوضع حقل البحث في الصفحة بمفرده، فسيظهر الغرض من الصفحة جليًا أمامك. فسيعلم زائر الصفحة بعد دخوله إليها مباشرةً ما الغرض منها وكيف يستعملها، فلا يضيع وقته بمحاولة «فهم» ما الذي يجري في الصفحة. وهذا يتوافق تمامًا مع هدف Google الرئيسي. يريدونك أن تستعمل محرك البحث الخاص بهم، وتُشكِّل الفراغات البيضاء أحد الأشياء التي يستعملها مطورو Google لكي يحثوك على فعل ذلك. لتلخيص ما سبق، يمكن للفراغات البيضاء المُستعمَلة استعمالًا صحيحًا أن: تساعد في حثّ المستخدم على القيام بأمرٍ معيّن تساعد على التركيز على أحد العناصر تساعد في توضيح الغرض من الموقع تعطي تركيزًا على الأشياء المهمة تجعل الأشياء التي ليست مهمة جدًا بأولوية منخفضة تساعد الزائر على المسح البصري للصفحة وتقرير ما الذي يهمه مباشرةً سنتحدث الآن عن كيفية استعمال الفراغات البيضاء بفعالية، بعد بأخذ كل ما سبق بعين الاعتبار. كيف تستعمل الفراغات البيضاء بفاعلية في تصاميم الويب لنتحدث عن الفراغات البيضاء من ناحية منهجية التعامل معها، وبعض المعلومات التقنية الأساسية لكيفية إنشاءها (لكنا لن نشرح الأدوات والطرق المستعملة لذلك). أولا: استعمل الفراغات البيضاء لتدعيم الهدف الأساسي من موقعك حسنًا، هنالك هدفٌ من إنشاء كل صفحةٍ أو كل موقعٍ على الويب. ومن الممكن أن يكون هنالك هدفٌ وحيدٌ لكل صفحات الموقع، أو أن يكون لكل صفحةٍ هدفٌ خاصٌ بها. أيًّا كان، يمكنك أن تستعمل الفراغات البيضاء لجعل تلك الأهداف واضحةً كالبدر في الليلة الصافية. على سبيل المثال، لنلقِ نظرةً على الصفحة الرئيسية لموقع Bigcommerce: من الواضح أنَّ الهدف الرئيسي من الصفحة هو إقناعك -أي الزائر- أن تُسجِّل تجريبيًا في Bigcommerce. وفي الواقع، لا يوجد أيٌ شيءٍ في الصفحة سوى عنوان بخطٍ كبير الذي يحاول إقناعك، بالإضافة إلى فراغات بيضاء كبيرةٍ حوله. حسنًا، تُمثِّل الصورة مثالًا عن المنتج، لكنها موجودةٌ في مركز الصفحة، مما يزيد في إضفاء الأهمية على العنوان. لم يسبق لي التّعامل مع Bigcommerce، إلا أنني متأكدٌ أنَّهم يستطيعون إضافة أشياءٍ كثيرةٍ في الصفحة الرئيسية؛ إلا أنَّهم قرروا عدم فعل ذلك. لماذا؟ لتدعيم الغرض الرئيسي من الصفحة. ثانيا: استعمل الفراغات البيضاء للحث على القيام بإجراء معين هذه إحدى قواعد التصميم الجيد للويب: افترض دومًا أنَّ الزائر لا يعرف ماذا عليه أي يفعل في الخطوة القادمة. أنَّى لهم أن يعلموا؟ لا تنسَ أنهم لم يصمموا أو يبرمجوا الصفحة، وإنما أتو لتوهم إليها … ربما عن طريق الخطأ! استعمل الفراغات البيضاء لمساعدة الزوار ليعلموا ماذا عليهم أن يفعلوه. الفكرة بسيطة: إذا لم يكن هنالك الكثير من الأشياء في الصفحة فيمكن للزائر أن يتفاعل مع الأشياء القليلة المتبقية في الصفحة. هذا مثالٌ من Crazy Egg: قد نعتبر أنَّ الصفحة السابقة فارغة تقريبًا، إذ أنَّ التصميم شبيهٌ جدًا بتصميم صفحة Google الرئيسية؛ لكنه يوضِّح ماذا يستطيع أن يفعل المستخدم. حتى لو لم تتعامل مع Crazy Egg من قبل، فيمكنك أن تعرف ماذا عليك أن تفعل بسرعة. حيث يوجد حقل إدخالٍ فيه تلميحة ("Your website URL") وزر يقول "Show Me My Heatmap". الغرض من هذه الصفحة واضحٌ ألا وهو حثّ المستخدم على اتخاذ إجراء، وتساعد الفراغات البيضاء بذلك، وتجعل الصفحة أكثر "نظافةً". ثالثا: ليس من الضروري أن تكون الفراغات البيضاء "بيضاء" ربما هذه اللحظة مناسبة لكي أصحِّحَ لبسًا في المفاهيم: ليس من الضروري أن يكون لون الفراغات البيضاء هو اللون الأبيض. بأبسط الكلمات، الفراغات البيضاء تعني عدم وجود أي عناصر ذات محتوى، ولا تعني أنَّ تلك الفراغات لونها أبيض. بهذا الخصوص، تستطيع استخدام مختلف العناصر كفراغات بيضاء. يمكنك أن تستعمل الألوان التي تحبها، على سبيل المثال Marshall: أو يمكنك أن تستعمل خلفية مشوشة (blurred) أو نقوش. مثالٌ من Zapier: في النهاية، يمكنك أن تخاطر باستخدام صور غير مشوشة لطالما كان هنالك تباينٌ كبيرٌ بينها وبين محتوى الصفحة. يمكنك رؤية مثالٍ عمليٍ عنها في موقع Grammarly: رابعا: استخدم الفراغات البيضاء في القسم العلوي للصفحة شاعت في الآونة الأخيرة ما نسميه أقسام hero‏ (hero sections) أو صور hero ‏(hero images) التي هي الأقسام التي تظهر في أول الصفحة والتي تسترعي انتباه الزوار. ترويسة الموقع أو قسم hero هو المكان الملائم لاستخدام الفراغات البيضاء. حيث ستجد أنَّه من السهل جدًا استعمال الفراغات البيضاء في تلك الأماكن، وستعطيك مكانًا رائعًا للتحدث فيه عن خدمتك التي تقدمها. الذي أقصده هو أنَّ هذا القسم في أعلى الصفحة وسيراه كل زائر… حيث لا يمرر إلى أسفل الصفحة إلا القليلون، بينما سيرى جميع الزوار القسم العلوي منها. لذا ركِّز على هذا وتأكّد أن تستغل الفراغات البيضاء جيدًا في هذا القسم. على سبيل المثال، إحدى صفحات موقع Teespring: سنرى الكثير من العناصر في القسم الذي يلي قسم hero مع فراغات بيضاء قليلة. إلا أنَّ المنطقة العلوية تقوم بعملها على أتم وجه بدعم بتدعيم الهدف الرئيسي من الصفحة وتوضيح الأمور للزائر. خامسا: استخدم الفراغات البيضاء للتلاعب بالمشاعر هنالك الكثير من الأدوات بحوزتك إن كنت تسعى خلف التأثير عاطفيًا على الزائر فيمكنك أن تستعمل الألوان، أو صورة جيدة، أو قد تستفيد من الفراغات البيضاء! جميع العناصر السابقة لها دورٌ عندما يأتي الأمر إلى إنشاء استجابة عاطفية، لكن الفراغات البيضاء تضفي لمسةً من «الدراما» إلى الموقف. فبنفس الطريقة التي تستطيع الفراغات البيضاء تدعيم هدف الصفحة، ستستطيع أن تدعِّم العاطفة التي تود التأثير عليها عند الزائر. لننظر إلى هذا المثال من Todoist: Todoist هو أداة لإنشاء قائمة بالمهام. لكن باستخدامهم للمسافات البيضاء استخدامًا جيدًا حول العنوان الرئيسي، جعلوا الصور بارزةً وأضفت بعض المشاعر الإيجابية. فبدلًا من عرض صورة للمنتج نفسه، عرضوا صورةً لشخصٍ سعيدٍ يبدو أنَّه يستمتع بيومه، بعد أن أنهى مجموعةً من المهام الموكلة إليه. سادسا: حارب نزعة المصمم لملء الفراغات حسنًا، نحن البشر نحب أن نملأ الفراغات؛ فعندما نرى مكانًا فارغًا، سنفكر -لا إراديًا- كيف نستطيع أن نملأه. لكن هذه العقلية -الطبيعية جدًا- قد تسبب مشكلةً للمصمم. فعلى عكس رفوف المكتبة، ليس عليك في تصميم الويب أن تطمح إلى ملء جميع الفراغات. لذا ابدأ هكذا: ضع هدفًا للصفحة واختر عنصرًا وحيدًا يستطيع تحقيق ذاك الهدف؛ الذي يمكن أن يكون «عنوانًا رئيسيًا + دعوةً إلى إجراءٍ ما». ضع ذاك العنصر في منتصف التصميم. ضع فراغات حوله. أضف عناصر أخرى حول تلك الفراغات. سابعا: فكر بما تستطيع حذفه، لا بما تستطيع إضافته هذه النقطة مرتبطةٌ بالنقطة التي تسبقها؛ لكن بالمقلوب. بعد أن تنتهي من تصميمك، قد تشعر أنَّ هنالك أشياءً كثيرةً هنا وهناك، وستبدأ بالتفكير بالعناصر التي تستطيع حذفها من الصفحة والتي لا تؤثر تأثيرًا سلبيًا على الهدف الرئيسي. فكلما قللت العناصر، كلما كان ذلك أفضل. ويمكنك أن تعتبر أنَّ تصميمك كاملٌ إن لم يبقَ شيءٌ تستطيع حذفه، لا إضافته. ثامنا: كلما كبر حجم الخط، كلما احتجت إلى فراغ أكبر العناوين الكبيرة أصبحت "موضة" في هذه الأيام، وخصوصًا في عصر التصميمات المسطحة والعقلية السائدة المؤيدة لها. لكن الخطوط الكبيرة تحتاج إلى مساحة للتنفس؛ فإن لم تكن هنالك فراغات كافية حول العناوين الضخمة في تصميمك، فستخسر قوتها وستبدو كأنها صعبة القراءة… بغض النظر أنَّها لم تعد فعالةً. لذا ستكون القاعدة كالآتي: استخدم نصًا كبيرًا إذا ما استطعت توفير فراغات بيضاء كبيرة حوله. انظر هذا المثال من Dior: لاحظ حجم الخط الكبير جدًا للعنوان، وكمية الفراغات البيضاء التي حوله. الفراغات البيضاء على الهواتف المحمولة؟ كن حذرًا هنا. صحيحٌ أنَّ القواعد والمبادئ العامة تنطبق على تصاميم مواقع الهواتف المحمولة، ومن المحتمل أن تستفيد من الفراغات البيضاء فيها؛ إلا أنَّ هنالك حدًا دقيقًا فاصلًا بين "الاستخدام الجيد للفراغات البيضاء" وبين "ترك فراغات كثيرة بين العناصر". يكون الحد الفاصل عادةً هو عدِّة بكسلات في أحد الاتجاهات، ومن السهل جدًا أن تنتقل من تجربةٍ رائعةٍ للمستخدم إلى واجهةٍ صعبة التصفح نتيجةً لوجود الكثير من الفراغات. أرى أن تحاول جعل كل كتلة من المحتوى المهم (مثل العنوان + عبارة لحث المستخدم على اتخاذ إجراء) تملأ شاشة الهاتف بأكملها، وإن كانت هذه المهمة صعبةً في بعض الأحيان. على سبيل المثال، انظر إلى هذا التصميم من Evernote عندما يُعرَض على هاتفٍ محمول: ستُعرَض الكتلة الرئيسية من المحتوى على كامل الشاشة، ومن ثم سيبدأ المستخدم بالتمرير إلى الأسفل ليرى ماذا تحتوي بقية الصفحة. النقطة الصعبة هنا هي أنَّه عليك أن تتعامل مع أجهزةٍ مختلفةٍ، وفي حين أنَّك تستطيع اختبار التصميم على أكثر الأجهزة شيوعًا، إلا أنَّه من المستحيل أن يبدو تصميمك بشكلٍ صحيح على كل الأجهزة. أضف إلى ذلك أنَّك تريد أن يُعرَض عرضًا سليمًا على الحواسيب أيضًا؛ مما يزيد التعقيد كثيرًا. الرسالة الرئيسية التي أريد أن أوصلها لك هنا هي أن تبقى حذرًا، والزم المبادئ العامة لآلية استغلال الفراغات البيضاء دون الإفراط باستخدامها، وسيكون الأمر على ما يرام. ترجمة -وبتصرّف- للمقال The Importance of Whitespace in Web Design لصاحبه Karol K.

هذا الدرس عبارة عن مدخل إلى SVG. سنتعلم فيه المعلومات الأولية التي تحتاجها لرسم أشكال SVG بسيطة باستخدام لغة XML الأساسية. فإن لم تستخدم SVG من قبل فهذا هو الدرس المناسب لك. في الماضي كان تنسيق الصور الوحيد المعتمد من قبل جميع المتصفحات هو تنسيق GIF وهو ملف صورة مطوّر من قبل CompuServe. ثم ظهرت ملفات صور JPEG التي تسمح بضغط الصور دون ضياع للتفاصيل مع حجم صغير مقارنة بملفات GIF. بعد فترة من الزمن ظهرت الحاجة إلى رسومات فكتور ثنائية الأبعاد على الإنترنت. وبعد دخول عدد من تنسيقات الصور إلى المنافسة في رابطة الويب W3C تم تطوير تنسيق SVG أخيرًا عام 1999. سوف أريكم الآن كيفية إنشاء أشكال باستخدام SVG. هذا الدرس سيشرح كيفية استخدام SVG في صفحات الويب. ما هو SVG؟ إن مصطلح SVG هو اختصار إلى Scalable Vector Graphics أي رسومات فكتور القابلة لتغيير الحجم وهو عبارة عن تنسيق صور قائم على لغة XML من أجل الويب. وعلى عكس تنسيقات GIF وPNG وJPEG فإن تنسيق SVG قابل لتعديل الحجم بسهولة دون أي ضياع للدقة ولتفاصيل الرسومات. إن ملف XML الذي يحوي صور SVG يمكن إنشاؤه وتخصيصه وتكامله مع بقية لغات W3C القياسية الأخرى مثل DOM وXSL باستخدام أي محرر نصوص. كما يمكن إنشاء صور SVG بصريًّا باستخدام برامج الرسم والفكتور كبرنامج أدوبي إليستريتور Adobe Illustrator. لماذا نستخدم SVG؟ يمكن إنشاؤها وتعديلها باستخدام أي محرر نصوص. يمكن طباعتها بدقة عالية جدًّا. يمكن استخدامها من أجل الرسومات المتحركة. موصى بها من قبل W3C. تعمل مع بقية لغات W3C القياسية مثل DOM. مظهرها عظيم للعروض البصرية. يمكن تعديل حجمها إلى أي حجم نريد بدون أي تشوه قد يطرأ عليها. SVG على صفحات HTML يمكن تضمين SVG بسهولة داخل ملفات HTML باستخدام وسم SVG. كما في أسطر الأوامر التالية. <svg width=" " height=" "> [element code here..] </svg> كماترى فإن SVG لها وسمها الخاص. يجب أن يتم تحديد طول وعرض الرسم وذلك لاحتواء عنصر الرسم. العناصر التالية يمكن أن تستخدم للرسم داخل مساحة العمل الخاصة. Circle Rectangle Ellipse Line Polyline Polygon Path Text فلنبدأ الآن بتعلم استخدام هذه العناصر في الرسم. إنشاء الدائرة في SVG دوائر الـ SVG يمكن تنفيذها باستخدام وسم circle. كهذا المثال. <svg height="300" width="300"> <circle cx="60" cy="60" r="50" style="fill: blue; stroke: black; stroke-width: 2px;" /> </svg> النتيجة هي صورة الدائرة الظاهرة في الصورة التالية. في هذا المثال استخدمت وسم circle ثم cx (إحداثيات x) وcy (إحداثيات y) والتي تحدد مركز الدائرة المرسومة. ثم وضعت القيمة 50 للمتغير r (نصف القطر) والذي سيحدد طول الخط الواصل بين مركز الدائرة ومحيطها. أخيرًا أضفت أنماط للون التعبئة والحدود وعرض الحدود. إنشاء مستطيل في SVG يمكن تنفيذ رسم المستطيل عبر وسم rectangle ويمكن تحديد قيم مختلفة من الارتفاع والعرض. <svg height="300" width="300"> <rect width="250" height="100" rx="11" ry="11" style="fill: yellow; stroke: green; stroke-width: 4px;"/> </svg> النتيجة النهائية هي صورة SVG عبارة عن مستطيل كما في الصورة التالية. قمتُ بتحديد العرض والارتفاع باستخدام وسم rectangle. ثم أضفت rx وry التي تحدد استدارة حدود المستطيل. إذا قمت بإزالة القيمتين الأخيرتين فستحصل على حواف حادة. ثم نضيف أنماطًا عبر لون التعبئة والحدود وعرض الحدود. إنشاء القطع الناقص (شكل بيضوي) في SVG يتم تنفيذ هذا الشكل عبر وسم ellipse. القطع الناقص ليس له ارتفاع وعرض متساويين وعلى عكس الدائرة فإن نصف القطر cx وcy مختلفان. انظر الكود البرمجي التالي. <svg height="300" width="300"> <ellipse cx="190" cy="70" rx="100" ry="50" style="fill:red; stroke:green;stroke-width:2"/> </svg> صورة القطع الناقص (الشكل البيضوي) النهائية كما في الصورة التالية. إن cx وcy يحددان مركز شكل القطع الناقص بينما rx وry يحددان قطري الشكل. وكما ترى فإن rx يحدد عرض الشكل بينما ry يحدد ارتفاع الشكل. ثم نضع الأنماط من ألون التعبئة والحدود وعرضها كما في كل مرة. إنشاء خط في SVG يمكن إنشاء خط SVG باستخدام وسم line. كما هو واضح من الاسم فإن هذا الوسم يرسم خطوطًا، كما في المثال التالي. <svg height="300" width="300"> <line x1="0" y1="0" x2="100" y2="150" style="stroke:#000; stroke-width:5" /> </svg> النتيجة النهائية ستظهر كما في الصورة التالية. في هذا المثال يمثّل x1 الاحداثي x فيما يمثّل y1 الاحداثي y وهو ما يحدد نقطة بداية الخط. فيما تحدد الاحداثيات x2 وy2 نقطة النهاية. وباستخدام ميزات الانماط وضعتُ لون الحدود أسود ولعرض 5بكسل. إنشاء الخطوط المتعددة في SVG يمكن تنفيذ هذه الخطوط عبر وسم polyline. حيث يستخدم لرسم الأشكال المكونة من خطوط مستقيمة كهذا المثال. <svg height="300" width="300"> <polyline points="60,50 150,120 100,220 200,170" style="fill:none;stroke:black;stroke-width:3" /> </svg> والنتيجة كما هي واضحة في الصورة. وباستخدام الاحداثيات x وy يمكنك تعيين كل نقطةمن النقاط الفردية لإنشاء أي شكل تريده. وكما ترى هنا لدي أربع نقاط تم وصلها ببعضها لتشكيل الخطوط. وأضفت حدودًا سوداء وبعرض 3 بكسل. إنشاء شكل مضلع في SVG يمكن تنفيذه عبر وسم polygon. هذا العنصر سيرسم شكلًا مكونًا من أكثر من ثلاثة جوانب. شاهد الترميز التالي. <svg height="300" width="300"> <polygon points=" 60,20 100,40 100,80 60,100 20,80 20,40" style="fill:cyan;stroke:red;stroke-width:1" /> </svg> النتيجة النهائية كما في الصورة. في هذا الشكل نقاط يتم تحديدها عبر الاحداثيات x وy لكل جانب من جوانب الشكل من النقطة الأولى إلى النقطة الأخيرة. في المثال، أنشأتُ شكلًا مسدّسًا بست جوانب. كما ترى هناك 6 نقاط متصلة ببعضها محددة بالاحداثيات x وy. ثم حددت لون التعبئة باللون السماوي مع لون حدود أحمر وبعرض 1 بكسل. إنشاء مسارات في SVG يمكن تنفيذه عبر وسم path. هذا العنصر سيرسم مسارًا مخصّصًا وأشكالًا تتكون من منحنيات، خطوط وأقواس. من بين جميع عناصر SVG هذا هو العنصر الأصعب للتعلم. مسارات SVG تستخدم الأوامر التالية. M للحركة L للخط V للخط العمودي H للخط الأفقي C للمنحني S للمنحني الناعم T لمنحنيات البيزير التربيعية A للأقواس البيضوية Z لإغلاق المسار وتحدد الأحرف الكبيرة الموقع بدقة بينما تحدد الأحرف الصغيرة الموقع بشكل تقريبي. كما في المثال التالي. <svg height="300" width="300"> <path d="M 30 40 C 140 -30 180 90 20 160 L 120 160" style="fill: none; stroke: black; stroke-width: 6px;" /> </svg> النتيجة ستكون كالصورة التالية من خلال الترميز في الأعلى سترى بأنني استخدمت حرف d. ميزة حرف d هذا ستكون دائمًا أمر التحريك. ثم استخدمت حرف M الذي يعني التحرك نحو اتجاه معين. وقبل رسم أي شيء عليك أن تحرك المؤشر الافتراضي إلى الموقع المفضّل. في هذا المثال حرّكتُ المحور x إلى 30 والمحور y إلى 40. المنحني يبدأ عند 140,-30 كنقطة للبداية. تاليًا نزلت نقاط المنحني للأسفل واليمين عند النقطة 180,90 وتنتهي عند 20,160 ولإنهاء المسار أنشأت خطًّا عند النقطة 120,160. إنشاء النص في SVG يمكن تنفيذ هذا الأمر من خلال الوسم المغلق text. هذا العنصر يستخدم لرسم النص في صورة SVG. <svg height="300" width="300"> <text x="20" y="30" fill="blue" font-size="20">This a great sample for Text SVG! </text> </svg> النتيجة ستكون كالتالي. في المثال استخدمت موقع المحور x للنص عند 20. هذا سيضع النص على بعد 20 بكسل من اليسار بينما وضعت المحور y عند 30 ما يجعل النص على بعد 30 بكسل عن الحافة العلوية. ثم لوّنت النص باللون الأزرق وجعلت حجمه عند 20 بكسل. هذا سيظهر العبارة التالية "This a great sample for Text SVG!". ترجمة -وبتصرف- للمقال How to Create Simple Shapes with SVG لصاحبه Editorial Team

تحدّثنا في الجزء الأول من سلسلة أساسيّات التصميم الجرافيكي هذه عن العناصر الأساسية للتصميم، كالأشكال، الخطوط، الخامات والعناصر الأخرى. وفي هذا الجزء سنلقي نظرة، وبشكل مفصّل أكثر، على مبادئ التصميم التي من المهّم التعرّف عليها، لأنها هي التي تفصل بين المصمّم الجيّد والمصمّم الرائع. بعض المبادئ التي سنغطّيها اليوم يتّم تطبيقها لا شعوريًّا، لكنّها موجودة بالتأكيد، وسنقوم بعرض بعض الأمثلة من المواقع لكي نوضّح المفاهيم. 1. التوازنالتوازن هو طريقة توزيع عناصر التصميم في مخطط الصفحة. وإذا كان التوازن جيّدًا يمكن تحقيق المتانة في التصميم، على الرغم من أنّ بعض المصمّمين في الآونة الأخيرة يفضّلون التصاميم غير المتوازنة لأنها مُفعمة بالحركة وتعرض وجهة نظر مختلفة تمامًا. وتعتبر الصفحات الشخصيّة هي الأكثر ملائمة للمخططات غير المتوازنة، وسنرى بعض الأمثلة لاحقًا. يجب أن تعرف الأنواع الثلاثة من التوازن لكي تكون قادرًا على ملاحظة أي نوع من التوازن يمتلك الموقع الّذي تعاينه. وهذه الأنواع هي: المتناظر symmetrical.غير المتناظر asymmetrical.الشعاعي radial.النوع الأول يعني أن جانبيّ التصميم هما بنفس الشكل، الخطوط، الخامات، وهكذا. ونقصد بجانبيّ التصميم؛ الأيمن والأيسر، لأن هذا النوع من التناظر يكون غالبًا حول المحور العمودي، وهو الشائع في التصميم هذه الأيام. توجد بعض الأمثلة عن التناظر حول المحور الأفقي، أو المحورين معًا، ولكنّ هذا الأمر نادرًا. التصاميم المتناظرة هي الغالبة في مواقع الأنترنت حتّى خمس سنوات مضت. النوع الثاني من التناظر يحدث عندما يكون جانبّي الموقع لا يشبهان بعضهما، لكن مع ذلك تبقى بعض العناصر متشابهة. وعلى الرغم من أن هذا النوع يسمى غير متناظر ألا إنه يحتوي على بعض سمات التناظر، كما في النوع الأول من التوازن، ولكن بمستوى أقلّ. والمواقع غير المتناظرة تصبح أكثر وأكثر شعبيّة هذه الأيام (لاحظ مخططات وورد بريس التي تملك جهة للمحتوى وجهة للشريط الجانبي). التوازن الشعاعي يحدث عندما تكون عناصر التصميم موزّعة بشكل دائري. وهذا النوع يعطي إحساسًا بالحركة والحيويّة. لكن هذا النوع لا يستخدم بكثرة، لأن المصمّمين، وحتّى الخبراء منهم، يواجهون المشاكل في تخطيط التصاميم من هذا النوع. وكما ذكرنا سابقًا، يمكن تحقيق التوازن من خلال الأشكال، الألوان، الخامات، الخطوط، والعناصر الأخرى التي تحدّثنا عنها في الجزء الأول. صفحة Florida Flourish تعتبر مثالًا جيّدًا على موقع متناظر كلّيًّا. في موقع Duplos تم استخدام النوع غير المتناظر وقد عمل بصورة جيّدة جدًا. 2. السيادة والأولوية (Dominance and Priority)تمّ جمع هذين المبدئَين معًا لأنّهما مرتبطان بشكل وثيق. فكلاهما يتعلّق بتجربة المستخدم، لأن عدم وجود الأولويّة والسيادة لبعض العناصر قد يؤدّي إلى الإرباك. إنّ مستوى السيادة هو الّذي يحدّد أهمّية العناصر المختلفة، مثل القائمة، الشعار، المحتوى، أو ذيل الصفحة. وبالطبع يمكن تحقيق ذلك أيضًا عن طريق التلاعب بنوع الخط والحجم. مع ذلك لنتعمّق أكثر للتعرّف على معنى ودور كل من السيادة والأولويّة. هنالك ثلاث مستويات رئيسية للأولوية، وأوّلها العنوان أو نقطة التحويل (تسمّى أيضًا الدعوة إلى الإجراء CTA) والّذي يُعتبر كعنصر أساسي. تأتي بعده العناصر الثانوية مثل الصور التي تستخدم للتعبير عن شيء معيّن، أو تستخدم، في أغلب الأحيان، للتصّفح. من الواضح إن هذه العناصر ليست الأكثر أهمية في الموقع، لكن مع ذلك لا يمكن إنشاء أيّ موقع بدونها. العناصر التي تأتي في المرتبة الثالثة هي المعلومات؛ مثل روابط الذيل أو المعلومات الوصفية في المدوّنات أو العناصر المختلفة، ويمكن أن يقوم الموقع بدون هذه العناصر (الثالثة). مع ذلك تستخدم هذه العناصر في كثير من الأحيان لأنها تُكمل التصميم؛ إما بتوفير المزيد من المعلومات، أو بإكمال المخطط مع بعض العناصر. في موقع Area17 تمّ التشديد على العنصر السائد في الزاوية العلويّة اليسرى. كما تجذب عبارة الترحيب الانتباه بسبب اللون. 3. التناسب Proportionالتناسب مهمّ، وهو الذي يمثّل حجم العناصر مقارنة ببعضها البعض. للتناسب تأثير قويّ على المستخدم، وهو مرتبط أيضًا بالمبدأ السابق. من البديهي أن تكون العناصر الأكبر ذات وقع على المستخدم أقوى من العناصر الصغيرة. تعمل السيادة، الأولوية، والتناسب معًا على تأكيد رؤية المستخدم للمعلومات على الموقع بصورة صحيحة. فمثلًا، من الخطأ أن تجعل حجم الخط في الذيل أكبر منه في المحتوى، لأن ذلك يعني عدم أخذ هذه العناصر الثلاثة بالاعتبار. يستخدم موقع Bluecated Interactive مبدأ التناسب لغرض جذب الانتباه إلى الصورة. 4. التباين Contrastمبدأ آخر من المبادئ المهمّة، ليس فقط في التصميم، وإنّما في التصوير والفنون البصريّة الأخرى. لا نظن أن هنالك حاجة للتعمّق في هذا المبدأ، لأن كل شخص يعرف معنى التّباين. فعندما يكون هنالك تباين كاف بين العناصر، فإن ذلك يعني أنّ بعضها يبرز أكثر من الأخرى. وإذا رغب المصمّمون بدمج العناصر معًا، فإنّهم يقومون بذلك عبر التباين الضئيل بين هذه العناصر. ويمكن تمييز العناصر بعضها عن بعض باستخدام درجة عالية من التباين. إذا كان التوازن يتحقق من خلال الأشكال والخطوط، فإنّ التباين يتحقق من خلال الألوان. مع ذلك، فإنّ مبدأ التباين تغيّر مؤخّرًا بواسطة الخامات وأسلوب تنسيق النصوص Typography، لذلك يصبح أكثر وأكثر شعبيّة. عندما يكون للتصميم أسلوبًا مثاليًا لتنسيق النصوص، فإنّ ذلك يؤدّي، ليس إلى تباينٍ مثاليّ فحسب، وإنما إلى التناسب، السيادة والأولوية كذلك. من السهل ملاحظة أنّ المبادئ الثلاثة الأخيرة مرتبطة نوعًا ما مع بعضها، بطريقة أو بأخرى. فلو حصل وتحدّثنا بصورة عامّة عن هذا الموضوع، يمكننا أن نُدرج هذه المبادئ معًا في نفس الفقرة. في موقع i love typography أعلاه، تجد حسن استعمال التباين مباشرة في العنوان الرئيسي للموقع، حيث أن اللون الأخضر تباين بشكل ملحوظ مع اللون الرمادي الغامق. قد يكون التباين أيضا لإبراز زر معين أو زر إجراء (Call to action). 5. الإيقاع Rhythmقد يكون هذا المبدأ جديدًا على القارئ. إيقاع الصفحة هو المبدأ الذي يجعل عين الإنسان تتحرك من عنصر باتّجاه الآخر. يضمن الإيقاع حركة العين وبأي ترتيب يجب على المستخدم رؤية العناصر. قد يكون هذا المبدأ صعب لتحقيقه، لأن كل شخص لديه طريقة خاصّة للنظر إلى الموقع، وعملية جعل كل شخص ينظر بنفس الطريقة قد تكون مرهقة جدّا. هنالك نوعان من الإيقاع: السلس والتدريجي. النوع الأول هو التفاوت، وأبسط مثال هو حركة المياه التي تجري في الأساس بنفس الاتّجاه لكن هنالك الكثير من التفاوت في طريقة تحرّكها. أمّا الإيقاع التدريجي فيحدث عندما يكون هنالك تسلسل واضح في الطريقة التي يجب أن تتحرك بها العين بين العناصر. في معرض أعمال David Desandro تمّ اتّباع إيقاع منتظم جدّا وتدريجي. 6. الانسجام والوحدةإنّ الحصول على تصميم مذهل لا يمكن أن يتحقق، حتى وإن طبّقنا جميع المبادئ أعلاه بصورة صحيحة، بدون الانسجام والوحدة، وهذا ما نراه غالِبًا في الحياة الواقعية. فكثيرًا ما نسمع عن الأغنياء الذين يمتلكون كلّ شيء يريدونه، لكنّهم يفتقرون إلى الانسجام والألفة في حياتهم. القاعدة نفسها تسري في التصميم؛ فإذا كانت جميع العناصر مرتبطة بصورة صحيحة نكون بذلك قد حققنا ما نسمّيه بالوحدة. لكن أن تضع جميع هذه العناصر في الصفحة دون ربطها ببعضها لا ينتج لك تصميمًا، وإنّما صفحة ذات كومة من العناصر. وبالعكس؛ إذا كانت العناصر مُكملة لبعضها البعض، والموقع سهل على العين ويتيح تجربة جيّدة للمستخدم فهذا يعني أن عملك قد انتهى إلى حدّ ما. لا يوجد هنالك داع للمثال هنا، نحن نعلم جميعًا أنّ المواقع ذات الانسجام والوحدة يمكن إيجادها في كل مكان؛ فلتفكّر في موقع يُعجبكَ كثيرًا وتستحضره في ذاكرتك دائمًا. على الأرجح هذا الموقع يتّسم بالانسجام والوحدة. الخلاصةدار المقال الثاني من السلسلة حول عملية تحليل المبادئ الأساسية للتصميم والتي يجب أن تعرف عنها كمصمّم. بعد قراءتك للمقالين الأولين تكون قد حصلت على الدراية الكافية لكي تبدأ تصميم مخططك الخاص، لكن تمهّل قليلًا! المقال الثالث من هذه السلسلة سيُغطّي أساسيات التكوين، كالنقطة المحورية، نظرية الشبكة، وقوانين جِشتالت (gestalt laws)، وغيرها التي تستخدم في تصميم منتجات أخرى كالمجلّات، النشرات، أو الكتيّبات. ترجمة -وبتصرّف- للمقال Graphic Design Basics Part 2: Design Principles لصاحبه: James Richman. حقوق الصورة البارزة: Designed by Freepik.

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

سنتعلم في هذا الدرس كيفية العمل على برنامج Inkscape لتصميم شارة لمشروع فيدورا Fedora Project (وهو شراكة عالمية من أعضاء مجتمع البرمجيات الحرة برعاية Red Hat) وستبدو هذه الشارة كإحدى الشارات المستخدمة في المهمات الفضائية لوكالة الفضاء الأمريكية ناسا. الشارةالشارة عادة تكون دائرية، لذا سنبدأ برسم دائرة (اضغط على Ctrl أثناء رسمها للمحافظة على النسبة بين الطول والعرض). تأكد من إلغاء الحدود وتطبيق لون تعبئة كما تشاء (بما أننا نصمم شارة لمشروع فيدورا فقد استخدمتُ ألوان هوية فيدورا الزرقاء الداكنة). والآن نحتاج لنص دائري ولكي نستطيع تنفيذ ذلك فإننا نحتاج إلى مسار نطبّق عليه النص لذلك سنرسم دائرة أخرى أصغر (لوّنها بلون مختلف لنتمكن من العمل بسهولة وتمييز العناصر). حدد الدائرتين واستخدم لوحة المحاذاة Align and Distribute لتُحاذِي الدائرة الصغرى إلى مركز الكبرى عموديًّا وأفقيًّا (لا تنسَ وضع نسبة المحاذاة إلى العنصر الأكبر biggest object). استخدم أداة النص Text Tool لكتابة النص على الشارة. وبما أننا نصمم شارة لمشروع فيدورا فسوف نختار الأسس الأربعة للمشروع "Freedom, Friends, Features, First" باستخدام خط MgOpen Modata (أحد الخطوط المكمّلة للمشروع). لقد تعمّدت ترك فراغ كبير بين الكلمات لأتمكن من رسم بعض النجوم بينها لاحقًا. حدد النص والدائرة الداخلية ثم ضع النص على المسار من القائمة: Text > Put on Path لقد أصبح النص الآن منحنيًا ولكن ليس في أفضل موضع. حدد الدائرة الداخلية ودوّرها كما تشاء (سيدور النص مع الدائرة تلقائيًّا). اضبط شكل النص، غيّر نمط الخط وحجمه كما تشاء (أنا جعلته كبير وعريض). واضبط المسافة بين الحروف من شريط أدوات النص حتى تصبح المسافة مناسبة. إن لم يكن موقع النص مثاليًّا دوّر الدائرة الداخلية حتى يكون الموقع مثاليًّا. سنقوم بإدراج نص منحني أسفل المسار الدائري، ارسم دائرة أخرى (أنا ضاعفت الدائرة الداخلية) ولكي نستطيع العمل بسهولة أكبر اختر لها لونًا مختلفًا واكتب النص المطلوب، أنا كتبت "for all mankind". حدد النص والدائرة الجديدة ثم ضع النص على المسار بنفس الطريقة التي اتبعناها مع النص الأول put the text on path. سيكون هذا النص فوق النص الأول، سنقوم بتصحيح الوضع بعد قليل. دوّر الدائرة لتجعل النص في الأعلى. حدد الدائرة واقلبها عموديًّا. سيقفز النص تلقائيًّا إلى الأسفل، هذا أفضل ولكن ليس مثاليًّا، الانحناء صحيح ولكن الموضع خاطئ. للحصول على رؤية أفضل أثناء العمل على ضبط النص الجديد قم بإرسال الدائرة السماوية تحت الدائرة الحمراء ثم قم بزيادة حجم الدائرة السماوية (مع الضغط على Ctrl للمحافظة على نسبة العرض والارتفاع) ثم قم بمحاذاتها مع الدائرة الأكبر أفقيًّا وعموديًّا. استمر بتعديل الضبط حتى يتخذ النص الثاني موقعه الصحيح بالنسبة للنص الأول. حدد النص السفلي ثم استخدم أدوات النص لزيادة المسافة بين الحروف بأسلوب مشابه للنص الأول. حدد الدائرة ودوّرها حتى يصبح النص في الموضع الصحيح. حدد الدائرتين الداخليتين ثم أزِل لون التعبئة وبذلك ستصبح هذه الدوائر غير مرئية ولكنها موجودة في حال احتجنا إليها فيما بعد. لوّن النص باللون الأبيض وبذلك تبدأ الملامح الأولية للشارة بالظهور. ولجعل الشكل يبدو كشارة حقيقية قم برسم دائرتين جديدتين مع حدود بيضاء وبدون لون تعبئة (استخدم لوحة التعبئة والحدود Fill and Stroke للقيام بذلك). ثم قم بتعديل حجم الحدود (أنا جعلتها 3 px من ذات لوحة الأدوات). حدد الدائرتين الجديدتين مع الدائرة الكبيرة (الزرقاء الأساسية) ثم قم بمحاذاتها إلى مركز الدائرة الكبيرة. استخدم أداة النجمة star tool لرسم نجمة بيضاء بخمس زوايا وضعها بين أي كلمتين. ضاعف النجمة عدة مرات. ثم انشر النجوم في جميع الفراغات بين الكلمات. ثم دوّر كل واحدة بما يتلاءم مع وضعها. التزيينحتى هذه النقطة أصبح لدينا شارة. نحن بحاجة إلى صورة جميلة في الوسط. ضاعف الدائرة الداخلية (تلك التي بحدود بيضاء وبدون لون تعبئة) ثم أزِل الحدود ولوّنها بأي لون حيث سنستخدمها كقناع. نحتاج الآن إلى الصورة، من الممكن استخدام صورة فكتور (إن كان لديك رسم مذهل) أو حتى صورة نقطية (على فرض أنك تريد وضع صورة فضائية). أنا ذهبت إلى موقع مشروع فيدورا وحمّلت صورة نقطية (PNG) من إحدى الصور المرشحة لتكون خلفية فيدورا 13. أدرج صورة الخلفية (سيكفي أن تسحبها إلى نافذة البرنامج). اجعل صورة الخلفية تحت دائرة القناع وبذلك نستطيع أن نرى الجزء الذي سنقصّه. غيّر حجم الصورة (مع الضغط على Ctrl للمحافظة على النسبية) وحرّكها حتى تغطي دائرة القناع الجزء الذي تراه مناسبًا لقصّه. حدد الدائرة وصورة الخلفية ثم اذهب إلى القائمة: Object > Clip > Set والآن اجعل الدائرة الجديدة ذات الصورة تحت الدائرة ذات الحدود البيضاء حتى تظهر الحدود البيضاء كاملة. ومن أجل الزينة الرئيسية استخدم شعار فيدورا. قم بكل ما يلزم من العمل ليكون الشعار بالشكل والموضع والحجم المناسبين. والآن دورك لتصنع شارتك الخاصة، سواء بأسلوب فيدورا أم لا، ولربما قد تطبعها على رقعة مطاطية وتضعها على المعطف. ترجمة -وبتصرّف- للمقال: NASA mission styled badges with Inkscape لصاحبه Nicu Bulelei.

بعد قراءة هذاالدرس سوف تُصبح قادرًا على رسم رجل ثلج ثلاثي الأبعاد باستخدام Inkscape ، وفي النهاية سوف نحصل على فهم واضح وكامل لكيفية رسم الظلال والانعكاسات بالطريقة الصحيحة. يعدّ برنامج Inkscape حديث نسبيًّا، ويتطور بشكل متصاعد وهو محرر للرسوم المُتّجهة ويصنف مع برامج Adobe Illustrator و Corel DRAW. ويعمل على أنظمة Linux وWindows وMac، وهو برنامج مفتوح المصدر ومجاني، وينتج رسومات وتصميمات بصيغة SVG. سوف نرى طريقة عمل هذا البرنامج الرائع لنتمكن من رسم وتشكيل الصور ثلاثية الأبعاد، وسوف نستخدم رجل الثلج كمثال توضيحي لنعمل عليه. في البداية، سوف نرسم الأشكال الأساسية ونتحكم ونعدل عليها. يمتلك برنامج Inckscape أدوات لرسم العناصر الهندسية الأساسية مثل الدوائر والقطوع والمستطيلات والنجوم والخطوط المتعددة، ولكن إن أردنا للرسوم أن تبدو أكثر وضوحًا من الأفضل أن نحدد الشكل (ctrl+shift+c) ونضفي عليها بعض الانحناء. يُفضّل رسم الأشكال الأكثر تعقيدًا باستخدام القلم Bezier curve tool، أقوم عادة برسم خط منحنٍ ثم أثنيه، ثم أحسن مواقع العقد وأغير شكلها (نتوء، أو مستوية) نبدأ برسم كرات الثلج والعيون بدءًا من شكل دائرة ثم نستخدم أقواس الدائرة لصنع الحواف السّفلية والعلوية للدّلو الذي سأضعه على الرأس، وأما لرسم الأنف يمكن استخدام انحناءات Bezier curve tool، وأخيرًا باستخدام نفس الأداة ننهي صنع الدلو ونقوم بتوحيد الأجزاء المرسومة باستخدام تعليميةunion ، نصل إليها على الشكل التالي: Path > Union لنتابع الرسم، بعد أن انتهينا من رسم الأشكال الأساسية، لنجعلها الآن تبدو ثلاثية الأبعاد. من أجل خلق تدرج سلس بين الضوء والظل، نستخدم التدرجات اللونية، وأمّا الحالات الأكثر تعقيدًا سنجمع بين التدرجات والتمويه الضبابي Gaussian blur. إحدى الطرق لتطبيق التعبئة المُتدرّجة Gradient Fill هي القيام بملئه أولًا ومن ثم الانتقال إلى أداة التعبئة المتدرجة، ومن شريط خيارات الأداة يمكن أن نختار بين "التعبئة الخطية" أو "التعبئة القطرية"، وتنفيذها فوق الشكل المُحدّد. وفي هذه الحالة سوف يسقط اللون المختار للتعبئة تدريجياً إلى أن يصل إلى درجة التعتيم 0%. ومن شريط الأدوات نفسه يمكن النقر فوق زر التحرير Edit من أجل فتح مربع حوار حيث يمكنك التّحكم بتوقف تدرج اللون المستخدم حاليًّا. في معظم الحالات سوف نحتاج إلى توقيف سحب اللون وتغييره، وللقيام بذلك ما علينا سوى اختيار أداة تعبئة متردة ومن ثم النقر على شكل جديد. وما سيظهر على الشاشة هي المساعدات التي يمكنك استخدامها لتغيير الموقع والتوجيه والخط الطويل وحجم التدرج وإيقاف تحويل الألوان وخيار للإضافة ( نقرة مزدوجة على الخط) أو خيار الحذف (استخدام زر "Delete" على لوحة المفاتيح). وبإمكانك أيضا الضغط على زر Shift من أجل نقل تركيز شعاع التدرج بعيدًا عن المركز. تظهر لنا مقابض التّدرج اللوني (Gradient handles) عند تعديل مكان أي عقدة، الأمر الذي يجعل تعديل شكل العناصر أكثر مرونة، ولكن في هذه الحالة لن تكون قادرًا على إضافة أو إزالة حد الألوان، سنتمكن فقط من تحريكهم. عند النقر لتحديد الحد اللوني في مربع الحوار (Fill in – stroke) سنرى فقط اللون الناتج عن ذلك الحد اللوني، الأمر الذي قد يكون غير متوقعًا، ولكنه في النّهاية سيجعل التّحكم في تدرجات الألوان أسهل من الطريقة السّابقة. تأكّد من أن تجرب نماذج مختلفة من الألوان بشكل كافٍ لاختيار المفضل لديك أو للوصول إلى اللون الذي يلائم الشكل على أحسن وجه. من أجل العمل على الألوان غالبًا ما نستخدم HSL وذلك للحصول على أفضل دقّة نظرًا لقدرته على ضبط السطوع وصفاء الألوان والفروقات الانتقائية بين الألوان التي نريدها. داخل المستند غالبا ما تحفظ القيم اللونية بصيغة RGB بالإضافة إلى قناة Alpha لذلك لا يوجد جدوى من استخدام تقنية CMYK عند تبديل وتغيير الألوان إن كنت تريد طباعة الرسوم لأمور تجارية لاحقًا. لسوء الحظ هناك بعض القيود الأخرى فعلى سبيل المثال، التعبئة اللونية المخروطية لشكلي الدلو والجزرة كانت لتكون أفضل، ولكن بما أن SVG يفتقر إلى هذا النوع من التعبئة فإن البرنامج يفتقر إليها أيضًا ولذلك سوف نحاول التغلب على هذه المشكلة بأفضل الطرق. وعليه، أبسط ما يمكننا فعله هو استيفاء شريحة رقيقة أو مستطيل من نفس اللون من أجل العمل على نسخة لها نفس الشكل ويمكن التحكم باستدارتها. من أجل القيام بذلك علينا تحديد مسار الشكل ومن ثم القيام بالخطوات التالية: Extensions > Generate from the path> Interpolate الآن يمكننا طمس جميع الشرائح التي أنشأها التأثير، وبالتالي جعل الخطوات الوسيطة أقل وضوحاً بكثير. الشيء الذي يمكننا التنويه إليه هنا أنه من الأفضل وضع كل المسارات الوسيطة في مجموعة واحدة عن طريق اتّباع الخطوات التالية: Ctrl+G أو Object> Group ومن ثم طمس معالمها معاً وإلا سوف يتم طمس معالم كل شكل على حدة وبالتالي فإن النتيجة النهائية لن تكون جيدة. وأسهل طريقة يمكن اتّباعها لتطبيق هذه العملية هي سحب الطمس المنزلق Blur slider إلى مربع حوار Fill'n'Stroke. لكنني لا أحبذ هذه الطريقة في الاستيفاء، لذلك سوف نقوم بمحاكاة التدرج الزاوي باستخدام دائرة نصف قطرها من الأشكال الضبابية، نقوم بسحبها من قمة رأس المخروط إلى قاعدته وأما لصنع مناطق الضوء والظلام سوف نكرر مسار الجزرة السابق، متبعين الخطوات التالية: Ctrl + D أو Edit- duplicate ولتطبيق استدارة حول قمة الرأس المخروطي نقرر عليه بشكل مزدوج لتوزيع التدرجات اللونية لأشكال غير واضحة على طول المخروط. ولكن بالتأكيد لا يمكننا ترك أي شيء خارج حدود شكل الجزرة لذلك سوف نقوم باقتصاص الزيادات عن طريق تطبيق مسار القطع،Clipping Path، وبما أننا أتممنا شكل الجزرة بشكل ممتاز سوف نقوم بتكرار ذلك مرة أخرى ومن ثم سنجمع كل أجزائها باستثناء مسار القطع وسنقوم بتطبيقه في مجموعة جديدة نقوم إنشائها متتبّعين الخطوات التالية: Object – Clipping path - apply ولإتمام ذلك بمثالية نقوم بملء مسار القطع بلون مختلف ليبرز عن الأشكال الأخرى لتجنب اختلاطه معهم. ولكن لا يمكننا رؤية مسار القطع بعد أن نقوم بتنفيذ الخطوات السابقة ولكن يكون بإمكاننا تعديل الأشكال التي تم قصها. دعونا الآن ننهي عملنا على الجزرة وإضافة بعض الانحناءات الخفيفة على الأنف وبعض انعكاسات الثلج من الأسفل، ثم نستخدم Calligraphic pen أو Pencil tool لرسم ما يشبه العين على الجزرة. أما الانعكاسات فهي توازي في أهميتها الظلال والأضواء حيث أن كافة الأشكال تعكس الضوء الذي بدوره ينعكس على أشكال أخرى في الرسم ويسلط عليها بعض الإضاءة ويجب العمل على هذين الأمرين سوية. إضافة إلى ما سبق، يجب علينا مراعاة تلوين الأشكال التي تحيط بالأشكال الأخرى ذات الألوان المشبعة كالجزرة في رسمنا السابق بألوان باهتة. وهذا هو السبب الذي لا يمكننا من رؤية الثلج ببياضه الناصع أو ورقة بيضاء بشكل كامل، وإنما نرى انعكاسات الألوان عليهما. وعليه فقد رسمنا منذ البداية كرات ثلج زرقاء قليلًا على افتراض أن رجل الثلج سوف يكون تحت سماء زرقاء نظيفة في مكان ما، ونحن الآن بحاجة إلى إضافة بعض الظلال والانعكاسات فقط. عند العمل على الظلال السفلية يجب أن نأخذ بعين الاعتبار أنّ المزيد منها سوف يسقط على الشكل، ولذلك يجب أن تكون أكثر ضبابية كما أنّ حدة الظل تعتمد بشكل كبير على مصدر الإضاءة. لننتقل إلى العمل على الدلو وكما نلاحظ أنّ تدرجات الألوان جيدة جدًا على الرغم من أنها كانت خطية، ولذلك سوف نقوم بإصلاحها قليلا الآن. بداية سوف نسلط على الدّلو ضوء الشمس عن طريق استخدام شريحة بيضاء ناصعة ومن ثم سوف نحدد المخروط بمساعدة الظل الذي هو عبارة عن الخطوط الداكنة الأكثر وضوحًا. وأخيرًا، سوف نضع بعض التدرجات الضّوئية الشفّافة التي تمثل انعكاسات الثلوج والضوء من الأعلى، وهكذا نكون قد أنشأنا ضوءً وظلالًا على شكل الدلو عن طريق إزالات متتالية للأجزاء التي لم نكن بحاجتها، ويبقى من الأفضل استخدام قلم رصاص Pencil لرسم الأشكال الواضحة. وبهذا نكون قد استخدمنا مسارات القطع المتعددة لكل من الدلو وكرات الثلج كما نكون قد استخدمناها لقص الأشياء غير الواضحة مثلما فعلنا سابقًا مع الجزرة. الخطوات التّالية تكمن في إضافة ثقب للدلو وتشكيل أخدود عن طريق نسخ الدوائر والقطوع التي استخدمت لبناء هيكل الدلو، ومن ثم نقل اثنين من هذه الدوائر إلى جانب بعضهما البعض اعتمادًا على عرض الحافة، عن الطريق الضغط إما على Ctrl+ - أو Path>Difference. ومن أجل تشكيل العينين، فإن تطبيقهما سهل للغاية ويمكن فعل ذلك عن طريق تسليط ضوء مع انعكاس خفيف إلى البؤبؤ بالإضافة إلى بعض التظليل فوق العين لجعلها تبرز قليلاً. ويمكن رؤية العينين دون تأثير الفلتر عليهما عن طريق تطبيق الخطوات التالية: View > Display Mode > No filters على الرغم من أنها صورة شعاعية إلا أن الخطة كانت أن نرسم نسخة نقطية منها ولهذا يجب تحديد حجم العينين منذ البداية، وأخذ هذا الأمر بعين الاعتبار عند رسم كل التفاصيل الصغيرة. ولذلك يجب تطبيق العينين وخطوط الدلو الدقيقة والأصابع باستخدام شبكة بيكسل. لجعل الصورة النهائية تبدو واضحة ونضرة بهذا الشكل. يدي رجل الثلج عبارة عن خطوط منحنية بشكل خفيف. لذلك قمنا بتعبئتها بتقنية ال Flat fill وأضفنا لها انعكاسات ضوئية للحصول على شكل ثلاثي الأبعاد لليدين. يتم رسم معظم الأوراق الخضراء رسم بأداة Calligraphic pen والخطوط الناتجة تم توحيدها باستخدام تعليمة boolean operation وتم تعبئتها لونياً باستخدام التدرج الخطي. تنحصر استخدامات أداة Calligraphic pen على الأغلب في: الترقيق : -60 يجعل الخطوط أرفع كلما انخفضت سرعة استخدامه. Caps: يجعل الخطوط نافرة قليلاً. التثبيت: 0 يكون القلم عموديًا على الخط. الزاوية: 0 ليس ذات أهمية كبيرة من أجل التثبيت. لقد قمت باستخدام القلم لتمكين خيار حساسية الضغط، وهذا ما يجعل الخطوط والأشكال المحدبة تبدو أكثر طبيعية. الأعواد هي عبارة مسارات مملوءة ب Flat fill ، معلمة وموضحة بنسخها الفاتحة والضبابية. تكفي بعض البقع الضبابية لجعل قاعدة الجزرة تأخذ أبعادًا واضحة أكثر. يجب ألا ننسى الظلال والانعكاسات على الثلج، حيث أن السماء تعطينا ظلاً مزرق والنباتات الخضراء للجزرة ستعطي ظلاً مخضر وبقع برتقالية. هذا هو كل شيء، الصورة في الأسفل هي الصورة النهائية دون تأثير الفلاتر. ترجمة -وبتصرّف- للمقال Drawing snowman in 3D with Inkscape لصاحبه Yuriy Apostol

يُعدّ تنسيق النصوص مِفتاحًا مُهمّا جدًّا لكثرة الميزات التي يمكن أن تضيفها لتصميمك، وعلى الرغم من ذلك يتجاهله الكثير من المبتدئين في بداية تعلمَهم. يُسهم التنسيق الصحيح والجيّد للنص واختيار نوع الخطوط في إضافة الاحترافية لعملك، ويُعدّ بمثابة اللمسة التي تميّز العمل المحترف عن العمل العادي. سنبدأ هذا الدرس بالتعرّف على بعض المصطلحات التي ستجعل استيعابه أفضل. أسلوب الطباعة - Typographyيعبّر هذا المصطلح عن العلاقة بين كافّة تفاصيل تصميم الأحرف من جهة، واستخدامها من جهة أخرى. يُعدّ أسلوب الطباعة اصطلاحًا عامًا، لذا من الصعب استيعاب درس عنه دون استخدامه. علينا أن نميّز ما بين تنسيق الخط ونوع الخط، كبداية علينا أن ندرك ما هو الفرق بينهما: نوع الخط هو عبارة عن العناصر المرسومة للمحارف (كذلك للأرقام وعلامات الترقيم...) وتكون هذه العناصر منتمية لنفس المجموعة، بغض النظر عن تنسيق الخط من سماكة، ميلان وأمور أخرى.أما تنسيق الخط، فهو عبارة عن نوع خط محدد لكن يملك تنسيقًا واحدًا لكل عناصره، كَنفس السماكة، نفس الحجم ونفس البنية العامة للخط.فعلى سبيل المثال: Arial هو نوع خط لكن "Arial 12pt bold" هو عبارة عن تنسيق لنوع الخط Arial. بنية الحرفإن كل جزء صغير من بنية الحرف يملك اسمًا، وفي الصورة التالية نرى رسمًا توضيحًا لبنية الحرف العامة. فعندما نتحدث عن ارتفاع الحرف الصغير لا يجوز أن نستخدم تسميات مختلفة، من الصعب حفظ أسماء هذه العناصر عن ظهر قلب إن لم تكن تعمل بشكل مباشر على تصميم الخطوط. من الأمور الهامة التي يجب أن نطَّلع عليها هي شكل أطراف الحروف في الخط Serif، فمنها من له نتوءات صغيرة (تظهر في الصورة التالية باللون الأحمر)، ومنها لا يملك هذه النتوءات. نسمي هذا النوع من الخطوط "Font_name_serif" أو "Font_name_non_serif". حروف كبيرة أم صغيرة؟في أسلوب الطباعة والكتابة المتعارف عليه، يوجد لدينا حروف كبيرة Uppercase وأخرى صغيرة Lowercase ولدينا حروف تأخذ شكل الحروف الكبيرة وحجم الحروف الصغيرة. عند بداية تشكيل الخطوط والحروف، كانت تتوضّع بداخل صناديق (أسطر)، والحروف الصغيرة كانت تتوضّع في الأسفل، وندعوها في هذه الحالة Low-grade breaks. حجم الخطإن حجم الحروف أو الخط يقاس بالنقطة "pt"، النقطة الواحدة تساوي 0.376mm، هذه الواحدة لم تعد تستعمل تحديداً وبشكل خاص في تصميم الخطوط بسبب ظهور عدة وحدات أدق منها، لكن اسمها ما زال مستخدما، ولذلك علينا استخدامه. ثخانة الخطتحدد ثخانة الخط، الثّخانة التي رُسم بها كل حرف من الحروف، وبالطبع نحن نعرف نوعين من الثّخانة (Regualr-Bold) لكن هنالك العديد من الثّخانات الأخرى سوف نتعرف عليها. إن معيار تدرج ثخانة الخطوط هو على الشكل التالي: Ultra LightThinLightRegularSemi BoldExtra BoldBlackExtra Blackكما نرى إن هذا التدرج منطقيّ جدًا. تباعد الحروفيمكننا أن نضيف لتدرجات الثخانة، تدرجات التباعد ما بين المحارف، يعرف التّباعد على الشكل الآتي: بتغيير التباعد فإننا نغير عرض الحرف من دون تغيير بنيته الأساسية أو ارتفاعه. المقياس التالي يوضح التدرج في التباعد من الأكثر التصاقاً إلى الأكثر تباعداً: CondensedSemi CondensedNormalSemi ExtendedExtendedميلان الخط - Italicهو الحالة التي يكون فيها النص مائلًا بمقدار نحو 12 درجة كحد أقصى. كهذه الجملة مثلاً، وعندما لا يكون النص مائلًا ندعو تنسيقه بـِ roman. ليس من الضروري أن يكون الخط Italic نسخة منحنية من roman. غالبًا ما يملك نوع خط Italic طريقة خاصة في إنشاء ورسم المحارف. بعض البرامج باستطاعتها أن تحاكي الميلان أو السماكة على أي نوع من الخطوط عندما يكون خط Italic الأصلي غير موجودًا، لكن بالتأكيد ستكون هنالك فروقات في الدقة والوضوح عن الخط المصمم بشكل أساسي لهذا الهدف. التصميمات المختلفة للخط الواحد - Attributesكل تصميم أو تعديل على نوع خط محدد يمكن دمجه وتطبيقه مع التعديلات الأخرى في نفس الخط. وهنا يكمن الفرق بين الخطوط الاحترافية والخطوط العادية، فكلما زادت التعديلات والإضافات على نوع الخط الواحد زادت مكانته واحترافيته. نرى في الصورة التالية الاحتمالات المختلفة لنوع الخط Helvetica Neue. التباعد بين الأسطر - Leadingهو المسافة الفاصلة بين سطرين متتالين من النص، عند اختيار التباعد في النصوص الطويلة يجب أن نراعي ألا تكون المسافة صغيرة جداً لكي لا نُتعب أعين القارئ، وألا نجعلها متباعدة بشكل كبير، الأمر الذي يجعله يقفز فوق الكثير من الأسطر، أو إعادة قراءة بعض الأسطر. التأثير الناتج عن رؤية النص الطويل عن بعد، يسمى درجة سواد أسلوب الطباعة، ويمكننا من خلاله تحديد التباعد بين الأسطر وما إن كان مناسباً أم لا، فإذا كان غامقاً جداً فهذا يدل على أن التباعد بين الأسطر صغير جداً وهكذا. محاذاة النص - Text Alignmentالمحاذاة متوازية الأطراف - Justify: وهي المحاذاة الأكثر كلاسيكية واستخدامًا، وفيها تتم محاذاة النص من اليمين واليسار مع إضافة فراغات بين الكلمات إن اضطر الأمر وعند تطبيقها يجب تطبيقها بشكل جيد لتجنب ظهور الشقوق، هذه الفراغات البيضاء بين الكلمات تبدو على طول النص كأنها شقوق في جدار.محاذاة إلى اليسار - Alignment to left: وهذا النوع هو الأكثر استخداما بعد النوع الأول، النص يكون متوازيا من جهة اليسار أما جهة اليمين تكون شبيهة بأطراف العلم المرفرف. وهذا النوع من المحاذاة أقل جمالية من سابقه، لكن مثبت علميا أنه الطريقة الأسهل في القراءة، الأطراف اليمينية غير المتحاذية تشكل علامات تسهل الانتقال بين السطور.المحاذاة إلى اليمين - Alignment to right: استخدامها قليل (عند الكتابة باللغة الانكليزية) لأنها تعاكس إحساس القارئ تجاه النص وتجاه طريقة الكتابة، لكن من الممكن استخدامها لتشكيل نوع من المفاجأة في طريقة العرض، وسوف نستخدم هذا النوع من المحاذاة كثيرا من أجل التعليقات التي ستوضع على الصور.المحاذاة المتوسطة (المركزية) -Centered: نادراً ما تستخدم في النصوص الطويلة، وغالباً ما تستخدم في تنسيق العناوين. الأنواع المختلفة للخطوط ومضامينهاكانت هناك عدة محاولات لتصنيف الخطوط، التصنيف الأكثر استخداما هو تصنيف Vox-Atypi المؤسسة الدولية لفن الطباعة، أُنشئت في عام 1952 من قبل ماكسيميليان فوكس، يتألف هذا التصنيف من ثلاث مجموعات أساسية، وهناك مجموعات فرعية تبعاً لمعايير مختلفة مثل طول قاعدة الحرف وشكل عين الحرف وانحناءاته وحجم الحرف.. إلخ. ورغم محاولات المخترع في تصنيف الخطوط، من الممكن أن ينتمي الخط الواحد إلى عدة مجموعات بنفس الوقت. نبدأ التصنيف كالتالي: 1- الخطوط الكلاسيكية- Classicals:يمكن تمييز هذه العائلة بوجود الإضافات على أطراف الحروف ذات شكل مثلثي triangular serifs، والاسم بحد ذاته يعطي هذا النوع كلاسيكية وتقليدية واضحة. 1-1- الخطوط الإنسانية القديمة - Humanistتتضمن هذه المجموعة الحروف الأولى التي خطتها الإنسانية في عصر النهضة. وما زالت هذه الخطوط مشبعة بتأثير الكتابة اليدوية، ويكون فيها التباين بين السماكات صغيرا جدا، ويظهر لنا هذا في حرف e كمثال واضح على التدرج الخفيف في كيفية رسم الحرف. لذلك فإن استخدام هذه الأشكال من الحروف كان مناسبا جدا لتلك المرحلة من الزمن (عصر النهضة)، أما استخدامها اليوم فقد أصبح قليلا، وكمثال على هذا النوع من الخطوط نذكر نوع الخط Hardino. 2-1- Garaladeجاءت هذه التسمية من أسماء الأشخاص الذين صمموها (Claude Garamond- Aldus Manutius ) وتعد من الخطوط التي أتت بعد المجموعة الإنسانية الأولى من الخطوط، وتأثرت جداً بالكتابة في القرن السادس عشر، ظهرت فيها المزيد من الصرامة، كما أزالت التأثير الذي نشأ عن الكتابة اليدوية. فعلى سبيل المثال التقاطع الموجود في حرف e أصبح يمينياً، وزادت ثخانة الخطوط بشكل عام عن سابقتها، وتعد هذه المرحلة من تطور الخطوط ، المرحلة الفاصلة ما بين الخطوط Humanist القديمة والخطوط Transitional. من أهم أنواع الخطوط التي تعكس هذه المرحلة هو خط Garamond، ويندرج تحت نفس التصنيف Bembo ،The Plantin أو في تسمية أخرى Palantino. 3-1- الخطوط الانتقالية Transitionalيظهر أثر اليد واضحًا في هذه الخطوط، وقد أصدرت طريقة رسم وتشكيل هذا النوع من الحروف، التدرج ما بين السماكات أصبح أكثر قسوة، ومحور الحرف أصبح أفقيا بشكل كامل، أما الإضافات الموجودة على أطراف الحروف Serifs طرأت عليها الكثير من التحسينات، لكن حافظت على شكلها المثلثيّ. المحارف أخذت شكلا أبسط، وبنفس الوقت حافظ هذا الشكل على سهولة القراءة، وغالبا ما تستخدم هذه الخطوط في المجلات أو الصحف. وأفضل أنواع خطوط هذه العائلة، الخطوط ذات الأصل الاسباني، أرفق لكم بعض أسماء هذه الخطوط: (Baskerville- Times- Perpetua- Caslon). 2- الخطوط الحديثة - Moderns:يمكن تقسيم الخطوط الحديثة إلى ثلاثة أقسام: 1-2- الخطوط الحديثة - Didone:يعود تاريخ هذا النوع من الخطوط إلى نهايات القرن الثامن عشر وبدايات القرن التاسع عشر واستخدم بشكل واسع في فرنسا لتوثيق المستندات الرسمية، تراجع دور هذا النوع من الخطوط وأصبح خجولا، وغالبا من يستخدمه هم من الطبقة البرجوازية والارستقراطية. تفصيلات رسم أشكال الحروف عُدلت بشكل كبير، ونهايات الأحرف تخلّت عن شكلها المثلثيّ لتأخذ شكلًا مستقيمًا. من أنواع هذه الخطوط (Bodoni- Didot- Walbaum- Georgia). 2-2- الخطوط الميكانيكية - Mechanistic:وتدعى أيضاً Slab serif، اسم هذه المجموعة يعكس المنظور الميكانيكي لهذه الحروف، التي ترتبط ارتباطًا وثيقًا بالثورة الصناعية في بدايات القرن التاسع عشر. المبدأ الأساسي لهذا النوع من الخطوط عبارة عن تدرج خفيف جدًا لأطراف الأحرف التي أخذت في هذا النوع من الخطوط شكلا مستطيلا، واستخدم بشكل واسع في تصميم شعارات الشركات والمصانع. نذكر من هذه الخطوط (Rockwell - Mail - Clarendon). 3-2- الخطوط المستقيمة - Linealوتدعى أيضا Sans Serif، أي الخطوط التي تكون نهاياتها مستقيمة ولا تحتوي على أيّة إضافات، هنالك فرق بسيط بين سماكات الأحرف وعلى الأغلب هذا الفرق لا يكون موجودا، لهذا يشبه هذا النوع من الخطوط بالعصي Sticks، ويعتبر من أقل الخطوط كلاسيكية، وأكثرها بساطة وحيادية ومجال استخدامها يرتبط بشكل مباشر بصفاتها، نذكر من هذه الخطوط (Myriad - Helvetica - Futura - Univers). 3- Calligraphic - الخطوط الفنيّة:1-3- Glyphic - الخطوط المنحوتة:استوحى هذا النوع من الخطوط من الحروف المحفورة في الصخور، يمثل هذا النوع من الخطوط بنهايات Serifs متغيرة العرض. نرى أناقة وتعقيد هذا النوع من الخطوط غالبا على لوحات المحامين وشعارات شركات الجمال، نذكر من هذه الخطوط (Optima - Trajan - Lithographs). 2-3 Script- الخطوط النسخيّة (المخطوطات):تشمل تصاميم محارف هذه الخطوط فن الخط الرسمي أو الكتابة النسخيّة، تبدو كأنها مكتوبة بريشة، وتملك تدرجا كبيرا ما بين سماكات الخطوط، غالبا ما تكون الحروف فيها متصلة ببعضها البعض، وغالبًا ما نجد هذه الخطوط مستخدمة على بطاقات الأعراس، الولادة، ونذكر منها: Edwardian Script - Palace Script. 3-3- Manual- الخطوط اليدوية:تتضمن هذه المجموعة الخطوط المستوحاة من الكتابة اليدوية، المكتوبة بالقلم، وترتبط ارتباطا وثيقا بالعصور الوسطى و Heroic Fantasy ونذكر كمثال (Omnia). 4-3- Blackletter/Fracturesترتبط هذه المجموعة من الخطوط بتصاميم حروف ذات أشكال مدببة وزاويّة، وغالبا استخدم القلم ذي النهاية المدببة عند تصميم هذا النوع من الخطوط. 5-3- الخطوط المزخرفة - Decorative fontsفي هذا التصنيف يمكننا أن نضيف الكثير من الخطوط المزخرفة، وفي ما يلي أمثلة عن هذه الخطوط، يجب استخدام هذا النوع من الخطوط بشكل احترافي، وإلا سيبدو عملنا طفوليًّا، لأن بعض منها يكون واضحا والبعض الآخر لا يكون واضحاً البتّة. وينصح باستخدامها في العناوين فقط، لأن استخدامها على النصوص الطويلة سوف يسبب إرهاقا سريعا للعيون. اختيار نوعيّة الخطوط واستخدامهااختيار نوع الخطّعندما نأتي لاختيار نوع الخط هناك العديد من الأسئلة التي يجب أن نجيب عليها: ما هو نوع المستند الذي نعمل عليه؟من هي الجهة التي سوف تستلمه؟هل سيقرأ عن بعد، بمعنى آخر هل هو إعلان طرقيّ أم نص لمقال (مثلا)؟للإجابة على هذه الأسئلة، يجب عليك مراجعة المعلومات المفصلة التي أوردناها عن كل نوع من الخطوط وتحديد غايتك من نوع الخط الذي تريد استخدامه، ومثالا بسيطا يُظهر مدى تأثير نوع الخط على المعلومة التي تريد تقديمها من خلال نصّك. استخدام الخطما هو عدد الخطوط التي يجب استخدامها؟نحن نميل في بداية عملنا لاستخدام عدد كبير من الخطوط في أعمالنا، علينا أن ننتبه إلى أن هذا الأمر يجعل من مستندنا كتلة من الفوضى، وتصبح الكلمات غير مفهومة بسبب تعدد أشكال الحروف. إلا إن رغبت في ترك بصمتك التصميمية، وحتى في هذه الحالة لا ننصحك باستخدام أكثر من نوعين في الصفحة الواحدة. توضيح المعلومات المهمة ( تعليمها)قد تشعر أنك بحاجة لتوضيح أو للتركيز على بعض المعلومات كالعنوان أو كالعنوان الفرعي، هنالك طريقتين لفعل ذلك: 1- من دون تغيير نوع الخط (تكبير حجم النص، أو زيادة سماكته، أو بجعله مائلاً ... إلخ) 2- أو باستخدام نوع خط مختلف للمعلومة التي تريد إظهارها. عند استخدام الطريقة الثانية، تجنب استخدام نوعين من الخطوط من نفس المجموعة. أين نجد أنواعاً مختلفة من الخطوط؟1- الخطوط المجانيّة:تقدم العديد من المواقع خطوطاً مجانية، ودائما علينا الانتباه إلى حقوق الاستخدام، فمجانية الخط، لا تعني بالضرورة خلوه من حقوق الملكية، فبعض المواقع تفرض شروطاً على استخدامها. وقبل تحميل الخط إلى حاسوبك تأكد من أصلها ومدى توافقها مع حاجتك، أذكر لكم بعض المواقع التي توفّر خطوطًا مجانية: DaFontUrban Fonts1001 Free FontsFontex2- الخطوط مدفوعة الثمن:لحد يومنا هذا، ما زالت الشركات المختصّة بتصميم الخطوط تدعى (مُنشأين- منتجين - مؤسيين) Founders. من أهم هذه الشركات، نذكر: AdobeLiontypeMonotypeإن شراء حقوق نوع محدد من الخطوط ليس بالأمر السهل، فغالباً الشركات فقط هي التي تكون قادرة على شرائه، وقد يبلغ سعر الخط مع كل تنويعاته لحدود 1000 يورو. 3- طريقة تنصيب ملف الخط:إن كنت من مستخدمي نظام Windows، فبعد تحميل الخط، قم بفك ضغطه إن اضطر الأمر، ثم اضغط بالزر الأيمن للفأرة عليه وقم باختيار "تحميل" "Install".أما بالنسبة لنظام Mac، فك ضغط الملف إن اضطر الأمر ثم انقله إلى الوجهة التالية، Library/Fonts.إن كتابة النصوص تخضع لقواعد أساسية ومعيارية لا يجب تجاوزها، نذكر بعضاً منها: علامات الترقيملا يوجد فراغ قبل الفاصلة، النقطة، الأقواس، وأقواس الاقتباس ودائماً يوجد فراغ بعد كل ممّا سبق.يوجد فراغ قبل الأقواس المفتوحة، والقوس المستطيل الشكل اليميني (]) ونعكس هذه القاعدة عند استخدام اللغة العربية في الكتابة، وحتما لا يوجد أي فراغ بعد هذا النوع من الأقواس.لا يوجد فراغ قبل أو بعد الفاصلة العليا أو الواصلة (-).يوجد فراغ دائماَ قبل النقطتين اللتان تتوضعان فوق بعضهما، الفاصلة المنقوطة، إشارة الاستفهام وإشارة التعجب.التعدادنبدأ التعداد بنقطتين فوق بعضهما، وبعد كل تعداد نضع فاصلة، حتى نصل إلى التعداد الأخير نضع في نهايته نقطة (.). استخدام (إلخ)إلخ ترمز اختصاراً إلى تعبير (إلى آخره)، ولا نضع بعد هذا التعبير أيّة أقواس. مُلخصالآن سوف نقوم بتلخيص ما تعلمناه في هذا الدرس: الإضافات على نهايات الحروف Serfis، هي عبارة عن تعديلات تُضاف إلى بعض الخطوط.بقيامنا بإضافة التعديلات على نوع الخط، مثل سماكته حجمه أو درجة ميلانه، نستطيع خلق عدد لا نهائي من التنسيقات لنوع خط واحد.تصنّف الخطوط في عدد من المجموعات، كل مجموعة تمتلك خصائص محددة ومزايا مختلفة.كيفيّة مراعاة نوع الخط بحسب نوع المستند الذي نعمل عليه.هناك العديد من القواعد الصارمة التي تحدد كيفيّة الكتابة وكيفيّة استخدام علامات الترقيم. ترجمة -وبتصرّف- للمقال Les polices de caractères.

بعد أن قمنا بتصميم الانعكاس المائي لشعار الأكاديمية في الدرس السابق سنقوم اليوم برفع علم الأكاديمية عبر تصميم العلم القماشي لأكاديمية حسوب بواسطة برنامج الفوتوشوب. الخطوات سهلة وبسيطة تابعوها خطوة خطوة. في البداية يجب أن نعلم أن نواة هذا الدرس هو تأثير (مُرشّح Filter) يدعى Displace ولتطبيق هذا التأثير سنحتاج إلى ملفين فوتوشوب الأول سيكون عبارة عن أساس القماش الذي سيأخذ العلم شكله الفعلي والثاني هو رسم العلم الأساسي البسيط. نبدأ أولاً مع الملف الأول حيث قمت بتحميل صورة قماش من بحث جوجل وحملت هذه الصورة المجانية. سنقوم بتعديلها لتصبح مناسبة لتطبيق التأثير وأفضل حالات الصورة لمثل هذا الفلتر هو تدرجات الرمادي مع مستويات معينة. اذهب للقائمة Image > Adjustments > Desaturate أو بالضغط على Ctrl+Shift+U لتحقيق نفس النتيجة حيث سنجرّد هذه الصورة من ألوانها ونحافظ على تدرجات الرمادي فيها فقط. والآن احفظ الملف بإسم "قماش.PSD” وانتبه حيث يجب أن يكون الملف بتنسيق PSD. وبهذا ننتهي من الملف الأول. وسنبدأ بالملف الثاني والذي سنرسم فيه العلم. طبعًا بإمكانكم اختيار أي علم جاهز لأي دولة أو فريق رياضي أو غيره كما تشاؤون. لنفتح ملف جديد بحجم 500×300. سنرسم مستطيلين عرضيين بأي لون تشاء ولكنني اخترت اللون (00c9a5) وسنترك اللون الأوسط باللون الأبيض. سندرج شعار الأكاديمية في الوسط كما في الصورة. قم بدمج جميع الطبقات وذلك من القائمة: Layer > Flatten Image ثم ضاعف هذه الطبقة وحدد الطبقة الجديدة لتنفيذ التأثير عليها. والآن اذهب للقائمة: Filter > Distort > Displace فتظهر لنا أدوات هذا الفلتر، سنضع القيم والإعدادات كما في الصورة. وبعد الضغط على Ok سيفتح نافذة لتحديد الملف فقم باختيار ملف "قماش.PSD” ثم اضغط موافق. وستكون النتيجة بعدها بهذا الشكل: الآن قم بإدراج ملف "قماش.PSD” على ملفنا الحالي ليكون طبقة جديدة. ثم غيّر خصائص المزج لطبقة القماش إلى Hard Light لترى هذه النتيجة. وإذا بدّلت خصائص المزج لطبقة القماش لأنواع مختلفة ستحصل على نتائج مختلفة أيضًا وهذه فرصة مناسبة للتعرف على مختلف خصائص المزج وتأثيراتها. وفي هذه الحالة حيث أن ألوان التصميم داكنة نوعًا ما سنقوم بتخفيف Opacity لطبقة القماش لنحو 60% ليصبح التصميم أكثر جمالًا وروعةً. بالتأكيد فإن دروس تصميم علم مشابهة لدرسنا منتشرة عبر الإنترنت ولكن ما سنقوم به الآن هو تصميم فريد من نوعه. سنضيف علمًا آخر فوق طرف العلم الأول وهذه المرة سيكون علم منصة مستقل بلونها الأزرق المميز. أولاً سنحتاج إلى صورة قماش يكون موضوعًا على طرف الصورة. وسنحتاج إلى صورة تمثل علم منصة مستقل وهو عبارة عن شعار الموقع. سنفتح ملف فوتوشوب جديد بنفس الحجم السابق لملفاتنا 500×300 وستكون الخلفية شفافة. سنضع صورة القماش في أقصى الزاوية العليا اليسرى. حدد طبقة القماش واذهب للقائمة: Image > Adjustments > Desaturate ملاحظة: إذا لم تكن خيارات القائمة مفعّلة فانقر بالزر الأيمن على الطبقة واختر Rasterize Layer. احفظ الملف بإسم "قماش2.PSD” ثم أغلق الملف. من جديد لنعد إلى ملف العمل الأصلي. وسنقوم بإدراج الملف "قماش2.PSD” كطبقة جديدة فوق جميع الطبقات. والآن أضف صورة شعار مستقل كطبقة جديدة فوق الجميع. اضغط Ctrl+T لنتمكن من تحويل الصورة كما نشاء ثم عدّل من زاوية الشعار وموضعه ليكون بزاوية 45 درجة تقريبًا وفي أقصى الركن فوق طبقة القماش الجديدة تمامًا. مع الضغط على Ctrl انقر على طبقة القماش الثانية لتحدد مساحة القماش تمامًا. حدد طبقة شعار مستقل ثم اذهب للقائمة: Select > Invert وذلك لتعكس التحديد ويشمل التحديد الجديد كل مساحة العمل باستثناء القماش الجديد. انقر Delete لحذف الأجزاء الإضافية من الشعار الخارجة عن إطار القماش. اذهب للقائمة: Filter > Distort > Displace وحافظ على ذات القيم الموضوعة ثم اختر ملف "قماش2.PSD”. ستحصل بعض الإزاحة في صورة الشعار قم بتحريكها لإعادتها إلى مكانها. الآن اسحب طبقة القماش الجديدة وضعها فوق طبقة الشعار وغيّر خصائص المزج لها إلى Hard Light. خفف قيمة Opacity إلى 80%. بقي لنا أن نضيف ظلالًا للقماش الجديد فوق القديم. ضاعف طبقة شعار مستقل واسحب الطبقة الجديدة لتصبح تحت القديمة مباشرة ثم انقر على زر Add a Layer Style أسفل لوحة الطبقات واختر Stroke وأدخل القيم التالية كما في الصورة: ثم انتقل إلى Color Overlay وأدخل القيم كما في الصورة أيضًا: سنقوم الآن بالنقر بالزر الأيمن على هذه الطبقة ونختار Rasterize Layer Style ثم اذهب للقائمة: Filter > Blur > Motion Blur أدخل القيم التالية كما في الصورة: اسحب طبقة الظلال هذه إلى تحت طبقة القماش الأولى ثم اذهب للقائمة: Filter > Distort > Displace واختر ملف القماش الأول: خفف قيمة Opacity إلى 80%. يمكن تحميل ملفات الدرس من هنا. إن للفلاتر استخدامات هائلة وفلتر Displace ماهو إلا أحد هذه الفلاتر الرائعة وقد شاهدنا تأثيراتها المذهلة على انعكاس المياه في الدرس السابق وعلى الأقمشة وثنياتها في هذا الدرس. قوموا بتجربة هذا الدرس وشاركوا تجاربكم عبر التعليقات في الأسفل. والآن حان دورك. اختر علمًا ترغب في تنفيذ هذا الدّرس عليه، وارفع النّتيجة النّهائية في التّعليقات لنُشاهدها.

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

هناك أكثر من طريقة لتطبيق تأثير القماش أو ما يسمى في برنامج 3DS MAX بتأثير الملابس Cloth، يوجد مُعدِّل جاهز لتطبيق هذا التأثير كما يوجد طريقة أخرى باستخدام أحد الإضافات في البرنامج وهو MassFX، فهذه الإضافة تُعدّ بديلًا عن Reactor الشهير الذي تم إيقاف العمل به في إصدار 2012 من البرنامج. ولكي نفهم أكثر كيفية تطبيق هذا التأثير، سنقوم بتصميم غطاء قماشي لطاولة، هذا المثال أسهل من تطبيق لباس كامل لشخصية مثالية حيث تحتاج هذه العملية إلى الكثير من العمل والجهد لتحقيقها، أمّا في مثال غطاء الطاولة فالأمر أسهل وأبسط للفهم. سنقوم بتجربة الطريقتين ولكن أولًا افتح برنامج 3DS Studio MAX ثم سنبدأ أولًا برسم الطاولة، وبما أننا نبحث عن البساطة فلن نصمم طاولة مزخرفة أو معقّدة، بل سنرسم طاولة أساسية بسيطة مؤلفة من قاعدة سفلية أرضية وعمود حامل لجسم الطاولة الرئيسي وأخيرًا جسم الطاولة الرئيسي. تصميم الطاولة انقر على زر رسم الأسطوانة Cylinder من لوحة Geometry الموجودة عادة يمين الشاشة (ستكون هناك ما لم تقم أنت بتعديلات على مظهر شاشة البرنامج) ثم انقر على Keyboard Entry حتى تفتح هذه الخيارات ونستطيع إدخال القيم التي نريدها بدون رسم الشكل يدويًّا، ثم أدخل القيمة 20 لنصف القطر والقيمة 5 للارتفاع مع الإبقاء على الاحداثيات على 0 ثم انقر على زر Create وسيتم إنشاء أسطوانة نصف قطرها 20 وارتفاعها 5 تقع في مركز موقع العمل عند النقاط 0 لجميع المحاور. والآن سنرسم العمود الحامل لجسم الطاولة الرئيسي. وحتى نرسم بدقة متناهية سنقوم باستخدام الطريقة السابقة ذاتها، انقر على زر الأسطوانة Cylinder ثم على Keyboard Entry ثم أدخل القيمة 5 للمحور Z وبهذا يتم رسم الأسطوانة الجديدة ابتداء من ارتفاع 5 على المحور الشاقولي لأن الأسطوانة السابقة كان ارتفاعها 5 وسنُبقي بقية المحاور عند 0 للمحافظة على المحاذاة عند مركز الاحداثيات الأفقية ثم ضع القيمة 10 لنصف القطر وأخيرًا ضع القيمة 100 للارتفاع ثم اضغط Create والنتيجة كما في الصورة. ولرسم جسم الطاولة الرئيسي والذي سيوضع عليه الغطاء القماشي، مجدّدًا انقر على Cylinder ثم Keyboard Entry وهذه المرة أدخل القيمة 105 للمحور Z (من المفترض أن طريقة احتساب قيم المحاور أصبحت معلومة) والمحاور الأخرى عند 0 وسنضع القيمة 100 لنصف القطر و5 للارتفاع وأخيرًا Create. أطلق على هذا العنصر اسم “Table” حتى يكون من السهل التعامل معه فيما بعد. لابد من أنك لاحظت أن حواف جسم الطاولة الرئيسي ليست دائرية كما يجب والسبب يعود إلى قلة عدد الجوانب Sides لهذه الأسطوانة ولتعديل ذلك حدّد عنصر الأسطوانة (Table) ثم اذهب إلى لوحة المُعدّلات Modify وهناك ستجد أن عدد جوانب هذه الأسطوانة هو 18 وللحصول على استدارة مثالية وناعمة زِد هذا الرقم إلى 30. ولنضفي بعض الجمالية على جسم الطاولة سنقوم بجعل الحافة العلوية ناعمة ولكن أولًا خفّف عدد Height Segments إلى 3 بدلًا من 5 ثم حدّد هذه الأسطوانة واضغط بالزر الأيمن عليها واختر Convert To > Convert to Editable Poly من القائمة المنبثقة لتحويل هذه الأسطوانة إلى عنصر Poly. والآن انقر على زر Vertex الموجود في لوحة Modify على الجهة اليمنى ثم استخدم المنظور الأمامي Front لتحديد الصفّين العلويين من النقاط في الأسطوانة. اختر أداة تغيير الحجم ومن خلال المنظور من الأعلى Top ضع المؤشر على المحاور حتى يصبح المحورين X وY باللون الأصفر ثم اضغط بزر الفأرة واسحب للداخل قليلًا حتى تصغّر حجم الأجزاء المحدّدة. والآن حدّد الصف الأول من الأعلى فقط من نقاط الأسطوانة ثم صغّر حجمها قليلًا بنفس النسبة التي صغّرنا بها في الخطوة السابقة. سنكتفي بهذا القدر من تصميم الطاولة. طبعًا هناك ملايين الطرق لتصميم طاولات رائعة ومذهلة وبطرق احترافية، ولكننا هنا لسنا في صدد درس تصميم طاولة بطريقة احترافية إنما صممنا الطاولة لتطبيق تأثير القماش عليها وهو محور درسنا اليوم. وأخيرًا سنضع العنصر الذي سيكون الغطاء الذي سيغطي الطاولة. اذهب إلى لوحة Geometry واختر منها العنصر Plane ثم انقر على Keyboard Entry وأدخل القيمة 120 للمحور Z وبقية المحاور 0 وأدخل القيمة 250 للطول والعرض. أطلق على هذا العنصر اسم "Cover". وللحصول على نتائج جيدة يجب أن نزيد من عدد قطاعات الطول والعرض لذلك حدّد هذا الغطاء واذهب إلى لوحة Modify ثم زِد كل من Length Segs وWidth Segs إلى القيمة 25 ثم أضف مُعدل TurboSmooth لزيادة نعومة العنصر. الطريقة الأولى سنقوم أولًا بتجربة الطريقة الأولى التي تعتمد على المُعدِّل Cloth لذلك حدّد عنصر الغطاء واذهب إلى لوحة Modify واختر المُعدّل Cloth ثم انقر على Object Properties لتفتح لك نافذة خيارات العناصر المشاركة في عملية تمثيل تأثير الملابس. ستلاحظ أن العنصر Cover وهو الغطاء موجود في القائمة والآن أضِف عنصر الطاولة Table من زر Add Object، الغطاء هنا سيسقط بفعل الجاذبية نحو الأسفل ولذلك سنقوم بتحديد عنصر الطاولة حتى يسقط الغطاء عليه ويتوقف عنده وإلا فإن الغطاء سيعبر من خلال الطاولة ويسقط وكأن الطاولة غير موجودة، الأمر ذاته ينطبق على ملابس الشخصيات حيث يجب تحديد جسم الشخصية حتى تسقط الملابس عليه وإلا فإن التأثير سيفشل والملابس ستسقط أرضًا وكأن الشخصية غير موجودة. ثم اختر العنصر Cover من القائمة وفعّل الخيار Cloth من اللوحة اليمنى واختر Cotton من قائمة Presets وذلك حتى يحاكي الغطاء قماش القطن، الآن حدّد عنصر Table من القائمة وفعّل الخيار Collision Object ثم انقر OK. ولاختبار التأثير انقر على الزر Simulate وبعد الانتهاء من العمل ستكون النتيجة بهذا الشكل. الطريقة الثانية طبعًا يجب أن نبدأ من عنصر غطاء جديد لم يُطبّق عليه أي تأثير، انقر في مكان فارغ في شريط الأدوات العلوي بالزر الأيمن للفأرة واختر من القائمة MassFX ليظهر شريط أدوات MassFX الذي سنعمل عليه لتطبيق التأثير. حدّد العنصر Table الطاولة ثم انقر مطولًا على رمز الكرة في شريط أدوات MassFX لتنبثق قائمة مؤلفة من ثلاثة خيارات واختر الخيار الأخير Set Selected as Static Rigid Body ليصبح هو العنصر المُؤثّر على الغطاء. حدّد عنصر الغطاء Cover ثم انقر على شكل القميص من شريط أدوات MassFX ليتم تطبيق تأثير الملابس على عنصر الغطاء. أبقِ الغطاء محدّدًا ومن لوحة Modify نجد المعدّل الجديد mCloth، ابحث في خصائصه في الأسفل عن Physical Fabric Properties واضغط على الزر Load واختر بعدها من النافذة التي ستفتح الخيار Cotton ثم اضغط Load ثم عُد إلى نفس الخصائص وفعّل الخيار Use Orhto Bending بدون تغيير أي قيم موجودة. الآن اضغط على الزر Start Simulation من شريط أدوات MassFX والذي يشبه شكل زر التشغيل Play لتبدأ عملية المحاكاة ويتم تطبيق التأثير. الخاتمة هذه خارطة الطريق لتطبيق هذا التأثير، ويوجد العديد من التعديلات التي يمكن أن نطبّقها على هذا التأثير كنوعية القماش ومدى تأثّره بالجاذبية أو بالرياح ويمكن استخدامه لصنع الأغطية والأعلام والملابس و....الخ. ومع وضع اللمسات الأخيرة من الخامات والمواد والاضاءة والموقع المحيط وغيرها من الأمور سنحصل على نتائج مثالية ومذهلة. هذا فيديو يظهر عملية المحاكاة وتطبيق التأثير. وهذه بعض التطبيقات العملية الاحترافية لهذا التأثير.

من الجميل جدًّا تطبيق تأثيرات مختلفة على الصور الشخصية لإضفاء الحيوية والجمال والأناقة على هذه الصور. سنتعلّم في هذا الدرس كيفية تطبيق تأثيرات الإضاءة المختلفة على صورة فتاة صغيرة باستخدام برنامج أدوبي فوتوشوب. اختر الصورة التي سنطبق التأثير عليها، أنا اخترت هذه الصورة المجانية من موقع Flickr لتطبيق هذا التأثير عليها. افتح الصورة باستخدام الفوتوشوب ثم ضاعف طبقة الأرضية عبر الضغط على الاختصار Ctrl+J. حدّد الطبقة الجديدة من لوحة الطبقات ثم اذهب إلى القائمة Filter > Blur > Surface Blur طبّق القيمة 6 على Radius والقيمة 10 على Threshold. هذه العملية ستقوم بتنعيم الجلد ولكنها ستقوم بتنعيم كامل مساحة الصورة أيضًا لذلك استخدم أداة الممحاة لمسح الأجزاء غير المرغوب بتنعيمها كالعينين والفم والشعر والأجزاء المهمة الأخرى. حدّد كلا الطبقتين ثم اذهب إلى القائمة Layer > Merge Layers أو اضغط الاختصار Ctrl+E. ضاعف الطبقة الجديدة ثم حدّدها من لوحة الطبقات ثم اذهب إلى القائمة Image > Adjustment > Desaturate وذلك لإزالة الألوان وتطبيق تأثير الإشباع اللوني. غيّر خصائص مزج الطبقة إلى Hard Light ثم خفّف التعتيم Opacity إلى 50%. ضاعف الطبقة الأساسية ثم حرّكها إلى أعلى لوحة الطبقات ثم اذهب إلى القائمة Filter > Other > High Pass ضع القيمة 10 ثم اضغط OK. وأيضًا غيّر خصائص مزج الطبقة إلى Hard Light ثم خفّف التعتيم Opacity إلى 50%. أضف طبقة جديدة في الأعلى ثم استخدم فرشاة ناعمة سوداء وقم بتلوين جميع المساحات غير المرغوب ظهورها في الصورة النهائية كالخلفية والأجزاء الأخرى من الجسم. ولإضافة أول تأثير لوني على الصورة اذهب إلى القائمة Layer > New Adjustments Layer > Gradient Map طبّق التأثير الأبيض والأسود ثم غيّر خصائص المزج إلى Soft Light. وللتأثير الثاني اذهب إلى القائمة Layer > New Adjustment Layer > Hue/Saturation خفّف قيمة Saturation إلى -60. استخدم فرشاة صغيرة الحجم ثم حدد طبقة القناع لطبقة التعديلات اللونية الأخيرة وقم بالتلوين فوق فم الطفلة. ضاعف هذه الطبقة ثم حدد قناع الطبقة ثم اذهب إلى القائمة Image > Adjustment > Invert ثم عدّل قيمة Saturation إلى +50 وهذه العملية ستبرز لون الشفاه الأحمر فحسب من بقية أجزاء الصورة. ابحث في الإنترنت عن صورة لانعكاسات الإضاءة كهذه الصورة المجانية من موقع PSDGraphics. توجد نسختان من هذه الصورة، أحدهما بصيغة Jpg بخلفية سوداء والأخرى بصيغة Png بخلفية شفافة ويمكن استخدام أيها ولكنني استخدمت صورة الخلفية الشفافة لسهولة تطبيق التأثير المطلوب من خلالها. ألصق هذه الصورة في طبقة جديدة فوق باقي الطبقات ثم اعكسها أفقيًّا ثم عدّل بالحجم والموقع حتى تصل إلى الشكل المناسب أكثر ثم غيّر خصائص المزج إلى Screen لإخفاء اللون الأسود والإبقاء على الإضاءة فقط ثم خفّف التعتيم Opacity إلى 80%. خفّف المستويات Levels لهذه الطبقة إلى النصف تقريبًا. أضف طبقة جديدة ولوّنها باللون الأسود بالكامل باستخدام أداة دلو الدهان ثم استخدم فرشاة كبيرة جدًّا ناعمة جدًّا بلون زهري ولوّن بقعة واحدة الجزء الأيمن من الصورة. ثم غيّر خصائص مزج هذه الطبقة إلى Screen. استخدام فرشاة بحجم أصغر وباللون البرتقالي ارسم بقعتين في باقي مساحة الصورة. قم بإضافة طبقة جديدة ثم لوّنها بالأسود وغيّر خصائص المزج إلى Color Dodge ثم استخدم ذات الفرشاة البرتقالية ولّن فوق ذات البقع البرتقالية في الطبقة السابقة. سنضيف المزيد من تأثيرات الإضاءة. احصل على صورة تأثير أزرق ووردي مميّز من الإنترنت كهذه الصورة المجانية من موقع Wallpapercave. ألصق هذه الصورة في طبقة جديدة فوق جميع الطبقات وغيّر خصائص المزج إلى Soft Light. أضف طبقة جديدة سوداء وغيّر خصائص المزج إلى Color Dodge ثم استخدم فرشاة بيضاء ناعمة بأحجام صغيرة متنوعة لرسم بقع متفاوتة الأحجام على مختلف أرجاء الصورة. حدّد هذه الطبقة ثم اذهب إلى القائمة Filter > Blur > Gaussian Blur ثم طبّق القيمة 4.4 أنشئ طبقة جديدة ثم استخدم أداة التدرج اللوني Gradient ثم انقر على مُصغّر شكل التدرج من شريط أدوات التدرج لفتح نافذة التعديل على التدرج ثم اختر تدرج Noise ثم فعّل خياري Restrict Colors و Add Transparency واجعل قيمة Roughness عند 100%. استخدم تدرجًّا زاويًّا ولوّن من الجزء العلوي الأيمن باتجاه قطري إلى الجهة السفلية اليسرى. حدّد هذه الطبقة ثم اذهب إلى القائمة Image > Adjustment > Desaturate غيّر خصائص المزج إلى Color Dodge وخفّف التعتيم إلى 50%. خفّف تعتيم جميع طبقات تأثيرات الإضاءة المختلفة إلى 50%. ضاعف هذه الطبقة ثم حرّك النسخة الجديدة إلى تحت الطبقة الأساسية ثم حرّكها للأسفل قليلًا. يمكنك قص الصورة لإخفاء العيوب على أطرافها بشكل طفيف وستكون هذه هي النتيجة النهائية. تتميّز هذه الصورة المعدلة بالروعة والجمالية ويمكنك تعديل الخطوات بحسب كل صورة وبحسب نظرتك الخاصة لألوان الإضاءة التي تنوي استخدامها أو إضافة أو إزالة أي من تأثيرات الإضاءة المستخدمة. المصادر: صورة الفتاة الصغيرة مجانية من موقع Flickr بعنوان Lily لصاحبها Ray Dumas تحت الترخيص (CC BY-SA 2.0) وقد تم التعديل على الصورة بحسب الخطوات المذكورة في الدرس. صورة انعكاس الإضاءة بعنوان Lens flare effect من موقع PSDGraphics. صورة الخلفية الزرقاء والوردية بعنوان Purple And Blue من موقع WallpaperCave.

تظهر على الدوام توجهات مُختلفة للتصميم والتي تُطلقها وتقف خلفها الشركات الكبيرة المؤثرة على الأسواق، وتُعدّ تقنيّة التصميم بالظل الطويل "Long Shadow Design" أحد أكثر التوجهات المُلفتة والتي ظهرت مع إعلان شركة Apple لنظامها iOS 7 وأصبحت تُكمّل جنباً إلى جنب تقنيّة التصاميم المُسطحة "Flat designs" والتي أظهرتها شركة مايكروسوفت Microsoft جلياً مع نظامها Windows 8. الظل الطويل "Long Shadow" ببساطة!هو عبارة عن ظل مُنحني بزاوية 45 درجة في العادة ويُمكن رسمه في الطرف اليميني أو اليساري للتصميم (عادة يُستخدم الظل على يمين التصميم للناظر – أي كأن هُناك ضوء مُسلّط من أعلى اليسار ليظهر الظل في اليمين)، وبدأ استخدام التأثير مع الايقونات "icons" إلّا أنه امتد ليشمل الكتابة والرسومات والأجهزة بحسب نظرة المُصمم وإبداعه في التطبيق. أمثلة تطبيقيّة: على اليمين Skype من تصميم JustD. على اليسار Flat Club من تصميم miguelcm. تطبيق عملي على تأثير الظل الطويل "Long Shadow":بعد أن تعرفتم على تاريخ انطلاق التأثير سنكون سعداء لأخذكم بجولة تطبيقيّة تشرح آلية تنفيذ التصميم عبر برنامج Adobe Photoshop. سنخرج بدرسنا بالنتيجة التالية: تلميح: كما هو معروف في عالم التصميم بأن النتيجة النهائية قد تظهر بعدة طرق قد يكون بعضها مُعقّد وصعب وبعضها سريع وجميعها يؤدي الغرض. أيضا نود أن نشير بأنه وبعد انتشار توجّه التصميم بالظل الطويل ظهرت العديد من المواقع الالكترونية التي وفّر بعضها تطبيقات مأجورة و مجانيّة تُمكّن المُستخدمين ممن ليست لديهم خبرة في التعامل مع برامج التصميم من تطبيق الظل الطويل على الرسومات والشعارات الخاصة بهم، أيضاً هُناك إضافات مكتبية وإضافات إلى برامج التصميم ذاتها وفّرت نفس الفكرة، إنما في العادة لا تُوجد نتائج صحيحة وواضحة بشكل كامل باستخدام تلك التطبيقات التي تعتمد على نقاط وخوارزميات مُحددة لذا فإن مُعظمها لن تُلبي الاحتياج المطلوب بشكله الكامل. سنوفّر لكم بهذا الدرس الأساس الصحيح لعمل تأثير الظل الطويل "Long Shadow" بخطوات واضحة عبر استخدام برنامج Adobe Photoshop. لنبدأ بالتطبيق! الخطوة الأولى:1 - افتح مساحة عمل جديدة في Adobe Photoshop واختر الإعدادات كما في الصورة أدناه: 2- اختر لون مُناسب للخلفية، سوف نختار اللون (714a76 #) في تصميمنا: 3- اكتب الاسم المُراد التطبيق عليه واختر له اللون الأبيض (ffffff#) ثُم قم بتوسيطه داخل مساحة الرسم، كما هو موضّح أدناه: (تلميح: تأثير الظل الطويل سوف يبرز بشكل جمالي أكبر مع الخطوط العريضة) الخطوة الثانية:1- تحديد زاوية 45 درجة (وهي زاوية ميلان الظل المُراد رسمه) من خلال اتباع ما يلي: اضغط على (CTRL + " / أو حرف ط) لإظهار الشبكةقم بتقريب الصورة من خلال استخدام أداة (Zoom Tool – أو العدسة المُكبِّرة) أو بالضغط مُباشرة على الحرف Zارسم سطر بشكل يدوي من خلال استخدام أداة (Line Tool) أو بالضغط مُباشرة على الحرف Uقُم بإدارة السطر بين زاويتيّ إحدى خانات الشبكة كي يُصبح ميلانه بزاوية 45 درجة (ما يهمُنا هُنا هو تحديد الميلان بزاوية 45 درجة وطريقتها كانت بتقسيم زوايا المُربع في المُنتصف كون أن زواياه قائمة "90 درجة"، لاحظ السطر الأخضر كيف يخترق مُربعات الشبكة بالرسم التوضيحي) 2- كرّر السطر الأخضر (مُحدِّد ميلان الظل) بنسخه وتوزيعه على الزوايا اليمينية للكلمة كما هو مُوضّح بالشكل التالي: الخطوة الثالثة:1- رسم الظل الطويل من خلال اتباع المراحل التالية: - اختر أداة البن تول (Pen Tool) وضع إعدادات الرسم كما هو مُوضّح 2- اعمل على الرسم بأداة (Pen Tool ) بالوصل بين نُقاط الزوايا العُلوية اليمينية كما هو موضّح بالصور: النتيجة: 3- كرّر نفس طريقة العمل السابقة لرسم ظل للنُقاط كما هو مُوضّح: النتيجة: الخطوة الرابعة والأخيرة:1- العمل على دمج ظل الكلمة مع ظل النُقاط من خلال اتباع ما يلي: - اذهب إلى نافذة الطبقات "Layers" وحدد طبقات الظلال من خلال إبقاء الضغط على زر CTRL واختيار الطبقات المُراد دمجها بزر الفأرة الأيسر. - بعد التحديد اضغط بزر الفأرة الأيمن واختر Merge Layers (( بالإمكان الاستعانة بالاختصار CTRL + E )) 2- العمل على تفتيح الظل لإخراجه بشكل واقعي ومُناسب: - اذهب إلى نافذة الطبقات "Layers" واضغط بزر الفأرة الأيمن على الطبقة الخاصة بالظل واختر نافذة Blending Options ثُم توجّه إلى نافذة إعدادات التدرج Gradient Overlay وحدّد ألوان التدرج للظل. لرسمتنا قُمنا بتحديد اللون الخفيف نفس لون الخلفية (714a76 #) ليظهر تلاشي للظل عند ابتعاده. كما اخترنا للظل الثقيل اللون (523a55 #). النتيجة النهائية للعمل

في المقال السابق تعرّفنا على ماهية صفحة الهبوط، أساسيات وأهم عناصر كل صفحة، كما ألقينا النظرة على بعض الصفحات الشائعة، الآن سنطبق ما تعلمناه في بناء صفحة خاصة بنا. الصفحة التي سنقوم ببنائها ستكون حول تطبيق وهمي، وهو شبكة تواصل تدعى "اهتمامات"، هيا لنبدأ. هذه هي النتيجة النهائية التي سنصل لها بعد تطبيق جميع خطوات الدّرس: الأساسياتسنقوم أولا بإعداد بعض الأمور من أجل العمل. علينا فتح صفحة عمل جديد بأبعاد 1920x6000px من أجل يكون لدينا المتسع للعمل عليه.سنستعمل خط خط Cocon العربي المجاني.سنضع صورة لرأس الصفحة، تستطيع الحصول على أيّ صورة تريدها من مواقع الصور المجانية مثل unsplash.سنستخدم بعض التصاميم الجاهزة من أجل الصفحات، احرص أن تحصل على صور حقيقية في حال كنت تبني تطبيقك، بالنسبة للتصاميم سنحصل عليها من Okilla.سنحتاج إلى إطار للهاتف من أجل أن نضع فيه صورة خاصة بنا في رأس الصفحة، تستطيع الحصول عليه من مجموعة عناصر iOS8 في موقع teehan lax.سنستعمل Grid جاهز من أجل البناء عليه حتى نستخدمه لاحقا في التطوير، من أجل هذا سنحصل على Grid الخاص بإطار Bootstrap وتستطيع تحميله من هنا.سنستعمل مجموعة من الأيقونات المجانية من أجل العمل، اسم المجموعة هي Retina Icons وهي 120 أيقونة مجانية تستطيعون تحميلها من هنا.رأس الصفحةسنبدأ بإعداد رأس الصفحة، وهذا بعد أن قمنا بوضع Grid في المكان المناسب حسنا بعد أن قمنا بهذا، سنقوم بجلب صورة الهيدر المناسبة ووضع overlay أسود شفاف فوقها بشفافية `50%`. سنقوم الآن بإحضار صورة التطبيق للغلاف، سبق وصممت هذه الصورة حتى نستعملها مباشرة. عبر Grid سنختار 6 أجزاء (النصف) ثم نضع الصورة في منتصف ذلك الجزء، نستطيع وضع الصورة في المنتصف عبر تحديد المساحة التي نريد أن نضعه فيها ثم نختار الأزرار المحددة في الأسفل سنختار الآن النصف الثاني، ونضع فيه عنوان الصفحة بخط كبير. أسفله سنضيف نبذة سريعة عن التطبيق، ثم أسفل ذلك سنضيف زر CTA والذي سيكون عبارة زر للتحميل من متجر التطبيقات، احرص على أن تستخدم دوما التصميم الرسمي الذي يتم إدراج في صفحة apple brand guidelines وهو متوفر ب50 لغة، سنستخدم نحن النسخة العربية. لسنا بحاجة لإضافة روابط للتصفح في الهيدر لأننا سنقوم بذلك في الأسفل عبر قائمة ثابتة. روابط التحكمالآن سنقوم ببناء روابط التحكم، وهو عبارة عن قائمة ثابتة في أعلى الصفحة، حيث تثبت بعدما تخرج من إطار الشاشة، القائمة ستكون عبارة عن 4 أيقونات نحصل عليهم من مجموعة Retina Icons سيستغل كل واحد منهم جزئين (السدس) ويتم تنصيفهم في الوسط. التقديم بالتطبيقفي هذا الجزء سنقوم ببناء التقديم بالتطبيق، سيكون عبارة عن 3 أجزاء، كل جزء منهم يتكون من صورة من التطبيق إلى جانب عنوان يصفها وشرح أكثر أسفل العنوان. التقسيم سيكون مماثلا لرأس الصفحة، الصورة تستغل نصف الصفحة، والمحتوى يتسغل النصف الآخر، لكن هذه المرة سيكون المحتوى أقل في الحجم. سنقوم بالأمر ثلاث مرة، في الجزء الثاني سنقلب الاتجاه بحيث يصبح المحتوى على اليمين كما سنغير الخلفية إلى شيء داكن. جزء بناء الثقةجزء بناء الثقة سيتكون من جزئين، وهما بعض شهادات المستخدمين، وبعض الأرقام فلا شيء يبني الثقة في محل الزبون كاستخدام الأرقام فهي شيء سهل القراءة وسريع الملاحظة ويسهل استخدامها للمقارنة. بالنسبة لجزء شهادات المستخدمين، سوف سنستخدم slider حيث أن كل لقطة ستحتوي على شهادة ومعها صورة لصاحبها، الصورة كما تكلمنا في المقال السابق تساعد في كسب الثقة لأنك تعرف مصدر الكلام. أما بالنسبة لجزء الأرقام، فسنستخدم خلفية أخرى (صورة) حتى نجذب الانتباه، سنقوم بتقسيم الصفحة إلى 4 أجزاء، مع كل جزء يحتوي على أيقونة تعبيرية، بالإضافة إلى الرقم وما نحاول نسب الرقم له (عدد الأعضاء، عدد التحميلات...) جزء التحويلفي هذا الجزء نحن لا نملك الكثير لنقدمه، لذا سوف نقوم بإضافة زر التحميل من متجر التطبيقات مجددا إلى جانب إضافة أزرار نشر التطبيق في شبكات التواصل الاجتماعي، سنستخدم أيقونات Entypo الاجتماعية الإعداد للمرحلة القادمةحسنا، عند النقطة نكون رسميا قد انتهينا من التصميم، لقد اتبعنا أهم المعايير المطلوبة منا، وحان الوقت لنحول التصميم إلى صفحة حقيقية، وهذا ما سنقوم به في المقال القادم، ولكن إلى ذلك الحين، نحن لدينا العديد من الصور، ونحتاج إلى استخراجها كلها، وأمامنا طريقان، أخذ كل صورة لوحدها ونسخها وفتح صفحة جديدة ولصق الصورة فيها ثم تغيير إعدادات الصفحة لتناسب أبعاد الصورة ثم حفظ الصورة، وهذه الطريقة كما استنتجت، بدائية. لذا نستطيع أن نستخدم الطريقة الذكية، والتي هي كالتالي، سنعود لكل طبقات الصور (صور التطبيق والأيقونات والخليفات) ونغير اسمها إلى اسم الملف الذي نريده إلى جانب الامتداد، مثلا أغير اسم خلفية رأس الصفحة إلى `background.png` بعد أن نقوم بكل هذا، سنذهب إلى `File>>Generate>>Image Assets` ونُفّلعه، وبعدها نقوم بحفظ العمل بصيغة PSD ليقوم فوتوشوب بحفظ كل الصور التي نريدها في مجلد جانبي (باسم ملف PSD الخاص بنا) وبداخله كل الصورة جاهزة، أوليس هذا رائعا؟ خاتمةفي الدرس القادم سوف نطلع على كيفية بناء الصفحة، مع تعلم بعض الأمور الجديدة واستعمال بعض المعايير في بناء الصفحات.

هل ترغب في ولوج عالم التّصميم باستخدام InDesign؟ ربّما نصّبت البرنامج لكن بدا لك صعب المراس نظرًا للكم الكبير من الخواص والإعدادات التي يملكها؟ في هذا الدّرس سنقوم بجوله في التّطبيق وشرح مُختلف أدواته. الصور الموجودة في هذا الدرس مأخوذة من نسخة البرنامج CC ولكن بغضّ النظر عن بعض الأمور التي اختلفت في النسخ الحديثة من البرنامج لم تتغير واجهة البرنامج إلا بشكل طفيف منذ النسخة CS2. واجهة برنامج Indesignبداية نفتح البرنامج، فنجد أن واجهته تتألف من خمس مناطق، لن يكون استخدام هذا البرنامج مُعقداً إن كنت تمتلك بعض الخبرة باستعمال برامج Adobe فواجهته مصممة وفق المبدأ العام ذاته. المناطق الخمسة هي: شريط القوائم.شريط القياسات.صندوق الأدوات.منطقة المنصات.منطقة العمل.لكي لا تواجه أي صعوبات في تحديد مكان النقر خلال الدرس، سوف استخدم نفس الأسماء لهذه المناطق دائمًا. 1. شريط القوائم يتشابه البرنامج بقوائمه مع معظم برامج Adobe فبالإضافة لقائمة (File ،Edit)، هنالك قوائم أكثر تخصصاً مثل (Page ،Text ،Object ،Table)، وسوف نتعرف على وظائف كل منها. عند فتح أي قائمة من قوائم البرنامج، سوف أستخدم الصيغة التالية لشرح تسلسل تنفيذ عملية الفتح: (Menu > Sub-Menu-1 > Sub-Menu-2). 2. شريط القياسات يتوضّع هذا الشريط تماماً أسفل شريط القوائم، ويرتبط بشكل كامل بالعنصر الذي يكون محدداً، والمعلومات التي توجد بداخله تتغير بشكل دائم. وكبقية القوائم سنرى استخدامه في عملية القياس في الوقت المناسب، بجب أن تعلم مكان توضع هذا الشريط، لكي تكون الأمور سهلة عليك عندما نحتاج للنقر عليه. 3. صندوق الأدوات يتوضّع هذا الشريط في المنطقة اليسرى من الشاشة. إذا قمنا بالنقر على السهمين الصغيرين الموجودين في أعلى الصندوق، سيصبح الصندوق عبارة عن عمودين، إذا أعجبتك طريقة العرض هذه، لا مانع من إبقاءها على حالتها. وإذا نقرت على مجموعة النقاط الموجودة أسفل السهمين الصغيرين سوف تتمكن من فصل وسحب صندوق الأدوات ووضعه في المكان الذي تريده، ولتثبيته في مكانه الجديد، يجب أن تقرّبه بشكل كاف من حافة واجهة العرض حتى يظهر خط أزرق وعندها تقوم بإفلاته، بإمكانك إفلات زر الفأرة في المكان الذي تريده وعندها سيتوضّع صندوق الأدوات على الجانب أو المكان المختار من شاشة العرض. سأقوم بتقديم الشرح عن بعض الأدوات فقط، الباقي منها سنتكلم عنه في الوقت المناسب، لكي نتعلم اختصارات الأدوات على لوحة المفاتيح، يكفي أن نبقي مؤشر الفأرة على الأداة للحظات وسيظهر لنا اسم الأداة بالإضافة لاختصارها على لوحة المفاتيح. أداة التحديد: أولى الأدوات هي أداة التحديد، تُمثّل هذه الأداة بسهم أسود اللون، وهذه الأداة تكون مفعلّة بشكل افتراضي عند فتح البرنامج. تفيد هذه الأداة في تحديد العناصر التي تشكل التصميم بسهولة وبساطة. توجد طريقة ثانية لتحديد العناصر، بالنقر على العنصر المراد تحديده مستخدماً الزر الأيسر للفأرة، ويمكنك تحريك العنصر في حال أبقيت النقر مستمراً، أو باستخدام أسهم لوحة المفاتيح. أداة التدوير هذه الأداة وظيفتها تدوير العنصر المحدد. أداة تغيير الحجم المثلث الأسود الصغير في أسفل يمين الأداة يعني أنه يمكنك إظهار أدوات أخرى عن طريق الضغط باستمرار على زر الفأرة الأيسر، بهذه الطريقة تظهر الأشكال المختلفة لأداة تغيير الحجم التي كانت مخفية. تسمح لك هذه الأداة بتغيير أبعاد وحجم العنصر المحدد، بالإضافة إلى إمكانية إمالة العنصر المحدد. أداة تغيير الحجم اليدوية هذه الأداة تجمع خواص أدوات تغيير الحجم والشكل، وتسمح بتطبيقها على العنصر المحدد تبعاً لموقع مؤشر الفأرة. على سبيل المثال إذا نقرنا على زاوية العنصر وقمنا بتحريك الفأرة، سيتغير الحجم، وإذا ابتعدنا عن زاوية العنصر سيقوم العنصر بالدوران. المكبرة تتوضّع المكبرة في الجزء السفلي من صندوق الأدوات، وتسمح بتكبير وتصغير المستند الذي تقوم بتصميمه، بعد اختيار المكبرة يمكنك ببساطة النقر على التصميم لتكبيره، ويمكنك أيضًا رسم مستطيل حول المنطقة التي تريد تكبيرها بالضغط على الزر الأيسر من الفأرة (يمكنك أن ترى إشارة "+" صغيرة متوضعة في مركز عدسة المكبرة)، وبنفس الطريقة يمكنك القيام بالتصغير لكن بالضغط المستمر على Alt. (سوف ترى إشارة "-" في مركز العدسة). هنالك طريقتان مختلفتان للتكبير والتصغير دون استخدام المكبرة: - استخدام دولاب الفأرة بالتزامن مع الضغط على زر Alt، تدوير دولاب الفأرة باتجاه معين يقوم بالتكبير والاتجاه الآخر يقوم بالتصغير. - استخدام الاختصار التالي Ctrl+ "+" للتكبير و Ctrl+ "-" للتصغير. قيمة التكبير الحالية تظهر على يمين شريط القوائم، وتكون موجودة أيضاً بالقرب من اسم الملف الذي تعمل عليه أعلى منطقة العمل. أداة اليد - Hand Tool: تتوضّع هذه الأداة تماماً فوق العدسة المكبرة، وتسمح لك هذه الأداة بتحريك الملف الذي تعمل عليه بمجرد الضغط عليه والسحب، وتعد هذه الطريقة أسهل من تحريك الملف بواسطة أشرطة السحب الموجودة في أسفل يمين الشاشة. في الحقيقة، قليلون جداً من يقومون باختيار هذه الأداة من صندوق الأدوات مباشرة، الغالبية العظمى تقوم بالضغط على زر Space، وبمجرد الضغط عليه تُفعَل أداة اليد، وبمجرد رفع الضغط عن زر V تُفعَل الأداة التي استخدمت قبل تنفيذ هذه العملية. لتتنقل عبر ملفك، يكفي أن تضغط على زر Space، بالتزامن مع النقر والسحب باستخدام الفأرة. منطقة المنصات يحتل شريط المنصات الجزء الأيمن من الشاشة، وظيفة هذا الشريط هو تأمين وصول سريع للنوافذ التي نصل إليها عادة عن طريق شريط القوائم. يعد هذا الحيّز قابلاً للتخصيص بشكل كامل، ويعتمد على حاجة كل مستخدم للبرنامج، لذا لا تقلق إن رأيت أن العناصر لديك أقل من التي تظهر عندي، ببساطة لأنني قمت بوضع الكثير منها. سوف نرى عند استخدامنا لهذه المساحة مدى أهميتها وحاجتنا إليها، إذا قمنا بالضغط على السهمين الصغيرين الموجودين في الأعلى، نلاحظ أن كل المنصات تمددت وأصبحت تحوي العديد من التفاصيل، هذه طريقة مميزة للعرض لكن تستهلك مساحة كبيرة وتقلل من عدد المنصات التي يمكن أن نعرضها، الأمر عائد لك في تحديد ما تراه مناسباً. إذا أردت إضافة منصة لهذه المساحة، نذهب إلى نافذة القوائم ونختار المنصة التي نريد إضافتها، على سبيل المثال: منصة Effects، سوف يُظهر لك Indesign نافذة منبثقة صغيرة ضمن مساحة العمل، بإمكانك الضغط أو تحريك المنصات ضمن الشريط كيفما تشاء، وبالتالي تكون قد حصلت على وصول سريع لهذه المنصة في المرة القادة التي تحتاجها فيها. لإزالة واحدة من المنصات، فقط قم بعكس العملية التي قمت بإنجازها منذ قليل، اضغط / اسحب المنصة إلى مساحة العمل ثم قم بإغلاقها. برنامج Indesign يقوم بتذكر طريقة العرض الخاصة بك عند تشغيله، لكن على كل حال، أنت تملك الخيار في حفظ هذه الطريقة بالعرض وذلك باتّباع الخطوات التالية: Window > Workspace > New Workspace سيظهر لك مربع حوار يسألك عن الاسم الذي تريد إعطاءه لهذا التنسيق. وهذه الطريقة فعّالة إن كنت تستخدم البرنامج بشكل مشترك لإنجاز عمل محدد. منطقة العمل إن تحديد هذه المساحة أمر بغاية السهولة، فهي ببساطة كل ما تبقى من واجهة البرنامج، في الأعلى، يوجد اسم الملف الذي تعمل عليه وبالقرب من الاسم تماماً درجة التكبير المفعّلة. يظهر لدينا في الصورة الملحقة، أن هناك لساناُ واحداً مفتوحاً (Tab)، لكن إن كنت قد فتحت عدة ألسنة لتعمل عليها، فبإمكانك العمل عليها والتنقل بينها بكل سهولة. إن كان هناك نجمة صغيرة تسبق الاسم، هذا يعني أن هنالك بعض التعديلات التي لم يتم حفظها بعد. توجد المساطر في أعلى يسار منطقة العمل وهي ذات فائدة كبيرة جداّ إن لم تكن ظاهرة اذهب إلى View > Show Rulers. وفي الوسط تماماً نرى مستطيلاً أسود اللون يمثل الملف الذي تعمل عليه، أما المساحة الموجودة حول هذا المستطيل، فتدعى لوح اللصق، ووظيفتها الأساسية تخزين الصور والنصوص التي تنتظر دورها لتدمج في التصميم، ولا يطبع شيء ضمن هذه المساحة. الكتل الأساسية - Main Blocksفي برنامج Indesign، كل العناصر التي نشكلها محتواة ضمن كتل/صناديق، إن كانت عنواناً أو محتوى نصي لمقالة أو حتى إن كانت صورة. إن حدود الكتل لا تظهر في الطباعة، هي موجودة فقط لتسهيل التحكم بمحتوى الكتل واختيارها. في طريقة العرض الافتراضية للبرنامج تكون حدود الكتل مرئية، إن كانت لديك غير مرئية اذهب إلى View > Show Frame Edges بإمكانك إخفاء كل الحدود والهوامش لفترة قصيرة لتتمكن من معاينة ملفك قبل طباعته، تتوضع هذه الخاصية على يمين شريط القوائم وتدعى Screen Mode، وكوضع افتراضي لها تكون Normal. أو بإمكانك اختيار Preview لمعاينة تصميمك قبل طباعته. أشكال الكتل التصميمية - Forms of the Block:أداة المستطيل: باستخدام هذه الأداة، تستطيع رسم كتلة مستطيل، ابق الضغط مستمرا على زر Shift مع رسم المستطيل، وسيتحول المستطيل بشكل تلقائي إلى مربع. أداة رسم المستطيل ذي الزاويا المدورة: لرسم هذا النوع من المستطيلات، بداية نرسم مستطيلاً عادياً ثم نطبق التالي Menu > Object > Convert Shape ستظهر لدينا مجموعة من الخيارات للتعديل على شدة الانحناء ونوعه والكثير من التفاصيل الأخرى على يمين شريط القياسات. هذه الخيارات متوفرة أيضاً للأشكال متعددة الأضلاع. أداة رسم الكتلة البيضاوية: تسمح أداة Ellipse tool برسم كتل بيضاوية الشكل، وبنفس الطريقة إن ضغطنا على زر Shift أثناء الرسم سيتحول الشكل إلى دائرة. أداة رسم المضلع متعدد الأضلاع: تمكننا هذه الأداة من رسم الكتل متعددة الأضلاع، لتحديد عدد أضلاع ما عليك إلا الضغط في مكان ما ضمن مساحة العمل، فيظهر لك مربع حوار يحوي حقولاً لتحديد عدد أضلاعه ونسبة الانخماص نحو الداخل (التحول إلى شكل نجمي). التخصيص - Customization:بالإضافة إلى كل هذه الأدوات لرسم الأشكال الهندسية يملك البرنامج أدوات مختلفة توفر تخصيصا وتعديلا للكتل المرسومة. أداة الريشة - Brush Tool:تسمح هذه الأداة برسم الانحناءات مع نقاط ارتكاز لها، تقوم بإزالة أو إضافة نقاط الارتكاز لتعديل شكل الانحناءات، إن تأثيرات العناصر يمكن أن تكون من أحد نمطين: ناعم أو بانكسار واضح. تغيير نوع نقطة الارتكاز - Convert Direction Point Tool: وظيفة هذه الأداة هو تغيير نوع نقطة الارتكاز من نقطة ارتكاز ناعمة إلى أخرى منكسرة. قلم الرصاص - Pencil Tool: بإمكاننا رسم كتل بشكل حر مستخدمين هذه الأداة، وإن كان رسمنا غير مغلق تماما، سيقوم البرنامج بوصل النقطة الأولى مع النقطة الأخيرة بشكل إلي إن أردنا ملئه بلون ما. أداة التنعيم Smooth Tool: تسمح هذه الأداة بتنعيم الشكل الذي قمنا برسمه يدويا وتقلل من عدد النقاط المستخدمة. أداة الممحاة - Eraser Tool:بإمكاننا إزالة بعض الأجزاء التي لا نرغب بها. أداة الاختيار المباشر - Direct Selection Tool: تسمح لنا هذه الأداة باختيار وتحريك كل من نقاط العناصر (المستطيلات البيضاء الصغيرة). أداة رسم الخطوط - Line Tool: هذه الخطوط تدعى الخطوط الناظمة، ولا يمكن إعطاءها لون خلفية محدد، لكن بالإمكان إضافة حواف لهذه الخطوط. تنسيق حواف الكتل:بإمكاننا تطبيق لون محيطي على الكتلة، نختار اللون، السماكة، وبالإضافة إلى طيف كبير من أشكال الخطوط نستطيع الاختيار منها. الصورة التالية تبين لنا أشكال مختلفة لحواف الكتل: The Stroke pallet: بإمكاننا تحديد سماكة الخط، شكل نهايته، وكيف ترتبط الصفات ببعضها البعض. أما بالنسبة للشبكات، فأنت تملك خيار تحديد بدايتها ونهايتها، لصنع الأسهم على سبيل المثال. لحذف أحد الخطوط العريضة، فقط اجعل سماكته تساوي الصفر. محتويات الكتلمن الممكن أن تحتوي الكتل التصميمية على أنواع مختلفة من العناصر: 1- الألوان الموحدةمن الممكن أن يحتوي الإطار على خلفية لونية باستخدام منصة Swatches. المربع الفارغ:يقوم بتحديد لون الخلفية. كنتيجة، لتغيير اللون نختار كتلة ما لتعديلها، ونختار إن كنا نريد تعبئتها أو تمسيدها لونيا Stroke، ثم نضغط على اللون الذي نريده. سوف تلاحظ أن هناك ألون قليلة لإضافتها، لا تقلق سنتعلم لاحقا كيف نزيد من عدد الألوان. التدرج اللوني - Gradient Color: بإمكاننا أيضا تلوين إحدى الكتل بتدرج لوني، لتحقيق ذلك نستخدم منصة التدرج اللوني Gradient Pallet التي تمكننا من اختيار نوع التدرج اللوني ولونه الأساسي. الصور - Images:الكتل مهما كان نوعها بإمكانها استيعاب صور. النصوص - Textsأداة النص - Text Tool:لنختار أداة النص ونضغط بداخل أي من الكتل تمهيدا لملأها بالنصوص، هذه الطريقة تعمل مع كل أنواع الكتل حتى المخصصة منها. وبإمكانك أيضا تشكيل كتلة مستطيلة الشكل للنص دون الحاجة للمرور بمراحل تشكيل إطار عام، برسم مستطيل باستخدام أداة النص، الأداة المرفقة مع أداة النص تدعى أداة Type on Path - أداة الكتابة على الحدود، تمكننا هذه الأداة من الكتابة على حدود الكتلة المحددة، الطريقة بسيطة، بعد أن تختار هذه الأداة، نضع المؤشر خارج الكتلة وليس داخلها ونحركه بالقرب منها حتى تظهر لنا إشارة "=" صغيرة ثم نضغط عليها ونبدأ بالكتابة. بهذا الشكل نكون قد انهينا التعريف الأوليّ ببرنامج Indesign وواجهته، أرجو أن تكون قد حصلتم على معلومات مفيدة في استخدامكم المستقبلي للبرنامج. ترجمة -وبتصرّف- للمقال: Mise en Page avec InDesign - Prise en main du logiciel.

إن بيوتنا غالبا تكاد لا تخلو من رفوف وخزانات تمتلئ بالأغراض المختلفة والتي قد تتشابه في بعض أجزائها، لذا سنستمتع برسم خزانة نصفها العلوي عبارة عن رفوف تحتوي على أغراض مختلفة والتي ستبدو في النهاية كما في الصورة: وبما أن درسنا يحتوي على الكثير من التفاصيل فسنقوم بتجزئته إلى جزأين. خطوات رسم الخلفية ارسم مستطيلا عبارة عن جدار الغرفة واجعله بالعرض والارتفاع المناسب، ثم ارسم أسفله مستطيلا آخر بنفس العرض إلا أنه أقل ارتفاعا ليمثل أرضية الغرفة. ارسم فوق الجدار مجموعة من المستطيلات الأخرى بلون أقتم من المستطيل الأصلي. ملاحظة: لتكرار المستطيلات استخدم الزر الأيمن للشكل المراد تكراره ثم اختر Duplicate. قم بتسوية المساحة بين المستطيلات بتحديدها مع الضغط على Shift أثناء التحديد لتتمكن من تحديدها جميعا، ثم اجعل اصطفافها متساويا عموديا من لوحة المحاذاة والاصطفاف Align and distribute. ارسم وسط الجدار مستطيلا مستدير الزوايا بالعرض والطول الذي ترغب أن تكون عليها الخزانة، واختر لها اللون المناسب وأزل عنها الحدود من لوحة التعبئة والحدود Fill and stroke. ارسم في النصف السفلي من الخزانة بابين بأداة المستطيل مع إبقاء حدودهما، ولون الحدود بلون أقتم من لون الخزانة. أضف في النصف العلوي للخزانة مستطيلا ثالثا ولونه بلون أقتم من الخزانة، وأضف للبابين على جانبيهما مستطيلا صغيرا بلون قاتم. ولإعطائه لونًا أقتم من الخزانة، قم بتلوينه بنفس لون الخزانة ثم من لوحة التعبئة Fill and stroke مع التأكد من اختيار نمط الألوان HSL اختر الشريط الذي عند الحرف L وحركه لجهة اليسار. أضف المقبض لبابي الخزانة برسم شكل بيضاوي بأداة الدائرة، ثم أضف رفّين بأداة المستطيل وسط المستطيل القاتم ولونهما بنفس لون الخزانة. قم بتسوية المسافة بين المستطيلين بتحديد خيار اصطفافهما أفقيا من لوحة المحاذاة والاصطفاف. قم بإقفال الطبقة الحالية من لوحة Layers وذلك باختيار layer من الشريط العلوي الرئيسي ثم اختر layers من القائمة المنسدلة لتظهر لنا لوحة الطبقات، ثم من اللوحة اضغط على رمز القفل، حتى لا تقوم بتحريك أحد أجزائها خطأ أثناء رسم بقية التفاصيل. من علامة الزائد في لوحة الطبقات اختر العلامة + لإضافة طبقة جديدة ثم من النافذة المنبثقة اختر إضافة Add لإضافة الطبقة الجديدة التي سنرسم فيها بقية التفاصيل. خطوات رسم الكتب والدفاتر سنبدأ بالرّفّ العلوي ونصف فيه مجموعة من الكتب بأداة المستطيل سندور آخرها من جهة اليمين ليبدو مائلا، وبنفس الأداة يمكننا إضافة بعض التفاصيل والخطوط للكتب. ارسم في الطرف الأيمن من الرّفّ الثاني مجموعة من الدفاتر عن طريق أداة المستطيل، وليظهر شكل الأوراق في بعضها، قم بتكرار الشكل وتلوينه باللون الأبيض، ثم اختر الشكل المكرر وعن طريق أسهم التحجيم قم بسحب السهم العلوي المتوسط للأسفل مع الضغط على Shift أثناء ذلك وذلك لتصغير الشكل من الجهتين بشكل متساوي. أضف دفترا أعرض فوق الدفاتر السابقة في الأعلى وكرر الخطوات التي عملتها مع الدفتر الماضي لتظهر الأوراق، وارسم مستطيلات رفيعة وسط المساحة البيضاء، ومن لوحة المحاذاة والاصطفاف رتب اصطفافها عاموديا. ملاحظة: إذا أردت تحديد مجموعة متماثلة من الأشكال لها سمة مشتركة في (اللون، الحدود، أوكلاهما،..) دون الاضطرار لتحديدها شكلًا شكلًا، اختر الشكل المطلوب تحديد نظائره وعن طريق الزر الأيمن اختر التحديد المماثل Select same. ستظهر لك مجموعة من الخيارات، اختر أحدها، وهنا اخترنا Fill color ليحدد لنا جميع المستطيلات المعبئة باللون الرمادي. ارسم على الدفتر العريض مجموعة من الحلقات، عن طريق أداة المستطيل مع جعل المستطيل بزوايا كاملة الاستدارة، ورتب المسافة بينها عن طريق تبويب المحاذاة والاصطفاف. حدد أجزاء الدفتر وقم بتجميعها Group عن طريق Ctrl+G ثم كرّره وغير لونه وضع نسخة منه في الرّفّ العلوي مع تدويره بمحاذات الكتاب المائل. خطوات رسم علبة الأقلام بما أننا رسمنا الدفاتر والكتب، فلا شك أننا بحاجة للأقلام، والأقلام بحاجة لعلبة لحفظها، لذا بأداة المستطيل سنرسم مستطيلا مستدير الزوايا، وسنحرره عن طريق أداة التحرير Node tool ثم من الشريط العلوي نختار Object to path لتحويل الشكل لمسار حيث ستظهر لنا أربع عقد nodes حول الشكل. نختار الأربع عقد السفلية للشكل ثم من لوحة المفاتيح نضغط Ctrl+> لنحرك العقد الأربع للداخل. ارسم ثلاث مستطيلات وسط علبة الأقلام وحددها معا. من الشريط العلوي الرئيسية اختر المسار Path ومن القائمة المنسدلة اختر توحيد Union وذلك حتى تصبح هذه المستطيلات شكلا واحدا. كرّر شكل العلبة مجددا ثم اختر الشكل المُكرّر مع المستطيلات التي أصبحت جزء واحدا، ومن نفس قائمة Path اختر Intersection ليظهر عرض المستطيلات ملائما مع حواف العلبة دون زوائد. سنرسم القلم الملون الذي يستخدم مع الكتب لتحديد سطورها بالألوان، وذلك عن طريق رسم مستطيلين بزوايا مستديرة، وبأداة الرسم Bezier سنرسم خطا أفقيا ليفصل الغطاء عن قلمه، ولجعل الخط في اتجاه مستقيم دون ميلان اضغط على Ctrl أثناء رسم الخط، ثم أعد الخط خطوة واحدة للخلف عن طريق تحديده ثم اختيار Page down من الشريط العلوي. سنرسم قلم الحبر بنفس الطريقة السابقة إلا أنا سنرسم حامل الغطاء على أحد جانبي القلم. قلم الرصاص سيحتاج لتفاصيل أكثر لذا لرسمه اتبع الخطوات التالية: ارسم الممحاة عن طريق أداة المستطيل مع جعله كامل الاستدارة ثم ارسم فوقه مستطيلين بزوايا حادة، أحدهما يمثل المعدن الذي يحيط بالممحاة واجعله أعرض منها بقليل والآخر يمثل ارتفاع القلم واجعله طويلا بطول القلم. كرر المستطيل الأصفر الذي هو عبارة عن ارتفاع القلم ولونه باللون الأسود ثم بتحديده، واختيار أحد السهمين الجانبيين المتوسطين قم بتصغيره مع الضغط على زر Shift أثناء ذلك ليصغر من الجهتين اليمنى واليسرى. ارسم مستطيلا في طرف القلم ليمثل رأس القلم، وتأكد من أن زواياه حادة وأن عرضه كعرض القلم تماما. ملاحظة: لجعل عرض رأس القلم كعرض القلم، يمكنك تحديد المستطيل الأصفر ثم من الشريط العلوي عند الحرف w الذي يمثل عرض المستطيل رقميا، انسخ الرقم ثم ألصقه في عرض المستطيل الجديد بعد تحديده، أو يمكننا نسخ المستطيل الأصفر وتقليل عرضه وتغيير لونه بدلا من رسم مستطيل جديد. نحرر المربع الجديد عن طريق Node tool ثم من الشريط العلوي نختار Object to path ثم نحدد بنفس الأداة الضلع العلوي للمستطيل، ومن الشريط العلوي نختار Insert new node لإضافة عقدة جديدة. اختر العقدتين العلويتين الجانبيتين دون الوسطى التي أنشأناها توًا، ثم من لوحة التحكم حركهما للأسفل عن طريق الأسهم، أو اسحبهما بمؤشر الفأرة مع الضغط على Ctrl للمحافظة على اتجاههما. حدد الضلع السفلي وأضف ثلاث عقد جديدة وذلك بالضغط مرتين على علامة زائد من الشريط العلوي. قم بتحديد العقدتين الداخليتين دون الوسطى – أي حدد العقدة الثانية والرابعة من جهة اليمين - واسحبهما بالفأرة للأسفل مع الضغط على Ctrl أثناء السحب للمحافظة على ثبات مكانها عاموديا، أو حركهما عن طريق سهم لوحة المفاتيح السفلي. لرسم السمرة في طرف القلم، كرّر رأس القلم ولونه باللون الأسود، ثم ارسم مستطيلا وأنزله حيث الموضع الذي ترغب أن يكون عليه ارتفاع السمرة. حدد الشكلين ومن قائمة Path اختر Difference. وبذلك يكتمل القلم: قم بصف الأقلام الثلاثة في علبة الأقلام مع ملاحظة أنه بإمكانك جعل علبة الأقلام شفافة لتظهر التفاصيل التي قمت برسمها إن رغبت بذلك عن طريق لوحة التعبئة وذلك بتغيير قيمة شفافية العلبة Opacity. خطوات رسم الصناديق والسجلات ارسم صندوقا بنفسجيًا في الرف الثاني بأداة المستطيل مع تدوير غطائه بجانبه. انتقل للرّفّ الأخير وارسم فيه صندوقا آخر مع غطاء أعرض منه بقليل، واجعل الغطاء قاتما عن طريق لوحة التعبئة والحدود، ثم كرر الغطاء ولونه بنفس لون الصندوق وارفعه قليلا للأعلى. نأتي الآن لرسم السجلات عن طريق اتباع الخطوات التالية: ارسم مستطيلا بزوايا مستديرة، وفي وسطه ارسم ورقة بيضاء حادة الزوايا. ارسم في الورقة عن طريق Bezier خطا مستقيما، مع الضغط على Ctrl أثناء رسمه، ثم قم بتكراره على طول الورقة. ارسم في الطرف العلوي من السجل دائرة، وحتى تصبح بأبعاد متساوية اضغط Ctrl أثناء رسمها، ثم لونها بلون أقتم، وكررها ولون الدائرة المكررة بلون فاتح. كرر الدائرة الفاتحة ولونها بلون مغاير وحركها لليمين وللأسفل قليلا بالنسبة للدائرة الرمادية. حددها هي والدائرة الرمادية ثم من قائمة Path اختر Intersection. قم بتجميع أجزاء السجل، ثم كرره بالعدد الذي ترغب. هذا ما وضعنا من أغراض حتى الآن:

يمكننا تصميم تقويم مكتبي صغير يوضع على المكتب وخصوصًا مع اقتراب عام 2016 حيث سيفكّر معظمنا في شراء واحدة جديدة للعام الجديد، إن بحثنا في الإنترنت سنجد الكثير من ملفات PDF عالية الدقة التي نستطيع تحميلها وبلغات مختلفة. ولعل تصميم تقويم (رزنامة) بواسطة برنامج Inkscape يبدو مُستبعدًا من قبل كثيرين ولن تجد الكثير من ملفات SVG الجاهزة للتحميل والتعديل على الإنترنت بينما سيفضّل الغالبية العظمى من المصممين برامج أخرى لتصميم أعمالهم (التقويم) ومن أهم هذه البرامج Photoshop، البرنامج المجاني الرائع GIMP، Illustrator، Corel Draw، البرنامج المذهل Scribus، Microsoft Word، Libre Office، ...الخ وبذلك سنجد العديد من هذه البرامج التي يمكنها تولي المهمة، بعضها مجاني والآخر غير مجاني ولكن سيبقى خياري الأول هو إنكسكيب للعمل على الرغم من أن تقنياته ومزاياه أقل من معظم البرامج المذكورة ولكنه يبقى قادرًا على تنفيذ المهمة بنجاح وفي هذا الدرس سنتعلم كيفية استخدام إمكانات هذا البرنامج لتصميم التقويم. طبعًا برنامج إنكسكيب ليس البرنامج المثالي لتصميم التقويم فهو على سبيل المثال لا يستطيع التعامل مع التصاميم المتعددة ما يعني أننا مضطرون لتصميم 12 ملف على حدة (12 ملف كل ملف لشهر من الشهور وأضف إليهم صفحة الغلاف) ولكننا سنصمم ملف قالب ليصبح من السهل التعديل عليه وتسهيل العملية، وأيضًا هذا البرنامج لا يقوم بقص آلي أو قياس هوامش الطباعة آليًا (سنضطر للقيام بذلك يدويًا) كما أن النتائج لن تكون بألوان CMYK. جدول التقويمبصورة أو بدون صورة لا يمكن للتقويم أن يكون بدون جدول الأيام، يمكن أن يكون لديك تقويم بدون صور، ولكن لا يمكن أن يكون لديك تقويم بدون الأيام. لذلك سنبدأ بالجزء الأكثر أهمية وهو إنشاء جدول الأيام. سنبدأ برسم مستطيل بواسطة أداة المستطيلات Rectangle ويمكنك طبعًا أن تختار مربعًا مثلًا بحسب التصميم ولتسهيل العمل حاليًا قمتُ بتلوينه. والآن اكتب حرفًا أو رقمًا بواسطة أداة النص Text tool داخل المستطيل ويجب أن يكون الأساس لجدول الأيام لذلك اختر نوعية الخط بعناية وكذلك اللون والحجم بما يتناسب مع المستطيل، أنا اخترت خط Adobe Arabic العريض بحجم 36 مع التوسيط (يمكن أن تختار خطًا آخر إن اخترت التصميم بلغة مختلفة وكذلك من الجميل جعل المحاذاة لليمين على سبيل المثال وهذا يتعلق بتصميمك الخاص). وعندما تختار موضع النص انتبه لمسألة اختلاف عرض النص ما بين 1 و 30 حتى تستمر في العمل بسلاسة وبدون مشاكل لاحقًا. يمكننا الآن أن نجعل المستطيل أبيض (إلا إذا كان لديك رؤية أخرى لتصميم مختلف فعندها يمكنك تلوينه كما تشاء) أو يمكنك جعل شفافًا حيث لن نحتاج لرؤيته بعد الآن ولكننا سنحتاج إلى المساحة التي يشغلُها لتصميم الجدول. حدد المستطيل والنص واجمعهما Group معًا. حدد هذه المجموعة وقم بنسخها عبر القائمة Edit > Clone > Create Tiled Clones إلى كم نسخةً سنحتاج؟ هذا سهل فلدينا 7 أيام في الأسبوع لذا سنحتاج إلى 7 أعمدة ويوجد في الشهر عادة 4 أسابيع مع بعض الأيام الإضافية لذا سنحتاج إلى 5 صفوف مع إضافة صف آخر لأسماء الأيام وبذلك نحتاج إلى 6 صفوف. من لوحة Tiled Clones قم بوضع عدد الأعمدة والصفوف واترك باقي القيم عند الصفر. أصبح لدينا جدول أساسي، نحتاج فقط لتعديل القيم. وبما أن Clones أدّت الغرض منها فلم نعد بحاجة إليها لذلك اذهب إلى القائمة: Edit > Clone > Unlink Clone استخدم أداة النص لتعديل القيم. الصف الأول هو لأسماء الأيام، يمكنك أن تختار مثلًا أن تكون بلغات أجنبية أو الأحرف الأولى لأسماء الأيام بالإنجليزية فإن اخترت ذلك لربما كان عليك أن تصمم المستطيل الأساسي الذي عملنا عليه في أول خطوة على شكل مربع، لكان ذلك أفضل. قد تختلف طريقة ترتيب الأيام من بلد إلى آخر فبعض الدول يكون الإثنين هو أول أيام الأسبوع ودول أخرى تبدأ الأحد وغير ذلك (أنا وضعت السبت أول الأيام كتصميم أولي ويمكنك أن ترتّب على طريقتك). أضف الألوان على الأعمدة التي تمثل عطلًا أسبوعية وذلك يختلف من بلد لآخر (معظم البلدان العربية تتخذ الجمعة والسبت عطلة أسبوعية) وضعها باللون الذي يناسب تصميمك، أنا جعلتها بالأحمر الداكن. كما يمكننا وضع الأيام المفردة بلون مختلف كدلالة على المناسبات الخاصة كاليوم الوطني أو أعياد الفطر والأضحى أو حتى لون مختلف لعيد ميلاد ابنك مثلًا. ضع كل شيء في مجموعة واحدة Group. استخدم أداة النص واكتب اسم الشهر فوق الجدول، باستطاعتك البقاء على ذات الخط أو تمييز الشهر بنوعية مختلفة من الخطوط وكذلك مسألة الألوان تتعلق بتصميمك الخاص. وتختلف أسماء الشهور بحسب اللغة والدولة وحتى في بلداننا العربية تختلف أسماء الشهور فلذلك وضعت اسمين مختلفين للشهر لعلها تشمل كل الدول العربية (باستطاعتك وضع أحدهما فقط بحسب البلد الذي تعيش فيه). حدد اسم الشهر وجدول الأيام معًا ثم اذهب إلى لوحة المحاذاة Align and Distribute وقم بمحاذاته إلى الوسط أفقيًّا مع التأكد من وضع النسبة إلى العنصر الأكبر Biggest object. لستَ مضطرًا للتقيد بهذه المحاذاة حيث يمكنك جعلها لليسار أو اليمين بحسب أسلوبك في التصميم. الآن احفظ هذا الملف حيث سيكون القالب الذي سنعتمده لإنشاء جميع الشهور 12 فيما بعد مع حفظ كل شهر في ملف منفرد. التعديل سهل فكل ما عليك القيام به هو تبديل اسم الشهر مع وضع رقم السنة (ميلادية أو هجرية مع مراعاة الأشهر الميلادية والهجرية) ومن ثم تعديل الأيام لن يكون صعبًا (يمكنك إيجاد الترتيب الصحيح من تقويم الحاسوب الموجود بجانب الساعة عادة). يوجد أيام غير مطلوبة في تقويم كل شهر في الصف الأول والأخير عادة حيث من الممكن أن يبدأ الشهر في منتصف الأسبوع وبذلك تصبح الأيام قبل تلك البداية غير مطلوبة والأمر ذاته ينطبق على نهاية الشهر والأرقام التي تليه لذلك سنقوم بحذفها أو تلوينها بالأبيض (إن لم يؤثر ذلك على تصميمك بحسب الخلفية التي قد تضعها) أو نجعلها شفافة. تصميم الصفحةسنصمم تقويم للطباعة لذلك يجب أن تأخذ مقاسات الصفحة أهمية كبيرة حيث يمكنك أن تراجع المطبعة أو مركز الطباعة وتستشيره عن أحجام الطباعة التي سينفذها لك، في حالتنا هذه اخترنا الحجم 220 × 100 مم. اذهب إلى خصائص المستند من القائمة File > Document Properties عدّل وحدة القياس إلى mm ثم أدخل القيم. يمكنك أن تتخذ وحدة القياس px (بكسل) في حال كان تصميمك رقميًّا فقط أي أنه ليس للطباعة. نعلم أن الطابعة لا يمكنها طباعة الحواف الرقيقة للصفحة لذلك سنحتاج إلى هوامش القطع الخاصة بالطباعة. برنامج إنكسكيب ليس مخصصًّا للطباعة لذلك لا تتوفر هذه الميزة فيه، سنقوم بهذه العملية يدويًّا، اذهب إلى القائمة Edit > Guides Around Page ارسم مستطيلًا بحجم الصفحة التي نصممها مع زيادة 2 مم لكل طرف من أطراف الصفحة وبذلك يصبح حجم المستطيل 224 × 104 (لا تنسَ أن تضع وحدة القياس على mm) ثم حاذِهِ إلى مركز الصفحة (استخدم لوحة المحاذاة لتوسيطه أفقيًّا وعموديًّا إلى الصفحة). ثم عد إلى خصائص المستند Document properties وانقر على Resize page to drawing وبذلك ستتحرك الأدلة 2 مم إلى داخل العمل. يمكنك حذف المستطيل الأخضر الآن (إلا إذا كنت تريد للتصميم خلفية ملونة أو حتى بصورة خلفية). إذًا أصبح لدينا التصميم الأولي الأساسي للتقويم. يمكنك أن تُظهر فَنَّك وإبداعاتك الآن بوضع خلفية ملونة بلون واحد أو بتدرج لوني أو حتى بوضع صورة جميلة ويمكنك أن تضيف صورة بداخل التصميم بغض النظر عن الخلفية التي اخترتها، كل هذا يعود إلى أسلوبك الخاص بالتصميم، أنا اخترت الأسلوب البسيط بدون أية خلفيات مع وضع صورة صغيرة داخل الصفحة إلى جانب جدول التقويم طبعًا. قم بإدراج الصورة وبما أننا نصمم صفحات كاملة ستكون جاهزة للطباعة فعلينا أن نجعل هذه الصورة embed مُتَضَمّنَة داخل الملف وليس link وصلة إليها حيث أن حجم الملف سيزيد بالتأكيد. اختر صورة بدقة عالية ويجب أن تكون أكبر من حجم الصفحة لتقوم بتصغيرها بما يتناسب مع التصميم العام وذلك حتى تظهر الصورة بدقة جيدة في الطباعة ولا تنسَ أن تضغط على Ctrl أثناء تصغير الصورة للمحافظة على النسبة بين الطول والعرض ونتجنب تشويه معالم الصورة أو بإمكانك النقر على زر القفل بين الطول والعرض في شريط الأدوات العلوي. سنضيف مجموعة من الأدلة الآن (الأفقية والعمودية) حيث ستسهل علينا توزيع العناصر بشكل منتظم ومتراصف وكذلك ستسهل عملية محاذاة العناصر. فلا يجب أن يكون جدول التقويم أعلى أو خارج مستوى الصورة مثلًا. وللقيام بذلك قم بالنقر على المسطرة والسحب لتسحب دليلًا وأفلته في المكان المناسب، ينطبق هذا الأمر على المسطرتين الأفقية والعمودية (العملية ذاتها موجودة في الفوتوشوب). ويجب علينا أن نراعي المسافات العلوية والسفلية ويمكننا الاستعانة بلوحة المحاذاة لتطبيق محاذاة أفضل مع الانتباه إلى وضع الأدلة والاستعانة بها لتسهيل تغيير حجم العناصر ووضعها في أماكنها. أدرج الآن ملف الشهر الذي صممته سابقًا مع الأخذ بالحسبان مسألة المحاذاة والأدلة، يمكنك تغيير حجم التقويم ليتناسب مع الموقع المطلوب، قد تضطر إلى استخدام المهارة اليدوية لوضع العناصر في أماكنها بشكل أجمل. رؤيتك الفنية هي ما ستعطي التصميم نمطًا معينًا خاصًا بك. يمكننا أن نصغّر حجم جدول التقويم ونضيف شهرين (الشهر السابق واللاحق) بشكل أصغر تحت الشهر الأساسي كنوع من التغيير والإضافة إلى التصميم. التصميم أصبح جاهزًا، قم بحفظ هذا الملف باسم الشهر الذي عملنا عليه ثم أبقِ على الأدلة واحذف العناصر فقط واستبدلها بالعناصر الجديدة لإنشاء ملف الشهر التالي وهكذا حتى يصبح لديك 12 ملف من أجل 12 شهر. لا يمكنك أخذ الملف بصيغة SVG إلى مركز الطباعة أو المطبعة ببساطة فهم غالبًا لن يقبلوا به ولعل بعضهم سيحاول تحويله أو فتحه بأحد البرامج مثل Illustrator أو Corel Draw ولكن الملف على الأغلب سيفقد شيئًا من عناصره أو تأثيراته لذلك سيتوجب علينا تصدير الملف بصيغة مختلفة. برنامج إنكسكيب يصدّر الملفات بصيغة PNG من قائمة File حيث ستفتح لوحة خاصة بذلك وعليك اختيار تصدير الصفحة كاملة والمهم أن تكون الدقة 300 DPI أو أكثر لتكون الطباعة جيدة. يمكن تحويل هذا الملف PNG إلى صيغ أخرى يتعامل معها العاملون في الطباعة بشكل أفضل مثل TIFF أو JPEG. أو يمكن أن تحفظ الملف بصيغة PDF من قائمة File > Save As وعند اختيار هذه الصيغة تأكد من تفعيل خيّار Convert text to paths حتى لا تختلف أشكال النصوص عند الطباعة. وبهذا ننتهي من تصميم التقويم وهذا مثال عن التقويم الذي قمنا بتصميمه. ترجمة -وبتصرّف- للمقال: Inkscape calendar layout لصاحبه Nicu Buculei.

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

غالباً ما يعتقد البعض أنّ تصميم الشعارات عمل سهل وسريع، فما هو إلّا تصميم صغير تضع بجانبه كلمة أو كلمتين ليكتمل العمل. في الواقع الأمر أكبر من هذا بكثير، وهذا يجعل عمليّة تصميم الشعار أو الهويّة مهمّة لا تخلو من التحدّيات. سنلقي نظرة على بعض قواعد تصميم الشعارات، وسنطّلع على عدد من الإرشادات التي يجب الالتزام بها لتصميم شعارات احترافيّة، وسنشاهد معًا التّطبيق العمليّ لهذه الإرشادات في تصميم شعار يمكن استخدامه في أرض الواقع. كان من السّهل وضع قائمة بالقواعد الّتي يجب اتّباعها في تصميم الشّعار، ولكن توخّيًا للفائدة اخترت أن أبيّن ذلك من خلال تصميم شعار لشركة خياليّة لاستضافة المواقع تحت مسمّى Media Stack، وتعاملت مع المشروع على أنّه حقيقيّ (لا ينقصه إلا التّواصل مع العميل). لن يكون المقال بصورة درس متعدّد الخطوات، وإنّما سأوضّح بعض الأفكار التي تدور في ذهني وذلك من خلال عرض الطريقة التي ترجمت بها شخصيًّا خلاصة كل قاعدة في التصميم النهائي للشعار. اطرح الأسئلة لتكون نبذة جيدة عن التصميمأولى الخطوات التي يجب القيام بها عند تسلمك لمشروع تصميم شعار جديد، هي جمع المعلومات اللازمة عن الشركة، مثل ماهية عملها، الجمهور الذي تستهدفه، أهدافها والصورة التي سيعكسها الشعار عنها. يعتمد بعض المصممين في ذلك على استمارة إلكترونية يطرح من خلالها مجموعة من الأسئلة، في حين يتصل البعض الآخر بالعميل هاتفيًّا أو يتواصل معه عن طريق البريد الإلكتروني. مهما كانت الطّريقة التي ستتّبعها فعليك جمع أكبر كمية من المعلومات، إذ كلما زادت المعلومات المتوفّرة لديك كانت عملية تصميم شعار ملائم للزبون أكثر سهولة ويسرًا، والأهم من ذلك أنّك ستصمم شعاراً يمثل الشركة بالصورة الصحيحة واللائقة. نظراً لكون المشروع خياليًّا فإنّ جميع المعلومات عن شركة Media Stack هي من نسج الخيال، ولكني توخيت جعل المشروع نموذجيًّا لشركة صغيرة إلى متوسّطة. تلخص النبذة هوية شركة Media Stack وطبيعة عملها والصورة التي ترغب في عكسها إلى زبائنها. يمكن الاستفادة من كل هذه المعلومات في تكوين شعار فريد يمثل الشركة بصورة لائقة. يبدأ التصميم اليومي بمسودةيعد استخدام المسودة أمرا مهما لإطلاق الأفكار المتعددة وإبرازها على الورق، وبلا شك فقد تولدت لديك بعض الأفكار الأولية بعد قراءتك للنبذة، وهذه هي فرصتك لتسجيل هذه الأفكار إضافة إلى الكلمات المفتاحية، الخربشات، المخططات، والأفكار الإبداعية. بدأت ببعض الخربشات التي استلهمتها من بعض الكلمات المفتاحية المتعلقة باستضافة المواقع، وفكرة أكداس الخواديم. برزت بعدها بعض الأفكار حول كيفية تمثيل كدس الخواديم بصورة بصرية. يمكن الاستفادة من شكل المستطيل الرفيع للخادوم، كذلك يمكن استخدام الحروف الأولى من اسم الشركة وهي M و S، أو يمكن استخدام بعض الأيقونات التي ترمز إلى الشّكات. كون فكرةيتمحور تصميم الشّعار حول تكوين الفكرة التي ستصف الشركة وقيمها بطريقة فنية، ولك الخَيار في أن تنهج في ذلك الأسلوب الواقعي أو التجريدي، إذ ليس من الضروري أن تصف الشعارات دائمًا وبصورة دقيقة ما تقوم به الشركة، وإنما يمكن التركيز على قيمة أو رسالة معينة. هنا ستظهر فائدة البحث الأولي الذي أجريته عن عمل الشركة حيث سيساعدك هذا على تكوين صورة فريدة وذات صلة بعمل الشركة. تمخضت المسودات عن فكرة رئيسة لشعار Media Stack وهي تمثيل كدس الخواديم على هيئة مجموعة من الصناديق، وبدلًا من رسم هذه الصناديق بطريقة اعتيادية قد تبدو مملة نوعًا ما، قررت إدخال بعض الإثارة إلى الرسم وجعل الفكرة أكثر تجردًا، وذلك بإدخال البعد الثالث وتفريغ الصناديق، الأمر الذي نقل الشّعار بعيدًا عن الشكل المسطّح للصّناديق، وساهم في تطوير علامة بصرية غير اعتيادية. يمكن مشاهدة الشّعار بطريقتين، الأولى باعتباره شكلًا متناظرًا، ولكن إن أمعنت النظر في الشعار فإنك ستشاهد الطبقات الثلاثة مكدسة فوق بعضها البعض. يكون الشكل كذلك ما يشبه السهم المتجه إلى الأعلى، ويمكن ترجمة ذلك بالنمو والتقدم نحو الأمام وسيمنح ذلك المزيد من القوّة إلى الشعار وبخاصة عند تقديم العروض إلى الزبائن. صمم الشعار على هيئة Vectorالآن، وبعد اختيار فكرة التصميم، ستبدأ فعلًا ببناء الشّعار على الحاسوب، وتصميم الشّعار بصيغة Vector من أهم القواعد التصميمية التي يجب عليك اتّباعها. تسمح التصاميم المُوجهة vector format بتغيير مقاسات التصميم بحرية دون المساس بجودته، بعكس الصور النقطية المكونة من البكسلات والتي يؤدي تغيير حجمها إلى تشويهها وفقدان وضوحها. يمكن استخدام الشّعار المصمّم بصيغة Vector لجميع الأغراض، سواء أوضعته بحجم صغير على وصل أو فاتورة، أم وضعته بحجم كبير في إعلان ضخم على جانب إحدى المباني الكبيرة. يعد برنامج Adobe Illustrator الأكثر شهرة في هذا المجال، أما صيغ الملفات الأكثر شهرة هي Ai، EPS، و PDF. قد لا يمتلك الزبون البرامج اللازمة للتعامل مع هذه الملفات، لذا يجب تزويده بالشّعار وبأحجام مختلفة على هيئة صور بصيغة JPEG أو PNG للاستخدام اليومي، وتزويد ملف بإحدى صيغ المتجهات للاستخدام الاحترافيّ. صمّمت شعار Media Stack بواسطة برنامج Adobe Illustrator، وهو برنامجي المفضل في مجال العمل على المتجهات. بدأت بمستطيل بسيط تلاعبت به بواسطة أداة التحديد المباشر Direct Selection Tool لإضفاء المظهر المائل عليه، وعن طريق مضاعفة المستطيل المائل وقلبه حصلت على الشكل النهائي للشعار. تمّ ضبط مواضع كل الأشكال بصورة دقيقة جدّاً، وذلك عن طريق تكبير العرض إلى الدّرجة القصوى واختيار نمط الحدود الخارجيّة (Outline mode (Ctrl+Y, CMD. تأكد أن الشعار متوازنكما هو الحال مع أي تصميم جرافيكي، يجب عليك أن تسعى إلى التوازن في التصميم وذلك بواسطة استخدام البنية المناسبة، إذ يجب أن تكون الشعارات المؤلفة من عنصرين أو أكثر متناغمة ومتناسقة، وأفضل الطرق التي يمكن اعتمادها هي الاستفادة من بعض الرّياضيات البسيطة، أو ترتيب الأشياء على خط واحد بكل بساطة. كان بالإمكان تحجيم عناصر الشّعار ووضعها بجانب بعضها البعض بصورة عشوائية، ولكن توخيا للتناغم والتناسق رسمت بعض الدلائل التي أحاطت بحواف وزوايا كل عنصر رئيسي في التّصميم، فتكونت لدي شبكة يمكن استخدامها في ضبط موضع النّص، وقد استفدت من ذلك في التأكد من أن خطوط الشّعار تنساب بصورة جيّدة نحو النّص. يعادل ارتفاع النّص ثلث ارتفاع الشّكل، والمسافة الفاصلة بين النّص والشّعار مساوية للمسافة بين نقطتين ضمن المساحة الداخليّة للشّعار. هل تستخدم المؤثرات في الشعار؟يحب البعض الشّعارات الشفافة أو ذات الألوان المتدرّجة، ويفضل البعض الآخر مبدأ العودة إلى الأساسيات ولا يرغب بوجود تلك الأمور البراقة في الشعار. أعتقد - شخصيًّا - أنه غالبا ما يمكن للشّعار أن يستفيد من هذه المؤثرات إذا كانت الطريقة التي سيستخدم بها تسمح بذلك. فإذا كان الهدف من الشّعار عرضه على الشّاشات على سبيل المثال، فإن وجود تدرج لوني هنا أو هناك قد يكون مفيدًا في إضافة بعض من العمق إلى التصميم ونقله إلى مستوى أعلى من الوضوح والبروز. وحتى لو كان الهدف من الشعار استخدامه في مستندات مطبوعة، فإن الطّبعات المتوفرة في يومنا هذا قادرة على إعادة إنتاج جميع التأثيرات التي تظهر على الشاشات بواسطة الحبر. ولكن يجدر بك التأكد من أن الشّعار سيبدو واضحاً بدون تلك المؤثّرات، أو عند تلوينه بلون واحد فقط، وذلك لضمان تعدد الاستخدامات. قررت إضافة تدرج لوني إضافي إلى شعار Media Stack وذلك لإبراز تأثير البُعد الثالث عليه، وهذا يجعل فكرة كدس العناصر فوق بعضها البعض أكثر وضوحًا. ستكون النّسخة ذات الألوان الكاملة النّسخة الرئيسة التي ستعرض على الشّاشة أو ستستخدم على أيّ مطبوعة ذات ألوان كاملة، وهناك نسخة أخرى بألوان مسطّحة خالية من التّأثيرات وهي مثاليّة للأحجام الصغيرة، أو للطّباعة بألوان محدّدة. الشعار الجيد يبدو جيدا في لون واحدتُعدّ صفة تعدد الاستخدام خير دليل على جودة الشّعار، فمن المفترض أن يتكيّف الشّعار مع جميع الحالات، وإحدى تلك الحالات هي استخدام الشّعار بلون واحد فقط. إذا كان الشّعار الذي تصمّمه معتمدًا بشكل كبير على الألوان والتّأثيرات التي تكون مظهره، فإنه سيكون شعارًا محدودًا في أرض الواقع. فكر في الكيفية التي سيظهر بها التصميم إذا ما استُخدِم كمُلصَق سيتم قصّه من البلاستيك، أو الطريقة التي سيُنقش بها على مُنتج ما. يتميّز الشّعار أحاديّ اللون بإمكانية عكس ذلك اللون ليتلائم مع جميع الخلفيّات، إضافة إلى إمكانيّة استخدامه فوتوغرافيًّا. صمّمت نسخة ذات لون واحد من شعار Media Stack إضافة إلى النسخة ذات الألوان الكاملة والنسخة ذات الألوان المسطّحة، وباستخدام بعض الخطوط الإضافية تمكنت من المحافظة على التأثير الذي أنتجته الألوان، أي أنّ الشعار قد حافظ على هيئته البصرية المتمثلة بالعناصر الثلاثة المنفصلة، على الرّغم من استخدام لون واحد في تكوينه. استخدم سيكولوجية الألوان في تصميمكيعد اللّون واحدًا من أهم مكونات عمليّة تصميم الشعارات والعلامات التجارية، إذ يتكون لدى الناس شعور أو فكرة معينة حول التصميم بمجرد النظر إلى ألوانه، لذا فمن الضروري أن يكون اختيارك لألوان التصميم اختيارًا حكيمًا. عند تحديد الألوان التي ستوظفها في تصميم الشّعار، فكر في الألوان التي ترتبط بالرسالة والقيمة التي تحاول إبرازها بواسطة التصميم. بعض الألوان ستساعد على تقوية هذه الرّسالة، وقد تعمل مجموعة معيّنة من الألوان بصورة أفضل من مجموعة أخرى، وهنا يأتي دور معرفتك بنظريّة الألوان. قد يبدو مزيجًا مؤلفا من ألوان معينة براقا وصارخا، وقد يبدو البعض الآخر باهتًا وداكنًا، لذا قد تكون مجموعة من الألوان ملائمة لتصميمك بشكل كبير، وقد تؤدّي مجموعة أخرى إلى إفساده. اخترت اللون الأزرق لشعار Media Stack، وذلك لأنه وبالإضافة إلى كونه لونًا جميلًا، فإنه يرمز إلى الثقة والتفاني، ما يجعله اللون الأكثر شيوعًا في مجال الأعمال. إذا لم يُطلب منك إعادة تصميم الشّعار من نقطة الصّفر، فمن الأفضل أن لا تغير اللون المستخدم في الشعار القديم، إذ أنه عنصر مهم في التعرف على الهويّة التجاريّة. تخيل فقط أن تغير شركة كوكاكولا لون العلب إلى الأزرق. هل تحتاج إلى إنشاء دليل للهوية التجارية؟يمكن تشبيه دليل الهويّة التجارية بدليل الاستخدام لشعارك الذي انتهيت من تصميمه أخيرًا، فهو يُرشد الزّبون إلى الطريقة المثلى في استخدام الشّعار. على سبيل المثال، قد يتضمن الدليل تفاصيل حول الحد الأدنى لأبعاد الشعار والتي في حال تجاوزها يصبح الشعار فاقدًا للوضوح، كذلك يمكن إرشاد الزبون إلى النُّسخ التي يجب استخدامها على الخلفيات الداكنة، ومتى يكون استخدام الشّعار ذي اللون الواحد مفضلا. كذلك يجب أن يتضمن الدليل قسمًا خاصا توضح فيه أنه لا يجوز ضغط، مط أو تغيير ألوان الشعار، وقد يتضمن الدليل كذلك تفاصيل عن الألوان المستخدمة في الشعار بصيغ Hex, RGB, CMYK و Pantone والخطوط المستخدمة في التصميم. بعض المعلومات الضرورية التي ستساعد على استخدام شعار Media Stack بصورة صحيحة في جميع وثائق الشّركة، وتتضمن هذه المعلومات عرضا لمجموعات الألوان الزرقاء والرمادية المستخدمة، وخط News Gothic المستخدم في الشّعار. من المفيد كذلك حماية التّصميم من خلال توضيح الطرق التي يمكن أن يستخدم بها والطرق التي يجب تجنّبها. قد تبدو هذه الأمثلة واضحة لنا نحن معاشر المصمّمين، ولكننا نعرف ما قد يحصل لأبنائنا عندما يضع الزّبائن أيديهم عليهم. ترجمة -وبتصرّف- للمقال A Guide to Creating Professional Quality Logo Designs لصاحبه Chris Spooner. حقوق الصورة البارزة: Designed by Freepik.

تصميم واجهة المستخدم من أهم المهن المطلوبة حاليًا في سوق العمل، ولكن ما هي واجهة المستخدم؟ واجهة المستخدم هي ما نراه ونتفاعل معه على شاشات الحواسيب والأجهزة المحمولة، مثل موقع الإنترنت وتطبيقات الهاتف المحمول وتطبيقات الويب. لذلك فإن الشخص الذي يختار مواقع العناصر على الشاشة وتخطيط مختلف الصفحات والشاشات ومن يخطط أنماط ألوانها ورسوماتها، هو مصمم الواجهات، ويرتبط عمله مباشرة مع مطوّر الويب والتطبيقات كما يرتبط من جهة أخرى مع مصمم تجربة المستخدم. كيف يعمل مصمم واجهة المستخدم؟ من الصعب جدًّا على مصمم الرسوميات العمل على تصميم الواجهات منفردًا، لأن عمله مرتبط كليًا بالتنسيق مع مطوّر التطبيقات والويب، لذلك فإن الغالبية العظمى من مصممي الواجهات يعملون في فرق تضم مصمم رسوميات ومطوّر تطبيقات ومدير فريق الذي يجب أن يكون لديه إلمام بالتصميم والتطوير معًا، وقد يتضمن الفريق أفرادًا أكثر إن لزم الأمر مثل كاتب المحتوى وغيره. دورة تطوير واجهات المستخدم ابدأ عملك الحر بتطوير واجهات المواقع والمتاجر الإلكترونية فور انتهائك من الدورة اشترك الآن مراحل تصميم واجهة المستخدم يمر مشروع تصميم الواجهة بعدة مراحل وهي: يتلقى المدير طلبًا لتنفيذ مشروع واجهة تطبيق أو ويب ويحصل على كافة المعطيات والمعلومات اللازمة لبدء المشروع. يجتمع المدير بأعضاء الفريق ويطلعهم على المعطيات التي بين يديه ثم يوزع المهام على المصمم والمطور وعادة ما يبدأ المصممم العمل. يعمل المصمم على إنشاء رسومات نماذج أولية باستخدام القلم والورقة إلى أن يصل إلى نماذج مرضية لرؤيته الخاصة بالمشروع. ينقل المصمم هذه النماذج من الأوراق إلى الحاسوب ليرسم هذه النماذج بطريقة احترافية ومنسقة بأسلوب الإطار الشبكي Wireframe ثم يسلم هذه النماذج إلى المدير. ملاحظة: إن كان فريق العمل يعمل معًا في نفس المكتب فإنه يسلم هذه المخططات مباشرة، أو عن طريق إرسالها بالبريد الإلكتروني أو أية وسيلة اتصال أخرى، أو قد يلجأ الفريق للعمل معًا على أحد أدوات وتطبيقات سطح المكتب أو تطبيقات الويب المخصّصة لعمل الفرق في هذا المجال، حيث يتشارك الجميع الأفكار والتصاميم والنماذج ويعلّقون عليها ويتباحثون بأمرها، سنذكر بعضًا من هذه الأدوات والتطبيقات في الجزء الأخير من المقال. يتبادل المدير والمصمم الآراء والأفكار وتُنفّذ التعديلات ثم يرسل المدير النماذج إلى العميل ليبدي رأيه فيها ويطلب تعديلاته. يبدأ المصمم العمل على استخدام العناصر الرسومية والصور والألوان لإنشاء تصاميم رسومية أولية ثم يشاركها مع المدير الذي يرسلها بدوره للعميل لإبداء الرأي وطلب التعديلات. يعمل المصمم على التعديلات المطلوبة ويسلم التصاميم النهائية للمدير الذي يسلمها بدوره للمطور ليعمل على تطوير التطبيق أو الموقع ومن ثم يسلم المشروع إلى العميل. قواعد تصميم واجهة المستخدم لتصميم واجهات جيدة ومتميزة واحترافية نحتاج إلى اتباع قواعد معينة تضمن تألق وتميز التصميم كما تضمن سهولة استخدامه وقبوله من قبل المستخدمين. التناسق يجب استخدام نفس أنماط التصميم ونفس تسلسل الإجراءات للحالات المتماثلة، يتضمن ذلك الاستخدام الصحيح للألوان والطباعة والمصطلحات في الشاشات والأوامر والقوائم الفورية خلال رحلة المستخدم، حيث تسمح الواجهة المتسقة للمستخدمين بإكمال مهامهم وأهدافهم بسهولة أكبر. يجب أن يكون المستخدم مرتاحًا في استخدامه للواجهة ولا يشعر بالارتباك، مثلًا لا يجب وضع زر القائمة المنبثقة أسفل الواجهة بينما اعتاد المستخدمون على وجودها أعلى الواجهة، وكذلك لايجب أن يوضع زر شراء المنتج أعلى صفحة المنتج وفوق صورته والمعلومات حوله بينما اعتاد المستخدمون وجود هذا الزر أسفل هذه الواجهة، وهكذا. كما يُفضّل على الدوام استخدام الأشكال المألوفة والأزرار المألوفة أكثر من الأشكال الجديدة التي قد تشعر المستخدمين بالغرابة وتجعلهم يفكرون مرتين قبل استخدام العنصر أو النقر على الزر ، فهذا التردد ليس جيدًا بمقاييس تجربة المستخدم والتصميم السليم والصحيح لواجهة المستخدم. البساطة في جميع القواعد الخاصة بتصميم أي شيء تجد مبدأ البساطة دائمًا، لأن التصميم البسيط مريح أكثر للنظر ويساعد على إيصال الرسالة بسلاسة ووضوح وسهولة دون عناء وهو الهدف من التصميم، فلا أحد يحب الواجهات المزدحمة وغير المنتظمة التي تسبب الإرباك عند محاولة التعامل معها لعدم وضوح الرسالة المفروض إيصالها أو الهدف من التطبيق أو الموقع. فإضافة المزيد من العناصر المختلفة في التصميم سيقلل التركيز على العناصر المهمة والتي يجب أن يركّز عليها المصمم. لذلك يجب التخفيف من ازدحام العناصر وتأمين تصميم بسيط يتضمن أهم العناصر فقط والابتعاد عن العناصر الأقل أهمية والتي يمكن إبرازها في واجهات أخرى يمكن التنقل إليها من الواجهة الرئيسية. مثال: أهم ما يركز عليه موقعا ياهو وجوجل هو محرك البحث وعملية البحث، وبفضل التصميم البسيط والمختصر لجوجل فإن التركيز منصب على محرك البحث فحسب، بينما يسبب ازدحام العناصر المختلفة في واجهة ياهو تشتيت الانتباه عن العنصر الرئيسي الأهم وهو خانة البحث. تناسق الخطوط من المهم التمييز بين أنواع الخطوط الواجب استخدامها عند تصميم واجهات المستخدم، حيث أن هناك خطوطًا يمكن عرضها بوضوح ضمن واجهات الويب لسطح المكتب ولكنها صعبة القراءة وقليلة الوضوح عند استخدامها في الأحجام الصغيرة ضمن الشاشات الصغيرة للأجهزة المحمولة. لذلك يجب الانتباه واستخدام خطوط ثخينة نسبيًا في الواجهات المصممة للشاشات الكبيرة والخطوط النحيفة نسبيًا عند التصميم للشاشات الصغيرة. من أهم القواعد المتبعة في هذا السياق تجنب استخدام أكثر من نوعين من الخطوط ضمن أي واجهة لضمان تناسق وأناقة التصميم. مراعاة التصميم المتجاوب تساعد بعض برامج تصميم الواجهات على إنشاء تصاميم متجاوبة تتمتع بقابلية تغيير حجم العناصر والأجزاء الأساسية بحسب حجم الشاشة المعروض عليها التصميم، مثل حجم الشعار والقوائم والفقرات النصية وغيرها، بينما لا تتمتع برامج أخرى بهذه الميزة مثل برنامج الفوتوشوب والإليستريتور، لذلك يجب أن يخصص المصمم إما عناصر بأحجام متوسطة تراعي كافة الأحجام المحتملة أو يجب عليه أن ينشئ عدة نسخ من العناصر بأحجام مختلفة ليستخدمها المطور في برمجة الواجهة حتى تكون متجاوبة وقابلة للتكبير أو التصغير بحسب حجم شاشة العرض. التباين كثيرًا ما نرى واجهات لمواقع أو لتطبيقات لا تراعي مبدأ التباين على الاطلاق بحيث تكون الألوان بين العناصر المختلفة ولاسيما بين العناصر والخطوط ذات تباين متدني بحيث يكون من الصعب تمييز العناصر أو قراءة النصوص، وعلى العكس أيضًا أحيانا يكون التباين مبالغًا فيه ما يجعل النظر ومتابعة العناصر أو القراءة مزعجة للعين وغير مريحة، لذلك يجب أن يكون التباين متوسطًا ومدروسًا حتى يحقق تجربة مستخدم مريحة وجيدة. أحد أبرز أساليب تطبيق مبدأ التباين هو تصميم واجهة بلون واحد مع التدرجات القريبة وبالأخص اللون الرمادي وتدرجاته، ومع استخدام لون حيوي مميز للعنصر أو العناصر الأهم لتأمين بروزها مع تحقيق جمالية وأناقة في التصميم. الهرمية هو من المبادئ المهمة في التصميم عامة وكذلك تصميم الواجهات خاصة، نستطيع من خلاله توجيه عين المستخدم واهتمامه بطريقة تدريجية في الاتجاه الذي نريد، ويكون تطبيق هذا المبدأ عبر تعزيز خصائص مميزة إضافية تُبرز العنصر الأهم في الواجهة مع تخفيف نسبة التعزيز للعنصر التالي في الأهمية وهكذا، وبذلك يعلم تمامًا المستخدم كيفية التوجّه ضمن الواجهة. المحاذاة يجب تطبيق هذا المبدأ على جميع محاور وأطراف التصميم، وعلى عكس تصاميم أخرى حيث يطبق هذا المبدأ على محور واحد ويكون ذلك كافيًا، إلا أن ذلك غير كاف في تصميم الواجهات نظرًا لأن هذه الواجهات عادة ما تكون مكتظة بالعناصر بالموازنة مع تصاميم فنية أخرى، ما يستوجب تطبيق المحاذاة على مختلف المحاور والأطراف ليكون المنظر العام للتصميم متوازنًا ومتناسقًا. انظر للشكل التوضيحي السابق وستلاحظ مبدأ المحاذاة بكل وضوح. التقارب وهو أحد مبادئ التصميم العامة، حيث أن تطبيقه يحسّن تجربة المستخدم لأن تناثر العناصر ضمن الواجهة وتباعدها يؤدي لتجربة مزعجة للمستخدمين وغير فعّالة لذلك يجب تنظيم العناصر بقرب بعضها وبتسلسل مرتب حتى نؤمن تجربة سلسلة ومريحة للمستخدمين. الوضوح ويقصد هنا تأمين الوضوح في الخيارات والقرارات والمتطلبات التي يجب أن ينفذها المستخدم، فعلى سبيل المثال عندما تتواجد في صفحة التسجيل حقول إدخال عدة ويتطلب كل حقل نوعية إدخال مختلفة، يجب أن يكون واضحًا ومفهومًا للمستخدم ما يجب عليه إدخاله ضمن هذه الحقول وما هي الأخطاء التي ارتكبها أثناء عملية الإدخال حتى يتداركها ويصححها بطريقة سلسلة ومفهومة وواضحة. الصورة بواسطة Antonin Kus من موقع dribbble المساحة البيضاء حافظ على المساحات البيضاء قدر الإمكان وأكثر منها دون تردد، لأنها أثبتت فعاليتها في اجتذاب المستخدمين فهي تسبب الشعور بالراحة والرقي والأناقة وبها تتحقق مبادئ التناسق والبساطة بسهولة، لذلك تجنب استخدام المربعات والمستطيلات والخطوط التي تفصل بين العناصر قدر الإمكان واسمح للمساحات البيضاء بالسيطرة على مساحة التصميم العامة. مصدر الصورة أدوات تصميم واجهة المستخدم تقدم بعض هذه الأدوات والبرامج إمكانات متكاملة في تصميم الواجهات وبعضها يسمح بمشاركتها مباشرة مع باقي أعضاء الفريق لمناقشتها وتحديثها مباشرة، بينما البعض الآخر تقليدي للغاية حيث يجب أن تصمم الواجهات يدويًا من البداية ومن ثم إرسال النماذج إلى باقي أعضاء الفريق، وفي أحيان كثيرة يحتاج المصمم إلى استخدام أكثر من برنامج وتطبيق ومنصة لإتمام المهمة على أكمل وجه. أدوبي فوتوشوب أشهر برنامج للتصميم ومعالجة الصور وأكثرها شيوعًا، يمكن استخدامه لتصميم واجهات مواقع الويب أو حتى التطبيقات حيث يحتوي على أدوات الشرائح الخاصة بتقسيم وتقطيع التصميم إلى شرائح بحسب العناصر المرسومة، ومن ثم تصدّر هذه الشرائح إلى ملفات صور مستقلة لكل عنصر بتنسيق PNG لضمان خاصية الشفافية في حال تواجدها ضمن الشريحة المصدّرة، ليتمكن المطور من استخدام هذه العناصر معًا وتركيبها لإنشاء الواجهة أو التطبيق. ويمكن استخدامه لمعالجة الصور المستخدمة في التصميم أو لإنشاء عناصر أخرى كالأزرار أو الخلفيات أو أشكال القوائم وغيرها. أدوبي إليستريتور بسبب تخصصه في إنشاء الرسومات الشعاعية، فإنه البرنامج الأقوى والأنسب لإنشاء عناصر مميزة شعاعية متجاوبة التصميم لكل أجزاء وأنواع التصاميم مثل القوائم والأزرار والنماذج والرسوميات والأيقونات وغيرها. كما يمكن استخدامه لإنشاء تصاميم النماذج الأولية للمشاريع بتقنية الإطار الشبكي (Wireframe)، حيث تساعد أدواته القوية على إنشاء هذه التصاميم بسهولة وسرعة. Sketch سكتش برنامج مميز ومتخصص في إنشاء وتصميم الواجهات عالية الدقة بكل أنواعها ويعد من أقوى البرامج في هذا المجال، حيث يتضمن قوالب جاهزة للمساعدة في إنشاء هذه التصاميم، كما يتضمن إعدادات مخصصة جاهزة بحسب قياسات مختلف الأجهزة لتصميم التطبيقات والويب. لعل أبرز عيوبه هو أنه برنامج مخصص للعمل على نظام واحد فقط وهو ماكنتوش العامل على حواسيب آبل بينما لا تتوفر منه نسخ تعمل على ويندوز أو لينكس. Adobe X D يوفر أدوبي إكس دي أفضل بيئة للمشاريع الرقمية ضمن مجموعة Adobe Creative Cloud لأدوات تصميم الواجهات. لا تشبه واجهة هذا البرنامج واجهات بقية برامج أدوبي مثل الفوتوشوب والإليستريتور وغيرها، إلا أنك ستعتاد العمل عليه بسرعة لسهولة استخدامه ووفرة أدواته الخاصة بهذا النوع من التصاميم. Figma تمكنك فيجما من إنشاء واجهات وتصميمها بسرعة. حيث تفخر منصة Figma بكونها أداة تصميم تعاونية حيث يمكن لعدة مستخدمين العمل في وقت واحد على المشروع نفسه وهذا فعّال للغاية عندما يكون لديك العديد من أصحاب العلاقة في المشروع ذاته يشاركون في تشكيل النتيجة مثل المصممين والمطورين والمدراء، ولذلك هي أداة مثالية عندما تعمل على مشروع واحد بالاشتراك مع مصمم ومطور وكاتب محتوى في نفس الوقت. Balsamiq بالساميق أداة مميزة وقوية إنشاء نماذج الإطار الشبكي Wireframe حيث يمكنك تطوير البنية والتخطيطات لمشاريعك بسهولة، وتعمل عناصر السحب والإفلات على تسهيل الاستخدام ويمكنك ربط الأزرار بصفحات أخرى. هذا يعني أنه يمكنك البدء بسرعة في تخطيط واجهاتك ومن ثم مشاركتها مع فريقك أو عملائك. Zeplin مع أن زيبلن أداة جيدة لإنتاج النماذج الأولية، إلا أنه يناسب إلى حد كبير مرحلة ما بعد التصميم وما قبل التطوير جنبًا إلى جنب مع النماذج الأولية. يمكّنك تسليم التصميم والنماذج الأولية للمطورين والتأكد من تنفيذ أفكارك بطريقة جيدة. وتستطيع مشاركة ملفات سكتش Sketch و فوتوشوب Photoshop وملفات X D و فيجما Figma إلى زيبلن لاستحداث بيئة للمطورين والمصممين للعمل على المشروع معًا ومن ثم تسليمه دون الحاجة إلى إنشاء الإرشادات واستعمال وسائل التواصل المختلفة. InVision إن فيجين هو أداة تساعد في إنشاء واجهات تفاعلية جميلة مع مجموعة كبيرة من الميزات حيث يمكنك إنشاء حركات وانتقالات مخصصة من عدد من الإيماءات والتفاعلات. وبفضل هذه الأداة يمكنك التوقف عن التفكير في إنشاء العديد من النماذج لأجهزة متعددة لأنه يمكن تحقيق التصميم سريع الاستجابة داخل لوح رسم واحد. خاتمة على الرغم من أنه يجب عليك دائمًا اتخاذ قرارات قائمة على رؤيتك وخبرتك وذوقك الفني، إلا أن اتباع مجموعة من القواعد والإرشادات سيوجهك في الاتجاه الصحيح ويسمح لك باكتشاف مشاكل الاستخدام الرئيسية في وقت مبكر من عملية التصميم. تنطبق هذه القواعد على معظم واجهات المستخدم، كما تكفي مجموعة الأدوات التي ذكرناها لإنشاء تصاميم متكاملة على الرغم من وجود المزيد من التطبيقات والأدوات خارج هذه القائمة إلا أن ما ذكرناه في هذا المقال أكثر من كافٍ. والأهم هو التعاون بين أعضاء الفريق واتباع خطوات العمل لإتمام عملية التصميم وتسليم المشروع إلى العميل.

يمكن أنْ يكون تطوير موقع ويب بدون الأدوات المناسبة مدعاة للكثير من الإحباط. ستجد أحيانًا أنّك تعمل على برنامج متقدّم جدًّا بالنسبة لمستواك، أو يمكن أن تكون بحاجة للانتقال إلى برنامج موجّه للمحترفين. يتعلّق الأمر بمستوى قدراتك بوصفك مصمّم مواقع، إلّا أنّ برامج التصميم للويب هي - مجملًا - نفسُها سواءٌ كنت مبتدئًا أو مستخدمًا متقدّمًا. الفرقُ الوحيد هو أنّك قد لا تستخدم جميع الميزات المتوفّرة في أداة معيّنة إنْ كنت مستخدمًا مبتدئًا أو بخبرة متوسّطة. تحتاج لاستكشاف ما يستخدمه المحترفون ومتابعة دورات وقراءة مقالات لمعرفة الطريقة التي تجعل تصميماتك أفضل ما يمكن أن تصل إليه. لذا، سنلخّص في هذا المقال بعضًا من الأدوات وبرامج التصميم التي تحتاجها أكثر من غيرها، ونشرح ما الذي يُستخدَم فيه كلّ واحد منها خلال عمليّة التطوير. ووردبريس ووردبريس هو نظام إدارة محتوى وتدوين بلغت شهرته ومرونته حدًّا جعل ثُلث مواقع الويب الموجودة تستخدمه. تمكن استضافة ووردبريس ذاتيًّا (وبالتالي يكون لديك التحكّم الكامل في موقعك). علاوة على ذلك، فإنّ المنحى التعلّمي لووردبريس سهلٌ مقارنة بمنصّات مثل Weebly وShopify. يتوفّر برنامج ووردبريس مجانًا، لكنْ ستحتاج للدفع مقابل أمور من قبيل اسم النطاق (Domain name)، الاستضافة (Hosting) والقوالب. بالمختصر، تهدف هذه المنصّة الرائعة لبناء مواقع الويب إلى العمل في الخلفيّة وإعطائك فرصة إنشاء صفحات، وتدوينات، وقوالب وغيرها بسهولة. فوتوشوب يشتهر فوتوشوب بتحرير الصوّر والتعديل عليها، إلّا أنّ هذا المحرّر الضخم يصلُح لأي نوع من مشاريع التصميم. يُستخدَم فوتوشوب لإنشاء شعارات لمواقع الويب أو لتصميم نماذج أوليّة لها. ليس غريبًا أن تجد من يستخدم فوتوشوب لإنشاء مخطّط تصميم كامل لموقع ويب، اعتمادًا على نظام الطبقات (Layers) والتصدير الذي يتوفّر عليه فوتوشوب ويوفّر الكثير من الميزات. Sketch يُنظَر إلى برنامج Sketch غالبًا على أساس أنّه إصدار مُبسَّط من فوتوشوب. يعود السبب في ذلك إلى أنّ Sketch يركّز كثيرًا على التصميم للويب، في حين يمكن استخدام فوتوشوب لأي مشروع تصميم. الميزة الأساسيّة لبرنامج Sketch هي آليّة عمله مع التصاميم المتجهيّة (Vectors)، ممّا يجعله رائعًا لتوسعة التصاميم أو تقليصها بدون فقد أي بيانات أثناء العمليّة. علاوةً على ذلك، يمكن اختبار التصميم على الأجهزة الجوّالة مباشرةً من البرنامج. GIMP توجد في GIMP تقريبًا نفس الميزات الموجودة في فوتوشوب. الفرق الأساسي هو أنّ GIMP مجانيّ تماما. يحاجج بعض المصمّمين بالقول إنّ GIMP معقّد الفهم قليلًا، إلّا أنّه منتَج مجانيّ رائع يوفّر ميزات ضروريّة للعمل على تصميم المواقع وتحرير الصوّر. Adobe Dreamweaver يعدّ Dreamweaver مصنعًا لتصميم المواقع، حيث يوجد محرّر شفرة برمجيّة على جانب الشاشة ومعاينة لموقع الويب على الجانب الآخر. يمكنك بهذه الطريقة التعديل على الشفرات البرمجيّة ورؤية النتيجة مباشرة. في حين يركّز فوتوشوب على إنشاء عناصر موقع الويب أو النماذج الأوليّة، فإنّ Dreamweaver ينشئ موقع ويب جاهزًا للعمل. يمكن بنهاية العمليّة تصدير ملفات موقع الويب ووضعها على الخادوم. WAMP الخطوة المواليّة لتصميم موقع باستخدام برنامج مثل ووردبريس أو Dreamweaver هي اختباره، ثم تعديله وفقًا لنتيجة الاختبارات. قد لا ترغب في الدفع مقابل خادوم، فقط لعرض موقع نصف مكتمل على الجمهور. توجد طريقة أفضل، وهي الحصول على خادوم محلّي مثل WAMP. بالمختصر، تشغّل الخادوم على حاسوبك الشخصيّ، وتنشئ أو تختبر موقع الويب كما لو كان موجودًا على الشبكة، وأخيرًا تنقل الملفات إلى الخادوم المتاح للعموم. يعمل برنامج WAMP على أنظمة التشغيل وندوز، ولكن يوجد بديل يعمل على حواسيب Mac وهو MAMP. عجلة الألوان (Color Wheel) من المهمّ جدًّا أن تكون لديك أداة ألوان أثناء تصميم موقع ويب. عجلة الألوان أداة مجانيّة توفّر طريقة لبناء مخطّطات ألوان ذات مظهر متناسق لاستخدامها ضمن موقع الويب. قد تكون لديك فكرة باستخدام لون معيّن في جزء من الموقع، إلّا أنّ المشكلة هي أنّ ألوانًا كثيرة لن تظهر متناسقة مع اللون الرئيسي لموقعك. تأتي عجلة الألوان للتغلّب على هذه المشكلة، إضافة إلى أنّها تساعد في تحديد الرمز الدقيق للون مّا، بدلًا من تخمينه. Adobe Spark يعمل برنامج Adobe Spark جيّدًا لتصميم البصريّات الاحترافيّة بأنواعها للاستخدام في شبكات التواصل الاجتماعي، أو منصّات التدوين، أو البطاقات المهنيّة، وغيرها. تختصر الأداة العمليّة الطويلة لإنشاء موادّ بصريّة من الصفر على فوتوشوب. كما توفّر قوالب احترافيّة كثيرة للاختيّار بينها. بالمختصر، تمكّن غير المصمّمين من إنشاء موادّ بصريّة جميلة للاستخدام على شبكات التواصل الاجتماعي أو على مواقع الويب دون اللجوء إلى فوتوشوب. ترجمة – بتصرّف – للمقال ‎9 Must-Have Web Design Tools and Alternatives لصاحبه Brenda Stokes Barron.

في هذا الدّرس سنستخدم برنامج Adobe illustrator لتصميم رف به مجموعة من الكتب، حيث تستطيع استخدام هذا التصميم ضمن Infographic أو أي تصميم أخر تريده، يكون له علاقة بالقراءة والكتب. سيتكوّن تصميمُنا من جزئين رئيسيين : رف الكتب مع انعكاسه (ظله). الكتب. ستكون هذه النتيجة النهائية للدرس بعد تتبع جميع خطواته: نبدأ بتصميم ثاني جزء وهو "الكتب" باعتباره أهم جزء في درسنا هذا. أوّل ما نقوم به هو فتح عمل جديد، نرسم بداخله مستطيل كما هو موضّح في الصورة (قياس العمل الجديد والمستطيل وكذلك الألوان اختيارية). ملاحظة: تعتبر الألوان في أي تصميم من أهم الأمور، لذا فاختيار مجموعة متناسقة نقطة يجب التركيز عليها، ومن أفضل المواقع التي توفّر لكَ هذه الخدمة هو موقع http://www.colourlovers.com. نضيف الآن خاصية التدرج اللوني أو"Gradient" والغاية من إضافة هذه اللمسة هي إعطاء بعد آخر للشّكل، فنقوم أوّلاً بنسخ ولصق المستطيل الذي رسمناه ثلاث مرّات، لكن مع تغيير ألوانهم إلى الأسود: بعدها نضغط على حرف "G" حتى نتمكّن من تطبيق خاصيّة التدرج اللوني، ثم نضغط مرّة واحدة على المستطيل الأسود رقم 1: نستمر في تحريك الفأرة على الشّكل حتى يتلاشى الرّمادي تدريجيًا، ولا يبقى منه إلا القليل على الجهة اليمنى: نحتاج إلى إعطاء بُعد من الجهة اليمنى واليسرى وكذلك من الأعلى، و لنتمكّن من فعل ذلك، نكرِر نفس العملية على المستطيلين الأسودين المتبقيين، لكن هذه المرة نحاول أن نجعل اللون الرّمادي في المستطيل الثاني على جهة اليسار، أما في المستطيل الأسود الأخير فإنّ اللون الرّمادي نجعله في الأعلى كما في الصورة التالية: في هذه المرحلة سنضع المستطيلات الرّمادية الثلاثة فوق البرتقالي واحدًا تلوى الآخر، ستلاحظ أنّ شكل الكِتاب بدأ يظهر. أخيرًا، نُضيف بعض الزّخرفات عليه، مثل الشّكل التالي الذي أضفتُ عليه شرائط عرضية صغيرة: بإمكانكَ أن تعيد نفس الخطوات السَّابقة وتَتَفنّن في اختيار ألوان جديدة، شَرط أن تكون متناسقة حتى تحصل على كتب أخرى، وتضع عنوانا لكل كتاب لتحصل على التالي : أنهينا الآن تصميم الكُتب وسنحتاج إلى رف لترتيبها عليه، ولعمل ذلك الرّف عن طريق أدوبي إليسترايتور، نتبع الخطوات التالية: نرسم مستطيلين بلونين مختلفين ونحاول جعل العرض كذلك مختلف: سنحتاج إلى جمعها في طبقة "Layer" واحدة وذلك عن طريق الضغط على يمين الفأرة واختيار"Group": ثمّ نضاعف الطبقة "Layer" ثلاث مرات، ولفعل ذلك نقوم أولا بتحديدها ثم الضغط على CTRL+C لنسخه وCTRL+B لمضاعفته. بعدها نقوم بإخفاء الأوّل، ونبقى نعمل على الاثنين المتبقيين: نسحب الشكل الثاني ونغير لونَيهما إلى الأسود: ثمّ من شريط الأدوات العلوي نغير الشفافية (Opacity) للشّكل الثاني إلى صفر بالمئة. الآن نحدّد الشكلين معًا ونقوم بالتالي: Object > Blend > Make بعدها مباشرة وقبل إزالة التّحديد على الشكلين نتبع المسار التالي: Object > Blend > Blend Options فتظهر القائمة التّالية، قم بتغيير القيمة ما بين 0.3 و1 حسب رغبتك: بعدها نقوم بإظهار الشَّكل الأوّل الذي أخفيناه في خطواتٍ سابقة فنحصل على هذا الشَّكل: الآن نرتب الكتب التي قمنا بتصميمها في بداية الدّرس على الرّف، ونُضيف عليها لمساتنا الخاصة . وهذه هي النتيجة النهائية لهذا الدرس:

سنتعلم في هذا الدرس كيفية استخدام أدوات برنامج إنكسكيب الأساسية لرسم صندوق هدية ثلاثي الأبعاد عن طريق برنامج inkscape والذي سيكون بالشكل التالي: افتح ملفا جديدا ثم اختر المسار: File > Document properties وألغ علامة الصح عند عبارة إظهار إطار الصفحة (Show page border) من تبويب Page. ملاحظة: لتصغير وتكبير مساحة العمل، نختار من لوحة المفاتيح علامة الزائد (+) للتكبير وعلامة الناقص (-) للتصغير أو عن طريق المسار: View > Zoom نبدأ الآن برسم الصندوق ثلاثي الأبعاد. نرسم مربعا مع الضغط على زر ctrl أثناء الرسم لنحافظ على أبعاد المربع، ثم نضغط على زر التحديد والتحويل (select and transform) ثم بالضغط عليه مجددا تظهر أسهم التدوير. نختار سهم التدوير في الزاوية اليمنى أو اليسرى العلوية كما هو موضع في الصورة مع الضغط على ctrl أثناء التدوير إلى أن يصبح الشكل كما في الصورة التالية: ثم بالضغط مجددا تظهر أسهم التصغير والتكبير فنقوم بالضغط المستمر على السهم العلوي ونسحب إلى الأسفل إلى أن يصل للبعد المناسب الذي نرغب أن تكون عليه قاعدة الصندوق. نكرر الشكل الناتج عن طريق تحديد الشكل ثم الضغط على ctrl+d أو عن طريق اختيار الزر الأيمن ثم Duplicate. بعد ذلك نحرك النسخة الجديدة من الشكل للأسفل مع الضغط على ctrl ليبقى بموازاة الشكل الأصلي ونضعه حيث نرغب أن يكون ارتفاع الصندوق. نختار أداة الرسم (Bezier) ومن الشريط العلوي نحدد خيار (snap cusp nodes) ليساعدنا على اختيار نقاط التقاطع (العقد) (nodes) في زوايا الشكل بدقة. وبالأداة نرسم شكلا كالتالي: ثم نكرر الشكل (Duplicate) وبالضغط على خيار الانعكاس الأفقي (Flip horizontal) من الشريط العلوي في الصورة المحدد أو اختصاره (H): حصلنا على شكل الصندوق سنزيل الحدود عن الطريق تحديد جميع الأشكال ثم نختار خيار التعبئة والحدود الخارجية (fill and stroke) وذلك عن طريق المسار: Object > fill and stroke أو بالضغط على shift+ctrl+f. ثم نختار تبويب رسم الحدود (stroke paint) ونضغط على الخيار (x). نلون الصندوق بالألوان التالية التي اخترناها من قائمة الألوان بالأسفل: نحدد الأجزاء الثلاثة الظاهرة لنا عن طريق تحديدها قطعةً قطعة مع الضغط على زر shift أثناد التحديد، ثم بالضغط على زر ctrl نرفعها قليلا للأعلى؛ ليظهر لنا الجزء المختفي وسنتركه في مكانه إلى حين الحاجة إليه. بعد أن أتممنا عمل الصندوق سنعمل على إنشاء غطاء الصندوق وذلك بتحديد أجزائه التي لوناها بتدرجات الرمادي، ثم تكرار هذه الأجزاء عن طريق ctrl+d ورفعها لمساحة كافية أعلى الصندوق. نقوم بتحديد ارتفاع الغطاء (الشكلين المتقابلين) على جهة اليمين واليسار وتكرارهما مجددا عن طريق ctrl+d وتغيير لونهما لتمييزهما عن الشكل الأصلي ثم بالضغط على ctrl ننزلهما أسفل إلى القدر الذي نرغب أن يتوقف فيه ارتفاع الغطاء كما في الصورة: ثم بتحديد الارتفاع الأيمن مع نسخته المكررة منه نختار المسار التالي: Path > Difference أو بالضغط على ctrl+-: ونفعل الشيء نفسه مع الارتفاع جهة اليسار، ليظهر لنا الغطاء بهذا الشكل: نلغي خيار (snap cusp nodes) الذي سبق أن فعلناه ثم نكرر الارتفاع الذي كوناه لغطاء الصندوق (الشكلين المتقابلين) ونلونه باللون الأسود لنعمل ظلا للغطاء. وعن طريق خيار الإرسال للخلف (page down) المحدد في الصورة نرسل المستطيلين الأسودين للخلف لثلاثة مرات. ومن تبويب (fill and stroke) سنختار الشفافية (opacity) من 70-90 والضبابية blur 2.5 تقريبا. ملاحظة: حتى لا يظهر الظل على الحواف جهة اليمين واليسار نقوم بإزاحة الظل (المستطيل) الأيمن إلى اليسار خطوتين والظل (المستطيل) الأيسر إلى اليمين خطوتين . بالتحديد على جميع الأشكال المكونة لغطاء الصندوق نحركه لمكانه المناسب على الصندوق مع الضغط على زر ctrl لنحافظ على المحاذاة ليعطينا هذا الشكل: أنهينا عمل الصندوق وغطاءه وبقي أن نزينه بالشريطة لتكتمل هديتنا. نحدد الأجزاء اليمنى الظاهرة لنا من الصندوق مع سقف الصندوق العلوي ونقوم بتكرارها وسحبها بعيدا عن الصندوق ونلونه كما في الصورة: نكرر المربع العلوي المحدد في الصورة ونغير لونه لنميزه عن الأصل ونكبر حجمه ونحركه حيث يتكون عندها عرض الشريطة التي نرغب أن نزين الصندوق بها كما في الصورة: ثم نقوم بالضغط على: Path > difference أو بالضغط على ctrl+-. نفعل الشيء نفسه مع بقية الأشكال كما في الصور: نحدد القطع الثلاثة التي أنشأناها ثم نكررها ونضغط على خيار الانعكاس الأفقي (Flip horizontal): لتكون الشريطة في منتصف الصندوق نحاذيها عن طريق استخدام تبويب المحاذاة (Align and Distribute) وذلك عن طريق اتباع على المسار التالي: Object > Align and Distribute أو بالضغط على shift+ctrl+A. من القائمة الموجودة في التبويب نحدد (آخر تحديد) (last selected) ثم نختار قطعة الشريطة التي نرغب بمحاذاتها أولا ثم الشكل الذي سنجعلها في منتصفه ثم نضغط على الخيارات: التمركز على المحور العمودي (center on vertical axis)التمركز على المحور الأفقي (center on horizontal axis)المحددة في الصورة: ونكرر ذلك مع جميع قطع الشريطة التي أنشأناها لتظهر بهذه الطريقة: ملاحظة: نرسل قطع الشريطة الظاهرة على ارتفاع الصندوق مرتين إلى الخلف عن طريق page down المحدد في الصورة: بقي أن نرسم عقدة الشريطة لتكتمل شريطتنا. نختار أداة الرسم (Bezier) ثم نرسم شكل مثلث ثم نتبع الخطوات التالية: نختار أداة تحرير الشكل (node tool) المحددة في الصورة، ونحدد العقدة (node) في الطرف العلوي للمثلث. نختار من الشريط العلوي خيار جعل العقدة المختارة متساوية (make selected nodes symmetric) لنحصل على انحناءة مكان العقدة. نفعل الشيء نفسه مع العقدة السفلية ثم نحدد الطرف المنحني للعقدة. لنضيف لها (node) من علامة (+) في الشريط العلوي. نحدد النقطة الجديد التي أنشأناها ونختار من الشريط العلوي (object to path). نحرك النقطة لداخل الشكل يمينا. نلون الشكل ونزيل التحديد ونكرره ونعكسه أفقيا ونحركها كالتالي: نرسم شكلا مربعا ونجعل حوافه مستديرة وذلك عن طريق تحريك الدائرة في الزاوية العلوية للمربع إلى الأسفل: ثم نحركه لوسط العقدة ونزيد من قتامة لونه عن طريق ملف حوار التعبئة: بقيت الزوائد التي تمتد من عقدة الشريطة. نرسم مستطيلا ثم بالضغط على أداة (node tool) ثم (object to bath) نحدد ضلع المربع الأقل ارتفاعا ثم نضيف (node) كما فعلنا مسبقا مع العقدة وذلك بالضغط على خيار (insert new nodes) ثم نضغط على نقطة التقاطع الجديدة التي أنشأناها (node) ونحركها للداخل. نكرر الشكل مجددا، بعد ذلك باستخدام أسهم التدوير والتحجيم نصل للشكل التالي: نحدد أجزاء العقدة التي أنشأناها وبالضغط على ctrl+G نجعلها في مجموعة (group). لتكون العقدة متناسقة مع بعد الصندوق سنقوم بعمل الخطوات التالية: نختار سهام التدوير ونحدد السهم المتوسط الأيسر ونحركه للأعلى. نختار السهم العلوي المتوسط من أسهم التدوير ونحركه يمينا. نقوم بتصغير الشكل ليتناسب مع حجم الصندوق. يمكن التعديل على العقدة لنعطيها بعدا وبروزا حيث نغير اللون للون أفتح، ثم نقوم بتكرار العقدتين ونجعلها أكثر قتامة ثم بأداة (node tool) نعدل على الشكل لنصل لهذه الصورة عن طريق حذف العقد (nodes) الزائدة وتصغير الزوائد الممتدة من عقدة الشريطة إلى أن نصل لما يلي: نضيف ثنيتين صغيرتين في أطراف عقدة الشريطة بأداة (node tool). نقوم بتلوين الثنيتين بلون أقتم ونزيل الحدود، لتظهر بالشكل التالي: اكتملت الهدية ولله الحمد ولم يتبق لنا إلا أن نتلاعب بألوانها ونضيف بعض الظلال ليكون صندوقنا أكثر جمالا وأقرب للواقعية. نكرر كل جزء من شكل الشريطة مجددا بما فيها العقدة ونحوله للأسود أو الرمادي القاتم مع جعل الضبابية (blur) بمقدار 1.9 تقريبا والشفافية opacity 50 نرسل الأشكال المكررة من الشريطة للخلف بعد تحديدها. ولا ننس المربع الذي تركناه في البداية حيث نكبر حجمه بالضغط على ctrl+shift ثم نسحبه إلى أسفل الصندوق مع تحديد الخيارات كما في الصورة: هذه هي النتيجة النهائية لهذا الدرس: مع إمكانية إضافة أفكار جديدة وتغيير الألوان والأحجام:

سنتعلم في هذا الدرس كيفية تصميم عالم افتراضي ثلاثي الأبعاد شبيه بنمط رسومات لعبة Minecraft الشهيرة. سيكون التصميم بنمط الإيزومترك الذي سبق وأن تعلمنا كيفية التصميم بهذا النمط في الدرس السابق عبر طريقتين، وسنتعلم في هذا الدرس طريقة جديدة للقيام بهذا النوع من التصاميم. افتح برنامج إنكسكيب وأنشئ مستندًا جديدًا. ثم استخدم أداة رسم المستطيلات والمربعات عبر الضغط على مفتاح F4 ثم استمر بالضغط على مفتاح ctrl أثناء سحب الشكل على لوح الرسم ليتم رسم مربع مثالي. ثم انقر على F1 لاختيار أداة التحديد وانقر على الشكل، ثم انقر بالفأرة مرة ثانية على المربع لتتغير أشكال الأسهم المحيطة بالمربع وبذلك نستطيع تدويره الآن. دوّر الشكل مع الاستمرار بالضغط على مفتاح ctrl للتدوير بزوايا ثابتة، استمر بالتدوير إلى أن يتم تدوير الشكل بزاوية 45 درجة. عدّل حجم الشكل الجديد ليكون بحجم 200 بكسل للطول والارتفاع. صغّر الارتفاع إلى النصف 100 بكسل. حوّل هذا الشكل من عنصر إلى مسار عبر القائمة Path > Object to Path أو عبر الاختصار Shift+Ctrl+C. انسخ الشكل Ctrl+C وألصقه Ctrl+V ثم ضعه أسفل الشكل القديم بقليل. حدّد كلا الشكلين معًا ثم افتح لوحة المحاذاة عبر الاختصار Shift+Ctrl+A ثم اختر المحاذاة عموديًّا إلى الوسط. ضاعف الشكل العلوي عبر الاختصار Ctrl+D هذه المرّة ليتم لصق الشكل الجديد فوق القديم تمامًا. غيّر لون هذا الشكل لتستطيع تمييزه أثناء العمل عليه. فعّل خصائص المطابقة Snap من خلال شريط أدوات المطابقة. اختر أداة تعديل المسار عبر الامفتاح F2 وذلك لنقوم بتحريك نقاط الشكل. حرّك النقطة العولية باتجاه النقطة اليسرى للشكل السفلي والنقطة اليمنى باتجاه النقطة السفلية للشكل السفلي. مجدّدًا ضاعف الشكل العلوي بواسطة Ctrl+D ثم اسحب نقاطه ليغطي الجانب الأيمن من المكعّب. هذا هو الشكل الأساس للتصميم بشكل عام. سنقوم بتعديل هذا المكعّب بما يتناسب مع التصميم أيًّا كان. لذلك سنجعل هذا المكعّب نسخة أساسية وجميع المكعّبات الأخرى التي سنضيفها للتصميم ستكون نسخة عن هذا المكعّب. اصنع نسخة عن المكعّب ثم لوّن الجوانب الثلاثة بدرجات الأخضر بما يتناسب مع الإضاءة المفترضة. هذا المكعّب سيكون عبارة عن قطعة من الأرض لذلك سيكون نصفه السفلي ترابًا مما يعني أن لون النصف السفلي سيكون بنيًّا. ضاعف الجانب الأيمن وغيّر لونه للبني. ثم استخدم أداة تعديل المسار من خلال المفتاح F2 ثم اسحب النقاط العلوية باتجاه منتصف الخط لتقوم خصائص التحديد بجعل النقطة تتمركز عند منتصف الخط تمامًا، قم بهذه العملية لكلا النقطتين العلويتين. كرر العملية ذاتها للجانب الأيسر مع تغيير اللون باللون المناسب بحسب طبيعة الإضاءة المفترضة. استخدم أداة رسم المسارات عبر الاختصار Shift+F6 ثم ارسم شكلًا مشابهًا للصورة بحيث سيكون عبارة عن حشائش وأزِل لون التعبئة ولوّن الحدود بلون أخضر داكن قليلًا. ضع الشكل ضمن السطح العلوي للمكعب. سنقوم بتصميم أكثر من مكعّب وتوزيع هذه الحشائش مع تغيير حجمها وموضعها في كل مرّة. سنرسم الآن نوعًأ مختلفًا من الحشائش وسنستخدم فيه تقنية التدرج اللوني. ابدأ باستخدام أداة رسم المسارات Shift+F6 ثم ارسم شكل حشائش مشابه لما في الصورة التالية. ثم أزِل لون الحدود واختر التردج اللوني للون التعبئة واجعله من الأخضر الداكن إلى الفاتح بحيث يكون الأخضر السفلي مطابقًا للون السطح العلوي للمكعب وذلك حتى يندمج شكل الحشائش هذا مع سطح المكعب. ضع الحشائش فوق سطح المكعب ثم اصنع نسخة جديدة عنه وعدّل قليلًا بالحجم وضع هذه النسخة في مكان آخر على سطح المكعب. لاحظ كيف أن هذه الحشائش اندمجت مع السطح نظرًا لتطابق الألوان. يمكننا صنع أكثر من نموذج للمكعب مع تغيير مواضع وأحجام الحشائش للحصول على التنوع المطلوب في التصميم. سنقوم برسم أعشاب متدلّية على جانب المكعّب. استخدم دات الأداة الأخيرة عبر الاختصار Shift+F6 وارسم هذه الأعشاب المتدلّية ثم لوّنها بلون الجانب الأخضر ذاته وبدون لون للحدود. كرّر العملية مع الجانب الآخر مع تغيير شكل الحشائش المرسوم ومراعاة اختلاف اللون الأخضر في هذا الجانب عن الجانب الآخر. ارسم بواسطة أداة الدائرة F5 مجموعة من الأشكال البيضوية ثم حوّلها إلى مسارات عبر القائمة Path > Object to Path ثم استخدم أداة تعديل المسارات F2 لتعديل نقاط هذه الأشكال وجعلها عشوائية قدر الإمكان بحيث ستكون هذه الأشكال كالصخور تحت الأرض. لوّنها بألوان داكنة تلائم طبيعة الصخور تحت الأرض. وأمّا بالنسبة للصخور فوق الأرض فسنقوم برسمها عبر أداة الدائرة F5 وسنرسم شكلًأ بيضويًّا ثم سنزيل لون الحدود ونلونه بتدرج لوني دائري بحيث يكون مركز التدرج على جانب الشكل وليس في المنتصف للدلالة على اتجاه الإضاءة الافتراضي وبألوان تدرجات الرمادي. حدد الشكل الأخير ثم اذهب إلى القائمة Filters > Shadows & Glows > Drop Shadows ثم اضبط جميع الخيارات على القيمة 0.1 وضع الخيار Shadow Type عند Inner. اصنع عدّة نسخ من هذه الصخرة ووزعها مع تغيير الحجم فوق سطح المكعّب. هاذان نموذجان مختلفان من المكعّب سأقوم بالتصميم بالاعتماد عليهما. يمكنكم زيادة التنوع للحصول على نتائج أفضل. اعتمد على أدوات المطابقة الموجودة على يمين نافذة البرنامج للقيام بترتيب نسخ عديدة من المكعبات المختلفة بجانب بعضها البعض للحصول على بيئة معينة من اختيارك. والآن عدّل نسخة من الكعب بحيث سيكون عبارة عن سطح مائي. اجعل الجزء العلوي أزرق وارسم بعض الأمواج البسيطة على السطح العلوي ولا تنسَ درجات اللون الأزرق المختلفة على الجوانب المختلفة تبعًا للاضاءة المفترضة. وسنجعل مستوى سطح الماء أقل من مستوى سطح الأرض لذلك استخدم أداة تعديل المسارات من F2 ثم خفّف من ارتفاع المياه المميزة في النصف العلوي قليلًأ. املأ المساحات الضرورية بمكعبات المياه. سنبدأ الآن بعملية رسم شجرة مميزة أشبه بعود حلويات لتكون ميزة خاصة بهذا العالم الافتراضي. ابدأ برسم دائرة مثالية عبر أداة رسم الدوائر F5 ومع الاستمرار بالضغط على مفتاح Ctrl للحصول على أبعاد متساوية للشكل أثناء سحبه ياستخدام الفأرة. ولوّنه بلون بني. حوّل الدائرة من هنصر إلى مسار عبر القائمة Path > Object to Path اضغط الشكل عبر جعل الارتفاع الجديد بنصف مقدار الارتفاع القديم. اصنع نسخة عن الشكل البيضوي الجديد وارفعه للأعلى. استخدم لوحة المحاذاة لجعل الشكلين بمحاذاة بعضهما تمامًا. وإذا لم تكن لوحة المحاذاة ظاهرة لديك في نافذة البرنامج الرئيسية فيمكنك اظهراها عبر الاختصار Ctrl+Shift+A. ارسم مستطيلًا عبر أداة رسم المستطيلات F4 مع استخدام ميزة المطابقة ليصل بين الشكلين البيضويين. 39 حوّل المستطيل من عنصر إلى مسار عبر القائمة Path > Object to Path يمكن باستخدام أداة تعديل المسارات F2 ومع تكبير منظور العرض القيام بمطابقة نقاط زوايا المستطيل مع نقاط جوانب الأشكال البيضوية للحصول على شكل مثالي. حدّد الأشكال الثلاثة معًا (المستطيل والشكلين البيضويين) ثم أدمجها في شكل واحد عبر القائمة Path > Union ارسم شكلًأ بيضويًّا بنفس الطريقة السابقة ولكن بحجم أكبر هذه المرّة (لاحظ الأحجام في الشريط العلوي). حدّد كلا الشكلين وحاذهما للوسط من لوحة المحاذاة. ضاعف الشك البيضوي عبر تحديده والضغط على Ctrl+D ثم حرّك النسخة الجديدة للأعلى قليلًا. ارسم مستطيلًأ صغيرًا يصل بين الشكلين البيضويين تمامًا كما في الطريقة السابقة وحوّله أيضًا إلى مسار ثم طابق نقاط المستطيل مع نقاط الأشكال البيضوية. لوّن الشكل البيضوي العلوي بلون أخضر فاقع ولوّن شكل المستطيل مع الشكل البيضوي السفلي بلون داكن أكثر قليلًا. لا تنسَ رفع مستوى ترتيب الشكل البيضوي العلوي فوق شكل المستطيل عبر تحديده واستخدام الاختصارPage Up أكثر من رة إلى أن يصبح فوق شكل المستطيل. ضاعف هذه الأشكال الثلاثة ولوّن النسخة الجديدة بألوان وردية فاقعة. ضع النسخة الجديدة فوق القديمة مباشرة باستخدام مزايا المطابقة. اصنع عدّة نسخ من هذه الأشكال مع التناوب بين الألوان وضعها فوق بعضها البعض بشكل مباشر. عدّل حجم هذه الأشكال أفقيًّأ بحيث تصبح أصغر تدريجيًّا للأعلى. عدّل حجم الأشكال عموديًّا بشكل يتناسب مع موقع توضّع الأشكال أصغر فأصغر باتجاه الأعلى. ضع هذه الأشكال مجتمعة فوق شكل الجذع البني مباشرة وبذلك نحصل على شجرة الحلويات الخاصة بهذا العالم الافتراضي. يمكنكم استخدام مخيلتكم لصناعة أشجار أخرى وأشكال أخرى أيضًا. ولنُضفي المزيد من الحيوية على شكل الشجرة ويتناسب مع بقية أجزاء العالم الافتراضي علينا اظهار تأثير اتجاه الاضاءة الافتراضية عليها لذلك استخدم التدرجات اللونية لتلوين الأسطح الجانبية فوق من الشجرة بحسب الألون المعتمدة أساسًا مع مراعاة اتجاه الاضاءة. وبعد الانتهاء من تلوين جميع الأسطح الجانبية قم بتلوين جذع الشجرة أيضًا بتدرجات اللون البني لنحصل على شجرة مثالية لهذا العالم الافتراضي. ارسم شكلًا بيضويًّا بحجم الشكل البيوضي السفلي لجسم الشجرة الموجود فوق الجذع مباشرة ولوّنه بلون رمادي متوسط وضعه أسفل الجذع مباشرة ثم زِد التشويه Blur ووخفّف التعتيم Opacity إلى النصف. وبذلك نكون قد صنعنا ظلًّا شبه شفاف للشجرة. حدّد جميع الأشكال المكونة للشجرة وأدمجها في مجموعة Group واحدة عبر الاختصار Ctrl+G. ضع هذه الشجرة ضمن العالم الافتراضي وعدّل حجمهل ليكون مناسبًا. اصنع عدةنسخ ووزعها ضمن مساحة العالم الافتراضي الصغير. مع تصميم مكعبات فوق أرضية أخرى لا تتضمن جزء التربة ووضعها فوق مستوى مكعبات الأرض وإضافة مجموعة أخرى من الأشجار نكون قد صممنا بوضوح عالمًا افتراضيًّا بسيطًا وصغيرًا بتقنية الإيزومترك ثلاثية الأبعاد وباستخدام رسومات الفكتور Vector في برنامج الإنكسكيب Inkscape.

في الآونة الأخيرة، كان هناك الكثير من التطورات في تصميم مواقع الإنترنت وهي آخذة بالانتشار يوميًا. هل أنت جزء من مجتمع مصمميّ الويب؟ إن كنت كذلك، وكنت تعمل على تطوير تصاميم لواجهات الويب، إما في مجال تطوير لوحات التحكم، أو كجزء من موقع على شبكة الإنترنت. فقد ازدادت أهمية دور مصمم الويب، و سيزداد الدور أهمية في المستقبل، نظرًا لأن العديد من الشركات الناشئة بدأت تركز على التصميم أكثر يومًا بعد يوم. قد يجد المصممون قليلو الخبرة صعوبة في التعامل مع واجهات الويب. ففي سبيل إنشاء تصميم مذهل لواجهة المستخدم، تحتاج للتركيز على العديد من العوامل. ومع ذلك، فإن السرّ يكمن في دقة التفاصيل. هل ترغب بأن تكون مصممًا ناجحًا لواجهة المستخدم؟ دعني أعلمّك. وسنبدأ مع الأساسيات. نصائح متعلقة بالبداهة كلما سهل استخدام موقعك، ارتفع عدد الزوار والعكس بالعكس. يحمل التصميم البديهي (Intuitive design) أهمية كبيرة حتى عندما نتحدث عن السهولة. وهذا يعني أن موقعك يجب أن يكون لديه طرق استخدام واضحة بمجرد أن يفتحه الزائر. عادةً ما يكون التصميم البديهي غير ظاهريًا و هذه أكبر ميزة له. لا توجد خطوط عريضة افتراضية وإنما نهج معتاد لمعظم المستخدمين يمكّنهم من فعل ما يريدون بسهولة. يساعد التصميم البديهي الأشخاص في التركيز على جودة التجربة. كل زائر يرغب في إكمال مهمة دون أن يخسر وقته في المقاطعات. التصميم غير البديهي مُقلق ومشوّش. لا يمكن رؤية التصميم البديهي ولكن هذا لا يعني أن الزوار ليسوا على دراية بوجوده. وسيلاحظون أن جميع العناصر ترتبط بالعمل الذي يقومون به، مما سيجعلهم سعداء بذلك. مبادئ تصميم واجهات المستخدم هناك ثلاثة مبادئ تحدد استخدام اللغة المرئية: التواصل - يظهر بطريقة مألوفة للمستخدمين التنظيم - تقديم بنية متناسقة ودقيقة الاقتصاد - يستخدم سلسلة من التوجيهات بكفاءة طبيعة تصميم واجهة المستخدم الهدف الرئيسي من واجهات المستخدم هو تقديم تفاعل نوعي، وبالتالي، إتاحة تجربة مستخدم مذهلة. إذا رغب المستخدمون بإكمال مهمتهم بسهولة،فلا بد أن يتعاملوا مع تصميم فعال ومباشر. أهمية تصميم واجهة المستخدم بالنسبة للتطوير في بعض الأحيان، يعقد أصحاب العمل اجتماعات لمناقشة ردود أفعال المستخدمين وإيجاد طرق لتطبيق ملاحظاتهم على التصميم. والنتيجة هي تجربة مستخدم مذهلة بسبب مزيج من البساطة والفعالية. ما الدور الذي تلعبه واجهة الويب أثناء التطوير؟ يتم إجراء بحث معتمد على احتياجات المستخدم وتفضيلاته. يناقش أصحاب الشركة كل منها للتوصل إلى تطبيق الممكن منها. من المهم الإصغاء إلى احتياجات العملاء والتغذية الراجعة منهم لضبط التصميم وفقًا لما سبق، آخذين بالحسبان أفضل ممارسات تصميم واجهة المستخدم. قواعد تصميم واجهة المستخدم قاعدة الوضوح - يتوقع المستخدمون رؤية عناصر واجهة واضحة وبسيطة. يتجنب الأشخاص المحتوى المعقد عندما يكونون على الإنترنت. كما أنهم لا يريدون قضاء الوقت في تعلم كيفية القيام بما يُفترض أنه عمل بسيط. قاعدة الأولوية - سيشعر المستخدمون بالثقة عندما يكون لديهم فكرة عما هو متوقع منهم. قاعدة السياق - يجب أن تتيح واجهة المستخدم للمستخدمين قدرة التحكم بما يرون بأنه يجب عليهم التحكم فيه. قاعدة الوضع الافتراضي - إن كان موقعك واضحًا، فلن يحاول المستخدمون تغيير الإعدادات الافتراضية. من المهم أن يكون لديك وضع افتراضي: تأتي أجهزة التلفزيون مع إعدادات افتراضية والتي نادرًا ما يتم تغييرها. نادرا ما يتم تغيير درجة حرارة الثلاجة نجد الأوضاع الافتراضية في كل جانب من جوانب الحياة الأوضاع الافتراضية جوهرية لكل تجربة تأكد من أن الأوضاع الافتراضية عمليّة وقابلة للتطبيق. فنادرًا ما يتم تغييرها. نصائح إنشاء واجهة جديدة معرفة المستخدمين: فرّق بين أهدافهم وأهدافك. أدرجها ضمن قائمة الأولويات. بعد ذلك، خُض في خبراتهم واختصاصاتهم لمعرفة ما يحتاجونه. تعرف على الواجهات المفضلة لديهم واستخدمها. تجنب الصيحات الحديثة وخصائص التصاميم التي بالكاد تمّ طرحها . الطريقة الوحيدة لمساعدة عملائك على إنجاز مهامهم هي بالتركيز عليهم. التنقُّل وهيكل تصميم واجهة المستخدم: حاول التوصل إلى حلول تركز على التفاعل بين المستخدمين والمنتج وتساعد المستخدمين على إنجاز مهمتهم. صنّف الحلول وفقا للأهمية والقوة ودور المستخدم وبالاعتماد على سهولة الاستخدام. اعتنِ بالهيكل، وبنية البيانات، والتنقُّل وصمم واجهة المستخدم تصميمًا عمليًّا مع محتوى غني. إعداد الوثيقة النهائية: يجب أن تحتوي الوثيقة النهائية على بنية واجهة المستخدم بأكملها. ولا بد أن تعرض نهج المنتج من مرحلة التهيئة إلى المرحلة النهائية عندما يتم عرضها على المتصفح. اتبع الأنماط: يصادف المستخدمون معظم الأوقات واجهات مختلفة عن الواجهة الخاصة بك. بعض المواقع التي يصادفها معظم المستخدمين يوميًا هي الفيسبوك و تويتر ومواقع الأخبار و الووردبريس. ربما كنت تعرف مدى نجاح هذه الواجهات لذا يتوجب عليك ألّا تعيد اختراع العجلة. بدلا من ذلك، استعن بتلك المنصات للبحث عن حلول للمشاكل التي تواجهها. فمن الجيد أن تمتلك أنماط مألوفة لواجهة المستخدم. ابحث في التعليقات: يجب عليك دومًا الاستجابة لاحتياجات المستخدمين. يجب أن تمنح المستخدمين الإرشادات وتفسّر سوء الفهم وتصحح الأخطاء. تأكد من إعلام المستخدمين بأي تغييرات. إبقائهم كذلك سيشعرهم كما لو أنهم جزء من عملية التغيير. في نهاية المطاف، وستكون واجهتك هي ما يريده المستخدمون. جعل واجهات الإنترنت سهلة التعلم كلما كان التفاعل أبسط مع واجهة المستخدم، سهل على المستخدم تذكر وظائفها. وهذا يعني أنك تحتاج إلى تصميم واجهة بطريقة تتيح للمستخدم أن يمتلك عددًا قليلًا من الأمور ليفعلها. وللقيام بذلك، سيتوجب عليك تبسيط المعلومات إلى أجزاء صغيرة قابلة للفهم. يجب عليك أيضًا مراعاة عرض ميزات الواجهة على الشاشة. لا تقذفها في وجوه المستخدمين، بل فكر في إضافتها إلى مكان ما على الشريط الجانبي، أو في الجزء السفلي من الشاشة لتجنب تشتيت انتباههم. جعل واجهات الويب بديهية إن أهم عامل يحدد أداء تطبيق الويب هو واجهة المستخدم. هل لديها تصميم بسيط للوحة التحكم؟ إن لم تكن كذلك، فحاول تبسيطها. يمكن لواجهة المستخدم أن تظهر أساليب بسيطة لتحقيق النتائج. لا يهم إذا كان لديك برامج قوية، فالناس تتجاهل تصميم لوحة التحكم عديم الفعالية. ما يهم هو تفاعل المستخدمين مع البرنامج أثناء مساعدتهم على تحقيق هدفهم. ولذلك، فتصميم المواقع الإلكترونية قائم على التركيز على المستخدم أكثر فأكثر. اجعل قرارات المستخدم بسيطة كل شيء يبدأ بجعل التصميم بسيطًا قدر الإمكان. لماذا؟ التصاميم المعقدة تشوش المستخدمين وتصعّب عليهم اتخاذ القرار. ما الذي يمكنني النقر عليه؟ أين؟ هل هو الزر الأحمر هنا؟ هل هو الزر الأخضر هناك؟ طبقّ هيكلًا بصريّا. ما هي أهم الأشياء في واجهتك؟ أبرزها لينصب تركيز المستخدمين عليها. يمكنك التلاعب بالحجم والألوان، والطباعة، والمساحة البيضاء، وغيرها. نمط الخط ربما كنت تقول "حسنًا، أنا أعرف نمط خطوط رائع". وهذا لا يكفي. فوجود خط جيد في تصميمك يصبح عديم الفائدة إن كنت لا تعرف كيفية استخدامه، أو أين تستخدمه، أو ما هو الخط الذي يمكنك استخدامه إلى جانبه. وضع خطوط فريدة في كل مكان لن يحميك، إذ كل خط له صفاته الخاصة ويصلح لجمهور معين. بالإضافة إلى اختيار الخط المناسب لجمهورك، يجب عليك أيضًا التأكد من استخدام حجمه المناسب، لتسليط الضوء على أجزاء معينة من التصميم. يجب أيضًا استخدام الألوان، ولكن كن حذرًا مع مجموعات ألوان معينة. الخلاصة التصميم الجيد للواجهة يُشبه الهواء الذي نتنفسه. لا يمكننا أن نرى أو نفكر فيه. ومع ذلك، فهو يلبي احتياجاتنا. إذا كنت قد صادفت سابقًا واجهة المستخدم سيئة، فستقدّر الموقع الذي يملك واجهة مستخدم سهلة. يجب على التصميم الجيد أن يُشعرك بالثقة دائمًا طالما كنت تركز على مهمتك ويقضي على القلق من أن ارتكابك للخطأ. يجب أن تكون التطبيقات ومواقع الويب عملية ويجب على المصممين وضع المزيد من الجهد والوقت على سهولة استخدام المنتج. ترجمة -بتصرف- لمقال Designer’s Guide for Designing Web App Interfaces لصاحبه Iggy

تعلّمنا في المقال السابق ما هو فن البِكسل Pixel Art وماهي أنواعه وأشهر استخداماته. في هذا الدرس سنتعلّم أساسيات الرسم بهذا الفن من نوعية غير-إيزمترك Non-Isomertic وهو النوع المسطّح البسيط بدون أبعاد متساوية أو شبه ثلاثي أبعاد بل رسومات عادية بسيطة تُظهر الموضوع المرسوم من جهة واحدة فقط. هناك عدة برامج يمكنها القيام برسم هذه النوعية من الرسومات، بعضها بسيط وسهل للغاية وبعضها احترافي ومخصّص لرسم هذه النوعية. أسهل وأبسط هذه البرامج برنامج الرسّام MS Paint من مايكروسوفت والذي يأتي عادة مع نظام التشغيل ويندوز Windows ولاستخدام هذا البرنامج يكفي أن نستخدم أداة القلم مع أصغر قياس لحجم الخط وتكبير المنظور إلى أكبر درجة وهي 800% لتتمكن من رسم رسومات بِكسل. وفي هذا الدرس سنتعلّم كيفية تخصيص الفوتوشوب لرسم رسومات بِكسل. بدايةً سنرسم شيئًا بسيطًا لفهم الفكرة الأساسية. افتح برنامج الفوتوشوب وأنشئ مستندًا جديدًا، عليك اختيار حجم العمل الذي سنرسمه، وبما أننا سنرسم بفن البكسل الصغير نسبيًّا فإن حجم العمل سيكون صغيرًا أيضًا، وفي هذه المرحلة سنرسم رسمًا صغيرًا جدًّا، لذلك اختر حجم 24x24 بكسل ولتكن الخلفية بيضاء. طبعًا يمكننا رسم رسومات بِكسل كبيرة وحتى ضخمة بالقياسات الكبيرة وستكون مذهلة ورائعة تلك الرسومات، ولكن رسمها سيستغرق وقتًا وهذا ما ستقوم به لاحقًا بعد أن تتعلم كيفية القيام بذلك. كما سنشاهد ستكون مساحة العمل صغيرة للغاية وسيكون الرسم بداخلها مستحيلًا لذلك سيتوجب علينا تكبير منظور العمل من خلال أداة المُكبّر أو بالضغط على أيقونة حجم المنظور أسفل يسار البرنامج والذي سيكون حاليًّا 100% لنجعله 800% على الأقل. وأنا في هذه الحالة هنا جعلته 1600%. الآن اختر أداة القلم والتي ستظهر بعد الضغط بالفأرة باستمرار على أداة الفرشاة ثم اختيار أداة القلم Pen Tool. لا يمكننا استخدام أداة الفرشاة لأنها تتميز بحواف ناعمة بينما تتميز رسومات البِكسل بحواف خطوطها ونقاطها القاسية والحادة تمامًا. سيصبح شكل المؤشر بشكل مربع وهو بحجم 1 بكسل حيث يجب أن نتأكد من أن حجم أداة القلم هو 1 بكسل من شريط أدوات أداة القلم. وللتأكد من حدّة وقساوة الحواف اجعل قيمة Hardness عند 100%. في البداية قد تجد صعوبة في فهم أين سيتم وضع كل نقطة ستقوم برسمها لذلك من الأفضل أن تقوم بإظهار الشبكة Grid حتى تكون الأمور واضحة أكثر وستقوم لاحقًا بالاستغناء عن هذه الخطوة حيث سيكون الأمر أكثر سهولة وستفهم كيفية العمل بدونها، لذلك فعّل الشبكة عبر القائمة View > Show > Grid أو بالاختصار Ctrl + ‘ وستظهر الشبكة على حقل العمل. قد تكون الشبكة غير منتظمة وتحوي مربعات فاتحة الحدود داخل مربعات داكنة الحدود، في هذه الحالة عليك بالذهاب إلى القائمة Edit > Preferences > Guides, Grid and Slices ثم ضع القيمة 1 في خانة Gridline Every وفي خانة Subdivisions وتأكد من أن وحدة قياس Gridline Every هي Pixels. في بعض الأحيان قد يقوم الفوتوشوب بتنعيم الحواف قليلًا لجعل الصورة تبدو بدقّة عالية ولتجنّب ذلك عليك بالذهاب إلى قائمة Edit > Preferences > General أو بالضغط على الاختصار Ctrl + K ثم ضع خيار Image Interpolation عند البند Nearest Neighbor (Preserve Hard Edges) وبذلك نحافظ على قساوة الحواف في كافة الظروف. الآن سنبدأ عملية الرسم. ابدأ برسم الخطوط الخارجية لشكل فاكهة ولتكن كمثرى على سبيل المثال. اتبع خطوات الرسم في الأسفل لتحصل على شكل الفاكهة المطلوب. حصلنا على شكل الفاكهة الخارجي والآن سنقوم بتلوين هذا الشكل باستخدام ذات الأداة أداة القلم مع تغيير اللون واختيار اللون المناسب. ورسم جميع المناطق الداخلية للفاكهة. شكل الفاكهة حتى هذه اللحظة سيبدو بهذا الشكل بدون خطوط شبكة (يمكنك إظهار خطوط الشبكة وإخفاءها بالاختصار Ctrl + ‘). وبالحجم الطبيعي ستبدو بهذا الشكل. تظهر بهذا الحجم وكأنها أحد الرموز التعبيرية المستخدمة في برامج المحادثة عبر أجهزة الهواتف المحمولة وهي تقريبًا بحجم مشابه لها. من الممكن اعتبار هذا الرسم جاهزًا في حال أردت رسم تصميم بِكسل مسطّح أو بسيط ولكن نستطيع جعل هذا الرسم أكثر جمالًا وروعة عبر إضافة آثار الظلال والإضاءة ما يضفي مزيدًا من الحيوية على التصميم وللقيام بذلك سنقوم باستخدام لون داكن أكثر قليلًا من لون الفاكهة الأساسي ثم سنرسم ظلالًا من جهة واحدة كما يلي. والآن سنقوم بوضع آثار انعكاس الإضاءة على الجهة المقابلة من الفاكهة عبر استخدام ألوان فاتحة أكثر من اللون الأساسي وقد نستخدم اللون الأبيض للتعبير عن شدة الإضاءة واللمعان في نقطة معينة. شكل التصميم بدون شبكة سيكون بهذا الشكل. والشكل النهائي بالحجم الطبيعي. طبعًا يمكن تعديل الحجم بما يتناسب مع رغبتك والهدف من التصميم بحيث يمكن استخدام هذا التصميم كرمز تعبيري لبرنامج محادثة أو كعنصر من عناصر لعبة ما تقوم ببرمجتها أو أي استخدام آخر ويمكن أيضًا إلغاء الخلفية بحيث تقوم بالرسم على مستند جديد بدون خلفية أو قص هذا الشكل من الخلفية بسهولة. هذا الدرس لتعلّم أساسيات تصميم رسومات Pixel Art من نوع Non-Isometric باستخدام برنامج الفوتوشوب وسيكون هناك دروس قادمة لرسومات أكثر تقعيدًا وأكبر حجمًا كذلك لدروس من نوعية Isometric الرائعة والممتعة. يمكنكم القيام برسومات مشابهة وإدراجها في التعليقات أسفل الدرس لنتشارك هذه الخبرة الجديدة.

من الأمور التي تجعلني أفضّل استخدام صور GIF دائمة الحركة هو أنها طريقة بسيطة نسبيًا لاستعراض المهارات في التصميم والرسوم الإيضاحية. بالإضافة إلى أنها لا تتطلب وقتا طويلا في الإنتاج، العمل عليها ممتع، علاوة على أنها تختصر كثيرًا من عمليّة التحريك، وهو أمر ذو بال. زاد اهتمامي كثيرا، بوصفي متخصّصًا في الرسوم التوضيحية ومخرج رسوم متحركة، بإنشاء صور GIF دائمة الحركة، لكل من الاستخداميْن الشخصي والمهني خلال السنوات القليلة الماضية. وبما أنني أُسأل كثيرا عن عملي، فسأشارككم بما تعلمته عن صنع صور GIF دائم الحركة “الناجحة”. ابدأ بالقصة بالنسبة لي إنها الخطوة الأكثر تحديا. أحاول أن آتي بفكرة مضحكة وجذابة لكن سهلة الفهم. وبالطبع يجب أن تعمل في صورة GIF دائمة الحركة. دعوني أحدثكم عن مثال، ألا وهو مشروعي لصور GIF بعنوان Game Of Thrones. حيث صنعت صورة GIF لكل حلقة من الموسم السادس لمسلسل صراع العروش، وكان التحدي أخذ المشاهد – التي غالبا ما تكون عنيفة – وتحويلها إلى صور GIF جذابة تعمل كنسخة ملخصة من الحلقة. ستجد أدناه ثلاثة صور متحرّكة تمثل مشاهد قاسية. تخفّف هذه الرسومات الملونة الظريفة من هول المشاهد الأصلية التي يمكن نعتها بكلّ وصف إلا الطرافة. تجمع صورة GIF أدناه، والتي تدوم 15 ثانية، 3 إلى 4 حلقات صغيرة تخلق قصة ذات معنى. مدة الرسوم المتحركة “الصافية” تتراوح بين 5 و6 ثوان؛ لذا فإن سرد قصة ما عبر الحلقات يوفر عليّ بعض العمل. أبقها بسيطة يمنحك استخدام تصميم تقليلي Minimalist المزيد من الحرية في مرحلة التحريك. يمكنني القول من واقع خبرتي إنه كلما كان التصميم أبسط وأوضح كان التحريك أسهل، فالتصميم المعقد يحوي العديد من التفاصيل والظلال وغيرها وبالتالي يتوجب عليك أن تنتبه لها في كل إطار. لذا أبق الأمور بسيطة. أحب استخدام الأشكال الهندسية البسيطة وصيغ الألوان الباهتة. كما أتجنب التفاصيل غير الضرورية كأصابع اليديْن والقدميْن، وأستخدم تصاميم بسيطة لليدين والرجلين - فمن الأسهل أن ترسم ببساطة عوضا عن رسم ذراع مفصلة مع الظلال وسماكات مختلفة ودقة تشريحية. يسمح لك تصميم الأطراف بأشكال بسيطة بمدها وعصرها واللعب بها وكأنها معكرونة دون التأثير على سماكتها الأصلية. يمكنني أن أتلاعب ضمن هذه القيود بالتصاميم مع المبالغة ببعض الميزات لإضفاء الفكاهة والأسلوب المميز والاهتمام البصري: جسد ضخم بوجه صغير، ذراعان ثخينتان جدا أو ذراعان نحيلتان وطويلتان جدًّا وغير ذلك. كما أنني أجد رسم وتحريك الشخصيات البسيطة أكثر جمالا وتعبيرا. لأشرح ما أعنيه، إليك صورة للموهوب سيمون بايلز. تمعن بها وستجد أن الشخصية صممت بالعناصر الأساسية فقط: أشكال بسيطة للأطراف، شكل أثخن للجسم ودائرتان كاملتان للأطراف والشعر. هذا كل شيء. بإمكاني التلاعب في التصميم بسهولة أكبر بكثير مما لو رُسِم بطريقة واقعية أكثر تفصيلا. سيكون من الصعب تنفيذه كل تلك التقلبات المجنونة لو لم يكن التصميم سهلا. يجب أن تكون الحلقات كاملة بما أن صور GIF دائمة الحركة تعرض تلقائيًّا مرارا وتكرارا، فإنها يجب أن تكون كاملة – وإلا سيسهل اكتشاف العيوب، ناهيك عن تشتيت الانتباه. لذا أَوْلِ التفاصيل الكثير من الاهتمام. اهتم كثيرا بكل إطار من رسمتك المتحركة لتضمن ظهور الحلقات باستمرار. أطمح إلى تصميم رسوم متحركة سلسة، وأحيانا أستخدم الرسوم المتحركة الكلاسيكية لإجراء تعديلات بسيطة كرفرفة الشعر وحركة الأطراف (يكون التصميم البسيط بمتناول اليد هنا أيضا). وبما أن صور GIF دائمة الحركة تكون قصيرة في أغلب الحالات فهي تستحق العناء. أول شيء أفعله لجعل الرسوم المتحركة هو إنشاء الإطارين الأول والأخير حتى يُوَّحدا بسلاسة. ومن ثم أنتقل إلى إنشاء جسم الرسم المتحرك. حاول إضافة عناصر ممتعة لتفاجئ بها المشاهدين عند مشاهدة صور دائمة الحركة. إليك أفكارا قد تساعدك للاستلهام منها: استخدم التأثيرات الصغيرة. على سبيل المثال، أضف نجوما إلى العناصر اللامعة واندفاعات لحركة الأطراف السريعة جدا وغيوما صغيرة من الغبار عند ارتطام شيء ثقيل بالأرض. ضخّم الحركة. على سبيل المثال، افصل الرأس عن الجسد عندما تُلكم الشخصية. اختر لوحة الألوان الخاصة بك بحكمة، فصور GIF محدودة ب 256 لونا، لذا فإن البكسلات تظهر إن لم تكن التدرجات متناسقة. ترجمة - بتصرّف - للمقال Creating seamless looping GIFs لصاحبه Eran Mendel. حقوق الصورة البارزة محفوظة لـ Vecteezy

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

تحدّثنا في الجزء الثاني من سلسلة المقالات هذه عن مبادئ التصميم الجرافيكي، وألقينا نظرة على مفاهيم كالتوازن، السيادة، التباين، والانسجام. في هذا الجزء، وهو الجزء الأخير، سنتحدّث عن التكوين وعناصره الرئيسية. العنصر البصري المفرد Single Visualفي هذا النمط من التكوين يتم استخدام صورة واحدة فقط في التصميم. وهذا يعني أن هذه الصورة يجب أن تكون جذّابة، ذات وقعٌ قوي، ويقوم التصميم بالكامل على أساسها. من الأمثلة على صفحات العنصر البصري المفرد هي صفحات الهبوط، لكن هذا النمط يستخدم في التصاميم الموجهة للطباعة أكثر منه في المواقع. يُعتبر هذا النمط من التكوين هو الأسهل، على الرغم من إنّ اختيار الصورة يجب أن يكون بشكل دقيق وإلّا لن يكون لها التأثير المرغوب. إنّ المبدأ الأساسي في هذا النمط هو التأكّد من أن أسلوب تنسيق النصوص typography والعناصر الأخرى تُعزّز العنصر البصري ولا تطغى عليها. لذلك يجب أن يكون هنالك تمييزًا واضحًا للعنصر الأهم، وفي حالتنا هذه قد تكون صورة، رسم إيضاحي، أو عنصر رسومي؛ أي يجب أن يكون العنصر الأهم هو الأقوى تأثيرًا. صفحة Jeffrey Veen هي مثال جيد على استخدام نمط العنصر البصري المفرد النسبة الذهبيةوتُعرف أيضًا بحلزون فيبوناتشي أو فاي، وقيمتها 1:1.618 تقريبًا. يمكن إيجاد حلزون فيبوناتشي في أشياء مختلفة حول العالم، وشبكة الإنترنت ليست استثناء منها. وتعتبر فكرة ترتيب عناصر التصميم على طول خطوط الحلزون فكرة جيّدة، لأنّ هذه هي الطريقة التي تعمل بها العين البشريّة. إنّ استخدام النسبة الذهبيّة بصورة صحيحة سوف بجلب تركيز زائري الصفحة إلى الأشياء التي نرغب في التأكيد عليها. حلزون فيبوناتشي النقطة المحورية (أو البؤرية)وتعتبر من الأسس المهمة لأنها تقدّم للمشاهد شيئًا لينظر إليه. تضيف النقطة المحورية فكرة معيّنة إلى التصميم، وتعمل كنقطة بداية لأغلب زوّار الموقع. يمكن تمثيل النقطة المحورية من خلال أسلوب تنسيق النصوص، الأزرار، الرسوم التوضيحية، الصور، أو العناصر الأخرى. وهذا الشيء راجع للمصمّم نفسه في اختيار العنصر الذي يُنشئ من خلاله النقطة المحورية. يستخدم موقع Girlfriend Agency النقطة المحورية بصورة جيّدة وذلك بالتشديد على العنوان يجب أن تكون النقطة المحورية هي نقطة التركيز، كذلك يجب أن تكون أول عنصر ينظر إليه المشاهد عند دخوله الصفحة، خصوصًا في المرّة الأولى. مع ذلك، جعل النقطة المحورية مهمّة جدًا وواضحة جدًا قد يخلّ في توازن مخطط الصفحة. لتجعل النقطة المحورية من ضمن أهداف تصميم موقعك، وليكن غرض الموقع معروضًا من خلالها. على سبيل المثال، وجود زرّ التحويل (Call to Action Button) يعتبر نقطة محورية، لأنه هو الأمر النهائي الذي تريد من المستخدم فعله على صفحتك. التصميم الشبكيقد يكون هذا النمط جديدًا على القارئ. نظرية الشبكة يمكن أن تكون العنصر الأكثر شعبيّة في التكوين لأننا نقوم بتطبيقها في أغلب الأحيان حتّى دون أن ندرك ذلك. تضيف الشبكات هيكلية معيّنة للتصميم، وتستخدم للحصول على تناسب جيّد بين العناصر على الصفحة. توجد الكثير من الهياكل الشبكيّة Grid Frameworks على الإنترنت، ويمكن تحميلها مجّانًا والبناء عليها. وأنا حقيقةً اقترح استخدامها إذا كنتَ مبتدئًا في هذا المجال. إن العمل بنظام الشبكات من البداية سيجعلك تشعر بالراحة باستخدام هذه الطريقة، وهذا يُعتبر جيّدًا للمخطّطات التي تنشئها. لا يشترط بالشبكات أن تكون واضحة ومحدّدة دائمًا؛ يمكن أن تكون طفيفة أو خفيّة أيضًا. وإذا اخترت العمل بالخيار الثاني تأكّد من أنّ تصميمك ما يزال واضِحًا ومرتّبًا قبل أن تقدّمه. عندما تعمل بنظام الشبكات احرص دائمًا على سؤال الأشخاص من حولك حول آرائهم، وهذه الفكرة جيّدة؛ لأنّ العمل مع الهياكل الشبكيّة لساعات طِوال قد يؤثّر على عينيك ويجعلك تغفل عن رؤية الأخطاء الصغيرة التي تحتاج إلى التعديل. النظام الشبكي قوانين جشتالت Gestalt Lawsعندما تعلّمتُ هذا المبدأ في المدرسة ذُهلتُ بالفرق الذي صنعته بتصاميمي. إن قوانين جشتالت هي نتيجة الإدراك البصري للإنسان للأشياء المختلفة، من ضمنها المواقع والعناصر. تم إنشاء هذه القوانين اعتمادًا على الطريقة التي تؤثّر بها العناصر المختلفة على المشاهد. توجد خمسة مبادئ خاصّة بقوانين جشتالت: الإغلاق closureالتشابه similarityالاستمرار continuationالمحاذاة alignmentالتقارب proximityوباختصار نوضّحها؛ قانون الإغلاق ينطوي على مفهوم أننا معتادون على إغلاق الأشياء، غير المغلقة في الواقع، في مخيّلتنا. وكمثال على ذلك الدائرة المرسومة ب 330 درجة؛ فالدماغ البشري يستقبلها على أنّها دائرة كاملة. أما قانون التقارب فإنّه يوضّح بأننا نميل إلى النظر إلى الأشياء القريبة من بعضها على أنها مجموعة. قانون التشابه يؤكّد نفس الشيء؛ أننا نقوم باعتبار الأشياء التي تملك نفس اللون، الشكل، أو الخامة على أنها مجموعة. قانون الاستمرار يؤكّد على أن الأشكال سيتم تجميعها كشكل كامل إذا كانت موضوعة بصورة خطّية أو أنها تتبع اتجاهًا معيّنًا. أمّا القانون الأخير، المحاذاة، فإنّه يُظهر أن الأشكال يتمّ محاذاتها على أساس حافّاتها (وهذا النمط شائع جدًّا)، أو على أساس خطوطها المركزية. ويمكن للأشكال أيضًا أن تتداخل مع بعضها البعض. قانون جشتالت للإغلاق قانون جشتالت للتقارب في الواقع توجد المزيد من قوانين جشتالت، لكن ليست جميعها مهمّة بالنسبة للمصمّمين. التخطيط على شكل Z و Fإن التخطيط على شكل Z يقوم على أساس حركة عين الإنسان. وكما هو واضح من الاسم؛ إن مسار نظرات معظم الأشخاص الذين تم تتبّع مسار نظراتهم إلى صفحة معيّنة كان على شكل Z، ما معناه أنهم يبدؤون من الزاوية العلويّة اليسرى وينتهون بالزاوية السفليّة اليمنى (هذا بالنسبة للمواقع الأجنبية). لهذا فإن محاذاة جميع الأشكال في الصفحة الرئيسية على شكل حرف Z سيؤدّي بالتأكيد إلى نتائج أفضل، وسيجعل التصميم مُتقنًا أكثر. تخطيط على شكل Z يوجد أيضًا نوع آخر من التخطيط؛ على شكل حرف F. وفي هذا النوع يبدأ المستخدم بقراءة السطر الأول، ثمّ يستمر إلى السطر الثاني، وهكذا يستمر بنفس الترتيب. صفحة Goal Arena مخطّطة على شكل الحرف F الخلاصة كانت هذه هي المبادئ الأساسيّة للتصميم، وامتلاكك معرفة واسعة حول كل من هذه المبادئ لن يجعل مخططات صفحاتك تبدو بشكل أفضل فحسب، وإنمّا سيوفّر للمستخدم تجربة أفضل. إنّ إنشاء الواجهات الجيدة لأجل المستخدم ستجعله يأخذ صفحتك بالحسبان، وإذا اعتدت العمل بهذه المبادئ، ستجد أنها بمرور الوقت تصبح طبيعية ومنطقية. بالطبع هنالك المزيد من الأشياء التي يمكن معرفتها عن هذه القوانين، لكن هذه المعرفة تأتي مع التجربة، ولا يمكن الحصول عليها من الكتب فقط؛ إنما من خلال الممارسة. من خلال هذه المقالات الثلاث يجب أن تكون قد اكتسبت المعرفة الكافية بالعناصر الأساسية للتصميم. وأنا آمل حقًّا أن تكون هذه المقالات قد جعلتك تفكّر جدّيًا، إذا كنت مبتدئًا، بمهنة مصمم الجرافيك. ترجمة -وبتصرّف- للمقال: Graphic Design Basics Part 3: Composition لصاحبه: James Richman. حقوق الصورة البارزة: Designed by Freepik.

اتبع الخطوات في هذا الدرس لتتعلم كيفية تصميم فكتور منظر طبيعي سعيد وبهيج باستخدام برنامج أدوبي إليستريتور. افتح ملفًّا جديدًا بحجم مربّع طول ضلعه 1000px ليكون قاعدة للرسم. استخدم أداة القلم Pencil tool لرسم الخطوط مع الاهتمام البالغ بالمنحنيات المُنسَابة عبر لوح الرسم. اسحب تدرّجًا دائريًّا عبر الشكل ليكون هذا الشكل التلة الخضراء العشبية الأولى. استخدم ذات الأداة لرسم شكل مشابه ثم أرسل هذا الشكل إلى الخلف عبر الضغط على الاختصار ]+CMD. ارسم شكل تلّة ثالثة بملامح مختلفة وضعها في الخلف أيضًا. أعطِ هذه الصورة مزيدًا من العمق عبر سحب الشفافية على تلّتين من التلال الثلاثة لإعطاء انطباع وجود المسافات بين التلال. ارسم مربعًا بحجم 1000x1000px وحاذِه على لوح الرسم ثم لوّنه بتدرج لوني عمودي من الأزرق السماوي إلى الأبيض. ارسم بعض الغيوم الأنيقة باستخدام أداة الدائرة والاستمرار بالضغط على مفتاح Shift لرسم دوائر متساوية متعدّدة وضعها وفقًا لذلك. حدّد كل مجموعة من الدوائر التي تشكّل غيمة واحدة وأدمجها في شكل واحد باستخدام أدوات Pathfinder. اضغط على Expand لتحويل الخطوط الخارجية إلى شكل جديد. ضع الغيوم كما يجب في السماء ثم خفّف التعتيم قليلًا. ارسم دائرة على لوح الرسم ثم اذهب إلى القائمة: Filter > Distort > Pucker & Bloat حرّك المزلاج أثناء مشاهدة التأثير لإنشاء شكل يشبه بتلات الزهرة. انسخ وألصق الشكل الأخير ثم دوّره بزاوية 45 درجة لتشكيل ثماني بتلات متطابقة للزهرة. ارسم دائرة في منصف الزهرة وضع الزهرة كلّها ضمن أرضية التلّة الأولى. انسخ وألصق عدة زهور مع تغيير الحجم وزاوية الدوران والموقع في كل مرّة. ولوّن كل واحدة منها بلون مختلف. استمر بلصق المزيد من الزهور على الأرضية لتبدو وكأنها تهبط مع التلة. ارسم فراشة لطيفة عبر البدء برسم مجموعة من الدوائر وتصغير حجمها في كل مرة وتغيير اللون بما يتناسب مع ألون جناح الفراشة. دوّر هذا الجناح ثم ضاعفه ثم اذهب إلى القائمة: Object > Transform > Reflect لإنشاء انعكاس للصورة. مع دائرة أصغر قليلًا ارسم الجناح السفلي. اعكس شكل الجناح الصغير وضعه في الجهة المقابلة. ثم ارسم شكلًا بيضويًّا طويلًا يمثّل جسم الفراشة وضعه في المنتصف. اجمع جميع أشكال الفراشة في مجموعة واحدة CMD+G ثم ضعها في مكانها المناسب في المشهد. استخدم أداة القلم لرسم منحني ناعم لتقديم مسار طيران الفراشة ثم أضف حدودًا بيضاء متقطّعة كلمسة إبداعية. سنقوم الآن بقص المشهد ضمن حدود مناسبة عبر تحديد جميع أشكال المشهد CMD+A ثم جمعها معًا ثم ارسم شكلًا مؤقتًّا فوق المنطقة المطلوبة. حدّد مجموعة أشكال المشهد والشكل المؤقت ثم استخدم خيار Crop من لوحة Pathfinder لقص المشهد ضمن مساحة الشكل المؤقت. ترجمة -وبتصرّف- للمقال: Illustrator Tutorial – Create a Blissful Vector Scene لصاحبه: Chris Spooner.

سنقوم في هذا الدرس بتعلّم كيفية العمل على برنامج InDesign من شركة Adobe لتصميم مجلّة صغيرة بسيطة باستخدام الأدوات الأساسية فقط وذلك لتبسيط فهم آلية عمل البرنامج ومعرفة أساسياته. برنامج InDesign هو برنامج مخصص لتصميم الكتب والمجلات ومختلف المطبوعات التعليمية والإعلانية سواءً كانت مطبوعة أم إلكترونية، ويعتبر من أفضل البرامج حاليًّا في هذا المجال. سنقوم باستخدام الطرق البسيطة السهلة والأدوات الأساسية لتصميم مجلة صغيرة تتحدث عن السيارات الموجودة في لعبة Need For Speed المعروفة. من الأفضل أن يكون لديك القليل من المعرفة ببرنامج فوتوشوب وذلك للتشابه الكبير في الأدوات والتأثيرات مع برنامج InDesign. في البداية يجب أن نُوّفر متطلبات المجلة من صور السيارات والمعلومات عنها بالإضافة إلى شعار اللعبة وشعارات السيارات أيضًا. افتح برنامج InDesign وستظهر لك واجهة البرنامج وتتضمن شريط الأدوات الأساسي في الأعلى والذي يتغيّر بتغيّر الأداة المستخدمة وبحسب العنصر المحدّد للعمل عليه، وشريط الأدوات الأساسية في الجهة اليسرى ولوحات التحكم بالصفحات والطبقات وأمور أخرى في الجهة اليمنى. افتح مستندًا جديدًا من خلال القائمة: File > New > Document ستظهر لك نافذة إعدادات المستند الجديد، ضع القيم التالية: Intent : Print عدد الصفحات: سنقوم باختيار عدد قليل فقط من أجل التعلّم ولذلك سيكون العدد 8 صفحات. حجم الصفحة سيكون A4. يمكنك الاطّلاع على الصفحات والتحكم بها عبر الضغط على رمز لوحة الصفحات Pages في الشريط الأيمن، وإذا لم تكن ظاهرة فيمكنك إظهارها من القائمة: Window > Pages أو بالضغط على المفتاح F12 من لوحة المفاتيح. سنقوم بتصميم صفحة الغلاف الأمامية عبر وضع صورة إعلانية للعبة، وللحصول على دقّة ممتازة يُفضّل الحصول على صورة عالية الدقة ووضعها من خلال القائمة: File > Place ثم تحديد مكان الصورة وبعد ذلك تضعها في زاوية الصفحة. يعتمد هذا البرنامج بشكل أساسي على الإطارات Frames للتعامل مع العناصر بشكل منفصل وسهل، ولذلك عندما أضفنا الصورة تم وضعها ضمن إطار خاص بها ولتغيير التحكم بين الإطار والصورة ذاتها عليك النقر مرّة واحدة على الصورة في كل مرّة تريد تغيير العنصر الذي تريد التحكم به. يمكنك التحكّم بحجم الصورة لتغطّي كامل مساحة الصفحة من أسهم التحكم بالحجم المحيطة بالصورة، أو من خلال شريط الأدوات العلوي، ولكن يجب عليك تغيير حجم الإطار والصورة معًا، وحتى لا تقوم بالعمليّة مرتين يكفي أن تغيّر حجم الإطار ليتطابق مع حجم الصفحة، ثم انقر على الأيقونة الموجودة في الشريط العلوي، والذي سيقوم تلقائيًّا بتغيير حجم الصورة لتملأ الإطار، وبالتالي تغطّي كامل مساحة الصفحة. اسم اللعبة مكتوب أصلًا في صورة غلاف اللعبة وبما أننا نصمّم مجلةً عن هذه اللعبة سنقوم بإضافة كلمة "مجلة" فقط فوق اسم اللعبة، ولإضافة النص انقر على أيقونة أداة النص من شريط الأدوات الأيسر ثم ارسم بواسطة هذه الأداة الإطار الذي ستكتب بداخله الكلمة، ضعه فوق اسم اللعبة مباشرة. اكتب الآن كلمة "مجلة" وتأكّد من أن حجمها مناسب لحجم النص في اسم اللعبة. لاحظ كيف يتغير محتوى الشريط العلوي بحسب العنصر المحدّد والأداة المختارة، بما أننا اخترنا أداة النص ونعمل على عنصر نصّي فإن الشريط العلوي سيحتوي على أدوات تنسيق النص، ومنها يمكنك تغيير نوع الخط المستخدم، يجب عليك أن تختار خطًّا مناسبًا للخط المستخدم في كتابة اسم اللعبة، لهذا اخترت خط Emad-Diana eXtra الشبيه بنمط خط العنوان. وحتى تتناسب الكلمة أكثر مع العنوان سنقوم بتدويرها قليلًا بذات زاوية ميل نص العنوان، انقر بالزر الأيمن على كلمة "مجلة" ثم اختر القائمة: Transform > Rotate وضع القيمة 10 درجات. ولجعل الكلمة متناسقة أكثر مع نص العنوان سنقوم بإضافة تدرج لوني مشابه للتدرج المُطبّق على نص العنوان عبر تحديد الكلمة ثم النقر مطوّلًا على أيقونة اللون أسفل شريط الأدوات الأيسر واختيار الخيار Apply Gradient. سيتوجب عليك أولًا إضافة ألوان نصّ العنوان إلى لوحة الألوان Swatches ومن ثم انقر مرتين على أيقونة التدرج اللوني التي اخترتها للتو لتفتح نافذة التدرج اللوني، ثم عدّل هذا التدرج بما يتوافق مع التدرج اللوني لنص العنوان (لن اشرح هذا الأمر مطوّلًا لأنه من المفترض أن تكون لديك معلومات أساسية عن الفوتوشوب ما يسهّل فهم عملية تعديل التدرج اللوني). لاحظ أنّ نص العنوان الذي نحاول أن نطبّق تأثيراته على كلمة "مجلة" له ظل خفيف، ولذلك انقر بالزر الأيمن على الكلمة ثم اختر القائمة: Effects > Drop Shadow أو من خلال الاختصار Ctrl+Alt+M لتفتح نافذة التأثيرات وتحديدًا تأثير الظلال ثم ضع القيم التالية: Mode : Multiply Opacity : 100% Distance : 0.5 mm Angle : 135 Size : 1 mm ثم انقر OK ليتم تطبيق التأثير على الكلمة وتصبح مطابقة لنص العنوان. أخيرًا حرّك الكلمة إلى جانب العنوان بشكل ملاصق له ويتلاءم مع أسلوب كتابة العنوان لتبدو الكلمة من أصل العنوان. الآن استخدام أداة النص لكتابة عنوان العدد لهذه المجلة أسفل الصفحة بحجم كبير نسبيًّا باستخدام ذات الخط وذات الألوان. وبهذا ننتهي من صفحة الغلاف وستبدو لوحة الصفحات بهذا الشكل. سنبدأ بالصفحة الأولى. بما أن هذا العدد يتمحور حول سيارات هذه اللعبة فسوف نقوم باختيار إحدى السيارات ونضع بعض التفاصيل والصور. اخترت لهذه الصفحة سيارة BMW M4. قم بإدراج صورة للسيارة عبر الخيار Place من قائمة File ثم عدّل حجم الصورة لتتمركز أسفل الصفحة مع جعل الإطار يغطي كامل الصفحة، والتأكّد من أن لون التعبئة للإطار هو اللون الأسود وبذلك تصبح الصفحة سوداء مع صورة السيارة أسفل الصفحة. من الممكن تعديل الصور ببرنامج فوتوشوب وتجهيزها قبل الدخول بها إلى برنامج إن ديزاين ولكن البرنامج الأخير يمتلك العديد من أدوات فوتوشوب ما يغنيك عن العمل على برنامجين. في هذه الحالة أريد تطبيق تأثير تدرج ظهور صورة السيارة من الأعلى لتختفي تدريجيًّا ضمن الخلفية السوداء للصفحة. استخدم أداة Rectangle Tool وارسم مستطيلًا يغطي نصفه السفلي الجزء العلوي من صورة السيارة. انقر على المستطيل بالزر الأيمن وادخل إلى نافذة التأثيرات واختر التأثير Gradient Feather. ثم عدّل التدرج اللوني ليكون باللون الأسود مع ترك الطرف اليمين شفافًا وتأكّد من جعل الزاوية -90 درجة. أدرج الآن صورة شعار شركة BMW وعدّل حجمها وضعها في الركن العلوي الأيسر للصفحة مع الانتباه إلى حدود الهوامش. لم أتطرّق لموضوع الهوامش وحدود النزيف لتصاميم الطباعة في هذا الدرس لأنني أريد شرح الفكرة العامة للبرنامج وسأتحدّث عنها بشكل مفصّل في الدروس القادمة. أضف الآن شعار نموذج السيارة M4 ليملأ الجزء العلوي من الصفحة. أضف عنوانًا للصفحة واكتب فيه اسم ونموذج السيارة "BMW M4 F82" وفي حال واجهت مشكلة مع الأرقام وظهرت الأرقام الهندية فإنّ هذا يجعل النص غير متناسق بسببها، لذلك انقر على الأيقونة في أقصى الجهة اليمنى من الشعار العلوي ثم اختر القائمة: Digits > Arabic وبذلك تتحول الأرقام إلى الأرقام العربية وتُحَلُّ المشكلة. أضف جدولًا لنكتب بداخله مواصفات السيارة. يمكنك إضافة الجدول من القائمة: Table > Create Table أو من الاختصار Ctrl+Alt+Shift+T فتظهر لك نافذة إنشاء الجدول، حدّد عدد الأعمدة والصفوف للجدول واتجاه الجدول لليمين وأو لليسار. ثم اكتب البيانات الخاصة بمواصفات السيارة. لا تنسَ أن الجدول سيكون في إطار منفصل. ارسم إطارَ نصٍّ جديد بجانب الجدول واكتب بداخله معلومات عامة عن السيارة. عليك أن تجعل لون النص في هذا الإطار باللون الأبيض وذلك لأن الخلفية سوداء. عدّل لون النص داخل الجدول لتضيف المزيد من الحيوية على التصميم. ولتجعل الجدول أفضل وبنمط جميل حدّد خلايا الجدول ثم انقر بالزر الأيمن واختر القائمة: Cell Options > Stroke and Fills الآن اتبع الخطوات التالية: اختر التبويب Stroke and Fills في حال لم تكن مفعّلة. أزِل جميع الخطوط في النموذج في الوسط وانقر على الخط الأفقي الأوسط لتظهر جميع الخطوط الأفقية التي تقع داخل الجدول. فعّل أيضًا الخط السفلي. حدّد حجم حدود الجدول عند القيمة اختر النمط المتواصل غير المتقطّع. اختر لون هذه الحدود. اجعل قيمة Tint عند 100%. وأبقِ خلفية الخلايا بدون تعبئة. اضغط OK. هذا ما سيبدو عليه الجدول بعد هذه التعديلات. يمكنك تعديل الجدول عبر تعديل ألوان النص والخلايا وتعديل الحدود كما تشاء. وهذا ما ستبدو عليه الصفحة الأولى بعد الانتهاء من إضافة جميع العناصر المطلوبة. كرّر ذات العملية للصفحة التالية وأضف صورة السيارة أسفل الصفحة ولوّن أرضية الصفحة باللون الأسود ثم أضف المستطيل ذو التدرج اللوني من الأسود إلى الشفافية تمامًا كما فعلنا في الصفحة الأولى. أضِف صورةً أخرى للسيارة ستكون صورة مُصغّرة عن السيارة في الجزء العلوي الأيسر من الصورة. عدّل حجم وموضع الصورة مع إطارها. ولإضفاء المزيد من الحيوية والتفاعل على التصميم أضف لهذه الصورة المُصغّرة ظلالًا خفيفة كما في الشكل التالي: أضِف صورة مُصغّرة أخرى مع جعل حجمها مطابقًا للصورة المُصغّرة الأولى، ثم حرّكها مع الاستعانة بالأدلّة الذكية لتكون مصطفّة مع الصورة الأولى. لا داعي لإضافة الظلال هنا لأن الخلفية المحيطة بالصورة سوداء اللون وبهذا لن تظهر الظلال إن وضعناها. ضع الصور المتعلقة بالشركة المصنّعة ونموذج السيارة. كما تلاحظ وضعتُ هنا أربع صور متداخلة. تابع إضافة العناصر المشابهة للعناصر في الصفحة الأولى من جدول المواصفات ونبذة عن السيارة، ولكن بحجم ومواضع مختلفة عن الصفحة الأولى وبما يتناسب مع المساحات الفارغة في الصفحة. قم الآن بإضافة صفحات أخرى تتضمن سيارات من اللعبة بذات النموذج. وعندما تصل للصفحة الأخيرة اجعلها صفحة إعلان (مثلًا ستكون إعلانًا لأكاديمية حسوب) مع وضع عنوان موقع الأكاديمية ويمكنك إضافة رابط على الجملة ولكن دعونا لا نتوسع أكثر اليوم، وسيكون هناك دروس أخرى نتحدث فيها عن تقنيات مختلفة في البرنامج. ارسم صفحة الغلاف الخلفية وضع شعار اللعبة الإعلاني أعلى الصفحة ولوّن الباقي باللون الأزرق. ثم أضِف رمز QR Code الذي يدّل على رابط مباشر إلى موقع أكاديمية حسوب. يمكنك إنشاء هذا الكود عبر الذهاب إلى القائمة: Object > Generate QR Code قمت بجعل محتوى الرمز Web Hyperlink وكتابة عنوان الموقع الإلكتروني في الخانة المطلوبة. قد تُضطر إلى تعديل لون خلفية الرمز حتى تبقى واضحة. وبعد الانتهاء من تصميم جميع الأغلفة والصفحات فإن المجلة ستبدو بهذا الشكل: ولتحويل هذه المجلة إلى كتاب إلكتروني قابل للطباعة اذهب إلى القائمة: File > Export أو من خلال الاختصار Ctrl+E فيُطلب منك تحديد موقع حفظ الملف واسم الملف ثم تظهر نافذة تضم خيارات مختلفة حول تأسيس ملف PDF، اختر الدقة العالية ثم انقر موافق. يمكنكم تحميل هذه المجلة كملف PDF من هنا. أرجوا أن تكونوا قد تعلمتم وحصلتم على الفائدة المرجوة من هذا الدرس لفهم كيفية وآلية عمل برنامج InDesign وتصميم مجلة بسيطة باستخدام الأدوات الأساسية البسيطة وذلك لجعل هذا البرنامج مفهوم أكثر للمبتدئين ولتسهيل عملية التقدم في هذا البرنامج وتصميم تصاميم أكثر روعة وسحرًا وجمالًا.

شاهدت مؤخرًا العديد من التصاميم ثلاثية الأبعاد للافتات نيون إعلانية تم تصميمها باستخدام برامج التصميم ثلاثي الأبعاد. أميل أكثر للتّصاميم ثنائية الأبعاد لذلك أريد أن أنتج تأثير نيون مشابه باستخدام الإليستريتور وفوتوشوب ولكن مع إضافة الحركة بواسطة صيغة GIF المتحركة. اتبع هذا الدرس لتتعلم عملية تصميم لافتة إعلانية لكوكب البيتزا مُستخدمًا أدوات فكتور الإليستريتور لإنشاء التصميم الأوّلي للافتة ثم فوتوشوب لإضفاء الحيوية على التصميم عبر أنماط الطبقات المتنوعة وتشكيل الحركة للملف. تأثير لافتة النيون سيتم إنشاؤه في الفوتوشوب باستخدام أنماط الطبقات عبر إنشاء توهجات نيون ملوّنة كما سيكون هناك طبقة قاتمة تكون عند إطفاء الأنوار والتي ستُضاف في إطار أثناء سير الحركة للملف لإضفاء الشعور بالواقعية على التأثير. لافتات النيون تعتمد على الأنابيب المنحنية لتشكيل أشكال التصميم لذلك سنستخدم الإليستريتور لصياغة مسارات فكتور بحيث لا تتقاطع الخطوط مع بعضها. افتح برنامج الإليستريتور وابدأ ملفًّا جديدًا. ارسم دائرة على لوح الرسم باستخدام أداة القطع الناقص Ellipse tool، ثم ألغِ لون التعبئة واترك فقط الحدود السوداء ظاهرة. غيّر إعدادات الحدود إلى 5pt مع نهايات مستديرة وزوايا مستديرة أيضًا. استخدم أداة النص Type tool لإضافة أي نص إلى لافتة النيون. أنا استخدمت خطًّا اسمه Darwin لكتابة Pizza Planet. اضبط حجم النص ليتوسط الدائرة ويتقاطع مع حدودها الخارجية ثم أمِلهُ بزاوية -10 درجة عموديًّا من القائمة: Object > Transform > Shear option ألغِ لون التعبئة للنص وأضف حدودًا سوداء مستخدمًا ذات الحجم 5pt مع النهايات المستديرة والزوايا المستديرة أيضًا. بالزر الأيمن اختر Convert to Outlines. ارسم دائرة صغيرة وقصّ المسار باستخدام أداة المقص Scissors tool في الجزء العلوي الأيسر. استخدم أداة التحديد المباشر Direct Selection tool لحذف المسار من النقطة السفلية إلى هذا القطع الجديد. اصنع نسخًا عديدة من هذا الشكل الأخير مع تعديل أحجامها وذلك لتعبئة المساحات الفارغة داخل الدائرة لتكوين فوهات وفتحات الكوكب. حدّد الدائرة الرئيسية للكوكب وانسخها CMD+C ثم ألصقها في المقدمة CMD+F. استمر بالضغط على ALT أثناء تمديد وضغط الشكل لتشكيل الحلقة حول الكوكب. ضاعف هذا الشكل الأخير وصغّر حجمه قليلًا بشكل يوازي الأصلي. ارسم شكلًا بيضويًّا في مكان ما على لوح الرسم ثم اسحب النقطة العلوية للأعلى باستخدام أداة التحديد المباشر Direct Selection tool لتمديد الشكل. استخدم أداة Convert Anchor Point tool الموجودة ضمن أدوات القلم لإزالة مقابض البيزير وترك النقطة حادة. أضف دوائر أخرى إلى الشكل لبناء شكل صاروخ بسيط. استخدم لوحة المحاذاة Align panel لتوسيط جميع العناصر مع جعل شكل جسم الصاروخ العنصر المفتاح عبر منحه نقرة إضافية. اصنع نسختين من الصاروخ وعدّل حجمها ودوّر كل صاروخ وضعهُ في موقعه في مدارٍ حول الكوكب مع جعلها أكبر في كل مرّة. التصميم يحوي العديد من المسارات المتداخلة فوق بعضها لذلك دعونا ننشئ المزيد من نماذج أنماط لافتة النيون. حدّد دائرة الكوكب الرئيسية ثم اذهب للقائمة: Object > Path > Offset Path ثم أدخل القيمة 3mm. انقر بالزر الأيمن على المسار الإضافي الجديد واختر Make Guides. تأكد من ظهور الأدلة عبر الضغط على CMD+; ومقفلة عبر الضغط على CMD+Alt+; استخدم أداة المقص Scissors tool لقص مسارات حلقات الكوكب في موقع تقاطعها مع الأدلة الجديدة. استخدم الأدلة الذكية Smart Guides عبر الضغط على CMD+U لتُسهّل عملية مطابقة هذه المنطقة. على الجانب الآخر فإن حرف P يتقاطع مع حدود الكوكب أيضًا لذلك ألغِ تجميع النص Ungroup من أجل تحديد هذا الحرف فرديًّا ثم أضف مسار إضافي بقيمة 3mm. الحرف P بشكل خاص بحاجة لخطوة إضافية من أجل إنشاء الأدلّة. انقر بالزر الأيمن ثم اختر Release Compound Path ثم احذف الجزء الداخلي قبل تحويل الخطوط الرئيسية إلى أدلّة. قص حلقات الكوكب عند تقاطعها مع المسار الإضافي لحرف P ثم احذف الأجزاء غير المرغوبة من المسارات. سنستخدم ذات التقنية في كل التصميم لإزالة جميع المسارات المتقاطعة ولكن بالنسبة للجزء السفلي من الحلقة فإن النص هو من يحتاج للتعديل للسماح للحلقة بالالتفاف حول الكوكب. ألغِ تجميع Ungroup عناصر النص الأخرى وأضف مسار إضافي للحرف الأول والأخير ثم أنشئ أدلّة من النتائج. تذكّر أن تحرر المسار المركب لحرف P ليصبح قابلًا للتحول إلى دليل. استخدم هذه الأدلة الجديدة لقص أي مسارات متداخلة مع بعضها وأزِل التداخلات في كل أنحاء التصميم. بالنسبة للمنطقة التي يتداخل فيها النص مع الحلقة سنحتاج إلى أدلة إضافية من مسارات الحلقة نفسها. استخدم أداة المقص Scissors tool لقص وحذف مناطق تواجد الحروف تحت الحلقة عبر خطوط الأدلة. من الضروري في بعض الأحيان تحرير المسارات المركبة للحروف من أجل تحديد وحذف الأجزاء غير المرغوبة من المسار. بعد إزالة جميع المسارات المتداخلة سيكون التصميم قد أخذ شكلًا أكثر واقعية كلافتة نيون. حدّد المسارات التي تُشكّل جزءًا محددًا وامنحها ألوانًا برّاقة للحدود كالأزرق، الأحمر، الأصفر والأبيض. افصل الألوان المختلفة داخل طبقاتها الخاصة عبر استخدام القائمة: Select > Same > Stroke Color ثم انسخ التحديد وألصقه في المقدمة. وضع الأجزاء التي ستكون متحركة في طبقات خاصة بها كالعناصر التي تُكَوِّن الصواريخ الثلاثة. اذهب إلى القائمة: File > Export وضع نوعية الملف PSD Photoshop وتأكّد من تفعيل خيار Write Layers. افتح الملف الذي تم تصديره من برنامج الإليستريتور في برنامج الفوتوشوب ووسِّع حجم العمل قليلًا. لوِّن الخلفية بالأسود وأضف خامة جدار الطوب. حدّد كل طبقات عناصر لافتة النيون ثم اضغط CMD+J لمضاعفتها ثم اضغط CMD+E لدمجها في طبقة واحدة. أعِد تسمية هذه الطبقة 'Off'. أضف سلسلة من أنماط الطبقة لجعل هذه الطبقة تبدو كالأنابيب بدون إضاءة، أي (تراكب لوني) Color Overlay، (توهج داخلي) Inner Glow و (الظلال) Drop Shadow. ضع هذه الطبقة أسفل جميع الطبقات بحيث لن تكون ظاهرة أثناء إضاءة العناصر وستظهر أكثر في العناصر المتحركة حيث ستنطفئ هذه العناصر عدة مرات. شَغِّل طبقة النيون الأولى عبر سلسلة من أنماط الطبقة. أضِف التوهُّج الداخلي لإضافة الأبيض البرّاق إلى المركز، والتوهُّج الخارجي لإطلاق الهالة الملونة، تليها المزيد من الظلال لتراكب التوهُّجات بأحجام مختلفة. كل هذه الأنماط للطبقات تُنتِج تأثيرًا واقعيًّا إلى حد كبير مشابهًا لإضاءة النيون وتأثيرات التوهُّج والتفاعل مع خلفية جدار الطوب. انسخ وألصق نمط الطبقة إلى الطبقة التالية ثم عدّل إعدادات التوهُّج حتى تناسب لون العنصر. وفّر الوقت عبر نسخ نمط الطبقة إلى باقي الطبقات التي تحمل ذات اللون. لافتة النيون ستبدو رائعة عند الانتهاء من وضع كافة أنماط الطبقات ولكننا سنضيف بعض الحركة على التصميم. اجمع عناصر كل صاروخ معًا بحيث سيكون من السهل تشغيل وإيقاف أي صاروخ أثناء الحركة. أظهر لوحة Timeline من قائمة Window ثم أنشئ إطار جديد New Frame Animation. في هذا الإطار الأول ستكون اللافتة متوقفة عن العمل لذلك سنُظهر فقط الطبقة الداكنة مع خلفية جدار الطوب. عدّل المدة الزمنية لهذا الإطار الأول إلى ثانية واحدة. أضف إطار جديد تظهر فيه أول طبقة نيون. لا تضف أي زمن لظهور هذا الإطار وبذلك سيظهر هذا الضوء على الفور. أضف إطارين بعدها بدون مدة زمنية لإضافة الأضواء الحمراء والزرقاء بحيث ستضيئ اللافتة تباعًا بسرعة. في الإطار التالي أظهر طبقة الصاروخ الأول مع جعل المدة الزمنية لعرض هذا الإطار ثانية واحدة. في الإطار التالي أخفِ الصاروخ الأول وأظهر الثاني لإعطاء الانطباع عن حركة الصاروخ. أضف إطار جديد للصاروخ الثالث من أجل إظهاره وإخفاء الصاروخ الثاني. ضاعف هذه الإطارات الثلاثة الأخيرة لتُطيل مدة الحركة. أو بدلًا من ذلك يمكن جعل هذه الطبقات الثلاثة تضيء باستمرار إلى ما لا نهاية بدون وجود الطبقة الأولى للافتة المتوقفة عن العمل. قم بتصدير العمل كملف GIF من خلال Save for Web أو أرسله إلى برنامج تعديل فيديو لتصنع حركة مستمرة أفضل. ترجمة -وبتصرّف- للمقال: How To Create an Animated Neon Sign Effect لصاحبه: Chris Spooner.

سنتعلم في هذا الدرس كيفية تصميم رُقعة مُطرّزة فيها نص مُطرّز في برنامج أدوبي إليستريتور. يُعتبر هذا الدرس من دروس المستوى المتوسط في هذا البرنامج، حيث سنستخدم عدة تأثيرات وفلاتر بالإضافة إلى أننا سنتعامل بشكل رئيسي مع لوحة المظهر، اتبع التعليمات خطوة خطوة حتى تصل إلى النتيجة النهائية مع العلم أنه بإمكانك تبديل بعض ملامح التصميم مثل نوعية الخط والألوان والأحجام. افتح ملفًا جديدًا ببرنامج الإليستريتور ثم استخدم أداة النص Type tool واكتب النص الذي تريده، أنا استخدمت عنوان (أكاديمية حسوب)، اختر نوعية الخط التي تناسبك ولكن الأهم أن يكون الخط عريضًا حتى تتمكن من إدراج خطوط التطريز بداخله، اخترتُ هنا خط Neckar العريض بحجم 125. ألغِ ألوان التعبئة والحدود للنص ثم افتح لوحة المظهر Appearance panel فإن لم تكن ظاهرة لديك فستجدها ضمن قائمة Window. من القائمة الموجودة في أقصى الزاوية العليا اليمنى من لوحة المظهر اختر خيَار تعبئة جديدة New Fill ولا تغيّر اللون الأسود الافتراضي الذي سيظهر على النص بعد هذه الخطوة. كرر العملية وأنشئ تعبئة جديدة بنفس الطريقة المُتّبعة في الخطوة السابقة ثم حدد التعبئة الجديدة وبدّل لون التعبئة من الأسود إلى اللون البني. حدّد التعبئة البنية من لوحة المظهر ثم اذهب إلى القائمة: Effect > Convert To Shape > Rounded Rectangle حدد الخيَار Relative واضبط العرض عند 7mm والارتفاع عند 4mm ونصف قطر الزاوية عند 5mm ثم انقر OK. هذه العملية ستُنشئ البنية الأساسية للرُقعة لذلك احرص أن يكون هناك مساحة كافية لوضع خيوط التطريز. مع بقاء التعبئة البنية محددة في لوحة المظهر اضغط على زر المضاعفة Duplicate الموجود أسفل لوحة المظهر. حدد التعبئة الجديدة في الأسفل وبدّل لون التعبئة إلى اللون الرمادي. تأكّد من تحديد الطبقة الرمادية ثم اذهب إلى القائمة: Effect > Path > Offset اضبط قيمة Offset عند 2mm. البُنية الأساسية والشكل العام للرقعة أصبح جاهزًا وسنعمل الآن على التفاصيل التي تتعلق بخيوط التطريز، التدرجات اللونية والظلال. اذهب إلى لوحة المظهر وحدّد التعبئة السوداء الأولى ثم لوّنها بتدرج لوني من الرمادي الفاتح إلى الأبيض باستخدام لوحة التدرجات Gradient panel ومن ذات اللوحة ضع زاوية التدرج -90 درجة. من القائمة المنبثقة من لوحة المظهر اختر حدود جديدة New Stroke. بدّل اللون إلى الرمادي واضبط حجم الحدود عند 1mm وفعّل Dashed Line ثم ضع قيمة أول Dash عند 3pt. اذهب إلى القائمة: Effect > Path > Offset ثم اضبط قيمة Offset عند -0.8mm ثم انقر OK. حدّد التعبئة الأولى ذات الألوان الباهتة في لوحة المظهر وضاعفها ثم حدد التعبئة الجديدة ولوّنها بلون واحد رمادي فاتح ثم اذهب إلى لوحة الشفافية Transparency panel وبدّل خصائص المزج لهذه التعبئة إلى Multiply. اذهب إلى القائمة: Effect > Distort & Transform > Transform واضبط قيمة التحريك العمودي Vertical Move عند 1mm. حدّد التعبئة البنّية من لوحة المظهر واستبدل اللون البنّي بتدرج لوني من البنّي إلى البنّي الفاتح مع جعل الزاوية -90 درجة. من لوحة المظهر أضف حدودًا جديدة New Stroke ثم اذهب إلى القائمة: Effect > Convert to Shape > Rounded Rectangle اضبط العرض الإضافي عند 4mm والارتفاع الإضافي 1mm ونصف قطر الزاوية 5mm. استبدل لون هذه الحدود باللون الأصفر الفاتح ثم اضبط حجم الحدود عند 1.5pt واضبط الخط المُتقطّع عند 12pt. حدّد الحدود الصفراء ثم ضاعفها. والآن حدّد الحدود الجديدة واذهب إلى القائمة: Effect > Distort & Transform > Transform اضبط قيمة التحريك العمودي عند 0.6mm . استبدل اللون الأصفر باللون الرمادي الفاتح ثم غيّر خصائص المزج إلى Multiply. حدّد آخر تعبئة من الأسفل في لوحة المظهر ولوّنها بتدرج لوني من الرمادي إلى الرمادي الفاتح مع زاوية -90 درجة في لوحة التدرجات. تأكّد من أنك لا تزال تُحدّد ذات التعبئة ثم اذهب إلى القائمة: Effect > Stylize > Drop Shadow. وفي نافذة الظلال التي ستظهر اضبط Opacity عند 50% وX Offset عند 0 وY Offset عند 2mm وBlur عند 1mm . وبهذا ننتهي من تصميم رقعة بتأثير نصّي مُطرّز باستخدام التأثيرات والفلاتر ببرنامج الإليستريتور. إن إضافة التدرجات اللونية للرقعة بشكل عام وكذلك الظلال للرقعة والخيوط منح التصميم لمسة واقعية وجمالية خاصة. والآن يمكنكم استخدام هذا التصميم بعد تصديره بصيغة PNG في أي صورة لأي نوع من الألبسة والقبّعات باستخدام برنامج فوتوشوب، أو يمكن استخدامه في مواقع الإنترنت كنوع من الشعار أو الإعلان. أرجوا أن تكونوا قد استفدتم من الدرس وأن تكون قد وصلتكم المعلومة المفيدة وأن تجربوا تنفيذ مثل هذا التصميم وتشاركونا نتائج أعمالكم.

اتبع الخطوات في هذا الدرس لإنشاء شخصية قزم الإنترنت الغاضب. سنبدأ العملية بمخطط مرسوم بقلم رصاص عادي ثم سنحوّل المخطط إلى خطوط فكتور ثم سنلوّن المخطط وبعدها سنضيف الظلال الأساسية لنصنع هذه الشخصية الكرتونية المضحكة. تتألف عملية التصميم من أربعة خطوات أساسية. الأولى هي رسم أساس الشخصية بالقلم الرصاص، ثم سيتم تحويل المخطط المرسوم إلى مخطط رقمي بنمط الفكتور ثم سيتم تلوينه وبعدها سيُضاف إليه الظلال الأساسية لتمنح التصميم الحيوية. هذه الشخصية بدأت كمخطط مرسوم بالقلم الرصاص على ورقة. وعلينا أن نتعاون لإخراج الصفات المشتركة والخصائص النمطية لشخصية القزم الخرافية وفِعل تصفح الإنترنت، حيث أن المخطط الأساسي يوضح قزمًا قبيحًا يتراخى فوق كمبيوتر محمول صغير. وبما أن تصميم هذه الشخصية متناظر فيمكننا رسم نصف الشخصية ومن ثم نسخ النصف الآخر وعكسه للحصول على التصميم الكامل. استخدم أداة القلم Pen tool لترسم مسارًا حول الشخصية في طبقة جديدة. تذكر أن ترسم مسار لنصف الشخصية فقط بحيث نستطيع فيما بعد نسخ المسار وعكسه لإبقاء الشخصية متناظرة. ابدأ مسارًا جديدًا وتتبع الخطوط الخارجية لوجه القزم. يمكن أن تقوم بالنقر على النقاط وتحريك المقابض لإنشاء منحنيات ناعمة، أو يمكنك النقر على نقطة مفتوحة لإزالة مقابض البيزير من أجل زاوية حادة. انسخ CMD+C وألصق في المقدمة CMD+F نسخة عن الخطوط المرسومة ثم اذهب للقائمة: Object > Transform > Reflect ضع النسخة المعكوسة في الجهة المقابلة ثم حدد وقم بوصل النقاط المفتوحة باستخدام أداة التحديد المباشر Direct Selection Tool لتُكوّن أشكال كاملة. ارسم التفاصيل الداخلية للشخصية بمسارات مفتوحة. غالبًا سوف تتداخل هذه الخطوط مع مسارات أخرى في النهاية. ارسم العينين لإنهاء ملامح الوجه. بعض الأشكال مثل بؤبؤ العين يمكن رسمها باستخدام الأشكال الأساسية مثل الدائرة ثم قصها ضمن مجال حجم العين باستخدام أداة المقص Scissors tool. بعد الانتهاء من رسم الخطوط كلها نستطيع أن نُميّز جميع التفاصيل بأحجام متنوعة للحدود. ويمكن البدء بحجم 7pt للحدود الخارجية. ارسم مسارات قصيرة كمنحنيات وضعها بالقرب من الحدود الرئيسية لإضافة العمق والأبعاد للعمل الخطي. في مكان آخر من لوح الرسم ارسم دائرة صغيرة اسحب النقطة اليمنى أفقيًّا ثم انقر على أيقونة "New" أسفل لوحة الفرش Brushes palette. اختر خيَار Art Brush. ارسم مسارات قليلة وطبّق الفرشاة لإنشاء مجموعة من الشعيرات الصغيرة على رأس القزم. اضبط حجم الحدود للخطوط المتنوعة بحيث تصبح أنعم للعناصر ذات التفاصيل الأدق. استخدم حجم 4pt لخطوط الوجه والذراعين، 2pt لملامح الوجه و1pt للتفاصيل الدقيقة كالقميص والحدود الخارجية لقزحية العين. أنشئ طبقة جديدة تحت طبقة العمل الخطي، حيث ستكون هذه طبقة الألوان. ارسم بشل تقريبي الحدود حول الذراع مع المحافظة على لون الحدود الأسود. أعطِ هذا الشكل تدرج لوني أخضر. كرّر العملية مع باقي أجزاء جسم الشخصية الظاهرة مع التدرج اللوني الأخضر ثم اضبط اتجاه التدرجات اللونية بشكل أنيق. كرّر العملية ولكن هذه المرة استخدم تدرج الرمادي الخفيف إلى الأبيض. ارسم مسارات حول القميص والعيون والأسنان. أنشئ طبقة جديدة وأطلق عليها اسم "Shading" حيث سنضع الظلال في هذه الطبقة. استخدم أداة القلم لرسم مساحة سوداء في مناطق تواجد الظلال وأنهِ هذه الأشكال بمسارات ناعمة بالقرب من المناطق الداخلية للشخصية. أضف المزيد من الظلال للوجه والجسم ثم بدّل خصائص الشفافية إلى Multiply عند 10%. هذه الأشكال البسيطة منحت الشخصية الكثير من الحيوية والحياة. أضف خلفية تحت الشخصية برسم مستطيل كبير ملوّن بتدرج لوني من الرمادي إلى الأبيض. هذه الشخصية لن تكتمل بدون تعليق ازدرائي. هنا استخدمت الخط المجاني المُسمّى Feast of flesh. أضف بعض الانحناء والتلاعب بالنص عبر الذهاب للقائمة: Object > Envelope Distort > Make with Warp اضبط الإعدادات إلى Shell Upper مع انحناء 50%. طبّق تدرجًا لونيًا رماديًا مع حدود سوداء على النص لمنحه نمطًا مطابقًا لنمط الشخصية. هذا العمل على وشك الانتهاء. ولكن هناك بعض الأعمال البسيطة على ملامح الوجه التي يجب علينا القيام بها. حدد حدود الجبين واذهب للقائمة: Object > Expand حدد فقط خَيَار Stroke. استخدم أداة التحديد المباشر Direct Selection tool لتحريك بعض النقاط المعينة برفق لإضافة بعض التغيير في عرض الحدود. كرّر العملية مع الخطوط المُشكّلة للأنف. بعض النقاط يمكن تحريكها لإنشاء زوايا حادة في مكان الزوايا المربعة الأصلية. الاختلاف الصغير في السماكة البسيطة أضاف مستوى جديد في العمق والتفاصيل لدى المقارنة مع الخطوط الأساسية. اكتمل تصميم شخصية قزم الإنترنت الغاضب. التقنيات البسيطة للخطوط المتنوعة والتدرجات اللونية والظلال الأساسية ساعدت على إضافة العمق والتوضيح الذي منح هذه الشخصية الحيوية والحياة. ترجمة -وبتصرّف- للمقال: How To Create a Grumpy Troll Character in Illustrator لصاحبه Chris Spooner.

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

اللوموغرافي أو تأثير اللومو منتشر بشكل واسع في أوساط عالم التصوير الفوتوغرافي. تعود أصول تسمية تأثير اللومو إلى الكاميرا الروسية الاقتصادية Lomo LC-A. ولكن بإمكاننا تطبيق هذا التأثير على مجموعة صورنا الرقمية باستخدام كاميرتنا العادية الرخيصة باستخدام برنامج فوتوشوب. تابع معي هذا الدرس خطوة خطوة للعمل على برنامج فوتوشوب وتعديل خصائص تأثير اللوموغرافي الحيوية. ولأقدّم تعريفاً بسيطاً وواضحاً فإنّ اللوموغرافي هو تصوير فوتوغرافي يعتمد على درجة عالية من التشبّع اللوني بجودة ودقة منخفضتين. تأثير اللومو على الصور إنّ الصناعة السيئة لكاميرا Lomo LC-A وللكاميرات الاقتصادية المشابهة تسبب غالباً تبايناً عالياً غير عادي، صبغة ألوان مبهمة، تَشَبّع شديد وأحياناً قد تكون شديدة الضبابية. عادة ما ستعتبر هذه الصورة فاشلة في حالة التصوير النموذجي الاعتيادي ولكن مع وضع تأثير اللومو في الاعتبار فستصبح لهذه الصور غير الاعتيادية بسحرها وطابع كاميراتها ميزة خاصة ولها معجبوها وأنصارها حول العالم. تأثير اللوموغرافي في الفوتوشوبافتح صورة من اختيارك لنطبّق تأثير اللوموغرافي في الفوتوشوب. أنا اخترت صورة لشاحنة قديمة صدئة من موقع ThinkStock. إنّ صور اللومو غالباً ما تكون مصبوغة بألوان غير اعتيادية من الأزرق، الأخضر والأصفر، يمكننا أن نقلّد هذا التأثير في الفوتوشوب عبر تطبيق خريطة تدرّجات Gradient Map من قائمة تعديل الطبقة Adjustment Layer ثم تغيير التدرّج ليبدأ من الأزرق الداكن 030629 # إلى أزرق وسطي 1f6393 # إلى أخضر فاقع 14e2af #.هذه الألوان ستطبّق على الظلال shadows، الألوان الوسطية midtones والإضاءات highlights في الصورة. غيّر خصائص المزج لطبقة خريطة التدرّج Gradient Map إلى Overlay. هذا سيسمح للألوان الزرقاء والخضراء بالتفاعل مع الألوان الأصلية للصورة للحفاظ على بعض المظاهر الطبيعية، ولكنها لا تزال تعطي الصورة إشباع لوني مبهم وهو تأثير تصوير اللومو. غيّر قيمة opacity لتغيّر من كمية تعديلات الألوان. لدى صور اللومو تباين عالي وهائل بحيث تصبح الظلال داكنة إلى أبعد حد والاضاءات تصبح بارزة جداً. قم بتطبيق هذا التأثير مجدداً في الفوتوشوب باستخدام طبقة تعديل المنحنيات Curves adjustment layer. حرك المنحني لزيادة الظلال والإضاءات. أنشئ طبقة جديدة وقم بتعبئتها باللون الأسود. عدّل اسمها إلى "Vignette" ثم استخدم أداة التحديد البيضوي Elliptical marquee لرسم تحديد من الزاوية وحتى الزاوية. اذهب إلى القائمة: Select > Modify > Feather وأدخل قيمة 100 بيكسل لنصف القطر. هذا سيسبب تلاشي حدود التحديد وهو عكس إنشاء حواف قاسية للتحديد. اضغط على delete لمسح المنطقة الوسطى من التحديد لإضفاء تأثير الصورة الرمزية المصغرة ابتداءً من حواف الصورة. غيّر خصائص المزج إلى Multiply وعدّل opacity إلى 80%. آخر مزايا اللومو التي سنضيفها هنا هي الضبابية الغريبة. اضغط CMD+A لاختيار الجميع ثم CMD+Shift+C لنسخ نسخة مدمجة. ألصق هذا التحديد على طبقة جديدة فوق جميع الطبقات ثم أضف فلتر Gaussian Blur بقيمة 3 px. نحن لا نريد تطبيق الضبابية على كامل الصورة لذلك سنضيف طبقة قناع Layer Mask إلى طبقة الضبابية وارسم شكلاً بيضوياً حول المركز. طبّق Feather على التحديد ثم قم بتعبئة المساحة باللون الأسود لتحقيق الشفافية بحسب طبقة القناع. الصبغات الزرقاء والخضراء، التباين العالي والضبابية الجزئية كل هذه الخصائص تُحاكي وتقلّد تأثير كاميرا اللومو القديمة. إنّ استخدام الكاميرات التقليدية المشابهة لهذا التأثير ستنتج صوراً بتأثيرات مختلفة غير متوقعة وستعتمد على الحظ في الحصول على الصورة المثالية بينما يتيح لك فوتوشوب اختيار الصور التي تريد تطبيق هذا التأثير عليها وتعديل خصائص هذه التأثيرات كما تشاء حتى تكون راضياً عن النتيجة النهائية وتحصل على تأثير اللوموغرافي المثالي الذي تريده. ترجمة -وبتصرّف- للمقال: How To Create a Lomography Photo Effect in Photoshop لصاحبه Chris Spooner.

توجد الكثير من الطُرق لتغيير لون الأعيُن عن طريق برنامج الفوتوشوب ومنها ما سنراه في هذا الدرس. سنقوم في هذا الدرس بتغيير لون عين طفل من الأزرق إلى الأخضر وهذه هي النتيجة النهائية بعد تتبع جميع الخطوات: نجلب الصورة التالية إلى المشروع: نبدأ بفتح الصورة السابقة كما هو موضح بالصورة التالية عن طريق الذهاب إلى القائمة: File > Open نقوم بتكرار الطبقة الخاصة بصورة العين عن طريق الضغط على Ctrl + J أو ضغط على الزر الأيمن للفأرة واختيار الخيار التالي: أولاً يجب تحديد الجزء المراد تغيير لونه؛ أبسط أداة يُمكن استخدامها هي أداة Elliptical Marquee Tool والتي يمكن تفعيلها كما بالصورة أدناه: نتوجه إلى أقصى العين اليمنى كمثال؛ نضغط على الزر الأيمن للفأرة ونبدأ بسحب التحديد إلى جهة اليسار: نُكمل السحب حتى نصل إلى نهاية العين المراد تغيير لونها: الآن نبدأ بتغيير لون العين، ومع ابقاء التحديد توجه إلى القائمة: Image > Adjustement > Hue/Saturation ستفتح لك نافذة فيها ثلاث قيم؛ أولا تأكد من التأشير على خيار Colorize ثم ابدأ بتغيير القيم الموجودة إلى اللون الذي تريد ان يتم تطبيقه: اضغط Ok بعد الإنتهاء وستلاحظ تغير لون العين. قد تظهر لك مشكلة ان اللون أكبر من منطقة العين كما بالصورة التالية:  لحل هذه المشكلة قم بعمل قناع أو Mask على الطبقة العٌلوية كما بالصورة التالية: ستلاحظ ان مربعاً صغيراً قد تم انشائه بالجهة اليُمنى:  توجه إلى قائمة الفرش واختر الفرشاة الناعمة مع تخفيف الشفافية إلى قيمة أقل من 50%: بعد اختيار الفرشاة تأكد من اختيارك للون الأسود و أنك تعمل على الطبقة العلوية. ثم ابدأ بمسح الأجزاء التي قد تكون حدودها واضحة؛ ستلاحظ اختفاءها بشكل تدريجي وهذه هي النتيجة النهائية:

سنتناول في هذا المقال "أساسيات الوزن البصري لمُصمّمي الجرافيك والمُصورين"، وهي الطريقة الصّحيحة والأكثر دقة لتوزيع التصميم أو الصّورة أو شكل المُنتج، ويُعدّ هذا المُصطلح مُهمًّا ويعلب دورًا أساسيّا في أي شكل من أشكال الفنون. يعني ذلك تسليط الضوء على المحاور الرّئيسية لأي عمل بهدف مُطابقة ذوق ومزاج النّاظر من جهة وتحقيق التّناغم والانسجام من جهة أخرى. ما أطلقنا عليه الوزن البصري أو التّشكيل Composition هو المُصطلح اللاتيني الأصل compositio والذي يعتمد على فكرة تآلف العناصر فيما بينها. لنخرج عن جانب التشويق قليلًا ونتحدث عن المضمون ما هو الوزن البصري في التصميم؟الوزن البصري بمفهومه العام موجود في كل فردٍ منّا وبدرجات مُختلفة مُتفاوتة. وبطريقة أخرى يُمكن التّعبير عن هذا المفهوم بأن الأشخاص بالعموم لهم ذات التناغم، الاستقامة، الانسجام... الوزن البصري في التّصميم، في الصور، في اللوحات المرسومة وأيضًا في التّصوير الفوتوغرافي تحمل ذات المفهوم. مثلما هو عليه الحال مع الوزن في الموسيقى والأدب والشّعر فإنها تحمل المفهوم ذاته من التّناغم والانسجام لكن بأشكال أخرى. من يعمل في المجال الفنّي خُصوصًا فإنّه يسعى في العادة إلى التّوصل إلى أقصى نتيجة من الوزن المُتناغم المُنسجم ليُعبّر أفضل تعبير عن عمله. من المُلفت ذكره بأن عموم الناس وخلال القرون السّابقة قاموا بإبداع العديد من الأعمال الموزونة (أعمال مُتضمنة العمل الفني) دون أن تكون لديهم علم مُسبق بذلك. سنحدثكم في هذا المقال عن أساسيات الوزن البصري مُستخدمين أبسط التعابير المُمكنة لإيضاح الفكرة والابتعاد عن أي تعقيد. من الطبيعي أن أي جسم في الطبيعة يُلائم أحد الأشكال الأساسية الثلاث: المُستطيل، المثلث والدائرة، لذلك سنركّز حديثنا وعملنا عليها. بالإمكان اعتبار الوزن البصري على أنه بمثابة التّرتيب الصحيح لعناصر الصورة وذلك بالاستناد إلى دراسة الإدراك البشري للمعلومات البصرية. سنناقش أساسيات الوزن البصري في التّصميم، الفنون الجميلة والتصوير الفوتوغرافي. المراكز الهندسية والوزنية، أهم الأدوات في مركزيّة الوزن البصري، تنظيم وترتيب الوزنسنبدأ مُباشرة بالتطبيق على سطح عمل (بالإمكان استخدام صورة أو ورقة أو بالرسم مُباشرة عبر الحاسوب). نقوم برسم قُطرين مُتقاطعين ونُحدّد نقطة التقاطع الهندسية كما هو واضح في الصورة. سوف نُلاحظ بما لا يدع مجالًا للشّك بأن أي جسم سيتم وضعه في المركز سيكون واضحًا منذ الوهلة الأولى. يُستعمل المركز الوزني ببساطة لتركيز انتباه المُشاهد على تفاصيل مُعيّنة في البُنية. في التصوير الفوتوغرافي واللوحات الزيتيّة والرسم كقاعدة، نُخصّص على الدوام مراكز عينيّة واضحة للفت الانتباه. في الإعلان على سبيل المثال فإن ما دعوناه بمركزية الوزن يكون مُفيدًا بشكل كبير للفت انتباه المُشتري المُحتمل إلى معلومات مُثيرة قد تكون على هيئة نصّ أو صورة. وهنا تجدر الإشارة إلى أن مركز الوزن قد لا يكون مُتناسقًا (أي قد لا يتطابق المركز الوزني مع المركز الهندسي)، فقد تكون لدينا عدة نقاط وزنية ومركز هندسي واحد. مركز الوزن يظهر بشكل واضح في الحالات التّالية: مُقارنة بين الفاتح والغامق (الضوء والظل). مُقارنة بين الألوان الحجم الشكل في الفنّ الكلاسيكي، وكقاعدة عامّة، تتعلّق مركزية تشكيل الأجسام بالخلفيّة، وتعمل الواجهة الأمامية كمُقدّمة لإلقاء نظرة على الحدث الرئيسي (يُقصد بالحدث الرئيسي الأمر الأساسي المُركّز عليه) حيث يأخذ العمل مجراه. إذاً فالمُحتويات الكليّة للعمل في الخلفية وقاعدة الأثلاث (التي سنشرحها بالتفصيل لاحقًا في سياق المقال) تُتمّم الموضوع. مُلاحظة: يجب أن تكون الخلفيّة مُتمّمة للعمل بالكامل، فلو أخذنا على سبيل المثال صورة قطة ودمجناها مع خلفية مُتمثّلة في صورة بركان، فإنما ينتج هو -بكل تأكيد- خلل بصري واضح. المفاهيم الأساسية وقواعد الوزن البصري؟الخطوط المائلة في الوزن البصري: كما سنلاحظ أعلاه فإن الرّسم البياني على اليسار صاعد، والرّسم البياني على اليمين هابط، هل تعتقد بأن هذا التّموضع حدث بالصُدفة؟ بحسب الوزن البصري فإن بداية الخط المائل (السهم المائل) من الزّاوية السُفلى على اليسار إلى الأعلى نحو اليمين يُقدِّم مُلاحظة وإدراكًا أفضل من الحالة الثّانية التي انطلق فيها السّهم من الزّاوية العُليا اليُسرى مُتّجهًا نحو الأسفل كما هو الحال في الرسم الأيمن. الوزن البصري المُغلق والوزن البصري المفتوحفي الوزن البصري المُغلق يتّجه تمركز الخطوط نحو الدّاخل، وهذا النوع مُناسب لتصوير الأشياء الثّابتة (المُستقرة – غير المُتحركة). فالعناصر هُنا لا تبتعد عن السّطح إنما تسعى إلى مركز الوزن البصري، وتحقيق ذلك بسهولة يتم باستخدام التّأطير وعبر تنسيق العناصر فيما بينها (الأشكال الهندسية في الصّورة) بحيث تُشير جميع النّقاط إلى مركز الوزن البصري. أما في حالة الوزن البصري المفتوح يكون العكس بحيث أن اتّجاهات الخطوط تكون قادمة من المركز، الأمر الذي يُعطينا فرصة الاستمرار (عقليًا) إلى ما هو أبعد من ذلك ولذلك دُعيّ بالمفتوح، وهذا النّوع مُناسب لمساحات العمل المفتوحة والأشياء المُتحركة. النّسبة الذّهبيةالتوزيع المُختلف للعناصر في أي مُستوي قادر على خلق أحد احتمالين: إمّا صورة مُنسجمة أو مُتنافرة. التّناغم مفهوم يُعبّر عن شعور حسّي بأن موقع العناصر مُريح للناظر، ومع ذلك هُناك العديد من القواعد التي بإمكاننا دعوتها بأنها غير حسيّة. عند ملاحظتك للصّور السّابقة سوف تجد بأن مكان تموضُع الأشكال الهندسية في الصّورة التي على اليمين تبدو أكثر انسجاماً من تلك الموجودة في الصورة التي على اليسار... ولكن لماذا؟ التناغم هو أن تكون جميع العناصر مُتمّمة لبعضها البعض بشكل مُنسجم فيما بينها، مثالنا الأكبر حول هذا المفهوم هو العالم الذي نعيش فيه، وكيف أن جميع العناصر مُترابطة فيما بينها، فالحيوانات تتنفس الهواء مُستنشقة الأوكسجين ومُطلقة غاز ثاني أكسيد الكربون وتقوم النباتات بدورها باستهلاك هذا الغاز وبمُساعدة الشمس تقوم بعملية التركيب الضوئي وتُعيد الأوكسجين إلى الطبيعة.. على السياق أيضًا تتغذّى بعض الحيوانات على هذه النباتات وتُطلق بدورها السّماد التي يحتاجها النبات في غذائه وبالتّالي المُحافظة على النباتات. يتبخر الماء أيضًا لسقوط المطر وإعادة امتلاء الأنهار والمحيطات وهكذا. لا شيء في هذا العالم أكثر انسجامًا من الطّبيعة نفسها فهي مليئة بالصّور البصرية الخاضعة لقاعدتين التناسق والنسبة الذهبية. من المُحتمل أن تكون على دراية بالتناسق، لكن ما هي النّسبة الذّهبية؟ يُمكن الحصول على النسبة الذهبية لأي شكل ببساطة عبر تقسيمه إلى جُزأين غير مُتساويين تكون فيهما نسبة الطّول الكامل (c) إلى جزء منه (b) مُساويًا لنسبة نفس الجزء (b) إلى الجزء الآخر (a) (أي ناتج قسمة الطول الكلّي للخط على الضّلع الأكبر منه = ناتج قسمة الضلع الأكبر على الأصغر). الشّكل التّالي يوضّح الأمر: أجزاء هذه القطعة تُساوي تقريبًا 5/8 و 3/8 من القطعة الكُلّيّة، ووفقًا لقاعدة النّسبة الذّهبية فإن المراكز البصرية ستكون واقعة وفق الشّكل التّالي: قاعدة الأثلاث إذا أخذنا مساحة عمل وقسّمناها إلى تسعة أجزاء مُتساوية سوف نجد بأن العناصر المُتناسقة تتموضع في نقاط تقاطع الخطوط كما في الشكل أدناه، وتُعدّ هذه الطريقة من أبسط أشكال قاعدة النسبة الذهبية. ترجمة -وبتصرّف- للمقال: Basics of composition in graphic design لصاحبه Andrey Prikaznov

ما هو النظام اللوني "Color model" من المُحتمل أن كل من يعمل في المجال الإعلاني قد سمع بمُصطلحات من قبيل نظام الضوء - light model ، وعبارة "في الطباعة علينا استخدام نظام اللون CMYK بينما نستخدم النظام اللوني RGB مع المواقع الإلكترونية " وقد يعلم البعض أيضًا بوجود أنظمة لون مثل GreyScale – LAB - HSB - HLS. لكن ما هو بالضبط النظام اللوني "Color model" ؟ و كيف يعّد CMYK نظامًا لونيًّا مُختلفًا عن RGB أو LAB ؟ إننا نعيش في الضوء الطبيعي، وهذا الضوء يُمكن أن يُقسّم إلى العديد من الأشكال المُختلفة. فكما نعلم بأن أول من اكتشف هذه الفكرة كان إسحاق نيوتن، حيث عمل على تقسيم الضوء عبر المنشور "The Prism" إلى سبعة ألوان أساسيّة هي: الأحمر red – البرتقالي orange – الأصفر yellow – الأخضر green – الأزرق blue – النيلي indigo – البنفسجي violet. سوف نتحدث عن هذه الظاهرة الطبيعية لاحقًا، لكن دعونا نبدأ بالجانب الأبسط عبر تقسيمنا الضوء إلى ثلاثة ألوان أساسية. نظام اللون RGBتعتمد كل من ألوان التلفاز أو شاشة حاسوبك على مبدأ تقسيم الضوء. بالإمكان القول بشكل تقريبي بأن الشاشة التي تراها مُؤلفة من عدد ضخم من النُقاط (عددها يُحدِّد الدقة الأفقية والعمودية للشاشة) وكُل نُقطة من الضوء لها ثلاثة أزرار ("مصابيح" ضوئية دقيقة): الأحمر والأخضر والأزرق. كُل "زر ضوئي" منها يُمكن أن يشع مع الإضاءة المُختلفة، وكذلك يُمكن ألّا يشّعّ بتاتًا. إذا شعّ "الزر الضوئي" الأزرق سوف نرى النقطة الزرقاء، أمّا إذا شعّ الأحمر سنتمكن من رؤية النقطة الحمراء، وبالمثل مع الأخضر. إذا كانت جميع الأضواء مُشعّة مع سطوع كامل عند نُقطة واحدة عندئذٍ ستتحول هذه النقطة إلى الأبيض، ككل تدرجات الأبيض سوف تأتي سوية مرة أخرى. إذا لم يُشع أي ضوء فإنه سوف تظهر لنا النُقطة سوداء، حيث أن اللون الأسود هو انعدام الضوء. الجمع بين الألوان من هذه " الأزرار الضوئية الدقيقة " يتوهّج بتدرجات مُختلفة، ويمكننا الحصول على ألوان وتدرجات لونيّة مُختلفة. سطوع كُل زر ضوئي مُحدّد بالكثافة (التوزيع) من 0 "أي ضوء مُطفأ" إلى 255 "أي بكامل إضاءته". يُسمى هذا التقسيم بنظام اللون RGB اختصارًا للألوان: الأحمر Red، الأخضر Green والأزرق Blue. وبالتالي فإن اللون الأبيض في نظام اللون RGB يُمكن كتابته كما يلي: R – 255, G – 255, B – 255 أي اللون الأحمر قيمته 255 ، والأخضر قيمته 255 ، والأزرق قيمته 255 والأحمر المُشبع يُكتب كما يلي: R – 255, G – 0, B – 0 أي اللون الأحمر قيمته 255 ، والأخضر قيمته 0 ، والأزرق قيمته 0 أما الأسود:R – 0, G – 0, B – 0 أي اللون الأحمر قيمته 0 ، والأخضر قيمته 0 ، والأزرق قيمته 0 والأصفر سيكون على النحو التالي:R – 255, G – 255, B – 0 أي اللون الأحمر قيمته 255 ، والأخضر قيمته 255 ، والأزرق قيمته 0 عليك أن تعلم أيضًا بأنه لتسجيل الألوان في نظام RGB يُستخدم عادة النظام الست عشري بحيث يتم تسجيل مُؤشرات الكثافة وفق الترتيب من الشكل #RGB : الأبيض: #ffffff - الأحمر: #ff0000 - الأسود: #000000 - الأصفر: #ffff00 نظام اللون CMYKنحن الآن على علم بالطريق الصعب الذي يسلُكه حاسوبنا لإرسال اللون إلى نُقطة مُعينة. دعونا في الوقت الحالي نستخدم المعرفة المُكتسبة في مُحاولة الحصول على اللون الأبيض باستخدام الأحبار. لنقُم بشراء ثلاث علب من الأحبار: الأحمر والأزرق والأخضر ونخلط بينها. هل سينفع ذلك؟ لا لم نحصل على مُرادنا، فما هي المُشكلة إذاً؟ المُشكلة أن شاشتنا تُصدر الضوء، لذا فاللون يُشع، بينما الكثير من الكائنات في الطبيعة لا تمتلك هذه الخاصية. إنها ببساطة تعكس الضوء الأبيض الذي يسقط عليها. وإذا كان الموضوع يعكس كامل طيف اللون الأبيض، سوف تراه في الأبيض، ولكن إذا كان بعض الضوء مُمتصًّا، فسوف لن تراه بالأبيض الكامل. شيء من هذا القبيل: بإمكاننا تخفيف شدّة لون الشيء الأحمر بالضوء الأبيض. الضوء الأبيض يُمكن أن يُمثّل بـ R-255 G-255 B-255 (أي أن اللون الأحمر قيمته 255 ، والأخضر قيمته 255 ، والأزرق قيمته 255). لكن المُتلقي لا يعكس إلينا كل الضوء المُرسل إليه، فهو سيسرق منّا كُل أشكال الأخضر والأزرق. كنتيجة لذلك، سيعكس فقط R-255 G-0 B-0 (أي اللون الأحمر قيمته 255 ، والأخضر قيمته 0 ، والأزرق قيمته 0). لذا سيبدو لنا كاللون الأحمر. لذا تُعدّ هنالك إشكاليّة في استخدام نظام الألوان RGB للطباعة على الورق. للطباعة، كقاعدة عامّة، نحن نستخدم نظامًا لونيًّا آخر هو CMY أو CMYK. أما عن نظام اللون CMY فهو يستند إلى حقيقة أنه لدينا في البداية شريحة بيضاء من الورق، وهو يعكس تقريبًا طيفًا كاملًا من RGB، وكل الأحبار المُطبقة عليه تعمل كمُرشحاتfilters ، كُلٍ منها "يسرق" اللون الخاص (الأحمر أو الأخضر أو الأزرق). وهكذا يتم تحديد هذه الأحبار من خلال طرح واحد من الألوان البيضاء RGB. سوف نحصل على الألوان: Cyan (الأزرق الفاتح) ، Magenta (الأحمر الأرجواني، وبإمكاننا تسميته بالوردي) ، Yellow (الأصفر). كما تتذكرون، فإنّ التدرج اللوني لكل لون (في نظام اللون RGB) هو السطوع (من 0 إلى 255). على أية حال، إن قيمة كُل لون في نظام CMYK هو "التعتيم" (كمية اللون) وتُحدّد النسبة من 0% إلى 100%. لذا يُمكن وصف اللون الأبيض على الشكل التالي: C (cyan) – 0% ; M (magenta) – 0% ; Y (yellow) – 0% أي أن نسبة الأزرق الفاتح هي 0% ، ونسبة الأحمر الأرجواني هي 0% ، ونسبة الأصفر هي 0%) أما الأحمر يُمكن وصفه على الشكل التالي: C – 0% ; M – 100% ; Y – 100% أي أن نسبة الأزرق الفاتح هي 0% ، ونسبة الأحمر الأرجواني هي 100% ، والأصفر نسبته 100% والأخضر يُمكن وصفه على الشكل التالي:C – 100% ; M – 0% ; Y – 100% أي الأزرق الفاتح نسبته 100% ، والأحمر الأرجواني نسبته 0% ، والأصفر نسبته 100% والأزرق يُمكن وصفه على الشكل التالي:C – 100% ; M – 100% ; Y – 0% أي الأزرق الفاتح نسبته 100% ، ونسبة الأحمر الأرجواني هي 100% ، والأصفر نسبته 0% والأسود يُمكن وصفه على الشكل التالي:C – 100% ; M – 100% ; Y – 100% أي الأزرق الفاتح نسبته 100% ، والأحمر الأرجواني نسبته 100% ، والأصفر نسبته 100% ومع ذلك، ما ذكرناه بالإمكان تطبيقه نظريًا فقط، لكم في الواقع لا يُمكننا استخدام نظام الألوان CMY. حيث يتحول اللون الأسود إلى البُني المُوحل (طباعيًا)، والرمادي لن يكون رماديًا، كما أن الألوان الداكنة عمومًا لن تظهر بذات السوية. لتسوية اللون النهائي، يتم استخدام لون آخر (انظر إلى الحرف الأخير في اسم CMYK). هُناك احتمالات مُختلفة للتسمية بهذا الشكل: لاحظ بأن الحرف K هُنا اختصار للون الأسود Black وتم أخذ الحرف الأخير هُنا حتى لا يُكون هُنالك خلط بينه وبين حرف B الذي يُشير للون الأزرق في نظام RGB. عادة ما تستخدم الطابعات كلمة "Contour" في هذا اللون. لذا من المُحتمل أن الحرف K في اختصار CMYK قد أتى اختصارًا للكلمة الألمانيّة "Kontur". من المُمكن أن يكون اختصار لجُملة "Key-color" مُفتاح اللون. على أية حال، من الصعب تسميته على أنه "the key" المفتاح، إنما هو بالأحرى مُكمّل وهذا الأسود ليس أسودًا بالفعل، لأنك إذا طبعته وحده فقط ستلاحظ بأن اللون رمادي أكثر من كونه أسودًا، لذلك فإن بعض الأشخاص يعتقدون بأن الحرف K في CMYK يدل على الحرف الأول "Kobalt" (بالألمانية) إنما كقاعدة عامّة، مُصطلح اللون الأسود "black" يُستخدم لتعريف هذا اللون. والطباعة باستخدام نظام اللون CMYK يُطلق عليها اسم الطباعة بالألوان الكاملة full-color أو الثُلاثيّة triad. ما نحتاج معرفته حاليًا أنّه أثناء الطّباعة بنظام CMYK فإن الأحبار لا تُمزج، بل يتمّ إسقاطها (تُقذف) على الورق على هيئة بُقع نُقطيّة بجوار بعضها البعض، وهي تبدو لنا مُختلطة سوية بحكم أن عقلُنا سيُصوّرها لنا كذلك، بسبب أن هذه النُقاط صغيرة جدًا. إذًا فالصّورة تُنتَج بالتنقيط، ويُمكن إنتاج أي تموّج أو غباش بهذه الطريقة، وهُناك طُرق مُختلفة من التنقيط. نظام اللون Grayscale التدرج الرمادييُطلِق مُعظم الأشخاص على الصور في نظام اللون grayscale التعبير "أبيض وأسود". لكن هذا ليس صحيحًا. الصورة من النمط أبيض وأسود Black & white تتكون فقط من درجات الأبيض والأسود، في حين أن نظام grayscale لديه 101 تدرج لوني. هذا التدرج اللوني من لون الـ "Kobalt " نسبته من 0% إلى 100%. الأجهزة المُعتمدة وغير المُعتمدة على نظام لوني مُعيّنيعتمد النظامان اللونيان CMYK و RGB على الجهاز، أي أنهما يعتمدان على الطريقة التي يُنقل بها اللون. حيث أنهما يُشيران إلى جهاز مُحدّد وكيفية استخدام الألوان المُقابلة، لكن ليس لديك معلومات تُمكنك من فهم اللون الذي سيراه الشخص المُتلقي، حيث أن ذلك يعتمد على إعدادات السطوع brightness، التّباين contrast و الحدّة sharpness على شاشة حاسوبك، بالإضافة إلى الضوء المُحيط والزاوية التي تنظر بها إلى الشاشة. اللون الذي له نفس مُعلمات parameters نظام RGB ستتلقّاه بطرق مُختلفة. فهم الشخص لنظام الألوان CMYK يعتمد على عدد أكبر من الشروط، مثلًا خصائص المواد المطبوعة، على سبيل المثال، الورق اللميع "glossy" يمتص حبرًا أقل من المطفي/ المت matte، لذلك يكون واضحًا وغنيًّا بشكل أكبر. نذكر بالأخص تأثير الطلاء والرطوبة التي يتم تجفيف الورق فيها، إضافة إلى خصائص آلة الطباعة وما إلى ذلك. لنقل المزيد من المعلومات حول اللون إلى شخص ما، نُرفق له عينات من العتاد أو الأجهزة ذات أنظمة الألوان التي تعتمد عليها. كل لمحة تتضمن معلومات حول طريقة مُعينة من النقل البشري للون وضبط اللون النهائي من خلال إضافة أو إزالة أي مُكوّن من إعدادات الألوان الأصلية. على سبيل المثال، للطبع على فيلم لامع تستخدم تعريف اللون، تنظيف/مسح 10% من الأزرق الفاتح Cyan وإضافة 5% من الأصفر Yellow إلى اللون الأصلي، بسبب المميزات المُحدّدة للصحافة والطباعة والفيلم نفسه وغيرها من الشروط. ومع ذلك حتى التعاريف المُرفقة لا يُمكنها أن تحل كل مشاكل نقل اللون. الأجهزة غير المُعتمدة على نظام لوني مُعين لا تحتوي أيّة معلومات لنقل اللون إلى الشخص. إنها تصف رياضيًّا اللون الذي يتلقاه الإنسان لرؤية اللون الطبيعي. نظاما اللون HSB و HLSأساس هذا الفضاء اللّوني عجلة قوس قزح مألوفة من الفضاء اللوني RGB. يتم التحكم باللون عن طريق تغيير المُعلمات مثل اللون Hue ، الإشباع Saturation والسطوع Brightness. مُعلم درجة اللون: تُعرف بالدرجات من 0 إلى 360 مُستندة إلى ألوان عجلة قوس قزح. مُعلم الإشباع: هو نسبة الإضافة إلى هذا اللون من اللون الأبيض (له قيمة من 0% إلى 100%). مُعلم السطوع: هو نسبة إضافة الحبر الأسود، أيضاً تتنوع من 0% إلى 100%. المبدأ مُشابه لأحد مُمثلي العالم في مصطلحات الفن، وذلك عندما نضيف اللون الأسود والأبيض إلى لون موجود مُسبقًا. هذا هو السبيل الأسهل لفهم نماذج الألوان، لذا فإن العديد من مصممي الويب يحبون ذلك بشكل كبير، ومع ذلك هُناك العديد من السلبيات: العين البشرية ترى ألوان عجلة قوس قزح، كالألوان مع الإضاءة المُختلفة، على سبيل المثال، أطياف اللون الأخضر لها سطوع أكثر من أطياف اللون الأزرق، وفي نموذج اللون HSB تُعتبر جميع ألوان الدائرة أنها تملك سطوع بنسبة 100% وهو الأمر الذي يُعدّ – للأسف - غير صحيح. وكونه مُعتمدًا على نظام الألوان RGB فإنه لا يزال مُعتمَدًا على الجهاز. هذا النظام اللوني يتم تحويله إلى CMYK من أجل الطباعة ويتم تحويله إلى RGB للإظهار على الشاشة، لذا فإنه يُسبّب مُشكلة كبيرة عند تخمين اللون الذي ستحصل عليه على المدى البعيد. نظام اللون HLS مُشابه جداً ويستخدم المُصطلحات التالية: درجة اللون Hue، خفّة اللون Lightness وإشباع اللون Saturation. يُستخدم هذا النظام اللوني في بعض الأحيان من أجل الإضاءة وتصحيح الألوان في صورة ما. نظام اللون LABفي هذا النظام اللوني، يتألف اللون من: الإنارة Luminance: هذه المجموعة من المفاهيم بين الخفة والصفاء: A: هذا النطاق اللوني من الأخضر إلى الأرجواني B: هذا النطاق اللوني من الأزرق إلى الأصفر أي أن هذين المؤشرين يُحددان اللون (في المحصلة)، ومؤشر واحد يقيس الضوء. النظام LAB هو نظام لوني غير مُعتمد على الجهاز، مثلاً هو لا يعتمد على كيفية نقلنا للون، إنه يحتوي لون مثل RGB و CMYK و grayscale التي تسمح له أن يتم عملية التحويل بأقل الخسائر في دقة الصورة من نظام لوني إلى آخر. هُنالك ميزة أخرى وهي أنه على خلاف النظام اللوني HSB فإنها تُوافق ميزات التلقي للون من قبل العين البشرية. يُستخدم هذا النظام في العادة لتحسين دقة الصورة (جودة الصورة) وتحويل الصور من فضاء لوني إلى آخر. ترجمة -وبتصرّف- للمقال What is a color model

سنتعلم في هذا الدّرس كيفية عمل نص بطريقة الأوريجامي – شكل الورق المطوي – خطوة بخطوة باستعمال برنامج Photoshop . ستكون هذه نتيجة درسنا اليوم : قبل البدء ,قم بتحميل هذه الحزمة ( origami-text-photoshop.zip) ,بعد ذلك قم بفتح ملف جديد على برنامج Photoshop بالإعدادات التالية : Color Mode RVB 8Bits72 pi150x150pixelsبعد ذلك أضف طبقة بلون تدريجي وذلك بالذهاب إلى: Menu – Layer –New Fill Layer -Gradient بعد ذلك نقوم بإضافة الصّورة التّالية للمشروع : - الصورة مرفقة في الحزمة المحملة في أول الدرس – بعد ذلك نفتح نافذة خصائص الدمج Blending Options ونختار Opacity :50% و Blend Mode :Overlay الآن قم بإضافة نص باستعمال أداة النص Text Tool (الاختصار T) بحجم 170 pt و بخط ORIGAMI - الخط مرفق مع الحزمة - سنقوم الآن بإضافة ظل للنّص، وذلك بطريقة سهلة حيث ننسخ طبقة النّص Text Layer عن طريق الضغط على Ctr+J وبعد ذلك نغير لون النّص إلى أسود . بعد ذلك نطبق على النص ذو اللون الأسود مُرشّح التمويه الضّبابي Filter Gaussian Blur وذلك بالذهاب إلى : Menu –> Filter->Blur –>Gaussian Blur بعد ذلك نُحدّد قيمة الشّفافية لطبقة النص Text layer الأخير بنسبة 30% الآن، أنشء طبقة جديدة New Layer بالضغط على Ctr+Shift+N مع تفعيل خاصّيّة Use Previous Layer to create Clipping Mask بعد ذلك , نقوم بتحديد شكل مستطيل, نستعمل الأداة Rectangular Marquee tool بالضغط على M كما في الصورة : بعد ذلك نستعمل أداة "اللون المتدرج" Gradient Tool من الأسود إلى الشّفاف كما تبين الصّور : الآن نكرر نفس العملية مع باقي الحروف حتى ننتهي من الكلمة، وللعمل بسرعة نستخدم اختصارات لوحة المفاتيح : لأداة التحديد مربع الشكل Rectangular Marquee Tool نستعمل الاختصار (M)، و لأداة اللون التدريجي Gradient Tool نستعمل (G),و (E ) للممحاة Tool Eraser إن اضطررت لاستعمالها. ( في الحزمة المرفقة مع الدرس ستجد صورة لجميع الحروف لتوضيح مكان تطبيق اللون المتدرج في كل حرف ) بعدها نقوم بجعل قيمة الشفافية للطبقة Opacity Layer عند القيمة 38% الآن، نقوم بتحديد الطّبقات المُكوّنة للنّص وندمجها مع بضعها في طبقة واحدة باستخدام الاختصار Ctrl+E بعد ذلك نجلب من جديد الصّورة التالية: نقوم بعمل الصورة على شكل قصاصة للأحرف وذلك بالضغط على Ctrl+Alt+G أو بالذهاب إلى القائمة: Menu – Layer-Create Clipping Mask كما هو مُبيّن في الصّورة التّالية: بعد ذلك ,عدّل Bending Options إلى Overlay لإنهاء العمل يُمكنك إضافة أشكال مختلفة عن طريق أداة الرّيشة Pen Tool أو باستخدام الاختصار (P) وهذه نتيجة درسنا اليوم : ترجمة -وبتصرّف- للدرس Concevoir un texte en Origami avec Photoshop

في السّنوات الأخيرة ازداد الطلب على مُصمّمي تجربة المستخدم لدرجة عالية جدًا، كما ازداد عدد الكتب التي تتحدّث عن هذا الموضوع وأُضيف لهذا التخصّص قوانين، نظريات وفلسفيات من أجل تطويره وتحسينه. إذا عدنا بالزّمن للوراء إلى بداية البرامج الحاسوبية، تجد أن مهندسين البرامج ومديري المنتجات كانوا يُعلّمون بأن البرنامج إذا ازدادت ميزّاته ووظائفه ازدادت مبيعاته. هذا كان صحيحًا وذلك لأنه لم يكن السّوق مليئا بالبرامج والمنتجات التقنية مما لا يدع للمستخدم أي خيار سوى أن يشتري هذا البرنامج حتى ولو كان معقّدًا من ناحية الاستخدام. إذا نظرنا الآن نجد أنّ البرامج والحلول التقنية في أيّ موضوع بسيط، مثلا تنظيم المهام، تجد أن عدد البرامج المتوفرة قد يجاوز المائة كحد أدنى مما يجعل المستخدم أمام كثير من الخيارات ويفتح باب المنافسة لأسهل البرامج استخدامًا، أجملها واجهة وحتى أكثرها متعة. إنّ من أهم المزايا التنافسية في الشركات العملاقة في عالمنا اليوم أمثال Google ،Apple ،Microsoft ،Samsung هي تجربة المستخدم. فعلى سبيل المثال جهاز بلاك بيري، كانت أجهزة بلاك بيري هي الرّائدة في سوق الهواتف الذكية ولكن عندما دخلت Apple بجهاز iPhone الذي كان بتطبيقات وخصائص عملية أقل من البلاك بيري، استطاعت أن تحصل على النّسبة الأكبر من السوق. هناك عوامل تنافسية كثيرة بين المنتجات ولكن بالنسبة لمنتجين متشابهين وقابلين للمقارنة تجربة المستخدم من أهم العوامل. ولتوضيح الفكرة أكثر انظر مثلا إلى جهاز iPod، بشكله البسيط، الرائع، الممتع في استخدامه وطرريقة ربطه مع برنامج iTunes، ما لبث أن ينزل على السّوق حتى أحَبه الجميع، مع العلم بوجود أجهزة تؤدي نفس الوظائف الرئيسية التي يؤديها iPod. ماهي تجربة المستخدم وماذا يندرج تحتها؟ الكثير من الناس يخطئ في فهم تجربة المستخدم أو قد يختزلها في موضوع معين، فمثلا هناك من يخلط ما بين تجربة المستخدم وواجهة المستخدم User Interface أيضا هناك من يخلط ما بينها وبين سهولة الاستخدام، لا يتّسع المجال لذكر كل المفاهيم الخاطئة فلذلك سنقوم في البداية بشرحٍ بسيط لتجربة المستخدم ومن ثم نقوم بتوضيح أكثر المفاهيم الخاطئة انتشارًا. تجربة المستخدم مجمل التأثير الذي يشعر به المستخدم كنتيجة لتفاعله واستخدامه لنظام (برنامج)، جهاز أو منتج متضمنا تأثير كل من سهولة الاستخدام والمنفعة والتأثير العاطفي. مع مراعاة أن التفاعل مع المنتج يتضمن النظر، اللمس، التفكير، الإعجاب بالمنتج وصورة المنتج في ذهن المستخدم قبل تجربته. لذا يمكن القول أن كلاً من سهولة الاستخدام والمنفعة والتأثير العاطفي هي عناصر مكونة لتجربة المستخدم. ولكن ماذا يعني كل عنصر من هذه العناصر ضمن إطار تجربة المستخدم، سأقوم بكشف هذا الغموض في توضيح هذه العناصر. سهولة الاستخدام هي العنصر العملي لتجربة المستخدم ويتضمن الفعالّية، الكفاءة، الإنتاجية، المرونة، القدرة على التعلم والاحتفاظ، ومدى رضا المستخدم. المنفعة العنصر المسؤول عن مدى تحقيق الوظائف التطبيقية للمنتج لأهداف المستخدمين، بمعنى هل حقق استخدام المنتج غايات المستخدمين وأهدافهم عندما أرادوا استخدامه. التأثير العاطفي العنصر العاطفي الذي يؤثر على عواطف المستخدم بشكل عام. ولكثرة العواطف وصعوبة حصرها سنذكر أكثرها أهمية ومراعاة مثل المتعة، السرور، الاستمتاع أثناء الاستخدام، جاذبية المنتج، أصالته، الرغبة باستخدامه وإبداعيته. كما يدخل أيضا فيها المشاعر العميقة مثل التعبير، الهوية الذاتية، الشعور بالمساهمة في العالم وفخر الملكية. تجربة المستخدم لا يمكن تصميمها تجربة المستخدم هي شعور داخلي يشعر به المستخدم أثناء استخدامه للمنتج ولذلك لا يمكن تصميمها، ولكننا نُصمّم المنتجات بحيث تعطي للمستخدم هذه التجربة، أي أننا نُصمّم لأجل تجربة المستخدم ولا نُصمّم التجربة ذاتها. حتى أن الكثير من المصممين اقترحوا تغيير مصلطح مصمم تجربة المستخدم إلى مهندس تجربة المستخدم أو المخطط الاستراتيجي لتجربة المستخدم. تجربة المستخدم ليست واجهة المستخدم واجهة المستخدم UI ليست إلا واجهة يقوم المستخدم بالتفاعل معها ليقوم بالوظائف التطبيقية التي يقوم بها النظام، ووجود كلمة مصمم هي ما أدت إلى الوقوع في هذا اللبس، فظن البعض أن مصمم تجربة المستخدم مثل مصمم الواجهات أو التصميم المرئي على Photoshop مثلا. في الحقيقة مصممي تجربة المستخدم يقومون بالتصميم ولكن ليس بالطريقة المعروفة في التصميم المرئي وإنما يقومون بتصميم الشيء غير المرئي ليقوموا بحلِ مشكلة ما أو تحسين العملية الوظيفية. سهولة الاستخدام مهمة ولكن تجربة المستخدم أكثر من ذلك مع بداية تطور هذا العلم ونضجه أصبحت الكثير من الشركات التقنية تتبنّى المبادئ الهندسية لسهولة الاستخدام وتستثمر في المختبرات المعقدة وتساهم في وضع اختبارت لسهولة الاستخدام، كل هذا وبلا شك رفع من جودة المنتجات من ناحية سهولة الاستخدام إلا أنه ثبت فيما بعد أن سهولة الاستخدام ليست هي الميزة التنافسية الوحيدة بين المنتجات وظهرت هناك عوامل تنافسية أخرى فيما بين المنتجات. لذلك، بالرغم من أن سهولة الاستخدام هي من أساسات تجربة المستخدم ولكنها لا تقف فقط هنا، فالتركيز في تصميم تجربة المستخدم يعود على البشر وليس على التقنية. تجربة المستخدم ليست محصورة على البرامج والأنظمة التصميم لتجربة المستخدم ليس محصورا على البرامج أو المواقع الإلكترونية، ولكنه يضم أيضا التصميم لكافة المنتجات سواء كانت برمجية أو مادية. فمثلا، وأنت تقوم بسحب النقود من الصراف الآلي فأنت تشعر بتجربة معينة نتيجة لانتظارك في الصف، لقرائتك للتعليمات، لإدخالك البطاقة ولسحبك النقود. تخيل ماذا لو كانت نافذة الصراف الآلي أطول أو أقصر منك ماذا لو قَرَأتِ البطاقة ولم تخرجها أو أخرجت مبلغا غير الذي طلبت. ما أحاول أن أصل إليه هنا هو أن المنتجات في كل مكان ونتفاعل معها في حياتنا اليومية وانتباهك لهذه المنتجات سيحسّن من طريقة تفكيرك كمُصمم لتجربة المستخدم وسيعمّق من نظرتك للأمور. سير العملية والاستراتيجة في تصميم تجربة المستخدم بالنظر إلى تجربة المستخدم وعناصره، يتضح لنا كم هو واسع إطار تجربة المستخدم وعن كمية الأشياء الهائلة التي يمكن أن تندرج تحته، لذلك لا بد من منهجية عمل تسهل بناء المنتجات بطريقة احترافية مع المحافظة على إمكانية الإبداع فيها. في الصورة أعلاه هناك خمس خطوات لإصدار النسخة الأولية من المنتج أو البرنامج وهو ما يسمى في الشركات الناشئة بالمنتج الفعّال القاعدي (Minimum Viable Product) أما الخطوتان الأخيرتان فهما تعودان إلى ما بعد الإصدار الأول وذلك لإنه حتى نصل إلى جودة عالية في المنتج لا بد من التكرار والتحسين عليه، بناءً على التغيرات التي تحدث في العالم (تطور التكنولوجيا، زيادة المنتجات المنافسة، …) وبناءً على رُدود الفعل من المستخدمين. منهجية العمل البحث: أنت لست المستخدم النهائي للمنهج وبالتالي لا بد لك من عمليات بحث مع أصحاب العمل ومع الجمهور المستهدف والتخطيط لكيفية بناء المنتج وما التكنولوجيا المستخدمة حتى تتمكن من فهم الأهداف من وراء المنتج. وبالعادة يتم استخدام البحث النوعي أو الإثنوجرافي (Ethnography) في بداية أية مشروع. المعالجة: تقارير البحث النهائية ليست كافية لتبدأ التصميم، هناك فجوة ما بينها وما بين التصميم، لا بد من معالجة نتائج البحث بحيث يمكن ترجمتها إلى أشياء قابلة للتصميم والعمل. التصميم: هنا نبدأ بالتصميم ولكن المقصود بالتصميم ليس التصميم المرئي فقط، يتم التصميم عبر خطوات من رسم ونماذج حتى الوصول للنموذج البصري النهائي في التصميم المرئي. الاختبار: إن كان هناك أخطاء معينة في التصميم فلا بد لك من معرفتها قبل أن يكتشفها المستخدم بنفسه، لذا لا بد من التأكد هل ما تم تصميمه مفهوم وسهل الاستخدام أم هو معقد ولا يصل للأهداف المرجوة. في هذه المرحلة يتم الاختبار للتصميم الذي قمنا به مع العلم بأنه يسير بشكل متوازي مع مرحلة التصميم بمعنى أنه لا نقوم بالاختبار عندما ننتهي من الخطوة الثالثة نهائيا وإنما نقوم باختبار كل مرحلة من مراحل التصميم في الخطوة السابقة. الإصدار: في هذه المرحلة نقوم بإطلاق الإصدار الأول ولكن مع وضع المعايير التي سوف تحدد نجاح أهدافنا التي سوف نقوم بقياسها بعد أن يتم تجربة البرنامج من قبل المستخدمين، ويتم التركيز هنا على البحث الكمي. القياس: عندما يصبح لدينا معلومات عن سلوك المستخدمين وكيفية استخدامهم لمنتجنا نقوم بتحليل هذه المعلومات وترجمتها إلى مرحلة التعلم. التعلم: عندما تبدأ بقياس النتائج سيتضح لك سلوك المستخدمين الحقيقي وليس الذي افترضته، هنا تتعلم أكثر عن حاجات وسلوك المستخدمين ومن ثم تقوم بترجمة هذه المعلومات إلى تحسينات، وعادة يتم استخدام البحث الكمي والنوعي في هذه المرحلة. لمزيد من القراءة مقال 10Most Common Misconceptions About User Experience Design مقالات UX Myths كتاب The Elements Of User Experience كتاب Don't Make Me Think