ImageMagick Examples --
Background Examples

ImageMagick Examples Preface and Index

This is a table of applying various transforms against some 'random' canvases, showing methods of producing interesting random backgrounds at whatever size you desire, whether it is a single large image, or a background tile for a web page.

The table starts with the method used to generate the initial 'random' image used to generate all the other images shown. Just insert the various image 'transform' into the command, to magick the raw image into something similar to that shown. From there you can adjust the various setting yourself to produce exactly the type of background image you want.

Be sure to read the notes at the end, before attempting to create your own examples. and please mail any interesting variations you may come across.

Input Images :- Generator, Transform and Post-processing

Images results shown here were generated with a "-noop" null transform operator

Plasma Fractal (non-tiling canvas image)

`magick -size 120x120 plasma:fractal fractal.png magick fractal.png {..transform..} \ -shave 20x20 +repage -auto_level {result}`

Random Noise (tilable background image)

`magick -size 80x80 xc: +noise Random noise.png magick noise.png -virtual-pixel tile {..transform..} \ -auto_level {result}`

Random Hex Tile (hex tile background image)


  magick -size 50x80 xc: +noise Random -write mpr:rand \
           -extent 100x80   -page +50-40 mpr:rand \
           -page +50+40 mpr:rand -flatten  hextile.png
  magick hextile.png -virtual-pixel tile  {..transform..} \
          -auto_level    {result}

Basic Transforms

blur_raw (no post -auto-level)

-blur 0x1

blur_1

-blur 0x1

blur_3

-blur 0x3

blur_5

-blur 0x5

blur_10

-blur 0x10

intensity

-blur 0x10 -colorspace Gray

channel

-blur 0x10 -fx G

hues

-blur 0x10 -auto-level -separate -background white \ -compose ModulusAdd -flatten -channel R -combine +channel \ -set colorspace HSB -colorspace RGB

Shade Transforms

shade_raw (no post -auto-level)

-shade 120x45

shade

-shade 120x45

shade_dimmed (no post -auto-level)

-shade 120x45 -auto-level -fill grey -colorize 40%

shade_1

-blur 0x1 -shade 120x45

shade_2

-blur 0x2 -shade 120x45

shade_5

-blur 0x5 -shade 120x45

shade_10

-blur 0x10 -fx G -shade 120x45

Emboss Transforms

emboss_1

-blur 0x5 -emboss 1

emboss_1g

-blur 0x5 -emboss 1 -fx G

emboss_0s

-blur 0x3 -emboss .5 -shade 120x45

emboss_1s

-blur 0x5 -emboss 1 -shade 120x45

emboss_1gs

-blur 0x5 -emboss 1 -fx G -shade 120x45

emboss_5gs

-blur 0x10 -emboss 5 -fx G -shade 120x45

Edging Transforms

charcoal

-blur 0x2 -charcoal 10 -negate

charcoal_10s

-blur 0x2 -charcoal 10 -negate -shade 120x45

charcoal_1s

-blur 0x2 -charcoal 1 -negate -shade 120x45

edges

-blur 0x2 -edge 10

edge_grey

-blur 0x2 -edge 10 -fx G

mesas

-blur 0x2 -edge 10 -fx G -shade 120x45

Line Generating Transforms

lines

-blur 0x10 -emboss 4 -edge 1

loops

-blur 0x10 -edge 15 -edge 1 -blur 0x1

engrave_loops

-blur 0x10 -edge 15 -edge 1 -blur 0x1 -fx R+B+G -shade 280x45

engrave_loop

-blur 0x10 -edge 15 -edge 1 -blur 0x1 -fx G -shade 280x45

color_contours

-blur 0x10 -normalize -fx 'sin(u4pi)*100' -edge 1 -blur 0x1

contours

-blur 0x10 -normalize -fx 'sin(g4pi)*100' \ -edge 1 -blur 0x1 -shade 280x45

Complex Textured Blob Transforms

(using a strange '-edge 1' effect)

blobs

