*How Designers Prep Assets for Web Developers (Photoshop & Illustrator Workflow)
In our last video, we used InDesign to organize print layouts. Today, we’re looking at how graphic designers use Photoshop and Illustrator to create, prep, and export assets for the web! While web design introduces movement and dynamic layouts, the core design principles—and the tools we use—remain the same.
💡 In this demo, you’ll see how industry-standard tools prepare PNGs, SVGs, layer masks, and sticker effects to integrate into a site.
————————–
*Follow along*
Zip file: https://designertofullstack.com/wp-content/uploads/2026/08/bring-it-all-together-web-lesson.zip
Download these 3 Stock Assets:
1) New mouse cursor (switching from arrow to Hot Sauce bottle) – Vector File
https://www.vecteezy.com/vector-art/28660359-illustration-vector-of-chili-sauce-in-flat-design
2) Background Image from Pexels:
https://www.pexels.com/photo/cozy-asian-restaurant-interior-with-warm-lighting-33357444/
3) Noodles:
https://www.pexels.com/photo/delicious-ramen-bowl-with-egg-and-narutomaki-31393444/
Read details in accompanying blog post:
Bringing Form & Space to the Web: Prepping Assets in Photoshop & Illustrator
___________________
*What We Cover*
• File Linking: How web folders compare to InDesign (.indd) links
• Photoshop Prep: Layer masks, non-destructive editing, and transparent PNGs
• Design Meets Code: How saved images interact with live CSS overlays
• Illustrator Vectors: Cleaning vector artwork and exporting SVGs for web elements
• Fixed vs. Dynamic: Static print sizes compared to responsive web spaces
*Resources & Licensing*
• Photos: Pexels (Creative Commons License)
• Vectors: Vecteezy (Attribution: Danier Pandu)
*Timestamps*
0:00 – Prepping Assets for Web vs. Print
0:51 – File & Asset Linking Basics
1:50 – Image Licensing & Stock Assets
3:08 – Photoshop: Layer Masks & Sticker Effects
9:52 – Exporting Transparent PNGs
11:15 – How CSS Interacts with Your Design Assets
13:42 – Illustrator: Prepping & Exporting SVG Vectors
16:58 – Custom Cursors & Vector Tweaks
17:51 – Static Layouts vs. Responsive Web Spaces
_____________________________________________________________
*JOIN MY EMAIL LIST*
Love quick, helpful tutorials? You’ll love the emails too. 💌
*ABOUT ME*
Hello, world. I’m *Kelly Barkhurst* —an experienced Mac-based full-stack designer, educator, and entrepreneur passionately blending artistic vision and creativity with deep technical expertise.
With a BFA and MFA in Graphic Design and a certificate in Full-Stack Web Development, I’m uniquely positioned to work at this intersection of design and tech. My driving force is creating meaningful solutions and helping clients and students do the same.
*What’s Kelly’s superpower?* It’s using design thinking to strategically plan the BIG picture, then diving deep into the technical “weeds” to bring that vision to life—through beautiful visual design, compelling writing, or well-crafted, functional code.
*What brought you JOY today? *
👇 Share in the comments below
*SOCIALS*
https://twitter.com/@designer2fstack
https://www.facebook.com/designertofullstack
https://www.youtube.com/@UCWk0aZ-yFzCQX5bMLaISrog