Are you thinking about designing your own website or software?

Once you know your way around Photoshop, you can use it to layout and mock up your own website or software – with dazzling results.

So get ready to start using Photoshop tools for your design needs.

Using Photoshop Tools for Design

How does it work? We’ll break it down into five steps.

1. Take a Photoshop Tutorial

There are many steps required to go from sitting down at your desktop and having a final website with a functioning “Click Here” that goes to your product. It’s a more complicated process than can be covered in this post.

But as we said before, once you know your way around the software, Photoshop is a valuable asset to your design. That’s why this first step is essential. So get the Photoshop essentials down first.

Then steps 2-5 will make a lot more sense.

2. Use Guides

The little blue horizontal and vertical lines in Photoshop are called guides. They help you align things on the canvas.

How do you make them?

• Turn on rulers (Command + R on a Mac or Control + R on Windows)
• Click on the ruler then drag the line down on to your page

If you need to later adjust any guides you create, use the Move tool (V on your keyboard) at the top of the toolbar.

3. Create Shapes

You’re already familiar with creating shapes. But in this case, the shapes are important to your layout.

In this case, your images are vector images rather than raster. They can be resized without getting pixelated – which comes in handy when you’re laying things out but you might need to make changes later.

Your best bet is to keep everything in your mockups vector-based. Unless, of course, it’s something that can’t be – such as a photo.

4. Organize

Organizing your website or software design mockups is crucial.

You’re going to be creating a lot of layers, so you need to organize them. Name them and group them accordingly as much as possible.

The more effort you put into this, the easier it’s going to be to navigate your design later. And it’s also going to make future developers happy.

If a developer has to go through and search for elements, you’re going to be left with an unhappy developer. You do NOT want this.

5. Save for Web

Whether you’re a coding expert and planning to be the developer, or you’re hiring a developer, someone is going to need to create web-friendly versions of the images used in your design.

Many styles and effects can be created with CSS and JavaScript, so this doesn’t have to be a big deal.

For example, if you have a persistent logo, you’ll need to save that for web.

There are a bunch of ways to do this, but the easiest way is to copy the layer that holds the graphic. Then paste it into a new document and initiate the save for web process.

You’ll see “Save for Web & Devices…” in the File menu. When you open it, you’ll get a new window that previews what your graphic will look like after it has been compressed.

Generally “PNG 24” or “JPEG – High” are solid choices, but you can fool around with it until you get what you want. Once you click Save you’ll be able to name the file.

And Photoshop automatically adds hyphens in place of spaces so you have a web-safe file name when you’re done.

Once You Have the Basics, You Are Ready to Design

Getting a feel for Photoshop can take some time, but there are many training resources available online.

And with the foundations in place and some practice, using Photoshop tools for your design is a really great resource. Give it a try!