divagame

el diseño es algo más que hacer que las cosas parezcan bonitas (web 2.0)

Efecto de reflejo en texto con Photoshop CS2 Diciembre 4, 2006

Guardado en: diseño, photoshop, tutorial, web, web2.0 — divagame @ 10:12 am

Vamos a ver cómo podemos crear una capa de texto en algo más, cómo lo diría yo… en algo más “2.0″. ( reseñar que este pequeño tutorial está basado en la versión CS2 de Photoshop).

1. Creamos dos capas: En total tendríamos tres. Una la que nos sale por defecto y otras dos transparentes. Algo tal que así:

Paso numero 1

2. En la Capa 1 creamos un objeto texto y a continuación con la herramienta Marco rectangular, seleccionamos parte de esa capa.

Paso numero 2

Paso numero 3

3. Ya tenemos el texto y la selección (en una capa). Ahora, sin deseleccionar el marco de puntos, nos ponemos en la Capa 2 y creamos un difuminado (blanco - transparente).

Finalmente quedaría como vemos a continuación:

Paso numero 4

Un difuminado de este tipo:

 

Paso numero 5

Con la Capa 2 seleccionada:

Paso numero 6

4. Ahora vamos a deformar la Capa 2 para hacer un efecto de onda en el difuminado. Sin desconfigurar lo que hemos hecho ( tenemos la Capa 2 seleccionada ), apretamos CTRL + T, para la transformación libre. Observaremos que los puntos intermitentes se han convertido en líneas con cuadrados en ocho puntos. En la barra de arriba apretamos este botón.

Paso numero 7

Hemos cambiado de modo transformación libre a deformación.

5. Veremos que nos ha salido una barra desplegable en esta opción. Elegimos Bandera.

 

Paso numero 8

6. Recordemos que todo lo que hemos modificado ha sido en la Capa 2. Nos preguntará si queremos aplicar la deformación, le damos a Aceptar.

7. A continuación empezaremos a trabajar con la Capa 1, donde tenemos nuestro texto. Para aplicar el difuminado a éste, haremos lo siguiente:

- Encima del cuadro de la Capa 2, apretamos CTRL, y sin soltar la tecla la arrastramos a la Capa 1.

 

Paso numero 10

- Para saber si lo hemos hecho bien, nos tiene que quedar así:

Paso numero 9

8. Muy bien. Tenemos seleccionado el texto de la Capa 1. Ahora vamos a modificar esa selección que nos ha quedado:

- Selección -> Modificar -> Contraer -> X pixels ( X = el número varía según el tamaño del texto y el grosor de las letras elegidas )

Paso numero 11

- Ahora: Selección -> Invertir. Y suprimimos. (Tecla SUPR).

9. Hemos borrado el borde de las letras.

Paso numero 12

10. Qué bonito, ¿no?. Está bien.. pero le falta algo. Vamos a ponerle un reflejo por abajo. Lo haremos de esta manera:

- En el cuadro de las Capas, seleccionamos la Capa 1 (la de nuestro texto), apretamos el botón derecho y la duplicamos.

- Seleccionamos la Capa duplicada y apretamos CTRL + T, para poder trabajar con él libremente. Pinchamos en el cuadrado de arriba y lo movemos hacia abajo. Quedaría así:

Paso numero 14

11. Nos queda poco. Para darle degradado, seleccionamos con la herramienta Marco rectangular la zona en la que queremos trabajar. Por ejemplo:

 

Paso numero 15

 

¡ Voilâ ! Con esto y un bizcocho, hasta mañana a las ocho.

 

Final

 

 

Efecto de reflejo en badge 2.0 con Photoshop CS2 Octubre 5, 2006

Guardado en: diseño, photoshop, tutorial, web — divagame @ 11:20 am

Este tutorial, se basa en la versión CS2 de Photoshop.

  1. Creamos dos capas: Una, para el Fondo y otra, para el objeto. Nos quedaría tal que así:

    Creamos las capas necesarias

  2. Ahora, dibujaremos el objeto polígono, con éstas características: (Opciones de polígono: Estrella, Sangría lateral 15% y Lados 16)
  3. Escogemos el objeto poligono

     

    Caracteristicas del poligono

  4. Bien, ahora ya configurado, lo incrustamos en la Capa 1.
  5. Objeto poligono creado

  6. Para darle efecto de relieve iremos a: Capa -> Estilo de Capa -> Opciones de fusión. Y escogeremos las opciones de Sombra paralela y Bisel y relieve.
  7. Estilo de capa

  8. Podemos jugar con alguna propiedad más, eso queda a gusto de consumidor. A mí me ha quedado de esta manera:
  9. Poligono con relieve y estilo

  10. A continuación, escogemos la herramienta Varita mágica y seleccionamos el objeto, apretando dentro del relleno.
  11. El siguiente paso es darle borde a la figura. ¿Cómo?. Tienes que ir a: Selección -> Modificar -> Contraer. Y ahí le damos aproximadamente 5 pixels.
  12. Borde de poligono

  13. Ahora tendremos que cambiar las propiedades de la herramienta Degradado, como muestra la figura. Color: De blanco a transparente y la segunda opción, de las cinco que tenemos.
  14. Herramienta degradado

  15. Este paso también es a gusto del consumidor, arrastramos el degradado por encima, como queramos.
  16. Poligono con relieve y estilo

  17. Por último, el texto. Ya sabéis, herramienta texto, Os aconsejaría que le diérais estilo a esta capa también. Con un degradado y un relieve poco pronunciado, valdría.
  18. Voilâ ! Tenemos nuestro badge, calentito, calentito.
  19. Badge 2.0 con Photoshop

con ayuda de photoshoptv.com