Tim TrottTim TrottA journey of a thousand miles begins with a single step

Creating Web Designs in Photoshop

By , Saturday 2nd April 2016 in Graphic Design Web Design

This tutorial takes you through creating a web design 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, 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 off 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 principals.

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 out 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 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.

Creating Guides in Photoshop
Creating Guides in Photoshop

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.

Colouring in Footer Area
Colouring in Footer Area
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 is 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

Now to add in some colour and objects to the template. The first thing to add in 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 the text tool, add in 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 in 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 the width of the column, 6 pixels high from the top of the page.

Photoshop Web Layout Header
Photoshop Web Layout Header

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 guide lines. 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, 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 a 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.

Footer Block Creation
Footer Block Creation

Creating the Carousel

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

For clarity in 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 in 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.

Carousel block with guides
Carousel block with guides

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 then copy and paste it across the page.

Services section in Photoshop Web Design
Services section in Photoshop Web Design

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 simple inserted four images with consistent width and heigh, added a copy of the two arrows from the top carousel scaled down and inserted a title heading.

Recent Works Block
Recent Works Block

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 for 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, the other grey with standard font.

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

Bullet Point List and Blockquote
Bullet Point List and Blockquote

Finale

My First Photoshop Web Layout
My First Photoshop Web Layout
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 setup already for you with 12 columns in a 960 grid layout.

MyFirstPhotoshopWebLayout.psd.zip
Size: 784,104 bytes
Format: ZIP

 

My website and its content are free to use without the clutter of adverts, tracking cookies, marketing messages or anything else like that. If you enjoyed reading this article, or it helped you in some way, all I ask in return is you leave a comment below or share this page with your friends. Thank you.

About the Author

Tim Trott

Tim is a professional software engineer, designer, photographer and astronomer from the United Kingdom. You can follow him on Twitter to get the latest updates.

Further Reading
Leave a Reply

Your email address will not be published.