Explobildtypen und -formaten für Web-Design
Grafik-Software-Pakete sind nicht billig, also, bevor Sie eine Entscheidung treffen, auf dem man zu verwenden, müssen Sie bestimmen, welche Art von grafischen Arbeiten Sie für Ihre Web-Design-Projekte tun werde. Web-Designer lassen sich in drei Standardkategorien und Ihre Design-Stil fallen kann in ein, zwei oder alle drei:
Menu
Grafikdesigner: Sie können sich einen Illustrator betrachten, weil Sie alle Grafiken erstellen, die Sie von Grund auf neu verwenden. Sie beginnen mit einem leeren Schiefer, und durch verschiedene Werkzeuge und in Ihrem bevorzugten Bildbearbeitungssoftware verwendet Techniken, die Sie erstellen Ihre eigene einzigartige Grafiken.
Grafik-Manipulator: Du bist ein Meister bei der Grafik oder Fotos, dass jemand anders erstellt und sie für den Einsatz in Ihrem Web-Design-Projekten zu manipulieren. Durch den Einsatz verschiedener Werkzeuge und Techniken, können Sie Dinge tun passen Sie Farben und Größen und auch die Formen und Positionen der verschiedenen Elemente einer Grafik ändern (vor allem, wenn Sie mit Vektorgrafiken arbeiten, im nächsten Abschnitt behandelt) .
Grafik-Verbraucher: Sie laden Bilder von Ressourcen im Internet, und Sie verwenden diese Bilder Farbe und visuelle Design-Elemente auf Ihre Website-Projekte hinzuzufügen.
Sie können eine, zwei oder alle drei dieser Kategorien passen, und das ist durchaus akzeptabel, wenn Themen für Gestaltung von Websites so lange wie Sie durch das Urheberrecht und Lizenzbeschränkungen auf Grafiken halten Sie verwenden (wenn Sie ein Grafik-Manipulator und / oder Verbraucher sind) . Darüber hinaus ist es wichtig, die Arten von Grafiken zu verstehen, die Sie verwenden können, um Ihre Ziele für Ihre Web-Design-Projekten zu erreichen. In den folgenden Abschnitten verschiedene Arten von Grafiken und Dateiformate, damit Sie verstehen, welche Arten von Grafiken, die Sie für verschiedene Zwecke verwenden müssen.
Beim Vergleich von Raster- und Vektorgrafiken
Als Grafik-Designer, werden Sie höchstwahrscheinlich mit zwei Arten von Grafiken - Raster- und Vektor. Als Web-Designer, werden Sie auf jeden Fall mit Rasterbildern arbeiten, und Sie können mit Vektor-Bildern arbeiten. Das Software-Programm, das Sie Grafiken verwenden zu bearbeiten und zu erstellen, hängt von der Art der Bilddatei mit dem Sie arbeiten. Hier ein kurzer Überblick über die Unterschiede zwischen den Raster- und Vektorgrafiken:
Raster: Diese Bilder werden aus Hunderten von kleinen Punkten zusammengesetzt, oder Pixel. Jedes Pixel kann eine andere Farbe sein, so dass für die reichen, vollfarbige Bilder und Fotografien. Erstellen und Bearbeiten eines Rasterbildes erfordert eine rasterbasierte Bearbeitungsprogramm wie Corel Paint Shop Pro oder Photoshop.
Vektor: Diese Bilder setzen sich aus Kurven anstatt Pixel. Vektor-Bilder haben vier Vektor Punkte, eine in jeder Ecke des Bildes, und verbinden Sie die Punkte mit Kurven. Dann können die Kurven mit Farben und Effekten gefüllt werden.
Rasterbilder
Rasterbilder, wie Fotos und Grafiken auf der Website Thema Design verwendet, werden am häufigsten für Web-Design und Anzeige auf Websites verwendet werden. Rasterbilder nicht skaliert gut, wenn Sie versuchen, das Bild größer oder kleiner, um die Größe, sehen Sie einen spürbaren Verlust in der Bildqualität, weil die Pixel skaliert erhalten und das Bild wird körnig. Rasterbilder sind Wohnung - gibt es nur eine Schicht auf die Bildelemente - es schwierig (und manchmal unmöglich) machen einige der unterschiedlichen Bildelemente innerhalb der Grafik-Datei zu bearbeiten. Für die Verwendung im Web jedoch Rasterbilder werden schnell geladen, da sie in der Regel eine geringe Größe Datei und nicht viel Bandbreite zu übertragen, benötigen.
Vektor-Bilder
Vektor-Bilder sind für Print-Design, wie Visitenkarten, Broschüren, Zeitschriftenanzeigen und Plakaten verwendet. Da Vektor-Bilder aus Kurven gemacht werden, anstatt statische Pixel, Vektor-Bilder können ohne Qualitätsverlust skaliert werden. Daher können Sie einen Vektor-Bild auf die Größe einer Briefmarke zu verringern oder seine Größe erhöhen, um die Seite eines großen LKW zu passen, und die Bildqualität bleibt gleich. Deshalb Vektor-Bilder sind ideal für Logos und Druckarbeiten. Typischerweise Vektorbilder sind Schicht - jedes Element des Bildes hat seine eigene Schicht - so dass Sie Ihre Lieblings-Vektor-Bild-Editor, wie Illustrator zu verwenden, um die verschiedenen Elemente in dem Vektor-Image-Datei zu manipulieren und zu verändern.
Die Dateigrößen von Vektor-Bilder können sehr groß werden, so sind sie nicht ideal für die Anzeige auf einem Website- Sie Rasterbilder zu verwenden, anstatt wollen werde. Sie können jedoch mit einem Vektor-Datei für Ihre Web-Design arbeiten und speichern Sie dann die letzte Datei in einem Rasterformat starten arbeiten, die für das Web optimiert wird.
Mit Blick auf Bilddateiformate
Es ist wichtig, die Art der Bilddateiformate zu verstehen, die Sie für die Gestaltung im Web arbeiten. Die Bilder - ob Fotos oder Logos - Sie Rasterdateitypen auf Ihrer Webseite wegen der kleineren Dateigröße und Rich-Farbdisplay speichern und verwenden sollten. In den folgenden Abschnitten erfahren Sie, wie Komprimierung, um die Größe von Rasterbildern und entdecken Sie, welche Arten von Dateiformaten betrifft Sie in Ihren eigenen Projekten verwenden.
Verstehen Kompression
Wenn Sie Rasterbilder in Ihrem Web-Design zu verwenden, müssen sie eine bestimmte Menge an zu haben, Kompression, oder eine Abnahme in der Gesamtgröße der Datei. Bildkompression tritt auf, wenn Sie eine Rasterbilddatei als JPG, GIF oder PNG speichern. Komprimieren einer Datei verringert die Größe der Bilddatei, so dass die Bild Lasten schneller auf einer Webseite.
Je größer die Bilddateigröße, desto länger dauert es für das Bild auf Ihrer Web-Seite zu laden.
Komprimieren von Bilddateien können zwei verschiedene Algorithmen verwenden, je nach Dateiformat, das Sie für Ihre Image-Datei ausgewählt haben. Für digitale Bilddateien, geschieht Kompression in einer von zwei Möglichkeiten:
Lossless Kompression: Alle Daten aus der Bilddatei wird während und nach der Kompression gehalten, in der Regel in Nullqualitätsverlust aus der Originalbilddatei ergibt.
Lossy-Komprimierung: Dies reduziert die Größe einer Bilddatei durch bestimmte Bits von Daten aus der ursprünglichen Datei zu entfernen oder durch Teile des Bildes kombiniert, die einander ähnlich sind. Dies führt in der Regel in Bildqualitätsverlust aus der ursprünglichen Datei.
Die Festlegung, welche Dateitypen für Ihre Projekte zu verwenden,
Die folgende Tabelle listet sechs gängige Dateiformate, die Sie mit für Web-Design und die Art der Datei und Kompression arbeiten werde. Obwohl die endgültige Bilddateien, die Sie in Ihrem Web-Design-Arbeit zu speichern und verwenden sollten Raster sein, können Sie mit Vektor-Bilder beginnen zu bearbeiten und zu manipulieren Grafiken auf die Bedürfnisse Ihres Web-Design-Projekten zu entsprechen.
| Image File Format | Bilddateityp | Komprimierungstyp |
|---|---|---|
| JPG | Raster | Lossy |
| GIF | Raster | Lossless |
| PNG | Raster | Lossless |
| AI | Vektor | N / A* |
| EPS | Vektor | N / A* |
| CDR | Vektor | N / A* |
*Vektor-Bilder nicht erleben Kompression.
Hier sind die drei Hauptvektor Bildformate, die Sie wahrscheinlich in Ihrer Arbeit mit Grafik-Design kommen über werden:
AI: Adobe Illustrator, ein proprietäres, von Adobe entwickelte Datei für die Darstellung von Vektorgrafiken
EPS: Encapsulated Postscript-Vektor-Bildformat
CDR: CorelDRAW, eine proprietäre Grafikdatei von Corel entwickelt für die Darstellung von Vektorgrafiken
Bei der Entscheidung, was Format Rasterbilddatei in Ihrem Projekt verwenden, die Eigenschaften jedes Format betrachten. Zusätzlich zu verschiedenen Arten von Komprimierungs enthalten die Dateiformate unterschiedliche Mengen an Farbe. Die Eigenschaften der drei häufigsten Rasterbilddateiformate sind die folgenden:
JPG: Dieses Format wird für Fotos und kleinere Bilder in der Web-Design-Projekten verwendet geeignet. Obwohl das JPG-Format mit verlustbehaftete Komprimierung komprimiert, können Sie die Stärke der Kompression einstellen, das auftritt, wenn Sie die Datei speichern. Sie können eine Komprimierungsstufe von 1 bis wählen 100- Sie in der Regel nicht viel Verlust an Bildqualität mit Kompressionsstufen 1 bis 20 zu sehen.
PNG: Dieses Format eignet sich für größere Grafiken im Web-Design verwendet, wie zum Beispiel das Logo oder Haupt-Header-Grafik, die die Marke und das gesamte visuelle Erscheinungsbild der Website identifiziert. PNG verwendet verlustfreie Bildkompression und daher leidet keinen Datenverlust während der Kompression, eine sauberere, schärferes Bild zu schaffen. PNG-Dateien können auch auf einer transparenten Leinwand erstellt und gespeichert werden, während JPG-Dateien nicht. JPG-Dateien müssen mindestens eine weiße Segeltuch (Hintergrund), oder eine andere Farbe, die Sie festgelegt haben.
GIF: Kompression einer GIF-Datei ist lossless, das Bild-Rendering genau so, wie Sie entworfen es ohne Qualitätsverlust. Allerdings sind GIF-Dateien auf 256 Farben beschränkt. Für höhere Farbbildern ist GIF nicht das größte Format verwenden Sie stattdessen das PNG-Format zu Nutzungs-.