Icons gestalten mit Photoshop – Grundformen

Grundlagen und Arbeitstechniken

Spätestens seit dem Siegeszug von iPhone, iPad und Co. sind Icons aus unserem Leben nicht mehr wegzudenken. Wenn Sie wissen wollen, wie Sie selbst gute Icons in Photoshop gestalten, sind Sie hier richtig. In diesem Video-Training verwenden Sie dazu einige einfache Grundformen, die Sie mit Hilfe der Formwerkzeuge von Photoshop, grafischen Mitteln und Ebenenstilen erzeugen. Anhand zweier durchgehender Praxisbeispiele sehen Sie, wie verschiedene Iconarten von Grund auf entstehen und Sie mit Hilfe einer guten Struktur schnell weitere Varianten erzeugen.

Ihr(e) Trainer: Armin Böttigheimer

Erscheinungsdatum: 04.08.2011

EUR 19,95

Laufzeit: 2 Stunden

Dieses Video-Training ist versionsunabhängig. Es wurde mit Photoshop CS5 erstellt, ist jedoch gleichermaßen auch für Photoshop CS4 und höhere Versionen geeignet.

Was bekomme ich nach dem Kauf?

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!

iPad kompatibel

In den Warenkorb Downloads

Auf die Merkliste Tell-A-Friend Feedback verfassen

Ähnliche Video-Trainings

Willkommen zu "Icons gestalten mit Photoshop – Grundformen" Armin Böttigheimer stellt sich und sein Video-Training vor.

Ein Glossy-Icon ist ein Symbol in glänzendem Look. Dieser Abschnitt demonstriert, wie Sie in Photoshop so ein Icon in Form eines Kreises erzeugen und wie Sie das Ergebnis schnell und effektiv anpassen, damit Sie beliebig viele Icons in Serie gestalten können.

Ein Glossy-Kreis-Icon erstellen
- Dieses Video bietet einen Überblick über den Workflow, der Sie in diesem Abschnitt erwartet. Sehen Sie, wie die Icons aussehen, die Sie hier gestalten werden, und erfahren Sie, welche Funktionen dabei zum Einsatz kommen.
  
  Einführung
  
  01:53
- Ü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. Erfahren Sie in diesem Video, welche Einstellungen Sie für ein Icon verwenden können und worauf Sie dabei achten sollten. Lernen Sie außerdem, wie Sie diese Daten gleich als Vorlage abspeichern können.
  
  Dokument richtig anlegen
  
  02:47
- Hilfslinien und Lineale sind für die Arbeit in Photoshop sehr nützlich. Dieses Video zeigt, wie Sie solche Hilfsmittel aktivieren und wie Sie diese effektiv in Ihrem Dokument einsetzen. Erfahren Sie dabei, wie Sie den exakten Mittelpunkt Ihres Dokuments ermitteln.
  
  Lineale und Hilfslinien einfügen
  
  03:53
- 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 kennen.
  
  Die Icon-Grundform erstellen
  
  04:05
- 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 hinzufügen
  
  06:28
- Den Rand für das Icon gestalten Sie am besten über die Ebenenstile. Fügen Sie einfach der Grundform eine Kontur hinzu. Welche Einstellungen Sie dabei verwenden sollten, sehen Sie in diesem Video.
  
  Kontur erstellen
  
  03:30
- Im Gegensatz zur Gesamtfläche wirkt der Randbereich des Icons noch etwas flach. Dieses Video zeigt, wie Sie mit Hilfe der Ebenenstile auch der Kontur mehr Tiefe verleihen können.
  
  Der Kontur mehr Tiefe geben
  
  01:33
- Ein einfaches Icon besteht aus einer Grundform und einem Symbol, das seine Bedeutung vorgibt. Da Photoshop in einer internen Bibliothek zahlreiche Vorlagen für Symbole zur Verfügung stellt, brauchen Sie Letzteres nicht einmal selbst zu erstellen. Wie Sie nun so eine Vorlage in die Grundform einfügen und anpassen, erfahren Sie in diesem Video.
  
  Das erste Symbol einfügen
  
  04:14
- Das eingefügte Symbol wirkt im Gegensatz zur Grundform des Icons etwas platt und langweilig. Sehen Sie in diesem Video, wie Sie dem Symbol ganz einfach einen Schlagschatten hinzufügen und die Farbe anpassen.
  
  Symbol mit Schatten versehen
  
  01:57
- Das Icon sieht bereits sehr gut aus, ist aber immer noch nicht perfekt. Lernen Sie in diesem Video, wie Sie dem Symbol ein dynamischeres Aussehen verleihen, indem Sie erneut einen Farbverlauf einfügen. Passen Sie das Symbol subtil dem Gesamtbild an!
  
  Verlauf auf Symbol anwenden
  
  02:10
