كيفية إنشاء الرسوم المتحركة GIF في المصور. كيفية عمل الرسوم المتحركة في برنامج Adobe Illustrator. تصدير ملفات SWF من Illustrator

اليوم لدينا شيء غير عادي درس أدوبيالمصور. لأننا هذه المرة لن نصنع صورة ثابتة، بل رسمًا متحركًا حقيقيًا. تخيل، اتضح مع باستخدام أدوبييستطيع Illustrator أيضًا رسم الرسوم المتحركة :)

ولهذا لا نحتاج إلى شيء على الإطلاق. التنظيم السليم للطبقات وتصدير العمل النهائي إلى تنسيق swf، حيث يتم تحويل كل طبقة إلى إطار للرسوم المتحركة. في البرنامج التعليمي اليوم، سنقوم برسم رسوم متحركة للعد التنازلي بأسلوب فيلم قديم. يجب أن يكون الإخراج فيديو فلاش مع نفس العد التنازلي.

أول شيء عليك القيام به هو رسم جميع العناصر الضرورية للرسوم المتحركة المستقبلية. للقيام بذلك، في وثيقة منفصلة، ​​قمت بعمل موضعين لإطار الفيلم، ودائرة كمرجع، يتم تقطيعها إلى قطاعات منفصلة، ​​وملمس وخدش رأسي لإضافة تأثير العصور القديمة، بالإضافة إلى جميع الأرقام و النقوش.

عندما تكون جميع أجزاء الرسوم المتحركة لدينا جاهزة، يمكننا البدء في إنشاء الرسوم المتحركة نفسها. للراحة، من الأفضل القيام بذلك في مستند جديد. في هذه الحالة، سوف تلعب طبقاتنا دور إطارات الرسوم المتحركة. وفي الطبقة الأولى، تحتاج فقط إلى نسخ إطار الفيلم. ضعه في منتصف منطقة عملك.

الآن قم بإنشاء طبقة ثانية وانسخ فيها إطارًا من الفيلم، حيث يتم عمل الثقوب الموجودة على طول الحواف بإزاحة. يجب أيضًا وضعها في المركز.

من هاتين الطبقتين يمكنك بالفعل الحصول على رسوم متحركة لفيلم متحرك. ولكن في وقت لاحق سوف نحتاج إلى العديد من الطبقات. لذا حدد أول طبقتين، وانتقل إلى خيارات اللوحة وقم بعمل نسخة من الطبقات.

وبطريقة مماثلة، نحتاج إلى تجميع 12 طبقة من إطارات الفيلم التي تحدد حركته.

الآن لدينا مجموعة كاملة من الطبقات وكلها مرئية. بمعنى أن الطبقات العليا تحجب الطبقات السفلية، وهو أمر غير مناسب تمامًا للعمل. لذلك، يمكنك إيقاف تشغيل بعض الطبقات من خلال النقر على الأيقونة الموجودة على يسار اسم الطبقة. لإيقاف تشغيل جميع الطبقات أو تشغيلها مرة واحدة، اضغط مع الاستمرار على مفتاح Alt أثناء النقر على أيقونة العين. من خلال تشغيل الطبقات وإيقاف تشغيلها، يمكنك رؤية ما هو موجود بالضبط في إطار معين من الرسوم المتحركة المستقبلية. والآن، لكي نتمكن من إضافة ارتعاش طفيف إلى حركة الفيلم، نحتاج إلى تحريك الإطارات الناتجة قليلاً في اتجاهات مختلفة. للقيام بذلك، قم بتشغيل الطبقة التي ستعمل معها فقط. هذه اللحظة، ثم قم بتحريك الإطار بضع بكسلات في أي اتجاه.

بمجرد الانتهاء من جميع الطبقات وإضافة القليل من التحول، يمكنك البدء في إنشاء الرسوم المتحركة للدائرة المتحركة. للقيام بذلك، انسخ الدائرة المكونة من قطاعات من المستند مع الأجزاء الكرتونية وضعها على الطبقة الأولى أعلى إطار الفيلم.

إذا قمت بإلغاء تحديد الدائرة، فسوف تبدو وكأنها كل واحد. هذا هو بالضبط ما نحتاج إليه.

ولكن نظرًا لأنه يتكون من قطاعات فردية، يمكنك إنشاء رسوم متحركة بسرعة وسهولة عن طريق تغيير لونها. للقيام بذلك، انسخ هذه الدائرة إلى الطبقة الثانية واجعل القطاع الأول أفتح. تتذكر أن فيلمنا يهتز أثناء تحركه، لذلك ليس من الضروري على الإطلاق وضع الدائرة في وسط الإطار تمامًا. وضعه بالعين.

بطريقة مماثلة، تحتاج إلى نسخ الدائرة إلى كل طبقة تالية، مع طلاء قطاع واحد أكثر بلون أفتح من المرة السابقة. تشكل هذه الطبقات الـ 12 معًا رسمًا متحركًا للفيلم يتحرك بدائرة ملء.

بعد ذلك نحتاج إلى إضافة نسيج إلى طبقاتنا. قم بتشغيل الطبقة الأولى وانسخ النسيج من الملف الأصلي مع وجود قطع الغيار هناك.

ثم قم بتشغيل الطبقات التالية واحدة تلو الأخرى وانسخ نفس النسيج هناك. لجعله يبدو مختلفًا في كل إطار، ما عليك سوى تدويره بمقدار 90 درجة. كما كنت قد خمنت، نحن بحاجة إلى إضافة نسيج لجميع الإطارات الـ 12.

إذا كنت قد سئمت بالفعل من النسخ، فيمكنني إرضائك - لم يتبق سوى القليل جدًا. الجزء الصعب قد انتهى. كل ما تبقى هو إضافة خدوش رأسية وهذا كل شيء تقريبًا. للقيام بذلك، نقوم مرة أخرى بنسخ الصفر الأصلي ووضعه في مكان تعسفي في عدة طبقات. في حالتي، تظهر الخدوش في طبقتين فقط.

الآن بعد أن أصبحت الدورة الرئيسية للرسوم المتحركة للفيلم جاهزة، كل ما تبقى هو إضافة الأرقام. بما أن العد التنازلي لدينا يبدأ من 3 إلى 1 بالإضافة إلى كلمة Go!!!، فنحن بحاجة إلى المزيد من الطبقات. ليس 12، ولكن ما يصل إلى 48. للقيام بذلك، تحتاج إلى عمل ثلاث نسخ أخرى من الطبقات الجاهزة مع الرسوم المتحركة للفيلم.

وبعد ذلك كل شيء بسيط. قم بتشغيل الطبقة الأولى ووضع الرقم ثلاثة هناك.

ثم تحتاج إلى نسخ هذا الشكل إلى الطبقات التالية حتى تنتهي الرسوم المتحركة للدائرة. عندما تصل إلى النسخة التالية من الطبقات، حيث سيتم ملء الدائرة بالكامل مرة أخرى، تحتاج إلى وضع الرقم اثنين. بنفس الطريقة، انسخ الرقم واحد إلى الطبقات المطلوبة. وعندما تصل إلى الطبقات النهائية لنقش Go!!!، ما عليك سوى حذف الدائرة قبل نسخ النقش إلى الطبقة المطلوبة.

