Graphics Zone - Photoshop 5 12

HornyStory

Photoshop 5 Course Part 12

by BarryHilton, Adult NetSurprise

Designing transparent Gifs in Photoshop
This week we are going to design a transparent Gif using Photoshop's GIF89a export.

First we want to create a new image. Go to the 'File' menu at the top of the screen and choose 'New' from the menu... From the menu that pops up enter 50 pixels width, 50 pixels height, and 72 resolution.

We will use a black background (this is the color we will make transparent), so change your foreground color to black by clicking the little boxes on the bottom left of the color selector. Then select the 'Paint' tool from the 'Tool' menu and click inside your image to make your black background.

Then add a new layer to your image. Click on your 'Background' layer then click the create new layer button at the bottom of the 'Layers' menu. Double click on this new layer and rename it 'Button'.

We will create a round transparent button, so... Select the 'Elliptical Marquee' from the 'Tool' menu, entering a Style of 'Fixed Size' and a height, width of 50 pixels and untick (not selected) anti-aliasing in the 'Marquee Options' menu.

Now click inside your image and drag your marquee to the middle of your image so the marquee edges touch all sides of your image.

Choose red from the 'Swatches' menu. Then select the 'Paint' tool from the 'Tool' menu and click inside your marquee to make your red button.

Now add a bevel effect to our button... Right click on your 'Button' layer and choose 'Effects' from the menu. De-select 'Drop Shadow' and go to the 'Bevel and Emboss' menu. Enter values for highlight mode 'Screen, opacity 75%, shadow mode 'Multiply', opacity 75%, style 'Inner Bevel', angle 135, depth 5, blur 5 and 'up' selected.

If you want a more realistic effect you can change the black color (click the color box) to a very dark red.

Now we want to add 'GO' text to our button... We want our text to be yellow so first select yellow from the 'Swatches' menu.

Then select the 'Text' tool from the 'Tool' menu. In our example we are using the 'Arial' font, size 30 pixels and tracking at -100.

Type 'GO' and press OK.

If you need use the 'Move' tool on the 'Tool' menu to click and drag your 'GO' into the center of your button

Now we are going to make our button transparent... First we need to change the color mode of our image. Go to the 'Image' menu at the top of the screen and select 'Mode' then 'Indexed Color'. On the menu that appears click OK to flatten your image. Don't forget if you want to edit your button later save it first as a psd file before changing the color mode.

Now go to the 'File' menu at the top of the screen, select 'Export' then 'GIF89a'. This will bring up the 'GIF89a Export Options' menu. The menu will have a picture of your button and all the colors your button uses separated at the bottom.

Untick (not selected) 'Interlace'. Then to make your button's background color transparent just move your cursor over the picture of your button (your cursor will change to a 'Color Dropper') and click on the black background of your image.

Then Click OK to save your transparent Gif! To see our example click here.

You can also use this to make transparent text, just make sure that your text has 'Anti-aliased' unticked and turned off!!!

This week's To-Do Assignment:
Follow this weeks tutorial and make a transparent gif button.