Pixelbasiertes Icondesign
in Adobe Illustrator
mit Vektoren zum Pixelbild
Grundlagenkunde:
Pixel vs. Vektor
Gibt es hier Klärungsbedarf?
Pixel   Vektor
Pixel   Vektor
Pixel   Vektor
Pixel   Vektor
Pixel   Vektor
Die übliche
Vorgehensweise
Einblick in ein Icon aus Photoshop
• Pixelbasiert

• Möglichkeit
  der Vektorebenen

• WYSIWYG bei 100%

• sehr viele Ebenen
Was ist anders
in Adobe Illustrator?
Vorteile und
Nachteile
Photoshop vs. Illustrator
+ pixel-perfekt
+ pixel-perfekt
+ Ebeneffekte
+ pixel-perfekt
+ Ebeneffekte
+ Ebenenmodi
+ pixel-perfekt
 + Ebeneffekte
 + Ebenenmodi
+ Ebenenmasken
+ pixel-perfekt
 + Ebeneffekte
 + Ebenenmodi
+ Ebenenmasken

- nur bedingte
   Verläufe
+ pixel-perfekt
   + Ebeneffekte
   + Ebenenmodi
  + Ebenenmasken

   - nur bedingte
      Verläufe
- keine Verlaufsgitter
+ pixel-perfekt
   + Ebeneffekte
   + Ebenenmodi
  + Ebenenmasken

   - nur bedingte
       Verläufe
- keine Verlaufsgitte...
+ pixel-perfekt
   + Ebeneffekte
   + Ebenenmodi
  + Ebenenmasken

   - nur bedingte
       Verläufe
- keine Verlaufsgitte...
+ pixel-perfekt        + Verlaufswerkzeug
   + Ebeneffekte
   + Ebenenmodi
  + Ebenenmasken

   - nur bedingte
       Verl...
+ pixel-perfekt        + Verlaufswerkzeug
   + Ebeneffekte          + Verlaufsgitter
   + Ebenenmodi
  + Ebenenmasken

   ...
+ pixel-perfekt        + Verlaufswerkzeug
   + Ebeneffekte          + Verlaufsgitter
   + Ebenenmodi             + Skalier...
+ pixel-perfekt        + Verlaufswerkzeug
   + Ebeneffekte          + Verlaufsgitter
   + Ebenenmodi             + Skalier...
+ pixel-perfekt        + Verlaufswerkzeug
   + Ebeneffekte          + Verlaufsgitter
   + Ebenenmodi             + Skalier...
+ pixel-perfekt         + Verlaufswerkzeug
   + Ebeneffekte           + Verlaufsgitter
   + Ebenenmodi              + Skal...
+ pixel-perfekt         + Verlaufswerkzeug
   + Ebeneffekte           + Verlaufsgitter
   + Ebenenmodi              + Skal...
+ pixel-perfekt         + Verlaufswerkzeug
   + Ebeneffekte           + Verlaufsgitter
   + Ebenenmodi              + Skal...
+ pixel-perfekt         + Verlaufswerkzeug
   + Ebeneffekte           + Verlaufsgitter
   + Ebenenmodi              + Skal...
Die richtige
Einstellung
Wo genau muss man klicken?
Fragen und
Antworten
Na Kinder, was wollt Ihr wissen?
Wollt Ihr das
nochmal sehen?

      http://bit.ly/icondcc10
DANKE
SCHÖN!



       Oliver Twardowski

    www.addictedtocoffee.de

          @mywayhome
Pixelbasiertes Icondesign in Adobe Illustrator
Pixelbasiertes Icondesign in Adobe Illustrator
Pixelbasiertes Icondesign in Adobe Illustrator
Pixelbasiertes Icondesign in Adobe Illustrator
Pixelbasiertes Icondesign in Adobe Illustrator
Pixelbasiertes Icondesign in Adobe Illustrator
Pixelbasiertes Icondesign in Adobe Illustrator
Pixelbasiertes Icondesign in Adobe Illustrator
Pixelbasiertes Icondesign in Adobe Illustrator
Pixelbasiertes Icondesign in Adobe Illustrator
Pixelbasiertes Icondesign in Adobe Illustrator
Pixelbasiertes Icondesign in Adobe Illustrator
Pixelbasiertes Icondesign in Adobe Illustrator
Pixelbasiertes Icondesign in Adobe Illustrator
Pixelbasiertes Icondesign in Adobe Illustrator
Pixelbasiertes Icondesign in Adobe Illustrator
Pixelbasiertes Icondesign in Adobe Illustrator
Pixelbasiertes Icondesign in Adobe Illustrator
Nächste SlideShare
Wird geladen in …5
×

Pixelbasiertes Icondesign in Adobe Illustrator

1.731 Aufrufe

Veröffentlicht am

Keynote zur Session auf dem DesignCamp Cologne 2010

Veröffentlicht in: Design, Business, Technologie
  • Als Erste(r) kommentieren

