While working on a upcoming photoshop layout tutorial I thought it would be a good idea to go over how to add some finishing touches to a banner, website, and interface, just about anything using pixel art.
Techniques covered in this tutorial- Deteriorating Lines
- Pixel Dents
- Pixel Bumps
- Micro Orbs
Deteriorating Lines
- Select the pencil tool in photoshop, and set its width to one pixel.
- Start off by drawing a solid line
- Then create a few dots 1px apart
- Gradually increase the width between the dots
- Optional: Use the Eraser Tool with a soft brush selection to fade into the solid end of the lines
Pixel Dents
- Select the pencil tool in photoshop, and set its width to one pixel.
- Draw four 1px dots to form a square
- Fill the bottom corner pixel with white or a light grey colour. Fill the other pixels with a darker color
Pixel Bumps
Pixel bumps are essentially the inverse of pixel dents
- Select the pencil tool, and set its width to one pixel.
- Draw four 1px dots to form a square
- Fill the top corner pixel with white or a light grey colour. Fill the other pixels with a darker color
Micro Orbs
- Select the pencil tool, and set its width to one pixel.
- With a dark color draw a small roughly cirular shape about 6 px in diameter
- Highlight the topleft corner using lighter colors as i have done here or using the dodge tool (if you are lazy)
- The border for the opposite corner should be darker, but the actual orb should be slightly lighter in this corner than the middle.
Extension
Failing to pay attention to details is like eating food without salt. Detail is often the difference between a professional looking layout/picture and an ameturish looking one. The sad part about it is the it takes up very little time to add detail to pictures, the same way it takes very little time to add salt to your food
And just as its important to add the right amount of salt to food, and not too much or too little, it is important not to make your pictures more detailed than required.
