Your SlideShare is downloading. ×
0
Picture Perfect: Images for Coders
Picture Perfect: Images for Coders
Picture Perfect: Images for Coders
Picture Perfect: Images for Coders
Picture Perfect: Images for Coders
Picture Perfect: Images for Coders
Picture Perfect: Images for Coders
Picture Perfect: Images for Coders
Picture Perfect: Images for Coders
Picture Perfect: Images for Coders
Picture Perfect: Images for Coders
Picture Perfect: Images for Coders
Picture Perfect: Images for Coders
Picture Perfect: Images for Coders
Picture Perfect: Images for Coders
Picture Perfect: Images for Coders
Picture Perfect: Images for Coders
Picture Perfect: Images for Coders
Picture Perfect: Images for Coders
Picture Perfect: Images for Coders
Picture Perfect: Images for Coders
Picture Perfect: Images for Coders
Picture Perfect: Images for Coders
Picture Perfect: Images for Coders
Picture Perfect: Images for Coders
Picture Perfect: Images for Coders
Picture Perfect: Images for Coders
Picture Perfect: Images for Coders
Picture Perfect: Images for Coders
Picture Perfect: Images for Coders
Picture Perfect: Images for Coders
Picture Perfect: Images for Coders
Picture Perfect: Images for Coders
Picture Perfect: Images for Coders
Picture Perfect: Images for Coders
Picture Perfect: Images for Coders
Picture Perfect: Images for Coders
Picture Perfect: Images for Coders
Picture Perfect: Images for Coders
Picture Perfect: Images for Coders
Picture Perfect: Images for Coders
Picture Perfect: Images for Coders
Picture Perfect: Images for Coders
Picture Perfect: Images for Coders
Picture Perfect: Images for Coders
Picture Perfect: Images for Coders
Picture Perfect: Images for Coders
Picture Perfect: Images for Coders
Picture Perfect: Images for Coders
Picture Perfect: Images for Coders
Picture Perfect: Images for Coders
Picture Perfect: Images for Coders
Picture Perfect: Images for Coders
Picture Perfect: Images for Coders
Picture Perfect: Images for Coders
Picture Perfect: Images for Coders
Picture Perfect: Images for Coders
Picture Perfect: Images for Coders
Picture Perfect: Images for Coders
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Picture Perfect: Images for Coders

507

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 …

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
507
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
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
  • Transcript

    • 1. Picture Perfect Kevin W. Gisi Twin Cities Code Camp October 6, 2012
    • 2. Kevin W. Gisi Mashable Ruby on RailsHTML/CSS3/JavaScript Rails Rumble ECRuby kevin@kevingisi.com @gisikw
    • 3. QUICK DISCLAIMER
    • 4. What you are... 1337 haxor Red Bull enthusiast Text-basedSelf-taught and self-motivated Tinkerer Automator
    • 5. What you are not... Crazy hipster Classy designer Starbucks lover Indie artist Liberal arts major Photoshop guru
    • 6. THIS TALK IN A NUTSHELL
    • 7. Images• Why do we need ‘em?• How do we make ‘em?• How do we manage ‘em?• How do we display ‘em?
    • 8. A BRIEF HISTORY...
    • 9. The Universe (Ancient Times)
    • 10. The Universe (1982)
    • 11. The Universe (the 90’s)
    • 12. The Universe (the 90’s)
    • 13. The Universe (2004)
    • 14. THE UNIVERSE NOW
    • 15. The Internet ♂
    • 16. The Internet ♀
    • 17. What do I care?
    • 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. MAKING IMAGES
    • 20. GRAPHICSMAGICK(OR IMAGEMAGICK) http://www.graphicsmagick.org/
    • 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. 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. MANAGING IMAGES
    • 24. TWO PROBLEMS:
    • 25. LAYOUTRESOLUTION
    • 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. “on a device with 512mb of RAM, serving a 1200x1200image consumes a full 1% of that total available.” -A smarter coworker
    • 28. DISPLAYRESOLUTION
    • 29. The Evil Retina
    • 30. Rules of Retina• Pixels aren’t pixels anymore• “Real” pixels are 2:1• “Web” pixels stay the same• Image pixels double
    • 31. “Pixels” versus Pixels
    • 32. # Non-Retina<img src=”300x300.png” style=”width:300px;height: 300px” /># Retina<img src=”600x600.png” style=”width:300px;height: 300px” />
    • 33. gm convert -resize 300x300 600x600.png 300x300.png
    • 34. RENDERING IMAGES
    • 35. 3 THINGS:
    • 36. SPRITES
    • 37. gm convert montage -backgroundtransparent -geometry +4+4 *.png sprite.png
    • 38. STEALING
    • 39. Twitter Bootstrap
    • 40. Font Awesome
    • 41. RESPONSIVE IMAGES
    • 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. $(‘.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. https://github.com/scottjehl/picturefill
    • 45. WARNING!We only handled layout pixels
    • 46. Two options:
    • 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. Or
    • 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. Images (recap)• We need ‘em!• We make ‘em!• We manage ‘em!• We display ‘em!
    • 51. Kevin W. Gisi Picture Perfectkevin@kevingisi.com @gisikw

    ×