Categories
web

Design and code a simple website – from go to whoa – Part 2

In part 1 of this article, we discussed the planning stages of a web design project. In this part, we will jump in and implement that planning with code. Let’s start writing some HTML. Open up a CodePen and follow along with the screencasts below. Good luck. Getting the main structure in place In this […]

Categories
motion

Compositing green screen footage with Keylight in After Effects

Colour keying is a technique that creates transparency from footage with subjects shot in front of a prepared green backdrop. Colour keying is a common compositing and special effects technique and is relatively easy to achieve with the right planning and footage capture. In After Effects there are a number of plugins we can use […]

Categories
web

Wireframe to mockup

In this video, I’m adding the bells and whistles to my wireframe to transform it into a design that will inform my HTML and CSS.

Categories
web

Different approaches to responsive images

Responsive images will automatically adjust to fit the size of the screen. This is important when we are designing websites or apps that adapt to the device or screen they are displayed on.  These videos walk through some common approaches. While you are watching these videos, you should have a Codepen open so you can […]

Categories
motion

The magic of motion tracking in AE

Motion tracking allows us to analyse the movement in footage and assign position, rotation, and scale keyframes to other assets based on that data. With motion tracking, we can follow a moving object in a shot, stabilise camera movement, or work within camera movement. Motion tracking is often used to composite visuals into moving images, […]

Categories
web

Design and code a simple website – from go to whoa – Part 1

In this article, we are looking at the first steps to code a website with HTML and CSS. Hopefully, we can dispel some of the anxiety around getting started. As you will see, it isn’t that hard if you think through what you want to achieve.  Plan the layout The best advice I can give about […]

Categories
web

Creating wireframe designs with Adobe XD

A wireframe is your blueprint design. It ensures that all design and usability problems are addressed before you go ahead and spend time on the high fidelity design work. In this three part video series, we will step through the process of building a mobile website wireframe in Adobe XD.

Categories
web

How to use media queries to make responsive CSS designs

Media queries are useful when you want to modify your site or app depending on a device’s general type — such as print vs. screen — or specific characteristics and parameters — such as screen resolution or browser viewport width. We write a media query like this: Media queries are crucial in creating responsive web […]

Categories
motion

Exploring some After Effects drawing and painting tools

You wouldn’t expect that After Effects would have drawing and painting tools, but there are actually a few very powerful options. Let’s have a look at a couple. Motion Sketch panel The Motion Sketch panel allows us to record a motion path that is drawn on the stage in realtime. In this video, we use […]

Categories
web

Writing HTML and CSS in a text editor

In the demonstration below, we look at setting up a local HTML/CSS authoring environment. CodePen is excellent for experimenting, testing, and sharing work, but at times we will need to develop our files on our own local hard drives. File management is important when working locally. You’ll need to make sure you are clear about […]