Java-Gaming.org Hi !
Featured games (81)
games approved by the League of Dukes
Games in Showcase (513)
Games in Android Showcase (119)
games submitted by our members
Games in WIP (576)
games currently in development
News: Read the Java Gaming Resources, or peek at the official Java tutorials
 
    Home     Help   Search   Login   Register   
Pages: [1]
  ignore  |  Print  
  Any advice on pixel art?  (Read 1088 times)
0 Members and 1 Guest are viewing this topic.
Offline SauronWatchesYou
« Posted 2014-06-05 20:20:04 »

Hi all! Simple question really, where should I begin with pixel art?

I enjoy making graphics as much as I do coding and it's a nice to take a break and just make a little art, the issue is... i'm not that good Tongue I also struggle with sprite sheets for my animations as I feel that I can't draw the same thing over and over without it looking weird or not looking like the original design.

Any tips/tricks are welcome! Smiley

P.S Here is a cookie from Google Tongue

Offline BrendynT

Junior Duke


Medals: 3
Projects: 1
Exp: 7-9 months


CRTL + SHIFT + F = OP!


« Reply #1 - Posted 2014-06-05 20:26:45 »

You should probably start by learning color theory, so that you can find a good balance of color in your pixels. Also, learn about dithering and Anti-Aliasing both help to make your pixel art look better. But really there is no wrong way to do art, you just do it. You'll get better over time.

- The Firm Night Owl
Offline BurntPizza
« Reply #2 - Posted 2014-06-05 20:28:07 »

Here's a cool page with a ton of stuff for indies, including a section on aesthetics which includes pixel art (linked): http://gamedevelopment.tutsplus.com/articles/fantastic-gamedev-tutorials-from-across-the-web--gamedev-3384#aesthetics

About colors, there is a article in there about how to procedurally choose pleasing color palettes.
Games published by our own members! Check 'em out!
Legends of Yore - The Casual Retro Roguelike
Offline JVallius
« Reply #3 - Posted 2014-06-05 20:32:06 »

http://makegames.tumblr.com/post/42648699708/pixel-art-tutorial

And like Nike said, Just Do It

Offline kpars

JGO Wizard


Medals: 90
Projects: 4
Exp: 3 years


Extreme Typist.


« Reply #4 - Posted 2014-06-05 20:51:04 »

Usually when I create pixel-art, I have a small process that I follow.

I start off by getting a basic outline of the shape I'm trying to draw, then I fill in my base colours. After that I work on the shading + dithering process. Once that's all done, I finish it off by replacing my black outline with something friendlier on the eyes. Simple, but gets the job done.

I also tried messing around with the image you had posted earlier, here's my version of it:


Hopefully this helped Smiley

- Jev

Offline BurntPizza
« Reply #5 - Posted 2014-06-05 20:53:07 »

That cheap drop shadow... works every time.
Offline Drenius
« Reply #6 - Posted 2014-06-05 20:58:58 »

But also no deep black anymore.
Offline BurntPizza
« Reply #7 - Posted 2014-06-05 21:02:52 »

Yeah the outline coordinating with the rest of the palette + the lighting and shadow for 3D makes it pop.

Make awesome pixel art with this 1 silly trick!
Graphic designers hate him!
Offline Rayvolution

JGO Kernel


Medals: 216
Projects: 2
Exp: 1 year


Resident Crazyman


« Reply #8 - Posted 2014-06-05 21:05:00 »

ohm nom nom, cookie;



Believe it or not, a cookie is a pain to make. There's not much to work with. Tongue

I'm out-the-door to class though, so I can't explain my method very well. But basically it's all about tricking the eye to make parts of it pop by using slightly lighter/darker borders. (Basically just expanding on what kpar said a few replies back)

- Raymond "Rayvolution" Doerr.
Retro-Pixel Castles - Survival Sim/Builder/Roguelike!
LIVE-STREAMING DEVELOPMENT: http://www.twitch.tv/SG_Rayvolution
Offline SauronWatchesYou
« Reply #9 - Posted 2014-06-05 21:21:31 »

Thank you all for your replies Cheesy

I love the idea of the no more black outlines and also the shadow/highlighting Smiley I guess that practice is key and that it will improve over time (like code Cheesy).

Any advice on fun things to make for practising? Maybe I could try and improve my golden coins? Smiley
Games published by our own members! Check 'em out!
Legends of Yore - The Casual Retro Roguelike
Offline HeroesGraveDev

JGO Kernel


Medals: 269
Projects: 11
Exp: 2 years


┬─┬ノ(ಠ_ಠノ)(╯°□°)╯︵ ┻━┻


« Reply #10 - Posted 2014-06-05 21:26:57 »

When trying to randomly distribute features on pixel art, try using the n-queens problem. (http://en.wikipedia.org/wiki/Eight_queens_puzzle)

I've used it quite a few times and it works pretty well at avoiding tiling artefacts.

And black outlines are a no-no. Try to use a darker shade wherever possible. (Obviously if the base colour is a dark grey, you may have to use black)

Offline BurntPizza
« Reply #11 - Posted 2014-06-05 21:31:33 »

Another distribution technique is Poisson Disc sampling. Usually pretty easy to emulate by hand, and not too difficult to do procedurally too if that's your thing.
Offline SauronWatchesYou
« Reply #12 - Posted 2014-06-05 21:56:07 »

I made this coin just now Smiley did the same idea as the cookie and I think it worked pretty well.

Offline SauronWatchesYou
« Reply #13 - Posted 2014-06-06 06:49:07 »

I have tried different styles of my coin and I am seeing improvements so thank you all for your advice and links Smiley

I have one final issue which I'm not sure how to solve. Most of my art is 32x32 and I prefer to draw the images smaller and then resize them up to the 32x32. This works fine for the most part  but when the images go above a certain width/height they become a little distorted. The max I could get my coin to was around 25x25.

Do I simply need to just draw my art bigger or is it possible to resize?

Offline BurntPizza
« Reply #14 - Posted 2014-06-06 06:54:02 »

Resize only by powers of two (on both axes, don't change the aspect ratio) and use nearest neighbor filtering.
E.g. 16x16 -> 32x32 -> 64x64 or 3x7 -> 6x14 -> 12x28 etc.
Offline SauronWatchesYou
« Reply #15 - Posted 2014-06-06 07:01:48 »

Thanks! That sorted the issue ^_^
Offline Rayvolution

JGO Kernel


Medals: 216
Projects: 2
Exp: 1 year


Resident Crazyman


« Reply #16 - Posted 2014-06-06 07:09:56 »

Think of it this way; If you have 1 pixel, you can't expand it over 1 and a half pixels of space. That's what you're trying to do with you don't scale by factors of 2. For example, a 8x8 image scaled to 20x20 (so 2.5x scale) would mean you'll be increasing each of the pixel sizes by 2.5 pixels, and there's no where for that .5 of pixel data to go because there's no such thing as half a pixel. So based on various levels of black magic, it scales each pixels by either 2x or 3x depending on what it thinks is best. But if you scale an 8x8 image to 16x16, 24x24 or 32x32 you'll get perfect 2x, 3x and 4x scale, respectively.

(EDIT: Note that this is based on Nearest Neighbor filtering, the others do calculations and mix pixel colors together to try to give you the smoothest image possible)

- Raymond "Rayvolution" Doerr.
Retro-Pixel Castles - Survival Sim/Builder/Roguelike!
LIVE-STREAMING DEVELOPMENT: http://www.twitch.tv/SG_Rayvolution
Offline SauronWatchesYou
« Reply #17 - Posted 2014-06-07 06:26:38 »

That makes a lot of sense, I see what the issue is now Smiley. I've been messing around with the scaling and things and it's much easier now, hopefully I can make my art better now Cheesy
Offline princec

JGO Kernel


Medals: 404
Projects: 3
Exp: 16 years


Eh? Who? What? ... Me?


« Reply #18 - Posted 2014-06-07 09:58:50 »

My advice is... don't do pixel art!

Cas Smiley

Pages: [1]
  ignore  |  Print  
 
 

 

Add your game by posting it in the WIP section,
or publish it in Showcase.

The first screenshot will be displayed as a thumbnail.

Longarmx (37 views)
2014-10-17 03:59:02

Norakomi (28 views)
2014-10-16 15:22:06

Norakomi (24 views)
2014-10-16 15:20:20

lcass (28 views)
2014-10-15 16:18:58

TehJavaDev (52 views)
2014-10-14 00:39:48

TehJavaDev (54 views)
2014-10-14 00:35:47

TehJavaDev (42 views)
2014-10-14 00:32:37

BurntPizza (64 views)
2014-10-11 23:24:42

BurntPizza (36 views)
2014-10-11 23:10:45

BurntPizza (77 views)
2014-10-11 22:30:10
Understanding relations between setOrigin, setScale and setPosition in libGdx
by mbabuskov
2014-10-09 22:35:00

Definite guide to supporting multiple device resolutions on Android (2014)
by mbabuskov
2014-10-02 22:36:02

List of Learning Resources
by Longor1996
2014-08-16 10:40:00

List of Learning Resources
by SilverTiger
2014-08-05 19:33:27

Resources for WIP games
by CogWheelz
2014-08-01 16:20:17

Resources for WIP games
by CogWheelz
2014-08-01 16:19:50

List of Learning Resources
by SilverTiger
2014-07-31 16:29:50

List of Learning Resources
by SilverTiger
2014-07-31 16:26:06
java-gaming.org is not responsible for the content posted by its members, including references to external websites, and other references that may or may not have a relation with our primarily gaming and game production oriented community. inquiries and complaints can be sent via email to the info‑account of the company managing the website of java‑gaming.org
Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines | Managed by Enhanced Four Valid XHTML 1.0! Valid CSS!