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.

وارد کردن به اثرات بعدی
  File - Import - File - پرونده ذخیره شده ما را انتخاب کنید   تصویرگر
ما اگر Illustrator را لایه بندی کنیم ، لایه هایی را از Illustrator وارد خواهیم کرد ، با لایه های ادغام شده تصویری می گیریم ، اما نیازی به این کار نداریم.

شکل 7 - واردات به عنوان ترکیب

همه وارداتی
  حالا بیایید ببینیم چه چیزی داریم. دوبار روی ترکیب کلیک کنید به طوری که آن باز شود و ما لایه ها را ببینیم (اگر همه چیز به درستی انجام شود ، چندین لایه وجود خواهد داشت). ما این را می گیریم ، شکل را ببینید

شکل 8 - ترکیب آزاد

و اکنون آنچه ما امروز اینجا هستیم انیمیشن است.

انیمیشن در پس از اثرات
با استفاده از ابزار Pan Behind Tool (میانبر - Y) ، نقطه چرخش را در بالا در فلش قرار دهید. فقط نکته را در نظر بگیرید و آن را در جایی که می خواهید حرکت دهید. در نتیجه ، اینگونه به نظر می رسد ..

شکل 9 - ابزار Pan و Layers

خوب که این است ، اکنون برای انیمیشن به لایه ها بروید.
  ما به یک لایه Arrow و Head_cat نیاز داریم.
  بیایید با فلش شروع کنیم.
  لیست را باز کنید ، ساعت را پیدا کرده و کلیک کنید. بنابراین ما نقطه اول را در صفر ثانیه قرار می دهیم. درمجموع انیمیشن 2 ثانیه به طول می انجامد.
  بنابراین ، در اینجا تنظیماتی که شما باید انجام دهید در اینجا آمده است (فقط 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 Queue اضافه کنید
  پنل Render باز می شود و در Output Module (دو کلیک) قالب خروجی را انتخاب می کنیم. من * .mov را گرفتم

شکل 12 - ارائه

بر روی دکمه RENDER کلیک کنید و نتیجه بگیرید (فقط به یاد داشته باشید که مسیر را مشخص کنید).
  این همه چیز است

شما یک یا دو آیکون دارید که دوست دارید با انیمیشن متحرک شوید. از کجا شروع می کنید؟ فرض کنید فایل SVG ، Illustrator CC و After Effects CC دارید ، اما راه حل شما را گشوده است.

در این مقاله ، من قصد دارم چگونگی تحریک آسان فایل SVG ، از جمله تهیه پرونده SVG در Illustrator و وارد کردن به After Effects CC را نشان دهم. من همچنین توضیح خواهم داد که چگونه می توانید آن را به شکل های لایه تبدیل کرده و حرکت را اضافه کنید. و در آخر ، اجازه دهید در مورد صادرات و ارائه صحبت کنیم.

نتیجه نهایی کار.

حالا بیایید به جالب ترین قسمت برسیم - یاد بگیرید که چگونه تصاویر را تحریک کنید.

تهیه پرونده SVG در Illustrator

بیایید با باز کردن پرونده SVG خود در Adobe Illustrator CC شروع کنیم. من یک آیکون ماشین کوچک را که در Week Of Icons به صورت رایگان موجود است ، تحریک می کنم.

بعد از باز کردن پرونده ، ما باید همه اشیاء را به لایه ها تقسیم کرده و تقسیم کنیم. می توانید آن را به صورت دستی انجام دهید یا از آن استفاده کنید انتشار به لایه ها (دنباله)   برای سرعت بخشیدن به روند. قبل از وارد کردن پرونده در After Effects ، باید آن را در قالب پرونده Illustrator ذخیره کنیم.

ما می توانیم اشیاء را با استفاده از Release to Layers (دنباله) گروه سازگار کنیم تا وقت گرانبها را هدر ندهیم.

یک پرونده را در After Effects CC وارد کنید و سازماندهی کنید

اکنون شما آماده هستید که وارد After Effects CC شوید. بیایید از میانبر صفحه کلید استفاده کنیم Ctrl + I (ویندوز)یا فرمان + من (مک)برای بارگیری کادر گفتگو وارد کردن پروندهیا رفتن به پرونده\u003e وارد کردن\u003e پرونده ...   در همان مکان پرونده Illustrator CC را که آماده کردید انتخاب کنید و کلیک کنید وارداتیک کادر گفتگوی کوچک باید با نام پرونده انتخاب شده ظاهر شود. انتخاب کنید ترکیب   از لیست کشویی نامیده می شود نوع واردات.

  یک راه سریعتر برای وارد کردن پرونده ، دوبار کلیک کردن روی ستون در پانل پروژه است.

در پانل Timeline شاهد ترکیب جدیدی خواهیم بود. روی آن دوبار کلیک کنید. حال باید لایه های Illustrator CC را با نمادهای نارنجی در سمت چپ نام ها ببینیم.

قبل از اینکه به شغل خود بپردازیم ، باید تمام این لایه ها را به آن تبدیل کنیم لایه های شکل. باید همه آنها را برجسته کنیم Ctrl + A / Command + A، یا با استفاده از دستی ماوس Shift + سمت چپ. پس از آن ، بر روی لایه کلیک راست کرده و را انتخاب کنید از لایه بردار شکل ایجاد کنید.

اکنون که لایه های جدید انتخاب شده اند ، آنها را به بالای صفحه در بالای لایه های Illustrator CC بکشید ، و سپس لایه های Illustrator CC را بردارید تا در این حالت تداخل ایجاد نشود.

  لایه های Illustrator CC را در After Effects CC به شکل های لایه تبدیل کنید

اگرچه این ضروری نیست ، مهم است که ما به هر لایه نام مربوطه را بدهید و یا آن را به رنگ نشان دهیم. این به ما امکان می دهد تا کارآمدتر عمل کنیم ، زیرا بیشتر روی کارکنان کلیدی تمرکز خواهیم کرد. در مثال زیر ، رنگ لیبل ها کم و بیش با پر کردن لایه های مربوطه مطابقت دارد.

  علامت گذاری لایه های Shape با نام ، رنگ ، برچسب و چیدمان مناسب بسیار کاربردی است.

برای پیکربندی تنظیمات از میانبر صفحه کلید استفاده کنید. Ctrl + K / Command + K   یا ترکیب\u003e تنظیمات ترکیب ...   از تنظیمات ترکیب باید عرض ، ارتفاع ، سرعت فریم و مدت زمان (عرض ، ارتفاع ، نرخ فریم و مدت زمان) را انتخاب کنیم. برای این پروژه 60 فریم در ثانیه انتخاب کردم تا انیمیشن صاف باشد.

در حال حاضر ، به نظر می رسد که همه چیز آماده کار است ، اما یک کار دیگر نیز وجود دارد که باید انجام شود. ما باید لایه های خاصی را با هم گروه بندی کنیم تا حرکات آنها با لایه اصلی هماهنگ شود ، که می توانیم آنها را کنترل کنیم. این روش نامیده می شود والدین.

  برای انتخاب یک لایه والد به چندین لایه از Pick Whip استفاده کنید.

در مثال ما ، من لایه های قابل توجهی کمتری (لایه های کودک) مانند شیشه جلوی شیشه ، قطعات بدن ، چوب و طناب را به لایه اولیه بدن (لایه والدین) اختصاص دادم. این به من اجازه می دهد تا با استفاده از لایه والد ، موقعیت و چرخش کل خودرو (به استثنای چرخ ها) را کنترل کنم.

ایجاد انیمیشن

من می خواستم ماشین به سنگی برخورد کند و کمی در هوا آویزان شود. من همچنین می خواستم درخت به بالا و پایین حرکت کند و تنه باز شود. من با ایجاد سنگ ، ماشین و چرخ شروع کردم. سپس وقت آن است که بر بزرگترین مانع غلبه کنیم - عملی را روی درخت کریسمس بگذارید. پس از اتمام این کار ، جزئیات کوچکی از قبیل تنه و طناب را برداشتم.

  طرح انیمیشن

اولین قدم ساختن این عنصر یا لایه به شکل سنگ بود ، اما به جای بازگشت به Illustrator CC برای اضافه کردن یک لایه دیگر ، من فقط از ابزار Pen در After Effects CC استفاده کردم. این به من اجازه داد تا به سرعت یک سنگ کوچک را طراحی کنم.

  اوه قلم قدرتمند!

تنه کار نسبتاً ساده ای بود. من آن را در پشت خودرو نصب کردم و یک نقطه مرجع را در راس سمت چپ پایین قرار دادم. با استفاده از Pick Whip ، آن را به لایه بدن والدین اختصاص دادم. مرحله پیش فرض این بود که جلوی چرخش را بگذارد ، که به نوبه خود لحظه ای از گزاف گویی خودرو را واقعی تر کرد. Bodymovin در ترکیب با کتابخانه موبایل Lottie.

P.S.   می توانید پرونده های Illustrator CC و After Effects CC را پیدا کنید.

مجموعه ای از آیکون ها برای بارگیری مجانی در اینجا موجود است.

سلام بر همه! امروز سعی خواهم کرد ویژگی های برنامه را توصیف کنم تصویرگر Adobeمقایسه آن با قابلیت های خیالی این یک تحلیل جهانی از برنامه توسط استخوان ها نخواهد بود ، بلکه توصیفی از برخی تراشه های جالب است که برای خودم در این برنامه کشف کردم. من به عنوان مطالعه اطلاعات به صورت قطعه به عنوان مطالعه کردم تا همه چیز را در یک پست قرار دهم. باید فوراً اعتراف کنم که من یک کاربر تصویرگر فوق العاده تجربه نیستم ، فقط شش ماه گذشته از آن در نقاشی استفاده کرده ام (قبل از آن همه چیز را با فلش نقاشی کردم). بسیاری شکایت می کنند که تصویرگر پیچیده ، بصری است ، همیشه روشن نیست. تا حدی موافقم که بعد از فلاش ، این برنامه پیچیده است. اما نکته اصلی در اینجا ترک کردن نیست بلکه ادامه مطالعه است. و بعد از دو هفته فکر به نظر می رسد ، چطور می توانم قبل از او بدون او کار کنم!

بنابراین ، آنچه در تصویرگر دوست داشتم ، و این است که برای خودم چیزی پیدا کردم که در فلش نباشد.
  1. من با ساده ترین ، اما در همان زمان ضروری شروع می کنم. سعی کنید اشیاء را با یک فلاش در یک دایره ترتیب دهید. قبلاً بود ابزار دکو اما ظاهراً برداشته شد و ظاهراً غیر ضروری تلقی شد. ما تصمیم گرفتیم که قلم ها این کار را سرگرم کننده تر انجام دهند. در تصویرگر ، این عملکرد عبارت است از: اثر - تحریف و تبدیل - تبدیل.

  همه چیز سریع و ساده است ، ما مقادیر (فاصله بین اشیاء ، تعداد نسخه ها) را در تنظیمات قرار می دهیم.

2. زیگ زاگ

حتی ساده تر ، اما با این وجود مفید. به نظر می رسد یک چیز کوچک است ، اما در فلاش شما باید با دست بکشید ، در تصویرگر این مسئله چند ثانیه است.

3. اشیاء Warp (پیچ و تاب)

در فلش چیزی شبیه به آن وجود ندارد. در مثال زیر ، من فقط 2 روش برای تغییر شکل اشکال ساده (Effect - Warp - Arc / Fish) نشان دادم. در حقیقت ، 15 نسخه از آنها در آخرین نسخه برنامه وجود دارد.

4. دور اتوماتیک گوشه ها (گوشه های گرد)

می توانید آن را به صورت دستی انجام دهید: روی یک شیء گرافیکی ، هنگامی که در گوشه ای برجسته می شوید (در تمام چشم ها) ، یک نقطه سفید و یک علامت خط گرد نشان داده می شود. با ماوس بکشید ، مطابق سلیقه خود تنظیم کنید.

اما این فقط در مورد اشکال اعمال می شود ، با یک خط مداد کمی متفاوت - اثر گرد را اعمال کنید ( جلوه - سبک - گوشه های دور) در خروجی ما نتیجه مشابه را می گیریم.

5. سفت شدن (درشت)

اثر بر روی فرم های ساده اعمال می شود ( اثر - تحریف و تغییر شکل - Roughhen) در خروجی ، چیزی شبیه به مدلهای 3D کم پلی را دریافت می کنیم. به نظر من ، جالب :) و از همه مهمتر - بسیار ساده است.

