How to Cut & Map Graphics for Web Design
Web design is a great way to expand your profile and increase your income as a graphic designer. However, if you are a graphic designer breaking into Web design, you will need to cut and map graphics to suit Web layouts. While designing for the Web is similar to print and other digital design, there are some specific aspects to keep in mind to make sure your website layout is ready for development.
Other People Are Reading
Instructions
-
-
1
Create a new canvas in Photoshop by clicking “File” and “New.” Enter a title for the template, a width of 1200 pixels, a height of 600 pixels and a resolution of 180 DPI. The mode should be “RGB color,” and the contents can be marked as “white.” Click “OK.”
-
2
Create guides on the canvas to provide guidelines for the layout. Click “View” in the top menu bar, followed by “New Guide.” Make sure “Vertical” is checked and type “120px” into the “Position” box. Repeat this step, except type “1080px” into the “Position” box.
-
-
3
You should have two guides on the canvas. The guides create a 960-pixel box, which is a popular width for Web design. Everything outside these guides should be considered background images only. Create your design.
-
4
Create guides around your main sections, such as the header, navigation and footer, by holding down the left mouse button on the ruler and dragging. Position the guides around each graphic separately, surrounding each graphic with a box.
If you do not see the rulers, make sure “Rulers” is checked under “View.”
-
5
Flatten your image by going to “Layer” and “Flatten Image.” Do not include aspects of the design that will be created using HTML or CSS, such as menu items or body text. However, if you want these items to be graphics in JPG format, include them in the flattened image.
-
6
Select the crop tool. Crop each individual section by holding down the left mouse button and dragging the box to fit to the guides you created. For example, if you created a header, crop everything outside of the header using the crop tool.
-
7
Click “File” and “Save for Web.” Select the JPG format and click “Save.”
You can adjust the quality of the JPG before saving to reduce the size of the image, further reducing the website's load time.
-
8
Click “Edit” and “Step Backward” to go back to your original, full-size image. Repeat Steps 6 and 7 for each individual graphic.
-
9
You now have your website graphics ready for coding. Provide the Web developer with the original flattened JPG, along with each of your web-ready graphics. The original flattened image will allow the Web developer to see the overall design, but reduces the time cutting the images and mapping out the design.
-
1
Tips & Warnings
Name each graphic according to its use in the design. For example, the navigation items could be called “nav1.jpg,” “nav2.jpg” and “nav3.jpg.” The footer graphic could be called “footer.jpg.” This will help the developer easily find the graphics needed for the coding.
Along with each cut graphic, provide the dimensions. It will help the developer in the coding process. For example, you could write “footer.jpg = 960px by 120px.” Do not include it in the file name; simply state it in an e-mail or document.
References
Resources
- Photo Credit web puzzle image by João Freitas from Fotolia.com
