Creating consistent size of numbers within circles.

[recipesbynora]

Hello,
How can I add the same size number in a circle to multiple photos that have different sizes?
I'm having trouble adding the same size number in a circle on the top left of each of my differently sized images. Is there a way to add this number label so it looks the same size across multiple variously sized images?

This image is 1200 x 1800 - the number looks smaller
the number and circle is 230x221




This image is 1200 x 1033 - the number looks bigger
number and circle is 150 x 144



I would appreciate your help.

Thank you very much!

 

[thebestcpu]

Hi @recipesbynora
It would help to know a few more specifics e.g.
- Are the images to be printed and you want the same size in inches for the dot and number. And the inch scale is set as you have them in your image.
- Did you want the dot and number to be the same size in pixels
- Or did you want them the same size after the images are scaled to a common size on a web page
- Or did you want the dot and number to be a fixed percentage size of the page and if so percentage of page height, width, or the largest/smallest dimension.

You clarity here would help forum members provide the best targeted recommendations.
Just a suggestion
John Wheeler

 

[IamSam]

John, I can answer some of your questions. These images are posted on her webpage.

Note: The four images below are roughly the same size and the numbers and yellow circles are not consistently the same size.



It was suggested by [ Illusion ] that she use a CSS style.

 

[recipesbynora]

Hi @recipesbynora
It would help to know a few more specifics e.g.
- Are the images to be printed and you want the same size in inches for the dot and number. And the inch scale is set as you have them in your image.
- Did you want the dot and number to be the same size in pixels
- Or did you want them the same size after the images are scaled to a common size on a web page
- Or did you want the dot and number to be a fixed percentage size of the page and if so percentage of page height, width, or the largest/smallest dimension.

You clarity here would help forum members provide the best targeted recommendations.
Just a suggestion
John Wheeler

Hi John,

Thank you for pointing that out. I appreciate your response. To answer your questions:

- Are the images to be printed and you want the same size in inches for the dot and number. And the inch scale is set as you have them in your image.
No. The images are posted on my food blog website.

- Did you want the dot and number to be the same size in pixels
I tried doing this (same size dot and number). But my photos have different sizes so every time I add the numbers some of them look bigger and some look smaller.

- Or did you want them the same size after the images are scaled to a common size on a web page
I want the number and dot to be the same size (not really in pixels) on how you look at each picture. I export all my photos to web with a width of 1200 pixels by whatever height.

- Or did you want the dot and number to be a fixed percentage size of the page and if so percentage of page height, width, or the largest/smallest dimension.
Maybe this would work? Fixed percentage meaning the number and dot would adjust to whatever the picture size is? So that when I upload all of the pictures to my blog, the numbers and dots would look the "same" size.

 

[[ iLLuSioN ]]

To me it looks like the order of editing was simply wrong.

Presumably it was cropped first, then the circle with the number was created and then it was resized to a width of 1200px.

So that the circles always have the same size, you should crop first, then reduce the images proportionally to a common width (e.g. 1200px) and as last step create the circle with the number (can be done by action)

I haven't looked at the source code of the page now, but the images on the page are also reduced to a width of 728px. If the page is not set up dynamically, the images could also be reduced to a width of 728px. This reduces the file size and thus also the loading times.

 

[recipesbynora]

John, I can answer some of your questions. These images are posted on her webpage.

Note: The four images below are roughly the same size and the numbers and yellow circles are not consistently the same size.
View attachment 125213
View attachment 125214

It was suggested by [ Illusion ] that she use a CSS style.

Hi Sam,

I appreciate your response and thank you for adding more light to this by posting the pictures as they would look in my blog. The effect that I would want is when you look at the numbers and dots they would all look the "same" size not really pixel-wise but how you look at the pictures.

Thanks again.

 

[recipesbynora]

To me it looks like the order of editing was simply wrong.

Presumably it was cropped first, then the circle with the number was created and then it was resized to a width of 1200px.

So that the circles always have the same size, you should crop first, then reduce the images proportionally to a common width (e.g. 1200px) and as last step create the circle with the number.

