Rheinwerk Computing < openbook >

 
Inhaltsverzeichnis
Vorwort
1 Prinzipien des modernen Webdesigns
2 Projektmanagement
3 Konzeption und Strategie
4 Responsive Webdesign
5 Informationsarchitektur
6 Gestaltungsgrundlagen
7 Screendesign
8 Layout und Raster
9 Farbe im Webdesign
10 Typografie
11 Bilder und Grafiken
12 Navigations- und Interaktionsdesign
13 Webdesign-Stile und -Trends
14 Animationen
15 Website-Typen
16 Tipps, Tricks und Tools
Stichwortverzeichnis

Download:
- Beispieldateien, ca. 3.64 MB

Buch bestellen
Ihre Meinung?

Spacer
<< zurück
Webdesign von Martin Hahn
Das Handbuch zur Webgestaltung
Buch: Webdesign

Webdesign
Pfeil 11 Bilder und Grafiken
Pfeil 11.1 Einführung: Die Macht der Bilder
Pfeil 11.1.1 Eigenschaften von Bildern
Pfeil 11.1.2 Konsequenzen für die Auswahl von Bildern
Pfeil 11.1.3 Bilder im Einsatz
Pfeil 11.2 Bilder im Web
Pfeil 11.2.1 Bilder als Layoutelemente
Pfeil 11.2.2 Bilder als Orientierungselemente
Pfeil 11.2.3 Bilder als Inhaltselemente
Pfeil 11.2.4 Bilder als emotionale Elemente
Pfeil 11.3 Bilderquellen
Pfeil 11.3.1 Urheberrecht
Pfeil 11.3.2 Creative-Commons-Bilder
Pfeil 11.3.3 Bilder vom Kunden
Pfeil 11.3.4 Fotos und Grafiken selbst erstellen
Pfeil 11.3.5 Fotoagenturen
Pfeil 11.3.6 Fotografen beauftragen
Pfeil 11.4 Motive & Bildstimmung 
Pfeil 11.4.1 Menschen, Mitarbeiter und das Team
Pfeil 11.4.2 Porträts
Pfeil 11.4.3 Profilbilder
Pfeil 11.4.4 Räumlichkeiten
Pfeil 11.4.5 Inszenierung von Produktfotos
Pfeil 11.4.6 Austauschbare Bilderwelten
Pfeil 11.5 Bildgestaltung
Pfeil 11.5.1 Der Bildausschnitt
Pfeil 11.5.2 »Unrechteckige« Formate und andere geometrische Formen
Pfeil 11.5.3 »Out of the Box«
Pfeil 11.5.4 Graustufen/Duplexfarben
Pfeil 11.5.5 Montagen/Collagen
Pfeil 11.5.6 Großformatige Bilder/Hintergrundbilder
Pfeil 11.6 Icons
Pfeil 11.6.1 Icons bringen Inhalte auf den Punkt
Pfeil 11.6.2 Aufmerksamkeit steuern und Struktur geben
Pfeil 11.7 Icon-Fonts
Pfeil 11.7.1 Vor- und Nachteile von Icon-Fonts
Pfeil 11.8 Illustrationen
Pfeil 11.8.1 Thematische Illustrationen
Pfeil 11.8.2 Dekorative Illustrationen
Pfeil 11.8.3 Illustrativer Text
Pfeil 11.8.4 Informative Illustrationen (Infografiken)
Pfeil 11.9 Bildbearbeitung
Pfeil 11.9.1 Die nicht destruktive Bildbearbeitung
Pfeil 11.10 Bildformate
Pfeil 11.10.1 Die Bildgröße
Pfeil 11.10.2 Die Bildkomprimierung
Pfeil 11.10.3 Die Auswahl des richtigen Bildformats
Pfeil 11.10.4 Für Web speichern
Pfeil 11.10.5 Bildgrößen optimieren
Pfeil 11.11 Bilder in HTML und CSS
Pfeil 11.11.1 Bilder in HTML
Pfeil 11.11.2 Bilder in CSS
Pfeil 11.11.3 Responsive Bilder
Pfeil 11.11.4 Retina-Displays
Pfeil 11.12 Weitere Bilder-Tools
Pfeil 11.13 Fazit
 
Zum Seitenanfang

11.9    Bildbearbeitung Zur vorigen ÜberschriftZur nächsten Überschrift

Neben der Motivwahl und -darstellung beeinflussen auch technische Faktoren das Aussehen und die Wirkung eines Bildes. Bildbearbeitungsprogramme bieten eine Vielzahl von Einstellungsmöglichkeiten, die durchaus auch überfordernd wirken können. Ein paar Punkte sollten aber bei jedem Bild überprüft werden:

  • Schärfe: Ein Foto sollte vor allem scharf sein, sodass das (Haupt)motiv gut und detailreich zu erkennen ist. Unscharfe, verschwommene Bilder wirken unprofessionell. Eine Ausnahme sind natürlich gewünschte Effekte mit weich gezeichnetem Motiv.

  • Kontrast: Das Bild sollte einen ausgewogenen Kontrast haben. Ist der Kontrast zu stark, sehen die hellen Stellen zu weiß und die dunklen zu schwarz aus. Bei einem zu geringen Kontrast erscheint das Bild ausgewaschen bzw. wie mit einem grauen Schleier.

  • Helligkeit: Ein Foto sollte weder zu hell noch zu dunkel sein. Was selbstverständlich klingt, bleibt in vielen Fällen aber leider doch oft unbeachtet.

