Animation test: The Little Cloud Room

/

We’re thinking about doing some animation in our Patreon video, which is currently in the works. I decided to make something quick to figure out whether I can actually do animating, and how much work it would be. This took about an hour, and is five seconds long. So that’s not great. On the other hand, I was also learning the process during that time, so it might go better with the actual video.

watch The Little Cloud Room on YouTube

Notes on the creation of the banner and logo

/

I'm pretty proud of the banner and logo I've got at the top of the page right now. They might be a little busy, and we might replace them with something put together by a more experienced graphic designer in the future (even if that's just me, later, when I have more experience). But for a launch, I'm really happy with this.

I didn't document the whole process, but I do have a few separate phases I can show off.

This is the first completed design. It's what I planned on putting at the top of the page, before I discovered that Squarespace doesn't provide an option for removing the text in the banner. 

The font is OpenDyslexic, which I picked because I think the combination between accessibility and more organic-looking shapes in fonts designed for dyslexia makes for a very solarpunk combination. (That's actually one of the first few things I wrote about solarpunk, back in September, before I even had a separate solarpunk Tumblr.)

The stained glass look is because one of the first big aesthetic memes of the solarpunk community was stained glass windows made of transparent solar cells. The yellow bits in the middle are chopped up chunks of a photo of a stained glass window by Louis Comfort Tiffany, and the wood is a strip of a public domain photo of some untreated wood, adjusted in brightness and contrast till it looked stained and sliced up into four strips.

The other stained glass I made myself, in separate Photoshop files: render clouds, then liquify and squiggle, then messed with a bunch of  levels until I felt good about how it looked. With the green, I also adjusted the brightness and contrast a few times between cutting it up so there'd be more variety among adjacent chunks of glass.

I wanted to make the text a more consistent color, that really stood out, and I also couldn't figure out how to make it transparent but keep the stroke. So I made it light-ish blue -- the exact color I used for the blue accents in the web design here -- and added the water pattern overlay at like 30 percent opacity. (I could definitely open the file to give this info with more detail, but, y'know, that's like five clicks.)

Once I figured out that I wasn't going to be able to use it with the separate text like that, I went in to try and make it work as a background. I started getting ready to begin the laborious process of figuring out how the heck I was going to get the outlines off the text, when I remembered that the "fill" slider in blending options exists. So, I dropped that down to zero, and I had my letter frames. (I left the water pattern on to add a bit of consistency to the texture of the letters.)

After that, I got to cleaning up the insides of the letters. This took a very long time, because pretty much every single piece of yellow or green glass poked into one of the letter's shapes. I hadn't bothered to trim the pieces under the letters, because they were covered up. And since every piece of glass was a separate layer -- and since it's only occurring to me right now as I write this that I could have saved this as a new file, merged them all, and done it in one go -- getting that trimming done was a lot of work.

The color in the background of the letters just comes from two more copies of the very-back layer, which also provides the glass pattern for the blue and the yellow-rim. I trimmed them so they fit their correct sections, then adjusted the hue/saturation using colorize until they pretty much matched the glass they were connected to.  (I do realize the irony of using a font designed for extra-readability then trying as hard as I can to make it invisible against its background.)

With all that completed, the image still conflicted too heavily with the text overlaid on the website. So I changed all the black lines to 42 percent gray (because that's what color overlay happened to already be set to, for some reason) and added a glow effect I learned on Tumblr to soften and blur the image a little bit. And (as of writing) that's the one at the top of the page now!

To make other one at the top of the page, and also on our social media accounts, I went back to the first one. It was just a matter of resizing and changing the text, pulling one of the pieces of wood way over, cropping it to a 1x1 square, then doing again what I did with the glass the first time.