css - PSD to HTML element dimensions - Stack Overflow https://stackoverflow.com/questions/21118813/psd-to-html-element-...

PSD to HTML element dimensions

1 de 4 11/04/2024, 02:00
css - PSD to HTML element dimensions - Stack Overflow https://stackoverflow.com/questions/21118813/psd-to-html-element-...

I have a designer who designed my site using Photoshop (.psd).

Now i am the one who will convert this to html/css. In the design, there are icons (images)
1
whose dimension is 70x55 (measured in photoshop ruler)

My question is, when i code these images into html/css, should i be using the following
code?

<img src="img1.png" width="70px" height="55px"/>

Is this how converting psd to html works? following the sizes, spacing, distance on whats
on the actual psd designed by the designer?

Im a complete noob on this so any help will be great appreciated.

-UPDATE -

By the way, when i am coding this into html/css, i am using a high screen resolution
desktop monitor (not the standard monitor laptop screen), i followed all the dimension
designed in the psd from images to container divs & dialog boxes (designer has designed
dialog boxes).

Now after i finished coding, followed the design (followed what i see on the psd), it looks
ok when i view it in a browser with the current big screen i am using. The view i am seeing
is the page looks the same in the psd and lot of spaces and not too compact to look. So
everything looks good here.

Now when i view it in my friend's laptop with standard monitor screen, the page looks very
compact, the images (from psd which i followed the dimensions and coded it in html/css)
looks big and some of the elements i coded did not fit on the browser screen. Im sure the
reason behind this is because i am using smaller screen.

Now i am wondering, I followed what the designer designed in psd. I followed the
distances, dimensions of images, etc... Whos doing wrong here? The designer because he
designed the elements in psd which is too big for smaller monitor screen? or me who does
not know something or maybe missed something here?

Any guidance would be a big help

html css psd

Share Improve this question edited Jan 14, 2014 at 17:20 asked Jan 14, 2014 at 16:36
Follow Bogz
565 1 10 30

2 de 4 11/04/2024, 02:00
css - PSD to HTML element dimensions - Stack Overflow https://stackoverflow.com/questions/21118813/psd-to-html-element-...

1 for icons google: "css sprites" – caramba Jan 14, 2014 at 16:39

after your update - the high res screen has nothing to do with the image size. one way to check if
you got the right sizes from the psd file is as following: in photoshop make sure the size is set to
100% (bottom left corner from open file) in browser make sure the page is set to view, zoom,
normal (on a mac press CMD+0). now you can make a print-screen from the browser and insert it in
your psd as top layer. now you can set a transparency to this top layer by pressing the numbers 60
(makes transparency 60%) now move the layer on the right place and look behind it if all the sizes
are correct – caramba Jan 14, 2014 at 21:13

hi caramba, just did your suggestion and the image dimensions in the browser and psd are equal.
would this mean that the designer has designed the the site in psd only compatible with larger
monitor screen? – Bogz Jan 15, 2014 at 4:10

that means that you have done your job right. – caramba Jan 15, 2014 at 6:56

1 Answer Sorted by: Highest score (default)

Cut out the images using the slice tool in Photoshop and save for web to optimise the
images.
1
The width and height attributes on an image aren't necessary although they save the
browser a small amount of time reading the images to work out the dimensions. Use CSS
to control the size of the image; but obviously you should avoid stretching the image
larger than its native size or it will become pixelated.

By default an image will render in a browser at its native size.

3 de 4 11/04/2024, 02:00
css - PSD to HTML element dimensions - Stack Overflow https://stackoverflow.com/questions/21118813/psd-to-html-element-...

i'veImprove
Share updatedthis
my answer
post. please have a look. any guidance will be a great help – Bogz Jan 14, 2014 at
Follow answered Jan 14, 2014 at 17:02
17:21
Paul Redmond
3,286you4need
To be honest, there's too many variables above to give a simple answer. I think 33 to 52
do
some reading into screen resolutions, PPI, etc. As a starting point, read this article on CSS Tricks:
css-tricks.com/… – Paul Redmond Jan 14, 2014 at 17:23

Paul, thanks for quick answer. Now i understand about this dependency on monitor screen. Anyway,
just for clarification sake, based on what you've understand from my updated post, my opinion
would be the designer has designed the the site in psd which is only compatible with larger monitor
screen, thats why when i view it in smaller screen, it looks too big. What do u think? – Bogz Jan 14,
2014 at 17:43

It depends. The most common desktop size websites are between 960px - 1200px across. If the
design is much wider than this then yes, it would be advisable to get the design to reduce the
width. – Paul Redmond Jan 15, 2014 at 9:40

Paul, ive checked on the psd design and the whole page width is 1200px. We followed every
dimensions as ive mentioned in my post but when we view it in smaller screen monitor, it looks
bigger. So i assume that the designer has designed the site compatible with larger screen. Am i
correct? – Bogz Jan 15, 2014 at 10:10

4 de 4 11/04/2024, 02:00