İnternette animasyon uzun zamandır basit bir sayfa dekorasyonu olmaktan çıktı ve kullanılabilirliği geliştirmek için kullanışlı bir araç haline geldi. Kullanıcının arayüz ile etkileşimine yardımcı olur, önemli noktalara dikkat çeker.
Animasyon, benzer karelerin birbiri ardına sıralı gösterimidir. Her kare biraz değişir, bu nedenle resim hareket ediyormuş gibi görünür.
Arabirimi canlandırmak, etkileşimli prototipler veya reklamlar oluşturmak için, örneğin Adobe Animate veya After Effects gibi özel programlar kullanılır.
Basit bir web banner'ı veya sunumu oluşturmak için özel programlarla uğraşmaya gerek yoktur. Yerleşik Photoshop araçları da bunun için uygundur.
İlk adım, neyi canlandıracağımıza ve hangi sonucu elde etmeyi planladığımıza karar vermektir.
Animasyonu oluşturmak için Behance'den parlak projelerden birini aldım ve Photoshop'ta yeniden çizdim. İçerik ızgarasına hizalandı, boyutları aldı ve her öğeyi ayrı bir katmana yerleştirdi. Sonuç olarak sitenin ilk ekranını PSD formatında oluşturdum ve ardından animasyonunu yaptım.
Bir animasyon oluşturmadan önce, gerekli araçları hazırlamanız gerekir - animasyondaki kareleri yönetmenize yardımcı olan "Zaman Çizelgesi" ekranını açın.
Bunu yapmak için "Pencere" sekmesini açıp "Zaman Çizelgesi" satırının yanındaki kutuyu işaretliyorum.
Photoshop'ta pencerenin altında, animasyondaki kareleri kontrol edebileceğiniz geniş bir çubuk görünmelidir.
İlk kareyi oluşturmak için Timeline üzerinde Create Frame Animation ikonuna tıklıyorum.
İlk kare göründükten sonra hareket oluşturmaya başlayabilirsiniz.
Photoshop'ta bir öğe birkaç şekilde canlandırılabilir:
Önce balalayka görüntüsünü canlandırıyorum. Görüntünün düzgün görünmesi için "Ara çerçeve ekle" aracını kullanıyorum. Photoshop'un bir öğeyi kendi başına canlandırabilmesi için öğe için iki durum ayarlamanız gerekir - ilk karede başlayıp sonrakinde biter.
Bu yüzden, Çoğalt Kareler düğmesini kullanarak Zaman Çizelgesi'ne başka bir kare ekleyeceğim.
Yeni bir çerçeve ekledikten sonra ilkine geçiyorum ve balalayka tabakasının görünürlüğünü kaldırıyorum. Katman opaklığını %0 olarak da ayarlayabilirsiniz.
Sonraki karede ise balalayka tabakasının görünüp görünmediğini kontrol ediyorum.
Balalayka görüntüsü ile çalıştıktan sonra, bir metin satırının görünümünü kurdum. İlk karede "Ruh şarkı söylüyor" metnini seçiyorum ve onu düzenin dışına sağa taşıyorum. Aynısını “3 dize” metniyle yapıyorum - kaybolana kadar sola kaydırıyorum.
İkinci karede metni geri döndürüyorum.
Harika. Şimdi anahtar kareler arasına ara kareler ekleyelim.
Bunun için "Zaman Çizelgesi" üzerinde "Ara kareler oluştur" butonuna tıklıyorum.
Görüntülenen iletişim kutusunda kaç kare ekleneceğini belirtin.
Ne kadar çok kare olursa, animasyon o kadar uzun olur ve öğe o kadar düzgün hareket eder. Çok az çerçeve varsa, öğeler sarsıntılarla hareket eder.
Animasyonun ilk bölümü hazır. Şimdi tekrar oynatabilir ve ne olduğunu görebilirsiniz.
Zaman Çizelgesi'ndeki oynat düğmesine basıyorum.
Ara karelerin eklenmesi, öğelerin düzgün görünümü ve hareketi ile hızlı bir şekilde animasyon oluşturmaya yardımcı oldu.
Görünüm, kaybolma ve hareket, daha da ilginç efektler elde etmek için birbirleriyle birleştirilebilir.
Doğrusal animasyona ek olarak, bazen kaotik hareket oluşturmanız veya öğelerin karmaşık etkileşimini göstermeniz gerekir. Genellikle bunun için, ilk karenin birkaç kopyası oluşturulur ve ardından her kopya biraz değiştirilir - animasyon kare kare çizilir.
Okun hareketini ve "alışverişe git" metnini oluşturmak için son kareyi birkaç kez kopyalayacağım.
Bir sonraki karede, metin ve ok ile istenen katmanı seçiyorum, biraz yukarı ve son karede - aşağı hareket ettiriyorum.
Artık animasyonu çalıştırabilir ve sonucu görebilirsiniz.
Çerçeveler hızla değiştiği için gözlerin son kareye odaklanması ve nesnelerin ekrandaki son konumunu sabitlemesi için zamanı yoktur.
Bu nedenle, son karenin süresini artırdım: "0 sn" yazısının yanındaki oka tıklamanız gerekiyor. ve listeden başka bir zaman seçin.
Son kare için süreyi iki saniyeye ayarladım. Şimdi oynatma sonunda yavaşlıyor. Bu nedenle, elemanların hareketini gözlemlemek rahattır.
Önizleme penceresinde animasyonu tekrar görüntüleyebilir ve kaydetme ayarlarını değiştirebilirsiniz.
Varsayılan olarak, animasyon oynatıldıktan sonra durur. Bu nedenle, oynatma modunu "Tekrar" olarak değiştirip kaydediyorum.
İşte ortaya çıkan animasyon:
Photoshop'ta kısa etkileşimli afişler ve sunumlar oluşturmak ve tek tek öğeleri canlandırmak kolaydır. Sonuçla deney yapmak uygundur.
Yeni bir boyut dosyası oluşturun 700 x 300 piksel.
pencereyi açma Zaman çizelgesi( (Pencere - Zaman Çizelgesi)).
Düğmeye tıklayın " Çerçeve Animasyonu Oluştur» (Çerçeve animasyonu oluşturun).
() oluşturma aracını kullanarak 3 metin içeren katman ("Animasyon", "bu", "sadece").
Araç (Move Tool / V Tuşu) ile metni aşağıdaki görseldeki gibi yerleştiriniz.
Pencerede Zaman çizelgesi(Zaman Çizelgesi) ilk kareyi seçin ve « düğmesine tıklayın Seçilen kareleri çoğaltır» (Seçilen karelerin bir kopyasını oluşturun).
Biz yaratırız 4 seçilen çerçevelerin kopyaları.
pencerede seçin Zaman çizelgesi(zaman çizelgesi) ikinci kare ve yalnızca katmanları görünür bırakın " Animasyon" ve " Arka fon».
Seçmek dördüncü kare ve görünür bırakın tüm katmanlar.
Animasyonumuz için tekrar parametresini ayarlayalım. Pencere menüsünde Zaman çizelgesi(Zaman Çizelgesi), tekrar parametresini " olarak değiştirin bir Zamanlar" üzerinde " Sürekli” (aşağıdaki resim).
Şimdi oynamaya başlamak için animasyonu kullanabiliriz.
"Dosya - Web için Kaydet" (Dosya - Web için Kaydet) Photoshop CC'de animasyon ayarları. Son sonuç 
Bir animasyon yapmak için olağanüstü bir bilgiye sahip olmak gerekli değildir, sadece edinmeniz gerekir. doğru araç ve doğru şekilde kullanın. Bu tür birkaç çözüm var, ancak bunların en ünlüsü Adobe Photoshop. Bu makale, içinde nasıl hızlı bir şekilde animasyon oluşturulacağını gösterecektir.
Photoshop bilgisayarınızda yoksa, yukarıdaki bağlantıdan indirin, ardından bu makaledeki talimatları izleyerek yükleyin ve çalıştırın.
Şimdi onlara animasyonda gösterilecekleri çizebilirsiniz. Basit örneğimizde, bu hareketli bir kare olacaktır. Her katmanda birkaç piksel sağa hareket eder.
Herşey! Animasyon hazır. Sonucu butona tıklayarak görüntüleyebilirsiniz. "Animasyon Oynatmayı Başlat". Ve sonra olarak kaydedebilirsiniz gif.
Bu kadar basit ama kanıtlanmış bir şekilde Photoshop'ta bir GIF animasyonu yapmayı başardık. Tabii ki, kare süresini azaltarak, daha fazla kare ekleyerek ve elbette siyah kare yerine daha orijinal ve niteliksel olarak daha iyi bir şey yaratarak büyük ölçüde geliştirilebilir. Ancak bu zaten tercihlerinize, arzularınıza ve becerilerinize bağlıdır.
CS3 Extended sürümünden başlayarak, animasyonlu çalışma mevcuttur. Gif çizimleri, bir dizi çerçeveden veya doğrudan videolardan oluşturulur. Yani site, avatarlar, sunumlar için dinamik bir resim yapacak mısınız? tebrik kartı. Benzer grafikler başka projelerde veya kurulum sırasında kullanılabilir. Bu tür bir görüntüyle özgürce çalışmak için Photoshop'ta nasıl animasyon yapacağınızı öğrenin.
Adobe Photoshop, animasyon oluşturma dahil birçok özelliğe sahiptir.
Bunu yapmak için bir sanatçı veya tasarımcı olmanıza gerek yok. Tüm işlevler yeni başlayanlar için bile açıktır. Tüm gereken, gif dosyasının oluşturulacağı ilk çerçeve kümesidir.
En kolay yol, videoyu animasyona dönüştürmektir. Hiçbir şey yapılandırmanıza gerek yok. Videoyu Photoshop'ta açmanız yeterlidir. Yardımcı program avi, mov, mp4, mpg, mpeg, m4v formatlarını kabul eder. Bunları doğru şekilde çalıştırmak için QuickTime'ın kurulu olması gerekir. Bu şekilde eklenen medya dosyası düzenlenemez veya kırpılamaz. Sadece grafiklere dönüştürün.
Ama başka bir yöntem var. Photoshop'ta bir filmden nasıl gif yapılacağı aşağıda açıklanmıştır:
Photoshop'ta resimleri kullanarak nasıl animasyon oluşturacağınız aşağıda açıklanmıştır:
Büyük bir düzen oluşturuyorsanız, bu yöntem uzun zaman alacaktır. Bu durumda aşağıdakileri yapabilirsiniz:
Video slaytlarında olduğu gibi görüntülerde de aynı eylemler mevcuttur.
Photoshop'ta animasyonun nasıl kaydedileceğini bulmak da önemlidir. Bir psd dosyası veya jpg, bmp, png uzantılı “statik” bir resim olarak biçimlendirilirse hiçbir anlamı olmayacaktır. Hareket etmek, dönüştürmek veya titremek yerine donmuş bir kare elde edersiniz. Bir dizi dönen çizim yapmak için belgeyi GIF formatına dönüştürmeniz gerekir.
Photoshop'ta nasıl animasyon yapılacağını bulmak yeterince kolaydır. Profesyonel bir web tasarımcısı olmasanız bile böyle bir görüntü oluşturabilirsiniz. Kendi ellerinizle bir araya getirilmiş eşsiz bir sanat eserine sahip olacaksınız.
İyi akşamlar, sevgili aboneler ve sadece blogumun okuyucuları! Resminize nasıl hayat vereceğinizi öğrenmeye hazır mısınız? Ve sihrin yardımıyla değil, en sevdiğimiz photoshop'un yardımıyla! Nedenini bilmeden bu dersi ne kadar erteledim. Sonuçta, bu Photoshop'un temelleri! Ama artık değişmeye karar verdim.
Ve o kadar geliştirin ki, videonun sonunda sizinkinin de nasıl yapılacağına dair bir video dersi olacak. photoshopta animasyon yapma.
Uzun zamandır Photoshop dersleri yazmıyorum ve nedenlerim vardı. Sonuçta, “” hikayemi bitirdim. Okuyabilir ve görüşlerinizi doğrudan yorumlarda belirtebilirsiniz!
Ve şimdi doğrudan derse gidelim. Aşağıdaki videoda yavaş yavaş eklenen metnin nasıl yapıldığını anlatacağım ama metin dersinde görev biraz daha karmaşık olacak.
Cipollino elimizde ve bize elini sallamasını sağlamamız gerekiyor.
Aşama 1.Öncelikle Photoshop'ta animasyonu "etkinleştirmeniz" gerekir. Bunun için gidiyoruz “Pencere”->”Animasyon”. Hala yazılabilir "Zaman çizelgesi".
Adım 2 Kolun hareket etmesi için kesip farklı pozisyonlara koymamız gerekiyor. El kesimi için bizzat kullanıyorum "Manyetik Kement". Ana metnin bir kopyasını yapmak Ctrl+J) ve kopya ile çalışın. Orijinaline dokunmuyoruz.
Eli dikkatlice seçin ve kesin!
Aşama 3 Ve şimdi kulağa ne kadar korkunç gelirse gelsin elimizi sokup farklı pozisyonlara koyuyoruz. El yeni katmanlara yerleştirilecek, hatta bize yakışıyor.
4. Adım Bu adım isteğe bağlıdır, ancak daha doğal hale getirmek için eli biraz rötuşlamak için Silgi aracını kullanmak daha iyidir. Elbette kelimelerle açıklamak zor. Silgiyi neden kullandığımızı anlıyorsanız bu adımı izleyin, hala anlamadıysanız atlayabilirsiniz. Bu önemli değil, çünkü bizim için en önemli şey basit bir animasyonun nasıl oluşturulacağını öğrenmek!
Adım 5Şimdi personelle çalışıyoruz. Her kareye yalnızca ihtiyacımız olan katmanları dahil ediyoruz. Örneğin, çerçeve 1'de orijinalimize ihtiyacımız var ve bizim durumumuzda "Katman 0".
Şimdi yeni bir çerçeve oluşturuyoruz:
Ve zaten yeni çerçevede diğer katmanları açıyoruz. yani, bizim "Katman 0 kopyası" ve "Katman 1", yani, elin farklı bir konumu. Umarım algoritma sizin için açıktır, sevgili okuyucular.
6. AdımÇerçeve gecikmesini ayarlayın. Yani, bir sonraki karenin hangi süreden sonra gösterileceği.
7. Adım Biz bizimkini tutuyoruz. Bir GIF animasyonunu kaydetmek sadece bir görüntüden biraz farklı olduğundan, bu adımı eğitimime dahil etmem boşuna değil.
Biçimi seçin (varsayılan GIF'dir) ve kaydedin.
