Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Start a free Basic trial
to watch this video
In our final video, we will put all the pieces together in our artboards, and prepare the end result for export to our different media sources.
New Terms:
- PNG - Portable Network Graphic. A lossless raster image file type commonly used for illustrations and allows for transparency.
- Lossless - for images, a lossless file type retains all of the data within the image, typically resulting in larger file sizes.
- Lossy - lossy images use compression to reduce the file size by sacrificing image fidelity.
Further Reading:
JPG vs PNG, by Allison Boatman
-
0:00
At this point our ads are ready to go.
-
0:02
We set them to spec using artboards, we've modified our artwork to fit each one,
-
0:06
and they're looking cohesive.
-
0:08
Now, all that's left to do is export them into formats for their use in each ad.
-
0:13
In general, we could use the same file type for each one and
-
0:16
would work for all our applications.
-
0:19
Either a JPEG or a PNG file is appropriate.
-
0:22
We wouldn't use an SVG because our final graphics contain raster images.
-
0:28
So let's start out with the quick Export option, which is certainly the easiest.
-
0:33
From the File > Export menu, choose Quick Export as PNG.
-
0:39
We'll select our destination folder and select Open.
-
0:44
That's it.
-
0:45
PNGs are a great high quality file type appropriate for both web and devices.
-
0:51
They also include any transparency included in the document as well, so
-
0:55
things like rounded corners or graphics without a background.
-
0:59
Let's take a look at another option to export these into JPEG files.
-
1:03
JPEGs are also great for nearly all digital image uses, but
-
1:07
do not offer an option for transparency.
-
1:10
From the file Export menu, let's choose Artboards to Files.
-
1:17
This method gives us a few more options.
-
1:20
First, let's choose our export destination folder.
-
1:29
And click Open.
-
1:31
Next, we'll wanna give up a file prefix,
-
1:34
meaning our files will use this prefix followed by the artboard name.
-
1:44
We don't want any overlapping of our artboards,
-
1:47
so we'll choose Artboard Content Only.
-
1:49
We can export each artboard into a PSD file,
-
1:53
which will be handy if we wanted to keep these as a personal template.
-
1:57
But we'll choose the JPEG file type.
-
2:00
We'll also want to export all of our artboards, so
-
2:03
we'll deselect Export Selected Artboards.
-
2:08
If we select Export Options, we can adjust the quality,
-
2:11
12 being the highest, which is great for our use.
-
2:14
We can include our color profile if we've specifically chosen one.
-
2:18
For our purposes, we need to specify one as the default, or
-
2:23
sRGB, in our case, is sufficient.
-
2:26
Including the artboard name adds the name as text to the graphic itself.
-
2:31
Perhaps if we were showing these to our client,
-
2:33
to help them differentiate each one, that might be handy.
-
2:36
But in this case, we'll leave that unselected.
-
2:39
Click Run, and we're set.
-
2:44
We can navigate to the folder and have a look.
-
2:48
On my Mac, we can see our dimensions and file size.
-
2:54
Notice the larger file size the PNG is compared the JPEG even at the highest
-
2:59
quality setting.
-
3:01
If file size isn't an issue, then our PNGs will work just fine.
-
3:07
We've come a long way in our journey through digital media.
-
3:10
We started with demystifying resolution.
-
3:12
We took a look at different types of images and graphics, files and
-
3:17
color spaces.
-
3:18
We then took all those things and put them into an end product
-
3:22
as we created different ads for a client within Photoshop.
-
3:27
Thank you so much for completing this journey with me.
-
3:29
I hope you feel you have a solid foundation to explore even further.
-
3:33
Practice using adjustment layers and masks on your own photos for
-
3:37
color correction and explore the different Adjustment layer types.
-
3:42
If you're into UI design, use the various templates Photoshop offers to create
-
3:46
your own application interface with multiple artboards.
-
3:50
Finally, if you're interested in professional printing,
-
3:53
I highly recommend visiting your local print shop and
-
3:56
find out more about how your digital art translates to paper.
-
4:00
They'll also be able to tell you their preferred export settings from Photoshop.
You need to sign up for Treehouse in order to download course files.
Sign up