Pixelblog - 21 - Top Down Objects by Raymond Schlitter

Intro

In Pixelblog 20 I introduced the fundamentals of making tiles with various 16x16 pixel grass and dirt textures from a 3/4 top down projection. Now I will continue developing the environment with some natural, and man made objects. Since the base ground is made of 16x16 tiles it’s important to consider how the objects will fit onto the tilemap. In this case, I break my objects down into 16x16 tiles so they can easily be used in a tile editor and laid out in a logical manner.

Title_Image_Edit.png

Tree

Of course, we’ve gotta have trees. A grassy environment without trees just feels lonely. So let’s get to it and spring up some green darlings!

51-Tree.gif

The ball shape design is a cute approach, but more importantly, simple shapes with symmetrical balance create visual stability, fit together nicely onto the tilemap, and look good when used in repetition. Furthermore, they can be placed in staggered overlapping rows to create a solid forest pattern with no odd gaps or noisy pixels. To keep the asset feeling fresh, try a simple color swap here and there. A more unique, asymmetrically shaped tree looks good when used sparingly to create a point of interest, but will look odd if often repeated on the same screen. This is a general rule for any kind of objects used in repetition.

Using simple shapes and visual symmetry, a pleasing canopy of dense forest can be made with a single base asset.

Using simple shapes and visual symmetry, a pleasing canopy of dense forest can be made with a single base asset.

Rocks

Well, we have grass, dirt, and trees. What next? You guessed it, rocks of course!

52_Rocks_2.gif

This approach exhibits a blocking technique, which is basically throwing down the basic shapes with solid colors and progressively refining the details as you introduce more colors. I usually use this technique if the sprite is not very big(low res). However, for larger sprites that are especially angular I sometimes start with an outline approach.

When designing your rocks it’s good to think about the geology of the area and what type of rocks you would realistically find in the environment. I imagine my rocks are some kind of limestone found in a prairie land. Moreover, I use warm colored blocky forms with a hint of smoothness, as these sedimentary rocks are susceptible to erosion and oxidization. Whatever the style of rock they will often share some of the same, or very closely related hues found in the dirt. Otherwise they are likely to look out of place. For more about rocks check out Pixelblog 13.

Man Made Objects

No matter what the environment, it seems treasure chests just seem to pop up out of no where. Curious, isn’t it? May as well cover some other common man made objects while we’re at it. I’m sure a village can’t be far away.

53_Man_Made_Objects.png

Here are some common man made objects you often find scattered around human settlements in top down rpgs. All except the large treasure chest snuggly fit into a 16x16 tile. This makes it so they can be cleanly placed on the tilemap, and fit together nicely when used in repetition. The large treasure chest is a bit irregular, sort of half filling a 32x32 space. However, in this case I think it’s okay, as it would be a rare object, usually placed off on it’s own.

Due to the precise geometry of man made objects the consistency of the sense of perspective is especially apparent. Make sure all your objects adhere to the same projection rules. For more about graphical projection, and 3/4 top down in particular, check out Pixelblog 3.

Cast Shadows

Shadows.png

Cast shadows help make objects feel like they actually connect with the ground. It’s best to keep them subtle and not cast out long in any particular direction, as to minimize conflicts with overlapping adjacent tiles. In some cases where the shadow can easily be contained within the frame of the sprite, such as my tree, it’s okay to bake the shadow into the same asset. However, in most cases I make the shadows on separate tiles and place them on a different layer than the sprites. This allows me to just have one base sprite, and create shadows for different surfaces as I need them.

Final Thoughts

After creating the base ground tiles in the previous blog the real fun is just beginning. It can be tedious at first, but once you start to develop a substantial set of assets it becomes addictive to create tiled environments. I find myself wanting to flesh out this world with more and more assets! In the next Pixelblog, this world will truly come to life with the introduction of character assets.

RESOURCES

Was this article helpful? If you find value in my content please consider becoming a Patreon member. Among many other rewards, Pixel Insider members get extra resources to compliment my tutorials. But most importantly, you allow me to continue making new content. 

This month I’m sharing Basic Nature assets, which includes all the assets presented in this tutorial. Have fun using these in your pixel art studies or personal game dev projects.

My top patrons can also download the Basic Nature source files, which includes a Pyxel Edit file with all the assets from Pixelblog 20 and 21 loaded in as tiles. Also included is the Photoshop file of Tutorial 51, which shows you how I set up all my layers and execute the animation.

Get caught up on all my downloads

If you're not ready to commit to the subscription model of Patreon, make a one-time donation and receive exclusive art and resources. Help continue the content by providing me a living. Thank you! 

-By Raymond Schlitter

