Webdesign mit Photoshop
Sie möchten Webseiten entwickeln, die für den Benutzer gut funktionieren und auch für das Auge wahre Hingucker sind? Dann lassen Sie sich in diesem Training von einem Experten zeigen, wie das geht. Jonas Hellwig zählt zu den bekanntesten deutschen Webdesignern und ist nah dran an dem, was im Web möglich ist. In diesem Training zeigt er Ihnen, was bessere von schlechten Seiten unterscheidet und wie Sie das gestalterische Potenzial Ihrer Seiten voll ausnutzen.
Sie lernen die richtige Planung, die Prinzipien guter Benutzbarkeit, das Entwerfen der richtigen Mockups und Grafiken und die Umsetzung in CSS, mit der im Browser auch wirklich alles so aussieht wie gewünscht. Bei Webseiten muss man gestalterisch Kompromisse machen? Mit diesem Vorurteil räumt Jonas Hellwig gründlich auf. Sie werden staunen, welche Möglichkeiten Sie bisher noch gar nicht nutzen. Holen Sie sich in diesem Training Inspirationen und Tipps, die Ihre Seiten ganz nach vorne bringen.
Inhaltsverzeichnis
Photoshop richtig vorbereiten
- Einleitung
- Arbeitsbereiche in Photoshop einrichten
- Wichtige Bedienfelder für Webdesigner
- Lineale und Raster optimal einrichten
- Die Pinsel-Werkzeuge vorbereiten
- Photoshop-Ebenen sinnvoll nutzen
- Smartfilter und Smart-Objekte einsetzen
- Wichtige Photoshop-Werkzeuge für Webdesigner
- Ein Configurator-Bedienfeld erstellen
Grundlagen des Webdesigns
- Einleitung
- Bestandteile moderner Webseiten
- Die Gestaltgesetze im Überblick
- Eine kleine Farbenlehre für Webdesigner
- Webseiten richtig strukturieren
- Mit Gestaltungsrastern arbeiten
- Eigene Gestaltungsraster erstellen
- Design-Trends unter der Lupe
Webseiten konzipieren und planen
- Einleitung
- Die Zielgruppe eingrenzen
- Das GIULIA-Prinzip
- Viewport und Auflösung
- Navigationskonzepte
- Webprojekte skizzieren
- Ein Farbschema erstellen
Weblayouts entwerfen und umsetzen
- Einleitung
- Das Briefing auswerten
- Material und Content richtig vorbereiten
- Die Seitenstruktur planen
- Das Seiten-Mockup erstellen
- Das Screendesign umsetzen
Muster, Strukturen und Hintergründe
- Einleitung
- Layouts mit Linien aufwerten
- Ansprechende Farbflächen gestalten
- Metallstrukturen erzeugen
- Lederstrukturen erstellen
- Holzstrukturen nachbauen
- Muster entwerfen und gestalten
- Bokeh-Hintergründe entwerfen
- Flexible Vollbildansicht mit CSS
- Strukturen in Muster umwandeln
- Oberflächenstrukturen übertragen
Webtexte optimal gestalten
- Einleitung
- Typografie im modernen Web
- Web-Schriften einsetzen
- Einen Pfadtext gestalten
- Eigene Textstile entwickeln
- Letterpress-Texte erstellen mit Photoshop und CSS
- Gläserne Schrift erzeugen
- 3D-Texte mit Repoussé
Navigationsmenüs entwerfen
- Einleitung
- Eigene Schaltflächen entwerfen
- Verläufe auf Schaltflächen anwenden
- CSS-Sprites mit Ebenen-Kompositionen
- CSS-Transitionen für Schaltflächen
- Transformationen mit CSS3
- Eine Navigationsleiste erstellen
Icons und Symbole erstellen
- Einleitung
- Transparenz erzeugen
- Spiegeleffekte einsetzen
- Objektschatten hinzufügen
- Buntstift-Symbol entwerfen
- Eine Plakette erzeugen
- Eine Zierschleife erstellen
- Ein Bookmark-Label entwerfen
- Favicons und Touch-Icons
- Individuelle Icons entwerfen
Fotos für das Web aufbereiten
- Einleitung
- Die richtigen Bildquellen wählen
- Bildformat und Bildrichtung
- Skalieren und Inhalte bewahren
- Inhaltssensitive Retusche
- Den Horizont ausrichten
- Der Goldene Schnitt
- Der Out-of-Bounds-Effekt
- Fotoecken simulieren
- Aktionen & Stapelverarbeitung
Webgrafiken richtig ausgeben
- Einleitung
- Slices erstellen
- Die Ausgabeformate
- Daten komprimieren
- GIF-Animationen erstellen
- Zoomify einsetzen
CSS-Tricks für Webdesigner
- Einleitung
- Nützliche Browser-Plug-ins
- Mit Webstandards gestalten
- Semantischen Code erzeugen
- Flexible Raster mit CSS Media Queries
- Masken in CSS3 verwenden
Ich bin jetzt mit dem 2 Kapitel durch ich muss sagen bis jetzt wirklich toll, zwischendurch hab ich mal pausen gemacht und hab überlegt das es doch total schwer sein muss immer die passenden Worte zu finden. Es hat sich wirklich sehr gut angehört. Meine Frage liest du das ab oder probt man das davor sehr gut ein? Es hat sich nicht abgelesen angehört und gar nichts also ich würde das glaube ich niemals so gut schaffen wie du.
Ich kann das Tutorial bis jetzt wirklich jedem empfehlen Anfänger, Fortgeschrittene. Ich möchte aber jetzt noch nicht soviel darüber sagen, daher ich selber erst im 2 Kapitel bin. Eins kann ich aber jetzt schon sagen der Trainer ist super :D.
@Dominik: Schön! Es freut mich, dass es Dir gefällt. Um Deine Frage zu beantworten: Ich hab während der Aufnahmen meist einen Zettel mit Notizen neben mir liegen gehabt damit ich die Grundstruktur vor Augen habe. Ansonsten ist das frei gesprochen.
Herzlichen Glückwunsch, ist bestimmt eine tolle Arbeit geworden! Wie ich beim letzten Beitrag schon schrieb, bin ich immer noch von deiner professionellen Betonung begeistert. Nicht dass ich dir das nicht zugetraut hätte, aber ich weiß aus eigener Erfahrung wie schwierig/anstrengend das werden kann. Ich wünsch dir viel Erfolg damit!
ist schon bei mir heute Morgen angekommen :D entlich… bis jetzt kann ich aber noch nichts sagen weil ich erst in 1 Stunde aus hab… hab nähmlich gerade 1 Woche lang Praktikum
Heute Abend werd ich dann dazu was posten ^^
Da schau mal einer an! :-)
Hm … ich habe jetzt das WordPress Buch (wo ich noch nicht über die Einleitung rausgekommen bin *g*) und naja … demnächst ein bisschen Zeit … ich denke da werd ich mir doch mal die DVD anschaffen ;-)
Viel Erfolg Mr. H.!