¿Cómo creo un gif con un fondo transparente con Adobe Photoshop?

8

¿Cómo creo un .gif con un fondo transparente con Adobe Photoshop?

Es un poco tarde en la noche para pedirle a mi desarrollador web que haga esto. Aquí hay una captura de pantalla de la imagen que he creado:

imagen de ejemplo

Pero no quiero blanco alrededor de las letras, debería verse más como aquí: http://wordfruit.com

Esto es lo que he hecho:

  • Descargué el .gif original de los archivos del sitio web.
  • Cuando lo abro en Photoshop, la capa está bloqueada y no puedo crear una nueva capa ...
  • ... así que lo copié y lo pegué en un nuevo documento .psd y lo edité
  • finalmente lo guardé como un .gif
Richard Clunan
fuente
1
Como diseñador profesional de UX, siempre preferiría PNG sobre GIF ya que tiene transparencia de canal alfa y mejor compresión. Lo que significa que no está perdiendo un color para establecerlo como transparente. Mi desarrollador y yo acabamos de entrar en un debate, él quiere que le envíe GIF y le dije que se adhiriera a su profesión de codificación y que me apegue a la mía como diseñador gráfico.

Respuestas:

15

Cuando guarda un GIF (exportación para web) tiene la opción de seleccionar un color para hacerlo transparente. tenga en cuenta que solo puede elegir UN color, por lo que generalmente terminará con un halo alrededor de su imagen donde se mezcla de su imagen con el color de fondo original.

Es mejor obtener el archivo PSD original y luego guardarlo como PNG transparente.

DA01
fuente
2

la respuesta se basa en lo que entendí: |

prueba esto con la forma en que lo haces

  • descargue su imagen gif desde el sitio web
  • Abra en photoshop vaya a imagen> modo> seleccione color rgb (observe en su imagen gif ahora mismo su color indexado)

imagen de google

  • cuando cree un nuevo documento, asegúrese de usar un fondo transparente

imagen de photoshopforce

ahora pega tu imagen y guarda esto como gif.

Para guardar gif, mira esto: Crear gif transparente (por favor, solo guarda la sección de guardar)


Ahora mi consejo sobre esto es que su diseñador / desarrollador usa el sprite de imagen, por lo que le resulta difícil hacer las ediciones de la manera que desee, mejor edite el psd original y que lo guarde y lo use, lo que está haciendo no está de acuerdo con su diseñador / desarrollador están usando otra cosa y tú estás haciendo otra cosa ...


tipo y sugerencia dulce: encuentre el psd original, edite su texto y guárdelo como .gif, espere al diseñador. De la forma en que lo está haciendo, es un desperdicio según yo.

Espero que esto ayude un poco ...

Jack
fuente
koiyu, creo que su propio sprite de imagen era la forma más fácil de hacerlo entender, ¿no?
Jack