Up and Down

May 18, 2024

The backs of two yellow traffic lights, the left painted with a smile, the right with a frown.

Such a nice little bit of street art. Simple lines which take advantage of the shapes in our environment to make an immediately relatable statement. I see the left and it makes me smile.

Hell’s Kitchen, Manhattan

Pattern Pattern

May 11, 2024

Drawing (and redrawing) the patterns from some old favorite clothes.

View project page

Two repeating patterns, side by side, both drawn from old textiles

Digging around the dusty corners of an old hard drive when I came across a pattern I had drawn way back when. The pattern on the left was actually from one of my favorite 1950s style jackets. I don’t know where the jacket went, but I do still love that pattern. The one on the left is from a shirt I still own. More on that pattern later.

When these were originally drawn, I did them in Adobe Illustrator and saved them as Illustrator swatches which is kind of telling as to how long ago it was. Repeating patterns as swatches were new and exciting and Illustrator was the main tool of choice in my work. There wasn’t a whole lot of web design work back then and print ready vectors were mandatory.

Like a lot of my recent archive discoveries, once again, the project was how to update these files for the web.

The Design

Since the patterns were originally swatches, I used that idea as the main design feature. I’ve been creating a few varieties of UI cards for work, so I had a head start on what I needed. Card interfaces are all over the web, but I definitely wanted these to be closer to Pantone or paint chips. There’s a couple of different card options to show the pattern specs, the full repeating pattern and then the individual colors.

For the typography, I wanted something a bit retro to reflect the 1950s period, but without looking too stylistic. I also wanted to branch out from the usual sources and find some new fonts. Being able to self-host the files and if possible, use a variable font were also on my requirement list. Luckily, I found everything over at Fontshare. The main heading is set in New Title and the subheads are set in Clash Grotesk. The really narrow letterforms of New Title definitely had that retro feel I was looking for. I’m also still completely enamored with big chunky sans serif faces, so Clash Grotesk definitely caught my eye. All the rest of the text is set to a general system sans serif for speed and ease (or laziness while coding if you like).

For the colors, I’m still stuck on using the Flexoki palette as I love the warmer print-like tones. Once again, I didn’t really use the full palette, but that’s okay. I also didn’t go overboard and create multiple color themes. Just dark theme for this page, thank you very much. Now, the colors used in the patterns themselves are not from Flexoki and were eyeballed from the clothes themselves as part of the drawing process. It’s also worth noting that the color names used in the patterns are totally made up marketing copy. They’re not accurate in any way. I just wanted some fancy titles for them. Use the actual color values if you want to replicate them.

The page design is also the same basic template I’ve been using for these little projects: header, main, footer. Nothing crazy as it let’s me quickly get to the fun stuff.

The Patterns

The quickest way to get the patterns ready for the web was to export them out of Illustrator as SVG files. Add in a bit of compression and optimization and the SVGs were ready. I’m using the plural “patterns” here, but I should clarify. The whole project idea started when I found the first jacket pattern, but as I started working, I found I had previously drawn another textile pattern back in 2012. This was the shirt pattern. Turns out my love of patterns has taken many forms. Even though I had blogged about the shirt pattern, I had only provided it as an Illustrator swatch, so including in this new page seemed like an obvious next step. Creating SVGs for the web is pretty standard fare these days and while it’s one of my favorites, I did want to push things a bit further. Hence, some code exploration.

The Code

General page design is still based on a responsive CSS grid with three columns and a few column/row spans for the larger cards. Nothing fancy. The real challenges came when I started looking closer at the jacket pattern. It’s essentially a pixel pattern — which made me thing of a grid pattern — which made me think of CSS grid — which made me do something silly. I created the entire pattern as a CSS grid with each cell representing a pixel on the pattern. Of course, the pattern is 17 x 17 for a total of 289 squares.

(Why the original pattern was 17 x 17 is beyond me, but it made the math more painful than necessary. I actually typed up a cheat sheet with the numbers for easy reference.)

Yep, that’s right. I created a grid with 289 empty <div> elements. Genius, I know. I then set up background colors for the red and black squares with a massive list of :nth-child() statements. Being responsive, it does get squashed when the viewport is resized, so beyond the insanity and performance issues with all those DOM nodes, it’s not an ideal method. The SVG is still better.

Just because it’s possible, doesn’t mean it’s a good idea. But knowing that didn’t stop me from trying another crazy idea. I’ve been playing around with creating background images with multiple linear gradients. Knowing that we can create hard lines between colors with stops in the gradient, I set out to draw the 17 x 17 jacket pattern as a gradient. This method, like the massive <div> list, was an effort in persistence. Getting the pixels lined up was a complete pain, not to mention all the sizes for the 17 gradient rows, but I did learn a bit more about these complex background images. I even went a step further and created a version of the gradient using percentages instead of pixels. This certainly helped and brought closer to the CSS grid version in terms of flexibility, but also the same limitations. In the end, I didn’t even include an example of the gradient on the page although I did keep it in the CSS file for reference later.

Learning all those lessons, coupled with the more intricate pattern of the shirt, I didn’t even attempt either a grid or gradient solution for the second pattern. It might be possible, but after all that experimentation, I didn’t have the patience for more.

Overall, I’m happy with the lookbook design and chip cards. Getting these old projects some new life in a new format is always fun too. Head on over check it out and download the pattern files.

View project page

Twist

January 13, 2024

A large wheat pasted illustration of a ghost weaving through the ear and eyes of a man wearing a blue beanie

A really nice illustration. It may take a few extra seconds to figure out what’s going on though. The color is simple and bold. The killer part for me is the halftone shading. It’s amazing and gives all the depth the piece needs.

West Side, Manhattan.

Thanks

December 9, 2023

A large mural on the side of a pier reading "I want to thank you" in red sans serif lettering with white and red drop shadows to the left.

A bit of gratitude for this holiday season. Here’s a giant mural on the side of one of the piers on the Hudson river. Don’t let the photo fool you — each letter is about 30 feet tall. As with any mural, and large lettering in particular, it’s always a feat to get the lines straight. Given the double drop shadow and overlapping text, this example is very well executed indeed. I don’t know the origin story and the pier itself is a bit worn down, but it’s a sentiment worth sharing.

West Side, Manhattan.

Forbidden Fruit

November 5, 2023

An outdoor advertising billboard covered in panels of black fabric with a graffiti painting of a book, hand, snake and an apple in the bottom left corner.

Outdoor advertising has always had an issue with staying current. In this case, the billboard is covered in large panels of black fabric. An interesting choice as it seems to impart a “world in grieving” kind of moment as if we’ve lost one of America’s great ads. Of course, I’m glad to see some enterprising artist has taken advantage of all that great empty space. As to what the image is or represents, as it often the case, I have no idea. Quite possibly, it’s a representation of knowledge as the enemy of religion, but using religious symbolism. Maybe? Instead of the tree of knowledge, we’re given a book with an odd symbol on the front. The text on the spine isn’t quite legible. The book is sprouting the snake who is menacing the apple which in turn has some illegible text in the white circle. On a technical level, it doesn’t look to be sprayed on, but hand painted. Given the location, climbing up scaffolding or out a window with paint buckets is very impressive. Sometimes with art, you may not know what’s going on, but you can still appreciate (and interpret for yourself), the impression, the detail and the meaning it impacts on you personally.

West Side, Manhattan.

Bat

October 14, 2023

A winged skeleton looms over the words bat-ola in black and white all surrounded with a red border.

A somewhat obligatory Halloween post this time around which is really just a coincidence. I shoot what I find and sometimes it’s topical. But I digress. I have no idea what this piece is about, but it is quite large. It might be a tag, but it might not given the “MT” in the top left corner. It’s a bit rough, but that can be forgiven as it was probably rushed due to the location. The typography is great and the details in the skele-bat (?) are also well done. Happy Halloween!

West Side, Manhattan.