2014-01-14 6 views
1

У меня есть дизайнер, который проектировал мой сайт с помощью Photoshop (.psd).Размер элемента PSD для HTML

Теперь я тот, кто преобразует это в html/css. В дизайне есть значки (изображения), размер которых равен 70x55 (измеряется в линейке фотошопов)

Вопрос в том, когда я кодирую эти изображения в html/css, должен ли я использовать следующий код?

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

Это как конвертирование psd в html работает? следуя размерам, расстоянию, расстоянию на основании фактического psd, разработанного дизайнером?

Im полный noob на этом, поэтому любая помощь будет оценена по достоинству.

-update -

Кстати, когда я кодирования это в HTML/CSS, я использую высокое разрешение экрана настольного монитора (не стандартный экран монитора ноутбука), я следовал всю размерность разработанный в psd из изображений в контейнеры divs & диалоговые окна (дизайнер разработал диалоговые окна).

Теперь после того, как я закончил кодирование, последовали за дизайном (после чего я увидел на psd), он выглядит нормально, когда я просматриваю его в браузере с текущим большим экраном, который я использую. Представление, которое я вижу, выглядит так же, как и в PSD, и множеством пространств и не слишком компактным для просмотра. Так что здесь все выглядит хорошо.

Теперь, когда я смотрю его на ноутбуке моего друга со стандартным экраном монитора, страница выглядит очень компактной, изображения (из psd, которые я следил за размерами и закодировали в html/css), выглядят большими, а некоторые из элементов i закодированный не помещался на экране браузера. Я уверен, причина в том, что я использую меньший экран.

Теперь я задаюсь вопросом, я следил за тем, что дизайнер разработал в psd. Я следил за расстояниями, размерами изображений и т. Д. ... Кого здесь неправильно? Дизайнер, потому что он разработал элементы в psd, который слишком велик для меньшего экрана монитора? или я, кто ничего не знает или может что-то пропустить?

Любое руководство будет большая помощь

+1

для значков google: «css спрайты» – caramba

+0

после вашего обновления - экран с высоким разрешением не имеет ничего общего с размером изображения. один из способов проверить, получили ли вы правильные размеры из файла psd, следующий: в фотошопе убедитесь, что размер установлен на 100% (нижний левый угол из открытого файла) в браузере, убедитесь, что страница установлена ​​для просмотра, масштабирования, normal (на mac press CMD + 0). теперь вы можете сделать экран печати из браузера и вставить его в свой psd как верхний слой.теперь вы можете установить прозрачность этого верхнего слоя, нажав цифры 60 (делает прозрачность 60%), теперь переместите слой в нужное место и посмотрите позади него, если все размеры правильные – caramba

+0

привет caramba, просто сделал ваше предложение и изображение размеры в браузере и psd равны. будет ли это означать, что дизайнер разработал сайт в psd, совместимом только с большим экраном монитора? – Bogz

ответ

1

вырезать изображения с помощью инструмента ломтик в Photoshop и сохранить для веб-сайтов для оптимизации изображения.

Атрибуты ширины и высоты на изображении не нужны, хотя они экономят браузер за небольшое количество времени, просматривая изображения, чтобы выработать размеры. Используйте CSS для управления размером изображения; но, очевидно, вам следует избегать растяжения изображения, большего, чем его собственный размер, или он станет пиксельным.

По умолчанию изображение будет отображаться в браузере с его собственным размером.

+0

Я обновил свое сообщение. посмотрите пожалуйста. любое руководство будет большой помощью – Bogz

+0

Чтобы быть честным, слишком много переменных выше, чтобы дать простой ответ. Я думаю, вам нужно сделать некоторое чтение в разрешениях экрана, PPI и т. Д. В качестве отправной точки прочитайте эту статью о CSS-трюках: http://css-tricks.com/high-dpi-monitors-resolution-independance-the- web-and-you/ –

+0

Пол, спасибо за быстрый ответ. Теперь я понимаю об этой зависимости на экране монитора. Во всяком случае, просто для разъяснения, основываясь на том, что вы понимаете из моего обновленного сообщения, моим мнением будет дизайнер, который разработал сайт в psd, который совместим только с большим экраном монитора, поэтому, когда я просматриваю его на меньшем экране , он выглядит слишком большим. Что ты думаешь? – Bogz