6. Pucker & Bloat   (انقباض و تورم)
  نمونه ای از تصویر زیر:

7. فرمت فرم (مسیر افست)

یک عملکرد Expand Fill در فلش وجود دارد (پسوند پر) ، برخلاف تصویرگر ، به هیچ وجه با خطوط مداد کار نمی کند.

8. برس (برس قلم مو ، برس الگوی ، برس پراکنده)
  عکس زیر را با مثال می بینیم:

برس قلم مو

همچنین در تصویرگر تعداد زیادی برس بافت وجود دارد که من در مورد آنها نوشتم ، و اینکه چگونه در نسخه جدید فلش ظاهر شده اند -. توجه شده است که استفاده از برس در Adobe Animate بسیار کند است. در اینجا مواردی وجود دارد :(

10. من مطمئن نیستم که این یک ترفند ساده است ، اما من می خواهم روی یک قلم مو با یک اسم خنده دار متوقف شوم حباببرس. یک قلم مو بسیار زیبا برای استفاده در نوار ابزار واقع شده است. یک سری تنظیمات دارد ، من آن را بیش از حد معمول دوست دارم. توضیح در مورد مزایای آن دشوار است ، بهتر است یک بار امتحان کنید.

10.Split به Grid

همچنین عملکرد Split to Grid (Object-Path-Split to Grid) مفید است که به شما امکان می دهد یک شکل را به بخش های مساوی برش دهید. این چه چیزی را به ما یادآوری می کند؟ درست - پنجره ها در یک ساختمان مرتفع. در مورد من ، یک چیز جالب برای نقاشی ، به عنوان مثال ، مناظر شهری ؛)

یکی دیگر از ابزارهای مفید ارائه شده در Illustrator ، احتمالاً از زمان انتشار اولین بار. با استفاده از آن ، می توانید به عنوان مثال بافت های درختی ایجاد کنید:

12. حرکت (راست - انتقال - حرکت)

جبران جسم در فاصله معینی. در صورت تمایل ، می توانید بلافاصله کپی ایجاد کنید که در فاصله مورد نظر از شیء انتخابی به صورت افقی / یا عمودی قرار گیرد. در نسخه قبلی فلش افزونه ای وجود داشت که این عملکرد را انجام می داد. متأسفانه نام آن را به خاطر نمی آورم.

ایجاد الگوهای یکپارچه در تصویرگر بسیار راحت است ( الگوی شی) من به یاد دارم که چگونه با ایجاد خلاقانه در فلاش پیچیدم. در تصویرگر نسخه CC 2015 ، همه چیز به صورت خودکار انجام می شود ، مجموعه ای از تنظیمات به شکل دهی این الگوی در ده ها تن از تغییرات کمک می کند ، تنها با داشتن چند عنصر گرافیکی در دسترس است. در نسخه های اولیه این برنامه ، همه چیز را باید به صورت دستی انجام می داد ، مانند فلش تا کنون.

(توجه داشته باشید - با استفاده از عملکرد تجزیه ای می توان یک الگوی قابل ویرایش را ایجاد کرد) شی - گسترش ظاهر).

14. شی معرق

براساس یک تصویر موجود ، یک پالت رنگ ایجاد کنید. سپس تصویری را که دوست دارید وارد Illus (Open) کنید شی - ایجاد شی موزاییک. در تنظیمات تعداد دفعات تقسیم را از نظر ارتفاع و عرض نشان می دهیم.

و در خروجی ما:

15.Blend (مخلوط)

برای ایجاد شیب استفاده می شود. شما می توانید انتقال مرحله به مرحله ، به عنوان مثال ، در تصویر ایجاد کنید. من نمی گویم که من اغلب از آن استفاده می کنم ، اما می تواند برای کسی مفید باشد. به نظر من می توانید در ایجاد تصاویر پس زمینه ساده از آن استفاده کنید.

همچنین می توانید از این ابزار برای کلون کردن اشیاء استفاده کنید. ما دو شیء را با فاصله از یکدیگر قرار می دهیم و Blend Options را اعمال می کنیم ، تعداد مراحل (تعداد اشیاء کلون شده) را انتخاب می کنیم.

16. ساخت ابزار شکل.   یک چیز بسیار مناسب برای کار با افراد اولیه. به نظر می رسید ، در فلاش ، راحت تر نیست.

Alt را نگه دارید و روی بخش های انتخاب شده کلیک کنید - بخش ها را حذف کنید. اگر ما به سادگی ماوس را بر روی چندین منطقه انتخاب شده بکشیم - اتصالات.

افزودنی - ابزاری که به قطع خودکار ، پیوستن و غیره کمک می کند. فرم های انتخاب شده در مورد من ، خیلی راحت نیست ، من بیشتر از آن استفاده می کنم ساختشکلابزار

  (مادربردها)

پانل ابزار 18.Custom

توانایی ایجاد نوار ابزار خودتان ، صرفنظر از موارد غیر ضروری ، و فقط مواردی را که استفاده می کنید انتخاب کنید.

در کارتن های فلش ، یعنی صحنه ( صحنه 1،2،3 ..) به طور جداگانه واقع شده اند و باید بین آنها جابجا شوید (Shift + F2). در Illustrator ، همه آنها را می توان در جلوی چشم ها قرار داد. راحت است وقتی چندین گزینه را برای همان نقاشی انتخاب می کنید ، به گونه ای که همه گزینه ها برای مقایسه بهتر است.

19. ایزومتری با سبک های گرافیکی

و نکته آخر ایجاد یک ایزومتری بدون استفاده از 1 کلیک (یا دقیق تر 3 کلیک است زیرا ما 3 طرف داریم؛) با استفاده از سبک های گرافیکی ( سبک های گرافیکی) چگونه این کار انجام شود ، دفعه بعد امضا خواهم کرد.

نکته رایج در فلاش تصویرگر ، امکان ذخیره یک شیء در یک نماد (نماد) است و همچنین بدون مشکل این نماد می تواند به یک فلاش منتقل شود (پرونده .ai را در فلش باز کنید ، توسط واردات - وارد کردن به مرحله).
  نمادی در تصویرگر دارای همان ویژگی هایی است که در یک فلش وجود دارد.
  و در پایان می نویسم که به نظر من در تصویرگر ، نسبت به فلاش پایین است. بله ، بله ، و وجود دارد. و این ابزار پر کردن است ( سطل رنگ) از آنجا که سعی نمی کنم در حالت عادت به آن عادت کنم ، در یک فلاش راحت تر است.
  اگر یادداشتهای من برای شما مفید واقع شده اند ، یا اگر می خواهید چیزی از خودتان اضافه کنید ، احساس راحتی کنید! موفق باشید به همه ؛)

به تازگی ، انواع مختلفی از انیمیشن های گرافیکی SVG (Scalable Vector Graphics) در وب سایت ها و برنامه ها بسیار محبوب شده اند. این در شرایطی است که همه جدیدترین مرورگرها قبلاً از این قالب پشتیبانی می کنند. در اینجا اطلاعات مربوط به پشتیبانی مرورگر SVG ارائه شده است.

در این مقاله ساده ترین نمونه از متحرک سازی یک بردار SVG با استفاده از افزونه سبک جی کوئری Lazy Line Painter شرح داده شده است.

  کد منبع

