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 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.

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

The 3D drawing is shown on the left and the corresponding transparent TIFF rendered output is shown on the right. Shadows are disabled to get a ‘suspended’ feeling in infinite space.
The same procedure is repeated to make the transparent matrix.

Integration

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’ titles?

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’ – has a lot of information on the 404 error, how to set the 404 page in a website and some brilliant 404 designs.

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

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!

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!

Yes, there is always a solution to a problem. This is how I solved it.

PhotoWorks
I use PhotoWorks, the SolidWorks Add-In, for the rendering of a model. PhotoWorks can be activated by going to ‘Tools -> Add-Ins…’ and checking the box for PhotoWorks.

Steps for Rendering
After finishing your model, follow these steps to render it in a transparent background.

1. In SolidWorks, go to ‘PhotoWorks -> Scene’

2. ‘Scene Editor’ box opens out and we are in ‘Manager’ tab by default. I selected ‘Conference Room’ in the folder ‘Studios.’

3. Now click on the ‘Room’ tab.
4. Under ‘Visibility and materials,’ make sure that the boxes for ‘Visibility’ and ‘Reflective’ are unchecked.

5. Click ‘Apply’ and close the ‘Scene Editor’ box.

6. Now, render the design by using ‘PhotoWorks -> Render to file…’ option.

8. Save the image output as TIF (8bit RGBA TIFF) file.

The output TIF file, when opened in Photoshop, will have transparent background! This helps you to add any background to the image.

I am sure that you will find this tip useful and saves a hell lot of a time while editing the rendered file in Photoshop.

More reading/Viewing
A good in-depth video tutorial is available at ‘SolidWorks for Industrial design’ website. You need Flash Player to view it. Also, a PDF version is available for download.
‘Rendering with a transparent background’ — Written by Ryan Olson

Software: SolidWorks 2007