- Dieses Video zeigt, wie Sie mit Hilfe eines einfachen Tricks das Symbol des Icons dezent vom Hintergrund absetzen und dadurch eine optimale Wirkung erzielen. Sehen Sie selbst, welchen Effekt Sie auslösen, wenn Sie die Funktion "Schein nach innen" aktivieren. Aber Achtung: Auf das Finetuning kommt es an!
  
  Dem Symbol einen inneren Schein geben
  
  02:58
- Das Icon ist fertig. Für ein Glossy-Icon fehlt ihm nur noch der Glanz. Sehen Sie in diesem Video, wie Sie in einer neuen Ebene einen Verlauf erzeugen, der glänzt. Wenn Sie diese Ebene über Ihr Icon legen, erhöht dieser Glanzeffekt die Plastizität.
  
  Glanzeffekt
  
  06:05
- Sie sind mit der Glanzmaske noch nicht zufrieden? Kein Problem. Erfahren Sie in diesem Video, welche Möglichkeiten Ihnen zur Verfügung stehen, um die Übergänge noch harmonischer zu gestalten.
  
  Glanz anpassen
  
  01:15
- Der Vorteil an der Arbeit mit Ebenen ist, dass Sie einzelne Ebenen jederzeit einfach und schnell ausblenden können. Dieses Video zeigt, wie Sie neue Symbole einfügen und die bereits erarbeiteten Ebenenstile einfach übernehmen - schon haben Sie ein neues Icon erstellt.
  
  Zusätzliche Symbole einbinden
  
  04:44
- Je mehr Ebenen Sie verwenden, desto schneller verlieren Sie den Überblick. Dagegen hilft nur eines: Benennen Sie alle Ebenen sofort um, vergeben Sie aussagekräftige Namen und nützen Sie die Funktion "Gruppieren". Sehen Sie in diesem Video, wie eine gute Struktur aussehen kann.
  
  Arbeitsdatei strukturieren
  
  04:19
- Die abschließende Übersicht darüber, wie das Icon gestaltet wurde und welche Schritte notwendig waren.
  
  Das Ergebnis
  
  01:21
Application-Icons haben zurzeit Hochkonjunktur. Für fast alle Anwendungen, die Sie auf das iPhone oder Handy herunterladen können, gibt es ein eigenes Icon. In diesem Kapitel sehen Sie, wie Sie selbst so ein Symbol erstellen können. Lernen Sie hier außerdem, wie Sie bestimmte Voreinstellungen in Photoshop anpassen, um das Icon für spätere Gestaltungsmöglichkeiten zu optimieren.

Ein App-Icon erstellen
- Sie wissen nicht genau, wie ein App-Icon aussehen könnte? Kein Problem. Sehen Sie in diesem Video das fertige Icon, das Sie in diesem Workflow erstellen und modifizieren werden.
  
  Einführung
  
  00:47
- In diesem Video sehen Sie, mit welchen Grundeinstellungen Sie ein neues Dokument für ein Icon anlegen. Erfahren Sie dabei auch gleich, wie Sie darin Hilfslinien und Lineale einfügen und sich damit Ihre Arbeit wesentlich erleichtern.
  
  Dokument anlegen
  
  01:24
- Die Grundform dieses App-Icons ist ein abgerundetes Rechteck. Dieses können Sie schnell und einfach mit Hilfe eines Zeichenwerkzeugs erstellen. Auf welche Details Sie dabei achten sollten, erfahren Sie in diesem Video.
  
  Die Grundform des Icons erstellen
  
  01:51
- Die weiße Grundform sieht noch recht langweilig aus. Dieses Video zeigt, wie Sie durch eine farbige Verlaufsüberlagerung mehr Dynamik in das Bild bringen.
  
  Verlaufsüberlagerung hinzufügen
  
  01:40
- Damit Sie später einen Strahleneffekt erzeugen können, müssen Sie erst einmal eine Strukturebene erstellen. Fügen Sie mit Hilfe des Videos einer neuen Ebene ein Rauschen hinzu. Wie das genau geht, erfahren Sie in diesem Video.
  
  Rauschen hinzufügen
  
  03:17
- Dieses Video demonstriert, wie Sie mit Hilfe des radialen Weichzeichners aus der Strukturebene einen ansprechenden Strahleneffekt erzeugen können. Lassen Sie sich überraschen, welche Wirkung Sie mit wenigen Klicks erzielen können!
  
  Rauschen in Strahlen verwandeln
  
  02:11
