Portföyünüz için tasarımın animasyonlu GIF ekran görüntülerini oluşturmanın 3 yolu

En son web tasarım projeniz tamamlandıktan sonra, onu sergileme ve portföyünüze ekleme zamanı. Web sitenizin ziyaretçileri (ve potansiyel müşterileriniz!), harika çalışmalarınızı çalışırken görmek isteyecektir. Harika görüntüler anahtardır ve dijital alanda proje işlevselliğini göstermek istediğiniz zamanlar olacaktır. Animasyonlu ekran görüntüleri ile göstermek mükemmel bir çözüm olabilir.

Uygulamaların veya web sitelerinin nasıl çalıştığını bize gösteren harika, basit animasyonlu ekran görüntülerini görmüşsünüzdür. Ekran görüntülerinin GIF'leri, kullanıcıya belirli görevlerin nasıl gerçekleştirildiği konusunda daha iyi bir fikir verirken, hangi özelliklerin mevcut olduğunu da gösterir. Video kesinlikle bir seçenektir ve kesinlikle web üzerinde önemli bir yere sahiptir. Derinlemesine ürün videoları veya vaka çalışmaları kesinlikle bir video formatından yararlanır. Ancak, animasyonlu ekran görüntüsü GIF gibi daha basit, dosya boyutuna daha duyarlı bir seçim tam da aradığınız şey olabilir.

Portföyünüz için animasyonlu ekran görüntüleri neden önemlidir?

"GIF" veya "JIF" olarak telaffuz etseniz de, GIF'lerin komik kedilerden ve akıllıca bir slogana sahip film kliplerinden daha fazlası olabileceğini unutmamak önemlidir. Projelerinizin animasyonlu GIF'leri göz alıcı olmalı ve tasarım işlevselliğini gösterecek şekilde dikkatlice planlanmalıdır. Arayüz öğelerini canlandırmak hem işlevsel hem de estetik bir amaçtır, bu nedenle bir GIF dosyası bunu gösterir. Menüyü ve çalışmanızın sunduğu seçenekleri göstermeye ne dersiniz? Kaydırmanın nasıl çalıştığını göstermeye ne dersiniz? İşlevselliği göstermek, kullanıcının uygulamanın veya web sitesinin onlara nasıl yardımcı olabileceğini açıkça görmesine yardımcı olur.

GIF yapmak için araçlar

Sıkı çalışmanızı göstermenin aşağıdaki GIF'ler oluşturmak için kullanılan araçlardan birini kullanmaktan daha iyi bir yolu yoktur. Aşağıdaki örnekler, bir kullanıcı bir seçeneğe dokunduğunda, daha fazla ayrıntı görüntülediğinde ve ardından daha fazla içerik görmek için kaydırdığında nasıl göründüğünü gösterecektir.

Not : Bu eğitimde herhangi bir görsel tasarım talimatı olmayacak; bu ipuçları, portföy projeniz için web sitesi veya uygulama tasarımının zaten yapıldığını varsayar.

Adobe Photoshop'ta animasyonlu GIF ekran görüntüleri nasıl oluşturulur

Bana göre Adobe Photoshop ve Adobe After Effects bu iş için en iyi araçlar. Her ikisi de nihai ürün üzerinde çok fazla kontrol sağlar. Ben şahsen Photoshop'u GIF ekran görüntüleri yapmak için seviyorum (ve çoğu tasarımcı buna çok aşinadır), bu yüzden aşağıdaki örnek bu şekilde oluşturulacak. Başlayalım!

Kaydırma işlevi gösteriliyor

Bu tasarım Adobe XD'de yapıldı ancak daha sonra uygun şekilde adlandırılmış katmanlarla Photoshop'a aktarıldı. Örnek, liste sayfası için "MinTour Konumları Listesi", ayrıntılar sayfası için "Heykel Bahçesi Listesi" adlı bir katmana sahiptir ve ilk kaydırma görünümünün dışında kalan kısım "Heykel Bahçesi Listeleme Taşması" olarak adlandırılır.

Bölüm Bir

1. Zaman çizelgesi kurulumu ve konum listesi

Zaman Çizelgesi özelliği, nihai ürün için farklı ekranlar oluşturmak için kullanacağımız şeydir. Pencere > Zaman Çizelgesi'ne giderek Zaman Çizelgesi Panelinin açık olduğundan emin olun.

İşte listeleme sayfası; kullanıcı buradan başlar, bir konuma dokunur ve daha fazla ayrıntı görmek için kaydırabilecekleri ayrıntılar sayfasına ulaşır.

Zaten kurulmuş bir ilk animasyon karesi olduğunu göreceksiniz. Ana karede doğru görünümün gösterilmesi için doğru katmanların gösterildiğinden emin olun.

İsteğe bağlı: Kullanıcının dokunduğu yeri göstermek isterseniz, bu bazen bir nokta ile gösterilir. Bunu yapmak için nokta alanlı fazladan bir çerçeve ekleyin.

2. Bireysel konum ayrıntıları

Katmanlarla düzenleme yeteneği büyük bir avantajdır ve ekran yakalama GIF'inizi oluştururken her şeyi düz tutmanıza yardımcı olur. Zaman Çizelgesi panelindeki seçeneklere gidin ve “Yeni Kare”yi seçin. Burada da aynı şey – doğru katmanların gizlendiğinden/gösterildiğinden emin olun. Bunun için bireysel listenin gösterilmesine ihtiyacım vardı, bu nedenle konum listesi katmanı gizlendi.

3. Bireysel konum ayrıntıları kaydırma içeriği

Sculpture Garden için ayrı listeleme sayfası daha fazla içeriğe sahiptir, bu nedenle kaydırma alanı kullanıcıya gösterilmelidir. Bu ayrı bir katmandaydı, bu yüzden bu taşma içeriğini göstermek için yeni bir çerçeve oluşturdum.

4. Süreleri seçin

Bu biraz deneme gerektirebilir, ancak her kare için süreyi seçmek önemlidir. Kullanıcının her kareyi görmek için yeterli zamana sahip olmasını istiyorsunuz, ancak bir sonrakini görmek için çok uzun süre beklemek zorunda kalmamalıdır.

Her kare için değerler koydum, tüm animasyon için toplam beş saniye.

5. Önizleme

Şu ana kadar neler olup bittiğine bakmakta fayda var. Zaman Çizelgesi panelinin alt satırında bir oynat düğmesi vardır. Bir şeyler deneyin ve geliştirilebilecek bir şey olup olmadığını görün.

(İsteğe bağlı) ara kontrolü

İşler doğru sıralanmış, ancak biraz gergin görünüyorlar. Ekran görüntüsü animasyonları, işlerin biraz daha yumuşak görünmesini sağlamak için ayarlanabilir. Zaman Çizelgesi seçeneklerinden bir “Tween” seçeneği vardır. Geçerli ve önceki kare arasında otomatik olarak düzgün bir animasyon yapmak için otomatik olarak daha fazla kare eklenebilir.

Listeden liste taşmasına kadar, daha çok bir kaydırma eylemi gibi görünmesi için Tween eklendi. Bu yeni kareler çok kısa bir süre .05sn olacak şekilde ayarlandı (bir uygulamada kaydırma nispeten hızlı gerçekleşir).

Bunun Photoshop'ta döngüye devam etmesini istiyorsanız, "Sonsuza Kadar"ın seçili olduğundan emin olun. Belirli sayıda döngü varsa, o değer girilebilir.

6. Ekran yakalama GIF'ini kaydetme (yalnızca ekran akışı)

Bunu yalnızca hareketli bir ekran akışı olarak eklemek istiyorsanız, kaydetme son adım olacaktır. Şu anda, ekran görüntüsü animasyonu oluşturulur, sadece doğru GIF formatında kaydedilmesi gerekir. Statik bir görüntüyü kaydetmeye alışmış olabilirsiniz, ancak bir dizi görüntüyü kaydetmek farklıdır. Bu GIF dosyasını kaydetmek için Dosya > Web için Kaydet'e gidin.

Burada GIF'iniz için ihtiyaç duyacağınız tüm ayarları göreceksiniz. Unutmayın, renk sayısıyla sınırlısınız, bu nedenle dışa aktarmadan önce en iyi görünen şeyleri elde edeceğiz. Web siteleri ve uygulamalar geniş bir renk yelpazesine sahip olma eğiliminde olduğu için 256 büyük olasılıkla en iyi seçenektir, ancak tasarımınız buna izin veriyorsa, basitleştirebilirsiniz (bu, dosya boyutunu küçültür).

Ayrıca sağ alt köşede bazı “Animasyon” ayarları vardır; Bunun süresiz olarak dönmesini istiyorsanız Döngü'yü seçebilirsiniz. Dilerseniz belirli sayıda döngü de yapabilirsiniz. İstediğiniz yere kaydedin ve gitmeye hazır!

İkinci bölüm: Bir cihazda bulunan katmanlı ekranlar

Devam etmeye karar verdiyseniz, telefonda daha gerçekçi görünmesi için katman oluşturmak için bazı ek adımlar gerekir. Zaman Çizelgesi panelinden "Kareleri Katmanlara Düzleştir"i seçin. Her kare, 26 kare olacak şekilde düz bir katmana dönüştürülecektir (yani 26 katman vardır).

Bu kaydedildikten sonra, telefon görüntüsünün dosyaya eklenmesi gerekecektir. Buna uyum sağlamak için, görüntü boyutunun bir miktar yeniden boyutlandırılması yapılması gerekecektir.

1. Animasyonlu ekran görüntüsünüz için tuval boyutunu ayarlayın

Arka plan görüntüsü 1300 X 920'dir, bu nedenle tuval boyutunun tam olarak buna uyacak şekilde ayarlanması gerekir. Görüntü > Tuval Boyutu'na gidin ve doğru boyutları girin.

2. Katmanları telefon ekranına yerleştirmeye hazır hale getirin

Ardından, animasyonun üstte katmanlanabilmesi için arka plan görüntüsü için yeni bir katman oluşturun. "Tümünü Seç" çerçeve katmanlarının kullanışlı olacağı yer burasıdır.

3. Çerçeveleri çift kontrol edin

Çerçevelerin hala planladığınız gibi olduğundan emin olmak için iyi bir zaman. Animasyonu Zaman Çizelgesi panelinden oynatırsanız, sekansın canlandırıldığını göreceksiniz.

4. Ekranları eğin

Tüm ekran katmanlarının aynı anda eğrilmeleri için seçilmesi önemlidir. Düzenle > Dönüştür > Eğt , bunun yapıldığı yerdir.

Biraz deneme yapmak gerekecek, ancak köşeleri ekranın sınırlarıyla aynı hizaya gelecek şekilde ayarlayın, bu da ona ekranın animasyonla aydınlatıldığı yanılsamasını verir.

5. Görüntü ayarlamaları ve GIF ekran görüntüsünü kaydetme

Şimdi herhangi bir ayarlama yapma zamanı. Kaydetmeden önce renk, kontrast veya diğer son dokunuşlar yapılmalıdır. Animasyonu kaydetmek, Bölüm bir, adım 6'da yapılanla aynıdır.

Bu örnekte, animasyonun gerçekten öne çıkması için arka planın doygunluğu azaltıldı ve kontrast artırıldı. Şimdi gerçek bir cihazda görünüyor!

Çingene

Photoshop tercih ettiğiniz araç değilse, Giphy adında ücretsiz ve kolay bir araç var. (Profesyonel kullanıma ek olarak çok sayıda komik GIF de yapabilirsiniz!)

"Slayt gösterisi"ni seçerseniz, bu, animasyonlu ekran görüntüsü oluşturmak için iyi bir seçenektir. Bunu kullanmak için, kaydedilmiş ekranların ayrı dosyalarının olması gerekir. Ardından hareketsiz görüntüleri sürükleyip bırakacaksınız ve süreç başlayacak.

Dosyalar yüklendikten sonra “Slayt Gösterisi Oluştur”u seçin. Görüntüleri bir araya getirmeyi tamamladığınızda dosyayı indirebilirsiniz. Bu kadar basit!

Onu kaydet

Bu uygulama oldukça basittir; bilgisayar ekranınızda gerçekleşen eylemi kaydeder ve kaydı Recordit.io web sitesine yükler ve GIF'i indirme seçeneği ile paylaşılabilir bir bağlantı oluşturur.

Recordit bilgisayarınıza kurulduğunda, görev çubuğunda bir simge belirir. Seçildiğinde, ekranınızın kaydetmek istediğiniz alanına sürükleyip seçebilirsiniz. Adobe XD'de önizleme moduna geçtiğimde ve tanıtım için bir prototip kullanabildiğimde bu mükemmeldi.

Dahil edilecek alanı seçtikten sonra bir kayıt düğmesi görünür. “Kaydet”e bastığınızda, Recordit oluşturduğunuz sınırlar içinde ekranınızda olan her şeyi kaydeder. Kaydı tamamladığınızda, sadece “Durdur”u seçin.

Birkaç saniye sürecek, ancak kayıt durdurulduktan sonra, sizi Recordit.io sitesinde barındırılan kayda götüren bir bağlantı içeren bir açılır pencere olacaktır.

Ekran görüntülerinin animasyonlu GIF'leri, kullanıcı akışını ve tasarım projelerinizin nasıl çalıştığını göstermenin harika bir yoludur. Videonun da yeri var, ancak GIF'ler çok hızlı bir şekilde oluşturulabilir ve çevrimiçi portföyünüze kolayca eklenebilir.

Ücretsiz çalışma sayfası: Hedef kitle ve müşteri kişiliği

İçeriğinizi ilişkilendirebilir ve ilgi çekici tutmanıza yardımcı olacak eyleme geçirilebilir bir rehber mi arıyorsunuz? Bu üç sayfalık etkileşimli PDF, hedef kitlenizi bulmanıza, içeriğinizi denetlemenize ve işinizi büyütmek için bir oyun planı oluşturmanıza yardımcı olacaktır.

Bu makaleyi beğendiyseniz, şunlardan da yararlanabilirsiniz:

• CSS ile SVG animasyonları nasıl oluşturulur
• WordPress video galerisi nasıl oluşturulur
• WordPress sitenizi daha erişilebilir hale getirmek için atlama bağlantıları nasıl kullanılır?