Pixelation

Critique => Pixel Art => Topic started by: AdamAtomic on March 17, 2007, 06:34:13 pm

Title: pixel personal site + retro game mockup [updated]
Post by: AdamAtomic on March 17, 2007, 06:34:13 pm
(http://adam.lastchancemedia.com/me.gif)

Part of a splash graphic for the new version of my personal site; inspired by old lucas arts games + craig mccracken/genndy tartakovsky.  I want a flat, graphic designery style, but I don't want pros to look at it and go "wow what a shading copout" either - so any pros out there, if you want to weigh in and tell me whether or not this makes me look like I'm lazy, I'd appreciate it!  Icons and other such stuff will be arriving forthwith...

Oh also it will be displayed at 2x on the site.  Thanks!
Title: Re: pixel self portrait + other stuff
Post by: Squirrelsquid on March 17, 2007, 06:53:18 pm
realy nice so far! Maybe some AA with the already present darker colors would look good, but I kinda dig the flat look... still I'd be curiouse how it would look with some slight cell-shading?

keep it up!
Title: Re: pixel self portrait + other stuff
Post by: Helm on March 17, 2007, 06:54:15 pm
I'm no pro, but if my opinion can help, here it is. What you're trying to do is a very difficult thing. Clean, spartan design usually is a problem with pixel art because - yes - it just looks like fast work, let's move on. I suggest just a bit more shading, a subtle highlight, showcasing some pleasing aa work. Not too much, don't need to amigafy this, but don't just leave it with primaries either.

(http://www.locustleaves.com/dfh.png)

Title: Re: pixel self portrait + other stuff
Post by: eck on March 17, 2007, 06:55:29 pm
one thing might do would be to add some selout with those detail colors, depending on what the background color on the website is.  

if your website is a light color though, this is fine, and looks very well done.
Title: Re: pixel self portrait + other stuff
Post by: Helm on March 17, 2007, 06:57:48 pm
Selout = evil.
Title: Re: pixel self portrait + other stuff
Post by: AdamAtomic on March 17, 2007, 07:04:46 pm
thx for the feedback guys - yeah selout, or really outlining at all is kind of not gonna happen on this piece.  partly because outlines have become a crutch for me as an artist, and partly cuz it just won't suit the effect i'm going for.  helm thank you for the edit, i had some similar shading like that earlier, I will keep playing around with it.  I like the highlight on the hoodie stringss, and the hood and sleeve bend shadows do a LOT without changing the style of the piece, I might just steal those...

Also here is basically how the image will be used:  http://adam.lastchancemedia.com/  More or less just floating there.  There will be little toys littered around the imaginary ground plane.  Any votes on whether or not there shoudl be some kind of real background or environment behind the character?

Thanks again everybody

EDIT - I updated the sprite to include some of those hot edits:

(http://adam.lastchancemedia.com/me.gif)
Title: Re: pixel self portrait + other stuff
Post by: ptoing on March 17, 2007, 08:58:16 pm
Oh, one thing you migth wanna do is a castshadow onto the white. For all the objects of course.

I suggest blueish shadow. Will ground it nicely onto the background,
Title: Re: pixel self portrait + other stuff
Post by: Skull on March 17, 2007, 09:12:01 pm
Wonderful edit, Helm.

I like the simple style on this, bold colours. Very Impressive.
Title: Re: pixel self portrait + other stuff
Post by: AdamAtomic on March 18, 2007, 05:55:22 pm
Thanks guys, here is the animation for the "music" menu item mouseover:

(http://adam.lastchancemedia.com/me_tunes.gif)

EDIT - and for the 'art' item mouseover:

(http://adam.lastchancemedia.com/me_art.gif)

DOUBLE EDIT - and for 'writing':

(http://adam.lastchancemedia.com/me_writing.gif)

TRIPLE EDIT!!!  - last but not least, for the pug pictures section:

(http://adam.lastchancemedia.com/me_pugs.gif)

I'm working on page code to get the basic rollover action working right now, that should be working shortly.
Title: Re: pixel self portrait + other stuff
Post by: Malor on March 18, 2007, 06:43:15 pm
Hmm nice, I like the simplicity. With the writing sprite thing, the pencil looks more like it is floating above his ear, instead of actually resting between it and his head. The whiteish shadow seems out of place, I would go without it. And, would it be correct to assume that the pencil is so thick so people can tell what it is? The talking animation looks a little fast, but I really love this sprite..thing, and Helm, that is a beautiful edit.
Title: Re: pixel self portrait + other stuff
Post by: alkaline on March 18, 2007, 06:49:15 pm
the shadow is grey on the white background he is using.
Title: Re: pixel self portrait + other stuff
Post by: AdamAtomic on March 18, 2007, 07:38:06 pm
thx guys, here is a test page with the working mouseovers, let me know if you have any crits/feedback/etc at this point:

http://adam.lastchancemedia.com/

EDIT - I'm especially open to suggestions for better art & writing icon/accessories.  I think the pencil is okay, but the talking makes only marginal sense...maybe the pencil should be for writing, but then what to do for art?  I don't want to just put a different implement behind his ear...
Title: Re: pixel self portrait + other stuff
Post by: Malor on March 18, 2007, 07:53:45 pm

EDIT - I'm especially open to suggestions for better art & writing icon/accessories.  I think the pencil is okay, but the talking makes only marginal sense...maybe the pencil should be for writing, but then what to do for art?  I don't want to just put a different implement behind his ear...

Ah, Here I am thinking the pencil is for writing XD..anyways, I would do him like painting for the art category, even if that is a little cliche.. Or, you could change the pose a little, have a paint brush in his hands, at his sides, with paint dripping onto the floor...
Title: Re: pixel self portrait + other stuff
Post by: snader on March 18, 2007, 07:56:26 pm
paint is definately a good idea. maybe some buckets on the ground and splats on yer clothes and stuff like that

for writing i'd suggest a pen behind the ear instead of a pencil, seeing as pens are more commonly used for writing then pencils
Title: Re: pixel self portrait + other stuff
Post by: AdamAtomic on March 18, 2007, 08:10:39 pm
cool thx guys, i think he may be like writing in thin air with a quill pen maybe, and paint does seem to be a popular one for art, i am not going to have the code for the site done for a few weeks anyways so i will try out a bunch of diff. stuff
Title: Re: pixel self portrait + other stuff
Post by: Helm on March 18, 2007, 08:12:31 pm
That all looks allright so far, but dude, better pixel font.
Title: Re: pixel self portrait + other stuff
Post by: Darien on March 18, 2007, 08:31:58 pm
For art you could give yourself a French beret and a thin squiggly moustache.  And for writing you could give yourself shades and a scraggly beard.

It looks really cool, I like the style.
Title: Re: pixel self portrait + other stuff
Post by: Lawrence on March 18, 2007, 08:33:38 pm
I think it would be a good idea to preload the images when the page loads, because at the moment they start to load on the onmouseover and can take a second or two to load.
Title: Re: pixel self portrait + other stuff
Post by: AlienQuark on March 18, 2007, 08:44:12 pm
Solid design, I really like what I'm seeing.

I think you should give the pug some eyes though, he kinda melds into you a little too much, the brown area I mean.

Also, I noticed you didn't change the shadow for the pug one to accommodate the change. Maybe fix that too.

Good stuff. :y:
Title: Re: pixel self portrait + other stuff
Post by: rougewisp on March 18, 2007, 09:00:21 pm
I think the pencil in the ear one stands out because it's static...

Maybe if you have the pencil in your mouth?
Title: Re: pixel self portrait + other stuff
Post by: AdamAtomic on March 18, 2007, 09:06:05 pm
I think the pencil in the ear one stands out because it's static...

Maybe if you have the pencil in your mouth?
ooo that's pretty good - i really like that!

alienquark - yeah the shadow doesn't change, the image is not quite wide enough and I was too lazy to fix it, it's totally on the list though, thanks for noticing!

lawrence - yes i agree, i will look into how to do that, i've never actually tried it before, i assume its just an extra line or two of JS?

darien - hahaha i love it, may not suit the style here but i love it

helm - aww i love venice classic :(  its so hip yet retro!  do you have a particular suggestion as a replacement?
Title: Re: pixel self portrait + other stuff
Post by: Soup on March 18, 2007, 09:55:09 pm
For art use a tablet. I think it would make sense for a pixel(im asuming) gallery.
Title: Re: pixel self portrait + other stuff
Post by: AdamAtomic on March 18, 2007, 11:19:32 pm
yeah i actually use a convertible notebook for all my pixel art now, so I'd like to be able to incorporate that somehow, but the gallery will be mixed natural media, pixels, graphic design, lots of different junk that just doesn't suit the studio site, not to mention 3d models, etc etc.  So still not 100% on where I'm gonna go with that yet...here's a mockup of the active site layout though.  When you click any of the 5 menu items the giant thought-bubble div will appear and load stuff out of XML files using my existing code from the studio.  The menu system for this is a little simpler though - if there are 11 files in this category, it will create 11 buttons (those little squares there).  The buttons themselves will be 4x4 transparent .gif files, with colored HTML img tag borders around them so that I get automatic visited/not visited coloration/highlighting.  As you mouse over the squares the filename will appear in the bottom right of the thought bubble.  The remaining space will be filled either by image files or by direct ajax->updates of other HTML files for more organized content.

(http://adam.lastchancemedia.com/layout.gif)
Title: Re: pixel self portrait + other stuff
Post by: Syn on March 19, 2007, 12:21:04 am
Wow, that is really going to be fun to navigate. I really like the idea of this being a thought bubble. :y:
Title: Re: pixel self portrait + other stuff
Post by: AdamAtomic on March 19, 2007, 12:38:48 am
Thx, I got the basic DHTML expand function working now:

http://adam.lastchancemedia.com/

No content still, and the expand doesn't animate (yet), that could happen later though...
Title: Re: pixel self portrait + other stuff
Post by: Soup on March 19, 2007, 12:50:45 am
<!--[if IE lte 7]> <![endif]-->
This is in the corner of the page.
But awsome so far.
Title: Re: pixel self portrait + other stuff
Post by: rougewisp on March 19, 2007, 01:01:19 am
I think that if you're viewing the page for music, the animation on the left should only be the one for music, and the hover->change spiel should only be when you aren't on a given page.
Title: Re: pixel self portrait + other stuff
Post by: AdamAtomic on March 19, 2007, 03:12:01 am
Rougewisp, you're 100% right, i am going to add a var for page state so that the onmouseout functions return the proper image state, its pretty confusing as it is.  Just didn't get there yet :D 

Soup, what browser are you using?  Those are standard XHTML comments and they're in the header nonetheless, they should definitely NOT be showing, any extra info you have about this would be helpful!

EDIT - fixed stupid browser detection comments appearing for no reason, also added better image states for onmouseouts, and added some bouncing thought bubbles: http://adam.lastchancemedia.com/
Title: Re: pixel self portrait + other stuff
Post by: Soup on March 19, 2007, 10:14:15 pm
Rougewisp, you're 100% right, i am going to add a var for page state so that the onmouseout functions return the proper image state, its pretty confusing as it is.  Just didn't get there yet :D 

Soup, what browser are you using?  Those are standard XHTML comments and they're in the header nonetheless, they should definitely NOT be showing, any extra info you have about this would be helpful!

EDIT - fixed stupid browser detection comments appearing for no reason, also added better image states for onmouseouts, and added some bouncing thought bubbles: http://adam.lastchancemedia.com/
It's fixed now. Also, the website it is looking great!
Title: Re: pixel self portrait + other stuff
Post by: Colonel Mustard on March 20, 2007, 07:32:13 pm
My suggestion would be for you to preload all the images, so that they show at once when you hover :) This looks great so far :D
Title: Re: pixel self portrait + other stuff
Post by: robalan on March 20, 2007, 08:36:57 pm
The art looks great, but I've got a code comment: on the art and writing pages, the mouseover of the little boxes in the lower left corner defaults to "art_file9.jpg" instead of blank.  That is to say, it displays the proper name in the lower right corner while mousing over the box, but when the mouse moves away, it reverts to "art_file9.jpg".  Hope that made sense...

[EDIT] Correction: it doesn't revert to "art_file9.jpg"; it reverts to the last shown image.  I'll assume this is correct, then?  Although I would assume the default text should clear when you switch from the "art" page to the "writing" page, right? [/EDIT]
Title: Re: pixel self portrait + other stuff
Post by: AdamAtomic on March 20, 2007, 08:42:55 pm
robalan - Yes, its supposed to be the last clicked file, but you're right, it acts weird when you change categories, I need to set it to auto-open the first image in the category anyways I think, that will clear everything up - thanks for the bug!

EDIT - Actually rob i just tried it, and the default text does clear when I switch from art to writing, not sure exactly why its messing up for you!

EDIT AGAIN - AH HA!  I see.  It's the mouse out before you click on anything in the new category, good eye!  I'll fix that straightaway.

mustard - yeah i think lawrence mentioned that earlier, does anyone have a good snippet for doing that?  I can research it later too, but if someone has a tried and true method that's cool too.
Title: Re: pixel self portrait + other stuff
Post by: Dusty on March 20, 2007, 10:26:57 pm
Code: [Select]
if (document.images) {
  preload_image_object=new Image();
  image_url=new Array();
  image_url[0]="gfx/menu_me.gif";
  image_url[1]="gfx/menu_art.gif";
  image_url[2]="gfx/menu_writing.gif";
  image_url[3]="gfx/menu_tunes.gif";
  image_url[4]="gfx/menu_pugs.gif";
  for(var i = 0;i<=image_url.length;i++) preload_image_object.src=image_url[i];
}
Title: Re: pixel self portrait + other stuff
Post by: robalan on March 20, 2007, 11:02:20 pm
Heh, yeah it's just a little thing, and my description was not so great.  Glad you figured out what I was referring to.
Title: Re: pixel self portrait + other stuff
Post by: AdamAtomic on March 20, 2007, 11:35:05 pm
Awesome, thanks dusty I'll give it a shot tonight!

EDIT - Ok the preloader code should be in and operating, let me know if you guys see any mouseover delays, thanks again!

DOUBLE EDIT - the 'me' and 'art' sections are more or less fully live now, as is the XML backend.  The writing, tunes and pugs sections are still just stubbed; pugs will be easy, writing a little trickier, and I think I may have to make a special flash player to get tunes to work the way I want, we'll see...
Title: Re: pixel self portrait + other stuff [updated - HOW FAR IS TOO FAR]
Post by: AdamAtomic on March 24, 2007, 11:14:49 pm
Ok so the art and pug sections have stuff in them now but after playing Poyo last night (thanks a lot, ptoing) I finally figured out what I want to do with this URL i registered a while back:

http://wiigotfliis.com/

(http://wiigotfliis.lastchancemedia.com/temp.gif)

Trying to present it in kind of the Wii style - minimalistic, lots of white and some light gray.  Did I go too far?  What would you do to make it look better?  I want a retro vibe, but also a wii vibe, and to be perfectly honest I don't have time or the inclination to do an elaborate tileset on this one.  Thoughts?  Brutal slams?  The intended viewing size is 4x.

EDIT - If you can, view that URL on your Wii, because the saturation is waaayy higher, and I had to really bleed the colors out to get the effect I wanted, at least on my tv...

DOUBLE EDIT - I should probably explain slightly what's going on there - you play as the big flea, with your rabble of boy and girl fleas running along behind you.  As the big flea, you can jump at least 2 tiles vertically and horizontally, while the baby fleas can only jump 1 tile each direction.  This would be a flash game using the new wii flash API that lets you use the d-pad, 1 and 2 buttons.  Button 1 would jump, Button 2 would toggle "follow me".  Cute sound effects will abound.  Currently the only game objects that I know I'd like to have are pushable boxes, door-switch pairs, and these kind of rubber-band platforms that sink when you put something on them, and click into place at a certain depth.  Poyo has a bunch of really fun little tile-based things, as does Mario vs Donkey Kong, and I'd like to get some of that ingenuity packed in here.  Levels will probably be loaded from XML, as will various physics settings (another important lesson from Poyo).  I really, really want to have branching paths/secret levels as well, that will be my one "hardcore" element I think.
Title: Re: pixel self portrait + other stuff [updated - HOW FAR IS TOO FAR]
Post by: Xion on March 24, 2007, 11:35:13 pm
I know sometimes simple things are the most appealing...but, IMHO, this is just too simple. I mean...Yeah...That's my only thing. Make things shiny maybe? Reverse the grey/white parts so the floor is white and the bg grey? I dunno...I mean, it sounds awesome (and cute) but just looks too simple to the point of just plain plainness.

If you could have the little flea dude(s) dynamically squash and stretch and have like, little ambient things going on in the bg it would be soo cool.
Title: Re: pixel self portrait + other stuff [updated - HOW FAR IS TOO FAR]
Post by: Sharm on March 25, 2007, 01:22:41 am
I think the reason the minimalistic style works on the wii is because it's AA'd to death, and all the graphics are cute.  A little AA would go a really long way with this.
Title: Re: pixel self portrait + other stuff [updated - HOW FAR IS TOO FAR]
Post by: AdamAtomic on March 25, 2007, 01:30:57 am
xion - yeah the flea animations will be very squashy/stretchy for sure

sharm - i'm leaning that way too, I think i'm gonna have to do the pixel art at 640x480 instead of the 1/4 size, and just make nice smooth curves in the appropriate areas.

I'm not sure how I feel about glossing it up yet, but I'm gonna try a few different things later tonight, I think I know where I'm going with it all now, thanks for the feedback!
Title: Re: pixel self portrait + other stuff [updated - HOW FAR IS TOO FAR]
Post by: alkaline on March 25, 2007, 02:11:29 am
about the website - viewing your images is kind of a pain to me, those small squares are a little hard to click and i don't even know what i'm clicking. maybe a next/previous button so you don't have to keep looking up and down to view the image and then click a new box?
Title: Re: pixel self portrait + other stuff [updated - HOW FAR IS TOO FAR]
Post by: AdamAtomic on March 25, 2007, 03:19:27 am
argh yes thanks for reminding me, i meant to have previous and next functions built into the window and completely forgot, i'll get those in soon!
Title: Re: pixel self portrait + other stuff [updated - HOW FAR IS TOO FAR]
Post by: Soup on March 25, 2007, 12:07:43 pm
pugs is adorable
Title: Re: pixel personal site + retro game mockup [updated]
Post by: AdamAtomic on March 27, 2007, 07:02:38 am
(http://wiigotfliis.lastchancemedia.com/mockup2.gif)

Version 2!  Improvement?  Drastic step backwards?  Middling mediocrity?
Title: Re: pixel personal site + retro game mockup [updated]
Post by: Bisse on March 27, 2007, 05:17:32 pm
Dude, i'd tap that.

There are some details that seem out of place. Also, since you're going for a simplistic Wii look, i'm not too sure about the outlines. Perhaps they should be brighter? It looks great at the moment, but it doesn't look Wii.
Title: Re: pixel personal site + retro game mockup [updated]
Post by: ptoing on March 27, 2007, 05:20:04 pm
Also, on a sidenote, why does stuff have to look Wii? I think it should look Adam. If it looks like wii it will look more or less like Ipod  :blind:
Title: Re: pixel personal site + retro game mockup [updated]
Post by: AdamAtomic on March 27, 2007, 05:41:20 pm
Bisse - thanks, yeah its pretty schizo right now, I'm going to do a third version in a little while that will hopefully be a little more solid.

Ptoing - I'd like it to look "wii" so that it is inviting for new/casual gamers, but I also want it to look NES (this version is actually to spec, but only uses 1 palette for background and 1 for sprites).  I'm hoping to appeal to people that bought their Wii for Wii Sports and the Virtual Console, something that will look familiar to them.  So far it is a balance I have not been able to strike!  If I get a good library built in Flash then I would love to make more games that do NOT look Wii in the slightest.

EDIT - Actually I should clarify that I guess...I want this particular design to look like an NES game, but be evocative of the Wii's design - simple, white, gray, some neon blue here and there.  Obviously to make the game look good I am going to have to bend/work around those rules, I'm just still not sure about the best way to do that yet!
Title: Re: pixel personal site + retro game mockup [updated]
Post by: crab2selout.png on March 27, 2007, 06:57:46 pm
I like it, this one's got some depth to it and that usually makes things a bit interesting. It's kinda neat how the dithering almost makes your background look like it's warping into the z-dimension. I was thinking of suggesting tinting the grey, but it really didn't make much of a diff when I tried myself. the grey actually looked better, even with really tiny tints.
Title: Re: pixel personal site + retro game mockup [updated]
Post by: AdamAtomic on March 27, 2007, 06:59:09 pm
Alright here's version 3:

(http://wiigotfliis.lastchancemedia.com/mockup3.gif)

Dropped that whole outlines thing, abandoned the strict NES palette, tried to really think about a style that works than necessarily a style that fits?  Dunno if it helped or not :P

EDIT - updated wiigotfliis.com too, if anyone wants to see how it will look on the Wii!
Title: Re: pixel personal site + retro game mockup [updated]
Post by: Panda on March 27, 2007, 07:59:40 pm
Visually it looks better than the version2, but how will this minimalistic approach attract new/casual players?
I mean, the wii does have all that white/blue/gray thing, but wasn't the whole easy-to-pick-up part what attracted more people?
Overall, I'm not feeling this whole thing. It looks stylish to a certain point, but looks more like a fast job and rather unfinished.
But maybe it is just me
Title: Re: pixel personal site + retro game mockup [updated]
Post by: AdamAtomic on March 27, 2007, 08:33:10 pm
It's not just you, cuz I am having the same reaction, trust me!  That's why I have been asking for critiques/edits/feedback...it is mucho unfinished; this whole project is the result of a few rushed sittings, just trying to get some of my basic ideas down.  I like where I am heading now (conceptually, not in execution); the level I am finally visualizing rather than just drawing randomly is kind of an ant farmy type environment I think, like the level is a toy or diorama.  It still looks cheap, which is NOT the intended effect, so I will keep working on it...