Unlimited PS Actions, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Design & Illustration
  2. Illustration

Cómo crear un icono de pila transparente

by
Difficulty:IntermediateLength:MediumLanguages:

Spanish (Español) translation by Iván Gómez (you can also view the original English article)

En este tutorial vamos a crear un icono detallado de una batería similar a la utilizada en el iPhone. Puede cambiar el color y el nivel de "combustible" de la batería, permitiendo que el icono de la batería se pueda utilizar como un medidor de potencia para aplicaciones, o simplemente como un gráfico en cualquier tipo de diseño.


1. Crear la tapa metálica de la batería

Paso 1

Empezaremos creando un Nuevo documento y rellenándolo con un fondo negro sólido. Puede crear el documento del tamaño que desee, el mío es de 600 x 400 px.

Ahora que tenemos nuestro documento, empezaremos dibujando la tapa de metal en el extremo de la batería. Comience por dibujar una forma, como se muestra a continuación. Los colores del degradado de izquierda a derecha son negro, blanco y 90% gris. Además, de al objeto un desvanecido de 1 px y reduzca su opacidad al 75%.


Paso 2

Copie (Comando + C) este objeto y pegue la copia directamente en frente (Comando + F). Luego empuje la copia un pixel a la derecha usando la tecla flecha derecha. Los colores para el degradado de izquierda a derecha son 80% gris, negro y 80% gris. Adicionalmente, aumente la Opacidad de esta forma al 100% y elimine el desvanecido arrastrando el efecto de la lista en el panel Apariencia a la pequeña papelera en la parte inferior del panel.


Paso 3

Para añadir luces a los bordes, dibuje con la herramienta Pluma (P), dos figuras como se muestra a continuación. Rellene ambas con blanco. Cambiar la opacidad de la forma superior al 75% y la forma de la parte inferior al 25%. Igualmente aplique a ambas formas un desvanecido de 2 px.


Paso 4

Puede no ser evidente todavía, pero ahora vamos a añadir los reflejos al metal. Dibuje una forma con la herramienta Pluma (P) y colóquela como se muestra a continuación. El color del punto de degradado izquierdo es blanco y el color del lado derecho es 90% gris. Igualmente, aplique a la forma una desvanecimiento de 1 px.

Para el reflejo de fondo, dibuje otra figura como se muestra. El gradiente es blanco y negro y la forma tiene un desvanecimiento de 1 px. Reduzca la Opacidad al 50%.




2. Crear el cuerpo transparente

Paso 1

Ahora comenzaremos con la sección transparente de la batería. Comience dibujando la forma que se muestra a continuación con la herramienta Pluma (P). Una vez dibujada, rellene la forma con blanco y reduzca su opacidad al 50%.

Una manera fácil de dibujar la forma es dibujar primero una mitad - dejando el trazado abierto- luego, copiar, pegar y Reflejar la copia de la forma para crear la otra mitad. Por último, sólo tiene que unir los puntos con la herramienta Pluma (P). Esto también asegura que la forma sea simétrica.


Paso 2

Ahora, simplemente podríamos aplicar un degradado de negro a gris en esta forma, pero vamos a usar una máscara de opacidad en su lugar. Requiere un poco más de trabajo, pero nos permitirá cambiar el fondo detrás de la batería cuando hayamos terminado. Para crear la máscara, copie y pegue la forma en frente de la original. Lleve la Opacidad de la forma al 100% y rellénela con un degradado como se muestra a continuación. El deslizador de la izquierda es 50% gris y el deslizador de la derecha es negro.


Paso 3

Ahora, seleccione ambas formas y desde el menú desplegable del panel Transparencia cree una Máscara de opacidad. Al crear la máscara, puede que no vea un cambio, pero cambie el color del fondo del documento y verá las ventajas de la máscara de opacidad.


Paso 4

Ahora empezaremos añadiendo algunos brillos y reflejos para hacer el vidrio se vea transparente. Comience por dibujar dos formas como se muestra a continuación. Rellénelas con blanco y reduzca su Opacidad al 75%. Desvanezca la parte superior  2 px y la parte inferior 3.5 px.


Paso 5

También vamos a añadir una Máscara de opacidad para la luz de la parte superior. Pegue una copia de la forma superior frente a sí misma, lleve su Opacidad hasta un 100% y elimine el Desvanecimiento. Rellene con un degradado como se muestra a continuación, pasando de 75% gris a negro. Por último, cree una Máscara de opacidad como hicimos anteriormente.



Paso 6

Vamos a añadir otro reflejo en el vidrio para que coincida con el del metal. Dibuje una forma como se muestra a continuación, rellene con blanco, y aplique un Desvanecimiento de 2 px y reduzca su Opacidad al 50%.


