How to Match Font Size from Photoshop to Altia Design

If you use PhotoProto to create a Text object (used for dynamic text), then you might have noticed that while PhotoProto matched the font, the sizes between Photoshop and Altia Design may not match up. Below is an explanation of causes and solutions.

Photoshop has a dpi setting, as does Altia. Altia uses the system standard setting of 96 dpi to render point-size, while a psd file can be set to any dpi within the "Image -> Image Size..." dialog. For example, Altia is always defaulted to 96, but if your psd file is set to something else, like 133 dpi, then this will cause the font size mismatch.

In addition to matching dpi between Photoshop and Altia Design, also ensure that you are using Point sizes for your fonts, not Pixel sizes. Please do the following to ensure point size and dpi is configured properly:

In Photoshop, make sure to have "Edit->Preferences->Units & Rulers->Type" set to "Points" and make sure the that psd file's dpi/resolution value is set to 96 dpi (the usual Windows default and also what Altia uses), not 72 or some other value.

When you change the DPI in PhotoShop, make sure to uncheck the checkbox that says "Resample" before changing the DPI within Photoshop's Image Size dialog. This will prevent Photoshop from trying to be "smart" and scaling your graphics in any way (scaling up or scaling down). They should appear/be the same size on your screen, and be the same quality regardless of DPI setting. (For example, if it was 800x480 to begin with, ensure your Photoshop canvas size is still 800x480 after changing the DPI.

In Altia, ensure your Text I/Os are using Point sizes. This is the default if you set the font from the Font box in the Altia Design Home ribbon.

Matching up these settings should match up the font sizes between the 2 tools. Keep in mind, however, if you still see differences, that Photoshop can "invent" ways to display text, changing spaces between chars, affecting the anti-aliasing methods, etc. Altia renders the characters accurately to how the font specifies, but does not know how to match the "invented" appearance of text that Photoshop is able to create.

Still seeing differences?

If you have done everything above, have noted/ignored the "invented" appearances Photoshop can create, and still see a font size difference, then it's possible you have a text layer or layer group with a transform (like a scale) applied to it. This will cause the PhotoProto script to try to calculate the size of the text based on one or more transforms. It is best not to do this. Instead, delete the text layer and layer group, make a new text layer fresh with the font/color/string you just deleted, and group it into a fresh/untouched new layer group. Rename the layer group "text sameasdeletedname" and you will have recreated the text object without any offending transforms. You may have to change the point size to match your design, since the scale transform may have made it larger or smaller on screen.

Are you seeing the text shifted up/down from where it was in Photoshop?

Unfortunately, the position-shifting behavior that occurs occasionally is a result of Adobe Photoshop, not Altia PhotoProto. The scripting core that is called the Photoshop DOM provides details about layers, such as their type, position, etc. However, Photoshop keeps changing how they report the attributes of Text layers, so when PhotoProto attempts to use the info to make a Text I/O object, often the vertical position is reported to PhotoProto incorrectly by Photoshop.

There are two easy workarounds for this:

1) Create a text "guide" layer that will output images of the text as well as the actual text. This makes it easy to re-align the Text I/O with the guide image in Altia Design, and then delete the guide image. I usually make the guide text red-tinted and about 50% opacity, so it's easy to see where the "real text" (the Text I/O) should be positioned.


2) Measure the vertical distance of the baseline of the text in Photoshop, and replicate that distance in Altia Design. In later versions of Photoshop you can just hold Ctrl and hover over the layer with your mouse (as shown with the pink guide lines below). In older versions, just use the Mask rectangle to select the height, and press F8 to see the height of the Mask rectangle in the Info palette. NOTE: This method does not require the extra layer to be a guide layer.

 

Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.