How to Write Beautiful Sass
How to Use Warnings and Errors in Sass Effectively
CSS font-display: The Future of Font Rendering on the Web
Taking CSS Linting to the Next Level with Stylelint
Putting the "App" in Progressive Web Apps
Building a Trello Layout with CSS Grid and Flexbox
How to Create CSS Conic Gradients for Pie Charts and More
Fancy Web Animations Made Easy with GreenSock Plugins
Improve Web Typography with CSS Font Size Adjust
Converting Your Typographic Units with Sass
CSS Architecture and the Three Pillars of Maintainable CSS
Sass Functions to Kick-Start Your Style Sheets
How to Create Beautiful HTML & CSS Presentations with WebSlides
What's the Difference Between Sass and SCSS?
CSS Inheritance: An Introduction
Replaced Elements in HTML: Myths and Realities
Getting Started with Sass
GreenSock for Beginners (Part 2): GSAP's Timeline
7 of the Best Code Playgrounds
SVG Tip: Create a Bold Vector Halftone Graphic in Under 2 Minutes
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 the image is hand engraved into a wooden block by specialist blockcutters. Prints are then taken from the block.[caption id="attachment_157164" align="alignright" width="187"] Dürer (Surprisingly, not the
guy from Nickleback.)[/caption]
Woodcuts are always bold and stark in nature 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, Dürer is able to mimic mid-tone grays by building up a fine rendering of linework. In his case, he uses 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é'.
It also turns out to be perfectly suited to the mathematical precision of SVG – though hand rendering thousands of precision lines by hand 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?
HalftonePro is an online service that converts photos into 'halftones' - what the printing industry calls these 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.
High contrast images are likely to work best. I uploaded this classic black and white Bowie shot as a test and used the default 'Wave' preset with a 'Vertical elements' setting of 150.