I’ve been drawing big dollar signs lately and I’ve found a little alignment trick that I feel makes a list of currency values look better. Path-to-completion is always on my mind when building a web form and when I was tasked to design a list of payment plans, something wasn’t sitting right with the dollar signs I placed on the page. I threw in a little negative margin-left to the dollar amount, bringing the dollar sign’s vertical stroke inline with the gutter and the result is clean and crisp.  
 
 

Diamond ellipses are one of my favorite shapes. It’s a strong take on a square that’s a throwback to the shape of tube TV’s.

I recently tried using a SVG clip path to turn a Google Maps image into a diamond ellipse. It worked for the latest browsers, but fell apart on IE11. For the sake of progressive enhancement, I was OK with the map going square on IE11.

However, this SVG clip path lived on a bootstrap page that contained a checkbox button group and adding the SVG code made the button group disappear! With no time to debug the thousands of lines of bootstrap.css and .js, I sought another solution. What I came up with allowed me to bypass a large edit of the styles and opened up IE11 to the diamond ellipse. Score!

I used a fun CSS border-radius trick to draw the horizontal sides of the ellipse, then I stacked another div of the same image on top of the first with its vertical sides defined for the ellipse.

The CSS property border-radius can bend a div’s side by throwing a slash into the specified radiuses, like so:

.map-A {
  border-radius: 80px/30px; /* horizontal radius/vertical radius */
}

The whole thing comes together like so:

See the Pen CSS diamond ellipse by Brent Enarson (@benarson) on CodePen.

I did something fun, quick, and (fairly) light today. The request was for some ink stamps that are going to go over images of bills on a webpage. Typically, I’d mock up some stamps, reduce the alpha, and save to PNG. But since there were so many stamps (5 at this time, more to come), I wrote them up in CSS. This first version was very lightweight. I used a font that was already on the site, then used all sorts of CSS to produce stamp ink. I took advantage of opacity, transform: rotate, and filter: blur. Then the request came back for a grungy font. That’s easy to do with Adobe Typekit. What isn’t entirely easy to do is carry that grunge on through to the div’s border. I accomplished this by spinning up a single grungy PNG that utilized the border-image property. Yes, I dipped into images, but it’s one image for any combination of stamps, vs multiple custom images. Check out the source of the links for all of the markup.

One of my PEMCO teams needed an error screen. Being an insurance company, I put together this tumbling car for a 404 error. Making the gif was quick, but it involved many tools to pull off. I first drew the assets in Illustrator (hillside and car), moved them to a canvas in Photoshop to figure out the math of the animation (the X and Y of the hillside), then I made a comp in After Effects. After getting a MOV file I liked, I finally moved that back to Photoshop to optimize a gif (it’s still a little large at 500kb). It turned out pretty cool! If making GIFs in After Effects, don’t forget to turn on motion blur; it makes everything look better and allows you to cut more frames out of your final GIF. Check it out in action:

Claim Portal 404

When using artboards in Photoshop, your canvas appears white. On a regular PSD, this would be a blank white layer, but on artboards it is a blank transparent slate. Nothing is inside the artboard group. When sharing your PSD via Adobe Extract, you get a big, empty, hard to see canvas.

There are times when displaying the transparent alpha in your comp makes sense, but I find that most of the time, sharing artboards with blocks of transparency looks poor and is hard to work with. 

My best practice: place a shape layer as a background. It doesn’t have to be precise, it just needs to cover the entire artboard. Remembering this simple step produces clean comps for your developers to Extract!

InVision app’s layer sync for Photoshop PSD’s has been around for awhile and was my go-to for isolating layer groups when moving comps from Photoshop to InVision. I’m all in on PS artboards and my workflow has adapted since the introduction of artboards. Using “+” in front of layers and groups is no longer necessary, since every artboard is automatically added. I do make use of “-“, though. I often set up a page template artboard that I’ll never want to display in InVision. Simply add a minus to the front of an artboard, and InVision will omit the artboard from your prototype.



More on Photoshop layer syncing from InVision.