7 March 2012

Free Game Art: Tank Wars!

This is free art – it is under a Creative Commons Attribution License.

Type: iPhone, iPhone Retina, iPad

Download the art here, or read on for an explanation.

Tank Wars

Pablo Ruiz over at the Ray Wenderlich blog has cooked up a tutorial about how to make a game similar to Advance Wars, so naturally I was asked to make a set of art for it.

Tank Wars free game art

Fight to your heart's content.

This game pack is an isometric view tile set, and is not to be confused with the War Tanks game pack, which is a top-down tile set. :]

Read more…

Tags: , ,

8 Comments

1 March 2012

iPhone/iPad/Desktop Wallpaper: March 2012: Flying Crow

This one has been swimming around in my head ever since October, when I created the orange-hued leaf wallpaper. March is a month for breezy days and dreams of flying, so the crow got to come out to play.

march-2012-flyingcrow-calendar-ipad-iphone-desktop-wallpaper

Multiple screen resolutions and non-calendar versions can be found at the bottom of the post.
Read more…

Tags: ,

2 Comments

23 February 2012

Illustrator Tutorial: Add Sparkles In Less Than a Minute

Program: Adobe Illustrator CS4
Level: Beginner

gems

Which would you rather own?

A sparkle or two can really add some pizazz to your illustrations and icons.

But making those sparkly effects takes a lot of time, doesn’t it?

That’s what I thought – until I stumbled upon this really easy method to make editable sparkly shapes.

Follow along to add this to your bag of tricks!

1. Make An Oval

oval

Drag out an oval of any size or shape.

Choose the Oval tool from the Tools panel, or type the shortcut L.

Drag out an oval.

2. Pucker Up!

pucker and bloat to make a sparkle shape in Illustrator

Pucker and Bloat

Go up to Transform>Pucker and Bloat.

Drag the slider to the left (Pucker). Look at that – a sparkle shape!

Adjust the Pucker until you are happy with your sparkle.

pucker and bloat to make a sparkle shape in Illustrator

Now, wasn't that easy?

 

3. Add Some Bling!

ring with sparkle

Shiny shiny...

Now you can rotate, scale, and copy to your heart’s content to add that extra little something to a shiny scene.

 

4. Advanced Sparkles

So that was cool, but if all your sparkles look the same they get boring. It’s actually really easy to add some variability to your sparkles, and the secret lies in the anchor points.

another sparkle shape

Change it up by adding and moving anchor points

Drag out another oval.

Now, press the “+” key and click on the oval in several places to add anchor points.

Transform the oval with Pucker and Bloat as before.

Notice how the extra anchor points add extra spines on the sparkle shape.

Try this again after moving around the anchor points.

Click this to edit your sparkle

Best of all, it’s completely editable!

Just click “Pucker and Bloat” in the Appearance panel of your object to open the menu and tweak your sparkle.

 
Below are a variety of sparkle shapes I created and their settings. Note that the red outline is of the altered ellipse shape so that you can see where the anchor points are.

sparkle variants Illustrator

Make a variety of sparkle shapes!

Now go forth and sparkle!

Tags: ,

One Comment

16 February 2012

5 Tips For Making A Game App Icon

When making a game app icon for the first time, many developers are working on a budget and decide to make the icon themselves.

Everyone can make an icon. Learn how to make a good one!

Of course, beginners make rookie mistakes.

These mistakes are very common, but also easily avoided.

I’ve put together this very short list of tips designed to help you create an attractive, eye-catching icon right from the start.

At the end, I will show how these rules apply to one of our own apps, Math Ninja.

We’re focusing on games here – other apps are a whole different beast. With that said, on to the tips!

1. Don’t Use Text

No text in icon

Just say no.

The number one most common rookie mistake is slapping the name of the game all over the icon.

The reason people make this error is due to a fear that the customers won’t know what the game is unless they see the name in the icon. This is completely incorrect.

Remember, the name of the game is below the icon on the iPhone or iPad. The user sees it right there, so having it in the icon is redundant.

Text on an icon just adds clutter. It might look okay at a large size, but when small it looks busy and is hard to read anyway. So remove that text!

 

2. Use Your Main Character

If he's the star of the show, he should be the star of the icon.

People associate the game with the main character, so use it! If there are several main characters, choose only one.

Remember, it’s a small icon and the shapes on it need to be instantly recognizable.

To that end, if your character is not small and compact, think about using just the character’s face rather than the whole character.

Read more…

Tags:

4 Comments

9 February 2012

Free iPhone/iPad Game Art: Tower Defense Robot World!

This is free art to use in any personal or commercial project. The art was made by Oray Studios if you would like to contact them or credit them!

Type: iPhone retina

Download the art here, or read on for an explanation.

Tower Defense Robot World

Tower defense free game art for iPad and iPhone

Robots attacking robots... complete with explosions!

It’s about time we had another free set of game art around here!

This time we have a great set of art by Oray Studios. It was made for an upcoming tutorial on the Ray Wenderlich blog.

The set contains attacking and defending robots straight out of a science fiction world, geared towards a Tower Defense game.

In this game pack you will find moving robots, rotatable towers, bullets, explosions, and a background. The vantage point is a 3/4 view, so each robot has sprites for moving up, down, right, and left (and since they are animated, multiple sprites for each direction), and each tower can face and shoot in 8 directions.

Read more…

Tags: , ,

12 Comments

1 February 2012

iPhone/iPad/Desktop Wallpaper: February 2012: Moose Duo

Ah, February! The month that we get to show our love of chocolate–I mean show our love with chocolate.

If I were a moose (and I have pondered such things), I would of course not know about chocolate. But I am certain that I would have a favorite food, and the way to my heart would, naturally, be to find me that food.

Moose Duo Desktop iPad iPhone Wallpaper

Multiple screen resolutions and non-calendar versions at the bottom of the post.

Read more…

Tags: , ,

Leave a Comment!

26 January 2012

Roundup 3: Games Made With Free Art!

A new crop of games made using the free art on this site have been released. This time, the games featured are not only for iOS; some are for Android and even Windows Phone 7. Read on to see how other developers are using the free art!

Johnny Banana

Johnny Banana

Johnny Banana

by Tobias Hassenkloever
using Monkey Platformer free game art pack

Johnny Banana is a classic Mario-style platform game, with the monkey character collecting bananas, avoiding traps, and defeating enemies. The Monkey free game art is combined seamlessly with other art to create a game with a variety of backgrounds and landscapes.

It is available for both iOS and Android, and the developer plans to add Ubuntu to the list soon.

Find out more here.

johnny banana screenshot

Screenshot of Johnny Banana

 

Tilt Tank

Tilt Tank icon

Tilt Tank

by James Buckley
using War Tanks Top-Down Tileset game art pack

This game is a top-down tile-based scrolling game. You control tanks and have to fight enemy tanks and destroy gun turrets.

The developer used the tank art set as a starting point and added tiles for other textures (like roads).

Find out more here, or try out the lite version.

Tilt tank screenshot

Screenshot of Tilt Tank

 

Monkey!

monkey!

Monkey!

by John Rosewell
using Monkey Platformer free game art pack

Monkey! is a brain/puzzle game where you see a sequence of colors and have to tap the colors in the right order. 

The monkey character from the Monkey Platformer game pack is in the middle, cheering (or laughing at you?) as you complete the challenges.

Find out more here.

monkey screenshot

Screenshot for Monkey!

 

Space Battle

space battle icon

Space Battle

by Konstantinos Chalvantzis
using Space Flier free game art pack

Chalvantzis used the Space Flier art to create this shooter game made for Windows 7. 

Shoot or dodge asteroids and alien ships to earn points and stay alive as long as possible!

Find out more here.

Space Battle screenshot

 

Want to make a game with free art?

It’s a great way to make your first app without spending a lot of money on art. Find all of the free art sets on this site here – there are tile sets, platformer sets, scrolling sets… go see if one of them fits that game idea you’ve been thinking of!

And when you finish a game, I’d love to see it! You can use my Contact form to send me a link to your game or app. I will likely feature it in a future roundup!

Tags:

Leave a Comment!

19 January 2012

How To Use Opacity Masks In Illustrator

Opacity masks are black-and-white layers that adjust the transparency of the artwork they are applied to. Usually, black is 0% opaque, meaning the artwork will be fully transparent. White is 100% opaque, and greys are in-between.

The benefit of opacity masks is that you can make an entire shape or group of shapes partly or fully transparent in areas (rather than simply using a color-to-transparent gradient fill, which only works if it’s a single shape). You can also adjust the transparency in irregular areas.

They are similar to Layer Masks in Photoshop, so if you’ve used those, they work very similarly. Even if you haven’t, follow along and you will soon learn how to apply opacity masks!

blue swirly egg illustration

What does it hide?

See this egg?

There’s actually a dragon inside, but you can’t see it yet.

As everyone knows, dragon eggs become more transparent as the dragon gets closer to hatching.

This egg is close to hatching, so we need to make it transparent so that the dragon inside can be seen.

We are going to make that transparency happen with an opacity mask.

using opacity masks in illustrator

Take an opaque egg and make the middle translucent!

To follow along, first download this Illustrator file with the dragon and his egg. You will need to know how to use the pen tool as well as work with gradients. If you need help with those, go through these tutorials first:

How To Use The Pen Tool In Illustrator
How To Use Gradients In Illustrator

Read more…

Tags: , , ,

Leave a Comment!

12 January 2012

Illustrator Quick Tip: How To Copy Appearances Between Objects

Often you have an image with several shapes in it, all which need to have the same Appearance (this just means the combination of Fills and Strokes applied to an object, and it’s found in the Appearance panel). Most of the time you aren’t quite sure what the appearance should be ahead of time, or you need to change the appearance – either way, you will need to copy the appearance of one shape over to several other shapes.

Even if the appearance is easy, let’s say a single Fill color and Stroke, this will take up too much time if you go to each shape and change its appearance manually in the Appearance panel.

If you have a complicated Appearance, like a gradient fill, a texture fill on top, and a drop shadow, it would take even longer.

Illustrator copy appearances white clouds

All of these need the same Appearance

For example, see the clouds to the left.

I created the shapes with a simple white fill, and then played around with the appearance.

copy_appearances_panel

Fortunately, it's easy to copy this Appearance over to the other shapes.

Finally, I decided that the appearance needed to be as shown to the left, with a gradient fill and a white transparent gradient fill with an Offset Path Effect applied (to create a gradient stroke effect).

Then I needed to apply that Appearance to the other shapes.

 
Doing this manually would be a huge pain!

Fortunately there is an easy way in Illustrator to copy Appearances between shapes.

Illustrator copy the appearance of objects

Easy as pie, thankfully!

Go over to your Layers Panel, and find the shapes. Here, the three objects with white thumbnails are our clouds.

See the circle to the right of each shape name? That is its Appearance circle.

In (1), you can see that one of the paths has a filled-in grey circle, and the other two cloud shapes have a white circle. The filled-in circle means that the Appearance is more than just a simple Fill and Stroke. We want to copy this Appearance to the other two paths

To copy the Appearance of the third path to the other paths, simply hold down Option and drag from the filled-in circle to another circle (2). Do this for any shapes you want the Appearance copied to.

The Appearances will now be the same (3).

If you do not hold down Option, you will simply move the Appearance from one shape to another rather than copying it.

As you can see below, all three clouds now have the same Appearance – and it took only seconds to make the change!

Now you can easily copy the appearance to as many shapes as you want!

Tags: , ,

One Comment

5 January 2012

How To Set Images As iPhone or iPad Wallpapers

Some websites, including this one, offer free iPhone and iPad wallpapers. But how do you get the image onto your iPhone and set it as the wallpaper? Read on to find out!

The same steps apply for the iPad as for the iPhone.

Get an image or photo and set it as your iPhone or iPad wallpaper

Get an image or photo and set it as your iPhone or iPad wallpaper


Read more…

Tags: , , ,

Leave a Comment!