Refine edges in Affinity

What: Refine edges > Apply > Done!

Where: in Affinity Photo

A client wanted his name as his logo in a handwritten style. He was thinking of a handwritten font; I asked him to actually write his name for me because if you want personal, it’s often good to be personal. He wrote his name for me on paper, took a photo of it and emailed it to me.

I did all the obvious things: increase contrast, select the light background with the Flood Select Tool, Invert Pixel Selection, copy and paste it to a new layer. So far, so good. It looked smooth.

Read moreRefine edges in Affinity

Images and ::before & ::after

I learned today that the pseudo-elements ::before and ::after don’t work with the img-element. As I went looking I found out that the CSS spec is very unclear on this. It has to do with the fact that <img> doesn’t have its actual content on the page/in the HTML, it pulls it in from elsewhere. This makes it a replaced element. Form elements are also replaced elements. It is also an empty element, like <br> and <hr>.

Rule of thumb (for now) seems to be that empty elements can’t have ::before and ::after applied with the exception of <hr>.
Other empty elements with which ::before and ::after wont work (may) include form elements and <br>.


Photo by Jack Krasky on Unsplash

Duotone

I wanted a duotone effect on the photos on this site and at first I thought I would like to create it through CSS but what I found seemed to require adding extra HTML, which isn’t something I want to spend my time on for this site (I’m using GeneratePress and I’m not in the mood for a child theme at the moment), and as I was searching for different ways to create the effect, I came upon this little tutorial for Photoshop.

Title: Digging into Duotone: How to Create & Use Colorized Images in Web Design

Read moreDuotone