Es gibt in der Bildbearbeitung wie in der Gestaltung natürlich immer Gründe, diese Regeln zu brechen, um einen bestimmten Effekt zu erzielen oder eine Bildaussage zu unterstreichen. Das Gleiche gilt auch für den Einsatz all der Bearbeitungsmöglichkeiten und Filter, die moderne Bildbearbeitungsprogramme zur Verfügung stellen. Mit einem Klick sind erstaunlichste Effekte umgesetzt. Wenn es aber keinen triftigen gestalterischen Grund für den Einsatz von Effekten, Filtern und Co. gibt, sollten Sie lieber auf diese verzichten.

 
Zum Seitenanfang

11.9.1    Die nicht destruktive Bildbearbeitung Zur vorigen ÜberschriftZur nächsten Überschrift

In der Bildbearbeitung wird zwischen destruktiv und nicht destruktiv unterschieden. Die nicht destruktive Bearbeitung ermöglicht, Änderungen an einem Bild vorzunehmen, ohne die ursprünglichen Bilddaten zu verändern. Wenn es möglich ist, sollte daher immer nicht destruktiv gearbeitet werden.

Adobe Photoshop bietet mehrere Möglichkeiten, nicht destruktiv zu arbeiten. Folgende allgemeine Möglichkeiten stehen zur Verfügung:

  • Einstellungs- und Füllebenen (Korrektur): Mit Einstellungs- und Füllebenen können Farb- und Tonwertkorrekturen vorgenommen werden, ohne dabei Pixelwerte zu verändern. Es gibt Einstellungsebenen unter anderem für Helligkeit/Kontrast, Tonwertkorrektur, Gradationskurve, Belichtung, Farbbalance und Farbton/Sättigung.

    Die Korrekturpalette für die Einstellungsebenen

    Abbildung 11.103    Die Korrekturpalette für die Einstellungsebenen

  • Smartobjekte: Erlauben nicht destruktives Skalieren, Drehen und Verformen.

  • Smartfilter: auf Smartobjekte angewendete Smartfilter für nicht destruktive Filtereffekte

  • Ebenen- und Vektormasken: Bildbereiche ein- und ausblenden, ohne dass die ausgeblendeten Pixel verloren gehen

  • Ebenenstile: Mit den Ebenenstilen können Ebenen visuelle Eigenschaften zugewiesen und beliebig bearbeitet werden, ohne die Ursprungsebene zu verändern. Es gibt Ebenenstile unter anderem für Kontur, Schatten nach innen und außen, Farb-, Verlaufs- und Musterüberlagerung und Schlagschatten.

    Der Ebenenstil-Dialog

    Abbildung 11.104    Der Ebenenstil-Dialog

 


Ihre Meinung?

Wie hat Ihnen das Openbook gefallen? Wir freuen uns immer über Ihre Rückmeldung. Schreiben Sie uns gerne Ihr Feedback als E-Mail an kommunikation@rheinwerk-verlag.de

<< zurück
 Zum Rheinwerk-Shop
Zum Rheinwerk-Shop: Webdesign Webdesign
Jetzt Buch bestellen

 Buchempfehlungen
Zum Rheinwerk-Shop: HTML5 und CSS3
HTML5 und CSS3


Zum Rheinwerk-Shop: Praxisbuch Usability und UX
Praxisbuch Usability und UX


Zum Rheinwerk-Shop: Responsive Webdesign
Responsive Webdesign


Zum Rheinwerk-Shop: Website-Konzeption und Relaunch
Website-Konzeption und Relaunch


Zum Rheinwerk-Shop: UX Writing und Microcopy
UX Writing und Microcopy


Zum Rheinwerk-Shop: WordPress 5
WordPress 5


Zum Rheinwerk-Shop: Stile & Looks
Stile & Looks


Zum Rheinwerk-Shop: Digitale Illustration
Digitale Illustration


 Lieferung
Versandkostenfrei bestellen in Deutschland, Österreich und in die Schweiz
InfoInfo

 
 


Copyright © Rheinwerk Verlag GmbH 2020
Für Ihren privaten Gebrauch dürfen Sie die Online-Version natürlich ausdrucken. Ansonsten unterliegt das <openbook> denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt.
Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

 
[Rheinwerk Computing]

Rheinwerk Verlag GmbH, Rheinwerkallee 4, 53227 Bonn, Tel.: 0228.42150.0, Fax 0228.42150.77, service@rheinwerk-verlag.de

Cookie-Einstellungen ändern