SigTutorials > Photoshop Signature Tutorials > Other Tutorials > Make your website stand out with an eye-catching 3D design



Make your website stand out with an eye-catching 3D design

Posted on March 30th, 2013. Written by JaspervD.

A lot of modern forms of design seem to have some kind of 3D element in them, and a few simple touches can make any kind of website stand out for the end user. The free website builder of 1&1 (website.1and1.com) includes a number of features that allow the designer to introduce 3D elements – regardless of ability and experience.

In this post I will give you some tips on how to add 3D elements to your website

These same techniques can also be applied to other website building methods, and existing website owners can even make a few tweaks to their existing content to introduce a 3D version.

The ‘Quick Fix’

Any reputable website builder prides itself on the principle of WYSIWYG – ‘What You See Is What You Get.’ Because of this, a quick browse though the collection of ready-made templates will usually show the designer existing options with a touch of 3D design. These can be instantly implemented into the user’s homepage, and the required content can be inserted around the 3D design touches. Animated buttons are also usually included as standard, and a common feature of these is the ability to make the button ‘raised’ when the user hovers their mouse over the target area. Making the button spring away from the rest of the page is a fast and easy way to create a localised 3D effect.

Flash Vs HTML5

Both of these website design methods are popular, although HTML5 is becoming more and more commonplace in the website building community. Having said this, both of them have features that are suited to creating 3D website elements. With the more established Flash programming method, Flare3D is an example of a set of tools that have been created to allow designers to easily incorporate 3D flash features. This method is suitable for any device that is capable of displaying flash, including a number of smartphones, tablets and Smart TV systems. HTML5 is considered by many people to be a potential ‘Flash Killer’ due to its capabilities that outperform Flash, and this is due to the versatility of the language for producing animations and interactive applications. However, there is also a sense of caution around HTML5, and this revolves around Internet Explorer. On computers running Windows XP, Internet Explorer may struggle to display HTML5 websites correctly, and users cannot upgrade to a version of IE that will allow them to view HTML5 content (IE9 or later). For this reason, it is advisable to install Chrome or Firefox, but this may not always be possible in corporate environments with systems that are locked-down to IE.

Plugins

If a designer feels that they are neither an expert nor a complete beginner, it may be a good idea to use ready-made plugins and widgets that add extra flair to a self-created website. To make the whole process a little bit easier, self-contained HTML and Flash widgets can be ‘cut and pasted’ into an existing template. Some preliminary research on Google shows 3D-based plugins/widgets that will add animated menus, photo galleries, avatars, content slideshows and other visually appealing content. If the 3D aspect is extremely important, designers can even embed 3D videos from YouTube that can be displayed on monitors that are capable of Active/Passive/Stereoscopic 3D content.

Photo editing software

Designers with a real talent for creative and artistic activities will appreciate software packages such as Photoshop and CorelDraw. With the correct resolution settings, a precise 3D background can be designed and then simply dropped into the background of the website. Creating a 3D static background will also look impressive as it remains in place while other content scrolls and pans within another layer.

1 Responses »

  1. Lol , nice tut – thanx.

Leave a Comment

Upload Image

You can include images in your comment by uploading them below. The image will automatically be added to your comment!

Premium Login

Latest Forum Discussions


Sign up on our forums to get access to
new tutorials and resources!