website promotion banner
eturnkeys
Your Ad Here
Photoshop  Home Photoshop Web Layout Arhitecture Layout
rss

Arhitecture Layout

Author: tutmaster More by this author


1. Open a new document and fill the background with a linear gradient #2b1d10 to #5a4425.

Arhitecture Layout image 1

2. Make a rectangular selection and fill it with the color #866236. Open the Layer Style Window and add the next settings. Now we are going to make the search bar. Make a smaller rectangular selection, fill it with the color #fff3e2, then add a 1 pixel stroke using the color #e7a461. I used a carbon pattern which I downloaded from www.brusheezy.com You can also find some cool patterns on www.stock-textures.com and some very good brushes on www.photo-shop-brush.com. Write the word ‘Search’ next to the bar you have just created.

Arhitecture Layout image 2

3. Make a rectangular selection, fill it with white, then put a photo inside this rectangle. You can find nice photos on Flickr or Deviantart. Make 2-3 photos like this, then make some scotch tapes. Follow the next link to read a tutorial about this www.photoshopstar.com. Arrange the photos and the scotch tapes to obtain a nice header. I also added a pencil. Add a little of shadow to all the header elements.

Arhitecture Layout image 3

Arhitecture Layout image 4

4. Write the title of the site using the color #c69755. I added a nice box which I downloaded from www.theiconlab.com.

Arhitecture Layout image 5

5. Follow this link flyupload.flyupload.com and download a paper texture. Open the image in Photoshop, then go to Edit > Define Pattern. You can close the image now.

Arhitecture Layout image 6

6. Make a rounded rectangle with the radius of 10 pixels and the color #ffe9c8. Now add the content. I used the font Verdana, the sizes 18 and 28 pixels, the colors #1c1208 (for the text) and #f39b17 (for the links).

Arhitecture Layout image 7

7. Now we are going to create the sidebar. Make a smaller rounded rectangle using the color #fdd8a3 and the same radius of 10 pixels. Then open the Layer Style and add a Pattern Overlay using the same paper texture.

Arhitecture Layout image 8

8. Duplicate this rounded rectangle two times, place them bellow the first rounded rectangle, then add the content of the sidebar. I used the color #5c4627 for the titles and the color #9c662f for the links.

Arhitecture Layout image 9

9. Now we are going to create the menu. Make a rectangular selection and fill it with the color #f7cf93. Use Free Transform (Ctrl + T) to rotate it. Repeat this step two times and use different colors. Then add the text using the color #5c4627.

Arhitecture Layout image 10

10. Now the footer. Make a rectangular selection and fill it with the color #2d1f11. Open the Layer Style window and use the settings from the next image. I used a carbon pattern from brusheezy.com I added another photo like those from the header. Here is the link to the original photo flickr.com.

Now write the content for the footer. I used the color #ffe9c8 for the titles and #fed596 for the links.

Arhitecture Layout image 11

This is my final layout.

Arhitecture Layout Tutorial: Final Result



Author's URL: www.talk-mania.com

Rate this Material: Bad 1 2 3 4 5 Excellent
print this page tell a friend subscribe to newsletter subscribe to rss

Add comments to "Arhitecture Layout"