ImageMagick command to strip ICC color profiles - imagemagick

I have ~500 images that all seem to have a color profile on them; as when I upload to Shopify it changes the color tone of the images. This is due to Shopify stripping out the color profile on upload as per this link:
https://help.shopify.com/themes/customization/colors-images-and-video/fix-colors-of-uploaded-images
I have tried to use ImageMagick to strip out all the color profiles: mogrify +profile "-strip" *.jpg and this noticeably changes the image color which I can see on the image thumbnail but when I try uploading to Shopify the color is still being changed.
What am I doing wrong with ImageMagick? Or maybe it's not a color profile that needs removing?
I have also tried this on Photoshop using 'Save for Web', and this method strips out the color profile, but I don't want to do this for ~500 images, and File > Automate > Batch in CS6 doesn't have any Action for Save For Web. Can this be automated? I am running Windows.
Thanks
Original: http://imgur.com/3lcuZVy
Shopify: http://imgur.com/ko2bQvg
Photoshop: http://imgur.com/Ez3bNT4
EDIT:
I have run ImageMagick identity on the image 3 times. On the original image, on the image after upload to Shopify, and then 'save image as' and again after doing save for web on Photoshop
http://pastebin.com/710fHhJ0
Observations:
Original image: CMYK, ColorSeparation
Shopify image: sRGB, TrueColor
Photoshop image: sRGB, TrueColor

So after another ~hour of playing around I looked into Photoshop Automation. Turns out you can record your own macro and play it back. I wasn't aware you could record your own hence trying to play around with ImageMagick and this question.
For those who may stumble across this:
Window > Actions
[pops up on the toolbar]
Click the folded paper (New Action)
The record (circle) should now change to Red, it is recording.
Carry out your action, e.g mine was to go to File>Save for Web>click OK
Once finished your repetitive task, click the Stop button (square)
Now use your new recorded action, File > Automate > Batch
Unfortunately, this doesn't help those trying to do Save For Web using ImageMagick only.

Related

Preserving normal map "extra areas"

