Windows 2000 Window Asset

Why did I recreate this asset?

I like the old design of Windows and wanted to use it to display my stream alerts (e.g. new follower, etc.) in my livestreams. I did not feel comfortable using a pre-made asset or a screenshot because I like to be able to say that I made all my stream assets myself.

How did I create this?

I used Adobe Photoshop to create and After Effects to animate this asset.

How did I edit it?

I used a color picker to get the relevant colors of a Windows 2000 window. Then I created a layer for each part of the image, as you can see below. The depth (Windows 2000 look) is achieved by using the effect "Bevel & Emboss" on the window frame, the background of the close button, and the inner backgrounds of the window. The title bar is a simple gradient with a color filter to make the title bar grayscale when the window loses focus.

Stream alerts are like pop-ups, which is why I chose to add the text, symbols, SFX (in the animation) and colors to make this one as obnoxious as possible. The animation switches between the red and gray backgrounds, and the title bar is flickering in color and then in grayscale, like a stereotypical malware pop-up would. This was to make sure I noticed the alerts in OBS whenever they popped up. It is, however, good to mention that these kinds of alerts are quite distracting in a stream, but considering that I don't get a lot of alerts, it's not much of an issue.

The finished animation is then added to an "overlay hoster" (e.g. StreamElements) that plays the animation. This overlay then adds text in the center of the pop-up that contains the type of alert (e.g. new follower) and the username of the person that triggered the alert.