Graphic Design Studio Web Layout
In this tutorial i will show you how easy is to create a layout with transparent buttons. This type of layout was used lately a lot because it is the latest trend in website design. For start i will show you how to create a colorful background then i will transform this background into a nice layout.
Let’s start our tutorial by creating a new document with the following size : 960 x 900 pixels.I will set my Foreground color to #141414, then with Paint Bucket Tool i will press one time over my document.
I will grab Brush Tool, and with a Smooth Round brush i will create 3 points over my layout with the following colors:
#a864a8
#ed1c24
#662d91
Please note the brush size should be 600 pixels
I will go to Filter > Noise > Add noise
I will use the following settings
Your layout will look like this one
I will go to Filter > Blur > Motion Blur
In the Motion blur window i will set the angle to 90 degrees, and distance to 998
This is a very easy way to create a nice background for your website. This is my background. In the following image i will show you only a part of my entire screen
I will create a new layer ( press CTRL+SHIFT+ALT+N ),
I will select one more time Brush Tool, then i will set my foreground color to white
I will use one more time a big smooth brush
Then with this brush i will create another point over my layout
Then i will change the blending mode for this layer to Overlay
Now i will start to create another shapes. I will create a navigation bar. For this i will need the Rectangle Tool
With this tool i will create a simple shape at the top
I will select Rounded Rectangle Tool, and i will set the radius to 6 pixels
I will turn on the Grid, because i want to align better my layout in the next steps
I hope you still have the Rounded Rectangle Tool selected. Please create 3 shapes like in the following image
Now i will add for all layers some layer styles
Click on the following image to see my result better
I will create another shapes with the same tool: Rounded Rectangle Tool
For all these shapes i will add the following layer styles
This is my result
Now it is tyme to add some text. As usual with Horizontal Type Tool i will write some dummy text
Then i will add a image on top of the layout. I will use the 3D Blueprint image. You can see the tutorial here
In the same area i will add two arrows with Custom Shape Tool
This is my final layout. I hope you like it. If you want to see how it is made please apply for a VIP account and download this layout to see better how it is made
Want to download this PSD layout and the XHTML files for this tutorial ? Join our VIP membership
Responses to “Graphic Design Studio Web Layout”
Trackbacks
- Daily Links | AndySowards.com :: Professional Web Design, Development, Programming, Hacks, Downloads, Math and being a Web 2.0 Hipster?
- psaddict.com
- 40 best photoshop tutorials for web layouts - Grafstorm
- 40 best photoshop tutorials for web layouts - Gfx Toolkit
Hello,
I am having trouble downloading your free download for the day. It is the purple website background. Can you please let me know which program I have to open it with.
Thank you!
Hello.
You need winzip or winrar to open the files.
rarsoft.com
winzip.com
If you still have problems please let me know
Great Tutorial!
Here is my version:
http://zoostormhost.co.uk/img/index.png
Hi Blake. Looks very good. You can try also with another colors to see maybe you can create a better effect
Thanks, I will have a go with other colours and see what I render, what I come up with.
Also, I didn’t know you had to pay on here, I can’t afford it at the moment so :/
Lol.
Great tutorial, exellent resoult! :thanks:
Its awesome…..
Really Cool… Thanks for this tutorial…Excellent Result….
Keep Going….
Can you please provide the tutorial on changing it in XHTML and CSS Template….
I would be grateful to you..
if I purchase membership I will be able to download html or php files for this website or I must make it my self?
Hello Kalvins. We have already added the coded version of this layout a few minutes ago
Loved your color selection for the background. The design is simple, neat, and very sophisticated. Thanks for posting this cool tutorial!
what day do you post free downloads? thanks, btw great layouts
We release downloads each day. Each download will be free for 24 hours. After that will be available only for VIP members. There is a small fee to access VIP area.: 49 $
Nice. I learned a lot from this.
very very nice tutorial.thanks…very easy to follow
Hey dear…it would be greatful if you can also please provide the tutorial on changing it in XHTML and CSS Template…i think that would be quite handful for me..
How do you slice or create this to fit in xhtml & CSS?
Anybody able to do that?
Muy Interesante!
This is a great tutorial. All of the tutorials I have seen are awesome. My main reason for learning how to use Photoshop is to then take that PSD Template slice and dice it to use in Dreamweaver for either dynamic content (sections resize yet keep background and image clarity).
Are you able to code this up in Dreamweaver or post an example?
Great tutorial. What is the name of the font you used for the headlines?
Very Nice. I love how you made the background image.
nice work, just wondering though how to get the background image fit in xhtml and css? Same thing about how you make those shooting stars background on the main page, grapdedia? I´m trying to figure how you would apply it in dreamweaver after you done in PS.
Hi, i’m a little bit late, but, thanks for the great tutorial. The way you made the background is awsome!
I loved this and learned too !
AMAZING! This is a perfect tutorial for web 2.0 look. Thanks for the gradients. http://arizonaseo.com/arizonagraphicdesign.htm
Lucida fax looks like the font that has been used here…
good tutorial, thanks
I like background. Really good.
Hey great work..
a vry simple and an easy way to create such a gud backgrnd.
thanks for d tutorial.
Also, where can i find more such tutorials.
Thanks neways
Gud Luck