Design - Upload Image and Style your Website

The following tutorial explains the process for uploading images, selecting a Layout Style and coloring your website.

Design - The Design Tab Interface

There are two options; one to upload and crop an image and another to style your website design:

 

Upload + Crop

1. Load Image - Upload Image for the Header Design

  • Your image must be either a JPG or GIF format. JPG (JPEG) images are produced by digital cameras and are the most common file format for pictures found on the web.
  • Your image must be a minimum of 896 pixels wide and 280 pixels high. Larger images will be automatically resized (scaled) to fit.
  • Click on the BROWSE button and select your image from a directory/folder on your computer.
  • Click the LOAD button and your image will appear on the screen. A series of moving red bars will indicate that the image is loading. The file loading process time will vary according to the file size, bandwidth and other factors - so please allow time for the image to load (although a reasonably large file using broadband should load within thirty seconds).

 

2. Crop Image for the Header Design

Once your image is loaded you will be presented with a framed area that you can drag to the position required to for your header design.

Once the position is set to your requirements then simply click the CROP button to create the header image. You can RECROP your image at any time.

Color + Style

Below is a scaled down view of the design interface. It is a simple point-click-refresh process where you can either save at any time or cancel out and revert to the previously saved design.

 

Color Swatch automatically generated

A color swatch is automatically generated based on the colors of your image. The color swatch can be used for six components of the web design (title,sub title, page text titles, navigation, widget/footer,background) as shown in the above user interface display.

 

Complete Color Control

Along with the color swatch is the option to choose a custom color.

Use the custom color button to:

  • change the tone of a swatch color - Your swatch colors are displayed in the Custom Color control box so that you can use a swatch color as your start point and change the tone with the slider control to the right of the control box
  • select a random color or place the hexidecimal color value (as per 424A3A in the example here) in the text box provided.

 

 

Select Website Style

Click on a Layout button option and the design will be automatically refreshed with the new Layout Style. Your existing font and color selections will be retained.

 

Select Website Title Font

Click on the arrow in the 'drop-down' box for a selection of many fonts that you can use for your heading. You can set the size to large or regular and click on the REFRESH DESIGN button to see the effect. The content of your title text is set separately so that you can modify with ease.

 

Command Buttons

There are three commands.

  • REFRESH modifies your design display with any changes you have made to your font and color selections.
  • SAVE saves your current image and design selections ready for publishing and later editing.
  • CANCEL returns to your settings from your previous SAVE and EXIT command.