-blur 0x10 -edge 1

blobs_grey

-blur 0x10 -edge 1 -fx '(R+G+B)/3'

pits

-blur 0x10 -edge 1 -fx G -shade 280x45

ridges

-blur 0x10 \( +clone -negate \) -edge 1 -fx u.G+v.G -shade 280x45

mottled

-blur 0x10 -write mpr:save -negate -edge 1 -negate -fx G \ \( mpr:save -edge 1 -fx G \) -shade 280x45 -evaluate-sequence mean

Paint Transforms

paint_raw10 (no post -auto-level)

-paint 10

paint_areas

-paint 10 -blur 0x5 -paint 10

paint_raw10s

-paint 10 -shade 120x45

paint_8

-blur 0x5 -paint 8

paint_8s

-blur 0x5 -paint 8 -shade 120x45

paint_3

-blur 0x10 -paint 3

paint_3s

-blur 0x10 -paint 3 -shade 120x45

paint_3d

-blur 0x10 -paint 3 \( +clone -shade 120x45 \) \ +swap -compose overlay -composite

Gradient Transforms

levels (no post -auto-level)

-blur 0x12 -fx intensity -normalize \ -size 1x9 gradient:navy-lavender \ -interpolate integer -fx 'v.p{0,G*(v.h-1)}'

levels_3d (no post -auto-level)

-blur 0x12 -fx intensity -normalize \ -size 1x9 gradient:navy-lavender \ -interpolate integer -fx 'v.p{0,G*(v.h-1)}' \ \( +clone -shade 120x45 -normalize \) \ -compose overlay -composite

zebra

-blur 0x12 -normalize \ -size 1x19 pattern:gray50 -fx 'v.p{0,G*(v.h-1)}'

midlevel

-blur 0x12 -normalize \ \( -size 1x9 xc: -draw 'color 0,4 point' -negate \) \ -fx 'v.p{0,G*(v.h-1)}'

edged_level (no post -auto-level)

-blur 0x12 -normalize \ \( -size 1x9 xc: -draw 'color 0,4 point' \) \ -fx '(.6+.2v.p{0,G(v.h-1)})' \ \( +clone -normalize -edge 1 \) -fx 'u+v'

layered_levels (no post -auto-level)

-blur 0x12 -normalize \ \( -size 1x9 xc: -draw 'color 0,4 point' \) \ -fx '(.5+.3v.p{0,u(v.h-1)})' \ \( +clone -normalize -edge .3 -fx 'R+G+B' \) \ -fx 'intensity+v' -fill skyblue -tint 100

Miscellaneous

filaments

-blur 0x5 -normalize -fx g \ -sigmoidal-contrast 15x50% -solarize 50%

If you have or come up with a nice background generator or image transform, please let me know so it can be added here to share with others.

Final Important Notes

The two Random Noise Images, being so 'random' are tilable, and we use "-virtual-pixels" to ensure that they remain tilable during the transformation. However the Plasma Image is not tilable to start with, so a enlarged version with the edges "-shave" off afterward is used to remove the unwanted edge effect of many operations. These technique is discussed further in Modifying Tile Images.

Note that the final "-auto_level" is applied to most images to enhance the contrast of the results, unless the transform is marked as not requiring it so as to preserve and coloring or shadings that resulted from the transformation.

Because many image transformations such as, "-blur", "-emboss", and "-edge" are grey-scale transformations, they work on the three color channels, completely independently of each other. As a result, in many of the images, the result looks like three separate images have been overlaid, then shaded.

The final example "layered_levels" was designed to works on each of the three levels simultaneously, while keeping them separate, until the final step where they are added together and color tinted.

This triple effect can be removed by either applying an initial gray-scaling operation, or extracting just one of the channels when finished. Typically I extract the 'green' or 'G' channel as it is normally the strongest channel in a grey scale image anyway, though any of the three channels can be used.

ImageMagick Examples -- Background Examples

Final Important Notes

ImageMagick Examples --
Background Examples