Piksel sanatını keskin kenarlarla vektöre dönüştürün

Piksel sanatını vektöre dönüştürebilirsiniz; ancak önce kare piksellerin görünür kalıp kalmaması gerektiğine karar verin. Özgün görünümü korumak için görüntüyü bir ızgara veya nesne mozaiği olarak yeniden oluşturun. Sprite’ı yumuşak hatlı bir illüstrasyona dönüştürmek için kontur vektörleştirmesi kullanın. Bunlar farklı çıktılardır ve genel amaçlı bir vektörleştirme aracı sizin yerinize doğru olanı seçemez.

Scratch’te bir oyun sprite’ını düzenliyorsanız Convert to Vector düğmesi, bitmap’i vektörleştirmeden düzenleme modunu değiştirir. Pikselleri korumaya, bir kısmı yeniden çizmeye veya vektörleştirilmiş SVG şekillerini içe aktarmaya karar vermek için Scratch kostümünün düzenlenebilirlik kontrollerini kullanın, ardından yeni kostümün merkezini özgün kostümle karşılaştırın.

Asıl hedef yalnızca bir web sitesinde veya oyunda net piksel sanatı göstermekse SVG’ye hiç ihtiyacınız olmayabilir. Doğru boyutlandırılmış, en yakın komşu yöntemiyle ölçeklenen bir PNG genellikle daha küçük olur ve kaynağa daha sadık kalır; web’de image-rendering özelliği, sert kenarları korumak için tasarlanmış crisp-edges ve pixelated davranışlarını sağlar.

Üç farklı işi çözen üç çıktı

Burada asıl mesele hangi biçimin “daha iyi” olduğundan çok blokların ne anlam taşıdığıdır. Piksel sanatında basamaklı kenarlar çoğu zaman bilinçlidir. Bunları yumuşatmak, bir çizgi çizimine bulanıklık eklemek kadar yıkıcı olabilir.

Izgarayı korumak ve konturları yumuşatmak farklı işlerdir

1. yol: Piksel ızgarasını aynen koruyun

En birebir vektör dönüştürmesi, raster hücreleri vektör dikdörtgenlere dönüştürür. Kırmızı bir piksel, kırmızı bir kare olur. Yan yana kırmızı piksellerden oluşan bir sıra, ayrı kareler olarak kalabilir veya silueti değiştirmediği sürece daha büyük bir dikdörtgen şekle birleştirilebilir.

Başlamadan önce çizimin gerçek ızgara boyutlarını bulun. 800 × 800 pikselde gösterilen bir sprite, en yakın komşu ölçeklendirmesiyle büyütülmüş 32 × 32 bir ızgara olarak başlamış olabilir. Yeniden üretmek istediğiniz, büyütülmüş görüntüleme boyutları değil, 32 × 32 yapıdır.

Illustrator Object Mosaic iş akışı

Adobe, gömülü bir bitmap’i mozaiğe dönüştürmek için yerleşik bir yöntemi belgeler:

1. Özgün piksel sanatını Illustrator’a yerleştirin ve gömün.
2. Görüntüyü seçin ve Object > Create Object Mosaic komutunu kullanın.
3. Özgün piksel ızgarasını biliyorsanız karo sayısını onunla eşleşecek şekilde ayarlayın.
4. Kare karolar ve renkli çıktı kullanın.
5. Mozaiği inceleyene kadar kaynak raster görüntüyü saklayın, ardından kaldırın veya gizleyin.
6. Dış silueti, iç boşlukları ve paleti yüksek yakınlaştırmada özgün görüntüyle karşılaştırın.

Adobe’nin Create Object Mosaic belgesi, komutu, kare karo seçeneğini, renk ayarını ve kaynak raster görüntünün işlenmesini açıklar. Piksel sanatı iş akışı, belgelenmiş bu mozaik davranışının pratik bir kullanımıdır.

Bir nesne mozaiği yapısal olarak aslına sadık olup yine de verimsiz olabilir. 64 × 64 bir sprite, herhangi bir birleştirme yapılmadan önce 4.096 hücre içerir. Tamamen saydam hücreleri kaldırın, mümkün olduğunda yan yana aynı renkli dikdörtgenleri birleştirin ve görünmez nesneleri son SVG’ye taşımaktan kaçının.

2. yol: Illustrator olmadan ızgara SVG’si oluşturun

Pikselleri dikkate alan bir betik veya özel amaçlı bir dönüştürücüyle aynı tür dosyayı oluşturabilirsiniz. İlke, uygulamadan daha önemlidir:

1. Kaynağı özgün ızgara boyutunda okuyun.
2. Saydam olmayan her pikseli tam bir vektör dikdörtgenine eşleyin.
3. Kenar yumuşatma uygulamadan palet değerlerini koruyun.
4. Komşu hücreleri yalnızca birleşmiş şekil görünür ızgarayı aynı tutuyorsa birleştirin.
5. Özgün ızgara boyutlarıyla eşleşen bir SVG viewBox ile dışa aktarın.
6. SVG’yi tam sayı ve tam sayı olmayan görüntüleme boyutlarında test edin.

Açık kaynaklı vectorize-pixelart projesi, piksele özel dönüştürme araçlarına bir örnektir. Genel bir sınırlamayı da gösterir: büyük veya karmaşık ızgaralar ağır SVG çıktıları oluşturabilir. Eski bir aracı önce araştırma malzemesi olarak değerlendirin. Üretim iş akışına eklemeden önce kodunu ve bakım durumunu inceleyin.

SVG işaretlemesiyle rahat çalışıyorsanız küçük bir sprite’ı <rect> öğeleriyle elle de yeniden oluşturabilirsiniz. Bu, 12 × 12 bir simge için makuldür. Ayrıntılı bir sahne için öğleden sonranızı böyle geçirmek mantıklı değildir.

3. yol: Şekilleri bilinçli olarak yumuşatın

Bazen pikseller, kimliği belirleyen özellik değil, bir taslaktır. Karakterin, çiçeğin veya simgenin yuvarlatılmış konturları olan temiz bir çıkartmaya, baskı grafiğine veya logoya dönüşmesini isteyebilirsiniz.

Bu yumuşatılmış yorumu bilinçli olarak istiyorsanız PerfectVector kontur yoluna uygundur. Elinizdeki çizimin en yakın komşu yöntemiyle büyütülmüş en büyük sürümünü yükleyin, ardından sonucu yeni bir illüstrasyon olarak değerlendirin:

1. Önce kenar yumuşatmayı kaldırın. Yumuşak kenar pikselleri fazladan renkler ve küçük kenar şekilleri oluşturur.
2. Paleti kontrol altında tutun. Kaynakta sekiz renk varsa vektörleştirme, sıkıştırma veya bulanıklık yüzünden onlarca yeni renk üretmemelidir.
3. Basamaklı çaprazları inceleyin. Hangilerinin düz parçalara, hangilerinin eğrilere dönüşmesi gerektiğine karar verin.
4. Delikleri ve bir piksellik boşlukları kontrol edin. Komşu bölgeler sadeleştirilirken küçük açıklıklar kapanabilir.
5. Düğüm sayısını gözden geçirin. Yumuşatmanın amacı her kare köşeyi birkaç küçük eğriyle değiştirmek değildir.
6. Hedef boyutta test edin. Poster boyutunda hoş görünen yumuşak bir eğri, simge boyutunda bir yüzü veya eli silebilir.

Bu yol, çalışmayı değiştirir. Kimsenin vektör yorumunu tam bir arşiv sürümüyle karıştırmaması için kaynak PNG’yi SVG’nin yanında saklayın.

Her yolu kötüleştiren hazırlık sorunları

Kaynak, yumuşatma uygulanarak yeniden boyutlandırılmış. Özgün sprite’a dönün veya en yakın komşu enterpolasyonuyla yeniden ölçeklendirin. Yeni, karışmış kenar renkleri görüntüye kalıcı olarak işlendiğinde özgün ızgarayı geri kazanmak zorlaşır.

Dosya JPG biçiminde. Sıkıştırma, her sert piksel kenarının çevresinde renk blokları ve halka biçimli bozulmalar oluşturur. Mümkün olduğunda özgün PNG’yi kullanın.

