Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
This course reveals how designers can create vibrant web graphics, wireframes, and complete web site mockups with the strong layout and color management tools in Adobe Illustrator. Author and Adobe Certified Expert Justin Seeley covers topics such as building responsive layouts with artboards, producing custom color palettes and swatches for web graphics, and making vector shapes and text that seamlessly scale. The course also explores adding drop shadows and other live effects, setting up interface elements such as forms and tabbed interfaces, optimizing and exporting different types of graphics, and speeding up your workflow with reusable image sprites and Smart Objects.
The one on top says Text as Text and the one on bottom says Text As an Image. And so if I were to select this piece of text on top, you would notice that this is actually a live text object inside of Illustrator, whereas, if I select the one on the bottom, it has a somewhat different appearance, because it is simply a placed PNG file. So let's assume that I used some sort of fancy typeface down here and I had to place this somewhere on my web page. Well, the same holds true inside of Illustrator. I have some serious problems with this. Number 1, I'm struck at the static size that I have here.
If I were to try to resize this up, for instance, the text really starts to get chunky and choppy and I don't like it. I've got a lot of artifacts. That's because scaling bitmap images up generally doesn't work all that well. Now let's say, for instance, that I needed to change the text. Well, that's easy, right? Just double-click. Oh wait, that jumped me into Isolation mode. Oh, that's right. It's because it's not an actual piece of text. So in order to change this text, I would have to go back in another program that I created it with and make the change, save out a new graphic, and then replace it into this file here or re-upload it to the web site or wherever it might be sitting.
So again, sort of a problem. Let's take a look at this text here. This text here, easily editable: all I have to do is double-click and I can change it. I can select the Selection tool and I can scale it up and down any way I want. It always stays crisp and clean no matter what. And let's assume that I was using this as a regular text on a web page. This would actually be selectable text that people could copy and paste from my web site.
It would also aid in something called SEO, or search engine optimization, so that when my page is being crawled by search engines, it would automatically pick up these words. Whereas, if it was just an image, there's nothing to pick up because it's image data, unless of course you added something like an alt text tag to it or something. But if don't know how to do things like that, you're pretty much stuck with just a plain old image. So in the grand scheme of things, I think it is definitely a better idea to use live editable text whenever possible in your designs and on web pages in general, because we want the user to be able to select this text, interact with this text.
Let's say they have some sort of disability. We want them to be able to blow this text up and still be able to read it. There are a ton of reasons to create live editable text on a web page versus using an image, and I think they far outweigh the creative possibilities that are enabled by utilizing images versus text. So, as you start to create the text elements in your web designs, my recommendation is to keep them as simple as possible, unless of course you know that you can implement these via web fonts or a service like Typekit.
Otherwise, keep them as simple as you can. Get creative with spacing, line height, whitespace, color combinations, emphasis, and things like that, and you'll be glad you did, because in the end you'll have a much more user-friendly web site that can be accessed by more people or more devices a lot easier.
Find answers to the most frequently asked questions about Illustrator for Web Design.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
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.