Copy link to clipboard
Copied
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?
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
Noted. Thank you. I was indeed Zoomed in.
Thanks
Copy link to clipboard
Copied
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.
When you are in Photoshop you need to look at the image at 100% view.
We can't see your zoom level. If this doesn't work, share a screen shot with everything @c.pfaffenbichler asked for.
Jane
Copy link to clipboard
Copied
@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.
Copy link to clipboard
Copied
Have you tried to copy and paste? You can also save as pdf or eps and open in photoshop.