Official Soldat Forums

Soldat Interface Mods & Mod Making => Modding Ideas / General Discussions => Topic started by: Taehl on June 03, 2009, 06:42:44 am

Title: Pixel art tutorial - Complete
Post by: Taehl 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/Image26.png)

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

The tutorial shows, step by step, how to start with this:
(http://sites.google.com/site/pixelperfectsite/art/pixel-art-tutorial/ref.jpg)

And end with this:
(http://sites.google.com/site/pixelperfectsite/art/pixel-art-tutorial/Image25.jpg)

Comments, critique, questions, praise? Feel free to post it.
Title: Re: Pixel art tutorial
Post by: homerofgods 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)
Title: Re: Pixel art tutorial
Post by: MattH 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).
Title: Re: Pixel art tutorial
Post by: Gnoblar 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 ;)
Title: Re: Pixel art tutorial
Post by: ~Niko~ on June 03, 2009, 09:46:16 am
you missed the outline.
Title: Re: Pixel art tutorial
Post by: Espadon 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.
Title: Re: Pixel art tutorial
Post by: ~Niko~ 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...
Title: Re: Pixel art tutorial
Post by: Espadon on June 03, 2009, 04:47:06 pm
"Usual" doesn't mean it's a requirement.

YOU make a tutorial.
Title: Re: Pixel art tutorial
Post by: Taehl 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.
Title: Re: Pixel art tutorial - Complete
Post by: Taehl 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.
Title: Re: Pixel art tutorial - Complete
Post by: Shivorken 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
Title: Re: Pixel art tutorial - Complete
Post by: Taehl 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.
Title: Re: Pixel art tutorial - Complete
Post by: Hair|Trigger 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)
Title: Re: Pixel art tutorial - Complete
Post by: Dairy on June 05, 2009, 04:43:43 am
Good job.

But I cannot see any fuckin' unzoomed picture which makes me wanna cry.
Title: Re: Pixel art tutorial - Complete
Post by: Taehl 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
Title: Re: Pixel art tutorial - Complete
Post by: Dairy 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.
Title: Re: Pixel art tutorial - Complete
Post by: MattH on June 05, 2009, 07:51:13 am
Dairy's right.... you should post some pics of it at its real size.


Title: Re: Pixel art tutorial - Complete
Post by: Taehl 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
Title: Re: Pixel art tutorial - Complete
Post by: Hair|Trigger 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.
Title: Re: Pixel art tutorial - Complete
Post by: Taehl 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.
Title: Re: Pixel art tutorial - Complete
Post by: Hair|Trigger on June 06, 2009, 01:54:17 am
30" monitor?  :/
Title: Re: Pixel art tutorial - Complete
Post by: Taehl on June 06, 2009, 02:30:04 am
Oi, I'd like one. I'm still running on a 20" CRT. Then again, one could make a comparison between the AK-74 and the M16, here. *shrug* At least I get fine resolution, great color, and no refresh rate problems.
Title: Re: Pixel art tutorial - Complete
Post by: Grimreck on July 18, 2009, 05:31:55 am
Briliant tut. Here I am using mspaint, and wondering how on earth people get such amazaing shading and realness in their weapons :P I really should have realised that PS was involved somewhere. Just and idea, you could do a tut for making the weapon-gfx aswell?
Title: Re: Pixel art tutorial - Complete
Post by: croat1gamer on July 23, 2009, 04:38:24 am
Do it the same way, just the resolution of the gfx needs to be much smaller (i recommend that you use the default picture, make it blank green and then start making it)
Least that is how i do it.
Im using Gimp for that, as its free, and has all the accessories you would need for making weapon-gfxes.
Title: Re: Pixel art tutorial - Complete
Post by: poodleinacan on December 08, 2011, 08:06:49 pm
RANDOM POST!
Title: Re: Pixel art tutorial - Complete
Post by: smiluu on December 22, 2011, 03:01:17 am
Here's another good tutorial for advanced pixel techniques (http://www.pixeljoint.com/forum/forum_posts.asp?TID=11299&PID=139318#139318) for anyone in need to improve, check it out!
Title: Re: Pixel art tutorial - Complete
Post by: Slasher on September 28, 2016, 11:13:13 am
Good tutorial