Upload
vantu
View
231
Download
0
Embed Size (px)
Citation preview
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
Jonas Hellwig
Photoshop CS4für Webdesigner
7147-9 Titelei:7147-9 Titelei 19.06.2009 11:46 Uhr Seite 1
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
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
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.
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
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
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
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
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
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
4 GRAFISCHE OBJEKTE
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.
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
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.
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
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
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
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.
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.
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.
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.
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
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.
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.
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.
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.
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.
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