Gradient on icon, drop shadow
Posted: 2013-11-23T18:35:42-07:00
Hi people,
In my company we have a HUGE iconpackage with white or black icons. And now the design for our product is changing somewhat, so our icons now need to have a bit of gradient and some drop shadow.
It's really easy to do in photoshop, but I would really like to make a script for it, so no manual work is needed.
I've made a small example of the process:
I've made a script that "kind of" works. But my guess is that it's very inefficient because of all the seperate calls to convert (that doesn't really matter though, but for the sake of learning, pointers are welcome). The real problem is that I lose some precious detail while going through the process.
This is how I do it:
0)The original icon (48x48 pixels):
1) Making a suitable gradient ("convert -size 48x48 gradient:'#c2cfdc'-'#849db8' gradient.png")
2) Making a completely red background ("convert -size 48x48 xc:red red_background.png")
3) Merging the icon with the red background ("convert red_background.png resized.png -gravity center -composite icon_with_red_background.png")
4) Making the black icon transparent ("convert icon_with_red_background.png -fuzz 55% -transparent black icon_transparent.png")
5) Merging with the gradient background ("convert gradient.png icon_transparent.png -gravity center -composite +repage with_gradient.png")
6) Removing the red color ("convert with_gradient.png -fuzz 55% -transparent red with_gradient_no_red.png")
7) Creating a shadow ("convert with_gradient_no_red.png -background black -shadow 30x1+5+5 with_shadow.png")
Merging with the previous icon ("convert with_shadow.png with_gradient_no_red.png -composite +repage finalicon_normal.png")
9) Then resizing to the final icon size ("convert finalicon_normal.png -resize 24x24 finalicon_resized.png")
As you can see, in step 4 (and probably also step 6), I lose a lot of the "anti-alias" detail. I'm pretty sure if the steps that make colors transparent could be improved, then it would all be okay. But I've googled a lot and so far found no answer, so I really hope someone here can help.
Thanks in advance!
In my company we have a HUGE iconpackage with white or black icons. And now the design for our product is changing somewhat, so our icons now need to have a bit of gradient and some drop shadow.
It's really easy to do in photoshop, but I would really like to make a script for it, so no manual work is needed.
I've made a small example of the process:
I've made a script that "kind of" works. But my guess is that it's very inefficient because of all the seperate calls to convert (that doesn't really matter though, but for the sake of learning, pointers are welcome). The real problem is that I lose some precious detail while going through the process.
This is how I do it:
0)The original icon (48x48 pixels):
1) Making a suitable gradient ("convert -size 48x48 gradient:'#c2cfdc'-'#849db8' gradient.png")
2) Making a completely red background ("convert -size 48x48 xc:red red_background.png")
3) Merging the icon with the red background ("convert red_background.png resized.png -gravity center -composite icon_with_red_background.png")
4) Making the black icon transparent ("convert icon_with_red_background.png -fuzz 55% -transparent black icon_transparent.png")
5) Merging with the gradient background ("convert gradient.png icon_transparent.png -gravity center -composite +repage with_gradient.png")
6) Removing the red color ("convert with_gradient.png -fuzz 55% -transparent red with_gradient_no_red.png")
7) Creating a shadow ("convert with_gradient_no_red.png -background black -shadow 30x1+5+5 with_shadow.png")
Merging with the previous icon ("convert with_shadow.png with_gradient_no_red.png -composite +repage finalicon_normal.png")9) Then resizing to the final icon size ("convert finalicon_normal.png -resize 24x24 finalicon_resized.png")
As you can see, in step 4 (and probably also step 6), I lose a lot of the "anti-alias" detail. I'm pretty sure if the steps that make colors transparent could be improved, then it would all be okay. But I've googled a lot and so far found no answer, so I really hope someone here can help.
Thanks in advance!