Hi, I’m Brian Dys — a photographer from the inside looking out · a composer entangled in electronic music · a UX designer · a spouse, a parent, & everything in between.
Recently, I hopped on to Spotify as an artist. I released several electronica singles under the label Weet Weew. The experience was liberating in the sense that I’ve been putting it off for quite some time and finally got to grapple with it. I got to revisit some old compositions and reacquainted with a DAW (digital audio workstation) of choice: FruityLoops.
Preparing for a (rather bleak) future when crazed fans would ask me for autographs, I thought I needed to have one. So I practiced using a big round-tip marker and settled with a 0.6 mm-tip pen.
With a trusty scanner, I scanned it with a resolution of 600 to be able to “blow it up” and properly enhance it. From Photoshop to Illustrator to Figma to its destination, Spotify — it took me around an hour to do all this.
We’re using Adobe Photoshop to prepare the material for vectorization in Illustrator.
- File → Open
To open the material
- Image → Adjustments → Desaturate
To convert it to grayscale
- Image → Auto Contrast
To make the paper whiter and ink blacker
- Image → Adjustments → Threshold
To convert the paper to pure white and ink to pure black; yes it will pixelate, that’s why it’s important to have a high resolution material; some areas might be lost, so you might be working on several layers with different threshold amounts
- Window → Channels
Copy and paste the artwork into an alpha channel and select it (it will select the white part, so, invert the selection to select the black part)
- Window → Layers
Go back to the layer while the selection is active
- Layer → New → Layer Via Copy
To copy and paste the black part into a new layer
- Layer → Delete → Layer
Select the original layer and delete it
- Manual Adjustments
Now you have a line art (with transparent background) that is fairly easy to adjust — like if you need to extend or erase some parts
- File → Save → .PSD
Save the file as Photoshop file
We’re using Adobe Illustrator to convert the prepared material into vector. Sure, from the scanned material we can go straight here — I personally see the result is better when we prepare the material prior vectorization.
- File → Open
To open the .psd file
- Photoshop Import Options dialog → Convert Layer to Objects
To keep the layers (if any) in the material
- Select the Object
To select the particular layer we will vectorize
- Window → Image Trace
To customize settings for vectorization
- Object → Image Trace → Expand
To vectorize the object and see its layers
- Manual Adjustments
Now you have vector objects — remove any unwanted layers like solid backgrounds (to make the background transparent); also prepare for the desired artwork and artboard size
- File → Export → Export As → .SVG → Use Artboards
Save the file as Scalable Vector Graphics file; for handwritten signatures in particular, the default setting for SVG Options will do (it’s a different case when you have images and fonts in your material)
Figma is awesome because you can use it for free and it is web-based (use it alongside Facebook on the other tab of your favorite web browser). Really, this part is optional — it just so happened that my Spotify header image template is conveniently in Figma (you can use Photoshop or Illustor, too).
Right after I uploaded my updated header image to Spotify, I turned to see that my notebook has grown itself some robot doodles, courtesy of Bryce. Consequently, I asked him if we would like to color it in Photoshop and that lit up his face!