Ever once in a while I find a great Photoshop tutorial on the web and then try and expand upon it to come up with something different and usable in my web work. This is really, REALLY easy and one can really some subtle style to a website when plain old images just won’t do.

colored line drawings from images

This is a great little combination of tutorials I had found combined with some tinkering I did in Photoshop to get what I was looking for. What I wanted were some subtle images, but not images, for a classy site. Images just seemed to be too much for the site and actual drawings were extremely blah. This is what I came up with. Note: Hover over the links to see explanation images.

1. Bring an image, any image, in to Photoshop. The only thing I have found that helps when choosing images is to pick ones that have better contrast.
2. Do any fixes or adjustments you want to the image first.
3. Make a duplicate of the image layer above the original layer
4. Make sure you have the new layer selected for ALL adjustments below!
5. With the new layer selected do: Image -> Adjust -> Invert
6. The new layer will change to an almost photo negative of the original
7. Click on the layer blending mode tab and change the new layers blending mode to color dodge
8. Now dont panic here, the image may turn almost pure white. That is fine.
9. Still with your new layer choose Filter -> Blur -> Gaussian Blur from the menu.
10. This is where the fun starts!
11. As you move the amount of blur up from 0 the drawing effect will change from a light pencil sketch to a photo realistic line drawing. Plain and simple the choice is yours as to what you want to use and the way you want to use the image.
12. As a final perk try choosing image -> adjustments -> desaturate. This can add a splash of color in certain sections of the image.
13. I have also been able to add a bit more flair to the image by adjusting the levels before the image adjustments and for more subtle contrast adjustments you can do it afterwards.
14. Here is mine using a 1.5 setting on the gaussian blur.
15. And another using a 3.0 setting on the gaussien blur.
16. Basically the higher the amount of blur the more of the image that shows through.

Hope you enjoy it and find ways to put it to good use. If you find a cool way to use it drop me a line and tell me about it!

Cheers, Dave