New artwork: I Am a Child of God V. A reference to the Primary song. The rectangles represent (bottom to top), a child, its mortal parents, and our Heavenly Parents. (Figured it was time to do a more abstract version of this idea. It ended up also alluding to Hearts of the Children IV and Hearts of the Children V.)
My process for this style, for what it’s worth: mock up the design in Figma, export an SVG, open it in Inkscape, use the roughen and simplify filters, export a PNG, open it in Procreate, select the rectangles, paint the streaks within the rectangles, export a PNG, texture in Affinity Photo as usual.
Some dinky pixel art experiments, exploring what it looks like when you add texture and make them look kind of like mosaic tiles. (I’m sure someone else has already done this, but I haven’t, so here we are.) Also, this isn’t great pixel art, just to be clear.
For this first experiment, I made the squares in Figma and set the colors there, which was pretty laborious. Exported to SVG and added turbulence/displacement filters to get some variation. When exporting to PNG via Inkscape, I ran into the perennial issue where the filters sometimes only work on the top and left sides of the shape. (Someday I’ll figure out what’s going on there, since the filters look fine in Finder via Quick Look. In this case, from a distance, it still kind of looks okay.) Finally, I added some textures in Affinity Photo with opacity set to around 20% and blend mode set to soft light or overlay.
Second experiment: making things easier. I made a 48x48 image in Procreate Pocket on my phone and painted the scene using the oil paint brush. (Which is why the eyes are crazy and there isn’t a ton of definition on the characters. Like I said, not great pixel art.) I then wrote a quick command-line script (JS/Node) to take a PNG and export an SVG where each pixel of the PNG is a <rect> in SVG. Way faster than making the squares in Figma. The script shrinks each square a little and adds some jitter to the points as well. And I changed the background color to be more ground-like. Exported to PNG and textured as in the first experiment.
Some ideas for future exploration:
More subdivision on the tiles, for a little more geometric variety
Programmatically export masks from the SVG so that each tile can look more different from its neighbors, texturally (a masked tile would be next to an unmasked one, basically, with some randomness thrown in)
Rounding the edges of the tiles a little
Rendering the tiles in Blender (either with heightfields or by generating actual geometry with Python), ideally with some procedural texturing
A new experimental nerdy thing, for people who like hymns, sheet music, and textures:
How I make these hymn prints (as I’m calling them):
Typeset the first phrase (or so) in MuseScore using the Bravura font, with the spacing trimmed to within an inch of its life
Play it out loud to make sure I entered it right (cough) and export an SVG
Drag the SVG into a frame in Figma and use the SkewDat plugin to skew it -4°, center it, then export a 4,000px-wide PNG
Use ImageMagick to do some erosion and dilation (to simulate age and ink spread): convert input.png -morphology erode disk:18 -morphology dilate disk:16 output.png
Texture the image in Affinity Photo and export the PNG
Upscale with Real-ESRGAN to 12,000px-wide
Downscale a little in Affinity Photo, add 8% monochrome noise, and export the final PNG
I’m still figuring out how I want to do these (full bleed or not, barlines, clefs and key signatures or not, etc.). Also thinking about possibly doing some abstract versions as well, to avoid all these music typesetting issues entirely.
A short followup to what I wrote last year about Press, my abandoned typesetting engine project: I’m now fully convinced that the web platform is where I want to do typesetting. It’s open, programmatic, and capable. Source files are plain text, easy to version control, and fairly future-proof. And even though it’s not WYSIWYG — at least not the way I’m using it — it’s much more comfortable for me as a working environment.
For non-book work (charts, some kinds of documents), I’ve found that browsers already support everything I need (like @page). That’s how I’ve done all my recent genealogy design work, and it’s how I’ll do any language charts I make going forward. And for things like books where browser support isn’t quite there yet, Paged.js works well (and will presumably be phased out once browser support gets better).
Not to mention how nice it is for both print and digital workflows (EPUB, web) to all use the same technologies. I also love that the web is cross-platform. Something I ran into when I was making charts with PlotDevice (which is Mac-only) was that people on Windows couldn’t modify the charts even when I gave them the source. That’s not a problem with the web.
I’ve even started using the web platform for less webby things like making wallpaper for my phone:
Here’s the HTML (the 375×812px size is the CSS resolution of my iPhone 12 Mini — RIP — and also keep in mind that this was for a one-off never to see the light of day, so I took the liberty of cutting a few corners):
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="background">
<svg id="darknoise" viewBox="0 0 375 812" xmlns="http://www.w3.org/2000/svg">
<filter id="noiseFilter">
<feTurbulence baseFrequency="0.5" numOctaves="8" />
</filter>
<rect width="100%" height="100%" filter="url(#noiseFilter)" />
</svg>
<svg id="lightnoise" viewBox="0 0 375 812" xmlns="http://www.w3.org/2000/svg">
<filter id="noiseFilter2">
<feTurbulence seed="485" baseFrequency="0.005" numOctaves="12" />
</filter>
<rect width="100%" height="100%" filter="url(#noiseFilter2)" />
</svg>
</div>
<div class="quote">Come unto me, all ye that labour and are heavy laden, and I will give you rest.</div>
<div class="reference">Matthew 11:28</div>
</body>
</html>
It’s not the world’s most amazing wallpaper or anything, but I’m still pleased that I was able to make something I’m reasonably happy with using technologies I love. (I could have also used WebGL shaders or Canvas. Lots of options!)
I’ve decided to ditch Adobe’s Creative Cloud apps — Photoshop, InDesign, and Illustrator, mainly. I never thought I’d say that, but they’re too expensive. Instead, I’ll be using Affinity Photo, Affinity Publisher, and Affinity Designer. It’s a fairly small one-time cost instead of a dreary, never-ending, money-sucking subscription.
(If/when I need to do motion graphics or video editing in place of After Effects and Premiere, by the way, I’m planning to use the free version of DaVinci Resolve.)
So far I’ve only actually used Affinity Photo, to texture the piece I released yesterday. Worked like a charm. The live split-screen preview when applying a filter is brilliant, and the file sizes are much smaller, too. (In Photoshop I’d regularly end up with a 1–2 GB PSB file. With Affinity Photo, it’s closer to 300 MB.)
As far as typesetting goes, I still expect to use TeX (Tectonic) on projects where it makes sense — it’s what I used on the wide margin study editions since typesetting each language individually would have taken much more time — but it’s nice to have Affinity Publisher for other projects. I’m planning to use it for the book of narrative poems I’m (slowly) working on. (I’ll be setting it with Hinte, a new typeface I’m designing in FontForge. More on that soon.)
With Figma doing most of what I used to use Illustrator for, I don’t expect to use Affinity Designer all that much initially. But the raster brush textures are intriguing. We’ll see.
The hiatus may or may not be over. New artwork: Mother in Heaven. I used Cirque to create the small circles, then did the rest of the vector work in Figma (which I’m liking much more than Illustrator).
