Colour variations: showing different products in different colours

[Rachel123]

Hi all,

I apologise if this has been asked before but I did search and couldn't find an answer. Basically, I'm trying to recreate exactly what this website has done: http://bit.ly/2tG82ld with its colour variations.

There's a colour swatch showing each available colour, but when you click on the swatch, you see the colour on the actual product.

I want to have text/design on tshirts but other than the one item that will be printed for photographic/sales purposes, I want to be printing when I receive orders (using a company like Printful, for example).

The way the text remains static as you click through the colour variations suggests that this is a Photoshop colour fill or something, but then that doesn't account for the deeper colours where the creases and folds are.

So my question is: is there a software package that does this? Is it just clever Photoshop? Or do I actually have to create every single tshirt in every single colour?

Your help would be most appreciated, many thanks!

 

[Deleted member 59730]

Photoshop isn't clever, its stupid! What you need is a clever Photoshop user

If you have photoshop there are a load of tutorials on the web to show you how to use it.

 

[Rachel123]

Hiya, thanks for the quick response! So are you saying the colour variations in this instance is being done by Photoshop?

 

[fisicx]

If not photoshop, some other graphic application.

And yes, you do have to create an image for every single colour.

 

[Mark_Taylor_]

Looks like they have created a layer mask for the original image and filled it with the various colours on by one.

 

[Rachel123]

If not photoshop, some other graphic application.

And yes, you do have to create an image for every single colour.

Dang it! Haha! Thanks for that.

 

[Rachel123]

Looks like they have created a layer mask for the original image and filled it with the various colours on by one.

That's what I thought too. I've seen it on various sites though; I just assumed there would be software or a plugin that does it.

 

[fisicx]

Nope, you have to do the work yourself.

Each colour is a product variant. When you create the product listing you need to create a variant for each colour (and maybe size as well). It's not a 5 minute thing, it can take a while to build up a single listing. Especially as you may want different views on the product such as worn by a male/female, close up of the stitching and so on.

 

[Rachel123]

Nope, you have to do the work yourself.

Each colour is a product variant. When you create the product listing you need to create a variant for each colour (and maybe size as well). It's not a 5 minute thing, it can take a while to build up a single listing. Especially as you may want different views on the product such as worn by a male/female, close up of the stitching and so on.

Fair play then. It was worth a punt though!

 

[Raw Rob]

I disagree, there must be automated ways of doing this. I use websites such as redbubble which enable you to sell your own artwork on things such as t-shirts, etc. I upload a piece of artwork and all the images of t-shirts, mugs, etc, etc are created dynamically. Maybe this could be coded using php plugins such as gd or imagemagik? (I've only used these for very simple stuff, I've no idea how powerful they are.)

 

[Rachel123]

I disagree, there must be automated ways of doing this. I use websites such as redbubble which enable you to sell your own artwork on things such as t-shirts, etc. I upload a piece of artwork and all the images of t-shirts, mugs, etc, etc are created dynamically. Maybe this could be coded using php plugins such as gd or imagemagik? (I've only used these for very simple stuff, I've no idea how powerful they are.)

Yes, yes, yes!!! That's what I think too! I've seen exactly what I want on Redbubble, but if the software is sold separately, I wouldn't even begin to know what to search for or what it's called. It was hard enough trying to tile this post correctly!

 

[Rachel123]

Aha! A rudimentary search has unearthed the following links:
http://heatpresshub.com/best-graphic-design-software-for-t-shirts/
https://www.thetoptens.com/2015-t-shirt-design-software-providers/

They're both from 2015/16 so I'm sure there is other software out there, but it's good to know that the technology exists. Thanks Raw Rob!

 

[Raw Rob]

It's not a software package you are looking for, you want a plugin or extension for whatever ecommerce software you are using. Depending on what it is, you might have to get something custom coded.

 

[The Byre]

It's just the 'Replace Colour' function in PhotoShop.

Go to Adobe, register as a customer for free and then go to 'Other Downloads' and you can download the 12-year-old PS CS2 for free.

Load up a pic and go into adjustments and scroll down to 'Replace Colour'. You can set the range and fuzziness and depth of shadows, etc. within that tool.

Other programmes have similar functions, but are not as easy to use.

 

[paulears]

In this example each colour version has a unique URL, so it's a separate page - so fair enough it's time comsuming to clone a page, make sure it has a different sensible url - as in these ones have blue, or red as part of the common location text - changing colour is a very basic and simple photoshop feature, and if they have an image of the new colour, you sample it and photoshop does it. You can't create automation for this because too many things are different, setting up a system to open an image, sample the colour at a common place, use this colour to do a colour swap, and then save the page takes longer than doing it manually.

One off my sites has a sequence of identical pages with the exception of the image and the PayPal code to buy it - which also changes.

 

[Raw Rob]

You can't create automation for this because too many things are different,

As I said above, you can, because some sites such as RedBubble do it on the fly with images uploaded by the user.

 

[fisicx]

As I said above, you can, because some sites such as RedBubble do it on the fly with images uploaded by the user.

Yes, but that no good for the op who wants her own site. The redbobble site will have cost thousands to develop.

 

[Raw Rob]

Yes, but that no good for the op who wants her own site. The redbobble site will have cost thousands to develop.

Of course. But I'm responding to people saying it can't be done, when clearly it can. Plus I don't think it would be that difficult to code for someone who is experienced in working with ImageMagik or gd.

 

[fisicx]

It can't be done to meet the needs of @Rachel123. There is no plugin or simple script that does this. I did something similar a while back and it's not simple or easy - it cost the client about $1500 and even then it only worked on predefined colour swatches.

ImageMagik and GD are constantly being hacked as they write directly to the database.

 

