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:

One Comment

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: , , ,

5 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!

1 January 2012

iPhone/iPad/Desktop Wallpaper: January 2012: Leaping Deer

Happy New Year! I hope all of you toasted your way into 2012 with good friends and fun times.

There are a lot of deer where I live, and a lot of hills and mountains. I love the feeling at sunrise on a crisp, clear morning: the quiet reflection and the hopeful anticipation. The same feeling as beginning a new year.

january-12-leapingdeer-calendar-desktop-wallpaper

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

Read more…

Tags: , ,

One Comment

22 December 2011

Free iPhone/iPad Game Art: Rocket Mouse

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

Type: iPhone retina

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

Rocket Mouse

This is a huge game pack created for a tutorial on the Ray Wenderlich blog.

rocketmouse_free_iphone_game_art_sprite

Make a game with a flying mouse!

The tutorial shows how to create a game similar to the awesomely fun Jetpack Joyride, where the main character has a jet pack and can fly around to collect coins and avoid obstacles while a repeating, variable background flies by.

This art is especially suited for games where you need a repeatable background, a main character who can fly, objects to jump over and avoid, or coins to collect!

Of course, you can pick and choose which pieces of art you want and put them into another game.

rocketmouse_free_game_art_mockup

Rocket Mouse dodges cats, runs over dust bunnies, and collects coins!

Read more…

Tags: , , , , , ,

2 Comments

14 December 2011

Roundup 2: Games Made With Free Art!

Several more games are in the app store that were made with free art from this site! Here’s a rundown of the latest – with Christmas coming up, you will notice that Santa made his appearance more than once!

Christmas Sledging

Christmas Sledging


by Hyperion Games
using Pet Santa free game art pack

This game uses the Santa with the sleigh from the Pet Santa game pack. Santa starts on-screen but exits to the right, leaving Hyperion Games’ character Leebo to follow on a sled, with a Tiny Wings style gameplay. Santa’s head from the game pack shows up in the training scenes.

Find out more here.

christmas sledging

Screenshot of Christmas Sledging

 

Christmas Journey

Christmas Journey


by Petar Dinev
using Pet Santa free game art pack

Santa is featured in this game, this time with his arm waving! Santa rides the hills, similar to Tiny Wings, gathering objects, avoiding obstacles, and dropping presents to hopeful people.

Find out more here.

Screenshot from Christmas Journey

 

Math Plus Minus

Math Plus Minus


by Peter Easdown
using Squirrel Attack – Catapult free game art pack

Peter Easdown follows up Tap Times Tables with another game to help kids learn math. The squirrels and backgrounds from the Squirrel Attack Catapult Game art pack are used to give the game a cheerful look as kids work on addition and subtraction.

Find out more here.

Screenshot of Math Plus Minus

 

Winter update of Leebo Jump Seasons

Leebo Jump Seasons

by Hyperion Games
using Pet Santa free game art pack

Hyperion Games winterizes one of their apps, Leebo Jump, with Santa from the Pet Santa game art pack. Leebo the fish jumps from platform to platform, and Santa flies through every so often.

Find out more here.

Screenshot from Leebo Jump Seasons

 

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:

2 Comments