photoshop for pixel_art
TRANSCRIPT
Presented By: Dower Chin@dowerchinhttp://www.dowerchin.com
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
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.
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.
Examples of Pixel Art
Image by Georg Joergens (http://paul-muad-dib.deviantart.com/)
Examples of Pixel Art
Image by Ryan F (http://ryan-gfx.deviantart.com/)
Sprite Sheets
Sprite Sheet of Link from SNES Legend of Zelda (http://spriters-resource.com)
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
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!
Setting up Photoshop
• Units & Rulers
• Guides, Grids & Slices
• Windows
• Hot Keys
• Brushes / Pencil / Anti-Aliasing
• Size of your Document!
Rulers Setup
Setup the Ruler to be Pixels instead of Inches (or anything else)
Guides Setup
Setup Gridlines for Every Pixel & Subdivisions every 5 pixels
Window Setup
Side by Side View of Same Window
Scaling
Nearest Neighbor
Bicubic Automatic
Anti-Aliasing
No Anti-Aliasing
With Anti-Aliasing
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
Brushes and Drawing
• Pencil for solid colors
• Brush for anti-aliased lines
• Shift Key – Continous Line Drawing
• Alt Key – Eye Dropper
• Paths
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
Transformations
• Control-T: Enter Transform Mode
• Right Click for Transform Options
Layers & Layer Styles
Layer Styles
Layer
FolderLayer Visibility
Blending Options
• Drop & Inner Shadows
• Bevel & Emboss
• Strokes & Gradient Overlays
• Glows & Fills
Opacity, Masks & Clipping Masks
Layer Mask Adjustment Layer
Clipping Mask
Mask
Adjustment Layer
Tiles & Repeating Patterns
Original
Cropped and Tiled
Fixing Tiles
Original
Offset by half
Notice the Edges
Fixed Edges
Reverse OffsetFixed Tile
Results of Fixed Tile
Saving Files
• Background colors
• Transparency & Alpha Channels
– GIF
– PNG24
– TIFF
Q & A
• Thanks for your attention
• Email: [email protected]
• Twitter: @dowerchin
• http://www.dowerchin.com
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/