Pixelation
Critique => Pixel Art => Pixel Art Feature Chest => Topic started by: Arne on August 30, 2013, 08:09:33 pm
-
With my internet down the whole day, I actually got some work done on my pixel art tutorial! In one segment I talk about common "doesn't look so good"s, and then tried to include some of the more blatant ones in one image.
(http://androidarts.com/pixtut/PixelArtTut%20Start.gif) ( (http://androidarts.com/pixtut/PixelArtTut%20Start 1x.gif) @1x)
I've made my own "fixed" version of this and written about the process in detailed steps, but before I post that I think it would be interesting to see what other people would do to it (should be a quick edit since it's just a few tiles and a character). I'd like to feature the "guest edits" people do just to give this particular segment of the tutorial a bit more... range. So, if you have the time, I'd like to see your edit and perhaps a few (<5) sentences (nothing too lengthy) about some choice that you made which is of particular interest.
The original shows some kind of 16px front+top-down RPG with no particular color or tile count restriction. Do keep the dimensions for comparison's sake. I left the grass field 2x2 to demonstrate simple grass tiling. We have the typical cliffs/mountains and trees/forest and a lake/ocean. The character is a bit taller than a tile, and there's some sort of gem drop/treasure (feel free to nudge). The assumption here is that the author just wants his pixel graphics to look "good" but whatever edit that you make will be fine and probably ponderworthy to the reader.
-------------
& Minidump
-------------
Unrelated random Garius ZOID
(http://androidarts.com/zoids/ZOIDS%20Garius%20Sprite.gif)
Something from the line art thread. Wasn't quite happy with it so I didn't want to bump. Probably needs minor... enhancing saturation points.
(http://androidarts.com/other/Monster2.gif)
I started editing Megaman (girl?), but felt that it became too noisy.
(http://androidarts.com/megaman/megaman%20edit.gif)
-
(http://i.imgur.com/3g7Vzy4.gif)
Quickly became unsatisfied with this but thought I'd show anyway. Perhaps at least it fixes some of the issues :p
Gradients and unnecessary colors were prevalent in the original, that was the first issue I addressed with each asset. Instead I focused on tightly placed pixels and kept a light source direction in mind to convey form in the small area given. Focus was placed on how different surface materials reflect light to better convey them. Single pixel noise was minimized to allow the eye rest in areas that would have large expanses such as the grass and water.
-
Damn, that first image was scary coming from you, since I didn't read the upper line first :lol:
I'll be doing my edit soon, no hard feelings if it isn't of enough quality to include in the tutorial (Ryumaru's is awesome) :y:
-
Nice! That was quite different from my version. Bit of a muscle-baby... all grown up, isn't he ;)
And I'm happy for whatever comes my way actually.
-
If that was for a real comment, I'd start saying that the fixme-picture needs sizes to be sorted out. A house should be large enough so that people can go through the door, and a tree is usually taller than a man. Do you expect things like that to get fixed as well ?
-
Nice! That was quite different from my version. Bit of a muscle-baby... all grown up, isn't he ;)
And I'm happy for whatever comes my way actually.
Musclebaby all the way. That mockup could have just been replaced with fire emblem gba sprites and tiles, some of the best examples of this scale sort of thing.
-
Here's where an hour of pixel-pushing brought me (whoops, gem is asymmetrical):
(http://i254.photobucket.com/albums/hh109/Yellow_Slime/2013-08-31_2-1.png) (http://i254.photobucket.com/albums/hh109/Yellow_Slime/2013-08-31_2.gif)
Anything I have to say is mostly a repeat of Ryumaru's... I reduced the amount of colors (maybe way too much) and created assets in a 3/4 perspective instead of the previous flat look. Obviously I did without the (irregular) black lines. Overall I went for a simplistic look and didn't go into detail, both to save time and because I probably wouldn't pull it off :lol:
-
PypeBros> No, the iconographical liberties sort of belong to the suggested format (e.g. early Dragon Quest, SaGa, Final Fantasy). This exercise is more about the... pixling of stuff.
YellowLime> Good, good, I'll take it! I like its pleasant softer mood.
I started on a little game engine. The idea is that Bloenard, our hero, can wander from screen to screen and collect gems (nothing fancy). The game will skin each screen using tile sheets found in the gfx folder, so the game world will be a haphazard melange of styles.
(http://androidarts.com/pixtut/Bloenard-v02b.png)
Edit: Rewrote the beach tiling so it only uses 4 tiles divided into 4 corners (8*8px). No one likes to pixel tons of beaches and this made it easier to write a safe water generator. Added movable character and gem drops.
Sprite sheet. Had to throw some rhomboid pattern compulsion in there. Duplicates of some frames because I support randomization (though this sheet doesn't use it). Unsure if ocean will animate, because the beach won't.
(http://androidarts.com/pixtut/Original.gif)
-
Awesome idea!
I focused on removing unnecessary colors, black lines and single pixel noise (although the water speculars were kinda nice =)). Tile colors were desaturated compared to sprites. Duplicated tiles were used to make double versions to try to break the grid.
(https://dl.dropboxusercontent.com/u/17710292/Arne_mini_sheet_edit_fickludd.png)
Will you be posting mockups of these later? I'm unsure how the tiling in mine works out.
-
Interesting idea, here's my take:
(http://i25.photobucket.com/albums/c62/markusrosse/pixel/markus_rosse_arne_pixeltut_2x.gif) (http://i25.photobucket.com/albums/c62/markusrosse/pixel/markus_rosse_arne_pixeltut_1x.gif)
Thoughts:
I don't care about color-count (36 up to 43). Because the tile are so small, clarity is most important. Each tile has its own sub-palette, no reuse of colors. Increases readability through color-coding. For the pixel-clusters: I use mainly flats, tried to avoid gradients and single-pixel noise. No black outlines or lines inside forms to separate different parts. The design of the objects are symbols, abstracted forms which should convey a general idea, not something specific. The perspective changed from side-view to somewhat top-down-front-ish. Light comes from above, object cast shadows underneath them to increase the feel of 3d space. The character is 23px out of 24px high, so it can bob 1px while walking.
-
Fickludd> :D http://androidarts.com/pixtut/FickluddSkin.png
Rosse> Similar solution to mine for the trees there! But I noticed now that I'm the only one using outlines so heavily and my grass is by far the busiest. I tried to stay pretty close to my original though.
Here's a WIP of the Pixel Art Tutorial (http://androidarts.com/pixtut/pixelart.htm) page. It's very much promoting my (current) style, so I'll have to address that later.
-
Love your ^ tutorial page Arne thankyou.
Never done this before so here's my attempt:
(http://i1126.photobucket.com/albums/l615/Decrosion/iconographa_zps0f6fd0d1.png)
Removed all noise and kept contrast limited to points of interest such as the edges of game space.
Added a red cape to the character to help him pop.
Character probably still needs more brightness but I'm out of time.
I also did this but went back to smoother shadows as grass is maybe too noisy?
(http://i1126.photobucket.com/albums/l615/Decrosion/iconographb_zps89d5d9f4.png)
Progress:
(http://i1126.photobucket.com/albums/l615/Decrosion/iconograph3_zps26c28890.gif)
-
I'm inexperienced with tiling, so I've probably messed up the water edge ones somewhere :yell:
(http://i.imgur.com/qzUeSRB.gif)
(http://i.imgur.com/YV2jT1O.gif)
I tried to keep bubblegum sorts of colours, just less eye-burning than the original. Also simplify, remove single-pixel noise, etc.
-
Here's my half hour effort.
(http://i43.tinypic.com/1zqgca0.png)
What I did:
CLEANED UP THE OUTLINES
DESATURATED THE COLOURS
Chose a light source
Drew in form
Made some bad grass
Adjusted hues slightly
Made some awful water
Decided that 1 gem wasn't enough, so made 3
Added some shadows
Made an awful effort at a character as i cannot draw them
Tidied things up slightly.
-
(http://img594.imageshack.us/img594/7577/o7cl.png)
Generally, I made the shapes and forms more interesting. I also went for something that could look like you're in a mystical, dangerous world. I went with pines trees because they're great for environments that is pretty much apathetic to you, while deciduous trees are more extroverted and open. I changed the house from being a plain square house to something a little more unconventional.
Possible directions to take this farther are adding cast shadows and polishing up the colors, possibly bouncelight, maybe.
-
I'll include these next update! :D
Here's a download link for Bloenard v0.32 (Built on my new Windows 7 machine) if you guys want to try out your tiling. It's very bare bones so far, but I have plans... Plans!
--- INSTRUCTIONS ---
Arrow keys to walk.
Space to teleport to a new world (while standing on a pad/gate whatever). Or just hit "r" anywhere.
Escape to quit! X button doesn't work yet!
Replace "Source.bmp" (case sensitive) with your own but keep the mask color (85, 170, 143) and the exact same dimensions. I don't check for bad files so mess up = crash.
-
That got pretty nightelfish, Pix3M =).
The tutorial is really nice Arne. If you want more diversity (you mention it in the bottom of the tut), perhaps some of the other great pixellers here would care to make green versions of the topics were you only have one green made?
-
(http://i.imgur.com/FSOmaIO.png)
(http://i.imgur.com/Fon3Fbo.png)
Messed around with shapes and colors. It would've been up sooner but my computer lost power and I hadn't saved... :D . I had fun doing it at least!
-
I'll include these next update! :D
Here's a download link for Bloenard v0.32 (http://androidarts.com/pixtut/Bloenard032.zip) (Built on my new Windows 7 machine) if you guys want to try out your tiling. It's very bare bones so far, but I have plans... Plans!
--- INSTRUCTIONS ---
Arrow keys to walk.
Space to teleport to a new world (while standing on a pad/gate whatever). Or just hit "r" anywhere.
Escape to quit! X button doesn't work yet!
Replace "Source.bmp" (case sensitive) with your own but keep the mask color (85, 170, 143) and the exact same dimensions. I don't check for bad files so mess up = crash.
I can't test this right now but did I break rules by having the tree hang out the top into the next tile?
Can we have different tiles for vertical rows of cliffs?
Or maybe I should redo it to me more of an icon of a mountain like everyone else's.
-
I have been busy with other things, so no update to the tutorial page yet. I'll add those new pixel-overs later, but if I get too many I'll have to create a subpage for them :o
The engine only supports overlaps and transparencies for the character+gem row atm. I was thinking that I'd keep it simple. It's more of a thing targeted for very basic 16*16 px tiling. I did this 16*12px mockup and I'm thinking of doing something along those lines later:
(http://androidarts.com/zelda/Reldon2.gif)
-
Couldn't resist playing with that mini stuff. Stole all your best designs and tweaked them! ;) Lottsa colors, mostly due to separate palettes for most items. Iso house! works ok me thinks, right? Character is 1 pixel too wide...didn't wanna compromise it :/
(http://hem.bredband.net/ricfha/misc/arnemini.png)
-
Hmmm. You can probably kill the symmetry if you do a flippable walk frame with shifting arms.
-
Iterated this thing. The previous version didn't tile very well. Decided to add some fogged BG tiles for the enemy encounters... if I get that far. Time to sit down and update the tutorial now though.
(http://androidarts.com/pixtut/Blentard2.gif)
-
(http://i42.tinypic.com/2ldd40h.png)
Had fun doing this
-
A dark saviour appears?
I added it to the tut page with is now updated. Added a bit about Daleks and the new guest pieces, but not much else.
-
I'ts the one eyed vampire Count Mondego, he lost his eye when Edmond Dantès killed him, but his noble blood and rage made him rise from the grave to wreak unholy vengeance. His task is to steal all of the treasure of the Count of Monte Cristo and then crush him like the filthy peasant he is. ;D
-
But will he safely navigate the sharp rocks that Monte Cristo has placed throughout the land?
Some progress towards the next release. An 8x8 seed map is generated for the random world to force some persistence. Telepads near the edges are used for travel. The idea is that the game will load a different map skin for each region, and monster pictures from a monster/ folder. Aim is to make it a super simple Dragon Quest game. Unsure what houses will do.
(http://androidarts.com/pixtut/Blentard_v041.png)
Edit: fixed concave beaches (badly aligned) and gave house perspective.
-
arrr, didn't do the edges of the water. No time to change it now...
(http://i.imgur.com/O1pFUPr.png)
Tried to use less saturated colors. I just like less saturated colors.
-
(http://androidarts.com/other/Monster2.gif)
I LOVE the way you rendered this thing.
The way you suddenly make the shadows desaturated is both bold and subtle. You dont really notice it explicitly real size, but up close one sees how secure you were of that choice
Cant even imagine what you mean by enhancing saturation points cause I cant see anything wrong with it. Please finish it and blow my mind =)
-
I felt the gray wasn't working on that one. By enhancing saturation points, I mean... when going from dark to light, (and probably pretty desaturated), or just from one form to another, having a 50% blend is a bit boring. By adding some saturation you can say, hey, this thing has some color dimension too. I don't really mean saturated terminators (on a an overexposed red planet you'd only see black where shadowed, white where lit, and say, martian red on the terminator because it's the only place where you can fit in a normally saturated color. I'm more talking about sort of whimsical points of light, chromatic aberration perhaps. Actual color, perhaps. Subsurface scattering, perhaps. Self illumination, perhaps. It doesn't matter so much. It's just to bring in more color dimensionality.
(http://androidarts.com/misc/Filterfeeder.jpg)
I never uploaded this one for some reason.
(http://androidarts.com/misc/junk1.jpg)
Basically I'm talking about a more subtle version of painting with correct values but garbled colors.
A related discussion is what I'd call... color textures... color fields which consists of many colors upon closer inspection, i.e. dithering in pixel art, but with the intent of creating something more than a color rather than just a new value. The impressionists and pointillists did it with gusto. http://en.wikipedia.org/wiki/File:Henri_de_Toulouse-Lautrec_056.jpg It's pretty common to see artists from any time mix in blue textures into warmer colors but digital art tends to be cleaner nowadays. Paul Bonner works traditionally and likes to use a copper teal: http://www.amazon.co.uk/Out-Forests-The-Paul-Bonner/dp/1845767055 - It's sometimes a plain flat hue shift but I think the double (or triple) color texture has a different feel to it so I wouldn't call that a hue shift. It's visible on the brushstroke level.
Needless to say, this kinda stuff is difficult to do in pixel art with a small palette and so few pixels to work with. Can't quite do the dither-color thing on a tiny NES sprite (pixels are too big) and you wouldn't want to waste a color on just a saturated dot. Can play with adjacencies though, maybe colored outlines.
-
There's a whole lot of stuff goin' in here, I'm catching up on the tutorial for now (which is excellent!)
I shrunk the guy down to tile size for that overworld map flavour; I'll try and rework that later along with the expanded tilemap and and a colour edit.
My little dude is a dungaree-d botanist. Also, Mondego shot himself rather than face the music and was equally as low-born as Dantes?
(http://androidarts.com/pixtut/PixelArtTut%20Start%201x.gif)(http://i.imgur.com/rVfWAZi.gif)
Alright, so:
Bit of a counterpoint to some of the more naturalistic edits; I tried to stay pretty faithful for the most part and kept or increased the more symbolic stuff as well the NES-ey saturation & black lines #no palette change #thug life. Gave stuff of higher gameplay importance higher contrast (hue/value) and tooned up textures to differentiate material; rock is angular, water is wavy, foliage bushy etc.
-
@facet I believe you are referring to Gérard de Villefort, the prosecutor. Fernand Mondego fights Edmond in a duel at the end where he loses.
At least that is what I remember from the movie The Count of Monte Cristo (2002) which is the one I'm referring to.
-
hm, I assumed the original plot (http://en.wikipedia.org/wiki/The_Count_of_Monte_Cristo#The_Count_of_Monte_Cristo)
*Edited my original post and removed repeats from previous guest examples; that wasn't nearly brief, in too much of a hurry!
-
(http://i.imgur.com/6bQWZgU.gif)
I had fun playing with this one. Sought a balance between abstract and representational while keeping the color count low and emphasizing the shapes.
-
Thank you so much Arne! I loved reading trough that and it's exactly what I loved about that sprite. Doing that in sprites IS really hard, and I think you did just enough to make it work.
Sometimes I tend to force it and then shit doesnt look like anything. Even at high resolutions.
Though, isnt that kind of color mixing exactly what pixelart is about at higher resolutions or background images, such as DemoScene people like Cyclone? (I dont really know any other than him) or hell, just good old Helm. I guess we dont get to the point where we have a mesh of 2 or hueshifts working together but we do emphasize it a lot
-
Simple NESy thing.
Cheated with 8x8 tiles on the trees and rocks for overlap, given that 8x8s are already used for the shore.
(http://img.uninhabitant.com/blowhard.png)
EDIT: Minor update.
(http://img.uninhabitant.com/blowhard2.png)
-
that simple nesy thing looks amazing, I tried doing one aswell but your tiles look much less like a pattern whereas mine is just very apparent I think
(http://i.imgur.com/S3u9SbG.png)
-
Oh, more? I'll include those next update. I actually did a very similar stonehenge gate for my GB version (reference to Valkyrie no Bouken).
(http://androidarts.com/pixtut/Blentard043.png)
Blentard v0.43 (http://androidarts.com/pixtut/Blentard043.zip) now supports reloading gfx while in-game, and up to 8 sheets which are assigned randomly to each region. I included 4 sample regions.
I don't know much about demoscene art. I liked the logos the most. The figurative art (I saw) was mostly copies or badly drawn women or screaming psycho faces.
-
Lots of nice stuff in this thread! ;D
(http://androidarts.com/pixtut/Blentard043.png)
I especially like the mix of saturated and more subdued colors you tend to use. As for improvements, there's a noticeable grid in the water tiles now. You have the brighter lines forming the grid and a bunch of large highlights lining up vertically and horizontally which emphasizes it. I also think the gem looks strange, volumetrically speaking. Most of it is a flat color plane, while the highlight gives the impression of a protruding shape casting a shadow on the lower part, like a stop-sign sliced into and bent out of shape or a flat nautilus shell bent along the vertical center line.
-
I think this thread need a bit of sci-fi:
(http://25.media.tumblr.com/7078b66a60e11ad65667eb1cdd1bb86a/tumblr_mtd6f93xkC1sqpgx7o2_250.png)
Wip, char is hard to read, I'll fix it.
+(How it looks in Blentard (http://24.media.tumblr.com/05fd74fbba7b384240bab8ae66e12c3c/tumblr_mtd6f93xkC1sqpgx7o1_500.png)).