Pixelblog - 20 - Top Down Tiles by Raymond Schlitter

Intro

Like most pixel art inventions, tiles are a product of limitation. Back in the day when computers had very little memory, developers were able to cleverly fill the screen with animated graphics by breaking everything into small square images that can be repeated and seamlessly fit together in various combinations. Constructed in a grid, these small squares are referred to as tiles for obvious reasons. Tiles can not only greatly reduce memory costs, but also the time it takes to create art for levels. Additionally, the precise structure of tile-based environments provides a logical base to map gameplay onto. When done well, tiles create a consistent aesthetic that marries perfectly with pixel art. Even with the powerful computers and art creation tools of today, the tradition of tile-based graphics remains strong.

This is the first of several lessons that build upon each other as I create the assets for a cohesive top down game world. In this lesson I focus on several different 16x16px tiles from a top down 3/4 projection. I think this is a good place to start with tile making, as the small tiles can be edited easily, and complete scenes can be made without a need for background tiles.

Title_Image.png

While tile-based graphics may be described as an economical approach, don’t let that fool you into thinking it’s easy to make tiles. Tile making is a precise art form that requires supreme attention to detail. Although part of the charming aesthetic can be attributed to repetition, you don’t want the tiles to be too obvious. The trick is in trying to hide the patterns within consistent non-distracting textures.

Grass Tiles

The good ol’ grass tile. This is where the grand journey begins. It may appear simple, but a perfectly balanced grass pattern that looks good tiled over a large area is difficult to achieve in so few pixels.

48-Grass_Tiles.gif

Ultimately, a grass texture made up of only one tile becomes monotonous, no matter how awesome the tile is. I find it works well to mix in spaces of flat green with textured areas of differing vegetation density, which can create visually pleasing gradations. The variation feels natural, while the negative space helps reduce noise and lets the environment breath. Don’t forget occasional flower variants to add a splash of life.

Grass_Sample.png

Dirt Tiles

Where there is grass there is surely dirt. Let’s dig in!

49-Dirt_Tiles.gif

Most likely you’ll want to combine grass and dirt tiles. In that case, it’s important to think about what style will mix well with your grass tiles. Dry and cracked, muddy slop, flat clay; dirt comes in many different consistencies and colors. It doesn’t hurt to consider the geology of your environment.

Connection Tiles

Now we are going to gracefully merge the grass and dirt tiles into a set of connection tiles. I bet you can hardly contain your excitement!

50-Grass_Dirt_Connection_Tiles_2.gif

I decided to combine the dry dirt texture with a simple green grass, as the busy dirt pattern contrasts well with the more airy grass texture. However, there is no right or wrong. Play around with different combinations of textures and style of grass edging. Once you have grass tiles, dirt tiles, and a set of connection tiles, the real fun of arranging the tiles into level maps can begin! Well, it’s still a bit simple for a game level, but at least you can create an interesting base ground to begin building a world on. More to come in the next lesson!

Key points

Balance - Strive to achieve a homogenous distribution of visual weight within a tile. If any area of the tile has a visual dominance the pattern will become too obvious. Include clusters that overlap the edges and loop around the tile to help hide the seems.

Consistency - Define key clusters and shapes and repeat them in several cases to create a pleasing consistency. Avoid touching key clusters with other key clusters, as they clump into different irregular clusters and create noise. Touching corner to corner is okay.

Limit colors - You only need a few colors to make a rich texture. Too many colors and the texture will become blurry. Also, strong contrasting colors in the case of a texture pattern may result in displeasing noise.

Contrast - Consider contrast when combining different textures in the same environment. A busy texture next to another busy texture may exhaust the eyes with too much noise. Negative space is your friend.

Reflect - Often tiles can simply be mirrored to create tiles of different orientation. This saves time, and the symmetry creates a pleasing consistent look.

Resolution - You can make tiles any size you want, but the larger the more laborious. Anything over 32x32px seems like overkill for pixel art. 16x16px is probably the most common size and is sure to do your pixels justice.

Software

In order to proficiently make tiles, it’s essential that you can see how the seems are connecting in real time. Some software lacks this feature, while some does it better than others. Here’s a bit of info on making tiles in the programs I’m familiar with.

Pyxel Edit

I purchased this program for the purpose of making tiles, as it’s specifically designed to make the process easier. For the most part it does just that by allowing you to create and save tiles into an atlas, which can then be stamped onto a tile map. You can edit any placed tiles and it will update them all in real time, allowing you to easily refine tiles while building scenes.

Pyxel_Edit_Screen.png