Pixelbasiertes Icondesign in Adobe Illustrator

  1. 1. Pixelbasiertes Icondesign in Adobe Illustrator mit Vektoren zum Pixelbild
  2. 2. Grundlagenkunde: Pixel vs. Vektor Gibt es hier Klärungsbedarf?
  3. 3. Pixel Vektor
  4. 4. Pixel Vektor
  5. 5. Pixel Vektor
  6. 6. Pixel Vektor
  7. 7. Pixel Vektor
  8. 8. Die übliche Vorgehensweise Einblick in ein Icon aus Photoshop
  9. 9. • Pixelbasiert • Möglichkeit der Vektorebenen • WYSIWYG bei 100% • sehr viele Ebenen
  10. 10. Was ist anders in Adobe Illustrator?
  11. 11. Vorteile und Nachteile Photoshop vs. Illustrator
  12. 12. + pixel-perfekt
  13. 13. + pixel-perfekt + Ebeneffekte
  14. 14. + pixel-perfekt + Ebeneffekte + Ebenenmodi
  15. 15. + pixel-perfekt + Ebeneffekte + Ebenenmodi + Ebenenmasken
  16. 16. + pixel-perfekt + Ebeneffekte + Ebenenmodi + Ebenenmasken - nur bedingte Verläufe
  17. 17. + pixel-perfekt + Ebeneffekte + Ebenenmodi + Ebenenmasken - nur bedingte Verläufe - keine Verlaufsgitter
  18. 18. + pixel-perfekt + Ebeneffekte + Ebenenmodi + Ebenenmasken - nur bedingte Verläufe - keine Verlaufsgitter - keine nachträgliche Skalierung
  19. 19. + pixel-perfekt + Ebeneffekte + Ebenenmodi + Ebenenmasken - nur bedingte Verläufe - keine Verlaufsgitter - keine nachträgliche Skalierung - Vektormasken
  20. 20. + pixel-perfekt + Verlaufswerkzeug + Ebeneffekte + Ebenenmodi + Ebenenmasken - nur bedingte Verläufe - keine Verlaufsgitter - keine nachträgliche Skalierung - Vektormasken
  21. 21. + pixel-perfekt + Verlaufswerkzeug + Ebeneffekte + Verlaufsgitter + Ebenenmodi + Ebenenmasken - nur bedingte Verläufe - keine Verlaufsgitter - keine nachträgliche Skalierung - Vektormasken
  22. 22. + pixel-perfekt + Verlaufswerkzeug + Ebeneffekte + Verlaufsgitter + Ebenenmodi + Skalierung + Ebenenmasken - nur bedingte Verläufe - keine Verlaufsgitter - keine nachträgliche Skalierung - Vektormasken
  23. 23. + pixel-perfekt + Verlaufswerkzeug + Ebeneffekte + Verlaufsgitter + Ebenenmodi + Skalierung + Ebenenmasken + Geschwindigkeit - nur bedingte Verläufe - keine Verlaufsgitter - keine nachträgliche Skalierung - Vektormasken
  24. 24. + pixel-perfekt + Verlaufswerkzeug + Ebeneffekte + Verlaufsgitter + Ebenenmodi + Skalierung + Ebenenmasken + Geschwindigkeit + Anti-Aliasing - nur bedingte Verläufe - keine Verlaufsgitter - keine nachträgliche Skalierung - Vektormasken
  25. 25. + pixel-perfekt + Verlaufswerkzeug + Ebeneffekte + Verlaufsgitter + Ebenenmodi + Skalierung + Ebenenmasken + Geschwindigkeit + Anti-Aliasing - nur bedingte Verläufe - keine Ebeneneffekte - keine Verlaufsgitter - keine nachträgliche Skalierung - Vektormasken
  26. 26. + pixel-perfekt + Verlaufswerkzeug + Ebeneffekte + Verlaufsgitter + Ebenenmodi + Skalierung + Ebenenmasken + Geschwindigkeit + Anti-Aliasing - nur bedingte Verläufe - keine Ebeneneffekte - keine Verlaufsgitter - Arbeiten mit Ebenen - keine nachträgliche Skalierung - Vektormasken
  27. 27. + pixel-perfekt + Verlaufswerkzeug + Ebeneffekte + Verlaufsgitter + Ebenenmodi + Skalierung + Ebenenmasken + Geschwindigkeit + Anti-Aliasing - nur bedingte Verläufe - keine Ebeneneffekte - keine Verlaufsgitter - Arbeiten mit Ebenen - keine nachträgliche - schnell Skalierung unübersichtlich - Vektormasken
  28. 28. + pixel-perfekt + Verlaufswerkzeug + Ebeneffekte + Verlaufsgitter + Ebenenmodi + Skalierung + Ebenenmasken + Geschwindigkeit + Anti-Aliasing - nur bedingte Verläufe - keine Ebeneneffekte - keine Verlaufsgitter - Arbeiten mit Ebenen - keine nachträgliche - schnell Skalierung unübersichtlich - Vektormasken - „Masken“
  29. 29. Die richtige Einstellung Wo genau muss man klicken?
  30. 30. Fragen und Antworten Na Kinder, was wollt Ihr wissen?
  31. 31. Wollt Ihr das nochmal sehen? http://bit.ly/icondcc10
  32. 32. DANKE SCHÖN! Oliver Twardowski www.addictedtocoffee.de @mywayhome

×