AI ile tasarladığınız ikonu AE ile kolayca hareketlendirin

Animasyonlarda veya web sitelerinde gif olarak kullanılmak üzere hareketli ikonlara ihtiyaç duyuyoruz. Bunları maskelemenin oldukça kolay bir yolu var ve bugün size ondan bahsedeceğim. Birkaç adımda kolayca yapabileceğiniz bu yöntem için ilk başta basit bir ikon kullanacağım ama yöntemi kavradığınızda daha kompleks ikonları ve kompozisyonları da aynı şekilde hareketlendirebilmeniz mümkün olacaktır.

Hareketlendireceğimiz Play ikonu

Anlaşılması için hızlıca basit bir ikon çiziyorum. Bir play ikonu. Bir daire ve bir üçgenden oluşuyor.

Stroke

Çizdiğimiz ikonun yalnızca stroke ile çizilmiş olması önemli. İç kısmı renk ile doldurulmamalı. Stroke kalınlığı, renk gibi değerleri daha sonra AE üzerinde de değiştirebilirsiniz.

Import

AI'de yaptığımız ikonu AE'ye import ediyoruz ve yeni bir kompozisyon açıyoruz.
Composition > New Composition

Crate Shape from Vector Layers

Illustrator dökümanını açtığımız kompozisyona taşıyor ve dosyanın üzerinde sağ tıklayarak
Create > Create Shapes from Vector Layer
diyoruz. Bu işlem ile birlikte AE yeni bir layer olarak bize bir shape oluşturacak. Bu shape AI'deki gibi vektörel layerlardan oluşuyor. AE yeni bir shape layer oluştururken AI dosyamızın da gözünü kapalı hale getirecektir. AI dosyasını artık sahnenizden silebilirsiniz. İşimiz artık sadece shape layer ile bundan sonra.

Crate Shape from Vector Layers içeriği

Illustrator dökümanını shape olarak yeniden yarattığımızda altta bir Contents grubunun açıldığını göreceksiniz. Bu grubun içine girdiğinizde Illustrator'da ayrı olarak çizdiğiniz tüm stroke'lar Group 1 - Group 2 - Group 3 şeklinde sıralanır. Sözgelimi, ikonunuzu 20 ayrı stroke ile çizdiyseniz 20 grup olduğunu göreceksiniz.

Add > Trim Paths

Group 1 seçili iken Contents'in hemen karşısında bulunan Add'e tıklıyor ve açılan menüden Trim Paths'i Group 1 e ekliyoruz.

Trim Paths ayarları

Path 1'in hemen altına Trim Path 1 olarak eklenen komut satırını görüyorsunuz. Burada Start ve End değerlerinin 0 ve 100 olarak geliyor. Biz ikonumuzun çizilerek oluşmasını istediğimiz için iki değeri de 0 olarak düzenleyelim.

Trim Paths keyframe

Animasyonun ilk başlayacağı kareye bir keyframe ekleyip Start ve End değerlerini 0 yapıyoruz. Animasyonun biteceği yani ikonun çizgisinin oluşmasını istediğimiz süreye de -mesela 2 sn- yine bir keyframe atıyor ve burada End değeri olarak 100 giriyoruz. Böylece 2 saniye içerisinde ikonumuzun Group 1'de yer alan stroke'una 0'dan 100 e bir oluşma animasyonu vermiş olduk.

Sahnedeki animasyonu oynattığınızda ortada bulunan üçgenin oluşmasını göreceksiniz. Group 1'de üçgen vardı ve trim path ile bu üçgene oluşma animasyonu verdik. Aynı şekilde Group 2 - 3 ve varsa diğer gruplara da aynı şekilde keyframe ile trim paths atadığınızda bunları da hareketlendirmiş olacaksınız. Keyframe aralıklarını açtığınızda veya sürelerini bir miktar birbirinden farklı hale getirdiğinizde ve hatta bunlara easing verdiğinizde animasyonunuz daha güzel gözükecektir.

Stroke

Önemli Not: AI'de çizdiğiniz ikonun içinin boş olmasına sadece stroke'tan ibaret olmasına dikkat edin. Aksi takdirde AE'de trim path yaparken içini de hareketlendireceği için garip bir görüntü oluşabilir.