Bennu Game Development

Foros en Español => Recursos => Topic started by: Mr Matsusaka on September 16, 2010, 06:39:40 PM

Title: Crear efectos de golpes para transparecia aditiva en Photoshop
Post by: Mr Matsusaka on September 16, 2010, 06:39:40 PM
Este tipo de efecto es muy bonito pero dibujarlo a mano puede ser una odisea que en la mayoria de los casos no termina de quedar bien por muchas horas que le echemos. Por eso me he animado a escribir este tutorial para crear efectos de golpes (ideales para juegos de mamporros) en Photoshop en menos de 10 minutos.

1-Creamos un grafico nuevo. Para un juego de 640x480 de resolucion algo como 128x128 puede ser suficiente, pero por si las moscas vamos a crear un grafico de 512x512 y posteriormente lo reduciremos hasta que se adapte a nuestro juego.


2-Cojemos la herramienta de degradado y vamos a rellenar de arriba a abajo con un degradado de blanco a negro, consiguiendo como resultado algo asi:
(http://img827.imageshack.us/img827/8243/tuto01.png)

Tenemos que pensar que la parte alta del dibujo sera el centro del efecto, y lo de abajo lo que lo rodeara. Por lo tanto sin importar los colores que elijamos la parte de abajo siempre tendra que ser negra. Ademas conviene que tanto la parte blanca como la parte negra tenga bastante margen, como un cuarto del marco o asi.

3-Posteriormente aplicaremos el filtro Distorsionar>Onda. Yo le pondre para este ejemplo los siguiente parametros, pero jugando con ellos conseguireis otros efectos distintos.
(http://img230.imageshack.us/img230/619/tuto02.png)

(http://img835.imageshack.us/img835/3060/tuto03.png)
Si os fijais este filtro no es perfecto y me ha dejado una linea oscura bastante gruesa en la parte de la izquierda. Esto no es bueno pues eso sera parte del centro del efecto, y es preferible que la parte de arriba sea todo blanco para que el efectos sea mas denso. Asique cortamos un trozo del centro, lo copiamos, y cubrimos esa zona. Acoplamos imagen
(http://img684.imageshack.us/img684/9192/tuto04.png)

4-Ahora aplicaremos el filtro Distorsionar>Ondas polares. Esto es lo que hara de nuestro grafico una esfera

5-Ya tenemos un destello bastante majo, pero le falta algo de cuerpo. Para ello duplicamos capa, a la superior le aplicamos un filtro Desenfocar>Desenfoque gaussiano y le damos un radio de 9 pixeles. Por ultimo en la ventana de capas, en la caja de opciones donde pone "Normal" le damos y le aplicamos en "Sobreexponer color".
(http://img443.imageshack.us/img443/3853/tuto05.png)

6-Por ultimo unimos las capas y para darle color le damos a Imagen>Ajustes>Tono/saturacion
(http://img687.imageshack.us/img687/8533/tuto06.png)

Sin embargo esto no es mas que un ejemplito basico de lo que se puede hacer. Con unos degradados mas trabajados se pueden conseguir efectos bastante majos. Todo es cuestion de ponerse y jugar con las variables a la hora de aplicar los flitros. Os aviso que los destellos para este tutorial son un poco gualtrapa, y que aplicando unos minutos mas se pueden conseguir resultados bastante profesionales.

(http://img638.imageshack.us/img638/2819/tuto07.png)(http://img819.imageshack.us/img819/7104/tuto08.png)
(http://img696.imageshack.us/img696/4100/tuto09.png)(http://img822.imageshack.us/img822/1381/tuto10.png)
Title: Re: Crear efectos de golpes para transparecia aditiva en Photoshop
Post by: FreeYourMind on September 16, 2010, 07:03:59 PM
Muy chulo  :D
Title: Re: Crear efectos de golpes para transparecia aditiva en Photoshop
Post by: La momia que fuma on September 16, 2010, 08:48:17 PM
Joer, pues la amarilla-naranja quedo increible...

Voy a tener que jubilar mi viejuno Paint Shop 7, algunos de esos filtros o no los tiene (o no los encuentro xD) o son muy simples (El de onda te las hace uniformes, con todos los "pinchos" iguales, que yo sepa no tiene opción para darle esa aleatoriedad)
Title: Re: Crear efectos de golpes para transparecia aditiva en Photoshop
Post by: Mr Matsusaka on September 16, 2010, 08:57:24 PM
Pueden llegar a quedar bastante mejor que los que yo pongo. Estos son los que me han salido a mi casi a la primera para hacer el tutorial. Ademas desplazando el degradado hacia abajo y haciendo el color negro cada vez mas dominante se puede hacer una animacion bastante maja.

Bajate un CS de prueba. Los CS son bastante sencillos de crackear la verdad
Title: Re: Crear efectos de golpes para transparecia aditiva en Photoshop
Post by: osk on September 16, 2010, 09:14:59 PM
Gimp forever!!!
Title: Re: Crear efectos de golpes para transparecia aditiva en Photoshop
Post by: Bayushi on September 17, 2010, 12:06:08 PM
Es una auténtica maravilla, Mr Matsusaka!! una manera genial de conseguir el efecto de impacto. ¿Tienes más técnicas con photoshop para iluminarnos?
Title: Re: Crear efectos de golpes para transparecia aditiva en Photoshop
Post by: Prg on September 17, 2010, 03:20:27 PM
genial, karma++ sería bueno tener este tipo de tutoriales más seguido.
Title: Re: Crear efectos de golpes para transparecia aditiva en Photoshop
Post by: Mr Matsusaka on September 17, 2010, 07:05:47 PM
No me se mas ;D
Title: Re: Crear efectos de golpes para transparecia aditiva en Photoshop
Post by: Drumpi on September 17, 2010, 07:43:43 PM
Yo me uno al karma, este tipo de trucos no te los enseñan en ninguna parte, y averiguarlo por tu cuenta te puede llevar siglos. Yo aun ando peleándome con las configuraciones de presión de la tableta gráfica :D :D :D

Estaría bien eso, recopilar este tipo de trucos en un minitutorial ¿no había otro para crear tiles para usarlos en mosaicos sin que se viesen los bordes, usando gimp y una herramienta de "desplazamiento"?
Title: Re: Crear efectos de golpes para transparecia aditiva en Photoshop
Post by: Futu-block on September 17, 2010, 09:28:19 PM
Quote from: osk on September 16, 2010, 09:14:59 PM
Gimp forever!!!
aamen hermano K'+

Quote from: Drumpi on September 17, 2010, 07:43:43 PM
Estaría bien eso, recopilar este tipo de trucos en un minitutorial ¿no había otro para crear tiles para usarlos en mosaicos sin que se viesen los bordes, usando gimp y una herramienta de "desplazamiento"?

tienes que darle a ''Mapa -> Crear sin costuras''
Title: Re: Crear efectos de golpes para transparecia aditiva en Photoshop
Post by: Danielo515 on October 03, 2010, 10:10:49 AM
Muchas gracias famigo!! Un karma pa ti. Como se os ocurren estas cosas? Yo con los filtros nunca se me ocurre nada, y mucho menos combinarlos sabiendo el resultado que voy a conseguir.
Que tal se ven luego en bennugd?
Title: Re: Crear efectos de golpes para transparecia aditiva en Photoshop
Post by: Mr Matsusaka on October 05, 2010, 10:07:44 PM
Se ve de puta madre ;D
http://www.megaupload.com/?d=VQWYXLMV
Title: Re: Crear efectos de golpes para transparecia aditiva en Photoshop
Post by: peterpollito on October 31, 2010, 11:41:33 PM
¿Has probado alguna vez AfterEffects? Bueno , tiene de serie muchos efectos luminosos de ese tipo y los puedes hacer tu, may muchisimos tutotiales, luego los pasas a .png , por ejemplo, con fondo transparente y tienes cualquier efecto.TE dejo un link por si te sirviera:

http://www.tuian.com.mx/

Es un ejemplo, pero hay mas.

Un saludo