Erforschung von Bildtypen und -formaten für Webdesign - Dummies

Grafiksoftwarepakete sind nicht billig, also bevor Sie machen Sie müssen entscheiden, welche Art von grafischer Arbeit Sie für Ihre Webdesign-Projekte tun. Webdesigner fallen in drei Standardkategorien, und Ihr Designstil kann in eins, zwei oder alle drei fallen:

Grafikdesigner: Sie können sich als Illustrator betrachten, weil Sie alle von Grund auf neu erstellten Grafiken erstellen. Sie beginnen mit einer leeren Tafel und erstellen mithilfe verschiedener Tools und Techniken Ihrer bevorzugten Bildbearbeitungssoftware Ihre eigenen einzigartigen Grafiken.
Grafischer Manipulator: Sie sind ein Meister darin, Grafiken oder Fotos zu erstellen, die von jemand anderem erstellt und für die Verwendung in Ihren Webdesign-Projekten manipuliert wurden. Durch die Verwendung verschiedener Werkzeuge und Techniken können Sie beispielsweise Farben und Größen anpassen und sogar die Formen und Positionen der verschiedenen Elemente einer Grafik ändern (insbesondere wenn Sie mit Vektorgrafiken arbeiten, die im nächsten Abschnitt behandelt werden)…
Grafischer Verbraucher: Sie laden Bilder von Ressourcen im Internet herunter und verwenden diese Bilder, um Ihren Websiteprojekten farbige und visuelle Designelemente hinzuzufügen.

Sie können eine, zwei oder alle drei dieser Kategorien anpassen, und das ist völlig akzeptabel, wenn Sie Designs für Websites entwerfen, solange Sie die Urheberrechts- und Lizenzbeschränkungen für von Ihnen verwendete Grafiken einhalten (wenn Sie ein Grafikmanipulator sind und / oder Verbraucher). Darüber hinaus ist es wichtig zu verstehen, welche Arten von Grafiken Sie verwenden können, um Ihre Ziele für Ihre Webdesignprojekte zu erreichen. In den folgenden Abschnitten werden verschiedene Arten von Grafiken und Dateiformaten behandelt, damit Sie besser verstehen, welche Arten von Grafiken für verschiedene Zwecke verwendet werden müssen.

Raster- und Vektorbilder vergleichen

Als Grafikdesigner arbeiten Sie höchstwahrscheinlich mit zwei Grafiktypen - Raster und Vektor. Als Webdesigner arbeiten Sie auf jeden Fall mit Rasterbildern, und Sie können mit Vektorbildern arbeiten. Das Softwareprogramm, mit dem Sie Grafiken bearbeiten und erstellen, hängt vom Typ der Bilddatei ab, mit der Sie arbeiten. Hier ein kurzer Überblick über die Unterschiede zwischen den Raster- und Vektorbildern:

Raster: Diese Bilder bestehen aus Hunderten von kleinen Punkten oder Pixeln. Jedes Pixel kann eine andere Farbe haben, um satte, vollfarbige Bilder und Fotos zu ermöglichen. Das Erstellen und Bearbeiten eines Rasterbilds erfordert ein rasterbasiertes Bearbeitungsprogramm wie Corels PaintShop Pro oder Photoshop.
Vektor: Diese Bilder bestehen aus Kurven anstelle von Pixeln. Vektorbilder haben vier Vektorpunkte, einen in jeder Ecke des Bildes, und Sie verbinden die Punkte mit Kurven. Dann können die Kurven mit Farben und Effekten gefüllt werden.

Rasterbilder

Rasterbilder, wie z. B. Fotos und Grafiken, die im Designdesign der Website verwendet werden, werden am häufigsten für das Webdesign und die Darstellung auf Websites verwendet. Rasterbilder skalieren nicht gut; Wenn Sie versuchen, die Größe des Bilds zu vergrößern oder zu verkleinern, sehen Sie einen deutlichen Verlust in der Bildqualität, da die Pixelgröße geändert und das Bild körnig wird. Rasterbilder sind flach - es gibt nur eine Ebene zu den Bildelementen - wodurch es schwierig (und manchmal unmöglich) ist, einige der verschiedenen Bildelemente innerhalb der Grafikdatei zu bearbeiten. Für die Verwendung im Web werden Rasterbilder jedoch schnell geladen, da sie normalerweise eine kleine Dateigröße aufweisen und nicht viel Bandbreite zum Übertragen benötigen.

Vektorgrafiken

Vektorgrafiken werden für die Druckgestaltung verwendet, wie z. B. Visitenkarten, Broschüren, Zeitschriftenanzeigen und Werbetafeln. Da Vektorbilder aus Kurven und nicht aus statischen Pixeln bestehen, können Vektorbilder ohne Qualitätsverlust skaliert werden. Daher können Sie ein Vektorbild auf die Größe einer Briefmarke verkleinern oder es an die Seite eines großen LKWs anpassen, und die Bildqualität bleibt gleich. Vektorbilder eignen sich daher ideal für Logos und Druckarbeiten. Üblicherweise werden Vektorbilder geschichtet - jedes Element des Bildes hat eine eigene Ebene - damit Sie Ihren bevorzugten Vektorbild-Editor wie Illustrator verwenden können, um die verschiedenen Elemente innerhalb der Vektorbilddatei zu bearbeiten und zu ändern.

Die Dateigrößen von Vektorbildern können sehr groß werden, daher sind sie nicht ideal für die Anzeige auf einer Website. Sie sollten stattdessen Rasterbilder verwenden. Sie können jedoch mit einer Vektordatei für Ihre Webdesignarbeit beginnen und die endgültige Datei dann in einem für das Web optimierten Rasterformat speichern.

Betrachten von Bilddateiformaten

Es ist wichtig, die Arten von Bilddateiformaten zu verstehen, mit denen Sie beim Entwerfen im Web arbeiten werden. Die Bilder - ob Fotos oder Logos -, die Sie auf Ihrer Website speichern und verwenden, sollten wegen der kleineren Dateigröße und der reichen Farbanzeige Rasterdateitypen sein. In den folgenden Abschnitten erfahren Sie, wie die Komprimierung die Größe von Rasterbildern beeinflusst und welche Arten von Dateiformaten Sie in Ihren eigenen Projekten verwenden können.

Grundlegendes zur Komprimierung

Wenn Sie Rasterbilder in Ihrem Webdesign verwenden, benötigen Sie eine bestimmte Komprimierung, oder eine Verringerung der Gesamtgröße der Datei. Die Bildkomprimierung tritt auf, wenn Sie eine Rasterbilddatei als JPG, GIF oder PNG speichern. Durch das Komprimieren einer Datei wird die Größe der Bilddatei verringert, sodass das Bild auf einer Webseite schneller geladen wird.

Je größer die Bilddatei, desto länger dauert es, bis das Bild auf Ihrer Webseite geladen wird.

Komprimierende Bilddateien können zwei verschiedene Algorithmen verwenden, je nachdem, welches Dateiformat Sie für Ihre Bilddatei gewählt haben.Bei digitalen Bilddateien erfolgt die Komprimierung auf zwei Arten:

Verlustfreie Komprimierung: Alle Daten aus der Bilddatei werden während und nach der Komprimierung beibehalten. Dies führt normalerweise zu keinem Qualitätsverlust der Originalbilddatei.
Verlustreiche Komprimierung: Dadurch wird die Größe einer Bilddatei verringert, indem bestimmte Datenbits aus der Originaldatei entfernt oder Teile des Bilds miteinander kombiniert werden. Dies führt normalerweise zu einem Verlust der Bildqualität von der Originaldatei.

Festlegen, welche Dateitypen für Ihre Projekte verwendet werden sollen

Die folgende Tabelle listet sechs gängige Dateiformate auf, mit denen Sie beim Webdesign sowie Dateityp und Komprimierung arbeiten können. Obwohl die endgültigen Bilddateien, die Sie speichern und in Ihrer Webdesign-Arbeit verwenden, ein Raster darstellen sollten, können Sie mit Vektorbildern beginnen, um Grafiken zu bearbeiten und zu bearbeiten, die den Anforderungen Ihrer Webdesign-Projekte entsprechen.

Bilddateiformat	Bilddateityp	Kompressionstyp
JPG	Raster	Lossy
GIF	Raster	Lossless
PNG	Raster < Verlustfrei	AI
Vektor	N / A *	EPS
Vektor	N / A *	CDR
Vektor	N / A * > *	Vektorbilder erfahren keine Komprimierung.

Hier sind die drei Hauptvektor-Bildformate, die Sie bei Ihrer Arbeit mit Grafikdesign wahrscheinlich antreffen: AI:

Adobe Illustrator, eine von Adobe entwickelte proprietäre Datei zur Darstellung von Vektorbildern

EPS: Gekapseltes PostScript-Vektorbildformat
CDR: CorelDRAW, eine von Corel entwickelte proprietäre Grafikdatei zur Darstellung von Vektorbildern
Berücksichtigen Sie bei der Entscheidung, welches Rasterbilddateiformat in Ihrem Projekt verwendet werden soll. jedes Format. Neben verschiedenen Komprimierungsarten enthalten die Dateiformate unterschiedliche Farbmengen. Die Eigenschaften der drei gebräuchlichsten Rasterbilddateiformate umfassen Folgendes: JPG:

Dieses Format eignet sich für Fotos und kleinere Bilder, die in Ihren Webdesign-Projekten verwendet werden. Obwohl das JPG-Format mit verlustreicher Komprimierung komprimiert wird, können Sie die Größe der Komprimierung anpassen, die beim Speichern der Datei auftritt. Sie können eine Komprimierungsstufe von 1 bis 100 auswählen. In der Regel wird bei den Komprimierungsstufen 1 bis 20 nicht viel Bildqualitätsverlust festgestellt.

PNG: Dieses Format eignet sich für größere Grafiken im Webdesign, z. B. für das Logo oder die Hauptkopfgrafik. die Marke und das visuelle Erscheinungsbild der Website. PNG verwendet eine verlustfreie Bildkomprimierung und erleidet daher während der Komprimierung keinen Datenverlust, wodurch ein saubereres, schärferes Bild erzeugt wird. PNG-Dateien können auch auf einer transparenten Leinwand erstellt und gespeichert werden, JPG-Dateien hingegen nicht. JPG-Dateien müssen mindestens einen weißen
Canvas (Hintergrund) oder eine andere von Ihnen angegebene Farbe haben. GIF: Die Komprimierung einer GIF-Datei ist
verlustfrei , wodurch das Bild genau so entsteht, wie Sie es ohne Qualitätsverlust entworfen haben. GIF-Dateien sind jedoch auf 256 Farben beschränkt. Für Bilder mit höherer Farbe ist GIF nicht das beste Format. Verwenden Sie stattdessen das PNG-Format.