Everything is pretty straight forward and easy to learn with this program, thanks to the clean ui with helpful hover hints. To make a new tile click the + button in the tile window. Place as many of the tile on the canvas as you want with the tile placer tool(a), then draw on any of those tiles and watch them all fill in. Press the tab key to show what tiles are placed where so you don’t lose track of where you placed blank tiles. This is important, as you can also draw freely on any layer without using tiles.

Aseprite

I haven’t used this program much for tiles but it seems to offer a reasonable workflow. A full on tile editor is reported to be in the works. I will definitely give it a spin when it comes out.

Aseprite_Screen_3.png

For now, the most handy feature is ‘Tiled Mode.’ Start with a small canvas exactly the size of the tile you want to make. Then, turn on ‘Tiled Mode’ under ‘View’ in the menu bar and choose the axis to have the image tiled.

Tiled_Mode.png
Aseprite_Screen_2.png

Now you can see how your image tiles and anything you draw will live update in all the cells. Easy peasy tile making in just a few clicks!

Photoshop

I use Photoshop for just about everything, except making tiles. However, if you take the time to customize your setup and implement a few tricks, it becomes a reasonable process.

Photoshop_Screen_1_1.png

For general workflow, make each tile on its own layer and organize your finished tiles in a separate project file off to the side, which can then be used as a tile atlas.

Photoshop_Screen_2.png

The pattern fill function can be useful for tile creation. Select the area you want to turn into a pattern, then choose ‘Define Pattern’ under ‘Edit’ in the menu bar. Name your pattern in the following prompt.

Photoshop_Screen_3.png

Once you have a pattern saved, select an area on the canvas you want to fill with the pattern, then choose ‘Fill’ under ‘Edit’ in the menu bar.

Photoshop_Screen_4.png

Choose ‘Pattern’ in the fill options window.

Photoshop_Screen_5.png

Choose your pattern and select ‘OK.’ Your pattern will then automatically tile itself to fill the area you selected on the canvas.

Photoshop_Screen_6.png

While Photoshop doesn’t have a tiled mode or live update, smart objects provide a close alternative. To make a smart object, right click/control click on a layer and choose ‘Convert to Smart Object.’ In this case there should only be one tile on the layer. You don’t have to make a precise selection around the tile, just select the layer and convert it to a smart object.

Photoshop_Screen_7.png

After you convert the tile into a smart object you will notice a small document icon on the layer. Double click this icon or right click/control click the layer and choose ‘Edit Contents.’

Photoshop_Screen_8.png

The tile you converted to a smart object will then open in a separate file. You can now make edits in this window, and as soon as you save it (command S) the changes will appear in your main project that contains the smart object. So it’s almost like a live update, you just have to save every time you want to see the changes.

With any pixel art design and no matter what program you use, it’s very helpful to have a preview window open that displays the scene from a zoomed out view, allowing you to see how it appears from a normal viewing distance while staying focused in on a specific tile/area. Basically, it cuts out the need to constantly zoom in and out.

I normally don’t place much importance on software, but when it comes to tile making it can make all the difference. Personally, I struggled a lot with tiles until I started using Pyxel Edit. However, I only use it for tiles and prefer Photoshop for just about everything else. End the end, use what you got, what you can afford. There’s always a way.

FINAL THOUGHTS

Honestly, this was one of the most challenging tutorials for me to put together, but I’m so glad I did it. Much was learned in the process. I hope these tutorials and tips help you on your way to becoming a tile master. I intend to continue the lesson in the next Pixelblog with more top down environment objects, and eventually create an animated top down character. Stay tuned as I flesh out this world and pass on the knowledge and assets.

Just a tease of what’s to come…

Just a tease of what’s to come…

RESOURCES

Was this article helpful? If you find value in my content please consider becoming a Patreon member. Among many other rewards, Pixel Insider members get extra resources to compliment my tutorials. But most importantly, you allow me to continue making new content. 

This month I’m sharing Top Down Tile Pack 1, which includes all the tiles presented in this tutorial. Have fun using these in your pixel art studies or personal game dev projects.

My top patrons can also download the Top Down Tile source files, which includes a Pyxel Edit file with the tile atlas loaded in, and the Photoshop file of Tutorial 48 animation.

Get caught up on all my downloads

If you're not ready to commit to the subscription model of Patreon, make a one-time donation and receive exclusive art and resources. Help continue the content by providing me a living. Thank you! 

-By Raymond Schlitter

Pixelblog - 19 - Mecha Mania by Raymond Schlitter

Intro

It’s all about the giant robos! While the term mecha can encompass all things mechanical, It’s most often used to describe huge robots piloted by humans. Mecha can vary greatly in form and size but are most often humanoid, and quite large. Nowadays, with drone technology the idea of piloting a mechanical hulk seems quite impractical, but there’s no emotion without a human in the heart of the action. Furthermore, the idea is greatly celebrated in works of art and fiction. To become a mechanical giant sure has its appeal.

Title_Image.png

In this lesson I will focus on 3 different mecha designs, all presented in my favorite 3/4 side-view. I find this projection describes angular forms with clarity, and the illusion of depth captures a sense of weight. Therefore, a great way to present mecha in my geometric style. The level of detail in the following tutorials may be quite a challenge for beginners, however they build off concepts presented in several of my previous lessons. If you feel overwhelmed, I suggest reviewing Pixelblog 3, and Pixelblog 12.

Humanoid Mecha

45-Humanoid_Mecha.gif

The intuitive pairing between human form and machine provide the best overall tactical balance on the battlefield. A robust choice of projectile and melee weapons further enhance versatility.

Of course, I had to start off with a humanoid design, the most common representation of mecha. The human figure provides a sense of scale. If you want to make the robot feel larger, juxtapose with a smaller human, or vice versa for a smaller scale. However, in staying true to mecha tradition, it’s important to imagine a space for a pilot. As you can see from the cutaway diagram, the cockpit is already pretty cramped at this scale.

I like to save the paint job for last and use striping that wraps around the forms, further enhancing the sense of depth. Once a design is established you can play around with different poses, and try adding weapons. I rank this medium difficulty for pixeling, as well as piloting.

Tank Mecha

46-Tank_Mecha.gif

While the tank mecha lacks the mobility of the humanoid, the solid footing provided by tank tracks allows for heavy weaponry. A variety of side arms paired with the mega canon make this an offensive powerhouse!

You could swap out the side arms with a variety of weapons, or humanoid arms if you like. I went with a set of sidewinder missile launchers. No cutaway provided but I imagine there’s a nook in there for the pilot, cozied up next to that huge canon. I rank this easy for pixeling, also the preferred training machine for new pilots.

Mecha Setting

47-Scorpion_Mecha_2.gif

Combining the best of both worlds, the scorpion mecha provides high mobility and deadly firepower. The biggest downside in this particular model is the exposed cockpit leaves the pilot vulnerable. But at the same time it provides maximum visibility, and makes for a hard target.

This design was a bit too complex to break down all the details into animated steps. However, it follows the same principles shown in the humanoid and tank designs. I rank this hard for pixeling, and a bit of a wild ride that should only be piloted by a pro.

Final Thoughts

Well, that was fun! Surprisingly, I haven’t explored the world of mecha much in my pixel art, yet it’s a perfect fit. Definitely plan to do more in my art, possibly more tutorials, too! If you’re into it.

As always, I want to stress the importance of self discovery. Feel free to go off the rails whenever inspiration strikes. Try out your own paint jobs, weapons, and body parts. Most importantly, have fun!

RESOURCES

Was this article helpful? If you find value in my content please consider becoming a Patreon member. Among many other rewards, Pixel Insider members get extra resources to compliment my tutorials. But most importantly, you allow me to continue making new content. 

This month I’m sharing Mecha Mania assets, which includes all the sprites associated with this tutorial, including the little humans and all the individual mecha parts. Have fun using these in your pixel art studies or personal game dev projects.

All assets in this feature use my Bright Future color palette.

Get caught up on all my downloads

If you're not ready to commit to the subscription model of Patreon, make a one-time donation and receive exclusive art and resources. Help continue the content by providing me a living. Thank you! 

-By Raymond Schlitter

Pixelblog - 18 - Age of Flight by Raymond Schlitter

Intro

Thanks to my dad’s experimental aircraft business, I was privileged to grow up around airplanes and spend a fair amount of time in the cockpit as a kid. It’s no wonder my art often features a variety of flying machines. In particular, I’ve always been fascinated with the Wright brothers and the early age of flight that ensued after they first took to the skies in 1903. So much innovation and fantastic looking contraptions in the form of biplanes, triplanes, and dirigibles.

Title_Image.png

Aircraft

Awkwardly large to be airborne, airships always have a fantasy aspect to them, even the ones in real life. If we didn’t have video documentation of the Zeppelins, and dirigibles used by the US Navy in the first half of the 20th century, I’d have a hard time believing they actually existed. Of course, we have modern day blimps, but they don’t capture the imagination like their hulking predecessors.

42-Airship.gif

Although most of those early dirigible designs crashed and burned in catastrophic fashion, their bold designs still capture our imagination and make us ask, what if? What if, they figured out how to make it safe and practical? Who knows what kind of contraptions would be in the skies today. Perhaps, explorers would have traded in their sales and fashioned dirigibles to their ships.

43-Biplane.gif

While airships proved to be too dangerous and costly, small airplanes took to the skies in droves. In the early days, the biplane, and even some triplanes dominated. With a great roll rate and slow stall speed, multi-wing designs were advantageous for the military operations of WWI. However, advances in materials and design would eventually give monoplanes the same advantages, without the extra drag and poor visibility. While modern day biplanes are still good for aerobatics, they’re more about nostalgia than performance.

My above biplane is based on the Fokker DVII, a German WWI plane. I economized some details to adapt to my pixel style, but it’s a fairly accurate representation.

ClouDscapes

The marvel of flight lofts our view into the skies, where we can not only see the earth from a new perspective, but also allows us to be amongst the ethereal beauty of cloudscapes. Here’s a quick reference of the main cloud types to help inspire your sky backgrounds.

44-Cloud_Types.png

Apparently, there are more than 100 specific cloud types, but all variations fit into these 10 main types. Some of these are hard to distinguish, with only altitude being the main difference.

Cumuls - Small puffy clouds with flat bottoms, found at low altitude. Spaced out enough to still be sunny.

Stratus - Low, flat, relatively featureless gray clouds that sometime come with light precipitation.

Stratocumulus - Low fluffy clouds, similar to cumulus, but darker and thicker with only patches of sky peering through.

Altocumulus - Common mid altitude that dot the sky in round heaps or sometimes parallel bands. The heaps are sometimes likened to sheep’s wool.

Nimbostratus - Low, gray clouds thick enough to blot out the sun, usually bringing heavy precipitation.

Altostratus - Mid altitude, thick flat clouds that blanket the sky in a gray haze, but the sun stills dimly shines through.

Cirrus - High altitude clouds that appear as thin white wispy strands, streaking across blue sky.

Cirrocumulus - Formed at high altitudes from ice droplets, and sometimes called cloudlets, these clouds appear in white patches, often arranged in rows.

Cirrostratus - High altitude, transparent, whitish clouds that are wispy like cirrus clouds but thicker. Light refraction caused by the ice crystals in the clouds often creates a halo around the sun.

Cumulonimbus - These are large towering clouds that span the low, middle, and high altitudes. They are flat and dark on the bottom, and mushroom into anvil shapes the top of the billowing towers. These are thunderstorm clouds and are sure to bring sever weather.

Final Thoughts

When I make step by step tutorials, I expect many will follow along pixel by pixel, but it is always my hope that some will discover something on there own along the way. In fact, I encourage you to iterate and modify at every step to really make a design of your own, simply using my direction as a foundation.

I hope you’ve enjoyed our little journey through the clouds. Personally, I can never get enough aircraft and clouds in my pixel art. It was difficult to narrow it down and focus on just a couple designs. Expect more aircraft related topics in the future!

RESOURCES

Was this article helpful? If you find value in my content please consider becoming a Patreon member. Among many other rewards, Pixel Insider members get extra resources to compliment my tutorials. But most importantly, you allow me to continue making new content. 

This month I’m sharing Age of Flight assets. which includes all the sprites associated with this tutorial. Have fun using these in your pixel art studies or personal game dev projects.

All assets in this feature use colors derived from my Bright Future color palette.

Get caught up on all my downloads

If you're not ready to commit to the subscription model of Patreon, make a one-time donation and receive exclusive art and resources. Fan support is necessary to keep producing content. Thank you! 

-By Raymond Schlitter

Pixelblog - 17- Human Anatomy by Raymond Schlitter

Intro

In every artist’s journey there comes a time to draw naked people. Understanding human anatomy is not only essential to successfully draw people, but it’s an important lesson in seeing. Developing a keen sense of observation is one of the most fundamental skills for any visual artist. Therefore, even if you have no interest in illustrating people, anatomy is an important core lesson and should be reviewed on occasion.

Title_Image.png

Body Proportions

Within the limited restrictions of pixel art, the human form is often stylized and deformed. However, one should first understand the proper forms in order to make sensible abstractions. Ideal adult male proportions often uses an 8 head model. However, this is quite tall and elongated forms don’t always suit the limitations presented by pixel art. Hence, the tradition of ‘super-deformed’ or ‘chibi’ character sprites in video games. Big-headed, or doll-like features tend to read well and capture a lot of expression. Furthermore, I present a 6 head model, which results in fairly realistic figures, a touch on the small cute side.

39-Proportions.gif

This process has 3 main steps; wireframe, rough shapes, final form. Make sure to nail the anatomy in the wireframe step. With practice you might develop the confidence to skip right to the last step of blocking out the final form, especially if it’s a small sprite. However, I think a simple wireframe is always helpful to establish proportions, and capture the energy of of a pose. It goes without saying, you can and should use references.

