Animated Lottie Logo on Squarespace

I’ve done some updates at this site and created a new logoanimation.

But it took some time to find the right solution, so here’s a short guide on how to set it up.

Add the logoanimation

First we need to add the JSON-file to the site. This is just a placeholder so we have it visible some where. A perfect spot is in the footer, since that is rendered on every page.

So Edit the footer at the bottom of the site and add a </>Code block.

In my case I added this:

<dotlottie-player src="https://lottie.host/f1d113e1-399e-4a5c-a0af-1158553f0418/qXgNIAYkgD.json" background="transparent" speed="1" style="width: 300px; height: 300px;" loop autoplay></dotlottie-player>

And if you want it to link back to your index page (first page), add this before and after the lottie.

<a href="/"></a>

Like this:

<a href="/"><dotlottie-player src="https://lottie.host/f1d113e1-399e-4a5c-a0af-1158553f0418/qXgNIAYkgD.json" background="transparent" speed="1" style="width: 300px; height: 300px;" loop autoplay></dotlottie-player></a>

Add the engine

Next we'll find Website Tools. Go into Website, Pages and scroll down and find Website Tools.

Here you are going to add the Java Script driver so the site understands how a JSON-file from Lottie should be played.

Scroll down to the Footer and add this script code.

<script src="https://unpkg.com/@dotlottie/player-component@latest/dist/dotlottie-player.mjs" type="module"></script>

So this is adding the engine to your site. Every Lottie JSON file will now be played like it was a native solution.

Move it to the header

Then we need to change the position of the </>Code block to the menu.

In the code below, the div#... is the code-block div number and unique name for that div block. This will have a totally different name on your site and will change if you for instance add a new code-block. Use Inspector/Inspect in your browser of choice to pick that name.

The div#... will then switched placement with the .site-title. The Class name, the .site-title, can be different on your site, so change it accordingly. So the code is:

<script>

  $(document).ready(function() { 

		$('div#block-yui_3_17_2_1_1705391194356_4861').appendTo('.site-title');

	});

</script>

Hide the old logo

Then we need to hide the old logo. If you use text only as a logo use .site-title or something similar. If it's an image use .site-title img, and display none will hide the old logo.

<style>

  .site-title img{

    display: none;

}

</style>

That’s it. Hope it works for you too, and comment here if there’s any questions.

IKEA hack - Björksnes - remove unwanted noise

Yes, this is an unusual subject for my site, but it’s my platform so here we go. 

I have a Björksnes bed that started to make squeaky noises. I’ve tried to tighten every knot but in short time the noise came back.  

But finally, I found the noise, and an easy fix. 

When you build the bed, you have a metal bar that goes across. This has two thinner bars that goes across in the other direction. Hand where these meets, there’s the problem. Metal against metal isn’t a god combo. 

By adding some electrical tape around the metal bar heads fixed this pretty quickly, on every connecting part.

Now I don’t need to hear the squeaky sound every time I move.

Have a good sleep!

Making my site come alive with GifGun

I’ve updated my site with small GIF animations.

Yes good old GIFs, the easiest way to create a moving images, when it’s not clean graphics. I’ve done a lot of web-animation that are SVG based and way more flexible and economic in “physical” size, but sometimes it’s only GIF that delivers.

And in this case I wanted to show some logos in context.

So how to make simple and quick GIF without pulling all your hears out?

A GIF are usually horrible to work with, in Photoshop, but with the simple plug-in for After Effects called GifGun it’s possible to fine tune and create a GIF that looks good and don’t end up as a 60 MB behemoth.

All the examples are from 500 KB to 2 MB.

A last trick is to only have a small part of the image that moves, so the freezed parts are only rendered ones.

So say hello to some simple and great updates to web-animation page :)

So many threads! New year, new computer!

New year, new computer!

After the release of AMD Ryzen Threadripper computer processors the following years, that look really promising on both price and power, I jumped on the wagon and upgraded my system.

My criteria: I wanted it to be as up to date as possible (many programs ended their Windows 7 support). Have the best graphic card that worked great with Arnold renderer GPU version (CUDA cores). Storage that reading and wright really really fast. And a case that can run as silent as possible.

Specs:

AMD Ryzen ThreadRipper 3970X - 3.7 GHz - 32-cores - 64 threads (CPU)
Noctua NH-U14S TR4-SP3 CPU cooler
be quiet! Silent Base 601 - Black - Cabinet (no glass, no RGB “fanciness”, just a black box)
Microsoft Windows 10 Pro 64bit
GIGABYTE TRX40 AORUS PRO WIFI - AMD TRX4
Kingston A2000 1TB NVMe M.2 SSD
HyperX Fury DDR4 2666MHz 64GB
ZOTAC GeForce RTX 2080 Ti
Noctua NF-A15 PWM - 140 mm - 19 dBA (cool the CPU)
Noctua NF-A14 PWM - 140 mm - 19 dBA (Cabinet fan)
Cooler Master V Series V1000 1000watt

So if you know any of these parts a question would be; why do I cool the system with fans and not a water cooler? I hate noise and after a lot of research I found that there’s a lot of good low noise fans that work as good as a water cooler. And with fans I would not hear the gurgling noise form the water pump.

If there’s anything that could be better is the be quiet! cased. It came with some noisy fans. And with some tinkering in bios, an picking up two Noctua fan, I could cool my system from 95 °C to 85°C at full load over time, with out bugging me and the rest of the office at all. But I think I would like it around 70 °C on full load and need to pick up some more fans and get rid of the be quiet! ones.

The system is blazing fast and stable, a must for me, I don’t want the computer to hold me back in any way when working on a project. And I can’t do any over clocking, since I want it stable for work and not only showing off :P

Cinebench r20 score: 17257 pts!. Many test online has a Cinebench around 16988 pts.

I’m now hoping I’m done with online render farms. The computer is about ten times faster then my 2018 MacBook pro, making it easier to get the rendered images I want.

Some images from the computer build.

View fullsize

View fullsize

View fullsize

View fullsize

View fullsize

View fullsize

View fullsize

View fullsize

View fullsize

New Photos on Unsplash

I've uploaded a lot of new images to my Unsplash. You can download and use these images for free if you want, and use it for both commercial or personal work. So why do I upload these images to Unsplash, and all up for grabs? The reason is that I use this service a lot, and it's how I pay back to this fantastic service and community. I've earned a lot of money by using all the free images I need to communicate to my clients the way I want and need.

So take a look at my images and grab what you want ;)

Know, like and trust, how to get more clients

Read this text by the Futur:

https://www.thefutur.com/10-things-you-should-do-now-to-get-more-clients/

If I look back at my clients. Most of them I would be able to track back to single events or persons. I can draw a node tree, that would be intricate, but with more or less no broken link.

It's all about contacts and who you know. But these contacts need to like you, and you need to be trusted to get the work.

In the 10 things sum up, there's a lot of great tips. Not just for designers, but for anyone that want an interesting work life.

So keep on gaining knowledge from different sources, and remember there's no quick fix.

And If there's anything on the list I can help with don't hesitate to contact me! :)

Photo by Andy Beales on Unsplash

Why you should stop using Chrome!

Over a couple of weeks I have tried to fix an image problem. All the images I uploaded to a site looked really blurry on Chrome. Of course this post can be out of date any day, but February 2018 this is relevant :)

Chromes doesn't handle image scaling very well. These days with responsive design, we design sites with percentages, will sites and images be shown in many different sizes. It's crucial that everything looks good on any platform.

View fullsize

View fullsize

Firefox 58 and Internet Explorer 11 (haven't tried on Edge or Opera), look like expected, small size thumbnail images is crispy clear.

But Chromes result looks out of focus and horrible. Yes, this can be seen as nitpicking, but as shown in the picture above you can see the difference clearly.

And weirdly enough theres is an easy fix, and why this isn't standard on Chrome beats me.

To gain a better result, add this code to you CSS:

image-rendering: -webkit-optimize-contrast

View fullsize

View fullsize

Since most sites don't have this image-rendering CSS added to their site, you are guaranteed that the web looks worse on Chrome. Use Firefox! :) Images in Firefox are even sharper than the image-rendering enhancement.

View fullsize

Here I flip between Firefox, IE 11, Chrome and Firefox

View fullsize

Here I flip between Chrome and Firefox

PS: I have nothing to do with firefox, I only want you to have the best web-experience possible :)

Color - Animated shorts sizzling with knowledge

I came across this series with highly effective animated shorts about color. Every transition is a joy to see and the content magnificent.

And read about the subject over at CNN

Take a look at learn a lot!

Colorscope is a series on CNN that explores our perception of color and its use across cultures, one shade at a time. Inspired by our love for The Purple One we chose the last color on the spectrum, a marriage of opposites, a mixture between the hottest color and the coldest. http://www.cnn.com/2017/08/04/health/colorscope-purple/index.html For full credits visit buck.tv

