En el tutorial Divi de hoy , le mostraremos cómo puede crear fondos con textura simples y usarlos como fondos para sus secciones para que su sitio web se vea un poco más auténtico. Si revisa nuestro diseño de gestión de aprendizaje gratuito reciente , verá que también hemos utilizado un fondo texturizado en todas las páginas.
Ahora, vamos a comenzar mostrándote dos tipos de texturas que recrearemos con Photoshop; texturas hechas con formas y texturas hechas con pinceles. Una vez que sepas cómo hacerlo, puedes ser tan creativo como quieras y crear auténticos fondos texturizados. Después de eso, le mostraremos cómo puede crear resultados sorprendentes al combinar 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, puedes obtener resultados sorprendentes como este:
Resultado de imagen hecho 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
Crear fondo texturizado con Photoshop
Hecho con formas
El primer fondo texturizado que le mostraremos cómo recrear tiene principalmente formas creadas con la herramienta Lazo poligonal y la herramienta Borrador. Te 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 te ayudará más adelante en esta publicación al agregar también las opciones de diseño de Divi. En este ejemplo, hemos usado ‘#626262’ como color de fondo y hemos usado la herramienta Cubo 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.
Añadir capa 3
Luego, agregue otra capa justo encima de la Capa 2.
Agregue la segunda capa de forma 3
Continúe creando otra forma, como la que se muestra en la pantalla de impresión a continuación, utilizando la herramienta Lazo poligonal.
Seleccione la herramienta Cubo de pintura y use ‘#6a6a6a’ esta vez.
Hasta ahora, su imagen debería verse así:
Use la herramienta Borrador en la capa 3
Continuando, seleccione la herramienta Borrador mientras tiene seleccionada la Capa 3.
Usa la Herramienta Borrador junto con un pincel que tenga 0% de dureza y un tamaño de 338px.
Luego, continúe y borre el área que desea que desaparezca. Hemos dejado deliberadamente solo 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ás aparecer en tu lista de capas.
Con ambas capas duplicadas seleccionadas, ve a Edición > Transformar > Girar 180° y arrastra las capas al otro lado de la imagen.
Guardar para Web
Lo único que queda por hacer es guardar la imagen. Para ello, 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 con textura usando pinceles. El fondo texturizado que le mostraremos cómo recrear se ve en este caso así:
Archivo nuevo
Comience de nuevo creando un nuevo documento con un ancho de 1920 px y una altura de 847 px.
Agregar color de fondo
Una vez hecho esto, agregue un fondo a la primera capa con el código de color ‘# 8f8f8f’.
Busque el pincel a juego en línea
El siguiente paso es encontrar un pincel que coincida con el estilo de tu sección principal. Hay muchos pinceles de Photoshop gratuitos que son impresionantes y también gratuitos. Puede encontrar y descargar el que usaremos en este tutorial en la siguiente página.
Subir pincel
Localice 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 guardó en su computadora.
Agregar capa 2
Una vez hecho esto, agregue otra capa justo encima de la Capa 1.
Usa el 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.
Elige el pincel que quieras con un tamaño de 600px y usa 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 ello, seleccione Archivo > Exportar > Guardar para Web .
Una vez más, elija si desea guardar su imagen como 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 del degradado en el medio y el otro en armonía con nuestra imagen de fondo.
Fondo degradado
Use el siguiente fondo degradado para su sección:
- Primer color: #474ab6
- Segundo color: #9271f6
- Tipo de gradiente: 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 la imagen de fondo: sin repetición
- Mezcla de imagen de fondo: superposición
Fondo texturizado hecho con pinceles
El fondo degradado que vamos a usar para el fondo texturizado hecho con pinceles es lineal. Haremos una transición sutil que aún separará ligeramente el color que se usa 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 gradiente: 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 la imagen de fondo: sin repetición
- Mezcla de imagen de fondo: superposición
Resultado
Ahora que hemos seguido todos los pasos, echemos un vistazo una vez más al resultado final.
Resultado de imagen hecho con formas
Resultado con las opciones de diseño de Divi
Resultado de imagen hecho 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 que su sitio web se sienta más auténtico. Le mostramos cómo puede crear dos tipos de texturas con Photoshop y luego 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úrate de dejar un comentario en la sección de comentarios a continuación!
¡Asegúrate de suscribirte a nuestro boletín de correo electrónico y canal de YouTube para que nunca te pierdas un gran anuncio, un consejo útil o un obsequio de Divi!
Imagen destacada por WEB-DESIGN / shutterstock.com