Page 1 of 1

Use Photoshop to Create Transparency in PNG files Create transparency without colour keying for SDL_Image Rate Topic: ***** 1 Votes

#1 stayscrisp  Icon User is offline

  • フカユ
  • member icon

Reputation: 1009
  • View blog
  • Posts: 4,209
  • Joined: 14-February 08

Posted 18 June 2009 - 12:27 PM

This tutorial will cover a basic way of creating PNG files with an alpha channel for transparency. These can be loaded into SDL_Image for transparency without colour keying. We will use photoshop for this.

PNG with transparency

I have attached a file for us to use, so download it and open it in photoshop, as you can see the background is all one colour, this is quite important to get this method to work correctly.

Most sprite sheets found online will have one colour as a background so it shouldn't be a problem.

Attached Image


For this we will use the Magic Wand Tool Attached Image

Select this tool then click on the background of the image, depending on where you clicked it should select the outline of the character plus the outline of the image itself. If it does not click somewhere else on the green background until it has selected.

Attached Image


Once you have the outline of the image and character selected click the select drop down menu or click CTRL+SHIFT+I to inverse the selection

Attached Image

Now copy the selected character by choosing copy from the drop down edit menu or pressing CTRL+C then paste the image using the drop down edit menu or pressing CTRL+V.

It will paste into a new layer, now select your background layer in the layers list, right click and delete this layer.

Attached Image

You now have a PNG with a transparency, simply choose save as and PNG file. Now when you load this image using SDL_Image it will automatically have transparency and wont have that awful colour keyed look :)

Hope this helps, to get started with SDL check out my tutorials in the Game Programming Tutorials section of D.I.C.

Any questions or comments welcome.

Is This A Good Question/Topic? 2
  • +

Replies To: Use Photoshop to Create Transparency in PNG files

#2 TripYR  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 08-March 11

Posted 08 March 2011 - 11:02 PM

I have a suggestion.
Maybe you could have provided the PNG photo, so viewers could see the finished product.
I love this tutorial, it's quick and simple.

This post has been edited by TripYR: 08 March 2011 - 11:03 PM

Was This Post Helpful? 0
  • +
  • -

#3 aaron1178  Icon User is offline

  • Dovakiin, Dragonborn
  • member icon

Reputation: 169
  • View blog
  • Posts: 1,303
  • Joined: 22-October 08

Posted 04 March 2012 - 06:47 PM

Great tutorial stayscrisp, to bad I only just found it :)
Was This Post Helpful? 0
  • +
  • -

#4 KloqKlap  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 29-April 12

Posted 29 April 2012 - 02:36 PM

gj
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1