CR HQ : A Tutorial to Tags, Art and Other Stuff

[.Rai]

 

Friday, Saturday and Sunday 10th-13th: Regular updates every day! Have fun, people.



Note and Disclaimer: All images are mine, unless stated. All knowledge is not solely mine, but simply me passing it on to everyone else. I do not intend to claim ownership of any images that do not belong to me. Any images I use to show bad examples are not used in order to insult, simply as a way to give other people a visual understanding for those who do learn visually.

Table of Contents And Navigator
Use Ctrl/Cmd + F to skip to the desired section.

A. The Basics And The Slightly Advanced Stuff

--- A.I.0. Colour Theory
--------- A.I.I. Hue, Saturation and Lightness
--------- A.I.II. Colour Schemes

--- A.II.0 Focus, For Goodness Sake
--------- A.II.I. Focals
--------- A.II.II. Depth and Flow

--- A.III.0 The Rule of Thirds

B. Starting And 'Ze Making

--- B.I.0. The World is your Canvas
--------- B.I.I. Dimensions

--- B.II.0. The Tools of the Trade (The Basics)
--------- B.II.I. Brushing like a Boss
--------- B.II.II. The Selection Tools
--------- B.II.III. Gradients
--------- B.II.IIII. Smudging

--- B.III.0. Typography
--------- B.III.I. Font
--------- B.III.II. General Tips on using Text Anywhere
--------- B.III.III. Tag Styles of Typography
--------- B.III.IIII. Placing Text

C. The Encyclopedia of Tricks and Tips

--- C.I.0. Up, Down, Left, Right
---------C.I.I. How to devamp sprite scenes

A. The Basics And The Slightly Advanced Stuff

Before you do anything, you must have a good understanding of several things. We shall cover some of them below. Without sufficient preparation and skill, you can lose direction and you won't have a firm anchor to start on, metaphorically-wise.

A.I.0. Colour Theory

This may seem simple at first but don't underestimate the power of colour. It defines art, and a good combination can really capture moments. Use it as a powerful tool, not simply a forced choice you have to make.

Primary Colour: Yellow, red and blue are regarded as the three primary colours of art. This is because, as pigments, they cannot be made from any other combination of pigments. However, sometimes (especially in digital art), green; red and blue are regarded as the primary colours. This is because RGB (Red Green Blue) is how light is composed, with every colour on the light spectrum being made up of different amounts of those 3 colours.

Secondary Colour: A secondary colour is a colour composed from two primary colours. We can see that the 3 secondary colours are orange, purple and green. Orange is made from red and yellow; purple from red and blue; and green from blue and yellow. To change the hue of the colour towards either of their components, simply add more of that colour (this is how to form tertiary colours).

Tertiary Colour: There are 6 tertiary colours, basically between a secondary and one of its component primaries. Try and guess which of the below colours are made from which secondary and which primary!

From left to right: Vermillon, Amber, Chartreuse, Cyan, Indigo, Violet Red

Colour Temperature: Colour temperature is a term to describe how hot or cold a colour is. Compare these two greys:

Which seems warmer and which seems cooler? The one on the left should feel cooler and the one on the right should feel warmer.

So what did I do to the greys to make it feel like that? I added 6% blue to the one on the left and 6% yellow to the one on the right.



Now, I've added 10% blue and 10% yellow to these whites. Which would you most associate with an office or a bathroom and which one would you associate with a living room or a kitchen?

As you can see, it's important to consider the temperature of your colours.


A.I.I. Hue, Saturation and Lightness

We've covered hue in the previous part. It is another word for colour, basically. Now, for saturation and lightness.

Saturation: Have you heard people talk about saturated fats or learnt about saturated solutions in science? Well, it's a similar principle in art. "How saturated a colour is" is literally how much colour is in it.

Left to right: 0 Saturation, 20 Saturation, 40 Saturation, 60 Saturation, 80 Saturation, 100 Saturation

Lightness: Lightness is literally how light a colour is. You can see it easily in black and white:

Left to right: 100 Lightness, 80 Lightness, 60 Lightness, 40 Lightness, 20 Lightness, 0 Lightness
You can also see it as 0 Shadow, 20 Shadow, 40 Shadow, 60 Shadow, 80 Shadow, 100 Shadow

A.I.II. Colour Schemes

You must find a scheme for each piece of work you do. Throwing around random colours does not work. Trust me. You must use colours that work with each other.

Complementary Colour Scheme: You will hear many people talk of complementary colours. Basically, on a colour wheel, complementary colours are sat opposite on it. They are complete opposites to each other. Complementary Colour Schemes often have much more contrast than any other scheme can provide. However, it is hard to balance colours in it so be careful.

Now, what do you notice about the colours on the left? Highlight the empty line underneath this for the answer.
They're all primary colours.
Now, what colours make up the secondary colours on the right? Highlight the empty line underneath this for the answer.
The other two primary colours that isn't the primary colour on the left.

Also, note that these are for pigment colours. For digital art, it is often easier to use the following combinations:

Red Cyan
Yellow Blue
Green Magenta

Split Complementary Colour Scheme: This is a slight variation on the complementary colour scheme. One of the complementary colours is spread either side of it into a colour range. Imagine this as a fork with two prongs. The start of the handle is one of the complementary colours while the two prongs are the borders of the colour range of the other colour. They have a greater colour range and can provide more interesting compositions but are even harder to balance for colours.

These are 3 of the 9 Split Complementary Colour Schemes that are there. Generally, people tend to use the warmer colour as the singular colour to put emphasis on it.

Analogous Colour Scheme: Anologous, or corresponding, colour schemes use colours close to each other on the colour wheel to provide an interesting, yet simple, result but they can lack contrast.

Triadic Colour Scheme: It is a scheme of 3 colours evenly dispersed around the colour wheel. Please note there are two colour wheels: one that mixes paint, or pigments, while the other mixes colours as your eyes would (RGB). I will be referring to the digital colour wheel most of the time from now. Triadic Colour Schemes can provide a lot of contrast but, with many of the others, very hard to balance.

Tetradic Colour Scheme: Or the Double Complementary Scheme. This basically takes 2 colours, of analogous hue, and also adds their complementary colours into the mix. You end up with 4 balanced, harmonized colours. Using this can be hard and it is wise to dilute some of the 4 colours.

A.II.0. Focus, For Goodness Sake

We'll be focusing on focals in this section. What is a focal? Well, it's what your piece of art has a focus on, as the name suggests.

A.II.I. Focals

Tag by Blesh

When you look at this rather magnificent tag by Blesh, what is the first thing that you look at? You automatically look at the centerpiece, the focus : the render. This is true for many, many tags and is an important principle to understand.

Tag by Tainted Prophecy

What do you notice about the render here? You should be able to see that it has a white colour cast on it and that it is slightly blurred. He may have intended for a movement-type effect, but the overall execution is poor and does not give a pleasing look.

A.II.II. Depth and Flow

These two components are greatly related to your focal. Depth is the pseudo 3-dimensional look you can get while flow is the direction of your render. I'll cover tricks later but at the moment, I shall just talk about the basics.

Depth: As said, depth is the feel of 3D in a piece. It's very important otherwise your piece can look flat and uninteresting. Let's take Blesh's tag as an example again:

The edges are very dark compared to where the focal is. This is one of the many tricks for depth. Burning, or darkening, the edges of a piece and dodging, or lightening, the focal can really lift a piece up. Another thing to notice is that, compared to the area around the focal, detail is much less around the edges. Another good trick for depth is that you can blur the background and/or sharpen the foreground to add more of the 3D effect.

Flow: Flow is a difficult but important thing to learn. When you choose a render or stock image, you usually must choose something with a good flow. Some people don't and add artificial flow later but, for beginners, it's good to learn how to find good images at first.

Image property of dA deviant, summer-shadow. Visit her!

This has a good flow. It should become apparent after adding in a few arrows here and there...

Streamlined things are much easier to add flow to. So, aim to find suitable renders for that very reason.

A.III.0. The Rule of Thirds
Suggested by Madsen.

The rule of thirds applies more to photographers and digital artists but it's very useful nevertheless. The main theory is that you should crop and work on a canvas split into thirds, not halves. This is via 2 horizontal and 2 vertical lines. Here's an example courtesy of Wikipedia:

The same image has been cropped two different ways. In the first, it's been cropped via 1 horizontal and 1 vertical line - splitting it in half both ways. Doesn't look very natural, does it? The second is much better, everything is placed on the line guides. It adds more atmosphere if you use the rule of thirds.

A particularly important thing to notice is where the horizon is. It should cover two-thirds of the picture. In the first picture, it only makes up half the picture.

B. Starting and 'Ze Making

B.II.0. The World is your Canvas

What is your canvas? Well, like in traditional art, it's what you are working on. It'll look something like this (I use Photoshop Elements 9):

May seem obvious but it brings me on to my next point:

B.II.I. Dimensions

