0,0
рейтинг
24 апреля 2014 в 15:28

Дизайн → Распространённые ошибки веб-дизайнеров или как угодить верстальщику из песочницы

В этом посте речь пойдет о тех ошибках, которые допускают дизайнеры в макетах, предназначенных для вёрстки. Рассмотрим наиболее часто встречающиеся проблемы, с которыми сталкивается верстальщик при работе с psd-макетами. Если Вы дизайнер, и Вам часто приходится передавать свой дизайн в руки коллег по цеху, то, возможно, этот пост поможет Вам лучше понять, какие неприятности испытывают верстальщики, и избежать некоторых ошибок в будущем, за что коллеги будут Вам очень благодарны.

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

1. Цветовой профиль


Проблема с цветовыми профилями чаще всего возникает из-за отсутствия понимания у дизайнера, что же такое цветовой профиль и как его выбирать. Наиболее часто встречаются профили Adobe RGB (1998) и sRGB IEC61966-2.1 (далее просто sRGB), о которых можно почитать, например, здесь.

Для веба, как правило, используется профиль sRGB — он является профилем по умолчанию, например, в ОС Windows. Это значит, что мы видим изображение на экране в цветах, определенных стандартом sRGB IEC61966-2.1. Разница между Adode RGB и sRGB заключается в ширине цветового спектра.

В чем же проблема? Дизайнер, создавая в Photoshop новый проект, не указывает цветовой профиль, и, как следствие, Photoshop оставляет значение по умолчанию — Adode RGB. В свою очередь, верстальщик, получив макет, нарезает его, и в какой-то момент замечает, что цвета в макете и на свёрстанной странице отличаются на несколько тонов.




Что же произошло? Еще на стадии сохранения нарезанных изображений, верстальщик воспользовался замечательной функцией Save for Web & Devices, которая по умолчанию выполняет преобразование изображения в sRGB. В итоге мы видим одни цвета в рабочем пространстве Photoshop и совсем другие на готовом сайте.

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

Решение проблемы — всегда при начале работы убеждаться, что установлен правильный профиль.

2. Направляющие


Установка направляющих — казалось бы, простое дело. Но и тут возникают проблемы. Невнимательный верстальщик, используя установленные дизайнером направляющие, нарезает изображения и получает на выходе что-то подобное:



Почему так получилось? При близком рассмотрении видно, что направляющие сами не привязываются к границам пикселей, соответственно, когда дизайнер «на глаз» ставит направляющую, то, скорее всего, она не попадёт ровно между пикселями



Выделение, наоборот, привязывается к пикселям:



Даже если верстальщик был внимателен и заметил это, то все равно встаёт вопрос: куда всё таки дизайнер хотел поставить направляющую — левее или правее?

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

3. Группы, слои, маски


Верстальщику необходимо отдавать именно подготовленный к вёрстке макет, а не рабочий проект весом под 100 Мб.

Что значит «подготовленный к вёрстке макет»?

  1. Группы и слои проименованы: основные элементы дизайна желательно именовать в соответствии с их назначением (лучше всего латиницей)
  2. Если есть сгруппированные слои, то группировка выполнена в соответствии с логической структурой страницы:
    шапка, контент, баннер, кнопка, список и т. д., и вложенность не превышает разумных пределов, а лучше вообще избегать вложенности групп.
  3. Скрытые, но не играющие никакой роли в дизайне слои, должны быть удалены
  4. Обрезка фотографий (скругление углов и т.п.) должны производиться с сохранением исходных изображений — лучше всего делать это с помощью масок
  5. Размер холста должен соответствовать максимально возможной ширине/высоте дизайна


4. Цвета


Вернёмся к проблемам с цветами. Для элементов, имеющих по замыслу одинаковый цвет границы/заливки/шрифта, необходимо указывать, как нетрудно догадаться, одинаковый цвет в параметрах наложения, свойствах символа и т.д.

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

Совет дизайнерам: используйте палитры или каким-либо образом заготовленные наборы цветов, чтобы избежать разногласий.

5. Трансформации, фигуры


Прошли времена вёрстки скругленных уголков картинками. Каждый уважающий себя браузер умеет скруглять углы с помощью CSS-свойства border-radius, чем и пользуются верстальщики.

Но порой встречаются дизайн-макеты, в которых скругления «не совсем округлые». Что это значит? Просто дизайнер в какой-то момент изменил размер своего скругленного прямоугольника с помощью функции Transform, изменив его пропорции. В результате углы оказались вовсе не скругленными, а «овальными».

Само собой, верстальщик не станет из-за этого нарезать блок картинками. Но это говорит о ненадлежащем отношении дизайнера к работе.



Решив вопрос скгругления углов, верстальщик вновь столкнулся с проблемой:



Когда речь идет о pixel-perfect вёрстке, подобные неточности в дизайне могут доставить немало хлопот верстальщику. В данном случае левый край блока имеет нечёткую границу, а из-за этого невозможно точно определить ширину блока.

Для предотвращения нечеткости границ фигур в Photoshop 13 есть специальная опция «выровнять края».

6. Единицы измерения, символы, абзацы


Чаще всего в вебе нам приходится иметь дело с пикселями. В большинстве случаев нет причин использовать какие-либо другие единицы измерения, такие как пункты, дюймы и т. д. Желательно, чтобы дизайнер устанавливал в настройках Photoshop именно пиксели в качестве основной единицы измерения.

Как и в случае с цветами, для дизайна текстовых блоков дизайнеру следует придерживаться строго фиксированных значений размеров. Для каждого абзаца необходимо однозначно задавать кегль и интерлиньяж.

Если Вы изменили размер текста с помощью Transform, то после этого кегль или другие свойства символа могут принять дробное значение (например, 14.5 px). При подготовке макета к вёрстке обязательно нужно привести все размеры к целым значениям. В противном случае перед верстальщиком вновь встанет дилемма: 14 или 15 пикселей?

Что касается выключки строк (выравнивания), то дизайнеру следует помнить: браузеры полноценно поддерживают лишь 3 варианта: по левому краю, по правому краю или по центру. Выключка по формату в браузере зачастую сильно отличается от того, что мы видим в Photoshop.

7. Параметры наложения, стили слоя


Каждому дизайнеру следует хоть немного знать о том, какие возможности имеют современные браузеры. Эти знания могут значительно облегчить жизнь как самому дизайнеру, так и верстальщику.

Посмотрим, какие стили слоя в Photoshop имеют полную или частичную возможность реализации с помощью CSS (без использования картинок):



  • Тени и свечения (внутренние и внешние)
    text-shadow — тень для текста
    box-shadow — тень для блока
  • Обводка
    border — обводка линией
    box-shadow — возможна обводка однопиксельной тенью
    outline — строго прямоугольная обводка
  • Заливка
    background-color — заливка цветом (возможно полупрозрачным)
    background-image — заливка узором/картинкой
    background-image: linear-gradient() — линейный градиент
    background-image: radial-gradient() — радиальный градиент
  • Прозрачность
    opacity — прозрачность элемента целиком
    [color:] rgba(r,g,b,a) — прозрачность rgb-цвета, где a — степень непрозрачности от 0 до 1
    [color:] hsla(h,s,l,a) — прозрачность hsl-цвета, где a — степень непрозрачности от 0 до 1


О поддержке браузерами того или иного свойства можно узнать здесь.

Стоит помнить: браузеры не поддерживают ни один из режимов наложения, такие как Overlay, Screen и др. Это необходимо обязательно учитывать и при необходимости обходиться нормальным режимом наложения в сочетании с прозрачностью и градиентами.

Подводя итог


В данной статье были рассмотрены некоторые нюансы подготовки дизайнером psd-макета для верстальщика. Надеюсь, кто-нибудь почерпнёт из нее для себя что-либо новое или просто найдет в ней повод напомнить своим дизайнерам о несложных правилах, придерживаясь которых они прослывут педантами в хорошем смысле этого слова, а их работы будут поражать аккуратностью исполнения.
Дмитрий Рычков @corsairdnb
карма
3,0
рейтинг 0,0
Разработчик
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Спецпроект

Самое читаемое Дизайн

