Slicing in Photoshop and Preparing for Coding

Now that you’ve built a website in your graphics editor, the last step you need to take within your editor is to make a web page out of the layout you’ve created. This is an important step toward getting your content ready for coding in the next book. Adobe Photoshop and Gimp both have different ways of achieving this. Guillotine is an extension to GIMP, which you will have to download and install first, that allows you to slice your design into multiple images that you can place into a page. Here is Adobe Photoshop and the GIMP ways of accomplishing this:

Adobe Photoshop

1. Open your document, select the slice tool on the left toolbox and begin to draw a slice onto the image as seen below:
2. Continue slicing until you have a separate image for every element of the web page. I recommend that your entire body, however, is part of one slice because we can replace that slice with actual HTML text later on in the book.
3. It is a good rule of thumb to divide your image into as many as possible, which will increase your web pages browser load time. The final step is very easy, simple go to “File”, “Save for Web”, select the format you want (I recommend choosing a GIF at High Quality, but it really depends on your preference of quality), and select “Save”.
4. Select “Save as Type” and choose “HTML and Images”, name your files something appropriate (in my case it’s “divas.html”), and hit “save”.
5. Open your file (where ever you saved it, I recommend making a folder like /divas/divas.html to work in) in your web browser.

Wasn’t that simple? In just a few minutes we were able to slice an entire website and render it in our web browser.