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!
re: Pixel Preview
This question has nothing to do with Illy, but the comment in the second paragraph of this section about pixel-based effects looking bad made me wonder.
I like to put nifty effects on text sometimes in InDesign, but they always look horrifically blurry and pixelated. I don’t print often so I’m not sure they print looking as lame as they do on my screen, but I know that when I exported to a max-quality JPG the pixelation remained. I wanted to do some further work on the export in Photoshop, and wound up having to spend tons of time manually smoothing out all the square-ness.
I looked in the settings for InDy and couldn’t find anything similar to what was described above in terms of changing the effects’ resolution.
Am I doing something wrong? Is there a way to make InDy’s effects higher quality?
Emily,
As far as I know, no, there is nothing like that in InDesign. However, I do not recommend exporting anything from InDesign to a JPG format (JPG always has compression). Have you tried PDF? Try File>Adobe PDF Presets>High Quality Print and see how that turns out. Also, remember that what you see in InDesign is only a preview. It tries to be as much of a WYSIWYG editor as possible, but sometimes it just isn’t that way. I never completely trust what I see in ID and if I have doubts, always export to PDF (sometimes even the quality of PDF will make a big difference).
If you’re still having problems, check out this awesome videocast from The InDesigner and see if it’s a transparency flattener issue. If you’re still having problems, come back and we’ll try to figure it out (you’ll have to give me more specifics if that’s the case).
Thanks Lauren, I exported to PDF and that got rid of the ugly pixeliness. I hadn’t been aware that InDy was not always WYSIWYG, except for sometimes JPGs look revoltingly compressed and then look fine when printed. The PDF looks pretty sharp — the black is muted as usual but that’s a whole other problem! — but I’m left wondering how would be the best way to do some further work on something I made in InDy? Sometimes I just find myself frustrated because the next thing I want to do is something I could get done easily in Photoshop, but can’t do with InDy. Like using a brush, for example.
During times like those, I’m left with either exporting to JPG or doing the whole layout in Photoshop, which isn’t really what that program was designed for!
Do you ever encounter this problem? Any advice?
Emily,
There are many ways to do it (just like opening any file in PS); I usually end up finding it on my hard drive and dragging it into an open Photoshop window. You’ll get an option for what color space you want to use and the resolution to import at (never higher than your largest image res from the ID doc). This does rasterize your text and can make it look pixelated when printed, so just be careful and don’t import lower than 300 ppi.
You can import PDFs into Photoshop
If the brush work that you want to do is part of the background, you can always create the background in PS then save (as a layered PSD!) and Place in ID like any other image. ID actually works very well with native AI or PS files and there are added features for using them (like turning off/on layers via options within ID!).
Wow. There is a lot of info here & I feel dumb for asking what is probably a simple question comparatively but…how can I just export an Illustrator (or InDesign file), into PhotoShop with layers, as just the artboard area?
Tled,
As far as I know, there’s no way to export a file with the layers in tact (there may be a plugin out there that can do it). You can export a PDF from InDesign and bring it into Illustrator and still have some editing capabilities, but other than that, you’ll be importing a flattened file. You can drag Illustrator files directly into Photoshop and as long as the file was originally saved with PDF information, it will open (flattened, no layers). When you open a PDF in Photoshop, it should give you options about how to crop it (artboard, trim area, etc.), along with what resolution to import it at and which color mode.
LaurenMarie,
I was afraid of that but appreciate your time in answering me! Thanx.
One Trackback
[...] All about views and the art board in Illustrator explains the various viewing options in Illustrator [...]