#line thickness

The line thickness of your artwork can have a huge impact on how it looks! Learn about different line weight styles in my tutorial video:

This is a little project I started working on with the intention of simulating the old vector displays of the arcades. Here is a picture of what I’m talking about (found on google):

I set out to try to create a similar aesthetic. But there was one big problem: there is no universal support in OpenGL (or any hardware-accelerated 3d library that I am aware of) for arbitrary line-thickness.

The Thick Line Problem

Put simply, the only guarantee is that your computer can draw 1-pixel-wide lines and single-pixel points with hardware acceleration. As you can see, those vector displays draw pretty thick lines and points, so this won’t do. I needed to come up with a solution that would allow for thicker lines in OpenGL (my 3D library of choice). This problem may seem like an easy one, but when you actually set out to fix it in an efficient and flexible way, you quickly realize how surprisingly difficult it really is.

Solution

I managed to hack something together over the course of a couple days--with lots of bugs, of course. Fixed most of the bugs, and viola!

I can now support cross-platform, hardware-accelerated, arbitrarily-thick lines. I’ll give you the juicy details on how it works next time; However, there are still more problems to solve. 

More Problems

ceavit replied to your photo: This video game does not convince me. Lineart...

You most definitely succeeded, this looks amazing, so many details! I had to do a double take to see it was you who drew it. Wow those lines, teach me how to lineart. 8( No really, care to share those articles in case you still have them somewhere?

Thanks! It took hours, no kidding, but I think the amount of details on that character actually helps make it so cool, so win/win?

Anyway, I had to rummage through this blog for the post I was thinking off. Lots of resources but /nothing/ is tagged so it's a pain to browse.

The article I remember reading is this one: Andrew Hussie: Inking tutorial. It's very complete and visual. It explains the theory though, not /how/ to do it per se since it's aimed at traditional inking, but it helps.

My own suggestion on the matter is to use the pen tool (in ps) for very long and even lines so you don't have a jag in them, and hand line the rest 'cuz you have more control over line weight. Also remember your light source.

And a niftly trick I like to use: Once I'm through with the lineart, before I resize it (to 50%) I will duplicate the lineart layer, merge the two copies and then select them, inverse the selection and hit delete once or twice. It makes your lines a little crisper and erases some of the small jags from hand lining. Resizing then does the rest!

For a long time when I wrote CSS and needed to put a line around something, my go-to code was:

border:1px solid black

 I just loved one pixel of pure solid black. Here it is in action:

  See. 1px of black border around everything! Then, when using IFTT I had a bit of a change of heart. I loved their bold blocks of large colour.

However, I felt there were two tricks they'd missed:

They didn't have any hover over effects. I've realised that this is really key on any sort of application, and web apps in particular. You really need to give the user some sort of feedback, or show them visually that they can interact with the button in some way. Not to mention it makes the site nice to use. The hover over effect on this page is my favourite part.

They don't have any borders.  I think this is a missed opportunity. Borders are a really nice effect. If I was designing this, I'd give those buttons a hover over effect and a thick border.

Now, I'm not saying they're wrong, I'm just saying that is how I'd do it.

I was a bit inspired by the IFTTT page when I had to design a little application at work the other day for logging tasks. Each of the large buttons below has a hover over effect when you mouse over it.

  The thick lines, I think, really bring this to life.

Browsing Tumblr themes the other day I found a really nice one that I've added to my personal Tumblr.

  The thickness here is 5px. Which is thicker than I'd go - but actually I love it.