Blogger ve Google+ resimlerinizi programsız düzenleyin

Blogger ve Google+ resimlerinizi programsız düzenleyin

Blogger, Picasa ve Google+ fotoğraflarının url adreslerini düzenleyerek boyutlandırma, kırpma, polaroid çerçeve ekleme, bulanıklaştırma gibi... 9 years ago

Blogger, Picasa ve Google+ fotoğraflarının url adreslerini düzenleyerek boyutlandırma, kırpma, polaroid çerçeve ekleme, bulanıklaştırma gibi işlemler yapabileceğinizi biliyor muydunuz?

Blogger'da resim adreslerinde "s1600" gibi bir ibare bulunur. Bununla oynayarak resim boyutunu değiştirebileceğinizi çoğunuz biliyorsunuz, veya şimdi öğrendiniz. Blogger bloglar için tasarım düzenlediğim bir gün, resim önizlemelerinde c ve p parametreleri kullanıldığını ve bu şekilde kırpma işlemleri yapılabildiğini farkettim. Webde bu konuda arama yaptığımda ise bildiğim iki üç şeyin dışında hiçbir şey bulamadım. Bunun üzerine Google+, Google Play Store gibi ürünlerin web sitelerindeki resim urllerinde de benzer başka düzenleme seçenekleri olup olmadığını araştırmaya başladım.

Herhangi bir fotoğrafı bulanıklaştırmak, webp formatına getirerek boyutunu azaltmak, fotoğraf adresini indirme linkine çevirmek, resim oranını değiştirmeden maksimum uzunluk ve genişliği ayarlamak gibi pek çok fonksiyonu yere getirmek için url'de bazı değişiklikler yapılmasının yettiğini farkettim. Bunları internette araştırdığımda, hiç kimsenin haberdar olmadığını gördüm. Google ise bununla ilgili hiçbir açıklama yapmamış ve api yayınlamamış. Burada sizlerle bulduğum, çözebildiğim kadarını paylaşacağım. Anlatımı aşağıdaki blogger fotoğrafı ve adresi üzerinden örneklendirerek yapacağım. Aynı teknikler google a ait diğer pek çok üründeki resimler için de işe aynı sonuçları verecektir. Yazdıklarım dışında bir şey dikkatinizi çekerse yorum yazmaktan çekinmeyin.

Standart bir blogger resmi adresi:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqj-v-TAM6bKiqfydaFz5C0mcpH1JV8bG-wZ-3Z1FknkgC5X42z-52IezLqjeYmL9vsGXmSxWXZrjObdDuWTA0Up7exZGqyXN0xW7cpwQUzG0hZlC0bs3lKhwrynWJMOerRWr5mFJ03hj2/s1600/collage%2Bdada.jpg

Resmin Önizlemesi:

Tekrar söylüyorum: aşağıda göreceğiniz ipuçlarının hiçbiri(ilk ikisi hariç) internette başka bir yerde rastlayabileceğiniz şeyler değil.

1 - Boyutlandırma

Resmin orjinal adresi şu:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqj-v-TAM6bKiqfydaFz5C0mcpH1JV8bG-wZ-3Z1FknkgC5X42z-52IezLqjeYmL9vsGXmSxWXZrjObdDuWTA0Up7exZGqyXN0xW7cpwQUzG0hZlC0bs3lKhwrynWJMOerRWr5mFJ03hj2/s1600/collage%2Bdada.jpg

Burada koyu renkle gösterdiğim s1600 kısmı, değişikliklerimizin hemen hepsini yapacağımız bölüm. Boyutlandırma yaparken de bu kısımdaki s1600'ü değiştireceğiz.

s1600 yerine yeni boyutları yazarken kullanabileceğimiz iki farklı method var;

s200 bu şekilde bir düzenleme, resmin uzunluğunun da, genişliğinin de, 200pikselden fazla olmamasını sağlar. Bir başka deyişle "resmin en büyük uzunluğunu 200 piksel yapmış oluruz".

w400-h300 bu düzenleme ile Google'a, resmimizin genişliğinin en fazla 400, yüksekliğinin en fazla 300 piksel olmasını söyleyebiliriz. Elbette yine, resmin boyutlarıyla oynamadan. Eğer sadece genişliğe sınır koymak istiyorsanız, sadece w400 yazabilirsiniz. Yükseklik için de aynısı geçerli.

2- Kırpma, İsim ve Uzantı Değiştirme

