Formatting pictures to look sunken

ferg · 22-05-2007, 06:14 PM

I have recently taken over web-maintenance of a website and all the pictures that have been used have a 1pixel border all the way round each pic, the top and left hand sides have a black border while the right and bottom border is white, this gives the picture a nicely sunken look when actaully on a site.

I have Fireworks/CS3/PSP and can not find any 'easy' method to format pictures in this way so am having to do each one manually, am I missing something ... is there a 'Make a picture look good with a decent border' button I'm blind too?

(I know that the designer before me used fireworks so am sure there must be something in that)

Would greatly appretiate anyone enlightening me

Matt555 · 22-05-2007, 06:52 PM

You can use CSS to style an images border without actually editing the picture.

Code:

.sunken_border {
border-style: solid;
border-width: 1px;
border-top: #000000;
border-right: #FFFFFF;
border-bottom: #FFFFFF;
border-left: #000000;
}

Then just use:

Code:

<img src="image.jpg" alt="An image" class="sunken_border" />

To put that border on an image

ferg · 22-05-2007, 07:57 PM

I like it! and will do that from now on. Thanks matt

But all the pictures are definatley pre-edited, it'll bug me if I never find out how he did it

Sniper · 23-05-2007, 12:04 PM

with CSS you will have an advantage because if you change the site design you won't have to edit the pictures again to fit in with the new design.

I think in Photoshop you will probably have to create an "Action" to automate the process, if that's what you mean.

Matt555 · 23-05-2007, 05:27 PM

Yeah, you can create a layer style and then an automated process to 'batch' process files

22-05-2007, 06:14 PM	#1 (permalink) Top
ferg Manbearpig Join Date: May 2004 Age: 25 Male Posts: 539 Times Helpful: 26 My Mood: Innocent Status: Offline My Computer	Formatting pictures to look sunken I have recently taken over web-maintenance of a website and all the pictures that have been used have a 1pixel border all the way round each pic, the top and left hand sides have a black border while the right and bottom border is white, this gives the picture a nicely sunken look when actaully on a site. I have Fireworks/CS3/PSP and can not find any 'easy' method to format pictures in this way so am having to do each one manually, am I missing something ... is there a 'Make a picture look good with a decent border' button I'm blind too? (I know that the designer before me used fireworks so am sure there must be something in that) Would greatly appretiate anyone enlightening me __________________ FREE STUFF Spybot S&D Ad-Aware Spyware Blaster Comodo Free Firewall Speedfan Ad Block Plus (Plugin for Firefox)

22-05-2007, 06:52 PM	#2 (permalink) Top
Matt555 iMod Join Date: May 2005 Age: 21 Male Posts: 3,844 Times Helpful: 238 My Mood: Happy Status: Offline My Computer	You can use CSS to style an images border without actually editing the picture. Code: .sunken_border { border-style: solid; border-width: 1px; border-top: #000000; border-right: #FFFFFF; border-bottom: #FFFFFF; border-left: #000000; } Then just use: Code: <img src="image.jpg" alt="An image" class="sunken_border" /> To put that border on an image __________________ Last edited by Matt555; 22-05-2007 at 08:03 PM.

22-05-2007, 07:57 PM	#3 (permalink) Top
ferg Manbearpig Join Date: May 2004 Age: 25 Male Posts: 539 Times Helpful: 26 My Mood: Innocent Status: Offline My Computer	I like it! and will do that from now on. Thanks matt But all the pictures are definatley pre-edited, it'll bug me if I never find out how he did it __________________ FREE STUFF Spybot S&D Ad-Aware Spyware Blaster Comodo Free Firewall Speedfan Ad Block Plus (Plugin for Firefox)

23-05-2007, 12:04 PM	#4 (permalink) Top
Sniper Administrator Join Date: Oct 2001 Age: 24 Male Posts: 4,420 Times Helpful: 116 My Mood: Bored Status: Offline My Computer	with CSS you will have an advantage because if you change the site design you won't have to edit the pictures again to fit in with the new design. I think in Photoshop you will probably have to create an "Action" to automate the process, if that's what you mean. __________________ Zone 365 \| F@H Team \| Team Stats \| Use The Thank You System \| My Groups: Manchester United \| Apple

23-05-2007, 05:27 PM	#5 (permalink) Top
Matt555 iMod Join Date: May 2005 Age: 21 Male Posts: 3,844 Times Helpful: 238 My Mood: Happy Status: Offline My Computer	Yeah, you can create a layer style and then an automated process to 'batch' process files __________________

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
In pictures: Norwich Wi-fi day	Newswire	News and Article Comments	0	04-09-2006 11:31 AM
My Music and My Pictures keeps popping up	zeus	Windows OS's	3	21-08-2006 05:27 PM
Pictures	QuiPetMonDe	General Hardware	9	20-11-2005 05:27 PM
My Case, the pictures speak for themselves...	max12590	Old Gallery (no posts allowed)	59	15-07-2005 12:58 AM
Funny Pictures!	Waffle	General Chat	15	18-03-2005 03:46 AM