I remember a year ago I was having so much trouble vectoring my letterforms. I had a decent understanding of the Pen Tool, but had no idea that there are minor techniques that do wonders for your type to create those smooth curves you're looking for. 

This tutorial will hopefully answer all your questions regarding vectoring letterforms and vectoring nearly anything for that matter. The same process can be utilized for anything you compose within Illustrator. In the case of lettering, the key is to have relatively few anchor points while utilizing proper point placement and a variety of other tricks to perfect those curves, angles, widths, etc.

Three things to note before we get started:

First, the process below is utilizing some work I already created in a previous tutorial. For your practice and experience, I suggest creating/using your own piece of lettering, rather than recreating mine. It's truly the best way to learn! I want you to take the information below and apply it to your very own lettering so you'll have a finished piece that you can truly call yours! 

Second, this tutorial isn't about teaching you how to use/understand the Pen Tool. If you don't understand how it works or its functionality, I suggest reading up on that before you begin—it'll only make things easier later on.

Third, I want you all to know that this tutorial might seem a bit jumbled up and all over the place, but I promise it's for the sake of teaching! I just want to share everything and anything to help your vectoring process. Long story short, it won't be a streamlined beginning and end. There will be a beginning and there will be an end, but it'll take us some time to get there!

Keep an open mind, and I promise we'll create great things. Let's begin!

1. Preparing the Tools You Will Need

• Computer—PC or Mac. Either one will get the job done!
• Adobe Illustrator 
• Initial sketch/scan of the lettering you want to vector
• Pen or pencil

For this tutorial, you're going to use a sketch of some previous lettering you may have done from the previous tutorials. We're going to focus on taking that sketch and redrawing it in vector format. 

2. Plotting Your Points on the Extrema

Before we begin working on the computer, we're going to practice vectoring by hand! With paper! Crazy, right? I promise you it'll give you a much larger understanding and appreciation for the wonderful Pen Tool.

Now, what does "extrema" mean? Firstly, it's plural for extremum. In mathematics, that generally means the maximum or minimum. In the case of lettering, we're talking about the extreme opposites of the letter to compose it with bezier handles. For example, the extrema of the letter "O" would be the north and south anchor points that form the curve. The east and west anchor points on the side allow you to distribute weight and width.

Take a look at this circle below. You can see the shape is being evenly created by four main points. Those are the "extrema" of the letter "O".

Notice that the handles are evenly balanced and distributed as well. This same technique should be applied within your lettering. Make sure your handles are all balancing the workload and not allowing just one handle to be extremely long and carrying all of the weight.

Step 1

Download the attached lettering if you'd like to use mine. If not, feel free to use your own! From here, let's begin drawing where the anchor points would go. Go ahead and use a pencil or pen anddraw circles wherever you think you would place those anchor pointsin Adobe Illustrator. 

Don't worry about if you're right or wrong—just go for it and see what you currently think may be right. Later throughout this tutorial and further practice, you'll be amazed at your growth / new knowledge.

Step 2

Next, take that same piece of lettering and begin to draw rectangles around each letterform. We're using an easy trick to understand where you'll plot your points on the "extrema" of your letterforms. Wherever the rectangles touches your letter is where the anchor point should lie. Now, that's not to say that your letterform should only have four anchor points since there are four sides to a rectangle. This just gives you a great starting point. 

Later on, we will begin with plotting the extrema in Illustrator, and then adding additional anchor points for particular curves or maybe increasing some weight in your letterform. Every letterform will differ, so this process isn't set in stone. Ultimately it'll give you a head start in the right direction, and then it's up to you to determine what looks "good" or what looks "correct". 

3. 0°, 45°, 90°: Handle Angles

Now, before we get too deep into this section of the tutorial, I want to say that 0°, 45° and 90° aren't necessarily the only angles you should place your handles at. Again, it all comes down to what looks good and using your own judgement to determine if it could use a random angle of 15°, for example.

So, what's so special about horizontal, vertical, and diagonal (45 degree) angles? First, utilizing similar angles keeps things consistent across your lettering. Second, those angles are key to forming the smoothest curves. Ever noticed little points or edges in your lettering that are caused by anchor points? Well, that can easily be fixed with proper anchor point placement and the proper angle of your handles. 

Let's get to work!

Step 2

After drawing out your "The" lettering, we're now going to begin taking it apart piece by piece to vector. 

I'm going to start with the stem of the "T". As you can tell, I'm utilizing those horizontal anchor point handles as well as two not so mathematical angles. Remember, not every handle needs to be horizontal. It's truly what you think may look best. For this stem, I started with all of the handles horizontal, and then tweaked the two to fit my liking.

All in all, this entire stem was created with just four anchor points and a little trial and error. 

Step 3

This is where things get a little crazy. For this particular example, I decided to vector the "Th" connection together to create one single shape. Each anchor point is equally balanced and equally distributing the curvature. As for where to begin plotting your anchor points, it's all a matter of preference. The letterforms generally dictate where to begin. For me, I work left to right, so I began bydrawing the loop connection of the "T" and ended at the stem of the "h".

Let's keep pushing forward!

Step 4

Next,I formed the shoulder of the "h"(the second stem if you will). Every piece of this lettering is broken down into separate shapes so you can later make edits to individual pieces rather than the entire piece.

Step 5

The last step is to create the "e".Utilizing just eight anchor points, I was able to create the right form without adding more points to adjust the width, contrast, etc.

Begin wherever you'd like, but for me personally, I began by forming the crossbar of the "e", circled that shape around to form the bowl, and finished it off with the tail.

And there we have it! Our finished "The". Remember to plot those points on the extrema, finesse those handles until perfection, and you're golden! Patience is key!

I've included the below example as well, so you can see a completely different style of the word "The" while still using similar horizontal and vertical handles.

4. Additional Vectoring Tips & Tricks

Vectoring sure is time-consuming even for a master. No matter what, it's a lot of fine-tuning and correcting those curves, anchor points, etc.

In this section of the tutorial, I hope to shed some more wisdom to speed up the process just a bit more. For simplicity, I'm going to be utilizing the letter "O" or a circle shape to demonstrate a lot of these tricks. Even though it's a simple shape, the methodology and practice behind the tip can be used for every single letter.

Step 1

I call this technique the crossover. As you begin to vector your lettering, you may find it easier to apply this crossover technique to control the widths and angles of parts of your letterforms. In the example below, you can see I created an extra anchor point to allow me to control what is called the "crotch" of the "N". Essentially, it allows you to move and alter one portion of your letterform without disturbing another. 

In the bottom gif example, this shows exactly what I mean by altering one side without disturbing another. Now, this "A" construction definitely isn't correct by any means. It's just a perfect way to display what the crossover technique can accomplish.

Step 2

The Ellipse Tool and Rectangle Tool within Illustrator can become your best friends if you just think about what shapes are composing each letterform. For example, the letter "O" has two ellipses: one for the width and another ellipse on the inside to form weight. So, if you just create two ellipses, stacked on top of each other, you can form the letter "O" within seconds. 

Additionally, if you wanted to continue and create another letter such as an "H", you can utilize the Rectangle Tool. Each stem and the crossbar of the below "H" was formed with three separate rectangles. You can later expand and merge them if you'd like one complete shape.

Hopefully the sped-up gif process below shows exactly what I mean. I'm just using simple shapes to form these letters. 

Step 3

In the below example, I utilized the Width Tool within Illustrator. It definitely can come in handy at times. With this tool, you're essentially plotting where you want your width to be distributed. In this example, I wanted the left and right sides of the stroke to be .525in while the top and bottom remained .125in. This distributed the weight evenly and formed a nice high contrasted letter "O".

As you can see from the example, the left is just a stroke—that was before I applied the Width Tool, while the right is after the Width Tool has been applied.

This tool can definitely help speed up vectoring certain letterforms, especially script. Just remember to draw with "strokes" and add the contrast to your letterforms with the Width Tool after.

The downside to the Width Tool is that when you go to expand your stroke, it forms a massive amount of extra anchor points that you don't need. You can see what I mean in the image below. All those tiny red dots are anchor points!

So if you wanted to make edits after it was expanded, it would be rather difficult if you didn't have the original stroke to edit.

5. Final Vector Piece

Alright guys, it's time to knock out the final vectoring project since we just learned all about how to vector! We're going to begin where we left off earlier in the tutorial and take this New York City piece to completion.

Step 1

Taking this piece by piece, begin vectoring your letterforms one at a time. Utilize the crossover technique to be able to adjust an area of your lettering without disturbing another part of it. For this particular piece of lettering, I had very few vertical and horizontal handles. But I still plotted my points on the extrema which allowed me to create the shapes you see. 

Step 2

After vectoring the "New", let's start the next word: "York". Use the same process and vector each piece by piece. You can probably see the collection of anchor points within the "K". That is because I drew each part of the "K" as separate shapes to edit later if need be. So the stem and the two legs are all individually drawn, creating a total of three shapes to form the "K". 

Note that it's okay if everything overlaps, since we'll be filling these shapes later on.

Step 3

The last word to vector, "City". You know what to do: begin plotting those points and carefully finesse your handles to your liking. Draw each letter separately as you can see below—it'll help the editing process later on.

Step 4

There we have it! After you've completed vectoring the whole piece, you can give the lettering a fill instead of a stroke so you can see how the positive and negative space are interacting.

Step 5

Even after you think you're done vectoring, you're probably not!

There's tons of editing to do after you "fill" the shapes because you can then see what needs more contrast, more kerning, etc. In this instance, I made lots of minor edits to help the overall color. Additionally, I altered the shape of the "Y" to extend into the negative space of the "N".

Step 6

The last step! For this piece, I added little "notches" to the enter and exit strokes of the letterforms. How would one vector something like this? Just remember to break things down into simple shapes or strokes again. For me, I knew it would be perfect to utilize some simple strokes created with the Pen Tool, but I changed the "Variable Width Profile" of the stroke to create the triangular shape. You can see what I mean in the process below.

Conclusion

I took the liberty of filming a very sped-up video of the whole lettering process. It took me a good two hours to complete this piece. Again, patience is key if you want your vector lettering to look exactly how you sketched it out! Feel free to watch the process below and see the extra step I took to take the vectored lettering to the next level.

The below New York City piece is the finished vector after adding lots of extra details. If you're curious as to how to create depth, texture, color combinations, etc., then my next tutorial will be perfect for you! Stay tuned for that in the next month or two.

I'm sure at this point you've practiced a good amount to hopefully become even more comfortable with vectoring than you already were. We've covered a lot of material, and now it's time for you to put this knowledge to the test. Keep practicing what you've learned because it only gets better with time, I promise! Keep it up!

As always, if you have any issues or questions, feel free to leave a comment below and I'll be able to help you out. Good luck!

In the following steps you will learn how to create a detailed post box illustration in Adobe Illustrator. For starters you will learn how to set up a simple grid using the grid and the Snap to Grid feature along with basic tools and vector shape building techniques. Next, you will learn how to add color, shading and highlights for your shapes using linear and radial gradients, a bunch of effects, and some blending techniques. Finally, you will learn how to add a subtle shadow for your post box, a simple background and some envelopes.

1. Create a New Document and Set Up a Grid

Hit Control-N to create a new document. Select Pixels from the Units drop-down menu, enter 600 in the width and height boxes, and then click on the Advanced button. Select RGB, Screen (72ppi), and make sure that the Align New Objects to Pixel Grid box is unchecked before you click OK.

Enable the Grid (View > Show Grid) and the Snap to Grid (View > Snap to Grid). For starters you will need a grid every 5 px, so simply go to Edit > Preferences > Guides > Grid, and enter 5 in the Gridline every box and 1 in the Subdivisions box. Try not to get discouraged by all that grid—it will make your work easier, and keep in mind that you can easily enable or disable it using the Control-" keyboard shortcut.

You should also open the Info panel (Window > Info) for a live preview with the size and position of your shapes. Do not forget to set the unit of measurement to pixels from Edit > Preferences > Units > General. All these options will significantly increase your work speed.

2. Create the Starting Shapes

Step 1

Pick the Ellipse Tool (L) and focus on your Toolbar. Remove the color from the stroke, and then select the fill and set its color to R=204 G=12 B=11. Move to your artboard and simply create a 135 x 150 px shape—the Snap to Grid should make your work easier.

Step 2

Return to your Toolbar, replace the existing fill color with a random orange and pick the Rectangle Tool (M). Create a 115 x 30 px and a 135 x 75 px shape and then place them exactly as shown in the following image.

Step 3

Select the three shapes made so far, open the Pathfinder panel (Window > Pathfinder) and click the Minus Front button. In the end your red shape should look like in the second image.

Step 4

Focus on the top side of your shape and pick the Direct Selection Tool (A). Select both anchor points, focus on the top bar and simply enter 15 px in that Corners box.

This feature is only available for CC users. The best solution to replace this effect would be the Round Any Corner script that can found in this article: 20 Free and Useful Adobe Illustrator Scripts. Save it to your hard drive, return to Illustrator and grab the Direct Selection Tool (A). Select the same anchor points and go to File > Scripts > Other Script. Open the Round Any Corner Script, enter a 15 px radius and click OK. The end result might look a bit different, but it's really not that noticeable. Feel free to try a different value for the radius. In some cases you will have to increase/decrease the value mentioned in that Corners box.

Step 5

Return to your Toolbar, replace the existing fill color with R=204 G=12 B=11 and pick the Rectangle Tool (M). Create a 135 x 155 px shape and place it exactly as shown in the first image. Using the same tool, create two 10 x 50 px shapes and place them as shown in the second image.

Step 6

Reselect all the shapes made so far, return to the Pathfinder panel and click the Unite button. In the end your shape should look like in the second image.

Step 7

