¿Photoshop también extrae HTML? ¿O solo CSS?

Soy nuevo en la versión más reciente de Photoshop, tiene una característica interesante que descubrí donde toma el CSS de su diseño y copia/pega la cosa en un editor.

Sin embargo, ¿dónde organizaría el HTML para ello? ¿Cuál es la mejor manera de solucionar esto rápidamente? ¿Hay tutoriales?

Recomiendo echar un vistazo a Brackets con el complemento Extract. no es perfecto, pero funciona bastante bien.
Uso corchetes, pero nunca traté con complementos.
Entonces, supongo, gracias por cierto desde que encontré el complemento, ¿Extracto no hace toda la magia por ti? Tienes que hacer la mayor parte del HTML tú mismo, pero te ayuda con todo el código y CSS para que lo veas.
En realidad, nunca lo he usado por completo, así que no podría decírtelo.

Respuestas (2)

Photoshop no extrae ningún HTML, solo el CSS. Lo único que hace es traducir las propiedades que tiene para el objeto que hayas seleccionado (color, tamaño, trazo, efectos, posición), a CSS. No puede saber cómo desea estructurar su HTML o cuál es ese objeto, por lo que tendrá que hacerlo usted mismo.

Tampoco recomendaría usar esta función, ya que, a pesar de ello, seguramente no hará las cosas de la manera correcta. Por ejemplo, si tiene un botón que debe tener 40 px debajo de un cuerpo de texto, le daría un margen superior de 40 px. Todo PS podría decirle si copia el CSS es su valor absoluto (dónde está en relación con el lienzo), no puede saber cómo ha estructurado su documento.

Entonces, los tutoriales sobre cómo codificar correctamente serían un buen lugar para comenzar.

Aquí está cómo obtener el CSS de Photoshop solo para los registros de su publicación: https://helpx.adobe.com/photoshop/how-to/photoshop-copy-css.html

Para obtener HTML rápidamente, recomendaría instalar Sublime Text con Package Manager . Abra Sublime, luego Package Manager con CTRL + SHIFT + P,

  • Escribiendo "Control de paquete: Instalar paquete", presione enter.
  • Escribiendo uno de los siguientes nombres de paquetes, luego vuelva a ingresar el procedimiento para los otros dos:

    • Hormiga
    • Fragmentos de la Fundación
    • HTML repetitivo

Instale los tres paquetes y escriba HTML con Zen Speed.