Often here on SitePoint I hear people asking about how to create images out of nothing, like not having access to images that fit the desired theme, not being able to create images, not even having a camera and using photos of their own and not having any artistic inclinations either. Well, that is a difficult thing for the guy who knows coding well but can not create images, for a site needs something that is not just text and gradients, in my view anyhow.
In this tutorial I assume basic knowledge of photoshop or other software to work with images. You need to be able to work in layers and with text, how to make selections and cut parts out of images. You need to use a scanner also.
So I set out to find some examples to point you in the right direction. Arrangement of the objects is still an artistic judgment but can be overlooked to a degree, because repetition creates its own value. All sorts of things can be used this way, just remember not to scan things for this use that are copyrighted. That includes images from books, fabric designs, CD covers and so on.
.
[rule=60%]DimGray[/rule]
.
Step 1: In this first example I have taken objects that almost all people have in their homes or offices. Some sticky notes with a little writing on it and some paper clips. I arranged them arbitrarily on the scanner bed without overlapping them and just scanned them. The image resulted in a picture as this one.
.
.
Step 2: Then I cut out each individual item and copied and pasted, which gave each its own layer, like so.
.
.
Step 3: I rearranged the individual objects, moved them and turned them to my liking. I eliminated the large clip but duplicated one of the others and changed the color. Now the composition hung together and looked just right.
.
.
Step 4: For the next step I cropped the image so all objects were contained without being cut off.
.
.
Step 5: After that step I creating the base for the repeat, I duplicated this image on separate layers and moved each image to create a tiled pattern to see if it appears as I wanted it to. I left some rather large hole there to only show the background color. You noticed that the background color is just flat. It is by choice so. The more you texture an image, the more the weight (kb) increases, and you want to minimize that for your site.
.
.