المحتوى عن 'صور'.



مزيد من الخيارات

  • ابحث بالكلمات المفتاحية

    أضف وسومًا وافصل بينها بفواصل ","
  • ابحث باسم الكاتب

نوع المُحتوى


التصنيفات

  • التخطيط وسير العمل
  • التمويل
  • فريق العمل
  • دراسة حالات
  • نصائح وإرشادات
  • التعامل مع العملاء
  • التعهيد الخارجي
  • التجارة الإلكترونية
  • الإدارة والقيادة
  • السلوك التنظيمي
  • مقالات ريادة أعمال عامة

التصنيفات

  • PHP
    • Laravel
    • ووردبريس
  • جافاسكريبت
    • Node.js
    • jQuery
    • AngularJS
    • Cordova
    • React
  • HTML
    • HTML5
  • CSS
  • SQL
  • لغة C#‎
  • لغة C++‎
  • بايثون
    • Flask
    • Django
  • لغة روبي
    • Sass
    • إطار عمل Bootstrap
    • إطار العمل Ruby on Rails
  • لغة Go
  • لغة جافا
  • لغة Kotlin
  • برمجة أندرويد
  • لغة Swift
  • لغة R
  • لغة TypeScript
  • ASP.NET
    • ASP.NET Core
  • سير العمل
    • Git
  • صناعة الألعاب
    • Unity3D
    • منصة Xamarin
  • سهولة الوصول
  • مقالات برمجة عامة

التصنيفات

  • تجربة المستخدم
  • الرسوميات
    • إنكسكيب
    • أدوبي إليستريتور
    • كوريل درو
  • التصميم الجرافيكي
    • أدوبي فوتوشوب
    • أدوبي إن ديزاين
    • جيمب
  • التصميم ثلاثي الأبعاد
    • 3Ds Max
    • Blender
  • نصائح وإرشادات
  • مقالات تصميم عامة

التصنيفات

  • خواديم
    • الويب HTTP
    • قواعد البيانات
    • البريد الإلكتروني
    • DNS
    • Samba
  • الحوسبة السّحابية
    • Docker
  • إدارة الإعدادات والنّشر
    • Chef
    • Puppet
    • Ansible
  • لينكس
  • FreeBSD
  • حماية
    • الجدران النارية
    • VPN
    • SSH
  • مقالات DevOps عامة

التصنيفات

  • التسويق بالأداء
    • أدوات تحليل الزوار
  • تهيئة محركات البحث SEO
  • الشبكات الاجتماعية
  • التسويق بالبريد الالكتروني
  • التسويق الضمني
  • التسويق بالرسائل النصية القصيرة
  • استسراع النمو
  • المبيعات
  • تجارب ونصائح

التصنيفات

  • إدارة مالية
  • الإنتاجية
  • تجارب
  • مشاريع جانبية
  • التعامل مع العملاء
  • الحفاظ على الصحة
  • التسويق الذاتي
  • مقالات عمل حر عامة

التصنيفات

  • الإنتاجية وسير العمل
    • مايكروسوفت أوفيس
    • ليبر أوفيس
    • جوجل درايف
    • شيربوينت
    • Evernote
    • Trello
  • تطبيقات الويب
    • ووردبريس
    • ماجنتو
  • أندرويد
  • iOS
  • macOS
  • ويندوز

التصنيفات

  • شهادات سيسكو
    • CCNA
  • شهادات مايكروسوفت
  • شهادات Amazon Web Services
  • شهادات ريدهات
    • RHCSA
  • شهادات CompTIA
  • مقالات عامة

أسئلة وأجوبة

  • الأقسام
    • أسئلة ريادة الأعمال
    • أسئلة العمل الحر
    • أسئلة التسويق والمبيعات
    • أسئلة البرمجة
    • أسئلة التصميم
    • أسئلة DevOps
    • أسئلة البرامج والتطبيقات
    • أسئلة الشهادات المتخصصة

التصنيفات

  • ريادة الأعمال
  • العمل الحر
  • التسويق والمبيعات
  • البرمجة
  • التصميم
  • DevOps

