Vector icon issue

[Phil Personal Acct]

Hey guys,

I am having problems with vector icons in photoshop. I open a simple icon in Illustrator. I choose "Image trace." The icon then looks great at any scale. I then save that file as an Illustrator file. When I drag it into Photoshop, it becomes pixelated at smaller scale sizes. Can anyone please help me to resolve this? I have tried half a dozen Youtube tutorials, but nothing has solved it. 

Left pic is in illustrator. Right pic in Photoshop.

Any ideas?

[c.pfaffenbichler]

Could you please post a screenshot taken at View > 100% with the pertinent Panels (Toolbar, Layers, Options Bar, …) visible? 

Photoshop is a pixel based image editor. 

While it is possible to work with paths and create path output in a few file formats you are essentially creating a pixel image, so it consisting of pixels should not come as a surprise. 

[Phil Personal Acct]

Noted. Thank you. I was indeed Zoomed in.

Thanks

[jane-e]

@Phil Personal Acct 

If you want to keep it vector, keep it in Illustrator. Photoshop is a raster application.

That being said, I bring objects from Illustrator into Photoshop quite often. Here are some tips that work for me.

• Copy in Illustrator and Paste in Photoshop. There are five options for pasting — try each and see which works best.
• Don't scale in Photoshop. This is procedure I use:
  • After you paste in Photoshop, use Cmd+T for Free Transform and go ahead and Scale. Look in the options bar and remember the percentage. Cancel. Undo the Paste.
  • Return to Illustrator and scale to that percentage. Copy and paste to Photoshop again and this time don't scale.

When you are in Photoshop you need to look at the image at 100% view.

• The image looks great at any zoom level in Illustrator because it's vector.
• In Photoshop you will see the pixels when you zoom in because it's raster.

We can't see your zoom level. If this doesn't work, share a screen shot with everything @c.pfaffenbichler asked for.

Jane

[Conrad C]

---

@Phil Personal Acct wrote:

When I drag it into Photoshop, it becomes pixelated at smaller scale sizes.

---

What are the pixel dimensions (width and height in pixels) of the Photoshop document?

For example, if the web site requires you to create smaller icons at 64 x 64 pixels, then that is not a lot of pixels to draw a curve with. The corner radius at the bottom of the container is only about 6 or 7 pixels. It isn’t possible to draw a smooth curve with only a 6 or 7 pixel radius. But if that’s how small the icon must be on the web page, there’s not much you can do about it.

In the icon you show in Photoshop on the right, the pixelation is visible because you enlarged it greatly. That is probably not the size it will appear on the web page. So here is the real question: Do the smaller size icons look fine at actual size on the web page? They should. Also, compare to icons of the same size on professional websites you have seen. If they both look comparable, then you are doing all you can.

You might also want to be aware of whether your web page project is supposed to support higher scale factors like 2x or 3x, which are used for Retina (macOS/iOS) or HiDPI (Windows/Android) displays. If it is, then you can double the pixel count of your icons for those screens, supplying a 1x (e.g. 64 x 64 px) icon for older displays and 2x (128 x 128 px) icons for Retina/HiDPI displays. The 2x version will show double the resolution on Retina/HiDPI displays.

Another good option, if your web site allows it, is to stay in Illustrator and export as SVG. SVG is a vector format supported in web browsers, so instead of pixels, it uses paths like Illustrator, displaying smoothly at any size.

[Jumpenjax]

Have you tried to copy and paste? You can also save as pdf or eps and open in photoshop.