Артем Игнатов
22 года, Россия
15 сообщений
#10 месяцев назад
Здравствуйте! Верстаю макет, решил задаться вопросом попиксельной верстки, но столкнулся с проблемой, что при переносе размеров с макета на верстке какие то размеры совпадают, какие то нет. Скажем простая кнопка, имеет текст в 16pt в Photoshop, но в верстке 16pt куда больше, зато 14px прекрасно подходят. Далее эта же кнопка имеет отступы от текста в 6px (мерил прям линейкой по пикселям), на выходе же данный отступ больше в 2 раза, причем другой элемент (обычный блок цветной) также был сделан по размерам макета, и полностью совпал. Я сделал предположение, что где то размеры для верстки нужно применять в 2 раза меньше, но ошибся, так как в шапке в итоге отступы вообще имеют ни с чем не сопоставимые отступы. Сделал подгон с наложением, пришлось заменить несколько размеров чтобы все хорошо подогналось. Но осталась еще проблема - цвет. По какой то причине один и тот же цвет в Photoshop немного насыщеннее, чем в верстке (игрался с пресетами на цвет, не помогло). Со шрифтом та же песня, Roboto Bold на верстке выглядит жирнее раза в 2 чем на макете (одинаковые размеры), причем свойство font-weight стоит в normal (500). Причем так с любым шрифтом.

В чем проблема таких несовпадений и как их решить?
Стоит ли загоняться по Pixel Perfect, или можно пренебречь некоторыми моментами, и если требуется Pixel Perfect, брать ли за это большую цену?
Андрей В.
26 лет, Украина
693 сообщения
#10 месяцев назад
Очень не люблю такие заказы
Вынос мозга просто... всегда цена х2.

Верстаю попиксельно на основе preview.png дизайн макета (на фоне)...

линейкой тут нет смысла мерять...
каждый браузер будет по своему шрифт рендерить и он в каждом браузере будет по своему смотрется.

И вообще какой смысл попиксельно верстать-то, ну если это конечно не какой то "особый" дизайн!?
Конверсия от этого выше не будет и посетителей не прибавится... а вот код аля:
section {padding: 43px 0 48px}
Выглядит не так, как например
section {padding: 50px 0}

// где тут попиксельно я думаю не стоит объяснять
Василий Л.
26 лет, Россия
253 сообщения
#10 месяцев назад
Vakarchuk, соглашусь, особенно напрягают такие индивидуумы которые скажут про пиксель перфект только тогда когда, уже все сверстано, они  еще и всеръез считают что это какой неоъемлемый стандарт, в итоге заказ провален репутация минус.  редиски.
Николай Б.
28 лет, Беларусь
228 сообщений
#10 месяцев назад
Vakarchuk, просто вопрос — а код видит кто-нибудь кроме самих верстальщиков? Или видят как раз отступы и размеры кегля? Сейчас в тренде ведь минимализм, все дела, тут вообще все до пикселей должно быть выверено, т.к. это и есть основная работа в таком роде дизайна. Да, другое дело когда есть вещи, которые невозможно или сложно реализовать, тут надо приходить к компромиссу, но ведь расстояние не сложно задать, как в макете, работали ведь люди над этим. 
Василий Л.
26 лет, Россия
253 сообщения
#10 месяцев назад
Chomp,  зачем нужно точное расстояние??
Тебе же уже сказали что брузер рендерит по разному чем фотошоп??
Денис Таранов
34 года, Украина
83 сообщения
#10 месяцев назад
Чтоб был пиксель перфект нужен макет пиксель перфект, а в 90 процентов макетов гуляют блоки.  Очень спорная тема и во многом субъективная. Надо смотреть по ситуации.  Использую плагин perfectPixel в хроме
Артем Игнатов
22 года, Россия
15 сообщений
#10 месяцев назад
Vakarchuk, просто от PP есть некое чувство завершенности (перфекционизм, вся херня)
Debager, однажды были такие товарищи, которые решили, что 9 листов правок касательно неучтенных 0.5px там или -0.1px там (да, доходило и до такой миллиметровочности) можно делать бесплатно. Быстро закончили рабочий процесс)
Chomp, ну к тому и этот вопрос о странных трансформациях размеров и цветов при переносе.
Николай Б.
28 лет, Беларусь
228 сообщений
#10 месяцев назад
Debager, тебе же уже сказал почему нужно точное расстояние. 
Андрей В.
26 лет, Украина
693 сообщения
#10 месяцев назад
Цитата:
Использую плагин perfectPixel в хроме
Аналогично, но слава Богу очень редко... в 9 из 10 случ. удается отговорить человека.

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

И да -- часто макеты бывают (на глаз / на скорую руку) когда отступы скачут, мимо сетки и т.д.
Артем Л.
33 года, Россия
11006 сообщений
#10 месяцев назад
Ну ничего себе) Вот людям заняться нечем :-)
Сидоров Влад
35 лет, Россия
672 сообщения
#10 месяцев назад
ООО вечный конфликт
У нас дизайнер так уволился, ранимая душа не стерпела того, что технические реалии накладывают ряд ограничений на то, как будет выглядеть его макет за пределами уютного фотошопа в макбуке.
Типичное: "Я делаю свою работу, а вы сношайтесь как хотите." Ну и предложили верстать самому.
Денис Таранов
34 года, Украина
83 сообщения
#10 месяцев назад
inter-job, как-такового конфликта нет, если веб-дизайнер действительно веб-дизайнер и понимает, что должно получится с его макета. А не сидит себе и малюет рюшечки.  Вот как раз сейчас такого деятеля культуры верстаю сейчас: надеюсь он продолжит рисовать свои буклеты и прочую полиграфию и не будет лезть в веб разработку.
Николай Б.
28 лет, Беларусь
228 сообщений
#10 месяцев назад
inter-job, это не верный подход. Нужно приходить к компромиссу и работать в команде. Если верстальщик или программист говорит, что так не получится (хотя, на моей памяти, ограничения накладывают не технические возможности, а бюджет и сроки, по словам верстальщиков сделать можно все), то надо обсуждать и делать так, чтобы получилось, а не сделал макет, сдал и пускай там что угодно делают. Создание сайта или приложения ведь командная работа, нет? 
Денис Таранов
34 года, Украина
83 сообщения
#10 месяцев назад
Проблема в том что некоторые дизайнеры нарисуют макет и им все равно, что будет дальше. Ну вот например макет вчера верстал.  6 иконок.
Одна из них зеленая, остальные черные. Тоесть иконка в состоянии ховера. Мне несложно и на остальные слои наложить зеленый цвет чтоб получить иконку в состянии ховера, но они в макете на белом фоне. Вот есть у этого дизайнера хоть минимум совести?
Владимир Ребров
33 года, Россия
2873 сообщения
#10 месяцев назад
Цитата (tommy_inf):
По какой то причине один и тот же цвет в Photoshop немного насыщеннее, чем в верстке
Либо исходник не в sRGB, либо проблемы с цветовым профилем вашего Photoshop/монитора.
Сидоров Влад
35 лет, Россия
672 сообщения
#10 месяцев назад
Цитата:
это не верный подход. Нужно приходить к компромиссу и работать в команде. Если верстальщик или программист говорит, что так не получится
(хотя, на моей памяти, ограничения накладывают не технические
возможности, а бюджет и сроки, по словам верстальщиков сделать можно
все), то надо обсуждать и делать так, чтобы получилось, а не сделал
макет, сдал и пускай там что угодно делают. Создание сайта или
приложения ведь командная работа, нет? 
Ну тут тоже не все так просто. Большая компания - большие деньги. Дизайн согласовывается с одними людьми, отдается на интеграцию другим, претерпевает изменения по причине модификации контента третьими. Каждый хочет свести свой "список согласования" к минимуму.
Компромисс видится в том, что никогда не подходить к вопросу вебдизайна с расчетом, что он будет сверстан в pixel perfect. Вопрос где кончаются пределы допустимого.