Products with Background Images - HOW TO

If your product is something other than a flat sign, you probably want to show a picture of it and let the user design over top of it. The T-Shirt example at www.RealTimeDesigner.com is shows this concept. Here's the steps you should follow to get your background picture installed:

1) You will need a photo or other artwork of the product. You will also need to know the size of the product and the photo. Here's how we do it in Corel Draw. Knowing the actual measurements of the object, resize the photo until its size is correct. Now read the overall size of the photo. Use the overall size as the size entered on the FIXED SIZE screen of PRODUCT SETUP -> CONFIGURE SIZE. Be sure to put the product name in the "NAME TO SHOW" field of FIXED SIZE so that the photo size doesn't appear in the designer.

2) Find the margins of the photo in Corel Draw. Draw a box over the photo to show where the imprint area limits are. Measure from the left, right, top and bottom to the edges of the box. These are the margins you enter on the VIEW FIXED SIZES EXTRA OPTIONS -> SIDES PREF screen.

3) Upload your image (gif, jpg, png format) in the SIZES EXTRA OPTIONS -> SIDES PREF screen in the BG IMAGES box. Note - there are two image uploads on this screen - the first if for a thumbnail that will display in your catalog pages (optional). The full size image is uploaded in the 2nd image area.

4) When using Background images, be sure to set your background color to WHITE only. Background colors will only be shown if part of your background image is transparent.

OBJECTS WITH MULTIPLE COLOR OPTIONS
Our sample site has 2 examples of products with multiple color options. You will notice various color options below the design window on these products:
Shopping Bag
http://designer.realtimedesigner.com/SamplePrintCompany/index.php&tng=Y3BpPTE3OTQmY3Bpcz0zNTg4JmNwaXNfdz00LjA4JmNwaXNfaD02JmN0aWc9MA==

Key Chain
http://designer.realtimedesigner.com/SamplePrintCompany/index.php&tng=Y3BpPTcwMCZjcGlzPTE0NjAmY3Bpc193PTcmY3Bpc19oPTYmY3RpZz0w

If you offer a product which is available in multiple colors and want to allow the user to select his color while in design mode, you can upload multiple background images. First, follow the steps above to create the first background image which will be the default color option.

Next, click on the FIXED SIZES -> VIEW FIXED SIZES EXTRA OPTIONS -> MULTI BACKGROUND IMAGES button. You can now load multiple images that will appear below the design window. Be sure that each image is registered with the original one. We've found the easiest way to do this is to start with a good contrasting color photo for the first image. Then photoshop the image to show the various color options available. Save each image at the same size and resolution as the original image.

We created a background image and installed it in the RealTimeDesigner as per the detailed instructions provided by Admin. The background now looks fantastic and exactly as we had hoped it would.

We then placed a trial order to see what our potential customers will see and will use in the process of creating their own digital designs to be used by us in the decoration of our full-color coffee mugs.

The design creation and ordering process went as expected, that is, without any mayor problems.. However, we where not able to generate/download a digital image that was in the correct dimensions. The image that downloaded had the total size of the design area, that is, including the background image area, when what we needed was the design that was actually created by your visitor and placed onto the background image, which is considerably smaller and also provides the exact placement of the image on our coffee mugs.

As requested, we supply some screen shots to illustrate our problem:

1.) Design created in maximum dimensions and shown here with the text and red square. The max square is 3.5 x 3.5 inches.


2.) Image generated when adding it to Cart:


3.) Image generated in Manage Order page of RealTimeDesigner (showing total size of background image, namely: 5.43" x 4.867")


4.) Hi-Res Files downloaded.
Please note that we colored the extra background in "gold" as this represents the total size of the downloaded image: namely 5.43" x 4.867". However, we only need the image as shown by the red line and text which was defined and is, as it should be, 3.5" x 3.5". This smaller, but correct decoration size, is generated and downloaded when the RealTimeDesigner is used without any background image.



.
Our question now is:
What do we have to do so that the RealTimeDesigner only generates and downloads the 3.5 x 3.5 image that we actually need.


Thank you for any help you can offer.

Gift Mugs make great coffee Mug Gifts - www.giftmugs.com

Yes, it was an issue.
I tested on your order #4264

Now, if "Include BGImages" is set to "no" or if vector output is choosen, eventual margins will be removed.
Please try again now and let me know if all seems ok, your testings are really essential for us to make RTD better every day!

Alex

Alex,

Thank you very much for your speedy reply and fix for our problem.

We again generated HiRes files from the same "order" with the Include BGImages set to NO
and the file generated is now in the desired dimensions. The undesired "margin" is now history.

(BTW, we generate all HiRes files in the .jpeg format as this file format seems to work best for our purposes, and we always had the GBI switch set to No.)

Again, many thanks for the speedy reply and effective solution.
.

Gift Mugs make great coffee Mug Gifts - www.giftmugs.com

On the subject of background images I'm running into a problem:

