homepage Welcome to WebmasterWorld Guest from 54.237.151.188
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / Site Graphics and Multimedia Design
Forum Library, Charter, Moderators: not2easy

Site Graphics and Multimedia Design Forum

    
Images in drop shadow
How can I make a drop shadow from a jpg file?
PhilTulips



 
Msg#: 4406322 posted 8:44 pm on Jan 12, 2012 (gmt 0)

Hi Group.

I am trying to make a drop shadow from a specific img file sent to me.
Is that possible? If so, how.

-PJ

 

rocknbil

WebmasterWorld Senior Member rocknbil us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 4406322 posted 4:24 pm on Jan 13, 2012 (gmt 0)

Welcome aboard PhilTulips, the "easy way" is to use Photoshop layer effects. I like to go old school on it, has more control over the layer.

- In the Layers palette, double-click the layer to get it off the background layer.

- From the main menu select Image -> Canvas Size, Expand the size of the document to accommodate the shadow.

- From the main menu select Select -> Load Selection -> leave Layer 0 Transparency selected. You'll now see the marquis.

- From the upper right of the layers menu, select new layer. Drag Layer 1 below Layer 0.

- From the main menu, Select -> Modify -> Feather. Enter 4 pixels. You may want to redo this step until it's the right amount of feather.

- From the main menu select Edit -> Fill, use 100% Black.

- Using the nudge keys on your keyboard, < ^ >, nudge in the direction you want the shadow.

- In the layers menu, adjust the opacity of the shadow layer.

- From the main menu select Layers -> Flatten image to save as a jpg - Or - Merge Visible and save as a .png if you want the shadow transparent over other page objects.

An alternative way that can be re-used: Save the shadow layer only (delete photo layer) as a .png then use absolute positioning and CSS to apply the shadow to all objects on your site. This will be a little restrictive as the pics will be limited to the size of the shadow.

birdbrain

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4406322 posted 7:22 pm on Jan 13, 2012 (gmt 0)

Hi there PhilTulips,

I would suggest that you use CSS3 box-shadow, which works in modern
browsers, and forget about it's non-rendering in old browsers.

Browser support:-


Here is an example...


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<base href="http://www.coothead.co.uk/images/">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">

<title>css3 box-shadow</title>

<style type="text/css">
body {
background-color:#f0f0f0;
}
#gaze {
display:block;
width:500px;
height:295px;
margin:30px auto;
box-shadow:#333 10px 10px 15px;
}
</style>

</head>
<body>

<div>
<img id="gaze" src="gaze.gif" alt="">
</div>

</body>
</html>

Further reading:-

birdbrain

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / Site Graphics and Multimedia Design
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved