Logic Icons with transparent drop shadow (Photoshop guide)

[lagerfeldt]

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).

[lagerfeldt]

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

[David]

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

[lagerfeldt]

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.

[lagerfeldt]

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

[FrankSalvato]

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


Lots of greeat Icons there too!

[wafze]

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

[lagerfeldt]

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.

[lagerfeldt]

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?

[Burger Man]

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.

[bryla]

Then you simply create one in the specified path

[lagerfeldt]

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".

[bethebuddhist]

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

[lagerfeldt]

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.

[Val]

For resize images there are many freeware programs

[BMKid]

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!

[lagerfeldt]

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.

[BMKid]

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.

[lagerfeldt]

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.

[lagerfeldt]

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