تمّ العثور على 44 نتائج

  1. عندما أُصدر قانون حقوق الطبع والنشر الأمريكي الأصلي عام 1790، كان هدف الحكومة حماية حقوق المؤلفين على أعمالهم. بالانتقال إلى عصرنا الحالي، لم يعد الكّتاب والمؤلفون والأدباء هو وحدهم من تحتاج أعمالهم للحماية، الأعمال الإلكترونية الموجودة على مواقع الويب تحتاج للحماية أيضا. ربما يمكنني كتابة فصول كاملة حول موضوع الملكية الفكرية، وحماية حقوق الطبع والنشر، والانتهاكات التي تتعرض لها، ولكنني أريد الآن التركيز على ما عليك القيام به لحماية صور مدونتك. مقدمة قصيرة عن حقوق نشر صور المواقع الإلكترونية تعد الصور أحد أجزاء موقعك الأكثر عرضة لانتهاك حقوق نشرها، فمن السهل نسخها، وبالتالي سرقتها، من خلال النقر عليها بالزرّ الأيمن وتنزيلها، أو أخذ لقطات شاشة لها، أو البحث في غوغل، أو استخلاص المواقع (Web scraping) عن طريق برامج تنزّل محتوى الموقع لتصفحه على جهاز المستخدم كما لو كان يتصفّحة مباشرة على الإنترنت. رغم أنه سيكون رائعًا لو أننا نعرف أنّ أحدًا لن يسرق صورك، إلّا أنه من الواقعي أكثر أن نأمل ذلك، ولكن نتوقع حدوث ذلك على أي حال. قبل أن نبدأ، من المهم أن نفهم بعض الأشياء المتعلقة بحماية حقوق النشر، في ما يتعلّق بتطبيقها على صور مدونتك. أولًا، يمتلك منشئ الصور الحق وحده دون سواه في نسخها واستخدامها. إذا كلفه شخص آخر (رب عمله عادة) بإنشاء تلك الصور، فإنّ هذا الأخير يمتلك تلك الحقوق. ثانيًّا، هناك بعض الحالات التي يكون فيها من المقبول قانونيًا للآخرين استخدام صورك، وهذا ما يعرف باسم الاستخدام العادل. وأخيرًا، قد ترغب بالفعل في تشجيع الآخرين على أخذ صورك واستخدامها. في هذه الحالة فإنك تلك الحقوق لا تزال ملكًا لك، ولكنك تسمح للآخرين بترخيص حقوق استخدامهم لها (توجد تعليمات حول ذلك أدناه). إذا كان لديك محتوى من الصور ذي قيمة على موقع الويب الخاص بك، فعليك أن تكون مستعدًا للتعامل مع الانتهاكات. تحدث سرقة الصور أحيانًا لأنّ الأشخاص غير مدركين لقانون حقوق الطبع والنشر، ولا يفهمون أنه من غير القانوني وغير الأخلاقي استخدام صور شخص آخر دون إذن. في أحيان أخرى، يستخلص أناس مواقع الويب عن عمد بغرض سرقة صور شخص آخر. بغض النظر عن كيفية انتهاك عملك، أو لماذا فإن حمايته مسؤوليتك لوحدك. حماية حقوق نشر الصور من موقعك لحسن حظك، من السهل جدا تزويد موقعك بعدد من الإشعارات والأدوات والعلامات المائية لتكون حاجزًا ضد التعدي حقوق صورك. على الرغم من أن هذه الحيل ليست مضمونة بنسبة 100٪، إلا أنها على الأقل ستساعد في تثبيط بعض الأشخاص عن سرقة صورك. 1. إضافة إشعار حول حقوق النشر تعد حماية حقوق التأليف والنشر أمرًا لازما. بمجرد إنشاء الصور الخاصة بك، فإنّ لك الحق في نسخها واستخدامها وبيعها. ومع ذلك، من المهم أن يكون لديك إشعار ظاهر يثبت ملكيتك للمحتوى الموجود على موقع الويب (هذا يشمل جميع المحتويات الموجودة على موقع الويب، وليس الصور فقط). تحتاج إلى ثلاثة عناصر لإنشاء إشعار حقوق الطبع والنشر الخاص بك: رمز حقوق التأليف والنشر ©. اسم المالك (قد يكون الشركة أو الفنان أو أي شخص آخر). السنة التي أُنشئ فيها العمل. ثم يمكنك استخدام ملحق Footer Putter لإضافة إشعار في تذييل موقع الويب الخاص بك لكي يظهر تلقائيًا في كل صفحة. 2. إضافة بيان شروط الاستخدام تعد صفحة شروط الاستخدام المكان الذي يمكنك فيه أن تحدد عددا من الأمور: ملكيتك الكاملة للصور (والمحتويات الأخرى) على الموقع الإلكتروني. عرضك لامتيازات الترخيص التي توفّرها لأي شخص يريد استخدام صورك. قواعد الترخيص الخاصة بك بما في ذلك النسبة (الإحالة) والتسعير. بدلاً من كتابة صفحة شروط الاستخدام بنفسك استخدم الملحق WP Auto Terms لإنشاء صفحة لشروط الخدمة تلقائيّا. يمكنك تحديد ما تريد أن يشمله ترخيص المشاع الإبداعي أيضًا (إذا كنت ترغب في تقديم امتيازات هذا الترخيص). 3. تعطيل زر النقر الأيمن هناك مجموعة متنوعة من الطرائق التي يمكن للأشخاص من خلالها الحصول على نسخة من صور موقعك. يعد تعطيل وظيفة النقر بالزرّ الأيمن إجراءً جيدًا للبدء به، وسيساعد أيضًا في حماية جميع المحتويات الأخرى من النسخ واستخدامها في أي مكان آخر. يعدّ ملحق الحماية من نسخ المحتوى wp وتعطيل النقر بالزرّ الأيمن أحد الوسائل التي تتيح لك تعطيل تلك الوظيفة. 4. تعطيل الربط الساخن إذا لم تكن قد سمعت بالربط الساخن (Hot linking) من قبل فالمقصود به هو العملية التي يعرض بها شخص صورك على موقعه عن طريق رابط مباشر إليها (بدلًا من الاستيلاء على نسخة من الملف ورفعها على موقعه). نظرًا لأنّ من يفعل ذلك يحمّل الصورة مباشرة من خادمك، ولا يضع نسخة منها لديه، فإنه في الواقع يستخدم النطاق الترددي (Bandwidth) لخادمك، وبالتالي موارده. من هذا المنطلق فإنّ الأمر ليس فقط غير قانوني لانتهاكه حقوق النشر، بل إنه غير أخلاقي أيضًا لأنه يكلفك أنت أموالاً مقابل الوصول لتلك الصورة. سيساعدك ملحق All In One WP Security & Firewall في تعطيل إمكانية الربط الساخن على موقعك. 5. إضافة البيانات الوصفية (Metadata) للصور إذا كنت تخطط لإبراز صورك على موقعك الإلكتروني، فتأكد من أنّ كل صورة منها مشتملة على البيانات الوصفية لحماية حقوق النشر، بما في ذلك تاريخ التقاطها واسم المالك. سنسرد لك في ما يلي الطرق المختلفة التي يمكنك من خلالها القيام بذلك: البيانات الوصفية بصيغة ملف صوري متبادل (Exif): اضبط الكاميرا الرقمية مسبقًا لالتقاط جميع البيانات الوصفية الأساسية لحماية حقوق النشر، بما في ذلك التاريخ الذي تم التقاطه واسم المالك. البيانات الوصفية حسب نموذج المجلس الدولي للاتصالات الصحفية (IPTC) لتبادل المعلومات: أضف البيانات الوصفية في مرحلة ما بعد الإنتاج باستخدام برنامج التصميم الذي تختاره. وسوم البيانات الوصفية: أضف وسومًا بها بيانات وصفية إلى الصور وغيرها من الملفات البصرية مباشرة من سطح مكتب حاسوبك. استخدم نافذة خصائص الملف (Properties) على الحواسيب الشخصية لإدخال البيانات الوصفية لحقوق النشر. على نظام التشغيل ماك Mac، أدخل البيانات عند عرض نافذة المعلومات. الإدراج اليدوي لبيانات الصور على منصة ووردبريس: أدخل البيانات الوصفية لحقوق طبع ونشر الصور يدويًا كلما قمت بتحميل صورة إلى منصة الووردبريس. الإدراج التلقائي لبيانات الصور على منصة ووردبريس: استخدم الملحق Media Library Assistant للمساعدة في الحصول على البيانات الوصفية للصور، بصيغة IPTC أو EXIF، وكذلك للتعديل على مجموعات من الصور. 6. صور على شكل علامات مائية بالنسبة للصور ذات القيمة المالية فمن المهم للغاية بذل كل ما في وسعك لحمايتها من السرقة. دمغ تلك الصور بعلامات مائية هو أحد أفضل طرق حمايتها. علاوةً على ذلك، تمثل العلامات المائية طريقة رائعة لزيادة الوعي بعلامتك التجارية، نظرًا لأنه سيكون من الواضح وجود ختم به عنصر من هويتك التجارية (شعار، أو توقيع، أو أيقونة). ستضمن بتلك الطريقة أنّ أي شخص يستغل نسخة من صورك سيحتاج أيضًا مشاركة إثبات ملكيتك لحقوق الطبع والنشر. لكن تذكر أن العلامة المائية ينبغي أن تكون متسقة على جميع الصور. كما يلزم أن تستخدم نفس الاسم أو الأيقونة، ويتعين أن تكون العلامة المائية بنفس اللون، والعتامة، والحجم، والوضع، لذلك فكر في هذا الأمر بعناية قبل الالتزام بشيء ربما يعمل جيدًا على صورة واحدة فقط ولكن ليس على البقية. هناك ثلاث طرائق لإضافة علامة مائية على صورك: يدويًا: استخدم برنامج تصميم مثل إليستريتور أو فوتوشوب لإضافة العلامة المائية إلى صورك. إذا لم يكن لديك برنامج تصميم فيمكنك استخدام أداة مجانية مثل Canva. بالجملة: هناك عدد من خدمات العلامة المائية المجانية المتاحة. يوفّر موقع اVisual Watermark عددًا من قوالب العلامات المائية (إنْ لم تكن قد أنشأت واحدة) وتمكّنك من تطبيق العلامة المائية على مجموعة كبيرة من الصور مرة واحدة. باستخدام ملحق: يساعد الملحق Image Watermark المستخدمين على تحميل العلامات المائية، وتحريرها، ثم تطبيقها على جميع الصور في مجلد الوسائط. 7. منع الوصول إلى الوسائط يعد الملحق Response WordPress Gallery أداة رائعة لإنشاء معارض صور على موقعك. من الصدف وجود ميزة للحماية بكلمة المرور، وهي ميزة تعجبني كثيرا. سواء كنت تشعر بالقلق إزاء وصول المستخدمين الداخليين أو المخترقين الخارجيين إلى الملفات الأصلية للصور، فإن حظر الوصول إلى مجلد الوسائط بكلمة مرور قوية يعد طريقة موثوقة. 8. تسجيل الملكية الفكرية لصورك أحد الأشياء التي لم أذكرها بعد هي تسجيل حقوق الطبع والنشر. على الرغم من أن حقوق الطبع والنشر تعد امتيازًا أصيلًا، فإن وضع إشعار بحقوق الطبع والنشر على موقعك، ووضع علامات مائية، وإضافة المنع كلما كان ذلك ممكنًا، كل ذلك لا يكفي دائمًا لوقف سرقة الصور. إذا حدث واكتشفت أن شخصًا ما سرق صورك فيجب أن تكون هذه الصور مسجّلة لدى مكتب حقوق الطبع والنشر بالولايات المتحدة حتى يمكنك اتخاذ إجراء قانوني ضد المتعدي على تلك الصور. تسجيل الحقوق عملية واضحة ويمكنك القيام بها عبر تقديم طلب بسيط عبر الإنترنت. سيستغرق الأمر وقتًا قصيرًا وقليلًا من المال، لكن الأمر يستحق ذلك العناء على المدى الطويل. 9. راقب وكن على استعداد لاتخاذ الإجراءات اللازمة من المهم الإشارة إلى أن جميع الحيل المذكورة أعلاه، بما في ذلك تسجيل حقوق الملكية لصورك، تهدف إلى مساعدتك في توضيح مدى جديتك في حماية حقوق النشر. ومع ذلك، فإن ما لن تفعله هذه الحيل هو تزويدك بشخص يساعدك في فرض الحماية على صورك. تتحمل وحدك مسؤولية مراقبة الانتهاكات، ويمكنك استخدام عمليات البحث عن الصور عبر الإنترنت مثل البحث على غوغل للتحقق. إذا وجدت أي حالات سرقة، فقدّم إنذارًا لحذف المحتوى المخالف حسب قانون الألفية للملكية الرقمية. على الفور سيُبلَّغ المخالفون بنيتك اتخاذ إجراءات قانونية ضدهم. حماية المالك يعد المحتوى الذي أنشئ لموقعك على الويب شكلًا من أشكال الملكية الفكرية، ملكيتك التي تحتاج إلى الحماية. بذلت مجهودًا كبيرًا لإنشاء الصور على موقعك. لا تدع كل هذا العمل الشاق واستثمار الوقت والمال يضيعان. ضع الحواجز في مكانها المناسب لصرف الناس عن سرقة صورك وإثبات حقوقك بوضوح وحتى تتمكن لاحقًا من استرداد أي أموال مفقودة نتيجة السرقة. ترجمة - وبتصرف - للمقال ‎9 Ways to Protect Your WordPress Blog’s Images from Theft لصاحبته Brenda Barron
  2. الصورة بألف كلمة شرط أن تكون صورة مناسبة. لنستعرض معًا سبعة أنواع من الصور التي يمكنك استخدامها في حملات التسويق عبر البريد الإلكتروني، ولنتعرف على الأماكن التي نجد فيها مثل هذه الأنواع. عندما تحاول تقديم الكثير من المعلومات في حملة تسويقية واحدة، يجدر أن يكون أول سؤال يدور في ذهنك هو: "كيف أتمكن من توخي البساطة" أو "كيف أتمكن من عرض هذا بصورة أفضل؟" وبدلًا من إغراق القارئ بالنصوص، استخدم الصور المعبّرة والتي يمكنك من خلالها تلخيص الأفكار وجلب انتباه القارئ في نفس الوقت. المخططات والرسوم البيانية يصعب في كثير من الأحيان فهم الإحصاءات والتقارير والبيانات المعقدة واستخلاص الرسالة الرئيسية التي تنشدها، غير أن استخدام المخططات والرسوم البيانية لتمثيل هذه البيانات سيجعل من إيصال الرسالة المتوخاة أمرًا سهلًا ويسيرًا. هناك العديد من الأدوات التي يمكنك الاستفادة منها في تصميم المخططات والرسوم البيانية لحملتك التسويقية عبر البريد الإلكتروني: Piktochat هناك العديد من المزايا القوية في هذه الأداة المتخصصة في صناعة الإنفوغراف، إذ يمكنك إدخال بياناتك، ثم تحديد شكل الرسم البياني وتصميمه لتحصل على رسم بياني احترافي، يمكنك بعد ذلك تحميله مجّانًا (مقابل وجود علامة مائية صغيرة على الصورة) أو يمكنك ترقية حسابك للحصول على المزيد من القوالب والتحميل دون وجود العلامة المائية. هذه الأداة ممتازة في حال كانت بياناتك مبسّطة ومحدودة. Google Sheets أو Microsoft Excel يمكن لبرامج الجداول التقليدية هذه أن تحول وبكلّ سهولة جميع بياناتك إلى أنواع مختلفة من الرسوم البيانية، ومع أنّ التصميم الأوّلي الافتراضي للرسوم في هذه البرامج رديء جدًّا، إلا أنه يمكن الحصول على تصاميم جذابة إن كنت تملك لمسة فنية. وبشكل عام فإن هذه البرامج مفيدة في حال كانت بياناتك كبيرة ومعقدة. لقطات الشاشة إنّ استخدام لقطات الشاشة في الحملة التسويقية طريقة مفيدة جدًّا في عرض المزايا والمنتجات الجديدة، فبدلًا من كتابة الطريقة التي يعمل بها تطبيقك أو موقعك، يمكنك أن تعطي للقارئ صورة مجملة لما يمكن أن يراه على جهازه. هناك بعض الأدوات التي يمكن أن تساعدك في إنشاء لقطات الشاشة لحملتك التسويقية: Awesome Screenshot يمكن لهذه الأداة أن تلتقط صورًا للشاشة ومن متصفحك بشكل مباشر، إذ أنها عبارة عن إضافة لمتصفحات Chrome, Safari و Firefox. يمكنك التقاط صورة لكامل الصفحة أو لجزء منها، وتحميلها إلى حاسوبك مباشرة، لاستخدامها في الحملة التسويقية الخاصة بك. PlaceIt تمكّنك هذه الأداة الرائعة من التقاط صور الشاشة ووضعها على أنواع مختلفة من الشاشات، مثل جهاز Macbook موضوع على طاولة، أو على شاشة iPad موضوع على مقعد في الحديقة. تسمح لك هذه الأداة بإضافة لقطات الشاشة إلى تلك الصور الاحترافية دون الحاجة إلى معرفة قواعد التصوير الفوتوغرافي أو مهارات استخدام الفوتوشوب. وهناك العديد من الإعدادات التي يمكنك اختيارها، كما يمكنك رفع لقطة الشاشة من حاسوبك أو إدخال رابط الموقع الذي ترغب في التقاط صورته لتقوم الأداة بذلك بشكل تلقائي. كلما ستحتاجه بعد ذلك هو تحميل الصورة التي ستنتجها هذه الأداة ووضعها في حملتك التسويقية. الصور الشخصية قد تحتاج في بعض الأحيان إلى صورة حقيقية لمنتجك أو مشروعك ليطلع الناس عليه وعلى جودته، وفي هذه الحال، لا تتردد في التقاط بعض الصور ووضعها في حملتك التسويقية، وحتى لو لم تكن الصورة ذات جودة عالية، فقد تكون هذه الصور الشخصية ما يبحث عنه المشتركون من لمسة شخصية في رسائلك الإلكترونية. إليك بعض الأدوات التي يمكنك الاستفادة منها في الحصول على صور شخصية رائعة: كاميرا الهاتف المحمول يمتلك معظم الناس الهواتف المزوّدة بالكاميرات، وإن كنت تمتلك هاتفًا حديثًا فإن فرصتك في الحصول على صورة جيّدة لحملتك التسويقية ستكون عالية. التقط بعض الصور عبر هاتفك المحمول ثم استخدمها في حملتك التسويقية القادمة. كاميرا الهاتف المحمول + عدسات إن كنت ترغب في الحصول على صورة فوتوغرافية أكثر جمالًا (ولكنك لست قادرًا على شراء كاميرا احترافية) فيمكنك أن تجرب بعض الملحقات التي تضاف إلى كاميرا الهاتف المحمول. يمكن لأدوات مثل عدسة Moment أن تحول جهاز الآيفون الخاص بك إلى كاميرا قوية قادرة على التقاط صور جميلة ستفخر بوضعها في حملتك التسويقية. كاميرا احترافية DSLR إن كنت ترغب في التقاط بعض الصور الاحترافية لمنتجك أو مشروعك فالاستثمار في كاميرا احترافية DSLR سيكون أمرًا جيدًا. الكاميرات الموجّهة للمبتدئين ليست غالية الثمن، ويمكنك وبقليل من الإلمام بطريقة استخدام الكاميرا أن تلتقط بعضًا من الصور الفوتوغرافية الرائعة في وقت قصير جدًّا. الصور الخام Stock photographs يمكن للصورة الخام المناسبة في رسالتك الإلكترونية أن تعطي استجابة عاطفية لمنتجك أو الخدمة التي تقدمها، وقد تقنع الناس بالضغط على الإعلان. فصورة جميلة للطعام ستدفع الناس للحجز في المطعم، وصور رائعة للمناطق الاستوائية قد تلهم الناس في أخذ إجازة، خاصة عندما يكون الجوّ ممطرًا. ولكن عليك الانتباه إلى أن هناك الكثير من الصور الخام الرديئة على شبكة الإنترنت، وما تفعله هذه الصور هو العكس تمامًا، وقد تقلل من نسبة التحويل المحتملة. إليك قائمة بمواقع الصور الخام الأفضل على شبكة الإنترنت: Death to the Stock Photo موقع جيد يحتوي على المئات من الصور الخام الرائعة جدًا، يمكنك التسجيل في النشرة البريدية لتحصل على مجموعة مجانية من الصور يرسلها الموقع إلى صندوق بريدك الإلكتروني شهريًا، أو يمكنك ترقية حسابك مقابل 10 دولارات لتتمكن من الوصول إلى جميع الصور في الموقع. Gratisogrphy مجموعة من الصور يقدّمها Ryan McGuire مجّانًا، ومع أن الصور المقدّمة محدودة جدًّا، إلا أنّها ملتقطة بطريقة رائعة، وستحصل على رسالة إلكترونية جميلة إن وجدت الصورة الملائمة. IMFree موقع جيد يحتوي على مجموعة كبيرة من الصور الخام الرائعة المنظّمة ضمن مجموعات مختلفة، ستسهّل عليك عملية إيجاد الصورة المناسبة. الصور الخاصة إن لم تجد ضالّتك في مواقع الصور الخام، فالخيار التالي هو أن تصنع تلك الصور بنفسك. قد يتهيّب البعض من هذا الأمر لأنّه لا يمتلك الخبرة الكافية في برنامج الفوتوشوب، ولكن ليس من الضروري أن تكون الصورة بجودة عالية، بل ستحتاج فقط إلى أن تكون الصورة معبرة عن الرسالة التي تريد طرحها وتقدّم الحافز للقراء لزيادة نسبة التحويل. وهناك العديد من الأدوات الرائعة التي تمكّن الأشخاص ممن لا يمتلكون الخبرة الكافية في مجال التصميم من صنع صور ذات مظهر احترافي، ومن هذه الأدوات: Canva أداة رائعة لصنع صور جميلة لحملتك التسويقية، إذ تحتوي على صور خام جميلة يمكن استخدامها في تصميماتك، كما يمكنك إضافة عناصر أخرى مثل النصوص والأشرطة والإطارات والأزرار بكل سهولة ويسر. تعتمد الواجهة على مبدأ السحب والإفلات والتعامل معها في غاية السهولة، وستشعر معها بأنّك مصمم عبقري. الصور الهزلية Comics يمكن الاستفادة من الصور الهزلية في إضافة بعض المتعة والمرح إلى مشروعك التجاري أو الرسالة التي تريد طرحها، وسواء أكانت هذه الصور مضحكة أو تعيد إلى المشاهد بعضًا من ذكريات الماضي، فستساعدك هذه الصور الممتعة في زيادة إعجاب الناس بمشروعك التجاري، ولكن كن حذرًا من المبالغة في استخدام هذه الصور. إليك بعض المصادر التي يمكنك الاستفادة منها في الحصول على مثل هذه الصور: WebDonuts أرشيف للصور الهزلية المجّانية للفنّان Mike Gruhn. قد تشكّل هذه الصور الهزلية المضحكة إضافة قيّمة لرسالتك الإلكترونية إن وجدْتَ ما هو ملائم لموضوع الرسالة. الأيقونات قد يصبح استخدام الكثير من النصوص أو الصور أمرًا مربِكا للقارئ، ومن الأفضل استخدام الأيقونات للتعبير عن الأفكار بصورة مبسّطة، ومن الشائع استخدام الأيقونات لتسليط الضوء على الخصائص الرئيسية للمنتج وعلى العكس من الصور المعقدة فإن الأيقونات تجعل ما تنشده في رسالتك الإلكترونية في متناول يد القراء. هناك الكثير من الأيقونات المتوفرة على الإنترنت، ولكن سأعرض عليك بعضًا من مصادري المفضلة: The Noun Project مجموعة من الأيقونات المجانية والمدفوعة والتي يمكن تحميلها واستخدمها في المحتوى التسويقي. ويحتوي الموقع على أداة بحث رائعة تمكنك من الوصول إلى الأيقونة التي تبحث عنها بكل سهولة، ويمكن لعبارات بحث بسيطة مثل "طائرة" أو "كتاب" أن تقدّم لك مئات من الأيقونات التي يمكنك استخدامها لأغراض مختلفة. GraphicRiver متجر إلكتروني للتصاميم، حيث يعرض محترفو التصميم أعمالهم للبيع، ويتراوح أدنى مستوى للأسعار بين دولار واحد وعشرة دولارات بالاعتماد على طبيعة ومدى تعقيد السلعة المباعة. هناك الآلاف من الأيقونات المعروضة للبيع في الموقع وبأنماط وأشكال مختلفة ومتنوعة، ومن المؤكد أنّك ستجد ما تحتاجه لحملتك التسويقية. في الختام ستحقق حملتك التسويقية عبر البريد الإلكتروني نجاحات باهرة باستخدام هذه الأنواع المختلفة من الصور. أتعتقد أن هناك أنواع أخرى من الصور يمكن إضافتها إلى هذه القائمة؟ شاركنا رأيك. ترجمة -وبتصرّف- للمقال The 7 types of images that can help improve your email click-through rate لصاحبه Aaron Beashel.
  3. يتضمن العمل مع أشكال SVG (الرسوميات المتجهية متغيرة الحجم) في سير عمل تصميم الويب المتجاوب مرحلة تصميم ومرحلة تطوير. يتعامل المصممون عادةً مع مرحلة التصميم وقد يعرفون أو لايعرفون كيفية كتابة الشيفرة. ونظرًا لطبيعة SVG كتنسيق صورة وتنسيق مستند معًا، فإنّ كل خطوة تتم في محرر الرسومات أثناء عملية إنشاء SVG تؤثر بشكلٍ مباشر على الشيفرة الناتجة وبالتالي على عمل المطور المسؤول عن تضمين SVG أو كتابته كنص برمجي أو تحريكه. عادةً، خلال عملي اليومي أنا المطور الذي يسلّم المصممون له أصول التصميم، وصور SVG هي جزء من هذه الأصول. احتاجت معظم الأصول التي تم تسليمها في مشاريعي السابقة إلى المزيد من العمل و/أو جولة ثانية من التحرير في محرر الرسومات قبل أن أتمكن من كتابتها كنصوص برمجية، لأنّ شيفرة SVG الناتجة لم تُحسَّن بما فيه الكفاية لنوع العمل - خاصةً الرسوم المتحركة - التي تم استئجاري للقيام بها. سبب ذلك هو أنّ العديد من المصممين الذين عملت معهم يعرفون القليل جدًا - إن كانوا يعرفون - عن شيفرة SVG. ينشؤون رسوميات متجهة وأصول واجهة المستخدم كل الوقت، لكن بالنسبة لهم فإنّ SVG ليس سوى تنسيق صورة ولا يعرفون الكثير عن الشيفرة المتولّدة عند تصدير أصولهم كمستندات SVG. هناك بعض الخطوات التي يمكن للمصممين اتخاذها أو تجنبها - مجموعة من "افعل ولا تفعل" - يمكن أن تساعد في جعل الشيفرة المتولدة أنظف. أودّ أن أشارك بعضها في هذه المقالة، إذا كنت تعرف أي شيء آخر يرجى مشاركته في التعليقات الموجودة في نهاية المقال. النصائح التي سنتحدث عنها قابلة للتطبيق في Adobe Illustrator -محرر الرسومات المفضل لي- وكذلك محررات الرسومات الأخرى. لكن بما أنني شخصيًا أستخدم AI فهذا ما سأركّز عليه خلال هذه المقالة. سنتحدث أيضًا عن خيارات تصدير SVG الحالية المتوفرة في AI وأيّ منها تختار ولماذا. لكن لاحظ أنّ هذه الخيارات ستتغير في المستقبل، وبعدها سيتم تحديث هذه المقالة لتعكس هذه التغييرات. تعتمد هذه المقالة على حديثي "SVG لمصممي ومطوري الويب" - حديث قمت به في CSSDevConf 2015 الشهر الماضي. لذا، لنبدأ. إذا كنت تستخدم برنامج Sketch لإنشاء SVG، هناك أيضًا بعض الأشياء التي يمكن أن تقوم بها لتصدير شيفرة أنظف. شارك Sean Kesterson بعض النصائح في هذه المقالة. 1- أنشئ الأشكال البسيطة باستخدام عناصر شكل بسيطة وليس عناصر <path> هناك سبب لوجود أشكال أساسية مختلفة في SVG لإنشاء أشكال أساسية بشكلٍ جيد. يمكن للشخص إنشاء أي شكل عمليًّا باستخدام عنصر <path>، أليس كذلك؟ عناصر الشكل البسيطة (<line>، <circle>، <rect>، <ellipse>، <polygon> و<polyline>) موجودة لعدة أسباب، وأحد هذه الأسباب هو أنّها سهلة القراءة وسهلة الصيانة وقابلية للتحرير باليد من بدائلها <path>. تأتي الأشكال الأساسية مع مجموعة من الخاصيات التي تسمح لك بالتحكم في ميزات الشكل، مثل الموضع (x، y، cx، cy) والأبعاد (width وheight)، بينما لا يكون لعناصر <path> مثل هذه الخاصيات. مثلًا، يعرض المقتطف التالي الاختلاف بين دائرة تم إنشاؤها وتصديرها كشكلٍ بسيط، مقابل دائرة تم إنشاؤها وتصديرها كمسار: <circle fill="#FFFFFF" stroke="#000" cx="28.1" cy="28.1" r="27.6"/> <!-- مقابل --> <path fill="#FFFFFF" stroke="#000" d="M55.7,28.1 c0,15.2-12.4,27.6-27.6,27.6 S0.5,43.3,0.5,28.1 S12.9,0.5,28.1,0.5 S55.7,12.9,55.7,28.1z"/> إذا أردت تحريك شكلك عن طريق تحريك موضع الدائرة أو تكبيرها، يمكنك القيام بذلك عن طريق تحريك موضع المركز عبر الإحداثيات x و y أي (cx وcy) ونصف قطر الدائرة (r). بينما إذا كنت تعمل مع دائرة متولدة كمسار، يجب عليك استخدام تحويلات CSS/SVG (التحريك وإعادة التحجيم) للقيام بذلك. ثمّ بفرض أردت تحريك ذلك المسار وتتطلب منك الحركة تطبيق المزيد من التحويلات، يمكن أن يصبح لديك ببساطة فوضى تحويلات. ميزة أخرى لاستخدام الأشكال البسيطة هي أنّه في معظم الحالات، الشيفرة المطلوبة لإنشاء شكل باستخدام عناصر شكل بسيطة هي أقلّ من المطلوبة لإنشاء نفس الشكل باستخدام عنصر <path> (شاهد المقتطف اعلاه للمقارنة)، لذا فإنّ استخدام أشكال بسيطة سيؤدي أيضًا إلى حجم ملف أصغر، وهذا أفضل دائمًا. 2 - حوّل النص إلى حدود خارجية..أو لا تحوّله لتحويل النص إلى حدود خارجية: اختر النص الذي تريد تحويله اختر النوع (Type) -> إنشاء حدود خارجية (Create Outlines) الإيجابيات النص المحوّل إلى حدود خارجية سيحافظ على نوع الخط المستخدم، بدون الحاجة إلى استخدام خط ويب لعرضه. هذا يعني أنك تحفظ القليل من طلبات HTTP الإضافية ولا تخاطر بعرض نصك بالخط الاحتياطي الذي لا يبدو جيدًا بشكلٍ كافٍ لاستبدال الخط الجميل الذي اخترته. يعدّ تحويل النص إلى حدود خارجية والحفاظ على نوع الخط المستخدم جيّدًا للحفاظ على هوية العلامة التجارية عندما تُعرّف بنوع خط مستخدم، مثلًا في شعار، أقوم دائمًا بتحويل نص الشعار إلى حدود خارجية وهذا جيد للحفاظ على الخط لنصوص برمجية معينة عندما تستخدم العناوين. السلبيات النص المحوّل إلى خطوط خارجية ليس نصًا حقيقيًا: إنّه مجموعة من المسارات التي تشكل الحدود الخارجية (الشكل) للنص. وبالتالي يصبح النص غير واقعي ولا يمكن الوصول إليه، وغير قابل للبحث وغير قابل للتحديد. إذا تمّ تحويل النص إلى حدود خارجية في عنوان نص برمجي أو حتى شعار، فإنّ استخدام نص alt (إذا تم تضمين الشعار كصورة) أو عناصر سهلة الوصول لـ SVG مثل (<title> و&>) هو فكرة جيدة لتوفير نص بديل لقارئات الشاشة. أوصي بشدّة بقراءة كل شيء عن جعل SVG سهل الوصول في هاتين المقالتين لـLéonie Watson: - نصائح لإنشاء SVG سهلة الوصول - استخدام ARIA لتحسين سهولة الوصول لـSVG يمكن أن يسبب تحويل النص إلى حدود خارجية زيادةً كبيرةً في حجم ملف SVG، حسب تعقيد الخط المستخدم. تُظهر الصورة أدناه الاختلاف في حجم (وسهولة القراءة) لـSVG مع النص المحوّل إلى حدود خارجية (يسار) والنص الذي يتم تصديره كـ SVG <text>‎ (يمين). لا يمكن التحكم بالمسارات أو تحريكها بسهولة مثلما يتم ذلك في عناصر <text> (المتضمنة عناصر <tspan>). إذ تحتوي الأخيرة على مجموعة من الخاصيات التي تمنحك المزيد من التحكم في رسومك المتحركة، بينما تبقى بيانات المسار محدودة بهذا الشأن. 3- تبسيط المسارات يعرَّف المسار بمجموعة من النقاط والتي بدورها يتم تحديد كلّ منها بزوج من الإحداثيات. كلّما قلّ عدد النقاط، قلّت بيانات المسار (خاصية d)، وبالتالي انخفض حجم ملف SVG الكلي. هذه الخطوة الجيدة يجب اتخاذها دائمًا لأنّ حجم الملف الأصغر أفضل للأداء. لتبسيط مسار: اختر المسار اذهب إلى كائن (Object) -> مسار (Path) -> تبسيط (Simplify) عدّل عدد النقاط. تأكّد من أن أنّك فحصت المعاينة حتى تتمكن من معرفة كيف يتغير المسار أثناء تغيّر عدد النقاط. عدّل العدد حتى تحصل على أقل عدد من النقاط أثناء المحافظة (أو التضحية) على أفضل مظهر مرئي للمسار الذي تحتاجه. يوجد فيديو تعليمي لشركة Adobe يشرح العملية، لذا إذا كنت أكثر انسجامًا مع مقاطع الفيديو، يمكنك الاطلاع عليه هنا. يمكنك أيضًا تبسيط المسارات باستخدام أداة Warp Tool. أنا لست مصممة ولكن أستخدم عادةً خوارزمية تبسيط Ai لتبسيط مساراتي، لذا إذا كنت مصممًا متمرّسًا، من المحتمل أنّك تعرف أكثر بكثير عن أداة Warp tool مني. يوجد مقال في مجلة Smashing حول هذه الأداة، يمكنك الاطلاع عليها إن أردت. 4- تجنب دمج المسارات إذا لم تكن بحاجة للتحكم في المسارات الفردية يميل العديد من المصممين إلى جمع المسارات أو دمجها كلما أمكن ذلك. لدمج المسارات: اختر الطرق التي تريد دمجها اذهب إلى نافذة (Pathfinder <- (Window اختر خيار الدمج (Merge) من بين قائمة الخيارات أسفل اللوحة (الأيقونة الثالثة من اليسار، المبينة في لقطة الشاشة أدناه). قد يكون هناك فوائدٌ لجمع المسارات، لكن تجنبها عندما تحتاج أنت أو المطور للتحكم و/أو تحريك المسارات بشكلٍ منفصل. تم تصميم بعض الرسوم المتحركة بحيث يتم تحريك عناصر متعددة بشكلٍ منفصلٍ، أو في بعض الأحيان قد تريد فقط تصميم المسارات باستخدام ألوان تعبئة مختلفة. إذا قمت بجمع المسارات، فلن يكون ذلك ممكنًا بعد الآن. تحتاج إلى التأكّد من معرفتك لما يحتاجه المطور (أو أنت إذا كنت ستتعامل مع مرحلة التطوير أيضًا) ولما يريد القيام به مع الأشكال التي تعمل عليها، واتخاذ قرار الدمج أو عدم الدمج وفقًا لذلك. هذا سيوفر لكما الكثير من الوقت والخلاف. 5- إنشاء مرشّحات باستخدم مرشّحات SVG، وليس تأثيرات Photoshop إذا كنت تستخدم المرشّحات في قسم تأثيرات Photoshop ضمن خيار تأثير، فسيقوم Illustrator بتصدير التأثيرات التي تنشؤها كصور نقطية. مثلًا، إذا قمت بإنشاء ظل إسقاط باستخدام تأثير الضبابية Blur في فوتوشوب، فإن الظلّ المسقط المتولّد سيكون صورة نقطية مضمنة داخل SVG إما مضمنة داخليًا أو خارجيًا، باستخدام عنصر <image>. أنت بالتأكيد لا تريد ذلك عند العمل مع SVG. تحتاج لتوليد مؤثراتك كشيفرة SVG إلى استخدام مرشّحات SVG المتاحة: اذهب إلى تأثير (Effect) -> مرشّحات (SVG Filters (SVG اختر واستخدم أحد المرشّحات المتاحة في اللائحة. 6- اجعل لوح الرسم (Artboard) مناسبًا لرسمتك هل قمت يومًا بتضمين SVG في صفحة، وإعطائه ارتفاعًا وعرضًا محددين ثمّ وجدت أنه كان معروضًا بحجم أصغر من الحجم الذي حددته؟ في معظم الحالات، يكون السبب في ذلك هو وجود مساحة بيضاء داخل منفذ العرض (viewport) الخاص بـ SVG. يتم عرض منفذ العرض بالحجم الذي تحدده في صفحة الأنماط (style sheet) الخاصة بك، لكن المساحة الإضافية داخلها - حول الرسم - تتسبب في "تقليص" صورتك، لأنّ هذه المساحة البيضاء تأخذ مساحةً داخل منفذ العرض. لتجنّب ذلك، تحتاج إلى التأكّد من أنَّ لوح الرسم الخاص بك كبير بما فيه الكفاية ليناسب الرسمة بداخله، ولكن ليس أكبر منها. أبعاد لوح الرسم هي أبعاد منفذ عرض SVG المصدَّر، وأي مساحة بيضاء في لوح الرسم سيتم إنشاؤها كمساحة بيضاء داخل منفذ العرض. ليتناسب لوح الرسم مع رسمتك: حدد كامل الرسمة (أنا أستخدم الاختصار cmd/ctrl + A) اذهب إلى كائن (Object) -> ألواح الرسم (Artboards) واختر الخيار تناسب مع حدود العمل الفني (Fit to Artwork Bounds option). 7- استخدم اصطلاحات تسمية، وتجميع وطبقات جيّدة أعلم أنّ هذا يبدو كأنّه غير عقلاني، لكن يجب التأكيد عليه لعدة أسباب: ستتم ترجمة معرّفات وأسماء الفئات التي تستخدمها في محرر الرسومات إلى معرّفات وأسماء الفئات في الشيفرة المتولّدة. كلّما كانت هذه الأسماء أكثر منطقيةً وأكثر وضوحًا في تصنيف العناصر الخاصة بكل منها، سيكون هناك تعارضًا أقل عندما يعمل المطوّر مع الشيفرة. أنا لا أقول الآن أنّه يجب عليك التفكير في الأسماء المثالية - أنا متأكّدة أنّه لكلّ منّا طرق مختلفة لتسمية الأشياء ويمكن أن تكون التسمية واحدة من أصعب المهام، لكن تسمية المجموعات بشكلٍ مناسب تقطع شوطًا طويلًا. مثلًا، إذا كنت ترسم سيارة، فإنّه من المناسب استخدام معرّف العجلة لتسمية الطبقة أو مجموعة تغليف الأشكال المكوّنة للعجلة. إذا كنت تقوم بتجميع كل العجلات في مجموعة واحدة، فقد تعطيها معرّف العجلات. تؤثّر الأسماء البسيطة في التعبير عن العناصر والمجموعات وتحفظ الكثير من الوقت، خاصةً إذا كان المطوّر سيحرر الشيفرة ويعالجها يدويًا. لا يقوم Illustrator بعمل أفضل في تسمية الأشياء، لذا فإنّ تحديد الأسماء يساعد في تقليل كمية المخلّفات التي ينتجها. وبالتأكيد، سيكون هناك بعض التحرير الإضافي المطلوب للتخلّص من الخطوط السفلية المزعجة التي يصرّ Ai على توليدها، لكن استخدام الأسماء الصحيحة يساعد في جعل هذه العملية أسهل قليلًا. كما ذُكر سابقًا، ستُظهر النسخة التالية من Illustrator تحسّنًا كبيرًا في طريقة توليد SVG، متضمنةً المعرّفات المتولّدة. استخدم الطبقات لتجميع العناصر ذات الصلة. تُترجم الطبقات إلى مجموعات في الشيفرة، لذا يجب تسميتها بشكلٍ جيّد أيضًا. أنشئ طبقات/مجموعات لتجميع العناصر ذات الصلة معًا، خاصةً تلك التي قد تكون متحركة بالكامل. إذا لم يتم ذلك بالفعل في مرحلة التصميم فمن الممكن قضاء الكثير من الوقت في إعادة ترتيب وتجميع العناصر يدويًا من قِبل المطوّر. تأكّد من التجميع بشكلٍ مناسب لتوفير الوقت. يُعدّ التحدّث مع المطور في مرحلة التصميم وتصميم كيفية ستُنفّذ الرسوم المتحركة معًا هما أكبر موفران للوقت. إذا كانت الصور التي تقوم بإنشائها ستُستخدم لإنشاء SVG sprite، فإنّ الأسماء التي تستخدمها يمكن أن تُستخدم وستُستخدم من قِبل معظم أدوات الأتمتة لتوليد ملفات جديدة. لذا فإنّ استخدام أسماء واضحة ومناسبة سيؤدي إلى أسماء ملفات أنظف. 8- اختر أفضل خيارات تصدير مناسبة للويب بدءًا من Illustrator CC 2015.2 الذي تمّ إصداره في تشرين الأول 2015، يوجد تدفق عمل جديد لتصدير SVG (ملف> تصدير> SVG) لتصدير ملفات SVG مُحسّنة للويب لتدفقات عمل تصميم الشاشة والويب لديك. يمكنك أيضًا أن تختار تصدير الأغراض الفردية أو كامل لوح الرسم. راجع هذه المقالة لمزيدٍ من التفاصيل. في وقت كتابة هذا المقال، يأتي Illustrator مع مجموعة من خيارات التصدير التي تسمح لك بتوليد شيفرة SVG أفضل بشكلٍ عام. لتصدير الـ SVG الخاص بك: اختر ملف (File) -> حفظ كـ (Save As) اختر SVG من القائمة المنسدلة اضغط حفظ (Save) بمجرد النقر على حفظ، سيظهر مربع حوار يحتوي على مجموعة من الخيارات التي يمكنك تخصيصها، والتي ستؤثّر على شيفرة SVG المتولّدة: الخيارات الموضّحة في الصورة أعلاه هي الخيارات المستحسنة لتوليد SVG للويب. يمكنك بالطبع اختيار تحويل النص إلى حدود خارجية إذا لم تكن ترغب باستخدام خط ويب، وكما ترى يوفر لك Illustrator خيارًا أيضًا للقيام بذلك عند التصدير. يحدد خيار موقع الصورة (Image Location) فيما إذا سيتم تضمين أي صور نقطية داخليًا في الـ SVG الخاص بك أو خارجيًا مع رابط يدلّ عليه في الـ SVG. ومجددًا، هذا يعتمد على ما تحتاجه. يمكن أن تزيد الصور المضمنة داخليًا في الـ SVG حجم الملف بشكلٍ كبيرٍ. آخر مرة أرسل مصممٌ لي SVG مع صورة مضمنة فيه، كان حجم الملف أكثر من 1 ميغابايت! بعد حذف تلك الصورة (وبسبب تأثيرات Photoshop المستخدمة المذكورة سابقًا)، انخفض حجم الملف إلى أكثر من 100 كيلو بايت! لذا، اختر بحكمة. يمنحك خيار خصائص CSS الحرية لاختيار كيف تريد إنشاء الأنماط داخل الـ SVG: استخدام خاصيات التقديم، الأنماط المضمنة داخليًا، أو داخل وسم <style>. هذا أيضًا مسألة تفضيل وتعتمد على الطريقة التي تنوي بها التعامل مع SVG بمجرد تضمينها. إذا لم تكن الشخص الذي سيفعل ذلك، فتأكد من التشاور مع المطور لتحديد الخيار الذي يناسب احتياجاته على أفضل وجه. كلّما قلّ عدد المنازل العشرية، قلّ حجم ملف SVG. يجب أن تكون منزلة عشرية واحدة كافية بشكلٍ عام، لذا سأتّبع ذلك. لاحظ أنّه إذا اخترت 3 أو 4 منازل عشرية، مثلًا، ثمّ استخدمت أداة تحسين لتحسين SVG وخفض هذا الرقم إلى 1، فقد ينتهي بك الأمر إلى SVG معطوب، لذا من الأفضل اختيار هذا الخيار في وقت مبكر. هناك المزيد في لائحة الخيارات التي قمت بتغطيتها. كتب Michaël Chaize من Adobe مقالةً ممتازةً حول لائحة التصدير توضّح ما يفعله كل خيار تمامًا. أوصي بشدّة بمراجعة مقالته: تصدير SVG للويب مع Illustrator CC الآن، في وقت كتابة هذا المقال، سيبقى Illustrator يولّد شيفرةً غير ضرورية مثل البيانات الوصفية للمحرر، والمجموعات الفارغة، من أمورٍ أخرى، لذا ستحتاج إلى تحسين الـ SVG بشكلٍ أكبر بعد تصديره، سواء كان ذلك باليد، أو باستخدام أداة تحسين SVG مستقلة. لكن قبل أن ننتقل إلى جزء التحسين، أريد أن أشير إلى أنّك قد ترغب أو لا ترغب في التحقق من خيارٍ إضافي أثناء حفظ SVG: خيار "استخدم ألواح الرسم" ، في لائحة الحفظ: يعدّ هذا الخيار مفيدًا عندما تعمل مع صور SVG متعددة (مثل الأيقونات) وتستخدم لوح رسم لكلّ أيقونة. سيؤدي تصدير ألواح رسم متعددة إلى توليد ملفات svg. متعددة، ملف لكل لوح رسم (واحد لكل أيقونة). سيتم تعطيل هذا الخيار بشكلٍ افتراضي إذا كنت تعمل مع لوح رسم واحد. يعتمد اختيار تصدير ملف SVG واحد أو عدة ملفات SVG على كيفية تضمين SVG. مثلًا، إذا كنت تريد إنشاء SVG sprite لنظام أيقونات SVG، فهناك عدة طرق يمكنك من خلالها إنشاء واستخدام الـ sprite، وكلّ منها تتطلب منهجًا مختلفًا: تتطلّب إحدى التقنيات فصل الأيقونات في البداية، بينما تتطلّب الأخرى أن تكون الأيقونات جزءًا من صورة واحدة. سأكتب منشورًا مفصّلًا حول SVG sprite وخيارات لوح الرسم، لكن حتى ذلك الحين، يمكنك أن تأخذ نظرة عامة حول التقنيات المختلفة لـ SVG sprite في المقالة التالية التي كتبتها لـ24Ways.org: نظرة عامة حول تقنيات إنشاء SVG sprite للتحسين أو لعدم التحسين يوصى عادةً بتحسين SVG بعد تصديره من محرر رسومات باستخدام أداة تحسين مستقلة. أداة التحسين الحالية الأكثر شيوعًا هي الأداة المعتمدة على NodeJS والتي تسمى SVGO. لكن قد لا يكون من الأفضل دائمًا تحسين SVG، خاصة إذا كنت تنوي تحريكه. إذا كنت تنوي كتابة SVG كنص برمجي و/أو تحريكه، فمن المحتمل أن تقوم بإعداد بنية وثيقة معينة - غلاف المجموعات، وأسماء المعرفات التي لا تستخدمها/تشير إليها داخل الـ SVG لكنك تنوي استخدامها في جافاسكربت أو غيرها. ستتغير البنية إذا قمت بتحسين الـ SVG باستخدام SVGO (أو أي أداة تحسين أخرى). عادةً ما تزيل أدوات التحسين أي مجموعات ومعرّفات غير مستخدمة، بالإضافة إلى أنّها تطبّق العديد من التغييرات على الـ SVG للتأكد من تحسينه بشكلٍ جيد. لقد قمت بتحسين ملف SVG مرةً بعد تطبيق رسم متحرك عليه باستخدام <animate>. كان ملف الـ SVG معطوبًا والحركة بداخله، لأنّه تم تغيير البنية بالكامل. وهذا شيء يجب تذكره قبل تحسين SVG. تجنّب التحسين مستخدمًا أداة تحسين، إذا قمت بتحرير و/أو توليد SVG يدويًا ببنية معينة تحتاجها، وحسّن يدويًا قدر الإمكان. يمكن إزالة بعض مخلفات التحرير في بداية ونهاية الـ SVG يدويًا بسهولة، والمخلفات الأخرى مثل البيانات الوصفية والفئات المتولّدة من قِبل برامج التحرير التي لا تحتوي على خيارات تحسين SVG - مثل Sketch - قد يكون من الصعب تحسينها يدويًا. عمومًا، أنا لا أستخدم Sketch لتوليد SVG معقدة. أستخدم Illustrator أو Inkscape؛ إذ يأتي الأخير مع لائحة تصدير افتراضية تعطيك الكثير من الخيارات لتحسين الـ SVG قبل تصديره (انظر الصورة أدناه). يولّد Inkscape أنظف شيفرة SVG في وقت كتابة هذا المقال. أي إذا اخترت خيار تحسين SVG، لكن ضبابية واجهة المستخدم على شاشة شبكة العين وكذلك اعتمادها على X11 على OS X يجعل من الصعب استخدامه، لذلك أنا متمسكة حاليًا بـ Illustrator. إذا كنت تحتاج/تريد تحسين الـ SVG الخاص بك فإنني أنصحك بأداة SVGO، إذ يأتي SVGO مع مجموعة من الإضافات التي يمكن دمجها مع أي نوع من تدفقات العمل تقريبًا. 9- تواصل. تواصل مبكرًا ربما كان أهم نصيحة يمكنني تقديمها هو التواصل والقيام بذلك مبكرًا في عملية التصميم. أفترض أنّك الآن - المصمم الذي ينشئ SVG - لست الشخص نفسه المسؤول عن تطوير SVG (كتابة نص برمجي، التحريك، التضمين، …إلخ). تتطلّب كل واحدة من النصائح السابقة تقريبًا معرفة مرحلة التطوير وما ينوي المطور القيام به مع الـ SVG - كيف ينوون تضمينه، وكتابته كنص برمجي، وتصميمه، وتحريكه. لذا إذا لم تكن أنت نفس الشخص الذي يصنع القرارات لكلا المرحلتين، وما لم تكن تريد تضييع الكثير من الوقت في تكرار وتحرير الـ SVG، تحتاج إلى التأكّد من معرفتك لما يحتاج لمطور أن يفعله مع الـ SVG وما المنهجية (أو المنهجيات) التي سيتبعها. إذا كنت تعمل في مشروع له موعد نهائي ضيق، فمن المحتمل أنك لا تستطيع أن تضيع وقتًا كبيرًا في إجراء تغييرات ومراجعات على أصول الصور، عندما يمكنك تجنب ذلك عن طريق التواصل مبكرًا. يمكن أن يكون المصممون والمطورون أفضل أصدقاء لبعضهم بعضًا. تتطلّب طبيعة SVG أن تكون مراحل التصميم والتطوير مفتوحة على بعضها بعضًا، وهذا بدوره يتطلب من المصمم (المصممين) والمطور (المطورين) التحدّث قبل بدء عملية التصميم وطوال العملية أيضًا . ترجمة -وبتصرف- للمقال Tips for Creating and Exporting Better SVGs for the Web لصاحبته Sara Soueidan
  4. تعرفنا في المقال السابق على كيفيَّة إدراج الشرائح وتنسيقها وكيفيَّة التعديل على الشريحة الرئيسيَّة في تطبيق عروض جوجل التقديميَّة؛ سنتعلم في هذا المقال كيفيَّة إدراج الصور والفيديوهات والمخطَّطات والجداول ومختلف وسائل الشرح والإيضاح مثل الأشكال والأسهم، ثمَّ سنتطرَّق إلى ترتيب تلك العناصر ضمن الشريحة. إدراج مربع نص لا نحتاج غالبًا إلى إدراج مربع نص لأنَّ تخطيط الشريحة يتكفَّل بهذا الأمر إذ نحرص دومًا على اختيار التخطيط الملائم لما نريد كتابته ضمن الشريحة. ندرج مربع نص بالضغط على “مربع نص” من شريط الأدوات أو من قائمة إدراج ← مربع نص ثمَّ نضغط باستمرار على زر الفأرة الأيسر ونسحبه حتى يتشكل مربع بالحجم الذي نريد ثمَّ نُفلت زر الفأرة؛ نُدخل بعد ذلك النص المطلوب في المربع ثمَّ نُنسقه بالشكل الملائم. إدراج صورة تُستخدم الصور بكثرة في العروض التقديميَّة إذ أنَّها تغني عن كلام كثير وتجذب الجمهور وتعزِّز نمط التعلم البصري؛ أغلب النصوص المكتوبة في الشريحة هي عناوين للفقرات فقط وما تبقى هو صور ومخطَّطات تشرح تلك الفقرة. يوفِّر تطبيق عروض جوجل التقديمية خيارات عدَّة لإدراج الصورة هي: البحث عن الصورة في محتوى الويب وإدراجها مباشرةً. تحميلها من حاسوبك. إدراجها من حسابك في Drive. إدراجها من هاتفك بسهولة إن كانت موجودة فيه وكنت تستعمل صور Google. سنبحث عن صورة مناسبة لموضوع العرض التقديمي الذي يدور حول الوجبات السريعة لإدراجها في الشريحة الأولى؛ نختار من قائمة إدراج ← صورة ← البحث في الويب أو نضغط على “صورة” في شريط الأدوات ونختار “البحث في الويب” فتظهر نافذة في القسم الأيسر تشبه صفحة بحث Google الرئيسيَّة؛ نكتب فيها عبارة البحث ثمَّ نحدَّد الصور المناسبة من النتائج ونضغط على “إدراج“. يمكن اقتصاص بعض أجزاء الصورة بالضغط عليها مرتين متتاليتين؛ نُدوِّر الصورة قليلًا ونضعها بالمكان المناسب كما موضح. يمكن التعديل على الصورة بتغيير الشفافيَّة أو التباين أو السطوع لها أو تغيير ألوانها أو إضافة ظل أو انعكاس لها؛ نجد كل تلك الخيارات في “خيارات التنسيق” من شريط الأدوات أو بالضغط على الصورة بزر الفأرة الأيمن واختيار “خيارات التنسيق“؛ تظهر نافذة خيارات التنسيق في الطرف الأيسر؛ نعدِّل من تلك القائمة على الصورة بالشكل الذي نريد. يمكن إضافة صورة إلى الشريحة الرئيسيَّة لتظهر في جميع الشرائح أو إضافتها إلى تخطيط معيَّن وذلك بالضغط عليها بزر الفأرة الأيمن ثمَّ اختيار من “إضافة إلى المظهر” خيار “الرئيسيَّة” لإدراج الصورة ضمن جميع الشرائح أو خيار “Title Slide” -وهو اسم التخطيط- لإدراجها ضمن الشرائح ذات التخطيط نفسه. لن تتمكن من التعديل على الصورة آنذاك سوى بالدخول إلى وضع الشريحة الرئيسيَّة عبر قائمة الشريحة ← تعديل الشريحة الرئيسيَّة. يمكن إضافة إطار أو قناع للصورة بتحديدها ثمَّ اختيار “إضافة تأثير قناع على الصورة” من قائمة الأدوات؛ نحدِّد شكلًا مناسبًا لاختياره قناعًا أو إطارًا للصورة. إدراج مخطَّط يوضح المخطَّط البياني الإحصائيَّات أو البيانات بشكل رسومي مبسَّط ليتمكن أي شخص من فهمها وتحليلها. يوفِّر تطبيق عروض جوجل التقديمية خيارات رائعة لإدراج المخطَّطات وربطها مع تطبيق جداول البيانات، إذ هنالك تناغم جميل بين تطبيقات Google. سنُدرج مخطَّطًا عموديًّا من قائمة إدراج ← مخطَّط ← عمودي؛ يُدرج مخطَّط نموذجي ويُدرج معه جدول يحمل اسم العرض التقديمي نفسه في تطبيق جداول بيانات جوجل. نفتح الجدول الموجود في تطبيق جداول البيانات بالضغط على “مصدر مفتوح” من خيارات المخطَّط ثمَّ نضيف البيانات التي نريد عرضها على المخطَّط وننسِّقه أيضًا. نعود إلى تطبيق العروض التقديميَّة ثمَّ نضغط على خيار “تحديث” في المخطَّط لمزامنة التعديلات التي أجريناها. يمكن إلغاء ربط المخطَّط مع تطبيق جدول البيانات باختيار “إلغاء الربط” من خياراته فيتحول المخطَّط إلى صورة. نستطيع إدراج مخطَّط موجود مسبقًا في تطبيق جداول بيانات جوجل عبر إدراج ← مخطَّط ← من جداول البيانات؛ تظهر نافذة نحدِّد منها الجدول المطلوب ثمَّ تظهر نافذة أخرى تعرض جميع المخطَّطات الموجودة في ذلك الجدول؛ نحدِّد منها مخطَّطًا ونضغط على “استيراد“، ويمكن ترك خيار “رابط إلى جداول البيانات” مفعلًا لربط المخطَّط مع الجدول أو إلغاء تفعليه لاستيراد المخطَّط بوصفه صورةً. إدراج فيديو يوفر التطبيق إمكانيَّة البحث عن فيديو في موقع YouTube وإدراجه دون الخروج منه. سنبحث عن فيديو حول موضع تأثير التسمم بوساطة الوجبات السريعة لإدراجه وذلك من قائمة إدراج ← فيديو؛ نكتب العنوان المطلوب في مربع البحث ونختار فيديو من النتائج التي نحصل عليها كما يمكن تشغيل الفيديو ومعاينته قبل إدراجه. نستطيع أيضًا إدراج فيديو بنسخ رابطه ولصقه ضمن خيار “باستخدام عنوان URL” من النافذة السابقة أو إدراج فيديو موجود في حسابك في drive. ملاحظة: يجب أن يتوفر اتصال بالإنترنت أثناء العرض لتشغيل الفيديو المدرج من موقع YouTube، ويجب أيضًا مراعاة حقوق النشر والتأكُّد من ترخيص استخدام الفيديو أو الصورة التي ندرجها من الويب. إدراج جدول يُنظم الجدول طريقة عرض البيانات ويُسهِّل قراءتها وموازنتها؛ ندرج جدولًا عبر قائمة إدراج ← جدول أو من قائمة جدول ← إدراج جدول ثمَّ نحدِّد عدد أسطر الجدول وأعمدته. نضيف بعد ذلك البيانات إلى الجدول وننسقها من حيث حجم الخط ونوعه ولونه وتوضعه ضمن الخلايا. نَدمج بعض الخلايا بتحديدها ثمَّ اختيار جدول ← دمج الخلايا، وننسِّق ألوان خلايا الجدول من خلال خيار “لون التعبئة” الموجود في شريط الأدوات؛ نختار لونًا محدَّدًا للسطر والعمود الأول بما يتناسب مع المظهر ثمَّ ننسق بقية الأسطر بلون آخر بالتناوب للتمكن من قراءة البيانات بسهولة، ونضيف حدودًا ذات لون أبيض وسماكة صغيرة (1 بكسل) لكامل الجدول من شريط الأدوات؛ يظهر الجدول بحلته النهائيَّة كما موضح بالصورة التالية. إدراج الأشكال والخطوط تندرج الأشكال والخطوط ضمن وسائل الشرح والإيضاح وتُستخدم بكثرة في العروض التقديميَّة. يوفر التطبيق أشكالًا وخطوطًا عديدة نجدها في قائمة إدراج ← الخط لإدراج خط وقائمة إدراج ← شكل لإدراج شكل؛ يمكن إدراج الخطوط والأشكال من شريط الأدوات أيضًا. سندرج بعض الأشكال والخطوط لشرح فقرة “أضرار أخرى للوجبات السريعة”؛ ندرج أشكالًا ونضيف فيها النصوص بالضغط عليها مرتين متتاليتين؛ نربط بين تلك الأشكال بخطوط وأسهم ونغيِّر تنسيقها من شريط الأدوات حيث تظهر عدَّة خيارات فيه للتحكم بشكل بداية الخط ونهايته بالإضافة إلى سماكته ولونه. توضح الصورة التالية كيفيَّة تنظيم الشريحة باستعمال الأشكال والخطوط. نضيف دومًا انتقالات لجميع العناصر للتحكم بظهورها وفق التسلسل الذي نريده لتجنب تشتت الجمهور بقراءة الأجزاء اللاحقة من العرض التي لم تصل إليها بعد. ترتيب العناصر تتوضع العناصر فوق بعضها بعضًا بالترتيب الذي أُدرجت فيه أي يتوضع العنصر المدرج أولًا في الخلف والعنصر المدرج آخرًا في الأمام ليحجب جميع العناصر التي خلفه. لاحظ كيف حجبت الصورة التي أدرجناها الأشكال خلفها. يمكن التحكم بترتيب توضع العناصر في الشريحة من خلال قائمة ترتيب ← ترتيب حيث توجد أربعة خيارات هي: إحضار إلى المقدمة: هو إحضار العنصر أمام كافة العناصر فيظهر كاملًا ولا يختفي أي جزء منه خلف أي عنصر آخر. نحدِّد الشكل المتوضع في الخلف ونحضره إلى المقدمة باستعمال هذا الخيار. إحضار إلى الأمام: هو إحضار العنصر بمقدار مستوى واحد للأمام. نطبق هذا الخيار على العنصر الموجود خلف الصورة لإحضاره للأمام مستوى واحدًا. إرسال إلى الخلف: هو عكس الخيار السابق أي إرسال العنصر إلى الخلف بمقدار مستوى واحد. حجب في الخلف: هو إرسال العنصر خلف كافة العناصر. الخياران التاليان في قائمة ترتيب (المحاذاة أفقيًّا والمحاذاة عموديًّا) هما للتحكم بتوضع عدَّة عناصر نسبة إليهم. نحدِّد مثلًا العناصر الثلاث السابقة ونختار “يسار” من “المحاذاة أفقيًّا” ونختار “أعلى” من “المحاذاة عموديًّا” ونلاحظ كيف توضعت ضمن الشريحة. خيار “توسيط في الصفحة” من القائمة نفسها هو محاذاة العناصر نسبةً إلى حدود الشريحة إمَّا أفقيًّا أو عموديًّا.
  5. سنكمل في هذه السلسلة من الدروس شرح تطبيق مستندات جوجل والتي بَدأت بالتعريف عن التطبيق ومزاياه ثمَّ تطرَّقت إلى كيفيَّة إعداد الصفحة وتنسيق الفقرات وإدراج الجداول وتنسيقها. سنشرح في هذا الدرس كيفية إضافة المعادلات والرموز الخاصَّة ضمن المستند ثمَّ سننتقل إلى إدراج الكائنات الرسوميَّة والتي تنقسم إلى صور وكائنات رسوميَّة أو رسوميات ومخططات بيانيَّة. إدراج المعادلات والرموز الخاصَّة إن كنت تكتب بحثًا ما وصادفتك معادلة تحتاج لإدراجها ضمن بحثك أو انتقلت حديثًا لاستخدام تطبيق مستندات جوجل وتريد التعرُّف على كيفيَّة إدراج معادلة ولديك معرفة مسبقة باستعمال تطبيقات مشابهة مثل مايكروسوفت وورد (Microsoft word) فالأمر بسيطٌ جدًا. سنضيف معادلةً اكتشفها عالم الرياضيات الهندي رامانجن على فرض أنَّنا نريد كتابة بحثٍ حول أهمِّ المعادلات التي اكتشفها. بعد فتح مستند جديد وتسميته وضبط إعدادات صفحاته وإضافة العناوين والفقرات ننتقل إلى إدراج معادلة وذلك من القائمة إدراج ← معادلة يَظهر شريطٌ جديدٌ أسفل شريط القوائم يتيح خيارات عديدة لإضافة رموز وعمليات رياضيَّة وأسهم وكل ما يتعلق بالعلاقات والمعادلات الرياضيَّة. أضف إلى ذلك ظهور مستطيل لإدراج المعادلة ضمنه ولا يمكن إدراجها خارجه إذ تصبح تلك الخيارات السابقة غير مفعَّلة. سيلزمنا في المعادلة التي نريد كتابتها إدراج كسورٍ وهذا ما نجده في خيار "عمليات رياضيَّة" حيث يتوافر ضمنها الكثير من الخيارات مثل عمليات التكامل والنهايات والجمع ...إلخ. كما سيلزمنا إدراج بعض الرموز مثل الرمز π والرمز е أو غيرها مثل ألفا α وغاما γ وهذا ما نجده ضمن قائمة "الأحرف الرومانيَّة". وبذلك نكون قد أدرجنا المعادلة التالية: سأترك لك بقية الخيارات لاستكشافها ومحاولة إدراج بعض المعادلات. هنالك رموزٌ لا تجدها ضمن قائمة "الأحرف الرومانيَّة" أو في حال كنت تكتب بعض النصوص التي تحوي رموزًا خاصَّةً مثل التي ذكرناها فلا تحتاج حينئذٍ إلى إضافة معادلة؛ افتح قائمة الرموز الخاصَّة من إدراج ← رموز خاصَّة ثمَّ حدد فئة الرمز (رمز أو رمز تعبيري أو رقم ...إلخ) ثمَّ النوع، وتوضح الصورة التالية ذلك. يوفِّر التطبيق كمًّا هائلًا من الرموز الخاصَّة لذا توجد أداة بحثٍ متطورةٍ وسريعةٍ ترسم ضمنها الرمز فيظهر لك على الطرف الأيمن أو تكتب اسم الرمز ضمن المستطيل أعلى لوحة الرسم لتسهيل البحث عن الرمز المطلوب. الكائنات الرسوميَّة تُقسم الكائنات الرسوميَّة إلى صور، ورسوميات (أسهم وأشكال مثل المربع والدائرة ...إلخ) وهي غنية عن التعريف، ومخططات بيانيَّة توضح العلاقة المنطقيَّة أو الرياضيَّة بين متغيرين أو أكثر أو ترسم تابع معين. إدراج الصور يوفر تطبيق مستندات جوجل خيارات عدَّة لإدراج الصور قد لا تجدها في تطبيقات مشابهة وهذه من إحدى مزاياه؛ نُدرج صورة من القائمة إدراج ← صورة فتظهر لنا النافذة التالية: سنشرح الخيارات السابقة وهي: تحميل: تُحدِّد الصورة الموجودة في حاسوبك لرفعها وإدراجها ضمن المستند. التقاط لقطة: تُلتقط صورة من الكاميرا الموصولة مع حاسوبك لإدراجها ضمن المستند. قد تظهر رسالة تخبرك أنه لم يُكتشف أية كاميرا وأنت متأكد أنَّ الكاميرا في حاسوبك تعمل لذا تأكد حينئذٍ من الأذونات التي يتيحها المتصفح للموقع ووافق على السماح باستعمال الكاميرا. باستخدام عنوان URL: يُستعمل هذا الخيار لإضافة صورة موجودة على الإنترنت وللقيام بذلك انسخ رابط الصورة وألصقه في المكان المخصَّص له وستظهر معاينة للصورة أسفله. ألبوماتك: تُعرَض الصور المحمَّلة على حسابك في جوجل درايف (google drive) جميعها سواءً صور الملف الشخصي أو الصور التي زامنتها من هاتفك المحمول لتختار منها الصورة التي تريد إدراجها ضمن المستند. Google drive: شبيه بالخيار السابق باستثناء أنَّه أوسع إذ يعرض ملفاتك والملفات التي تمَّت مشاركتها لاختيار الصورة وإدراجها. بحث: يوجد ضمن هذا الخيار ثلاثة محركات للبحث ضمنها واختيار الصورة المناسبة وهي google وصور LIFE وصور المخزون. إدراج الرسوميَّات تعتبر الرسوميات من الأدوات المهمَّة في المستندات خصوصًا إذا كان الهدف من المستند هو الشرح والإيضاح إذ يمكن عبر هذا الخيار إدراج مربعات نصوص وأشكال وأسهم وخطوط سواءً مستقيمة أو متعرِّجة وغيرها بالإضافة إلى الصور. ندرج رسمًا عبر إدراج ← رسم. بعد الانتهاء من إضافة الشكل الذي نريده نضغط على "حفظ وإغلاق" الموجود أعلى يسار النافذة لإدراجه ضمن المستند؛ في حال أردنا التعديل على الشكل ننقر عليه نقرتين لفتح النافذة نفسها من جديد. إدراج المخططات تُستعمل المخططات لتمثيل البيانات بشكل رسومي يجعلها أكثر وضوحًا مما لو بقيت أرقامًا فقط. يوفر تطبيق مستندات جوجل إمكانيَّة إدراج المخططات بكافة أنواعها مع إتاحة الكثير من الخيارات وأنواع المخططات التي قد تذهلك. سنتعلم كيفيَّة إضافة مخطط بشكل بسيط وسطحي ولكن سنتوسع في هذا الموضوع عند شرح تطبيق "جداول البيانات" من جوجل. يجب توافر البيانات أولًا لإضافة مخطط ثمَّ إدخالها ضمن تطبيق جداول البيانات ثمَّ الربط بينها وبين المخطط الموجود في تطبيق المستندات. سنرسم مخطط تدفق نقدي للكلفة الأسبوعيَّة لإنشاء مشروع سكني خلال أربعة أشهر؛ ندرج مخطَّطًا عبر إدراج ← مخطط ثمَّ نحدِّد نوعه وفي حالتنا نختار "خطي". يظهر مخطط عشوائي على شكل صورة ويوجد أعلى يساره خيارات المخطط المرتبط؛ نضغط عليه فيظهر خياران الأول هو "إلغاء الربط" سنتعرف على وظيفته لاحقًا، والثاني هو "معلومات مفتوحة المصدر". نضغط على الخيار الثاني "معلومات مفتوحة المصدر" فننتقل إلى تطبيق "جداول البيانات" حيث يُفتح مستند جديد يحمل اسم المستند الأصلي مع اسم المخطط، وتحتوي الصفحة على بيانات عشوائيَّة موضَّحة في المخطَّط. نحذف البيانات الموجودة وننسخ البيانات من المستند ثمَّ نضيفها إلى الجدول فيصبح لدينا ثلاثة أعمدة وهي التسلسل (رقم الأسبوع التسلسلي) وتاريخ الأسبوع والكلفة الأسبوعيَّة. نريد أن نرسم خطًّا بيانيًّا بين الأسبوع والكلفة لذا ننقر على المخطط نقرتين متتاليتين فتظهر قائمة "محرر المخطط" على الطرف الأيسر. الخيار الأول هو لأنواع المخططات وقد اخترنا سابقًا النوع الخطي ويمكننا تغييره على أي حال إن أردنا ذلك. نضغط على الخيار الثاني "نطاق البيانات" لتحديد البيانات التي نريد تمثيلها؛ نحدِّد بيانات المحور الأفقي (المحور س) ثمَّ نضغط على "إضافة نطاق آخر" لإضافة بيانات المحور الشاقولي (السلاسل) ثمَّ نضغط على "موافق". في حال أردنا رسم المخطط بين رقم الأسبوع التسلسلي والكلفة نحدد عمود التسلسل عوضًا عن الأسبوع. أضف أنَّه يمكن إدراج أكثر سلسلة في المخطط نفسه. إن أردنا تغيير اسم المخطط أو اسم المحور الأفقي أو الشاقولي نحدِّد المخطط ثمَّ نحدِّد الاسم ونغيره. سيكون المخطط النهائي الناتج موضح بالصورة. انتهت مهمتنا في تطبيق "جداول البيانات" لذا ننتقل إلى تطبيق "المستندات". لا تجزع إن وجدت المخطط على حاله أي لم يتغير فيه شيء فكل ما عليك فعله هو الضغط على "تحديث" الذي يظهر بجانب زر الخيارات. وظيفة الخيار "إلغاء الربط" والذي هو إلغاء الربط بين جدول البيانات الذي عدلناه للتو في تطبيق جداول البيانات وبين المخطط الحالي الموجود في تطبيق المستندات ويتحول بعدئذٍ المخطط إلى صورة ولن نتمكن من التعديل عليه مطلقًا. إن كان لديك جدول بيانات سابق أنشأته على تطبيق جداول البيانات أو أنشأته على أي تطبيق آخر مشابه وفتحته باستعمال هذا التطبيق فيمكنك إدراج المخطط مباشرةً من إدراج ← جدول ← من جداول البيانات ثمَّ حدِّد بعدها الملف الذي يحتوي على البيانات المطلوب تمثيلها ضمن المخطط. حسنًا، سنكتفي بهذا القدر من الشرح حول المخططات البيانيَّة ولكن سيكون هنالك شرح أوسع في دروس تطبيق جداول البيانات. الخاتمة تعرَّفنا في هذا الدرس على كافَّة خيارات إدراج المعادلات والرموز الخاصَّة ثمَّ انتقلنا إلى خيارات إدراج الكائنات الرسوميَّة من صور ورسوم ومخططات بيانيَّة. إنَّ التعامل مع الخيارات السابقة سهل ولكنَّها في الوقت ذاته ذات كفاءة ومرونة وتلبي حاجات أغلب المستخدمين وهذه من مزايا تطبيق مستندات جوجل.
  6. نرى العديد من التصاميم عبر الإنترنت التي يشكّل فيها نص كثيف صورة ما لوجه شخص مثلًا. في هذا الدرس سنتعلّم كيفية القيام بذلك عبر برنامج جيمب GIMP. في هذا الدرس ستكون الصورة داكنة للغاية لدرجة أن الأسود يشكّل معظم أجزاء الصورة وفي هذه الحالة سنحتاج إلى صورة داكنة لوجه شخص. حمّل هذه الصورة المجانية لوجه هذا الطفل. تأكّد أن لون المقدمة هو اللون الأسود ثم انقر على أيقونة إضافة طبقة جديدة من لوحة الطبقات واختر خيار التعبئة بلون المقدمة (وهو اللون الأسود). استخدم أداة النص ثم ارسم بها مستطيل الكتابة بحيث يكون أكبر من مساحة الصورة حتى يغطي النص جميع جوانب الصورة. اكتب نصًا كثيفًا يغطي كامل مساحة مربع النص بخط صغير وباللون الأبيض. واختصارًا للوقت قم بنسخ نص جاهز ولصقه ضمن المربع. حدّد طبقة النص وانقر بالزر الأيمن للفأرة عليها واختر من القائمة المنبثقة خيار Add Layer Mask واختر من النافذة التي ستظهر لك الخيار الأول( White (full opacity حدّد طبقة الطفل الأصلية ثم اضغط على Ctrl+C لنسخ الطبقة ثم حدّد قناع طبقة النص واضغط Ctrl+V للصق الطبقة كقناع لطبقة النص. انقر على الطبقة الأخيرة التي قمنا بلصقها بالزر الأيمن للفأرة ثم اختر من القائمة الخيار Anchor Layer ستلاحظ كيف أن هناك بعض المساحات التي يظهر فيها النص بشكل خاطئ ويجب إزالته لذلك اختر أداة الفرشاة واختر اللون الأسود وحدّد قناع الطبقة ولوّن فوق تلك المساحات غير المرغوبة باللون الأسود. اذهب إلى القائمة Colors > Levels لتعديل مستويات الإضاءة لطبقة قناع النص. والآن ضع القيمة 170 لمؤشر الإضاءة من الجهة اليمنى كما في الصورة حتى نجعل النص فاتحًا أكثر ويظهر بشكل أفضل. وبهذا تكون الصورة النهائية جاهزة ويمكن استخدام نص بالأحرف اللاتينية التي قد تجعل مستوى التعبئة أعلى من مستوى النص العربي.
  7. سنتعلّم اليوم كيفية تعديل الصور وتطبيق تأثير Threshold وقناع الطبقة بالإضافة إلى استخدام أنواع خاصة من الفرش لصناعة تصميم أنيق وإضافة النص المطلوب على التصميم. يمثّل استخدام هذه المزايا جميعًا أساسيات تعديل الصور على الفوتوشوب لصناعة البروشورات والفلايرات وحتى صور الغلاف لصفحات الفيس بوك والتويتر وغيرها. سنحتاج أولًا إلى الفكرة الأساسية التي سنبدأ من خلالها بالبحث عن المصادر للحصول على مواد التصميم، والفكرة الأساسية هنا هي تصميم صورة فتاة صغيرة تنظر نظرةً فيها تفاؤل وتطلّع بحيث سنضيف النص “التطلّع نحو مستقبل أفضل” بحيث يمكن استخدامها في مواضيع معاناة الأطفال اللذين يمرون بظروف صعبة أيًّا كانت. ولهذا سنحتاج إلى صورة الفتاة الصغيرة ذات النظرة المميزة (المصادر مذكورة في نهاية الدرس). كما سنحتاج لتطبيق تأثير ألوان التفاؤل كقناع طبقة، لذلك حصلتُ أيضًا على صورة مفعمة بالألوان الجذابة. بالإضافة إلى مجموعة مميزة من الفرش تمثّل لطخات طلاء أو حبر ويمكن الحصول عليها من الإنترنت مجانًّا. افتح الصورة باستخدام برنامج الفوتوشوب. قص جسم الفتاة من الخلفية، واختصارًا للوقت يمكنك الاطلاع على أساليب القص المختلفة التي يمكنك استخدامها من خلال درس الدليل الكامل لقص الأشياء في فوتوشوب وسنحصل على الشكل التالي بعد إتمام عملية القص. حدّد طبقة صورة الفتاة المقصوصة ثم اذهب إلى القائمة Image > Adjustments > Threshold وسنبدأ بتطبيق تأثير Threshold على الصورة. ضع القيمة 70 في خانة Threshold Level ثم انقر على OK. نحن لسنا بحاجة للمساحات البيضاء في هذا النوع من التصاميم وإنما فقط للمساحات السوداء وأفضل طريقة لتحديد هذه المساحات بدقة هي عبر خيار Color Range لذلك اذهب إلى القائمة Select > Color Range استخدم الأداة الماصة للألوان التي سيتم تفعيلها بشكل تلقائي مع هذا الخيار واختر مساحة سوداء ضمن صورة وجه الفتاة ثم ضع القيمة 128 ضمن خانة Fuzziness لتحديد أكبر قدر ممكن من اللون الأسود ضمن الصورة. اضغط على الاختصار Ctrl+J لنسخ المساحات السوداء المحددة إلى طبقة جديدة بشكل تلقائي دون الحاجة للقيام بخطوات النسخ واللصق وإنشاء الطبقات، ثم أخفِ الطبقة القديمة تاركًا الطبقة الجديدة السوداء مع الخلفية الشفافة. أنشئ طبقة جديدة بيضاء وضعها تحت طبقة وجه الفتاة لتكون خلفية التصميم الافتراضية. ألصق صورة التصميم المضلع المفعم بالألوان فوق جميع الطبقات. ثم طبّق تأثير التمويه عليه من خلال القائمة Filter > Blur > Gaussian Blur وضع القيمة 19.4 في خانة Radius. قم بتعديل حجم هذه الصورة الأخيرة عبر استخدام الاختصار Ctrl+T بحيث تغطي كامل مساحة التصميم. هذا ما ستبدو عليه صورة التصميم حتى هذه اللحظة. ولأخذ فكرة عما سيكون عليه وضع التصميم بعد تطبيق هذه الألوان على صورة الفتاة قم بالنقر بالزر الأيمن للفأرة على طبقة الألوان واختر الخيار Create Clipping Mask لتصبح هذه الطبقة طبقة قناع للطبقة التي تحتها مباشرة وهي في هذه الحالة طبقة الفتاة ذات المساحات السوداء فقط. استخدم الاختصار B لتحديد أداة الفرشاة واستخدام فرشاة بقع طلاء أو بقع حبر وابدأ باختيار لون قريب من جهة استخدامك للفرشاة وارسم بقعًا مختلفة متنوعة في كل مرة وعلى مختلف أطراف صورة الفتاة. وهذا ما سيبدو عليه شكل التصميم بعد الانتهاء من رسم البقع حول صورة الفتاة. استخدام أداة النص من خلال الاختصار T ثم اكتب العبارة التي اتقفنا عليها في بداية الدرس وهي “التطلّع نحو مستقبل أفضل” واختر خطًّا مناسبًا، أنا اخترت هنا خطًا يدويًا بحيث يتناسق مع فكرة الرسم اليدوي للوحة واسقاط بقع الألوان على اللوحة ومن ثم الكتابة بخط اليد. وأخيرًا حدّد طبقة الفتاة وطبقة الألوان المموّهة وطبقة بقع الطلاء وطبقة النص وانقر على زر Group في أسفل لوحة الطبقات لوضع جميع هذه الطبقات في مجموعة واحدة. ثم انقر بالزر الأيمن للفأرة على طبقة الألوان واختر الخيار Create Clipping Mask لتصبح هذه الطبقة طبقة قناع للمجموعة كاملة ويتم تطبيق تأثيرها على جميع الطبقات الموجودة ضمن هذه المجموعة. هذا هو الشكل النهائي للتصميم والذي يحقق الفكرة الأساسية التي تحدثنا عنها في بداية الدرس. يمكنكم القيام بالبحث عن مصادركم الخاصة والقيام بإنشاء تصاميم مشابهة تخدم أفكاركم وأهدافكم وإضافة المزيد من التأثيرات كوضع خلفية غير بيضاء جامدة و إضافة أنواع فرش مختلفة وطبقة قناع ألوان مميزة للحصول على تصاميم روعة. المصادر صورة الفتاة الصغيرة مجانية من موقع Flickr تحت الترخيص (CC BY 2.0). صورة الألوان المضلعة مجانية من موقع Wallpaper Safari. مجموعة فرش بقع الطلاء والحبر مجانية من موقع Brusheezy ولسهولة الوصول لهذه الأنواع من الفرش ابحث ضمن الموقع عن ink splatters وعن paint splatters. عملية قص صورة الفتاة الصغيرة تمت باستخدام طريقة القنوات Channel المذكورة ضمن درس الدليل الكامل لقص الأشياء في فوتوشوب.
  8. يشبه أداء المواقع كثيرًا قاعدة 80/20، حيث إن إجراء تحسينات بنسبة 20% ستزيد سرعة الموقع الإلكتروني بنسبة 80%. فاتّخاذ خطوات بسيطة مثل تنظيم شفرة CSS يأتي بثمار طيّبة. يشرح هذا المقال خطوات بسيطة يمكن أن يؤدّي تطبيقها - إلى جانب تنظيم شفرة CSS - إلى تحسّن ملحوظ في أداء الموقع. تصغير الملفات وضغطها تعدّ إزالة الشفرة المتكررة وغير الضرروية من أبسط الطرق وأفضلها في تقليل حجم ملف CSS، ولكن هناك بعض الطرق الأخرى. تتمثّل إحدى هذه الطرق في تصغير minify وضغط ملفات HTML و CSS و JavaScript. كذلك يمكن ضغط الصور وإزالة التعليقات و مواصفات الألوان Color Profiles غير الضرورية. آلية gzip للضغط آلية gzip هي إحدى أشيع وسائل ضغط الملفات، إذ تأخذ هذه الآلية الملفات الشائعة مثل HTML ،CSS، Javascript وما شابهها وتبدأ بتحديد السلاسل النصية المتشابهة وضغطها. وكلما تم التعرّف على المزيد من السلاسل النصية كان حجم الملفات المضغوطة أصغر، وهذا يعني إرسال ملفات أصغر حجمًا من الخادوم إلى المتصفح. ليست تهيئة gzip بالأمر الصعب، وقد أبلى فريق HTML5 Boilerplate بلاءً حسنًا في هذا المجال. ولضغط الملفات بآلية gzip ستحتاج إلى إضافة ملف .htaccess إلى المجلد الرئيسي في خادوم الويب ثم تدرج في هذا الملف أنواع الملفات التي ترغب في ضغطها. لا تنسَ إضافة النقطة إلى بداية اسم الملف، لأنّ هذا الملف هو من الملفات المخفية. يمكنك أن تجد في إعدادات خادوم Apache في HTML5 Boilerplate أنواع الملفات التي يُنصح بضغطها، ولا بأس بالتذكير مرة أخرى أنّ شفرة ضغط هذه الملفات يجب أن تكون في ملف .htaccess في المجلد الرئيسي لخادوم الويب. وجدير بالذكر أن هذا الملف لا يعمل إلا مع خواديم Apache والتي تتطلب تفعيل الوحدات التالية. mod_setenvif.c mod_headers.c mod_deflate.c mod_filter.c mod_expires.c mod_rewrite.c لا تقلق إن وجدت صعوبة في هذا الأمر، فهناك بعض الخواديم التي تهيّئ لك هذه الأمور نيابة عنك، فبطبيعة الحال، ضغط الملفات وتصغير حجمها يكون دائمًا في مصلحة خادوم الويب. قياس نسبة الضغط تقدّم أداة الفحص Inspector في متصفح Google Chrome عددًا كبيرًا من المعلومات حول أداء الصفحة، ويمكن الوصول إليها من خلال التبويب Network. إضافة إلى ذلك، هناك عدد من المواقع الإلكترونية التي تساعد على معرفة ما إذا كانت خاصية الضغط gzip مفعّلة أم لا. في تبويب Network يتم التعرّف على جميع الملفات المحمّلة بواسطة المتصفح وعرض أحجام تلك الملفات والمدة التي استغرقتها عملية التحميل. لاحظ كيف أن ضغط الملفات قد قلّل من حجمها بنسبة 60% تقريبًا. يمكن التعرّف على أنواع وسائل الضغط التي يدعمها المتصفح من خلال اختيار أحد الملفات. في الصورة أعلاه نلاحظ أنّ المتصفح يدعم gzip، deflate و sdch كما هو مبيّن في ترويسة الطلب المرسل من المتصفح. أما ترويسة Header الإجابة الواردة من الخادوم فتبيّن أن الملف مضغوط بواسطة gzip. ضغط الصور قد يكون تقليل حجم الملفات النصّية مفيدًا، ولكن يمكن الحصول على نتائج أفضل من خلال ضغط ملفات الصور. يمكن لحجم ملفات الصور المستخدمة في الموقع الإلكتروني أن يصبح كبيرًا جدًّا، وضغط الصور يمكن أن يساعد على إبقاء حجم الملفات الكلي تحت السيطرة. يتجنّب الكثيرون مسألة ضغط الصور وذلك خوفًا من أن يتسبب الضغط في تقليل جودة الصورة، ولكن هذا غير صحيح في أغلب الأحيان، إذ يمكن ضغط الصورة دون المساس بجودتها، وذلك من خلال التخلص من مواصفات الألوان والتعليقات غير الضرورية. تتوفّر العديد من الأدوات التي تساعد على ضغط الصور، من أفضلها ImageOptim لنظام Mac و PNGGauntlet لنظام Window، و Trimage لنظام لينكس. تقوم هذه الخدمات بضغط صيغ الصور الأكثر شيوعًا مثل JPG و PNG. نموذج لضغط الصور غير مضغوطة، 455kb مضغوطة، 401kb باستخدام ImageOptim فإنّ حجم الصورة أعلاه قد انخفض بمقدار 14% دون المساس بدقّة الصورة أو جودتها. من الجدير بالذكر هنا أن اختيار أبعاد الصورة في HTML باستخدام خاصيتي height و width يساعد على تصيير الصورة بسرعة أكبر وذلك بتحديد الحجم المناسب للصورة. ولكن يجب الانتباه إلى أن هاتين الخاصيتين تستخدمان في تحديد أبعاد الصورة الحقيقية لا لتصغير حجمها، فمن الممارسات السيئة في هذا الصدد استخدام صورة ذات حجم كبير ثم تصغيرها باستخدام خاصية height و width، والنتيجة تحميل بيانات فائضة عن الحاجة. <img src="ocean.jpg" height="440" width="660" alt="Oceanview"> تقليل طلبات HTTP يشكّل عدد طلبات HTTP - بعد حجم الملفات - العائق الأكبر في طريق تحقيق الأداء الأفضل. ففي كل مرة يُرسل فيها الطلب إلى الخادوم يزداد وقت تحميل الصفحة، وفي بعض الأحيان تتطلب معالجة الطلب من قبل الخادوم الانتهاء من معالجة الطلب السابق، وقد تؤدّي كثرة الطلبات إلى حدوث مشاكل في الخادوم. دمج الملفات المتشابهة إحدى الطرق المتّبعة في تقليل طلبات HTTP - وربّما أسهلها - تتمثّل في دمج الملفات المتشابهة، بمعنى دمج جميع ملفات CSS في ملف واحد وجميع ملفات JavaScript في ملف واحد كذلك. يؤدي دمج هذه الملفات ثم ضغطها إلى إنشاء طلب HTTP واحد صغير نسبيًا. <!-- سيء --> <link href="css/reset.css" rel="stylesheet"> <link href="css/base.css" rel="stylesheet"> <link href="css/site.css" rel="stylesheet"> <!-- جيد --> <link href="css/styles.css" rel="stylesheet"> يجب تحميل ملفات CSS في بداية صفحة الوِب ضمن الوسم head، أما ملفات JavaScript فيجب تحميلها في نهاية الصفحة ضمن الوسم body. والسبب هو أنّه يمكن استكمال تحميل ملفات CSS أثناء تحميل بقية أجزاء الصفحة، في حين أنّه لا يمكن تصيير ملفات JavaScript متعددة في نفس الوقت، لذا فإن هذه الملفات تمنع تحميل بقية عناصر الصفحة. يجب الانتباه هنا إلى ملفات JavaScript تُحمّل لا تزامنيًا Asynchronously بعد اكتمال تصيير الصفحة، وكذلك يجب الانتباه إلى أن JavaScript قد تكون مطلوبة في تصيير عناصر الصفحة كما هو الحال عند اسخدام HTML5 shiv. شرائح الصور Image Sprites المقصود بشرائح الصور في CSS هو استخدام صورة خلفية واحدة في مجموعة من العناصر، والهدف هنا هو تقليل عدد طلبات HTTP الناشئة من استخدام مجموعة من الصور. ولإنشاء شريحة اختر مجموعة من صور الخلفية الأكثر استخدامًا ورتّبها إلى جانب بعضها البعض في صورة واحدة، ثم باستخدام CSS أضف الشريحة كصورة خلفية إلى عنصر معين، ثم استخدم خاصّية background-position لعرض الصورة المطلوبة. بهذه الطريقة، يتم تمرير الصورة خلف العنصر ليقوم الأخير بعرض الجزء الملائم من الصورة. فعلى سبيل المثال إن كانت أبعاد العنصر هي 16 بكسل طولًا و 16 بكسل عرضًا فهذا يعني أنّ هذا العنصر سيعرض 16 بكسل طولًا و 16 بكسل عرضًا من الصورة، أما باقي أجزاء الصورة تكون مخفية. هذا مثال عن شريحة تضم صورًا لأيقونات قائمة محرر النصوص، وقد أحيطت كل صورة بخطوط إرشادية لتوضيح أماكن تغيّر موقع الخلفية. يمكن إنشاء قائمة باستخدام شريحة الصور السابقة وذلك بجعلها خلفية للعنصر span، ثم يمكن تغيير موضع الشريحة بواسطة الأصناف، وبذلك يمكن عرض الأيقونة المناسبة في كل مرة. HTML <ul> <li><a href="#"><span class="bold">Bold Text</span></a></li> <li><a href="#"><span class="italic">Italicize Text</span></a></li> <li><a href="#"><span class="underline">Underline Text</span></a></li> <li><a href="#"><span class="size">Size Text</span></a></li> <li><a href="#"><span class="bullet">Bullet Text</span></a></li> <li><a href="#"><span class="number">Number Text</span></a></li> <li><a href="#"><span class="quote">Quote Text</span></a></li> <li><a href="#"><span class="left">Left Align Text</span></a></li> <li><a href="#"><span class="center">Center Align Text</span></a></li> <li><a href="#"><span class="right">Right Align Text</span></a></li> </ul> CSS ul { margin: 0; padding: 0; } li { float: left; list-style: none; margin: 2px; } li a { background: linear-gradient(#fff, #eee); border: 1px solid #ccc; border-radius: 3px; display: block; padding: 3px; } li a:hover { border-color: #999; } li span { background: url("sprite.png") 0 0 no-repeat; color: transparent; display: block; font: 0/0 a; height: 16px; width: 16px; } .italic { background-position: -16px 0; } .underline { background-position: -32px 0; } .size { background-position: -48px 0; } .bullet { background-position: -64px 0; } .number { background-position: -80px 0; } .quote { background-position: -96px 0; } .left { background-position: -112px 0; } .center { background-position: -128px 0; } .right { background-position: -144px 0; } (تجربة حيّة) معرّف الموارد الموحّد URI الخاص ببيانات الصورة إضافة إلى استخدام شرائح الصور، يمكن الاستفادة من البيانات المُرمَّزة Encoded للصورة وتضمينها مباشرة في HTML و CSS وذلك من خلال معرّف الموارد الموحّد الخاص بالبيانات Data URI، وبهذا لن يُرسَل أي طلب HTTP إلى الخادوم. هذه الطريقة مفيدة للصور الصغيرة والتي لا تكون عرضة للتغيير، وعندما يكون بالإمكان نقل ملفات HTML و CSS إلى ذاكرة التخبئة Cach. ولكن لا يخلو الأمر من مشاكل، إذ يصعب أحيانا تبديل هذه المعرّفات ومتابعتها وقد تحتاج إلى توليد المعرّف مرة أخرى، إضافة إلى أنّها لا تعمل مع المتصفحات القديمة وخصوصًا Internet Explorer 7 وما قبله. إن كان بالإمكان تقليل عدد طلبات HTTP باستخدام هذه الطريقة، وإن كان بالإمكان تخزين ملفات HTML و CSS في ذاكرة التخبئة فإن الفوائد التي ستجينها باستخدام هذه الطريقة تفوق المشاكل المترتبة عنها. هناك عدد من الأدوات التي تساعد في توليد معرّف البيانات مثل هذا المحوّل وأداة Patternify. ومع ذلك تأكّد دائمًا من أنّ حجم البيانات في معرّف البيانات الخاصّ بالصورة أقل حجمًا من ملفّ الصورة الأصلية. HTML <img height="100" width="660" alt="Rigged Pattern" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAAPUlEQVQYV2NkQAO6m73+X/bdxogujiIAU4RNMVwhuiQ6H6wQl3XI4oy4FMHcCJPHcDS6J2A2EqUQpJhohQAyIyYy0nBAGgAAAABJRU5ErkJggg=="> CSS div { background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAAPUlEQVQYV2NkQAO6m73+X/bdxogujiIAU4RNMVwhuiQ6H6wQl3XI4oy4FMHcCJPHcDS6J2A2EqUQpJhohQAyIyYy0nBAGgAAAABJRU5ErkJggg==") repeat; } (تجربة حيّة) خزّن الملفات الشائعة في ذاكرة التخبئة هناك طريقة أخرى لتقليل عدد طلبات HTTP المرسلة إلى الخادوم ولعرض الصفحات في وقت أقصر، وتتمثّل هذه الطريقة في إضافة الملفات الشائعة إلى ذاكرة التخبئة. فعند تحميل الصفحة للمرة الأولى يمكن تخزين ملفات معيّنة في ذاكرة التخبئة، وبهذا لن يحتاج المتصفح إلى طلب الملفات ذاتها - لمدة معيّنة - في كل زيارة لتلك الصفحة. تحديد مدّة بقاء هذه الملفات في ذاكرة التخبئة عائد إليك. وكما هو الحال مع ضغط الملفات، فإنّ تعيين مدّة بقاء الملفات في ذاكرة التخبئة يكون من خلال ملف .htaccess. ومرة أخرى فقد أعدّ فريق HTML5 Boilerplate ملفًّا خاصًّا لتعيين تاريخ انتهاء صلاحية الملفات في ذاكرة التخبئة وذلك في إعدادات خادوم Apache الخاصّ بهم. عادة ما تخزّن الصور ومقاطع الفيديو والخطوط وملفات الوسائط المعروفة لمدة شهر في ذاكرة التخبئة، أمّا ملفات CSS و JavaScript فتخزّن في الغالب لمدة عام كامل. وفي حال كانت ملفات CSS أو غيرها من الملفات عرضة للتغير في فترات متقاربة، يمكن تغيير اسم الملف - ومن الأفضل أن يكون الترقيم متسلسلًا - ليُحمَّل الملف من خلال المتصفح. كذلك يمكن تغيير مدة بقاء هذه الملفات في ذاكرة التخبئة إلى قيمة أقل. ExpiresByType text/css "access plus 1 year" ExpiresByType application/javascript "access plus 1 year" إن كانت ملفات CSS و JavaScript تتغيّر في كل أسبوع ولا يُتحكَّم في إصداراتها باستخدام ملفات منفصلة فمن الأفضل تغيير قيمة "access plus 1 year" إلى "access plus 1 week". ويمكن مراجعة صفحة صيغة mod_expires للتعرّف على القيم المتاحة. ترجمة - وبتصرّف - للمقال Performance & Organization لصاحبه Shay Howe. حقوق الصورة البارزة محفوظة لـ Freepik
  9. يُعتبر التعامل مع الصور جزءًا أساسيًا من عملية تحرير وإخراج المُستندات الرقميّة، ورغم أن رايتر لا يتضمن سهولة برنامج Microsoft Word في تحرير الصور المُدرجة إلا أنّ إمكانياته تبقى عالية وتخدم شريحةً واسعةً من المُستخدمين، في هذا الدرس سنتناول جوانب مختلفة في التعامل مع الصور ضمن رايتر. للبدء بإدراج صورة سوف نذهب إلى قائمة Insert > Image، بعد اختيار الملف المطلوب نضغط على Open لتظهر الصورة أمامنا في مساحة العمل مع ثماني مربعات خضراء صغيرة مُحيطة بها، والتي تُعطينا تحكّمًا في أبعاد الصورة ضمن المُستند عبر النقر بزر الفأرة الأيسر على أحدها وتحريك المؤشّر. لاحظ أنه يُمكننا الضغط على زر Shift من لوحة المفاتيح أثناء تعديل الأبعاد للمحافظة على نسبة الطول إلى العرض. أما النقر المباشر على الصورة عينها مع التحريك – باستخدام الزر الأيسر للفأرة – فإنه يُتيح لنا نقل موضع الصورة ضمن المستند. لنضغط الآن على الصورة بالزر الأيسر للفأرة وننتقي الخيار Format Image، ستظهر أمامنا نافذة ضبط الإعدادات الخاصّة بالصورة. في علامة التبويب الأولى Type لدينا ثلاث خصائص: size (الحجم)، حيث يمكننا من خانتي Width (العرض) و Height (الارتفاع) تحديد حجم الصورة بالأرقام بدلًا من الاعتماد على النظر، بالإضافة إلى خيار Keep ratio للحفاظ على التناسب بين الطول والعرض، وخيار Original size (الحجم الأصلي) لإلغاء التعديلات التي أدخلناها. لاحظ أنّه يُمكننا أيضًا التحكّم بحجم الصورة كنسبة مئوية بعد تفعيل الخيار Relative to (بالنسبة إلى). انتبه إلى أن خيار Keep ratio (الحفاظ على التناسب) يحافظ على التناسب الحالي للصورة سواءً أكان تناسبًا أصليًا أم مُعدلًا، لذا إن رغبت بالحفاظ على التناسب الأصلي اضغط أولًا على زر Original size (الحجم الأصلي) ثم فعّل بعد ذلك خيار الحفاظ على التناسب. Position (الموضع) تُمكّننا من اختيار مكان الصورة ضمن المستند بدقّة بدل التحريك اليدوي، وذلك عن طريق ضبط قيمتي الانحياز الأفقي (Horizontal) و الرأسي (Vertical)، بتحديد الجهة (يسار، يمين، وسط، أعلى، أسفل إلخ) من القائمة المنسدلة الأولى و المقياس (الهوامش، الصفحة إلخ ) من القائمة المنسدلة الثانية. فمثلًا لتوسيط الصورة ينبغي أن نضبط خانتي أفقي و رأسي إلى القيمة وسط بالنسبة إلى الصفحة بالكامل. في علامة التبويب الثانية Options (خيارات) يُمكننا تحديد اسم للصورة من خانة name (الاسم)، هذا يُساعدنا أثناء تصفّح المستند باستعراض الصور (عن طريق نافذة التصفّح F5)، أو عند إنشاء فهرس للرسومات ضمن المستند (سنتحدث عن إنشاء الفهارس لاحقًا بالتفصيل). عند تفعيل خيارات Protect (الحماية) يُمكننا قفل إمكانية تغيير حجم أو موضع الصورة أو منع إضافة تأثيرات عليها. كما يمكننا من هنا إلغاء تفعيل خانة Print (الطباعة) بهدف إخفاء الصورة عند طباعة المستند. يمكنك التأكّد من ذلك عبر تفعيل خيار File > Print Preview. لسان التبويب الثالث يتضمن خيارات عدّة لأسلوب التفاف الصورة ضمن النصّ عبر ستّ وضعيّات. فمثلًا لجعل النص يتلف حول الصورة من الجهات الأربع نختار البند Parallel (موازي)، مع إمكانية زيادة الهوامش المحيطة بالصورة من الخانات الأربعة (يسار، يمين، أعلى، أسفل) ضمن خصائص Spacing (التباعد). لتزويد الصورة بهدف تشعبي، كرابط إلى الوِب أو ملف ضمن جهاز الحاسوب، سوف نستخدم علامة التبويب Hyperlink (ارتباط تشعبي)، ضع عنوان الرابط ضمن خانة URL (العنوان)، أو اختر الملف من زر Browse (استعراض). الآن ضمن علامة التبويب Picture (صورة) يمكننا قلب الصورة رأسيًا أو أفقيًا، نحتاج إلى ذلك عندما نُغيّر اتجاه الكتابة على الورق بما يؤمّن تلائم الصورة مع النصّ. من لسان التبويب Crop نستطيع تنفيذ عمليات الاقتطاع على الصورة للإبقاء على جزء مُحدد منها، عبر إعطاء قيم جديدة للأبعاد من الجهات الأربع: يُمكننا التعامل مع علامة التبويب Border (الحدود) بالأسلوب المعتاد، أما خيارات Backrounf (الخلفية) فهي غير قابلة للتطبيق باعتبار تعاملنا مع الصور في هذه الحالة. لننتقل الآن إلى شريط أدوات الصور والذي يظهر فوق شريط الحالة فور إدراجنا لصورة جديدة. الأداة الأولى تُسمى Filter والتي يمكننا استخدامها لتطبيق مجموعة من المُرشّحات (الفلاتر) الجاهزة على الصورة، كتحويلها إلى رسم فحمي، قلب ألوانها، إعطائها تشويشًا بكسليًا إلخ، يمكنك استعراض المُرشّحات والتحقق من أسلوب عملها بسهولة. القائمة المنسدلة التالية تتضمن ثلاث خيارات لونيّة؛ تحويل الصورة إلى تدرجات الرمادي، الأبيض والأسود فقط، أو تحويلها إلى علامة مائية بألوان فاهية للغاية. الزر الثالث بعنوان Color (اللون) وهو يشمل على ست خانات للتحكّم بقيم الألوان الثلاثة الأساسيّة (الأحمر، الأزرق، الأخضر) إضافةً إلى قيم السطوع، التشبّع والجاما. الخانة التالية تتحكّم بشفافيّة الصورة، فعن طريق إعطاءها قيمة 100% مثلًا ستختفي الصورة بالكليّة، أو بقيمة 85% ستصبح الصورة أشبه بعلامة مائية أكثر. الخيارات المتبقيّة تُعطينا القدرة على قلب الصورة رأسيًا أو أفقيًا، واستدارتها مع أو عكس عقارب الساعة. لننقر مُجددًا على الصورة بالزر الأيسر للفأرة، الخيار الأول المُتاح ضمن القائمة المنبثقة يُدعى Arrange (ترتيب) وهو يتعلق بموضع الصورة في حال وجود عدّة صور، بما يُعطينا تحكّما بترتيب الصور بعضها وفق بعض، أيها في الأمام، وأيّها في الخلف. ضمن هذه القائمة لدينا أيضًا خيار Wrap (الالتفاف) والذي يشمل على خيارين إضافيين عن الخيارات المضمّنة في النافذة السابقة، وهما أولًا خيار In Background (في الخلفية)، حيث يمكن للنصّ أن يمر فوق الصورة، وبزيادة شفافية الصورة إلى نسبة تزيد عن الثمانين بالمئة تتحوّل الصورة إلى علامة مائية: أما الخيار الثاني فهو Enable Contour (الحد الخارجي)، والذي يمكن تسميته بالتضمين الذكي للصورة عبر النصّ، في هذه الحالة لن يلتف النصّ حول الصورة على شكل صندوق، وإنما بأسلوب يحاكي الحدود الخارجيّة للصورة، فإن كانت دائريّة الشكل سنحصل حينها على نتيجة مشابهة لما يلي: للتعديل على أسلوب الحدّ الخارجي يمكننا أخذ خيار Edit Contour (تحرير الحدّ الخارجي) من القائمة السابقة، ومن النافذة الجديدة نستطيع حذف الحدّ التلقائي ورسم حد آخر جديد: نعود إلى خيارات النقر بالزر الأيسر للفأرة على الصورة مع الخيار Insert Caption (واصفة)، يُمكّننا هذا الخيار من كتابة اسم توضيحي للصورة مع إمكانية تحديد تعداد رقمي تلقائي: كانت هذه هي أهم الإعدادات المتعلقة بالتعامل مع الصور المُدرجة ضمن مستندات رايتر ليبر أوفيس.
  10. تشكّل الصور جزءًا أساسيًا ومهمًا من العروض التقديمية وتساعد على إيصال الأفكار بصريًا. ويتيح بوربوينت إمكانية إدراج عدد غير محدود من الصور في العرض التقديمي الواحد وبمختلف الصيغ والأحجام. وفي بعض الأحيان نحتاج إلى إدراج عدد كبير من الصور بصورة متتالية مما يجعل العملية مملة ومطوّلة. في هذه الحالة يمكننا استخدام خاصية ألبوم الصور لإدراج العدد المرغوب من الصور دفعة واحدة. كيفية إنشاء ألبوم صور سواءً بدأت بإنشاء ألبوم الصور من عرض تقديمي جديد أو من عرض تقديمي موجود مسبقًا، بكل الأحوال سيتم إنشاؤه في عرض تقديمي جديد. أي أنّ ألبوم الصور هو عبارة عن عرض تقديمي مستقل يحتوي على صور موزّعة بشكل منفصل؛ كل صورة على شريحة. لكن يمكن دائمًا تعديله وإضافة شرائح أخرى وتصميمها حسب الرغبة. لإنشاء ألبوم صور، اذهب إلى تبويب إدراج Insert> ألبوم صور Photo Album: من مربّع الحوار Photo Album انقر على زر File/Disk: بعد ذلك انتقل إلى الملف الذي تحفظ فيه الصور التي تريد إضافتها إلى الألبوم، حددّها، ثم انقر على زر Insert: يمكنك في نفس الوقت إدراج مجموعة صور من مجلدٍ آخر بالنقر على زر File/Disk مجددًا وتحديد الصور من ذلك المجلد. بعد الانتهاء من إدراج الصور، انقر على زر Create لإنشاء الألبوم: وكما ذكرنا أعلاه، سيتم إنشاء الألبوم في عرض تقديمي جديد باستخدام الخيارات الافتراضية لتخطيط وتنسيق الألبوم. ويمكن تعديل الألبوم وتغيير تخطيطه وتنسيقه كما سنأتي إلى ذكره في فقرات لاحقة. كيفية تعديل الألبوم تتوفر العديد من الخيارات لتعديل تنسيق صور الألبوم وتغيير ترتيبها، إضافة تسميات توضيحية للصور، أو تغيير تخطيط الألبوم، وكالتالي: تنسيق الصور وترتيبها لتغيير تنسيق الصور أو ترتيبها، اذهب إلى تبويب إدراج Insert> ألبوم صور Photo Album> تحرير ألبوم الصور Edit Photo Album: سيُفتح مربّع الحوار Edit Photo Album، وهو نفسه مربّع حوار إنشاء ألبوم جديد، الفرق هو أنّك ستقوم بتعديل ألبوم قمت بإنشائه سابقًا وليس إنشاء ألبوم جديد. لإجراء أي تعديل، يجب اولًا ان تؤشر الصورة/الصور التي تريد تعديلها ثم استخدم خيارات التنسيق المتاحة: لزيادة/إنقاص سطوع الصورة. لزيادة/إنقاص تباين ألوان الصورة. لتدوير الصورة باتجاه/عكس اتجاه عقارب الساعة. لحذف الصورة. لتغيير ترتيب الصورة وتحريكها إلى الأعلى أو الأسفل. لمعاينة التعديلات التي تجريها على الصورة قبل تطبيقها. لتطبيق التعديلات على الألبوم انقر على زر تحديث Update. تخطيط صور الألبوم بإمكانك تعديل تخطيط الألبوم من نفس مربّع الحوار Edit Photo Album. فمن قائمة Picture Layout يمكنك تغيير طريقة توزيع الصور على الشرائح وتخطيطها: بإمكانك اختيار الخيار Fit to slide لعرض صورة واحدة في الشريحة، وتكون الصورة ملء الشريحة، الخيار 2 pictures لعرض صورتين في الشريحة الواحدة، أو الخيار 4 pictures with title لعرض 4 صور في الشريحة مع عنوان للشريحة. أمّا من قائمة Frame shape فيمكن تعديل شكل إطار الصورة واختيار إطار مدوّر الحوّاف، إطار أبيض عريض، إطار أسود مزدوج، وغيرها. علمًا أنّ هذه الخيارات تكون غير فعّالة عند اختيار تخطيط الصورة Fit to slide، وهذا بديهي، لأنّ الإطار لا يظهر إذا كانت الصورة ملء الشريحة: وأخيرًا، من حقل Theme يمكن اختيار أحد النسق الافتراضية المضّمنة في بوربوينت، أو غيرها إن وجدت محفوظة على جهازك، وتطبيقها على الألبوم. انقر على زر Browse لاختيار النسق المرغوب: يمكنك معاينة هذه الخيارات قبل تطبيقها عن طريق مربّع المعاينة الجانبي، ولتطبيقها انقر على زر Update. في المثال أدناه قمنا باختيار 2 pictures لتخطيط الصور، Simple Frame White لشكل الإطار، وSlice لنوع النسق: ملاحظة1: خيارات تخطيط الصور تُطبّق على جميع شرائح الألبوم، وليس على صورة محدّدة واحدة فقط. ملاحظة 2: يمكنك أن تتحكّم أكثر بنسق وتصميم خلفية شرائح الألبوم عن طريق الخيارات في تبويب Design: خيارات أخرى من الخيارات الأخرى المتاحة في مربّع الحوار Edit Photo Album هو إضافة مربّع نص بالنقر على زر New Text Box. ويتم إدراج مربّع النص بعد الصورة التي تحدّدها في قسم Pictures in album وحسب توزيع الصور المحدّد في قائمة Picture layout. علمًا أنّه يمكن تغيير ترتيب مربّع النص باستخدام أسهم الترتيب التي ذكرناها أعلاه. ولتحرير النص في مربّع النص، انقر على زر Update بعد إضافته ثم أدخل النص المرغوب في المربّع على الشريحة: الخيار الآخر هو إضافة تسميات توضيحية تحت كل صور الألبوم بتأشير مربع الخيار Caption below all pictures ثم النقر على زر Update. ويكون هذا الخيار غير متاح عندما يكون تخطيط الصور Fit to slide: بشكل افتراضي، سيتم إدراج اسم الصورة الأصلي كتسمية توضيحية، لكن يمكن تغيير الاسم وإدخال أيّة تسمية أخرى وتنسيقها حسب الرغبة: الخيار الأخير هو تغيير ألوان كل صور الألبوم إلى الأسود والأبيض بتأشير مربع الخيار All pictures black and white والنقر على زر Update: خاتمة يمكن أن يكون ألبوم الصور من الخيارات المفيدة لتجميع وعرض صورك بطريقة جذّابة ومرتّبة، أو يمكنك استخدامه كأداة لاختصار الوقت عند إنشاء العروض التقديمية التي تتضمّن صور كثيرة بإضافة الصور دفعة واحدة، ومن ثم مواصلة العمل على إنشاء وتصميم العرض التقديمي بإضافة شرائح أخرى. هل استخدمت خاصية ألبوم الصور من قبل؟ ولأي غرض استخدمتها؟ شاركنا أفكارك عبر صندوق التعليقات.
  11. إن المحافظة على أقل حجم للصورة هو الجزء الأهم في جعل موقعك خفيفًا وسريعًا. من الممكن تخفيض حجم الصورة مع المحافظة على دقة جيدة لها عبر فهم القليل عن ضغط الصور وكيفية تحسين هذه الصور من أجل الويب. حفظ من أجل الويب والأجهزة في الفوتوشوب أول مفتاح لتحسين الصورة هو اختيار تعديل الصورة وحفظها من أجل الويب في الفوتوشوب. إن كنت تستخدم عادة خيار “حفظ” أو “حفظ باسم…” فقد حان الوقت لتعلّم حيلة جديدة. File > Save for Web & Devices… من خلال هذه القائمة يمكنك البدء بخيار حفظ الصور من أجل الويب. هذه التقنية تمنحك خيارات إضافية للتحكم في الصورة، مع معاينة كيف ستبدو الصورة بعد الضغط. حتى أنه يوجد خيارات لتنعيم الصورة للمستخدمين المتقدمين. هنالك ثلاثة تنسيقات مختلفة سنتحدث عنها في هذا الدرس، وهي التنسيقات الأكثر شيوعًا التي تُستَخدم عمومًا عبر الويب: .jpg تنسيق الضياع، وهو ممتاز للصور الفوتوغرافية. .png 8bit مضغوط بأقل حجم ممكن من هذا النوع ويتميز بنطاق ألوان محدود. .gif وهو أيضًا مضغوط بحجم ضئيل يشابه png 8bit ولكن png يشكّل خيارًا أفضل. ستكون هنالك حالات قد تختار فيها نوعية png 24bit وهي التي تستخدم عادة للصور التي تحوي قناة ألفا من أجل الأجزاء الشفافة على الويب ولكننا لن نتحدث عن ذلك في هذا الدرس. وهي عادة أكبر حجمًا من باقي الأنواع نظرًا لاستخدام نطاق أوسع من الألوان. ضغط .jpg إن تنسيق .jpg هو الخيار المناسب للصور ذات نطاق ألوان واسع التي لا تحوي تحولات حادة أو حواف ناعمة. بسبب الضغط الخوارزمي الخاص بها فهي ممتازة للصور الفوتوغرافية. من الممكن جدًا تخفيض حجم الصور وضغطه إلى حد كبير مع المحافظة على دقة عالية للصورة. خذ الصورة التالية كمثال: سيكون من الصعب جدًّا التمييز بين الصور الثلاث خصوصًا ما بين الصورة ذات الدقة العالية جدًّا (جزء مكبّر من الصورة الأصلية) والصورة المحفوظة بدقة “عالية” (أو دقة 60%). الصورة المثال تمثّل ربع حجم الصورة الأصلية. مع ضغط صور .jpg يمكنك ضبط دقة الصورة بحرّية كبيرة مع تخفيض حجم الملف. وستجد أن دقة ما بين 60 إلى 70% جيدة جدًّا للصور الفوتوغرافية. وفي حال تواجد نص أو كتابة داخل الصورة فستلاحظ بعض التشوهات على أطراف النص الحادة مما يدفعك إلى رفع دقة الصورة أكثر لتجنب ذلك. ضغط .gif و .png إن تنسيقي .gif و.png 8bit هما الأفضل للصور ذات نطاق ألوان محدود (إنها تظهر حتى 256 لونًا فقط) والتي تحوي على مساحات واسعة من لون واحد. تقدّم هذه التنسيقات في هذه الحالة نتيجة قريبة جدًّا من الصورة الأصلية مع توفير أكبر من حيث الحجم بالمقارنة مع تنسيق .jpg. وهي عادة ما تُستخدم من أجل عناصر الواجهات والأيقونات والصور التي تحوي نصوصًا يتوجب أن تظهر بدقة جيدة. في معظم الأحيان يقدّم .png 8bit ضغطًا أفضل من تنسيق .gif. وكلا التنسيقان يدعمان شفافية أجزاء الصور (ينبغي عدم الخلط مع مسألة شفافية ألفا لتنسيق .png 24bit). في الحقيقة إن حجم الصورة يؤثّر إن ضغط صورة واحدة سيخفف من حجم الصفحة قليلًا ولكن إن جعلت من ضغط الصور ممارسة دائمة وقمت بضغط جميع الصور في الموقع فإنك ستخفض كميات كبيرة من أحجام الملفات. وعبر تخديم ملفات أصغر يمكنك جعل تحميل الصفحات أسرع وبالتالي ستكون تجربة المستخدم أفضل وأروع. إن مسألة وقت تحميل الصفحة تشكل أحد أكبر العوامل في الحفاظ على المستخدمين. وفي أحد آخر استطلاعات الرأي أكّد 51% أن الوقت الطويل لتحميل الصفحة كان العامل الأساسي الذي دفعهم للابتعاد عن تلك الصفحة. إن تحسين الصور ليس الطريقة الوحيدة لتسريع موقعك ولكنه طريقة ممتازة للبدء. ترجمة –وبتصرف- لمقال Speed Up Your Website with Better Image Optimization in Photoshop لصاحبه David Leggett الصورة المستخدمة للشرح وفي الصورة البارزة من موقع Flickr للمصور Ray Dumas تحت الترخيص (CC BY-SA 2.0)
  12. تعرّفنا في الدرس السابق على دفتر الملاحظات الافتراضي OneNote وتطرّقنا إلى الأدوات والخصائص التي يوفّرها لتدوين الملاحظات، تنظيمها ومشاركتها. كما قمنا بشرح كيفية إنشاء دفاتر الملاحظات، المقاطع، الصفحات، والصفحات الفرعية لغرض استخدامها لتنظيم المحتوى. بعد إنشاء الصفحات على OneNote يحين وقت إضافة وحفظ الملاحظات. وبتنوّع خيارات الإدراج على OneNote تُتاح لك مرونة كبيرة في إضافة وحفظ أنواع كثيرة من المعلومات، من النصوص، إلى الصور، إلى الملاحظات الصوتية/المرئية، إلى قوائم المهام. وهذا ما سنغطّيه في هذا الدرس. إضافة ملاحظات نصيّة يمكنك إضافة الملاحظات النصيّة على صفحات OneNote بسرعة وسهولة، في الموضع المرغوب، وحسب الترتيب والتنسيق المرغوب. كل ما عليك فعله هو النقر على مكان فارغ في الصفحة والبدء بإدخال النص: ستلاحظ عندما تبدأ الكتابة ظهور مربّع لاحتواء النص الذي تدخله. في الحافة العليا من المربّع توجد 4 نقاط، عند النقر عليها سيظهر شريط أدوات التنسيق السريع الذي يمكنك استخدامه لتغيير حجم الخط، لونه، إضافة وسم للملاحظة، إلخ: ملاحظة: للوصول إلى أدوات التنسيق كاملة اذهب إلى تبويب Home. كما يمكنك تغيير موضع الملاحظة بالنقر على هذه النقاط الأربعة وسحب المربع ثم إفلاته في المكان المرغوب: أمّا إذا رغبت في تعديل عرض مربع النص لاحتواء نص كبير الحجم، انقر فوق السهمين المتعاكسين في حافة مربّع النص ثم اسحب إلى جهة اليسار (أو اليمين إذا كان اتجاه الصفحة من اليسار إلى اليمين): إدراج جدول الجداول هي من الأدوات المفيدة لترتيب الملاحظات بشكل صفوف وأعمدة، وكما هو الحال مع الملاحظات النصية، يمكن إدراج الجداول وتعبئتها بالبيانات في الموضع المرغوب وحسب عدد الصفوف والأعمدة المرغوب. لإدراج جدول، ضع مؤشر الكتابة في الأماكن الفارغة على الصفحة ثم اذهب إلى تبويب Insert> Table> مرّر مؤشر الفأرة فوق شبكة الخلايا لتحديد حجم الجدول ثم انقر نقرة واحدة لإدراجه: إذا رغبت في إدراج جدول بحجم كبير يتجاوز حجم شبكة الخلايا في قائمة Table، انقر على الخيار Insert Table ثم حدّد عدد الصفوف والأعمدة: بعد ذلك انقر داخل إحدى الخلايا وابدأ بإدخال المعلومات: على غرار الملاحظة النصية، يمكنك تغيير موضع الجدول داخل الصفحة بالنقر على النقاط الأربعة في حافّة المربع المحيط بالجدول ثم سحبه وإفلاته في المكان المرغوب. بالإضافة إلى ذلك ستتوفّر لك بعض الخيارات الإضافية لتعديل تخطيط الجدول أو تنسيقه في تبويب Layout السياقي الذي يظهر عند تحديد الجدول: إدراج ملفات من الخصائص الرائعة التي يوفّرها OneNote هي إمكانية إدراج مختلف أنواع الملفات وحفظها على صفحات الملاحظات. وبذلك يمكنك تخزين الملفات المهمة، مزامنتها، والوصول إليها من مختلف الأجهزة. توجد بعض أنواع الملفات قابلة للإدراج بطريقتين؛ إمّا بشكل لقطة شاشة لمحتوى الملف، أو بشكل ملف مرفق يمكن فتحه من OneNote مباشرة (أيقونة اختصار للملف يمكن النقر عليها بشكل مزدوج لفتح الملف). مثل الأمثلة على هذه الملفات، مستندات وورد، مصنفات اكسل، ملفات PDF، مخططات Vision، وغيرها. لإدراج لقطة شاشة لمحتوى الملف اذهب إلى تبويب Insert> File Printout> حدّد الملف المرغوب: في المثال أدناه، قمنا بإدراج لقطة شاشة لمصنف اكسل، وكما نلاحظ تم إدراج محتويات المصنّف، مع أيقونة الملف واسمه. ونستطيع معرفة المزيد من المعلومات حول الملف، مثل امتداد مجلد الحفظ أو الحجم، بتمرير مؤشر الفأرة فوق أيقونة الملف: أمّا لإدراج الملف بشكل ملف مرفق، اذهب إلى تبويب Insert> File Attachment> حدّد الملف المرغوب: بعد ذلك حدّد فيما إذا كنت ترغب في إدراجه كمرفق أو كلقطة شاشة (أي مثل الخيار السابق). انقر على الخيار Attach File لإدراجه كمرفق: إدراج صور يمكن إدراج الصور كملاحظات على OneNote بعدّة طرق: Screen Clipping: عمل لقطة شاشة. Pictures: إدراج الصور من على جهازك. Online Pictures: البحث على الإنترنت عن الصور وإدراجها. Scanned Image: مسح الصور باستخدام الماسح الضوئي أو الكاميرا وإدراجها. يمكنك استخدام هذه الخيارات لحفظ حجوزاتك، فواتيرك، إيصالاتك، وغيرها من الصور كملاحظات والوصول إليها من أي مكان. لإدراج لقطة شاشة مثلًا، انقر على أمر Screen Clipping، وسيتم فتح آخر نافذة كانت مفتوحة قبل النقر على الأمر، بالإضافة إلى تحوّل مؤشر الفأرة إلى شكل + وتغيّر ألوان النافذة إلى ألوان باهتة. انقر بزر الفأرة الأيسر ثم اسحب لتحديد المنطقة التي تريد التقاطها: بإمكانك تغيير موضع الصورة بالنقر على النقاط الأربعة وسحبها كما ذكرنا سابقًا، كما يمكن تحجيمها باستخدام المقابض التي تظهر عند تحديد الصورة: تسجيل ملاحظة صوتية أو مرئية من مجموعة Recording في تبويب Insert يمكن تسجيل ملف صوتي Record Audio أو ملف فيديو Record Video كملاحظة. وسيبدأ التسجيل بمجرّد النقر على أحد هذه الأزرار، وعند إيقاف التسجيل يتم إدراج الملف الصوتي أو المرئي مع تاريخ ووقت بدء التسجيل. لتسجيل ملاحظة صوتية مثلًا، انقر على زر Record Audio لبدء التسجيل. ستلاحظ ظهور تبويب Recording السياقي الذي يتضمّن المزيد من خيارات التسجيل: عندما تنتهي من تسجيل الملاحظة انقر على زر Stop في مجموعة Playback. ستُدرج الملاحظة الصوتية باسم صفحة الملاحظات الحالية، وبإمكانك تغيير اسمها بالنقر عليها بزر الفأرة الأيمن واختيار Rename: أمّا إذا رغبت في الاستماع إلى الملاحظة، انقر عليها ثم مثلث التشغيل الأخضر: إدراج قائمة مهام OneNote ليس أداة لإنشاء الملاحظات وحفظها فحسب، وإنّما يمكن استخدامه لإنشاء قوائم مهامك اليومية لتنظيمها وإدارتها. لإنشاء قائمة مهام، ضع مؤشر الكتابة في المكان الذي تريده ثم انقر على To Do Tag من تبويب Home، علمًا أنّه بإمكانك إدراج قائمة المهام داخل مربّع نص: ابدأ بإدخال عنصر القائمة الأول، ثم اضغط على مفتاح Enter لإدخال الثاني...وهكذا. إدراج مسافة تستخدم المسافات لإضافة المزيد من المساحات الفارغة/البيضاء بين ملاحظات الصفحة لجعلها أكثر ترتيبًا. ويمكن إدراج المسافة بوضع مؤشر الكتابة في المكان المرغوب ثم النقر على Insert Space من تبويب Insert: سيتغيّر شكل المؤشر إلى شكل سهم أسود اللون، انقر بزر الفأرة الأيسر ثم اسحب بالقدر المرغوب لإضافة المسافة: إضافة الملاحظات باستخدام أداة Send to OneNote Send to OneNote هي أداة اختصار لبعض طرق إضافة الملاحظات على OneNote، ويمكنك استخدامها لإنشاء الملاحظات بشكل سريع دون الحاجة إلى فتح برنامج OneNote. من الأمثلة على الملاحظات التي يمكن إضافتها باستخدام هذه الأداة هي لقطات الشاشة، الملاحظات النصيّة السريعة، ولقطات لمحتوى الملفات. عادة ما تُفتح هذه الأداة تلقائيًا عند فتح OneNote، وستلاحظ وجودها على شريط المهام لسطح المكتب: إذا لم تُفتح الأداة مع البرنامج، انقر بزر الفأرة الأيمن على أيقونة البرنامج في شريط المهام واختر Sent to OneNote Tool لفتحها (أو اضغط على مفتاحي الاختصار Windows + N): الخيارات المتوفّرة في هذه الأداة هي: Screen Clipping: لعمل لقطة شاشة للجزء المرغوب من النافذة. Sent to OneNote: لعمل لقطة شاشة لمحتوى ملف، مثل وورد، اكسل، وغيرها. New Quick Note: لكتابة ملاحظة نصيّة سريعة وحفظها على OneNote. لعمل لقطة شاشة، افتح النافذة التي تريد عمل لقطة شاشة لها ثم افتح أداة Send to OneNote وانقر على زر Screen Clipping. بعد ذلك انقر ثم اسحب لتحديد الجزء المرغوب: بعد إفلات الفأرة سيظهر لك مربّع حوار لاختيار الإجراء الذي تريد تطبيقه على لقطة الشاشة. فإذا رغبت في حفظها على إحدى صفحات OneNote، حدّد دفتر الملاحظات، المقطع، ثم الصفحة المرغوبة وانقر على زر Send to Selected Location: بإمكانك أيضًا استخدام حقل البحث للوصول السريع إلى الصفحة التي تريد الحفظ عليها. أمّا إذا رغبت في نسخ لقطة الشاشة إلى ذاكرة الحافظة clipboard ومن ثم لصقها في مكان آخر، انقر على زر Copy to Clipboard. لعمل لقطة شاشة لمحتوى ملف ما، وليكن مصنّف اكسل مثلا، افتح الملف ثم افتح أداة Send to OneNote وانقر على Send to OneNote: سيُفتح نفس مربّع الحوار للخيار السابق، حدّد دفتر الملاحظات، المقطع، ثم الصفحة التي تريد الحفظ عليها وانقر على زر OK: الخيار الأخير هو كتابة ملاحظة سريعة، وتتم بالنقر على New Quick Note من أداة Send to OneNote. في هذه الحالة ستُفتح صفحة ملاحظات مصغّرة ويمكنك البدء بإدخال ملاحظتك عليها وإغلاق الصفحة عند الانتهاء: تُحفظ هذه الملاحظات السريعة في مقطع مستقل اسمه Quick Notes والذي يمكنك الوصول إليه بالنقر على قائمة دفاتر الملاحظات> Quick Notes: وبإمكانك نقل/نسخ هذه الملاحظات إلى مقطع/دفتر ملاحظات آخر بالنقر على اسم المقطع بزر الفأرة الأيمن واختيار Move or Copy: بعد ذلك حدّد دفتر الملاحظات الذي تريد نقل المقطع إليه أو المقطع الذي تريد نقل المقطع الحالي بعده ثم انقر على زر Move للنقل أو Copy للنسخ: خاتمة تعرّفنا في هذا الدرس على أنواع المحتوى الذي يمكن إضافته وحفظه على OneNote وتعلّمنا كيفية استخدام أداة Send to OneNote لاختصار الوقت وإضافة الملاحظات بشكل سريع. في الدرس القادم سنتعلّم كيفية التحكّم في طريقة عرض صفحات الملاحظات.
  13. يمكننا أن نستنتج وظيفة تطبيق الصور Photos من اسمه ، حيث يقوم التطبيق بشكل عام بالتعامل مع الصور من حيث نقلها واستيرادها وترتيبها وغير ذلك من المهام المتعلقة بهذا المجال. عندما نفتح البرنامج سنلاحظ مجموعة من الخيارات. الشريط العلوي لنافذة التطبيق الجهة اليمنى: خانة للبحث في الصور، وأيقونة لمشاركة الصور، وأيقونة لإضافة المشاريع. الجهة الوسطى: تبويبات رئيسية للتطبيق (الصور/ المشاركة/ الألبومات/ المشاريع). الجهة اليسرى: أدوات أو أيقونات لطريقة عرض نافذة الصور: فالأول من جهة اليمين لتكبير حجم عرض الصور أو تصغيره، والسهمين المتجهين يمينا ويسارا لإظهار الصور حسب الأشهر أو السنة، وهكذا. تبويب الصور photos هو التبويب الذي يعرض جميع الصور التي تم استيرادها عن طريق التطبيق، إما عن طريق جهاز آخر أو عن طريق سحب الصور وإفلاتها في التطبيق. وعند رغبتنا بالحصول على صور محددة يمكننا البحث عن اسم الصورة أو حتى المنطقة التي تم تصوير الصور فيها أو البحث بتاريخ التقاط الصورة ونحو ذلك من خيارات الصور التي يتعرف عليها التطبيق. أو يمكن البحث يدويا دون الاستعانة بخانة البحث بتصفح الصور عن طريق تحريك السهم للأسفل إلى أن نصل للصور المطلوبة. إذا اخترنا إحدى الصور ستظهر لنا ثلاث أيقونات: أيقونة تشغيل العرض عند اختيار علامة التشغيل، ستظهر لنا نافذة تحتوي على مجموعة من الطرق أو المواضيع themes لعرض الصور، وحتى تختفي الموسيقى التي ستعمل تلقائيا مع النوع الذي سيقع اختيارك عليه، يمكنك تحديد الصوت الذي ترغب به من قائمة music والتي ستظهر لك الأصوات المحفوظة في جهازك في مكتبة الصوتيات في برنامج iTunes . عندما تضغط على زر play slideshow لتشغيل الشرائح سيفتحها لك في نافذة منفصلة، حيث يمكنك مشاهدة الصور أو إيقاف العرض أو الخروج منه. أيقونة زر الإضافة (+) أيقونة علامة الزائد (+) تحتوي بالمقابل عددً من الخيارات: -الخيار الأول: هو لإنشاء ألبوم للصور Album ، باختيارك له ستظهر نافذة صغيرة تحتوي على عدد الصور التي سيتم إضافتها، ونوع الألبوم. اخترنا هنا ألبوم جديد new Album ، إن كان لديك ألبوم قد أنشأته مسبقا يمكنك إضافة الصور إليه بدلا من إنشاء ألبوم جديد، وإن لم يكن كذلك فأبق الاختيار على الألبوم الجديد ثم اختر له اسما. - الخيار الثاني: هو smart album الألبوم الذكي، حيث يمكنك إنشاء ألبوم حسب الخيارات التي يوفرها التطبيق، كأن يجمع لك جميع الصور التي تم تصويرها في تاريخ معين أو مكان معين، وهكذا. ويظهر لك ثلاثة خانات بمجموعة من الخيارات لتسهيل انتقاء الصور المطلوبة من قبل التطبيق، إضافة لخانة علوية لكتابة اسم الألبوم. بقية الخيارات سنتعرض لها لاحقا في تبويب المشاريع. أيقونة مشاركة الصور وذلك عن طريق الخدمة السحابية الخاصة بالصور iCloud photo sharing والتي سنتحدث عنها بعد قليل، أو عن طريق تطبيقات أخرى كالبريد وتطبيق الملاحظات وتطبيق الرسائل وغيرها. تبويب المشاركة shared لتفعيل مشاركة الصور عن طريق iCloud photo sharing سنختار خيار البدء بالمشاركة start sharing الموجود وسط الشاشة. ستظهر لنا نافذة منبثقة سنقوم باختيار آخر عبارتين: خيار تدفق الصور My photo stream هذا الخيار سيسمح لك بانتقال صورك بين أجهزتك المختلفة (الأجهزة المصنعة من شركة Apple)، فعندما تقوم بتصوير صورة بجهازك الآي فون ستجد أن الصور ستنتقل في ألبوم أو قسم مستقل يدعى تدفق الصور الخاص بي my photo stream . تجد الألبوم في تبويب الألبومات Albums. خيار iCloud photo sharing يظهر عند العودة لنافذة تبويب المشاركة والضغط على start sharing مجددا، حيث تظهر لك خيارات لاسم ألبوم المشاركة الذي ستشاركه، وعلامة + لإضافة الأشخاص اللذين ستشاركهم، وإضافة تعليق (اختياري). بعدها يمكنك إضافة الألبوم بالضغط على زر إنشاء create. تبويب الألبومات Albums في هذا التبويب ستجد الشاشة منقسمة لجزئيين: الجزء العلوي: عبارة عن ألبومات يقوم التطبيق بإنشائها تلقائيا حسب تصنيف الجهاز للصور، من ضمنها ألبوم تدفق الصور الذي فعّلناه من تبويب المشاركة. الجزء السفلي: يضع فيها التطبيق تلك الألبومات التي قمنا بإنشائها يدويا. تبويب المشروعات projects هذا التبويب يمكننا من خلاله إنشاء مشاريع عن طريق أيقونة الزائد في الشريط العلوي: تحدثننا مسبقا عن الخيار الأول والثاني، Albumو smart Album. بقية الخيارات فيما عدا خيار slideshow خاصة بالطباعة: book : لطباعة الصور على شكل كتاب أو مجلة حيث يمكنك ترتيب الصور واختيار الحجم المطلوب calendar :طباعة الصور على تقويم card : طباعة الصورة على بطاقة مع توفير خيارات للأحجام ونحوها prints : لطباعة الصورة كما هي دون إضافتها لبطاقة أو كتاب أو نحو ذلك. عندما تختار أحد هذه الخيارات ستجد مع كل نوع خيارات للأحجام وللتنسيق يوفرها لك التطبيق، ثم بعد أن تصل للشكل المطلوب تقوم بتقديم طلب لطباعتها مقابل مبلغ من المال. حسب معلوماتي من خلال بحثي في الشبكة فإن الخدمة ليست متوفرة في جميع الدول، إلا أنه يمكنك الحصول على المطبوعات عن طريق شركات الشحن التي تعتمد على فتح بريد أمريكي كشركة أرامكس هنا رابط يتحدث عن خدمة الطباعة من موقع شركة أبل يمكنك الاطلاع عليه إن كنت مهتما بهذه الجزئية http://www.apple.com/shop/help/print_products تبويب الاستيراد import هذا التبويب لن يظهر إلا حين توصيل هاتفك الآي فون أو أي جهاز آخر من أجهزة أبل التي يدعهما التطبيق . نلاحظ وجود شريط جديد في الأعلى بمجموعة من الأيقونات: import all new items هذا الخيار في حال رغبت أن يقوم الجهاز باستيراد جميع الصور الجديدة دون الحاجة لتحديدها يدويا بنفسك. Import selected هذا الخيار في حال رغبت باستيراد الصور التي تقوم بتحديدها فقط. Delete items after import عند وضع علامة صح على هذا الخيار فسيقوم بحذف الصور التي استوردتها توًا من الجهاز الذي استوردتها منه. في جهة اليمين ستجد علامة صح عند عبارة open photos for this device عند إزالة العلامة من عند هذه العبارة فلن يفتح التطبيق تلقائيا عن وصل جهاز جديد على المحمول. ماذا لو رغبنا بإيقاف البرنامج عن العمل تلقائيا مع جميع الأجهزة التي نوصلها في الجهاز المحمول؟ بإمكانك القيام بذلك عن طريق كتابة أمر في تطبيق محرّر الأوامر terminal والذي يعتبر بديلا عن console في نظام الويندوز. حصلت على هذه المعلومة من مقال في موقع iclarified.com . للوصول سريعا للتطبيق اضغط من لوحة المفاتيح على F4 ثم اكتب اسم البرنامج في خانة البحث ليظهر لك. انسخ هذا الأمر وألصقه في المحرّر: defaults -currentHost write com.apple.ImageCapture disableHotPlug -bool YES ثم اضغط على زر الإدخال أو المسمى بالرجوع Enter . وحينها لن يعمل التطبيق تلقائيا، ولو أردت إعادة التطبيق للفتح تلقائيا عند وصل جهازك، فانسخ نفس الأمر تماما، واستبدل كلمة YES بكلمة NO. بخصوص الهواتف أو الأجهزة التي تعمل بنظام أندرويد يمكنك نقل ملفاتك منها إلى الماك عن طريق هذا التطبيق Android File Transfer من شركة Google .
  14. من الجميل جدًّا تطبيق تأثيرات مختلفة على الصور الشخصية لإضفاء الحيوية والجمال والأناقة على هذه الصور. سنتعلّم في هذا الدرس كيفية تطبيق تأثيرات الإضاءة المختلفة على صورة فتاة صغيرة باستخدام برنامج أدوبي فوتوشوب. اختر الصورة التي سنطبق التأثير عليها، أنا اخترت هذه الصورة المجانية من موقع 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.
  15. تُعتبر الصور كما نعلم من العناصر الأساسيّة في أيّ تطبيق، فهي تضفي لمسة جمالية بالإضافة إلى إعطائها انطباعًا توضيحيًّا لوظائف التطبيق الأساسيّة. سنتابع عملنا في هذه السلسلة من خلال شرح كيفيّة استخدام الصور في Xamarin.Froms. يتعامل Xamarin مع الصور النقطيّة bitmaps التي قد يختلف مفهومها قليلًا بالنسبة لأنظمة تشغيل Android وiOS وWindows، ولكن إذا اعتمدت على صيغ مثل JPEG وPNG وBMP فلن تعاني من أيّة مشاكل. يتعامل Xamarin.Forms مع الصور بأسلوبين رئيسيّين. يعتمد الأسلوب الأوّل على الصور المستقلة عن نوع الجهاز platform-independent أمّا الأسلوب الثاني فيعتمد على الصور المرتبطة بالجهاز platform-specific أو بمعنى أدق المرتبطة بنظام التشغيل الذي يعمل على الجهاز. ستناول الأسلوب الأوّل في درسنا هذا من خلال تطبيقين بسيطين يوضّحان ذلك. أمّا الأسلوب الثاني فسنؤجّل الحديث عنه لدرس آخر. يمكن عرض الصور ضمن تطبيقات Xamarin عن طريق عنصر مرئي يمثّله الصنف Image. وكما مع بقية العناصر المرئية التي ترث من الصنف VisualElement يمتلك هذا العنصر العديد من الخصائص المشتركة بينه وبين أي عنصر مرئي آخر كاللصيقة Label مثلًا. بالإضافة إلى خصائص أخرى تميّزه كالخاصيّة Source التي تُعبّر عن مصدر الصورة التي ستُعرض ضمنه. ستكون هذه الخاصيّة محور اهتمامنا في هذا الدرس. يمكن الحصول على الصور المستقلة عن الجهاز بأسلوبين مختلفين. ستحتاج في كلّ أسلوب منهما إلى إسناد كائن من الصنف ImageSource إلى الخاصيّة Source لكائن الصورة Image. يتمثّل الأسلوب الأوّل في الحصول على صور من الإنترنت مباشرةً، ويكون ذلك من خلال استدعاء التابع الساكن FromUri من الصنف ImageSource وتمرير عنوان Uri لملف الصورة على الإنترنت. أمّا الأسلوب الثاني فيتمثّل باستدعاء التابع الساكن FromResource من الصنف ImageSource أيضًا وتمرير اسم المصدر resource (الصورة) إليه. سيوضّح التطبيقين البسيطين التاليّين كيفيّة فعل ذلك. الحصول على صورة من الإنترنت أنشئ تطبيقًا جديدًا سمّه WebImageApp من النوعBlank App (Xamarin.Forms Portable) وأبق فقط على المشروعين WebImageApp (Portable) و WebImageApp.Droid كما اتفقنا من قبل. أضف صفحة محتوى جديدة ContentPage كما فعلنا في هذا الدرس. سمّها WebImagePage واحرص على أن تكون محتويات الملف WebImagePage.cs على الشكل التالي: using System; using Xamarin.Forms; namespace WebImageApp { public class WebImagePage : ContentPage { public WebImagePage() { Image webImage = new Image { VerticalOptions = LayoutOptions.FillAndExpand, HorizontalOptions = LayoutOptions.FillAndExpand, Source = ImageSource.FromUri(new Uri("https://developer.xamarin.com/demo/IMG_2138.JPG?width=800")), Aspect = Aspect.AspectFit, BackgroundColor = Color.Accent }; Content = new StackLayout { Children = { webImage } }; } } } ثم انتقل إلى الملف App.cs واحرص على أن تكون بانيته على الشكل التالي: public App() { // The root page of your application MainPage = new WebImagePage(); } شيفرة التطبيق بسيطة، فهي تعمل على إنشاء كائن صورة جديد وتُسنده إلى المتغيّر webImage، ثم تعمل على جعل كائن الصورة هذا ابنًا لمخطّط المكدّس كما هو واضح. ما يهمنا الآن هو خصائص كائن الصورة، فقد أسندنا القيمة LayoutOptions.FillAndExpand إلى كلّ من الخاصيّتين VerticalOptions وHorizontalOptions لكي تشغل الصورة كامل المساحة المتاحة لمخطّط المكدّس. أمّا بالنسبة للخاصيّة Source فهي تعبّر عن المصدر الذي سنحصل منه على الصورة. في تطبيقنا هذا سنحصل على الصورة من الإنترنت لذلك سنستخدم التابع الساكن ImageSource.FromUri الذي يُرجع كائنًا من الصف ImageSource. لاحظ أنّنا قد مرّرنا كائن جديد من النوع Uri إلى هذا التابع: ImageSource.FromUri(new Uri("https://developer.xamarin.com/demo/IMG_2138.JPG?width=800")) العنوان المستخدم هنا هو: "https://developer.xamarin.com/demo/IMG_2138.JPG?width=800" بالنسبة للخاصيّة Aspect فهي تُحدّد كيفيّة عرض الصورة ضمن عنصر الصورة Image. حيث أنّها تقبل قيمًا من المعدودة Aspect التي تحمل نفس الاسم. لهذه المعدودة ثلاثة عناصر: AspectFit وAspectFill وFill. استخدمنا في هذا التطبيق القيمة AspectFit وهي القيمة الافتراضيّة. وإليك ما تعنيه القيم الثلاث السابقة: AspectFit: تعني أنّ الصورة ستظهر ضمن العنصر بحيث تنسجم مع المساحة المخصّصة له، مع احترام النسبة الخاصّة بمظهر الصورة aspect ratio. AspectFill: في هذه الحالة ستظهر الصورة ضمن العنصر بحيث تحترم النسبة الخاصّة بمظهر الصورة aspect ratio، ولكنّها لن تهتم بالمساحة المخصّصة لهذا العنصر. لذلك فقد تظهر الصورة مقتطعةً إذا كانت أكبر من العنصر. Fill: تعني هذه القيمة أنّ الصورة ستظهر بحيث تشغل كامل المساحة المخصّص للعنصر بدون أيّ اعتبار النسبة الخاصّة بمظهر الصورة aspect ratio. لذلك فقط تظهر الصورة ممطوطة أفقيًّا أو رأسيًّا. لقد أسندت اللون Color.Accent إلى خاصيّة لون الخلفيّة BackgroundColor لعنصر الصورة لكي نرى المساحة الفعليّة التي يشغلها هذا العنصر. نفّذ البرنامج السابق باستخدام F5 لتحصل على شكل شبيه بما يلي، مع الانتباه إلى أنّني أجري التجارب على جهاز ذي شاشة قياسها 4.5 بوصة، لذلك قد تختلف النتائج التي تحصل عليها على جهازك في حال كان لديك شاشة ذات قياس أكبر. إذا كان الأمر كذلك فأنصح بحذف المقطع "?width=800" من عنوان Uri للصورة من الخاصيّة Source: لاحظ كيف ظهرت الصورة بحيث بقيت مساحة فارغة من الأعلى والأسفل. هذا بسبب أنّها احترمت النسبة الخاصّة بمظهر الصورة الأصليّة aspect ratio. إذا أجريت تعديلًا على الخاصيّة Aspect لتحمل القيمة Aspect.AspectFill فستحصل في هذه الحالة على شكل شبيه بما يلي: لاحظ هنا كيف ظهرت الصورة مقتطعة قليلًا. جرّب الآن الحالة الأخيرة، وهي إسناد القيمة Aspect.Fill إلى الخاصيّة Aspect لتحصل على شكل شبيه بما يلي: وكما هو متوّقع ظهرت الصورة بشكل ممطوط رأسيًّا لأنّها ستملأ كامل المساحة المتاحة لعنصر الصورة دون اعتبار للنسبة الخاصّة بمظهر الصورة الأصليّة كما أشرنا. الحصول على صورة من مصدر resource محلّي لا يختلف التعامل مع الصور في هذا الأسلوب مع أسلوب التعامل مع الصور التي نحصل عليها من الويب. باستثناء أنّنا نستخدم التابع الساكن FromResource من الصنف ImageSource. سنتناول في هذه الفقرة تطبيقًا عمليًّا لتصفّح مجموعة من الصور التي أعددتها خصيصًا لهذا الغرض. سيتم التصفّح عن طريق زرّين: "التالي" و"السابق" بالإضافة إلى وجود لصيقة تعرض معلومة بسيطة عن رقم الصورة الحالية التي يتم عرضها على عنصر الصورة. ستكون هذه الصور موجودة محلّيًّا ضمن التطبيق. لنبدأ الآن بإنشاء تطبيق جديد اسمه ResourceImageApp من النوعBlank App (Xamarin.Forms Portable) . أبق فقط على المشروعين ResourceImageApp (Portable) و ResourceImageApp.Droid. أضف صفحة محتوى جديدة ContentPage سمّها ResourceImagePage واحرص على أن تكون محتويات الملف ResourceImagePage.cs على الشكل التالي: 1 using System; 2 using Xamarin.Forms; 3 4 namespace ResourceImageApp 5 { 6 public class ResourceImagePage : ContentPage 7 { 8 private Button btnPrev; 9 private Button btnNext; 10 private Image resourceImage; 11 private Label lblInfo; 12 private int currentIndex = 1; 13 14 public ResourceImagePage() 15 { 16 lblInfo = new Label 17 { 18 VerticalOptions = LayoutOptions.Start, 19 HorizontalOptions = LayoutOptions.FillAndExpand, 20 HorizontalTextAlignment = TextAlignment.Center, 21 TextColor = Color.Accent, 22 FontSize = Device.GetNamedSize(NamedSize.Medium, typeof(Label)) 23 }; 24 25 resourceImage = new Image 26 { 27 VerticalOptions = LayoutOptions.FillAndExpand, 28 HorizontalOptions = LayoutOptions.FillAndExpand, 29 Aspect = Aspect.AspectFit 30 }; 31 32 btnPrev = new Button 33 { 34 Text = "السابق", 35 HorizontalOptions = LayoutOptions.FillAndExpand, 36 IsEnabled = false 37 }; 38 btnPrev.Clicked += BtnPrev_Clicked; 39 40 btnNext = new Button 41 { 42 Text = "التالي", 43 HorizontalOptions = LayoutOptions.FillAndExpand 44 }; 45 btnNext.Clicked += BtnNext_Clicked; 46 47 StackLayout buttonsLayout = new StackLayout 48 { 49 Orientation = StackOrientation.Horizontal, 50 VerticalOptions = LayoutOptions.End, 51 HorizontalOptions = LayoutOptions.FillAndExpand, 52 Children = 53 { 54 btnNext, 55 btnPrev 56 } 57 }; 58 59 Content = new StackLayout 60 { 61 Children = { 62 lblInfo, 63 resourceImage, 64 buttonsLayout 65 } 66 }; 67 68 Padding = new Thickness(5, 5, 5, 5); 69 70 UpdateScreen(); 71 } 72 73 private void BtnPrev_Clicked(object sender, EventArgs e) 74 { 75 currentIndex--; 76 if (currentIndex == 1) 77 { 78 btnPrev.IsEnabled = false; 79 } 80 81 btnNext.IsEnabled = true; 82 83 UpdateScreen(); 84 } 85 86 private void BtnNext_Clicked(object sender, EventArgs e) 87 { 88 currentIndex++; 89 if (currentIndex == 5) 90 { 91 btnNext.IsEnabled = false; 92 } 93 94 btnPrev.IsEnabled = true; 95 96 UpdateScreen(); 97 } 98 99 private void UpdateScreen() 100 { 101 lblInfo.Text = string.Format("الصورة {0} من 5", currentIndex); 102 string path = string.Format("ResourceImageApp.Images.res0{0}.jpg", currentIndex); 103 resourceImage.Source = ImageSource.FromResource(path); 104 } 105 } 106 } ثم انتقل إلى الملف App.cs واحرص على أن تكون بانيته على الشكل التالي: public App() { // The root page of your application MainPage = new ResourceImagePage(); } انقر بزر الفأرة الأيمن على المشروع المشترك ResourceImageApp (Portable) ثم اختر Add ومن القائمة الجانبيّة التي ستظهر اختر New Folder. سينشئ ذلك مجلّدًا جديدًا ضمن هذا المشروع، سمّه Images. ثم انقر بعد ذلك بزر الفأرة الأيمن على مجلّدنا الجديد Images واختر Add وبعدها Existing Item سيظهر مربّع حوار يسمح لك باختيار الصور المراد إضافتها كمصادر resources إلى هذا المجلّد. اختر ملفّات الصور: res01.jpg وres02.jpg وres03.jpg و res04.jpg وres05.jpg (انقر هنا لتحميلهاImages.zip). تحتوي هذه الصور بالترتيب على العبارة التالية "مرحبًا بكم في أكاديميّة حسّوب". انقر بزر الفأرة الأيمن مجدّدًا على كل اسم ملف أضفته قبل قليل إلى المشروع واختر من القائمة الأمر Properties. ستظهر خصائص الملف، اضبط الخاصيّة Build Action لتصبح Embedded Resource كما هو واضح من الشكل التالي لأحد الملفات: نفّذ البرنامج باستخدام F5 لتحصل على شكل شبيه بما يلي: لنلاحظ في البداية أنّ التطبيق يعرض الصورة الأولى التي يمثّلها الملف res01.jpg. كما نلاحظ أنّ زر "السابق" غير مفعّل أي أنّنا لا نستطيع الرجوع إلى الوراء، وأيضًا العبارة التوضيحيّة في الأعلى التي تعرض رقم الصورة الحاليّة. إذا جرّبت نقر زر "التالي" ستنتقل إلى الصورة رقم 2 (الملف res02.jpg) وسيصبح الزر "السابق" مفعّلًا ليسمح لنا بالعودة إلى الصورة رقم 1. إذا تابعت النقر على زر "التالي" ستستعرض تباعًا الملفات بالترتيب، حتى إذا وصلت إلى الملف رقم 5 سيصبح الزر "التالي" غير مفعّل لأنّه لا توجد أيّة صور بعد الملف رقم 5. انظر إلى الشكل التالي: بمجرّد أن تنقر الزر "السابق" سيعود زر "التالي" مفعّلًا من جديد. لنناقش الشيفرة البرمجيّة المشغّلة لهذا التطبيق. نلاحظ في الأسطر من 8 حتى 11 أنّني قد صرّحت عن حقول خاصّة تمثّل معظم العناصر المرئيّة التي سنتعامل معها في هذا التطبيق وهي عنصر صورة وعنصر لصيقة وزرّين للتالي والسابق. كما صرّحت في السطر 12 عن متغيّر خاص currentIndex يمثّل رقم الملف الحالي الذي نرغب بعرضه ضمن ملف الصورة وأسندت له القيمة التمهيديّة 1. بالنسبة لبانية الصنف ResourceImagePage فهي تعمل على تهيئة جميع العناصر المرئيّة المستخدمة كما نعلم. حيث نضبط في الأسطر من 16 حتى 23 خصائص اللصيقة lblInfo حيث أسندنا القيمة LayoutOptions.Start للخاصيّة VerticalOptions لكي تظهر أوّل (أعلى) الشاشة. كما أسندنا القيمة TextAlignment.Center لخاصيّة محاذاة النص الأفقيّة HorizontalTextAlignment لكي يظهر النص موسّطًا بشكل أفقي. أمّا بالنسبة لعنصر الصورة resourceImage فقمنا بضبط خصائصه في الأسطر من 25 حتى 30 حيث جعلنا قيمة الخاصيّة Aspect له تساوي Aspect.AspectFit لكي تملأ الصورة الحيّز المتاح لها مع احترام النسبة الخاصّة بمظهر الصورة. تأتي بعد ذلك عمليّة ضبط الزرّين btnPrev (السابق) و btnNext (التالي) من الأسطر 32 حتى 45. سنضيف هذين الزرّين لاحقًا إلى مخطّط مكدّس خاص بهما هو buttonsLayout والسبب في ذلك أنّنا نريد أن نجعل هذين الزرّين متجاورين أفقيًّا مع تعبئة المساحة الأفقيّة المتاحة لهما (لاحظ القيمة LayoutOptions.FillAndExpand للخاصيّة HorizontalOptions لكل منهما). نصرّح عن مخطّط المكدّس buttonsLayout في الأسطر من 47 حتى 57. سنضيف لهذا المخطّط الزرّين btnPrev و btnNext كما سنضبط خاصيّة الاتجاه Orientation له لتكون أفقيّة StackOrientation.Horizontal لكي يُظهِر الزرّين السابقين بشكل أفقيّ وليس رأسيّ. سنضيف مخطّط المكدّس هذا بعد قليل إلى مخطّط المكدّس الأساسيّ للصفحة. نضبط الخاصيّة Content للصفحة في الأسطر 59 حتى 66 بحيث ننشئ مخطّط مكدّس جديد يحتوي على العناصر: اللصيقة والصورة ومخطّط المكدّس الخاص بالأزرار على الترتيب. وهذا هو سبب ظهور العناصر السابقة بهذا الترتيب. انظر إلى المخطّط التمثيلي التالي الذي يوضّح التموضع التقريبي للعناصر السابقة على الصفحة: المستطيل البني في الأسفل يمثّل مخطّط المكدّس buttonsLayout بالنسبة لمعالجيّ حدثيّ النقر بالنسبة للزرّين btnPrev (الأسطر من 73 إلى 84) وbtnNext (الأسطر من 86 إلى 97) فيحتويان على منطق برمجيّ بسيط يضمن التنقّل الصحيح بين الصور الخمس الموجودة ضمن مصدر resource التطبيق. وأخيرًا يعمل التابع UpdateScreen (الأسطر من 99 إلى 104) على تحديث البيانات التي تظهر على عنصري اللصيقة والصورة عند كلّ نقر لزر "التالي" و"السابق". يتطلّب التابع FromResource من الصنف ImageSource وسيطًا نصيًّا يمثّل معرّف الملف. يتكوّن معرّف الملف من اسم التطبيق (أو بمعنى أدق التجميعة Assembly) متبوعًا بنقطة ثم اسم المجلّد الذي يحتوي على ملف الصورة متبوعًا بنقطة أخرى، ثم أخيرًا اسم الملف مع امتداده. في مثالنا هذا يكون معرّف الملف res01.jpg مثلًا على الشكل التالي: ResourceImageApp.Images.res01.jpg نُشكّل هذا المعرّف في السطر 102 من خلال التابع الساكن Format من الصنف string. حيث نختار الملف المطلوب من خلال قيمة المتغيّر currentIndex الذي يمثّل رقم ملف الصورة الحالي. ربما تبدو شيفرة هذا التطبيق كبيرة نسبيًّا، ولكن أؤكّد لك أنّك ستكتب أضعافًا منها في أيّ برنامج تجاري من الممكن أن تعمل عليه! يعود سبب ذلك إلى الأسلوب الذي انتهجناه منذ بداية هذه السلسلة حتى الآن، وهو الاعتماد على الشيفرة البرمجيّة في إنشاء واجهة المستخدم بالكامل. ورغم أنّه من الممكن اتباع أساليب جيّدة تساهم في ترتيب وتنظيم هذه الشيفرة بشكل كبير، إلّا أنّ العديد من المطوّرين يفضّلون استخدام الأسلوب الآخر في تطوير تطبيقات باستخدام Xamarin.Forms والذي يتمثّل في استخدام XAML (رُماز شبيه بـ XML) والذي يسمح بفصل واجهة المستخدم عن الشيفرة البرمجيّة. سنتناول هذا الموضوع بالطبع في دروس قادمة. الخلاصة تعاملنا في هذا الدرس مع الصور في Xamarin.Forms. حيث ناقشنا الموضوع من جانبين مختلفين. يهتم الجانب الأوّل بتحميل الصورة من الإنترنت (ومن الممكن من شبكة محليّة أيضًا)، أمّا الجانب الثاني فيهتمّ بتحميل الصورة من مصدر محلّي. هناك المزيد للحديث عنه في هذا الموضوع، وخاصّةً فيما يتعلّق بالحصول على الصور من خلال مصادر الصور المرتبطة بالجهاز platform-specific أو بمعنى أدق المرتبطة بنظام التشغيل الذي يعمل على الجهاز والذي هو نظام أندرويد في حالتنا. أي ما يشبه الأسلوب المتبع عند العمل مع مصادر الصور من خلال Android Studio. سنغطّي هذا الموضوع لاحقًا في هذه السلسلة.
  16. لعد تعرّفنا في درس سابق على كيفية إدراج الصور في مستندات وورد، كيفية اقتطاع جزء منها، وكيفية التحكّم في أبعادها. كما تعلّما كيف نضغط الصور لتقليل أحجامها عند حفظ المستند. سنغطّي في هذا الدرس كيفية استخدام الأوامر والخيارات الأخرى في تبويب تنسيق Format السياقي لنتحكّم في أنماط الصور وتغيير موضعها ومحاذاتها مع النص ومع الورقة نفسها. تنسيق الصورة يوفّر وورد مجموعة من الأنماط الجاهزة والخيارات لتعديل مظهر الصور، وستجد نفس هذه الخيارات على برامج أوفيس الأخرى عند إدراج الصور عليها، مثل اكسل وبوربوينت. لتعديل نمط الصورة نقوم بتحديدها أولًا لإظهار تبويب تنسيق، ثم نفتح معرض الأنماط الجاهزة من مجموعة Picture Styles: بمجرّد تمرير مؤشر الفأرة فوق النمط، سيُطبّق على الصورة بشكل مباشرة كمعاينة. وكما نلاحظ توجد العديد من الأنماط المضمّنة، منها بحدود بسيطة، وأخرى ذات انعكاس، وأخرى بإطارات بيضوية أو ناعمة الحواف. ننقر على النمط لتطبيقه على الصورة. ولا ينتهي تنسيق الصورة باختيار أحد الأنماط، إذ توجد مجموعة خيارات أخرى بإمكاننا استخدامها لتخصيص كل نمط حسب الرغبة. فمن قائمة Picture Border يمكننا تغيير لون حد الصورة، سمكه، ونمطه: تختلف الألوان الافتراضية باختلاف ألوان نُسق Theme المستند، وبإمكاننا دائما الوصول إلى المزيد من الألوان بالنقر على More Outline Color. وكذلك نستطيع تطبيق تأثيرات أخرى على الصورة، كالظل Shadow، التوهّج Glow، الانعكاس Reflection، أو استدارة ثلاثية الأبعاد 3D Rotation من قائمة Picture Effect: ويمكن أن نحصل على تأثيرات رائعة عندما ندمج أكثر من تأثير معًا. على سبيل المثال عندما نطبّق التأثير Cool Slant من مجموعة Bevel والتأثير Prospective Contrasting Left من مجموعة 3D Rotation: سنحصل على تأثير جميل وكأنّ للصورة بعد ثالث: وللتحكّم أكثر في خيارات كل تأثير على حدة، نفتح جزء تنسيق الصورة ونتلاعب في القيم إلى أن نحصل على التأثير المرغوب. سنقوم هنا مثلا بزيادة الارتفاع Height من قسم 3-D Format> Top Bevel إلى 20 pt لإعطاء الصورة عمق أكبر: وهكذا يمكن استخدام الأنماط الجاهزة كنقطة بداية تنسيق الصورة ومن ثم التعديل عليها، أو استخدام الخيارات المتوفرة في قائمة Picture Effect والتلاعب بإعداداتها من جزء تنسيق الصورة لخلق التأثير المرغوب. أما قائمة تخطيط الصورة Picture Layout فيمكننا استخدامها لتحويل الصورة إلى عنصر SmartArt بشكل مباشر وتسهيل ترتيبها وإضافة التسميات التوضيحية لها: عند تطبيق أحد الخيارات المتاحة، سنُلاحظ ظهور تبويب تصميم Design السياقي الذي يحتوي على مجموعة خيارات مفيدة لتصميم SmartArt وتخصيصه: لننتقل الآن إلى مجموعة Adjust التي تحتوي على المزيد من الأوامر لتعديل مظهر الصورة. من قائمة تصحيحات Corrections وبالتحديد من مجموعة Soften/Sharpen يمكننا أن نجعل الصورة مموّهة أكثر أو ذات تفاصيل واضحة أكثر بالنقر على درجة النعومة/الحدّة المرغوبة: أما من مجموعة Brightness/Contrast فيمكننا التحكّم في إضاءة الصورة ودرجة تباين ألوانها: بالطبع يكون وقع هذه التأثيرات مختلفًا من صورة إلى أخرى. على سبيل المثال، قد تكون ألوان الصورة غامقة وتحتاج إلى إضاءة لتفتيحها، في هذه الحالة يمكننا استخدام خيار السطوع 20% أو أكثر، لكن إذا كانت ألوان الصورة فاتحة من الأصل، في هذه الحالة سيؤدي تطبيق تأثير السطوع إلى تشويه منظر الصورة. إذًا، كل ما علينا فعله هو تجربة مختلف الخيارات للحصول على المظهر المطلوب من قائمة Color يمكننا التحكّم ببعض خصائص ألوان الصورة مثل التشبّع Saturation ودرجة اللون Color Tone (أو درجة حرارة اللون). إذ يمكننا أن نجعل شدّة ألوان الصورة عالية جدًا أو منخفضة جدًا. كما يمكننا جعل الصورة ذات ألوان دافئة أو باردة: أما مجموعة خيارات إعادة التلوين فيمكننا استخدامها لجعل الصورة بلون مختلف تمامًا عن ألوانها الأصلية. ويمكننا الاستفادة من هذه الخيارات لجعل ألوان الصورة ملائمة لبقية عناصر المستند. ويظهر تأثيرها جليًا على العناصر الجرافيكية ذات الألوان المصمتة مثل القصاصات الفنية: أمّا الخيارات في قائمة Artistic Effects فيمكننا استخدامها لتطبيق تأثيرات لجعل الصورة ذات مظهر بلاستيكي، أو لجعلها وكأنّها مرسومة بألوان مائية، أو غيرها من الخيارات. وربّنا ستجد هذه الخيارات مألوفة إذا اعتدت العمل على برنامج فوتوشوب: وكما قلنا سابقًا، يمكن أن تكون هذه التأثيرات ملائمة لصورة معيّنة، وغير ملائمة لأخرى، حسب نوع الصورة ودرجة ألوانها وإضاءتها. إزالة أجزاء من الصورة من الأدوات الجيّدة التي يوفرها ميكروسوفت وورد هي Remove Background التي تُستخدم لإزالة الأجزاء غير المرغوبة من الصورة تلقائيًا. على سبيل المثال نريد إزالة خلفية الصورة أدناه ونحتفظ بالزهرة فقط: سنحدد الصورة وننقر على Remove Background من تبويب تنسيق السياقي: ستتم إحاطة الصورة بإطار ذي مقابض بالإضافة إلى تظليل بعض الأجزاء باللون البنفسجي، وهذه هي الأجزاء التي سيتم حذفها من الصورة. ويعتمد تظليل هذه الأجزاء على تباين ألوانها مع بقية أجزاء الصورة: سنستخدم المقابض لتكبير الإطار ليحتوي صورة الزهرة بأكملها. وكما نلاحظ في الصورة أدناه، ما يزال هناك جزء صغير على يمين الزهرة لا نرغب في الاحتفاظ به: في هذه الحالة ننقر على الأداة Mark Area to Remove ونستخدم القلم لتأشير الأجزاء التي نريد حذفها: وبنفس الطريقة يمكننا استخدام الأداة Mark Area to Keep لتأشير الأجزاء التي نريد الاحتفاظ بها إذا قام وورد بتظليل تلك الأجزاء باللون البنفسجي. بعد الانتهاء ننقر على زر Keep Changes: بالطبع لن تكون عملية القص مثالية جدًا، لكنّها ما تزال أداة مفيدة في حالات معيّنة وتساعد على إزالة الأجزاء غير المرغوبة بسرعة وسهولة: تعديل موضع الصورة ومحاذاتها في تبويب تنسيق نفسه، وبالتحديد في مجموعة Arrange توجد الأوامر التي تُستخدم للتحكم في موضع الصورة في الورقة ومحاذاتها بالنسبة للهامش أو الورقة، بالإضافة إلى طريقة توزيع النص أو التفافه حول الصورة. من قائمة Position يمكننا اختيار الموضع الذي نريد أن تظهر فيه الصورة على الورقة، سواء كان في الوسط، أعلى اليمين، في وسط اليسار أو غيرها من الخيارات. علمًا أنّه سيتم تغيير التفاف النص حول الصورة تلقائيًا حسب ما يتناسب وموضعها: ومن قائمة Text Wrap نختار الطريقة التي يتوزّع فيها النص حول الصورة. المثال أدناه يوضّح بعض طرق التفاف النص، ويعتمد اختيارنا لإحدى الطرق على التفضيل الشخصي وحسب ما يلائم تنسيق المستند: أمّا قائمة Align فنستخدمها لتحديد طريقة محاذاة حدود الصورة مع هوامش الورقة الجانبية أو العلوية/السفلية Align to Margin. أمّا إذا رغبنا في أن تتم المحاذاة مع حدود الصفحة، فنؤشر الخيار Align to Page ثم نختار نوع المحاذاة: الصورة أدناه توضّح الفرق بين المحاذاة إلى اليمين مع هوامش الصفحة والمحاذاة إلى اليمين مع حدود الصفحة: الخياران Distribute Horizontally وDistribute Vertically يُستخدمان لتوزيع المسافة بين الصورة بصورة متساوية أفقيًا أو عموديًا على التوالي، وهذا في حال قمنا بإدراج أكثر من صورة. نحدد جميع الصور بالضغط على مفتاح CTRL أثناء التحديد، ثم ننقر على Distribute Horizontally إذا كانت الصورة موضوعة على مسار أفقي أو Distribute Vertically إذا كانت موضوعة على مسار عمودي: تدوير الصور لتدوير الصورة 90 درجة باتجاه اليمين أو اليسار، ننقر على قائمة Rotate ونختار Rotate Right 90 أو Rotate Left 90: أمّا إذا رغبنا في تدويرها بزاوية محدّدة، ننقر على More Rotation Options ثم ندخل الزاوية المرغوبة في حقل Rotation: كما بإمكاننا قلب الصورة حول المحور الأفقي أو المحور العمودي بتحديد أحد الخيارين Flip Horizontal أو Flip Vertical: خاتمة لقد تعلّمنا في هذا الدرس مختلف الأوامر والخيارات التي يوفّرها وورد لتحسين مظهر الصور وجعلها متناسقة أكثر مع نُسق المستند. كما تعرّفنا على كيفية محاذاتها وموضعتها لتصبح ملائمة لتخطيط المستند. وبالرغم من أننا استخدمنا الخيارات الافتراضية المضمّنة في كل قائمة، إلّا أنّه يمكننا أن نذهب إلى حد أبعد ونخصّص هذه الخيارات يدويًا باستخدام جزء تنسيق الصورة (كما فعلنا مع الصورة المجسّمة) ومربع الحوار Layout (كما فعلنا عند تدوير الصورة).
  17. تعتبر الصور، أو العناصر المرئية بصورة عامة، عنصرًا أساسيًا وهامًا في أغلب المستندات التي نقوم بإنشائها. وتُستخدم بشكل عام من أجل توضيح فقرة مهمة في المستند. وفي أحيان كثيرة تستخدم كعنصر تزيين لزيادة جذب انتباه القرّاء واهتمامهم. سنتعلّم في هذا الدرس كل ما يتعلّق باستخدام الصور في ميكروسوفت وورد من الإدراج، إلى تطبيق مختلف أوامر التنسيق عليها كإعادة التحجيم، الاقتطاع، تعديل الأنماط، وغيرها. إدراج الصور يُتيح لنا ميكروسوفت وورد إمكانية إدراج الصور من مختلف المصادر والأنواع. إذ يمكن استخدام الصور المحفوظة على جهاز الحاسوب، أو البحث على الإنترنت وإدراج الصور بشكل مباشر دون الحاجة إلى حفظها. كما يمكن إدراج رموز وأيقونات مسبقة الصنع والتي يُشار إليها في وورد بالقصاصات الفنية Clip Art، أو حتّى إدراج لقطات شاشة Screenshot. لإدراج صورة من الجهاز، ببساطة نضع مؤشر الفأرة في الموضع الذي نريد إدراج الصورة فيه، ثم نذهب إلى إدراج صورة Insert > Pictures بشكل افتراضي سيفتح المتصفّح مجلّد الصور Pictures على الجهاز، وبالطبع يمكننا الانتقال إلى مجلّد آخر لاختيار الصورة المرغوبة. نحدّد الصورة ثم ننقر على Insert: سيتم إدراج الصورة عن موضع المؤشر، وسنلاحظ ظهور تبويب تنسيق Format السياقي الذي يحتوي على مجموعة كبيرة من الأدوات لتنسيق الصور، سنأتي إلى ذكرها في فقرة لاحقة من هذا الدرس: أمّا لإدراج صورة من الإنترنت، فبنفس الطريقة نضع مؤشر الكتابة في المكان الذي نريد إدراج الصورة فيه ثم نذهب إلى Insert> Online Pictures للبحث باستخدام متصفّح Bing ندخل الكلمة المفتاحية في حقل البحث ثم ننقر على أيقونة العدسة أو نضغط على مفتاح Enter: نلاحظ في الشريط العلوي لنتائج البحث وجود عدة عوامل تصفية، يمكن استخدامها لتقليص نطاق البحث والحصول على نتائج محدّدة. يمكننا مثلا البحث عن الصور بحجم صغير، أو الصور باللون الأحمر فقط، أو حتّى الصور المنشورة تحت رخصة المشاع الإبداعي فقط. وبعد أن نعثر على الصورة المرغوبة نقوم بتأشيرها والنقر على زر إدراج لإدراجها في المستند. علمًا أنّه يمكن تأشير وإدراج أكثر من صورة دفعة واحدة: وبنفس الطريقة يمكننا إدراج قصاصات فنية Clip Art. ندخل الكلمة المفتاحية في حقل البحث، وعند ظهور النتائج نحدد الخيار قصاصة فنية من عامل التصفية "النوع"، ثم نحدد الصورة المرغوبة وننقر على إدراج: يمكن أيضًا من مربّع الخيار Insert Pictures إدراج الصور المحفوظة على OneDrive، أو من على فيس بوك أو Flickr. وبالتأكيد الربط بهذه الخدمات يتطلّب إدخال معلومات الحساب: البريد الإلكتروني والكلمة السرية. أمّا لإدراج لقطة شاشة، فنبدأ أيضًا بوضع مؤشر الفأرة في المكان الذي نري إدراج لقطة الشاشة فيه، ثم ننقر على أمر Screenshot من تبويب Insert: ستظهر عند النقر النوافذ المفتوحة حاليًا والتي يمكن عمل لقطة شاشة لها، ننقر على النافذة المرغوبة وسيتم إدراج اللقطة على الفور: نلاحظ أنّ لقطة الشاشة يتم عملها لكل شيء داخل إطار النافذة، فإذا رغبنا في أن تكون اللقطة لجزء معيّن من النافذة ننقر على الخيار Screen Clipping: ستعرض آخر نافذة فُتحت قبل تطبيق أمر Screen Clipping، وعندها يمكننا تحديد الجزء المرغوب بالنقر ثم السحب والإفلات لإدراج ذلك الجزء مباشرة: اقتطاع الصور، إعادة تحجيمها، وضغطها يوفّر وورد أداة اقتطاع الصور Crop لقص جزء معيّن من الصورة وإخفائه، وترك الجزء المتبقّي ظاهرًا في المستند. لاقتطاع جزء من الصورة نقوم بتحديدها أولًا لإظهار تبويب Format السياقي، ثم ننقر على أمر Crop من مجموعة Size: سنلاحظ تحوّل مقابض الزوايا إلى شكل زويا سوداء اللون، والمقابض العلوية والسفلية إلى خطوط مستقيمة سوداء أيضًا، ننقر على أحد المقابض ونسحب إلى الداخل لاقتطاع الجزء الذي نريد التخلّص منه: سيتحول الجزء الذي سيتم قصّه إلى لون رمادي غامق، ننقر على مفتاح Enter لإتمام عملية الاقتطاع. يمكننا أيضًا اقتطاع الصورة بشكل معيّن نختاره من قائمة الأشكال وليس بشكل مستطيل فقط. للقيام بذلك ننقر على السهم الصغير تحت أمر Crop نمرر مؤشر الفأرة فوق الخيار Crop to Shape ثم ننقر على الشكل المرغوب: وإذا رغبنا في اقتطاع الصورة بنسبة طول إلى عرض معيّنة، نختار أحد الخيارات في قائمة Aspect Ratio: أمّا إعادة تحجيم الصور فتتم أيضًا من الخيارات في مجموعة Size. إذا كان حجم الصورة التي قمنا بإدراجها كبيرًا بحيث يتعدّى عرض الصفحة، سيقوم وورد بشكل افتراضي بإعادة تحجيمها لتلائم عرض المنطقة بين الهوامش. على سبيل المثال، إذا قمنا بتشغيل مربّع الحوار Layout للصورة المدرجة الموضّحة، سنلاحظ أنّ حجمها الأصلي Original Size أكبر من الحجم المعروض في المستند Absolute Size. أي أنّه تم تصغير الصورة الكبيرة لتناسب عرض الصفحة: وللتحكم في حجم الصورة يدويًا، نستخدم الخيارين Shape Height وShape Width في مجموعة Size. ننقر على السهم العلوي لزيادة الطول/العرض، أو السهم السفلي لإنقاص الطول/العرض. أو لنكون أكثر تحديدًا ندخل البعد المرغوب في الحقل: عندما نقوم بزيادة أو إنقاص طول الصورة مثلًا، سنلاحظ أنّ العرض يتغيّر أيضًا نسبة لتلك الزيادة أو النقصان، والسبب هو أنّ الخيار Lock Aspect Ratio مؤشر بشكل افتراضي للحفاظ على الأبعاد متوازنة: ويمكننا دائمًا إلغاء تأشير هذا الخيار إذا رغبنا في تغيير طول الصورة أوعرضها بشكل مستقل. الطريقة الأخرى لإعادة تحجيم الصورة هي باستخدام المقابض. نستخدم مقابض الزاوية لزيادة/إنقاص الطول والعرض معًا وبشكل متوازن، أما المقابض الجانبية والعلوية/السفلية فنستخدمها لزيادة/إنقاص كل بعد على حِدة: من الخيارات المفيدة التي يوفّرها وورد هو ضغط الصور Compress لتقليل حجمها وبالتالي تقليل حجم المستند عند الحفظ. فمن البديهي أنّ الصور ذات الحجم الكبير تؤدي إلى زيادة حجم المستند، وهذا الأمر غير محبّذ إذا كان المستند يحتوي على كثير من الصور ورغبنا في مشاركته مع الآخرين. كما أنّ الصور ذات الحجم الكبير يمكن أن تجعل العمل على المستند بطيئًا إذا احتوى على الكثير منها. على سبيل المثال، المستند أدناه يشتمل على صفحة واحدة مدرج فيها صورة بحجم كبير: فإذا قمنا بحفظ الملف سنلاحظ أنّ حجمه يزيد على 300 كيلوبايت، وهذا الحجم كبير بالنسبة لمستند من صفحة واحدة فقط: لضغط هذه الصورة نحددها ثم ننقر على أمر Compress Pictures من تبويب تنسيق السياقي: سيُفتح مربع الحوار Compress Pictures الذي يحتوي على مجموعة خيارات لتقليل حجم الصورة: سيكون الخيار Apply only to this picture مؤشرًا بشكل افتراضي، ويمكننا تركه كما هو إذا كنا نريد ضغط الصورة الحالية فقط، أمّا إذا كانت لدينا الكثير من الصور في المستند ونريد ضغطها دفعة واحدة فنلغي تأشير هذا الخيار. الخيار Delete cropped areas of picture أيضًا مؤشر بشكل افتراضي. وهو خيار مفيد يقوم بحذف الأجزاء المقتطعة من الصور. فكما ذكرنا في فقرة سابقة أنّه عند اقتطاع الصورة يتم إخفاء الجزء غير المرغوب منها وليس حذفه، أي أنّه سيبقى محفوظًا على المستند ويمكن استرجاعه عند الحاجة بتحديد الصورة والنقر على أمر Crop. فلحذف تلك الأجزاء المقتطعة نهائيًا وتقليص حجم المستند نبقى هذا الخيار مؤشرًا. بعد ذلك ننتقل إلى خيارات الضغط ونحدد الخيار المرغوب: Print: لحفظ الصورة بحجم كبير لأغراض الطباعة وغيرها. Screen: لحفظ الصورة بحجم متوسط لأغراض العرض على صفحات الويب أو على أجهزة العرض على الشاشة. E-mail: لحفظ الصورة بحجم صغير لغرض المشاركة. سنحدد الخيار Email ونحفظ المستند باسم جديد لنلاحظ الفرق في الحجم: فرق كبير بين 307 كب و36 كب! خاتمة لقد غطّينا لحد الآن كيفية إدراج الصور من مختلف المصادر والأنواع بالإضافة إلى اقتطاعها والتحكّم في أبعادها وأحجامها عند الحفظ. في الجزء الثاني من هذا الدرس سنكمل الشرح حول استخدام المزيد من خيارات تبويب Format لتخصيص مظهر الصورة وموضعها داخل المستند.
  18. اطّلعت في الفترة الأخيرة على عدد من التوصيات ودراسات الحالات التي تعنى بالعلاقة الطردية بين النشاط والتفاعل على Pinterest ومدى تأثيره على زيادة عدد زوار ومتابعي المدوّنات، قرّرت بعدها الدخول في منافسة مع بعض المدوِّنين لمدة شهر كامل مُستهدفة جذب المزيد من الزوار والقرّاء لمدوَّنتي، خصّصنا خلالها 15 دقيقة يوميا للتفاعل على Pinterest سواء بمتابعة أفراد جدد، حذف لوحات boards أو إضافة أخرى جديدة و"تثبيت" pin المشاركات. من خلال هذه التجربة والتي لم يكن لها أي تأثير يُذكر على مدوَّنتي سوى قضائي وقتًا أطول على Pinterest يمكنني القول أن مثل هذا التطبيق سيظل في النهاية مجرد نافذة للتسوق يقضي الناس أمامها الكثير من الوقت في البحث وتثبيت pinning الموضوعات بينما عدد قليل منهم فقط قد يفكّر أن يضغط على الرّوابط أو يقرأ مواضيع جديدة مهمة وتحوي مضمونا متميّزا. لكنني بالتأكيد تعلّمت من هذه التجربة الكثير واستخلصت منها مجموعة نصائح قيّمة. 1. كن متواجدا إذا أردت أن تكون ناجحًا على شبكات التواصل الاجتماعي عليك أن تكون نشطا وفعّالا بشكل يومي ومنتظم حتى وإن أصابك ذلك ببعض الإزعاج والتوتر. 2. كلما زاد عدد الأشخاص الذين تتابعهم كلما زاد أيضا عدد متابعيك هو سلاح ذو حدّين فمن الناحية الإيجابية هو استراتيجية معروفة لجذب عدد من المتابعين لمدوّنتك، فحين تبدأ بمتابعة مجموعة كبيرة من الأشخاص فحتمًا سيكتشف بعضهم مدوّنتك ويبدأ بدوره في متابعتك، لكن على الجانب الآخر هذه المتابعة العشوائية بدون تصنيف وتدقيق في الاختيار ستؤثر على المشاركات التي ستشاهدها وأغلب المواضيع ستكون مُكرّرة، و مع الوقت لن تجد المميز والجديد لتضيفه يوميا أو تنشره على Pinterest، لذا من الأفضل التركيز على متابعة المتخصصين في مجالك. 3. استخدم أسماء وعناوين واضحة يتوقّف مدى سهولة أو صعوبة الوصول لمواضيعك وقراءة مشاركاتك على استخدام المسميات والعناوين الواضحة، لذا من الأفضل أن تضع عنوان مدوّنتك واسمك الشخصي تحت العنوان الرئيسي، كن متأكدا أن لوحاتك boards لها أسماء واضحة تعبر عن محتواها وتأكّد من تضمين الكلمات المفتاحية الأساسية فيها. 4. ثبت مشاركات من داخل وخارج Pinterest حاول أن تقوم بعملية التّثبيت pinning من داخل وخارج Pinterest على حد سواء، لجذب المزيد من المتابعين. كن حريصًا على التنوّع في مشاركاتك ولا تكتفِ فقط بإعادة نشر نفس المُحتوى المُكرر والموجود على المنصّة من قبل. 5. استخدم صورا قابلة للتثبيت في تدويناتك لما تنشر تدوينة جديدة لا تنس أن تضيف إليها أفضل وأجمل الصور، وأن تجعلها قابلة للنشر على Pinterest (أي يسهل تثبيتها على Pinterest)، وتكتب اسم الموضوع أو المقال على الصورة مستخدما أدوات مثل Picmonkey أو تضيف إليها علامة مائية. و بمجرد رفع الصورة تأكد من اختيار الوسوم الخاصة بتفاصيل الصورة أو بتوصيف المقال، فهي أول ما تقع عليه عين القارئ. 6. قوة تأثير استخدام الرسوم البيانية والخطوات المصورة يحب القرّاء الصور التي توضح خطوة خطوة طريقة صنع كثير من الأشياء بطريقة مُبسّطة وواضحة وكذلك الرسومات التوضيحية والبيانية. 7- انضم لبعض المجموعات Group boards تتميز مثل هذه المجموعات بجمهورها العريض من المتابعين والقرّاء، فإذا أردت أن تضمن انتشار مقالاتك انضم لواحدة منها وفي ذات الوقت عليك الالتزام بالقواعد واللوائح الخاصة بها مثل تحديد عدد معيّن من المشاركات لكل عضو يوميا. لمعرفة المزيد عن هذه المجموعات يمكنك الرجوع إلى PinGroupie. ترجمة -وبتصرّف- للمقال Pinterest Tips for Bloggers لصاحبته REBECCA COLEMAN.
  19. عندما نكتب عادةً درساً عن معالجة الصور فإن الهدف يتمحور حول التعديل الدقيق للمستويات Levels وتوازن الألوان Colour Balance وذلك حتى نتمكن من إحياء المشهد، ولكن أحياناً يكون من الأفضل القيام بتعديلات إضافية لتحسين الصورة وزيادة التأثيرات الواقعية. سنقوم بتطبيق صبغة الألوان وتعديل التباين وإضافة تأثيرات الإضاءة لإعطاء الصورة شكلاً نموذجياً يشبه صور المجلات ولوحات الإعلانات. بعد أن أنهيت مشروع تعديل دراجتي مؤخراً قام صديقي ريك (Urbanpixels) باستخدام مهاراته في التصوير حيث صَوَّر بعض اللقطات الرائعة لي ولدراجتي في قصرٍ جورجيٍ أثري (لمشاهدة مجموعة الصور كاملة). لقد قام صديقي ريك بعمل ممتاز من خلال معالجة الصور والقيام بتعديلات دقيقة للإضاءة، التباين وتوازن الألوان ولكن لدي أفكار خيالية لإضافة بعض التأثيرات المذهلة للألوان والإضاءة وانعكاساتها لتحسين الصورة بمهارة عالية. هذه هي الصورة التي سنعمل عليها في هذا الدرس. إنها نسخة عن مشهد حياة حقيقية ولكن إضافة بعض تأثيرات الإضاءة ستجعل الدراجة تنبض بالحياة وتزيد من روعتها وتأثيرها. افتح الصورة ببرنامج فوتوشوب واتبع تعليماتي خطوة خطوة. أولاً أضف طبقة مستويات Levels Adjustment Layer في الفوتوشوب. قص بعض الظلال لإضفاء التأثير الداكن على الصورة. يمكنك أيضاً إدراج بعض الإشراقات Highlights في الداخل لزيادة التباين ولكن احذر من المبالغة في هذا الأمر. أضف طبقة خريطة تدرجات Gradient Map adjustment layer. قم بتعيين التدرج اللوني ليبدأ من الأزرق الداكن 020413 # إلى الأزرق الرمادي 2b4a61 # إلى الأصفر الباهت fce9bb #. كل ألوان الصورة سيتم استبدالها بالقيم التي قمت بتحديدها هنا. غيّر خصائص المزج لطبقة التدرجات اللونية إلى وضعية Overlay لتسمح للألوان الجديدة بالتفاعل ولتغير نغمة الصورة الأصلية، وتولّد ملامح الألوان الجديدة ببراعة. خفف Opacity لتخفيف التباين ولتخفيف آثار التأثيرات. الدراجة النارية هنا هي الموضوع الأساسي الذي نعمل عليه في هذه الصورة، إذاً فلنُشَغّل الإضاءة الأمامية ونجعلها تعمل. افتح تأثير توهج Lens Flare المناسب وألصقه في داخل المستند. عدّل مستويات الصورة Levels لتتأكد من أنّ الخلفية سوداء تماماً، بكل الأحوال لن تبقى مرئية بعد الخطوة التالية. بدّل خصائص المزج للتوهج إلى Screen لتحويل الخلفية السوداء إلى شفافة، والآن غيّر حجم وموقع التوهج فوق المصباح لتزوير إنارة هذا المصباح. غيّر Opacity لتضبط إضاءة المصباح ولإعادة بعض التفاصيل الخاصة بالمصباح. انسخ طبقة الإضاءة وبدّل الحجم والموقع لتكون فوق المصباح الصغير الثاني. اضغط CMD+T وغيّر دوران صورة الضوء حتى لا تبدو أنها صُنِعَت بصيغة نسخ/لصق. افتح التوهج الأصفر من حزمة التوهجات البصرية وألصقها فوق المصباح الرئيسي. هذه الصورة الاستثنائية لديها توهج إضافي يحتاج للإزالة. ارسم تحديداً حوله واحذفه. أضف توهجاً إضافياً يمثّل الانعكاس في عدسة النظارات الشمسية. افتح صورة توهج عشوائية وغيّر حجمها لتتسع فوق الصورة بأكملها. حدد التوهج الذي يناسب تكوين الصورة حيث سنستخدم المناطق البرّاقة لرسم التركيز على تلك المناطق في الصورة. بدّل طبقة التوهج الكبير إلى Soft Light وخفف Opacity لضبط التأثير. هذا يساعد على تفتيح الموضوع الرئيسي للصورة بينما نضيف أيضاً صبغة لونية طفيفة إضافية. أضف طبقة تعبئة لونية Color Fill adjustment layer مستخدماً الأزرق الداكن 0c1329 #. بدّل خصائص المزج لهذه الطبقة إلى Lighten حتى تحصر هذا اللون في الظلال وتحولهم من الأسود إلى ذلك الأزرق الداكن. هذه التعديلات اللونية الخفيفة وتأثيرات الإضاءة المُزَوَّرة تعطي الصورة تأثير مجلة روك أند رول بكفاءة عالية. ترجمة -وبتصرّف- للمقال: How To Enhance a Photo with Color & Lighting Effects لصاحبه Chris Spooner.
  20. هنالك الكثير من القواسم المشتركة بين مسوِّقٍ عبر الشّبكات الاجتماعيّة وبين مُعلنٍ رائع كان يعمل في الستّينيّات من القرن المنصرم. وقد اشتهر David Ogilvy، وهو الأب الرّوحي للإعلان، بأنّه يقضي الكثير من الوقت في انتقاء العناوين، لأن العنوان هو أكثر سطرٍ يقرأه النّاس، وهو في غاية الأهميّة. وكان Ogilvy أستاذًا في أشياء كهذه، أي في ترتيب الأشياء بحسب أهميّتها. لو عاش وشَهِد زمن الشّبكات الاجتماعيّة، فأنا متأكّدٌ من أنّه سيقول شيئًا من قبيل: لم تكن الصّور بهذه الأهميّةً من قبل في الشّبكات الاجتماعيّة. فقد أصبحت الآن مفتاحًا لجذب المزيد من التّفاعل عبر الإنترنت، ويشبه في ذلك العنوان في الإعلان. المشكلة الوحيدة هنا هي عندما لا تكون بارعًا تمامًا في تصميم الرّسوم البيانيّة، وقد يكون إنشاء صورٍ ملفتة للنّظر ومثيرة للاهتمام عندئذٍ أمرًا صعبًا. كيف يمكن لغير المصمّمين أن يقوموا بإنشاء صورٍ رائعة للشبكات الاجتماعيّة؟ يمكن فعل ذلك من خلال تعلّم مبادئ تصميم بسيطة قابلة للتّكرار. وإليك ثلاث مبادئ أساسيّة في التّصميم تساعدك على إنشاء صور ملفتة للشّبكات الاجتماعيّة كلّ مرّة: المبدأ الأول: قم بإنشاء مخطط بسيط ومتوازن هكذا بدت طاولتي في Airbnb اليوم صباحًا وهكذا بدت طاولتي بعد حوالي 30 ثانية. هل تلاحظ أيّ فرق؟ تحتوي كلتا الصّورتين على نفس العناصر. لم يتم إزالة أي شيء من الطّاولة، ومع ذلك فالصّورة الثّانية تبدو أفضل بكثير عند إجراء تعديلٍ طفيف على التّنسيق، على الأقل بالنّسبة لي. ويمكن أن نتعلّم درسًا بسيطًا من ذلك، وهو أنّ تنسيق العناصر في الصّور يُحدِث فرقًا كبيرًا. ألقِ نظرةً على هذين المثالين الأساسيين: ألا تبدو الصّورة الثّانية أفضل بكثير؟ ذلك بسبب مبدئين اثنين من مبادئ التّصميم المتعلّقة بتنسيق الصّورة، وهما التّقارب proximity والمحاذاة alignment. التقارب كما يوضّح Bakari Chavanu: في المثال أعلاه، وفي الصّورة الأولى تم وضع الأيقونة والنّص بشكل متقارب جدًا. وذلك يحرم كلًا من العناصر من الوقوف لوحدها والقيام بدورها. توصل الأيقونة بصريًا فكرة ركوب الأمواج يوصل النّص تفاصيل عن ركوب الأمواج يعني تطبيق مبادئ التّقارب أنّه يجب توجيه المشاهد مباشرةً إلى الأيقونة ثم إلى النّص بشكلٍ واضح. ممّا يتيح للمشاهد فهم ما يُراد إيصاله بشكلٍ أفضل. في المثال الثّاني، تمّ تجميع النّص إلى جانب النّص فقط. إنّ تطبيق مبدأ التّقارب يضفي الوحدة unity والتّتابع continuity على الصّور. المحاذاة إنّ محاذاة العناصر في الصّورة بشكلٍ مناسب يساعد في الحفاظ على التّوازن. وإليك مثال صور مدرسة التّزلّج مرّةً أخرى. أعلى الأيقونة والنّص متحاذيين في كلتا الصّورتين. النّص بأكمله متراصف في الصّورة اليُمنى فقط. أسفل الأيقونة والنّص متحاذيين في الصّورة اليُمنى فقط. تسهم جميع هذه الاختلافات الصّغيرة في جعل الصّورة اليُمنى أكثر توازنًا وجذبًا. كيفيّة إنشاء صور متوازنة وبسيطة عندما يكون لديك عناصر مختلفة في الصّورة التي تقوم بإنشائها، كالنّص، والأيقونات والرّسوم الإيضاحيّة، فعليك أن تفكّر بالدّور الذي يلعبه كلّ عنصر في الصّورة. حافظ على نوعٍ من المحاذاة بين العناصر المختلفة، سواء كان عموديًا، أو أفقيًا أو مائلًا. المبدأ الثاني: يحدث اللون فرقا كبيرا تقول Leslie Cabarga، مؤلّفة كتاب دليل المصمّم إلى تركيبات الألوان The Designer’s Guide to Colour Combinations: إنّ اللّون ليس مجرّد عنصر مرئي فحسب، وإنّما عنصرٌ شعوري أيضَا. وبما أنّ اللّون يثير مشاعر معيّنة، فغالبًا ما قد يحدّد فيما إذا كان النّاس ينجذبون إلى الصّور التي تقوم بإنشائها أم لا. وذلك لا يعني أنّ الأمر ببساطة الابتعاد عن درجات ألوانٍ معيّنة، وإنّما يعني ضرورة التّفكير بالدّور الذي يلعبه لونٌ معيّن في ما تبتكره. وذلك الدّور بسيط هو إحداث تباين في صورك. وتصف Callie Kavourgias وظيفة اللّون والتّباين هذه كما يلي: وإليك مثالين بسيطين عن ذلك في الصّورتين التّاليتين، لكلّ زوج من الدّوائر اللّون نفسه في المنتصف، لكن يبدو كلٌ منهما مختلفًا عن الآخر. وقد تلاحظ تغيّرات في العمق مع تغييرات الألوان المختلفة: ويُظهِر هذا التّباين أنّ إدراك الألوان المستَخدمة في صورك قد يختلف اختلافًا كبيرًا بحسب طريقة مزجك لها. إنّ المبدأ الأساسي عندما يكون الأمر متعلّقًا بالألوان والتّباين: حافظ على البساطة، فغالبًا ما يكون الأقل هو الأقوى تأثيرًا. من الضّروري أن تختار مزيجًا من الألوان المتناسبة، لكن كيف تختار الألوان؟ كيفية اختيار ألوان متباينة Paletton من الأدوات الرّائعة التي اكتشفتها مؤخّرًا للمساعدة في اختيار الألوان المتباينة. وهي أداةٌ تختار ألوانًا متباينة ومتمّمة لبعضها البعض لئلا تضطرّ للتّفكير بالموضوع كثيرًا. في هذا المثال، اخترت الأحمر كلونٍ أساسي، والمتمثّل بأعلى نقطة في عجلة الألوان، وطلبت نسق الألوان الأحاديّة، وهو نسق الألوان الذي يرتكز على ظلال ودرجات لونٍ واحد. عندما أقوم بالمرور فوق المربّعات المختلفة على اليمين، تظهر لي رموزًا ست عشرية، مثل FF6B6B الذي يمكن رؤيته في الجزء الأيمن من الصّورة أعلاه، والذي يمكن أن أستخدمه في تصميماتي. في المثال الثّاني، استخدمت الأحمر أيضًا كلونٍ أساسي، لكنّني طلبت هذه المرّة نسق ألوانٍ تكاملي ثلاثي، أي ثلاث ألوان متموضعة بشكلٍ متساوي في الخطوط حول عجلة الألوان. ومرّة أخرة، أستطيع اختيار ألوانٍ متباينة تتلاءم مع بعضها. هنالك أداةٌ أخرى أستخدمها كثيرًا وهي Brand Colors، عبارةٌ عن مجموعة رموز ألوان رسميّة للشّركات ذات الشّهرة العالميّة. يظهر الرّمز السّت عشري عند المرور فوق أيّ لونٍ من الألوان، كما فعلت هنا مع شركة Addvocate،. عندما أشعر بالعجز ولا أتمكّن من التّفكير في مزيجٍ عظيم من الألوان، فغالبًا ما أستخدم أداة Brand Colors لأستوحي الأفكار. وهذا النّوع من الأدوات ينقذ غير المصمّمين من أمثالي. المبدأ الثالث: اختر خطوطا متناسقة وتسهل قراءتها قد يكون هذا التّشبيه مستخدمًا كثيرًا، لكنّ اختيار الخط يشبه اختيار الملابس التي ترتديها إلى حدٍ ما. إنّ اختيارك لملابسك يعكس جزءًا من شخصيّتك وأسلوبك. فالدّخول إلى اجتماع وأنت ترتدي بدلة مقابل أن ترتدي قميصًا بكمّين قصيرين وسروالًا قصيرًا يترك انطباعات مختلفة عنك لدى الآخرين. ومن هذا المنطلق، فعندما تستخدم خطوطًا في الصّور التي تضعها على الشّبكات الاجتماعيّة فإنّها توصل رسالة أساسيّة عنك وعن شركتك. لنستخدم مثالًا على ذلك، إليك صورتين للشبكات الاجتماعيّة يمكن الاختيار بينهما، أيّهما تفضّل؟ في الحقيقة أنا أميل نحو الصّورة على اليسار لسببين: لأن قراءتها أسهل الخطّان يبدوان متكاملين أكثر وذلك لا يعني أنّ الصّورة الأخرى سيئة للغاية، وإنّما يوضّح أهميّة التّركيز على دور النّص. يلخّص Max Luzuriaga، وهو مصمّم ومطوِّر ويب، الأمر بشكلٍ جيد: وذلك يطرح سؤالًا هامًا للغاية، كيف نختار الخط الذي نستخدمه؟ يمكن أن نعتمد هنا على نصيحة Dan Mayer الحكيمة عندما يقول: أفضل ما في اختيار الخطوط هو أنّك غير مضطرٍ للقيام بالكثير من العمل. تكشف لك بعض المواقع مثل Font Pair الخطوط التي تتماشى مع بعضها البعض إنّ إجراء بحثٍ سريع على جوجل، (كالبحث عن "best fonts for business quotes”) ، يقدّم لك أمثلة رائعة يمكن نسخها كيف تختار الخطوط للصّور التي تقوم بإنشائها: البسيط أفضل من المزخرف كن ثابتًا واستخدم نفس الخط بشكلٍ متكرّر عند إضافة خطٍ ثانٍ، اختر شيئًا مختلفًا فعليًا لكن ببساطة الخط الأوّل ختاما يسعدنا أن نسمع رأيك: كيف تقوم أنت بإنشاء صورٍ جذّابة للشّبكات الاجتماعيّة؟ ما هي المصادر التي ساعدتك على إنشاء تصاميم رائعة؟ ما هي المبادئ التي لم أذكرها والتي أثبتت جدواها بالنّسبة لك؟ ترجمة -وبتصرّف- للمقال How to Create Engaging Images for Social Media: A Simple Guide For Non-Designers لصاحبه Roy Olende.
  21. لا يخفى على كل من يعمل على وسائل التواصل الاجتماعي، مهما كانت خبرته، أنّ الصور تساعد على زيادة التفاعل على الإنترنت لأنّها تضيف بعض الجاذبية البصرية للمنشورات. لكن ليس من السهل دائما تحديد أفضل أنواع الصور التي ينبغي نشرها. كما أنّ إنشاءها يمكن أن يستغرق وقتًا طويلًا، وخصوصًا إذا كنت غير متأكد من الرسالة التي تحاول توصيلها من خلال الصورة. سنستعرض في هذا المقال بعض أنواع الصور البسيطة ونبيّن لك متى يفضّل استخدامها ليصبح تحديد الصور التي تناسب منشوراتك عملية بسيطة. تعالَ لنتعرّف على هذه الأنواع. الصور الملتقطة (شخصيا) بلا شك، هذا النوع هو الأكثر شعبية من بين أنواع صور الشبكات الاجتماعية. فمن السهل نسبيًا التقاط الصور بواسطة هواتفنا الذكية. وتجعل بعض التطبيقات، مثل إنستغرام و VSCO تحرير الصور وجعلها ذات مظهر احترافي عملية أسهل بكثير مما كانت عليه سابقًا. وبالرغم من أنّ هذه الطريقة سريعة وبسيطة، إلّا أنّها تكون في بعض الأحيان محدودة الفعّالية، والسبب هو أيضًا في سرعتها وبساطتها. إذ يمكن لأي شخص التقاط الصور وإرفاقها في تحديثاته، مما يجعل بروز الصور وتميّزها أكثر صعوبة. إذًا، متى يكون استخدام الصور الملتقطة فعَالا؟ عندما تكون الصورة فريدة، استثنائية، ومؤثّرة (أي عندما تتحدّث الصورة عن نفسها). إليك بعض الأمثلة: Gary Vaynerchuk يملك Vaynerchuk عددًا ضخمًا من المتابعين على وسائل التواصل الاجتماعي لأنّه متحدّث رائع، وتروي تحديثاته قصصًا مذهلة. هذا المنشور هو من الأمثلة الرائعة على كيفية إضفاء عامل مشوّق على القصة التي يرويها في منشوره من خلال بعض الإضافات (قدمه) على صورة عادية. عندما يتعلّق الأمر بمشاركة الصور على الشبكات الاجتماعية، وخصوصًا الصور الملتقطة شخصيًا، يكون النص المرافق للصورة مهمًا جدًا. ففي أقل من 140 حرف، تمكّن Vaynerchuk من رسم صورة رحلته من روسيا البيضاء للحصول على تذكرة الموسم في الصف الأمامي في قاعة Madison Square Garden. Mike Escamilla Escamilla هو من متسابقي الدراجات على الطرق الوعرة الأسطوريين، كما يلعب دور البديل في الأدوار الخطيرة في الأفلام. يقضي الكثير من وقته في السفر حول العالم بحثًا عن المغامرة. ويلتقط بعض الصور البطولية التي تجذب انتباه الناس، مثل هذه الصورة الفريدة في ويسلر، كندا. لقد بنى قاعدة ضخمة من المتابعين بسبب مثل هذه الصور التي تبيّن أدائه لأنشطة مثيرة وغير اعتيادية: تبرز صور Escamilla لأنّه يأخذ عبرها متابعيه في رحلة ويعرض عليهم شيئًا غير مألوف بالنسبة لهم. مع ذلك، لا يعني هذا أنّه يجب أن تكون مغامرًا عالميًا لكي تأخذ عملاءك ومتابعيك في رحلة. فببساطة، يمكن أن تكون مشاركة صورٍ لجانب من شركتك لا يراه الناس في العادة من الأمور التي تؤدي إلى زيادة التفاعل. على سبيل المثال، يشارك Happiness Hero, Ross صورة لمكتبه للعمل عن بعد: Fast Company تعمل الصور الواضحة والبسيطة بشكل جيّد خصوصًا مع المقالات الإخبارية. لقد استخدم حساب Fast Company هذه الصورة التي التقطت لحظة لا تُنسى خلال كلمة الرئيس الأمريكي باراك أوباما في خطاب حالة الاتحاد. الصور المجمعة Collages تتيح لك الصور المجمّعة استخدام مجموعة من الصور لتروي قصّة أو لعرض عناصر متنوّعة. ليست هناك قواعد صارمة وسريعة لإنشاء الصور المجمّعة، وهي مفيدة على وجه الخصوص في الحالات التالية: إذا كانت الصور توضّح تسلسلًا زمنيًا للأحداث. إذا كانت الصور تعرض وجهات نظر متناقضة. إذا كانت الصور تسلّط الضوء على تفاصيل مثيرة للاهتمام حول منتج أو قصّة. John David Glaude تكون صور قبل/بعد، كالمدرجة أدناه، فعّالة لأنّها تصف مسيرة ما. لقد تمكّن Glaude من بناء قاعدة ضخمة من المتابعين على يوتيوب وإنستغرام باستخدام هذه الأنواع من الصور المتناقضة. وبالرغم من أنّه ينشر هذا النوع بشكل منتظم، إلّا أنّها تظل ملهمة لأنّها توثّق قصة استثنائية. Quartz قد تبدو هذه الصورة المجمّعة محيّرة للوهلة الأولى. فما هو الرابط بين Steven's Universe (مسلسل رسوم متحركة)، Orange in the New Black (مسلسل كوميدي)، Jimmy McNulty (ممثل)، و Mad Max (فيلم )؟ التناقض بين الصور هو المغزى هنا. بالنسبة لبعض الناس، تثير هذه الصور الاهتمام لديهم بما يكفي للنقر على الرابط وقراءة القصة. إذًا، فعرض الصور المتناقصة هو من الوسائل الذكية لجذب محبي الاستطلاع من الجمهور. Shme Custom Kicks الصور المجمّعة هي أيضًا من الوسائل الرائعة لعرض المنتجات كالملابس والطعام. يعرض هذا المثال من Shme التفاصيل الدقيقة لكل جهات الحذاء، الأمر الذي يكون مستحيلًا بواسطة لقطة واحدة. النصوص على خلفية عادية/بسيطة إذا كانت الصور العادية تعمل على سرد قصة بصرية، فإنّ الصور الغنية بالنصوص تركّز على توصيل رسالة محددة جدًا بشكل سريع. عادة ما تكون الكلمات أقل جذبًا من الصور، لذلك يجب أن تكون العبارات الموضوعة على خلفية عادية وتتم صياغتها بعناية إذا كنت ترغب في أن يكون هذا النوع من الصور مميزًا. تكون الصور الغنية بالنصوص مفيدة خصوصًا عندما تعرض: اقتباسات ملهمة. عناوين جذّابة. مقتطفات مثيرة للاهتمام (كمقتطف من كتاب أو مقال مثلًا). Marie Forleo يوضّح هذا المثال قوة الكلمات وأهمية التصميم. الاقتباس قصير وعميق، مما يزيد من احتمالية قراءته. كما يحتل النص مساحة صغيرة من الصورة مما يجعل التصميم يسلّط المزيد من التركيز على الاقتباس. Amy Porterfield Porterfield معروفة في عالم الشركات الرقمية، والصورة الاجتماعية هذه هي عبارة عن عنوان جذّاب (لمقال أو شيء من هذا القبيل) صمم لجذب فئة مُعيّنة من المُتابعين. فإذا كان لديك عنوانًا رئيسيًا أو فرعيًا مميزًا، بإمكانك تحويله بسهولة إلى صورة اجتماعية لجذب جمهورك. Wall Street Journal المقتطفات هي من الوسائل السهلة لإثارة الاهتمام بمقال أو منشور. لقد استخدمت صحيفة WSJ هذه الطريقة مع العديد من مقالاتها، وغالبًا ما أجد نفسي متوقفًا لقراءة هذه المقتطفات بينما أتصفح آخر الأخبار على حسابي. من الأفضل اختيار المقتطفات الأكثر جاذبية لهذه الأنواع من الصور، مثل أي شيء يبدو غريبًا، ألمعيًا، أو طريفًا. نص مع صورة دمج الصور والنصوص هو من أنواع الصور التي أفضلها على وسائل التواصل الاجتماعي. ولا يعني هذا أنّها الطريقة المثلى لجميع الحالات، لكنّها غالبًا ما تكون فعّالة لأنّها تسهل اندماج السرد البصري مع المتن copy المقنع. Jay Baer غالبًا ما تكون إضافة النصوص فوق الصور من الطرق المفيدة، وبالتحديد عند استخدام الصور التي يكون مصدرها مواقع الصور. تُستخدم الصور العامة والمجانية بشكل متكرر، لذلك يكون نشر الصورة لوحدها غير جذاب بما فيه الكفاية في بعض الأحيان. يوضّح هذا المثال من Jay Baer كم من السهل جعل الصور العامة تبرز باستخدام عنوان وشريط ملوّن. Shriya Nevatia يصلح هذا النوع أيضًا لعرض الدعوات إلى إجراء call-to-action، كما نرى في هذا المثال الرائع من Shriya Nevatia . الأيقونات والرسومات الأيقونات والرسومات هي من الأدوات الرائعة لجذب الناس إلى المحتوى الذي تنشره. وهي من البدائل الرائعة للصور الملتقطة لأنّها من أشكال التواصل البصري التي يمكن إضافتها بسهولة إلى الصور. لكن أحيانًا يكون من الأفضل استخدام القليل من هذه العناصر، لأنّ الهدف هو التواصل الواضح مع جمهورك وليس جعل الصورة مزخرفة ومحشوّة بالكثير من الأيقونات. Help Scout لقد اغتنم فريق المحتوى في Help Scout قوة وبساطة الأيقونات بالكامل. إذ يستخدمون هذه الخاصية بشكل متكرر وعلى مختلف المنصات، من صور مقالاتهم إلى منشوراتهم على الشبكات الاجتماعية، حتّى أصبح استخدامها صفة مُميّزة لهم. General Assembly إنّ إضافة الأيقونات إلى الصور هي من الوسائل البسيطة لجعلها فريدة وجديرة بالملاحظة. يعرض هذا المنشور من General Assembly أفق مدينة دنفر، ولم تكن لتصبح مثيرة للاهتمام بدون الأيقونات. لقطات الشاشة Screenshots النوع الأخير هو الأسهل دون أدنى شك. يمكن التقاط لقطات الشاشة في ثواني، وهي مفيدة جدًا عند لفت الانتباه إلى جزء من نص أو صورة. Chris Dixon Chris Dixon هو مستثمر مخاطر ذكي جدًا ينشر الكثير من المقتطفات الرائعة. يمتلئ حسابه على تويتر بالصور والاقتباسات المثيرة للاهتمام والمأخوذة من مجموعة متنوّعة من المقالات على الإنترنت. Jay Yarow يظهر هذا المثال من Jay Yarow البراعة في استخدام لقطات الشاشة. إذ أنشأ Yarow لقطة شاشة لمقتطف يريد مشاركته، وقام بتظليل منطقة استثنائية من النص لتسليط الضوء عليها. ما هو نوعك المفضّل من الصور؟ يمكن إنشاء أغلب هذه الصور في غضون بضع دقائق باستخدام أدوات مثل Pablo، Canva، و PicMonkey. وبالطبع هناك مجال كبير للإبداع. ما هو نوع الصور الأكثر نجاحًا الذي تستخدمه على وسائل التواصل الاجتماعي؟ ترجمة -وبتصرّف- للمقال (Types of Simple Yet Powerful Social Media Images (And When It’s Best To Use Them لصاحبه: Roy Olende.
  22. سنقوم اليوم بمحاكاة لقطة مشوّهة من فيلم VHS قديم في برنامج فوتوشوب. هذا الموضوع غير عادي تمامًا وآمل أن يكون في متناول اليد لتلك المشاريع النادرة التي تحتاج إلى تكرار هذا الأسلوب. سوف نقوم بأخذ صورة ونقوم بتشويهها باستخدام مجموعة من التقنيات لمحاكاة تلك اللقطات القديمة ثم سنضيف بعض النصوص بالخطوط القديمة التي كانت تُستخدم قديمًا كلمسة أخيرة لمشهد فيلم منزلي يُعرض بواسطة جهاز مشغل فيديو قديم. النتيجة النهائية تبدو كتأثير مشهد من مشغّل فيديو قديم حقيقي والذي يُحاكي تأثيرات التشوّه والالتفاف المتنوعة التي تحصل عادة مع أشرطة فيديو VHS القديمة خصوصًا عندما نوقف عرض الشريط أو نقوم بالضغط على زر الإعادة. مجموعة فلاتر التشويه في فوتوشوب ستساعدنا على تدمير الصورة الرقمية ثم سنضيف بعض اللمسات النهائية ببعض النصوص التي تحقق الواقعية للقطات الفيديو القديمة. افتح الصورة التي اختَرتَها باستخدام برنامج أدوبي فوتوشوب. أنا استخدمتُ هذه الصورة المجانية من موقع unsplash. سنطبّق تأثير الالتفاف على هذه الصورة باستخدام أدوات Liquify الموجودة ضمن قائمة فلاتر فوتوشوب. حدّد أداة Forward Warp ثم اجعل الضغط لنحو 30 ثم ابدأ بسحب الأداة من اليسار لليمين عبر الصورة. غيّر حجم الفرشاة بشكل متفاوت بين التشوّهات الكبيرة والصغيرة. طبّق تعديلات Liquify عبر الضغط على OK ثم ارسم تحديدًا مستطيلًا على جزء من الصورة. اضغط الاختصار CMD+T لتحويل التحديد ثم مدّد هذه الشريحة لإنشاء تأثير الشاشة المشوّهة. ابحث عن صورة بعض الغيوم وافتحها في فوتوشوب. استخدم الاختصار CMD+Shift+U لإشباع ألوان الصورة ثم عدّل المستويات عبر الاختصار CMD+L لزيادة قتامة الظلال إلى درجة الأسود. اذهب إلى القائمة: Filter > Distort > Shear وأضف سلسلة من النقاط إلى المخطط لتشويه الصورة من الجانب إلى الجانب. اذهب إلى القائمة: Filter > Distort > Wave وغيّر قيمة الإعدادات إلى 999 للمولدات Generators، أقل قيمة لطول الموجة Wavelength، أقل قيمة للسعة Amplitude و100% لحجم Scale المحور الأفقي فقط. سيتم تطبيق التأثير بحسب نمط الصورة المُستخدمة، فقد يكون من الضروري تغيير اتجاه الصورة لتجنب تشويه العناصر الرئيسية مثل وجه الشخص. احفظ الصورة كملف PSD وامنحها اسمًا معرّفًا مثل displacement-map.psd. هذا الملف المؤقّت سيُستخدم ضمن فلتر الاستبدال Displace فيما بعد. عُد إلى ملف العمل الأساسي مجدّدًا ثم اذهب إلى القائمة: Filter > Distort > Displace بدّل الإعدادات إلى 100 حجم أفقي و0 حجم عمودي. بعد الضغط على OK حدّد الملف displacement-map.psd. صورة الاستبدال المُستخدمة في هذا الفلتر ستشوّه الصورة عبر المساحات البيضاء في الملف. ارسم تحديدًا مستطيلًا حول الصورة بأكملها باستثناء الحافة اليسرى البشعة ثم اضغط على الاختصار CMD+T ثم مدّد الصورة لإزالتها. جِد صورة غيوم جديدة وافتحها في فوتوشوب. قم بإشباع ألوانها Desaturate وعدّل المستويات Levels لتحويلها إلى صورة أبيض وأسود قاسية. أضِف فلتر الموجة Wave أولًا هذه المرة واستخدم ذات الإعدادات التي استخدمناها في السابق لذات الفلتر. اذهب إلى القائمة: Filter > Distort > Shear وعدّل المخطط مع نمط جديد من النقاط لتشكيل تأثير التفاف مختلف. اضغط على الاختصار CMD+A لتحديد الكل ثم CMD+C لنسخها. ثم ألصق باستخدام الاختصار CMD+V داخل ملف العمل الرئيسي ثم صغّرها واضغطها لتغطّي جزءًا من الصورة. غيّر خصائص المزج إلى Screen لجعل الخلفية السوداء شفافة، تاركًا خطوط التشوهات البيضاء الشائعة في عرض أشرطة VHS القديمة وخصوصًا أثناء التوقف المؤقت أو الإعادة. ضاعف هذه الطبقة باستخدام الاختصار CMD+J ثم حوّلها باستخدام الاختصار CMD+T واستخدم خليطًا من الانعكاس الأفقي والعمودي وتغيرات الحجم لتُنتِجَ نموذجًا ثانيًّا من خطوط التشوّهات في مكان آخر من الصورة. أنشئ طبقة تعديلات منحنيات Curves ثم اجعل خصائص مزجها Saturation. ومن ضمن نافذة إعدادات طبقة تعديلات المنحنيات انتقل على القناة الحمراء واجعل المنحني الخاص بها اشبه بحرف S ثم انتقل إلى القناة الخضراء وحوّل المنحني الخاص بها إلى ما يشبه S نوعًا ما ثم انتقل على القناة الزرقاء وأنشئ منحني كحرف S أكثر دقة. هذه التعديلات ستزيد من التشبّع اللوني في بعض مناطق الصورة بينما تخفّفها في مناطق أخرى لتقليد ونسخ نظام ألوان أجهزة التلفاز القديمة. أنشئ ملفًّا جديدًا بحجم 1 في 10px (من الممكن أن يختلف حجم هذا الملف بحسب حجم الصورة التي تعمل عليها). قم بإخفاء طبقة الخلفية ثم ارسم تحديدًا حول نصف حجم العمل ولوّنه باللون الأسود في طبقة جديدة. اضغط على الاختصار CMD+D لإلغاء التحديد ثم اذهب إلى القائمة: Edit > Define Pattern لجعل هذا الشكل نقش Pattern وأعطِ هذا النقش اسمًا معرّفًا. سيُنتِج هذا النقش سلسلة من خطوط افقيّة بحجم 5px. عُد إلى ملف العمل الأساسي واختر أداة سطل الدهان Fill bucket ثم عدّل الإعدادات في شريط الأدوات العلوي إلى Pattern. ثم ابحث عن الملف الذي أنشأناه للتو ضمن القائمة. أنشئ طبقة جديدة ثم اضغط في أي مكان ضمن الصورة لتَظهر سلسلة خطوط مسح التلفاز القديمة. غيّر خصائص المزج هذه الطبقة إلى Soft Light لتمكين التفاعل مع الألوان. لإنهاء هذا التأثير بتأثير فيلم منزلي قديم سنستخدم خط OSD mono font لكتابة بعض معلومات الشاشة الخاصة بأجهزة تشغيل الأفلام القديمة. حدّد جميع طبقات النصوص التي كتبناها باستخدام الخط السابق ثم اذهب إلى القائمة: Layer > Merge Layers لتحويلها إلى طبقة نقطيّة قابلة للتعديل. اذهب إلى القائمة: Filter > Distort > Wave احتفظ بالإعدادات السابقة ولكن خفّف من عدد المولدات إلى 30. لإنشاء آخر تأثير بنمط قديم اضغط على الاختصار CMD+A لتحديد الكل ثم اذهب إلى القائمة: Edit > Copy Merged ألصق ما تم نسخه مع الدمج في طبقة جديدة أعلى لوحة الطبقات. انقر نقرًا مزدوجًا على الطبقة الجديدة لفتح نافذة الأنماط للطبقة ثم ألغِ تفعيل القناة الخضراء G في خيارات المزج المتقدمة. حرّك الطبقة لليمين قليلًا بضعة بكسلات باستخدام أسهم لوحة المفاتيح لإنتاج اختلال في القنوات اللونية. هذا المزيج من التأثيرات والتشوّهات غالبًا ما يُشاهد على أجهزة التلفاز القديمة ومشغلات الفيديو القديمة أيضًا. ترجمة -وبتصرّف- للمقال: How To Create a Distorted VHS Effect in Photoshop لصاحبه: Chris Spooner.
  23. هذا أحد الدروس الكلاسيكية لتحويل الصورة الفوتوغرافية إلى صورة بتأثير الرسم بقلم رصاص. إنها إحدى التقنيات البسيطة والسريعة التي تحقّق نتائج مُرضِيَة وستكون درسًا مهمًّا للمبتدئين. طوال تاريخها، أظهرت فوتوشوب العديد من الفلاتر التي تُنتِج تأثيرات الرسم والتأثيرات الفنيّة، ولكنها لا تُنتِج نتائج واقعية بدقّة. في هذا الدرس سأريكم بعض الخطوات الذكيّة التي ستحوّل الصورة الفوتوغرافية إلى مخطط مرسوم باليد بقلم رصاص، والتي يمكن تنعيمها أكثر للوصول إلى مظهر مقنع أكثر. التأثير الذي سنتعلّمه في هذا الدرس يحاكي الخطوط والظلال الناتجة عن الرسم بالقلم الرصاص. إنتاج هذا النوع من الرسوم سيستغرق ساعات من العمل حتى بالنسبة لأكثر الفنانين موهبة، ولكن قدرة فوتوشوب تعطينا المقدرة على تحقيق ذلك في دقائق. وهذا سيجعله عمليًّا أكثر في استخدام مظهر التخطيط في التصاميم التي تحتاج إلى نمط artsy. فإذا لم تكن مهتمًّا بإنشاء هذا التأثير يدويًّا فيمكنك إلقاء نظرة على صفحة Artistic Paint, Sketch & Ink Photo Effect Actions التي توفّر إمكانية تنفيذ هذا التأثير آليًّا. افتح الصورة التي تريد تعديلها وتطبيق التأثير عليها باستخدام فوتوشوب. التأثير سيظهر بشكل أفضل مع الصور ذات الخلفيات النظيفة والإضاءة الجيدة والتركيز الممتاز. في هذا الدرس سنقوم بتطبيق التأثير على هذه الصورة المجانيّة من موقع free images لطفلة صغيرة. اسحب طبقة الخلفية إلى أيقونة طبقة جديدة أسفل لوحة الطبقات، أو استخدم الاختصار Ctrl+J لمضاعفة هذه الطبقة. اذهب إلى القائمة: Image > Adjustments > Invert أو اضغط على الاختصار Ctrl+I ثم اضغط بالزر الأيمن على الطبقة واختر Convert to Smart Object لتحويل الطبقة إلى عنصر ذكي. اختر الفلتر Gaussian Blur من قائمة الفلاتر Blur ثم حدّد نصف القطر بـ 20 بيكسل (يجب عليك تحديد القيمة المناسبة بحسب الصورة). بما أننا نطبّق الفلتر على طبقة العنصر الذكي فإن التأثير سيكون تأثير ذكي Smart Filter ويمكننا تنعيم الإعدادات بحسب الحاجة بينما لن يمكننا القيام بذلك لو طبقّنا الفلتر على طبقة عادية. غيّر خصائص مزج الطبقة الجديدة إلى Color Dodge ما يعزّز تباين الصورة بشكل كبير ويُظهِر التفاصيل البارزة في الصورة. اضغط على أيقونة طبقة التعديلات Adjustment Layer أسفل لوحة الطبقات ثم اختر المستويات Levels. حرّك درجة ألوان الظلال ودرجة الألوان المتوسطة إلى اليمين قليلًا لزيادة قتامة الصورة قليلًا. أضِف طبقة تعديلات جديدة ولكن اختر هذه المرة الأسود والأبيض Black and White. الإعدادات الافتراضية ستكون كافية لإزالة الألوان وإنتاج مظهر رسم قلم رصاص قياسي. اضغط الاختصار Ctrl+A لتحديد الكل ثم اذهب إلى القائمة: Edit > Copy Merged أو من الاختصار Ctrl+Shift+C. هذا سينسخ جميع الطبقات الظاهرة. اضغط Ctrl+V للصق ما تم نسخه أعلى لوحة الطبقات. اذهب إلى القائمة: Filter > Filter Gallery ثم اختر الحواف المتوهّجة Glowing Edges ضمن قائمة Stylize. غيّر إعدادات عرض الحافة Edge Width إلى 1، وإلى أقصى إعدادات maximum Edge Brightness و Smoothness. اعكس الألوان Invert للطبقة من القائمة: Image > Adjustments > Invert أو من الاختصار Ctrl+I ليتبدّل اللون الأسود إلى أبيض والأبيض إلى أسود. غيّر خصائص مزج الطبقة الأخيرة إلى Multiply لتكون الخلفية البيضاء شفافة ثم خفّف من التعتيم opacity إلى 50-60% للحد من تأثير الخطوط العريضة على خطوط الرسم الخارجية الإضافية. أنشئ طبقة جديدة ثم اضغط على الاختصار Ctrl+Backspace لملء هذه الطبقة باللون الأبيض (حيث يجب أن يكون اللون الخلفي في لوحة الألوان). أدخل مجدّدًا إلى Filter Gallery ولكن هذه المرة اختر Texturizer وبدّل الإعدادات إلى Sandstone الحجر الرملي. غيّر خصائص مزج هذه الطبقة إلى Multiply ليُصبح العمل الفني أسفل هذه الطبقة ظاهرًا ثم خفّف التعتيم opacity لهذه الطبقة إلى 50% لإحداث تأثير ملمس الورق. لإظهار فن الرسم بأقلام الرصاص الملونة قم بإخفاء طبقة تعديلات الأسود والأبيض Black and White adjustment لإزالة تأثيرها من التصميم. والنتيجة النهائية هي تأثير واقعي من أعمال رسم الخطوط والظلال. إن الطبقة التي قمنا بتطبيق التمويه عليها وقمنا بعكسها عزّزت من تباين التصميم ولكن باقي التأثيرات الإضافية كالحواف المتوهجة وخامة الورق جعلت التصميم أكثر قابلية للتصديق. إن استخدام العناصر الذكية يمنحنا المقدرة على ضبط التمويه لتنعيم النتيجة كما نريد. ملاحظة: الصورة المستخدمة في هذا الدرس صورة مجانيّة من موقع free images لطفلة صغيرة. ترجمة -وبتصرّف- للمقال: How To Create a Realistic Pencil Sketch Effect in Photoshop لصاحبه: Chris Spooner.
  24. من الممتع مشاهدة صور السينماغراف ومن الممتع أكثر تصميم هذه النوعية من الصور الإبداعية، حيث تجعل هذه التقنية الصور عالية الدقة تنبض بالحياة. وفي هذا الدرس سنتعلم كيفية تصميم هذه النوعية من الصور بسهولة وبخطوات بسيطة باستخدام الأدوات الحديثة الموجودة في إصدار CC من برنامج فوتوشوب، كما سأعطيكم تلميحات حول كيفية تصميم هذه الصور باستخدام الإصدارات الأقدم من برنامج فوتوشوب. ولكن أولًا دعونا نتعرّف على هذه التقنية. ما هي السينماغراف Cinemagraph؟ لقد بدأ مصطلح السينماغراف Cinemagraph بالظهور منذ عام 2011 على يد المصورين المحترفين Kevin Burg و Jamie Beck اللذين استخدما هذه التقنية لصالح دور الأزياء وعدد من النشاطات التجارية الأخرى التي تتطلب هذا النوع من الصور. Kevin Burg و Jamie Beck ومن ثم انتشر هذا الفن عبر العالم ليصبح له روّاد وأنصار ومصممون أيضًا، ويمتاز هذا الفن بإنشاء صور متحركة GIF تختلف كليًّا عن صور GIF المعروفة والمستخدمة في مواقع الإنترنت والتي كانت تتميز بدقتها الضعيفة، وبكونها تمثّل صورًا متحركة تعبيرية أو صورًا فوتوغرافية قصيرة سيئة الدقة والشكل لمشهد قصير جدًا من فيلم أو خبر مثلًا. أما هذه التقنية فتعتمد على الصور عالية الدقة، والتي يتم أخذها عادة من لقطات فيديو، ثم أخذ جزء صغير من اللقطة مع تحريك مساحة صغيرة منها أو تحريك معظم أجزاء الصورة، ولكن ليس كامل مساحة الصورة، فذلك سيجعل حجم ملف GIF ضخمًا وعرضه على الإنترنت صعبًا جدًّا، ويَعتَبرُ روّاد هذا الفن بأنهم يصممون صورًا تستمر في الحركة، نابضة بالحياة، عالية الدقة، جميلة وأنيقة. وهذه بعض الأمثلة عن هذه التقنية من إنتاج الثنائي Kevin Burg و Jamie Beck من موقعيهما على الإنترنت Cinemagraphs و Annstreetstudio. مقومات تصميم صور السينماغراف تتميّز صور السينماغراف بأنها صور ثابتة فيها حركة وحياة، لذلك فإن من أهم مقومات تصميم هذه الصور هو أن تكون اللقطة ثابتة في ملف الفيديو الذي سنعمل عليه، لأن حركة الصورة أثناء عرض اللقطة سيؤدّي إلى تحريك كامل مساحة الملف، وهذا سيجعل حجم ملف GIF كبيرًا وعرضه غير مجدٍ، أو أن التصميم سيكون مشوّهًا وغير مقبول، كما ويجب أن لا تتداخل الأجزاء التي ننوي جعلها متحركة مع أجزاء متحركة أخرى قد تغطّي على الحركة المطلوبة، وأخيرًا بما أننا سنعمل على فوتوشوب فيجب مراعاة إمكانات الحاسوب الذي سنعمل عليه، لأن استخدام مقطع فيديو كبير نسبيًّا سيستنزف طاقات هذا الحاسوب، وسيؤدّي عمله ببطء وصعوبة شأنه شأن إنشاء التصاميم ثلاثية الأبعاد 3D في هذا البرنامج. من أين أحصل على مقاطع فيديو صالحة لإجراء مثل هذه التصاميم؟ هذا مهمٌّ جدًّا لأن مقطع الفيديو يجب أن يكون بكاميرا ثابتة في مكان وزاوية التصوير، حتى نتمكّن من القيام بهذا التصميم، وإلّا سنضطر للقيام بعمليات تعديل وتحرير ضخمة على برامج المونتاج وبرامج تعديل وتحرير الفيديو لنتمكن من تثبيت اللقطة على زاوية واتجاه معين حتى نتمكن من تصميم صورة السينماغراف، لذلك يمكننا الحصول على هذه اللقطات بأنفسنا عبر تصوير مشهدٍ معيّن قصير مع تثبيت الزاوية والاتجاه، أو يمكننا أن نتّجه إلى مواقع تحميل مقاطع الفيديو والحصول على هذه النوعية من المقاطع، بعض هذه المواقع قد يكون مجاني مثل Videezy و Coverr و Videvo وغيرها كما يمكن تحميلها من مواقع غير مجانية مثل مواقع Shutterstock وفي معظم الحالات ستكون مثل هذه المقاطع موجودة تحت مصطلح Footage. التصميم باستخدام فوتوشوب إصدار CC سأستعرض هنا تصميمين سينماغراف باستخدام الإصدار CC من برنامج فوتوشوب، الأوّل باستخدام صورة جاهزة من أحد المواقع، والثاني باستخدام مقطع قمتُ بتصويرهِ باستخدام الكاميرا في هاتفي المحمول. التصميم الأول: نافورة المياه سنقوم بتصميم سينماغراف بالاعتماد على مقطع فيديو قصير حصلتُ عليه من موقع Videezy وهو عبارة عن مجموعة من نوافير مياه صغيرة بقرب بعضها البعض، وسنقوم بجعل أحد هذه النوافير تعمل فيما بقية الصورة جامدة. افتح برنامج Photoshop CC وهذا الدرس يخص إصدار CC وليس الإصدارات التي تسبقه، لأن الأدوات التي سنستخدمها موجودة في هذا الإصدار وغير موجودة في ما قبله. افتح ملف الفيديو ببساطة باستخدام فوتوشوب أو قم بسحب ملف الفيديو إلى داخل نافذة البرنامج، ليتم فتح الفيديو وسيُفتَح معه شريط أدوات الفيديو أسفل نافذة البرنامج، وإن لم يظهر لأي سبب قم بفتحه بنفسك من القائمة: Window > Timeline ستلاحظ من الصورة السابقة أن هذه الأدوات خاصة بتحرير الفيديو، وسيبدو فوتوشوب كما لو أنه برنامج مونتاج، في الحقيقة هذه الأدوات تشبه إلى حد كبير شريط أدوات AfterEffect الشهير ولكن بشكل مخفّف جدًّا. والآن استخدم زر التشغيل لتشغيل الفيديو ومشاهدة كامل المقطع، ثم استخدم المزلاج فوق شريط تمرير الوقت للمرور على المقطع. المهم هنا أن تجد الجزء الصغير جدًّا المناسب للقيام بالتصميم، ومن أهم النقاط التي يجب أن تبحث عنها هي أن تختار الجزء الذي سيتحرك والأجزاء الثابتة، وأيضًا يجب أن تحدّد نقطة البداية والنهاية لتصميمك، حيث يجب أن يكون شكل الجزء المتحرّك الذي اخترته مطابقًا إلى حد كبير لشكله عند نهاية التصميم، لأن التصميم سيكون في وضعية إعادة التشغيل المستمر Loop، ولذلك لا يجب أن يشعر المشاهد للتصميم بأنَّ هناك انقطاعًا ما، أو أن المقطع تتم إعادته تكرارًا، والعمل الجيد الصحيح هو أن تجعل إمكانية تمييز مكان القطع وإعادة تشغيل المقطع شبه مستحيلة على المشاهدين، وهذا واضح في الأمثلة التي ذكرتها فوق وهناك بعض الأمثلة في نهاية الدرس. قم بوضع المؤشر على بداية المقطع ثم اسحبه إلى بداية الجزء الذي اخترته، ثم ضعه على نهاية المقطع واسحبه إلى نهاية الجزء الذي اخترته لإنهاء التصميم. يمكنك تعديل هذه الخيارات عبر وضع المؤشر على أطراف المقطع في شريط تمرير الوقت وسحبه كما تشاء. المهم هو أن تختار فترة قصيرة جدًا لتتجنب الحجم الكبير لملف GIF الذي سيَنتُج معنا في النهاية. والآن قم بتحديد الكل عبر الضغط على الاختصار Ctrl+A ثم انسخ جميع العناصر والطبقات مجتمعة ومندمجة من الخيار Copy Merged والذي ستجده في القائمة: Edit > Copy Merged أو من خلال الاختصار Shift+Ctrl+C. ألصق ما قمت بنسخه في الخطوة السابقة باستخدام الاختصار Ctrl+V ليتم لصق نسخة عن المشهد الذي كان ظاهرًا عند القيام بعملية النسخ كصورة ثابتة، ويصبح طبقة جديدة في لوحة الطبقات، كما سيكون الإطار التالي في شريط التمرير الزمني السفلي. اسحب الطبقة الجديدة التي ألصقناها في الخطوة السابقة إلى الأعلى في لوحة الطبقات، حتى تصبح خارج وفوق مجموعة طبقات الفيديو، وعند القيام بذلك ستصبح تلقائيًّا في طبقة جديدة ضمن شريط أدوات الفيديو السفلي فوق طبقة مقطع الفيديو الأساسي. ستجد أن طبقة الصورة الثابتة تبدأ زمنيًّا بعد طبقة مقطع الفيديو الأساسي، وهذا يعني أن هذه الطبقة لن تظهر إلا بعد انتهاء عرض المقطع الأساسي، لذلك قم بسحب هذه الطبقة في شريط التمرير الزمني السفلي إلى بداية الشريط لتكون فوق مقطع الفيديو مباشرة، وبذلك ستظهر فوق المقطع مباشرة ولن يظهر المقطع أثناء العرض لأن هذه الطبقة تغطّيه بالكامل. ستلاحظ أيضًا أن طول هذه الطبقة أكبر من طول مقطع الفيديو وقد تكون أقصر في بعض الأحيان، لذلك قم بوضع المؤشر عند نهاية هذه الطبقة ثم انقر واسحب إلى خط نهاية المقطع لتكون مدة عرض كلا الطبقتين متطابقة على شريط التمرير الزمني. طبّق ميزة القناع Mask على الطبقة الجديدة الثابتة من خلال تحديد هذه الطبقة ثم النقر على زر القناع Mask أسفل لوحة الطبقات. بعد الانتهاء من الخطوات السابقة أصبح لدينا مقطع فيديو جامد يعرض صورة ثابتة وهي الطبقة التي ألصقناها بعد النسخ المدمج، وسنقوم الآن باختيار الجزء الذي نريده أن يكون متحركًا من الصورة وهو الجزء الذي ضبطنا على أساسه موقع بداية عرض المقطع ونهايته، في هذه الحالة اخترتُ أنا النافورة الصغيرة على اليمين، ولذلك سنستخدم أداة الفرشاة وباللون الأسود سنقوم بالرسم فوق قناع الطبقة ضمن مساحة هذه النافورة والمنطقة الرقيقة المحيطة بها. قم بتشغيل هذا الفيديو من زر التشغيل في شريط أدوات الفيديو السفلي وتأكّد من عملية الرسم الدقيق على قناع الطبقة، ثم تابع عملية الرسم، وفي حال ارتكاب أي خطأ يمكنك تصحيحه بالرسم بأداة الفرشاة باللون الأبيض فوق مكان الخطأ فيتم التصحيح. بعد الانتهاء من عملية الرسم على قناع الطبقة سنقوم بحفظ العمل كملف GIF لذلك اذهب إلى القائمة: File > Export > Save for Web أو من خلال الاختصار Alt+Shift+Ctrl+S. اختر الحفظ بصيغة GIF لتكون الصورة متحركة وتأكّد من أنَّ الألوان 256 ثم حدّد حجم الصورة إذا أردت بحسب تصميم موقع الإنترنت الذي ستدرج الصورة ضمنه ثم تأكّد أخيرًا من أن خيار Looping Option موضوع على Forever ثم اضغط Save. وهذه هي النتيجة النهائية لهذا التصميم: التصميم الثاني: حركة المرور في الطريق بعد أن تعلّمنا كيفية القيام بهذا التصميم مع صورة النافورة سنقوم بتجربةٍ أخرى للتأكّد من مقدرتنا على تنفيذ هذه التصاميم بسهولة. هذه المرّة سنقوم بتصميم سينماغراف لطريق عام مع بعض السيارات المارة لتوضيح فكرة تحريك أجزاء كبيرة من اللقطة، وبتقليد بسيط لتصميم السينماغراف للصفحة الرئيسية لموقع سينماغراف والذي يُظهر حركة المرور من بعيد ليلًا لشوارع باريس. هذا المقطع قمتُ بالتقاطه بنفسي باستخدام هاتفي المحمول وذلك كتتمة لهذا الدرس وللتأكيد على إمكانية إنشاء تصاميم سينماغراف من خلال كاميرا منزلية أو هاتف محمول. المهم يجب أن تبذل قصار جهدك لتثبيت يدك أثناء التقاط المقطع القصير ولمدة قصيرة، أو يمكنك استخدام أدوات المناصب ثابتة لتثبيت الكاميرا. سنتبع ذات الخطوات في التصميم الأول ولاختصار الوقت سأقوم بسرد صور الخطوات مع تلميحات لكل خطوة بالترتيب. افتح مقطع الفيديو باستخدام برنامج فوتوشوب: قم بضبط حجم المقطع إلى البداية والنهاية المناسبتين. حدّد الكل Ctrl+A. انسخ بشكل مدمج Shift+Ctrl+C. ألصق ما تم نسخه Ctrl+V. حرّك الطبقة الجديدة الملصقة للتو إلى خارج مجموعة الفيديو. حرّك مقطع الصورة الثابتة إلى بداية شريط التمرير الزمني. اضبط حجم هذا المقطع ليتطابق مع حجم المقطع الأساسي. أنشئ قناع Mask للطبقة الجديدة. ارسم بالفرشاة السوداء على القناع فوق الطريق وفوق بعض الأجزاء المتحركة في الصورة. احفظ الملف للويب كملف GIF من الاختصار Alt+Shift+Ctrl+S. طبّق ذات الإعدادات لحفظ الملف كما في المثال السابق أو كما في الصورة. والنتيجة النهائية ستكون على الشكل التالي: التصميم باستخدام الإصدارات السابقة من فوتوشوب الأمر يختلف عندما نستخدم إصدارات ما قبل CC مثل CS6 وما قبلها، إذ أنَّ أدوات الفيديو الحديثة غير متوفرة في تلك الإصدارات، إنما أدوات فيديو بالاعتماد على الإطارات Frames، وهي طريقة مرهقة لأن فوتوشوب لا يستطيع العمل على ملفات فيديو كبيرة أو حتى متوسطة الحجم، بل على ملفات صغيرة وهذا يعني أنه يتوجب علينا العمل خارج إطار فوتوشوب بدايةً كبرامج المونتاج وتعديل وتحرير الفيديو لنقوم بقص المقطع وتصغيره واختيار الجزء الأنسب للقيام بالمهمة، وحفظ المقطع الصغير الجديد ثم العمل على برنامج فوتوشوب لإنتاج السينماغراف المطلوب. الطريقة تبدأ بإدخال المقطع كطبقات عبر القائمة: File > Import > Video Frames to Layers تأكّد من تفعيل الخيار Make Frame Animation. وبذلك سيكون كل إطار من إطارات المقطع في طبقة منفردة ما سيجعل عدد الطبقات كبير. اجمع الطبقات جميعها في مجموعة طبقات واحدة باستثناء الطبقة الأولى. والآن طبّق القناع Mask على مجموعة الطبقات كاملة، ثم لوّن كامل مساحة القناع باللون الأسود، وبذلك ستكون مجموعة الطبقات شفافة ولن يظهر سوى الطبقة الأولى الموجودة خارج مجموعة الطبقات، وذلك لأن القناع ليس مطبّقًا عليها ثم استخدم أداة الفرشاة، وباللون الأبيض ارسم فوق الجزء الذي نريده أن يتحرك ليكون هو الجزء الوحيد الظاهر من مجموعة الطبقات. ثم اذهب إلى لوحة إطارات الفيديو، وستجد أن معظم الإطارات شبه شفّافة بمعظم مساحتها إلّا ما تم الرسم فوقه بالأبيض، وذلك يرجع إلى ظهور الطبقة الأولى فقط في الإطار الأول، ولحل هذه المشكلة حدّد الطبقة الأولى الموجودة خارج مجموعة الطبقات، ثم انقر على أيقونة Unify Layer Visibility الموجودة أعلى لوحة الطبقات، ثم انقر Match في النفاذة التالية. الآن جميع الإطارات تظهر بشكل صحيح وسيكون من الصعب التأكّد من أن الطبقة الأولى مطابقة بشكلها تمامًا للطبقة الأخيرة، وهذا سيُظهِر فرقًا مريعًا عند انتهاء عرض المقطع وانتقاله للتكرار إلى الطبقة الأولى، لذلك سنلجأ إلى خدعة قديمة تتمثّل بإعادة عرض جميع الإطارات في نهاية عرض المقطع ولكن بشكل معكوس، فتصبح الطبقة الأولى هي الأخيرة، وبذلك لن تظهر أي فواصل بشعة عند تكرار عرض المقطع كملف GIF، الآن حدّد جميع الإطارات ثم انقر على أيقونة قائمة خيارات نافذة Timeline في الزاوية، ثم انقر على Copy Frames لنسخ جميع هذه الإطارات. بعد أن نسخناها انقر على ذات القائمة ثم اختر خيار لصق الإطارات Paste Frames لتظهر نافذة جديدة، اختر منها Paste After Selection ليتم لصق الإطارات المنسوخة بعد الإطارات الحالية. ولنعكسها أبقِ على الإطارات الجديدة محدّدة، ثم انقر على أيقونة قائمة خيارات Timeline مجدّدًا ثم اختر Reverse Frames. يمكنك التحكّم في سرعة عرض إطارات المقطع من خلال تحديد جميع الإطارات ثم النقر على رقم زمن عرض الإطار، ثم اختيار الزمن الأنسب بحسب المقطع الذي تعمل عليه. ثم احفظ العمل كملف GIF من خلال Save for Web. والنتيجة ستكون كهذه الصورة: الخاتمة كما رأينا في هذا الدرس فإن عملية تصميم السينماغراف ليست صعبة وهي ممتعة ونتائجها رائعة جدًّا ويمكن استخدامها كخلفية جزء من موقع إنترنت أو كشرح لموقف معين عبر الإنترنت أو غيره. هذا الفن الرائع ورغم حداثة عهده إلا أنه رائج وله قاعدة جماهيرية كبيرة، وأصبح المصممون يتباهون بتصاميم من هذا النوع. طبعًا هناك بعض التصاميم ستحتاج إلى المزيد من العمل للوصول إلى نتائج مذهلة. ففي بعض الأحيان قد تضطرون للتعامل مع مقاطع غير ثابتة في التصوير، ولذلك سنحتاج إلى إلغاء الاهتزاز عبر برامج مختصة، ولعلّ أفضلها برنامج ProDAD Mercalli، ومن الممكن القيام بذلك عبر موقع YouTube الذي يقدّم هذه الميزة بعد رفع المقطع عليه، ثم قم بتحميل المقطع بعد ذلك. وفي بعض الأحيان يكون من المستحيل إيجاد نقطة بداية قريبة من حيث الشكل مع نقطة نهاية للمقطع، فنقوم بإيجاد أقرب نقطتين من حيث الشكل ثم نضاعف المقطع، ونقطع المقطع الجديد من المنتصف ونجعل النصف الأول بعد المقطع الأساسي والنصف الثاني قبله ثم نُداخل بين المقاطع عبر الخيار Fade، ومن الممكن القيام بكل ذلك في الإصدار CC من برنامج فوتوشوب، فإن لم يكن هذا الإصدار متوفرًا فسوف نلجأ إلى برامج تحرير الفيديو للقيام بهذه المهمة، وسأشرح هذا الأمر ببعض التفصيل في دروس قادمة. هذه بعض التصاميم الرائعة من بعض مواقع الإنترنت. هذه الصورة للمصمم turst67 هذه الصورة للمصمم Heinzefilm هذه الصورة من موقع The Good Films تصميم هذا النوع من التصاميم بسيط ولا يستغرق سوى بضع دقائق لذلك جرّبوا بأنفسكم وشاركونا تجاربكم. ملاحظات الدرس تم استخدام مقطع الفيديو في التصميم الأول من موقع Videezy ضمن شروط الاستخدام. تصاميم السينماغراف الناتجة عن أمثلة هذا الدرس مصممة لصالح أكاديمية حسوب تحت الترخيص CC BY-NC-SA 4.0 ويمكن تحميلها بغية الاستفادة منها لأغراض تدريبية وتعليمية فقط.
  25. هذا الدرس الثاني من سلسلة نصائح وحيل فوتوشوب، التي سنتعلم من خلالها العديد من الحيل والأدوات عند التصميم ببرنامج فوتوشوب بالإضافة إلى مجموعة من النصائح حول الإستخدام الأمثل للبرنامج. سنقوم في هذا الدرس بتحويل صورة فوتوغرافية إلى مخطط مرسوم بقلم الرصاص باستخدام برنامج فوتوشوب. افتح الصورة ببرنامج فوتوشوب: حوّلها إلى أبيض وأسود بالضغط على Ctrl+Shift+U: ضاعف الطبقة بالضغط على Ctrl+J ثم غيّر خصائص المزج للطبقة الجديدة إلى Color Dodge. اعكس الصورة بالضغط على Ctrl+I. اذهب إلى القائمة: Filter > Other > Minimum وضع القيمة 3. فإن كان هناك بعض الفراغات في التصميم فسنحدد الطبقة الأصلية ثم نضيف طبقة تعديلات Curves ثم نعدل الزاوية السفلية قليلًا فقط. وهذه هي النتيجة النهائية لدرس اليوم: