Post Reply 

Preparing Images for the web/Transparency

Mar 15, 2012, 01:37
Post: #16
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 15, 2012, 07:42
Post: #17
RE: Preparing Images for the web/Transparency
(Mar 15, 2012 01:37)AnnKR9 Wrote:  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.
The problem may not be with the graphics but with the HTML and/or Wordpress and/or the hosting site for your images.
(Mar 15, 2012 01:37)AnnKR9 Wrote:  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.
InkScape is a nice piece of software, but if the final output is bitmap graphics, Gimp is more suited.
(Mar 15, 2012 01:37)AnnKR9 Wrote:  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.
I do websites for a living (on the "code" side, not the web design) and there is nothing special about the graphics, even if web designers do have their tricks of the trade. But yes, there are a couple of important things to know and rules to follow.
(Mar 15, 2012 01:37)AnnKR9 Wrote:  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".
It means to not use photobucket, imgur or else for your images. It means having your HTML and images all on the same server.

Now answering your questions on
https://Gimp-Forum.net
Visit this user's website Find all posts by this user
Quote this message in a reply
Mar 28, 2012, 21:40
Post: #18
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 28, 2012, 21:52
Post: #19
RE: Preparing Images for the web/Transparency
Glad it works... now:

3) isn't really needed. Saving to PNG will merge the visible layers...

5/6) I don't understand why you need to move to Dropbox, download from Dropbox & upload to website. The PNG you save can be directly uploaded to the web site (how did people do websites before dropbox?) (it is assumed/hoped that the PNG you get from dropbox is exactly the same you uploaded).

Now answering your questions on
https://Gimp-Forum.net
Visit this user's website Find all posts by this user
Quote this message in a reply
Mar 29, 2012, 10:40
Post: #20
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
  Removing color from multiple images Aquilo 6 2,914 Sep 28, 2017 12:56
Last Post: angel0sdh
  How to overlap two images? ferguson1951 1 161 Jul 4, 2017 07:10
Last Post: ythgilb
  Putting two images side by side chrisj 3 6,940 May 30, 2017 11:45
Last Post: blighty
  Checkerboard transparency toggle rahdad1 4 224 Oct 9, 2014 16:14
Last Post: rahdad1
  Layering + erasing with two images, no outline crap? VXVO 1 240 Sep 29, 2014 18:07
Last Post: VXVO

Forum Jump:


GIMP ForumPortalArchiveContactTermsRSS