Logic Icons with transparent drop shadow (Photoshop guide)

How to make your own icons in Logic Pro - including the 100% original Logic Pro alpha channel transparent drop shadow effect.

 

1. Find the picture you want (synth, module, naked girlfriend). Use the highest resolution possible, i.e. find a big picture. Use Google Image Search or whatever.

 

2. Most pictures are in RGB Color mode (such as JPEGs), but some are not (GIFs). Use Image > Mode > RGB Color if necessary.

 

3. Remove any background around the actual image. First you need to change the background layer into a normal layer. You do this by double clicking on the layer entitled Background in the Layers window, and press OK.

 

Use the magic wand tool, lasso tool, or manually delete the background color until the background shows the Photoshop transparency chequers. If you're familiar with the Refine Edge function, this is a great place to use it (Select > Refine Edge).

 

4. Use the crop tool to crop to the absolute edge of the actual image. Remember: no empty space around the image, this is important to get the size right later.

 

5. Open Image > Image Size. Look at the dimensions in height and width. Whichever side has the biggest number should be set for 120 pixels. Make sure Constrain Proportions and Bicubic (Smooth Gradients) are checked. Click OK.

 

6. Now use the Filter > Sharpen > Unsharp Mask to manually sharpen the image. E.g. 0,3 pixels and 120% sharpen.

 

7. Set Image > Canvas Size to 128 x 128 pixels, with the anchor centered.

 

8. Choose Layer > Layer Style > Drop Shadow... and use Multiply blend mode, Opacity: 40, Angle: 90, Distance: 4, Spread: 0, Size: 4. This is a 100% match with the original shadow effect in Logic Pro.

 

9. Command-click on the layer thumbnail icon in the Layers window pane to load the selection. Then choose Select > Save Selection... and press OK.

 

10. Switch to the Channels pane from the Layers window and activate the new Alpha Channel 1.

 

11. Choose File > Save for Web & Devices, and select the PNG24 format. Activate Transparency.

 

12. The file should saved as x.png (where x is a three digit number between 000 and 324) and put in Users/YourUserName/Library/Application Support/Logic/Images/Icons

 

If no folder exists by that name, make one yourself. Be aware that some numbers are available and some will replace an existing Logic Pro icon (as long as your custom icon is in the folder).

Edited November 15, 2009 by lagerfeldt

Forgot to say that if you don't have the folder Images/Icons simply make them yourself.

Hey, thanks a lot for this guide! Very useful.

Thanks, it can produced really nice results. Notice that the drop shadow truly is transparent, which means no ugly edges and the shadow adapts when the track is highlighted.

 

This is NOT a fixed shadow like many icons have, but a real transparent shadow due to the Alpha layer.

 

http://www.lydmaskinen.dk/forumpics/icon_rm1x.png

Edited February 8, 2009 by lagerfeldt

Same icon but now the shadow adapts to the lighter background.

 

http://www.lydmaskinen.dk/forumpics/icon_rm1x.png

Edited February 22, 2009 by lagerfeldt

Don't forget about the free Logic Iconizer tool over at LogicProFiles.com.

 

 

Lots of greeat Icons there too!

 

8. Choose the Layer Effect called Drop Shadow, and use Multiply with Opacity: 40, Angle: 90, Distance: 4, Blur: 4, Intensity: 0. I've tested this against the original shadow effect in Logic, it's a 100% match.

 

 

hi lagerfeldt thx a lot for your great tutorial, ive got one question, could you post a photoshop screenshot of the properties mentioned in point 8. cause i cant find all of them,

 

would be great

Don't forget about the free Logic Iconizer tool over at LogicProFiles.com.

 

 

Lots of greeat Icons there too!

Lots of those don't have transparent drop shadows like the original icons have.

 

8. Choose the Layer Effect called Drop Shadow, and use Multiply with Opacity: 40, Angle: 90, Distance: 4, Blur: 4, Intensity: 0. I've tested this against the original shadow effect in Logic, it's a 100% match.

 

 

hi lagerfeldt thx a lot for your great tutorial, ive got one question, could you post a photoshop screenshot of the properties mentioned in point 8. cause i cant find all of them,

 

would be great

 

That's the standard Drop Shadow from the Layer Style menu. Are you using a LE or OEM version of Photoshop?

I'm a new logic user. I love it, but how do get to use this great icons? I checked the manual, and i do not have the Logic Resources or Icon folders that the manual speaks of.

Then you simply create one in the specified path

Multiply with Opacity:40, Angle: 90, Distance: 4, Spread: 0, Size: 4

 

This is for newer versions of Photoshop, the old had "Blur" and "Intensity".

What if I don't have Photoshop, how can I resize images taken from the net to 128 by 128?

If you don't have Photoshop this whole procedure will be almost impossible - not because of the resizing issue but because you need the other features in Photoshop to make the transparent alpha channel drop shadow.

For resize images there are many freeware programs

You can get Seashore instead of PhotoShop. It's a Cocoa implementation of The Gimp, an open source photoshop alternative. So you don't need to have X11 installed like you would for The Gimp. Best of all it's free!

As long as you can do layers and Alpha Channel stuff it should work If not, then you won't get the real transparent shadow.

Yep. It has layers and transparency. I just realized however that you used layer effects for the shadow. It doesn't have layer effects so you would have to make the shadow manually. But that isn't very hard either.

Yeah I suppose you could do that fairly easily if you know how. The trick is using the alpha channel information. No alpha channel = no transparent drop shadow.

 

Instead all you get is a fixed shadow that looks crap, like most of the homemade icons out there.

Edited April 26, 2009 by lagerfeldt

I've updated the guide to be even more user friendly for those less experienced with Photoshop.

hi there,

 

 

thanks for your guide on the icons!

 

Just a quick question, can i only have one new icon*that i have added) showing in the icons page, as wheni have created a few in the folder i can only appear to see one of mine, even thought i have saved them to the folder you mention!

Also my icons do not look great and they are blurred if i go bigger in the track any thoughts?

 

Thanks

 

Eed

View user's profile

The number of the .png should be between 000 and 324. Some numbers are available, others will replace an existing Logic icon.

 

You have to experiment at bit or open the Logic app resource folder and have a look yourself in order to find out which numbers are available. I can't remember right now.

 

Try something like 210 and up.

 

If your icons look blurred when they are zoomed in, you either used a very low res picture to begin with or you did not follow my guide precisely.

Just wanted to say thanks for this... was exactly what I was after.

 

For those interested I created an icon for Maschine, and the Moog Little Phatty. See attached.

Little Phatty

Maschine

All right, so I understand how to create and load my own icons so that logic will recognize them, but I simply can't find a way to change the icon of a folder track. It seems like it arbitrarily picks an icon when you "pack folder;" the then when you click on the track header, you'd expect to see the icon selector to pop up in the inspector, but there's nothing there!

 

Agh. it may seem petty, but I use folders a lot, and when you have tons of folder tracks all with random icons, it gets really frustrating.

 

Any help would be fantastically appreciated.

 

Ryan

Going back a bit here, but I believe at least with the current version of Logic Pro there is no way to change the folder icon - it's just a blue folder.

 

I gather that the go to place for additional track icons (and other Logic files) was http://www.logicprofiles.com/ - however that seems to be down these days! If anyone know another resource I'd be grateful if you would post it.

Answering my own post here, there is this thread on this very forum:

 

viewtopic.php?f=9&t=2347

 

However quite a lot of the icons are not now visible and the archive page David links to - http://logicprohelp.com/icons.php - appears not to be available any more.

However quite a lot of the icons are not now visible and the archive page David links to - http://logicprohelp.com/icons.php - appears not to be available any more.

Correct. Thanks for reminding me! That's back on my to-do-list.

However quite a lot of the icons are not now visible

I have now added a few more icons to http://www.logicprohelp.com/index.php?file=logicicons