Project 4 Step 3 (part 1)

The first thing we’ll do is design options for our header. We’ll design five different options. I’ll design one basic one for your to go through and show you the process.

I know that this box right here (selects green box with an ‘x’ through it at the top of the page) is 800 pixels wide by 150 pixels tall. So, I want to create a header that is that size. To do this, I’ll go into Adobe Illustrator and create a new document. On the menu bar up top, I’ll click ‘File’ then ‘New’ and then I’m going to create a document that is 800 pixels wide and 150 pixels tall (types these numbers into the fields “width” and “height” that appear on the ‘New Document’ window). Then we’ll click ‘OK.’

(A header with those dimensions appears in the Adobe Illustrator editing window. He then selects the Text tool from the left column and clicks on the header to begin entering text). We need to begin, first, by branding the site, so the name of the site we are using is called Type Matters (writes Type Matters in the upper-left of the header). We also need a search element (types Search in the upper-right corner of the header) and we need five navigational elements (types item 1 in the bottom-middle of the header).

Now, I’m going to duplicate this (selects the white cursor) by dragging it while holding down SHIFT OPTION and COMMAND (while dragging item 1 and then releasing), and then clicking COMMAND-D after the first duplicate will make further duplicates with equal formatting and relative position. Then, we’ll change item 1 to items 2, 3, 4, and 5.

So, we’re going to go in to our header, and we’re going to start branding our site. I want you to take a shot at it. Go in and look at different mastheads – that’s part of an exercise that you do today – and look at navigational items and look at the way search bars are handled. So for now, I’m just going to make this type a little larger (highlights the text Type Matters). And, for interest, we’ll add a background color (sets the color to yellow using the square icon to the left, then, clicks “object” in the menu bar, then “arrange” then “send to back”). I need to quit picking all these really loud colors. I need to pick something a little more neutral (goes to the color window and selects orange). Then, here, we need a search bar (clicks on the rectangle button under the text button on the panel to the left and drags a rectangle in after the word Search in the upper-right corner. Then, I’ll click ‘File’ then ‘Save’ and name it typematters-1 and save it.

Now, we’ll return to the InDesign document. In this document, on pages six and seven, which are the ones we’re working on today, here is header 1 (clicks on the top-most header on page six). Now, we’ll click ‘File’ then ‘Place’ then I’ll browse for the Illustrator document that I just saved. I’ll highlight it, then check the box ‘Show Import Options’ – you’ll need this later – then, click ‘Open.’ Then click “OK.” Click the AutoFit box. It says “Fit content proportionally.” That makes our first masthead.

To make the second masthead, go back to Illustrator, then click the “Window” menu from the menu bar and click “Artboard.”

We are going to create a new artboard. Copy the entire heading and paste it on to the new artboard. From here, we can make whatever changes we need. I’ll make a font change and a color change and save it. Then, I go back to InDesign, and again click “File” > “Place” and select ‘typematters-1’ again. Because our ‘Show import options’ was checked, we can change the number below the image to 2 and access the artboard we just created. Click ‘OK’ then fit it.

In this way, we create a page of mastheads. I just made these two as quick examples, but you should spend a good amount of time on each of these.