Introduction
Being a graphic designer quickly led my to few simple conclusions.
First thing I learned is that design is almost always connected to a certain level of frustration. When you’re like me, there’s always something that can be done better. The most difficult part is to let it go at the right moment and move to the next step. Fortunately, the feeling of satisfaction when your job finally begins to take shape, fully compensates all the pain. This is the moment when I usually remember why I love this job so much.
Second lesson is that you always have to stay put. You never know what challenge awaits you round the corner.
This part reminds me of a videogame :). You encounter numerous enemies and gain experience with each victory. Finally, when you start to feel invincible, something big emerges and takes the challenge up to a whole new level.
My skills were recently put to a test by very similar battle – and brother, it was a tricky one!
The job was to design a graphics for an iPad game – “Circuloid”. In this blogpost, I’ll try to guide you through the process of designing one of the game’s crucial elements – the bricks.
The job
At this stage, most of the game graphics were already made.
We had the menus ready as well as some of the interactive elements and a default level background. The assumption now was to create a set of dozen bricks divided to three major groups: rectangular, round and static.
Rectangular and round groups are the standard destroyable elements, while the static ones are indestructible, stationary blocks designed to interfere with the ball’s trajectory.
We established the default size of each element and I could start sketching.
The process
As you can see, the sketches are quite messy and ugly. Don’t worry, their job is to depict the overall feel of the elements – they don’t have to be pretty. For me, sketching is a crucial phase of each design process. At this point, I don’t have to limit myself. It’s time for my imagination to go crazy for a while ;).
After sketching a few bricks, I’ve finally started to get the hang of things. It was time to move the work to Photoshop.
Based on the sketches I started creating some random bricks.
The default size of rectangular blocks was 52×34px and round – 52px52px. I decided to make my canvas bigger so I could focus more on the details.
After a few hours, I had the first set of bricks ready:
To help the blocks stand out more against the background, I made them very vivid and colorful. It helped to create a positive contrast and therefore, made the elements more visible.
At this stage I was able to see my work in action and check if everything works as planned.
The colors turned out to be allright. Bricks were clearly visible and didn’t get lost in the background, even while moving. Definitely great news :).
The biggest problem were the shapes.
Here’s the issue:
Each block has either rectangular or round hit area. My graphics had to fit these shapes constraints, otherwise, the ball would bounce off the bricks in a weird way.
For example, the shape of this brick is too complicated:
Here’s the visible contour, from which you’d expect the ball to bounce off:
Here’s the physical area, from which the ball actually bounces:
You see the problem?
Another example:
This time, the shape is too round. Instead of hitting the rounded corners, ball would hit the invisible walls, making it look weird and confusing.
Seeing the bricks in game revealed also another problem.
As I mentioned before, I knowingly enlarged my canvas to focus more on the details. Unfortunately, after resize the graphics became too blurry and lost it’s consistency. As a result the visuals became less appealing.
Knowing all that, I decided to start again.
This time I set the canvas to 1:1 scale and began working. I reduced the amount of details on each brick and focused on making them more pixel-perfect.
After several attempts, I worked out the right style and began to create other bricks using the same methods.
Here’s what I came up with:
As you can see, the bricks are now less realistic and more cartoony. This style fits well with the mood of the game. It was definitely the right direction.
Following the same path, I started making other blocks.
The most difficult part was to create a proper design-process. After it’s mastery, creating further elements became almost a routine.
Here’s the final bricks-set from the rectangular and round groups:
As you can see, most of the rectangular blocks have twins in the round-group.
This procedure allowed for an easy increase in the number of blocks, thereby reducing the amount of work over the whole set.
Also, some of the bricks are animated.
“The statics”
Having the interactive elements ready, it was about time to create the static bricks.
These blocks belong to a special category. They had to be visually different from the other bricks not to confuse the player.
I decided to give them a metallic feel, so they’d look as if they were part of the background. I also added more details and depth to differentiate them from the interactive elements.
Here’s the result:
Conclusion
Designing a game graphics was an unique, tiresome, yet extremely satisfying task.
Like in a videogame – the battle was long, dangerous and bloody, yet I managed to get out of it alive, richer in experience, knowledge and with a set of new bricks tricks.
From now on, every next fight will be easier, shorter and more pleasant… At least until the next “Big Boss” ;).
I hope this blogpost will help you in your journey to becoming a better designer.
Dribbble
Boys and girls, I have two Dribbble invites to give away. If you want to get drafted, leave a comment under this post with the link to your portfolio. I’ll pick my favorites and let you know who I chose.
You have one week from today to participate.
PS. This is not a competition or at least not in a usual sense. Every Dribbble user is in a way responsible for his draftees, so I’ll choose the best from what I consider “the best”. Please don’t be sad if I won’t pick you – it doesn’t mean you’re a bad designer ;).
Cheers,
Tomek
It’s official – we have a summer fever. Last week we have launched Focusbar and today we present you another app for your Mac – HUDTube. It’s a super awesome tool for watching outside the box. You simply drag&drop YouTube, Vimeo or local clips to HUDTube and enjoy browser-free watching. There are also some other cool features like:
…with our new app – 
