Simple Web page in Photoshop
This article is a model for a simple web page. These are base techniques and as soon we are used with these we can try anything we want. So, lets try your first page in Photoshop!
Create a new file, 760*600 pixels, to be sure we won’t have problems at any resolution. First, we start with the background. Create a new layer (Layer > New > Layer…). Fill this layer with a light grey(#e7e8eb) using Paint Bucket Tool (G key).
Create a new layer ( use the keys shortcut Shift + Ctrl + N ), then use Rectangular Marquee Tool (M key).
Select a central region (approximative 80-90% from our work space), but let a free space (cc. 200pixels) above. Now, fill this region with white. You should obtain for now the below image.
Create a new layer and then select using the same Rectangular Marquee Tool a region which has the same width with the white region. The new selection should be above the white section. Then select Gradient Tool and set the foreground color #7698f7 and background color #0e2cc5. Fill the selected area from top to down using the Gradient Tool. Now hit CTRL+D to cancel the selection.
Next, create a new layer and select above the blue section a 20 pixels height region ( using the same Rectangular Marquee Tool ). Go to Select menu and choose Modify > Smooth and type the value 2. This option will make rounded corners to our rectangle. Fill this region using Gradient Fill and set the foreground to #b6b6b8 and background to #000000. I want a reverse gradient so all you have to do is to hit the reverse checkbox that appears under the menu bar. Also I choose to have a small gradient so you may drag the line(that appears when select the Gradient Tool) out of selected area.
Now select a small region below the black one and hit the Delete key. This way we will delete the down region because we want rounded corners only on top. With the Move Tool (V) we move the black region to reduce the white space formed. If you have followed the steps you will obtain the next image:
I will put the black region at the footer using the same procedure. Now we can say we have the scheme and we have to put text, pictures to animate the web page.
Select the Georgia font, size 12, color white and type Contact | About us. I put these top on the right side. These are links and this position is recommended because it is easy to observe and are separated for the rest of the page. Same font and style for the links on the footer.
Now we must “populate” the content. I chose some plain text, links, and buttons. I used the rectangle tool to draw the rectangle. To have some transformation to the rectangle go to Layer > Layer Style > Blending Options… and choose Color Overlay and Stroke to obtain the effects I added. I didn’t want to insist on the content format. If you have some experience with AdobePhotoshop you can create an put the content wherever you want.
In the end, lets make a button. It seems to be something sophisticated, but it is not. I will use the same technique as we are used. So select the Marquee Tool, then choose Select > Modify > Smooth, set the foreground and background color and select the Gradient tool. Finally add some text on. Here is the final product. Hope you like and try it!
The transformation of this image in CSS will come with another article. Till then, try yourself what I told you here. I attached the .psd file also. Just have a look here! 
Post a comment
RSS/XML