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!