Thursday, July 2, 2015

Graphics production

Hello readers! If there are any.

Long time, sorry!
Had a small "burnout" or something like that. Gladly nothing too serious.

Aaaanyways, back to business. Someone asked about graphics a little while ago. I thought I could write a little bit about the subject. So, today I'm going to share some of my SUPER-SECRET working methods!

Okay, I was already done with my graphic asset when I figured: "Oh darn, I could have taken some screenshots for the blog" So the "making of" is not perfect but should give the idea of my methods.


THE BOOTH?

I need this... what do you call it... restaurant booth? Not sure that is correct. Anyways, since it would be quite symmetric I thought I'll use Adobe Illustrator for the shape. This is totally optional, you can do this in Photoshop or even Paint. I decided to go with Illustrator for that so this is what I made:

Alright so there you can see the booth, the one you sit at, right? Does not look much yet, so I'll just copy and take it over to Photoshop. I would make the body wooden and the cushion would be fabric.

I select the center part and apply a pattern to it. Here I'm using my own wood pattern/texture.

TIP: Take your time to create amazing textures/patterns, I use them A LOT so it will reflect how your assets are going to look.

Okay it should look somewhat like this:


I think the texture is a bit too dark and has too much contrast in this case so once I apply the pattern I rasterize the layer and open the levels editor (ctrl+l). I adjust it a bit to make it not stand out too much. After I'm happy with the contrast I open the layer style panel and add a small inner shadow to it.

Once I'm done I repeat the steps for the wooden part at the bottom, but I'll make it horizontal instead of vertical.

Okay that's done! Let's move to so called cushion part of my beautiful to be booth.
I select the red area and apply a gradient to it:


After that I rasterize the layer again. (I know it's not very common practice and I usually avoid rasterizing. But if you know what you're doing then it's fine. I always keep a backup of my base assets so I won't alter them.) Or do I? Mmmm....

But let us continue!
It looks a bit... lifeless don't you think? It needs something, maybe a soft base-texture would liven it up a little? To do so I open the layer style panel again, go to "Pattern Overlay" and choose something that looks like a fabric. Photoshop has some cool default patterns, I'm using one of those here for the base. I select the pattern, drop it's opacity to around 40% and set the"Blend Mode" to "Color Dodge" and it looks something like this:


It is starting to shape up! Though it still needs something, really does.

By now you might figure what to do next: Rasterize and open the layer style panel again. It's time for round two. Add a small subtle "Inner Shadow" and select the "Pattern Overlay" again. I use my custom texture here, it gives this dirty feel to it. I want it to be subtle though so I play with opacity and try various blend modes.

This is how it looks now:


Not bad!
Since I'm going to keep this rather simple I'm not going to brush more details to it. This will appear in the background so I don't want it to bee too detailed... excuses! :D

Okay, let's give it some color. You can create adjustment layer or just bring up the "Color Balance" panel and start tweaking. In my current world, I create all the assets gray-scale and color them in game with colored mist and lights. Though in this case I want to have a little color for the cushion. So I pop up the "Color Balance" and start tweaking the colors.


Once I'm happy with the colors I might want to sharpen the asset a little bit. You can do this by going Filter -> Sharpen -> Smart Sharpen...

I don't use it always though, and be careful if you use it. It's a good way to ruin your assets making them too sharp. Usually it's a good idea to stay somewhere between, same goes with the contrast, colors and everything. Don't over-do them! They might look pretty for a little while but trust me, it is the long run that matters!

I also cook a normal map for the asset if it's near the lights in the game. But yeah, this is mainly how I work with the assets. I also do lots of drawing and painting, but for symmetric assets I rather go with Illustrator.

After some tweaking and adding normal map and shadow this is how it looks in the game:
















Overall being one man band, I need to produce everything quite fast as I'm responsible for coding, music, writing, marketing etc. Being aware of that is a strength and so you must plan your methods smartly. I'm personally very happy how everything looks. It's worth the effort, and hopefully people can appreciate that!

Thank you for reading! :)

No comments:

Post a Comment