Creating Web Designs in Photoshop Using the Slice Tool
The fastest way to create a new web site is to design the look and feel in photoshop – then slice the images and save for web – this will save the images, create a table and write the HTML code for you. The images and tables will need some additional work in Dreamweaver – but this permits the designer to create almost any design they like and convert it to a web page. To get started you need to create a new design – start with 800 x 800 pixels, 72 dpi, turn the rulers on so you can create guides. Alternatively you can take some else’s design and slice it up. Finally, open the page.html in Dreamweaver, delete blank areas where text will go and create rollovers buttons. This is fastest way to make professional looking web sites, however it depends on yours photoshop skills and may require several attempts before you get acceptable results. Tables will also collapse and expand unexpectedly – to fix this you will have to add “shims” and tweak the table HTML code. With a bit of practice you will be making professional looking web sites in no time and using photoshop saves you from programming complex tables and position the elements.
To start a new web site design:
1. In photoshop select File New>image 800 x 800 72 dpi, background white, RGB mode to create you blank canvas.
2. Select view>rulers to turn on the rulers for making guides.
3. Drag guides from the rulers by placing the move tool over a ruler – use your mouse, then click and drag – pull the blue guide lines to the position you want on the canvas.
4. Open the layers palette and create a new layer – you must do this if you wish to add special effects like bevels and emboss.
5. Use the rectangular marquee tool to draw a rectangle e.g. column down the side and then fill with a solid color, layer>layer style add a bevel, then add a text title – see below.
6. From here you can add a logo, buttons and pictures. Once you have a design you like – its ready to show the customer – always save the design as a .psd file since you will probably have to make changes. Once the customer or your boss approves the design its ready to be sliced up for the web.
7. Above is a simple web layout with the logo, title and several buttons ready to be sliced and saved for the web. Start with simple straight designs then add curves using the pen tool when you become more experienced with photoshop.
8. Next select the move tool, and place over the rulers then click and drag blue guide lines over your design. Where to position them takes a bit of practice and experience, but you want to divide the design into smaller pieces that will be converted into table elements.
9. To use the slice tool, you select it from the tool bar then drag the tool around the guides to isolate each part of your design. After you draw a box around the area you will see a number on each slice. You may have to experiment with the best places to slice your design so expect it to take a few tries to get the best results.
10. Select Save for Web> Set the image format to .gif or .jpg (usually we use .gif), then click OK – and be sure to select save as .html and images – then name your web page .e.g template.html and save it into a folder. To view your page – go in the folder and load the page into your favorite web browser.
11. You should see a page called template.html and a folder called images – double click on the .html page to load it and view it in your web browser. Now the page is ready for editing in Dreamweaver or other HTML editor.
12. Open the template in Dreamweaver and delete the white background graphics in the middle of the page where text will go – add some text. Note when you add text, table or pictures your graphics such as your buttons may start to move! This is where a bit of experience will help. You can add carriage returns under the buttons, or a row of periods where tables start to collapse – then make the periods the same color as the background. Alternatively you can insert invisible 1 x 1 pixel .gif files and stretch them to act as a shim to prevent the tables from collapsing. With a bit of tweaking you should be able to keep the design looking pretty good – but sometimes we have slice the image another way.
13. The last step is to create rollover buttons – identify the image slices used for each button (place your mouse pointer over the image and look at the properties box, each image willl have a name and a number. E.g. welcome button is template07.jpg - open this image in Photoshop. Modify image for example make the text white or the image lighter or darker – then save the image with the same file name but template07_down.jpg or something like that so you know one is the upstate for the rollover and the other down state. Use Dreamweaver to add the rollover buttons and links.
You may want to modify the background color of the web page and other components, but this is the starting pointing. We normally create about 5 working pages link them up and then show them to the client before proceeding by uploading them to our password protected area on the web. If the client approves the working prototype – we add the rest of the content and images and complete the site. In some instances we may have to go back to the original design so always keep a .psd workfile so you can do this, and then we may have to reslice the image again.
TIPS in order for you web site to fit an 800 pixel wide screen make sure your tables are 760 pixels wide or smaller so the user does not have to scroll sideways. Use the fewest number of slices to keep the tables simple as they use are usually easier to fix if they start to move. Finally learn how to use shims to prevent tables from collapsing.
To add curves to your design – you will need to spend some time learning Photoshops pen tool.
Source : http://www.scienceandart.org/htmlcss/web_slicing.pdf - by R. Berdan
