Pastilla tipo Mac (dificultad: fácil)

<b>Pastilla tipo Mac</b>

<img src="http://personal.telefonica.terra.es/web/alvarodesign/personal/pastilla_mac/images/pastilla.jpg" border="0" alt="Imagen IPB" />

<b>Tutorial</b> (Photoshop v7)

1. Creamos un documento nuevo de 400x300 con fondo blanco

2. Lo primero será crear la forma de la pastilla. Para ello creamos una selección de 309x97px y situamos guias en la selección y deseleccionamos (Ctrl+D)
<img src="http://personal.telefonica.terra.es/web/alvarodesign/personal/pastilla_mac/images/imag_01.gif" border="0" alt="Imagen IPB" />
Creamos una nueva capa que llamaremos <i>Pastilla</i>. Escogemos el color R105 G150 B203 y vamos a la herramienta <i>Rectángulo redondeado</i> (U) con radio 45px. y hacemos la forma ajustando a las guías.

3. Vamos a <i>Capa/Rasterizar/Forma</i>. Ya tenemos la pastilla creada. Ahora pasamos a los efectos.

4. Creamos una nueva capa que llamaremos <i>Borde negro</i>.

5. Hacemos Ctrl+click sobre la capa <i>Pastilla</i>. Escogemos el color negro.

6. Vamos a <i>Edición/Contornear</i> y escogemos 6px y Dentro. No deseleccionamos.

7. Ahora vamos a <i>Filtro/Desenfocar/Desenfoque gaussiano</i> y escogemos 16%. No deseleccionamos.

8. Creamos una nueva capa que llamaremos <i>Sombra blanca</i>. Vamos a <i>Selecci&n/Modificar/Contraer</i> y escogemos 15%. No deseleccionamos.

9. Vamos a <i>Selecci&n/Calar</i> y escogemos 8%. Rellenamos de blaco y deseleccionamos. Con la herramienta <img src="http://personal.telefonica.terra.es/web/alvarodesign/personal/pastilla_mac/images/imag_02.gif" border="0" alt="Imagen IPB" />
seleccionada y pulsando la tecla may&sculas (Shift) movemos la capa hacia abajo hasta que se pegue a la guía inferior. Cambiamos el modo de la capa de normal a luz suave.
<img src="http://personal.telefonica.terra.es/web/alvarodesign/personal/pastilla_mac/images/imag_03.gif" border="0" alt="Imagen IPB" />

10. Creamos una nueva capa que se llame <i>Brillo</i>. Volvemos a hacer
Ctrl+click en la capa <i>Pastilla</i>. Vamos a <i>Selecci&n/Modificar/Contraer</i>
y escogemos 35% y <i>Selecci&n/Calar</i> y escogemos 8%. Rellenamos
de blanco y escogemos los siguientes valores:
<img src="http://personal.telefonica.terra.es/web/alvarodesign/personal/pastilla_mac/images/imag_04.gif" border="0" alt="Imagen IPB" />

11. Movemos hacia abajo la capa m&s o menos como en la imagen inferior
<img src="http://personal.telefonica.terra.es/web/alvarodesign/personal/pastilla_mac/images/imag_05.gif" border="0" alt="Imagen IPB" />

12. Con la herramienta Pluma (P) hacemos el siguiente trazado
<img src="http://personal.telefonica.terra.es/web/alvarodesign/personal/pastilla_mac/images/imag_06.gif" border="0" alt="Imagen IPB" /> <img src="http://personal.telefonica.terra.es/web/alvarodesign/personal/pastilla_mac/images/imag_07.gif" border="0" alt="Imagen IPB" />

13. Se nos habr& creado una capa llamada <i>Forma</i>. Hacemos Ctrl+click en ella, la desocultamos y creamos una nueva llamada <i>Reflejo</i>.

14. Escogemos el color blanco y vamos a la herramienta Degradado (G). Cogemos la opción <i>Color forntal / transparente</i>
<img src="http://personal.telefonica.terra.es/web/alvarodesign/personal/pastilla_mac/images/imag_08.gif" border="0" alt="Imagen IPB" />

15. Haciendo un zoom sobre la selección, aplicamos el degradado de la siguiente forma:
<img src="http://personal.telefonica.terra.es/web/alvarodesign/personal/pastilla_mac/images/imag_09.gif" border="0" alt="Imagen IPB" />
Bajamos la opacidad de la capa a un 70%.

Ahora aplicaremos las sombras.

16. Vamos a la capa <i>Pastilla</i> y hacemos doble click sobre ella para que se nos abra Estilo de capa (o bien <i>Capa/Estilo</i> de capa). Escogemos <i>Sombra paralela</i> y ponemos los siguientes par&metros:
- Multiplicar
- Color: R80 G121 B164
- Opacidad 75%
- Ángulo 90º; Usar ángulo global
- Distancia 25
- Extensión 0
- Tamaño 25

17. Por encima de la capa <i>Pastilla</i> creamos una nueva capa que se llame <i>Reflejo sombra</i>. Hacemos Ctrl+click en la capa <i>Pastilla</i>, contraemos la selección 40px y calamos un 8%.

18. Rellenamos de blanco y cambiamos a modo <i>Sobreexponer color</i> - <i>Relleno</i> 30% (como en el punto 10).

19. Por último, vamos a crear el texto por debajo de la capa <i>Reflejo</i>.
Yo he utilizado la palabra aqua con fuente Gill Sans a tamaño 60px y le he dado una <i>Sombra paralela</i> con los siguientes parámetros:
- Multiplicar
- Color: R108 G152 B199
- Opacidad 75%
- Ángulo 90º Usar ángulo global
- Distancia 8
- Extensión 0
- Tamaño 8

Y ya está, ya tenemos la pastilla tipo Mac

<img src="http://personal.telefonica.terra.es/web/alvarodesign/personal/pastilla_mac/images/pastilla.jpg" border="0" alt="Imagen IPB" />

 

Magnífico tutorial para hacer botones, me van a venir de maravilla para hacer una página Web, muchas gracias

 

Gracias, me alegro de que te haya servido el tutorial. Ya irás enseñando lo que vas haciendo de esa web.

Saludos

 

Hola:

Primero dar las gracias por el tuto

obi-alf si eres tan amable de explicar un poco más detallado como se hace lo de la pluma, es que me quedo ahi pillado y no consigo que me salga

Gracias

 

Buenas Mordecai y bienvenido
Te lo explico, es sencillo

<img src="http://www.oposicionesycursos.com/personal/foro_creativo/tutoriales/pluma_01.jpg" border="0" alt="Imagen IPB" />

Lo primero haces click en el punto 1 y luego sobre el 2 y sin soltar el botón del ratón mueves hacia abajo y derecha para que A coja más o menos el ángulo y la longitud de la figura (sigues sin soltar). Una vez lo tienes pulsas la tecla Alt (esta sirve para mover con independencia una A de B) y luego Mayúsculas (Shift) (esta sirve para mover en ángulos rectos y de 45º), lo pones como en la figura y sueltas el botón y luego las teclas. Vuelves a pulsar Mayúsculas y pinchas. Ahora solo te queda repetir el proceso para sacar una figura como la de la Fig. 12 pequeña.

Te aconsejo que practiques lo del trazado de objetos con fotos para practicar, al principio puede resultar lioso, pero verás como es sencillo y se hace automático

Saludos

 

Buen tutorials, felicidades
Un saludo

 

Hola a todos
Te quiero dar las gracias por este tutorial, tal y como lo esplicas es sencillo de realizar y que te salga bien.
He estado mirando otros tutoriales de botones, en otras páginas y te puedo decir que este es el mejor.
Muchisimas gracias.

 

un tutorial magnifico, muchas gracias obi-alf...

un saludo.

 

que bueno !!!

Te felicito, y gracias por la ayuda bechos

 

Hola!!

El tutorial me parece muy bueno. Es sencillo y se entiende muy bien. PEro yo todavia estoy atascado en lo de la pluma. Hago el primer trozo, pero no consigo que se haga toda la barra. Me pierdo despues de soltar los botones alt y control por primera vez.

Podrias explicarlo de forma mucho más detallada,... es que soy un poco torpe y tal.

 

Visto que hay muchas dudas sobre el trazado de figuras he puesto un tutorial de cómo trazar.
Os rogaría que pusierais vuestros comentarios (si os aclara, si no está bien explicado, no entiendo esto o lo otro...) para asi intentar explicarlo mejor.

 

Hola Obi. Las imágenes del tutorial no se ven y yo, sin ellas, me pierdo bastante. ¿Podrías ponerlas de nuevo?

 

Es posible que Obi no te responda ya que tiene un tiempo que no se le ve por aqui...

 

Ya le envié un mensaje a Obi-alf. Esperemos a que aún tenga las imagenes disponibles.

 

Muchas gracias a los dos :wink:

 

Hola a todos,
no veo las fotos del tutorial, a que puede ser debido?. Esto me pasa con muchos de ellos.

 

luancq, eso pasa cuando alguien postea en un tema muy antiguo. Es porque las imagenes ya no están disponibles.

 

Hola Reg,
gracias por responder, entonces ¿como puedo ver el tutorial/s a los que no se les ven las fotos?.

 

hosting

por lo que veo estan hosteadas en una pagina personal de el y como no se conecta mas eso deber ser por que no se ven.. no tiene mas allguna cuenta en personal de terra y no hay host.. por eso creo yo!!

 

La idea que se me ocurre es que posteen de nuevo sus dudas en un tema aparte, para ver si hay algún usuario participante en estos momentos que posea la solución.