"Pixel" always confuses me whenever I do web banner work.
I use CorelDraw x5 for my work. I usually prefer to use inches rather than pixels as inches are much intuitive for me. But when I do an "Inch to Pixel" conversion, i get confused.
In CorelDraw: 1 inch = 300px.
At AuctionRepair.com: 1 inch
= 75 pixels.
At
UnitConversion.org:
1 inch = 96 pixels.
Now my client is asking for 1900x1200px banner. How should I do the conversion?
Just think of pixel like an atom. The atom is a smallest particle of matter. Where as a pixel is a smallest particle of digital image.
An atom has neutron, proton & electron whereas a pixel has red, green & blue values :)
The number of pixels per inches or centimeter (cm) etc. is called the "resolution".
A higher resolution means more pixels per unit of length.
If you are designing for web / desktop the you can say 1 Inch = 72 pixels
For offset printing (usually 300 resolution is used), you can say 1 inch = 300 pixels
Printing resolution is called DPI which means "dots per inch". Pixels are the dots. The higher the number of dots, the finer the printing result will be.
Now my client is asking for 1900x1200px banner. How should I do the conversion?
If your client is giving you the dimensions in pixels, then it must be something for desktop / web and you can design it on 72 resolution.
If he require something for printing then you must ask him either the resolution or the size in inches, cm, etc.
If a client of mine asked for a 1920x1080px image, the first thing I need to know the intended use. Is it for the web, print, or both?
In the print world, a pixel (or picture element - [pict-el]) has no meaning or definition. Pixels can not be measured in any way. They have no predefined size or unit in order to calculate their size. Therefore are not a "real world" term. They are strictly a digital term and only refer to the digital world.
In the broad sense, a pixel is the small spot on a screen or monitor that is colored by light, either backlit (CRT), LED, Plasma, or other technologies. Each of these small, different colored, spots (pixels) when set together form an image to the human eye. To use a real world analogy, think of it like a brick wall... each pixel would be a brick... the image would be the wall.
In many apps, and for many people, 1 Pixel = 1 Point. (Adobe even uses this theory.) However, this isn't entirely accurate either. A point is simply the smallest unit of measure used by most designers in the real world, as opposed to digital world.
There is no such thing as 1 inch = 72px or anything even remotely close. Every screen on earth has a different pixel density. How many pixels fit into an inch is entirely dependent upon your monitor's pixel density.
When working in Photoshop for the web, what you input into the Resolution field for a new document is largely irrelevant. An image destined for the web (or screen) will use it's pixel width and pixel height and not reference the Resolution setting at all. See here for more information on resolution (ppi) and the web/screen: Is it mandatory to keep images at 72DPI for web design? For the web, the only difference the resolution field offers is it allows you to create more detailed work in Photoshop. But upon output, the resolution field is ignored, using Save for Web. If you use Export rather than Save for Web then the resolution is used to alter the pixel width and pixel height of the image based upon your Operating System of all things. Macintosh applications assume that each inch has 72 pixels in it and Windows application assumes each inch has 96 pixels in it. Neither of these are really accurate or true, but the engineers had to use something. So a higher resolution upon Export will result in a larger pixel width and pixel height.
Now where print meets pixels..... resolution or dots per inch (DPI). DPI is essentially the dot density which is created by an imagesetter (or platemaker) when outputting printing plates. All images being printed need to go through a halftone processes. In addition to a specific line screen or Lines Per Inch (LPI) which determines how many rows of dots will be printed. The density of the dots in the halftone determine the level of detail and quality in the image itself. A halftone with a higher DPI and LPI will look much better than a halftone with a low DPI and low LPI. If searching for any correlation between screen and print, the most common place user find a little bit of logic is thinking that 1 pixel = 1 dot. This isn't entirely accurate, but it's close enough that it's not an issue if this assumption is used. This is where people interchange the terms PPI and DPI thinking they are the same thing. In reality, they aren't the same at all, but there's no great harm in thinking they are.
For print work, the Resolution field in Photoshop's new document window is critical. Most often you want a resolution of 260 or better for print images. This equates to 260DPI which is the optimum setting for 175LPI (a common line screen). 300dpi is used most often because it's a nice, even, round number to remember and more DPI is never a problem. The overall calculation is actually 1.5 times the LPI equals the DPI. So 1.5 x 175 = 262.5. So it's rounded up to 300dpi.
If you know the intended use.....
If it's for the web or screen, just create a new document at 1920x1080px and whatever resolution you want. A higher resolution is going to allow you more detailed work in Photoshop, but it's not going to change the web/screen output of the image. Regardless of the resolution (ppi) the image will still output at 1920x1080 pixels (using Save for Web).
If the image is for print or both, I'd use Photoshop to give me an idea of the physical size when printed. Simply create a new document with the 1920x1080 measurements and insert 300 for the resolution.
Now switch the "pixels" drop down to Inches:
This is using Adobe's internal 1px = 1pt theory, which is as good as any. But it gives you a general idea that the image will be roughly 6.5"x3.5". I'd then check with the client to verify that a 6.5x3.5" image is going to fit their needs.
Hi [client],
A 1920x1080 pixel image equates to roughly 6.5x3.5 inches for print production. Is that size going to work for you? Should I go larger for print?
Thanks!
So a higher resolution upon Export will result in a larger pixel width and pixel height. the opposite of what will happen? Don't higher resolutions result in smaller pixels upon export?
Commented
Apr 16, 2014 at 19:04
There is a computer science paper (really, fun memo) titled, "A pixel is not a little square" by Alvoy Ray Smith.
A pixel is a point sample. It exists only at a point. For a color picture, a pixel might actually contain three samples, one for each primary color contributing to the picture at the sampling point. We can still think of this as a point sample of a color. But we cannot think of a pixel as a square—or anything other than a point.
The term "pixel" is short for "picture element".
An image has consists of pixels, which are just colored dots in a rectangle, with no size.
To show the image, we use a screen that can show colored dots, and need to decide which dots we want to show where.
Looking at the details, the image consists of separate dots, each with a separate color. Like when you would fill the boxes on quadrille paper with colors, one in each box.
Except - important - that there is no paper (that has a size), and the boxes have no physical size. It's only about which color dot is below or right of which other.
If you think about the size of the image on the screen, that is like showing this "paper" on the screen - but we have no idea how "large" it actually is, in terms of inches or mm.
When we want to display the image on the screen, we see the screen also has "boxes" that can show colors. Both are called pixels - but technically they are something different.
Simplest thing we can do is assigning each of our colored boxed form the "paper"
to a colored box on the screen.
Then, the size on the screen, in actual real centimeters, depend on how large these dots of the screen are.
If we need a certain size, we can do something different:
We can either just decide ourselves how large the image should be.
We need to know how large the screen dots are.
Then, for each row, we can calculate how many screen dots we can use for our color dots. To make it fit, if we have more screen dots than color dots, we need to use some color dots multiple times, or if we have less, leave some out.
One more confusion to complete the discussion:
In website design and layout, one "CSS pixel" is always equal to 1/96th of a "CSS inch", regardless of screen resolution. This was done because so many early websites used pixel-based measurements for layout assumed a standard screen resolution. In order that the actual size of text and other content remained consistent, web browsers find an approximately even conversion between screen pixels and layout "px" units, and adjust their interpretation of inches so there is always a consistent ratio between "px" and "in". The same goes for all units that are based on inches, such as "pt" for font -- 12pt font-size is always equal to 16px font-size.
Now that screen resolutions are commonly much better than 96px-per-inch, the concept of "dots" has been borrowed from the print world to talk about actual physical resolution of the screen. There's even a dots-per-pixel (dppx) unit for describing physical resolution proportional to the standard CSS pixel. For example, the new "Retina" Mac & iPhone screens are 2dppx resolution.
For your situation, I echo the advice of others: ask you client to clarify what is needed. That said, generally if someone is asking for art with pixels measurement, they are using it for websites. Create your image at exactly the pixel dimensions they ask, and set your image-editing software to use a resolution of 96dpi in order to lay out your rulers and text size in units you are comfortable using.
That said, it might not hurt to actually create your image at twice that resolution (i.e., 192dpi), in order to have a version suitable for Retina screens if your client discovers that they want it. Then, your image software should have an easy way for you to save your image at a lower resolution & smaller file size. It's much easy to convert an image to a lower resolution than the reverse!
Inches are physical dimensions while pixels are screen dimensions. At the same resolution, a pixel is physically bigger on a larger screen, as the density or PPI (pixels per inch) is controlled by the screens physical size vs resolution. So when converting pixels to inches, it all comes down to what you want your pixels per inch (PPI) to be. If you want 300ppi (standard for print), you are simply saying "squeeze 300 pixels into a real world inch". This results in a denser quality than if you were asking for 72ppi, as less pixels equals less quality information crammed into that inch.
Screens are typically considered 72ppi, but this is just a default and is completely irrelevant to the actual size of your screen. The same 1920x1080 resolution could be 10ppi on a stadium screen or 400ppi on a mobile phone.
A pixel has no correlation to real world measurements. As such, there is no way to convert inches to pixels in any consistent way. It's all arbitrary and dependent on what you're doing to do with the image int he end.
What is a pixel in the context of a digital image? It's the smallest unique element within the image. It will have a color assigned to it. Literally it refers to an individual "picture element".
Imagine you have a light bulb that you can switch on and off. This is basically a 1x1 pixel display, where the light bulb is the pixel. Now buy a few more light bulbs and arrange them in a square 10x10 fashion. If you wire them in a way that you can switch each one of them on and off as you wish, you have a crude display with 10x10 "pixels". You can even draw basic shapes on it.
Now if you move away far enough from this light-bulb-display, the eye can eventually no longer distinguish between those individual light bulbs and all you will see is a continuous shape instead of individual pixels. This happens, because the eye has a limited scanning resolution, if there are more dots (light bulbs) per inch than the eye can recognize, the pixels turn into an image. The resolution of your eyes is about 300 dots per inch (DPI). If you take a magnifying glass and have a look at your monitor, you will see that it is composed of tiny light bulbs as well (LCDs), just many more. About 2,073,600 (1920x1080) on a full HD screen, times three, as there is one for each RGB color, that your eyes just can't see, as they are too tiny.
Now obviously what your eye can perceive as individual dots or not depends not only on the arrangement of the dots (how close they are together) but as well on the distance you are to that "screen". That is why DPI is a relative term in several ways. If you take the same screen and get too close, you can see the pixels. If you are too far away, you can no longer read whats on the screen, even though the DPI and resolution (amount of pixels) never changed.
For this and several other reasons during the creation of the first computer monitors a standard resolution of 72 DPI (Apple) or 96 DPI (Microsoft) was chosen. This is a good compromise between the distance the user is expected to be away from the screen and the technical limitations from that age. But even today, most screens follow that resolution approximately. That is why the larger the screen the higher the amount of pixels.
Now if you know the DPI resolution of your monitor, it is very easy to figure out how many pixels are in each square inch. If you for example want to draw a 1x1 inch² square on a monitor, you can easily determine how many pixels this image has to be (72x72 or 96x96). But it is as well obvious, that this image will be larger or smaller on other screens that do have a different DPI resolution. Text that is readable on a 24" screen at 96 DPI might be way too tiny on a 4" iPhone at 300 DPI, because those 96 pixels (1 inch) on the 24" is just a few mm on the phone.
So if your client asks you to create an image at 1900x1200 px, the first questions from you should be: for which device?
To solve the dilemma of web pages or applications which are supposed to look good on different devices, formats have been invented that do not work with pixels but with a length in cm or mm. The resulting image is then rendered according to the device capabilities, ensuring that a 10x10 cm square is still 10x10 no matter on which screen it is displayed. But this format can obviously not be a pixel format, but will be a vector format.
While this solves the Mac/Windows/Other issue, it will not solve a huge size difference. You example image will be 10x10 cm on each device, but that might cover the entire screen on a mobile phone. This problem is not yet entirely solved, but most companies have some form of solution for it. But in most cases you actually need to develop at least two pages, one for standard desktop, one for mobile phones and eventually one for tablets as well.
There are already a bunch of helpful answers, but I wanted to maybe explain this a different way.
By requesting a 1900x1200 pixel image, your client isn't actually telling you anything about the dimensions they need. Forgetting about the word "pixels" for a moment, the client is simply telling you how much detail they need (ie. the resolution). They may simply intend to size it themselves as they require.
If you need to use inches for your own purposes, since you find that measurement easier to deal with during the development of your graphics, then simply use them. Using vector graphics (Corel Draw is a vector tool), you luckily don't need to worry much about pixels until it comes time to save flattened images.
To be safe, start with a canvas size of the same aspect ratio: 1900x1200 is a 16:10 ratio, so 16 inches by 10 inches should work out. When it comes time to save or export a flattened image (a "raster", or bitmap), you can choose the 1900x1200 pixel dimensions.
I'm not familiar specifically with Corel, so I can't tell you exactly how to enter these settings, but they are in all likelihood there.
As for "what is a pixel", the answer that said it's akin to an "atom" is pretty good. Though if we want to be completely anal, we could more accurately say a pixel is a molecule:
A molecule is the smallest part of a substance that still exhibits the properties of that substance, and a pixel is the smallest part of a color that still exhibits that particular color. Getting smaller than that, you start to see the other colors that were mixed in order to achieve the target color.
Pixels can be spaced out in all sorts of ways, hence their not representing any real dimension. In print they can be 300 dots-per-inch (DPI), in which case the pixels are very close together -- or on screen they can be 72 DPI, meaning they are further apart. I have to assume that 1900x1200 is intended for a screen, by the way, as it's one of the standard screen resolutions. In that case, it will look the same no matter how many inches in its dimensions, so long as it's displayed full-screen on a 1900x1200 monitor.
To cap this off, the pixel dimension, technically speaking, only tells you how much information the stored image will contain. As for how big it will look, it tells you basically nothing on its own.
TL;DR Do the conversion when you export your Corel Draw image to a .tif file.
There are two ways to describe an image on a computer: bitmaps (also known as rasters) and vectors. A bitmap is a grid of coordinates that each have a specific colour, and each point is a pixel. The combination of all the points in the grid creates an image. Photos are bitmaps; the pixels correspond to the grain of the film or the points on the sensor. Pixels have no intrinsic size: they can be very small in a laser printed image, or very large on a giant display screen. The size of an image in pixels tells you about the resolution at which it will look smooth. Images with a high pixel density (dots per inch, dpi) look sharp, while those with a low pixel density look blocky. To see the difference, compare Flickr to Minecraft. Magnifying a bitmap image makes the pixels appear bigger, and the image becomes blockier and less sharp.
Vectors are mathematical descriptions of shapes that are arranged in an image. They also have no intrinsic size, but the way in which they behave is different. A vector graphic's appearance doesn't change as you zoom in, because it's recalculated to match the screen.
Corel Draw is a vector graphics program, and the images that you make are therefore vectors. If your client wants a 1900x1200 image, you'll need to convert that to a bitmap when you export it. The key thing is that the size of the vector and the size of the bitmap are independent. You can make a Corel Draw file that's eight feet by six, and export it as a 400x300 pixel image. Or a file that's an inch square in Corel Draw can be exported as a bitmap that's 10,000 pixels square. However, rather than asking for pixel dimensions, programs typically ask you to specify a size and a resolution for the bitmap, although you can change the units to pixels. This lets you make sure that the file will be a reasonable resolution at the size you want. By asking for a particular resolution your client wants to make sure that they can use the image at a large screen size or small print size. The idea of a digital image having a physical size is kind of strange, but it's easier to work with downstream.
So make your graphic at whatever size you like and then specify the pixel size right at the end when you export it. One thing to watch out for is if you include any bitmap images in the graphic, they will need to have at least as high a resolution as they'll need to be in the final image. So if half the width of your graphic is a photo, that photo needs to be 950 pixels wide.
Pixels in CSS (and not as a technical property of a display medium) are units of apparent angular width. So it is possible to convert pixels, but only to degrees, radians, etc. You can convert a pixel to an inch, but you need to know how far away the inch is.
Sean B. Palmer has a nice page on this:
The moon from earth is about 24.3px wide, for example. The Eiffel Tower from a mile away is about 550.5px tall. That means that when you do “{ width: 24.3px }” in CSS 2.1, you're making something as wide as the moon looks to be.
A pixel is the smallest point in an image. It has no physical size. It gets one when you specify the resolution in DPI (dots per inch) or similar unit, and render it on a device that honors this resolution.
In practice, there are many occasions when the size is arbitrary because the designer or software didn't care/didn't know about display size/resolution, and/or applied a resizing factor to fit on the available surface.
Remember: a pixel has no predefined size. Unlike a pica.
PSD Tuts has a video that explains the relationship between pixels here
Pixel is the smallest form to display design for a display unit. Ex: An Display monitor consists of several pixels which form a display on your screen.
