Hostingheaderbarlogoj
Join InMotion Hosting for $3.49/mo & get a year on Tuts+ FREE (worth $180). Start today.
Advertisement

How to Design a Custom Newspaper Icon

by

Extra, extra read all about it! Learn how to create a newspaper icon. Advanced knowledge of Adobe Illustrator is required to complete this tutorial. You'll learn how to create this detailed icon step by step. Let's get started with this creative tutorial!

You can find the source files in the directory labeled "source" that came in the files that you downloaded. You may wish to look through them briefly before we begin.


Step 1

Using the Rectangle Tool (M) to draw a rectangle, as shown below.



Step 2

Type the headline for the newspaper. It can be whatever you want. Think ahead to how you will use the icon specifically. Will your icon be for an RSS Feed? If so, you might want to write "RSS" instead. Or, perhaps your news section will be updated monthly, if that is the case you'll want to say something else.

The font I'm using is Lucidia Blackletter. Most newspapers use this type of font so I'd recommend sticking with something along these lines if you're going for a traditional feel.



Step 3

Using the Type Tool (T), draw two text areas, one large and one skinny. Fill them with placeholder text. Visit lipsum.com to grab some quick text. You can also use Adobe InDesign to create placeholder text.

Note: Often times in design you'll need to use placeholder text when creating a design. To make the text quickly accessible you may find it helpful to make a simple text file and save it to your computer for quick use.



Step 4

Most newspapers are justified, meaning both the left and right edge of paragraphs of text are flush. To accomplish this, in the Paragraph Palette select Justify with the last line aligned left. Don't get too concerned with how the text breaks at this point. You can add line breaks or hard returns later, once you have all the elements in place.



Step 5

To give the text a little more interest we'll change the first line of text slightly. Select the first line of text and in the Character Palettes Flyout Menu (highlighted below) and choose Small Caps.



Step 6

The more visual interest the newspaper has, the better the final outcome will be. Select the tall block of text and change the style to italics.



Step 7

Under the headline add another block of text that serves as a title to an important news story.

Note: If it's not already obvious, make sure you're using a font that has several different styles and weights so you can create a range of interesting text areas.



Step 8

Use the Pen Tool (P) to draw a thin line above and below a line of text. Don't hesitate to grab a newspaper or Google "newspaper cover" to help you come up with layout ideas.



Step 9

Using the Rectangle Tool (M), draw a short rectangle under the headline for the story.



Step 10

Add three blocks of text and italicize them to give the impression that this text is an intro to a story that is continued elsewhere throughout the newspaper. Add a small square to the end of each block of text using the Rectangle Tool.



Step 11

Next we'll add the area for the photo that accompanies the main news story. Using the Rectangle Tool once more, draw a rectangle over the text.



Step 12

Select the rectangle and go to Object > Text Wrap > Make. After that go to Object > Text Wrap > Text Wrap Options… Change the Offset to whatever looks good to you.



Step 13

You can repeat the last step for the two smaller photos or simply move the block of text down slightly, as the text does not need to wrap around the sides of these small rectangles.



Step 14

To easily create the illusion of a photograph, we'll use the Gradient Mesh Tool to add some variation to the rectangle. Click a few times within the rectangle to give it some points. Use the Direct Select Tool (A) to adjust the handles and curves of the points so the lines aren't perfectly straight.



Step 15

Change the color of the points so it looks as if there is some detail in the photograph.



Step 16

Repeat this process for the other two small photos.



Step 17

Select everything and go to Type > Create Outlines. Select everything once more and go to Object > Group.



Step 18

Using the Rounded Rectangle Tool draw a rectangle as shown below.

Note: To change the radius of the rectangle's corners hold the up or down arrows while you draw the shape.



Step 19

Draw another rectangle and place it over the end of the curved shape. In the Pathfinder Palette select Subtract from Shape Area followed by Expand.



Step 20

This is the shape you should be left with.



Step 21

Select the shape and go to Object > Envelope Distort > Make with Warp… Select Shell Lower from the list and change the Bend to about 3%, then click OK.



Step 22

Select the object and go to Object > Expand… Leave the options as-is and click OK on the resulting dialog.



Step 23

Using the Direct Selection Tool select the top-left point and drag the curve inward to create a subtle arch on the left side of the shape. Repeat this process after selecting the top-right point.



Step 24

This is what your shape should look like.



Step 25

Select the shape and go to Effect > 3D > Extrude & Bevel… Enter the rotations I have then select More Options and enter the variables highlighted below.



Step 26

To fit the newspaper cover to the 3D shape you'll need the ability to warp the cover substantially. To do this select the newspaper and go to Object > Envelope Distort > Make with Mesh… Enter 2 for Rows and 2 for Columns.



Step 27

Using the Selection Tool (or the Rotate Tool) rotate the shape as shown below.



Step 28

Using the Direct Selection Tool Grab each corner of the newspaper and drag it to the corresponding corner of the newspaper shape.



Step 29

Getting the face of the newspaper to match up with the shape will be tricky but it is doable. Continue using the Direct Selection Tool to fine-tune the other points on the newspaper. Also adjust the handles as highlighted below so the newspaper flows exactly where you want it to.



Step 30

Observe below the handles in their correct position.



Step 31

This is what the face of the newspaper looks like once it's completely fitted to the shape.



Step 32

We'll need to give the newspaper an aged look. To do this select the face of the newspaper and go to Edit > Colors > Adjust Color Balance. Select Preview and Convert (if necessary), then adjust the sliders to suit your liking.



Step 33

Ungroup the 3D shape until you can no longer ungroup it. Select the bottom edge of the newspaper and change the color to match the face of the newspaper.



Step 34

To achieve the random edge that the top edge of the paper needs, simply use the Pencil Tool (N) to draw an arbitrary and jagged shape.



Step 35

Select the shape you just drew and select the side of the newspaper. In the Pathfinder Palette select Subtract from Shape Area followed by clicking Expand.



Step 36

This is what you should be left with.



Step 37

Using the Pen Tool, draw some smooth arch shapes that indicate where the edges of the pages are. These can be random.



Step 38

Be sure to use a range of colors and gradients to make the effect more believable. Also experiment with using transparency if necessary.



Step 39

Notice how the center of the side of the newspaper is much darker. This is important to creating an overall dimensional effect we're after.



Step 40

Use the Pen Tool to draw two rectangles that follow the edge of the bottom of the newspaper.



Step 41

Give them a subtle gradient and in the Transparency Palette, then select Multiply, so the shape blends more effectively with the color of the newspaper.



Step 42

We'll create a tenuous sense of depth by drawing an arbitrary shape on the face of the newspaper. Fill it with a light grey color.



Step 43

In the Transparency Palette select Multiply and change the Opacity to about 85%.



Step 44

To make the shape less obvious select it and go to Effect > Stylize > Gaussian Blur. Enter a number that looks good to you.

Note: The number you enter may be much higher or lower than what I show below. The amount of blur you apply to an object is based on the scale of the artwork that you're creating.



Step 45

To complete the icon use the same technique to apply other drop shadows to other areas of the paper, like underneath it.



Step 46

The luxury of vector artwork is that it scales to any size without quality loss. There may be occasions where you want to use the icon at different sizes. When you scale the icon to various other sizes make sure you know what your preferences are for Illustrator's Strokes and Effects. Before you enlarge or reduce the icon, go to Illustrator > Preferences > General and check Scale Strokes & Effects if it is unchecked. Now, you're free to scale your icon to alternate sizes.



Final Image Preview

Here's the completed design. You've just learned how to create a detailed newspaper icon!


Advertisement