36 replies to this topic

[mickesjo]

I have received many e-mails asking me how I do my icons. The latest reply, I thought, could also be posted here so that maybe someone else will be helped
I have seen many posts just like this one but whenever I need to point to them I can't find them...

The text below is an unedited e-mail reply so bare with me

------------------------------

Hi

Well to set the image transparency correctly you have to make an alpha channel in the channels pallette (right next to the layers pallette). Do it like this (if you have a great looking, already transparent png icon, proceed directly to #2):

1: Make sure that you have extracted the image in a good way from the background, also deleting any drop shadows. Delete all layers exept the one with the icon leaving only an image with the icon and the "transparent" surrounding the icon. Now you can add drop shadows or similar. If you have any layer effects you should create a new empty layer and merge the two so that the layer effects are rasterized and made "permanent" (do not use the "flatten image" command). Again - make sure that you have only one layer left (with transparency) so that there won't be any confusion in the later steps.

2: CTRL-click the layer (selecting the transparency data of that layer automatically).

3: Go to the channels pallette, click the menu button (the small arrow on the top right corner of the channels pallette) and choose "new channel". Click OK.

4: Now you're watching the black new alpha channel with the selection still active. Choose the paint bucket tool, white foreground color and fill the selection on the alpha channel. Now you can see the icon's outlines and such. Shadows will fade to black and it's clear to see all the transparency data doing what it's supposed to do.

5: Click the layers pallette and click on your image layer to re-activate the RGB channel.

6: Many people now consider themselves finished with the icon but this is a mistake. If the image is flattened at this stage there is a significant risk that the finished icon will have a "halo" of lighter pixels along the edge or even shadows that appear LIGHTER than the background. You simply have to do the following: Create AT LEAST 10 copies of the icon layer on top of eachother. The result will be a very rough image and any semi-transparent image data (i.e. glass effects etc) will become fully hardened. Don't worry - it's supposed to be like this. The transparency data is still in the alpha channel and we have simply made sure that the correct image colors are showing through the alpha channel.

(Note: I have made this "multiple duplication of a single layer"-thing into a Photoshop "action" by recording the sequence and binding it to an f-key)

7: Now you can flatten the image and save it. It looks rough but don't do anything until you have seen the icon in action on your PDA - I'm sure you will understand. Make sure you save the image in TGA format with "alpha channel" checked on the "save as"-dialogue window. I always save them in 32 bit format.

8: One way to test the alpha channel inside Photoshop is, when the image is done and saved, CTRL-click the alpha channel (so that it is selected), go back to the layers pallette and select the image layer. Hit CTRL+J to extract the selected imagery into a new layer. Drag this new layer into another image such as you background image or similar. Since it was the alpha channel's transparency data that was selected you can now see exactly how the image will look inside iLauncher or WAD etc.

I hope this helps, I have probably given more detail than you needed but... I'm sure you understand

Good luck and I'm very much looking forward to the release of your new theme suite!!

Best regards,

Michael

[blazingwolf]

Very nice mickesjo. I pinned it.

[trewblue]

Mickesjo,

Interesting reading mate, but could I be cheeky and ask if you could throw in a few
screenshots as examples.

Very informative, well worth pinning.

[wingchun]

hi thanks for this.

"Interesting reading mate, but could I be cheeky and ask if you could throw in a few screenshots as examples".
it would be more than nice

regards

[hezahonker]

Sorry guys but I just don't get this without pictures. Visual learner. Am I to understand that one cannot create a transparent background with a simple color as we have in the past with pink? I have photshop elements so I am sure I can do some of these things but it doesn't have a channels pallette.

[hezahonker]

Sorry guys but I just don't get this without pictures. Visual learner. Am I to understand that one cannot create a transparent background with a simple color as we have in the past with pink? I have photshop elements so I am sure I can do some of these things but it doesn't have a channels pallette.

OK, for any photshop elements folks I found

http://www.arraich.c.../pse_mmask1.htm

Michael, would you be so kind as to take a quick glance at this and give me a tweak. I am good on creating the alpha channel but I am unsure still how the transparency is created. I think if you see this you will have an idea of what I am working with. Should be hard to figure out on your end since you understand the basis of the alpha channel.

[mickesjo]

OK, for any photshop elements folks I found

http://www.arraich.c.../pse_mmask1.htm

Michael, would you be so kind as to take a quick glance at this and give me a tweak. I am good on creating the alpha channel but I am unsure still how the transparency is created. I think if you see this you will have an idea of what I am working with. Should be hard to figure out on your end since you understand the basis of the alpha channel.

Well I'm not that familiar with Element I'm afraid The tutorial seems OK when it comes to creating masks and that's basically what it's all about. But to create an Alpha channel (with the same black/white information as a "mask") you have to have a software that allows you to create/edit channels... The tutorial above is "ok" when it comes to create the clipping mask that gives you the transparency but you're only half way there when it comes to actual tga files with alpha channels...

Anyone else using Elements? Can someone help Hezahonker with the transition from layermask to alpha channel within this software?

[hezahonker]

Well I'm not that familiar with Element I'm afraid The tutorial seems OK when it comes to creating masks and that's basically what it's all about. But to create an Alpha channel (with the same black/white information as a "mask") you have to have a software that allows you to create/edit channels... The tutorial above is "ok" when it comes to create the clipping mask that gives you the transparency but you're only half way there when it comes to actual tga files with alpha channels...

Anyone else using Elements? Can someone help Hezahonker with the transition from layermask to alpha channel within this software? 

Hi everyone,

Michael and I have spoken via email. I told him I have finally cracked the code for Elements. I will post a tutorial and pictures in resources for those running Photoshop Elements.

[hezahonker]

Hi everyone,

Michael and I have spoken via email. I told him I have finally cracked the code for Elements. I will post a tutorial and pictures in resources for those running Photoshop Elements.

What the hey. I should just post it here too since this is pinned.

Here is my tutorial. One is in pdf and the other is .rgo for Repligo viewers although the conversion on the Repligo is not very good in the photos. The text is clear so it is still usuable.

Attached Files

•  PDFElementsTutorial.zip   933.54K   559 downloads
•  RepligoElementsTutorial.zip   216.05K   131 downloads

[topcaser]

What the hey. I should just post it here too since this is pinned.

Here is my tutorial. One is in pdf and the other is .rgo for Repligo viewers although the conversion on the Repligo is not very good in the photos. The text is clear so it is still usuable.

Why do i have to copy the layer ten times???

[hezahonker]

Why do i have to copy the layer ten times???

I took mickesjo's lead on that. In his Photoshop instruction he says to do this because it will help the appearance of the icon. However, to be honest I see no difference in Elements so do what you feel is right for you.

[mickesjo]

As I wrote:

6: Many people now consider themselves finished with the icon but this is a mistake. If the image is flattened at this stage there is a significant risk that the finished icon will have a "halo" of lighter pixels along the edge or even shadows that appear LIGHTER than the background. You simply have to do the following: Create AT LEAST 10 copies of the icon layer on top of eachother. The result will be a very rough image and any semi-transparent image data (i.e. glass effects etc) will become fully hardened. Don't worry - it's supposed to be like this. The transparency data is still in the alpha channel and we have simply made sure that the correct image colors are showing through the alpha channel.

This effect is clearly visible to me on all icons that are made without these steps - especially if they are flattened to a white background. If you don't want to "harden" edge pixels this way, at least make sure you flatten the image onto a black background since the "halo" then will be sort of a shadow effect instead... that will always look a bit better. If your icons always will be rendered on the same today background you can use a color from that today background image too but this, IMHO, is very limiting.

I would, though, like to point out that this "halo" effect that I mention is something that bugs me and I'm aware that I'm a graphics nerd. One should always make the icons in a manner that feels right and if you're happy with the result there's no need for the layer-cloning. There's no technical need for the layer-cloning... it's only cosmetics

[mickesjo]

I feel it's time to clear things up a bit. The image below displays two rows of information. The top row is where the icon is flattened on a white backdrop without first being "hardened" trough layer-cloning. This makes the image look great when viewing the icon image. The alpha displays the transparency levels, and to the far right you can see the result with two zoomed-in areas. Since the icon image's edge pixels were transparent (to make the edge smooth) before flattening onto a white backdrop, the alpha then reads this edge information when the pixels have already been blended with white. This is where the whole thing goes wrong. This is why the reflection and the edges of the finished rendering looks like it does on the far right. The reflection is too bright and the whole icon is surrounded by a white halo... tiny, but still...

When done correctly, before flattening the image, make sure the icon layer is cloned AT LEAST 10 times (I have a script where the icon is cloned/multiplied 100 times so that even a pixel of 1% opacity will be 100% when finished).

The finished icon image on the bottom left looks very rough and quite ugly - but fear not! All the transparency information is in the alpha channel, I have only made sure that the alpha channel reads the CORRECT color information before blending with the Today background image. The result on the bottom right shows the finished icon without halo and with a smooth reflection blending.

(Note: the alpha channels in both cases are identical)

[attachmentid=7160]

Attached Files

•  Example.jpg   198.01K   37 downloads

[hezahonker]

Hi Mickesjo,

The images are very helpful. I tested out your words on some images but I am still failing to see what you see. I can certainly see the result in your image. Are you view these on your PDA? Where are those shots from? I wanted to test this out again on my icons, but photoshop Elements shows the tga format with a white background so I can't drag them onto a colored layer to see them correctly.

I think Elements is just a different animal anyhow so this presents a problem with some of the things done. Especially with our end having to create a fake alpha channel. Our layers palette doesn't show the alpha channel so that is a problem.

The image on the left was made without layers. The one on the right is with. Other than darkness I see no difference.

Attached Files

•  HolyBible32RedH.png   2.89K   13 downloads
•  HolyBible32x32Redcopy.png   2.76K   10 downloads

[mickesjo]

The finished icon image should be darker like yours but when viewed through the alpha channel (which is exactly what i.e. iLauncher does) it will be lighter again - in fact, it should look EXACTLY like the transparent "png-style" image did in the beginning of the process If you get great icons without using these steps - don't change anything, just keep doing it the way you do it. The most important thing is that your icons LOOK great, not how you create them

The images in my pic above are all simulated inside Photshop but there's no difference from that compared to having the image read through WAD or iLauncher.

Conclusion: If you do your icons without layer-cloning and they still look great, you have no need of my tip. If you see halos, whitening, unwanted shadowing or similar, try using my step-by-step guide