This is what an image marked as a "normal image" looks like in Unity:
When I import this image into GIMP, this image appears like this:
I guess a big part of the image is stored in the alpha channel, and GIMP doesn't display it.
At first, I thought it was only a display problem, but when I then export it from GIMP and import it into Unity, the image looks like this:
(Yes, I have flipped it).
As one can see, the alpha channel is gone.
How could I tell GIMP to preserve it?
Thank you!
Edit: Here is some more information:
The image is a .TIFF.
If I save the edited image using "Overwrite ", then the background gets killed.
Then I try "Export as", and I choose "PNG". I leave "Save color values from transparent pixel" checked, and I leave the selection below at "Automatic pixel format". This also removes the "background".
What else could I try?
You don't say how you are exporting the image back from GIMP - but if you use the export as... dialog, upon choosing to export to .png, there is a save color values from transparent pixels checkbox.
Just check it before confirming the export.
(It won't show if you just click on export to NAME to write the same image back - you have to do export as... and select the same name for the dialog to apear).
Also, it is not that part of the image is stored in the alpha channel The alpha channel just contains opacity data - in this case, it contains a maks for regions of full-opacity/full-transparency for the shown region. GIMP's normal saving mechanism will erase the color data in the fully transparent areas to save image size upon exporting.
If you are using other image formats than PNG, GIMP does not have the option to preserve the data in transparent areas - the workarounds would be exporting to PNG and then converting to PNG with another tool (which might or not preserve these data), or raising the alpha-channel values to "1" instead of "0" before exporting in GIMP (can be done with colors->levels or colors->curves)

Images can't contain alpha channels or transparencies

Apple has released new version of iTunes Connect & I got an error message when I tried to set Screenshots on itunes connect for my app.
"Images can't contain alpha channels or transparencies."
I've found you can also just re-export the png's in Preview, but uncheck the Alpha checkbox when saving.
AFAIK png with transparency is not allowed. use jpg OR update your png (photoshop or whatever you using to create the png) and delete the transparency areas. if you work with shadows, use jpg, that will do no headaches.
it's so easy...
Open image in Preview app click File -> Export and
uncheck alpha
For this i made a new simple tool. You can remove alpha channel (transparency) of multiple .png files within seconds.
You can download from here http://alphachannelremover.blogspot.com
Use mogrify tool from ImageMagick package to remove alpha channel.
brew install imagemagick
cd folder_with_images
mogrify -alpha off */*.png
Update from May 3
You can tell whether image contains alpha channel by running:
sips -g all image.png
In case you render screenshots in iOS Simulator you can drop alpha channel by passing BOOL opaque = YES to UIGraphicsBeginImageContextWithOptions:
UIGraphicsBeginImageContextWithOptions(imageSize, YES, 0);
You must remove alpha channels when uploading a photo to iTunes Connect.
You can do this by Preview, Photos App (old iPhoto), Pixelmator, Adobe Photoshop and GIMP.
Preview
Open the photo in Preview (if the photo is in your photo album in Photos app (the old iPhoto), then simply drag it from the album to desktop. Then control-click (right-click when mouse) the duplicated photo and select Preview.app under Open With menu).
Select Export… under File menu, and after selecting the destination, uncheck Alpha at the bottom, and click Export.
Pixelmator
Open the image in Pixelmator, without creating a new Pixelmator file. Just drag the photo to the Pixelmator window.
From Share menu, click Export for Web…
In the top bar, deselect Transparency.
Click Next and then save the new file somewhere.
Finally, upload the new photo to iTunes Connect.
GIMP
Open the photo in GIMP.
Open the Layer menu.
Under Transparency, click Remove Alpha Channel.
Save the photo.
Adobe Photoshop
Open the photo in Adobe Photoshop.
Under Layer menu, click Layer Mask and then From Transparency.
Delete the layer mask by right-clicking on the mask in the Layer panel and selecting Delete Layer Mask.
If you are using Photoshop go File > Save for web (Command + Option + Shift + S). Make sure the Transparency is unchecked and this should work.
Still a problem in 2019 :=)
This worked for me:
Select all images you want to upload -> Right click -> Open in Preview -> Export -> Uncheck alpha -> Use the exported images.
Extending Roman B. answer. This is still a problem, I was uploading a cordova app. my solution using mogrify:
brew install imagemagick
* navigate to `platforms/ios/<your_app_name>/Images.xcassets/AppIcon.appiconset`*
mogrify -alpha off *.png
Then archived and validated successfully. 👍
On Pixelmator you can use 'Share > Export for Web...' (⇧ + ⌘ + E)
and deselect Transparency in the Tool Options Bar.
i have same problem just compress your png file on https://tinypng.com/ online and then try to upload that new compressed png file.
its work for me.
You can remove the alpha channel from a PNG file from the command line with pngcrush, using the flag "-c 2":
$ file input.png
input.png: PNG image data, 1024 x 1024, 8-bit/color RGBA, non-interlaced
$ pngcrush -q -c 2 input.png output.png
libpng warning: iCCP: known incorrect sRGB profile
$ file output.png
output.png: PNG image data, 1024 x 1024, 8-bit/color RGB, non-interlaced
Note the change from RGBA to RGB: the Alpha channel is gone!
pngcrush lives at http://pmt.sourceforge.net/pngcrush/
Faced same issue, Try using JPG format !! What worked for me here was using a jpg file instead of PNG as jpg files don't use alpha or transparency features. I did it via online image converter or you can also open the image in preview and then File->Export and uncheck alpha as option to save the image and use this image.
To get around the problem I batched converted using fireworks my png32 files to png24 for upload quick and easy. Jpeg works also but it is lossy.
Faced same issue, Try using JPG format !!
Photoshop
Slice it
Save for web
Uncheck Transparency
You can export to PNG without alpha in Preview. Simply open your image, choose export, select PNG, uncheck Alpha, and click Save. Preview also support batch export if you open all your images at once.
On Windows 10 you can use Paint 3D.
Open the image
Choose "Canvas" in the top menu
De-select the "Transparent canvas" checkbox in the right panel
Save
If you have imagemagick installed, then you can put the following alias into your .bash_profile. It will convert every png in a directory to a jpg, which automatically removes the alpha. You can use the resulting jpg files as your screen shots.
alias pngToJpg='for i in *.png; do convert $i ${i/.png/}.jpg; done'
What worked for me here was using a jpg file instead of PNG as jpg files don't use alpha or transparency features. I did it via online image converter or you can also open the image in preview and then File->Export and uncheck alpha as option to save the image and use this image.
You can simply create a new Photoshop document and set its default background to White instead of Transparent. Then, copy and paste your image to the newly created document and save it.
Exporting from Sketch
To avoid transparency, ensure no layer extends beyond the artboard bounds.
Convert your PNG image to JPEG format.

App icon displays a black square.

I am having my app icon be displayed as a black square instead of the intended image.
I have placed all of my AppIcons into the folder, Im wondering what could be causing this.
Your image needs to be an opaque PNG. No transparency or anything, as well as being the correct size.
If it already is that, try opening it in Preview and re-saving it as a PNG. That way OS X 'generated' it and it should be compatible. If that helps fix the issue, then your image editing program is saving in the wrong format...see info below.
Apple has this to say on generating PNGs:
For all images and icons, the PNG format is recommended. You should avoid using interlaced PNGs.
The standard bit depth for icons and images is 24 bits—that is, 8 bits each for red, green, and blue—plus an 8-bit alpha channel.
I have had this happen when the app is listed as a .png file, but the system is recognizing it as a .jpg or some other type ... find your icon in "finder" and open it with preview, go to the file menu select "export as" and make sure you choose PNG as the save format. Delete the old version in the application, delete the derived data, clean your project, and rebuild the application.

How to get a gold foil look using ImageMagick

My requirement is to convert a image with a transparent background to look like gold foil (the way it’s printed on leather etc.)
I've been using ImageMagick and am getting excellent results with certain kind of PNGs but not with others.
The Image Magick command I am using is:
composite foil.png tmp.png logog.png outputg.png
foil.png is just a gold foil image
tmp.png is a plain/empty transparent background png
logog.png is the logo with transparent background
outputg.png is the output (this is what I need)
However, this kind of result does not occur in most other images with transparent backgrounds.
Ex.
logom.png gives outputm.png which is all gold
logos.png gives outputs.png which is all gold and all wrong
Download all files as zip from here from here http://sdrv.ms/1h7QW4A or view from http://s.imgur.com/a/ExLRE
I checked the encodings of these all PNGs and they are all the same. What is wrong with logom and logos that the outputs are not as they should turn out to be?
If I am approaching the solution from the wrong direction, please suggest alternatives.

Automate Saving for iPhone images in Photoshop

I have a dream script I'm looking for and wondering if anyone here as stumbled across one
Problem: Creating #2x and regular PNG files for iOS software
Edit: no need to worry about file type. iOS images should ALWAYS be 24bit PNG
In my workflow, I'll get my image all set then go through this same exact ritual every time:
Save for Web & Devices
Press Save and choose a filename, like "myimage#2x.png"
Save for Web & Devices again
Reduce image size by 50%
Press Save and choose a similar filename like "myimage.png"
My dream photoshop script would
1. Ask for a filename & location: i.e. present a typical save dialog
2. I'd enter a name "myimage"
3. it would save the current document as "myimage#2x" in that location, and then save a 50% reduced image named "myimage" also in that location
Any ideas? I've poked around the photoshop scripting reference but its a bit overwhelming.
Thanks!!
You could use photoshop Actions for that. You can found dozens of how-tos for that in google.
But i rather prefer to save all images just in retina with #2x and then load them all in the little and smart app called unretiner (Appstore link) to generate the lowers images.
Here is an action set I created (JLRetinaPNGExport.atn) which you can find here. This action set comes with 3 actions:
current layer export as .png at 100% then 50%
current layer, trim transparent pixels, then export as .png at 100% then 50%
merge visible and export as .png at 100% then 50%
This action set was modified from this action set. Hope this helps!

Resources