) ve AlphaImageLoader'ın işi Internet Explorer'da düzgün yapmasını bekleyin. AlphaImageLoader'ın resminizi nesnenin arka planı ve ön planı arasına eklediğini unutmayın. Böylece, resminizi tüm şeffaf görkemiyle yüklerken, aynı zamanda harika yarı saydam pikselleriniz olmadan bir CSS arka plan resmi olarak yüklemeye devam edecektir.

AlphaImageLoader'ın gerçek kullanımı

Daha önceki örneklerden birine geri dönelim ve Internet Explorer'a doğru şekilde yüklemeyi deneyelim. Topeka'daki TV kanalı Kanal 49'u hatırlıyor musunuz? eminim evet. Şekil 5-21, sitenin Internet Explorer 6'da nasıl göründüğünü gösterir.

Şekil 5-21
49abcnews.com başlığı, PNG şeffaflığı bozulmadan Windows için Internet Explorer 6'da işlenmiştir.

Hava durumuyla ilgili en iyi HTML, zaten tahmin etmiş olabileceğiniz gibi görünüyor:

Bir resim görüyorsunuz ve bu kesinlikle bir PNG, Internet Explorer bile onu kusursuz bir şekilde yükler. Bunun gizli bileşeni JavaScript'tir. Aslında, img öğesini anında kaldırmak ve onu - tahmin ettiğiniz gibi - AlphaImageLoader'ı kullanan bir div öğesiyle değiştirmek için biraz DOM komut dosyası kullandım. JavaScript, Microsoft'un Internet Explorer'da yerleşik bir başka kullanışlı ancak tamamen standartlaştırılmamış deyimi olan koşullu yorumlar içinde açıklanmıştır. Koşullu yorumlar, yalnızca bilinen bir kod için kod kullanmanıza izin verir. İnternet sürümleri kaşif. Kod, diğer tüm tarayıcılar tarafından yok sayılır, bu nedenle onları hiçbir şekilde etkilemez. öğede www.49abcnews.com web sitesinde şunları bulacaksınız:

İlk satır sayesinde, eğer lte IE6 ise, bu komut dosyası, yalnızca bir Internet Explorer sürümünde (lte ile belirtilir) 6'dan küçük veya eşit bir sürümde gösteriliyorsa işlenen belgeye dahil edilecektir. Yeni gelen İnternet dahil tüm diğer tarayıcılar. Explorer 7, bunu tamamen görmezden gelecek.

Peki fixWeatherPng.js JavaScript dosyasında neler var? Hadi bir bakalım:

Window.attachEvent("yükleme", fixWeatherPng); function fixWeatherPng() ( var img = document.getElementById("weatherImage"); var src = img.src; img.style.visibility = "gizli"; var div = document.createElement("DIV"); div.style. filtre = "progid:DXImageTransform.Microsoft.AlphaImageLoader(+ kaynak + "", boyutlandırma="ölçek""; // Bazı 49abcnews.com'a özgü CSS stilleri, kısa olması için çıkarılmıştır. img.replaceNode(div); )

Komut dosyasının ne yaptığını adım adım analiz edelim. Öncelikle tarayıcıya sayfa yüklendiğinde fixWeatherPng işlevini yürütmek istediğimizi söylüyoruz. Komut dosyasının geri kalanı işlevin kendisidir.

Başlamak için önce üzerinde çalışacağımız resmi id özelliği ile arar ve img değişkeninde saklarız. src özniteliğini (resim dosyasının URL'si) src değişkeninde saklarız. Ardından, görünürlük CSS özelliğini gizli olarak ayarlayarak img öğesini gizleriz.

Orijinal img öğesini (gizli olan), AlphaImageLoader'ın başarıyla eklendiği yeni oluşturulmuş bir div öğesiyle değiştiriyoruz.

AlphaImageLoader'ınızı enjekte etmek için DOM komut dosyası kullanma - anında bitleri filtreleme - kötü ama gerekli bir yanı vardır - kötü CSS. Ayrıca, anlamsal olmayan div öğeleri (X)HTML işaretlemenizin dışında tutulacaktır. Ve hepsi koşullu yorumlarda açıklandığı sürece, diğer tarayıcıların Microsoft'un kodu tarafından bozulma şansı yoktur. (kullanışlı blogger: Burada Jeff, Microsoft'un "beceriksiz" bir çözümünü ustaca göstermeye çalışıyor)

Yanlış bir şey yapmanız gerekiyorsa, en azından onu ayıklayabilir ve ihtiyacı olmayan her şeyden ayrı tutabilirsiniz.

Gözaltında

Bir grafik formatı olarak PNG, GIF'lerde yaygın olarak kullanılanların ötesinde birçok teknik avantaj sunar. Aslında, faydaları o kadar büyük ki, PNG uzun zaman önce fotoğraf görüntüleri ile ilgisi olmayan bir grafik formatı olarak devralabilirdi. Internet Explorer'ın alfa kanalı şeffaflığı gibi daha önemli PNG özelliklerinden bazılarını desteklememesi, sonuç olarak birçok web geliştiricisini devre dışı bıraktı. Ancak PNG'den korkmamanız için çok iyi iki neden var.

İlk olarak, Internet Explorer 6 ve önceki sürümleri bile GIF'in yapabilecekleri açısından (elbette animasyon hariç) PNG'yi neredeyse tamamen destekler. PNG neredeyse her zaman daha küçük bir dosya boyutu göstererek daha hızlı yüklenmelerine ve daha az kaynak tüketmelerine olanak tanır.

İkincisi, Internet Explorer 7 PNG alfa şeffaflığı için tam destek sunar. Yarı saydam seçeneklerin tam gamıyla elde edilebilecek etkiler neredeyse sınırsızdır. Bu makalede anlatılanlar gibi PNG şeffaflığını kullanmanın ilginç yollarını bulan tasarımcıların yeni seviye Daha önce hiç görülmemiş stiller. PNG şeffaflığı ile neler yaratabileceğiniz konusunda size bazı faydalı fikirler verdim, ancak bununla kalmayın. Kendin için bak!

Cameron Adams, Mark Boulton, Andy Clarke, Simon Collison, Jeff Croft, Ethan Marcotte, Derek Featherstone, Ian Lloyd, Dan Rubin ve Rob Weychert'in Web Standartları Yaratıcılığından bir alıntı; ED'nin arkadaşları tarafından gönderildi. Telif hakkı Jeff Croft 2007. Apress, Inc.'in izniyle kullanılmıştır.

PNG görüntü formatı en popüler olanlardan biridir ve kullanıcılara sıkıştırılmış görüntüleri kaliteden ödün vermeden saklamalarını sağlar. Hepsinden önemlisi PNG, grafikleri düzenlemek veya İnternet'te kullanılır. Ardından, bilgisayarınızda bu formatta bir dosyayı açabileceğiniz birkaç basit yola bakacağız.

PNG dosyalarını görüntülemek ve düzenlemek için açmanıza izin veren birkaç farklı yöntem vardır. Aşağıda verilen talimatları uygulamanız yeterlidir ve resmi açmak zor olmayacaktır.

Yöntem 1: Resim görüntüleyiciler

İnternette, görüntüleri görüntülemek ve düzenlemek için birçok grafik düzenleyici ve özel yazılım vardır. Kullanıcılara, resimlerle çalışma sürecini olabildiğince konforlu hale getiren çok sayıda işlev ve araç sağlarlar. Örnek olarak GIMP programını kullanarak bir PNG görüntüsünü açma işlemini düşünün:

GIMP herhangi bir nedenle size uymuyorsa, kendinizi tanımanızı öneririz. tam liste Aşağıdaki bağlantıdaki makalemizde resim görüntüleyiciler. Orada kesinlikle uygun bir şey bulacaksınız.

İle çeşitli manipülasyonlar yapmak gerektiğinde resmi aç, genişletilmiş işlevselliğe ve çok sayıda farklı araca sahip özel grafik düzenleyicileri kullanın. Bunlar hakkında daha fazla bilgiyi aşağıdaki bağlantıdaki makalemizde okuyabilirsiniz.

Yöntem 2: Standart Windows aracı

İşletim sisteminin tüm sürümlerinde Windows sistemleri Yerleşik bir resim görüntüleyici var. Ayrıca PNG dosyalarını açar. Bu sürece daha yakından bakalım:

Tüm PNG resimlerinin standart Windows Fotoğraf Görüntüleyicisi aracılığıyla açılması gerekiyorsa şu adımları izleyin:

Şimdi, varsayılan olarak, tüm PNG dosyaları standart araçlar fotoğrafları görüntüleme. Açılacak programı değiştirmek için, farklı bir yazılım seçerek aynı adımları uygulamanız yeterlidir.

Bu yazımızda detaylı olarak inceledik. basit yollar PNG resimlerini açın. Gördüğünüz gibi, içinde bu süreç karmaşık bir şey yoktur ve her şey sadece birkaç adımda yapılır.

".png ile biten bir dosya uzantısına sahip bir dosyanız olduğu için buradasınız. .png dosya uzantısına sahip dosyalar yalnızca belirli uygulamalar tarafından başlatılabilir. .png dosyalarının belgeler veya medya değil, veri dosyaları olması mümkündür." , bu da onların "hiç görülmemeleri gerektiği anlamına gelir.

a .png dosyası nedir?

PNG dosyaları, genellikle diğer Web grafiklerinin yanı sıra bir web sitesinde bulunan görsel öğeler için uygulanan sıkıştırılmış raster görüntü dosyalarıdır. Bu .png dosyalarının görüntü içeriği, bitmap görüntülerle entegre edilmiş dizin renklerinden oluşur ve bu .png dosyalarına uygulanan kayıpsız dijital görüntü sıkıştırma ve kodlama özellikleri, GIF dosyalarına entegre edilen sıkıştırma standartlarına benzer. Taşınabilir ağ grafikleri olarak da bilinen PNG formatı, renk desteği ve patent lisansı açısından GIF görüntülerinin sınırlamalarını kaldırmak için geliştirildi. Bu PNG dosyalarının saydamlık kanalı, 8 bit desteği uygulamak için iyileştirildi. Bu PNG dosyalarında CMYK desteği yoktur.

.png dosyası nasıl açılır?

Bir .png dosyasını veya PC'nizdeki başka bir dosyayı çift tıklatarak başlatın. Dosya ilişkilendirmeleriniz doğru ayarlanmışsa, .png dosyanızı açması gereken uygulama onu açacaktır. Doğru uygulamayı indirmeniz veya satın almanız gerekebilir. Bilgisayarınızda doğru uygulamaya sahip olmanız da mümkündür, ancak .png dosyaları henüz onunla ilişkilendirilmemiştir. Bu durumda, bir .png dosyasını açmaya çalıştığınızda, Windows'a o dosya için hangi uygulamanın doğru olduğunu söyleyebilirsiniz. O andan itibaren, bir .png dosyasının açılması doğru uygulamayı açacaktır.

.png dosyası açan uygulamalar

Microsoft Windows için Adobe Photoshop CS6

Adobe Photoshop CS6 için Microsoft Windows Windows 7 (SP'siz ve SP1'li) ve Windows XP SP3'lü Windows bilgisayarlarda indirilebilen bir görüntü düzenleme ve yönetme yazılımıdır. Bu yazılım yeni özelliklerle birlikte gelir ve için araçlar dijital görüntülerin kolay, hızlı, eğlenceli ve gelişmiş düzenlemesi. Bu programı görüntü düzenleme için güvenilir kılan özelliklerden biri, daha hızlı ve yüksek kaliteli performans sağlayan bir motor teknolojisi olan Adobe Mercury Graphics Engine'dir. İçeriğe Duyarlı araçlar, görüntüleri herhangi bir efekt olmadan kırpabileceğiniz, bulanıklığı veya geniş açılı lens eğriliklerini otomatik olarak düzeltebileceğiniz, kırmızı gözü kaldırabileceğiniz ve parlaklık ve kontrast gibi renk dengesini ayarlayabildiğiniz için görüntüleri kolaylıkla rötuşlamak için tasarlanmış yeni özelliklerdir. Bu görüntü düzenleyici ayrıca kaydedilmemiş görüntüleri, Arka Plan Kaydetme seçeneği, Bulanıklaştırma Galerisi, Kırpma aracı, video oluşturma ve çok daha fazlasını yedekleyebilen otomatik kurtarma özelliğiyle birlikte gelir. Tüm bu yeni geliştirilmiş özellikler ve modern, kullanıcı dostu bir arayüz ile, Photoshop CS6 olmadan dijital fotoğrafları düzenlemek hiç bu kadar eğlenceli ve kolay olamaz.

Mac için Adobe Photoshop CS6

Mac için Adobe Photoshop CS6

Mac için Adobe Photoshop CS6, özellikle Mac bilgisayarlar, özellikle 64-bit'te Mac OS X v10.6 ila 10.7 için tasarlanmış Creative Suiteâ'¬Â görüntü yönetim yazılımının sürümüdür. Bu görüntü programı, hızlı ve yüksek kaliteli görüntü geliştirme performansı için aynı şirket tarafından geliştirilen Mercury Graphics Engine, İçeriğe Duyarlı özellikler, film tasarımı için sezgisel yeniden tasarlanmış araçlar, iş akışları gibi yeni bir düzenleme özellikleri ve araçları seti ile birlikte gelir. , Bulanıklaştırma Galerisi, Kırpma aracı ve çok daha fazlası. Adobe Mercury Graphics Engine, düzenleme görevini tamamlamayı kolay ve hızlı hale getirecek şekilde çalışır. Bu aynı zamanda otomatik kurtarma ve Arka Plana Kaydetme seçenekleriyle görüntülerin paylaşılmasına ve taşınmasına da olanak tanır. Yeni İçeriğe Duyarlı araçlar, daha tatmin edici bir çıktıyla sonuçlanan görüntüleri rötuşlamanın veya geliştirmenin kolay ve kontrol edilebilir bir yolu için yapılmıştır. Temel olarak, herhangi bir kullanıcının görüntüleri otomatik olarak düzeltmesine, kırpmasına ve geniş açılı lens eğriliklerini düzeltmesine olanak tanır.

ACD Sistemleri Kanvas 14

ACD Sistemleri Kanvas 14

ACD Systems Uluslararası A.Ş. kullanıcıların verileri analiz etmelerini, grafikleri geliştirmelerini ve tüm bilgileri kolay ve hızlı bir şekilde paylaşmalarını sağlayan teknik bir grafik çözüm yazılımı olan ACD Systems Canvas 14'ün geliştiricisidir. Bu program, kullanıcılara teknik grafikleri ve illüstrasyonları doğru bir şekilde yapmalarında yardımcı olan tam özellikli araçlarla tasarlanmıştır. Görüntü düzenlemeden nesne çizim araçlarına kadar değişen düzenleme araçlarından oluşur. Bu program tarafından oluşturulan herhangi bir sonuç, grafik ve mühendislikle ilgili herhangi bir iş kolu için projeler, teklifler ve diğer amaçlar için iyi sunumlar yapar. Özellikler hakkında daha fazla bilgi, kullanıcılar nesneleri yeniden boyutlandırarak ve ölçeklendirerek, şekiller çizerek ve ayrıca kontur ve dolgu mürekkepleri veya genişlikleri ekleyerek seçeneği düzenleme ile aynı dosyayı kullanarak raster görüntüler ve vektör grafikleriyle çalışabilir. Metinler veya etiketler ve format boyutları eklemek ve ayrıca grafikler oluşturmak için bir araç da vardır. Bu program ile kullanıcılar, bitmiş projeleri sunumlar veya yayınlar aracılığıyla paylaşabilirler.

ACD Sistemleri ACDSee 15

ACD Sistemleri ACDSee 15

ACD Systems ACDSee 15, Microsoft Windows ve Mac OS X 10.6 (Windows XP Service Pack 2, Vista, 7 & 8; Mac OS X 10.5, 10.6) için bir görüntü düzenleyici, görüntüleyici ve RAW/görüntü düzenleyici programı içeren bir fotoğraf yazılımıdır. , 10.7 ve Dağ Aslanı). ACD Systems International, Inc. tarafından geliştirilmiştir. ve başlangıçta 16 bitlik bir uygulama olarak dağıtıldı ve daha sonra 32 bitlik bir sürümle yükseltildi. Bu uygulama için bu minimum donanım gereksinimi, bir Intel pentium III/ AMD Athlon 512 MB RAM (310 MB boş sabit sürücü alanı ile), 1024 x 768 çözünürlükte yüksek renkli ekran adaptörü ve bir CD/DVD yazıcı ile işlemci veya eşdeğeri. ACDSee, GIF, BMP, JPG, PNG, MP3, PSD, WAV, MPEG ve TIFF gibi formatlardaki video ve ses dosyalarını yönetir ve destekler. Kullanıcılar çevrimiçi olarak paylaşılabilen fotoğraf ve video koleksiyonlarını görüntüleyebilir, düzenleyebilir, efektler ekleyebilir ve organize edebilir. Fotoğraflar, kameradan veya diğer depolama aygıtından içe aktarıldıkları için düzenlenebilir. Ayrıca, kullanıcıların GPS özellikli kameralardan gelen görüntülerin konumunu görmelerini sağlayan Harita görünümü ve coğrafi etiketleme desteğine sahiptir. Hızlı tarama, tarama, düzenleme ve yedekleme seçenekleri gibi özellikler fotoğrafların tarihe ve olaya göre sıralanmasını ve yedek kopyaların CD, DVD ve Blu-Ray'e depolanmasını kolaylaştırır.

PNG dosyası, Taşınabilir Ağ Grafiği biçiminde kaydedilmiş bir bit eşlem görüntüsüdür. Her PNG görüntüsü bir palet içerir - kullanılan bir dizi renk. Dosya boyutunu küçültmek için Deflate algoritması kullanılarak kayıpsız sıkıştırma kullanılır. Öncelikle İnternet'te web sayfaları için resim olarak kullanılır. Biçim, eksikliklerine ek olarak 2004 yılına kadar ücretsiz kullanım kısıtlamaları olan GIF'in yerini alacak şekilde tasarlandı. yazılım. Yeni biçim PNG bu sorunları çözdü. Özellikle, 8 bit alfa kanalı desteği ve 48 bite kadar renk derinlikleri desteği uygular. GIF biçimindeyken yalnızca tam saydamlık mümkündür ve renk paleti yalnızca 256 renkle (8 bit) sınırlıdır. Ancak, öncekinden farklı olarak, bu biçim animasyonu desteklemez. Bu amaçla başka bir MNG formatı oluşturuldu. PNG dosyalarında, CMYK paletini kullanmak da imkansızdır, çünkü bu biçim grafiklerle profesyonel çalışma için tasarlanmamıştır. PNG dosyaları herhangi bir tarayıcıda ve hemen hemen her resim görüntüleyici ve düzenleyicide açılabilir. AT Windows dosyası PNG uzantısı ile fareye çift tıklayarak açılabilir.

.png dosya uzantısı bir PNG görüntüsünü temsil eder. Görüntüleme ve işleme bit eşlem PNG formatında aşağıdaki programlarla mümkündür: Microsoft Windows Fotoğrafları, Microsoft Windows Fotoğraf Görüntüleyicisi, Microsoft Paint, Adobe Photoshop CC. Ayrıca, listelenen programlar bu formattaki resimleri, resimleri ve çizimleri dönüştürebilir.

PNG dosya formatı özel programlar tarafından açılır. Bu formatı açmak için önerilen programlardan birini indirin.

PNG uzantısı, görüntüleri kalite kaybı olmadan depolamak için kullanılan bir dosya biçimidir. İnternette kullanım için özel olarak tasarlanmış, İnternet'teki en popüler fotoğraf formatıdır.

PNG dosya uzantısına sahip bir dosya bir dosyadır taşınabilir Ağ Grafikleri. Biçim kayıpsız sıkıştırma kullanır ve genellikle GIF'e bir alternatif olarak görülür. Ancak GIF'in aksine, PNG dosyalarında animasyon desteklenmez.

Hem gri tonlamalı hem de tam renkli fotoğraflar PNG formatına sahiptir, şeffaf katmanlar desteklenir. PNG sıkıştırması genellikle bundan daha iyi, GIF'de kullanılır. JPG'nin bazen PNG'ye göre daha fazla avantajı vardır, ancak bu tür bir sıkıştırmadan sonra, metin içeren görüntülerde veya yüksek kontrastlı alanların çevresinde hatalar oluşabilir.

PNG dosyası nasıl açılır

PNG dosyalarını açmak için herhangi bir İnternet tarayıcısını veya grafik düzenleyiciyi kullanabilirsiniz. Hem Windows OS platformu hem de Mac OS, bu tür görüntüleri görüntülemek için yerleşik mekanizmalara sahiptir.

PNG formatı ne için?

Varsayılan Png - Windows Fotoğraf Görüntüleyici programı, bir sistem olduğu için genellikle PNG dosyalarını açmak için kullanılır. Windows programı. Ama onları görmenin başka birçok yolu var.

Tüm tarayıcılar (ör. Chrome, Firefox, Internet Explorer vb.) çevrimiçi açtığınız PNG dosyalarını otomatik olarak görüntüler, yani bilgisayarınızda görüntülemek istediğiniz her PNG dosyasını indirmeniz gerekmez. Tarayıcıyı, kombinasyonla bilgisayarınızda zaten bulunan PNG dosyalarını açmak için de kullanabilirsiniz. Ctrl tuşları+ O. Bu programların çoğu aynı zamanda sürükle ve bırak özelliğini de destekler, böylece bir PNG dosyasını açmak için tarayıcınıza sürükleyip bırakabilirsiniz.

Bu tür görüntüleri açmak için birkaç çevrimdışı seçenek de vardır - bunlar özeldir grafik düzenleyici. Birkaç popüler olan - XnView , İrfanGörünüm , FastStone Resim Görüntüleyici , Google sürücü , GNOME ve gThumb'ın Gözü. PNG dosyalarını düzenlemek için listelenen programlardan, uygulamalardan hemen hemen her birini kullanabilirsiniz. Boya ve Paint.NET, popüler GIMP yardımcı programı ve iyi bilinen Adobe Photoshop.

PNG dönüştürme

Görüntü dosyaları dönüştürülebilir Farklı yollar, örneğin, çeşitli programları kullanarak png'ye ve ondan png'ye dönüştürün ve çevrimiçi hizmetler. Örneğin, bu, Png düzenleyici - Fotoğraf Dönüştürücü yapmanızı sağlar.

Taşınabilir Ağ Grafiği (PNG) formatında saklanan görüntü dosyası; Renklerden oluşan bir bit eşlem içerir ve bir .GIF dosyasına benzer kayıpsız sıkıştırma kullanır, ancak kopyalama kısıtlamaları yoktur. Genellikle web görüntüsü grafiklerini depolamak için kullanılır.

PNG formatı (png olarak okunur) kısıtlamalara yanıt olarak oluşturuldu GIF formatı, esas olarak renk desteğini artırmak ve patentsiz bir görüntü formatı sağlamak için. Buna ek olarak, iken gif dosyaları yalnızca opak veya tamamen saydam pikselleri destekler, PNG görüntüleri, renklerin opaktan saydama değişmesine izin veren 8 bitlik bir saydamlık kanalı içerebilir.

PNG resimleri GIF resimleri gibi canlandırılamaz. Ancak ilişkili .MNG formatı canlandırılabilir. PNG görüntüleri, profesyonel grafik kullanımı için tasarlanmadığından CMYK desteği sağlamaz. PNG görüntüleri çoğu web tarayıcısı tarafından desteklenir.

Mac OS X 10.4 ve sonraki sürümleri, ekran görüntülerini PNG dosyaları olarak saklar. ubuntu linux ayrıca yazdırılan ekran görüntülerini PNG formatında saklar.

MIME türü: resim/png

Format için programı indirin PNG

Bu yazımda bir tanesinden bahsetmek istiyorum. hoş olmayan özellik PNG24'te şeffaf görüntüler kaydederken kendini gösteren "Photoshop". Orijinal görüntüyü alalım ve bir parça parçayı PNG24'e kopyalayalım. Bunu şöyle yaptım: Çokgen Kement aracını kullanarak bir parça seçtim, kopyalayıp yapıştırdım. yeni belge, ardından Web için Kaydet aracılığıyla kaydedildi:

PNG24, 456 Kb

PNG24'teki ilk bölümde öğrendiğimiz gibi, bir görüntü esas olarak iki katmandan oluşur: her piksel için renk verilerini içeren bir RGB katmanı ve şeffaflıklarıyla ilgili bilgileri içeren bir alfa kanalı.

PNG grafik formatı: işleme ve görüntüleme

Görüntüyü daha verimli bir şekilde paketlemek için kesinlikle şeffaf alanlarda herhangi bir rengin olması gerektiğini varsaymak mantıklıdır. Ancak, Photoshop'un RGB katmanına kaydettiği budur (Bunu Seashore editörü aracılığıyla gördüm):

Ve çıplak gözle, kesinlikle gereksiz bilgilerin büyük parçaları olduğunu görebilirsiniz:

Diğer düzenleyicileri kullanmak istemiyorsanız (örneğin, Adobe Fireworks'te böyle bir kusur fark etmedim), Photoshop'ta bu kusuru düzeltmenin basit bir yolunu sunuyorum. Görevimiz, kesinlikle şeffaf alanlardaki tüm bilgileri bir renkle değiştirmektir (bu alanların en küçük bayt ağırlığına sahip olacağından şüphe etmemek için tercihen siyah).

1. Örneği Photoshop'ta açın ve katmandaki görüntüyü seçin: Katmanlar paletinde katmanın küçük görüntüsünü Ctrl+tıklayın.

2. Hızlı maske moduna geçin (Q tuşu).

3. Görüntü → Ayarlamalar → Eşik'i kullanarak, maskenin yalnızca rengi siyah olan piksellerini bırakın. Bunu yapmak için kaydırıcıyı en sol konuma sürükleyin.

4. Hızlı maske modundan çıkın (Q tuşu) ve seçimi tersine çevirin (Seçim → Ters veya Ctrl+Shift+I). Yalnızca kesinlikle şeffaf pikseller seçili kaldı.

5. Seçili alanı siyahla doldurun (birçok yol vardır, örneğin Düzenle → Doldur aracılığıyla).

6. Seçimi tekrar ters çevirin ve katmana bir maske ekleyin (katmanlar paletindeki simge).

7. Şimdi Web için Kaydet'i yapıyoruz ve görüntünün 122 KB mucizevi bir şekilde nasıl “kaybolduğunu” görüyoruz.

Tüm eylemlerin çok rahat bir şekilde Eylemler'e kaydedildiğini ve ardından tek bir tuşa basılarak gerçekleştirildiklerini bir kez daha tekrarlıyorum.

Devam edecek.

Çeşitli atölyelerde ve stüdyoda meslektaşlarımla konuşurken, birçokları için PNG formatının tek avantajının dürüst yarı saydamlığın varlığı olduğu sonucuna vardım. İnternette bu format hakkında bilgi ararsanız, web geliştiricilerinin iki kampa ayrıldığını görmek kolaydır. İlki, bu formatın ne kadar harika olduğunu, sıradan kodlayıcılar ve tasarımcılar tarafından anlaşılmayan tamamen teknik verilerle (örneğin, deflate sıkıştırma algoritmalarının LZW'ye göre üstünlüğü hakkında) çalıştığını yazarken, diğerleri işe yaramazlık hakkında değişen derecelerde aptallık yorumları bırakıyor. PNG'nin, spesifikasyonda açıklanan şeylerin özünü araştırmaya bile zahmet etmeden.

Web için illüstrasyonlar hazırlarken bunları nasıl kullanacağımızı öğrenmek için bu formatın ne gibi avantajlar sağladığını anlamaya çalışalım.

Terminoloji ile başlayalım. Çoğu okuyucunun Photoshop kullandığını ve orada PNG-8 ve PNG-24 adlarını gördüğünü varsayıyorum. Bunlar iki farklı biçim değil, yalnızca aynı PNG'nin varyasyonlarıdır. Biçim, üç tür görüntüyü saklamanıza izin verir: gri tonlamalı (görüntüyü tanımlamak için bir kanal kullanılır - beyaz), dizinlenmiş renk (GIF'de olduğu gibi renk paleti kullanılır) ve gerçek renk (üç kanal kullanılır - RGB).

PNG formatının en önemli avantajı elbette yeni sıkıştırma algoritmalarıdır. GIF'in yalnızca yatay, tek renkli alanları etkili bir şekilde sıkıştırdığını herkes hatırlıyor mu? Artık bu sınırlamayı unutabilirsiniz:

GIF, 2568 bayt

PNG-24, 372 bayt

İkinci önemli avantaj, PNG paketleyicisinin sıkıştırma için çok daha uygun verileri alabilmesi sayesinde satır filtrelemedir (tarama çizgisi filtrelemesi veya delta filtreleri).

Nasıl çalıştıklarına bir örnek verelim. Yatay gradyan ile 5x5 piksel bir görüntü alalım ve bir dosyaya nasıl kaydedilebileceğini şematik olarak gösterelim (her sayı benzersiz bir renktir).

Örnekte görebileceğiniz gibi, GIF kodlayıcı yatay olarak iyi paketlenmeyen satırları sıkıştırır (çünkü aynı renkler dikey olarak yayılır). Bir PNG kodlayıcı bu verileri şu şekilde dönüştürebilir:

Her satırın önüne 2 rakamı geliyordu.Bu satıra uygulanan filtredir. Bu durumda, kod çözücüye "Geçerli piksel için yukarıdaki pikselin değerini alın ve mevcut değeri ona ekleyin" diyen bir Yukarı filtresidir. Bizim durumumuzda bu 0'dır, çünkü mevcut ve üst piksellerin renkleri aynıdır. Yeterince büyük bir imajımız varsa, bu veriler daha verimli bir şekilde paketlenebilir.

neden yazdım belki? Çünkü idealleştirilmiş durumumuzda aşağıdaki şema daha verimli olacaktır:

Filtre 1 burada Sub olarak adlandırılır ve kod çözücüye şunu söyler: "Mevcut olanın solundaki pikselin değerini alın ve mevcut değeri buna ekleyin." Bu durumda 1.

Filtrelemeden sonra, tüm satırlar (filtre değerleriyle birlikte) tek bir dizide birleştirilir ve ardından deflate algoritmaları tarafından sıkıştırılır (tartışmaları bu makalenin kapsamı dışındadır).

Filtreleri kontrol edelim:

Dikkatli bir okuyucu, filtrelerin tüm dosyaya değil satırlara uygulandığını fark edebilir.

PNG dosya formatı - nedir?

Demek oluyor her biriçizgi olabilir benim filtre. Bir görüntü için 5 görüntü yüksekliği filtreleme yöntemi olabileceği ortaya çıktı. Genel olarak, iyi bir kodlayıcının görevi, dosya boyutunun minimum olacağı bu tür filtre değerlerini tam olarak seçmektir. Ne yazık ki, Photoshop işini her zaman iyi yapmaz, bu nedenle OptiPNG ve PNGCrush gibi çeşitli yardımcı programlar kurtarmaya gelir, bu da çok sayıda geçişte seçer Farklı yollar filtreleme ve veri sıkıştırma stratejileri, böylece bazı karmaşık görüntülerin boyutunu büyük ölçüde azaltır. Ancak, bu programların her dosya için bir boyut küçültmeyi garanti etmediğini, sadece verileri kodlamanın en iyi yolunu bulmaya çalıştıklarını hatırlamakta fayda var.

Photoshop'a görüntüleri gri tonlamalı modda kaydedemediği için başka bir acı verici şey, yani renk derinliğini azaltamıyor. Burada yine yukarıda bahsedilen yardımcı programlar bizi kurtaracak ve mümkünse görüntü kalitesini düşürmeden renk derinliğini azaltacaktır.

PNG-24 (photoshop → gerçek renk), 8167 bayt

PNG-24 (photoshop + OptiPNG → gri tonlamalı), 6132 bayt

Gri tonlamanın gerçek renge göre avantajları açıktır: örneğin, ilk durumda beyaz (ondalık gösterimde) 255 ve ikinci durumda 16777215 olarak yazılmıştır.

Artık PNG veri depolama bilgimizle donanmış olarak, onu web için görsel hazırlamaya uygulayabiliriz. Aşağıdaki makalelerde bununla ilgili daha fazla bilgi.

PNG (Taşınabilir Ağ Grafikleri), "ping" olarak telaffuz edilir, kayıpsız sıkıştırma kullanan bir raster grafik depolama biçimidir. PNG, GIF biçimini geliştirmek ve kullanmak için lisans gerektirmeyen bir görüntü biçimiyle değiştirmek için oluşturuldu. PNG uluslararası bir standarttır (ISO IEC 15948:2003) ve W3C tarafından resmi olarak tavsiye edilir.

PNG formatı depolar grafik bilgi sıkıştırılmış formda. Ayrıca, bu sıkıştırma, örneğin standart JPEG'den (en yüksek kalite seviyesinde bile) farklı olarak "kayıp" olmadan gerçekleştirilir.

PNG formatı, eski ve daha basit GIF formatının yanı sıra bir dereceye kadar çok daha karmaşık TIFF formatının yerini alacak şekilde tasarlanmıştır.

Web tasarımı hakkında konuşuyorsak, GIF ile karşılaştırıldığında, aşağıdaki ana avantajlara sahiptir:

İyileştirilmiş sıkıştırma: Çoğu durumda PNG görüntüsünün boyutu GIF'in boyutundan daha küçüktür.
- Görüntü başına daha fazla renk: Görüntü başına neredeyse sınırsız sayıda renk, GIF sınırı ise 256'dır.
- İsteğe bağlı alfa kanalı desteği: GIF yalnızca ikili saydamlığı desteklerken, PGN, alfa kanalı desteği aracılığıyla sınırsız sayıda saydamlık efekti elde etmenize olanak tanır.

Bir dezavantaj olarak, elbette, GIF gibi animasyon desteğinin eksikliğini belirtmekte fayda var. Elbette, Çoklu Görüntü Ağ Grafikleri (MNG) adı verilen benzer bir animasyon standardı olmasına rağmen, yaygın olarak kullanılmamaktadır ve bu nedenle büyük ölçüde modern tarayıcılar tarafından desteklenmemektedir.