Creating patterns from photos
Digital Imagery: Patterns in Nature - Lessons 4 & 5
Objectives
- Use a lasso tool to select specific areas of an image.
- Be able to resize various elements in a graphics or paint package.
- Use effects in photo-manipulation software to edit, change or enhance an image.
- Combine a number of images using layering.
Lesson Resources
- Lesson Slides
- Pixlr E online editor
Lesson 1 - Repeating patterns
Lesson 2 - Symmetrical Patterns
Lesson 3 - Refined photo editing
Lessons 4 & 5 - Creating patterns from photos
Lesson 6 - Presenting their work
Introduction
In preparation for this lesson collect a number of nature images, like the examples that they’ve been looking at for the last two weeks, and save them into a folder on the shared area (where the children can access them). Alternatively, the students can use the images they have saved in the last two lessons or use the stock images provided with Pixlr.
This is likely to take more than one lesson as parts of the process are quite time consuming. If they need to save their work halfway through ENSURE THEY CHOOSE THE OPTION OF A PXD FILE FROM THE SAVE DIALOGUE BOX as this maintains the layers in their work.
Opening it the following week can be done by first opening Pixlr.com and going to Open Image and browsing for the file. You will not be able to just double click on the file from its folder as we are using a browser based app and computers can only open files with local (installed on the computer) software in this way.
Recap the previous weeks; the types of patterns in nature they have been looking at, the different ways in which patterns were created. Explain that they have been created patterns with drawings inspired by nature with the 2Simple tools and in the last lesson we started to look at how photos can be edited to create interesting effects. This week they will be making patterns by combining elements of photos from nature. Explain that this is a little bit trickier, but a higher skill set and one that is really useful to have as it can be used for lots of other things.
Open Pixlr.com and start a new image. Use the custom settings on the right and set the page dimensions to 1024 x 768, then click create.
Open the first photograph into Pixlr by going to Layer > Add image as layer and browse for the image on the network, or open a stock image from the File menu.
If it appears too large you can adjust the size of the image by going to Edit > Free transform and adjust the size with the blue corner handles that appear.
It’s really important to ensure the Aspect is fixed at the top of the screen. This stops the image getting squashed and distorted as you resize it.
Holding the SHIFT key on the keyboard toggles between fixed and free.
Next we need to get rid of any background on the picture layer. If the background is one solid colour, or blank, the magic wand tool will do this very quickly and easily. Just select it and click on the background, then press the delete key on your keyboard to remove the background.
If your background is not one solid colour, you will need to use the polygonal lasso tool to carefully click around the edges of your shape until you get right around, like in the last lesson.
Polygon Lasso
Then go to the Select menu and choose Invert selection. Rather than selecting the area we’ve just clicked around, this reverses things and selects everything in the image apart from the area we clicked around.
Once you’ve done this, press the delete or backspace key on your keyboard to delete the background of the image.
Use the Move tool to position it on the screen. Its size and position should be so you could fit approximately four versions of the image across the page and three down the page (4 x 3).Press the Enter key to ‘drop’ it on the screen where you want it.
Next create a copy of the layer by right-clicking the layer in the Layers box, and click the Duplicate Layer icon, then using the Move tool to drag the copy into its new position.
A copy of the layer is created and it has been re-positioned with the Move tool.
If students are not familiar with the concept of layers explain that it means your picture is built up on lots of separate layers, all stacked on top of each other like glass sheets, when you look down from above it appears that they are all on the same background, but to be able to alter or move an object on a layer, you must select the correct layer (in the layers list) first.
Repeat this process to create two more copied layers to complete the top row of 4.
Pixlr also now lets you right-click an image on your page and duplicate the layer directly from there. Students can try out both methods.
Colour effects can then be added to each layer separately by selecting each layer at a time in the Layers box and then going to Adjustment > Hue & Saturations and adjusting the sliders to experiment with colour changes. Repeat this for each of the four layers.
At this point go to the Layer menu and choose Flatten image. This sticks all the layers we’ve created so far together as one layer.
When you are back to one Background layer, right-click it again in the Layers box and duplicate it like we did earlier.
Use the move tool to drag down the second row of images and then repeat this again so you have three rows of your images.
On the middle and bottom layers, repeat the process of changing their colour from earlier (Adjustment > Hue & Saturation), but now, as they are all starting as different colours, they will all remain different.
Complete your design by flattening the layers back into one background (Layer > Flatten image) and add a background colour with the fill tool.
Select a colour for the background by clicking the upper of the two circles at the bottom of the tools (shown red here) which brings up the colour selector. Pick a colour from the slider on the right first and then move the dot in the large square to select a precise shade, then press OK.
Then click on the background part of the image to colour it.
Finally save your image to your computer. Click on File > Save and follow the guidance from the previous lesson.
Add a name to the image and press OK to save, then use the Window navigation box that appears to choose where to save it on your computer or network and click Save again.
Alternatives and extensions to this method can be playing around with the pattern to offset some rows:
This may require use of the marquee select tool to select an extra image, copy and paste it (which appears on a new layer), and move it into position.
Or to simplify things, you could add the color effect to all the images at once. For this don’t change the Hue & Saturation until you have duplicated your image enough times and moved them all into position, then go to Layer > Flatten Image. This will ‘glue’ the layers together into just one layer again, so any effects are applied to the whole layer. Then adjust the Hue & Saturation.
Or experiment with the size of the images by using Edit > Free transform at times:
Here are some other examples of patterns created with photo editing:
Combining more than one image into a repeating pattern:
Plenary
Review the lesson and assess the children's success with the lesson objectives, ask and discuss:
- How successful were you with using the lasso tool?
- How could you further improve this?
- What is important to remember when resizing images? To keep their aspect ratio so as not to squash them.
- Which effects did you use?
- What is hue? A colour or shade
- What is saturation? The intensity of a colour, how strong or washed out it is.
- Why are layers really important in this time of software? They allow us to isolate individual elements and apply effects and edits to only those parts.