المحتوى عن 'gif'.



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

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

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

نوع المُحتوى


التصنيفات

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

التصنيفات

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

التصنيفات

  • تجربة المستخدم
  • الرسوميات
    • إنكسكيب
    • أدوبي إليستريتور
    • كوريل درو
  • التصميم الجرافيكي
    • أدوبي فوتوشوب
    • أدوبي إن ديزاين
    • جيمب
  • التصميم ثلاثي الأبعاد
    • 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

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

  1. تتغير العناصر البصرية حولنا مع الزمن، ونحس بهذا التغيير كحركة. تكمل عقولنا العناصر المفقودة في مقاطع الفيديو أو اللوحات الفنية باستخدام تصورنا، من أجل إنتاج شعور بالحركة. نستخدمُ الرمز في كثير من الأحيان لنقل فكرة، إذ نحاول تقديم غاية القصة بصريًا لنمنح غيرنا فهمًا أعمق. table { width: 100%; } thead { vertical-align: middle; text-align: center; } td, th { border: 1px solid #dddddd; text-align: right; padding: 8px; text-align: inherit; } tr:nth-child(even) { background-color: #dddddd; } فكرة جيدة أن نستخدام نوعًا من التصوُّر لرسم صورة كاملة للقصة التي نحاول سردها، إلا أن استخدام الحركات لتوصيل الرسالة يمكن أن يكون أفضل؛ إذا كانت الصورة تستحق ألف كلمة، فكم ستستحق من الحركات لوصفها؟ الحركات في الويب تؤدي ذلك الغرض؛ فهي تحاول أن تصور القصة، باستخدام رمز أو تخُّيل الحركة، مثل الضغط على زر، وفتح صفحة جديدة. نحاول تصوُّر الخطوات والعمليات لجعلها تبدو طبيعيةً أكثر، لاستدعاء حدث أو لجعل التطبيق يبدو أكثر جاذبيةً. كيف بدأت حركات الويب منذ أيام شبكة الويب القديمة، كان هناك جهودًا لتنفيذ العناصر المتحركة في نوافذ منبثقة لأجزاء مهمة من الموقع؛ ليبدو أكثر ديناميكية وجاذبية، كما في موقع Jeffrey Zeldman لِباتمان 95، إذ كان تحليق باتمان نحو المستخدم عبارة عن حركة مؤلفة من سلسلة من الصور، كانت GIF واحدة من الرسوم المتحركة الأولى على صفحة الويب وفي ذلك الموقع الذي كان واحدًا من أكثر الصفحات شيوعًا في ذلك الوقت، ما أَلْهم مطوري الويب للجمع بين الرسوم المتحركة GIF كعنصر مُراوغة في مواقعهم. الصور التي من النوع GIF مناسبة لتكرار قصير لحركة تمتد على نطاق ضيق من البكسلات، أو حتى بعض الفيديوهات. لكن ليس لديها شفافية متغيرة، ولا تدعم قناة الشفافية (alpha) في لوحة ألوانها، وجميع البكسلات فيها إما غير شفافة أو شفافة تمامًا. حركات GIF كانت البداية في نهضة تصميم الويب لكنها لم تكن مثالية. صور GIF ثقيلة نسبيًا؛ فالنتيجة عادة ما تكون دقة منخفضة، وتسلسل غير متساوي في توزيع الضوء و لوحة ألوان ذات 8 بت محدودة، ما أدى إلى القليل من التردد للمصممين بخصوص عدد الألوان اللازم استخدامها في المشهد. حدث ازدهار كبير في الحركات مع رسوم Flash المتحركة التي تتمتع بالبناء بسيط، والحركات المستندة إلى المتجهات (vector) عبرت مواقع الويب بالكامل، وإمكانيات إضافية للتفاعل، فقد كانت مثل الباروك (أسلوب فنى في القرنين السابع عشر والثامن عشر تمير بالزخرفة) في ثقافة الويب مع العديد من العناصر المتحركة أيضًا. قدَّم Flash لمحة عن إمكانيات تصميم الويب الديناميكي، الذي يتيح للمصممين إعادة الفحص وتجريب الأأداء ما سبب فترة من التطور السريع في حركات الويب. رسوم Flash المتحركة بُنيَت بِواسطة Flash أو برمجات التحريك المماثلة، وغالبًا ما يتم توزيعها بتنسيق ملف SWF، وهي خفيفة الحجم وسهلة الصنع. فملف يستخدم الصوت مع وضوح وبدون فقدان في دقة رسومات المتجهات وبحجم كيلوبايتات قليلة يجعل التحريك عملية بسيطة ولا تضيف كثيرا إلى وقت تحميل الصفحة. التفاعل في Flash ممكنًا من خلال (Action Script (AS، لغة برمجة كائنية التوجه مثل javascript. تم تصميم AS في البداية لتدير تحريكات المتجهات ذات بعدين (2d). حركات Flash لم تصمَّم لتكون متجاوبة مع جميع أحجام الشاشات، و لم تعمل بشكل جيد على جميع الأجهزة وفي النهاية استُبعدت من الأجهزة المحمولة الشهيرة. رغم كون حجم الملف صغيرًا موازنةً بغيره، إلا أن Flash لم تكن هي الأمثل، نظرًا لبعض المشكلات التي شملتها، أهمها المتعلق بالاستهلاك الكبير لوحدة المعالجة المركزية (CPU)، فقد كانت هذه بالطبع مشكلة على الهواتف الذكية والأجهزة الأخرى. جاءت نهاية عصر Flash بعدما قرر Steve Job عدم دعمها على أجهزة Apple المحموله. قال Jobs: حركات الويب هذه الأيام لدينا في هذه الأيام احتياجات مختلفة ويجب أن تكون أدوات تصميم الحركات مرنة وخفيفة. يجب على المطورين إنشاء محتوى للعرض على أجهزة مختلفة، ومراعاة طرق الإدخال المختلفة، والمتصفحات، ونسب الارتفاع، وكثافة نقاط الشاشة (pixel)، وهلم جرًا. من الواضح أن الحركات يجب أن تعمل تمامًا ابتداءً من هاتف ذكي بدقة 720 بكسل 5 بوصة وحتى جهاز QXGA بحجم 9.7 بوصة أو شاشة UHD مقاس 29 بوصة. لدينا أيضًا الكثير من حركات التمرير السريعة للتفاعل مع البرمجيات، إذ لم تعد تلك الإنتقالات، والتحْريكات، وحركات التمرير السريعة، محفوظةً للأجهزة المحمولة فقط. اعتادت عقولنا عليها كثيرًا؛ لذلك، لا يكون الأمر على ما يرام عندما يكون هناك شيء ثابت ولا يمكن تحريكه بلمسة إصبع. يُتَحقق أفضل حل لتصميم الحركات باستخدام HTML5 و CSS3 و JavaScript ورسومات قابلة للتطوير (مثل SVG). نضجت التكنولوجيا هذه الأيام لدرجة كبيرة، فحتى الأجهزة المحمولة التي تعاني من نقص في الطاقة، لديها قدرة عرض نطاق وقوة معالجة مناسبين للتعامل مع الحركات المستهلكة للعتاد، ومحتوى الفيديو عالي الدقة. لا يعني هذا أن المواقع يجب أن تكون مشغولة بالحركات كثيرًا؛ فكما هو الحال دائمًا، يتعلق الأمر بتحقيق التوازن الصحيح بين التفاعل الديناميكي والعناصر الثابتة. في الواقع، إمكانية تنفيذ الكثير من الحركات لا يعني أنه يجب عليك ذلك. شيء آخر يؤخذ بالحسبان عند تصميم حركات الويب وهو دعم تعدد المنصات. منذ عشر سنوات، لم يكن على المصممين التأكد من أن تصاميمهم ستبدو جيدة على مجموعة واسعة من الأجهزة. هذه الأيام، يجب أن تعمل الحركات بكفاءة على كلًا من الهاتف الذكي وجهاز التلفزيون الضخم. Aspect ratio(نسبة العرض للارتفاع) والصور الشخصية، والاتجاه العرضي للجوالات، وكذلك يجب مراعاة الكثافات المختلفة لنِقاط الشاشة ومسافات المشاهدة. هذا يبرز المصمم مع مجموعة جديدة من التحديات ويخْلق مصاعب إضافية. اختبار التصميم يستهلك وقتا ثمينًا، هناك المزيد من الأشياء التي يمكن أن تسوء بتعدد المنصات، والحركات يجب أن تكون أكثر تفصيلًا من السابق. الخبر السار هو أن HTML5 و CSS3 و JavaScript تساعد في معالجة معظم هذه المشكلات، وليس كلها. ومع ذلك، من الأفضل دائمًا أن تخطو بحذر، خاصةً إن كنت في دائرة مفتوحة تعرض حلولًا لكل منصات الحوسبة الجديدة. لماذا تستخدم الحركات في المواقع هناك قصة وراء استخدام الحركات، فالأمر كله يتعلق بإعطاء روح لتصميم العناصر. تتشابك الحركات على شبكة الإنترنت مع حركة المستخدم من خلال الموقع، وتوفِّر حركة العضوية للعناصر إلى الموقع. يحتاج مبرمج حركات الويب إلى إدراك تجربة المستخدم وتوقع المسارات التفاعلية المحتملة. يجب أن تكون التجربة سلسة ومنطقية. أحد أهم الأمور المتعلقة بالحركات هو التوقيت. يعطي التوقيت معنى حسِّيًا وانفعاليًا للتحريك. مصمم الحركات يحتاج لاستخدام التوقيت لإعطاء المستخدم الشعور الصحيح والإدراك العالي. هل الحركات سلسة؟ ما مدى سرعتها؟ ما هو نوع وعدد الإطارات المفتاحية التي يجب استخدامها في الحركات؟ ما رد الفعل الناجم عن التفاعل معها، وما مدى سرعة رد الفعل بعد التفاعل؟ إن لم تكن الحركات سلسة، يمكن أن ينظر إليها المستخدم على أنها خطأ ويَفقِد الحافز لمزيد من الاستكشافات حول الموقع نفسه. من وجهة نظر منطقية، يمكننا تقسيم الحركات على شبكة الإنترنت إلى نوعين أساسيين: الحركات الثابت مع منطق بسيط، لا توجد معايير ديناميكية معقدة، على سبيل المثال الرسوم المتحركة ‎.gif. الحركات الديناميكية مع نوع من مشاركة المستخدم، يعتمد على إدخال المستخدم، والمتغيرات الأخرى، ويمكن أن يكون له العديد من النتائج المختلفة. الحركات الديناميكية لها منطقها الخاص، محددةً كيفية جريان الحركة. أفضل مثال على الحركات الديناميكية هو الألعاب، حيث يتعامل المستخدمون مع المحتوى على الشاشة. مثال بسيط هو تغيير مواضع العناصر من خلال التمرير الذي يتحكم فيْه المستخدم حسب مكانه في الموقع، هذا يستفتح سلسلة من الحركات. هنا أمثلة واضحة. غالبًا ما يستخدم هذا النهج لتقديم الرسوم البيانية على موقع الويب، لذلك يعطي المستخدم المزيد من الاهتمام أثناء التصفح. إنها طريقة ديناميكية لتسليط الضوء على المعلومات ذات الصلة. الحركات الديناميكية وسيلة جيدة للحفاظ على تركيز الانتباه على الأجزاء المهمة من موقع الويب، ومن الواضح، يتيح للمصممين تقديم المنتجات والخدمات بطريقة أكثر جاذبية. لإنشاء حركات ديناميكية في مواقع الويب، نحتاج إلى المزيد من المعرفة بِ CSS و HTML. إيجابيات وسلبيات حركات الويب دعونا نتعرف على إيجابيات وسلبيات تقنيات الحركات، بما في ذلك الحلول القديمة التي لم تعد قيد الاستخدام. التقنية الإيجابيات السلبيات GIF بسيطة ومتاحة للجميع؛ لأنها تتيح تسلسل الصور المتحركة، ويمكن أن تكون مثل الفيديو وزن ملفات gif المتحركة ضخم. الشفافية مروعة. لا تدعم مجرى ألفا. لديها ضغط منخفض. ومنقطة. APGN يدعم قناة ألفا. غير معتمد في جميع المتصفحات. Flash ملف (swf) المتحرك له وزن منخفض. سريع وتفاعلي. تتيح تحريك المتجهات. التحريك العضوي في بيئة مستخدم بسيطة، لا عشوائية أو تخمين في الكود. يمكن أن يتم ذلك بشكل متجاوب. لم تعد مدعومة على منصات الهواتف المحمولة. HTML/CSS بسيطة وسهلة التعلم. جيدة للتحويلات والانتقالات. تُنفذ الرسوم المتحركة لـ HTML / CSS على الأجهزة المحمولة. تتيح التحريك للمتجهات أو نقاط الشاشة pixel. يمكن معالجة رسومات (SVG) لا يمكن تنشيط جميع خصائص SVG باستخدام CSS. لديها إمكانيات محدودة لِجافا سكريبت و SMIL .تفعل ما يُبرمجه مصممها ولذلك فهي أحد التقنيات الثابتة، لا يمكن الاستجابة للمدخلات الجديدة أو البيئة المتغيرة (التحريك الديناميكي). SMIL مدمجة وقادرة على تنشيط الخصائص التي لا تستطيع CSS التعامل معها. يُحافَظ عليها عندما يتم تضمين SVG كصورة. غير مدعوم في جميع المتصفحات. JavaScript يجعل التحريك سهل إذا كنت تستخدم مكتبة رسوم متحركة لـ SVG تنشئ تسلسل صور (تسلسل .png) لا يُحافَظ عليه عندما يتم تضمين SVG كصورة ولكن ماذا عن إيجابيات وسلبيات حركات الويب بشكل عام؟ حتى الحركات جيدة التنفيذ يمكن أن تبدو في غير محلها بعض الأحيان، لذلك من الأفضل دائمًا أن تطرح بعض الأسئلة على نفسك (والعميل) قبل مواصلة إضافه الحركات في تصميمك. بالنسبة للمبتدئين، تحتاج للتحقق ما إن كانت الحركات تؤثر على تجربة المستخدم أم لا. هل سيحسن التجربة بالفعل؟ للقيام بذلك تحتاج إلى: تفحُّص عن كثب للتصميم الحالي (إن وجد). تفحص الجمهور المستهدف ومنصات أجهزته. تحقق من زمن تحميل الموقع وتحمُّل وحدة المعالجة المركزية CPU. استعرِض البدائل الأخرى. دائما ضع خاصية سهولة الإستخدام في الحسبان. قرار استخدام الحركات يجب أن يكون كأي قرار تصميم آخر؛ عليك أن تزن الإيجابيات والسلبيات وتتأكد من أن تجربة المستخدم لا تتأثرسلبًا، وأنك لن تتعثر مع الكثير من التعليمات البرمجية غير الفعالة (والتي قد تضطرك لإضافة شيفرة جديدة والتحديثات في وقت لاحق). بشكل عام، استخدام الحركات من أجل التحريك ليس فكرة جيدة. صحيح أن الحركات نضجت على شبكة الإنترنت، لكن كون توفرها على نطاق واسع لا ينبغي أن يكون السبب الوحيد وراء قرارك بتنفيذها. لا تنظر إلى الحركات من منظور تقني بحت، عليك أن تفعل ذلك من منظور المستخدم. ترجمة -وبتصرف- للمقال Web Animation In The Post-Flash Era لصاحبته Ana Gregurec
  2. يشرح هذا المقال كيفيّة إنشاء صور متحرّكة بصيغة GIF انطلاقًا من مجموعة صور بصيغة PNG عبر سطر الأوامر على لينكس (توزيعة أوبونتو). أدناه مثال على تجميع صور لإنشاء صورة متحرّكة تُستخدم لشدّ الانتباه. نبدأ أوّلًا بتثبيت الأداة ImageMagick التي سنستعملها خلال هذا الدرس: sudo apt install imagemagick الخطوة التاليّة لتثبيت الأداة هي الانتقال إلى المجلّد الذي يحوي مجموعة الصوّر التي نريد استخدامها لإنشاء الصورة المتحرّكة. بالنسبة لهذا المثال فمسار المجلّد هوDesktop/shebang : cd Desktop/shebang من السهل جدًّا استخدام ImageMagick وفهمُ آليّة عمله. يوفّر ImageMagick برنامجًا يُسمّى convert، هو الذي سنستخدمه لتحويل الصور. يمكن عبر الأمر التالي إظهار صفحة التوثيق الخاصّة بالبرنامج، والتي تشرح آليّة عمله: man convert تُظهر صفحة التوثيق السطر التالي، والذي يوضح طريقة استخدام البرنامج: convert [input-option] input-file [output-option] output-file نمرّر للبرنامج convert خيّارًا للإدخال، وملفًّا مُدخلًا، ونحدّد خيّارات عمليّة التحويل وأخيرًا اسم الملفّ الناتج عن عمليّة التحويل. نفّذ الأمر التالي في سطر الأوامر: convert -delay 2 -loop 0 *.png -scale 480x270 shebang.gif فلنمرّ على الأمر أعلاه خطوة خطوة. الخيّار الأوّل هو ‎-delay. يعيّن هذا الخيّار مدّة التوقّف بين إطارات الصورة المتحرّكة، بالأجزاء المئويّة من الثانيّة. أعطيناه هنا القيمة 2 (أي جزئيْن مئويّين من ثانيّة). نحدّد بعد ذلك عدد مرات تكرار التحريك عبر الخيّار ‎-loop. نريد ألّا يتوقّف التحريك، لذا نعطي القيمة 0 للخيّار. إنْ أردنا تحريك الصورة لمرّة واحدة فقط، فستكون القيمة 1، وإنْ أردنا تحريكها مرتين فالقيمة المناسبة هي 2. نريد أن يكون مُدخَل البرنامج مجموعةً من الصوّر، لذا نستخدم حرف البدل * لإخبار برنامج convert أنّنا نريد استخدام جميع الصوّر الموجودة في مجلّد العمل التي تنتهي بـpng. لدينا صوّرPNG مُصدَّرة من برنامج Blender، وتبلغ أبعادها ‎1920 x 1080، وهو قيّاس كبير جدًّا ولا يناسب صوّر GIF المتحرّكة، فنحدّد أبعاد الملفّ الناتج عن التحويل عبر الخيّار ‎-scale لتكون الأبعاد ‎.480×270 أخيرًا، ندخل اسم الملفّ الناتج وصيغته (shebang.gif). ترجمة – بتصرّف – للمقال How To Create Animated GIFs from a PNG Sequence with ImageMagick and the Command Line.
  3. يدعم برنامج GIMP صيغا عديدةً للصور والرسوم، مع اختلافات بينها في الاستخدام. يتطرّق هذا المقال لصيغ الصور الأكثر شيوعا مع إيجابيات وسلبيات كل واحدة منها من منظور برنامج تحرير الصور GIMP؛ كما يقدّم لكلّ واحدة من هذه الصيغ حالات الاستخدام الأمثل. XCF الإيجابيات صيغة الصور الأصلية لملفات GIMP. بهذه الصيغة يتم حفظ كل شيء: الطبقات، التحديدات، قنوات الألوان، المسارات، وغيرها. السلبيات ليست صيغة للعرض، حتّى إذا وجدت ترميز لعرض صور XCF المصغرة في مستعرض الملفات. حجمها كبير جدًا. قنوات الألوان مُرمَّزة بــ 8 بت (2.8 بت في GIMP). اقتراحات الاستخدام حفظ كل ملفات GIMP. JPG الإيجابيات تضغط الملفات بكفاءة عالية. مناسبة للعرض بشكل عام. السلبيات الضغط فاقد lossy، ويغيّر بيانات الصورة قليلًا. وفي حال تحرير الصورة بشكل متكرر وإجراء التغييرات على خصائصها العمومية (اللون، التباين...) ستفقد الصورة جودتها تدريجيًا. جودة الصورة جيدة، والضغط غير مرئي في الصور الفوتوغرافية، لكن يمكن رؤيته في الصور والنصوص التي يتم إنشاؤها باستخدام الحاسوب (تسمى هذه الحالة بتشوهات الضغط artifacts) لا تدعم الشفافية. قنوات الألوان مُرمَّزة بـ 8 بت. اقتراحات الاستخدام عرض الصور الفوتوغرافية. تخزين الصور الفوتوغرافية. PNG الإيجابيات صيغة غير فاقدة lossless، حيث يتم الاحتفاظ بكل وحدات البكسل. تدعم الشفافية الجزئية. تنتج ملفات صغيرة مع معظم صور التي يتم إنشائها باستخدام الحاسوب. مدعومة من جميع المتصفحات. السلبيات الصور معقدة وكبيرة الحجم. قنوات الألوان مُرمَّزة بـ 8 بت. اقتراحات الاستخدام ودجات صفحات الويب: اللافتات banners، الأزرار، الأطر، إلخ. الصور التي يتم إنشاؤها على أجهزة الحاسوب. لقطات الشاشة (باستثناء لقطات الشاشة المحتوية على صورة/صور في الجزء الأكبر منها). GIF الإيجابيات تدعم الصور المتحركة بشكل عام. السلبيات لا تدعم سوى 256 لون لكل صورة، مما يؤدي إلى مظهر مشوّش (البديل الحديث يدعم 256 لون لكل إطار، لكنّه لا يُستخدم في GIMP). تدعم الشفافية، لكن فقط إذا كان جزء الصورة شفافًا تمامًا أو مُعتمًا تمامًا. اقتراحات الاستخدام الصور المتحركة الصغيرة. ويفضل استخدام PNG كصيغة بديلة للصورة الساكنة. أمّا بالنسبة للصورة المتحركة الكبيرة، فيمكن استخدام الفيديوهات التي أصبحت مدعومة من لغة HTML الحديثة. TIFF الإيجابيات صيغة غير فاقدة، حيث يتم الاحتفاظ بكل وحدات البكسل. يمكن ترميز قنوات الألوان بـ 16 بت. يمكن ان تحفظ العديد من الصور (الطبقات). مدعومة من جميع برمجيات معالجة الصور. السلبيات يمكن أن تكون صورًا معقدة وكبيرة الحجم. اقتراحات الاستخدام تخزين الصور عالية الجودة وتبادلها. صيغ الصور الخام raw [NEF (لكاميرات نيكون)، CR2 (لكاميرات كانون)...] الإيجابيات لا يتم فقدان المعلومات من مستشعر الكاميرا (من الناحية النظرية). قنوات الألوان عالية العمق (12 أو 14 بت). السلبيات صيغ مملوكة للشركات المُطوِّرة (ما عدا صيغة DNG). يمكن أن تتغير صيغة المحتوى بدون إشعار (في نماذج الكاميرات الجديدة)، وهذا يمكن أن يؤثر على الدعم من برنامجك المفضل. كبيرة الحجم. غير مناسبة للعرض. اقتراحات الاستخدام حفظ صور الكاميرا، ومن الجيد أيضًا أن تحفظ نسخة ثانوية بإحدى الصيغ العامة. خاتمة هناك بالطبع العديد من صيغ الصور الأخرى، لكن الصيغ المذكورة أعلاه هي الأكثر استخدامًا. استخدمها إن لم تكن تعرف صيغًا أفضل، فهي عادة ما تكون سهلة التحويل إلى أيّة صيغة أخرى إذا دعت الحاجة. ترجمة - بتصرّف - للمقال Image Formats Overview
  4. من الأمور التي تجعلني أفضّل استخدام صور GIF دائمة الحركة هو أنها طريقة بسيطة نسبيًا لاستعراض المهارات في التصميم والرسوم الإيضاحية. بالإضافة إلى أنها لا تتطلب وقتا طويلا في الإنتاج، العمل عليها ممتع، علاوة على أنها تختصر كثيرًا من عمليّة التحريك، وهو أمر ذو بال. زاد اهتمامي كثيرا، بوصفي متخصّصًا في الرسوم التوضيحية ومخرج رسوم متحركة، بإنشاء صور GIF دائمة الحركة، لكل من الاستخداميْن الشخصي والمهني خلال السنوات القليلة الماضية. وبما أنني أُسأل كثيرا عن عملي، فسأشارككم بما تعلمته عن صنع صور GIF دائم الحركة “الناجحة”. ابدأ بالقصة بالنسبة لي إنها الخطوة الأكثر تحديا. أحاول أن آتي بفكرة مضحكة وجذابة لكن سهلة الفهم. وبالطبع يجب أن تعمل في صورة GIF دائمة الحركة. دعوني أحدثكم عن مثال، ألا وهو مشروعي لصور GIF بعنوان Game Of Thrones. حيث صنعت صورة GIF لكل حلقة من الموسم السادس لمسلسل صراع العروش، وكان التحدي أخذ المشاهد – التي غالبا ما تكون عنيفة – وتحويلها إلى صور GIF جذابة تعمل كنسخة ملخصة من الحلقة. ستجد أدناه ثلاثة صور متحرّكة تمثل مشاهد قاسية. تخفّف هذه الرسومات الملونة الظريفة من هول المشاهد الأصلية التي يمكن نعتها بكلّ وصف إلا الطرافة. تجمع صورة GIF أدناه، والتي تدوم 15 ثانية، 3 إلى 4 حلقات صغيرة تخلق قصة ذات معنى. مدة الرسوم المتحركة “الصافية” تتراوح بين 5 و6 ثوان؛ لذا فإن سرد قصة ما عبر الحلقات يوفر عليّ بعض العمل. أبقها بسيطة يمنحك استخدام تصميم تقليلي Minimalist المزيد من الحرية في مرحلة التحريك. يمكنني القول من واقع خبرتي إنه كلما كان التصميم أبسط وأوضح كان التحريك أسهل، فالتصميم المعقد يحوي العديد من التفاصيل والظلال وغيرها وبالتالي يتوجب عليك أن تنتبه لها في كل إطار. لذا أبق الأمور بسيطة. أحب استخدام الأشكال الهندسية البسيطة وصيغ الألوان الباهتة. كما أتجنب التفاصيل غير الضرورية كأصابع اليديْن والقدميْن، وأستخدم تصاميم بسيطة لليدين والرجلين - فمن الأسهل أن ترسم ببساطة عوضا عن رسم ذراع مفصلة مع الظلال وسماكات مختلفة ودقة تشريحية. يسمح لك تصميم الأطراف بأشكال بسيطة بمدها وعصرها واللعب بها وكأنها معكرونة دون التأثير على سماكتها الأصلية. يمكنني أن أتلاعب ضمن هذه القيود بالتصاميم مع المبالغة ببعض الميزات لإضفاء الفكاهة والأسلوب المميز والاهتمام البصري: جسد ضخم بوجه صغير، ذراعان ثخينتان جدا أو ذراعان نحيلتان وطويلتان جدًّا وغير ذلك. كما أنني أجد رسم وتحريك الشخصيات البسيطة أكثر جمالا وتعبيرا. لأشرح ما أعنيه، إليك صورة للموهوب سيمون بايلز. تمعن بها وستجد أن الشخصية صممت بالعناصر الأساسية فقط: أشكال بسيطة للأطراف، شكل أثخن للجسم ودائرتان كاملتان للأطراف والشعر. هذا كل شيء. بإمكاني التلاعب في التصميم بسهولة أكبر بكثير مما لو رُسِم بطريقة واقعية أكثر تفصيلا. سيكون من الصعب تنفيذه كل تلك التقلبات المجنونة لو لم يكن التصميم سهلا. يجب أن تكون الحلقات كاملة بما أن صور GIF دائمة الحركة تعرض تلقائيًّا مرارا وتكرارا، فإنها يجب أن تكون كاملة – وإلا سيسهل اكتشاف العيوب، ناهيك عن تشتيت الانتباه. لذا أَوْلِ التفاصيل الكثير من الاهتمام. اهتم كثيرا بكل إطار من رسمتك المتحركة لتضمن ظهور الحلقات باستمرار. أطمح إلى تصميم رسوم متحركة سلسة، وأحيانا أستخدم الرسوم المتحركة الكلاسيكية لإجراء تعديلات بسيطة كرفرفة الشعر وحركة الأطراف (يكون التصميم البسيط بمتناول اليد هنا أيضا). وبما أن صور GIF دائمة الحركة تكون قصيرة في أغلب الحالات فهي تستحق العناء. أول شيء أفعله لجعل الرسوم المتحركة هو إنشاء الإطارين الأول والأخير حتى يُوَّحدا بسلاسة. ومن ثم أنتقل إلى إنشاء جسم الرسم المتحرك. حاول إضافة عناصر ممتعة لتفاجئ بها المشاهدين عند مشاهدة صور دائمة الحركة. إليك أفكارا قد تساعدك للاستلهام منها: استخدم التأثيرات الصغيرة. على سبيل المثال، أضف نجوما إلى العناصر اللامعة واندفاعات لحركة الأطراف السريعة جدا وغيوما صغيرة من الغبار عند ارتطام شيء ثقيل بالأرض. ضخّم الحركة. على سبيل المثال، افصل الرأس عن الجسد عندما تُلكم الشخصية. اختر لوحة الألوان الخاصة بك بحكمة، فصور GIF محدودة ب 256 لونا، لذا فإن البكسلات تظهر إن لم تكن التدرجات متناسقة. ترجمة - بتصرّف - للمقال Creating seamless looping GIFs لصاحبه Eran Mendel. حقوق الصورة البارزة محفوظة لـ Vecteezy
  5. تلعب الصور المتحركة من نوع GIF في InVision دورا كبيرا في عملياتنا التسويقية والتعليمية. حتى إننا قمنا باستخدامها في صفحتنا الرئيسية عوضا عن التحريكات Animations بالشفرات البرمجيّة. يسألنا الناس غالبا كيف نصنع صور GIF الخاصة بنا، لذا وجدنا أنه قد حان الوقت لننطق بهذه الجوهرة. تصميم صور GIF 1. الخلطة السحرية إليكم سرّي الصغير: تبدأ جميع صور GIF التي أنتجها من فيديوهات. أستخدم ScreenFlow لهذا الغرض، وهو نفس البرنامج الذي نستخدمه لفيديوهات مُنتجاتنا، إذ يتميّز بالبساطة بحيث يمكن تعلمه بسهولة، وفي الوقت نفسه يضم مجموعات أدوات تحريك مفيدة. بعد أن أصدّر Export الرسوم المتحركة على هيئة ملف فيديو، أنتقل إلى برنامج فوتوشوب وأستوردها من القائمة ملف File > استيراد Import > إطارات الفيديو كطبقات Video Frames As Layers. نصيحة: استخدم Keynote لإنشاء رسومك المتحرّكة إن لم تسمح ميزانيتك باستخدام ScreenFlow و After Effects، ثم صدّرها إلى فيديو. نعم، في النهاية هناك استخدام لهذا الإعداد. 2. ألوان أقل = مرح أكثر إن أردت الحصول على صور GIF مذهلة، يجب عليك أن تختار الألوان بعناية. فهي لن تلعب دورا كبيرا من ناحية حجم الملف فقط، بل إن استخدام ألوان أقل سيتيح لك صنع صور GIF أطول وأكثر تعقيدا مع المحافظة نسبيًّا على صغر حجم الملف (بالنسبة لي، الملف صغير الحجم هو ما يكون حجمه أقل من 1MB). 3. استخدم تأثير ضبابية الحركة Motion blur عندما يكون الأمر ممكنا تتيح لك البرامج مثل ScreenFlow و After Effects تصدير الفيديوهات باستخدام ضبابية الحركة. مما يجعل صورك المتحركة لا تبدو احترافية فحسب، وإنما يساعدك أيضا في التلاعب بالأشياء قليلا وذلك من ناحية حجم الملف إن اضطررت لحذف إطارات من صورة GIF الخاصة باستخدام الفوتوشوب. لاحظ الفرق بين الصورتيْن التاليتيْن، الأولى بدون تأثير الضبابية والأخرى بتطبيق هذا التأثير. 4. كن كسولا (نوعا ما) تخيل جميع الأشياء الأخرى التي يمكن أن أضيفها إلى صورة GIF الموجودة في بداية هذا المقال. تلميحات صغيرة مع أسماء مستخدمين فوقها، مؤشر ينقر على زر الزائد، يحوم فوق الوجوه، كاشفا المزيد من التلميحات. لا يحتاج الناس رؤية كل شيء ليفهموا الصورة، لذا أرهم فقط ما تحتاج إليه، فوقتك وحجم ملفك محدودان. تصدير صور GIF صدّر الرسوم التي تعمل عليها إلى صورة GIF، قبل أن تُرهق نفسك باتباع النصائح التالية. إن كان حجم ملفها معقولا، أحسنت عمل رائع! استمر في ما تفعله. وإن كان كبيرا، جرب ما يلي. 1. احذف الإطارات Frames المتطابقة من المرجَّح أن صورك المتحركة ستتوقف أو تسكن في نقطة ما. إن تفحصتها عن قرب، ستلاحظ أن هذه اللحظات تحوي مجموعة من الإطارات المتطابقة مدة كل منها 0.03 ثانية. فإن وجدت 10 إطارات متطابقة، احذف تسعة منها وحدد مدة ذاك الإطار الوحيد لتكون أطول، اجعلها ثانية مثلا. إن لم يفدك ذلك، حاول إعادة استيراد الفيديو، لكن هذه المرة فعل الخيار اقتصر على واحد من كل إطاريْن Limit To Every 2 Frames. يجب أن يُخفض ذلك حجم ملفك بقدر ملحوظ. نصيحة: إن كانت صورتك المتحركة تحوي أكثر من 150 إطارا فسيصعب عليك إبقاء حجم الملف منخفضا. 2. خفّض عدد الألوان عندما تحفظ صورتك المتحركة في الفوتوشوب، ستجد قائمة منسدلة بعنوان ألوان Colors على يمينك. جرّب قيما مختلفة في هذه القائمة. خفّضها قدر الإمكان، دون أن تحوّل صورتك المتحركة إلى كتلة من البشاعة. 3. عدّل نسبة فقدان البيانات يمكنك عند حفظ الصورة أن تحدّد نسبة فقدان البيانات بتحديد قيمة الخيار Lossy. قيمة بين 1 و 10 ستجعلك تتخلص من بضعة كيلوبايتات دون الإضرار بجودة الصورة. لا شيء مما سبق نافع! ساعدوني! إن كنت قد جربت كل ما سبق دون أن تستطيع تخفيض حجم تلك الصورة، فقد حان الوقت للمراجعة قليلا. هل تحاول أن تنجز الكثير؟ هل من طريقة أخرى لتحقيق هدفك؟ ماذا لو قسمتها إلى صورتي GIF مختلفتيْن؟ على غرار جميع المنتجات الإبداعيّة، , صورك المتحركة ستكون أفضل إن ركزت على شيء واحد فقط. رأسك يدور؟ إليك أدوات لإنشاء صور GIF إن كانت كل النصائح المُقدَّمة أعلاه مربكة لك، جرب أحد الخيارات التالية: GIPHY GIF Maker (مجاني) إن أنشأت حسابا في الموقع فسيمكنك الاحتفاظ بخصوصية صور GIF التي تنشئها عبر الموقع، وإلا فإن جميع صورك المتحركة ستصبح تابعة لـ GIPHY. EZGIF (مجاني) بالرغم من أنه لا يبدو بسيطا أو سهلا للعين كما هو GIPHY، إلا أنه يوفر تحكما أكبر. (4.99$) GifBrewery 3 لا أشتري تطبيقات لصنع الصور المتحركة، لكن لو كنتُ كذلك فبالتأكيد سيكون هذا هو التطبيق الذي سأعتمده. ترجمة - بتصرّف - للمقال 7 tips for designing awesome animated GIFs لصاحبه Andy Orsow. حقوق الصورة البارزة محفوظة لـ Freepik
  6. إن المحافظة على أقل حجم للصورة هو الجزء الأهم في جعل موقعك خفيفًا وسريعًا. من الممكن تخفيض حجم الصورة مع المحافظة على دقة جيدة لها عبر فهم القليل عن ضغط الصور وكيفية تحسين هذه الصور من أجل الويب. حفظ من أجل الويب والأجهزة في الفوتوشوب أول مفتاح لتحسين الصورة هو اختيار تعديل الصورة وحفظها من أجل الويب في الفوتوشوب. إن كنت تستخدم عادة خيار “حفظ” أو “حفظ باسم…” فقد حان الوقت لتعلّم حيلة جديدة. 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)
  7. هذا الدرس الرابع من سلسلة نصائح وحيل فوتوشوب، التي سنتعلم من خلالها العديد من الحيل والأدوات عند التصميم ببرنامج فوتوشوب بالإضافة إلى مجموعة من النصائح حول الإستخدام الأمثل للبرنامج. سنقوم في هذا الدرس بتصميم قلم وتحريكه لكتابة كلمة وسنراه يقوم بذلك بالحركة فعليًّا باستخدام برنامج فوتوشوب. وستكون النتيجة كالتالي: افتح ملفا جديدا في فوتوشوب ثم لوّن الخلفية كما تريد ثم استخدم أداة النص لكتابة أي كلمة أو عبارة تريدها مثلا: "حسوب". حوّل طبقة النص إلى طبقة صورة نقطية عبر النقر بالزر الأيمن على الطبقة واختيار Rasterize Type من القائمة. حدد هذه الطبقة واضغط Ctrl+J لصنع نسخة جديدة عنها ثم أخفِ الطبقة القديمة واستخدم أداة الممحاة لمسح جزء صغير من آخر النص. مجددًا حدّد الطبقة الجديدة ثم اضغط Ctrl+J ثم أخفِ الطبقة القديمة وامسح جزءًا إضافيًّا من النص ثم كرّر العملية حتى تمسح النص بالكامل. استخدم أدوات الأشكال واختر شكل القلم من بين الأشكال القياسية الموجودة في برنامج فوتوشوب أصلًا. ارسم شكل القلم ولوّنه كما تشاء (يمكنك استخدام صورة قلم حقيقي ببساطة). الآن اذهب إلى نافذة Window ثم فعّل نافذة Timeline ثم ابدأ بإضافة إطار Frame جديد وفي كل مرّة أظهِر طبقة جديدة من الطبقات النصيّة التي أخفيناها سابقًا مع تحريك القلم ووضع رأس القلم عند النقطة الأخيرة الظاهرة من النص وكرّر العملية حتى تصل إلى إظهار النص كاملًا. احفظ الملف من القائمة: File > Save for Web ثم اختر نوعية الملف GIF واحفظ الملف وستحصل على النتيجة التالية. طبعًا هذه نصيحة بسيطة ومختصرة ويمكنك تعديل العمل بخلفية مختلفة ونص آخر وقلم واقعي والتلاعب بعدد الإطارات ومدة إظهارها ...الخ
  8. من الممتع مشاهدة صور السينماغراف ومن الممتع أكثر تصميم هذه النوعية من الصور الإبداعية، حيث تجعل هذه التقنية الصور عالية الدقة تنبض بالحياة. وفي هذا الدرس سنتعلم كيفية تصميم هذه النوعية من الصور بسهولة وبخطوات بسيطة باستخدام الأدوات الحديثة الموجودة في إصدار 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 ويمكن تحميلها بغية الاستفادة منها لأغراض تدريبية وتعليمية فقط.
  9. هذا الدرس الأول من سلسلة نصائح وحيل فوتوشوب، التي سنتعلم من خلالها العديد من الحيل والأدوات عند التصميم ببرنامج فوتوشوب بالإضافة إلى مجموعة من النصائح حول الإستخدام الأمثل للبرنامج. سنتعلم في هذا الدرس كيفية تصميم شريط إعلاني (Banner) متحرك صغير وبسيط بخطوات سريعة وبسيطة. افتح ملفا جديدا في برنامج فوتوشوب بحجم 400×75 بكسل. طبّق على الخلفية تدرّج لوني كما في الصورة. ارسم تحديد دائري يظهرُ طرفهُ فقط في الجزء الأيسر من الشريط. امسح هذا الجزء المحدد. أبقِ على التحديد وارسم بداخله تدرج لوني مطابق للخلفية مع عكس اتجاهه. أبقِ على التحديد أيضًا ثم اذهب للقائمة: Select > Modify > Contract وأدخل القيمة 5 وبعدها اضغط OK ثم طبّق تدرّج لوني على ما بقي من التحديد من الرمادي الفاتح إلى الأبيض كما في الصورة. أدخل الشعار في هذا الجزء الرمادي الفاتح. أدخل عنوان الشريط الرئيسي في الموقع الذي تراه مناسبًا. أدخل العنوان الفرعي في المساحة المتبقية مع جعلها بحجم خط أصغر وبألوان متناسقة مع التصميم بصورة عامة (علمًا أنّه يوجد العديد من العناوين الفرعية ولكننا سنقوم بإدخالها لاحقًا). انسخ طبقة النص الفرعي بالضغط على Ctrl+J بعد تحديد طبقة النص طبعًا ثم حدد النسخة واذهب للقائمة: Filter > Blur > Motion Blur ثم أدخل القيمة 12 وبعدها OK (سيسألك لدى تنفيذ هذا الفلتر عن موافقتك على تحويل الطبقة إلى صورة نقطية فاضغط موافق). أخفِ هاتين الطبقتين ثم أدخل العنوان الفرعي الثاني في طبقة جديدة وكرّر عملية تطبيق الفلتر عليه بذات الأسلوب. كرّر العملية مع جميع العناوين الفرعية ثم فعّل نافذة TimeLine من قائمة Window ثم أدخل الأطر تباعًا مع إظهار النص الفرعي أولًا فقط ثم النص الفرعي الأول مموّه بالفلتر ثم النص الفرعي الثاني وهكذا حتى النهاية مع جعل مدّة عرض إطار النص الفرعي العادي 1 ثانية ومدّة عرض النص الفرعي المموّه 0.1 ثانية. اذهب إلى القائمة: File > Save to Web ثم احفظ الملف بصيغة GIF مع تخصيص الإعدادات المناسبة والنتيجة ستكون كالتالي:
  10. يعتبر تحسين الصور (Image Optimization) من بين أكثر الخطوات بساطة وتأثيرا والتي يمكنك اتباعها من أجل تحويل موقعك من جيد إلى رائع. إلا أن القيام بذلك بشكل خاطئ سيؤدي حتما إلا نتائج عكسية كإثارة سخط زوارك، التأثير سلبا على عائداتك المادية فضلا عن خفض تصنيف السيو SEO الخاص بك. من حسن الحظ أن توفر العديد من الأدوات المتقدمة يجعل من القيام بهذا الجزء المهم من عملية التحسين العام للمواقع بشكل صحيح أمرا من السهولة بمكان. سنعمل في هذا المقال على التعمق في هذا الموضوع من خلال تغطية كل ما ستحتاجه لضمان دفع أداء موقعك إلى أقصى حدوده فيما يتعلق بكيفية تقديم المحتوى الجرافيكي. لنبدأ من خلال تعريف المصطلحات والتطرق لمختلف صيغ الصور التي تدخل في سياق الموضوع. نظرة حول صيغ الصور المستخدمة على الإنترنت كما يعرف كل من أمضى بعض الوقت مستخدما خاصية Save-as على برنامج فوتوشوب، هنالك كم هائل من صيغ الصور في العالم الرقمي، لكن عندما يتعلق الأمر بوضع هذه الصور على الإنترنت فإننا نتعامل مع عدد محدود نسبيا من الخيارات. تنقسم هذه الصيغ إلى نوعين أساسيين: Vector graphics (الرسومات المُتَّجِهة): الصور التي يتم تمثيلها بالاعتماد على المعادلات الرياضية من خلال استخدام الأشكال الهندسية مثل النقط، الخطوط والمنحنيات. Raster graphics (الرسومات النقطية): الصور المكونة من خلال شبكة بكسل مستطيلة الشكل. توضيح للاختلاف بين الرسومات المتجهة (على يمينك) والنقطية (على يسارك) في سياق تحسين الصور سنولي اهتماما أكبر للصور النقطية، إلّا أننا سنلقي نظرة سريعة على موضوع الصور المُتّجهة قبل أن ذلك. الصور المتجهة (Vector Images) يتم تمثيل الصور المُتّجهة حسابيا وبالاعتماد على معادلات رياضية ما يعطيها العديد من الإيجابيات دون إدخال أي تحسينات: عدم ترابط جودة الصورة ودقتها: يمكن تكبير وتصغير الصور المُتّجهة إلى أي حجم دون التسبب في تشويهها أو في ضياع التفاصيل حيث يتم عرضها بالجودة الكاملة في أي دقة كيفما كانت. سهولة التعديل: تقدم الصور المُتّجهة نفسها على طبق من ذهب لإمكانية التعديل والتغيير دون تخريبها. حجم ملف صغير: تتكون الصور المُتّجهة من سلسلة أوامر برمجية ما يعني صغر حجم ملفاتها. لطالما جعلت النقاط التي أسلفنا الذكر من الرسوميات المُتّجهة خيارا ممتازا في مجال تصميم الرسوميات (designing graphic) سواء الرسوم التوضيحية، الخلفيات أو أيقونات الشعارات. من ناحية تحسين الصور يمكن اعتبار أن الصور المُتّجهة تأتي جاهزة بشكل مثالي دون الحاجة إلى أي تعديلات أو تحسينات، يبقى المشكل في استخدامها مقتصرا على ضمان توافقيتها مع المتصفحات ودعم هذه الأخيرة لاستخدامها ما أدى إلى شيوع ممارسة غير سلسة بعض الشيء تتجلى في إنشاء المصممين لأعمالهم على حزم تصميم داعمة للرسوميات المتجهة مثل: Adobe Illustrator أو Inkscape ثم الاضطرار إلى تصدير (export) أحجام مختلفة فضلا عن صيغ غير مُتَّجِهة من أجل استعمالها على الإنترنت. تصميم تطبيق الرسوميات المتجهة Sketch المقدم من Bohemian Coding يمكن لتَبَني صيغة صور الويب SVGs Scalable Vector Graphics (الرسومات المتجهة متغيرة الحجم) على الصعيد العالمي أن يجعل من الأمور أكثر سهولة في هذا الصدد، إلا أنه من المؤسف أننا لم نصل بعد إلى هذا المستوى فيما يتعلق بدعمها. بأخذ هذا بعين الاعتبار وبالنظر إلى سنوات من التقدم التدريجي التصاعدي، يمكن أن نقول أن دعم توافقية هذه الصيغة أصبح قريبًا، من المرتقب أيضا أن نشهد أخيرا وفي السنوات القليلة القادمة انتشار واسعا لاستخدام الرسوميات المتجهة على أرض الواقع. حتى ذلك اليوم، من الوارد أنك ستحتاج إلى تصدير (export) ملفات الصيغ المتجهة إلى صيغ نقطية من أجل عرضها على الإنترنت، سنولي اهتمامنا فيما يلي إلى هذا النوع الأخير من الصيغ. الصور نقطية (Raster Images) تحظى الصور النقطية بالدعم الكامل من المتصفحات فضلا عن الحاجة لإجراء تعديلات كثيرة ومتقدمة تماما عكس نظيرتها المتجهة. هنالك في المجمل ثلاث صيغ ملفات ستصادفها أغلب الوقت إضافة إلى واحدة أخرى حديثة العهد بادية في الأفق يجدر أخذها بعين الاعتبار. لنقم بتغطية هذه الصيغ بالتتابع. GIFs تعتبر صيغة GIFs) Graphics Interchange Format) أقدم الصيغ في عالم الصور الرقمية، حيث تم ابتكارها سنة 1987، تتميز بصغر حجم ملفها، محدودية لوحة الألوان الخاصة بها: 256 لونا فضلا عن دعمها للشفافية ما جعلها العماد الأساس للعمل الرقمي خلال بدايات الإنترنت، والحل الذي يتم اعتماده بخصوص الصور التي تتضمن نصا ما أو ألونا مسطحة (flat color). تعتبر الصور التي تتضمن النصوص و/أو الألوان المسطحة استعمالا كلاسيكيا لصيغة GIFs رغم تحقيق هذه الصيغة عودة لا بأس بها خلال موجة جنون استخدام صور GIFs الحركية مؤخرا إلا أنها تفقد المزيد من مستخدميها بشكل متواصل لفائدة صيغة PNGs. JPEGs تعتبر صور JPEGs الصيغة العالمية لعرض الصور منذ الأيام الأولى للإنترنت، يتم استعمالها حاليا في ما يزيد عن %70 من المواقع الإلكترونية على الصعيد العالمي. تتميز هذه الصور بمبدأ الضغط الفَقُود (lossy compression) ما يجعل منها مرشحا ممتازا لعمليات التحسين المتقدمة فضلا عن ملائمتها المثالية للصور التي تحتوي على مجال واسع من الألوان والتدرجات (gradients)، يعتبر عدم دعم هذه الصيغة للشفافية (transparency) نقطة ضعفها الوحيدة. حفظ كل من تدرج الألوان المتقن فضلا عن مجال اللون الديناميكي بشكل جيد باستخدام JPEGs PNGs تم ابتكار الرسومات من صيغة PNGs (رسومات الشبكة المحمولة Portable Network Graphics) كحل لمشاكل الترخيص المحتملة عند استخدام GIFs، توفر صيغة PNGs خاصية الضغط غير الفَقُود (lossless compression)، دعم الشفافية (transparency) فضلا عن جودة صورة عالية. تعتبر صيغة 8 بت (8-bit format) بديلا مثاليا لصيغة GIFs كما أنها تتميز عن هذه الأخيرة بصغر حجم ملفها، في حين أن صنفي 24 بت و32 بت (24-bit and 32-bit) يوفران بديلا ممتازا لصيغة JPEGs، يبقى المشكل الوحيد هو كبر حجم الملف الناتج في هذه الحالة. يجعل الدعم الكامل للشفافية من صيغة PNGs خيارا جيدا للعديد من الاستعمالات. WebP في حين تتميز صيغ الصور النقطية الثلاث التي تمت مناقشتها سابقا بإمكانية نشرها على معظم المتصفحات الشهيرة نلاحظ غياب أي ابتكار حقيقي في هذا المجال منذ مدة من الزمن. من المحتمل أن يتغير ذلك مع مشروع WebP الخاص بجوجل (Google’s WebP project)، والذي يتمحور حول طرح صيغة صور جديدة والتي تمكن من تخفيض حجم الملف بنسبة تصل إلى %25، رغم أن متصفح Chrome يدعم هذه الصيغة بشكل تلقائي يبقى الدعم على مستوى عالمي أمرا غير متوافر. نصل مما سبق إلى خلاصة مفادها أن الصور المتجهة مثالية للغاية للعديد من الاستعمالات، لكن في سياق الاستعمال اليومي في إنشاء المحتوى ستستعمل مزيجا من صيغ GIFs، PNGs و JPEGs على الأقل في المستقبل القريب. لنتطرق إلى الأسباب التي تجعل من تحسين الصور بهذه الصيغ أمرا غاية في الأهمية. ضرورة التحسينات أدى توافر سرعة إنترنت عالية في العديد من الدول إلى عدم الاهتمام بتحسين الصور في بعض الأوساط. عادة ما يتم طرح هذا النوع من الأسئلة: ما الفرق الذي ستحدثه بضع كيلوبايت إضافية في وقت يستطيع معظم المستخدمين مشاهدة الأحداث الرياضية بشكل مباشر على أجهزتهم المحمولة؟ ألم نتجاوز بعد مرحلة القلق حول هذا النوع من البديهيات التافهة؟ لسوء الحظ فإن الإجابة ستكون بالنفي القاطع، تعتبر السرعة أمرا أساسيا خصوصا في الهواتف المحمولة. حقائق جديدة حول الهواتف المحمولة يتوجه الإنترنت بشكل متواصل نحو هيمنة استخدام الهواتف المحمولة. ينتج عن ذلك أمران أساسيان يجب أن تأخذهما بعين الاعتبار فيما يخص تحسين الصور: لم تعد الصور تعتبر كإضافات تزيين محببة للرؤية تستخدم لملء الفراغ في الأجهزة ذات الشاشات الكبيرة، يجب أن يتم التعامل معها على أن لها دورا محددا تلعبه في ظل الأجهزة ذات شاشات صغيرة جدا. رغم أن سرعات التحميل على الهواتف المحمولة في تصاعد مستمر إلا أنها لا زالت تقبع خلف تلك الخاصة بالحواسيب كما أن استخدامها لا يزال مُكلفًا، لكل بكسل أهمية قصوى. بالنظر إجمالا إلى هذا السياق، لنلق نظرة على ثلاث أسباب تجعل من تحسين الصور ضرورة وليس أمرا إضافيا فقط: يريد المستخدمون صفحات سريعة استنادا إلى أبحاث موقع HTTP Archive، تعد الصور من بين الأسباب الرئيسية في جعل معدل حجم الصفحات يصل إلى 1.25MB شأنها في ذلك شأن استخدام JavaScript بشكل مفرط، ما يعتبر بعيدا كل البعد عن المعدلات الرائجة أيام تحدي الخمس كيلوبت (the 5K Challenge). تؤدي ضخامة حجم الصفحات المتزايدة إلى نتائج سلبية، حيث أن %73 من مستعملي الإنترنت على الهواتف المحمولة اشتكوا من مواجهتهم مشاكل مع المدة الزمنية المستغرقة لتحميل الصفحات على أجهزتهم. في نفس الوقت، يتوقع نصف مستخدمي الويب أن يتم تحميل موقع ما في غضون ثانيتين، إلا أن هذا المعدل عند استعمال جهاز محمول يكون حوالي 7 ثوان، ما يعني بكل بساطة عدم موافاة تطلعات المستخدمين. باختصار، قد يؤدي ملء موقعك بصور غير ضرورية إلى سخط زوارك حتى قبل حصولهم على فرصة للتعرف على المحتوى الذي تقدمه. تؤدي كمية الصور الكبيرة إلى التأثير سلبا على التصنيف على محركات البحث تأكيدا لشكوك العديدين سابقا في سنة 2010، صرحت جوجل بأن السرعة تعتبر عاملا رسميا في تصنيف المواقع. يجب أن يتم تحميل صفحة موقعك في غضون ثانية أو أقل، لا تعتبر 200 كيلوبت التي تضيفها صورة القائمة الرأسية في موقعك إزعاجا وعدم احترام لمستخدمي الهواتف المحمولة فحسب بل قد تؤدي إلى عدم إيجادهم لموقعك على مُحرّكات البحث. تؤثر الصفحات البطيئة على عائداتك المادية قم بتجميع النقطتين السابقتين لتحصل على الوصفة السحرية للعديد من الثغرات لتسرب وضياع مداخيلك. تشير أبحاث Strangeloop إلى أن تأخيرا بسيطا بمقدار ثانية واحدة في تحميل الصفحة قد يؤدي إلى خفض معدل التحويل بنسبة %7. هل ترى أنك في وضعية تسمح لك بالتخلي عن قيمة الأرباح هذه فقط من خلال عدم تحسين منتوجك؟ ترجمة -وبتصرف- للمقال: The Complete Guide to Mastering Image Optimization for WordPress لصاحبه: TOM EWER. حقوق الصورة البارزة: Designed by Freepik.
  11. شاهدت مؤخرًا العديد من التصاميم ثلاثية الأبعاد للافتات نيون إعلانية تم تصميمها باستخدام برامج التصميم ثلاثي الأبعاد. أميل أكثر للتّصاميم ثنائية الأبعاد لذلك أريد أن أنتج تأثير نيون مشابه باستخدام الإليستريتور وفوتوشوب ولكن مع إضافة الحركة بواسطة صيغة GIF المتحركة. اتبع هذا الدرس لتتعلم عملية تصميم لافتة إعلانية لكوكب البيتزا مُستخدمًا أدوات فكتور الإليستريتور لإنشاء التصميم الأوّلي للافتة ثم فوتوشوب لإضفاء الحيوية على التصميم عبر أنماط الطبقات المتنوعة وتشكيل الحركة للملف. تأثير لافتة النيون سيتم إنشاؤه في الفوتوشوب باستخدام أنماط الطبقات عبر إنشاء توهجات نيون ملوّنة كما سيكون هناك طبقة قاتمة تكون عند إطفاء الأنوار والتي ستُضاف في إطار أثناء سير الحركة للملف لإضفاء الشعور بالواقعية على التأثير. لافتات النيون تعتمد على الأنابيب المنحنية لتشكيل أشكال التصميم لذلك سنستخدم الإليستريتور لصياغة مسارات فكتور بحيث لا تتقاطع الخطوط مع بعضها. افتح برنامج الإليستريتور وابدأ ملفًّا جديدًا. ارسم دائرة على لوح الرسم باستخدام أداة القطع الناقص Ellipse tool، ثم ألغِ لون التعبئة واترك فقط الحدود السوداء ظاهرة. غيّر إعدادات الحدود إلى 5pt مع نهايات مستديرة وزوايا مستديرة أيضًا. استخدم أداة النص Type tool لإضافة أي نص إلى لافتة النيون. أنا استخدمت خطًّا اسمه Darwin لكتابة Pizza Planet. اضبط حجم النص ليتوسط الدائرة ويتقاطع مع حدودها الخارجية ثم أمِلهُ بزاوية -10 درجة عموديًّا من القائمة: Object > Transform > Shear option ألغِ لون التعبئة للنص وأضف حدودًا سوداء مستخدمًا ذات الحجم 5pt مع النهايات المستديرة والزوايا المستديرة أيضًا. بالزر الأيمن اختر Convert to Outlines. ارسم دائرة صغيرة وقصّ المسار باستخدام أداة المقص Scissors tool في الجزء العلوي الأيسر. استخدم أداة التحديد المباشر Direct Selection tool لحذف المسار من النقطة السفلية إلى هذا القطع الجديد. اصنع نسخًا عديدة من هذا الشكل الأخير مع تعديل أحجامها وذلك لتعبئة المساحات الفارغة داخل الدائرة لتكوين فوهات وفتحات الكوكب. حدّد الدائرة الرئيسية للكوكب وانسخها CMD+C ثم ألصقها في المقدمة CMD+F. استمر بالضغط على ALT أثناء تمديد وضغط الشكل لتشكيل الحلقة حول الكوكب. ضاعف هذا الشكل الأخير وصغّر حجمه قليلًا بشكل يوازي الأصلي. ارسم شكلًا بيضويًّا في مكان ما على لوح الرسم ثم اسحب النقطة العلوية للأعلى باستخدام أداة التحديد المباشر Direct Selection tool لتمديد الشكل. استخدم أداة Convert Anchor Point tool الموجودة ضمن أدوات القلم لإزالة مقابض البيزير وترك النقطة حادة. أضف دوائر أخرى إلى الشكل لبناء شكل صاروخ بسيط. استخدم لوحة المحاذاة Align panel لتوسيط جميع العناصر مع جعل شكل جسم الصاروخ العنصر المفتاح عبر منحه نقرة إضافية. اصنع نسختين من الصاروخ وعدّل حجمها ودوّر كل صاروخ وضعهُ في موقعه في مدارٍ حول الكوكب مع جعلها أكبر في كل مرّة. التصميم يحوي العديد من المسارات المتداخلة فوق بعضها لذلك دعونا ننشئ المزيد من نماذج أنماط لافتة النيون. حدّد دائرة الكوكب الرئيسية ثم اذهب للقائمة: Object > Path > Offset Path ثم أدخل القيمة 3mm. انقر بالزر الأيمن على المسار الإضافي الجديد واختر Make Guides. تأكد من ظهور الأدلة عبر الضغط على CMD+; ومقفلة عبر الضغط على CMD+Alt+; استخدم أداة المقص Scissors tool لقص مسارات حلقات الكوكب في موقع تقاطعها مع الأدلة الجديدة. استخدم الأدلة الذكية Smart Guides عبر الضغط على CMD+U لتُسهّل عملية مطابقة هذه المنطقة. على الجانب الآخر فإن حرف P يتقاطع مع حدود الكوكب أيضًا لذلك ألغِ تجميع النص Ungroup من أجل تحديد هذا الحرف فرديًّا ثم أضف مسار إضافي بقيمة 3mm. الحرف P بشكل خاص بحاجة لخطوة إضافية من أجل إنشاء الأدلّة. انقر بالزر الأيمن ثم اختر Release Compound Path ثم احذف الجزء الداخلي قبل تحويل الخطوط الرئيسية إلى أدلّة. قص حلقات الكوكب عند تقاطعها مع المسار الإضافي لحرف P ثم احذف الأجزاء غير المرغوبة من المسارات. سنستخدم ذات التقنية في كل التصميم لإزالة جميع المسارات المتقاطعة ولكن بالنسبة للجزء السفلي من الحلقة فإن النص هو من يحتاج للتعديل للسماح للحلقة بالالتفاف حول الكوكب. ألغِ تجميع Ungroup عناصر النص الأخرى وأضف مسار إضافي للحرف الأول والأخير ثم أنشئ أدلّة من النتائج. تذكّر أن تحرر المسار المركب لحرف P ليصبح قابلًا للتحول إلى دليل. استخدم هذه الأدلة الجديدة لقص أي مسارات متداخلة مع بعضها وأزِل التداخلات في كل أنحاء التصميم. بالنسبة للمنطقة التي يتداخل فيها النص مع الحلقة سنحتاج إلى أدلة إضافية من مسارات الحلقة نفسها. استخدم أداة المقص Scissors tool لقص وحذف مناطق تواجد الحروف تحت الحلقة عبر خطوط الأدلة. من الضروري في بعض الأحيان تحرير المسارات المركبة للحروف من أجل تحديد وحذف الأجزاء غير المرغوبة من المسار. بعد إزالة جميع المسارات المتداخلة سيكون التصميم قد أخذ شكلًا أكثر واقعية كلافتة نيون. حدّد المسارات التي تُشكّل جزءًا محددًا وامنحها ألوانًا برّاقة للحدود كالأزرق، الأحمر، الأصفر والأبيض. افصل الألوان المختلفة داخل طبقاتها الخاصة عبر استخدام القائمة: Select > Same > Stroke Color ثم انسخ التحديد وألصقه في المقدمة. وضع الأجزاء التي ستكون متحركة في طبقات خاصة بها كالعناصر التي تُكَوِّن الصواريخ الثلاثة. اذهب إلى القائمة: File > Export وضع نوعية الملف PSD Photoshop وتأكّد من تفعيل خيار Write Layers. افتح الملف الذي تم تصديره من برنامج الإليستريتور في برنامج الفوتوشوب ووسِّع حجم العمل قليلًا. لوِّن الخلفية بالأسود وأضف خامة جدار الطوب. حدّد كل طبقات عناصر لافتة النيون ثم اضغط CMD+J لمضاعفتها ثم اضغط CMD+E لدمجها في طبقة واحدة. أعِد تسمية هذه الطبقة 'Off'. أضف سلسلة من أنماط الطبقة لجعل هذه الطبقة تبدو كالأنابيب بدون إضاءة، أي (تراكب لوني) Color Overlay، (توهج داخلي) Inner Glow و (الظلال) Drop Shadow. ضع هذه الطبقة أسفل جميع الطبقات بحيث لن تكون ظاهرة أثناء إضاءة العناصر وستظهر أكثر في العناصر المتحركة حيث ستنطفئ هذه العناصر عدة مرات. شَغِّل طبقة النيون الأولى عبر سلسلة من أنماط الطبقة. أضِف التوهُّج الداخلي لإضافة الأبيض البرّاق إلى المركز، والتوهُّج الخارجي لإطلاق الهالة الملونة، تليها المزيد من الظلال لتراكب التوهُّجات بأحجام مختلفة. كل هذه الأنماط للطبقات تُنتِج تأثيرًا واقعيًّا إلى حد كبير مشابهًا لإضاءة النيون وتأثيرات التوهُّج والتفاعل مع خلفية جدار الطوب. انسخ وألصق نمط الطبقة إلى الطبقة التالية ثم عدّل إعدادات التوهُّج حتى تناسب لون العنصر. وفّر الوقت عبر نسخ نمط الطبقة إلى باقي الطبقات التي تحمل ذات اللون. لافتة النيون ستبدو رائعة عند الانتهاء من وضع كافة أنماط الطبقات ولكننا سنضيف بعض الحركة على التصميم. اجمع عناصر كل صاروخ معًا بحيث سيكون من السهل تشغيل وإيقاف أي صاروخ أثناء الحركة. أظهر لوحة Timeline من قائمة Window ثم أنشئ إطار جديد New Frame Animation. في هذا الإطار الأول ستكون اللافتة متوقفة عن العمل لذلك سنُظهر فقط الطبقة الداكنة مع خلفية جدار الطوب. عدّل المدة الزمنية لهذا الإطار الأول إلى ثانية واحدة. أضف إطار جديد تظهر فيه أول طبقة نيون. لا تضف أي زمن لظهور هذا الإطار وبذلك سيظهر هذا الضوء على الفور. أضف إطارين بعدها بدون مدة زمنية لإضافة الأضواء الحمراء والزرقاء بحيث ستضيئ اللافتة تباعًا بسرعة. في الإطار التالي أظهر طبقة الصاروخ الأول مع جعل المدة الزمنية لعرض هذا الإطار ثانية واحدة. في الإطار التالي أخفِ الصاروخ الأول وأظهر الثاني لإعطاء الانطباع عن حركة الصاروخ. أضف إطار جديد للصاروخ الثالث من أجل إظهاره وإخفاء الصاروخ الثاني. ضاعف هذه الإطارات الثلاثة الأخيرة لتُطيل مدة الحركة. أو بدلًا من ذلك يمكن جعل هذه الطبقات الثلاثة تضيء باستمرار إلى ما لا نهاية بدون وجود الطبقة الأولى للافتة المتوقفة عن العمل. قم بتصدير العمل كملف GIF من خلال Save for Web أو أرسله إلى برنامج تعديل فيديو لتصنع حركة مستمرة أفضل. ترجمة -وبتصرّف- للمقال: How To Create an Animated Neon Sign Effect لصاحبه: Chris Spooner.