ramonjosegn
Sigma
Verificación en dos pasos activada
Verificado por Whatsapp
¡Usuario popular!
Hace unos días que me encontré una de esas imágenes con fondo rayado diagonal, seguramente habrás visto muchas de ellas, aunque hoy en día quizás ya no estén tan de moda.
Si eres un usuario/a que estás comenzando con Adobe Photoshopt te habrás preguntado cómo se hacen ese tipo de rayados, ya que si intentas crearlos manualmente, te volverás loco/a.
Me refiero a rayados como los que puedes ver en este banner (le añadí algo de contraste para que se vea mejor), por ejemplo
El origen del archivo está disponible desde el siguiente enlace web > Enlace eliminado
Ahí quedan los pasos, espero que os guste.
☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂
PASO 1. -
Por supuesto abrir nuestro software Adobe Photoshop para comenzar a trabajar.
☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂
PASO 3. -
Creamos un archivo nuevo de 4 x 4 píxeles, generalmente este tipo de rayados se usan para web, así que usaremos 72 dpi que es el valor habitual para usarlo en pantalla y con modo de color RGB.
Además estableceremos el fondo a TRANSPARENTE.
Puedes guiarte por la captura de pantalla.
Nota - si vas a usar el fondo rayado para otro tipo de destino, tendrás que usar otros parámetros apropiados (300 dpi y cmyk para impresión offset, por ejemplo).
Aceptamos para generar el nuevo lienzo de trabajo.
☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂
PASO 4. -
Hacemos ZOOM AL MÁXIMO sobre el archivo creado, hasta que puedas verlo como en mi caso.
☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂
PASO 5. -
Seleccionamos la herramienta LÁPIZ y trazamos una línea en diagonal, con color NEGRO y con un pincel que sea "duro".
☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂
PASO 6. -
Ahora seleccionamos TODO EL ARCHIVO, con la opción SELECCIÓN > TODO
Debería quedar una línea discontínua parpadeando (como una fila de hormigas):
☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂
PASO 7. -
Nos dirigimos al menú EDICIÓN > DEFINIR MOTIVO
Y le damos un nombre cuando nos aparezca el cuadro de diálogo
En mi caso le pondré fondo_rayado
ACEPTAMOS
Y ya puedes cerrar el documento si lo deseas (o dejarlo abierto para hacerle cambios).
☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂
PASO 8. -
Creamos algún documento nuevo para comenzar a trabajar y usar el rayado que hemos creado.
Escogeremos los mismos parámetros de modo de color (RGB), 72 dpi, etc. Al tamaño que consideres oportuno, por supuesto.
En mi caso voy a crear un documento nuevo con las opciones prefijadas de Adobe Photoshop para web de 800x600 con fondo BLANCO para poder ver el efecto:
☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂
PASO 9. -
Creamos una capa nueva transparente, donde aplicaremos nuestro efecto de fondo. Lo hacemos de esta forma para poder controlar la opacidad de la capa o aplicar filtros de capa en caso de que queramos hacer algo creativo.
Nota - asegúrate de que es la capa con la que trabajaremos seguidamente, es decir, que esté seleccionada.
☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂
PASO 10. -
Accedemos al MENÚ > EDICIÓN > RELLENAR
☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂
PASO 11. -
A continuación en el cuadro que habrá aparecido seleccionamos MOTIVO como opción para RELLENO
Aparecerá una lista de los motivos a seleccionar, entre ellos estará el que hemos creado durante este tutorial.
Lo seleccionamos.
Y aceptamos
☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂
PASO 12. -
Ahora ya tenemos nuestro fondo rayado APLICADO al documento.
Puedes jugar con la opacidad de la capa hasta conseguir el efecto que desees, aplicar filtros de color, etc.
En este caso he aplicado una superposición de degradado y he bajado la opacidad de la capa, y así queda
☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂
PASO 13. -
Ahí muestro un diseño rápido que armé, para que lo veas aplicado.
☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂
Espero que os haya gustado.
Si tienes alguna duda con gusto trataré de resolverla.
Recomendable que guardes el MOTIVO para futuras ocasiones (o el archivo original).
También puedes generar interesantes fondos con servicios como los que te comparto a continuación:
Stripe Generator - ajax diagonal stripes background designer
Stripe Generator - ajax diagonal stripes background designer
Stripe Generator - ajax diagonal stripes background designer
Stripe Generator - ajax diagonal stripes background designer
ZenBG—Background Generator
ZenBG?Background Generator
Noise Texture Generator v2.1
Noise Texture Generator v2.1
Tartan Designer - Tartan Maker - Tartan Background pattern generator
http://www.tartanmaker.com/
Background Image Generator - SiteOrigin
http://bg.siteorigin.com/
Patternify | A CSS Pattern Generator
http://www.patternify.com/
Hero Patterns | Free repeatable SVG background patterns for your web projects
http://www.heropatterns.com/
The Pattern Library
Enlace eliminado
DinPattern – Free seamless patterns » Patterns
http://www.dinpattern.com/category/patterns/
Free Seamless Pattern Backgrounds | Patterncooler.com
https://www.patterncooler.com/
Subtle Patterns | Free textures for your next web project
https://www.toptal.com/designers/subtlepatterns/
http://www.bgpatterns.com/
Patternizer - Stripe Pattern Generator Tool
https://patternizer.com/gw0g
Seamless Background Pattern Generator & Maker v1.0
http://patternico.com/
Si eres un usuario/a que estás comenzando con Adobe Photoshopt te habrás preguntado cómo se hacen ese tipo de rayados, ya que si intentas crearlos manualmente, te volverás loco/a.
Me refiero a rayados como los que puedes ver en este banner (le añadí algo de contraste para que se vea mejor), por ejemplo
El origen del archivo está disponible desde el siguiente enlace web > Enlace eliminado
Ahí quedan los pasos, espero que os guste.
☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂
PASO 1. -
Por supuesto abrir nuestro software Adobe Photoshop para comenzar a trabajar.
☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂
PASO 3. -
Creamos un archivo nuevo de 4 x 4 píxeles, generalmente este tipo de rayados se usan para web, así que usaremos 72 dpi que es el valor habitual para usarlo en pantalla y con modo de color RGB.
Además estableceremos el fondo a TRANSPARENTE.
Puedes guiarte por la captura de pantalla.
Nota - si vas a usar el fondo rayado para otro tipo de destino, tendrás que usar otros parámetros apropiados (300 dpi y cmyk para impresión offset, por ejemplo).
Aceptamos para generar el nuevo lienzo de trabajo.
☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂
PASO 4. -
Hacemos ZOOM AL MÁXIMO sobre el archivo creado, hasta que puedas verlo como en mi caso.
☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂
PASO 5. -
Seleccionamos la herramienta LÁPIZ y trazamos una línea en diagonal, con color NEGRO y con un pincel que sea "duro".
☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂
PASO 6. -
Ahora seleccionamos TODO EL ARCHIVO, con la opción SELECCIÓN > TODO
Debería quedar una línea discontínua parpadeando (como una fila de hormigas):
☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂
PASO 7. -
Nos dirigimos al menú EDICIÓN > DEFINIR MOTIVO
Y le damos un nombre cuando nos aparezca el cuadro de diálogo
En mi caso le pondré fondo_rayado
ACEPTAMOS
Y ya puedes cerrar el documento si lo deseas (o dejarlo abierto para hacerle cambios).
☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂
PASO 8. -
Creamos algún documento nuevo para comenzar a trabajar y usar el rayado que hemos creado.
Escogeremos los mismos parámetros de modo de color (RGB), 72 dpi, etc. Al tamaño que consideres oportuno, por supuesto.
En mi caso voy a crear un documento nuevo con las opciones prefijadas de Adobe Photoshop para web de 800x600 con fondo BLANCO para poder ver el efecto:
☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂
PASO 9. -
Creamos una capa nueva transparente, donde aplicaremos nuestro efecto de fondo. Lo hacemos de esta forma para poder controlar la opacidad de la capa o aplicar filtros de capa en caso de que queramos hacer algo creativo.
Nota - asegúrate de que es la capa con la que trabajaremos seguidamente, es decir, que esté seleccionada.
☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂
PASO 10. -
Accedemos al MENÚ > EDICIÓN > RELLENAR
☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂
PASO 11. -
A continuación en el cuadro que habrá aparecido seleccionamos MOTIVO como opción para RELLENO
Aparecerá una lista de los motivos a seleccionar, entre ellos estará el que hemos creado durante este tutorial.
Lo seleccionamos.
Y aceptamos
☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂
PASO 12. -
Ahora ya tenemos nuestro fondo rayado APLICADO al documento.
Puedes jugar con la opacidad de la capa hasta conseguir el efecto que desees, aplicar filtros de color, etc.
En este caso he aplicado una superposición de degradado y he bajado la opacidad de la capa, y así queda
☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂
PASO 13. -
Ahí muestro un diseño rápido que armé, para que lo veas aplicado.
☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂
Espero que os haya gustado.
Si tienes alguna duda con gusto trataré de resolverla.
Recomendable que guardes el MOTIVO para futuras ocasiones (o el archivo original).
También puedes generar interesantes fondos con servicios como los que te comparto a continuación:
Stripe Generator - ajax diagonal stripes background designer
Stripe Generator - ajax diagonal stripes background designer
Stripe Generator - ajax diagonal stripes background designer
Stripe Generator - ajax diagonal stripes background designer
ZenBG—Background Generator
ZenBG?Background Generator
Noise Texture Generator v2.1
Noise Texture Generator v2.1
Tartan Designer - Tartan Maker - Tartan Background pattern generator
http://www.tartanmaker.com/
Background Image Generator - SiteOrigin
http://bg.siteorigin.com/
Patternify | A CSS Pattern Generator
http://www.patternify.com/
Hero Patterns | Free repeatable SVG background patterns for your web projects
http://www.heropatterns.com/
The Pattern Library
Enlace eliminado
DinPattern – Free seamless patterns » Patterns
http://www.dinpattern.com/category/patterns/
Free Seamless Pattern Backgrounds | Patterncooler.com
https://www.patterncooler.com/
Subtle Patterns | Free textures for your next web project
https://www.toptal.com/designers/subtlepatterns/
http://www.bgpatterns.com/
Patternizer - Stripe Pattern Generator Tool
https://patternizer.com/gw0g
Seamless Background Pattern Generator & Maker v1.0
http://patternico.com/
