2.
John Ferris pixelwhip pixelwhip pixel_whip [email_address]

3.
Pixel Whip http://pixel-whip.com

4.
Who are you?

5.
What is this all about?

6.
Why Photoshop?

8.
Nondestructive Design <ul><li>“ Nondestructive editing allows you to make changes to an image without overwriting the original image data, which remains available in case you want to revert to it. Because nondestructive editing doesn’t remove data from an image, the image quality doesn’t degrade when you make edits.”

9.
-Adobe Documentation </li></ul>

10.
Nondestructive Design <ul><li>“ You can f--- up and it will be OK”

11.
- John Ferris </li></ul>

12.
Nondestructive Design 1. Adjustment Layers 2. Layer Styles 3. Layer Masks 4. Smart Objects 5. Smart Filters 6. Nondestructive Cropping Tools of the Trade

14.
Thou Shalt Organize Thy File

15.
Thou Shalt Organize Thy File VS

16.
Thou Shalt Organize Thy File <ul><li>How to Organize </li><ul><li>Group Layers

17.
Name Groups so they loosely mimic the HTML Structure of the page

18.
Name Layers

19.
Collapse Groups when Finished </li></ul></ul>

20.
Thou Shalt Organize Thy File HOT TIP Turn off “Add 'copy' to Copied Layers and Groups”

21.
II. Thou Shalt Use a Grid

22.
Thou Shalt Use a Grid <ul><li>Why?

23.
Grids introduce order into chaos.

24.
Grids reduce the guesswork involved with size and placement.

25.
Grids are made of boxes . . . conveniently, so are web pages. </li></ul>

26.
Thou Shalt Use a Grid http://blackestate.co.nz http://drupal.org

27.
Thou Shalt Use a Grid http://blackestate.co.nz http://drupal.org

28.
Thou Shalt Use a Grid <ul><li>Common Grid Frameworks </li><ul><li>960gs http://960.gs/

29.
Blueprint http://www.blueprintcss.org/

30.
YUI Grids http://developer.yahoo.com/yui/grids/ </li></ul></ul>

31.
Thou Shalt Use a Grid <ul><li>Grid Creation Tool

32.
https://github.com/danclien/photoshop-grid-layout-generator </li></ul>

33.
III. Thou Shalt Snap to Pixels

34.
Thou Shalt Snap to Pixels <ul><li>Whole Pixels </li></ul><ul><li>Sloppy Pixels </li></ul>

35.
Thou Shalt Snap to Pixels Setting Your File Snap to Pixels

36.
Thou Shalt Snap to Pixels Setting Your File Snap to Everything Else

37.
Thou Shalt Snap to Pixels Setting Your File Set Your Units to Pixels

38.
Thou Shalt Snap to Pixels <ul><li>Feel Free to Eyeball Transforms

39.
. . . then go back and manually enter whole pixel values </li></ul>

40.
IV. Thou Shalt Use Shape Layers

41.
Thou Shalt Use Shape Layers Buttons Navigation Borders Forms

43.
Thou Shalt Use Shape Layers <ul><li>Compound Shapes </li></ul>

44.
Thou Shalt Use Shape Layers Rounded Corners Scalin' ain't easy

45.
Thou Shalt Use Shape Layers Layer Styles Party Shoes for Shapes

46.
Thou Shalt Use Shape Layers Layer Styles Party Shoes for Shapes

47.
Thou Shalt Use Shape Layers Don't Use PS Defaults Create Your Own

48.
V. Thou Shalt Not Erase

49.
Thou Shalt Not Erase Types of Masks

50.
VI. Thou Shalt Use Smart Objects

51.
Thou Shalt Use Smart Objects <ul><li>Use Smart Objects for

52.
Importing Images or Logos

53.
Reusing graphics such as bullets, buttons, etc. </li></ul>

54.
VII. Thou Shalt Plan for Expansion

55.
Thou Shalt Plan for Expansion <ul><li>Web Pages are Dynamic

56.
All elements that can expand will eventually need to transition to a Repeating Background Image or Solid Color. </li></ul>

57.
VIII. Thou Shalt Use Adjustment Layers

58.
Thou Shalt Use Adjustment Layers <ul><li>Non-Destructive Image Adjustments </li></ul>

59.
IX. Thou Shalt Not Take Type Tools in Vain

60.
Thou Shalt Not Take Type Tools in Vain <ul><li>Paragraph Type Point Type </li></ul><ul><li>Dummy text courtesy of http://www.lorizzle.nl </li></ul>

61.
Thou Shalt Not Take Type Tools in Vain Character Palette Inline styles

62.
Thou Shalt Not Take Type Tools in Vain Character Palette Inline styles

63.
Thou Shalt Not Take Type Tools in Vain Paragraph Palette Block styles

64.
Thou Shalt Not Take Type Tools in Vain Paragraph Palette Block styles

65.
X. Thou Shalt Use Transparency with Care

66.
Thou Shalt Use Transparency with Care <ul><li>Watch Your Blend Modes

67.
Normal is the only blend mode that translates to the web.

68.
Only use others (multiply, screen etc.) if you're exporting a flattened image. </li></ul>

69.
Thou Shalt Use Transparency with Care <ul><li>Transparent PNGs are awesome

70.
. . . Big ass transparent PNGs are not. </li></ul>

71.
Thou Shalt Use Transparency with Care <ul><li>24bit PNG 149 KB </li></ul><ul><li>JPG 33 KB </li></ul>

72.
Questions?

73.
Survey Says? http://dcco.us/n/76

74.
This Session Has Ended. Go in Peace.