Öncesi ve Sonrası
Görsel Karşılaştırma
Gerçek zamanlı animasyonlu bir geçiş paneliyle 2 adet imajı doğrudan birbiri içerisinde kıyaslatır.
Bu benzersiz süreci kusursuz PNG biçimiyle dışarı çıkarma / cihazınıza kaydetme yeteneğine sahiptir.
📷 Öncesi (Before) Arka Plan Resim
✨ Sonrası (After) İkinci Resim
Hakkında
Öncesi & Sonrası Karşılaştırma ve İmaj/Görsel Kaydırıcısı aracı (Before & After Slider); herhangi bir konseptte, (güzellik, fotoğraf renklendirmesi ya da dekor süreçleri) iki farklı durumda ve/veya süreci iki boyutlu şekilde inceleyip interaktif çubuk yardımıyla kolay biçimde test ve analiz edebilmenize özel kurgulanmıştır.
Karşılaştırdığınız bu görsel harikayı şeffaf şekiller ile (PNG indirme vb düğmeleri ya da opsiyonlarla) anında çevrimdışı format ile (cihaza / diske, internet bağlantısı gereksiz olarak Canvas API yardımıyla) kaydedip dilediğiniz (sosyal/yazışma) tüm ortamlarda anında paylaşabiliyorsunuz ve de kesinlikle güvenlik ihlalinden uzaksınız.
Nasıl Kullanılır
Görsellerin Eklenişi (Yükleme)
Dilediğiniz Öncesi veya Sonrası görsel dosyalarını dokunarak yahut klasörünüzden içeri aktararak taşıyıp atın.
Kaydırma Çubuğu Hareketleri
Sistemin merkez çubuk kontrolünü dilediğiniz gibi mouse (yada ekran parmağınızla) ile çekip kıyasa dalın.
Ekran Çıktısını Alma (Export)
Üst kaydırma çizginizi, hedeflediğiniz estetik konuma getirdikten sonra PNG Kaydet düğmesiyle resmi saklayın.
Sözlük
- Öncesi ve Sonrası (Before & After)
- Bir düzeltmenin, estetiğin, projenin ya da çalışmanın öncesi ile sonrasını net şekilde kıyaslayan görsel bir sunum. Bunun için (her durum için bir adet olmak üzere) iki görsel kullanılır.
- Slider (Kaydırıcı) Form Karşılaştırması
- Aynı vizör çerçevesinde yer alan bir çubuğun (kaydırıcının) sağa veya sola çekilerek "öncesi ve sonrası" formlarını açığa çıkardığı interaktif arayüz paneli.
- Canvas API
- HTML5 standardının 2 Boyutlu grafiksel çizim teknolojisi/API'si. Çubuğa bağlı değişen görüntü kırpma (clipping) arayüzünü her iki görüntüye uygulamak ve çizmek için kullanılmıştır.
- Pointer Events (İşaretçi Olayları) API
- Kullanıcı fare, dokunmatik temas veya kalem işaretçisi hareketlerini eşit formutta karşılamak için oluşturulan Web teknolojisi. Bu araçta esnek sürükleme davranışını kontrol eder.
- Maskeleme / Kırpma (Clipping)
- Çizim anının (alanın) sınırlı bir ölçüde belirli bir şekle girmesi. Kaydırma çubuğunun sınırını çekmek ve yarısını diğer görüntüye adamak için kullanılan mantıksal ayar.
- En-Boy Oranı Paritesi (Aspect Ratio)
- Bir imajın uzunluk ve yüksekliğine ait matematiksel oranları temsilidir. İki fotonun kusursuz kıyası için iki resmin de oran (Örn; 16:9) formları aynı tutulmalıdır.
- PNG Formatı (Portable Network Graphics)
- Resmi oluştururken herhangi bir kayıp veya bulanıklık zedelenmesi yaşatmayan kayıpsız olan görüntü dosya standardı formudur. İşlemi dışarı aktarırken bu form seçilir.
- WebP İmaj Formatı
- Bizzat Google firması tarafından kodlanan; JPEG ve dahi formlara kıyasla (aynı kalitede olmak şartı ile) çok ama çok küçük olan gelişmiş yeni web kalite standardı. Araca dahildir.
SSS
- S.Ya yüklediğim iki görsel farklı boyuttaysa ne olur?
- Karşılaştırma için iki resim de otomatik olarak ortak boyuta (aynı en-boy) yeniden ölçeklendirilir.
- S.Mevcut (tam o an ki) kaydırıcı açısıyla sistemden bir PNG sonucu alıp kayıt edebilir miyim?
- Evet. Karşılaştırma aracındaki mevcut çubuğun tam olduğu o görünümle cihazınıza resmi almak için "PNG İndir (İhraç)" düğmesine basmanız yeterli.
- S.Ana ekrandaki "BEFORE(Önce)" ve "AFTER(Sonra)" uyarı/yazılarını kaldırılabilir (gizlenebilir) mi?
- Evet. Bu panel başlıklarını saklamak için hemen yukarıdaki görünüm kutucuklarında bulunan "Etiketleri Göster" tikini kaldırabilirsiniz.
- S.Dikey formda veya boylamasına şekilli dikey mimariye sahip görseller desteklenmekte mi?
- Evet. Her form (iki form) aracı tam olarak destekler ve iki türlü manzara tarzı (Yatay/Dikey) kıyas yön modlarını da değiştirebilirsiniz.
- S.Görsellerimi (özel dosyalarımı) bulut veri sisteminize (dışarı) kaydediyor veya yolluyor musunuz?
- Hayır. Kesinlikle dışarı bir görsel gönderilmez; ilgili işlemler yalnızca sizin doğrudan tarayıcınıza ait sistemden (lokal bellekten Canvas teknolojisi) aktarılır.
- S.Projenize veya programınıza resim atarken hangi dosya tipleri ve medya uzantıları uyar?
- Temelde PNG, WebP ve (JPEG/JPG) hatta desteklenmiş (statik) durumdaki bir GIF dahil pek çok yeni formatlar çalışır.
- S.Kaydırıcı araç dokunulabilir özellik taşıyan modern/akıllı mobil telefonları da kapsıyor ve çalıştırıyor mu?
- Evet. Tüm yapısı tamamen (tam parmak dokunmatik ve hareket duyarlı) etkileşimleri bizzat algılar. İşaretleyip sağ veya sola rahat rahat çekin / sürükleyin.
- S.Tek seferde ve tek tık ayarıyla art arda iki veya üç grup resim eşlemesini kıyaslayabilir miyim?
- Ne yazık ki şuan için hayır; mevcut aşamada bir (1) kıyaslama izni/hak vardır. Lakin onu dışarı çıkardıktan sadece yarım saniye sonra sistemi (Temizle deyişiyle) Reset edip ikinci gruba çok hızlı ve zaman harcamadan yelken açabilirsiniz.
Kullanım Senaryoları
Özel Rötuşlar ve Editler
Eski haline Photoshop işlemleri dahil edilmiş veya makyajlanmış bir müşteriye sonucu gösterip beğeni veya geri dönüş aktarmak/paylaşmak.
Tadilat/Donanımlar ve Proje/İnşaat Sektörü
Bir evin boya onarımı veya evin mutfak odası projesi sonlanmadan ki önceki berbat haliyle mevcut güncel halini tam şeffaf gösteriş sergilemek.
Moda / Kozmetik veya Diyet/Güzellik
Rejim salonları (fitness) yahut da doğrudan saç vb kozmetik süreçlerinin kesin öncesi/ilk durumuyla son halinin estetiğini ispat edip kıyaslamak.
Do-It-Yourself (Kendi Kendine Üret/Yap) Projesi Veya İmar/Bahçe
El eziyeti sonucu ulaştığın bir masa/ahşap objenin yahut baştan tasarlanan koca bir evin şahane çiçeklikleri veya zemin/bahar gelişim haritasını sergile.