From 93618e9ff0419c5222b17bbb80b1a75e6cee425b Mon Sep 17 00:00:00 2001 From: Akshay Date: Thu, 9 Apr 2020 21:36:45 +0530 Subject: improve subtitle styles, publish new post! --- docs/index.html | 19 +++++++- docs/index.xml | 141 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++ generate.sh | 2 +- 3 files changed, 160 insertions(+), 2 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 @@ peppe.rs

n

-

nerdypepper's μblog

+

nerdypepper's μblog

@@ -28,6 +28,23 @@

Send me a mail at nerdy@peppe.rs or a message at nerd@irc.rizon.net.

+ + + + +
+
+ 09/04 — 2020 +
+ + Pixel Art In GIMP + + 		+ + 4.7 + + min +
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 @@ en-us Creative Commons BY-NC-SA 4.0 +Pixel Art In GIMP +

I've always been an admirer of pixel art, because of it’s +simplicity and it's resemblance to bitmap font design. +Recently, I decided to take the dive and make some art of my +own.

+ +

I used GIMP because I am fairly familiar with it. Aseprite +seems to be the editor of choice for animated pixel art +though.

+ +

Setting up the canvas

+ +

Picking a canvas size is daunting. Too small, and you won’t +be able to fit in enough detail to make a legible piece. Too +big and you've got too many pixels to work with!

+ +

I would suggest starting out with anywhere between 100x100 +and 200x200. Here’s a sample +configuration.

+ +

Sometimes I use a 10x10 grid, View > Show Grid and Edit > +Preferences > Default Grid > Spacing, but that can get +jarring at times, so I throw down a couple of guides, drag +right or down from the left or top gutters for vertical and +horizontal guides respectively.

+ +

Choosing a Brush

+ +

The most important part of our setup is the brush. Use the +Pencil Tool (n on the keyboard) for hard edge drawings. +Here's a small comparison if you don't know the difference +between a hard edge and a soft edge:

+ +

hard edge vs soft edge

+ +

I turn the size down all the way to 1 ([ on the keyboard). +Set Dynamics off. Here’s a +sample brush configuration.

+ +

Laying down the pixels!

+ +

With the boring stuff out of the way, we can start with our +piece. I usually follow a three step process:

+ +
    +
  • draw a rough outline
    • +
  • fill in the shadows
    • +
  • add highlights
    • +
+ +

But this process are better explained with an example: an +onigiri. Let us start off with a 100x100 canvas.

+ +

Drawing the outline

+ +

For the most part, our figure will be symmetric. If you are +on GIMP 2.10+, you can take advantage of the Symmetry +Painting feature. Go ahead and enable vertical symmetry, +Window > Dockable Dialogs > Symmetry Painting and +Symmetry Painting > Symmetry > Mirror > Vertical. Your +outline might look something like this:

+ +

rice_outline

+ +

Go ahead and fill it in with the fill tool (Shift + b on +the keyboard), add in some seaweed as well, preferably on a +different layer. You can toggle symmetry on and off to save +yourself some time.

+ +

with_seaweed

+ +

Shadows

+ +

For now, let us focus on the shadows on the object itself, +we'll come back to the shadows cast by the object on the +surface later.

+ +

Shadows on any surface always follow the shape of the +surface. A spherical onigiri would have a circular shadow:

+ +

riceball_shadow

+ +

A couple of noticeable changes:

+ +

Layers: The layer containing the seaweed has been hidden.
+Color: The color of the shadow is just a slightly +lighter version of the original object (reduce the Value on +the HSV scale).
+Area: The shadow does not go all the way (notice the bottom +edges).

+ +

The shadow does not go all the way because we will be +filling in that area with another, darker shadow! An image +might explain better:

+ +

shadow_all

+ +

To emulate soft lights, reduce the value by 2 to 3 points +every iteration. Notice how area 1 is much larger than +area 4. This is because an onigiri resembles an oblate +spheroid, a sphere that is slightly fatter around the +middle, and areas 1 and 2 catch more light than areas +3 and 4.

+ +

Do the same with the seaweed. The seaweed, being a smaller, +flatter object, doesn't cast much of a shadow, so stop with +1 or 2 iterations of the gradient:

+ +

shadow_weed

+ +

We're getting there!

+ +

Highlights

+ +

This step handles the details on the strongly illuminated +portions of the object. Seaweed is a bit glossy, lighten the +edges to make it seem shiny. The rice is not as shiny, but +it does form an uneven surface. Add in some shadows to +promote the idea of rice grains. Here is the finished +result:

+ +

highlights

+ +

Finishing Touches

+ +

Some color correction and a e s t h e t i c Japanese text +later, our piece is complete!

+ +

small_onigiri

+ +

Hold on, why is it so tiny? Well, that's because our canvas +was 100x100, head over to Image > Scale Image, set +Quality > Interpolation to None and scale it up to +700x700, et voilà!

+ +

big_onigiri

 +https://peppe.rs/posts/pixel_art_in_GIMP/ +Thu, 09 Apr 2020 15:56:00 +0000 +https://peppe.rs/posts/pixel_art_in_GIMP/ + + Rapid Refactoring With Vim

Last weekend, I was tasked with refactoring the 96 unit tests on diff --git a/generate.sh b/generate.sh index 2b875cc..9950f41 100755 --- a/generate.sh +++ b/generate.sh @@ -73,7 +73,7 @@ cat > ./docs/index.html << EOF peppe.rs

n

-

nerdypepper's μblog

+

nerdypepper's μblog

EOF -- cgit v1.2.3