Tutzor web 2.0 style design - PART 1

28
Aug'08
Cpotorac
Member since:
Aug 2010

Here is a new and improved look of the Tutzor website. Also you should learn a lot from this tutorial.

Now it's time to do your own website layout. Don't forget to read about various webhosting types and providers so you'll know which one will work perfectly for your website. Enjoy!

Rating

Your rating: None Average: 3.9 (29 votes)

Required Files

Final Image

Step
01
Cpotorac
Member since:
Aug 2010
I will start off with a new document 1024×1906. And fill the document with #333225.
Step
02
Cpotorac
Member since:
Aug 2010
Next we will use the Rectangle tool and make as shape as I did and also use a light color. I used #eee9d9.
Step
03
Cpotorac
Member since:
Aug 2010
Go to the bottom of the page and make another shape as in step 2 but this time use a lighter color than the first one. I used #f1eee1. Also make sure this layer will be lower than the one is step 2. (this small shape will be behind the big shape).
Step
04
Cpotorac
Member since:
Aug 2010
For the shape we just created in step 3 use these settings for the blending mode.
Step
05
Cpotorac
Member since:
Aug 2010
Make a new folder and make sure he is over the other layers. Name it Lower Side. What we will make here are: add some text and make some details.
Step
06
Cpotorac
Member since:
Aug 2010
For the details you need to zoom in to the place where the big shape and the small shape intersect. Here we will make 2 strips of 1 pixel. To do this use the Line Tool and make sure it is set to 1 px. Use these colors: #a6a38b and #ffffff and make something like I did. Also I will add the copyright text.
Step
07
Cpotorac
Member since:
Aug 2010
Now that we are done with that side we need to make the menu of this website. I like it simple and clean. Also I will make it on top. So let us move to the top of the website. This is what we will do:
Step
08
Cpotorac
Member since:
Aug 2010
To make this you need to first make a new document and name it category. Here will be displayed the category of each tutorial. This folder will need to be on top of all the other layers. Now make a new shape in that folder and use this color #9bb800.
Step
09
Cpotorac
Member since:
Aug 2010
Next make a new layer over the green shape. Here we will make a gradient to make the category bar a little better. Ctrl + Click on the green shape thumbnail to make a selection and make sure you are on the new empty layer now. Using the Gradient Tool with the Black color as the foreground to transparent and the Radial Gradient, click and drag over the shape. Make something similar to what I did.
Step
10
Cpotorac
Member since:
Aug 2010
Now set the gradient to Opacity 50% and to Multiply.
Step
11
Cpotorac
Member since:
Aug 2010
Next are 2 strips just as we did with the lower side. This time we will add 2 similar white strips as seen on the image below. After that change the above one to Opacity 40% and the other to 70%.
Step
12
Cpotorac
Member since:
Aug 2010
Add the categories and we are done with this side. Make a new folder into the Category folder and make sure it is over the other layers in this folder. Here you will add your text
Step
13
Cpotorac
Member since:
Aug 2010
Now I will start to make the shapes where the tutorials will be listed. As I said I like it to bee simple and that is why we will try and make this look as simple as possible and also look good. Start with a new folder that will be over the other layers. Name it Tutorial. Using the Rounded Rectangle Tool with a radius of 5px make a shape like mine. Color used: #f5f5f5.
Step
14
Cpotorac
Member since:
Aug 2010
Now use these settings for the blending options.
Step
15
Cpotorac
Member since:
Aug 2010
Make a new shape inside the shape on step 13. This time, use this color: #f2f2e8. Here will go all the content.
Step
16
Cpotorac
Member since:
Aug 2010
First add your tutorial thumbnail. I suggest you use the guidelines from now on.
Step
17
Cpotorac
Member since:
Aug 2010
Next I will add some introduction text, comments, tutorial title and other useful text.
Step
18
Cpotorac
Member since:
Aug 2010
I will insert the tutorial author into a new shape. This step will show you how to make it. First of all use the guidelines and establish the right place for it. Now using the Rounded Rectangle Tool draw a shape as I did and fill it in with #434130.
Step
19
Cpotorac
Member since:
Aug 2010
Use these settings for the blending options:
Step
20
Cpotorac
Member since:
Aug 2010
Make 2 strips as I did, one black and one white. Make the strips 50% Opacity and add your text.
Step
21
Cpotorac
Member since:
Aug 2010
Now I want a nice separator between the tutorial name and the rest of the text. Make a new layer and make a selection. Use the gradient tool with black color and Linear Gradient and make something similar to mine. Also in a new different layer make a white gradient just like the black one. Get those 2 gradients close together. Leave just a little gap between them. Next make a white thin strip and place it as I did. Merge the strip and the gradient layer. Now with the eraser tool set to 0 Hardness and make it real big, just erase the sides of the shape to make it blend in with the background. And for the final step, to make it blend in better, just bring the Opacity lower.
Step
22
Cpotorac
Member since:
Aug 2010
Duplicate the Tutorial folder and position them on the page. Make sure they are all aligned and organized.
Step
23
Cpotorac
Member since:
Aug 2010
Next is our right side. Here is the place where we will put a lot of links, news and important stuff. Start with a new folder. This folder will go behind the Tutorial folders. Name this one Right side and start with a new shape. Use the Rounded Elliptical Tool with 5px and this color: #bebeaf.
Step
24
Cpotorac
Member since:
Aug 2010
For the Blending options use these settings:
Step
25
Cpotorac
Member since:
Aug 2010
Using the same shape as we did for the author shape in Step 18 use that shape here to make something similar to what I did. These will stand for the RSS and Email Newsletter.

