Crear Botones Web 2.0

Navegando por los tags de diseño de del.icio.us encontré este muy interesante manual en inglés de como crear botones en estilo web 2.0. Viendo este manual, junto con los anteriores que publiqué resumo que un diseño para ser web 2.0 debe tener reflejos y degradados.

Aqui dejo el enlace y el manual.

Crear botones web 2.0

Web 2.0 style buttons
Nowadays Web 2.0 style becomes more popular. Every day tons of sites which has simple, bright and very interesting things, appear in Network. There are no standards about creating any Web 2.0 elements, but we have several typical features, for example and clean colors, many gradients.

Today I want to show you how to create Web 2.0 styled button using Adobe Photoshop CS2.

  1. Open the Photoshop, create new document for the button.
  2. Create shape for future button using Rounded Rectangle tool on toolbar, specify round radius.
    Web 2.0 Button - Initial
  3. Right click on rectangle layer in Layers palette, choose Blending Options.
  4. Set the Gradient Overlay effect parameters. I have following color of first and second thumb: 434343, third – 000000.
    Web 2.0 Button - Initial gradient
  5. You can find Stroke effect parameters below. Stroke color is 363636.
    Web 2.0 Button - Initial stroke
  6. Set the Inner Glow effect options.
    Web 2.0 Button - Initial inner glow
  7. As the result you will get following image:
    Web 2.0 Button - Initial result
  8. Create rectangle using Rounded Rectangle tool, it will be used as button glare.
    Web 2.0 Button - Glare
  9. Right click on “glare” layer, choose Rasterize Layer.
  10. Click Edit in Quick Mask Mode on toolbar.
  11. Choose Gradient Tool, create gradient like following:
    Web 2.0 Button - Glare mask
  12. After leaving quick mask mode, you will get selection area. Click Delete button.
    Web 2.0 Button - Glare result
  13. Add layer with text “Entries RSS” and RSS icon. Set Drop Shadow effect parameters.
    Web 2.0 Button - Text

Now you got following button:

Web 2.0 Button - Result

After changing different effects parameters, adding or changing elements, I got following buttons:

Web 2.0 Button - Example 1

Web 2.0 Button - Example 2

Web 2.0 Button - Example 3

Web 2.0 Button - Example 4

Updated: You can download PSD sources here.

Una respuesta

  1. gracias por el aporte

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: