Tropical Icons

I’m learning how to use Adobe Illustrator. What a blast! I’ve had so much fun using this program. Thank you BYU-Idaho! Do you like my icons?

When I showed these to my daughter, she thought I had just colored in someone else’s designs. I had to tell her no, I made these from scratch. She was impressed. I know they look simple, but they took me a whole week to create (mostly because I was learning the program). Some were more simple than others. The starfish took me two whole seconds to make, but the palm tree, flower, pineapple and fish required learning new skills. Surprisingly, making that snorkeling mask took some work getting it just right. I learned something new with each icon.

Created by Julie Mathis

Here’s how these evolved: first I created the following:


Created by Julie Mathis

After I made these, I learned that this style (although I really like it) is considered very amateurish. (Think, child’s coloring book.) That’s okay, because I’m an amateur. This was my first project using Adobe Illustrator, and I’m not even an artist. Apparently, if you’re going to use thick strokes like this, you DO NOT want to color them in. The following icons without color are apparently the correct way to create thick-stroked icons.


Created by Julie Mathis

However, if you want to create truly professional-looking icons, I’ve learned that you want to eliminate all outside strokes, like these:


Created by Julie Mathis

To make them even more fun, I added some shading.


Created by Julie Mathis

I like some of the icons shaded and some not. However, when creating a set of something, you want to be consistent. I couldn’t shade some and not others, so I just created two different sets!

Which set do you like best? Can you identify the design principles I used?

Design Principles

Contrast: Light vs. dark colors

Repetition: I made sure there were at least two icons with the same color scheme. My strokes are the same size in the goggles and fish. The eye-hole on the camera is the same size as the fish and turtles’ eyes. The lines on the pineapple are the same size as the lines on the camera.

Alignment: All of the icons fit in the same size box and I tried to make them visually equal in weight. The palm tree being so much bigger than the other objects and the camera being so much smaller made this somewhat difficult. Do you think I did okay? Each icon is aligned with another icon on the page.

Proximity: Of course each item that relates to each item is visually connected and each icon is separated from the others. The snorkeling mask is in close proximity to the air tube; you can tell they go together.

Color: I used primary and secondary colors in different tints. I was going for a fun, vacation feel, so I wanted to use fun, bright colors. Of course I wanted the leaves on the palm tree and pineapple to be green as well as the turtle. I chose yellow for the starfish to match the pineapple for repetition. I made all the “human-related” items the same color. I used blue to represent the ocean and the fun humans have playing in it. A darker shade of gray seemed an appropriate complement to the lighter tint of blue for a good contrast. The dark, bright pinks in the fish and flower just add that touch of fun I was looking for, and the light pink provides contrast.

What a fun program. I wish Adobe didn’t have such an expensive subscription price for its products. Hobbyists like me can’t afford them! But for professionals, there is nothing better. I have a lot of respect for Adobe, the company and its products. And no, I am not an employee (maybe wish I were).

Can’t wait to see what fun design project my instructor has for next week. I’ll keep you posted. Julie

By the way, you are free to use any of these icons for personal, non-commercial purposes. Slap them on flyers, party invitations, scrapbooks, posters, church bulletins, whatever. Enjoy!

Magazine Spread Using InDesign

This is my first magazine spread and the first time ever using Adobe InDesign. What a fun product!

Let’s talk about some of the design principles I used.

First, I need to discuss my target audience which is women, specifically women in The Relief Society of The Church of Jesus Christ of Latter-day Saints.

This design appeals to my target audience through the pictures and colors used. I used pictures of little lambs to represent the people these women minister to as shepherds as well as a picture of two women hugging. I transition from a woman hugging a lamb (symbolic) to two women hugging each other, sending the message of who the Relief Society women should be ministering to. 

The colors are soft and calm, which should appeal to most women. Together with the pictures of soft, fluffy lambs, the visual impression is one of gentleness, kindness, love and caring.

Design Analysis

Contrast: I used pink headers contrasting with the dark body copy. I also used different fonts, sizes, and colors, different sizes of pictures (hierarchy) and drop-caps.

I pulled the pink from the ear of the bigger lamb and used this color as a contrasting color in my headings and the background for my pull quote.

Repetition: Not only is the pink color repeated in the headings and pull-quote, I also put a stripe along the opposite page from the quote to tie those together and then used the color for the drop-cap letters on both pages to add even more contrast. I repeated the drop-cap from the second page to the third.

Alignment: I chose to justify the text for alignment purposes. I left-aligned all the body copy text including the headings. I right-aligned the title text. I center-aligned the text in the pull-quote. I tried to align everything on the page with something else (margins, other pictures or the pull-quote). I had to play around with font sizes and kerning to get rid of widows and orphans.

Proximity: I put the headings close to their body copy and gave them extra space above to create proximity. I overlapped the pull quote onto the picture of the lamb to create proximity. I thought the quote went well with the picture and I wanted to tie those two together.  I kept all the text from the title together. I either put the picture credits directly on the photo or next to it as close as possible.

White Space: I tried to create white space with margins, space before headings, and a wider gutter. I purposely ended my body text where I did to create a little white space at the end on the bottom of that page.

Fonts: I used Bookman Old Style and Segoe Script in the title. I used a sans serif font (Calibri) in the body text and repeated the Segoe Script in the headings for repetition. It’s always a good idea to mix your fonts to provide contrast and make things more interesting.

Picture Direction and Hierarchy: When placing pictures on the page, make sure people and things are facing toward your text. You don’t won’t your readers eyes drifting off the page. Notice the woman on the left is facing inward and the woman on the far right is faced forward turning the eye back into the page from the woman next to her who is facing out.

Hierarchy refers to the first picture that catches your eye, then the next, and so on. You want your most important picture to be your biggest. Jesus Christ’s example and teachings are the most important part of this article, so His picture is the biggest. As for the spread, the lamb represents those we love, so he’s the biggest (going along with the shepherd theme), then the women caring for Christ’s lambs (literally and symbolically), and finally the hands as a final message to be the hands of Christ in serving others.

Photography Tips

While there are no “rules” in photography, there are a few things you can do to improve the composition of your photographs. Here are three tips to get you started.

Original Photo by Hamish Clark on Unsplash

First is the Rule of Thirds. Imagine dividing your photograph into nine sections with two vertical lines and two horizontal lines (like a Tic-Tac-Toe game as illustrated below). Try to position the most important element along one of the lines or at the points where the lines intersect.

Rule of Thirds. Original Photo by Hamish Clark on Unsplash

Notice the bottom horizontal line is placed on the line where the lake meets the mountains. Notice the tree in the foreground is placed where the lines intersect.

Here’s another example:

Photo taken by Julie Mathis in Spanish Fork, Utah
Rule of Thirds. Photo by Julie Mathis.

In this picture, the natural horizon (where the brown grass meets the trees) was too low, so I used the lower mountain ranges and peaks (the darker area on the mountains) as my horizon and placed this on the lower line. Then I placed the tree in the foreground on the intersecting lines on the right of my picture, similar to the tree on the lake. This picture was taken with an iPhone 7. I didn’t realize at the time you can set up your iPhone camera to superimpose a Rule of Thirds grid on your screen. Just click on Settings – Camera – Grid and the next time you take a picture, try putting your subject on one of those grid lines and see how much better your pictures turn out!

Original picture by Håkon Helberg on Unsplash

Next is Depth of Field. This is the area within a photo that will appear in focus. A shallow depth of field (a favorite for portraits and closeups) shows a sharp subject with a somewhat blurry or out-of-focus background. This is obtained with a larger aperture on a DSLR.

Shallow Depth of Field. Original photo by Håkon Helberg on Unsplash

Notice the bird and the branch are in focus, but the background is blurry. This focuses your attention on your subject.

Photo taken with an iPhone 7 by Julie Mathis using AE/EF Lock.

Unfortunately, I don’t have a DSLR or an iPhone 10 that has the ability to take professional-looking shallow depth of field pictures. The above photo was taken with my iPhone 7 by touching my finger on the screen over the face of the cat and holding it there until the AE/EF Lock popped up. This slightly blurs the background, but not as much as I’d like.

To get a more pronounced shallow depth of field look, I used an app on my phone called Fab Focus to further blur the background. I selected the areas of the cat I wanted to keep sharp, letting the app blur the rest.

Photo by Julie Mathis on iPhone 7. Altered with Fab Focus.

You can see that a shallow depth of field focuses attention on your subject instead of the background. If you want to focus on the background (such as a landscape picture), you’ll want to choose a smaller aperture on a DSLR.

Notice the picture utilizes the Rule of Thirds. The center of the cat’s face has been placed on the intersecting lines. Closeups don’t have to be centered.

Photo by Matt on Unsplash

Now let’s talk about Leading Lines. This is an easy composition trick that draws the viewer’s attention into a specific part of the frame.

Original photo by Matt on Unsplash. Altered to show leading lines.

Leading lines can be used to pull your viewer into the picture or take them on a journey through a scene (such as a winding river or road).

Photo taken by Julie Mathis. Little Horse Canyon, Utah.

Here we have natural leading lines in the curves of the sandstone leading toward our subject and beyond, inviting the viewer to “walk into the picture” toward the back of the canyon.

Photo by Julie Mathis demonstrating leading lines.
Photo by Julie Mathis.

Here the lines lead us to our subject at the top of the bridge.

Photo by Julie Mathis. Leading Lines.
Photo by Julie Mathis

In this photo, the road has the leading lines. Notice the lamp is found in the Rule of Thirds.

Rule of Thirds. Leading Lines.

With these three simple techniques, the Rule of Thirds, Depth of Field, and Leading Lines (you don’t have to use them all together), you can transform your photographs into more interesting photos in no time. Have fun!

Typography & Design Elements

The following advertisement from AVON found in an article on their Insider Blog entitled, “TBT: A Look Back At 130 Years of Avon’s Iconic Advertisements,” includes some great typography and design elements.

Original retrieved from https://www.avon.com/blog/avon-insider/130-years-iconic-avon-advertisements

One of the most effective ways to add visual appeal to a piece is through contrast and one of the best ways to add contrast is with typography.

