Hi, this is Gary with MacMost.com. Let me show you how to create a shortcut
to add a border and a caption to a photo.
MacMost is brought to you thanks to a great group of more than 1000 supporters. Go to
MacMost.com/patreon. There you can read more about the Patreon Campaign.
Join us and get exclusive content and course discounts.
So let me show you how to create a rather complex shortcut on your Mac that is going to do several
things. It's going to place a border around a photo and it is going to make that border
with rounded corners. Then, in addition to that, it's going to add a caption or some text
to the photo. Then create a new image from that. There are a lot of steps here and the goal isn't
necessarily to just use the shortcut as is. The idea here is to learn a lot of different
things about using shortcuts and then use those parts in shortcuts that you create yourself.
So let's create a new shortcut here. I'm just going to call this Border & Caption. Now let's
start off simply by bringing in an image and doing something easy with it. Masking it so
it has rounded corners. So what we're going to do is resize the image. Let's search for Resize
and there is Resize Image. I'm going to drop that in. Let's resize the image and
which image? Well we're going to click here and then select Shortcut Input. Then it is going to
receive any input from, and we're going to change any (we're going to clear that) to just Images.
Then we're going to resize it to 1280, a good size for uploading, by whatever the height would be if
the width is 1280. Then let's Mask it. So we look for Mask Image here, we'll use this one. Put it
at the bottom. Mask Resized Image. You can see the line here takes the output of this and puts
it right in there, with what?, Rounded Rectangle Shape. We can mask with different things. Let's
use Rounded Rectangle, Show More. Let's do a corner radius of 40 pixels. One last thing I
want to do here is, Under Receive Images, if there is no input we're going to change it to Ask For.
So we have a lot of options here. One is that you can run this shortcut on an existing file
that is an image. Or if you run it by itself and it's simply going to ask for an image.
I'll run it and you can see it's going to come up asking for something here.
Let's just select this image here. Now we can see the result. Notice how its got rounded corners now
and also you can't really tell here but its now 1280 wide. The original image is much larger.
Now what we would like to do is add a border around this image. The way to add a border is
a little counterintuitive. You don't actually put a border on top of the image. Instead you create
another image that is a little bit larger than this image. You have that be a solid color. Then
you put this image on top of that. So a little bit of that solid color image shows around the edges.
So in order to do that it gets a little tricky. The first thing we want to do is we want to use
an Image Editing App. I'm going to use Pixelmator Pro but you can use just about anything, Seashore,
PhotoShop, whatever you want, and create an image that is just one pixel. So here I'm going to
create something that's width 1, height 1, there's a tiny little image there. I'm going to zoom in
here. I'm going to draw there. I'm going to set a color to black, opacity at 100%. I'm going to
set the brush to Basic, Hard like that. Now when I draw, I draw a black pixel. Now I'm going to do
Export for Web where I have a lot more control. Format is going to be png, you can see 69 bytes,
and I'm going to Export. I'm going to call is Pixel.png. Now I've got this image here that's
just 1 pixel. I can do Command i on it and see it's only 69 bytes long. Really nice and short.
Now in order to include that inside the shortcut I need to convert it to a string of characters
using something called Base64 Encoding. To do that I can use a variety of different websites
that will convert images to Base64 Encoding but I can also do it in shortcuts. I can create a
temporary shortcut here and I'm not even going to name this one. Just going to search for Base64,
add that. Encode what? Encode the shortcut input. The input I'm going to say, ask for,
in that case not just photos but files, here. I'm going to run this. Select the pixel.png
and then it gives me the output. I'm going to use QuickLook here so I can easily Copy
that. Now back at my main shortcut here I'm going to search for Text, and I'm going to create a Text
Action. I'm going to put it up here at the top. Now I'm going to paste that in. So this is that
little string produced from that one pixel png. Converted it to Base64. These are the actual
bits in that file converted to a text string. I can now use that same Base64 encoding here to
Decode the text from this. The result will be that file.
So by taking this text. Then using this we now have that file inside,
imbedded into this shortcut. We can now use that to create another image. So, for instance,
if instead of resizing the shortcut input I were to go into here, clear that out and resize
the result of the Base64 decoding, make that 1280 by auto-height, which since it is the 1 pixel by 1
pixel square will be 1280 by 1280 and mask that with a 40 corner radius image. What I get now
is I get that! I've taken that 1 pixel expanded it to 1280 by 1280 and rounded the corners.
So what I want to do is do both of those things. I want to create an image from this one pixel that's
a little bit bigger than the image taken from the shortcut input. So let me Undo here to get back
to where we're actually doing this with the input here. I want to make one change here. Instead of
if there is no input ask for photos, I'm going to say ask for files. You can do either one but in
this case now when I select this it's going to ask for file. I can select this image here, which is
just an image file on my Desktop and it will then resize it to 1280 and put the rounded edges there.
Now all I need to do is take this 1 pixel image and make that an image that's slightly bigger
than this one and put it behind it. So to do that I'm going to get the Shortcut Input
and I'm going to find the width and the height. Now I'm going to search for Image
Details and there's get Details of Images. I'm going to put that underneath here so it
is going to feed the shortcut input into this. What I want to get? I want to get the width from
the shortcut input. Then I'm going to do a calculation on it. So I'll search
for Calculate and I will put that under there and say, width plus and let's add 20 pixels to it. So
the result of this is the width plus 20 pixels. Let's go and get image details again
and let's get the height from, and we will select Magic Variable and use
this file here. So get the height from the same file. Let's do the same calculation and add 20
to that. So the result of this is the width + 20 and the result of this is the height + 20.
Now let's move this here below this. So I'm going to move Text there below and Decode below. So it
will get these numbers first. Now it's going to create that one pixel image. Now let's resize it
here and let's resize the result of this to, and instead of 640 here I'm going to Control Click on
it, insert variable, select the variable, and the width should be the result of this calculation,
20 pixels greater than the width of the image. Let's do the same thing here. Insert variable,
select variable, and the 20 pixels greater than the height. Now we have a black image at the same
size plus 20 pixels as the original image. Now let's resize that again because remember we're
taking the original image and we're making it 1280 across. So we've got the width and height
kind of ratio correct but now let's resize to 1280 times auto-height. It's going to be the same size
as this image. So let's make this image, instead of 1280 across, 1260 across. So shrink it just a
little bit more to give it room for the border to show around the edges. In addition let's create a
variable. So I'll search for Variable and I'll set variable. I'm going to create a variable that's
going to contain that black box here. We'll call it NewPic and it's going to get the results here.
So now NewPic has a black image that is a little bit bigger than the resized actual image there.
Now we just need to combine them. We're going to take this image here, the actual photo,
and place it on top of NewPic. That's called Overlay. So we'll do Overlay image. I'm
going to double-click to add to the bottom here. So what we want to do is overlay the
result of this, the actual image itself, on top not of itself but instead
on the variable NewPic on that slightly larger black image. Now let's click on the Show More
here. Turn off Show Image Editor and instead we're going to position it at the center. Let's run this
and we can see the result here. You can see the picture has been rounded here and placed
on top of this all black image there. So we get this border. Let's round the border itself so we
don't get these corners there. So we will do that with a Mask here, mask image, and just before we
put it in the variable there, after the resize. This is after resizing it to 1280 will mask the
resized image with rounded rectangle. We can do a corner radius here. Now when we run it
we can see we get rounded for both the background that becomes the border
and the image itself. Now since they are different widths it definitely pays to work with
the rounding. So have a larger number for the border and a smaller number for the inside.
We can go here to Corner Radius and let's change that to something like 60 and now when we run it
we can see that maybe that went a little bit too much. So we have to keep playing with it.
Let's make it 50 here and that looks pretty good right there for a nice border.
Now, of course, you can change to width of the border pretty easily. I've got the background
black image set to 1280 and then the image itself set to 1260. If I wanted to make a thicker border
I could do something like, you know, 1220 here and now the photo itself
will be smaller here allowing for more of a border. You can adjust the corners too.
So next let's add a caption. Let's look for Ask and we'll ask for input here.
I have that here at the bottom. Ask for Text with Prompt Caption. We Show More and we set a default
answer if we want. Let's look for Overlay. Overlay Text is another option here. I'll double click on
that and what text do we overlay? I'm going to Control Click on that and Insert Variable
and then use Selected Variable. Make sure we get the right thing to provide input. On what image?
It's the output of this. But we haven't stored the output of that anywhere. So let's set a variable
there. We'll call this NewPic with Caption.
It's the output of this. So now we can Control Click on there and say, Put the
Caption on top of the output from this. Then we do At and we'll do bottom center.
Show More allows us to see all the different things we can do. We can set the Font size,
Alignment, let's Center it. We can set the color. Let's do something brighter. We can do an
outline there to make it stand out so a black border around it. Tons of different things that
you can set and play around with. You want to do that to get the look that you want. We can
even bottom center offset by, you know, 10% here so it is not all the way at the bottom.
Now let's run this and it's going to ask for an image like before.
It's going to ask for a caption. We'll use the default text there.
The result is like that. So probably something brighter or maybe we can
change this instead of having the border be black let's have the border be white. Now,
it looks a little bit better like that. So you can keep playing around with that.
So now you've got something here that you can QuickLook like that and you can Share right there
from QuickLook so it is already kind of useful. But let's Save it.
One way to Save it that's really easy. Let's go to the Settings here
and then let's set this up so that it is used as a Quick Action and it provides Output. So
the output is actually going to appear as a file. So now let's hide that and let's go here. We can
get ride of this pixel now. We're done with it. We have it inside of the shortcut at that Base64 text
and we can actually Copy and Paste that and use that in other shortcuts later on.
Let's take this, I'm going to Control Click on it. Go to Quick Actions. Customize the Quick Actions.
We'll see here the Border and Caption are there. So now we can go back into Quick Actions Border
and Caption and it's going to take this as the input here. So it is not going to prompt us for
it anymore because it has that already. But it is going to prompt us for this. Done. Then the result
is going to be Output because we had this provide output checked right there. It's actually going to
output. It's going to be an ugly name here because it doesn't know what else to name it so it's
actually choosing bytes at the beginning of this file as the name. So at this point you can just,
you know, return and name it whatever you want and you've got your finished image here.
But in the interest of learning more about using shortcuts let me show you how to create a file
from that automatically. So let's go and look for File Details. Get Details of Files and put that
here at the very beginning. So instead of getting File Size let's get the name. The name from the
Shortcut Input. We're going to search for Parent, Get Parent Directory. So we'll put that here
and Get Parent Directory of what? Let's clear that and instead say Shortcut Input. Get the
Parent Directory of Shortcut Input. So we have the name now. We've got Parent Directory. So now all
the way at the bottom here you could see that it Stop at Output Image With Text. That we got
automatically when we clicked provide output. Let's turn that Off. Instead let's go here and
let's make sure this is a good file format. Let's search for jpeg and use Convert Image and put
that at the bottom. Convert Image with Text, the result of this, to a jpeg. We can set the quality.
Now we have a jpeg there. Let's do Save. We'll do Save File. Add that at the bottom. Save
the converted image. Show More. Ask Where to Save. So, this could prompt us where to save
and give it a name. That's good. But what if we just said No, we don't want that.
Instead here under Subpath we can Control Click there and go in and say that we want to use
Select Variable. Go all the way to the top here and get the name.
So let's go back in there and we have Name. But I'm going to put
dash new after it. like that, -new. So it's going to Save it but with -new.
Then we're going to change where it saves. Instead of saving to the Shortcut's folder,
the default place, we'll Control Click on that and set Magic Variable and use
the Parent Directory there. So Save Converted Image to Parent Directory
with the same name but -new after it. Now let's give this a try. I'll Control Click on this.
Quick Actions. Border and Caption. It's going to ask the first time here if it is okay to
access the Desktop Folder since we're saving there. Then it is going to ask for the caption.
Then you could see it does everything and Saves it out with the same name -new after it.
Very nice. Notice here you get white corners here instead of the transparent ones because
jpeg images don't support transparency. So if you need transparency you may not want
to convert this to jpeg but instead convert it to png or just leave this out altogether. But
the white should work really well in social media sites and such where the background
is white anyway. So people won't even notice it. They just get these nice rounded corners
and image and whatever text you want. Now you can reuse this over and over again anytime you
want to create an image. Make this text smaller and closer to the bottom if you like and it could
be captions instead of large text like this. So you can easily and quickly take an image,
resize it, put this border around it and add some text to the bottom describing what's in
the photo and get this output here that you can then upload or email or do whatever you want with.
I hope you learned a lot of different skills here in making this shortcut. I'll put a copy
of the shortcut for you to download at the Post Page at MacMost.com so you can compare
it with what you are working on if you are not getting the same results. Thanks for watching.