Manage size between stage and printing size

Posted over 8 years ago by kameleon Premier

Post a topic

Implemented

kameleon Premier

Hi, this is a matter of pre-sale ;
Something I do not understand what is the management of the size of the « stage » relative to the actual size of the product to customize.
I take the example of an iPhone 4 case to illustrate my point :
The real size in mm is 62 mm x 120 mm to 300 dpi . Making it in pixels : 738 x 1420 px.
So I understood that we can scale the " stage " with these dimensions. But the page will be high on the screen ;
Now imagine that I want to propose customizing posters or photographs printing. A typical size for a poster , for example : 500 mm x 700 mm x 300 dpi. Making it with photoshop pixels : 8268 x 11811 pixels !!! The page of the site is going to be huge !!!

Is is expected to have a dissociation between the appearance of the product on the screen and its true size for printing?

Thank you and sorry for my english.

8 Votes

18 Comments

rady kal posted about 6 years ago Admin

Our new service just started in BETA, please head over to this topic and let me know your thoughts.

http://support.fancyproductdesigner.com/support/discussions/topics/13000017139

You do not need to create extra large canvas anymore in order to get a high-res PDF, you can now easily define the output format for the PDF and our FPD2PDF service will create a PDF with all elements embedded that are visible in the printing box.

0 Votes

SConcept posted over 6 years ago

Hi,
I have the same problem. I have to print photo : 8268 x 11811 pixels with 300 DPI
The canvas I made to upload the good resolution's photo are very big on the screen
Did you find a solution since next year ?

Thank you

0 Votes

Jeremy Aaron Horland posted almost 8 years ago

We've had a lot of success with :

1) all images in design view are hi-res, shrunk to fit their size at the same aspect ratio.

A 10"x15" output at 400dpi, for instance, would be on stage at 400x600 and all items on stage would be at .1x size.

Client input would need to be limited to what can print without awful pixelation, we've found that on our products a 3x zoom is okay-ish for use on our products, but you should do product testing to see what your minimum input size should be.

svg output is the key here. This is where it gets tricky, and I use the image/svg output variety and then manipulate forward using a variety of tools ... svg output should be strengthened in the next few product designer revisions. Saving as PDF is the easiest way.

After import into photoshop or illustrator you will see extra space. The best way to manage this at the moment is to import at 1.5x the size you think you need, then crop away the "flashing" or extra space.

After this, make exact size adjustments for your product and print.

This sounds like a lot of fuss, but for print-ready professional and crisp output it's worth a little work.

If you practice for order-fulfillment you can get this process down to about 30 seconds per image.

0 Votes

Brad Hill posted almost 8 years ago

I agree, this is essential - to be able to download files at the same resolution as the customers image.

0 Votes

Andre B posted almost 8 years ago

ok this solution should definately be available as a standard. This is a really important issue. Roger > can you help with some css coding hint? I do not have a clue how to make the larger stage look smaller in our theme.

thank you very much,
tm

0 Votes

Roger Beaujard posted about 8 years ago

Hey guys. I just got the plugin and am setting it up now for use selling t-shirts and buttons.

I also faced the output size vs. stage size issue. My solution was to set the stage of the product to the resolution I need for output then resize the stage via css in the theme. This is working quite nicely with the product image replacement option for woo prod image.

So, in a nutshell for FPD shirt products:

Stage is set to 2100 x 2400 (150 dpi for 14"x16" print area) plus whatever "padding" pixels you need for your garment layer padding (sleeves, neck, etc.)
FPD Stage is set to replace woo image and load inline in the page with no lightbox
My theme's CSS makes sure the design stage fits in the space and scales the FPD window (even though actual images are much higher res, browser handles scaling). If your theme doesn't support image resizing I suppose you could easily add a little CSS to limit the size to do this.

I am having some small issues however with the CSS on android mobiles currently where the FPD stage is not resizing properly but only just worked on this last night and besides being a little bit buggy on mobiles I suspect some human error there on my part ;)

As I said I'm just starting with this plugin but I'm loving it. I'm fearing the communication issues FPD and woo for bulk product pricing but... that's a comment for another thread :P

Hope that helps or is sort of a solution for you guys as well.

For the record I would also welcome more granular output tools to fine tune what you can automate. If there could be a filter hook at the output point for things like "remove black up to 15% from image" or even a full on filter routine to automate seps. Wow! For now proper resolution is a must as well as being able to shut off the garment layer for automated output.

- RJB

0 Votes

neophi posted about 8 years ago

Hi Rafael,

Is it possible to use a PPI scale conversion (pixel ratio)? Current solutions involve the use of an HTML5 canvas, and an internal PPI converter. The idea is similar to what kameleon Premier mentioned above.

Stackoverflow: http://stackoverflow.com/questions/17025603/what-is-the-best-practice-to-export-canvas-with-high-quality-images

