aboutsummaryrefslogtreecommitdiff
path: root/docs
diff options
context:
space:
mode:
Diffstat (limited to 'docs')
-rw-r--r--docs/index.html19
-rw-r--r--docs/index.xml141
2 files changed, 159 insertions, 1 deletions
diff --git a/docs/index.html b/docs/index.html
index 8ab0d02..6000e3d 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -14,7 +14,7 @@
14<title>peppe.rs</title> 14<title>peppe.rs</title>
15<body> 15<body>
16 <h1 class="heading">n</h1> 16 <h1 class="heading">n</h1>
17 <h4 class="date">nerdypepper's μblog</h4> 17 <h4 class="subheading">nerdypepper's μblog</h4>
18 <div class="posts"> 18 <div class="posts">
19 <div class="post"> 19 <div class="post">
20 20
@@ -31,6 +31,23 @@
31 <tr> 31 <tr>
32 <td class=table-post> 32 <td class=table-post>
33 <div class="date"> 33 <div class="date">
34 09/04 — 2020
35 </div>
36 <a href="/posts/pixel_art_in_GIMP" class="post-link">
37 <span class="post-link">Pixel Art In GIMP</span>
38 </a>
39 </td>
40 <td class=table-stats>
41 <span class="stats-number">
42 4.7
43 </span>
44 <span class=stats-unit>min</span>
45 </td>
46 </tr>
47
48 <tr>
49 <td class=table-post>
50 <div class="date">
34 01/04 — 2020 51 01/04 — 2020
35 </div> 52 </div>
36 <a href="/posts/rapid_refactoring_with_vim" class="post-link"> 53 <a href="/posts/rapid_refactoring_with_vim" class="post-link">
diff --git a/docs/index.xml b/docs/index.xml
index 283d364..9d9a594 100644
--- a/docs/index.xml
+++ b/docs/index.xml
@@ -12,6 +12,147 @@
12 <language>en-us</language> 12 <language>en-us</language>
13 <copyright>Creative Commons BY-NC-SA 4.0</copyright> 13 <copyright>Creative Commons BY-NC-SA 4.0</copyright>
14 <item> 14 <item>
15<title>Pixel Art In GIMP</title>
16<description><p>I&#39;ve always been an admirer of pixel art, because of it&#8217;s
17simplicity and it&#39;s resemblance to bitmap font design.
18Recently, I decided to take the dive and make some art of my
19own.</p>
20
21<p>I used GIMP because I am fairly familiar with it. Aseprite
22seems to be the editor of choice for animated pixel art
23though.</p>
24
25<h3 id="Setting%20up%20the%20canvas">Setting up the canvas</h3>
26
27<p>Picking a canvas size is daunting. Too small, and you won&#8217;t
28be able to fit in enough detail to make a legible piece. Too
29big and you&#39;ve got too many pixels to work with!</p>
30
31<p>I would suggest starting out with anywhere between 100x100
32and 200x200. <a href="https://u.peppe.rs/u9.png">Here&#8217;s</a> a sample
33configuration. </p>
34
35<p>Sometimes I use a 10x10 grid, <code>View &#62; Show Grid</code> and <code>Edit &#62;
36Preferences &#62; Default Grid &#62; Spacing</code>, but that can get
37jarring at times, so I throw down a couple of guides, drag
38right or down from the left or top gutters for vertical and
39horizontal guides respectively.</p>
40
41<h3 id="Choosing%20a%20Brush">Choosing a Brush</h3>
42
43<p>The most important part of our setup is the brush. Use the
44Pencil Tool (<code>n</code> on the keyboard) for hard edge drawings.
45Here&#39;s a small comparison if you don&#39;t know the difference
46between a hard edge and a soft edge:</p>
47
48<p><img src="https://u.peppe.rs/kz.png" alt="hard edge vs soft edge" /></p>
49
50<p>I turn the size down all the way to 1 (<code>[</code> on the keyboard).
51Set <code>Dynamics</code> off. <a href="https://u.peppe.rs/Fs.png">Here&#8217;s</a> a
52sample brush configuration.</p>
53
54<h3 id="Laying%20down%20the%20pixels!">Laying down the pixels!</h3>
55
56<p>With the boring stuff out of the way, we can start with our
57piece. I usually follow a three step process:</p>
58
59<ul>
60<li>draw a rough outline</li>
61<li>fill in the shadows</li>
62<li>add highlights</li>
63</ul>
64
65<p>But this process are better explained with an example: an
66onigiri. Let us start off with a 100x100 canvas.</p>
67
68<h4 id="Drawing%20the%20outline">Drawing the outline</h4>
69
70<p>For the most part, our figure will be symmetric. If you are
71on GIMP 2.10+, you can take advantage of the Symmetry
72Painting feature. Go ahead and enable vertical symmetry,
73<code>Window &#62; Dockable Dialogs &#62; Symmetry Painting</code> and
74<code>Symmetry Painting &#62; Symmetry &#62; Mirror &#62; Vertical</code>. Your
75outline might look something like this:</p>
76
77<p><img src="https://u.peppe.rs/mn.png" alt="rice_outline" /></p>
78
79<p>Go ahead and fill it in with the fill tool (<code>Shift + b</code> on
80the keyboard), add in some seaweed as well, preferably on a
81different layer. You can toggle symmetry on and off to save
82yourself some time.</p>
83
84<p><img src="https://u.peppe.rs/xu.png" alt="with_seaweed" /></p>
85
86<h4 id="Shadows">Shadows</h4>
87
88<p>For now, let us focus on the shadows on the object itself,
89we&#39;ll come back to the shadows cast by the object on the
90surface later.</p>
91
92<p>Shadows on any surface always follow the shape of the
93surface. A spherical onigiri would have a circular shadow:</p>
94
95<p><img src="https://u.peppe.rs/FU.png" alt="riceball_shadow" /></p>
96
97<p>A couple of noticeable changes:</p>
98
99<p><strong>Layers</strong>: The layer containing the seaweed has been hidden.<br/>
100<strong>Color</strong>: The color of the shadow is just a slightly
101lighter version of the original object (reduce the Value on
102the HSV scale).<br/>
103<strong>Area</strong>: The shadow does not go all the way (notice the bottom
104edges). </p>
105
106<p>The shadow does not go all the way because we will be
107filling in that area with another, darker shadow! An image
108might explain better:</p>
109
110<p><img src="https://u.peppe.rs/Br.png" alt="shadow_all" /></p>
111
112<p>To emulate soft lights, reduce the value by 2 to 3 points
113every iteration. Notice how area <code>1</code> is much larger than
114area <code>4</code>. This is because an onigiri resembles an oblate
115spheroid, a sphere that is slightly fatter around the
116middle, and areas <code>1</code> and <code>2</code> catch more light than areas
117<code>3</code> and <code>4</code>.</p>
118
119<p>Do the same with the seaweed. The seaweed, being a smaller,
120flatter object, doesn&#39;t cast much of a shadow, so stop with
1211 or 2 iterations of the gradient:</p>
122
123<p><img src="https://u.peppe.rs/T3.png" alt="shadow_weed" /></p>
124
125<p>We&#39;re getting there!</p>
126
127<h4 id="Highlights">Highlights</h4>
128
129<p>This step handles the details on the strongly illuminated
130portions of the object. Seaweed is a bit glossy, lighten the
131edges to make it seem shiny. The rice is not as shiny, but
132it does form an uneven surface. Add in some shadows to
133promote the idea of rice grains. Here is the finished
134result:</p>
135
136<p><img src="https://u.peppe.rs/VE.png" alt="highlights" /></p>
137
138<h3 id="Finishing%20Touches">Finishing Touches</h3>
139
140<p>Some color correction and <code>a e s t h e t i c</code> Japanese text
141later, our piece is complete!</p>
142
143<p><img src="https://u.peppe.rs/cn.png" alt="small_onigiri" /></p>
144
145<p>Hold on, why is it so tiny? Well, that&#39;s because our canvas
146was 100x100, head over to <code>Image &#62; Scale Image</code>, set
147<code>Quality &#62; Interpolation</code> to <code>None</code> and scale it up to
148700x700, et voilà!</p>
149
150<p><img src="https://u.peppe.rs/CH.png" alt="big_onigiri" /></p></description>
151<link>https://peppe.rs/posts/pixel_art_in_GIMP/</link>
152<pubDate>Thu, 09 Apr 2020 15:56:00 +0000</pubDate>
153<guid>https://peppe.rs/posts/pixel_art_in_GIMP/</guid>
154</item>
155<item>
15<title>Rapid Refactoring With Vim</title> 156<title>Rapid Refactoring With Vim</title>
16<description><p>Last weekend, I was tasked with refactoring the 96 unit 157<description><p>Last weekend, I was tasked with refactoring the 96 unit
17tests on 158tests on
generated by cgit v1.2.3 (git 2.25.1) at 2024-12-25 19:07:13 +0000