Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
If you're new to the world of web design or if you mainly consider yourself a "front end" designer, you may be unaware of the actual process that goes on after your design is handed off to a developer. In this movie we'll be exploring the PSD to HTML workflow and seeing exactly what turns our static designs into functioning web sites. For me, this is basically a six-step process. Let's take a look. I have opened here a file called workflow.psd, and I am just going to page-through the various parts that I have outlined in the Layers panel, Part One through Six.
So the first thing we do is we start with a mockup. This could be something as simple as sketching things on a napkin or doing something in Photoshop as a wireframe. In any case, we need to make sure that we have the skeleton in place for our site. This is the bare-bones mockup template that we're going to be using to apply all of the colors, graphics, and styles to later on. The next step would be to aggregate our content. Aggregating content means collecting everything from fonts and images to color swatches, anything we need to make this site happen and look good.
We need to aggregate that in one single location so that we can then load that into our Photoshop document and use it accordingly. Once we have got all of our content aggregated into our Photoshop document, it's time to slice it up. This means chopping our web site into smaller pieces which are then easily exported and used in other applications, like Dreamweaver. Once all of our images are sliced up and ready to go, we need to then export them outside of Photoshop and organize them into a folder structure which we can then use inside of Dreamweaver to create our own web site.
The last thing we need to do is we need to put the code in place. Once we have everything exported out of Photoshop, organized into a folder that we can use inside of Dreamweaver, it's time to put the CSS and HTML standards in place and make this thing a fully functioning web site. If you'd like more information on exactly how to do this type of workflow and go from Photoshop to HTML, be sure you check out this course by Sue Jenkins on Designing Web Sites from Photoshop to Dreamweaver. She takes you step by step through the entire process of converting a static PSD file into a fully functional web page, using Dreamweaver.
It's a great class and I highly recommend it for anyone trying to make the jump from static design into fully functioning web designer/developer.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.