At the conclusion of this module you will be able to:



CHAPTER Xrev xx/xx/xxxxAt the conclusion of this module you will be able to:Use the Bloat effectUse Pathfinder’s Exclude optionAlign objectsUse color. site to select logo colorsScenarioA meeting with a new company, Multimedia Development Incorporated (MMD, Inc.), just concluded. They have agreed to have you develop a logo for them. They want a circular logo with contrasting colors of the text and the shapes. During the meeting we visited the color. site. Here are the colors we agreed upon:Figure x.1 the colors to be used for a logoThe hexadecimal values for the colors we selected are shown in Table t.1Table t.1:hex color values for MMD’s logoDFDCF2A5A6855C73518C767259433E Before the meeting ended, we spent some time with MMDI discussing design considerations. Table t.2 provides a summary of that meeting. Table tT.2 Logo Principles and guidelines discussed a meeting with MMDIPrinciple/GuidelineCommentAlways design your logos in a vector application such as Adobe Illustrator, and not a raster application such as PhotoshopWhy?Ensure that the logo can be reproduced in a single color, such as black and still be recognizableWhat media result in shades of black?The logo may need to be reduced in size as small as a postage stampEnsure that any fine lines or text will still be legible when scaled down—test in IllustratorWhere might logos be quite small?Amazon logo-interpret it The small yellow arrow between the first A and the Z implies that they have everything from A to Z and also represents the smile on the customer's faceThe use of black color in the Amazon logo depicts the company’s supremacy and grace, while the orange color represents pride and happiness of the customers.We’ve looked at and constructed a few simple logos already: The really simple one for USAirways, and one that used two initials (JR). A common logo design today is circular, but when it is finished, uses more than a single ellipse. It’s this design that we will construct for the remainder of the chapter. Look at Figure x.1: It’s an example of a circular logo for MMD, who we saw in the chapter scenario. How am I Doing?Q: How many ellipses are there in Figure x.1?It is constructed using three ellipses. Can you find them? One is tricky and no longer resembles an ellipse.Figure x.1: A Circular Logo Start Illustrator Create a [Custom] document named Circular Logo. Figure x.2 shows the complete New DocumentFigure x.2. A New Document SpecificationPay particular attention to Color Mode, Orientation, Units and Size. If we assume the logo will be mainly on brochures, select CMYK as the Color Mode. The colors will appear washed out because of the smaller gamut associated with CMYK. There are two orientations: Portrait and Landscape. It won’t matter which we choose because the logo will be quite small. Finally, set Units to inches. This setting will apply to the shapes, as we draw them. The other units will be points. Q: How many points/inch?Click OK to close your document definition.As we have done previously, reset your workspace ( Reset Essentials) Figure x.3:Resetting the Workspace.Select the ellipse tool.Click once on the artboard and use the width and height values shown in Figure x.4. Figure x.4: Clicking the Artboard to Specify Exact Ellipse SizeDefinition: Width/Height equals Aspect Ratio.An exercise:Draw a rectangle 100 x 50 points. The aspect ratio would be 2.0. Change the rectangle width to 200 and the height may/may not change to 100, in order to maintain the 2.0 ratio. Whether or not it changed was dependent on the link state. Push it and replay the experiment.We want our ellipse to always be a circle, 1.4” by 1.4”.Fill the ellipseUse the Fill Tool to add color to the ellipse. Figure x.5 used color # A5A685 . You do the same. As an alternative, you could use the eyedropper tool to select one of the other colors in Figure x.1.Figure x.5.Filling an Ellipse with color # A5A685Note: Because type on a path, which we will use, deletes the path once the type is entered on it, the Fill color doesn’t matter.Q: How many paths make up an ellipse?Q: Which selection tool selects the entire object?Delete the StrokeSelect the ellipse.If a stroke is detected, select it and then bring the Stroke tool above the Fill Tool and choose none: Figure x.6 demonstrates this. Figure x.6: Specifying Fill and Stroke ValuesAdd the textClick away (Click in the white area) with the Selection tool to deselect everything, and then choose the Type tool.Type MMDINC anywhere on the artboard. You can see this in Figure x.7 Figure x.7: Text is zoomed inNote: Use Ctrl-+ to zoom inModify the FontSelect the text using the Selection tool.Open up the Character panel (Window>Type>Character). Specify Verdana, Bold, 24 points, as shown in Figure x.8.Figure x.8: Specifying font informationQ: What’s a serif font ?Q: Is Verdana a serif or sans serif font?Create the star effectSelect the ellipse. Now choose:Effect>Distort&Transform>Pucker & Bloat. Figure x.9 window opens:Figure x.9:Pucker and Bloat Experiment using the sliderAs you can see in Figure x.10, we chose -50% as the final Bloat amount. .The result should be a star, like that in Figure x.10.Note: The “stars” are really called hypocycloids. Figure x.10:Final Pucker valuesOverlay the text onto the starFigure x.11:The line of text is too longThe text line is too long. Use the Character Panel to reduce the font size to 20 points.Figure x.12: The text now fitsAligning objectsWe will center-align the two shapes. That is: center the text horizontally and vertically. Choose Window>AlignSelect both objects (drag or shift-click the second object) and then open the Align Objects panel. Figure x.13: Aligning two objects based vertically on centersChoose to center the shapes vertically and horizontally. Figure x.14 show the result. Figure x.14: Two centered objects Now we’re going to use the Pathfinder >Shape Modes panel. Shape Modes: Locate the Exclude mode.Figure x.15. Using the Exclude Shape ModeExcluding overlapping textWe use the Pathfinder >Shape Mode panel to combine shapes, to subtract one shape from another and for other reasons. As we combine shapes we will have occasion to omit areas that overlap. Q: In our example, which objects overlap which objects? i.e. which object is on top? What color is it?The final shape will take on the fill color of the top object (the text, for us) . Since our text is black, and the text is on the top, that will end up determining the fill color. Select both objectsAlt-click the Exclude mode Figure x.16:The Exclude Shape ModeThe result is shown in Figure x.17Figure x.17: The Result of using Exclude Shape ModeHere were the steps:Select both objects.Place the text on top layer.Open the Pathfinder>Shape Mode panel.Hold down the Alt key and click the Exclude button. Analyzing the ProcessThis will combine the two objects. It excludes any areas that overlap. Which of our shapes overlap? The end result should be a black star with a transparent group of letters: Or are the letters white or are they transparent? TransparencyThe text, is NOT really white, it’s actually transparent. And since the background was white, the resulting cut-out allowed that white to pass through. Here is more proof:Select View>Show Transparency GridThe result is a compound object, no longer two individual objects.Try to select the text…you can’t because it’s now a compound object… Changing the Fill ColorOpen Layers panel. Expand the Compound Shape layer. You should see Figure x.18.Figure x.18 Compound Shape Expanded Layer 1 contains a Compound Shape, which in turn contains 2 shapes. Compound Shape, is made up of text and a <Path>, an ellipse we restructured as a star. You can see all of this from Figure x.19.Figure x.19 The Layer 1 componentsRename the <path >sublayer as Star, and move the Star layer above the text, which you can see in Figure x.20Figure x.20: Changing the stack orderFilling the Compound ShapeSelect the Compound Shape layer. Recall from Figure 20, the Compound Shape consists of two sublayersChoose a fill color, CMYK Green, perhaps no stroke.Figure x.21: Specifying a Fill color.Adding a Stroke. Zoom inBecause it’s a single, compound shape, the stroke will be applied to the text and the star. Select the Compound Shape.Add a 1 point black stroke colorFigure x.22 shows this.Figure x.22: Shape with fill and strokeCreate the Outer EllipseThe yet to be created outer ellipse with “Multimedia Inc.” wrapped around it is shown below—it’s the large red ellipse that the star and text are resting on . So, we’ll need yet another ellipse upon which to add more text on a path. It is shown in figure x.23.Figure x.23: A peek into the futureAdd a new larger ellipse: 2.8” x 2.8”. It will be used as the background and is shown in the next figure. As before, color is irrelevant because we will apply Text on a Path. Recall the path disappears after the text is applied. Fill the ellipse with red, a complimentary color to green. Set the stroke to none.Figure x.24: A New Ellipse is added.Create a third ellipse 2.3” x 2.3” that will be used for another Type on a Path option: color and stroke don’t matterThis next figure shows how your artboard, which contains three shapes, should look:Figure 25: Getting ready to combine the shapes. Placing the content: What we will doPlace text on a path onto the smaller ellipseReflect the text (i.e. flip text …reverse text on bottom of an ellipse)Drag the type on a path ellipse on top of the larger ellipseReorder sub layers via the layers panelOK: Here we goSelect the smaller ellipseChoose Type on a Path tool, and click on a path of the ellipse and type MultiMedia Inc. This is shown in Figure x.26Figure x.26: Text on a pathSet the font to Arial 24 point, the current font settings are actually OK: Q What does a clicking in an unused area accomplish?Click in a white area and then on a path.You should see the text ready to be moved around the ellipse:Figure x.27: Locating the handle, or bracket, ready to reflect the textUse the handle to slide the text around the ellipse.Make the text eventually move to the bottom. It will probably be upside down. If so, it has to be reflected, i.e. made right-side up.Zoom in. When you pause the cursor over the handle, the cursor changes shape. Find and then pull the handle inwards.Figure x.28 shows the result of this reflecting.Figure x.28: Reflected TextChanging the Stacking OrderWe want the star to be on top of the larger ellipse .Figure x.29 shows the Final order:Figure x.29. The final stacking order.Drag the star on top of the large red ellipse. Center the star and the text: Center these two shapes vertically and horizontally. Figure x.30 shows the tool we looked at earlier to center two objects horizontally.Figure x.30: The tool to center objects horizontally. We’ve done this several times before. Select two or more shapes and apply the horizontal and vertical align centers.Now, drag the star on top of the ellipse and center them. Figure x.31 shows the logo with objects centered.Figure x.31. The Logo With Everything CenteredAdding a Stroke on the outside ellipse.Select the larger ellipse and add a 5-point black stroke. See Figure 32 to see one way to specify the stroke values.Figure x.32: Specifying Stroke Values. Changing the Stroke Color AgainLet’s make the stroke color match the green color of the star. Select the large ellipse againSelect the CMYK Green stroke color from the swatches panel. Now your logo should look like Figure x.33Figure x.33. The Final LogoSummaryIn chapter X we constructed a relatively simple circular logo. It used three ellipses: One to wrap around the entire shape, one for text on a path and one we converted into a star. The next chapter shows how to create a more complex circular logo.Activities1. Use color. to choose a different group of colors2. Delete the star and substitute a symbol ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download