Schatten hinzufügen

aus: Icons gestalten mit Photoshop - kombinierte Formen

Kaufen

Über dieses Video

Zusätzlich zum Farbverlauf können Sie Ihrem Objekt auch einen Schatteneffekt hinzufügen. Lernen Sie in diesem Video, wie Sie eine neue Ebene erstellen und damit geschickt Schatten simulieren.

Auszug aus: Icons gestalten mit Photoshop - kombinierte Formen

Wenn Sie schon immer wissen wollten, wie Sie Icons gestalten, die durch die Anwendung verschiedenster Techniken einen fast schon real anmutenden Eindruck bekommen und mit einem Blick verstanden werden, dann sollten Sie dieses Video-Training ansehen. Armin Böttigheimer zeigt an zwei realen Beispielen, wie Sie selbst komplexe Formen nachbauen, welche Details bei der Gestaltung nicht fehlen dürfen und welche je nach Anwendungszweck überflüssig sind.

EUR 24,95

2½ Stunden

Kaufen

Ähnliche Video-Trainings

Ein Briefumschlag-Icon finden Sie in jedem E-Mail-Programm. Es zeigt an, ob Sie neue Post bekommen haben. In diesem Abschnitt lernen Sie, wie Sie so ein Icon in Photoshop erzeugen und mit Hilfe unterschiedlicher Ebenen und Verlaufsformen in 3D darstellen.

Ein Briefumschlag-Icon erstellen
- Dieses Video bietet einen Überblick über den Workflow, der Sie in diesem Abschnitt erwartet. Sehen Sie, wie das Icon aussieht, das Sie hier gestalten werden, und erfahren Sie, welche Funktionen dabei zum Einsatz kommen.
  
  Einführung
  
  01:04
- Über den Menüpunkt "Datei Neu" können Sie in Photoshop leere Dokumente anlegen. Bereits hier sollten Sie wissen, welche Dimensionen Ihr Bild haben soll.
  
  Dokument richtig anlegen
  
  01:33
- Der erste Schritt zu einem Icon ist die Grundform. Sehen Sie in diesem Video, wie Sie schnell und einfach die Basis für Ihr Icon anlegen und ausrichten. Lernen Sie dabei gleich praktische Tastenkürzel und die Subtraktionsfunktion kennen.
  
  Icon-Grundform erstellen
  
  02:09
- Damit Sie ein geöffnetes Briefkuvert darstellen können, fehlt der Grundform noch ein Dreieck für die Öffnung. Sie können mit Unterstützung der Hilfslinien und dem Zeichenstiftwerkzeug eine Lasche zeichnen und diese neue Form mit der Basis zusammenführen.
  
  Icon-Grundform fertigstellen
  
  02:20
- Um die Icon-Grundform vom Hintergrund abzuheben, sollten Sie den Umschlag einfärben. Mit einer Verlaufsfüllung können Sie den Farbverlauf sogar effektvoll gestalten. Wie's geht, zeigt dieses Video.
  
  Verlaufsfüllung hinzufügen
  
  03:26
- Jeder Briefumschlag besitzt eine dreieckförmige Öffnung, die mit der Lasche exakt übereinstimmt. Um diese Form möglichst schnell und einfach nachbilden zu können, sind ein paar Tricks nötig.
  
  Eine Öffnung erstellen
  
  05:11
- Um den 3D-Effekt eines geöffneten Briefumschlags zu verstärken, sollten Sie die beiden Seitenteile in Form eines Dreiecks mit einem separaten Farbverlauf versehen. Dieses Video zeigt, wie Sie die linke Umschlagseite ansprechend gestalten.
  
  Seitenteil links
  
  03:33
- Nun fehlt noch die rechte Seite. Sehen Sie in diesem Video, wie Sie mit wenig Aufwand eindrucksvolle Effekte erzielen können. Lernen Sie hier, wie Sie eine Maske ganz einfach spiegeln.
  
  Seitenteil rechts
  
  02:39
