Designing for web on a retina macbook
- Started
- Last post
- 39 Responses
- ernexbcn0
I'm not a designer but know some who did the transition to Fireworks and I have to agree with what @animatedgif said, it is the best tool right now to design websites.
That doesn't mean you can't design websites on Photoshop or Illustrator, but Fireworks was created specifically for that and according to my friends once you master it there's no coming back.
It crashes like a bitch though.
- I came back and I rather use photoshop, same thing when I was using corel and switched to illustratorMiguex
- awebdeveloper0
@animatedgif is correct all base belong to Fireworks.
Perhaps you should go back to circa '92 when print was big.
- ********0
@Nathan_Adams, you asked why 144ppi...
My thought is that if I start the site in PS at 144ppi (double 72ppi)
and assume 50% to be actual size (roughly, of course) I'll be able to design as I always have and save a lot of time when I go to output double-res files for Retina and regular-res for non-Retina.- dude forget the PPIs, just work in pixels dimensions ffs.ESKEMA
- How is that easier?********
- PPI doesn't really mean anything in Photoshop, aside from changing the rulers and zoom. Why not work at 144?********
- As you said it doesn't really mean anything. Work in 456ppi, it'll make absolutely no difference.Nathan_Adams
- ESKEMA0
because working in PPI is irrelevant. Stick to pixel dimensions and use double that for retina displays. the PPI's are only relevant to the monitor, not the design it will display. Different PPIs on different monitors will result in a different "real" physical scale of the displayed object but that's it. Not anything else. So you should ignore that and stick to just pixels. If the display is retina at 960x640 (iphone), just start with those dimensions and then export a version that is half of that for non retina displays. Repeat process for whatever other pixel dimensions you wish.
- animatedgif0
http://www.bohemiancoding.com/sk…
Built with retina in mind
- Miguex0
Now why exactly the 1992 people here, think it matters that using fireworks over photoshop will make a difference in screen resolution?
and when was the last time you used photoshop exactly?
- fireworks keeps everything in vector scalable whee ps doesn't, no?albums
- *wherealbums
- If you use layer shapes and smart objects in Photoshop, everything is scalable.Nathan_Adams
- Vector layers in photoshop are a fucking jokeanimatedgif
- For UI design at leastanimatedgif
- ernexbcn0
@Miguex I was pointing out Fireworks right now is a tool designed and tailored specifically to design websites. Photoshop is not meant for that even though you can use it for it. Not sure why you keep repeating that 1992 thing, you might need some catching up with software.
- Fireworks came out in 98 anywayanimatedgif
- fireworks is tailored to build sites, the same way dreamweaver is, but you won't see many dev. using it. in the end is a matter of choiceMiguex
- choice, I say 1992 because that's how I used to do websites back in the dayMiguex
- and I also used director instead of flash, and now I only use after effectsMiguex
- ESKEMA0
They have the same pixel dimensions and that's what counts.
This picture below illustrates the difference in PPI per monitor, resulting in a different physical size of the displayed image at 100% scale.
The Retina display (in this case an iPhone 4S) showing a 500x500px image at 100% and the same image viewed at 100% on an iMac. the iMac is not Retina, so the physical space to fit the same amount of pixels as the iPhone is bigger. More PPI on a monitor = more pixel density (ence Pixel Per Inch).
But worrying about the PPIs when designing is useless, because every device will only interpret the pixel dimensions.
Bottom line is, if you want to do pixels for retina displays, you'll have to design everything at regular pixel size and at 2x size. No PPI bullshits in between.
- ********0
^ Yes. I know. I'm not talking about the finished product. I'm talking about the most convenient way to work in Photoshop. I understand ppi, as you can see above, I had already commented that ppi is irrelevant.
- ESKEMA0
From my experience, the most convenient way is to work the large version first and when you're happy with it, scale it down and make adjustments.
Always remember to use divisible dimensions on the large version, so it scales down on full pixels. Scaling down a file that is 543px wide will result in a 271.5px wide file, that will not be crisp when displayed. That goes to everything (drop shadows, strokes, etc..)
- ********0
Exactly. In Save for Web, there is no option for PPI because PPI is irrelevant. This is plainly obvious, as a monitor's resolution and it's size in inches are not directly related to each other. More simply: the web can't be measured in inches, therefore it can't be measured in pixels per inch.
So, that said... I'm suggesting that working with a Photoshop file set to 144ppi means that when you zoom to 50% you will see ROUGHLY what someone will see IF they have the same monitor as you. This would allow you to easily imagine what your site will look like on other monitors and devices, BEFORE you save for web.
So, my technique might make it easier to design visually without worrying about doing the doubling/halfing math for pixel dimensions in the early stages. Which is to say, you will notice your odd numbered pixel widths because they'll look wrong when viewed in PS at 50% (on a 144ppi PS file.) When it's time to export your graphic elements, simply Save For Web each element twice, and you only have to change a single setting (Percent) in the Save for Web dialogue. Once at 50%, again at 100%.
The only time you'd have to worry about the math is when you are setting up your grids and guides at the beginning. And hopefully you're already doing some math when you're making grids.
- ESKEMA0
^ Wrong
Viewing a 500px 300ppi file at 50% in PS is the same as viewing a 500px 72ppi at 50% also.
The only way to see it like on a retina display is on a retina display.
Preview it on an iPad... or just at 50%. But setting the document at whatever ppi won't make a difference.
- ESKEMA0
this is helpful
http://bjango.com/mac/skalaprevi…
- ********0
^ Ah, you're right. I forgot that 100% zoom in PS means pixel-for-pixel viewing, regardless of ppi.
- true_cut0
Looking Good on High-Res (Retina) Displays
- ETM0
- OSFA0
BUMP! and Question...
I know this might sound stupid but it is a legit question... I got a retina MBP last night and when I checked my sites, they look like blurry shit.
How can I "design for retinas"? My iMac is also retina and although everything looks smaller, sharpness is good. How can I make sure that my work works fine on both retinas and non?
Thanks!
- Put some retina in your eyes.********
- Really? Perhaps READING this thread would provide you the answer. Just saying.ETM
- Your iMac doesn't have Retina.monospaced
- Put some retina in your eyes.
- ohhhhhsnap0
Wondering what percentage of ppl with computers have retina screens today.