Когда кто-то дает вам PSD и говорит вам преобразовать его в веб-страницу

Мне дали код, чтобы сделать это. Я читал и смотрел несколько руководств о том, как это сделать, и столкнулся с множеством вещей о том, что этот «рабочий процесс» из PSD в HTML мертв.

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

  1. Учитывая, что большинство веб-сайтов являются адаптивными, и я предполагаю, что это ожидаемо от новых сайтов, следует ли буквально воспринимать ширину и высоту слоев PSD в пикселях и присваивать им фиксированную ширину/высоту? Или вам следует использовать какой-то другой подход, например, измерение относительной ширины/высоты (например, в процентах) определенного раздела?

  2. Когда уместно или рекомендуется обрезать часть PSD и включать его в виде изображения, а не рисовать его самостоятельно с помощью HTML/CSS?


html css photoshop psd
person natecraft1    schedule 12.04.2014    source источник
comment
...это как путешествие во времени в конец 1990-х...   -  person summea    schedule 12.04.2014
comment
этот вопрос актуален, или конвертировать psd в html? Я новичок в веб-разработке. Попытка унаследовать некоторую историю   -  person natecraft1    schedule 12.04.2014
comment
Преобразование PSD в HTML было еще актуально в конце 2000-х.   -  person BoltClock    schedule 12.04.2014
comment
@natecraft1 просто часть psd в html :)   -  person summea    schedule 13.04.2014

Ответы (2)


arrow_upward
2
arrow_downward

1.) Убедитесь, что сайт выглядит так, как он должен выглядеть в psd. с помощью таких инструментов, как bootstrap, легко сделать его отзывчивым. Фиксированная ширина никогда не подходит, если только вы не используете медиа-запросы для ее изменения в зависимости от размера окна. Но опять же, не изобретайте велосипед — такие инструменты, как бутстрап, существуют. воспользоваться чужим трудом.

2.) Никогда. Никогда. Наиболее важной частью создания сайта является то, что он доступен для всех людей. Важно, чтобы каждый элемент имел то, что он должен, то есть теги alt и title для людей с ограниченными возможностями. Не менее важно, если не больше, чтобы страница загружалась как можно быстрее. Стили CSS и оптимизированные изображения (например, с использованием изображения 1px bg и его повторением, чтобы убедиться, что это правильный тип изображения для ситуации и т. д.) загружаются намного быстрее, чем просто втиснуть изображения в div, чтобы оно выглядело правильно, плюс изображение не может быть отзывчивым, как разметка.

Очевидно, что они в основном основаны на мнениях, поэтому этот ответ может быть закрыт. Но реальный ответ заключается в том, чтобы сделать что-то, что отлично работает независимо от разрешения, предназначено для всех пользователей, и не лениться и не идти напролом.

person Bryan    schedule 12.04.2014
comment
Классный Брайан, спасибо за это, многому научился. Мне было любопытно повторение фонового изображения в 1px, потому что я никогда не слышал об этом. Я немного изучил это и столкнулся с этим фоновый повтор css"> stackoverflow.com/questions/14410994/. Означает ли это, что лучше иметь изображения размером с любой div, в котором они находятся, а не маленькими кусочками? Или это другой тип сценария. - person natecraft1; 12.04.2014
comment
если вы используете фоновое изображение, например градиент, имеет смысл просто повторить его. Поскольку мы говорим об адаптивном дизайне, вы не знаете, какого размера может быть div. говорить о 1px против 10px тривиально (например, ссылка), но говорить о 1kb против 300kb — это огромное изменение в пользовательском опыте, особенно если это происходит не один раз. Делайте это, когда это имеет смысл, это действительно суждение. - person Bryan; 12.04.2014

arrow_upward
1
arrow_downward

1) Мой совет - реагируйте. Замените каждый статический элемент, который вы видите в Photoshop, на процент. Как узнать процент статического элемента? Вам нужно его рассчитать. Я приведу вам пример: если ваш веб-сайт Photoshop имеет максимальную ширину 1000 пикселей, а у вас есть столбец 320 пикселей, вы должны разделить 1000/320 = 32%.

Кроме того, всегда начинайте с подхода «Сначала мобильные», что означает, что вы должны создавать веб-сайт от малого к большому, чтобы более сложные стили были видны только на больших экранах, таким образом вы не сбиваете с толку мобильных пользователей. Научитесь использовать единицы измерения EM и REM вместо пикселей (имейте в виду, что REM не поддерживаются в IE8), это даст вам возможность легко масштабировать свой веб-сайт, если в будущем вы захотите его изменить.

Очень важно: примените box-sizing: border-box ко всем элементам на странице, это облегчит вашу жизнь, потому что, если вы примените отступы или поля к элементу, он не станет больше, чем указанный вами процент.

*, *:before, *:after {
  -webkit-box-sizing: border-box; 
  -moz-box-sizing: border-box; 
  box-sizing: border-box;
}

2) Это просто. Обрезайте и используйте изображение только в том случае, если вы на 100% уверены, что его нельзя создать с помощью CSS (например, если вам нужно добавить логотип или другую растровую графику).

person Microcipcip    schedule 12.04.2014
comment
мда, использование только процентов на самом деле не очень отзывчиво, оно просто масштабируется. и полагаться на CSS, который не работает в ie 8, - плохая идея, многие люди все еще используют старые браузеры. Я использую только css, который не поддерживается во всех браузерах, чтобы что-то выглядело лучше. Если браузер не поддерживает это, они не получат этого дополнительного эффекта, но это не разобьет страницу. браузеры. - person Bryan; 12.04.2014
comment
Я согласен, вам также нужно использовать Media Queries, я просто не могу перечислить все методы в одном ответе. Кроме того, я не подразумеваю, что он должен использовать несовместимые таблицы стилей CSS, я просто говорю ему, чтобы он знал, что IE8 не поддерживает REM. Сложные вычисления границ и отступов не имеют смысла, если вы не хотите поддерживать IE ниже версии 8. - person Microcipcip; 12.04.2014
comment
это математика 3-го класса для расчета заполнения. На мой взгляд, стоит поддерживать все браузеры. Но, точка принята. - person Bryan; 12.04.2014