Decorum for the Forum:
  • Be nice. If you want to be mean, try Reddit.
  • No Piracy. If you want to be a thief, there are dark places on the internet dedicated to that.
  • No Cracking. Discussions on AnyDVD, DeUHD, DVDFab, UHDKeys and similar tools are not permitted here.
  • No Spamming. If you want to make a buck, work smarter... somewhere else.
  • No Adult Content. Half the internet is dedicated to adult content. This half isn't.

Privacy Policy: Click Here to Review (updated September 30, 2020)

Creating Icons for CMC's External Links

Instructional Step-by-Step How-To's to using CMC with My Movies
Post Reply
User avatar
Pauven
Posts: 2777
Joined: Tue Dec 26, 2017 10:28 pm
Location: Atlanta, GA, USA
Contact:

Creating Icons for CMC's External Links

Post by Pauven » Thu Jul 18, 2019 12:11 pm

When I added the Mode Bar to CMC, my vision was that of a brushed aluminum stereo faceplate with inset logos that get lit by a blue LED when selected. To create this look, I developed a method of modifying logos so that they resemble unlit plastic inserts when not selected, and glow a nice backlit blue when selected.

Since you can create your own custom icons, I thought I should share the steps that I use to create logos so you can achieve the same style and effect. In general, your goal is to create a white logo with a darker outline, but also with some graduated shading so that the logo resembles an inset piece of plastic that is unevenly lit by a backlight.

I use Photoshop, so these instructions are Photoshop specific, though there are many graphical tools that can achieve the same general results.

For this tutorial, I will be creating an icon for PowerDVD.

The most important parts of this tutorial are Steps 4 & 5 - making the logo white and adding a graduated outline - though I've included the other steps below to help address some of the challenges you may encounter on some harder to convert logos.


Step 1 - Download a source graphic
While you can use nearly any method you want for finding a good graphic, I personally like Bing's image search. For my initial search, I'll include terms like "logo", "png", and "transparent", as finding a transparent PNG file will save me some work. Often this search returns the perfect result, but this time searching for "powerdvd logo png transparent" doesn't have any good candidates, except for perhaps the CyberLink logo itself:

image.png
image.png (1.76 MiB) Viewed 7983 times

So I modify my search, and instead just search for "powerdvd logo", and get more results. At the top are quite a few fancy PowerDVD logos, but none of these are good candidates as they have too much design to them, and won't look good as a monochromatic logo. I need something simple, that will look good and legible in black and white. Surprisingly, the best candidate this time is an old CyberLink PowerDVD logo already in black and white, circled at the bottom left, but unfortunately the resolution is a bit low. The External Link logos for CMC need to be 256 x 256 pixels, and this logo is only 150 pixels wide.

image.png
image.png (1.82 MiB) Viewed 7983 times

Looking around a bit more, I find a larger version of the same basic logo, but with a fanciful chrome reflection effect and drop shadow that need to be removed. More work, but the end result will look better since I'm starting with a higher resolution graphic.

image.png
image.png (274.24 KiB) Viewed 7983 times


Step 2 - Removing the background
I save the image to my PC and open it in Photoshop. The first thing I need to do is remove the white background. If the image opens up as a single "Background" layer, the first step will be to convert the background to a layer. Do this by right-clicking on the Background layer and select 'Layer from Background...'. You won't be able to make the background transparent unless you do this step (and you wouldn't even have to do this step if you'd found a transparent PNG to begin with...):

image.png
image.png (18.19 KiB) Viewed 7983 times


My next step is to do an initial crop just to remove some extra pixels on the right side and get rough starting point for the logo shape - in this particular logo this empty space has some garbage data in it that won't make it into the final image, so might as well remove it now. We'll do a final crop later, so this doesn't have to be perfect:

image.png
image.png (153.74 KiB) Viewed 7983 times

Next I use the Magic Wand selection tool. I set the options to 'Add to selection' (so I can click multiple areas separately and add to the previously selected areas), a Tolerance of 48 so that I can get some of the shadow with the white backdrop, and make sure 'Anti-alias' and 'Contiguous' are selected - having Contiguous enabled will prevent the selection from grabbing lighter parts of the logo from inside the letters. You should adjust all of these numbers for each logo as needed to get the best results. With Contiguous selected, I'll have to click the inside sections of the letters P, D, o, and e. Then I can hit Delete on the keyboard and the selected white background will be removed, replaced by a gray and white checkerboard - this lets you know the background is now transparent.

image.png
image.png (166.81 KiB) Viewed 7983 times

While most logos won't require this much work (TIP: Use a better logo to begin with if you can!!!), I don't like all the drop shadow on this one, as it's going to look bad once I convert this to black and white. So the next step is to select the Eraser tool and do some manual cleanup of the drop shadow areas. This takes a steady hand, but the job is made easier if you zoom in really far. Since I started with a higher resolution image, some of this detail will be lost when it is resized down to 256 x 256, so I don't need perfection here. Mainly, my goal is readability, and to have clearly separated characters without the drop shadow connecting them, otherwise this graphic will look like a big blob once converted. I pay extra attention to the small CyberLink logo to clean out the drop shadow:

image.png
image.png (209.35 KiB) Viewed 7983 times

The thing to keep in mind here is that I'm not worrying about color at this point, merely the shape of a logo. Think of it as using scissors to cut out the logo from a piece of paper, you only want to keep the letters in this logo, getting rid of any background, including the drop shadow.

image.png
image.png (157.17 KiB) Viewed 7983 times

At this point, I would normally go ahead and make the logo white, but since this is an especially bad logo to work with, I'm going to do the extra step of making it black first - this makes it easier to see than white - so that I can do a bit more cleanup of the logo shape. To do this, I go to Image > Adjustments > Levels:

image.png
image.png (75.54 KiB) Viewed 7983 times

On the Levels panel, I set the 'Output levels' (at the bottom) both to zero:

image.png
image.png (26.42 KiB) Viewed 7983 times

This makes the logo fully black, and I can now see some rough edges that I want to clean up.
image.png
image.png (133.88 KiB) Viewed 7983 times

I continue to use the eraser to remove, and a pencil set to black to add, until I'm happy with the general shape:

image.png
image.png (133.12 KiB) Viewed 7983 times


Step 3 - Resizing the image
Before resizing, I will do a final crop, which will let me make sure the logo is properly centered and that I'm getting the most detail out of the image, instead of including unused background in the resizing step. I like to use the 'Content-Aware' feature of Photoshop's crop tool, which let's me snap to the edges of the logo:

image.png
image.png (137.93 KiB) Viewed 7983 times

Next I resize the image to near final resolution. I don't want the logo to completely fill the 256 x 256 square - I like to leave some buffer at the edges, so instead of going straight to 256 pixels, I resize slightly smaller, to 240 pixels. I also like to use the Bicubic Smoother resampler, as I'm going for smoother not sharper:

image.png
image.png (37.79 KiB) Viewed 7983 times

My image is now 240 x 40, smaller than my target size of 256 x 256. Instead of resizing to fit the target, I simply want to expand the background to fill up the remaining space. I go to Image > Canvas Size and set it to 256 x 256, making sure that the expansion originates from the center:

image.png
image.png (28.01 KiB) Viewed 7983 times

Now I have a square logo, with most of the logo being a transparent background:

image.png
image.png (127.28 KiB) Viewed 7983 times


Step 4 - Making the logo white
I go back to Image > Adjustments > Levels, and this time I set the Output levels both to 255, making the logo white:

image.png
image.png (24.14 KiB) Viewed 7983 times

As you can see, the white logo is much harder to see and work with, which is why I did the optional step of making it black above to do some more cleanup:

image.png
image.png (116.89 KiB) Viewed 7983 times


Step 5 - Added the outlines
For the final effect, we want to try and make this logo look like it is backlight by an LED - in the real world, the edges would be dark and not lit evenly. To do this, I select the background with the Magic Wand - this time with the 'Contiguous' option turned off so I get all of the background:

image.png
image.png (125.37 KiB) Viewed 7983 times

I want to expand this selection to include the edges of the logo, so I go to Select > Modify > Expand, and do an Expand by 1 pixel. This expands my selection to include all of the background, plus a 1 pixel outline of the logo edges:

image.png
image.png (10.23 KiB) Viewed 7983 times

Now to darken just the edges, I go back to Image > Adjustment > Levels, and set the Output Levels to 0 and 128. Technically, this darkens the background too, but because the background is invisible, only the logo edges are darkened:


image.png
image.png (24.51 KiB) Viewed 7983 times

I then repeat this process of expanding the selection, and darkening what is selected. For the second pass, I'll again expand by 1 pixel (so effectively I've selected the outside 2 pixels of the logo egdges), then use the Levels to darken to 0 and 192:

image.png
image.png (140.79 KiB) Viewed 7983 times

Finally I make a 3rd pass, this time expanding by 2 pixels (so effectively I've selected the outside 4 pixels of the logo edges - which is now almost the entire image except for some central hotspots), and setting the Levels to 0 and 224:

image.png
image.png (25.76 KiB) Viewed 7983 times

The end result will be an outlined image, with a stair-stepped effect of dark lines at the edges, progressing towards lighter hot-spots towards the center of larger areas. Here's a zoomed in area of the logo so you can see this effect:

image.png
image.png (192.24 KiB) Viewed 7983 times


And here is the final image at 100% zoom:

image.png
image.png (113.25 KiB) Viewed 7983 times


Step 6 - Saving as a PNG
Now save the final image as a PNG, and place it in the 'Links' folder.

image.png
image.png (358.86 KiB) Viewed 7983 times

And attached here is the finished PowerDVD logo:
Attachments
LinkIcon_PowerDVD.png
LinkIcon_PowerDVD.png (11.83 KiB) Viewed 7983 times
President, Chameleon Consulting LLC
Author, Chameleon MediaCenter

Post Reply