• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Images Placed into Illustrator Remaining Vector?

Explorer ,
Jul 08, 2020 Jul 08, 2020

Copy link to clipboard

Copied

I understand how Illustrator is the best for logo design and understand the benefit of a vector design.

My question is can you place an image from Photoshop as a png or jpg or otherwise into Illustrator and incorporate it in your design and have it remain vector-based?
 
In particular it is an image that I don't think would be easily traced - it is an image of green and white stripes.
 
Thanks.
TOPICS
Draw and design

Views

786

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Community Expert , Jul 08, 2020 Jul 08, 2020

grantserafy,

 

A raster image remains raster = non vector artwork.

 

In many cases, the resulting artwork in an AI document contains both raster and vector parts, the former being raster images, rasterized artwork, and raster effects, each raster part having a certain resolution and therefore a size dependent appearance/quality and appear jagged/pixelated when scaled up or zoomed in on beyond a certain limit.

 

Whether that is an issue, and whether it is good, bad, or ugly, to image trace a give

...

Votes

Translate

Translate
Adobe
Community Expert ,
Jul 08, 2020 Jul 08, 2020

Copy link to clipboard

Copied

grantserafy,

 

A raster image remains raster = non vector artwork.

 

In many cases, the resulting artwork in an AI document contains both raster and vector parts, the former being raster images, rasterized artwork, and raster effects, each raster part having a certain resolution and therefore a size dependent appearance/quality and appear jagged/pixelated when scaled up or zoomed in on beyond a certain limit.

 

Whether that is an issue, and whether it is good, bad, or ugly, to image trace a given raster image, may be best judged/decided by trying.

 

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jul 08, 2020 Jul 08, 2020

Copy link to clipboard

Copied

Makes sense, thank you.  If I image trace it and then resave it as an eps or svg does that make it a vector image that can be placed in my logo design in Illustrator and remain a vector?  I tried to image trace it and it did not alter the image much.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jul 08, 2020 Jul 08, 2020

Copy link to clipboard

Copied

You are welcome, grantserafy.

 

Is there any reason at all to even consider anything but using the traced image as it is and retaining its full quality and usability?

 

Both EPS and SVG are for quite different purposes, the former generally considered long outdated.

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jul 08, 2020 Jul 08, 2020

Copy link to clipboard

Copied

Just not very experienced in it - just was not sure how to best take the traced image and save it and then move to the logo design - seems like you are indicating SVG best format and that it would then retain vector quality.  Hope I am interpreting it correctly - appreciate the info...

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jul 09, 2020 Jul 09, 2020

Copy link to clipboard

Copied

grantserafy,

 

"seems like you are indicating SVG best format and that it would then retain vector quality."

 

Far from it, maybe I ought to have written more clearly that both formats are limited (reduced usability and quality) although both will give vector artwork in this case (EPS, like AI, can contain both vector and raster artwork, but an image trace is vector).

 

When you have performed the Image Trace, you have full quality and full usability vector artwork which you can work with just like you can work with anything else you create in the AI document (when you have expanded it (Object>Image Trace>Expand)), so you can just move it to where you need it, copy it (in the same Layer or into another Layer, change colours, edit paths, apply transparency and effects, and whatnot. It simply becomes just another part of the artwork you are creating.

 

Hence my question.

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jul 09, 2020 Jul 09, 2020

Copy link to clipboard

Copied

Thanks Jacob.

 

I have a lot to learn obviously.  Cut me off anytime if you get tired of questions.  I am sure you are very busy.

What is the best format for a logo then to save it as - I now I need to send it to clients in multiple formats? I assume it to be SVG, EPS, JPG, PNG, PSD, PDF.

I just like the options PS allows for styling text and images as opposed to Illustrator - I guess that is where all this started.  I would love to be able to design images and text in PS and then place them in Illustrator and have them be vector images - maybe I can if, like you indicated, image trace the images from PS and then expand them and then place them.

I think I image traced my striped image and placed it in my logo design and then saved it as EPS and then tried to test it at larger view (in Preview on Mac where it converted to a PDF) - it did not pixelate no matter how much I zoomed in - curious if that is a way to test my designs?

Thanks!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jul 09, 2020 Jul 09, 2020

Copy link to clipboard

Copied

>What is the best format for a logo then to save it as - I now I need to send it to clients in multiple formats? I assume it to be SVG, EPS, JPG, PNG, PSD, PDF.

 

It is best to ask them, although that is not often enough. Often cleints don't know and they ask for “the default.” There is no default. Each placement of a logo requires a certain colour mode, a certain format,or type of format (ie. vector or raster) and, if raster, a specific resolution.

 

When this happens you need to decide whether it is worthwhile managing the files yourself of just handing over a package containg high and low resolution raster logos in JPEG and PNG format in multiple modes (RGB, white, black) and both RGB and CMYK rasters in EPS and PDF formats. One logo might require handing over 20 or more files. Each file will need to be named clearly so the client knows its use and resolution. you would also need to provide some documentation explainging which version to use for each placement and which versions are best with each program they might use. All this is billable, of course.

 

Managing the files yourself will give you better control and protect both you and the client from the inevitible even of the wrong file being used for something. If you give hte files to the client I guarantee the low res JPEG will be send to a vinyly plotter. But it also means you'll constantly deal with small jobs of proding the logo to printers, web developers, the client themselves for their PowerPoint decks, and more. Then you have to decide whether you should invoice for half an hour’s work each time this happens.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jul 09, 2020 Jul 09, 2020

Copy link to clipboard

Copied

I usually send the client a low-res PNG and high res PNG (with _72 or _300 appended to the filename to indicate resolution) and both RGB and CMYK PDFs. That’s it. If they need more they can ask, but if they punt the decision to me I keep it simple. These will cover 90% of the uses they need, so long as they are educated and disciplined about which file to use for what purpose.

 

People tend to prefer Photoshop or Illustrator and judge either to be more intuitive based on which they learned first. If you feel comfortable in Photoshop then use Illustrator you can be easily confused by its similar looking interface, tools, and commands that work quite differently from what you are used to. YouTube, Lynda, and Adobe TV can help.

 

If you want to know if your logo is fully vector press Command-Y or Control-Y in Illustrator to switch to Artwork Only view. placed images appear as frames with an X through them and paths show as unfilled hairlines. If you see the outline of your logo then you know it’s vectors.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jul 09, 2020 Jul 09, 2020

Copy link to clipboard

Copied

Thanks for taking the time Scott.  If I may, attached are screenshots of the file in question - I did the Command Y (great tip, thanks!) and it did not show the striped image (green and white striped image was one I tried to trace and place) with an 'X' so guess it is not vector - just want to be sure I am understanding the image in Comand Y as you suggested - my text also does not have an 'X' and those were all started in Illustrator so got confused....maybe you meant if the 'X' shows up as it has then the entire image is vector.....I'm so confused......BTW - what is best format to insert image into PowerPoint that would be used for print and maybe on email and web?

 

Thanks!Screen Shot 2020-07-09 at 2.14.29 PM.pngScreen Shot 2020-07-09 at 2.14.03 PM.png

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jul 09, 2020 Jul 09, 2020

Copy link to clipboard

Copied

In Artwork view text shows with a solid black fill, regardless of attributes. Other things to be aware of in Artwork view is that live effects from the Effects menu don't appear. For example a circle with a 3D extrude effect will print and export as a vector but in Artwork view will show as just a circle.

 

As for that striped background: yup, that's still raster. It will be easy to create. It looks like some light blue lines over a gradient will do it. Use the circle as a mask. Look up Clipping Paths to understand masking. “Search & Placement” are raster, too.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jul 09, 2020 Jul 09, 2020

Copy link to clipboard

Copied

Dang - I'm on about my third video so will keep learning but on the Search and Placement text, the only thing I think I did different from the other text in the logo was not Expand it or Create Outline - is that the proper step to make sure text is vector?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jul 09, 2020 Jul 09, 2020

Copy link to clipboard

Copied

grantserafy,

 

In addition to what Scott said about the striped raster image, it appears in the second screenshot as the largest square with the cross, and it is only clipped with the circle, in other words you (still) have a rather large raster image (only the greater part outside the circle is made invisible by the masking); you can also see it in the Layers palette to the right in both screenshots, within the expanded <Clip G(roup) beneath the <Ell(ipse) which is the circle and shown as the <Li(nked Image).

 

So I am afraid you have only Masked it and not Image Traced it.

 

With only horizontal lines, there is no real basis for seeing pixelation in the raster image, especially if each stripe has a solid colour or a gentle transition as here; zooming in far enough you will see banding in a corresponding vector version as well so it is a bit woolly in any case.

 

The stripes can be (re)created as vector artwork in more than one way, suitable ways depending on the exact desired appearance, such as the choice between smooth vertical colour transitions and solid colours; in this case I believe I should prefer smooth for both darker and paler stripes.

 

Apart from all that, two of the darker stripes have a presumably unwanted pale horizontal line through the middle, one at the baseline of  MOTR and the other just below SEARCH & PLACEMENT.

 

The helpx search page is a good source to Bookmark and use, just fill in search terms, as in the links below,

https://helpx.adobe.com/search-results.html?q=&scope=%5B%22helpx%22%5D&subscope=%5B%5D&limit=10&star...

 

You can read more about Clipping Masks here,

https://helpx.adobe.com/search-results.html?q=clipping+mask+illustrator&scope=%5B%22helpx%22%5D&subs...

 

and about Image Trace here,

https://helpx.adobe.com/search-results.html?q=image+trace+illustrator&scope=%5B%22helpx%22%5D&subsco...

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jul 09, 2020 Jul 09, 2020

Copy link to clipboard

Copied

Good catch Jacob on those unwanted lines....


I  Expanded that Search & Placement text but on Command Y it shows up with outline instead of solid black....confusing.


Is there any place you guys know of that has basic steps, like...

 

To add text to a logo properly:
1. Select Type tool

2. Type info

3. Expand it

 

To add image to logo properly:
1. Image trace image with the following settings...

a.

b.

c.

2. Expand it

3. Save it as png

4. Place in logo

 

To add shape to logo properly:

1. Add shape

2. Expand it

 

etc, etc.

 

I guess I am trying to simplify it as I can't seem to pick up the proper steps for a logo with all the videos.

 

Thanks.

 

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jul 09, 2020 Jul 09, 2020

Copy link to clipboard

Copied

I am making progress - thanks for help guys....Screen Shot 2020-07-09 at 11.24.34 PM.png

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jul 09, 2020 Jul 09, 2020

Copy link to clipboard

Copied

grantserafy,

 

Concerning PS and AI, unless you are after irregular/photolike/hand drawn appearances, in many cases  you may be happier if you redraw/reinterpret/start over in the native AI vector ways (Pen Tool and friends). And in many cases, tracing a raster image only replaces pixelation with another irregularity where a cleaner appearance will be far better. So the lack of pixelation is only a sign of vectorization, not necessarily of quality.

 

Concerning logo files, just do as Scott says; it is far better to ask him.

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jul 10, 2020 Jul 10, 2020

Copy link to clipboard

Copied

grantserafy,

 

"I Expanded that Search & Placement text but on Command Y it shows up with outline instead of solid black....confusing."

 

That is just normal behaviour: when you Type>Create Outlines or Expand, you create Compound Paths, and you see the paths bounding the letters which appear hollow.

 

"To add image to logo properly:
1. Image trace image with the following settings...

a.

b.

c.

2. Expand it

3. Save it as png

4. Place in logo"

 

a. - c. depend on the raster artwork, no catchall.

 

3. Save it as png brings it back to being a raster image, thereby completely desrtroying/undoing the Image Trace. Use (the desired part(s) of) the object(s) directly, just as any other vector artwork in the document.

 

To add shape to logo properly:

1. Add shape

2. Expand it

 

2. Expand it is only desirably in some cases; in many cases it is better to leave it as it is.

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jul 10, 2020 Jul 10, 2020

Copy link to clipboard

Copied

Awesome tips...

This is where I am, hopefully headed in the right direction, made myself a little cheat sheet...

Screen Shot 2020-07-10 at 11.08.58 AM.png

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jul 10, 2020 Jul 10, 2020

Copy link to clipboard

Copied

If you guys don't mind...what about this logo - comes Screen Shot 2020-07-10 at 12.37.55 PM.pngScreen Shot 2020-07-10 at 12.37.49 PM.pngout all in outline Command Y - is it all vector?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jul 10, 2020 Jul 10, 2020

Copy link to clipboard

Copied

Also curious if you create a logo in PS and then export it as SVG is that then a proper vector logo?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jul 10, 2020 Jul 10, 2020

Copy link to clipboard

Copied

This is that same SVG logo from above...seems like maybe I did it right??Screen Shot 2020-07-10 at 12.57.05 PM.png

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jul 10, 2020 Jul 10, 2020

Copy link to clipboard

Copied

grantserafy,

 

Two suggestions:

 

To drop the EPS format and just use AI with full quality and editability.

 

Here is one way to illustrate the (re)creation are pure vector artwork, to replace the MOTR image:

 

1) Using the Rectangle Tool, create a fill/nostroke square with W and H = the W and H of the circle that is to mask it, then (using the Align palette, first select both and then click the key object (circle)) Align it both ways with the circle;

2) Give the square a vertical Gradient (90 degrees linear), use the end stops in the Gradient palette and insert the colours at the very top and bottom (you can reverse the angle if you get it wrong);

 

Now you have the background corresponding to the pale stripes;

 

3) Create a fill/nostroke rectangle with the same W value as in 1) and an H value equalling the height of the (darker) stripes and (using the Align palette, first select both and then click the key object (square)) Align it both ways with the bottom of the square from 1), then Alt/Option+Shift+ClickDrag it by the top left Anchor Point to snap to the top left Anchor Point of the square;

 

Now you have the bottom and top stripes;

 

4) Object>Blend>Blend Options set Spacing to Specified Steps and set the number to the total number of greenish blue stripes less 2 (you already have the top and bottom ones, then Object>Blend>Make, then Object>Blend>Expand;

 

Now you have all the stripes as a Group of separate paths;

 

5) Ctrl/Cmd+8 to turn the Group of stripes into a Compound Path which acts as a single path;

 

6) Give the Compound Path from 5) a Gradient in the same way as described in 2), only between the greenish blue colours at top and bottom.

7) Select both the square from 2) and the Compound Path from 6) and Ctrl/Cmd+G to Group them;

 

This will give you a set of soft vertical gradients over the horizontal stripes, still in the shape of a square;

 