Most typefaces (fonts) can be dropped into six different categories: Oldstyle, Modern, Slab serif, Sans serif, Script, and Decorative.

This ad uses three different typefaces that work well at contrasting each other: Sans serif, Modern, and Script.

Contrasting Typefaces

The Modern font (identified above) has a little horizontal serif (a slight line or mark that finishes off many of the lowercase letters) as opposed to no serif on the Sans Serif and Script fonts. (Sans means no.) The Modern font also has a thick/thin transition, or contrast, in the strokes whereas there is no thick/thin transition in the strokes of the other two fonts; the letters are the same thickness all the way around. The Script font has the appearance of being hand-written in contrast to the other two fonts. This adds a touch of femininity to the piece. Together, these three different fonts make this advertisement more interesting as they provide contrast to the structure of the piece.

More contrast can be found in the form of the letters. You’ll notice there are all caps in the brand name “AVON” in contrast to upper and lowercase letters in the title and description. These words form different shapes. We have a very block, or rectangular, form in the uppercase word, Avon, in contrast to the up-and-down form of the title with it’s uppercase and lowercase letters. This is repeated in the body of the description with the use of all caps to emphasize the most important words and a combination of lowercase and uppercase letters to form the rest of the description.

There is also a contrast in weight. Avon is in a lighter-weight font, while the title is a heavier font. We have a contrast between the heavier bold words and phrases and the regular print of the description. Contrast in type is not only for decorative purposes, but it also helps enhance communication. In this case, our eyes are drawn to the more important words in bold and the different color fonts. Because “ANEW POWER SERUM” is set in a bigger font, all caps, and a different color from the rest of the paragraph, our eyes are automatically drawn to it. This is obviously one of the most important things on the page and the designer has found a great way to make sure we notice it.

In addition, the contrast between the lighter brown and darker black is effective at drawing our eyes into the most important details, besides making it more fun to look at.

Four Basic Design Elements

Finally, let’s take a quick look at this ad for the four basic design elements: contrast, repetition, alignment, and proximity.

As discussed earlier, the contrast of text (size, weight, structure, form, and color) is very effective at making this ad more interesting and helping us find the most important elements.

The repetition of colors in this piece is beautiful and aesthetically pleasing. The repetition of the brand name at the top and the bottom is very effective advertising. It is the first and last thing we see. We are left with no doubt where to purchase this product.

There is a lot of different alignments going on here, but it works because of proximity. Notice the text is broken into different sections (marked in boxes above). Bunched up like this, each section is seen as one cohesive group and each sentence or word is clearly recognized as being related to those around it. This gives the piece a sense of order. Because each section is clearly separated, each section can have it’s own alignment.

This advertisement is an excellent example of good design principles. Kudos to the designer. There’s a reason we love it!

Design Principle: Proximity

Nissan ad with cars covered in snow.
Original photo found at www.graphicmedia.net

This is an example of proximity in design. Notice the wording (circled in red) is placed close together in the bottom left corner and the logo (also circled in red) is place in the upper right corner. Your eye immediately knows the words in each location go together and are talking about the same things.

This is also a good example of contrast. The bright red logo contrasts nicely with the white cars. The red car stands out, even though it’s covered in snow. The red in the car links your eye to the red in the logo. You automatically know they are connected.

Basic Design Principles

This is an excellent example of the design principles of contrast, repetition, alignment, and proximity as well as a great use of color. An artist from Serino Coyne Inc., a live-entertainment advertising agency, created the famous poster as a result of meetings between ‘Wicked’ producers David Stone and Marc Platt. This information is included in Carol de Giere’s book, ‘Defying Gravity: The Creative Career of Stephen Schwartz from Godspell to Wicked’ [New York: Applause Books, 2008]. Whoever the artist was, they really knew what they were doing. In the following draw-overs, I will demonstrate the different design principles used in this illustration.

Image of Broadway Musical Ad for Wicked
Original photo found at blog.marginmedia.com

First of all, let’s talk about contrast. Notice the opposites of black and white and red and green (complimentary colors that are opposite from each other on the color wheel). Besides being eye-catching, the use of opposites really speaks to the nature of the story–good vs. evil.

Contrast

Second, repetition. The white colors in the white witch are repeated in the title and the green from the green witch is repeated in the smaller words and the little witch that dots the “i” as well as the background. Next the font is the same throughout and the first letters of each word are a little bigger than the rest of the word. This is repeated with each word, bringing continuity to the piece. The flying monkeys provide repetition as there are more than one and the curls and waves in both witches’ hair bring a sense of repetition as well.

Repetition: Colors, Font, Letter size, Curves, Images

The curve of the black witch’s hat is repeated in the curve of the white witch’s hat (upper right corner) and the curve of the black witch’s hat over her eyes seems to be repeated in the curve of the white witch’s hair and sleeve.

Repetition: Curves

Third, alignment. Look how nicely all the lines of the title/text are aligned in a wonderful block style.

Alignment and Proximity

Fourth, proximity. All of the text has been kept close together. We immediately know the text is related. Because it is close together, our eyes are immediately drawn to it.

We all love this picture and for good reason: it incorporates all of the essential elements that constitute good design.