Öncelikle isim değiştirme olayını açıklayayım: Herhangi bir blogger resminde, dosya adını dilediğiniz gibi değiştirebilirsiniz. Örnek resmimizde "collage%2Bdada.jpg" olan kısmı, örneğin "naber.png", "ahaha.gif" yapabilirsiniz. Belli başlı resim uzantılarına dönüşümü bu kadar kolay yapabilirsiniz. Yine de resmi bilgisayara kaydetmek istediğinizde eğer saydam veya hareketli değilse, jpg formatında kaydedilecektir. Dilerseniz isim veya uzantı dahi yazmak zorunda değilsiniz. Son "/" işaretinden sonrasını silebilirsiniz.

Kırpma işlemi için c harfi yeterli. Elbette önce resmin boyutunu biliyor olmanız gerek. Örneğin şu değişken: s120-c bize resmimizin 120 piksel genişliğinde ve yüksekliğinde olacak şekilde kırpılacağını söylüyor. Eğer w300-h100-c yaparsak, resmimiz bu oranla kırpılıp, tam olarak 300 piksel genişliğinde ve 100 piksel yüksekliğinde görünür.

Adres:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqj-v-TAM6bKiqfydaFz5C0mcpH1JV8bG-wZ-3Z1FknkgC5X42z-52IezLqjeYmL9vsGXmSxWXZrjObdDuWTA0Up7exZGqyXN0xW7cpwQUzG0hZlC0bs3lKhwrynWJMOerRWr5mFJ03hj2/w400-h70-c/resim.jpg

Önizleme:

Eğer kırpma işleminin,resmin tam merkezine odaklanarak değil de resmin köşesinden başlayarak gerçekleşmesini istiyorsanız c yerine p kullanabilirsiniz.

Adres:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqj-v-TAM6bKiqfydaFz5C0mcpH1JV8bG-wZ-3Z1FknkgC5X42z-52IezLqjeYmL9vsGXmSxWXZrjObdDuWTA0Up7exZGqyXN0xW7cpwQUzG0hZlC0bs3lKhwrynWJMOerRWr5mFJ03hj2/w400-h70-p/resim.jpg

Önizleme:

3-WEBP formatına çevirmek

Eğer resminizin aynı kalitede kalmasını, ama daha hızlı yüklenmesini istiyorsanız webp formatına çevirebilirsiniz. Bu ayrıca resminizi çalmak isteyenlerin, bilgisayarlarına kaydedince afallamalarına sebep olabilir. Eğer Webp formatından bihaber iseler, resimlerinizi çalmayı başaramayacaklardır.

Resimlerinizi google tarafından geliştirilmiş, sıkıştırılmış resim formatı olan webp formatına çevirmek için parametrelerin sonuna -rw eklemeniz yeterli. Örneğin: s100-rw

Bunu aşağıdaki resimde deneyimleyebilirsiniz. Dosyayı kaydedip boyutuna bakarsanız, orjinal resimden daha hafif olduğunu farkedeceksiniz. Sadece aşağıdaki resme sağ tıklayıp masaüstünüze veya telefonunuza kaydedin.sıradan bir resmi açtığınız gibi açamayacaksınız:

Adres:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqj-v-TAM6bKiqfydaFz5C0mcpH1JV8bG-wZ-3Z1FknkgC5X42z-52IezLqjeYmL9vsGXmSxWXZrjObdDuWTA0Up7exZGqyXN0xW7cpwQUzG0hZlC0bs3lKhwrynWJMOerRWr5mFJ03hj2/s200-rw/resim.jpg (aslında resim.jpg kısmını yazmanız gereksiz.)

(Not:webp formatının, modası geçmiş eski tarayıcılarda görüntülenemeyebileceğini unutmayın.)

4- Resmi Döndürmek, Polaroid Çerçeve Eklemek

Aşağıda sadece tek bir örnek vereceğim. Bunu çeşitlendirebilirsiniz. Ancak bundan önce, kısa bir şey öğrenmenizde fayda var:

Aşağıda vereceğim url düzenlemesinde hex kodları kullanılıyor. Burada rakamlar, "0,1,2,3,4,5,6,7,8,9" dan ibaret değil. Adan Fye kadar olan harfler de kullanılabilir. Yani her bir karakterin en küçük değeri 0. Verebileceğiniz en büyük değer ise F. rakamların birden ona kadar değil, şöyle olduğunu hayal edin: "0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f". Renk değişimi için ise HEX renk kodu kullanmalısınız. #ffffff beyazı, #000000 siyahı simgeliyor. Dilediğiniz rengin hex kodunu buraya tıklayarak öğrenebilirsiniz.

/s300-fPolaroid=1,8,ff8260/ örnek kodumuz bu. Evet, diğerleri kadar kısa değil. Baş kısımdaki s300 ile sadece boyut belirtmişiz.

