Creating tiles from objects

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.

.

.

Step 12: I often use another layer on top with one color and reduce the opacity of that layer to 5% or much higher, as the following examples show you. The orange one is a 70% opacity layer on top of the base tile layer, the blue one is a 50% opacity layer. It will convert all colors into the same hue variation and takes even more weight off the file. It also unifies colors and makes a complex image appear much more even, hence very suitable as a background. It is there to enrich but not to distract. It conveys a subliminal message without yelling and flashing.

.

.

.

.

.
[rule=60%]DimGray[/rule]
.
So, if you have any questions about more detailed instructions, just ask. I will try to answer them all :slight_smile: I have kept my instructions scant, because if you do not know the basics of dealing with layers and selections this method is too much to start out with — Ulrike

Step 11: Now that I have the finished tile I can change the size and/or the colors. Here are a few examples of what this tile would look like as a background. There are many more transformations possible, but this is enough for you to see how versatile one design can be. The closer you bring the gray values of the colors of the design itself, the lighter the weight of the tile will be.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

Step 6: The tile could be used like that already, but I wanted to include a more challenging continuation for this background tiling. I created a company name and turned it to angle over the tile. I tend to use the V-tool (in Photoshop) for the purpose of rotating, easy positioning that way.

.

.

Step 7: To better see where one tile ends and the other starts I set the opacity of the layers of the adjacent tiles (on their separate layers) to 70% and the lighter one to 50%. That way I could better judge what I was doing. I made 3 layers with the same company name and stacked one layer of text over the layer of each of the tiles. I merged each corresponding layer of text to the tile.

.

.

Step 8: Each tile now had part of the company name on it. I cut off the part of the name that goes beyond each tile. Each was still on its own layer. The top 2 tiles were dimmed for this demonstration.

.

.

Step 9: Now I used the V-tool and moved Tile 2 over Tile 1 and matched up the layers exactly. I select the Tile 2 minus the snipped of text and deleted it, now only the corner with the text was on this layer. I merged it to the layer of Tile 1.

.

.

Step 10: A repeated Step 9 with Tile 3. Lined it up exactly over Tile 1, I selected the corner with the text on it and delete the rest of Tile 3 and merged it with the Tile 1 layer. Now there was the finished tile that lined up perfectly as a repeat background.

.

.