Using Canva to create compelling Shorthand transition effects

By Scott Moorhead

Using Canva to create compelling Shorthand transition effects

Canva makes creating transition effects really easy - and they are a great way to kick off a story or new chapter in a lengthy article. The effect gives your readers a cue that this is more than just an illustration. It's a point in the narrative to draw breath and get ready for a little context shift.

Here's a step-by-step guide to using Canva with Shorthand to produce effects like the one above, and more (no image-editing program required).

A simple filter

A simple filter = a great effect

The transition above, shifting an image from dark & blurry to bright & crisp helps its title stand out in context with the subject, then gets out of the way to let the full impact of the image show through. ...and it was easily created with just one photo and a filter effect in Canva. Here's how:

Step 1
From your Canva home page choose the "More..." option from the Create a design section and choose "YouTube Channel Art" as the template type (it's the right dimensions for our needs).

In Canva, start a new design using the "Youtube Channel" template

In Canva, start a new design using the "Youtube Channel" template

Step 2
For this effect, we are going to use Canva to process the images, and use Shorthand to manage the text. We don't need a Canva layout with text, so instead, choose "Elements" from the left-most menu and use the search function to find an appropriate image (or upload your own). I chose one from the "Free Photos" section.
When you click on one of the images, it's added to your layout in page 1.

Pick a photo to fill the template

Pick a photo to fill the template

Step 3
Grab one of the corner handles on the image and resize it to fill the page. More than likely, you'll need to drag the corners "outside" of the page boundaries so that the image fills the entire space.

Drag the corners of your image to fill the space

Drag the corners of your image to fill the space

Step 4
Now we need to make a copy of the page to modify.
Couldn't be easier: there's a little "copy" icon on the right of the page. One click, and we've got an exact copy.

Make a copy of the layout

Make a copy of the layout

Step 5
Here comes the fun part. Click the background image in the new copy of your page (being careful not to move the image) and choose "filter" from the pop-up menu.

Filter the copy of the image

Filter the copy of the image

Then, try out some filters to make this second copy different from the first. Canva has a bunch of preset filters in the top of the panel, and a range of fine adjustments in the "advanced options" of the panel. For my example, to ensure the title I'd add in Shorthand would stand out, I've reduced the image brightness and saturation and added some blur and vignette.

Step 6
Hit "Download" and grab the JPG version of your pages. Canva will give you a zip file of your two images.
Unzip it, go to your Shorthand story and create two successive "Text over Media" sections. Add one of your images to each of those new sections (and a title to one of them if you wish).

Insert them as Text Over Media sections in Shorthand

Insert them as Text Over Media sections in Shorthand

Done - the perfect transition effect.

Shifting focus

Taking it a step further

The tree / leaves transition above isn't much more complicated to create than the first example, but produces an effect similar to a shift in focus from foreground to background.

Canva has a great collection of images with built-in transparency that helped here - though you could use your own images or images sourced from elsewhere and uploaded to Canva for placement and filtering.

Once again, I chose the YouTube Channel template in Canva and filled the template with a single image of a red tree canopy ($1 from the Canva library).

A full-screen background image

A full-screen background image

I then picked searched for 'leaf' and found a matching red leaf with a transparent background (another $1).

I placed the single red leaf above the background and made a few copies of it, rotated and placed around the frame.
Once happy with the general composition, I made copies of the page.

Add a foreground element

Add a foreground element

In one, I used the Filter tool to darken, blur and reduce the saturation of the background, and in the other I kept the background bright but darkened and blurred the foreground leaves.

Make one copy of your page with the background blurred and darkened

Make one copy of your page with the background blurred and darkened

That's it.
Hit the "Download" button to retrieve your images and when you unzip the file, they are ready to upload to your Shorthand "Text over Media" sections as in our first example.

Transitioning text

In the first two examples, we added text over the top of our transitions via text fields in Shorthand. This has its advantages. The text will self-adjust to fit any screen it is displayed on, it is easy to go back and edit, and it will match whatever theme you are using in Shorthand. But the text doesn't stay in place as the screens transition, and in some instances, your design might call for more complex text styling.

Canva has a range of text layouts that you can drop onto an image - and their designers have already done the hard yards of matching pairs of fonts and adding other stylistic elements and flourishes.

A range of title styles to choose from

A range of title styles to choose from

In Canva, dropping in a text element is just like dropping in an image, but there's one extra thing to consider if you are going to move the design over to Shorthand - and that's "safe zones".

Because your final Shorthand story could be viewed on monitors and phones of various proportions and orientations, some parts of the edges of your background images might be cropped off. Because of this, you need to make sure that important parts of your image - and in this case, text - are within a safe zone that won't get cropped regardless of the screen it is viewed on.

Step 1
As in the examples above, in Canva, add an image to your template, then add a rectangle shape from the "Elements" menu. This rectangle is going to define the safe zone in the image.

Add a rectangle and make it semi-transparent

Add a rectangle and make it semi-transparent

Select the rectangle and use the drop-down arrow next to the colour-picker to change the rectangle's transparency. Make it quite transparent. It's only a guide and you'll delete it later, so there's no 'right' setting. You want to be able to see it, but not have it obscure too much of the background image.

Step 2
Drag the corner dots on the rectangle to change its dimensions to 1840 x 1040. You'll see the dimensions displayed next to the dot you are dragging. Don't worry if you can't scale it exactly to 1840 x 1040, but close is good.

Scale the rectangle to 1840 x 1040

Scale the rectangle to 1840 x 1040

Step 3
Centre it. Move that rectangle to the middle of the layout. Canva will handily show some dotted lines when you have it lined up. That's your "safe zone". Anything in this space will definitely show up on a landscape-orientation view of your Shorthand story.

Centre it.

Centre it.

Step 4
Add a Canva text element. Make sure it fits within your safe zone rectangle. Resize, colour and style the text to suit your story.

Add a text element

Add a text element

Step 5
As with the earlier examples: make a variation or two of your design - this time keeping the text element in place. Then go back and delete the safe zone rectangle from each of your designs (or move it "behind" your background image by selecting it and clicking 'Back', so you can easily retrieve it again if you later want to make edits).

Copy and change

Copy and change

Download your images with persistent (and crop-safe text).

Phones and 'Portrait' view

Because your final story could be seen in portrait / vertical mode on a phone, it's a good idea to make sure your images work well there too.

Shorthand offers the ability to upload different images for portrait screens.
It's up to you to decide if you need different portrait images at all (preview your story on a phone to check) and, if you do have alternate portrait images, if they should closely match the style of those you've used for the default 'landscape' mode, or if you'd like to use different images entirely.
If you do choose to make alternate portrait images in Canva, the most appropriate template is the 'eBook' one.

Its safe zone for text and important parts of your image is a centred rectangle that's 910 pixels wide and 1405 high.

Blurring, darkening, and desaturating are just three of many possible effects Canva presents for creating interesting Shorthand transitions. Matched with their content library, there's lots of creative potential.

We look forward to seeing what you come up with.