Resources and Support
 Pixel Joint Forum : The Lounge : Resources and Support
Message Icon Topic: Noobtorials Post Reply Post New Topic
<< Prev Page  of 2
Author Message
jalonso
Admiral
Admiral
Avatar

Joined: 19 September 2015
Online Status: Offline
Posts: 13393
Quote jalonso Replybullet Posted: 28 June 2014 at 9:00am
By DB:
Selective AA is the process of pushing/moving the internal AA into the outline...without ever making the (easy) mistake of doing external AA. "Internal thinning".

If you want strictly pixelart (and no semitransparancy) and have sprites that should look decent on all backgrounds; then "selective AA" is the best method (I don't know if there's an accepted term for it, however it has a close relationship with Selout). Although it's a very advanced pixelart technique, and may not be suitable for beginners..so try working with just internal-AA if you wanna play it safe.




Edited by jalonso - 24 July 2014 at 7:53am
IP IP Logged
jalonso
Admiral
Admiral
Avatar

Joined: 19 September 2015
Online Status: Offline
Posts: 13393
Quote jalonso Replybullet Posted: 23 July 2014 at 5:02am
by Daruda
 

Color theory
I've made a little tutorial about the Hue shift that is the easiest thing about the theory. It's elementary, but this picture in my head worked for me when I didn't understand much about colors.



Edited by jalonso - 24 July 2014 at 7:52am
IP IP Logged
jalonso
Admiral
Admiral
Avatar

Joined: 19 September 2015
Online Status: Offline
Posts: 13393
Quote jalonso Replybullet Posted: 24 July 2014 at 9:28am
This thread is all updated and re-constructed 7-24-2014
All images before this post are backed up to PJ host.

If anyone wants to make a cool topic image that would be great :)


Edited by jalonso - 24 July 2014 at 9:29am
IP IP Logged
JustinGameDesign
Commander
Commander
Avatar

Joined: 17 July 2015
Online Status: Offline
Posts: 74
Quote JustinGameDesign Replybullet Posted: 26 July 2014 at 8:26am
If someone wants to make any of the following tutorials, these are some things that need explaining to new submitters more often lately:

Why low color counts are generally preferred.

Why colored-in line-art isn't necessarily pixel art.

Consistent lighting.

What is pixel-precision?

Why not to post pre-zoomed versions of your work.


Why to use transparent backgrounds rather than blank white backgrounds.


Edited by JustinGameDesign - 26 July 2014 at 9:18am
IP IP Logged
JustinGameDesign
Commander
Commander
Avatar

Joined: 17 July 2015
Online Status: Offline
Posts: 74
Quote JustinGameDesign Replybullet Posted: 26 July 2014 at 9:10am
Posting pre-zoomed images to the gallery.


The point is to create small, objective explanation images that are easy to post in the comments section of pixels needing correction.


Edited by jalonso - 04 November 2014 at 6:38am
IP IP Logged
jalonso
Admiral
Admiral
Avatar

Joined: 19 September 2015
Online Status: Offline
Posts: 13393
Quote jalonso Replybullet Posted: 27 July 2014 at 5:55am
There is no valid reason why PJ gallery previews need to be under 10k anymore.
Because early pixelart had so many restrictions and file size was chief among them its just something we like to keep.
If your preview is over 10k it will not show on the Front Page Section with New Art, Weekly Showcase (WS) and Hall of Fame (HoF).
It will however be seen everywhere else.
You don't have to make your preview under 10k but you should.
For easy copy/paste use:



Edited by jalonso - 27 July 2014 at 5:55am
IP IP Logged
jalonso
Admiral
Admiral
Avatar

Joined: 19 September 2015
Online Status: Offline
Posts: 13393
Quote jalonso Replybullet Posted: 13 October 2014 at 9:36am
Image find by king_bobston. Image credit SharkD.
More info Axometric projection article from wikipedia.



Edited by jalonso - 13 October 2014 at 9:43am
IP IP Logged
0xDB
Commander
Commander
Avatar

Joined: 30 March 2016
Online Status: Offline
Posts: 206
Quote 0xDB Replybullet Posted: 14 October 2014 at 8:16am

ISOmetric Pixel Art Cheat Sheet v.0.8

 

edit: Dennis, added to PJ's imgur.com


Edited by jalonso - 16 October 2014 at 6:21am
IP IP Logged
0xDB
Commander
Commander
Avatar

Joined: 30 March 2016
Online Status: Offline
Posts: 206
Quote 0xDB Replybullet Posted: 18 October 2014 at 9:44am
ISOmetric Pixel Art Cheat Sheet(v.0.9) (credits to cyangmou for layout tips)

IP IP Logged
jalonso
Admiral
Admiral
Avatar

Joined: 19 September 2015
Online Status: Offline
Posts: 13393
Quote jalonso Replybullet Posted: 04 November 2014 at 6:36am
Isometric lines that cause you grief:
Its a little bit of extra work but this is a way to solve some isometric lines which gives you a lot of problems to get just right.
This method works on any iso line.
The key is to make the width reduction (usually 80% is good) tho sometimes this needs adjustments too so it reads right even when its not 100% accurate. Anything from 75% - 90%.


IP IP Logged
jalonso
Admiral
Admiral
Avatar

Joined: 19 September 2015
Online Status: Offline
Posts: 13393
Quote jalonso Replybullet Posted: 15 November 2014 at 6:15pm
Image and text by eishiya

When drawing round objects from an unfamiliar perspective, it can be hard to correctly place surface features on them. A common manifestation if this problem is drawing tree branches/leaf clumps all aligned in horizontal lines in views from above, where they should really appear rounded along the form of the tree.
Ignoring the surface features and imagining the object as having simple evenly spaced stripes can help. It's much easier to figure out where the stripes would go, especially if you draw a familiar view first. They illustrate the form of the object very clearly, and force you to think in 3D instead of just guessing.
You can use the stripes as a guide to placing the surface features. It can even be helpful with figuring out what features to draw in the first place - go with whatever makes the object's 3D form as clear as the stripes make it.




Edited by jalonso - 22 July 2015 at 7:08am
IP IP Logged
jalonso
Admiral
Admiral
Avatar

Joined: 19 September 2015
Online Status: Offline
Posts: 13393
Quote jalonso Replybullet Posted: 22 November 2014 at 1:23pm
By PixelSnader:

The correct way to build ground shadows is relatively easy though.
Just draw lines, and see where they hit the ground. Here's an example:

1 - original WIP image
2 - raycasting a bunch of key points
3 - correct shadow
4 - you can try to tweak a bit to get cleaner lines and more detail. for example, the overhang of the roof.

Edit: I used a simple 1:1 step because it's easy, but you can see that it makes the shadow a bit wid/big. If you want to save tile space or something, you might want to try a 1:2 step to get a much smaller shadow.

IP IP Logged
king_bobston
Midshipman
Midshipman
Avatar

Joined: 01 April 2016
Online Status: Offline
Posts: 34
Quote king_bobston Replybullet Posted: 07 December 2014 at 9:01am

Did this for some thread and then forgot about it
Hope that it is of some helpitude anyway.
IP IP Logged
jalonso
Admiral
Admiral
Avatar

Joined: 19 September 2015
Online Status: Offline
Posts: 13393
Quote jalonso Replybullet Posted: 15 May 2015 at 6:19am
You will sometimes see the term 'sub pixelling' used.
Galiant recently submitted a simple pixel that visually illustrates the technique so I'm adding here for all.
Click image to zoom.


This pixel by Cyangmou shows a more advanced use of sub pixelling



Edited by jalonso - 14 August 2015 at 8:39am
IP IP Logged
jalonso
Admiral
Admiral
Avatar

Joined: 19 September 2015
Online Status: Offline
Posts: 13393
Quote jalonso Replybullet Posted: 22 July 2015 at 5:42am
JoE-Hill recently updated some of his older pixels and the example below shows how coloring sprites can help add depth and volume really well.
Nothing is wrong or bad with the earlier version and when new to making sprites most use the older method to shadow assets.
Notice how the revised version uses light in a more effective way.

IP IP Logged
drain
Midshipman
Midshipman
Avatar

Joined: 03 May 2016
Online Status: Offline
Posts: 36
Quote drain Replybullet Posted: 25 July 2015 at 8:05pm
I know of a less complicated, more beginner-friendly way of making iso circles.



First, draw a normal iso-diamond/square, next, with the Elliptical Marquee tool, outine the square you made and draw on the edges. Finally, erase the initial square and you're done.
IP IP Logged
jalonso
Admiral
Admiral
Avatar

Joined: 19 September 2015
Online Status: Offline
Posts: 13393
Quote jalonso Replybullet Posted: 08 February 2016 at 6:21am
Under all art are these icons. Below is what they mean.

EDIT
- Use to upload any edit or revision of art and preview files or edit the art description.

FAVE - Add as fave to your profile. This does not count as a rating of art.

AVATAR - Use as your avatar. The page must have the 'allow use for avatar' checked by the artist.

FB and TWITTER - Share art on your FB and Twitter accounts


IP IP Logged
jalonso
Admiral
Admiral
Avatar

Joined: 19 September 2015
Online Status: Offline
Posts: 13393
Quote jalonso Replybullet Posted: 28 March 2016 at 9:14am
Originally posted by  r1k:

Look up some references. I drew this super quick and very simplified guide to help you think about it a little bit. It will be an 8 frame walk cycle with 2 steps, one step with each foot. Each step is 4 frames and essential the same, the only difference is which leg is in front.


Don't animate it from the first frame to the last in order. Instead start with the 2 extreme poses, which is when the legs are farthest apart.


next add the 2 frames directly in between these extreme frames. Since its in between the 2 frames where the legs are furthest apart, its easy to figure out that the legs will be in the middle here.


next we add all the frames in between the ones we've drawn up till now. This image is just showing the first step now. Since we're just adding frames in between ones we've already drawn, its a little easier to figure out what it should look like.


The leg that starts forward in each step and moves back can be thought of kind of like a pendulum, this should make it pretty easy to figure out where it should be in each frame. The other leg, the one moving forward is a little different. The top part of the leg moves like a pendulum, but the bottom part kind of drags behind until the leg swings forward.
IP IP Logged
Iscalio
Commander
Commander
Avatar

Joined: 15 November 2014
Online Status: Offline
Posts: 192
Quote Iscalio Replybullet Posted: 12 April 2016 at 10:53am
This might be a useful resource for people who want to look at the effects different materials have on an object and how "glass" or "bronze" sort of materials really look...

https://pixologic.com/zbrush/downloadcenter/library/
IP IP Logged
Limes
Commander
Commander
Avatar

Joined: 09 December 2014
Online Status: Offline
Posts: 597
Quote Limes Replybullet Posted: 23 April 2016 at 2:16am
So the first thing I want to cover in this CC is Line-work, Line-work is the basic building block for nearly all pixel art.
(all sprite work, some people use a technique called Blocking http://pixeljoint.com/forum/forum_posts.asp?TID=11299 I highly recommend reading all of this thoroughly it covers nearly everything.)

So what exactly differentiates good line-work from bad line-work?

Well I won't talk too much about this but I will show you a few examples.

Ex1: Jaggies


jaggy lines area major problem with newer artists sprites. You should always make sure your lines are clean and smooth.
As you can see the line on the right is much smoother and represents almost the same shape. There are rare occasions where jaggies are acceptable (Rocks sometimes)

Ex2: AA'ing


It stands for Anti-Alias and it is used to smooth out edges. I may be the worlds worst AAer so my example is actually pretty darn bad, there is some mathematical equation to it that I don't understand maybe someone here could enlighten me actually, I would recommend looking at the link posted above and reading the section on AAing.

Lastly: Banding


Banding is what happens when you have strips of pixels the mirror each other as you can see on the left the pixels are hugging each other, and you can see how much better it looks without this banding/hugging.

Given this how can we improve the line-work that you made?

Lets get rid of those colours and get this line-work down.

There now given what we just learned lets fix it!(AA and banding won't do anything for us right now because you can't AA a transparent sprite.)


Okay so I made some adjustments and I will explain all of them.

  • Now I understand that the sprite was supposed to be flying, But I don't think this is a good idea as it makes more sense to make him in a standing position.

  • The ball was way too small so I enlarged it and placed it in his other hand.

  • His head was may too large for his body so I made it smaller and changed the shape so he doesn't have a balloon head

  • I gave him a JRPG like hair style (you should practice hair styles its good to learn if you want to be a spriter)

  • got rid of his lego claw hand(dont attempt to draw hands at this small of sprites :) )


The main problem with your sprite was the head it was completely 2-D. Even though its only line-work at this point you can still see the difference in perspective between my rendition and yours. Now this is not to discourage you at all in fact I didn't change all too much I just had to move a few things around. I worked completely off your sprite.

So that brings us into my next topic...

[glow=red,2,300][size=36pt]Perspective and Depth![/glow]

Now you can clearly see that the title there popped out of the page. I believe the best place to start if you have trouble with depth and perspective is drawing 3-D letters cubes and shapes.



Start with drawing straight up cubes then move on to different shapes of cubes and styles. I like to draw my cubes swurvy like this, its requires a bit more thinking then Straight up and down cubes like below (psssst Its also funner)



This cube is in an isometric form drawing in this style is also another way to improve at getting your depth and perspective down. (it can also get confusing and troubling at times) here's a good isometric tutorial for you:
http://gas13.ru/v3/tutorials/isometric_pixelart_tutorial_mathematics_of_isometrics.php

Okay and last but certainly not least is the colouring!

First things first lets take a look at your palette


The palette is pretty darn good and colours and palette making is a weak point of mine so the only thing I have to say about it is that the greyscale ramp and green ramp that branch off of the donut is completely unnecessary and I wouldn't recommend doing that in the future (unless greyscale is needed) another thing to avoid is using 100% black or 100% white. Though some outlines on sprites 100% black is acceptable.

So now that that is all out of the way we can finally get down to colouring this bad boy!


So first of all try to not use more then 2 colours per body part especially for a sprite this small it really only needs 7 or 6 colours. You have 1 base colour and 1 darker colour for every body part and you should reuse colours, for example the dark colour in his jersey is the same as the light colour in his jeans. This is hard to explain but certain colours interact differently when presented with different partner colours. So when the colour is looked at with the lighter green it appears to be a darker green tone, and then when mixed with the dark blue it appears as a light blue. Again you'll see some examples of this in the pixel art tutorial that I linked in the very beginning, make sure you read that. ill link it down here for convenience http://pixeljoint.com/forum/forum_posts.asp?TID=11299

You might have also noticed that his ball is missing. This is because a pro spriter would never attach his ball sprite to his character sprite, That way the sprite can be moved around independent from the Character.


I posted this on Pixelation tonight and thought I should post it here too for others to see. (also that is some horrendous AAing in the example XD).
I use GraphicsGale
IP IP Logged
<< Prev Page  of 2
Post Reply Post New Topic
Printable version Printable version

Forum Jump
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot delete your posts in this forum
You cannot edit your posts in this forum
You cannot create polls in this forum
You cannot vote in polls in this forum