Confectionery

A pixel, oekaki, and code site by Candy.


A little store in the Neopian marketplace hosts an assortment of... pixels for decoration.

Welcome to Confectionery! Run by an undeniably edible Poogle (Aboa) and staffed by a terminally underpaid Gothic Usul (Candy), pixels and sometimes code are sporadically churned out with a side of advice.




Navigation is to your right, please hover over the cross.

01.07.18 | Long time, no see! Finally got a spiffy new layout from my sister, and added some new pixels. Thinking of also adding some of my colour palettes in the pixel art tutorial, as well as a blinking animation guide once I edit it for clarity. Also gained three new art affiliates who I definitely do recommend checking out!
+ 4 pixels

+ 3 affiliates

16.04.18 | Site is becoming an utter mess, updates are ceasing until new layout from Floral comes.
+ 1 affiliate

Rules

TL;DR Credit me, and don't do illegal things!

  1. You may edit my pixels and re-upload them for Neopets only if you credit me. You must also allow others to use those edits freely too, as long as they credit you and Confectionery. This does not extend to editing over makeables others have edited.
  2. You must credit me (i.e do not steal) by either:
    • Linking the work to,
    • Putting one of my buttons on the page and linking that to one of these places:
    • Confectionery's Watermark
    This petpage (/~aboa), my main (candy_fizz), or the petpage the pixel was from.
    • You can also state on the page the work was taken from /~aboa if you do not want to link.
  3. Do not put your own watermark on your pixel edits, or remove mine.
  4. Do not enter the pixels or codes into contests.
  5. You may edit my code if you credit me.
  6. I reserve the right to refuse requests.
  7. Redistribution is only allowed on /~Todu, /~Watties, and sites hosted by pets on Candy's accounts.

Requests/suggestions are always open for pixels and closed for layouts. I can do anything from a simple recolour to something animated! Please send a neomail to candy_fizz detailing what you would like to see. Please note the wait time is rather long due to requests being perpetually open.

All requests will be made free to use unless I've offered to do something exclusive to you, like the button for Floral. Please don't request something for yourself and expect it to be exclusive to you.


To do: Adoptables for Draik, Ixi (Faerie), Korbat, Kougra, Bori, Poogle, Peophin, and Xweetok. Makeable for Kiko.

Pixels

pixels! I love pixels

Hover on a pixel for a description and their size. The naming convention for images is width by height. Images may link to where they're being used.

Pixels

256 by 206 Faerie Xweetok

219 by 68 Poofy cloud, looks best on white background

92 by 102 Vel'Koz

64 by 89 Beach Window

40 by 60 Ghost (animated)

33 by 51 Candy Cane

35 by 53 Candy Cane with White Outline

50 by 50 Tui Yeah Right

50 by 50 Bonsai

50 by 50 Watties Spaghetti

39 by 43 Camera

39 by 37 Baby Kau

30 by 34 Mushroom (animated)

30 by 34 Poisonous Mushroom (animated)

42 by 33 8-Bit Shoyru

28 by 30 Blue Shoyru

27 by 29 Blue Shoyru

29 by 28 Coin Pile

27 by 25 Grey Rat (animated)

27 by 25 Brown Rat (animated)

32 by 23 Hedgehog (animated)

28 by 23 Slime (animated)

28 by 21 Mouse (animated)

20 by 27 Pink Cupcake with White Outline

Adoptables

Adoptables link to the page they're on, and I provide makeables for each set. Colour requests and custom trades are open. As a general rule custom requests are always closed, unless traded for.

Shoyru


49 by 50 Shoyru Adoptables 49 by 50 Shoyru Adoptables 49 by 50 Shoyru Adoptables 49 by 50 Shoyru Adoptables

Perfumes


39 by 51 Perfume Adoptables 39 by 51 Perfume Adoptables 39 by 51 Perfume Adoptables 39 by 51 Perfume Adoptables

Usul


47 by 63 Usul Adoptables 47 by 63 Usul Adoptables 47 by 63 Usul Adoptables 47 by 63 Usul Adoptables

Uni


38 by 51 Uni Adoptables 38 by 51 Uni Adoptables 38 by 51 Uni Adoptables 38 by 51 Uni Adoptables


Lutari


87 by 56 Lutari Adoptables 87 by 56 Lutari Adoptables 87 by 56 Lutari Adoptables 87 by 56 Lutari Adoptables

Aisha


32 by 65 Aisha Makeable


21 by 39 Baby Aisha


37 by 65 Faerie Aisha (animated)


32 by 65 Speckled Aisha (animated)

Pixel Chibi Makeable


Candy's Chibi Makeable

Examples, please don't steal!


Resources

Backgrounds need to be dragged and dropped for their true size.
Repeatable Clouds 293 by 303

Repeatable Stars Animated 300 by 300

Non-repeatable Green Sun 300 by 300

100 by 50 Grey Placeholder

88 by 31 Grey Placeholder

44 by 37 Requests are open sign

44 by 37 Requests are closed sign

16 by 6 Cloud Button

Tiled Backgrounds







Code

Disclaimer: code isn't my best suit

Nothing fancy here, just CSS based code. Link colour is steelblue, link hover and bold colour is gainsboro, text colour is dimgray.

Want something with more flair and personality? Check out our sister site Floral!

Pet

Pet Lookups

Candy's clean petlookup code (border-bottom)

Candy's clean petlookup code (border-bottom)
  • Clean, but also allows navigation.
  • Should be easy to edit the code.
  • Depending on whether your petpet has a petpetpet, or was zapped you may have to move the content down by editing the div margin-top value.
Live pet lookup

Candy's clean petlookup code (border-top)
  • Same as above, but now the border is on the top.
Live pet lookup

Candy's clean petlookup code (border-top)

Petpage

Petpage (Freedom)

Freedom
  • Not scrollable.
  • Designed to work on smaller screens.
  • Link and text colours do not follow the usual style, check the colour palette provided.
Live petpage

Shop/Gallery

Candy's clean petlookup code (border-top)

Candy's clean shop and gallery code.
  • For the minimalists or people who like clean layouts.
  • Works the best with an adblocker or premium.
  • Probably best to only change the background, font and font colours.
Live shop | Live gallery

Guild

Candy's clean guild code

Candy's clean guild code
  • If you wanted something simple and clean, you've come to the right place.
Live guild

Pixel Tutorial (WIP)

Disclaimer: this is only a guide, and not a rulebook

Nothing here is finished yet!!! I've kept it up so I know which parts
I need to redo, and also because you might still find it helpful.

Frequently asked questions

What do you use to pixel?
Gimp 2.8 and a mouse. No need for any money to start pixelling, Gimp is free and comes with everything I need. Paint is still a fine tool to use, though there is no transparency or ability to animate in it.

Is digital art not pixel art? It's made of pixels.
Pixel art places an importance on the control and precision of pixels. The general consensus is that pixel art must be created without the brush tools. Brush tools blur the edges and create a high colour count which should have been controlled, and it is difficult to predict which pixels will change colour decreasing the precision of the lines.

Do you have any advice for pixelling?
Of course! I know the medium but unfortunately, I cannot help you with anything to do with anatomy, lightning, all that good stuff as I've never received any formal instruction on it. My neomail's always open, so flick me one and I'll try to reply ASAP!

Why should I trust your pixel advice?
I used to approve pixel art submissions; trust me, I know what pixel art is.

A step-by-step for pixelling.

Lines

This part of the candy cane was lining it

Lines in pixel art:

The best worst-kept secret in pixel art is to clean your lines.

Cleaning your lines consist of:
  1. Making them increase sequentially.
  2. Making sure the sides of the pixels don't touch.
Cleaning Lines
On the left is Neopet's 8-bit Shoyru, on the right is my stab at it.

1. Let's talk about the green lines first. If you don't know your Roman numerals, here are the ones I've used: Ⅰ=1, Ⅱ=2, Ⅲ=3, Ⅳ=4

On the left, the lines do not increase sequentially: 1, 2, 1, ?, 2, ?

On the right they do increase sequentially: 1, 1, 1, 2, 2, 2, 3, 4

Look to the red, the line there does not increase sequentially: 2, 1, 3, 1, 4

Why does this look better? I suppose it's because it looks smoother. You might also see in nature that Fibonacci's spiral increases sequentially as well (0, 1, 1, 2, 3, 5, 8, 13, 21, 34).

2. Honestly, this may just be my own personal preference but making sure the sides of my pixels don't touch in the lineart is important to me.

The question marks (?) in the green lines indicate where the side of a pixel has touched the side of another. The other times only the corners of pixels touch.

There are exceptions, like where the arms join to the Shoyru's body but one a single line, only the corners should touch.

If you plan on getting rid of them with anti-aliasingA method to smooth lines, brush tools do this automatically. Also known as AA. then you might leave them in like I have done to the Shoyru's waist, but I prefer to do my AA with my shading.

Straight lines pose a different problem. I don't advise straight lines unless it's in isometric because they can take the focus away from your art by being an unnatural focus point.

1:1 and 2:2 lines
1:1 line | 2:2 line

Here's how I line, I flip the pixel horizontally a lot to make sure it looks fine.

Candy's lines

colour

What's not so important (because if you didn't want to pixel, you wouldn't do it) but deserves a mention; if you want to become good at something, keep at it!

labor omnia vincit | Hard work conquers all!

What do I do after I line the pixel?

Colouring in.Drag and Drop for full size.
  1. I added a grey background (#808080). Not only is it easier to change the outline, but it's a neutral colour so your pixel will look better on a wider variety of background colours.
  2. Flat coloured it and took note of the colour palette, reduced the color count from an heart-attack inducing 19 to a more acceptable 9.
  3. The goal here is to reduce the number of colours you use in pixel art, the purple outline (#2f1c3a) of the shorts was too similar to the colour used in the eyes and mouth (#07232e), so I changed it to the purple (#2f1c3a). I chose the purple because variety in colour is always good, and purple is the darkest natural colour.
  4. Then I shaded it in. Don't be afraid to leave blocks of pure colour, like the orange t-shirt.
Hello!

how did i forget rampingA specific way to do colour palettes yooo was a thing??? RAMPING

This leads me to the next frequently asked question:

How can I shade well?
There are three things I use to shade: dithering, contrast, and colours.

What is dithering?
Oxford dictionaries define dithering in the context of pixel art as 'Displaying or printing (a colour image) in such a way that it appears to contain more colours than are really available'. Because pixel artists avoid the use of many colours, dithering is the way to give the appearance of a colour, such as purple from blue and red.

Red, to purple, to blue.
There are only two colours in this image.

How you dither is also important.

Different materials have different textures. omg i have to draw stuff for this ;-;

CONTRAST LEADS INTO NEXT TOPIC cause a big part of that is choosing right colours!!!

How do I choose good colours for pixel art?
Some pixel artists have palettes they've already made up and pick from there, but those palettes are suited to their own taste and may lack in say purples. There are a lot floating around, but I won't link them here for fear of improper crediting. Andrew Kensler, who works at Pixar wrote some code that maximised the difference in hue for 16 colours.

Colour Palette. (16)
He also made one for 32 colours. I'd advise choosing your starting colours from one of these, then editing to your taste.

Colour Palette. (32)

Some pixel artists advise to pixel in grayscale first so the values are right, and there is enough contrast. Personally I just pick and re-pick until the colours seem right; purple, the darkest natural colour at a value of 50 will seem darker than a yellow, the lightest natural colour. image needed

270 is purple, 60 is yellow on the 'perfect' colour wheel

Go for neighbouring colours, something about less dark colours and more bright colours for details???

How do you pixel?
Line, clean, clean again, if I haven't already added grey background I do so now, colour, then shade.

How to animate

I use Gimp (I have version 2.8.14) if it's a different program you use I'm not sure If I can help, but gimp is free!

What happens is that different layers are different frames of the animation you want.

If you want to see what your animation looks like you go: Filter → Animation → Playback

It might be that the animation plays back in reverse order. If so just: Layer → Stack → Reverse Layer Order

As far as I'm concerned, Gimp does not allow you to give different values for each frame (e.g set frame/layer 1 to play for 5 seconds) so just duplicate each layer as many times as required.

When you export as GIF, a pop up comes on, click on: (save) as animation

The frame disposal values of replace and combine differ.

Combine stacks the layers (if there's a hand that sticks out, it stays there in later frames), replace treats each layer differently

Replace literally replaces each frame as it is displayed on the computer.

images to illustrate pl0x

Gimp automatically converts an animation to an indexed image after you save it, which may be why if you open it again you can't place a new colour in the animation, to reverse this: Image → Mode → RGB

Animating blinking

If you watch a slow motion of an eye blinking, you'll see that the motion of the eyelid going down is very quick, and then as the eyelid moves back up it's slower.

What is antialiasing? I need to link to different sections here

Notes on pixel art in general:

  1. Sometimes, pixel artists will outline in black or white. White makes pixels look more 'kawaii'. Black makes a pixel look more cohesive. Sometimes I will do both, but change the colour of the inside lines from back to a lighter shade.
    White outlineBlack outline
  2. Please save pixels as a png or gif file. Jpg will reduce quality, make your pixel look spotty, and it will increase the number of colours on the pixel.
  3. Some pixel artists will say to avoid 1:1 pixel lines + 2:2 things. I can't find the proof anymore, but I tend to avoid those out of habit.
  4. hmmm
  5. There's a thing called dithering if you want to shade! Don't go overboard, and don't be afraid to go out. (should move down a topic, and should move shading up)image needed
  6. Sometimes 'plagiarism' is inevitable, how many types of circles can you make out of a 3px by 3px pixel circle? That's about three-ish plus some odd ones.
    3 by 3 Circles
    • For example: The font I generally use is either 3px by 5px or 3px by 3px, how are you supposed to say "I made this font!" when there were only like two possible combinations at the most? Extrapolate this to small buttons, arrows etc. Of course the larger the pixel, the more likely someone plagiarised you, be sure to report them!

Try a challenge?

  1. Why not try for a very limited colour palette? The button I made for floral used three colours (#fef3bf, #f2a5a5 and #d182d9). This will help improve your colour palette picking ability.
    Three colours
  2. Don't use brush/gradient tools if you want a real challenge! Using those tools are fine on Neopets, just don't expect to get a good reaction from 'purist' pixel artists! As a side note, I would have declined those submissions, so please don't get yourself roasted by purists. QAQ

add a glossary maybe

This section is a WIP :0 needs images to illustrate + feel free to neomail me if you need pixel help :)

Did I say I needed a glossary? I need a glossary.

Sitely

goodbye and remember to take care!


Without border


With border

Affiliates and listers are always open. Please neomail me if interested! I'll affiliate with art and code websites. If you have any questions or queries, please don't hesitate to neomail me either!

Hovering over buttons gives you a short description of the site.

affiliates

Avant-GardeRequest site for layouts and resourcesPandoraAdoptablesBeyond the BatterCupcake adoptables & requestsKimochiRequest site for buttons & pixelsPandoraIcons & requestsPetaBackgrounds

Pixel PerfectPixel adoptables & requestsRu's Pixel RealmPixels in a range of sizesProject StarAdoptables & a chibi makerScribblePixels & pixel adoptablesXOX adoptablesSmall pixel adoptables for all species/colours

Floral Confectionery's sister site is Floral, a high-quality userlookup, petlookup, and petpage site run by my twin sister Sunlit!

listers

DirectlySite directoryIndirectDirectory & reviewsKalux DirectorySite directoryRequest site updates & ratingsScrapbookArt site directoryThe Popsicle StandSite directory

credits

  • Coding help from LOLWAT.
  • Content by Candy, do not steal.
  • Custom layout by Floral, do not steal.
  • Affiliate and lister buttons belong to their respective creators.

  • Other sites by Candy
    Candy's Art Candy's Portfolio Candy's UC Faerie Peophin Project Page Little Uglies

    NEOPETS, characters, logos, names and all related indicia are trademarks of Neopets, Inc., © 1999-present.

    +


    01.07.18+ 4 pixels

    top.
    + introduction+ updates+ rules
    pixels.
    + pixels + adoptables + resources
    code.
    + pet + shop/gallery + guild
    tutorial.
    + FAQ + lines + colour
    sitely.
    + sitely + affiliates + listers



    Heads Up! You're about to leave Neopia!

    You've clicked on a link that will take you outside of
    Neopets.com. We do not control your destination's website,
    so its rules, regulations, and Meepit defense systems will be
    different! Are you sure you'd like to continue?



    It is a journey
    I must face...alone.
    *dramatic music*
    I want to stay on Neopets,
    where the dangers of
    Meepit invasion
    are taken seriously.
    Heads Up! You're about to leave Neopia!

    You've clicked on a link that will take you outside of
    Neopets.com. We do not control your destination's website,
    so its rules, regulations, and Meepit defense systems will be
    different! Are you sure you'd like to continue?



    It is a journey
    I must face...alone.
    *dramatic music*
    I want to stay on Neopets,
    where the dangers of
    Meepit invasion
    are taken seriously.
    Heads Up! You're about to leave Neopia!

    You've clicked on a link that will take you outside of
    Neopets.com. We do not control your destination's website,
    so its rules, regulations, and Meepit defense systems will be
    different! Are you sure you'd like to continue?



    It is a journey
    I must face...alone.
    *dramatic music*
    I want to stay on Neopets,
    where the dangers of
    Meepit invasion
    are taken seriously.
    /help/bumper/headers/log-in-to-facebook

    NEOPETS, characters, logos, names and all related indicia
    are trademarks of Neopets, Inc., © 1999-2018.
    ® denotes Reg. US Pat. & TM Office. All rights reserved.

    PRIVACY POLICY | Safety Tips | Contact Us | About Us | Press Kit
    Use of this site signifies your acceptance of the Terms and Conditions