I haven't looked at the source code of the page now, but the images on the page are also reduced in width to 728px. If the page is not set up dynamically, the images could also be reduced to a width of 728px. This reduces the file size and thus also the loading times.

Hello,

Thank you for your response. This is how I edit these pictures:

1. Open an ARW file in Photoshop 2022. Let's say this image is 3840 x 4320.
2. Edit the picture and add the number with a yellow dot - I approximate the size
3. Save the image for web as with a width of 1200 pixels x whatever height is proportional to.
4. Upload the optimized image in Wordpress as full size.

Your suggestion might actually work: "reduce the images proportionally to a common width (e.g. 1200px) and as last step create the circle with the number." This will just add a few more steps in the editing process but I sure will try this.

 

[recipesbynora]

To me it looks like the order of editing was simply wrong.

Presumably it was cropped first, then the circle with the number was created and then it was resized to a width of 1200px.

So that the circles always have the same size, you should crop first, then reduce the images proportionally to a common width (e.g. 1200px) and as last step create the circle with the number (can be done by action)

I haven't looked at the source code of the page now, but the images on the page are also reduced to a width of 728px. If the page is not set up dynamically, the images could also be reduced to a width of 728px. This reduces the file size and thus also the loading times.

Hello,

I just tried it and it did not work. I don't know if I'm doing something wrong. I saved the images with a width of 1200 pixels and added the number with dot (I tried adding with a size of 110 x 106 pixels) on both pictures. It looked like this:



The number in the first picture appears smaller compared to the number in the second picture. Is this because the first picture is longer than the second so it gives you this effect even if the number is the same size? Thanks

 

[[ iLLuSioN ]]

Both numbers have the same size but the "2" has a little spur at the bottom. This and the fact, that the number "2" is wider than a thin number like a "1", apparently makes you believe that the numbers are different in size.

Why don't you use an action so you can place the circle on every image on the same position? And is there a reason why you don't use a circle which is round (e.g. 110x110px)

 

[recipesbynora]

Both numbers have the same size but the "2" has a little spur at the bottom. This and the fact, that the number "2" is wider than a thin number like a "1", apparently makes you believe that the numbers are different in size.

Why don't you use an action so you can place the circle on every image on the same position? And is there a reason why you don't use a circle which is round (e.g. 110x110px)

That would work too! How do I create an action that would do that? I wanted to use a circle I don't know why it became an ellipse.

 

[[ iLLuSioN ]]

No time to explain at the moment...

...hope you know how to install & use an action.

 

[thebestcpu]

Hi recipesbynora
I hope the action by @[ iLLuSioN ] does the trick for you yet it is quite possible that what you are seeing has to do with how the browser is displaying you images.
If you browser is displaying the images on the monitor at the same width, then your last approach should make then look the same size.

As an example, when I signed out of PSGurus and looked at your last post, the images were not displayed to the same width and the circles sizes appear different. However, once I sign in and the images are display at the same width, the circles look the same size. Again, this was using your last approach when you were putting the numbers in at a constant size into an image that was already scaled to 1200 pixels wide.

Have you tried posting you images (made with the last approach) on your web site to see how they look?

Here is the example with my browser displaying the images not at the same width:



And here are the same exact two images after I logged in to PSGurus and the images were on my screen at the same width. Circles look the same to me now:



To me, it looks as if you problem is already solved or at least only dependent on how the browser is displaying the images.
Hope this is helpful
John Wheeler

 

[recipesbynora]

No time to explain at the moment...

...hope you know how to install & use an action.

Hello,

This is amazing! thanks for all your help. All the numbers and dots look the same for all my pictures now.

 

[[ iLLuSioN ]]

So nothing needs to be changed in the action?

circle size? position? font? font-size? colors? rounded rectangle instead of circle? etc.

 

[recipesbynora]

So nothing needs to be changed in the action?

circle size? position? font? font-size? colors? rounded rectangle instead of circle? etc.

I created a new action based on the action that you provided. Tweaked the color and size of the circle as well as the font. It worked so well thanks to your idea.

 

[[ iLLuSioN ]]