Şeffaf mockup nerede işe yarar
- Web siteleri: cihaz, sayfanın kendi rengi ya da degradesi üstünde durur, etrafında beyaz bir kutu olmaz.
- Sunumlar: Keynote ya da PowerPoint slaydında telefon arka planla bütünleşir.
- Video kurgusu: dönen bir iPhone'u kendi çektiğin bir görüntünün üstüne koyarsın.
- Tasarım dosyaları: Figma'da ya da Photoshop'ta katman olarak kullanırsın.
Nerede kullanılmaz
App Store ve Google Play saydam ekran görüntüsünü kabul etmiyor. Alfa kanalı olan bir PNG yüklersen App Store Connect onu reddediyor, Google Play de yalnızca 24 bit PNG ya da JPEG istiyor. Mağaza görsellerini her zaman arka planla dışa aktar.
Instagram, TikTok ve YouTube'a da saydam video yükleyemezsin; platform arka planı siyaha çevirir. Saydam video, kurgu programında başka bir görüntüyle birleştirmek içindir.
Hangi biçim ne zaman
Görsel: PNG
PNG saydamlığı destekliyor ve kayıpsız. Web siteleri için tek sorunu boyutu: 4K bir telefon görseli birkaç megabayt tutabiliyor. Sayfaya koymadan önce WebP'ye çevirmek dosyayı genelde üçte bire indiriyor ve WebP de saydamlığı koruyor.
Video: ProRes 4444
Apple'ın profesyonel video biçimi. Adındaki son 4 saydamlık kanalını gösteriyor. Final Cut Pro, Premiere Pro, DaVinci Resolve ve After Effects sorunsuz açıyor. Kalite çok yüksek, dosyalar da çok büyük: birkaç saniyelik 4K klip yüzlerce megabayt olabilir. Bu yüzden kurgu içindir, web'de oynatmak için değil.
Video: WebM (VP9)
Tarayıcıların saydam video için desteklediği biçim. Chrome, Firefox ve Edge oynatıyor, dosyalar küçük. Web sitende arka plansız dönen bir telefon istiyorsan doğru seçim bu. Safari'nin saydam WebM desteği sınırlı, o yüzden Safari için HEVC (alfa kanallı) bir yedek eklemek gerekebiliyor.
Mockup Center'da şeffaf dışa aktarma
- Cihazı ve sahneyi kur, ekranına görselini ya da kaydını koy.
- Dışa aktarma penceresinde arka planı kapat.
- Görsel için PNG, video için ProRes 4444 ya da WebM seç.
- Boyutu belirle. 8K'ya kadar çıkabiliyorsun.
Gölge de saydam olarak geliyor; cihazın altındaki yumuşak gölge, koyduğun arka planın rengini alıyor. Bu yüzden açık renkli bir sayfada da koyu bir sayfada da doğal görünüyor.
Sık yapılan hatalar
- Mağazaya saydam PNG yüklemek. Reddediliyor.
- Web sitesine ProRes koymak. Tarayıcılar oynatmıyor, dosya da çok büyük.
- Kenarlarda kalan ince beyaz çizgi. Kenar yumuşatması beyaz bir arka planda yapıldıysa koyu sayfada beyaz bir hale kalıyor. Arka planı en baştan kapalı dışa aktaran bir program bu sorunu yaşatmıyor.
