• Home
• Product Description
• Optimizing Photos
• Heading Background
• Screenshots
• Get Free Trial
• Contact Us

Webstyle 4

Create Heading Background

This series of screenshots taken from Webstyle 4, outlines the procedure that I used to create the heading backgrounds for our free web template collection.

Whether optimizing an image or as in this instance creating a background image from a photo, click Photos on the main screen.

Then using normal procedures browse to the image on your computer or digital camera that you want to load. Click on the image and click Open.

Choose an option for sizing the photo into the editor window.

The photo loads in the editor as shown below.

Click the Size and Crop button.

When you click Size & Crop the tool bar shown below appears below the image. If you want to resize the image to a specific width, enter the number in pixels in the width box and hit Enter.

The original image is regenerated in the editor window and the new height is calculated automatically.

When I was creating the background for my page heading I set the width to 760 to give me a few pixels to work with when I cropped it to 750 pixels. You don't want any fringes on a background image so always set the width a little wider than the final crop width.

Note: If I was just optimizing this image I could now click Save and choose the format ( jpg, gif or png) and then set the other parameters for optimization.

When you click Size & Crop the cursor turns into a Cropping tool. Just hold down the left mouse button and slide it over the picture watching the photo dimensions as you cut out your slice for the heading. If you don't get it right you can always right click on the image and Undo all Edits. When you get the slice right Click Crop.

In the image below I've cropped the resized image to 750 pixels wide and a height of 284 pixels. I'll use this as my document heading. Now I Click Save

When I click Save, I have the option of exporting a jpg, gif or png file format.

If saving as a jpg you'll see the quality of the image change as you slide the Quality percentage bar.

If saving as a gif or png you'll be able to easily adjust number of colors, make the image transparent or set interlacing. Sounds complicated, but it's all just button clicks.

There it is. That's how I created the headings for the free web template collection. It's even how I created the headings and photos for this website.