- [Karin] Hello iPad Letterers -
welcome back to my channel :)
In today's video, I want show you how you can create
these planner spreads for your digital bullet journal.
I've made these in Affinity Designer on the iPad.
So I'm going to walk you through my exact steps
so you can make them for yourself.
I'm using these with the Zinnia app,
but you can certainly also use them with GoodNotets,
Notability or any other digital bullet journaling app
you are using on the iPad.
All right, so let's start up Affinity Designer.
And let's create a new document.
So we're tapping on new document,
and then the first thing you want to do
is change this to pixels.
The canvas size of the pages in Zinnia
are 4,448 pixels wide,
and 3,336 pixels high,
but it doesn't mean that you necessarily have to use
this particular size
because we're creating a vector document,
you can easily resize them to any size that you need.
DPI doesn't really matter too much,
but let's set this to 300,
so it's ready for export when we need it.
And then the orientation is going to be landscape
and we are also wanting to create an artboard
and then we are tapping 'OK'.
So now we have our artboard here.
So let's do a quick sketch of what we want this spread
to look like.
So I like to split the page into two parts.
This part here is going to be for the weekdays
and then this part here is going to be for the weekend.
So we're gonna do five boxes
for each day of the week days - like this,
and then on the weekends,
I like to have a little bit more space.
So we're going to make
some slightly bigger boxes like that.
And then here, I also like having a list of tasks
that I can tick off and then maybe on this side here,
a little bit of a empty space
because sometimes I like to add some quotes
or anything else that pops into my head.
Sometimes I find it helpful to do this,
just to get it right in my own head.
So now let's hide the sketch
and let's get started with designing.
We are going to start with the rectangle tool, which is here.
If you don't see the rectangle tool here,
then hold down your Apple pencil to bring up the menu.
And you can see here you can select
from many different shapes,
the rectangle is the one at the top,
and if it's not selected, then you can select it
from here and then really all you have to do
is just draw this rectangle like this.
And you can see now it's got a gray background,
so we want to change it.
So open up the color swatches here,
and then there is two swatches, the
one on the left, this one is the one for the background.
So we want to make this transparent
and the easiest way to do that is just to swipe up,
but you could also select the transparent color
swatch down here.
And then the stroke is currently black,
but we want to make this grey,
so I'm just going to select
the grey color swatch from here.
And then we also want to set the width of our stroke
and in order to do that we are selecting
the strokes panel here.
It's already set to three pixels,
which is exactly what I want.
But if you wanted to make it thicker or thinner,
you can slide this around like this.
And if you find it really hard to get the size you want,
you can also tap on the number to bring up the menu here.
And then you can just type in any number you like.
And three is what we want.
And then tap okay.
And this is our box stamp.
So now we want to create some dividers here as well.
And in order to do that, let's select the pen tool.
And this is actually quite easy.
All you have to do is tap twice to create a line
and you can see the line is not straight
but this is easy to fix as well.
So select the move tool.
And then let's open up that transform panel,
which is the one here and then set the height to one pixel
and boom, we have a straight line.
How easy is that?
So now we can put this in place here
and then maybe make it a bit longer as well.
And then we are going to duplicate the line,
tap the Edit menu and hit duplicate
and then we can move this down and now we have two lines.
And as you see it's a little bit hard
to make these align perfectly
and I'm very particular about this.
I really want them to align perfectly in the box here.
So what I found the easiest way to do this
is to actually create two more lines
and then align them with the top and the bottom of the box.
And then we can distribute the lines vertically
to align properly.
Let's do that now.
So let's open their Edit menu, select Duplicate,
move it down, and then we're going to duplicate it again.
Now we can move this to the bottom
and then this one to the top.
And now we're selecting the four lines,
hold down one finger on the page,
and then select all the shapes that you want to select.
And then in the transform menu, select alignment options.
And then here in the align vertically box,
this button here will distribute the lines vertically.
So you tap this button and boom, they're all in place.
Perfect, so now I'm very happy because I know now
that these lines are exactly placed
the way I want them to be.
So now the top line here we don't need this anymore,
so we can delete it and then we can also delete
the bottom line because we won't need it.
So now we're going to create the vertical line as well.
And we're going back to the pen tool, again, two dots,
and select the move tool.
And then in the transform menu,
this time we are going to set the width to one pixel.
And there we have our line.
And now we can move this into place like this.
So now, let's adjust the thickness of these lines
a little bit as well.
These are still set to three pixels,
but I prefer them to be a little bit thinner
than the bounding box, so let's set them to two pixels.
And you can also do this by selecting both
and then you can change them both at the same time
as well like this.
Now, let's group these shapes together.
And the easiest way to do that is to create a bounding box
around all of them and then in the Edit menu,
select group and now we have the group
that we can move around like this.
So now what we want to do is duplicate this shape four times.
So we're going to go to the Edit menu, hit duplicate,
and then we can move it down.
If you hold your finger down,
you can see that it constraints how you move that shape.
So I think this looks good.
Now you'll see if we duplicate this again,
it remembers how far we moved our shape down.
So this is pretty cool.
So it automatically aligns it already for us.
Now we're gonna do this twice more,
but it's a little bit too far down
so we can adjust this, no problem.
So I'm just going to move this up to where we want it.
And then we're going to select all the shapes,
we're going to go back to our transform tool,
to alignment options, and then we can distribute them
vertically again by selecting this button
and now they are all aligned nicely.
So now let's create the boxes for the weekend
on this side as well.
They are going to be a little bit bigger than the weekday
because I have more time on the weekend,
so like to be able to add a few more tasks.
So what we're gonna do now is select those and duplicate it
and then we can move it on to this side here.
So now we are going to ungroup this
because I want to increase the size of the box
and then add some more lines.
And the process for this is exactly the same,
ungroup the elements, make the box bigger,
duplicate and align the divider lines
and then group all elements together again
and duplicate the whole group.
So now the next thing we wanna do is add some labels
to the boxes as well.
So you select that text tool, which is the one here
and then tap anywhere on the screen.
And then we are going to write the words,
I like having them uppercase.
I'm turning on Caps lock to write Monday.
So this is very small, you can't see but let me show you
what this looks like.
One of the things you want to remember
is to go back to the move tool,
to resize this, I'm going make it a bit bigger
than it needs to be just so you can see it.
So now we wanna change the font here as well.
If you double tap it, it'll select the text tool again
and now we can change the font here
and the font I'm going to choose is called Open Sans.
And if you're curious to find out how to install fonts
on your iPad, I actually have another video
and highly recommend you watch that
because I'll show you exactly how to get fonts
onto your iPad so you can use them in all apps,
which is super useful.
And then the font weight, is going to be semi-bold.
And then another thing I want to show you
is how to space out these letters ever so slightly.
I just think it makes it look a little bit nicer.
So I'm going to the text tool here,
and then in the positioning menu,
you can adjust the tracking of your letters
and ever so slightly, doesn't have to be too much,
so you can just pull this and you can see now
how the letters adjust.
And I think about 60% looks pretty good.
So we're going to leave it like this.
And then we also want to change the color.
So we're going to go back to the color wheel
and then we're going to make this gray as well.
So now we can put it in place.
And we're going to select the Move tool
and move it in place, make it a bit smaller,
and then bear in mind
that we have longer words as well.
So you don't wanna make this too big.
Otherwise, Wednesday is not going to fit,
but this looks pretty good.
So now we're going to add the days to all our boxes as well.
So we are going to select it, and then duplicate
and then move it down.
And then we're going to do that three more times.
And this looks pretty good too now.
Another thing we're gonna do is align them properly.
And then we are going to double tap each label to rename it
and also add labels for the weekend days.
And then we're also going to create a little area down here,
where we can log tasks for the week.
So we're going to create two lines for our headers again,
using the pen tool, same as before,
we're going to make this straight
by using the transform tool and then setting the height
to one pixel like this.
And now we can drag this and make it match the side
of our box here and then also drag it up
to make it aligned with the top of our Thursday box.
I don't want this to go all the way to the end
because I wanna leave a little bit of space here
for some quotes.
So now we're going to duplicate this and move it down
ever so slightly, and then we're going to make one more line
for that bottom of our task list
and then we are also going to create some dotted lines
here in the middle and we're going to duplicate this line
and drag it down ever so slightly,
and this line is going to be dotted.
So we're going to select the strokes tool.
And as you can see here how it's got this dotted line
menu selection here.
And this is where we can enter the dash pattern.
So for the dash, we want to select eight pixels.
And then for the gap, we want to select 12 pixels.
And now let's see what this looks like.
So this is pretty cool.
And of course, you can select any dash pattern
that you would like to use for this.
Now we are going to duplicate our dotted lines
and nicely distribute them vertically.
And then we are also going to create a vertical divider line
so that the left side of the line can be used
to tick off the tasks when they are done.
And then we're gonna add a label here as well.
So we're just gonna create the Sunday label,
duplicate it and then move this down here
and call this tasks.
And this is really how easy it is to make these templates.
So now the last thing we need to do is export them
so that you can use them in other apps.
In order to prepare this for export,
we need to set their background to transparent.
So we're going to go to our file menu
and then in Canvas, select transparent Canvas like this
and then tap the File menu again and then export.
So now this is going to bring up the export dialog.
Make sure that PNG is selected and then here you can set
the dimensions of your exported PNG file.
But because we've already done this
when we set up the canvas, this is already correct.
And then all you have to do here is tap share
and then save image.
And now let's see what this looks like in Zinnia.
And so now we can bring this into Zinnia
and then we can resize it and make it fit on the page.
And you can see now because it's a transparent background,
we can still see all the graphical elements
we already have on the page.
And so this works really nicely.
And it works the same way in GoodNotes, Notability
or any other journaling app that you like using as well.
I really hope this little tutorial was helpful.
Give me a thumbs up if you liked it,
subscribe to my channel if you haven't already.
And don't forget to hit that bell icon
to be notified every time I upload a new video.
Thank you so much for watching,
and I'll see you in my next video.