The Head

Naturally, we find human faces appealing, and artists never tire of depicting them. The head and face contain a complex set of expressive features. However, just like the body, the proportions and spacing can be established with simple spacial divisions.

40-Head.gif

This is based on the standard model of ideal facial anatomy. Of course, facial features can vary greatly, or be abstracted for stylization purposes, but the proper model should be understood. I’m already taking the liberty to stylize some features to adapt more to my pixel style. Here are some of the keys in the standard model.

  • The eyes are halfway between the top of the head and the chin

  • The face is divided into 3 equal parts from the hairline to the chin

  • The bottom of the nose is halfway between the eyes and chin

  • The mouth is about 1/3 to 1/2 distance between the bottom of the nose and chin

  • The distance between the eyes and the width of the bottom of nose is about one eye-width

  • The mouth width is about the distance between the pupils

  • The top of the ear aligns with the brow line and the bottom with the bottom of the nose

  • The width of the neck is about 1/2 to 2/3 a head.

Gestures

Now that we’ve gotten familiar with the basic anatomy, let’s try putting our figures into some expressive poses.

41-Poses.gif

Before making the wireframe I find it helpful to throw down some very rough forms that capture the essence of the pose. This could literally be a single stroke that informs the gesture of the spine. Then, building off this overall energy, begin making a basic wireframe in the same order as we covered in the human proportions tutorial. A well made wireframe will make things a lot easier when you fill out the final forms. However, it can be hard to perceive the volume of the forms with only the wireframe. Sometimes you just have to start fleshing things out and apply subtle shading to to see how it’s working. Don’t forget to use references.

FINAL THOUGHTS

Maintaining a confident grasp on anatomy should be a priority for most artists. Obviously, we are people and we relate to people, even through artistic depiction. As an artist, the need to depict people arises with great regularity. While my work doesn’t often feature people their presence plays and important role in the expression. Furthermore, I must admit I hold back at times for lack of confidence in figure drawing skills. It’s one of those things you just can’t keep sharp without practice. I was overdue for an anatomy review. Now I’m feeling confident and you will too after working through these tutorials!

RESOURCES

Was this article helpful? If you find value in my content please consider becoming a Patreon member. Among many other rewards, Pixel Insider members get extra resources to compliment my tutorials. But most importantly, you allow me to continue making new content. 

This month I’m sharing Human Anatomy assets. which includes all the sprites associated with this tutorial. Have fun using these in your pixel art studies or personal game dev projects.

All assets in this feature use my Bright Future color palette.

Get caught up on all my downloads

If you're not ready to commit to the subscription model of Patreon, make a one-time donation and receive exclusive art and resources. Fan support is necessary to keep producing content. Thank you! 

-By Raymond Schlitter

Pixelblog - 16 - Medieval Fantasy by Raymond Schlitter

Intro

When we hear the word ‘fantasy’ we often think of dragons, elves, wizards and the likes of a Tolkien novel. A fantasy world can be anything we want it to be, but we find a similar medieval backdrop used over and over. While I always appreciate new ideas, there’s something satisfying and comforting about a familiar motif. Mystical, brutal, and full of magic, the classical fantasy setting captures our imagination for many reasons.

Title_Image_16.png

Castles

Dwellings of medieval times might seem quite shabby by modern standards, and electricity usually isn’t granted in the fantasy version, but the mighty castle always impresses. Ironic structures, castles strike an aesthetic elegance while remaining brutally functional in the face of ever present war.

36-Castle.gif

Fantasy castles come in many forms and sizes, but are usually based off the European variety. These defensive minded structures usually consist of tall outer walls with towers that house a keep within. Often they are surrounded by a moat or built on a hilltop for an extra layer of defense. Thick stone walls and spire topped towers provide strategic benefits as well. In the end, the purpose results in damn cool looking structures that are perfect for pixeling!

Dragons

Now time for some real fantasy, or is it? We know serpent-like dinosaurs used to dominate the ancient seas. Who knows what could have evolved from those genetics and persisted in some form at the same time as humans. The knights praised for slaying evil dragons might have just been assholes hacking up an endangered species.

37-Dragons.gif

In all seriousness though, being a creature of fantasy, the dragon comes in numerous forms. It seems every culture has there own version of dragons. Even an individual has the authority to make a dragon however they like, and that’s the beauty of fantasy subjects. However, there are a handful of common types and attributed characteristics that seem to be standard convention. Here I describe a few of the common species seen in works of fantasy.

Weapons

Judging by the weaponry of medieval times, warfare must have been terribly violent. Visceral face to face combat taps into something primitive and is another reason we remain enthralled with the medieval motif.

38-Weapons.png

Here is a nice collection of weapons for adventurers of all types; dagger for a nimble thief, battle axe for a raging barbarian, or perhaps a magic staff for the sage wizard? We like to romanticize the violent aspects of medieval fantasy, but it would take some serious fortitude to actually pick up a war hammer and swing it at another human.

Final Thoughts

I tend to stick more to sci-fi and spacey things in terms of fantasy, but it was a lot of fun exploring medieval subjects. Maybe it’s the classic subjects, or the natural color palette, there’s just something about the aesthetic of medieval fantasy that marries so well with pixel art. Definitely want to venture in this world some more. Races, magic, other beasts, so much more to explore!

RESOURCES

Was this article helpful? If you find value in my content please consider becoming a Patreon member. Among many other rewards, Pixel Insider members get extra resources to compliment my tutorials. But most importantly, you allow me to continue making new content. 

This month I’m sharing Medieval Fantasy assets which includes all the sprites associated with this tutorial. Have fun using these in your pixel art studies or personal game dev projects.

All assets in this feature are based in my Bright Future color palette.

Get caught up on all my downloads

If you're not ready to commit to the subscription model of Patreon, make a one-time donation and receive exclusive art and resources. Fan support is necessary to keep producing content. Thank you! 

-By Raymond Schlitter

Pixelblog - 15 - Plant Life by Raymond Schlitter

Intro

Next to art, field-biology has always been one of my favorite areas of study. Wildly diverse and genuine in all its forms, I particularly have a deep respect for plant life. Essential to the architecture of our eco-system, these beautiful life forms stand nobly affixed in place. The infinite variation of colors, forms, and adaptions captures a brilliance beyond the capabilities of human invention. However, they will never stop inspiring us to strive for this beauty. Ironically, the essence of this natural beauty can be captured in the limited medium of pixel art.

Title_image.png

While organic subjects like plant-life can be difficult to render in pixels, it just takes practice. The key is to embrace abstraction. Don’t try to force realistic details simply for the sake of accuracy. Compared to the real-life counterparts, you’ll find plant life in pixels takes on a whole new charming aesthetic. Ahh, green is so calming.

General Classification

First, let’s review the general categories of all plants and some examples. Even if you don’t use a reference, a little foundational knowledge will help you access better solutions when a creative problem calls for plant design. Furthermore, I believe intimate knowledge of the subjects you work with will bring out a more authentic quality in your work.

33-Plants.png

Plant life can be further broken into more specific categories, but for classification on the broadest terms, all plant life fits somewhere in this spectrum. This knowledge may not seem necessary to be a good pixel artist, but in fact, knowledge of any kind will help you improve as an artist. Understanding how things work allows you to see everything more clearly, and nothing is more important to a visual artist than seeing.

Leave Shapes

Most plants grow leaves to drive photosynthesis, thus providing nourishment. Leaves come in many shapes and sizes. If they are doing their job right, they are almost always a green hue. Here is a reference for the general shape categories.

34-Leaves.png

Many of these categories can be further broken down into more specific physical characteristics. When it comes to pixels, you’ll rarely have the scale/resolution to explicitly depict the leaves of a specific species, especially in dealing with dense foliage, but it’s always good to have a reference point and abstract as needed.

Tree study

One of nature’s greatest gifts has to be trees. They provide us with so many resources, like firewood, lumber, fruits, medicine, and even oxygen. The way their limbs reach up towards the sky like outstretched arms, we can even relate to their anatomy. Being in the presence of great trees can even have a spiritual quality. It’s no wonder we love trees. While the dormant tangle of barren branches has it’s own appeal, I find a tree’s beauty shines the most when donning robust foliage.

35-Tree.gif

Trees come in all shapes and sizes, but for this particular study I depict a generic deciduous species with a nice canopy of foliage that still allows you to view some of the inner branches. I first draft the entire tree, including some rough shading and highlights. Developing the image beyond this rough impression of the forms and cleaning up the clusters is where most learners hit a snag. At this point you should pay mind to all the pixels and bring meaning to your clusters. Not every leaf needs to be represented. Just enough to give the impression of a leafy texture and the mind will automatically fill in the gaps where there are less defined large clusters. In fact, I almost went too far with the details in this example, but since I repeat similar cluster arrangements across the sprite it maintains a clean consistent look. Too much variation will create displeasing noise.

Final thoughts

It was so refreshing to use a lot of green. Nature is my number one inspiration but it’s always challenging to pixel organic subjects. You can definitely expect more plant life tutorials in the future. I’d be happy to do a whole feature just on trees!

RESOURCES

Was this article helpful? If you find value in my content please consider becoming a Patreon member. Among many other rewards, Pixel Insider members get extra resources to compliment my tutorials. But most importantly, you allow me to continue making new content. 

This month I’m sharing Plant Life assets, which includes all the sprites associated with this tutorial. Have fun using these in your pixel art studies or personal game dev projects.

All assets in this feature use my Planemo 8 color palette.

Get caught up on all my downloads

If you're not ready to commit to the subscription model of Patreon, make a one-time donation and receive exclusive art and resources. Fan support is necessary to keep producing content. Thank you! 

-By Raymond Schlitter

Pixelblog - 14 - Cityscapes by Raymond Schlitter

Title_Image_Day.png

Intro

Crowded, dirty, and sparse in nature, big cities certainly present some ugly realities. Yet, within the chaos that arises from massive populations, great beauty can be found. The convergence of people leads to marvelous human achievements, most notably displayed in the lofty structures that rise from the population. Viewed from a distance, where one can take in the totality of our modern marvels, the aesthetic shines the most. When I used to live in Japan, I loved going to observatory decks to gaze out across seemingly endless city. Nearing dusk, golden sunlight would reflect off the rooftops, creating a sea of metal and glass. As the sun set somewhere beyond Mt. Fuji, rivers of neon came to life and flowed across the landscape. Turns out the city really can be beautiful, even for this country boy.

SkyScrapers

30-Sky_Scrapers.gif

The 3/4 side view is one of my favorite ways to draw architecture. In this projection the object appears skewed about 45 degrees away from a direct front facing view, foreshortening the sides to about 3/4 their actual width. This is simple to execute and always creates a convincing sense of depth when done with good color choice. I usually imagine the light source from the top left or right side of the scene, which results in a strong contrast in color between the two sides of the building, maximizing the feeling of depth.

Futuristic Skyscraper

Nowadays, many sky scrapers around the world have much more futuristic designs than what I’ve presented so far. My geometric designs are often more conservative than what is possible in real life. However, the geometry is well-suited for pixel art and result in a fine aesthetic.

31-Futuristic_Building.gif

You can see my approach to architecture is more like construction than drawing. Using simple geometry and few but precise angles, unlimited forms can be made. This constructive technique works well with all types of angular forms not limited to urban architecture. For example, you can spot some of the same forms in my airships, and various mechanical designs. This approach can even provide the base forms for some natural subjects, like rocks and cliffs. However, in those cases I break up the straight lines with more variation and add texture to give a more organic quality.

SPC_EP_30_Metro_Emperica.gif

More futuristic city building on display in Pixelcast 30. Here I use a uniform color scheme across all the buildings. This makes the city feel like one cohesive mega structure, and enhances the concept of a strict ordered empire. Looks mighty, but maybe not such a fun place to live.

City Skyline

Now let’s put together some of the buildings we’ve learned to create into a larger city landscape.

32-City_Skyline.gif

Some cities are very dense and present a mountainous skyline of buildings overlapping into the distance, while others are more spaced out with just a few iconic structures standing above the blocky mass of the city. Organize your city however you see fit. I like to create each building as a separate layer so I have the freedom to move things around at any time to find the perfect composition. It’s also smart to duplicate some buildings and make small variations, rather than pixel each building from the ground up.

Once you are happy with the arrangement of the buildings, contextualize the scene with a background design. While I often save background details for last, I determine the light direction and general setting from the outset. Is it daytime, evening, or night? Is your city floating in space or submerged under the sea? For me, you can never go wrong with a nice cloudscape. The contrasting organic forms compliments the angles of the city and seems to balance out the scene.

Title_Image_Night.png

FINAL THOUGHTS

Growing up in a modestly small city where the tallest building is about 6 or 7 stories, I often romanticized the city when I was younger. The giant buildings seemed so futuristic to me. After moving and living in the city for several years my romance faded, but something that never faded is my love for architecture and the way skyscrapers inspire me. The contrast between nature and monolithic structures made by humans deeply fascinates me. However, it is my hope that some day we can evolve our architecture to fit in with nature more harmoniously.

RESOURCES

Was this article helpful? If you find value in my content please consider becoming a Patreon member. Among many other rewards, Pixel Insider members get extra resources to compliment my tutorials. But most importantly, you allow me to continue making new content. 

This month I’m sharing a buildings asset pack which includes all the building sprites associated with this tutorial. Have fun using these in your pixel art studies or personal game dev projects.

Get caught up on all my downloads

If you're not ready to commit to the subscription model of Patreon, make a one-time donation and receive exclusive art and resources. Fan support is necessary to keep producing content. Thank you! 

-By Raymond Schlitter