Make a big impact at first sight: Choose a high-quality typeface, apply unique typesetting, and use an easy color-matching technique.

A computer monitor displays a website with a bold text header: This must be the place.

O que você precisará

This sample file contains assets provided by Adobe Stock for your tutorial practice purposes only. Check out the ReadMe file in the folder for the terms of use for this file. Adobe Stock has millions of royalty-free images and videos for your commercial use. You can get 10 images with a free month trial.

Start with a brand-new document

After launching Adobe Illustrator, click the Create New button on the Home Screen.

In the New Document window, select the Web category at the top and enter the dimensions. We’re creating a blog header, so we used Width: 1040 px and Height: 400 px.

Click Create. 

In the Web section of the New Document window, the dimensions are set to Width: 1040 px and Height: 400 px

Place a background image

You’ll start by adding a background image. Choose a simple texture or an image with open space for text.

Choose File > Place and choose your own photo or navigate to the supplied sample image. Click Place.

With a loaded cursor, click and drag so the photo covers the entire artboard. It’s okay if your placed image exceeds the bounds of the artboard; we’ll fix it in the last step.

To reposition the image after it’s placed, drag on the center of the photo with the Selection tool.

Click and drag across the artboard to define the size of a placed image

Add your title and format it

Select the Type tool and click somewhere on the artboard to add an insertion point. The default placeholder text appears (“Lorem ipsum”).

In the Character section of the Properties panel, change the font size to a large point size—for example, 60 pt—and then click the Align Center button in the Paragraph section.

Replace the default “Lorem ipsum” text with your own title, and then press ESC to exit the Type tool and automatically select the type object.

While text is selected with the Type tool, a font size of 60 pt is set in the Character section of the Properties panel

Click the Font Family menu in the Properties panel and either choose an installed font, or you can add a new font from Adobe Fonts. Click Find More and scroll to browse all the high-quality Adobe Fonts available to Creative Cloud members.

If you wish to follow along, select Raleway Bold and activate it by clicking the cloud icon.

Select Raleway Bold in the Font Menu.

The Character section of the Properties panel displays a list of fonts; The Find More button is highlighted to show how you can access additional Adobe Fonts

Add some color to make your title pop

Create a unified color scheme by borrowing a color from the background image.

Select the Eyedropper tool and click anywhere in the image to sample a color and apply it to the selected text.

To edit the sampled color or to choose your own, double-click the Fill Color box toward the bottom of the Toolbar and use the Color Picker to select another color.

Sample artwork with the Eyedropper tool or double-click the Fill Color box in the Tools panel to apply a different color to text

Grab attention with awesome typography

Now that your title is taking shape, play with the letterforms to make them stand out. In the Character section, click the More Options button (three dots).

Try increasing spacing between letters to make the title appear airy and elegant, or apply negative spacing to give it an edgy, modern look. In the Set Tracking menu, choose values such as 50, -25, -10, etc., to experiment.

Try setting the title in all caps. Click the All Caps button to get another look.

Update text by choosing 50 in the Set Tracking menu located in the Character panel, then click the All Caps button

Add some graphic impact

In this step, you’ll add an effect to give the title some depth.

With the text selected, choose Effect > (Illustrator Effects) Stylize > Drop Shadow. Try changing the Mode, Opacity, Offset, Blur, and Color settings. Select Preview to see the live effects, and then click OK.

To create the hard-edged drop shadow shown, we used these settings:

Mode: Multiply

Opacity: 50%

Offset values: 4 px, 4 px

Blur: 0 px

Drop Shadow window displays the Mode, Opacity, X Offset, Y Offset, Blur, and Color options

Export your artwork to be viewed online

Finally, you’ll save your title design in a web format.

Choose File > Export > Export for Screens. Choose a location to save the file and the JPG 100 setting for the highest quality. Click Export Artboard.

Select the export location and the JPG 100 option in the Export for Screens dialog box

Use eye-catching artwork and striking typography to design a web title that keeps your viewers coming back.

Logotipo da Adobe

Fazer logon em sua conta