A veces es necesario cargar una imagen que contenga elementos transparentes a través de los cuales se mostrará el fondo original. En estos casos, sería conveniente cargar imágenes PNG ya que son capaces de preservar la transparencia.
En este artículo te contamos, cómo hacer transparencias en Photoshop.
Creación de archivos
El primer paso es crear un archivo. Para hacer esto, abra Adobe Photoshop y en el menú Archivo ( Archivo) en la parte superior de la página, seleccione Crear ( Nuevo).
Luego, en la ventana "Nuevo documento" que aparece ( Nuevo documento) cree el archivo que desee y asegúrese de que su documento tenga una velocidad de 72 píxeles por pulgada ( ya que el archivo es para uso web). Y también que ha seleccionado el valor "Transparente" ( Transparente) en la lista desplegable "Contenido de fondo" ( Contenidos de fondo).
* Antes de hacer un PNG con transparencia en Photoshop, es necesario aclarar que en este ejemplo estamos creando una imagen para cargar como fondo para el sitio, por lo que el tamaño del documento se establece de la siguiente manera: ancho 3000 píxeles, alto 1730 píxeles, que son los tamaños recomendados para la carga de imágenes HD:
Una vez que haya especificado los valores de los parámetros, haga clic en Aceptar para abrir un nuevo documento.
Luego, en el panel Capas ( Capas) asegúrese de estar trabajando en una capa transparente y no en el fondo:
Una vez que haya terminado de crear y esté listo para guardar la imagen transparente, según la versión de Photoshop que esté utilizando, vaya al menú Archivo ( Archivo) puede utilizar una de las posibles opciones:
Versiones de Photoshop anteriores a CC 2015:
Ahora te diremos cómo hacer una imagen transparente en Photoshopque salió antes de CC 2015. Estas versiones utilizan Save For Web ( Guardar para web y dispositivos) para guardar y optimizar imágenes PNG para su uso en la web. Para utilizar este método, simplemente vaya al menú Archivo ( Archivo) y luego - "Guardar para Web" ( Guardar para web y dispositivos):
Luego, en la ventana que aparece, seleccione PNG-24 en el menú desplegable de posibles valores, y luego asegúrese de que la "Transparencia" ( Transparencia) y " Convierta a sRGB» ( Convierta a sRGB). Esto confirma que la imagen contendrá un fondo transparente y su modo de color se convertirá a sRGB, el espacio de color recomendado para la web.
Campos " Tamaño de la imagen» ( Tamaño de la imagen) se completan automáticamente con los valores que especificó cuando creó el archivo. Pero si desea cambiar el tamaño del archivo antes de guardarlo, puede hacerlo ahora.
Versión de Photoshop CC 2015:
Antes, cómo hacer una foto transparente en Photoshop, debe saber que, a partir de CC 2015, el "Guardar para Web" ( Guardar para web y dispositivos) en el menú Archivo ( Archivo) está marcado como heredado (obsoleto). Y reemplazado por una nueva opción "Exportar" ( Exportar), que ofrece una funcionalidad idéntica con un guardado más rápido en un tamaño de archivo más pequeño y mejor calidad. Para usar la opción Exportar, haga clic en el menú Archivo ( Archivo), y luego - " Exportar cómo» ( Exportar cómo).
Nota: Adobe todavía ofrece una función Guardar para Web ( Guardar para web y dispositivos) en Photoshop CC 2015 y está disponible a través de Archivo\u003e Exportar ( Archivo\u003e Exportar) o usando el atajo de teclado Comando + Opción + Mayús + S (para Mac) o Ctrl + Alt + Mayús + S (para PC):
Luego, en la ventana que aparece, seleccione PNG en el menú desplegable Formato ( Formato) y asegúrese de que la transparencia ( Transparencia) y " Convierta a sRGB» ( Convierta a sRGB).
A veces es necesario cambiar una imagen convirtiéndola en un fondo transparente. A veces te encuentras con una imagen, pero su fondo no se ajusta a tu sitio y quieres que sea transparente. Por supuesto, si tiene Photoshop y sabe cómo trabajar en él, también puede hacerlo allí. Pero también hay una forma más fácil, por así decirlo, "para tontos".
Mientras navegaba por Internet, encontré un artículo sobre Pixlr Photo Editor. Por cierto, este no es un editor gráfico ordinario, sino un editor en línea. Aquí hay un enlace: http://pixlr.com/editor/.
Es este programa el que nos ayudará a realizar una imagen con fondo transparente en formato PNG.
Tenemos, por ejemplo, la siguiente imagen:
Quiero quitarle el fondo negro y hacerlo transparente.
Para hacer esto, ingrese al programa, seleccione el elemento "Abrir imagen de la computadora" y cargue la imagen deseada. Cambie el idioma del programa a ruso inmediatamente (Idioma-\u003e menú de idioma ruso).
A la derecha, en la ventana "Capas", verá una miniatura de la imagen y un bloque. Haga doble clic en el bloque (debería aparecer un "pájaro" en el cuadro). Esto desbloquea el fondo.
Después de eso, seleccione la herramienta "Varita mágica" (a la izquierda de la barra de herramientas), llévela al fondo de la imagen y haga clic con el mouse. El fondo se resaltará con una línea de puntos. Elimina el fondo con la tecla Eliminar.
Eso fue lo que hice:
La diferencia entre el formato PNG y otros formatos de gráficos es que las partes transparentes o parcialmente transparentes de la imagen permanecen transparentes cuando se guardan. Si guarda archivos en un formato diferente, esta transparencia puede perderse. Para crear y, lo más importante, guardar un archivo PNG, hay algunas cosas a tener en cuenta.
Instrucciones
Si necesita editar un archivo PNG, muchos tienen prisa por descargar Photoshop, que no solo se distribuye de forma paga, sino que también es bastante exigente con los recursos informáticos. No todas las PC antiguas pueden trabajar con esta aplicación. En tales casos, varios editores en línea vienen al rescate, lo que le permite cambiar el tamaño, escalar, comprimir y realizar muchas otras operaciones con archivos.
Hoy veremos los sitios más funcionales y estables que le permiten trabajar con imágenes en formato PNG. Las ventajas de estos servicios en línea incluyen el hecho de que no exigen los recursos de su computadora, ya que todas las manipulaciones de archivos se realizan utilizando tecnologías en la nube.
Los editores en línea no necesitan estar instalados en una PC; esto reduce significativamente la probabilidad de contraer un virus.
Método 1: editor de imágenes en línea
El servicio más funcional y estable que no molesta a los usuarios con anuncios intrusivos. Adecuado para cualquier manipulación de imágenes PNG, absolutamente poco exigente para los recursos de su computadora, se puede ejecutar en dispositivos móviles.
Las desventajas del servicio incluyen la ausencia del idioma ruso, sin embargo, con el uso prolongado, esta desventaja se vuelve sutil.
El sitio no requiere registro, no es difícil entender el servicio, incluso si no sabe inglés. No tema experimentar, si algo sale mal, siempre puede deshacerlo con solo presionar un botón.
Método 2: Photoshop en línea
Los desarrolladores posicionan su servicio como photoshop en línea. La funcionalidad del editor es realmente similar a la aplicación de fama mundial, admite trabajar con imágenes en diferentes formatos, incluido PNG. Si alguna vez ha trabajado con Photoshop, no será difícil comprender la funcionalidad del recurso.
El único inconveniente, pero bastante significativo, del sitio son las congelaciones constantes, especialmente cuando se trabaja con imágenes grandes.
Al realizar manipulaciones simples, trabajar con el servicio es conveniente y cómodo. Si necesita procesar un archivo grande, es recomendable que descargue e instale un software especial en su PC, o sea paciente y prepárese para la congelación constante del sitio.
Método 3: Fotor
Cómodo, funcional y, lo más importante, un sitio gratuito para trabajar con imágenes en formato PNG Fotor le permite recortar, rotar, agregar efectos y usar otras herramientas. La funcionalidad del recurso se probó en archivos de diferentes tamaños y no se encontraron problemas. El sitio ha sido traducido al ruso, en la configuración puede seleccionar otro idioma para la interfaz del editor, si es necesario.
El acceso a funciones adicionales se proporciona a los usuarios solo después de comprar una cuenta PRO.
Fotor es una potente herramienta para trabajar con PNG: además de un conjunto de funciones básicas, contiene muchos efectos adicionales que harán las delicias del usuario más exigente.
Los editores de fotos en línea son fáciles de usar, no requieren instalación en una computadora, por lo que se puede acceder a ellos incluso desde un dispositivo móvil. Qué editor usar depende de usted.
Cuando trabajas en el diseño de un sitio web, a menudo tienes que lidiar con el hecho de que la imagen encontrada, que idealmente encajaría en tu sitio, tiene un fondo diferente, que sería deseable eliminar.
Y entonces, abrimos nuestra imagen en Photoshop.
1.
Lo primero que debe hacer es crear un área de trabajo para la imagen con un fondo transparente. Para esto:
- en la ventana de la capa, haga doble clic en nuestra capa (con un candado)
- En la ventana emergente, haga clic en Aceptar
La cerradura debe desaparecer
Si el fondo es sólido:
Seleccione la herramienta " varita mágica"Es una herramienta muy flexible para seleccionar el área deseada. Nuestra tarea es seleccionar todo el fondo, excepto la imagen. Para hacer esto, ajuste la configuración de la varita mágica (parámetro tolerancia) hasta obtener el resultado deseado. Además, use la tecla Mayús para seleccionar un área además de la ya seleccionada. Presione Supr y se borrará la región seleccionada.
Si el fondo es multicolor:
Usamos la herramienta " Selección rápida". Aquí nuestra tarea es seleccionar no el fondo, sino el objeto en sí, que debería permanecer. Presione hasta que se resalte el área deseada. Si el extra está resaltado, mantenga presionada la tecla Alt y menos el oblite. Puede ver el resultado con la tecla Q.
Cuando la selección esté lista, cópiela con Ctrl + C. Cree un nuevo documento con un fondo transparente (Ctrl + N) y pegue el objeto allí Ctrl + V.
3 ... Si hay algo superfluo en la imagen, utilice la herramienta " Borrador“, Simplemente sobrescriba el fondo adicional.
4 ... Guarde la imagen para la Web (Alt + Shift + Ctrl + S) seleccione el formato GIF o PNG (en otros, nuestro fondo transparente se volverá blanco).
Video útil sobre el tema:
