30 Aralık 2013 Pazartesi

Bu fotoğraf Photoshop mu? Nasıl anlarız?

Takipçilerimizden gelen soruların büyük bir kısmı bu soruyu içeriyor : “Bu fotoğraf Photoshop mu? Nasıl anlarız?”


ela main


Bir fotoğrafın Photoshop ile düzenlenip düzenlenmediğini anlamak için ilk gözlerinizi sonrasında da teknolojiyi kullanmanız gerekiyor. Hadi bu konuyu biraz detaylandıralım.


Bir fotoğrafın Photoshop olup olmadığını nasıl anlarız?


Öncelikle şunu belirtelim. Artık neredeyse her görsel Photoshop ile işleniyor. Belki renk ve efekt katılmıyor ama en azından yeniden boyutlandırıyor. Bu yüzden karşınıza çıkan çoğu görsel temelinde Photoshop imzası taşır. Yani JPG/GIF/PNG dosyalarını not defteri ile açıp içerisinde Photoshop ibaresi görmeniz artık hiçbir şeyin kanıtı değil.


Bu sorunun iki ayrı cevabı var. Ve ikisi de 100% garanti vermiyor. İlk olarak en çok ilginizi çekecek metod olan Teknoloji faktörü ile başlayalım. Zaten bu konumuzun genel teması da görüntü hata düzeyi analizi (Image Error Level Analysis) olarak belirtilebilir.


Error Level Analysis


Hata Düzeyi Analizi olarak çevirebileceğimiz bu teknik, görsellerdeki büyük geçiş ve seviye bozukluklarını çözümlememizi sağlıyor. Dijital olarak manipüle edilmiş görselin, varsa uğradığı hasarı tespit etmemizi sağlıyor. Açıklamayı biraz daha basitleştirelim. Onlarca piksel ve renkten oluşan bir görselin renk yoğunluğunu sıkıştırararak bozulmaları tespit etmemize ELA (Error Level Analysis) diyoruz. Hadi bir örnek ile devam edelim.


aw ELA


Yukarıdaki fotoğrafı inceleyerek devam edelim. Sağdaki fotoğrafta hakim olan gri tonlaması bazı kısımlarda mavi ve kırmızı piksellerle bölünmüş sizlerin de fark ettiği gibi. İşte bu kısımlarda geçişler o kadar dar alanda yapılmış ki bu tarz piksel patlamaları olmuş. Bu bize ne gösterir?


  1. Sol kısımdaki sağ, kaş, göz, cilt ve dudak rengiyle oynanmış.

  2. Sol ve sağ kısımdaki metinler sonradan eklenmiş

  3. Arka plan tamamıyla değiştirilmiş

İşin güzel kısmı bunların 690×216 boyutlarındaki küçültülmüş bir görsele bakıp söyleyebiliyoruz. ELA‘nın temelini öğrenmek, Usame Bin Laden ve Saddam’ın öldürülüş veya Amerika’nın Ay’a ayak basış fotoğraflarını çözümlemenizi sağlamayabilir. Fakat efekt uygulanmış bir fotoğrafı algılamakta teknik olarak en başarılı yöntem olarak gösterilebilir.


Bir görseli ELA testine nasıl sokarız?


Bunu yapmamızı isteyen mükemmel bir web sayfası var. FotoForensics bu analizi direkt olarak web üzerinden yapmamızı sağlıyor.


Yukarıdaki adresten görsellerinizi ELA formatına çevirip bu tekniği kullanabilirsiniz.


Detaylı Örneklendirme


Ruth Steck’in fotoğrafıyla bir örneklendirme yapalım. Orjinal fotoğraf :


Ruth Steck


Şimdi bu fotoğraftaki anne ayıyı ve yavruları Photoshop’un Clone Stamp isimli aracıyla yok edelim.


Ruth Steck2


Şuan fotoğrafta bir oynama olduğu ilk bakışta bile anlaşılabiliyor. Fakat biz yine de bir ELA sonuçlarına bakalım.


ELA Analyze


Yukarıdaki sonuç görüntüsünde soldaki orjinal fotoğrafımız, sağdaki ise Photoshop ile düzenlenmiş fotoğraf. Oluşan mavi ve kırmızı pikseller manipüle edilmiş bölgeleri bize göstermekte.


Diğer bir silahınız ise gözleriniz!


Bir görselin Photoshop ile değiştirilip değiştirilmediğini fark etmek için en önemli silahınız gözlem yeteğiniz olacaktır. Işık yoğunluğu, renk tonlamaları, gereksiz parlamalar veya alakasız tonda pikseller size bir manipülenin olduğunu işaret edecektir. Bu yüzden ELA’nın bile çözemeyeceği oynamaları doğru gözlem ile yakalayabileceğinizi belirterek bu makalemize de son veriyoruz.


