Cómo crear y usar fondos texturizados con las opciones de diseño de Divi

En el tutorial de Divi de hoy, le mostraremos cómo puede crear fondos texturizados simples y usarlos como fondos para sus secciones para que su sitio web se vea un poco más auténtico. Si consulta nuestro reciente Diseño gratuito de gestión de aprendizaje, verá que también hemos utilizado un fondo texturizado en todas las páginas.

Ahora, vamos a empezar mostrándote dos tipos de texturas que recrearemos con Photoshop; texturas hechas con formas y texturas hechas con pinceles. Una vez que sepa cómo hacerlo, puede ser tan creativo como desee y crear fondos texturizados auténticos. Después de eso, le mostraremos cómo puede crear resultados asombrosos combinando los fondos texturizados y las opciones de diseño de Divi.

Resultado de imagen hecho con formas

La primera imagen que le mostraremos cómo crear con Photoshop se ve así:

Resultado con las opciones de diseño de Divi

Y una vez integrado en Divi, puede obtener resultados asombrosos como este:

Resultado de imagen realizado con pinceles

La segunda imagen que haremos se ve así:

Resultado con las opciones de diseño de Divi

Y puede ofrecer el siguiente hermoso resultado al usarlo en su sitio web:

Cómo crear y usar fondos texturizados con las opciones de diseño de Divi

Suscríbete a nuestro canal de Youtube

Crea un fondo texturizado con Photoshop

Hecho con formas

El primer fondo texturizado que le mostraremos cómo recrear tiene principalmente formas que se crean con la herramienta Lazo poligonal y la herramienta Borrador. Lo guiaremos paso a paso sobre cómo crear el siguiente resultado:

Archivo nuevo

Abra Photoshop y comience agregando un nuevo archivo. Este archivo necesitará un ancho de 1920px y una altura de 847px.

Agregar color de fondo

Luego, agregue un color de fondo al archivo que acaba de crear. Asegúrate de usar colores grises ligeramente más oscuros durante todo el proceso. Es esencial usar un color que sea un poco más oscuro, ya que lo ayudará más adelante en esta publicación cuando también agregue opciones de diseño Divi. En este ejemplo, usamos '# 626262' como color de fondo y usamos la herramienta Bote de pintura para agregar el color a la capa.

Agregar capa 2

Continúe agregando una nueva capa justo encima de la primera capa.

Agregue la primera forma a la capa 2

Luego, seleccione la herramienta Lazo poligonal y comience a hacer una forma mientras tiene seleccionada la Capa 2.

Una vez hecho esto, seleccione la herramienta Bote de pintura y use '# 747474' para colorear la parte seleccionada.

Agregar capa 3

Luego, agregue otra capa justo encima de la Capa 2.

Agregue la segunda capa de forma 3

Continúe haciendo otra forma, como la que se muestra en la pantalla de impresión a continuación, utilizando la herramienta Lazo poligonal.

Seleccione la herramienta Bote de pintura y use '# 6a6a6a' esta vez.

Hasta ahora, su imagen debería verse así:

Utilice la herramienta Borrador en la capa 3

Continuando, seleccione la herramienta Borrador mientras tiene seleccionada la Capa 3.

Utilice la herramienta Borrador junto con un pincel que tiene una dureza del 0% y un tamaño de 338px.

Luego, continúe y borre el área que desea que desaparezca. Deliberadamente, solo hemos dejado una pequeña parte de la Capa 3 donde puede ver una transición entre la Capa 2 y la Capa 3.

Duplicar, transformar, rotar y colocar capas en el lado opuesto

Ahora que hemos creado el lado izquierdo, el otro lado irá mucho más rápido. Queremos que sea exactamente igual, por eso vamos a seleccionar tanto la Capa 2 como la Capa 3. Luego, vamos a duplicar las capas.

Una vez duplicados, los verá aparecer en su lista de capas.

Mientras tiene las dos capas duplicadas seleccionadas, vaya a Editar> Transformar> Girar 180 ° y arrastre las capas al otro lado de la imagen.

Guardar para Web

Lo único que queda por hacer es guardar la imagen. Para hacer eso, haga clic en Archivo> Exportar> Guardar para Web .

Por último, asegúrese de que el archivo sea JPG o PNG y guárdelo.

Hecho con pinceles

A continuación, le mostraremos cómo crear fondos texturizados usando pinceles. El fondo texturizado que le mostraremos cómo recrear se ve en este caso como este:

Archivo nuevo

Empiece de nuevo creando un nuevo documento con un ancho de 1920px y un alto de 847px.

Agregar color de fondo

Una vez hecho esto, agregue un fondo a la primera capa con el código de color '# 8f8f8f'.

Buscar Pincel a juego en línea

El siguiente paso es encontrar un pincel que coincida con el estilo de tu sección de héroe. Hay muchos pinceles de Photoshop gratuitos que son impresionantes y también gratuitos. Puede encontrar y descargar el que usaremos en este tutorial yendo a la siguiente página.

Cargar pincel

Busque el archivo ABR en su computadora y vaya a Photoshop para cargar los pinceles. Seleccione Editar> Ajustes preestablecidos> Administrador de ajustes preestablecidos> Pinceles> Cargar y seleccione el archivo ABR que ha guardado en su computadora.

Agregar capa 2

Una vez hecho esto, agregue otra capa justo encima de la Capa 1.

Use un pincel con el color más claro

Luego, puede comenzar a usar su pincel para crear el fondo texturizado que desee seleccionando la herramienta Pincel.

Elija el pincel que desee con un tamaño de 600px y use una opacidad del 60%.

'

El primer color que usaremos es '# a0a0a0'. Continúe y haga la primera capa de pincel en su imagen.

Use el mismo pincel con un color más oscuro

Luego, reemplaza el color anterior con '#ababab' y haz lo mismo.

Use el mismo pincel con el color más oscuro

Por último, deberá usar el color '# 686868' para terminar su fondo texturizado.

Guardar para Web

Ahora que su fondo texturizado está listo, lo único que queda por hacer es guardar la imagen. Para hacerlo, seleccione Archivo> Exportar> Guardar para Web .

Una vez más, elija si desea guardar su imagen como un archivo JPG o PNG.

Agregar fondos texturizados a las secciones

Fondo texturizado hecho con formas

Puede jugar con la configuración de fondo de Divi para lograr el resultado exacto que desea una vez que haya creado las imágenes. Para el fondo texturizado hecho con formas, vamos a elegir un tipo de degradado radial para tener uno de los colores degradados en el medio y el otro en armonía con nuestra imagen de fondo.

Fondo degradado

Utilice el siguiente fondo degradado para su sección:

• Primer color: # 474ab6
• Segundo color: # 9271f6
• Tipo de degradado: radial
• Dirección radial: centro
• Posición inicial: 41%
• Posición final: 100%

Opciones de fusión de imágenes

Luego, cargue la imagen y use la siguiente configuración:

• Tamaño de la imagen de fondo: Portada
• Posición de la imagen de fondo: Centro
• Repetición de imagen de fondo: sin repetición
• Mezcla de imagen de fondo: superposición

Fondo texturizado hecho con pinceles

El fondo degradado que vamos a utilizar para el fondo texturizado hecho con pinceles es lineal. Haremos una transición sutil que aún separará ligeramente el color que se está utilizando en armonía con la imagen de fondo.

Fondo degradado

Abra la configuración de la sección y use la siguiente configuración para la subcategoría Fondo:

• Primer color: # 474ab6
• Segundo color: # 9271f6
• Tipo de degradado: lineal
• Dirección del gradiente: 270 grados
• Posición inicial: 70%
• Posición final: 100%

Opciones de fusión de imágenes

Luego, cargue la imagen de fondo y use la siguiente configuración junto con ella:

• Posición de la imagen de fondo: Centro
• Repetición de imagen de fondo: sin repetición
• Mezcla de imagen de fondo: superposición

Resultado

Ahora que hemos seguido todos los pasos, una vez más, echemos un vistazo al resultado final.

Resultado de imagen hecho con formas

Resultado con las opciones de diseño de Divi

Resultado de imagen realizado con pinceles

Resultado con las opciones de diseño de Divi

Pensamientos finales

En esta publicación, le mostramos cómo puede usar fondos texturizados para hacer que su sitio web se sienta más auténtico. Le mostramos cómo puede crear dos tipos de texturas con Photoshop y le mostramos cómo puede usarlas dentro de sus secciones junto con las opciones de diseño de Divi. Si tiene alguna pregunta o sugerencia; ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!

¡Asegúrese de suscribirse a nuestro boletín informativo por correo electrónico y al canal de YouTube para que nunca se pierda un gran anuncio, un consejo útil o un obsequio de Divi!

Imagen destacada de WEB-DESIGN / shutterstock.com