برای تکمیل و درک کامل این کار ، دانش پایه HTML ، CSS ، Jquery مطلوب است ، اما در صورتی که فقط می خواهید SVG را تحریک کنید ، لازم نیست) اجازه دهید شروع کنیم!

و بنابراین مراحلی که ما باید انجام دهیم:

1. ساختار صحیح فایل را ایجاد کنید
2. افزونه را بارگیری و وصل کنید
3. یک تصویر کانتور جالب در Adobe Illustrator بکشید
4. تصویر ما را به Lazy Line Converter تبدیل کنید
5. کد نتیجه را در main.js قرار دهید
6. مقداری CSS را به مزه اضافه کنید

1- ساختار صحیح فایل را ایجاد کنید
  سرویس Initializr در این امر به ما کمک می کند ، جایی که شما نیاز دارید پارامترهایی را مانند تصویر زیر انتخاب کنید.

• کلاسیک H5BP کلاسیک (صفحه بویلر HTML5)
• بدون الگویی
• فقط HTML5 Shiv
• به حداقل رساند
• کلاسهای اینترنت اکسپلورر
• قاب Chrome
• سپس روی بارگیری آن کلیک کنید!

2. افزونه را بارگیری و وصل کنید

از آنجایی که firstizr با جدیدترین کتابخانه Jquery همراه است ، از بایگانی که باید از مخزن پروژه Lazy Line Painter بارگیری کنیم ، باید فقط 2 پرونده را به پروژه خود منتقل کنیم. مورد اول "jquery.lazylinepainter-1.1.min.js" است (نسخه پلاگین ممکن است متفاوت باشد) ، در ریشه پوشه دریافت شده قرار دارد. مورد دوم به عنوان مثال / js / vendor / raphael-min.js است.

این 2 پرونده در پوشه js قرار می گیرند. و آنها را قبل از main.js به index.html ما وصل کنید به شرح زیر:

3. یک تصویر کانتور جالب در Adobe Illustrator بکشید

1. تصویر کانتور خود را در Illustrator ترسیم می کنیم (ساده ترین راه برای انجام این کار با ابزار قلم است)
2. لازم است که خطوط شکل ما بسته نشوند ، زیرا برای تأثیر ما ، یک آغاز و یک پایان لازم است
3. نباید پر شود
4. حداکثر اندازه پرونده - 1000 × 1000 px ، 40kb
5. برش را به مرزهای جسم بزنید Object\u003e Artboards\u003e Fit To Artboards Bounds
6. ذخیره با فرمت SVG (تنظیمات ذخیره استاندارد انجام خواهد شد)

به عنوان مثال ، می توانید از نمادهای موجود در پیوست استفاده کنید.

4. تصویر ما را به Lazy Line Converter تبدیل کنید
  فقط کافی است آیکون خود را در تصویر زیر در کادر بکشید.
  ضخامت ، رنگ رئوس و سرعت انیمیشن را می توان در کدی که بعد از تبدیل ظاهر می شود تغییر داد!

5- کد نتیجه را در main.js قرار دهید
  اکنون فقط کد حاصل را در یک پرونده اصلی main.js بچسبانید
  پارامترها:
  عرض عرض - ضخامت طرح
  strokeColor - رنگ رئوس مطالب
  همچنین می توانید با تغییر مقادیر پارامتر مدت (با پیش فرض 600) نقشه ترسیم هر بردار را تغییر دهید

6. مقداری CSS را به مزه اضافه کنید
  پاراگراف را از index.html حذف کنید

سلام جهان! این HTML Boilerplate است.

و به جای آن بلوکی را که انیمیشن ما در آن برگزار خواهد شد قرار می دهیم

سپس برای زیبایی بیشتر مقداری CSS را به پرونده اصلی.Css اضافه کنید:

بدن (پس زمینه: # F3B71C؛) #icons (موقعیت: ثابت؛ بالای: 50٪؛ سمت چپ: 50٪؛ حاشیه: -300px 0 0 -400px؛)

همه پرونده ها را ذخیره کنید
  اکنون فقط یک index.html را در یک مرورگر مدرن باز کنید و از اثر لذت ببرید.

P.S. هنگام شروع کار با دستگاه محلی ، شروع انیمیشن ممکن است برای چند ثانیه به تعویق بیفتد.

یک GIF شفاف در Adobe Illustrator به شرح زیر انجام می شود. به File\u003e Save for Web & Devices (Alt + Ctrl + Shift + S) بروید. در پنجره ای که باز می شود ، ابتدا در قسمت Optimized format file ، اول از همه ، به برگه بروید اندازه تصویر   (اندازه تصویر) واقعیت این است که کل صفحه بصورت پیش فرض در پنجره بهینه سازی قرار می گیرد و این معمولاً ضروری نیست. بنابراین ، در تب Image Size ، کادر را بردارید. کلیپ به مقوا (برش متناسب با صفحه) را بزنید و روی Apply کلیک کنید.

سپس در لیست انتخاب قالب ، GIF را انتخاب کرده و کادر شفافیت را تیک بزنید.

پس از آن ، ما تعیین می کنیم که کدام رنگ ها شفاف خواهند بود. تمام رنگهای موجود در تصویر در برگه موجود است. جدول رنگی   (نمودار رنگ) و به صورت مربع های رنگی نمایش داده می شوند. ابزار را در نوار ابزار در سمت چپ پنجره انتخاب کنید خط چشم   (قطره چکان)

برای تعریف رنگ ها دو روش وجود دارد. ساده ترین راه مشخص کردن رنگ با یک قطره چکان مستقیم بر روی تصویر است - پس از آن رنگ با یک ضربه تاریک روی میز رنگ برجسته می شود. خوب ، اگر دقیقاً می دانید کدام رنگ باید شفاف باشد ، می توانید با کلیک کردن روی جعبه رنگ مربوطه ، آن را مستقیماً در جدول رنگ انتخاب کنید. و در حالت اول و دوم ، اگر شما نیاز به انتخاب چندین رنگ دارید ، باید با کلید فشرده شده Shift (یا Ctrl) کار کنید. پس از انتخاب رنگ ، باید برنامه را آموزش دهید تا شفاف شود. برای انجام این کار ، روی نماد کلیک کنید نقشه ها رنگ ها را به شفاف انتخاب کردند   (رنگ های انتخاب شده را به شفافیت اضافه کنید). در شکل ، این دکمه به گردش در آمده و رنگ قرمز به صورت شفاف انتخاب می شود. یک ناحیه شفاف روی تصویر ظاهر می شود ، و مربع کوچک در جدول رنگ ظاهر آن را تغییر می دهد - بخشی از آن به یک مثلث سفید تبدیل می شود. برای لغو رنگ انتخابی ، آن را در جدول رنگی انتخاب کرده و دوباره بر روی نمادهای انتخاب شده رنگها روی نماد شفاف کلیک کنید.

چند کلمه در مورد راه تنظیم شفافیت. منوی کشویی مسئول آن است. الگوریتم شفافیت Dither را مشخص کنید، به روسی - الگوریتم شبیه سازی شفافیت (شکل زیر). می توان چهار گزینه را انتخاب کرد: بدون شفافیت - هیچ الگوریتمی ، شفافیت انتشار شفاف - الگوریتم پراکندگی ، الگوریتم مبتنی بر الگوی و الگوریتم مبتنی بر نویز - شفافیت الگوی پراکنده. در حالت الگوریتم پخش ، کشویی فعال می شود مقدار   (مقدار) ، به شما امکان می دهد مقدار انتشار را تغییر دهید. در عمل چه باید کرد؟ بسته به هدف و تصویر بستگی دارد. من از این گزینه استفاده نمی کنم و همیشه پیش فرض را رها می کنم - بدون شفافیت Dither.

روی ذخیره کلیک کنید - GIF شفاف آماده است. این کار در نسخه Adobe Illustrator CS4 (v.14) انجام شده است ، اما کلیه اقدامات و میانبرهای صفحه کلید برای نسخه قبلی CS3 (نسخه 13) مرتبط هستند.