Como hacer este efecto en las imagenes?

M

mortixx

Gamma

No recomendado

¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!

• 5 Abr 2015

• #1

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

Eta

Verificación en dos pasos activada

• 5 Abr 2015

• #2

Es una imagen :distant:

 

yoork

Lambda

Diseñador

Verificación en dos pasos activada

• 5 Abr 2015

• #3

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.
​

 

Última edición: 5 Abr 2015

jmnm

Eta

Verificación en dos pasos activada

• 5 Abr 2015

• #4

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

 

M

mortixx

Gamma

No recomendado

¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!

• 5 Abr 2015

• #5

jmnm dijo:

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

Hacer clic para expandir...

No se te olvide🙂

 

lombervid

Eta

Verificación en dos pasos activada

• 5 Abr 2015

• #6

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.

 

M

mortixx

Gamma

No recomendado

¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!

• 5 Abr 2015

• #7

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

Eta

Verificación en dos pasos activada

• 5 Abr 2015

• #8

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

 

Última edición: 5 Abr 2015

yoork

Lambda

Diseñador

Verificación en dos pasos activada

• 5 Abr 2015

• #9

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

Dseda

Verificación en dos pasos activada

• 5 Abr 2015

• #10

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%;
}

 

M

mortixx

Gamma

No recomendado

¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!

• 5 Abr 2015

• #11

+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 dijo:

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

Hacer clic para expandir...

Genial, pero como se hace?
Gracias

 

Última edición: 5 Abr 2015

lombervid

Eta

Verificación en dos pasos activada

• 6 Abr 2015

• #12

mortixx dijo:

+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

Hacer clic para expandir...

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.