We love CNN's Colorscope series, and were very excited to be asked to contribute. Here is everything you ever wanted to know about pink, but were afraid to ask. See the other colours here: www.cnn.com/colorscope ----- CREDITS Client: CNN Creative Producer: Sarah-Grace Mankarious Directed by Giant Ant Creative Direction: Jay Grandin Producer: Liam Hogan Storyboard: Conor Whelan, Jay Grandin, Marion Bordeyne, Eric Pautz Art Direction: Eric Pautz Illustration & Visual Development: Eric Pautz, Marion Bordeyne, Conor Whelan, Shawn Hight, Sitji Chou, Whitney Lam Animation Direction: Conor Whelan Animation: Conor Whelan, Shawn Hight, Chris Anderson, Henrique Barone, Matt James, Taylor Peters, Whitney Lam Compositing: Conor Whelan, Eric Pautz Sound Design: Bryan Stone

Short history of the colour black made for CNN as part of their Colorscope series. Direction, Design and Animation by Matt Abbiss Produced by Sarah-Grace Mankarious Animation by Marta Reis Andrade Sound Design by Bryan Stone Music by Giacomo Smith 2017

YELLOW is part of the Colorscope series by CNN. "They call it mellow yellow". The short documentaries about different colours shows us on this episode how the colour yellow makes us happy, is on the most visibles hues and it's relation with science and religion. Created by Sebastián Baptista Producer: Sarah-Grace Mankarious Writer and Narrator: Dr. James Fox Music: Giacomo Smith Sound Design: Bryan Stone Special thanks to: Andy, Pini & Javi

The Dark Truth Behind White Working with CNN I directed and animated an episode of Colorscope, a series exploring the secret truths behind colour. Client - CNN Production - Sarah-Grace Mankarious Direction / Animation - Jocie Juritz Writing / Narration - Dr James Fox http://edition.cnn.com/specials/arts/colorscope-series http://www.jociejuritz.co.uk/CNN-white

"Green, the mixture of blue and yellow, can be seen everywhere and in countless shades. In fact, the human eye sees green better than any color in the spectrum. But why is that?" I teamed up (once again) with the amazing Rafael Mayani for this short piece commissioned by CNN International to explain the so-familiar colour, green. Producer: Sarah-Grace Mankarious Written and Narrated by Dr. James Fox Animation: Jorge R. Canedo E. Design: Rafael Mayani Music: Giacomo Smith Sound Design: Bryan Stone

"Blue is the world's favourite colour" We worked with CNN and Dr. James Fox to produce a film for their Colour Scope series. See the website here: http://edition.cnn.com/interactive/2016/12/specials/colorscope-blue/ Produced by Sarah-Grace Mankarious & Moth Direction & Design by Moth Animation by Moth, Joe Bichard, Jennifer Zheng, Aaron Lampert, Carlos De Faria, Stephen McNally, Ester Rossi Sound Design by David Kamp Music by Giacomo Smith Client - CNN Production Year - 2016

The 8th episode of CNN Colorscope explores the allure of Gold; worshiped by pharoahs, Aztecs and millennials alike. See the series on cnn.com/colorscope Producer: Sarah-Grace Mankarious Writer and Narrator: Dr. James Fox Director and Animator: Tim Booth Music: Giacomo Smith Sound Design: Bryan Stone

Colorscope is an award-winning series exploring our perception of color and its use across cultures one shade at a time. Orange is the colour of sunsets, budget airlines, traffic cones and protestants, but it can also be toxic…! http://edition.cnn.com/2017/12/06/health/colorscope-orange/index.html Credits Writer and Narrator: Dr. James Fox Producer: Sarah-Grace Mankarious Production Company: Nexus Studios Director: Emmanuelle Walker Producer: Greet Kallikorm Production Assistant: Islay Leefe-Griffiths Executive Producer: Chris O’Reilly, Charlotte Bavasso Production Company: Nexus Studios Studio Lead: Elliott Kajdan Art Direction: Emmanuelle Walker Animators: Claudio Salas, Emanuele Romano, Pierre Rutz, Emmanuelle Walker Motion Graphics: Elliott Kajdan, Abel Kohen, Emmanuelle Walker Sound Design: John Black Music: Giacomo Smith

I worked with CNN on their second film for the Colour Scope series. The bar was set super high after the amazing job Moth Studio made on the first piece. Direction and Design by Abel Reverter Produced by Sarah-Grace Mankarious Animation by Abel Reverter Music by Giacomo Smith Sounds Design by Bryan Stone VO by Dr. James Fox Special thanks to the amazing Katie Menzies, Fabian Friedrich, David Elósegui and everyone that helped giving advice during the process at Pamplona 89. All the episodes at cnn.com/colorscope Client - CNN 2017

https://vimeo.com/channels/colorscope