freeCodeCamp/guide/spanish/designer-tools/photoshop/index.md

12 KiB

title localeTitle
Photoshop Photoshop

Photoshop

Adobe Photoshop es un software de edición de imágenes basado en ráster (píxeles) que es utilizado por una amplia variedad de creadores de contenido para la creación y edición de gráficos / fotografías. Los desarrolladores o diseñadores suelen utilizar Photoshop para crear o modificar activos y fotografías para sitios web. Algunos desarrolladores también usan photoshop para diseños de sitios web y maquetas, pero otras herramientas como Adobe Experience Design y Sketch son cada vez más utilizadas. Adobe Photoshop está disponible para Windows y Mac, pero actualmente no es Linux.

Una cosa común que un desarrollador podría hacer en Photoshop es modificar el tamaño de píxel y la resolución (72 ppp para la web) de una imagen para el uso correcto de la web y modificar las imágenes para que tengan fondos transparentes (utilizando los tipos de archivo .gif y .png). Es una práctica común reducir el tamaño de una imagen para que sea la más grande para una página web. Esto reduce el espacio del servidor y los tiempos de carga, y Photoshop es una herramienta para lograrlo.

Resumen

  • Software de edición de imágenes basado en raster
  • Un archivo de Photoshop es un archivo .psd, se puede exportar a la mayoría de los tipos de archivos de imagen.
  • Photoshop utiliza píxeles. Asegúrese de crear activos lo suficientemente grandes, ya que la escala más grande no es posible sin degradación.
  • Descargas disponibles para Windows y Mac a través de las suscripciones de Adobe.
  • Cada vez se usa menos para los sitios web / maquetas de interfaz de usuario.
  • Muchas herramientas y funciones avanzadas para la edición de fotos que podrían no ser necesarias para los desarrolladores.

Photoshop fue creado en 1988 y es el estándar de la industria para varias tareas de manipulación de imágenes, tales como:

  • Manipulación de fotos, como recortar imágenes, cambiar rápidamente los colores.
  • Diseño de maquetas para sitios web o aplicaciones.
  • Diseño de logotipos 1
  • Creación de azulejos de estilo
  • Diseño de iconos

Photoshop es utilizado por diseñadores web, diseñadores de aplicaciones móviles, diseñadores de UX y fotógrafos, entre otros profesionales de la industria.

¿En qué se diferencia Photoshop de otras herramientas?

Los diseñadores que comienzan, por lo general, quieren saber la diferencia entre Photoshop e Illustrator para comprender qué herramienta usar:

Photoshop crea imágenes de trama, lo que significa que puede ver los píxeles de la imagen si se acerca con mayor precisión.

Illustrator, por otro lado, crea gráficos vectoriales. Los gráficos vectoriales se pueden redimensionar en cualquier forma sin ninguna pixelación.

Por ejemplo:

Ejemplo de vector vs raster

Una fotografía es una imagen rasterizada, una ilustración es una imagen vectorial.

Elija Photoshop cuando necesite trabajar con una combinación de formatos de medios (fotografías, texto) o cuando no le importe cambiar el tamaño sin pixelar.

Instalación

Adobe Photoshop es parte de la suite de programas Creative Cloud. Puede instalar una versión de prueba gratuita de 7 días de Photoshop a través del sitio web de Adobe . Después de la prueba, deberá seleccionar una opción de precio que funcione para usted.

Si todo lo que necesita es Photoshop, puede elegir la opción de aplicación única, que es de $ 19.99 / mes, e incluye acceso a TypeKit (una buena fuente de fuentes) y 20 GB de almacenamiento.

Los estudiantes y profesores pueden obtener un descuento educativo aquí .

Lo esencial

Comenzando un nuevo documento

Cuando abra Photoshop por primera vez, es probable que vea un cuadro de diálogo que le preguntará si desea:

  • Abrir un documento existente
  • Crear un nuevo documento

Si no ve esto, puede ir a File > New... o usar el método abreviado de teclado CMD / ctrl + N

Para proyectos web, deseará elegir una resolución más baja o ppp (puntos por píxel). El estándar es de 72 dpi.

Para proyectos de impresión, debe elegir una resolución más alta. Se recomienda al menos 300 dpi.

Visión de conjunto

Vista de la ventana de Photoshop

Cuando abres Photoshop, verás un par de componentes principales.

La paleta de herramientas de la izquierda y la sección de la paleta de la derecha.

La paleta de herramientas tiene todas las herramientas que necesita para manipular o editar una imagen (consulte la sección Herramientas a continuación).

Algunas herramientas tienen una paleta propia, que verá en la sección de paletas a la derecha. Puede controlar qué paletas ve en su vista de paleta yendo a Window y alternando entre las diversas paletas disponibles.

El lienzo es el espacio de trabajo para tu proyecto. Puede mover elementos alrededor del lienzo y cambiar el tamaño del lienzo. Cualquier cosa que no esté en el lienzo no será visible.

Herramientas

