I'm trying to design a website in photoshop. I've never quite understood how to measure the particular elements though. I believe it's probably because the resolution in my browser is different from the resolution in my ps file. Here's what I mean...
I'm designing this in photoshop:
This is how it displays at 100% in photoshop. The resolution is set to 144 dpi. The dimensions in PS are 1920px wide by 8626px tall, but at 100% it's displaying quite small on my screen.
How can I tell how it will actually display once it's in the browser? I will be passing this off to a developer who will need to know how large the text needs to be etc. The last time I sent a web comp to a developer, the text was all too large...
Does my question make sense? It's hard to describe! Let me know if I can provide any other information to be more clear about this! Thanks!!
Explore related tutorials & articles
12
Replies
I just want to figure out the best way to set up a file so that I know how I want it to look and the developer also knows how I want it to look. I do have a basic understanding of how websites work and I of course know that elements must enlarge/shrink/move etc. to flow differently on different sized screens. But I want the developer to know the basic ratios of text to image to screen size.
For instance, I created this comp in the past:
I sent this to a web developer to turn into a website and it ended up looking like this:
Do you see how much larger the text is on the left hand side of the developer's version? I want to be able to show what I want in a clear way, but I'm not sure if I'm viewing the image properly in photoshop.
So, based on what people have said here:
If I'm on a retina screen, could I potentially view at 200% at 96ppi and I would be viewing the image about the size that it might appear on the web browser?
Q: How long is a piece of string?
A: It depends.
Responsive web design is not about fixed widths & heights because your end product must fit all devices from ultra small to ultra large & everything in between. Also the W3C web standard for images is 96 pixels per inch up from the old standard of 72 ppi. It was never 144. See link below for more info.
https://hacks.mozilla.org/2013/09/css-length-explained/
In web design, we use CSS widths expressed in percentages, viewport units or rems. We rarely if ever use explicit height values because height is variable. It changes depending on the user's viewport and the amount of content on the page.
I use Photoshop to create images for the web. But I build my page layouts in Dreamweaver and test the actual layout in browsers and devices.
As a quick example, this is my prototype in a desktop browser. The native background image is 900 x 900 px. But it is scaled up or down by CSS code.
The same prototype in a smaller viewport (320 x 480).
This is the responsive HTML and CSS code I used.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Background-Size Cover Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style>
body, html {
margin: 0;
padding: 0;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
body {
background: url(https://placeimg.com/900/900/nature) center center fixed;
background-size: cover;
font-size:4.215vw;
}
.container {
width: 50%;
margin: 0 auto;
padding: 5%;
background: rgba(255,255,255,0.7);
}
.center { text-align: center }
</style>
</head>
<body>
<div class="container">
<h2>Heading 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p class="center"><a href="https://example.com" class="button">CLICK HERE</a></p>
</div>
</body>
</html>
AdChoices