Javascript ist nicht aktiviert! Bitte aktiviern Sie Javascript in Ihren Browsereinstellungen.

Kaufen

Hilfslinien und Raster

aus: Webdesign & Automatisierung

Loggen Sie sich ein, um dieses Video-Tutorial anzusehen.

Wenn Sie noch kein video2brain Benutzerkonto haben, registrieren Sie sich jetzt kostenlos und unverbindlich. Die Registrierung dauert nur wenige Augenblicke. Sofort stehen hunderte weitere Video-Tutorials zur Verfügung – es lohnt sich!

Über dieses Video

Webdesign bedeutet bei der an sich geringen Auflösung pixelgenaue Präzisionsarbeit. Erfahren Sie hier alles Wichtige zum Thema Hilfslinien und Layoutraster. Als besonderes Goodie benutzen Sie hier eine Photoshop-Erweiterung, die im Kapitel "Scripting" in Aufbau und Funktion erklärt wird.

Auszug aus: Webdesign & Automatisierung

Unter der Motorhaube von Photoshop - Thomas Bredenfeld nimmt sich in diesem Tutorial Themen vor, die eine perfekte Spielwiese für Photoshop-Experten darstellen: Webdesign, Automation und Scripting. Holen Sie alles aus Photoshop heraus, und arbeiten Sie effizient wie nie zuvor!

Webdesign & Automatisierung

EUR 49,95

Kaufen

Ähnliche Video-Trainings

Bonusmaterial

Beim Umgang mit Bildern gibt es in Photoshop so einige Tricks, damit diese optimal fürs Web aufbereitet werden. Wie soll ein Bild in Ihrem Layout dargestellt werden? Rechteckig, maskiert, freigestellt oder verdrängend?

Umgang mit Bild und Text

07:26
Als Web-Programmierer benötigen Sie verschiedene Browser, um Ihre Applikationen zu testen. Firefox (und verwandte) sowie der Internet Explorer gehören zur Grundausstattung.

Verschiedene Browser

04:54
Eine eigene Fotogalerie, vollautomatisch und schon als Webseite aufgebaut: Sie müssen sie nur noch auf den Webserver kopieren.

Die Web-Fotogalerie

04:19
Bei Bildern mit vielen Details ist es immer sehr spannend und interessant fürs Auge, wenn man ins Bild hineinzoomen kann. Damit im Internet Bilddetails auch betrachtet werden können, finden Sie in der CS3-Version nun eine neue Funktion mit dem Namen "Zoomify“.

Zoomify

06:33

In diesem Kapitel des Video-Trainings soll am Beispiel eines Webdesign-Projekts gezeigt werden, wie Sie Photoshop für die einzelnen Teile dieser Aufgabe effektiv einsetzen. Sie erfahren Tricks und bekommen viele Tipps und Hinweise, auf was Sie bei dieser Arbeit achten müssen.

Webdesign mit Photoshop
- Bevor Sie mit der eigentlichen Gestaltungsarbeit beginnen, sollten Sie diese sorgfältig vorbereiten. In diesem Abschnitt geht es um Bildschirm- und Browser-Größen, um Layoutverfahren und Farben.
  
  Arbeitsvorbereitung
  - Lernen Sie in dieser Einführung zunächst die wichtigsten Unterschiede kennen, wenn Sie Photoshop hier nicht so sehr als Bildbearbeitungsprogramm, sondern vielmehr als Gestaltungswerkzeug benutzen.
    
    Einleitung
    
    04:21
  - Anders als z.B. bei Druckaufgaben mit einer fixen Ausgabegröße haben wir es beim Webdesign mit einer Vielzahl an möglichen Bildschirmgrößen zu tun. Auch bieten die verschiedenen Browser nicht alle gleich viel Platz in ihrem Fenster. All das müssen Sie berücksichtigen.
    
    Bildschirm- und Browser-Größen
    
    09:09
  - Webdesign bedeutet bei der an sich geringen Auflösung pixelgenaue Präzisionsarbeit. Erfahren Sie hier alles Wichtige zum Thema Hilfslinien und Layoutraster. Als besonderes Goodie benutzen Sie hier eine Photoshop-Erweiterung, die im Kapitel "Scripting" in Aufbau und Funktion erklärt wird.
    
    Hilfslinien und Raster
    
    09:53
  - Eine große Rolle beim Webdesign spielen Farbschemata. Hier erfahren Sie, wie Sie diese mit dem online verfügbaren Color Scheme Generator und mit Adobe kuler erstellen und aus vorgegebenen Farben ableiten können.
    
    Farbschema entwerfen: CSG und kuler
    
    10:34
  - Wenn Sie eine der Creative Suites zur Verfügung haben, können Sie die Erstellung eines Farbschemas auch in Illustrator erledigen. Sehen Sie selbst.
    
    Farbschema entwerfen: Illustrator
    
    04:41
  - Farbschemata lassen sich innerhalb der Adobe-Programme leicht mithilfe der ase-Dateien austauschen. Sehen Sie hier, wie das geht. Meist braucht man von den Farben eines Schemas dann auch noch systematische Abtönungen, die man leicht in Photoshop erstellen kann.
    
    Farbschema laden und abtönen
    
    05:01
