NASIL ?

Detaylı: Hareketli .Gif(Logo-Banner vs) Yapımı

.gif yani hareketli grafikler, özellikle tasarım ve web işleriyle uğraşanların en çok kullandığı formatlardan bir tanesi. Banner/reklam yapımında logo yapımında daha sıklıkla kullanılıyor. Bende bu yazımda Adobe Photoshop ile detaylı  hareketli .gif(logo,banner vs) yapımını klavyeme aldım.

.gif Nedir ? Ne İçin Kullanılır ?

.gif Örneği:

Gif’in ingilizce açılımı; Graphics Interchange Format’dır. Bu da Grafik Değiştirme Biçimi anlamına gelir. Nasıl ki .jpeg gibi çok bilinen fotoğraf uzantıları varsa, .gif de aynı tür uzantılardandır. Ancak .gif daha çok hareketli grafik işlemleri için kullanılır. Aynı zamanda sayısal grafik sıkıştırma biçimi olan GIF, kayıpsız sıkıştırma kullanıyor ve 8-bit renge (yani 256 renge) kadar destek veriyor.

.gif Nasıl Yapılır ?

Gif yani hareketli grafikler artık sadece photoshop gibi grafik programlarıyla yapılmıyor. Online gif (maker) yapma siteleri de mevcuttur. Örn: https://ezgif.com/maker adlı siteye fotoğrafları yükleyerek birleştirip .gif oluşturmasını sağlayabilirsiniz.

Anlatması daha basit olduğundan, photoshop ile yazılı .gif yapma‘yı size anlatacağım. Eğer aklınıza takılan bir yer olursa, yorum yazarak sorununuzu bildirebilirsiniz.

# Photoshop’u .Gif için hazırlayalım

1: Adobe Photoshop’u Açalım. Ardından menülere gelerek 2: Window (pencere) – Timeline (zaman çizelgesi)‘ni açalım

# İstediğimiz boyutta bir sayfa açalım. Ben küçük bir şey yapmak istedim. O yüzden 320*100 boyutlarını tercih ettim. Bunun için Dosya (file) – Yeni (new)‘ye tıklıyoruz. *Kısa Yol: CTRL-N 

# Ben yazılarla bir .gif oluşturacağım. Öncelikle benim yaptıklarımı tekrar edebilir, mantığını kavrayabilirsiniz. Daha sonra hareketli fotoğraf, hareketli logo ve şekillerle süsleyebilir, yeni gifler oluşturabilirsiniz.

# Boyutunu oluşturup açtığınız yeni sayfanın arkaplanını, emirname.com‘un arkaplanını kullanarak oluşturdum. Siz herhangi bir renge de boyayabilirsiniz. İcon, resim veya sembol koyarak arkaplan oluşturabilirsiniz. 1: Masaüstündeki grafiği tutarak, adobe photoshop’un içerisine atıyorum. Dosya/Aç menülerini seçerek de fotoğrafı photoshop’a alabilirsiniz. 2: Daha sonra, çalışmamın/layerin üzerine bir yazı yazıyorum.

# 1: Yazıyı yazdıktan sonra, yazdığım yazının layerinin yanındaki göz sembolünü kaldırıyorum ve böylece ekrandan silinmesini sağlıyorum. Daha sonra, ilk yazımdan sonra gelecek yazıyı yazacağım.

2: Gözü kaldırdıktan sonra, ilk yazının ardından gelmesini istediğiniz yeni yazıyı yazın.

3: İkinci yazımızı yazdıktan sonra, aynı işlemleri uygulayarak yazıları çoğaltabilirsiniz. Yada yazıdan sonra bir sembol koyabilirsiniz.

# Yazma işlemim bitti. Daha sonra, ikinci yazımı vurgulamak için, birkaç işlem daha yapmak istiyorum. 1:Bunun için, yeni bir layer açıyorum. *Kısayol: Shift-CTRL-N. 

# 1:Layer açtıktan sonra, Kısayol: M tuşuna basarak, seçim aracını alıyorum ve ikinci yazdığım yazıyı dikdörtgen içerisine alıyorum. 3: Kısayol: G tuşuna basarak boya kovasını tıklıyorum. 4: Seçtiğim yeri istediğim bir renge boyuyorum.

 

# Yukarıda gördüğünüz gibi, boyadığım alan yazının üzerine geldi. Yazının boyadığım alan üzerine gelmesini istiyorum. Bunu yapmak için, boyadığım alanla ilgili layeri, yazının layerinin altına koyacağım ki yazım ön plana çıksın.

# Şimdi layerleride sırasıyla dizdiğimize göre, sıra geldi gif oluşturmaya. Bunu yapmak için aslında iki yol vardı. İlk yazıyı yazdıktan sonra, zaman çizelgesi bölümünden yeni layer açarak da yapılabilirdi fakat o zaman işlem karmakarışık olabilirdi.

# 1: Arkaplan layeri hariç, tüm layerlerdeki gözleri kaldırıyoruz. Gördüğünüz gibi, çalışmamın üzeri temizlendi.

# 1: Daha sonraki işlemler Window (pencere) – Timeline (zaman çizelgesi) ile ilgili işlemlerdir. Gördüğünüz gibi zaman çizelgesinde bir layerin görünümü mevcut. 2:Layer çoğaltma aracına tıklıyorum.

2: Ardından, katmanlarda bulunan ve gözlerini kaldırdığım layerlerden ilkinin gözünü açıyorum ve çalışmamda ilk yazdığım yazı beliriyor.

# Bu işlemi tekerleme gibi tekrar edeceğim. İşlemin asıl mantığı hep budur. 1: layer aç 2: Önceki Gözü kapat 3: Sonraki Gözü aç 4:Sonuç

# Aynı işlemi, yazıyı ön plana çıkarmak için, yaptığım boyama layeri için de yapacağım. Ancak burada bir farklılık olacak. Nedir? Yazımın arkaplanını vurgulayacağım için. Zaman tünelinde son açtığım layer için, katmanlardaki layerlerde iki göz açık kalacak.

# Zaman tünelinde bulunan layerleri biraz kurcalayalım. Fark ettiyseniz tüm layerlerin altında *0 san. yazıyor.

Ona tıkladığınızda zamanlama açılacak. Bu ne demek oluyor? Bu kısımdan, layerlerin akış süresini ayarlayabileceksiniz. Yazının ilk kısımlarında, zaman tünelindeki play tuşunu sizlere göstermiştim. Playa basarak yaptığınız çalışmanın son halini görebilirsiniz. *not: Zaman tünelinde sağ altta görünen çöp tenekesi sembolüde açtığınız layerlerden seçili olanı siler.

# Çalışmanızı bitirdiyseniz sıra, gif kaydetmeye geldi. Bunun için, 1:dosya-web için kaydet‘e tıklıyoruz. *Kısayol: Alt-Shift-CTRL-S. 2: Karşımıza bir sayfa çıkacak ve bu sayfada, aşağıdaki işlemleri aynen uyguluyoruz.

# 1:Daha sonra, aşağıda bulunan kaydet butonuna tıklıyoruz ve .gif’i kaydedeceğimiz yeri seçiyoruz

Son Hali:

*Tüyo: Sayfanın altında bulunan önizleme butonuna tıklayarak, oluşturduğunuz gif’in son halini ve HTML kodunu görebilirsiniz.

*BONUS: Eğer bu yazının sonunu getirebildiyseniz ve yorulmadıysanız. Sizlere bir küçük detay daha göstereceğim.

# Zaman çizelgesinde şöyle bir sembol var.

Bu araç, Layerler arası yaptığınız değişikleri kayıt altına alarak, layerlerinizi gif içerisinde kolaylıkla gezdirmenizi sağlıyor. Aslında bir nevi animasyonlar oluşturmanızı sağlıyor. Nasıl mı ? 1: Yukarıdaki resimde 5 nolu layeri ve 6 nolu layeri, ctrl tuşuna basılı tutarak birlikte seçiyorum.

2: Layerleri seçtikten sonra, yukarıda gösterdiğim sembole tıklıyoruz ve karşımıza bir pencere açılacak.

3: İşlemi yaptıktan sonra. Tamama tıklıyorsunuz ve animasyonunuz hazır.

Son Hali:

# Hızlıca: Bu araçla başka ne yapabilirsiniz ? Yazıyı kaydırarak getirebilir, vurgulayabilir daha sonra tekrar kaydırarak kaybedebilirsiniz. Başka? Bir güneş çizebilir, hızlandırılmış gün doğumu oluşturabilirsiniz. Bunun haricince film videosunu .gif’e de çevirebilirsiniz.

Ben photoshop ile gif yapmayı anlattım. Videodan da gif oluşturabilirsiniz. Yani videoyu gife çevirebilirsiniz. Tabi .gif maker‘ler yani online gif dönüştürme, oluşturma siteleri de mevcut ancak buradaki işlem tamamıyla orijinal ve kaliteli işlemlerdir. Peki bunlarla ilgili de bir yazıyı klavyeme almamı ister misiniz?

Yıllar yıllar önce, yaptığım bir çalışma: 3 ‎Eylül ‎2008 ‎Çarşamba, ‏‎20:30:16

Nasıl Yapıldı?: Rize ilinde çektiğim bir fotoğrafı karartıp siluet haline getirdim. Martılar google görsellerden alıntı. Güneş ve yıldızları photoshop ile çizdim. Gündüz olmasına rağmen, silmeyi unuttuğum bir yıldız kalmış gif’te. Gündüzden nasibi varmış demek…

 

Yorumlarda görüşelim…

Etiketler

Sonra bunları okuyorlar.

3 thoughts on “Detaylı: Hareketli .Gif(Logo-Banner vs) Yapımı”

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir