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

تلعب الصور المتحركة من نوع 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

في هذا الدّرس من سلسلة تعلّم CSS؛ سنشرح كيفيّة تحديد الألوان في أوراق الأنماط، وسنتدرّب على ذلك بتغيير لون الخلفيّة. فهرس السلسلة: مدخل إلى أوراق الأنماط المتتالية (CSS). آلية عمل تعليمات CSS داخل المتصفحات. المحددات (Selectors) في CSS. كيفية كتابة تعليمات CSS يسهل قراءتها. تنسيق نصوص صفحات الويب باستخدام CSS. التعامل مع الألوان في CSS. (هذا الدرس) إضافة محتوى إلى صفحة ويب باستخدام CSS. تنسيق القوائم (Lists) في CSS. تعرف على الصناديق (Boxes) في CSS. رصف العناصر (Layout) في CSS. الجداول (Tables) في CSS. التعامل مع أجهزة العرض المختلفة والمطبوعات في CSS. الألوان استخدمنا في الدّروس السّابقة مجموعة محدودة من الألوان المُسمّاة. تدعم css في مجملها 17 لونًا مُسمّىً، قد تبدو لك بعض هذه الأسماء غريبة: الألوان الأساسية black: الأسود silver: الفضّيّ white: الأبيض red: الأحمر lime: الزيزفونيّ blue: الأزرق الألوان الثانوية yellow: الأصفر aqua: المائيّ fuchsia: الفوشيّ maroon: الأجرّيّ orange: البرتقالي olive: الزيتوني purple: البنفسجيّ green: الأخضر navy: النيلي teal: تركواز تفاصيل أكثر قد يدعم متصفّحك ألوانًا مُسمّاة أكثر مثل: dodgerblue peachpuff firebrick aquamarine لتفاصيل أكثر عن هذه القائمة الموسّعة، اطّلع على كلمات ألوان SVG في وحدة ألوان CSS3. انتبه عند استخدام أسماء ألوان قد تكون غير مدعومة في متصفّحات جمهورك. لاستخدام ألوان أخرى، يمكن تحديد المكوّنات الثلاثة الرئيسيّة لأيّ لون، الأحمر والأخضر والأزرق، باستخدام إشارة الرّقم (#) متبوعة بثلاثة أعداد بنظام العدّ الستّعشري (hexadecimal) والّتي يُرمز لها بالرّموز بين 0 و9 ثمّ بين a وf، حيث تُشير الحروف بين a وf إلى القيم 10-15: الأسود: #000‎‎‏ ‎‎ ‎ الأحمر الخالص: #f00 الأخضر الخالص: ‎ #000‎ الأزرق الصّافي: ‎ #00f‎ ‎ الأبيض: ‎#000‎ يمكن أيضًا استخدام عددين ستّعشريّين لكلّ جزء من اللّون لتنوّع أكبر: الأسود: ‎ #000000‎‎‏‎ ‎ الأحمر الخالص: #ff0000 الأخضر الخالص: ‎ #00ff00‎ ‎ الأزرق الصّافي: ‎ #0000ff‎ ‎ الأبيض: ‎ #ffffff‎ ‎ مثال يمكنك بشيء من المِران تعديل قيم أرقام الألوان الثّلاثة يدويًّا لشتّى الاستخدامات: ابدأ بالأحمر الصّافي: ‎#f00 ثم اجعله أكثر شحوبًا، بإضافة بعض الأخضر والأزرق: ‎#f77 ثم اجعله أميل للبرتقالي بإضافة مزيد من الأخضر: ‎#fa7 ثم اجعله داكنًا بتخفيض كلّ مكوّناته: ‎#c74 ثم خفّض إشباعه بجعل مكوّناته أقرب في القيمة إلى بعضها: ‎#c98 وإذا جعلتها متساوية تمامًا فإنك تحصل على الرّماديّ: ‎#ccc للحصول على لون شاحب مائل للأزرق: ابدأ بالأبيض الصّافي: ‎#fff ثم خفّض المكوّنات الأخرى قليلًا: ‎#eef تفاصيل أكثر بإمكانك تحديد الألوان باستخدام أعداد بنظام العد العشريّ مستخدمًا قيمًا بين 0 و255، أو نسبًا مئويّة: مثلًا: هذا اللّون أحمر آجري: rgb(128, , ) لمزيد من التفاصيل عن كيفيّة تحديد الألوان، اطّلع على الألوان في معيار CSS. لمعلومات أكثر عن كيفية مطابقة ألوان القوائم والأزرار مع ألوان النّظام، اطّلع على ألوان النظام في CSS2 في معيار CSS. دورة تطوير واجهات المستخدم ابدأ عملك الحر بتطوير واجهات المواقع والمتاجر الإلكترونية فور انتهائك من الدورة اشترك الآن خصائص الألوان استخدمنا الخاصّة color سابقًا لتغير لون النّصّ. يمكن استخدام الخاصّة background-color لتغير خلفيّة العناصر. يمكن تعيين هذه الخاصّة إلى transparent في حال رغبنا بالنّص صراحةً على جعل الخلفيّة شافّة، ممّا يؤدّي إلى إظهار لون خلفيّة العنصر الأب. تدريب: استخدام رموز الألوان حرّر ملف CSS الّذي تتدرّب عليه. طبّق التغيّير المعروض أدناه لجعل الحروف الأولى ذات خلفيّة زرقاء شاحبة (قد يختلف أسلوب الكتابة والتّعليقات في ملفّك عمّا تراه هنا، لا بأس، أبِقها كما تحبّ). <p id = "first"> <strong>C</strong>ascading <strong class="spinach">S</strong>tyle <strong class="spinach">S</strong>heets </p> <p> <strong>C</strong>ascading <strong>S</strong>tyle <strong>S</strong>heets </p> /*** CSS Tutorial: Color page ***/ /* page font */ body { font: 16px "Comic Sans MS", cursive; } /* paragraphs */ p { color: blue; } #first { font-style: italic; } /* initial letters */ strong { background-color: #ddf; color: red; font: 200% serif; } .spinach { color: green; background-color: #ddf; } احفظ الملفّ وحدّث المتصفّح لترى النّتيجة: تمرين غيّر أسماء الألوان إلى الرّموز الثّلاثيّة التي توافقها في ملفّ CSS لديك دون أن تغيّر النّتيجة. (قد لا يمكن مطابقة الألوان بالضّبط، ولكن يمكن الوصول إلى ألوان مقاربة، لأنّ مطابقة الألوان تمامًا تتطلّب الرّموز السّداسيّة، وهذا يحتاج مراجعة معيار CSS أو استخدام أداة تنتقي اللّون). شاهد الحل القيم التالية هي تقريب معقول للألوان المُسمّاة: strong { color: #f00; /* red */ background-color: #ddf; /* pale blue */ font: 200% serif; } .carrot { color: #fa0; /* orange */ } .spinach { color: #080; /* dark green */ } p { color: #00f; /* blue */ } ما التالي؟ المحتوى والتنسيق منفصلان تمامًا في ملفّين، سنطّلع في الدّرس التّالي على كيفيّة عمل استنثاء لهذه القاعدة من خلال إضافة محتوى إلى صفحة ويب باستخدام CSS. ترجمة -وبتصرف- للمقال Color من سلسلة Getting started with CSS على شبكة مطوّري Mozilla.