Comic Book Style Design part 2

Step 2. Ink your penciled artwork.
The second step is inking the drawing. These are the Tools you’ll need:

Paint Brush or Crow Quill Pen
I actually use a very small paintbrush (like a #1, #2 or #3).

India Ink
Some India inks are thicker than others. I like a nice thick India Ink. I have had success with Higgins Waterproof Black India Ink.

Marker
Any black waterproof marker should do.

More specifically, I use a regular #0 Windsor & Newton camel hair paint brush. I have also had great success with the new synthetic nylon or polyester fiber paint brushes. You will also notice I roll masking tape around the brush near the tip. I do this just to get a better grip of the brush. I feel like I have better control over the tip with this extra handle.

The large areas of black I fill in with a marker.

While you can ink with mechanical pens and markers I think it is important to use either crow-quill ink pens or paint brushes because it gives you the ability to vary the thickness of your lines. In some spots you’ll want to push down and create thick lines and then in others you’ll want to lift up to make very thin lines. Experiment with this to see what works.

A Couple Line Tips
First, you can create more depth in your drawing by doing this. Objects in your drawing that are closer to you should be drawn with thicker lines. Objects that are in the background should be drawn with thinner lines. This will create a sense of depth in your drawing.

Also – if there are bright spots – for instance a light source is behind an object, and the light source is just over your objects edge – the outline of this object might actually thin to the point where it stops, there is a gap, then the line starts up again.

After I dip my brush in the India ink sometimes there is too much ink on it, so I will tap it on the ink well, or draw a few lines on a scrap of paper before I go to my drawing.

It is also important that you are using the right paper. India ink will spread like crazy on some papers. Get a few varieties of Bristol paper and experiment. I find that a thick smooth or plate finish Bristol is the best.

If you have large areas that you need to “fill” I suggest using a black waterproof marker.

Once you’re done inking your drawing I usually wait for at least an hour before I go back and erase my pencil lines. I will use the same plastic eraser and just run it over the entire drawing. If your ink is not dry it will smear, so give it plenty of time. Once the ink is dry you should be able to safely erase the entire paper and the pencil will disappear and the ink will stay.

Step 3. Scan your Artwork at 300 DPI
Once your black and white artwork is complete – you’ll have to get it into your computer for coloring.

Tools You’ll need:

Computer
From here on out you’ll be working on a computer. I recommend a powerful design station, but obviously you’ll have to work with whatever is available. If your art is small a simple computer should be fine. But if you are working at a very large scale – you’ll need processing power to handle the size of the file.

Scanner
I really wish I had a large format scanner. That would like my life much easier. But I only have an 8.5×14 inch scanner. This typically means that I need to scan my artwork in pieces and stitch them together. This can be a bit of a pain in the butt.

Adobe Photoshop or Corel Painter
I personally use Adobe Photoshop but I think Painter is probably better. I use Photoshop because that is what I learned on and am most familiar with.

With the right tools in place, all that is left over is to stitch your artwork together. Since I frequently have to scan my artwork in pieces, since it’s too big for my scanner, I recommend that you use these tips:

1. Align one edge of your paper with the edge of the scanning surface. Once you scan one part, slide the art keeping one edge of your art aligned with the edge. This will keep your art from rotating, so that stitching it together will be easier.
2. Scan your artwork at 300 dpi. This is high resolution or “print” resolution. Typically I shrink the artwork down later but it’s better to start with too much resolution than too little.
3. Stitch your artwork together by bringing all of your pieces together onto one large canvas and lining them up. If you set each image layer to “multiply” it will make lining them up easier.

Once you have your black and white image scanned into the computer and stitched into one piece of art you’ll need to resize the image to the final size you’ll want your artwork. On this art we’re going to make a 4" x 9" flyer. So, we will shrink the artwork to 4" across then add extra canvas so that our final art size is 4" x 9".

Once you have your black and white image scanned into the computer and stitched into one piece of art you’ll need to resize the image to the final size you’ll want your artwork. On this art we’re going to make a 4”x9” flyer. So, we will shrink the artwork to 4” across then add extra canvas so that our final art size is 4”x9”.

Note

If you’re going to be adding graphics and text above or below your artwork – you may want to take a moment and sketch out how you’re going to layout your graphics now. If, for instance, you want to add a text title above your illustration – how much space are you going to need? This way, you’ll have plenty of background art for use once you get onto the designing phase.

Here is the final scanned art:

Comic Book Style Design part 1

We have often been asked the process by which we create our illustrated flyers and posters. I will try to give you a clear tutorial on how we create our illustrations and turn them into flyers or posters. Our end product will be this flyer which was created for our recent

Before I go into an insane amount of details I want to give you a quick snap-shot of the process:

1. Draw with Pencil on Paper
   
2. Ink your penciled artwork
   
3. Scan your artwork at 300 dpi
   
4. Create a second copy of the artwork at 150 dpi
   
5. Create a “color” layer just under the artwork (set your artwork layer to “multiply”)
   
6. Color your artwork
   
7. Delete the artwork layer, and return the color layer to 300dpi
   
8. Open the original 300dpi artwork and paste it above the color layer
   
9. Flatten the image and save it
   
10. Import the image into your design software
    
11. Add text and graphics
    
12. Export the final design

The following sections will take through the above steps. Hopefully by the end of this tutorial you have a good idea of how to create your own comic book style.

Step 1. Draw with Pencil on Paper
The very first step is the pencil drawing. I could write a novel about how to draw, but this tutorial will focus on the process – the steps it takes – to go from pencil drawing to the finished, designed, commercial piece of artwork.

The following are the tools you will need:

Paper
I use a plate finish Bristol. This type of paper is heavy enough to handle a lot of erasing. It is also thick enough to not wrinkle when you are in the inking phase of this process.

Pencil
I actually use a mechanical pencil like the KOH-I-NOOR Technigraph 5611 Lead Holder. This type of mechanical pencil holds a very thick piece of graphite that you sharpen and use similar to a real pencil, except it’s better.

Eraser
I use the Staedtler Mars Plastic eraser. And a Sanford Tuff Stuff eraser stick.

I think that it is important to stay fairly loose when you are in the pencil drawing phase. Start with basic shapes, keep your lines fairly light and when you start to see the shape you’re going after you can focus in and "tighten" up your drawing.

Here is a sample of a fairly loose pencil drawing:

Here is a close-up sample of a fairly tight pencil drawing:

A Word of Encouragement about Drawing
I think most illustrators are far too hard on themselves. They expect to sit down with one piece of paper and draw exactly what they have in their mind the very first time around. In my opinion this is nearly impossible. Drawing is a process that takes a long time. I like to make an analogy between a good batter in baseball and a good illustrator. A great batting average for the major leagues is “.300.” This batting average means that they get 3 hits out of ten, or get a hit 30 percent of the time. I think that this is a reasonable expectation for an artist to have as well. If I can get 3 decent drawings out of ten attempts – I feel fairly good about myself.

So, relax while you’re in your pencil drawing phase of this process. Get yourself a big stack of paper and get loose, draw lots and don’t be concerned about “bad” sketches – just toss them aside and start over.

Here is our finished tight pencil drawing:

ANOTHER PART I WILL UPLOAD TOMORROW ....

Adding Scanlines

Scanlines are a common feature of web images nowadays. The effect replicates the kind of lines that appear on a TV, and can give a photograph a similar look and feel.

Creating Scanlines:

1. The first thing to do is open up the image you wish to add the scanlines to. It can be colour, black and white, whatever you like. Just make sure that the picture is in RGB mode. Do this by clicking on ‘Image’ in the toolbar, ‘Mode’ from the resulting drop down, and select ‘RGB Colour’.

[ the photograph before any alteration ]

2. The scanlines themselves are added by using a Fill Pattern. But first we have to create it. Go to ‘File’ > ‘New’ and make a new image with the settings shown below. Really you can tailor this to suit your needs, but for the time being, a 2 x 6 pixel transparent image will do nicely. Ensure that the background is set to Transparent.
   

[ settings for the pattern image ]

3. Zoom right in to the new image. Using the Rectangular Marquee tool, make a 1 pixel high line across the top of the canvas, and fill it with black. Again, you can choose the colour to fit in with your image if you wish. You can also play around with the lines - draw more than one, have different thicknesses, it’s entirely up to you.
   
4. Once you’re happy with the way your scanline will look, it’s ready to be saved. Instead of the usual ‘File > ‘Save’ method, go to ‘Edit’ instead. There’s an option near the bottom of the menu called ‘Define Pattern’. Click on this to bring up a small Dialogue Box, asking you to name your new pattern. For the sake of simplicity, let’s call it ‘Scanlines’. Close the image. If Photoshop asks you whether you want to save it, answer ‘no’.

[ The Pattern Dialogue Box ]

5. Now you’re ready to apply the scanlines to your initial photograph. Going back to the picture, add a new layer above the main image. Call it something meaningful. Click on the Fill tool, and take a look at the menu that appears just under the main toolbar along the top. To the left hand side, there’s an option called ‘Fill’ and a drop down box that currently says ‘Foreground’.
   
   Click the arrow here to pull up another option - ‘Pattern’. That’s the one we want. A new box should appear next to it. Again click on the arrow to bring up a selection of available patterns. You should be able to see your new Scanlines in there, so click on the box to select them.

[ Select a pattern fill ]

6. Move the cursor over to the new layer of your photo and left click to fill. The scanlines will now repeat all over that layer, covering your image.

[ adding the scanlines ]

7. All that remains to be done now is to change the opacity of the pattern layer, so the original image is visible through it. Use the drop down slider in the Layers panel to choose something suitable. 25% opacity works quite nicely.

The finished image should look something like this:

[ image with scanlines applied ]

Creating Pixel Art Lines

ill show you some basics of how to create ‘Pixel Art Lines’.

Quick Note: Something quick before we start. To create Pixel Art, you can use various programs from basic ones such as Microsoft Paint to the professional Adobe Photoshop. I tend to use Adobe Photoshop & here are my following reasons:

• The option of having ‘Layers’ is a must! The Layer feature in Photoshop is very helpfully for creating pixel art, you’ll find out why in the next few tutorials.
• Having transparency in Photoshop is another great feature for pixel art! It helps a lot with windows, water, and creating shine effects on buildings. Again you’ll find out more about this in the further tutorials.
• Also the large colour range in Photoshop is a lot easier to use than Microsoft Paint.

Alright, now we are ready to begin this tutorial. Creating the perfect lines in Pixel Art are very important especially in the end product making sure that everything aligns correctly and matches up.

Here's How:

1. Open Adobe Photoshop à Create a new document depending on the size of your creation. (If creating Pixel Art for KirupaVille then please use the templates provided!)
2. Select the ‘pencil tool’ and set it to 1px, then choose your desired colour.
   Just like in [Fig 1.0 Below].

[ select the pencil tool with diameter 1 px ]

3. The main rule in pixel art is: 2 Over, 1 Up. Obviously when creating things such as circles and curves the rule will be broken, but we will learn about that later.
   
   Now create a new layer, having different lines on different layers is messy but it helps a lot  zoom right into the canvas or close to. Draw 2 pixels next to each other then go up one, 2 over and draw another 2 pixels and so on. It should look similar to [Fig 1.1 Below].

[ Above Fig 1.1: Left image zoomed in, right image what normal person will see ]

4. If your image turned out something similar to [Fig 1.1] then you’ve just created your first pixel art line. By using this method we can create basically anything that’s square in isometric pixel art.
5. Now that you have learnt the 2 Over, 1 Up rule, we can now do the 2 Up, 1 Across rule. This rule is just opposite to the other rule and it comes in handy when creating roofs or even pixel art letters such as ‘K’. It should look similar to [Fig 1.2 Below].

[ Above Fig 1.2: Left image zoomed in, right image what normal person will see ]

Tutorial Done:
Well if yours turned out similar to mine in the images, then you created your first pixel art lines perfect! These pixel art lines are the base for everything that you will create later on in your creation.

Spider Webs in Photoshop

his tutorial will help you create a spider web effect in Photoshop. You will actually be surprised at how easy it is to achieve this effect. This tutorial should work in Photoshop 6 and 7, I have not tested it in lower versions, but as long as you have the filters needed, there shouldn't be a problem with it working. Please keep in mind that all screenshots on this page were shrunken down and saved at a lower quality so what you get will not look exactly like what is in the screenshot, but it should be in the same area.

[ the final product of this tutorial ]

Alright, let's get to work shall we?

1. First we want to create a new document. Go to File/New. In this example we will be using a 400x400 image, so to easier follow the tutorial, I recommend doing the same. You must set your background color to White.
   
2. Now you will have to set your foreground color to Black and your background color to White. If you aren't sure which way this will be, check the screenshot below.

   

3. Now we have to create a new layer to start our webbing on. After you create a new layer, right click on that layer and choose "Layer Properties". Under "Name", give your layer the name "webbing". If you aren't sure how to create a new layer, check the screenshot below, the button is highlighted in red.
   

   

4. Now we will have to draw our web. Choose the Paint Brush tool from the tools panel (or press "b" on your keyboard) and choose a smaller brush size (sizes 5 and 9 work the best, in this example I use size 9). After you have your Paint Brush tool set up, scribble a spider web pattern (or any pattern, for this example we are going to use a spider web pattern). Your scribble must be done in Black. See screenshot below for my starting image.
   
   

   

5. While you are still on your "webbing" layer go to Filter/Distort/Ocean Ripple. Use the settings Ripple Size: 10 and Ripple Magnitude: 20
   
   

   

   
   
   

6. Now we are going to apply a Gaussian Blur filter to the "webbing" layer. Go to Filter/Blur/Gaussian Blur. Use the setting Radius: 6.3
   

   
   
   

7. We are going to find the edges of the webbing now. Go to Filter/Stylize/Find Edges.
   

   

8. Create a new layer and call it "bg" (for Background). Fill this layer with Black (Alt+Backspace). Then click and drag this layer below your "webbing" layer so that "webbing" is on top of "bg". Now you have your spider web effect!
   
   

   

9. If you want to go one step further you can colorize the web. Select your "webbing" layer and go to Image/Adjustments/Hue/Saturation. Be sure to check the "Colorize" checkbox (as seen below), then you can move the sliders around to get the webbing to the color you want.

   
   

Well that concludes our spider webs tutorial. I hope you enjoyed it and finished it without any problems.

Creating Cool Footers

here’s nothing worse than visiting an Online Forum Community & seeing that everyone has really large footers (Example: 600px x 300px, 112KB), they just look horrible & take forever to load especially for 56K users. So I always like to create my footers nice & small so that they load quickly & look sharp. Now, you can too!

The following footer is an example of what you will create towards the end of this tutorial:

Step 1
For this tutorial we will be using a document size of 300px * 40px, with a transparent background:

Step 2
Create a new layer & fill it in with any color desired. Change the fill down to ‘0%’ & right click the layer selecting ‘Blending Options’.

Once in ‘Blending Options’ click the ‘Stroke’ tab on the left hand side at the very bottom, this should bring up some more options to edit our stroke.

Change the size of the stroke to ‘1’; change the position to ‘inside’ & change the color to #0E0D0D. We are done; select the Ok button to finalize the stroke.

Step 3
Now duplicate that layer by clicking & dragging it onto the ‘New Layer’ button. Right click the copied layer, select ‘Blending Options’ & click on stroke just like we did above.

However change the size of the stroke to ‘2’ & the color to white #FFFFFF. Select Ok to finalize the stroke:

You will need to also make sure that this ‘white stroke layer’ is under the dark grey stroke layer, if it’s not just click & drag it under the other layer.

Step 4
Create a new layer below the 2 stroke layers & fill it with a desired color, for this tutorial I chose: #A8EB17. Now right click this layer & select ‘Blending Options’.

This time select ‘Inner Shadow’. Change the opacity to 45%, Distance to ‘0’ & size to ‘18’ then select Ok to finalize these options.

Intermission
Well hopefully you have understood the tutorial so far, if not then please make sure you read everything in every step carefully, missing one thing may just make something not work.

So far your footer should look similar to the one below, if it doesn't then see what it is missing, and go back a few steps to find out what you missed!

Step 5
You might think it’s looking a bit dull still, so we will jazz it up with a nice gloss. Create a new layer under the 2 stroke layers but above the green background layer, so in between both.

Select the “Rectangular Marquee Tool” from the Tool Bar (Keyboard Shortcut: M)Use the Marquee tool & select the top half of our footer as done in the image below:

Now continue on to fill this selection with a white fill #FFFFFF & then change the opacity to ‘15%’, this will give it the nice glossy feel/look, example below:

Step 6
We will now add the 3 different colored bars that are aligned to the left of the footer. These not only help the footer stand out more but give it a much better appeal than just having a plain green background.

Like in step 5 we will use the “Rectangular Marquee Tool” from the Tool Bar (Keyboard Shortcut: M). Use the Marquee tool & select a diagonal line such as the one in the example below:

Fill the marquee with a nice orange color, # F7AB19, this will mix well with the green. We now want another 2 of these bars, so duplicate the layer twice (Refer to Step 3 for duplicating layers). Once you have duplicated them align them all up next to each other, side by side, examples below:

We now want to change the colors of the 2 duplicated bar layers. For the first duplicated layer, right click the layer, select ‘Blending Options’ then select ‘Color Overlay’. Change the first bar to #FF0000 & the second bar to #009CFF. Once that is done align them to left & finally step 6 is complete!

Step 7
We now want to add the scan lines which really helps to show the footers vibrant colors. To create the scan lines we will need to open a New Document with a transparent background of 3px by 3px.

Once the new document is open we need to zoom in as close as we can on the document by using the Zoom Tool from the toolbar (Keyboard Shortcut: Z).

Select the Pencil Tool (Keyboard Shortcut: B) from the toolbar, this needs to be a size of 1px & use black #000000 as the color. With this we will draw 3 black pixels just like in the screenshot below:

We now need to save this as a pattern, so on the top menu bar select: Edit --> Define Pattern. Give it a name & select Ok. We can now close this 3px * 3px document & return to our Footer Document.

Now we are back to our Footer Document, create a new layer under the white gloss layer. Select the ‘Paint Bucket Tool’ from the toolbar (Keyboard Shortcut: G) & at the top toolbar change the ‘Fill’ from Foreground to ‘Pattern’. Then on the Pattern menu to the right select our pattern we created above.

Now fill the layer we created with this pattern by clicking somewhere inside our document, you will notice that it looks very horrid at this point, so simply change the opacity down to about ‘10%’.

Step 8
We will now add the final part to this footer, text. Text can mean a lot of things & can help define something much larger than it actually is. I will be using a nice pixel font for this with a size of 6px.

To add the text simply select the ‘Horizontal Type Tool’ (Keyboard Shortcut: T), select somewhere on the document & type your text, for this I typed my website name; Faded Pixel.

If you wish to use the font that I used then you may download it here as it’s a free pixel font: FP Pixel Font.

Final Result
Well if yours turned out similar to the one below then your all done, if not then I suggest you read back over the tutorial & find out where you went wrong.

I also suggest you experiment with this footer design, once you understand how I did it then play around with the styles yourself, add different features, here's 2 examples below:

---

If you have any questions, feel free to post them