| Logic Icons with transparent drop shadow (Photoshop guide) |
lagerfeldt
Joined: 04 May 2006
Posts: 1465
Location: Copenhagen, Denmark
|
 Posted: Sat May 13, 2006 7:02 am Post subject: 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).
Last edited by lagerfeldt on Sun Nov 15, 2009 4:28 am; edited 12 times in total |
|
| Back to top |
|
|
lagerfeldt
Joined: 04 May 2006
Posts: 1465
Location: Copenhagen, Denmark
|
| Posted: Mon Mar 19, 2007 9:47 am Post subject: : Logic Icons with transparent drop shadow (Photoshop guide) |
|
|
| Forgot to say that if you don't have the folder Images/Icons simply make them yourself. |
|
| Back to top |
|
|
David
Site Admin
Joined: 05 Mar 2005
Posts: 27978
Location: Valley Village, CA
|
| Posted: Mon Mar 19, 2007 9:50 am Post subject: : Logic Icons with transparent drop shadow (Photoshop guide) |
|
|
Hey, thanks a lot for this guide! Very useful.
Logic Pro 9.1 - Mac Pro 2x 2.8 GHz Quad-Core Intel Xeon - OS 10.5.8- 6 GB RAM - Metric Halo ULN2 - Apogee Duet |
|
| Back to top |
|
|
lagerfeldt
Joined: 04 May 2006
Posts: 1465
Location: Copenhagen, Denmark
|
| Posted: Tue Mar 20, 2007 8:36 am Post subject: : Logic Icons with transparent drop shadow (Photoshop guide) |
|
|
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.
Last edited by lagerfeldt on Sun Feb 08, 2009 7:52 am; edited 4 times in total |
|
| Back to top |
|
|
lagerfeldt
Joined: 04 May 2006
Posts: 1465
Location: Copenhagen, Denmark
|
| Posted: Tue Mar 20, 2007 8:37 am Post subject: : Logic Icons with transparent drop shadow (Photoshop guide) |
|
|
Same icon but now the shadow adapts to the lighter background.
Last edited by lagerfeldt on Sun Feb 22, 2009 4:30 am; edited 3 times in total |
|
| Back to top |
|
|
FrankSalvato
Joined: 14 Dec 2006
Posts: 2
|
| Posted: Mon Apr 09, 2007 10:23 pm Post subject: To make icon management even easier... |
|
|
Don't forget about the free Logic Iconizer tool over at LogicProFiles.com.
Lots of greeat Icons there too! |
|
| Back to top |
|
|
wafze
Joined: 07 Apr 2007
Posts: 3
|
| Posted: Tue Apr 10, 2007 3:56 am Post subject: Re: Your own Logic Icons with transparent drop shadow |
|
|
| lagerfeldt wrote: |
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  |
|
| Back to top |
|
|
lagerfeldt
Joined: 04 May 2006
Posts: 1465
Location: Copenhagen, Denmark
|
| Posted: Thu Apr 19, 2007 5:37 am Post subject: Re: To make icon management even easier... |
|
|
| FrankSalvato wrote: | 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. |
|
| Back to top |
|
|
lagerfeldt
Joined: 04 May 2006
Posts: 1465
Location: Copenhagen, Denmark
|
| Posted: Thu Apr 19, 2007 5:39 am Post subject: Re: Your own Logic Icons with transparent drop shadow |
|
|
| wafze wrote: | | lagerfeldt wrote: |
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? |
|
| Back to top |
|
|
Burger Man
Joined: 29 Apr 2007
Posts: 3
|
| Posted: Tue May 01, 2007 7:14 pm Post subject: : Logic Icons with transparent drop shadow (Photoshop guide) |
|
|
| 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. |
|
| Back to top |
|
|
bryla
Joined: 21 Mar 2007
Posts: 192
Location: Tømmerby
|
| Posted: Tue May 01, 2007 11:48 pm Post subject: : Logic Icons with transparent drop shadow (Photoshop guide) |
|
|
| Then you simply create one in the specified path |
|
| Back to top |
|
|
lagerfeldt
Joined: 04 May 2006
Posts: 1465
Location: Copenhagen, Denmark
|
| Posted: Tue Jul 03, 2007 2:13 pm Post subject: : Logic Icons with transparent drop shadow (Photoshop guide) |
|
|
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".
________________________
Producer & Engineer
Apple Authorized Training Center (Denmark)
Apple Distinguished Professional |
|
| Back to top |
|
|
bethebuddhist
Joined: 03 Sep 2005
Posts: 126
|
| Posted: Sun Sep 14, 2008 9:52 pm Post subject: : Logic Icons with transparent drop shadow (Photoshop guide) |
|
|
What if I don't have Photoshop, how can I resize images taken from the net to 128 by 128?
________________________
LAPTOP--2.66 Ghz Intel Core i7 4GB Ram
OS 10.6.4
M-Audio Fast Track Pro
Logic 9 |
|
| Back to top |
|
|
lagerfeldt
Joined: 04 May 2006
Posts: 1465
Location: Copenhagen, Denmark
|
| Posted: Sun Feb 08, 2009 6:19 am Post subject: : Logic Icons with transparent drop shadow (Photoshop guide) |
|
|
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.
________________________
Producer & Engineer
Apple Authorized Training Center (Denmark)
Apple Distinguished Professional |
|
| Back to top |
|
|
Val
Joined: 09 Jan 2009
Posts: 20
Location: Italy
|
| Posted: Mon Feb 09, 2009 3:19 pm Post subject: : Logic Icons with transparent drop shadow (Photoshop guide) |
|
|
For resize images there are many freeware programs  |
|
| Back to top |
|
|
BMKid
Joined: 11 Feb 2009
Posts: 19
Location: Escondido, CA
|
| Posted: Wed Feb 11, 2009 3:44 pm Post subject: : Logic Icons with transparent drop shadow (Photoshop guide) |
|
|
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!
________________________
17" MBP, 2.4 GHz C2D, 4GB DDR2 (667MHz), WD 320gb Scorpio HD, Leopard (10.5.6), M-Audio ProFire 2626, Logic Pro 8.0.2 |
|
| Back to top |
|
|
lagerfeldt
Joined: 04 May 2006
Posts: 1465
Location: Copenhagen, Denmark
|
| Posted: Wed Feb 18, 2009 3:52 pm Post subject: : Logic Icons with transparent drop shadow (Photoshop guide) |
|
|
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.
________________________
Producer & Engineer
Apple Authorized Training Center (Denmark)
Apple Distinguished Professional |
|
| Back to top |
|
|
BMKid
Joined: 11 Feb 2009
Posts: 19
Location: Escondido, CA
|
| Posted: Sat Feb 21, 2009 4:31 am Post subject: : Logic Icons with transparent drop shadow (Photoshop guide) |
|
|
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.
________________________
17" MBP, 2.4 GHz C2D, 4GB DDR2 (667MHz), WD 320gb Scorpio HD, Leopard (10.5.6), M-Audio ProFire 2626, Logic Pro 8.0.2 |
|
| Back to top |
|
|
lagerfeldt
Joined: 04 May 2006
Posts: 1465
Location: Copenhagen, Denmark
|
| Posted: Sat Feb 21, 2009 8:56 am Post subject: : Logic Icons with transparent drop shadow (Photoshop guide) |
|
|
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.
________________________
Producer & Engineer
Apple Authorized Training Center (Denmark)
Apple Distinguished Professional
Last edited by lagerfeldt on Sun Apr 26, 2009 4:15 am; edited 2 times in total |
|
| Back to top |
|
|
lagerfeldt
Joined: 04 May 2006
Posts: 1465
Location: Copenhagen, Denmark
|
| Posted: Sun Apr 26, 2009 4:09 am Post subject: : Logic Icons with transparent drop shadow (Photoshop guide) |
|
|
I've updated the guide to be even more user friendly for those less experienced with Photoshop.
________________________
Producer & Engineer
Apple Authorized Training Center (Denmark)
Apple Distinguished Professional |
|
| Back to top |
|
|
