¿Qué es exactamente un "píxel"?

Piensa en el píxel como un átomo. El átomo es la partícula más pequeña de materia. Donde como un píxel es una partícula más pequeña de imagen digital.

Un átomo tiene neutrones, protones y electrones, mientras que un píxel tiene valores de rojo, verde y azul :)

El número de píxeles por pulgada o centímetro (cm), etc., se denomina "resolución".

Una resolución más alta significa más píxeles por unidad de longitud.

Si está diseñando para web/escritorio, puede decir1 Inch = 72 pixels

Para la impresión offset (generalmente se usa una resolución de 300), puede decir1 inch = 300 pixels

La resolución de impresión se llama DPI, que significa "puntos por pulgada". Los píxeles son los puntos. Cuanto mayor sea el número de puntos, más fino será el resultado de la impresión.

Ahora mi cliente solicita un banner de 1900x1200px. ¿Cómo debo hacer la conversión?

Si su cliente le está dando las dimensiones en píxeles, entonces debe ser algo para escritorio/web y puede diseñarlo en una resolución de 72.

Si necesita algo para imprimir, debe preguntarle la resolución o el tamaño en pulgadas, cm, etc.

Si un cliente mío me pide una imagen de 1920x1080px, lo primero que necesito saber es el uso previsto. ¿Es para la web, para imprimir o para ambos?

En el mundo de la impresión, un píxel (o elemento de imagen - [pict-el]) no tiene significado ni definición. Los píxeles no se pueden medir de ninguna manera. No tienen un tamaño o unidad predefinidos para calcular su tamaño. Por lo tanto, no son un término del "mundo real". Son estrictamente un término digital y solo se refieren al mundo digital.

En sentido amplio, un píxel es el pequeño punto en una pantalla o monitor que está coloreado por la luz, ya sea retroiluminada (CRT), LED, plasma u otras tecnologías. Cada uno de estos pequeños puntos (píxeles) de diferentes colores, cuando se juntan, forman una imagen para el ojo humano. Para usar una analogía del mundo real, piénselo como una pared de ladrillos... cada píxel sería un ladrillo... la imagen sería la pared.

En muchas aplicaciones y para muchas personas, 1 píxel = 1 punto. (Adobe incluso usa esta teoría). Sin embargo, esto tampoco es del todo exacto. Un punto es simplemente la unidad de medida más pequeña utilizada por la mayoría de los diseñadores en el mundo real, a diferencia del mundo digital.

No existe tal cosa como 1 pulgada = 72 px ni nada ni remotamente parecido. Cada pantalla en la tierra tiene una densidad de píxeles diferente . La cantidad de píxeles que caben en una pulgada depende completamente de la densidad de píxeles de su monitor.

Cuando trabaja en Photoshop para la web, lo que ingresa en el Resolutioncampo para un nuevo documento es en gran medida irrelevante. Una imagen destinada a la web (o pantalla) utilizará su ancho y alto de píxel y no hará referencia a la configuración de Resolución en absoluto. Consulte aquí para obtener más información sobre la resolución (ppi) y la web/pantalla: ¿Es obligatorio mantener las imágenes a 72 DPI para el diseño web? Para la web, la única diferencia que ofrece el campo de resolución es que le permite crear un trabajo más detallado en Photoshop. Pero en la salida, el campo de resolución se ignora, usando Save for Web. Si usa Exporten lugar de Save for Webentonces, la resolución se usa para modificar el ancho y el alto de píxeles de la imagen en función de su sistema operativode todas las cosas. Las aplicaciones de Macintosh asumen que cada pulgada tiene 72 píxeles y la aplicación de Windows asume que cada pulgada tiene 96 píxeles. Ninguno de estos es realmente preciso o verdadero, pero los ingenieros tuvieron que usar algo . Por lo tanto, una resolución más alta Exportdará como resultado un ancho de píxel y una altura de píxel más grandes.

Ahora, donde la impresión se encuentra con los píxeles... resolución o puntos por pulgada (DPI). DPI es esencialmente la densidad de puntos que crea una filmadora (o fabricante de planchas) al imprimir planchas. Todas las imágenes que se imprimen deben pasar por procesos de medios tonos . Además de una pantalla de línea específica o Líneas por pulgada (LPI) que determina cuántas filas de puntos se imprimirán. La densidad de los puntos en el medio tono determina el nivel de detalle y calidad de la imagen misma. Un medio tono con un DPI y un LPI más altos se verá mucho mejor que un medio tono con un DPI y un LPI bajos. Si busca alguna correlación entre la pantalla y la impresión, el lugar más común en el que el usuario encuentra un poco de lógica es pensar que 1 píxel = 1 punto. esto no escompletamente exacto, pero está lo suficientemente cerca como para que no sea un problema si se usa esta suposición. Aquí es donde la gente intercambia los términos PPI y DPI pensando que son lo mismo. En realidad, no son lo mismo en absoluto, pero no hay gran daño en pensar que lo son.

Para el trabajo de impresión, el Resolutioncampo en la ventana del nuevo documento de Photoshop es crítico. La mayoría de las veces desea una resolución de 260 o superior para imprimir imágenes. Esto equivale a 260 DPI, que es la configuración óptima para 175 LPI (una pantalla de línea común). 300 ppp se usa con mayor frecuencia porque es un número agradable, uniforme y redondo para recordar y más DPI nunca es un problema. El cálculo general es en realidad 1,5 veces el LPI es igual al DPI. Entonces 1.5 x 175 = 262.5. Por lo tanto, se redondea a 300 ppp.

Si sabes el uso previsto...

• Si es para la web o la pantalla, simplemente cree un nuevo documento a 1920x1080px y la resolución que desee. Una resolución más alta le permitirá un trabajo más detallado en Photoshop, pero no cambiará la salida web/de pantalla de la imagen. Independientemente de la resolución (ppi), la imagen aún se generará a 1920x1080 píxeles (usando Guardar para Web).

• Si la imagen es para imprimir o ambas cosas, usaría Photoshop para darme una idea del tamaño físico cuando se imprima. Simplemente cree un nuevo documento con las medidas de 1920x1080 e inserte 300 para la resolución.

Ahora cambia el menú desplegable de "píxeles" a Pulgadas:

Esto está utilizando la teoría interna de 1px = 1pt de Adobe, que es tan buena como cualquier otra. Pero te da una idea general de que la imagen será de aproximadamente 6,5"x3,5". Luego consultaría con el cliente para verificar que una imagen de 6,5x3,5" se ajuste a sus necesidades.

Hola [cliente],

Una imagen de 1920 x 1080 píxeles equivale a aproximadamente 6,5 x 3,5 pulgadas para la producción de impresión. ese tamaño te sirve? ¿Debería ir más grande para la impresión?

¡Gracias!

Hay un artículo de ciencias de la computación (en realidad, una nota divertida) titulado "Un píxel no es un pequeño cuadrado" de Alvoy Ray Smith.

Un píxel es una muestra puntual . Sólo existe en un punto. Para una imagen en color, un píxel puede contener en realidad tres muestras, una para cada color primario que contribuye a la imagen en el punto de muestreo. Todavía podemos pensar en esto como una muestra puntual de un color. Pero no podemos pensar en un píxel como un cuadrado, o cualquier otra cosa que no sea un punto.

¡ Un píxel no es un pequeño cuadrado,
un píxel no es un pequeño cuadrado,
un píxel no es un pequeño cuadrado!
(Y un Voxel no es un Cubito)

El término "píxel" es la abreviatura de "elemento de imagen".

Una imagen consta de píxeles, que son simplemente puntos de colores en un rectángulo, sin tamaño .
Para mostrar la imagen, usamos una pantalla que puede mostrar puntos de colores y debemos decidir qué puntos queremos mostrar y dónde .

Mirando los detalles, la imagen consta de puntos separados, cada uno con un color diferente. Como cuando llenarías las cajas en papel cuadrilla con colores, una en cada caja. Excepto -importante- que no hay papel (que tiene un tamaño), y las cajas no tienen tamaño físico. Solo se trata de qué punto de color está debajo o a la derecha de qué otro .

Si piensa en el tamaño de la imagen en la pantalla, es como mostrar este "papel" en la pantalla, pero no tenemos idea de cuán "grande" es en realidad, en términos de pulgadas o mm.

Cuando queremos mostrar la imagen en la pantalla, vemos que la pantalla también tiene "cuadros" que pueden mostrar colores. Ambos se denominan píxeles, pero técnicamente son algo diferente.

Lo más simple que podemos hacer es asignar cada uno de nuestros cuadros de colores como "papel" a un cuadro de color en la pantalla.
Entonces, el tamaño en la pantalla, en centímetros reales reales, dependerá de qué tan grandes sean estos puntos de la pantalla .

Si necesitamos un tamaño determinado, podemos hacer algo diferente:
podemos decidir nosotros mismos qué tamaño debe tener la imagen . Necesitamos saber qué tan grandes son los puntos de la pantalla. Luego, para cada fila, podemos calcular cuántos puntos de pantalla podemos usar para nuestros puntos de color. Para que encaje, si tenemos más puntos de pantalla que puntos de color, debemos usar algunos puntos de color varias veces o, si tenemos menos, dejar algunos fuera.

Una confusión más para completar la discusión:

En el diseño y maquetación de sitios web, un "píxel CSS" siempre equivale a 1/96 de una "pulgada CSS" , independientemente de la resolución de la pantalla. Esto se hizo porque muchos de los primeros sitios web usaban medidas basadas en píxeles para el diseño asumiendo una resolución de pantalla estándar. Para que el tamaño real del texto y otro contenido se mantuviera constante, los navegadores web encuentran una conversión aproximadamente uniforme entre los píxeles de la pantalla y las unidades "px" del diseño, y ajustan su interpretación de las pulgadas para que siempre haya una relación consistente entre "px" y " en". Lo mismo ocurre con todas las unidades que se basan en pulgadas, como "pt" para fuente: el tamaño de fuente de 12 pt siempre es igual al tamaño de fuente de 16 px .

Ahora que las resoluciones de pantalla suelen ser mucho mejores que 96 px por pulgada, el concepto de "puntos" se ha tomado prestado del mundo de la impresión para hablar de la resolución física real de la pantalla. Incluso hay una unidad de puntos por píxel (dppx) para describir la resolución física proporcional al píxel CSS estándar. Por ejemplo, las nuevas pantallas "Retina" de Mac y iPhone tienen una resolución de 2 dppx.

Para su situación, me hago eco del consejo de otros: pídale a su cliente que le aclare lo que necesita. Dicho esto, por lo general, si alguien pide arte con medidas de píxeles, lo está usando para sitios web. Cree su imagen exactamente con las dimensiones de píxeles que le piden y configure su software de edición de imágenes para que use una resolución de 96 ppp a fin de diseñar las reglas y el tamaño del texto en unidades que le resulten cómodas.

Dicho esto, puede que no esté de más crear tu imagen al doble de esa resolución (es decir, 192 ppp), para tener una versión adecuada para las pantallas Retina si tu cliente descubre que la quiere. Entonces, su software de imagen debería tener una manera fácil de guardar su imagen con una resolución más baja y un tamaño de archivo más pequeño. ¡Es mucho más fácil convertir una imagen a una resolución más baja que al revés!

Las pulgadas son dimensiones físicas, mientras que los píxeles son dimensiones de la pantalla. Con la misma resolución, un píxel es físicamente más grande en una pantalla más grande, ya que la densidad o PPI (píxeles por pulgada) está controlada por el tamaño físico de la pantalla frente a la resolución. Entonces, al convertir píxeles a pulgadas, todo se reduce a lo que desea que sean sus píxeles por pulgada (PPI). Si desea 300ppi (estándar para impresión), simplemente está diciendo "comprimir 300 píxeles en una pulgada del mundo real". Esto da como resultado una calidad más densa que si estuviera pidiendo 72ppi, ya que menos píxeles equivale a menos información de calidad en esa pulgada.

