Creating Spells with Photoshop

Hey folks, Janne is back but don’t tell anyone, it’s not official yet! I’m proud to present you the first real guest post on BBGameDesign. Today Doidel’s mission was to create “spells” for his fantasy themed game-in-development. Please tell us how!

Creating Spells with Photoshop

Many browsergame developers sooner or later come to the point where they must create spell graphics, may they be for attack, defense or buffing teammates. So did I, and my chosen tool turned out to be Photoshop 7, an old yet adequate version for a beginner. Though no knowledge of painting nor using Photoshop you’ll be able to create two spells alike mine within less than 3 hours. Just follow these four steps:

- Run through this tutorial (10 mins)
- And then run through this tutorial (10 mins)
- Read this in order to use “Lens Flare” with transparent backgrounds (5 mins)
- Create your own spells (1 hour per spell in my case)
- Check that your image has a transparent background, then click “File – Save for Web” and choose “PNG-24″ from the format list. This will save your image with a transparent background (By now, all modern browsers display PNGs correctly).

How to create an animated spell for my browsergame?

The basic idea is quite simple:

Either…
With javascript, preload all spell frames (A frame is a single image in this case, played one by another they become an animation) and iterate through them. These pictures will be displayed as a series for the user, and still you have a PNGs quality and transparency. It is recommended to use “Sprites” in this case, i.e. having the frame series within one picture. Use the css background-position property to iterate through the frames.

Or…
Use a javascript framework (e.g. jquery or mootools) and use the Fx libraries. With them you can move objects around, let them fade, resize them and much more.

All the best
Doidel

update You can see the spell in action now!