Transcripciones
1. Introducción: Hola, bienvenido al color para CSS.Te ha
aludido el misterio del color y te estás preguntando cómo hacer que tus diseños sean un poco más fuertes.En esta clase, vas a explorar diferentes sistemas de
generación de colores y cómo usarlos en tu código. Vamos a explorar el abordaje del estado de ánimo. Vamos a explorar generadores de esquemas de color.Entonces vamos a ponerlo todo junto en Dreamweaver usando tu CSS en línea y externo. Espero que disfruten.
2. Generadores de esquemas de color: Vamos a echar un vistazo a los generadores de esquema de color, me encantan los generadores de esquema de color. Los uso no sólo para mi diseño web sino también para mi diseño de impresión. Es solo una manera agradable de poner en orden nuestros pensamientos sobre nuestra marca y nuestro cliente antes de que realmente saltemos al proceso. A mí me gusta contar esto como parte del proceso de investigación, y tiendo a hacerlo al unísono con bocetos reales y generación de ideas. Sé a dónde nos va a llevar el proyecto. Ahora en nuestro blog o en mi blog, que sí he vinculado en nuestros proyectos de curso a continuación, hice una lista de los cinco primeros del mismo para mostrar en clase y me llevé mis alumnos y a los que siento que mis alumnos se conectan bien. El enlace está ahí, y si no quieres usar eso,
solo tienes que seguir adelante y Google ya sea generador de esquema de color, o los 20 principales generadores de esquema de color. Hay tantos generadores de
esquema de colores por ahí que inicialmente puede ser abrumador. Este es el regado por los cinco primeros y puedes seguir explorando si así lo deseas. El con el que me gusta empezar estudiantes es en realidad Palatton. Este es bonito porque voy a llamar a esto la versión más científica. Puedes ser bastante exacto con este. Si estuviéramos buscando un azul, tal vez azul pizarra para nuestro color de sitio principal. Se puede ver, se pueden ajustar los tonos en consecuencia si se necesita que eso sea un poco más brillante, etc. Se
puede inclinar a qué manera quiera llevar y esta va a ser nuestra paleta monocromática. Al pasar el mouse, puedes ver que tiene el número hexadecimal 446188. Ahora, lo que a veces haré para hacer la vida más fácil es simplemente turno. Estoy en un Mac, así que Shift Command 4, y eso nos da un crosshair. Voy a tomar una captura de pantalla de eso para poder referirme de nuevo a eso. Puedo traerlo a Photoshop y probar esos colores o podría usarlo en un proyecto de impresión si soy diseñador de impresión en lugar de diseñador web. Lo que también hago como respaldo es, voy a agarrar mi lápiz, justo por ese color principal, 446188. Tengo un cuaderno a color con el que trabajo y siempre está en mi escritorio. Puedes usar una nota Post-It. Simplemente anota ese número para que puedas referirte de nuevo a él. Sólo voy a decir por ahora, sólo
voy a agarrar ese color principal. Si voy a trabajar monocromáticamente, puedo agarrar al resto de ellos, pero vamos a ver qué más hacen. Aquí está nuestro monocromático. Este va a ser nuestro adyacente o nuestro análogo. Se puede ver que hay todos nuestros códigos. Si quieres adyacente y quieres usar eso para tu sistema, agárralo. Tenemos nuestra tríada y esta tiene un contraste realmente bonito, como puedes ver para que consigas una agradable armonía con ella. Pero aún tenemos esos puntos de contrastes que necesitamos para darle a nuestra página un sentido de organización y jerarquía. Entonces tenemos nuestra etiqueta trad o nuestra cuadrada, dependiendo de tu instructor de fundaciones, esos dos términos son intercambiables. Ahí hay uno que es bastante decente también. Se puede ver también da cada uno de nuestros tintes y tonalidades. También, si deseamos rebotar de eso, podemos,
podemos compartir nuestras paletas si así lo deseamos, o podemos seguir ajustándonos aún más. Me gustaría trabajar con tríadas típicamente. Empecemos con esa. Ahí está nuestro color principal y tal vez este va a ser, tal vez el amarillo va a ser nuestro color de respaldo. Voy a volver a anotar. Va a ser CFB85E. Entonces tal vez el color melocotón va a ser nuestro contenedor div. Voy a anotar div CFA85E y captura de pantalla para que tuviéramos esos colores como referencia. Si hacemos clic en nuestra pestaña de presets bajo nuestra rueda de color, puedes ver que obtenemos más opciones. Puedes ir con pastel más ligero. Puedes ir pastel brillante, brillante, a todo color, pastel
claro, pastel más brillante, los colores más oscuros. Se pueden ir los escritores grisáceos. Hay tantos ajustes que puedes seguir viniendo aquí, solo sigue adelante. También podemos agregar complementos si así lo deseas para que consigas una gama aún más amplia. Tenemos nuestros azules y nuestras naranjas. Se va a conseguir ese factor de equilibrio y nos dará un poco más de énfasis. Palatton es agradable para empezar, y luego volver a nuestros colores. Porque te va a dar muchas opciones y van a ser,
ya que esto es más a base de rueda de color, realmente bonito y armonioso para tu diseño. Adelante y miremos a los otros. El lienzo tiene uno. Vamos a echar un vistazo a Lienzo. Canvas' interesante porque tomará un enfoque más psicológico al color y que justo lo que acabamos de ver con la armonía del color. Esto es todo lo que necesitas saber sobre los colores. Vamos a dar click en morado. va a decir de qué se trata, de dónde se sentó en la rueda de color, de
qué sirve. Más sobre el significado del color, y lo que es bonito es a la derecha tienes tus combinaciones de colores. Se puede, por supuesto dar click en más, pero sólo vamos a agarrar el primero para que podamos verlo. Este es un tablero de humor preexistente que alguien ha hecho. Se pueden ver los colores que este seleccionó con él y los códigos hex son por supuesto con él. Puedes seguir adelante y anotar eso o hacer una captura de pantalla. También hay suministro de color. Esto tiene una interfaz realmente bonita y es una versión similar de concepto con el Palatton. Pero lo que es bueno con este es que te va a dar muestras de cómo se va a ver
tu diseño CSS/web si usas estas opciones de color. Sí te ayuda a tomar tus decisiones un poco más fácil. Si quieres naranja o Germaine, qué aspecto sería eso. Además de llevarlo de nuevo para complementar. A lo mejor quieres que sea un poco más brillante y tono para que puedas ver, puedes desplazar cada uno de los puntos de énfasis a esto, y te va a dar tu código para los principales también. Como de costumbre, captura de pantalla, escríbalo, sea cual sea tu sistema. Adelante y prueba eso. Simplemente explora cada uno de estos, ve cuál funciona mejor para ti. Encontrarás una a la que tienes tendencia a referirte una y otra vez. Como dije, hay tantos por ahí, hacer una búsqueda en Google y encontrar aún más.
3. Adobe Spark y Moodboards de Canva: Está bien. Sigamos adelante y revisemos los tableros de humor. Van a haber dos a los que nos repasemos. El primero es Adobe Spark, y el segundo es el que pasa por Canva. Ambos son gratuitos para que los utilices. Para Adobe, tendrás que hacer un login o usar tus Creative Clouds para que puedas acceder a él. Pero sigamos adelante y creemos un tablero de humor. Ahora para esto, lo que queremos hacer es pensar en cuáles serían las necesidades del cliente y cómo representamos su sitio usando colores. No necesariamente los colores que queremos, pero ¿cuáles son los colores que quieren? Ellos y sus clientes también. Para esto, lo que vamos a necesitar hacer es hacer un nuevo post. Puedes empezar desde cero si así lo deseas, puedes seguir adelante y escoger una plantilla. Para esto, solo voy a usar una plantilla. De esa forma se puede ver cómo funciona. Se puede ver su negocio, escuela, artesanía
destacada, comida, collages, y sin duda el que vamos a estar
buscando va a estar bajo el área de collage, porque vas a querer poder ver el diferentes fotos que representan el estado de ánimo para tu cliente y su sitio. Ya puedes ver, puedes escoger el que tanto desees. Cualquiera que sientas va a funcionar mejor para ti. A mí me gusta la cuadrícula de este. Sigamos adelante y pasemos aquí. Una cosa agradable tanto con Spark como Canva es que tienen imágenes de clip de barra
libre que puedes usar para crear tu tablero de humor. Se va a tomar algo de la búsqueda. Una opción que también está disponible para ti es por supuesto Pinterest. Pero tengo figura la mayoría de nosotros conocemos Pinterest por ahora, así que adelante y usa esa también si así lo deseas. Esto es bonito porque es lo que ves es lo que obtienes. Adelante y pongamos un tablero de humor de diseño web o quien sea que sea tu cliente. En nuestro proyecto de clase, sí
tengo una lista de varios clientes para que los uses, por lo que puedes usar uno de esos. Puedes cambiar tu estilo de tipo si así lo deseas. Se puede ver que tenemos una primaria, tenemos una secundaria. Si no quieres esa,
vamos con esa, vamos con esa, porque tal vez este serif de losa va a encajar un poco más al estilo de nuestro cliente. Podrás ser tan personalizable como desees con esto o mantenerlo tan amplio y general. Pero el foco por supuesto va a ser las imágenes que representan a nuestro cliente. Uno de los clientes es un sitio al aire libre. Entonces para este, lo voy a construir como este va a ser un sitio al aire libre. Voy a dar click en nuestra primera celda, y puedes ver que tenemos filtros en ella, voy a apagar los filtros porque si lo estamos tratando desde el color, quiero que no se ajuste en esta etapa porque vamos para sacar nuestras muestras de esta zona. Adelante, vamos a encontrar una foto gratis y es una al aire libre. Digamos que nuestra primera, queremos mirar montañas. Entonces lo que querrás hacer es pensar en qué color los representaría, y vamos a seguir adelante e insertarlo aquí, y puedes deslizarlos por ahí, puedes aumentar y disminuir, puedes rotar si así lo deseas, así que si estás como, “Oh, quiero que se vea así. Escala mucho más amplia porque en su mayoría me interesan estos colores”. Entonces absolutamente ve por ello. Aquí vamos a encontrar otro, así que alter, voy a pensar en el lago. ¿ Qué colores de un lago van a empatar con la inspiración para este proyecto? Esta es la parte que puedes tomar tiempo y merodear un poco. Estoy pensando tal vez este color. Lo mismo si quieres rotar, adelante y gírala. Se puede decir que se inclina hacia un poco de abstracción con esto, y simplemente puedes seguir adelante. Seleccionas cada celda que quieres cambiar, apaga ese filtro para asegurarte de que el filtro también está apagado. Cielo, porque queremos estar fuera y por ahí. Este se ve bastante bonito. Después sólo tienes que rotarlo en donde los colores representen mejor a tu cliente. Ahora vamos a echar un vistazo a Canva que sí funciona de manera muy similar a Spark. Nuevamente, todos esos enlaces para estos están en nuestra área de proyectos de clase. Sigamos adelante y pinchemos en, “empecemos a diseñar un tablero de humor”. Por supuesto se puede trabajar desde cero. Pero sólo voy a hacer un poco
más fácil como la última vida y vamos a seguir adelante y usar una plantilla preexistente. Pero éste se puede ver que había un signo $ en él, así que si no querías ese y si querías uno gratis, puedes seguir adelante y dar click en uno de los libres, y puedes ver que cambia en consecuencia y puedes transformarlo tanto como que quieras. Ahora, justo lo mismo, es más o menos lo que ves es lo que obtienes. Adelante, diseño web y tablero de humor de color. Puedes cambiar el tipo si así lo deseas, igual que en el último. Vamos a hacer doble clic en eso y si no queremos ese, sólo voy a agarrar el primero de ahí, que haga lo es, mismo trato aquí, cambiemos ese. Vamos con el audaz para que tengamos establecida nuestra jerarquía justo fuera del bate. Podemos cambiar este color. Voy a asumir que tiene sus códigos hex todos listos y anotados desde nuestra última sección. Puedes seguir adelante, escoger un color en este pequeño cuadrante y dar click en el plus. Si tienes tu código hexadecimal, puedes seguir adelante y escribirlo ahí, o puedes girar tu rueda si estás usando tu tabla de humor como una forma de encontrar esos colores. Puedes aumentar los tonos y el tenso si así lo deseas, puedes dejarlo en el rango medio. Vamos más hacia este espectro sólo para que se vea un poco diferente a nuestro último, y nos quedemos con el tema de la naturaleza, la tienda al aire libre de nuestra última. Voy a seguir adelante, haga doble clic. Vamos a entrar primero en nuestros elementos. Hagámoslo. Adelante, borra ese fuera. Sólo encontremos una foto gratis. Ahí vamos, oh, guapa. Ya puedes ver, solo tienes que hacer clic y arrastrarlo, y puedes hacer tu botón de deshacer aquí. Al hacer doble clic, puede cambiar el tamaño y rotar en consecuencia. Si querías más de los colores de la cascada para este, podrás cambiarlo de esa manera. Simplemente voy a seguir arrastrando en uno tras otro, redimensionar, ajustar, rotar. A lo mejor en nuestros sitios al aire libre, la canoa tiene sentido, y el campo, y una montaña. Perfecto. Eso funcionó bien para nosotros. Además, puedes ver podemos arrastrar algunos de nuestros colores desde aquí. Añadamos un color. Digamos, el primero que queremos que sea ese verde en la canoa. Simplemente voy a inclinarse más hacia esto. Entonces cuando estamos contentos con eso, se
puede ver que lo está ajustando a medida que trabajo. Nos vamos a ir con esa. Haga clic en el siguiente. Vamos a agarrar ese morado, ya que ya lo hemos usado como nuestra jerarquía. Mezcla otro color, vamos con el color trigo. Yo lo voy a llevar más hacia la luz. El verde más oscuro de nuestra montaña, cambia la intensidad por esa. A lo mejor para nuestro diseño web, este va a ser nuestro color de fondo. A lo mejor este va a ser nuestro párrafo div h1, etc., o botones. De esa manera tienes un punto de partida para el tema de tu pieza. Estos dos sitios son realmente fáciles de usar y te recomiendo que los pruebes.
4. Dreamweaver: Muy bien, así que ahora tomemos nuestro código y lo llevemos a nuestro sitio web real. Para esto, voy a estar usando Dreamweaver y sí tengo plantillas hechas para ti. Simplemente son realmente simples y directos para
acostumbrarte a poner colores en el CSS, y ver cómo se ven en la página. Ahora, tomé nuestro suministro de color, uno que hicimos y encontré uno que me gustó. Nos vamos a quedar con análogos y aquí están nuestros códigos. Seguí adelante y las anoté. De esa manera tengo acceso a eso. También tuviste tus capturas de pantalla. Si estuvieras usando ese sistema, claro que tenemos nuestro primero,
adelante a Photoshop, ábrelo, y agarra tu cuentagotas de ojos. Entonces, cuando hagas doble clic en tu muestra de color, tu código hexadecimal va a aparecer ahí arriba, que puedas escribirlos desde ahí. En alguna capacidad, ya sea a través la captura de pantalla o de uno de nuestros generadores de esquema de color, adelante, anoten nuestros colores para que podamos ir adelante a Dreamweaver. Muy bien, abriendo nuestro Dreamweaver y yo sí tenemos los dos sitios. Para este, te voy a mostrar lo interno, vamos a seguir adelante, voy a gestionar los sitios. Ahí está nuestro externo, solo hagamos uno nuevo, demo 1. Vamos a vincularlo a, hagámoslo en línea. Demo 1, solo asegurándome, está bien, adelante y golpea “Done”. Este es el que va a ser nuestro inline. Adelante y abramos nuestra página de índice para que podamos ver qué está pasando aquí. Ahora, sí tengo colores básicos tirados aquí y acabo de usar el sistema de nomenclatura amarillo, verde, rojo, así que no es tan preciso, nuestros códigos hexagonales nos van a dar más precisión. Para nuestro color de fondo, me gustó ese look amarillento. Adelante, y la que tengo es FFF337, ahí está nuestra primera, eso es alegre. Nuestro h1, digamos que vamos a poner un área de fondo en esa. Probemos el azulado, 95ECD6, ahí está nuestro look azulado. Está bien, y vayamos con nuestra zona div, solo
agarré tres, así que sólo vamos a hacer los tres primeros, este es ese look naranja, FBC52C. Olvidé el hexágono, no olvides tu hex. Ahí vamos, tenemos nuestro letrero de libra encendido para que
podamos ver, los estamos apagando. Tenemos nuestro azulado que naranja caléndula, y luego nuestro amarillo. Si querías agarrar una más, sólo volvamos a esa. Vamos a ajustarlo tal vez a más del look naranjado, solo para que puedas ver los cuatro colores, FF6001, anotando eso. Simplemente podría haberlo copiado y pegado, pero es lo que es. Adelante, FF6001, y habría los cuatro en esa familia de colores que estarían trabajando en tu página. A lo mejor algunos va a ser texto, algunos va a ser titular. Va a depender completamente de ti. Vamos a cerrar esa. No voy a ahorrar, pero seguirías adelante, captura de pantalla que, puedes previsualizarla si así lo deseas, y subirla a nuestros proyectos del curso para que podamos ver en qué estás trabajando. Pongamos lo externo adentro. Nosotros lo vamos a manejar. Voy a llamar a este demo 2, y vamos a vincularlo a nuestro externo, guardar, eso está bien, hecho. Ahí está nuestro índice y ahí están nuestros estilos, y está basado en los últimos colores, sólo el azul-verde claro, etc. Cámbialo en tu externo, solo
voy a agarrarlos de uno a la vez, CD6. Ups. Recuerda, son los pequeños errores tipográficos los que nos pueden desechar. Asegúrate de que estás deletreando y poniendo tus símbolos correctamente, BC52C, y por último pero no menos importante, FF6001. Si vas a usar mi plantilla, solo tienes que seguir adelante y agarrar cuatro de los colores. Ahora, si vamos por aquí, podrías ser como, “Nada está pasando”. Asegúrate de guardarlo, si no pasa nada. Los dos están hablando entre sí si tienes la versión más reciente de Dreamweaver, pero las más antiguas, vas a necesitar asegurarte de que esté guardado y actualizado. De esta forma se puede ver lo que está pasando con los colores, y se puede construir un sitio que depende de su marca y las necesidades de los clientes.
5. Proyecto de color de CSS: Está bien. Para nuestro proyecto de clase, tienes dos opciones para esto. El primero es crear tableros de humor que representen a los clientes que he enumerado en el proyecto de clase. Son alrededor de cinco de ellos y cada uno tiene una necesidad de clientela muy específica. Uno está más orientado al niño. Uno es más, digamos, orientado financiero. ¿ Cómo lidiar con los colores que representan a sus diversos clientes, sus necesidades, y su marca? Opción 1, puedes seguir adelante y crear estos tableros de humor. Podrás guardarlos o capturas y subirlos a nuestros proyectos del curso para que los veamos. La otra opción es que también puedes agregar un poco extra a esto. ¿ Qué pasa si agregas el código a tu CSS? Tengo plantillas en línea y externas libres de usar. Son muy básicos así que solo está manipulando tu CSS para ver cómo ajustar tus colores y ver cómo funcionaría en una página web real. Los archivos se crean en Dreamweaver por lo que podrías usar Dreamweaver o puedes
abrirlos a través de TextEdit o Bloc de notas más si eres usuario de PC. Como siempre, cada vez que estés terminado, adelante y compártelos para que podamos ver lo que has hecho.
6. Conclusión: En esta clase, tienes que explorar los generadores de esquema de color, y ver cómo funcionan cada uno de ellos, para saber cuál funciona mejor para ti y tu flujo de trabajo. Al dar un esquema de color más armonioso, vas a tirar de tus diseños al siguiente nivel. Además, hay que ver cómo los tableros de humor podrían influir en el impacto en las decisiones de marca
y color, y hay que unirlo todo usando CSS Inline o externo, cualquiera que elijas. Espero que hayas disfrutado de la clase. No puedo esperar a ver qué has creado.
Cookie Redding, Artist, Designer, Teacher