Las pantallas generalmente se consideran de 72ppi, pero esto es solo un valor predeterminado y es completamente irrelevante para el tamaño real de su pantalla. La misma resolución de 1920x1080 podría ser de 10 ppp en la pantalla de un estadio o de 400 ppp en un teléfono móvil.

Un píxel no tiene correlación con las mediciones del mundo real. Como tal, no hay forma de convertir pulgadas a píxeles de manera consistente. Todo es arbitrario y depende de lo que estés haciendo con la imagen al final.

¿Qué es un píxel en el contexto de una imagen digital? Es el elemento único más pequeño dentro de la imagen. Tendrá un color asignado. Literalmente se refiere a un "elemento de imagen" individual .

Imagina que tienes una bombilla que puedes encender y apagar. Esta es básicamente una pantalla de 1x1 píxeles, donde la bombilla es el píxel. Ahora compre algunas bombillas más y colóquelas en un cuadrado de 10x10. Si los conecta de manera que pueda encenderlos y apagarlos como desee, tiene una pantalla tosca con "píxeles" de 10x10. Incluso puedes dibujar formas básicas en él.

Ahora, si te alejas lo suficiente de esta pantalla de bombillas, el ojo finalmente ya no podrá distinguir entre esas bombillas individuales y todo lo que verás es una forma continua en lugar de píxeles individuales. Esto sucede porque el ojo tiene una resolución de escaneo limitada, si hay más puntos (bombillas) por pulgada de los que el ojo puede reconocer, los píxeles se convierten en una imagen. La resolución de tus ojos es de unos 300 puntos por pulgada (DPI). Si toma una lupa y observa su monitor, verá que también está compuesto por pequeñas bombillas (LCD), solo muchas más. Unas 2.073.600 (1920x1080) en una pantalla Full HD, multiplicado por tres, ya que hay uno para cada color RGB, que tus ojos simplemente no pueden ver, ya que son demasiado pequeños.

Ahora, obviamente, lo que su ojo puede percibir como puntos individuales o no depende no solo de la disposición de los puntos (qué tan cerca están entre sí), sino también de la distancia a la que se encuentra de esa "pantalla". Es por eso que DPI es un término relativo de varias maneras. Si toma la misma pantalla y se acerca demasiado, puede ver los píxeles. Si está demasiado lejos, ya no podrá leer lo que aparece en la pantalla, aunque el DPI y la resolución (cantidad de píxeles) nunca cambiaron.

Por esta y varias otras razones, durante la creación de los primeros monitores de computadora, se eligió una resolución estándar de 72 DPI (Apple) o 96 DPI (Microsoft). Este es un buen compromiso entre la distancia que se espera que el usuario esté lejos de la pantalla y las limitaciones técnicas de esa edad. Pero aún a día de hoy, la mayoría de pantallas siguen esa resolución aproximadamente. Es por eso que cuanto más grande es la pantalla, mayor es la cantidad de píxeles.

Ahora, si conoce la resolución DPI de su monitor, es muy fácil averiguar cuántos píxeles hay en cada pulgada cuadrada. Si, por ejemplo, desea dibujar un cuadrado de 1x1 pulgada² en un monitor, puede determinar fácilmente cuántos píxeles debe tener esta imagen (72x72 o 96x96). Pero también es obvio que esta imagen será más grande o más pequeña en otras pantallas que tengan una resolución DPI diferente. El texto que se puede leer en una pantalla de 24" a 96 DPI puede ser demasiado pequeño en un iPhone de 4" a 300 DPI, porque esos 96 píxeles (1 pulgada) en el 24" son solo unos pocos milímetros en el teléfono.

Entonces, si su cliente le pide que cree una imagen a 1900x1200 px, las primeras preguntas que debe hacer son: ¿para qué dispositivo?

