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 ...
About Me• Graduated RIT 1995 in Information Tech,concentration in Multimedia• Worked on marketing projects for Kodak,Xerox...
What is Pixel Art• A form of digital art created using rastergraphics software, where images are editedon the pixel level....
Examples of Pixel ArtImage by Georg Joergens (http://paul-muad-dib.deviantart.com/)
Examples of Pixel ArtImage by Ryan F (http://ryan-gfx.deviantart.com/)
Sprite SheetsSprite Sheet of Link from SNES Legend of Zelda (http://spriters-resource.com)
What is Photoshop• By Adobe Software; most widely utilized indesign industry for Photo and graphicsmanipulation. Debuted i...
Learning Photoshop• Lifehacker: http://bit.ly/hfYlkx• Adobe TV: http://adobe.ly/P0GBHP• http://www.photoshop.com/learn• Ly...
Setting up Photoshop• Units & Rulers• Guides, Grids & Slices• Windows• Hot Keys• Brushes / Pencil / Anti-Aliasing• Size of...
Rulers SetupSetup the Ruler to be Pixels instead of Inches (or anything else)
Guides SetupSetup Gridlines for Every Pixel & Subdivisions every 5 pixels
Window SetupSide by Side View of Same Window
ScalingNearest NeighborBicubic Automatic
Anti-AliasingNo Anti-AliasingWith Anti-Aliasing
Hot Keys• B – Brush• D – Default Colors• E – Eraser• G – Gradient• L – Lasso• M – Marque• T – Text• U – Shapes• V – Move• ...
Brushes and Drawing• Pencil for solid colors• Brush for anti-aliased lines• Shift Key – Continous Line Drawing• Alt Key – ...
Selections• Square, Circle and Lasso• Hot Keys– Control-A: Select All– Control-D: Deselect Current Selection– Control-H: H...
Transformations• Control-T: Enter Transform Mode• Right Click for Transform Options
Layers & Layer StylesLayer StylesLayerFolderLayer Visibility
Blending Options• Drop & Inner Shadows• Bevel & Emboss• Strokes & Gradient Overlays• Glows & Fills
Opacity, Masks & Clipping MasksLayer Mask Adjustment LayerClipping MaskMaskAdjustmentLayer
Tiles & Repeating PatternsOriginalCropped and Tiled
Fixing TilesOriginalOffset by halfNotice the EdgesFixed EdgesReverse OffsetFixed Tile
Results of Fixed Tile
Saving Files• Background colors• Transparency & Alpha Channels– GIF– PNG24– TIFF
Q & A• Thanks for your attention• Email: dower@dowerchin.com• Twitter: @dowerchin• http://www.dowerchin.com
Resources / References• Sprite Resource:http://spriters-resource.com/• The Complete Guide to Isometric Pixel Art:http://ww...
Upcoming SlideShare
Loading in …5
×

Photoshop for pixel_art

1,061 views

Published on

Published in: Art & Photos, Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,061
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
15
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Photoshop for pixel_art

  1. 1. Presented By: Dower Chin@dowerchinhttp://www.dowerchin.com
  2. 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. 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. 4. What is Pixel Art• A form of digital art created using rastergraphics software, where images are editedon the pixel level.• Used everywhere there is a screen. Immenselypopular in games, especially in the retroarena.
  5. 5. Examples of Pixel ArtImage by Georg Joergens (http://paul-muad-dib.deviantart.com/)
  6. 6. Examples of Pixel ArtImage by Ryan F (http://ryan-gfx.deviantart.com/)
  7. 7. Sprite SheetsSprite Sheet of Link from SNES Legend of Zelda (http://spriters-resource.com)
  8. 8. What is Photoshop• By Adobe Software; most widely utilized indesign industry for Photo and graphicsmanipulation. Debuted in 1988.• Newest version is CS6. Subscriptions availablefor $50/Month; Creative Cloud.• Alternatives: GIMP, Paint.Net, Graphics Gale,Pixen, Aseprite
  9. 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 Experimentsome more!
  10. 10. Setting up Photoshop• Units & Rulers• Guides, Grids & Slices• Windows• Hot Keys• Brushes / Pencil / Anti-Aliasing• Size of your Document!
  11. 11. Rulers SetupSetup the Ruler to be Pixels instead of Inches (or anything else)
  12. 12. Guides SetupSetup Gridlines for Every Pixel & Subdivisions every 5 pixels
  13. 13. Window SetupSide by Side View of Same Window
  14. 14. ScalingNearest NeighborBicubic Automatic
  15. 15. Anti-AliasingNo Anti-AliasingWith Anti-Aliasing
  16. 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: NewLayer• CTRL + Del – Fill BG Color• ALT + Del – Fill FG Color
  17. 17. Brushes and Drawing• Pencil for solid colors• Brush for anti-aliased lines• Shift Key – Continous Line Drawing• Alt Key – Eye Dropper• Paths
  18. 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. 19. Transformations• Control-T: Enter Transform Mode• Right Click for Transform Options
  20. 20. Layers & Layer StylesLayer StylesLayerFolderLayer Visibility
  21. 21. Blending Options• Drop & Inner Shadows• Bevel & Emboss• Strokes & Gradient Overlays• Glows & Fills
  22. 22. Opacity, Masks & Clipping MasksLayer Mask Adjustment LayerClipping MaskMaskAdjustmentLayer
  23. 23. Tiles & Repeating PatternsOriginalCropped and Tiled
  24. 24. Fixing TilesOriginalOffset by halfNotice the EdgesFixed EdgesReverse OffsetFixed Tile
  25. 25. Results of Fixed Tile
  26. 26. Saving Files• Background colors• Transparency & Alpha Channels– GIF– PNG24– TIFF
  27. 27. Q & A• Thanks for your attention• Email: dower@dowerchin.com• Twitter: @dowerchin• http://www.dowerchin.com
  28. 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/

×