Krypton Solid

La última tecnología en raciones de 5 minutos

Cómo exportar patrones SVG

Cómo exportar patrones SVG

Solía ​​ser que podía simplemente copiar una imagen enlosable como un gif o jpg a 72 ppp y colocarla en mosaico con CSS. Es una práctica común entre los diseñadores web y lo ha sido durante años; es una forma rápida y fácil de agregar un patrón o textura a su trabajo. Luego, esos molestos cuerpos de Apple lanzaron pantallas de retina y antes de que nos diéramos cuenta un el píxel no era un píxel más tiempo. De repente, esos amados patrones se convirtieron en historia.

Los SVG (gráficos vectoriales escalables) se están convirtiendo rápidamente en el estándar para gráficos nítidos en la Web. Resuelven el problema de tener que crear archivos de imagen separados para adaptarse a los dispositivos de retina. Son realmente divertidos y fáciles de crear, y abren un mundo de posibilidades …

Paso 1: crea un patrón

Hay decenas de aplicaciones diferentes que te permitirán diseñar un patrón SVG. Mi favorito es Illustrator, así que eso es lo que usaré.

001

Abra Adobe Illustrator y cree un nuevo documento de 300 px por 300 px. Luego ve a Objeto> Patrón> Hacer y tu lienzo cambiará. Notarás que habrá un cuadrado azul en el medio de tu mesa de trabajo. También el Panel de opciones de patrón estara abierto.

002

Tendremos que hacer un pequeño ajuste antes de comenzar. Vaya al Panel de opciones de patrón y desmarque la opción que dice Mueva el azulejo con el arte. (Esta función es molesta, porque no podrá mover o colocar su obra de arte dentro del cuadrado del patrón. Se moverá con ella si no desmarca esta opción).

003

A continuación, el cielo es el límite para el tipo de patrón que puede crear. De forma predeterminada, el patrón cuadrado se establece en 100 px x 100 px. Puede marcar en cualquier tamaño que desee. Dejé el mío por defecto.

004

A continuación, dibuja un cuadrado, de 50 px por 50 px. Alinéelo con los bordes superior y derecho del cuadrado.

005

A continuación, haga clic y mantenga el mouse sobre el Lapicera. Aparecerán subherramientas, donde puede seleccionar el Herramienta Agregar punto de ancla. Desde aquí, agregue un punto de anclaje al centro de los lados izquierdo y derecho del cuadrado.

006

Utilizando la Herramienta de selección directa, seleccione los puntos de anclaje (mantenga cambiar para seleccionar ambos.) Luego, en el menú superior, seleccione Objeto> Transformar> Mover.

007

Mueva los dos puntos 20px hacia la derecha para formar una especie de flecha.

008

A continuación, duplique la forma arrastrándola a una nueva posición mientras mantiene presionada la alt clave. (O Copiar y pegar si tu prefieres.)

009

Seleccione la nueva forma y arrástrela a la esquina inferior izquierda del cuadrado del patrón.

010

Con la forma aún seleccionada, tome una esquina y gírela 180 grados. (Mantenga presionado el cambiar clave para ajustar exactamente a 180 grados.)

011

En el menú superior, seleccione Objeto> Transformar> Mover y mueva la nueva forma -20px.

012

Finalmente, haga clic en el Guardar una copia en la parte superior de la ventana, nombre el patrón y guárdelo para completar su patrón. Guardar una copia es importante si desea editarlo más tarde. Esto evita que tenga que volver a crearlo todo de nuevo.

013

Paso 2: exporta el patrón

Notarás que una vez que salgas del modo de patrón, el patrón se selecciona automáticamente como tu relleno. Todo lo que necesita hacer es dibujar una forma en la mesa de trabajo y se rellenará con el patrón. (Si por alguna razón ha cambiado el relleno de la forma, puede encontrar su patrón en el panel de muestras y aplicarlo como cualquier otro relleno).

A continuación, cambie el tamaño de su forma para que cubra toda la mesa de trabajo de 300 px por 300 px.

014

Seleccione Archivo> Guardar como. Guarde su archivo como .svg.

015

A continuación, aparecerá un cuadro de diálogo, donde puede elegir entre diferentes formatos y opciones de SVG. Asegúrese de hacer clic en más opciones, en la esquina inferior izquierda, para ver todas las opciones disponibles para su archivo SVG.

El formato típico es SVG 1.1 porque es el formato SVG más utilizado y más ampliamente admitido. En este cuadro, también controlará si conserva o no la capacidad de editar el SVG en Illustrator, o si habilita el texto en una ruta, lo que puede ser útil. Tiene la opción de usar el SVG como un archivo real, o puede copiar el código y pegarlo directamente en su documento html. Una vez que haya terminado, haga clic en está bien.

016

Paso 3: edita el patrón SVG

Abra el archivo .svg en un editor de texto. Estoy usando Sublime Text, pero puedes usar el Bloc de notas, Dreamweaver o lo que sea que codifiques en HTML.

Abra el mismo archivo en un navegador para que pueda obtener una vista previa de los cambios que realice en el código.

017

Hay algunas áreas diferentes en las que enfocarse. Primero, necesitamos editar los límites del archivo SVG, para que llene el navegador.

Verás: en el fondo. En su lugar, cambie ambos valores de 300 a 100%. Entonces, su código se verá así:

018

No deberías notar ningún cambio todavía. Todavía debería ser un cuadrado. ¿Por qué? Porque el cuadro de vista está configurado en 300 x 300, que son dimensiones cuadradas. Para llenar el ancho y alto del navegador, cambie el código en la línea 4 de viewBox = ”0 0300300 ″ a viewBox = «0 0100% 100%».

019

Cuando actualizamos el navegador, el patrón llena nuestro navegador de un extremo a otro. El problema es, ¿qué pasa si quieres cambiar el tamaño del patrón? ¿Vuelve a Illustrator y rehace todo de nuevo? No. Esa es la belleza de que Illustrator genere su código SVG. Simplemente puede editar el código. No lo considere simplemente un archivo gráfico. Piense en ello como un archivo de código que puede manipular y doblar a su antojo.

Para editar el tamaño del patrón, busque en la línea 5. Simplemente cambie los valores de ancho y alto a lo que desee. Recomendaría mantenerlo en proporciones cuadradas, a menos que desee distorsionar su patrón. Cuando cambio los valores a 70, el patrón es más pequeño, pero aún llena el ancho y el alto de la pantalla.

020

Si miras el código, verás que el patrón está formado por polígonos. El primer polígono tiene un relleno de «ninguno» (que produce blanco) y el resto tiene valores hexadecimales.

Para cambiar los colores de nuestro patrón, todo lo que tenemos que hacer es cambiar los valores de relleno.

021

Si eres el tipo de persona a la que le gusta copiar y pegar, aquí tienes nuestro código SVG final:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1"  xmlns_xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 viewBox="0 0 100% 100%" enable-background="new 0 0 300 300" xml_space="preserve">
<pattern width="70" height="70" patternUnits="userSpaceOnUse" id="Unnamed_Pattern" viewBox="50 -100 100 100" overflow="visible">
 <g>
 <polygon fill="#c4e0d3" points="50,-100 150,-100 150,0 50,0 "/>
 <g>
 <polygon fill="#ff6596" points="200,-50 150,-50 130,-25 150,0 200,0 180,-25 "/>
 </g>
 <g>
 <polygon fill="#0299a7" points="100,-50 150,-50 170,-75 150,-100 100,-100 120,-75 "/>
 <polygon fill="#ff0a5c" points="100,-50 50,-50 30,-25 50,0 100,0 80,-25 "/>
 </g>
 <g>
 <polygon fill="#ff7635" points="0,-50 50,-50 70,-75 50,-100 0,-100 20,-75 "/>
 </g>
 </g>
</pattern>
<rect fill="url(#Unnamed_Pattern)" width="100%" height="100%"/>
</svg>

Eso es perfectamente válido, pero es un poco complicado (gracias Illustrator). Así que recomiendo optimizarlo antes de usarlo. Hay muchas opciones de optimización disponibles, pero De Peter Collingridge es uno de los mejores, nos da este código final:

<svg  version="1.1" id="Layer_1" x="0" y="0" viewBox="0 0 100% 100%" enable-background="new 0 0 300 300" xml_space="preserve"><pattern width="70" height="70" patternUnits="userSpaceOnUse" id="Unnamed_Pattern" viewBox="50 -100 100 100" overflow="visible"><polygon fill="#c4e0d3" points="50 -100 150 -100 150 0 50 0 "/><polygon fill="#ff6596" points="200 -50 150 -50 130 -25 150 0 200 0 180 -25 "/><polygon fill="#0299a7" points="100 -50 150 -50 170 -75 150 -100 100 -100 120 -75 "/><polygon fill="#ff0a5c" points="100 -50 50 -50 30 -25 50 0 100 0 80 -25 "/><polygon fill="#ff7635" points="0 -50 50 -50 70 -75 50 -100 0 -100 20 -75 "/></pattern><rect fill="url(#Unnamed_Pattern)" width="100%" height="100%"/></svg>

Conclusión

Tener la capacidad de exportar sus muestras y patrones de Illustrator como SVG abre una gran cantidad de posibilidades. No solo puede crear un patrón SVG, puede editar el archivo en cuestión de minutos, controlando colores, tamaños y cómo se procesa el archivo en el navegador.

Deja un comentario

También te puede interesar...

Revelado: Top 30 destinos de deslocalización

Jóvenes pretendientes pisando los talones a India Están surgiendo nuevos competidores para desafiar el dominio de los países BRIC (Brasil, Rusia, India y China) en el mercado de la deslocalización. Si bien India ha sido

¿Qué son las economías de libre mercado?

El libre mercado se refiere a una economía en la que el gobierno impone pocas o ninguna restricción y regulación a compradores y vendedores. En un mercado libre, los participantes determinan qué productos se producen,

Nanorobots para mejorar la atención médica

El uso de nanorobots para administrar medicamentos y combatir enfermedades no es una idea nueva (consulte Aquí o Ahí). Por supuesto, todavía faltan algunos años para los nanorobots que flotan dentro de nuestros cuerpos para

Acumulación de la definición de descuento.

¿Cuál es la acumulación del descuento? El aumento en el descuento es el aumento en el valor de un instrumento actualizado a medida que pasa el tiempo y se acerca la fecha de vencimiento. El

El problema con Windows 8 es el hardware

Las ventas de Microsoft Windows 8 parecen ser lentas y lo que realmente está sucediendo aparecerá en muchas teleconferencias de ganancias este mes. Como anécdota, los dispositivos con Windows 8 no gritan en casa y

Definición de fraude

¿Qué es el fraude? El fraude es un acto engañoso deliberado destinado a dar al perpetrador una ganancia ilegal o negar el derecho a una víctima. Los tipos de fraude incluyen el fraude fiscal, el

NASA.gov necesita un cambio | Krypton Solid

¿Seguiste el ritmo de Mars Lander como yo? Millones de usuarios de Internet en todo el mundo están inundando NASA.gov y se preguntan cómo es el paisaje polar marciano. Mars, al menos en Internet, es