photoshop cs4 für webdesigner - ciando.com filephotoshop cs4 für webdesigner hellwig jonas hellwig...

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

Post on 06-Aug-2019

216 views

Category:

Documents

0 download

Embed Size (px)

TRANSCRIPT

  • Photoshop CS4fr Webdesigner

    Hel

    lwig

    Jonas Hellwig

    Die Basis fr erfolgreiche Websites ist attraktives und nutzerfreundliches

    Design. Klare Navigation, stimmige Farben, verstndliche Icons und

    lesbare Texte sorgen dafr, dass sich Besucher auf einer Website wohl-

    fhlen. 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

    Hintergrnde, 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, gebrstetes 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

    fr Webdesigner

    FRA

    NZI

    S

    FRANZIS

    Webdesign

    Photoshop CS4fr 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 fr Digital-und Printmedien in Dssel-dorf. Schon zu Schulzeiten erkannte er seine Vorliebe fr Gestaltung undfr Literatur. Sein einstiges Hobby wurde 2005zum Beruf, als Jonas Hellwig als Praktikant inder Dsseldorfer Internetagentur Euroweb startete, fr die er heute als Artdirector arbeitet.Zu seinem Hauptaufgabengebiet gehrt nebender Gestaltung und Umsetzung professionellerWebsites das Corporate Design des Unter-nehmens sowie das Design fr ausgewhlteKey-Accounts. Privat lebt Jonas Hellwig sein Gefhl fr illustratives Design gern auf seinemBlog www.kulturbanause.de aus.

    Phot

    osho

    p f

    r Web

    desig

    ner

    Aus dem Inhalt: Photoshop fr Webdesignaufgaben

    optimal einstellen

    Werkzeuge, Bedienfelder und Arbeitsbereiche

    Projekt-Briefing und -planung: Fr wen ist die Website, und was soll sie knnen?

    Farbmischung, -wirkung und Farbkonzepte

    Aktuelle Webdesign-Trends

    Gestaltungsraster: Fixed- versus Fluid-Layouts

    Navigationskonzepte: Farbleitsysteme und Interaktion

    Formenkanon: Flchen, Linien, organische Formen und Transparenz

    Musterarbeit: Patterns, Strukturen und Brushes

    Zeichen setzen: Icons und Piktogramme,Speaking Navigation

    Typografie: Fonts, Zeilenlnge, Zeilenabstand und Abstze

    Texte: Auszeichnungen, Links, Schriftglttung

    Fotos frs 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 CS4fr Webdesigner

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

  • FRANZIS

    Webdesign

    Photoshop CS4fr 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 grter Sorgfalt erarbeitet bzw. zusammengestellt und unter Einschaltung wirksamer Kontrollma-nahmen reproduziert. Trotzdem sind Fehler nicht ganz auszuschlieen. Der Verlag und der Autor sehen sich deshalb gezwungen, darauf hinzuweisen, dass sie weder eine Garantie noch die juristische Verantwortung oder irgendeine Haftung fr Folgen, die auf fehlerhafte Angaben zurckgehen, bernehmen knnen. Fr dieMitteilung etwaiger Fehler sind Verlag und Autor jederzeit dankbar. Internetadressen oder Versionsnummern stellen den bei Redaktionsschluss verfgbaren Informationsstand dar. Verlag und Autor bernehmen keinerlei Verantwortung oder Haftung fr Vernderungen, die sich aus nicht von ihnen zu vertretenden Umstnden ergeben. Evtl. beigefgte oder zum Download angebotene Dateien und Informationen dienen ausschlielich der nicht gewerblichen Nutzung. Einegewerbliche Nutzung ist nur mit Zustimmung des Lizenzinhabers mglich.

    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 Datentrgern oder im Internet, insbesondere als PDF, ist nur mit ausdrcklicher 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 fr den Entwurf zeitge-mer Websites bentigt. Stellen Sie Photoshop noch einen leistungsstarken Webeditor zur Seite, gibt es nichts, was dieses Team noch toppen knnte.Fr 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 Lsung der wichtigsten Bildbearbeitungsaufgaben. Dieses Buch setzt grundlegende Photoshop-Kenntnisse voraus. Es versucht nicht, alle Funktionen und Mglichkeiten der Software aufzuzeigen, sondern es setzt den Fokus auf die professionelle Ent-wicklung und Gestaltung grafi scher Elemente und Bauteile fr 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 Arbeitsablufe und Techniken umfassen alle wesentlichen Aspekte des modernen Webdesigns einschlielich 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 HellwigDsseldorf im Mai 2009

    www.kulturbanause.de Die Website des Autors.

  • Photoshop fr Webdesigner 16Voreinstellungen 16

    Allgemein 17Benutzeroberfl che 18Dateihandhabung 19Leistung 20Zeigerdarstellung 20Transparenz/Farbumfang-Warnung 20Maeinheiten & 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 40Wahrnehmung 41

    Content und Funktionalitt 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 52Farben 52

    Farbmischung 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

    Gren 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 86Flchen und Linien 86

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

    Transparenz 98Workshop: Semitransparentes Overlay 98

    INHALTSVERZEICHNISPHOTOSHOP FRWEBDESIGNER

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

    Patterns, Strukturen und Brushes 110Patterns 110

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

    Strukturen 114Workshop: Holzstruktur 115Workshop: Gebrstetes 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 136Navigationsstrukturen 136

    Navigation optimal platzieren 139

    Navigationselemente gestalten 140Icons und Piktogramme 140Speaking 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 170Schriftarten 171

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

    Schriftgren 172Konsultationsgren 172Pixelfonts 173Lesegren 173Schaugren 173Schriftgren im Web 173

    Zeilenlnge, Zeilenabstand und Abstze 174Zeilenlnge 174Zeilenabstand 174Textausrichtung und Silbentrennung 175

    Textauszeichnungen 175Typografi e und Farbe 176Links 176

    Design von Textobjekten 177Schriftglttung: 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 202Bilder googeln? 202

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

    INHALTSVERZEICHNISPHOTOSHOP FRWEBDESIGNER

  • INHALTSVERZEICHNIS

    Fotos frs Web aufbereiten 204Workshop: Horizont ausrichten 205Workshop: Fotos altern lassen 206Workshop: Bildelemente ausbrechen lassen 207Workshop: Fotoecke umbiegen 211Workshop: Skalieren und Inhalt bewahren 213Workshop: Vertrumte Fotos 216Buchprojekt: Fotos 219

    Zierelemente und Icons 222Badges, Sticker und Co. 222

    Workshop: 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 256Text- und Bildinhalte 256Homepage versus Website 257

    Buchprojekt: Content-Design 257

    Details 259

    Grafi ken frs Web optimieren 262Fr Web und Gerte speichern 262

    Ausgabeeinstellungen vergleichen 262Werkzeuge 262Device Central 263Vorschau 263Vorschau und Metadaten 263Bildgre 263

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

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

    Animation 269GIF-Animation 269

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

    Zusatzmodule fr Photoshop 278Web-Fotogalerie 278

    Coding: Sauberer Quellcode 282Buchprojekt: Coding 282

    Grundaufbau 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 FRWEBDESIGNER

  • 4 GRAFISCHE OBJEKTE

  • 86

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

    fltigster Designaufgaben. Anhand praxisnaher Workshops zeige ich Ihnen alle wichtigen Berei-

    che professionellen Webdesigns und erlutere zudem, wie Sie typische Fehler von Anfang an

    vermeiden. Der Schlssel zum Erfolg liegt im Detail!

    Der Wet-Floor-Effekt ist ein fantastisches Gestaltungsmittel, mit dem Sie einerseits Rumlichkeit, aber auch einen sauberen, modernen Eindruck erzeugen.

    Flchen und Linien

    Flchen entstehen in Ihrer Gestaltung auto matisch durch die Verwendung von Texten, Freirumen und ausgearbeiteten Ele-menten. Ein Design ohne Flche gibt es nicht, denn selbst eine weie Seite ist eine Flche.

    White Space Als White Space bezeichnet man informa-tionsfreie Flchen 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 unbersichtlich wirkt. Bedenken Sie auch, dass freie Flchen im-mer auch ein Gestaltungsmittel darstellen. White Space schafft in Ihrem Layout ange-nehme Freifl chen und grenzt unterschiedli-che Informations rume voneinander ab. Der Begriff White Space bedeutet nicht, dass die Flche wei sein muss. Sie enthlt lediglich keinen nennenswerten Inhalt.

  • LinienLinien werden hufi 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 knnen auch Objekte andeuten, umschlieen und unterstreichen. Gestrichelte Linien, wie in Schnittmustern, werden auch im Webdesign hufi g eingesetzt und fhren mitunter zu sehr ansehnlichen Ergebnissen. Im Inhalts-bereich knnen 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 gebruch-lichsten Werte sind:

    solid dashed dotted

    div#container {

    border:1px solid black;

    }

    Organische FormenFlchen und Linien ergeben sich im Web-design meist automatisch. Aufgrund der leichteren Gestaltung sind diese jedoch hu-

    White-Space-Beispiel: vlourenco.com

    Beispiel fr Linien als Trennelemente: cesserdigital.net

    87

    KAPITEL 4GRAFISCHE OBJEKTE

  • 88

    fi g gerade, rechteckig und rechtwinklig. Wenn Sie eine Seite gestalten mchten, die sich von der Masse abhebt, versuchen Sie mal, orga-nische Formen , geschwungene oder schrge 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 knnen Sie verschiedene Funktions- oder Inhaltsbereiche Ihres Layouts untertei-len. In plastischen Layouts oder technischen Interfaces kommen hufi 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 gewhlt werden, dass es noch hellere sowie dunklere Farbtne gibt. Schwarzer oder weier 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 zurckgesetzte 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 Lichtfhrung lsst 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-lsung, RGB-Farbmodus und weiem Hintergrund.

    [2] Linie erstellen Whlen Sie das Auswahlwerkzeug: Ein-

    zelne Zeile und erstellen Sie eine ent-sprechende Auswahl. Auf einer neuen Ebene [Cmd/Strg]+[Umschalt]+[N] fllen Sie die Auswahl mit Blau #0066ff. Heben Sie anschlieend die Auswahl ber Auswahl/Auswahl aufheben [Cmd/Strg]+[D] wieder auf.

    [3] Farbverlauf erzeugen Whlen Sie nun das Abwedler-Werkzeug

    [O] und hellen Sie mit weicher, groer Pinselspitze den mittleren Bereich der Linie auf. Sollten Sie keinen Effekt er-kennen knnen, deaktivieren Sie in der Optionsleiste den Haken bei Tonwerte schtzen.

    Anschlieend greifen Sie zum Nachbe-lichter-Werkzeug [O] und dunkeln die ueren 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 knnen. Diesen Effekt mit dem Verlaufswerkzeug oder einer Verlaufsberlagerung zu reali-sieren, wre zeitaufwendiger. Besonders effektvoll prsentieren 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 fr eine Falzkante. Im Webdesign knnen Sie diesen Effekt nutzen, um Bildbereiche hervor-zuheben. Oft werden Informationen wie Er-migungen 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 weiem Hintergrund.

    [2] Linie erzeugen Whlen Sie das Buntstift-Werkzeug [B]

    und stellen Sie in der Optionsleiste eine ein Pixel groe, 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 gedrckter [Umschalt]-Taste eine horizontale Linie auf Ihre Arbeitsfl che.

    [3] Schere hinzufgen Whlen 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 fllen Mit Photoshop CS4 haben Sie auch die Mg-lichkeit, vllig 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 weiem Hintergrund.

    [2] Auswahl anlegen und fllen Whlen Sie Schwarz als Vordergrund-

    farbe und ziehen Sie anschlieend mit dem Auswahlrechteck-Werkzeug [M] eine beliebige Auswahl auf. Mit dem Fll-werkzeug [G] fllen Sie auf einer neuen Ebene [Cmd/Strg]+[Umschalt]+[N] die Auswahl mit Schwarz [Alt]+[Rckschritt/Entf] und heben diese anschlieend auf [Cmd/Strg]+[D].

    [3] Kontur hinzufgen Leider ermglicht Photoshop Konturen

    mit Fllung nur ber die Ebenenstile. ffnen Sie also zunchst ber Ebene/Ebenenstil den Stil Kontur. Anschlieend stellen Sie eine nach innen gekehrte Kontur mit einer Strke von 10 Pixeln ein. Der Vorteil einer nach innen ge-richteten Kontur ist, dass die Ecken im rechten Winkel bleiben. Wird die Kontur auerhalb des Objekts angewandt, run-den sich die Ecken automatisch ab.

    [3] Muster festlegen Im Auswahlfeld Fllart whlen Sie

    Muster und anschlieend ein entspre-chendes Muster aus Ihren installierten Mustervorlagen aus. ber den Regler Skalieren legen Sie fest, wie stark das Muster transformiert werden soll. So knnen Sie auch auf den ersten Blick

    unpassende Mustervorlagen so weit skalieren, dass interessante Fllungen entstehen. Bei kleineren Skalierungen wiederholt sich das Muster automatisch ber die gesamte Anwendungsfl che.

    Mittels der Vorschau knnen Sie sehr schn sehen, wie eine nach auen 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 knnen aufgrund der greren Flche detaillierter gestaltet werden. Auch wenn es aufgrund des fl chigen Charakters hufi g anders wirkt, so sind horizontale Navi-gationsleisten im Grunde genommen doch Li-nien. Mit einem Verlauf sowie einem Highlight und einer Schattenkante knnen konkav oder konvex wirkende Linien erzeugt werden. Die Taskleiste von Windows XP ist ein gutes Beispiel fr 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 weiem Hintergrund.

    [2] Grundform erstellen Erstellen Sie zunchst eine neue Ebene

    [Cmd/Strg]+[Umschalt]+[N]. Nun whlen Sie das Auswahlrechteck-Werkzeug [M] und erstellen eine Auswahl mit den Ab-messungen 400 x 40 Pixel. Frben Sie anschlieend die Auswahl mit dem Fll-werkzeug [G] hellgrau #cccccc ein. Heben Sie nun die Auswahl ber Auswahl/Aus-wahl aufheben [Cmd/Strg]+[D] auf.

    [3] Verlaufsberlagerung ffnen Sie ber Ebene/Ebenenstil/Fllop-

    tionen die Option Verlaufsberlagerung. Hier wird nun automatisch eine Ver-laufsberlagerung von Schwarz nach Wei aktiviert. Reduzieren Sie die Deckkraft der berlagerung auf 50 %, um den Kontrast abzuschwchen. Der Vorteil der Flloption gegenber einem gewhnlichen Verlauf ist, dass Sie hier alle Einstellungen nachtrglich editieren knnen.

    Da der Verlauf oben heller als unten ist, wirkt die Linie automatisch konvex, also nach auen gewlbt. Auch hier ist der

    Die Taskleiste von Windows XP. Die konvexen Buttons heben sich optimal von der konkaven Leiste ab. Durch den gewlbten Charakter wird klar, dass diese Bereiche anklickbar sind.

  • 93

    KAPITEL 4GRAFISCHE OBJEKTE

    Grund dafr die Gestaltpsychologie. Wir gehen davon aus, dass Licht von oben kommt. Verlassen Sie nun die Fll-optionen ber OK.

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

    Strg]+[Umschalt]+[N] und whlen Sie das Buntstift-Werkzeug [B]. Bei einer Deckkraft von 100 % und einer 1 Pixel groer Pinselspitze zeichnen Sie nun mit gedrckter [Umschalt]-Taste eine weie 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 Flloptionen Ihrer

    ersten Ebene. Im Bereich Verlaufsber-lagerung setzen Sie den Haken bei Um-kehren. Nun wirkt die Linie nicht lnger konkav, sondern konvex. Highlight und Schatten hingegen drfen nicht umge-kehrt werden, da sich die Lichtquelle ja nach wie vor oben befi ndet.

    [6] Praktische Anwendung Der Wechsel von konvexen zu konkaven

    Flchen eignet sich insbesondere fr Navigationen und Buttons. Eine zuvor konkave Navigationsleiste kann bei-spielsweise beim Hovern konvex gestal-tet werden. Dies wirkt dann, als wrden die einzelnen Buttons eingedrckt.

    Konkave Linie (oben) und konvexe Linie (unten) durch umgekehrte Verlaufsberlagerung.

  • 94

    Workshop: Farbfl chen aufwerten Einfarbige Flchen wirken oft fl ach und lang-weilig. In den letzten Jahren ist ein Trend hin zu aufgewerteten Farbfl chen zu erkennen. Hierbei werden einfarbige Flchen mittels mi-nimaler Farbverlufe attraktiver gestaltet. Im folgenden Absatz werden Sie zwei Mglich-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 weiem Hintergrund und ziehen Sie im oberen Drittel der Arbeitsfl che mittels Auswahlrechteck-Werkzeug [M] eine Auswahl der Gre 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 whlen Sie ein mittleres Blau #0057ae als Vordergrundfarbe. Fllen Sie nun die Auswahl mit dem Fllwerk-zeug (G). Heben Sie die Auswahl an-schlieend 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 anschlieend mit dem Auswahlrechteck-Werkzeug [M] die bestehende Auswahl in die Mitte Ihres Dokuments. Nun whlen Sie ein etwas dunkleres Blau #003b75 als Hintergrund-farbe. Whlen 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 whlen, weil er ungleichmiger verluft als ein linearer Verlauf und somit ein schneres Gesamtbild erzeugt. Als Ergebnis erhal-ten Sie eine Farbfl che, die deutlich plas-tischer wirkt als die einfarbige Flche.

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

    und verschieben Sie anschlieend die Auswahl ins untere Drittel Ihrer Arbeits-fl che. Frben Sie die Flche mit dem Fll-werkzeug [G] erneut blau #0057ae ein.

    Nun whlen Sie das Abwedler-Werkzeug [O] und stellen in der Optionsleiste eine groe Pinselspitze (>400 Pixel) und eine geringe Belichtung (ca. 15 %) ein. Malen Sie nun auf Ihre Farbfl che helle Berei-che auf. Anschlieend whlen Sie das Nachbelichter-Werkzeug [O] und stellen in der Optionsleiste die gleichen Werte wie zuvor beim Abwedler ein. Mit diesem Werkzeug knnen Sie abgedunkelte Be-reiche erstellen.

    Sie haben jetzt zwei unterschiedliche Methoden zum Aufwerten Ihrer Farbfl -chen kennengelernt. Das Verlaufswerk-zeug erstellt lediglich simple Verlufe. Sie knnen hier nur schwer individuelle Verlufe festlegen. Das Abwedler/Nach-belichter-Werkzeug ermglicht 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, knnen Sie so gezielt Highlights setzen.

  • 95

    KAPITEL 4GRAFISCHE OBJEKTE

    Workshop: Outlines Zwischen Farbfl chen entsteht automatisch eine Linie, die die beiden Flchen voneinan-der trennt. Moderne Websites setzen zustz-lich hufi g noch eine minimal hellere Linie an dieser Stelle ein, um dort den Kontrast zu erhhen und somit die beiden Flchen strker 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 Whlen Sie ein dunkles Grn #104107

    als Vordergrundfarbe und frben Sie anschlieend mit dem Fllwerkzeug [G] Ihre Hintergrundebene ein.

    [3] Farbfl che Whlen Sie das Abgerundete-Ecken-

    Werkzeug [U] und stellen Sie in der Options leiste Formebenen einen Radius von 10 Pixeln ein.

    Nun whlen Sie ein etwas helleres Grn als Vordergrundfarbe und erstellen eine Form. Es wird automatisch eine neue Formebene hinzugefgt.

    [4] Kontur Nun ergnzen Sie eine minimal hellere

    Kontur, um die Farbfl chen besser von-einander zu trennen. ffnen Sie dazu ber Ebene/Ebenenstil/Kontur die Fll-optionen und stellen Sie anschlieend eine weie nach innen gekehrte Kontur mit einer Gre von 1 Px ein. Die Deck-kraft reduzieren Sie auf 20 %. Auch hier ist die nach innen gekehrte Kontur die bessere Wahl, um die Auenform des Objekts beizubehalten.

    Die Website nclud.com setzt den zuvor beschriebenen Effekt an mehrere Farbflchen ein, um ein edles, monochromes Gesamtbild zu erzeugen.

  • Buchprojekt: Flchen 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 fllen 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. vergrert, nutzen wir fr die braune Flche

    die Hintergrundebene. Der gesamte Header wird auf einer neuen Ebene rot eingefrbt, zudem wird ein dunkelroter Bereich fr die Branding-Area eingeplant. Um die horizon tale Navigation optisch hervorzuheben, hinter-legen wir diese mit Beige.

    Linien Um die einzelnen Farbfl chen strker von-einander abzuheben, platzieren wir nun helle und dunkle Linien an den Schnittkanten der Farbfl chen.

    Die grobe Seitenstruk-tur ist mit einfarbigen Flchen angelegt.

    96

  • 97

    Farbfl chen verschnern Nun setzen wir an den Farbfl chen Farbver-lufe ein, um sie nicht zu fl chig wirken zu lassen. Da mithilfe des Scribbles die Positionen von Logo, Fotos und Navigationselementen bereits festgelegt sind, knnen nun wichtige Elemente wie beispielsweise das Logo gezielt gehighlightet werden. Gleiches gilt auch fr

    die Linien. Achten Sie in jedem Fall darauf, dass in allen Farbfl chen der rechte und linke Auenbereich die gleiche Frbung haben. Die-se Bereiche mssen bei der spteren Umset-zung horizontal gekachelt werden, damit sich der Hintergrund fl exibel der Monitor breite anpassen kann.

    Dnne Linien an den Schnittkanten der Farbflchen erhhen den Kontrast und werten die Gestaltung auf.

    KAPITEL 4GRAFISCHE OBJEKTE

    Die fertige Farbflchen-gestaltung.

  • 98

    Transparenz

    Transparenzen im Webdesign waren lange Zeit recht selten anzutreffen, da insbesondere der Internet Explorer die fr echte Transparenzen bentigten PNG-Grafi ken nicht ausreichend untersttzte. Diese Zeiten sind nun vorbei, und das Gestaltungselement Transparenz wird zunehmen hufi g verwendet. In Kombination mit Glossy- und Glaseffekten knnen Trans-parenzen Ihr Design deutlich aufwerten. Mi-crosofts Betriebssysteme Windows Vista und das neue Windows 7 verwenden diesen Gra-fi kstil fr das allgemeine Interface.Die vollstndige 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 knnte die Transparenz

    auch mit opaken Grafi ken wie beispielsweise JPGs simuliert werden.

    Workshop: Semitransparentes Overlay Wenn Sie Textinhalte vor Grafi ken oder Fotos positionieren mchten, 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 zustzlich verbes-sern knnen.

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

    ment mit 800 x 600 Pixeln Gre, 72 dpi Aufl sung und weiem Hintergrund.

    [2] Hintergrundgrafi k laden Whlen 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 Anschlieend erstellen Sie eine neue

    Ebene [Cmd/Strg]+[Umschalt]+[N] und ziehen dort mit dem Auswahlrecht-eck-Werkzeug [M] eine Auswahl fr Ihr spteres Overlay aus. Frben Sie mit dem Fllwerkzeug [G] die Auswahl wei ein.

    Heben Sie die Auswahl ber Auswahl/Auswahl aufheben [Cmd/Strg]+[D] auf und reduzieren Sie anschlieend die Deckkraft auf 70 %.

    Eigentlich ist Ihr Overlay jetzt schon fer-tig. Mit einigen weiteren Einstellungen knnen Sie die Wirkung jedoch deutlich verbessern.

    [4] Hintergrund weichzeichnen Eine Mglichkeit, die Transparenzwir-

    kung zu verbessern, ist, den Hintergrund weichzuzeichnen. So werden auch Texte auf dem Overlay noch besser lesbar.

    Das Beispielfoto als Grundlage fr das Overlay. flickr.com/photos/llawliet/2547595587/sizes/m.

  • 100

    Klicken Sie mit gedrckter [Cmd/Strg]-Taste auf die Ebenenminiatur Ihres Overlays, um eine Auswahl zu erstel-len. Markieren Sie nun die Fotoebene und whlen Sie anschlieend Filter/Fr Smartfi lter konvertieren. Besttigen Sie die folgende Information, um Ihre Ebene in ein Smart-Object umzuwandeln, so-fern dieses nicht direkt beim Importieren geschehen ist. Whlen Sie Filter/Weich-zeichnungsfi lter/Gauscher 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, knnen Sie den Radius der Weichzeichnung sp-ter noch bearbeiten oder lschen, ohne dass Sie zuvor Pixel zerstrt haben.

    [5] Outline Erstellen Sie wie zuvor beschrieben eine

    Auswahl Ihres Overlays [Cmd/Strg] und klicken Sie auf das Symbol der Ebenen-miniatur. Nun fgen Sie eine zustzliche Ebene an oberster Position hinzu [Cmd/Strg]+[Umschalt]+[N] und frben dort die Auswahl mit dem Fllwerkzeug [G] wei ein. Anschlieend whlen Sie Aus-wahl/Auswahl verndern/Verkleinern und verkleinern um 1 Pixel.

    Lschen Sie den Inhalt der Auswahl [Rckschritt/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-genber einer mittels Ebenenstil hinzu-gefgten ist, dass Sie nun die Deckkraft der Kontur unabhngig von der Ebene einstellen knnen.

  • 101

    KAPITEL 4GRAFISCHE OBJEKTE

    [6] Schlagschatten Markieren Sie wieder die Overlay-Ebene

    und ffnen Sie anschlieend 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 Gre von 2 Pixeln. Ver-lassen Sie danach den Dialog ber OK.

    [7] Struktur Fgen Sie im letzten Arbeitsschritt

    Ihrem Overlay ein leichtes Rauschen hinzu, um eine minimale Struktur zu er-zeugen. Whlen Sie dazu Filter/Rausch-fi lter/Rauschen hinzufgen und stellen Sie ein mono chromatisches, gleichm-ig verteiltes Rauschen mit einer Strke von 5 % ein.

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

    ten Techniken knnen Sie nun Textinhalte auf Ihrem Overlay platzieren. Besonders wirkungsvoll ist zum Beispiel ein leichter Letterpress-Effekt.

  • Photoshop CS4fr Webdesigner

    Hel

    lwig

    Jonas Hellwig

    Die Basis fr erfolgreiche Websites ist attraktives und nutzerfreundliches

    Design. Klare Navigation, stimmige Farben, verstndliche Icons und

    lesbare Texte sorgen dafr, dass sich Besucher auf einer Website wohl-

    fhlen. 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

    Hintergrnde, 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, gebrstetes 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

    fr Webdesigner

    FRA

    NZI

    S

    FRANZIS

    Webdesign

    Photoshop CS4fr 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 fr Digital-und Printmedien in Dssel-dorf. Schon zu Schulzeiten erkannte er seine Vorliebe fr Gestaltung undfr Literatur. Sein einstiges Hobby wurde 2005zum Beruf, als Jonas Hellwig als Praktikant inder Dsseldorfer Internetagentur Euroweb startete, fr die er heute als Artdirector arbeitet.Zu seinem Hauptaufgabengebiet gehrt nebender Gestaltung und Umsetzung professionellerWebsites das Corporate Design des Unter-nehmens sowie das Design fr ausgewhlteKey-Accounts. Privat lebt Jonas Hellwig sein Gefhl fr illustratives Design gern auf seinemBlog www.kulturbanause.de aus.

    Phot

    osho

    p f

    r Web

    desig

    ner

    Aus dem Inhalt: Photoshop fr Webdesignaufgaben

    optimal einstellen

    Werkzeuge, Bedienfelder und Arbeitsbereiche

    Projekt-Briefing und -planung: Fr wen ist die Website, und was soll sie knnen?

    Farbmischung, -wirkung und Farbkonzepte

    Aktuelle Webdesign-Trends

    Gestaltungsraster: Fixed- versus Fluid-Layouts

    Navigationskonzepte: Farbleitsysteme und Interaktion

    Formenkanon: Flchen, Linien, organische Formen und Transparenz

    Musterarbeit: Patterns, Strukturen und Brushes

    Zeichen setzen: Icons und Piktogramme,Speaking Navigation

    Typografie: Fonts, Zeilenlnge, Zeilenabstand und Abstze

    Texte: Auszeichnungen, Links, Schriftglttung

    Fotos frs 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

    /ColorImageDict > /JPEG2000ColorACSImageDict > /JPEG2000ColorImageDict > /AntiAliasGrayImages false /CropGrayImages true /GrayImageMinResolution 300 /GrayImageMinResolutionPolicy /OK /DownsampleGrayImages true /GrayImageDownsampleType /Bicubic /GrayImageResolution 300 /GrayImageDepth -1 /GrayImageMinDownsampleDepth 2 /GrayImageDownsampleThreshold 1.50000 /EncodeGrayImages true /GrayImageFilter /DCTEncode /AutoFilterGrayImages false /GrayImageAutoFilterStrategy /JPEG /GrayACSImageDict > /GrayImageDict > /JPEG2000GrayACSImageDict > /JPEG2000GrayImageDict > /AntiAliasMonoImages false /CropMonoImages true /MonoImageMinResolution 1200 /MonoImageMinResolutionPolicy /OK /DownsampleMonoImages true /MonoImageDownsampleType /Bicubic /MonoImageResolution 1200 /MonoImageDepth -1 /MonoImageDownsampleThreshold 1.50000 /EncodeMonoImages true /MonoImageFilter /CCITTFaxEncode /MonoImageDict > /AllowPSXObjects false /CheckCompliance [ /None ] /PDFX1aCheck false /PDFX3Check false /PDFXCompliantPDFOnly false /PDFXNoTrimBoxError true /PDFXTrimBoxToMediaBoxOffset [ 0.00000 0.00000 0.00000 0.00000 ] /PDFXSetBleedBoxToMediaBox true /PDFXBleedBoxToTrimBoxOffset [ 0.00000 0.00000 0.00000 0.00000 ] /PDFXOutputIntentProfile (None) /PDFXOutputConditionIdentifier () /PDFXOutputCondition () /PDFXRegistryName () /PDFXTrapped /False /CreateJDFFile false /Description > /Namespace [ (Adobe) (Common) (1.0) ] /OtherNamespaces [ > /FormElements false /GenerateStructure false /IncludeBookmarks false /IncludeHyperlinks false /IncludeInteractive false /IncludeLayers false /IncludeProfiles false /MultimediaHandling /UseObjectSettings /Namespace [ (Adobe) (CreativeSuite) (2.0) ] /PDFXOutputIntentProfileSelector /DocumentCMYK /PreserveEditing true /UntaggedCMYKHandling /LeaveUntagged /UntaggedRGBHandling /UseDocumentProfile /UseDocumentBleed false >> ]>> setdistillerparams> setpagedevice