Image Slicing with Photoshop
How to Create an HTML Table from a Photoshop Image
Although creating a website should be done using CSS, sometimes there is a need to create them using tables, such as creating an HTML email. Below is a simple, step-by-step process on how to create a table by slicing in Photoshop.
- Using the rulers, pull down guides from the top and left to the areas in which you want to be sliced.
- Using the slice tool, combine slices by selecting the first slice using the command key, then selecting the remaining slices by holding down the shift key. Using the control key select "combine slices". Do this for remaining areas.
- Save your file for Web and Devices and from the dialog box and choose Format: HTML and Images; Settings: XHTML, and Slices: All Slices.
- Name your folder accordingly and Photoshop will automatically generate an HTML file along with a folder containing all the images from slices.
You're done!
The above image of the Tri-C homepage was created using slicing images from Photoshop.
Video Tutorials
To learn more on Image Slicing Using Photoshop view the two-part tutorials below: