Categories
motion

Illustrator to After Effects workflow: Giving your vectors some life

In this two-part tutorial, we will build a logo reveal sequence. The ability to import vectors directly into After Effects is perfect for when we need to work with graphic elements like logos, text, and illustrations. Similarly to Photoshop, we can prepare our Illustrator files and layer to import as compositions ready for animation. In […]

Categories
web

Designing an email newsletter in Photoshop

In the screencast below, I put together a mock-up or high fidelity design for a small business email newsletter (eDm). This is a snippet of a larger design process that includes research, wireframing, design and development. We will look at that process in more detail in subsequent posts. Right now though, for this email newsletter […]

Categories
web

Creating and exporting assets to use in web and screen projects

What kind of images should we make for screens? There are a lot of different image file formats, not all of them are appropriate for use on the internet or screen based media. This video gives a breakdown of web/screen file formats, plus other useful information and guidelines for producing artwork for the internet. How […]

Categories
motion

Photoshop to After Effects workflow: using keyframes to animate your artwork

This article steps through the process of preparing your photoshop artwork for After Effects. It will also help you get familiar with the concept of keyframing. Keyframing is a process common across most time-based production tools, including After Effects. It’s really important that we get a good understanding of the keyframing process. You should spend as […]

Categories
web

The importance of including the Viewport meta tag in you HTML pages

The viewport is your user’s view of your web design. Your user’s viewport will be different depending on what kind of device they are using. It might be a small Android smartphone or an iPhone 12 pro. They might be using Firefox on a desktop computer. As responsive web designers, we design for all of […]

Categories
web

Implementing a shop with Ecwid

Ecwid is an extensive and powerful e-commerce service. Itis easy to implement and it’s free to start off.  Here is a short video from the Ecwid youtube channel on setting up a shop. How to Create an Online Store in 5 Minutes! Ecwid Tutorial » You can add custom CSS to your Ecwid shop to change fonts, […]

Categories
web

Implementing a Formspree contact form

Formspree is a form backend, API and email service for HTML forms. It is the simplest way to embed custom contact us forms, order forms, or email capture forms on your static site.  Note: Formspree offers paid plans. Make sure you don’t accidentally get charged.

Categories
web

Making buttons and navigational elements with :hover

The :hover selector is used to select elements when you mouse over them. The :hover selector can be used on all elements, not only on links. Use the :link selector to style links to unvisited pages, the :visited selector to style links to visited pages, and the :active selector to style the active link. Make […]

Categories
motion

Making animated backgrounds in After Effects

There are endless permutations to the backgrounds you can make in After Effects. These are a few that I’ve used in past projects. Cell Pattern and Hue/Saturation Fractal Noise and Tint Checkerboard and Noise Gradient Ramp and Motion Tile Particle World

Categories
web

Coding your website: first steps

Here is a video about getting started. I often find that I’ll have multiple attempts at getting started. I’ll often recode a project multiple times. I’ll discover a different approach, a more streamlined way to achieve something. I’ll begin again. We learn important stuff by getting started. So, there is no harm in getting started […]