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 tercera edición: Texturas de fibra de carbono. Veremos cómo crear patrones de fibra de carbono profesionales y elegantes al comenzar con un enfoque simple de vainilla y luego tomar los mismos principios para crear versiones avanzadas..
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.
Asegúrate de revisar la primera publicación de la serie si la perdiste!
El día de hoy es el tercer 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 fibra de carbono" 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!
La textura básica de la fibra de carbono es bastante simple de crear. Hay miles de tutoriales para este patrón básico en la web, por lo que no vamos a abrir nuevos caminos aquí. Lo importante en este primer paso es que retoma los principios básicos que usaremos en las etapas más avanzadas. Los principales trucos son:
Comencemos nuestra versión básica creando un documento 4x4:
A continuación, tome una selección de 2x4 px del fondo (se muestra) y cree una nueva capa a partir de ella (Ctrl + J):
En la nueva capa 2x4px, agreguemos un degradado básico desde el panel Estilos de capa (haga doble clic en la capa o haga clic con el botón derecho y seleccione Estilos de capa). El gradiente que agregaremos se ejecutará de abajo hacia arriba y utilizará los colores Negro (# 000000) en la parte inferior a gris oscuro (# 4f4f4f) en la parte superior:
¿Este gradiente será la base de nuestra fibra de carbono? para que siempre pueda volver a este paso para cambiar el resultado del producto final.
A continuación, tomemos una selección de 1x4 píxeles de la capa de degradado utilizando la herramienta Rectangular Marquee y creamos una nueva capa cortándola (clic derecho> Capa a través de Cortar).
Ahora configura la opacidad en esta segunda capa a 92%.
Por qué? Estamos tratando de crear variaciones muy sutiles en los tonos de gris para que la fibra de carbono parezca tener una fuente de luz creíble. Obviamente, no hay una verdadera fuente de luz y no podemos crear una sin tener una imagen masiva (que anule el punto de un patrón de red), pero pequeños cambios en el sombreado engañarán al ojo para que piense que hay profundidad..
Combine las dos capas de 1x4 px juntas (arriba) y luego, usando la herramienta de marca nuevamente, quite una selección de 2x2 de la parte superior de la nueva capa:
A continuación, para crear nuestro efecto de patrón, cambie el orden de los dos mosaicos de 2x2 px de arriba a abajo, y viceversa:
¡Nuestro patrón ahora está completo! Simplemente guárdelo en su biblioteca de patrones usando el Edita> Define Patrón herramienta. Asígnele un nombre de su elección, y ahora aparecerá cada vez que use el Estilos de capa> Superposición de patrón biblioteca.
¡Bien! ¿Así que tenemos una fibra de carbono muy básica completa? Pasemos al siguiente paso, donde crearemos algunas modificaciones sobre esta idea..
La fibra de carbono básica se puede manipular con bastante facilidad. En este siguiente ejemplo breve, usaremos el mismo proceso y los mismos principios para crear una textura de fibra ligeramente más grande.
Nota: Voy a saltar a propósito algunas de las capturas de pantalla repetitivas que revisamos en el último paso, así que solo estaré destacando nuevas técnicas.
Comience este tiempo con un documento de 8px por 8px.
En el primer patrón de fibra de carbono que creamos, tomamos un atajo al crear un degradado único para todo el lado izquierdo del documento. Esto funcionó porque el documento solo tenía 4x4 y realmente no podía manejar más detalles de los que analizamos..
En esta segunda versión vamos a ser un poco más meticulosos con nuestra forma. Comience en su documento agregando un rectángulo 4x4:
Agrega otro rectángulo 4x4 para el espacio inferior (lo he pintado para que puedas verlo mejor):
Ahora necesitamos agregar un degradado sutil al cuadrado inferior. ¿Recuerdas, la región inferior izquierda es oscura? casi negro, así que usa un degradado muy oscuro:
Repita el paso de gradiente para la capa superior 4x4, pero esta vez será un gradiente de luz:
Duplique ambas capas 4x4 y realice el truco "fliperoo" donde cambiamos la posición de cada cuadrado a las esquinas opuestas del documento.
Ahora tenemos nuestro patrón básico de fibra de carbono, pero agreguemos un nivel de personalización agregando una capa de ajuste de niveles. Haga esto desde el menú Capas en la parte superior; Está buscando el botón "Capa> Nueva capa de ajuste> Niveles".
La capa de ajuste de niveles nos permitirá jugar con el brillo y el contraste de nuestro patrón de fibra. Cuando haya terminado, defina el patrón (Editar> Definir patrón) y estará listo para comenzar. Así es como se verá tu patrón:
Nota: Cuando intente utilizar la herramienta Definir patrón, asegúrese de que no está seleccionado en la Capa de ajuste? por alguna razón, Photoshop no te permitirá usar "Definir patrón" cuando estás en capas como esta (estará en gris hasta que selecciones otra capa).
Ahora tenemos un segundo patrón de fibra de carbono completo! Puede utilizar este mismo proceso básico una y otra vez para crear sus propias variaciones. Pruebe diferentes tamaños de documentos, agregue color, ajuste el contraste de sus degradados y cualquier otra cosa que pueda imaginar para crear efectos únicos..
Ok, entonces tienes lo básico abajo? ¡eso es genial! En este próximo paso, vamos a crear un patrón diagonal de fibra de carbono utilizando los mismos principios básicos que usamos en los primeros dos pasos, pero usaremos un pequeño giro radical en el diseño de cuadrícula de nuestro patrón para crear un efecto único.
Comience con un documento de 30px por 30px. Una vez que termine este paso, puede repetir el proceso utilizando un tamaño de documento diferente, pero este debe ser un buen punto de partida..
¿Vamos a trabajar en celdas de "5px" como regla general? así que vamos a empezar nuestro patrón creando un rectángulo que es de 5px de alto por 15px de largo.
A continuación, agregue un gradiente a través de nuestra primera forma:
Ahora agregue una forma cuadrada de 5px por 5px con el color de # 191919 directamente al lado de nuestra forma rectangular.
Propina: Use la "Herramienta de conversión de puntos" (debajo del panel de herramientas de lápiz) que necesita para ajustar o afilar los bordes. Sus formas deben terminar exactamente en píxeles definidos, no mostrar ningún "medio píxeles" borrosos.
¿Lo que tenemos aquí es nuestro patrón básico que vamos a repetir varias veces? así que vamos a convertir estas dos formas en un solo "objeto inteligente" para que siempre podamos volver a ellas para editar el degradado.
Nota: Siempre puede volver atrás y editar sus objetos inteligentes haciendo clic derecho en la capa y seleccionando "Editar contenido". Esto editará cada instancia del objeto inteligente? lo que hace que las ediciones sean rápidas y fáciles cuando tienes 10 o más duplicados flotando alrededor.
A continuación, necesitamos duplicar el objeto inteligente y empujarlo hacia abajo en 5px y hacia la izquierda en 5px.
Repita el mismo proceso de "Duplicar, luego Empujar" una y otra vez hasta que haya cubierto su documento. Consulte la captura de pantalla si se pierde, pero siempre debe haber una unidad de medida de 5px entre todas las partes principales.
Ahora vamos a añadir una capa de color de fondo. Usé un rectángulo simple para esto - establece el color en # 1e1e1e:
Finalmente, solo para estar seguros, agreguemos otra de esas capas confiables de Ajuste de Nivel para que podamos jugar con la oscuridad y el contraste sobre la marcha..
Whallah! Ahora puedes usar la herramienta Definir patrón nuevamente y usar el patrón donde quieras, de esta manera:
Para este último paso, ¿volveremos a utilizar los mismos principios básicos? Pero esta vez giramos las cosas 45 grados para crear otro efecto de fibra de carbono diagonal único..
Este patrón final es en realidad el más fácil de dominar, por lo que debería ser un paseo si has llegado hasta aquí.!
Comience con un documento de 8x8 y agregue un color de fondo. Usé Negro (# 000000), ¿puedes usar lo que quieras? Solo tenga en cuenta el color exacto para el siguiente paso:
Ahora agregue un rectángulo, medido a 4px de ancho por 8px de alto:
Todo debería estar familiarizado ahora - agregue un degradado sutil - el color final debe coincidir con nuestro color de fondo (mi degradado aquí es # 555555 a # 000000). Tenga en cuenta el ángulo: lo configuramos en 135 (o -45 dependiendo de cómo lo desee) para que coincida perfectamente cuando giramos la capa:
¡Bingo! Tenemos nuestro patrón final? ajusta el tamaño del documento y los colores de degradado para obtener tus propias variaciones personalizadas:
? Y aquí está:
¡Bien! Así que ahora debe tener una comprensión básica lo suficientemente buena como para crear sus propias variaciones personalizadas de estos patrones de fibra de carbono: juegue con las formas, colores, tamaños de documentos y más para agregar su propio toque personal a estos. Heck, incluso puedes invertir el sombreado para crear patrones sutiles de colores claros..
En las siguientes partes de esta serie, le mostraremos cómo crear algunos patrones de textura avanzados, más patrones basados en formas, patrones transparentes y aún 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