Created with Adobe Firefly by Danica Do

Adobe Illustrator

For a student of Design, perhaps no software is more important than Adobe Illustrator. Artwork created with this program can be used in video, print, animation and, more recently, even 3D modeling. We'll get started with something simple, then see how far each of you can take your designs!

Step 1

As we always do when starting off, make a new folder in OneDrive where all the project files are stored.
This time the name of the folder is:

241028 Vector Graphics Project Folder

Follow these steps to get started with our first practice design:

Open Adobe Illustrator
Choose "New File", click on the "Web" tab and select the Web-Large preset. It's 1920 x 1080, so everything we make will be easily compatible with the video resolution we are already familiar with.
Copy the text below and name your file under Preset Details in the upper right hand corner:
241028 Sample Graphic - Firstname Lastname
As soon as you click "Create" in the bottom right and the document opens up, use the menu option "File --> Save As" and save your blank document to your new project folder!

NOTE: When you first save a file in an Adobe program, it will ask if you want to save in the Adobe Cloud or on the computer. Don't use the Adobe Cloud - we already use OneDrive; it is more reliable on NEISD computers.

Screenshot showing the creation of a new Illustrator file

"Save on Computer" and click "Don't Show Again"

Step 2

As with all Adobe programs, Workspaces arrange what's on the screen differently according to what you are trying to do. Switch to the "Essentials Classic" Workspace or it is going to be very hard find the tools we'll be using first. Alas, Adobe has added as new button shortcut in the upper right hand corner to quickly switch and reset Workspaces. I'll still sing my infamous song for you if you need it though!

What's so special about Illustrator?

Working with Vector graphics is very different from Bitmap graphics. Instead of manipulating a fixed quantity of pixels (like Photoshop does), Adobe Illustrator uses what are essentially math formulas to draw lines, curves, shapes and gradients that are perfectly formed no matter how large or small you want them to be. You can "rasterize" an Illustrator image and turn it into as many pixels as you like, but keep in mind, it is a one. way. trip.

Watch on YouTube

Please Just Watch

This overview video from my "classic collection" is just as relevant today as when I made it several years ago. Photoshop and Illustrator may look similar on the surface, but they work in fundamentally different ways. It's important to begin to understand the power that vector graphics give a designer.

Step 3

Strokes

The term "Stroke" means some special in Illustrator - it is the actual line or curves between anchor points. The thickness of the stroke is known as its "Weight" and is generally measured in "Points". A straight line has two anchors, whereas a curved path can have several anchors that define the shapes of the curves.

Watch on YouTube starting at 2:28

Drawing Lines

After saving your blank "Web-Large" formatted file to your computer (we are using OneDrive, so always use the "Save to Computer" option) we'll draw some lines in a specific way and change their width, but not just by making them thicker along their whole path. This video starts at two and a half minutes in because we use OneDrive now.

Step 4

Watch on YouTube

Drawing Circles

Using the Shape tool lets us create all manner of shapes without having to draw them manually. Holding down modifier keys like Shift and Alt make this tool more powerful. Two things to make sure of: 1) Are you drawing on the correct layer? 2) Is any part of your design currently selected?

Filling with Gradient Colors

Fill is the color inside the path defined by its anchor points. Careful control over gradient fills is one of the skills you have to practice that propels your artwork into the "WOW!" zone. Without them, designs have a flat appearance that isn't nearly as appealing, especially when animating your art.

Step 5

Watch on YouTube

Export a Bitmap (JPG)

Once a design is complete, it need to be "rasterized" - converted to a standard format for use in other programs like Photoshop or Google Sites. You can't display an Illustrator file on your portfolio without doing this - we are exporting a JPG at High quality.

Follow the export settings instructions carefully so you have a JPG that is 8000 x4500 pixels. "Use Artboard" trims off anything that went off the edges (the ends of the lines in this case). Choosing JPG gives you some additional options affecting the quality and resolution of the final image.

Snipping Your Evidence

Take a snip the specific way shown in the above video as well, so you can show you were able to follow all the instructions for this practice project. It will have the file name, the Layers panel and a slice of the design showing your concentric gradient circles.

Learn More

Adobe In-App Tutorials

Don't wait for me to make a video tutorial - Adobe has a number of step-by-step ones that can even show you exactly where a tool or option is located if you ask it nicely. Make this birdhouse using basic shape tools.

Page updated

Report abuse