Author Topic: Pixel art tutorial - Complete  (Read 19354 times)

0 Members and 1 Guest are viewing this topic.

Offline Taehl

  • Camper
  • ***
  • Posts: 253
  • When a fool hears about Tao, he just laughs.
    • Pixel Perfect
Pixel art tutorial - Complete
« on: June 03, 2009, 06:42:44 am »
I've written a tutorial on how to make pixel art from nothing up, the example being an interface-gfx gun for Soldat.


http://sites.google.com/site/pixelperfectsite/art/pixel-art-tutorial

The tutorial shows, step by step, how to start with this:


And end with this:


Comments, critique, questions, praise? Feel free to post it.
« Last Edit: June 05, 2009, 10:03:08 pm by Taehl »
"The balance is perfect. The flow is perfect. The speed is perfect. This... Is the absolute best mod on the site."  - mxyzptlk
"THIS IS PROBABLY... scratch that ...this IS the best mod I have seen before. Dang man, nice job!"  - Dorkey Dear
"Whoa! This is the best mod ever!!!"  - imacheater2k7      "Looks like a beaut. On a rating, 6/5"  - Radical Terrorist
New and improved: LandWarrior 3.0

Offline homerofgods

  • Soldat Beta Team
  • Rainbow Warrior
  • ******
  • Posts: 2012
  • We can do better!
Re: Pixel art tutorial
« Reply #1 on: June 03, 2009, 07:32:56 am »
Well first of all, it's really cool, so keep up the work.
- I didn't see how to get back to the toturial after cliking any of the ''welcome, art, code...'' (hard to find)
- the background is a bit disturbing, rather have nothing I think. (It get's overlapped)
« Last Edit: June 03, 2009, 07:36:11 am by homerofgods »

Offline MattH

  • Flagrunner
  • ****
  • Posts: 960
  • It's a real burn, being right so often.
Re: Pixel art tutorial
« Reply #2 on: June 03, 2009, 09:10:52 am »
Its good to point out that with most modern weapons there are 3 sections namely the stock the receiver and the barrel.

also the important role that lighting plays in making weapons look good.

and finally coloring and shading (which gos with the lighting).

Offline Gnoblar

  • Flagrunner
  • ****
  • Posts: 868
  • Wherever Justice needs to be served.
Re: Pixel art tutorial
« Reply #3 on: June 03, 2009, 09:42:36 am »
That is actually really useful. Sticky maybe?

I will definately refer to this later, I bookmarked it ;)

Offline ~Niko~

  • Rainbow Warrior
  • *****
  • Posts: 2410
Re: Pixel art tutorial
« Reply #4 on: June 03, 2009, 09:46:16 am »
you missed the outline.

Offline Espadon

  • Global Moderator
  • Rainbow Warrior
  • *****
  • Posts: 2606
  • GO BEAT CRAZY
    • Tabnir at deviantART
Re: Pixel art tutorial
« Reply #5 on: June 03, 2009, 02:41:15 pm »
You can apply an outline over it afterwards. You can also apply this method in an already-drawn outline. Stop trying to be a smartass.

Stickied.
CRYSO | HLT                        

    CRY0 | NAN0 2.1 | 0MEN 1.0 | PYR0 1.1M | B0RG 1.0

Offline ~Niko~

  • Rainbow Warrior
  • *****
  • Posts: 2410
Re: Pixel art tutorial
« Reply #6 on: June 03, 2009, 04:15:17 pm »
Stop trying to be a smartass.
Just wanted to point it out. Usually weapons have outlines on them, and he didn't draw 'em...

Offline Espadon

  • Global Moderator
  • Rainbow Warrior
  • *****
  • Posts: 2606
  • GO BEAT CRAZY
    • Tabnir at deviantART
Re: Pixel art tutorial
« Reply #7 on: June 03, 2009, 04:47:06 pm »
"Usual" doesn't mean it's a requirement.

YOU make a tutorial.
CRYSO | HLT                        

    CRY0 | NAN0 2.1 | 0MEN 1.0 | PYR0 1.1M | B0RG 1.0

Offline Taehl

  • Camper
  • ***
  • Posts: 253
  • When a fool hears about Tao, he just laughs.
    • Pixel Perfect
Re: Pixel art tutorial
« Reply #8 on: June 04, 2009, 02:56:32 am »
Holy - I'm off working on my computer for half a day and my unfinished tutorial is already stickied? Wow. I'll have to reinstall PSP and finish it up ASAP.

And yes, I add the outline as one of my finishing steps. I suppose you could do it earlier in the process, but I like doing it last so as to prevent any chance of messing it up with shading, changing shape, etc.
"The balance is perfect. The flow is perfect. The speed is perfect. This... Is the absolute best mod on the site."  - mxyzptlk
"THIS IS PROBABLY... scratch that ...this IS the best mod I have seen before. Dang man, nice job!"  - Dorkey Dear
"Whoa! This is the best mod ever!!!"  - imacheater2k7      "Looks like a beaut. On a rating, 6/5"  - Radical Terrorist
New and improved: LandWarrior 3.0

Offline Taehl

  • Camper
  • ***
  • Posts: 253
  • When a fool hears about Tao, he just laughs.
    • Pixel Perfect
Re: Pixel art tutorial - Complete
« Reply #9 on: June 04, 2009, 11:40:36 pm »
Sorry for the double-post, I just wanted to give this thread the "new" icon so everyone can notice that I've finished the tutorial now.

As I say in the first post, feel free to post any questions or comments.
"The balance is perfect. The flow is perfect. The speed is perfect. This... Is the absolute best mod on the site."  - mxyzptlk
"THIS IS PROBABLY... scratch that ...this IS the best mod I have seen before. Dang man, nice job!"  - Dorkey Dear
"Whoa! This is the best mod ever!!!"  - imacheater2k7      "Looks like a beaut. On a rating, 6/5"  - Radical Terrorist
New and improved: LandWarrior 3.0

Offline Shivorken

  • Soldier
  • **
  • Posts: 246
  • Full Blood Azn
Re: Pixel art tutorial - Complete
« Reply #10 on: June 05, 2009, 12:54:09 am »
The way I do the final step is to just run the sharpen tool through appropriate parts of the image to give it that more 'realistic'? look. I'm not very familiar with picture editing so I may have just repeated what you said XD

On a side note, when i view your site, something on my desktop (i THINK its my monitor ...) starts making an annoying high frequency noise ...
If i switch to a different tab, the noise goes away, tab back to you site and sounds comes back! wth?

Nice tutorial.

10/10
[/url]

Offline Taehl

  • Camper
  • ***
  • Posts: 253
  • When a fool hears about Tao, he just laughs.
    • Pixel Perfect
Re: Pixel art tutorial - Complete
« Reply #11 on: June 05, 2009, 01:12:44 am »
Thank you. As for your method, yes, it's somewhat the same thing, just a little more automated (which means it's easier, but therefore gives you less control) - sharpen boosts local contrast, which will bring out the difference in color and lightness between adjacent pixels. So yea, basically the same thing.

As for the high-pitched noise... I have no idea. Weird.
"The balance is perfect. The flow is perfect. The speed is perfect. This... Is the absolute best mod on the site."  - mxyzptlk
"THIS IS PROBABLY... scratch that ...this IS the best mod I have seen before. Dang man, nice job!"  - Dorkey Dear
"Whoa! This is the best mod ever!!!"  - imacheater2k7      "Looks like a beaut. On a rating, 6/5"  - Radical Terrorist
New and improved: LandWarrior 3.0

Offline Hair|Trigger

  • Veteran
  • *****
  • Posts: 1595
  • HT|
Re: Pixel art tutorial - Complete
« Reply #12 on: June 05, 2009, 03:00:39 am »
That's a hot tutorial

I don't do it that way, in fact i'm kinda quick and sloppy (I do it in the same way as speed painting, cept with the pencil tool :P)

Player since late 2007

Offline Dairy

  • Veteran
  • *****
  • Posts: 1289
  • (F)ornication (U)nder (C)onsent of the (K)ing
    • http://www.soldatforums.com/index.php?topic=571.0
Re: Pixel art tutorial - Complete
« Reply #13 on: June 05, 2009, 04:43:43 am »
Good job.

