How To Make a Custom Mac OS Screensaver

August 18, 2019

The built-in screensaver options provided by OSX provide ample opportunity to show of your photographic collection of… those almost-great tourist shots on your last vacation. For the past few years, I have opted to just put my business name on the text-only option. Wanting to add more information such as the Le Create logo and my personal contact information, I opted to create my own custom screensaver.

The final product


For this tutorial, I used Sketch, but other photo editors or vector graphics tools will work.

  1. Create an artboard or a canvas that is HD size. My laptop is often hooked up to a 4K monitor, so I opted for the lowest common denominator.
  2. Create an overlay that is the full size of the canvas. Add a fill for the background. I used #000000 (black) so it would blend in with OSX’s default screensaver background . If your canvas size exactly matches the screen resolution, feel free to try alternatives that match your style.
  3. (Optional). To increase the contrast and blend in the black borders with the image, add a gradient fill. Here is an example within Sketch. See the next section for specifics.

The final rendered background

  1. Add new layers for any images and text. For the example provided, the logo and title are on their own layers.
  2. if you want to create a dynamic screensaver, export the blank (without images and text) canvas in addition to the final image wih all embellishments.

Gradient Fill

Below, we see a specific example using the Sketch tool pallette.