هذا كل شيء بالنسبة للرسوم المتحركة. الشيء الرئيسي هنا هو عدم الخلط. يمكنك إعطاء بعض الأسماء المناسبة للطبقات، لكنني كنت كسولًا نوعًا ما :) وأيضًا، عند الانتهاء من عملك، تأكد من إعادة تشغيل جميع الطبقات مرة أخرى من خلال النقر على أيقونة العين.

في نافذة إعدادات التصدير، تأكد من ضبط التصدير باسم: طبقات AI إلى إطارات SWF. هذا هو الخيار الذي يحول طبقات Illustrator إلى إطارات رسوم متحركة. بعد ذلك، انقر فوق الزر "خيارات متقدمة".

سوف تفتح إعدادات إضافية. هنا تحتاج إلى ضبط معدل الإطارات. لدي 12 إطارًا في الثانية. تعتبر خانة الاختيار Looping مسؤولة عن الرسوم المتحركة الدورية. بفضل ذلك، سيتم تشغيل الفيديو في دائرة. ويقوم خيار Layer Order: Bottom Up بإعادة إنتاج طبقات الرسام من الأسفل إلى الأعلى في اللوحة. هذا هو بالضبط كيف بنينا الرسوم المتحركة لدينا.

الإخراج هو فيديو فلاش مع الرسوم المتحركة لدينا.

الآن ترى ما يمكن أن تفعله الرسوم المتحركة البسيطة أدوبي المصورليست صعبة كما يبدو للوهلة الأولى.

ولكن لإنشاء مقاطع فيديو طويلة أو التطبيقات التفاعليةلا يزال أفضل للاستخدام برنامج أدوب فلاشأو برامج تحرير فلاش أخرى. على سبيل المثال، لقد صنعت هذه القطة في القديم ماكروميديا ​​فلاش، الذي حفرته في عملي.

أيضًا، يتم استخدام HTML5 وCSS3 مؤخرًا بشكل متزايد لإنشاء الرسوم المتحركة. هذا الرمز مدعوم من قبل المتصفحات الحديثة ولا يتطلب استخدام مشغل فلاش.

الرومانية الملقب dacascas خاصة بالنسبة للمدونة

اشترك في النشرة الإخبارية لدينا حتى لا يفوتك أي شيء جديد:

في الآونة الأخيرة، أصبحت أنواع مختلفة من الرسوم المتحركة لرسومات SVG (رسومات متجهة قابلة للتحجيم) على مواقع الويب والتطبيقات شائعة جدًا. هذا يرجع إلى حقيقة أن كل شيء أحدث المتصفحاتتدعم بالفعل هذا التنسيق. فيما يلي معلومات حول دعم المتصفح لـ SVG.

تتناول هذه المقالة أبسط مثال للرسوم المتحركة المتجهة بتنسيق SVG باستخدام البرنامج المساعد Jquery خفيف الوزن Lazy Line Painter.

مصدر

لإكمال هذه المهمة وفهمها بالكامل، من المستحسن المعرفة الأساسية بـ HTML وCSS وJquery، ولكنها غير مطلوبة إذا كنت تريد فقط تحريك SVG) فلنبدأ!

وهذه هي الخطوات التي يتعين علينا اتباعها:

قم بإنشاء بنية الملف الصحيحة

قم بتنزيل البرنامج المساعد وتوصيله

ارسم صورة مخططة رائعة في Adobe Illustrator

تحويل صورتنا إلى Lazy Line Converter

الصق الكود الناتج في main.js

أضف بعض CSS حسب الرغبة

1. قم بإنشاء بنية الملف الصحيحة
ستساعدنا خدمة التهيئة في هذا الأمر، حيث نحتاج إلى تحديد المعلمات كما في الصورة أدناه.

• الكلاسيكية H5BP (لوحة المرجل HTML5)
• لا يوجد قالب
• فقط HTML5 شيف
• مصغر
• دروس آي إي
• إطار كروم
• ثم انقر فوق تنزيله!

2. قم بتنزيل البرنامج المساعد وتوصيله

نظرًا لأن التهيئة تأتي مع أحدث مكتبة Jquery، من الأرشيف الذي نحتاج إلى تنزيله من مستودع مشروع Lazy Line Painter، نحتاج فقط إلى نقل ملفين إلى مشروعنا. الأول هو "jquery.lazylinepainter-1.1.min.js" (قد يختلف إصدار البرنامج المساعد) وهو موجود في جذر المجلد الناتج. والثاني هو example/js/vendor/raphael-min.js.

يتم وضع هذين الملفين في مجلد js. ونقوم بربطها بـ Index.html قبل main.js كما يلي:

3. ارسم صورة مخططة رائعة في Adobe Illustrator

ارسم صورتنا التفصيلية في Illustrator (أسهل طريقة للقيام بذلك هي باستخدام أداة القلم)

من الضروري ألا تغلق حدود رسمنا لأننا نحتاج إلى بداية ونهاية لتأثيرنا

لا ينبغي أن يكون هناك تعبئة

الحد الأقصى لحجم الملف – 1000×1000 بكسل، 40 كيلو بايت

لنقم بإجراء اقتصاص لحدود الكائن Object>Artboards>Fit To Artboards Bounds

احفظ بتنسيق SVG (إعدادات الحفظ القياسية جيدة)

على سبيل المثال، يمكنك استخدام الرموز الموجودة في المرفق.

4. قم بتحويل صورتنا إلى Lazy Line Converter
فقط اسحب الرمز الخاص بك إلى النافذة في الصورة أدناه.
يمكن تغيير سمك ولون المخطط التفصيلي وسرعة الرسوم المتحركة في الكود نفسه، والذي سيظهر بعد التحويل!

5. الصق الكود الناتج في main.js
الآن نقوم ببساطة بلصق الكود الناتج في ملف main.js فارغ
خيارات:
عرض السكتة الدماغية - سمك المخطط التفصيلي
لون السكتة الدماغية - لون المخطط التفصيلي
يمكنك أيضًا تغيير سرعة رسم كل متجه عن طريق تغيير قيم معلمة المدة (الافتراضي 600)

6. أضف بعض CSS حسب الرغبة
إزالة فقرة من ملف Index.html

مرحبا بالعالم! هذا هو HTML5 المعياري.

وبدلاً من ذلك نقوم بإدخال كتلة ستحدث فيها الرسوم المتحركة الخاصة بنا

ثم نضيف بعض CSS إلى ملف main.css لجعله يبدو أجمل:

