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 continuamos con nuestra serie de tutoriales sobre la creación de patrones de fondo que se pueden usar en la web (y durante la fase de diseño) con nuestra segunda edición. Veremos cómo crear los patrones de "ruido" cada vez más populares que tantos sitios web han estado usando últimamente. Asegúrate de revisar la primera publicación de la serie si la perdiste!
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.
Hoy es el segundo día de nuestra serie, pero vale la pena mencionar que todos estos tutoriales son "independientes", lo que significa que debería poder continuar con la Parte 4, incluso si se perdió las primeras dos partes..
El patrón que vamos a cubrir hoy es cómo crear una "textura de ruido" efectiva que se pueda usar como patrón en Photoshop y como fondo de mosaico en sus páginas web. Vamos a hacer esto en 4 pasos:
Listo? Hagámoslo!
El primer paso en el tutorial de hoy es probablemente el más crucial, porque estamos configurando los elementos fundamentales. ¿Hay muchas formas diferentes de crear estos patrones de ruido? Pero te mostraré uno de los mejores métodos (¡y el más flexible!) para ahorrarte la frustración y los dolores de cabeza en el futuro..
Comience abriendo un nuevo documento. El tamaño no importa mucho (estamos usando 200px por 200px en la demo), pero es mejor mantenerlo por encima de 75px para garantizar que su patrón de ruido sea creíblemente aleatorio. Es probable que los documentos más pequeños comiencen a verse como "mosaicos repetidos": los documentos que son significativamente más grandes aumentarán el tamaño de su archivo sin mucho valor agregado.
Agreguemos una forma de rectángulo básica y llamémosla "Color base" (¡la organización hará la vida más fácil más adelante!). Puedes usar el color que quieras (usamos #EBEBEB), pero asegúrate de que el rectángulo ocupe todo el espacio.
Ahora abramos una nueva capa y la llamamos "Capa de ruido". Es solo una capa en blanco en este momento?
Con la herramienta "Marquesina rectangular" (M), dibuje una selección en todo el documento mientras está seleccionada en la capa de ruido. A continuación, seleccione "¿Rellenar?" En el menú contextual (haga clic con el botón derecho cuando se encuentre sobre la selección, o también se encuentra en el panel Editar) y rellenémoslo con el color Blanco.
Propina: A continuación, queremos convertir la "capa de ruido" en un objeto inteligente. Puede hacerlo haciendo clic con el botón derecho en la capa y seleccionando "Convertir en objeto inteligente" o seleccionando "Convertir para filtros inteligentes" en el menú Filtros.
¿Por qué hacerlo un objeto inteligente?? ¡Porque esto nos permitirá conservar la capacidad de editar la intensidad de la textura de ruido más adelante! Puede haber pasos en el futuro en los que acabemos necesitando aplanar la textura, pero siempre es mejor mantener las cosas editables durante el mayor tiempo posible..
Muy bien, Smart Object en mano, queremos añadir la textura de ruido..
Finalmente, establezca el Modo de fusión en la capa de ruido en "Multiplicar" para que solo se vean los píxeles de ruido más oscuros. Ahora puede cambiar el color en la capa base para diferentes colores ruidosos.
Whallah! Ahora hemos establecido los elementos fundamentales para nuestro patrón básico de ruido.?
? y ese sería el final de este humilde tutorial si fuéramos perezosos?
Sin embargo, en los próximos pasos, le mostraremos cómo invertir, alterar y agregar una profundidad y vitalidad creíbles a su patrón de ruido para que se destaque del paquete.!
Antes de seguir adelante: Continúe y agrupe sus capas (la capa base y la capa de ruido) utilizando Ctrl + G para crear una carpeta de capas. Duplíquelo una vez y oculte el original para que siempre tengamos una copia del mismo. Para cada nuevo paso, vamos a crear un nuevo grupo duplicado. Este es solo un buen hábito básico, ya que garantiza que siempre tenga una copia de seguridad de nuestro patrón fundamental..
Bien, ahora vamos a torcer este patrón de ruido en algo oscuro y delicioso. Les mostraré cómo crear un patrón de ruido invertido que parece tener un brillo sutil..
Comience con una copia del grupo de ruido original (consulte el final del Paso 01). Lo primero que queremos hacer es hacer que el color de fondo sea Negro, así que adelante, haz eso en tu Capa Base.
Luego, debido a que nuestro Patrón de ruido está compuesto solo de píxeles "oscuros", necesitamos invertirlo esencialmente. Desafortunadamente, no podemos hacer esto como un efecto "inteligente", por lo que necesitamos aplanar el patrón de ruido. Asegúrese de tener el nivel de intensidad establecido en lo que desea, luego "Rasterizar" la capa. Puede hacerlo haciendo clic con el botón derecho en la capa y seleccionando Rasterizar en el menú contextual, o en Capa> Rasterizar> Rasterizar Capa menú.
Ahora que esencialmente hemos aplanado nuestro patrón de ruido, queremos invertirlo. Haz esto desde el "Imagen> Ajustes> Invertir"panel.
Que pasa Ya no puedes ver el patrón de ruido?
Necesitaremos hacer algunas modificaciones leves para ver nuestro patrón de ruido invertido. Primero, configure el modo de fusión en la capa de ruido a "Pantalla".
A continuación, ajuste los "niveles" de su patrón de ruido (Ctrl + Alt + L? O Imagen> Ajustes> Niveles).
Metodo alternativo: También puede simplemente agregar una capa de ajuste para los niveles (Capa> Nueva capa de ajuste> Niveles). Es posible que prefiera esta manera si desea realizar cambios en la intensidad más adelante..
¡Presto! Ahora tenemos un patrón de ruido brillante, invertido. Obviamente, puedes ajustar esto al contenido de tu corazón, hacerlo más oscuro y tenue, o más brillante y más intenso. Incluso puede cambiar el color de la capa base a azul oscuro o rojo para obtener otros efectos. Volverse loco!
Recuerda - guarda guardar estos como "patrones" en Photoshop seleccionando "Edita> Define Patrón". Haga esto y más adelante podrá usar estos patrones una y otra vez. Incluso puede guardar sus patrones como bibliotecas y compartirlos con amigos y colegas..
A continuación, le mostraremos cómo agregar profundidad y vitalidad a sus patrones de ruido.?
Agreguemos un poco de color y vitalidad a nuestro patrón de ruido ahora. Vale la pena mencionar que en los siguientes pasos usaremos algunas técnicas generales. no necesita seguirlos hasta la letra, solo tenga en cuenta a cada uno cuando vaya a crear sus propios patrones personalizados.
Comience agregando un poco de color a su capa base.
Ahora cree una copia de su capa de ruido y configure ambos modos de fusión en Color Burn. La capa duplicada nos ayudará a oscurecer la capa inferior. También nos dará la posibilidad de cambiar la opacidad en una escala más fina más adelante.
Crea una copia más, pero esta vez vamos a Rasterizarlo e Invertirlo (consulta el Paso 2, Ruido Negro, para obtener más información si te lo perdiste).
Establezca el modo de fusión en nuestra nueva capa en Pantalla. También queremos añadir una nueva capa de ajuste (Capas> Nueva capa de ajuste> Niveles) para que podamos controlar la intensidad del ruido de la luz..
Ahora vamos a crear un desplazamiento sutil empujando la capa de luz lejos de la capa oscura (1px arriba y 1px izquierda) usando la Herramienta Mover (V) y su teclado.
A continuación, agregue una máscara de capa sobre su capa de ruido de luz para que podamos jugar con ella.
Usando un pincel de textura áspera (establecido a aproximadamente 130px y el color Negro) queremos enmascarar un poco de nuestro ruido de luz, alejando la máscara de capa. Un trazo de pincel debería hacer el truco, pero usa tu propio criterio. La idea aquí es crear un patrón aproximado, aleatorio..
Ajusta la opacidad de la capa a alrededor del 45%. ¿Puedes hacer menos o más según tus propias preferencias? aunque solo estamos tratando de disminuir un poco la intensidad del contraste.
Ahora tenemos un buen patrón con un poco de profundidad. Sin embargo, si no estás cavando la profundidad, puedes jugar fácilmente moviendo la capa de ruido de la luz horizontalmente para eliminar la desviación y crear un simple efecto "brillante"..
Alacadabra! No esta mal eh? Esto es lo que la textura final sería:
Consejo de bonificación: Si observa alguna "costura" sutil cuando va a usar su nuevo patrón, intente recortar su patrón original en 5 o 10px alrededor de los bordes. A menudo obtendrá costuras si Photoshop decide agrupar píxeles de ruido más oscuros alrededor de los bordes de su capa de ruido, por lo que simplemente recortar los bordes dará como resultado un patrón limpio y sin fisuras.
Los siguientes dos pasos van a ir rápidamente. Ya hemos establecido los principios principales que necesitamos para crear casi cualquier patrón de ruido que puedas imaginar, por lo que te mostraremos cómo puede verse esta textura cuando comiences a jugar con el Color y la Intensidad del contraste. Echemos un vistazo a la versión verde?
Comience con una copia del grupo de capas Ruido azul. Continúa y cambia el color de la capa base a verde..
¿Notarás algo gracioso cuando cambies de color? el contraste proveniente del ruido tiende a cambiar de sutil a dramático con diferentes colores. Básicamente, esto significa que vamos a querer ajustar la opacidad de las capas de ruido para tener en cuenta la intensidad de desplazamiento. No hay una regla rígida para esto, solo juega con la configuración de opacidad hasta que tengas el aspecto que buscas..
Por último, aquí está el patrón de ruido terminado:
Lo mencionaré una vez más para estar seguro: si observa alguna costura en su patrón cuando vaya a usar una forma más grande o en su sitio web, lo que deberá hacer es recortar aproximadamente 10px alrededor de su forma. para eliminar los píxeles "de borde" que pueden ser más oscuros cuando Photoshop los agrega durante el primer paso "Filtro> Agregar ruido".
Bien, así que solo tengo un último truco en la manga para este tutorial. Hasta ahora, solo hemos estado ajustando la capa base cuando queríamos un nuevo color. ¿Todo esto está bien cuando queremos un patrón de ruido básico? Pero, ¿y si queremos algo con un poco de vida extra??
Bueno, este último paso es para ustedes que quieren solo eso: una capa de ruido de doble tono que tiene un poco de "chispa"..
Continúa y ponlo en marcha cambiando el color de fondo. Ajusta la opacidad de tu nivel de ruido a tu gusto (no me metí en nada con esta demostración en particular).
Aquí es donde lanzamos la bola curva: agregar una nueva capa de ajuste (Capas> Nueva capa de ajuste> Tono / Saturación) y conviértalo en una máscara de recorte sobre la capa de "ruido de luz". Ahora solo juegue con la configuración hasta que obtenga un bonito color dorado proveniente de la capa de ruido de luz.
El efecto final está aquí:
Es sutil, pero el ligero "brillo" que proviene de la capa de ruido superior agregará una gran vida a cualquier proyecto en el que lo uses. Disfrútalo y crea tus propias variaciones.!
¡Bien! Así que espero que hayas sacado algo de esta segunda sesión. A estas alturas ya debería tener una buena comprensión de los patrones de ruido y cómo usarlos en sus propios proyectos. ¿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 textura avanzados, patrones basados en formas, patrones transparentes y mucho 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