Paleta de herramientas de Photoshop

  1. Mover herramienta: mueve elementos alrededor del lienzo.

  2. Herramienta Marco: marque y edite una selección rectangular o circular en una capa.

  3. Herramienta Lazo: herramienta de selección de forma libre que puede utilizar para dibujar un área de selección.

  4. Herramienta de varita mágica: realice una selección de un color específico en una imagen.

  5. Herramienta de recorte: recorta el tamaño de tu lienzo.

  6. Herramienta cuentagotas: seleccione un color de una imagen y cárguelo en su paleta de colores.

  7. Herramienta de pincel de curación de puntos: clone un área de una imagen y combínela en una parte diferente de la imagen. Úsalo para retocar y mezclar.

  8. Herramienta de pincel: dibujo de forma libre.

  9. Herramienta de sello de clonación: copia y pega ciertos píxeles de una imagen. Úsalo para retocar.

  10. Pincel de historial: restaura el color y otras propiedades a una imagen basada en el historial. Úsalo para corregir errores.

  11. Herramienta de borrador: borrado de forma libre.

  12. Herramienta Cubo de pintura: rellene una selección con color (color de fondo predeterminado).

  13. Herramienta de desenfoque: desenfoque de forma libre de una imagen.

  14. Herramienta de esquivar: aligerar una sección de una imagen.

  15. Herramienta Pluma: se usa para dibujar una ruta o hacer una selección con una precisión más fina.

  16. Herramienta de tipo horizontal: escriba texto en una línea horizontal (color de fondo predeterminado).

  17. Herramienta de selección de ruta: seleccione una ruta dibujada.

  18. Herramienta de forma personalizada: seleccione entre una variedad de ajustes preestablecidos de forma para dibujar en el lienzo.

  19. Herramienta de mano: moverse por el lienzo.

  20. Herramienta de lupa: acercar o alejar el lienzo.

En la parte inferior, puede establecer los colores de fondo y primer plano. Puede alternar rápidamente los colores de fondo y primer plano presionando la tecla x .

Capas

La paleta de capas es accesible desde el lado derecho de la ventana en la sección de paletas.

Un proyecto se compone de múltiples capas. Cada elemento del proyecto es su propia capa. Las capas son apilables.

En el siguiente ejemplo, la capa "círculo" está en la parte superior de la capa "A" en la paleta de capas. Esto significa que el círculo se representa encima de la letra "A" en el lienzo.

Cada vez que quiera evitar que una capa realice ajustes ocasionales, puede bloquearla seleccionándola desde la ventana de capas y presionando el botón de bloqueo.

También puede dar un título a cada capa. Esta es una buena práctica en particular cuando trabajas con composiciones complejas. Simplemente haga doble clic en el título de la capa en la ventana de capas para cambiar su nombre. Que es un buen segway en el uso de carpetas, que también debe hacer para las buenas prácticas en grandes proyectos.

Paleta de capas

Importando fuentes

Una licencia de Photoshop Creative Cloud viene con una cuenta gratuita de Typekit . Typekit es una fundición de fuentes donde puede encontrar fuentes para uso digital o de impresión.

Para agregar fuentes de Typekit:

  1. Seleccione la herramienta de tipo horizontal de la paleta de herramientas.
  2. Haga clic en el selector de fuente desplegable en la esquina superior izquierda.
  3. Haga clic en add fonts from Typekit

Añadir fuentes de Typekit

Esto abrirá una ventana del navegador y lo llevará al sitio web de Typekit, donde puede agregar fuentes a su cuenta de Photoshop Creative Cloud (asegúrese de iniciar sesión con las credenciales de su cuenta de Adobe). Una vez agregadas a su cuenta, estas fuentes estarán disponibles cuando utilice la herramienta de Tipo.

Exportando archivos

Haga clic en File > Export .

Luego puede seleccionar Quick export to PNG , que en la mayoría de los casos está bien para uso web.

Si necesita otro formato, seleccione File > Export > Export as... Allí, puede seleccionar entre PNG , JPG o GIF .

Atajos de teclado de Photoshop

| Herramientas Atajos | MAC | Ganar | -------------------------- | ------ | ------ | | Mover herramienta | V | V |
| Herramienta Marquesina Rectangular | M | M |
| Herramienta de marquesina elíptica | M | M | | Herramienta de lazo | L | L | | Herramienta de lazo poligonal | L | L | | Herramienta de lazo magnético | L | L | | Herramienta varita mágica | W | W | | Herramienta de selección rápida | W | W | | Herramienta de cultivo | C | C | | Herramienta de rebanada | C | C | | Herramienta de selección de rebanada | C | C | | Herramienta cuentagotas | Yo Yo | Herramienta de muestra de color | Yo Yo | Herramienta regla | Yo Yo | Herramienta de nota | Yo Yo | Herramienta de conteo | Yo Yo | Herramienta Pincel corrector puntual | J | J | | Herramienta de pincel curativo | J | J | | Herramienta de parche | J | J | | Herramienta de ojos rojos | J | J | | Herramienta de pincel | B | B | | Herramienta lápiz | B | B | | Herramienta de reemplazo de color | B | B | | Herramienta pincel mezclador | B | B | | Herramienta Clone Stamp | S | S | | Herramienta de estampado de patrones | S | S |

Alternativas a Photoshop

Alternativas en línea para Photoshop

  • Pixlr
  • Photopea (La única herramienta en línea para editar archivos .psd)

Notas al pie

  1. Si bien puede diseñar logotipos en Photoshop, la mayoría de los diseñadores optaron por utilizar Illustrator para logotipos, ya que Illustrator crea imágenes vectoriales que pueden facilitar el cambio de tamaño de los logotipos para múltiples usos, como logotipos pequeños para tarjetas de visita o logotipos grandes para carteles.
  2. Puede crear sus propios pinceles en Photoshop, usando la opción Pincel preestablecido. También puedes importar pinceles. Esto le permite no limitarse a determinados pinceles predeterminados.
  3. Es más fácil y mejor usar Photoshop en caso de que esté haciendo obras de arte utilizando tabletas gráficas, ya que tiene múltiples opciones para pinceles, algo que no está en Illustrator.

Más información:

Alternativas: Gimp (disponible en Linux y gratis)