# How do they do those micro graphics?!

**URL:** <https://forum.kirupa.com/t/how-do-they-do-those-micro-graphics/13198>\
**Category:** design\
**Created:** [February 10, 2003, 6:51am UTC](https://forum.kirupa.com/t/how-do-they-do-those-micro-graphics/13198 "2003-02-10T06:51:37Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![eric1969](https://avatars.discourse-cdn.com/v4/letter/e/ccd318/32.png) [@eric1969](https://forum.kirupa.com/u/eric1969)\
**Post date:** [February 10, 2003, 6:51am UTC](https://forum.kirupa.com/t/how-do-they-do-those-micro-graphics/13198/1 "2003-02-10T06:51:37Z")

</div>

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](http://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!😉

eric

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [February 10, 2003, 7:04am UTC](https://forum.kirupa.com/t/how-do-they-do-those-micro-graphics/13198/2 "2003-02-10T07:04:08Z")

</div>

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

> **[De domeinnaam Photoshoppen.nl is te koop.](http://www.photoshoppen.nl/)**
>
> Deze mooie domeinnaam kan al over een paar minuten van jou zijn. Betalen gaat eenvoudig en vertrouwd via iDEAL. Direct na de betaling ontvang je de verhuiscode per e-mail en kun je aan de slag.

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [February 10, 2003, 7:04am UTC](https://forum.kirupa.com/t/how-do-they-do-those-micro-graphics/13198/3 "2003-02-10T07:04:39Z")

</div>

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/](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)

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [February 10, 2003, 7:14am UTC](https://forum.kirupa.com/t/how-do-they-do-those-micro-graphics/13198/4 "2003-02-10T07:14:12Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [February 10, 2003, 7:52am UTC](https://forum.kirupa.com/t/how-do-they-do-those-micro-graphics/13198/5 "2003-02-10T07:52:03Z")

</div>

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:

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [February 10, 2003, 7:54am UTC](https://forum.kirupa.com/t/how-do-they-do-those-micro-graphics/13198/6 "2003-02-10T07:54:25Z")

</div>

The real buttons tutorial Eilsoe used is here…

[http://robouk.mchost.com/tuts/tutorial.php?tutorial=microbuttons2](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.

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [February 10, 2003, 11:09am UTC](https://forum.kirupa.com/t/how-do-they-do-those-micro-graphics/13198/7 "2003-02-10T11:09:25Z")

</div>

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