How to Use Photoshop for Web Design

With today's iterative web design, you might begin by building a wireframe, adding some text to distinguish between sections, and then transferring the file to Photoshop so that you can fill in the visuals. From there, you have an actionable design that you can code into a real website. For many designers, Photoshop plays a major role in the development process, since the powerful software has plenty of tools for creating vectors, editing images, and filling in objects with color. Below, we've outlined how to use Photoshop for web design, so that your finished website looks just as you imagined it. 

Launch Quickly from Illustrator

When designing your initial wireframe, we recommend using Adobe Illustrator, because it's so easy to transfer files between different Adobe software. Once you've created a basic layout, you can export it as a PSD file and then add design details in Photoshop, using the same type layers. You won't have any formatting issues, and you'll already be familiar with the Illustrator toolkit, so it should be a smooth transition. Adobe is the industry standard, so it's worthwhile to learn both programs and keep your design within the same ecosystem.     

Fill Objects with Color   

Once you've imported a wireframe, it's easy to fill text and shapes with color. Just select a foreground color from the Swatches panel, click on the object (or layer) that you want to fill, and then choose "Fill" from the Edit menu. A new dialog box will appear, allowing you to choose the fill color (i.e. foreground color, background color, black, etc), set the opacity, and more. Then, press OK to apply the fill.      

Convert Layers to Smart Objects

Photoshop's Smart Objects feature also streamlines the design process, allowing you to tweak any layer without affecting the original image data. To convert a layer into a Smart Object, select it from the Layers panel, go to the "Layers" top menu, and then choose "Smart Object" > "Convert to Smart Object". Now, if you rotate, stretch, or perform any other non-destructive edits to that layer, the original layer will still be preserved. 

Add Shapes with the Pen Tool

Finally, Photoshop's Pen tool allows designers to create complex shapes on the fly. Whether you need straight lines, curves, or a mixture of the two, the Pen tool can add paths and anchor points in discrete segments. First, position the Pen tool where you'd like to draw an object, click to place the first anchor point, and then click again to create a line segment. From there, you can select a segment and drag on its direction lines (marked with two black dots) to create a curve. Just continue this process until you complete the path, return to the first anchor point, and create a shape!   

  • Was this article helpful?

Can’t find what you’re looking for?