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

1. Start with a new document, 700x550 pixels, and a white background.

2. Using the Pen Tool (press p) make an outline similar to mine, 95% the width of your document.

image 1

3. Go to the Paths palette, right click on your Work Path, and choose Make Selection with 0px feather.

4. Return to the Layers palette, create a new layer on top of your Background layer.

5. Press d on your keyboard to reset the colour palette to black and white.

6. Set #333333 as your foreground colour.

7. Press Alt + Backspace to fill your selection.

8. Holding Alt, select an area above the middle of your image, and select an area below the middle of your image. This will deselect these areas, and leave only the middle selected.

image 2

9. Create a new layer.

10. Press d on your keyboard to reset the colour palette.

11. Go to Filter > Render > Clouds.

12. Press Ctrl + d to deselect your image.

13. Now apply Filter > Pixelate > Mosaic with a cell size of 15px.

14. Now tidy up your image with the Rectangular Marquee tool. Select the areas that have gone over your grey area.

image 3

15. Hit delete on your keyboard to delete these overflow areas.

16. Press Ctrl + U and make sure Colourize is checked. I used 196, 55, +31 for this, but you can make this whatever colour you like.

17. To tidy things up, you will notice there is still some grey on the left and/or right hand side of the blue areas due to the pixelation not fitting perfectly, but never fear. Use the Rectangular Marquee tool (again..) and select these areas. You might need to zoom in to do it properly.

image 4

18. Switch back to Layer 1, and hit Delete on your keyboard to remove the excess part.

19. Right click on Layer 1, and select Blending Options. Select Stroke with Size 1; Position Outside; Blend Mode Normal; Opacity 100%; Fill Type Colour; Color #000000 (black). You should now have a fine border around your entire image.

20. Set white (#FFFFFF) as your foreground colour.

21. Now time for some text for your menu. Select the type tool (press t), and type out your menu in one sentence leaving either spaces or | between each menu item.

image 5

22. Select the Pencil Tool, and set the brush to a 1px square, but change the spacing to 500%.

23. Now, holding shift draw a box where your text will go.

image 6

24. Add a title to your image now using the Type tool again (press T).

image 7

25.Your modern layout is now complete! I added a few minor details to jazz it up a bit. I won't go into details for these, but feel free to change the layout with your own perfonal touchs. I applied a Gaussian Blur to the blue area because i wasn't happy with the pixelated look. Also added a lens flare to it. Then I added the arrow simply with the Polygon Lasso Tool, and the word HOME. Hope you found this tutorial useful! Here is my final, click on it for the full-sized preview.

Modern Layout Tutorial: Final Result (Click to enlarge)
Click to enlarge


Author's URL: Crunked-Designs.com
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 "Modern Layout"

Only registered users can write comment

Reader's comments