адаптация макета фотошопа для Интернета - PullRequest
1 голос
/ 28 июля 2011

У меня есть шаблон фотошопа, который я хочу преобразовать в веб-сайт. Я адаптировал ширину контейнера, размеры шрифта и прочее, но проблема в том, что HTML-страница не будет выглядеть так же, как шаблон фотошопа, особенно с выравниванием текста. Существуют ли некоторые правила CSS, которым веб-макет (текстовый поток) должен выглядеть идентично шаблону фотошопа?

Ответы [ 4 ]

2 голосов
/ 28 июля 2011

Вот довольно хороший список для различных вещей, которые вы можете сделать, чтобы написать с помощью CSS

http://www.w3schools.com/css/css_text.asp

http://www.w3schools.com/css/css_font.asp


ПользовательскийШрифты - это сложная вещь, но она влияет на внешний вид и поток текста.Все, что я хочу сказать об этом, - это если у вас есть время или если вам действительно нужно… использовать их, в противном случае вам подойдут стандартные шрифты.

Веб-шрифты: http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html

Белка шрифта: http://www.fontsquirrel.com/fontface/generator

Веб-шрифты Google: http://code.google.com/intl/fi-FI/apis/webfonts/


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


Если вы работаете с дизайнером, я бы сказал, что вам следует обсудить часть нестандартного шрифта и часть переноса с дизайнером (или, возможно, клиентом, если онвидел предложение макета или, если он настаивал на том, что касается потока текста.), а затем переходите к интервалам, отступам, высоте строк и тому подобному или в любом удобном для вас порядке.

Если это рабочая вещь ... котораяэто может быть не так ... idk.


Мне также нравится то, что сказал Виллоллер, но вот моя версия этого:

Это действительно так, что это не всегда написано в камне, что вы быприходится воспроизводить все на 100% точно так же, как они даны вам в образе макета.

Это происходит из-за нескольких вещей: иногда дизайнер может не думать о вещах, касающихся текста.Я имею в виду в целом.Мол, они просто помещают текст, чтобы продемонстрировать, что текст приходит сюда, не слишком задумываясь о размере или цвете, или о том, что у него есть переносы, или что у него есть тень ... или другие вещи.

Иногда дизайнер можетдаже не знаю, что есть какие-то ограничения или вещи, которые более или менее сложно внести в интернет.(Пользовательские шрифты, переносы, тень текста. И, может быть, то, что я забыл.)

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

Сделайте его интерпретацией текста и не переживайте из-за мелких деталей и больших деталейобычно может быть предметом переговоров.


Редактировать: Также я хотел бы отметить, что это не обязательно хорошая вещь, чтобы привести в бешенство текст, потому что это было в дизайне.

Читаемость является важным фактором, и иногда дизайнеры думают об этом, а иногда нет (иногда они действительно не сосредотачиваются на тексте, как я упоминал ранее.)

Есть сайты, где они используют супер-простую высоту строки и /или большой интервал между буквами, и я, как спасибо и пока.


Edit2: ранее написано около 4 утра.Пришлось немного почистить.

1 голос
/ 28 июля 2011

Различные атрибуты текста будут выглядеть по-разному в разных операционных системах и браузерах - это одна вещь, которую нужно иметь в виду. Тем не менее, вы можете получить некоторый контроль, используя «межбуквенный интервал» (http://www.htmlref.com/reference/appb/css_letter-spacing.htm) и «межстрочный интервал» (http://www.htmlref.com/reference/appb/css_word-spacing.htm). Использование «text-align: justify» (http://www.htmlref.com/reference/appb/css_text-align.htm) с большая осторожность. На самом деле, используйте все это с осторожностью - проверьте, как это выглядит в Windows с выключенным clearType, вы можете быть шокированы.

Я склонен позволить браузерам делать свое дело и не слишком контролировать текст, но это зависит от того, на какую поддержку браузера вы рассчитываете.

0 голосов
/ 09 ноября 2012

Я склонен использовать .psd файлы в качестве свободного шаблона, не совсем подходящего при переводе их в HTML и CSS.Легко зацикливаться на точных совпадениях шрифтов (и часто пары шрифтов выбираются по причине).Тем не менее, более важно, чтобы сайт хорошо отображался, был удобочитаемым и простым в использовании, чем он выглядит точно так же, как .psd, и воспроизводится точно так же в любом браузере.

Это может означать, что сайт выглядит немного иначе в Chrome, чем в Firefox или Opera (и забывают о IE6), и ни один из них не выглядит точно так же, как .psd.Пока он хорошо продуман, изящно ухудшается и обеспечивает ценность для посетителей, нюансы не так важны.

0 голосов
/ 12 октября 2011

Это действительно ручной процесс. Текст никогда не будет выглядеть идентично в дизайне браузера. Вам просто нужно взглянуть на дизайн и браузер и настроить значения, чтобы получить их как можно ближе.

...