Cuando diseñamos sitios web o interfaces de usuario, muchas veces necesitamos crear iconos únicos y creativos. La mayoría de los sitios web en estos días tienen algún tipo de presencia en las redes sociales; con un enlace a sus páginas de Facebook o Twitter que se muestra en forma prominente en sus portadas. Con tantos sitios vinculados a sus perfiles de redes sociales, no es sorprendente que muchos sitios sean simples regurgitando los mismos iconos. En el tutorial de hoy, demostraremos cómo crear un ícono de redes sociales completamente único inspirado en OVNIs basado en un tema. Empecemos!
Los siguientes recursos fueron utilizados durante la producción de este tutorial:
Cree un nuevo archivo de 600 x 450 píxeles y rellene el fondo con negro. Luego aplique un degradado radial utilizando un estilo de capa con el color central # 353535 y los bordes negros # 000000.
Crea una capa de forma ovalada que se convertirá en la base de nuestro OVNI.
Vaya a Capa> Duplicar capa y duplique el óvalo, pero haga que este tenga un color gris más oscuro.
Ahora duplique la capa nuevamente, pero distorsione su área superior como se muestra a continuación.
Para crear una textura metálica pulida, use un ángulo y amplíelo hasta un 150%. Haga doble clic en la barra de degradado y abra la ventana Editor de degradado.
Utilice 2 tonos de gris; #CCCCCC y # 666666.
Coloque el centro del degradado hacia la parte superior de la forma para reforzar la forma cónica del objeto..
Para crear una extrusión 3D del óvalo superior, use una Sombra interior invertida (esto significa un ángulo de -90º) con un color negro y una mezcla de superposición. Arrastra el Choke a 100 y reduce el tamaño a cero.
Incluya un brillo interior delgado que permitirá que el óvalo superior reciba la luz reflejada en su borde interior.
Ahora trabajemos en el óvalo central. Agregue una Superposición de degradado utilizando los ajustes a continuación y coloque el degradado justo debajo del centro de la forma.
Use una Sombra blanca para simular un brillo sobre el óvalo inferior.
Aplique el mismo estilo de capa al platillo inferior copiando y pegando el estilo de capa.
Reducir la opacidad del gradiente de la capa inferior..
Ahora necesitamos crear un inserto sobre el óvalo superior..
Aplique un degradado a esta capa como se muestra a continuación.
También agregue un trazo en modo degradado, usando los colores blanco #FFFFFF y gris #CCCCCC.
Ahora es el momento de crear una cúpula de vidrio de nuestro OVNI. Para ello dibuja una forma como se muestra a continuación. Use un color azul # 1D408A.
Edite los puntos de anclaje como se muestra a continuación. Al presionar la tecla Alt (Windows) puede separar los puntos de anclaje y transformar cada segmento del óvalo independientemente.
Vamos a añadir algunos estilos de capa. Primero, un efecto satinado con los valores mostrados abajo..
Ahora aplique un brillo interior usando # 1D408A.
Agregue un color de degradado radial # 000000 y # 76B9FD usando Dodge lineal (Agregar).
A continuación, agregue una sombra interior, pero se utiliza como una luz sobre la cúpula. Usa los valores como se muestra abajo.
Finalmente, agregue una Sombra para iluminar el borde inferior de la cúpula.
Ahora agreguemos un reflejo a la esfera. Use un óvalo más pequeño y edite los puntos de anclaje como se muestra a continuación.
Aplique un estilo de capa a la reflexión y agregue un degradado que comienza en el # 44A9FE y termina en negro. Configure el modo de fusión en pantalla como se muestra a continuación.
Agregue una sombra interior usando los valores que se muestran a continuación.
Descargue el logotipo de Facebook en EPS o, si prefiere Twitter, también puede descargarlo desde aquí.
Abra el vector logo directamente en Photoshop. Esto abrirá un raster.
Use los ajustes a continuación para configurar el logotipo a un tamaño más grande.
Haz una selección de la letra "f". Una vez seleccionado, vaya a Editar> Copiar o Cmd + C.
Pegue la letra "f" en el lienzo y reduzca su tamaño para que quepa dentro de la esfera.
Aplique un gradiente como se muestra a continuación.
Cree una ilusión de 3D agregando un pequeño trazo como se muestra a continuación.
Intensificar el trazo utilizando Biselado y Relieve.
Aplique un brillo interior utilizando la "f" como se muestra a continuación.
Utilice el domo para ocultar parte de la "f" seleccionando la ruta y convirtiéndola en una selección.
Regresa a la paleta de capas y enmascara la letra..
Oculte todos los efectos dentro de la máscara haciendo clic en "Máscara de capa oculta efectos" en el cuadro de diálogo de estilos de capa.
Usa diferentes pinceles para pintar las luces del perímetro dependiendo de su distancia. Intenta hacerlos lo más simétricos posible..
Agrega un resplandor externo utilizando # 0099FF.
Agrupa todas las capas en una carpeta..
Nombra la carpeta.
Duplique la carpeta para guardar una copia segura de su trabajo.
Convierta el grupo en un objeto inteligente o seleccione la opción Combinar grupos. El objetivo es tener todo el OVNI en una capa para que podamos reducir el tamaño sin afectar la proporción de los estilos de capa.
Reduzca el OVNI al 65% de su tamaño original y colóquelo como se muestra a continuación.
Ahora crea el rayo de luz que el OVNI proyectará en el suelo. Para ello, dibuje una capa de forma rectangular con el mismo ancho que la cúpula.
Edite los puntos de anclaje de la capa de forma como se muestra a continuación.
Agregue un punto de anclaje para hacer una curva como se muestra a continuación.
Convierte el vector en una selección usando la paleta de rutas.
Suavice la selección yendo a Seleccionar> Modificar> Feather.
Establecer el Feathering a 3 px.
Pinte dentro de la selección con más intensidad cerca de la fuente de luz (el OVNI). Y con la misma técnica de selección suavizada, pinta el suelo de la escena..
Ahora agregue luz al piso.
Añade la siguiente imagen a nuestra obra de arte. O encuentra otro que te parezca adecuado..
Recórtelo de su fondo y reduzca su tamaño como se muestra a continuación.
Cree una sombra del personaje duplicándola, invirtiéndola, difuminándola y distorsionándola como se muestra a continuación..
Descarga esta fuente e inclúyela en nuestra composición..
Para algunos toques finales, aplique una sombra paralela a nuestro texto con el color establecido en # 0099FF y su modo de fusión configurado en la pantalla. Luego, agrega un Resplandor exterior con su Modo de fusión establecido en Lineal Dodge. Para el fondo, pinte un brillo azul para darle al icono un aspecto más visual.