day 28: my brushes

I've been working on some big poem illustrations. When I started one of a big English garden, I thought maybe if I go back to good old-fashioned drawing with real pencil, this will go faster. I got as far as drawing the big violet when I realized that was a dumb idea. It was messier, it was going to take extra time to scan everything, piece it all together, deal with the multiple layers, clean it up, etc. etc. So I went back to my tried and true Photoshop brushes.

Here is my Brush palette. I use the basic default brushes that come in Photoshop with a little adjustment. I've never been very fancy with experimenting with lots of brushes.

A good tip: use the bracket keys [ ] to increase/decrease brush size. Also, you can right+click on the screen for the brush palette to pop up. Both efficient space saving tips I never use because I am stuck in my ways.

These are the spatter brushes that come in Photoshop. They are my favorite. I use them with their default setting to do a lot of shading. It adds a little more texture than just using the smooth airbrush brushes. I usually set them at 20% or 30% opacity (you can use the numbers on your keyboard to change brush opacity). Then I use the eyedropper tool (ALT to toggle from the brush tool) and pick neighboring colors constantly to blend them together.

To draw my lines, I still use the spatter brushes, I just adjust the angle. In the Brush palette, click on Shape Dynamics and drag the Angle Jitter all the way to 100%. It gives you a nice more pencilly-textured brush. All those yellow-highlighted brushes above are just variations of this same brush in different sizes or with variation of spacing and angle jitter.

Here is where you adjust the spacing. More spacing makes a rougher brush. (Above is pre-angles adjustment.)

This is maybe too much spacing. But if you grab a normal round brush and increase the spacing like that, you've got yourself a lovely dotted line to draw with. Fun to use that with the Paths trick I explain below.

Here is the actual pencil drawing from the photo at the top. I was using a cheap mechanical pencil because I couldn't find anything else. It looks fine, and I'm sure if I had more time it would be a better more organic looking illustration if I kept with the draw and scan it method. But time is always limited, and the Photoshop version will work for what I need.

Here is the sketch done with one of my modified spatter brushes. Looks pretty close to the pencil drawing above.

But I get all control freakish and have to have tidy lines. Here is the cleaned up line drawn in Photoshop.

Once I've got the flat colors filled in, I do a quick shade with a big airbrush to start getting the colors set.

One the right flower petals, I did a little shading with the default spatter brush. There is a little more texture to the brush strokes.

Here's the finished shading and cleaned up lines. Sometimes if I want to smooth the shading some more without using the airbrush tool, I will use the finger smear tool with a spatter brush selected and smooth out some streaks.

Because this is for a poster, it's pretty huge. So here is a close-up so you can see there is still some texture to the lines. There are also some texture layers to lessen the air brushiness, but I left them off for the sake of the tutorial.

And finally, a cool little trick with Paths if you are drawing straight lines.

First step, make sure you have the brush and color you want already chosen. Also, make sure the fill is turned off. I don't know what those icons in the top toolbar are called. Just look at the picture. :)

Then draw your shape with the pen tool. Go to the Paths menu and choose Stroke Path... I usually do not use the simulate pressure option, click OK.

Et viola! Your pen tool drawing has your brush texture applied. Makes drawing straight lines and smooth curves so much easier.

day 21: channels and some bull

toro photoshop painting from Maryn Roos on Vimeo.


It's tutorial Sunday! And since yesterday's toucan video worked out so well I decided to make another. I have to paint these icons for work anyway, so may as well record it.

This is mostly about Channels. When I first learned how to use them, it was the best thing I'd ever learned in Photoshop. It's still useful even though I don't scan in my drawings anymore.

To better understand what Channels are, think of them like a silk screen. Where there is black, no paint can get through. Where it's white, you get full color. Shades of gray equal the amount of transparency, so 50% gray means 50% of your color bleeds through.

Here is a pencil drawing of a bull. I actually found a pencil! Couldn't find a pencil sharpener though so had to use a pocket knife.

Once the drawing is scanned, I first make the drawing grayscale by opening the Hue/Saturation dialog box: Image>Adjustments>Hue/Saturation... or cmd+U. I then slide the saturation bar all the way to gray. Next I open the Levels box: Image>Adjustments>Levels... or cmd+L. I adjust the sliders until I get a decent black line.

Next, I click on the Channels tab. It is up by Layers tab. I click on the dotted circle at the bottom of the Channels palette. This selects the WHITE area.

Next I go back to the Layers tab. I create a new layer then invert the selection: cmd+Shift+I. Now the drawing is selected rather than the space around it. I pick a color (I'm using black) and fill the selection: alt+delete. And finally I turn on the Preserve Transparency button. That is the first box at the top of the layers palette after the word Lock. With this on, I can paint where ever I like, but if a pixel is 100% transparent it will stay 100% transparent, 50% transparent stays 50% transparent. It is a great way to color your lines. I've turned off the scanned drawing layer so you can see the pencil drawing is now on a transparent background.

That was basically the tutorial. The rest is just to show you the steps you see in the video. Here the bull is still in three layers. Two layers of color and the line layer, all with Preserve transparency on for easy coloring. To fill in the area of the bull, I selected outside the bull lines, then expanded the selection by 2 pixels, then inverted the selection, then alt+del on a new layer to fill it in. It's not perfect, but faster than using the lasso tool around all the edges or painting it in with a brush.

Here is with the lines colored. Maybe not the best example since it's mostly dark so it doesn't look that different from the black lines. Once the lines are colored, I merge the layers and start adding the details.

Lines and color cleaned up. It's essentially done.

But I wanted to add a little texture and a little more color. The quickest way to do that was to command+click the layer thumbnail to select the bull and then make a new layer. I can shade and add texture without going outside the edges. The reason I didn't put it on the same layer as the bull was so I could adjust the layer properties: change the opacity, set it to Overlay or Soft Light, etc. Sometimes I do some of the painting on a new layer because I'm not sure what I'm doing. If the experiment fails I don't have to revert or undo, I just delete the layer.

So that was a quick painting of a bull in Photoshop. I don't spend too much time on these little icons since they are meant to be about an inch tall on a monitor. Let me know if you have questions about Channels or anything else I mentioned. Happy to clarify and answer!

day 20: tucán

toucan drawing2 from Maryn Roos on Vimeo.

Just a little test to try recording a painting in Photoshop. Here's the same image as in the video so you can see a close-up of the finished icon.

day 14: bevels

I think Sundays will be good to do some kind of tip or tutorial or some such thing like that. Make it a weekly thing. That being said, today I think I'll talk about the Bevel Blending Option in Photoshop. I used to avoid it like the plague. It always made me think of bad logos and ugly UI buttons. But I've been using it more and more lately. Maybe I shouldn't, but I'm kind of liking it.

Puppets made in Photoshop for animating in After Effects

Right click on  your layer and click Blending Options... or just double click on the layer's thumbnail.

If you've never used the bevel tool, you can find it in the Blending Options palette for a layer. I try to keep it on the subtle side so it's not too obnoxious. It's usually in the 1 or 2 pixel range. In addition to adjusting Size and Soften, don't forget to try Depth as well.

Kind of a tangent, but I thought I'd show the steps of how I made those animals above. These were made to animate, and the bevel, along with a little drop shadow, gives them just enough dimension to seem more like actual little paper cutout puppets. Sort of. Anyway...

Original sketch. I was looking at Oaxacan folk art when designing these guys.

I brought the sketch into Flash and made all the separate pieces on different layers. Then I exploded them out so nothing overlapped, and exported the pieces as a png. I reassembled in Photoshop, lining up all the pieces on separate layers.

I have folders full of textures and fabrics. Mayang Textures is a great resource.

Here's a piece of tweed I found and then played with different colors and layer properties until I got something I liked.

I want to add the texture to the top shell. When I hold down the Command key and click on the shell layer thumbnail, it selects the shell. (The shell layer doesn't have to be selected to do this.)

Making sure you have the texture layer selected, click on the little gray box with the white circle at the bottom of the layers palette. This makes a mask from your earlier selection. If you click on the chain between the mask and the layer thumbnail, then make sure the layer thumbnail is selected, you can move the texture around beneath the mask to position it just how you'd like. Then add your blending options, and you're done!

Here's another example of using the bevel tool. The illustrations in this project were meant to be those chipboard type stickers in scrapbooks. So after making the characters in Flash, I brought them into Photoshop. I Command clicked on the layer thumbnail to select the image and then in Select>Modify>Expand... I expanded the selection about 10 pixels or so, then on a separate layer filled it that cream color. I then added the Bevel to the cream layer.

And one final little step-by-step with bevels. Sometimes the bevel tool isn't enough and I have to paint in my own bevel.

Finished illustration for three rhyming words in Russian: Picture, Car and Tire (or was it Wheel? don't remember.)

Character imported from Flash.

Standard Bevel and Drop Shadow applied to the layer.

Because this guy wasn't in lots of pieces like the armadillo, the standard bevel wouldn't cut it. I had to go in and paint some of my own bevels and shadows. Then I added a little bit of shading and accents to finish him off.

 And thus, there is how I use the Bevel tool.

day 9: kites

I just realized I've never posted this. I did this earlier this year for a cover for The Friend Magazine. Always a good gig. Looking at this again, I'm amazed at myself for drawing so many individual blades of grass. Must have been in a grassy mood that day.

Also, this is another good example of a Photoshop cheat that I like: gaussian blur the heck out of the background so you don't have to spend so much time on details (when it's not important). Saves a lot of time.

day 3: happy july 4th!

 

Happy Fourth of July to those of the American persuasion. Hope you are enjoying a lovely holiday! Here was my take on the signing of the Declaration of Independence. I illustrated a little book about Ben Franklin at Imagine Learning a few years ago. I am crap at caricatures and likenesses, so this is the style I came up with to help me fake it. :) And since it's a holiday, a brief step-by-step for your perusing pleasure.

Thumbnail: I work very hard at accuracy at this stage... heh. This is the thinking stage, and this is what my thumbnails generally look like. Lots of smiley faces.

 

Here's the finished sketch. Already you can see I keep the background separate from the foreground elements.

 

Finished line drawing. I have a brush that makes a more pencilly line I made from the default spatter brushes. Background and foreground lines on separate layers. I grabbed a copy of the Declaration of Independence form online and used the Transform/Warp tool to make it fit into my drawing. I set that layer to Mulitply so whatever color underneath will show through.

 

Color fills and some simple shading. I use lots of layers at this point. There's a layer for hair, a layer for skin, layer for coats, layer for vests, etc etc. I fill in a flat color for the area and then can set the layer to Preserve Transparency. Then the shading is super fast, and it's easy to select areas or adjust individual colors.

Getting closer to done. The foreground color layers and lines have all been merged together. I used the Blending Options to add a Drop Shadow. Then I went in with my rough pencilly brush and added more scribbly lines and details.

 

And here's the final with text. I added a few old paper textures over the top set to Overlay and Soft Light, and there you go!