Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
Productivity Tips for Web Designers is the weekly series for web designers who want to enhance their design, software, and freelance business skills and streamline their workflow. Whether you're new to web design or working professionally as a seasoned designer, you'll discover techniques that can help you become more proficient at your craft. Tune in every Thursday for a new tip on topics including typography; SEO; design software like Illustrator, Photoshop, and Dreamweaver; and web coding in HTML and CSS.
- Hi there, this is Sue Jenkins with Productivity Tips for Web Designers. In this week's lesson, I'll show you how to format text for the web in Illustrator, so you can harness the power of some new features in Creative Cloud. When designing for web and mobile apps in Adobe Illustrator Creative Cloud, there's a little time-saving trick that you can do, when formatting text, to make your web development go a lot faster. This trick has to do with using the Character Styles instead of regular text, and then working with Adobe Illustrator CC's new CSS Properties Panel.
Once you try this technique and use it a few times, I think you'll see for yourself how totally useful this is to your performance and to your workflow, plus, if you frequently use Illustrator templates to start your projects, you can save default Character and Paragraph Styles into your template to further speed up your design process, so let's switch over to Illustrator and let me show you how these work. Creating Character Styles is really just a matter of saving your Styles to the Character Styles Panel, so, in this sample document, I've created two text boxes, one with formatting, and the other without, but no Styles have been created yet with the Character Styles Panel.
You can open the Panel by selecting Window, Type, Character Styles, then, to add a Style to the Character Styles Panel, start by selecting an entire text block, a word, or a line within your text block that shares the same formatting, so, for instance, I'll start with this one here, then you're going to click the Create New Style button at the bottom of the Character Styles Panel, and double-click on the New Styles Layer to edit the name, so, clicking here once to create the new Style, double-clicking the name to give it a name, so let’s say this is my Heading One, I may just do h1 to give it a name.
I'll repeat the process for the next one, so, selecting my text, clicking the button, double-clicking to rename here, call this one Heading Two, and, for the third one, I'll do it again and that will be for my p style, for my Paragraph Style, so now I've created Character Styles in the Character Styles Panel, which means that I can reuse them, apply those Styles, to other areas of my web layout in Illustrator. To apply one of your Character Styles to another block of text or word or selected text, what you do is you'll select it, so we'll start here, and then what you're going to do is you're going to ALT or Option click on the desired Style name in the Styles Panel, so, holding them down, your ALT or Option key, and then pressing on the Style that you want to apply to it applies the Style, so let's do it again, so choosing this block of text, holding down your ALT or Option key, clicking on the Character Style that you'd like to use.
We'll do it again for our paragraph text. It's pretty easy to do, it's a huge time saver. If, at any time, you need to change a Style globally, like you want to change the font face, or the font color, the font size, something like that, you're going to click on the name of the Style in the Character Styles Panel, but not on the text, just on the bar, double-clicking, that will launch the Character Style Options menu for you, and then you could go in and change any of the characteristics, so, if I wanted to change the size, let's make it 28, I could go in and scroll through here, maybe I want a different color.
We'll choose a different color, how about … we'll make it a brighter pink, and then you can say OK, and all instances will update globally throughout your entire document, which is pretty handy. Now, before we can export the text and the Style of our boxes, say, or anything else in our layout, what we need to do is make sure that all of the elements in our layout have names. As you can see, I've already labeled the Layer, so we'll go to our Layers Panel, let me pull this out so that we can see it easier, I've already labeled the Layer for boxes and the Layer for text but, if you expand the boxes panel, you'll see that the two boxes themselves are just called < Path > and we need to name those so that when Illustrator exports our CSS, they have actual names so, just for simplicity's sake, call it box1 and box2, like so.
Okay, so now that everything's named, we can open up our CSS Properties Panel, through the Window menu, Window, CSS Properties, and here it is, over here, so let me just pull it out so we can have it on the artboard and see it more clearly, so what you can see is all of the Properties that we've already created. We have Heading One, Heading Two, and Paragraph, and there's a few buttons at the bottom of the Panel. The first button has export options that you can customize to suit your needs, so let’s click on that one first, so you could choose Points or Pixels for your CSS units.
You can choose the Appearance options, Position and Size options and other general Options, so you'd customize this to suit your needs. You can also tell Illustrator to Generate CSS for any unnamed objects, so just in case you forgot something along the way, I always turn that on so I can get the CSS for it. Click OK. The next three buttons in the Panel let you Export Selected CSS, Copy Selected Styles and Generate CSS. If you'd like to view the CSS and copy it from within Illustrator, you're going to select the desired content first, so let's grab all of this, just selecting everything first, and then you can see that there is a prompt in the Panel to click the Generate CSS button to get the CSS.
The CSS appears in the Panel display, and you can see h1, p, h2, there's box1, there's another h2. Now what it does is if it has duplicate instances, so there's Heading One in two instances, Heading Two, two instances, paragraph, two instances, boxes, two instances, it will automatically add a number one or a number two, so you will have to do a little hand-coding cleanup at the end of this, but at least you have all the CSS. You've got your font-family, font-size, font color in both hexadecimal and rgb values.
If you want to copy, you can select inside the Panel and drag all the way up to the top, and click the Copy Selected Style button at the bottom of the Panel. You can then head over to your Code Editor and paste it into your CSS. Another thing you can do is have Illustrator export the CSS for you, so, after you click the Export Selected CSS button, the dialog box opens and it'll name the file for you and you can save it to the location of your choice.
So, whether you export your CSS Styles or not, working with the Character Styles Panel in Illustrator for your headings, your body text, and whatever other Styles you may need, can really help speed up the design process for all your web and mobile app projects.
There are currently no FAQs about Productivity Tips for Web Designers.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.