Jump to content
You must now use your email address to sign in [click for more info] ×

Recommended Posts

Hello guys (and affinity designer pros),

 

I tried now 8 hours to fix this bug and it makes me crazy!!!

 

First I have to say, I am not into graphic design, so I am only self-taught and everything I don't know how to do, I don not have any clue where to look for or what to google...

 

I made an image with two colors, black and light green (#8EDB8D). Unfortunately because I don't have any clue about color management, when I save my image as JPG or PNG the colors look pale and sickly. I found out that it has something to do with RGB/CMYK conversion of print views and web views. Anyway I found an article in a forum, that I can save my picture as SVG (no rasterize) and open it again and export from new to JPG and then it should work... actually it did! For lots of small graphics consisting of texts and curves, this was a quite useful and effective workaround for noobs like me.

 

Unfortunately, I made also an important big document with text, curves and pixel layers (I bought a Wacom tablet and drew some sketches, mostly shadows on my (boring) curves to have them look more realistic. I am quite happy with my results, because I started two weeks ago with 'graphic design'. Unfortunately, when I now export to SVG (without rasterize), all pixel layers disappear. If I export to SVG format with rasterize, they appear, but most graphics seem to be placed incorrect and stretched, so it seems to be difficult for lots of small pictures to correct them all by hand after a conversion, which should work automatically.

 

So here's my two questions:

 

1) Does anyone know the official preferred way to convert my image without workaround (SVG conversion) to have the colors not being shale?

 

2) If not possible, does anyone know a way, how I can use my workaround with SVG conversion without disappearing all handmade pixel layers or having them stretched?

 

BONUS: Does anyone know something else how to fix this?

 

I'll attach my afdesign file (How to Flyer CMYK4) and a another jpg file (U CMYK) that shows, how the color of the light green should look like after conversion (not that pale, slicky one).

 

Sorry for the probably dumb question...

 

Thanks in advance for your support guys!

 

You can't think how much your help will get me hope again, that it is possible with Affinity Designer to do some basic sketches for my homepage...

 

Best regards,

 

Matthias

How to Flyer CMYK4.afdesign

post-52997-0-22039900-1487987320_thumb.jpg

Link to comment
Share on other sites

Hi matthias & welcome to the forums! Here is some background info you may find useful:

 

RGB & CMYK are color spaces, basically ways to describe the production of colors.

 

RGB stands for Red, Green, & Blue, a way to create colors by adding these three colors of light together. This is what you see as color on your monitor -- three colors of LEDs combining to produce all the colors the monitor can display. This range is called its color gamut.

 

CMYK stands for Cyan, Magenta, Yellow, & Key, a way to create colors by subtracting reflected light from things, typically by using colored inks. The key color is usually black. The output of an inkjet printer is an example -- the inks it deposits on paper absorbs light shining on it to produce a range of colors.

 

These two methods of producing colors are very different, so it should be no surprise that there is no perfect way to convert from one to the other. This is where understanding a little about color management is helpful. 

All 3 1.10.8, & all 3 V2.4.1 Mac apps; 2020 iMac 27"; 3.8GHz i7, Radeon Pro 5700, 32GB RAM; macOS 10.15.7
Affinity Photo 
1.10.8; Affinity Designer 1.108; & all 3 V2 apps for iPad; 6th Generation iPad 32 GB; Apple Pencil; iPadOS 15.7

Link to comment
Share on other sites

These two methods of producing colors are very different, so it should be no surprise that there is no perfect way to convert from one to the other.

 

One important difference is that the gamut of the CMYK colour space is very much smaller than the gamut of the RGB colour space. In particular, bright RGB colours such as pure green (#00FF00) become duller when converted to CMYK, and the same probably applies to the light green (#8EDB8D) in the OP's example.

Alfred spacer.png
Affinity Designer/Photo/Publisher 2 for Windows • Windows 10 Home/Pro
Affinity Designer/Photo/Publisher 2 for iPad • iPadOS 17.4.1 (iPad 7th gen)

Link to comment
Share on other sites

https://www.youtube.com/watch?v=AKECfD_lK_o

I found this tutorial helpful when trying to wrap my head around printing vs monitor colors 

  https://www.printelf.com/cmyk

 

It seems like printing company websites have more info on the subject.

Skill Level: Beginner, digital photography, digital editing, lighting.

Equipment: Consumer grade. Sony Nex5n, Nikon D5100, (16MP sony sensors)

Paid Software: Affinity Photo, Affinity Designer, Lightroom4

Free Software: NIK collection, Sony CaptureOne9, Cyberlink PhotoDirector6, Hugin, ImageJ, MS Ice, Davinci Resolve

Computer: Win10 home, CPU Skylake I7-6700, GPU Saphire HD7850 1G, Plextor SSD

Link to comment
Share on other sites

Guys thank you so much @R C-R @Alfred @rmar !!!  :)

 

That helped me a lot for a better understanding.

 

That video and the site is awesome.

 

 

 

I found this tutorial helpful when trying to wrap my head around printing vs monitor colors 

 

@rmar: do you know if there is some 'converter to calculate colors?

@Alfred, @R C-R: do you know, which data formats do not change the color gamut range, when converting from affinity data format to any common format (png, tiff, jpg/jpeg, ...)?

Link to comment
Share on other sites

It always depends also on the used/choosen color gamut here, if the color is part of the color range! - For simpler no wide gammut color spaces like CMYK (usually for printing/prepress), sRGB, Apple RGB ...

 

post-49706-0-15478100-1488051444_thumb.jpg

 

And then there are also some wider color gammuts like Adobe RGB which covers much more colors the simpler color gamuts don't cover:

 

post-49706-0-58155600-1488051460_thumb.jpg

☛ Affinity Designer 1.10.8 ◆ Affinity Photo 1.10.8 ◆ Affinity Publisher 1.10.8 ◆ OSX El Capitan
☛ Affinity V2.3 apps ◆ MacOS Sonoma 14.2 ◆ iPad OS 17.2

Link to comment
Share on other sites

@Alfred, @R C-R: do you know, which data formats do not change the color gamut range, when converting from affinity data format to any common format (png, tiff, jpg/jpeg, ...)?

Color gamut is a property of the device, not the file format. From the PC Mag link I posted earlier:

The entire range of colors available on a particular device such as a monitor or printer. A monitor, which displays RGB signals, typically has a greater color gamut than a printer, which uses CMYK inks. When a color is "out of gamut," it cannot be properly converted to the target device; for example, to a different type of printer.

 

There is no way around this -- if the printing device can't reproduce a color that the monitor can display, converting to a different file format will not change that.

 

This is why understanding something about color management systems is important. I think the three part article from Cambridge In Colour I linked to does a good job of explaining the basics, but there are many others on the web.

All 3 1.10.8, & all 3 V2.4.1 Mac apps; 2020 iMac 27"; 3.8GHz i7, Radeon Pro 5700, 32GB RAM; macOS 10.15.7
Affinity Photo 
1.10.8; Affinity Designer 1.108; & all 3 V2 apps for iPad; 6th Generation iPad 32 GB; Apple Pencil; iPadOS 15.7

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.