GeekElectronics

Блог о программировании, электронике и рыбалке

“Пиксельная верстка” без заморочек

Главная » HTML и CSS » “Пиксельная верстка” без заморочек

шаблон макет верстка HTML и CSS  primery na html i css  Взял небольшой заказ на верстку сайта с последующим созданием на ее основе темы для WordPress. Макет был простой, но он был создан в Adobe Illustrator. Я получил от заказчика ТЗ, PDF файл с дизайном и PNG файл с пояснениями по разметке.

Я впервые верстал по PDF. Не буду уже говорить о не соответствии размеров при изменении в Adobe Illustrator единиц измерений с pt на пиксели. Кое-как я с этим справился и на мой взгляд все вышло очень толково.

Сделал из верстки тему для wordpress и показал заказчику…

Заказчику моя работа не понравилась, так как она не соответствовала макету. Я конечно удивился, но матом ругаться не стал. Мало ли что - вдруг действительно я где-то накосячил.

В результате нашего общения выяснилось, что проверка на соответствие проводилась по скриншетам. Суть ее заключается в следующем..

Делается скриншет готовой верстки и закидывается на отдельный слой в Adobe Photoshop. На другой слой кидают картинку макета. На слои устанавливают прозрачность и в результате мы видим все отличия.

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

В общем косяки в верстке действительно были. Где-то блок располагался на 1-2 пикселя левее. Где-то картинка была ниже.

Кто уже верстал тот знает, что если начинаешь ровнять одно, то уползает другое. Я все-таки внес все правки и показал работу заново. В результате были найдены еще кое какие неточности.

Вот только после этого меня посетила идея, которая позволяет сделать идеальную верстку любого макета.

Суть ее довольно проста и очень схожа с вышеописанным способом проверки верстки. Вполне вероятно, что кто-то уже давно верстает именно так.

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

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

На этом пожалуй всё.

P.S. Кстати, тот заказ я все-таки сдал.

logo

2
  • palexa:

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

    • source™:

      Да там смотреть не на что. Шапка, футер и 3 блока внутри. Показывать не буду - у заказчика было такое требование - не светить.

Добавить комментарий

Яндекс.Метрика