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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Присоединяйтесь к нашей группе в Telegram @GeekElectronics
  • keyboard_arrow_down“Пиксельная верстка” без заморочек
    • Автор:
    • Миниатюра: “Пиксельная верстка” без заморочек
    • Рубрика: Веб-разработка
    • Обновлено: 21.12.2016
    • Комментариев: 2
    • Просмотров: 1 775
  • Оцените пожалуйста статью
    1 Star2 Stars3 Stars4 Stars5 Stars
    Загрузка...
  • Поделитесь с друзьями
Geek Electronics

Комментариев: 2

  • Avatar for source
    palexa:

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

    • Avatar for source
      source™:

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

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

arrow_upward