8 ) Select the masking circle mentioned in 1) (you can select it in the Layers palette) and Ctrl/Cmd+X+F to bring it to the very top of the stacking order (at the top in the expanded Layer), then ShiftClick the Group from 7) to also select that and Ctrl/Cmd+7 to create a Clipping Mask;

 

Now you have masked the stripes, but you still have the invisible parts outside the circle;

 

9) Object>Flatten Transparency to get rid of the outlying parts and have the Clipping Mask as a Group, then with the Direct Selection Tool Click the circle to select it (or select in within the expanded Group in the Layers palette) and reapply the desired Stroke (Weight and Color).

 

With this, you have the striped circle within the stroked circle, with no unneeded parts outside, as pure native AI vector artwork, created right there on the spot as part of the logo.

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jul 10, 2020 Jul 10, 2020

Copy link to clipboard

Copied

Awesome, thank you, was already planning in my head how I would do that - that logo option is one of several the client is choosing from - he said he liked the old Newport cigarettes packaging!  After you and Scott's excellent guidance, I had to go back and review that other logo - I am recreating it from scratch now using what I have learned from you guys but am hopeful that SVG is all good!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jul 10, 2020 Jul 10, 2020

Copy link to clipboard

Copied

grantserafy,

 

The SVG is used for web and similar uses, so very limited as compared to the full AI format,

https://en.wikipedia.org/wiki/Scalable_Vector_Graphics

 

so it should only be used for such purposes in cases where it is preferable to the raster formats PNGs and (animated) GIFs.

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jul 10, 2020 Jul 10, 2020

Copy link to clipboard

Copied

I think I have headed too many soccer balls.....I thought I had the right format down to send to clients but I re-read Scott's previous message and it seems like EPS may be better....here is my EPS image - is this vector?  I assume it is - I guess I am just trying to make sure my logo is in the correct formats to send to clients and that if they need EPS (or SVG in the future) - this one was done correctly and is, in fact, vector - I also have this in PNG and JPG and assume saving it to PDF would not be an issue.....apologies for losing track....I guess when the text comes out as outline instead of black (with Command Y) it confuses me as to whether it is vector and I am not sure how to go in, if it is not, and select the entire word which is not possible, I only can select every letter....and Create Outlines....
Screen Shot 2020-07-10 at 2.43.30 PM.pngScreen Shot 2020-07-10 at 2.39.38 PM.png

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines