Opciones para mover y cambiar el tamaño de un elemento

Existen dos formas principales de cambiar la posición y el tamaño de un elemento mediante HTML5. La primera consiste en usar las coordenadas superior e izquierda del elemento para especificar la posición, y la anchura y la altura de este para el tamaño. La segunda implica el uso de la propiedad transform de CSS para trasladar elementos y establecer su tamaño.

Google Web Designer usa ambos métodos. En el diseño de elementos, utiliza los valores superior e izquierdo para determinar la posición, y los valores de anchura y altura para establecer el tamaño. Debido a que la propiedad transform de CSS ofrece un número mayor de fotogramas por segundo y una animación más fluida, Google Web Designer recurre de forma predeterminada a este método al crear animaciones basadas en CSS.

Si usa la configuración predeterminada de las herramientas de transformación, estas funcionarán correctamente tanto para el diseño como para la animación. No obstante, si lo desea, puede cambiar el método utilizado para establecer el tamaño y la posición de los elementos.

Limitaciones

• Las rutas de movimiento no funcionan con los valores superior e izquierdo.
• Las animaciones de los anuncios AMPHTML no pueden basarse en las posiciones superior/izquierda ni en el tamaño ancho/altura.

Cambiar el estilo de posición

Para cambiar el estilo de posición, siga estos pasos:

1. En la barra de herramientas, haga clic en la herramienta Selección .
2. Haga clic en el botón de opciones de estilo de posición .
3. Seleccione un estilo de posición en el menú emergente:

   Estilo de posición	Descripción
   Utilizar posición predeterminada	Recurre a los valores superior/izquierdo para la posición del diseño y utiliza transform:translate3d() al animar la posición.
   Utilizar posición superior/izquierda	Utiliza los valores superior/izquierdo al definir la posición de un elemento en un fotograma.
   Utilizar traslación 3D	Utiliza los valores de transform:translate3d() al definir la posición de un elemento en un fotograma.

Cambiar el estilo de tamaño

Para cambiar el estilo de tamaño, siga estos pasos:

1. En la barra de herramientas, haga clic en la herramienta Selección .
2. Haga clic en el botón de opciones de estilo de tamaño .
3. Seleccione un estilo de tamaño en el menú emergente:

   Estilo de tamaño	Descripción
   Utilizar tamaño predeterminado	Recurre a los valores de anchura y altura para el tamaño del diseño y utiliza transform:scale3d() al animar el tamaño.
   Utilizar anchura y altura	Utiliza los valores anchura/altura al definir el tamaño de un elemento en un fotograma.
   Utilizar escalado 3D	Utiliza los valores de transform:scale3d() al definir el tamaño de un elemento en un fotograma.

Controles de transformación

Si en la barra de opciones de herramientas la casilla Control de transformación  está marcada, podrá utilizar la herramienta Selección  para cambiar el tamaño y la rotación de los elementos que haya seleccionado.

Para girar un elemento seleccionado, siga estos pasos:

1. En la barra de herramientas, haga clic en la herramienta de selección.
2. Compruebe que la casilla de verificación Control de transformación esté seleccionada en la barra de opciones de herramientas.
3. Seleccione uno o varios objetos. Los controles de rotación (los dos anillos anidados) aparecerán en medio de la selección.
4. Si desea cambiar el centro de la rotación, arrastre el control de rotación desde el anillo interior.
5. Gire la selección arrastrando el control de rotación desde el anillo exterior.
   • Si mantiene la tecla Mayús pulsada mientras arrastra el cursor, se limitará la rotación a incrementos de 45°.

Para modificar el tamaño de una selección, siga estos pasos:

1. En la barra de herramientas, haga clic en la herramienta de selección.
2. Compruebe que la casilla de verificación Control de transformación esté seleccionada en la barra de opciones de herramientas.
3. Seleccione uno o varios objetos. Los elementos seleccionados se muestran rodeados por un cuadro azul.
4. Arrastre uno de los puntos de control de los lados o de las esquinas del cuadro de delimitación.
   • Si mantiene pulsada la tecla Mayús mientras arrastra el cursor, se mantendrá la proporción original del elemento seleccionado.

 

Modificar el tamaño de imágenes SVG

Si quiere modificar el tamaño de una imagen o forma en SVG para agrandarla, use las propiedades de anchura y altura en lugar del escalado 3D. Si utiliza el control de transformación de la herramienta Selección, es posible que deba cambiar el estilo de tamaño.