Category Archives: Art

Creating Textures from Stock Photos

Creating textures for a model can either be ridiculously easy or devastatingly difficult, depending on the complexity of the model, the UV mapping of the model and the available textures. For this project I was really interested in creating our own texture assets. This means photographing or painting the textures ourselves. And since I’m not much of a 2D artist, I went down the photography road.

We had to establish the visual design of the game and a general idea of which models would be present in-game in order to decide which textures would be needed. After we had a list of various game objects and an idea of the architecture and different types of buildings in the game environments, I could proceed to jot down a list of textures that would be necessary. Then I simply took half a day of walking around town photographing the materials on my list. For example: brick wall, asphalt, ventilation system, window, door etc.

The camera I’ve been using is a Nikon D3100, a pretty standard  DSLR camera with a basic 55mm lens. This is one of the photographies I collected. It’s a simple grid I found on the window of a storage room door.

So now we’ve got the stock photo. What next?

Camera lenses are concave, like the human eye. Thus, straight lines will be bent in the photography if the photo was taken up close, as you can see on the image above. It’s kind of bulging. In order to make a decent texture out of it, we will need to process it quite a bit in an image editing program. In this case I’m using Photoshop which has something called Lens Correction (found under the Filters tab) which fixes this issue, and even has predefined settings for my specific camera.

Here’s the result after using Lens Correction. You can probably spot the difference.

Fixing the white balance

I took this image on a cloudy day and even though I tried to fix the white balance in the camera, but the image still came out quite pale and bluesy. To fix this I’m doing the steps explained in this tutorial basically using an adjustment layer for Levels and eye dropping the dark and bright portions of the image.

Result.

Creating a repeating texture

In the case of this particular texture, lens correction might not be absolutely necessary but I still use it just in case. The reason it might not be necessary is that I will now cut out a small portion of the image and create a repeating pattern to make it into a usable texture.  I then remove the spaces between the grid loops and add a green background color just to give you the idea.

This particular texture is supposed to be the mesh of a fence. So I will have to shrink it a bit horizontally to make the holes in the mesh uniform. After this I simply use the Filter > Offset function to make the texture seamless. This tutorial describes the basics of the technique but it’s really up to you to fix the details depending on the complexity of the image. I used a combination of the Brush Healing tool and the eraser which fixed this texture up nicely.

Here’s the final texture map.

And here is the texture applied on a 3D fence in Autodesk Maya.

Again, it’s not always the same for every texture. This particular one was very easy to create. You always find some wrinkles to iron out in ways you have to invent in the moment., but I hope this post provided some insight on how we create some of our textures.

– Kim

Creating some concept art

After the thumbnails for a specific scene or object has been created, we verify it with our graphics lead, Lukas. If necessary, we discuss the various pictures in the thumbnail with Tim, our game designer, to decide which concept would work in the game, which parts we should continue working on etc. When we’ve decided which concepts seems the most interesting and suitable, we finish the verification step and continue by making the actual concept art.

The biggest issue for me was to minimize the time spent on actually drawing the concept art, as I am not an artist in my own right. Finding a work process that would work for me was quite a challenge and each of the concept images made so far has ranged between 2-4 hours in the making.

concept1
Factory designed for a certain level in the game

I’ve been working mainly with the environments and architecture of the city that is the game world. The city, which is typically cyberpunkish, is divided into three vertically built layers: the top plane for the upper class citizens, the middle plane for trade, markets and middle class citizens, and the bottom plane for the working class and poor people, filled with slums, industries, smoke and dirt. The bottom layer is the part of the city we’re focusing on at this moment of the development.

The slum environments will look kind of like the industrialism of the early 1800’s: brick buildings, high chimneys spewing thick smoke, tall windows and dirty streets. I photomanipulated the picture below by adding in some buildings and factories to visualize how the people would have had to build their homes in chunks right next to the industries polluting their environment, because of lack of space and to portray the desperation of the people living there.

concept2
Concept art for residential area.

For my other artwork, I created 3D scenes in Maya and used them as references for keeping the perspective correct, as can be seen in the concept picture below displaying a market street in the slums. I have used various other references from image-googling keywords like “slums”, “markets” and “stand” just to get a sense of the details needed to portray the scene and the looks of a cyberpunk market.

One obstacle in working with cyberpunk is the amount of detail that needs to be put into the environment. The image I have of a cyberpunk slum is that everything has been built on top of eachother – vertically – due to the lack of space to build new structures. It’s a challenge to portray this in any authentic way.

concept3
Concept art of market street.

The next step in the graphics department will be to create more general concept art for the specific objects in the game levels. We will probably write another post about that in the future.

– Kim Jonsson (technical artist)

—————–

Like Kim said, when the lead technical artist and the game designer have agreed upon a thumbnail, the process of making the concept art begins. I bet you have a certain opinion of what concept art means but for us it could mean a bigger, more worked on image. It could involve colorisation or adding more details. Also, it could just be to clean up the previous sketch. A concept art image is not as restricted in time as the thumbnail sketches, however, the time given is not infinite.

