Given my recent reminder from Beth about the very cool, powerful, flexible tiled clones tool in Inkscape, I decided to make a little tutorial about how to create this bokeh effect.There are a lot of settings here, but along the way, try playing with my numbers to see what happens.
- Make a black background created with the rectangle tool, the same size as your page.
- Make a single circle, and “unset the fill” by right clicking on the fill color indicator in the lower left and choosing ‘unset’.
- Make the circle about 1/50th of the black rectangle, sort of the proportion of a star on the American flag’s blue field.
- The first circle should go to the upper left corner of the black field.
- Select the circle and open the tiled clones dialog by going to edit/clones/tiled clones, and use the following settings to replicate the design.
- The tiling scale is set to 8 columns by 6 rows (48 clones)
- In Symmetry tab: Choose P4M Symmetry, Shift X and Shift Y in both row and column are set to 15% with 6% randomization in both X and Y
- In Scale Tab: Scale X and Y in both row and column are set to 5% with 10% randomization in both X and Y.
- The Rotation tab is ignored.
- In Blur and Opacity tab: Blur is set to 1% per row and 2% per column with 5% randomization. Fade out is set to 10% in both row and column with 25% randomization, and alternate is checked for both row and column.
- In Color Tab: An initial color of a slightly yellow off white is chosen. This is why the fill must be unset in the original circle. Each of the settings for Hue, Saturation and Luminance are set to 2% per row and column with 5% randomization, except that Luminance is set to 30% randomization.
- The Tracing tab is ignored.
- Click on the Create button at any time to see how your settings affect your clones. When you’re satisfied, close the dialog. As long as you have the original selected, you can go back into the dialog and continue experimenting.
- Also, any changes you make to the original immediately affect your clones, as you might imagine. My imperfect circle shape for the bokeh was created by finding and selecting the original (shift-d), making it into a path (shift-ctrl-c), and altering its shape with the node tool (n)
Obviously, there are a lot of options with this flexible, powerful tool. However, once you begin to play with the options, as I did here, your experimentation will pay off. You start to see what the shift settings do, how the rotation setting works, how to bring about symmetry or randomization, and so on. First, have fun, then worry about getting the precise effect you want. You may find that your experiments lead to more interesting outcomes than your original idea.
Related articles
- 20121122: Sliced by John LeMasney via 365sketches.org #cc #design #typography (365sketches.org)
- 20121120: A study in hexagonal geometry by John LeMasney via 365sketches.org #design #cc (365sketches.org)
- 20121111: an explanation of SVG vs. PNG (365sketches.org)
