4 Replies Latest reply: May 7, 2014 6:56 AM by Masters and MBA

screen resolution to set up photoshop file for edge reflow

gc234 Dec 10, 2013 10:46 AM

hi :

i'm learning responsive design along with edge reflow. I'm designing a web site that works responsively for all devices. I'm starting with a psd layout. I set up my photoshop at of 960x1136 currently.

my edge reflow breaking point for mobile is 768px currently. Perhaps i should modify my psd file to 768 width as well. but before i do that i have the following problem to resolve. When i view this on my iphone thru edge inpect. it's displaying a width of prob. 320 viewport width. which makes all the fonts and images look too big and of course the layouts are in disarray b/c there isn't a corresponding layout for that view port size.

i understand the difference btw viewport size and screen size. But I'm confused re: the size to set up my photoshop file.

should i have set up my photoshop file based on "viewport " size rather than screen density?? (ie. 320x480 viewport for the smaller iphone rather than 640x960 which is the actual screen pixels) and create high res images separately for retina displays??

what i'd like to have is to have corresponding font sizes and box sizes btw the edge flow file and photoshop psd. so if pick 1.5 em font in edge reflow, the same font in photoshop file is also 1.5 em. and perhaps saving images as smart object so the images can have higher resolution?

please advice.

thx

grace

1. Re: screen resolution to set up photoshop file for edge reflow

gc234 Dec 10, 2013 10:48 AM (in response to gc234)

i should add both my iphone is iphone 5(640x1136px) with the retina display.

one more thing to add:

or perhaps there's a way to tell edge inpect/reflow to account for the retina display??

thx
grace
Like Show 0 Likes (0)

Actions
2. Re: screen resolution to set up photoshop file for edge reflow

Seth Walker Dec 10, 2013 11:04 AM (in response to gc234)

hello,
You are correct that viewport size does not equal screen size. The newer iphones I believe are 480px now, not 320px http://viewportsizes.com/?filter=iphone. But they are 144dpi I believe.

In photoshop, the designs you have may need some tweaking when you go from standard def to retina sizes. This is kind of strange, but alas, welcome to device fragmentation .

You can setup your export of those image based assets in PS with the new generator work flow. You can assign one-to-many values for export. It can come in handy when dealing with multiple dpi devices and designs in the same PSD. http://blogs.adobe.com/photoshopdotcom/2013/09/introducing-adobe-generator-for-photoshop-c c.html.

I would maybe say, choose one dpi in PS and know you may need to export several images to accomodate the change in dpi for different devices. Keep those things as smart objects! That's usually what I do to avoid image crappienes. Once in reflow, you can set BOX background images at your 1280px media query to a @1x image, and at the retina screen size of say 480px change it to @2x. You won't need any JS or additional logic to make it happen. You can't however, swap an image object in the same way, that would require some other kind of coding we don't yet support.
Like Show 0 Likes (0)

Actions
3. Re: screen resolution to set up photoshop file for edge reflow

gc234 Dec 10, 2013 11:31 AM (in response to Seth Walker)

thanks for the quick reply.

if i'm going mobile first and designing for the narrowest screen, which is vertical , 320px

this means if i want to have 1:1 relationship btw font size specs. i need to set up my phosothop psd file at 320px width?? bc if i set up my psd file at retina resolution my font size will be double the size..ie. if the psd file is set up at retina resolution. a 32px font actually should be 16 px(1em) in edgeflow to display correctly??

is there a sample psd file from one of your tutorials i can download some where to speed up my learning curve?
thx
grace
Like Show 0 Likes (0)

Actions
4. Re: screen resolution to set up photoshop file for edge reflow

Masters and MBA May 7, 2014 6:56 AM (in response to gc234)

Maybe I'm wrong, but the best option would be to work with percentages, not pixels.

You can see examples in this Adobe links:
CSS Percentage vs. Pixels - Re: How can convert the em,px,pt and % in css - CSS Width percentage layout issues - Re: DW CC Fluid grid layout how to change px width for desktop layout

I hope it has been helpful

sorry, I forgot this link in Adobe site: Ten things you need to know about responsive design | Adobe Developer Connection

See you,

Masters and MBA
Like Show 0 Likes (0)

Actions

Go to original post

screen resolution to set up photoshop file for edge reflow

1. Re: screen resolution to set up photoshop file for edge reflow

2. Re: screen resolution to set up photoshop file for edge reflow

3. Re: screen resolution to set up photoshop file for edge reflow

4. Re: screen resolution to set up photoshop file for edge reflow

Actions

More Like This

Legend