STUDIO PROJECT 3 - Exploring ENVIRONMENT ASSETS in ILLUSTRATOR

Be sure to review the Project 3 Description in Canvas BEFORE starting these tutorial videos. The Canvas description contains all of the instructions and requirements, while this page contains video tutorials that cover each of the project-processes in more detail.

This project will introduce Adobe Illustrator and vector editing concepts. Not all game artists use Illustrator to build out environments, and it is not a specific “environment development” program. Additionally, there are many other uses for vector editors in game art production, development, design and beyond. From a practical standpoint, this assignment is a great way to explore many aspects of the program, including some that relate to game art production processes or concepts - this is in no way the only option for creating, testing or implementing environments or environment assets.

Approximate Total Video Time - 3 to 3.5 Hours

Step 1: create reference mood board / collage

For this studio exercise, you will build out an “in-game” environment with different environment assets and elements. These assets will be based on an environment collage and/or a mood board that you will develop in Photoshop.

This mood board / collage can be very rough, and should include photographs, colors and/or textures that you will base your environment on. This environment should be something significant to you. It can be an imagined setting that is constructed from multiple locations, or it can be based more directly on a single specific place. It can be a natural setting, a more urban / industrial setting, or something in-between. While it must be based on photographic reference images or IRL observations, the in-game environment does not have to appear “realistic” or tied to reality. This will be the environment that you will implement your 2D characters into for future studio projects.

Step 2: Determine game format + Screen Size / Ratio

Before starting, choose which format you will be using for this project - top-down or side-scrolling.

If you do not have a preference, I recommend working with a side-scrolling format, as it is the most straightforward.

For folks who have a lot of experience with vector graphics and 2D asset design, it is fine to work with a different format, such as isometric, or a pre-rendered hybrid environment that works with perspective {similar to Hades}, These are MUCH more complex formats, and their specific production techniques are not addressed in this tutorial. If you do choose to work with one of these formats, be sure to include all of the required components or their equivalents - and note them if not obvious.

Next, determine if your game will be standard 16:9 ratio widescreen format, or work with something different, such as a vertical format if you are envisioning a game like a vertical scroller.

Step 3: Illustrator SETUP + Tool Basics

Create at least 2 art-boards with a size that fits the proportion of whatever screen size you are working with. Copy and paste the collage and any other inspiration elements into the document workspace to work with as a reference image.

The step below can be the most optimal way to quickly bring in placeholder character assets that are the most flexible and look the best in Illustrator. If you do not want to do this now, simply export a Transparent PNG file of your character assets from Project 2 to use as a place holder. They will be pixelated, and you will need to enlarge them, but this step is just for size approximation and will not be counted in the grade for this project. If you did not complete Project 2, you can create some simple placeholder assets from rectangles.

STEP 4: Creating Background elements + DEPTH

Follow the tutorials below to build out background elements that convey a sense of depth. If you are working with a side-scroller format, background elements will be things like the horizon or skyline, that are not navigable. If you are working with a top-down format, these will be more navigable spaces applied to different map features such as water, forests, pathways, different land types, or more human-made constructions such as streets, sidewalks, buildings, etc.

Regardless of format, these elements can be initially created with simple shapes, working with the transform and arrange processes, and applying different colors, gradients and opacity properties to them.

Step 5: Incorporating Textures + Features Using Patterns + Symbols

Follow the tutorials below to construct more detailed and interactive features or obstacles. These should be sized relative to the character asset proportions or placeholders.

While creating more depth ad features, experiment with Symbols + Textures {Patterns} as described below. Apply at least 2 different textures to different environment assets you have already constructed. Use the symbol-making process to create at least 5 instances of the same symbol within your environment.

Step 6: Exporting Compositions

You only need to use one of the two export methods described here. If you have Save for Web in your version of Illustrator use this first one. You do not need to watch the second one.

If you were able to export using the video above, you do not need to watch the video below.

DONT FORGET TO CREATE + Export CoMPOSITION 2

Make minor changes to your symbol - such as a color or other graphic change - and reposition at least 1 feature element. Export this and submit as version 2. This is so we can see that you are working with the Symbol tool, and utilizing groups and layers.

review checklist - what’s Due?

• Reference Photo Collage / Mood board

• Main Environment Composition

• Second Environment Composition

Also, a few reminders of your options with this video format:

1. Pop out of Canvas and watch in a new tab if any of the features aren't working

2. There are fullscreen and CC (Sub-title) options available in the right hand corner. For being YouTube auto-captions, these are pretty clear. I think they must have improved their algorithm. Please email me with any accessibility needs.

3. If you are feeling pressed for time, but don't want to miss anything, you can watch with audio in 1.5 speed by hitting that little gear icon.