- Um auch den letzten Teil des Umschlags ansprechend zu gestalten, sind einige Tricks nötig. Erfahren Sie in diesem Video, wie Sie am besten einen Teilbereich der Grundform samt abgerundeten Ecken auswählen.
  
  Umschlag unten
  
  03:50
- Im letzten Schritt sollten Sie noch den Farbverlauf des unteren Abschnitts des Briefkuverts den restlichen Teilen anpassen. Wie's geht, sehen Sie in diesem Video.
  
  Verlaufsüberlagerung
  
  02:34
- Die einzelnen Teile des Symbols sind fertig und farblich aufeinander abgestimmt. Dennoch wirkt das Ganze noch nicht. Sehen Sie in diesem Video, wie Sie die Farbverläufe des gesamten Umschlags nochmals überarbeiten und perfektionieren.
  
  Zusätzliche Verlaufsüberlagerungen
  
  04:47
- Mit Hilfe der Funktionen "Kontur" und "Schatten" können Sie die Öffnung des Briefumschlags noch plastischer gestalten. Dieses Video zeigt, wie Sie Ihrem Icon mit einem Trick einen nach innen laufenden Schatten hinzufügen.
  
  Kontur und Schatten - Öffnung
  
  05:13
- Dem Umschlag fehlt noch ein typisches Merkmal: der Klebestreifen. Erfahren Sie in diesem Video, wie Sie einen Streifen mit Hilfe des Polygon-Lasso-Werkzeugs erstellen, diesen weiß einfärben, die Deckkraft senken und horizontal spiegeln.
  
  Klebestreifen erstellen
  
  03:30
- Um den Funktionsbereich einer E-Mail-Software zu verdeutlichen, verwenden solche Anwendungsprogramme häufig Icons von Briefumschlägen mit einem hervorstehenden Blatt Papier. So etwas können Sie auch selbst gestalten!
  
  Ein Blatt Papier einfügen
  
  04:14
- Ordnung ist das halbe Leben - auch in Photoshop. Mittlerweile haben Sie für Ihr Icon bereits mehrere Ebenen angelegt, die Sie in aussagekräftige Ordner verschieben sollten. Sehen Sie in diesem Video, wie Sie innerhalb Ihres Dokuments für Ordnung sorgen.
  
  Ordner anlegen
  
  03:07
- Wenn das Icon plastischer wirken soll, darf etwas Glanz nicht fehlen. Diesen Effekt erstellen Sie am besten, indem Sie in einer neuen Ebene eine glänzende Verlaufsüberlagerung erzeugen und diese über Ihr Icon legen. Wie's geht, sehen Sie in diesem Video.
  
  Glanz hinzufügen - Front
  
  03:37
- Das Icon sieht schon ganz gut aus. Die Feinarbeit entscheidet jedoch, wie perfekt das Icon später wirkt. Dieses Video zeigt, wie Sie die Kontur am unteren Umschlagteil verfeinern.
  
  Kontur bearbeiten
  
  02:17
- Schatteneffekte sind besonders wichtig für unser Auge. Sehen Sie in diesem Video, wie Sie mit Hilfe einer neuen Ebene dem unteren Umschlagteil subtil Schatten hinzufügen.
  
  Schatten hinzufügen - außen
  
  02:16
- Da in das Icon zuvor ein Blatt Papier eingefügt wurde, fehlt der Schatten, den der Umschlag auf das Papier wirft. Wie Sie diesen optischen Fehler ausbessern, lernen Sie in diesem Video.
  
  Schatten hinzufügen - innen
  
  03:53
- Sehen Sie den letzten optischen Fehler in Ihrem Icon? Richtig. Das eingefügte Blatt Papier wirft keinen Schatten. Dieses Video zeigt, wie Sie den fehlenden Schatten einmalen können.
  
  Schatten hinzufügen - Papier
  
  03:14
- Sie sind immer noch nicht ganz zufrieden mit Ihrem Werk? Dann fügen Sie doch noch den Seitenteilen etwas Glanz hinzu. Wie's geht, sehen Sie in diesem Video.
  
  Glanz hinzufügen - Seiten
  
  03:54
