Como fazer este efeito nas imagens?

mortixx · 05/04/2015

Hola, como se consigue este efecto( o que filtro) como con rayas en la imagenes de el slider que os pongo a continuacion? Es que me encanta y no se como hacerlo🙂
:: YummyBakers | Products & Services Landing Page Template ::

Muchas Gracias y un saludete.

lombervid · 05/04/2015

Es una imagen :distant:

yoork · 05/04/2015

Crea una capa nueva de 3 x 3 px.. a cada pixel lo pintas con el lapiz..deja el medio transparente.. después vas a edición y lo definis como motivo:encouragement: por último vas a la capa de tu imagen y vas a edicion nuevamente.. le das a rellenar y eliges el motivo que creaste y listo..cualquier cosa consultame :encouragement:
un ejemplo rapido que hice.

jmnm · 05/04/2015

No es sólo una imagen ni se hace con photoshop, se logra mediante css. Si tengo tiempo luego te posteo un minitutorial.

mortixx · 05/04/2015

jmnm disse:
No es sólo una imagen ni se hace con photoshop, se logra mediante css. Si tengo tiempo luego te posteo un minitutorial.

No se te olvide🙂

lombervid · 05/04/2015

Si es una imagen, yo nunca dije que fuera una sola imagen el slider y las rayas. Es solo una imagen de fondo (la de las rayas) sobre la imagen del slider.

mortixx · 05/04/2015

Voy a probar y te digo pero el efecto que pones es muy exagerado quisiera mas sutil🙂

- - - Actualizado - - -

Efectivamente parece algo de css, he descargado la imagen y no tiene ese efecto por lo tanto descartado photoshop en este caso...
En esta otra tiene un efecto similar como con lineas que tampoco me desagrada.

lombervid · 05/04/2015

Usando la misma imagen que usan ellos, hacen algo como esto: https://jsfiddle.net/lombervid/6h4o0tph/embedded/result/

yoork · 05/04/2015

De poder se puede..solo que tendrias que usar menos pixeles para que sea mas limpio el efecto:encouragement: pero con css también se puede.

xxSakuraxx · 05/04/2015

Como dijeron antes es css pero es una imagen multiplicada superpuesta por otra.

http://www.dezinethemes.com/envato/ps/02/02/img/body-bg1.png

#slides .slide .slide-caption {
display: block;
background: url("../img/body-bg1.png") repeat scroll 0px 0px transparent;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
position: absolute;
width: 100%;
}

mortixx · 05/04/2015

+Yoork Podrías poner un par de capturas de como hacerlo? Así me guío que no me entero muy bien eso de pintar con el lápiz y tal y haber si lo hago y no me complico con css, gracias amigo[emoji106]

Enviado desde mi iPhone utilizando Tapatalk

- - - Actualizado - - -

lombervid disse:
Usando la misma imagen que usan ellos, hacen algo como esto: https://jsfiddle.net/lombervid/6h4o0tph/embedded/result/

Genial, pero como se hace?
Gracias

lombervid · 06/04/2015

mortixx disse:
+Yoork Podrías poner un par de capturas de como hacerlo? Así me guío que no me entero muy bien eso de pintar con el lápiz y tal y haber si lo hago y no me complico con css, gracias amigo[emoji106]

Enviado desde mi iPhone utilizando Tapatalk

- - - Actualizado - - -

Genial, pero como se hace?
Gracias

Ahi puedes ver los códigos HTML/CSS y Javascript (que en este caso no usa): https://jsfiddle.net/lombervid/6h4o0tph/embedded
Solo cambiate a su pestaña correspondiente del código.

Saludos.

Como fazer este efeito nas imagens?

mortixx

lombervid

yoork

jmnm

mortixx

lombervid

mortixx

lombervid

yoork

xxSakuraxx

mortixx

lombervid

Tópicos similares