Sondaki altı hane (ff8260) polaroid çerçevenin dışındaki rengi belirliyor. Yukarıda verdiğim linkten kendiniz bir renk seçebilir ve kodunu öğrenebilirsiniz.

Bu renk kodundan hemen önceki 8 değeri, resmimizin kaç derece eğileceğini belirlememize yarıyor. İstediğiniz dereceyi verebilirsiniz. Resminizi sağa veya sola da yatırabilirsiniz ama 180 derece her nedense hata veriyor. Yani resmi tam olarak baş aşağı döndürmek dışında dilediğinizi yapabilirsiniz.

8den hemen önceki 1 ise neye yarıyor inanın çözemedim. Bunun yerine 0 da koyabiliyorsunuz, boyutta, formatta, görüntüde hiçbir değişiklik olmuyor. Ancak 0 ve 1 dışında bir değer koyarsanız resim bozuluyor.
Adres:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqj-v-TAM6bKiqfydaFz5C0mcpH1JV8bG-wZ-3Z1FknkgC5X42z-52IezLqjeYmL9vsGXmSxWXZrjObdDuWTA0Up7exZGqyXN0xW7cpwQUzG0hZlC0bs3lKhwrynWJMOerRWr5mFJ03hj2/s300-fPolaroid=1,8,ff8260/resim.jpg

Önizleme:

5- Bulanıklaştırmak, Yumuşaklaştırmak

Kodumuz Soften=1,10,20 . Buradaki 1in ne işe yaradığını bilmiyorum. Yine bir veya sıfırdan başka değer alamıyor, bir ve sıfır değerleri arasında da bir fark göremiyorum. 10 ve 20 değerlerinin ne iş yaptığını anlatmak biraz zor, ben yine de deneyeceğim. Bulanıklaştırmanın iki aşamada oluştuğunu varsayın. İlk aşamada resmin üstünde bir sis oluşturuyoruz. İkinci olarak da bu sisi resme yapıp, buğulu bir görünüm elde ediyoruz. Ne kadar yoğun bir sis oluşturduğunuzu yukarıdaki 10 belirlerken, bu sisi ne kadar dağıtacağınızı da yukarıdaki 20 değeri belirliyor. 10 değerini örneğin 50 yaparsanız sis artar. 20 değerinde ise tam tersi bir durum var. 20 değerini ne kadar küçültürseniz, sis o kadar dağıtılır, resim o kadar bulanıklaşır.

Adres:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqj-v-TAM6bKiqfydaFz5C0mcpH1JV8bG-wZ-3Z1FknkgC5X42z-52IezLqjeYmL9vsGXmSxWXZrjObdDuWTA0Up7exZGqyXN0xW7cpwQUzG0hZlC0bs3lKhwrynWJMOerRWr5mFJ03hj2/s300-fSoften=1,60,4/resim.jpg

Önizleme:

6- Detaylı Kırpma, Bulanıklaştırma, Odaklama İşlemleri

Eğer çok detaylı oynamalar yapmak istiyorsanız, kullanmanız gereken değer fCrop64 . Örneğin:
fcrop64=0,00000000ffffffff


Virgülden sonraki ilk dört karakter resmi sol tarafa kaydırmaya yarıyor. Bu şekilde resmin solundan istediğiniz oranda bir kırpma gerçekleştirebiliyorsunuz.

Sonraki dört karakter resmi yukarı kaydırmanıza, yani üstten kırpılacak pozisyonu belirlemenize.

Sonraki dört karakter resmi sağdan, sonraki dördü ise aşağıdan kırpmanızı sağlıyor.

Bu değerler aslında resmin yukarıdan, sağdan, soldan ve aşağıdan hangi koordinatlarda başlayıp biteceğini belirtiyor. O yüzden resmin solda 0000dan başlamasını isterseniz, resimde herhangi bir kırpma olmuyor. Örneğin 5000 derseniz, resim soldan yaklaşık %25 kadar kırpılıyor. %75ini kırpmak isterseniz yapmanız gereken CCCC yazmak. Unutmayın, rakamların birden ona kadar değil, "1,2,3,4,5,6,7,8,9,a,b,c,d,e,f" şeklinde arttığını düşünüyoruz.

Adres:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqj-v-TAM6bKiqfydaFz5C0mcpH1JV8bG-wZ-3Z1FknkgC5X42z-52IezLqjeYmL9vsGXmSxWXZrjObdDuWTA0Up7exZGqyXN0xW7cpwQUzG0hZlC0bs3lKhwrynWJMOerRWr5mFJ03hj2/s400-fcrop64=0,34502000bbbbaccc/resim.jpg

Önizleme: