aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorAkshay <[email protected]>2020-04-09 17:07:20 +0100
committerAkshay <[email protected]>2020-04-09 17:07:20 +0100
commitd4c835c33ed4ed9add5a13f0a4745cdc8491fcaf (patch)
tree416a366ddcead874ca58f9d9bb35bcf2b7144dfa
parent93618e9ff0419c5222b17bbb80b1a75e6cee425b (diff)
new post: Pixel art in GIMP
Diffstat
-rw-r--r--docs/posts/pixel_art_in_GIMP/index.html194
-rw-r--r--docs/style.css2
-rw-r--r--posts/pixel_art_in_GIMP.md134
3 files changed, 329 insertions, 1 deletions
diff --git a/docs/posts/pixel_art_in_GIMP/index.html b/docs/posts/pixel_art_in_GIMP/index.html
new file mode 100644
index 0000000..3122f13
--- /dev/null
+++ b/docs/posts/pixel_art_in_GIMP/index.html
@@ -0,0 +1,194 @@
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <link rel="stylesheet" href="/style.css">
5 <meta charset="UTF-8">
6 <meta name="viewport" content="initial-scale=1">
7 <meta content="#ffffff" name="theme-color">
8 <meta name="HandheldFriendly" content="true">
9 <meta property="og:title" content="Pixel Art In GIMP">
10 <meta property="og:type" content="website">
11 <meta property="og:description" content="a static site {for, by, about} me ">
12 <meta property="og:url" content="https://peppe.rs">
13 <link rel="icon" type="image/x-icon" href="/favicon.png">
14 <title>Pixel Art In GIMP · peppe.rs</title>
15 <body>
16 <div class="posts">
17 <div class="post">
18 <a href="/" class="post-end-link">⟵ Back</a>
19 <a class="stats post-end-link" href="https://raw.githubusercontent.com/nerdypepper/site/master/posts/pixel_art_in_GIMP.md
20">View Raw</a>
21 <div class="separator"></div>
22 <div class="date">
23 09/04 — 2020
24 <div class="stats">
25 <span class="stats-number">
26 53.54
27 </span>
28 <span class="stats-unit">cm</span>
29 &nbsp
30 <span class="stats-number">
31 4.7
32 </span>
33 <span class="stats-unit">min</span>
34 </div>
35 </div>
36 <span class="post-title">
37 Pixel Art In GIMP
38 </span>
39 <div class="post-text">
40 <p>I&#39;ve always been an admirer of pixel art, because of it&#8217;s
41simplicity and it&#39;s resemblance to bitmap font design.
42Recently, I decided to take the dive and make some art of my
43own.</p>
44
45<p>I used GIMP because I am fairly familiar with it. Aseprite
46seems to be the editor of choice for animated pixel art
47though.</p>
48
49<h3 id="Setting%20up%20the%20canvas">Setting up the canvas</h3>
50
51<p>Picking a canvas size is daunting. Too small, and you won&#8217;t
52be able to fit in enough detail to make a legible piece. Too
53big and you&#39;ve got too many pixels to work with!</p>
54
55<p>I would suggest starting out with anywhere between 100x100
56and 200x200. <a href="https://u.peppe.rs/u9.png">Here&#8217;s</a> a sample
57configuration. </p>
58
59<p>Sometimes I use a 10x10 grid, <code>View &#62; Show Grid</code> and <code>Edit &#62;
60Preferences &#62; Default Grid &#62; Spacing</code>, but that can get
61jarring at times, so I throw down a couple of guides, drag
62right or down from the left or top gutters for vertical and
63horizontal guides respectively.</p>
64
65<h3 id="Choosing%20a%20Brush">Choosing a Brush</h3>
66
67<p>The most important part of our setup is the brush. Use the
68Pencil Tool (<code>n</code> on the keyboard) for hard edge drawings.
69Here&#39;s a small comparison if you don&#39;t know the difference
70between a hard edge and a soft edge:</p>
71
72<p><img src="https://u.peppe.rs/kz.png" alt="hard edge vs soft edge" /></p>
73
74<p>I turn the size down all the way to 1 (<code>[</code> on the keyboard).
75Set <code>Dynamics</code> off. <a href="https://u.peppe.rs/Fs.png">Here&#8217;s</a> a
76sample brush configuration.</p>
77
78<h3 id="Laying%20down%20the%20pixels!">Laying down the pixels!</h3>
79
80<p>With the boring stuff out of the way, we can start with our
81piece. I usually follow a three step process:</p>
82
83<ul>
84<li>draw a rough outline</li>
85<li>fill in the shadows</li>
86<li>add highlights</li>
87</ul>
88
89<p>But this process are better explained with an example: an
90onigiri. Let us start off with a 100x100 canvas.</p>
91
92<h4 id="Drawing%20the%20outline">Drawing the outline</h4>
93
94<p>For the most part, our figure will be symmetric. If you are
95on GIMP 2.10+, you can take advantage of the Symmetry
96Painting feature. Go ahead and enable vertical symmetry,
97<code>Window &#62; Dockable Dialogs &#62; Symmetry Painting</code> and
98<code>Symmetry Painting &#62; Symmetry &#62; Mirror &#62; Vertical</code>. Your
99outline might look something like this:</p>
100
101<p><img src="https://u.peppe.rs/mn.png" alt="rice_outline" /></p>
102
103<p>Go ahead and fill it in with the fill tool (<code>Shift + b</code> on
104the keyboard), add in some seaweed as well, preferably on a
105different layer. You can toggle symmetry on and off to save
106yourself some time.</p>
107
108<p><img src="https://u.peppe.rs/xu.png" alt="with_seaweed" /></p>
109
110<h4 id="Shadows">Shadows</h4>
111
112<p>For now, let us focus on the shadows on the object itself,
113we&#39;ll come back to the shadows cast by the object on the
114surface later.</p>
115
116<p>Shadows on any surface always follow the shape of the
117surface. A spherical onigiri would have a circular shadow:</p>
118
119<p><img src="https://u.peppe.rs/FU.png" alt="riceball_shadow" /></p>
120
121<p>A couple of noticeable changes:</p>
122
123<p><strong>Layers</strong>: The layer containing the seaweed has been hidden.<br/>
124<strong>Color</strong>: The color of the shadow is just a slightly
125lighter version of the original object (reduce the Value on
126the HSV scale).<br/>
127<strong>Area</strong>: The shadow does not go all the way (notice the bottom
128edges). </p>
129
130<p>The shadow does not go all the way because we will be
131filling in that area with another, darker shadow! An image
132might explain better:</p>
133
134<p><img src="https://u.peppe.rs/Br.png" alt="shadow_all" /></p>
135
136<p>To emulate soft lights, reduce the value by 2 to 3 points
137every iteration. Notice how area <code>1</code> is much larger than
138area <code>4</code>. This is because an onigiri resembles an oblate
139spheroid, a sphere that is slightly fatter around the
140middle, and areas <code>1</code> and <code>2</code> catch more light than areas
141<code>3</code> and <code>4</code>.</p>
142
143<p>Do the same with the seaweed. The seaweed, being a smaller,
144flatter object, doesn&#39;t cast much of a shadow, so stop with
1451 or 2 iterations of the gradient:</p>
146
147<p><img src="https://u.peppe.rs/T3.png" alt="shadow_weed" /></p>
148
149<p>We&#39;re getting there!</p>
150
151<h4 id="Highlights">Highlights</h4>
152
153<p>This step handles the details on the strongly illuminated
154portions of the object. Seaweed is a bit glossy, lighten the
155edges to make it seem shiny. The rice is not as shiny, but
156it does form an uneven surface. Add in some shadows to
157promote the idea of rice grains. Here is the finished
158result:</p>
159
160<p><img src="https://u.peppe.rs/VE.png" alt="highlights" /></p>
161
162<h3 id="Finishing%20Touches">Finishing Touches</h3>
163
164<p>Some color correction and <code>a e s t h e t i c</code> Japanese text
165later, our piece is complete!</p>
166
167<p><img src="https://u.peppe.rs/cn.png" alt="small_onigiri" /></p>
168
169<p>Hold on, why is it so tiny? Well, that&#39;s because our canvas
170was 100x100, head over to <code>Image &#62; Scale Image</code>, set
171<code>Quality &#62; Interpolation</code> to <code>None</code> and scale it up to
172700x700, et voilà!</p>
173
174<p><img src="https://u.peppe.rs/CH.png" alt="big_onigiri" /></p>
175
176 </div>
177
178 <div class=intro>
179 Hi. <a href=https://peppe.rs/index.xml class=feed-button>Subscribe</a>
180 <p>I'm Akshay, I go by nerd or nerdypepper on the internet.</p>
181 <p>
182 I am a compsci undergrad, Rust programmer and an enthusiastic Vimmer.
183 I write open-source stuff to pass time. I also design fonts: scientifica, curie.
184 </p>
185 <p>Send me a mail at [email protected] or a message at [email protected].</p>
186 </div>
187
188 <a href="/" class="post-end-link">⟵ Back</a>
189 <a class="stats post-end-link" href="https://raw.githubusercontent.com/nerdypepper/site/master/posts/pixel_art_in_GIMP.md
190">View Raw</a>
191 </div>
192 </div>
193 </body>
194</html>
diff --git a/docs/style.css b/docs/style.css
index f95623f..898cbee 100644
--- a/docs/style.css
+++ b/docs/style.css
@@ -158,7 +158,7 @@ img {
158 max-width: 100%; 158 max-width: 100%;
159 border: 2px solid var(--dark-white); 159 border: 2px solid var(--dark-white);
160 border-radius: 0.4rem; 160 border-radius: 0.4rem;
161 box-shadow: 0 0 1.5rem 0.5rem rgba(0, 0, 0, 0.15); 161 box-shadow: 0 0 1.5rem 0.5rem rgba(0, 0, 0, 0.10);
162} 162}
163 163
164hr { 164hr {
diff --git a/posts/pixel_art_in_GIMP.md b/posts/pixel_art_in_GIMP.md
new file mode 100644
index 0000000..cd9e7ad
--- /dev/null
+++ b/posts/pixel_art_in_GIMP.md
@@ -0,0 +1,134 @@
1I've always been an admirer of pixel art, because of it's
2simplicity and it's resemblance to bitmap font design.
3Recently, I decided to take the dive and make some art of my
4own.
5
6I used GIMP because I am fairly familiar with it. Aseprite
7seems to be the editor of choice for animated pixel art
8though.
9
10### Setting up the canvas
11
12Picking a canvas size is daunting. Too small, and you won't
13be able to fit in enough detail to make a legible piece. Too
14big and you've got too many pixels to work with!
15
16I would suggest starting out with anywhere between 100x100
17and 200x200. [Here's](https://u.peppe.rs/u9.png) a sample
18configuration.
19
20Sometimes I use a 10x10 grid, `View > Show Grid` and `Edit >
21Preferences > Default Grid > Spacing`, but that can get
22jarring at times, so I throw down a couple of guides, drag
23right or down from the left or top gutters for vertical and
24horizontal guides respectively.
25
26### Choosing a Brush
27
28The most important part of our setup is the brush. Use the
29Pencil Tool (`n` on the keyboard) for hard edge drawings.
30Here's a small comparison if you don't know the difference
31between a hard edge and a soft edge:
32
33![hard edge vs soft edge](https://u.peppe.rs/kz.png)
34
35I turn the size down all the way to 1 (`[` on the keyboard).
36Set `Dynamics` off. [Here's](https://u.peppe.rs/Fs.png) a
37sample brush configuration.
38
39### Laying down the pixels!
40
41With the boring stuff out of the way, we can start with our
42piece. I usually follow a three step process:
43
44 - draw a rough outline
45 - fill in the shadows
46 - add highlights
47
48But this process are better explained with an example: an
49onigiri. Let us start off with a 100x100 canvas.
50
51#### Drawing the outline
52
53For the most part, our figure will be symmetric. If you are
54on GIMP 2.10+, you can take advantage of the Symmetry
55Painting feature. Go ahead and enable vertical symmetry,
56`Window > Dockable Dialogs > Symmetry Painting` and
57`Symmetry Painting > Symmetry > Mirror > Vertical`. Your
58outline might look something like this:
59
60![rice_outline](https://u.peppe.rs/mn.png)
61
62Go ahead and fill it in with the fill tool (`Shift + b` on
63the keyboard), add in some seaweed as well, preferably on a
64different layer. You can toggle symmetry on and off to save
65yourself some time.
66
67![with_seaweed](https://u.peppe.rs/xu.png)
68
69#### Shadows
70
71For now, let us focus on the shadows on the object itself,
72we'll come back to the shadows cast by the object on the
73surface later.
74
75Shadows on any surface always follow the shape of the
76surface. A spherical onigiri would have a circular shadow:
77
78![riceball_shadow](https://u.peppe.rs/FU.png)
79
80A couple of noticeable changes:
81
82**Layers**: The layer containing the seaweed has been hidden.
83**Color**: The color of the shadow is just a slightly
84lighter version of the original object (reduce the Value on
85the HSV scale).
86**Area**: The shadow does not go all the way (notice the bottom
87edges).
88
89The shadow does not go all the way because we will be
90filling in that area with another, darker shadow! An image
91might explain better:
92
93![shadow_all](https://u.peppe.rs/Br.png)
94
95To emulate soft lights, reduce the value by 2 to 3 points
96every iteration. Notice how area `1` is much larger than
97area `4`. This is because an onigiri resembles an oblate
98spheroid, a sphere that is slightly fatter around the
99middle, and areas `1` and `2` catch more light than areas
100`3` and `4`.
101
102Do the same with the seaweed. The seaweed, being a smaller,
103flatter object, doesn't cast much of a shadow, so stop with
1041 or 2 iterations of the gradient:
105
106![shadow_weed](https://u.peppe.rs/T3.png)
107
108We're getting there!
109
110#### Highlights
111
112This step handles the details on the strongly illuminated
113portions of the object. Seaweed is a bit glossy, lighten the
114edges to make it seem shiny. The rice is not as shiny, but
115it does form an uneven surface. Add in some shadows to
116promote the idea of rice grains. Here is the finished
117result:
118
119![highlights](https://u.peppe.rs/VE.png)
120
121### Finishing Touches
122
123Some color correction and `a e s t h e t i c` Japanese text
124later, our piece is complete!
125
126![small_onigiri](https://u.peppe.rs/cn.png)
127
128Hold on, why is it so tiny? Well, that's because our canvas
129was 100x100, head over to `Image > Scale Image`, set
130`Quality > Interpolation` to `None` and scale it up to
131700x700, et voilà!
132
133![big_onigiri](https://u.peppe.rs/CH.png)
134
generated by cgit v1.2.3 (git 2.25.1) at 2024-12-25 06:51:02 +0000