Webdesign Photo Effect

Hi felllows, I was wondering, how can I reproduce those photo effects:







Someone who knows how to do that, please help me!

A mix of shutter speed, focus and aperture is my guess

As Peroxide said. Aperture and shutter speed go hand in hand. The so called effect is a shallow depth of field and depends on the aperture. You can achieve more or less the same effect using the portrait mode on most digital cameras or if you have a SLR, you can use aperture priority ("semi automatic") mode or even manual if you're ballsy.
http://digital-photography-school.com/how-to-get-shallow-depth-of-field-in-your-digital-photos/

Are you asking graphic design question or web dev? You can get the gray'ed out effect by putting a layer of black over the image and then turning the opacity down to 0.6~. Then you can overlay the white "I'm Jonathan Doe..."

pixlr.com just use one of the editors