Alfred Posted May 22, 2018 Share Posted May 22, 2018 5 hours ago, Wosven said: IF you can't avoid having images with text, try to use larger images and “resize” them with CSS, they'll look better. Instead of using CSS to resize a large image, you should make the image available at several different sizes and use CSS media queries to display the most appropriate one for the user’s device. carl123 1 Quote Alfred Affinity Designer/Photo/Publisher 2 for Windows • Windows 10 Home/Pro Affinity Designer/Photo/Publisher 2 for iPad • iPadOS 17.4.1 (iPad 7th gen) Link to comment Share on other sites More sharing options...
hannah Posted May 22, 2018 Author Share Posted May 22, 2018 (edited) no panic, I never intended to make a "picture" website, it was a thought-experiment to "prove" that (whatever the code and power behind may be), finally you see everything through your screen, and there you see pixels in different colours. Because I have to use the glorious Jimdo-app, I thought I can't pull mouse-over-picture-text off using only css. I could finally, so that's that. I used slightly bigger images, to enhance visual quality for retina-users, but thanks to css-filters I could avoid having to load a second picture for every mouse-over-effect concerning the image. so that was a win-win for me. (thanks again to this forum, that motivated me to find a sleek solution) For people, who come across this later : I was searching for a way to get sharper text-representation in AfP. Where there seem to be no way to alter the anti-aliasing, I could improve my results like this: 1. turn force-pixel-alignment and move-by-whole-pixels OFF 2. Write a "zZ" with Artistic Text Tool 3. Move text around until the baseline is very crisp 4. adjust size (using the top right or left transform-corner) until the top of the "zZ" is also crisp, especially the median-line (top of lower z) 5. See if slightly different letter-spacing (called Tracking in AfP), even some kerning improves what you see. 6. turn force-pixel-alignment and move-by-whole-pixels ON again and write your text. You should be able to move it, keeping the appearance. It's not a different world, but it's an improvement (left: randomly written text / right: adjusted text). EDIT : Thanks to the people here I learned to use x-height sizing for fonts (like "14px/x") and customize Blend-Ranges for layers (Blend Gamma and Coverage Map). (See further down in this topic). Good AfP, good AfP Edited May 22, 2018 by hannah wisdom is slow Quote Link to comment Share on other sites More sharing options...
Oval Posted May 22, 2018 Share Posted May 22, 2018 35 minutes ago, hannah said: Where there seem to be no way to alter the anti-aliasing, I could improve my results like this “Hahahaha”, not really the quickest way. Why no use of the suggested x-height? And ignoring the resampling method? And the blend gamma slider? Quote Link to comment Share on other sites More sharing options...
hannah Posted May 22, 2018 Author Share Posted May 22, 2018 14 minutes ago, Oval said: suggested x-height I missed that! Could you tell me what you mean by x-height? Do you mean adjusting x and y coordinates and height and width via the transform panel? (didn't improve results for me) And what's the blend gamma slider?? (couldn't find anything when searching the help-menu). thanks! (I am not ignoring resampling, but it comes later.) Oval 1 Quote Link to comment Share on other sites More sharing options...
hannah Posted May 22, 2018 Author Share Posted May 22, 2018 lol ohhhno, don't laugh, speak! (i know what "x-height" means, just don't understand/see how it helps here, so i think you must mean something font-related, and there is where i am lost) Quote Link to comment Share on other sites More sharing options...
Oval Posted May 22, 2018 Share Posted May 22, 2018 8 minutes ago, hannah said: what you mean by x-height? this and that HTH and sorry, not everyone has so much time Quote Link to comment Share on other sites More sharing options...
walt.farrell Posted May 22, 2018 Share Posted May 22, 2018 I suspect that you may get your best results with Force Pixel Alignment ON and Move By Whole Pixels OFF, based on other recommendations in these forums. But I haven't tried that for your situation myself. Quote -- Walt Designer, Photo, and Publisher V1 and V2 at latest retail and beta releases PC: Desktop: Windows 11 Pro, version 23H2, 64GB memory, AMD Ryzen 9 5900 12-Core @ 3.00 GHz, NVIDIA GeForce RTX 3090 Laptop: Windows 11 Pro, version 23H2, 32GB memory, Intel Core i7-10750H @ 2.60GHz, Intel UHD Graphics Comet Lake GT2 and NVIDIA GeForce RTX 3070 Laptop GPU. iPad: iPad Pro M1, 12.9": iPadOS 17.4.1, Apple Pencil 2, Magic Keyboard Mac: 2023 M2 MacBook Air 15", 16GB memory, macOS Sonoma 14.4.1 Link to comment Share on other sites More sharing options...
walt.farrell Posted May 22, 2018 Share Posted May 22, 2018 1 minute ago, Oval said: this and that Your "that" link doesn't seem to lead to the details that you may have intended Quote -- Walt Designer, Photo, and Publisher V1 and V2 at latest retail and beta releases PC: Desktop: Windows 11 Pro, version 23H2, 64GB memory, AMD Ryzen 9 5900 12-Core @ 3.00 GHz, NVIDIA GeForce RTX 3090 Laptop: Windows 11 Pro, version 23H2, 32GB memory, Intel Core i7-10750H @ 2.60GHz, Intel UHD Graphics Comet Lake GT2 and NVIDIA GeForce RTX 3070 Laptop GPU. iPad: iPad Pro M1, 12.9": iPadOS 17.4.1, Apple Pencil 2, Magic Keyboard Mac: 2023 M2 MacBook Air 15", 16GB memory, macOS Sonoma 14.4.1 Link to comment Share on other sites More sharing options...
Alfred Posted May 22, 2018 Share Posted May 22, 2018 9 minutes ago, hannah said: And what's the blend gamma slider?? (couldn't find anything when searching the help-menu). Affinity Photo Help: Layer blend ranges hannah 1 Quote Alfred Affinity Designer/Photo/Publisher 2 for Windows • Windows 10 Home/Pro Affinity Designer/Photo/Publisher 2 for iPad • iPadOS 17.4.1 (iPad 7th gen) Link to comment Share on other sites More sharing options...
Oval Posted May 22, 2018 Share Posted May 22, 2018 Your "that" link doesn't seem to lead to the details that you may have intended For all who don’t want to read the whole “manual” hannah 1 Quote Link to comment Share on other sites More sharing options...
hannah Posted May 22, 2018 Author Share Posted May 22, 2018 6 hours ago, Oval said: Nope! Simply use 15/x. ah, I did see it. maybe my brain is blocked, but that just doesn't explain anything for me. I might find out later. However, thanks @Oval for your time. Quote Link to comment Share on other sites More sharing options...
Alfred Posted May 22, 2018 Share Posted May 22, 2018 1 minute ago, Oval said: For all who don’t want to read the whole “manual” TL;DR: The expression 15pt / x sets the x-height of the text to 15pt. Quote Alfred Affinity Designer/Photo/Publisher 2 for Windows • Windows 10 Home/Pro Affinity Designer/Photo/Publisher 2 for iPad • iPadOS 17.4.1 (iPad 7th gen) Link to comment Share on other sites More sharing options...
toltec Posted May 22, 2018 Share Posted May 22, 2018 The trouble is @hannah you have no control over the viewing device or browser, so there is no guarantee that text in your image will display in a readable manner. What is more, is is not uncommon for people to browse with images turned off. I also do work for a charity that deals with visually impaired people who have poor eyesight and use text readers. At the end of the day, good web design really comes down to using text. With this example, I would split the image into top and bottom and put text in the middle. R C-R 1 Quote Windows PCs. Photo and Designer, latest non-beta versions. Link to comment Share on other sites More sharing options...
Oval Posted May 22, 2018 Share Posted May 22, 2018 8 minutes ago, αℓƒяє∂ said: to 15pt Yes, but hannah needs px. Hopefully hannah used not pt for text. Quote Link to comment Share on other sites More sharing options...
Alfred Posted May 22, 2018 Share Posted May 22, 2018 2 minutes ago, toltec said: visually impaired people who have poor eyesight Oval 1 Quote Alfred Affinity Designer/Photo/Publisher 2 for Windows • Windows 10 Home/Pro Affinity Designer/Photo/Publisher 2 for iPad • iPadOS 17.4.1 (iPad 7th gen) Link to comment Share on other sites More sharing options...
Alfred Posted May 22, 2018 Share Posted May 22, 2018 1 minute ago, Oval said: Yes, but we need px. Hopefully hannah used not pt for text. Of course, but you can specify whatever units you want (or, presumably, do as you did in your original example and omit the units so that the document units are used by default). Quote Alfred Affinity Designer/Photo/Publisher 2 for Windows • Windows 10 Home/Pro Affinity Designer/Photo/Publisher 2 for iPad • iPadOS 17.4.1 (iPad 7th gen) Link to comment Share on other sites More sharing options...
hannah Posted May 22, 2018 Author Share Posted May 22, 2018 AHHHHHH, nice!!!! didn't know that i can set the x-height of the font like that (you have to use the character-panel, not the transform panel). great! Seems I have reached todays THANKS-award-limit, but I'll do tomorrow. great! Oval 1 Quote Link to comment Share on other sites More sharing options...
R C-R Posted May 22, 2018 Share Posted May 22, 2018 19 minutes ago, hannah said: (i know what "x-height" means, just don't understand/see how it helps here, so i think you must mean something font-related, and there is where i am lost) It is definitely font related. See for example https://en.wikipedia.org/wiki/X-height. "x-height" (sometimes also written as "xheight") is one of several terms with a specific meaning in typography. It is not the same thing as the X value in the Transform panel & elsewhere in the UI. 10 minutes ago, toltec said: The trouble is @hannah you have no control over the viewing device or browser, so there is no guarantee that text in your image will display in a readable manner. In practical terms this means you can waste a lot of time trying to tweak the sharpness of text in an image with little or no benefit to anybody. Quote All 3 1.10.8, & all 3 V2.4.2 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 More sharing options...
Oval Posted May 22, 2018 Share Posted May 22, 2018 23 minutes ago, hannah said: you have to use the character-panel No, you also can use the context toolbar. Quote Link to comment Share on other sites More sharing options...
toltec Posted May 22, 2018 Share Posted May 22, 2018 1 minute ago, R C-R said: II practical terms this means you can waste a lot of time trying to tweak the sharpness of text in an image with little or no benefit to anybody. Er, yes. Exactly. I was being polite Quote Windows PCs. Photo and Designer, latest non-beta versions. Link to comment Share on other sites More sharing options...
R C-R Posted May 22, 2018 Share Posted May 22, 2018 8 minutes ago, αℓƒяє∂ said: 11 minutes ago, toltec said: visually impaired people who have poor eyesight FWIW, it is possible to be visually impaired without having physically poor eyesight, so this is not as meaningless a distinction as it might seem. Quote All 3 1.10.8, & all 3 V2.4.2 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 More sharing options...
hannah Posted May 22, 2018 Author Share Posted May 22, 2018 8 minutes ago, toltec said: good web design really comes down to using text. hahaha, yeah! reminds me of my programming-teacher : " code it or die! " Quote Link to comment Share on other sites More sharing options...
Alfred Posted May 22, 2018 Share Posted May 22, 2018 1 minute ago, R C-R said: FWIW, it is possible to be visually impaired without having physically poor eyesight, so this is not as meaningless a distinction as it might seem. Perhaps, but since it’s impossible to have physically poor eyesight without also being visually impaired it’s still tautological! Quote Alfred Affinity Designer/Photo/Publisher 2 for Windows • Windows 10 Home/Pro Affinity Designer/Photo/Publisher 2 for iPad • iPadOS 17.4.1 (iPad 7th gen) Link to comment Share on other sites More sharing options...
toltec Posted May 22, 2018 Share Posted May 22, 2018 10 minutes ago, αℓƒяє∂ said: Perhaps, but since it’s impossible to have physically poor eyesight without also being visually impaired it’s still tautological! Would calling someone a nitpicking pedantic be tautological ? Not that I would. Just curious Alfred 1 Quote Windows PCs. Photo and Designer, latest non-beta versions. Link to comment Share on other sites More sharing options...
hannah Posted May 22, 2018 Author Share Posted May 22, 2018 you guys are incredible! and yessss, @αℓƒяє∂ and @Oval, Layer blend ranges!!!! Whaaam, x-height-font-sizing and this magic was exactly what I was looking for in the first place! Alfred 1 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.