Web Animasyonu?

Hani sitelerde reklam (banner) olarak görürüz ya, birkaç sahne vardır ve belirli sürelerde geçiş efektleri veya doğrudan geçerler. İşer o animasyonlar gif animasyonlarıdır (bilmeyenler için). Gif animasyonları aslında normal statik resim dosyalarından çok da farklı değildirler, içlerinde birden fazla resim varmış gibi bir paket şeklindedirler. Hangi resmin hangi sırayla görüntüleneceği, kaç saniye ekranda kalacağı gibi bilgiler içerirler. Bu dökümanda açık kaynak kodlu resim işleme yazılımı gimp ile web animasyonları yani gif yapımını anlatacağım.

Öncelikle hazırlayacağınız animasyondaki sahneleri kafanızda belirlemeniz gerek. Belirledikten sonra tek tek resimleri çizeceksiniz. Ya da hazırlayacaksınız. Kısa bir örnek vermek gerekirse ufak bir reklam animasyon tasarlıyorsanız bir artalan ve üzerinde değişen cümleler canlanır kafanızda. Artalanı yerleştirirsiniz ve cümleleri yerleştirerek sahnelerinizi oluşturabilirsiniz.

Başlıyoruz

Çalışmak için boş bir imaj oluşturuyoruz.

1. Figür

Boş imajımızı sahne sahne dolduracağız. Hazır fırça ve basit bir font ile hazırladığım animasyonun ilk sahnesi şu şekilde:

2. Figür

Sahneleriniz tek katman (layer) olması gerekiyor. Onun için şu anki ilk sahnemi tek katman yapmak için katmanlardan birine sağ tıklayıp "Flattern Image"i tıklıyorum
3. Figür

böylece tek parça hale geliyor imajım. Yani tek katmana dönüşüyor buradaki gibi

4. Figür
Burada unutmamanız gereken detay, bazı sabit kısımları kullanıyorsanız bile (mesela artalan), hazırladığınız sahnelere ait katmanların hepsinde bu kısımların var olması. Mesela artalanı en alta koyup sadece yazılar değişiyorsa, yazıları sahne sahne gibi ayarlamayın. Her sahneye ait katman da artalanı içeriyor olması gerek. Zaten az sonra gif için optimize ettiğimizde gim renk değişimlerine göre en ideal şekile sokacak resminizi.
Not : Diğer sahneleri tek katmana çevirirken, hazırladığınız diğer sahnelerin katmanlarını gizleyin, sadece birleşecek katmanlar görünür kalsın, Bu sefer Flatter Image yerine "Merge Visible Layers"ı tıklayın. Bu sayede sadece görünür katmanlar birleşecektir. Adlandırıp sıradaki sahnenizi tasarlamaya devam edebilirsiniz.
Ardından diğer sahnelerimi de aynı teknikle hazırlıyorum.

5. Figür

3 sahnelik yani 3 katmanlık imajım oluşmuş durumda.
Katmanları gösteri sırasına göre ters sırada sıralıyorum. Aşağıda katman adlarından sıralamayı anlayabilirsiniz.

6. Figür

İmaja sağ tıklayıp, "Filters / Animation / Optimize For Gif"i tıklayarak resimeki renk düzenini GIF'e göre azaltıyor yani optimize ediyoruz. Eğer bu işlemi yapmazsanız dosya boyutunuz zaten animasyon olduğundan fazlaca büyük olabilir. Bu işlemle renk dağılımını kullanarak bir nebze bu boyutu düşürebiliyoruz.

7. Figür

Katmanlarınıza bazı ekler gelecektir. Adlarını değiştirmeyiniz. İlk parantez içindeki rakamlar sahne gösterim sürelerini ifade etmektedir. Bu sayıları katman adlarını değiştirir gibi milisaniye cinsinden değiştiriniz (1000 ms = 1 sn demektir).

8. Figür

Animasyonunuzu önizleme yapmak istiyorsanız imajın üstüne sağ (veya menüsüne) tıklayın, "Filters / Animation / Playback"ı tıklayın. Çıkan pencerede Play/Stop tuşu ile oynatıp durdurabilir diğer tuşlarla navigasyonu sağlayabilirsiniz. Süre değişimini burada test edip imajımızı animasyon olarak kaydedelim.

9. Figür

Save veya CTRL+S ile dosya konumunu ve adını belirliyoruz. Dosya uzantısını ".gif" girince otomatik olarak gif ayarları karşımıza çıkacaktır.

10. Figür

gif kaydederken animasyon olduğundan "Save as Animation" türünü seçiyoruz. Çünkü katmanlarımız birer sahne.

11. Figür

Animasyon seçenekleri bir sonraki panelde beliriyor. "Loop forever"i işaretlemezseniz animasyon 1 kere oynar ve durur. Sahnelere ait süre belirtmiştik fakat bu süreleri doğrudan uzatmak için 2. parametreyi değiştirebilirsiniz.

Sonuç şöyle birşey oluyor :

Son Figür


Hazırlayan : Mehmet Fatih YILDIZ
Bazen fotoğraf makinenizin lensine doğrudan güneş gelebilir veya ışığın gelme açısına göre çektiğiniz konum yanlış olabilir. Bu resimler genellikle ışık saçan objelerin belirgin, diğer kısımların karanlık kaldığı resimlerdir. Aslında sadece tonlardan dolayı biz öyle görürüz. Küçük bir çalışma ile ne kadar değişeceğini göreceksiniz.

Resmimizi açtıktan sonra bulunduğu katmanı hmen kopyalıyoruz, orjinal olan en altta kalacak şekilde çalışacağız.

Figür 1

Kopyaladığımız katmana Layers > Color > Treshold'dan aşağıdaki ayarlara yakın veya resime göre ışık veren objelerin rahat seçilebilmesi için siyah beyaz dengesini oluşturuyoruz.

Figür 2

Ardından resksel seçim (renge göre seçme) aracı ile beyaz alanralı seçiyoruz ve seçimi çevirip siğer alanları seçmiş oluyoruz.

Figür 3

Orjinal katmanımızdaki seçili alanı kopyalayıp üst seviyede bir katmana yapıştırıyoruz.

Figür 4

Bu treshold yaptığımız katmanı artık silebiliriz veya gizliyoruz.

Figür 5

Şimdi bu koyu olan bölgeleri yapıştırdığımız katmanı maskelleme methodu ile resimin yapısına göre geçiş efekti vererek değişimin tüm resimde daha yumuşak olmasını sağlıyacağız.

Figür 6

Maskelemeyi uyguladıktan sonra yine aynı katmana Layers > Colors > Brightness-Contrast panelini açıp değerleri daha sertleştirerek resimdeki koyu bölyelerin rengini açmış oluyoruz.

Figür 7

Ne kadar çok sertleştiriseniz o kadar çok açılır. Resme uygun değerleri verip uyguluyoruz. Sonuç aşağıdaki gibi oldu.

Figür 8

Orjinal resim de şöyle idi

Figür 1

Gördüğünüz gibi, resim oldukça canlandı.. Birkaç uygulama ile kolayca kavrayabilirsiniz. Unutmayın bu kadar çok panel ve ayar kurcalamak için var :-)


Hazırlayan : Mehmet Fatih YILDIZ

Yumuşak köşeli kutucuk nasıl bişeydir, ne işe yarar?

Bu sitede gördüğünüz çoğu şey yumuşak köşelere sahip kutucuklar ile görüntülenmekte, bunun dışında butonlar ve üst menüde gördüğünüz tab şeklindeki menü de yumuşak köşelere sahip. Yumuşak köşeden kastım, dikdörtgen gibi sert köşeler yerine yuvarlatılmış dönüşlere sahip köşeli şekildir.
Bu dökümanda basit bir dikdörtgeni çeşitli yöntemlerle yumuşatıp köşelerini kuvarlatmayı göreceğiz.

Öncelikle boş bir çalışma belgesinde bir dikdörtgen seçim yapıp içerisini istediğimiz dolgu rengi ile dolduruyoruz.

Figür 1

Ardından seçimi kaldırıp bütün bunları tek bir katmanda topluyoruz.

Figür 2

Bu katmanı seçip resimde iken sağ tıklıyoruz, Filter / Blur / Gaussian Blur (IIR)'a tıklayıp kendi ayar panelini açıyoruz.

Figür 3

Burada yukarıdaki gibi, 10,10 değerleri verip ok diyoruz, imajdaki çizdiğimiz sert hatlı kutucuk bulanacaktır.

Figür 4

Şimdi bu bulanık hattı sertleştirelim, Resimde sağ tıklayıp, Layer / Colors / Levels'a tıklayıp levels penceresini açalım.

Figür 5

Yukardaki resimde görüldüğü gibi üst kısımdaki iki tuvarlak içerisine alınmış oku birbirine yaklaştırdığımızda uygulanacak olan katmandaki değişim hemen görülebilir şekilde sertleşmeye başlayacaktır. Resimin yumuşaklığını bozmamak için onları fazla yaklaştırmıyoruz. Biraz oynayarak uygun noktaları resime göre zaten bulabilirsiniz. Benim yaptığım yumuşaklık ayarı sonucu aşağıdaki gibi olacaktır.

Figür 6

Araç penceresinden resksel seçim ikonuna tıklayıp renge göre seç aracını seçelim. Resimde beyaz kısımlardan herhangi bir yere tıkladığımızda o renge ait belirli toleransa göre olan renklerin kapladığı kısımlar seçilecektir. Bu toleransı ne kadar düşürürsek seçim o kadar sert ama artık renk o kadar az oalcaktır. Araç ayarları panelinden bu toleransı ayarlayabilirsiniz. Burada kendinize ve o anda çalıştığınız resime göre bir denge bulmanız gerekir.

Figür 7

Seçimi temizleyelim ve katmanı yeni adla kaydedip yeni bir artalan katmanı oluşturalım.

Figür 8

Figür 9

Artalanı beyaz yaptığımzda daha önce elde ettiğimiz şekillerden birin elde ediyoruz ancak, bu sefer farklı katmanda.. :-)

Böylece yuvarlak hatlı bir kutucuk elde ettik, bunun farklı renklerdeki kombinasyonlarını, üzerine eklenecek ikonları ve farklı boyutlarını düşünürsek oldukça fazla alanda kullanabiliriz. İşte çok küçük değişimle birşeye benzettiğim versiyonu :

Figür 10

Hazırlayan : Mehmet Fatih YILDIZ

Perspektif aracı nedir, ne işe yarar?

Gimp ana penceresindeki perspektif aracı ikonuna tıkladığınızda çıkan araç perspektif aracıdır. Bu araç sayesinde yaptığımız yüzeyleri, çalıştığımız fotografları perspektif açıdan oynayabiliyoruz. Yani, bir yüzeyi gerçekte nasılsa öyle görünüm kazandırıp düzeltebiliyoruz. Bu dökümanda perspektif aracını kullanarak 3 boyutlu bir küp yapacağız.

3 boyutlu küp nasıl görünür?

Bir küp bilindiği gibi 6 kare yüzeyden oluşan bir cisimdir. Biz gerçekte bu cisimlerin en fazla 3 yüzeyini görebiliriz. Bir küp'e köşesinden baktığımızda ne görürüz? 3 tane perspektif görünümlü kare görürüz. Gimp'te yapacağımız tek şey kare ve dikdörtgenleri perspektif aracı ile kenarları eşleşecek biçimde ayarlamak olacaktır.

Öncelikle kendimize küpün yüzeyinde kullanacağımız bir efekt seçmemiz gerek. Bu bir desen, sade bir renk veya geçiş efekti verilmiş bir yüzey olabilir. Gölgelendirmenin gerçekliği açısından geçiş efekti verilmiş yüzey daha çarpıcı olacaktır. Şimdi geçiş efekti verilmiş bir yüzey'e sahip küp'ü yapmaya başlayalım.

Öncelikle beyaz artalanlı boş bir çalışma belgesi açalım.
Ardından kare bir seçim yaparak buraya geçiş efekti uygulayalım.

Figür 1

Geçiş efektini uyguladıktan sonra hemen seçimi sıfırlamıyoruz; perspektif aracını seçiyoruz ve seçili alana tıkladığımızda klavuz ızgarası çıkacak. Bu ızgarayı küp'ün görünen yan parçası şekline sokuyoruz. Aşağıdaki gibi yani..

