Photoshop: Extract Assets displays wrong font-size

  • 1
  • Problem
  • Updated 4 years ago
  • (Edited)
I'm trying to implement Adobe Extract on my workflow. This tools seems great so far, except the part where you extract the settings from a text.
When a text is resized in photoshop using the transform tool, which is something really common among the designers, you get the transform property in the exported css, as opposed to the actual font-size.

You guys can check out this issue here:
http://adobe.ly/1shQgAr

The H2 and Paragraph displays the right font-size, because i haven't used the transform tool on those. On another hand, when you check the H1, you will find the font-size: 49.45px; when it's meant to be 65px.

Are there any plans for fixing this issue, since i believe i'm not the first designer to come across this issue? I've seen the same issue on other css extracting tools, but not sure if they have fixed yet.

Looking forward to hear from you guys,

Thanks,
Thales Macedo
Photo of Thales Macedo

Thales Macedo

  • 2 Posts
  • 0 Reply Likes
  • sad

Posted 4 years ago

  • 1
Photo of Bruce Bowman

Bruce Bowman, Employee

  • 2 Posts
  • 0 Reply Likes
Hello Thales Macedo,

This is not a bug in Extract, so we do not have plans to change how it works. We recommend that you do not transform or stretch your text in Photoshop. I know this is a common practice for designers, but it is a bad habit, especially if your PSDs will be used downstream by developers.

One resource that I think is really good is Photoshop Etiquette. It offers some best practices for how to handle text in Photoshop when you intend to hand those PSDs off to someone who will be bringing them to life in code. http://photoshopetiquette.com/#type

I know this wasn't the answer you were hoping for, but hopefully you can see why we have taken this position.

Regards,
Bruce Bowman
Extract product manager
@brucebowman
Photo of Thales Macedo

Thales Macedo

  • 2 Posts
  • 0 Reply Likes
Hi Bruce,
thanks for the reply.

I'd love to have that as this is actually how most of the designers play around with type.

I say that because even in one of the extract example PSDs, if you inspect every single type, you will find that some of them were resized using the transform tool, which confirms what i was saying before that every designer uses the transform tool specially for big headings and more stylised text, at least to get a sense of how big things need to be, and then we can go in there and fix the font-size to be set with whole pixel value. The problem is that once you transformed the text, you can't go back to its original size, unless you create another text layer from scratch.

To me it just seems kind of weird, having to change the way we get things done to suit a specific tool, as opposed to get the tool to suit our needs.

This tool should be able to just pull the value of the font-size box in photoshop. We don't actually need that extra bit of css with the transform, all we need is the font-size that displays on my photoshop interface.

Regards,
Thales Macedo
Photo of Corey Lucier

Corey Lucier, Employee

  • 1 Post
  • 0 Reply Likes
But not necessarily Thales (it seems)...

Imagine a designer used the transform tool to *only* increase the width of a text layer (instead of uniformly scaling). The font size would remain the same in Photoshop, but without us emitting the 'transform' CSS properly the end result would not look like what it does in Photoshop (e.g. stretched on x axis). That's the motivation for why we do what we do currently.

Perhaps some heuristics would be in order.

1. If we know the user scaled the text instance *uniformly* in only width and height directions (no skew, no perspective transform), we emit the scaled font size only.
2. If user scaled in one dimension, say width . We couple with the font size and transform.
3. If the designer scaled while skewing or transforming in non-regular 2D space, we just rasterize the layer (since there would be no real way to mimic the layer exactly with pure CSS.

-Corey