When drawing the concept art for the police and the weapons, I had been given feedback from the leads on what they liked. The final results were a combination between three or two different thumbnails made into one. It felt a bit strange trying to meld several very different sketches into one. As if I each time ended up with a strange mixed breed, escpecially with the guns.

Compared to the buildings and surroundings, I had things that did not really need to express much mood, and thus they became simpler images with only basic colors.

Can you see the mixes made by looking at these and the thumbnails in the thumbnail post?

concept4

concept5

-Matilda Karlsson (technical artist)

Making thumbnails

When the overall visual design has been set we start doing thumbnail sketches. These are sketches done within ten minutes a picture. The trick about thumbnail sketches is speed and the moment you slow down, you shold consider yourself about finished with your picture. The police sketches, for instance, were made by drawing on top of a basic pose of a man to avoid unneccessary drawing. There should be no time for thinking when doing thumbnail pictures, only drawing. We both used Adobe Photoshop and a wacom4 drawing tablet for all the drawing of the thumbnails.

It was important not to zoom in on the picture when drawing because the harder we made it for ourselves to draw detail, the less detail was going to be drawn. And it worked for the most part.

I felt a bit intimidated because of the stress level coming with the time limit. When you draw it can be a peaceful experience, but that usually also equates to slow work for a lot of people. I think that description fits me very well but the more I drew, the more fun it became to push myself to finish a little bit faster.

The thumbnails for the weapons were more complicated and were not hurried as much as the police characters. This might have been unwise due to the pictures becoming a bit to complex and time consuming, but it helped with having more straight and clear lines. With the time aspect in the back of the head, the weapons took shape in a reasonable pace.

shotguns
Each piece took around 10 minutes to make, give or take.

police
Each piece here took around 5 minutes to make, sometimes a few minutes were added due to me getting caught up in details.

– Matilda Karlsson (technical artist)

—————–

I agree with what Matilda wrote above, that It was fun working with thumbnail sketches because you have to constantly push yourself to finish a sketch a little bit faster every time. For me this was a new way of dealing with creation of concept art and even though it was difficult to keep within the time frame of each thumbnail, it’s a great way to improve your drawing skills.

The concept art I’ve made pictures the environments of the slum parts in the city, and some scenario-related structures, architecture and machinery. I tried to finish each thumbnail off with some general shading to add, to a small extent, some detph to the images. Each frame took between 5-15 minutes to create which is a stretch owed to my modest drawing skills.

residential
Thumbnail sketch for residential area

This is the residential areas of the slum and I was going for three things here: tall buildings emphasizing how the people are really living on the rock bottom of the city as seen in frame 1, 2 and 6, vertical construction as seen in frame 7, and early 1800’s industrialism as seen in frame 8, 4 and partially 5. I accidentally drew a concept for transportation in frame 3 but I left it in the thumbnail anyways.

thumbnails
Thumbnail sketch for market area

As with the finalized concept art images following these thumbnails, I wanted to focus on some general details typical for the cyberpunk theme. In the image above I wanted to highlight the neon signs and advertisements visible on every wall and stand in the slum markets. And as with the concept of the residential area I tried to get a sense of vertical construction, that buildings, homes and other premises have been built on top of another due to lack of space (and freedom).

-Kim Jonsson (technical artist)

Creating a Visual Theme and Style

Art is often a big part of a game, so establishing a visual theme and style is very important during the development for the art to be homogenous, and for it to match the narrative and the gameplay as closely as possible.

When we started defining the visual theme we knew what the basic gameplay would be, namely that the player would control riot police squads to keep riots under control in an urban environment. We also knew that the actions the player take in the game should feel meaningful and have an impact on the player.

With this in mind, the first thing we did was decide on a visual theme that would fit this experience. We ended up with a grounded cyberpunk theme set around 50 years into the future. In this theme we imagine a world in grave imbalance in all areas from social classes to the environment, so finding meaningful conflicts in this realm would be pretty easy. Some examples of conflicts are lack of food and clean water, human labor being worth very little, huge disparities between rich and poor people, transhumanism, etc.

Untitled

With a theme broadly defined, the visual style was next. After discussing different styles and what we wanted to convey to the player, we decided on going for realism. The riots should feel real and the players’ actions should feel as meaningful as possible, so this style made the most sense. We also wanted to challenge ourselves to create a realistic looking game environment.

After the visual style and theme had been defined, we created moodboards for a variety of different areas. This started by going onto image sharing and searching websites and downloading any image we thought aligned with the view of what our game would look like in terms of design, colors and atmosphere. These images were then put together into a single image that represent a specific area of the game. We made five moodboards in total, for the high, middle and low class housing areas as well as for the rioters and the riot police forces. These will help inspire and guide us to create art that is homogenous throughout the development process.

Written by Lukas Orsvärn