STUDIO MODULE 2: PROJECT 3 - ENVIRONMENT ASSETS IN ILLUSTRATOR
STUDIO PROJECT 3 - 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
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.
Decide 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 highly recommend working with a side-scrolling format, as this is what is used in all of the video tutorials, and is the most straightforward.
It is fine to work with a different format as well, such as isometric, or a 2D/3D hybrid environment that works with perspective, however, since these are more complex formats, 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 a vertical format.
Setting Up Illustrator File + Illustrator 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.
Creating Background + Mid-Ground elements
Follow the tutorials below to build out background and mid ground elements. 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.
Optional tutorial - converting characters assets to pixels
This step is completely optional, and shows how to convert your pixel-based character asset into vectors. If you do not want to do this now, or would like to finish it later, simply export a Transparent PNG file of your character assets to use as a place holder, or just copy and paste them. 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.
Creating Mid-ground elements + More detailed features
Follow the tutorials below to construct more detailed and interactive features or obstacles, such as trees, boulders, switches, buildings or building parts, machinery, fences, vehicles, etc. These should be sized relative to the character asset proportions or placeholders.
Working with Symbols and Pattern Swatches
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.
Export MAIN configuration
Create + Export Configuration 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?
Environment collage / mood board
Main Configuration Environment
Second Configuration Environment
Also, a few reminders of your options with this video format:
Pop out of Canvas and watch in a new tab if any of the features aren't working
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.
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.