Scribd
Upload
43 views11 pages

PSD Tutorial Linked 27

This document provides a step-by-step tutorial for creating a minimal web design in Photoshop. It instructs the user to set up a document using a 960 pixel grid, create elements like a top bar, content area, portfolio slider, and footer. Styles and interactions like hovers and shadows are added to buttons and links. The conclusion states that the visual design is complete and a follow up tutorial will cover coding the design in HTML and CSS.

Uploaded by

Nishki Gejmer
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
43 views11 pages

PSD Tutorial Linked 27

This document provides a step-by-step tutorial for creating a minimal web design in Photoshop. It instructs the user to set up a document using a 960 pixel grid, create elements like a top bar, content area, portfolio slider, and footer. Styles and interactions like hovers and shadows are added to buttons and links. The conclusion states that the visual design is complete and a follow up tutorial will cover coding the design in HTML and CSS.

Uploaded by

Nishki Gejmer
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 11

Create an Awesome Minimal Web Design in

Photoshop
Put on your Photoshop cap and get ready for a step by step tutorial on how to make an awesome
minimal web design.
Users who follow this tutorial will be expected to have a good understanding of Photoshop and
designing for the web.
1. Setting up the Document

For this design well be using the 16 column 960 grid which can be downloaded here. Once
downloaded, navigate to: templates/photoshop and open 960_grid_16_col.psd

Fill the background with a nice light grey. In this tutorial Ill be using #e8e8e8
Go to File > Save As and Save the file to somewhere with a name of your choice so we dont overwrite
the original 960_grid_16_col.psd (just be sure to keep the file format as .PSD)
2. Creating the Top Bar

Create a selection at the top of your canvas with a height of 90px and a width of 100%. Open the
Blending options panel (Right click Layer > Blending options) and select Gradient Overlay. Bring
up the gradient editor and change the gradient colors by selecting the bottom two pointers and changing
the color using the palette below.

Add a text based logo on the left of the top bar making sure its inline with the 960 Grid System. Im
using the Arial Rounded font with a size of 26px. Change the text color to white and then duplicate this
layer. Fill the bottom layer with a dark red and move the layer 1px down and 1px right. This will give
the logo a little depth.
Move to the right of the navigation bar and type out some text links using the Arial font with a size of
12px. Do the same with these links as you did with the logo by duplicating them and changing the color
of the bottom layer to a dark red to add some depth.
In Part 2 of this tutorial well be developing the layout into XHTML and CSS so youll see why I
created the shadow the way I have rather than using the Drop Shadow tool.

Now we need to design how the links will look when we hover over them. On the link well be putting
the hover design on, change the style to Underline via the Character tool. Create a selection behind and
around the link and fill the selection with a nice dark red.
I always add a hand cursor image to hovers in my designs so that the client can clearly see that its a
hover effect.

3. Create the Content Holder

Press Ctrl + ; to view the guidelines and create a selection 960px wide and fill this selection with white
(#FFFFFF)
4. Seperate the Top Bar and the Content

Create a selection with a height of 30px and a width of 100% and add a very slight linear gradient using
the Gradient Tool (G). Ive used Black > Transparent. With the gradient in place, set the opacity of the
layer to 10%.
If you turn the layer on and off by clicking the eye next to the layer youll see that this faint gradient
actually does make a lot of difference.

5. Adding an Intro

At the top of the content area were going to add a little intro paragraph. Make sure the 16 column grid
lines are visible and type your message. Ive used the font Georgia with a size of 17px and a line
height of 25px. Theres also a margin of 61px above and below the text.
Spacing is vitally important in Minimal Web Design and is something many of these designers
overlook. Ill get into that rant on another day though.
6. Designing the Portfolio Slider

Grab yourself a picture of a 2009 Macbook Pro and cut out the desktop.

Replace it with an image you want to showcase in your portfolio. For demonstration purposes I just
added a screenshot of my personal website / desktop.
7. Creating the arrows

For this you will need to switch over to Illustrator. You dont have to but it will speed things up.
Select the Rectangle tool and create a 100px x 100px rectangle. Rotate the shape 45 degrees, delete the
most-left point and add a thick rounded border. (about 30pt). The color of the arrow doesnt matter
right now.

Drag the arrow into your Photoshop canvas and import the arrow as a vector smart object.
Resize the arrow and change the color of the arrows to a red that matches the current theme of the
website via Blending Options > Color Overlay and position it to the left of the macbook image keeping
it in line with the 960 grid system.
Duplicate the arrow layer, flip it horizontally (Edit > Transform > Flip Horizontally) and place the
second arrow to the right of the macbook keeping it in line with the 960 grid system.
Now we need to design the hover effect for the arrows. Grab the elipsis tool and create a circle that fits
around the arrow nicely then change the fill color of the circle to the same red of the arrow and change
the color of the arrow to white.

8. Add some text

Add some project information using 2 fonts. Georgia for headings and Arial for text.
Duplicate the project text and move them down 122px apart. (61px x 2).
At the first 61px marker add a 1px border filled with a light grey to seperate the text sections.

9. Add a Footer

Using the same colors as the top bar, create a footer thats 90 x 960. On the left side add some
copyright text using the same shadow method as the navigation links. This time were using the
Georgia font with a size of 11px for text.

Do the same on the right side of the footer with a handy link entitled Take me to the top that will take
our user back to the top when they have scrolled all the way down to the bottom of the page.
Conclusion

The visual concept is complete! Weve designed an awesome minimal web design in Photoshop. Stay
tuned for the next part of the tutorial where well be coding up the design into XHTML and CSS.

You might also like