Comments

13
Aug'10
luis designs
Member since:
Aug 2010
I WANT TO KNOW A little help nesesito AFTER THAT TERM AS A STEP TO THE BONE HTML CODES FOR WEB
13
Aug'10
luis designs
Member since:
Aug 2010
YO NESESITO UNA AYUDITA QUIERO SABER DESPUES QUE TERMINO ESO COMO LO PASO A LOS CODIGOS HTML OSEA PARA LA WEB NID_DOG2@HOTMAIL.COM ADD ME
11
Aug'10
40 Bài thiết kế giao diện website bằng Photoshop tuyệt vời | Undozone
Member since:
Aug 2010
[...] Tutzor web 2.0 style design [...]
15
Jul'10
Ugur
Member since:
Jul 2010
I lite it :)
20
Jun'10
40个Photoshop概念图设计教程 | 豆芽酱的宅居。
Member since:
Jun 2010
[...] Tutzor web 2.0 style design [...]
18
Jun'10
linuxer
Member since:
Jun 2010
i have try your tutorial..good share...thx
08
Jun'10
40+ Greatest Web Interface Design Photoshop Tutorials, Part I | Online Tutorials For Designer's
Member since:
Jun 2010
[...] Tutzor web 2.0 style design [...]
07
Jun'10
Abel
Member since:
Jun 2010
The Tutzor web layout has always been one of my favorites. I'm leaning towards having a web design somewhat like this (in essence, I don't want people saying I'm plagiarizing ;) ) with variations here and there. I tried to design a cool logo to incorporate into the web but it turned out all wrong. Haha. Finally, decided to use the professional services of an online logo design site instead (http://www.logodesignplanet.com) and got the logo I wanted at an affordable price and fast too, within 24 hours. I did provide this link for reference and inspiration to my designer as I wanted the color/look of your design. Thanks for posting this, by the way! Tutzor rocks!
02
Jun'10
27 Best Photoshop Web Layout Design Tutorials to Design Decent Web Layouts | DzineBook
Member since:
Jun 2010
[...] Tutozor Web2.0 Re-Design Tutorial [...]
21
Apr'10
Best 35User Interface Design Tutorials » -!-PHONEXSIA-!-
Member since:
Apr 2010
[...] Tutzor web 2.0 style design [...]
10
Apr'10
80+ Photoshop Tutorials: Practical Web Interface Design | tripwire magazine | James Leard - Idea Merchant
Member since:
Apr 2010
[...] Tutzor web 2.0 style design [...]
10
Apr'10
30+ Excellent Photoshop Web layout Design Tutorials « Royale9designs a web and graphic design studio – Web Design Services, Web Development Services, SEO Services, Graphic design services, kolhapur, India
Member since:
Apr 2010
[...] [...]
08
Apr'10
40+ Greatest Web Interface Design Photoshop Tutorials, Part I
Member since:
Apr 2010
[...] Tutzor web 2.0 style design [...]
28
Mar'10
Louise
Member since:
Mar 2010
This is really helpful! But how do you code this?
22
Mar'10
10 Wonderful Web Interface Design Photoshop Tutorials | Freelance Creative Media Alliance | FCMA
Member since:
Mar 2010
[...] Tutzor web 2.0 style design [...]
07
Mar'10
27 Best Photoshop Web Layout Design Tutorials to Design Decent Web Layouts | Design Trip Blog
Member since:
Mar 2010
[...] layout in Photoshop Design a Hand Drawn style Website in Photoshop Design a Cool Photo Portfolio Tutozor Web2.0 Re-Design Tutorial Webstudio Layout Design Real estate Template Design Dark Portfolio Layout Stylish Design Agency [...]
28
Feb'10
Tutorial Photoshop Untuk Web Layout
Member since:
Feb 2010
[...] Simple web 2.0 layout [...]
26
Feb'10
kayseri sohbet
Member since:
Feb 2010
photoshop lessons published by you to follow with interest and I
10
Feb'10
185+ Web design tuts | Gouwestad Marketing en Media
Member since:
Feb 2010
[...] Tutzor web 2.0 style design [...]
24
Jan'10
20 WebSite Layout Photoshop Tutorials – Webexpedition18
Member since:
Jan 2010
[...] View Tutorial [...]

Comments

09
May'11
sawebdesigns

Re: Tutzor web 2.0 style design - PART 1

this is a great tutorial ive really find it easy to understand this

21
Dec'10
Anonymous

Re: Tutzor web 2.0 style design - PART 1

Excellent Tutorial that gives you amazing creative work for your websites.

19
Oct'10
web design company

web design company

Thanks for u r information

its very useful..........