Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Web Design Company Layout

Web Design Company Layout


Open a document in photoshop

Size 760 x770
Background color : #333333

Then add a nice image on your layout.

Click to enlarge
Click to enlarge

Then Select the rectangle tool and add a shape on the right of the image

Click to enlarge
Click to enlarge

Now select Line tool, and start creating some simple lines. When you create lines be sure you will use different weight

Click to enlarge
Click to enlarge

Now create a new pattern

Now Create another document:

image 4

Zoom this document to 1600% and with the Pencil Tool Draw 3 points:

image 5

After that go to Edit > Define Pattern...

Choose a name for your pattern and press OK

Then you can close this document.

Create a new layer ( Ctrl+Alt+Shift+N )

Select Marquee Tool and make a selection like mine

Click to enlarge
Click to enlarge

Then grab Paint Bucket Tool. Be sure you will select the pattern we have created , and press one time inside your selection with the paint bucket tool

In the next image you can see more changes. This is done with the same technique

image 7

Now add some text on your layout

Click to enlarge
Click to enlarge

Then create another document.

The size should be 5 x 5 pixels

With a transparent background

Zoom the document to 1600 % , and with the Pencil Tool create the following arrow

Be sure that you have the brush size = 1 pixel

image 9

Now select Move Tool and drag this arrow on your layout. Duplicate the arrow a few times and place it like in the next image

image 10

Now create another document with transparent background

Size should be 11 x 10 pixels

Zoom the document to 1600 % and make the following drawing with the Pencil Tool ( brush size 1 pixel )

Be sure you set the color of the pencil tool to #333333 ( the color should be the same as your background

image 11

Now Select Move Tool one more time and drag this small pixel art image to your layout. Duplicate this layer a few times and place it between your text from navigation bar

image 12

Now add more text on your layout and also some image. i will add a image with another tutorial you can find on Talk-mania.com

Click to enlarge
Click to enlarge

You can add another details on your layout. For example select rectangular Marquee Tool , Create a new layer then make a selection like in the following image

image 14

Then go to Edit > Stroke and use the following settings

image 15

Click ok. then press on Ctrl+D to deselect

This is the result

image 16

Select Line Tool. Set the weight to 20 pixels and make 2 vertical lines like in the following image

image 17

Then Create another document . Size should be 15 x 15 pixels.

With a transparent background

Zoom it to 1600 % , Select pencil Tool and make this pixel art drawing

I will make the drawing with black, but please use a white color in your document

image 18

Then With The move tool drag to your layout and place it in the same way i did

Click to enlarge
Click to enlarge

I think i am ready with this layout. i can add as many details i want. but i am sure you can add more details then me

This is my final result

Web Design Company Layout Tutorial: Final Result (Click to enlarge)
Click to enlarge

I hope you like it.



Author's URL: amitk
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
print this page subscribe to newsletter subscribe to rss

Advance your current skills or acquire new skills in Photoshop by creating projects using our step-by-step tutorials. More Tutorials: Most Popular Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

Add comments to "Web Design Company Layout"

Only registered users can write comment

No comments yet...