Skip to main content
Matt Fons/3 min read

Exporting Your Banner: A Step-by-Step Guide

Banner Export Workflow

1

Set Up Artboards

One artboard per banner size — Properties panel to manage.

2

File → Export → Export As

Choose JPG or PNG. Check 'Use Artboards' to export each separately.

3

Quality Settings

Web: 72 ppi PNG-24 for transparency, JPG quality 8-10 for photos.

4

File Naming

Each artboard gets its name appended — name them descriptively first.

Master Illustrator at Noble Desktop

Noble Desktop's Illustrator Bootcamp teaches the Pen tool, vector drawing, and pro illustration.

This lesson is a preview from our Photoshop Certification Course Online (includes software & exam). Enroll in this course for detailed lessons, live instructor support, and project-based training.

This tutorial walks through exporting your banner, covering essential tools and techniques for your projects.

In this video, we'll be exporting our banner. Let's go over the process of what that would look like.

Normally, we'd go to File, Export, and Export As. However, to save this, a lot of times for printing, you'll save it as a TIFF file. To do this, we would go to Save As, and instead of Photoshop, we would save this as a TIFF.

A TIFF file allows you to have multiple editing opportunities and low compression, meaning your image will export and print with high quality, and it allows the printer the highest degree of quality for this printing job, short of actually editing it in Photoshop. However, for this situation, we're going to simply export a preview of this so we can look at all three of the banners together. So let's go up to the top, and we'll go to File, Export, Export As, and from here, we're going to be exporting our banner as a JPEG.

We'll go to the top right, and instead of PNG, we'll select JPEG. We'll keep the quality at 100%. However, let's reduce the scale so we have a smaller image to work with.

We'll click Scale and select 25%. This will give us a width of 2700 × 5400 pixels. We'll then wait for the preview to load, as our computer works hard to create a preview from our large file.

So let's give it some time, and I'll come back once the preview has loaded. Here, we can see that we have our preview, and this looks good. So let's export it now.

We'll go to Export All, and now we're going to be saving our file, renaming it 'PTC for Phase 10 Construction, Banner 1', and we'll save this as JPEG, and click Save. We've now finished exporting our Phase 10 Construction banner. We'll wait for this preview to load, or we can simply click the 'X'. We can save our work using CTRL+S on the keyboard.

Now, let's quickly go over what we've done in this banner. We were able to add frames and add text, as well as manipulate the colors of two different photos that we added to this. We changed a logo that originally had the text on the bottom in different colors, and we created a few shapes.

In addition, throughout the process, we considered what the words were saying, and what the target audience was looking for. In this case, they were looking to see that the photos match the words of identifying cities and construction, which is why we chose San Francisco imagery along with construction. We then went through the process of observing where the attention would be grabbed in this center text here, and how we could emphasize that text with a title below.

Overall, I think this banner accomplishes its job, and our client would be happy. In the next video, we'll start on Banner 2. See you there!