Sketchup Blog - News and Notes from the Sketchup folks

Creating web-ready images with SketchUp Pro and LayOut

As you probably know, working with LayOut (included with SketchUp Pro) is an excellent way to prepare printed documents and screen presentations with 3D models. What you might not know, is that it's also a great way to prepare images of SketchUp models for publishing on the web.

Let's start with the idea that we're building a website and need to create an "Under Construction" webpage until we are ready to launch. First lets find something in the Google 3D Warehouse that conveys the feeling of under of being "under construction." In SketchUp 7, the component browser lets us find models in the 3D Warehouse and download them directly into our document without leaving SketchUp. Here's the model I'm going to use:

After we select a model, we need to adjust its style slightly. On the web, we often don't care about the model's sky or ground color. In fact, we often don't want the sky and ground color to show up at all. We want the model to have a transparent background, making it compatible with a variety of webpage background colors.

Now for the first trick: we can prepare our SketchUp model to give LayOut a hint that we want a transparent document background. We give LayOut the hint by making the model background white. (Actually, any color will do, as long as it matches the paper color of the LayOut document.)

In the styles inspector, go to the "Default Styles" collection and select the "Engineering style." This style turns off sky and ground and makes the background white, the very same paper color found in a blank LayOut document. Like so:

Next, we'll get our model ready for the web by adding some visual texture in LayOut. Select "Send to LayOut…" from the File menu to create a new LayOut document with the construction barrel SketchUp model. Next, adjust the model size or camera angle and use the other LayOut tools for adding text or annotating the model.

Now for the second trick: open up the "Document Setup…" panel and select the "Paper" tab. Make sure that the "Print Paper Color" is turned off. This setting not only works for printing but for exporting images as well. During image export, disabling this setting tells LayOut to create a transparent background.

With all the settings in place, simply export the image in your favorite web format (PNG is a good format choice, since it supports transparency) and add it to the "Under Construction" web page. Here's an example of the original image centered on a web page with the default white background:

However, when we inevitably change our mind about the background color, the image with a transparent background doesn't require an additional export. Here's the same image on a web page with a different background color.

Images with transparent backgrounds are much more flexible when working on the web. SketchUp Pro and LayOut make creating web-ready images a very simple process. Just remember to let LayOut know you want a transparent model background by selecting a SketchUp background color that matches your LayOut paper color.

Permalink | Links to this post |
The comments you read here belong only to the person who posted them. We do, however, reserve the right to remove off-topic comments.


Al Hart said...

As your web site progresses, you may want to add some advanced features - such as interactive 3D models (using O3D or PDF), Rendered images - using a 3rd party package adding lights and reflections, or a panoramic image. (Where the user can spin and zoom the image using the mouse)

Take a look at one of the panoramic images on this web site:

Panorama on Keystage Web Site

Al Hart said...
This comment has been removed by the author.
Al Hart said...

I forgot to mention that the ideas in the previous post were all meant to make use of SketchUp models in your web site.

The link to the panoramic image did not work.

Try this URL instead:

arqbrega said...

excellent Al Hart! With what software can achieve this kind of panoramic images? used models exported from SketchUp? Thank you!

Al Hart said...

First you create a 360 degree Panaromic image from the SketchUp model, then you use something to convert it to a Flash movie to view it.

There is a ruby script from SMustard, (cubicpanout.rb), to create panoramas directly from SketchUp models.

Some rendering engines, such as IRender nXt, can render a model, with lights and reflections directly to a panorama image.

We used Panoweaver 6 and panorama2flash from Easypano to convert the Panoramic images to Flash movies.

See: Panoramic Views.

See also the SketchUp Sage (SuWiki) article on Panoroma.

Lewis Wadsworth said...

I've seen and used the software Al cites above, and it is quite beguiling, if you happen to be surfing the web on personal computer with high-speed internet and a correctly augmented web-browser with all the right plugins installed.

However, it worth noting that creating a website requiring the visitor to use a web browser technology other than one based on straightforward html or Javascript is (once again) a fairly risky proposition, at least as an advertising strategy. This is because increasingly quite a few people are surfing the web on devices which may do not handle, well or at all, Flash or PDFs, let alone anything more exotic. For instance, I am viewing this blog on a browser on a (Google) Android-based phone. Although some Flash-based technologies are available on this phone (for Google's own Youtube, for instance), a quick jump to Keystage's site is a frustrating experience, ultimately leading to a message from Adobe promising that Flash "is coming to Android 2.0 in the first half of 2010."

...which might as well mean "never" as far as the casual web-surfer/potential customer is concerned.

vasanthi said...

I have read this post. collection of post is a nice one ..that am doing website designing company chennai india and website development company chennai india. That I will inform about your post to my friends and all the best for your future posts..