Взял небольшой заказ на верстку сайта с последующим созданием на ее основе темы для WordPress. Макет был простой, но он был создан в Adobe Illustrator. Я получил от заказчика ТЗ, PDF файл с дизайном и PNG файл с пояснениями по разметке.
Я впервые верстал по PDF. Не буду уже говорить о не соответствии размеров при изменении в Adobe Illustrator единиц измерений с pt на пиксели. Кое-как я с этим справился и на мой взгляд все вышло очень толково.
Сделал из верстки тему для wordpress и показал заказчику…
Заказчику моя работа не понравилась, так как она не соответствовала макету. Я конечно удивился, но матом ругаться не стал. Мало ли что - вдруг действительно я где-то накосячил.
В результате нашего общения выяснилось, что проверка на соответствие проводилась по скриншетам. Суть ее заключается в следующем..
Делается скриншет готовой верстки и закидывается на отдельный слой в Adobe Photoshop. На другой слой кидают картинку макета. На слои устанавливают прозрачность и в результате мы видим все отличия.
Для себя я этот метод взял на вооружение. Он действительно очень простой и эффективный. Раньше с такими дотошностями как-то не приходилось сталкиваться.
В общем косяки в верстке действительно были. Где-то блок располагался на 1-2 пикселя левее. Где-то картинка была ниже.
Кто уже верстал тот знает, что если начинаешь ровнять одно, то уползает другое. Я все-таки внес все правки и показал работу заново. В результате были найдены еще кое какие неточности.
Вот только после этого меня посетила идея, которая позволяет сделать идеальную верстку любого макета.
Суть ее довольно проста и очень схожа с вышеописанным способом проверки верстки. Вполне вероятно, что кто-то уже давно верстает именно так.
Идея заключается в том, чтобы вырезать рабочую область из макета дизайна с необходимым разрешением, сохранить ее как картинку с некоторой прозрачностью и разместить на сайте в качестве основного фона. При таком варианте вы всегда сверстаете идеально, так как сразу будете видеть где и как должны располагаться элементы будущего сайта.
Минусом данного метода является то, что вы не будете видеть эту подложку, если у блока прописан фон, поэтому я бы порекомендовал сначала создать все блоки, а потом уже их разукрашивать.
На этом пожалуй всё.
P.S. Кстати, тот заказ я все-таки сдал.
Пиксель вправо, пиксель влево - совсем люди с ума сошли, хотелось бы глянуть на этот сайт, из любопытства, что же там такого что все пиксели должны совпадать
Да там смотреть не на что. Шапка, футер и 3 блока внутри. Показывать не буду - у заказчика было такое требование - не светить.