Design a two color website layout in Photoshop
Today I will show you how to create a clean website layout using only a few colors. The colors are very important when you create web layouts. I highly recommend you to use not more than 4-5 colors when you design web 2.0 layouts. We have a set with over 27.000 Photoshop gradients. If you have problems choosing colors when you design that this huge set of gradient is the right choice for you.
As usual I will start by creating a new document with the following sizes: 960×900 pixels. You can use any size you want.
Over the background layer add the following color: #151515 with Paint Bucket Tool. Then download the following set of Photoshop pixel patterns:
Load the patterns in Photoshop, then create a new layer, and choose any pattern you like most. After I will select the Paint Bucket Tool, and a random pattern from that set
I will click on time inside my layout with Paint Bucket Tool
I will change the blending mode to overlay
With Rounded Rectangle Tool, I will create some shapes and I will place them like in the following image
For the top layer and the bottom one I will add the following layer style
This is my result
For the other 4 shapes from the middle of the layout I will add the following layer styles
This is my result
Over the big orange shape I will create another one, and you can add a dark gradient
I will download this set of Vector Web icons
I will open the icons in Photoshop. , then I will place the icons like in the following images
I will select Horizontal Type Tool, and I will write down some text. The font I have used is:
Myriad pro – for the big texts
Trebuchet MS – for the small texts
Click on the following image to see better the result
On the bottom of the layout I will add another image with a software box.
I will create a new layer right above the layer with the pattern. The easy way to create a layer there, you have to select first the layer with the pixel pattern, then press in the same time on CTRL+SHIFT+ALT+N
I will select Brush Tool, and with a big smooth brush I will make a white point in the middle of my layout
Then I will change the blending mode to Soft light
This is my result. Click on the image to see better my layout.
If you want to download this layout please apply for a VIP account. It will allow you to download all the resources from Grafpedia, including this layout.
Responses to “Design a two color website layout in Photoshop”
Leave a reply
-
Web design jobs- Nonpublic project #609030 by SeoWebLogix
- Blog writer by acerothstien
- Fading pictures and flash navigation by wiliss87
- Banners for musicshops by BasepointMedia11
- Video Views by marcuskw
- Private Project PTJ 13 - WebGallery Only by simonix
- Private Project PTJ 12 - WebGallery Only by simonix
- php guys needed by Pascal79
- Joomla template purchase and integrate by bnmagic
- W3C validated xhtml conversion with script integration by begwise
-
hi,
thanks for the new tutorial.
how do you seperate or get single icons. If I open in photoshop It is 1 big file with several icons.
Thanks
after you open the file in Photoshop, you need to grab Rectangular Marquee Tool, and make a selection around one icon.
be sure you have the layer with icons selected, then press on CTRL+J ( new layer via cut )
You can do the same for the other icons, but be careful what layer you select before you press on CTRL+J
Please let me know if you need more help
Hi thanks a lot works perfectly
i am glad i can help you
nice portfolio layout, thanks for the new tut..
Yet another great website design tips from you! Hope you continue posting these kinds of tips. They really are a good read… and a big help.
One other question. You use letter space -40 for example on the welcome header on your big texts. How would this translate in CSS? found this option letter-spacing but If I give a -40px you get very strange results.
letter spacing in css is a little different and it will not work exactly like in photoshop:
please try the following property:
h1 {letter-spacing: -0.4px}
It will not work very good, because my text in this template was made to be transformed into a graphic image. For example on Grafpedia you see the the white text which is a graphic image not a css text
Hi,
Some improvement butnot much. Wil go for the image
Thanks a lot for your answer.
Awesome tutorial with nice layout design
I always learns so many wonderful techniques from your valuable tutorials. Thanks a lot for your kind effort for posting best tutorials always
keep up good work
you are amazing
God bless you
I really like the finished product – great tutorial. On a side note I found this site that is running a contest for tutorials called GuruShare (Google it). You might want to check them out. Thanks for the great work!
Hiya, what is the font of the Grafpedia logo for THIS website (the one we are on now, not the one in the tutorial)?
Thanks!
oppeneer,
A little trick you can use to help with SEO to have your logo as text is set the graphic logo as a background image and then have your text moved off the page by using text-indent.
Example:
#header blockquote a {
display : block;
position:absolute;
top :51px;
left: 17px;
width: 305px;
height : 125px;
text-indent : -9999px;
}
This way search engines will read the text in HTML because it is still in the code, but in a browser, you will only see the graphic because the text is moved off the page.
Not sure if this is why you wanted the logo in CSS, but either way, it’s a good little trick to know.
Can you help me in making it slices. I am unable to do that same for my website
Please let me see the PSD file
Great tut! I love the fact that you kept it simple with only 2 colours!
Great post… good suggestions…thanks!
Thanks, I will use this once I get Photoshop installed. I like this, but can’t you do a blue design?? That would be awesome
.