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

إضافة صورة كخلفية لموقع ووردبريس قد تبدو فكرة بسيطة، لكنّها ليست كذلك، خصوصا إن لم يكن القالب الذي تستعمله يدعم هذه الخاصية. ألن يكون من الرائع أن تظهر صورة الخلفية على الشاشة كاملة (full-screen)؟ بالتأكيد سيكون من الجيد التوفر على صور خلفية مختلفة لكل تصنيف (category)، ماذا عن استعمال الصورة البارزة في كل تدوينة (featured image) كصورة خلفية؟ سنتطرّق إلى كل هذه الجوانب في هذا المقال. قبل أن تبدأ فكر مليا في الصور المتوافرة لديك يمكن أن يكون لاستعمال الصور الخلفية مجموعة من التأثيرات الإيجابية على موقعك كتحسين الجانب الجمالي للموقع إضافة إلى بناء العلامة التجارية (branding) بشكل ذكي وسلس. يساعد استعمال صورة خلفية مناسبة كذلك على إعطاء تلميحات حول محتوى الموقع وطبيعة المواضيع التي يتطرق لها. لا يمكنك أن تستعمل أي صورة كيفما كانت كخلفية لموقعك، من المهم جدا أن تقوم باختيار الصور بعناية كبيرة خصوصا من ناحية تحديد الحجم المناسب. قبل إضافة صورة كخلفية عليك أولا أن تطّلع على إحصائيات موقعك، وبالأخص أحجام الشاشات الخاصة بالمستخدمين ما سيعطيك فكرة مجملة عن أحجام الصور التي يجب أن تستعملها. تثبيت الملحقات هنالك ملحقان تحتاج إلى تثبيتهما للحصول على صور خلفية تعمل بشكل جيد على موقع ووردبريس: Background Images: يقوم هذا المُحلق من إضافة دعم قالبك لصور الخلفية، كما يعمل على توليد رابط URL المناسب من أجل عرض الصفحة. WPCustom Category Image: يعمل هذا الملحق على إضافة صور بارزة (featured images) للتصنيفات (categories)، لا تحتاج إلى تثبيته ما لم ترغب في تغيير صورة الخلفية لكل تصنيف على حدة. الآن بما أنك قمت بتثبيت الملحقات لنقم بإضافة بعض الصور الخلفية. إضافة صورة خلفية عامة يتم توفير إمكانية إضافة الصور الخلفية من خلال خيار تخصيص الخلفية الخاص بالقالب، لا تدعم كل القوالب هذه الخاصية، هنا يأتي دور ملحق background images لإضافة هذا الدعم، ما يعني أيضا إضافة فئة class custom-background إلى وسم body. يمكنك إعداد صورة خلفية إما من خلال Appearance < Background (على يسار الصورة أسفله) أو من خلال مخصص القالب theme customizer (على يمين الصورة أسفله). أيا كانت الطريقة التي اخترت اتباعها عليك باستعمال الإعدادات التالية: Position (الموقع): center (الوسط) Repeat (التكرار): no repeat (لا تكرار) (لا تبدو الخلفيات جيدة إذا كان هناك تكرار) Attachment (الارتباط): fixed (ثابت) Background Color (لون الخلفية): أترك الخيار كما هو إضافة صورة خلفية خاصة بكل تصنيف (Category) إن كنت تريد استخدام صورة خلفية خاصة بتصنيف معين فستحتاج إلى تثبيت ملحق WPCustom Category Image الذي سيسمح لك بإضافة صورة خاصة لكل تصنيف. بمجرد قيامك بتثبيت الملحق اذهب إلى Posts < Categories، اختر التصنيف التي تريد (category) وسترى زر Add Image الذي سيسمح لك باختيار صورة موجودة في Media Library أو رفع صورة جديدة. إعداد ملحق Background Images بعد أن قمت بتحديد صورة خلفية عامة وأيضا تخصيص صور خلفيات لكل تصنيف أصبحت الآن جاهزا لإعداد كيفية عمل صور الخلفية على موقعك. من لوحة التّحكم اذهب إلى Appearance < Background Images للذهاب إلى صفحة الإعدادات الخاصة بالملحق، لنتطرق إلى الخيارات واحدة بواحدة. تتوفر لك فقط أربع إعدادات للتحكم الكامل في صور الخلفيات: Display background on home page only (عرض الخلفية في الصفحة الرئيسية فقط) ستعمل هذه الخاصية على حصر استخدام صورة الخلفية في الصفحة الرئيسية فقط، ما يعني إهمال الخيارات الخاصة بالمنشورات والتّصنيفات. Make images fullscreen (ظهور الصور على الشاشة كاملة) رغم أن ظهور صور الخلفية على الشاشة كاملة (حتى وإن تطلب الأمر تمديدها) يعتبر أمرا أساسيا إلا أنه يمكنك التحكم في الأمر أيضًا. إن فعّلت هذا الخيار سيقوم الملحق بإدخال شيفرة CSS التالية التي تضمن أن صورك تظهر على الشاشة كاملة بغض النظر عن جهاز أو حجم شاشة المستخدم: body.custom-background { -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } من الجدير بالذكر أننا نستعمل CSS3 هنا، لذا فإن الزوار الذين يستخدمون متصفحا قديما مثل IE8 أو أقدم ستظهر لهم الصور بالشكل العادي. Using featured image on posts (استعمال الصور الخاصة بالمنشورات) إن فعّلت هذه الخاصّيّة سيتم استعمال الصورة الخاصة بالمنشور كخلفية عوض صورة الخلفية العامة. إذا أردت استخدام هذه الخاصية فعليك التّحقّق من أن الصور التي تستخدمها في المنشورات كبيرة كفاية لتُسْتَخْدَمَ كصور خلفية، إن كانت كبيرة جدا فلا بأس بذلك لأنه سيتم تغيير حجمها لاستعمالها كصور خاصة بالمنشور. سيكون هذا الخيار مُعطّلا في حال ما إذا كان القالب الذي تستخدمه لا يدعم الصور الخاصة (featured images). Use featured image on categories (استعمال الصور الخاصة بالتّصنيفات) عند تفعيل هذه الخاصّيّة سيقوم الملحق بالبحث عن صورة خاصة بالتّصنيف لاستعمالها عوض صورة الخلفية العامة. سيكون هذا الخيار معطلا إذا لم يكن ملحق WPCustom Category Image مفعلا. بعض الإعدادات المتقدمة عندما جرّبت هذا المُحلق مع بعض القوالب، تبيّن لي بأن الجزء الظاهر من الصّورة لم يكن كافيًا لتحقيق الهدف المنشود من الأمر. يكمن الحل في تخفيف درجة تعتيم لون خلفية المُحتوى بحيث نفهم محتوى صّورة الخلفية لكن دون جعل القراءة صعبة. على سبيل المثال، فيما يلي صفحة بدرجة تعتيم 0.9: تعديل طفيف لكن التّأثير الذي يُحدثه كبير: للقيام بهذا التعديل على موقعك عليك بالنظر إلى مصدر أي صفحة لتجد الأصناف (classes) الخاصة بأول وسم بعد وسم body، بالنسبة للعديد من قوالب ووردبريس يكون هذا الوسم من نوع div مع صنف site. لإعداد درجة التعتيم عليك باستخدام كود CSS من قبيل: div.site { background-color: rgba(255,255,255,0.90); } يمكنك إضافة هذه الشِفرة سواء من خلال استخدام ملحق تخصيص التصميم (مثل Jetpack) أو من خلال إنشاء قالب فرعي (child theme) . لا تقم أبدًا بالتعديل على ملف style.css الأساسي في قالب موقعك.يضمن القيام بتغيير درجة تعتيم الخلفية فقط بقاء الخط والصور بدرجة تعتيم كاملة. إن أردت أن تظهر صورة الخلفية بشكل كامل فما عليك إلا تحديد درجة تعتيم لون الخلفية إلى 0. أبدع في اختيار خلفيات موقعك إضافة خلفيات لموقع الووردبريس الخاص بك بطريقة صحيحة من شأنها تحسين تأثيره الجمالي. من خلال هذين الملحقين إضافة إلى تعديل CSS الذي أشرنا إليه يمكن الحصول على تحكم كامل وسلس في ما يخص الصور التي يتم استخدامها كخلفيات وفي مواطن ظهورها. ترجمة -بتصرف- للمقال: How To Properly Add Background Images To Your Wordpress Site لصاحبه: Chris Knowles.

