Highlighted

Need help with color variation between Ai and png

Community Beginner ,
Aug 12, 2020

Copy link to clipboard

Copied

I am working on a MacBook Pro, OS 10.14.6, using Ai (v. 24.2.3). 

I just created a massive number of graphics in Ai, which ultimately are being used for an online conference. The group creating the artwork requested that I export each layer as a png file with transparency, 72 ppi. Every. Single. Layer. I built the files completely from scratch in Ai, using "Web" settings on the initial file set-up, 1920 x 1080. The files look perfect on my end (the Ai file and the pngs) but when the production company uploads the png files into VMix, something goes wrong.

 

Below, (A) is a screenshot from within Ai (bright and beautiful!) with my swatches panel, (B) compares what the png image looks like online via Chrome: (left) the png uploaded into the VMix video, and (right), a png uploaded to my personal website. (C) are screenshots of my Color Settings and Assign Profile settings.

 

What can I do to eliminate this dramatic color variation? I typically avoid png files altogether but when transparency is needed there's not much choice. SVG results in the same "dulling" when the background is transparent.

 

(A) within Ai

Screen Shot 2020-08-12 at 9.36.43 PM.png

(B) Left, video online; right, website online, all colors are duller/muted, video is the worst.

Online comparison.png

 

(C)

Color Settings.pngAssign Profile.png

Adobe Community Professional
Correct answer by Ton Frederiks | Adobe Community Professional

For the Illustrator files that currently have the ProPhoto RGB document color profile, you could export to png using File > Export > Save for Web (Legacy).

Safe for Web will convert the file to sRGB when exporting.

Files already exported from Illustrator ProPhoto RGB documents could be opened in Photoshop.

Then assign the ProPhoto RGB profile (Edit > Assign Profile...)

Then Edit > Convert to Profile... and choose sRGB as  the destination space.

I you have a lot of files you can make an action of these steps and batch apply it.

TOPICS
Bug, How to, Import and export

Views

45

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Need help with color variation between Ai and png

Community Beginner ,
Aug 12, 2020

Copy link to clipboard

Copied

I am working on a MacBook Pro, OS 10.14.6, using Ai (v. 24.2.3). 

I just created a massive number of graphics in Ai, which ultimately are being used for an online conference. The group creating the artwork requested that I export each layer as a png file with transparency, 72 ppi. Every. Single. Layer. I built the files completely from scratch in Ai, using "Web" settings on the initial file set-up, 1920 x 1080. The files look perfect on my end (the Ai file and the pngs) but when the production company uploads the png files into VMix, something goes wrong.

 

Below, (A) is a screenshot from within Ai (bright and beautiful!) with my swatches panel, (B) compares what the png image looks like online via Chrome: (left) the png uploaded into the VMix video, and (right), a png uploaded to my personal website. (C) are screenshots of my Color Settings and Assign Profile settings.

 

What can I do to eliminate this dramatic color variation? I typically avoid png files altogether but when transparency is needed there's not much choice. SVG results in the same "dulling" when the background is transparent.

 

(A) within Ai

Screen Shot 2020-08-12 at 9.36.43 PM.png

(B) Left, video online; right, website online, all colors are duller/muted, video is the worst.

Online comparison.png

 

(C)

Color Settings.pngAssign Profile.png

Adobe Community Professional
Correct answer by Ton Frederiks | Adobe Community Professional

For the Illustrator files that currently have the ProPhoto RGB document color profile, you could export to png using File > Export > Save for Web (Legacy).

Safe for Web will convert the file to sRGB when exporting.

Files already exported from Illustrator ProPhoto RGB documents could be opened in Photoshop.

Then assign the ProPhoto RGB profile (Edit > Assign Profile...)

Then Edit > Convert to Profile... and choose sRGB as  the destination space.

I you have a lot of files you can make an action of these steps and batch apply it.

TOPICS
Bug, How to, Import and export

Views

46

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Aug 12, 2020 0
Adobe Community Professional ,
Aug 13, 2020

Copy link to clipboard

Copied

Don't use ProPhoto RGB as your document RGB.

Illustrator will use that when exporting to PNG but does not save the profile in the resulting PNG.

Other apps will  assume that sRGB or another RGB is used (which isn't) and display the colors wrong.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 13, 2020 0
Community Beginner ,
Aug 13, 2020

Copy link to clipboard

Copied

Thank you for that. Can you elaborate or point me to an explanation of what I should use when exporting to PNG? I've reset my color settings/assign profile to sRGB, but when exporting there are multiple choices with no explanations about which works for what. 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 13, 2020 0
Adobe Community Professional ,
Aug 13, 2020

Copy link to clipboard

Copied

For the Illustrator files that currently have the ProPhoto RGB document color profile, you could export to png using File > Export > Save for Web (Legacy).

Safe for Web will convert the file to sRGB when exporting.

Files already exported from Illustrator ProPhoto RGB documents could be opened in Photoshop.

Then assign the ProPhoto RGB profile (Edit > Assign Profile...)

Then Edit > Convert to Profile... and choose sRGB as  the destination space.

I you have a lot of files you can make an action of these steps and batch apply it.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 13, 2020 0