Paso 7

Siga el mismo procedimiento para añadir la Máscara de opacidad. Pegue una copia de la forma frente a la original y rellene con un degradado de 15% gris a 85% gris (no olvide eliminar el desvanecimiento de la forma).


Paso 8

Una vez más cree una Máscara de opacidad. Una vez creada la máscara, cambie Modo de fusión de la forma a Trama en el panel Transparencia.


Paso 9

Probablemente ya entiende la idea de cómo crear los reflejos. Así que, dibuje otra forma para crear un nuevo reflejo como se muestra a continuación, luego rellénela con blanco. Reduzca su Opacidad al 40% con un Desvanecimiento de 2 px.


Paso 10

Para la copia de la forma utilizada para la máscara de opacidad, aplique un degradado de 50% gris a negro, como se muestra a continuación.


Paso 11

¿Y ahora? Ya adivinó, cree la Máscara de opacidad.


Paso 12

Bien, ¡nuestro reflejo final!. Una vez más, dibuje la figura que se muestra a continuación, rellene con blanco, reduzca su Opacidad al 50% y Desvanecimiento de 2 px.


Paso 13

Copie y pegue la forma para crear la Máscara de opacidad. Use un degradado de blanco a negro para la forma.


Paso 14

Y por última vez, cree la Máscara de opacidad.



3. Duplicar la tapa metálica

Paso 1

Ahora vamos a añadir la otra tapa metálica al otro extremo de la batería, lo que es bastante fácil, ya que ambas son idénticas. Seleccione todas las formas que componen la tapa y vaya a Objeto > Transformar > Reflejar. En el cuadro de diálogo que aparece, active la casilla de Eje Vertical y haga clic en Copiar. Arrastre las formas copiadas y reflejadas hacia el otro extremo de la batería.


Paso 2

Dibujar el contacto positivo de la batería es rápido y sencillo. Simplemente seleccione todas las formas de la tapa metálica del extremo y luego copie y pegue en frente. Con  todas las formas seleccionadas, pulse Alt y arrastre el manejador central superior o inferior del grupo para escalarlo verticalmente. De igual manera, también puede escalarlos horizontalmente.

Una vez tenga el tamaño correcto, envíe hacia atrás (Comando + Mayúsculas + [) y luego tráigalos hacia delante un nivel (Comando +]). Si se hace correctamente, el contacto debe estar directamente detrás de la tapa de extremo del metal.



4. Crear el brillo verde de la batería

Paso 1

Lo último que tenemos que hacer para terminar el dibujo de la batería es añadir algunos bordes redondeados para representar los extremos del vidrio. Dibuje las dos formas, como se muestra a continuación (o simplemente dibuje uno y copie y lo pegue). Rellene el de la derecha con blanco y baje su Opacidad al 25%. Rellene el de la izquierda con el negro y baje su Opacidad al 50%. Además, cambie el Modo de fusión del borde de la izquierda a Superponer. Por último, aplique un Desvanecimiento de 3.5 px a ambas formas.


Paso 2

Ahora vamos a trabajar sobre el elemento final del diseño, el "combustible" (energía de la batería). Dibuje una forma con la herramienta Pluma (P) como el que se muestra a continuación. Puede crear el nivel y el color de la energía como desee, . Elegí dos tercios de llenado y utilicé un degradado verde.


Paso 3

Una vez tenga la apariencia que desea para el "combustible", envíelo hacia atrás. Después, llévelo adelante dos veces para que quede directamente arriba de la capa de base transparente, pero detrás de los reflejos.


Paso 4

Por último, copie la forma negra del borde redondeado a la izquierda del vidrio y arrástrela hasta el borde del "combustible", luego cambie su color de relleno a blanco.


Paso 5

Para finalizar el diseño, añada algunas luces a las partes metálicas de la batería dibujando óvalos y rellenándolos con blanco. A continuación, añada un Desvanecimiento y reduzca su Opacidad.


Paso 6

Adicionalmente, añada un Resplandor exterior a la forma del "combustible" (Efecto > Estilizar > Resplandor exterior). Asegúrese que el Modo de fusión sea Trama. Tal vez desee que el color de resplandor coincida con el color del combustible. Para mi "combustible" verde, utilicé un color verde Lima brillante (#19FF00). Dejé la Opacidad a 75% y Desenfoque a 11 px.



Encienda, ¡listo!

¡Eso es todo! Ahora ya tiene un icono de la batería que se puede utilizar para cualquier diseño que necesite, incluso como un gráfico modificable para una animación interactiva o una aplicación. Espero que haya aprendido algunas técnicas e ideas útiles en este tutorial.


Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.