سيساعدك هذا الدّرس على تعلّم طريقة عمل خلفية مُلفتة وفريدة من نوعها في بضع خطوات، حتّى المبتدئين بإمكانهم تطبيق هذا الدرس وإضافة لمساتهم وأسلوبهم الخاص، أنا على ثقة تامّة بأنكم ستستمتعون وتتعلّمون. من بين المهارات التي ستُتقنونها هي طريقة عمل خلفيّة جميلة، إضافة تأثير التوهّج وكذلك التعامل مع الخط، الحجم والألوان لجعل بعض المناطق بارزة. حسنا فلنبدأ. الخطوة الأولى: عمل الخلفيةبداية نقوم بفتح ملف جديد بالمقاسات التالية: 1920px*1200px ونختار له اللّون 242424#، نضاعف طبقة الخلفية ونغير اسمها إلى Film grain. بعدها نتّبع المسار التّالي: Filter > Artistic > Film Grain مع تطبيق الإعدادات التي تظهر في الصورة: نخفّض قيمة opacity للطّبقة إلى 50 بالمئة حتى تظهر لنا النتيجة كما في الصورة: الخطوة الثانية: عمل التوهجنقوم بعمل طبقة جديدة وليكن اسمها Lighting، بعدها نحدد أداة Radial Gradient مع استخدام اللونين الأبيض والأسود: نغيّر نوع الطبقة إلى Overlay وقيمة opacity إلى 50 بالمئة حتى نحصل على التالي: الخطوة الثالثة: استخدام الفرشنحمِّل الفرشاة التالية، نضيف طبقة جديدة ونقوم باستخدامها قليلا حول الشّكل السابق، ثم نحدد قيمة opacity بـ: 50 بالمئة. نقوم بوضع الخامة التالية فوق الشكل الذي قمنا بتصميمه: ونقوم بتحديد نوع الطبقة بـ: Overlay وقيمة opacity بـ: 10 بالمئة: الخطوة الرابعة: كتابة النص الأساسينقوم بتحميل الخط BEBAS، ثم نفتح طبقة جديدة ونكتب فيها النّص الذي نريد، اخترت مقاس الخط 350pt وفضّلت أن يكون ناعما (smooth mode) أمّا اللون فلك حرية الاختيار، أخيرا نقوم بتسمية الطبقة PEACE: الخطوة الخامسة: إضافة خلفية النص (خطوة جد هامة)نقوم بتخفيض قيمة opacity الخاصّة بالنّص إلى: 15%، بعدها نتبع المسار التالي لعمل مجموعة طبقات: Layer > New > Group ونقوم بتسمية تلك المجموعة بـ Words. نفتح طبقة جديدة ونحاول كتابة كلمات مختلفة واستعمال مقاسات وأنواع خطوط مختلفة كذلك، مع تجنب وضع مسافات كبيرة بين تلك الكلمات، بالنسبة لي استخدمت هذه الخطوط: ArialCambriaCandaraImpactTahomaTimes New RomanVerdanaوبعض الخطوط الإفتراضيةكذلك يمكن استعمال بعض من هذه الخطوط المجانية dafont ،Colaborate ،Extravaganzza الخطوة السادسة: عمل بعض التأثيراتنقوم بمضاعفة مجموعة الطّبقات التي قمنا بتسميّتها بـ Words: Layer > Duplicate Group ثمّ ندمجها (Ctrl+E)، بعدها نجعل مجموعة الكلمات (غير المدمجة) غير مرئية invisible، نحدّد أكبر نص لدينا (في تصميمي حددت كلمة PEACE) ونضغط على CTRL (لمستعملي أجهزة mac نختار Command) ثم نضغط على الصورة المصغّرة في الطبقات: نضغط على طبقة الكلمات المدمجة ثم نضغط على Ctrl+J، إذا كنت قد دمجت الطبقة Words وكانت مجموعة الطبقات غير المدمجة لازالت غير مرئية فستحصل على النتيجة التالية: الخطوة السابعة: عمل تأثيرات لخلفية النصنقوم بإظهار طبقة Words المدمجة من جديد ونطبق النمط التالي: نحدد قيمة opacity بـ:30%: نضاعف الطبقة المدمجة Words، ونضعها في الأسفل، بعدها نتبع المسار التّالي: Filter > Blur > Motion Blur مع تطبيق نفس الإعدادات التي في الصّورة: نحدد قيمة opacity بـ:15%: بإمكاننا أن نضيف أيضا نص أسفل العنوان: الخطوة الثامنة: اللمسات الأخيرةنحدّد الطبقة التي تحتوي على كلمة PEACE ونغير قيمة opacity إلى 4 بالمئة: نقوم بعمل طبقة جديدة ونذهب إلى: Image > Apply Image ثم نتبع المسار التالي: Filter > Render > Lightning Effects مع تحديد الإعدادات التالية: نحدد قيمة opacity بـ:30%، وبهذا نكون قد أنهينا درسنا. كذلك قمت بإضافة gradient map لإحدى طبقات الكلمات وكانت هذه هي النتيجة: ترجمة -وبتصرّف- للدّرس How To Create Great Typographic Wallpaper In Photoshop لصاحبه James Richman.

