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 we’ll 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 I’ll be using #e8e8e8
Go to File > Save As and Save the file to somewhere with a name of your choice so we don’t 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 it’s inline with the 960 Grid System. I’m 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 we’ll be developing the layout into XHTML and CSS so you’ll 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 we’ll 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 it’s 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). I’ve 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 you’ll see that this faint gradient actually does make a lot of difference.
5. Adding an Intro
At the top of the content area we’re going to add a little intro paragraph. Make sure the 16 column grid lines are visible and type your message. I’ve used the font Georgia with a size of 17px and a line height of 25px. There’s 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. I’ll 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 don’t 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 doesn’t 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 that’s 90 x 960. On the left side add some copyright text using the same shadow method as the navigation links. This time we’re 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.
The visual concept is complete! We’ve designed an awesome minimal web design in Photoshop. Stay tuned for the next part of the tutorial where we’ll be coding up the design into XHTML and CSS.
This entry was posted on Thursday, May 6th, 2010 at 09:00 and is filed under Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
17 Responses »
- May’s Fresh Photoshop Web Layout Tutorials
- Code up an Awesome Minimal Web Design from PSD to XHTML | TutToaster
- Best of May 2010, Tutorials, Inspiration and Resources | TutToaster
Leave a Response
We do love friendly, well-constructed and respective comments. We do not love bitchy, stupid and disrespectful comments. Find something wrong in this post?, feel free to send us a note and we will fix the issue asap.