Sometimes when working in Illustrator it is necessary to go into view modes that are beyond the basics. But what are they? When is the best time to use them?
Esben, our resident Illustrator expert, returns with several ways, detailed below, that Illustrator can display your artwork.
Outline Mode
Normally you draw in preview mode, but outline mode can be very helpful, too. It shows a wire frame (like in a 3D program)of everything on the art board , so you can easily see every element without colors and effects. Outline mode is useful when your meshes or blends get very complicated and Illustrator or your computer has a hard time processing everything in color. Cmd/Ctrl+Y will turn it off and on.
Pixel Preview
You don’t have to export your graphic to see how it renders in pixels, just select View> Pixel Preview for a pixel-based view. This can be very helpful if you have any concerns, particularly about the way effects will look. Cmd/Ctrl+Alt+Y turns Pixel Preview on and off.
If you notice that your pixel-based effects are looking bad, try going to Effect>Document Raster Effects Settings and changing the resolution from the default Screen (72 ppi) to High (300 ppi). Be careful though, as this can make it more difficult for Illustrator to give you fast updates when you move or change objects.
What About Transparency?
The scariest part many Photoshop users encounter when they fire up Illustrator is that the pop-up dialog box for new documents doesn’t give the option to chose between a white, transparent or black background. Well, it really doesn’t matter since the white art board is always transparent from the start! The familiar transparency grid (the grey and white checked background) can be turned on and off by hitting Cmd/Ctrl+Shift +D, except when in Outline Mode, in which case the transparency grid won’t show up.
You will see that the art board is transparent and the white color that shows by default in Illustrator is just a canvas, not something that shows up when the file is exported. But what if you have to draw something that’s white? White on white is impossible to see! Here’s a tip: make a square with any color you like as a “contrast” color and make it as large as you need to (past the art board boundaries if you want). Go to the Layer panel and lock the object you just created. Also make sure to place it at the bottom of the layer stack. When you’re ready to export your artwork, remember to either delete the contrast layer or hide it in Layer panel.
My next article is a tutorial (which will be up next Monday), where we will make an RSS button and go through using all of the palettes and tools we’ve talked about so far.
Missed one of Esben’s previous articles? Catch them here:
And remember to subscribe to Creative Curio today for more useful articles like this!
this was a great walk-through the various view modes in Illustrator. I actually didn’t know about the Pixel View - thanks for the tip.
I actually realized that the art board in Illustrator is transparent when I copied my illustration from there and pasted it in Photoshop - it came with the transparent background.
Also, there are different ways getting your work from Illustrator to Photoshop. It would help a lot going through each of them with the comments on which method works the best and when others should be used. Just another idea for your future Illustrator articles.
Look forward to the actual AI tutorial!
@Vivien
Thank you Vivien
Well I don’t have much love for Photoshop, mostly because what Im going to teach about, can be done directly in Illustrator and exporting would actually degrade the artwork and not be necessary.
There are some instances where photoshop could be a advantage, but they are hardly beginner stuff.
Could you elaborate on which instances you would like to export your artwork to Photoshop?
sure, Esben.
Say, I’m designing a web site, preparing a mockup in Photoshop (I know I can do it all it AI, but in some instances Photoshop is an easier application to use for site mockups), and I did an illustration in AI, but would like to use it in my Photoshop mockup.
a few things that I’d like to know how to handle better are:
- scalability - say I pasted a logo, or an illustration from AI to PS, and need to re-scale it in PS to fit in with my design - is it ok, to just re-scale it in PS?
- type treatment - I noticed that the text always looks better in AI than in PS after I import it there. Of course, sometimes I should just add text in PS, but other times I need it to be part of my illustration.
- finally, the most important part - colours. They always look different AI vs. PS. Perhaps I’m doing something wrong - then it would be great to learn how to do things properly.
thanks for addressing those issues, Esben.
eee.. Im not sure what I should say about this, since I never ever couldn’t or wouldn’t make a mockup in Photoshop
I think when you say “easier”, you mean “easier” for you
My mission on creativcurio is learn you to switch to Illustrator, there is absolute no reason for you to make your mock ups in Photoshop.
Im not very knowledgeable about Photoshop, so I have no idea how you would scale, other than smart objects… but why not just make it in Illustrator, then you never have to worry about scalability?!
Colours, do you use RGB when you create a new Illustrator artwork?
haha… i guess, it’s easier for me to do certain mockups in PS
However, as a designer working on many website projects for my company, I always get site mockups in a PSD format that I need to work on and convert to XHTML/CSS. So I’m not the only one who uses PS for that. How others are designing their sites?
Perhaps you could then do an AI tutorial here and show us a quick site mockup creation in AI? Then you would get more AI converts that way
Yes, I do switch to RGB in AI and work in RGB in PS.
When you “slice” up a mock up for export, is it similar like this tutorial?
about the colours, its a bit difficult for me to answer your question, since there are a good deal of solutions.. I need to know where the difference in the colours occur (your browser, in PS etc.)
well… I usually “slice” up a mock up for XHTML individually for every element. It’s a very different process from how I was usually slicing up PS mockup in old days when converting it to HTML tables. Now it’s close to how it’s described in that tutorial you linked to.
Colour difference - I do have problems with colours looking different in browser, and I’ve read dozen tutorials on how to fix that, but none worked 100% so far.
For now, I was asking about the difference in colours on the same artwork between AI and PS.
Esben — one difference between IL and PS is filters and effects. The difference in beveling alone is pretty significant.
slicing: well then you have a long and twisted workflow, or thats what I think.
Illustrator got a slice tool that export your images to a folder, if needed.
On the other hand I did say in the first tutorial, that Illustrator should be used for web, so I guess im obligated to make a mock up tutorial
Colours: you have to use a sRGB, since every browser (except webkit/safari) converts it otherwise. This adjustment can be found in PS as well as Ai, in “edit” -> “color settings”
I found something by Mordy, but its on CMYK, so I guess is useless.
@Alec
Im not sure if I understand, yes the way Illustrator works with effects/filters is much different than Photoshop, but I have no idea how you would make a bevel in PS :)
Hi guys! Great discussion going on here. Thanks for being so active, Esben! You’re getting so many good ideas for Illustrator tutorials that you may just have to start your own blog ;)
Hi Esben
I was desperately looking for articles on how to use illustrator for website designing because i am very much impressed with illustrator new color tools. Could you please give me tutorial link, book or article from where i can learn “website desiging through illustrator.
Thanks
Vijay Kumar
@Vijay
I am in the moment writing a article on this particular issue, which will be posted in a very near future!
Im sorry, but I haven’t seen anyone writing about this issue elsewhere. It should be very much like drawing in Fireworks or Photoshop, but there are of course some limitations!
One Trackback
[…] All about views and the art board in Illustrator explains the various viewing options in Illustrator […]