homepage Welcome to WebmasterWorld Guest from 54.211.68.132
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

    
making shadow edged backgrounds
Wicky

5+ Year Member



 
Msg#: 2089 posted 5:48 pm on Jul 22, 2005 (gmt 0)

hello,
I like backgrounds with a soft shadowed edge on the left and right side such as <removed>, but I find it very difficult to make them for my own sites. Most of the time I'm using paint shop pro 8. Is there somebody who can help me with some advice?

thanks,
Wicky
Holland

[edited by: jatar_k at 7:20 pm (utc) on July 22, 2005]
[edit reason] sorry no urls [/edit]

 

lZakl

5+ Year Member



 
Msg#: 2089 posted 6:13 pm on Jul 22, 2005 (gmt 0)

Assuming you are talking about the main image in the Flash on the top of the screen: I have never used Paintshop Pro, but I do know in Photoshop this would be very easy using the Gausian Blur, Lasso/Magnetic/Wand Tools and Gradient Tool. And adding a couple of layers of course.

With a little bit of masking, creating a gradient layer, and a blur layer and playing with their respected opacities would be the way I would go about it. Again, in Photoshop. Sorry, I do not know Paintshop :0(

-- Zak

Wicky

5+ Year Member



 
Msg#: 2089 posted 6:56 pm on Jul 22, 2005 (gmt 0)

Sorry, misunderstanding. I mean the complete site-background, or in other words: the back-ground of the main table for the lay-out.

Wicky,
Holland

lZakl

5+ Year Member



 
Msg#: 2089 posted 10:20 pm on Jul 22, 2005 (gmt 0)

Wicky,

I see what you meant now...

They are using CSS to do this. So I will give you the basic CSS and image instructions to do a layout like this:

First open Paintshop, and create a new image, size 80 pixels wide by 1 pixel tall. Now put a generic gradient in, dark side to the right.

Name this image bg_left.gif

Next create test.html with your favorite text editor and place the following code inside:

<html>
<head>
<title>Three Column CSS Layout with Header</title>
<style type="text/css">

body
{ margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
}

#left {
position: absolute;
left: 0px;
top: 0px;
width: 80px;
height: 300;
background: white url(bg_left.gif);
}
#center {
top: 0;
margin-left: 80px;
margin-right: 80px;
background-color:#fffffff;
border-style: solid;
border-width: 1px;
height: 300;
text-align: center;
}
#right {
position: absolute;
right: 0px;
top: 0px;
width: 80px;
height: 300;
background: white url(bg_right.gif);
}
#main {
border-style: solid;
border-width: 2px;
}
</style>
</head>

<body>

<div id="left"></div>

<div id="center">
Your content here
</div>

<div id="right"></div>

</body>
</html>

Now play with bg_left.gif until you get the effect you want. Just edit it, and save over the old one. Once you get it right, rotate it 180 degrees and save as bg_right.gif.

These are the basics on how it is done.. I hope this helps..

-- Zak

Wicky

5+ Year Member



 
Msg#: 2089 posted 12:36 pm on Jul 23, 2005 (gmt 0)

thanks for the help Zak, I will give it a try

Wicky

Beagle

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 2089 posted 1:03 pm on Jul 23, 2005 (gmt 0)

Just to add -- I use Paint Shop Pro 8, and I've found that just about everything I've read in this forum about using PhotoShop applies to Paint Shop, also.

schwartz

5+ Year Member



 
Msg#: 2089 posted 11:55 pm on Aug 1, 2005 (gmt 0)

quicker way of adding shadow with photoshop is:

1) select layer you're working with
2) layer/layer style/drop shadow

you can then adjust easily how the shadow behaves, etc.

pixelkat

10+ Year Member



 
Msg#: 2089 posted 10:21 am on Aug 5, 2005 (gmt 0)

actually, you can achieve the effect using stylesheets and no images at all.
I'm on my iPAQ at the moment so I don't have access to the cross-browser code I use at the moment,but if you do a google search using 'css drop shadows'+cross-browser,it will return an abundance of good scipts. i think the best one I found came from #*$!.com, or perhaps simplebits.com. -kat

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