navigation
a webmaster learning community
     Home    Register     Search      Help      Login    
Sponsors

Shopping Cart Software
Ecommerce software integrated into Frontpage, Dreamweaver and Golive templates. No monthly fees and available in ASP and PHP versions.

Website Templates
We also have a wide selection of Dreamweaver, Expression Web and Frontpage templates as well as webmaster tools and CSS layouts.

Frontpage website templates
Creative Website Templates for FrontPage, Dreamweaver, Flash, SwishMax

Search Forums
 

Advanced search
Recent Posts

 Todays Posts
 Most Active posts
 Posts since last visit
 My Recent Posts
 Mark posts read

Microsoft MVP

 

Problem resizing graphic (reducing size)

 
View related threads: (in this forum | in all forums)

Logged in as: Guest
Users viewing this topic: none
Printable Version 

All Forums >> Web Design >> Web Graphics >> Problem resizing graphic (reducing size)
Page: [1]
 
womble

 

Posts: 5501
Joined: 3/14/2005
From: Living on the edge
Status: offline

 
Problem resizing graphic (reducing size) - 8/21/2005 16:35:38   
I have a problem with a graphic (a logo) on a site that I'm redesigning. The original graphic is a jpeg (516 x 333px and 300 px per inch). I've been using it on the previous version of the site at 150 x 98px, still as a jpeg and it looks okay-ish.

With the new site though I'm trying to reduce the size of the top of the page to get more content 'above the fold'. I've been trying to reduce the image to 75 x 48px and I looked back through previous posts that suggested reducing the dpi and using bilinear resizing (I'm using PSP8 btw). I've reduced the resolution to 72dpi and resaved as a gif.

By doing that it doesn't look too bad in PSP, though a little pixellated (though I have to have it magnified quite high so I can see it clearly), but when i view it on the web page it looks extremely pixellated and kind of squished and elongated (and yes I have remembered to change the height and width attributes in the code). I've no idea what's wrong here. Can anyone suggest anything I might be doing wrong?

Thanks. W

_____________________________

~~ "A cruel god ain't no god at all" ~~
:)
Tailslide

 

Posts: 5972
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline

 
RE: Problem resizing graphic (reducing size) - 8/21/2005 17:30:02   
Ok - now don't yell at me... I know you changed the dimensions in the code, but did you change the file name from photo.jpg to photo.gif? I only say this because I've done this before now plus the "always good for a laugh" forgetting to upload the new image to the webserver so the page just finds the old one.



_____________________________

"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project

(in reply to womble)
womble

 

Posts: 5501
Joined: 3/14/2005
From: Living on the edge
Status: offline

 
RE: Problem resizing graphic (reducing size) - 8/21/2005 17:33:01   
Yep, did that (double checked that first because I know I'm losing my marbles)...and I also have a valid doctype too :)

_____________________________

~~ "A cruel god ain't no god at all" ~~
:)

(in reply to Tailslide)
dpf

 

Posts: 7121
Joined: 11/12/2003
From: India-napolis
Status: offline

 
RE: Problem resizing graphic (reducing size) - 8/21/2005 17:46:50   
womble : do you still have the original (516 x 333px and 300 px per inch)? sounds like you rediced that once and are now working from the reduced version. remember that .jpeg is "lossy" and each time it is saved, more data is lost. I suggest going back to the original or aas close as you can get. also, personally, i have never had luck going from jpg to gif. if it were me i would stick with the jpg

_____________________________

Dan

(in reply to womble)
caz

 

Posts: 3510
Joined: 10/10/2001
From: Somewhere south of Chester, UK
Status: offline

 
RE: Problem resizing graphic (reducing size) - 8/21/2005 18:00:15   
And try a percentage resize in PSP, keeping original proportion. :)

_____________________________

Do not meddle in the affairs of cats, for they are subtle and will dance, or more on your keyboard.
Cheshire cat. www.doracat.co.uk

I remember when it took less than 4hrs to fly across the Atlantic.

(in reply to dpf)
d a v e

 

Posts: 4057
Joined: 7/24/2002
From: England (but live in Finland now)
Status: offline

 
RE: Problem resizing graphic (reducing size) - 8/22/2005 0:01:21   
could you post a link to the original?

also when you resize you can take it down 50% use unsharp mask (not *too* much) then take it down to the exact dimensions. if you can you can reduce it to 25% of its original size first.

_____________________________

David Prescott
Gekko web design

(in reply to caz)
womble

 

Posts: 5501
Joined: 3/14/2005
From: Living on the edge
Status: offline

 
RE: Problem resizing graphic (reducing size) - 8/22/2005 5:18:35   
Thanks for the suggestions guys. You can see all three of the versions here
I've solved the 'squished look' problem. When I went back and checked the code I realised I'd got the logo in a float and I hadn't altered the width attribute in the css :).
It looks better now, but still seems a little pixellated to me.

I changed it to a gif because I've got a stylesheet switcher on the new site which changes the background colour of the site and as a jpeg it was appearing in a white block, so I changed it into a gif so I could make the background transparent. I'll have a play about with some of the suggestions though and see if that makes any difference.

_____________________________

~~ "A cruel god ain't no god at all" ~~
:)

(in reply to d a v e)
dpf

 

Posts: 7121
Joined: 11/12/2003
From: India-napolis
Status: offline

 
RE: Problem resizing graphic (reducing size) - 8/22/2005 9:19:47   
quote:

as a jpeg it was appearing in a white block,
to avoid that, set the background color identical to where you are placing it on the screen and it will blend in perfectly

_____________________________

Dan

(in reply to womble)
Tailslide

 

Posts: 5972
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline

 
RE: Problem resizing graphic (reducing size) - 8/22/2005 9:39:23   
quote:

ORIGINAL: dpf

quote:

as a jpeg it was appearing in a white block,
to avoid that, set the background color identical to where you are placing it on the screen and it will blend in perfectly


Dan - she's got a stylesheet switcher so the background colour will be changing.

_____________________________

"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project

(in reply to dpf)
dpf

 

Posts: 7121
Joined: 11/12/2003
From: India-napolis
Status: offline

 
RE: Problem resizing graphic (reducing size) - 8/22/2005 9:54:07   
quote:

Dan - she's got a stylesheet switcher so the background colour will be changing.
oh - so am I expected to actually read posts now? sheesh

_____________________________

Dan

(in reply to Tailslide)
caz

 

Posts: 3510
Joined: 10/10/2001
From: Somewhere south of Chester, UK
Status: offline

 
RE: Problem resizing graphic (reducing size) - 8/22/2005 10:04:16   
I was going to suggest png format, but IE has problems with that I think - Tail?

_____________________________

Do not meddle in the affairs of cats, for they are subtle and will dance, or more on your keyboard.
Cheshire cat. www.doracat.co.uk

I remember when it took less than 4hrs to fly across the Atlantic.

(in reply to dpf)
Tailslide

 

Posts: 5972
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline

 
RE: Problem resizing graphic (reducing size) - 8/22/2005 10:16:32   
It does have problems with png transparency. There are ways round it with scripts but frankly could never be bothered to experiment! Aparently IE7's fixed that. So it'll only be another 10 years until we can forget all the legacy browsers that do have problems *sigh*.

If it's causing a major problem then you could always have different logos with different colour backgrounds as background images for the header div (or whichever) on the various stylesheets.

_____________________________

"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project

(in reply to caz)
d a v e

 

Posts: 4057
Joined: 7/24/2002
From: England (but live in Finland now)
Status: offline

 
RE: Problem resizing graphic (reducing size) - 8/22/2005 14:24:18   
ok in photoshop (but you can replicate the steps in psp)

- i resized to 50% the original size (always reduces nicely when you go in steps of 25%'s) then applied unsharp mask at am amount of 20% and a radius of 1 pix

- then i resized to the final size (75px X 48 px) then applied the same amount of unsharp mask.

you can play with the amount of unsharp mask and the radius (using a higher radius is ok in larger pics but it can look a little *too* sharp if you go too far)

saved as gif at 256 colours and 100% dither.

ideally you woud work from a vector version (if you had one or could be bothered to recreate it) and size without loss of quality but i think using the above steps as a guide you can get a fair looking logo...


Thumbnail Image
:)


incidentally the Dd s in the original fullsize logo are a bit ropey?! they smooth out fair enough on the smaller logos but they look a bit bad (to us picky gits;)

Attachment (1)

_____________________________

David Prescott
Gekko web design

(in reply to Tailslide)
Tailslide

 

Posts: 5972
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline

 
RE: Problem resizing graphic (reducing size) - 8/22/2005 14:36:09   
That's really useful info Dave thanks! I'd never have thought of doing incremental resizing.

Smartypants :)

_____________________________

"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project

(in reply to d a v e)
d a v e

 

Posts: 4057
Joined: 7/24/2002
From: England (but live in Finland now)
Status: offline

 
RE: Problem resizing graphic (reducing size) - 8/22/2005 15:53:36   
yeah i know ;)
if you notice when you zoom in or out in factors of 2 (say 50% or 25%) that the image is smoother and clearer than it is if you say zoom to say 67%...

_____________________________

David Prescott
Gekko web design

(in reply to Tailslide)
womble

 

Posts: 5501
Joined: 3/14/2005
From: Living on the edge
Status: offline

 
RE: Problem resizing graphic (reducing size) - 8/23/2005 9:25:14   
Thanks again guys for the suggestions - I'll give them a try (a little bogged down with work at the moment so it'll have to wait a couple of days). Re: vectors, I'll have a word with the designer who originally did the logo for us. He let me have the original image I'm working from and he still does some design work for us so he's got the orignal artwork but I'm not sure if that includes a vector. No harm in asking though.

_____________________________

~~ "A cruel god ain't no god at all" ~~
:)

(in reply to d a v e)
Page:   [1]

All Forums >> Web Design >> Web Graphics >> Problem resizing graphic (reducing size)
Page: [1]
Jump to: 1





New Messages No New Messages
Hot Topic w/ New Messages Hot Topic w/o New Messages
Locked w/ New Messages Locked w/o New Messages
 Post New Thread
 Reply to Message
 Post New Poll
 Submit Vote
 Delete My Own Post
 Delete My Own Thread
 Rate Posts