Photoshop is often used to design websites, but there are many reasons that make its vector-based cousin, Adobe Illustrator, a tool of choice. In this session, we’ll cover the differences between working with Photoshop and Illustrator. We’ll explain what vector art is and the advantages of a vector-first mindset when it comes to the ability to iterate quickly, provide multiple design options, design responsively and to keep visuals consistent across a variety of media. We’ll also cover some basic how-to items.

1. ILLUSTRATOR
DESIGNING WITH

2. VECTOR ART?
WHAT IS

3. Vector art uses math instead of pixels.
Shapes are made up of points, lines and curves.

5. It can be scaled up
indefinitely without
any loss in quality.

6. Great for responsive design
and for Retina displays.

7. COMMON FILE FORMATS
AI
EPS
PDF
SVG

8. PHOTOSHOP VS. ILLUSTRATOR

12. File sizes are typically smaller.
Only a few points need to be stored
vs. a whole lot of pixels.

13. SOFTWARE

14. ADOBE ILLUSTRATOR
▸ First released for the Mac in 1987
▸ Now available for Mac and Windows as a standalone
application or as part of Adobe’s Creative Cloud
▸ http://www.adobe.com/illustrator

15. OTHERS
▸ CorelDRAW
http://www.coreldraw.com/us/
▸ Sketch by Bohemian Coding
https://www.sketchapp.com

16. WHY USE IT?

17. MULTIPLE ARTBOARDS

19. Great for developing
multiple design options

20. Great for developing
a bunch of ideas quickly

21. Great for responsive design
You can work with your desktop, tablet and
mobile versions all in one file.

24. VECTOR FIRST

25. The ability to scale items quickly and
easily makes vector art a great tool
use when taking a mobile-first
approach or when considering
responsive design in general.

26. (Resizing pixel-based elements
is time-consuming.)

27. CONSISTENCY

29. PLAYS WELL WITH RASTER FILES
▸ You can include links to your raster images
(including layered PSD files).
▸ When you update an image that is linked,
it will update in Illustrator as well.

30. It’s nice to be able to use the same tool that I use
for other media and use it for the web as well.
It helps keep everything consistent, and…
I could use it in my sleep.

31. HOW TO

32. TYPOGRAPHY

33. Character and Paragraph Styles

35. Area Type Tool

37. Type on a Path

39. WORKS WITH YOUR FONTS
▸ Typekit
sync to your computer as part of Adobe’s Creative Cloud
https://typekit.com
▸ Google Fonts
sync to your computer with the SkyFonts app https://skyfonts.com
▸ Icon fonts - Font Awesome, Genericons, etc.
download font and view in the Glyphs panel

40. How to use icon fonts
https://github.com/FortAwesome/Font-Awesome/blob/master/
fonts/FontAwesome.otf?raw=true

41. TURN AN OBJECT FROM THE REAL
WORLD INTO VECTOR ART

43. Trace It Manually

45. Use Illustrator’s Image Trace Tool

47. Use Adobe Capture on Your iPhone

55. USE FOR FULL-BLOWN DESIGNS
AND/OR WIREFRAMES

56. Wireframe kits

57. http://theycallmecrowe.com/advice/crowe-
wireframekit.html

58. Select and replace colors

59. Symbols

60. LIBRARIES

61. Graphic styles and colors

62. Adobe Color
https://color.adobe.com/

64. It’s also included in the Adobe
Capture app for iOS.

67. MASKS

69. Lesley Baumann
lesley@xandradesign.com
www.xandradesign.com
@lesleyalexandra