1 / 30

Design A Jersey Using SVGs

Join Andrew Olson, a lead front-end developer, as he presents the process of designing a jersey using SVGs. Learn how to create photo-realistic product configurators with multiple colors, styles, and personalized text. Discover the challenges faced and the approach taken in this informative session.

ltrent
Download Presentation

Design A Jersey Using SVGs

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Design A Jersey Using SVGs PRESENTED BY ANDREW OLSON

  2. Andrew Olson • Front End Developer from the Chicago Suburbs • Working with Drupal since 2008 • Been on the Wilson Sporting Goods project since 2015 • Fun Fact About Me: • Musician + played in a band at Lollapalooza Andrew Olson Lead Front End Developer@ HS2 Solutions

  3. Agenda • Project Goals • Our Approach • Challenges • Q&A

  4. project goals Our Product Configurator had to Be “Photo Realistic.” Demonstrate multiple colors & styles. Allow Users to add custom text & upload logos. Manage Different product types. Multiple product views. Future products & sports.

  5. Project goals General assumptions Notes for use: Tailor for project Design Updates Requested: Need to have a conversation about how we display assumptions and look at other slides for what we include on this slide Source: mathwords.com

  6. Project goals But Wait, There’s More … • 3 styles of pants. • 2 styles of batting gloves. • Helmets (with and without masks). • Protective gear straps. • Basketballs and Basketball Uniforms. • Plus, any product made in the future.

  7. Project goals Would vector artwork suffice?

  8. Our approach Using photography, vector art, and JavaScript, we can create a “Photo Real” product configurator. Notes for use: Update content for your use

  9. Free Drawing on top of photography Exporting svgs Multiply filter Svg cake Vector Art

  10. Our approach: Vector art

  11. Our approach: Vector art

  12. Our approach: Vector art

  13. Our approach: Vector art

  14. Our approach: Vector art Images from photoshopessentials.com

  15. Our approach: Vector art

  16. Our approach: Vector art SVG Cake • Top Layer: Transparent PNG • Middle Layer: SVG Artwork • Bottom Layer: Non-colored Product Image

  17. Update path fill colors Insert text, Numbers, & Logos Move Buttons JavaScript

  18. Our approach: Javascript

  19. Our approach: Javascript

  20. Our approach: Javascript

  21. Our approach: Javascript

  22. Our approach: Javascript

  23. Our approach: Javascript

  24. Our approach: Javascript Custom Text, Numbers, & Logos • <g> Groups inserted on the fly. • Rasterized artwork added to <g> Groups. • Order in the SVG matters.

  25. Our approach: Javascript

  26. Our approach: Javascript Buttons • Move depending on logo placement. • Needed more visibility on darker colors. • Use jQuery to toggle PNGs.

  27. Our approach: Javascript

  28. Our approach Our Process • Photoshoot • Vector Art Production • Visual QA / Feedback Loop • Technical QA / Feedback Loop • Implementation into Product Configurator • In-Browser QA / Feedback Loop

  29. Wrapping up Additional links Wilson Team Shop wilsonteamshop.com Configurator Database configurator-database.com Smashing Magazine Designing A Perfect Responsive Configurator

  30. Questions? ANDREW OLSON Senior Front End Developer HS2 Solutions, Inc. andrew.olson@hs2solutions.comd.o: andrewozone Notes for use: Tailor for project/presentation

More Related