- In diesem Kapitel werden die Grundelemente des Webdesigns, also Farbflächen, Text, Vektorgrafiken und Bilder platziert. Schnell entsteht ein erster Eindruck, welcher Look uns erwartet. Eine Schlüsselrolle bei dieser Arbeit spielen die Smart Objekte.
  
  Montage mit Bildern, Vektorgrafik, Text
  - Mit Hilfe des Layoutrasters legen wir in diesem Film das Grundlayout fest und schaffen damit die grobe Aufteilung des Webdesigns.
    
    Grundlayout
    
    06:39
  - Ein Firmenlogo liegt meist als Vektorgrafik vor. Erfahren Sie hier, welche Vorteile es bringt, dieses als Smart Objekt in unser Screendesign einzubauen.
    
    Illustratordatei als Smart Objekt
    
    06:51
  - Bei der Einbettung von Bildern als Smart Objekte brauchen Sie keine Angst zu haben, dass deren Qualität durch spätere erneute Skalierung leidet. In diesem Film entstehen erste Bildelemente. Auch Ebenenstile werden bereits eingesetzt, um platzierte Bilder schnell einzufärben.
    
    Bilder als Smart Objekte einbinden
    
    11:52
  - Bei dieser Bildmontage werden zwei Fotos und ein PDF zusammengestellt. Lernen Sie an diesem Beispiel, wie Sie Smart Objekte verzerren können.
    
    Smart Objekte verzerren
    
    09:17
  - Text ist ein wichtiger Bestandteil von Webdesign. Auch wenn er teilweise später durch HTML-Text ersetzt wird, ist seine Beurteilung im Zusammenhang wichtig. Lernen Sie in diesem Film außerdem den Unterschied zwischen Zeilen- und Blocktext in Photoshop kennen.
    
    Zeilen- und Blocktext
    
    07:17
  - Die im Vergleich zum Druck um Größenordnungen geringere Auflösung für Schriften beim Screendesign kann sehr problematisch sein. Lernen Sie in diesem Film das Wichtigste dazu und zu den sogenannten Screen- oder Pixelfonts kennen.
    
    Screen-Fonts
    
    13:19
  - Auch ein Seitenmenü, das später in HTML und CSS realisiert wird, sollte in Photoshop als Dummy eingebaut werden, um abschätzen zu können, wie viel Platz das in unserem Webdesign benötigt und wie das aussieht.
    
    Dummy-Menü
    
    08:07