Kaynaklar


http://www.errorlevelanalysis.com/


http://www.theatlantic.com/infocus/2012/11/national-geographic-photo-contest-2012-part-ii/100414/


http://lifehacker.com/5644259/how-to-detect-a-photoshopped-image



Bu fotoğraf Photoshop mu? Nasıl anlarız?

27 Aralık 2013 Cuma

Photoshop ile Çift Yüz İllüzyonu

Bu dersimizde Photoshop ile son zamanlarda sosyal ağlarda sık sık gördüğümüz çift yüz illüzyonu (double face illusion) örneği oluşturuyoruz.

aw youtube screen


Videoda kullanılan yüzey tipleri aşağıdadır :
Yüzey 1


Yüzey 2


Video Dersler


Video derslerimizi takip etmek için YouTube kanalımıza abone olabilirsiniz.



Photoshop ile Çift Yüz İllüzyonu

25 Aralık 2013 Çarşamba

Sayfa açılışında div'in en altı nasıl gösterilir?

bottomdiv Bir tasarım üzerine son sürat çalışırken karşınıza küçük bir engel çıkar ve saatlerinizin boş yere uçup gitmesine sebep olur. Bu makalenin çıkış noktası da bu minik sorunlardan birinin çözümü ile alakalı.


Web sayfanız açıldığında overflow tanımlı bir öğenizin kaydırma çubuğunun (scroll) en altta olmasını istiyorsanız doğru makaledesiniz.


Örneğin bir chat sistemi hazırladığımızı varsayalım. Yeni yazılan mesajlar bir div’in içerisine otomatik olarak ekleniyor. Yukarıdan aşağıya doğru eskiden güncele bir listeleme yapılıyor. Kullanıcılar bu chat sistemine girdiğinde o div’in en üstündeki eski mesajı değil, en alttaki güncel mesajı görüntülemeli. İşte sizlerle birlikte hazırlayacağımız JavaScript kodu da tam olarak bu işlevi görüyor.


Nasıl hazırlanır?


Öncelikle üzerinde çalışmak için bir <div> oluşturalım. Aşağıda örnekte kullandığım kodlar mevcut. Burada önemli olan div’e bir ID tanımlaması yapmamız. Örneğimizde ise bu tanımlama adobewordpress şeklinde.


HTML Kodları



<div id="adobewordpress">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis consequat iaculis. Cras bibendum libero a massa pretium molestie. Nunc non mauris nulla. Vestibulum massa magna, semper ac fermentum ac, imperdiet ac purus. Donec eu sapien rutrum dui posuere sollicitudin. Nulla quis fermentum ipsum. Suspendisse eu hendrerit leo. Donec congue arcu libero, nec lacinia leo gravida vitae. Donec libero diam, convallis et molestie a, ornare eu lorem.</p>
<p>Vestibulum augue ipsum, euismod tristique tempor id, ornare ac nunc. Donec nulla ligula, ullamcorper sit amet congue non, sodales sed sapien. Curabitur ut placerat sapien, venenatis dapibus nunc. Curabitur sit amet elit eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas quis quam risus. Praesent blandit justo vitae varius posuere. Cras dignissim metus et leo tempus pretium. Quisque vitae leo nunc. Ut scelerisque tempus vehicula. Integer sollicitudin volutpat augue, in volutpat justo tempus eget. In at nunc risus. Praesent congue scelerisque facilisis.</p>
<p>Div'in en altı burası</p>
</div>

Şimdi geldik CSS kodlarımıza. Burada 3 tanımlama yapacağız : Uzunluk, genişlik ve overflow. Bu tanımlamalar sayesinde div üzerinde kaydırma çubuğu gözükecek, div sabit bir boyutta gösterilecek.


CSS Kodları



#adobewordpress{
width:200px;
height:200px;
overflow:auto;
}

Ve son olarak JavaScript kodlarımız geliyor. Buradaki kodları div’in altına yerleştirmeniz gerekmekte. focusBottom tanımlamasıyla adobewordpress ID’li öğeye erişiyoruz, daha sonra ise div için açılışa varsayılan scroll mesafesini belirtiyoruz.


JS Kodları



<script type="text/javascript">
var focusBottom = document.getElementById("adobewordpress");
focusBottom.scrollTop = focusBottom.scrollHeight;
focusBottom.scrollLeft = focusBottom.scrollWidth;
</script>

Şimdi bu çalışmamızı Codepen üzerinden canlı olarak test edelim.


Örnek




Sayfa açılışında div'in en altı nasıl gösterilir?