Tam boyutta bir yer tutucu görüntü nasıl oluştururum?

Genişlik (px) ve Yükseklik (px) değerlerini yazın, renkleri veya bir Renk teması seçin, ardından PNG indir, JPG indir veya SVG İndir'e tıklayın. Varsayılan olarak görüntü, etiket olarak 800 x 600 gibi boyutlarını gösterir.

Oluşturabileceğim en büyük yer tutucu görüntü nedir?

Genişlik ve yükseklik 1 ile 4000 px arasında olmalıdır. Bu aralığın dışındaki değerler Genişlik ve yükseklik 1 ile 4000 px arasında olmalıdır hatasını gösterir.

Bir yer tutucu görüntüyü dosya olmadan doğrudan HTML'e nasıl koyarım?

Data URL olarak kopyala'ya tıklayın ve bunu bir img etiketine src değeri olarak yapıştırın. Ayrıca HTML parçacığını kopyala veya CSS arka planını kopyala'yı da kullanabilirsiniz. Harici bir görüntü sunucusuna gerek yoktur.

Standart sosyal medya veya web boyutları oluşturabilir miyim?

Evet. Hazır boyutlar arasında Instagram gönderi, Instagram hikayesi, Twitter kartı, Open Graph, YouTube küçük resmi, Facebook kapak resmi ve E-posta başlığı bulunur. Tüm ön ayarları indir (ZIP) on birini de PNG dosyası olarak kaydeder.

Yer tutucuya kendi metnimi veya köşegen çizgileri nasıl koyarım?

Boyutları göstermek yerine Özel metin alanına, örneğin Hero image gibi bir etiket yazın. Soluk köşegenler çizmek için Köşegen çizgiler göster (X) seçeneğini işaretleyin. Uzun metinler genişliğe sığmak için otomatik olarak küçülür.

Gerçekten ücretsiz mi?

Evet. Tüm araçlar ücretsizdir; hesap veya kredi kartı gerekmez. İşlem sunucularımızda değil cihazınızda yapılır ve araçları ücretsiz sunabilmemizi sağlayan da budur.

Mobilde çalışır mı?

Evet. iOS ve Android'in güncel mobil tarayıcılarında, hiçbir şey kurmadan çalışır.

🖼️

Ücretsiz Yer Tutucu Görüntü Oluşturucu

Özel boyutlar, metin ve renklerle renkli yer tutucu görüntüler oluşturun. Sosyal medya, maketler ve tasarım kompozisyonları için standart boyutlar.

Tarayıcınızda çalışırKayıt yok, açılır pencere yokGiriş gerekmezSonsuza kadar ücretsiz

Genişlik (px)

Yükseklik (px)

Hazır boyutlar

Renk temaları

Arka plan

Metin / çizgiler

Özel metin (boyutlar için boş bırakın)

Özel metin yoksa boyutları gösterKöşegen çizgiler göster (X)

💡 HTML taslakları için: 'Data URL olarak kopyala' seçeneğini kullanın ve satır içi yer tutucular için <img src='...'> içine yapıştırın. Figma / Sketch tasarımları için PNG indirin ve sürükleyin.

Yaygın kullanımlar

Tasarım Mockup'ları için Yer Tutucu GörsellerGerçek görüntüler hazır olmadan Figma, Sketch veya web tasarım mockup'larında kullanmak için renkli kutular oluştur.
HTML Prototipleri için Satır İçi Yer TutucuHızlı prototipleri için yer tutucu görselleri doğrudan HTML'ye gömmek için 'Veri URL Olarak Kopyala' kullan.
CMS İçeriği Yuvaları için Yer TutucuCMS şablonunu gösterirken hassas önizlemeler için gerçek içerik yerine yer tutucu görüntüler kullan.
Sosyal Medya Görüntü ŞablonlarıInstagram, Facebook, Twitter, LinkedIn yazı şablonları için doğru boyuttaki yer tutucu oluştur.
CSS Düzeni Test GörselleriUyumlu CSS düzenlerini test etmek için aşırı en-boy oranlarında görüntüler oluştur.

Nasıl çalışır

Her şey tarayıcınızda HTML Canvas API ve elle yazılmış SVG işaretlemesiyle gerçekleşir — sunucu yok, yükleme yok, üçüncü taraf hizmet yok. Boyutları, renkleri ve etiket metnini ayarlarsınız; araç görüntüyü gerçek zamanlı olarak doğrudan bir tuval öğesine boyar, ardından istek üzerine PNG, JPEG veya SVG olarak serileştirir.

1
Boyutları ve renkleri yapılandırın
Bir genişlik ve yükseklik yazın (her biri 1–4000 px) veya yaygın sosyal medya ve tasarım boyutlarını kapsayan on bir hazır ayardan birini seçin. Yerleşik temalardan bir arka plan ve metin rengi seçin ya da doğrudan herhangi bir onaltılık değer girin; yerel renk seçici ile doğrulanan metin alanı eşzamanlı kalır.
2
Canvas API önizlemeyi anında çizer
Bir React efekti her değişiklikte drawPlaceholder()'ı çağırır. Bu işlev dikdörtgeni arka plan rengiyle doldurmak, isteğe bağlı olarak %15 opaklıkta soluk çapraz çizgiler çizmek, ardından etiket metninizi ölçüp ortalamak için CanvasRenderingContext2D'yi kullanır — yazı tipi, tuval genişliğinin %90'ına sığana kadar otomatik küçültülür.
3
PNG, JPEG veya SVG olarak dışa aktarın
PNG ve JPEG indirmeleri canvas.toDataURL()'u çağırır, base64 sonucu bellekte bir Blob'a dönüştürür ve indirmeyi tetikler — iOS Safari'nin indirme kurallarının karşılanması için hepsi kullanıcı hareketi içinde eşzamanlı olarak. SVG dışa aktarımı eşleşen bir rect, isteğe bağlı çapraz çizgiler ve bir text öğesi içeren bağımsız bir SVG dizesi oluşturur, ardından bunu .svg dosyası olarak kaydeder.
4
Toplu dışa aktarma ve kopyalama kısayolları
'Tüm hazır ayarları indir' düğmesi JSZip'i dinamik olarak içe aktarır, aynı çizim işlevini kullanarak on bir hazır ayar boyutunun her birini ekran dışı bir tuvale yeniden çizer ve tüm PNG'leri tek bir ZIP'te paketler. Kopyala düğmeleri, koda hemen yapıştırmak için bir PNG veri URL'si, satır içi bir SVG img etiketi veya bir CSS background-image bildirimi üretir.