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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Свои вопросы оставляйте в комментариях или задавайте их в нашей группе в Телеграм

Geek Electronics
  • keyboard_arrow_down“Пиксельная верстка” без заморочек
    • Автор:
    • Миниатюра: “Пиксельная верстка” без заморочек
    • Рубрика: Веб-разработка
    • Обновлено: 21.12.2016
    • Комментариев: 2
    • Просмотров: 1 463
      • searchПоисковые боты
        Дата Бот
        2018-08-20 13:54:28 Yandex
        2018-08-19 01:48:10 Bing
        2018-08-17 23:04:26 Bing
        2018-08-16 21:10:33 Bing
        2018-08-16 10:19:28 Mail.RU
        2018-08-15 10:30:47 Yandex
        2018-08-14 10:36:07 Google
        2018-08-13 22:02:59 Bing
        2018-08-13 11:13:57 Yandex
        2018-08-11 19:44:50 Google
  • Оцените пожалуйста статью
    1 Star2 Stars3 Stars4 Stars5 Stars
    Loading Загрузка...
  • Поделитесь с друзьями
GeekElectronics

Похожие записи

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

  • Avatar for source
    palexa:

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

    • Avatar for source
      source™:

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

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

arrow_upward