step-by-step tutorial

Below step-by-step tutorial is based on usage of Adobe Photoshop 4.0

1) Find the logo that you would like to use.
2) Click the desired logo to download it.
3) Unzip the file.
4) Load a programme able to parse Illustrator files (eg. Adobe Photoshop).
5) Now choose File/Open, locate the file and open it. You will now see a window like this:
6) Now determine what size your logo should be. Assume you want your logo to be 200 pixels wide, simply type 200 in the Width: field and choose pixels from the selection on the right (normallypixels is default). Make sure that Constrain Proportions is ticked. This will secure that your logo gets the correct height compared to the width or vice versa. When desired size has been entered, clickOK, and your logo will be loaded. Loading might take a little while, as Photoshop has to calculate the data from the Illustrator file.
7) Your logo should now appear on the screen in a window with transparent background (looks like a chessboard). This format , however, is not usable on websites, so first it has to be converted to either a JPEG- or (like in this case) a GIF file.As a GIF file cannot contain more than 256 colours, the first thing you have to do is to change the palette. In Photoshop the 256 colour palette is called Indexed Color…. Change by choosingImage/Mode/Indexed Color… in the pull-down menu.

8) Photoshop will now ask you if you want to flatten layers. Say OK to this (GIF files can only contain one layer).
9) You will now be asked what your palette should be like. I always choose Exact or alternativelyAdaptive if Exact is not possible. But then again, selection of palette type all depends on what you need your logo for and which quality you want.

Color Depth you can leave as Other, and if you want your GIF to be transparent always set Dither toNone in order to be sure that you only get one background colour (the one to be transparent in your GIF).

When you have determined your settings, click OK.

10) You will now see your logo as a GIF file on the screen, and all you need to do now is to save it. However, if you want your GIF to contain a transparent colour, in Photoshop it is not enough to choose Save As… and select GIF. You will need to export your logo instead. In that case selectFile/Export/GIF89a Export….
11) To give your logo a transparent background, now simply click the background colour with the eyedropper tool. The background will now turn gray.

If parts of your logo also turn gray, you may choose to fill your background with a different colour (one that does not appear in your logo). Do this BEFORE you change palette (step 7).

When transparent colour has been selected, click OK and you will now be asked for file name. Enterfile name (.GIF) and click Save. Your logo is now ready to use!

Leave a Reply