Hot answers tagged

8

If I were you I'd abandon the Idea. Hires handling is the least of your problems, because there is simply no support within E-Mails. But the problems start earlier. Most email clients strip out images and add a button where the user can activate the images. All this fuss for just a logo is just too much of a hassle. I would just write the sig with ...


7

DPI is completely irrelevant. What matters is the number of pixels. A non-retina iPhone, for instance, is 320 pixels across. A retina iPhone is 640. (The iPhone 6's retina is 750 pixels wide). What makes a device 'retina' is that it uses more than one physical pixel to create a virtual pixel. An non-retina iPhone and an iPhone 5 are both 320 virtual ...


5

If you are asking: "I just got a retina display and noticed how blurry some web graphics look even when they are saved at the actual size they are used. Should one save images for the web twice the size because there are retina displays out there?" Then this is my answer: You are correct. You should make your images for the web twice the size you ...


5

I use Illustrator for that. If the platform you are going to use supports SVG, go for it. Otherwise, here are some thoughts about how to create crisp raster UI elements using AI (JPG, PNG, etc). Mind you, I am a pixel picker and a bit obsessive at it. Make sure you create a document that is RGB to start with (as opposed to CMYK) so you can see the colours ...


5

are there times when the PPI flag is honored by iphone/retina/screen-density-aware software if it finds one? No. In fact, I can't think of any place it's really honored outside some very select software. For example, I believe, in Photoshop, if the PPI is set, it will affect the size the image is printed at, if you print directly from Photshop. But even ...


4

When designing for a variety of resolutions you want to scale down, not up. Do your design in a @2x resolution (640 x 960 @72ppi) and for the @1x assets you duplicate them to a new document (preferably) and scale them down by 50%. You can set up a Action script for this also to make the process go by faster. To learn a bit about Photoshop action script you ...


4

Use SVG images. http://en.wikipedia.org/wiki/Scalable_Vector_Graphics Worth noting: SVG isn't supported in older versions of IE (8 and prior). I'm not sure how it renders in crappier email clients, either. Maybe SVG with PNG fallback, because anything with a Retina display can probably show SVG. Another option: Don't use an image in the email signature. ...


4

The confusion begins when you think you need to adjust how you work simply because you are working on a retina display. You do not. Treat your machine as you always have. Don't adjust your workflow due to the hardware you are using. Basically forget you are working on a retina display. Now, to support retina display in projects, you need 2 images - one ...


4

For a 2d side scrolling game. Vector style. Using Stencyl That is the key bit of info we needed! Looking at their documentation for animations it looks like animation is handled within the app--meaning that you create the individual animations yourself outside, then import them as individual frames. As such, it appears that the tool you need is a drawing ...


4

I turn my vector images and logos in to a font (or fonts). Take your .ai files (after you clean them up, compound path, and crop the viewbox) and export as .svg. Then use the icomoon app to convert to a font. This will display at any size, any resolution crisply. https://icomoon.io/app/#/select Learn more: http://www.carbonsilk.com/development/convert-...


4

Technical solutions could be: Host the Image on a server and just embed an <img> tag with the address. The Server could use the meta-information of the HTTP-Request which will fetch the image and deliver the right image size for the device. Do the same with display-size aware CSS (But I don't know how good the support for this is in various E-Mail ...


4

what's the difference between a 360ppi mock vs a 72ppi mock When talking about screen mock-ups, absolutely nothing. The only thing that matters is pixel dimensions. As for your concerns, non of them are really all that much of an issue for a team of designers and developers that understand the process. Very large file sizes Hard drives are cheap. :) ...


4

I'm sorry for answering super late, I've just noticed your mention. I'm the author of the article you link to. There is definitely more than one "professional" way of handling several resolutions, and things have become a bit more mature since I wrote about it. If you've bumped your resolution to 144ppi, you can fix the zoom and size issues by doubling your ...


3

They are just twice the size (width and height). You never want to "up size". Ideally you work at the 2x (or 3x) size than down size to meet the non-retina image sizes.


3

I think you are asking about how to design whilst using a retina display, rather than asking how to design for retina displays. You don't need to change anything about the dimensions you choose. If you create a 120px header on your retina display, it will appear as 120px high on a non-retina display - you don't need to change your behaviour because you're ...


3

I think what you're referring to is the pixel density and not the resolution (even though they're related). The pixel density can be measured by counting the number of pixels in one inch. Whereas a screen resolution is the number of pixels that a screen can fit in each dimention (horizontal and vertical). On devices with high pixel density, the browser ...


3

The blurriness is introduced during scaling. If you are providing two set of images, work on the 2x size and scale down for the second set, tweaking any portions that exhibit problems after scaling (sometimes rules and borders etc become too thin and need to be bumped up {etc etc}). If you are providing one set of images, provide the larger pixels ...


3

Retina screens use virtual pixels. For web work, the device translates standard dimensions for you and does the doubling behind the scenes. So a 12px font on a non-retina screen is the same size as on a retina screen. It's just that the retina screen is using 4x the pixels to render it. I find the easiest way to handle this when sketching mockups is to not ...


3

Use Vector Where Possible If possible and feasible use a vector format. You have source files that are vector and SVG or PDF are options, so use one of those. You are displaying textbook pages in a PDF viewer, but since they are 'low resolution' I am assuming the pages are being converted to raster images. Since you have source files in vector format, you ...


3

A couple things you can do: Zoom in. Just scale your design up to 200%. The resolution will be lower, but you will see it at actual size. Design at 4K, export at 1080. Just export all your files at half res, but design so your clients can see it at actual size. Change the monitor to 1080 at least while you design these projects. Yes, you get less screen ...


2

Although I'm unable to read it, based on the images, the tutorial you linked to may not be the best tutorial to follow. There are much more efficient ways to create seamless patterns in Illustrator. This is especially true if you are using Illustrator CS6 or newer with the Pattern Editor feature. I would happily link to better tutorials, but I doubt I could ...


2

Usually there will be no adverse visual effect when scaling proportionally downwards; however, I have seen cases where something funky happens and the rendering engine in certain browsers makes an image appear too sharp when downsizing. I have seen it happen more than once so it isn't an anomaly, but it is rare and doesn't happen with all images. You should ...


2

You're right - at this moment in time, there is no easy way around retina displays other than to double the resolution of your PSDs and work with 2x as many pixels. It's actually a lot easier than it sounds, and lends itself well to a non-destructive working process (e.g. using Photoshop polygons for standard shapes, vectors for solid icons and compound ...


2

I have answered a similar question here: Common ground for image sizes when using Photoshop save to web In short, a very common practice nowadays is: Save your (raster) images always double the pixel size you will display them. If the image will be displayed at 300x300 pixels, save it at 600x600 pixels. Using CSS indicate that the image size is actually ...


2

As AndroidHustle states, you typically will create your 2x images, then either use those for both devices, or export a set reduced in size by 50%. For when you need to maintain two truly separate files, though, you could keep them in the same document. It's just that you'd have one larger than the other. To view them at the same size, you could open a ...


2

Note that it's not so much high density displays as much as devices with high density displays that also support the 2x model. On devices like that, 1px on a regular device = 4px on the high density device (2x the width, 2x the height). So if you want an image to be 100px by 100px, you create an image that is 100px by 100px. It will then look the same ...


2

Many mail clients today support SVG (Scalable Vector Graphics). For those clients, show an SVG. It's guaranteed not to be destroyed by scaling, because it reads like a computer program (e.g. draw a circle, then draw a line connected to that circle at 120 and 240 degrees, etc), so the processor will correctly render a non-blurry image inside supporting ...


2

You need to export your graphics at double resolution, say if for a standard screen you need an image at 64x64 resolution, you need a 128x128 copy of it (or even not a copy) that will be later processed on retina/high-dpi screens. But different environments may process them in different way, e.g. in HTML/CSS you need additional media queries for every kind ...


2

This topic is rather complex, but I will try to summarize the most important things. DPI does not matter The browser resizes the image according to the required pixel dimensions. DPI values will be ignored. Don't use multiple image sizes in a sprite sheet Using lower resolution images saves bandwidth and results in a faster download. Using both sizes in ...


2

I do not understand the @2x as a "trend". It sometimes is a requirement on web design. @2x, @3x, @Nx is not a way to design everything, it is a declaration on a css stylesheet to use an image at higher resolution. It is a specific case of high resolution devices. Aka Iphone, Ipad. The resolution is higher than normal. If thoose systems declare the ...


Only top voted, non community-wiki answers of a minimum length are eligible