7 {{ upvoteCount | shortNum }}
7 {{ upvoteCount | shortNum }}

Image File Formats

by birdman87
6 replies
  • WEB DESIGN
    • |
Hi Guys

I don't know if this is the right place to post this complete newbie question but...

I've decided to stop fiddling and messing about learning SEO stuff and actually start my own business. I designed a a logo I'm happy with and am in the middle of designing a very professional looking wordpress site.

I want the slider arrow thing in my theme to look awsome. I'm testing adding different pictures to it to see what they look like. The problem is the white background behind the images always make it look horrible.

The logo I designed is a png. image. It doesn't have a background so that whenever I add it to something it doesn't mess the way it looks. It just adds the image to whatever background is on there.

I tried a jpg to png image converter but the png images I get as a result still have the background.

Can any of you tell me how I go about creating an image that doesn't have a background please? It would help me massively. I'm really stuck at the moment trying to make it look attractive.

Thanks guys

David
#file #formats #image
  • Profile picture of the author James Kenton
    JPG images don't support any type of transparency - so your JPG to PNG converter won't know that any particular color is supposed to be 'see through'.

    Maybe your converter has the option to pick a color that it should make transparent? If it doesn't you'll need to find one that does.

    GIMP (free) and Photoshop (costly) are more complex than a simple converter but have the advantage that you could tidy up any ragged edges that need to be made smooth and partially transparent.

    If your editor doesn't do this and you don't want to learn GIMP/Photoshop - I'm sure there are plenty of people on fivver who'd do this for your for you. If the design is particularly complex you might need to pay more. Drop me a private message if you'd like me to take a look at it.
    {{ DiscussionBoard.errors[4499412].message }}
    • Profile picture of the author birdman87
      Thanks man. Will give it a go and get back to you if I'm still stuck.

      I have some older photo editing software and graphic design software that i got free from a company i worked for years ago. will try it out in there.

      so I can turn it transparent if it's a png file to begin with?

      I looked on fiver but theres about 12 images i need doing, which would cost me 60 quid. trying to keep my costs down as much as possible.

      I'll carry on looking about and if i still struggle i'll drop you a message.
      {{ DiscussionBoard.errors[4499446].message }}
      • Profile picture of the author James Kenton
        Many photo editing packages allow you to choose a color or area and turn them transparent. They can also let you 'draw' the transparency on. It doesn't really matter what type of image file it is before you load it in to the editor - it's how you work with it within the package and then save it (eg as a .png) that determines which parts become transparent.

        Also be aware that some older browsers don't support the transparency features build in to pngs. Sometimes you are safer saving as a gif. The only problem with gif images is that you only get to choose ONE color that can be transparent - so the edges of things within the gif can look ugly unless they are hard horizontal/vertical lines.
        {{ DiscussionBoard.errors[4499466].message }}
      • Profile picture of the author James Kenton
        By-the-way: GIMP is free. I'm not allowed to post links yet (until I reach 15 posts) but it's gimp and then add a dot org. Gimp will do what you want and is probably better than the old software you have. The learning curve is a bit steep if you've not used to this sort of thing.

        What you need to do is to erase or 'mask' the areas you don't want. You can use a soft edged brush/eraser to make the transitions between the wanted bits and unwanted bit look nice. Save the image as a png and the erased bits will be see through. It's relatively easy to do - and it'll save you $60!

        If you're starting from scratch you'll probably find the eraser method easier. Trouble is it's then harder to un-erase later (but you may not want to). If you have the time learn how to create a mask. This means you don't destroy any part of the original image and can get it back at any time if you need to. It's a bit more to learn but easy once you know how.

        Try searching for 'gimp masking transparency' to find a video tutorial.
        {{ DiscussionBoard.errors[4499516].message }}
  • Profile picture of the author Nexstair
    Quite simple - just open it in Photoshop - go to Save as and save it as Png.It would have no background at all.


    Originally Posted by birdman87 View Post

    Hi Guys

    I don't know if this is the right place to post this complete newbie question but...

    I've decided to stop fiddling and messing about learning SEO stuff and actually start my own business. I designed a a logo I'm happy with and am in the middle of designing a very professional looking wordpress site.

    I want the slider arrow thing in my theme to look awsome. I'm testing adding different pictures to it to see what they look like. The problem is the white background behind the images always make it look horrible.

    The logo I designed is a png. image. It doesn't have a background so that whenever I add it to something it doesn't mess the way it looks. It just adds the image to whatever background is on there.

    I tried a jpg to png image converter but the png images I get as a result still have the background.

    Can any of you tell me how I go about creating an image that doesn't have a background please? It would help me massively. I'm really stuck at the moment trying to make it look attractive.

    Thanks guys

    David
    Signature
    Custom Website design | Affordable Theme Development | Special Discount for Warriors
    {{ DiscussionBoard.errors[4508116].message }}
  • Profile picture of the author James Kenton
    Photoshop Elements is $80 and the full version over $600! Many can't justify this cost just to edit a couple of photos.

    There's a FREE editor called GIMP that will do what you want.

    I've made a short tutorial that covers what you need to do. I don't normally use GIMP so it isn't as smooth as I'd like - but it's good enough.

    Search YouTube for jameskentonpresents

    I hope it's useful
    {{ DiscussionBoard.errors[4528553].message }}

Trending Topics