Photoshop is a graphic design and photo editing application developed by Adobe. It is the market leader in digital image editing software. Its capabilities include the ability to create and manipulate graphics for print and web usage. It also includes many features to assist users in website design and coding. Not only can the software optimize images for web usage, it can also generate cascading style sheets and the HTML needed to include graphics in web pages.

Difficulty: Moderately Challenging Instructions
Things You'll Need
HTML editing software
 
Suggest Edits

1
Create your image. When you have finished, use Photoshop's "Slice" tool to divide your image into sections. Use the "Slice Select" tool to rename each section with names that correspond to the organization of your site. For example, if your image includes site navigation buttons, name sections in that area "nav." These sections will correspond to "div" tags in your CSS code.

2
In the menu bar click "File" then choose "Save for Web & Devices." Choose "2-Up" or "4-Up" from the tabs above the image area for a selection of previews. Choose the options you want for your image in the "Preset section." Select the preview of the image that best matches your visual specifications. Click "Save."

3
Type the name of the file in the "File Name" field. Select "HTML and Images" in the "Save as type" field. Select "Other" in the Settings field. An "Output Settings" dialog will appear. In the Settings drop-down select "Custom." Select the "Next" button until you see the "Slice Output" section. Select the "Generate CSS" radio button.

4
Choose the output format of the CSS in the Referenced menu. For an external stylesheet, select "By ID" or "By Class." Your CSS will be organized by whatever element you choose. If you want your CSS to be inline (included at the top of your HTML page) select "Inline."

5
Complete selecting other options in Output Settings. When you are finished, click "OK." In the Slices field select what slices you want to be included in the CSS output. Make sure you have navigated to the place where you want the file to be located in the "Save Optimized As" file manager area. Click "Save."

6
Open the HTML file you just created in your HTML editing program. Your HTML code, complete with CSS, will be wherever you saved it on your computer and ready to either insert into a web page you create or as a standalone web page. Modify the code, if necessary, to your liking.

7
Open the file in your web browser of choice to view the file to check for any problems and to make sure it matches the image you created in Photoshop.