Website Design Builder – 3D Images

build a websiteReason8’s amazing new Website Designer Facility offers some fabulous effects, which can be applied to both text and images to help you create a website with real presence! The Template Designer makes it so simple for website builders to design their own bespoke website header and background with endless options for colour and style. We’ve started to create a series of tutorials to help you get the very best out of this incredibly flexible and easy to use facility. Click here to view all the tutorials so far. In this tutorial, we’ll be looking at the “3D” options available when adding Images.

If you’re starting from scratch with a new trial, simply choose your preferred starter template from all the categories and choices available and click personalise. Don’t forget to check out the previous tutorials if you need a little help you get started.

If you are in the midst of designing your fantastic new header, simply log in to your website and click your header to access the editing options. We’re looking at Image options today so click “Add Images” or double click on any of the images already on your header to edit those. Then Click the 3D button.

You have 3 main options here for the images on your header: Reflection, Shadow, Fade in and Links.

build a websiteReflection.

This is such a clever option. Reflection does exactly what it says on the tin and adds a reflection of your image underneath. This is a great way to add depth and life to your header. You can add this option to all the images you place by simply double clicking each image or uploading new ones of course.

Click 3D and as with many of the options on the template designer, it works by using a slider and you can see the effect being created on your header as you slide.

Another clever aspect of this option is that if your image has rounded corners, your reflection will be rounded to match. Similarly, if your image has square corners the reflection will change to suit. Simply add as much reflection as you want and it will automatically be saved when you exit.

build a website


build a websiteAn alternative to adding a reflection to your images is adding a shadow. This option will add a grey shadow to the bottom and right side of your image.
Simply use the slider to set the amount of shadow you want.
The minute you move the shadow slider, the reflection option will switch off.  As with the reflection option, the shadow will change itself to match either rounded or square corners.

Fade In

This option is one of the many ways to bring your website to life with animation and movement. If you have a number of images, you can set them to fade into place at different times. You can sit a number of images on top of each other and set them to appear over the top of each other one at a time. You could set them in a vertical, horizontal or diagonal line or in a grid, you really can place them wherever you want…, and then have them magically appear on your header at different intervals.

To set the fade in times, simply select each image in turn and use the slider to set different delay times for each of them to wait before appearing.

The Play button underneath the slider allows you to preview each setting you make and so allows you to just play about with different delays for each of your images until you’re happy with the animation.

Link To:

Don’t forget to add links to your home or contact page from the images in your header as this can help make your website more visible to search engines.
Simply highlight an image then choose which link destination you want to attach from the drop down menu.
You can even choose one of the images on your header as a hidden login button for yourself. For instance you could set your logo image with a link to your login page. Only you’ll know it’s there so you can click your logo to access your control panel via your very own private login door. Don’t forget which image you chose though or you may not be able to get in yourself!  One of the perils of too much control!! Te he….

build a website

Comments (Comment Moderation is enabled. Your comment will not appear until approved.)
This blog is running version
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','','ga'); ga('create', 'UA-2227312-2', 'auto'); ga('send', 'pageview');