-
Brandon Rodriguez authored3f7b74dd
shading.html 20.48 KiB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name= "viewport" content= "width=device width, initial-scale=1.0">
<link rel= "stylesheet" href= "css/site.css">
<link rel= "stylesheet" href= "css/images.css">
<link rel= "stylesheet" href= "css/table.css">
<link rel= "stylesheet" href= "css/desktop.css" media= "only screen and (min-width: 1025px)">
<link rel= "stylesheet" href= "css/laptop.css" media= "only screen and (min-width: 769px) and (max-width: 1024px)">
<link rel= "stylesheet" href= "css/tablet.css" media= "only screen and (min-width: 321px) and (max-width: 768px)">
<link rel= "stylesheet" href= "css/phone.css" media= "only screen and (max-width: 320px)">
<title> Final Website: Art Things </title>
</head>
<body>
<div id= "wrapper" class= "bodyTexture">
<img src= "images/thumbs/LogoThumb.png" alt= "Website Logo" id= "headerLogo">
<div id= "leftColumn" class= "desktop roundedTop roundedBottom">
<nav class= "navMain">
<ul>
<span class= "navSec navHome">
<span class= "mainSec">
<li>
<a href= "index.html"> Home </a>
</li>
</span>
<span class= "minorSec">
<li>
<a href= "about.html"> About </a>
</li>
</span>
<span class= "minorSec">
<li>
<a href= "gallery.html"> Gallery </a>
</li>
</span>
<span class= "minorSec">
<li>
<a href= "contact.html"> Contact </a>
</li>
</span>
</span>
<span class= "navSec navTraditional">
<span class= "mainSec">
<li>
<a href= "traditional.html"> Traditional Art </a>
</li>
</span>
<span class= "minorSec">
<li>
<a href= "lineart.html"> Line Art </a>
</li>
</span>
<span class= "minorSec">
<li>
<a href= "shading.html"> Shading </a>
</li>
</span>
</span>
<span class= "navSec navDigital">
<span class= "mainSec">
<li>
<a href= "digital.html"> Digital Art </a>
</li>
</span>
<span class= "minorSec">
<li>
<a href= "warmups.html"> Warm Ups </a>
</li>
</span>
<span class= "minorSec">
<li>
<a href= "photoshop.html"> Photoshop </a>
</li>
</span>
</span>
</ul>
</nav>
</div>
<div id= "rightColumn" class= "roundedTop">
<header class= "roundedTop roundedBottom">
<hgroup>
<h1> <span id= "hLetter"> A</span>rt Things </h1>
<h3> Subtitle Stuff </h3>
</hgroup>
</header>
<nav class= "navMain mobile">
<ul>
<span class= "navSec navHome">
<span class= "mainSec">
<li>
<a href= "index.html"> Home </a>
</li>
</span>
<br>
<span class= "minorSec">
<li>
<a href= "about.html"> About </a>
</li>
</span>
<span class= "minorSec">
<li>
<a href= "gallery.html"> Gallery </a>
</li>
</span>
<span class= "minorSec">
<li>
<a href= "contact.html"> Contact </a>
</li>
</span> </span>
<span class= "navSec navTraditional">
<span class= "mainSec">
<li>
<a href= "traditional.html"> Traditional Art</a>
</li>
</span>
<br>
<span class= "minorSec">
<li>
<a href= "lineart.html"> Line Art </a>
</li>
</span>
<span class= "minorSec">
<li>
<a href= "shading.html"> Shading </a>
</li>
</span>
</span>
<span class= "navSec navDigital">
<span class= "mainSec">
<li>
<a href= "digital.html"> Digital Art </a>
</li>
</span>
<br>
<span class= "minorSec">
<li>
<a href= "warmups.html"> Warm Ups </a>
</li>
</span>
<span class= "minorSec">
<li>
<a href= "photoshop.html"> Photoshop </a>
</li>
<span class= "minorSec">
</span>
</ul>
</nav>
<div id= "bodyContainer" class= "roundedTop roundedBottom contentTexture">
<section id= "bodyHeader">
<h2> Shading </h2>
<hr>
</section>
<div id= "bodyContent">
<article>
<figure class= "floatRight" id= "shadingImg">
<img src= "images/full/Shading.jpg" alt= "Image with very obvious levels of shading">
<figcaption> Image with very obvious levels of shading. </figcaption>
</figure>
<p>   Shading and color are often the two major things that may draw our eye to an image. Shading alone can add depth, and create interest. However, let me just state now that no amount of shading can fix bad line art. By all means, color that shirt and shade that tree! But if your line art is somehow off, if that finger has odd perspective or you drew the bird's beak at a nonsensical angle, it will still look wrong even if you shade perfectly. This is a good thing to keep in mind if you begin shading and, no matter what you do, something just looks off. </p>
<p>   But how does one actually go about shading? What even is shading? Shading is the creation of shadows and highlights, via repeated strokes to brighten some areas of the picture and darken others. If done properly, this can make your 2D image appear 3D as it "pops" out of the canvas. </p>
<p>   In regards to how you create shading, I feel like a more logical, observation-based approach works best. Warning, this description might seem a bit technical. For a different take on this topic, feel free to google "shading basic shapes" or some variation of such. </p>
<table class= "desktop desktopTable">
<tr>
<th> Highlights </th>
<th> Shadows </th>
</tr>
<tr>
<td> 0 <span class= "tableColor"><span class= "table0">   </span></span>  </td>
<td> 5 <span class= "tableColor"><span class= "table5">   </span></span>  </td>
</tr>
<tr>
<td> 1 <span class= "tableColor"><span class= "table1">   </span></span>   </td>
<td> 5.5 <span class= "tableColor"><span class= "table55">   </span></span>   </td>
</tr>
<tr>
<td> 2 <span class= "tableColor"><span class= "table2">   </span></span>   </td>
<td> 6 <span class= "tableColor"><span class= "table6">   </span></span>   </td>
</tr>
<tr>
<td> 3 <span class= "tableColor"><span class= "table3">   </span></span>   </td>
<td>6.5 <span class= "tableColor"><span class= "table65">   </span></span>   </td>
</tr>
<tr>
<td> 4 <span class= "tableColor"><span class= "table4">   </span></span>   </td>
<td> 7 <span class= "tableColor"><span class= "table7">   </span></span>   </td>
</tr>
<tr>
<td> 5 <span class= "tableColor"><span class= "table5">   </span></span>   </td>
<td> 7.5 <span class= "tableColor"><span class= "table75">   </span></span>   </td>
</tr>
<tr>
<td> 6 <span class= "tableColor"><span class= "table6">   </span></span>   </td>
<td> 8 <span class= "tableColor"><span class= "table8">   </span></span>   </td>
</tr>
<tr>
<td> 7 <span class= "tableColor"><span class= "table7">   </span></span>   </td>
<td> 8.5 <span class= "tableColor"><span class= "table85">   </span></span>   </td>
</tr>
<tr>
<td> 8 <span class= "tableColor"><span class= "table8">   </span></span>   </td>
<td> 9 <span class= "tableColor"><span class= "table9">   </span></span>   </td>
</tr>
<tr>
<td> 9 <span class= "tableColor"><span class= "table9">   </span></span>   </td>
<td> 9.5 <span class= "tableColor"><span class= "table95">   </span></span>   </td>
</tr>
</table>
<p>   I use a system called "halfway to black." Essentially, this system uses greyscale, with 0 being pure white and 10 being pure black. You look at any given object and determine where the lightest part of it falls in the scale. Then you count halfway to black and that number is the darkest shade the object will ever be. I have a table <span class= "desktopInline">to the left</span><span class="mobileInline">below</span> to hopefully help explain, but bear with me. </p>
<p>   Let's say that you wish to draw and shade a cup. Because shading deals exclusively with greyscales, you can temporarily ignore whatever color the cup is. Simply look at the highlights on the cup and try to determine where it falls on the scale of 0 to 10. For hypothetical sake, let's pretend the cup ends up being an 8 on this scale. Pure black is 10 so halfway to black, between 8 and 10, would be a 9. This means that the darkest the shadows will ever be on this cup is 9, while the brightest highlights will be an 8. Now you can begin shading that cup and, as long as you keep between 8 and 9 on the greyscale, it'l look fine. </p>
<p>   Hypothetically, let's say you draw another cup this one is a 2 on the scale. You'd be looking at highlights of roughly 2 so the halfway mark (this time, between 2 and 10) would be a 6. This means, on this second cup, the brightest the cup will ever appear is a 2 and the darkest shadows will be a 6. As long as you stay between these shades of grey, this second cup will also look fine. </p>
<p>   For a beginner, this might be a little bit technical, I know. However I feel it's the best route to shade that I've encountered thus far. At the very least, it sure beats the standard "just look at the object and try to replicate it on paper. If it's dark on the object, it should be dark on your paper." </p>
<p>   I also note that, while this method of shading can be incredibly helpful to use as a guideline, it's not perfect. There's always exceptions to every rule and, as you progress as an artist, you'll begin to notice occasions where you can go ever so slightly darker or lighter than this method would otherwise let you. For more information on the "halfway to black" methodology, check out the shading videos at thegnomonworkshop.com. Link can be found in my about page. </p>
<table class= "mobile mobileTable">
<tr>
<th> Highlights </th> <td> 0 <span class= "tableColor"><span class= "table0">   </span></span> </td>
<td> 1 <span class= "tableColor"><span class= "table1">   </span></span> </td>
<td> 2 <span class= "tableColor"><span class= "table2">   </span></span> </td>
<td> 3 <span class= "tableColor"><span class= "table3">   </span></span> </td>
<td> 4 <span class= "tableColor"><span class= "table4">   </span></span> </td>
</tr>
<tr>
<th> Shadows </th>
<td> 5 <span class= "tableColor"><span class= "table5">   </span></span> </td>
<td> 5.5 <span class= "tableColor"><span class= "table55">   </span></span> </td>
<td> 6 <span class= "tableColor"><span class= "table6">   </span></span> </td>
<td> 6.5 <span class= "tableColor"><span class= "table65">   </span></span> </td>
<td> 7 <span class= "tableColor"><span class= "table7">   </span></span> </td>
</tr>
</table>
<table class= "mobile mobileTable">
<tr>
<th> Highlights </th>
<td> 5 <span class= "tableColor"><span class= "table5">   </span></span> </td>
<td> 6 <span class= "tableColor"><span class= "table6">   </span></span> </td>
<td> 7 <span class= "tableColor"><span class= "table7">   </span></span> </td>
<td> 8 <span class= "tableColor"><span class= "table8">   </span></span> </td>
<td> 9 <span class= "tableColor"><span class= "table9">   </span></span> </td>
</tr>
<tr>
<th> Highlights </th>
<td> 7.5 <span class= "tableColor"><span class= "table75">   </span></span> </td>
<td> 8 <span class= "tableColor"><span class= "table8">   </span></span> </td>
<td> 8.5 <span class= "tableColor"><span class= "table85">   </span></span> </td>
<td> 9 <span class= "tableColor"><span class= "table9">   </span></span> </td>
<td> 9.5 <span class= "tableColor"><span class= "table95">   </span></span> </td>
</tr>
</table>
</article>
</div>
<footer class= "roundedBottom">
<div class= "footerContent">
<img src= "images/thumbs/LogoThumb.png" alt= "Website Logo" id= "footerLogo">
<nav>
<ul>
<span class= "navSec navHome">
<span class= "mainSec">
<li>
<a href= "index.html"> Home </a>
</li>
</span>
<br>
<span class= "minorSec">
<li>
<a href= "about.html"> About </a>
</li>
</span>
<span class= "minorSec">
<li>
<a href= "gallery.html"> Gallery </a>
</li>
</span>
<span class= "minorSec"> <li>
<a href= "contact.html"> Contact </a>
</li>
</span>
</span>
<span class= "navSec navTraditional">
<span class= "mainSec">
<li>
<a href= "traditional.html"> Traditional </a>
</li>
</span>
<br>
<span class= "minorSec">
<li>
<a href= "lineart.html"> Line Art </a>
</li>
</span>
<span class= "minorSec">
<li>
<a href= "shading.html"> Shading </a>
</li>
</span>
</span>
<span class= "navSec navDigital">
<span class= "mainSec">
<li>
<a href= "digital.html"> Digital </a>
</li>
</span>
<br>
<span class= "minorSec">
<li>
<a href= "warmups.html"> Warm Ups </a>
</li>
</span>
<span class= "minorSec">
<li>
<a href= "photoshop.html"> Photoshop </a>
</li>
</span>
</span>
</ul>
</nav>
</div>
</footer>
</div>
</div>
</div>
</body>
</html>