[Mark_Taylor_]

Yes we know there are many php graphics libraries that do this, i've used a few in the past, but more often than not end up reverting to photoshop layer masks.

You can automate photoshop very easily and batch process as many images as needed.
I'm far more inclined to trust photoshop's advanced colour algorithms to get the tone of the clothing correct than trust a php graphics library. I also like the image compression results much more in photoshop.

We also didn't like the cpu cycles and RAM usage of these GD or imagemagick and got timeouts and even crashes.

But if you have LOADS of images then things may be the way forward for you.

 

[Mark_Taylor_]

Might be worth a read: https://foliovision.com/2010/03/imagemagick-vs-gd

 

[fisicx]

That's a report from 2010!

The have been all sorts of warnings since then to avoid using either if you want to keep your site safe.

 

[Mark_Taylor_]

Yeah that report is old.. maybe they have improved.

I haven't used these server libraries in about 5 years. Are there hosted options for this on CDN's such as cloudinary as i know their CDN allows on the fly image manipulations.

 

[fisicx]

Yeah that report is old.. maybe they have improved.

No they haven't. They are still dodgy and should be avoided.

 

[Chris Ashdown]

We do something similar on our site and I imagine its how others do it by photographing each colour and matching then as close as you need look at
http://www.internet-workwear.co.uk/...rim-Beauty-and-Therapy-Tunic-NF54.html#SID=19
Not the best example as some are larger than others but shows the end result

 

[paulears]

How can any automation manipulate an image provided by users and then morph it into exactly the same look - at best, it could sample colour and apply that to a new image - but manual approval of each image would be needed to assess success? Any automatic system that can do this cannot do it 100% correct - can it? User images will be all totally different to the stock image everything has to mirror.

I'm happy being wrong - often am - but I find some image manipulating concepts difficult to imagine getting things right - pixel shifts between images really being obvious in this kind of material.

 

[Mark_Taylor_]

My clients tend to be very protective about the images, colour matching etc. For example I work with a high end lighting and handmade filament lightbulb company, they required shots with bulbs turned on and off, so had to take each photo separately as the hue and lux values needed to be as close as possible.

Same goes for many designer clothing manufacturers, some tend to be a bit obsessed with how their clothes look online (can't really blame them to be fair).

Having said that if its a cheapish printed t-shirt or coffee mug then the automated way may work just fine. But as mentioned above if you intend to host the image library, you may be opening yourself up to a lot of security headaches.

 

[Mark_Taylor_]

How can any automation manipulate an image provided by users and then morph it into exactly the same look

In photoshop for example you can create a layer mask and then simply remove the colour and replace it leaving the rest of the image untouched. It can be a little tricky but the tools in photoshop are so good these days its not that hard really.

 

[fisicx]

And that's exactly what @Rachel123 has been advised.

While there are tools that will let you change the colours of things on the fly (using flash for example), if you want to show a photo of a t-shirt in different colours (selected from a palette) and then add designs (maybe front and back) and have different views of the t-short then you need to create all those images.

You can probably do clever things with sprites and CSS layers but you still need the original images. You may also want to show the different sizes (on models), again you need to take photes of each size and then create all the different colours.

I've done this recently for a client and they had 150+ variants (size, colour and material). They had to create each image in photo shop. Once everything was set up it only took them a couple of hours.

 

[Raw Rob]

How can any automation manipulate an image provided by users and then morph it into exactly the same look - at best, it could sample colour and apply that to a new image - but manual approval of each image would be needed to assess success? Any automatic system that can do this cannot do it 100% correct - can it? User images will be all totally different to the stock image everything has to mirror.

I'm happy being wrong - often am - but I find some image manipulating concepts difficult to imagine getting things right - pixel shifts between images really being obvious in this kind of material.

Have a look at this
This was created on the Redbubble site, completely automated from a regular image (with straight sides) which I uploaded.

 

[fisicx]

Yes, but the software on the redbubble site will have cost thousands to develop. I doubt the OP has the money to pay for software development. There is one tool I saw you can get that does just this but it's $2500.

And while redbubble does let you manipulate the colours, you still need to create each image for the swatch. Take a look at this: https://www.redbubble.com/people/ka...=womens&body_color=black&print_location=front. Click on a different colour and a new image loads.

Which means they might just as well use photoshop to create the images.

 

[Mark_Taylor_]

That looks great, very impressed, it would fool most people into thinking it was a unique photograph of the product.

That said it still wouldn't pass my particular clients brand guidelines, (but they are really protective of their products and brand). They spend stupid money on their product photography, more money than sense i say ;-)

 

[fisicx]

That looks great, very impressed, it would fool most people into thinking it was a unique photograph of the product

For about a millisecond. Showed it to my wife and she spotted the crop almost immediately (She buys loads of cushions. I now struggle to even get into the bedroom there as so many of the things).

 

[Mark_Taylor_]

Yeah, the jaggy crop lines and dodgy lighting / shadows are a bit of a give away, but for the lay person its more than good enough to give you an idea of what you are buying.

However that was the reason my clients all dismissed it out of hand, good enough for some things but not others. I'm still impressed though considering its an algorithm.

 

[Rachel123]

Errr...I didn't realise the conversation was going on; never got any more email notifications. I only came online to pop a few things I'd found on here in case it's ever useful for anyone. I'm partial to WordPress and ergo Woocommerce, so I only searched on those platforms, but I'm sure other platforms have their own extensions:
https://codecanyon.net/item/woocommerce-custom-product-designer/10959830
https://codecanyon.net/item/woocommerce-custom-tshirt-designer/5185471

I have, however, just read all your comments and I'm looking into Photoshop layers and other such gobbins too!

Thanks again.