Grow your CSS skills. Land your dream job.

Photography and CSS

Published by Chris Coyier

It sure seems like a heck of a lot of web designers are also photographers, doesn't it? And by "photographer", I mean they own a DSLR and heavily consider aesthetics when taking a picture. Why the overlap of interests? Well clearly web design often incorporates photographs. Maybe we like to have the equipment we need to take decent pictures for websites and it grows from there. Maybe it's because photography is a lot like design. You have a canvas of sorts and you need to take into account the principals of design: color, balance, line, shape, contrast... the gestalt.

I think maybe the connection runs a little deeper though, in that it appeals to our inner nerd in the same type of way.

CSS isn't a particularly difficult language to understand. You select things, and change the values of different properties. There is no logic, no math, no object oriented concepts, no security concerns... It largely reads like plain English. Yet, understanding it and being really good at it are pretty far apart. The old adage applies nicely:

It takes a day to learn and a lifetime to master.

CSS might seem a little mystifying at first, until you dig in a little and then you might think "this is all there is?" I found photography to be similar. At first, a DSLR can seem like a maze of settings and details to know about. It seems like learning how to change everything according to the circumstances and your desired outcome is going to be incredibly complicated. Then the further you dig in, you realize it basically boils down to your ISO, shutter speed, and aperture. Then it happens again, "this is all there is?"

It goes deeper in both directions. Yes, CSS can get more complicated with stuff like CSS3 transitions, cross-browser quirks, and trying to style form elements to look decent. Yes, photography can get more complicated with things like different lenses, dealing with white balance, and processing RAW. But those things are somewhat minor compared to the core concepts. Master those fundamentals, and the rest comes along with it over time.

Comments

  1. Big Coops
    Permalink to comment#

    right on mate :) one DSLR owner and CSSer right here :)

  2. So much philosophy but you are so right! ;-)

  3. Jason
    Permalink to comment#

    Couldn’t have put it better myself.

  4. That'sMe
    Permalink to comment#

    I actually started on photography and then learned CSS. I got in love with photography, bought a Canon 350D + Sigma 70-300m + Canon 50mm.
    Almost at the same time, like 3 or 4 months later, got used to CSS and got myself into javascript. Since then photography is on standby mode.

  5. +1 for photography and CSS even though I am not a designer but a web developer ;)

  6. Just for the record… I’m not a particularly good photographer, but I do have a Canon XTi and a few lenses and quite enjoy learning about it and getting better. This post is just about me noticing how similar the two things feel to me.

  7. Senne
    Permalink to comment#

    It’s definitely striking how many web designers have a DSLR. But why do you even need a DSLR when it comes down to ISO, shutter speed, and aperture? Even the most basic pocket cameras have these settings lately. And basically the composition is the most important part of a picture. Oh well.. That’s probably the inner tech snob in all of us.

    • Permalink to comment#

      The difference between a DSLR and point and shoot is all about the lens and the size of the sensor, and to a lesser degree the functions of the camera.

      The bigger lens on a DSLR completely changes the look of a photo compared to the tiny lens on a point and shoot. And the larger sensors make for much cleaner images, especially in low light and at high ISO levels.

      Being able to instantly snap a photo, or a series of 5-10 photos in one second allows you to capture things you’d never get waiting for the point and shoot to find its focus and take the photo.

  8. Awesome. I’m currently waiting on buying a Canon 5D Mark II, and I couldn’t be more excited.

  9. One of the reasons that most web designers are also photographers is that photography is also an art like web design… It involves an appreciation of beauty… perhaps this is also the reason why most web designers also like painting, music and sketching… I consider web designers web artists. . . Like art you use your God-given talent and combine it with skills that you learn through hardwork… Photographs, photoshop and illustrator is often like the colors that painters use, codes like css-xhtml and jquery is often like the eye for detail of a painter and lastly the monitor screen is like the canvass in which you unleash your masterpiece and express your inner artist or geek for that matter (right on chris!). But also I really think that this is a science for it involves structured procedure, technique and logic. . . At least that is how I feel . . .

    I do wish I could get my own DSLR someday. . . :) Its a bit pricey from a students allowance here in the philippines. . . work work work i got to go and work on my blog and hopefully be as successful as chris is someday . . . :D

  10. Photography is not only for designers – developers also enjoy taking pictures.

    • Absolutely. As do ballet dancers, woodworkers, and flintknappers. I’m sure many of them could also draw connections between their two crafts, and it would be interesting to hear!

    • Eamonn
      Permalink to comment#

      No flintknapper has ever taken a photograph. Fact. Their hands cannot grasp metal or plastics. Nor can they comprehend two-dimensional representations other than cave art (and murals/wall-art, by extention). One flintknapper named Henri Smalls entered a Cinema in 1922 and exploded.

    • Eamonn – I thought your comment was so hilarious, ha ha.

    • and yet even with those things going against them they still ended up with their own website.. go figure

      http://flintknappers.com/

    • I wonder who took the photos…

  11. Gavin McNamee
    Permalink to comment#

    The DSLR will provide more control and we all appreciate that. I started as a fine artist, but photography, painting, ceramics and web design are all linked as far as I’m concerned.

  12. Steve Nelson
    Permalink to comment#

    I’m a full time commercial photographer, part time web developer and I feel exactly like you do, from the other side of the coin. Both photography and web design involve an intersection of technology, craft and aesthetics I find irresistible. My tools have changed, from a chemical to an electronic environment, but the elements of craft and the stimulation and satisfaction derived from making something beautiful using technology (and experience of course) is the same. Fun to see the same appreciation through your eyes.

  13. joe o.
    Permalink to comment#

    right on. at first CSS seemed very..Greek to me. But there comes those “a-ha!” moments where everything makes sense.

    Now if only I could find some of those moments in learning PHP.

  14. David
    Permalink to comment#

    Funny you point this out Chris. I agree with you, but never thought of the connection! I was actually thinking of designing my own site about DSLR photography :D

    Keep up with the photography though, it can be very gratifying!

  15. Permalink to comment#

    Very cool insight! As a photographer/designer I can so relate to this discussion.

    I think it’s awesome how with the same very basic set of tools, we can end up with so much amazing, diverse and unique art.

    I think it comes down to the vision of the artist, taking those same basic tools, rules and techniques available to all and using them in unique ways and combinations to tease out subtle details and create the things we visualize.

    It’s easy enough to learn the rules, tools and techniques, of CSS and photography. But it really does take long time to get to that point where you’re so comfortable with them that you can quickly use them to create your visions.

    I’m still working on it, for sure. Probably always will be.

  16. And after the white balance etc. the rabbit hole goes deeper with off-camera lighting, lighting mods, pocket wizards, advanced Photoshop techniques, etc. It seems we can always push things further.

  17. Permalink to comment#

    I’m looking to get a DSLR but I haven’t got a lot of money. Does anybody know of any cheap DSLR cameras?

    • Canon is usually the popular choice here, but I have to personally recommend the Nikon D40x or D5000 depending on what you mean by “Havn’t got a lot of money.”

    • Permalink to comment#

      Canon xsi or t1i have better image quality over nikkon entry level cameras.

    • I would back up the Nikon D3000 as a good camera for a beginner. Cost me £380 in the UK, you won’t get any cheaper from Canon or Nikon.

  18. HDR is to Photography as CSS3 is to CSS.

  19. Steven Braun
    Permalink to comment#

    The best book on photography is Robert Adams “Beauty in Photography: Essays in Defense of Traditional Values” published by Aperture © 1981. It’s like “Zen and the Art of Motorcycle Maintenance” for all things visual.

  20. So true. I am a full time photographer and a fully-part time web designer and developer. I am still learning a lot of design stuff from you every day! I think one helps the other ya know? Being a web designer also helped me with my Photoshop skills. Learned a lot about creating graphics from scratch.

  21. Permalink to comment#

    I really love the post image! Very neat.

  22. Oh gosh. If only I can get my hands on a DSLR.

  23. Good catch Chris!

    I consider myself doing well in photography. Besides my daily work as web developer I really enjoy taking pictures whenever I get a little time :)

  24. William Knight
    Permalink to comment#

    The statements in this post are so true. I started with film photography in high school before ever getting into web design, but was into 3D animation and graphic design at that time.

    Now I incorporate a lot of my digital photography into my web design work. You can really instill a lot of value for yourself to your current and future clients by saving them money in your ability to produce digital assets on your own versus buying expensive stock photos. I wonder how many stock images one could buy to equal the same amount of money used to buy a digital SLR? Not too many in the grand scheme of things, and I suspect that’s a huge reason these two disciplines go hand in hand.

    Btw, I had a Canon XTi for the last three years and loved it but am about to upgrade to a Canon 5D MI. Can’t wait for some full frame action!

  25. Permalink to comment#

    I have to say css and photography do require creativity indeed!

  26. Well said and great little thought to put out there (we all love to relate)! I bought a DSLR to support my web design/development and have taken a great interest in both photography and cinematography.

    With the HDSLR cameras shooting high def it’s fun to not only be creative with photos but also in video!

  27. Permalink to comment#

    Well said mate. Completely agree – It takes a day to learn and a lifetime to master.

  28. Permalink to comment#

    Wonderful citation – It takes a day to learn and a lifetime to master.

  29. Beautiful quote!

  30. Excellent observation…

  31. This is a great post and I agree whole-heartedly! While I’m a front-end developer and designer, I also enjoy photography. I certainly don’t consider myself a “professional” photographer by any standards, but I’ve certainly got that “designers” eye when I take photos and it’s very helpful.

    If I can, I’ll take my own photos…sometimes stock photography just doesn’t always cut it for me!

  32. Doreen
    Permalink to comment#

    I’m a web designer who has also worked as a professional photographer. I have frequently explained to friends that what attacts me to photography also attracts me to web design. Going back a few years to the darkroom days, photography was about creating a design in the camera and then tweaking it in the darkroom. I find the process in web design similar; creating a design in photoshop and tweaking it with CSS. Also, the same old magic of putting photographic paper into chemicals and seeing the image develop is similar to writing a bunch of HTML and CSS and seeing the results in a browser.

  33. Permalink to comment#

    Maybe it has something to do with working in a darkroom, and shutting yourself off from the world. I ‘do’ CSS but I don’t touch photography, can’t afford the tools – after Ive spent all me dosh on CS5 and the latest iMac.

  34. Permalink to comment#

    I think anyone who says something like “just because you bought a DSLR, doesn’t mean your a photographer” is wrong, when you pick up a camera your a photographer. It doesn’t make you a good one. Saying your a proffessional Photographer is something I was slow to call myself. I would agree with Chris about a lifetime to master both css and photography! I am both a proffessional photographer and web designer http://www.milkbottlephotgraphy.co.uk and let me know what you think. can I call myself a proffessional?

  35. Great read , Thanks…
    It amazes me how you find time to philosophise about these types of things!

  36. Hey Chris, Interesting topic but yeah well done for spotting the connection. I myself am a web designer and I have a very keen eye for good photography especially when making these choices for my websites that I design and develop. Being able to have some kind of control over images I we use is a bonus and having photography skills will allow designers to take photos content they want on their site without the use of generic stock photos. Making it more more unique.

  37. For all designers and photographers out there, I’d love to know where your design inspiration comes from.

    Tweet your inspiration and include the hashtag #inspirationstrikes and your tweet will be featured at the Cannes Lions International Advertising Festival on Monday.

    Check out the live tweets here:-

    http://www.inspirationstrikes.co.uk

    Thanks

    Jonathan

  38. Very encouraging. Learning something new always feels extremely daunting: Especially when you look at professional work. Don’t be afraid to be lost for a little while, you’ll always catch on.

  39. Ant
    Permalink to comment#

    Before start learning css and html, I feared that I should remember many tags and properties. But when started, found that it’s not that hard really.

  40. Eduardo Dx
    Permalink to comment#

    Very good comparison. Trully real and interesting.

  41. One photographer, web designer and developer here!

  42. dot tilde dot
    Permalink to comment#

    i agree, chris. what i like about digital photography is that it allows me to learn from my mistakes. being also a musician, i like that approach a lot.

    what i like best about (digital) photography is that 1.) it is so hard and 2.) that it is so easy. technically it’s getting easier and cheaper. to master light, aesthetics, human perception and semantic aspects of visual phenomena stays as tricky as always.

    transitioning from analogue to digital, i found it difficult to choose shots. deleting photos is now one of my favourite parts of the game.

    css is similar in many aspects. isn’t it easy? and how mind-boggling the possibilities are.

    .~.

  43. Permalink to comment#

    I agree with Chris Coyier on his wonderful article about Photography and CSS. The experience in taking various shots using different combination of ISO, Shutter speed and Aperture is like that of writing CSS for cross-browser and cross-platform web-apps :)

  44. Great and well written, really enjoyes the read.
    Thanks.

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".