Body (الخلفية:#F3B71C;) #icons (الموضع: ثابت؛ الأعلى: 50%؛ اليسار: 50%؛ الهامش: -300px 0 0 -400px;)

حفظ كافة الملفات.
الآن فقط افتح ملف Index.html في متصفح حديث واستمتع بالتأثير.

ملاحظة. عند البدء الجهاز المحليقد يكون هناك تأخير في بدء الرسوم المتحركة لعدة ثوان.

تحسين رسومات الويب

المعلومات الرسوميةيتم نقله بشكل أبطأ بكثير من النص، ويتناسب وقت تحميل الصور مع حجمها الملفات الرسومية. لذلك، يتطلب التحميل السريع لصفحات الويب حجمًا صغيرًا من الملفات المضمنة الصور الرسومية، والذي يتم تحقيقه من خلال تحسينها. يشير تحسين الصورة إلى تحويلها، مما يضمن الحد الأدنى لحجم الملف مع الحفاظ على جودة الصورة المطلوبة في هذه الحالة، والذي يتم تحقيقه بشكل أساسي عن طريق تقليل عدد الألوان في الصور الرسومية، واستخدام تنسيقات الملفات المضغوطة والخاصة، وتحسين معلمات الضغط للصورة الفردية فتات.

يحتوي Illustrator على أدوات تحسين الصور المضمنة التي تجعل عملية التحسين سريعة وفعالة مع مجموعة متنوعة من طرق المعاينة. تعطي المعاينة فكرة دقيقة إلى حد ما عما ستبدو عليه الصورة المحسنة في الوقت الفعلي، مما يساعدك على تقييم نتيجة التحسين واختيار الإعدادات الصحيحة بنجاح. ويمكنك تحسين كل من الصور التي تم إنشاؤها مباشرة في Illustrator، وغيرها، على سبيل المثال، الصور الفوتوغرافية التي من المفترض أن يتم وضعها على موقع ويب.

يتم تعيين معلمات التحسين في نافذة Save for Web، والتي يتم استدعاؤها بواسطة الأمر الذي يحمل نفس الاسم من القائمة File. يقدم لك البرنامج استخدام أحد أوضاع المعاينة الأربعة، لكن اثنين منهما مناسبان لتقييم جودة التحسين:

• 2-العرض (خياران) في وقت واحد للصورة الأصلية والمحسنة وفقا للإعدادات المحددة (الشكل 1)؛
• 4-Up (أربعة خيارات) في هذا الوضع، يتم تقسيم إطار العرض إلى أربع نوافذ (الشكل 2) لعرض الصورة الأصلية وثلاثة إصدارات من الصورة المحسنة: يتم إنشاء الإصدار الأول بناءً على قيم التحسين المحددة، ويتم إنشاء الإصدار الأول بناءً على قيم التحسين المحددة. الاثنان الآخران عبارة عن أشكال مختلفة لإعدادات التحسين الحالية.

يسمح لك كلا الوضعين بتوفير الوقت بشكل كبير في العثور على أفضل خيار للتحسين، حيث أنهما يلغي الحاجة إلى حفظ الصور بإعدادات تحسين مختلفة ومقارنتها المرئية اللاحقة. بالإضافة إلى ذلك، من الممكن تقييم ليس فقط جودة الصورة المحسنة، ولكن أيضًا حجمها ووقت التحميل من خلال خيارات اتصال مختلفة. للمقارنة، فإن الوضع الأكثر ملاءمة هو 4-Up (أربعة خيارات)، والذي يسمح لك بتقييم تأثير الضغط أو تقليل اللوحة بشكل مرئي على جودة الصورة وحجمها وتحديد أفضل معلمات التحسين في النهاية.

يتيح لك Illustrator تحسين رسومات الويب ليس فقط بتنسيقات GIF وJPG وPNG-8 وPNG-24، بل أيضًا بتنسيقات SWF وSVG. يتم حفظ الصور المفهرسة التي تحتوي على عدد صغير من الألوان بتنسيق GIF. يتم استخدام تنسيق JPG لحفظ الصور ذات الألوان الكاملة والتدرج الرمادي والصور الفوتوغرافية والرسومات الغنية بالألوان، مثل التعبئة المتدرجة. بالنسبة للصور ذات الألوان الكاملة ذات المساحات الشفافة، يتم استخدام تنسيق PNG، والذي يسمح لك بحفظ كل من الصور المفهرسة وذات الألوان الكاملة، بينما في تنسيق PNG-8 يكون الحد الأقصى لعدد الألوان الممكنة للصورة المحسنة هو 256، وفي تنسيق PNG-24 يمكن أن تحتوي الصورة على ملايين الألوان، وهذا هو سبب ظهورها تنسيق جبيغ. الفرق بين PNG-24 وJPEG هو أن طريقة الضغط المستخدمة لتحسين الصور بتنسيق PNG-24 لا تؤدي إلى فقدان الجودة، ولكن نتيجة لذلك يزداد حجم الملف. تجمع تنسيقات SVG وSWF بين الرسومات والنصوص والمكونات التفاعلية ويمكن تحسينها أيضًا.

دعونا نفكر مثال محددتحسين الصورة. لنفترض أن شعار موقع ويب تم تطويره باستخدام برنامج Illustrator (الشكل 3)، وتم حفظه في البداية بتنسيق AI. لن تؤدي محاولة تحسينها على الفور للويب إلى أي شيء جيد، لأنه في هذه الحالة سيتم اقتصاص الصورة تلقائيًا، والتي لن تأخذ في الاعتبار الموضع الحقيقي للنقش الناتج نتيجة للتشوه (الشكل 4 و 5).

لذلك، دعونا نحاول تصدير الشعار إلى تنسيق PSD باستخدام الأمر File=>Export (File=>Export) وسيكون حجم الصورة التي تم إنشاؤها 143 كيلو بايت. افتح ملف PSD الناتج واستخدم الأمر File=>Save for Web. مع الأخذ بعين الاعتبار العدد المحدود من الألوان الموجودة في الصورة، في هذه الحالة يكون تنسيق GIF هو الأمثل، ويجب تحديد الإعدادات المحددة له. ومن خلال تجربة الإعدادات يمكنك التأكد من ذلك أفضل جودةيعطي خوارزمية الضغط الافتراضية للبرنامج، انتقائية. أما بالنسبة للتجانس، نظرًا لوجود تعبئة متدرجة، فمن الأفضل اختيار خوارزمية لتوليد الضوضاء (الشكل 6). سيكون حجم ملف التحسين الناتج 6.729 كيلو بايت (الشكل 7)، في حين سيتم الحفاظ على شفافية الخلفية، وهو أمر يسهل التحقق منه عن طريق حفظ الصورة بتنسيق GIF مع ملف HTML (الشكل 8). ونتيجة لذلك، في هذا المثال، تم الحصول على الملفات Emblem.html و Emblem.gif في المجلد Primer1.

أزرار

أحد العناصر المحددة التي لا غنى عنها في تصميم أي صفحات ويب هي أزرار التحكم الرسومية. من المستحيل ببساطة تخيل صفحة بدونها. أصبح رسم الأزرار نوعًا خاصًا اليوم، ويتيح لك Illustrator إنشاء الخيارات الأكثر تعقيدًا. على سبيل المثال، تبدو الأزرار المصممة على شكل كائنات شبكية و/أو مع أقنعة متراكبة أكثر إثارة للإعجاب من الأزرار العادية.

فكر في خيار إنشاء زر مستدير ومحدب في Illustrator. ارسم كائنًا متجهًا على شكل دائرة مملوءة بلون عشوائي (الشكل 9) وقم بتحويله إلى شبكة باستخدام الأمر Object => Create Gradient Mesh (Object => Create a gradient Mesh)، مع تحديد أربعة صفوف وأربعة صفوف الأعمدة، وفي قائمة المظهر، حدد خيار To Center Highlight يساوي 60 (الشكل 10). حدد أداة التحديد المباشر وانقر في الزاوية اليسرى العليا من الكائن، مع تحديد نقاط الربط الموجودة هناك (الشكل 11). قم بتغيير لون الخلية المقابلة إلى اللون الأبيض عن طريق تحديدها في لوحة العينات (الشكل 12).

استخدم أداة Ellipse، ضع علامة الماوس في وسط الدائرة التي تم إنشاؤها من قبل، ثم اضغط مع الاستمرار على مفتاحي Alt و Shift، وقم بتمديد الدائرة الجديدة فوق الدائرة القديمة بحيث تكون أكبر بمقدار 1-2 بكسل من الدائرة القديمة على الإطلاق الجانبين. أعطها حدودًا سوداء (حدًا) بعرض 1-2 بكسل واملأها بتدرج نصف قطري في الاتجاه من الأحمر إلى الأبيض (الشكل 13). اسحب الكائن المتجه الذي تم إنشاؤه بمقدار 1-2 بكسل إلى اليمين وإلى الأسفل، ثم، دون إزالة التحديد، انقر بزر الماوس الأيمن عليه ثم أخرجه قائمة السياقحدد ترتيب=>إرسال إلى الخلف. ستكون النتيجة فارغة للزر كما هو موضح في الشكل. 14.

كقاعدة عامة، يوجد في أي صفحة ويب عدة أزرار من نفس النوع، تختلف، على سبيل المثال، فقط في اتجاه الأسهم المرسومة عليها، مما يشير إلى اتجاه الحركة حول الموقع. لنفكر في أبسط حالة تتمثل في وجود زرين، أحدهما به سهم لأسفل يعني الانتقال إلى الصفحة التالية، والزر الذي به سهم لأعلى يعني الانتقال إلى الصفحة السابقة. كقالب سهم، لنأخذ مثلثًا عاديًا، مرسومًا باستخدام أداة المضلع، مطليًا باللون الأسود، وللحصول على تأثير أكبر، تم تصميمه أيضًا ككائن شبكي. حرك السهم إلى الزر واضبط موضع جميع الكائنات بالنسبة لبعضها البعض باستخدام الأزرار المقابلة في لوحة المحاذاة. يظهر أول الأزرار الناتجة في الشكل. 15. لنقم بعمل نسخة من الطبقة باستخدام الزر عن طريق تحديد الأمر Duplicate Layer Layers، ونتيجة لذلك سنحصل على طبقتين متطابقتين. ثم حدد السهم الموجود على نسخة الطبقة وقم بتدويره بمقدار 180 درجة عن طريق تحديد الأمر Transform=>Rotate Transformation=>Rotate من قائمة السياق. سوف نحصل على نفس الزر كما هو موضح في الشكل. 16. يرجى ملاحظة أنه من الملائم أكثر تخزين نفس نوع الأزرار لمشروع واحد في ملف واحد على طبقات مختلفة، وهو ما تم توضيحه في هذه الحالة.

أنت الآن بحاجة إلى حفظ الإصدارات المحسنة لكل زر. قم أولاً بجعل الطبقة السفلية غير مرئية، وفي هذه الحالة سيتم الحفاظ على الزر الموجود في الطبقة العليا. حدد الأمر File=>Save for Web، وقم بتكوين معلمات تحسين الزر، على سبيل المثال، كما هو موضح في الشكل. 17، انقر فوق الزر حفظ وأدخل اسم الملف. يظهر الزر المحفوظ في النهاية في الشكل. 18. الآن أعد الرؤية إلى الطبقة السفلية، واجعل الطبقة العليا غير مرئية واحفظ الزر الثاني بنفس الطريقة، مع إعطائه اسمًا مختلفًا. وتظهر النتيجة في الشكل. 19.

الآن كل ما تبقى هو التأكد من أن الأزرار تبدو مقبولة تمامًا على صفحة الويب ووضعها على صفحة مخصصة (الشكل 20). ونتيجة لذلك، في هذا المثال، تم الحصول على الملف Primer2.html وصورتين رسوميتين في مجلد الصور (مجلد Primer2).

إذا رغبت في ذلك، فمن السهل تحويل الزر إلى شريحة أثناء عملية التحسين. في هذه الحالة، بعد تحديد الأمر File=>Save for Web (File=>Save for Web) وتعيين معلمات التحسين، يجب عليك تحديد أداة Slice Select من لوحة الأدوات والنقر نقرًا مزدوجًا فوق الصورة، مما سيؤدي في النهاية إلى تتحول تلقائيًا إلى شريحة برقم تسلسلي 1 (الشكل 21). سيؤدي النقر المزدوج مرة أخرى إلى فتح نافذة خيارات الشريحة، حيث ستحتاج إلى تحديد رابط وتغيير اسم الشريحة بشكل اختياري (الشكل 22)، ثم حفظ الصورة المحسنة. ستكون النتيجة في هذه الحالة هي الملفات Primer3.html (الشكل 23) و Primer3.gif (مجلد Primer3).

العناصر التفاعلية

إحدى الطرق لإضفاء الحيوية على الصفحة هي تقديم عناصر التصميم التي تغيرها مظهر(أو الحالة) اعتمادًا على سلوك الماوس أو، في كثير من الأحيان، في حالة حدوث أي مواقف أخرى: القياس، والتمرير، والتحميل، والأخطاء، وما إلى ذلك.

من بين هذه العناصر، الأكثر شهرة هي عناصر التمرير (من Roll Over Roll Over، Turn Over) التي تغير مظهرها تحت تأثير الماوس. من أمثلة عمليات التمرير النموذجية الأزرار المتحركة. غالبًا ما يتم استخدام عمليات التمرير عند إنشاء عناصر تنقل أخرى لموقع الويب. في الواقع، أي تمرير ليس صورة واحدة، بل عدة صور (حتى أربع)، كل منها يتوافق مع حدث معين. تعتبر الأحداث الرئيسية كما يلي: عادي الحالة الطبيعية، تمرير مؤشر الماوس فوق أحد العناصر والضغط لأسفل على زر الماوس الأيسر عند تمرير المؤشر فوقه. من الناحية النظرية، يمكن تضمين أحداث مثل النقر على زر الفأرة الأيسر بعد النقر، أو لأعلى بعد تحرير الزر، أو الخروج عند مغادرة المنطقة النشطة. ومع ذلك، من الناحية العملية، غالبًا ما يقتصر الأمر على تغيير العنصر فقط للأحداث الثلاثة الأولى أو حتى الحدثين.

الانقلابات الكلاسيكية

بالمعنى الكلاسيكي، يعد التمرير عبارة عن سلسلة من الصور الرسومية بتنسيق GIF ورمز HTML المقابل، والذي بفضله، اعتمادًا على سلوك الماوس، تحل صورة محل أخرى في نافذة المتصفح.

ليس المقصود من Illustrator إنشاء عمليات التمرير بشكل مباشر بالمعنى الكلاسيكي، ولكنه يمكن أن يساعد في تطوير العناصر الأولية لها. الفكرة في هذه الحالة هي إنشاء طبقة مع الصورة المقابلة للحدث الأول. ثم قم بعمل نسخة من الطبقة وقم بتحويل الصورة لتتناسب مع الحدث الثاني وهكذا. يتم تصدير الصورة متعددة الطبقات الناتجة إلى ملف PSD مع الاحتفاظ بالطبقات، والتي على أساسها يتم إنشاء التمرير في برنامج Image Ready. تتمثل ميزة استخدام برنامج Illustrator، كما هو الحال في العديد من الحالات الأخرى، في عدد من ميزاته المثيرة للاهتمام التي لا تتوفر في برامج أخرى برمجة، بالإضافة إلى سهولة تحويل الرسومات المتجهة.

دعونا نحاول إنشاء تمرير على شكل نقش يتغير لونه اعتمادًا على سلوك الماوس. افتح برنامج Illustrator وقم بإنشاء شكل على شكل مستطيل مستدير مملوء باللون الأسود (الشكل 24)، وقم بعمل نسخة منه ووضعه في الجزء الحر من الشاشة. قم بتحويل النسخة الأولى من المستطيل إلى كائن شبكي مع تمييز في المنتصف (الأمر Object=>إنشاء كائن شبكة متدرجة=>إنشاء شبكة متدرجة)، مع تحديد أربعة صفوف وعشرة أعمدة (الشكل 25). قم بتنشيط النسخة الثانية من المستطيل واضبطه على تعبئة متدرجة تقريبًا كما هو موضح في الشكل. 26. قم بتراكب كائن التدرج أعلى الشبكة، وتقليل عتامة كائن التدرج إلى حوالي 80%، والحجم بحوالي 1 بكسل لمحاكاة تأثير النتوء في النهاية. ثم قم بطباعة النقش أعلى الكائنات. في شكلها الأصلي، فليكن لها لون أبيض، والذي يتوافق مع الحالة العادية (الشكل 27)، وبعد ذلك عندما تتغير حالة التمرير، سيتغير لون النقش، على سبيل المثال، إلى اللون الأخضر عند وضع علامة الماوس يتم تمرير مؤشر الماوس فوقها (فوق الحالة) وإلى اللون الأزرق عند الضغط على زر الماوس (الحالة السفلية).

انتبه إلى لوحة الطبقات، ففي هذه المرحلة لا يوجد سوى طبقة واحدة فيها. قم بعمل نسختين من هذه الطبقة باستخدام أمر Duplicate Layer من قائمة لوحة الطبقات، سيكون هناك ثلاث طبقات في اللوحة (الشكل 28). ثم في النسخة الأولى من الطبقة قم بتغيير لون النقش إلى اللون الأخضر، وفي النسخة الثانية إلى اللون الأزرق (الشكل 29). ونتيجة لذلك، سيتم الحصول على الفراغ اللازم للتمرير.

قم بتصدير الصورة التي تم إنشاؤها إلى تنسيق PSD، مع الحفاظ على الطبقات، باستخدام الأمر File=>Export وتحديد نموذج ألوان RGB (الشكل 30). افتح ملف PSD الذي تم إنشاؤه في برنامج ImageReady (الشكل 31 و32). قم بإنشاء إطارات بناءً على الطبقات عن طريق تحديد أمر Make Frames From Layers من قائمة لوحة الرسوم المتحركة. ستظهر نافذة الرسوم المتحركة كما في الشكل. 33. في هذه الحالة، سيتم في البداية إنشاء حالة عادية واحدة في لوحة التمريرات.

بعد ذلك، في نافذة الرسوم المتحركة، حدد الإطار المطابق للحالة المستحثة، وسيتم تحديد طبقة نسخ الطبقة الأولى تلقائيًا في لوحة الطبقات (الشكل 34). انتقل إلى لوحة التمريرات وانقر على زر إنشاء حالة التمرير (إنشاء حالة التمرير) الشكل. 35، مما سيؤدي إلى ظهور حالة Over State في لوحة Rollovers (الشكل 36). قم بإنشاء حالة Down State بنفس الطريقة. قم بتنشيط الحالة العادية في لوحة Rollovers واحذف جميع الإطارات في لوحة الرسوم المتحركة باستثناء الإطار الذي يجب أن يتوافق مع الحالة العادية. ونتيجة لذلك، سيكون هناك إطار واحد فقط لكل حالة تمرير في لوحة الرسوم المتحركة (الأشكال 37 و38 و39).

أرز. 38. عرض الصورة ونافذة الرسوم المتحركة ولوحات الطبقات والتحولات لحالة Over State

تحقق من النتيجة بالنقر فوق الزر Preview in Default Browser الموجود على شريط الأدوات والانتقال إلى نافذة المتصفح (الشكل 40). بعد ذلك، احفظ الملف باستخدام الأمر File=>Save Optimized وتحديد خيار HTML والصور (*.html). ونتيجة لذلك، في هذا المثال، تم الحصول على الملف Primer4.html وسلسلة من الصور الرسومية في مجلد الصور.

أرز. 40. نافذة المتصفح مع عنصر التمرير

التمريرات SVG

تنسيق SVG (رسومات المتجهات القابلة للتطوير) الذي يحظى بشعبية متزايدة رسومات فيكتور)، الذي تم إنشاؤه بناءً على معيار XML، يسمح لك أيضًا بتلقي مجموعة متنوعة من العناصر التفاعلية، ولا سيما عمليات الانتقال، ولكن من الناحية العملية يتم تنفيذ ذلك بشكل مختلف تمامًا. تجدر الإشارة إلى أن إنشاء عمليات تمرير SVG تفاعلية، على عكس الكلاسيكية، عندما يتم إنشاء كود HTML المقابل تلقائيًا بالكامل، يتطلب معرفة لغة JavaScript وفهم المبادئ الأساسية للبرمجة الموجهة للكائنات.

للعمل مع كائنات SVG توجد لوحة خاصة لتفاعل SVG، والتي يمكن فتحها بسهولة باستخدام الأمر Window => SVG Interactivity (Window => SVG Interactivity) الشكل. 41.

لنفكر في هذا الخيار لإنشاء تمرير فوق مثال الزر التفاعلي، الذي سيتغير لون النقش عليه من الأسود إلى الأزرق عند تحريك الماوس ويتحول مرة أخرى إلى اللون الأسود عندما يغادر الماوس المنطقة النشطة.

أنشئ زرًا مستطيلًا بحواف مستديرة وحدد تعبئة متدرجة مناسبة له، على سبيل المثال كما هو موضح في الشكل. 42. اضبط شفافية الزر في لوحة الشفافية، في هذا المثال، تم ضبط قيمة العتامة على 50%. قم بعمل نسخة من الزر، واملأه باللون الأخضر الداكن (الشكل 43)، ثم قم بتحويله إلى كائن شبكي باستخدام الأمر Object => Create Gradient Mesh، مع تحديد أربعة صفوف وعشرة أعمدة، وفي قائمة المظهر (عرض) عن طريق تحديد خيار To Center وتعيين قيمة Highlight على 100. قم بتقليل عتامة الطبقة مع كائن الشبكة إلى حوالي 40% (الشكل 44). ضع كائن شبكي فوق كائن متدرج، وسيشبه الزر الزر الموضح في الشكل. 45.

أرز. 44. قم بتحويل نسخة من الزر إلى كائن شبكي

أكمل الزر بالنقش المقصود واضبط موضعه باستخدام الأزرار المقابلة في لوحة المحاذاة. ستحتوي الصورة الناتجة على طبقة واحدة بها ثلاثة كائنات متراكبة فوق بعضها البعض (الشكل 46). ستكون الأحداث المجدولة مرتبطة بكائن نصي، لذلك، من أجل الراحة، قم بتغيير اسمه إلى نص عن طريق النقر المزدوج فوق الكائن وإدخال اسم جديد. وبالمثل، قم بتغيير اسم الطبقة من الطبقة 1 إلى الطبقة (الشكل 47).

تتضمن معالجة الأحداث استخدام إجراءات JavaScript، لذلك تحتاج إلى تضمين ملف يصف هذه الإجراءات. يطلق عليه Events.js ويتم حفظه على القرص في المجلد Sample Files\Sample Art\SVG\SVG عند التثبيت برامج أدوبيالمصور. لتوصيل ملف Events.js، استخدم أمر JavaScript Files SVG Interactivity (الشكل 48). بعد ذلك، تحتاج إلى النقر فوق الزر "إضافة" والعثور على الملف المطلوب على محرك الأقراص الثابتة لديك. عندما يظهر اسمه في حقل URL (الشكل 49)، انقر فوق الزر "تم".

أرز. 48. اختيار أمر ملفات جافا سكريبت

بعد ذلك، تحتاج إلى تحديد استجابة لأحداث الماوس لكائن النص. حدد كائن النص، في حقل الحدث بلوحة SVG Interactivity، حدد الحدث onmouseover elemColor(evt, "Text", "#3333FF") وهذا يعني أنه عندما يكون الماوس فوق كائن النص، سيتغير لونه إلى الأزرق (الشكل 50 ). لكي يتغير لون النص إلى اللون الأسود بعد مغادرة الماوس للمنطقة النشطة، ستحتاج إلى إنشاء حدث آخر عند خروج الماوس وتحديده في حقل الحدث بلوحة SVG Interactivity. ثم في سطر الإجراء، أدخل النص elemColor(evt, "Text", "#000000") وهذا سيعيد اللون إلى الأسود (الشكل 51).

أرز. 51. المظهر النهائي للوحة SVG Interactivity لكائن النص

احفظ التمرير الذي تم إنشاؤه كملف SVG باستخدام الأمر File=>Save as (File=>File type SVG format، ثم قم بتعيين الخيارات لحفظ ملف SVG كما هو موضح في الشكل 52. بعد الحفظ، ستتلقى واحدًا فقط ملف واحد بامتداد SVG، وليس اثنين، كما في حالة التمرير الكلاسيكي، في هذه الحالة تم استلام الملف Primer5.svg (مجلد Primer5).ومع ذلك، لكي يعمل التمرير حقًا، يجب عليك نسخه بالإضافة إلى ذلك ملف Events.js من وصف إجراءات JavaScript، وبعد ذلك يمكنك التحقق من وظيفة التمرير، وستبدو النتيجة كما هو موضح في الشكل 53.

الرسوم المتحركة SVG

يمكن أيضًا استخدام تنسيق SVG لنقل الرسوم المتحركة. دعونا نحاول إنشاء عنصر متحرك بسيط (في هذه الحالة سيكون معلومات حول الشركة)، والذي سيظهر على الشاشة عند تحريك الماوس فوق الكائن الرسومي المقابل ويختفي عند إزالة الماوس من العنصر التفاعلي.

لنقم بإنشاء السلسلة التالية تقريبًا من الكائنات الرسومية والنصية، كما هو موضح في الشكل. 54. دعونا نعيد تسمية جميع الكائنات التي تم إنشاؤها بطريقة مناسبة عن طريق النقر بالتسلسل على اسم الكائن التالي في لوحة الطبقات وإدخال الاسم المطلوب(الشكل 55). يرجى ملاحظة أن تلك الموضحة في الشكل. 56 كائنًا، سيكون النص 1 والنص 2 والنص 3 والمسار 1 مرئيًا دائمًا، وجميع الكائنات الأخرى فقط عند تحريك الماوس فوق الكائن النص 1.

أرز. 54. العرض الأصلي للصورة

قم بتضمين ملف Events.js الذي يصف إجراءات JavaScript باستخدام أمر JavaScript Files من لوحة SVG Interactivity، والنقر فوق الزر "إضافة"، والإشارة إلى الملف المطلوب على محرك الأقراص الثابتة لديك، والنقر فوق الزر "تم".

تعريف استجابة لأحداث الماوس لكائن Text1. حدد كائن النص، في حقل الحدث بلوحة SVG Interactivity، حدد حدث onmouseover وفي السطر أدناه أدخل النص elemShow(evt, "Text4"); elemShow(evt, "Path2") . ونتيجة لذلك، عندما يكون الماوس فوق كائن Text1، سيصبح كائنا Text4 وPath2 مرئيين. يرجى ملاحظة أنه إذا كان يجب تنفيذ العديد من الإجراءات عند وقوع حدث ما، فيجب تحديدها باستخدام علامة "؛". ثم قم بإجراء عملية مماثلة لحدث onmouseout، عن طريق إدخال النص الخاص به، مما يعني إخفاء الكائنات (الشكل 57).

احفظ النتيجة كملف SVG باستخدام الأمر File=>Save as، مع تحديد اسم الملف، وتحديد تنسيق SVG في حقل نوع الملف، ثم ضبط الخيارات لحفظ ملف SVG وفقًا للشكل 1. 58. بعد الحفظ، سيتم استلام ملف Primer6.svg (مجلد Primer6). لا تنس نسخ ملف Events.js إلى المجلد الذي يحتوي على هذا الملف. إذا قمت بعد ذلك بتشغيل coz هذا الملفثم ستظهر لك النتيجة الموضحة في الصورة. 59. هذا هو ما تحتاجه تقريبًا. الشيء الوحيد الذي لم يتم تضمينه في خططنا هو المظهر الأولي لكائنات النص 4 والمسار 2 عند التحميل. للتخلص من هذا العيب، حدد كلا بيانات الكائن مرة واحدة وقم بإنشاء إجراء لهما elemHide(evt, "Text4"); elemHide(evt, "Path2") في حدث التحميل (الشكل 60). احفظ الملف مرة أخرى وتأكد من أن كائني Text4 وPath2 أصبحا مرئيين الآن فقط عند المرور فوق كائن Text1.

الرسوم المتحركة جيف

لا يمكن تصور أي صفحة ويب بدون الرسوم المتحركة على الويب، بما في ذلك الصور المتحركة. أحد الخيارات لإنشائها هو استخدام تطبيق Adobe ImageReady، الذي يسمح، من بين أمور أخرى، بإنشاء رسوم متحركة من الطبقات. في هذه الحالة، يمكن إعداد الصورة متعددة الطبقات نفسها في تطبيقات مختلفة، بما في ذلك Adobe Illustrator.

من السهل جدًا إنشاء رسم متحرك استنادًا إلى عناصر من لوحة الرموز، المفتوحة باستخدام أمر Window=>Symbols، أو من إحدى مكتبات الرموز التي يمكن فتحها باستخدام أمر Window=>Symbol Libraries. ).

