Post Reply 

Preparing Images for the web/Transparency

Mar 11, 2012, 05:38
Post: #1
Preparing Images for the web/Transparency
Hello:

I am totally beside myself with frustration. Angry

So, I need to put images on websites such as headers, buttons, icons, just text and so forth.

I have saved my work first as .xcf for later editing. Then I save my work as .png that I have created with a transparent background. However, when I go to put them on the websites I am building there is Always a white background. ?? Huh

Even when I upload them to Photobucket there is a white background. But when I make .png images in Inkscape they load fine to Photobucket with no white background but again, when I try to put the Inkscape .png images on my websites they too have white backgrounds (sorry to mention Inkscape just thought it might help you help me).

Also, when I save files with a transparent background as .gif and upload them to Photobucket the transparent background is there but the images look just awful. They are no longer smooth around the edges & look like the pixels are sticking out all around the images.

Also, when I save files as .gif and upload them to my websites they too have a white background. ?? Huh

I've been using Dropbox to send images to my biz partner and both the .png and the .gif are showing up with white backgrounds in Dropbox as well.

PLEASE someone can you tell me what I am doing wrong? I have read so much information on the web that I've got a huge headache. One site says one thing and an other site says an other. I just don't get it. Is there a secret handshake or something?

I know it can be done. I see websites everyday with images without white backgrounds. I mean, I may be new to all this but I'm not usually slow at learning but gosh this thing has me in a total Tissy Fit.

If you can help me I will build you a monument in Times Square and go there every day to worship at your feet!! lol Blush

ps. please, I am a total Newbie to computers and most of all with file types ~ so if you can keep it as simple as possible i'd greatly appreciate it. Thank You So Much!!
Find all posts by this user
Quote this message in a reply
Mar 11, 2012, 18:29
Post: #2
RE: Preparing Images for the web/Transparency
Here is briefly how I would recommend to try slice a web design, as this is how it works for me. First of all, I usually have whole design in one XCF file.

- Leave only layers that make the web element for saving (by hiding all other layers in the layers dialog)
- Edit > Copy Visible
- Edit > Paste as > New Image
- Image > Autocrop Image
- Save as PNG

My "Save as PNG" window looks like this (haven't touched it)
   

Examples of transparent PNG web element,
http://playbomberman.com/css/images/game-border.png
or
http://playbomberman.com/css/images/game-bottom.png

And here used on website,
http://playbomberman.com/

Also want statue.

GIMP user forum here at GIMP Forums. A friendly place to learn GIMP!
Everyone's welcome, feel free to join the community.
Visit this user's website Find all posts by this user
Quote this message in a reply
Mar 11, 2012, 22:05
Post: #3
RE: Preparing Images for the web/Transparency
(Mar 11, 2012 13:10)ofnuts Wrote:  PNG is indeed the right file format for what you want to do. As you noted, GIF with outline transparency doesn't look good unless you do things to tune it to the background, but this removes all the benefit of transparency.

Can't really tell what is wrong without seeing the PNG and possibly the HTML (because there is IMHO a pretty strong probability that the problem is in the HTML). Is your tentative site up somewhere? If so can you post the URL (or PM it to me if too shy to show the world Smile)

At least can you post your PNG and possibily its source XCF here (go to full edit for this).

I don't know for Dropbox, but many image sites have a specific background to display transparent images (some even add one in the image file), so you can't tell by looking at your image on the site, you really have to download it.

Awaiting my Times Square statue with baited breath Smile

Hello : 1st TY so much for responding to me.

i have written down everything you said and after dinner i will do what you asked and come back here to post my response.

from dropbox i did upload it to my website and it did have the white bg. errg.

after a while ... (okay, i can be a 1/2 wit at times & always wanting/needing to run b4 i can crawl) ... i made my image (text or tag line) into a gif sent it to photobucket and BOOM! it appeared w/out the white bg!!

however, it just doesn't look too good. thankfully regarding this particular application the text image is fitted into a 338x45 box so it's small enough that it'll pass for the time being. but as the need to generate larger images comes about the gif won't suffice.

for now, off for dinner & then to do what i need to return here

i've ordered the building materials, have started on the design and have called the mayor of NY to make room for your monument. The mayors office hasn't returned my call yet but i am waiting with baited breath!! Smile
Find all posts by this user
Quote this message in a reply
Mar 11, 2012, 22:20
Post: #4
RE: Preparing Images for the web/Transparency
(Mar 11, 2012 18:29)Einherjar Wrote:  Here is briefly how I would recommend to try slice a web design, as this is how it works for me. First of all, I usually have whole design in one XCF file.

- Leave only layers that make the web element for saving (by hiding all other layers in the layers dialog)
- Edit > Copy Visible
- Edit > Paste as > New Image
- Image > Autocrop Image
- Save as PNG

My "Save as PNG" window looks like this (haven't touched it)


Examples of transparent PNG web element,
http://playbomberman.com/css/images/game-border.png
or
http://playbomberman.com/css/images/game-bottom.png

And here used on website,
http://playbomberman.com/

Also want statue.

Thank you too for responding to my question. I will have to give your suggestion and the one above a go and then return here to let you both know what worked out for me. i've got a lot to do today so i may not get back here till much later 2nite or even 2mar afternoon.

I called the NY mayors office back to let them know i'll be needing more space at Times Square!! Thanx again!!
Find all posts by this user
Quote this message in a reply
Mar 11, 2012, 22:35 (This post was last modified: Mar 11, 2012 22:42 by AnnKR9.)
Post: #5
RE: Preparing Images for the web/Transparency
(Mar 11, 2012 22:20)AnnKR9 Wrote:  
(Mar 11, 2012 18:29)Einherjar Wrote:  Here is briefly how I would recommend to try slice a web design, as this is how it works for me. First of all, I usually have whole design in one XCF file.

- Leave only layers that make the web element for saving (by hiding all other layers in the layers dialog)
- Edit > Copy Visible
- Edit > Paste as > New Image
- Image > Autocrop Image
- Save as PNG

My "Save as PNG" window looks like this (haven't touched it)


Examples of transparent PNG web element,
http://playbomberman.com/css/images/game-border.png
or
http://playbomberman.com/css/images/game-bottom.png

And here used on website,
http://playbomberman.com/

Also want statue.

Thank you too for responding to my question. I will have to give your suggestion and the one above a go and then return here to let you both know what worked out for me. i've got a lot to do today so i may not get back here till much later 2nite or even 2mar afternoon.

I called the NY mayors office back to let them know i'll be needing more space at Times Square!! Thanx again!!

ps. i just clicked the three links you posted but only the last one took me someplace. the 1st 2 took my to empty web pages. ??
pps. (lol) here's one of my 1/2 wit - newbie questions .... how do i "hide all layers" ?? also, the current image i'm working with is actually one layer b/c it's just a text line (tag or business name) and i made it by ... File > Create > Logo > Glossy.
okay, really going for dinner. i'll be back Smile
Find all posts by this user
Quote this message in a reply
Mar 11, 2012, 22:59
Post: #6
RE: Preparing Images for the web/Transparency
I didn't mention... when clicking first two links have a look at the very top. Smile

You can hide a layer by clicking on the eye next to it in the layers dialog.

p.s. Maybe that's just "Background" layer you need to hide before saving.

GIMP user forum here at GIMP Forums. A friendly place to learn GIMP!
Everyone's welcome, feel free to join the community.
Visit this user's website Find all posts by this user
Quote this message in a reply
Mar 12, 2012, 19:23
Post: #7
RE: Preparing Images for the web/Transparency
hey there - thanx again for helping me out Smile

so, i followed your directions and sure enough when i uploaded to Photobucket the white bg was gone but when i go to upload it to my website the image is wicked blurry

http://i1263.photobucket.com/albums/ii62...agPete.png
the link above is to the text i made with the File>Create>Logo & where i didn't check the Interlace box.
http://i1263.photobucket.com/albums/ii62...gPete2.png
the link above is where i did check the Interlace box
http://i1263.photobucket.com/albums/ii62...tesTag.png
the link above i followed your directions but all three appear very blurry when uploaded to the website my partner and i are building.

Any ideas?
Here's the website
http://www.kettlecovefoods.com

when it's a .gif it's not blurry but looks awful in an other way b/c it's pixelated around the edges. (come on, isn't 'pixelated' a word?, lol)

awaiting your suggestion with much anxiety - LOL - i gotta say i cannot tell you how much i greatly appreciate your willingness to help me!! i think people that take time from their lives to share knowledge & skills with others are amazing and outstanding people!! TY so much!!
Find all posts by this user
Quote this message in a reply
Mar 12, 2012, 23:49
Post: #8
RE: Preparing Images for the web/Transparency
hi ofnuts ... ty again for posting a reply

uhhh sigh .... so, i had written out a lengthy response to you (oh joy you're probably thinking) ... but Firefox decided to go on a hiatus leaving me hanging in la la land. so, i just now was able to send it but hadn't seen this message b4 i sent it.

i hadn't changed back to the .gif when i wrote what you've now responded to. so very sorry if i am confusing matters. the words: "Kettle Cove Food Company" if not blurry when you saw it is because it's again a .gif

so, i suppose just ignore the PM i sent on just a few moments ago.

i didn't realize that "size matters" (lol) so i will go ahead & redo the text in the manner you have suggested. so, (the 1/2 wit says...) that ought to cure my blurry image issue on my site?

my partner is off playing pool 2nite so i won't be able to know if your new directions will resolve my Blurry issue till much later 2nite.

Still waiting for th NY mayors office to get back to me but the monument design is coming along brilliantly Smile
also, in appreciation ... if NY doesn't work out ... i could build you a mobile website for something if you need or want. would just like to do something for you in return. or if you need something promoted in some way maybe i can help - ?? just lmk TY!!!!!
Find all posts by this user
Quote this message in a reply
Mar 13, 2012, 01:58
Post: #9
RE: Preparing Images for the web/Transparency
i'm sorry, i'm still quite confused.

i understand what you're saying. any chance you know how i go about resolving the /images%20 ... issue? or will i need to work that out on the wordpress.org end?

uhhg so much to learn.

also, ... are you saying the text i made is Ugly?? lol ... no, really are you? natural bad looks? lol
it's what the customer wants or as close as i can get at this point.

i'm not sure why you suggested to apply the blur filter. ??

i Really Hate to keep asking for help. {blushing}
Find all posts by this user
Quote this message in a reply
Mar 14, 2012, 00:35
Post: #10
RE: Preparing Images for the web/Transparency
you truly are my angel Smile ty ty ty ty ty ty ty .... that and some Prozac i should be fine at some point ...

i will, of course ... go and look up the answer to this question but i thought i'd ask since i am here and since you're so incredibly Kind : )

how do i go about adding 3 transparent px's to an image?

also, btw ... how do you go about loading images to websites? is my only option to use something like Dropbox or Photobucket?

i tried to fix the sizing issue by using photobuckets "native" editing b/c i noticed that when i opened the image in their editing ... um ... 'section' that my image was no longer 338x45 but it was roughly twice that ... but once again ... when it was retrieved to be uploaded to the site that seriously obnoxious 20% thing was still an issue.

so, to go w/out saying ... but saying it nonetheless ... Photobuckets resizing didn't work (it's my retentive quality that makes me so endearing to my friends ; )

can i just say .... ?? ARG!

ty again, kara
Find all posts by this user
Quote this message in a reply
Mar 15, 2012, 01:37
Post: #11
RE: Preparing Images for the web/Transparency
hey there ... sorry just getting back now ... (as i'm sure you're thinking of nothing else ...lol...) or at least where the heck your monument is)

any way, so ... i think you are Right ... i am going to have to keep things simple (for now). which bites. seems every time i try to add any embellishments at all the image ends up blurry on the website.

i've also pretty much given up on Gimp for this particular application. i went ahead and made a plain (ugly) simple 'Sans' text for the tag lines in Inkscape (shhh did i say that?) b/c it just seemed to work better for this particular task. maybe i'm wrong & maybe Gimp would have been fine too but ... there ya have it.

i'm still trying to unlock the secrete of how web designers upload perfect, or near so, images and text headers. seems like it should be simple enough but it now seems like there are far more intervening variables than i had anticipated.

so, thank you a ton and then some for all your awesome efforts to help me. i will return at some point to luk if i've mastered the art of uploading & preparing .png files. at least i've gotten rid of that seriously obnoxious white bg!! so, thank you for that too Smile

i'm going to have to Google what you mean by "getting images on the same site that serves the HTML".

have a wonderful day/night!!
Find all posts by this user
Quote this message in a reply
Mar 28, 2012, 21:40
Post: #12
RE: Preparing Images for the web/Transparency
Hey there Ofnuts ~ i just wanted to stop back to review all the wonderful help you gave to me Smile & to let you know that Everything you taught me made a huge difference for me!! So, thank you again!

What ended up working for us was actually ~ painfully ~ Simple.

As it turns out ~ you were right about Everything (as you smile & say: of course to yourself, lol), making simple text at such a small level is the Best way to go when linking an image & adding the 3 transparent pixels makes all the difference in the world.

Also, clicking the eye icon/shutting off or deleting the BG layer helps the end result on the website. i have also found that "Merging visible layers" helps.

However, all in all i think what i was doing wrong was that i was using an Image Hosting site such as Photobucket & Dropbox to Link images to the site i was building.

What my partner & i didn't realize was that Linking an image was totally the wrong way to go about things. embarrassingly so to say we never thought about being able to Directly upload the images from my partners hard drive to the website! crazy!

I thought that because i was working with Transparency that i had to use an Image Hosting site in order to save/keep the transparency ~ i didn't realize that just because the image has a white BG in my Windows Photo File that the image wouldn't have the white BG once uploaded to the website. this is how little i understood about file types & their functions or lack thereof.

So, what works for me:
1. Create Image > Save As .xcf for later editing > i save this copy Exactly as it was made w/every step preserved.
2. (if i did not begin w/a Transparent BG) > click the Eye Icon located in the Layers dialog > or even Delete the BG Layer
3. Image > Merge Visible Layers
4. Save as .png
5. Send to Dropbox > rather than Link the image to the site ... (photobucket is not recommended b/c they don't allow for downloading to your pc or to directly upload to your website)
6. download from Dropbox to Hard Drive > Upload to website & Boom ... all is fine ~ even small text with embellishments Wink ... i no longer have an HTML problem or blurry problem!!

wow!! so glad that's over!! just Love Occam's Razor!! < should have remembered it's main prinicle ~ may have saved myself a headache or 2 ... 3 ... 4

btw ~ TY for the info on the Nyquist - Shannon!!
Find all posts by this user
Quote this message in a reply
Mar 29, 2012, 10:40
Post: #13
RE: Preparing Images for the web/Transparency
Nice to hear it's working now.

Indeed, as Ofnuts wrote, saving to PNG will automatically merge layers. After saving as PNG the image can be directly uploaded to website. How do you go about uploading to website, or is it partner performing the actual upload?

GIMP user forum here at GIMP Forums. A friendly place to learn GIMP!
Everyone's welcome, feel free to join the community.
Visit this user's website Find all posts by this user
Quote this message in a reply
Post Reply 


Possibly Related Threads...
Thread: Author Replies: Views: Last Post
  Creating BMP images from a layer jgarnold 1 32 Dec 16, 2017 06:38
Last Post: ythgilb
  How do I open multiple images in Gimp? Pnem42 1 142 Nov 9, 2017 05:23
Last Post: paynekj
  Removing color from multiple images Aquilo 3 3,111 Sep 28, 2017 12:56
Last Post: angel0sdh
  How to overlap two images? ferguson1951 1 205 Jul 4, 2017 07:10
Last Post: ythgilb
  Putting two images side by side chrisj 2 7,296 May 30, 2017 11:45
Last Post: blighty

Forum Jump:


GIMP ForumPortalArchiveContactTermsRSS