Share
¿Alguna vez se ha preguntado cómo crear patrones de fondo perfectos y perfectos que funcionen en Photoshop y en la web? No busques más porque hoy vamos a desglosarlo por tí, paso a paso. Estarás creando tus propios patrones de fondo en poco tiempo!
Heya a todos! Hoy tengo el placer de comenzar una serie de screencast que he querido hacer desde hace un tiempo: cómo crear patrones web que funcionen tanto en Photoshop como en la web. Vamos a hacer esto como una serie, comenzando con los patrones más básicos y avanzando hacia algunos de los patrones de fondo más avanzados que podemos encontrar, incluidas las texturas complejas..
Nuestro objetivo es simple: Para enseñar a cualquier persona cómo crear patrones de fondo destinados a la web (pero que también se pueden usar fácilmente durante el proceso de diseño). Vamos a ser "agnósticos del programa", lo que significa que la mayoría de los consejos funcionarán tanto en Photoshop como en Fireworks.
Seamos claros: las ideas detrás de la creación de patrones de fondo son bastante simples: la mayoría de los patrones toman solo un par de pasos y pueden resultar en texturas notablemente efectivas. De hecho, los peores patrones para la web suelen ser aquellos que "se esfuerzan demasiado" al intentar encajar demasiado dentro de cada mosaico.
Porque eso es malo? Porque los patrones de fondo (en la mayoría de los casos) deben ser sutiles y no abrasivos. Las texturas ásperas distraen la atención de un usuario de la estrella real en cualquier diseño web: el contenido.
Entonces, ¿por qué utilizar texturas en absoluto? Porque, correctamente, los patrones de fondo le dan a un sitio un sentido de carácter y personalidad que puede eliminar los colores planos. Los patrones y las texturas dan profundidad y separación al contenido, ayudan a desarrollar una jerarquía y pueden dar a los sitios web (que son planos por su naturaleza) una sensación de sensación táctil. Pueden hacer que un sitio se sienta pulido, refinado y profesional, lo que ayuda a enfatizar el contenido y hacerlo memorable..
¿Mientras que las ideas detrás de la creación de patrones son simples? Lograr que funcionen perfectamente puede ser complicado. Sin embargo, tenga la seguridad de que esta serie de tutoriales le mostrará todos los trucos que necesitará para crear sus propias variaciones personalizadas para usar en sus propios proyectos. Incluso repartiremos algunos regalos por el camino.!
Hoy es el primer día de nuestra serie, por lo que comenzaremos con algunos patrones súper simples para que nuestros cerebros se muevan. Comenzaremos con una cuadrícula simple, pasaremos a un patrón de sombreado cruzado, mostraremos cómo crear un patrón diagonal de escalado, y luego nos pondremos un poco extravagantes al mostrarle cómo agregar un poco de color y textura..
Listo? Hagámoslo!
La parte del video de este tutorial ayudará a suavizar los pasos que no sigue en la versión escrita (a continuación). Además, a veces también es agradable ver cómo trabaja otra persona, así que disfruta!
Debido a que algunos de estos patrones serán difíciles de ver en un screencast de resolución web, también estoy proporcionando un tutorial escrito paso a paso. Puedes ver el video o la versión escrita (¡o ambas cosas!), Depende de ti la mejor manera de aprender. Vamos a bucear en?
El patrón de cuadrícula básico es casi tan simple como es, por lo que es un punto de partida fantástico. Comencemos abriendo un documento que es 7px por 7px.
¿Por qué este tamaño? ¿Porque vamos a crear un patrón de cuadrícula con una línea de 1px corriendo por el centro? y desearemos tener una cantidad igual de espacio en cada lado de la cuadrícula. Esto no es obligatorio para este patrón en particular (siempre que la cuadrícula sea un cuadrado perfecto, aún se repetirá sin problemas), pero es un hábito que desearemos tener cuando pasemos a los patrones más avanzados más adelante..
Los pasos son simples:
Aquí están las capturas de pantalla:
Una vez que tenga su patrón exactamente donde lo desea, queremos guardarlo como un patrón. Para ello, seleccione desde el menú superior en Photoshop "Edita> Define Patrón". Esto guardará automáticamente su documento como un patrón que se puede utilizar dentro de la"Estilos de capa> Superposición de patrón"biblioteca.
Ahora que hemos terminado lo básico, puedes jugar mucho con esto. Utilizamos un documento de 7px, pero si desea una cuadrícula más estrecha, puede bajar a 5px o 3px. Alternativamente, si desea una cuadrícula más abierta, puede usar un tamaño de documento más grande. El ancho de la línea, el espaciado y los colores dependen de usted.
Propina: El color que puede parecer sutil (bajo contraste) en el documento de patrón puede parecer demasiado intenso cuando los usa como un patrón real en otro documento más grande. El truco aquí es:
Para este segundo patrón, básicamente vamos a rotar nuestras líneas en 45 grados. Sin embargo, recuerde que el espaciado es crucial, así que tendremos que usar un poco de pensamiento crítico para que el patrón se repita:
Abra un nuevo documento a 8px por 8px esta vez. ¿Por qué 8px y no 7px como hicimos antes? Porque queremos que nuestras líneas coincidan exactamente con cada esquina y si usamos y si usamos 7px, las líneas no funcionarán del todo..
Aquí están las capturas de pantalla:
Preste especial atención a la última captura de pantalla, ya que ilustra cómo puede realmente cambiar la sensación completa de la cuadrícula espaciándola o recortándola. Un patrón de sombreado ajustado puede hacer una gran textura tan bien como un gran patrón jugoso. Juega con el espaciado y el ancho de la línea hasta que estés satisfecho con los resultados.
Este siguiente patrón es bastante fácil, ya que esencialmente solo usa las ideas de patrones de sombreado cruzado (¡por supuesto, utilizando solo una línea en lugar de dos!) Los patrones de líneas diagonales simples son una excelente manera de agregar una textura sutil detrás del texto (como los titulares) porque agrega caracteres sin hacer que el texto sea ilegible.
Para la línea diagonal, siga adelante y comience sin salir del documento, pero esta vez, elimine una de las líneas antes de guardar el patrón (Edición> Definir patrón). El tamaño del documento en este caso será crucial, ya que se correlaciona directamente con la forma en que se tejen las líneas..
Las capturas de pantalla:
La segunda imagen muestra cómo, al ajustar el espaciado del documento y el grosor y la dirección de la línea, puede obtener una gran variedad de patrones. No es demasiado complicado eh?
Propina: Para los puristas del mercado, puede obtener una línea mucho más limpia y nítida si atraviesa su línea (píxel por píxel) y elimina cualquiera de los "efectos" que vimos en el renderizado de Photoshop. Esto sucede esencialmente porque Photoshop está dibujando una línea suavizada donde idealmente queremos una línea pixelada. Sin embargo, los píxeles son tan pequeños que, en la mayoría de los casos, no importa de ninguna manera. Aquí hay solo una captura de pantalla de la versión súper nítida en caso de que quiera verla..
Muy bien, así que tenemos lo básico abajo! Ahora agreguemos un poco más de personalidad usando dos técnicas más rápidas: Agregar color y textura.
La parte del color es probablemente bastante fácil si aún no lo has descubierto. Simplemente agregue color a su fondo y líneas hasta que tenga el efecto deseado. Mis consejos: Mantenga el contraste bajo: no hay nada más desagradable que un patrón demasiado vibrante.
La parte de textura es un poquito más complicada. La textura siempre ha sido algo muy difícil de dominar en la web. ¿Por qué? ¿Porque en la mayoría de los casos, la textura se repite? y la mayoría de la gente puede verlo a una milla de distancia. Incluso las texturas de alta resolución se repetirán y mostrarán las separaciones de mosaico a menos que uses imágenes que sean enormes (como 1920 x 1080). Lo que no siempre es una solución práctica..
El truco con patrones texturales.?
En partes posteriores de esta serie de tutoriales, ¿vamos a examinar cómo crear algunas texturas avanzadas? Pero para redondear hoy, veamos un patrón muy simple con un poco de grunge. Los pasos:
Y las capturas de pantalla:
Y por último, pero no menos importante, echemos un último vistazo a las cuatro texturas que acabamos de crear:
Bonus Tip 01: Al guardar su patrón (Edición> Definir patrón), recuerde ocultar la capa de fondo si desea crear un patrón transparente. A veces realmente querrá guardar el color de fondo, pero otras veces puede ser realmente útil poder superponer un patrón en otro color sin tener que volver al archivo original y realizar cambios. Obviamente, usar Blanco o Negro como color de patrón es su mejor apuesta en términos de extender la usabilidad de estos patrones transparentes.
Bonus Tip 02: Hemos analizado cómo convertir estos patrones en "Patrones" que pueden ser utilizados por Photoshop (o Fireworks), pero ¿cómo los usamos en la web? Fácil en realidad, igual que ellos como archivos .GIF, .PNG o .JPG (recomiendo PNG para patrones transparentes). Luego simplemente agréguelos a su carpeta web y utilícelos como imágenes de fondo a través de CSS. Recuerde establecer el valor de "repetición" si desea que se agrupen en toda la página.
¡Bien! Así que espero que hayas sacado algo de esta primera sesión. A estas alturas, debería tener una buena comprensión de los conceptos teóricos detrás de cómo funcionan los patrones y una comprensión técnica de cómo crearlos y usarlos en Photoshop. ¿Puede guardar todos los archivos que creamos aquí como archivos .GIF, .PNG o .JPG y usarlos instantáneamente en la web? pero solo hemos empezado.
En el siguiente nivel de esta serie, le mostraremos cómo crear algunos patrones de fondo "ruidosos" que le harán jurar que podría tocarlos. También hablaremos sobre cómo crear patrones de textura avanzados, patrones basados en spae, patrones transparentes y más en el futuro..
Suscríbase o vuelva a consultar el sitio para ver todas las actualizaciones de esta serie a medida que ocurren!
Accentsconagua