Tecnología

Inicio

Cómo crear botones de web 2.0 en Photoshop

Cómo crear botones de web 2.0 en Photoshop


Web 2.0 es un estilo popular en el diseño web. Web 2.0 botones tienen un aspecto tridimensional y brillante, como una burbuja, como si estuvieran haciendo estallar fuera de la pantalla. El proceso de creación de botones de web 2.0 implica un montón de trabajo y gradientes capa.

Instrucciones

1 Abrir Photoshop, crear un nuevo archivo y establecer el tamaño del lienzo a lo que será su tamaño del botón. Coge la herramienta de forma de la herramienta de la barra-elegir un rectángulo redondeado o un círculo, ya que es más común en el estilo de la web 2.0. Seleccionar un color para el botón y haga clic y arrastre para crear la forma de modo que casi llena el lienzo. Deja un par de píxeles alrededor de un borde. A continuación, haga clic en la capa de forma en el panel Capas y seleccione "Rasterizar."

2 Seleccione la herramienta de degradado. Echar un vistazo en el menú desplegable gradiente justo debajo de la barra de menú en la parte superior de la pantalla, y encontrar un gradiente de dos colores con el color de su forma y blanco. Si no ve los colores que desea, haga clic en la imagen de gradiente en la parte superior del menú en su lugar. Esto le llevará a un cuadro de diálogo en el que puede editar, crear y guardar gradientes personalizados. Haga su gradiente con los controles deslizantes. Una vez que tenga el gradiente de lo necesario, ajustar su opacidad gradiente de 40%. A continuación, haga clic con la tecla Control o Comando + clic en el icono de capa en el panel de capas para seleccionar los píxeles de la capa. Haga clic y arrastre desde la parte superior a aproximadamente 80% menos que la forma de aplicar el gradiente. Ahora, usando la herramienta de texto, cree un cuadro de texto y escriba el texto de este botón. Vuelve a tu puntero del ratón normal y la posición del texto en el centro del botón.

3 Añadir un golpe de 1 o 2 píxeles para el texto con estilos de capa. Hacer que el color del trazo un poco más oscuro que el color de botón. Haga lo mismo con su capa de botón. Hacer una nueva forma de la misma como la forma del botón original, pero alrededor del 90% tan ancho y 50% tan alto como el original. Posicionarlo en el centro y cerca de la parte superior de la forma original de los botones. Rasterizar la forma como lo hizo con su primera forma. Seleccionar los píxeles mediante el control o Comando-clic en el icono de capa y borrar el área seleccionada por completo. Ahora, seleccione la herramienta de degradado de nuevo y crear un gradiente que va de blanco a transparente. Ahora que ya sabe cómo de la última etapa, que debe ser fácil. Aplicar el gradiente haciendo clic y arrastrando hacia abajo a través de la forma de modo que el blanco está en la parte superior y se desvanece a la baja a transparente.

4 Seleccione la capa original de los botones en el panel Capas y haga doble clic en él para abrir el cuadro de diálogo Estilos de capa. A partir de ahí, seleccionar "Resplandor interior" de la columna de la izquierda y establecer la opacidad al 50%. Hacer que el color de su resplandor el mismo tono que el botón, pero un poco más ligero. Para hacer que se vea aún más en tres dimensiones, añadir una sombra al texto a través de estilos de capa para la capa de texto. Esto hace que el texto como si se pone encima de una burbuja brillante, semi-transparente.

Consejos y advertencias

  • Utilice un rectángulo redondeado o un círculo para su botón, y utilizar una fuente de aspecto moderno para su texto del botón. Una fuente como Times New Roman se vería extraño en un botón tales fresca, 3-D.
  • Es muy bueno para experimentar con los efectos, pero no ir por la borda con ellos. Demasiados o demasiado de un buen efecto hace que parezca cursi.