Convertir icono a un png transparente

Tengo un conjunto de íconos que cambié de tamaño a 30x30. Ahora quiero usarlos para mi iPhone TabBar como se especifica aquí:

http://www.idev101.com/code/User_Interface/sizes.html

¿Cómo puedo hacer estos png transparentes, o agregar transparencia, en Photoshop o Gimp para que aparezcan correctamente en mi TabBar?

¿Cuál es el formato de los iconos? ¿Son esos .icns, .ico o imágenes simples?
¿Podría proporcionar un ejemplo de cómo se ve un icono? ¿Tienen transparencia en su forma actual? Y en qué formato están los originales; ¿Están, por ejemplo, en capas? ¿No se podrían usar?
Es un png sin transparencia.
Hmmm... 4 respuestas y todavía no puedo votar a nadie; simplemente elige una respuesta.

Respuestas (4)

Además, una forma es crear una capa transparente debajo de la capa base (hacerla móvil, por ejemplo, clonándola ( CTRL+Jen Windows), luego eliminando/ocultando la capa base original) y luego configurando las opciones Fusionar si para la capa base. (Puede acceder al Menú de estilos de capa haciendo doble clic en el espacio vacío en el Panel de capas o desde el Menú superior:) Layer > Layer Style > Blending Options...Funciona muy bien si tiene bordes nítidos y fondo blanco o un color específico que desea que sea transparente. Más control que con la herramienta de selección mágica prácticamente sin dolor añadido. (Ok, bueno, tal vez un par de pasos...)

Ventajas:

  • Muy preciso
  • Fácil y rápido de usar, elimine el fondo blanco en poco tiempo.
  • Sin feos errores de cepillado.

Contras:

  • Puede hacer que partes no deseadas de la imagen sean transparentes, por ejemplo, reflejos, destellos de lentes y demás. Si esto sucede, debe considerar copiar/pegar esos puntos en una capa separada si aún cree que esta sería la forma más fácil de evitar.
  • Si el fondo, que debería ser transparente, es complejo y está lleno de colores/luminosidad, no harás mucho con esto.

Uso: Use los controles deslizantes de estilo Flecha debajo de los degradados en la parte inferior de la página Opciones de fusión en Estilos de capa, dentro del área 'Fusionar si'. Ajustar "Esta capa" hará transparentes las áreas brillantes u oscuras de la capa ajustada. El ajuste de la "Capa subyacente" utilizará la Capa debajo de la actual para traducir sus propios valores de brillo a la transparencia de esta capa. (Útil si, por ejemplo, desea agregar textura solo a las partes más brillantes de la capa subyacente).

ALT+click n dragpara dividir las flechas para un borde de transparencia más suave.

También puede arrastrar las flechas para que la flecha negra esté más a la derecha que la flecha blanca. De esta manera puede hacer que un rango medio sea transparente.

Menú "Opciones de fusión" de estilos de capa

Blend If está configurado en gris de forma predeterminada, pero también puede hacer ajustes en canales de color separados y Photoshop los recordará incluso si cambia de un lado a otro, por lo que puede hacer ajustes en todas las capas separadas y en el gris en el Mismo tiempo. La desventaja de esto es que realmente no puede usar esto como un método de pantalla verde, porque no puede decirle a Photoshop que haga solo las áreas que tienen los tres, por ejemplo, rojo 150-180, verde 31-37 y azul 123-140 , transparente. Photoshop hará los cambios de transparencia en cualquier píxel que tenga alguno de los valores de canal de color ajustados en ellos, por lo que incluso el degradado gris obtiene transparencia cuando ajusta solo el canal verde.

Y aquí hay un ejemplo rápido de una mancha gris oscura muy difícil de extraer que se hizo gradualmente transparente a partir de un fondo blanco. Pasé +/- 2 segundos para ajustar los controles deslizantes para este (una flecha blanca dividida con una dispersión bastante amplia en el canal gris). Perderá algunos detalles, sí, pero imagínese tratando de cepillarlo transparente, ¡de ninguna manera!

Sólo un ejemplo rápido.

También puede usar estos controles deslizantes para efectos muy interesantes. ¡Buena suerte!

abra su icono en photoshop. Luego cree un nuevo documento 30 * 30 asegúrese de que no haya una capa de fondo. puede hacer un fondo transparente seleccionando en inicio.

ingrese la descripción de la imagen aquíu ocultar la capa de fondo de color después de hacer el documento. guarda tu trabajo espero que te quede claro..

en caso de que la imagen no tenga un fondo transparente (que es el caso), tienes algunas formas de hacerlo (todas en Photoshop):

Común: asegúrese de que la imagen esté en modo RGB y asegúrese de que esté en una capa (puede copiar el contenido en una nueva capa y eliminar la "capa" de fondo para que solo tenga una capa que contenga el ícono; luego:

Recortar el fondo (se puede lograr de muchas maneras, una es eliminar el fondo con el borrador (no es muy preciso), otra es seleccionar el fondo (con la varita mágica, o creando un trazado de recorte, o incluso usando el lazo) y eliminando el fondo.

También puede crear una máscara de capa y pintar sobre el fondo, esto "borrará" el fondo.

Finalmente, vaya a archivo> guardar para web> seleccione PNG 24 y verifique el fondo transparente. ¡Eso es todo!

Todas estas son formas genéricas y dependen de su conocimiento de Photoshop, pero estoy seguro de que tomará algunos de estos consejos y elegirá uno.

Tome su ícono existente y asegúrese de que no esté bloqueado o la capa de fondo.

Luego, cree una nueva capa y asegúrese de que su ícono esté sobre la capa de fondo.

Usando una herramienta de selección, o el borrador de pincel de píxeles, limpie cualquier fondo blanco o ruido detrás del ícono que está tratando de aislar.

Ahora, CTRL-Apara seleccionar todos los píxeles de la capa de fondo y presione DELpara vaciar el contenido de la capa. Ahora debería ver un montón de cuadrados, que representan la transparencia.

¡No aplanes la imagen! Photoshop le dará un fondo blanco.

Cuando exporta, no es necesario guardar para la web, solo File -> Save Asseleccione el tipo de archivo PNG.