How to Save a Render with Layers (or Transparency)?

[Anonymous]

Greetings everyone!

I am helping an architect friend update his website. He uses Archicad 16.

I am asking a question on his behalf because he doesn't know a tremendous deal about the graphic formats I can use on his website, and we want to make sure the question is phrased correctly. The flip side of that is that I don't know anything about Archicad apart from its awesome power, but my friend will be able to understand the replies so together we should be able to figure it out.

On the website, my friend would like to feature some renders of plans he has made. He would like the renders to appear on the web page's background texture---as though they had been drawn on the page. For my side, this means working with a rendered image that either has transparency or that has layers I can turn off in a program such as Illustrator.

If that adds anything to the question, he says the renders he would like to incorporate will use the Sketch engine with the Koh_I_Noor style and Tech pencil.

When he renders a plan and saves it for me, so far, whatever format he has choosen, the image has been a flat file (a single layer). This means that we will lose the background of the web page under the background of the flat image.

So what we need is either:
1. To render the plans with a transparent background, so that we can place them on the texture of the web page. Typical formats that support transparency are GIF and PNG, but there are more.
2. A layered render, where the background has its own layer. That way, in a program such as Illustrator, I can turn the background layer off, and once again output a transparent image that will integrate with the web page. Typical formats that support layers are PDF, PSD and AI, but there are more.

In this day and age, I am guessing that outputting a transparent or layered image from a powerhouse such as Archicad should be a walk in the park... but we haven't been able to figure out how!

Is there a way to achieve either 1 or 2 within Archicad "out of the box"?
If not, is this possible with plugins?

We have considered other options, but they are not very satisfying:
A. Removing pixels from the flat render. This is very messy for several reasons, such as the varying opacity of the pencil strokes, resulting in many "stuck" or "blended" pixels that are hard to remove.
B. Using the web page's background texture as a background image for the Archicad render. This would create edge problem and not stitch well with the rest of the web page.
C. Rendering the plan on a solid color that is harmonious with the web page. This may be our best last resort option, but we would lose the background texture and the feeling of having sketched directly onto the web page.

At this point we are lost and need help from the gurus!

With many thanks for your patient help,
Wishing you all a beautiful day

[Karl Ottenstein]

ArchiCAD does not offer layered renders. If your architect friend has Artlantis, then an Artlantis rendering can be saved in PSD format with layers. But, these will be photo-realistic renders (or the pseudo-pastel post-effects possible in Artlantis).

Because you mention that your friend wants to use the Sketch render... you're out of luck other than magic-wanding in Photoshop (your solution A - which has issues with anti-aliasing). You can play tricks in Photoshop and make a layer mask related to the pixels remaining after a suitable magic wand selection so that you can obtain semi-transparency in the gray areas.

You can export a Sketch Render to Piranesi, if you client owns that - and the background will be masked ... but the mask is based on the hard geometry of the actual model, not the overshot lines and wiggles that the Sketch render generates... so eliminating the background effectively eliminates the beauty of the Sketch render.

Because browsers can control the display of background images anyway, over-riding the web designer's intent - and because you are no doubt creating a dynamic site that reflows the content based on the target device (large computer screen vs tablet vs smart phone) - I would recommend your option "C".

My 2 cents. Hopefully others will chip in with their thoughts for you. 🙂

[Anonymous]

Hi Karl,

Thank you very much for your thoughtful and detailed reply.

Bozeman... Why does that remind me of Zen and motorcycles?

My friend has neither Artlantis nor Piranesi.
Your Photoshop skills sound far more advanced than mine. I will try your idea, thank you. We're looking for something we can apply without too much thought to a number of renders as the need arises over time, so in general, as you pointed out, we'll probably have to go in the direction of option C... unless someone else chimes in with another brilliant idea!

It's a shame that ArchiCAD does not offer layered renders, as transparency is a big part of the vocabulary of web design. At least that's the opinion of the dog that's been trying to serve as my avatar.
It's not my place to make a feature request as I don't know the first thing about Archicad, but do you think that's the kind of request Graphisoft might process within a few sub-versions if my friend made a request?

Again many thanks and kindest regards.

[Karl Ottenstein]

layercake wrote:
Bozeman... Why does that remind me of Zen and motorcycles?

🙂 Among other things. Of course, the future of Bozeman is bright, as Zefram Cochrane is due to be born here, warp drive, first contact with Vulcans, all very exciting stuff:
http://en.wikipedia.org/wiki/Zefram_Cochrane

You can certainly post a wish here:
http://archicad-talk.graphisoft.com/viewforum.php?f=28

for transparency - but to be honest, it probably won't be a high enough priority to happen any time soon. It isn't an essential issue for architectural workflow. I only recall this being asked about a couple of times. Here are two old threads I found from 2005:

http://archicad-talk.graphisoft.com/viewtopic.php?t=8798

http://archicad-talk.graphisoft.com/viewtopic.php?t=6435

Cheers,
Karl

[Anonymous]

Hi Karl,

Thank you for your latest reply.

the future of Bozeman is bright, as Zefram Cochrane is due to be born here

What a nice touch that writers (and you) keep using the same fictional town. And they even made up a Wikipedia article about it. Very clever.

Thank you for sending these two posts---great reading.

With some help from Google, I experimented with a number of options to remove the background from a sketch render. I think I've found a workflow that works quite well, so I thought I'd share it in case anyone is on the same track.

This workflow is for a sketch render where black is the only color, so adjustments would be needed for a color render.

1. In the render option, choose solid RED as the background color for both sky and ground. If you're color blind blue will probably work just as well. Save as TIFF.

2. In Photoshop, we're going to erase background pixels. Insert a layer with a light color (such as cream) below the red render, so that when we remove pixels we can get a better idea of what the transparent image will look like.

3. In the red layer, select the Background Eraser tool. Set it up like so:
- huge brush that covers the whole picture
- tolerance: 100%
- sampling: once
- discontinuous

4. Click once on a red spot in the red layer. The sketch should now appear on the cream background.

5. If the sketch is too anemic, jump the layer so the semi-transparent pixels reinforce one another, and set the opacity to maybe around 40%. I don't find that multiplying the new layer does anything.

6. After hiding the cream layer, save as GIF or PNG, check "Transparency". The key here is to select DIFFUSION TRANSPARENCY DITHER, otherwise you end up with a bunch of white pixels.

There well be may be a better workflow and better settings... This is what I've arrived at so far.

Thank you again very much for your kind help.
Wishing you a beautiful day,

LC