Custom Google Map Icon creation/simplification help needed

[WIndjammer]

Hi Forum,

 

For a number of years, I have created icons for Google My Maps users. If you want to see them you can find some here.

 

PdN has always been my tool for doing so. The process is quite straight forward and I have used a number of plugins to help me create what them. I am now in the process of starting a new generation of Map Icons and I am looking to this forum for help me with streamlining this process. The old generation of icons were single colour icons, the new generation will be multi-coloured.

 

I have created a template file looking like this as a finished product.

This icon has:

- A shadow around it (added in a separate Layer)

- A 20% transparent White inner frame to make it lighter (added in a separate Layer)

- The top of the frame has an 80% transparent White added to it (added in a separate Layer)

- The bottom of the frame has an 80% transparent Black added to it (added in a separate Layer)

- The Frame has colour Strong PINK (HEX: BF1140) (RGB 191,17,64) placed in a separate Layer in my PDN-file and looks like this:

All pixels with colour has the same colour. Some pixels are transparent, with different levels of transparency.

 

1. The First Step is to Recolour this new icon Frame Layer to my 15 Base Colours.

 

How should/could I go about doing this? I will use this process a lot in creating the new icons. Many of them will exist in several categories (colours). Almost all of the new ones will have many colours when I start working on them off pictures or symbols found on the Internet.

 

I have tried the following previously:

- PdN native Recolour tool => Uses a brush, not what I need.

- eFunds Color Replace  => not working for this, OR I don´t understand how it works... It is old as well, really old.

- YellowAfterlife's Channel Swap  => not working for this, OR I don´t understand how it works...

- MJW's Color Clearer => not working for this, OR I don´t understand how it works...

- ReMake's Color Range (ReMake 2016) => not working for this, OR I don´t understand how it works...

- Anthony Scoffler's Replace Colors => would work IF I didn't have to choose the Transparency.

 

- SilverHammer/Max Anselm's Advanced Recoloring/Advanced Color Replacement =>  Seems to Work for this example but I really don't understand how or why it works... It was posted on January 17, 2009 and never updated after.

 

What I would like to see is a plugin that simply converts ALL Colours to the one I set and leaves Transparency as it is. To me, this seems like a very basic and simple function and I cannot believe no one has made this possible yet, or has someone? If you want to be a little advanced the Colour I set could be picked up with the Color Picker or entered as text, or be the Primary/Secondary Color.

 

Best,

 

//Matthias

[Eli]

I think there is one more option that you have not tried yet: Reverse Blend.

[Ego Eram Reputo]

I think you're over thinking this. Use the Recolor Tool with several passes or make the brush size large enough to cover the whole icon.

[Ego Eram Reputo]

Expanding on my above post, here's the technique explained in depth.

 

1. Select the Recoloring Tool
2. Set the brush size to around 30px - large enough to cover the icon from side to side.
3. Set the tolerance to around 20% - I got this figure from trial and error.
4. Set the mode to Sampling: Secondary. This means the Primary color will be used to replace the Secondary color.
5. Set the Secondary color to the base icon color that you want to change. #bf1140 I think from your color chart.
6. Set the Primary color to the new color. In this image I've used #11bf39 the 'Animal' color from your chart. Did you know you can paste these hex values into the color dialog? Paste them into the Hex number box.
7. Use the targeting circle to brush over the icon with the left mouse button held down.
8. Save the recolored icon (use Save As... or Ctrl+Shift+S to specify a new filename & extension).
9. Undo the recoloring step so the icon reverts to its original color.
10. Repeat steps 6  to 9 for each icon you wish to recolor.

 

[WIndjammer]

@Eli Thank you for the tip, I will look into that, I have not used this plugin before and by only it's name I do not understand how this will work.

 

@Ego Eram Reputo Thank you very much for your extremely detailed description of how I could use the native Recolor tool. I have followed your instruction and it does indeed recolor the main colour like you explain but the tool does not recolor the Transparent pixels in the corners of the Frame and at the bottom. I have played around with the tolerance setting but that changes very little for me and in no case fixes this. After using the Recolor tool the newly coloured frame looks like this:

[Ego Eram Reputo]

How high did you go with the tolerance? Did you try increasing the Hardness as well?

[Ego Eram Reputo]

I wound both Tolerance and Hardness up to 84% and got this result. Good enough?

 

[Zagna]

Could a custom shape work somewhat?

[WIndjammer]

@Eli  OK, now I have downloaded and installed Reverse Blend. I have no idea how to use this to get my result. Sorry.

 

@Zagna That is a really cool shape, but the shape I need has already been designed, what I am looking for now is to change the colour of it. That function will be used on many, many icons that I have and will design, not specifically the frame, I only use this as an example to try on.

[Zagna]

Just now, WIndjammer said:

 

@Zagna That is a really cool shape, but the shape I need has already been designed, what I am looking for now is to change the colour of it. That function will be used on many, many icons that I have and will design, not specifically the frame, I only use this as an example to try on.

I meant it in a way that you can create your own shape as a custom shape and then use the Shape Tool to draw it in any color you want straight away.

That shape I did was just a minute in Inkscape doing a rough shape.

[WIndjammer]

@Ego Eram Reputo Thanks again for taking your time with this. No, the new settings you have tried, the result is not good enough. I will upload another example, perhaps that will make it easier to understand what I need. And for this example  SilverHammer/Max Anselm's Advanced Recoloring/Advanced Color Replacement actually produces the result I want.

[WIndjammer]

@Ego Eram Reputo @Zagna @Eli Here is another example of what I am trying to achieve.

 

 This is my new Home Symbol that will be placed inside the Frame above. I have just now designed this. To make the symbol look a little smoother I have used 4 levels of Transparency 51, 102, 153 and 204. The rest of the pixels are non-transparent. The Symbol is designed in Black (HEX: 000000) (RGB 0,0,0) 

 

 To make the Home Symbol a Home Icon I want to make it into the same Colour as the Lodging Frame Strong ORANGE (HEX: bf9011) (RGB 191,144,17). I want to change the Colour only, not the Transparency of any pixel. The Symbol needs to look exactly the same regardless of colour.

 

 This is how the finished Icon for Home should look like, combining the Symbol with the Frame in the colour for Lodging.

• What I am looking for is a process/function/plugin to Recolour the Symbol to one single Color while retaining the Transparency.

//Matthias

[dipstick]

Use Adjustments > Hue / Saturation.....

 

[Zagna]

I was able to do this with 2 custom shapes, frame and house. Just my way of doing it because I like playing with Inkscape

[WIndjammer]

@dipstick Thanks for the reply! To work in HSL I need a conversion table from HEX/RGB to HSL and those work with decimal values. The HSL in PdN doesn't so I won't achieve the colours I need, just almost, which in this case isn't good enough. I need exact recolouring with retained transparency.

[WIndjammer]

@Zagna Great icons! At one point I might take the time to convert the 1000+ icons we have created in the old project from pixel to vector, but that is a bit off topic here.