|
Welcome
Guest
|
Register
| Login
|
|
|
| Index | Recent Threads | Unanswered Threads | Who's Online | User List | Help |
Killersites.com Forum
Graphic Design
Photoshop
Thread: How to make a left/right fading shadow border with Photoshop for wrapper div?
|
| No member browsing this thread |
|
Thread Status: Active Total posts in this thread: 18
|
|
| Author |
|
falkencreative
Advanced Member USA Joined: Aug 14, 2007 Post Count: 1129 Status: Offline |
......Logging in AGAIN. Hi Ben, In your tut you do it assuming that you have a solid color background. I would like to do it with a transparent .png. But for some reason I can't get it to be transparent. Is there some trick to it? I thought I'd just create a new transparent file, and add the gradient as you showed, and save it as a png. But it shows white through the gradient. What ingredient am I missing? Thanks! Hmm. Probably should have covered that in my video... -- As you already did, create your image on a transparent background -- Use the File > Save For Web Option, and make sure PNG-24 is selected, and that the transparency checkbox is checked That should take care of it... ---------------------------------------- Benjamin Falk | student : designer : developer Twitter: falkencreative |
||
|
|
ewwatson
Advanced Member United States Joined: Dec 19, 2007 Post Count: 1285 Status: Offline |
......Logging in AGAIN. Hi Ben, In your tut you do it assuming that you have a solid color background. I would like to do it with a transparent .png. But for some reason I can't get it to be transparent. Is there some trick to it? I thought I'd just create a new transparent file, and add the gradient as you showed, and save it as a png. But it shows white through the gradient. What ingredient am I missing? Thanks! Hmm. Probably should have covered that in my video... -- As you already did, create your image on a transparent background -- Use the File > Save For Web Option, and make sure PNG-24 is selected, and that the transparency checkbox is checked That should take care of it... Mmmm... ya, I did all that. Now that I know the steps, it's pretty easy, so I don't understand what I'm missing? I'll stare at it a while longer. I made a transparent file >> put the guides up >> new layer and added the color #EEE to the center section (for wrapper color) and the sides stay transparent >> new layer and added the shadow on the left >> copy layer and flipped the shadow and moved it to the right >> and saved it as a transparent png with the transparency checked. Then when I throw it into FX and it's white behind the shadow. The body color is #CCC. Strange??? ---------------------------------------- Eric :~) Knowledge is Power ---------------------------------------- [Edit 2 times, last edit by ewwatson at Dec 10, 2008 3:38:40 PM] |
||
|
|
falkencreative
Advanced Member USA Joined: Aug 14, 2007 Post Count: 1129 Status: Offline |
Here's my process: http://vimeo.com/2488266 Not sure it will help, but it will let you see what I do. Doesn't have sound, since I'm in a hurry, but here are the steps: -- Select your image, make sure it is on a transparent background -- File > Save to Web -- Select PNG-24 (make sure it is PNG-24, not PNG 8) -- Make sure the transparency box is checked -- Save -- In the video, I reopened the file, just so you could see that it saved correctly. My guess is that maybe you are saving it as PNG-8, rather than PNG-24. PNG-8 works very similar to a .GIF file, in the sense that you have to select individual colors to be transparent. What version of Photoshop are you using? ---------------------------------------- Benjamin Falk | student : designer : developer Twitter: falkencreative |
||
|
|
ewwatson
Advanced Member United States Joined: Dec 19, 2007 Post Count: 1285 Status: Offline |
Thanks Ben. CS3, and I saved it as PNG-24. I'll go watch your video now and see where I went wrong - thanks a lot for that! Vimeo - that's cool! ---------------------------------------- Eric :~) Knowledge is Power ---------------------------------------- [Edit 3 times, last edit by ewwatson at Dec 10, 2008 4:27:29 PM] |
||
|
|
ewwatson
Advanced Member United States Joined: Dec 19, 2007 Post Count: 1285 Status: Offline |
... Logging in AGAIN!!! Here maybe somehow this will give you some sort of in site into what I'm doing wrong. This is how it comes out looking for me. See the white behind the shadow? Any ideas as to what I may be missing? ---------------------------------------- Eric :~) Knowledge is Power ---------------------------------------- [Edit 2 times, last edit by ewwatson at Dec 10, 2008 4:59:50 PM] |
||
|
|
falkencreative
Advanced Member USA Joined: Aug 14, 2007 Post Count: 1129 Status: Offline |
Oh, OK. Got it. Your files are saving as PNG, and they do have transparency. However, in the step where you created your gradient, you used a black to white gradient, rather than a black to transparent gradient. To see what I mean... -- Open a new document in Photoshop, doesn't matter what size. -- Select the gradient tool. In the color picker, you should have black selected as the forground color, and white as the background color. -- Up in the upper left corner, you should have a horizontal toolbar that displays your tool options. The second thing in that toolbar shows a dropdown that contains a horizontal gradient. -- When you are creating shadows, make sure that gradient fades from black to the white/gray checker image that indicates transparency. If it fades from your foreground to your background color, click on that dropdown and make sure to select the one that goes from your foreground color to transparent. This is a good point that I didn't discuss. Guess it slipped my mind. If I ever redo that particular video I'll remember to discuss it in more detail. ---------------------------------------- Benjamin Falk | student : designer : developer Twitter: falkencreative ---------------------------------------- [Edit 1 times, last edit by falkencreative at Dec 10, 2008 5:21:10 PM] |
||
|
|
ewwatson
Advanced Member United States Joined: Dec 19, 2007 Post Count: 1285 Status: Offline |
Hey Eric. I actually put together a quick screencast for you explaining how to do it... but it looks like I'll have to post it tomorrow, since I am waiting on purchasing a program before I can export what I did, and it looks like I'll receive the serial number I need tomorrow, unfortunately. Anyway, if you can hang on, I'll post a link to the screencast tomorrow. Have you tried Wink? Free tool. Wink is awesome! Just made a video, and it works perfect! This would cut down on miss-communication 10-fold! Perfect for situations like the round and round Ben and I just did. Ben, I saw your post, but I have to run back to work. Sounds like you found my problem - cool! Thanks a lot looking! I'll post back if I run into any trouble. But from what you said, that sounds like the ticket. Thanks again! ---------------------------------------- Eric :~) Knowledge is Power ---------------------------------------- [Edit 3 times, last edit by ewwatson at Dec 10, 2008 5:50:34 PM] |
||
|
|
ewwatson
Advanced Member United States Joined: Dec 19, 2007 Post Count: 1285 Status: Offline |
Thanks for your help Ben! Fixed Fluid ---------------------------------------- Eric :~) Knowledge is Power |
||
|
|
|
|
Current timezone is GMT Mar 21, 2010 4:52:40 PM |