Similar discussion with fabricjs: https://groups.google.com/forum/#!searchin/fabricjs/print/fabricjs/u8d_rwuNffI/9vXjx19t9uwJ

0 Votes

kameleon Premier posted about 8 years ago

Hello, I'm not a programmer, but in my mind the steps should be:

1 - I download my high-definition file on the server .
2 - the system checks the file extension , size and weight.
3 - when the file arrived ( MyFile A.HD - 1.jpeg ) a low resolution version of the dimensions of the FancyProductDesigner settings and 72 dpi ( MyFile A.LowDef.jpeg .
4 - the file appears in the stage.
5 - the customer alters the settings (size, position X-Y-Z)
6 - valid client ( done! )
7 - the system retrieves ( new dimensions + X-Y-Z position) ---> ( conversion 72dpi x 4.16= 300 dpi)
8 - the system returns new data to the original file ( MyFile A.HD -1.jpg ) and created a new file MyFile A.HD - 1.2.jpeg .
9 - If the customer does not complete this order and wants to re-edit his custom object ?

0 Votes

kameleon Premier posted about 8 years ago

Hi Rafael. Thanks for your answer :-) Not simple yes. I'm thinking about it too. Maybe ideas soon oO

0 Votes

rady kal posted about 8 years ago Admin

I am aware of this problem. The problem is that you can not create a high resolution image from a low resolution image with PHP. Thats why you have to create a big stage in order to export a high resolution image. I am always searching for a solution monthly, but could not find anything.

0 Votes

Jens Ende posted about 8 years ago

So how does this work then?

How do you get the file uploaded by the customer in print ready size and also appear on the preview in right scale?

0 Votes

neophi posted about 8 years ago

Yes! The stage size should be the scaled down version of the print ready dimension.

And. these 2 features are a must:

The stage size should not be the actual size.
The print ready file should only contain the customer's design. In the example above by kameleon Premier, the poster background should not be embedded in the print ready file.

It is nice to show the customer a preview of the final product with a tshirt, mug, or other canvas background behind the design, but that should only be in the preview image, never in the final print ready image.

0 Votes

Jens Ende posted about 8 years ago

I also posted a question like this....so how do we set this up?

The pic on the screen should merely be a scaled version of the high res end image that we need for print

Please help!!

0 Votes

jessicab posted about 8 years ago

I agree that this is something that needs more attention. We can't be expected to match the stage size with the final print resolution size, as you describe in the documentation. The sizes become too large on stage for print resolution graphics and images. There are some controls that allow scaling up designs in the backend, but it would be great if that process could be automated or set in the backend. I am using the plugin to allow the creation of downloadable graphics, but I need the graphics to be print resolution when they are downloaded. It would be nice to be able to set an output size per product in the backend so when the file is downloaded it is output at the correct resolution.

0 Votes

kameleon Premier posted about 8 years ago

Hello, can you have an answer please ? Another thing that is not going to print ; I tested customizing posters . When you have finished setting his image, and we receive the final file , it also receives the background image . It's not good. In printing requires that the image is always slightly larger than the finished size , for not having a white border around . Should receive each layer separately. You intended ? Thank you. The different stages of my test below 

Step 1 : open the customizer


Step 2 : upload my design :

Step 3 : resiize and place my design :

Step 5 : download PDF result for verifications :

Step 6 : Result :

Maybe ok for a poster with white border but not for a full-frame picture or object.

0 Votes

Steve Drexler posted about 8 years ago

I agree with kameleon premiere's question.
It is not really clear how this is handled in FPD.

If I want to propose the Fancy Product Designer to my customerse on a webpage, the designer itself should not be larger than somewhat around 1.200 x 900 pixels or so,
but the customers should still be able to upload a High Resolution photograph (such as a jpg with 5.000 x 3.000 pixels), to customise a mousepad, for example.

Does it work, with FPD, that if the photo is scaled larger than the mousepad (the one from the demo) that it is also automatically cropped with the original resolution kept intact ?

0 Votes

kameleon Premier posted over 8 years ago

Hello, Thank you for your response. I understand what you're telling me if I propose a library of my own designs. But what I want to do is offer my clients the ability to load themselves their pictures and place them . it must be able to print them they are in 300 dpi . That's why I have a problem between the size of the canvas in px and file size after conversion pixels / dpi. There is a solution ? Thank you

0 Votes

Zoltan Gyulai posted over 8 years ago

Following.

Best implementation could be:
- the design library should hold both HighRes and LowRes images. LowRes should be used in the online design process
BUT
Printes has to receive files created out of the HighRes. (placement, colors) If its too extensive for a website, just I would need a) scaling info, b) placement info in relation of any corner im the layout

Best, Zoltan

0 Votes