This tutorial will guide you through the process of designing a professional website with a funky colorful flair. The tutorial features some great colors, effects and layer styles in which you can use over and over for future projects. Let's get started!
Final Image Preview
Take a look at the image we'll be creating. Want access to the full PSD files and downloadable copies of every tutorial, including this one? Join Psd Plus for just $9/month. You can view the final image preview below.
Tutorial Details
- Program: Adobe Photoshop CS3
- Difficulty: Intermediate
- Estimated Completion Time: 60-120 Minutes
Step 1
Create a new document 1200 pixels by 1160 pixels with a white background. Once you've created your document were going to setup two guides which will aid in keeping the layout 850 pixels wide. To create the guides we need to go to View > New Guide, in the box that pops open select vertical and enter 175px.
Go to View > New Guide once more only this time enter 1025px, again make sure the guide is set to vertical.
You should now have two guides on either side of your canvas both 175px from the edges of your document. The space in between the guides should be 850px wide. Everything we create from now on will be created within the guides.
Step 2
Were now going to fill our background and for our background were going to use a radial gradient. Set your foreground color to white (#ffffff) and background color to light gray (#e1e1e1). Select the gradient tool with a radial gradient.
Step 3
Apply the gradient to your "background" layer. When applying the gradient start from the top-middle of the canvas and drag half way down, this should give us a nice sized effect. If you hold down the Shift key while dragging the gradient down it will lock the gradient line vertically.
Step 4
Select the Type tool, then in the top-left corner against the left guide add your website title using the color pink (#ff008a). By the side of your website title also add your website's catchy slogan.
Step 5
On the same level as the website title but against the right guide, create two rectangles next to each other using the Rectangular Marquee tool. The first rectangle is going to be a search field so it needs to be quite long, the seconds rectangle is going to be a submit button so should be fairly small.
Step 6
Now add these layer styles to the search field rectangle.
Step 7
Once you've added your search field layer styles add these layer styles to your button rectangle.
Step 8
Finally select the Type Tool and add some text to your search field and search button. The layout so far should look something like the image below.
Step 9
Select the Rounded Rectangle tool, once selected at the top of the screen underneath the Photoshop tool bar you will see some options. Within these options change the type to Path and the Radius to 15px.
Step 10
Starting from the left guide drag out your rectangle, the height of the rectangle should be roughly 215px and end over at the right guide. Once you've dragged out your rectangle right-click inside it and go to Make Selection.
Step 11
While the selection is active, select the Gradient tool with a radial gradient, set your foreground color to a really light gray (#fefefe) and your background color to a slightly darker gray (#e1e1e1). Starting from the top-middle of the selection, drag the gradient past the bottom of the selection.
Step 12
Once you've added your radial gradient add these layer styles.
Step 13
Command-click the rectangle layer you just created, doing this will load the rectangle's selection. Once you've loaded the selection contract the selection by 15px by applying Select > Modify > Contract.
Step 14
Create a new layer above your big rectangle then fill it with any color. Once filled, Deselect the selection by pressing Command + D.
Step 15
Add these layer styles to your new smaller rectangle layer.
Step 16
Were now going to create a bokeh effect for our smaller inner rectangle. Create a new document 600 pixels by 600 pixels with a transparent background. Select the Elliptical Marquee tool and create a big circle inside the canvas.
Step 17
Once you've created the circle we need to adjust the circles appearance a bit. Add these layer styles to your circle.
Now go to Edit > Define Brush Preset and save your new brush.
Step 18
Head back over to your layout and select the Paint Brush tool from within the brush menu, then set your brush size to 50px.
Step 19
Bring up the brush options screen with the F5 key then add the following brush options.
Step 20
Your brush should now be ready to use, create a new layer above your multi-colored inner rectangle. Using the color white (#ffffff), and with your brush drag out some circles, try and keep the circles within the inner rectangle. You only need a few to start with as we'll be building up the circles over 3 layers. Once you've brushed out some circles blur them using the Guassian Blur Filter > Blur > Gaussian Blur.
Step 21
Create a new layer above your first circle's layer. With your custom brush start to brush more circles filling in some of the blank spaces. Once you're done set the Opacity to 50%, then add an outer glow using Photoshop's default settings.
Step 22
Finally, create another layer above your last circle's layer. With your custom brush once more brush out some more circles. Once you're done, set the layer Opacity to 75% ,then add an outer glow using Photoshops default settings.
Step 23
Now that the bokeh effect is complete, select the Type tool and add some text over the rectangle. The font used for the dummy heading is Helvetica Neue LT pro, the short paragraph underneath is set in Verdana. Finish off this step by adding a sleek icon to the left of the dummy content. The icon used is from an icon set designed by "Navdeep Raj" for Smashing Magazine.
Step 24
We're now going to create a simple navigation. Select the Rounded Rectangle tool and change the radius to 10px. The rectangle should be about 54px in height and be stretch right against the left and right guides.
Step 25
Right-click inside the rectangle path with the Pen tool and go to Fill Path. Once you've filled the path add these layer styles.
Step 26
On the navigation add some sample links. In between each sample link create a small bullet point using the Elliptical Marquee tool. Fill the bullet points with the color pink (#ff008a).
Step 27
Now the navigation is complete lets move onto the content boxes. Select the Rounded Rectangle tool, leave the radius set to 10px. Drag out a rectangle about 335px in width and 196px in height. Fill the rectangle with any color for the time being, then move it against the left guide.
Step 28
Add these layer styles to your content box.
Step 29
We're now going to make the right folded part of the content box. Select the Polygonal Lasso tool and make a triangular selection around the top-right corner.
Step 30
Once you've made the selection, Cut (Command + X) and Paste (Command + V) the corner to a new layer. Select the corner layer then rotate it 180 degrees (Edit > Transform > Rotate 180).
The corner would have lost all its layer styles when we cut it so we need to re-apply them. You can do this quickly by right-clicking the content box layer and going to Copy Layer Styles. Right-click the corner layer and go to Paste Layer Styles. Finally, place the corner so that the top straight edge is over the straight edge of the content box.
Step 31
Fill in your content box with some dummy content. Add an icon on the left with a nice bold header and dummy paragraph underneath. The icons used are from an icon set designed by "Navdeep Raj" for Smashing Magazine.
Step 32
Duplicate all the content box elements, then create two more boxes. Now place them underneath each other.
Step 33
On the right side of the layout, inline with the first content box, add a long dummy heading using the settings below.
Step 34
Underneath the long heading add some more dummy text, maybe an image or two and a simple unordered list just to give the layout some life. Color the dummy text in a dark grayish color (#8a8a8a). The image in the middle uses the same layer styles as our content boxes and was created in the same way as our featured area.
Step 35
For the footer we're going to re-use our navigation. Go to the Layers Palette and right-click your "navigation" layer. Select Duplicate Layer, then drag the duplicated layer to the top of the stack.
While the "footer" layer is selected, hold down the Shift key on the keyboard, then press the Down Arrow key until the footer reaches its place at the bottom of the layout. Doing it this way instead of using the mouse will keep the footer lined up with everything else that we have created so far. Finish off the footer with your footer text.
Conclusion
The final image is below and have fun creating more website designs using these techniques and playing with these types of funky layouts and styles.
Subscribe to the Psdtuts+ RSS Feed for the best Photoshop tuts and articles on the web.
Related Posts
Keep reading with more great tutorials and articles!
Enjoy this Post?
We'd love your vote!
Plus Members
Source Files, Bonus Tutorials and
More for $9 a month for all TUTS+
sites in one subscription.
User Comments
( ADD YOURS )flareationalist September 4th
very good, not much advanced techniques but great for beginners, very precise.
( )Tylor Skory September 4th
Awesome. Very nice. I like these step by step tutorials!
( )Stoian Kirow September 4th
Very nice tutorial mate!
( )Extremely helpful!
Thank you!!!
Crax September 4th
Finally a good UI tutorial which made PSDtuts famous.
( )Micheal September 4th
Can I just say there are more than enough tutorials online teaching people how to make this kind of site/page. Can we finally see something with some bite, I mean something like a minimal photography portfolio with a nice clean image viewer?
( )lkaz September 4th
That wouldn’t be because you have a minimal photography portfolio would it?
( )WEBBOgrafico September 4th
nice and basic tutorial… very well explained. Well done
( )leertaste September 4th
When I saw the preview image, I knew, it was done by Richard Carpenter 
( )Dave September 4th
I really like the bokeh effect, but yours seemed a bit fake. One of the things that makes the bokeh look so cool, is that it is very random. For example: The circles aren’t actually circles but their shape is just slightly different, there is usually some sort of noise inside each one, and they are blurred more, because the whole reason they exist is due to the out-of-focus.
Other than that, the layout was fine… I have no complaints.
( )flareationalist September 4th
I agree, if I was doing it, I would load in a actual image of a forest or something and adjust it to a similar color, and then apply a heavy blur filter, then put it in the background instead of the simple gradient.
( )Dave September 4th
Of course you agree, we have the exact same tastes (on all tutorials) haha!
Yeah, a blurred out pic would be better than the gradient
flareationalist September 4th
yeah haha
richard carpenter September 4th
Thanks for your comments
p.s to admin:
Your site messes up in IE7, think you might have an extra tag or something somewhere.
( )andrew September 4th
*breathes a sigh of relief*
This is better, like said before, simple, well described and great for beginners. Also, this has relevent use.
Off topic. Wonder whata the tutorial sites will look like once Google WAVE is introduced…exciting!
( )andrew September 4th
agreed…all of the headers are wonk. and the drop downs seem to have too much padding between links. some large blue boxes with rounded corners
( )nemo September 4th
O it so is looovely
( )(Translated from Russian into English in translate.ru)
matt September 4th
I wouldn’t call this a “unique” layout by any means… about one in three websites I go to have this same feel to it. BORING.
( )Dave September 4th
Yes, it is pretty standard. I think the color choice is the most unique aspect about it.
( )css September 16th
why are you commenting like this ?
( )josh September 20th
because it is not unique?
E2thaV September 4th
Cool tutorial-I definitely enjoyed this one but would love to see a tutorial on taking it one step further and slicing it or doing whatever is necessary to turn it into a usable site!
( )lkaz September 4th
Go to Nettuts.com
( )Lucas Tadeu September 4th
Great tutorial!The final result is amazing. Congrats
( )Chase Adams September 4th
What happens in the Featured Service if your text is adjusted by the viewer because it’s too small to read? Does it overflow from the box? I could see it becoming LESS visually attractive if it’s adjusted. This is a great article though! Kudos.
( )HullDO September 4th
Definitely an amazing tutorial well worth the time spent following. Great end result.
( )Romannumeralus September 4th
Will there be a tut on coding this puppy?
( )Diego SA September 4th
Beautiful style, indeed! But could be improved! Nice tutorial!
( )Serghei September 4th
— Eventually got good site, but not original…
( )Omer September 4th
I loved the design it is precise and ‘to the point’. Tutorial is great as well for those who are new to the web world. Whether ur a master of Ps or not this tutorial is not just a simple layout its a great inspiration for us designers.
thanks Richard!
( )Robbert September 4th
Great tutorial thanks a lot!
( )Up to slicing and coding it to make it a workable template. Will give me some challenges
Henrique Cintra September 4th
I’m a programmer, with no knoledge on Photoshop or other design tools, but I know how important a good and well done design is to a website.
I have a question that might be dull, to ppl who deals with it everyday: how to transform this design into an actual page, with HTML, CSS, JavaScript?
Does it has any Photoshop way to do that or we have to do by ourselves, manually?
( )Dave September 4th
You have to cut up this image in photoshop, and then reassemble the parts in HTML/CSS. There are some good tutorials on this procedure on net-tuts
( )Kevin September 5th
http://net.tutsplus.com/videos/screencasts/slice-and-dice-that-psd/
http://net.tutsplus.com/videos/screencasts/converting-a-design-from-psd-to-html/
http://net.tutsplus.com/videos/screencasts/how-to-convert-a-psd-to-xhtml/
Thats what I found on nettuts.com.
Tom September 5th
Yeah, you cut up the PSD meaning that each image is separated. It’s quite a quick process and a very easy one – I’m sure that if you learned/experimented a little with Photoshop you’d be able to.
( )Donna September 4th
Great tutorial! I just went to your website and subscribed. Your site is packed full of great stuff! Thanks.
( )g3niuz September 4th
amazing tutorial..
the hv stuff is really fresh
( )cynthia September 4th
Thank you! I will practice and try this out, I have so many ideas for new sites it is CRAZY! LOL
( )Eric September 4th
anyone going to make one of these awesome tutorials and then a follow up (non psd members) psd to css/html tutorial?
I also found some things in here to be very helpful.
( )Jake September 4th
Kind of ironic considering the portfolio contest lol
( )Lena September 4th
amazing tutorial
( )thanks so much..
Steven Couper September 4th
Thank you so much for this Tut, I mostly do graphic work but this tutorial will help me improve the over all look of mu websites.
Thank you so much & keep them coming!!!
Steven @ Couperdesigns
( )haryo September 4th
Very interisting tutorial, dude. ^_^. How to generate them into CSS based ?
( )Dave September 4th
That is a different topic… this was just the design. In order to convert the image to a functional website, you should visit Net-Tuts… they have one or two tutorials up there that will explain the process of putting it into HTML/CSS
( )Martin September 4th
Not really unique… standard today I think – always same effects – Gradients – folded Corners – Big Header Graphic – Blog like style – … – Where is the RSS Feed Button
– SOMETHING NEW SHOULD COME!!!!
( )snnaqvi September 5th
Good job
( )Chandresh Kesri September 5th
Its really cool tutorial. Its helps me lot.
( )Koji @ ecover software September 5th
Nice tutorial! I’ll download on member area! thank you very much!
Koji
( )HYBRID September 5th
Thanx abduzeedo for the header of this layout :
http://abduzeedo.com/awesome-digital-bokeh-effect-photoshop
( )xun September 5th
simple and neat. love it! even the tutorial is easy to understand
( )Atul September 5th
A good tutorial for some one starting with design.
Nice basic one.
( )Denver Web Design September 5th
Very cool tutorial. I love seeing layout tutorials start to finish, you can always learn a lot no matter how many you have done.
I dugg it!
( )Q September 5th
Hey great tutorial
I’m probably just missing the effect, but in this tutorial when you set the inner shadow effect color to white, what does it do for the shape? For example, the search box. I’m not sure I see the difference the effect adds?
( )Q September 5th
Ah nevermind, I see you set the blending mode to ‘normal’.
( )Nikhil September 5th
Great tutorial ever on designing the website……
Thumbs Up….
( )Skose September 5th
Thanks… Very Good Application.
( )HeMa September 5th
Man This The Most Beauty Tut I saw
Thanx
( )CChcke September 6th
Great tutorial, love the header how its almost like the Envato BG but still unique and i’m glad to see some GOOD paper style corners, because some can be a bit, umm…pixely lol
Begginers and ninjas alike reading this should check out http://reviewmydesign.net/ – begginers can get their designs reviewed by ninja designers and ninja designers can give the beggineres a few tips, (i hope that made sense).
( )Daniel Whyte September 6th
Good for beginners, but i fail to see an application for this style of website.
The visual weight of the elements relative to other elements seems a little out of scale and i am not sure about the effects used.
Whatever floats your boat i guess.
( )zer0 September 6th
designing a template/theme isnt so difficult at all… but how to generate it with css – thats a huge lesson, a tut with css would be veeery nice
( )Nick September 6th
Nice tutorial, I have to say. At least I was able to follow this one
I havn’t finished it yet, but here’s what I did so far
http://www.buyinbulk.nl/Preview2.png
The text is dutch, fyi.
btw, one tip: I was unable to create that nice triangle selection with the lasso (is there a trick?), so I just created a square selection (plain), chose select -> transform selection, did a 45 degree rotation, and moved it into place to get the perfect triangle cut.
Cheers,
Nick.
( )Daniel Whyte September 6th
If you use the polygon lasso tool and hold down shift it will create a perfect 45 degree line selection, then you can just click around the rest of the object.
( )Nick September 7th
Doesn’t seem to work in v8.0, maybe it was added in one of the later CS versions?
SiGa September 6th
Step 2: Tutorial about how to code that design…
( )Thank you, looks fresh an inspiring and it´s a very in-depth tutorial!
Sergio Ordonez September 6th
Good tutorial for beginners though anybody knows how to do a search box, but not everybody knows where to place a search box.
I really would like to know “the why” and not “the how” in the making of a website… hierarchy, alignment, value… the intentionality behind a website, I think its the key for more advanced users.
( )Daniel Whyte September 6th
Giving everything a reason, or the theory behind objects, etc. would be great i agree. It would be great to understand the reason behind some elements in a website design, and not just becuase they “look prety”.
( )Symon September 6th
Nice refresher.
( )Javier September 6th
Awesome tut. I’m new to tools like psd and to the design process, this is very useful for me.
( )MoonBoy September 7th
why did you use Sharpen font?
( )scorpy September 7th
nice tutorial, but is this customizable?
why not using the flexibility of using vector layers instead of using the gradient?
just have a look at http://graphicriver.net/item/big-bg/55023. the background is made up of pure and 100% psd vectors.
also look at http://sites.google.com/site/sumitroyshome/tutorials/tut-md-col/pct-02-01. here you can get a full detail about the potential of the vector layers.
… and all the colors are customizable and reusable.
hope this helps the intersted people.
( )Jackson September 7th
This is perfect, tonight I will give it a try! Thanks mate!!!
( )Ben September 7th
nice one mr carpenter — btw like hv designs v knowledgable form j query to ps
( )Web Host Right September 7th
Im most of the way through this tutorial, find it very helpful, its clearly explained and im finding it quite easy to follow considering that in new to working in photoshop.
Only a tiny thing that i would like to point out, not a complaint but i noticed that some of the images of the tutorial during the layer styling are quite hard to read, i could still make out the various settings but maybe if those images were shown larger, more focused.
But overall a big thank you for the tutorial, im enjoying it.
( )Ivan Mišić September 7th
Good tutorial for beginners, nice explained.
( )Chy-Anne Lane September 7th
Thank you; very well explained tut!
( )aflipya September 8th
Yawn…
( )christina September 8th
the one thing i cannot find when creating a website is a language converter to place into the site,
any ideas, email me at earthliefairie@hotmail.com
( )La rishteria September 8th
Nice tut, good explaination!
( )mel September 8th
Great Tutorial…Thanks! A Part 2 with details on coding this site would be awesome
( )big j September 8th
im sorry but im so tired of seeing these types of soft looking designs.
( )idonkov September 9th
Waw.. Richard, great tut and very nice job! Thx a lot!
( )Sumit Kulkarni September 9th
Very good assignment. Learned interesting use of brush options. Too good explained.
( )antony September 9th
really great
( )neil September 9th
great tut, thanks
( )scottie dont September 9th
quick question..
are those fonts you used web standard?
i dont think so..
so when u finally get to coding this it will come out different..
as for the nav bar, you could keep them images but you’ll be missing out on some good SEO..
scottie dont.
( )Ashely Adams : Sticker Printing September 9th
Your tutorial was very precise. It may help the beginners, especially those who are running short inspiration. But I’m afraid; it will be of any use to professional designers. I think I’ve seen better tutorials out there. Anyways, thanks for sharing.
( )medo September 10th
you right I’m with you and u are beuty
( )Ashely Adams : Sticker Printing September 9th
Congratulations for the great tut.
( )TheAL September 9th
Nice. Neat. Cute. Kinda helpful.
Unique, though? Not at all.
( )Usman September 9th
mmmmmmmmmmmm…….. simply superb.
( )JJ September 10th
That’s unique and colorful? not.
( )AtiKuSDesign September 10th
Wow! That is a lot of comments! Obviously shows how great that tutorial is.
Thanks very much for this, it’s a lovely little design and it shows off some great techniques.
( )Julian September 10th
thank u for a great tutorial, i would be nice if the second part of the tutorial show us how to take it to dreamweaver and leave it ready to ad the content, thanks.
( )Adam September 10th
Really great tutorial … awesome man !
( )avn.rocky September 11th
Hey!! Thanks for the Brush Thing!! I enjoyed and learned alot…
( )Thanks alot
Cheers!!
Avkash September 12th
Nice….. one
( )I like the Circle Effects – how to set it
CongThanh September 12th
Thanks for great tutorial…
( )thiago September 12th
great tut, but it would be nicer if youd tell y ure using some options. “Y Rectangular Marquee tool?”, “Y Rounded Rectangle tool -> Path ? “… and so on.
( )greatdiane September 12th
Very neat layout and helpful tut
( )geO September 12th
Amazing
( )tirath September 13th
Awesome tutorial with Amazing layout
( )thanks so much for your kind effort
keep up good work
God bless you
Smashing Themes September 13th
Wow, Now I know how to create those fancy bokeh effects,
( )Thanks a lot man for writing this awesome tutorial
Abdullah A. Sarraj September 13th
Really Great Tutorial’s, I Love it
( )Avangelist September 14th
I would like to see it coded and how you will work on the stroked title.
It’s nothing special and very safe but it’s a solid example of basic layout concepts. But being a blog, I would imagine there are quite a few different page models that would need to be created, I have yet to see somebody write a full article on building an entire site with all the numerous icons, page styles and other elements.
It would also be good to know how much consideration you give for the developer who is going to take the design to code. Is this something you consider whilst sketching your designs?
( )Jesus Soberon September 15th
this is very cool. Im new on photoshop and this tutorial its very easy and professional… many thanks !!!
( )Wolf September 16th
I am new to Photoshop and tried this tutorial. Even though I took some different steps to get the page to look like in this tutorial (maybe due to the fact i am working in CS4?) I learned a lot about Photoshop.
So thanks for the tutorial and helping me getting to know Photoshop:-).
( )Jasmin Halkic September 17th
Good job.
( )yanakieff September 21st
Very nice tutorial , i really like it .
( )kacem September 24th
thx frero for shearing this technique
( )PhilippineOutsourcing September 28th
great tuts! this is very useful for beginners.. thank you!
( )aaftaab September 28th
great tutorial.truly helpful!
( )Michalis89 October 3rd
Dude that’s awesome, great tut, and congrats ’cause u’re very good at this stuff any help or advices are welcome, I’m a student but almost graduating in systems engineering but I like graphic design too ’cause I’m into the web design too.
( )Webdesign@Posh-Creation October 5th
Great! this is really a creative collection from photoshop tips
( )yalçın October 6th
Extremely useful for beginners thank you very much
( )Resul October 11th
Awesome!! I’ve done this, but. I’ve heard, to get it online and work, then it needs to be .css or .php . But mine is in PhotoShop CS3, and not php or css file.
( )Andre Skull October 20th
Great tut Richard.
( )Hadi Mohammadi October 20th
thank you!
( )AtiKuSDesign October 21st
I’ve just completed this tutorial! Thanks very much for posting this, it’s a really great tut. I learnt loads of new techniques that I can use in the future!
( )Jihan S. October 24th
That’s really pretty. I’ve actually been looking for a tutorial on this for a long time. Thank you!
( )clippingimages October 28th
WoW
Awesome tutorials. Thanks for sharing this nice post.
( )Nuruzzaman Sheikh October 29th
Well done Richard
This is a cool tutorial for web template designing.
I have already completed this tutorial.
But I have 1 point to say. No layer were named or managed systematically. So, when someone come to edit those layers. It would kinda tough to find a specific layer.
I hope in future tutorial you’ll maintain each layer systematically and name them as well.
Well managed-layers are very useful and important for new-comers and pro’s too.
Thank you.
( )Jihan S. October 30th
Is there are step missing? Not sure about other versions of Photoshop, but in CS2, during Step 17, after layer styles are added, you’re supposed to rasterize the layer and THEN “Define Brush Preset…
( )gee November 2nd
had always been trying to read through tutorials but never one this simple! thank you! I learnt much!!!!!
( )Kiran Shinde November 4th
I like, Doted background Design Tips. Nice!.. Thank you so much
( )Alex November 21st
Nice! Helpfull!
( )Kami November 27th
Thx
( )very nice tut. any one would like to slice it now for wp?
Kami