We're offering large banners with a preset background image. It seems as if the designer uses the full-resolution image in design mode as opposed to a lower resolution image, and because it's a large file (~22M, it doesn't even load in the designer area. Additionally, when I generate the hi-res image, the background image is not the same quality as the original that I uploaded.

The only solution I can think of for the current setup is to use the low-res image as the background image and then when I download the file, transfer the text/clipart to another file with the high-res background. That's not very practical for what we're doing.

Ideally, I'd like the system to optimized the image for the designer window as well as allow us to use the high resolution background image in our generated image.

The reason for that is simply because background image is not meant to be part of the real design, but just a visual reference for users. This means that image is scaled, but only at browser level: it's not resized to a smaller size, which means your original file is used.
In any case, a 22MB monster is a file that should not be used in RTD, as it mayu really take long time to be processed.
Also, I have to say that working with big files would be better if thye're treated as cliparts, and not BG images.
BGimages are meant to be mostly static, and that's the reason for which they're not processed. Cliparts, on the other hand, behave exactly the way you'd like. So, a possible option is to create templates with the BG image placed as a clipart, instead of using it as a native BG image.

But in case you don't want to go with templates and still want to use the BGimages setting, unfortunately the "only solution you can think at" is really the only thing you could do.

I'm not sure how many of your current vendors are in the large-format industry, but for our needs, this is fairly important.

Could there be a feature added where there are two separate files used... one for the background in the designer window and one to be used in the generated file?

I may look into something similar.
But as we normally do here, I'd like to discuss to understand if it's really the best option.
The golden rule is: you have to convince me it's a really needed option

What I can't understand now is why you need to huge image to be part of the product definition (the BG image) instead of simply allowing it to be a clipart.
Almost all of our large-format users are using that approach, this is the first time I receive a request to allow the big file to be printed into the BG images area.

Hi Ryan_kik. Alex first answer to your issue is probably correct for your product. Read his answer carefully. I think you need to make Product Templates using the background as clipart placed into the design and set admin options to lock it from users editing it. You can go pretty good size with properly formatted jpeg images into clipart.

If what I need to do works by using a product template, that's awesome!

I think I understand how to make the template, but I'm not sure how to make it be the default for a product.

Its not really a matter of making it a default, because each template has its link.

When you invoke RTD from your site, you generally use a simple link to it: just replace your current link (which is probably going to a blank designer) with the template one.
All template links can be found in the Your RTD Links & Builders page.
Close to bottom there is the tool you're interested in, PRODUCT TEMPLATES LINKS.

Alternatively, you can view them all also in TEMPLATES OPTIONS => Manage Product Templates.

However, again: consider carefully the size of your file.
When a clipart is used, a scaled version is shown to user: but when you create the hi-res file, your original one is used instead.
If your original image is really too big, it may take ages to generate (or even result in a timeout in case of busy servers).
One important thing to keep in mind is the size you should care about is NOT the file size, but the pixel size.
This means that's no problem to upload very large files in MB, but issues may happen when the file is too big in pixels.
It's just an educated guess, but I noticed that a safe line is generally to use files not bigger than 6000x6000 px

A huge advantage to using product templates is that you only need to make one product declaration... so maintenance is a lot easier down the road.

A couple key points to making product templates...
a) create the design in the designer while logged into admin
b) templates are saved inside the cart - begin the checkout process, qty = 1, and you will see a button to save a product template
c) use the ADMIN OPTIONS of individual elements to lock certain properties such as changing the image.
d) you can create multiple templates rapidly by opening a completed one and modifying it rather than starting each one from scratch.

Mark Sr.

So, I want to offer 3 different product categories, with 5 total products all using preset background images. I understand how to make product templates for these, but I want to be able to use the product catalog to link to each of the different products.

Can templates only be accessed by the external links?

If you want to use catalog but only give access to product templates.... GOOD NEWS!

Go in PRODUCT OPTIONS => Manage/Define Products, select your category, and click the Edit button for the product you need.
There's one option in there, named Catalog launch options, and one of its choices is Enable Designer Only (product templates only).

Easy easy

So, I've made Product Templates for each of my 5 products.

For each product, I've set it to the Enable Designer Only (product templates only)

What else do I need to do to make it work?

I also removed the background image that I was using before.

In MANAGE / DEFINE PRODUCTS select the catagory, product and EDIT

there is a control called CATALOG LAUNCH OPTIONS

Chose: "Enable Designer Only (all templates only)" or "Enable Designer Only (product templates only)" depending on what templates you are using.

This will disable the blank designer option and show the templates.

Mark Sr.

I already have the "Enable Designer Only (product templates only)" selected.

When I'm in the designer mode I can click on Product Templates and it shows the correct template, but it doesn't automatically apply itself.

Please start a support ticket and give us complete details (links, buttons you clicked, template you selected, etc.) so that we can experience the problem first hand.

Thanks
Mark Sr.

Is there anything else I may have clicked that would override the "product templates only" function?

I'd like to figure it out without having to pay for a support ticket, if possible.

Mark asked you to send the ticket so that you can provide direct links and detailed explanations on how to reproduce your issue without worrying for you privacy (in case you'd prefer not to post such links in a public forum).
So don't worry, for something like that ticket will be free of charge as long as some real action will be needed by us. And in any case we always ask for confirmation before starting anything that may be billed

Alternatively, if posting such info in here is not a problem for you, you can do it here as well: at the end, what we need it to be able to see and experience the issue, so that we can tell you properly what's wrong or misconfigured.
Another option is to send Mark a PM with such details.

Your choice!