Creating Transparent GIFs with Photoshop - MeraForum Community.No 1 Pakistani Forum Community

MeraForum Community.No 1 Pakistani Forum Community


MeraForum Community.No 1 Pakistani Forum Community » Graphics Tutorial » Adobe photoshop » Creating Transparent GIFs with Photoshop
Adobe photoshop !! Adobe photo shop lectures !!

Advertisement
Post New Thread  Reply
 
Thread Tools Display Modes
(#1)
Old
QUEEN OF HEARTS ...'s Avatar
QUEEN OF HEARTS ... QUEEN OF HEARTS ... is offline
... Deserve Only The Best
 


Posts: 13,921
My Photos: ()
Country:
Star Sign:
Join Date: Aug 2008
Location: ★ Down In The Hell, Up In Da Sky, In Everyone's Heart But Still Invisible ! ★
Gender: Female
rose Creating Transparent GIFs with Photoshop - >>   Show Printable Version  Show Printable Version   Email this Page  Email this Page   09-30-2008, 09:43 PM

Creating Transparent GIFs with Photoshop


This tutorial will show you how to create transparent GIFs. I used PhotoShop 4.0 for Windows. Some things may be done differently with other versions. Although I won't go into detail here, I used Kai's Power Tools 3.02 to create the background texture and to make it seamless.

Start off by opening your texture file (see figure 8.1). This is necessary as you'll need to choose the predominant color from it to use as the color you'll set to transparent.

figure 8.1


Open a new file with File, New. I opened one at 400x200x72dpi.

NOTE: Open the file as an RGB even though you'll change it to Index later. This is so you can use any and all of the special filters you may choose to.


Select the eyedropper tool and use it to choose the predominant color from your texture image. What this color will be, I can't really say. This may take a little trial-and-error on your part. You'll only be able to tell if you've chosen a good color once you see the transparent GIF against the background tile. If you've chosen the wrong color you'll see a fringe around the GIF. If there is an apparent fringe you'll have to start over using another color for the background.

Make the new (empty so far) graphic current and, while holding down the ALT key tap the BACKSPACE key. This will fill the graphic with the color you chose from the texture image.

NOTE: We're obviously creating a new GIF here. The same steps used later on in this tutorial can be used to make an existing image into a GIF with a transparent portion.


Choose a color for your text and use the text tool to enter some text. I entered the word, Transparent (how inventive), in Fujiyama (a font that came with Corel DRAW! 3.0) at 90 pixels. I set bold and anti-aliasing ON. Hold down the CTRL key and use the mouse to center your text (see figure 8.2).

figure 8.2


For effect I'll add a drop shadow using Alien Skin's Eye Candy (see figure 8.3). This is only for demonstration purposes and has no outcome on the final transparent GIF.

figure 8.3


Here's where the fun begins!

Select Image, Mode, Indexed Color. Photoshop will inform you, via a warning message, that it must flatten the layers. If you think you might need to change this image in the future you'll probably want to click "Cancel", save the image as a PSD (Photoshop file) to preserve the layers, and then repeat the process this time letting Photoshop flatten the layers.

At this point a dialog box will appear that will enable you to select the palette, color depth, number of colors, and dithering mode. All of these should be experimented with to yield the best quality image. I can't really tell you which will work best as it's somewhat subjective and dependent upon the image you're creating.

I chose Adaptive, 8-bit, 256 and none for this particular image.

I probably could have used less colors and ended up with a smaller GIF with the same quality because there's only the text and the shadow to deal with. Images with more details and colors would yield different results.

Click "OK".

Now that the image has been transformed into indexed mode you can "Export" it as a GIF file.

Select File, Export, GIF89a Export.

This will bring up the GIF89a Export Options dialog box (see figure 8.4)

figure 8.4


At the middle right of the dialog box you'll notice three icons. The third is of an eyedropper. It should be darker than the other two meaning it's active. If it isn't, click on it.

With this tool active click on the preview image somewhere on the color you want to be transparent.

The color you selected should be replaced with gray (see figure 8.5) in the preview window NOT in the actual image

figure 8.5


In the GIF89a Export Options dialog box (figure 8.4) you also have the option of saving your GIF as Interlaced. This decision is up to you. Personally I prefer not to use interlacing so I normally de-select this option.

NOTE: If you look closely you'll see a fringe of blue, the background color I chose from the texture. This is present due to the anti-aliasing of the text and the shadow. You could remove this fringe using various methods but I find it easier to create the GIF against the appropriate color. Choosing the right color will allow the transparent GIf to blend seamlessly (pun intended) into the background.


When you click "OK" the Export GIF98a dialog box will appear. Give your GIF a filename and click "Save".

Your GIF is now ready to be uploaded to your web server.

Click here to see what my finished GIF looks like on the tiled background.


That's it..

 



Reply With Quote Share on facebook
Sponsored Links
(#2)
Old
AYAZ's Avatar
AYAZ AYAZ is offline
 


Posts: 12,369
My Photos: ()
Country:
Star Sign:
Join Date: Aug 2008
Location: Karachi
Gender: Male
Default >>   Show Printable Version  Show Printable Version   Email this Page  Email this Page   10-03-2008, 02:22 AM

great sharing thanks its very usefull also in making forum signatures

 







ALLAH FARMATA HAI :
AEY BANDEY JO HUA
WO ACHA HUA .
JO HORAHA HAI ACHA HO RAHA HAI.
JO HOGA WO BHI ACHA HOGA.
TERA KIYA GAIYA JO TU ROTA HAI
TU KIA LAYA JO TU NE KHO DIYA.
JO LIYA YAHIN (DUNYA) SEI LIYA
JO DIYA YAHIN (DUNYA) PE DIYA
JO AAJ TERA HAI PEHLAY KISI AUR KA THA
AUR KAL KISI AUR KA HOGA.
TABDEELI KAINAAT KA MAMOOL HAI
BAS TU WO JAMA KAR JO TU SATH LEI KAR JANEY WALA HAI
YANI NAIK AMAAL.


(#3)
Old
Hussain Hussain is offline
Bas Ya Hussain
 


Posts: 30,796
My Photos: ()
Country:
Star Sign:
Join Date: Sep 2008
Location: Rockstar World
Gender: Male
Default >>   Show Printable Version  Show Printable Version   Email this Page  Email this Page   10-03-2008, 12:22 PM

wow

nice thread

 



Hussain Ke Dushman Ki Sab Se Bari Baat Yeh Hai

Ke Woh Hussain Ka Dushman Hai...

(#4)
Old
[email protected]$H C@$H is offline
Im No Superman
 


Posts: 372
My Photos: ()
Country:
Star Sign:
Join Date: Aug 2008
Gender: Male
Default >>   Show Printable Version  Show Printable Version   Email this Page  Email this Page   01-23-2009, 09:39 PM

thx vey easy
good 1

 




I'm Not EVIL
I'm Just
Up to NO GOOD ]
(#5)
Old
Irfa Irfa is offline
 


Posts: 1,110
My Photos: ()
Country:
Join Date: Apr 2009
Gender: Female
Default >>   Show Printable Version  Show Printable Version   Email this Page  Email this Page   04-25-2009, 04:17 PM

nice

 







Little Fairy,
Shine so bright.
Little Fairy,
Show your light.

Little Fairy,
I’m amazed.
Little Fairy,
You seem to blaze.

Little Fairy,
I love your allure.
Little fairy,
You are so pure.

Little fairy,
In case you flee,
Little fairy,
First shine on me.


(#6)
Old
LAMS LAMS is offline
 


Posts: 9,603
My Photos: ()
Country:
Star Sign:
Join Date: Jul 2010
Location: KARACHI
Gender: Male
Default Re: Creating Transparent GIFs with Photoshop - >>   Show Printable Version  Show Printable Version   Email this Page  Email this Page   07-21-2010, 12:39 AM

nice
thx for shairing

 



(#7)
Old
(‘“*JiĢäR*”’) (‘“*JiĢäR*”’) is offline
 


Posts: 43,615
My Photos: ()
Country:
Star Sign:
Join Date: Jul 2010
Location: © ℓ ợ Ş ệ → тớ → µг ↔ ♥
Gender: Male
Default Re: Creating Transparent GIFs with Photoshop - >>   Show Printable Version  Show Printable Version   Email this Page  Email this Page   08-24-2010, 10:51 AM

nice...

 







(#8)
Old
ღƬαsнι☣Rασ™ ღƬαsнι☣Rασ™ is offline
 


Posts: 29,879
My Photos: ()
Country:
Star Sign:
Join Date: Sep 2010
Gender: Male
Default Re: Creating Transparent GIFs with Photoshop - >>   Show Printable Version  Show Printable Version   Email this Page  Email this Page   08-16-2011, 12:26 PM



-‘๑’- шОщ -‘๑’-
..:: GоОd pО$т ::..
THAЙК$ FОЯ $HAЯЇИG

 



●❤ღ Dяєaм Lоvєґ ღ❤●






Post New Thread  Reply

Bookmarks

Tags
creating, gifs, photoshop, transparent

« Previous Thread | Next Thread »
Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off


All times are GMT +5. The time now is 04:08 AM.
Powered by vBulletin®
Copyright ©2000 - 2022, Jelsoft Enterprises Ltd.

All the logos and copyrights are the property of their respective owners. All stuff found on this site is posted by members / users and displayed here as they are believed to be in the "public domain". If you are the rightful owner of any content posted here, and object to them being displayed, please contact us and it will be removed promptly.

Nav Item BG