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

سنوضّح في هذه المقالة كيفية إضافة نص إلى صورة، بحيث يبدو النص كما لو أنه على طبقة "داخل" تلك الصورة، لكن قبل ذلك يجب عليك أن تكون على معرفة لكيفية استخدام أساسيات سكريبوس Scribus، بما في ذلك إنشاء إطارات الصور ووضع الصور فيها، وإنشاء إطارات نصية، وإدخال نص، وتعديل نوع وحجم ذلك النص. ستكون هناك حاجة أيضًا إلى بعض العمليات الحسابية الأساسية ولكنها سهلة. الإعداد الصورة ستحتاج أولًا لصورة لوضع النص فيها. ويُعَد اختيار الصورة مهمًا جدًا لأن التأثير لن يكون صحيحًا إذا كانت الصورة غير صحيحة، ويُفضَّل أن يكون لصورتك فرق واضح بين الخلفية والعناصر الموجودة في الأمام، كما يجب أن تكون هناك مسافة جيدة بين عناصر الصورة الأساسية وما وراءها، أو أن تكون الخلفية غير واضحة، إذ يمنحك ذلك المساحة التي تحتاجها ضمن الصورة لوضع النص، وإذا لم تكن هناك مساحة لإضافة النص، فلن تبدو الصورة صحيحة، ولهذا حاوِل اختيار صورة يكون فيها الخط الفاصل بين عناصر الصورة الرئيسية والخلفية واضحًا بدون تشويش. سنعمل في هذا المقال على صورة بسيطة وبعض النصوص الأساسية ولكن التقنية قابلة للتوسّع إلى مشاريع أكثر تعقيدًا. نزّل الصورة التي سنستخدمها في هنا، ولكن استخدم الصورة المناسبة التي تريدها. الخط Font يعتمد اختيارك لنوع خط النص على الصورة التي تستخدمها والتأثير الذي تريد إنشاءه، وسنستخدم في مثالنا خطًا يوحي بالاسترخاء، بما يتماشى مع موضوع عطلة الشاطئ في الصورة مثل الخط Lobster. الصورة افتح سكريبوس Scribus وأنشئ مستندًا جديدًا بالاتجاه الأفقي، حيث سيكون القياس A4 ورسالة Letter مناسبَين. أنشئ إطار صورة يغطي الصفحة تقريبًا. ضع الصورة التي تريد استخدامها في الإطار وغيّر حجمها بالشكل المناسب. يجب أن تضع ملاحظات ببعض القيم قبل المتابعة مثل القيم التالية: قيمة X-Pos في تبويب X وY وZ من نافذة خصائص Properties، حيث يمكنك تسمية هذه القيمة "XB". قيمة Y-Pos في تبويب X وY وZ من نافذة خصائص Properties، حيث يمكنك تسمية هذه القيمة "YB". قيمة X-Scale (أو Y-Scale، إذ يجب أن تكونا متطابقتين) في تبويب صورة Image من نافذة خصائص Properties، أو من نافذة خصائص الصورة في الإصدار 1.5.7 من سكريبوس التي يمكن الوصول إليها من قائمة نوافذ ثم خصائص المحتوى، حيث يمكنك تسمية هذه القيمة "SC". يجب الآن إنشاء بعض الطبقات. الطبقات اختر قائمة نوافذ Windows، ثم الطبقات Layers لفتح نافذة طبقات. اضغط على زر + لإنشاء طبقة جديدة. انقر نقرًا مزدوجًا على اسم الطبقة الجديد وغيّره إلى "نص Text" (بدون علامات الاقتباس)، إذ ستحتوي هذه الطبقة على النص. اضغط على الزر + مرةً أخرى لإنشاء طبقة جديدة أخرى. انقر نقرًا مزدوجًا على اسم الطبقة الجديد وغيّره إلى "تراكب Overlay" (بدون علامات الاقتباس)، حيث ستعطيك هذه الطبقة تأثيرًا خياليًا. انقر على طبقة "نص" لتحديدها لتتمكن من إضافة النص. النص أنشئ بعض إطارات النصوص وأدخِل النص الذي تريد استخدامه كما في الشكل التالي: تأكّد من أن النص يتداخل مع الزجاج كما هو موضح في الشكل التالي، وإلّا فلن ترى أي تأثير: التتبّع Tracing انقر على مربع الاختيار الموجود في أقصى يسار طبقة "نص" في نافذة طبقات أسفل أيقونة العين لجعل هذه الطبقة غير مرئية. لم تُحذَف الطبقة، ولكن يُعَد إجراء التتبّع دون وجود النص أسهل، لهذا اتبع الآتي: انقر على طبقة "تراكب" في نافذة طبقات لتحديد تلك الطبقة. قرّب الصورة حتى يملأ الكأس الزجاجي مركز لوحة رسم سكريبوس تقريبًا. اختر قائمة إدراج Insert ثم منحنى بيزيه Bezier Curve. ارسم الآن خطًا حول حافة الكأس الزجاجي. ليست هناك حاجة إلى أن تكون دقيقًا في هذه المرحلة، إذ يكفي أن ترسم شيئًا يقترب من الشكل كما في الشكل التالي، ولا تهتم بمحاولة إغلاق الخط لإنشاء شكل مغلق، حيث ستجعل سكريبوس ينفّذ ذلك نيابةً عنك لاحقًا: انتقل إلى تبويب خط Line في نافذة خصائص بعد تحديد المنحنى أو الخط. غيّر عرض الخط Line Width إلى "خط رفيع Hairline"، وذلك بالنقر على السهم الصغير المتّجه للأسفل بجانب حقل إدخال النص. لاحظ أن الخط الذي رسمته لا يبدو دقيقًا كما هو متوقع كما في الشكل التالي، لكنه جيد ويمكنك إصلاحه لاحقًا: انقر نقرًا مزدوجًا على الخط للدخول إلى نافذة محرّر العقد Node Editor. انقر على أيقونة "أغلق منحنى بيزيه هذا Close this Bezier Curve" لإغلاق المنحنى كشكل. يجب الآن سحب نقاط التحكم الزرقاء بالقرب من حافة الكأس الزجاجي إلى أن تترك فراغًا صغيرًا قدر الإمكان. ويمكنك هنا استخدام أيقونة "أضِف عُقَدًا Add Nodes" لإضافة عقدة إلى خط، أو يمكنك الانتقال إلى قائمة عنصر Item ثم أدوات المسار Path Tools، ثم تقسيم فرعي للمسار Subdivide Path لوضع عقد إضافية في منتصف كل خط موجود مسبقًا. كما يمكنك استخدام أيقونة "حرّك نقاط التحكم Move Control Points" لتغيير موضع نقاط التحكم في الخط لجعله منحنيًا بهدف ملاءمة الصورة بصورة أفضل. كلما زاد الوقت الذي تستغرقه في تطبيق ذلك، كانت النتيجة أفضل، فالهدف هو محاولة وضع المنحنى في أقرب مكان ممكن من المكان الذي يلتقي فيه الكأس الزجاجي مع الخلفية. يوضّح الشكل التالي محاولةً مناسبةً باستخدام خطوط مستقيمة فقط: اضغط على "إنهاء التحرير End Editing" أو موافق في نافذة محرّر العقد لرؤية النتيجة التي يجب أن تبدو مشابهةً للشكل التالي: يجب الآن تحويل الشكل إلى تراكب Overlay. التراكب اختر قائمة عرض View ثم تقريب، ثم 100% لرؤية الصفحة بأكملها مرةً أخرى. حدّد الشكل الذي حدّدته سابقًا. انقر على "لون الحد Line Colour" في تبويب ألوان من نافذة خصائص. اختر "لا شيء None" من قائمة الألوان. يؤدي ذلك إلى اختفاء الشكل، ولكن هذا جيد حاليًّا. انقر بزر الفأرة الأيمن على المكان الذي يجب أن يكون فيه الشكل، واختر تحويل إلى Convert to، ثم إطار صورة Image Frame. انقر بزر الفأرة الأيمن على إطار الصورة الجديد، واختر استيراد صورة Get Image. حدّد موقع الصورة التي استخدمتها للخلفية، ثم اضغط "موافق". يجب أن يكون لديك الآن شيء يشبه الشكل التالي (قد يبدو ذلك غريبًا جدًا ولكنك ستصلحه الآن): اذهب إلى تبويب X وY وZ في نافذة خصائص. انظر إلى قيمة "X-Pos" واطرحها من قيمة "XB" التي دونتها مثل ملاحظة سابقًا، وهي قيمة X-Pos لصورة الخلفية. انظر إلى قيمة "Y-Pos" واطرحها من قيمة "YB" التي دونتها كملاحظة سابقًا وهي قيمة Y-Pos لصورة الخلفية. انتقل إلى تبويب صورة Image من نافذة خصائص (أو انتقل إلى نافذة خصائص الصورة في الإصدار 1.5.7 من سكريبوس التي يمكن الوصول إليها من قائمة نوافذ ثم خصائص المحتوى). تأكّد من تحديد الخيار "تحجيم حر Free Scaling". أدخِل يدويًا في الحقلين "X-Scale" و"Y-Scale" القيمةَ "SC" التي دونتها كملاحظة سابقًا، وهي قيمة X-Scale لصورة الخلفية. أدخِل يدويًا نتيجة طرح X-Pos في الحقل X-Pos. أدخل يدويًا نتيجة طرح Y-Pos في الحقل Y-Pos. يجب أن يبدو الكأس الزجاجي وكأنه عاد إلى طبيعته كما في الشكل التالي، وإن لم يكن الأمر كذلك، فتحقق من العمليات الحسابية التي أجريتها، إذ يجب طرح قيم X-Pos وY-Pos الخاصة بالشكل من القيم المقابلة لصورة الخلفية: يمكنك الآن جعل النص مرئيًا مرةً أخرى، وذلك من خلال النقر على مربع الاختيار الموجود تحت رمز العين لطبقة "نص" في نافذة طبقات، وذلك لجعل هذه الطبقة مرئيةً مرةً أخرى. يجب أن يبدو المستند الآن مثل الشكل التالي: قد تلاحظ وجود خط داكن حول الكأس الزجاجي، لكن لا تقلق بشأن ذلك، لأنه الإطار الذي توجد به صورة التراكب ولا يظهر إلا عندما تكون إعدادات العرض مضبوطة على "إظهار الإطارات Show Frames". استخدم قائمة عرض، ثم معاينة، ثم نمط المعاينة Preview Mode لترى كيف سيظهر المستند عند تصديره. بهذا يكون قد أصبح الآن جزء من النص موجودًا خلف الكأس الزجاجي كما في الشكل التالي، ولكن يمكنك تحريكه أو تغيير لونه أو إعطاؤه مخططًا تفصيليًا أو أي شيء تريده. أمثلة عملية فيما يلي بعض الأمثلة التي تستخدم نفس التقنية، والتي قد تساعد في إظهار الأمور التي يمكن تحقيقها بكل بساطة. الرمال والبحر لم نتتبّع نجم البحر بأكمله، بل تتبّعنا الأجزاء التي ستكون بالقرب من النص فقط ودمجنا هذه الأشكال لإنشاء شكل جديد لاستخدامه صورةً للتراكب. الأهرامات تتبّعنا في هذه الصورة جزءًا من الهرم فقط، ودوّرنا النص قليلًا. الأفق Skyline سنتتبّع في هذا المثال بعض المباني فقط (بالتحديد تلك المباني التي تقع على نفس المسافة من الكاميرا)، وأضفنا للنص تعبئات متدرجة مختلفة، بحيث سيعطي هذا انطباعًا بأن النص قد أُسقِط في وسط المدينة. قنديل البحر Jellyfish أعطينا في هذا المثال طبقة صورة التراكب عتمة أقل (حوالي 80%)، بحيث تظهر طبقة النص قليلًا، مما يجعل قنديل البحر شفافًا بعض الشيء. عصا Stick 'em Up تلاعبنا في هذا المثال بالنص باستخدام تحويل عشوائي ولم تكن هناك حاجة إلى تتبع سوى الموزة ويد الشخص. عرض خاص تتبعنا في هذا المقال الهاتف المحمول فقط باستخدام التقنية نفسها وأضفنا النص. الخلاصة رأينا كيفية استخدام عمليات مختلفة في سكريبوس لوضع جزء من النص داخل صورة، كما رأينا من خلال الأمثلة كيفية تطبيق الآلية نفسها مع الصور الأخرى. جرّب ما يمكنك إنشاؤه. ترجمة -وبتصرّف- للمقال How to layer text inside an existing image. اقرأ أيضًا كيفية التعامل مع إطارات الصور في برنامج سكريبوس Scribus كيفية وضع نص على مسار باستخدام برنامج سكريبوس Scribus كيفية إنشاء تأثير الصور القديمة في برنامج سكريبوس كيفية تطبيق تأثيرات فنية على الصور وإضافة إطار صورة بحواف ضبابية في سكريبوس كيف تنشئ ألوانك الخاصة في برنامج سكريبوس Scribus

