Site plans are an essential tool for any web designer or developer. They provide a clear and concise way to communicate the layout of a website, and can be used to plan out the structure and content of a site before any code is written.
There are many different ways to create a site plan, but Photoshop is one of the most popular and versatile tools for this purpose. Here’s how to create a site plan in Photoshop:
1. Open Photoshop and create a new document. The dimensions of the document will depend on the size of the website you’re creating, but a good starting point is 1200×800 pixels.
2. Create a new layer in your document and name it “Background”.
3. Using the Rectangle Tool (U), draw a rectangle that covers the entire canvas. This will be the background of your site plan.
4. Double-click on the “Background” layer to open the Layer Style dialog box. Choose a color for your background (I usually go with white), and then click “OK” to close the dialog box.
5. Next, we’ll start adding elements to our site plan.
Create a new layer and name it “Header”. Using the Rectangle Tool (U), draw a rectangle that spans the width of your canvas and is about 200 pixels tall. This will be the header area of your website.
6. Double-click on the “Header” layer to open the Layer Style dialog box. Choose a color for your header (I usually go with light gray), and then click “OK” to close the dialog box.
7. Now we’ll add the content area of our website.
Create a new layer and name it “Content”. Using the Rectangle Tool (U), draw a rectangle that spans the width of your canvas below the header area (make sure there’s about 200 pixels of space between the top of your content area and the bottom of your header). The height of your content area will depend on how much content you want to include on your website, but a good starting point is 500 pixels tall.
8. Double-click on the “Content” layer to open the Layer Style dialog box. Choose a color for your content area (I usually go with white), and then click “OK” to close the dialog box.
9. Now we’ll add our sidebar area.
Create a new layer and name it “Sidebar”. Using the Rectangle Tool (U), draw a rectangle that is about 200 pixels wide and spans from the top of your content area to the bottom of your canvas (make sure there’s about 200 pixels of space between the left edge of your sidebar and the right edge of your content area). The height of your sidebar will depend on how much content you want to include, but a good starting point is 500 pixels tall.
10. Double-click on the “Sidebar” layer to open the Layer Style dialog box. Choose a color for your sidebar (I usually go with light gray), and then click “OK” to close the dialog box.
In conclusion, follow these steps to create site plan in Photoshop: 1) open Photoshop and create new document; 2) create new layer in document & name it “Background”; 3) using Rectangle Tool, draw rectangle that covers entire canvas; 4) double-click “Background” layer to open Layer Style dialog box; 5) choose color for background; 6) click “OK” 7) next, start adding elements by creating new layers; 8) using Rectangle Tool, draw rectangles for each element; 9) double-click element layers one by one 10) choose colors for each element; 11) click “OK.
