Mockup oluşturma

Nasıl hesaplanır?

Kısaca: Mockup, bir logonun ya da tasarımın gerçek bir ürün üzerinde nasıl görüneceğini gösteren gerçekçi bir önizleme görselidir. Bu araç görselinizi sekiz ürün fotoğrafına – tişört, kapüşonlu sweatshirt, kupa, dükkân tabelası, kartvizit, dizüstü bilgisayar, telefon ve çerçeveli poster – doğru perspektifle yerleştirir; fotoğraftaki kıvrım, gölge ve parlaklığı korur. Her şey tarayıcıda çalışır: üyelik, filigran ve dosya yükleme yok.

Nasıl kullanılır?

1. Logonuzu sürükleyin, dosya seçin veya Ctrl + V ile yapıştırın. Görsel yoksa yazdığınız metinden örnek bir logo çizilir.
2. Bir ürüne dokunun; önizleme hemen görünür.
3. Boyutu ve konumu ayarlayın. Beyaz zemindeki logolarda “Beyaz arka planı kaldır” açık kalsın; fotoğraf ve ekran görüntülerinde “Tüm alanı doldur”u açın.
4. “Mockup’ı kaydet” PNG veya JPG indirir; “8’ini birden ZIP yap” tüm ürünleri tek seferde hazırlar – teklif, e-ticaret ve sunumlar için pratik.

Hesaplama

Tabela, poster veya ekran fotoğrafta açılı görünür. Araç, yüzeyin dört köşesinden projektif bir dönüşüm (homografi) hesaplar; Paul Heckbert’in 1989’da doku eşleme için tarif ettiği yöntem budur. Fotoğrafın her pikseli için tasarımınızdaki karşılık gelen nokta bulunur ve dört komşu piksel karıştırılır (çift doğrusal enterpolasyon); böylece tırtık ya da ek yeri oluşmaz. Kupa yuvarlak olduğu için tasarım bir silindirin etrafına sarılır, kenarlara doğru daralır ve alt-üst kenarda elips yayını izler.

Yapıştırılmış değil basılmış gibi görünmesi için tasarım, fotoğrafın parlaklığıyla çarpılır (W3C “çoğalt/multiply” karışım modu). Kumaş kıvrımları ve kupadaki gölge baskının üzerinde de görünür, seramikteki parlamalar kaybolmaz. Ekranlar kendisi ışık verdiği için karartılmaz.

Sınırlar

Ürün fotoğrafları uzun kenarda 1024–1216 pikseldir: web sitesi, mağaza ve sosyal medya için yeterli, ancak matbaa dosyası değildir. Bu site için yerelde bir görüntü modeliyle üretildiler ve hiçbir marka içermezler. Mockup bir önizlemedir; gerçek renk baskı tekniğine ve malzemeye göre değişir.

Gizlilik

Logonuz yalnızca tarayıcıda işlenir, hiçbir yere yüklenmez. Görsel değil, yalnızca ayarlar (ürün, boyut, metin) hatırlanır.

Şunlar da işinize yarar: logodan arka plan silme ve baskıya hazır kartvizit oluşturma.

Sıkça sorulan sorular

Kaynaklar ve yasal dayanak

• Heckbert (1989) – Fundamentals of Texture Mapping and Image Warping, UC Berkeley UCB/CSD-89-516 (projektive Abbildung Quadrat → Viereck)
• W3C – Compositing and Blending Level 1: multiply B(Cb, Cs) = Cb × Cs
• ITU-R BT.709 – Luminanz Y = 0,2126 R + 0,7152 G + 0,0722 B
• MDN – CanvasRenderingContext2D.getImageData() / putImageData()
• W3C – Web Share API
• ITU-T T.81 / ISO/IEC 10918-1 – JPEG
• W3C – Portable Network Graphics (PNG) Specification
• Google for Developers – An image format for the Web (WebP)
• AOMedia – AV1 Image File Format (AVIF)
• MDN – Image file type and format guide
• MDN – HTMLCanvasElement.toBlob()

Güncelleme: 1 Ekim 2026 · Editoryal ilkeler