Good day/night/morning folks!
I’m writing this because I’m in a big problem, a huge one, i’d say!
So, I am about to release a web ui pack and I’d love to have my customers giving great feedback while enjoying a great and ‘flexible’ product.
I have done everything, literally everything to help them build their own “things” and start being craftmen, by following my guides… But all of this could’ve been avoided if I knew how to make Vector Shapes while keeping them Pixel Perfect in Photoshop.
I was trying to make a rounded rectangles with the radius of 2-3px (So it’s not that curvy.) after “drawing” in, I left it with its vector mask on, didn’t rasterize it…!
It looked perfect, it was exactly what I needed! But after resizing…it just started to get “pixelated” Layer Styles (Especially the stroke) started to go wrong and everything fell down… I’d love to make my buttons in a way that my customers can resize and “play” with them at anytime they want…
I literally browsed the whole internet, but couldn’t find an explantation.
I think that Illustrator will be the only way, if so…then tell me 'cause I know what I will spend my money on !
Thanks a lot for your time, hope that this wall of text will be enough to find an answer.
I don’t think you can compensate for everything when enlarging/shrinking even for vector objects. The new size might land on a half-pixel for example and you will get blurry edges.
Also Layer Styles do not scale by default. If you shrink a 300px circle with a 10px stroke down to a 30px circle, it will still have a 10px stroke. You can scale the Layer Styles afterwards though.
Additionally if you have vector shapes inside a Smart Object, they will also not scale, they will behave like raster shapes. You need to scale the shapes inside the Smart Object itself.
But no, the only problem I am facing is that no matter what I do with a Layer (Rasterize in, Transform it into a Smart Object, leaving its Vector Mask on) it doesn’t do very well when I resize it… So let’s say I have a contact button which is 75x25 … Probably a customer wants it to be 150x100 or …whatever… There’s the problem… When I resize it, it loses it’s shape (It starts to have low opacity lines on its borders … It’x ‘pixelated’ and not pixel perfect like it used to be before resizing…) no matter what I do, I just can’t get that ‘vector shape’ which can be resizeable to a decent amount and still keep its shape…
I faced similar problems and able to solve it by following this, but not sure exactly this is the issue you are facing:
Sometimes, smart objects and vector shapes will be translated (positioned) in fraction values. Just alter the x,y positions into integer. To do so, Free Transform and first change the reference point location into Top-Left. Now see if the position values are fraction or integer and correct it if needed. (this can’t be done through Action!)
The elements aren't aligned on the pixel grid after resize, they are between pixels like the others said. This causes the anti aliasing.
You simply need to realign them on the pixel grid which you can do in a number of ways. You can move the vector/anchor points, use snap to guides/grid, transform + nudge while zoomed in, edit the x/y while transformed, etc etc.
Example image. Max zoom with pixel grid on. Top two shapes are on the grid and perfect, lower two are between pixels and anti aliased.
You can make pixel perfect designs but you can't really prevent someone else from messing it up! :)
The elements aren't aligned on the pixel grid after resize, they are between pixels like the others said. This causes the anti aliasing.
You simply need to realign them on the pixel grid which you can do in a number of ways. You can move the vector/anchor points, use snap to guides/grid, transform + nudge while zoomed in, edit the x/y while transformed, etc etc.
Example image. Max zoom with pixel grid on. Top two shapes are on the grid and perfect, lower two are between pixels and anti aliased.
You can make pixel perfect designs but you can't really prevent someone else from messing it up! :)
Oh my god !
I used the grid to resize it…Anddd baaang!
Pixel Perfect Elements which keep their shape even after they’re resized… Thanks a lot, thanks a lot!!
If there was a way to thank you enough for this… I would go that way…Thanks a lot!
