| Images in drop shadow
How can I make a drop shadow from a jpg file? |
PhilTulips
msg:4406286 | 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
msg:4406572 | 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
msg:4406664 | 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
|
|
|
