In this assignment, you will identify the distinctive visual elements of a brand and use a harmonious color combination that fits with the brand’s identity to create a brochure.
About Hex Codes
As introduced in a previous assignment, hex codes are one way to define colors, especially for the web. This is a system for describing RGB colors online using 6 digits or letters to describe the intensity of each color, from 0-9 and a-f. Hex codes are typically written with a # symbol at the front. It doesn’t matter whether the letters are uppercase or lowercase.
There are numerous ways to identify the hexcodes of colors used online, such as using the eyedropper from within an Adobe program or looking up the color in the CSS. This video quickly goes over several methods:
Part 1: Identifying Colors & Visual Identity
In this part, you’ll choose a brand with a visual identity that appeals to you and use it to create a one-page visual style guide for the brand.
1. To begin, download this zip folder with templates you’ll use in Adobe InDesign and Illustrator. This contains one file for Part 1 and one file for Part 2: color-templates.zip
2. In Illustrator, open the template called brand-worksheet.ait. Usually Illustrator has the .ai file extension. The .ait file extension means it’s a template, and you must immediately go to File > Save As to save a copy for your work.
3. Choose a brand with a distinctive or appealing visual identity. You can interpret this broadly to include nonprofits, universities, media companies, sports teams, etc. Since the focus this week is color, the assignment will be more interesting if you choose a brand that uses distinct or vibrant colors as a key part of its brand identity.
In Illustrator, complete the worksheet to create a one-page visual summary of the brand’s visual identity. There are four sections with instructions included outside the artboard:
Brand description
In the text box, type your selected brand and describe it in 2-3 sentences.
Logo or brand mark
Add two images showing the brand’s logo and at least one variation of the main logo. Some brands may have logo assets available to download, or you can save an image from the website or social media.
Insert your images into Illustrator by going to File > Place. Resize the image by holding Shift while dragging a corner of the image, using the standard black arrow tool.
Colors
Identify five colors associated with the brand, then apply those colors in Illustrator and change the #000000 hexcode (for black) to the correct hexcode. List the most prominent colors first, then accent colors. Be precise!
To change a fill color in Illustrator, click on the shape you want to change, then click or double-click (depending on your operating system) on the swatch at the bottom of your left-side toolbar. That will open a color window and you can paste in a hex code or adjust the color in other ways.
Image and visual design style
Add 3-4 images that represent the brand’s style for images and visual design. These can include social media posts, ads, images, webpage screenshots, design products such as brochures or packaging, etc. Some organizations share content from affiliated brands or create Make sure to look for images that represent the brand’s unique style. Resize and align the images in Illustrator so they fit well in the open space at the bottom of the worksheet.
This video shows how to add and adjust images in Illustrator:
This video shows how to customize colors in Illustrator:
4. Once your worksheet is complete, save a version as a PDF by going to File > Save As and choosing PDF as the file format. You’ll be submitting the PDF version only.
Your completed page in Illustrator may look something like this:
Part 2: Applying Visual Identity
1. In InDesign, open the template called AdobeStock_164635132.indt. This is a tri-fold brochure template from Adobe.
You will add images and customize the colors and fonts so the brochure fits the brand identity you summarized in Part 1. The finished design should look like a brochure the brand could use! You only need to customize the first page in the template for this assignment, not both sides.
When you first open the template, you may get a message that you do not have the matching fonts installed, which is no problem since you’re going to customize the fonts anyway. Since fonts depend on the files installed on your own computer, this just means the computer you’re using doesn’t have those specific fonts. If you have an Adobe subscription, you can “Activate” those fonts if you want to see how they look before choosing your own to customize the design.
Don’t worry! Just choose Replace Fonts… to choose fonts that are installed on your computer, or choose Skip and change the fonts later.
You can ignore this for now, in which case the text will appear highlighted in light pink until you choose a new font. Or you can use the replace font interface to apply fonts all at once (you can still customize them later).
To replace fonts, click the font name next to the yellow alert symbol, then click Change All. You can choose which font will be used under “Replace With,” but you can always change it later.
2. As soon as you can, go to File > Save As to save your own copy of the file. It should be the .indd InDesign format.
3. Customize the brochure template so it fits with your selected brand’s visual identity. You do not need to change the actual text unless you want to, and you only need to complete the first page.
Images: Add photos using InDesign’s “frames” feature. Shapes with an X through them are frames for placing images.
- Select a frame by clicking on it with the black arrow tool, and go to File > Place to add your image.
- Go to Object > Fitting for different options to fit the photo into the frame. Always resize proportionately so the photo doesn’t get distorted!
You should use free-to-use images you find online or images that are from your brand (such as posted on the brand’s website or social media). It is okay for this assignment purpose to use copyrighted photos from the brand you’re featuring, but you should not take copyright-protected photos from other sources.
Colors: Change the default colors of the various shapes to fit your brand’s color scheme. You can also change text colors, but keep readability and contrast in mind.
You should use your brand’s color palette as a starting point, but you can add other harmonious colors using tools such as Colormind or the Canva generator. Remember, use only 1-3 hues but as many tints, shades and tones as you want.
To change colors in InDesign, select the element you want to change and then click or double-click the color swatch at the bottom of the left-side toolbar. This will bring up the color options, where there is a spot to paste in the hexcode.
If you want to add a background color, use the rectangle tool to draw a shape on the section where you want the background. Then go to Object > Arrange > Send to Back to put that shape behind everything else as the background.
To add background colors, make a shape using the Rectangle took and then send it to the background so it’s behind all the other content.
Text: Make adjustments to the fonts and text styles so those elements also fit with your brand’s visual style. For example, does your brand typically use serif or sans serif? Is it more decorative or more straightforward?
You do not need to fill in the text unless you want to. You can leave it as placeholder text, as if this is a brochure template for your brand.
6. Save your InDesign file (.indd) in case you need it later. Then save a version of your selected page as a PDF by going to File > Export and choosing PDF as the file format. (Choose high quality.) You can set the range to only include Page 1.
This demo video shows the process for getting started with the InDesign template, including how to place images in the frames and customize the colors:
Submitting Your Work
Submit the following:
- Illustrator worksheet PDF saved from Part 1
- InDesign brochure PDF saved from Part 2
Demonstrated Skills:
- Accurately identify and reproduce designated brand colors in Adobe software programs
- Place, adjust and align images in Adobe Illustrator
- Open a template in InDesign and successfully customize images, colors and text