على سبيل المثال، سنحاول زيادة حجم أي كائن رمز، ويجب تعيين المراحل الرئيسية لعملية زيادة الكائن على طبقات منفصلة. أولاً، قم ببساطة بوضع كائنات الرمز واحدًا فوق الآخر، ثم قم بزيادة حجم كل كائن لاحق، على سبيل المثال كما هو موضح في الشكل. 61. نتيجة لذلك، سيتم إنشاء طبقة واحدة تحتوي على العديد من الكائنات في لوحة الطبقات (الشكل 62). إذا قمت بتصدير هذه الصورة مباشرة إلى تنسيق PSD، فلن تعطي أي شيء، حيث توجد طبقة واحدة فقط، وبطبيعة الحال، عند فتح ملف PSD في برنامج ImageReady، سيكون هناك طبقة واحدة فقط. ولذلك، يجب عليك أولاً وضع الكائنات على طبقات مختلفة. يمكن القيام بذلك طرق مختلفةأسهل طريقة هي أولاً تحديد الطبقة 1 في لوحة الطبقات واستخدام أمر الإصدار إلى الطبقة. ستكون النتيجة أن كل كائن سيتم نقله إلى طبقته الخاصة، ولكن سيتم تداخلها جميعًا في الطبقة الأولى. لذلك، سيتعين عليك بعد ذلك سحب جميع الطبقات المتداخلة يدويًا إلى أعلى لوحة الطبقات بحيث تكون فوق طبقة الطبقة الأولى، ثم قم ببساطة بحذف طبقة الطبقة الأولى الفارغة الآن (الشكل 63). قم بتصدير الصورة إلى تنسيق PSD باستخدام الأمر File=>Export مع الإعدادات كما في الشكل. 64.

قم بتحميل ملف PSD الذي تم إنشاؤه في برنامج ImageReady (الشكل 65 و66). افتح قائمة لوحة الرسوم المتحركة Make Frames From Layers. ونتيجة لذلك، سيتم إنشاء خمسة إطارات، كل منها سوف يتوافق مع الطبقة الخاصة به، وسوف تبدو نافذة لوحة الرسوم المتحركة في الشكل. 67.

بعد ذلك، قم بتعيين مدة كل إطار من الإطارات التي تم إنشاؤها في هذه الحالة، يتم ضبط المدة لجميع الإطارات على 0.2 ثانية. ثم قم بحفظ الرسوم المتحركة مع التحسين باستخدام الأمر File=>Save Optimized (File=>Save with optimization). قد تشبه النتيجة الناتجة الشكل. 68.

إنه أكثر ملاءمة للحصول على الفراغات التي يمكن بعد ذلك تحويلها بسهولة إلى رسوم متحركة في ImageReady لاستخدام وظائف Live Blends في Illustrator. يؤدي هذا الاستخدام المشترك لبرنامجي Illustrator وImageReady إلى تسريع عملية إنشاء صور GIF المتحركة بشكل ملحوظ.

على سبيل المثال، ارسم كائنين تعسفيين متعددي الألوان، ثم قم بتوصيلهما برابط مزيج مع المعلمات المناسبة (الشكل 69). من المستحيل استخدام هذا الملف مباشرة لإنشاء رسوم متحركة، حيث أن الصورة موجودة في طبقة واحدة (الشكل 70). لذلك، سوف تحتاج أولاً إلى وضع كل عنصر من كائن المزج على طبقة منفصلة. للقيام بذلك، في نافذة الطبقات، حدد الخط، وقم بتنشيط قائمة اللوحة من خلال النقر على السهم الأسود في الزاوية اليمنى العليا، وحدد أمر الإصدار إلى تسلسل الطبقات (الشكل 71). اضغط مع الاستمرار على مفتاح Shift، وحدد الطبقات التي تم إنشاؤها وضعها فوق طبقة الطبقة الأولى، ثم احذف طبقة الطبقة الأولى نفسها، ونقلها إلى سلة المهملات نتيجة لذلك، وستتخذ لوحة الطبقات نفس الشكل كما في الشكل. 72.

أرز. 70. الحالة الأوليةنوافذ الطبقات

قم بتصدير الملف الذي تم إنشاؤه إلى تنسيق PSD باستخدام الأمر File=>Export. افتح ملف PSD الذي تم إنشاؤه في برنامج ImageReady (الشكل 73). يرجى ملاحظة أن جميع الطبقات التي تم إنشاؤها في Illustrator ستظهر في نافذة الطبقات (الشكل 74)، وفي نافذة الرسوم المتحركة سيكون هناك إطار واحد فقط في الوقت الحالي.

قم بتنشيط قائمة لوحة الرسوم المتحركة من خلال النقر على السهم الأسود الموجود في الزاوية اليمنى العليا من اللوحة وحدد أمر Make Frames From Layers. ونتيجة لذلك، في هذا المثال، سيتم إنشاء خمسة إطارات، وستأخذ نافذة لوحة الرسوم المتحركة النموذج وفقا للشكل. 75. حدد جميع الإطارات أثناء الضغط باستمرار على مفتاح Shift وقم بتعيين مدة الإطار المناسبة في هذا المثال، يتم أخذ نفس الوقت بمقدار 0.2 ثانية لكل إطار. ثم احفظ الملف مع التحسين باستخدام الأمر File=>Save Optimized (File=>Save with optimization)، وقم بتعيين الخيار Images Only (*.gif) في قائمة أنواع الملفات. الرسوم المتحركة سوف تشبه الشكل. 76.

ما يبدو أكثر إثارة للاهتمام ليس الحركة، ولكن تغيير الحجم السلس لكائنات المزج. على سبيل المثال، يمكنك استخدام انتقال المزج الذي تم إنشاؤه بالفعل. في هذه الحالة، بعد إنشاء طبقات منفصلة لكل عنصر انتقالي للمزج، ضع جميع الكائنات فوق بعضها البعض باستخدام أزرار Horizontal Align Center و Vertical Align Center في لوحة Align (الشكل 77) .

قم بتصدير الملف الذي تم إنشاؤه إلى تنسيق PSD (File=>Export File=>Export) وافتح ملف PSD الذي تم إنشاؤه في برنامج ImageReady (الشكل 78). قم بإنشاء إطارات رسوم متحركة بناءً على الطبقات (إنشاء إطارات من الطبقات، إنشاء إطارات من الطبقات) وحدد المدة المناسبة لها (الشكل 79). وبعد ذلك، لجعل الرسوم المتحركة أكثر فعالية، انسخ الإطارات الموجودة، ولكن بترتيب عكسي بحيث تزيد الصورة أولا، ثم تنخفض، وهكذا في دائرة (الشكل 80). ثم احفظ ملف التحسين (ملف=>حفظ الملف المحسّن=>حفظ مع التحسين). تظهر الرسوم المتحركة الناتجة في الشكل. 81.

أرز. 80. حالة نافذة الرسوم المتحركة بعد تكرار الإطارات

أرز. 81. الرسوم المتحركة النهائية

يتم إنشاء صورة GIF شفافة في Adobe Illustrator على النحو التالي. انتقل إلى القائمة ملف > حفظ للويب والأجهزة (Alt+Ctrl+Shift+S). في النافذة التي تفتح، في الحقل تنسيق الملف المحسّن، يجب عليك أولاً الانتقال إلى علامة التبويب حجم الصورة. الحقيقة هي أنه بشكل افتراضي يتم تضمين الصفحة بأكملها في نافذة التحسين، وهذا ليس ضروريًا عادةً. لذلك، في علامة التبويب حجم الصورة، قم بإلغاء تحديد خانة الاختيار Clip to Artboard وانقر فوق الزر Apply.

ثم حدد GIF من قائمة تحديد التنسيق وحدد مربع الاختيار الشفافية.

بعد ذلك، سوف نحدد الألوان التي ستكون شفافة. جميع الألوان الموجودة في الصورة موجودة في علامة التبويب Color Table ويتم عرضها كمربعات ملونة. حدد أداة Eyedropper من شريط الأدوات الموجود على الجانب الأيسر من النافذة.

هناك طريقتان لتحديد الألوان. أسهل طريقة هي تحديد لون باستخدام القطارة مباشرة على الصورة - بعد ذلك، سيتم إبراز اللون على جدول الألوان بضربة داكنة. حسنًا، إذا كنت تعرف بالضبط اللون الذي يجب أن يكون شفافًا، فيمكنك تحديده مباشرة على جدول الألوان من خلال النقر على المربع الملون المقابل. في كلتا الحالتين الأولى والثانية، إذا كنت بحاجة إلى تحديد عدة ألوان، فأنت بحاجة إلى العمل مع الضغط على مفتاح Shift (أو Ctrl). بعد اختيار اللون، تحتاج إلى توجيه البرنامج لجعله شفافًا. للقيام بذلك، انقر فوق أيقونة خرائط الألوان المحددة للشفافية. في الصورة، هذا الزر محاط بدائرة وتم ضبط اللون الأحمر على اللون الشفاف. ستظهر منطقة شفافة في الصورة، وسيغير المربع الموجود على جدول الألوان مظهره - وسيصبح جزء منه مثلثًا أبيض. لإلغاء اللون المحدد، تحتاج إلى تحديده في جدول الألوان، ثم النقر فوق أيقونة تعيين الألوان المحددة إلى شفافة مرة أخرى.

بضع كلمات حول طريقة ضبط الشفافية. وهي مسؤولة عن القائمة المنسدلة تحديد خوارزمية ثبات الشفافية، باللغة الروسية - خوارزمية لمحاكاة الشفافية (الشكل أدناه). هناك أربعة خيارات: عدم ثبات الشفافية، وثبات شفافية الانتشار، وثبات شفافية النمط، وثبات شفافية الضوضاء. في وضع خوارزمية الانتشار، يصبح شريط تمرير المبلغ نشطًا، مما يسمح لك بتغيير قيمة الانتشار. ما يجب تطبيقه في الممارسة العملية؟ اعتمادا على الغرض والصورة. لا أستخدم هذا الخيار وأتركه دائمًا على الوضع الافتراضي - لا توجد شفافية.

انقر فوق "حفظ" - ملف GIF الشفاف جاهز. تم تنفيذ العمل في إصدار Adobe Illustrator CS4 (الإصدار 14)، ولكن جميع الإجراءات واختصارات لوحة المفاتيح ذات صلة أيضًا بالإصدار السابق CS3 (الإصدار 13).

أدوبي المصور و After Effects
استيراد و رسوم متحركة بسيطةمرحبًا. اليوم نحن ننظر إلى الرسوم المتحركة البسيطة في After Effects.

الموارد: برنامج Adobe Illustrator CC
أدوبي بعد الأثر CC

لنبدأ بالتعلم من خلال الرسم في Illustrator.

هيا نرسم
1) ارسم مستطيلاً أصفر كخلفية

الشكل 1 - المستطيل

2) ارسم دائرة واملأها بالتدرج
دعونا نعمل قليلا على الدائرة:
- احذف النقطة السفلية على الكفاف، نحصل على قوس؛
- نرسم خطًا مستقيمًا، ونغلق الجزء السفلي من القوس، ونحصل على نصف دائرة

الشكل 2 - 1) رسم الدائرة؛ 2) التدرج. 3) حذف النقطة

3) ارسم مستطيلاً واصنع نسخة منه
- مستطيل رمادي واحد؛
- مستطيل آخر باللون الرمادي الداكن
4) ارسم مثلثًا من علامة النجمة عن طريق ضبط عدد الأشعة على 3

الشكل 3 - 1) الضوء المستقيم؛ 2) الظلام المستقيم. 3) المثلث

5) ارسم قطة باستخدام القلم والأشكال البسيطة

الشكل 4 - 1) الرأس؛ 2) الرقبة. 3) الجسم. 4) الساق. 5) الذيل

والآن اللحظة الأكثر أهمية
لنقم بتوزيع الصور إلى طبقات (ما سيتم تحريكه موجود في طبقة منفصلة) مثل هذا:

الشكل 5 - جميع الصور (وضع علامة حمراء على الطبقات المهمة)

هذا كل شيء، الآن دعونا نحفظ.
دعونا نلقي نظرة على إعدادات الحفظ

الشكل 6 - حفظ

والآن المرحلة التالية. أغلق Adobe Illustrator وافتح After Effects.

استيراد إلى After Effects
ملف - استيراد - ملف - حدد ملف Illustrator المحفوظ لدينا.
لنختار استيراد الطبقات من Illustrator؛ إذا قمنا بإضافة لقطات، فسنحصل على صورة ذات طبقات مدمجة، لكننا لسنا بحاجة إلى ذلك.

الشكل 7 - الاستيراد كتركيبة

هذا كل شيء، مستورد.
الآن دعونا نرى ما لدينا. انقر نقرًا مزدوجًا فوق التركيبة حتى تفتح ونرى الطبقات (إذا تم كل شيء بشكل صحيح، فستكون هناك عدة طبقات). لقد حصلنا على هذا، انظر الشكل

الشكل 8 - التكوين المفتوح

والآن ما نحن هنا اليوم هو الرسوم المتحركة.

الرسوم المتحركة في After Effects
قم بتعيين نقطة التدوير أعلى السهم باستخدام أداة Pan Behind (الاختصار - Y). نحن فقط نأخذ نقطة ونحركها عند الحاجة. والنتيجة ستكون بهذا الشكل..

الشكل 9 - أداة التحريك والطبقات

هذا كل شيء، الآن دعنا ننتقل إلى طبقات الرسوم المتحركة.
سنحتاج إلى طبقة Arrow وHead_cat.
لنبدأ بالسهم.
دعونا نقوم بتوسيع القائمة، والعثور عليها وانقر على الساعة. لذا، فقد وضعنا النقطة الأولى عند صفر ثانية. ستستمر الرسوم المتحركة لمدة ثانيتين إجمالاً.
إذن، هذه هي الإعدادات التي تحتاج إلى إجرائها (سنضع 3 نقاط في المجمل):

ثانية	0	1	2
	+66	- 70	+66

وهذا ما سيبدو عليه:

الشكل 10 - سهم التدوير

الآن دعونا نحرك رأس القطة.
دعونا نوسع head_cat ونبحث عن Position .
سيكون هناك 4 نقاط هنا.
سيتم تغيير الإحداثيات الأخيرة فقط دون التأثير على الإحداثيات الأخرى.

ثانية	0.1	0.17	1.12	2.0
موضع	689.3	729.3	729.3	689.3

دعونا ننظر إلى الصورة.

الشكل 11 - موضع الرأس

لذلك، كان مبدأ الرسوم المتحركة مثل هذا. يتأرجح السهم من جانب إلى آخر، وبمجرد اقترابه من القطة، يسحب رأسه إلى الداخل، ويبقى على هذا الوضع لفترة، ثم يعيده إلى مكانه.

المرحلة النهائية

إنتاج
تحتاج إلى إنشاء منتج نهائي من عملك.
انتقل إلى القائمة - أضف إلى قائمة انتظار العرض
سيتم فتح لوحة Render وفي وحدة الإخراج (نقرتين) حدد تنسيق الإخراج. أخذت *.mov

الشكل 12 - تقديم

انقر على زر RENDER واحصل على النتيجة (فقط لا تنس تحديد المسار).
هذا كل شئ.