How To Create a Fantastic Website Layout in Photoshop

Photoshop is a professional graphic design application that can handle any size of project you may need to do. This includes creating entire website layouts and web graphics for websites or blogs. Photoshop can be used to create stand-alone web templates and layouts that you can use with simple HTML or import to a Content Management System such as WordPress. Follow this tutorial to create your own fantastic website layout in Adobe Photoshop.

Creating the Frame

It’s important to choose a canvas size for your new website layout that conforms to the content of your website. For example, static websites that want most focus to go be on a central, embedded video area may want a short, wide layout. Websites with lots of text-heavy articles or news posts should go for a longer layout with scrolling.

Open Photoshop and choose your canvas size. If you don’t have your site’s details in place yet, the standard 1000 pixel-wide x 1200 pixels in height format will work. If you need great detail in your layout, such as in the case of intricately detailed background images, then up the resolution to 300 or 600 pixels per inch. For faster-loading websites with average background detail the default of 72 PPI will be fine. If you’ll be using this layout inside a WordPress theme you may want to check with the WordPress hosting plan provider or theme developer to make sure the dimensions are compatible with your theme.

Creating Fantastic Backgrounds

To make this website layout truly fantastic you need a stunning background with depth and graphical effects. Create a new layer the size of your entire canvas titled ‘background.’ Select the area and use the drop and fill color tool to fill it with the color of your choosing. Now turn the opacity down to 10 percent in the layers toolbox. This will create a faint base for your background.

From the filters menu at the top of your work area, select to add a border or bevel to your new background layer. Make sure to bevel a 40 pixel or so perimeter around all four walls of your website. This is a great way to setup your background, and can be complemented with other filters such as ‘Difference Clouds’ or ‘Radial Blur,’ as desired.

Placing Your Logo Section

Now that your canvas is sized and created, create a new header layer with the handy keyboard shortcut Ctrl, Shift, N. Title the layer ‘Logo/Header.’ Using the selection tool, shrink the layer’s height to cover the upper fourth or fifth of your total canvas, spanning the full width. Create a text box on the right margin of this new layer using the Text tool. After selecting your font color and size, type your company name or number in this area. On the left margin of this layer you’ll want to import your logo image.

Navigation Bar

Below your new header layer create a slim, wide layer for your navigation bar. This should be about 90-pixels tall, depending on how many lines of text your buttons will need. You can import navigation bar into this layer later on, or continue to create separate sections for your buttons now using the rectangle selection tool. If creating your own buttons don’t forget to make use of drop shadows and font stylization for a more professional appearance.

Website Content Area

At this point you have a stunning background with logo and company information placed over it. You’ve left room for a nav bar or created one using the rectangle selector and shadowed text. Now you need to leave room for the main body of your website. Starting in after your beveled edge, at around 50 pixels from the left margin create a new layer for the site’s body. Leave 50 pixels on each margin to ensure your text doesn’t become hard to read as the background darkens. Name the new layer ‘Body’ so you can easily find where to place your content later on. When you’re done making the template, you’ll simply paste text and image files into this area to complete your website.

Footer and Contact Information

Create your final layout layer on the bottom fifth of your canvas. This layer too, should span the full width of your site. Import a small version of your logo into this layer using the import image option from the main menu. Create text areas to fill in company information such as email and phone numbers. Don’t forget to place your own copyright information in the footer, to signify your newly created layout is your intellectual property.

Adobe Photoshop is impressively capable of providing you the tools you need to create a fantastic layout for any website. Once you’ve created the basic elements of your layout pattern, all you need to do is upload it to HTML or WordPress hosting server, depending on how you intend to use the layout. Photoshop layouts are easy to modify and have nearly universal compatibility on the web, making them a great choice for your next website-building project.