Signature with pict under it

[GentleGiantEd]

Need help understanding how to best proceed. Using Affinity Photo. Have an image that is 600 x 600 px at 72 dpi. What is the best way to shrink so it shows up clear to see when I place it on a web page? 

What I did was to write the signature with a font that looks like script then import the persons image (with a circular mask around it that I saved as a png file out of Affinity Photo) and place it below the signature. Problem is its really blurry when I try and use on a webpage. 

Can someone enlighten me as to what I am missing or best way to go about this? Thanks

[firstdefence]

What size are you shrinking it to?

Do you have the file to hand that you can upload or a screenshot?

[GentleGiantEd]

here was my first attempt. 

Signatures.afdesign

[firstdefence]

At 100% in the transform panel the document is 100 x 50px, the image is too small to get any sharpness in the image. Script fonts at small sizes also become illegible. You need to rethink how you are going to apply these images. I would say an acceptable size would be 375 x 220px you need to be able to see a face and read the text without having to squint at the image.

Is this a doable resize? You might get better images downsizing to these larger images. from the original 600 x 600px images

Signatures rethink.afdesign

Ps. I added a circle to go around the images, the lighter one didn't look right without it... IMHO

[Alfred]

7 hours ago, edferrigan said:

Need help understanding how to best proceed. Using Affinity Photo. Have an image that is 600 x 600 px at 72 dpi. What is the best way to shrink so it shows up clear to see when I place it on a web page? 

The best way is not to shrink it nearly so much! Your 600 by 600 originals have been shrunk to just 24 by 24, throwing away a huge amount of information in the process. It’s actually worse than that: the originals were probably 590 px square rather than 600 px, because the shrunken versions are 23.6 by 23.6 px. Fractional pixels are never a good look.

[GentleGiantEd]

So is it best to create the overall image at hi res then in the application where I use it shrink it down? For example, in this case I want my final to be at 100 x 400. Do I create it much larger then scale on the webpage or am I thinking this wrong? My original headshot images are very large. What is the best way to shrink them then use in my signature goal?

[Alfred]

12 minutes ago, edferrigan said:

I want my final to be at 100 x 400

Do you mean 100px wide by 400px high, and are you proposing to add other items into the mix? As @firstdefence has pointed out, your current image size of 100px by 50px is too small for the current content.

[firstdefence]

@edferrigan As Alfred has queried, Width always come before Height, well as long as I've known  so do you actually mean 400 x 100px? 

Signatures 400 x100px.afdesign Well actually 400 x 200px, 100px was just too small for the text and images

An image in your signature? Do you mean on here or for an email, or somewhere else?

 

[Alfred]

15 minutes ago, firstdefence said:

An image in your signature?

I presume we’re still talking about the Barbara and Jacque (?spelling) ‘signatures’ using that script font.

[GentleGiantEd]

Thanks guys I will circle back to this in the next few days I hope. Under some pressure to get some client work done. Sure appreciate your assistance.

Ed

[GentleGiantEd]

Getting back to this. Yes I had the dimensions wrong. Its actually 400 x 100 or 200 as suggested. So what Im not understanding is the best way to set the original? Do I create a large file say 1200 x 400 place my images and text, then export as a png file then shrink in the app? I've always heard in wordpress it's best to import images at the size you want them so it doesn't slow down load times. Ive always had a hard time understanding how to get smaller images to look clear. Appreciate this discussion.

[Alfred]

As noted earlier in this thread, 100px by 50px is much too small but 400px by 200px should be OK. Instead of creating it at a larger size and then shrinking it, just create it at the intended final size.

[GentleGiantEd]

ok will try larger size. Thanks