Suling's Art & Design Blog

Painting Tutorial: "Triumph" for St. Anthony Messenger

5/5/2015

I recently illustrated a story called "Triumph", written by Ann Turner, art directed by Jeanne Kortekamp, that appeared in the April issue of St. Anthony Messenger. The story is about a young woman struggling to come to terms with a pregnancy without the support of a partner while caring for an elderly woman.

My goal was to focus on the inner strength and determination of the main character. The conflict in the story was very internal with not a lot external action. I decided to get across the tone of the story by framing and backlighting the main character by the window so that she is a strong silhouette surrounded by light. I thought including the curtains would help to add some movement to the illustration that mirrored the internal action.

Sketch!

Final line sketch

I usually start by looking for photo reference that has some of the spirit that I hope to achieve in the final illustration. I do a lot of image searching on the internet and also take my own photos. I brainstorm about composition, do thumbnails and come up with a line sketch. To create the line sketch, I do a lot of pencil sketching and tracing with tracing paper. I then scan the sketches into the computer and do further composition with in Photoshop. This is usually the hardest stage for me.

Color Rough

Rough color

After the sketch, I do a color rough in Photoshop. This is where I get the overall look of the illustration worked out. I spend a lot of time on this step and don't go to final until I am happy with it. If I'm happy with the color rough, creating the final art is usually easy.

A couple things I do at this stage:

Be loose and messy
Use a large Airbrush tool to cover large areas fast
Select large areas with the Lasso tool and apply transparent washes of color
Use Hue Saturation, Levels, Color Balance to the entire image or parts of the image to quickly try out different looks.

All these things help to achieve unique colors in the final illustration that wouldn't normally happen if you are working slowly and methodically. Sometimes unusual colors appear in areas of the illustration that I'd never think to put there, but they look good, create some interest and make the palette richer.

Going to Final

Original line sketch pasted on top of color rough

When I'm happy with the color rough I usually paste the original line sketch on top of the color rough and apply "Multiply" to the line sketch layer because the lines of the drawing are usually lost or covered up now. I then start painting directly on top in Photoshop. This way it is more likely that "happy accidents" that occurred in the color rough phase will make it into the final illustration.

PHOTOSHOP TIP: Use your color rough as your artist palette. I only use the Photoshop color picker for finetuning color at this stage. The colors are already worked out in the color rough. You don't have to think about color too much now because the colors are already in place. All you need to do is click where you want to paint with the Eyedropper tool and you will get the right color (or close to it).

I used to not paint directly on top of my color rough and start from a pristine version of my line sketch instead. If you do it this way, you can use your color rough as your artist palette by keeping it open as a separate file and clicking on it with the Eyedropper tool just as you would go to your paint palette if painting with real paint.

PHOTOSHOP TIP: Get out of the habit of using the tool buttons to select your tools. You can quickly toggle to the Eyedropper tool holding the Option key or setting your Wacom pen button to be the "Option" key. After getting used to the shortcut for the Eyedropper tool it is so fast and seamless to change brush colors. I only use the color picker when the color I picked up is not quite right. I then use the color picker to fine tune the color from the color that was selected from the color rough.

Though creating the final art takes the most time, it is the easiest - as long as I am happy with the sketch and color rough. At this stage, I can relax and just enjoy painting as most of the planning is already taken care of.

Layers

I used to separate different objects of my illustration into separate layers in Photoshop so that I could later modify the contrast or colors of an object more easily later. I still do this sometimes depending on the illustration. These days I tend to paint all in one layer just like a regular real life painting.

The lines of the hands were done on separate layer

But something I do use layers for is when I am more in the final stages of the illustration and I want to try something on top of what I already have without messing up what I already have. This is useful especially for drawing lines on top of the illustration. I am jealous of people who can draw lines confidently and not mess up. That isn't me. I am much more confident mushing colors around with a brush. So doing critical lines on a separate layer allows me to go back and make it right if I have to.

Head Detail: The shape of her mouth and eyes had lost some of the determination and hopefulness that I had intended to convey in her expression, so towards the end I pasted the lines of her face on top and worked it back into the final art.

Usually as I'm painting, the original lines get messed up or totally covered up by all the "paint". Sometimes it's an improvement to the original sketch and sometimes the quality of the original sketch was better. If it helps, I re-paste the original line sketch on top, apply "Multiply" to that layer again and rework it into the final.

0 Comments

New Work for the UVA Alumni Association and Textured Brushes

3/26/2015

1 Comment

Here's a new illustration I did for he UVA Alumni magazine. It was a good project for me because I got to illustrate a subject and theme that I don't have much experience with and in the process play around with different Photoshop texture brushes.

Ali Burke is the art director. The article was about how UVA was essentially spared by the Union army when they marched into Charlottesville 150 years ago. Ali's idea was to show the iconic parts of the UVA campus and show the army passing it by. Later we added in the idea of the smoke and mud and tried to represent the university as a beacon that repelled the menacing elements of the marching army.

I've never illustrated soldiers before so it was a new challenge for me. Historical accounts about this time, talk about it being very rainy and muddy. The weather was an important factor in the military outcomes. Nearby buildings were set on fire. I tried to get across these elements by using more texture than I normally do in my illustrations.

There are many ways to adjust the brush settings, but this is how I did it. I started with one of the standard texture bushes. The key to getting the highly textured look I was going for was increasing the "Spacing" in the "Brush Tip Shape" window in the "Brushes" palette. It was a really fun and so easy to blend with these new brushes. I will probably use them all the time now.

I went back and forth on how to paint the soldiers when creating the final art. The original idea was that they were dark anonymous silhouettes. But I needed to find a balance between showing enough detail to make them look threatening and show that they are the Union army but not so detailed that the illustration become too busy. I ended up making the mass of them very monochromatic while thickening and simplifying the lines. It took me awhile, but the soldiers ended up being my favorite part of the illustration. Here are some details below.

Detail of soldiers in the "smoke" and "mud"

PHOTOSHOP TIP: Creating erasers with similar texture comes in really handy also when trying to soften edges and achieve a more hand-drawn feel. Along with using textural brushes, I used textural erasers extensively in illustrating the smoke and mud.

1 Comment

How to Fake a Family Photo with Photoshop

12/14/2014

0 Comments

Arrgh! Christmas photo foiled by a 6 year old!

This is a yearly event with us. I try to get a family photo in front of a Christmas tree to put in our album. It turns out it is close to impossible to get everyone looking good in one photo - especially when certain people in the family love to make silly faces.

Here is a tutorial on some of the basic techniques and tools that are useful to do basic photo manipulation in Photoshop. These techniques also come in handy for those big group photos where you can never get one perfect shot. We took the photo above at the Dickens Fair in San Francisco.

Luckily, earlier the same day we took this other shot. Usually it is a lot easier to combine photos if they were taken at the same moment in time, but since all these photos were taken indoors with flash, it can work.

Step 1: Select, Copy & Paste

Photoshop in a Nutshell

Before starting, here is a really basic way of thinking about Photoshop for people who feel daunted by it. There are so many options and capabilities that it can be very confusing.

To make it less daunting, I think of it like this:

Working in Photoshop boils down to Selecting a part of an image and then Doing something to it.
Most tools and options can be categorized as either a Selection tool or a Doing tool.
Understanding which Selection tool to use in which circumstance is the key to getting the hang of Photoshop.

For this tutorial we use just a couple of the basic tools but after you work with it for awhile you will probably find that these tools are not necessarily right for your job and others will help you do the job better depending on the photo.

I need to replace the goofy head with this slightly more presentable one. So I select this presentable head and paste it into the other photo. Since the head is an irregular shape the easiest tool to use is the Lasso tool. I roughly select the head with the Lasso tool without worrying much about getting it right.

Copy and Paste the head into the target photo. The head will get pasted into a separate layer on top of the original image so the original image won't be affected for now.

Step 2: Color and Contrast Adjustment

Now make sure the new head matches the old head. In this case the new head is a little brighter and a touch more blue than the target image.

