Creating a website background inspired by spatula stuhhi

Question

I'm working on a website for a friend of mine. It's a very minimalistic webdesign and right now I'm using a dark grey-ish background. However if found pictures like this:

http://www.puurkleur.com/afbeeldingen/gallery/Spatula_Stuhhi_01.jpg
http://www.puurkleur.com/afbeeldingen/gallery/la_casa_dei_sogni_01.jpg

I want to create a similar effect to use for the background, instead of just the one color grey. I like the 1st link most, it's not just 1 color, but not too contrasting and it's subtle. I'm not experienced with photoshop, I tried to find some tutorials but I can't find none that matches the effect I want to achieve. (probably because I don't know the terms is should google on) I tried playing around with gradient and the brush tool, but it's not even close to what I want to achieve.

Does anybody know what photoshop techniques should be used to create similar effects? If I know that I could google more specific and probably I will be able to find some good tutorials.

Thanks in advance.

Answer 1

If you need something realistic, real photos are your best bet.

1. If you have a good camera, you may shot one yourself. Find a pattern which matches what you expect, and post-process it until you get the satisfying result. Given the abstractness of the image, post-processing can be particularly heavy — something which would render a less abstract photo completely unrealistic and often ugly.

2. If not, stock photos are an option to consider. Depending on the license, you may be able to post-process them too.

This is what makes the photos you linked to so interesting to use for backgrounds. They are realistic, with a slight DOF, darker and lighter zones, etc.

If the background doesn't have to be photo-realistic, but still less basic than textures from the ten years old video games, with their noticeable repetitiveness, it will still involve much work by hand, to complicated to be explained in a few sentences.

Answer 2

MainMa is correct that usually the best way to get good texture is to go out and photograph the texture yourself. But the tricky thing about webdesign is that you'll want your background to be seamless across all displays. Most photos, while they can add a lovely depth and character to your site, are only so big. That means, you'll have a definitive edge to your background (on larger displays) that will detract from the design. So, how do you counteract this? You use a repeatable (or tileable) background texture that can be repeated infinitely to fill whatever space is needed.

There are a few great resources for repeatable background textures: Subtle Patterns http://subtlepatterns.com/ and Tileables http://tileabl.es/ are two of my favorites.

One last note on background texture. I know that you are wanting a really interesting, unique texture for the background, but I would challenge you to think about how that helps acheive your client's business objectives for their new site. Background textures are not meant to be the focus of the site. They are meant to stand quietly in the background and let the content of the site shine. I don't know your client's objectives, and maybe a super cool, eye-catching background is just what they need. Just make sure your design choices are serving your client's business needs and you're not just designing it to look cool. :)