كيف تصنع الرسوم المتحركة في الرسام. إنشاء الرسوم المتحركة في Illustrator. قم بتنزيل المكون الإضافي وتوصيله

فايبر على الكمبيوتر 29.11.2021
فايبر على الكمبيوتر

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

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

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

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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


نتيجة لذلك ، نحصل على فيلم فلاش مع الرسوم المتحركة لدينا.

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

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

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

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


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

لديك رمز أو رمزان ترغب في إضفاء الحيوية عليهما باستخدام الرسوم المتحركة. من أين تبدأ؟ لنفترض أن لديك ملفات SVG و Illustrator CC و After Effects CC ، لكن الحل يراوغك.

في هذه المقالة ، سأوضح لك كيفية تحريك ملف SVG بسهولة ، بما في ذلك تحضير ملف SVG في Illustrator واستيراده إلى After Effects CC. سأشرح أيضًا كيف يمكنك تحويلها إلى طبقات الشكل وإضافة الحركة. وأخيرًا ، لنتحدث عن التصدير والتصيير.

النتيجة النهائية للعمل.

الآن دعنا ننتقل إلى الجزء الأكثر إثارة للاهتمام - تعلم كيفية تحريك الصور.

تحضير ملف SVG في Illustrator

لنبدأ بفتح ملف SVG في Adobe Illustrator CC. سأقوم بتحريك رمز سيارة صغير متاح مجانًا في Week Of Icons.

بعد فتح الملف ، نحتاج إلى فك تجميع وفصل كل الكائنات في طبقات. يمكنك القيام بذلك يدويًا أو استخدام التحرير إلى طبقات (تسلسل)لتسريع العملية. قبل استيراد الملف إلى After Effects ، نحتاج إلى حفظه بتنسيق ملف Illustrator.


يمكننا فك تجميع الكائنات باستخدام الإصدار إلى طبقات (تسلسل) حتى لا نضيع الوقت الثمين.

استيراد وتنظيم ملف في After Effects CC

أنت الآن جاهز للاستيراد إلى After Effects CC. لنستخدم اختصار لوحة المفاتيح Ctrl + I (Windows)أو القيادة + أنا (ماك)لتحميل مربع الحوار استيراد ملف، او اذهب الى ملف> استيراد> ملف ...في نفس المكان ، حدد ملف Illustrator CC الذي أعددناه وانقر يستورد.يجب أن يظهر مربع حوار صغير باسم الملف المحدد. يختار تكوينمن القائمة المنسدلة تسمى نوع الاستيراد.


تتمثل الطريقة الأسرع لاستيراد ملف في النقر نقرًا مزدوجًا فوق موقع عمود في لوحة المشروع.

في لوحة الجدول الزمني ، سنرى التكوين الجديد. نضغط عليه مرتين. يجب أن نرى الآن طبقات Illustrator CC بأيقونات برتقالية على يسار أسمائها.

قبل أن نبدأ العمل ، نحتاج إلى تحويل كل هذه الطبقات إلى طبقات الشكل. نحن بحاجة إلى اختيارهم جميعًا Ctrl + A / Command + A، أو يدويًا باستخدام ملفات تحول + الماوس الأيسر. بعد ذلك انقر بزر الماوس الأيمن على الطبقة وحدد إنشاء> إنشاء أشكال من طبقة المتجهات.

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


تحويل طبقات Illustrator CC إلى طبقات الشكل في After Effects CC

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


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

استخدم اختصار لوحة المفاتيح لتكوين الإعدادات Ctrl + K / Command + K.أو التأليف> إعدادات التأليف ...من إعدادات التكوين ، نحتاج إلى تحديد العرض والارتفاع ومعدل الإطار ومدة العرض والارتفاع ومعدل الإطار والمدة. بالنسبة لهذا المشروع ، اخترت 60 إطارًا في الثانية للحفاظ على سلاسة الرسوم المتحركة.

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


استخدم Pick Whip لتعيين طبقة أصل لطبقات متعددة.

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

إنشاء الرسوم المتحركة

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


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

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


أوه ، أداة القلم الأقوياء!

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

ملاحظة.يمكنك العثور على ملفات Illustrator CC و After Effects CC الخاصة بي.

مجموعة الأيقونات متاحة للتنزيل المجاني في.

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

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

مصدر

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

ولذا فإن الخطوات التي يجب أن نتبعها:

  1. قم بإنشاء هيكل الملف الصحيح
  2. قم بتنزيل المكون الإضافي وتوصيله
  3. ارسم خطًا فنيًا رائعًا في Adobe Illustrator
  4. تحويل صورتنا إلى محول الخط الكسول
  5. الصق الكود الناتج في main.js
  6. أضف بعض CSS حسب الرغبة

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

  • كلاسيك H5BP (لوحة مرجل HTML5)
  • لا يوجد قالب
  • فقط HTML5 شيف
  • مصغر
  • فئات .IE
  • إطار كروم
  • ثم انقر فوق Download it!

2. قم بتنزيل المكون الإضافي وتوصيله

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

يتم وضع هذين الملفين في المجلد js. ونقوم بتضمينها في index.html قبل main.js مثل هذا:

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

  1. ارسم صورة المخطط التفصيلي في Illustrator (أسهل طريقة للقيام بذلك هي باستخدام أداة القلم)
  2. من الضروري ألا تغلق حدود رسمنا ، لأننا نحتاج إلى بداية ونهاية لتأثيرنا
  3. لا ينبغي أن يملأ
  4. الحد الأقصى لحجم الملف هو 1000 × 1000 بكسل ، 40 كيلوبايت
  5. دعنا نقطع حدود الكائن Object> Artboards> Fit To Artboards Bounds
  6. حفظ بتنسيق SVG (إعدادات الحفظ القياسية جيدة)

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

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

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

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

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

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

ثم أضف بعض CSS إلى ملف main.css للحصول على مظهر أجمل:

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

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

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

Adobe Illustrator و After Effects
استيراد الرسوم المتحركة البسيطة

مرحبًا. نقوم اليوم بمراجعة رسم متحرك بسيط في After Effects.

موارد: Adobe Illustrator CC
Adobe After Effects 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 ، إذا وضعنا لقطات ، فسنحصل على صورة ذات طبقات مدمجة ، لكننا لسنا بحاجة إلى ذلك.

الشكل 7 - الاستيراد كتكوين

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


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

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

الرسوم المتحركة بتنسيق بعد المؤثرات
اضبط النقطة المحورية على السهم الموجود في الجزء العلوي من الأداة Pan Behind Tool (الاختصار - Y). فقط خذ نقطة وانقلها حيث تريد. نتيجة لذلك ، سيبدو هكذا ..

الشكل 9 - أداة عموم والطبقات

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

ثانيا 0 1 2
+66 - 70 +66
هكذا ستبدو كما يلي:


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

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

ثانيا 0.1 0.17 1.12 2.0
موقع 689.3 729.3 729.3 689.3
لنلق نظرة على الصورة.


الشكل 11 - رأس المنصب

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

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

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


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

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

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

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

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

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

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

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



نوصي بالقراءة

قمة