26 posts
  • Has been part of the Envato Community for over 2 years
  • Has collected 1+ items on Envato Market
  • Sells items exclusively on Envato Market
  • Located in Romania
Moldor says

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.

Cheers, Cosmo.

113 posts
  • Has referred 10+ members
  • Has sold $5,000+ on Envato Market
  • Has been a beta tester for an Envato feature
  • Has collected 10+ items on Envato Market
+3 more
DesignDeposit says

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.

Perhaps you are experiencing one of these issues.

26 posts
  • Has been part of the Envato Community for over 2 years
  • Has collected 1+ items on Envato Market
  • Sells items exclusively on Envato Market
  • Located in Romania
Moldor says

Hey Kronen, thanks for the answer.

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 75×25 .. Probably a customer wants it to be 150×100 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..

Hope you understand what I mean.

Cheers, Cosmo.

5944 posts
  • Sells items exclusively on Envato Market
  • Elite Author: Sold more than $75,000 on Envato Market
  • Has sold $125,000+ on Envato Market
  • Has been part of the Envato Community for over 6 years
+8 more
VF says

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!)

26 posts
  • Has been part of the Envato Community for over 2 years
  • Has collected 1+ items on Envato Market
  • Sells items exclusively on Envato Market
  • Located in Romania
Moldor says

Thanks VF!

Unforttunately it doesn’t work.. I wish it would work, I really do ..but it just doesn’t :(..

Anyways, thanks a lot guys, for taking your time to help me, means a lot!

Cheers, Cosmo.

5944 posts
  • Sells items exclusively on Envato Market
  • Elite Author: Sold more than $75,000 on Envato Market
  • Has sold $125,000+ on Envato Market
  • Has been part of the Envato Community for over 6 years
+8 more
VF says

^ While scaling, make sure that the Reference point located at Top-Left too.

243 posts
  • Located in United States
  • Won a Most Wanted contest
  • Won a competition
  • Had an item featured on Envato Market
+5 more
deiby says

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! :)

26 posts
  • Has been part of the Envato Community for over 2 years
  • Has collected 1+ items on Envato Market
  • Sells items exclusively on Envato Market
  • Located in Romania
Moldor says

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!

by
by
by
by
by
by