Very Simple Website Layout In Adobe

Hello to every one to read this this simple very simple website layout from scratch for only beginners level In adobe photoshop cs3.

see some screen of our tut.
1. Create a new canvas like this very simple in the Name field enter Very Simple Layout it is little helpless for us when we save the file it is automatic enter this name for us. In the Width enter 850px and Height 900px optional you enter what ever want but one thing is really a notice able the Resolution enter (72) hit enter remaining setting as it.

2. In the toolbar left side of the screen choose type text tool a little (T) or hit on the keyboard only once (T) it will automatically select the type text tool. Setting up these settings on the option bar choose font type , size , color and Click on the canvas enter some text for your Slogan like mine.

3. Now it time to create our site menu by hitting very lower of layer palette a little notepad like icon near the basket hit it and name the new layer Menu background but this time only we create its background like that image below. Select the Rectangular Marquee too setting up its option then once click on the canvas but don't release the mouse click. With holding mouse left click drag over the canvas you will be notice the selection will move your cursor adjust it between center of the canvas like mine see below. Later i will tell you how to center some portion with alignments.

4. Now with same step we discuss previous create new layer and draw (300x300px) box fill it black its the area where we will show your previous work for some example.

5. Make sure you do not have to deselect the rectangle the selection remain visible if not load its selection back by clicking its thumb with holding Ctrl button. Make sure the Rectangular Marquee tool is selected Right Click in the box and choose Transform Selection.

6. You will be notice the transform control is appear on our box hold Shift key on keyboard and click and hold the mouse left click one of the top right corner drag inward to reduce the size of our selection. Now Create new layer name it Top Right fill it white by clicking on the keyboard (Ctrl + Backspace) but first make sure your color is reset if not hit (D) it will reset foreground color to black and background color to white.

7. Now select move tool in the toolbar very first right side of the toolbar. Hold the Alt key and left mouse button on the top right layer on the canvas drag your mouse to left it will create a new copy of our top right layer same method copy the remaining two see below for name and locations of its position on the canvas.

8. Now next step is to create our best product create new layer name it your best product draw very front of our four boxes new box like the picture below fill it black.

9. Now its easy step i don't show you every step of this only screen shoot of it with the type text tool enter About Us Heading and write about yourself or your company in the end of about us section add read more link for more of your readers for yours or products.

10. In front of it create a line with line tool in the toolbar for separation of in these then enter some of your partners list.

11. Now our footer area is remain create it first create new layer name it Footer then with Rectangular Marquee tool draw a box like that fill it black.

12. Enter your Copyrighted text and privacy policy .

13. Last thing our menu is some missing now create text for our menu like that setting.

This is the Final full Website layout very simple layout in adobe photoshop cs3.


SEO Services said...

Thankyou Mehmood

I have been punching my head with my designers a lot about some basic things but they are whatever they are

Thanks for this basic suggestion needs for the PSD designing.

Cheers and keep posting such useful tips

Kells said...

Thanks for the information. I would also like to advise beginners to keep your files organized since its a great idea to save your images or files to a separate image directory .

web design company said...

That was really an excellent website layout.Just interesting ! said...

This is a great tutorial, especially for beginners. When I first started designing layouts i had a lot of ideas but i didn't know how to organize them. This is a simple and clean layout. Great job.

organizare evenimente corporate said...

Great tutorial, great job you did for the beginners! Thanks for the information.

Post a Comment

Hey readers, plz post comments related to topics only... :)

Ecommerce website development