Sweet Farewell Presentation Illustration Tutorial

First of all, my artwork couldn't be possible without my mother's passion for visual art. She has been playing a key role in my artistic life. I have to thank her for setting me on this beautiful path that I'm walking on right now.

Secondly, Farewell was born thinking about the motif of nature's attachment to human feelings and actions. Nature's energy and our energy are well connected and I believe we are living in this world for a purpose. The theme reflects a girl who is leaving her dark past behind and heads off for a new future, a new adventure. For this, I used two powerful symbols: the train and the tree. Trains are commonly associated with departure, a new beginning, leaving the past behind. The girl is reaching for the gray tree to say good bye and the tree leans over, begging her to stay but it's too late. She paints some of the leaves of the tree in green, showing the fact that she is heading for a new, fresh future, a brand new start.

For my illustration I mainly used Adobe Illustrator CS5 with a little help from Adobe Photoshop CS5. I am going to start the tutorial by showing you my workspace in Photoshop and Illustrator, so that you can make an impression of the settings and the tools I used. Moreover, you can click on any image for a larger preview. You can have a look at the pictures below.

Final Result:

The first step was to look for reference photos. One of my favorite places where you can find good reference photos is Flickr. Type in the search box "old train" and look for different perspectives on trains. After almost one hour of browsing, I came up with these two photos. I would also like to thank the people for uploading such great photos with trains. Take a look at the pictures below.

Open Photoshop and pressed CTRL + N to create a new document. A pop-up panel opens. Under the Name box type "My train design", pass the Preset category and type 2780 in the Width box and 2480 in the Height box. On the right side you have two drop-down boxes where you can find the measurement units. Make sure you have PIXELS. Moving down, you can see the Resolution box. Type in 72 if the program doesn't automatically changes the number for you. Next to the Resolution box you have another drop-down box, make sure you have PIXELS/INCH selected. Moving down, you can see the Color Mode box; just choose RGB Color from the drop-down box. On the right side you should have 8 bit selected. The Background Contents box should have White selected from the drop-down box. Press OK and the white canvas appear. Don't forget to SAVE (CTRL + S). For more details, check out the picture below.

Next, drag and drop both photos in Photoshop, on the canvas area. Put them side by side. Select both of them in the Layers panel by holding down CTRL. Right Click on one of them and choose Merge Layers from the drop-down menu. Now you should have a single layer containing both photos. Double Click on the name of the layer and rename it "Train Reference". You should now have only two layers: the Background layer and the "Train Reference" layer. Don't forget to SAVE (CTRL + S). You can have a look at the pictures below.

Then, cut different parts from the photos using Pen Tool (P) to make a collage. You may like the upper part from one train and the lower part from the other train. Choose the Pen Tool (P) and start adding anchor points until you outline the desired shape to extract. You can spend a lot of hours to get a perfect shape, but I suggest cutting only to get the feeling of that shape as reference. Right Click and choose Make Section from the drop-down menu. The Make Selection pop-up panel appears and hit OK. The "moving ants" appear outlining your shape. Now press CTRL + J to extract your desired shape on a new layer. Drag the shape lower on the page to create your new design. Do the same operation for all the parts you want to incorporate into your train design. What I did was to take the upper part of the train in the left photo, the lower part of the train in the right photo and added a little paint over. Don't forget to SAVE (CTRL + S).

When you're satisfied with the final result, go to File - Save As (SHIFT + CTRL + S). A pop-up panel appears. The File name is automatically generated and leave it alone (should be "My train design"), but under the Format drop-down box choose JPEG (*.JPG, *.JPEG, *.JPE) and press the Save button. The JPEG file named "My train design" will be used as reference in Illustrator. I'm sure you will have a lot of fun designing a new train from existing ones, as much as I did. The process and the final result can be seen below.

Now it's time to open Adobe Illustrator. Press CTRL + N to create a new canvas. A pop-up panel appears. Type in the box next to Name: "Farewell". Next to New Document Profile, choose Print from the drop-down box. Number of Artboards should be 1 and next to Size you have another drop-down box. Here you choose A4. Under, you can see four options: Width, Height, Units and Orientation. Next to Orientation you can see two little icons. The one on the left is Portrait and the one on the right is Landscape. Choose Landscape. Moving down, you can see the Advanced options. Next to Color Mode you should have CMYK, next to Raster Effects you should have High (300 ppi) and Preview Mode should be Default. Pay attention! At the bottom of the panel you have a little square and next to it you should see: Align New Objects to Pixel Grid. Make sure the box is NOT checked. This option messes up your alignment options so keep it clear. Then press OK. The white art board appears.

Some may be asking, why are you working in CMYK color mode? The difference between RGB and CMYK color mode is that we use RGB only for materials that we see on our monitor or for materials we publish on the web and we use CMYK only for materials that need to be printed. I always choose CMYK color mode when I work with vectors even if I don't intend to print my artwork; the reason for doing so is simple. Maybe someday you'll eventually want to print you illustration for an exhibition or send it to be published in a magazine so you won't have to worry about converting your vectors from RGB to CMYK. Your AI file will be ready for print at any time. I know people working with vectors in RGB mode and I'm totally against that. Take a look at the picture below.

Next, double click on Layer 1 under the LAYERS panel. A pop-up panel appears. Next to the Name, type in "Train Reference" and hit OK. See pictures below.

For some details and effects, I used Illustrator's Pencil Tool (N). To use this tool easier, let's enabled the Graphic Styles floating panel (under Window - Graphic Styles or shortcut: SHIFT + F5) and create a graphic style for the outline of the pencil to spot it immediately on the art board. You can notice that you already have some default graphic styles. To create a new one, we need to have no color for the Fill, black color for the Stroke and 0.25 pt for Stroke Weight. These options are illustrated in the image below.

In the GRAPHIC STYLES floating panel you will see an icon that represents a new page, next to the bin icon. Press that and notice that you have a new graphic style now. Double click on the white icon you've just created inside the floating panel and rename it "Outline". Check out the pictures below.

Find your JPEG file named "My train design". Make sure you have the "Train Reference" layer selected in Illustrator and drag and drop the JPEG file on the white art board. Press the arrow next to the "Train Reference" layer so you can see the image sub-layer. Now press Embed from the upper menu where it says Linked File. This option places your image in the AI (Illustrator) file forever so you don't have to worry next time you open the file to work on. Let's lock the "Train Reference" layer so we can start outlining the train. To do that, press the empty square next to the "eye" icon on the layer and you'll notice that a padlock icon appears. Now the layer is locked so we don't accidentally draw over the original embedded image. What we want to do now is to create a new layer above for the outline. Press the "new page" icon from the bottom of the LAYERS panel. Rename this new layer "Train Outline". All the process is illustrated below.

My advice to you at this stage would be to visualize you workflow. What I mean by that, you should start with one end and finish with the other. For me, the best method to work with vectors (and we will create countless sub-layers) is to stay very organized and build up my work. Don't mess around and outline the chimney and then go down to outline the wheels. Visually divide your train in two parts: the upper part and the lower part. I would like to start with the front of the train in the upper part. Use the Ellipse Tool (L) to outline over the shapes in the reference picture. This is the down part of playing with vectors. It takes a lot of time to lay down lines over lines, shapes over shapes and it's not fun at all. This is the "technical" part to say so. Depending on how many details you are willing to put into your artwork, you will spend more and more time laying down vector lines. I'm not a fan of this stage, but keeping in mind that in the end I will have a solid and expressive piece of art, it's worth it! Take your time, be patient, play your favorite music and everything will flow smoothly.

You notice that we still have no Fill and no Stroke. Create the oval shape and just press the icon you have created earlier in the GRAPHIC STYLES floating panel. Your oval shape will inherit the qualities of your graphic style: no fill and a black 0.25 pt stroke. This neat shortcut will save you up precious time in the process of outlining. But, wait.... I can't see my outline because the background image is also dark. No problem. Press the padlock icon again on the "Train Reference" layer to unlock it, click on the image showing the trains and go to the Transparency tab (Window - Transparency or SHIFT + CTRL + F10). Type in next to Opacity - 60 for 60% opacity. Hit Enter to apply. Now you are able to see very clear both the outline and the reference picture below. Lock the "Train Reference" layer again and select the "Train Outline" layer to work on. Don't forget to SAVE (CTRL + S). Take a look at the pictures below before moving on.

After you're finished with the ellipses, take the Pen Tool (P) and start placing anchor points to form shapes. I strongly recommend you to work only with CLOSED shapes. Don't draw a line and just leave it there. Try to think everything in closed shapes. This way, if you want to color one shape later on and you realize that it's not closed and you just have lines floating around, it will be horrible to hide all the sub-layers just to find your lines and weld them. WORK ONLY WITH CLOSED SHAPES. See picture below.