- Das Umschlag-Icon ist perfekt. Verpassen Sie ihm aber noch den letzten Schliff, indem Sie das Symbol etwas anders positionieren. Sehen Sie in diesem Video, wie Sie ein Objekt in Photoshop im Raum ausrichten.
  
  Im Raum ausrichten
  
  05:22
- Lassen Sie in diesem Video mit einem letzten Blick auf das fertige Icon die einzelnen Arbeitsschritte Revue passieren. Erfahren Sie außerdem, wie Sie Ihr Icon nun verwenden können.
  
  Fertiges Icon
  
  02:25
Schloss-Icons sind sehr beliebt, um zu signalisieren, dass ein Bereich oder ein Dokument geschützt ist, also der Zugriff Dritter nicht erwünscht ist. In diesem Abschnitt sehen Sie anhand eines kompletten Workflows, wie Sie selbst so ein Symbol erstellen können - Schritt für Schritt.

Ein Schloss-Icon erstellen
- Über den Menüpunkt "Datei Neu" können Sie in Photoshop leere Dokumente anlegen. Bereits hier sollten Sie wissen, welche Dimensionen Ihr Bild haben soll.
  
  Dokument richtig anlegen
  
  01:31
- Der erste Schritt zu einem Icon ist die Grundform. Ein Schloss-Icon besteht aus einer rechteckigen Basis und einem halbrunden Verschluss.
  
  Grundform erstellen
  
  02:16
- Dieses Video zeigt, wie Sie die Grundform für den halbrunden Verschluss des Icons erstellen. Erzeugen Sie dafür zunächst einen Kreis, den Sie in Form eines Rings beschneiden.
  
  Ring-Grundform erstellen
  
  04:05
- Der Ring für den Verschluss ist angelegt, muss jedoch noch beschnitten werden. Sehen Sie in diesem Video, wie Sie den Ring halbieren.
  
  Ring halbieren
  
  02:54
- Um die Grundform des Schlosses fertigzustellen, sollten Sie zwischen dem Verschlussbügel und der rechteckigen Basis einen Verbindungsbalken einfügen und das Bügelende abrunden. Wie's geht, erfahren Sie in diesem Video.
  
  Verschlussform erstellen
  
  04:53
- Das fertige Icon sollte einen 3D-Effekt beinhalten. Dafür können Sie schon jetzt der Grundform eine Verlaufsüberlagerung hinzufügen, um etwas mehr Tiefe zu bekommen. Wie's geht, zeigt dieses Video.
  
  Verlaufsüberlagerung
  
  06:51
- Zusätzlich zum Farbverlauf können Sie Ihrem Objekt auch einen Schatteneffekt hinzufügen. Lernen Sie in diesem Video, wie Sie eine neue Ebene erstellen und damit geschickt Schatten simulieren.
  
  Schatten hinzufügen
  
  03:20
- Wenn unter dem Objekt Schatten ist, dann sollten Sie oben etwas Glanz hinzufügen. Dieses Video zeigt, wie Sie einen Glanzton erstellen.
  
  Glanz erstellen
  
  03:43
- Die rechteckige Grundform sieht schon ganz gut aus. Nun sollten Sie auch den Verschlussbügel daran anpassen. Sehen Sie in diesem Video, wie Sie den Bügel einfärben, einen Farbverlauf hinzufügen und ihn mit Glanz versehen.
  
  Glanz erzeugen
  
  04:23
- Mit einzelnen Glanzstellen können Sie den Blickverlauf des Betrachters gezielt führen. Wie Sie auf dem Verschlussbügel zwei Glanzstellen erzeugen, erfahren Sie in diesem Video.
  
  Glanzstellen - Verschlussbügel
  
  04:19
- Der Glanz ist ein sehr wichtiger Effekt auf einem Icon. Deshalb sollten Sie die einzelnen Glanzstellen besonders sorgfältig bearbeiten. Dieses Video zeigt, wie Sie den Glanzverlauf der linken Schlossseite feinjustieren.
  
  Glanzverlauf anpassen - links
  
  04:36
