Transcripciones
1. Introducción: Aprender a usar
SVG optimizados es una habilidad importante en cualquier conjunto de habilidades de
diseñador o desarrollador. En este mini-curso, que
solo tiene una lección, vamos a
pasar de una foto que se toma con
solo un teléfono normal. Vamos a
optimizar esa imagen. Vamos a
convertirlo en un SVG. Entonces vamos a optimizar ese SVG para
prepararlo para la web, luego
crearemos un componente
React SVG. Y luego como bono, lanzaremos un
gancho React personalizado para animar el
fondo de ese SVG. Y todo el rato y reaccionar
estará usando TypeScript. Este mini curso fue muy
divertido para mí de grabar. Espero que hayas aprendido mucho.
Ahora comencemos.
2. Cómo convertir fotos en SVG y puerto optimizados para reaccionar con TypeScript: Pensé que sería genial convertir este
logotipo realmente genial en la parte de atrás
aquí y la parte delantera cerca con el sexto sexto aniversario de seis años. Pero sería genial
convertirlo en un SVG. E incluso como bono,
voy a lanzar un gancho
React personalizado para cambiar, en última instancia, este color de
fondo rosa. Entonces a medida que movemos el mouse, cambiaremos el color de
fondo. Entonces te voy a mostrar el flujo completo. He tomado una foto de la
parte delantera trasera de la playera. Entonces sí, vamos a
meternos en el código y empecemos a mirarlo. Como dije, ya he tomado una foto de la
parte delantera y trasera de la playera solo con una cámara normal de iPhone
y nada especial. Lo primero que
vamos a hacer para hacer nuestro SVG
basado en reaccionar es abrir
estas dos imágenes en GIMP. Entonces seleccionaré a ambos. Y los
abriremos aquí en GIMP. Ahora que tenemos las
dos imágenes aquí, lo primero que
haremos es rotarlas. Entonces bajamos a Transformar,
giramos 90 grados. Y también para el dorso de la
playera, rotar 90 grados. Entonces lo que voy a hacer es
subir al índice de modo imagen. Y voy a convertir
esto en una imagen a tres colores. Entonces tenemos negro, azul
claro, y este color rosa
brillante. Entonces ojalá Gimp haga
un buen trabajo por nosotros. Veamos cómo
va eso. Genial. Entonces básicamente más o menos
ha hecho un buen trabajo. Yo también voy a
hacer lo mismo aquí. Y en este caso, no
tenemos tres colores, pero tenemos 12345, supongo. Creo que estos son
del mismo color. Entonces intentemos indexar con cinco colores y
veamos qué pasa. Bien, así que eso
se ve bastante bien. Lo siguiente que vamos a
hacer es exportar estas imágenes. Sólo voy a llamar a
esta camisa limpia. Asegúrate de que la
calidad 100 esté establecida. Y lo mismo para el frente aquí. Y voy a llamar así mismo a esto. Camisa limpia. Tenemos nuestra calidad 100
y los exportaremos. A continuación, lo que vamos a
hacer es abrir Inkscape. Y ahora que
tenemos a Inkscape abierto, vamos a importar ambas fotos
limpiadas. Tengo los dos aquí
mismo puedo seleccionar ambos con Comando y haga clic. Y vamos
a abrirlos. Ahora, Inkscape te preguntará aquí, pocos ajustes queremos sin problemas
para optimizar la calidad. La incrustación está bien y desde el archivo. Así que solo asegúrate de que realmente, el único importante aquí es suave porque
queremos que la imagen de la más alta calidad sea importante. Entonces Inkscape abrirá
por defecto estas dos imágenes separadas. Podemos tomar el frente aquí, y sólo voy a copiar
eso en la parte de atrás. Tenemos el frente en la parte de
atrás lado a lado aquí. Siguen siendo ambas imágenes de
mapa de bits, y aquí es donde entra
la magia. Entonces como dijimos, esta es
una imagen a tres colores, y esta es una imagen de cinco colores. Entonces hagamos primero los
tres colores. Una vez que hayas seleccionado
tu mapa de bits. Voy a subir
aquí, Trace Bitmap. Y queremos hacer
múltiples escaneos. Y en lugar de
pasos de brillo, no vamos a colores. Y luego queremos tres
escaneos, uno por color. Normalmente elimino todas
estas optimizaciones, pero su kilometraje puede variar. Lo bueno es que
puedes actualizar continuamente y decidir si
quieres jugar
con estos valores. A veces hacer suave proporciona
unos bordes más suaves agradables, pero se ve como el predeterminado aquí, sin ninguna optimización o seleccionar suave,
se ve bastante bien. Entonces voy a decir OK. Y verás ahora aquí, exactamente superpuesto
con el mapa de bits. No es un mapa de bits
como este todavía lo es, dice imagen aquí abajo. En cambio vemos que es un
grupo de tres objetos. Entonces eso significa que el rastro
funcionó perfectamente. Voy a mover eso
por aquí y voy a
deshacerme de la vieja imagen. Ahora voy a hacer lo
mismo por el dorso de la playera. Trazar mapa de bits. Múltiples escaneos. En este caso
tenemos cinco colores. Vamos a actualizarlo, a ver si
recoge todos los colores. Perfecto. Eso se ve genial. Digamos, bien. Y ahora vemos que tenemos un
grupo de cinco objetos. Entonces voy a mover eso
otra vez y me desharé
de la vieja imagen. Entonces ahora lo vamos a hacer es
limpiar estas imágenes. Entonces para el frente de la playera, en realidad no necesito
este fondo. Yo sólo quiero las letras. Entonces el azul y el rosa. Entonces lo primero que
voy a hacer es desagrupar. Este grupo de tres colores. Normalmente el rastreo
se agrupa automáticamente. Y en conjunto, podemos
simplemente desagrupar eso. Y vemos que aquí hemos seleccionado
este camino oscuro. Sólo nos vamos a
deshacer de eso. Entonces parece que
hubo algo de artefacto cuando convertimos en GIMP, pero eso tampoco es problema. Solo ten cuidado al
seleccionar aquí. No queremos eliminar toda
la capa. Sólo queremos
eliminar esta esquina. Y como esto ahora es un SVG, solo
queremos los nodos
de este SVG y vamos a eliminar
esta esquina. Así que sólo nos quedan
para la capa rosa. Sólo estas bonitas letras. Para que podamos hacer lo mismo por
la parte posterior de la playera. Voy a desagrupar eso. Y aquí hay que tener
un poco de cuidado porque si miramos de cerca la forma en
que se imprimió la camisa, este negro no es
un color separado. Este es literalmente el
trasfondo de esta imagen. Entonces tendremos que mantener
algunos de estos antecedentes, pero lo que voy a hacer
es darle forma de nuevo que cree un contorno
alrededor de toda esta imagen. Se verá un poco más agradable. Yo creo. Lo primero que voy a hacer es
deshacerme de este rojo. No estoy seguro de cómo
apareció exactamente, pero voy a deshacerme de
esa capa roja por completo. Así que sólo podemos eliminar eso. Y como dije, voy a empezar a remodelar este fondo negro. Así que aquí podemos hacer muchas
optimizaciones. Voy a eliminar
la mayoría de estos nodos y ya podemos
empezar a limpiar. Ahora, tal vez encuentres que en algún
punto necesitas otro nodo. Eso es bastante fácil de resolver. Solo asegúrate de que al
menos dos nodos estén
seleccionados con Mayúsculas-clic. Y simplemente presionamos el botón más aquí
para insertar un nuevo nodo, voy a necesitar algunos más. Entonces, aunque estos sean
los tres seleccionados, voy a presionar nuevamente el botón más y
verás que en realidad pone uno nuevo
entre cada seleccionado. Así que eso debería darme un
buen kilometraje aquí. Ahora vamos a hacer es tirar
esto arriba y otra vez. Sólo ponlo encima.
Eso se ve bastante bien. Y me di cuenta de que este color realmente
no se transfirió
a la perfección. Yo sólo voy a tomar Aqua. Eso se ve muy bien. Y también voy a
asegurar que los subtítulos aquí en este fondo
sean del mismo color. Sólo por un poco de unidad. Puede copiar este código hexadecimal. Y cuando escoja esto aquí, puedo volver a pegar esto. Y eso se ve bastante bien. O sea, el fondo
aquí no es súper limpio, pero ese por supuesto no es
el punto de este video. Por eso he recorrido muchas
de estas cosas. Y claro, como sabemos, puedes encontrar infinitos
SVG en Internet. Entonces a veces empezarás de
todos modos con un SVG. Esto fue solo un poco extra
para mostrarles mi
flujo de trabajo de cómo
convierto imágenes de mapa de bits en
SVG. Ya casi terminamos. Voy a seleccionar esto e
ir a las propiedades del documento. Voy a cambiar el tamaño de la
página al contenido. Voy a añadir algunos márgenes. Probablemente 50 es bastante bueno. Solo asegúrate de que
cuando hagas esto, tus unidades estén en píxeles. Si eres una pulgada o algo así, vas a
tener márgenes enormes. Pero 50 parece bastante decente. Y creo que esto es
bueno para nosotros para ahorrar. Entonces voy a Guardar Como y sólo
voy a poner diseño de camisa. Y claro, con
la extensión SVG. Ahora aquí, Inkscape
nos ofrece opciones a SVG, el SVG de Inkscape
o el plano SVG. Y como nos
dirigimos hacia la web, queremos ir a SVG llano. Inkscape abandonará un
poco de su marcado. Entonces no es tan detallado. Pero como veremos en breve, vamos a optimizar aún más
el SVG. Entonces voy a salvar eso. Ahora solo para ilustrar lo
que estamos a punto de hacer aquí, estoy en mis descargas. Este es el SVG
que acabamos de exportar. Y voy a
abrir esto con Visual Studio Code. Podemos ver aquí que hay bastante
basura por aquí. Este es un SVG enorme. No sería genial si
hubiera una herramienta que pudiera reducir el tamaño del
SVG que acabamos de exportar. Así podremos usarlo fácilmente
o más fácilmente en React. Por suerte, existe tal
herramienta para nosotros y esa es esta herramienta SVG OMG
de Jake Archibald. Está alojado en una
de sus Páginas de GitHub. Entonces voy a abrir
el SVG que acabamos de exportar. Y ahora lo
genial de esta herramienta es que
podemos jugar con
bastantes configuraciones, reduciendo en
última instancia
el tamaño de nuestro SVG. Normalmente, los que más espacio
ahorraron
son estos dos, pero sí hay que tener cuidado. Si empiezo a reducir
la precisión demasiado baja, puede que empieces a ver algunos bordes
extraños y así sucesivamente. Pero se puede ver haciendo eso, ya
bajamos a 16 kb. Pero solo para que no sea tan rudo, creo que dejaré la precisión del
número en uno. Y podemos jugar un poco con la precisión de
transformación. Parece que no me doy cuenta de
nada ahí. Se puede prettify el marcado. Puede hacer un multi-pass. No estoy seguro veo cuáles son
las diferencias ahí, pero ahorramos un poquito. Entonces vamos a tomar eso. E inmediatamente podemos
simplemente presionar Copiar aquí, y este SVG se copia
a nuestro portapapeles. Ahora estoy en el sandbox de código
y vamos a crear un sandbox. Y claro, reaccionar
con TypeScript. Y lo primero que
vamos a hacer aquí es crear una nueva carpeta llamada components. Y voy a
crear un nuevo componente llamado SVG es un archivo TSX. Y es solo un componente
funcional. Ahora, podríamos intentar y simplemente pegar en el
SVG que acabamos de copiar. Y si limpio esto, vamos a
tener algunos problemas. Y esencialmente el
problema es que
dado que el SVG es XML original, no está exactamente listo para JSX. Por suerte, hay otra
herramienta que podemos usar para eso. Y esta herramienta es magic
dot React js.net. Así que sólo podemos pegar en
nuestro SVG y el generador generará para nosotros sintaxis JSX
válida. Ahora, por alguna
razón siempre decide crear un componente de clase. Pero claro que solo necesitamos el marcado dentro de la declaración de
retorno. Entonces, si me desplazo hasta aquí, vamos a tener todo lo que
necesitamos y podremos volver
a nuestro sandbox
e intentar esto de nuevo. Ahora bien, no deberíamos tener ninguna advertencia de sintaxis
cuando formatear el documento. Perfecto, así que voy a guardar
esta camisa componente SVG, y voy a limpiar
el componente app aquí. Pongamos React más SVG más
TypeScript es igual a corazón. Y voy a agregar
en mi componente SVG. Voy a importar eso de opositores, SVG. Entonces esto ya se
ve bastante bien. Y como mencioné, usaríamos un gancho personalizado para que a medida que movemos el
mouse por la pantalla, cambiáramos este color de
fondo solo para hacerlo un
poco divertido. Y creo que también lo que
sería realmente genial es que cambiemos ambos
colores. Entonces primero, tenemos que volver a
subir a nuestro SVG, identificar qué ruta o qué caminos están
contribuyendo a estos. Y luego usaremos
el gancho para cambiar el color según
la posición del mouse. Entonces primero entremos aquí. Y si nos fijamos en el
primer camino listado, tenemos este color. Bien, ese es el, este color beige
claro. Entonces tenemos este color FC. Bingo, hemos encontrado nuestro color. Ahora bien, si busco
esto, sí, exactamente. Debería verlo dos veces. Y este es el color que queremos cambiar a
medida que se mueve el ratón. Lo primero que
voy a hacer es en lugar de mantener esto codificado
como una cadena, voy a cambiar esto a una
variable llamada simplemente color. Y claro, code
sandbox nos va
a gritar porque aún no lo hemos
definido. Entonces aquí arriba,
voy a decir color. Y llamemos a este gancho, que aún no se ha definido
y aún no se ha implementado. Vamos a llamarlo algo así como
usar el color en el ratón. Muévete. Ahora para
implementar realmente este gancho. Me gusta mantener mi
código organizado. Normalmente pongo mis ganchos en
una carpeta de ganchos separada. Podemos llamarlo con el mismo nombre, usar color al mover el mouse
y exportaremos const, usar color al mover el mouse. Y por ahora,
solo volvamos al rojo. Ya podemos verificar para ver si hemos conectado todos
los puntos correctamente. Entonces voy a importar, usar color en el ratón
mover de ganchos. Eso es atrás una carpeta. Usa el color al mover el ratón. Bonito. Entonces estamos a mitad de camino. Hemos seleccionado el
color correcto que queremos modificar. Y ahora es solo la animación
real cuando movemos el mouse para
cambiar este color. Así podemos agregar la definición de
tipo de retorno y que siempre queremos que la cadena
sea devuelta desde este gancho. Y claro, ya que el color en sí va a estar
cambiando en el movimiento del ratón, vamos a usar use
state para definir nuestro color. Así que tenemos color constante, color establecido, y ese
es estado usado. Y voy a seguir usando el rojo aquí como valor inicial. Y necesitamos importar
eso de React. Bien, todo
sigue bien. Ahora para
empezar realmente a escuchar el movimiento del ratón, Eso es una ventana. Agregar oyente de eventos. Y el evento es el movimiento del ratón. Y voy a definir
una función de movimiento del ratón. Ahora en React, no es una buena práctica
definir esto a la intemperie. Deberíamos hacer una limpieza de desmontar
y también desmontar. Entonces voy a poner esto en un gancho de efecto de usuario
que está en Mount. Con una matriz de dependencias vacía. Yo agregaría este oyente de eventos. Y la
función de limpieza, como sabemos, es cuando devolvemos una
función del efecto US. Y eso sería ventana
punto, eliminar oyente de eventos. Ahora suave y en movimiento del ratón. Así que ahora definamos esta función de movimiento
del ratón. Y si nos fijamos en este add
event listener for mouse move, vemos que obtenemos un evento mouse. Entonces eso se pasaría
en esta función. Y como nuestra imagen ocupa
bastante de la pantalla, no creo que sea demasiado ingenuo como implementación
inicial para tomar las dimensiones completas de
la pantalla y basarlo en algún tipo de
porcentaje de donde actualmente
estamos con nuestro ratón. Entonces, por ejemplo, el porcentaje x de la ubicación de nuestro
mouse será el cliente x dividido por el ancho
interno de la pantalla. Y lo mismo por qué la ventana. Y entonces tal vez como porcentaje
promedio, podemos sumar el 2% x
más y, dividido por dos. Ahora tenemos algún
tipo de porcentaje. Y lo que viene a la
mente de inmediato es que podemos tener
algún tipo de mezcla de colores. Entonces lo más fácil en este
momento
serían quizás dos colores. Y con este presente, tienes algún tipo de
mezcla entre ellos. Puedes intentar escribir tu propia función para hacer
esto dados dos colores. Pero en cuanto a mí, voy a usar una dependencia muy popular para
hacer este tipo de cosas. Y se llama cromosomas AS. Y con chroma js, podemos importar Kromer desde un JS y podemos definir una escala usando la función
scale de Chrome. Entonces esa es la escala cromática. Y podemos pasar uno
o más colores. Por ahora, creo que
voy a hacer algo. Vamos a probar el rosa y el morado. Y también voy
a cambiar este color
inicial de nuevo a rosa, así que está más cerca de lo que
originalmente teníamos y el diseño. Ahora con esta escala mezclando entre
ellos, dado un decimal, que es exactamente
lo que esto
terminará con este objeto de escala. Dice simple como llamar. Escala en promedio. Y luego conseguir un hex. Entonces voy a llamar a este color. Entonces claro, establece el
color al estado, lo que activará este
gancho para correr y luego
por supuesto devolver el nuevo color. Y lo último que hay que
limpiar aquí, parece que el sandbox de código
se está quejando o mejor dicho
TypeScript se está quejando. No se pueden encontrar los tipos JS de croma. Así que agreguemos también los
tipos para chroma js. Ahora podemos limpiar esto y
vamos a llegar fresca a la app. Consulta nuestra obra aquí. Muy cool. Entonces a medida que movemos el ratón alrededor, va del rosa al morado. Y debido a este algoritmo, lo
hemos establecido aquí, por supuesto, el 0% total es cuando
tanto x como y son cero, esto te acercará lo más posible
al rosa. Y cuando x e y están cerca de la
altura interior o ancho interior, esto te dará lo
más cercano al morado. Entonces, como último tipo
de cereza en la parte superior, vamos a volver
a nuestro SVG y arreglarlo. Parece que hay
algunos pequeños problemas fronterizos que podríamos limpiar. Y podemos limpiar
esto simplemente
agregando un pequeño ancho de trazo a nuestro SVG negro aquí.
Así que sólo voy a hacer eso. Este camino negro del SVG es de hecho este
con este color oscuro. Y así vemos que
lo primero que falta en realidad es el color del
trazo en sí, que en lenguaje SVG se
denota simplemente por trazo. Y voy a
hacer el trazo, claro que sea del mismo color. El relleno. Guarda eso y actualiza aquí. Eso pudo haber hecho algo, pero vamos a subir el trazo hasta uno y ver
cómo se ve eso. Recarga aquí. Está casi resuelto. A lo mejor si subimos a dos, eso finalmente
hará esto por nosotros. Muy bonito. Sigue viendo aquí,
veamos cómo se ve. Si saltamos todo el
camino hasta cuatro. Bien, eso es bastante
bueno. Podríamos volver a Inkscape y arreglar estos
dos pequeños punteros aquí, pero estoy bastante satisfecho
con cómo salió esto. Bonito, divertido pequeño proyecto que hicimos. Espero que hayas aprendido
algo sobre hacer que mapas de bits se conviertan en SVG
se conviertan en SVG más limpios. Esto fue muy divertido para mí. Y si, Avísame si
quieres más detalles sobre consejos y estrategias para
construir estos ganchos personalizados. Aparte de eso, estoy
súper feliz de estar de vuelta y los veré la
próxima vez, chicos. Cuídate.
Chris Frewin, Full Stack Software Engineer
