Foreground Masking Image

We just added the ability to have a foreground image in RTD - it works really neat for making out parts of the design window.

Check out what we did with our business card layout here:

http://designer.realtimedesigner.com/stickerz/index.php&tng=Y3BpPTQ1OTMmY3Bpcz04OTEzJmNwaXNfdz00LjI1JmNwaXNfaD0yLjc1JmN0aWc9MA==

As you move items to the outside of the design window you will see they are grayed out by the foreground image with a semitransparent outer box and empty inner box.

Have Fun.

Mark & Alex

Can you provide a quick "how to" for implementing this feature?

Foreground and Background images are uploaded here:


CONFIGURE PRODUCT -> CONFIGURE SIZES -> FIXED SIZES -> VIEW FIXED SIZES EXTRA OPTIONS -> SIDES PREFERENCES

There you will be able to upload both the foreground and background images as well as set margins.

Your foreground image should have a "hole" where the image is to be created.

A neat trick is to create your foreground images with 50% transparency so that you can see objects moved outside of the image area. I've found that SVG files support the transparency best.

If you have trouble figuring out what to put on the back ground and what to put on the foreground, please send us a picture of what you're trying to accomplish and we will give you some help.

I'll add this to my list of upcoming videos.

Happy Holidays,
Mark

Thank you for the instruction. Works great.

If making a making a mask image for a large product such as 18x24 sign and combining text and images in the mask area:

What size would the mask image need to be created?

What is best format and resolution to save the image?

Not sure i understand... If you are creating the background/foreground in vector (SVG) the size should be the actual size...

Are you trying to crate a foreground mask for a simple 18x24 sign? If so, i guess that a couple inches on each side would be adequate.

Sorry, I wasn't clear in my statement.

Creating a vector (svg) bkgd/foreground at full size - no problem. It's a nicely small file. But when adding bitmap (raster) images to the svg vector was my question.

What resolution should the bitmap images that are placed into the vector drawing be?

I use Illustrator to create actual size svg files. I use photoshop to create actual size bitmap files. In Illustrator I place the bitmap files from Photoshop then save as svg.

In my experiments, using actual size 72 dpi bitmaps seems to be the right choice.

My concern is when creating very large bkgd/foregrounds, such as 4'x8' is all this going to work okay in RTD?

SVG isn't a format that I am all that familiar with. I've just started educating myself about it.

Another related question while we're on this subject.

When using the designer, how do you get rid of the dashed border that is displayed on the outside edges of a background/foreground image?




This image shows a white foreground mask installed into RTD. The solid line is my product edge. The rose is in the foreground mask. The dashed line shows in the designer only.

Is it possible to get rid of the dashed line?

I want to create a seamless transition on the white page leading up to the drawing border.

I'm here replying about the dashed line.