Saydam arka plan mat beyaza dönüşmüş. Beyaz arka plan, binlerce istenmeyen hücreye veya tek bir büyük vektörleştirilmiş şekle dönüşebilir. Dönüştürmeden önce saydamlığı geri getirin, ardından sonucu zıt renkli bir tuvalde kontrol edin. Saydam SVG arka planları hakkındaki kılavuzumuz bu denetimi ele alır.

Çizim yarı saydam efektler içeriyor. Parıltılar, gölgeler ve kısmi opaklık, geleneksel piksel hücreleri değildir. Bunları raster efektler olarak mı koruyacağınıza, düz renklere mi indirgeyeceğinize, yoksa vektör sürümü için yeniden mi tasarlayacağınıza karar verin.

Bir web sitesi için vektöre ihtiyacınız var mı?

Her zaman değil. Çizim bir oyun sprite’ı veya arayüz simgesiyse PNG doğru ana dosya olarak kalabilir. Özgün boyutlu bir görsel kullanın, mümkün olduğunda tam sayı katlarıyla ölçeklendirin ve tarayıcıyı veya görüntüleme motorunu pikselli ya da en yakın komşu enterpolasyonu kullanacak şekilde yapılandırın.

Paletin nesneler olarak düzenlenmesi gerektiğinde, çalışma büyük boyutta basılacaksa veya teslim sistemi özellikle vektör istiyorsa SVG ızgarası yararlıdır. Küçük bir ekran görselini otomatik olarak daha hafif yapmaz. Her hücre için bir vektör nesnesi, sıkıştırılmış bir PNG’den daha ağır olabilir.

Bu, “SVG sonsuza kadar ölçeklenir” sözünün doğru ama eksik olduğu durumlardan biridir. Çizim sonsuza kadar ölçeklenirken depolamak, düzenlemek veya görüntülemek maliyetli hâle gelebilir. PNG ile SVG karşılaştırma kılavuzumuz daha genel biçim seçimini açıklar; görüntü vektörleştirmenin ne anlama geldiği ise geleneksel vektörleştirme yöntemlerinin neden piksel ızgaraları yerine şekilleri tercih ettiğini ele alır.

Son ön kontrol

Dosyayı teslim etmeden önce özgün görüntüyle hem özgün boyutta hem de hedef çıktı boyutunda karşılaştırın.

• Izgara boyutları kaynakla eşleşiyor.
• Kenar yumuşatmadan kaynaklanan yeni kenar renkleri eklenmemiş.
• Saydam hücreler saydam kalmış.
• Koruma yolunda basamaklı siluetler bozulmamış.
• Kontur yolunda yumuşatılmış kenarlar bilinçli.
• Bir piksellik boşluklar, gözler, parlak alanlar ve iç delikler hâlâ doğru algılanıyor.
• Tekrarlanan aynı renkli hücreler yalnızca resmin aynı kaldığı yerlerde sadeleştirilmiş.
• SVG, özgün raster görüntüyü kazara gömmüyor. Gömüyorsa dosya uzantısına rağmen hâlâ pikselli görünebilir.

En temiz iş akışı, verdiği ödünü açıkça belirten iş akışıdır. Sanatı oluşturan piksellerse ızgarayı koruyun. Yeni bir vektör yorumu istediğinizde konturları yumuşatın. Vektör yararlı bir kontrol sağlamıyorsa PNG’yi saklayın.

Kaynaklar

1. Adobe Illustrator — Creating sketches and mosaics — Object Mosaic komutu, kare karolar, renkli çıktı ve gömülü raster gereksinimi.
2. MDN — CSS image-rendering — web’de piksel sanatı için en yakın komşu tarzı görüntüleme.
3. W3C — PNG Specification, Third Edition — PNG’nin kayıpsız raster modeli ve alfa kanalı davranışı.
4. W3C — SVG Basic Shapes — ızgara hücrelerini birebir koruyan SVG’lerde kullanılan dikdörtgen geometrisi.
5. W3C — SVG Coordinate Systems and viewBox — özgün ızgara koordinat sistemini bir SVG görüntü alanına eşleme.

Korunmuş bir ızgara yerine yumuşak konturlar istiyorsanız çizimi PerfectVector ile dönüştürün, ardından kullanmadan önce silueti, bir piksellik boşlukları ve küçük ayrıntıları piksel ana dosyayla karşılaştırın.