Комментарии (110)

  • +6
    Просто дизайнер в какой-то момент изменил размер своего скругленного прямоугольника с помощью функции Transform, изменив его пропорции. В результате углы оказались вовсе не скругленными, а «овальными».


    border-radius поддерживает «овальные углы», достаточно указать два значения через слэш.
    • +1
      Речь шла именно об ошибочном овальном скруглении. Овальное скругление используют, как правило, именно для создания овалов
      • –1
        Только дизайнеры-нубы используют Cmd+T для изменения размеров прямоугольника со скруглёнными углами.
        Их размеры редактируют контурами (A), выделяя точки скруглённых углов.
        Ваш кэп.
        • +3
          Только дизайнеры-нубы используют Cmd+T для изменения размеров прямоугольника со скруглёнными углами.

          Обладатели Photoshop CC смеются)
          • 0
            Фух. Хвала Ноллам… ;)
    • 0
      Рисовать овальные углы в дизайне изначально путь невежества.
      • 0
        Как-то слишком категорично.
  • +16
    У веб-дизайнеров две самые распространенные ошибки: Фотошоп и незнание верстки. Потому что отстаем малость от цивилизованного мира.
    • +3
      Действительно. Предположу, что многие дизайнеры делают «плохо» не из-за осознанного желания нагадить верстальщику, а именно потому, что плохо понимают как потом верстальщик будет работать, как это будет выдано браузером, что можно, а что нет и т.п.
      • +9
        Не просто «плохо понимают», а ещё и не хотят понимать. Типа: «зачем мне вникать в чужую работу».
        • 0
          Ну а разве проблема верстать со своими допущениями в дизайне?)
          • +2
            Для меня не проблема в 90% случаев. Но иногда попадается особо придирчивый дизайнер, который начинает докапываться «почему тут не так», «почему там не эдак». Ему начинаешь объяснять, что тут не так потому что непонятно, что он имел в виду, там не эдак потому что браузер так не умеет. Объясняешь ему, говоришь: «запомни на будущее, чтобы потом у нас с тобой не было разногласий». Он говорит: «запомню», и в следующий раз делает все те де самые ошибки.

            Например у меня регулярно приходят макеты шириной 1039px, 744px и т.п. Вот говоришь всем, что мол делайте 960 всегда если не оговорена отдельно иная ширина, так нет, некоторые упёрлись и лепят кто во что горазд.

            Не проблема поговорить с дизайнером раз, не проблема поговорить два раза, но когда они тебя просто не хотят слышать, то это проблема.
            • 0
              В типографиях не боятся заворачивать макеты на доработку, если они не отвечают требованиям.
              Можно попробовать эту тактику.
              • 0
                Некоторые типографии совсем офигевшие стали: даже если есть нормальный векторный макет, сделанный, скажем, в Кореле, они смело шлют лесом, ибо им надо в Иллюстраторе версии 10. Бесит неимоверно, проще другую типографию найти.
                • 0
                  Вы приносите eps или pdf. Корел или Иллюстратор адекватные печатники требовать не станут.
    • +1
      Фотошоп вам чем не угодил?
      • +7
        Да всем угодил, просто не для проектирования сайтов он. Отсюда куча проблем у верстальщиков с дизайнерами
        • 0
          Разные времена, разные нраны.
          В дизайне уходили из плоскости в объем и обратно из объема в плоскость. Где то нужен вектор, где то растр.
          Если правильно пользоваться — PS вполне подходит.
          Не подходит когда начинают разводить «грязь» кисточками, ластиками и т.д.

          • +2
            Тут, видимо, каждому свое. Думаю, правильно пользоваться Фотошопом как инструментом для веба — это неправильно пользоваться Фотошопом как инструментом обработки фото (а для этого вроде его и делали).

            Меня напрягает процесс «дизайнер рисует красоту -> передает.псд верстальщику -> верстальщик режет красоту на сайт». Подозреваю, что это лишняя трата ресурсов, денег и нервов. Исторически устаканившийся, но в нынешнее время уже не разумный подход.
            • +1
              Возможно, предложите более рациональную цепочку.
              • +2
                Я сейчас внимательно присматриваюсь к возможностям Sass+Compass. Возможностей вполне достаточно, чтоб делать как low-fi, так и high-fi прототип, но для финальных версий продукта имеет смысл всё-таки привлекать опытного верстальщика-технолога. Главный минус этого подхода в том, что он подходит для лэндингов и massive-content сайтов, но не подходит для многих других типов (промо, корпоративный, креативный и т.д.).

                Фотошоп — крайне привычный инструмент. InDesign и Fireworks(больше не поддерживается) — это какое-то извращение над дизайнером, особенно работа с цветом в InDesign (не главный аспект, конечно, но это так бесит), быстрее ручками в mixin'ах менять стили элементов, пожалуй.
                • 0
                  Насчет «делать сразу код» полностью поддерживаю, насчет инструментов, как обычно, не согласен. Индизайн, Фаерворкс и даже Иллюстратор с проектированием справляются лучше Фотошопа. Ползунками крутить цвет — не такой уж и страшный процесс. А еще есть macaw.co.
                  • 0
                    Я писал про инструмент в котором я сейчас работаю. Нет, я не делаю в нём прототипы, я делаю в нём макеты. Прототипы я делаю на бумаге, а потом сразу макетирую. Поэтому в моём случае, для некоторого типа заказов, фотошоп вполне можно заменить Sass.

                    Относительно инструментов. Сейчас у меня есть выбор — Индизайн или Sass. И мне проще выучить семантику Sass, нежели биться каждый раз о gui Индизайна, логика которого отличается от моей логики проектирования.
                • +1
                  Про Fireworks я бы поспорил, и сильно. Пока не нашёл аналогичного инструмента, в котором можно было бы нарисовать макет (причём для рисования у него возможностей чуть ли не больше, чем у фотошопа, просто они другие) и сделать его интерактивным. Фактически, прототипирование + дизайн в одном инструменте. Это удобно. А работа с master page позволяла не делать множество psd с дублирующимися элементами для разных страниц сайта.

                  Удобная была штука.
                  • 0
                    Удобная. Тока адоб забил на нее вроде как.
                    • +1
                      Да, предложив взамен какую-то мутную интеграцию фотошопа и продуктов линейки Edge. К счастью, в фотошопе постепенно появляются функции, которые были в Fireworks. Но очень медленно. Привязка к пиксельной сетке у файрворкса была лет, наверное, за семь до того, как её сделали в фотошопе.
              • 0
                Есть интересный инструмент (правда пока beta версия) Google Web Designer. Пока мало компонент и недостает некоторых инструментов. Но мне кажется вариант развития событий — делать макет сразу в html формате имеет право на жизнь.
            • 0
              Есть и обратная сторона медали. Дизайнер, который может и заверстать всё, что отдизайнил, делает классные макеты и передаёт их верстальщикам. Верстальщики забивают на гайдлайны, установленные в макетах и! внимание! на свой нрав меняют элементы и их стили. В итоге дизайнер не может дать ссылку на сайт в портфолио, ввиду того, что от его макетов там осталось 60-70%, но это даже не главная проблема. Проблема в том, что продукт испорчен людьми, которые посчитали, что их познания в дизайне стоят больше. И да, предвосхищая возможный комментарий, я сам смотрел psd-шки и могу сказать, что если б 10% вебдизайнеров так оформляли макеты, то жизнь верстальщиков перешла бы на качественно новый уровень, а проекты стали бы приносить радость.

              *Комментарий основан на реальных событиях. Проект и дизайнер пострадали.
        • 0
          Осталось расписать, что же такое проектирование сайта)
        • 0
          А что лучше по вашему мнению подходит для создания макета сайта? Вообще люди делают макеты и в кореле и в ворде, кому где удобнее, я считаю это извращением, видимо потому что умею работать только в PS и считаю его очень удобным инструментом. Сейчас CSS позволяет очень многое, верстальщику достаточно просто видеть картинку и снимать показания с макета, в другом случае многие показания могут быть переданы в виде текста.
          • 0
            Подходит все, что на выходе дает HTML и, по возможности, нормальный CSS. Webflow.com, macaw.co или просто можно вручную. Думаю, время статичных картинок уже проходит, пора делать «живой» дизайн. Да и вообще, давно пора уже дизайнерам учить html.
        • 0
          Ну, плохому танцору, знаете ли...) Да, изначально он создавался не для этого, но еще в cs6 появилась привязка к пиксельной сетке, интеграция с edge reflow… в последней версии можно даже одним кликом копировать в буфер css-код слоя, и прочие плюшки.

          Веб-дизайнер должен примерно представлять механизмы вёрстки и отображения разных элементов в браузере. В идеале — самостоятельно сверстать за свою жизнь хоть одну простую страничку (это довольно быстро вправляет мозг, в том числе, относительно каши в слоях и структуры psd). Иначе его как-то иначе следует называть, не веб-дизайнером точно.
      • +2
        А еще русским интерфейсом на скриншотах в статье. До сих пор не могу понять как люди им могут пользоваться.
    • 0
      Fireworks больше не развивается. Какие есть альтернативы? PS, кстати, потихоньку наполняется нужными для web-дизайна нововведениями. Например, недавно добавили связанные смарт-объекты. Конечно хотелось бы чтобы они стали еще более «смарт», скажем, чтобы можно было нарисовать прототип кнопки и переопределять различные свойства в отдельных экземплярах.
  • 0
    Проблемы с направляющими и нечеткими границами можно решить, используя в качестве единицы измерения пиксель, а не сантиметр или дюйм.
    • +5
      У меня стоят пиксели, но это не мешает мне установить направляющую посередине пикселя
      • 0
        Чтобы попадать в пиксели с направляющими держите нажатым Shift
      • 0
        Обладаю скиллом попадать в нужный пиксель при выставлении внезапной направляющей. Однако необходимости вставлять все направляющие таким образом нет — для этого и разрабатываются дизайн-системы со своими правилами, а направляющие выставляются отредактированным скриптом, ну или если работаешь не на своей машине — вручную через «добавить горизонтальную/вертикальную направляющую».
        • 0
          Вот бы мои коллеги дизайнеры знали и использовали всё это
          • 0
            Это, в том числе, моё конкурентное преимущество. Знаете, как раньше, до появления бутстрапов, у верстальщиков было конкурентным преимуществом наличие шаблонов, фреймворков для работы с определенным типом заказов. Здесь точно так же.
    • 0
      Я просто ставлю направляющие только при масштабе 100%. И рисую блоки тоже, чтобы избежать размытых краев.
  • +8
    Для опытного дизайнера это все довольно очевидные вещи.

    Меня вообще удивляет, что люди не готовят макеты для верстальщиков. Я никогда не группирую и не называю слои, когда работаю с макетом — просто мне так удобнее и это тема отдельной статьи — почему так.

    Но я НИКОГДА не отправляю разработчику этот мусор, пока не причешу все — не удалю пустые и скрытые слои, не сгруппирую логически все по папкам.
    И на месте разработчиков, я бы просто отправлял не приведенные в порядок макеты назад с фразой «спасибо, не надо».
    • 0
      А как быть, если 30 вариантов дизайна? Как вы разбираетесь в этой каше без группирования?
      Или вы с первого раза делаете идеально?
      • 0
        30 вариантов дизайна не обязательно хранить в одном файле.
        • 0
          Не обязательно, но удобно в плане повторного использования элементов и и экономии места на диске.
  • 0
    В Photoshop CC можно менять размер прямоугольника со скругленными углами без потери радиуса скругления. И направляющие там привязываются к пиксельной сетке.
    • 0
      Их и так тянуть можно, через direct selecting tool (a) вылелил точки и вперед.
      • 0
        В «промышленных масштабах» ctrl+t и ресайз экономит кучу времени по сравнению с цепочкой «выбрать другой инструмент > выделить точки (точно выделил все? Выглядят они не особо контрастно, надо приглядываться) > двигать точки». Плюс, в CC можно менять радиус скругления углов в любой момент
  • +2
    Просто веб-дизайнеры, которым лень потратить пару дней на изучение основ верстки — не нужны нафиг.
    • 0
      Сижу, учу. Интересно самому делать. :)

      Многое знал. Но float и position для меня тайной всегда были. Вчера ночью по float и видео смотрел, чтобы уже точно понять его.

      Вот бы в браузеры еще и стили наложения добавили.
  • –4
    Наверное, таких записей уже с десяток на Хабре. Ничего нового.

    1. Проблема верстальщика. Он не снял галочку, которая обрезает все под sRGB. Зачем дизайнеру все ограничивать древним sRGB, если уже много устройств с хорошими дисплеями. Вообще многие советуют отключать управление цветовыми профилями RGB в фотошопе и не привязывать профиль.

    2. При 100% масштабе направляющие перемещаются на 1 пиксель в Photoshop’e
    • +1
      Древним sRGB?) Это как?))))) А есть новое?)
      • 0
        sRGB создан совместно компаниями HP и Microsoft в 1996 году для унификации использования модели RGB в мониторах, принтерах и Интернет-сайтах[1].

        ru.wikipedia.org/wiki/SRGB

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

        Возможно, кто-то более просвещенный меня поправит.
        • +2
          Этот стандарт был нужен, чтобы красный на вашем мониторе, был таким же красным или очень похожим на другом любом мониторе.
          Может какие то мониторы и способны выдавать расширенный sRGB цветовой диапазон, но вы рисуете в 8 битном режиме, что значит ваш макет имеет 256 единиц красного, 256 единиц зеленого и 256 единиц синего.
          Какой профиль вы не выберете, он просто сместит спектр, а не расширит его.
          • 0
            Но зачем всем обрезать цвета в картинках? Можно оставить без профиля. Пусть ОС или браузер этим занимаются. Уже и мобилки по 100уе с IPS

            Если я ставлю sRGB, то ColorPicker у меня в фотошопе становится весь покореженный.
            • +1
              Если хотите, чтобы ваши изображения были тусклыми из за глюков при отсутствии поддержки adobe RGB на 99% устройств (браузеры, вьюверы), cохраняйте в adobe RGB.
              • 0
                У меня в рабочем пространстве в ФШ стоит профиль монитора. Политика управление цветом отключена. А при сохранении файла цветовой профиль НЕ прикрепляется к файлу.

                Так в статьях советовали делать.
            • 0
              >Если я ставлю sRGB, то ColorPicker у меня в фотошопе становится весь покореженный.
              >покореженный
              Это как?
              • 0
                На нем появляются полоски, если в управлении цветом в ФШ я ставлю sRGB
                image

                Поэтому я оставляю профиль монитора
                • 0
                  Откуда у вас вообще решетка на фотографии всего изображения? и какой монитор?
                  • 0
                    Откуда у вас вообще решетка на фотографии всего изображения?

                    Пиксельная сетка монитора. Хотя фотографировал с 1,5м

                    Dell u2311h (23", 1080p, e-ips)
                • +1
                  Зачем Вы сфотографировали монитор? Проще ведь сделать скриншот
                  • 0
                    нет. Я когда-то делал скриншот для ixbt. На скриншоте все ок, а в реальности все с полосками.
                    • 0
                      Профиль в фотошоп цветовой вставляли с диска, который шел с монитором?
                      • 0
                        Скачал с сайта производителя.

                        если ставлю профиль монитора u2311h — все ок.

                        Ставлю рабочее пространство в Ps/Ai sRGB — полосы в ColorPicker.
                        • 0
                          фотошоп плохо дружит со вставленными профилями монитора. С ними были всегда проблемы.
  • +4
    Нужно делать покрытие дизайн-макета тестами… ну и макет-ревью
  • 0
    Казалось бы сто раз уже все обсуждалось, но статья действительно актуальна. Отправил дизайнерам с работы, т.к. до сих пор встречаю в макетах «Adobe RGB» и размер шрифта в пунктах.
    • 0
      При открытии фотошоп должен вам предложить работать в профиле документа или конвертировать в тот что стоит в фотошопе в настройках.
  • +8
    Бесит когда цвет текста в макете сделан не цветом текста в фотошопе, а с помощью color overlay у слоя.
    • +2
      Это архаизм. Сейчас уже появились средства для контроля типографики в фш, а ранее, приходилось использовать color overlay в макетах с большим количеством стилей, поскольку скопировать стиль слоя и вставить его для 80 элементов много проще, чем, нежели, протыкивать каждый текстовый блок, кликать на цвет, вставлять нужный вариант (а потом приходит депеша от заказчика — измените-де стили для текста в соответствии с новой версией фирстиля, утвержденной такого-то числа).

      Впрочем, это может быть оправдано и сейчас, если макеты передаются в версии ниже CS6.
      • 0
        Лучше бы они в таком виде эти средства типографики (стили для текста и параграфов) не внедряли, они невозможно тормознутые, если таких параграфов 10+. Не сравнимо с Индизайном в этом плане.
        • 0
          +1.

          Сменишь 1 параметр и можно заниматься другими делами, пока фотошоп задумчиво обновляет абзацы.
    • +1
      Хо-хо, это еще что.

      Одна моя коллега в своем макете имела привычку некоторые куски текста в psd-макете зажирнять через Faux Bold, а не через Font Style:Bold.
      Себе-то она жизнь упростила — конечно, проще было тыкнуть на кнопочку, чем залезть в выпадающее меню Font-Style.
      А верстальщик берет потом макет, видит — font-style: regular, так и прописывает, а на сайте почему-то выглядет не так, как на макете.
      И следуют разборки.

      Но однажды она себя превзошла — поставила Faux Bold нестандартному шрифту, у которого Font-style:bold в помине не было.
      Мне было потом очень весело объяснять заказчику, что это нарисованное нечто проблематично будет воплотить.
    • 0
      А дизайнер не пишет комментарии с цветом текста (ну и всех прочих элементов/фонов) поверх самого дизайна? Это же в разы делает работу проще всем.
      Если не хочется писать руками, есть плагины которые пишут все эти комментарии.
      • 0
        Ни один из примерно 10-ти дизайнеров, с которыми я работал и работаю, никогда не писал никаких комментариев. Это как код без комментариев :) С первого взгляда всё ясно и понятно, а когда начнёшь с ним работать вылазят не очевидные вещи.
  • +4
    На мой взгляд в п.1 лучше вообще не использовать цветовой профиль, никакой. Такая возможность есть.

    В п. 3 забыли две очень важных вещи: не растеризовать шрифты и оставлять кусок фона для тайлинга.
    Вычленять из сложного фона то, из чего он был сделан — мучительное занятие.

    И еще, для шрифтов использовать Sharp антиалиасинг. Стандартный ФШ Smooth почти не повторить в браузере.

    Я бы не ставил такой безоговорочный знак равенства в п. 7 между эффектами в браузерах и в фотошопе. например, ФШ когда рисует тень для слоя, то острые углы смягчаются. Браузер использует чисто прямоугольник.

    А вообще, я уже давно не полагаюсь на благоразумие дизайнеров:
    ширина блока 178 пкс? округляем до 180.
    отступ слева 22, справа 24? значит везде 22.
    цвет обводки отличается, хотя выглядит однотонно? значит будет один цвет в CSS
    и т.д.
    • 0
      И еще, для шрифтов использовать Sharp антиалиасинг. Стандартный ФШ Smooth почти не повторить в браузере.

      Еще появились в ФШ Windows LCD и Windows. Но в целом сглаживание шрифтов до 24-28пт все равно не имеет ничего общего с браузерами.
      • 0
        это в какой версии? у меня CS4
        • 0
          CC, но может и CS6 есть.

          Но они все равно корявые. Делают шрифт еще жирнее. В мелких размерах шрифты не похожи на себя в браузерах.

          Я вот уже и верстку подучиваю, чтобы видеть шрифты реальные. Иначе работаешь, как в слепую: в фотошопе Light отлично выглядит, а в браузере он слишком тонок.
      • 0
        Никакие режимы отображения не соответствуют реалу. Только если отключить сглаживание в винде и фотошопе, тогда да.
        • 0
          С отключенным все выглядит страшно
        • 0
          отключить — плохой совет. этот архаизм остался во временах ВинХР. Лучше ставить сглаживание Sharp или Windows LCD, а идеально результата на достигнешь никогда, т. к. Файрфокс сглаживает иначе, чем Хром (вебкит).
          • 0
            Я не говорил про отключение). А лишь про момент, когда шрифты совпадают. С шрифтами все равно не попасть. Хром и лиса заметно по разному показывают кастомные шрифты.
      • 0
        Почему-то при их использовании буквы становятся сильно шире. Так что тоже не вариант.
        • 0
          Да, поэтому не использую их
    • 0
      1. Ширина блока в 178 пикселей может быть оправдана модульной сеткой.
      2. Если значения отступов отличаются, то это значит, что подразумевается ассиметричность блока, как правило, в таких блоках звернут текст, который при отступе 24 справа — выглядит отлично, а при отступе 22 — превращается в традиционный кириллический забор.
      3. Не совсем понял про цвет обводки, скорее всего здесь речь об имитации блика/тени — поздравляю, испорчена визуализация. Если же речь идёт о подчёркивании ссылок/заголовков, то это более чем оправдано — уменьшается визуальный шум, но какое вам до этого дело?

      Если все эти условия не выполнены, то вы работаете с дизайнерами-дилетантами и ваша позиция вполне оправдана.
      • +1
        странная модульная сетка, которая не дает круглых значений. а зачем она нужна тогда? а если аналогичные блоки пляшут в размерах на разных макетах, это модульная сетка или косяк дизайнера уже?

        22/24 px отступа на кнопке это странная, никому не нужная ассиметрия на мой взгляд.

        Обводка, читай border. Очень часто вижу, что не попало в пиксель и линия собирается из соседних. копировать цвет в этом случает не вижу смысла. Если дизайнер осознанно сделал линии разноцветными, то вопросов нет.

        У Яндекса как-то был доклад в духе «Хорошо дизайнит тот, кто дизайнит последним». Я пытался найти ссылку на него, но не получилось. Смысл в том, что дизайнеры ко всему вышеперечисленному очень часто забывают прорисовать состояния для элементов: hover, active, focus, disabled и т.д.
        Верстальщик может конечно бегать за каждым цветом к дизайнеру, но порой проще придумать их самим, отталкиваясь от общего стиля.

        Т.е. как дизайнер должен быть слегка верстальщиком, так и верстальщик должен быть немного дизайнером. Для успешной работы.
        • 0
          Перечитайте последнюю строчку моего комментария.

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

          Если не попало в пиксель — это косяк дизайнера, какие могут быть вопросы. Ещё раз прочитайте последнюю строчку моего комментария.

          Поведение элементов «забывают» сделать дилетанты.

          Цвет. Без обид, но систему цвета никто не «придумывает». Эта система подчиняется строгим законам и правилам. Да не все дизайнеры её знает, работают с ней вообще меньшинство, но… Это не даёт вам повод считать, что «проще придумать».

          3 месяца чтений статей про блочную модель, паттерны и фишки на alistapart, Sid Mayers css trics, ещё пара ресурсов и я начал неплохо валидно верстать небольшие сайты. Полгода углубленного изучения и постоянная верстка и вот у меня уже имеются свои шаблоны, паттерны кода, набор мини-фреймворков для проектов. Чтоб стать средним верстальщиком — мне потребовался год. Но у меня были весьма хорошие познания в области дизайна: типографика, модульные сетки, колористика, поэтому мне было несколько проще.

          Чтоб стать дизайнером (не тем дизайнером, который ваяет лэндинги и строгает магазины) требуются огромные вложения денег, времени, нужно много работать, читать, делать выводы. Я потратил на самообразование в этой сфере 9 лет и считаю, что мне нужно ещё многому научиться. А вы говорите, что верстальщик должен быть немного дизайнером и в том же комментарии спрашиваете «зачем нужны модульные сетки, которые не дают круглых значений».
          • 0
            не надо тащить вашу б-мерзкую типографику в наш уютный веб 3.0 )
          • 0
            проще придумать в моем понимании это обычно темнее на 30%; светлее на 30%; инверсия градиента. никто по цветовому кругу не бегает. для этого дизайнеры есть.
            • 0


              Простой пример приключений цветов. Задача была приглушить цвета в модном хипстерском стиле. Результат справа. Попутно можно наблюдать как изменяются блики, полутени и pure-цвет. Финальную палитру пока не могу показать, там 12 цветов на все случаи жизни.

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

  • +3
    Вы забыли как вариант «суперплюса» — «сговорчивость» дизайнера, когда ему верстальщик говорит, мол, вот это я сделаю так, как мне удобнее/как возможно/как будет быстрее грузиться, а дизайнер не цепляется тупо за «сделать точно как я сделал» (от чего и появляются все эти «14 с половиной пикселей»), а соглашается, да еще и (побольше бы таких!) выводы для себя делает и в другой раз подобных косяков не сдает в верстку.

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

    А PS или не PS для рисования использовать — дело десятое. Главное, чтобы программа не создавал лишние проблемы, а то видел макеты в .cdr, где буквально ни единой точки не растеризовалось ровно. Причем дизайнер честно хотел сделать удобно для верстки, но Corel просто не позволил ему этого, заставляя оперировать в логике типографии, где, как обычно, одна точка растра не особо волнует.
    • 0
      А умеют ли верстальщики уже работать с Иллюстратором?

      Мне кажется, что в нем намного удобнее было бы делать. Сразу в 1 документе можно расположить все страницы/экраны.
      • 0
        весь вопрос насколько там просто взять и сохранить объект/кусок объекта в растр. в ФШ это выделение->копирование->cохранение.
        • 0
          Понял.

          Там тоже слайсы есть, но растрировать не также просто.
          • 0
            слайсами, честно говоря, уже давно не пользовался. как-то нет нужды
            • 0
              В Фотошопе ЦЦ можно включить одну настройку и, если правильно называть группы, то он вам будет сам аккуратно каждый элемент сохранять в папку с нужным названием, размерами и параметрами сжатия при каждом изменении этого элемента.

              Photoshop Generator

              Я пока не юзал. Только изучаю верстку (и надеюсь, что особо верстать не буду)
              • 0
                Обязательно верстайте как можно больше. Дизайн подтяните, сразу говорю
                • 0
                  Спасибо за совет! :)

                  Не нравится она мне. В свое время намучался с IE6, когда простой сайт на PHP на диплом писал в 2006 (дизайн с прозрачностями был).

                  В верстке постоянно какие-то нелогичные сюрпризы. Например, прописывать overflow:hidden родительскому контейнеру float-элементов, чтобы он не схлопывался. Кроссбраузерность — отдельный вопрос.

                  Но понимаю, что без нее никуда. Хочу свой сайт на WP перенести и сделать интересный дизайн :)
                  • 0
                    с overflow не самое лучшее решение по очистке потока. Clearfix гораздо лучше.
                    • 0
                      Какие это все костыли. Столько запоминать надо. :)
      • 0
        А что, отличная идея! *Только вот после десятой страницы все начнёт тормозить, а после двадцатой — получим на выходе файл >2 Гб, который невероятно удобно переслать по e-mail, и который гарантированно откроется на любом железе *sarcasm.

        offtop. Определил страну комментирующего по его работам.
        • 0
          Сейчас в моде плоский дизайн.

          Если его в иллюстраторе сделать в основном на одних векторных объектах, то файл будет очень маленький.
          • 0
            Вы ошибаетесь. Flat уходит из моды.

            Вы судите, исходя из специфики своей работы, насколько я понял, вы делаете небольшие сайты за скромное вознаграждение (3-8 страниц). В случае с сервисом или корпоративным сайтом у вас будет 20-70 шаблонов (не страниц), добавим к ним брендированные фото/картинки, добавим к ним поведение форм, поведение сервисных страниц и их будет уже свыше 100. Файл будет очень большой.
  • +2
    За каждый просчёт дизайнера в макете повышайте ценовую планку и обосновывайте такую цену. Рано или поздно заказчику просто станет не выгодно заниматься своим пиксель-пёрфектом.
  • 0
    А может кто-нибудь знает плагинчик/расширение для PS, позволяющее для каждого документа задавать свою сетку? Вообще странно, почему до сих пор так не сделали.
    • 0
      Guideguide вроде бы позволяет делать сохраненные наборы сеток.
      • 0
        Он, наверное, имел ввиду Grid серого цвета самого фотошопа.
  • 0
    Проблема с єффектами наложения слоев (оверлей и т. д.) решается просто — конвертим эту группу слоев в смарт-объект и вуаля, все накладывается в режиме „нормал“. Пусть «дизайнер» ругается и адаптирует свою картинку теперь, чтобы смотрелось нормально.

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.