How to Convert a Photoshop Template to Frontpage

Combine digital photos and graphic design on your psd canvas for the look you desire for your website template.

For a graphically pleasing webpage, many designers find it easier to create a design using Photoshop and then convert the design to html for FrontPage. Photoshop CS3 or higher has the functionality needed to create webpage templates from psd files. With Photoshop templates, it is possible to create designs you cannot achieve with html alone.

Things You'll Need

• Photoshop CS3 or higher version software
• FrontPage software

Instructions

1. Open a blank image file. When complete, this image file will become your Photoshop web page template. Name the file and set properties to specify image height, width and resolution.

2. Select a background color and apply it to your psd template file.

3. Drag a digital image to the desired location on your template psd file. Resize the digital image as desired.

4. Add other design elements of choice. Designate navigation button locations by using the Rectangular Marquee Tool. Click on the tool, then position the tool at the desired location on the image. Click and drag until you obtain the desired size. Add headers and footers, if desired, in the same manner.

5. Visualize your template as a group of rectangles.

6. Slice your psd web page template into rectangles using the Photoshop slice tool. Select Slice Tool and point at the corner of the first rectangle you wish to create. Click and drag until you outline the desired section. Continue in this manner until all portions of the website template have been made into sections.

7. Click on Slice Select Tool and point at a slice. Right click on your mouse so the properties box will pop up. YOu will treat each slice as a separate image after you convert your psd file into a template, so it is important that you name each slice in a manner that you will readily recognize when you edit your html. If you intend the slice to become a navigation button, specify the URL of the web page to which you will link this button.

8. Export the psd file to ImageReady. Optimize files for fast loading speed. Save solid colors as gif or png files for fast load time. Save digital photos as jpeg files for sharpness.

9. Save your optimized psd as html. When you select "save optimized as," a box will pop up allowing you to save your html template on your computer. If you prefer, you can choose "Jump to" and go directly to FrontPage for editing and saving to your website.

Tips & Warnings

• Use keywords in your Alt Tags for each slice to improve Search Engine Optimization (SEO) of your website.

• Use the preview tool to see how your template will look in a browser.

Resources

• InTheOS: Photoshop Tutorials