قد تحتاج أحيانًا إلى صورة قديمة ولكنك لا تملك كاميرا قديمة أو مصوِّرًا فوتوغرافيًّا قديمًا، لذلك سنوضح لك من خلال هذا المقال كيفية جعل أي صورة تبدو وكأنها مُلتقَطة من أيام الزمن الجميل. سنستخدم كلًّا من برنامجَي سكريبوس Scribus وجيمب GIMP، ولكن يمكنك تخطي قسم جيمب إن أردت ذلك. الصورة الأولية ستحتاج أولًا لصورة "لجعلها قديمة"، ويمكنك تنزيل الصورة التالية التي سنستخدمها في هذا المقال، علمًا أن القياس الذي سيُستخدم هو 1920‎×1280: إذا اخترت صورتك الخاصة، فحاول اختيار صورة تتماشى مع الزمن الذي تحاول تعديل الصورة إليه، لذلك لا تستخدم صورةً يرتدي فيها شخص ساعةً رقميةً أو صورة سيارة حديثة أو طائرة مثلًا. الخطوات التي نحتاجها على برنامج جيمب GIMP سننشئ الآن صورةً تكون بمثابة "إطار" للصورة النهائية. افتح برنامج جيمب. أنشئ صورةً جديدةً بنفس حجم صورتك الأصلية مع خلفية شفَّافة Transparent Background. يجب الآن إعداد فرشاة الرسم لإنشاء تأثيرات "بصمات الأصابع Fingerprints" و"البقع المائية Water Stains". فرشاة الرسم الأولية افتح نافذة الفُرش Brushes واختر الفرشاة "Oils 01" التي تأتي مع جيمب افتراضيًّا، وقد يلحق باسم الفرشاة "66‎ x 74" أو ما شابه ذلك. اضبط "المباعدة Spacing" على القيمة 50 أسفل قائمة الفرش، وهذا يخبر جيمب بالتحرُّك بمقدار 50% من حجم الفرشاة عند رسم الخطوط بها. افتح نافذة الأدوات Toolbox وحدِّد أداة "فرشاة التلوين Paintbrush". اضبط التعتيم أو العتامة "Opacity" على 60% من نافذة خيارات الأدوات التي تكون عادةً أسفل نافذة الأدوات مباشرةً، لأن ما سترسمه بالفرشاة سيكون شبه شفاف وسيُظهِر ما تحته بعض الشيء. اضبط "الحجم Size" ليكون 120، ولكن سنقلِّله لاحقًا. اضبط "الحركيات Dynamics" على "حركيات عشوائية Dynamics Random"، وهذا يخبر جيمب أن يغير عشوائيًّا زاوية الفرشاة التي ترسم بها، وهو أمر مهم للحصول على تأثير عشوائي مناسب دون أن ترسم كل شيء يدويًّا. حدِّد "طبِّق النفاض Apply Jitter"، واضبط "المقدار Amount" على القيمة 1، وهذا يخبر جيمب بإضافة قدر إضافي من البعثرة إلى ما ترسمه، للحصول على تأثير أفضل. إذا كانت نافذة الأدوات مثل الشكل الآتي، فهذا يعني أنك طبقت كل الخطوات تطبيقًا صحيحًا وأنشأت الفرشاة الأولى من بين الفُرَش الثلاث التي ستستخدمها. يجب الآن إنشاء أحد الألوان الثلاثة التي سنحتاجها. انقر على "لون المقدمة Foreground Colour" في نافذة الأدوات، وهو المربع اليساري من المربعين "المدمجين" أسفل نافذة الأدوات. أدخِل القيمة "ba6d1a" (بدون علامات الاقتباس) في حقل "طريقة تدوين HTML"، ثم اضغط على موافق. قيمة تدوين HTML هي لون RGB، والذي تستخدمه، ولكنه مكتوب بالنظام الست عشري بالطريقة نفسها التي تستخدمها لغة HTML وCSS للألوان في صفحات الويب. عملية الرسم اختر قائمة تحديد Select ثم الكل All، حيث يؤدي هذا إلى إنشاء تحديد بشكل مستطيل حول صورتك. اختر قائمة تحرير Edit، ثم ارسم حواف التحديد Stroke Selection للرسم حول التحديد الذي أنشأته للتو. حدِّد الخيار "Stroke with a paint tool" وتأكَّد من تحديد أداة "فرشاة التلوين". اضغط على زر Stroke للرسم حول التحديد باستخدام الفرشاة التي أنشأتها. لاحظ أن جيمب رسم بعض اللطخات البنية حول حافة صورتك. إن لم يكن الأمر كذلك، فيجب التحقق من الإعدادات السابقة، والتراجع عن الإجراء الأخير، ثم المحاولة مرةً أخرى. سننشئ الآن بعض العلامات المختلفة قليلًا، وهنا عليك باعتماد الآتي: تأكَّد من أن "فرشاة التلوين" لا تزال هي الأداة المحدَّدة في نافذة الأدوات. غيِّر "العتامة" إلى 50% في خيارات الأدوات. غيِّر أيضًا حجم الفرشاة إلى 100. انقر على "لون المقدِّمة" مرةً أخرى في نافذة الأدوات. أدخِل القيمة "9a5a16" في حقل "طريقة تدوين HTML"، واضغط على موافق. اختر قائمة تحرير Edit، ثم ارسم حواف التحديد Stroke Selection، واضغط على Stroke مرةً أخرى لرسم التحديد مرةً ثانية باستخدام الفرشاة الأصغر والداكنة التي ضبطتها للتو. بهذا نكون قد انتهينا تقريبًا من الخطوات التي نحتاجها في برنامج جيمب، ولكن بقي جزء آخر من الرسم يجب تطبيقه، وهو الآتي: تأكَّد من أن "فرشاة التلوين" لا تزال هي الأداة المحدَّدة في نافذة الأدوات. غيِّر "العتامة" إلى 40% في خيارات الأداة. غيِّر أيضًا حجم الفرشاة إلى 80. انقر على "لون المقدمة" مرةً أخرى في نافذة الأدوات. أدخِل القيمة "7d4912" في حقل "طريقة تدوين HTML"، واضغط على موافق. اختر قائمة تحرير Edit، ثم ارسم حواف التحديد Stroke Selection، ثم اضغط على Stroke مرةً أخرى. إذا كان لديك الآن صورة تشبه الشكل التالي، فقد أنشأت إطارًا للصورة النهائية: اختر قائمة ملف File، ثم تصدير كـ Export As، وصدِّر صورتك بصيغة PNG. ستحتاج إلى استخدام صورة PNG لأنك تريد الاحتفاظ بالشفافية. الخطوات التي نحتاجها على برنامج سكريبوس افتح سكريبوس. أنشئ مستندًا جديدًا، واستخدم القياس A4 أو رسالة Letter بالاتجاه الأفقي إذا كانت صورتك الأصلية صورةً أفقية، وإلَّا استخدِم الاتجاه الرأسي. اختر قائمة عرض View، ثم تقريب، ثم ملاءمة للارتفاع Fit to Height، وذلك لعرض كل الصفحة على الشاشة. الألوان سننشئ لونين يضيفان اللون البني الداكن إلى الصورة وهما: "Sepia" بالقيم: R = 135 وG = 99 وB = 56. "Dark Sepia" بالقيم: R = 84 وG = 63 وB = 33. إذا كنت لا تعرف كيفية إنشاء الألوان في سكريبوس، إذًا يجب أن تقرأ مقال كيف تنشئ ألوانك الخاصة في سكريبوس. وبعدها سيمكنك البدء في إنشاء الطبقات والإطارات. الطبقات Layers سننشئ أربعة إطارات لذلك يُفضَّل إنشاء طبقة لكل إطار. اختر قائمة نوافذ Windows، ثم الطبقات Layers لفتح نافذة طبقات Layers، حيث لديك مسبقًا طبقة الخلفية Background لذلك تحتاج إلى إنشاء ثلاث طبقات أخرى هي الآتية: طبقة "الغطاء Overlay" التي تبرز الخلفية. طبقة "الهالة Halo" التي ستحيط بصورتك. طبقة تحتوي صورة "بصمات الأصابع Fingerprints" التي أنشأتها سابقًا، وهي اللمسة النهائية. اضغط على زر + لإنشاء طبقة جديدة. انقر نقرًا مزدوجًا على الاسم "طبقة جديدة 1" وغيِّر الاسم إلى "غطاء" (بدون علامات الاقتباس). اضغط على الزر + مرةً أخرى، وأعد تسمية "طبقة جديدة 2" باسم "هالة". اضغط على الزر + مرةً أخرى، وأعد تسمية "طبقة جديدة 3" باسم "إطار". انقر على طبقة "الخلفية" لتتمكَّن من إضافة الإطارات من الأسفل إلى الأعلى. يجب أن تبدو نافذة الطبقات مثل الشكل التالي: الخلفية اختر قائمة إدراج Insert ثم إطار صورة Image Frame، وارسم الإطار بأي حجم تريده. انقر بزر الفأرة الأيمن على إطار الصورة واختر استيراد صورة Get Image من القائمة. اختر الصورة الأصلية التي نزَّلتها مسبقًا، ثم اضغط موافق لوضع الصورة في الإطار. إذا اخترت صورةً كبيرة، فيُحتمَل أن تكون كبيرةً جدًّا بالنسبة للإطار، لذلك يجب تغيير حجمها. انقر بزر الفأرة الأيمن على إطار الصورة، واختر اضبط الصورة إلى الإطار Resize Image to Frame من القائمة. انقر بزر الفأرة الأيمن على إطار الصورة، واختر اضبط الإطار إلى الصورة Resize Frame to Image للحصول على حجم الإطار الصحيح. ويجب الآن إضافة بعض التأثيرات إلى صورة الخلفية. انقر بزر الفأرة الأيمن على إطار الصورة واختر مؤثرات الصورة Image Effects لفتح نافذة محرِّر مؤثرات الصورة. يجب أولًا جعل الصورة داكنةً قليلًا، لأن ذلك يؤدي إلى تباين أفضل مع الغطاء الذي ستنشئه لاحقًا. أضف تأثير "السطوع Brightness"، واضبط السطوع على القيمة ‎-40 لتبدو الصورة كما يلي: بعدها يجب إزالة كل الألوان من الصورة، فالصور القديمة لم تكن ملوَّنة، لهذا أضف تأثير "التدرج الرمادي Greyscale" لتبدو الصورة كما يلي: يجب الآن إجراء بعض التغييرات على الألوان كما يلي: أضف تأثير "درجتين لونيتين Duotone". اضبط "اللون 1" على اللون "الأبيض". اضبط "اللون 2" على اللون "Dark Sepia". لتبدو الصورة مثل الشكل التالي: سنجري الآن تغييرات طفيفة على منحنيات ألوان الصورة. اضغط على رمز محرر المنحنى Curve Editor للون 1 الذي يبدو مشابهًا للشكل التالي: اسحب مركز المنحنى إلى الموضع 3,1 على الشبكة كما هو موضح في الشكل التالي: اضغط على رمز محرِّر المنحنى للون 1 مرةً أخرى لإخفائه. اضغط على رمز محرِّر المنحنى للون 2. اسحب مركز المنحنى إلى أسفل ويسار الموضع 3,2 على الشبكة، واسحب مركز نصف المنحنى العلوي إلى أعلى ويمين الموضع 3,3 كما هو موضَّح في الشكل التالي: اضغط على رمز محرِّر المنحنى للون 2 مرةً أخرى لإخفائه. اضغط على موافق في محرر مؤثرات الصورة لرؤية الخلفية المعدَّلة، والتي يجب أن تبدو مثل الشكل التالي: لا تبدو الصورة سيئة جدًّا حتى الآن، ولكن يمكن تحسينها. الغطاء انتقل إلى نافذة طبقات وانقر على طبقة "غطاء". اختر قائمة إدراج ثم إطار الصورة، وارسم الإطار كما فعلت لصورة الخلفية. انقر بزر الفأرة الأيمن واختر استيراد صورة Get Image، ثم حدِّد الصورة الأصلية مرةً أخرى. غيِّر حجم الإطار والصورة، بحيث يكون كلاهما بنفس حجم صورة الخلفية تمامًا. يمكن الآن رؤية الصورة الأصلية فقط، ولكن العمل السابق لم يُفقَد، لكنه موجود أسفل الصورة التي تعمل عليها الآن. بهذا يكون قد حان الوقت لإضافة مزيد من التأثيرات. انقر بزر الفأرة الأيمن على إطار الصورة واختر مؤثرات الصورة لفتح نافذة محرِّر مؤثرات الصورة. أضف تأثير "درجتين لونيتين Duotone". اضبط اللون 1 على اللون "Sepia". اضبط "اللون 2" على اللون "الأبيض". لن نحتاج إلى تغيير منحنيات الألوان لهذا التأثير، لذلك يجب أن يكون لديك شيء مشابه للشكل التالي حتى الآن: أضف تأثير "حدّ Sharpen". اضبط "نصف القطر Radius" على 2.0. اضبط "القيمة Value" على 5.0. يساعد ذلك في إخراج البياض من الصورة ويجب أن تكون صورتك الآن مماثلةً للشكل التالي: استمر في تحديد طبقة "غطاء"، ثم اختر "فاتح Screen" من قائمة "نمط الدمج Blend Modes" أعلى نافذة طبقات. وبذلك نكون قد دمجنا الصورة التي في الأمام مع الصورة التي في الخلفية، مع جعل الخلفية أفتح، وهنا يجب أن تبدو صورتك كما يلي: ستبدو الصورة أفضل مما كانت عليه سابقًا، ولكن يمكن تحسينها أكثر. الهالة سنعطي الصورة هالةً تجذب المشاهد نحو مركزها وتحجب حواف الصورة قليلًا، لأن أغلب الصور القديمة بهذا النمط بسبب الكاميرات والمواد والمعالجة المُستخدَمة في ذلك الوقت. حدِّد إطار الصورة مع بقائك في طبقة "غطاء". اختر قائمة عنصر Item ثم مضاعفة/تحويل، ثم نُسخ مطابقة Multiple Duplicate. اقبل الإعدادات الافتراضية، ثم اضغط موافق. انقر بزر الفأرة الأيمن على إطار الصورة المكرَّر الذي أنشأته للتو، واختر أرسِل إلى الطبقة Send to Layer، ثم "هالة" Halo. قد تلاحظ أن الصورة قد عادت إلى الشكل الذي كانت عليه قبل تغيير "نمط الدمج" لطبقة "غطاء"، ولا بأس بذلك لأنك ترى الآن الصورة على طبقة "هالة"، وهذه الطبقة تحتوي على نمط دمج "عادي Normal"، حيث لا يهم ذلك لأنك ستزيل الصورة من طبقة "هالة". انتقل إلى نافذة طبقات وانقر على طبقة "هالة". انقر بزر الفأرة الأيمن على إطار الصورة واختر تحويل إلى Convert To، ثم مضلع Polygon. ستبدو صورتك الآن كما كانت من قبل لأن الصورة الموجودة على طبقة "هالة" قد اختفت. لديك الآن إطار ولكنك تحتاج إلى تعبئته بتدرج لوني. حدِّد المضلع، ثم انتقل إلى تبويب ألوان Colours في نافذة خصائص Properties. اضغط على تعبئة Fill، واختر نمط التعبئة "متدرج شعاعي Radial Gradient" من القائمة. يُحتمَل أن يكون المضلع قد تحول إلى اللون الأسود، ولكن لا بأس بذلك. انقر على نقطة توقف التدرج الموجودة في أقصى اليسار أسفل مستطيل التدرج الأسود، بحيث تُلوَّن باللون الأحمر. اختر اللون "Sepia" من قائمة الألوان الموجودة تحت مستطيل التدرج. اضبط "التعتيم أو العتمة Opacity" على 0%. يجب أن تبدو صورتك الآن مثل الشكل التالي: انقر على نقطة توقف التدرج الموجودة في أقصى اليمين أسفل مستطيل التدرج الأسود، بحيث تُلوَّن باللون الأحمر. اختر اللون "Sepia" من قائمة الألوان الموجودة تحت مستطيل التدرج. إذا كان مستطيل التدرج مصل الشكل التالي، فيُحتمَل أنه صحيح: يجب أن تكون الحلقة الموجودة حول الصورة قد تحوَّلت الآن إلى تظليل بني كما في الشكل التالي: يُعَد هذا جيدًا ولكن الصورة تبدو داكنةً بعض الشيء لذلك يجب إصلاحها، وهنا عليك سحب نقطة توقف التدرج الموجودة في أقصى اليسار إلى الموضع 30%. حيث يجب أن تبدو صورتك مشابهةً الشكل التالي: بصمات الأصابع حان الوقت لاستخدام نتيجة الخطوات التي طبَّقناها على جيمب. انتقل إلى نافذة طبقات وانقر على طبقة "إطار". اختر قائمة إدراج Insert، ثم إطار صورة Image Frame، وارسم الإطار كما فعلت لصورة الخلفية والغطاء. انقر بزر الفأرة الأيمن على إطار الصورة، واختر استيراد صورة Get Image من القائمة. اختر الصورة التي أنشأتها في جيمب، ثم اضغط موافق لوضع الصورة في الإطار. انقر بزر الفأرة الأيمن على إطار الصورة، واختر اضبط الصورة إلى الإطار من القائمة، إن لزم الأمر. انقر بزر الفأرة الأيمن على إطار الصورة، واختر اضبط الإطار إلى الصورة للحصول على حجم الإطار الصحيح إن لزم الأمر. ويجب الآن أن تكون النتيجة النهائية مشابهةً للشكل التالي: الخلاصة بهذا نكون قد رأينا كيفية تحويل صورة إلى شيء يشبه صورةً فوتوغرافيةً قديمة، لكن لا تتردد في تغيير الألوان أو منحنيات الألوان أو أي شيء آخر تريد تجربته لمعرفة التأثيرات الأخرى التي يمكنك تحقيقها، إذ يمكنك الوصول إلى شيء أفضل بالتجربة. قد تكون بعض الصور القديمة أفتح من تلك الصورة التي أنشأتها للتو، أو قد يكون البعض الآخر أغمق منها، وقد يحتوي بعض منها أيضًا على هالات أَسْمَك حولها، لذلك استمتع بتجربة جميع الإعدادات لإنشاء أنواع مختلفة من الصور القديمة. ترجمة -وبتصرُّف- للمقال How to fake a vintage photo. اقرأ أيضًا كيفية التعامل مع إطارات الصور في برنامج سكريبوس Scribus دليل موجز عن إنشاء النماذج Forms في سكريبوس Scribus

دعنا نفترض أنَّك تكتب سلسلة من البرامج التعليمية لـ Blender وأنك تستخدم PrintScreen لأخذ لقطات الشاشة. يمنحك هذا دليلًا مليئًا بالصور الضخمة غير المُحسَّنة للتحميل إلى صفحة ويب وعرضها. آخر شيء تريد القيام به هو تغيير حجمها يدويًا. انت محظوظ! باستخدام خيار تغيير الحجم ‎-resize يمكنك بسرعة وسهولة تغيير حجم هذه الصور إلى حجم يمكن التحكم فيه. ضع كل الصور التي تريد توسيع نطاقها في مجلد وانتقل إلى موقع الدليل عبر سطر الأوامر. ثم أدخل الأمر التالي: mogrify -resize 960x528 *.png يقوم هذا الأمر بتغيير حجم جميع ملفات png. في الدليل إلى حجم 960 بكسل في 528 بكسل. ربَّما الارتفاع ليس بنفس أهمية العرض. يمكنك ببساطة كتابة الأمر السابق على النحو التالي: mogrify -resize 960 *.png سيؤدي هذا إلى تغيير حجم جميع صورك إلى 960 بكسل، وسيتمُّ تغيير الارتفاع وفقًا لذلك، محافظًا على نسبة العرض إلى الارتفاع. ربما لديك الطول والعرض الذي تريده، لكنك ترغب في الحفاظ على نسبة العرض إلى الارتفاع. يمكنك إدخال الأمر على النحو التالي: mogrify -resize 960x528! *.png سيؤدِّي ذلك إلى توسيع نطاق صورك إلى 960 × 528 بكسل متى كان ذلك ممكناً، لكنَّه سيحافظ على نسبة العرض إلى الارتفاع لتلك الصور التي لن يتم تكبيرها إلى هذه الأبعاد بالضبط. ترجمة -وبتصرّف- للمقال ImageMagick Tutorial: How To Batch Resize Images on the Command Line لصاحبه Jared

