Este artículo toma como ejemplo la versión china de Photoshop CS2. Los pasos para otras versiones de Photoshop pueden ser ligeramente diferentes. Primero echemos un vistazo al efecto final.
Los pasos específicos para
el efecto final
son los siguientes.1. Inicie la versión china de Photoshop CS2, presione Ctrl+N para abrir el cuadro de diálogo "Nuevo", realice algunas configuraciones según sea necesario (el tamaño debe poder adaptarse al menú de navegación futuro) y haga clic en el botón "Aceptar" para crear un nuevo documento.
2. Haga clic en el botón "Crear nueva capa" debajo del panel de capas para crear una nueva capa. Seleccione la "Herramienta Rectángulo redondeado" en la caja de herramientas, establezca su radio en 15 px en la barra de opciones y luego dibuje un rectángulo redondeado como se muestra en la Figura 1 en la nueva capa.
Figura 1
3. Ahora aplique el siguiente estilo de capa a la forma de arriba.
proyección:
Figura 2
sombra interior:
Figura 3
Resplandor interior:
de la Figura 4
:
Figura 5
trazo:
en la Figura 6
, se obtiene el efecto de botón que se muestra en la Figura 7.
Figura 7
4. Ahora use la "Herramienta Rectángulo redondeado" nuevamente, esta vez, dibuje un rectángulo redondeado blanco más pequeño sobre el botón, como se muestra en la Figura 8.
Figura 8
5. Establezca el modo de fusión de esta capa en "Superposición" y establezca la opacidad en 30%, puede obtener el efecto de botón como se muestra en la Figura 9.
Figura 9
6. Luego copie estos botones, organícelos en un menú de navegación y agregue el texto, como se muestra en la Figura 10.
Figura 10
7. Seleccione la "Herramienta de corte" en la caja de herramientas, abra el menú "Ver" y confirme que hay una marca de verificación a la izquierda de "Alinear". Esto alineará automáticamente los cortes con los bordes y creará una imagen más precisa. rebanadas. Utilice la "Herramienta de corte" para cortar botón por botón, y cada corte contiene un botón. El resultado se muestra en la Figura 11.
Figura 11
8. Ahora que se ha realizado el corte, puede generarlo como un archivo HTML para prepararlo para el diseño web posterior. Seleccione el comando de menú "Archivo | Guardar para Web". Para obtener el mejor efecto de imagen, utilice la configuración que se muestra en la Figura 12. Después de la configuración, haga clic en el botón "Guardar".
Figura 12
9. En el cuadro de diálogo "Guardar resultados de optimización como", seleccione la ubicación donde se guardará el archivo de la página web, ingrese el nombre del archivo como se muestra en la Figura 13, seleccione el tipo de guardado como "HTML e imágenes (*. html)", y luego haga clic en Haga clic en el botón "Guardar".
Figura 13
: Esto dará como resultado una página HTML y una carpeta de imágenes, que contiene imágenes de botones.
Ahora solo necesita copiar el código HTML a otras páginas web para usarlo, pero no copie las etiquetas de encabezado/cuerpo generadas por Photoshop al copiar.