Hello you all. In this tutorial I will teach you how to make a website interface similar to a window in Windows Vista. I must mention that in this tutorial we will only make the design, not the slicing and HTML coding.
So¡let¡¯s get started. First of all open a new document in Photoshop. I suggest using a resolution of 1024x768 with 72DPI. Now here comes a very simple part. Search on Google or any other website for an image that you would like to use as a background. I used this one: http://www.winsupersite.com/images/reviews/lh4051_bliss.jpg . Make sure that the images is the same resolution (or bigger) that your document. Paste it in a new layer and name it ¡°BG¡± (or whatever you wish¡but make it suggestive).
Select the round rectangle tool. Color should be white and the radius of 10. Set it¡¯s opacity to about 50-60%. Now while holding the CTRL key click on the layer with the rectangle in it. This should make a selection that has the shape of the rectangle. With the selection still in place select the BG layer and Edit->Copy. Now create a new layer and Paste in it what you have copied earlier.
With this layer selected go to Filter->Blur->Gaussian Blur and use these settings:
Now merge the first 2 layers together.
Simple so far. Let¡¯s add some elements to the window. Let¡¯s type in the website name. Select the Horizontal Type Tool. As font use Comic Sans MS with a size of 16 (or even 18). The color should be Black. Create a new layer and type in your website name. Place the text in the left top corner of the ¡°window¡±. Go to Blending Options of the text layer and add some Outer Glow. Use these settings:
Now that we have this done, let¡¯s make the close and minimize buttons. I suggest making a new directory in the layers panel. Name it CloseB. Here we will store all the layers from our close button. Create a new layer in that directory. In it, using the Round Rectangle Tool with a radius of 3 px draw a rectangle about 45 width and 20 height (45x20). Add a Gradient with these colors:
About the settings just use the default ones. Also add an Inner Glow and an Outer Glow both with the default settings. Add a Stroke and use white as color and 1 as size. Now using the Type Tool create an ¡°X¡± for the close button. As font just use Arial. Adjust the size to fit the button. I used size 16. Now ad a Stroke to it using also the settings above( color: white, size:1). Place the entire button in the upper right corner. Now create a similar button but instead of using the red gradient make it with these colors:
Also¡don¡¯t forget to make a ¡°¨C¡° instead of the ¡°X¡±. Now place it next to the Close Button.
So far so good.
Lets¡¯ make now the ¡°Back¡± and ¡°Forward¡± Buttons. This is rather tricky. Make a shape similar to this one:
Make it white, with opacity of 70%. Create a circle and use this gradient:
Also add an Inner Glow with the default settings. Put it in the left part of the shape. Now duplicate it and put it in the right part of the shape. Now add 2 arrows from the Custom Shape Tool Menu. I used Arrow 6. make them white and ad a black stroke of 1px. Place them over the two circles. You should now have something like this:
Let¡¯s make the ¡°Search Box¡±. Create a new rectangle about 200x25. No effects, except a 1px black stroke. Place it below the two buttons we just created. Now from the Custom Shape Tool select this item
Almost finished. Make a rectangle to fit in the window. This is where we will add the content of the page. Make sure to leave some margins in the right, left and bottom of the window. Just make it white. For the menu, create another rectangle that has the same height as the previous one you created. Place it in the left side of the white rectangle. Add the following gradient to it:
Now just add the menu and the content and you are ready to go.
discuss this topic to forum
