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 afree month trial .
1
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.
2
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.
3
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.
4
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.
5
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.
6
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
7
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.
You can control how Adobe websites use cookies and similar technologies by making choices below. But note that if you disable cookies and similar technologies entirely, Adobe websites may not function properly.
Cookies are small text files stored by your web browser when you use websites. There are also other technologies that can be used for similar purposes like HTML5 Local Storage and local shared objects, web beacons, and embedded scripts. These technologies help us do things like remembering you and your preferences when you return to our sites, measure how you use the website, conduct market research, and gather information about the ads you see and interact with.
You can make choices in the menu below about what cookies and other technologies you want us to use on Adobe sites when you visit them from this browser. You can always change those choices later by clicking on the Cookie Preferences link at the bottom of the page.
If enabled:
We can improve your experience by tailoring the site and the content to things we think might be of interest
We can better keep track of your preferences — like what language you prefer to use
We will better understand your likely interests so we can provide you more relevant Adobe ads and content on non-Adobe websites and in non-Adobe apps
It will help us improve the performance of our website and those of our partners who use the Adobe Experience Cloud
If disabled:
We won’t be able to remember you from session to session so the experience may not be tailored to your interests
You’ll still have access to the content of the site but certain features that depend on cookies may not function
You’ll still see ads, they just may not be as relevant to you
General information
You can control how Adobe websites use cookies and similar technologies by making choices below. But note that if you disable cookies and similar technologies entirely, Adobe websites may not function properly.
Cookies are small text files stored by your web browser when you use websites. There are also other technologies that can be used for similar purposes like HTML5 Local Storage, web beacons, and embedded scripts. These technologies help us do things like remembering you and your preferences when you return to our sites, measure how you use the website, conduct market research, and gather information about the ads you see and interact with.
You can make choices in the menu below about what cookies and other technologies you want us to use on Adobe sites when you visit them from this browser. You can always change those choices later by clicking on the Cookie Preferences link at the bottom of the page.
If enabled:
We can improve your experience by tailoring the site and the content to things we think might be of interest
We can better keep track of your preferences — like what language you prefer to use
We will better understand your likely interests so we can provide you more relevant Adobe ads and content on non-Adobe websites and in non-Adobe apps
It will help us improve the performance of our website and those of our partners who use the Adobe Experience Cloud
If disabled:
We won’t be able to remember you from session to session so the experience may not be tailored to your interests
We’ll still count your use of our site and services
You’ll still have access to the content of the site but certain features that depend on cookies may not function
You’ll still see ads, they just may not be as relevant to you
Operate the site and core servicesOperate site and measure engagement
Always active
These cookies are required, and they are used to enable the site and related services core functionality. Without them the site could not operate, so they cannot be disabled.
These cookies enable the site and related services’ core functionality and collect statistics about user engagement, such as counting active use to help us understand trends. These cookies cannot be disabled.
Measure performance
These cookies are used to analyze site usage to measure and improve performance. Without them Adobe cannot know what content is most valued and how often unique visitors return to the site, making it hard to improve information we offer to you.
These cookies are used to analyze site usage to measure and improve performance. Without them Adobe cannot know what content is most valued, making it hard to improve information we offer to you.
Extend functionality
These cookies are used to enhance the functionality of Adobe sites such as remembering your settings and preferences to deliver a personalized experience; for example, your username, your repeated visits, preferred language, your country, or any other saved preference.
Personalize advertising
These cookies are used to enable Adobe and our partners to serve ads more relevant to your interests. Without them you will still see ads, but they might not be as relevant to you.
Personalize advertising
These cookies are used to enable Adobe and our partners to serve ads more relevant to your interests. Without them you will still see ads, but they might not be as relevant to you.