Iconos elegantes para sitios web o presentaciones multimedia – Photoshop Star

Iconos con estilo para sitio web o presentación multimedia

Este útil tutorial de Photoshop sobre cómo hacer íconos elegantes que puede aplicar en el diseño de su sitio web o usar en una presentación multimedia.

Entonces, ¡comencemos! Al principio crea un nuevo archivo sobre 500×300 píxeles y rellénelo con color blanco. Ahora, proceda directamente a crear el ícono. Cree una nueva capa, luego seleccione la Herramienta Elipse para hacer la forma redonda como se puede ver en mi foto de abajo.

Iconos elegantes para sitio web o presentación multimedia 01

Después de eso, aplique lo siguiente Opciones de fusión: superposición de degradado y trazo.

Iconos elegantes para sitio web o presentación multimedia 02

Iconos elegantes para sitio web o presentación multimedia 03

Ahora tenemos algo como esto:

Iconos con estilo para sitio web o presentación multimedia 04

Realmente no parece un icono, ¿no es así? No te preocupes, procesamos el tutorial. Ahora, usa el Herramienta de marco elíptico para hacer la selección de lo que puede ver en mi captura de pantalla a continuación, luego cree una nueva capa y complete la selección con azul oscuro (#1c2133) a degradado transparente.

Iconos con estilo para sitio web o presentación multimedia 05

Ok, ahora seleccione nuestro ícono de forma redonda (Ctrl + clic izquierdo en la miniatura de la capa en la paleta de capas) e invierta la selección con Ctrl+Mayús+I. borrar el área seleccionada presionando Borrar botón.

Iconos con estilo para sitio web o presentación multimedia 06

Deseleccione el área elegida con Control+D y pasar al siguiente paso del tutorial. Utilizar el Herramienta Elipse de nuevo para hacer una nueva forma redonda con el color de #5ebf1a. Esté atento a que la segunda forma redonda debe ser un poco menos que la forma principal.

Iconos elegantes para sitio web o presentación multimedia 07

Luego, aplique estilos de capa como Resplandor interno y Trazo a esta capa de forma.

Iconos con estilo para sitio web o presentación multimedia 08

Iconos con estilo para sitio web o presentación multimedia 09

Iconos con estilo para sitio web o presentación multimedia 10

¡Pero aún no hemos terminado el icono! ¡Seguir! Rasterizar esta forma con Capa > Rasterizar > Forma. Entonces sal del Herramienta de marco elíptico para hacer una selección similar a la que se hizo antes al comienzo de este tutorial, luego use el Herramienta Esquivar (Pincel: 100 px, Rango: Medios tonos, Exposición: 20%) para que la parte inferior de la forma verde sea un poco más clara.

Iconos con estilo para sitio web o presentación multimedia 11

Después de eso, invierta la selección con Ctrl+Mayús+I y cambio Gama de herramientas Dodge desde Medios tonos a reflejos y seguir trabajando.

Iconos con estilo para sitio web o presentación multimedia 12

Ok, después de eso, revierte la selección y ahora usa el Herramienta de grabación (Brocha: 100px, Rango: Tonos medios, Exposición: 30%) para agregar el contraste al botón.

Iconos con estilo para sitio web o presentación multimedia 13

Bien, ¡casi hemos terminado! Eliminar la selección con Control+D y pasar al siguiente paso. Me gustaría traer algún adorno a la forma verde. Selecciona el Herramienta de forma personalizada y use una de las formas estándar de Photoshop de la galería. Intenté usar este:

Iconos con estilo para sitio web o presentación multimedia 14

Se verá mejor si aplicamos algunos Opción de fusión como sombra paralela

Iconos con estilo para sitio web o presentación multimedia 15

El resultado debería ser el mismo que el mío:

Iconos con estilo para sitio web o presentación multimedia 16

Ok, ahora combine todas las capas del ícono en una y aplique Editar > Transformar > Distorsionar:

Iconos con estilo para sitio web o presentación multimedia 17

Después de eso, duplique esta capa usando Control+J y mueva la capa original inferior como en mi imagen a continuación:

Iconos elegantes para sitio web o presentación multimedia 18

Use el estilo de capa Superposición de color para esta capa.

Iconos con estilo para sitio web o presentación multimedia 19

¿Ves la diferencia ahora?

Iconos con estilo para sitio web o presentación multimedia 20

Queda por agregar una sombra en la parte inferior y nuestro ícono estará listo. Ok, muévase a la capa de fondo y cree una nueva capa arriba. Selecciona el Herramienta de marco elíptico para crear la selección como en mi imagen a continuación y rellenarla con color negro.

Iconos con estilo para sitio web o presentación multimedia 21

Deseleccione esta capa con Seleccionar > Deseleccionar y aplicar Filtro > Desenfocar > Desenfoque gaussiano con configuraciones similares a estas:

Iconos con estilo para sitio web o presentación multimedia 22

Luego aplica otro Filtro > Desenfocar > Desenfoque de movimiento.

Iconos con estilo para sitio web o presentación multimedia 23

El resultado debe ser el siguiente:

Iconos con estilo para sitio web o presentación multimedia 24

Bien, ¡hemos terminado por ahora! También hice un par de iconos más. ¡Intenta experimentar y el resultado será mejor que nunca!

Iconos con estilo para sitio web o presentación multimedia 25

¿Todavía no eres usuari@ de Fiverr ?

Tenemos un post sobre Fiverr donde te contamos cono funciona.

Deja un comentario