Jump to content

Search the Community

Showing results for tags 'color theory'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • MISC


  • Articles
  • NLD Originals
  • News
  • Projects


  • NLD Dev Blog

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



About Me

Found 7 results

  1. Follow Chris Website: http://www.pfbstudios.com/ Twitter: https://twitter.com/Totter87 Follow Next Level Design Join the Forum: http://www.nextleveldesign.org/index.php?/register/ Follow us on Twitter: https://twitter.com/NextLevelDesig2 Discuss on Discord: https://discord.gg/RqEy7rg
  2. Level design is something you almost always have to go through when making a game, but it’s one of the most overlooked segments of game production, especially on small/indie production teams. Here I’ll try to give some advice on how to make a good level design, by using examples from my own experience. I’ll mostly use recurring games as references (Bad Company 2 and Mirror’s Edge), because they are games I played a lot and feel comfortable mentioning, and because they have fairly different gameplays.WHERE TO START ? Mirror’s Edge The first step before making any “real” level design, is to put everything in perspective before going blindly in any direction. Define what actions are allowed (and what aren’t) by the game design of your specific game, then what intentions or constraints you want on your level. Focus on what makes your game unique. What can the player(s) do in the game? What elements of my game can harm, kill or put the player(s) close to the losing conditions? Is there a theme, or a particular focus I want to put in this level/area of a level? What mechanic stands out in my game? USE GUIDELINES TO TEST & CREATE YOUR LEVEL When making MAZE’s safe zone, we put some clear guidelines down: “We want the safe zone to be square-shaped, with one door on each side of this square, and it should not take more than 30 seconds to run from one side to the other. The safezone is also a “vegetation backup” so it should contain… vegetation.” From these precise directions, we made a huge, square shaped forest, with all the liberty to put any type of vegetation, terrain modifications, little landmarks… Editor view of the safe zone (the train wreckage at the left can be used for scale) Before asking a playtester, or just other people to give you feedback on your level, you must be able to clear your own mistakes and correct your level accordingly. To do so, define key points to help you create your level. It can also help you when testing the level on your own. Having precise constraints allows you to take more liberty to design around them. In my opinion, it’s better to have some rock-hard, definite constraints than no constraints at all, especially when making a game aimed at someone other than just yourself. It gives you directions, and you can be as free as you want on every other part of your level when creating it. DESIGN LEVELS SPECIFICALLY FOR YOUR GAMEThe more you design your level while keeping in mind your game design, the better it will be. An example of this can be seen clearly on Source games. When playing Counter Strike, try to play 2Fort (a Team Fortress 2 map) on a community server. You can also find any classic CS map on a custom TF2 server. If the map has not been altered, you’ll see that most of the depth of each map loses its value. It’s not as fun playing de_dust2 on TF2 as it is on CS. This is because dust2 was (brilliantly) designed with Counter Strike’s gameplay in mind, which is very different from Team Fortress 2’s. 2Fort — Team Fortress 2 Try to do the same for your levels: If your environments are imported in other games, they should not be as equally rewarding to experience than in their original game. If your level seems really classic, well, you fucked up. No harm done, but my advice at this point would be to delete completely the faulty level, erase its dullness from existence and start again, from scratch.USE REFERENCES FOR YOUR FUTURE LEVEL The most obvious references when designing a level are the visual ones. Find architectural drawings or photos who capture well what you want to implement in your environment. If you have some references & concept art used in your art direction, be sure to include them. Your artist(s) will be happy to see their work was not only used to be put on the studio walls to look cool. A reference for a level I’m working on(Photo by Asia Chmielewska) Here’s an easy trick that often pays off when I’m looking for references: If you find an image that you want to use as a reference, try to find the author of the picture. The artist’s style, eye, whatever you want to call it, will not be in the one picture you randomly found on Pinterest. Use it to your advantage. This is what I did with the photo above, and looked at other photos from Asia Chmielewska (check her out if you like architectural/urban photos she makes awesome photos). The main problem I had when making a paper level design (I’ll talk about it in literally one paragraph), is that slopes are cool, but they need to lead somewhere. So I found other references I can use to create what’s at the summit of the slope, and it will probably be super coherent because it was in the same photo collection. Neat.DESIGNING ON PAPER Once you have all this preparation part down, you can start actually designing the level… on paper. It’s way faster to iterate on paper than recreate your level digitally.  My point here is that you should find a "way" allowing you to design your level quickly, so you can iterate swiftly and easily change layouts, details etc. Most people would use paper, but if you prefer using Photoshop, Paint or woodworking, go for what is best for you. From this point on, I’ll drop different points and things I use to design levels, without any ranking. Once you are designing your level, iterating over and over again, you can use or focus on these points to help you enhance your design: VERTICALITY The intro cinematic of The Shard, Mirror’s Edge’s last level. The Shard is the tallest building in Mirror’s Edge’s city, and also the last level of the game. The introduction cinematic of the level gives you the feeling that you are against your biggest challenge, like if the building itself is the final boss. How? By making you enter from the parking underneath the overwhelmingly tall building. You haven’t even started playing this level, but you already know the stakes are high. One of the simplest elements that often separates a good level design from a bad one is verticality. Verticality creates, vantage points, Landmarks, Occlusion and Focal Points (see the other points below). Vantage points are really important to give exposition to your players. They are probably best used when creating a multiplayer map, as they can be fully utilized by players, whereas AIs usually aren’t advanced enough in games to use vantage points at their fullest. It still is important in single player games to give exposition to your players, give them a better view of what challenges will come next. It’s also a really easy way to give your player a powerful feeling. Anyone standing on top of something will tell you: you’re better here than if you were standing at ground level. Anatomically accurate representation of Verticality In MAZE, we use verticality to convey the aggressiveness and strength of the maze itself: The walls stand tall, trapping the players. The maze walls would look inoffensive if they were just too high for the player to vault over. In Mirror’s Edge, verticality is also used as an “enemy”: You have the cool, powerful feeling I described before when you are on top of a building, but you also know that if you slip, you’ll die. In short: Verticality is easy to use because it’s a natural feeling. Utilize it and don’t overthink too much.LANDMARKS Screenshots from the 3rd and 7th level, located at different places in Mirror’s Edge’s city The Shard (the big rectangular building) and the “multiple white tips” building are visible throughout the game and help players locate themselves inside the city. Valparaiso’s lighthouse (Bad Company 2) Most of Bad Company 2’s maps have a singular building, or setting, to help player differentiate the maps and also give them more personality. For example, Valparaiso’s landmark is its lighthouse. It’s probable that most players refer to Valparaiso as “the lighthouse map”. Landmarks are unique and memorable locations in your level. They help players locate themselves, in the level but also inside the whole game, and will make your area/level stand out.FOCAL POINTS The clear focal points (and landmarks) of Heavy Metal are the wind turbines. Heavy Metal is the biggest map in Bad Company 2. Heavy tanks fight each other while infantry tries to escape the firefight and go from one flag to another through areas with little to no cover, all while being careful about the choppers hovering over them. Wind turbines are scattered all along the area. Apart of being a memorable landmark, they are a really practical focal point: by looking at them, players watch the sky, and thus are reminded to be careful about the choppers in the area, as well as the many snipers who are waiting on top of the mountains on the edges of the map (and sometimes on the wind turbines). A simple focal point can change a lot on how people will experience a level. Put focal points wherever you want to guide the player’s eyes. From that point, you just have to choose how to make your focal point stand out. Going to extremes is the easiest way to go: Big, bright, colored.COVER/OCCLUSION Panama Canal — Bad Company 2 The Bad Company series offered a new way of designing cover, with a fully destructible environment. As you’re playing, walls explode, leaving players more and more vulnerable. Shootmania grids In Shootmania, you’ll often find grids in levels. You can’t shoot through them but can watch your opponents movements and give the info to your team. These grids offer cover, but no occlusion. Cover is about providing… cover (yay!) to the player(s), but can also be used to hide informations from them. It’s called occlusion. Cover and occlusion naturally happen whenever you put some solid object on your map, like a wall. You can’t shoot or see through them. You can create cover/occlusion with verticality (like the canal in the Bad Company 2 screenshot above), but also less tangible ones with lights, shadows, sounds, etc. Just think about providing interesting situations to your players. The more cover and less occlusion they’ll have, the safer they’ll feel. A simple situation involving cover in Mirror’s Edge: Players must take cover to the right to avoid being shot by the cops in the main hallway WORLD COHERENCE This industrial area seems functional. (Mirror’s Edge) Buildings in Bad Company 2 lack coherence. You can’t imagine that someone was living here. Make sure your environment is coherent with the game’s reality. To hem your level in the game world, it should always stay coherent: If your enemies are supposed to exist (as in “living THE LIFE”) inside a level, make sure the hallways are wide enough for them to use, that they have toilets and stuff like that. In the photo above, you can see that Bad Company 2 lacks coherence in its building interiors. It was probably done on purpose to offer better situations in mutliplayer. You sometimes have to sacrifice coherence to offer a better experience, but try to avoid finding yourself in these position. DESIGN COHERENCE Red is used to suggest a way to go to the player. The cop is in red too, so you know you’ll have to deal with him at some point. (Mirror’s Edge) In Mirror’s Edge, the red color is associated with Faith, the character embodied by the player, contrary to usual game codes with red being the color of negative stuff (enemies, traps…). Some areas are highlighted in red too guide the player in case he doubts what he should do. You’ll never see red used for something not related to Faith/the player. If the player is used to shooting red barrels every time he sees them because it has always given him some kind of reward, DO NOT create a new situation in the same level / area of the game where he might kill himself if he shoots a red barrel. It is important to be aware of the “codes” you put down on your game. Players are used to playing this way. Their behavior in games are heavily influenced by other games they previously played before trying yours. They will then confront these global video game codes to the first situations of your game, to try and figure what codes are applying to your game. You must be aware of the messages you convey, especially in your first levels, as they will be the bases the player relies on while experiencing the rest of the game. Think of your player as a child, with your game being his upbringing. If you send mixed messages to your kid early on, he’ll be really confused later. Be clear about your messages. Have great kids. One way to fix our red barrel problem, could be to change the color of the new barrel, so the player is aware that he should approach the situation a bit differently.CHOICES “Arland”: The first part Mirror’s Edge’s first level There are at least 4 possible routes to go over the electric fence: 1. Use the easy, suggested route and use a springboard (the red pipe) 2. Jump over on the right from the little chimney-thing 3. Wallrun then walljump from the wall on the left 4. Go to the middle roof on the left and jump over the fence from there These 4 choices are presented to the player in a smooth, binary way: you first have to choose whether you want to go to the right (1. and 2.), or to the left (3. and 4.). Then another binary choice is presented. It adds a lot of value to the level, while still leading to the same place. The player doesn’t feel trapped, or lost, when seeing this situation. Games are mostly about making choices, and Risk/Reward situations. Be sure to offer your players multiple approaches to the same situation. It adds replayability, and gives the player a better sense of freedom. Putting minor choices such as the one in Arland is also an easy way to prevent boredom for the players. Side note: Arland is at a point in the level where the player can take the time to choose his approach. On a chase scene later in the level the player shouldn’t, and doesn’t want to stop running: a unique & clear route is presented. ASSET LIST/ PRODUCTION LIST The same building is used all over the same area. And it’s not really a problem: people just want to shoot at each other. At some point you’ll have to start listing what props, sounds, effects and whatever other thingies you want to use on your level. That way, you can ask the qualified people if they can make these assets for you, or not. In this case, you’ll have to think about optimization, and modularity. Your assets should fit well with other assets, in order to have as many combinations as possible among them. FLOW Flow is a very important part of game and level design. I recommend that you check Jenova Chen’s thesis on flow. I can’t explain it better than him. Flow is mostly about making a level challenging enough for the player , without it feeling too hard to overcome. It is also about making sure the player doesn’t experience any snag: You have to make sure your player doesn’t get stuck on corners, or fails to interact with something etc. RHYTHM Rhythm is something I really like to focus on. It’s very close to the Flow and the Game Design itself. And just like Flow, it’s kinda hard to explain, as it’s really about feeling it. One way to feel it for me is to think about the inputs the Player will most likely do. Mirror’s Edge is very good for this. Most of the game revolves around muscle memory, and being in rhythm when doing runs over and over. Putting rhythm in your game will help players get into the Flow. CHOKE POINTS Isla Innocentes’ 2nd base — Bad Company 2 To arm the two objectives from Isla Innocentes’ 2nd base, infantry has to go through a narrow road, heavily defended by the opposite team. They can also try to attack by sea or land, but time has shown that the victory for this base is almost always determined inside the yellow zone on the image above. Whoever controls it wins the round. Choke points are the areas of your level where your opponents will most likely meet, and a big part of the fight will go there, with restrained movement. Counter Strike maps are all designed with choke points in mind. I would suggest you study these maps if you want to learn more about it. MULTIPLE I wrote “MULTIPLE”, all caps and everything, on my draft. It must have seemed very crucial at the time. So it’s staying here until I find what important piece of knowledge MULTIPLE refers to.CONTRAST — OUTSIDE INSPIRATION Mirror’s Edge Contrast is something vital in black & white photography. In order to have a more pleasing photo, and add depth, you have to think about alternating between dark and white zones. It’s a really precise thing, but a good segway to talk about using other medium’s rules. If you know rules used in photography, painting, cinema, or something else (gardening or sports for example), put them to use when designing your level! Of course every medium has its own rules and it’s better to design with them, but some of these rules may overlap, and it probably won’t have been done before.COLOR THEORY, COLOR HARMONY Same game, different areas, different moods, different colors. (Mirror’s Edge) The same level (Isla Innocentes) can relay a drastically different mood when changing atmospheric colors (Bad Company 2) Colors convey different emotions, and can be used to transcribe a specific mood you want to emphasize on your level. Having the same palette used in similar areas of your world is a good thing to do. You don’t need to use extremely different colors by level like in Mirror’s Edge, nuances always are a good option, and better than just throwing random colors around.BALANCE Balance is more important in multiplayer games than in solo ones. It’s about providing a fair encounter for all the players. The easiest way to balance your level is to use symmetry. But it’s been used over and over since the beginning of level design, so now we’re kinda forced to get more creative, and it’s for the best. If you give an advantage at one area of the map, using verticality or cover for example, be sure the other side also has the same kind of area somewhere else. N.B.: Most Counter Strike maps are not balanced (and mostly CT-sided), but the halftime alternation in the game design provides some sort of balance to the whole game. Seeing the big picture is important. Visual balance is also important in levels. Just like composition in other visual arts, most of the time you want to present balanced images to your player, and sometimes surprise him with a very harsh composition. Here again, symmetry is always the easy and sure way, but getting more creative to find balance is way more interesting for you and your players. DON’T TRY TO DO EVERYTHING AT ONCE Side note: During this scene, walls are left naked to encourage the player to use powerful wallrun kicks instead of pick a gun and shoot his way out. Mirror’s Edge run & gun gameplay is shitty: it lacks feedback, slows you down and is overall very limited and boring. It’s like the designer didn’t want you to use guns. And it’s the case. They made a design decision, and it payed off. The game distanced himself from other FPSs, by emphasizing the lightweight running and hand-to-hand combat. Your level and your game don’t need to be the best at every possible thing you can find in games.MENTAL MAPPING Arica Harbor — Bad Company 2 Arica Harbor is one of the most played map in Bad Company 2. There are many reasons to that, and one of them is the depth and various situations it offers, while staying simple. Players can locate themselves really easily. They have a mini-map, the A,B,Cflags appear at all times on the screen. Flags are aligned along the main road. There are different heights in the map (to add verticality), but it is painless to remember: It goes down like a stair, from the mountain to the sea. You should always be careful about your players mentally mapping your layouts, especially when making a game aimed at a large audience. The easier it is for a player to remember where he went, how the level is arranged, the better his experience will be. To facilitate mental mapping you can provide unique props or details to help differentiate between two almost identical hallways, put floor numbers in stairs, vantage points, landmarks, focal points etc. Keeping the same logic throughout a level also helps a lot. If your game involves backtracking, mental mapping goes from important to REALLY FUCKING IMPORTANT. No-one wants to get lost in a game, trying to find an exit. Make sure you are helping the players as much as possible to avoid frustration.CUT THE NOISE As fun and tempting as it can be for a level designer, you shouldn’t add too much to your environment. Having dull and empty areas is not a good thing, but over-saturating it with props everywhere will just make it worse. Details in your map must not come in the way of playability. DO WHAT YOU ARE “Leper Squint” At the end of the day, you should still feel that the level you designed comes from you. These points are important, but it’s the only one you should always respect. It doesn’t matter how hard you try to make your level/game feel different, or look like a particular style, it will never feel unique unless you invest a part of yourself in what you create. . . . . . Alright, that was my advice on level design. I’m a piece of shit, so some of these points might seem wrong to other gamedevs, or wrongly named etc. But hey, feel free to call me out on it, or write your own advice piece. I like talking about LD in general so whether you have a different opinion, or are a beginner seeking advice, drop me a DM, a comment, a mail, shout my name really loud… be original, I’m not going to list all your options. Although they’re here. - Niels . . . . . *This article has been posted in its entirety with permission from the author Original Source: medium.com/ironequal/practical-guide-on-first-person-level-design-e187e45c744c Follow Niels: Website: fuckgamedev.itch.io/ Twitter: twitter.com/fuckgamedev
  3. This is perhaps the most comprehensive guide we've found on Color Theory that can be utilized by level and game designers. It's broken into a 3-part series. What follows is a brief section of the third and final article in the series. This is the article where the real magic happens! The full article contains a ton of example images. Please follow the link at the end to reap the full benefits of the authors work. Quick SummaryIn the previous two parts of this series on color theory, we talked mostly about the meanings behind colors and color terminology.While this information is important, I’m sure a lot of people were wondering when we were going to get into the nitty-gritty of actually creating some color schemes.That’s where Part 3 comes in. Here I’ll be talking about methods for creating your own color schemes, from scratch. I’ll cover the traditional color scheme patterns (monochrome, analogous, complementary, etc.) as well as how to create custom schemes that aren’t based strictly on any one pattern. By the end of this article, you’ll have the tools and skills to start creating beautiful color palettes for your own design projects. The best way to improve your skills is to practice, so why not set yourself a goal of creating a new color scheme every day?A Quick ReviewLet’s start with a quick review of what was covered in parts 1 and 2. In part 1, we talked about how all colors have inherent meanings, which can vary depending on the country or culture. These meanings have a direct impact on the way your visitors perceive your site, sometimes consciously and sometimes subconsciously. The colors you choose can work for or against the brand identity you’re trying to create. In part 2, we covered color terminology: hue (what color something is, like blue or red); chroma (how pure a color is, the lack of white, black or gray added to it); saturation (the strength or weakness of a color); value (how light or dark a color is); tone (created by adding gray to a pure hue); shade (created by adding black to a pure hue); and tint (created by adding white to a hue). These are important terms to know as we move forward and create our own color schemes.Traditional Color Scheme TypesThere are a number of predefined color scheme standards that make creating new schemes easier, especially for beginners. Below are the traditional schemes, with a few examples for each. The basic, twelve-spoke color wheel is an important tool in creating color schemes. MONOCHROMATICMonochromatic color schemes are made up of different tones, shades and tints within a specific hue. These are the simplest color schemes to create, as they’re all taken from the same hue, making it harder to create a jarring or ugly scheme (though both are still possible).Monochromatic schemes are easy to create, but can also be boring when done poorly. Adding in a strong neutral like white or black can help keep things interesting.Examples:Here are three examples of monochrome color schemes. For the most part with these schemes, the first color (if we look at this from left to right) would likely be used for headlines. The second color would be used for body text or possibly the background. The third color would likely be used for the background (or body text if color #2 was used as the background). And the last two colors would be used as accents or within graphics. Creating A Color SchemeCreating your own color schemes can be a bit intimidating. But it’s not as complicated as many people think. And there are quite a few tricks you can employ to create great color palettes right from the start. We’ve been over the different types of color schemes above. Now, let’s try creating a few of our own. There are plenty of tools online that will help you create a color scheme, but let’s forget about those for now and just use Photoshop.Let’s try breaking away from the color scheme types already mentioned, and create some custom palettes (which is what a set of colors that don’t follow one of the predefined traditional patterns are technically called). While it’s important to know the ways that different colors interact and how traditional schemes are created, for most design projects you’ll likely create palettes that don’t strictly adhere to any predefined patterns.So, for the purposes of our project here, we’ll create three color palettes each for two different websites. Our hypothetical clients are a fitness app and a high-end women’s subscription box service.We’ll start with a basic monochromatic scheme, just to get a feel for each. While I mentioned that traditional color scheme patterns aren’t used as often in design, monochromatic color schemes are the exception to that rule. You’ll likely find yourself using monochromatic schemes on a fairly regular basis. For our subscription box site, here’s a traditional monochromatic scheme, with light gray added in as a neutral.For our fitness app, we’ve gone with a color scheme made up of shades and tints of gray.This is almost a split-complementary color scheme, but we’ve used yellow (which is complementary to purple) and a muted red along with gray.Adding a couple shades of red to the gray color scheme adds a lot of visual interest and the potential for creating extra emphasis on certain parts within your designs.Sometimes your color palettes will grow and evolve as you add more colors. Here, we’ve gotten rid of the purple and yellow, and instead kept the muted red and added in some blues. It’s a cleaner, more modern palette that better fits the brand.While this color scheme at first glance looks like another standard gray and red palette, if you look more closely you’ll see that the grays are actually tones of blue. Blue and red make up two thirds of a tetradic color scheme, but work just fine together without yellow, especially when the red is kept pure but the blue is toned down to the point of almost being gray. HOW MANY COLORS?You’ll notice that throughout this post we’ve used color schemes with five separate colors. Five is a good number that gives plenty of options for illustrating the concepts here, and it’s a workable number in a design. But feel free to have more or fewer colors in your own schemes. A lot of websites might only use three colors in their designs. Others use only two. And some might use eight or ten (which is a lot trickier than using fewer colors). Experiment and use as many or as few colors as you need to for your design. But you may want to start with a palette of five colors, and then add or subtract as you see fit and as you progress through the design process.The easiest way to add a color is to start with one of the predefined, traditional color schemes and then work out from there. That at least gives you a bit of direction as far as which other colors to consider.ConclusionWe’ve really only just touched on color theory in this series. There are color consultants who have literally spent years refining their ability to choose colors that are appropriate to any situation and that can complement any brand.The best way to learn to create beautiful color schemes is to practice. Create a scheme on a daily basis. You can use automated tools to do this at first (like Capture’s tool for creating schemes from images), or just open up Photoshop or Sketch and start.If you see a particularly beautiful or striking color in your daily life, try creating a scheme around it. And take advantage of all the sites out there that let you upload your color schemes and organize them for later reference. This makes all those color schemes more practical and easier to use in the future. Click this link to view the article in its' entirety. Though it may seem as if we've included a lot of info in this recap, I promise you that it is only scratching the surface of what's covered in the full article. It's worth looking at for the multitude of color schemes alone: https://www.smashingmagazine.com/2010/02/color-theory-for-designer-part-3-creating-your-own-color-palettes/ Follow Cameron Website: http://cameronchapman.com/ Twitter: https://twitter.com/cameron_chapman Instagram: https://www.instagram.com/cam_chapman/ Follow Next Level Design Join the Forum: http://www.nextleveldesign.org/index.php?/register/ Follow us on Twitter: https://twitter.com/NextLevelDesig2 Discuss on Discord: https://discord.gg/RqEy7rg
  4. This is perhaps the most comprehensive guide I've found on Color Theory that can be utilized by level and game designers. It's broken into a 3-part series. What follows is a brief section of the second installment in the series. The full article contains a ton of example images. Please follow the link at the end to reap the full benefits of the authors work. Quick Summary: If you’re going to use color effectively in your designs, you’ll need to know a few color concepts, as well as color theory terminology. In Part 1: The Meaning of Color of this color theory series, we covered the meanings of different colors. Here, we’ll go over the basics of what affects a given color, such as adding gray, white, or black to the pure hue, and its effect on a design (with examples).HueHue is the most basic of color terms and denotes an object’s color. When we say “blue,” “green,” or “red,” we’re talking about hue. The hues you use in your designs convey important messages to your website’s visitors. Read Part 1 of this series for the meanings conveyed by various hues. EXAMPLES Using a lot of pure hues together can add a fun and playful look to a design, as done in the design of this website. Pure red is a very popular hue in Web design. This site also incorporates other pure hues as the main photo changes. HeadOfffice uses such a bright pure yellow hue that it’s almost difficult to look at. ChromaChroma refers to the purity of a color. A hue with high chroma has no black, white, or gray added to it. Conversely, adding white, black, or gray reduces its chroma. It’s similar to saturation but not quite the same. Chroma can be thought of as the brightness of a color in comparison to white.In design, avoid using hues that have a similar (but not identical) chroma. Opt instead for hues with chromas that are either exactly the same or at least a few steps away from each other. EXAMPLES Combining a variety of hues with the same chroma creates a harmonious background pattern. The difference in chroma between the pink and dark purple on this site provides solid contrast in the design. The low chroma colors in this design contrast nicely against the black typography. ConclusionWhile you don’t necessarily have to remember all of these technical terms, you should be familiar with the actual concepts, especially if you want to master part 3 of this series (in which we create our own color schemes). To that end, here’s a cheat sheet to jog your memory: Hue is color (blue, green, red, etc.). Chroma is the purity of a color (a high chroma has no added black, white or gray). Saturation refers to how strong or weak a color is (high saturation being strong). Value refers to how light or dark a color is (light having a high value). Tones are created by adding gray to a color, making it duller than the original. Shades are created by adding black to a color, making it darker than the original. Tints are created by adding white to a color, making it lighter than the original. Click this link to learn more about each of the aspects of color listed in the conclusion above: https://www.smashingmagazine.com/2010/02/color-theory-for-designers-part-2-understanding-concepts-and-terminology/ Follow Cameron Website: http://cameronchapman.com/ Twitter: https://twitter.com/cameron_chapman Instagram: https://www.instagram.com/cam_chapman/ Follow Next Level Design Join the Forum: http://www.nextleveldesign.org/index.php?/register/ Follow us on Twitter: https://twitter.com/NextLevelDesig2 Discuss on Discord: https://discord.gg/RqEy7rg
  5. This is perhaps the most comprehensive guide I've found on Color Theory that can be utilized by level and game designers. It's broken into a 3-part series. What follows is a brief section of the first part of this series. The full article contains a ton of example images. Please follow the link at the end to reap the full benefits of the authors work. Quick Summary There are few things in design that are more subjective—or more important—than the use of color. A color that can evoke one reaction in one person may evoke the opposite reaction in another, due to culture, prior association, or even just personal preference. Color theory is a science and art unto itself, which some build entire careers on, as color consultants or sometimes brand consultants. Knowing the effects color has on a majority of people is an incredibly valuable expertise that designers can master and offer to their clients. There’s a lot to it, though. Something as simple as changing the exact hue or saturation of a color can evoke a completely different feeling. Cultural differences can compound those effects, with a hue that’s happy and uplifting in one country becoming depressing in another. This is the first in a three-part series on color theory. Here we’ll discuss the meanings behind the different color families, and give some examples of how these colors are used (with a bit of analysis for each). In Part 2 we’ll talk about how hue, chroma, value, saturation, tones, tints and shades affect the way we perceive colors. And in Part 3 we’ll discuss how to create effective color palettes for your own designs. Warm Colors Warm colors include red, orange, and yellow, and variations of those three colors. These are the colors of fire, of fall leaves, and of sunsets and sunrises, and are generally energizing, passionate, and positive. Red and yellow are both primary colors, with orange falling in the middle (making it a secondary color), which means warm colors are all truly warm and aren’t created by combining a warm color with a cool color. Use warm colors in your designs to reflect passion, happiness, enthusiasm, and energy. RED (PRIMARY COLOR) Red is a very hot color. It’s associated with fire, violence, and warfare. It’s also associated with love and passion. In history, it’s been associated with both the Devil and Cupid. Red can actually have a physical effect on people, raising blood pressure and respiration rates. It’s been shown to enhance human metabolism, too. Red can be associated with anger, but is also associated with importance (think of the red carpet at awards shows and celebrity events). Red also indicates danger (the reason stop lights and signs are red, and that warning labels are often red). Outside the western world, red has different associations. For example, in China, red is the color of prosperity and happiness. It can also be used to attract good luck. In other eastern cultures, red is worn by brides on their wedding days. In South Africa, however, red is the color of mourning. Red is also associated with communism. Red has become the color associated with AIDS awareness in Africa due to the popularity of the [RED] campaign. In design, red can be a powerful accent color. It can have an overwhelming effect if it’s used too much in designs, especially in its purest form. It’s a great color to use when power or passion want to be portrayed in the design. Red can be very versatile, though, with brighter versions being more energetic and darker shades being more powerful and elegant. EXAMPLES The bright red of the illustration on the homepage of Nacache Design’s site gives the page a ton of energy and vibrancy. The bright pinkish red of the background on Ming Lab’s website is inviting and passionate. The muted red on the Startup Lab website is energetic without being aggressive. Bigsound Buzz’s website uses a monochromatic design of various shades and tones of red, which in this instance gives a poppy, retro vibe. Build in Amsterdam’s website uses a vibrant red accent color that draws attention to the middle of the page immediately. Recap While the information contained here might seem just a bit overwhelming, color theory is as much about the feeling a particular shade evokes than anything else. But here’s a quick reference guide for the common meanings of the colors discussed above: Red: Passion, Love, Anger Orange: Energy, Happiness, Vitality Yellow: Happiness, Hope, Deceit Green: New Beginnings, Abundance, Nature Blue: Calm, Responsible, Sadness Purple: Creativity, Royalty, Wealth Black: Mystery, Elegance, Evil Gray: Moody, Conservative, Formality White: Purity, Cleanliness, Virtue Brown: Nature, Wholesomeness, Dependability Tan or Beige: Conservative, Piety, Dull Cream or Ivory: Calm, Elegant, Purity Follow this link for an in-depth look into each of the colors listed above in the recap: https://www.smashingmagazine.com/2010/01/color-theory-for-designers-part-1-the-meaning-of-color/ Follow Cameron Website: http://cameronchapman.com/ Twitter: https://twitter.com/cameron_chapman Instagram: https://www.instagram.com/cam_chapman/ Follow Next Level Design Join the Forum: http://www.nextleveldesign.org/index.php?/register/ Follow us on Twitter: https://twitter.com/NextLevelDesig2 Discuss on Discord: https://discord.gg/RqEy7rg
  6. Hey Everyone,Thank you for coming here to check out my article, I do appreciate it and I do hope that you come away from here feeling as if you have gained something. My intention for this article are two things:1. Help you see how you can apply Shape Theory to you levels moving forward.2. Encourage you after you have read this article to check out my video for you to gain even more Shape Theory Knowledge.Now you know my diabolical intentions for you and your mind let us waste no time and dive headfirst into the topic!Shape Theory has been around us for a long, long time, it is used in everyday life all around us. So much so that you might not have even realised consciously. This theory is not something solely restricted to game development, it is used in so many ways. (I am writing this article a week after Valentine days, still…no cards but I am going off topic) We can see how marketing use it to help sell you and your partner on such an event as Valentine’s Day, you may be wondering how?What is the logo image for this yearly event? It is, of course, the heart ….Not exactly what you are thinking about on this day, but this picture above is that of what a real heart looks like. Think about how marketing has changed this image to what a valentines heart looks like.Why would they do this?Simple! It is because of the fact this shape is far more inviting to us as people, the real truth does not scream romance, but by doing this it makes us get happy and more excited. So let us break this down.1. Overall this shape is very round and circular meaning it comes across cuddly, which means this shape is inviting to us.2. When a shape is more round we as humans perceive it as less of a threat and see it as more inviting.3. If you were to rotate this image by 90 degree, the point at the bottom would make this image look like an arrowhead, which then makes us think of Cupid and how we as people want to be hit by the arrow to find love.4. Valentine's heart is only one shape compared to a real heart which communicates how we want unison with our partner, when two become one.5. (This is more colour theory) It being a bright shade of red, remind us of roses and currently red is the most liked colour today.A real heart does not provide that symbolism so I hope this short break down gives you a glimpse into how changing a shape can have a big impact on how we as humans perceive an object. One last example would be the fantastic character design of Maleficent.Notice how she and her crow are made up of both pointy and sharp shapes. Making her scary, uninviting and not a trust worthy character. We can all feel this as soon as we the viewer see her for the first time. It is quite the opposite effect compare to that of the heart.All of this is conveyed to us the viewer on how we feel within an instant just by us reading/seeing these shapes. You have now just had a quick crash course in some basic shape theory, there is much more to know to understand how it works (Watch the video down below) but you can understand how it works.While this is very exciting it is not exactly level design, so let us break down how shape theory is used within level design.Shapes can encourage us to explore/move within our levels/open worlds in many different ways, take for example Zelda: Breath of the Wild. This may have less active OW compared to most in terms of side missions or bustling NPCs to converse with, however, everyone talks about how much time they have spent exploring Hyrule.You may be wondering well how did they encourage players to spend all this time within their ow if their ow did not have 100s of collectibles, side missions or world activates? Nintendo Devs actually revealed this in one of their presentationsIt was by using triangles! I know you may be thinking triangles? But this is such an interesting idea. The two arrows are showing how players reacted when faced with this option, players would either head to the top of the triangle to get a better view of their surroundings or would travel around it. What is even better with this is it the perfect way to tease information to the player as you can hide a landmark or cool area behind a triangle but still show enough to peek the interest of the player. Even if we just take the picture from above, we can see tons of triangles.In contrast to this we can take a game such as The Division, which is set in New York.The shape theory of this is far more square/rectangular because of two reasons:1. New York is like that as everything is based on a grid so city map and tall buildings create that square feeling2. It is a cover-based shooter, the cover needs to be readable for playersWith the fact that New York is a grid-based city combined with tall buildings, it gives a corridor like feeling to certain streets within the division. Rectangles communicate with our human brains differently.They like corridors push or pulls us through space making us want to progress through, but also if surrounded by enemies (which is often the case in the game) you can feel trapped with a sense of being weak and outnumbered which fits perfectly with the narrative of the game. We as players will also move differently.As you can see the diagram is different as players will most likely go around the square shape and the zigzag is that of the fire exits used on sides of buildings in New York, showing that getting to the top is not as a straight forward journey compared to that of the triangle.Let me show you how many squares can be seen in the above picture as we did with Zelda.You can now see that these simple shapes can really have a big impact on us as players as well as how we perceive and move throughout worlds within video games. This here though is just a taste of shape theory in Level Design, there is way more than just this.I wanted to give you a taste of this, to show you how important this topic is, but as I stated in my mission for this article. Now that you got a taste why not watch my presentation within level design to see what other amazing ways you can use it in order to improve you levels. *Note: This article has been posted in full on Next Level Design with permission from the author Follow MaxWebsite: http://www.maxpears.com/Twitter: https://twitter.com/maxpearsLevel Design LobbyYoutube: https://www.youtube.com/channel/UCncCrL2AVwpp7NJEG2lhG9QSpotify: https://open.spotify.com/show/03OTDRAPsAiocSLCTEiXBnEmail: leveldesignlobby@gmail.com Follow Next Level Design Join the Forum: http://www.nextleveldesign.org/index.php?/register/ Follow us on Twitter: https://twitter.com/NextLevelDesig2 Discuss on Discord: https://t.co/hkxwVml0Dp
  7. First a bit on color theory in a general practice: Wikipedia explains how the color wheel is set up to show 12 important colors. 3 are primary, 3 are secondary (mixing the primary colors) and 6 tertiary colors (created by mixing primary and secondary colors). The primary colors form a triangle, (Yellow, Blue and Red). The secondary colors (Green, Purple and Orange are directly in between the primary colors). These also form an upside down triangle. The tertiary colors are in between the primary and secondary colors and will provide the shades of colors. This is important because of how people perceive color combinations. Color Perception Colors found next to each other blend well, colors directly across contrast each other, and colors 1/3 the way round help accent. This means if yellow were chosen then the colors yellowy-green, pale orange, blue, red, and purple can all work with it if used properly. The key comes from the fact that if yellowy-green is chosen to work with the yellow then using blue becomes tricky as blue doesn't work cleanly with yellowy-green. The colors picked define everything about an image. What the viewers feel, where they look, what belongs there, and what they notice the most because they saw it first or last. This is a solid example of using complimentary colors to work to a nice visually appealing goal. The colors work together and you can see each color fitting in with the rest. The thing your attention is drawn to are the focus of the image such as the name, slogan, and properties. This is another approach to the same bottle, the color palette in its entirety has been shifted, no individual color changed on its own, all colors changed the same amount. It all still fits together proving that an established palette is the key to a solid image. This packaging demonstrates what not to do: colors have been taken randomly from everywhere thrown together to make a mess of what can be a good image. The viewers' eyes focus on the wrong things, and some properties fade into the background while the subtitle becomes more noticeable than the name. The first images were easy to look at but the last image was one that did not feel right at all. Taking the colors used as more than colors helps an image feel better to the viewer. Effect of Color A color does more than simply define how objects look. Sight is the primary human sense, whatever anyone see affects them deeply and carries more effect than just that of an image. Each color has feelings and meanings attached to it. Take red for example: a color of passion; of romance; of danger; of warmth; of blood. When asked to list what red means or feels this is a pretty standard list. What shade is picked and how it is used in the image can give any feeling or any meaning, but there's preconceptions to deal with like the ones above. Everyone knows a red light means stop, green means working, blinking means busy. When creating a scene if how each color is used in life is ignored, the viewers will misinterpret what they're supposed to see and feel. Every color has an inbuilt meaning and using that meaning is what allows level designers to create an atmosphere in their creations. For example in Half Life 2 pale blue lights to create a cold feeling in the combine citadel. Warm yellow lights to create a comfortable feeling inside the Black Mesa East. Half Life 2 uses this as a practice and every level designer can as well. The process starts by picking the mood of the area. The mood intended should affect what textures are picked and what lighting colors are used. For example a creepy swamp scene. Black is a very mysterious and threatening color so go with darker shades and low brightness values. Greens for algae and swampy water are expected as this is a swamp so include those into the palette. A hut is needed for this, so checking the color wheel orange is 1/3 round from green and a dark shade gives the color brown. This gives a perfect accent color that fits the mood. Using the brown a wood becomes a good choice for the hut. Now there are key colors, materials and a feeling, by sticking to textures and light that work with the theory of the key colors and moods the scene will make itself. A nearly ubiquitous rookie mistake is saturation. Most everything in the world isn't a specific color, it's white where one of its wavelengths comes through better. As such, a yellow lamp in theory should be a white lamp with a little bit of yellow added in. Unless you explicitly want to create over-saturation, keep this in mind! The only thing still missing is a point of focus. Point of Focus The point of focus is simply what the designer wants the player to be looking at. Whether its a distraction, the piece of a puzzle, the way out, or even the next enemy its where the player should be looking and going. While creating a true point of focus is beyond this article it can be done by any means including sound, motion, shape, light or color. As this is a color theory article only light and color shall be discussed. The simplest way to give a point focus with color and light is accents and contrasts, a bright light in a dark room, a blue traffic cone in a line of red ones. As stated before contrasts and accents can work well in a scene so its often not hard to include a point of focus. The key becomes making it the right object at the right time. Going back to the example of the swamp with the hut, the hut shall be made a point of focus. As the palette will be mostly dark colors and light the best way to make the hut stand out is to use bright light. Add a bright light to the hut and it becomes almost instantly a perfect point of focus, an accented color under contrasting brightness. The player will notice the hut and move towards it. Because it's noticeable, it stands out. However for a bad point of focus move to a red brick alleyway. Brick buildings lining both sides, there's an area on the roofs that's out of reach its intended use is where the enemies come from. Adding in a green dumpster and a greyish door the scene is finished. Red and green, contrasting colors, the dumpster fits in the scene. Upon playtesting the scene comes the problem. The player can't get up to the roofs, but the player will notice the dumpster as it's a contrast element. The player tries jumping around on the dumpster for 5 minutes because they think that's how they're supposed to get to the roof. The player hasn't noticed the door because its only a neutral color, it does not contrast or accent. This is the problem with point of focus in color and light. The wrong thing can be made to seem important if a scene is made carelessly. Source: https://developer.valvesoftware.com/wiki/Color_Theory_in_Level_Design
  • Create New...