Para solucionar el dilema de las páginas web o aplicaciones que se supone que se ven bien en diferentes dispositivos, se han inventado formatos que no funcionan con píxeles sino con una longitud en cm o mm. A continuación, la imagen resultante se procesa de acuerdo con las capacidades del dispositivo, lo que garantiza que un cuadrado de 10x10 cm siga siendo 10x10 sin importar en qué pantalla se muestre. Pero este formato obviamente no puede ser un formato de píxel, sino que será un formato vectorial .

Si bien esto resuelve el problema de Mac/Windows/Otros, no resolverá una gran diferencia de tamaño. Su imagen de ejemplo será de 10x10 cm en cada dispositivo, pero podría cubrir toda la pantalla en un teléfono móvil. Este problema aún no está completamente resuelto, pero la mayoría de las empresas tienen alguna forma de solución. Pero en la mayoría de los casos, en realidad necesita desarrollar al menos dos páginas, una para escritorio estándar, otra para teléfonos móviles y finalmente otra para tabletas también.

Ya hay un montón de respuestas útiles, pero tal vez quería explicar esto de una manera diferente.

Al solicitar una imagen de 1900x1200 píxeles, su cliente en realidad no le está diciendo nada sobre las dimensiones que necesita. Olvidándose de la palabra "píxeles" por un momento, el cliente simplemente le está diciendo cuánto detalle necesita (es decir, la resolución). Es posible que simplemente tengan la intención de dimensionarlo ellos mismos según lo requieran.

Si necesita usar pulgadas para sus propios fines, ya que encuentra que esa medida es más fácil de manejar durante el desarrollo de sus gráficos, simplemente utilícelas. Al usar gráficos vectoriales (Corel Draw es una herramienta vectorial), afortunadamente no necesita preocuparse mucho por los píxeles hasta que llegue el momento de guardar las imágenes planas.

Para estar seguro, comience con un tamaño de lienzo de la misma relación de aspecto: 1900x1200 es una relación de 16:10, por lo que 16 pulgadas por 10 pulgadas debería funcionar. Cuando llega el momento de guardar o exportar una imagen plana (un "ráster" o mapa de bits), puede elegir las dimensiones de 1900x1200 píxeles.

No estoy familiarizado específicamente con Corel, por lo que no puedo decirte exactamente cómo ingresar esta configuración, pero es muy probable que estén allí.

En cuanto a "qué es un píxel" , la respuesta que dice que es similar a un "átomo" es bastante buena. Aunque si queremos ser completamente anales, podríamos decir con mayor precisión que un píxel es una molécula :

Una molécula es la parte más pequeña de una sustancia que aún exhibe las propiedades de esa sustancia, y un píxel es la parte más pequeña de un color que aún exhibe ese color en particular . Al volverse más pequeño que eso, comienza a ver los otros colores que se mezclaron para lograr el color objetivo.

Los píxeles se pueden espaciar de muchas maneras, por lo que no representan ninguna dimensión real. En la impresión pueden ser de 300 puntos por pulgada (DPI), en cuyo caso los píxeles están muy juntos, o en la pantalla pueden ser de 72 DPI, lo que significa que están más separados. Debo asumir que 1900x1200 está diseñado para una pantalla, por cierto, ya que es una de las resoluciones de pantalla estándar. En ese caso, se verá igual sin importar cuántas pulgadas tenga, siempre que se muestre a pantalla completa en un monitor de 1900x1200.

Para colmo, la dimensión del píxel, técnicamente hablando, solo te dice cuánta información contendrá la imagen almacenada. En cuanto a qué tan grande se verá , básicamente no te dice nada por sí solo.

TL; DR Realice la conversión cuando exporte su imagen de Corel Draw a un archivo .tif.

