Realism in Illustrator, Part 1: Gradients

For my Full Sail classes, I've had a couple assignments to create realistic mechanical objects in Adobe Illustrator. The above camera, for example, was my recent assignment. Before that, I also made a cork screw (below).

For the curious, here's a wireframe view of the camera illustration:

That's a lot of lines, right?? Don't worry, I will teach you how to do everything. This tutorial will be the first of an ongoing series on the tools I used to create these realistic illustrations. So grab a photo reference, open up Adobe Illustrator on your computer, and get ready to make amazing digital art!

Starting out

The first step for making any illustration in Adobe Illustrator is to block out the main shapes of your object, using the pen tool. (If you've forgotten how to use the pen tool, or have never used it before, refer to my previous tutorial.)

The photo you see behind this was my photo reference. It's helpful to have a photograph underneath your layers as you work so you can make your shapes proportional.

An image with a lot of detail may seem daunting, so start off big. Do what you know you can do. Make the largest shapes first, alternating colors so you can tell them apart. (You can see I was getting ahead in this picture and already applied a couple gradients and finer details, but you can ignore that.)

After you've made all your big shapes, start pen tooling the smaller details. Use the eye dropper tool to fill in your shapes with colors from the original photo.

However, with nothing but shapes and colors, your picture will not look very realistic. It may be a nice illustration, but it'll be a far cry from photorealism. That's when you start using the tools in Illustrator to make your object come to life. In this blog post, I'll introduce you to the most useful tool for illustrating mechanical objects: gradients.

Using gradients

If you look at the completed camera at the beginning of this blog post, you'll see that most of it consists of gradients. While gradients are probably the simplest of the tools I'll show you, they're also one of the most powerful, especially with mechanical objects (as opposed to organic objects).

Because of their perceived simplicity, gradients are probably overlooked in light of the more complex tools (such as gradient meshes, which I'll teach you in the next tutorial). But, I encourage you to really use gradients to their full potential. As my instructors used to say, a simple gradient goes a long way.

Here, I started to add some gradients. I still had some smaller details to add, though.

More gradients and details...

Now, I'll show you how to use gradients. First, open up a new Illustrator document and create two rectangles. Remove the strokes on both of them and fill them with whatever color you like.

Then, save this color by going to your swatches panel (if it's not open, bring it up by selecting Window --> Swatches) and clicking "New Swatch."

This window will open. Click "OK".

Your color will now be saved in your swatches panel. (We'll come back to this later.)

Now that your color is saved, select one of your rectangles and click the "gradient" button on the toolbar. 

Now your rectangle should look like this.

On the righthand side of your screen, you should see the gradient panel open up. (If not, go to Window --> Gradient to pull it up.)

Also, you may see a bar appear across your rectangle (for some reason, this bar was not visible in my screenshots). If the bar doesn't show up automatically, it can be accessed with the G key on your keyboard. Moving this gradient bar around will allow you to change the angle of your gradient. You can also change the angle with the drop-down menu on the gradient panel.

A few other things you can change. The gradient panel has a drop-down menu that allows you to change the gradient from "linear" to "radial". Radial is great for round shapes (although it looks a little awkward with our boxy shape).

For this example, I'm going to keep my gradient linear at its original angle measurement. But you can do whatever you like.

There's a problem with this gradient. It's black and white, and that's not what we want. We want it to be blue.

Go back to your gradient panel and double-click on one of the pointy box sliders underneath the gradient preview. This will bring up a new window where you can change the color.

Right now you're in the "color" window. Switch over to your swatches.

From there, select the color you saved earlier. Or, if you've changed your mind, pick any color you like.

Now, click on the other slider and make it the same color. It'll make the gradient look like one solid color again, but that's okay.

Click underneath the gradient preview, toward the middle, to create a new slider.

Double-click on it again. This time, switch over to "color".

Use the drop-down menu in the top right corner to make sure you are in HSB mode. HSB mode is the best mode for adjusting colors to look like natural highlights and shadows, which is what we are about to do.

Move the middle slider to the left to make a lighter color. Now your gradient has a highlight.

Change the color of the other two sliders to a darker blue. The best way to do this is with the bottom slider in HSB mode.

See, the rectangle on the right is already looking so much more rounded and three-dimensional than the rectangle on the left. There are still things we could do to tweak it, though. For example, the highlight in the middle is far too harsh; it could be smoothed out a bit.

We can do this by moving the little diamonds above the gradient preview.

 


Much better!

There's a lot you can do to adjust a gradient and add more detail. You can add more sliders, move them around, and experiment with changing their colors. (If you need to delete a slider, simply click the trashcan next to the gradient preview.)

Kind of looks like a metallic shine...

For a different effect, try alternating between lighter and darker colors to create a rippling texture. If a gradient just isn't working for you, you can always try adjusting the angle or switching between linear and radial.

That's the gist of gradients; play around with it and see what you can come up with!

Coming up!

Taking gradients to the next level with Illustrator's most infamous tool: gradient meshes.

Designing a Concert Flyer

A few months ago, I designed this poster in Adobe Illustrator for a Full Sail assignment.  The assignment was, in a nutshell, to turn an assigned, roughly-sketched-on-paper (or on-napkin) concept from a fictional client into a fully-designed, digital concert poster.  The project I chose was a poster for violinist "Ira Kozlov" from Ukraine.  This Ira Kozlov wanted the poster for his concert, which he allegedly scribbled out on paper for me, to evoke the style of Russian constructivism.  So, I did some research on this style.

Examples of Russian constructivism from Google Images







There were a few things I noticed throughout all the pictures I saw.

1) The posters were all very simplistic, using lots of geometric shapes and silhouettes.

2) Their messages were clear, bold, in-your-face militant, and easy to understand in a glance.

3) There was a pretty consistent color scheme of black, red, white, and yellow.

4) The posters generally followed a minimalist design, with an effective usage of blank space.

I kept these styles at the forefront of my mind as I turned Kozlov's poster concept into a clean, minimalist, bold design.  Choosing the violinist silhouette, conductor's hand, Kozlov's signature, and text at the top were all "Kozlov's" ideas.  But there were several decisions I made along the way to make this design work in the way I thought it should.

Wireframe view in Illustrator and normal view

First, I chose to make the background red, both to relate it to the Russian constructivist style, and to allow the black silhouettes to stand out.

Second, I decided to use yellow to draw the viewer's eye to what was important, and to allow those elements to pop off the page.  Ira Kozlov's name was most important, and also the silhouette of him playing violin was one of the focuses of the graphic. (You may notice, even the angles of the shadow, the conductor's hand, and the slanted text boxes draw the viewer's eye toward the violinist.)

Third, (speaking of the text), I chose to slant all the text to help give the flyer a sense of movement and interest, a technique I observed a lot in examples of Russian constructivism.

Fourth, I placed the info in black rectangles (again, constructivist style, and also very minimalist and modern), using white text against black to make that text pop - but still not popping as much as the yellow text, which is where the viewer's eyes would travel first.

What other design techniques do you see used in this flyer?  If you are a designer, is there anything you would have done differently, had you been the one in my place?  Leave your comments below!

Art History

I know this isn't exactly a "digital art tutorial", but having a knowledge and understanding of art history is important even for digital artists. It's also incredible for inspiration. Already, reading the textbook for my Art History class has given me so many ideas for digital pictures and models to create, both of a purely historical sort and a fantastical sort... (if only I knew the software well enough to produce them!)

Here are just a few random, miscellaneous things I've learned so far in Art History:

* Post and lintel architecture consists of two upright beams with a beam sitting on top. Stonehenge is an example. Some doorways were also formed this way.

* In Ancient Egyptian art, people were portrayed in stiff, unnatural poses. Heads were in profile; eyes are seen from the front; shoulders were seen from the front; and legs were in profile, with one foot in front of the other.

* A relief sculpture is partially carved out of its background material. ("Whew, what a relief I don't have to carve the whole thing!") A sculpture in the round is entirely carved out and free-standing. (You can walk all the way around it.)

Example of a relief sculpture

Example of a sculpture in the round

* In Medieval Spain, the combination of Christian and Islamic influence resulted in a style known as Mozarabic. 

* Ottonian art consisted of many carvings made from wood and bronze. The name "Ottonian" came from the rulers of that time, Otto I, Otto II, and Otto III. (That's a lot o' Ottos!) (Say that aloud three times fast and you'll see how brilliant I am. Okay, okay... it's not actually very funny. I'll go retreat into a nerdish corner now.)

* In the Romanesque period of art in Europe, many beautiful castles and churches were built. Some churches would have columns with zigzagging "v" patterns called chevrons.

Chevrons (image from paradoxplace.com)

* Some common features of Medieval churches:
(a) Mosaics on walls
(b) Stained glass
(c) Domes
(d) Political as well as religious functions
(e) Used as a site for pilgrimages

Medieval church with stained glass

Now, I want to hear from you! What are some aspects of art history that inspire you? What is your favorite historical piece of art? Do you know an interesting snippet of art history that you'd like to share? Or, do you have any other comments related to art history? Answer one or all questions in a comment below!

Photoshop Cave Painting

Today I finished my first digital art assignment at Full Sail University. For my Art History class, I was assigned to make a "prehistoric"-style cave painting in Photoshop.

This activity taught me a few things about Photoshop. I'll briefly show you how I made the rock wall, added texture, and created a light source.

1. Rock Wall

First, open a new document in Photoshop.

Then, set your foreground and background colors to a light and dark color for your rock wall.

Go to Filter, Render, and select Clouds.

To add a touch of realism, add some noise.

2. Add Texture

Switch over to channels.

Create a new channel. It will be called "Alpha 1". 

Go to Filter, Render, and select Difference Clouds. Then, continue to select Difference Clouds until you get a pattern you like.

This texture will be applied to the rock wall in a second; but first, we need to add a light.

3. Light source

Switch back over to layers. Then, go to Filter, Render, and select Lighting Effects.

This cool lighting tool will then come up. You can adjust the size of this light, its intensity, its shape, its color, and more, until you get it to the effect you want. 

Then, before you hit "okay" on the light, go to the properties panel, click on "Textures", and select "Alpha 1."

You will then have a very rocky-looking texture from your Alpha 1 channel. You can adjust the height to make it very subtle, or very rough. Play around with it and see what you can make!