We will reuse this image file when working with the various E-News creation tools.

a. Open Adobe nDesign and create a new document: Create New > Document 

b. Uncheck: facing pages, and Primary Text Frame

• Width: 600px (type this in the field)
• Height: 200px

Note: Notice that the sizes are converted to Points and Picas (typography units of measure)

• Hit OK or Save

USE THE SHAPE TOOL

1. Select the Rectangle Tool from the Tools Panel
2. Click and drag a large rectangle that’s slightly bigger than your artboard. It has not color.
3. Change the Fill Color: Open the Swatches Panel on the right > Be sure that the FILL is active, choose the green color swatch

ADD TEXT

1. Select the Type tool in the right-hand tool bar
2. Click and drag a large rectangular marquee above the green shape. This is your first Text Frame (notice the black cursor inside of this frame) > 
3. type in this content:  the HUB (hit enter to create a line break) monthly e-news for loyola university Maryland educators

EDIT TEXT

1. Double-click in the first line (this selects one word)
2. Triple-click in the first line – All text on that line is selected

• Change font-face to: Arial
• Change font-style to: Bold
• Change font-size to: 22pt

Now change the second line to Arial, Regular, 10pt

EDIT THIS TEXT FRAME

1. Choose the black arrow tool from the tools panel and select the text frame (blue outline and corner anchors)
2. From Top Menu > Object > Text Frame Options > check Preview 
3. Inset > Use arrows to make the inset 0pt 8  > OK
4. Use the black arrow tool to move this text frame toward the bottom of your artboard
5. Drag on the white anchor points to stretch this frame outer margins to reach the left and right of your artboard.
6. Got it?

COLORIZE THIS TEXT FRAME

1. With the text frame still selected, open the Swatches Panel
2. Make sure that the Container Icon is selected and choose PAPER from the swatches.
3. Now select the Text Icon in the Swatches Panel and chose the Dark Blue Color swatch.

So far so good...

ADD AN IMAGE TO THIS DESIGN

1. Go to Top Menu > File > Place > UNCHECK replace selected item
2. Navitgate to one of the campus images and hit Open > Your cursor is loaded with the new image
3. Click anywhere outside of your artborad and drag a rectangle. Don’t worry too much about size, you can adjust that
4. Move this new image so that it aligns with the right-side margin of your art board.

Ideally, this image should be taller than your artboard. If it isn’t…

…use the black arrow tool and click on one of the white anchor points on the left of this image frame. WHILE THE IMAGE IS SELECTED, hold down Ctrl + SHIFT (or Command + Shift).. Drag left with your mouse.

When you’re satisfied, let go of the mouse. You can redo this change until it suits you.

Note: To undo any new edits, hit  Ctrl + Z (or Command +Z)

LET'S WRAP THIS UP

Image is moved to the back of the art.

1. Move the image frame behind green rectangle
2. Select Image > Object > arrange > Send to Back (Ctrl + Shift + { )
3. Select the Green Rectangle with Black Arrow Tool
4. Then choose the Gradient Feather tool from the tool bar (Shift + G)

The Cursor turns into a crosshairs > 

1. Click on the region of the rectangle where the partially hidden image ends
2. Drag to the right a couple inches.
3. When you release the mouse, the rectangle with be partially transparent.
4. Almost done: Select View > Preview in the tools Panel (all the way at the bottom). Look Good?

(It's tough to get a screen shot of the crosshairs cursor, sorry)

EXPORT THE FINAL DESIGN

1. File > Export > Name it "header" > file type PNG
2. (save location > enews Practice Folder
3. Image > Quality= High 
4. Resolution = 150 ppi

BONUS ACTIVITY: Quickly Optimize an Image for Web in Photoshop

• Open Photoshop > File > Open >choose another image from practice folder
• Under image size (lower-right), constrain proportions and choose 400px
• File > Save for Web > Choose 4-up tab preview in upper-left 

Notice the different file sizes for the different levels of image quality
NOTE: Ctrl + 0 will fit the image into the window.

• Select one of the optimized images and Save as ‘optimized.jpg’ into the Practice folder.
• Close Photoshop (don’t save).

Okay, Let’s build an Enewsletter!!

I'm in the midst of researching an upcoming presentation and thought it best to share what I've learned.

In the half(+) decade since I began working with the various email marketing service providers and cloud hosted tools, little has changed in the realm of e-news. However, access to tools and resources is better. In 2009, we used MagnetMail, in 2011 we used Constant Contact, and today I swear by MailChimp.

I'm all for a free alternative, versus reinventing the wheel.

This week I'll meet with an on-campus client who is hell-bent on making an HTML e-newsletter that is distributed monthly. Their original design tool was MS Publishser. The finished HTML content was embedded into the body of an Outlook message. This, however presented a new problem with each email blast;  usually the content was transformed into a single image that went to the first URL on the page, without exception. 

This client has become convinced that they need to learnAdobe InDesign in order to create less worrisome e-newsletters and they want me to conduct these in-depth trainings in under 8 hours. Maybe there was an article on Wikipedia that explained how this is possible. 

In researching the conversion using InDesign (ID), I learned a few interesting facts:

1. InDesign does not do this easily.
2. The individual using ID should have some prior (and advanced) knowledge of HTML/CSS in order to make it work. 
3. The thing about ID that makes it the ideal tool for graphic designers, total control over placement of content, makes it a terrible resource for the novice. Success relies on the skill and knowledge of the user. So, someone with no coding ability will not learn how to effectively create an enewsletter in ID...not in 8 hours anyway.
4. Lastly, even after all of the boxes are ticked, and the syntax is correct, the user must then alter the CSS further to create a workable finished product.

Enter MailChimp

I've worked with this free tool off and on for 5+ years. Users don't need to worry about HTML/CSS or responsive design if they don't want to. WHEW!

However, the free option means limitations. Campaigns can only go to a mailing list of 2K, and the users of this service can only send 12,000 emails per year. That's a tough sell for my clients who are convinced that they will go over  the freebie amounts. In addition to the crash course I'm planning there will also be  20 minutes dedicated to an in-depth MailChimp hard sell!