Photoshop - How To Design A Website In Photoshop

What is Photoshop’s role when designing a website

Daniel Walter Scott || VIDEO: 3 of 49

Download Exercise Files



To be a commercial web designer there is more to make than just a thoughtful website mock-up. There are some final deliverables – tangible files and information that you’ll need to hand over before the coding of your website can begin.

Our aim before the end of this course is to have a folder filled web ready images that follow the correct web naming conventions. You’ll also be producing whats called a CSS sheet that is used by a developer to know what fonts you were using, the heights and widths of say your navigation or footer box.

You’ll learn how to pass on the correct colour codes , the line heights, spacing for your website, so that the lovely person is building your website can get to work fast and not have to make huge guesses from your mock-up.


You need to be a member to view comments.

Join today. Cancel any time.

Sign Up

Photoshop is amazing at many things. In terms of designing websites it’s the most commonly used tool and if you’re looking for employment in the web design world it’s essential.

Now website builds with mock-ups. These are visuals of what you think a website should look like. You do this before actually coding of the website. Why? Because it’s a lot quicker. Making changes in Photoshop is only a matter of selecting the right layer and dragging the page elements around. In code there can be a lot more implications for simply moving things around.

So Photoshop does all the planning and design work. Then your mock-up is built and coded up as a website. If you are interested in doing the development work yourself and you’re unsure of where to get started drop me a line in the discussion forum – I’m really happy to point you in the right direction there.