Her

Home Photoshop Tutorials Web Layout Modern Layout

Modern Layout

Author: Crunked-Designs.com Author's URL: www.crunked-designs.com More by this author

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.

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.

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.

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.

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.

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.

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

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
Click to enlarge