While converting a webdesign given as a photoshop file to html+css, I got confused with font sizes. As seen on the image below, 30 px in photoshop does not equal 30 px in other Windows programs (different on Mac or others?), or browsers. This seems to be unaffected by creating the photoshop image in different resolutions than 72 which is default, and unaffected by change of units between pt and px. Can anyone hint on how to set photoshop to use browser px units?
The font size in the paint document refers to points, not pixels. Change the font size in photoshop to 30pt and they should be the same size.
A point is 1/72 of an inch and the pixel equivalent can depend on the DPI of your monitor. At 96 DPI 30pt * 1in/72pt * 96DPI (my screen res) is 40px. To convert pixels to points work backwards so 30px * 1in/96px * 72pt/1in = 22.5pt.
So change the paint text size to 22.5 and they should match up.
Set it to 96 dpi.
Related
How can i set font Size in pixels?
Hello,
Designer send me sizes of app components. Header must be 60 pixels
, but if i put font size 60, it is very big. How can i adjust it for pixels. Thank you. (IOS DEVICE)
You cannot do pixels on mobile. You do DPI. Tell your designer to get with the tech. He's designing for web. While you can figure out how many DPI correlate to how many pixels for the current device (its a device specific thing) with the PixelRatio API - https://facebook.github.io/react-native/docs/pixelratio.html - it's putting in effort to make your design worse. DPI works great across different screens/sizes.
When I drag an image into Photoshop and go to "image size" I can see the size in cm (eg: 80X30 cm) In Windows 7, the only details you can see about the image regarding size is pixels and resolution. Is there a way in VBNET to get the image height and width in centimeters?
actually one Pixel = 0.264583 Millimeter.
There is a difference between Dots Per Inch (DPI) and Device-Independent Pixel(DIPs)
DPI and Device-Independent Pixels
Best Regards
I have an app that creates a large bitmap and later the user can add some labels. Everything works great as long as the base bitmap is the default 96x96 resolution. If I bump it up to 300 for instance, then the text applied with Graphics.DrawString is much too large - a petite size 8 or 10 font displays like it is 20.
On the one hand, it makes sense given the resolution increase, but on the other, you'd think the Fonts would scale. MeasureString returns a larger size when measured on a 300 vs 96 dpi bitmap, which wasn't really what I expected.
I've tried tricking it by creating a small bitmap of the appropriate size, printing to it, then pasting that to the master image. But when pasted to the high res it enlarges the pasted image.
The only other thing I can think of is to create a high res temp bitmap, print to it, then shrink it before pasting to the main image. That seems like a long way to go. Is there a compositing or overlay type setting that allows this? Are font sizes only true for a 96 dpi canvas?
Thanks for any hints/advice!
The size of a font is expressed in inches. One point is 1/72 inch. So if you draw into a bitmap that has 300 dots-per-inch then your font is going to use a lot more dots for the requested number of inches. So when you display it on a 300 dpi display then you'll get the size in inches back that you asked for.
Problem is, you are not displaying it a 300 dpi device, you are displaying it on a 96 dpi device. So it looks much bigger.
Clearly you don't really want a 300 dpi bitmap. Or you want to draw it three times smaller. Take your pick.
If you want a consistent size in pixels, specify UnitPixel when creating your Font object.
What size should an application icon and menu bar icon for OS X be?
I can deal with small resolution displays but what about Retina - does an icon displayed on the menu bar (e.g. 20 x 20 ) will be smaller or blurred on a new MacBook Pro with Retina display?
I reckon that the Application icon will be scaled, so if I'll prepare twice larger than regular it should be OK on Retina.
I found an excellent guide for iOS development with sizes specification but I can't find similar size specifications for OS X.
NSStatusBar icons (i.e. Menu bar icons) are different from regular app icons. I have not been able to find an NSStatusBar official icon guideline, but I have to believe that the Toolbar Icon guideline for buttons is pretty close. It suggests:
Create icons that measure no more than 19x19 pixels.
Make the outline sharp and clear.
Use a straight-on perspective.
Use black (add transparency only as necessary to suggest
dimensionality).
Use anti-aliasing.
Use the PDF format.
Make sure the
image is visually centered in the control (note that visually
centered might not be the same as mathematically centered).
In testing, I've found:
NSStatusBar seems to look best with something 18 pixels high, or less. The systemStatusBar has a thickness of 22.
While it lists PDF format, I've been using png without issue.
If you want your icon to be white on blue when it's selected, you need to provide the alternateImage as a separate white version of your icon.
Code sample:
myStatusItem = [[NSStatusBar systemStatusBar]statusItemWithLength:NSSquareStatusItemLength];
NSImage *statusImage = [NSImage imageNamed:#"Status.png"];
[myStatusItem setImage:statusImage];
NSImage *altStatusImage = [NSImage imageNamed:#"StatusHighlighted"];
[myStatusItem setAlternateImage:altStatusImage];
[myStatusItem setHighlightMode:YES];
[myStatusItem setMenu:self.myStatusMenu];
To make your menu item support Retina displays, Dark Mode and different states (e.g. pressed)
Create two PNG images sized 16x16 and 32x32 pixels
Create a new image asset in Xcode with Render As set to Template Image and add your images for 1x and 2x
Initialize your NSImage from the image asset without changing its size: NSImage(named: "Example")
http://developer.apple.com/library/mac/#documentation/userexperience/conceptual/applehiguidelines/Intro/Intro.html#//apple_ref/doc/uid/TP30000894-TP6
And:
http://developer.apple.com/library/mac/#documentation/userexperience/conceptual/applehiguidelines/IconsImages/IconsImages.html
Follow these steps and you will get a perfectly sharp status bar Icon for retina
Open a png file of your Icon in photoshop it should be larger than 88px x 88px
go to menu, Image, Image size
set resolution to 350
set size to 88px x 88px (pixels)
save image as png
add it xcode
adding on to Michael's answer apple are now requiring all the way up to 1024x1024px icons due to retina displays.
http://www.cultofmac.com/179738/apple-now-requires-high-res-1024x1024-icons-for-every-mac-os-x-app/
The maximum size for the app icon should be 1024 x 1024.
And you have to create both regular and retina resolution icons for 16 x 16, 32 x 32, 128 x 128, 256 x 256, 512 x 512 & 1024 x 1024.
The details for which you can find in the "High Resolution Guidelines for OS X" document from Apple.
I am using your resizer tool, it works very well, I am stuck at one place and need your suggestion to help me choose the correct image resizer settings
Everythings works fine when image is smaller than the browser window size I got problem when it's bigger than browser window
I am using the following parameters
orig.jpg?width=1600&height=530&mode=crop&scale=downsizeonly
for example consider a portrait image scenario given below
Browser window size = 1600 Width x 530 height
Original Image size = 1024 Width x 768 height
expected result: 1024 width x 530 height (so it should crop the remaining height)
actualt result: 1600 with x 530 height
Height and its cropping is ok but 1600 width is wrong I want it to be 1024 width so image didn't loose quality
Vise versa functionality I need for Landscape image
What parameter should I use?
The automatic cropping can cause upscaling even when &scale=down IF the requested dimensions would normally NOT cause upscaling with &mode=max or &mode=pad.
This is a known bug that will be fixed in a future release.