- Buttons und Tabellenreiter sind bewährte und vielfach verwendete Elemente für Interaktion und Navigation. Sehen Sie in diesem Abschnitt Beispiele, wie Sie in Photoshop solche Bestandteile einer Webseite gestalten.
  
  Buttons und Tabs
  - Mit dem Werkzeug für eigene Formen zeichnen wir zunächst die Grundform für einen Button und speichern diese Form auch gleich für die weitere Verwendung als Vorgabe ab.
    
    Formen für Buttons anlegen
    
    06:08
  - Als einfache Formebenen schauen die neuen Buttons noch sehr flach aus. Mit Ebenenstilen werden sie optisch aufgewertet, indem sie Konturen und Schattierungen bekommen. Auch die Beschriftung wird nun eingefügt.
    
    Buttonform mit Effekten und Text
    
    05:28
  - Die Buttons werden mit kleinen Bildern gefüllt. Sehen Sie hier, wie diese zunächst platziert und dann mit den Vektormasken der zuvor angelegten Buttons und deren Effekten versehen werden.
    
    Buttons mit Bildern füllen
    
    08:09
  - Optisch sehr schön wirkt oft ein Spiegeleffekt. Erfahren Sie in diesem Film, wie Sie das anlegen und was Sie dabei beachten müssen. Anschließend wird dieser Effekt noch mit einem Smartfilter veredelt.
    
    Button-Leiste spiegeln
    
    08:35
  - Eine gestalterische Feinheit und technisch interessant ist die Gestaltung eines perspektivischen Schattens hinter den Buttons. Hierbei werden ein Smartfilter mit Filtermaske und ein Ebenenstil zusammen genutzt.
    
    Buttons mit Smartfilter-Schatten
    
    04:40
  - Buttons sollten auf der späteren HTML-Seite auf Mauskontakt reagieren. Für solche mit JavaScript oder CSS realisierten Effekte braucht man Austauschbilder der Buttons, für die wir hier mit Ebenenstilen die Mutationen in Photoshop erstellen.
    
    Rollover-Effekt vorbereiten
    
    03:03
  - Auch die beliebten Tabellenreiter, die vor allem für die Navigation von Unterseiten in Frage kommen, lassen sich gut mit Formebenen konstruieren. Lernen Sie hier, wie Sie eine universell verwendbare Grundform dafür herstellen und als eigene Form abspeichern können.
    
    Tabs zeichnen
    
    08:49
  - Auch die vier erstellten Tabellenreiter sehen zunächst noch ganz flach aus. Mit Farb- und Verlaufsüberlagerung und Schatten werden sie schnell plastisch und prägnant. Nach dem Einfügen der Beschriftung müssen noch vier Duplikate für den jeweils vorne liegenden Tab angelegt werden.
    
    Tabs mit Text und Effekten belegen
    
    07:57
  - Neben der Platzierung von Vektorgrafik als Smart Objekt wie beim Logo gibt es noch andere Methoden, gezeichnetes Material aus Illustrator zu übernehmen. Hier werden die Icons für die vier Tabellenreiter als Formebenen einkopiert und mit Effekten versehen.
    
    Icons aus Illustrator einkopieren
    
    07:57