I've added a style option in:
SYSTEM OPTIONS => Styles Setup => [the style you're using]

There, on the right side, there are the "OTHER STYLE OPTIONS"
The new one i've added is "Designer Image Dashed Border Color", defaulted to #000000.
If you want to get rid of the border, you would just need to change that color to be the same as your BG one.

But there's one warning: if you'll do this, the dashed border will be invisible for ALL your products.
So, if you have some without a BG/FG image and a border included in there, users would simply not see any border.

Hope this helps

Thanks Alex this is great.

Now, the "But there's one warning . . ." is a big obstacle for those with a lot of products that are already set up. I don't want that "invisible border" on all products just yet. In order to implement the new border system, we wouldn't be able to do that until we have created new Masking Images for all products. I have a suggestion for a solution.

1. In "Configure Products" under "Configure External Border" options "Select the external border you want for this product" we can go through all products and simply select a system border for each. However, the choices are very limited. (does adding custom borders here show across all products?)

2. What would really be nice is for you to set up a new "System 4" border which would be the standard dashed border line. Then it would be available to all products and we could simply make a quick run through all the products and change them to "System 4". This would allow us to slowly work on Masking Image where needed.

As always, you're great.

Well...

External border is a different thing: it's goal is you to define some sort of "graphic" to be shown out of the design area (basically, immediately out of the dashed line).
If you will add a custom border, it will be avail for all products just like system ones.
Then you'll have to go in each product for which you want that external border to be visible, and select the wanted one.

But the suggestion related to "system4" can't be applied: the dashed line is the "style border" of the designer area, while external borders are out of that.

So let's do something easier, i think this will help (yes, i did it yust for you! )

In "Configure Products" under "Configure Generator" i've added a new option: "Disable dashed border around design area".
As you probably gissed, "disabled" means you will have the border, while "enabled" means you... will not!

This is product specific, so you will only need to have the needed BG/FG image for sizes into that product only.

Let me know if it seems ok for you!

Yes, oh yes. Just tried it. I like it. Perfect solution.

Now I can see all kinds of possibilities to customize the area around the drawing border to fit seamlessly into the page.

Thank you once again. (yes, I know you did it just for me!;).

This is all working out perfectly. So here's a new question.

I'm currently using the foreground image feature. When a high res generation is downloaded it properly downloads only the product at full size exactly how it was designed.

However, all low res views of the design (the one which the customer gets a low res link for and which shows when added to the cart) shows the design with the foreground mask included.

Is there a way to toggle this action? I want the customer to only see the mask information when using the designer. I don't want the mask to show in the cart or anywhere else.

Thanks

Uhm...
No, actually there's no way to do that.
The reason for which we did it is simple: BG and FG images are just sort of "references" to make designe more attractive, while for admins as you hires allows to generate only what's needed to be printed.
We're leaving BG/FG images there in lowres images (the cart ones, as you correctly said) so that customers can easily see which product they have in there.

As of now, hires is the only place where BG/FG images can be removed.
But as usual, we're open to new possibilities as long as we are sure they would be useful for some reasons.

My question to you would so be this, to understand and out of curiosity: why removing BG/FG image from cart images would be an useful option?
Sorry if this questions seems so silly, but generally i try to add features only if they seems to be useful for more companies. As of now, i personally can't see any usefulness in this, so i'm simply asking you to help me understanding.
If you could please quickly describe me a possible scenario for which this may be useful, i promise i'll look at it.

You are right in asking these questions. Thank you. I have very good reasons, but maybe I'm off track.

We've only had about 9 months experience with RTD and online selling so our experience is a reflection of the results we have encountered.

So far, we probably average 8 to 10 orders a day on a good day. We are very much customer service oriented and provide excellent telephone and email support to our customers. We get several calls a day, and 5 or 6 more on a busy day, asking questions about details that are clearly spelled out on our site. These are usually the most obvious simple questions, but sometimes legitimate concerns. It is our goal to provide the customer with the easiest, quickest and most user friendly experience possible.

I've determined this:
1. Customer views details on our product page (Not the catalog. We don't use the catalog, but provide same details on our site pages)
2. Customer clicks to enter RTD and design product. It is at this point that customer begins to think about questions they have about this product. They cannot see information or get to it easily during the design process. It was on another page!
3. My desire: Wouldn't it be great to give the customer details of the product they are designing, right next to the design, around the design pointing out the obvious issues WE HAVE FOUND THEY USUALLY CALL ABOUT? When I discovered the fg/bg image feature the answer was obvious. Use fg/bg as an information center. We could even advertise add-on and related products right there. The possibilities are tremendous. I can envision future upgrades to RTD to add this as a feature which would be more html friendly.

This idea is similar to the RTD rubber stamp and business card example only extended a bit further.

I don't really mind the entire bg/fg image included in the low res. It would possibly be very helpful to include sometimes and not so much at other times. We would just need to be more careful about the amount of information included in our images.

Some customers are really savvy. Others are completely the opposite. No matter what we do, it will be impossible to please them all, so we find ways to keep them informed and instructed as much as possible. Using the bg/fg area will be helpful in many cases.

Here's an example:

I see.
As you are using BG/FG also as a "describing area", you have no need to save it in cart as it actually has nothing to do with the design itself.
Makes sense now, thank you for your explenation.
At this point, a good solution may be this. In the same area where i added the new "Disable dashed border around design area" option, what if i'll try to add a product based option that says "include BG/FG images in cart images", or something similar?

If you think this may help, i'll work it out ASAP.

Let me know!

Ok, i did it!

As mentioned, the new option is in "Configure Products" => "Configure Generator": it's named "Disable BG/FG images in cart designs".
"disabled" means you will have the images, "enabled" means you will not.

Again, this is product specific.
Let me know if it's ok for you, Happy New Year!!!

Happy New Year.

The changes are perfect. This will allow great flexibility in presenting to the customer.

There is a new issue that I cannot resolve.

I have created the Foreground Image as seen in the earlier post at full size in Adobe Illustrator. The Fixed Size in RTD is 24x6. The sign design (bounding box) area in my Illustrator file is 24x6 exactly. It is saved as an svg and that is what I have uploaded into the "Sides prefs". Using the "Interactive Margin Tool" I set the Printable area size, in Inches to 24x6. The resulting bounding box is a little over half the size needed in my mask image, so I visually enlarge it to the width and height of the cut lines in my mask. It doesn't line up proportionately. It is always taller in the mask than it should be. I'm thinking this is just a visual glitch and proceed to save.

Upon testing in the generator, this height problem is very noticeable. Graphics will appear too far below my sign bounding box. It's not too much and I wouldn't be concerned, but there are other issues.

The file size as saved by the generator that shows up in the saved orders is not 24x6. It is Size: Width 23.9999 x Height 6.1925. The high res generation file is also this odd size. I have tried setting the "Sides pref" using the old manual settings instead of using the Interactive Margin Tool and it has the same results. However, I enter the left, top, right and bottom margins correctly, but the "Designer bbox left margin" of .8564 always reverts to zero when saved. Upon testing this setting I still have the same height problem, but now my left bbox margin is wrong.

Please advise.

Could you please provide me the SVG fily you used, so that i can repeat your exact steps?
You can send it to "alex at alexander-bonivento dot net"

Thank you

It is sent. Thanks.

Thank you.
About the problem of interactive margin tool, i will look deeper and will reply better in some days (i will not be here tomorrow).
About the manual settings, it may be because of the way you're entering them.
The margins fields must be fully numberical: if you tried to enter and save a value of ".8564", zero is saved. But if you enter "0.8564" all should be fine.
Please let me know if this is correct for you too.