In this tutorial I show you how to make some really fun background tiles from nature. I picked a few interesting leaves from the bushes in my garden to demonstrate how a little walk through nature can give you some wonderful material to use as base for your work.
You need a scanner and some basic understanding of working with image software that you can work in layers, how to cut out elements and merge them. I will not go into detail about these steps because if you do not know how to do those than this tutorial is too advanced for you.
But you can ask questions if you are not clear about something and I will gladly answer to clarify.
.
[rule=60%]DimGray[/rule]
.
Step 1: These are two individual scans of some leaves. I arranged them without touching each other so I can cut them out cleanly. These scans are raw and not enhanced in any way. I use a small size because the tile that I want to make is not very large. It should not be large because it is a background that should be relatively light weight. Always think of loading time for your site.
It is easy to make complicated images that are great to look at, but that is hard to combine with the design of a site. Weight is always a factor.
.
.
Step 2: Now I have duplicated this layer. Then I made another layer between the background layer (original) and the new layers and filled it with white. It can be any color that is in contrast to the leaves. I leave the layer of leaves under the solid layer to have a good copy left in case something does not work out. I always make sure that I have extra layers for safety. Then I activated the upper layer and cut out the leaves with the magic wand set to tolerance 32px and the lasso tool set to 1px. This layer I duplicated and moved under the solid white layer. Now I have the freedom to work with the top layer and not worry about losing something.
.
.
Step 3: Now I copied and pasted each leaf onto its own layer so I was able to move them around freely and overlap them. I created 1 new layer above the solid background layer and under the leaves, created a square with the marquee tool set to a ratio of 1:1 and filled it with a color. This layer I duplicated 3 times to have 4 squares and moved them so they are butted up to each other. For the demonstration here I colored them all in a different hue.
The next step was to arrange the leaves over the middle of all 4 squares and leave the outward edges of each square open, without a leaf on it. I arranged the leaves in such a way that the directions of the veins pointed in different angles.
.
.
Step 4: For this step I duplicated all leaf layers and took the duplicate layers and merged them into one layer. This layer of the combined leaves I copied 3 times. I moved those layers each above a layer with a square, so each square had its own set of leaves. I linked each set of layers (1 square and 1 set of leaves) and moved each linked square above the upper square on the left side, deactivating the linked layers of the sqaures to only see the leaf layers on top of the one square in this location. So there was one square visible under the four layers of leaves.
.
.
Step 5: After having the leaf layers all in the right location, I used the magic wand set to a tolerance of 0 to select the space around the square tile with the solid color. The leaves are all on one layer on a transparent background now after merging them. The selection is active while I activate the layer of the leaves. I deleted the leaves that are outside of the square.
Now I can change the background color to any color I wish to, independent of the leaves, and also in the reverse way, changing the leaves independent of the background.
.
.
