How to Create Web Designs in Photoshop - PSD Templates

A guide on creating Web Designs in Photoshop which is a great tool for create web designs, or mockups, for sending to a client for approval.

It's a good idea to have a colour scheme in mind when starting your design. At the most basic level have a "brand" colour in mind and use a colour scheme tool to generate various tints, and shades and get some complimentary colours.

First things first, create a new document and we are going to create a document for the web. In the new document dialogue, make sure that the colour selection is in RGB and create a document 1400 pixels by around 1800 pixels and at 72 dpi.

Most web designs these days are based on a grid system. Typically this is a variation of a 960 grid system, although others exist. This tutorial is not specific to coding, or responsive layouts they are covered later. This tutorial focuses on the design principles.

To get started, we are going to create a grid overlay which will help when aligning our design elements. This is done from the Edit menu, then Preferences, then Units and Rulers. If your units are not set to pixels, change them now. Now go to View then Rulers. Now you can see rulers along the top and sides of the document. Next, in the View menu, ensure that Show Guides is turned on.

Creating the Grid and Guides

Now to create the grid itself. This is done by adding vertical guides to the page using the guide tool. Given that our document is 1400 pixels wide and we are going to use the grid 960 system of 12 columns, guides need to be set at 220 pixels, then 240 pixels (20-pixel gutter), 298 (58 pixels for the first column), then at 318 pixels (another 20-pixel gutter) and so on. I'm not going to go into the maths and calculations here. There is a PSD template at the end of this tutorial that you can download which contains the grid, layout elements and contents from this tutorial.

Still, with the guide creator, I'm going to add in the header and footer lines, this time horizontal guides. I would like a header 100 pixels tall and a copyright message in the footer 80 pixels tall, so I'm going to drag these in place at the top and bottom of the page.

The image left shows the full page, where I've also created guides for the footer links at 280 pixels and an image carousel in the top at 420 pixels tall. Everything else can be divided up equally. Vertical alignment and equality are important in websites to create a balance.

When using Photoshop it is important to keep everything on separate layers. This is to allow you to move individual items around the page without moving every single element. It also makes redesigning easier, and if two objects are close together they are not merged.

Header and Footer Web Designs in Photoshop

Now add some colours and objects to the template. The first thing to add is a logo to the top left of the header. For this example, I'm just going to create a simple text logo. Having read my logo design tutorial you may want to create a fancy logo to include here.

Using the text tool, add a website title. In this example, I'm using Azulia Designs as that is the name of my company. Note- When using the text tool you do not have to create a new layer, it will do it automatically. Using the layer styles tool (Layer > Layer Style menu option) click on presets and I've selected a blue style. This will be my basic logo.

Next, add various menu items using the text tool, but you don't need to style these, just bear in mind that you need to use a web-safe font or read the typography tutorial if you haven't already done so about fonts on the web. Be sure to turn the text colour of the first menu item to your brand colour. This will act as an indicator of the active page. I'm also going to add a little line above the link at the very top to serve as an additional indicator. Both of these highlights help improve website usability and user experience. The line can be added by creating a new layer called "Active Menu" and making a selection of the width of the column, 6 pixels high from the top of the page.

Now, create a new layer and call it "Footer" using the marquee tool, drag out a selection from the top guide of the footer to the guide marking the copyright bar, full page width. You will notice that Photoshop will want to "snap" to the guidelines. This helps keep everything aligned. Using the fill tool, fill in the footer bar with a dark grey colour, say RGB 54,54,54.

Next, create another new layer called "Copyright" and do the same at the bottom of the page in the last 80 pixels and colour it in using RGB colour 40,40,40.

Adding in the footer content itself, I have created a copy of the header logo to place in the footer and added some about text underneath it with a link which will navigate to another page.

The centre box contains a list of recent blog posts. Each of these is separated by an embossed line. This effect is created by creating two lines - one darker than the other.

The final box contains a Flickr feed, showing size icons representing recent photos.

Creating the Carousel

The carousel is a web design element which displays information (and usually an image) in slides. Each slide is displayed in turn with a transition effect. Carousels can also be called sliders.

For clarity in the example, I'm not going to add an image to the carousel, but you can add one to yours if you would like to do so.

Next, add a layer which we will call Carousel. Using the marquee tool again, drag out a selection from the guide under the header to the guide marking the lower part of the carousel, full page width. Using the fill tool, fill in a light grey colour for the carousel background.

Next, using the transform tool (Ctrl+T) expand the width of the selection about 10 pixels to the left and to the right. This allows the next step to look better. Keeping the selection in place, we are going to add an inner shadow to the carousel. This is done from the layer styles again. In the layer style dialogue, select on inner shadow and adjust the size until you get a nice subtle effect inside the selection. The reason that the selection was expanded was to ensure that the inner shadow fills the entire width, but not the side edges. Had the selection not been extended the sides would also be shaded.

The button was created using the rounded rectangle tool, dragged out to 60 pixels tall by three columns wide. I applied a layer style to the button having a stroke of 1px in a darker colour and a gradient overlay white to black set to 8% opacity.

The icon was created using Font Awesome , you can download the font and use it within Photoshop. I selected a darker shade for the icon and white for the button text.

Services Section

The services section is merely an icon, created as per the button icon, title and a short teaser text. This is repeated three times. For a mock-up, you can create one service and then copy and paste it across the page.

Creating the Recent Works Carousel

This element will be another sliding carousel, this time, however, showing four small icons instead of one large image. In terms of creating the design in Photoshop, I've simply inserted four images with consistent width and height, added a copy of the two arrows from the top carousel scaled down and inserted a title heading.

For creating thumbnails of the same size, it is useful to create a new document of the size of the thumbnails. From here you can insert the image to create the thumbnail and use the transform tool to resize and crop to the required size.

Creating Bullet Point List and Blockquote

The bullet-pointed list of reasons why customers should choose us is a simple bullet point list with a Font-Awesome icon replacing the standard circle or dot. These are created from two text blocks, one blue with Font-Awesome as the font, and the other grey with a standard font.

The blockquotes are simply a light grey box with italic fonts used.

Web Designs in Photoshop Finale

And that is a very basic web design created in Photoshop. Attached left is a full-size screenshot of the design, and attached at the end of the page is a PSD for you to download containing this design. You can use this PSD as a basis for your design as the rulers and guides have been set up already for you with 12 columns in a 960-grid layout.