How do they do those micro graphics?!

talk design
1

hello,

I’ve been hacking away for years now and remain dumbfounded how kirupa and others make the crispy micro type and icons on such sites as kirupa.com!

I have a great depth of Photoshop experience and have tried to replicate the micro-pixel art with no luck. I’ve also downloaded several “micro” typefaces but they never look as crisp and lovely as the type on kirupa’s nav buttons!

Can someone please let me in on the fun?

I’d be in your debt!:wink:

eric

2

Here’s a pretty good tutorial on how to make those pixel buttons. =)

3

Use the 1px pencil tool.

Go to Window/Document/New Window (I believe that is the location in PS7) to open a new window of the same image. Zoom all the way in in that window and start clicking away.

You can see the result in the other window that is not zoomed in.

Oh yeah, and it is usually best to optimize pixel art as .gif images.

Or since I just reread your post and think I misunderstood, you can get GREAT pixel fonts for Photoshop from http://www.04.jp.org/ you just need to make sure anti-aliasing is turned off for your text and it is set to size 6 or 8 (depending on the font)

4

And make sure Strong/Crisp/Smooth aren’t turned on :slight_smile:

5

Couldn’t get it to work.

Based on the responses I see so far, it is shaping up to be not much of a mystery in terms of tools (good ol PS) but much mystery remains in the nack for micro artistry!

:sigh:

6

The real buttons tutorial Eilsoe used is here…

http://robouk.mchost.com/tuts/tutorial.php?tutorial=microbuttons2

And for the graphics… just look up tutorials for pixel art. That is what it is called. You zoom in all the way and take the 1px pencil tool and draw pixel by pixel. Tediously fun.

7

RoboUK is the one of the best places I’ve seen for Photoshop tutorials. Especially his one on drawing pixelated borders, buttons and panels. :slight_smile: