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

Quickest way to have numbers with square or ellipse background


Recommended Posts

I have a map and I want to add numbers to the houses.

Ideal each number has an ellipse filled background or stroke

So currently I add an ellipse, then the number and then group those two things (so I can easily move them as one)

But is there a quicker way, e.g. so the text itself can have definable background.

OS 2019.jpg

Link to comment
Share on other sites

Just a quick note to add that with the use of special charters the Numberpile font can potentially go upto 200.
There should be a guid in the Numberpile download showing which characters to use.

macOS 10.15.7  15" Macbook Pro, 2017  |  4 Core i7 3.1GHz CPU  |  Radeon Pro 555 2GB GPU + Integrated Intel HD Graphics 630 1.536GB  |  16GB RAM  |  Wacom Intuos4 M

Link to comment
Share on other sites

22 minutes ago, G13RL said:

Hello, Mr. Lucky,

If you don't need a number greater than 80 you can use a font for this, "Numberpile" for example. This free font is available on several sites, for example here:

https://fontmeme.com/fonts/numberpile-font/
Just put the font in the desired color.

Really nice, and going to be great for others but one small problem for this project is the number remains transparent and I just found I need to use an arial photo, so there is a problem because the background showing through the transparent number is some times not enough contrast

 

On the above map with constant beige houses as background to the number it's great though and I will be doing some of those in the future.

Link to comment
Share on other sites

16 minutes ago, G13RL said:

You can also draw a colored circle and a number, group them together and turn them into a symbol, disable the "Sync" button in the "Symbols" tab of the studio, place the symbols in the desired places and then change the number of each instance.

 

This seems great, but nothing happens when I click on sync so I don't know how to disable it.

 

Also how do I chamnge the number? If I click on it and type 30, it seems to make it transparent 30%

Link to comment
Share on other sites

Nothing visible on the drawing happens when you disable the "Sync" button, but it allows you to change the number of a single instance of the symbols you have placed on the drawing instead of changing them all at once.
To change the number, take the "Text" tool, and select it by passing the cursor over it.

Link to comment
Share on other sites

1 minute ago, G13RL said:

Nothing visible on the drawing happens when you disable the "Sync" button, but it allows you to change the number of a single instance of the symbols you have placed on the drawing instead of changing them all at once.
To change the number, take the "Text" tool, and select it by passing the cursor over it.

No, I don't mean nothing happens on the drawing when I press tyhe sync button, I mean nothing happens on the button to let me know it is on or off.

Link to comment
Share on other sites

2 minutes ago, G13RL said:

It's weird, it's true that the difference is not obvious, especially with the dark interface

The curse of overly subtle Affinity UI elements strikes again!

macOS 10.15.7  15" Macbook Pro, 2017  |  4 Core i7 3.1GHz CPU  |  Radeon Pro 555 2GB GPU + Integrated Intel HD Graphics 630 1.536GB  |  16GB RAM  |  Wacom Intuos4 M

Link to comment
Share on other sites

36 minutes ago, Mr Lucky said:

Aha, I can see a very slight change if I get very close to the screen! Thanks.

Adjusting the gamma setting in your Preferences for the User Interface may help, a little.

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

It looks even better with type 1,2,3,4..., 1,25 mm for left text and 2,3 mm bottom for numbers 1 to 9 and for numbers 10 to 99 left 2,5 mm. Top and right can be left 0 mm. As a hint: Arrow has to placed at the end of the line so you see no leftovers from the line. Plus you need a blank after the number being generated.

I attached a beta file for those who want to experiment themselves.

zahlen.afpub

Edited by Joachim_L

------
Windows 10 | i5-8500 CPU | Intel UHD 630 Graphics | 32 GB RAM | Latest Retail and Beta versions of complete Affinity range installed

Link to comment
Share on other sites

An alternative method would be to create a circle and then convert it to a Text Frame.
By doing this you can change the text easily without having to go ‘inside the group’.
It doesn’t always produce something that looks perfect, depending on various things, but with some tweaking of settings you can get something fairly nice.

Annotation 2020-02-11 100704.png

numbers-with-circle-backgrounds.afpub

Link to comment
Share on other sites

2 hours ago, GarryP said:

An alternative method would be to create a circle and then convert it to a Text Frame.
 

This sounds good, another thing to try. My concern would be they may not all be the same size, ie grow or shrink depending on the size of the number?

Link to comment
Share on other sites

The circular Text Frame stays the same size, unless you manually resize it.
One thing you need to do though is check that all the numbers you want to use can all fit in the same size frame.
E.g. Try a 1, does that look okay? Try an 88, does that look okay? Try a 326, does that look okay?
You might need to tweak some settings – frame size, font size, leading, maybe others - to get them all looking the same before you start using it ‘in anger’ as the ‘circularness’ of the frame sometimes seems to interfere with the text in unexpected ways.

Link to comment
Share on other sites

It's probably not a huge concern, but it's worth remembering that some fonts (mainly those known as "Old Style") treat numeric characters as lower-case, some with descenders and some with ascenders. This can make the individual characters appear not to be vertically aligned, which may look odd on a map: 

274293629_Screenshot2020-02-11at14_16_03.png.cc99057b764577a0b6b281b4b165d3f7.png

All these characters in Bodoni 72 Oldstyle have the same character and paragraph settings, and the circular text frames, as suggested by @GarryP are exactly the same size. Yet 6 and 8, which have 'ascenders', appear higher in their frames than 3, 4, 5, 7 and 9, which haves 'descenders'. Meanwhile 1, 2 and 0, which have neither, look smaller than all the other characters.

Here they are all in a row:

2048899719_Screenshot2020-02-11at14_23_46.png.14497cd4a854b3e1dea8e72e410a54e5.png

(When I did this sort of thing for a living, I always used to find the figure 4 particularly annoying. It never seems to look right, no matter how you align it and no matter what font you choose. :S)

 

Affinity Photo 2.0.3,  Affinity Designer 2.0.3, Affinity Publisher 2.0.3, Mac OSX 13, 2018 MacBook Pro 15" Intel.

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.