Figür 2

Perspektif aracının penceresinde Transform butonu var, ona tıkladığımızda eskiden seçili alana bu perspektif görünüm uygulanacaktır. Daha önce seçili olan alan Background katmanına ait olduğu için Background katmanının o kısmı silinmiş gibi olacaktır.

Figür 3

Şu an perspektif hale getirdiğimiz alan seçili durumda, bunun nedeni transform edilmiş bu katman daha bir katmana oturtulmadı. Biz bunu yeni bir katmana oturtacağız. Bunun için katman (layer) panelindeki Transformation yazan katmana çift tıklayıp istediğimiz ismi gireceğiz. Bu katmana yan adını verelim.

Figür 4

Şimdi Background katmanını tekrar tamamen beyaz ile dolduralım ve yan katmanını biraz sola taşıyalım.

Figür 5

Gelelim önde görünecek yüzeye. Aslında aynı işlemleri yapacağız.. Öncelikle yan katmanının sağındaki boş alana tekrar bi kare seçimi yapıyoruz.

Figür 6

Seçtiğimiz alana geçiş efekti veriyoruz.

Figür 7

Seçimi sıfırlamadan perspektif aracı ile daha önce yaptığımız yan yüzeye yapıştırarak uygun görünümü ve perspektifi veriyoruz.

Figür 8

Perspektif aracının penceresinden transform ile perspektifliği uygulatıyoruz. İşlem Background katmanı üzerinde yapıldığı için o kısım silinmiş gibi oluyor,

Figür 9

Katman penceresinden Transformation'u çift tıklayıp ön adını veriyoruz. Background katmanını tamamen beyaz ile dolduruyoruz.

Figür 10

Tekrar aynı işlemlerle de üst yüzeyi yapacağız. Bu katmanları kitleyip biraz alta taşıdık böylece daha rahat çalışabileceğiz. Üstteki boşluğa dikdörtgen seçim yapıp geçiş efekti veriyoruz.

Figür 11

Seçimi perspektif aracı ile daha önce yaptığımız iki yüzeye uyduruyoruz.

Figür 12

Uygulayıp katman adını verip Background'u beyazla kalayıp işlemimizi bitirmiş oluyoruz. Sonuç :

Figür 13

İşte mükemmel bir küp, artalanı transparan yapıp png export edildiğinde çok güzel bir ikon olabilir :-)
Kenarlardaki küçük hataları hangi yüzeyler arasında ise o yüzeylerden birini tekrar perspektif düzenleyerek birbirine daha uyumlu hale getirebilir, bu küp şeklinin maskesinin izdüşüm gölgesini alıp yerde duruyormuş efekti verebilirsiniz...


Hazırlayan : Mehmet Fatih YILDIZ

Popüler Etiketler

social xhtml css php javascript job wanda digital twitter portfolio language rss parse xml cache htaccess apache istatistik sosyal medya code development firefox logo ubuntu imza signature mail ipucu mootools url service tool google search login mysql session less compile compiler macosx windows linux app on-the-fly html table ie browser pharma hack wordpress örnek kod network facebook sql export media dokuman blog cms workspace mfyz mobile startups apple laptop notebook newsletter ajax http server download nedir konsol plugin regex applications free while terminal pear mdb2 db database mssql pgsql icon ikon grafik banner calendar lifestream js ui ux css3 webkit form prepare execute www subdomain redirect crossdomain developer spam statistics graph chart api osx tebrik kurulum gimp screen wireless iphone zaman html5 browsers ide editor phpstorm jetbrains deployment version control svn git xmlhttprequest doritos kampanya tytz support button jquery internet explorer sitemap seo ios itunes kitap integration auth music nasıl bootstrap kontrol yapıları if player license lisans cookie date diff tarih route router mod_rewrite web app open source connect box generator assets fstab ntfs injection coding icons design proje opengraph optimization fql howto ipad app store store in-app purchase purchase verification storekit itunes connect widget iOS ruffles subscription switch share framework meta oyun optimizasyon analyse procedure subversion radio style insanlar object link query select internet textarea input