1. Presented By: Dower Chin
@dowerchin
http://www.dowerchin.com

2. Topics
• About Me
• What is Pixel Art
• What is Photoshop & Alternatives
• Learning Photoshop
• Setting up Photoshop for Pixel Art
• Hot Keys and Concepts
• Tools (Layers, Blending, Demos!)
• Tiles

3. About Me
• Graduated RIT 1995 in Information Tech,
concentration in Multimedia
• Worked on marketing projects for Kodak,
Xerox, Acura, Disney, etc.
• Gadget, Tech, gaming enthusiast.
• Now at Caliber Imaging and Diagnostics;
Javascript/HTML5 application programmer.

4. What is Pixel Art
• A form of digital art created using raster
graphics software, where images are edited
on the pixel level.
• Used everywhere there is a screen. Immensely
popular in games, especially in the retro
arena.

5. Examples of Pixel Art
Image by Georg Joergens (http://paul-muad-dib.deviantart.com/)

6. Examples of Pixel Art
Image by Ryan F (http://ryan-gfx.deviantart.com/)

7. Sprite Sheets
Sprite Sheet of Link from SNES Legend of Zelda (http://spriters-resource.com)

8. What is Photoshop
• By Adobe Software; most widely utilized in
design industry for Photo and graphics
manipulation. Debuted in 1988.
• Newest version is CS6. Subscriptions available
for $50/Month; Creative Cloud.
• Alternatives: GIMP, Paint.Net, Graphics Gale,
Pixen, Aseprite

9. Learning Photoshop
• Lifehacker: http://bit.ly/hfYlkx
• Adobe TV: http://adobe.ly/P0GBHP
• http://www.photoshop.com/learn
• Lynda.com
• Most important! Experiment and Experiment
some more!

10. Setting up Photoshop
• Units & Rulers
• Guides, Grids & Slices
• Windows
• Hot Keys
• Brushes / Pencil / Anti-Aliasing
• Size of your Document!

11. Rulers Setup
Setup the Ruler to be Pixels instead of Inches (or anything else)

12. Guides Setup
Setup Gridlines for Every Pixel & Subdivisions every 5 pixels

13. Window Setup
Side by Side View of Same Window

14. Scaling
Nearest Neighbor
Bicubic Automatic

15. Anti-Aliasing
No Anti-Aliasing
With Anti-Aliasing

16. Hot Keys
• B – Brush
• D – Default Colors
• E – Eraser
• G – Gradient
• L – Lasso
• M – Marque
• T – Text
• U – Shapes
• V – Move
• W – Wand
• Z – Zoom
• Space – Pan
• CTRL - D – Deselect
• CTRL - T – Transform
• CTRL - L – Levels
• CTRL - R – Rulers
• CTRL - J – Copy Layer
• CTRL - Z – Undo
• CTRL + Alt - Z – Multi Undo
• CTRL + Alt - G – Group Layer
• CTRL + Alt + SHIFT – N: New
Layer
• CTRL + Del – Fill BG Color
• ALT + Del – Fill FG Color

17. Brushes and Drawing
• Pencil for solid colors
• Brush for anti-aliased lines
• Shift Key – Continous Line Drawing
• Alt Key – Eye Dropper
• Paths

18. Selections
• Square, Circle and Lasso
• Hot Keys
– Control-A: Select All
– Control-D: Deselect Current Selection
– Control-H: Hide Selection
– SHIFT: Constrains Selection for Square and Circle
– ALT: Constrains Lasso to straight lines

19. Transformations
• Control-T: Enter Transform Mode
• Right Click for Transform Options

20. Layers & Layer Styles
Layer Styles
Layer
FolderLayer Visibility

21. Blending Options
• Drop & Inner Shadows
• Bevel & Emboss
• Strokes & Gradient Overlays
• Glows & Fills

22. Opacity, Masks & Clipping Masks
Layer Mask Adjustment Layer
Clipping Mask
Mask
Adjustment
Layer

23. Tiles & Repeating Patterns
Original
Cropped and Tiled

24. Fixing Tiles
Original
Offset by half
Notice the Edges
Fixed Edges
Reverse Offset
Fixed Tile

25. Results of Fixed Tile

26. Saving Files
• Background colors
• Transparency & Alpha Channels
– GIF
– PNG24
– TIFF

27. Q & A
• Thanks for your attention
• Email: dower@dowerchin.com
• Twitter: @dowerchin
• http://www.dowerchin.com

28. Resources / References
• Sprite Resource:
http://spriters-resource.com/
• The Complete Guide to Isometric Pixel Art:
http://www.rhysd.com/tutorial/
• 30 Pixel Art Tutorials:
http://www.hongkiat.com/blog/pixel-art-tutorials/
• Pixel Art Basics:
http://browse.deviantart.com/art/Pixel-Art-Tutorial-Basics-
196016837
• Paint.net: http://www.getpaint.net/download.html
• Graphics Gale: http://www.humanbalance.net/gale/us/
• Pixen (Mac Only): http://pixenapp.com/
• Aseprite: http://www.aseprite.org/