Picture Perfect: Images for Coders

639 views
570 views

Published on

Let's face it; we're not really artists (except for the artists). But that doesn't mean we can't contribute to the images on the internet. Whether you're a Photoshop guru, or don't even own a Mac, we can still make valuable contributions to ensure our digital assets are crisp and professional. In this talk, we'll look at some basic command-line tools for creating, modifying, and managing images, and look at how we can manage them properly on the web. We'll play with sprites, responsive images for these new retina displays, and techniques for optimizing performance on lower bandwidth connections and mobile web.

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
639
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Picture Perfect: Images for Coders

    1. 1. Picture Perfect Kevin W. Gisi Twin Cities Code Camp October 6, 2012
    2. 2. Kevin W. Gisi Mashable Ruby on RailsHTML/CSS3/JavaScript Rails Rumble ECRuby kevin@kevingisi.com @gisikw
    3. 3. QUICK DISCLAIMER
    4. 4. What you are... 1337 haxor Red Bull enthusiast Text-basedSelf-taught and self-motivated Tinkerer Automator
    5. 5. What you are not... Crazy hipster Classy designer Starbucks lover Indie artist Liberal arts major Photoshop guru
    6. 6. THIS TALK IN A NUTSHELL
    7. 7. Images• Why do we need ‘em?• How do we make ‘em?• How do we manage ‘em?• How do we display ‘em?
    8. 8. A BRIEF HISTORY...
    9. 9. The Universe (Ancient Times)
    10. 10. The Universe (1982)
    11. 11. The Universe (the 90’s)
    12. 12. The Universe (the 90’s)
    13. 13. The Universe (2004)
    14. 14. THE UNIVERSE NOW
    15. 15. The Internet ♂
    16. 16. The Internet ♀
    17. 17. What do I care?
    18. 18. What Women Want...• Enough white space• Quality imagery• Easy intuitive navigation• Clean and clear design elements• Reserved palette• Harmonious element placementhttp://blog.templatemonster.com/2012/07/26/web-design-by-gender-women/
    19. 19. MAKING IMAGES
    20. 20. GRAPHICSMAGICK(OR IMAGEMAGICK) http://www.graphicsmagick.org/
    21. 21. • Convert an image from one format to another (e.g. TIFF to JPEG)• Resize, rotate, sharpen, color reduce, or add special effects to an image• Create a montage of image thumbnails• Create a transparent image suitable for use on the Web• Compare two images• Turn a group of images into a GIF animation sequence• Create a composite image by combining several separate images• Draw shapes or text on an image• Decorate an image with a border or frame• Describe the format and characteristics of an image
    22. 22. gm convert source.png -pointsize 144 -stroke black -strokewidth 4 -font Bookman-Demi -fill white -draw "gravity North text 0,150 GOES TOTCCC; gravity South text 0,40 MAKES AMEME" meme.png
    23. 23. MANAGING IMAGES
    24. 24. TWO PROBLEMS:
    25. 25. LAYOUTRESOLUTION
    26. 26. Important Resolutions• 320 wide (iPhone portrait)• 480 wide (iPhone landscape)• 640 (some tablets, netbooks)• 768 (iPad portrait)• 1024 (iPad landscape)• 970, 1280, 1600, stop already!
    27. 27. “on a device with 512mb of RAM, serving a 1200x1200image consumes a full 1% of that total available.” -A smarter coworker
    28. 28. DISPLAYRESOLUTION
    29. 29. The Evil Retina
    30. 30. Rules of Retina• Pixels aren’t pixels anymore• “Real” pixels are 2:1• “Web” pixels stay the same• Image pixels double
    31. 31. “Pixels” versus Pixels
    32. 32. # Non-Retina<img src=”300x300.png” style=”width:300px;height: 300px” /># Retina<img src=”600x600.png” style=”width:300px;height: 300px” />
    33. 33. gm convert -resize 300x300 600x600.png 300x300.png
    34. 34. RENDERING IMAGES
    35. 35. 3 THINGS:
    36. 36. SPRITES
    37. 37. gm convert montage -backgroundtransparent -geometry +4+4 *.png sprite.png
    38. 38. STEALING
    39. 39. Twitter Bootstrap
    40. 40. Font Awesome
    41. 41. RESPONSIVE IMAGES
    42. 42. <div class=”responsive_img”> <span data-src=”l.png” data-media=”(min-width: 768px)”> </span> <span data-src=”m.png” data-media=”(min-width: 480px)”> </span> <span data-src=”s.png”></span> <noscript><img src=”s.png”/></noscript></div>
    43. 43. $(‘.responsive_image’).each(function(){! var p = $(this) $(this).find(‘span’).each(function(){ var s = $(this) var m = s.data(‘media’) if(m){ if(window.matchMedia(m).matches){ p.append( ‘<img src=”’+s.data(‘src’)+’”/>’ ) return false } } else { p.append( ‘<img src=”’+s.data(‘src’)+’”/>’ ) } })})
    44. 44. https://github.com/scottjehl/picturefill
    45. 45. WARNING!We only handled layout pixels
    46. 46. Two options:
    47. 47. (min-width: 768px) and (min-device-pixel-ratio: 2.0)(min-width: 768px)(min-width: 480px) and (min-device-pixel-ratio: 2.0)(min-width: 480px)(min-device-pixel-ratio: 2.0)
    48. 48. Or
    49. 49. if(window.matchMedia(m).matches){ var src = s.data(‘src’) # if pixel-ratio >= 2.0 # double dimensions p.append( ‘<img src=”’+src+’”/>’ ) return false}
    50. 50. Images (recap)• We need ‘em!• We make ‘em!• We manage ‘em!• We display ‘em!
    51. 51. Kevin W. Gisi Picture Perfectkevin@kevingisi.com @gisikw

    ×