PS Help

[VirusType2]

I need to make the background of 4 images transparent for work.

I am expected to know how, but I've never done it. I'm using Adobe Photoshop CS3.


They are simple logos. Currently, 3 are .jpg and 1 is .gif format.

.jpg doesn't support transparency I don't think, So I'll convert them to .gif.

Then, to make them transparent, I select the image, then select background? What next?

 

[Escaep]

edit: nvm i misunderstood your question.

 

[VirusType2]

I also have Paint Shop Pro installed, or I could also download something else like Gimp if anyone knows how to do it there.

 

[Escaep]

I also have Paint Shop Pro installed, or I could also download something else like Gimp if anyone knows how to do it there.

You can PM the pics if you want (or are allowed to) and I can see what I can do.

 

[VirusType2]

Here are the logos if anyone wouldn't mind helping:

*removed*


I wish I could learn how to do it, I'll definitely need to do it again in the future. So if you can take note of the steps to do it, that would be extra cool.

 

[FishBulb]

Well, depends on how simple the logos are. If they're just single colour backgrounds, you can use the magic wand to select it, then press 'delete' and you should now see a checkered background to signify transparency.

And yeah, JPEG doesn't support transparency. You can either save as GIF or PNG.

 

[VirusType2]

Well, depends on how simple the logos are. If they're just single colour backgrounds, you can use the magic wand to select it, then press 'delete' and you should now see a checkered background to signify transparency.

And yeah, JPEG doesn't support transparency. You can either save as GIF or PNG.

That worked pretty well, thanks a million. I thought there was an even easier way to do it (especially on complicated images) where you could select the solid white background, and then make that transparent. That way, anything white would be considered the background and you could tell it to make the background transparent.



Unfortunately, they gave them to me anti-aliased, making it harder for me. I guess I'll have to go in with a magnifier and clean up the edges now.

 

[FishBulb]

There probably is an easier way, something to do with masks and RGB channels? I've no idea. I'm no pro, so I just use the magic wand.

 

[Escaep]

I was only able to do the .jpg, whenever I tried to open SAE logo*** for some reason it was locked and i couldn't do any changes to it. They do need some touching up, but unfortunately i have to go soon. Here are the other three:

**

Heres how I did it:

Open it in PS.

1) While holding the ALT key, double click on the "Background layer", this will convert it to a normal layer.

2) Create a new layer, make sure it doesn't have a color (gray and white checkerboard)

3) Drag this new layer to the bottom, beneath the Background layer (which should now be layer 0)

4) Go to your tools palette, and click the magic wand tool. It is the 4th tool down, if it isn't there, click the triangle to find it.

5) Select the background (make sure you are in Layer 0), which in this case is white.*

6) Once selected, press delete, a gray-white checkerboard should appear.

7) Save the image as either a .PNG or .GIF.

*note, magic wand tool will not work if the background color has the same colors as your logo. for example, in the RAS logo, Magic Wand will not work because it will pick up both the white in the background as well as in the logo. For this step, Go to the Eraser, click the black triangle in the bottom right, and select "Background eraser tool." Now, carefully erase all the white around your image.

**on this one, since i am in a bit of a hurry, the erasing around the images is really sloppy, but use the background eraser tool to sharpen up your original image.

*** for this one, in you can unlock it, the magic wand tool should work.

 

[VirusType2]

Thanks!

<: D

 

[FishBulb]

Nah, it's fine to use the magic wand if both the logo and background have the same colour, just tick "Contiguous" and the magic wand will only select the pixels that are adjacent and the same colour (if that makes any sense).

 

[Krynn72]

Nah, it's fine to use the magic wand if both the logo and background have the same colour, just tick "Contiguous" and the magic wand will only select the pixels that are adjacent and the same colour (if that makes any sense).

Thats assuming every bit of the outline of the logo is a different color.

Also Virus, watch these:

http://www.mydamnchannel.com/You_Suck_at_Photoshop/Season_1/4PathsandMasks_1376.aspx

http://www.mydamnchannel.com/You_Suck_at_Photoshop/Season_1/5SelectColorRange_1377.aspx



Also, why are you working at a place that requires photoshop skills, when you dont have any?

 

[VirusType2]

I told them my background with computers, and told them when I started that I will learn whatever I need to do the job and they were happy with that.

I usually have a task and have to do it thousands of times. But this is something new and is my test to get more work like this. An upgrade in pay that requires more proficiency.

 

[Kadayi]

Assuming that the logos are against a flat background colour try the following in future for smoother selections than using the wand tool:-

1) double click on the layer in the layers panel to change it from a background layer into a layer 0

2) Press I on the keyboard and this will bring up the eyedropper tool

3) click on the colour you wish to remove

4) Goto the menu>select>colour range

5) this will bring up the colour range dialog box (by default this should be set to sampled colours which is fine). Experiment with this dialog box to understand how it functions (its fairly straight forward once you familarise yourself with it)

6) once you're happy that you have a good selection hit ok.

7) goto the menu>select>save selection and call it 'logo'. This allows us to load it again in future rather than having to repeat the previous steps if we decide it needs adjustment.

8) press Ctrl + D to deselect the selection

8) create a new layer and drag it below the existing layer, and hit Shift+F5 to bring up the fill dialog. Fill it with a colour that will provide good contrast against the logo (allowing you to assess the quality of your selection).

9) select the image layer again.

10) Menu>selection>load selection and choose 'logo' from the channels

11) having loaded the selection press backspace on the keyboard to delete the selected area of the logo, with the high contrast colour beneath you should be able to see how accurate your selection is. If its robust then delete the high contrast layer beneath and save the image as a gif or Tif. If it needs further refinement then Ctrl + Z (or Ctrl + shift + z to multiple undo) reload the selection and refine it. Rinse repeat.

12) The best way to understand photoshop is to take some time to read/work through an intro book by one of the photoshop gurus out there. I recommend Deke McClellan, as the guy really knows his stuff and takes you through things from the word go, explaining what all the knobs and buttons do and more importantly why. Once you get familiar with the philosophy of the application its much easier to figure out the most appropriate way to do things. If money is tight buy/borrow a book for an older version of PS, its not essential to have a book on CS 3, as tbh the difference between the iterations isn't earthshattering.

Kad

 

[VirusType2]

I copied these instructions to a notepad. Thanks a ton for your guys time. Truly helpful.

I swear, this is something I've always had trouble with over the years. I've managed to do it before, but I can never remember how I did it the next time I needed to.

 

[Kadayi]

Most people dabble with Photoshop and achieve acceptable results by trial and error, but its really worth the time esp if you're working with the application professionally to learn it in detail. There are tried and tested methods out there that consistently deliver excellent results.

I recommend Deke McCellan on the book front, but there are also plenty of decent free podcasts that are worth watching (just do a search in the itunes store to find the feeds):-

The russell brown show - this guy is a bit of a wackjob, but hes worked for Adobe since about day one and pretty much knows the smartest ways to achieve results. He doesn't update his podcast too often, but its worth the time going through his back catalogue of podcasts

Understanding Adobe Photoshop - very straight forward podcast by a guy called Richard Harrington, again worth checking out his back catalogue of podcasts

Photoshop TV - they tend to talk more about specific techniques than anything else, but is a good way of learning different things

Adobe Photoshop quicktips (video) - guy called Justin Seeley, again much like Richard Harrington a no nonsense straight to the point podcaster.

 

[Dan]

All of the suggestions here have been sub par methods of getting passable results. They are all approximations of what you are trying to achieve and will **** up the anti aliasing when you zoom in close. What you really want to do is map a specific colour (white in this case) to the alpha channel (transparency). Setting the layer render mode to darken is a quick and dirty way that effectively does exactly this in a linear fashion (more white = more transparent).

After you map something to the alpha channel you can play around with the alpha channel input/output curves to change the linearity of the transparency. This lets you set up things like the maximum amount of white that a colour will remain completely opaque with or how quickly your transparency transitions with increasing "whiteness". For even more fine tuned results you could map each RGB channel separately and then combine the three to make sure that you don't **** up specific areas. For example, if you set white to additive, and had a light green foreground and then dropped in a red background you would totally mess up the green hue. But if you mapped the green channel to alpha with a steep transition curve biased towards the light end of the spectrum, you could retain the opacity of the foreground.

If you have more of this kind of stuff, wing it my way, and I can help.

 

[VirusType2]

Well, my boss wasn't happy with the results. I hadn't cleaned them up yet though.

I told him the images he gave me were anti-aliased, which destroyed the edges of the logos, since they were anti-aliased against a white background, and now they are on a very dark grey background.

I have since cleaned them up a great deal. If he still isn't happy with it, I'll contact you. And thank you.

The tips you've given me are something I haven't experimented with. It sounds daunting, but I will copy it to a text file and try to follow it later, next time I need to do this.

 

[VirusType2]

I think I'm finished with the web page. Unless I'm asked to change things, I'm satisfied how it turned out. Thank you all.

check her out:

http://www.vstol.org/iplc


By the way, if something isn't showing up right, or isn't fitting on the screen right, could you let me know?

 

[Kadayi]

All of the suggestions here have been sub par methods of getting passable results.

*slow clap

Nice of you to diss everyone there Dan. Virus pretty much said he was a newbie to PS so there didn't seem much point in overly complicating things for him by getting into talking about Alpha channels and confusing the **** out of him at this stage. :dozey:

Virus check your PMs

 

[Dan]

*slow clap

Nice of you to diss everyone there Dan. Virus pretty much said he was a newbie to PS so there didn't seem much point in overly complicating things for him by getting into talking about Alpha channels and confusing the **** out of him at this stage. :dozey:

Virus check your PMs

Well like I said, those methods will **** up the anti aliasing, and they did, and his boss was unhappy.

 

[VirusType2]

What I ended up doing was going in there with a pencil and the eye dropper and just replaced the aliased edges on some things with the standard color.

It could have been better if they hired a pro, but this was my first web page, and I managed to please him after all. I got this email this morning:

Holy Sh*t, [Virus] -- it looks absolutely fantastic! Perfect! Only suggestion is to have the links to the societies open up new windows.

[...]

Thanks again, [Virus] -- it's awesome!!

Here is my page:

http://www.vstol.org/iplc

I've only checked it on my 19" with IE and FF 3, so if something isn't showing up right, or isn't fitting on the screen right, could you please let me know?

 

[Kadayi]

Well like I said, those methods will **** up the anti aliasing, and they did, and his boss was unhappy.

Whilst yours went over his head :dozey:

Anyhows its in hand

 

[Dan]

Well this was the first chance I got to see all the logos and your transparencies still bugged the shit out of me. The crusties around the edges seem very visible still. So here they are properly masked in as high resolution as I could find. I took the colour for the SAE logo from your version. I don't know where it came from. Everywhere else used black. I couldn't find a decent AHS logo so I skipped it, but that needs fixing too.

I used tifs to save file size and keep a proper alpha channel. If you want to get rid of compression artifacts I can send you larger lossless files.

Here's a comparison with the website:

see what I mean?

high res:
http://img14.imageshack.us/img14/892/aiaalogo.tif
http://img35.imageshack.us/img35/9829/raslogo.tif
http://img15.imageshack.us/img15/5955/saelogo.tif

I used GIMP which is free.

P.S. if they want to hire a graphic artist, I am unemployed and also have a degree in engineering

edit: learned that you can embed tifs into the forum. Sweet.

 

[VirusType2]

Also, GIF looks really blocky and rough because it can only index a single colour to transparent. It's either on or off. There is no gradient to give smooth edges defeating the purpose of anti aliasing.

Ah, Yeah, Because when I tried to keep file sizes small by converting the AHS logo to GIF, I noticed it got extremely jagged and the aliasing got screwed up, so I erased that and stuck with PNG. Thanks for that useful info.

I would suggest making a jpg with the background colour that you want.

yeah, that would have been the proper way and would probably give the best result.

So here they are properly masked in as high resolution as I could find. I took the colour for the SAE logo from your version. I don't know where it came from. Everywhere else used black. I couldn't find a decent AHS logo so I skipped it, but that needs fixing too.

Yeah, he did send me an AHS.eps but I don't know what that really is. I think it's a vector. Photoshop complained about it (maybe it was an error) so I just used a large jpg version and resized it.

I used tifs to save file size and keep a proper alpha channel. If you want to get rid of compression artifacts I can send you larger lossless files. Switch your forum style to blue to see how the background looks.

Is TIF better than PNG? It seems PNG is a great deal smaller in file size in many cases, so I'm trying to figure out why so many people use TIF

I used GIMP which is free.

Man, those look unbelievable. It's like you were the original author. Were did you get the sources - Google images?

P.S. if they want to hire a graphic artist, I am unemployed and also have a degree in engineering

Well, I am a contractor, so I don't really have a boss - I have a client that tells me what they want, and you wouldn't want to do this monkey shit. I get paid balls. But... I hope to improve my skills, and get bigger and better paying clients.

Just curious, what kind of engineer degree did you get?

BTW, I forgot to say thanks! Like I said - in a word - unbelievable.

The royal aeronautical society logo is absolutely pristine. The source I had was born ugly, been shit into a dumpster and ran over by a truck.


EDIT - I see you edited you post. Proper. My sources artifacts, bad aliasing, ****ed up trademark symbols and even cropped edges.

This is mostly because he told me about 5 days ago that he needs this site, and he was in a rush to leave town.

 

[Kadayi]

Yeah, he did send me an AHS.eps but I don't know what that really is. I think it's a vector. Photoshop complained about it (maybe it was an error) so I just used a large jpg version and resized it.

Virus email the EPS file to me. The original logo was probably made in Illustrator or Freehand (vector apps) and I should be able to open it up and export out a usable PNG version for you. The Jpeg has some pretty serious artifacting going on around the lettering that makes it fairly pointless to try and rescue it tbh.

Is TIF better than PNG? It seems PNG is a great deal smaller in file size in many cases, so I'm trying to figure out why so many people use TIF

For web stuff use PNG as its better than GIF (though you can animate with GIF unlike PNG). TIF is widely used for print images because like Photoshops native PSD as it supports layers, alpha channels and 8 & 16 bit colour depth as well as lossless compression (LZW under the save options) however it isn't a web supported format.

http://www.image-formats.com/

http://www.elated.com/articles/understanding-image-formats/

 

[Kadayi]

Exported at 150 Dpi PNG

ahs color logo.png - 0.08MB

Basically opened up in illustrator, then rather than 'save as' use export (which has the PNG options).

 

[VirusType2]

Thanks.

I noticed that the AHS logo I have on my site (the only one I did the transparency myself) is much better than the one at the official AHS site!



BTW I started making my own site. That was good practice. The site doesn't really do anything because I don't know what to use it for. I guess it could be a shrine for everything I love.