- In einem Screendesign stecken eine ganze Reihe von Variationen für Buttons mit Rollover, Unterseiten usw. Diese Mutationen kann man in Ebenenkompositionen abspeichern, die man auch z.B. für die Abnahme durch den Kunden als mehrseitiges PDF oder als JPEG-Serie ausgeben kann. Dann folgt die Ausgabe selbst in Form von Einzelbildern und HTML.
  
  Ausgabe
  - Diverse Varianten unseres Photoshop-Dokuments spiegeln die späteren Änderungen der Website mit ihren Unterseiten und ihren Buttonzuständen wider. Ebenen werden an- und ausgeschaltet oder verschoben, Effekte verändert und deaktiviert.
    
    Ebenen und Mutationen
    
    05:39
  - Ebenenkompositionen halten den Zustand einer Photoshop-Datei fest, was die Ebenenstile sowie die Ebenensichtbarkeit und -position angeht. Diese Funktion ist sehr wichtig für das Webdesign, spart sehr viel Zeit und hilft, Fehler zu vermeiden.
    
    Arbeiten mit Ebenenkompositionen
    
    10:10
  - Wollen Sie Ihrem Kunden das nun fertig gestaltete Webdesign zeigen, wäre jetzt der Zeitpunkt dafür gekommen. Denn nun können Sie mithilfe der Ebenenkompositionen ein solches Dokument (z.B. als PDF für eine Abnahme) von Photoshop automatisch erzeugen lassen.
    
    Ausgabe für die Präsentation
    
    04:32
  - Für die Ausgabe eines Webdesigns als HTML-Datei mit zugeordneten Bildern muss die Photoshop-Datei unterteilt werden. Für die einzelnen Bereiche des Layouts werden sogenannte "Slices" angelegt.
    
    Slicing
    
    09:26
  - Bereits in Photoshop kann man den Slices Namen geben und ihnen Links mit URLs zuweisen. Erfahren Sie in diesem Film, was Sie dabei beachten müssen.
    
    Slices benennen und verlinken
    
    04:10
  - Je nach Bildinhalt ist für die einzelnen Slices JPEG, PNG oder GIF als Bildformat besser geeignet. Eingestellt wird das im Dialog "Für Web und Geräte speichern", der hier erklärt wird.
    
    Kompression als JPEG oder GIF
    
    07:35
  - Die Ausgabeeinstellungen für den Export als HTML-Datei mit Bilderordner sind umfangreich. In diesem Film wird der Export für die HTML-Ausgabe in Tabellenform besprochen.
    
    Ausgabe als HTML-Tabelle
    
    08:10
  - Die Erzeugung eines Layouts als HTML-Tabelle wird immer weniger verwendet. Stattdessen wird heute meist mit XHTML und CSS gearbeitet. Sehen Sie hier, wie Sie die Einstellungen dafür in Photoshop vornehmen.
    
    Ausgabe als CSS
    
    04:42
  - Die aus Photoshop exportierte Datei ist natürlich nur eine Rohversion der künftigen Webseiten. In der Regel werden diese weiterbearbeitet. Sehen Sie hier, wie die Zusammenarbeit mit dem Webeditor Adobe Dreamweaver funktioniert.
    
    Photoshop und Dreamweaver 1
    
    06:45
  - Auch die Austauschbilder für die Buttons, die für Rollover-Effekte gebraucht werden, lassen sich aus Photoshop nach Dreamweaver exportieren und dort mit einer JavaScript-Funktion zum Leben erwecken.
    
    Photoshop und Dreamweaver 2
    
    06:16
Für langweilige oder mühsame Jobs mit immer wiederkehrenden Arbeitsschritten hat Photoshop eine Reihe von Automatisierungsfunktionen an Bord. Lernen Sie hier Aktionen und Stapelverarbeitung kennen und wie man in Photoshop mit Variablen arbeitet. Zudem kann man in Photoshop auch mit JavaScript programmieren.

Automatisierung
- Aktionen stellen die älteste und einfachste Möglichkeit dar, Photoshop-Aufgaben zu automatisieren. Lernen Sie in diesem Abschnitt, wie man Aktionen aufzeichnet und in der Stapelverarbeitung auf ganze Ordner von Bildern anwendet.
  
  Aktionen und Stapelverarbeitung
  - Mit Aktionen können Sie Arbeitsschritte in Photoshop aufzeichnen und jederzeit mit einem Mausklick oder einem Tastenkürzel wieder aufrufen.
    
    Was sind Photoshop-Aktionen?
    
    06:48
  - Auch komplexere Arbeitsabläufe wie das Einfügen eines Wasserzeichens lassen sich mit Aktionen regeln. Hier wird dafür eine Grafik aus Illustrator benutzt. Mit einigen Tricks kommen Sie dabei schnell zum gewünschten Ergebnis.
    
    Aktionen aufzeichnen
    
    12:40
  - Die Stapelverarbeitung erlaubt das Anwenden einer Aktion auf eine Vielzahl von Bildern. Sehen Sie hier, wie man eine solche aufsetzt.
    
    Stapelverarbeitung anwenden
    
    04:12
  - Besonders achten muss man bei der Stapelverarbeitung auf die Handhabung von Speichervorgängen. Hier entstehen die meisten Fehler.
    
    Stapelverarbeitung: das Speicherproblem
    
    05:35
  - Statt jedes Mal den großen Dialog für die Stapelverarbeitung durchzugehen, kann man deren Einstellungen auch in Form eines kleinen Programms, eines "Droplets" abspeichern, auf das man nur einen Bilderordner ziehen muss, um eine Stapelverarbeitung in Photoshop anzustoßen.
    
    Droplets erstellen
    
    04:05
