SVG : Create a Bold Vector Halftone Graphic in Under 2 Minutes

Halftone pattern vector Free Downloads in Ai, EPS, SVG, CDR formats. halftone, halftone, halftone dots, halftone dots

This is a section from a 500 year old woodcut from perhaps the ‘Andy Warhol of woodcut artists’ – Albrecht Dürer. Woodcut is an old printing technique where specialist blockcutters would hand engrave an image into a wooden block. Prints are then taken from the block.
Woodcuts are invariably bold and stark because – unlike most painting techniques – there are no mid-tone colors or blends. The paper is either clean white or drenched ink black – there are no gray areas.
However as you can see above, Dürer was able to mimic mid-tone grays by building up layers of fine linework. In his case, he used parallel fill lines, but it’s possible to get the same effect with cross-hatching, waves, ribbons, arcs, dots and other patterns.
Although it’s a very old technique, we still see it everywhere today – from tattoos to beer labels to bank notes. Most of us have admired the beautiful, wavy ribbon linework used on paper money, sometimes called ‘guilloché’.

Halftone examples

It also turns out to be nicely suited to the mathematical precision of SVG – though hand rendering thousands of precision lines may be impractical for many of us. There are professional options available if you’re super-serious – Excentro is cool.
But if that’s overkill, let’s look at a simpler, more affordable solution.

How do I make a Halftone vector graphic?

HalftonePro is an online service that converts photos into ‘halftones‘ – what the printing industry calls these solid-color graphics.
Using this app is relatively simple but the results take some tuning.
  • IMAGE: Upload your photo. If this is your first time, jump to the ‘Preset’ menu at the bottom, as it will give you a feel for the app faster.

  • SHAPE: The ‘Shape’ menu lets you change the shape that makes up the image – circles, squares, lines, etc.

    • PATTERN: The ‘Pattern’ menu is where things get complex. You can choose the grid that your shape adhere to. While I’m not going to bore you by explaining all the sliders here, the ‘Vertical elements‘ slider is probably the most important. This sets the level of detail in your conversion. A setting of 25 is chunky – a setting of 150 is finely detailed. TIP: Don’t set Vertical elements higher than about 150 as you’ll be creating a HUGE SVG file and may even crash your browser.
    • COLORS: Pick your palette.
    • RESIZE: You can guess.
    • PRESETS: The dozen or so presets provided give you a good sense of what this app can do. You can also save your own custom presets here.

Post a Comment