Dribbble'da olduğu gibi prototip maketlerinin animasyonlu GIF'leri nasıl oluşturulur?


38

Dribbblers'ın tasarımlarının animasyonlu örneklerini yüklediğini gördüm.

İşte bir örnek:

Photoshop'ta örnekler yaratabilirim ve hatta onlara basit Tween Animasyonlar uygulayabilirim, ancak GIF'lerimin hiçbir zaman buradaki örneğe benzemesini sağlayamıyorum.

Bu animasyonları oluşturmak için Dribbblers ne kullanıyor?

Animasyonların ayrıca temas noktaları ve mükemmel hareket içerdiğine dikkat edin. Aynı şeyi yapmak için Photoshop örneklerimi dönüştürmek istiyorum.

Dribbblers tarafından oluşturulanlara benzer, örneklerimin animasyonlu bir örneğini nasıl oluşturabilirim?


Bana öyle geliyor ki Creative Dash bu trendi başlattı ya da en azından Dribbble'da popüler yaptı . Çekimlerinin çoğu harika UI becerilerini göstermek için Hareketli Gif'ler.
ckpepper02

1
Bunu AE'de yapmanın ne kadar zor olduğunu görmek istedim ve şaşırtıcı bir şekilde kolay olduğunu söylemeliyim. Yarı zaman alıcı, ancak oldukça eğlenceli. İşte yaptığım şey. Tembel oldum ve telefonu vurgu katmanını gui'nin altında bıraktım: / .. ama evet, küçük AE bilgim ile yapabilirsem herkesin yapabileceğini söyleyebilirim.
Joonas

@Joonas Bu harika! Lütfen bunu nasıl başardığınızla ilgili kısa bir talimat verebilir misiniz?
Nag,

Evet, yarın çok geç olduğundan beri bunu yapmayı planlıyorum. AE'nin harika yanı, nesneyi A noktasından B noktasına nasıl canlandıracağını öğrendikten sonra, hemen nasıl canlandırılacağını biliyor olmanızdır: opaklık, döndürme, ölçek ve bağlantı noktası. Çünkü hepsi aynı şekilde çalışıyor.
Joonas

Lütfen yazdıktan sonra paylaşın! Mantıklı, oldukça basit görünüyor ama yine de uzmanların nasıl yaptığını görmek istiyorum.
Nag,

Yanıtlar:


58

After Effects'te böyle bir şey oluşturmak için bilmeniz gerekenler:

görüntü tanımını buraya girin



Proje ve Kompozisyonlar Nasıl Yapılır?

AE'ye başladığınızda, Cmd+Niçinde bir Kompozisyon içeren yeni bir Proje oluşturmak için basabilirsiniz .

Halihazırda bir Projeniz açıksa, Cmd+Nyalnızca düğmesine basarak yeni bir Kompozisyon oluşturur.

Bu projede 2 kompozisyon kullandım. GUIGUI ve animasyonlarını tutmak için comp. iphonehem arkaplan hem de GUIcomp.

GUI animasyonlarına sahip ikinci kompozisyon, ekranla aynı boyutta olmalı veya en azından aynı en boy oranına sahip olmalıdır. Daha sonra, ekrana yerleştireceğiniz zaman, en boy oranı kapalıysa garip görünmek üzere uzayabilir.



Görüntüleri AE'ye içe aktarma

Effects, .psd dosyalarını içe aktarmak için oldukça iyi bir sisteme sahipse de, onu kullanmaktan hoşlanmam, çünkü .psd dosyasını yanlış yerleştirir, taşır veya yeniden adlandırırsanız, efektler bulamazsa ve her kayıt için görüntüleri değiştirmeniz gerekir. ayrı ayrı katman.

Mesela projelerin içine bir görüntü klasörü alırsanız, örneğin. Resim klasörünü yeniden adlandırın, sadece bir resim görüntüsünü değiştirmeniz gerekir ve tüm eksik resimler geri yüklenir (tüm eksik resimler aynı klasörde olduğu sürece). Ayrıca bu şekilde daha az karmaşa var.

Bir projeye resim nasıl alınır

Soldaki proje panelinin içine sağ tıklayın: Import > Multiple files

... ya da sadece dosyaları o panele sürükleyebilirsiniz.

Görüntüleri photoshoptan dışa aktarmak için dilimleme kullandım .



Hangi nesneleri ayrı resim dosyaları olarak kaydetmelisiniz

Temel olarak, tüm hareketli nesneleri ayrı ayrı kaydetmek isteyeceksiniz. Ayrıca birkaç statik nesneyi ayrıca kaydetmeniz gerekebilir.

Bu projede başlık ve altbilgiyi potansiyel olarak kurtarabilirdim, ancak başlığın ilk düğmesinin üzerinden geçen bir gölgesi vardı, bu yüzden onları ayrı ayrı kaydetmek zorunda kaldım.

İşte, AE'ye aktarmadan önce resim dosyalarımı photoshopta nasıl kaydettiğimin bir dökümü.

görüntü tanımını buraya girin



Animasyonlu 101

Konum animasyonu:

  1. Konum animasyonu:
    • Nesnenizi zaman çizelgesinin sol tarafındaki listeden seçin.
    • Basın P
    • Seçtiğiniz katmanın altındaki kronometre simgesini tıklayın. Bu, otomatik olarak ilk anahtar kareyi ekler; burada zaman göstergeniz her zaman (zaman çizelgesindeki kırmızı çizgidir).
    • görüntü tanımını buraya girin
    • Zaman göstergesinde Zaman göstergesini ileri doğru hareket ettirin. Sürükle ya Cmd+{Arrow left or right}daCmd+Shift+{Arrow left or right}
    • kompozisyon görüntüleyicide nesneyi hareket etmesini istediğiniz konuma sürükleyin (Aynı Shift+arrow keysphotoshop'ta olduğu gibi veya sayı değerlerini de sürükleyerek de kullanabilirsiniz ).
    • Zaman çizelgesinde başka bir anahtar kare belirir ve şimdi bir animasyonunuz var.
    • görüntü tanımını buraya girin
    • Tuşuna basarak animasyonu oynatabilirsiniz. space

Animasyonu hızlandırmak için ana kareleri birbirine yaklaştırın veya yavaşlatmak için birbirlerinden uzaklaştırın.

Duraklattıktan sonra devam eden animasyonlar.

Bir senaryo: A'dan B'ye bir şey canlandırdınız, X milisaniyeyi duraklatıp B'den C'ye geçmek istiyorsunuz.

B'yi hareketlendirdiğinizde zaman çizelgesinde ileri gidin ve sol taraftaki ana kare simgesine tıklayın: görüntü tanımını buraya girin

Gri gözükmeli, endişelenme. Bu sadece bu pozisyonda anahtar kare olmadığı anlamına gelir

Anahtar kare # 2 ve yeni oluşturulan anahtar kare # 3 dönüşümü aynı değerlere sahip olduğundan, şimdi bu iki anahtar kare arasında bir duraklama olur. Ardından, zaman çizelgesinde ileri giderek ve değerleri tekrar değiştirerek normal şekilde animasyona devam edebilirsiniz.

Döndürme veya Opaklık gibi diğer şeyleri canlandır

Sadece bu zamanı, hepsinin aynı pozisyon animasyonları gibi çalıştığını söylemek için harcadım (... eksi sürüklemeden).

Aşağıdaki kısayol tuşlarına bastığınızda görünen sayı sürgülerini kullanın.

Farklı dönüşüm yöntemleri için kısayol tuşları:

  • P - Durum
  • T - Opaklık
  • R - Dönme
  • S - Ölçek
  • A - Dayanak noktası

Sadece nesneleri seçin ve bu kısayol tuşlarından birine basın ve animasyona başlayın. Hiçbir şey seçmezseniz, comp içindeki her nesne için dönüştürme yöntemleri ortaya çıkar.



Nesneleri diğer nesnelere nasıl bağlarsınız

Comp panelinde, her nesnede bir Ana açılır liste göreceksiniz.

Bir nesne için bir üst tanımlamak için kullanabilirsiniz.

görüntü tanımını buraya girin

Daha sonra Ebeveyn'i hareket ettirirseniz, Çocuk öğesinin şimdi onunla birlikte hareket ettiğini fark edeceksiniz. Aynı, Üst öğeye eklediğiniz animasyonlar için de geçerlidir.

Döndürülecek Üst nesneyi canlandırırsanız, Çocuk izler ...



Animasyonunuza esneklik ekleme

Belki de düğme animasyonunun bir duvarın durmadığını fark ettiniz, bunun yerine çok esnek bir şekilde durur.

Efekt Sonrası İfadeler bunu başarmak için kullanılabilir (Daha fazlasını da yapabilir).

İfade komut dosyasını bir animasyona uygulamak Alt+{mouse click}için kronometre ve komut dosyasına yapıştırın.

görüntü tanımını buraya girin

Düğme animasyonumda kullandığım ifade

İlk 3 değişken amp, freq, decay, farklı sonuçlar elde etmek için düzenlenebilir.

Aynı betiği hareket tabanlı animasyonlara da uygulayabilirsiniz. Örneğin, opaklık animasyonu etkilenmez.

Burada da bulunabilir.

amp = .1;
freq = 1.0;
decay = 9.0;
n = 0;
if (numKeys > 0){
n = nearestKey(time).index;
if (key(n).time > time){
n--;
}}
if (n == 0){ t = 0;
}else{
t = time - key(n).time;
}
if (n > 0){
v = velocityAtTime(key(n).time - thisComp.frameDuration/10);
value + v*amp*Math.sin(freq*t*2*Math.PI)/Math.exp(decay*t);
}else{value}


Yavaşlatma ....

Yani bu, yukarıdaki İfade betiği gibi, animasyonun daha az doğrusal görünmesini sağlayabilen başka bir şey.

Bu "dokunmatik gösterge çemberinde" Ease Ease'ı kullandım ve insan hareketine biraz daha fazla baktığımda.

Bir veya daha fazla ana kare seçebilir ve bunlardan birini sağ tıklayabilirsiniz.

Ardından listeden: Keyframe assistant > Easy Ease görüntü tanımını buraya girin

Sık sık Kolay kolaylığı kullanırım çünkü tembelim ...

Resimler ya da olmadı ...

İşte, kolaylaştırma ve bu belirli ifade komut dosyasının animasyon üzerinde nasıl büyük bir etkisi olabileceğini gösteren basit bir konum animasyonu.

görüntü tanımını buraya girin



Animasyonlu kompozisyon / görüntüleri bir ekrana yerleştirme

GUI canlandırıldıktan sonra, cihazın ekranına koymanın zamanı geldi.

  1. GUI comp'i iPhone comp içine yerleştirin, tıpkı görüntüleri bir kompozisyon içine yerleştirdiğiniz gibi.
  2. Proje panelinde iPhone comp öğesini çift tıklatın.
  3. GUI comp seç görüntü tanımını buraya girin
  4. Üst menüden Effects > Distort > Corner pin
  5. Ardından, cihaz ekran köşeleriyle eşleşmesi için her köşeyi sürüklemeniz yeterlidir.

görüntü tanımını buraya girin



.Gif'e dışa aktarma

AE'nin bunu yapmak için yerel bir yöntemi yoktur, ancak endişelenmeyin, yolları var.

Bunu yapmayı tercih ederim:

  1. İçinde bir kompozisyonu tıklayın Projects panel
  2. Composition > Add to render queue Cmd+Ctrl+M
  3. Sonra zaman çizelgesinin normal olarak oturduğu altta, neyi dışa aktaracağınızı ve nereye gideceğinizi seçersiniz.
    • Genellikle kayıpsız .mov ihraç ediyorum
    • "Ayarları düzenle" yi tıklarsanız, bir kare hızı seçebilirsiniz, aksi takdirde Comp kare hızını kullanır.
  4. Sonra sadece sağ üst köşedeki render ya da o panelde.
  5. Dışa aktarılan dosyayı bulun ve photoshop'ta açın.
  6. Web için kaydet Cmd+Shift+Alt+S
    • .Gif olarak kaydet

Dürüst olmak gerekirse o kadar da kötü değil ...



Video dosyası olarak dışa aktarma

Bu nedenle, yukarıdaki yöntem size kayıpsız bir dosyayı nasıl dışa aktaracağınızı gösterse de, video dosyalarını dışa aktarmanız gereken yöntem değildir.

Bunu böyle yaparsın:

  1. Proje dosyanızı kaydedin.
  2. İçinde bir kompozisyonu tıklayın Projects panel(birden fazla varsa)
  3. Composition > Add to adobe media encoder queue Cmd+Alt+M
  4. Bir ön ayarı sağ sütundan sol sütuna sürükleyin
  5. Oynat tuşuna basın.
  6. Dışa aktarma klasörünü seçmezseniz, varsayılan olarak proje dosyasının hemen yanına gider.


Görüntüler nasıl değiştirilir?

Yani AE dosyalarınızı bulamıyor mu? Bunu yap:

  • Proje panelindeki eksik görüntülerden birine sağ tıklayın
  • Listeden Replace footage > File...
  • Çekimlerinizi ve diğer şeylerinizi bulun


Diğer kullanışlı kısayol tuşları

  • U- Comp içindeki tüm kullanılan ana kareleri gösterir (seçili hiçbir şeyiniz yoksa). Örneğin, aynı anda birden fazla anahtar kareyi taşımanız gerektiğinde gerçekten faydalıdır.
  • U( İki kez dokunma ) - Değiştirilen her şeyi gösterir.
  • E( İki kez dokunma ) - Tüm kullanılan İfadeleri gösterir.
  • J - Bir önceki ana kareye gider.
  • K - Bir sonraki ana kareye gider.
  • space - comp oynatır
  • Iveya hometuşu - Geçerli zaman göstergesini zaman çizelgesinin başına taşır.
  • Cmd+K - Mevcut kompozisyon ayarları.
  • Cmd+I - Dosyaları al.
  • Alt+{Arrow keys left and right} - Anahtar kareleri seçin ve hareket etmek için kısayol tuşlarına basın.
  • Alt+Shift+{Arrow keys left and right} - Anahtar kareleri seçin ve hareket etmek için kısayol tuşlarına basın.


Proje dosyaları bulunabilir here.


@ Nagarjun Burada ele alınmayan bir şey bulursanız, bana haber verin.
Joonas

Elbette! Tekrar teşekkürler! Bu cevabın yanında sizden bahsedebileceğim bir Twitter hesabınız var mı? Eminim bir çok insan bunu okumayı çok ister.
Nag,

@ Nagarjun Peki hayır, ama isterseniz doğrudan bu asnwer ile bağlantı kurabilirsiniz .
Joonas

@Joonas Bu cevabın çok daha fazla skoru olmalı ... son derece profesyonel ...
LCarvalho 5:17

6

Bir web kaydırma dow BU IS ÜCRETSİZ ANİMASYON maketini PSD DOSYA bir menü animasyon tamamen düzenleme ve photoshop animasyonlu düzenlemek saçma kolay ve oynamak, ücretsiz olarak dosyayı indirebilirsiniz burada ben de ne kadar bir öğretici video var, Bu freebie düzenlemek kolaydır. görüntü tanımını buraya girin


4

Bu yazının yorumlarına bakarsanız, adam Adobe After Effects’i kullandığını söylüyor http://www.adobe.com/tr/products/aftereffects.html


1
Mobil tasarım hareketlerini mükemmel şekilde taklit edebiliyorlar mı? After Effects'in bu tür ihtiyaçlar için özel olarak üretilmediğini, ancak bunun genel bir hareketli grafik aracı olduğunu anlıyorum.
Nag,

3
Eğer biraz googling yaparsanız, Aftereffects'te UI'yi canlandırmakla ilgili birçok kaynak var. İşte başlamanız için bazı kaynaklar: news.layervault.com/stories/…
Sci

3

Bunu yapmanın iki yolu var.

  1. İstediğiniz animasyonları bir animasyon programında (After Effects birdir) yeniden yaratın / kopyalayın ve sonra bunu animasyonlu bir gif olarak dışa aktarın. Açıkçası (sizin fark ettiğiniz gibi) bu da neler olduğunu göstermek için “sahte” dokunuşlar ve diğer etkileşimler yaratmayı içerecektir.

  2. İşlevsel bir prototip oluşturun ve daha sonra cihazınızdan çıkan çıkışı AppleTV veya HDMI çıkışına benzer şekilde televizyonunuza iletilir.

Her ikisi de inanılmaz derecede zaman alıcı ve dergiler kendi başlarına.

Ancak seçenek 2, seçenek 1'e göre ENORMOUS avantajlarına sahiptir.

Bundan çok daha büyük olsa da, bazı çok temel etkileşimli programlama yeteneği sayesinde, Animasyon yazılımı kullanan birinden çok daha hızlı varyasyonlar ve alternatif yaklaşımlarla yinelenebileceksiniz.

Ve tasarımınızı göstermek için gerçekten etkileşimli bir şeye sahip olacaksınız. Ayrıca sanat eseri aslında cihaz üzerinde etkileşimli bir ortamda test edilmiştir, bu yüzden zaten piksel ve renk mükemmel olduğundan emin olabilirsiniz.

Ama bekle biliyorum. Korkuyorsun. Zor olacak, değil mi?

İPad'iniz yoksa.

Codea, dünyadaki en basit, en temiz betik diliyle önemsiz (ve ÇOK karmaşık) animasyonlar ve etkileşim kurmanın en ucuz ve en hızlı yoludur ... Lau.

http://codea.io

İPad'iniz yoksa, bir tane alın.

O zamana dek, aynı şekilde ilginç örnekler oluşturabileceğiniz için learning processing.org ile devam edin:

http://processing.org/

İşleme Javascript denilen başka bir betik dili kullanır. Benzer şekilde basit, ama Lua kadar zarif değil.


3

Ayrıca, Keynote'u kullanarak UI'nin animasyonunu oluşturabilirsiniz. UI animasyonları oluşturmak için oldukça basit ve mükemmel. Sonra efektleri sadece videoyu Telefona yerleştirmek için kullandım.

Adım 1: İlk önce UI animasyonunu açılışta hazırladım ve bunu yaptım: http://vimeo.com/108991829

Adım 2: Daha sonra çevrimiçi bulduğum ve .mov dosyasını kaydettiğim mockup efektlerinden sonra videoyu bir iPhone'a yerleştirdim. Bu videodaki talimatları takip ederek: http://youtu.be/VeZGwjVwDrc

Adım 3: Photoshop yardımıyla ve talimatları izleyerek bunu yaptım.

görüntü tanımını buraya girin


-1

Keynote'a bağlı kalmak ve Quicktime formatı olarak dışa aktarmak istiyorsanız, denemenin zarar vermeyebileceğini düşünüyorum:

GIF Brewery görüntü tanımını buraya girin

GIF Brewery, kısa klipleri video dosyalarınızdan GIF'lere dönüştürmenize olanak tanır. En yeni kedi GIF’i oluşturmak veya daha uzun bir videonun önizlemesini sunmak isteyip istemediğinize göre, GIF Brewery tam size göre.

Artık filmlerinizden kareler çıkarmamalı ve Adobe® Photoshop® uygulamasında katmanlarla oynamalısınız. Bunun yerine, GIF Brewery'nin tüm sıkıcı işleri sizin için yapmasına izin verin.

Ek olarak, GIF Brewery yaratıcılığınızı ifade etmek için birçok başka özellik içerir. Diyaloğu yeniden oluşturmak için başlıklar ekleyebilir veya birden fazla görüntü filtresi ekleyebilirsiniz.

Gerçi @ Joons'tan verilen tüm talimatları gerçekten çok seviyorum.

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.