When slicing up a Photoshop file I first make a copy of the original document. Reduce Canvas Size on layered documents rather than Cropping them I like keeping to nice round numbers, but you can use what works best for your design - just make sure you make a note of the individual image sizes for later use. Eventually these sliced images will fit into ‘ DIV tags’ (container boxes) which will be exactly the same size - to the pixel. It’s important to make sure that the slices are pixel-perfect. This article explains what anti-aliasing is as shown in the blown up area of figure 1. I’ve also removed the menu tabs - I’ll recreate these separately. The only text which remains (in the header) is text created as an image which is a permanent part of the design and won’t be recreated in HTML.
The layout above shows just what’ll appear in the background of the website.
By ‘fluid’ elements, I mean elements that will change page by page, resulting in different positioning and size. This will vary depending on the design, but generally if the website has a menu bar across the top, a header above, a main area for content and a footer, four blocks will do ( figure 1).įigure 1 - The Photoshop slices made clearerĪbove you’ll see that I’ve removed all the elements which will be ‘fluid’ and kept just the background design. When working on a new website design, I tend to slice up the background into four main blocks.
#SAVE FOR WEB SLICES ALWAYS JPG HOW TO#
How to Slice up a Photoshop Visual into Background Images Flatten the background image and crop to pixel-perfect sizes Work out what the main blocks will be Taking the layered Photoshop file, the main slices (the header, footer, navigation panel and main content tile) will be cropped and saved to a new images directory in the new website folder.
0 kommentar(er)