But I cannot see any fuckin' unzoomed picture which makes me wanna cry.

Offline Taehl

  • Camper
  • ***
  • Posts: 253
  • When a fool hears about Tao, he just laughs.
    • Pixel Perfect
Re: Pixel art tutorial - Complete
« Reply #14 on: June 05, 2009, 06:23:12 am »
1) Open the picture you want to see
2) Resize it
3) ? ? ?
4) Profit
4) Stop bugging me to make pictures that would be a centimeter long on my screen :P
"The balance is perfect. The flow is perfect. The speed is perfect. This... Is the absolute best mod on the site."  - mxyzptlk
"THIS IS PROBABLY... scratch that ...this IS the best mod I have seen before. Dang man, nice job!"  - Dorkey Dear
"Whoa! This is the best mod ever!!!"  - imacheater2k7      "Looks like a beaut. On a rating, 6/5"  - Radical Terrorist
New and improved: LandWarrior 3.0

Offline Dairy

  • Veteran
  • *****
  • Posts: 1289
  • (F)ornication (U)nder (C)onsent of the (K)ing
    • http://www.soldatforums.com/index.php?topic=571.0
Re: Pixel art tutorial - Complete
« Reply #15 on: June 05, 2009, 07:38:44 am »
Wait what ?

I'm buggin' you ?

You're the one who is makin' this, so if somebody needs help it's your work to do. The weapon will look much different when you unzoom it. I have some experience with that. You can be sure of that.

Offline MattH

  • Flagrunner
  • ****
  • Posts: 960
  • It's a real burn, being right so often.
Re: Pixel art tutorial - Complete
« Reply #16 on: June 05, 2009, 07:51:13 am »
Dairy's right.... you should post some pics of it at its real size.



Offline Taehl

  • Camper
  • ***
  • Posts: 253
  • When a fool hears about Tao, he just laughs.
    • Pixel Perfect
Re: Pixel art tutorial - Complete
« Reply #17 on: June 05, 2009, 10:00:32 pm »
I meant it as a joke, really, seeing as how I've been back only a few days and have had half a dozen requests to stop zooming my images already.

Don't worry, it looks fine in-game. You should know I'm nearly obsessive about playtesting my stuff - in this case, I ran Soldat nearly 20 times while I was doing the final light/shadow balancing.

Well, whatever. I've added an in-game, unzoomed pic to the end of the tutorial, and to the first post of this thread. So quitcherbitchin' :P
"The balance is perfect. The flow is perfect. The speed is perfect. This... Is the absolute best mod on the site."  - mxyzptlk
"THIS IS PROBABLY... scratch that ...this IS the best mod I have seen before. Dang man, nice job!"  - Dorkey Dear
"Whoa! This is the best mod ever!!!"  - imacheater2k7      "Looks like a beaut. On a rating, 6/5"  - Radical Terrorist
New and improved: LandWarrior 3.0

Offline Hair|Trigger

  • Veteran
  • *****
  • Posts: 1595
  • HT|
Re: Pixel art tutorial - Complete
« Reply #18 on: June 05, 2009, 10:48:34 pm »
It's because we don't play soldat with 10x zoom, it's tradition to show the un-zoomed weapons aswell so people can get their bearings before they download something with no idea how it'll turn out.

Player since late 2007

Offline Taehl

  • Camper
  • ***
  • Posts: 253
  • When a fool hears about Tao, he just laughs.
    • Pixel Perfect
Re: Pixel art tutorial - Complete
« Reply #19 on: June 05, 2009, 11:24:25 pm »
I understand. On the other hand, it's rather useless to me, as that unzoomed preview (for example) is barely a cubic centimeter on my screen.
"The balance is perfect. The flow is perfect. The speed is perfect. This... Is the absolute best mod on the site."  - mxyzptlk
"THIS IS PROBABLY... scratch that ...this IS the best mod I have seen before. Dang man, nice job!"  - Dorkey Dear
"Whoa! This is the best mod ever!!!"  - imacheater2k7      "Looks like a beaut. On a rating, 6/5"  - Radical Terrorist
New and improved: LandWarrior 3.0