Make a shabby-style Web page in Photoshop

Photoshop is a great tool for web design, especially if you want to use a lot of pictures and brush effects in your design. In this tutorial, I will show you how to complete a shabby style homepage design. We're going to design the header, sidebar, Main, footer, and all the very textured and worn-out effects.

First step

This time we're going to use Photoshop to create a rundown-style web design that takes a lot of pictures. Since this is an intermediate difficulty tutorial, I will skip the explanation of the basic steps. First create a new document with a width of 950 pixels high 800 pixels and a resolution of 72dpi. Open the ruler and drag the boundaries of the document, which will be the best area for the design. I plan to design a fixed-width layout.

Select picture Canvas size, increase width and height to 1200 pixels and 1000 pixels, and do this for wide display separate rate design. Then add the guides to the area where you plan adding content (top, nav bar, sidebar, footer).

Let's assume that the ultimate goal of this design is a wordpress theme, so we need a top page, a navigation bar at the top of the page, and a sidebar on the right side. As shown in the following figure. The background color is then filled to #7a8173.

Classification:

• PS Getting Started Tutorial