To adjust brightness and contrast, you can use Brightness/Contrast or Levels under the Image: Adjustments Menu. I prefer Levels because there are more options to get it just right. For this step we don't need to select the head because it is on it's own layer and we want to adjust the brightness of the whole head. So there is no need to select a part of the head unless there is just one part of the head that you want to make darker. The only thing you need to do is make sure the layer the head is on is selected.

Play around with the Levels settings until you get the hang of them. Don't go over board. The arrows under the graph affect the Contrast while the 2 arrows on the bar under the graph affect the brightness. For this image I need to make the head darker overall. So I drag the white arrow down a little. When you move the white arrow, you are telling Photoshop that level of gray should be the brightest level in the selected art - not the whole file - just the part of the image that you are modifying at the moment. In this case, we are only modifying the new head. So any parts of the selection that are brighter than that setting get darkened to that level.

Now Select Color Balance in the Image: Adjustments Menu. Since the original image head looks slightly more red, I adjust the red / cyan slider until it looks right and click ok.

Step 2: Get Rid of All the extra stuff

It's easier to use the Magic Wand to select and delete large areas of color rather than using the Lasso or Eraser to to painstakingly trace around the edges

This step will be different depending on your photo, but here, since there are a few blocks of relatively solid color around the head, I use the Magic Wand to select each color area and delete it. Set the tolerance pretty high like around 40 so it will pick up all the gradations of that color block. Here I have the green selected. If you didn't get all of a color, you can try pushing down on the shift key while you click on the areas that were missed the first time around. The Lasso tool should have a plus sign next to it. This will add to the existing selection.

Selecting the red with the Magic Wand picked up some of the red in his face.

There are certain times when you will end up selecting part of the image that you don't want to delete. See how in the image above, some of his mouth and other points on his face were selected when I selected the red in the background? So you need to deselect those areas while keeping the other areas selected. In this case, the easiest thing to do is use the Lasso tool and hold the Option or Alt key down while you draw around the areas that you don't want to select. The Lasso tool should have a minus sign next to it. After drawing around those areas, they should deselect.

TIP: You can use the Shift Key to add to a selection and the Option or Alt key to subtract from an selection with other selection tools as well. It doesn't work only with Lasso tool.

When you are happy with the area that you have selected, push the delete button. Repeat this until you have gotten rid all the large solid areas of color.

Now use the eraser tool to clean up all the stuff that did not get deleted in the first pass. After choosing the eraser tool, select the appropriate brush shape and size for the job and erase. In this case a medium paintbrush shape is best. Carefully erase around the edge of the head until it is a clean head ready for incorporating into the target image.

Step 4: Scale and Position

Free Transform

Scaled to size

Now duplicate the layer that the head in on, because we are going to scale it down and we want to keep the original head that we did all this work on before messing with it. Once you make it smaller you can't change your mind and make it bigger again without losing quality. So duplicate it, then select Edit: Free Transform to scale the head down to the right size. Since we are applying the scale to the entire layer we don't need to select anything in the image, we just select the layer.

These settings are on the Layers window. They can make cool effects. You should explore what they all do. Multiply is one of the more useful ones.

Sometimes it helps to change the layer setting to Multiply so you can see through it. Use the move tool to move the head into position. It can help to overlay the new head onto the old to to make sure the head is really the right size or in the right position. Compare the distance between the facial features. When you are happy with the size and position. Set the layer setting back to Normal.

Step 5: Cleanup

Now we need to clean it up. This usually involves the Eraser tool and the Clone tool. The shape and size of the tool you specify will depend on your photo. In this case we need to work on the neck and make sure that it looks natural when merged with the original photo.

See his neck merges seamlessly with the arm now?

I use the Eraser tool and select a large airbrush shape this time and erase where the neck overlaps with the arm. The edge will be soft so that you can't tell where the new neck and original neck come together.

On the left side of the new head you can see some darkness peaking through from the hair in the original photo. It's not that noticeable, but let's get rid of it anyway. The Christmas tree in the background is the perfect thing to use the Clone tool on. It would be really hard for someone to notice it is doctored up. We need to select the layer that the original photo is on. Clone the Christmas tree and cover up the dark hair peaking through until it looks right.

Here we don't want a soft airbrush tool because the soft translucency will give away that it has been messed with. Here it is best to use a hard paintbrush shape and apply the clone tool sparingly only where you need to cover up. Make sure to keep your original photo so you can always go back to it if you need to.

All clean!

Our family portrait is complete! My little guy grimaced when he saw this and realized he had been thwarted by his mom. Happy Holidays!

0 Comments

Let me know what you think!

12/13/2014

0 Comments

I'd be happy for feedback about my new web design. Let me know if it is confusing. I am still working out some bugs so if it stops working as you'd expect usually reloading the website will start it working again.

Any technical advice would be appreciated, since I am a beginner at it. I think all the bugs have to do with the timing of loading images and thumbnails.

0 Comments

My New Website & First Try at Javascript

12/2/2014

0 Comments

As of December 2014 my portfolio site is brand new! (Still working on a mobile version so it is best viewed on a desktop computer for now.)

I am actually really good at deadlines. But when there is no deadline - that can be a challenge. My old Flash website was in urgent need of updating for a LONG time. I finally mustered up the energy to redo it and decided to make it my first try at Javascript programming. I think the best way to learn something is to set yourself a goal, then jump in, muddle through and figure it out.

This website redesign took an embarrassingly long time (I don't even want to say how long this has been on my to-do list), but now that it’s mostly done I can do some basic javascript and jquery programming (with the help of advice, demos and tutorials online at sites like Stackoverflow). Before this, I didn’t have a very good handle on HTML. I used to be able to get by in the past by just copying and pasting code without having to type it myself. This time I forced myself to type code and am so much better at it now.

The Process of Redesign

I made Photoshop mockups of what I wanted the new site to look like and thought about how I wanted the navigation to work. I looked at my old website and decided I actually still liked the general interface. I still liked the scrolling thumbnails. And I still needed the secondary thumbnail navigation because a lot of my portfolio is comprised of collections of related artwork that need a separate thumbnail interface. But everything felt too small. I decided that I like the look of using a full screen image as my portfolio and wanted to incorporate that.

I found a useful tutorial on Codrops and used this code as a starting off point. I found a thumbnail scrolling plug-in at Malihu Web Design that functioned the way I wanted it too. Then I had to figure out how to pull it all together. This took me a reeeaaaallllly long time. Having worked with authoring software like Flash and Director in the past, I am familiar with Actionscript and Lingo programming, but it was slow-going.

What I needed to figure out

Getting a grasp on accessing and manipulating HTML elements on the page with javascript and jquery.
Calculating how to place each portfolio image of differing sizes depending on mouse location, then make it scrollable with mouse movement.
Getting the forward and back button to navigate the 2 different thumbnail scrollers.
Getting the layout to look the way I want with css3

Lightbox function

After I finally got the navigation working, I wanted to incorporate a lightbox functionality. I took a look at lots of lightbox plug-ins but by this time I felt confident enough that I could program my own lightbox functionality from scratch and this turned out to be relatively painless! I am pretty happy with how it works overall. There are bound to be bugs, but I decided I just had to make it live or it might never happen.

Some tips for do-it-yourself beginners

If you are a designer like me interested in learning how to program in Javascript. These are some things to keep in mind that might help.

Decide what you want your website to do and then figure out how to do it.
Don't try to learn everything about Javascript at once. Set yourself a concrete goal. In the process of figuring it out you will learn a lot more than reading books about how to program in Javascript.
Force yourself to type all the code. It's tempting to just cut and paste and tell yourself you know it, but forcing yourself to type it all out will make you learn it better.
Sometimes drawing diagrams help. I had a tough time figuring our how to center and place the displayed image correctly. It got really confusing with margins, padding, window height, header height, display area, mouse position, different image dimensions.... I messed around with the numbers forever, got really frustrated, then resorted to drawing it out and labeling all these dimensions to clear my head. After seeing all the dimensions drawn out I suddenly knew what I had been doing wrong.

0 Comments

Retiring my Flash Website

5/14/2014

0 Comments

I still like Flash and feel attached to my now archived Flash website. I spent a long time on it several years ago. So I am keeping it in my Portfolios section under the "Interactive Animation" so you can still visit it.

I used to do a lot of work in Flash mostly during my time working for AmericanGreetings.com. And I really liked it. Compared to this combination of css3, javascript, jquery, html that I used to create my new website, it just seems so much more simple and fluid to create an interactive experience in Flash.

0 Comments

Does Anyone Else Out There Use Flash Primarily as a Drawing or Surface Design Tool?

5/14/2014

0 Comments

Several years ago I got into surface design for fabric, gift wrap, and other products. This was when I realized that Flash doesn’t have to be just for animation and interactive design. It is a great vector-based drawing tool and great for designing repeating patterns.

Looser, more fluid drawings

It is so much easier to draw in Flash than Illustrator. The pressure-sensitive brush tool in combination with the eraser tool works well for sketching. Fine tuning shapes is just as easy with Flash as using Illustrator’s anchor points –while it is not easy to sketch in Illustrator. I find that sketching freeform in Flash allows me to create more fluid and loose vector art than clicking and fiddling with Illustrator’s anchor points.

Pattern Design Workflow

I know there is powerful pattern design software out there. But I haven’t tried any of them yet. Maybe a lot of surface designers use this workflow with Flash too, but I discovered it by trial and error. First, I create a square with a thin outline and transparent fill and make a symbol of it. It is a good idea if you know that you need a certain size repeat to make the square a factor or multiple of the size that you need so when finalizing the art there is an easy way to scale the repeat to the right size. Use a color for the outline that you will not use in your art so it will be easy to get rid of it later.

Copy and repeat this symbol enough times to get a good view of what a repeated pattern will look like – maybe 4 times horizontally. Align all the edges precisely so you have a row of perfectly aligned and spaced squares. Then copy this row and paste it vertically until there is a big enough grid to give a good sense of what the pattern will look like. Make sure it is all aligned and spaced perfectly.

Now go into one of the symbols and start drawing and designing away. Note: You don’t need to stay within the bounds of the square when designing the repeat. The overall pattern is updated with each stroke so you can see the pattern evolve while you work. Before discovering this workflow, I had a hard time getting my repeats come together fluidly because I was designing the repeat, but didn’t get to see the finished pattern until after I repeated it.

This workflow saves me a lot of time and makes it easier to create more intricate patterns since you see how it comes together as you draw.

Color

One thing Flash doesn’t do well is color. I feel like I have one hand tied behind my back when I try to create color palettes in Flash. I think the best software for designing color palettes is Photoshop. So what I do is draw in Flash using placeholder colors. That's why my colors are so crazy-looking up there. I don’t put a lot of thought into the color while drawing because it is too awkward and a waste of time to try to choose the right colors in Flash. I wait until I am done or mostly done with drawing the design, then import the drawing into Photoshop.

Photoshop has great tools for getting the perfect colors and values in your artwork. I was thinking about writing about some basic Photoshop tips later, but what I use a lot are Hue Saturation, Levels, and Color Balance. Be loose, fast and messy about it when trying to find the right palette. Sometimes it helps to be messy to come up with more interesting looks. It is so much easier to come up with good colors this way than being restricted to the color picker in Flash or Illustrator.

Final art

Always save the Flash version with square guides as your original in case there is ever a need to modify or resize. To create final art, export Flash art to Illustrator. (Flash CC no longer exports Illustrator files. I have read about workarounds to this. Exporting to SVG seems to work for my purposes.) The colors don’t seem to translate correctly for me when I export to Illustrator, so I wait until this step to put the final colors in. After opening the art in Illustrator, I import the color rough I made in Photoshop and use the color picker to pick colors from the color rough to recolor my design rather than trying to find the right colors with the Illustrator color picker. If the square outlines are still there, get rid of them. And that’s it. I usually only use Illustrator for this one last step.

0 Comments