DESIGNAID

Herramientas claves para representar tus ideas

Texturas para web con photoshop

pildora_ps.gifHasta ahora me he dedicado a postear procesos simples que te pueden ser de utilidad al afrontar cualquier proyecto de diseño con nuestras herramientas de diseño, pero todavia no he tratado nada del web. de hecho pronto abriré la sección de dreamweaver para practicar un poco de esa exitosa aplicación para el montaje web. Pero antes de eso, tratemos un poco sobre photoshop para el web, y como podemos usar todas las capacidad de esta potente herramienta para nuestro sitio o nuestro blog.

Estoy seguro que una de las cosas que más has visto siempre en las páginas web, es el uso del fondo en la página. o mejor dicho, las texturas que podemos generar en el fondo de nuestro sitio. esto es super fácil de lograr con photoshop y usaremos un metodo super facil y muy similar al pixelart (pixel por pixel) y haremos texturas como estas:

texturas_web.gif

De hecho, no solo lo puedes usar para el web, ya que puedes usarlo para otros trabajos de diseño. y lo mejor de todo es que las posibilidades son infinitas! empecemos.

Para ello usaremos un filtro llamado DITHERBOX. y esta es una de las cosas que nunca entendi de Adobe. este filtro es en mi opinion uno de los filtros mas utiles que existe, -sobre todo para el web- mas sin embargo, nunca entendi porque lo eliminaron en las versiones de photoshop 7, 8 y 9. (CS, CS2 y CS3 para explicarme mejor) o mejor dicho, no es que fue removido totalmente,es que para usarlo tenias que instalarlo manualmente desde el cd original. es decir ya no estaba incluido en la instalacion por defecto de photoshop.

El filtro de Ditherbox lo puedes encontrar en el menu de FIlter > Other. si no lo encuentras alli entonces es porque estas trabajando con cualquiera de las versiones que nombre anteriormente, asi que debes instalarlo aparte. si no tienes el cd original de photoshop para buscar el archivo no hay problema no te preocupes. busca en el BOX de designaid el archivo “DitherBox.zip” y descargalo en tu computadora. Ahora descomprime el archivo dentro del zip llamado: “DitherBx.8bf” este es el archivo del filtro. para instalarlo en tu computadora primero cierra photoshop y luego copia el archivo “DitherBx.8bf” en la carpeta de “Plug-ins” que encontraras dentro de la carpeta de phothoshop en tu computadora. la direccion seria algo asi: “C:\Archivos de programa\Adobe\Adobe Photoshop CS3\Plug-Ins” Listo! ya está instalado, eso es todo. ahora solo abre photoshop, crea un archivo nuevo y y busca en el menu de Filtros > Other y alli deberias encontrar “Ditherbox”.

Usar Ditherbox es muy simple. empieza por crear un archivo nuevo en photoshop. crealo con el fondo blanco, ya que para aplicar ditherbox hay que tener pixeles ya pintados en las capas. 

Ahora solo vete al menu de Filter > Other > Ditherbox, y te aperecera la ventana de ditherbox:
(haz click en la imagen para verla en tamaño completo)

ditherbox.gif

En esta pequeña ventana se hace toda la magia. y mas simple no puede ser. Dihterbox te muestra una previsualizacion muy pequeña con la cantidad de pixeles que puedes pintar. justo alli tienes varias configuraciones para crear tu textura. hay de 2×2 pixeles, 3×3 pixeles, 4×4. 5×5, etc. esos son los tamaños de tu textura. ahora solo debes escoger del panel de colores de la derecha los valores que quieres usar en tu textura. simplemente seleccionalos y pintas pixel por pixel tu textura. fijate que alli mismo en la ventana de “pattern” puedes ir viendo como va a quedar tu textura. usa el icono del cuenta gotas para seleccionar un colo, el lapiz para pintar y el borrador para eliminar lo que quieras borrar.

Una de las cosas que mas me gustan de este filtro es que puedes salvar tus texturas! fijate que a la izquierda puedes hacer click en el boton de “new” y puedes ir guardando las texturas para usarlas nuevamente mas adelante. fijate que yo ya guarde las que usé para el montaje de la muestra de las texturas: (haz click en la imagen para verla en tamaño completo)
ditherbox.gif

Incluso tambien puedes cambiarle el nombre a las texturas haciendo click en el boton de “rename”.
Una vez que hayas hecho la textura que te gusta, simplemente presiona el boton de “fill” y listo! Photoshop rellenara ahora tu capa con esta textura. muy facil no? te recomiendo que cuando hagas estas texturas de fondo para tu pagina web o para tu blog uses colores análogos, es decir colores que estén dentro de la misma gama cromatica para que tu fondo no resalte tanto con respecto al contenido.

También puedes usar este filtro de maneras muy creativas y diferentes mas que solo para crear texturas. de hecho yo lo acabo de usar en esta imagen para simular como si el arte fuese una fotografia que le tomé a la pantalla del televisor:

 afiche_ditherbox.gif

Esto es todo por ahora.
Enviame tus comentarios/opiniones/solicitudes a mi correo, tengo mucho material y me gustaria saber si te gustaria hacer algo especifico. tambien me puedes escribir en linea por el meebo, estoy conectado mas que todo por las noches.

Nos vemos en el proximo post!

Luis S.

14 comentarios»

  Raul wrote @

el efecto en si, es bien basico, pero como dijistes, las posibilidades son infinitas, si se usa bien puede destacar un aviso, o un anuncio de millones. ;P.

good tut.

  arauca wrote @

necesito urgente como lo puedo bajar
no se como ayuda!

  Luis Suárez wrote @

Arauca:

No entiendo mucho tu pregunta, pero si te refieres al Ditherbox, lo puedes bajar aqui mismo en el blog. en la segunda columnda del sitio (RECURSOS) esta el BOX de arvhivos. (es el cuadro azul) alli mismo busca y baja el archivo “DITHERBOX.ZIP” dentro encontraras el archivo. ahora lee paso a paso el post para usarlo.

saludos.

Luis S.

  joshua wrote @

ola como estas solo quiero saber si tu me puedes ayudar unas cositas como a utilizar el filtro de extraer y para que me digas ocmo consigo nuevos filtros y cosas nuevas para mi ADOBE PHOTOSHOP GRACIAS ESPERO RESPUESTA

  Luis Suárez wrote @

Hola Joshua.

Gracias por escribirme y por la petición. Ya estoy preparandome para postear sobre el comando de extraer para que les ayude a trabajar mas rápido en Photoshop. Con tu otra petición sobre cosas nuevas para tu Photoshop echale un vistazo al blogroll. Estos son los vinculos que tengo aqui en Designaid. alli hay muchos recursos que te pueden ayudar.

saludos.

Luis S.

  Balamo wrote @

Muchas gracias, el filtro es una herramienta muy buena. No se porque lo quitaron de los filtros por default. Muchas gracias.

  aleksdesign wrote @

hola
soy un diseñador grafico de Peru soy algo nuevo en wordpress. me podras ayudar
kiero creasr una red de personas que le guste su carrera de diseño
o que le paresca interesante
aver si me agregas

  Luis S. wrote @

Hola alek felicitaciones por tu iniciativa si quieres empezar con wordpress visita: http://es.wordpress.com/ tambien hay innumerables recursos en internet para seguir aprendiendo!🙂

saludos.

Luis S.

  dalmau wrote @

hola, como has hecho lo del gorila . Como hago para hacerlo con una imagen? gracias.

  Luis S. wrote @

Hola dalmau. gracias por escribirme.

UUffff esa imagen la hice hace mucho jeje pero lo que hice fue usar Ditherbox para crear una textura de una linea de 1 pixel blanca y linea de 1 pixel negra. hice todo esto en una capa que coloque encima de la foto del gorila en photoshop. Luego elimine las lineas blancas de la primera capa, quedando solamente las lineas negras y dando el efecto como si la imagen fuese una foto de un televisor. Tambien le puedes agregar efectos a la segunda capa para resaltar la idea de una foto del tv (la que tiene la imagen del gorila en mi ejemplo) aplicandole un filtro de FILM GRAIN suave para sacarle detalles y hacerlo mas real. Tambien puedes experimentar con otros filtros como pixelate tambien.

espero te ayude🙂

saludos.

Luis S.

  dalmau wrote @

como quitas las lineas blancas de la capa?
para utilizar el Ditherbox la capa tiene que tener color, no?
yo le pongo un poco de blanco sino me dice que esta vacia y no me deja utilizar el Ditherbox
El film grain es pelicula granulada, no?
Donde esta el pixelate ? cual es su traduccion al castellano?

  Luis S. wrote @

@dalmau:

Para quitar el blanco de la capa puedes usar SELECT > COLOR RANGE para seleccionar solamente los tonos blancos y luego borrarlos con la tecla de delete.
SI. para poder usar Ditherbox pinta primero algo en tu capa.
Si. FILM GRAIN es el granulado.
PIXELATE en la version en español deber ser pixelado.

espero te ayude.

saludos.

Luis S.

  dalmau wrote @

hola, el pixelate son varios filtros donde pone pixelar? saludos.

  Luis S. wrote @

Si Dalmau. esos mismos.


Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: