Tutorial: Create HTML from your PSD using SiteFusion Designer

One of SiteFusion’s best features is its ease of use – if you can drag and drop with a mouse you can create a professional looking website. Yet, the online system was developed by web designers for web designers so it’s not just for ‘want to be’ professionals. The introductory wizard helps cut time-consuming steps and guides you through step-by-step so you won’t forget one of the basics that it is all too easy to miss. Its theme and template based but they are fully customizable and that’s where the magic begins. Layout is easy to segment, align and arrange – just drag and drop. Adding elements are just as easy to move, change in size, add and delete. Logos, text chunks, image galleries, downloadable documents, you can add feeds from Twitter or Flickr accounts too.

The SiteFusion Designer option really does bring your designs to life, creating your own template. Do you have a concept for a site but are not sure how to convert that to code? Don’t worry. SiteFusion Designer can import your layered PSD file, automatically slice it up and present it in web compliant template format all ready for your online customers. It is easy to get your own unique design up as a usable website without hours sweating over your keyboard.

AUTHOR: Tim Fuell | Technical writer with web hosting specialists 123-reg.

TOOLS: SiteFusion Designer | Try it at http://www.123-reg.co.uk/sitefusion/

01. Prepare your PSD

First prepare your PSD for importing. In Photoshop, ensure you save your design as a layered image at 72dpi in RGB Colour 8 bits/channel mode. There is no limit on dimensions but the default active content window is 960 pixels wide so that is recommended. Your image should be no larger than 15MB and preferably less than 5MB.

02. Finalise your design

Decide what parts of your design are essential template elements and what are merely placeholders for content. In Photoshop hide the placeholder layers and select all the remaining visible layers. Choose ‘Merge Visible’ from the layers menu. You will now have a single layer containing all the elements ready to form your SiteFusion template.

03. Layers for regions

SiteFusion uses non-overlapping layers to create CSS for areas of your template. In Photoshop use the ‘Layer via copy’ command to split your design into regional layers, renaming them using these terms: header, sub-header, feature, sub-feature, main, footer & background. If you want a layer area to have flexible height include the word flex in brackets after the layer name.

04. Naming and size

After saving the image, login to the 123-reg Control Panel. From the Create your Website section, click the SiteFusion icon and select login for your Site Fusion package. At the SiteFusion main menu, click the Import a Photoshop Design option.

05. Naming your template

Your PSD will be created as a template. Type the name for the template and choose the content width from the drop-down box. If you want a background colour click the box to select, before using the Design Grid drop-down to choose your column layout. Click on the select PSD File button.

06. Find your PSD

In the pop-up window browse to the file location on your computer where you saved the amended layered PSD file. Ensure this is the one prepared for your template with the renamed layers based on the regions of the page template. Click the Open button. Your PSD will now be uploaded, the template built and site prepared.

07. Customise your site

Once loaded you can use your template to create further pages in your site. You can now upload images, add text, etc. First click on an area of your page and drag to create regions and columns to match your CSS layers. You can now start adding content to your site.

TECHNIQUE | Find out how to do more

ADD TEXT

01. Content Widgets

Text Block is one of the many content widgets accessible from the left hand menu in SiteFusion. Click ‘Content’ to open the Content pane.

02. Drag your block

Drag and drop the text block icon to the right hand pane into your page design. You can now re-size the block to fit.

03. Edit the text

Double-click the text block to open the settings menu – displayed at the bottom of the pane. Now amend the words, format them, change their style, tweak CSS and HTML.