Photoshop CS4 für Webdesigner - ciando.com filePhotoshop CS4 für Webdesigner Hellwig Jonas Hellwig...

30
FRANZIS Webdesign Photoshop CS4 für Webdesigner Webprojekte planen, entwerfen und umsetzen Webgraphics: Backgrounds, Icons, Typo WordPress-Themes mit Photoshop erstellen Jonas Hellwig

Transcript of Photoshop CS4 für Webdesigner - ciando.com filePhotoshop CS4 für Webdesigner Hellwig Jonas Hellwig...

Page 1: Photoshop CS4 für Webdesigner - ciando.com filePhotoshop CS4 für Webdesigner Hellwig Jonas Hellwig Die Basis für erfolgreiche Websites ist attraktives und nutzerfreundliches Design.

Photoshop CS4für Webdesigner

Hel

lwig

Jonas Hellwig

Die Basis für erfolgreiche Websites ist attraktives und nutzerfreundliches

Design. Klare Navigation, stimmige Farben, verständliche Icons und

lesbare Texte sorgen dafür, dass sich Besucher auf einer Website wohl-

fühlen. Und Adobe Photoshop ist dabei das zentrale Werkzeug. Dieses

Buch zeigt, wie Sie mit Photoshop Webprojekte entwerfen, Gestaltungs-,

Navigations- und Farbkonzepte erstellen und diese mit Backgrounds,

Buttons, Icons und anderen Grafikelementen gezielt umsetzen.

Anhand von mehr als 50 Workshops und einem konkreten Webdesign-

Projekt lernen Sie, wie Sie die wichtigsten Grafikobjekte mit Photo-

shop CS4 entwerfen und erzeugen. Autor Jonas Hellwig liefert dabei

nicht nur kreativen Input, sondern auch die wichtigsten technischen

Hintergründe, wie die Umsetzung des Layouts in XHTML, CSS oder

als WordPress-Theme. Dabei spielt es keine Rolle, ob Sie lieber mit

Windows oder Mac OS X arbeiten.

Über 50 Profi-Workshops • Gestaltungsraster entwickeln, konkave und konvexe Linien erstellen

• Semitransparentes Overlay, Schatten, Wet-Floor-Effekt

• Patterns: Scanlines, Karbon, Free Pattern, Patterns mit CSS

• Strukturen: Holz, gebürstetes Metall, Samt, Felsen, Gras

• Brushes: Photoshop-Brushes, externe Brushes

• Buttons: Aqua-, Metall- und Aero-Buttons

• Candybar- und Tab-Navigation

• Farbkonzepte mit dem Kuler entwickeln

• Textdesign: Pfadtext, 3-D-Text, Text aus Gold, Letterpress-Effekt

• Fotos altern lassen, ausbrechende Bildelemente,

Skalieren und Inhalt bewahren

• Badges: Glanzstern, Post-it, Tesafilm, Sticker

• Von A bis Z: Umsetzung eines konkreten Webprojektes

Auf www.buch.cdAlle Dateien des Beispielprojekts zum Download.

Besuchen Sie unsere Website · www.franzis.de39,95 EUR [D]

ISBN 978-3-7723-7147-9Das Praxisbuch

für Webdesigner

FRA

NZI

S

FRANZIS

Webdesign

Photoshop CS4für Webdesigner

Webprojekte planen, entwerfen und umsetzen

Webgraphics: Backgrounds, Icons, Typo

WordPress-Themes mit Photoshop erstellen

Jonas Hellwig

Über den AutorJonas Hellwig, Jahrgang 1985,lebt und arbeitet als gelernterMediengestalter für Digital-und Printmedien in Düssel-dorf. Schon zu Schulzeiten erkannte er seine Vorliebe für Gestaltung undfür Literatur. Sein einstiges Hobby wurde 2005zum Beruf, als Jonas Hellwig als Praktikant inder Düsseldorfer Internetagentur Euroweb startete, für die er heute als Artdirector arbeitet.Zu seinem Hauptaufgabengebiet gehört nebender Gestaltung und Umsetzung professionellerWebsites das Corporate Design des Unter-nehmens sowie das Design für ausgewählteKey-Accounts. Privat lebt Jonas Hellwig sein Gefühl für illustratives Design gern auf seinemBlog www.kulturbanause.de aus.

Phot

osho

p fü

r Web

desig

ner

Aus dem Inhalt:• Photoshop für Webdesignaufgaben

optimal einstellen

• Werkzeuge, Bedienfelder und Arbeitsbereiche

• Projekt-Briefing und -planung: Für wen ist die Website, und was soll sie können?

• Farbmischung, -wirkung und Farbkonzepte

• Aktuelle Webdesign-Trends

• Gestaltungsraster: Fixed- versus Fluid-Layouts

• Navigationskonzepte: Farbleitsysteme und Interaktion

• Formenkanon: Flächen, Linien, organische Formen und Transparenz

• Musterarbeit: Patterns, Strukturen und Brushes

• Zeichen setzen: Icons und Piktogramme,Speaking Navigation

• Typografie: Fonts, Zeilenlänge, Zeilenabstand und Absätze

• Texte: Auszeichnungen, Links, Schriftglättung

• Fotos fürs Web aufbereiten: Bildquellen, Bildformate, Thumbnails

• Zierelemente: Badges, Sticker und Co.

• Content-Design: Homepage versus Website

• HTML-Ausgabe mit Photoshop

• Coding: Layoutumsetzung in XHTML und CSS

• WordPress: Layout als WordPress-Theme umsetzen

7147-9 U1+U4 16.06.2009 17:35 Uhr Seite 1

Page 2: Photoshop CS4 für Webdesigner - ciando.com filePhotoshop CS4 für Webdesigner Hellwig Jonas Hellwig Die Basis für erfolgreiche Websites ist attraktives und nutzerfreundliches Design.

Jonas Hellwig

Photoshop CS4für Webdesigner

7147-9 Titelei:7147-9 Titelei 19.06.2009 11:46 Uhr Seite 1

Page 3: Photoshop CS4 für Webdesigner - ciando.com filePhotoshop CS4 für Webdesigner Hellwig Jonas Hellwig Die Basis für erfolgreiche Websites ist attraktives und nutzerfreundliches Design.

FRANZIS

Webdesign

Photoshop CS4für Webdesigner

Mit 792 Abbildungen

Jonas Hellwig

7147-9 Titelei:7147-9 Titelei 19.06.2009 11:46 Uhr Seite 3

Page 4: Photoshop CS4 für Webdesigner - ciando.com filePhotoshop CS4 für Webdesigner Hellwig Jonas Hellwig Die Basis für erfolgreiche Websites ist attraktives und nutzerfreundliches Design.

Bibliografische Information der Deutschen Bibliothek

Die Deutsche Bibliothek verzeichnet diese Publikation in der Deutschen Nationalbibliografie;detaillierte Daten sind im Internet über http://dnb.ddb.de abrufbar.

Hinweis: Alle Angaben in diesem Buch wurden vom Autor mit größter Sorgfalt erarbeitet bzw. zusammengestellt und unter Einschaltung wirksamer Kontrollmaß-nahmen reproduziert. Trotzdem sind Fehler nicht ganz auszuschließen. Der Verlag und der Autor sehen sich deshalb gezwungen, darauf hinzuweisen, dass sie weder eine Garantie noch die juristische Verantwortung oder irgendeine Haftung für Folgen, die auf fehlerhafte Angaben zurückgehen, übernehmen können. Für dieMitteilung etwaiger Fehler sind Verlag und Autor jederzeit dankbar. Internetadressen oder Versionsnummern stellen den bei Redaktionsschluss verfügbaren Informationsstand dar. Verlag und Autor übernehmen keinerlei Verantwortung oder Haftung für Veränderungen, die sich aus nicht von ihnen zu vertretenden Umständen ergeben. Evtl. beigefügte oder zum Download angebotene Dateien und Informationen dienen ausschließlich der nicht gewerblichen Nutzung. Einegewerbliche Nutzung ist nur mit Zustimmung des Lizenzinhabers möglich.

© 2009 Franzis Verlag GmbH, 85586 Poing

Alle Rechte vorbehalten, auch die der fotomechanischen Wiedergabe und der Speicherung in elektronischen Medien. Das Erstellen und Verbreiten von Kopien aufPapier, auf Datenträgern oder im Internet, insbesondere als PDF, ist nur mit ausdrücklicher Genehmigung des Verlags gestattet und wird widrigenfalls strafrechtlichverfolgt.

Die meisten Produktbezeichnungen von Hard- und Software sowie Firmennamen und Firmenlogos, die in diesem Werk genannt werden, sind in der Regel gleich-zeitig auch eingetragene Warenzeichen und sollten als solche betrachtet werden. Der Verlag folgt bei den Produktbezeichnungen im Wesentlichen den Schreib-weisen der Hersteller.

Herrausgeber: Ulrich DornSatz & Layout: Phoenix publishing services GmbHart & design: www.ideehoch2.deDruck: Himmer AG, AugsburgPrinted in Germany

ISBN 978-3-7723-7147-9

7147-9 Titelei:7147-9 Titelei 19.06.2009 11:46 Uhr Seite 4

Page 5: Photoshop CS4 für Webdesigner - ciando.com filePhotoshop CS4 für Webdesigner Hellwig Jonas Hellwig Die Basis für erfolgreiche Websites ist attraktives und nutzerfreundliches Design.

Vorwort

Das Entwerfen erfolgreicher Websites stellt ganz eigene Anforderungen an Designer, Illustra-

toren und Entwickler. Adobes Photoshop bietet „fast“ alles, was man für den Entwurf zeitge-

mäßer Websites benötigt. Stellen Sie Photoshop noch einen leistungsstarken Webeditor zur

Seite, gibt es nichts, was dieses Team noch toppen könnte.

Für den erfolgreichen Photoshop-Workfl ow, egal ob digitale Dunkelkammer oder innovatives

Webdesign, sind zwei Dinge entscheidend: erstens die grundlegende Beherrschung der Werk-

zeuge und zweitens das Know-how zur Lösung der wichtigsten Bildbearbeitungsaufgaben. Dieses

Buch setzt grundlegende Photoshop-Kenntnisse voraus. Es versucht nicht, alle Funktionen und

Möglichkeiten der Software aufzuzeigen, sondern es setzt den Fokus auf die professionelle Ent-

wicklung und Gestaltung grafi scher Elemente und Bauteile für den Einsatz in Onlinemedien.

Anhand von mehr als 50 Workshops und am Beispiel eines konkreten Webprojekts lernen Sie den

Entwurf unterschiedlichster Grafi kelemente mit Photoshop CS4 kennen. Hierbei spielt es keine

Rolle, ob Sie lieber mit Windows oder Mac OS X arbeiten. Die hier vorgestellten Arbeitsabläufe

und Techniken umfassen alle wesentlichen Aspekte des modernen Webdesigns – einschließlich

der Umsetzung des Layouts in XHTML, CSS und – als besonderen Leckerbissen – WordPress.

Sollten Sie Fragen, Kritik oder Anregungen zu diesem Buch haben, erreichen Sie mich über mei-

ne Website www.kulturbanause.de oder per E-Mail unter: [email protected].

Jonas Hellwig

Düsseldorf im Mai 2009

www.kulturbanause.de –

Die Website des Autors.

Page 6: Photoshop CS4 für Webdesigner - ciando.com filePhotoshop CS4 für Webdesigner Hellwig Jonas Hellwig Die Basis für erfolgreiche Websites ist attraktives und nutzerfreundliches Design.

Photoshop für Webdesigner 16

Voreinstellungen 16Allgemein 17Benutzeroberfl äche 18Dateihandhabung 19Leistung 20Zeigerdarstellung 20Transparenz/Farbumfang-Warnung 20Maßeinheiten & Lineale 21Hilfslinien, Raster und Slices 21Zusatzmodule 22Text 22

Werkzeuge 22Alle Werkzeuge im Überblick 23

Bedienfelder 28Alle Bedienfelder im Überblick 28

Arbeitsbereiche 34Anordnen 34Standard-Arbeitsbereiche 34

Briefi ng und Projektplanung 40

Wahrnehmung 41Content und Funktionalität 41Gestaltgesetze 41

Zielgruppe 43Soziodemografi sche Merkmale 43Geografi sche Merkmale 46Soziale Zielgruppendefi nition 46Psychologische Merkmale 48Zielgruppe des Buchbeispiels 48

Konventionen 48GIULIA-Prinzip 49

Farbkonzepte und Layout 52

Farben 52Farbmischung 52Farben im Web 53Farbwirkungen 54Farbkontraste 55Gefahren im Umgang mit Farben 57Farbkonzepte 57

INHALTSVERZEICHNIS

Page 7: Photoshop CS4 für Webdesigner - ciando.com filePhotoshop CS4 für Webdesigner Hellwig Jonas Hellwig Die Basis für erfolgreiche Websites ist attraktives und nutzerfreundliches Design.

Workshop: Farbkonzept manuell entwickeln 59Workshop: Farbkonzept mit dem Kuler 61Workshop: Farbkonzept aus Bildquelle entwickeln 63Buchprojekt: Farbkonzept festlegen 64

Größen im Webdesign 65Monitoraufl ösung 65Viewport 66

Webdesign-Trends 69Retro & Vintage 69Hand-Drawing 70Web 2.0 70Grunge 72

Scribble 72Buchprojekt: Scribble 73

Gestaltungsraster 75Fixed- versus Fluid-Layouts 75Ausrichtung 76Symmetrie und Asymmetrie 77Gleichgewicht 78Der Goldene Schnitt 78Die Drittelregel 78Full-Single-Websites 79Workshop: Gestaltungsraster entwickeln 80Grid-Systeme 82Buchprojekt: Gestaltungsraster 83

Grafi sche Objekte 86

Flächen und Linien 86White Space 86Linien 87Organische Formen 873-D-Linien 88Workshop: Linien mit Verlauf aufwerten 89Workshop: Gepunktete Linie mit Schere 90Workshop: Kontur mit einem Muster füllen 91Workshop: Konkave und konvexe Linien 92Workshop: Farbfl ächen aufwerten 94Workshop: Outlines 95Buchprojekt: Flächen und Linien 96

Transparenz 98Workshop: Semitransparentes Overlay 98

INHALTSVERZEICHNISPHOTOSHOP FÜRWEBDESIGNER

Page 8: Photoshop CS4 für Webdesigner - ciando.com filePhotoshop CS4 für Webdesigner Hellwig Jonas Hellwig Die Basis für erfolgreiche Websites ist attraktives und nutzerfreundliches Design.

Schatten und Spiegelung 102Spiegelungen bei 2-D-Objekten 102Schatten bei 2-D-Objekten 103Workshop: Schatten 104Workshop: Wet-Floor-Effekt 106

Patterns, Strukturen und Brushes 110

Patterns 110Workshop: Scanlines 111Stripe-Generator 112Workshop: Karbon 113Free Patterns 114Patterns mit CSS 114

Strukturen 114Workshop: Holzstruktur 115Workshop: Gebürstetes Metall 118Workshop: Samt 120Workshop: Felsen 121Workshop: Textur an Oberfl äche anpassen 123Workshop: Sich wiederholende Strukturen erstellen 126Buchprojekt: Strukturen 129

Brushes 130Photoshop-Brushes 130Externe Brushes 130Workshop: Brushes erstellen 131Pinsel exportieren 132

Navigationskonzepte umsetzen 136

Navigationsstrukturen 136Navigation optimal platzieren 139

Navigationselemente gestalten 140Icons und Piktogramme 140„Speaking“ Navigation 141Farbleitsysteme einsetzen 141Interaktionen kennzeichnen 142Workshop: Moderner Button 143Workshop: Aqua-Button 145Workshop: Metall-Button 149Workshop: Aero-Button 151Workshop: Candybar-Navigation 154Workshop: Tab-Navigation 157

INHALTSVERZEICHNIS

Page 9: Photoshop CS4 für Webdesigner - ciando.com filePhotoshop CS4 für Webdesigner Hellwig Jonas Hellwig Die Basis für erfolgreiche Websites ist attraktives und nutzerfreundliches Design.

Workshop: Navigation mit Suchfeld 159Buchprojekt: Navigation 166

Typografi e im Internet 170

Schriftarten 171Content-Fonts 171Schmuckschriften 171Serif oder Sans Serif? 172

Schriftgrößen 172Konsultationsgrößen 172Pixelfonts 173Lesegrößen 173Schaugrößen 173Schriftgrößen im Web 173

Zeilenlänge, Zeilenabstand und Absätze 174Zeilenlänge 174Zeilenabstand 174Textausrichtung und Silbentrennung 175

Textauszeichnungen 175Typografi e und Farbe 176Links 176

Design von Textobjekten 177Schriftglättung: Vor- und Nachteile 177Workshop: Text auf Pfad 178Workshop: Liegender 3-D-Text 180Workshop: Letterpress-Texte 184Workshop: Shade-Text 186Workshop: Chrome-Text 188Workshop: Text aus Glas 192Workshop: Text aus Gold 196Buchprojekt: Schriftwahl 199

Fotos im Internet 202

Bilder googeln? 202Legale Bildquellen 202Bildauswahl 203Bildausschnitt und -ausrichtung 203Bildformate 203Bildspiegelungen 203Thumbnails 204Alt-Attribute 204

INHALTSVERZEICHNISPHOTOSHOP FÜRWEBDESIGNER

Page 10: Photoshop CS4 für Webdesigner - ciando.com filePhotoshop CS4 für Webdesigner Hellwig Jonas Hellwig Die Basis für erfolgreiche Websites ist attraktives und nutzerfreundliches Design.

INHALTSVERZEICHNIS

Fotos fürs Web aufbereiten 204Workshop: Horizont ausrichten 205Workshop: Fotos altern lassen 206Workshop: Bildelemente ausbrechen lassen 207Workshop: Fotoecke umbiegen 211Workshop: Skalieren und Inhalt bewahren 213Workshop: Verträumte Fotos 216Buchprojekt: Fotos 219

Zierelemente und Icons 222

Badges, Sticker und Co. 222Workshop: Glanzstern 222Workshop: Post-it 225Workshop: Tesafi lm 228Workshop: Badge 231Workshop: Sticker 234Buchprojekt: Zierelemente 237

Icons 238Workshop: Favicon 240Workshop: Warning-Icon 241Workshop: Kalender-Icon 244Workshop: Lupen-Icon 249Buchprojekt: Icons 253

Content-Design 256

Text- und Bildinhalte 256

Homepage versus Website 257Buchprojekt: Content-Design 257

Details 259

Grafi ken fürs Web optimieren 262

Für Web und Geräte speichern 262Ausgabeeinstellungen vergleichen 262Werkzeuge 262Device Central 263Vorschau 263Vorschau und Metadaten 263Bildgröße 263

Dateiformate im Web 264GIF (Graphics Interchange Format) 264GIF-Grafi ken für das Web optimieren 265

Page 11: Photoshop CS4 für Webdesigner - ciando.com filePhotoshop CS4 für Webdesigner Hellwig Jonas Hellwig Die Basis für erfolgreiche Websites ist attraktives und nutzerfreundliches Design.

JPG/JPEG (Joint Photographic Expert Group) 267JPEG-Grafi ken für das Web optimieren 267PNG-8 (Portable Network Graphics) 268PNG-24 268PNG-24 für das Web optimieren 269

Animation 269GIF-Animation 269

HTML-Ausgabe 272Slices 272HTML-Ausgabe mit Photoshop 273Alternative zu Slices 275Workshop: Zoomify 276

Zusatzmodule für Photoshop 278Web-Fotogalerie 278

Coding: Sauberer Quellcode 282

Buchprojekt: Coding 282Grundaufbau 282Hintergrund 284Header 285Logo und Slogan 286Navigation 286Content 289Sidebar 289Footer 291Content 293Dateiupload 295

Buchprojekt: WordPress 295WordPress (lokal) installieren 296Theme Basics 298WordPress-Theme erstellen 303Theme testen 306Seiten anlegen und verwalten 307Kategorien und Artikel anlegen und verwalten 308Navigation anpassen 309Startseite festlegen 310Kommentarfunktion einbinden 310

Index 312Bildnachweis 319

INHALTSVERZEICHNISPHOTOSHOP FÜRWEBDESIGNER

Page 12: Photoshop CS4 für Webdesigner - ciando.com filePhotoshop CS4 für Webdesigner Hellwig Jonas Hellwig Die Basis für erfolgreiche Websites ist attraktives und nutzerfreundliches Design.

4 GRAFISCHE OBJEKTE

Page 13: Photoshop CS4 für Webdesigner - ciando.com filePhotoshop CS4 für Webdesigner Hellwig Jonas Hellwig Die Basis für erfolgreiche Websites ist attraktives und nutzerfreundliches Design.
Page 14: Photoshop CS4 für Webdesigner - ciando.com filePhotoshop CS4 für Webdesigner Hellwig Jonas Hellwig Die Basis für erfolgreiche Websites ist attraktives und nutzerfreundliches Design.

86

Grafi sche ObjekteNach der grundlegenden Planung Ihrer Website geht es jetzt endlich an die Umsetzung viel-

fältigster Designaufgaben. Anhand praxisnaher Workshops zeige ich Ihnen alle wichtigen Berei-

che professionellen Webdesigns und erläutere zudem, wie Sie typische Fehler von Anfang an

vermeiden. Der Schlüssel zum Erfolg liegt im Detail!

Der Wet-Floor-Effekt ist ein fantastisches Gestaltungsmittel, mit dem Sie einerseits Räumlichkeit, aber

auch einen sauberen, modernen Eindruck erzeugen.

Flächen und Linien

Flächen entstehen in Ihrer Gestaltung

auto matisch durch die Verwendung von

Texten, Freiräumen und ausgearbeiteten Ele-

menten. Ein Design ohne Fläche gibt es nicht,

denn selbst eine weiße Seite ist eine Fläche.

White Space Als „White Space“ bezeichnet man informa-

tionsfreie Flächen im Design. Bei der Ent-

wicklung Ihres Designs bzw. Gestaltungs-

rasters sollten Sie auf ausreichenden White

Space achten, da eine Website ansonsten

schnell überladen und unübersichtlich wirkt.

Bedenken Sie auch, dass freie Flächen im-

mer auch ein Gestaltungsmittel darstellen.

White Space schafft in Ihrem Layout ange-

nehme Freifl ächen und grenzt unterschiedli-

che Informations räume voneinander ab. Der

Begriff „White Space“ bedeutet nicht, dass die

Fläche weiß sein muss. Sie enthält lediglich

keinen nennenswerten Inhalt.

Page 15: Photoshop CS4 für Webdesigner - ciando.com filePhotoshop CS4 für Webdesigner Hellwig Jonas Hellwig Die Basis für erfolgreiche Websites ist attraktives und nutzerfreundliches Design.

LinienLinien werden häufi g verwendet, um Inhalts-

bereiche voneinander zu trennen oder das Ge-

staltungsraster zu unterstreichen. Ein gutes

Gestaltungsraster mit sinnvoll eingesetztem

White Space braucht solche Linien jedoch

nicht. Verzichten Sie daher auf den Einsatz

von Linien, wenn Ihr Design auch ohne die-

se dekorativen Hilfsmittel funktioniert. Hori-

zontale und vertikale Linien wirken struktu-

rierend und ruhig. Diagonale Linien, wie z. B.

Scanlines, vermitteln Energie und lassen das

Auge umher wandern. Bedenken Sie, dass es

nicht nur gerade Linien gibt. Linien können

auch Objekte andeuten, umschließen und

unterstreichen. Gestrichelte Linien, wie in

Schnittmustern, werden auch im Webdesign

häufi g eingesetzt und führen mitunter zu

sehr ansehnlichen Ergebnissen. Im Inhalts-

bereich können Linien sinnvoll als Zierelement

verwendet werden, um beispielsweise die

einzelnen Artikel eines Weblogs voneinander

abzugrenzen.

CSS-Borders Rahmen und Linien werden in CSS mit dem

Attribut border realisiert. Die heute gebräuch-

lichsten Werte sind:

solid•

dashed•

dotted•

div#container {

border:1px solid black;

}

Organische FormenFlächen und Linien ergeben sich im Web-

design meist automatisch. Aufgrund der

leichteren Gestaltung sind diese jedoch häu-

White-Space-Beispiel: vlourenco.com

Beispiel für Linien als Trennelemente: cesserdigital.net

87

KAPITEL 4GRAFISCHE OBJEKTE

Page 16: Photoshop CS4 für Webdesigner - ciando.com filePhotoshop CS4 für Webdesigner Hellwig Jonas Hellwig Die Basis für erfolgreiche Websites ist attraktives und nutzerfreundliches Design.

88

fi g gerade, rechteckig und rechtwinklig. Wenn

Sie eine Seite gestalten möchten, die sich von

der Masse abhebt, versuchen Sie mal, orga-

nische Formen , geschwungene oder schräge

Linien einzusetzen. Auch abgerundete Ecken

an Farbfl ächen und Buttons wirken wahre

Wunder. Diese Seiten wirken sofort viel dyna-

mischer als solche, die einem strengen Aufbau

mit sichtbarem Raster folgen.

3-D-Linien Mit Linien können Sie verschiedene Funktions-

oder Inhaltsbereiche Ihres Layouts untertei-

len. In plastischen Layouts oder technischen

Interfaces kommen häufi g dreidimensional

wirkende Linien zum Einsatz. Damit eine Linie

dreidimensional, also plastisch wirken kann,

braucht sie ein Highlight und einen Schatten.

Ohne eine Lichtquelle kann die Linie nicht

plastisch wirken. Damit sowohl Licht als auch

Schatten sichtbar werden, muss die Hinter-

grundfarbe der Linie so gewählt werden, dass

es noch hellere sowie dunklere Farbtöne gibt.

Schwarzer oder weißer Hintergrund kommt

demnach nicht infrage. Nun werden zwei je-

weils ein Pixel starke Linien direkt unter- bzw.

nebeneinander positioniert. Wichtig ist, dass

die hellere Linie unterhalb der dunkleren po-

sitioniert wird, um eine zurückgesetzte Linie

zu simulieren.

Da der Mensch automatisch davon ausgeht,

dass Licht von oben kommt, muss die Schat-

tenkante wiederum oberhalb der Lichtkante

liegen. Soll die Linie hingegen hervorgehoben

wirken, drehen Sie die Positionierung um. Bei

vertikalen Linien greift dasselbe System der

Wahrnehmungspsychologie. Hier wird davon

ausgegangen, dass das Licht von links kommt.

Wenn Sie sichtbare oder eindeutige Lichtquel-

len im Layout verwenden, wird diese Regel

jedoch gebrochen. Dieses System der Schat-

ten- und Lichtführung lässt sich von Linien

auf andere Gestaltungselemente wie Buttons

oder Infobereiche übertragen.

webdesigndiensten.nl - dieses

Gestaltungsbeispiel setzt auf den

Einsatz organischer Formen.

Page 17: Photoshop CS4 für Webdesigner - ciando.com filePhotoshop CS4 für Webdesigner Hellwig Jonas Hellwig Die Basis für erfolgreiche Websites ist attraktives und nutzerfreundliches Design.

Workshop: Linien mit Verlauf aufwerten

[1] Dokument erstellen Öffnen Sie ein neues Photoshop-Doku-

ment mit 800 x 600 Pixeln, 72 dpi Auf-

lösung, RGB-Farbmodus und weißem

Hintergrund.

[2] Linie erstellen Wählen Sie das Auswahlwerkzeug: Ein-

zelne Zeile und erstellen Sie eine ent-

sprechende Auswahl. Auf einer neuen

Ebene – [Cmd/Strg]+[Umschalt]+[N] –

füllen Sie die Auswahl mit Blau #0066ff.

Heben Sie anschließend die Auswahl

über Auswahl/Auswahl aufheben –

[Cmd/Strg]+[D] – wieder auf.

[3] Farbverlauf erzeugen Wählen Sie nun das Abwedler-Werkzeug

[O] und hellen Sie mit weicher, großer

Pinselspitze den mittleren Bereich der

Linie auf. Sollten Sie keinen Effekt er-

kennen können, deaktivieren Sie in der

Optionsleiste den Haken bei Tonwerte

schützen.

Anschließend greifen Sie zum Nachbe-

lichter-Werkzeug [O] und dunkeln die

äußeren Bereiche der Linie ab.

Durch diesen simplen Farbverlauf wer-

ten Sie die Linie deutlich auf. Der Vorteil

des Abwedler/Nachbelichter-Werkzeugs

besteht darin, dass Sie individuell be-

stimmte Bereiche bearbeiten können.

Diesen Effekt mit dem Verlaufswerkzeug

oder einer Verlaufsüberlagerung zu reali-

sieren, wäre zeitaufwendiger. Besonders

effektvoll präsentieren sich mehrfarbige

Linien auf dunklem Untergrund.

KAPITEL 4GRAFISCHE OBJEKTE

89

Page 18: Photoshop CS4 für Webdesigner - ciando.com filePhotoshop CS4 für Webdesigner Hellwig Jonas Hellwig Die Basis für erfolgreiche Websites ist attraktives und nutzerfreundliches Design.

Workshop: Gepunktete Linie mit Schere Wie aus Schnittmustern bekannt, kennzeichnen

gestrichelte oder gepunktete Linien mit einer

Schere Bereiche, die ausgeschnitten werden

sollen. Gestrichelte Linien ohne Schere stehen

für eine Falzkante. Im Webdesign können Sie

diesen Effekt nutzen, um Bildbereiche hervor-

zuheben. Oft werden Informationen wie Er-

mäßigungen oder Gutscheine auf diese Weise

gestaltet, um dem User zu verdeutlichen, dass

er diese Information nachhaltig nutzen kann.

[1] Dokument und Linie erstellen Öffnen Sie wie gewohnt ein neues Photo-

shop-Dokument mit 800 x 600 Pixeln,

72 dpi Aufl ösung, RGB-Farbmodus und

weißem Hintergrund.

[2] Linie erzeugen Wählen Sie das Buntstift-Werkzeug [B]

und stellen Sie in der Optionsleiste eine

ein Pixel große, quadratische Pinselspitze

ein. Danach öffnen Sie unter Fenster/Pin-

sel die Pinselvorgaben und stellen im Be-

reich Pinselform den Abstand auf 400 %.

Nun ziehen Sie mit gedrückter

[Umschalt]-Taste eine horizontale Linie

auf Ihre Arbeitsfl äche.

[3] Schere hinzufügen Wählen Sie das Eigene-Form-Werkzeug

[U] und stellen Sie in der Optionsleiste

als Form die Schere ein.

Platzieren Sie nun die Schere an einem

Ende der Linie. Über Bearbeiten/Trans-

formieren/Horizontal spiegeln drehen

Sie die Schere um, sodass sie nach links

schneidet.

Die Website fourthavenuechurch.org

nutzt z. B. gestrichelte Linien, um eine

Naht zu simulieren.

90

Page 19: Photoshop CS4 für Webdesigner - ciando.com filePhotoshop CS4 für Webdesigner Hellwig Jonas Hellwig Die Basis für erfolgreiche Websites ist attraktives und nutzerfreundliches Design.

KAPITEL 4GRAFISCHE OBJEKTE

Workshop: Kontur mit einem Muster füllen Mit Photoshop CS4 haben Sie auch die Mög-

lichkeit, völlig unkompliziert eigene oder vor-

defi nierte Muster auf Konturen anzuwenden.

[1] Dokument erstellen Erstellen Sie eine neue Datei mit den Ab-

messungen 500 x 500 Pixel sowie 72 dpi

Aufl ösung und weißem Hintergrund.

[2] Auswahl anlegen und füllen Wählen Sie Schwarz als Vordergrund-

farbe und ziehen Sie anschließend mit

dem Auswahlrechteck-Werkzeug [M]

eine beliebige Auswahl auf. Mit dem Füll-

werkzeug [G] füllen Sie auf einer neuen

Ebene – [Cmd/Strg]+[Umschalt]+[N] – die

Auswahl mit Schwarz [Alt]+[Rückschritt/

Entf] und heben diese anschließend

auf – [Cmd/Strg]+[D].

[3] Kontur hinzufügen Leider ermöglicht Photoshop Konturen

mit Füllung nur über die Ebenenstile.

Öffnen Sie also zunächst über Ebene/

Ebenenstil den Stil Kontur. Anschließend

stellen Sie eine nach innen gekehrte

Kontur mit einer Stärke von 10 Pixeln

ein. Der Vorteil einer nach innen ge-

richteten Kontur ist, dass die Ecken im

rechten Winkel bleiben. Wird die Kontur

außerhalb des Objekts angewandt, run-

den sich die Ecken automatisch ab.

[3] Muster festlegen Im Auswahlfeld Füllart wählen Sie

Muster und anschließend ein entspre-

chendes Muster aus Ihren installierten

Mustervorlagen aus. Über den Regler

Skalieren legen Sie fest, wie stark das

Muster transformiert werden soll. So

können Sie auch auf den ersten Blick

unpassende Mustervorlagen so weit

skalieren, dass interessante Füllungen

entstehen. Bei kleineren Skalierungen

wiederholt sich das Muster automatisch

über die gesamte Anwendungsfl äche.

Mittels der Vorschau können Sie sehr schön sehen, wie eine nach außen

gerichtete Kontur abgerundete Ecken erzeugt. Vergleichen Sie den Effekt

mit der nach innen ausgerichteten Kontur in der folgenden Abbildung.

91

Page 20: Photoshop CS4 für Webdesigner - ciando.com filePhotoshop CS4 für Webdesigner Hellwig Jonas Hellwig Die Basis für erfolgreiche Websites ist attraktives und nutzerfreundliches Design.

92

Workshop: Konkave und konvexe Linien Starke Linien können aufgrund der größeren

Fläche detaillierter gestaltet werden. Auch

wenn es aufgrund des fl ächigen Charakters

häufi g anders wirkt, so sind horizontale Navi-

gationsleisten im Grunde genommen doch Li-

nien. Mit einem Verlauf sowie einem Highlight

und einer Schattenkante können konkav oder

konvex wirkende Linien erzeugt werden. Die

Taskleiste von Windows XP ist ein gutes Beispiel

für eine konvexe Linie. Der Start-Button sowie

aktive Programme hingegen sind konkav.

[1] Dokument erstellen Erstellen Sie ein neues Dokument mit

500 x 500 Pixeln Arbeitsfl äche, 72 dpi

Aufl ösung, RBG-Farbmodus und weißem

Hintergrund.

[2] Grundform erstellen Erstellen Sie zunächst eine neue Ebene –

[Cmd/Strg]+[Umschalt]+[N]. Nun wählen

Sie das Auswahlrechteck-Werkzeug [M]

und erstellen eine Auswahl mit den Ab-

messungen 400 x 40 Pixel. Färben Sie

anschließend die Auswahl mit dem Füll-

werkzeug [G] hellgrau #cccccc ein. Heben

Sie nun die Auswahl über Auswahl/Aus-

wahl aufheben – [Cmd/Strg]+[D] – auf.

[3] Verlaufsüberlagerung Öffnen Sie über Ebene/Ebenenstil/Füllop-

tionen die Option Verlaufsüberlagerung.

Hier wird nun automatisch eine Ver-

laufsüberlagerung von Schwarz nach

Weiß aktiviert. Reduzieren Sie die

Deckkraft der Überlagerung auf 50 %,

um den Kontrast abzuschwächen. Der

Vorteil der Fülloption gegenüber einem

gewöhnlichen Verlauf ist, dass Sie hier

alle Einstellungen nachträglich editieren

können.

Da der Verlauf oben heller als unten ist,

wirkt die Linie automatisch konvex, also

nach außen gewölbt. Auch hier ist der

Die Taskleiste von Windows XP. Die konvexen

Buttons heben sich optimal von der konkaven

Leiste ab. Durch den gewölbten Charakter wird

klar, dass diese Bereiche anklickbar sind.

Page 21: Photoshop CS4 für Webdesigner - ciando.com filePhotoshop CS4 für Webdesigner Hellwig Jonas Hellwig Die Basis für erfolgreiche Websites ist attraktives und nutzerfreundliches Design.

93

KAPITEL 4GRAFISCHE OBJEKTE

Grund dafür die Gestaltpsychologie.

Wir gehen davon aus, dass Licht von

oben kommt. Verlassen Sie nun die Füll-

optionen über OK.

[4] Highlight und Schatten Erstellen Sie eine neue Ebene – [Cmd/

Strg]+[Umschalt]+[N] – und wählen Sie

das Buntstift-Werkzeug [B]. Bei einer

Deckkraft von 100 % und einer 1 Pixel

großer Pinselspitze zeichnen Sie nun mit

gedrückter [Umschalt]-Taste eine weiße

Linie am oberen Ende und eine dunkel-

graue #3f3f3f Linie am unteren Ende der

konvexen Linie. Hierdurch simulieren Sie

nun eine scharfe Lichtkante am oberen

und eine harte Schattenkante am unte-

ren Ende der Leiste.

[5] Verlauf umkehren Öffnen Sie erneut die Fülloptionen Ihrer

ersten Ebene. Im Bereich Verlaufsüber-

lagerung setzen Sie den Haken bei Um-

kehren. Nun wirkt die Linie nicht länger

konkav, sondern konvex. Highlight und

Schatten hingegen dürfen nicht umge-

kehrt werden, da sich die Lichtquelle ja

nach wie vor oben befi ndet.

[6] Praktische Anwendung Der Wechsel von konvexen zu konkaven

Flächen eignet sich insbesondere für

Navigationen und Buttons. Eine zuvor

konkave Navigationsleiste kann bei-

spielsweise beim Hovern konvex gestal-

tet werden. Dies wirkt dann, als würden

die einzelnen Buttons eingedrückt.

Konkave Linie (oben) und konvexe Linie (unten)

durch umgekehrte Verlaufsüberlagerung.

Page 22: Photoshop CS4 für Webdesigner - ciando.com filePhotoshop CS4 für Webdesigner Hellwig Jonas Hellwig Die Basis für erfolgreiche Websites ist attraktives und nutzerfreundliches Design.

94

Workshop: Farbfl ächen aufwerten Einfarbige Flächen wirken oft fl ach und lang-

weilig. In den letzten Jahren ist ein Trend hin

zu aufgewerteten Farbfl ächen zu erkennen.

Hierbei werden einfarbige Flächen mittels mi-

nimaler Farbverläufe attraktiver gestaltet. Im

folgenden Absatz werden Sie zwei Möglich-

keiten kennenlernen, eine Farbfl äche aufzu-

werten und somit hochwertiger zu gestalten.

[1] Vergleichsfl äche anlegen Erstellen Sie eine neue Datei mit den Ab-

messungen 800 x 600 Pixel sowie 72 dpi

und weißem Hintergrund und ziehen

Sie im oberen Drittel der Arbeitsfl äche

mittels Auswahlrechteck-Werkzeug [M]

eine Auswahl der Größe 760 x 150 Pixel

auf. Diesen Wert kontrollieren Sie im Be-

dienfeld Info.

Erstellen Sie über Ebene/Neu/Ebene –

[Cmd/Strg]+[Umschalt]+[N] – eine neue

Ebene und wählen Sie ein mittleres Blau

#0057ae als Vordergrundfarbe. Füllen

Sie nun die Auswahl mit dem Füllwerk-

zeug (G). Heben Sie die Auswahl an-

schließend auf – [Cmd/Strg]+[D]. Diese

Farbfl äche dient als Vergleichsfl äche, um

Ihnen den Unterschied zwischen den Ar-

beitsmethoden besser zu verdeutlichen.

[2] Farbfl äche mit Verlauf aufwerten Erstellen Sie eine neue Ebene und ver-

schieben Sie anschließend mit dem

Auswahlrechteck-Werkzeug [M] die

bestehende Auswahl in die Mitte Ihres

Dokuments. Nun wählen Sie ein etwas

dunkleres Blau #003b75 als Hintergrund-

farbe. Wählen Sie das Verlaufswerkzeug

[G] und stellen Sie in der Options leiste

einen radialen Farbverlauf von Vorder-

zu Hintergrundfarbe ein. Ziehen Sie nun

einen Verlauf entsprechend der Grafi k

auf.

Sie sollten den radialen Verlauf wählen,

weil er ungleichmäßiger verläuft als ein

linearer Verlauf und somit ein schöneres

Gesamtbild erzeugt. Als Ergebnis erhal-

ten Sie eine Farbfl äche, die deutlich plas-

tischer wirkt als die einfarbige Fläche.

[3] Farbfl äche mit dem Nachbelichter-/ Abwedler-Werkzeug aufwerten Erstellen Sie wie zuvor eine neue Ebene

und verschieben Sie anschließend die

Auswahl ins untere Drittel Ihrer Arbeits-

fl äche. Färben Sie die Fläche mit dem Füll-

werkzeug [G] erneut blau #0057ae ein.

Nun wählen Sie das Abwedler-Werkzeug

[O] und stellen in der Optionsleiste eine

große Pinselspitze (>400 Pixel) und eine

geringe Belichtung (ca. 15 %) ein. Malen

Sie nun auf Ihre Farbfl äche helle Berei-

che auf. Anschließend wählen Sie das

Nachbelichter-Werkzeug [O] und stellen

in der Optionsleiste die gleichen Werte

wie zuvor beim Abwedler ein. Mit diesem

Werkzeug können Sie abgedunkelte Be-

reiche erstellen.

Sie haben jetzt zwei unterschiedliche

Methoden zum Aufwerten Ihrer Farbfl ä-

chen kennengelernt. Das Verlaufswerk-

zeug erstellt lediglich simple Verläufe.

Sie können hier nur schwer individuelle

Verläufe festlegen. Das Abwedler/Nach-

belichter-Werkzeug ermöglicht es Ihnen,

Farbfl ächen so aufzuwerten, wie Sie es

sich vorstellen. Da in der Regel weitere

Gestaltungselemente vor den verschie-

denen Farbfl ächen positioniert werden,

können Sie so gezielt Highlights setzen.

Page 23: Photoshop CS4 für Webdesigner - ciando.com filePhotoshop CS4 für Webdesigner Hellwig Jonas Hellwig Die Basis für erfolgreiche Websites ist attraktives und nutzerfreundliches Design.

95

KAPITEL 4GRAFISCHE OBJEKTE

Workshop: Outlines Zwischen Farbfl ächen entsteht automatisch

eine Linie, die die beiden Flächen voneinan-

der trennt. Moderne Websites setzen zusätz-

lich häufi g noch eine minimal hellere Linie

an dieser Stelle ein, um dort den Kontrast zu

erhöhen und somit die beiden Flächen stärker

voneinander zu trennen.

[1] Dokument erstellen Öffnen Sie ein neues Dokument mit

800 x 600 Pixeln Arbeitsfl äche, 72 dpi

Aufl ösung und RGB-Farbmodus.

[2] Hintergrund Wählen Sie ein dunkles Grün #104107

als Vordergrundfarbe und färben Sie

anschließend mit dem Füllwerkzeug [G]

Ihre Hintergrundebene ein.

[3] Farbfl äche Wählen Sie das Abgerundete-Ecken-

Werkzeug [U] und stellen Sie in der

Options leiste Formebenen einen Radius

von 10 Pixeln ein.

Nun wählen Sie ein etwas helleres Grün

als Vordergrundfarbe und erstellen eine

Form. Es wird automatisch eine neue

Formebene hinzugefügt.

[4] Kontur Nun ergänzen Sie eine minimal hellere

Kontur, um die Farbfl ächen besser von-

einander zu trennen. Öffnen Sie dazu

über Ebene/Ebenenstil/Kontur die Füll-

optionen und stellen Sie anschließend

eine weiße nach innen gekehrte Kontur

mit einer Größe von 1 Px ein. Die Deck-

kraft reduzieren Sie auf 20 %. Auch hier

ist die nach innen gekehrte Kontur die

bessere Wahl, um die Außenform des