Disable the Snap to Grid (Shift-Control-") and then go to Edit > Preferences > General and set the Keyboard Increment to 5 px.

Make sure that your red shape is selected and make two copies in front (Control-C > Control-F > Control-F). Select the top copy and hit the left arrow button from your keyboard twice to move your shape 10 px to the left. Reselect both copies made in this step, move to the Pathfinder panel and click the Minus Front button.

Make sure that the resulting group of shapes is selected, replace the existing fill color with a simple blue (R=39 G=170 B=225) and then use the Shift-Control-G keyboard shortcut to Ungroup this fresh group. Now, select only the tinier blue shape and get rid of it using the Delete button from your keyboard. In the end things should look like in the third image.

Step 8

Make sure that your red shape is selected and make a copy in front (Control-C > Control-F > Control-F). Select this new copy and move it 10 px to the right using the right arrow button from your keyboard. Reselect both red shapes, move to the Pathfinder panel and click the Minus Front button.

Make sure that the resulting group of shapes is selected, replace the existing fill color with that same blue (R=39 G=170 B=225) and then use the Shift-Control-G keyboard shortcut to Ungroup your fresh group. Again, get rid of that tinier blue shape, and in the end things should look like in the third image.

Step 9

Reselect both blue shapes and make copies in front (Control-C > Control-F). Select only the copies, replace the existing fill color with a simple grey (R=188 G=190 B=192) and then hit Control-8 to turn these two shapes into a simple compound path.

3. Create the Dent and the Handle

Step 1

Enable the Snap to Grid (Control-').

Using the Rectangle Tool (M), create a 115 x 45 px shape, set the fill color to R=0 G=148 B=68 and place it as shown in the first image. Select your grey compound path, make a copy in front (Control-C > Control-F) and bring it to front (Shift-Control-]). Select this copy along with your green rectangle, and click the Minus Front button from the Pathfinder panel.

Make sure that the resulting shape stays selected and simply replace the existing fill color with the linear gradient shown in the following image. Keep in mind that the blue number from that Gradient image stands for Location percentage.

Step 2

Using the Rectangle Tool (M), create a 115 x 10 px shape, place it as shown in the first image and fill it with the linear gradient shown below. Focus on the top side of this new rectangle and switch to the Direct Selection Tool (A). Select the left anchor point and drag it 10 px to the right, and then select the right anchor point and drag it 10 px to the left. In the end your rectangle should turn into a trapezoid as shown in the second image.

Step 3

Using the Rectangle Tool (M), create a 10 x 45 px shape, set the fill color to R=247 G=148 B=30 and place it as shown in the first image. Focus on the bottom side of this new rectangle and grab the Direct Selection Tool (A). Select the left anchor point and simply drag it 10 px up as shown in the second image.

Step 4

Reselect your bigger red shape and make a copy in front (Control-C > Control-F). Select it along with your orange shape and click the Intersect button from the Pathfinder panel. Focus on the top side of the resulting shape, switch to the Delete Anchor Point Tool (-) and simply click on the anchor point highlighted in the second image to remove it. In the end things should look like in the third image.

Step 5

Make sure that your orange shape is still selected, replace the existing fill color with the linear gradient shown in the following image and then make a copy in front (Control-C > Control-F). Select this copy, drag it to the left and place it as shown in the second image. Make sure that this copy stays selected and go to Object > Transform > Reflect. Check the Vertical box and then click the OK button. In the end things should look like in the third image.

Step 6

For this step you will need a grid every 1 px, so go to Edit > Preferences > Guides & Grid and enter 1 in the Gridline every box.

Using the Ellipse Tool (L), create a two 7 px circles, set their fill color to R=134 G=2 B=1 and make sure that you're placing them as shown in the first image.

Switch to the Rectangle Tool (M), create two 5 x 7 px shapes, pick a random blue for the fill color and place them as shown in the second image. Make sure that both rectangles remain selected and go to Effect > Stylize > Rounded Corners. Enter a 2.5 px Radius and click OK.

Reselect the Rectangle Tool (M), create a 25 x 5 px shape, place it as shown in the third image and use that same blue for the fill color. Make sure that this new rectangle is selected and simply hit Shift-Control-X (or go to Effect > Apply Last Effect) to add that same Rounded Corners effect applied for the previous blue shapes.

Step 7

Reselect your three blue rectangles and go to Object > Expand Appearance. Make sure that the resulting shapes are selected and click the Unite button from the Pathfinder panel.

Step 8

Disable the Snap to Grid (Shift-Control-") and then go to Edit > Preferences > General and set the Keyboard Increment at 1 px.

Make sure that your blue shape is still selected and make two copies in front (Control-C > Control-F > Control-F). Select the top copy and move it 1 px up using the up arrow button from your keyboard. Reselect both shapes made in this step and click the Minus Front button from the Pathfinder panel. Select the resulting shape and simply replace the existing fill color with R=134 G=2 B=1.

Step 9

Make sure that your blue shape is selected and go to Object > Path > Offset Path. Enter a -1 px Offset and click OK. Duplicate the resulting shape (Control-C > Control-F), select the copy and move it 1 px up using that same up arrow button from your keyboard. Reselect both shapes made in this step and click the Minus Front button from the Pathfinder panel.

Make sure that the resulting shape stays selected and open the Appearance panel (Window > Appearance). Replace the existing fill color with a simple white (R=255 G=255 B=255) and then click that "Opacity" piece of text to open the Transparency fly-out panel. Change the Blending Mode to Soft Light and lower the Opacity to 30%.

Step 10

Make sure that your blue shape stays selected and focus on the Appearance panel. First, select the fill and replace the existing color with R=154 G=2 B=1. Move to the stroke, set the color to R=144 G=2 B=1, align it to inside and make sure that the Weight is set at 1 px.

Keep focusing on the Appearance panel, make sure that the entire path is selected (simply click that "Path" piece of text from the top of the panel) and go to Effect > Stylize > Drop Shadow. Enter the attributes shown in the left window, click OK and then add the other two Drop Shadow effects indicated in the following image.

Step 11

Reselect all the shapes that make up your handles and simply hit Control-G to Group them. Make sure that this new group is selected and place it roughly as shown in the second image.

Step 12

Reselect your biggest red shape, make a copy in front (Control-C > Control-F) and bring it to front (Shift-Control-]). Make sure that this copy stays selected, lower its Opacity to 50%, change the Blending Mode to Soft Light and then replace the existing linear gradient with the radial gradient shown in the second image. Keep in mind that the yellow zero from the Gradient image stands for Opacity percentage.

4. Create the Top Side

Step 1

Enable the Snap to Grid (Control-'). Return to gridline every 5 px, so simply go to Edit > Preferences > Guides & Grid and enter 5 in the Gridline every box.

Using the Rectangle Tool (M), create a 115 x 10 px shape, set the fill color to R=247 G=148 B=30 and place it as shown in the first image. Select your grey compound path, make a copy in front (Control-C > Control-F) and bring it to front (Shift-Control-]). Select this copy along with your orange rectangle and click the Minus Front button from the Pathfinder panel. Ungroup (Shift-Control-G) the resulting group, get rid of the tiny orange shapes and keep the large one.

Step 2

Disable the Snap to Grid (Control-').

Make sure that your orange shape is selected, make a copy in front (Control-C > Control-F), move it 1 px up and then duplicate it (Control-C > Control-F). Select this new copy and move it 1 px up. Reselect both copies made in this step and click the Minus Front button from the Pathfinder panel. Fill the resulting shape with the linear gradient shown below and lower its Opacity to 15%. Remember that the blue numbers from the Gradient image stand for Location percentage while the yellow ones stand for Opacity percentage.

Step 3

Make sure that your orange shape is selected and make two copies in front (Control-C > Control-F > Control-F). Select the top copy and move it 1 px up. Reselect both copies made in this step and click the Minus Front button from the Pathfinder panel. Fill the resulting shape with black (R=0 G=0 B=0), lower its Opacity to 50% and change the Blending Mode to Soft Light.

Step 4

Make sure that your orange shape is selected and make two copies in front (Control-C > Control-F > Control-F). Select the top copy and move it 1 px to the left. Reselect both copies made in this step and click the Minus Front button from the Pathfinder panel. Fill the resulting shape with black, lower its Opacity to 40% and change the Blending Mode to Soft Light.

Step 5

Make sure that your orange shape is selected and make two copies in front (Control-C > Control-F > Control-F). Select the top copy and move it 1 px to the right. Reselect both copies made in this step and click the Minus Front button from the Pathfinder panel. Fill the resulting shape with black, lower its Opacity to 40% and change the Blending Mode to Soft Light.

Step 6

Reselect your orange shape, focus on the Appearance panel and simply replace the existing fill color with the linear gradient shown in the following image.

5. Create the Main Body Shapes

Step 1

Enable the Snap to Grid (Control-').

Pick the Rectangle Tool (M), create a 115 x 100 px blue (R=28 G=117 B=188) shape and place it as shown in the first image. Using the same tool, create a 115 x 45 px orange (R=247 G=148 B=30) shape and place it as shown in the second image. Finally, create a 115 x 5 px green (R=0 G=148 B=68) shape and place it exactly as shown in the third image.

Step 2

Switch to gridline every 1 px, so go to Edit > Preferences > Guides & Grid and enter 1 in the Gridline every box.

Using the Rectangle Tool (M), create two 115 x 1 px black shapes and place them right below your green and orange rectangles as shown in the following image.

Step 3

Using the Rectangle Tool (M), create two 1 x 145 px black shapes and place them as shown in the following image.

Step 4

Reselect all four thin black rectangles and click the Unite button from the Pathfinder panel. Make sure that this new shape stays selected, lower its Opacity to 20% and change the Blending Mode to Soft Light.

Step 5

Using the Rectangle Tool (M), create a 113 x 1 px white shape and place it as shown in the following image. Make sure that this new rectangle stays selected, lower its Opacity to 30% and change the Blending Mode to Soft Light.

Step 6

Using the Rectangle Tool (M), create a 115 x 1 px white shape and place it as shown in the following image. Make sure that this new rectangle stays selected and lower its Opacity to 10%.

Step 7

Return to gridline every 5 px, so simply go to Edit > Preferences > Guides & Grid and enter 5 in the Gridline every box. Using the Rectangle Tool (M), create a 115 x 5 px black shape and place it as shown in the following image. Make sure that this new rectangle stays selected, lower its Opacity to 15% and change the Blending Mode to Soft Light.

Step 8

Select your blue rectangle, focus on the Appearance panel and simply replace the blue with R=194 G=2 B=1.

Step 9

Select your orange rectangle, focus on the Appearance panel and simply replace the orange with the linear gradient shown in the following image.

Step 10

Select your green rectangle, focus on the Appearance panel and simply replace the green with the linear gradient shown in the following image.

6. Add Some Text

Step 1

Pick the Type Tool (T) and open the Character panel (Window > Type > Character). Select the Calibri font, make it Bold and set the size at 20 px. Simply click on your artboard, add the "MAIL" piece of text, set its color to R=179 G=2 B=1 and then go to Effect > Stylize > Drop Shadow. Enter the attributes shown in the left window (in the following image), click OK and then add the other Drop Shadow effect indicated in the following image.

Step 2

Make sure that the Type Tool (T) is still active, focus on the Character panel and decrease the font size to 6 px. Simply click on your artboard, add the "Collection Time 5:30 pm" text, set its color at R=164 G=2 B=1 and then go to Effect > Stylize > Drop Shadow. Enter the attributes shown in the following image and then click OK.

7. Add Color, Shading and Highlights for the Right Leg

Step 1

Select your grey compound path and simply remove it using the Delete button from your keyboard. Disable the Snap to Grid (Control-').

Make sure that your right-hand blue shape is selected and make two copies in front (Control-C > Control-F > Control-F). Select the top copy and move it 1 px to the left. Reselect both copies made in this step and click the Minus Front button from the Pathfinder panel. Fill the resulting shape with black, lower its Opacity to 25% and change the Blending Mode to Soft Light.

Step 2

Make sure that your right-hand blue shape is selected and make two copies in front (Control-C > Control-F > Control-F). Select the top copy and move it 2 px to the left. Reselect both copies made in this step and click the Minus Front button from the Pathfinder panel. Fill the resulting shape with black, lower its Opacity to 20% and change the Blending Mode to Soft Light.

Step 3

Make sure that your right-hand blue shape is selected and make two copies in front (Control-C > Control-F > Control-F). Select the top copy and move it 3 px to the left. Reselect both copies made in this step and click the Minus Front button from the Pathfinder panel. Fill the resulting shape with black, lower its Opacity to 15% and change the Blending Mode to Soft Light.

Step 4

Make sure that your right-hand blue shape is selected and make two copies in front (Control-C > Control-F > Control-F). Select the top copy and move it 1 px to the right. Reselect both copies made in this step and click the Minus Front button from the Pathfinder panel. Fill the resulting shape with the linear gradient shown in the following image and change its Blending Mode to Soft Light.

Step 5

Make sure that your right-hand blue shape is selected, make a copy in front (Control-C > Control-F), move it 1 px to the right and then duplicate it (Control-C > Control-F). Select this fresh copy and move it 1 px to the right. Reselect both copies made in this step and click the Minus Front button from the Pathfinder panel. Fill the resulting shape with black, lower its Opacity to 15% and change the Blending Mode to Soft Light.

Step 6

Select your right-hand blue shape, focus on the Appearance panel and simply replace the blue with the linear gradient shown in the following image.

8. Create Several Bolts

Step 1

Enable the Snap to Grid (Control-'). Switch to gridline every 1 px, so go to Edit > Preferences > Guides & Grid and enter 1 in the Gridline every box.

Using the Ellipse Tool (L), create a 3 px blue (R=39 G=170 B=225) circle and place it as shown in the first image. Duplicate (Control-C > Control-F) this tiny circle and make sure that the Ellipse Tool (L) remains active. Create a 2 px white circle and place it as shown in the second image. Select this new circle along with that blue copy and click the Intersect button from the Pathfinder panel. Make sure that the resulting shape stays selected, lower its Opacity to 70% and change the Blending Mode to Overlay.

Step 2

Reselect your blue circle, replace the existing fill color with the radial gradient shown below, and then go to Effect > Stylize > Drop Shadow. Enter the attributes shown in the following image and click OK.

Step 3

Reselect the two shapes that make up your tiny bolt and Group them (Control-G). Multiply this new group (Control-C > Control-F) and spread the copies as shown in the second image.

9. Create the Other Three Legs

Step 1

Reselect the groups that make up the bolts along with all the shapes that make up the right leg of your post box and simply Group them (Control-G). Make sure that this new group stays selected and go to Effect > Distort & Transform > Transform. Drag the Move-Horizontal slider to -103 px, check the Reflect X box and enter 1 in the Copies box, and then click the OK button.

Step 2

Return to gridline every 5 px, so simply go to Edit > Preferences > Guides & Grid and enter 5 in the Gridline every box.

Using the Rectangle Tool (M), create a 10 x 35 px shape, fill it with the linear gradient shown below and place it as shown in the first image. Using the same tool, create a 5 x 35 px black shape and place it as shown in the second image. Make sure that this new rectangle stays selected, lower its Opacity to 20% and change the Blending Mode to Soft Light.

Step 3

Reselect the two rectangles that make up the back leg and Group them (Control-G). Make sure that this new group stays selected and go to Effect > Distort & Transform > Transform. Drag the Move-Horizontal slider to -95 px, check the Reflect X box and enter 1 in the Copies box, and then click the OK button.

10. Create the Lock

Step 1

Using the Ellipse Tool (L), create a 5 px circle, set the fill color to R=66 G=68 B=81 and place it as shown in the following image. Make sure that this tiny new shape stays selected and focus on the Appearance panel. First, select the existing fill and add the two Drop Shadow effects shown in the following image. Next, select the stroke, set the color to black, align it to outside and then lower its Opacity to 30% and change the Blending Mode to Soft Light.

Step 2

Switch to gridline every 1 px, so go to Edit > Preferences > Guides & Grid and enter 1 in the Gridline every box. Using the Rectangle Tool (M), create a 1 x 3 px shape, set the fill color to R=46 G=48 B=61 and place it as shown in the following image.

11. Add Subtle Shading and a Simple Background

Step 1

Return to gridline every 5 px, so simply go to Edit > Preferences > Guides & Grid and enter 5 in the Gridline every box.

Using the Rectangle Tool (M), create a 10 x 15 px shape, place it as shown in the first image and pick a random orange for the fill color. Focus on the top side of this new rectangle and pick the Direct Selection Tool (A). Select both anchor points and simply drag them 10 px to the left.

Step 2

Make sure that your orange shape is still selected and focus on the Appearance panel. Replace the existing fill color with the linear gradient shown in the following image, lower its Opacity to 20% and then go to Effect > Blur > Gaussian Blur. Enter a 3 px Radius and click OK.

Step 3

Switch to gridline every 1 px, so go to Edit > Preferences > Guides & Grid and enter 1 in the Gridline every box.

Using the Rectangle Tool (M), create a 10 x 1 px black shape, lower its Opacity to 15% and place it as shown in the first image. Select this new, thin rectangle along with the blurred shape and Group them (Control-G). Make sure that this new group is selected and simply send it to back using the Shift-Control-[ keyboard shortcut.

Step 4

Make sure that the group made in the previous step stays selected and go to Effect > Distort & Transform > Transform. Drag both Move sliders to -15 px, enter 1 in the Copies box, click the OK button, and then go again to Effect > Distort & Transform > Transform. Drag the Move-Horizontal slider to -100 px, check the Reflect X box, enter 1 in the Copies box and then click the OK button.

Step 5

Using the Rectangle Tool (M), create a 165 x 20 px black shape and place it as shown in the first image. Focus on the top side of this new rectangle and pick the Direct Selection Tool (A). Select the left anchor point and drag it 25 px to the right and then select the right anchor point and drag it 25 px to the left. This should turn your rectangle into a simple trapezoid as shown in the second image. Make sure that it stays selected and simply send it to back using that same Shift-Control-[ keyboard shortcut.

Step 6

Make sure that your black trapezoid is still selected, lower its Opacity to 10% and go to Effect > Blur > Gaussian Blur. Enter a 10 px Radius and then click OK.

Step 7

Using the Rectangle Tool (M), create a shape the size of your artboard, send it to back (Shift-Control-[) and fill it with the radial gradient shown in the following image.

Step 8

Finally, you can learn how to create some envelopes in this detailed tutorial: Create a Detailed Envelope Illustration in Adobe Illustrator. If you're not in the mood to follow another tutorial, you can simply download the attachment and copy the envelope from that Ai file.

Congratulations! You're Done!

Here is how it should look. I hope you've enjoyed this tutorial and can apply these techniques in your future projects.

When beginner artists start their adventure with digital painting, or painting in general, all they see are colors. Just as drawing is about lines, painting is about putting colors all around and making them look consistent together. The problem is, color is a much more complex issue than line. 

Those are the same colors! What is the difference between them? It's not weaker contrast, as you may think, and it's not as easy to fix. If you want to know how to get rid of this muddy look of your colors, first you need to go back to black and white. Follow me to make a discovery that will change your artistic perspective!

Value vs. Brightness

When you learn about painting, one of the first lessons is about value—black, white, and all the grays in between. You come to the conclusion that they're for black-and-white paintings, and go straight to colors that seem to be far more interesting.

You learn that every Hue can be created out of three components: Red, Green, and Blue, and each of them may have a certain Brightness and Saturation. Just like in Photoshop's Color panel!

Sure, you do start from black, but apart from this there is no use for grays in color. No "Value" slider for any of the hues! But we can use Brightness instead, right? Some programs even call it Value!

Let's try a little experiment. I've painted three spheres: red, green, and blue. I've shaded them in decreasing Brightness with every step—from 100% at the top to 50% in the shadow.

This is how the shade of red changes on the sphere; it looks exactly the same at other spheres. Notice that Brightness is the only thing that changes. Is this our Value, too?

To see values in the picture, we can create a New Layer on the top, fill it with black, then change its Blend Mode to Saturation.

But... what happened? The red sphere looks darker than green one, and the blue sphere is almost black! How is it possible if we used exactly the same Brightness for them? The Saturation mode takes away only, well, saturation—not brightness. So how did we lose it?

If you paid attention to that lesson about three components making all the colors, you should guess the answer. 100% white is made of 100% bright Red, Green, and Blue. Obviously, 100% bright gray (white) is brighter than 100% bright red, green, or blue. The only solution is that there are two kinds of brightness, both included in the same slider.

Why? Just look at the RGB representation of white and red. 100% bright gray (white) is made of 255R, 255G, and 255B, while 100% bright red is made of 255R only. It's impossible for 255R to be the same brightness as 255R, 255G, and 255B all together!

Of course, you can add more G and B to your red to make it brighter, but guess what happens then!

Saturation is a measure of the purity of a color. The lower the Saturation, the muddier the color. If you use 255R only, the Saturation is 100%—because it's as pure as can be. Its Brightness is also 100%—because it's as much R as can be.

When you desaturate something colorful, as we did with the spheres, its Saturation is reset—colors are converted to gray. 255R (being 100% bright red) can't make 100% bright gray, because it would be white then—and white needs 255 of everycomponent to occur. So when you desaturate 100% red, its brightness gets reduced by the lacking 100% green and blue—two thirds of its full brightness.

Still, we don't get 33% bright red as a result. It's because Photoshop includes one more rule here—our eyes are not equally sensitive to every color. In short, Green seems the brightest to our eyes (59% of white), Red is the second one (30% of white), and Blue seems the darkest (11% of white). Does it make sense now?

When we desaturated the spheres, 100% bright red got reduced by 59% (brightness of the lacking 100% bright green) and 11% (brightness of the lacking 100% bright blue). 90% bright red got reduced by 53% (brightness of the lacking 90% bright green) and 10% (brightness of the lacking 90% bright blue). And so it goes!

If you sum all the brightnesses of the desaturated spheres, our original values magically come back:

But... it's math, right? Artists don't count while creating! Still, all these numbers were necessary to explain how 100% Brightness gets brighter (!) when decreasing Saturation. 100% Brightness can't get any brighter—it's value that increases.

So, Brightness = value only for grays. For every color (by color I mean something with Saturation and Brightness higher than 0) value is based on both Brightness and Saturation—with Saturation adding up to value when decreasing.

Why Is It So Important?

There can't be a realistic painting without proper values. Even when you experiment with color, you must know the rules you're breaking to make the style believable. When you know nothing about value, you just use colors as you see them in your palette—making them Brighter in light and less Bright in shadow. And then something very bad happens when you're trying to make yellow as dark as blue in shadow! 

The truth is that color makes a very small fraction of an image. A picture with proper values stands out on its own even in grayscale, and it will beat a colorful but value-ignorant picture every time. You can have a poor visual database, you may know nothing about anatomy, but if you master value, your pictures will be more eye-catching than the most refined sketches!

Beginner artists often start their picture in grayscale and add colors later, because this way they can safely focus on light and shadow. This is a great method—but only when you understand that light and value aren't the same.

This is the reason why we don't have a "Value" slider right beside (and not instead of) Brightness. Intuition tells us that something in light is always brighter than something in darkness, but it's very simple to prove otherwise—just put white card in shadow and black card in light. This is where value comes to help—it defines the brightness of an object in "neutral" lighting conditions. It simply means that some colors are brighter just like this, not because they're more illuminated than others.

The problem is our eyes can't tell value from brightness. We only notice various shades of gray, no matter where they come from. Moreover, the same object may appear bright or dark depending on the shade of its background! So it's not really about which shades you use—it's about how they all work together.

How to Learn to Make the Best of Value

Even when you know how value works and how to apply the rules to your paintings, it doesn't mean you know which values to use for an interesting effect. You probably see a photo or an illustration with very good lighting from time to time—why not learn from them?

When painting from a reference we tend to start with a sketch, and then we add details, one by one. The effect may be nice, but it doesn't really teach us anything about how the author planned it! Did they know where to put the proper values right from the start? How did they know they're going to work together? Not to mention that you have no idea where the author started, so you start from a random detail—and you can be sure that's not how you usually start your pictures.

To use a reference to learn about interesting use of values, we need to start from abstraction and then go into details—just as we would do with our own painting. Let me show you!

Step 1

Get a picture with interesting lighting and/or vivid colors, something you'd like to emulate in your works. I've found mine here, but you don't need to limit yourself to stock photos. As long as you don't post it anywhere, you can even study Mona Lisa—make old masters your teachers!

Step 2

Desaturate the colors as we did in the experiment before—this is the best method to achieve grayscale without disturbing values.

Step 3

Create a New Layer and fill it with white. Lower its Opacity to see the picture below only partially. Then create another New Layer and trace the picture. Yes, you heard right—tracing is not always a bad thing! Here we're learning about using values, so it would be a waste of time to practice copying lines.

However, if your goal is to learn how to paint without line art, skip this step. You will not find a better lesson than this!

Step 4

Select (Control-A) the picture, and then create a New File (Control-N)—the resolution will be copied. Come back to the original and copy the line art, and then paste it into the new file.

Go to Window > Arrange > 2-up Vertical. Both windows will be placed side by side, which is the best arrangement for working with a single reference. From now on, I'll be calling the window with a reference the original, and the other one the study.

Step 5

Go to the original. Click the layer with the image and go to Filter > Convert for Smart Filters. This way you'll be able to change the setting of a filter multiple times after the filter has been applied.

Go to Filter > Filter Gallery and select the Cutout filter from the Artistic list. Change the Number of Levels to minimum, and give it the minimal Edge Simplicity, and maximal Edge Fidelity.

The effect should be similar to this:

Step 6

Go back to the study and create a New Layer under the line art. Now the most important part begins. Without the Eyedropper Tool, reproduce the shades from the original. You can use your favorite brush for it, or you can even block the shades with the Lasso Tool—whatever you would use for a normal painting. If you want to have the same brush as me, in this tutorial I've shown how to create it.

The first thing you're learning here is to copy shades with your eyes. When you use the Eyedropper Tool, it takes away all the thinking from you—it's as if you were copying and pasting parts of a picture. It's turning yourself into a machine! If you want to take a lesson from this, reproduce the shades you see with your mind only. This way you'll understand which shades to use in the future, without any reference to look at.

Another thing you're learning is how to start a picture. Can you see where the light source is? Notice that skin reflects more light than shirt and hair—it's not because of their glossiness, but because of their value. Have you ever paid attention to the color of a material at this step? Well, you should from now on!

When we paint in grayscale, we often start by defining light and shadow, putting them uniformly everywhere. But why would you paint strong light at something that reflects almost none of it (like black)? It may feel awkward to plan such things at this early stage, but they're going to influence all the other stages—if you ignore them now, prepare for a lot of corrections later.

Step 7

Go to the original and double click the filter name on the layer. Change the Number of Levels to 3 and come back to the study.

Notice how shades that have already been placed change when new ones are being added. This is an important lesson—all the shades should work in a team, not individually. When introducing a new one, you need to make sure that it fits the others, and, if needed, adjust them.

Step 8

Change the Number of Levels to 4 and repeat. Adjusting goes on—as we're adding a brighter shade to the skin, we're also darkening the shirt to create three various values: one for shirt, one for hair, and one for skin.

You may have an important question now: "How do I know which values to use for colors that I haven't painted yet?" When we are not certain how it is all going to look after adding the final "color" layer, we tend to rush with the grayscale—because we want to see what we're painting as soon as possible! Then we add that last, magic layer and... something doesn't work.

The answer is simple: it's not colors that matter in the picture—it's their value. You can plan the craziest color scheme, and it will work just right if you used proper values in the first place. And what are "proper values?" The ones that work well together already in grayscale!

When working in grayscale, don't rush to see how your picture will look in color. If it doesn't look good in grayscale, colors will not help at all! If you want to trick your mind, imagine that there will be no color layer, that grayscale is your final goal, and paint with values only until they look great on their own. Make the colors optional!

Step 9

Change the Number of Levels to 5. We should nowhave enough details to hide the line art. Change the Opacity to 20% in both files, and this time create a New Layer above it in the study. We're going to paint over it until it disappears, or at least can be safely discarded.

Step 10

Notice that the filter sometimes loses the details that were there before.That's why at one point it's better to go straight for the maximal number of Levels and just finish the details. Line art should be redundant here!

Step 11

When you feel all the details are defined, remove the filter from the original image. Use your favorite blending technique to get rid of sharp edges (I've used the Mixer Brush Tool here). Doesn't it look much better than the traced line art now?

Step 12

Let's do an experiment here. Remove the desaturating layer and copy the colorful original picture. Paste it above the grayscale study and change its Blend Mode to Color. Surprisingly, the mode that so often washed off your colors, this time worked like a charm! If you ever wondered why the Color mode works so horribly, now you have the answer—it needs a proper base, and it's you who builds it.

Step 13

If you want to make this exercise even more valuable, use different line art for your study and put the same values on it, step by step. This way you'll better understand how to use them on your own in the future.

What Now?

I hope it was an interesting lesson for you! Before you go, take a few additional tips:

• A study, no matter how beautiful and refined, is not art. You paint it to learn something, not to impress others. Don't post your studies online, and don't even work with such an intention—it will switch your focus to the wrong side and you will learn nothing.
• When studying, focus only on the topic you're learning. Don't be hard on yourself for anatomical mistakes or wrong proportions—squint your eyes, see if the values look right, and keep going!
  
• Details are not only "small objects" in the picture—the number of shades counts, too. Start with a limited number of them, and add them sparingly as you go further. The more of them there are, the more detailed the objects should be.
  
• Save white and black for special occasions. They're very powerful when there's little of them in the picture—but when there's too much, they will look weak, with nothing more powerful to balance them.
• Don't start with a perfect plan—define where there's something dark, where bright parts are (regardless of the lighting), and then adjust the shades to this very general plan. That first stage should look almost like the final version when you squint your eyes.
• When learning from the real world, try to see values, not colors. Do it just after finishing a value study and see how easy it becomes for your mind after that exercise!
• When you get good at these studies, go to the next step—don't use any filter, but still paint all the levels one by one as if they were there.
  

In this tutorial you will learn how to use the Apophysis fractal program to create a Grand Julian style fractal from scratch. The Grand Julian style gets its name from the Julia set formula credited to the French mathematician Gaston Julia. Julian is a corruption of his last name with the addition of the “n” to stand for the numeric variable being applied to the formula.

At the end of this tutorial you'll be able to create a fractal similar to this one.

1. Setting Up the Base

Step 1

After opening Apophysis, click the Gradient button in the main toolbar to open up the Gradient Adjustment window. We will now be selecting a color palette with which to work. You may wish to adjust this later but for now we want something that will allow us to see the contrast between the various transforms we will be adding.

I have chosen 076_gris.landscape as my gradient. If you would like to follow along exactly with me, please do the same. In addition to this, change the Rotate setting to -14. This setting simply moves through the gradient to choose a new starting point. We've done this since the beginning color of the gradient is rather dark and thus makes the entire base dark and difficult to see.

Step 2

Close the Adjustments window and open the Editor from the main toolbar. We first need to clear out the random fractal that was generated and start with a clean canvas. Click New Flame in the top left-hand corner to reset the fractal to a blank state.

Step 3

We now have a transform with Linear = 1 setup. Locate the Variations tab in the Editor and change linear from 1 to 0. Scroll down the variation list until you find blur and change this to0.45.

You should now see a large orange circle in the preview window. This is the base for the fractal. It has a profound effect on the rest of the Julian texture and shape, and thus is paramount to the overall “feel” of the fractal. 

Step 4

Click the New Transform button at the top of the editor toolbar. This adds the yellow triangle Transform 2. Once again, locate linear in the variations tab and remove it by changing 1 to 0. Next, findjulian in this list and change its value to 1.

The Julian formula and this transform in particular will control the overall structure of the fractal. Even minute changes to this transform can drastically alter the overall appearance.

Step 5

Before moving onward, we need to make more vital modifications to Transform 2. Change the Weight value to something relatively high, such as 15. We want the rendering engine to give high priority to this transform and run the majority of pixel calculations through it.

Switch to the Variables tab. Change julian_power to 2 andjulian_dist to -1. These values project the Julian variation away from the center of the fractal rather than towards it as it was set up previously.

Finally, change to the Triangle tab. Rotate the transform 45 degrees (default 15 x3) counterclockwise. Move the transform up 0.3 units by clicking the up arrow 3 times with the default of 0.1 units. No doubt at this point you see a drastic change in the preview window.

Step 6

Next we will change the color of transform 2. This adjustment can be very time consuming and will need modification throughout the design process. Feel free to spend as much time as you like on it.

Switch to the Colors tab. Modify the Transform Color value from 0 to 0.943. Take note of the change in appearance of the overall fractal in the preview window. Changing the Color Speed setting also drastically impacts the fractal’s appearance. We will be leaving this setting as is for the moment, but feel free to adjust it and see what effect it has on your fractal.

At this point in the tutorial you have the very basic Julian setup. As the name of the tutorial implies, we want a Grand Julian! How do we make it grand? Follow along as we add intricate detail with more Julian transforms.

2. Adding the Details

Step 1

Now it is time to get creative with more Julian transforms. Each transform we will be adding will include a different amount of the Julian variation and modifications to the variables in the Variables tab.

Add a new transform by clicking the New Transform button in theEditor toolbar. This will add in a new, green transform: transform #3. In the Variations tab, change the linear value from 1 to 0. Find julian and change this value to 0.46. Notice this is 0.01 unit larger than our base Transform #1.

Switch to the Variables tab and change julian_power to 22 andjulian_dist to -1.

Finally change to the Colors tab and set the TransformColor to 0.726 and Color speed to -0.5.

Step 2

At this point, adding new details is as simple as duplicating the transform. Click the Duplicate transform button at the top of the editor to create Transform 4.

In the Variations tab, modify the value of julian to 0.56.

Switch to the Variables tab and change the julian_power value to 12.

Then to the Colors tab where you can adjust the variables to your liking. I chose the following settings:

Step 3

Let's now reduce the size of the blurred base transform. Switch toTransform #1 and on the Variations tab change the blur variation to 0.25. In addition, change the Weight to 2 to give more presence to the base. You should notice a drastic change to the fractal in the preview window.

Step 4

SelectTransform 4 again and then click the Duplicate Transform button in the toolbar. This will provide us with a new julian transform to work with.

Change things up this time and add 0.05gausian_blur to the transform on the Variations tab. Change the julian setting to0.3.

Switch to the Variables tab and set the julian_power to 26.

In the Colors tab, modify Transform color to 0.486 andColor Speed to -0.199.

You have now created your first Grand Julian fractal. There is still much customization that you can add, and some suggestions are provided below.

3. Finishing Up the Fractal and Rendering

Step 1

I personally am not a fan of the color scheme thus far. Close the Editor window for now and let's choose a different gradient from theGradient adjustment window.

Select007_fashion-bug and change the Rotate value to -122.

You'll notice that the word Rotation has a dropdown arrow beside it. Click this and select Saturation. Change this value to 10. This increases the saturation of the gradient. There are many other options in this dropdown menu to explore in adjusting the colors of your fractal.

Step 2

Now we need to make some adjustments to the framing of the fractal. We're going to do some simple framing for this fractal but I encourage you to experiment and find some more interesting angles and zooms.

Switch to the Camera tab of the Adjustment window. Change theRotation value to 45. Now take your mouse and left-click and drag over the word Scale to increase the zoom of the fractal. Do not use the Zoom slider as this will cause your fractal to render very slowly.

Step 3

Close the Adjustment window. Click the purple gear button in the main toolbar of Apophysis to open the Render window.

Choose the name and file destination for your fractal render.

Change the Density setting to 10,000. Filter Radius can be set to your preference. I like to go with higher values such as 1. Do not set the Oversample to a value higher than 2.

ClickStart to begin the render.

Congratulations! You've completed your first Grand Julian fractal from scratch all the way to final render. Now that you have the basics under your belt, it's time to explore the fractal further.

4. Take It a Step Further

Notice the incredible change to the fractal that adding one more Julian transform and changing the framing can create.

Try using different variations on the base transform (Transform #1). Experiment with the gradients window and colors tab of the Editor to find new pieces of the fractal that were previously hidden. Don't forget to try adding small amounts of other variations to the Julian transforms and see how they interact. 

Finally, use a Final Transform. This powerful transform can drastically alter the overall structure of your fractal and provide you with incredible new forms that you never thought of previously.

Here are a few more examples of some Grand Julians for your inspiration.

One of the most valuable pieces of equipment for digital drawing is the pressure-sensitive graphics tablet. The leading manufacturer of these tablets is Wacom, and its products are remarkable. Yet simply owning the device doesn’t necessarily translate to creating better digital artwork. Our new course, Mastering the Wacom Tablet in Adobe Photoshop, will teach you how to set up, customize, use, and master your own tablet.

What You'll Learn

In this comprehensive video course, Tuts+ instructor Kirk Nelson will teach you the basic skills of drawing with a tablet. You'l learn to navigate effectively with it in Photoshop, and then practise drawing with various different brushes. Finally you’ll complete a full drawing project using the tablet skills you’ve learned.

Watch the Introduction

Start Learning for Just $15

You can take our new course straight away by subscribing to Tuts+. For just $15 a month, you get access to this course and hundreds of others, with new ones added every week.

Digital publishing is an ever-growing industry. Both professional and self-published authors are taking advantage of the eBook medium to reach larger readerships and offer their literary work at great value prices.

The downside of this explosion in digital publishing is the fact that the market is becoming increasingly saturated, and it can be difficult to make your eBook stand out from the competition. Grabbing a potential reader’s attention as they browse the Kindle Book Store is the first step towards increasing your sales, and an effectively designed eBook cover is a huge factor in attracting the eye.

In this tutorial we’ll look at the Digital Publishing function in Adobe InDesign, and how you can create an effective eBook cover that works equally well at thumbnail and large size. 

1. An Important Note on Sizing

EBook covers come in a variety of sizes (both in terms of dimensions and file size), and sizing can vary widely depending on the eBook publishing site, whether that’s Amazon (Kindle), Kobo, Barnes & Noble, Apple iBooks, Lulu or Smashwords (among others!). 

What’s also not very helpful is the fact that these sites regularly revise their recommended sizing, as new eReaders are released or publishing technology evolves.

With this in mind, you should routinely check the sizing recommendations of the publishing sites you are hoping to sell your eBook through, and revise the dimensions of your cover appropriately. Otherwise you may get a nasty shock when your cover appears blurry or stretched on your eReader.

In this tutorial, we’ll go through the steps of creating an eBook cover for Amazon (Kindle), and follow their sizing guidelines. But you can make sizing adjustments to your own designs, if you’re planning to upload your book to a different publishing site.

Amazon currently recommends that, for maximum quality, eBook covers should be 2500 pixels along the longest side. This works on a ratio scale, so as long as the longest side doesn’t exceed 10,000 pixels, which is Amazon’s limit, you can create the cover to an 8:5 Width to Height ratio. This will create a tall, slim cover.

But Amazon’s flexible dimension requirements mean you can also make the cover a little broader, which will give your cover design a bit more breathing space along the width. A 9:6 ratio is used by some eBook authors on Amazon, and these covers often look a tad more professional. In this tutorial we’ll be setting up a cover 3200 px by 4800 px, which will still fit quite happily within Amazon’s requirements.

That’s the dimensions sorted, but you’ll also need to save your final cover file in a JPEG or TIFF format, with 72 dpi (dots per inch), that’s no larger than 50 MB. So, unless you want to compress your file very heavily, don’t be tempted to push the ratio and go all the way up to the 10,000 pixel limit.

2. An Equally Important Note on Design

Technical requirements aside, there’s really no use if your cover looks crisp and clear at the correct ratio, but fails to stand out effectively to a potential reader because of poor design choices.

Browse any eBook library and you can start to notice some common elements of effective covers:

Text Is Exaggerated and Legible

In a bookshop, you browse covers at their true size. You can pick them up and look at them closely. On a hard copy the title text and author name might not be the main focus of the cover—they may be balanced by or dominated by an image. The typography may be decorative, ornate or built into an illustrative element on the cover. 

EBook covers are completely different. You browse eBooks in an online library that’s made up of thumbnail images, usually no more than 105 by 160 pixels in size. 

So, for perspective, that’s about this big:

Not enormous, is it? You have to fit the title and author name onto that little square and make it legible, eye-catching and attractive. 

No mean feat, but don’t panic: if you set your text at a large size, in a contrasting color to the background, and in a clean, legible font, your cover will be eye-catching, even when set at a very small scale.

Clarity Is Prioritised Over Detail

EBook covers need to draw the eye immediately, and be able to communicate instantly the genre and mood of the book. You’ll notice that eBook covers often lack the detail that hard copy covers have. Their designs are simpler, and strong single photos or vectors perform better in this digital medium than complicated collage or illustrated formats.

Look at a few examples of best-selling eBooks and analyse their covers. More often than not they will use a simple combination of elements—perhaps a single clear photo plus contrasting text in a clear, legible font. They might not even include a photo at all—sometimes clear typography is all that’s used.

Any detail on the cover is lost when it’s reduced to thumbnail size, so there’s often little point in including complicated textures, gradients, ornamentation, small images or tiny text. 

So keep your cover design strong and simple.

Coloured Backgrounds Create Contrast

When potential readers browse eBook libraries online, cover images are almost always set against a white or pale background. 

EBook covers normally have a colored background to create contrast against the white background of the browser. 

If you really want your cover to have a pale background, a darker border can help the edge of the cover to pop against the white background, but a pale cover may still struggle to catch the eye.

Always try to give the background of your cover a dark or brightly coloured tint to create contrast.

3. Why a Design for Print Won’t Cut the Mustard

We’re going to walk through the steps for creating an eBook cover for this title, The Star Queen. In an earlier tutorial I created a cover for the paperback version of the book. Now imagine the author of The Star Queen wants the cover to be reformatted for an eBook format.

Now, why don’t we just take the paperback cover design, adjust the dimensions a little, and use that? Let’s look at the cover at small-scale, as a potential reader would see it in an eBook library. 

Hmm, it’s not looking quite as effective any more. The title is still visible, but the other sections of text aren’t legible at all. The ornate decorations at the top and bottom of the cover now look very faint, as does the border. The image is also now much less clear.

We need to rethink the layout of the cover completely, and tailor the design to appeal to an eBook audience.

Open up InDesign and we’ll walk through the steps of revising the cover for The Star Queen and adapting it for a digital medium.

4. Create a Document for Digital Publishing

Step 1

In InDesign, select New > Document from the Welcome window or go to File > New > Document. 

Under Intent, from the drop-down menu, select Digital Publishing.

You’ll notice that the units throughout the New Document window options switch to pixels. Under Page Size there are a range of options adapted for digital publishing. We’re going to create a custom page size, though, so select the last option in the menu, Custom... to open the Custom Page Size window.

Type ‘Kindle eBook Cover’ into the Name text bar, and set the Width to 3200 px and the Height to 4800 px. Click Add to add the size to your list of custom page sizes, for future use, and click OK.

Back in the New Document window, set the Margins on all sides to 50 px. Set the Bleed on all sides to 50 px as well. Even though you don’t technically need a bleed for digital designs, it is good practice to extend any colored elements on your design up to the bleed and past the page edge, as this will help avoid any unfortunate white lines around the edges of your cover.

Click OK to create the document.

Step 2

Creating your design across a series of layers makes your work easy to select, edit and lock. Let’s do that first.

Open the Layers panel (find it docked by default to the right-hand side of the workspace, or go to Window > Layers to open). Double-click the Layer 1 name to open the Layer Options window. Rename the layer as Background Color and click OK. 

Click the Create New Layer icon at the bottom right of the Layers panel or select New Layer from the panel’s drop-down menu. Double-click the default layer name to rename it as Island Image. Click OK.

Repeat the process to create a further three layers: Color Overlay, Starry Sky Image, and finally, at the top, Typography. 

When you’ve created all five layers, Lock all except the bottom layer, Background Color, by clicking in the blank space to the left of the layers’ names. Click on Background Color to activate it.

5. Build Up Color and Images for Contrast

Step 1

Remaining on the Background Color layer, select the Rectangle Tool (M) and drag to create a shape that's about 2140 px in Height, and that extends across the width of the page, up to the bleed on both sides. Position at the very top of the page. From the Controls panel running along the top of the workspace, set the Stroke Color to [None] and the Fill Color to [Black]. 

With the shape selected, go to Object > Effects > Gradient Feather to open the Effects window.

Keep the Type as Linear and set the Angle to 0 Degrees. Move the slider points across into roughly the positions shown, so the gradient gets lighter towards the bottom of the shape. 

When you’re happy with the result, click OK.

Step 2

Return to the Layers panel and Lock the Background Color layer. Unlock the next layer up, Island Image.

Select the Rectangle Frame Tool (F) and drag to create a frame that extends across the width of the page, and is about 3420 px in Height. Position so the bottom edge sits on the bottom edge of the bleed. 

We’re going to place the same images as we used in the paperback tutorial—this image of a mysterious island with a castle. I then opened the image in Photoshop for a bit of basic editing.

I applied a Channel Mixer Adjustment Layer to the image, setting it to Monochrome to drain the photo of color. I then resaved the image. 

Return to InDesign, select the image frame you just created, and go to File > Place. Select the saved black-and-white image. Click Open.

Double-click the image frame to directly select the image and, holding down Shift, drag to expand the image, so that the island fills the width of the page. Allow the island to sit towards the bottom of the frame.

We want the image to fill the frame, while leaving enough space for text to take up the bulk of space on the cover. Placing a wide image at the bottom of your cover is a good solution.

Step 3

With the image frame selected, go to Object > Effects > Gradient Feather. Adjust the Angle of the gradient to 90 degrees and shift the Gradient Stops into the position shown below. 

Click OK.

Step 4

Return to the Layers panel and Lock the Island Image layer. Unlock the next layer up, Color Overlay.

Open the Swatches panel by going to Window > Color > Swatches. Click the New Swatch icon at the bottom right of the panel or select New Color Swatch... from the panel’s drop-down menu.

Create a New CMYK Swatch, setting the values to the following: C=45 M=47 Y=0 K=0 to create a pale purple color. Click Add to drop it into the Swatches panel, then click OK.

Create a second new CMYK Swatch, setting the values to: C=19 M=14 Y=0 K=0, creating a pale grey color. Click Add and OK as before.

Step 5

Select the Rectangle Tool (M) from the Tools panel and drag to create a shape that extends across the whole page, up to the bleed on all sides. 

Set the Stroke Color to [None] and the Fill Color to your new purple swatch, C=45 M=47 Y=0 K=0.

With the rectangle selected, go to Object > Effects > Transparency and set the Mode to Multiply. 

Click OK.

Step 6

Back in the Layers panel, Lock the Color Overlaylayer and Unlock the Starry Sky Image layer. 

Select the Rectangle Frame Tool (F) and drag to create a frame that extends across the width of the whole page, up to the bleed on the top, left and right edges. Extend it down until it meets the bottom of the island (where the land meets the sea).

Go to File > Place and select a second image. This image of a constellation of stars is a great choice for adding interest and texture to the cover design. Click Open.

Select the Fill Frame Proportionally icon from the top control panel to arrange the image nicely in the frame. 

With the frame selected, go to Object > Effects > Transparency and set the Mode to Soft Light. 

Remaining in the Effects window, navigate down to Gradient Feather from the menu on the left. Set the Angle of the gradient to -90 degrees and manoeuvre the gradient stops into position along the far right quarter of the scale, as shown. 

Click OK.

6. Exaggerate Your Typography for Impact

You’ve given your eBook cover a moody, mystical background, using just two images and a color overlay. Great work!

Now you’ve set the scene for your cover’s typography. The title and author’s name should be exaggerated in size and set in a highly contrasting color. Let’s create it together...

Step 1

Still in InDesign, Lock the Starry Sky Image layer and Unlock the top layer, Typography.

Use the Zoom Tool (Z) to zoom in on the top area of the page. Select the Type Tool (T) and drag to create a long, narrow text frame that extends across the page, fitting it between the left and right margins. Position it at about Y position 200 px (view this from the left-hand side of the Controls panel running along the top of the workspace). 

Type ‘Author’s Name’ into the text frame and set the Font to Adobe Caslon Pro, Regular, Size 350 pt, All Caps, Align Center and increase the Tracking to 100 (or until the first and last characters touch the margin on the left and right sides of the page). Set the Font Color to [Paper].

Step 2

Scroll down to the center of the page, and select the Type Tool (T) again.

Drag to create a frame the width of the page and 1250 px in Height. Type ‘Queen’ into the text frame and set the Font to the free-to-download Almendra, which is a gorgeous font inspired by medieval and calligraphic type styles. 

Set the Font Size to 1260 pt, Align Center, and reduce the Tracking to -60 to pull the letters closer together. Set the Font Color to [Paper].

Position the text frame at around Y position 1830 px.

Step 3

Select the Type Tool (T) again and drag to create a text frame. Position it just above the ‘Queen’ text frame, and shifted slightly to the right. Type ‘Star’ into the frame and set the Font to Almendra, Size 1195 pt, Tracking to -30, and Font Color to the pale grey swatch we created earlier, C=19 M=14 Y=0 K=0. 

Position the frame so that the curve of the ‘S’ sits on top of the ‘Q’ of ‘Queen’, nestling it between the ‘Q’ and ‘U’, as shown.

With the text frame selected, go to Object > Effects > Outer Glow to open the Effects window. Set the Mode to Screen and reduce the Opacity to 60%. Set the Technique to Softer, Size to 60 px and both Noise and Spread to 12%. Click OK.

This has given ‘Star’ a suitably starry glow!

Step 4

Create another smaller text frame using the Type Tool (T), and set to the left side of ‘Star’. 

Type ‘the’ and set the Font to Henry Morgan Hand, an italicized, scripted font. Up the Font Size to 850 pt, and adjust the Font Color to [Paper]. 

Step 5

Download the symbol font IM Fell Flowers 2, which has lots of beautiful old-style decorative elements, and then return to InDesign.

Create another, much smaller, text frame and position it over the bowl of ‘Q’. Go to Window > Type & Tables > Glyphs to open the Glyphs panel. Place your type cursor in the text frame you just created and set the Font to IM Fell Flowers 2 to bring up the font’s characters in the Glyphs panel.

Select a small simple flower glyph and double-click it in the panel to insert it into the text frame. Adjust the Font Size to 550 pt and the Font Color to the pale purple swatch, C=45 M=47 Y=0 K=0.

7. Export Your Finished eBook Cover

Fantastic work—your eBook cover artwork is complete! Now all we need to do is to export it as a TIFF or JPEG file ready for upload to Kindle Direct Publishing. 

If you want more control over the file size of the cover, I would recommend you export the cover as a PDF (File > Export > select Adobe PDF from the drop-down menu). Open the image in Photoshop and use the Save for Web function, selecting the JPEG option from the menu. 

But you can also prepare your ready-to-upload cover straight from InDesign. In InDesign, first check your artwork for any spelling errors or misaligned images or text. Then go to the File menu and select Export.

Select JPEG from the Export window’s drop-down Format menu. Click Save. 

In the Export JPEG window, set the Quality to High and set the Resolution to the Kindle-recommended 72 ppi. Ensure the Color Space is set to RGB (this should be selected by default if you’re working in Digital Publishing mode). Click OK.

And you’re done! Your eBook cover is ready for upload.

Conclusion

Great work! Your cover design is eye-catching and dramatic, and will work just as well at thumbnail size as it will at large-scale, on an e-reader.

Now let’s briefly recap what we’ve learned in this tutorial:

• EBook covers come in avariety of dimensions and file sizes: always check your destined publisher for their up-to-date requirements.
• Designing a cover for an eBook isvery different to designing a book cover for print: as eBook covers will be initially viewed at smaller scale, cover layouts should be simple and high-impact.
• Keep elements on your cover layout to a minimum, and keep them strong: prioritise one key image, and render the cover in a strong background color that will contrast well against the pale browser background. 
• Exaggerate text: set the title and author’s name in large sizes, contrasting colors and legible fonts.
• Keep the cover design commercial: draw in the reader with a strong sense of place and mood in your design.

In this tutorial, I will show you how to create this “photo-realistic” cutaway Saturn illustration in pure SVG. We will use the open source 3D graphics software Blender to produce a physically shaded render of the planet, which we will use as a base to reproduce the image entirely in SVG vector. You will learn how to replicate 3D shading and bounce lighting with SVG gradients in Inkscape, draw the planet’s transparent rings with colors sampled from NASA images, create an aurora effect over the planet’s north pole, and much much more.

1. Modeling Saturn in Blender

Step 1

If you don’t already have it, download Blender from blender.org (current version at the time of writing is 2.73a). Blender is an incredibly powerful 3D app which we will be using to render a bitmap image of the Saturn illustration we will be creating. 

This tutorial will assume some basic knowledge of the workings of Blender, as well as Inkscape. If you need a refresher, check out these Blender tutorials, or these Inkscape ones.

You will also need the Blender SVG export script, which you can download here. (The export script was written by a member of the Blender community and allows us to export the 3D vector geometry in Blender to 2D SVG vector geometry.) Copy the script into the 2.73/scripts/addons directory in your Blender install.

Step 2

Activate the script from within Blender in the Preferences window by checking the box next to the script (the script will be found under the Import-Export tab).

Step 3

Modeling the interior layers of Saturn involves creating concentric spheres of different sizes in Blender. Use smooth-shadedUV spheres with a radius of 1, and a high UV resolution (128 segments× 64 rings is probably sufficient). The scaling is dictated by how big the layers in the actual planet are. There are two ways this can be done. If you know the actual mile radius of the layer, you can just input that into the sphere’s scaling factor (here 0.063 corresponds to 6,300 kilometers, the radius of the Saturn core).

You might also set the scaling of the sphere to the Saturn radius (60,268 km) and then use the Delta Scale to set the size in terms of planet radii, given below.

Step 4

Next we parent all the inner spheres to the main Saturn sphere.

This is important because if we squish or squash Saturn, or rotate it or something, the insides will go along with it. We need to do exactly this because Saturn is not actually a sphere—it’s an oval, as its polar radius is only 54,364 km, compared to 60,268 km for its equatorial radius. If you set the Z Scale of the Saturn object to 0.54364, then the rest of the planet will conveniently scale by that amount too.

Step 5

Next we create the cube which will outline the cutaway section in the image. Move it so that its corner sits on the origin. You might find it helpful to set the cube to a wire display so that you can see Saturn inside.

Then just go through each sphere and cut away the section inside the cube with a Boolean modifier.

Step 6

After color-coding each layer with the colors you want each layer to be in the final image, you might notice a problem. The layers overlap each other.

Fix this by creating copies of each sphere (except for the largest and the smallest) without the Boolean modifiers. (You might want to move them to a different Blender layer so that they don’t clutter your view). Then, give each original sphere a second Boolean modifier against the next smallest copy sphere. This creates hollow, disjoint planet layers that don’t bug out in the viewport.

Finally give each original sphere an Edge Split modifier to give the corners sharp edges.

Sometimes the Boolean modifiers will simply refuse to work properly (3D Booleans are notoriously fussy), in which case you might just want to perform the cutaway operation on the mesh manually (this should be possible if you set the UV resolution of your spheres to a multiple of four).

2. Rendering Saturn in Blender

Step 1

The next step is to texture Saturn. Making sure that you’re in the Cycles Render mode, create the following node setup.

For the image texture, use the image which can be found here, courtesy of Björn Jónsson.

Step 2

The texture will show up as a homogenous yellow in the viewport (Material mode). This is because we need to UV map Saturn so that Blender knows which parts of the texture to apply to which parts of the 3D sphere. Enter XZ orthogonal view (1 5 on the number pad) in edit mode, select all the faces (A), and unwrap the mesh under Sphere Projection mode. Set Direction toAlign to Object and Align to Polar ZY.

The hard part is scaling the UV map (found in the UV/Image Editor) to the rectangular region overlaying the image texture. Scale to Bounds in the Sphere Projection panel will handle the vertical dimension, and for the horizontal you'll have to spend some time adjusting it until it looks right.

Once you’ve completed the UV unwrap, you should see a textured Saturn in the viewport.

Step 3

The next step is drawing all the guidelines for the rings and moon orbits. Create a bunch of Bezier Circles and scale them according to your scale scheme to mark out important transitions in Saturn’s rings, as well as its moons’ orbits, if you want. The radii are listed below.

Step 4

The rings are simple to model, just a flat mesh formed from two circles. Add a UV seam between two arbitrary panels in the ring object.

The texture I used I modified from a public domain NASA image. Just take a 1px-high cross crop of the bottom of the ring and scale it vertically to some arbitrary height so you can see the pattern.

The rings are tricky to UV unwrap, but there are many ways to get it right. All you need to do is make sure each face spans some vertical part of the radial texture, in its horizontal entirety. Personally I used the Follow Active Quads option and straightened out the sides with S X 0, but you could also unwrap each face individually and have them each take up the entire image space, overlaid on each other. Take care that the texture is oriented in the right direction.

Then scale the inner and outer circles until the features on the texture agree with the guidelines we marked out earlier.

Step 5

Create a material for the rings. The node setup here will make the dark parts of the rings transparent, which will allow them to cast shadows (we need to know where the shadows will land when we convert to SVG).

Step 6

Now we set up our Blender scene to render Saturn. Add a sun lamp to provide illumination (a Strength of 3 and a Size of 0.01 is recommended).

And position the camera to capture the scene. This is the most important step because it will set in stone the angle that Saturn will be drawn from in our SVG illustration. I used a Focal Length of 45 and some shift to position Saturn within the camera frame for a more pleasing composition. Make sure Depth of Field is turned off (Size = 0).

Step 7

You might want to add a fresnel atmospheric effect to Saturn (this gives the edge of the planet a blue tinge). You do this by duplicating the Saturn object, removing any Boolean modifiers and manually deleting the cutout sector. Give it a slight Delta Scale to keep it from overlapping the Saturn mesh, and set it to a wire display.

Here’s the node setup I used. The Light Path node is there to prevent the atmosphere from casting unsightly shadows.

This should yield you a nice render of the planet. While we’re going to use it as a base for an SVG drawing, you could also use the 3D model itself in a 3D animation project if you want.

Step 8

There are several other images we need to generate. We need to make Open GL (viewport) renders of the various guidelines we laid down (Render > Open GL Render Image).

We also need to generate a plain texture render of Saturn, without any Booleans or other elements (make sure you saved the original file though). Change the material shader to Emission (Strength = 1.0) to make the Saturn object shadeless and render it at the same size as the full-scene render.

Step 9

Finally we have to create an SVG render of the interior layers. Remove all the Booleans and other modifiers from the interior spheres, except the first ones, which cut the spheres away from the cube object. The layers should overlap one another again. Then select the interior faces and delete the round exteriors (Control-I, Delete).

Then select all the layer objects and export them to SVG geometry with the Export SVG script we downloaded at the beginning. The plugin lives in the 3D viewport N-panel.

3. Texturing and Modeling Saturn in SVG

We now exit Blender and move to another piece of open source software, GIMP, to process the Saturn texture we rendered in Step 2.8. GIMP can be installed in many different ways, and comes pre-installed with some operating systems; this tutorial will not cover how to install it.

Step 1

The only thing we actually need GIMP for is to produce a negative of the Saturn texture render (Colors > Invert). Save and export the negative to a .png file.

Step 2

Next we import the negative into Inkscape. Inkscape will probably import the image at the wrong size, so in the SVG source code panel, set its width and height to whatever the image was originally.

Fit an SVG ellipse around the Saturn in the negative. This will serve as our clipping mask.

Step 3

To turn the negative texture into vectors, we use Inkscape’s Trace Bitmap function. Set it to Colors; 8 scans is probably sufficient.

Inkscape will trace from lightest to darkest, stacking the scans. This is why we inverted the texture, so that the black background (now white) would become the bottommost scan.

Turn the scans back to their true color by reinverting them: Extensions > Color>Negative.

Step 4

You might want to optimize the scans a bit to reduce the number of stacked objects near the edges, which can cause aliasing problems. Many parts of the lower-level scans are covered by higher scans, redundancy that ought to be reduced if possible.

Step 5

Next we import the Saturn Blender render we made, in the same manner as with the texture render. Drag and drop the SVG rendering of the layers into your workspace, over the Saturn render. (Here, the bitmap render is above everything except the ellipse from Step 3.2 and the SVG planet layer render).

The planet layers will almost certainly come in at the wrong size, so we have to scale them to match the bitmap render.

Then we ungroup the layers completely, and run Path>Object to Path on all of them to make them editable in Inkscape. It helps to run Path>Simplify to turn the polygonal shapes into smooth wedges. Finally, turn all of their opacities up to 100% (they will probably come in at 90%), remove strokes, and color them.

4. Shading Saturn

We will also be relying on the Blender render of Saturn we made to tell us how to shade the planet in SVG.

But wait! Isn’t that cheating?

Of course not. It’s just like an acrylic painter laying down a grisaille layer, or a 3D artist modeling from reference images. It helps us achieve a much better result than we ever could free-drawing by eye or memory. Blender’s raytracer will tell us exactly how to shade the planet so that it makes sense when we look at it; surely that’s easier and better than simply guessing how the light falls.

Step 1

The highlit faces—the ones perpendicular to the sun in this image—are more or less shaded completely flat. You can just use the eyedropper tool to retrieve their colors from the render.

Step 2

The shadow faces are more complexly shaded. For the very thin layers, we can get away with just using a linear gradient, sampling colors from the corresponding spots in the render. Avoid sampling by simply clicking with the eyedropper. The render will likely be very grainy, and sampling by clicking only takes color from a single pixel, so the color you get might vary wildly. Instead, hold and drag the eyedropper over the region you want to sample—doing this makes the tool average out all the pixels within a certain radius.

In the thicker faces, the color varies in two-dimensions—arc-wise and radially. Here we shade the face radially only, sampling from the middle of the arc in the render. Accordingly, we use a radial gradient to accomplish this shading.

Step 3

We will create the arc-wise shading by overlaying the base objects with transparencies. These transparencies are a faint white at one edge, and transparent elsewhere, lightening the shadow faces where they meet the other two faces (bounce lighting).

Note that the pink face gets tinted a brighter shade of pink at the edges, not white. Try to avoid muddy gradients—the transparent stop still needs a color too. Also pay attention to z-ordering; all of the transparencies are underneath the next-highest layer.

Step 4

The tangent faces (parallel to the direction of lighting) are simpler to shade. The thinner layers can take linear gradients, just like in the shadow faces.

The thicker faces are shaded conically, which we can fake with a radial gradient, centered off the face. Because the gradient needs to be steeper on one side than the other, we shift the gradient focus (Shift-drag the square part of the gradient) closer to the steep side to make an asymmetrical gradient.

Step 5

The core is simple enough to shade—just a radial gradient.

Step 6

As polish, add underneath each set of three faces a triangular shield of an intermediate color (or an approximate gradient).

This fills in the “seam” between the three faces that make up each layer, preventing anti-aliasing artifacts from showing up in the SVG.

Step 7

Next we shade Saturn itself. First group all the texture scans and clip them with a copy of the bounding ellipse (Object > Clip>Set).

Step 8

Then we duplicate the ellipse and fill it in with a soft radial gradient that’s a faint blue on the outside and transparent on the inside (remember that the transparent stop still has to be blue!). This recreates the fresnel (inverted halo) atmospheric effect around Saturn. Make sure it’s underneath the various cutaway shapes. Because the left side of Saturn in the render appears to be bluer than the right, we shift the transparent center of the gradient a little to the right to reflect this.

If you look closely at the render, you’ll notice that the planet appears to be ringed by a sharper blue fresnel. We recreate this with a second ellipse, this one shaded by a steeper fresnel gradient, and centered on the planet core (we couldn’t just add stops to the first fresnel ellipse because its gradient wasn’t centered).

Step 9

Finally, take the last remaining ellipse and use a radial gradient to make it into a shadow shader (black on the outside, transparent on the inside). Play around with the stops to create a smooth falloff similar to the one in the render.

Consider making the radius of the shadow ellipse one or two pixels wider than those of the underlying ellipses—this prevents the yellow edge of the planet from peeking out from behind the shadow ellipse on the dark side of the planet.

However, since that still might happen at small sizes (faintly visible in the image below), you should create a thin black collar around the disk of the planet to cover the artifact up. The black collar will also help prevent aliasing on the lit side.

5. Creating Saturn’s Rings

At last, we come to the most spectacular part of this tutorial—creating Saturn’s rings.

Step 1

Using the Open GL render we made earlier, fit SVG ellipses around all the visible transitions in the ring system. (Pictured below is a semi-transparent version of the Open GL render overlaid on our SVG Saturn, with one ellipse fitted.)

This step is probably the most tedious part of this tutorial, because you will have to fit probably two dozen ellipses. Consider color-coding them to distinguish different parts of Saturn’s rings.

Step 2

Next, we use the ellipses to produce filled regions. To make a filled region, select two ellipses, combine them into one object (Path > Combine)  and reverse the direction of the inner path (Path > Reverse) to make a hole. Use your artist’s judgment as to whether the regions should be disjoint or stacked—areas with different hues should probably be disjoint, while a region that is a brighter part of an adjacent region should probably be stacked on that region. Most of your regions will probably be disjoint.

Step 3

Here comes the fun part—coloring Saturn’s rings.

How did I get the rings like that? I’ll show you.

First we need a good source to glean the colors of the rings from, as the ring texture we used in Part II isn’t as attractive as some other photographed-textures of the planet’s rings. I chose this NASA image as my source.

But you can’t just grab the eyedropper tool and pick from the reference image. That would only give you an opaque color and part of the beauty of Saturn’s rings is their partial transparency. So what we do instead is take the color from the ring reference, then brighten them in color while simultaneously reducing them in transparency. This yields the same color when viewed over black, but partial transparency over other backgrounds (like Saturn’s planetary disk).

Do the same thing for every ring region you carved out.

In some regions, like the heavily banded B-ring, it makes sense to use an SVG stroke outline to add additional complexity, but use stroke sparingly in the rings because it does not get thinner at the top or bottom as it should.

The rings become very faint close to Saturn, creating beautiful transparency effects over the planet.

Finally, we tune the opacity of the rings as a group by tweaking their group opacity (I used 63% opacity).

Step 4

We need to make the rings disappear behind the planet. We do this by combining the inner edge from a copy of the black collar object with a rectangle the size of the page to make a filled rectangle with a hole in it for Saturn.

Since the rings only disappear behind Saturn (not in front of it, obviously), we fill in the bottom half of the hole.

Then set it as a clipping mask for the rings.

Step 5

The black collar might exacerbate the “seam” between the lit side of the planet and the clipped rings.

Fix this by punching a “hole” in the black collar with a small transparency gradient (black around the gradient, transparent inside it).

Step 6

Saturn casts a shadow on its rings. We create this shadow by adding a circle object to the ring group, and using it as a canvas for a black–transparency radial gradient.

Step 7

The rings also provide illumination to the dark side of Saturn. As you can see in the render, the bounce lighting casts two faint bands of light on Saturn, separated by a gap (from the Cassini division, probably). First we make a single light patch with a radial gradient on a copy of one of the blue fresnel ellipses. This gradient will have a very low opacity given the faintness of the bounce lighting.

Then we make the dark gap with another gradient on an identical ellipse. This gradient is transparent on both ends, but a faint black in a narrow band in the middle (shown below on top of the cutaway sector, though it should actually be underneath). The ellipse the gradient lives on should be reduced to an segment covering the left half of the planetary disk, to prevent the dark band from showing up on the lit side of the planet.

This creates a subtle bounce lighting effect on our vector Saturn.

Step 8

Finally, just as Saturn shades its rings, the rings also shade the planet. Roughly trace the ring shadows seen in the Saturn render, and color them accordingly with transparencies of black.

Then give the shadow group a 1% gaussian blur and tuck it underneath the ring group.

6. Auroras and Moon Orbits

According to some sources, Saturn has some lovely pink auroras, which we can recreate in SVG.

Step 1

First draw the surface footprints of the auroral rings.

Step 2

Then draw vertical sheets emanating from the rings. Give them gradients that make them red at the bottom and purple at the top. The trick to making ray effects is overlapping these sheets.

Step 3

Then just give the auroras a slight gaussian blur (3%).

Step 4

The auroras might not look that great at this point. That’s because they are not being overlaid on the image with the right blend mode. Create a new SVG layer, and move the aurora objects into it (right click>Move to layer…).

Then set that layer’s Blend mode to Screen. That makes it so that the light from the auroras gets added to the colors underneath them, rather than replacing them.

Step 5

If you want to include moon orbits in your drawing, you can produce another Open GL render, this time with a wider field of view (decrease the focal length), and fit ellipses to that.

Step 6

You might notice that the area around the aurora is acting funny. That’s because the Screen blend filter bugs out over transparent areas of the image.

We can fix that by simply adding in a black opaque background underneath the drawing.

Awesome Work, You’re Now Done!

In my final image, I added annotations, as well as small circles representing the moons. You can see the finished SVG at Wikimedia Commons, where it now lives.

I hope you’ve enjoyed this tutorial! Check out some other planets I’ve drawn, including Jupiter,Uranus, and Neptune, as well as the Moon. If you have any questions or comments, please don’t hesitate to leave a comment below!

Imagine a world without Control-Z.

Scary, right?

Well in traditional media, you're often stuck with the mistakes you've made. In today's quick lesson of Digital Painting 101, we'll cover the time-saving benefits of Adjustment Layers.

So What Are Adjustment Layers?

Adjustment Layers allow you to make color and tonal adjustments quickly and easily.

But Aren't These for Photography?

Digital painting techniques are really no different than traditional photo retouching or photo manipulation. The only difference is that you create the image you're working on by painting it from scratch. If you're new to digital painting, use photos to experiment with different adjustment layers in order to become familiar with them. Once you open your mind to the many benefits of adjustment layers, you will reap the incredible rewards of this medium.

Types of Adjustment Layers

Here's a quick rundown of each Adjustment Layeravailable to you in Photoshop.

Brightness/Contrast

Increase or decrease the shadows and highlights by adjusting the tonal range in your work.

Levels

Correct the tonal range by adjusting the intensity levels for mid tones, shadows, and highlights.

Curves

Tonality is represented as a graph that you can easily adjust by moving points around on the graph.

Exposure

Apply HDR-like effects by adjusting the highlights, shadows, and image gamma.

Vibrance

Adjusts the color saturation in your work.

Hue/Saturation

Change the hue, saturation, and lightness levels for individual colors or apply adjustments to an entire piece.

Color Balance

Easily color correct your overall work by adjusting colors for the shadows, mid tones, and highlights.

Black & White

Convert an image to grayscale (black and white) while controlling how individual colors are affected by the conversion.

Photo Filter

Mimic the effect of applying a color filter to a camera lens in order to adjust the color balance and color temperature.

Channel Mixer

Easily modify the grayscale components of selected color channels.

Color Lookup

Apply color changes to your work by loading different "looks."

Invert

Create a photo negative effect quickly and easily.

Posterize

Apply a flat, poster-like effect by reducing the number of colors in your work.

Threshold

Convert your work into high-contrast black and white images.

Gradient Map

Apply color effects by mapping a grayscale range to a specific gradient fill.

Selective Color

Apply color correction techniques similar to high-end scanners and separation programs.

Shadows/Highlights

Color correct and fix images with strong back lighting problems.

HDR Toning

Apply the full range of HDR contrast exposure settings to your images.

Variations

Quickly select different color variations for your work.

Desaturate

Permanently convert your work into grayscale but keep the same color mode.

Match Color

Match colors between multiple images, layers, or selections.

Replace Color

Quickly replace specific colors with new values.

Equalize

Make easy tonal adjustments by redistributing brightness values.

What Can They Teach You About Your Art?

Have you ever heard of the idea of "training your eyes" when it comes to art? Well, this basically means that as your skill sets improve, you recognize common issues in your work much faster. Once you figure out what's wrong, you can easily apply the appropriate techniques to make your art better.

Here are some things you can learn about your art by using Adjustment Layers:

• Recognize issues with a color scheme quickly.
• Overcome dull colors by improving color intensity.
• Replace colors with better color options easily. 
• Improve the overall impact of your work by applying unique color effects.
  

How to Edit Paintings With Adjustment Layers

Now I must warn you. Adjustment layers can be quite addictive. They naturally become a part of your digital painting workflow and they will change how you see your art forever.

Here are some quick tips to improve your next digital painting:

Adjust Colors Quickly

I always like to keep my base colors on separate layers just in case I'm not quite feeling the color scheme. If need be, I can easily change any color I want with Hue/Saturation. 

Select the layer and go to Image > Adjustments > Hue/Saturation. Use the different sliders to adjust the Hue and experiment with Saturation and Brightness to get the exact color you need. 

Improve the Clarity and Intensity of Your Paintings

In the beginning, your paintings will either be too dark, too light, or just in general way too dull. But it'll take some time to train your eye to recognize these common issues. So one of the biggest lessons you'll need to learn is how to adjust the overall tonality of your painting.

Start a new painting or open an old one in Photoshop. Go to Image > Adjustments > Levels and use the sliders to adjust the Shadows,Mid tones, or Highlights. Notice the immediate difference? 

Be careful with your edits though—you can totally overdo it with this step.

Apply Cool Color Effects

Andy Warhol is famous for his colorful artwork. But if you're anything like me, picking interesting color schemes just doesn't come naturally. In fact, I was so afraid of color in the beginning that I often painted only in grayscale.

Overcome your fears associated with color and you'll never look back. My favorite adjustment layer for this is Color Balance. Just like before, use the sliders to tweak the different hues in your work for the ultimate in color correction. 

Conclusion

Frustration is natural, even necessary to creating art. However, Photoshop is packed with incredible tools that will absolutely transform your work. Experimentation is your friend! So get to know the ins and outs of each and discover which ones are your go-to favorites.

If you have any questions at all, feel free to leave them in the comments. And as always, good luck!

Editors Note: In this series, Conversations with Creative Collaborators, we look at the place of photography and how it is used accross creative industries. In this instalment we meet Richard Pearson, Art Director at Manchester based creative communications agency BJL to chat about the challenges of working in advertising photography to create campaigns for internationally known brands.

Hey Richard, thanks for taking time to talk. Could you start off by explain about who BJL are and also your role with the agency.

BJL first started life 28 years ago, and we've since grown to be the largest independent ad agencies outside London. We are full service and create integrated campaigns. Starting with planning we develop brand platforms, which we then bring to life through every medium, from content to TV, from outdoor to social media. We aim to talk to consumers wherever they are.

You'll find us working on a broad range of clients including cars, booze, insurance (not three things that normally go well together), paint, holidays, supermarkets and more. Our main role for these clients is to first understand their commercial objectives, market and audience, before developing insight driven campaigns on their behalf. If you've seen Mad Men, it's like that without the drinking and womanising.

My role within this, as a creative art director, is to turn the research and insights into campaigns that speak to the man, or woman, in the street. We start with concepts, and when we have a few routes we're happy with we'll pull together mood boards, and visuals to present to client. These usually include a number of style examples of photography that help the client see what's inside our heads. It can be tough to visualise a finished shot or ad from a black and white sketch; in my case that usual looks a bit like a drawing out of a comic.

When we have sign off on the chosen route from client, and possibly after further research, then we begin to look at commissioning the production.

How closely do you work with photographers? Do you regularly commission a photographer to take images for a project?

There's a fairly steady demand for shoots through an agency our size. This obviously varies from quite small and quick low budget work, right up to big budget and large scale productions in this country or abroad.

Over the last year we've had jobs that have taken our art directors to Norway, Hungary and South Africa, with lead times of a few months. But we also have quick turn around jobs that can be shot the same week of the initial briefing. 

Each type of job brings its own pressures. Whichever form it takes, we make sure there's a continual dialogue with the photographer throughout. My preference is for the art director and photographer to work together as a team, constantly trying to create an image that perfectly fulfils the brief.

How do you go about finding photographers to work with? Do they come to you or do have places that you look for new and exciting imagery?

We're constantly on the hunt for new photographers, or interesting new styles. Catching the public eye is becoming harder and harder to do with the amount of advertising that people come face to face with. Even the most conservative survey says we see more than 3000 advertising messages a day.

Photographers we've not worked with before, or ones we have who've created new work, get in touch pretty regularly. Whenever someone does ask if they can pop in with their book, we arrange a time and date and rustle up as many of the art directors in the building as we can to have a look. This normally happens at least two or three times a month.

Art directors also constantly look at the internet these days. Years back we'd tear interesting work from magazines and keep a scrapbook, nowadays it's a folder on our Macs. We discover people all over the net, but especially on photography, advertising and design based blogs. Some of my favourite sites to hunt down new styles include Creative Review, it's Nice That, fffound and Pinterest, but there's many more out there. Twitter's also a great way to see and keep up-to-date with recent shoots.

Whenever a new campaign is ready to be commissioned, we put together a long list of people we know or have come across. Then cut to a shortlist, before talking to the photographers themselves, which includes requesting a treatment and a quote. We'd then put forward our recommendation to our clients before a final commission is made.

Working as a commercial photographer is notoriously demanding. Are standards set very high when shooting, and if so, how do you work together to get a result that everyone is happy with?

The industry seems to get more and more pressurised as time goes on. Shorter deadlines, smaller budgets and tighter constrictions are all increasing the importance of agencies and photographers having a strong working relationship. Art directors always have go-to photographers, people they've worked with a lot in the past, or know a lot about. The trust is already there and it means everyone is confident the end result will be what we need. The thing that has changed this is the move to digital.

Digital's a double-edged sword as everything now has a quicker turnaround and you can end up with a thousand frames to select from rather than a hundred. However there's a massive advantage to being able to get everyone on board and feeling part of the process earlier. I still have a box of Polaroids: I used to collect one from each shoot when I first started out. Occasionally I show these to juniors or recent grads and they can't believe we used to sign shots off from these normally black and white and quite often slightly blurry tests.

The working process between film and digital is exactly the same however. The shot is set up following the brief and visual. And then it's one small change after another until with a little bit of luck and fate thrown in, we all reach a point we feel the shot is there in front of us.

One other factor I have in choosing who I want to shoot with is how we'll get on, that's myself and the wider agency team, including the Creative Director. And it's not just about a shared vision for the shots, you also have to remember you're spending all day with each other, often travelling and staying in hotels for a week or more. You want to make sure that you're still going to be speaking by the end of it.

I've been up Snowdon mountain at night in minus conditions with wet feet while waiting for dawn to break, had 16 hours sleep over a five day shoot in New York, and been stuck in the countryside outside Warsaw surrounded by wild dogs while trying to fix a exhaust back onto a van. It's pretty important that you can laugh about it together, whatever's happening.

Visually, is it more important to create the perfect image or something that captures the brand identity?

For me the two are not mutually exclusive, the perfect image for the commercial brief is one that also captures the brand identity. If creating a beautiful crafted photo means it doesn't do the advertising job, it's wrong. And vice versa, if it's a great image for the product but is a poor, dull shot then it doesn't work either.

It's about finding the right mix between the two sides. Attention grabbing pictures have the power to stop people in their tracks and it's about harnessing that power while making sure that the product message is the thing they take away.

With computers there's a lot more flex around what can be achieved, especially when 3D additions are also taken into account. Less work tends to be done in camera and more in system, it means photographers need to have at least a good working knowledge of the post process. Simple things on a shoot can either save or add days of retouching. Ideally, we'd be shooting everything on the day, but that's not always the best solution.

In the end it comes down to the specific brief that is being shot to. Some jobs have to follow a very strict set of brand guidelines influencing everything from lighting, crop, colouring and subject. While others can be incredibly open, shooting loosely around a theme or subject.

Either way, the opportunities are there to create work we can all be proud of.

What advice would you give to a photographer looking to enter the world of commercial photography?

It can be tough with no commercial work already in your book to get jobs. It's a bit of a Catch 22, but it's a harder sell to clients when it's someone who hasn't a proven background within the business. This is especially true of the specialist areas of the business such as car photography. It's important to try and get as many jobs as you can that have been shot to a brief, whatever the size or scale. Agencies are regularly pitching for new business. We're usually not paid as part of this process, but often a test shot can be a way to help bring the business in. Working on test shots can be a way to form relationships in the industry as well as getting work in your book.

We prefer to shoot with photographers because of their own personal style. That's why we were interested in them in the first place! So make sure that your book shows as much of you as possible: highlight your preferred style. Some people love shooting studio still life, others vast landscapes, and so on. Each has a place.

After that it's about getting seen, whether that's getting in touch with art director or art buyers at agencies directly or getting a photographic agent to tout you about. We used to get at least 3 mailers a week from photographers but now things have moved a lot more online. Sending out emails showing a couple of your best shots or a new project is a great way to go. Then if we're intrigued enough we'll click through to a simple website showing some further work and bookmark it.

As with all these things though it's about quality rather than quantity, don't put the kitchen sink on there, just show your best. From our point of view it's good to see it split by project and into commercial and personal too. We love to look at your personal jobs as they show you without the influences of everyone involved in commercial work.

It's a tough business to get started in and there's a lot of hard work, but the rewards more than make up for it.

In this tutorial I'll show you how to create a fantasy landscape matte painting named "Eagle's Land". 

We'll start this tutorial by sketching out the concept/idea, and then combine some stock photo references in Adobe Photoshop. Throughout this tutorial you'll learn how to use adjustment layers, masking and brushes, as well as how to manage the color and atmosphere to achieve a beautiful result. You'll also learn how to work with groups, create lighting, pay attention to details and more. 

Tutorial Assets

The following assets were used during the production of this tutorial:

• Landscape
• Sky 1
• Sky 2  
• Mountains
• Rock
• Castle 
• Horse 
• Bridle 
• Knight 
• Eagle 1 
• Eagle 2 
• Light rays brushes 

1. Sketching the Idea and Finding the Photo References

Step 1

The first step is sketching your idea to plan out what you're going to create. Use a tablet pen and draw it on a canvas. You can draw it on paper using pencils and scan it to your computer if that's more familiar for you. My idea is to create a beautiful landscape with medieval elements, covered by a misty atmosphere and illuminated by the sunlight. I made a rough sketch in black and white, and then added some colors:

In the sketch, the main light source appears from the upper right of the scene. It's very important to define the light source right at the beginning, so that you can manipulate properly later.

Step 2

Finding decent photo references is not an easy task. It's very important to find images with appropriate perspective, shadow and light. Here are the photos I've chosen for the next stages.

2. Adding the Base Landscape

Step 1

In Photoshop, create a new document of 2200 x 2200px and fill it with white.

Step 2

Open the landscape image. Use the Move Tool (V) to drag it into our white canvas and convert this layer to a Smart Object.

Step 3

Go to Layer > New Adjustment Layer > Selective Color and change the Yellows settings.

Step 4

Drag the sky 1 image onto the top of the landscape.

Click the second icon at the bottom of the Layers panel to add a mask to this layer. Use a soft round brush with black color (soft black brush) to remove any hard edges and blend it smoothly with the background:

3. Adding the Mountains and Rocks

Step 1

Open the mountain image. Select the mountains area with the Rectangular Marquee Tool (M).

Add this selected area to the top of the landscape.

Add a mask to this layer and use a soft black brush to blend the mountains with the background. The aim is to make the mountain layers appear further and higher than the existing landscape, and it will help to create a depth of field. You need to vary the brush opacity while masking to get a better result. You may notice that these mountains should look blurrier and more faded compared to other elements, as they're at a greater distance from the viewer.

Step 2

Use an adjustment layer and set it as Clipping Mask to match the mountains' color with the background. Go to Layer > New Adjustment Layer > Hue Saturation and drag the Saturation value down to -86.

Step 3

Open the rock image. Use the Polygonal Lasso Tool (L) to select the rock area and add it to the bottom right of our main image where the knight and his horse will stand. Use the Free Transform Tool (Control-T) to rotate the rock a little.

Step 4

There is an unwanted shadow at the right corner of the rock. To remove it, make a new layer above the rock one and remember to set it as Clipping Mask. On the rock layer, select a part of the rock surface with the Lasso Tool.

Press Control-C to copy this selection. Highlight the new layer and press Control-V to paste the selected area to the indicated shadow.

Use a layer mask to blend the copied part with the surface and hide the unwanted shadow.

Step 5

Use a Hue/Saturation adjustment layer and decrease the Master Saturation value to -61. Also remove the blue cast at the edge of the rock by bringing the Blues Saturation value down to -82.

Step 6

Make a Color Balance adjustment layer and increase the Red and Yellow values of the Midtones.

Step 7

Add a Curves adjustment layer to darken the rock as it's too bright compared to the background at the moment.

On this layer mask, use a soft black brush to erase the front of the rock that catches the light from the sky. You can see the result on the layer mask and the result of the picture.

Step 8

Create a new layer (set as Clipping Mask), change the mode to Overlay 100%, and fill with 50% gray.

Use the Dodge and Burn Tool (O) with Midtones Range, Exposure about 20–30%, to refine the light and shadow of the rock. Use the Dodge Tool to brighten the front and the edge, and the Burn Tool to darken the back. You can see how I did it with Normal mode and the result with Overlay mode.

4. Adding the Mist

Step 1

Add the sky 2 image to the bottom of our working document and set this layer between the mountains and the rock layers. We're going to use it to create the mist.

Add a mask to this layer, and use a soft black brush to soften the hard edges and reduce the mist intensity.

Step 2

Make a Color Balance adjustment layer (set as Clipping Mask) to change the mist color to a warmer one.

Step 3

Make a Curves adjustment layer (set as Clipping Mask) to increase the visibility of the mist. On this layer mask, use a soft black brush to erase the mist above the trees/plants area.   

This step is to create a distance between the rock and the base landscape and increase the depth as well as the atmosphere of the scene.

5. Combining the Knight and the Horse

Step 1

Open the knight image. The knight in this image looks as if he's ready for a battle, whereas we want him to stay calm to enjoy the beauty of the landscape. It was too hard to find a photo with a similar pose to the one in the sketch, so I decided to combine several photos to get what I desired. 

First use the Polygonal Lasso Tool to select the knight and the back of the horse, and then press Control-J to duplicate the selected part into a new layer. Make a new layer between the extracted knight layer and the background, and fill it with the color #918989.

Step 2 

Open the horse image. Use the Polygonal Lasso Tool (or any tools you're familiar with) to select the horse and drag it into the knight image. Place this layer under the knight one and use Control-T to scale it down to a suitable size.

Step 3

Use a Hue/Saturation adjustment layer (set as Clipping Mask) for the horse layer, and set Saturation to -55 and Lightness to +1.

Step 4

Add a Curves adjustment layer (set as Clipping Mask) to brighten the horse.

Step 5

Make a new layer (set as Clipping Mask), change the mode to Soft Light 100% and fill with 50% gray. Use the Dodge Tool and the Burn Tool to refine the contrast of the horse: lighten the shadows and darken the highlights.

Step 6

Make a new layer and use a soft round brush with the color #e6e6e6 to paint on the shadow under the horse's head to lighten it a bit more. Change this layer mode to Soft Light 100%.

Step 7

Come back to the knight layer. Go to Edit > Puppet Warp and drag the points on the arm and the sleeve down onto his thigh. The aim is to make his arm look as if it's holding the bridle (we'll add it in the next steps).

Step 8

Make a new layer (set as Clipping Mask), change the mode to Overlay 100%, and fill with 50% gray. Apply the Dodge Tool and the Burn Tool to the sleeve and coat to refine the shadow/light there.

Step 9

On a new layer, use a soft black brush with the Opacity about 40% to paint the shadow of the sleeve.

Step 10

Make a new layer and active the Clone Tool (S), remembering to check the optionAll Layers. Use this tool to clone over the hole between the sleeve and the coat which is created after applying the Puppet Warp.

Step 11

Open the bridle image. Take the bridle only using the Polygonal Lasso Tool and add it to the horse in the knight document. Use the Warp Tool (Edit > Transform > Warp) to tweak the bridle a bit to fit the horse's head.

Add a mask to this layer and use a hard black brush to remove any unwanted details.

Step 12

Make a Hue/Saturation adjustment layer to change the color of the bridle. Change Saturation to +20 and Hue to -17 to get a similar color to the saddle.

Step 13

Add a Curves adjustment layer to darken the bridle a little. On this layer mask, use a soft black brush to erase the darkening effect on the areas which are dark already.

Step 14

Make two new layers on top of the layers. On the first, use a hard round brush with the color #3f1d20, and on the second use a lighter color (#a1403c) to paint the missing bridle part which the knight is holding in his hand.

Step 15

Create a new layer and use a hard round brush with the color #f8f8f4 and the size about 2–5 px to paint more hair for the horse's head.

Step 16

Make a new layer and use a hard round brush with the color #decab7 to paint the tail of the horse.

Step 17

Make a new layer under the bridle one, and use a soft black brush to paint the shadow of the bridle on the horse's head.

Turn off the background and the fill layer, and then press Control-Alt-Shift-E to merge all visible layers into a new one.

6. Adding the Knight and his Horse

Step 1

Move the knight into the landscape document, and place him onto the rock.

Make a Hue/Saturation adjustment layer for the knight (set as Clipping Mask) and change the settings of Reds and Cyans.

Step 2

Add a Color Balance adjustment layer (set as Clipping Mask) and change the Midtones values.

Step 3

Use a Curves adjustment layer to darken the back of the knight and horse. On this layer mask, use a soft black brush to erase the front of them as they're illuminated by the sunlight.

Step 4

Make a new layer (set as Clipping Mask), change the mode to Overlay 100% and fill with 50% gray. Use the Dodge Tool to brighten the front of the knight and the horse, and the Burn Tool to darken the back.

Step 5

Create a new layer under the knight one. Use a soft black brush with the Opacity about 40% to paint a small soft shadow under the horse's feet.

Name this layer "shadow 1".

Step 6

We've determined the light source to be from the upper right of the scene, so the knight and the horse should have a shadow behind. Make a new layer under the shadow 1 one, and hold down the Control key while clicking the knight thumbnail layer to load its selection.

Fill this layer with black (Shift-F5). Go to Edit > Transform > Flip Vertical.

On this shadow layer, use the Polygonal Lasso Tool to select a hind leg, and then right click this selection and choose Layer via Cut.

Convert these two layers to Smart Objects. Use Control-T to distort these shadow parts to fit the position of the correlated legs.

Lower the Opacity of these shadow layers to 50%. On each shadow layer, go to Filter > Blur > Gaussian Blur and set the radius to 4 px.

Add a mask to the shadow layer of the cut hind leg, and use a soft black brush to erase the area that overlaps the other leg's shadow.

Use a layer mask to reduce the opacity of the top of another shadow layer:

7. Adding the Castle

Step 1

Open the castle image. Use the Magic Wand Tool (W) to select the castle and drag it into our landscape file. Put the castle on the top of a misty mountain.

Add a mask to this layer, and use a soft black brush to erase the hard edges and make it fade into the mountain.

Step 2

Create a Curves adjustment layer (set as Clipping Mask) to darken the castle. On this layer mask, use a soft black brush to erase the upper of the castle, as it should be brighter than the lower.

Step 3

Make a Hue/Saturation adjustment layer and decrease Saturation to -66.

Step 4

To match the contrast of the castle with the mountain, go to Layer > New Fill Layer > Solid Color and pick a color from the misty background (#bec2c5). Lower the Opacity of this layer to 60% to make the castle blend smoothly with the scene.

8. Adding the Eagles

Step 1

Open the eagle 1 image. Select the eagle using the Magic Wand Tool and add him to the left side of the image. Flip him horizontally by using Edit > Transform > Flip Horizontal.

Press Control-J to duplicate this layer. Move the duplicated one to the lowest edge of the foreground and enlarge the size.

Step 2

On the duplicated eagle layer, go to Filter > Blur > Gaussian Blur and set the radius to 8 px.

Step 3

Make all the eagle layers selected, and then press Control-G to group them. Change this group mode from Pass Through (default group mode) to Normal 100%. To remove the blue cast on the eagles, create a Hue/Saturation adjustment layer on top of these layers. Choose the Blues channel and change Hue to +49, Saturation to -75 and Lightness to -38.

Because the group mode is changed to Normal 100% (no Pass Through), this adjustment layer only affects the layers within this group (the eagle ones).

Step 4

Create a Color Balance adjustment layer within the group, and alter the Midtones settings by increasing the Red and Yellow values. On this layer mask, use a soft black brush to reduce the effect of this adjustment layer on the bigger eagle wing in the foreground.

Step 5

Use a Curves adjustment layer to brighten the eagles. On this layer mask, use a soft black brush to erase the lower part of the eagles to balance their body contrast (the upper is brighter, the lower is darker).

Step 6

Make a new layer above the smaller eagle layer (set as Clipping Mask), change the mode to Overlay 100% and fill with 50% gray. Use the Dodge Tool to brighten the tail and the Burn Tool to darken the belly.

Step 7

Open the eagle 2 image. Isolate him from the background using the Magic Wand Tool and add him to the top of the sky, above the castle.

Step 8

Use a Curves adjustment layer (set as Clipping Mask) to brighten the eagle.

Step 9

Make a Hue/Saturation adjustment layer and change the Cyans settings to reduce the cyan cast on the eagle wings.

9. The Basic Color Adjustment

Step 1

Make a Gradient Map adjustment layer on top of the layers, pick the colors #0f264b and #d3ce97, and change the mode of this layer to Soft Light 100%.

Step 2

Create a Color Balance adjustment layer, and change the Midtones and Highlights settings.

Step 3

Go to Layer > New Fill Layer > Solid Color and pick the color #2e2001. Change this layer mode to Exclusion 100%.

Step 4

Use a Curves adjustment layer to darken the scene.

On this layer mask, use a soft black brush to reduce the contrast of the upper part of the scene, mostly on the mountains, trees, and eagles.

10. Adding the Sunlight

Step 1

Make a new layer on top of the layer, and change the foreground color to #2c1602. Take a soft round brush and paint on the top of the scene where you've aimed to make light. Change this layer mode to Linear Dodge 100%.

On a new layer with the same mode, use the same brush to paint on the trees, mountains, castle and the eagle in the middle.

Step 2

Change the brush color to #dccdc0 and start painting the light on the front of the rock, the knight and the horse. Also use the same brush to paint on the tree, the castle, and the sides of the mountains which catch the light. Alter this layer mode to Overlay 100%.

Step 3

Change the brush type to the light rays and the color to #fdf3ea. Choose the brush you like and paint it on the canvas.

Use Control-T to distort the light a little, and place it in the sunlight area.

Add a mask to this layer and use a soft black brush to erase any undesired light rays, such as on the back of the mountains, the middle eagle, and the rock.

To soften the light a bit, go to Filter > Blur > Gaussian Blur and set the radius to 6 px.

11. The Final Adjustment

Step 1

Create a Gradient Map adjustment layer and pick the colors #db9d68 and #2c1602. Change this layer mode to Soft Light 100%.

On this layer mask, use a soft black brush to reduce the Gradient Map effect at the sides of the scene.

Step 2

Make a Channel Mixer adjustment layer and change the Red settings.

Set this layer mode to Soft Light 50%. On this layer mask, use a soft black brush to decrease the effect of this adjustment layer on the sun area and the back of the rock.

Step 3

Create a Selective Color adjustment layer and change the values for Yellows, Greens and Neutrals.

Step 4

Make a Vibrance adjustment layer to enhance the color.

Step 5

Use another Selective Color adjustment layer to add some blue/magenta to the scene.

Step 6

Make a Photo Filter adjustment layer and pick the color #01e9ec.

Step 7

Create another Vibrance adjustment layer to boost the colors.

On this layer mask use a black brush to remove or reduce the effect on the areas you feel oversaturated.

Congratulations, You're Done!

Here is the result you should get with this tutorial. I hope you've found it useful and learned some new techniques. If you have any question or idea, feel free to leave it in the comment box below.

Name: David Kehrer

Location: Traverse City, Michigan, USA

Topics of Interest: Web Design, Design & Illustration and Code   

Occupation: Creative Director at digital marketing agency Oneupweb

In previous posts, we introduced you to South African graphic artist Catherine Dawes, and Brazilian web designer Tassia Pellegrini. Now it's time for you to meet our third prize-winner, David Kehrer of Traverse City, Michigan.

At the beginning of his design career, David had a problem. He'd earned a bachelor's degree in Graphic Design from Ferris State University, and was working at a nonprofit creating a variety of print materials for fundraising campaigns. But because he'd worked primarily in print, he had a limited amount of knowledge about the web. 

So when he took a job at a digital marketing agency, he knew he had to do some studying. He purchased a Tuts+ subscription to help him learn and get up to speed on the web design industry. 

The hard work paid off, as he quickly picked up all the skills he needed, and not only survived in his new job but thrived, impressing his coworkers and winning a speedy promotion.

Three years later, I'm the Creative Director and I recommend Tuts+ to young designers and new employees. 

He now works on a wide range of projects that include website design, branding, and developing responsive design and development processes for our team. He says that the area in which he has learned the most from Tuts+ is responsive design.

Do you want to follow in David's footsteps and carve out a career in web design? Check out some of the following courses:

Web Design for Beginners

In this course, Adi Purdila will guide you through the basic steps of becoming a web designer. You’ll learn what tools to use, how HTML and CSS are used to create websites, and much more. Finally, you’ll put all this knowledge into practice and actually build your first functional web page.

Promoting Your Services and Winning Work

Just because you are a great coder or designer, it doesn’t necessarily mean you’ll be a successful web design business owner. In an increasingly tough marketplace, being able to sell yourself and your work is crucial for success. Promoting Your Services and Winning Work will teach you:

• how to build a reputation that will attract new potential clients
• what goes into a perfect proposal
• when to walk away from an opportunity that is not right for you
• how to impress when you present to a client
• how to generate more repeat business

Responsive Web Design Revisited

In this course you’ll get up to speed with the very latest in Responsive Web Design. First you’ll learn what “responsive” really means today, and how a new “content first” approach lets you cater for all types of users from the ground up. Then you’ll create a complete responsive design using all the latest techniques. 

As well as advising aspiring designers to brush up their skills with online learning, David also recommends learning from those around them.

Learn from your peers and senior level team members by asking them “why?” They were also once new to the industry and their input has a deeper meaning than, “because I said so".

If you'd like to find out more about David and his career in web design, you can connect with him via LinkedIn.  

Working with 5 and 10, we'll be constructing pentagons, decagons, and stars that go with them, but also the versatile decagram grid used in Moroccan zillij (ceramic mosaics) to create a great variety of shapes. We'll also work with numbers for which no truly accurate division of the circle exists.

Dividing the Circle Into 5

Step 1

Draw a circle centered on a horizontal line, and the perpendicular to the centre.

Step 2

Keeping the same compass opening, move the dry point to one side and mark the two points as shown.

Step 3

The line that connects these two points cuts the horizontal diameter at point C.

Step 4

Place the dry point on C, with the compass opening CA. This arc cuts the diameter at point D.

Step 5

Open the compass to distance AD, and draw the arc centered on A. It will not go through C even if it comes very close.

Step 6

Set the compass opening to the distance from D to the centre, but place the dry point on B to draw an arc. The five points on the circle divide it into five.

Dividing the Circle Into 10

Follow the steps 1-6 above, and then carry on:

Step 7

Keep the compass opening as in step 6, and draw an arc centered on A.

Step 8

Now return the compass to the opening AD, and draw an arc centered on B.

Shapes

Pentagon and Pentagram

Join the points in a circle divided into five.

Decagon

Join the points in a circle divided into ten.

Decagrams (ten-pointed stars)

Different decagrams are obtained depending whether we join every second, third or fourth point. They are respectively made up of two pentagons, a continuous line, and two pentagrams.

The Decagram Grid

This is a grid formed by overlaying the latter two decagrams shown above: the one formed with a single line, and the one formed of two pentagrams.

Many different shapes, both regular and irregular, can be drawn using the grid lines. Here are just a few that recur in traditional art:

More elaborate ten-pointed stars can also be built upon it. Here is one of them.

Interlaced Ten-Pointed Star

Step 1

Start with a decagram grid. Pick out the shape shown here.

Step 2

Repeat with the next shape: they overlap. Carry on all around the grid.

Step 3

Now pick out the angle highlighted here, that connects the inner point of two overlapping shapes. Do this all around: the pattern now looks as if it were drawn with a single continuous line (which indeed it can be).

This pattern can then be coloured in various ways, or given a woven effect (this will be detailed in our sixth lesson).

Approximate Constructions

By now, we have learned to divide a circle and draw polygons with every number up to 12. Only three numbers are left to study: 7, 9 and 11. It is actually not possible to draw a true heptagon, enneagon, or hendecagon using geometry, but a few methods have been developed to create good approximations, quite accurate enough for the naked eye.

Heptagon (7 Sides)

Step 1

Follow the construction steps for a static square (see Working With 4 and 8).

Let's name the relevant points to make what follows easier.

Step 2

With the dry point on A and the compass opening at AB, mark point F on the vertical.

Step 3

The line DF cuts the circle at G; the line EF cuts the circle at H. AG and AH are the measures of the sides of the heptagon, so all we have to do now is walk these measures around the circle.

Step 4

With the point on G and the opening set to GA, mark point I on the circle. Then move the point to H (the compass opening HA is equal to GA) and mark point J.

Step 5

Now use I as a centre to find K, and J as a centre to find L. KL may not be quite the same measure, but that's normal in an approximate construction. When creating patterns with the hepta- family, geometers were not above cheating a little to make it fit!

Step 6

Join the points on the circle. Careful! Of the points made on the circle by the horizontal and vertical lines, only A is involved in the final shape.

The heptagon has two corresponding heptagrams, both made of a continuous line:

Enneagon (9 Sides)

Step 1

Draw a circle centered on a horizontal line, and the perpendicular to the centre.

Step 2

Return the compass opening to the radius of the circle, and with the point on F, draw an arc that cuts the circle at G and H.

Step 3

Set the compass to the distance AE. With the point on C, draw an arc that cuts the vertical at I.

Step 4

With the point on E, draw the arc EI to cut the circle at two points. Repeat with the point on G and then on H.

Step 5

E, G, H, plus the six points marked in step 4, are the nine points of the enneagon. Again, of the points made on the circle by the horizontal and vertical lines, only E is involved in the final shape.

Three enneagrams correspond to the enneagon. The central one is made of three equilateral triangles, the others of one continuous line.

Hendecagon (11 sides)

Step 1

Draw a circle on a vertical line.

Step 2

With the same opening and the dry point on A, draw an arc that cuts the circle at B and C.

Step 3

Connect B and C to find point D on the vertical.

Step 4

With the opening set to DO, place the dry point on O and G respectively to draw two arcs. Connect their intersections to find G (in other words we have bisected DO).

Step 5

With the point on D, draw the arc DG that cuts the upper arc at two points.

Step 6

Join the two points to find H.

Step 7

Now set the opening to AH and place the point on A to draw an arc that cuts the circle at I and J. The distance AH=AI=AJ is the division of the circle we need, so all we have to do now is walk this distance around the circle.

Step 8

Dry point on I and J, respectively, to mark two more points on the circle...

Step 9

... then two more, and so on till done.

Step 10

Join the 11 points, which do not include the point where the vertical line cuts the bottom of the circle.

A hendecagon produces four possible hendecagrams, all made of a single line:

With this, we have completed our basic shape constructions, covering all numbers from 3 to 12, related grids and patterns that can be modified ad infinitum. But in a sense, we have not worked with 1, which unfolds in space as a circle (a one-sided shape). This will be the subject of our next lesson, the last to cover basics before we move on to more complex ornamental designs.

In this intermediate tutorial we'll create a character from scratch in Adobe Illustrator CC 2014 and then make a small set of sticker designs, ready for chat, mobile, and blog use. We'll go through the process of keeping the design consistent, creating various facial expressions, and simplifying components of the design for use throughout a set of icons.

1. Creating the Basic Character Design

Step 1

For a project like this, I like to start with the face of my character. Since the majority of the design is just a head (for the sake of this tutorial), it's the best place to begin anyway.

1. Using the Ellipse Tool (L), draw a circle. This will form half of the head.
2. Use the Pen Tool (P) to draw the lower left half of the jaw. Note how the jawline curves around to the chin softly, but moves upward at a right angle.
3. Here you can see the placement of the lower left jaw. I often start a jaw on the left side of a circle, making sure it aligns with both the horizontal and vertical centers.
4. Copy (Control-C), Paste (Control-V), and Reflect the left jaw to create the right side.
5. After making sure each component of the head aligns as you'd like, Unite all three shapes in the Pathfinder panel. Delete any extraneous anchor points with the Delete Anchor Point Tool (-).

Step 2

The ear is a fairly simple process. You'll need two of these for your final design (unless hair or additional design elements obscure them completely, in which case feel free to skip this step).

• Draw a circle with the Ellipse Tool.
• Use the Direct Selection Tool (A) to pull the lower anchor point downward.
• Angle the lower anchor point to the right.
• Manipulate the anchor point's handles so the shape is rounded and looks more like an ear.
• Copy, Paste, and Reflect the ear so you have two. Align them on either side of the head.

Step 3

Much like the head and ear, the eye also begins with a simple circle.

1. Draw a circle with the Ellipse Tool.
2. Use the Pen Tool to draw a sharp point at the lower left of the circle (on the diagonal) and follow the contour of the circle to the center. Note how these shapes look a bit like a bird's head or a raindrop shape rotated on its side.
3. Unite the two shapes in the Pathfinder panel.
4. Draw your character's lash line or eye lashes, or simply outline the eye shape, depending on what details you'd like to add.
5. Open the Gradient panel to recreate the Linear gradient seen below: dark purple (#2a0551) to white to dark purple again.
6. Apply the gradient to the white of the eyes (the raindrop-like shape).
7. Draw a smaller dark purple circle for the eye's iris and place it beneath the lash line shapes in the Layers panel.

Step 4

Let's add in some details to each eye.

1. Group (Control-G) together your eye components.
2. With the Pen Tool, draw a half-moon shape over the top half of the eye in dark purple (#2a0551).
3. Reduce the Opacity to 50% or less in the Transparency panel. Place it over the iris and white of the eye in the Layers panel.
4. Set the iris's fill color to your eye color of choice. Draw a smaller circle in the iris to form the eye's pupil. With the Pencil Tool draw some additional shapes in white to create shiny highlights (circles, stars, or hearts).
5. Add additional details like little scallops (drawn with the Pen Tool or Pencil Tool) in the outer corner or define the eyelashes.
6. Draw some cute eyebrows. I chose little hearts rather than a traditional brow design. Once again, I used the Pencil Tool.

Repeat these steps for the other eye (or Copy, Paste, Reflect, and adjust the position of the pupil and iris).

Step 5

For the nose, a few simple shapes defining the nostrils and shadows do the trick.

1. Start with teardrop-like shapes drawn for each nostril.
2. The sides of the nostrils, drawn with the Pen Tool, are like peach-colored (#ff786b) parentheses.
3. The shadow below the nose outlines both nostrils and the philtrum above the mouth. The Linear Gradient goes from a rosy peach (#ff786b) to light peach (#ffde9e).
4. The highlight shape (a messily drawn teardrop) goes from light cream (#fff7d4) to light peach (#ffde9e).

Step 6

Let's complete the head.

1. Set the fill color of the head to a Linear gradient that goes from #ffae85 to #ffde9e to #ffbc8c. The ears are set to light peach (#ffde9e).
2. I added a stroke to the head shape of #ffae85. Group together all of the head components. Copy and Paste the head and go to Expand under Object. Make sure only Stroke is selected and hit OK. Unite these copied components in the Pathfinder panel. Set the fill color to dark purple and Align it behind the original head in the Layers panel. Set the Stroke width to 1–2 pt in the Stroke panel.

2. Drawing a Cute Hairstyle

Step 1

Now that we've got the basic head of our character done, let's create her main hairstyle. Double-click the Blob Brush Tool (Shift-B) to bring up its options. Set the Fidelity slider to the right (though not all the way over). As we'll simply be sketching with it, set the size to 1 pt.

Step 2

Make sure your head components are Grouped together. This will allow you to keep your Layers panel organized.

1. Using the Blob Brush Tool, start sketching out the character's hair. I've opted for choppy bangs (fringe).
2. Continue drawing the hair. Think of the hair as being defined by large sections versus strands.
3. Once you've completed the front portion of hair, Group together your sketched components and trace the hairstyle with the Pen Tool.
4. Delete the sketch so you're left with a single object for the hair. Set the fill color to something bright and fun. I chose purple (#6f28ba).

Step 3

My little character has a ponytail. As such, we'll be drawing the following hair components behind the rest of the head.

1. Start with drawing a shape that denotes the hair being pulled behind the head into the elastic of the ponytail.
2. The shape of the hair at this point is up to you: is it straight, curly, braided, or tied into a bun?
3. Repeat what we did previously with tracing the sketch.
4. Outline the hair components by placing stroked copies of them behind the original shape (as we did for the head) in the Layers panel.

Step 4

Now let's render the hair.

1. Using the Pencil Tool or the Pen Tool, draw gradient filled sections of hair that define shadows. Note how these shapes curve in such a way that mimics the contour of the ponytail. The gradient goes from purple to dark purple.
2. Further define the shadows and sections of the hair.
3. Note how the bangs have a shadow shape for each separation and what side they're on.
4. Play with additional shadow or highlight shapes in order to give your character's hair some fun variations. I drew an inverted scallop shape on the ponytail.
5. Reduce the Opacity of your shadow shapes in the Transparency panel to your liking. Add highlights or additional colors to your main hair design if you see fit. 

Step 5

Now let's add a cute little bow.

1. Draw a lumpy heart shape with the Pencil Tool, making sure your path is closed.
2. Repeat on the other side. Don't forget to draw a connecting shape in the center of the bow. Unite your bow components in the Pathfinder panel and set the fill color to something bright, like the fuchsia (#f01e8c) seen below.
3. Outline your bow in the same fashion as we outlined the head and hair. Use the Blob Brush Tool in order to draw details on the bow.
4. Use the Pen Tool to add a couple of shadow shapes to the bow beneath the details drawn previously. Set the fill color to dark purple and its Opacity to 50% or less.
5. Group together your bow components and place the hair accessory on top of your character's head.

Step 6

Finally, Expand (Object > Expand...) the strokes of your character so the sticker base is forever scalable without having to change the stroke size later. We'll be using this icon as the basis for each character sticker within the rest of this tutorial. Make several copies of the design as it is now (six in total).

3. Current Status: Playing Games

Step 1

Now we begin the fun! Let's start with a sticker for all of those times you want someone to know you're playing a game (or want to play a game with them!).

1. Starting with the mouth, I've used the Blob Brush Tool to draw a line curving upward.
2. Draw another, smaller line curving downward.
3. Fill in the center of the two curving lines with dark purple and the Pen Tool.
4. Draw the bottom lip. Note how it's a bit flat on the bottom edge.
5. Fill in the shape with peach (#fe8c82).
6. Draw the top lip. Mine has no pronounced Cupid's Bow, though perhaps your design has a different shape to it.
7. Fill in the top lip with a bright rose color (#ff305a).
8. Draw in the teeth. Note how they follow the contour of the top lip and curve a bit on the bottom.
9. Set the fill color to the same gradient as was used for the white of the eyes.

Step 2

1. The hands are cartoony and simple, consisting of only three fingers. I drew mine with the Pencil Tool, not bothered about them being too detailed.
2. Outline the hands.
3. Draw a rounded rectangle in gray and outlined in dark purple for the game controller.
4. Use the Blob Brush Tool to draw a small cord for the controller.
5. Group your design together and give it a thicker overall outline in the same manner as was done with the head and hair previously. Make sure to Expand any strokes before creating your outline. Then draw a brightly colored circle with the Ellipse Tool and place it behind the rest of the design.

This completes your first sticker.

4. Current Status: Watching a Movie

Step 1

Pass the popcorn! Next up is a chat sticker perfect for denoting something entertaining or letting others know you're viewing a fantastic film.

1. Draw two rectangles over the eyes with the Rectangle Tool (M). Set the fill color of the left one to teal (#00d1c5) and the right one to fuchsia (#f01e8c).
2. Draw two larger white rectangles behind the first two. Use the Direct Selection Tool to pull the Live Corners inward in order to round them out a bit. You can also adjust the corners' radii in the Transform panel.
3. Draw a thin horizontal rectangle for the bridge of the glasses.
4. Unite the white rectangles in the Pathfinder panel. Outline the glasses by adding dark purple strokes to the white object as we outlined the head previously in this tutorial.
5. Duplicate the white frames of the glasses, and set the fill color to dark purple and the Opacity to 40% in the Transparency panel. Place this shadow shape behind the glasses in the Layers panel, off to the lower right slightly.
6. Finally, draw a couple curved shapes in each lens in white with their Blend Mode set to Overlay in the Transparency panel. Group all of your 3D glasses components together.

Step 2

Now that she's got her 3D glasses on, our little chat sticker friend needs some popcorn. Let's start by drawing a container for it!

1. Use the Ellipse Tool to draw a thin ellipse. Use the Rectangle Tool to draw a rectangle the same width as the ellipse.
2. Align the ellipse to the bottom of the rectangle (I manually aligned the bottom of the rectangle to the center of the ellipse). Unite these shapes in the Pathfinder panel and clean up any extraneous anchor points.
3. Using the Direct Selection Tool, angle the bottom of the object inward. Repeat on the other side.
4. Use the Anchor Point Tool (Shift-C) to manipulate the handles of the top edge of the object so it curves downward slightly.
5. Draw white stripes over the shape, following its contour. Group these components together.
6. Copy and Paste two copies of the red base shape. The first copy will be set to a linear gradient that goes from dark purple at 100% to 0% to 100% with the opaque colors on the edges of the shape. Place this shape over the others. The second copy's fill color is set to dark purple with a stroke of 1–2 pt and set behind the other popcorn container shapes.
7. Group together your objects and adjust the overall shape as wanted.

Step 3

The popcorn will be made into a simple custom brush. Draw a puffy popcorn shape in light yellow with the Pencil Tool. Outline the shape and make sure to Expand your strokes. In the Brushes panel, go to New Brush > Scatter Brush. Set the Rotation to Random and play with its angle as much as you need. Test out the brush with the Paintbrush Tool (B).

Step 4

1. The mouth on this sticker was created entirely with the Blob Brush Tool. Start with two curved lines for the puffy cheeks.
2. Set the cheek outline color to peach, the lips to rosy red, and the mouth opening to dark purple. Note the direction of each shape's curve.
3. Fill in the lips with peach and add highlight colors (light peach, cream, or white) as you see fit.

Step 5

Let's put it all together! Use the custom popcorn brush you made to draw a couple of squiggly lines of popcorn behind the popcorn box. Copy and Paste one of the hands from the previous sticker design so it looks as if she's chomping on the popcorn.

When you're satisfied with the placement of the popcorn brush, Expand the brush strokes and use the Magic Wand Tool (Y) to select the transparent boxes around the brush components to delete them. Give the final sticker design a thick outline to finish it.

5. Current Status: Sleeping

Step 1

For the sleeping status we begin again with the base head created earlier in this tutorial.

1. Using the Blob Brush Tool, I sketched out the basic look of the closed eye, which covers most of the current eye.
2. Trace the closed eye sketch with the Pen Tool on both sides. Set the fill color to peach. Draw thin, outline-like shapes that curve over the closed eye.
3. Set these shapes to the same rosy peach as used on the nose.
4. Redraw or adjust the eyelash shapes and place the newly drawn eye components under the hair in the Layers panel.

Step 2

1. Delete the ponytail from your design.
2. With the Pen Tool draw a top of a hat (it looks a bit like a beret at this point).
3. Behind the head, draw a cute curving shape. This forms the sleeping cap. It looks a bit like a ponytail. If it helps, sketch it out first before drawing with the Pen Tool.
4. Outline the top of the cap.
5. Outline the bottom of the cap.

Step 3

Use the Star Tool to draw a yellow (#ffbc04) star. Adjust the corner radii by pulling in the live corners with the Direct Selection Tool. In the Pattern Options panel create a New Pattern, setting the H Space and V Space to 5 px, and the Tile Type to Brick by Column.

Step 4

Copy and Paste the main sleeping cap pieces and apply the star pattern to them. Draw a yellow circle for the pompom on the end of the sleeping cap.

Step 5

1. Draw a puffy pillow shape behind the sleeping head. Draw a simple closed mouth with the Pen Tool.
2. Set the fill color to white and the stroke color to dark purple.
3. Draw a cute teal shape (a bit like a curving teardrop) on the right side of the pillow. Add white or lighter teal stripes if you wish.

Step 6

Give your final sleepy sticker design a thicker outline as has been done previously. Don't forget to Expand any strokes before doing so. Additionally, you can draw little messages with the Blob Brush Tool or use a cute font with the Text Tool.

6. Current Status: In a Silly Mood

Step 1

Let's get weird. Copy and Paste the fuchsia bow. Reflect it over a vertical axis and place it on the right side of the head. Copy, Paste, and Reflect the ponytail so that the character has two pigtails. Rotate them around as you see fit.

Step 2

1. To draw smiling eyes, draw a half circle overlapping the lower half of the eye in light peach.
2. Draw a dark purple line outlining the top half of the half circle.
3. Repeat on the other side.

Step 3

1. Use the drawing tool of your choice to draw a smiley, pointed mouth.
2. Don't forget to add an upper and lower lip. I found it easiest to do so with the Blob Brush Tool.
3. Draw a small, three-fingered hand.
4. Make sure it overlaps the character's mouth a bit. Outline it and define the fingers slightly with dark purple lines. Apply the same linear gradient as was used on the head.

Step 4

1. Use the Blob Brush Tool, or a font you enjoy, to repeatedly draw lines of letters in whatever onomatopoeia your language may use for laughter.
2. Group together your laughing letters and draw a circle overlapping them.
3. With both the group and circle selected, Make a Clipping Mask (Control-7). 

Step 5

Place the clipping mask group behind the sticker design to finish it off.

7. Current Status: Listening to Music

Step 1

Let's create a simple set of headphones by embellishing a gray half circle.

1. Draw a circle and a rectangle. Let the rectangle overlap the circle slightly and hit Minus Front in the Pathfinder panel.
2. Overlap part of the right side of the newly cut circle with a pink rectangle.
3. Use the Shape Builder Tool (Shift-M) to select the non-intersecting component of the rectangle. Deselect and delete it.
4. Draw several rectangles over the pink shape to create stripes.
5. Delete them from the pink shape with the Shape Builder Tool.
6. Draw a star with the Star Tool over the left half of the headphone.
7. Use the Shape Builder Tool to delete it from the half circle. Change the stripes' colors to fuchsia and the pink shape to dark fuchsia.
8. Draw shadow and highlight shapes in a manner similar to what was done with the hair. Use Linear gradients of dark purple and light yellow for each. Use the Shape Builder Tool to delete extraneous portions of these shapes from the gray half circle.
9. Give the headphone a dark purple outline and group all of the components together.

Step 2

1. Copy and Paste the headphone group so you have one for either side of the character's head. Place them beneath the front portion of her hair in the Layers panel.
2. Draw a fuchsia shape on the top of her head to denote the band of the headphones.
3. Draw little teal music notes, hearts, and sparkles coming out of the right side of the headphones. Use the same mouth from one of the previous chat stickers, or draw a new one.

Step 3

Finally, give the entire design a thicker outline.

8. Current Status: Belting Out a Diva Number

Let's change up the final design by drawing a tiny, doll-like body for it.

Sketch over the design using the drawing tool of your choice. Denote the basic body shape in a simple gesture drawing as well as any props being held. This one has a simple wide stance with a microphone in one hand. Group together all sketch components.

Step 2

1. Draw a gray circle over the end of the microphone.
2. Using the Blob Brush Tool, I drew the top lip, curving in a half circle.
3. Draw the bottom lip and the inside of the mouth. I also used the same closed eye components from the sleeping chat sticker design created previously.

Step 3

The dress is a series of angles.

1. Start with the outline, drawing two peaks for the neck line, following the curve of the hips, and connecting at an asymmetrical angle.
2. Fill in the design with fuchsia.
3. Draw two little pointed legs coming out of the bottom of the dress.
4. Keep the neck a simple rectangle while the chest, at this point, is a triangle with a couple of curving lines denoting the character's bust.
5. You can hide the sketch in the Layers panel at this point.

Step 4

Use either the Ellipse Tool or one of the brush tools to draw a series of white dots in varying sizes all over the dress.

1. Group the dots together and set their Blend Mode to Overlay in the Transparency panel.
2. Layer additional dots over the others with varying Opacities and Blend Modes so the dress looks sparkly.
3. Group together the sparkle components, Copy and Paste the dress, and Create a Clipping Mask so the sparkles stay within the dress's boundaries.

Step 5

1. Outline the dress and body. Make sure, when creating a duplicate shape for the outline, that you've deleted the clipping mask in the copied shape.
2. Place the body beneath the head. Add tiny shoes if you wish and create a slightly more detailed microphone in the style of your choosing.
3. For additional sparkles, draw circles with the Ellipse Tool all over the design. Group them together and go to Effect > Transform & Distort > Pucker & Bloat and enter -78% into the slider. Expand your sparkles. 

Fantastic Job, You're Done!

Well done you! What other activities, moods, emotions, and silliness can you create in a chat sticker set? Kick the challenge up a notch and create a self portrait set of chat stickers. Share your creations in the comment section below. 

For similar tutorials like this one, check out these:

• How to Draw a Doll Base Body for a Dress-Up Game in Illustrator
• How to Create a Beautiful Set of Zodiac Portraits in Illustrator - Part One
• How to Create a Beautiful Set of Zodiac Portraits in Illustrator - Part Two
• How to Create Stylish Flat Space Icons in Adobe Photoshop

Join me and follow this joyful and meditative tutorial if you wish to learn some simple coloring techniques in Adobe Illustrator. We'll use the Mesh Tool while drawing a cute cartoon cow, floating in the yoga Lotus Pose above a green meadow. Grab your mouse or tablet pen, relax your mind, and let’s get started!

1. Create the Basic Cow Shapes From Your Sketch

Step 1

Start by making a rough sketch either on paper or digitally. You can use my image, which I doodled with the Pencil Tool (N) right in Adobe Illustrator.

First of all we are going to form the basic shapes of the head. Use the Rounded Rectangle Tool with 50 px Corner Radius to make a smooth shape for the nose, and use the Warp Tool (Shift-R) (you can check my tool settings in the screenshot below) to deform the nose, making a slight bulge on its upper part. Add the cow’s lower lip and warp it as well, dragging its lower part down a bit.

Step 2

Change the fill color on the nose to more of a skin tone, and add an ivory-colored head base with the help of the Ellipse Tool (L). Send the head shape to Back (Shift-Control-[)and draw a pair of rounded shapes with the Pencil Tool (N), or use the Ellipse Tool (L) as well to add two squashed ellipses.

Step 3

Let’s add the basic horn shapes to our cow’s head. Form a squashed ellipse and head to Effect > Warp > Arc, setting the Horizontal Bend value to -7% to make the shape blob in the bottom part. Object > Expand Appearance and apply the Arc effect again, this time setting the Vertical Bend value to 60%, making our shape slightly arched to the left.

Make a second horn and place both behind the basic head shape.

Step 4

Move on to the cow’s body. Create another rounded rectangle, placing it beneath all other shapes, and edit it with the Warp Tool (Shift-R), making it wider at the bottom.

Step 5

Draw a curved trunk-like shape with the Pencil Tool (N) (increase the Fidelity of the Pencil Tool to make the shapes smoother) and form a rounded hoof, reminiscent of a horseshoe. Duplicate the created arm and place its mirrored copy on the other side of the body with the help of the Reflect Tool (R).

Step 6

Now let’s form the cow’s legs, putting them in the well-known Lotus pose. Firstly, add a deformed ellipse for the back part of the leg, filling it with a slightly darker color than other body parts. Then use the Pencil Tool (N) to form the curved narrow shape for the front part of the leg. Make its tip forked, depicting a hoof. 

Put a dark-brown freehand shape above the hoof part and use the Intersect function of the Pathfinder panel to cut off the unneeded parts. Don’t forget to duplicate the leg shape before using the Pathfinder features, as it usually deletes both interacting objects.

2. Use Mesh to Color & Enliven the Objects

Step 1

Let’s start enlivening our image from the very first element that we’ve created: the cow’s nose. Select the shape and go to Object> Create Gradient Mesh. Set 4 for the Rows and 3 for the Columns quantity in the pop-up options window, and click OK.

Now the fun part! Arm yourself with the Direct Selection Tool (A) and start coloring by selecting two upper anchor points in the middle part of the nose and making them lighter than the basic nose shape. Then select all anchor points at the edges of our shape and make them darker, forming a shadow along the perimeter. You will notice the shape becomes more three-dimensional and smooth at once.

Use the same technique to color the cow’s mouth, making its upper part darker. You can turn the shape into mesh directly with the Mesh Tool (U) by clicking the object and then adding as many rows and columns as you need by clicking with the Mesh Tool (U) again in various parts of your shape (I usually click in the center and at the edges of the objects).

Step 2

Let’s add some ambient lighting in order to make the surface even more realistic. Take the Mesh Tool (U) and click the central vertical and horizontal lines closer to the edges, this way creating several additional rows and columns (the lines will be crossing in the spot that you’ve clicked). 

Now take the Lasso Tool (Q) and select the points on the newly created lines, making them a bit darker. Then select only the outermost points all the way along the edge of the shape. Press and hold the Shift key if you can’t select all the points at once. Finally, fill the selected points with lighter pink color, making the edges glow.

Step 3

Let’s try the same coloring method for the cow’s head. Firstly, Object > Create Gradient Mesh with 3 Rows and 4 Columns. Add 2 more rows and 2 columns very close to the edge, along every side of the shape, with the help of the Mesh Tool (U). Then select those pairs of anchor points that are next to the edge and make the fill color darker beige, leaving the central coloring ivory. As we see, the shape becomes bulged and looks more like a sphere.

Step 4

Now do the same trick with the Lasso Tool (Q) to create an ambient occlusion effect. Select the outer anchor points along the perimeter of the shape and make them much lighter, as if there is an additional light source behind our character. 

Step 5

When you’re satisfied with the coloring, deform the head with the Warp Tool (Shift-R), making its lower part wider than the top.

Move on to the right ear, this time setting the Rows value to 3 and the Columns to 2 in the Create Gradient Mesh options window. Add more mesh lines along the edge of the shape and apply the same colors as on the cow’s head to preserve the overall character palette.

Step 6

Add the inner pinky part of the ear and use the Reflect Tool (R) to mirror the ear over the Vertical Axis, placing its copy on the other side of the head.

Step 7

Let’s move on to the horns and make them shiny and slick! Create a Gradient Mesh with 2 Rows and 2 Columns and add several additional rows and columns with the Mesh Tool (U), making the cells of the mesh grid smaller. 

Select a column of the anchor points closer to the left edge and fill it with light-brown color, making a bright highlight. Then select the similar column on the opposite side of the horn and make it darker. Add gentle ambient lighting along the border of the shape and color the second horn in the same way, or simply replace it with a copy of the finished one.

Step 8

Move to the central part of the body, making it bulging and three-dimensional, just the same way as we did with the head.

Step 9

As for the arm, you might need to tweak the mesh a bit with the Direct Selection Tool (A) as it may look deformed at first when applied to a curved shape. Select and move the anchor points and their handles with the Direct Selection Tool (A) just as we do it with a regular path. Color the arm to match the other parts of the cow’s body.

Step 10

Start coloring the “hand” or the upper hoof. Add new mesh lines with the Mesh Tool (U) one by one by clicking on the outline of the shape. This might seem a bit tricky, but try to lay the lines along the shape, making them curved, so that the hoof doesn’t look flat. Pick the color from the horns using the Eyedropper Tool (I) and make the hoof shiny.

As you can see, every anchor point in our mesh has four anchor handles. You can move and edit them with both the Direct Selection Tool (A) and the Convert Anchor Point Tool (Shift-C) in order to obtain a realistic result.

Step 11

The next element in turn is the inner (or upper) part of the cow’s leg. Try making it a bit darker as it is farther from the viewer than the front part and is covered in shadow from the body.

Step 12

Proceed to the front part of the leg. Make its tip more rounded in order to make the mesh grid more even.

Follow the usual process—add more rows and columns with the Mesh Tool (U), placing them closer to the edges. Finally, apply the colors, putting a bright overtone in the center and along the boundary of the shape.

Pay attention to the area where two parts of the leg overlap, forming a knee. Fill the edge anchor points with the same color, so that the shapes blend nicely with each other, making a bent leg.

Step 13

Make the hoof more three-dimensional by coloring it the same way as we did with the “hand” part and with the horns. Enliven the element with bright hues of brown, achieving a smooth, glossy effect.

We’ve finished with the main elements of our character and here is how it looks at this stage:

3. Add Minor Details to the Cow

Step 1

Let’s start with the main parts by forming a pair of nostrils on the cow’s nose. Put a small ellipse on the left side of the nose and fill it with radial gradient, going from dark red in the center to bright orange at the edge, emphasizing the depth of the nostril hole. Add another ellipse beneath the first one, making it slightly larger, and fill it with linear gradient from light pink to white. Switch to Multiply Blending Mode, thus forming a gentle shadow around the nostril in order to deepen it a bit more.

Put two more ellipses behind the nostril, one larger than the other, select them both and use the Minus Front function of the Pathfinder panel to cut out a hole. Fill the newly created shape with linear gradient from dark red to black, switching to Screen Blending Mode to make a highlight. Duplicate and reflect the nostril, placing it on the other part of the cow’s nose.

Step 2

Form a group of ellipses of various sizes in the upper part of the nose and fill them with dark-red color, switching to Screen Blending Mode, thus making the nose spotty and realistic.

Step 3

Let’s return to the horns and make them more textured and sculpted. First of all, form the notches by creating a squashed narrow triangle with the Polygon Tool and apply the Arc effect with 43% Horizontal Bend value, making the shape curved. Object> Expand Appearance in order to apply the transformation.

Make several copies and place the notches in the appropriate position above the horn. Select them and Make Compound Path (Control-8). Here we need to cut off those unwanted parts outside the horn. For this purpose, select the horn and apply Object > Path > Offset Path with 0 px Offset value, thus creating a horn silhouette. 

Now select the created silhouette and the notches and apply Intersect from the Pathfinder panel. Make another horn silhouette with Offset Path, this time making it smaller. Switch both the created shape and notches to Screen Blending Mode, creating a glossy overtone, the way we did it with the spots on the cow’s nose.

Step 4

Apply the Offset Path with 0 px Offset value to the whole body of our cow, creating a single flat silhouette. Place several circles above the silhouette and cut off the unneeded parts in the same way as we did with the horn notches. Fill the created spots with brown color and switch to Multiply Blending Mode, making them semi-transparent.

Step 5

Let’s form the cow’s pink tummy. Create a 3x3 Gradient Mesh and make the shape more spherical and three-dimensional. Use the Warp Tool (Shift-R) to deform the shape a bit, making it more realistic.

Step 6

Don’t forget to add the main facial features of our cow. Let’s form the brows. Create an even circle with the Ellipse Tool (L), drag its right anchor point further right with the Direct Selection Tool (A), and make the shape slightly curved with the Arc Warp Effect, setting 45% Horizontal Bend Value. 

Add two half-circled thin strokes for the eyelids and place a red circle between the brows. Add some gentle shadows under the brows and eyes in Multiply Blending Mode to make the face more sculpted. Place some more shadows under the cow’s head and on the tummy to separate the body parts from each other.

Step 7

Now that the cow is finished, let’s add some compositional elements and a simple background to give our image a finished look. Form a green ellipse and add a wavy freehand shape above with the help of the Pencil Tool (N). Cut out the upper part with the help of the Pathfinder panel. Duplicate the shape and decrease the size of the upper copy a bit. Add a few green spots, making the meadow more fancy.

Step 8

Select both meadow copies and apply Object > Blend > Make. Proceed to the Blend Options and set the Spacing to Specified Steps with 10 to 20 steps. We also need to add some grass to give our meadow a natural look. Form a narrow triangle, as we did for the horn notches, and drag it to your Brushes panel. Create a new Art Brush with default settings and draw a few strokes with the Paintbrush Tool (B), creating gentle grass blades. I’ve also added a subtle elliptical shadow in the middle of the meadow for more realism, as our cow will be floating above the ground.

To make the ground more vivid and bright, select the upper shape from our blend group, duplicate it and apply a radial gradient from dark yellow to black, switching it to Screen Blending Mode and thus creating a sunny yellowish overtone.

Step 9

Finally, add a big ellipse in the background, depicting a rising sun. Fill it with pale-yellow gradient, but don’t make it too bright, so that the sun doesn’t look too distracting. Fill the white background with a gentle blue color, imitating a clear sky.

Here You Have It! Your Meditating Cow Is Finished!

Make a deep inhale and relax—our bright, calming illustration is ready! I hope you’ve enjoyed creating subtle color blends with the Mesh Tool and found these tips and tricks useful for your future tutorials. Keep creating art and bringing beauty and joy! Peace to everyone!

Fire is pure light. It's fast, intangible, and it seems to be alive. Its wild nature isn't easy to convert to a static painting, but once you manage to do it, your pictures may become as lively as fire itself.

In this part of the Harness the Elements series you're going to learn about fire and its forms, and how to create them in Adobe Photoshop. We're going to use the same tools you might be using constantly, and you'll discover that they're much more powerful than you thought!

Follow me to create fire from scratch!

1. Paint a Flame

Step 1

Create a New File (Control-N) and Fill (G) it with black. Light is bright only in darkness—when you light a fire on a sunny day, it's going to look weak and pitiful. A white background is the brightest you can get, so no matter how hard you try, your painted fire will not look bright on it.

Create a New Layer (Control-Shift-Alt-N). Use the Ellipse Tool (U), hold Shift and draw a circle. The color is not important.

Step 2

Double click the layer and select Gradient Overlay. Select Radial for the Style.

Warning: every time this window appears, don't copy the exact values—instead, try to reach the effect I presented by playing with the sliders.

Use following colors for the gradient (there's no need to use the exact shades, you'll even remember them better if you don't):

1. White: #ffffff
2. Unsaturated yellow: #fefde1
3. Saturated yellow: #fff68f
4. Yellowish orange: #fbb245
5. Reddish orange: #ca4a0c
   

Step 3

Right click the layer and select Rasterize Layer Style. Go to Filter > Blur > Gaussian Blur. Experiment with the Radius to make the edges blurry.

Step 4

This is the most important part, and it's also quite tricky, so be patient here. Duplicate (Control-J) and hide the circle to have a backup version. Then select the copy and use Filter > Liquify.

Use the Forward Warp Tool to distort the flame and get the shape you need. You may need to use a reference first.

Step 5

When you're done, double click the flame layer and select Outer Glow. Give it the color of the outermost color, and play with Size and Opacity.

Step 6

If you want more vivid colors, go to Image > Adjustments > Brightness/Contrast and play with Contrast.

Step 7

A flame is in constant motion, so it looks fake when it's static. Give it Filter > Blur > Motion Blur to avoid this effect.

2. Colorize a Flame

Step 1

What about magic, colorful flames? You could always change Hue (Control-U) to create them, but it would kill the unique relation between red, orange, and yellow. I'll show you a different method.

Hide the Effects (Outer Glow) for now. Go to Image > Adjustments > Black & White.

Step 2

Add the Image > Adjustments > Gradient Map for the layer. Change its Blend Mode to Hard Light and clip (Control-Alt-G) it to the flame.

Step 3

Experiment with the colors of the gradient. The left side will be put in dark areas of the picture, and the right side in bright areas.

Step 4

Show the Outer Glow again and give it the color of the edge.

Step 5

You can colorize the flame with any colors you wish with this method. However, keep in mind that some of them will not look natural just because we're not used to them, not because they're painted "wrong". You only need to make sure that the color inside is brighter than the one on the edge.

3. Paint a Fire

So, that was a cool way to paint a single flame, but what if you wanted many of them? Let's try another method, great if you want to paint a close-up of a fire.

Step 1

Just like before, start with a New File, black background, and a New Layer. Use the Hard Round brush to paint the base of the fire.

Step 2

Double click the layer. Check Inner Glow and select a deep, reddish orange (like #ff5a00) for it.

The effect should look like this:

Step 3

Use Filter > Blur > Gaussian Blur to soften the edges.

Step 4

Just like with the single flame, use Filter > Liquify and the Forward Warp Tool (W) to create flames.

Step 5

Add the Layer Mask to the layer. Use the Soft Round brush with 50% Flow to make the fire more variable.

If you're unfamiliar with the Layer Mask:

• Click the mask to get into the mask mode.
• You can use only black and white here.
• Black makes the main layer transparent, and white makes it opaque.

Use the same method to add more flames.

Step 6

Create a New Layer. Double click it and add Inner Glow with a more yellowish orange. Make the glow very thick.

Paint another part of the fire on this layer.

Step 7

Again, use the Liquify filter to create flames.

You can add more of them the same way.

Step 8

Create a New Layer. Again, double click it and add Inner Glow to it.

Use an opaque yellow-white gradient:

Paint smaller patches of fire on the layer.

Step 9

Use the Liquify filter to add chaos to them.

Step 10

Change the Blend Mode to Overlay to get a nice, variable brightness.

Use the same method to add more of the small flames. Remember: overlapping Overlay gets stronger every time, so be careful here.

Step 11

Create a New Layer. Paint small, pure white strokes in the brightest spots.

Step 12

Use Filter > Blur > Motion Blur to blend them better.

Step 13

If they stand out too much, add the Layer Mask and blend them with it.

Step 14

If you want to make the fire more alive, you can add Motion Blur to each part, every time using a slightly different Angle.

Step 15

We can't forget that fire is a light source. It doesn't have any shadow, but instead it makes other objects around cast shadows.

Step 16

The beauty of this method is that you can easily adjust it to your needs at any point. You can add more layers, change colors, or distort the flames to get the effect you want.

4. Paint Sparks

Step 1

Create a New File. Draw three small blobs with a big distance in between. When you're done, go to Edit > Define > Brush Preset.

Step 2

Go to Brush Settings (F5) and adjust them as below (the actual values may vary).

Step 3

Paint the sparks on a New Layer. Use reddish or yellowish orange, but never yellow for this purpose.

Step 4

You can add Motion Blur to the sparks, but it should harmonize with the blur of the flames.

Step 5

Let's make the sparks even shinier. Double click the layer and add orange Outer Glow.

Step 6

If you want to make the sparks brighter, duplicate (Control-J) the layer. You can also change Brightness/Contrast for the effect you want.

5. Paint Lava: Cracked Rock

Step 1

You can use this "pattern" on any surface you wish. I'll present it on a ball, but feel free to use any type of ground.

Start with a base colored dark, unsaturated blue (for example, #1e1f26). It will give a nice contrast to the lava.

Step 2

Create a New Layer. Double click it and add Pattern Overlay. You can use Concrete (of the set Texture Fill), but most of the rock patterns will look nice here. Clip the layer to the base with Control-Alt-G or by Alt-clicking the line separating the two layers.

Step 3

Right click the pattern layer and select Rasterize Layer Style. Change the Blend Mode to Overlay.

Step 4

Now, adjust the shape of the pattern to the shape of the base. There are three basic methods:

1. Use Filter > Distort > Spherize for a sphere (your pattern must be in the middle of the canvas for this to work properly).
   
2. Use the Free Transform Tool and Control-click the corners to adjust the pattern to perspective.
3. Use the Free Transform Tool in Warp Mode to adjust the pattern to a more complex form (like a monster body).
   

Step 5

Duplicate (Control-J) the base, then Merge (Control-E) it with the pattern. Re-clip (Control-Alt-G) if necessary. Add the Layer Mask and draw big cracks with the Hard Round brush, revealing the background.

Then add smaller cracks.

Step 6

Double click the layer. Add Bevel & Emboss with vivid orange for the Highlight. Make the Shadow transparent.

Step 7

Create a New Layer under the pattern. Control-click the pattern's mask to get a selection of this. Invert it with Control-Shift-I, and then fill (G)with any color.

Step 8

Double click the new layer. Add Inner Glow with orange-yellow gradient (#fc4d12, #fffe00). Change the Blend Mode to Hard Light, Technique to Precise, and play with the Contour.

Step 9

In the same window, add Pattern Overlay. Most of the rock patterns will work well; I've used the Mountains one (of the set Texture Fill).

Step 10

Add the Layer Mask to the base. Use the Hard Round brush to cut the cracks.

Step 11

Create a New Layer under the base. Use the Soft Round brush with 50% Flow to paint orange glow near the cracks.

Step 12

Change the color to yellow and paint close to the lava streams to make them shine.

Step 13

When shading the rest of the base, keep in mind that lava is a light source and it can't be shaded.

Step 14

If you don't like the blue-red contrast, you can always change the color (Control-B) of the pattern to more reddish. It will work best if the sky/ambient light in your picture is reddish, too.

6. Paint Lava: Eruption

Step 1

Create a New File. Use the Lasso Tool (L) to sketch a shape like the one below, and then fill (G) it with black. Go to Edit > Define Brush Preset.

Step 2

Open the Brush Settings panel (F5). Adjust them as below:

Step 3

I've prepared a very simple scene for the eruption; feel free to create your own.

Use your new brush to paint a strong "wave" of lava. First using reddish orange...

... then yellowish orange...

... and finish it with yellow.

Step 4

Merge (Control-E) the waves and use Filter > Blur > Motion Blur to give it an illusion of speed.

Step 5

Create a New Layer. Draw a big, white rectangle using the Rectangle Tool (U).

Step 6

Go to Filter > Noise > Add Noise.

Step 7

Go to Filter > Pixelate > Crystallize.

Step 8

Create a New Layer and clip (Control-Alt-G) it to the previous one. Fill it with deep, reddish orange and change its Blend Mode to Hard Light. Merge (Control-E) both layers.

Step 9

Double click the layer and go to the Blend if section. Move the upper black marker to the right, until the darker parts get completely transparent.

Step 10

Select the Soft Round brush. Set its Flow to 50% and Mode to Dissolve.

Add the Layer Mask and fill it with black to make the layer transparent. Then switch to white and paint in the mask mode to reveal only the parts around the stream.

Step 11

Let's reuse the "spark brush" we created before. We need to make it a bit denser first:

Step 12

If you want, you can give more speed to the sparks around by adding Filter > Blur > Gaussian Blur to them.

Step 13

Remember about the environment—lava is a strong light source!

7. Paint Lava: Lava Flow

Step 1

Start by painting a base for our "lava river" with the eruption brush. Again, start with reddish orange and get to yellow as you come closer to the opening. Keep the stream on a separate layer from the background!

Keep in mind that lava isn't water—it's more gel-like, very heavy and thick, and the cooler it is, the slower it moves. Obviously, it's the hottest right by the opening, and then it gradually cools down.

At the very top you can use Overlay mode to brighten this part even more strongly.

Step 2

Create a New Layer. Fill it with any color, double click it and check Pattern Overlay. Select Satin for the pattern (of the set Patterns), and then right click >Rasterize Layer Style.

Step 3

Clip the pattern to the stream with Control-Alt-G. Use the Free Transform Tool (Control-T) in Warp Mode to adjust the pattern to the perspective.

Step 4

Set the Blend Mode of the pattern to Soft Light and lower the Opacity to 50%.

Step 5

When lava cools down, it turns back into a rock. This is a gradual process—first lava slows down, and gets thicker and darker on the top, making a hard "skin" on the surface (like on milk). It creates a characteristic pattern, and I'll show you how to achieve it without painting it.

Create a chaotic pattern just as we did with the eruption (hint: Add Noise, Crystallize).

Step 6

Go to Filter > Blur > Motion Blur and drag the slider until the pattern becomes a set of straight black and white lines.

Duplicate (Control-J) the layer a few times, and then Merge (Control-E) them to make the pattern stronger.

Step 7

Clip (Control-Alt-G) the pattern to the previous layer and use the Free Transform Tool (Control-T) to rotate it.

Step 8

Use Filter > Liquify and its Warp Tool (W) to add "waves". Use the Curves Editor (Control-M) to make the pattern sharper and more contrasting.

Step 9

Double click the pattern and go to the Blend If section. We want to make the white stripes transparent. Do you know how to do it? Play with the sliders and see what happens!

Step 10

Set the Blend Mode to Multiply.

Step 11

Duplicate (Control-J) the previous pattern. Set its Blend Mode back to Normal. Drag it down a bit to fill the spaces between the dark stripes. Then double click it and play with the Blend If sliders to make the dark parts transparent.

Set the Blend Mode to Color Dodge to get a brightening effect.

Step 12

Add the Layer Mask to both layers. Use the Soft Round brush with 50% Flow to blend them nicely into the stream.

Step 13

You can use the same trick to create bright "wrinkles" up the stream.

Step 14

Don't forget about lighting the environment! Also, keep in mind that lava flow doesn't produce smoke on its own unless it touches something wet (it makes steam in this case) or it burns something.

8. Paint Embers

Step 1

Just as with the cracked rock, I'm going to show it using a sample sphere, but feel free to use the same actions for different forms.

Create a New Layer and draw a circle with the Ellipse Tool. Double click it and add a yellow-orange Radial gradient.

Step 2

Create a New Layer and fill it with any color. Double click it and check Pattern Overlay. Select Rust Flakes for the pattern (of the set Textures). Clip the pattern to the circle with Control-Alt-G.

Step 3

Rasterize and adjust the pattern to the form, just as we did with the lava-rock.

Step 4

Set the Blend Mode to Overlay. We're done with the first stage—it looks like a sun, doesn't it? That's the brightest ember.

Step 5

Duplicate (Control-J) the pattern and set its Blend Mode to Color Burn to cool the sphere down a little bit.

Step 6

Let's add a "shell" of burned and cool material. Create a New Layer, clip it, and fill it with any color. Add Web pattern (of the set Texture Fill 2) to it and Rasterize Layer Style.

Use the Free Transform Tool (Control-T) to enlarge the pattern.

Adjust the pattern to the form.

Step 7

Invert the colors with Control-I.

Step 8

We want to make the white areas transparent. Double click the layer and play with the Blend If sliders to get this effect.

Step 9

Set the Blend Mode to Multiply to get rid of the remnants of white.

Step 10

Add the Layer Mask to the base circle. Use it to cut to emphasize the shape of the chips. You can also use the Eraser Tool (E) for this.

Step 11

Create a New Layer under the previous ones and use the Soft Round brush with 50% Flow to add the glow, just like we did with the lava.

Step 12

Use the Magic Wand Tool (W) to select the chips, one by one. Create a New Layer and fill the selection with any color. Place the layer under the chips.

Step 13

Double click the layer and add reddish Inner Glow to it.

Step 14

If you want to cool down the sphere even more, turn it to red. You can also add bluish gray ash on top of the chips.

9. Thrown Flame

Let's create dragon fire! It's also a good technique for fire seen from a distance, for example for a burning house or forest, or magic fireballs.

Step 1

Use the Oil Pastel Large brush to paint the direction of the flame. The bigger the pressure, the longer and thinner the flame.

Step 2

Double click the layer. By adding yellow Inner Glow and reddish Outer Glow we'll get a shiny edge.

Step 3

Rasterize Layer Style. Go to Filter > Blur > Motion Blur. Use an Angle consistent with the direction.

Step 4

Create a New Layer under the flame. Use our eruption brush to add reddish orange flames.

Step 5

Use Filter > Blur > Gaussian Blur to blend hard edges.

Step 6

Use the Motion Blur once again. Keep in mind that the flames will always try to move up, no matter what their primary direction was.

Step 7

Add a New Layer and draw smaller flames in a more yellowish shade. Add the two kinds of blur.

Step 8

Create a New Layer above the main flame. This time use a yellow fire; embrace the white flame with it.

Step 9

Create a New Layer. Paint a lot of flames with any color.

Step 10

Double click the layer and add Pattern Overlay to it, with Wrinkles as the pattern (of the set Patterns).

Step 11

Rasterize Layer Style and change the Blend Mode to Soft Light. Play with the Opacity if it's too strong.

Step 12

Create a New Layer and add a few white patches in the yellow flame area.

Step 13

Add Gaussian Blur to them.

Step 14

Don't forget about the smoke!

Good Job!

There's a lot of work behind us, but we're still far from done! If you want to harness all the elements, check out the others of the series: Frozen and Liquid Water, and stay tuned for the next part. We're going to harness earth, to paint rocks and all kinds of ground!

Adobe Bridge is a really useful tool for ‘bridging’ the content of your computer’s folders between your Adobe design applications. You can use the programme to organize files, and create sophisticated libraries of images and text documents ready to use in your layout designs. 

Mini Bridge creates a miniature version of Bridge within your Adobe application, allowing you to drop content into your InDesign layouts quickly and easily. In this Quick Tip we’ll take a look at how you can improve the speed and flexibility of your workflow by incorporating Mini Bridge into your InDesign Workspace, and how you can best organize your folders and their contents for maximum efficiency.

This Quick Tip applies to InDesign CC, CS6 and CS5. You can also check out how to locate images in InDesign CS5 using Mini Bridge in this quick tip tutorial from Gavin Selby.

Step 1

First up, you need to install Adobe Bridge before you can access the Mini Bridge function in InDesign. Once installed you can access Mini Bridge in both Photoshop and InDesign.

Once you have Bridge installed, you can open up InDesign and File > Open an existing document or create a new one. Here, I’ve opened a moodboard grid I created in my recent moodboard tutorial, ready for images to be placed.

Any document layout will work just fine for this tutorial—just create a new document if you haven’t got anything prepared, to practice using Mini Bridge.

Step 2

Bridge allows you to view a single folder of files at a time. So it’s a good excuse to get your folders nicely organized. Firstly, open up the full version of Adobe Bridge by clicking the Bridge icon in the Application bar in InDesign. We’ll first take a quick look at the full Bridge application before using Mini Bridge.

With Bridge opened you can navigate through your folders and move things about if you need to. To drop a file into a different folder, drag the file icon in the central Content window and drop into your chosen folder in the Folders panel (to the left side of the Bridge workspace, next to Favorites). 

Try to group common elements together. If you have a group of images you want to use for a particular design project, group them in an ‘Images’ folder, and sit this folder within a project folder. Keeping your files grouped and organized will help you to get the most out of Bridge, and also help rectify situations when images are flagged up as modified or missing in InDesign—you can be optimistic that your image file is lurking somewhere in the folder you placed it in. 

You can also view information about your image files using the right-hand Metadata window in Bridge, including useful things to keep in mind when designing your layouts, such as image resolution and file size; and you can also look at the camera data for the image, in a similar way as you might in Adobe Lightroom. 

Click on Keywords, next to Metadata, and you can also view the keywords assigned to your image if you’ve downloaded from a stock image site. 

You can also search for images by keyword using the Filter window, at the bottom left corner of the Bridge workspace.

Bridge also offers the option for creating Collections (Window > Collections Panel, then select New Collection from the bottom of the panel), which are groups of images only brought together in Bridge. This is useful if you don’t want to move files permanently to different folders on your computer.

Step 3

Once you’ve organized your files and folders, return to InDesign and to your document.

To open Mini Bridge, you can either Shift-click on the Bridge icon in the Application bar at the top left of the workspace, or go to Window > Mini Bridge from the menu bar.

When Bridge first opens, it will either open at the last-used folder, if you’ve previously used Mini Bridge, or at your root Computer folder. 

Click on the small arrow next to the folder name at the top of the panel to access subfolders and navigate through your folders, or click on Computer to access a drop-down menu of your computer’s principal drives as well as Recent Files and Recent Folders. From here you can also access a previously saved Collection (see Step 2, above). Here, I created a collection in Bridge called ‘Paper’.

Step 4

Now you can start to drop images into your InDesign layouts from Mini Bridge. To view the image previews at different scale, slide the bar at the bottom right of the Mini Bridge panel along to the left (smaller scale) or right (larger scale).

It’s best if you first create a frame for your image. From the Tools panel, select the Rectangle Frame Tool (F), Ellipse Frame Tool or Polygon Frame Tool and drag (holding Shift to create a perfect shape) to create a frame on the page. 

With the image frame selected, hop over to Mini Bridge and click on your chosen image to select it. Drag the image across and drop onto the frame. The frame will be filled with your image.

Repeat the process, selecting another image and dragging it across to another image frame.

Step 5

If you’re creating an image-heavy document, such as a moodboard like the one here, or perhaps a magazine or brochure, you can select several images together and ‘load’ them onto your cursor. 

To do this, navigate to your folder of images in Mini Bridge (to view the details of the images used here, head over to this tutorial). 

Holding Shift you can click and select several images at once, or use Command (Mac OS) or Control (Windows) to skip over images selectively as you pick and choose from a range of files. Once you’ve highlighted the images you want, drag your cursor outside of Mini Bridge and click once. A paintbrush icon will replace your cursor, alongside a preview of one of the images in your selection and the number of images loaded onto your brush. 

Extra Tip: Picked up an image you didn’t want? Hit Esc on your keyboard to remove the top image from your selection of images once loaded onto your brush. 

Hover over a prepared image frame and click to drop the first image into the frame. Repeat to drop the remaining images onto your document.

Conclusion

If you’re designing a document that’s image-heavy, like a moodboard (see image below) or magazine layout, get in the habit of using Adobe Bridge to organize your images, making use of the Collections feature to create custom groups of files for your projects.  

Mini Bridge is a super useful little function that will help to streamline your InDesign workflow and make it more efficient. Mini Bridge allows you to extend the functionalities offered by Bridge directly into InDesign, which helps to promote a more flexible workspace without the need to be hopping in and out of different applications.

Introduction

Welcome to my tutorial on How to Create Animation Assets in Adobe Photoshop. This tutorial will not teach you "how to draw" items specifically. It's more concerned with how to think about the elements for animation. What does my animator need and why? We'll cover what Title Safe is, and the importance of correct labelling.

Assets

• Futura Handwritten Font 
• MagicPicker Color Wheel

Our Story to Animate

For this tutorial I will be using Little Miss Muffet as our story.

Little Miss Muffet
Sat on a tuffet,
Eating of curds and whey;

Along came a spider,
Who sat down beside her
And frightened Miss Muffet away.

Assets We Will Be Creating

To make asset creation easy, we will make a list of what we need to create. This will also help us set up our Photoshop document in advance. 

Little Miss Muffet

• Profile walk
• Profile run
• Seated
• Head
• Face: eating, eyes blink
• Arms
• Legs
• Body
• Hands
• Arms: no hands

Tuffet 

• Large cushion

Curds & Whey

• Bowl
• Spoon
• Cottage cheese

Spider: Side and Front On

• Legs x 6; Arms x2
• Top hat
• Cane
• Eyes
• Mandibles
• Abdomen
• Upper body

Environment

• Tree 
• Hill
• Sun
• Cloud
• Grass

PSD Setup: Storyboard

For our storyboarding, you can really set up the document to whatever size you like. However, just to keep things in proportion, I have gone for 1920 x 1200 px at 72 dpi, with the Color Mode set to RGB (Monitor Colour)

Here's how I've set up the storyboard. Each line of the rhyme has been given its own panel. For this we don't need it to be really detailed—think of it like thumbnailing. We just need a basic idea of the action, which can be shown with arrows and comments if need be. This is useful for the animator to have so they know what has to happen. These frames can also be used to work out how long each action has to be on screen for and to make sure it matches up when set to audio.

Here's my roughed out storyboard, and the animator, Dave Bode, is happy with how it's looking, so I can get started creating the assets.

PSD Setup: Assets

Because for this the scene doesn't change, we will be creating all of the .psds in the same document. After Effects is like a time-based Photoshop, so it uses layers and groups in the same way. For more complex animations it would be advisable to create characters, assets and/or environments in separate documents. 

For this animation Dave would like the document size to be 3840 x 2160 px at 72 dpi, which is 4K resolution. This is so he can have a little play room when it comes to zooms and pans if need be. I create a New Document by going to File > New.

In the Layers panel I have created Groups to place our assets in. Groups can be created by clicking the folder icon at the bottom of the Layers panel. In this you can drag in or create New Layers. This keeps everything tidy. 

As an added bonus you can assign a colour to the group by right clicking on it and selecting a colour. This will automatically change all the Layer names inside that Group to that colour. You can change the colour of the Layers inside the Groups by right clicking on them. 

Being organised with Layers is a great time saver and is especially important when you've got a tight deadline, it's late at night and you've just drunk the last of the coffee. 

The most complex element in the tale of Miss Muffet is the spider, mostly due to his number of limbs. Here is how I have organised the layers in preparation for asset creation. This is our starting point, but we may add more layers in the future for extra expressions, props and so on.

There is a very good chance some of the layers may be changed, moved, updated, duplicated and removed, so don't take this template as verbatim. It's just to give an idea of how things can be set up. When creating assets it's easy to miss seemingly simple things, either by your own planning or from your client or (art) director, so expect changes! 

Title Safe: What Is It and Why Do We Need it?

What is title safe? All over the world people are using devices that are of different aspect ratios and resolutions, and we have to account for the lowest common denominator. Most people will be viewing this animation on a 16:9 screen, but someone out there may still have a 4:3 monitor, so we need to make sure that no vital info is cut off on the edges. Below is an example of title safe bounds. 

In this example the blue area will be seen on all devices, and the purple area is pretty much the limit of where any action should happen. We need to keep this in mind for our asset creation, so when working on an animation, ensure that you have the title safe bounds from your animator. 

The cross on the blue square indicates the centre of the scene, and the perpendicular lines on the periphery indicate the halfway points of the scene. 

Next what I will do is select this image and place it into my psd. This will vary depending on how your title safe is provided to you. A quick way to get this image is to have a print screen from After Effects of a 4K scene with title safe applied. This may not be as clean and crisp as the above example, so if you feel you are going to be doing a lot of animation work in Photoshop it may be worth cleaning up the lines. 

Our Process

We start off with rough sketches of all the elements. Why do we do this? This is so we can get the relative sizes right. Things like: "Is the tuffet big enough for two to sit on?" "How big does the sun need to be in the sky?" "Is there enough room for the action to happen?"

For each set of elements, I will show you the process from the sketch stage to the complete asset stage. Let's begin with the setting of the scene: The Background. 

Start Off With the Background

First of all I have roughed in the background with the tuffet, Little Miss Muffet and the Spider in the seated pose to make sure everything fits. Each element of the sketch is on a separate layer for convenience.

Next I turn off the character and tuffet layers and deal just with the background elements. 

Now that we have our basic scene roughed out, we need to work out what we need. The cloud will move, but there will be no form changes. However, I think it'd be interesting to have the sun rays animate, so I think we will have two sets of rays that Dave can fade or cut between.

With some animation projects there would probably be things like model sheets and colours pre-arranged with the client, but in this case as it's for fun I'm just designing on the fly!

Here I have turned off any unnecessary layers and lowered the opacity of the sketch. Set the sketch folder to Multiply in the Layer styles so it's easier to see. 

I've decided to scale the sun down as it's too big. I do this by selecting the sun plus the two rays layers and pressing Control-T to Transform. We need to make sure the scene elements don't overpower the action.

Here's how the environment layers have been organised.

Tuffet

The tuffet is a fairly simple thing to add to the scene, but is also quite important, as both Little Miss Muffet and the Spider have to be able to sit on it. A tuffet is like a foot stool or a large cushion.

Below we have the scene sketched out with the tuffet centrally, as this is where the majority of the action needs to take place. 

When creating scenes, always plan them out. Characters need to be sized relative to their surroundings and each other. As you can see, I have also included a rough of the bowl for curds and a spoon for a one stop reference for us. A little planning can save a lot of work later on. Here we have drawn up the tuffet and using a rough sketch of the characters we can check that they will both fit comfortably. This can be a useful image to send to your animator.

Here is how the assets will be provided to our animator. I have drawn some overlapping grass to ground the tuffet, but I have kept this on a separate layer in case the animator wishes to do some effects on it in After Effects. 

.

Spider Multiple Assets: Time-Saving Trick!

When it comes to things like spiders you're going to get repeating elements, so why draw each one by hand? Here's an easy way to get multiple features in the blink of eight beady eyes!

Eyes

Step 1 

Now spiders can have varying numbers of eyes, and we don't want to draw each one individually. On a New Layer paint out one eyeball.

Step 2

By holding Alt and having the Move Tool (V) selected, drag the eye out a further seven times, and position all the eyes onto the face.

Step 3

On a New Layer, paint a closed eyelid over one of the eyes. Repeat the copy paste process over the other seven eyes.

Step 4

Arrange the layers so that the corresponding lids sit above the eyeballs. Hide the closed lid layers and select each set of eyes and lids. Next press Control-T to scale them, and repeat the process with the other sets of eyes and lids. 

You should end up with a set like this. If you switch the lids layer on and off it looks as if it's winking at you! 

Arms and Legs

Step 1 

Unless you're going to be animating a millipede, Mr Spider will probably be an example of the most leg assets you will need to create. Luckily spider legs are fairly uniform so we can save ourselves some time.

Below are our spider roughs: front on and side on. Because of the simple design we can utilise the leg shapes for the front and side views. Have your model sheet roughs on hand for this section.

Step 2

Draw the three sections of the leg: the thigh, the calf and the foot. I'll make each on a New Layer so that Dave can animate these sections independently. When drawing the three sections, I'll make sure they overlap slightly. He may choose to use the Puppet Tool in After Effects, so he may join the three leg sections together. In my experience it's better to give the animator options!

Step 3

Once you've painted up your three sections of leg, select the thigh, calf and foot and copy them a further three times. You can do this by selecting the three layers by holding Shift and dragging them to the New Layer icon at the bottom of the Layers panel, which is a square with a folded corner. 

Step 4

Select two legs and using Transform, which is Control-T, Flip them Horizontally by going to Edit > Transform > Flip Horizontal. Group each leg individually and give them a helpful name like Leg copy 2.

Step 5

We will be repeating the process of creating three sections for the arms: upper arm, lower arm and hand. Remember when painting up the sections to allow a little overlap.

Step 6

Here are the completed front-on Spider assets. He's in this pseudo T-pose for convenience and I'm sure Dave will find it easier to start animating with him laid out like this. 

Next copy all the legs and arms layers, paste them into the side-on group, and rearrange them as required. 

Spider Asset Organisation: Front Facing Spider

Here comes the non-creative, organisation section which, although not hugely fun, is very necessary. You will thank yourself later for checking everything is in order. Here's a breakdown of the front-on Spider assets.

The Cane

The cane is one of these wonderful assets where we can just copy and paste it for the front and side views. We could just have this as one asset but as the front-on and side-on spiders are in their own groups, this means that your animator will not have to search for the individual sections. 

The Arms

Arrange all the arm sections into clearly defined folders. It can be helpful to colour code them. Ensure the hands and the lower and upper arms for each group are labelled.

The Legs

As before, this is a labelling task and here's how I have laid this out for Dave.

The Eyes

The eyes! For this, make sure that the correct closed eye corresponds with the correct open eye which should be directly below it.

The Head

This is, thankfully, a simpler one to organise! Here we have the base head and the spider's mandibles (if you're unfamiliar with arachnid anatomy, these are the bits around the spider's mouth). I have these separately so that Dave can animate them if he so wishes.

The Body

Another simple section! Here we have the abdomen (the bum of the spider) and the upper body. Both are on separate layers for potential animation purposes. Keep parts labelled!

Spider Asset Organisation: Profile

Because most of the assets are copies of each other, the only differences between the profile spider and the front-on are:

• The pupils of the eyes have been moved to the front of the eyeballs.
• There are only five eyes, as some would not be seen from this angle.
• The placement of the anatomy has been shifted.

I have included screen grabs of the layer setup for your convenience. Remember to keep everything clearly labelled! 

The Cane

The Arms

The Head

The Eyes

This is the only massive change for the spider, where the pupil has been moved to the front of the eyeball in all cases and rather than eight eyes there are only five.

The Legs

Finally: The Body

Here we have our spider assets laid out in a clear fashion for Dave!

REMEMBER: Proper labelling is very important.

Curds and Whey

Whey-hey! The spider section is done and now we just have Little Miss Muffet's lunch to do. This has been broken down into the bowl, curds, a spoon, and some curds on the spoon. 

"Why?" you ask. Because I thought it might be cool if when Miss Muffet gets scared, the contents of her bowl go flying!

Group them, and then label as before.

Little Miss Muffet's Side-On Assets

Now that the simple elements have been created, we have the trickier tasks of making assets for things that move. For Little Miss Muffet we will need two lots of elements: profile and front-on. The front is for her sitting eating, and the side is for her running off camera. 

Miss M is a little trickier than the spider in the sense that she needs different anatomy and clothes, and thus will look different in profile to being straight on. Here's a breakdown of all the parts I've created.

Here's how the lovely Little Miss Muffet looks all painted up. They grow up so fast! *sniff*

Clothing

Here are the main parts of her clothing, with the exception of her shoes and sleeves. For convenience I have kept the sleeves with the arms and shoes with the legs.

Head and Expressions

Here are her side expressions, which are pretty much just pure terror.

Arms

Pretty straightforward here. I painted out the arm straight to represent pure fear. 

Legs

Most of the leg will be hidden by the skirt, but I've given Dave some extra just in case.

Hair

I've kept her hair separate so that when she runs Dave can animate it trailing behind her!

Little Miss Muffet's Face-On Assets

Mouth and Hair

To keep this really expressive I've created a variety of mouth and lip shapes so Dave can animate her eating and shocked. The hair is in there, as the mouth parts are at the top of the Layers stack and the hair needs to be over everything.

Eyes

Much like the spider, Miss Muffet has open and closed eyes, but with the addition of eyebrows for expression.

Face Base and Body

I've grouped her body and clothing together here as they won't move much while she's seated. If you note the skirt seated layer, there is a mask which I have included to allow the legs to show through, and if Dave needs the whole skirt it's there for him.

Arms

Arms are as before, although I felt we needed hands on their own for when she holds the bowl and spoon.

I've added arms without hands in a separate folder for animation with the hands. 

Legs

Straightforward legs that can be used while seated or standing.

Pigtails

As with the profile run, I have put her pigtails as their own pieces to use as another emotional tool.

That sums up our base elements. Next to tweak the assets so they look as good at they possibly can!

Final Touches

We also need to ground Little Miss Muffet and the Spider, so I am going to create a layer of grass for the characters' feet to move behind. 

Step 1

On a New Layer, draw in a rough line where you would like the grass to go. Make this in an obvious contrasting colour.

Step 2

Begin painting blades of grass along the line using a brush of your choice. 

Step 3

Once you have painted all along the line, Copy the layer by pressing Control-C and then Paste (Control-V). Then Transform (Control-T) and manually flip and rotate the grass to make it a little more lush.

Step 4

Next lock the transparency of the layer by pressing the small chessboard icon next to Lock on the Layers panel. Add in a variety of greens to give variety. Unlock the transparency and take a soft eraser (E) and soften the edge of the grass base.

Step 5

I duplicate the grass layers and then flip, transform and warp them to make them slightly different. On the grass closest to the camera, I blur the grass using Gaussian Blur to give the illusion of depth. Gaussian Blur can be found by going to Filter > Blur > Gaussian Blur. I have blurred the horizon of the grass in the Environment folder slightly just to give a little depth, using the same Gaussian Blur method.

Here I've changed to Little Miss Muffet to make sure that it looks good with both characters.

Step 6

I'm really happy with how the grass looks, so I flatten the eight grass layers into four simple grass layers and name them accordingly. 

Credits

Dave will be taking care of the credits so I have simply placed some text into the psd to save him time. The font I am using is Futura Handwritten.

For this I have created a title screen, Dave's credit and my own credit. You can do this by simply selecting the Horizontal Type Tool (T), selecting your font of choice and typing what you need on each layer. Align the text in the middle of the screen by pressing Control-T to Transform and aligning the cross hairs of the text with the cross hairs of the 4K title safe. 

Final Step

Our final step is to check all the layers are named and there are no layers that shouldn't be there, e.g. roughs, empty layers, colour palettes.

Save the .PSD to a folder such as "Dave Animation Assets". In this folder place everything your animator will need, such as the storyboard, the script, a voiceover (if you are providing it) and any fonts (which you can distribute and have rights to). If not, rasterize any text layers. Next deliver that folder to your animator via FTP, USB drive or network, and then hide! 

Conclusion

I hope you enjoyed learning how to create animation assets in Adobe Photoshop. Once you have the organisation side of this nailed, you can let your creativity go wild! I can't wait to see what Dave Bode creates with my elements!

Text effects are a very popular and exciting sub-genre of digital art. In Nature-Inspired Text Effects in Adobe Photoshop, you will learn how to draw inspiration from natural elements to create three distinctively different text effects. 

What You'll Learn

The goal of the course is not only to learn how to achieve text effects with grass, ice and fire, but also to get familiar with the workflow of analyzing a real life effect and then duplicating it in Adobe Photoshop.

Tuts+ instructor Kirk Nelson will take you through the full process for creating each text effect, beginning with some reference photos and then building up the effects step by step.

Here's a free preview of some of the lessons from this course:

Grassy Letterforms

By this stage in the course, you've already looked at some photos of grass, created a background, and started building the effect. In this lesson you'll create the bulk of the grassy text effect. You'll adjust a line of text to have a believable appearance, fill it with the grass pattern, and treat the edges with a special grass brush.

Creating Icy Textures

Once again you will start by creating a background effect to house your textured text. This lesson covers the difference between creating realism and idealism, and also incorporates textures from surprising sources.

Flaming Text Effects

This is the final lesson in the "Fire" section. To cap off your inferno text, you will add some sparks with a custom brush, as well as some creative lighting effects.

Start Learning for Just $15

You can take our new course straight away by subscribing to Tuts+. For just $15 a month, you get access to this course and hundreds of others, with new ones added every week.

If you want the flexibility to learn new skills wherever you are, then take a look at our Tuts+ Courses Android app.

The free app lets you log in to your Tuts+ account and access all your favourite creative and technical video courses on the move.

Our development team created it as part of a recent hack week here at Tuts+, and it's already reached more than 500 downloads and received lots of positive feedback.

We already have a mobile-friendly website, of course, where you can access both our free tutorials and, if you're a subscriber, our in-depth video courses. But the app gives you an easier way of managing your courses, letting you:

• log in to your current Tuts+ account
• access all your Tuts+ courses
• browse through all 450+ courses and bookmark your favourites 
• access your recently watched courses
• view your video courses from the app on the go

To find out more about the app and how it makes your learning easier, and to read reviews from other users, head over to the Google Play page.

Today we're going over the great mystery of painting with texture brushes in Adobe Photoshop. How do they work? And is there truly a difference between texture brushes and standard ones?

Standard vs. Texture: The Difference

The difference is pretty obvious. While standard brushes have that smoother quality about them, texture brushes have the grit and feel of the real world environment. In fact, digital art is often quite easy to pick out from traditional styles because of this difference.

Have you ever seen a photo that's been "too Photoshopped"? Well, the reason we've all become familiar with this technique is because everything in the world has texture. So naturally when you compare the real life texture of skin to the retouched faces adorning your favorite magazine covers, your eye picks up the trick. 

But don't feel misled. My point is just that both types of brushes have their place in your digital painting arsenal. Experiment often to see which works best for different scenarios.

Will Texture Brushes Save Your Art?

So your favorite artist just posted a complete set of all the brushes they use. Now that you have them downloaded and installed, your art will magically transform into the style it was always meant to be. Right?

Trust me―I wish, otherwise I would've personally downloaded every brush pack ever made.

But sadly, the only things that will transform your technique are patience, time, and of course, lots of practice. I suggest you get familiar with standard round brushes as well as digital painting techniques in general before moving on to textures.

Texture Brushes: What Are They Good For?

There's no doubt about it, the standard round brush is your one true love. You'll need it for most details. But the great thing about texture brushes is their ability to add instant realism with the application of some grit. Check out these different ways you can utilize them for your future paintings.

Simulating Realistic Textures

As I mentioned previously, everything in the real world has texture. In fact, if you've ever had problems achieving realism, it's probably because your painting looks too smooth. Remember that reference to airbrushing from before? Well, drop your normal boring brush and pick a grunge one. Make any painting come alive by applying the appropriate texture to your piece.

Painting Different Materials

The great thing about painting in Photoshop is always the convenience. If you want to paint a fuzzy sweater, pick a fuzzy brush! From skin and clothing to grunge and other natural details, utilizing these brushes is the easiest way to achieve the texture you need.

Making Digital Art Look Traditional

What if you want the look of a beautiful oil painting without all the mess? Well, experiment with different texture brushes to simulate your favorite traditional art styles, from oil to acrylic and watercolor paintings. Even create your own unique pencil sketches without wearing out a single lead tip. Search the web for brush packs and you'll notice that many use actual paint splatters to achieve that traditional art effect.

My Favorite Types of Texture Brushes

I love these brushes. Here are some of my personal favorites and why. 

Grunge Brushes

A grunge brush looks like dirt. I mean that as a compliment. These are my go-to brushes for any time I want to add realism to a piece. The potential of these brushes is truly limitless, but make sure to always adjust the Opacity accordingly for the best result. 

Skin Brushes

Skin brushes are clusters of fine, grainy textures to simulate the look of pores. They instantly transform a regular portrait from digitally smooth to photo-realistic. These brushes also have the versatility of grunge brushes in that you can use them to apply grainy textures to your work. 

Cloudy Brushes

There is nothing more beautiful than nature. Cloudy brushes have the ability to capture the effortless movement of hair, clouds, and other flowy details. 

Adjust Texture Brushes in Two Easy Steps!

Not sure which brush to choose? When in doubt, make your own! 

Step 1

Hit F5 on your keyboard to bring up the Brush panel. Making sure that your Brush Tool (B) is selected, select any brush from the panel of presets.

Step 2

Check the box next to Scatter. Adjust the Scatter to 120% for a more dispersed texture.You can play with additional features like Texture or Shape Dynamics until you're satisfied with your new brush effect. But for this example, I'll just stop at these simple changes.

By simply adjusting a few quick settings, you've just made your own custom brush! 

Conclusion

The science of digital painting is understanding how to apply the tools you have to your exact painting needs. Today you've learned that painting with texture brushes is one great way to add realism to any piece or even to try out a new style. Do you already have a favorite? Let me know in the comments! I hope you have a lot of fun experimenting with these brushes, and wish you lots of luck! 

Check Out These Articles for More Tips!

• Digital Painting 101: Get to Know the Brush Panel
• Quick Tip: How to Blend with the Brush Tool for Digital Paintings