Bitte wählen Sie die Bereiche, die Sie exportieren möchten:
Schulung Illustrator für UI/UX-Designer: Icons, Grafiken und Assets
Illustrator & Figma: Das Power-Duo für moderne Interfaces
Schulungsformen
Inhouse-/Firmenschulung
- 2 Tage - anpassbar
- Termin nach Wunsch
- In Ihrem Hause oder bei der GFU
- Preis nach Angebot
- Lernumgebung in der Cloud
- Inhalte werden auf Wunsch an die Anforderungen Ihres Teams angepasst.
Individualschulung
- 2 Tage - anpassbar
- Termin nach Wunsch
- In Ihrem Hause oder bei der GFU
- Preis nach Angebot
- Lernumgebung in der Cloud
- 1 Teilnehmender = Fokus aufs Fachliche und maximaler Raum für individuelle Fragen.
Beschreibung
Unternehmen profitieren von drastisch reduzierten Ladezeiten durch optimierte Web-Grafiken, einer konsistenten Designsprache über alle digitalen Kanäle hinweg und einer reibungsloseren Kommunikation an der Schnittstelle zwischen Design und Entwicklung.
Weitere Adobe Seminare für Ihre gezielte Weiterbildung...
Schulungsziel
Die Teilnehmenden erlernen die Erstellung und den Export technologisch optimierter UI-Grafiken. Ziel ist es, konsistente Icon-Sets im Pixel-Grid zu entwerfen, komplexe Illustrationen für Landingpages zu erstellen und diese als schlanke, entwicklerfreundliche SVGs oder Assets in verschiedenen Skalierungen (1x-3x) bereitzustellen.
Details
Inhalt
- Ziele und Erwartungen der Teilnehmenden
- Klärung individueller Lernziele und Erwartungen für ein praxisnahes und relevantes Seminar
- 1. Das Pixel-Grid: Die Basis für UI-Design
- Pixel-Snapping: Ausrichtung von Pfaden an Bildschirm-Pixeln für maximale Schärfe.
- Dokument-Setup: Arbeiten in Pixel-Einheiten statt Millimetern (RGB-Farbraum).
- Vorschau-Modi: Nutzung der Pixel-Vorschau zur Kontrolle von Kanten-Antialiasing.
- 2. Icon-Design: Konsistenz und Systematik
- Keyline-Grids: Verwendung von Standardformen (Kreis, Quadrat) für optische Ausgewogenheit.
- Stil-Definition: Einheitliche Strichstärken, Ecken-Radien und Endkappen festlegen.
- Metaphern-Entwicklung: Von der Idee zum skalierbaren Symbol.
- 3. UI-Assets: Buttons, Badges und Controls
- Komponenten-Design: Erstellung von UI-Elementen im Flat-, Skeuomorph- oder Glassmorphism-Stil.
- Isometrische Illustrationen: Schnelle Erstellung von 3D-ähnlichen Icons via 3D-Effekt oder Achsen-Transformation.
- Hand-Drawn Style: Vektorisierung analoger Skizzen für organische Web-Illustrationen.
- 4. Der optimierte SVG-Workflow
- Pfade vereinfachen: Reduzierung von Ankerpunkten zur Minimierung der Dateigröße.
- Gruppierung & Benennung: Strukturierung der Ebenen für den direkten Export als sauberen Code.
- IDs & Klassen: Vorbereitung von SVG-Elementen für CSS- und JS-Manipulationen.
- 5. Illustration für Marketing & Landingpages
- Hero Images: Erstellung großflächiger Vektor-Szenen für den Website-Einstieg.
- Infografiken: Daten-Visualisierung mit den Diagramm-Werkzeugen von Illustrator.
- Social Media Graphics: Effiziente Erstellung von Varianten für verschiedene Plattform-Formate.
- 6. Asset Export für Fortgeschrittene
- Export for Screens: Gleichzeitiger Export von Artboards und Assets in PNG, SVG und WebP.
- Skalierung: Automatisierte Erstellung von 1x, 2x und 3x Assets für Retina-Displays.
- Batch-Export: Ganze Icon-Sets mit einem Klick in separate Dateien speichern.
- 7. Illustrator + Figma: Best Practices
- Die Arbeitsteilung: Illustrator für Konstruktion (Pfad-Operationen), Figma für Layout.
- Copy & Paste: Reibungsloser Transfer von Vektoren (SVG-Format) zwischen den Tools.
- Update-Workflow: Wann Assets in Illustrator korrigiert werden müssen.
- 8. Creative Cloud Libraries
- Zusammenarbeit: Teamweite Verwaltung von Icons, Farben und Zeichenstilen.
- Cloud-Sync: Zugriff auf die neuesten Assets direkt in Illustrator, Photoshop und InDesign.
- Versionskontrolle: Sicherstellen, dass alle Designer dieselben Komponenten nutzen.
- 9. Typografie für das Web in Illustrator
- Web-Fonts: Nutzung von Adobe Fonts für UI-Mockups.
- Outline vs. Live-Text: Wann Textpfade umgewandelt werden müssen (für Logos/Icons).
- Hierarchie: Gestaltung von Type-Scales für konsistente Headings und Body-Texte.
- 10. Farbmanagement für digitale Medien
- Global Colors: Schnelles Ändern der Markenfarbe über das gesamte Dokument.
- Barrierefreiheit: Kontrastprüfung von Farbkombinationen direkt im Workflow.
- Hintergrund-Varianten: Icons für Light- und Dark-Mode vorbereiten.
- 11. SVG-Techniken für Entwickler (SVGO)
- Code-Cleaning: Nutzung von Tools wie SVGO zur Entfernung von Adobe-Metadaten.
- Inline-SVG: Einbindung von Grafiken direkt im HTML-Code.
- Animation-Readiness: Vorbereitung von Pfaden für Bibliotheken wie Lottie oder GSAP.
- 12. Praxis-Workshop: „The Digital Brand Kit“
- Icon-Task: Entwurf eines 4-teiligen Icon-Sets (Home, User, Settings, Search) auf einem Grid.
- Hero-Task: Erstellung einer Landingpage-Illustration inklusive Export für verschiedene Viewports.
- Figma-Task: Transfer der Assets in ein Figma-Projekt und Simulation eines Hand-overs an Entwickler.
Zielgruppe & Vorkenntnisse
- UI/UX-Designer: Zur Vertiefung ihrer Fähigkeiten im Bereich Visual Design.
- Webdesigner & Frontend-Entwickler: Zur Optimierung der Asset-Produktion.
- Grafikdesigner: Zum Umstieg von Print-Design auf digitale Produktentwicklung.
- Marketing-Spezialisten: Zur Erstellung eigener Infografiken und Hero-Images.
Ihre Schulung
In Präsenz | Online |
|---|---|
| Lernmethode | |
Ausgewogene Mischung aus Theorie und Praxis | Wie auch bei unseren Präsenz-Seminaren: Ausgewogene Mischung aus Theorie und praktischen Übungen. Trainer durchgehend präsent. |
| Unterlagen | |
Seminarunterlagen oder Fachbuch inklusive. Das Fachbuch wählt der Trainer passend zum Seminar aus - Ihren individuellen Buch-Wunsch berücksichtigen wir auf Nachfrage gerne. | Seminarunterlagen oder Fachbuch inklusive (via DHL). Das Fachbuch wählt der Trainer passend zum Seminar aus - Ihren individuellen Buch-Wunsch berücksichtigen wir auf Nachfrage gerne. |
| Arbeitsplatz | |
|
|
| Lernumgebung | |
Neu aufgesetzte Remote-Systeme für jeden Kurs in Abstimmung mit dem Seminarleiter, sodass Sie über ein perfektes Setup für die Durchführung aller praktischen Übungen verfügen. | |
| Arbeitsmaterialien | |
Din A4 Block, Notizblock, Kugelschreiber, USB-Stick, Textmarker, Post-its | |
| Teilnahmezertifikat | |
Nach Abschluss des Seminars erhalten Sie das Teilnahmezertifikat inkl. Inhaltsverzeichnis per E-Mail als PDF. | |
Organisation
In Präsenz | Online | |
|---|---|---|
| Teilnehmendenzahl | ||
min. 1, max. 8 Personen | ||
| Garantierte Durchführung * | ||
Ab 1 Teilnehmenden | ||
| Schulungszeiten | ||
| ||
| Ort der Schulung | ||
 GFU SchulungszentrumAm Grauen Stein 27 51105 Köln-Deutz oder online im Virtual Classroom oder europaweit bei Ihnen als Inhouse-Schulung Um ein optimales Raumklima zu gewährleisten, haben wir das Schulungszentrum mit 17 hochmodernen Trotec TAC V+ Luftreinigern ausgestattet. Diese innovative Filtertechnologie (H14 zertifiziert nach DIN EN1822) sorgt dafür, dass die Raumluft mehrfach pro Stunde umgewälzt wird und Schadstoffe zu 99.995% im HEPA-Filter abgeschieden und infektiöse Aerosole abgetötet werden. Zusätzlich sind alle Räume mit CO2-Ampeln ausgestattet, um jederzeit eine hervorragende Luftqualität sicherzustellen. | ||
| Räumlichkeiten | ||
Helle und modern ausgestattete Räume mit perfekter Infrastruktur | Bequem aus dem Homeoffice von überall | |
| All-Inclusive | ||
Frühstück, Snacks und Getränke ganztägig, Mittagessen im eigenen Restaurant, täglich 6 Menüs, auch vegetarisch | Eine Auswahl unserer Frühstücks-Snacks und Nervennahrungs-Highlights senden wir Ihnen mit den Seminarunterlagen via DHL zu. | |
| Barrierefreiheit | ||
Das GFU-Schulungszentrum (Am Grauen Stein 27) ist barrierefrei | - | |
Kostenfreie Services
In Präsenz | Online |
|---|---|
|
|
Buchungsmöglichkeiten
Online oder in Präsenz teilnehmen
Sie können sowohl Online als auch in Präsenz am Seminar teilnehmen. Klicken Sie bei Ihrer Buchung oder Anfrage einfach die entsprechende Option an.
- Lernumgebung in der Cloud
- Inhalte werden auf Wunsch an die Anforderungen Ihres Teams angepasst.
- Lernumgebung in der Cloud
- 1 Teilnehmender = Fokus aufs Fachliche und maximaler Raum für individuelle Fragen.
Was bedeutet Offene Schulung und Inhouse Schulung?
Bei einer offenen Schulung stehen Ort und Termin vorab fest. Jeder Interessent kann eine offene Schulung buchen, daher treffen Teilnehmer aus verschiedenen Unternehmen aufeinander.
Inhouse Schulungen können auf Ihren individuellen Schulungsbedarf zugeschnitten werden. Sie bestimmen den Teilnehmerkreis, Termin und Schulungsort.
Ist eine Inhouse Schulung die richtige Wahl?
Bei einer Inhouse Schulung gehen wir auf die individuellen Bedürfnisse Ihres Unternehmens ein und decken den Schulungsbedarf direkt bei Ihnen im Unternehmen ab.
Das spart Zeit und Geld und sorgt für einen schnellen Wissenstransfer Ihrer Mitarbeiter.
Wer kümmert sich um die Technik bei Inhouse Schulungen?
Eine komplette Lernumgebung in der Cloud mit Remote Zugriff ist für uns selbstverständlich. Sie müssen sich um nichts kümmern. Lediglich ein funktionierender PC oder Notebook mit Internetanschluss sollte für jeden Teilnehmer am Schulungstag bereit stehen.
Vorteile einer Inhouse Schulung
- Kompetente Seminarberatung
- Dozenten aus der Praxis
- Auf Ihre Bedürfnisse zugeschnittener individueller Lernstoff
- Sie können den Termin flexibel gestalten, so wie es für Sie am besten passt
- Unsere Inhouse Schulungen können Europaweit durchgeführt werden
- Der Fokus liegt auf Ihrem Schulungsbedarf, somit schonen Sie Ihr Budget
- Wissenslücken Ihrer Mitarbeitet werden schnell geschlossen