دعنا نفترض أنك تكتب سلسلة من البرامج التعليمية على Blender وأنك تستخدم مفتاح PrintScreen لالتقاط لقطات الشاشة. إنَّ مفتاح PrintScreen رائع، لكنه يمسك بكل شيء. ربَّما لا تريد أن يظهر تطبيقك في كل صورة. وربما لا تريد تحرير عشرات الصور يدويًا. أنت محظوظ! لدى برنامج ImageMagick وسيلة سهلة لاستخدام وظيفة الاقتصاص للصور التي يمكنك تنفيذها بسرعة وسهولة من سطر الأوامر. إذا لم تكن قد قمت بالفعل بتثبيت البرنامج، فاحصل على ImageMagick بالطريقة السهلة: sudo apt-get install imagemagick ضع كل الصور التي تريد اقتصاصها في مجلد وانتقل إليه عبر سطر الأوامر. في المثال الذي أستخدمه هنا، أرغب في قطع البيكسلات السفلية البالغ عددها 25 بكسل من سلسلة صور png. نفِّذْ الأمر التالي للقيام بذلك: mogrify -format png -gravity south -chop 0x25 *.png الرايات التي استعملناها مع الأمر هي: ‎:-format png ينص الخيار بإخراج الملف بصيغة png. ‎:-gravity south ينصُّ الخيار ببدء الاقتصاص من أسفل الصورة. ‎:-chop 0x25 ينصُّ الخيار بقصَّ 25 بكسلًا من الارتفاع. ‎*.png: ينصُّ الخيار بتطبيق جميع ما سبق على أي ملف ذو اللاحقة png. أدناه ملفي الأصلي: والصورة المشذبة حديثا: ترجمة -وبتصرّف- للمقال ImageMagick Tutorial: How To Batch Crop Images on the Command Line لصاحبه Jared