- Sehen Sie in diesem Video, wie Sie den Verlauf des Glanzes auf der rechten Schlossseite perfektionieren.
  
  Glanzverlauf anpassen - rechts
  
  03:14
- Dieses Video zeigt, wie Sie alle erstellten Glanzstellen und -flächen so bearbeiten, dass sie weicher ineinander übergehen.
  
  Glanz anpassen - gesamt
  
  02:06
- Der Farbverlauf der rechteckigen Grundform sieht bereits sehr gut aus. Nun sollten Sie einen ähnlichen Effekt auch auf dem Verschlussbügel einfügen. Wie Sie den Bügel subtil dem Gesamterscheinungsbild anpassen, sehen Sie in diesem Video.
  
  Verlauf erstellen - Verschluss
  
  02:27
- Die beiden Glanzstellen am Verschlussbügel stören noch ein wenig die Optik. Wie Sie diese beiden Spots mit Hilfe von Glanz und Kontur perfektionieren, erfahren Sie in diesem Video.
  
  Glanz und Kontur bearbeiten
  
  02:31
- Sie verlieren den Überblick über die vielen Ebenen, die Sie mittlerweile angelegt haben? Kein Problem. Sehen Sie in diesem Video, wie Sie in Ihrem Dokument für Ordnung sorgen.
  
  Ebenen ordnen
  
  02:09
- Das Icon sieht zwar schon sehr gut aus, ist aber etwas zu hell geraten. Dieses Video zeigt, wie Sie Ihr Objekt subtil abdunkeln und ihm damit den letzten Schliff verleihen.
  
  Abdunkeln
  
  06:54
- Lassen Sie in diesem Video mit einem letzten Blick auf das fertige Icon die einzelnen Arbeitsschritte Revue passieren. Erfahren Sie außerdem, wie Sie Ihr Icon nun verwenden können.
  
  Fertiges Icon
  
  02:16
Das Designen von Icons setzt ein gewisses Grundwissen über Adobe Photoshop voraus. Deshalb bietet dieses Kapitel einen Überblick über die Arbeit in Photoshop. Hier erhalten Sie zahlreiche Tipps, wie Sie Ihre Benutzeroberfläche am besten einrichten, die Leistung des Programms optimieren und wie Sie Ihre Dateien speichern und exportieren.

Bonuskapitel zum Auffrischen: Grundlagen
- Öffnen Sie Photoshop zum ersten Mal, dann ist das Programm für den Standard-User konfiguriert. Für spezielle Anwendungsbereiche sollten Sie diese Voreinstellungen nach Ihren Bedürfnissen ändern. Lernen Sie in diesem Abschnitt, wie Sie die Benutzeroberfläche anpassen, die richtigen Maßeinheiten definieren, Hilfslinien und Raster aktivieren und die Leistung der Software optimieren.
  
  Voreinstellungen
  - Unter dem Menüpunkt "Bearbeiten" finden Sie die Option, alle Programmvoreinstellungen global zu verändern. Dieses Video zeigt, wo Sie die Allgemeinen Einstellungen finden, und erläutert die einzelnen Punkte, die Sie dort bearbeiten können.
    
    Allgemeine Voreinstellungen
    
    03:05
  - Photoshop können Sie in nahezu allen Bereichen an Ihre Anforderungen anpassen. Sehen Sie in diesem Video, wie Sie beispielsweise die Größe der Textanzeige in der Benutzeroberfläche ändern.
    
    Einstellungen für die Benutzeroberfläche
    
    00:41
  - Normalerweise ist die Leistung von Photoshop bereits sehr gut voreingestellt. Erfahren Sie in diesem Video, wie Sie mit einigen Klicks die Leistung noch weiter optimieren können. Holen Sie noch mehr aus Photoshop heraus!
    
    Leistung optimieren
    
    01:49
  - Photoshop stellt die Werkzeugspitze der Malwerkzeuge standardmäßig als kleine Kreise dar. Wenn Sie diese Anzeige irritiert, können Sie die Zeigerdarstellung ganz einfach ändern. Wie's geht, sehen Sie in diesem Video.
    
    Anzeige der Werkzeugspitzen ändern
    
    01:23
  - Die Maßeinheiten sollten Sie stets den Anforderungen des Projekts anpassen. Um Icons zu designen, eignen sich Angaben in Zentimetern oder Punkten nicht besonders gut: Stellen sie die Einheiten für Lineale und Text auf Pixelangaben um!
    
    Die richtigen Maßeinheiten einstellen
    
    01:17
  - Hilfslinien, Raster und Slices erleichtern die Arbeit oft ungemein. Dieses Video zeigt, wie Sie die Farbe dieser nützlichen Helfer ändern können, um so besser den Überblick zu behalten.
    
    Farbe für Hilfslinien, Raster und Slices ändern
    
    01:41