At this stage it's up to you how far you are willing to go. Be creative and don't copy every piece that's on the train. Tweak and twist your shapes as you please. Give the viewer only the overall shape of the train and leave the rest to everyone's imagination. Don't tell too much, leave the people ask questions. Hmm... I wonder what's that thing on top of the train? Looks like a tank, but maybe it's a secret place where something is hidden. Create a story in your illustrations. Otherwise they become dull and even you will get bored with your own work. This is how my upper part looks like after the outline process.

Don't stress yourself with the color palette yet. What colors should I use? Leave that alone for now because they will come to you after you finish with the outline. If you rush things and start to color the upper part, you won't be able to see very well the outline of the lower part and you won't be able to connect the two parts. Focus only on your outline and take a 5 minutes brake every half an hour. Get up from the chair and walk around a little bit. That way you prevent boredom and back pain. Talk to your neighbor or to your friend and disconnect. When you get back you can realize that you have again the desire to move on.

For the lower part, remember that we have to put the FAREWELL text on the front of the train. Just approximate how big that should be and make the outline of the box where the text should be placed. Don't start to make the text because we're not interested in that for now. We just want to finish the rough outline. Make sure you connect somehow the upper part and the lower part so that they look like a whole, welded piece. Don't forget to SAVE (CTRL + S). Below you can see my progress with the lower part.

I am thinking about adding some bolts... I'm not sure. I outline one and duplicate another few. The effect is great so I want to incorporate them in my design. After you finish with the outline of the big and important parts, start to play a little and add any details you think will add a flavor to your design. Don't think for a moment that what you draw is childish or it shouldn't be there. Leave windows, rails and other parts you like. It's your artwork not everyone else's. Don't be afraid to express yourself! Don't forget to SAVE (CTRL + S). My version can be seen below.

Hurray! We are done with the outline. Now it's time to develop the color palette. Before we do that, let's copy the outline on a new layer. Create a new layer over the "Train Outline" layer and name it "Train Color". Select the "Train Outline" layer, press CTRL + A to select everything on the layer. Click on the art board to deselect the vectors. Select the "Train Color" Layer and hit CTRL + F to paste everything in the same spot. Lock the "Train Outline" layer with the padlock and hide it by pressing the "eye" icon next to it. Select the "Train Color" layer again. Check out the pictures below.

Since the very beginning I had the big picture on my mind and now I'm thinking about the girl's feelings. I know that I want my girl sitting on the train with her body expressing freedom. To focus the viewer's eyes on the girl I want her dress to be red, in contrast with her green hair. Remember that I see all these little details already painted on my picture. The plan is very clear on my mind. Now I just have to bring it to life.

I decided to paint my train and other elements surrounding the girl in a brownish palette. These are the colors of the train on the left picture. The reason for choosing this color palette is that my girl's past was very "muddy", a past full of pain and sorrow and I want to reflect that. I want her to leave this past behind and run towards a better and brighter future. So, let's start to ink in all the vector shapes using plain and gradient fill.

Now I want to sketch a little tutorial on the gradient fill option for you. I was very frustrated with the gradient when I first started to use Illustrator because I found it almost impossible to work with. Later on, I have finally managed to crack down the way it operates and now I find it very useful; I hope you'll find it too. Here is the way I use the option. Choose Eyedropper Tool (I). Move the little icon around and click to pick a color. You will see that the color appears in the Fill box. Enable the Swatches panel from Window - Swatches. Drag your color from the Fill box and drop it on the Swatches panel. Next, enable the Gradient panel from Window - Gradient or CTRL + F9. Drag and drop your color from the Swatches panel on the big stripe showing the gradient. This process works great for me because it enables me to save different colors I like in the Swatches panel and just drop them in the Gradient stripe whenever I want to use them. Take a look at the pictures below for a better understanding.

I worked around the brownish palette playing with different colors and inked in every closed shape. My train now looks very credible. Now I have another reason to move on with the artwork. Don't forget to SAVE (CTRL + S). My version can be seen below.

It's time to add the FAREWELL text. Select the Type Tool (T) and type in FAREWELL using Verdana. Move it against the white plate and add perspective. To do that, go to Effect - Distort & Transform. Select Free Distort from the drop-down menu. Drag the four black points in order to obtain the effect. Experiment until you're satisfied with the result. Then go to Object - Expand Appearance to convert the text into vector paths. Check out the pictures below.

From now on, we want to take control of the painting. I am going to hide the "Train Reference" layer and move the train towards the center of the art board. The creativity side takes on now. The hard part is over. I have the train in color and the FAREWELL text in place. I love it! Don't forget to SAVE (CTRL + S). Below you can see where we are.

For the girl, let's go to www.istockphoto.com and search the code: 7116588. I chose this picture as reference for the girl's body posture. It was exactly what I was looking for. Save the picture in your computer. Open Photoshop and go to File - Open. Search your photo and hit Open. Create a new layer on top of the Background layer that contains the photo. With the Brush Tool (B) start by outlining the shape of her body in any color you like and can be seen (dark purple worked for me). I want her left hand to reach for a tree so I draw the hand in that position. If you don't have enough space to draw the hand on your canvas, select the Crop Tool (C). Select your current canvas and move the little square in the middle of the line on the right side more to the right. You can extend canvas as much as you like. Now double click on the portion between the line on the right and your current canvas. You can see you have more space now. Create a new layer between the Background layer and the layer with your outline and use the Paint Bucket Tool (G) to fill it with white. We have the reference picture for the girl. Press SHIFT + CTRL + S and save it as "Girl Reference" in JPEG format. Check the pictures below.

Go back to Illustrator and lock the "Train Color" layer. Create a new layer over and rename it "Girl Reference". Drag and drop the Girl Reference.jpg on the art board. Create another layer and rename it "Girl Outline". Lock the "Girl Reference" layer. Make sure you have the "Girl Outline" layer selected and use the Pen Tool (P) to outline the girl in vector. Again, I strongly recommend you to work only with closed shapes. Hide the "Girl Reference" layer so we can see only the vector outline. Create another layer on top and rename it "Girl Color". Select the "Girl Outline" layer and press CTRL + A. Then hit CTRL + C to copy. Hide the "Girl Outline" layer. Select the "Girl Color" layer and press CTRL + F. We copied the vector outline to color it. Don't forget to SAVE (CTRL + S). You can see my version below.

Move the girl in the right place on the train and draw a rail with the Pen Tool (P) to make her hang on to something. It's time to add details. We're still on the "Girl Color" layer so we start by adding details to the girl. Choose the Pencil Tool (N) and draw closed vector shapes that act as details. The Pencil Tool (N) enables you to work freely and you don't need to have that perfect shape for every detail. You can play with a light source if you want and add shadows. Your imagination is the only limit at this stage. You can add as many details as you can to give flavor to your artwork. My version can be seen below.

Next, lock the "Girl Color" layer and unlock the "Train Color" layer. Using the same method as for the girl, add as many details as you please. I wanted to have the rust effect on the upper part of the train and the shiny effect on the headlights. Don't forget to SAVE (CTRL + S). The result can be seen below.

Still on the "Train Color" layer, let's draw some smoke with the Pencil Tool (N). Make closed shapes and color them. Something isn't right. My train looks like floating. I don't want that so I am going to use the Brush Tool (B) to suggest a road. Don't think about drawing a perfect road, we don't want that. Next to the SWATCHES panel, you can see the BRUSHES panel or go to Window - Brushes or F5. Choose a chalk brush or something similar and use 7 or 8 pt for the stroke. Draw a line to form some kind of a road. Select the path and go to Object - Expand Appearance. Your brush path is now an object. Press SHIFT + CRTL + [ to send the "road" under the train. Now create a new layer over the "Train Color" layer and rename it "Effect". Lock the "Train Color" layer. Select the "Effect" layer and use the Pencil Tool (N) to create closed vector shapes. Create a wind effect and draw two or three trees on the right side of the train. One of them should be bigger than the others and should lean over the girl. Add some leaves and paint them green. Ink the road and the trees with the same color. You can see my version below.

Lock the "Effect" layer. Then, make a new layer between the "Train Outline" layer and the "Train Reference" layer. Rename it "My Background". Draw a rectangle using the Rectangle Tool (M) and determine the final size of your artwork. Choose a color for your background. Search over the internet "free grunge eps". You will find countless designs. Download two or three files that you think will work with your design and use different elements from every one. It's now up to you to create a cool background. Don't go too crazy with the design and stick to the overall atmosphere. Don't make a mess and give reasons for every element you add. Sign the artwork using the Brush Tool (B) or add a personal logo if you have one. The painting is now finished. Your artwork mustn't look like mine. I just provided you with some guidelines so try and make it personal. If you don't like any particular element in my work, do it your way. I think you'll be able to find your own style after several tutorials like this one and come up with different scenarios. You can take a look at my artwork below.

All that being said, I would like to thank you for following my tutorial. I hope you really learned some new things during the process. It is hard at first but if you have that burning ambition to develop your artistic skills, you should do a lot of tutorials such as this one. I would also like to thank again the team at SloDive for all their support and commitment. My mission from now on is to continue to learn new techniques and push my imagination forward.