Como converter o seu deseño de Photoshop a código CSS en menos dun minuto

CSS-Photoshop

Desde a chegada da versión CS6, Adobe implementou en Photoshop unha opción moi útil para deseñar e desenvolver deseños web. A operación é moi fácil e especialmente rápido. A través da aplicación poderemos xerar follas de estilo en cascada tomando como referencia as nosas formas e capas de texto. O procedemento é tan sinxelo como desenvolver a nosa maqueta, copiar a versión en código dos nosos elementos e pegala na nosa folla.

É unha moi boa opción sobre todo porque nos permite ver a evolución do noso deseño en termos visuais e en tempo real. Aquí tes algúns consellos para usar esta opción e obter o rendemento máximo:

Intenta ser preciso

Para obter un resultado profesional, recoméndase ter en conta as medidas e proporcións do seu sitio. Estableza os valores Ancho e Alto do modelo que estás a deseñar e aplícaos á túa maqueta. Cando copie o código CSS colocaremos cada elemento tomando como referencia a distancia en píxeles entre cada elemento e os bordos do lenzo. Ten en conta tamén os tamaños e as razóns xerárquicas que vas incluír no teu deseño, incluído o aliñamento de cada elemento e o espazo entre cada un deles para proporcionar a máxima lexibilidade aos teus usuarios.

O uso de guías e as regras da interface axudaralle a crear un modelo limpo e limpo con todos os seus elementos perfectamente aliñados.

web-photoshop

Configura todas as características de cada elemento

A opción de copiar o código CSS dános a posibilidade de deseñar o noso sitio con gran precisión a partir do uso de capas de formulario e texto. O contido de cada capa copiarase no portapapeis e podemos pegalo rapidamente na nosa folla de estilo. Das capas de forma, captura os valores das seguintes opcións:

  • Tamaño
  • Posición
  • Cor do trazo
  • Cor de recheo (incluídos os degradados)
  • Sombra

Das capas de texto podemos capturar os seguintes valores:

  • Familia de tipos de letra
  • Tamaño do tipo de letra
  • Grosor da fonte
  • Altura da liña
  • Subliñado
  • Folga
  • Superíndice
  • Subíndice
  • Aliñamento de texto

Teña isto en conta e configure cada un destes valores para proporcionar o estilo que está a procurar.

Traballar con grupos de capas

Esta función traduce o noso traballo organizado por dous tipos de clase, unha para cada grupo que reúne capas de formas ou texto e unha clase para cada capa dun destes tipos. Cada clase de grupo representará un elemento div pai que conterá elementos div fillos que corresponderán ás capas inseridas en cada grupo. Deste xeito, os valores superior e esquerdo dos contedores fillos estableceranse con referencia ao contedor pai. Debe ter en conta que esta opción non está dispoñible con obxectos intelixentes e non será aplicable a máis dunha capa simultaneamente a menos que estean agrupados.

Pasos para converter

Unha vez feita a maqueta, personalizaches cada elemento e os agrupaches por grupos, só terás que seguir estes pasos:

 

  • Vaia ao panel de capas e escolla unha destas dúas opcións:
    • Fai clic co botón dereito sobre unha forma ou capa de texto ou un grupo de capas e elixe Copia CSS no menú contextual.
    • Seleccione unha capa de formas ou texto ou un grupo de capas e logo escolla a opción Copia CSS no menú do panel Capas.
  • Pega o código no documento da folla de estilo e aplícao ás túas páxinas a través de html5.

    CSS-Photoshop1

    CSS-Photoshop2


O contido do artigo adhírese aos nosos principios de ética editorial. Para informar dun erro faga clic en aquí.

Sexa o primeiro en opinar sobre

Deixa o teu comentario

Enderezo de correo electrónico non será publicado. Os campos obrigatorios están marcados con *

*

*

  1. Responsable dos datos: Miguel Ángel Gatón
  2. Finalidade dos datos: controlar SPAM, xestión de comentarios.
  3. Lexitimación: o seu consentimento
  4. Comunicación dos datos: os datos non serán comunicados a terceiros salvo obrigación legal.
  5. Almacenamento de datos: base de datos aloxada por Occentus Networks (UE)
  6. Dereitos: en calquera momento pode limitar, recuperar e eliminar a súa información.