Design – 404 Page of BlumBlum.com

PLEASE NOTE: BlumBlum.com website does not exist now.

Crystallization of the idea

A lot of Photoshop work went into the design of the free wedding invitation template website blumblum.com. The checkerboard pattern in Photoshop that represents a transparent image led to the idea of making this 404 page.

Click here to visit the 404 page of blumblum.com.

Transparent 404 page

To give the feeling of transparent ice or transparent glass to the page, SolidWorks software is used to render the images. The 404 page consists of a ‘404 error,’ a matrix just like the blumblum homepage and a message of ‘File Not Found.’

Alphabets made of Glass or Ice

In 3D softwares like 3dsMax, text can be directly entered and rendered using any texture. It is a mystery that this option is not available in SolidWorks. So I had to realize the ‘404 error’ text using the ‘curves’ command in SolidWorks. An ‘extrusion’ and ‘fillet’ commands are also used to get the solid feel.

2ablumblum_antzFx
‘Clear Glass’ material applied to the extruded curves.

The material for the rendering is selected as ‘Clear Glass.’

2blumblum_antzFx
Rendering: Before and After

The 3D drawing is shown on the left (1) and the corresponding transparent TIFF rendered output is shown on the right (2). Shadows are disabled to get a ‘suspended’ feeling in infinite space.

The same procedure is repeated to make the transparent matrix.

Integration

3blumblum_antzFx
Applying checkerboard pattern on the rendered output

The actual checkerboard pattern (3) is superimposed to the TIFF rendered image to give a transparency feeling to the output (4) using Photoshop.

The ‘file not found’ text is placed and a ‘perspective’ transformation is given using Photoshop. Do you remember the ‘Star Wars’ opening titles “In a galaxy, far, far away?”

The background image of the 404 html page is set to the checkerboard pattern in repeat mode. The integration of all these files resulted in this transparent 404 page of blumblum.com.

More information on 404 pages

This blog entry – ‘Design – 404 Page of antzFx.com Ver.1.0’ – has a lot of information on the 404 error, how to setup the 404 page in a website and some brilliant 404 designs.

  • Software: SolidWorks, Photoshop
  • Design Date: 29-July-2009

Update on 10-Sep-2009

404design_labs_blumblum
404lab.com does not exist.

404 Research Lab featured blumblum.com’s 404 page as “404 of the Week.” It is filed under the title ‘transparent 404.’ We received a rating of 3.6 out of 5.0. Thank you for voting!


Update on 23-Sep-2009

antzFx_fab404_blumblum

Fab404.com is a collection of fabulous, funny, creative, and weird 404 error pages. On 23-Sep-2009, they featured BlumBlum.com’s 404 page under the category ‘Geeky.’ Thank you guys!