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.
Conclusion
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.
Sign up for Testking 642-524 online course to learn how to be good in web designing and become expert using latest Testking 1Y0-A05 design tutorials and expert Testking 350-029 study guides.
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.
Tutorial added to the web tuts
Wow! thats great! i really love it.
Thanks!
Very nice!
It’s very awsome!
I cannot wait for coding up the design into XHTML and CSS tutorial..
That’s just incredible. A tutorial outlining a “quote, unquote” good design. I could make a field day just on how I like the color scheme and the font. This is something I would like to see if I was browsing the web looking for a business.
Tres bien!
Really nice simple clean design tutorial. Thanks
Howdy muchos gracis for the above cool post. That was extremely heart felt.
thanks a lot for sharing this great tutorial with us!!
greetings from bremen
This a very, very great! I wish to have more such tutorials!
Great job!
Just one wish.. i’m still not really experinced with PS, so if you provide more details of how-to, it would be really great!
Thank you
Hey, Nice tutorial, very clean. Do you think that there are any benefits in doing the website design process in Fireworks instead of Photoshop?
Thanks!
Great tutorial! Laid out very well and the design is clean and attractive. Great Work.
John from Miami Carnival
Thanks so much for the quick tutorial. At the moment I’m slowly building up a great collection of photoshop tutorials so I will be adding this one to the collection. I have to admit I really struggled with Adobe photoshop when I first got it (my previous experience was only ‘Paint’ that you get with Windows) but after spending a bit of time with it I’m finally starting to get the hang of it and will soon really start using it on my websites.
Thanks again.
All the best
Bill Jenkins
Webmaster, BestLawnMowerReviews.net
My web design skills are somewhat lacking. I have just purchased photoshop elements a while back and I am trying to figure it out. I found your tutorial very helpful. Thanks for sharing.
I think other website owners should take this website as an model – very clean and magnificent style and design, as well as the content. You are an expert in this area!