Pixelation
General => General Discussion => Resources => Topic started by: 0xDB on February 05, 2016, 11:36:56 am
-
update April 7th 2019: PAAG is now part of the "Pixel Art Historical Society" Wiki at http://pixelwiki.comun.se
update Nov. 17th 2018: Porting (plus some additions and edits) this glossary is finished.
update Nov. 9th 2018: I have starting porting this glossary to a proper wiki at http://paag.dennisbusch.de which will make maintenance and expansion much easier. So the glossary in the first post of this thread will not be updated anymore. I will still watch this thread for suggestions on terms that should be included in the glossary.
short title: Pixels And Art Glossary
long title: 'a non-exhaustive Pixels And Art Glossary, descriptive in nature, compiled from some of the elements observed in what is vaguely known as "Pixel Art", from historical technological evolution of computer graphics(~1970-2000) and from thoughts developed by the major Pixel Art communities on the internet (199x and up)'
scope and intention:
This is NOT an attempt to create and provide a formal definition of "Pixel Art" nor an attempt at providing a ruleset on good and bad practices. It is to be understood as being purely descriptive. I shall also attempt to keep the final document descriptive and not judgemental, so e.g. something like "Pillow Shading" will be included but there will be nothing in the description which advises for or against doing it (should be self evident to the readers to make the "right" decision from seeing a pillow shaded image without rubbing it in their face).
Most entries already have at least a brief summary and/or links to vast amounts of information on everyones favorite open encyclopedia.
Readers of this thread are encouraged to throw in Terms which should be included in the Glossary.
Glossary Index
5 P's and 5 C's (#post_five_p_and_five_c)
Achromatic Color (#post_achromatic_color)
Aliasing & Antialiasing (#post_aa)
Amiga (#post_amiga)
Animation (#post_animation)
Area (#post_area)
Aspect Ratio (#post_aspect_ratio)
Attribute Cells (#post_attribute_cells)
Attribute Clash (#post_attribute_clash)
Banding (#post_banding)
Bitmap & Bitdepth (#post_bitmap_and_bitdepth)
Blur (#post_blur)
Brightness, Lightness & Value (#post_brightness_lightness_value)
Cabinet Projection (#post_cabinet_projection)
Cavalier Projection (#post_cavalier_projection)
Camera Obscura (#post_camera_obscura)
Cartesian Coordinate System (#post_cartesian_coordinate_system)
CGA (#post_cga)
Cluster (#post_cluster)
Color (#post_color)
Color Balance (#post_color_balance)
Color Cycling (#post_color_cycling)
Color Depth (#post_color_depth)
Color Model - HSL/HSV(HSB) (#post_color_model_hsl_hsv)
Color Model - RGB (#post_color_model_rgb)
Color Gradient/Ramp/Shift (#post_color_gradient_ramp_shift)
Color Scheme (#post_color_scheme)
Color Space (#post_color_space)
Commodore 64 (#post_c64)
Composition (#post_composition)
Construction (#post_construction)
Contour (#post_contour)
Contrast (#post_contrast)
Cross Section (#post_cross_section)
Digital Mixing Of Color (#post_digital_color_mixing)
Dithering (#post_dithering)
Dither-AA (#post_dither_aa)
Drawing (#post_drawing)
EGA (#post_ega)
Elevation (#post_elevation)
Format (#post_format)
Cluster (#post_cluster)
Foreshortening (#post_foreshortening)
Gesture (#post_gesture)
Gradient (#post_gradient)
Graphic Mode (#post_graphic_mode)
Projection (#post_projection)
GIF (#post_gif)
History Of Pixel Art (#post_history_pa)
Hue (#post_hue)
Hue Shift (#post_hue_shift)
Image (#post_image)
Indexed Image/Color (#post_indexed_image)
Index Painting (#post_index_painting)
Isometric Projection (#post_isometric_projection)
JPG, JPEG (#post_jpg)
Key (#post_key)
Layer (#post_layer)
Lossy&Lossless Compression (#post_lossy_lossless_compression)
Line (#post_line)
Restrictions (#post_restrictions)
Lighting (#post_lighting)
Lightness (aka Value, aka Tone) (#post_lightness)
Graphics Mode (#post_graphics_mode)
Monochromatic Color (#post_monochromatic_color)
Motion Blur (#post_motion_blur)
MSX (#post_msx)
NES (#post_nes)
Negative Space (#post_negative_space)
Oblique Projection (#post_oblique_projection)
Oekaki (#post_oekaki)
Orthographic Projection (#post_orthographic_projection)
Outline (#post_outline)
PNG (#post_png)
Palette (#post_palette)
Palette Effect (#post_palette_effect)
Palette Structure (#post_palette_structure)
Palette Swap (#post_palette_swap)
Palette Swap - Color Cycling (#post_color_cycling)
Painting With Pixels (#post_painting_with_pixels)
Parallel Projection (#post_parallel_projection)
Perspective (#post_perspective)
Perspective Projection (#post_perspective_projection)
Perception (#post_perception)
Picture Plane (#post_picture_plane)
Pillow Shading (#post_pillow_shading)
Pixel (#post_pixel)
Plan (#post_plan)
Projection (Graphical) (#post_projection)
Raster (#post_raster)
(Aspect) Ratio (#post_aspect_ratio)
Ramp (#post_ramp)
Resolution (#post_resolution)
Restrictions (#post_restrictions)
Rendering (#post_rendering)
Saturation (#post_saturation)
Selout (#post_selout)
Set (#post_set)
Sequence (#post_sequence)
Shade (#post_shade)
Shading (#post_shading)
Shape (#post_shape)
Shape Bluffing (#post_shape_bluffing)
Sketch (#post_sketch)
Sprite (#post_sprite)
Style (#post_style)
SVGA (#post_svga)
Tall Pixel (#post_tall_pixel)
Texture (#post_texture)
Tile & Tileset (#post_tile_and_tileset)
Tint (#post_tint)
Value & Key (#post_value)
VGA (#post_vga)
Visual Arts (#post_visual_arts)
Video Game Graphics (#post_video_game_graphics)
Volume (#post_volume)
Wireframing (#post_wireframing)
Wide Pixel (#post_wide_pixel)
X-axis (#post_x_axis)
y-axis (#post_y_axis)
z-axis (#post_z_axis)
ZX Spectrum (#post_zx_spectrum)
--- # ---
5 P's and 5 C's (#post_five_p_and_five_c)
According to Andrew Loomis (see his book "Successful Drawing"), in any succesful drawing, attention must be given to five P's and five C's as Loomis calls them. These are (this is a quote from pages 18,19 in that book):
Proportion, the three dimensions
Placement, a position in space
Perspective, relationship of viewpoint to subject
Planes, surface appearance as defined by light and shadow
Pattern, the deliberate arrangement of the tones on the subject
Conception, a rough indication of an idea
Construction, an attempt to establish the forms from life or from basic knowledge
Contour, the limits of forms in space, according to viewpoint
Character, the specific qualities of individual units of your subject in light
Consistency, all the essentials of construction, lighting, and pattern, organized as a unit
--- A ---
Achromatic Color (#post_achromatic_color)
Literally a color "without color", which is all shades of gray and black and white.
Practically all colors without a strong perceptual chromaticity are called achromatic.
https://en.wikipedia.org/wiki/Color_scheme#Achromatic_colors (https://en.wikipedia.org/wiki/Color_scheme#Achromatic_colors)
https://en.wikipedia.org/w/index.php?title=Achromatic_color&redirect=no (https://en.wikipedia.org/w/index.php?title=Achromatic_color&redirect=no)
Aliasing & Antialiasing (#post_aa)
(http://dennisbusch.de/shared/paag/PAGlossary_AliasingAndAntialiasing.png)
further reading:
https://en.wikipedia.org/wiki/Aliasing (https://en.wikipedia.org/wiki/Aliasing)
https://en.wikipedia.org/wiki/Jaggies (https://en.wikipedia.org/wiki/Jaggies)
Amiga (#post_amiga)
https://en.wikipedia.org/wiki/Amiga (https://en.wikipedia.org/wiki/Amiga)
Animation (#post_animation)
(http://dennisbusch.de/shared/paag/PAGlossary_Animation.gif)
further reading:
https://en.wikipedia.org/wiki/Animation (https://en.wikipedia.org/wiki/Animation)
Area (#post_area)
(http://dennisbusch.de/shared/paag/PAGlossary_Area.png)
further reading:
https://en.wikipedia.org/wiki/Area (https://en.wikipedia.org/wiki/Area)
Aspect Ratio (#post_aspect_ratio)
https://en.wikipedia.org/wiki/Pixel_aspect_ratio (https://en.wikipedia.org/wiki/Pixel_aspect_ratio)
https://en.wikipedia.org/wiki/Display_aspect_ratio (https://en.wikipedia.org/wiki/Display_aspect_ratio)
https://en.wikipedia.org/wiki/Aspect_ratio_(image) (https://en.wikipedia.org/wiki/Aspect_ratio_(image))
Attribute Cells (#post_attribute_cells)
(http://dennisbusch.de/shared/paag/PAGlossary_AttributeCells.png)
further reading:
https://en.wikipedia.org/wiki/ZX_Spectrum_graphic_modes (https://en.wikipedia.org/wiki/ZX_Spectrum_graphic_modes)
http://www.studiostyle.sk/dmagic/gallery/gfxmodes.htm (http://www.studiostyle.sk/dmagic/gallery/gfxmodes.htm)
Attribute Clash (#post_attribute_clash)
(http://dennisbusch.de/shared/paag/PAGlossary_AttributeClash.png)
further reading:
https://en.wikipedia.org/wiki/Attribute_clash (https://en.wikipedia.org/wiki/Attribute_clash)
--- B ---
Banding (#post_banding)
(http://dennisbusch.de/shared/paag/PAGlossary_Banding.png)
further reading:
Not to be confused with https://en.wikipedia.org/wiki/Colour_banding (https://en.wikipedia.org/wiki/Colour_banding)
which refers to the distinctly visible changes between stripes of colors hugging each other in what was supposed to look like a soft gradient.
Bitmap & Bitdepth (#post_bitmap_and_bitdepth)
(http://dennisbusch.de/shared/paag/PAGlossary_BitmapAndBitdepth.png)
further reading:
https://en.wikipedia.org/wiki/Bitmap (https://en.wikipedia.org/wiki/Bitmap)
https://en.wikipedia.org/wiki/Raster_graphics (https://en.wikipedia.org/wiki/Raster_graphics)
Blur (#post_blur)
(http://dennisbusch.de/shared/paag/PAGlossary_Blur.png)
further reading:
https://en.wikipedia.org/wiki/Defocus_aberration (https://en.wikipedia.org/wiki/Defocus_aberration)
https://en.wikipedia.org/wiki/Motion_blur (https://en.wikipedia.org/wiki/Motion_blur)
https://en.wikipedia.org/wiki/Bokeh (https://en.wikipedia.org/wiki/Bokeh)
Brightness, Lightness & Value (#post_brightness_lightness_value)
(http://dennisbusch.de/shared/paag/PAGlossary_BrightnessLightnessAndValue.png)
further reading:
https://en.wikipedia.org/wiki/Brightness (https://en.wikipedia.org/wiki/Brightness)
https://en.wikipedia.org/wiki/Lightness (https://en.wikipedia.org/wiki/Lightness)
https://en.wikipedia.org/wiki/HSL_and_HSV (https://en.wikipedia.org/wiki/HSL_and_HSV) (L in HSL is NOT "Lightness As Value" but some arbitrary Brightness)
--- C ---
Cabinet Projection (#post_cabinet_projection)
(http://dennisbusch.de/shared/paag/PAGlossary_CabinetProjection.png)
further reading:
https://en.wikipedia.org/wiki/Oblique_projection#Cabinet_projection (https://en.wikipedia.org/wiki/Oblique_projection#Cabinet_projection)
Cavalier Projection (#post_cavalier_projection)
(http://dennisbusch.de/shared/paag/PAGlossary_CavalierProjection.png)
further reading:
https://en.wikipedia.org/wiki/Oblique_projection#Cavalier_projection (https://en.wikipedia.org/wiki/Oblique_projection#Cavalier_projection)
Camera Obscura (#post_camera_obscura)
https://en.wikipedia.org/wiki/Camera_obscura (https://en.wikipedia.org/wiki/Camera_obscura)
Cartesian Coordinate System (#post_cartesian_coordinate_system)
https://en.wikipedia.org/wiki/Cartesian_coordinate_system (https://en.wikipedia.org/wiki/Cartesian_coordinate_system)
CGA (#post_cga)
https://en.wikipedia.org/wiki/Color_Graphics_Adapter (https://en.wikipedia.org/wiki/Color_Graphics_Adapter)
Cluster (#post_cluster)
(http://dennisbusch.de/shared/paag/PAGlossary_Cluster.png)
further reading:
http://wayofthepixel.net/index.php?topic=8110.0 (http://wayofthepixel.net/index.php?topic=8110.0) - Ramblethread
http://wayofthepixel.net/index.php?topic=15566.0 (http://wayofthepixel.net/index.php?topic=15566.0) - 1st Cluster Study Thread
http://wayofthepixel.net/index.php?topic=15018.0 (http://wayofthepixel.net/index.php?topic=15018.0) - 2nd Cluster Study Thread
(just search for "cluster" on this board... there are a few more :) )
Color (#post_color)
(http://dennisbusch.de/shared/paag/PAGlossary_Color.png)
video: https://www.youtube.com/watch?v=MmhSXTMTtJM (https://www.youtube.com/watch?v=MmhSXTMTtJM) "Light Darkness And Colours - A Fascinating Journey Through The Universe Of Colours" 51m15s
further reading:
https://en.wikipedia.org/wiki/Theory_of_Colours (https://en.wikipedia.org/wiki/Theory_of_Colours)
https://en.wikipedia.org/wiki/Color_theory (https://en.wikipedia.org/wiki/Color_theory)
https://en.wikipedia.org/wiki/Complementary_colors (https://en.wikipedia.org/wiki/Complementary_colors)
http://i.imgur.com/vDHMURo.jpg (http://i.imgur.com/vDHMURo.jpg) - chronologically ordered set of different color systems
Color Balance (#post_color_balance)
https://en.wikipedia.org/wiki/Color_balance (https://en.wikipedia.org/wiki/Color_balance)
Color Cycling, seePalette Swap - Color Cycling (#post_color_cycling)
Color Depth (#post_color_depth)
https://en.wikipedia.org/wiki/Color_depth (https://en.wikipedia.org/wiki/Color_depth)
Color Model - HSL/HSV(HSB) (#post_color_model_hsl_hsv)
https://en.wikipedia.org/wiki/HSL_and_HSV (https://en.wikipedia.org/wiki/HSL_and_HSV)
Color Model - RGB (#post_color_model_rgb)
https://en.wikipedia.org/wiki/RGB_color_model (https://en.wikipedia.org/wiki/RGB_color_model)
Color Gradient/Ramp/Shift (#post_color_gradient_ramp_shift)
(http://dennisbusch.de/shared/paag/PAGlossary_ColorGradientRampShift.png)
further reading:
https://en.wikipedia.org/wiki/Color_gradient (https://en.wikipedia.org/wiki/Color_gradient)
https://en.wikipedia.org/wiki/Tints_and_shades (https://en.wikipedia.org/wiki/Tints_and_shades)
http://www.dennisbusch.de/dcgg.php (http://www.dennisbusch.de/dcgg.php) - Dynamic Color Gradient Generator
Color Scheme (#post_color_scheme)
https://en.wikipedia.org/wiki/Color_scheme (https://en.wikipedia.org/wiki/Color_scheme)
Color Space (#post_color_space)
https://en.wikipedia.org/wiki/Color_space (https://en.wikipedia.org/wiki/Color_space)
Commodore 64 (#post_c64)
https://en.wikipedia.org/wiki/Commodore_64 (https://en.wikipedia.org/wiki/Commodore_64)
Composition (#post_composition)
https://en.wikipedia.org/wiki/Composition_(visual_arts) (https://en.wikipedia.org/wiki/Composition_(visual_arts))
Construction (#post_construction)
(http://dennisbusch.de/shared/paag/PAGlossary_Construction.png)
further reading:
https://en.wikipedia.org/wiki/Drawing#Form_and_proportion (https://en.wikipedia.org/wiki/Drawing#Form_and_proportion)
https://www.google.com/?q=drawing+fundamentals+construction (https://www.google.com/?q=drawing+fundamentals+construction)
Contour (#post_contour)
The thin fringe (drawn or perceived) between everything that is part of an object and everything that is not part of that object.
Contrast (#post_contrast)
A difference between any two things. Hues can contrast (see complementary colors). Values can contrast. Shapes can contrast (e.g. round shapes contrast pointy shapes). Lines can contrast (horizontals contrast verticals, wavy lines contrast straights). Pretty much any thing has the potential to create a strong perceptual difference between itself and something else.
Cross Section (#post_cross_section)
https://en.wikipedia.org/wiki/Cross_section_(geometry) (https://en.wikipedia.org/wiki/Cross_section_(geometry))
--- D ---
Digital Mixing Of Color (#post_digital_color_mixing)
Is done by changing the components of a color in a digital color model (such as RGB) or by placing differently colored pixels close to each other (mixing by proximity, called Dithering).
https://en.wikipedia.org/wiki/Additive_color (https://en.wikipedia.org/wiki/Additive_color)
https://en.wikipedia.org/wiki/Color_mixing (https://en.wikipedia.org/wiki/Color_mixing)
Dithering (#post_dithering)
Dither-AA (#post_dither_aa)
(http://dennisbusch.de/shared/paag/PAGlossary_Dithering.png)
further reading:
https://en.wikipedia.org/wiki/Dither (https://en.wikipedia.org/wiki/Dither)
https://en.wikipedia.org/wiki/Dither#Digital_photography_and_image_processing (https://en.wikipedia.org/wiki/Dither#Digital_photography_and_image_processing)
Drawing (#post_drawing)
https://en.wikipedia.org/wiki/Drawing (https://en.wikipedia.org/wiki/Drawing)
--- E ---
EGA (#post_ega)
https://en.wikipedia.org/wiki/Enhanced_Graphics_Adapter (https://en.wikipedia.org/wiki/Enhanced_Graphics_Adapter)
Elevation (#post_elevation)
https://en.wikipedia.org/wiki/Multiview_orthographic_projection#Elevation (https://en.wikipedia.org/wiki/Multiview_orthographic_projection#Elevation)
--- F ---
Format (#post_format)
For pixel art, make sure to use any "lossless compression" format. PNG is a good one.
https://en.wikipedia.org/wiki/Image_file_formats (https://en.wikipedia.org/wiki/Image_file_formats)
Fragment, see Cluster (#post_cluster)
Foreshortening (#post_foreshortening)
https://en.wikipedia.org/wiki/Perspective_(graphical)#Foreshortening (https://en.wikipedia.org/wiki/Perspective_(graphical)#Foreshortening)
--- G ---
Gesture (#post_gesture)
https://en.wikipedia.org/wiki/Gesture_drawing (https://en.wikipedia.org/wiki/Gesture_drawing)
https://www.youtube.com/watch?v=74HR59yFZ7Y (https://www.youtube.com/watch?v=74HR59yFZ7Y) - How to Draw Gesture by Stan Prokopenko
Gradient (#post_gradient), regular and irregular, following an outline, following a volume
(pillow shading = gradient hugs an outline/contour instead of wrapping across a surface or following light/shadow logic over a volume)
Graphic Mode (#post_graphic_mode)
https://en.wikipedia.org/wiki/Computer_display_standard (https://en.wikipedia.org/wiki/Computer_display_standard)
http://www.studiostyle.sk/dmagic/gallery/gfxmodes.htm (http://www.studiostyle.sk/dmagic/gallery/gfxmodes.htm) - some C64 Graphic Modes
Graphical Projection, see Projection (#post_projection)
GIF (#post_gif)
https://en.wikipedia.org/wiki/GIF (https://en.wikipedia.org/wiki/GIF)
--- H ---
History Of Pixel Art (#post_history_pa)
see The History Of Pixel Art (http://pixelation.org/index.php?topic=19575.0)
Hue (#post_hue)
https://en.wikipedia.org/wiki/Hue (https://en.wikipedia.org/wiki/Hue)
Hue Shift (#post_hue_shift)
A Color Shift in which the Hue property of the initial color is shifted to another Hue. Often (arbitrarily) used to render the light and dark parts of shaded volumes with a different Hue in addition to a different Lightness. There are observable phenomena in nature which show shifts in Hue (see also Color) under some lighting conditions.
--- I ---
Image (#post_image)
https://en.wikipedia.org/wiki/Digital_image (https://en.wikipedia.org/wiki/Digital_image)
https://en.wikipedia.org/wiki/Raster_graphics (https://en.wikipedia.org/wiki/Raster_graphics)
Indexed Image/Color (#post_indexed_image)
An image saved with a limited amount of colors, each color refered to in the raster as the index number at which it occurs in the palette, see also palette.
https://en.wikipedia.org/wiki/Indexed_color (https://en.wikipedia.org/wiki/Indexed_color)
Index Painting (#post_index_painting)
Creating Pixel Art in Indexed Modes, working with Indexed Images while paying attention to Palette Structure (#post_palette_structure) and keeping possible Palette Effects (#post_palette_effect) in mind and at all times keeping control over (if necessary by fixing the results) the pixel level polish of a piece even when using tools that influence more than one pixel at a time.
Historically, "Index Painting" is the natural way to go and think about making Pixel Art as most hardware and digital image editing tools either used Indexed Modes as the default mode or simply did not provide any other modes. The term "Index Painting" was not around then because there simply was nothing else. Today the term seems to be used to set "Pixel Art"(in the sense of Index Painting) apart from other "Pixel Art"(in the sense of Digital Painting and Computer Generated Imagery(e.g. 3D renderings)) and the third kind of "Pixel Art"(the purists "one pixel at a time"- process).
Some advocate placing one pixel at a time as the only "allowed" process to create "Pixel Art"(a term which eludes definition itself) while others advocate whether something is or is not "Pixel Art" can not be defined by processes but only by looking at the results.
The actual term "Index Painting" emerged from the on-going online debate about "pixel purism", processes and results:
http://www.danfessler.com/blog/pixel-purism-process-vs-results (http://www.danfessler.com/blog/pixel-purism-process-vs-results)
http://www.danfessler.com/blog/hd-index-painting-in-photoshop (http://www.danfessler.com/blog/hd-index-painting-in-photoshop)
Isometric Projection (#post_isometric_projection)
https://en.wikipedia.org/wiki/Isometric_projection (https://en.wikipedia.org/wiki/Isometric_projection)
https://en.wikipedia.org/wiki/Isometric_graphics_in_video_games_and_pixel_art (https://en.wikipedia.org/wiki/Isometric_graphics_in_video_games_and_pixel_art)
Isometric Pixel Art Cheat Sheet (http://www.dennisbusch.de/knowhow.php?001_x=1)
--- J ---
JPG, JPEG (#post_jpg)
This lossy digital image format is unsuitable to store pixel art because of compression artifacts.
https://en.wikipedia.org/wiki/JPEG (https://en.wikipedia.org/wiki/JPEG)
--- K ---
Key, see Value & Key (#post_value)
--- L ---
Layer (#post_layer)
https://en.wikipedia.org/wiki/Layers_(digital_image_editing) (https://en.wikipedia.org/wiki/Layers_(digital_image_editing))
https://en.wikipedia.org/wiki/2D_computer_graphics#Layers (https://en.wikipedia.org/wiki/2D_computer_graphics#Layers)
Lossy&Lossless Compression (#post_lossy_lossless_compression)
https://en.wikipedia.org/wiki/Image_file_formats#Image_file_compression (https://en.wikipedia.org/wiki/Image_file_formats#Image_file_compression)
Line (#post_line) purpose and functions of a line
todo:
Line Art (emphasize the difference between a painterly sketch here and present line art as a way to define a depiction of something without fully rendering it, also mention variations in line-width effects and point out the perceptual thickness of lines in relation to resolution and shape size of any part of something)
Limitations (see Restrictions (#post_restrictions))
Lighting (#post_lighting)
https://en.wikipedia.org/wiki/Lighting (https://en.wikipedia.org/wiki/Lighting)
Lightness (aka Value, aka Tone) (#post_lightness)
https://en.wikipedia.org/wiki/Lightness (https://en.wikipedia.org/wiki/Lightness)
--- M ---
Mode, see Graphics Mode (#post_graphics_mode)
Monochromatic Color (#post_monochromatic_color)
All tints, tones and shades of equal hue.
https://en.wikipedia.org/wiki/Color_scheme#Monochromatic_colors (https://en.wikipedia.org/wiki/Color_scheme#Monochromatic_colors)
https://en.wikipedia.org/wiki/Monochromatic_color (https://en.wikipedia.org/wiki/Monochromatic_color)
Motion Blur (#post_motion_blur)
Visual swooshy action hints or the perceived blur along the path of movement of an object when your camera or eyes can not sample it fast enough to get a crisp image.
MSX (#post_msx)
https://en.wikipedia.org/wiki/MSX (https://en.wikipedia.org/wiki/MSX)
--- N ---
NES (#post_nes)
https://en.wikipedia.org/wiki/Nintendo_Entertainment_System (https://en.wikipedia.org/wiki/Nintendo_Entertainment_System)
Negative Space (#post_negative_space)
All space that does not contain anything of the currently observed object.
https://en.wikipedia.org/wiki/Negative_space (https://en.wikipedia.org/wiki/Negative_space)
--- O ---
Oblique Projection (#post_oblique_projection)
https://en.wikipedia.org/wiki/Oblique_projection (https://en.wikipedia.org/wiki/Oblique_projection)
Oekaki (#post_oekaki)
https://en.wikipedia.org/wiki/Oekaki (https://en.wikipedia.org/wiki/Oekaki)
Orthographic Projection (#post_orthographic_projection)
https://en.wikipedia.org/wiki/Orthographic_projection (https://en.wikipedia.org/wiki/Orthographic_projection)
Outline (#post_outline)
Line around a shape.
--- P ---
PNG (#post_png)
https://en.wikipedia.org/wiki/Portable_Network_Graphics (https://en.wikipedia.org/wiki/Portable_Network_Graphics)
Palette (#post_palette)
https://en.wikipedia.org/wiki/Palette_(computing) (https://en.wikipedia.org/wiki/Palette_(computing)) ( https://en.wikipedia.org/wiki/Indexed_color (https://en.wikipedia.org/wiki/Indexed_color) )
https://en.wikipedia.org/wiki/List_of_color_palettes (https://en.wikipedia.org/wiki/List_of_color_palettes)
https://en.wikipedia.org/wiki/List_of_video_game_console_palettes (https://en.wikipedia.org/wiki/List_of_video_game_console_palettes)
Palette Effect (#post_palette_effect)
In Indexed Images/Modes where each pixel in the image refers to a specific color in a sequence of colors(=palette) (instead of holding the full definition of the color in each individual pixel itself), a number of visual effects such as Color Cycling and Color Fading can be achieved by manipulating the palette instead of manipulating the pixels themselves.
This was used a lot on old hardware as manipulating the definition of colors in the palette took much fewer CPU cycles than going through the image and changing the actual pixels themselves.
A simple example for a Palette Effect is just re-defining a color in the palette:
If a thousand pixels in an image referred to color at index five in the palette and index five would hold Green and index twelve would hold Red, all thousand pixels could be changed to Red by changing the color at index five from Green to Red instead of going through the image and looking for every Green pixel and changing the pixel itself to refer to index twelve.
Palette Structure (#post_palette_structure)
(http://dennisbusch.de/shared/paag/PAGlossary_PaletteStructure.png)
Palette Swap (#post_palette_swap)
(http://dennisbusch.de/shared/paag/PAGlossary_PaletteSwap.png)
further reading:
https://en.wikipedia.org/wiki/Palette_swap (https://en.wikipedia.org/wiki/Palette_swap)
Palette Swap - Color Cycling (#post_color_cycling)
(http://dennisbusch.de/shared/paag/PAGlossary_ColorCycling.gif)
further reading:
https://en.wikipedia.org/wiki/Color_cycling (https://en.wikipedia.org/wiki/Color_cycling)
HTML5 Color Cycling Demo (http://www.effectgames.com/demos/canvascycle/) - Art by Mark Ferrari Code by Joseph Huckaby
Painting With Pixels (#post_painting_with_pixels)
Painting with pixels means to apply blobs/clusters of colored pixels to the raster while thinking like a painter would think with traditional brushes and paint. The difference in (strict) Pixel Art is that the newly placed pixels do not blend or mix in any way with the pixels which are already there on the raster but instead fully replace them (unlike paint which mixes with the paint already on the canvas). Most Pixel Art editing software still has a multitude of painting or brush modes and layer effects though which can still cause a placed blob of pixels to blend/mix with the pixels that are already there.
https://en.wikipedia.org/wiki/Painting (https://en.wikipedia.org/wiki/Painting)
Parallel Projection (#post_parallel_projection)
(http://dennisbusch.de/shared/paag/PAGlossary_ParallelProjection.png)
further reading:
https://en.wikipedia.org/wiki/Parallel_projection (https://en.wikipedia.org/wiki/Parallel_projection)
Perspective (#post_perspective)
https://en.wikipedia.org/wiki/Perspective_(graphical) (https://en.wikipedia.org/wiki/Perspective_(graphical))
todo: (horizon, vanishing points, planes, measuring points, camera height and angle)
Perspective Projection (#post_perspective_projection)
(http://dennisbusch.de/shared/paag/PAGlossary_PerspectiveProjection.png)
further reading:
https://en.wikipedia.org/wiki/Perspective_(graphical) (https://en.wikipedia.org/wiki/Perspective_(graphical))
Perception (#post_perception)
https://en.wikipedia.org/wiki/Perception (https://en.wikipedia.org/wiki/Perception)
Picture Plane (#post_picture_plane)
https://en.wikipedia.org/wiki/Picture_plane (https://en.wikipedia.org/wiki/Picture_plane)
Pillow Shading (#post_pillow_shading)
(http://dennisbusch.de/shared/paag/PAGlossary_PillowShading.png)
Pixel (#post_pixel), an element in a digital raster image
https://en.wikipedia.org/wiki/Pixel (https://en.wikipedia.org/wiki/Pixel)
Plan (#post_plan)
further reading:
https://en.wikipedia.org/wiki/Plan_(drawing) (https://en.wikipedia.org/wiki/Plan_(drawing))
Projection (Graphical) (#post_projection)
todo: overview image with different projections
further reading:
https://en.wikipedia.org/wiki/Graphical_projection (https://en.wikipedia.org/wiki/Graphical_projection)
https://en.wikipedia.org/wiki/Floor_plan (https://en.wikipedia.org/wiki/Floor_plan)
https://en.wikipedia.org/wiki/Multiview_orthographic_projection (https://en.wikipedia.org/wiki/Multiview_orthographic_projection)
--- Q ---
--- R ---
Raster (#post_raster)
https://en.wikipedia.org/wiki/Raster_graphics (https://en.wikipedia.org/wiki/Raster_graphics)
Ratio, see Aspect Ratio (#post_aspect_ratio)
Ramp (#post_ramp)
(todo: linear, non-linear, refer also to intersection between ramps, talk about value, hue and saturation here as well)
Resolution (#post_resolution)
https://en.wikipedia.org/wiki/Display_resolution (https://en.wikipedia.org/wiki/Display_resolution)
https://en.wikipedia.org/wiki/Image_resolution (https://en.wikipedia.org/wiki/Image_resolution)
Restrictions (#post_restrictions)
Restrictions are arbitrarily chosen or real (by hardware limits) limitations imposed upon a work of (pixel) art. The limitations include figures on resolution (horizontal and vertical dimensions of the piece in number of pixels), number of colors which apply globally to the whole image and sometimes additional local restrictions per Attribute Cell.
Rendering (#post_rendering)
The process of applying value, color and texture to an imagined or wireframed structure in order to arrive at the final depiction of something.
--- S ---
Saturation (#post_saturation)
The perceived intensity of a specific color(hue).
https://en.wikipedia.org/wiki/Colorfulness (https://en.wikipedia.org/wiki/Colorfulness)
Selout (#post_selout)
todo: selective outlining
Set (#post_set)
An un-ordered collection of things: e.g. { Banana, Cherry, Pineapple, Motor Oil }
Sequence (#post_sequence)
An ordered collection of things, so that each thing in the collection can be referred to explicitly by its index(the 1st element often gets assigned to index 0): e.g. { 0: hamster, 1: gasoline, 2: torch, 3: book of sinister implications }
Shade (#post_shade)
https://en.wikipedia.org/wiki/Tints_and_shades (https://en.wikipedia.org/wiki/Tints_and_shades)
Shading (#post_shading)
The process of applying different tints, tones and shades upon volumes in accordance with one or more real or imagined lightsources which illuminate those volumes. The goal of shading is to create an illusion of three-dimensionality on a two-dimensional surface(the canvas or raster).
Shape (#post_shape)
A shape is a two dimensional entity. Cutting through a volume with a plane reveals a shape along the cut (see also Cross Section).
https://en.wikipedia.org/wiki/Shape (https://en.wikipedia.org/wiki/Shape)
Shape Bluffing (#post_shape_bluffing)
Shape Bluffing means to add abstract detail instead of rendering any specific texture onto a surface. Shapes themselves are two dimensional but the abstract detail added by "Shape"-Bluffing often appears to be three dimensional or aims to add a three-dimensional appearance to the surface/volume over which it is spread.
further reading:
http://pixeljoint.com/pixelart/30531.htm (http://pixeljoint.com/pixelart/30531.htm)
Sketch (#post_sketch)
A deliberately rough representation of anything, intended as a base for further work or just to capture a thought/idea or to explore different angles and details of a subject in preparation for a polished work or design. Synonymous with doodle.
Sprite (#post_sprite)
https://en.wikipedia.org/wiki/Sprite_(computer_graphics) (https://en.wikipedia.org/wiki/Sprite_(computer_graphics))
Style (#post_style)
A usually limited set of specific ways to depict something, used consistently to achieve a unified look&feel across several elements of a larger collection of pieces.
https://en.wikipedia.org/wiki/Style_(visual_arts) (https://en.wikipedia.org/wiki/Style_(visual_arts))
SVGA (#post_svga)
https://en.wikipedia.org/wiki/Super_video_graphics_array (https://en.wikipedia.org/wiki/Super_video_graphics_array)
--- T ---
Tall Pixel (#post_tall_pixel)
Pixel with an Aspect Ratio of 1:2 or any pixel which is taller than it is wide.
Texture (#post_texture)
https://en.wikipedia.org/wiki/Texture_(visual_arts) (https://en.wikipedia.org/wiki/Texture_(visual_arts))
https://en.wikipedia.org/wiki/Texture_mapping (https://en.wikipedia.org/wiki/Texture_mapping)
Tile & Tileset (#post_tile_and_tileset)
https://en.wikipedia.org/wiki/Tile-based_video_game (https://en.wikipedia.org/wiki/Tile-based_video_game)
https://en.wikipedia.org/wiki/Tile_engine (https://en.wikipedia.org/wiki/Tile_engine)
https://en.wikipedia.org/wiki/Tiled_rendering (https://en.wikipedia.org/wiki/Tiled_rendering)
Tint (#post_tint)
https://en.wikipedia.org/wiki/Tints_and_shades (https://en.wikipedia.org/wiki/Tints_and_shades)
Tone, see Value (#post_value)
--- U ---
--- V ---
Value (#post_value) & Key (#post_key)
(http://dennisbusch.de/shared/paag/PAGlossary_ValueAndKey.png)
see also Brightness, Lightness & Value (#post_brightness_lightness_value)
VGA (#post_vga)
https://en.wikipedia.org/wiki/Video_Graphics_Array (https://en.wikipedia.org/wiki/Video_Graphics_Array)
Visual Arts (#post_visual_arts)
https://en.wikipedia.org/wiki/Outline_of_the_visual_arts (https://en.wikipedia.org/wiki/Outline_of_the_visual_arts)
Video Game Graphics (#post_video_game_graphics)
https://en.wikipedia.org/wiki/Video_game_graphics (https://en.wikipedia.org/wiki/Video_game_graphics)
Volume (#post_volume)
A three-dimensional body in a three dimensional cartesian coordinate system (e.g. sphere, cuboid, cone, cylinder, pyramid). To get a strong illusion of volumes on a two dimensional surface, it is desirable to employ a suitable projection in addition to shading the volumes consistently according to imagined lightsources and utilizing texture to emphasize surface curvature.
--- W ---
Wireframing (#post_wireframing)
A quick way to define Volumes first in sketches and in construction without having to fully render them. Also useful to draw the invisible sides of objects to find correct placement and proportion of things which are partially covered by other things.
https://en.wikipedia.org/wiki/Wire-frame_model (https://en.wikipedia.org/wiki/Wire-frame_model)
Wide Pixel (#post_wide_pixel)
Pixel with an Aspect Ratio of 2:1 or any pixel that is wider than it is tall.
--- X ---
X-axis (#post_x_axis)
The first dimension in a Cartesian Coordinate System.
--- Y ---
y-axis (#post_y_axis)
The second dimension in a Cartesian Coordinate System.
--- Z ---
z-axis (#post_z_axis)
The third dimension in a Cartesian Coordinate System.
ZX Spectrum (#post_zx_spectrum)
https://en.wikipedia.org/wiki/ZX_Spectrum (https://en.wikipedia.org/wiki/ZX_Spectrum)
-
I realise this falls under a sub category of correct lighting, but can we get a formal definition of the embossed/sticker effect that a lot of pixel art (and art in general) suffers from in some small way or another?
I'd group pillow shading in the same category, and Cure's tutorial addresses it, but no one seems to be formalising a mistake* a lot of skilled pixel artists (http://wayofthepixel.net/index.php?topic=17866.msg159546#msg159546) even make sometimes.
*I realise you don't want to say these are incorrect. I am simply implying they are unintentional.
-
I realise this falls under a sub category of correct lighting, but can we get a formal definition of the embossed/sticker effect that a lot of pixel art (and art in general) suffers from in some small way or another?
I'd group pillow shading in the same category, and Cure's tutorial addresses it, but no one seems to be formalising a mistake* a lot of skilled pixel artists (http://wayofthepixel.net/index.php?topic=17866.msg159546#msg159546) even make sometimes.
*I realise you don't want to say these are incorrect. I am simply implying they are unintentional.
Sure something like that could be included somehow if we can think of a good descriptive term for the "issue". That way of shading does not seem incorrect per-se but rather a mismatch between a few things: the volume suggested by outline, the conditioned imagination of a viewers idea of a round belly volume, the way the belly was actually shaded with clusters hugging the outline which do not match the direction of light and do not support the definition of the volume due to that... ... it's a complex "problem", hard to formalize and put a term on.
Closest I can think of from the top of my head is "Contextual Shape/Volume Perception Mismatch". That would be quite the monstrosity of a term though, so this might be something too specific to include in a Glossary and could perhaps better be handled in auxiliary texts or tutorials which may be free in themselves to be not purely descriptive and include suggestions for best practices while referring to terms from the Glossary in their descriptions of the hows and whys and reasons and context.
-
I just wanted to say, this is the kind of information which is well represented in the form of a wiki : This way, the glossary article is linked whenever the same word is mentioned in an other article. Wiki also helps linking articles -> categories -> other articles in same category.
As for the words, I would add :
- sketch (in the sense of : deliberately rough representation, intended as a base for further work)
- painting (in the sense of : the technique of laying colors on top of each others, the new color replacing completely the previous ones)
- line art
- ramp (to explain "non-linear ramp" and "intersecting ramps" of a palette)
- color shift
- color space
-
I just wanted to say, this is the kind of information which is well represented in the form of a wiki : This way, the glossary article is linked whenever the same word is mentioned in an other article. Wiki also helps linking articles -> categories -> other articles in same category.
As for the words, I would add :
- sketch (in the sense of : deliberately rough representation, intended as a base for further work)
- painting (in the sense of : the technique of laying colors on top of each others, the new color replacing completely the previous ones)
- line art
- ramp (to explain "non-linear ramp" and "intersecting ramps" of a palette)
- color shift
- color space
Yes, we could convert the first iteration of the "finished" document to a wiki and see where it goes from there (I personally would prefer a single page layout though with #anchor elements to link to individual terms for referring to them in discussion and as a good overview of all the things that we're dealing with in pixels and art.). Added your words to the opening post.
-
Completed the first description:
(http://dennisbusch.de/shared/paag/PAGlossary_AliasingAndAntialiasing.png)
update, added Banding next as it relates closely to Aliasing:
(http://dennisbusch.de/shared/paag/PAGlossary_Banding.png)
-
Added entry for Animation:
(http://dennisbusch.de/shared/paag/PAGlossary_Animation.gif)
-
Added entry for Area:
(http://dennisbusch.de/shared/paag/PAGlossary_Area.png)
-
Maybe you can take something from this.
(https://dl.dropboxusercontent.com/u/15588722/aa.png)
-
That is a good ref sheet.
The math behind averaging samples to do AA is imo better left to be described in detail in an AA tutorial. The glossary description should be kept brief without going into detailing the "how" too much. Does anyone even do the math when applying AA? (I personally always go by feeling, constantly keeping an eye on the 1:1 view and also, strictly following the math does not always help to convey the intended direction of a curve... but yeah, I think that's all best to detail in an article/tutorial about AA strategies.).
The AA qualities of Value independent of Color should probably be mentioned/hinted at in the entry for Value.
-
entry for Attribute Cells added:
(http://dennisbusch.de/shared/paag/PAGlossary_AttributeCells.png)
edit: updated with a better example
-
I doubt anyone does the math for AA, and it gets a lot more complex if you use different colours than just pure greyscale.
But I think it maybe helps to show the principle a bit. I know it helped me when I finally understood that.
-
Should definitely be detailed in an AA tutorial. The math is conceptually not too complex but sufficiently complex to not fit into a condensed description.
entry for Attribute Clash added and Attribute Cells entry updated again:
(http://dennisbusch.de/shared/paag/PAGlossary_AttributeClash.png)
-
added entry for Bitmap & Bitdepth:
(http://dennisbusch.de/shared/paag/PAGlossary_BitmapAndBitdepth.png)
-
completed entry for Blur:
(http://dennisbusch.de/shared/paag/PAGlossary_Blur.png)
-
That reminds me of these two curiosities:
(http://i.imgur.com/etSBfEa.png)(http://i.imgur.com/iZJm84b.png)
-
Yes, the blur in those two seems very much intentional to emulate the perceptual blur effect on forms under certain light conditions and in areas out of focus.
finished entry for Brightness:
(http://dennisbusch.de/shared/paag/PAGlossary_BrightnessLightnessAndValue.png)
-
Not just the brightness is perceptual though, also the saturation and the color temperature, might be worth to make a extra entry about that.
-
Saturation is already in the list in the opening post (which is the todo list and the current version of Glossary at the same time).
What do you have in mind when you say color temperature? The scientific definition appears to be precise and not open to interpretation (not perceptual).
Are you referring to some art color temperature model, something like "blue means cold", "red means warm"? Is there a good article to read on it? I would not know what to write on Color Temperature in the sense of something which is left to perception at the moment, so I'll need help with that.
(edit: I only mention Brightness specifically as perceptual to emphasize how it differs from Lightness and Value because these three are often used to refer to the same thing when they really mean different things.)
-
I mean that colors are perceived differently depending on their surrounding is a general concept that doesn't just apply to brightness, but also to saturation and color temperature. So a gray pixel surrounded by blue will be perceived as "warm", but the same pixel surrounded by red will be perceived as cold. Just like a gray pixel surrounded by black appears bright and a gray pixel surrounded by white appears dark.
-
Where do these ideas of "warm" and "cold" come from though? ( I learned that stuff back in school I think but I forgot the origins and currently I am thinking it makes no sense to judge a color as warm or cold unless there is some psychological/art color model behind it. )
-
I think warm/cold are descriptive words for a type of sensation/feeling. Color corresponds to wavelengths of light, and the wavelengths are more or less intense for blue verses red, etc.. blue bounces more easily than red, so red feels more intense because it hits more directly. It may not be warm in temperature sense, but using that terminology is a way of translating the sense into something understandable I guess. There might be a better word for it?
-
Warm/Cold are defined and qualified as part of Color Theory : https://en.wikipedia.org/wiki/Color_theory#Warm_vs._cool_colors
The main reference linked by Wikipedia : http://www.handprint.com/HP/WCL/color12.html
-
Warm and Cold are the two opposite halves on the hue wheel.
(http://designshack.net/wp-content/uploads/warm-wheel.jpg)
As we know there are the three primary colors, Red, Green and Blue, our eyes are most sensitive to Greens, followed by Reds, then Blues. When we split the color wheel as above we have one side that has large amounts of blue in it (the "cold" side) and one side that has large amounts of red in it (the "warm" side), greens are equally present in both sides.
For the most time all light we had was based on fire, which falls on the red side of the spectrum, thus the "warm" and "cold" dichotomy. When we exclude modern light sources such as "cold" LEDs and computer screens then we can apply the general rule that lit areas are "warmer" and unlit areas are "colder", because during day the red wavelength of indirect sunlight gets absorbed by the atmosphere, and during night we have the red, fire based, light source.
-
That is a lot of information to digest.
I also noted that it is sometimes very difficult to select and condense the most important bits of information/description of a term into a brief, comprehensible version. It might be a good idea to add links to wikipedia/other sources as "further reading" to individual entries in the Glossary.
-
On the subject of further reading: https://docs.krita.org/Gamma_and_Linear is a nice graphic illustration of color mixing, and particularly why painting with lowered opacity, or taking two sets of sRGB values and averaging them, is often not good (dull or outright wrong looking). Posted particularly for its relevance to 'Color space' and 'Ramp'. (GPick is a good tool for exploring color spaces (http://www.gpick.org/help/color-picker.html), FWIW.. it also offers color scheme tools, which can be a help in understanding the warm/cool idea)
Warm and cold, AFAIK, are just this (https://upload.wikimedia.org/wikipedia/commons/thumb/f/f1/EM_spectrum.svg/2000px-EM_spectrum.svg.png) -- ranges of light wavelength. In practice, color wheels tend to be used to simplify things. However, the color wheel posted by Mr Beast is just one color wheel -- the traditional painter's RYB wheel. Modern digital art programs tend to use an RGB wheel (ie. based on additive, not subtractive color); the wheel produced by HSV / HSL is one example of an RGB wheel.
The 'color temperature' idea is similar but more or less reversed (http://www.seesmartled.com/images/general/led-color-temperature.jpg) -- based on the visible appearance of stars and their relative temperature, AFAIK.
On a completely different topic: Where does line weight / balance fit into this? I was thinking about a few things, such as the contrast between
##..
..##
###
..##
And also the typographical concept of "Color" (https://en.wikipedia.org/wiki/Typography#Color), which is essentially what dithering aims to achieve, but is also a key part (whether in pixel, traditional, or more general CG art) of conveying impressions of relative size.
-
For the most time all light we had was based on fire, which falls on the red side of the spectrum, thus the "warm" and "cold" dichotomy. When we exclude modern light sources such as "cold" LEDs and computer screens then we can apply the general rule that lit areas are "warmer" and unlit areas are "colder", because during day the red wavelength of indirect sunlight gets absorbed by the atmosphere, and during night we have the red, fire based, light source.
Then why is a hot flame blue and a colder frame red?
The 'color temperature' idea is similar but more or less reversed (http://www.seesmartled.com/images/general/led-color-temperature.jpg) -- based on the visible appearance of stars and their relative temperature, AFAIK.
But the hotter a star is, the more blue it is?
-
@Gil: We humans usually don't have access to blue fire, so our psychology and intuition says red = hot, blue = not hot. We don't compare red fire to blue fire, we compare red fire to the coldness of the (blue-ish) winter night.
-
The 'color temperature' idea is similar but more or less reversed (http://www.seesmartled.com/images/general/led-color-temperature.jpg) -- based on the visible appearance of stars and their relative temperature, AFAIK.
But the hotter a star is, the more blue it is?
Which matches up with what you said. If you look at the linked chart, you see it goes red yellow white blue; this is as the temperature rises from 1000K to 10000K (usually temp is given in Kelvin for color temperature.)
(BTW, the quote above is of me, not Mr Beast)
I do agree with Mr Beast though. Red and yellow represent temperatures of burning material we can see close up without being flash vaporized :)
-
BTW, a blue flame does not flash vaporize you, a bunsen burner burns blue for example and you can hold your hand close to it without even getting burned. Cigarettes get up to 1100K (900° C) and they don't flash vaporize your nose ;)
According to wikipedia, warm/cold colors seems to be a pretty recent thing (18th Century), so at the time, they must've had access to blue flames already. It's more a point of landscapes being blue if they're cold, red/yellow if they're hot apparently.
-
BTW, a blue flame does not flash vaporize you, a bunsen burner burns blue for example and you can hold your hand close to it without even getting burned. Cigarettes get up to 1100K (900° C) and they don't flash vaporize your nose ;)
Yep, I was actually thinking of that example as I was composing that text. Not sure what I was thinking.. probably 'eh, close enough for government work.'
-
Added entry for Color. Decided the scientific color theory is not as immediately interesting for picking colors in art as a theory based first on human emotions and human observers, human perception is. The scientific color theory (wavelengths, etc.) works independent from human perception and does not attribute human emotional interpretations to colors.
The video linked to below (51m15s) documents where the idea of light/darkness, warmth/cold as perceptual, emotional attributes to some ranges of color came from.
Color
(http://dennisbusch.de/shared/paag/PAGlossary_Color.png)
----------------------------------------------
Yellow and Blue form the basis of all colors
in the color wheel.
A colored fluid in either color will intensify
different depending on the depth of the fluid.
Yellow to red is associated with the
properties of light and warmth.
Blue to violet is associated with the
properties of darkness and cold.
Colors opposite of each other in the wheel
are called complementary colors.
These perceptual concepts of colors differ
from the scientific color theory which is fully
independent of a human observer.
----------------------------------------------
video: https://www.youtube.com/watch?v=MmhSXTMTtJM "Light Darkness And Colours - A Fascinating Journey Through The Universe Of Colours" 51m15s
further reading:
https://en.wikipedia.org/wiki/Theory_of_Colours
https://en.wikipedia.org/wiki/Color_theory
----------------------------------------------
edit: Also added "further reading" links to some of the already finished entries.
-
I think warm/cold are descriptive words for a type of sensation/feeling. Color corresponds to wavelengths of light, and the wavelengths are more or less intense for blue verses red, etc.. blue bounces more easily than red, so red feels more intense because it hits more directly. It may not be warm in temperature sense, but using that terminology is a way of translating the sense into something understandable I guess. There might be a better word for it?
Maybe terms could be "emotional color temperature" and "scientific color temperature".
-
about color-
warm and cool aren't quite so black and white. there are warm and cool yellows, warm and cool purples, it's all relative really. yellow might be associated with sunlight, but not light generally, the light could be any color (you see blue secondary light sources overused a lot, for instance). I don't understand the "red/yellow are the basis of all colors bit", the additive primaries are red, green, and blue. subtractive primaries are red, yellow, blue (or cyan, magenta, yellow).
-
I understood Goethe's observations as mood/emotion based, at least from what was shown in the video I linked (have not read his book on it). As I understand it, it's an emotional color system, concerned with human perception and interpretation of color, attributing human emotions to colors.
How a color is produced from primaries is not what the "yellow and blue form the basis" is about. I believe when he placed yellow(light in the sense of "not heavy or bright/cheerful" not as in light source) and blue (darkness in the sense of "heavy mood") as the "basis" he did not mean as the basis to mix colors but as the basis to establish two opposites in human emotion.
-
I might need to read his book. Color Mixing from primaries will be explained in a different entry.
-
about color-
warm and cool aren't quite so black and white. there are warm and cool yellows, warm and cool purples, it's all relative really. yellow might be associated with sunlight, but not light generally, the light could be any color (you see blue secondary light sources overused a lot, for instance). I don't understand the "red/yellow are the basis of all colors bit", the additive primaries are red, green, and blue. subtractive primaries are red, yellow, blue (or cyan, magenta, yellow).
Yellow can't be cool..
There are neutral colors though (green and magenta), which arise when a warm and cool color blend/cross.
Goethe's color theory is really great, and focuses around the idea that color emerges from the boundary of light and dark.
If you hold up a pinhole to your eye and look at for example the edges of a window or something where light/dark creates a sharp edge(using sunlight).. You will see the edge have either a red/yellow band or a blue/cyan band.
The colors you see are due to the crossing/bending of light/dark. It isn't just simply light. That's my understanding of it.
-
Yes, I believe he establishes it around the observations that if there is only 100% light, there is no color, if there is only 100% darkness, there is no color either. Color emerges where light and dark are "mixed" according to what he saw.
Then an attribution is made. Yellow is assigned to light but also to "light" in the emotional/mood sense. Similar double attribution is made to blue for darkness. So... well, light and dark form the basis for his color wheel really.
edit: One could probably go as far as calling light and darkness "emotional primaries" or primary emotions. Other emotions are mixtures of those.
-
warm yellow- cadmium yellow
cool yellow- lemon yellow
it's relative. one has a bias toward green, the other toward red. some painters advise getting a warm and cool version of each color for your palette.
-
I think when speaking in terms of color, and judging whether a color is warm or cold, you have to take into consideration the totality of what warm/cold colors are, and that requires looking at the whole spectrum.
If you are judging two yellows and saying one is cooler and the other is warmer, I think it could also be said that one is less warm and the other is more warm. What you're really determining, though, is how much light/dark there is in the color (from the perspective of light versus lack of light; space).
If you look at the dynamic of color, a warm color will have half in the lighter side and half in the darker side. The lighter half is yellow, and the darker half is red.
The same dynamic is present in the cool color; You have half in the lighter side (cyan), and half in the darker side (blue).
When dark crosses with dark, you get magenta. When light crosses with light, you get green.
So a greenish-yellow would more of a Neutral Light Color. A magenta-red would be more of a Neutral Dark Color.
A yellow-red would be a Warm Color that is between light/dark. A cyan-blue would be a Cool Color between light/dark.
Color blends are basically different percentages of the dark/light sides, or the warm/cold sides.
So there is a Light/Dark color and a Warm/Cold color. They cross with each other to produce the full spectrum. When warm crosses with cold, you get neutral light or dark colors. When you cross light or dark colors, you get neutral warm or cool colors.
That is how I consider color, and the theory I follow. I don't know if Goethe's theory classifies things in this manner, but I feel how I've defined it is the best way if you want to look at color as being warm/cold.
-
Or in other words, like brightness, temperature is a scale. Some colors are warmer than others, even if both are "warm". A neutral color next to a dark color is considered bright, just like a neutral color next to a cold color is considered warm.
I would never have expected for this to be discussed to this extent. :P
-
Or in other words, like brightness, temperature is a scale. Some colors are warmer than others, even if both are "warm". A neutral color next to a dark color is considered bright, just like a neutral color next to a cold color is considered warm.
Yeah, this is the opponent process (which is biological, rather than psychological -- your color perception being tired by more intense colors and being distorted in the opposite direction as a result). It's a primary cause of the "newbie art is oversaturated, pro art is understated in saturation" outcome, and IMO needs to be covered somewhere -- in color mixing, I guess.
The crappiness of HSV/HSL et al introduce further confusion into the subject: When you pick a bright yellow and darken it by dropping V / L, it can become greenish (ie. cooler). But that's an artefact of the simplicity of that color model. Color models that actually try to be true to life, like LAB / LCH, do not have this issue: when you pick a bright yellow and drop L down, you get a pretty-much-as-expected brown, with very similar level of warmth. So HSV / HSL are not very good tools for discussing this subject.
-
I came across a chronologically ordered set of color systems. I thought it was interesting, so figured I'd share it.
http://i.imgur.com/vDHMURo.jpg
-
Ah, board is back up. Added that chronological overview of different color systems to the further reading section of the Color entry.
Also added a few new images and further reading entries on some of the previous entries.
new images:
(http://dennisbusch.de/shared/paag/PAGlossary_PerspectiveProjection.png) (http://dennisbusch.de/shared/paag/PAGlossary_ParallelProjection.png)
(http://dennisbusch.de/shared/paag/PAGlossary_CabinetProjection.png) (http://dennisbusch.de/shared/paag/PAGlossary_CavalierProjection.png)
-
I like these. Particularly the Perspective Projection one, which shows clearly the idea that a projected shape is essentially a combination of 2d graphs.
Suggestions:
* Parallel Projection: s/picuture/picture/
* "45° degrees" is like "ATM machine" -- oddly redundant. At least to me, it would make more sense to pick only one of "°" and "degrees"
-
* Parallel Projection: s/picuture/picture/
* "45° degrees" is like "ATM machine" -- oddly redundant. At least to me, it would make more sense to pick only one of "°" and "degrees"
Fixed.
-
Such a great project. I look forward to see it all come together.
About scientific and emotional explanation: It's a bit blurry. Whenever we systemize something, to understand and explain it, make it methodical, we are unwittingly having one foot back in the scientific aspect. For example, to understand the human behaviour, one can look at the neurological and chemical setup, but also study the situational behaviour, and cultural/sociological/historical elements. From biochemistry to psychology to anthropology, it's all science, generating knowledge, with a different emphasis in research. So the moment we try connect emotion with colour in a chart, we are theorizing emotion, to make it usable for artwork. There is even a science to "fun". It sort of plays into Game Theory, and is important for game designers to realize, that a player experience can be planned better than by gut feel or happenstance.
Not really important or new to you, but I felt like talking a lil' about that, it's been on my mind.
I agree with the greater relevance of psychological colour than physical property description for art.
-
Everything is about everything and everything connects with everything. But... I honestly do not think a single lifetime is long enough to explore and discuss EVERYTHING. A Glossary is like a door to a rabbit hole and a very rough overview but individual parts of the rabbit hole itself are better mapped out in detail elsewhere.
-
Agreed. You handle this well. it wasn't a critique. just felt like musing on this a lil' on the side.
This glossary will be something very special and useful.
-
Was not received as critique, just felt like a good lead-in to re-explain the purpose and scope of the term "Glossary" to everyone who might also be reading along and maybe wondering why it's not overly detailed or why I'm not including everything everyone said or says.
-
Everyone's favorite term added. Cluster! I took the liberty to broaden the originally proposed definition from "equally colored connected pixels" to "perceptually connected" and in the same breath added super-cluster, sub-cluster and fragment as terms for the mind to think about when pondering how to shape, place and combine clusters. An interesting observation is that the relationship between any two neighboring (sub)clusters, both in shape and value, has an effect on the implied orientation and direction of both clusters.
Cluster
(http://dennisbusch.de/shared/paag/PAGlossary_Cluster.png)
----------------------------------------------
A patch of perceptually connected pixels which
are part of the description of a shape, volume
or texture or any other element.
A cluster may be thought of as a fragment of
any element, as a sample of anything, as seen
by the eye or as imagined.
Shaping and shading a cluster gives direction
and orientation to the cluster itself which
also serves to give direction and orientation
to the element which the cluster aims to help
define.
Shadow and light on a cluster can be thought
of as individual (sub)clusters as well. Single,
perceptually separated pixels are not clusters
by definition.
----------------------------------------------
further reading:
http://wayofthepixel.net/index.php?topic=8110.0 - Ramblethread
http://wayofthepixel.net/index.php?topic=15566.0 - 1st Cluster Study Thread
http://wayofthepixel.net/index.php?topic=15018.0 - 2nd Cluster Study Thread
(just search for "cluster" on this board... there are a few more :) )
----------------------------------------------
-
I like that definition, it's a little broader and encompasses more pixel art.
Maybe we should eventually use all this for a wiki.
-
Making some kind of site from it sounds good.
Personally, I don't have the same trust in wikis that I once did -- in particular, my impression is that the more room for subjectiveness in the topic, the worse a wiki functions. I think a site whose content is generated from a github repo curated by a small team, that of course anyone can submit pull requests to, is a model that would do better at creating a trustworthy resource of consistent quality.
-
i actually like the forum approach, as it doesnt disconnect content from the discussion. I was a member of the gpwiki before, and that just fell apart, because it split the community up. Not a fan of that.
And with the tagging system i suppose we can have a sort of overview or index page for tutorials and other articles like that, which would be kinda cool.
-
I like Ai's idea of a curated github.
-
Updated op with a bunch of links (still lots of stubs/bullet points left to fill with details).
Changed the "Color" entry to emphasize that the concepts described in there are of emotional nature and not meant to describe the physical process of any color mixing theory nor the scientific property of color temperature.
Added entry for Color Gradient, Color Ramp, Color Shift.
(http://dennisbusch.de/shared/paag/PAGlossary_ColorGradientRampShift.png)
-
* Are those supposed to all be synonyms? In that case, I guess Hue Shifting is being covered separately, perhaps in the Hue entry?
* I assume you are aware that there are other color spaces that can be usefully used for calculating gradients (HSL, LAB, LCH), as well as linear RGB versus sRGB, and just left them out to keep things simple?
* The term 'lightness' is associated with HSL channel L, which may be confusing in this context. I believe you used the term 'brightness' (which has no association with any particular colorspace AFAIK) in an earlier entry.
-
* Are those supposed to all be synonyms? In that case, I guess Hue Shifting is being covered separately, perhaps in the Hue entry?
There will also be an extra entry for Ramps where I will give examples how the same color can be re-used in different Gradients and possibly arrange the Ramps on a 2D grid with intersections. To be honest, I don't see much of a conceptual/technical difference between saying "the color shifts" or "the hue shifts". Hue shifts for creating cheap effects are overused imo and in most cases don't make any sense at all (but well... maybe there should be an extra entry for them... without my personal judgement about it). Ramp,Gradient,Shift... conceptually all the same.
* I assume you are aware that there are other color spaces that can be usefully used for calculating gradients (HSL, LAB, LCH), as well as linear RGB versus sRGB, and just left them out to keep things simple?
Hence the wording "Primary" and "can be" as opposed to something like "Eligible properties for change are...". I pay attention to phrasing my stuff carefully and packing as much information as possible into each and every word. You can make up any number of derived/calculated secondary properties from the plain RGB model and use those to create gradients. Can also just make gradients by feeling and picking arbitrary colors instead of calculating the changes and having them follow any continuous mathematical function.
Always a struggle finding a balance between simplicity and complexity, especially since most artists are not very likely to also have an affinity to math and technology.
* The term 'lightness' is associated with HSL channel L, which may be confusing in this context. I believe you used the term 'brightness' (which has no association with any particular colorspace AFAIK) in an earlier entry.
It is used here in the sense of 'value as lightness' as described in the entry for Brightness/Lightness/Value. It appears to be the same sense as the L in HSL. Mixing pure color with white increases the Lightness (creates Tints), mixing with black decreases Lightness (creates Shades).
[edit: Actually the L in HSL is NOT "Lightness As Value" but rather some arbitrary Brightness which varies greatly with different hues in that model.]
-
* Are those supposed to all be synonyms? In that case, I guess Hue Shifting is being covered separately, perhaps in the Hue entry?
There will also be an extra entry for Ramps where I will give examples how the same color can be re-used in different Gradients and possibly arrange the Ramps on a 2D grid with intersections. To be honest, I don't see much of a conceptual/technical difference between saying "the color shifts" or "the hue shifts". Hue shifts for creating cheap effects are overused imo and in most cases don't make any sense at all
Eh, making the shadow a complementary color to the highlight adds contrast and shadow/light separation (it can add contrast while preserving lightness, which is a valuable tool)
This is a classical technique used a lot in historic paintings, not only pixel art.
Certain combos appear more natural than others (yellow light+blue shadow is pretty much natural sunlight, as long as you don't overdo it), but IMO unnaturalness occurs mostly when you make different arbitrary hue adjustments on different ramps, rather than having a general trend of shadows become X-er, lights become Y-er across most ramps. I guess that idea of unifying would fit naturally into an entry on Ramps.
My impression is that here you are covering the concept of interpolating a discrete function, and provide hue as one demo. This does not, IMO, imply the 'hue contrast for additional readability/pop' theory that is behind hue shifting.
Hence the wording "Primary" and "can be" as opposed to something like "Eligible properties for change are...". I pay attention to phrasing my stuff carefully and packing as much information as possible into each and every word.
Okay, my mistake. I agree that R` G` B` and H S V are commonly recognized metrics, regardless of any other opinion I may have of them.
Can also just make gradients by feeling and picking arbitrary colors instead of calculating the changes and having them follow any continuous mathematical function.
Well, yes. For shorter ramps (say <=5), that's quite sensible. For longer ramps, calculating a ramp (which is easy and involves no math, with a decent palette editor) and then adjusting it by hand may produce more consistent results with much less effort.
* The term 'lightness' is associated with HSL channel L, which may be confusing in this context. I believe you used the term 'brightness' (which has no association with any particular colorspace AFAIK) in an earlier entry.
It is used here in the sense of 'value as lightness' as described in the entry for Brightness/Lightness/Value. It appears to be the same sense as the L in HSL. Mixing pure color with white increases the Lightness (creates Tints), mixing with black descreases Lightness (creates Shades).
[/quote]
This is probably just me being pedantic then.... HSL L (or HSV V) is kind of like Lightness. except that Lightness goes up and down as H and S values change, with same L value. So, only if you don't look at it too hard? I think they are intended to do the same thing but in practice do significantly different things.
-
Eh, making the shadow a complementary color to the highlight adds contrast and shadow/light separation (it can add contrast while preserving lightness, which is a valuable tool)
This is a classical technique used a lot in historic paintings, not only pixel art.
Certain combos appear more natural than others (yellow light+blue shadow is pretty much natural sunlight, as long as you don't overdo it), but IMO unnaturalness occurs mostly when you make different arbitrary hue adjustments on different ramps, rather than having a general trend of shadows become X-er, lights become Y-er across most ramps. I guess that idea of unifying would fit naturally into an entry on Ramps.
My impression is that here you are covering the concept of interpolating a discrete function, and provide hue as one demo. This does not, IMO, imply the 'hue contrast for additional readability/pop' theory that is behind hue shifting.
There definitely needs to be an entry for Hue Shifting then for the cases where it's not a cheap unnatural effect. The one you describe is also shown in the video I linked to under the Color entry. Emphasizing shadow with a complementary color is in fact an extension of that natural perceptual illusion that the shadow appears to be colored to our eyes in reality when it is in fact still a shade of gray. That's not what I mean by cheap effect. It only feels cheap when the shift is arbitrary(I even did that myself more than once). I was not aware that Hue Shifting specifically refers only to the non-arbitrary appearance derived from the naturally occurring optical illusion. I see a lot of non-sensical hue shifts in Pixel Art which looks kind of funky/fresh/psychadelic but also starts to feel really cheap and overused. So, you're saying Color Shift is arbitrary? Hue Shift refers to one specific optical illusion observable in reality?
This is probably just me being pedantic then.... HSL L (or HSV V) is kind of like Lightness. except that Lightness goes up and down as H and S values change, with same L value. So, only if you don't look at it too hard? I think they are intended to do the same thing but in practice do significantly different things.
Nothing wrong with being pedantic, I just do not see how there could be any confusion there. Lightness is not immediately available as a primary property in HSV/HSB. Value there means something else, see Brightness/Lightness/Value. HSL is something completely different from HSV/HSB and Brightness in HSB isn't even "brightness" in the common sense. There the B is equal to V and it's more related to the common sense of "saturation" which in turn though is different from the sense that S, Saturation has in HSV/B. I believe people will always find this confusing no matter what because there is no consistency in these terms across different color models and no consistency with their common sense interpretation either. Lightness in the sense I use it there seems fully synchronized with what it means to describe.
-
In standard Art terminology, there are the achromatic, and monochromatic gradients. Might be useful to reference those for the sake of comparison.
-
The one you describe is also shown in the video I linked to under the Color entry. Emphasizing shadow with a complementary color is in fact an extension of that natural perceptual illusion that the shadow appears to be colored to our eyes in reality when it is in fact still a shade of gray.
... I thought the reason that shadows looked blue in sunlight is because they are picking up more atmospheric color (usually blue) than light color. I admit I'm a little skeptical of shadows actually being a shade of grey (though I would agree they can appear grey in low light conditions because of how our eyes work), as I understand light as being multiplicative. Haven't found anything about grey shadows so far, only a lot about colored shadows but I'll watch the video on Color, see if it's explained there.
BTW, I found this (https://www.khanacademy.org/partner-content/Exploratorium/light-and-color/colored-shadows/a/whats-going-on-human-color-perception) while I was looking.
I see a lot of non-sensical hue shifts in Pixel Art which looks kind of funky/fresh/psychadelic but also starts to feel really cheap and overused.
Sure, I agree. I feel this occurs when the artist is thoughtless or lets the artwork become a technique showcase rather than an artwork.
So, you're saying Color Shift is arbitrary? Hue Shift refers to one specific optical illusion observable in reality?
No, sorry. I've never heard the term "color shift" before, inside or outside pixelation TBH. I'm just saying that hue shifts don't have to look weird, and they do occur naturally (and come to think of it, are also a nice approximation of materials with subsurface scattering like skin)
AlexHW's point also seems good, if there is space to compare monochromatic, hue shifted, and excessively hue shifted ramps in an entry, that may communicate the idea well.
I believe people will always find this confusing no matter what because there is no consistency in these terms across different color models and no consistency with their common sense interpretation either.
Excellent point. I guess as long as you avoid explicitly calling the HSL L by its actual long name 'lightness', confusion will be minimized.
-
In Photography, Color Shift is synonymous to Color Cast, where it refers to an (usually unwanted) effect that all colors shift towards one specific different color/hue (caused by lack of or improper white balance). From a descriptive point of view however, I don't feel a huge difference between saying "color shifts from a to b" or "hue shifts from a to b" except maybe that saying "hue" is more narrow referring to that one specific property of a color, while "color" encompasses a wide variety of properties that might get shifted.
I know of monochromatic gradients but what are achromatic gradients? Grayscale? (Achromatic color appears to mean color "without color"... so gray?). Gradients/Ramps containing a shift in Hue would be called what, inter-chromatic or polychromatic, or is there a specific term (apart from Hue Shift)?
-
I clearly need to update my knowledge about colored shadows.
-
My understanding is that Dichromatic gradient is one that translates from one color to another, since Di means two. Then there's Trichromatic(three different colors on a colorwheel). Polychromatic means multiple colors, and generally refers to images that use multiple colors. I suppose you could have a polychromatic gradient, but this would involve basically two dichromatic gradient stuck together? I learnt about monochromatic gradients and achromatic gradients in general art before I learnt about pixel-art, so I'm more attached to that way of classifying things and might be a way to bridge things with general art.
They are classed under the types of Value Scales.
Also, one thing I'm unsure about is whether there is a better term for gradients that begin with a strong color and transition to an achromatic color. Because achromatic gradients tend to refer to gradients that lack any color/hue, even though you could probably put colors that are near grey into it and still call it achromatic (because there are achromatic colors).
-
It looks like possibly Alex meant a different thing by 'monochromatic' gradient than my interpretation. Typically I think of a monochromatic gradient as what you get if you lay down a panel of color, then use Blend tool in Multiply mode to progressively darken it with a greyscale gradient -- ie. a gradient in which all colors have the same hue and saturation.
(This doesn't always happen because blend modes and especially color spaces are imperfect, but that's the general idea)
Personally I'd be inclined to say that color -> grey or grey -> color gradients have rather marginal usefulness in pixel art. (painting and cinematics are a different story)
-
It looks like possibly Alex meant a different thing by 'monochromatic' gradient than my interpretation.
The way you describe it is how I'd view it.
From what I gather, adding white to a color "Tints" it. Adding black "Shades" it. Adding grey "Tones" it.
Any Dichromatic gradient basically is a shift of hue, since both ends have different hues. The Dichromatic gradient doesn't need to be tinted, shaded, or toned- but it could be?
-
Well...
These last couple of post illustrate well how very easy it is to get lost in details and straying from the goal to provide brief descriptions. The initially provided generalization for Color Gradient/Ramp/Shift already covers all cases discussed in these last posts(not necessarily by any well known name) and serves its purpose of providing an entry point to that particular topic (and there's always the "further reading" links as well).
So there is no need for changing the general case and I'm adding the new terms provided as seperate entries, linking to existing descriptions on wikipedia. It is better to have narrower, specialized entries for individual types of gradients(or rather terms as these terms are not restricted to use in gradients) instead of overloading the elegant simplicity of the generalization with these details.
Since the goal of the Glossary is to stay descriptive in nature, giving examples for different gradients/ramps and providing an assessment/judgement of/about their usefulnes in Pixel Art is left as something for a tutorial on choosing colors, making a pallette, coming up with a color scheme (I personally have no plans at the moment to write any tutorials).
Dichromatism and Polychromatism, as researching on the web suggests, appear to already refer to a very specific phenomenon where the hue of something appears different based on thickness and concentration (e.g. the intensifaction of yellow and blue water as it shifts to a different hue as described in the Color entry). I feel that might be too specialized to be mentioned at all. Not that I think anything is irrelevant when it comes to Visual Art/Crafting but the scope of this Glossary should probably be limited or otherwise we might as well just provide a link to the Wikipedia starting page (or google) and be done with it.
these entries have been added/changed:
Achromatic Color
Literally a color "without color", which is all shades of gray and black and white.
Practically all colors without a strong perceptual chromaticity are called achromatic.
https://en.wikipedia.org/wiki/Color_scheme#Achromatic_colors
https://en.wikipedia.org/w/index.php?title=Achromatic_color&redirect=no (redirects to Grey at time of writing this)
Color
+ https://en.wikipedia.org/wiki/Complementary_colors
Color Scheme
https://en.wikipedia.org/wiki/Color_scheme
Monochromatic Color
All tints, tones and shades of equal hue.
https://en.wikipedia.org/wiki/Color_scheme#Monochromatic_colors
https://en.wikipedia.org/wiki/Monochromatic_color
-
Most entries in the opening post now have at least a brief summary and/or links to vast amounts of information on everyones favorite open encyclopedia.
-
Entries in opening post now have anchor and iurl tags and there is an index at the top for quickly grabbing links to individual terms.
(I'll eventually have to cut the duplicate text under the images because of the 50000 chars per post limit.)
-
I'd expect more entries about techniques and patterns found both in tools and workflows and in images. Here's a first draft of two important ones:
Pillow Shading
Unrealistic shading of a smoothly curved object by distributing light and dark colors according to the shape of the object's outline instead of imagining and matching the shape of actual isophotes and the location of highlights; this normally results in approximately parallel and constant width color bands from the outline inwards, vastly different from the bunched up, interrupted, expanded and nonconvex shapes of correct shading.
A rectangular pillow is one of the rare cases in which the incorrect but easy procedure sometimes approaches a correct result.
Index Painting
Editing palette indexes instead of pixel colors; it implies caring about palette organization (two palettes with the same colors in a different order are different) and not only about limiting the available colors.
Deliberate attention for building the final image through an explicit indirect mapping mechanism can have a variety of benefits and purposes, mostly related to determining actual colors after editing the image:
- Making images that can be displayed with different but "parallel" palettes (as typical of many videogames with recolored sprites, which can be implemented with a simple palette swap).
- Distinguishing palette indexes in order to treat identical colors as logically different, for example because they are shades in different color ramps.
- Caring about the use of palette entries rather than their actual color (e.g. "I need three entries for flesh, eyes and pupils and I'll reuse hair colors for irises" vs. "I need three entries for rosy pink, blueish white and pure black"); palette structure can be more important and more stable than the contained colors.
- Controlling palette indices exactly (as opposed to letting the paint program manage them automatically) because they also have some conventional meaning: transparency (e.g. index 0 is transparent), metadata about a game sprite such as whether a pixel is a solid part of an object, special display-time palette tricks (e.g. indexes in a certain range are subject to color cycling) and so on.
- Allowing use of tools, like semi-transparent brushes, compositing transparent layers, blurring, etc. that are fundamentally unsuitable for simple palette-based image representations. For example, editing a high bit depth greyscale image and mapping grey ranges to palette colors, as popularized by Dan Fessler (1,2).
1. http://www.danfessler.com/blog/pixel-purism-process-vs-results (http://www.danfessler.com/blog/pixel-purism-process-vs-results)
2. http://www.danfessler.com/blog/hd-index-painting-in-photoshop (http://www.danfessler.com/blog/hd-index-painting-in-photoshop)
-
There is already a short entry for Indexed Image/Color.
Personally, I never gave Index Painting much explicit thought because in all pixel art tools I've used (starting with PaintMagic on the C64 and DPaintIII on the Amiga500), "Index Painting" (though it was not called that back then I think, it didn't seem to have a name then) was just the default or only mode the tools and hardware(like the C64) could even handle, so to me, that was always the natural way to go/think about pixel art.
With non-indexed modes around today however, "Index Painting"(what making Pixel Art really already always was imo) should indeed be mentioned separately, but I suggest in more than just one additional entry, broken down into more specific terms:
Index Painting (broad generalization goes into that with links to Dan's articles)
Pallete Swap (full and partial swaps, with examples like faction colors in strategy games or a number of "identical" grayscales for different elements like clothes for individual partial swaps per element)
Color Cycling (a special case of a number of "Pallete Effects")
Palette Structure (logical mapping between palette indices and objects those indices will be used for (skin colors, shoe colors, ... closely related to preparing something for effects like Color Cycling and partial or full Palette Swaps)
Pallete Effects (umbrella term for things like Color Cycling, Palette Swaps, Palette Fading)
The fact, that using automated tools ( "dirty" as they're often called) which cause mutations of affected pixels by color without caring about indices, are mostly unsuitable if Palette Structure is important for programmatic effects seems obvious but maybe it should be mentioned in an entry about "'Dirty' Tools" without condemning them as forbidden though, just to point out that their usage can require manual cleanup and making sure each pixel refers to the correct palette index after applying them (seems though that this might be better covered in a tutorial about Palette Structure as it's pretty longwinding for a brief description which aims to be free of judgement).
...
Added example and fleshed out description to the existing Pillow Shading entry:
(http://dennisbusch.de/shared/paag/PAGlossary_PillowShading.png)
-
Added entries for Palette Effect, Palette Structure and Palette Swap.
---
Palette Effect
In Indexed Images/Modes where each pixel in the image refers to a specific color in a sequence of colors(=palette) (instead of holding the full definition of the color in each individual pixel itself), a number of visual effects such as Color Cycling and Color Fading can be achieved by manipulating the palette instead of manipulating the pixels themselves.
This was used a lot on old hardware as manipulating the definition of colors in the palette took much fewer CPU cycles than going through the image and changing the actual pixels themselves.
A simple example for a Palette Effect is just re-defining a color in the palette:
If a thousand pixels in an image referred to color at index five in the palette and index five would hold Green and index twelve would hold Red, all thousand pixels could be changed to Red by changing the color at index five from Green to Red instead of going through the image and looking for every Green pixel and changing the pixel itself to refer to index twelve.
Palette Structure
(http://dennisbusch.de/shared/paag/PAGlossary_PaletteStructure.png)
Palette Swap
(http://dennisbusch.de/shared/paag/PAGlossary_PaletteSwap.png)
-
Added History Of Pixel Art, Index Painting and Color Cycling.
History Of Pixel Art
see The History Of Pixel Art (http://pixelation.org/index.php?topic=19575.0)
Index Painting
Creating Pixel Art in Indexed Modes, working with Indexed Images while paying attention to Palette Structure (#post_palette_structure) and keeping possible Palette Effects (#post_palette_effect) in mind and at all times keeping control over (if necessary by fixing the results) the pixel level polish of a piece even when using tools that influence more than one pixel at a time.
Historically, "Index Painting" is the natural way to go and think about making Pixel Art as most hardware and digital image editing tools either used Indexed Modes as the default mode or simply did not provide any other modes. The term "Index Painting" was not around then because there simply was nothing else. Today the term seems to be used to set "Pixel Art"(in the sense of Index Painting) apart from other "Pixel Art"(in the sense of Digital Painting and Computer Generated Imagery(e.g. 3D renderings)) and the third kind of "Pixel Art"(the purists "one pixel at a time"- process).
Some advocate placing one pixel at a time as the only "allowed" process to create "Pixel Art"(a term which eludes definition itself) while others advocate whether something is or is not "Pixel Art" can not be defined by processes but only by looking at the results.
The actual term "Index Painting" emerged from the on-going online debate about "pixel purism", processes and results:
http://www.danfessler.com/blog/pixel-purism-process-vs-results (http://www.danfessler.com/blog/pixel-purism-process-vs-results)
http://www.danfessler.com/blog/hd-index-painting-in-photoshop (http://www.danfessler.com/blog/hd-index-painting-in-photoshop)
Palette Swap - Color Cycling
(http://dennisbusch.de/shared/paag/PAGlossary_ColorCycling.gif)
further reading:
https://en.wikipedia.org/wiki/Color_cycling (https://en.wikipedia.org/wiki/Color_cycling)
-
Updated entries for Construction and Dithering & Dither-AA (and removed version number as the board already shows when a post was last edited).
Construction
(http://dennisbusch.de/shared/paag/PAGlossary_Construction.png)
further reading:
https://en.wikipedia.org/wiki/Drawing#Form_and_proportion (https://en.wikipedia.org/wiki/Drawing#Form_and_proportion)
https://www.google.com/?q=drawing+fundamentals+construction (https://www.google.com/?q=drawing+fundamentals+construction)
Dithering & Dither-AA
(http://dennisbusch.de/shared/paag/PAGlossary_Dithering.png)
further reading:
https://en.wikipedia.org/wiki/Dither (https://en.wikipedia.org/wiki/Dither)
https://en.wikipedia.org/wiki/Dither#Digital_photography_and_image_processing (https://en.wikipedia.org/wiki/Dither#Digital_photography_and_image_processing)
-
Construction
(http://dennisbusch.de/shared/paag/PAGlossary_Construction.png)
further reading:
https://en.wikipedia.org/wiki/Drawing#Form_and_proportion (https://en.wikipedia.org/wiki/Drawing#Form_and_proportion)
https://www.google.com/?q=drawing+fundamentals+construction (https://www.google.com/?q=drawing+fundamentals+construction)
Reminds me of thumbnailing, which is sort of proto-composition, proto-construction and proto-gesture all rolled together. Which makes me think of the fact that gesture typically refers to the posture of an animate creature, but can usefully be applied to any organic object (and arguably many non-organic ones, or even the picture as a whole.).. and wonder if you are going to point out in the gesture entry that gesture is not restricted to animate things.
-
Reminds me of thumbnailing, which is sort of proto-composition, proto-construction and proto-gesture all rolled together. Which makes me think of the fact that gesture typically refers to the posture of an animate creature, but can usefully be applied to any organic object (and arguably many non-organic ones, or even the picture as a whole.).. and wonder if you are going to point out in the gesture entry that gesture is not restricted to animate things.
Yeah, Gesture really works for anything organic or not. I think the specific term Gesture however came from figure drawing, living creatures and animation so it should refer to that even if it is related to the "other" use. Not sure what the other use is called though: Maybe Rhythm & Flow = Gesture for everything which is not a living being?
I thought Thumbnailing is the same as sketching/doodling but on a very small scale to figure out composition/partitioning/placement/etc. quickly and to make lots of iterations fast without having to worry about the details that go into creating a polished artwork from it.
-
I thought Thumbnailing is the same as sketching/doodling but on a very small scale to figure out composition/partitioning/placement/etc.
I guess so. My experience of thumbnailing is that you can put anything that reads and conveys a quick useful impression (in a 1"..2" picture size) in them. Gesture of the focal figure(s) might be included - IME it's usually central.
-
Value & Key
(http://dennisbusch.de/shared/paag/PAGlossary_ValueAndKey.png)
see also Brightness, Lightness & Value (http://pixelation.org/index.php?topic=19594.0#post_brightness_lightness_value)
-
As someone who has just gotten into pixel art and doesn’t really know much of the terminology yet, this has been extremely helpful. Thanks for posting this.
-
I just wanted to say thanks for this amazing thread. Such a valuable resource.
-
Thank you both, Student of the Pixel and Helm. Just dropping in to report that I have starting porting this glossary to a proper wiki at http://paag.dennisbusch.de (http://paag.dennisbusch.de) which will make maintenance and expansion much easier.
So the glossary in the first post of this thread will not be updated anymore. I will still watch this thread for suggestions on terms that should be included in the glossary.