aboutsummaryrefslogtreecommitdiff
path: root/docs
diff options
context:
space:
mode:
Diffstat (limited to 'docs')
-rw-r--r--docs/posts/pixel_art_in_GIMP/index.html194
-rw-r--r--docs/style.css2
2 files changed, 195 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 {
generated by cgit v1.2.3 (git 2.25.1) at 2024-12-25 17:59:46 +0000