Photoshop Website Design Tutorial

thumb_airmail

This is a 4th chapter of “Step-by-Step Creating a Website Guide”. I will share a tutorial on how to design a website using Adobe Photoshop. Of course you can use your favourite graphic tool. Also check out free trial version Adobe Photoshop CS6. It’s a bit long article, but I hope it’s easy to understand!

Step-by-Step Creating a Website Guide: Chapter 4

  • Goal: Creating an actual size website design
  • Things you need: Adobe Photoshop
  • Knowledge Requirement: Knows how to use basic Photoshop tools

Table of Contents

  1. Planning a Perfect Website Content
  2. Visualize Website Structure – Sitemap
  3. How to Create a Website Wireframe
  4. Photoshop Website Design Tutorial ←We are here!
  5. Slicing Images for Your Website with Photoshop
  6. Guide to HTML Semantic Markup
  7. Basic Process to Apply CSS to Your Website
  8. Let’s Publish Your Website to the World!

* It’s used Photoshop CS6
** I’m a Mac user so all shortcut keys are for Mac. Please use Ctrl key instead of ⌘ if you are using Windows OS.

1. Creating New Document

1200x1200px

1-1. Create a new 1200 x 1200px document from File > New.

Create a guide

1-2. A width of contents area is 960px. So create new guides in position of 120px and 1080px from View > New Guide. We’ll put all contents between these lines.

2. Background Creation

Background Creation
Set foreground colour #ebe6d3 and fill background from Edit > Fill or Alt + Delete.

3. Create Stripe Pattern

Create air mail stripe

3-1. Let’s create an air mail stripe. Create a new layer and draw 35 x 15px rectangle.

change angle -30°

3-2. Choose free transform tool (⌘ + T) and change angle horizontally -30°.

move 43px

3-3. Press ⌘ + J and duplicate layer. Move duplicated layer to 43px right.

Add layer style

3-4. Select duplicated layer and click on an add layer style icon below. Choose colour overlay and apply #d95483.

Pattern

3-5. Select 2 layers and right click or press ⌘ + E to merge layers. Select 2 rectangles and define pattern from Edit > Define pattern.

Stripe
3-6. Create a new layer and name it “Pattern”. Select 15px from top using rectangular marquee tool and add pattern that you created from Edit > Fill (Shift + F5).

4. Create a Logo

Draw rectangle

4-1. Let’s create a stamp like title logo. Create a new layer and name it “stamp white”. Select a rectangle tool and set tool mode: Pixel, Foreground colour: white. Click on a canvas and draw a 140 x 80px rectangle.

stamp

4-2. Select an eraser tool. Set brush size: 8px, Spacing: 150% and erase edge.

shadow

4-3. Add drop shadow layer style. Set opacity: 35%, distance: 1px, size: 2 px.

rectangle

4-4. Create a new layer “stamp pink”. Set foreground colour: #d95483 and a draw 120x60px rectangle.

title logo

4-5. Type a title logo.

circle

4-6. Create a new layer and draw a circle and 2 lines. Colour: #666666, size: 4px.

text

4-7. Type text using text tool.

group

4-8. Put layers of 4-6 and 4-7 in a new group. Select 2 layers and click on “Add a new group” icon or press ⌘ + G.

angle

4-9. Change angle to 15° using a free transform tool.

mask

4-10. Change group opacity to 50% and add layer mask. Choose an eraser tool and erase a bit using splatter brush.

logo
Finished to create a logo!

5. Grobal Navigation

Navigation
Select a text tool and set colour: #666666, font size: 20px and type grobal navigation link texts.

6. Hero Image

line

960x400px image

6-1. Insert a 960x400px image and add 5px white stroke.

rectangle

6-2. Create a new layer “shadow” below a hero image and draw #666666 rectangle.

warp tool

6-3. Select Edit > Transform > Warp. Drag a center bottom of rectangle from bottom to top a bit.

ガウシアンぼかし

6-4. Make it blur from Filter > Blur > Gaussian Blur. Set radius 5px. Change layer opacity to 50%.

above the fold
6-5. Type a tagline and finished area of above the fold!

Point! Clean Up Layers!

Clean Up Layers
We created more than 10 layers. A layer panel will be messed up if you don’t clean up now. Let’s put them in a new folder or change order to organize them.

7. Thumbnail Images

new guide

7-1. Create new guides in position of 790px and 820px. Thumbnail images will be in a left side, About me text is in a right side.

heading

7-2. Create a newlayer “pink line” and draw a 5px, #d95483 line. Type heading text. Font size is 20px and colour #666666.

place images

7-3. Place 210x140px images. Spacing between images should be 20px. Create guides before placing images if you need.

5px line

7-4. Add 5px white border which is the same thing as a main image.

8. About Me text

heading

8-1. In the same way to 7-1, draw a line and type a heading text.

text tool

8−2. Type a paragraph and done!

9. Footer Area

draw a #6699cc rectangle

9-1. Create a new layer and draw a #6699cc rectangle.

white line

9-2. Select a rectangle tool and set tool mode: shape, fill: none, stroke: 1px – white and draw white line.

airmail

9-3. Type text and done!

finish

And we are finished! I’ll slice this image to convert to HTML file next chapter!

» Next chapter: Slicing Images for Your Website with Photoshop

Share

Comments

  • Roman Maximyuk

    “Make every page as a landing page. People use search engines when looking for information. So don’t assume they enter your website from the homepage”.. There is a link to the next chapter, but no link to the previous chapter? That’s a bit sad to see on a “How to design a good website” website.