- Damit die Wirkung der Strahlen nicht zu stark und gleichmäßig wirkt, sollten Sie den Mittelpunkt etwas abmildern. Lernen Sie in diesem Video, wie Sie eine Ebenenmaske erstellen und diese effektiv einsetzen.
  
  Mittelpunkt anpassen und abmildern
  
  01:58
- Die Wirkung ist toll, aber der Effekt reicht leider über die Grundform hinaus. Um das zu vermeiden, müssen Sie die Icon-Basis wieder auf die Ausgangsform begrenzen. Wie einfach das geht, erfahren Sie in diesem Video.
  
  Strahleneffekt auf die Grundform begrenzen
  
  00:58
- Das sieht jetzt etwas streng aus? Stimmt. Sehen Sie in diesem Video, wie Sie die beiden Ebenen "Strahlen" und "Grundform" harmonisch miteinander verbinden, indem Sie sie ineinander kopieren. Lernen Sie dabei, wie Sie Ebenen kopieren und zusammenfügen.
  
  Strahleneffekt und Hintergrund verbinden
  
  01:21
- Sollte das Icon etwas plastischer wirken, darf ein Glanzeffekt 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.
  
  Glanzeffekt einbauen
  
  02:57
- Der Glanz sieht schon ganz gut aus, wirkt aber noch etwas zu regelmäßig. In diesem Video lernen Sie einen Trick kennen, wie Sie in so einem Fall etwas nachhelfen können.
  
  Glanz anpassen
  
  01:17
- Wo Glanz ist, da ist auch Schatten. Erhöhen Sie den Kontrast in Ihrem Icon, indem Sie einen kleinen Schattenbereich einfügen und damit gleichzeitig für mehr Tiefe im Bild sorgen. Lernen Sie in diesem Video einen Trick, wie Sie einen Teilbereich des Bilds auswählen und bearbeiten können.
  
  Schattenbereich gestalten
  
  03:34
- Ein zusätzlicher Glanzspot im unteren Bereich des Icons verleiht den später eingefügten Symbolen noch mehr Wirkung. Dieses Video zeigt, wie Sie ganz einfach einen Glanzspot in eine duplizierte Glanzebene hineinmalen. Und wenn Sie über den Rand hinausgemalt haben, dann löschen Sie das ganz einfach wieder!
  
  Glanzspot hineinmalen
  
  01:47
- Die Grundform ist fertig. Nun fehlt nur noch das Symbol, das dem Icon die Bedeutung gibt. Sehen Sie in diesem Video, wie Sie ein Symbol aus den Photoshop-Bibliotheken auswählen und in das Icon einfügen.
  
  Icon-Symbol erstellen
  
  02:47
- Wenn das Symbol angepasst und richtig positioniert ist, dann sollten Sie es mit Hilfe einer schwarz-weißen Verlaufsüberlagerung dem Stil des Icons anpassen und gleichzeitig vom Hintergrund abheben. Wie's geht, zeigt dieses Video.
  
  Einen Verlauf auf das Symbol anwenden
  
  02:07
- Für das Sterne-Icon bietet sich der Reliefeffekt an, um Symbol und Hintergrund zu harmonisieren. Sehen Sie selbst, wie groß die Wirkung eines dezenten Eingriffs sein kann.
  
  Mehr Harmonie durch Reliefeffekt
  
  02:14
- Ordnung ist das halbe Leben - auch in Photoshop. Dieses Video zeigt, wie Sie die einzelnen Ebenen des Sterne-Icons sinnvoll gruppieren und strukturiert anordnen. Nur so können Sie auch bei größeren Dokumenten immer den Überblick behalten.
  
  Arbeitsdatei strukturieren
  
  02:47
- Sehen Sie hier noch einmal in der Zusammenfassung, wie das Icon gestaltet wurde und welche Schritte notwendig waren.
  
  Das Ergebnis
  
  02:02
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. Lernen Sie in diesem Video, wie Sie die Einheiten für Lineale und Text auf Pixelangaben umstellen.
    
    Die richtigen Maßeinheiten einstellen
    
    01:20
  - 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:44
- 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. Dieses Video bietet einen Einblick in den Aufbau und die Funktionen dieses mächtigen Tools. Dabei erfahren Sie, 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. Erfahren Sie außerdem, wie Sie bei Bedarf weitere Fenster einblenden können.
    
    Bedienfelder von Photoshop
    
    04:03
  - Photoshop bietet Ihnen die Möglichkeit, bestimmte Zusammenstellungen von Bedienfeldern in sogenannten Arbeitsbereichen abzuspeichern. Dieses Video zeigt, wo Sie die Standardarbeitsbereiche finden, wie diese funktionieren und wie Sie Ihre eigenen Bereiche definieren können. Experimentieren Sie selbst mit dieser praktischen Funktion!
    
    Arbeitsbereiche in Photoshop nutzen
    
    03:20
- 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:52
  - Eine häufig verwendete Funktion in Photoshop ist der Zoom. Damit können Sie schnell und effektiv in Ihre Dokumente hinein- und wieder herauszoomen. Lernen Sie in diesem Video, wie Sie sich schrittweise oder stufenlos mit Maus oder Tastatur innerhalb Ihrer Bilder bewegen können.
    
    Zoom
    
    02:10
  - Photoshop speichert alle Dokumente standardmäßig als PSD-Dateien ab. Je nach Verwendungszweck können Sie Ihre Ergebnisse aber auch in anderen Formaten ablegen. Wie's geht und welche Dateiformate und weitere Einstellungsmöglichkeiten Ihnen zur Verfügung stehen, erfahren Sie in diesem Video.
    
    Dokumente speichern
    
    01:11
  - 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 und erfahren Sie, welche neuen Möglichkeiten sich Ihnen dadurch eröffnen.
    
    Der "Für Web und Geräte speichern"-Export
    
    02:02
  - Sehen Sie hier, wie sich die Größe der Darstellung auf die Verwendbarkeit des Icons auswirkt und welche Überlegungen Sie im Vorfeld treffen sollten.
    
    Informationen zu Icon-Größen
    
    02:14

Willkommen zu "Icons gestalten mit Photoshop – Grundformen"

Armin Böttigheimer stellt sich und sein Video-Training vor.

Armin Böttigheimer begleitet Sie durch zwei Workshops, in denen Sie mit Photoshops Bordmitteln ansprechende Icons gestalten. Dabei setzt er Grundformen und Ebenenstile ein und legt Wert auf nichtdestruktives Arbeiten.
Die beiden unterschiedlichen Gestaltungsbeispiele zeigen zum einen ein sogenanntes Glossy Icon und zum zweiten ein typisches App-Icon. Daran erklärt er Schritt für Schritt in die kreative Gestaltung von Icons. Sie lernen, wie Sie die Ordnerstrukturen Ihrer Arbeitsdateien so aufbereiten und anlegen, dass Sie auch zu späteren Zeitpunkten ihre Icons anpassen und verändern können.

Aus dem Inhalt

Ein Glossy-Kreis-Icon erstellen
Ein Glossy-Icon ist ein Symbol in glänzendem Look. Dieser Abschnitt demonstriert, wie Sie in Photoshop so ein Icon in Form eines Kreises erzeugen und wie Sie das Ergebnis schnell und effektiv anpassen, damit Sie beliebig viele Icons in Serie gestalten können.

Ein App-Icon erstellen
Application-Icons haben zurzeit Hochkonjunktur. Für fast alle Anwendungen, die Sie auf das iPhone oder Handy herunterladen können, gibt es ein eigenes Icon. In diesem Kapitel sehen Sie, wie Sie selbst so ein Symbol erstellen können. Lernen Sie hier außerdem, wie Sie bestimmte Voreinstellungen in Photoshop anpassen, um das Icon für spätere Gestaltungsmöglichkeiten zu optimieren.

Bonuskapitel zum Auffrischen: Grundlagen
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.

Systemvoraussetzungen

DSL-Internet-Verbindung
aktueller Browser mit Flash-Plugin
Bildschirmauflösung mind. 1024x768
Soundkarte, Lautsprecher bzw. Kopfhörer
Pentium 4 ab 2,6 GHz bzw. G5
512 MB RAM

iPad kompatibel

Sie können die Lektionen dieses Video-Trainings am iPad und iPhone 4 direkt im Browser ansehen. Für den Offline-Einsatz steht eine spezielle Download-Variante zur Verfügung, die eine Playlist und die iPad-kompatiblen Videos umfasst.

Projektdateien

Alle im Training verwendeten Beispiel- und Übungsmaterialien liegen bei. So können Sie jeden Schritt 1:1 an Originaldateien nachvollziehen und den Lernerfolg optimieren!

Mach mit!-Modus

Sie haben die Wahl! Lernen Sie konzentriert im Vollbildmodus oder schalten Sie mit nur einem Klick in den Mach mit!-Modus. So probieren Sie die Beispiele direkt am eigenen Computer aus, während das Video-Training in einem extra Fenster parallel weiter läuft.

Lesezeichen

Während ein Video läuft können Sie jederzeit individuelle Lesezeichen setzen, die als orange Markierungen in der Abspielleiste auftauchen. Ein Lesezeichen kann aus einem einfachen Begriff oder einer kurzen Notiz bestehen. Eine Übersichtsliste hilft dabei, die eigenen Lesezeichen schnell wieder zu finden.

Derzeit sind keine Feedbacks vorhanden...