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

 

jpg gif & png - expert help needed!

 
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 >> jpg gif & png - expert help needed!
Page: [1]
 
RickP

 

Posts: 693
Joined: 11/13/2004
From: Kent, U.K.
Status: offline

 
jpg gif & png - expert help needed! - 9/7/2005 15:18:17   
I am using PSP8 but I suspect that my question here is more to do with how filetypes behave with any image editor(?)

I am designing a site banner using a bgnd colour in html. I want to blend two images into my banner and therfore need to match my html colour exact at the images edges. So, in PSP I create my images and match the colour exact to my banner bgnd, but...

When I save the image as either jpg or gif (with minimal compression) the colour alters a tiny fraction. This in turn causes a slight 'line' in my banner, which I don't want (:)). I realsie that this is being caused by the file types and the way they recreate the image but what can I do about it?

Interestingly, if I save the images as PNG the colour stays fast (:)) but... when I view it in IE the PNG image does not display at all right - it darkens considerbly!

Any solutions? Anyone :)

_____________________________

Regards, Rick
On-The-Web-Now!
bobby

 

Posts: 11394
Joined: 8/15/1969
From: Seattle WA USA
Status: offline

 
RE: jpg gif & png - expert help needed! - 9/7/2005 16:33:04   
IE has no support for PNG, even though it's a superior file type to GIF in many respects (go figure)

Your best bet on something like that is GIF, though I've run into problems with this same kind of thing on PSP6 and The GIMP.

What you might try doing instead is create a fade from the "other" color to transparent, see how it looks then...?



_____________________________

If con is the opposite of pro, is Congress the opposite of progress?


:)

(in reply to RickP)
RickP

 

Posts: 693
Joined: 11/13/2004
From: Kent, U.K.
Status: offline

 
RE: jpg gif & png - expert help needed! - 9/7/2005 16:43:47   
Thanks Bobby

As it happens one of the images uses a fade effect already, it's just that at the point where the image meets the banner bgnd it still isn't a perfect match (!!!!). I've got as near as poss to it now and I think the human eye will hardly notice the blend on either image - unless if I offer the site for critique on the FP forum then everyone will look too close and spot it :)

I conclude that this problem is nothing to do with any image editor. If you think about it, jpg and gif are compression formats and I suppose they will always make some very fine adjustment to colours in an image at even the minimal compression settings. I tried 'tricking' it into the right colours by adjusting the original PSPimage colours off slightly but it just erred the other way instead! Typical eh! :)

Thanks again

_____________________________

Regards, Rick
On-The-Web-Now!

(in reply to bobby)
jaybee

 

Posts: 14191
Joined: 10/7/2003
From: Berkshire, UK
Status: offline

 
RE: jpg gif & png - expert help needed! - 9/7/2005 17:11:20   
It's probably not PSP, more likely down to the way the browser, monitors, graphics cards etc. render stuff. I suspect the colours you're using are not paired numbers, e.g. #cc66ff or #ff0000.

Try and stick with the web safe colours and you should be alright.

_____________________________

If it ain't broke..... fix it until it is.
:)

:)
GAWDS
Now where did I put that Doctype?

(in reply to RickP)
RickP

 

Posts: 693
Joined: 11/13/2004
From: Kent, U.K.
Status: offline

 
RE: jpg gif & png - expert help needed! - 9/7/2005 17:19:25   
quote:

I suspect the colours you're using are not paired numbers, e.g. #cc66ff or #ff0000.


Au Contraire!

My html colour is #336699, which = 51,102,153.

I use the exact RGB for my image but when saved to either format it will adjust fractionally - something like: 50,103,104

I think it is just innevitable with the compression formats we are limited to for the web - try it in any image editor and I reckon results will be the same - but I'd be most happy if I were wrong:)

_____________________________

Regards, Rick
On-The-Web-Now!

(in reply to jaybee)
bobby

 

Posts: 11394
Joined: 8/15/1969
From: Seattle WA USA
Status: offline

 
RE: jpg gif & png - expert help needed! - 9/7/2005 23:49:43   
I've had bad luck with PSP and Gimp matching HTML colors to the way a browser renders them.

It's immediately aparent with some colors as soon as you fill or shade or ....

Jaybee's right tho, if you stick with the 216 safe colors it should be fairly consistent.

http://www.w3schools.com/css/css_colors.asp


_____________________________

If con is the opposite of pro, is Congress the opposite of progress?


:)

(in reply to RickP)
d a v e

 

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

 
RE: jpg gif & png - expert help needed! - 9/8/2005 0:07:40   
if you use gif and 'lock' the colour you want in the palette then it will be exactly the same (not sure how you do that in PSP) using jpeg will result in small but noticable colour shifts - use a slightly higher than normal compression and also you can sample the background colour of your jpeg (not the psp) and use that colour for your html background :)

_____________________________

David Prescott
Gekko web design

(in reply to bobby)
RickP

 

Posts: 693
Joined: 11/13/2004
From: Kent, U.K.
Status: offline

 
RE: jpg gif & png - expert help needed! - 9/8/2005 17:07:56   
Bobby...

Jaybee's suggestion is 'web-smart' (4,000 odd colours) as opposed to the web-safe 216 - but sticking with these (if it is not too constraing) may be an answer (?)

Dave...

Didn't know about 'locking' palette colours - will look at this.

Yes, I could go the other way round - i.e. produce image first - see what the exact RGB comes out at then use the same in my HTML. I had thought of this but...

1. It means I have to forsake solely web-smart colour in my design (maybe not the end of the world:))

2. But the reason it won't work on this occassion is because I have two images (one for each end of the banner). When I work on them and save them they each come out a fraction different from each other - I think there is a known 'law' for this sort of thing!!!:)

Thanks all

_____________________________

Regards, Rick
On-The-Web-Now!

(in reply to d a v e)
bobby

 

Posts: 11394
Joined: 8/15/1969
From: Seattle WA USA
Status: offline

 
RE: jpg gif & png - expert help needed! - 9/8/2005 18:02:34   
When I run into this it's when I've already set up the structure and color scheme of the page in html / css and I'm trying to create matching graphics in the editor... typing in the HTML or RGB values.

When I've done it the other way around it hasn't been an issue that I recall.

_____________________________

If con is the opposite of pro, is Congress the opposite of progress?


:)

(in reply to RickP)
RickP

 

Posts: 693
Joined: 11/13/2004
From: Kent, U.K.
Status: offline

 
RE: jpg gif & png - expert help needed! - 9/8/2005 18:51:06   
Bobby,

Are you saying, create graphics first and then match the colours on the web page in HTML? - therefore (when matching graphic colours) not sticking fast to 'web-smart' colours only?

_____________________________

Regards, Rick
On-The-Web-Now!

(in reply to bobby)
d a v e

 

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

 
RE: jpg gif & png - expert help needed! - 9/9/2005 0:11:14   
could you post a url and a link to the original graphics? (can you save the graphics in an uncompressed format for those of us without psp e.g. 24 bit png or bitmap/tif ?

_____________________________

David Prescott
Gekko web design

(in reply to RickP)
RickP

 

Posts: 693
Joined: 11/13/2004
From: Kent, U.K.
Status: offline

 
RE: jpg gif & png - expert help needed! - 9/9/2005 6:38:44   
Hi Dave

Thanks for the extended help - Here is a link to four graphics with details:




_____________________________

Regards, Rick
On-The-Web-Now!

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

 

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

 
RE: jpg gif & png - expert help needed! - 9/9/2005 7:06:59   
didn't notice much difference in the gif and only a small amount of banding in the left hand side of the jpeg.

yeah for some reason the background colour of the gif is changing to #346799 (sorry no rgb...) i'm not very familiar with psp but i'll explain what i did in fireworks:

i set the background as transparent (i.e. chose #336699 as the matte colour so it's the colour that is transparent in the gif that way the html colour in the table cell will show through the gif background and it will be definitely the right colour. the jpeg isn't going to be perfect and a gif isn't suitable for the gradients, but adding a small amount of noise to the left 50 pixels or so of the right banner smooths that banding (see attached link)

the only other surefire way of doing it is saving as a 24 bit png but the file size will triple

anway feel free to use my versions or load the (fireworks) png files into psp and play with the export settings to your liking

http://members.tiscali.fi/dave_pirjo/test-area/ART_graham_lock/graphics.htm

_____________________________

David Prescott
Gekko web design

(in reply to RickP)
RickP

 

Posts: 693
Joined: 11/13/2004
From: Kent, U.K.
Status: offline

 
RE: jpg gif & png - expert help needed! - 9/9/2005 9:05:59   
Thanks Dave - it's an interesting little fine-tuning conundrum isn't it?

The reason I didn't attempt using a transparent bgnd for the gif is because there is shadowing behind the white text and previous experience tells me that using transparency with this effect isn't very good - but I'll take a good look at your results, which... I can't find from the link above - It gets me to a copy of the page I put up but I can't find any of the graphics files from there - ?

_____________________________

Regards, Rick
On-The-Web-Now!

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

 

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

 
RE: jpg gif & png - expert help needed! - 9/9/2005 9:07:47   
oops! http://members.tiscali.fi/dave_pirjo/test-area/ART_graham_lock/ this is where the files are and i put my versions in the copy of your page at this url http://members.tiscali.fi/dave_pirjo/test-area/ART_graham_lock/graphics.htm

_____________________________

David Prescott
Gekko web design

(in reply to RickP)
RickP

 

Posts: 693
Joined: 11/13/2004
From: Kent, U.K.
Status: offline

 
RE: jpg gif & png - expert help needed! - 9/9/2005 9:19:01   
Ah right, thanks,

In that case the gif (with shadowing) looks fine. Going this way I have the option of doing the jpg first and then matching my html to it and just keeping the gif transparent.

So it's either, forsake the absolute web-smart colour or put up with a tiny bit of diference with the jpg colour - the trouble with the latter is that it is very unpredictable how noticeable the line will look in all monitors.

Cheers :)

_____________________________

Regards, Rick
On-The-Web-Now!

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

 

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

 
RE: jpg gif & png - expert help needed! - 9/9/2005 9:40:22   
to be honest i'm not sure that the line would have caught my attention if i hadn't been looking at it (or been doing a site review and feeling picky!!!) i think the upgrade in filesize for png doesn't justify the difference and people are going to be looking at the quality of your art, not the small difference in your header ;)

i'm surprised by the darkening png in IE - it doesn't support transparency but it does support 24 bit pngs...

_____________________________

David Prescott
Gekko web design

(in reply to RickP)
Page:   [1]

All Forums >> Web Design >> Web Graphics >> jpg gif & png - expert help needed!
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