Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Jessica Hische — Sketch to Screen (SmashingConf NYC 2014)

Jessica Hische — Sketch to Screen (SmashingConf NYC 2014)

In this talk, Jessica shared her design process, from initial sketch to polished vector art, explaining the tools, techniques and little fine rules of thumbs that she uses a lot when working on design projects. And Jessica was wearing Zeldman’s suit as well. No kidding.

https://twitter.com/marcthiele/status/479255580000137216

Vitaly Friedman

June 18, 2014
Tweet

More Decks by Vitaly Friedman

Other Decks in Design

Transcript

  1. Jessica Hische
    Sketch to Screen

    View Slide

  2. Lettering & Type Design

    View Slide

  3. Lettering & Type Design
    Custom one-off artwork
    Letterform-based systems

    View Slide

  4. “Scanner”
    Dux Pencil Sharpener
    Brush
    Ballpoint
    Pencil
    Pencil Extender
    Best Pencil Ever.
    Small Ruler
    Extra Eraser
    Pencil Case
    + Scanner Pro App

    View Slide

  5. Sketchbook 8 by 10 inches or larger

    View Slide

  6. Grid Paper / Lined Paper

    View Slide

  7. Hardware:
    Macbook Pro
    Cinema Display
    Wacom Intuos Medium Tablet*
    iPhone (“Scanner”)
    Laser Printer (1200dpi or higher)
    !
    !
    !
    I prefer a mouse / trackpad for vector
    drawing but my batteries are always
    dead so I’ve been using a Wacom.
    !
    Software:
    Adobe Illustrator
    Robofont*
    or Glyphs App
    or Fontlab Studio
    Scanner Pro (iPhone App)
    !
    !
    Robofont is my program of choice, but
    it’s quite expensive. Glyphs is a great
    less expensive option. Fontlab was the
    industry standard for a long time but
    most type designers are abandoning it.
    * *

    View Slide

  8. 1. Researching
    2. Brainstorming
    3. Thumbnail Sketching
    4. Sketching
    5. Vector Drawing
    reading + visual inspiration searching
    creating word association lists
    exploring lockup options
    first lightly, then refining
    from scratch using the pen tool
    Process

    View Slide

  9. 1. Researching
    2. Brainstorming
    3. Thumbnail Sketching
    4. Sketching
    5. Vector Drawing
    reading + visual inspiration searching
    Process

    View Slide

  10. View Slide

  11. 1. Researching
    2. Brainstorming
    3. Thumbnail Sketching
    4. Sketching
    5. Vector Drawing
    creating word association lists
    Process

    View Slide

  12. 1. Researching
    2. Brainstorming
    3. Thumbnail Sketching
    4. Sketching
    5. Vector Drawing
    exploring lockup options
    Process

    View Slide

  13. 1. Researching
    2. Brainstorming
    3. Thumbnail Sketching
    4. Sketching
    5. Vector Drawing
    first lightly, then refining
    Process

    View Slide

  14. View Slide

  15. 1. Researching
    2. Brainstorming
    3. Thumbnail Sketching
    4. Sketching
    5. Vector Drawing from scratch using the pen tool
    Process

    View Slide

  16. View Slide

  17. 1. Researching
    2. Brainstorming
    3. Thumbnail Sketching
    4. Sketching
    5. Vector Drawing
    reading + visual inspiration searching
    creating word association lists
    exploring lockup options
    first lightly, then refining
    from scratch using the pen tool
    Process

    View Slide

  18. View Slide

  19. View Slide

  20. View Slide

  21. Substance & Style
    in all you make
    Strive for

    View Slide

  22. Daily Drop Cap

    View Slide

  23. View Slide

  24. View Slide

  25. View Slide

  26. View Slide

  27. View Slide

  28. View Slide

  29. View Slide

  30. View Slide

  31. View Slide

  32. View Slide

  33. View Slide

  34. View Slide

  35. View Slide

  36. View Slide

  37. View Slide

  38. CLIENT: Masterfoods USA
    PRODUCT: Dove Singles Full Up Print - Headline 1 Std
    Size
    JOB#: P25017
    SPACE: Full Page 4/C
    BLEED: 8.25” x 11.25”
    TRIM: 7.75” x 10.5”
    SAFETY: 6.875” x 9.75”
    This advertisement was prepared by
    BBDO New York
    Fonts
    Helvetica Neue (45 Light, Regular)
    Graphic Name Color Space Eff. Res.
    Filename: P25017_MAR_DOC_V6.indd
    Proof #: 6 Path: Studio:Volumes:Studio:MECHANIC...
    0HFKDQLFDOV3B0$5B'2&B9LQGG࠙
    Operators: Santoro, Jonathan / Casanova, Joe
    Ink Names
    Cyan
    Magenta
    Created: 3-1-2012 4:37 PM
    Saved: 3-1-2012 4:37 PM
    Printed: 2-27-2012 1:49 PM
    Print Scale: 100%
    ®/TM trademarks ©Mars, Incorporated 2012
    www.facebook.com/dovechocolate
    Now there’s more silky smooth chocolate to
    love with our new DOVE® Chocolate Bar.
    S:6.875”
    S:9.75”
    T:7.75”
    T:10.5”
    B:8.25”
    B:11.25”
    CLIENT: Masterfoods USA
    PRODUCT: Dove Dark Chocolate Headline 2 - “Rich
    Delivious...” Std.
    JOB#: P25665
    This advertisement was prepared by
    BBDO New York
    Filename: P25665_MAR_DOC_V6.indd
    Proof #: 5 Path: Studio:Volumes:Studio:MECHANIC...
    0HFKDQLFDOV3B0$5B'2&B9LQGG࠙
    Operators: Santoro, Jonathan / Casanova, Joe
    Created: 4-20-2012 12:53 PM
    Saved: 4-23-2012 4:55 PM
    Printed: 4-11-2012 3:40 PM
    Print Scale: 100%
    There’s magic in the rich, silky smooth
    taste of DOVE® Dark Chocolate.
    ® / TM trademarks © Mars, Incorporated 2012
    www.facebook.com/dovechocolate
    Add to the magic on Facebook
    S:6.875”
    S:9.75”
    T:7.75”
    T:10.5”
    B:8.25”
    B:11.25”
    CLIENT: Masterfoods USA
    PRODUCT: Dove Dark Chocolate Headline 1 - “The Real
    Magic...” Std.
    This advertisement was prepared by
    BBDO New York
    Filename: P25664_MAR_DOC_V5.indd
    Proof #: 5 Path: Studio:Volumes:Studio:MECHANIC...
    0HFKDQLFDOV3B0$5B'2&B9LQGG࠙
    Operators: Santoro, Jonathan / Casanova, Joe
    Created: 4-23-2012 4:57 PM
    Saved: 4-23-2012 4:57 PM
    Printed: 4-11-2012 3:40 PM
    There’s magic in the rich, silky smooth
    taste of DOVE® Dark Chocolate.
    ® / TM trademarks © Mars, Incorporated 2012
    www.facebook.com/dovechocolate
    Add to the magic on Facebook
    S:6.875”
    S:9.75”
    T:7.75”
    T:10.5”
    B:8.25”
    B:11.25”

    View Slide

  39. View Slide

  40. View Slide

  41. View Slide

  42. View Slide

  43. View Slide

  44. View Slide

  45. View Slide

  46. View Slide

  47. lettering
    type design

    View Slide

  48. View Slide

  49. View Slide

  50. View Slide

  51. View Slide

  52. View Slide

  53. View Slide

  54. View Slide

  55. View Slide

  56. View Slide

  57. View Slide

  58. View Slide

  59. View Slide

  60. View Slide

  61. View Slide

  62. Substance & Style
    in all you make
    Strive for

    View Slide

  63. View Slide

  64. View Slide

  65. View Slide

  66. View Slide

  67. View Slide

  68. View Slide

  69. View Slide

  70. 1. Always assume you’re dehydrated.
    2. Take Vitamin D.
    3. Quit cracking your neck.
    4. Invest in a good toothbrush.
    5. Don’t eat mediocre bread or dessert.
    Practical Tips

    View Slide

  71. Thank You!
    @jessicahische

    View Slide