Hay dos formas de describir una imagen en una computadora: mapas de bits (también conocidos como rásteres ) y vectores .. Un mapa de bits es una cuadrícula de coordenadas, cada una de las cuales tiene un color específico y cada punto es un píxel. La combinación de todos los puntos de la cuadrícula crea una imagen. Las fotos son mapas de bits; los píxeles corresponden al grano de la película oa los puntos del sensor. Los píxeles no tienen un tamaño intrínseco: pueden ser muy pequeños en una imagen impresa con láser o muy grandes en una pantalla gigante. El tamaño de una imagen en píxeles le indica la resolución a la que se verá uniforme. Las imágenes con una densidad de píxeles alta (puntos por pulgada, ppp) se ven nítidas, mientras que las que tienen una densidad de píxeles baja se ven bloqueadas. Para ver la diferencia, compare Flickr con Minecraft. La ampliación de una imagen de mapa de bits hace que los píxeles parezcan más grandes y la imagen se vuelve más bloqueada y menos nítida.

Los vectores son descripciones matemáticas de formas que se organizan en una imagen. Tampoco tienen un tamaño intrínseco, pero la forma en que se comportan es diferente. La apariencia de un gráfico vectorial no cambia a medida que se acerca, porque se recalcula para que coincida con la pantalla.

Corel Draw es un programa de gráficos vectoriales y, por lo tanto, las imágenes que crea son vectores. Si su cliente desea una imagen de 1900x1200, deberá convertirla en un mapa de bits cuando la exporte. La clave es que el tamaño del vector y el tamaño del mapa de bits son independientes. Puede crear un archivo de Corel Draw de ocho pies por seis y exportarlo como una imagen de 400x300 píxeles. O un archivo de una pulgada cuadrada en Corel Draw se puede exportar como un mapa de bits de 10.000 píxeles cuadrados. Sin embargo, en lugar de solicitar las dimensiones en píxeles, los programas normalmente le piden que especifique un tamaño y una resolución para el mapa de bits, aunque puede cambiar las unidades a píxeles. Esto le permite asegurarse de que el archivo tendrá una resolución razonable y el tamaño que desee. Al solicitar una resolución particular, su cliente quiere asegurarse de que pueda usar la imagen en un tamaño de pantalla grande o en un tamaño de impresión pequeño. La idea de que una imagen digital tenga un tamaño físico es un poco extraña, pero es más fácil trabajar con ella en sentido descendente.

Así que haga su gráfico en el tamaño que desee y luego especifique el tamaño de píxel justo al final cuando lo exporte. Una cosa a tener en cuenta es que si incluye imágenes de mapa de bits en el gráfico, deberán tener al menos una resolución tan alta como la que tendrán en la imagen final. Entonces, si la mitad del ancho de su gráfico es una foto, esa foto debe tener 950 píxeles de ancho.

Los píxeles en CSS (y no como una propiedad técnica de un medio de visualización) son unidades de ancho angular aparente. Entonces, es posible convertir píxeles, pero solo a grados, radianes, etc. Puede convertir un píxel a una pulgada, pero necesita saber qué tan lejos está la pulgada.

Sean B. Palmer tiene una buena página sobre esto:

La luna desde la tierra tiene aproximadamente 24.3px de ancho, por ejemplo. La Torre Eiffel desde una milla de distancia tiene una altura de aproximadamente 550.5px. Eso significa que cuando haces "{ ancho: 24.3px }" en CSS 2.1, estás haciendo algo tan ancho como parece ser la luna.

Un píxel es el punto más pequeño de una imagen. No tiene tamaño físico. Obtiene uno cuando especifica la resolución en DPI (puntos por pulgada) o una unidad similar, y lo procesa en un dispositivo que respeta esta resolución.

En la práctica, hay muchas ocasiones en las que el tamaño es arbitrario porque el diseñador o el software no se preocuparon/no sabían sobre el tamaño/resolución de la pantalla y/o aplicaron un factor de cambio de tamaño para adaptarse a la superficie disponible.

Recuerda: un píxel no tiene un tamaño predefinido. A diferencia de una pica.

PSD Tuts tiene un video que explica la relación entre píxeles aquí

Píxeles

Pixel es la forma más pequeña para mostrar el diseño de una unidad de visualización. Ej.: un monitor de visualización consta de varios píxeles que forman una visualización en su pantalla.