Cómo Dibujar Botones Para Un Sitio Web

Tabla de contenido:

Cómo Dibujar Botones Para Un Sitio Web
Cómo Dibujar Botones Para Un Sitio Web

Video: Cómo Dibujar Botones Para Un Sitio Web

Video: Cómo Dibujar Botones Para Un Sitio Web
Video: Botones Personalizados ★ Descargar botones para paginas web 2024, Noviembre
Anonim

Una interfaz fácil de usar, gráficos bien dibujados, la disposición correcta de los elementos en la página: la mitad del éxito del sitio con el visitante. Dibujar botones para un sitio web es una parte pequeña pero importante del trabajo en un proyecto en línea.

Cómo dibujar botones para un sitio web
Cómo dibujar botones para un sitio web

Instrucciones

Paso 1

Intenta dibujar un botón redondo. El método que se proporciona a continuación también es universal para crear logotipos y avatares. Dibujarlo no es difícil, a pesar de la cantidad de acciones que tienes que realizar.

Paso 2

Abra Adobe Photoshop. Cree un nuevo documento presionando la combinación "Ctrl + N". Parámetros de imagen 300 * 300, resolución 72 ppp. El fondo y el modo de color predeterminados son blanco y RGB, respectivamente.

Paso 3

Lo mejor es dibujar con vectores, para que cuando se reduzca el botón, su calidad no se deteriore. Seleccione la herramienta Oval, mantenga presionada la tecla Mayús y dibuje un círculo desde el centro.

Paso 4

Ahora aplique algunos efectos al círculo resultante. Vaya al menú "Capas" - "Estilo de capa" - "Opciones de fusión". Aquí deberá aplicar un degradado.

Paso 5

A continuación, aquí, marque la casilla junto a "Relieve" para darle al botón el abultamiento necesario y configure los siguientes parámetros: estilo - relieve del contorno, método - corte suave, profundidad - 220%, tamaño - 1 píxel, suavizado - 5 píxeles, ángulo - 135® sin iluminación global, altura - 32, modo resaltado - normal con 30% de opacidad, modo de sombra - multiplicar con 25% de opacidad

Paso 6

Para dar aún más volumen, aquí en los parámetros de fusión, marque la casilla "Sombra" y configure los siguientes parámetros: modo de fusión - multiplicación, transparencia - 40%, ángulo - 125o usando iluminación global, desplazamiento - 5 píxeles, tamaño - 20 píxeles.

Paso 7

El resultado de las acciones realizadas será una imagen como se muestra en la figura.

Paso 8

Ahora cree una nueva capa, seleccione "Oval" nuevamente y dibuje un círculo con un radio más pequeño que la primera forma. Abra las "Opciones de fusión", marque la casilla junto a "Sombra interior" y establezca los parámetros: Modo de fusión - Luz suave, Ángulo - 125o, Desplazamiento - 0px, Contracción - 45%, Tamaño - 21px.

Paso 9

A continuación, aquí en las opciones de fusión, marque "Superposición de degradado" y cree un degradado con los parámetros como en la imagen. Haga clic en Aceptar

Paso 10

A continuación, establezca el Estilo de fusión en Radial, Escala al 124%

Paso 11

Ahora marque la casilla "Trazo" y establezca los siguientes parámetros: tamaño - 5 píxeles, posición - exterior, modo de fusión - normal, opacidad - 100%, tipo de trazo - degradado.

Paso 12

Como resultado de estas acciones, debería obtener algo que se parezca más a un botón. Puede volver a abrir las opciones de fusión y experimentar con ellas.

Paso 13

Ahora necesitamos agregar los botones de resaltado para que el botón adquiera una textura de vidrio. Para hacer esto, cree una nueva capa nuevamente, seleccione la herramienta Selección de óvalo, cree un óvalo encima del botón y rellénelo con blanco usando la herramienta Relleno. Mantenga presionada la tecla Ctrl, haga clic en la capa con el círculo de color, invierta la selección ("Selección" - "Inversión"). Ahora presione Eliminar. El óvalo debe recortarse alrededor del perímetro del círculo.

Paso 14

En el panel Capas, cambie la opción Normal a Luz suave, luego haga clic en el icono de máscara vectorial y seleccione la Herramienta de relleno - Degradado. Rellena el resaltado de abajo hacia arriba. El botón está casi listo.

Paso 15

Puede agregar una inscripción al botón. También puede aplicarle efectos de fusión, como brillo interior, exterior, degradado, etc. No tengas miedo de experimentar, cuanta más imaginación uses en tu trabajo, más rápido dominarás tanto el editor como el diseño web.

Recomendado: