Make a big impact at first sight: Choose a high-quality typeface, apply unique typesetting, and use an easy color-matching technique.
What you'll need
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.
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.
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.
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.
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.
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.
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
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.
Use eye-catching artwork and striking typography to design a web title that keeps your viewers coming back.