- Die Benutzeroberfläche von Photoshop wirkt auf den ersten Blick überladen und verwirrend. Dieser Abschnitt erläutert Ihnen die wichtigsten Bereiche und Werkzeuge und zeigt, wie Sie diese am Bildschirm jederzeit neu platzieren können.
  
  Benutzeroberfläche
  - Die Werkzeugleiste ist das wichtigste Tool eines jeden Gestalters. Sie erfahren, wo Sie Kurzinformationen über die einzelnen Werkzeuge und Angaben über voreingestellte Tastenkürzel finden.
    
    Werkzeugleiste
    
    03:41
  - Die Bedienfelder finden Sie normalerweise am rechten Bildschirmrand. Lernen Sie in diesem Video, wie diese Fenster funktionieren und wie Sie die einzelnen Gruppen jederzeit ein- und ausklappen können, wenn Sie den Platz benötigen.
    
    Bedienfelder von Photoshop
    
    03:57
  - Photoshop bietet Ihnen die Möglichkeit, bestimmte Zusammenstellungen von Bedienfeldern in sogenannten Arbeitsbereichen abzuspeichern. Experimentieren Sie selbst mit dieser praktischen Funktion!
    
    Arbeitsbereiche in Photoshop nutzen
    
    03:14
- Egal, ob Sie an mehreren Dokumenten gleichzeitig arbeiten oder in einem Bild kleinste Details verändern - nur mit den richtigen Ansichtseinstellungen kommen Sie ans Ziel. Lernen Sie in diesem Abschnitt, wie Sie die Ansicht von Dokumenten anpassen, innerhalb von Grafiken zoomen und Ihre Ergebnisse speichern und exportieren.
  
  Dateien anzeigen und exportieren
  - In Photoshop passiert es schnell, dass Sie mehr als ein Dokument gleichzeitig angezeigt haben wollen. Dabei geht schnell der Überblick verloren. Wie Sie die Ansicht Ihrer Dokumente ganz leicht sinnvoll anpassen können, erfahren Sie in diesem Video.
    
    Ansicht der Dokumente in Photoshop anpassen
    
    03:41
  - Eine häufig verwendete Funktion in Photoshop ist der Zoom. Lernen Sie in diesem Video, wie Sie sich schrittweise oder stufenlos mit Maus oder Tastatur innerhalb Ihrer Bilder bewegen können.
    
    Zoom
    
    02:05
  - Photoshop speichert alle Dokumente standardmäßig als PSD-Dateien ab. Je nach Verwendungszweck können Sie Ihre Ergebnisse aber auch in anderen Formaten ablegen.
    
    Dokumente speichern
    
    01:13
  - Neben der Funktion "Speichern unter" hält Photoshop für Sie noch einige sehr nützliche Tools für die tägliche Arbeit parat. Lernen Sie in diesem Video die Vorteile der Exportfunktion "Für Web und Geräte speichern" kennen.
    
    Der "Für Web und Geräte speichern"-Export
    
    02:00
  - Sehen Sie hier, wie sich die Größe der Darstellung auf die Verwendbarkeit des Icons auswirkt und welche Überlegungen Sie sich im Vorfeld machen sollten.
    
    Informationen zu Icon-Größen
    
    02:15