Design Studio Web Layout in Photoshop

Graphic Design Studio Web Layoutes

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.

Preview full screen

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 theRectangle 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

Rounded Corner Boxes the CSS3 Way

To create a CSS3 rounded corner box, simply start with your box element and apply your 4 corner images, separated by commas.

1. .box {
2. background-image: url(top-left.gif), url(top-right.gif), url(bottom-left.gif), url(bottom-right.gif);
3. }

We don’t want these background images to repeat, which is the normal behaviour, so lets set all their background-repeat properties to no-repeat.

1. .box {
2. background-image: url(top-left.gif), url(top-right.gif), url(bottom-left.gif), url(bottom-right.gif);
3. background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
4. }

Lastly, we need to define the positioning of each corner image.

1. .box {
2. background-image: url(top-left.gif), url(top-right.gif), url(bottom-left.gif), url(bottom-right.gif);
3. background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
4. background-position: top left, top right, bottom left, bottom right;
5. }

And there we have it, a simple rounded corner box with no additional mark-up.

As well as using multiple background images, CSS3 also has the ability to create rounded corners without the need of any images at all. You can do this by setting the border-radius property to your desired value as seen in the next example.

1. .box {
2. border-radius: 1.6em;
3. }

This technique currently works in Firefox/Camino and creates a nice, if somewhat jagged rounded corner. If you want to create a box that works in both Mozilla and WebKit based browsers, why not combine both techniques and see what happens.

Create your first web site using Photoshop

In this tutorial you will learn how to make a layout for your design studio website. If you have any questions about this tutorial be sure to ask in the comments. Also, remember with all the tutorials, the psd is available for download.

This will be your final result

1. The first thing we want to do is open up Photoshop and create a new document with the dimensions of 1024×998.

2. Next lets go ahead and change our background color. Using your Paint Bucket Tool fill your background layer with #CCD8E1

3. Now we want to start off by creating the banner in our header. Using your Rectangle Tool create a rectangle similar to the following

4. Now right click your rectangles layer and choose blending options from the drop down menu and insert the following

5. Next we want to add a little ‘shine’ to the top of our banner. To do so make a 1px high selection across the top of the banner and fill it with #FFFFFF on its own layer. Using your arrow keys nudge it down 1px, and it will look something like this

6. Now just change that layers blending mode to Soft Light. I chose to leave the opacity at 100%, but you can modify it as you like.

7. I then added some dummy text, where you can provide a short description of your company. Next use your Rounded Rectangle Tool with the radius set to 5px and make a rounded rectangle similar to the following

8. On your Rounded Rectangle layer insert the following blending options

7. Go ahead and place some text on your button and add a little reflection and it will look something like this

8. Now just repeat those steps and you will have something very similar to this

9. For our logo we want to have something terribly simple. For the ‘Design’ I used the color #62686D and for ‘Studio’ I used the color #8ABC16

10. Now insert the following blending options onto our text logo layer

You will have something that looks like this when your complete

11. Next we want to go ahead and add some text for our links in the right. For the text I used the color #3E4041

12. We want to go ahead and show what an active or a hovering link will look like. Using your Rounded Rectangle Tool with a radius set to 3 to 5 pixels make a rectangle similar to the following under your ‘Home’ text.

13. Now lets go ahead and right click that layer and insert the following blending options

14. Your header should now look something like this

15. Now we want to go ahead and make a selection from the bottom of our banner to the bottom of our document. Fill it with any color and then insert the following blending options onto its layer

16. All thats left is to organize your content in a way you wish. This is what I came up with

17. And thats it! Your final results will look something like this:

 

Three column fixed layout structure using CSS

HTML structure
The following picture illustrates HTML/CSS elements I added on the page:


The structure is ready to use. You just have to redefine font, color background, font-style for each layer and HTML tag, and define other custom classes.

Step 1: HTML file structure
Create a new page and copy and past this code within <body> tag:

<div id="container">
<div id="topbar">Top Bar/Logo Layer</div>
<div id="navbar">

<a href="index.html?home">Home</a>
<a href="index.html?about">About</a>
<a href="mailto:myemailaddres@email.com">Contact me</a>

</div>
<div id="main">
<div id="column_left">
<h1>Post Title</h1>
<h2>12 january 2008</h2>
<p>Add your text here</p>
</div>
<div id="column_right">
<h3>Categories</h3>
Right Content to add Categories, web 2 widget (twitter, mybloglog recent readers...)
</div>
<div id="column_right_adsense">
<h3>AdSense</h3>
Adsense 120 X 600
</div>
<!-- Don't remove spacer div. Solve an issue about container height -->
<div class="spacer"></div>
</div>
<div id="footer">© 2008 Information about your site</div>
</div>

Step 2: CSS file
Now, create a new css file and link it into index.html

/* ------------------------------
HTML Redefine Tags
------------------------------ */
body{font-family:Arial, Helvetica, sans-serif; font-size:12px;margin:20px; padding:0;}

input, form, textarea
h1, h2, h3, h4, h5, h6{margin:0; padding:0;}
h1{font-size:18px;}
h2{font-size:14px; color:#999999;}
h3{font-size:13px; border-bottom:solid 1px #DEDEDE; padding:4px 0;margin-bottom:10px;}

a:link, a:visited{color:#0033CC;}
a:hover{text-decoration:none;}

/* ------------------------------
PAGE STRUCTURE
------------------------------ */

/* #container has an absolute width (780 pixel) */

#container{width:780px; margin:0 auto;}

#topbar{width:auto; display:block; height:60px;}
#navbar{width:auto; display:block; height:28px;}

#navbar a{heigth:28px; line-height:28px; padding:0 8px;display:inline;}

#main{width:auto; display:block; padding:10px 0;}

#column_left{width:460px; margin-right:20px; float:left;}
#column_right{width:160px; margin-right:20px; float:left;}
#column_right_adsense{width:120px; float:left;}
div.spacer{clear:both; height:10px; display:block;}

#footer{width:auto; display:block; padding:10px 0; font-size:11px;color:#666666;}

/* ------------------------------
CUSTOM CLASSES
------------------------------ */

/* Add here your custom classes ... */

5 Must-Do Web Programming Exercises

1. Learn “C” Language- Some programmers may not like this suggestion. Web programmers mainly use Java, .NET for web development, then why am I recommending C?C is a powerful programming language, but more importantly, it has an organized structure. C allows you to experiment directly with computer memory and helps you understand how data moves forward from once block to another. If you have any doubts about data processing system of programming languages, then C will clear all your doubts.
2. Develop Programs that Improve Your Logic-Try to write simple, but logical programs in C to test your programming skills. Obviously, you will make mistakes at the beginning, but your mistakes and failures will help you find new solutions.
3. Find Interesting Codes and Try to Understand the Logic Behind It- You have probably come across cool effects and features in websites while surfing the net. Find the source code behind those effects and understand how it was created. Once you understand the coding logic, try to modify it by adding custom functions.
4. Solve Logic Puzzles- Every standard newspaper publishes logic puzzles everyday. Try solving them regularly and train your brain to think differently. When working in a web development company, you have to face different programming challenges everyday. Sharpen your thinking capabilities and use your problem solving skills in web programming.
5. Help Other People and Learn from Them- Every newbie programmer should join a website programming forum and share his knowledge with others. Read the programming challenges other developers are facing and try to provide them a solution. If you are facing any problem, then share it with other members and take their help. This problem sharing habit will help you learn new programming secrets and easier ways to solve critical programming challenges.

Whether you are a newbie programmer or an experienced developer, you should always try to increase your knowledge. Web programming is like a riddle and solving it gives you immense satisfaction.