Jump to content

Recommended Posts

Posted
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.

Alfred spacer.png
Affinity Designer/Photo/Publisher 2 for Windows • Windows 10 Home/Pro
Affinity Designer/Photo/Publisher 2 for iPad • iPadOS 17.5.1 (iPad 7th gen)

Posted (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.

960428487_ScreenShot2018-05-22at15_29_21.thumb.png.4f52b551565cc3126cbbcb8f70c15ef6.png

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 by hannah
wisdom is slow
Posted
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?

Posted
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.)

Posted

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)

Posted

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.

 

-- Walt
Designer, Photo, and Publisher V1 and V2 at latest retail and beta releases
PC:
    Desktop:  Windows 11 Pro 23H2, 64GB memory, AMD Ryzen 9 5900 12-Core @ 3.00 GHz, NVIDIA GeForce RTX 3090 

    Laptop:  Windows 11 Pro 23H2, 32GB memory, Intel Core i7-10750H @ 2.60GHz, Intel UHD Graphics Comet Lake GT2 and NVIDIA GeForce RTX 3070 Laptop GPU.
    Laptop 2: Windows 11 Pro 24H2,  16GB memory, Snapdragon(R) X Elite - X1E80100 - Qualcomm(R) Oryon(TM) 12 Core CPU 4.01 GHz, Qualcomm(R) Adreno(TM) X1-85 GPU
iPad:  iPad Pro M1, 12.9": iPadOS 18.5, Apple Pencil 2, Magic Keyboard 
Mac:  2023 M2 MacBook Air 15", 16GB memory, macOS Sequoia 15.4

Posted
1 minute ago, Oval said:

this and that

 

Your "that" link doesn't seem to lead to the details that you may have intended :)

-- Walt
Designer, Photo, and Publisher V1 and V2 at latest retail and beta releases
PC:
    Desktop:  Windows 11 Pro 23H2, 64GB memory, AMD Ryzen 9 5900 12-Core @ 3.00 GHz, NVIDIA GeForce RTX 3090 

    Laptop:  Windows 11 Pro 23H2, 32GB memory, Intel Core i7-10750H @ 2.60GHz, Intel UHD Graphics Comet Lake GT2 and NVIDIA GeForce RTX 3070 Laptop GPU.
    Laptop 2: Windows 11 Pro 24H2,  16GB memory, Snapdragon(R) X Elite - X1E80100 - Qualcomm(R) Oryon(TM) 12 Core CPU 4.01 GHz, Qualcomm(R) Adreno(TM) X1-85 GPU
iPad:  iPad Pro M1, 12.9": iPadOS 18.5, Apple Pencil 2, Magic Keyboard 
Mac:  2023 M2 MacBook Air 15", 16GB memory, macOS Sequoia 15.4

Posted
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

Alfred spacer.png
Affinity Designer/Photo/Publisher 2 for Windows • Windows 10 Home/Pro
Affinity Designer/Photo/Publisher 2 for iPad • iPadOS 17.5.1 (iPad 7th gen)

Posted
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.

Posted

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.

de2.jpg.2f1a09f1d1d3d440dc95e82f827ab8f6.jpg

de.jpg.96892046c9f045da04c9325e0ee7e5d2.jpg

With this example, I would split the image into top and bottom and put text in the middle.

Windows PCs. Photo and Designer, latest non-beta versions.

Posted
8 minutes ago, αℓƒяє∂ said:

to 15pt

Yes, but hannah needs px. Hopefully hannah used not pt for text. :267_rooster:

Posted
2 minutes ago, toltec said:

visually impaired people who have poor eyesight

lipsrsealed2.gif

Alfred spacer.png
Affinity Designer/Photo/Publisher 2 for Windows • Windows 10 Home/Pro
Affinity Designer/Photo/Publisher 2 for iPad • iPadOS 17.5.1 (iPad 7th gen)

Posted
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).

Alfred spacer.png
Affinity Designer/Photo/Publisher 2 for Windows • Windows 10 Home/Pro
Affinity Designer/Photo/Publisher 2 for iPad • iPadOS 17.5.1 (iPad 7th gen)

Posted

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!

Posted
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.

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

Posted
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 :D

Windows PCs. Photo and Designer, latest non-beta versions.

Posted
8 minutes ago, αℓƒяє∂ said:
11 minutes ago, toltec said:

visually impaired people who have poor eyesight

lipsrsealed2.gif

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.

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

Posted
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! "

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

Alfred spacer.png
Affinity Designer/Photo/Publisher 2 for Windows • Windows 10 Home/Pro
Affinity Designer/Photo/Publisher 2 for iPad • iPadOS 17.5.1 (iPad 7th gen)

Posted
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. 9_9

Just curious ;)

Windows PCs. Photo and Designer, latest non-beta versions.

Posted

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!

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.