You must choose the dimensions of your piece carefully. The wrong dimensions can ruin a piece and distract your eyes from the focal. In digital art, you have much more freedom as all you need to do is quickly place in 2 numbers and you're done (of course, this is more complicated for professional artists, with things like resolution to be taken in). For tags, I like to split them into 3 different dimension categories:

Horizontal: The most common size for tags. Great for beginners and the easiest to work with. Usually 400-600 x 150-250.

Vertical: Slightly harder to use but gives good results if done properly. If you have a long render, especially if it's a side-view of a person, vertical sizes can help. Usually, 100-250 x 400-600.

Large Horizontal: These give a more art piece feel. Many people use these with a small focal and then use various details in the rest of the piece. Usually 200-400 x 500-700.

B.II.0. The Tools of the Trade (The Basics)

What can you do in any editing program without those tools that are installed. I shall quickly go over the more important ones for graphic designers and tag-makers. But not in detail. Yet. That shall come later.

B.II.I. Brushing like a Boss

Brushes. Some of the most important tools. We shall cover some of things that comprise the art of brushing.

Hardness: Hardness is how hard the edges of a brush is.

These are all the same size brush, but with 0%, 25%, 50%, 75% and 100% hardnesses.


Spacing: This setting basically is, when you brush, how far apart the brushstrokes are. Usually, at standard spacing (25%), a long line brushed onto a canvas would be solid. However, at different settings, you achieve other results:

25 Spacing, 50 Spacing, 75 Spacing and 100 Spacing

B.II.II. The Selection Tools

The selection tools are one of the tools that come under the category: "When used correctly, you shouldn't know that you used them". Basically, a good selection is one that can't be seen in the final result. they can be split into various categories:

- The Marquee Tools
- The Selection Brushes
- The Magic Wand
- The Lasso Tools


Marquee Tools: The marquee tools are the first two tools seen below the title. You can make fixed shape selections with them which makes them good for selecting a whole canvas, adding atmosphere etc. They work best with feathering but I shall talk a bit more about that later.

The Selection Brushes: The selection brushses come under Quick Selection and Normal Selection. The main difference is that the Quick Selection Brush 'snaps' to the outlines of objects. But be careful as it can make inaccurate selections if you're object is the same colour and/or shade as its background. The normal brush is slightly more time-consuming but is worth the effort.

Magic Wand: Magic Wand is similar to Quick Selection but a little quicker. One click in an area will automatically make a selection with the same sort of colour/shade as that area. Refrain from using this tool for rendering as it will end up with bad results most of the time.

Lasso Tools: These are basically standard if you're doing rendering. You can make free selections around an object either with the polygonal or the normal lasso. Polygonal lets you do it in steps but you end up with slightly jagged surfaces. The normal lasso is a hard tool to use but can end up with good results, especially with smaller objects.

Feathering: Feathering is basically selections' equivalent to hardness on brushes. You can feather a selection by x amount of pixels in order to soften the edges of that selection. It is found in Select > Feather or, depending on your version, Select > Modify > Feather

These selections of 600 x 150 have been filled with black. The one on the top however has been feathered by 10 pixels.

Refine Edge: Very useful for renders or complicated selections with lasso, this tool will smooth out your edges via 3 commands.: smoothing, feathering and contracting/expanding.

Smoothing will remove any edges from your selection, making it more rounded.
Feathering has been mentioned already.
Expanding/contracting will increase or decrease the size of your selection.

B.II.III. Gradients

Gradients are a very useful tool, for many things but must be used in certain ways for the best effect. I shall demonstrate it later with with a piece of pixel art. First, I'll take you through the types of gradient.

Linear gradients: These gradients are from foreground to background colour, unless you use one of the default gradients installed. Instead of a background colour, you can use a transparency instead. You can drag from point A to point B in order to make a smooth transition between those colours from A to B.

Radial gradients: These gradients work in the same way as linear ones, in terms of dragging but instead from a point, it will create a feathered circle round the point (depending on how far you dragged it).

Bi-Linear gradients: When you drag a line, it'll create two linear gradients on the outsides of that line and foreground colour on the inside. There is a specialised trick to this known as light leaks. It is made with vintage cameras when, while processing the film, light comes under the film and therefore putting streaks of light through it. It can be re-created using digital techniques. Don't use it in most other situations though.

Angle gradients: Also known as conical gradients, these create a linear gradient but bended around a point. Has specialised uses in which it can be used but otherwise stay away unless you are experienced with them. The uses will be covered later (examples of which are sunbursts and metallic shading).

Diamond gradients: The name is self-explanatory. Don't use them unless you have a reason. Results are hit and miss except if you are experienced with them.

Now, to show you some tricks with a sprite example.

Image property of dA deviant, scarex3wer. Visit him!

This is already fairly good and an excellent piece but I'm going to show you some tricks.

Start Result



End Result



Download this small file to see how it's done.

First, hide the top 3 layers (Final Touches, Bottom-Right Darken, Top-Left Brighten). Now, we'll go through step-by-step on what each layer does.

Un-hide Top-Left Brighten. This is a gradient from #e2f2df to transparent. It is from the top-left of the canvas to the bottom-right. What this layer does is provide a very small contrast boost to the areas where the gradient is and its main purpose is to generally boost the brightness up. Note it is on Soft Light.

Un-hide Bottom-Right Darken. This is a gradient from #282d37 to transparent. It is from the bottom-right of the canvas to the top-left. What this layer does is provide a very small contrast boost to the areas where the gradient is and its main purpose is to generally darken it up. Note it is on Soft Light.

Un-hide Final Touches. Above the statue, I used three small radial gradients of #e2f2df to transparent once again in order to brighten that are. Then, at where the deepest point of the left pool would be, I placed a radial gradient of #282d37 to transparent in order to darken it.

B.II.IIII. Smudging
 

Smudging is one of the most useful tools within tagging. It has become a distinctive style in which you use smudging to create streaks of colour and various lines. Here's an example.

Image property of dA deviant, ZCTgfx. Visit him!

This is an abstract piece while you can also use it for a complimentary effect.

Image property of dA deviant, Koepaard. Visit him!

First, let's go over the basics of smudging. Smudging is based on a principle in which that it takes pixels from where you smudge to where you want to smudge it to. The further you drag it, the less pixels being dragged. Doing smudging is using the basic principles of using a brush, it's the same. The difference is that smudging also has a strength, from 0 to 100% which decides how strong the smudging is initially.

Both circles are 25 pixels in diameter with 100 Hardness. The brush I used for smudging had the same setting but was 12 pixels in size. In the first circle, I smudged from the circle outwards. In the second, I smudged from the outside into the circle. Another thing to note is that the smudging strength was 75%.

You can also change the shape of the brush. This is how you get the most effective result using smudging. I usually use a chalk brush:

It is important to regularly change brush size and shape in a piece to get varied and interesting results.

B.III.0. Typography

Typography. So many attempt it but very little can get it right. There are several things to cover here. First, of course, is font. Second, is placement. These are the most important things about typography when it comes to tags.

B.III.I. Font

Font is that one thing that really defines text. Which is why you must take this part so seriously during the process. You can place them in 3 main categories:

Sans serif: These fonts are often modern and simplistic. It literally means 'without serif', serif being those ornaments on the edges of fonts like Times New Roman. Helvetica and Arial are the most common example.
Serif: Times New Roman is a good example of a serif font. They have those hooks at the edge of the letters, these are the serif.
Decorative: These are party fonts, dingbats and other fonts that are have more decoration than just serifs.

Here is my big list of good fonts that I currently have and use (a lot of the fonts are free from dafont.com so go there for resources):

Okay, this is my next point:

Do not use Comic Sans. Just don't. Ever. Please.

It's just such a bad font. In fact, I believe there's a 'Ban Comic Sans' movement.

B.III.II. General Tips on using Text Anywhere

Although this is the part on using typography in tags, I'll sidestep to using text in other situations. Let me first go to Powerpoint presentations. Those default templates aren't the nicest things in the world, are they? Here's some tips for doing it:

B.III.III. Tag Styles of Typography

There are many ways in which you can use typography within a tag. I like to split it into several categories:

Minimalist: Text that is used in very small amounts, simply as a decoration instead of a focal.
Supportive: Text that is similar to minimalist styles, but used at a larger size and for supporting the focal (or even as a sub-focal itself).
Focalized: This is very complicated, stylized or large text used as the focal itself.

Some examples of each style:

Minimalist

Image property of dA deviant, jugga-lizzle. Visit her!

Supportive


Image property of dA deviant, Narudan. Visit him!


Even though I wrote Minimalism on this tag, don't get confused. This is supportive text, and bordering onto focalized text.

Focalized


Image property of dA deviant, aznnerd09. Visit him!


Image property of dA deviant, taco-pirate. Visit him!

B.III.IIII. Placing Text

One of the more important things in using text. It's especially important when doing minimalist and supportive text.

Imagine a box around your focal like this:

The ideal place to put your text is on one of the four crosses there. Other acceptable positions are the middle vertical sections on the left or right of your focal or just above or below the crosses.

A common mistake in placing text is placing it in the corner. This is effective sometimes, but beginners should stay away from the corners because amateur typography along with corner placing makes it a useless feature to the piece. Remember that text should help your piece, not just as something to fill space.

C. The Encyclopedia of Tricks and Tips

C.I.0. Up, Down, Left, Right

Spriting is usually much more complicated than it seems. There are several tricks you can use in order to improve sprite scenes.

C.I.I. How to devamp sprite scenes

Navigate to B.II.III. Gradients and copy the piece into a canvas.

Then, take a middle green and a bright cyan as your foreground and background colours.

Now, make a new layer.

With the gradient tool, draw a gradient from top to bottom. Turn the layer blending mode to Hard Mix.
 

 

[Bassa]

Wow...

[.Rai]

That's good, right? Thanks!

[.Nu-13]

Finally a total noob tut. Me liek

[Azphreal]

Amazingness.

[JG.]

Have you had a different username before Cursed Reaction? I don't remember any good GFX'er by that name from before =P Also, this is definitly one of the nicer tuts I've seen on this site. Now it's just needs to get finished (Depth, C4D Usage, etc.).

[Legend Zero]

You actually took a trip through color theory? Kudos to you my friend, many kudos.

[.Rai]

Thanks, guys [img]http://public.yugiohcardmaker.net/public/style_emoticons/default/biggrin.gif[/img]

Yep, this will probably have quite a few updates. The tricks will be covered later but, at the moment, it's a total tutorial for newbies to GFX.

And, everyone seems to think I'm someone else for some reason. Yeah, I'm quite new to Showcase and a fairly new GFXer.

[Kuroda Kaito]

Wow cool tut, i love it especially about the color

[White Hollow]

Very good

[Madsen]

I should kill you for not notifying me you sexy bastard you.
f*** it I still love you.

EDIT:
next do http://en.wikipedia.org/wiki/Rule_of_thirds :3
also if you ever need help <3

[.Rai]

[quote name='Blesh' timestamp='1303753767' post='5167298']
I should kill you for not notifying me you sexy bastard you.
f*** it I still love you.
[/quote]

Thank you and I'll notify you if I use any other of your pieces.

...

[img]http://public.yugiohcardmaker.net/public/style_emoticons/default/laugh.gif[/img]

[.ko]

Very well done! Spoilers would be great though. An explanation on blending would also help a ton of people on this site.

[Twenty-five Zero Oh-oh]

Pretty cool tut.
One thing you may want to add is that blurring can also increase the sense of depth.

[.Rai]

[quote name='.ko' timestamp='1304185068' post='5179196']
Very well done! Spoilers would be great though. An explanation on blending would also help a ton of people on this site.
[/quote]

I just added the index so people can just navigate with Find. Blending probably will come later so be patient Though, I'm not the best expert so a couple of links about blending could help since I'm improving myself too.

[quote name='Twenty-five Zero Oh-oh' timestamp='1304186283' post='5179242']
Pretty cool tut.
One thing you may want to add is that blurring can also increase the sense of depth.
[/quote]

I was going to explain it in detail later but might as well mention it, thanks.

[Madsen]

You did the rule of thirds <3

[.Rai]

Yep Made sure I credited you this time. Lol.

Sorry for total lack of updating lately, everyone, just kinda busy with exams at the moment.

[Legend Zero]

Keep it coming man, you're my hero. I'd be far to lazy to do this. ;D

[Madsen]

[quote name='Cursed Reaction' timestamp='1305144034' post='5203229']
Yep Made sure I credited you this time. Lol.

Sorry for total lack of updating lately, everyone, just kinda busy with exams at the moment.
[/quote]

No need for that, just remind me when you add something new

[.Rai]

Bump. Updated Selections, halfway through Gradients, and added another section.

B. will carry on being updated and C. is some expert tips.

[.Rai]

Promise some updates in the next week.

[.Rai]

Finished up gradients, typography is on its way.

[Madsen]

I disagree; the diamond and angled gradients are great you just need to know how to use them.

[.Rai]

In my opinion, they have no practical use. Angled, maybe but diamond just seems cheesy to me.

I've never seen anyone use diamond gradients. Sometimes angled gradients, I've seen but it is a very hard tool to use.

Quick edits then

Edit: Found some tricks on angled gradients. Taken into notice.

[.Rai]

Another update is due at the end of this week.