Objekts beizubehalten.

Die Website nclud.com setzt den zuvor beschriebenen Effekt an mehrere

Farbflächen ein, um ein edles, monochromes Gesamtbild zu erzeugen.

Page 24: Photoshop CS4 für Webdesigner - ciando.com filePhotoshop CS4 für Webdesigner Hellwig Jonas Hellwig Die Basis für erfolgreiche Websites ist attraktives und nutzerfreundliches Design.

Buchprojekt: Flächen und Linien Jetzt ist es an der Zeit, mit der eigentlichen

Gestaltung des Buchprojekts zu beginnen.

Farbfl ächenAnhand des Scribbles und der geplanten Raum-

aufteilung füllen wir nun auf unterschiedlichen

Ebenen die groben Farbbereiche ein:

Der Hauptinhalt soll braun hinterlegt werden.

Da dies der Bereich ist, der sich bei unter-

schiedlicher Inhaltsmenge verkleinert bzw.

vergrößert, nutzen wir für die braune Fläche

die Hintergrundebene. Der gesamte Header

wird auf einer neuen Ebene rot eingefärbt,

zudem wird ein dunkelroter Bereich für die

Branding-Area eingeplant. Um die horizon tale

Navigation optisch hervorzuheben, hinter-

legen wir diese mit Beige.

Linien Um die einzelnen Farbfl ächen stärker von-

einander abzuheben, platzieren wir nun helle

und dunkle Linien an den Schnittkanten der

Farbfl ächen.

Die grobe Seitenstruk-

tur ist mit einfarbigen

Flächen angelegt.

96

Page 25: Photoshop CS4 für Webdesigner - ciando.com filePhotoshop CS4 für Webdesigner Hellwig Jonas Hellwig Die Basis für erfolgreiche Websites ist attraktives und nutzerfreundliches Design.

97

Farbfl ächen verschönern Nun setzen wir an den Farbfl ächen Farbver-

läufe ein, um sie nicht zu fl ächig wirken zu

lassen. Da mithilfe des Scribbles die Positionen

von Logo, Fotos und Navigationselementen

bereits festgelegt sind, können nun wichtige

Elemente wie beispielsweise das Logo gezielt

gehighlightet werden. Gleiches gilt auch für

die Linien. Achten Sie in jedem Fall darauf,

dass in allen Farbfl ächen der rechte und linke

Außenbereich die gleiche Färbung haben. Die-

se Bereiche müssen bei der späteren Umset-

zung horizontal gekachelt werden, damit sich

der Hintergrund fl exibel der Monitor breite

anpassen kann.

Dünne Linien an den Schnittkanten der Farbflächen erhöhen den Kontrast und werten die Gestaltung auf.

KAPITEL 4GRAFISCHE OBJEKTE

Die fertige Farbflächen-

gestaltung.

Page 26: Photoshop CS4 für Webdesigner - ciando.com filePhotoshop CS4 für Webdesigner Hellwig Jonas Hellwig Die Basis für erfolgreiche Websites ist attraktives und nutzerfreundliches Design.

98

Transparenz

Transparenzen im Webdesign waren lange Zeit

recht selten anzutreffen, da insbesondere der

Internet Explorer die für echte Transparenzen

benötigten PNG-Grafi ken nicht ausreichend

unterstützte. Diese Zeiten sind nun vorbei,

und das Gestaltungselement Transparenz wird

zunehmen häufi g verwendet. In Kombination

mit Glossy- und Glaseffekten können Trans-

parenzen Ihr Design deutlich aufwerten. Mi-

crosofts Betriebssysteme Windows Vista und

das neue Windows 7 verwenden diesen Gra-

fi kstil für das allgemeine Interface.

Die vollständige Wirkung von Transparenz

entfaltet sich erst dann, wenn sich hinter se-

mitransparenten Bereichen Objekte bewegen

oder sich die transparenten Bereiche, wie z. B.

Systemfenster, unter Windows verschieben

lassen. Anderenfalls könnte die Transparenz

auch mit opaken Grafi ken wie beispielsweise

JPGs simuliert werden.

Workshop: Semitransparentes Overlay Wenn Sie Textinhalte vor Grafi ken oder Fotos

positionieren möchten, bieten sich unter an-

derem transparente Overlays an, um die Les-

barkeit zu verbessern. Overlays lassen sich

in Windeseile erstellen, es gibt jedoch einige

Aspekte, die die Wirkung zusätzlich verbes-

sern können.

[1] Dokument erstellen Erstellen Sie ein neues Photoshop-Doku-

ment mit 800 x 600 Pixeln Größe, 72 dpi

Aufl ösung und weißem Hintergrund.

[2] Hintergrundgrafi k laden Wählen Sie ein beliebiges Foto oder eine

Das neue Windows 7 im

Transparenz-Look.

Page 27: Photoshop CS4 für Webdesigner - ciando.com filePhotoshop CS4 für Webdesigner Hellwig Jonas Hellwig Die Basis für erfolgreiche Websites ist attraktives und nutzerfreundliches Design.

99

KAPITEL 4GRAFISCHE OBJEKTE

Grafi k aus und platzieren Sie diese auf

Ihrer Arbeitsfl äche.

[3] Overlay erstellen Anschließend erstellen Sie eine neue

Ebene – [Cmd/Strg]+[Umschalt]+[N] –

und ziehen dort mit dem Auswahlrecht-

eck-Werkzeug [M] eine Auswahl für Ihr

späteres Overlay aus. Färben Sie mit dem

Füllwerkzeug [G] die Auswahl weiß ein.

Heben Sie die Auswahl über Auswahl/

Auswahl aufheben – [Cmd/Strg]+[D] –

auf und reduzieren Sie anschließend die

Deckkraft auf 70 %.

Eigentlich ist Ihr Overlay jetzt schon fer-

tig. Mit einigen weiteren Einstellungen

können Sie die Wirkung jedoch deutlich

verbessern.

[4] Hintergrund weichzeichnen Eine Möglichkeit, die Transparenzwir-

kung zu verbessern, ist, den Hintergrund

weichzuzeichnen. So werden auch Texte

auf dem Overlay noch besser lesbar.

Das Beispielfoto als Grundlage für das Overlay.

flickr.com/photos/llawliet/2547595587/sizes/m.

Page 28: Photoshop CS4 für Webdesigner - ciando.com filePhotoshop CS4 für Webdesigner Hellwig Jonas Hellwig Die Basis für erfolgreiche Websites ist attraktives und nutzerfreundliches Design.

100

Klicken Sie mit gedrückter [Cmd/Strg]-

Taste auf die Ebenenminiatur Ihres

Overlays, um eine Auswahl zu erstel-

len. Markieren Sie nun die Fotoebene

und wählen Sie anschließend Filter/Für

Smartfi lter konvertieren. Bestätigen Sie

die folgende Information, um Ihre Ebene

in ein Smart-Object umzuwandeln, so-

fern dieses nicht direkt beim Importieren

geschehen ist. Wählen Sie Filter/Weich-

zeichnungsfi lter/Gaußscher Weichzeich-

ner. Als Radius vergeben Sie 3,0 Pixel.

Der Bereich in Ihrer Auswahl, also der

Bereich direkt unterhalb des Overlays,

wird nun weichgezeichnet. Da Sie einen

Smartfi lter verwendet haben, können

Sie den Radius der Weichzeichnung spä-

ter noch bearbeiten oder löschen, ohne

dass Sie zuvor Pixel zerstört haben.

[5] Outline Erstellen Sie wie zuvor beschrieben eine

Auswahl Ihres Overlays [Cmd/Strg] und

klicken Sie auf das Symbol der Ebenen-

miniatur. Nun fügen Sie eine zusätzliche

Ebene an oberster Position hinzu – [Cmd/

Strg]+[Umschalt]+[N] – und färben dort

die Auswahl mit dem Füllwerkzeug [G]

weiß ein. Anschließend wählen Sie Aus-

wahl/Auswahl verändern/Verkleinern

und verkleinern um 1 Pixel.

Löschen Sie den Inhalt der Auswahl

[Rückschritt/Entf], heben Sie die Aus-

wahl auf – [Cmd/Strg]+[D], und Sie er-

halten als Ergebnis eine manuell erstellte

Kontur Ihres Overlays. Reduzieren Sie die

Deckkraft der Ebene nun auf 50 %. Der

Vorteil der manuell erstellten Kontur ge-

genüber einer mittels Ebenenstil hinzu-

gefügten ist, dass Sie nun die Deckkraft

der Kontur unabhängig von der Ebene

einstellen können.

Page 29: Photoshop CS4 für Webdesigner - ciando.com filePhotoshop CS4 für Webdesigner Hellwig Jonas Hellwig Die Basis für erfolgreiche Websites ist attraktives und nutzerfreundliches Design.

101

KAPITEL 4GRAFISCHE OBJEKTE

[6] Schlagschatten Markieren Sie wieder die Overlay-Ebene

und öffnen Sie anschließend über Ebe-

ne/Ebenenstil den Stil Schlagschatten.

Legen Sie im Bereich Struktur eine Deck-

kraft von 75 % fest, einen Abstand von 0

Pixeln und eine Größe von 2 Pixeln. Ver-

lassen Sie danach den Dialog über OK.

[7] Struktur Fügen Sie im letzten Arbeitsschritt

Ihrem Overlay ein leichtes Rauschen

hinzu, um eine minimale Struktur zu er-

zeugen. Wählen Sie dazu Filter/Rausch-

fi lter/Rauschen hinzufügen und stellen

Sie ein mono chromatisches, gleichmä-

ßig verteiltes Rauschen mit einer Stärke

von 5 % ein.

[8] Inhalte Mit den im Kapitel „Typografi e“ gezeig-

ten Techniken können Sie nun Textinhalte

auf Ihrem Overlay platzieren. Besonders

wirkungsvoll ist zum Beispiel ein leichter

Letterpress-Effekt.

Page 30: Photoshop CS4 für Webdesigner - ciando.com filePhotoshop CS4 für Webdesigner Hellwig Jonas Hellwig Die Basis für erfolgreiche Websites ist attraktives und nutzerfreundliches Design.

Photoshop CS4für Webdesigner

Hel

lwig

Jonas Hellwig

Die Basis für erfolgreiche Websites ist attraktives und nutzerfreundliches

Design. Klare Navigation, stimmige Farben, verständliche Icons und

lesbare Texte sorgen dafür, dass sich Besucher auf einer Website wohl-

fühlen. Und Adobe Photoshop ist dabei das zentrale Werkzeug. Dieses

Buch zeigt, wie Sie mit Photoshop Webprojekte entwerfen, Gestaltungs-,

Navigations- und Farbkonzepte erstellen und diese mit Backgrounds,

Buttons, Icons und anderen Grafikelementen gezielt umsetzen.

Anhand von mehr als 50 Workshops und einem konkreten Webdesign-

Projekt lernen Sie, wie Sie die wichtigsten Grafikobjekte mit Photo-

shop CS4 entwerfen und erzeugen. Autor Jonas Hellwig liefert dabei

nicht nur kreativen Input, sondern auch die wichtigsten technischen

Hintergründe, wie die Umsetzung des Layouts in XHTML, CSS oder

als WordPress-Theme. Dabei spielt es keine Rolle, ob Sie lieber mit

Windows oder Mac OS X arbeiten.

Über 50 Profi-Workshops • Gestaltungsraster entwickeln, konkave und konvexe Linien erstellen

• Semitransparentes Overlay, Schatten, Wet-Floor-Effekt

• Patterns: Scanlines, Karbon, Free Pattern, Patterns mit CSS

• Strukturen: Holz, gebürstetes Metall, Samt, Felsen, Gras

• Brushes: Photoshop-Brushes, externe Brushes

• Buttons: Aqua-, Metall- und Aero-Buttons

• Candybar- und Tab-Navigation

• Farbkonzepte mit dem Kuler entwickeln

• Textdesign: Pfadtext, 3-D-Text, Text aus Gold, Letterpress-Effekt

• Fotos altern lassen, ausbrechende Bildelemente,

Skalieren und Inhalt bewahren

• Badges: Glanzstern, Post-it, Tesafilm, Sticker

• Von A bis Z: Umsetzung eines konkreten Webprojektes

Auf www.buch.cdAlle Dateien des Beispielprojekts zum Download.

Besuchen Sie unsere Website · www.franzis.de39,95 EUR [D]

ISBN 978-3-7723-7147-9Das Praxisbuch

für Webdesigner

FRA

NZI

S

FRANZIS

Webdesign

Photoshop CS4für Webdesigner

Webprojekte planen, entwerfen und umsetzen

Webgraphics: Backgrounds, Icons, Typo

WordPress-Themes mit Photoshop erstellen

Jonas Hellwig

Über den AutorJonas Hellwig, Jahrgang 1985,lebt und arbeitet als gelernterMediengestalter für Digital-und Printmedien in Düssel-dorf. Schon zu Schulzeiten erkannte er seine Vorliebe für Gestaltung undfür Literatur. Sein einstiges Hobby wurde 2005zum Beruf, als Jonas Hellwig als Praktikant inder Düsseldorfer Internetagentur Euroweb startete, für die er heute als Artdirector arbeitet.Zu seinem Hauptaufgabengebiet gehört nebender Gestaltung und Umsetzung professionellerWebsites das Corporate Design des Unter-nehmens sowie das Design für ausgewählteKey-Accounts. Privat lebt Jonas Hellwig sein Gefühl für illustratives Design gern auf seinemBlog www.kulturbanause.de aus.

Phot

osho

p fü

r Web

desig

ner

Aus dem Inhalt:• Photoshop für Webdesignaufgaben

optimal einstellen

• Werkzeuge, Bedienfelder und Arbeitsbereiche

• Projekt-Briefing und -planung: Für wen ist die Website, und was soll sie können?

• Farbmischung, -wirkung und Farbkonzepte

• Aktuelle Webdesign-Trends

• Gestaltungsraster: Fixed- versus Fluid-Layouts

• Navigationskonzepte: Farbleitsysteme und Interaktion

• Formenkanon: Flächen, Linien, organische Formen und Transparenz

• Musterarbeit: Patterns, Strukturen und Brushes

• Zeichen setzen: Icons und Piktogramme,Speaking Navigation

• Typografie: Fonts, Zeilenlänge, Zeilenabstand und Absätze

• Texte: Auszeichnungen, Links, Schriftglättung

• Fotos fürs Web aufbereiten: Bildquellen, Bildformate, Thumbnails

• Zierelemente: Badges, Sticker und Co.

• Content-Design: Homepage versus Website

• HTML-Ausgabe mit Photoshop

• Coding: Layoutumsetzung in XHTML und CSS

• WordPress: Layout als WordPress-Theme umsetzen

7147-9 U1+U4 16.06.2009 17:35 Uhr Seite 1