Jump to content
You must now use your email address to sign in [click for more info] ×

Scaling group of elemen and artistic text to pixel


Recommended Posts

I had a look whether this topic has been previously discussed, but found nothing to that precise issue, so here's my question.

What I do: I make a rectangular shape, then add artistic text within the bound of that shape's size. Shape starts with a size to a round pixel. I select both (or group them, there's no difference) and when I scale down, the size gets non-rounded values. I have whole pixel alignment and snapping selected. If I delete the text, the box keeps that weird behaviour - something that doesn't happen if there was no text in the first place.

I realise that the text might be the culprit but still, it means that whole pixels don't matter when resizing groups. Why is that so?

I attach an animation to make this clearer.

20180115_170352.gif

Link to comment
Share on other sites

Ha! Moooment.

Now, just for keeping it easier for me (because of habit) I did switch off the automatic aspect ratio and need to keep Shift in order to scale with ratio and suddenly the problem is not there. Now, it appear like the default causes it but the special case (when one has to keep Shift pressed) doesn't.

P.S. In fact, even if I don't keep Shift pressed and the aspect ratio, it still scales to round pixels.

Link to comment
Share on other sites

I'm afraid it isn't. You can try to reproduce it. Regardless what the setting in Tools, whenever I try to scale by constraining aspect ratio, it still sclaes proportionally but occasionally it is to a non-whole pixel value. Maybe I'm too stupid to figure out how to avoid it, but that's what happens. I don't even need text inside.

Try this: Force pixel alignment, snapping to pixel, all the bells. Then make a rectangle (not a square). So far so good - the size shows whole pixel values. Then, select it, keep Shift (if the setting in Tools is to non automatic, or otherwise without, if it scales proportionally by default) and see how it scales proportionally but still adds a comma and a value to the pixel size.

 

P.S. Wait. Now I think I get it. The attempt to constrain, forces it to break the full pixel rule. This means that full pixels don't work with aspect ratio.

Link to comment
Share on other sites

43 minutes ago, MEB said:

This is indeed related with the aspect ratio. If you press shift to keep the ratio then we can't keep the pixel alignment in one of the dimensions.

But you can round them! This will be the point and especially for UI design I can't imagine this to work any other way.

Link to comment
Share on other sites

Maybe I am missing something, but for UI design or anything else, how can "Force Pixel Alignment" possibly have a universal, unambiguous meaning independent of context?

 

Consider text for example. What exactly should be forced into pixel alignment, & relative to what? The text baseline, the cap height, the bounding box, or something else? Unless you are working with a font specifically designed so that each pixel of each character exactly & completely fills a pixel boundary, and nothing like scaling or leading is adjusted to move anything off of a pixel boundary, how can the text be fully pixel aligned? Or what about a rounded rectangle, commonly used for UI buttons, or any vector shape whose path is anything other than 100% rectilinear?

 

Exporting any of these things to a raster format has to have antialiasing applied to look half way decent, & even if it isn't browsers may display them at some other resolution that is antialiased anyway.

All 3 1.10.8, & all 3 V2.4.1 Mac apps; 2020 iMac 27"; 3.8GHz i7, Radeon Pro 5700, 32GB RAM; macOS 10.15.7
Affinity Photo 
1.10.8; Affinity Designer 1.108; & all 3 V2 apps for iPad; 6th Generation iPad 32 GB; Apple Pencil; iPadOS 15.7

Link to comment
Share on other sites

You might be right in some of those cases, but I had to export banners (not UI, I know) these days, and when scaling the bounding box with all that's inside, I have to come to a concrete pixel value by specification.

P.S. And it's not even important what use there may be if I set the setting to pixel perfect and get anything but. Then the whole setting makes no sense.

Link to comment
Share on other sites

So, for the sake a scroll wheel notch you can scale the object to the desired approximate dimensions and then mouse over the number.{whatever} and move the scroll wheel up or down to your desired perfect pixel dimension?

5a5e352bcadf9_Altersize.thumb.gif.68f398a6312e136239bbf93557caddde.gif

 

iMac 27" 2019 Somona 14.3.1, iMac 27" Affinity Designer, Photo & Publisher V1 & V2, Adobe, Inkscape, Vectorstyler, Blender, C4D, Sketchup + more... XP-Pen Artist-22E, - iPad Pro 12.9  
B| (Please refrain from licking the screen while using this forum)

Affinity Help - Affinity Desktop Tutorials - Feedback - FAQ - most asked questions

Link to comment
Share on other sites

4 hours ago, datorhaexa said:

P.S. And it's not even important what use there may be if I set the setting to pixel perfect and get anything but. Then the whole setting makes no sense.

That is probably why there is no option or setting named "pixel perfect." ;)

 

But seriously, it should be obvious that only in a few special cases can everything be pixel-aligned without something changing, & that the app cannot anticipate what a user would not want to change. After all, Affinity Designer's primarily focus is the creation & manipulation of resolution independent vector objects, not pixel-based bitmaps. Like text, vector objects are not confined to rectilinear shapes perfectly aligned with the canvas; they can be of any arbitrary shape, rotated to any arbitrary angle with respect to the canvas. They can have strokes aligned to the center, outer, or inner edge of the vector's path or have no stroke at all. Stroke width can be set to an even, odd, or fractional number of pixels over the entire extent of the path or to variable widths on different parts of it. End caps & joins can be rounded or beveled. Any of these things can make it impossible for the vector object to be perfectly pixel aligned.

 

Beyond that, the correspondence between a document pixel & what a printer outputs is not exact & depends in part on the type of printer & the print driver.

All 3 1.10.8, & all 3 V2.4.1 Mac apps; 2020 iMac 27"; 3.8GHz i7, Radeon Pro 5700, 32GB RAM; macOS 10.15.7
Affinity Photo 
1.10.8; Affinity Designer 1.108; & all 3 V2 apps for iPad; 6th Generation iPad 32 GB; Apple Pencil; iPadOS 15.7

Link to comment
Share on other sites

10 minutes ago, R C-R said:

But seriously, it should be obvious that only in a few special cases can everything be pixel-aligned without something changing...

This happens to be a default with Fireworks which works with vectors as well, and since I've been using it for ages and find it superb, I am trying to at least cover the basics with AD. And the ability to rely on pixel values for graphics for the web is one such basic. I guess others might use it for other stuff and that's fine. I don't need to be convinced in one way of seeing things or another, or need an explanation for what vectors are (I've done graphics with Xara in 1998). I seek solutions to concrete problems. That's all.

Link to comment
Share on other sites

1 hour ago, datorhaexa said:

And the ability to rely on pixel values for graphics for the web is one such basic.

Why? It has been many years since I have used any web browser that did not provide some sort of rescaling and/or re-rendering feature that (pardon the pun) blurred the difference between so-called "actual size" pixel resolution & displayed resolution.

 

For that matter, Safari on Macs now allows one to 'zoom' in or out the entire window, or alternately just to make the text content of the page larger or smaller. A new feature allows users to preset zoom level on a site-by-site basis. And for years there have been various other ways to alter how a web page is displayed by a client app, like using custom CSS's or restricting fonts to some minimum size, to say nothing of extensions that can alter how (or if) web page elements are displayed in dozens of different ways.

 

So really, these days is there anything that can actually be considered 'basic' about pixel values for graphics intended for use on web pages?

All 3 1.10.8, & all 3 V2.4.1 Mac apps; 2020 iMac 27"; 3.8GHz i7, Radeon Pro 5700, 32GB RAM; macOS 10.15.7
Affinity Photo 
1.10.8; Affinity Designer 1.108; & all 3 V2 apps for iPad; 6th Generation iPad 32 GB; Apple Pencil; iPadOS 15.7

Link to comment
Share on other sites

12 hours ago, R C-R said:

Why? It has been many years since I have used any web browser that did not provide some sort of rescaling and/or re-rendering feature that (pardon the pun) blurred the difference between so-called "actual size" pixel resolution & displayed resolution.

 

For that matter, Safari on Macs now allows one to 'zoom' in or out the entire window, or alternately just to make the text content of the page larger or smaller. A new feature allows users to preset zoom level on a site-by-site basis. And for years there have been various other ways to alter how a web page is displayed by a client app, like using custom CSS's or restricting fonts to some minimum size, to say nothing of extensions that can alter how (or if) web page elements are displayed in dozens of different ways.

 

So really, these days is there anything that can actually be considered 'basic' about pixel values for graphics intended for use on web pages?

It's nice you have the time to discuss what browsers can and can't do. I came here to ask a simple, concrete question. I'm not sure what this whole tirade here is about.

Link to comment
Share on other sites

What tirade? I am just trying to understand why you consider forcing everything to whole pixel values so important for use in web page graphics. As for your question, it has no simple answer because there is no way to force everything to whole pixel values unless you forego anti-aliasing. Is that what you want to do?

All 3 1.10.8, & all 3 V2.4.1 Mac apps; 2020 iMac 27"; 3.8GHz i7, Radeon Pro 5700, 32GB RAM; macOS 10.15.7
Affinity Photo 
1.10.8; Affinity Designer 1.108; & all 3 V2 apps for iPad; 6th Generation iPad 32 GB; Apple Pencil; iPadOS 15.7

Link to comment
Share on other sites

  • Staff
16 hours ago, R C-R said:

 After all, Affinity Designer's primarily focus is the creation & manipulation of resolution independent vector objects, not pixel-based bitmaps. Like text, vector objects are not confined to rectilinear shapes perfectly aligned with the canvas; they can be of any arbitrary shape, rotated to any arbitrary angle with respect to the canvas. They can have strokes aligned to the center, outer, or inner edge of the vector's path or have no stroke at all. Stroke width can be set to an even, odd, or fractional number of pixels over the entire extent of the path or to variable widths on different parts of it. End caps & joins can be rounded or beveled. Any of these things can make it impossible for the vector object to be perfectly pixel aligned.

 

Not necessarily. Affinity can be used for producing both vector and raster output and has tools/features specifically for help working/optimising vector objects for bitmap output. Although vector objects are not confined "to rectilinear shapes perfectly aligned with the canvas" they can and should be aligned (with the pixel grid) if the output is intended to be seen on a screen (web/GUI) particularly small elements as they will appear more sharp and polished - both bitmaps and vector elements (SVG icons for example - despite being scalable they can still appear blurry if not aligned). Parts/sections that are not vertical/horizontal aligned (diagonal lines) can still be optimised through the choice of appropriate angles when possible or coverage maps/blend gamma adjustments and curve antialiasing can be controlled through carefully node placement (half-pixels). Small elements like logos and icons can be optimised manually through node placement and other techniques. Although these optimisations don't make everything fit a squared pixel grid because there's angled/round elements involved they improve the visual quality considerably.

 

 

14 hours ago, R C-R said:

Why? It has been many years since I have used any web browser that did not provide some sort of rescaling and/or re-rendering feature that (pardon the pun) blurred the difference between so-called "actual size" pixel resolution & displayed resolution.

 

For that matter, Safari on Macs now allows one to 'zoom' in or out the entire window, or alternately just to make the text content of the page larger or smaller. A new feature allows users to preset zoom level on a site-by-site basis. And for years there have been various other ways to alter how a web page is displayed by a client app, like using custom CSS's or restricting fonts to some minimum size, to say nothing of extensions that can alter how (or if) web page elements are displayed in dozens of different ways.

 

Browser scaling/resampling doesn't solve all problems. Besides visual quality degradation (in particular for small elements), are you serving single images (HiDPI or not) to all devices on your webpages? Ratio quality-size also (still) matters.

Zooming on an webpage to see details/read text or forcing a larger font size is sign of poor web design. These are tools to overcome page design limitations (or help overcome disabilities) not solutions/practises to follow. Fixed-width websites are being deprecated in favour of responsive web design where breakpoints should be used to make the layouts adapt to the device that's being used. If the page is well designed the user should not have to rely on these settings/options to see/use it.

Link to comment
Share on other sites

1 hour ago, R C-R said:

What tirade? I am just trying to understand why you consider forcing everything to whole pixel values so important for use in web page graphics. As for your question, it has no simple answer because there is no way to force everything to whole pixel values unless you forego anti-aliasing. Is that what you want to do?

The following is an anti-aliased graphic of an orange circle. In pixel size. Unlike me, @MEB had the time to answer all other questions. But mine, alas. That's a different story.

circle.png

Link to comment
Share on other sites

  • Staff

Hi datorhaexa,

I though i have replied to your question... Apart from the specific cases discussed in the thread i linked above which must be brought to the dev team (which decides on what to implement or not) what have i missed? Depending on the settings you have set in the Preferences, pressing shift will keep the ratio of the rectangle - if Force Pixel Alignment is checked one of the dimensions may end up with non-integer values - but that's expected if you want to keep the ratio. Rounding the value to force integer values, at the cost of a small distortion is something that the dev team will have to decide to implement or not.

Link to comment
Share on other sites

3 minutes ago, MEB said:

Hi datorhaexa,

I though i have replied to your question... Apart from the specific cases discussed in the thread i linked above which must be brought to the dev team (which decides on what to implement or not) what have i missed?

No no, you answered my question as far as the state of things is. This is not the solution but I understand that it's all you can tell me and do. Thanks.

Link to comment
Share on other sites

Just now, MEB said:

Ah ok. Sorry. Seems i misunderstood your post above :$

No, I was a bit annoyed at the thread going in a general educational direction (in itself not a bad thing but there should be different places for that) and perhaps didn't express myself clearly. I still think that this constrained resize -> non-pixel size values is something that could be dealt with because general resize snaps well to pixel values without any negative outcomes. But who knows..

For now, as tedious as it is, I'll have to go and correct sizes after a constrained resize.

Link to comment
Share on other sites

1 hour ago, MEB said:

Zooming on an webpage to see details/read text or forcing a larger font size is sign of poor web design.

No disrespect intended, but I could not disagree more with that. The hallmark of a well designed web page is it is accessible to almost everyone, on almost any device, whether they have access to a high speed internet connection or a glacially slow one. Modern browsers provide a plethora of features for that express purpose, like text-only enlargement, zooming and re-rendering, not rendering some elements at all or displaying alternate text-only tags (if the page designer provides them), access to language translation capabilities, rollover speech for the visually impaired, & much more.

 

They are not provided to mitigate poor web page design but to enable the best possible design current & evolving technology allows.

All 3 1.10.8, & all 3 V2.4.1 Mac apps; 2020 iMac 27"; 3.8GHz i7, Radeon Pro 5700, 32GB RAM; macOS 10.15.7
Affinity Photo 
1.10.8; Affinity Designer 1.108; & all 3 V2 apps for iPad; 6th Generation iPad 32 GB; Apple Pencil; iPadOS 15.7

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.