Wie Web-Bilder in PNG-Format zu optimieren
Wenn Sie für das iPhone, iPad entwerfen oder iPod touch, müssen Sie die beste Bildformate und Auflösung zu wählen, sowie Ihre Fotos und andere Grafiken optimieren.
Menu
- Mit dem bild in photoshop geöffnet, wählen sie datei-speichern für web devices (oder datei-speichern für web).
- In der linken oberen ecke des dialogfenster wählen sie 2-fach oder 4-up für einfache side-by-side-vergleich mehrere versionen des gleichen bildes angezeigt werden soll.
- Wählen sie ein vorschaubild zu ihren einstellungen zu ändern.
- Auf der rechten seite des dialogfensters, nur unter preset, klicken sie auf den kleinen pfeil, um das optimierte dateiformat dropdown-liste zu öffnen und entweder png 8 oder 24 wählen.
- Im feld farben, wählen sie die anzahl der farben, wie in abbildung 8-5 gezeigt.
- Wenn sie einen transparenten bereich in ihrem bild zu erhalten, markieren sie das kontrollkästchen transparenz.
- Wenn sie transparenz wählen, auch eine mattfarben angeben.
- Geben sie weitere einstellungen wie gewünscht.
- Klicken sie auf speichern.
- Geben sie einen namen für das bild, und speichern sie sie in die bilder-ordner (oder einem anderen ordner) in der lokalen site-ordner.
Wenn Sie mit einer Grafik, wie zB ein Logo, Cartoon-Figur, oder Zeichnung arbeiten, die in 256 Farben angezeigt werden können, oder weniger, die beste Wahl ist das PNG-8-Format zu verwenden, und die Gesamtzahl der Farben im Bild verwendeten reduzieren so viel wie möglich um die Dateigröße zu reduzieren.
Wenn Sie eine Farbe im Bild transparent machen wollen, und Sie arbeiten mit einem Foto oder eine andere Art von Bild mit Millionen von Farben, die besten Optionen ist PNG 24.
Um für die Verschlechterung der Bildqualität machen, was passieren kann, wenn die Farben entfernt werden, verwendet PNG ein Dithering-Trick. Dithering Pixel in einem schachbrettartigen Muster zu erzeugen subtile Farbvariation, auch mit einer begrenzten Farbpalette beinhaltet abwechselt. Der Effekt kann die Kanten des Bildes glatt streichen und mehr Farben erscheinen zu lassen, als es tatsächlich tut.
Um ein Bild in der PNG-8 oder 24-Format in Photoshop konvertieren, gehen Sie folgendermaßen vor (in Photoshop Elements oder Fireworks, ist das Verfahren ähnlich, obwohl die spezifischen Schritte können variieren):
Mit dem Bild in Photoshop geöffnet, wählen Sie Datei-Speichern für Web Devices (oder Datei-Speichern für Web).
Für Web speichern Geräte Dialogfeld erscheint. In diesem Beispiel sehen Sie die Schwarz-Weiß-Logo für die Website inplainsight Kunst. Das PNG-8-Format ist am besten für Bilder mit begrenzten Farben, wie Cartoons und Strichzeichnungen.
In der linken oberen Ecke des Dialogfenster wählen Sie 2-fach oder 4-Up für einfache Side-by-Side-Vergleich mehrere Versionen des gleichen Bildes angezeigt werden soll.
Dieses Beispiel zeigt, 2-Up, das es ermöglicht, sehen das Originalbild des Logos an der Spitze, sowie eine Vorschau der optimierten Version am Boden macht.
Wählen Sie ein Vorschaubild zu ihren Einstellungen zu ändern.
Klicken Sie auf ein Bild, um es im Dialogfenster zu aktivieren.
Auf der rechten Seite des Dialogfensters, nur unter Preset, klicken Sie auf den kleinen Pfeil, um das optimierte Dateiformat Dropdown-Liste zu öffnen und entweder PNG 8 oder 24 wählen.
Wenn Sie PNG 8, werden Sie die kleinste Dateigrößen erhalten. Wählen Sie PNG 24 nur dann, wenn Sie ein Bild mit vielen Farben optimieren wollen und noch in der Lage sein, eine Farbe transparent zu setzen.
Im Feld Farben, wählen Sie die Anzahl der Farben, wie in Abbildung 8-5 gezeigt.
Je weniger Farben, die Sie, desto kleiner ist die Dateigröße und desto schneller wird das Bild verwenden herunterladen. Aber genau um, wenn Sie die Farben reduzieren zu viel, Sie Details zu verlieren. Die ideale Anzahl von Farben, hängt von Ihrem image-, wenn Sie zu weit gehen, Ihr Bild schrecklich aussehen wird.
Wenn Sie einen transparenten Bereich in Ihrem Bild zu erhalten, markieren Sie das Kontrollkästchen Transparenz.
Jeder Bereich des Bildes, das transparent war, als Sie das Bild im Editor erstellt transparent erscheint im Vorschaufenster. Wenn Sie nicht über einen transparenten Bereich in Ihrem Bild haben, hat diese Einstellung keine Auswirkung.
Transparenz ist ein guter Trick für die Herstellung von Text oder ein Bild erscheint auf einer Web-Seite zu schweben. Das ist, weil ein transparenter Hintergrund nicht auf der Webseite erscheinen. Sie können Transparenz als Hintergrund-Option im Dialogfeld Neue Datei wählen, wenn Sie ein neues Bild in Photoshop oder Photoshop Elements erstellen.
Wenn Sie Transparenz wählen, auch eine Mattfarben angeben.
Sie wollen, dass die matte Farbe den Hintergrund Ihrer Web-Seite zu passen, so dass die Dithering entlang der transparenten Rand wird mit dem Hintergrund verschmelzen. Wenn Sie nicht eine matte Farbe angeben, wird die Transparenz für einen weißen Hintergrund, die eine Ursache kann Heiligenschein bewirken, wenn das Bild auf einem farbigen Hintergrund angezeigt wird.
Geben Sie weitere Einstellungen wie gewünscht.
Der Rest der Einstellungen in diesem Dialogfenster können die Standardwerte in Photoshop gelassen werden.
Klicken Sie auf Speichern.
Optimierte Version speichern Dialogfeld geöffnet wird.
Geben Sie einen Namen für das Bild, und speichern Sie sie in die Bilder-Ordner (oder einem anderen Ordner) in der lokalen Site-Ordner.
Wiederholen Sie diese Schritte für jedes Bild, das Sie wollen als GIF oder PNG für Ihre Website zu optimieren.
Versuch und Irrtum ist eine großartige Technik im Save for Web Dialogfeld Geräte. Das Vorschaufenster zeigt deutlich die zunehmend abbauenden Effekt, dass die Auswahl immer weniger Farben erzeugt.