- Eher wenig bekannt ist die Möglichkeit, in Photoshop Bild- und Textebenen mit Datensätzen in Inhalt und Sichtbarkeit zu steuern. Erfahren Sie hier mehr über dieses interessante Feature zur Serienproduktion von Bilddateien.
  
  Arbeiten mit Datensätzen
  - Mit Variablen können Sie bei Text- und Bildebenen den Inhalt und die Sichtbarkeit für die spätere Steuerung durch Datensätze einrichten.
    
    Was sind Variablen in Photoshop?
    
    04:05
  - Erfahren Sie hier, wie Sie die Ebenenmerkmale als Variablen definieren und einen ersten Datensatz erstellen.
    
    Photoshop-Datei für Variablen einrichten
    
    10:10
  - In einem Tabellenprogramm wie Excel können Sie nun eine Reihe von Daten für die Verwendung in Photoshop herrichten. Sehen Sie hier, auf was Sie dabei achten müssen.
    
    Datensätze erzeugen
    
    05:50
  - Bevor Sie die Datentabelle in Photoshop importieren, müssen die Daten noch in ein taugliches Format gebracht werden. Dieses einfache Format erlaubt eine vielfältige Herkunft der Daten.
    
    Tabellendaten in Photoshop importieren
    
    05:57
  - Mit dem Import der Daten legt Photoshop in der Datei seine Datensätze an, die dann als Serie einzelner Mutationen der Ursprungsdatei abgespeichert werden können.
    
    Datei als Mutationen ausgeben
    
    02:55
Scripting in Photoshop geht weit über die Möglichkeiten von Aktionen, Stapelverarbeitung oder Datensätzen hinaus. Sie können mit der weit verbreiteten Programmiersprache JavaScript weiteste Teile des Programms kontrollieren und sich eigene Photoshop-Funktionen schaffen. Hier kommt eine kleine Einführung in dieses spannende Thema.

Photoshop Scripting mit JavaScript
- Was ist Scripting in Photoshop und was können Sie damit tun? Sehen Sie hier eine kurze Einleitung zum Objektmodell von Photoshop und wo Sie die Dokumentationen dazu finden.
  
  Einleitung und Dokumentation
  
  08:21
- Die Skripten, mit denen Sie in Photoshop programmieren können, sind einfache Textdateien, die Sie in jedem Textprogramm schreiben können. In der Creative Suite bekommen Sie allerdings mit dem ExtendScript Toolkit ein hochwertiges Programmierwerkzeug mitgeliefert, das wir Ihnen hier zeigen.
  
  ExtendScript Toolkit
  
  09:57
- Unser praktisches Beispiel beginnt mit der Erstellung eines Dialogfensters, das die Elemente eines kleinen User Interfaces beinhalten soll, mit dem wir später eine neue Datei mit einer einstellbaren Textebene erstellen wollen.
  
  Dialogfenster erstellen
  
  09:11
- Eines der wichtigsten Elemente des User Interface ist ein Textfeld, das auch eine Beschriftung braucht. In diesem Clip sehen Sie, wie man sie definiert und positioniert.
  
  Eingabefelder und Beschriftung
  
  12:35
- Radio-Buttons und Dropdown-Menüs sind weitere wichtige Möglichkeiten für Eingaben des Benutzers. Hier zeigen wir Ihnen, wie man diese Teile in das neue Dialogfenster einbaut.
  
  Radio-Buttons und Dropdown-Menü
  
  09:49
- Ein Schieberegler ist bereits ein Element, das nicht nur Eingaben entgegennimmt, sondern bereits auch darauf reagieren kann. Hier wird die Deckkraft der künftigen Schrift eingestellt und auch gleich angezeigt.
  
  Schieberegler
  
  08:42
- Ihr "Grundwortschatz" an Elementen der Photoshop-Benutzeroberfläche wird durch Checkboxen und Buttons erweitert. Sehen Sie selbst.
  
  Checkboxen und Buttons
  
  06:32
- Nach der Erstellung der Benutzeroberfläche müssen die vorgenommenen Eingaben ausgewertet und manche Werte auch umgewandelt werden, damit sie für die weitere Bearbeitung brauchbar sind.
  
  Eingaben auswerten
  
  11:48
- Per JavaScript wird nun ein neues Bilddokument in Photoshop erstellt, das die ausgewählten Abmessungen hat. Lernen Sie hier diesen an sich einfachen Vorgang aus der Sicht des Programmierens kennen.
  
  Neues Dokument erstellen
  
  06:41
- Nach dem Erstellen einer neuen Ebene wird diese zur Textebene gemacht und der zuvor eingegebene Text mit den getroffenen Einstellungen eingefügt.
  
  Textebene erzeugen und Text formatieren
  
  14:27
- Am Ende muss noch aufgeräumt werden, diverse Objekte, die nicht mehr gebraucht werden, müssen aus dem Arbeitsspeicher entfernt und die veränderten Voreinstellungen wieder rückgängig gemacht werden.
  
  Script abschließen
  
  03:57
In diesem Kapitel erfahren Sie Weiteres zum Thema Scripting. Lernen Sie, das ScriptListener-Plug-in zu benutzen, erstellen Sie auch komplexere User Interfaces und erkunden Sie die neuen Möglichkeiten, die Flash- und Flex-Elemente seit Photoshop CS3 in der Benutzeroberfläche bieten.

Fortgeschrittenes Scripting
- Ein kleines, frei verfügbares Programm erleichtert uns den aufwändigsten Teil beim Photoshop-Scripting: Das Layouten der Benutzeroberfläche mit seinen vielen Abmessungen.
  
  User-Interface-Builder CSUIB
  
  08:06
- Es sind fast alle Photoshop-Funktionen per JavaScript greifbar, aber nicht alle. Erfahren Sie in diesem Film, wie Sie auch an die "letzten Geheimnisse" von Photoshop herankommen und wie Sie diese Funktionen für sich nutzen können.
  
  Das ScriptListener-Plug-in
  
  11:17
- Gerade für Script-Teile, die Sie mit dem ScriptListener "erlauscht" haben, bietet es sich an, diese manchmal sperrigen Codestrecken auszulagern. Sehen Sie hier, wie Sie das mit den "Includes" tun können.
  
  Includes
  
  13:14
- Wenn Sie sich von JavaScript-Dateien auf andere Dateien beziehen wollen, spielt der Dateipfad dorthin eine Rolle. Erfahren Sie hier Details dazu und wie man eigene Bilder in seine Photoshop-Benutzeroberflächen einbauen kann.
  
  Pfade zu Dateien und Bildern
  
  06:52
- Ein etwas aufwändigeres Photoshop-Script ist der LayoutGridGenerator, der ein Raster aus Hilfslinien mit Seitenrändern, Layoutboxen und Abständen dazwischen erzeugt und damit eine Menge Handarbeit beim Screendesign spart. Hier zunächst ein Überblick über seine Features und sein User Interface.
  
  LayoutGridGenerator – Übersicht
  
  07:23
- Die Benutzeroberfläche des LayoutGridGenerator ist mit Bildern versehen und beinhaltet auch weitere Funktionen wie Tooltips, die beim Mauskontakt Erklärungen zu den Eingabefeldern zeigen.
  
  LayoutGridGenerator – Interface
  
  12:31
- Hier erfahren Sie im Detail, wie die JavaScript-Funktionen das Hilfsliniengitter zeichnen und wie man bei offenem Dialog trotzdem die Veränderungen sofort im Dokument sehen kann.
  
  LayoutGridGenerator – Funktion
  
  05:53
- Mit der Version CS3 kann Photoshop im Rahmen des Scriptings auch Flash-Dateien in seine Benutzeroberfläche einbauen. Sehen Sie hier einen kleinen Ausblick auf die Möglichkeiten, die sich dadurch bieten.
  
  Flash in Photoshops User Interface
  
  07:15
- Hier geben wir Ihnen noch ein paar Tipps und einige Hinweise auf Materialien und Webadressen, die Ihnen bei Ihren eigenen Schritten im Photoshop-Scripting hilfreich sein können.
  
  Tipps und Ressourcen
  
  07:06

Zahlungsmöglichkeiten