¿Cómo se llama el efecto de esta imagen?

Publicado en 'Foro Libre' por unknow, 2 Oct 2014.





  1. unknow

    unknow Miembro maestro

    Registro:
    18 Dic 2011
    Mensajes:
    719
    Likes:
    102
    Temas:
    174




    Hola a todos

    ¿Alguien sabe cómo poner cuadrados o rayas a una imagen?

    No sé explicarlo bien, por eso aquí pongo una página como ejemplo :

    http://www.mbcgroup.co.uk/

    Quiero saber si alguno de ustedes conoce una herramienta online para hacer eso, porque ahora, desde esta máquina, no puedo instalar ningún programa gráfico como Photoshop o Ilustrator.

    Ah, y si pueden también me dicen como se llama ese efecto

    Gracias
     


  2. loadingjkr

    loadingjkr Miembro maestro

    Registro:
    17 Ago 2012
    Mensajes:
    715
    Likes:
    362
    Temas:
    61
    HTML5

    JQUERY
    AJAX
    algo de Javascript


    el SWF pasó a la historia

    css3 .
     
    A Caracol limeño, IGLBala y Dreamliner les gustó este mensaje.
  3. unknow

    unknow Miembro maestro

    Registro:
    18 Dic 2011
    Mensajes:
    719
    Likes:
    102
    Temas:
    174
    No me refiero a eso.

    La imagen tiene unos cuadraditos, a parte de la transparencia

    Es que no soy diseñador gráfico, no sé cómo se llama ese efecto ni como lograrlo
     
  4. Sir_Ch4r7ie

    Sir_Ch4r7ie Suspendido

    Registro:
    27 Set 2014
    Mensajes:
    61
    Likes:
    20
    Temas:
    3
    solo lo puedes hacer con tu block de notas. no requieres instalar ptogramas.
     
  5. Frecarll

    Frecarll Miembro de oro

    Registro:
    21 Jun 2011
    Mensajes:
    6,333
    Likes:
    4,243
    Temas:
    76
    Photoshop, una capa, el color que quieras y jugar con la opacidad supongo.
     
  6. Caracol limeño

    Caracol limeño Miembro de honor

    Registro:
    24 Oct 2007
    Mensajes:
    34,513
    Likes:
    40,612
    Temas:
    1,281
    java script

    porque las imagenes de fondo no tienen originalmente esos recuadros.
    Ej:

    [​IMG]
     
  7. unknow

    unknow Miembro maestro

    Registro:
    18 Dic 2011
    Mensajes:
    719
    Likes:
    102
    Temas:
    174
    Creo que no soy bueno explicando porque no me han entendido.

    En esa página, hay una imagen que está en blanco y negro, tiene una transparencia y, además le han puesto algo parecido a un mosaico, como si la imagen tuviera encima un filtro de cuadraditos

    Puedo hacer la transparencia con RGBA
    Puedo poner la foto en blanco y negro con una herramienta online
    Lo que no sé cómo hacer son esos cuadraditos
     
  8. ghost

    ghost Miembro de oro

    Registro:
    27 Jun 2010
    Mensajes:
    9,035
    Likes:
    7,868
    Temas:
    315
    Es solo una textura de puntos colocada sobre una imagen desaturada, para lograrlo solo basta con hacer un pequeño cuadrado con puntos que luego conviertes en patron y lo aplicas a cualquier capa, luego juegas con la trasnparencia y listo.

    ¿que no tienes programas en tu maquina? pues usa versiones portables, yo siempre llevo en mi usb photoshop, ilustrator y autocad portable, no requieren instalación.
     
    Última edición: 2 Oct 2014
  9. Caracol limeño

    Caracol limeño Miembro de honor

    Registro:
    24 Oct 2007
    Mensajes:
    34,513
    Likes:
    40,612
    Temas:
    1,281
    eh.. yo si te he entendido y te he respondí, otra cosa es que te has cerrado y no entiendes que no es un efecto de imagen sino un efecto hecho solo para la web con lenguaje de programación.

    Aqui esta imagen principal de la misma web (mira la URL) y como veras NO TIENE recuadritos:

    [​IMG]
     
  10. unknow

    unknow Miembro maestro

    Registro:
    18 Dic 2011
    Mensajes:
    719
    Likes:
    102
    Temas:
    174
    No me estoy cerrando, es sólo que no le encuentro sentido a lo que dices. Yo estudio PHP y Java Script y sé que los lenguajes de programación no son para dar estilos, ni a imágenes ni a la página, a menos que uses framewors como Jquery.
     
  11. Yiepe

    Yiepe Miembro de plata

    Registro:
    1 May 2012
    Mensajes:
    3,184
    Likes:
    1,508
    Temas:
    3
    Se llaman rellenos de motivo, patrones o en Inglés "patterns". Aplicarlos sobre una foto es simple, descargas un "dot pattern" lo llevas a PS y lo guardas como motivo en menú Edición, luego abres la foto y en estilos de capa buscas superposición de motivo, ahí aparece el 'dot pattern' que habías guardado, puedes cambiarle la escala haciendolo mas pequeño, bajarle la opacidad, probar con fusiones de capa, etc.

    Para implementarlo en un slider o cualquier imagen sin retocar la foto ni usar PS ni AI, podrías descargar el 'dot pattern' como png con fondo transparente y aplicarlo como background en una capa que quede por encima de las fotos, como vas a usar la propiedad background-repeat, no va afectar en nada a la carga de tu web...

    y solo necesitas css...
     
    Última edición: 2 Oct 2014
  12. unknow

    unknow Miembro maestro

    Registro:
    18 Dic 2011
    Mensajes:
    719
    Likes:
    102
    Temas:
    174
    Muchas gracias, es la información que necesitaba