Concepto Pixel

Crear un botón con Hover en Photoshop + CSS

Publicado en 18. Oct, 2009 por Luis Lopez Garay in Blogging, Tutoriales, Tutoriales Photoshop

Tutorial de como crear un botón con Photoshop en 2 estados, en reposo y en lo que conocemos como Hover, también se da el código en CSS y el HTML para ponerlo en tu sitio web o blog, este tutorial es mío pero lo publique en otro blog ya que en el también estoy escribiendo y me pareció justo, como es mío y es interesante, publicar un enlace hacia el con un demo de lo que es. Lo que hace este botón es que cuando pasas el ratón cambia su imagen, color o lo que desees según lo que hayas diseñado usando solo un bloque de CSS y un link con una clase llamando al CSS.

Bueno hace ya un tiempo hice un tutorial para otro blog en el que estoy escribiendo, dicho blog no es mío, solo escribo para el, y se llama InBlogOS, es un blog de blogging, wordpress, novedades 2.0 y esas cosas, me pareció interesante publicar un tutorial que quería publicar desde hace tiempo aquí en Concepto Pixel pero ya había pasado por mi mente mejor publicarlo allá y mencionarlo aquí.

E este tutorial mas que nada aprenderás a crear un botón en Photoshop con 2 estados, 1 cuando esta en reposo y otro que cambia cuando pasas el mouse o puntero encima de el, a esto se le llama Hover, es muy sencillo, dejo el tutorial de Photoshop para hacer el botón en sus 2 estados y aparte los códigos tanto CSS como HTML para ponerlo en tu sitio web o blog.

Vista previa de un botón con hover en CSS y HTML, así queda después de seguir el tutorial, claro que aquí si pude poner la vista previa en vivo porque dentro de mi blog puedo añadir el código CSS y en el otro blog no, así que hice otro botón para demostrarlo aquí:

Concepto Pixel

Les dejo un muy pero muy pequeño extracto del tutorial:

Paso 1 – Creando el Documento

Una vez abierto Photoshop (si eres inteligente puedes seguir este tutorial incluso en GIMP) crea un nuevo documento, el tamaño de ancho de tu botón, y procura que la altura que quiera darle, introduzcas el valor multiplicado por 2 (altura), por ejemplo la altura de mi botón será de de 40 Pixeles , así que tengo que poner 80 pixeles de altura. Esto es para poner 2 botones, uno de estado normal y otro que se mostrara cuando se pase el mouse sobre el, será el mismo pero de diferente color . De Ancho elige 183 Pixeles o lo que quieras.

Paso 2 – Creando una guía

Para que no te confundas después, crear una guía es una buena opción ya que la necesitaras para trazar el primer rectángulo redondeado con la Herramienta de Rectángulo Redondeado (Rounded Rectangle Tool – U), desliza el mouse mientras das click de esquina a esquina tratando de que se ajuste solo a la mitad de arriba, para crear la guía necesitas ir a Ver > Nueva Guía (View > New Guide), o si tienes la regla activada (CTRL+R) simplemente arrástratela, una vez creada la guía horizontal colócala arrastrándola en medio (exactamente) de la imagen (horizontalmente), es fácil ya que photoshop tiene un sensor que te provoca un efecto imán hacia el centro.

Ya es suficiente si quieren leerlo completo:

Enlace: Crear un Botón con Efecto Hover Usando CSS y Photoshop

Entradas Relacionadas:

1. 47 Tutoriales para crear Botones, Web Layouts, Barras de Navegación, Banners y Más
2. Crear un texto colorido neon en Photoshop
3. Como crear una bonita Ilustración Vintage con Photoshop
4. 21 Tutoriales Photoshop, Photomantix o Lightroom para crar imagenes HDR
5. Crear una X estilo leopard con Photoshop

Este articulo fue escrito por Luis Lopez Garay

Soy un chico de 17 años que vive en Tijuana Mexico, estudio en la preparatoria CETis 58 y me apasiona el diseño, desde chiquito me gusta y leo muchos tutoriales. Esta web al hice para compartir mis aficiones, y porque no, pagar mi universidad con las ganancias.