Make a shabby-style Web page in Photoshop

Source: Internet
Author: User

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.


  • PS Getting Started Tutorial

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.