Digital Workshop Center Trade School

A project in Adobe Photoshop can be finished in print or on the web. For each, there are many considerations to make including a color model, file size, and the overall layout design.

However, the Slice tool in Photoshop empowers you to transition a Photoshop project to the web easily.

The Slice tool allows you to create unique sections (or Slices) of your project. The actual Slice can be created by using the Slice tool and drawing it manually, or you can use existing guides and create your slices from the guide intersections by clicking the ‘Slices from Guides’ option in the toolbar.

After a Slice is created with the Slice tool, you can use the Slice Select tool to control and manipulate it. Each Slice has options and can be named and controlled independently as needed. In addition, you can set a background type, exact dimensions, URL, Target, Message Text, and Alt tag property in the Slice options dialog box.

When you have finished fine-tuning all of your Slice options and are ready to export to the web, you are ready to use the ‘Save for Web and Devices’ command. This feature of Photoshop allows you to prepare every Slice individually or all of them as a whole for the best optimized web file type and performance.

Lastly, when you click ‘Save’ from this screen, the next dialog box will give you two additional options than normal: ‘Settings’ and ‘Slices’. Settings will allow you to choose between different output styles for your Photoshop project including an HTML table or HTML/CSS ‘div’ tags. You should always use the div tag option if this project is an entire layout for a web page.

The ‘Slices’ option of the ‘Save’ dialog box will allow you to save all slices or individually selected slices. This gives you the flexibility to update one section of your design and re-output it, while not having to completely start from scratch.

In the end, Photoshop will save each Slice as a separate image file and generate the necessary HTML/CSS to get your web page started. For simple web pages, this may be all you need. However, more complex pages may require additional work to complete the web design.

I always try to start a web design in Photoshop as a wireframe and then convert it to a web page. The Slice tool allows me the freedom to do this with no additional effort or web programming necessary. The next time you are using Photoshop, try out the slice tool for yourself and see if it helps you as well.

[Originally posted in the Coloradoan on 7/17/14]