تطبيق صور الخلفيّة (background images) على العناصر هو أحد أكثر الميزات المُستخدمة في CSS، ولذلك يوجد العديد من الخصائص الّتي تَسمح بالتّحكم بخلفيّة العنصر وعلى أكثر من ناحية. يُمكن أنّ يَملك العنصر أكثر من صورة خلفيّة واحدة، فيُمكن إسناد قيم الصّور كقائمة يُفصل فيما بينها الفاصلة، وذلك للخاصيّة background-image، أما الخاصّيّة background-position فتُستخدم لتحديد مَوضع صورة الخلفيّة، وتَستحق هذه الأخيرة بعض التفحّص، وذلك بسبب أنّ قيمها المُحتملة تُنتج نتائج مُختلفة غير متوقّعة للمطوّر الّذي لم يتعمّق في تفاصيل CSS. سيتمّ استخدام صورة خلفيّة وحيدة طوال هذا المقال، بغرض تبسيط الشرح والشيفرة البرمجيّة، ولكن ما يَنطبق على صورة واحدة، يَنطبق على صور مُتعدّدة. تتمَوضع صورة خلفيّة داخل ما يُسمّى مجال تَمَوْضُع الخلفيّة (background positioning area) لعنصر، وهي كما يَدل اسمها، تُحدّد المنطقة الداخليّة الّتي ستتموضع بها الخلفيّة، وهي تملك نظام إحداثي يُستخدم لمُعالجة التَمَوْضُع. سيتمّ أوّلًا التطرّق إلى مفهوم نموذج الصندوق (CSS box model)، ورؤية تأثيره على تَمَوْضُع صور الخلفيّة داخل العنصر، وذلك قبل الدخول في مفهوم التَمَوْضُع. مجالات نموذج الصندوق (CSS Box Model Areas) تَملك العناصر في CSS ثلاثة مجالات، يُطلق عليها صناديق، مُعرّفة على العنصر: صندوق الحدود (border box) صندوق الحشو/الحشوة (padding box) صندوق المُحتوى (content box) صندوق الحدود هو المنطقة من العنصر الّتي تتضمّن كامل الأجزاء الداخليّة للعنصر بالإضافة إلى المنطقة أسفل تلك الحدود. أما صندوق الحشوة فهو المنطقة من العنصر، والّتي لا تتضمّن الحدود (borders)، وتتضمّن محتويات العنصر والحشوة المُحيطة، وتحدّد قيمة هذه الحشوة باستخدام الخاصيّة padding. صندوق المُحتوى هي المنطقة التي أنشأها محتوى العنصر، ولا تتضمّن الحشوة ولا الحدود. يوجد أيضًا مجال رابع يُدعى صندوق الهامش (margin box)، والّذي يتضمّن العنصر والهامش الخارجي، وتحدّد قيمة هذا الهامش بالخاصيّة margin. إضافة خلفيّة إلى عنصر، سواء كانت صورة أو لون مُصمت (solid color)، سيجعل من هذا الخلفيّة تُرسم ضمن مجال حشوة العنصر افتراضيًا، ويُمكن تعديل هذا السلوك عبر استخدام خاصيّة background-origin. ولكي يتمّ تحديد أين يجب بالضَّبط على صورة الخلفيّة أنّ تتموضع داخل مجال التَمَوْضُع (positioning area)، فإن المجال يحتاج نظامًا إحداثيًّا ليُستخدم في تفسير وترجمة قيم التَمَوْضُع. نظام إحداثيَّات العنصر (Element’s Coordinate System) يَملك كل عنصر بشكلٍ افتراضيٍّ نظامًا إحداثيًا مُنشئ نسبةً إلى ارتفاعه (height) وعرضه (width)، ويعود هذا الأمر إلى طبيعة نموذج صندوق العناصر في CSS، ويُستخدم هذا النّظام في توضيع العنصر نسبةً إلى باقي العناصر، وتوضيع أبناء العنصر نسبةً إلى العنصر نفسه. تَملك عناصر HTML نظام إحداثيَّات في CSS، ولكن لا تَملك عناصر SVG نظامًا مُماثلًا، بسبب أنها لا تُحكم بمفهوم نموذج الصندوق. يُعرّف مبدأ نظام الإحداثيَّات في CSS في أعلى يسار زاوية العنصر. يُحكم مجال تَمَوْضُع الخلفيّة (background positioning area) أيضًا من قبل نظام إحداثيَّات مُنشئ في هذا المجال، ويُستخدم في توضيع صورة الخلفية في هذا المجال، ويكون مبدأ هذا النّظام أعلى يسار زاوية مجال التَمَوْضُع. إن مجال التَمَوْضُع الافتراضيّ هو صندوق الحشوة، إذًا وبشكلٍ افتراضي، فإن مبدأ نظام الإحداثيَّات لمنطقة تَمَوْضُع الخلفية هو أعلى يسار زاوية صندوق الحشوة. يعني هذا أنّه عند تطبيق صورة الخلفيّة على عنصر، سيُوضع المُتصفّح الصّورة الأولى وما هو مُكرّر منها ابتداءً من أعلى يسار زاوية منطقة أو مجال الحشوة. على سبيل المثال، وعلى فرض وجود صورة خلفيّة مطبّقة على عنصر وغير مكرّرة (ستُعرض الصّورة مرّة واحدة) فسيكون تَمَوْضُع صورة الخلفيّة داخل نظام الإحداثيَّات عند مبدأ نظام إحداثيَّات صندوق الحشوة، أي أنّ أعلى يسار زاوية الصّورة ستتموضع عند أعلى يسار زاوية صندوق الحشوة: .element { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 2em; border: 20px solid rgba(0,0,0,0.5); background-color: beige; background-image: url(http://cdns2.freepik.com/free-photo/foggy-pine-forest_426-19323742.jpg); background-repeat: no-repeat; } p { text-align: center; padding: .5em; } .element p { text-align: left; background-color: rgba(255, 255, 255, .4); line-height: 1.5; margin: 0; } يُمكن استخدام خاصيّة background-position، وذلك بهدف تغيير مَوضع الصّورة داخل نظام الإحداثيَّات. يُمكن أيضًا تغيير مجال تَمَوْضُع الخلفيّة لتغيير مبدأ الإحداثيات المُستخدم في توضيع الصّورة داخل مجال خلفيّة العنصر. تغيير مجال تَمَوْضُع الخلفيّة ونظام الإحداثيّات باستخدام background-origin تُستخدم الخاصّيّة background-origin لتغيير مبدأ نظام الإحداثيَّات المُستخدم لتوضيع صورة الخلفيّة في مجال تَمَوْضُع الخلفيّة. تَقبل الخاصّيّة background-origin واحدة من هذه القيم: padding-box وهي القيمة الافتراضيّة. content-box border-box سيتغيّر مبدأ نظام الخلفيّة –وهو مبدأ نظام الإحداثيّات المُنشئ في هذا المجال-الموافق بناءً على مجال تَمَوْضُع الخلفيّة المُختار، وكذلك الأمر مع التَمَوْضُع الأوّلي والافتراضي لصورة الخلفيّة. تُظهر الأمثلة الحيّة التّالية الاختلاف عمليًا. .element { box-sizing: border-box; width: 100vw; height: 100vh; padding: 2em; border: 20px solid rgba(0,0,0,0.3); background-color: beige; background-image: url(http://cdns2.freepik.com/free-photo/foggy-pine-forest_426-19323742.jpg); background-repeat: no-repeat; } .element-2 { background-origin: content-box; } .element-3 { background-origin: border-box; } p { text-align: center; padding: .5em; } .element p { text-align: left; background-color: rgba(255, 255, 255, .4); line-height: 1.5; margin: 0; } سيتغيّر نظام الإحداثيَّات ليُغطّي كل مجال تَمَوْضُع خلفيّة مُعيّن باستخدام الخاصّيّة background-origin. يُمكن بعد ذلك تحديد مَوضع صورة الخلفيّة في هذا النّظام الإحداثي باستخدام الخاصّيّة background-position. لن يتمّ تغيير مجال تَمَوْضُع خلفيّة العنصر بعد الآن، وذلك بغرض تبسيط الأمثلة والشرح، ولذلك جميع الأمثلة هي على العنصر الّذي مجال الحشوة الخاصّة به هو المجال الّتي ستتموضع على أساسها الخلفيّة. توضيع صور الخلفيّة باستخدام خاصيّة background-position توضّح سابقًا كيف أنّ صورة الخلفيّة تتموضّع افتراضيًّا (بدون إعداد مُسبق) عند أعلى يسار زاوية مجال التَمَوْضُع، يَكمن السبب في ذلك إلى حقيقة أنّ قيمة التَمَوْضُع الافتراضيّة للخاصيّة background-position هي 0% 0%. يُقاس التَمَوْضُع وبشكل افتراضي بالقيمة المئويّة، حيثُ من المُمكن الإسناد إلى background-position إما قيمة مئويّة (percentage value) أو قيمة مُطلقة (absolute value)، والّتي تُحدّد إزاحة (offset) الصّورة من أحد الحوافّ (edges) الأربعة (top, right, bottom, left). يوجد خمس كلمات مفتاحيّة للإزاحة، بالإضافة إلى القيم المئويّة والمُطلقة، وهي: top right bottom left center يُوصف (يُعيّن) التَمَوْضُع عبر: تحديد قيمة إزاحة واحدة، سواءً كانت كلمة مفتاحيّة أو نسبة قيمة مئويّة أو طوليّة. تحديد قيمتي إزاحة، وذلك عبر الجمع بين قيمتين من القيم الثّلاث المُحتملة. تحديد أربع قيم إزاحة، كلمة مفتاحيّة وقيمة عدديّة نسبيّة. background-position: top left; background-position: 50px 30%; background-position: top 25%; background-position: right 10px bottom 20px; background-position: center center background-position: 10px 20px; background-position: 5em 2em; background-position: 75% 50%; إن تحديد قيمة وحيدة فقط، سيجعل من القيمة الثّانية هي center، وعند تحديد قيمتين، سيجعل الأولى تحدّد الإزاحة من الحافّة اليُسرى (التَمَوْضُع الأفقي)، والثّانية هي الإزاحة إلى الأسفل من الحافّة العلويّة (التَمَوْضُع العمودي). background-position: 10% 50%; /* 10% of the width to the right, and 50% down from the top */ background-position: top; /* equivalent to `top center` */ background-position: 50px; /* equivalent to `50px center` */ يُمكن الخلط والمزج، أي الجمع بين قيم الأطوال مع القيم المئويّة ومع أو الكلمات المفتاحيّة، الجدير بالذكر هنا، أنّه يُمكن إسناد زوج من الكلمات المفتاحيّة بدون النظر إلى الترتيب، ولكن لا يُمكن الجمع بين كلمة مفتاحيّة وقيمة طوليّة أو قيمة مئويّة، وعليه فإن القيمة center left هي قيمة سليمة وصحيحة، بينما القيمة 50% left ليست قيمة سليمة، بل من المُفترض أنّ تكون left 50%، فعندما يتمّ الجمع واستخدام كلمة مفتاحيّة وطول أو قيمة مئويّة، فإن القيمة الأولى دائمًا تعبّر عن الإزاحة الأفقيّة والقيمة الثانية تعبّر عن الإزاحة العموديّة. إن الجدير بالذكر هنا، أن الكلمات المفتاحيّة هي اختزال أو اختصارات للقيم المئويّة: top مساوية للقيمة المئويّة 0% من الحافّة العلويّة. bottom مساوية للقيمة المئويّة 100% إزاحة من الحافّة العلويّة. left مساوية للقيمة المئويّة 0% إزاحة من الحافّة اليساريّة. right مساوية للقيمة المئويّة 100% إزاحة من الحافّة اليسارية. center مساوية للقيمة المئويّة 50% إزاحة من في أي اتجاه تُطبّق عليه. إن آلية عمل كل قيمة والتفريق بينها لأمرٌ هامٌ، خاصّة مع وجود اختلاف جوهري في تعامل المُتصفّحات مع القيم المئويّة والقيم المُطلقة، وذلك في توضيع صور الخلفيّة. آليّة عمل قيم التَمَوْضُع ذات القيم المُطلقة إن تعيين قيمة تَمَوْضُع باستخدام قيم مُطلقة، سيزيح أعلى يسار زاوية صورة الخلفيّة بالقيمة المُحدّدة، بمعنى آخر، ستُنقل الصّورة بحيثُ تتموضع زاويتها اليساريّة العلويّة عند الإزاحة المُحدّدة في قيمة background-position. يُقال إن الصّورة بألف كلمة، حيثُ يتوضّح في الصّورة التّالية مثالان للخاصيّة background-position وبالقيمة المُطلقة، وكيف يُفسر المُتصفّح هاتين القيمتين ليوضع صورة الخلفيّة، علمًا أنّ أبعاد العنصر في المثالين هي: 100px X 80px. يُمكن أنّ يكون التَمَوْضُع المُطلق مُمثّلًا بقيمة سالبة، وفي هذه الحالة ستنزاح الصّورة في الاتجاه المُعاكس من الحافّة. مثالٌ حيّ: http://codepen.io/SaraSoueidan/pen/bfc8b59ddbc9beb63eee9f26e2754ade آلية عمل قيم التَمَوْضُع ذات القيم المئويّة تَنقل قيم الإزاحة الطوليّة المُطلقة زاوية العنصر اليساريّة العليا بالمسافة المُحدّدة، ولكن مع استخدام القيم المئويّة فالأمر مُختلف، فالقيمة X% ستُرصِف (align) النقطة X% من الصّورة مع النقطة X% من حاوية الصّورة (the container) فعلى سبيل المثال، ستُرصِف القيمة المئويّة 0% 0% النقطة ذات الإحداثيّات 0% 0% من الصّورة مع النقطة 0% 0% من نظام الإحداثيّات مجال تَمَوْضُع الخلفيّة، وستُرصِف قيمة التَمَوْضُع 50% 75% النقطة ذات الإحداثيّات 50% 75% من الصّورة (50% إلى اليمين و 75% إلى الأسفل) مع النقطة ذات الإحداثيّات 50% 75% في مجال تَمَوْضُع الخلفيّة. يُطلب بعض التركيز لفهم الكلام النظريّ السابق، ولكن دائمًا ما لا يَتوضّح بالكلمات حتمًا سيتوضّح بالمرئيّات، كل ما يَهم من الأمر هو التركيز على أنّ الانزياح 50% هو نسبة إلى النقطة 50% من الصّورة وليس الزاوية العلويّة اليساريّة، وهنا مَرْبِطُ الفَرس والذي يُوضّح الاختلاف بين القيم المئويّة وقيم الأطوال المُطلقة. يُمكن تحديد قيم إزاحة مئويّة سالبة، كما هو الأمر مع القيم المُطلقة، الأمر الّذي من شأنه أنّ يَنقل صورة الخلفيّة بالقيمة المُحدّدة ولكن بالاتجاه المُعاكس لمحاور الإحداثيّات: تمّت عمليّة التَمَوْضُع في الأمثلة السابقة نسبةً إلى الحافتين العلويّة واليساريّة، ولكن في الحقيقة من المُمكن توضيع الصّور نسبةً إلى أيًا من الحوافّ الأربعة. الإزاحة نسبةً إلى الحوافّ الأربع تمّ تحديد قيم إزاحة في الأمثلة السابقة، واستخدامها في إزاحة الصّورة نسبةً إلى الحافّة العلويّة والحافّة اليساريّة، وهو السلوك الافتراضيّ لقيمة أو قيمتي تَمَوْضُع. إن الجمع بين الكلمات المفتاحيّة مع القيمة العدديّة باستخدام الصياغة (syntax) ذات الأربع قيم، يُمكّن المُطوّر من إزاحة صورة الخلفيّة من الحافّة اليمينيّة والحافّة السُفلى لمجال التَمَوْضُع. يتمّ استخدام صياغة هذا الأسلوب عبر تحديد اسم الحافّة متبوعًا بالقيمة المطلوبة، ويمكن أنّ تكون القيم على الشكلين: قيم مُطلقة أو قيم مئويّة، وذلك كما في الأمثلة التّالية: background-position: top 1em right 3em; background-position: right 1em bottom 1em; background-position: left 20px bottom 50px; يجب الانتباه إلى أنّ إغفال القيمة الرابعة يجعلها تُفرض على أنّها صفر. background-position: bottom 10px right 20px يوضّح المثال السابق كيف أنّ الإعداد أصبح أسهل بكثير عند الرغبة في إزاحة صورة نسبةً إلى الحافّة اليمينيّة والسُفلى بدلًا من حساب قيم الإزاحة نسبةً إلى الحافتين العلويّة واليُسرى. المزيد مع خواصّ الخلفيّة في CSS يُمكن استعمال أكثر من صورة على عنصر، ولكل صورة خلفيّة يُمكن تعيين قيمة تَمَوْضُع، على أنّ يتمّ الفصل فيما بينها باستخدام الفاصلة: .element { background-image: url(path/to/first/image.jpg), url(path/to/second/image.png); background-position: top left, 75% 80%; } يوجد عامًّا تسع خاصِّيَّات تتحكم بتوزّع العناصر (layout)، والتَمَوْضُع، وقياس ورسم صور الخلفيّة، بما في ذلك خاصيّة background، وتقوم كل خاصيّة بعمل شيء واحد مُحدّد مع إمكانيّة الجمع والمزج فيما بينها لإعطاء المُطوّر تحكم كامل في كيفيّة تطبيق صور الخلفيّة على عناصر HTML. ظَهر مؤخرًا خاصيّة إضافيّة لخواصّ الخلفيّة الرئيسيّة، والّتي تسمح في تطبيق تأثيرات المزج (blending) على صور الخلفيّة وبشكل مُشابه لتأثيرات المزج المتوفّرة في مُحرّرات الصّور مثل فوتوشوب، من هذه الخواصّ الخاصّيّة background-blend-mode، ويُمكن الاستزادة حول الموضع بقراءة المزج في CSS. الخاتمة يُنصح بالقراءة والاستزادة حول هذا الموضوع لأهميته، حيثُ أنّ الفهم الصحيح لهذه الخواصّ من شأنه أنّ يُقدّم للمُطوّر مرونةً في الاستخدام وخياراتٍ أوسع في التصميم. ترجمة –وبتصرّف- للمقال A Primer To Background Positioning In CSS لصاحبته سارة سويدان.

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

ما يميز أنماط الخلفيات المتكررة السلسة هو إمكانية استخدامها على الفور في مختلف التصاميم وبشكل متكرر ورائع. ألواح التزلج، الملابس الخاصة، حزمة التصاميم وخلفيات مواقع الإنترنت جميعها تستخدم هذا النمط من الخلفيات. اتبع الخطوات في هذا الدرس لتتعلم كيفية إنشاء فكتور مبني على قاعدة أنماط متكررة خاصة بك، ويتضمن هذا التصميم رسومات رائعة لجماجم ونجوم وصواعق البرق وغيرها. هذا النّمط الذي ننوي تصميمه يتكوّن من لون أحادي رمادي مع الأبيض والأسود ويحتوي على مجموعة من الرسومات الرائعة. فقاعات النص، جماجم، العظام المتقاطعة، نجوم، قطرات، رذاذ وصواعق البرق كل هذا يساعد على تقديم تصميم شعبي مدني نابض بالحياة. افتح برنامج أدوبي إليستريتور. الشكل الأول الذي سنرسمه هو فقاعة النص. ارسم دائرة مثالية (مع الضغط على Shift) ولوّن هذا الشكل باللون الأسود. استخدم أداة القلم Pen Tool وارسم الشكل المنبثق عن الدائرة للدلالة على فقاعة النص ولا تنسَ مداخلة هذا الشكل مع الدائرة ثم أدمجهما معًا بتحديدهما واختيار Unite من لوحة Pathfinder. استخدم أداة النص Type Tool لإضافة شكل رمز نصّي. استخدمت هنا إشارة الاستفهام بخط من نوع VAG Rounded. وسّط هذه العلامة وسط نظريًّا الشكل الخارجي ثم اجمع هذه الأشكال Group معًا. الآن سنبدأ برسم شكل جمجمة بسيطة. ارسم شكل بيضوي بلون أسود ودوّره قليلًا. استخدم أداة القلم Pen Tool لرسم فك الجمجمة جاعلًا الحافة السفلية منحنية. وحّد الشكلين معًا من الخيار Unite من لوحة Pathfinder. ارسم شكلين بيضويين لتشكيل العينين ودوّر كلًّا منهما قليلًا. ثم ارسم مثلّثًا كأنف الجمجمة عبر استخدام أداة المضلعات Polygon Tool ثم اضغط بشكل متكرر على السهم السفلي من لوحة المفاتيح لتخفيف عدد نقاط الشكل المضلع إلى أن تحصل على شكل المثلث وذلك أثناء سحب الشكل باستخدام الفأرة. حدّد الجمجمة السوداء ثم اذهب إلى القائمة: Object > Path > Offset Path أدخل 1mm في الخيارات ثم اضغط OK. الشكل الجديد الذي تم إنشاؤه وُضِعَ فوق باقي الأشكال لذلك اضغط على الاختصار ]+CMD+Shift لإرساله للأسفل. بدّل لون الشكل الأسود إلى اللون الأبيض مع حدود سوداء. زِد حجم الحدود إلى 2pt وحاذِه للخارج. اجمع Group جميع العناصر معًا. ارسم خطًّا قُطريًّا وزِد سماكة الحدود إلى 7pt. استخدم دائرتين صغيرتين متداخلتين مع نهاية الخط لرسم العظمة الأولى من شكل العظمتين المتقاطعتين. أدمج الأشكال معًا بالخيار Merge من لوحة Pathfinder ثم انسخ CMD+C ثم ألصق في المقدمة CMD+F ثم دوّرها لتشكيل العظمتين المتقاطعتين. حدّد كل عظمة بدورها وأضِف لها مسار تعويض عبر الذهاب إلى القائمة: Object > Path > Offset Path اضغط الاختصار ]+CMD لإرسال المسار الجديد تحت الشكل الداخلي ثم أضِف اللون الأبيض للتعبئة والأسود للحدود بقيمة 2pt كما في شكل الجمجمة. قم بمداخلة عدد من الدوائر لتشكيل شكل رذاذ بسيط. استخدم أداة المستطيل مستدير الزوايا Rounded Rectangles مع أقصى قيمة لنصف قطر زوايا المستطيل لتشكيل قطرة سائلة. أدمج هذه الأشكال معًا من خلال الخيار Merge من لوحة Pathfinder. ارسم بعض الأشكال الأساسية لحشو تصميمك. يمكن أن نرسم صاعقة البرق باستخدام أداة القلم Pen tool، أمّا الدوائر فنرسمها بسهولة من خلال أداة Ellipse tool، والنجوم من خلال أداة Star tool. أنشئ مستندًا جديدًا بقياس 100x100mm ثم ارسم مستطيل رمادي كبير يمتد خلف حواف لوح الرسم. ابدأ بلصق الأشكال التي رسمتها للتو وضَعها داخل المربع. عندما يبدأ التصميم بالتَشَكُّل ارسم تحديدًا فوق جميع العناصر وحرّكهم قطريًّا للأعلى للتمدد خارج لوح الرسم. انسخ CMD+C ثم ألصق في المقدمة CMD+F نسخةً عن عناصرك ثم انقر على مفتاح Enter لإظهار نافذة التحريك. أدخل بدايةً 100mm في الحقل الأفقي ثم كرّر العملية للعمودي ولكن بقيمة -100mm هذه المرّة. كرّر العملية للمرّة الثالثة ولكن بقيمة 100mm و 100mm- للحقلين الأفقي والعمودي. تفقّد المساحات حول لوح الرسم حيث النقش يكرّر الفجوات. قم بلصق المزيد من العناصر لملء الفجوات ولكن مع المحافظة على هذه الأشكال خارج حدود لوح الرسم. اختر أداة المستطيل ثم انقر على لوح الرسم لتظهر نافذة خيارات الأداة. أدخل القيمة 100x100mm لإنشاء مربع، امسح لون التعبئة والحدود ثم حاذِ العناصر إلى لوح الرسم. حدّد الكل من الاختصار CMD+A ثم اذهب إلى القائمة: Object > Expand فعّل خيار الحدود Stroke فقط، هذا ما سيحوّل جميع الحدود إلى أشكال جامدة. اضغط باستمرار على المفتاح Shift وانقر على المربع الجديد الموجود فوق جميع عناصر التصميم وأزِله من التحديد. ثم اجمعها بالاختصار CMD+G. حدّد المربع مع مجموعة الأشكال واختر الخيار Crop من لوحة Pathfinder. التصميم أصبح جاهزًا. لنتمكن من استخدامه كخلفية أو كنقش داخل برنامج إليستريتور بإمكاننا سحب الشكل النهائي إلى لوحة Swatches. أضِف هذا التصميم كلون تعبئة إلى أي شكل تقوم برسمه لإنشاء تعبئة بنمط مستمر. ترجمة -وبتصرّف- للمقال How To Create a Trendy Seamless Pattern in Illustrator لصاحبه Chris Spooner.

إنّ هذا النوع من التصاميم منتشر على الإنترنت وبين المصمّمين اللذين يُبدعون تصاميم جديدة تعتمد على ذات النمط. سنتعلّم في هذا الدرس كيفية إنشاء تصميم نقش ضبابي تجريدي خطوة بخطوة مستخدمين مزيجاً من تقنيات الفوتوشوب Photoshop والإليستريتور Illustrator. لقد تابعت العديد من المواقع التي تتحدث عن هذا النوع من التصاميم حيث قام أحدهم بهذا العمل عبر استخدام تطبيقين على أجهزة الآيفون IPhone ولاحظت أنّ التصميم يقوم أساساً على فكرة وضع نقش تدرّجي هندسي فوق خلفية ضبابية حيوية، حيث ستكون النتيجة قطعة فنية رائعة من الفن التجريدي التي تَصلُحُ بشكل ممتاز للطباعة، أو كخلفية أو كمقدمة لأعمال تصاميم أخرى. وبدلاً من استخدام الآيفون IPhone الغير متوفر لدى الجميع، سأعلّمكم كيفية إنشاء تأثير مشابه باستخدام الفوتوشوب Photoshop والإليستريتور Illustrator. افتح صورة عشوائية ستكون القاعدة الأساسية للخلفية الضبابية. كلّما كانت الصورة حيوية ونابضة بالحياة وملونة أكثر كان ذلك أفضل، لذلك استخدمت صورة غروب الشمس ذات تدرجات الألوان ما بين الوردي والأرجواني. افتح الصورة بالفوتوشوب وأضف فلتر التمويه الضبابي Gaussian blur مع تطبيق أقصى الإعدادات. كرّر عملية التمويه ذاتها عدة مرّات حتى تخفي معالم الصورة الأساسية. سنقوم بقص العمل كاملاً وتحديداً الجزء المربع الأوسط منه مع التركيز على التخلص من المنطقة السوداء في الأسفل وسنقوم بذلك عبر استخدام أداة القص Crop مع الاستمرار بالضغط على مفتاح Shift أثناء تحريك المؤشر. سنضاعف الطبقة الحالية التي نعمل عليها بالضغط على CMD+J ثم نذهب إلى قائمة: Filter > Noise > Add Noise لإضافة بعض التشويش الخفيف. ملاحظة: ما هو اختصار CMD+J. إن مفتاح CMD في الويندوز هو Ctrl وفي ماكنتوش هو Command ⌘ حدد خَيَار Gaussian ثم أدِر قيمة التشويش Amount إلى 16% لإضافة بُقَع حُبيبات غزيرة. نستطيع تكثيف الألوان بتغيير خصائص الدمج في طبقة التشويش التي عملنا عليها للتو إلى Overlay، ثم خفف الشفافية لنحو 60% لموازنة حيوية الألوان. حاولت في البداية بشدّة أن يكون هذا الدرسُ درسَ فوتوشوب فقط، ولكن لا يمكن الإنكار بأن الإليستريتور يمتلك قدراتٍ أكبر في إنشاء النقوش المستندة على الأشكال. لذلك انتقل إلى برنامج الإليستريتور وارسم مربعاً (استمر بالضغط على Shift للحفاظ على تساوي الأضلاع لرسم المربع). قم بتدويره 45 درجة ليصبح بشكل ألماسة (هندسياً يُسَمّى مُعَيّن). أضف اللون الأسود إلى التدرّج الشفاف الدائري لتعبئة الشكل كما في الصورة، ثم اضبط مستوى التدفق مستخدماً أدوات التدرّج بالضغط والسحب عبر ذلك الشكل. فعّل الأدلة الذكية Smart Guides بالضغط على CMD+U لجعل الخطوات التالية أكثر سهولة. استمر بالضغط على Alt وعلى Shift مع النقر والسحب لإنشاء نسخة عن الشكل الألماسي. الأدلة الذكية الخضراء ستقوم بعملية المطابقة لوضع العنصرين بجانب بعضهما بشكل صحيح. كرّر العملية مراراً بالضغط على CMD+D لإنشاء صف كامل من الأشكال الألماسية الموضوعة بمحاذاة بعضها بشكل ممتاز. حددهم جميعاً واصنع نسخة عن الصف بأكمله وهذه المرّة قم بموازنة الصف الجديد بشكل متناسب أسفل الصف الأصلي. حدد جميع الأشكال في الصفّين وضاعفهم مجدداً وقم بمحاذاتهم لتمديد النقش وزيادته. يمكنك الآن الضغط على CMD+D لتستمر بمضاعفة ومحاذاة صفوف إضافية بشكل آلي حتى تحصل على سلسلة رائعة من الأشكال الألماسية المتدرجة الألوان. ارسم تحديداً حول جميع الأشكال ثم اضغط CMD+C لتنسخها، والآن قم بالعودة إلى برنامج الفوتوشوب واضغط CMD+V لتلصقها هناك. اختر خَيَار Pixels ثم كبّر حجم النقش حتى يغطي كامل الخلفية الضبابية. ستبقى العناصر بتنسيق Vector حتى تضغط مفتاح Enter لذلك لا تقلق حول تغيير حجمها أو تقليصها أو تمديدها للحصول على تأثيرات رائعة (من المعلوم أن عناصر الرسم الموجه Vector تحافظ على جودتها ودقتها مهما تم تغيير حجمها أو تقليصها أو ...). اضغط CMD+I لعكس حالة النقش وتحويل اللون الأسود في العمل إلى أبيض، ثم بدّل خصائص الدمج إلى Color Dodge. هذه النوعية من خصائص الدمج تسمح للون الأبيض بالتفاعل مع الألوان الحيوية للخلفية. خفف قيمة التعبئة Fill لطبقة النقش للحد من تأثير Color Dodge لإنتاج غطاء نقشي رقيق. من السهل صناعة مثل هذا التأثير عبر الجمع بين تقنيات الفوتوشوب والإليستريتور معاً. إنّ إنشاء غطاء النقش بواسطة الفوتوشوب فقط سيستغرق وقتاً وسيَصعُب إنشاؤُه بدقة، ولكن كل الشكر لأدوات تعديل الأشكال في الإليستريتور إنها سهلة وتساعد على إنشاء نقوش متكررة بسرعة ليتم لصقها ببساطة داخل ملف العمل. إن الفوتوشوب يتألق فعلاً بقدرته على مزج الألوان وإنشاء تأثيرات حيوية باستخدام خصائص المزج، ما يعطي هذا الفن التجريدي ذلك الظهور الرائع المؤثر. ترجمة -وبتصرّف- للمقال: How To Create an Easy Abstract Blur Pattern Design لصاحبه Chris Spooner.