يعتبر تحسين الصور (Image Optimization) من بين أكثر الخطوات بساطة وتأثيرا والتي يمكنك اتباعها من أجل تحويل موقعك من جيد إلى رائع. إلا أن القيام بذلك بشكل خاطئ سيؤدي حتما إلا نتائج عكسية كإثارة سخط زوارك، التأثير سلبا على عائداتك المادية فضلا عن خفض تصنيف السيو SEO الخاص بك. من حسن الحظ أن توفر العديد من الأدوات المتقدمة يجعل من القيام بهذا الجزء المهم من عملية التحسين العام للمواقع بشكل صحيح أمرا من السهولة بمكان. سنعمل في هذا المقال على التعمق في هذا الموضوع من خلال تغطية كل ما ستحتاجه لضمان دفع أداء موقعك إلى أقصى حدوده فيما يتعلق بكيفية تقديم المحتوى الجرافيكي. لنبدأ من خلال تعريف المصطلحات والتطرق لمختلف صيغ الصور التي تدخل في سياق الموضوع. نظرة حول صيغ الصور المستخدمة على الإنترنت كما يعرف كل من أمضى بعض الوقت مستخدما خاصية Save-as على برنامج فوتوشوب، هنالك كم هائل من صيغ الصور في العالم الرقمي، لكن عندما يتعلق الأمر بوضع هذه الصور على الإنترنت فإننا نتعامل مع عدد محدود نسبيا من الخيارات. تنقسم هذه الصيغ إلى نوعين أساسيين: Vector graphics (الرسومات المُتَّجِهة): الصور التي يتم تمثيلها بالاعتماد على المعادلات الرياضية من خلال استخدام الأشكال الهندسية مثل النقط، الخطوط والمنحنيات. Raster graphics (الرسومات النقطية): الصور المكونة من خلال شبكة بكسل مستطيلة الشكل. توضيح للاختلاف بين الرسومات المتجهة (على يمينك) والنقطية (على يسارك) في سياق تحسين الصور سنولي اهتماما أكبر للصور النقطية، إلّا أننا سنلقي نظرة سريعة على موضوع الصور المُتّجهة قبل أن ذلك. الصور المتجهة (Vector Images) يتم تمثيل الصور المُتّجهة حسابيا وبالاعتماد على معادلات رياضية ما يعطيها العديد من الإيجابيات دون إدخال أي تحسينات: عدم ترابط جودة الصورة ودقتها: يمكن تكبير وتصغير الصور المُتّجهة إلى أي حجم دون التسبب في تشويهها أو في ضياع التفاصيل حيث يتم عرضها بالجودة الكاملة في أي دقة كيفما كانت. سهولة التعديل: تقدم الصور المُتّجهة نفسها على طبق من ذهب لإمكانية التعديل والتغيير دون تخريبها. حجم ملف صغير: تتكون الصور المُتّجهة من سلسلة أوامر برمجية ما يعني صغر حجم ملفاتها. لطالما جعلت النقاط التي أسلفنا الذكر من الرسوميات المُتّجهة خيارا ممتازا في مجال تصميم الرسوميات (designing graphic) سواء الرسوم التوضيحية، الخلفيات أو أيقونات الشعارات. من ناحية تحسين الصور يمكن اعتبار أن الصور المُتّجهة تأتي جاهزة بشكل مثالي دون الحاجة إلى أي تعديلات أو تحسينات، يبقى المشكل في استخدامها مقتصرا على ضمان توافقيتها مع المتصفحات ودعم هذه الأخيرة لاستخدامها ما أدى إلى شيوع ممارسة غير سلسة بعض الشيء تتجلى في إنشاء المصممين لأعمالهم على حزم تصميم داعمة للرسوميات المتجهة مثل: Adobe Illustrator أو Inkscape ثم الاضطرار إلى تصدير (export) أحجام مختلفة فضلا عن صيغ غير مُتَّجِهة من أجل استعمالها على الإنترنت. تصميم تطبيق الرسوميات المتجهة Sketch المقدم من Bohemian Coding يمكن لتَبَني صيغة صور الويب SVGs Scalable Vector Graphics (الرسومات المتجهة متغيرة الحجم) على الصعيد العالمي أن يجعل من الأمور أكثر سهولة في هذا الصدد، إلا أنه من المؤسف أننا لم نصل بعد إلى هذا المستوى فيما يتعلق بدعمها. بأخذ هذا بعين الاعتبار وبالنظر إلى سنوات من التقدم التدريجي التصاعدي، يمكن أن نقول أن دعم توافقية هذه الصيغة أصبح قريبًا، من المرتقب أيضا أن نشهد أخيرا وفي السنوات القليلة القادمة انتشار واسعا لاستخدام الرسوميات المتجهة على أرض الواقع. حتى ذلك اليوم، من الوارد أنك ستحتاج إلى تصدير (export) ملفات الصيغ المتجهة إلى صيغ نقطية من أجل عرضها على الإنترنت، سنولي اهتمامنا فيما يلي إلى هذا النوع الأخير من الصيغ. الصور نقطية (Raster Images) تحظى الصور النقطية بالدعم الكامل من المتصفحات فضلا عن الحاجة لإجراء تعديلات كثيرة ومتقدمة تماما عكس نظيرتها المتجهة. هنالك في المجمل ثلاث صيغ ملفات ستصادفها أغلب الوقت إضافة إلى واحدة أخرى حديثة العهد بادية في الأفق يجدر أخذها بعين الاعتبار. لنقم بتغطية هذه الصيغ بالتتابع. GIFs تعتبر صيغة GIFs) Graphics Interchange Format) أقدم الصيغ في عالم الصور الرقمية، حيث تم ابتكارها سنة 1987، تتميز بصغر حجم ملفها، محدودية لوحة الألوان الخاصة بها: 256 لونا فضلا عن دعمها للشفافية ما جعلها العماد الأساس للعمل الرقمي خلال بدايات الإنترنت، والحل الذي يتم اعتماده بخصوص الصور التي تتضمن نصا ما أو ألونا مسطحة (flat color). تعتبر الصور التي تتضمن النصوص و/أو الألوان المسطحة استعمالا كلاسيكيا لصيغة GIFs رغم تحقيق هذه الصيغة عودة لا بأس بها خلال موجة جنون استخدام صور GIFs الحركية مؤخرا إلا أنها تفقد المزيد من مستخدميها بشكل متواصل لفائدة صيغة PNGs. JPEGs تعتبر صور JPEGs الصيغة العالمية لعرض الصور منذ الأيام الأولى للإنترنت، يتم استعمالها حاليا في ما يزيد عن %70 من المواقع الإلكترونية على الصعيد العالمي. تتميز هذه الصور بمبدأ الضغط الفَقُود (lossy compression) ما يجعل منها مرشحا ممتازا لعمليات التحسين المتقدمة فضلا عن ملائمتها المثالية للصور التي تحتوي على مجال واسع من الألوان والتدرجات (gradients)، يعتبر عدم دعم هذه الصيغة للشفافية (transparency) نقطة ضعفها الوحيدة. حفظ كل من تدرج الألوان المتقن فضلا عن مجال اللون الديناميكي بشكل جيد باستخدام JPEGs PNGs تم ابتكار الرسومات من صيغة PNGs (رسومات الشبكة المحمولة Portable Network Graphics) كحل لمشاكل الترخيص المحتملة عند استخدام GIFs، توفر صيغة PNGs خاصية الضغط غير الفَقُود (lossless compression)، دعم الشفافية (transparency) فضلا عن جودة صورة عالية. تعتبر صيغة 8 بت (8-bit format) بديلا مثاليا لصيغة GIFs كما أنها تتميز عن هذه الأخيرة بصغر حجم ملفها، في حين أن صنفي 24 بت و32 بت (24-bit and 32-bit) يوفران بديلا ممتازا لصيغة JPEGs، يبقى المشكل الوحيد هو كبر حجم الملف الناتج في هذه الحالة. يجعل الدعم الكامل للشفافية من صيغة PNGs خيارا جيدا للعديد من الاستعمالات. WebP في حين تتميز صيغ الصور النقطية الثلاث التي تمت مناقشتها سابقا بإمكانية نشرها على معظم المتصفحات الشهيرة نلاحظ غياب أي ابتكار حقيقي في هذا المجال منذ مدة من الزمن. من المحتمل أن يتغير ذلك مع مشروع WebP الخاص بجوجل (Google’s WebP project)، والذي يتمحور حول طرح صيغة صور جديدة والتي تمكن من تخفيض حجم الملف بنسبة تصل إلى %25، رغم أن متصفح Chrome يدعم هذه الصيغة بشكل تلقائي يبقى الدعم على مستوى عالمي أمرا غير متوافر. نصل مما سبق إلى خلاصة مفادها أن الصور المتجهة مثالية للغاية للعديد من الاستعمالات، لكن في سياق الاستعمال اليومي في إنشاء المحتوى ستستعمل مزيجا من صيغ GIFs، PNGs و JPEGs على الأقل في المستقبل القريب. لنتطرق إلى الأسباب التي تجعل من تحسين الصور بهذه الصيغ أمرا غاية في الأهمية. ضرورة التحسينات أدى توافر سرعة إنترنت عالية في العديد من الدول إلى عدم الاهتمام بتحسين الصور في بعض الأوساط. عادة ما يتم طرح هذا النوع من الأسئلة: ما الفرق الذي ستحدثه بضع كيلوبايت إضافية في وقت يستطيع معظم المستخدمين مشاهدة الأحداث الرياضية بشكل مباشر على أجهزتهم المحمولة؟ ألم نتجاوز بعد مرحلة القلق حول هذا النوع من البديهيات التافهة؟ لسوء الحظ فإن الإجابة ستكون بالنفي القاطع، تعتبر السرعة أمرا أساسيا خصوصا في الهواتف المحمولة. حقائق جديدة حول الهواتف المحمولة يتوجه الإنترنت بشكل متواصل نحو هيمنة استخدام الهواتف المحمولة. ينتج عن ذلك أمران أساسيان يجب أن تأخذهما بعين الاعتبار فيما يخص تحسين الصور: لم تعد الصور تعتبر كإضافات تزيين محببة للرؤية تستخدم لملء الفراغ في الأجهزة ذات الشاشات الكبيرة، يجب أن يتم التعامل معها على أن لها دورا محددا تلعبه في ظل الأجهزة ذات شاشات صغيرة جدا. رغم أن سرعات التحميل على الهواتف المحمولة في تصاعد مستمر إلا أنها لا زالت تقبع خلف تلك الخاصة بالحواسيب كما أن استخدامها لا يزال مُكلفًا، لكل بكسل أهمية قصوى. بالنظر إجمالا إلى هذا السياق، لنلق نظرة على ثلاث أسباب تجعل من تحسين الصور ضرورة وليس أمرا إضافيا فقط: يريد المستخدمون صفحات سريعة استنادا إلى أبحاث موقع HTTP Archive، تعد الصور من بين الأسباب الرئيسية في جعل معدل حجم الصفحات يصل إلى 1.25MB شأنها في ذلك شأن استخدام JavaScript بشكل مفرط، ما يعتبر بعيدا كل البعد عن المعدلات الرائجة أيام تحدي الخمس كيلوبت (the 5K Challenge). تؤدي ضخامة حجم الصفحات المتزايدة إلى نتائج سلبية، حيث أن %73 من مستعملي الإنترنت على الهواتف المحمولة اشتكوا من مواجهتهم مشاكل مع المدة الزمنية المستغرقة لتحميل الصفحات على أجهزتهم. في نفس الوقت، يتوقع نصف مستخدمي الويب أن يتم تحميل موقع ما في غضون ثانيتين، إلا أن هذا المعدل عند استعمال جهاز محمول يكون حوالي 7 ثوان، ما يعني بكل بساطة عدم موافاة تطلعات المستخدمين. باختصار، قد يؤدي ملء موقعك بصور غير ضرورية إلى سخط زوارك حتى قبل حصولهم على فرصة للتعرف على المحتوى الذي تقدمه. تؤدي كمية الصور الكبيرة إلى التأثير سلبا على التصنيف على محركات البحث تأكيدا لشكوك العديدين سابقا في سنة 2010، صرحت جوجل بأن السرعة تعتبر عاملا رسميا في تصنيف المواقع. يجب أن يتم تحميل صفحة موقعك في غضون ثانية أو أقل، لا تعتبر 200 كيلوبت التي تضيفها صورة القائمة الرأسية في موقعك إزعاجا وعدم احترام لمستخدمي الهواتف المحمولة فحسب بل قد تؤدي إلى عدم إيجادهم لموقعك على مُحرّكات البحث. تؤثر الصفحات البطيئة على عائداتك المادية قم بتجميع النقطتين السابقتين لتحصل على الوصفة السحرية للعديد من الثغرات لتسرب وضياع مداخيلك. تشير أبحاث Strangeloop إلى أن تأخيرا بسيطا بمقدار ثانية واحدة في تحميل الصفحة قد يؤدي إلى خفض معدل التحويل بنسبة %7. هل ترى أنك في وضعية تسمح لك بالتخلي عن قيمة الأرباح هذه فقط من خلال عدم تحسين منتوجك؟ ترجمة -وبتصرف- للمقال: The Complete Guide to Mastering Image Optimization for WordPress لصاحبه: TOM EWER. حقوق الصورة البارزة: Designed by Freepik.