WEB DESIGN: Переход на личности

    Здравствуй, Хабрачитатель! Я работаю веб-дизайнером, и сегодня мы продолжим развивать тему, начатую в прошлой статье. А именно, поговорим о взаимодействии двух специалистов, которые обычно работают в связке, при создании сайтов. Статья посвящена дизайнерам и их некоторым типичным ошибкам при работе с макетами.

    image

    Перед вами 8 ситуаций, в которых будут участвовать web-дизайнер — Дмитрий, работающий в программе Photoshop, и верстальщик — Владимир. Эти два парня знают свое дело, но у них постоянно возникают конфликты, а иногда у одного из них возникает странное желание ударить другого монитором по голове. Впрочем, все мы цивилизованные люди и допустить такой развязки не можем. А потому сейчас мы разберемся в некоторых причинах конфликта этих двух бесценных специалистов.



    1. Четкость


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

    Д: А что с информерами? Они вроде стали меньше.
    В: Мне пришлось обрезать их со всех сторон на 1 пиксель.
    Д:?
    В: У них не было четких границ, я удалил размытые пиксели.

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

    Все изображения кликабельны


    Кто виноват?

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

    Что делать?

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

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

    2. Псевдо 3D


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

    В: За день должен успеть.

    Прошло 3 дня…

    Д: Владимир, у тебя проблемы?
    В: В макете такое кол-во градиентов с тенями, что мне понадобились пару бессонных ночей и немного RedBull, но в конечном итоге я справился.
    Д: Ок, заказ сорвался, так что приводи себя в порядок, у нас есть новый. Эти два лишних дня оказались крайне важны для заказчика, он не захотел с нами работать дальше.
    В:
    Д: Владимир?

    Кто виноват?

    Ну вот, снова эта неловкость. Макет заказчику понравился и он даже его утвердил, но работа по верстке заняла значительно больше времени, чем ожидалось. Почему? С одной стороны неверная оценка объема работ верстальщиком, с другой — макет перегружен элементами псевдо 3D.



    Что делать?

    Тени – у них нет четких границ, она расширяют объекты, а в ряде случаев добавляют необходимость использовать прозрачность. Иногда тени могут пересекаться с соседними объектами, и это уже настоящий геморрой для верстальщика. Подумайте: действительно ли они несут на себе информационную или функциональную идею? Не уверены? Тогда убирайте их. Да, сейчас тени можно реализовать средствами CSS, но и они, скорее всего, не будут отображаться везде так, как это задумывалось дизайнером.

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

    3. Прозрачность


    Дмитрий и Владимир готовы к работе над новым проектом. Да, один заказ потерян, возможно, даже, утрачена часть репутации, но они решительны и неотступны. Репутацию можно восстановить, если постараться. Очень. Макет готов, утвержден, четкость в порядке, псевдо 3D в меру, ничего не предвещало беды:

    В: Какого цвета этот текст?
    Д: В смысле, «какого», посмотри в атрибутах.
    В: Я смотрю. В атрибутах он черный, но текст явно светлее.
    Д: Используй пипетку.
    В: Можешь сказать точно, какой номер у этого цвета?
    Д: Секунду, сейчас посмотрю…
    В: И?
    Д: Просто ткни пипеткой.
    В:

    Кто виноват?

    Бывают такие ситуации, когда ни верстальщик, ни даже сам дизайнер, не могут точно определить цвет текста в макете. Как такое вообще возможно? Легко. При подборе цвета для текста, дизайнеры иногда используют не атрибуты цвета, а прозрачность слоя. Это проще и быстрее. Есть фон, например, рыжий. На нем должен быть текст, светлый, но не белый. Дизайнер устанавливает в атрибутах текста белый цвет и далее просто играет с прозрачностью слоя, в этом случае он никогда не промахнется с тональностью. Но узнать истинное значение получившегося цвета будет невозможно. Очень плохая привычка дизайнера.



    Что делать?

    Все очень просто: не использовать прозрачности для текста никогда и ни за что. Подбирайте цвет сразу без прозрачностей, в будущем обезопасите себя от проблем.

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

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

    4. Эффекты наложения


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

    В: Ты использовал эффект наложения в этом слое?
    Д: Да, проблемы?
    В: Большие. Я не буду это верстать, пока ты не уберешь взаимодействия слоев.
    Д: Ты можешь убрать сам.
    В:

    Кто виноват?

    Никогда не используйте эффекты наложения слоев в макетах. Никогда. Эти эффекты работают только в Photoshop. Дизайнер должен усвоить это правило раз и навсегда.



    Что делать?

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

    5. Атрибуты текста


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

    В: Дмитрий, я не понимаю, к чему было так издеваться над этим текстом.
    Д: У нас почти нет графики, все держится на тексте, я использовал это максимально.
    В: Ты увеличил его высоту, уменьшил ширину, изменил межсимвольные интервалы – это что какой-то грандиозный замысел?
    Д: Тебе просто нужно научиться верстать текст.
    В:

    Кто виноват?

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



    Что делать?

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

    6. Цветовая гамма


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

    Д: Когда я отдавал тебе макет, в нем было 3 ключевых цвета, и оранжевый сейчас не соответствует тому, что был в макете.
    В: Какой код соответствовал твоему оранжевому?
    Д: Ты снова не можешь просто воспользоваться пипеткой?
    В: Могу.
    Д: Тогда в чем проблема?
    В: В твоем макете больше оранжевых, чем ты думаешь…

    Кто виноват?

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



    Что делать?

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

    7. Яркость


    У дизайнера есть много способов заставить верстальщика себя ненавидеть. Очень много. Но мы рассматриваем только некоторые. Однако, и их будет достаточно для достижения цели. Конфликт может случиться даже на ровном месте. Идеальный макет, сделанный без нареканий. Но Владимир чувствует, где-то есть подвох.

    Д: Ты шутишь?
    В: Я закончил верстку, почему я должен шутить?
    Д: Да тут не хватает доброй трети элементов из макета!
    В: Не может быть, я все делал по нему.
    Д: Ты издеваешься, открой макет и найди 10 отличий с тем, что ты мне показываешь!
    В: Я не вижу отличий…
    Д: Очень смешно.
    В:

    Кто виноват?

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

    Что делать?

    Если кто еще не догадался – проблема заключается в разных настройках яркости мониторов. Дизайнер работал над макетом на мониторе с более низкой яркостью, по сравнению с мониторам верстальщика. Дмитрий работал над сайтом, преимущественно в светлой гамме: много белого, а некоторые элементы светло-серые. На своем мониторе он их прекрасно различал, но на новом мониторе с завышенной яркостью и LED-подсветкой, этих элементов просто в упор невидно.
    Это на самом деле реальная ситуация. Решение до банальности простое: убедитесь, что у вас с коллегой мониторы имеют примерно одинаковые настройки яркости/контрастности. Откалибруйте ваши мониторы по одному калибровочному тесту, и мир сразу станет добрее.



    8. FATAL ERROR!


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



    Кто виноват?

    Уже неважно.

    Что делать?

    Бежать.

    PS. Спасибо за внимание, надеюсь, эта статья поможет вам не попасть ни в одну из выше приведенных ситуаций, а также желаю взаимопонимания дизайнерам и верстальщикам, ведь от них, в немалой степени, зависит качество нашего с вами интернет-окружения.
    Все изображения были отрисованы специально для статьи и являются кликабельными (для просмотра в исходном размере).
    Поделиться публикацией
    Комментарии 178
      +1
      Взять цвет полупрозрачного текста пипеткой довольно просто, надо только выключить сглаживание текста. Если на фоне градиент или узор, брать средний. А то и вообще использовать настоящую полупрозрачность (с деградацией до среднего), благо она уже поддерживается в большинстве браузеров.
        +1
        Согласен, не вижу проблемы взять пипеткой текст без сглаживания.
          +5
          sarcasm
          А ещё можно сделать скриншот макета и уже в нём тыкнуть пипеткой :)
          /sarcasm
            +2
            Нене, ето не оч ок. Удобней посмотреть в свойствах слоя какой-там color blending
            Но для етого ж надо хоть чуток ориентироваться в PS. Вопщем опять стык технологий.
            А еще хорошие дизайнеры делают специальный слой с квадратиками всех основных цветов. И им самим не надо запоминать и верстальщику удобней
              0
              При определённом навыке можно взять цвет пипеткой и у сглаженного текста. Всегда найдётся пиксель если не точного, то очень близкого цвета. А там уже можно догадаться, скажем, если получилось #9B9B9B, что имелся в виду цвет #999. Хотя это, конечно, уже крайность.
                +6
                Хех не за что бы не подумал что под #9B9B9B имеется в виду #999
                  0
                  У нас дизайнер часто этот цвет использовал для серого.
                0
                А что, я, сталкиваясь со всякими эффектами наложения, прозрачности и прочего, 10000 лишниями слоями, и прочими ужасами от дизайнера примерно так и делал: отключал лишние слови, мержил оставшиеся слои в один (Merge/Merge Down/Flatten Image) и спокойно пипетил и резал всё что нужно.
                  0
                  Вот тут клево реализован multiply — roll.com/brands/cuties — см. слайд с мальчиком и мандаринами. Но это исключение скорее.
                    0
                    Красота! Жаль тормозит невесть как.
              –11
              ИМХО, все описанные проблемы от того что есть промежуточная трансформация psd -> html
              Все таки дизайнеры должны уметь верстать html
              Тем более для них есть масса тулзовин (compass, emmet) максимально упрощающих етот процесс.

              Да и дизайнить документ сразу в html намного удобней.
              Возможно аналогия не очень явная но ето мне напоминает WYSIWYG и WYSIWYM подходы.
                +14
                Да-да, а дизайнеры автомобилей должны сразу инженерные чертежи делать. Хотя чего уж там, пусть сразу за станок идут, машины собирают, а то рисуют каляки-маляки…
                  +14
                  sarcasm
                  Сенсация! Секрет АвтоВаза раскрыт!
                  /sarcasm
                    –8
                    Нене, я не предлагаю дизайнерам заниматься работой верстальщиков.
                    Я предлагаю дизайнерам сменить инструмент. Вместо фотошопа — текстовый редактор. Отличие в том что примитивы дизайнер рисует в граф редакторе, а компоновка в html.
                      +1
                      Вы просто плохо себе представляете работу дизайнера. Не бывает так, что дизайнер что-то один раз отрисовал и готово. Все элементы в макете и сам макет перерисовываются и меняются несколько десятков раз, прежде чем дизайн попадает в релиз — это поиск оптимального визуального решения. И даже PS не дает требуемой скорости и простоты внесения изменений, что уж говорить про код.
                        –9
                        Дык код то как раз и дает. CSS, а особенно всякие надстройки (LESS/SCSS) дают как раз эту самую гибкость.
                        Документ верстается один раз, а затем вы просто меняете стили. В зависимости от того что пришло в голову.

                        Вернусь, пожалуй, к аналогии упомянутой в начале статьи.
                        Photoshop — это «word» в мире дизайна. А HTML + CSS это Latex.

                        З.Ы: Похоже что дизайнеры не всегда знают что они хотят сделать и любят смотреть на процесс что бы оценить «удачность» варианта.
                        В этом случае «WYSIWYG» подход удобнее.
                          +4
                          Понимаете, я в фотошопе могу выдернуть кусок откуда мне вздумается, воткнуть куда мне захочется, поменять в нем все местами, и наложения слоев все поменять. И все это, по-большей части, легким движением мышки.

                          Чтобы сделать тоже самое в верстке, ну вы понимаете, и html менять, и по css бегать искать значения.
                            –11
                            Понимаете, я в редакторе могу выдернуть кусок откуда мне вздумается, воткнуть куда мне захочется, поменять в нем все местами, и наследованием css все поменять. И все ето по большей частью несколькими нажатиями клавиш. :D

                            HTML + css это лишь другой инструмент, он ничуть не хуже фотошопа в возможностях.
                            Правильные дизайнеры что делают? Слои, свойства слоев, вот это все. Для чего? Что бы структурировать макет.
                            Правильные верстальщики делают тоже самое, блоки, элементы, модификаторы.
                            Все ради того что бы была структура у документа / макета. Да еще и что бы эта структура подчинялась правилам и некоторой логике.

                            Фактически дизайнер уже использует этот подход, только все что он придумал и реализовал хранится в немного другом формате.
                              +2
                              Да я то из тех дизайнеров, кто верстать умеет) Так что прекрасно все понимаю. Но все же, дизайнеры не структурируют файл (раскидать по слоям, да папочкам — это так, для удобства чтения). Слои вообще дизайнеру нужны исключительно с точки зрения удобства работы над макетом, а не за тем, чтобы его как-то структурировать. Ну и дизайнер, как вы правильно написали, никогда не знает, что выйдет в итоге. Дизайн рождается в процессе. А тут код однозначно проигрывает визуальному редактору.
                                0
                                Дизайнер не структурирующий файл, хотя бы перед сдачей макета, это зло, это большое злобное зло.
                                  0
                                  Обратите внимание на контекст. Речь о процессе, во время процесса не до структуризации. Структуризация — закрепляющая фаза, к ней переходят при добавлении страниц и в финальной версии.
                                    0
                                    Начало работы для меня, это создание структуры папок в psd. Потому, что часто дизайнер прерывает работу над задачей и переключается на другую. И вернувшись к прежней задаче через пару недель просто не разберет свой творческий полет и прочую красоту. А может так случится что дизайнер уйдет в отпуск и таску продолжит другой человек и что ему делать с потоком сего творчества?
                                    Так, что я в целом против такого подхода. Под сдачей макета можно в этом случае понимать и ежедневный коммит в svn.
                                +5
                                Вы забыли одну простую вещь — чтобы перетащить слой на десять пикселей вниз, нужно всего лишь один раз нажать с шифтом на стрелку вниз.
                                Чтобы сделать то же самое в коде — нужно найти этот слой в css и поменять там отступы.

                                Не говорите чепухи, в общем. Дизайн — это не только плашка и текст на ней.
                                  –2
                                  С одной стороны экрана блокнот с css, с другой — браузер. Если работаешь на блоком, то скорее все он уже найден, в противном случае ctrl+f (в фш слой тоже нужно найти, относящийся к блоку?). Переписал значение, сохранил, обновил браузер. Пару секунд.
                                    –9
                                    В случае использования scss мне будет достаточно поменять значение переменной. Да и без переменной нет проблем если имена блоков соответствуют логике. Поиск по документу занимает секунды.

                                    Это плохрй пример, если есть еще примеры я с удовольствием на них посмотрю.

                                    З.Ы: Когда дизайнер рисует в векторе он относится к документу как к набору примитивово (кривых, прямых, градиентов итд)
                                    Почему же он не хочет относится так-же к html документу?
                                      +4
                                        0
                                        Заметьте сколько раз он считал на калькуляторе. Это значит что документ не WYSIWYG а построен по строгим правилам которые просто не видны. ОНи в голове у дизайнера. А могут быть формализованы в виде микшинов scss.
                                          +3
                                          Но заметьте и то, что ему не нужно рефрешить браузер, чтобы увидеть изменения которые он внес) А так же то, как он двигает иконки по 1 пикселю, пока не находит удачное положение. И то, это записи очень простого дизайна, в одну итерацию фактически.
                                            –2
                                            Ну так а firebug или google developer tools или что там, дает тот же эффект. + LiveEdit который стал так моден в редакторах.

                                            Речь только об умении пользоваться инструментом.
                                              +1
                                              Похоже превышена максимальная вложенность комментариев, я теперь как будто сам себе отвечаю.
                                                +1
                                                Вы любите код. Я тоже люблю код (мое хобби — писать игры). Но мышкой двигать и красить, серьезно, удобнее, быстрее и эффективнее)
                                                  0
                                                  С точки зрения разработки «чистого» дизайна сайта оба подхода имеют право существовать, и оба имеют свои нюансы, плюсы и минусы.

                                                  С практической точки зрения редактирование сразу в css имеет следующие плюсы: изменение размеров окна браузера при резиновой версте. Я не уверен, что в фш вы легко сможете имитировать изменение размера окна и сразу-же визуально наблюдать, как это все будет выглядеть. Отсутствие каких-либо проблем при версте, любые недопустимые вещи просто сразу не выйдет сверстать (например полупрозрачный элемент с нестандартным режимом наложения). А также получение на выходе готового макета, минуя полностью всю работу верстальщика.
                                                    0
                                                    Это очень спорный вопрос ) Если бы можно было с уверенностью так утверждать не возникли бы системы типа Latex, тайловые wm, vim и еще много других вещей управляемых с клавиатуры.
                                                    Вопрос в том насколько конкретный инструмент подходит под конкретную задачу
                                            +1
                                              0
                                              Я программист, жена — дизайнер.

                                              Да потому, что многие дизайнеры — художники, делают прекрасные макеты и фирменные стили, но они ни разу (ни одного) не прогеры, и пинг яндекса для них — достижение и подвиг. Но как дизайнеры они великолепны. И в ФШ, и в АИ, и в прочем они рисуют! А не прогают. И научить их очень тяжко, да и не нужно. Нужно научить понимать, чего от них ждёшь, и то они поймут не всё. Нужен диалог. Долгий. И иногда не без ругани. Но результат может приятно поразить. А может и нет…
                                                0
                                                Вы исходите из ошибочного предположения что процесс творчества не может быть выражен иными инструментами кроме классических «кисти», «пера» и «фортепиано».

                                                Посмотрите хотя бы на code.google.com/p/mingus/
                                                «Креативить» можно используя любой инструмент. Освоение инструмента лишь вопрос времени и поставленной цели.
                                                html + css невероятно мощный инструмент для выражения творческих идей.
                                                Это вовсе не говорит о том что фотошоп плох в этом деле, вовсе нет, просто для создания сайтов он подходит только как инструмент создания отдельных «аккордов».
                                                Мело того, если бы дизайнеры знали на сколько проще можно сделать некоторые вещи используя верстку, они бы сами ринулись ее изучать. Вот только показать им эти преимущества никто не берется.
                                                  +1
                                                  Я исхожу совсем из другого, что у части людей может быть настолько другой способ мышления и восприятия, что пропасть и бездна — наименее яркие метафоры. Это не «дизайнер» — технарь, который в школе хорошо рисовал, а потом закончил курсы по композиции и колористике, это больше художник. И для него проблема не в освоении другого инструмента, а в том, что это будет мучительно не его. Мою жену год пытали в Строгановке на тему анимации во флеше, но она не смогла понять скриптовую анимацию. Не не захотела, а не смогла. Кардинально другой тип мышления и мировосприятия. Она видит, как мне удобно пользоваться css, но ей это чуждо. Поменять циферку она там может, но вот большее — пытка. А вовсе не нежелание.
                                                  Есть многие люди, для которых дело действительно лишь в освоении нового редактора. Это просто. Нужно только время и желание. А вот другой способ смотреть на мир — это сложнее. С такими людьми нужен диалог. Объяснение друг другу своих трудностей и желание понять его.
                                                    0
                                                    Речь все-таки идет о ВЕБ-дизайнерах, а не флористах)
                                                      0
                                                      Графический дизайнер может заниматься разными вещами — печатной продукцией, веб-продукцией, разработкой фирменного стиля целиком, разработкой дизайна этикеток и упаковок (не только графически, но и конструктивно)… Более узкая специализация — палка о двух концах. Не все, кто занимается дизайном для веба — узкие спецы. И не у всех даже вебских — технический склад ума. Такие люди могут запомнить ограничения, хоть и не без труда, но вот понять их — не всегда. Могут не понять, почему такая красивая и стильная штука — просто, а вот эта мелочишка — сложно.
                                                      И да, они тоже, бывает, хотят навалять верстальщикам и прочим за «Да я почти так сделал, ерунда же!»

                                                      P.S.> Мучает меня вопрос, напишу тут же. А почему идёт разговор только о дизайне в фотошопе, изначально растровом редакторе картинок? Почему не Иллюстратор и Индизайн?
                                                        0
                                                        Фотошоп — это устоявшееся заблуждение.
                                                        В иллюстраторе откровенно говоря неудобно, а индизайн — всё-таки для бумажной вёрстки.
                                                        Fireworks (с его автоматизированными задачами) + Photoshop, вот выбор дизайнера.

                                                        Кстати, с удовольствием бы почитал о примерах автоматизации с помощью Fireworks.
                                                          0
                                                          Да, про Fw я забыл.
                                                          0
                                                          Веб-дизайнер — это не узкая, а просто специализация. Если веб-программист, без подготовки сядет писать десктопное приложение, получится ахтунг. Хотя казалось бы, почему? И там, и там, С#.

                                                          Так что, если дизайнер выбрал это направление, должен в нем мксимально развиваться, потому что там столько тонкостей, что на всю жизнь хватит, а не гнаться за многими зайцами.
                                                            0
                                                            Согласен. И не согласен. Важны и люди, знающие все тонкости одного, и знающие базу о многом.
                                                            Тот же фирменный стиль — дизайн сайта лишь один из его элементов. И либо всё комплексно делает специалист широкого профиля, недостаточную специализацию которого нужно принять, либо команда спецов по направлениям под руководством того же «широкопрофильного». И тут уже от масштабов и специфики задачи зависит, будет ли быстрее и лучше такое решение в комплексе. Если же нужен только веб, то понятно, что спец эффективнее. Хотя взгляд из другой области и тут может быть полезен.
                                                    +5
                                                    Я программист, жена — дизайнер.

                                                    И иногда не без ругани.

                                                    Вы хоть можете «вдуть» дизайнеру:)
                                            0
                                            Меня как то за подобные мысли дико заминусовали:
                                            habrahabr.ru/post/173271/#comment_6018847

                                            Вот еще толковый комментарий по теме:
                                            habrahabr.ru/post/173271/#comment_6030909
                                              +2
                                              Ну мне кажется все потому что в первом комментарии вашу идею выдали за желание заставить всех верстальщиков фотошопить.
                                              А ведь идея то не в этом. Идея в том что бы инструмент подходил к цели.
                                              Мы не одиноки! sixrevisions.com/web_design/should-web-designers-know-html-and-css/
                                                0
                                                > верстальщиков фотошопить

                                                Я имел ввиду дизайнеров верстать.

                                                Мне просто со стороны кажется, что дизайнер, который сможет выдать сразу готовый макет будет намного эффективнее. И что бы обучить дизайнера html + css не надо много усилий, ведь это просто, да?
                                                  0
                                                  Давайте теперь рассмотрим очень важную составляющую. Время.

                                                  Допустим у нас есть не очень простой проект, примерно 12 шаблонов страниц, 2 gui-листа. Сначала проводим анализ задач проекта, выписываем структуру, навигацию, задачи в текстовый файл. Делаем наброски на бумаге, удачные решения переносим в Fireworks/Axure/Balsamiq/etc. Для утвержденных макетов разрабатываем визуальный стиль, начинаем прорисовывать объекты. После утверждения стиля переходим к отрисовке оставшихся шаблонов и g-листов. Аппрувим в последний раз макеты, вносим оставшиеся правки.

                                                  А теперь вы предлагаете к времени потраченному на разработку концепции, анализ, прототипирование, разработку визуального стиля, отрисовку иконок прибавить вёрстку этих 12 шаблонов и 2 gui-листов. Это не очень эффективно, не правда ли?

                                                  PS: я верстал когда ещё ценили xhtml 1.0 strict, но сейчас считаю это бесполезной тратой времени. PS: на фрилансим все мои макеты верстались без проблем и верстальщики выдавали нужный результат практически без правок.
                                                    0
                                                    Нет, я предлагаю убрать Fireworks/Axure/Balsamiq из процесса и делать макеты сразу в HTML
                                        0
                                        Нет, они просто должны понимать, что колеса должны быть снизу и соприкасаться с дорогой, а пассажиры должны находиться внутри.
                                          +2
                                          Дизайнер работающий с полиграцией или флексо знает все особенности, к примеру. Ну или весь тираж печатники дизайнеру вставят во все места.
                                          Яркий пример сборка черного с помощью CMYK 100%100%100%100% — вроде и черный, а вроде как ноги дизайнеру сломают на третий раз.
                                            0
                                            Не совсем корректное сравнение. Печатники могут и не заметить блок мелкого текста набранного нонпарелью или перлом (условия акции, например). А вот заказчик или ФАС с Роскомнадзором, обязательно обратят внимание. Только вот цена ошибки разная.
                                            В случае сайта — недовольство заказчика и изменение в несколько кликов мышкой, а вот в случае полиграфии — невозможность внесения правок в готовый тираж (под нож).
                                            И деньги совершенно разные, зачастую стоимость только печати тиража в несколько десятков раз больше стоимости работы дизайнера и общей прибыли за заказ.
                                            Так что полиграфист все нюансы знает лучше чем Отче наш, бо если вместо мелкого текста выходит грязная плашка, то тут уже никак не отмажешься.
                                              0
                                              Вывод. Лучше найти дизайнера, который своим профессионализмом снимет риски с производства и затраты на подготовку/выверку.
                                              «Лучше один раз пристрелить жену, чем каждую неделю стрелять нового любовника»
                                                0
                                                Вот поэтому любой макет полиграфисты утверждают по нескольку раз у клиента. Ну, если это нормальные полиграфисты.
                                                  0
                                                  … и делают пробную печать.
                                                    0
                                                    Это если клиент оплатил цветопробу, то делают. В иных случаях клиент подписывает бумагу что от цветопробы отказался.
                                            +2
                                            Судя по минусикам идею воспринимают как глупость, а ведь я не один так думаю.

                                            sixrevisions.com/web_design/should-web-designers-know-html-and-css/
                                            boxiedesigner.com/web-design/6-reasons-to-why-web-designers-should-know-html-and-css/
                                            37signals.com/svn/posts/1066-web-designers-should-do-their-own-htmlcss
                                            www.myintervals.com/blog/2010/09/16/do-web-designers-need-to-know-web-development/

                                            Ну и судя по комментариям никто так и не не понял что я не предлагаю дизайнерам брать свои PSD и перегонять их в html самим. Я предлагаю им придумывать дизайн используя современные инструменты типа compass, emmet, liveedit для создания макета СРАЗУ в html.
                                              0
                                              какое отношение приведенные статьи имеют отношение к вашей идеи избавиться от пакета CS6?
                                                0
                                                Ненадо избавляться, клипарт то надо в чем-то делать.
                                                –1
                                                Вы не совсем понимаете идеи этих людей.
                                                37 signals специализируются на создании massive content сервисов и сайтов, здесь уместно использовать минимал-стиль. А теперь давайте посмотрим как нам помогут «современные инструменты» в создании промо-сайта, в создании корпоративного сайта банка, в создании интерактивного сервиса/тонкого клиента и тд и тп.
                                                Их идея заключается в том, что для их специфики этот инструмент подходит. Собственно поэтому вас и заминусовали, поскольку каждый представляет конкретный вариант использования «современного инструмента» и не видит как он может помочь в решении его задач.
                                                  0
                                                  Все правильно вы говорите, и подход правильный. Проблема в девочке с анимешным юзерпиком, которая занимается дизайном по фрилансу. Она не хочет хочет делать хорошие и удобные сайты, используя современные технологии. Она хочет самореализоваться и духовно расти. А учить compass, emmet и другие страшные слова упаси боже. Девочка с трудом освоила 10 уроков фотошопа от Пауло Коэльо, а вы тут с метологиями пристаете. Менеджер (клиент) захотел анимированную yob'у с мокрым полом и градиентиками. Пожалуйста, нате. И снова за духовный рост.
                                                  Девочка неистребима, даже если это бородатый мужик.
                                                    0
                                                    не хотел обидеть дам, данным комментарием. «Девочка» тут образ собирательный, как «был ли мальчик» у Горького.
                                                +8
                                                Скинул паре упырей-дизайнеров.
                                                  0
                                                  и вы думаете, они прислушаются?
                                                    0
                                                    Могу уже ответить, насчет режима наложения один не прислушался и не станет — мало, говорит, ему платят чтобы еще и обтравкой заниматься, пусть верстальщик парится по этому поводу. А вот остальные отреагировали здраво, да и по большинству пунктов проблем не было.
                                                  –4
                                                  Я так понимаю, что автор топика Владимир.

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

                                                  А так это вся история из разряда «Меня обидели, но я не могу этого сказать. Робею.»
                                                    +1
                                                    Автор, судя по всему, Максим, и он как раз, дизайнер))
                                                      0
                                                      У дизайнеров был бы немного другой крик отчаяния.
                                                      Но с тем же итогом. «Учимся командной работе».
                                                        +2
                                                        Да, я не написал в начале статьи, что действительно дизайнер, а потому и большая часть косяков посвящена именно дизайнерам.
                                                        Крик отчаяния тут не при чем, это некие символические отношения, с помощью которых немного легче и нагляднее разобрать ситуацию)
                                                          0
                                                          Единственный правильный путь это формализовать отношения расставив зоны ответственности.
                                                          Простите, но все что вы описываете решается 1 раз с конкретным человеком и забывается раз и на всегда.
                                                            0
                                                            Отношения формировать конечно нужно,
                                                            Но статья о косяках, которые далеко не всегда решаются одним единственным диалогом. Статья о том, как заранее предупредить эти косяки, это ведь быстрее и проще, и нервы целее у обеих сторон )
                                                              0
                                                              Тогда к чему эта интрига с персонификацией :)
                                                              Вы же начинаете холивар. Но Тонко, конечно.

                                                              Первое ощущение от вашего поста было такое:
                                                              Владимира обижали долгое время, но он не смог высказать свою обиду в лицо и вынес конфликт на всеобщее обсуждение :)

                                                              Где-то так.
                                                                +1
                                                                С «персонификацией» лично мне было бы интереснее читать, а вообще чтобы такое мнение не складывалось, я подписался веб-дизайнером в самом начале, спасибо за наводку )
                                                      0
                                                      Дизайнер штоле?

                                                      Я вот несколько раз уже объяснял дизайнеру, что нестандартные шрифты — плохо. А ему вообще по барабану, у него как будто мания найти извратный шрифт, да еще и поизмываться на ним (запилить обводку, градиент, тень). Вот ничего с ним поделать не могу.
                                                        0
                                                        Беда. Но не зная ситуации конретной, сложно мне вам посоветовать что-либо.
                                                          –2
                                                          google web fonts забанили?
                                                            0
                                                            А там очень часто нет нужного. Я вот заметил, что многие дизайнеры почему-то очень любят паратайповские шрифты. Естественно, пиратские.
                                                            И, естественно, на гуглошрифтах их нет, а «белка» посылает в пеший эротический тур.

                                                            Причем на тех же гуглошрифтах полно похожих почти до степени неразличимости, и бесплатных. Но нет — нам нужен непременно «PT Sans», а не какой-то там нищебродский «Open Sans»
                                                              +1
                                                              Посылайте его самого искать те шрифты, которых нет в открытых источниках. А PT Sans на Google web fonts кстати есть.
                                                                +1
                                                                PT Sans я взял чисто для примера — у меня он давно уже валяется сконвертированный белкой, поэтому на гугле его не ищу.
                                                                Но проблему я обозначил :)

                                                                Дизайнера хорошо, конечно, послать за шрифтами, но часто бывает так (особенно на фрилансе), когда макеты получаешь не от дизайнера, а, скажем, от программиста, который их в свою очередь получил от конечного клиента, а уже им прислал дизайнер.
                                                                В этом случае достучаться до дизайнера бывает тяжело, а то и невозможно
                                                                  0
                                                                  В этом случае паратайповские шрифты привинчиваются посредством Adobe Typekit, а клиенту приходится сообщить, что заказанный им дизайн будет требовать оплаты арендованных шрифтов.
                                                              0
                                                              Как google web fonts поможет мне реализовать градиент и обводку у текста?
                                                                0
                                                                Там есть такая функция Gmail или Gtalk, можно написать этому дизайнеру и спросить у него.
                                                                  –2
                                                                  Не понял, что спросить?
                                                                  0
                                                                  Обводку тенью в новейших браузерах. Ваш Кэп.
                                                                    0
                                                                    А если мне нужна обводка в 5 пикселей? Уважаемый Кэп, сделайте примерчик, я на него с удовольствием посмотрю.
                                                                      0
                                                                      Примерно так — jsfiddle.net/8na4D/ ;)
                                                                      Но обычно такие вот «обводки» относятся к плакатным решениям заголовков большой величины и целесообразно их делать все-таки в виде картинок.
                                                                      • НЛО прилетело и опубликовало эту надпись здесь
                                                                          0
                                                                          OMG! В ИЕ 9 не работает.
                                                                          0
                                                                          Если сайт локализован на, допустим, 5 языков и там стопицот подобных заголовков, кнопок, баннеров и т.п., то делать картинками еще тот гемор. Я не придумываю гипотетический случай, мне с таким приходится работать к сожалению.
                                                                            0
                                                                            Вот именно поэтому я предпочитаю развитые системы управления контентом, которые могут генерить графические заголовки на лету. Так что на каждую задачу найдется нужный инструмент.
                                                                              0
                                                                              графические заголовки на лету? это же какой обьем дополнительных запросов к сайту будет? в спрайты особо такой обьем не засунешь, в base64 это будет нечто, а вот шрифты, спокойно решают эту задачу. Вебшрифты не панацея, в том виде в котором они есть сейчас, но это выгодное решение и не такое затратное как все полагают
                                                                                0
                                                                                Технологии генерации картинок лет несколько больше, чем повсеместному внедрению веб-шрифтов. Генерятся они один раз при обращении к свежесозданной странице, далее лежат спокойно в папке временной и ждут своего часа. Веб-шрифты безусловно выгоднее, когда они есть и нет таких задач как обводка в 5 пикселей и т.п.
                                                                                  0
                                                                                  так влюбом случае обращение к нагенерированным картинкам, сколько это запросов? тут люди ломают головы как бы сократить количество css/js файлов и помаксимуму паковать все в спрайты, а на многих ресурсах например graphicriver паки превьюшек склеивают в один длинный файл, вы предлагаете гонять тонны графических заголовков через http запросы
                                                                                    0
                                                                                    Я не предлагаю, я рассматриваю возможность использовать подобный вариант. Опять, повторюсь, не у всех стоит задача нарисовать заголовок с 5 пикселями обводки.
                                                                                    Тем более можно постараться думать на 2 шага вперед: на тестовой предварительной версии нагенерить картинок, а для продакшена оптимизировать их и склеить в спрайт. Тем более что есть масса решений для автоматической генерации спрайтов и можно автоматизировать и это.
                                                                                    Вы упираетесь в какую-то «проблему» надуманную и не хотите или не можете позволить своему разуму сделать несколько шагов в разные стороны, хотя мы с вами располагаем одной и той же информацией, причем вполне вероятно что вы обладаете даже большим ее количеством.
                                                                                    Просто позвольте вашей технической фантазии вести вас вперед, довертесь своим интуицц и опыту.
                                                              +2
                                                              Статья отличная, главное чтобы дизайнеры ее увидели :)
                                                                +2
                                                                Скажите, а никто еще не придумал способа «урезать» функциональность Фотошопа до состояния «web-safe», или «пригодно для верстки без танцев с бубном»?
                                                                  0
                                                                  Говорят Adobe Fireworks как раз для этого, но дизайнеры с ним работать не хотят упорно.
                                                                    0
                                                                    Великолепная программа для верстальщиков, но, к сожалению, очень часто не понимает эффекты фотошопа, в том числе и упомянутые режимы наложения :(
                                                                      +1
                                                                      Я ей никогда не пользовался, но пишут, что она поддерживает экспорт из фотошопа. И потом, от режимов наложения нужно обязательно избавляться — это абсолютное зло. А какие еще эффекты не поддерживает? Подозреваю, что без них можно и нужно обходиться.
                                                                        0
                                                                        При импорте файла PSD с масками бывают глюки, т.е. все маски надо либо растрировать в фотошопе, либо попытаться обойтись без них. Цветовую модель использовать только SRGB, в LAB ty поймет. Это навскидку.
                                                                        Но вот с нуля макеты в FW делать, по-моему, в общем-то даже и приятнее. Сказываются ее векторные корни и возможность точного указания всего и вся вследствие этого.
                                                                  –12
                                                                    +2
                                                                    Чую приближающийся холивар между представителями Владимиров и Дмитриев. Тему взаимодействия между верстальщиками и дизайнерами можно перемывать бесконечно долго, причем как ни странно правы скорее всего будут оба. Я считаю, что пока дизайнер не будет понимать на должном уровне специфики верстки, а верстальщик специфики работы в фотошопе, каши не сваришь.
                                                                      +3
                                                                      Не хватает еще одного случая (у меня такое бывало, хотя и редко):

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

                                                                      И в итоге получился такой диалог:
                                                                      В: Готово
                                                                      Д: Вот скажи мне — ты дальтоник?
                                                                      В: ?????
                                                                      Д: Да сравни цветовую схему на макете и в верстке — ни одного цвета не угадал
                                                                      В: ?????
                                                                      Д: #^@&$#$%&!!!

                                                                      И только на следующий день Владимир, с красными от недосыпа глазами, в порядке «ну а вдруг поможет?» решил посмотреть цветовой профиль макета в фотошопе.

                                                                      :)
                                                                        +1
                                                                        А всё, потому что Владимир не настроил свой основной инструмент.
                                                                          +1
                                                                          Ну, в моём комменте Владимиром был я. И у меня он настроен — установлен именно sRGB.
                                                                          Я просто ну никак не ожидал, что у веб-дизайнера будет какой-то другой профиль. Теперь научен, теперь всегда при первом открытии файла смотрю туда :)
                                                                            0
                                                                            Я запутался, но кто-то явно не настроил основной инструмент правильно.
                                                                              0
                                                                              Ну… профиль-то правильный был :)
                                                                              А вот предупреждение каждый раз, когда цветовые профили не совпадают — таки было отключено, признаю.
                                                                              Кстати, спасибо за ссылку — я и не знал, что такие предупреждения бывают. Теперь знаю :)
                                                                                0
                                                                                Ссылка козырная, потому и привёл.
                                                                          0
                                                                          Да, неловко вышло )
                                                                          действительно уместная ситуация!
                                                                            0
                                                                            Ну так можно добавить в статью :)
                                                                            0
                                                                            Вы ещё про калибровку монитора вспомните!
                                                                            0
                                                                            Мне иногда приходится сталкиваться с полиграфией, и готовить некоторые материалы для печати.

                                                                            Так вот, когда приходишь к нормальным полиграфистам — они дают бумажку с требованиями к макету (CMYK, dpi, размер, формат файла, вектор или можно и растр, черный черным или смесью и т.д.) Неужели сложно сделать такие-же требования к дизайнеру?
                                                                              0
                                                                              This (вторая часть комментария)
                                                                                0
                                                                                Понимаю.

                                                                                Могу сказать по такому поводу следующее: я работаю в совсем далекой от ИТ области. И я всегда отказываюсь от заказа, который не смогу выполнить хорошо (неподходящие условия, какие-либо проблемы, сложный клиент, недостаточно времени).
                                                                                  0
                                                                                  В случае верстальщика, а особенно верстальщика-фрилансера такое не всегда возможно.
                                                                                  Очень часто берешь заказ, видя лишь превьюшки в jpg или png. А уже когда договорился с заказчиком и приступил к работе, получаешь .psd, а там ужоснах — и слои с «Multiply» и «Overlay», и цвет текста задается через «Color overlay» и прозрачность (причем прозрачность и слоя, и наложения цвета) :)
                                                                              +1
                                                                              Могу сказать, что после того как утвердили макет лучше еще денек или пару дать дизайнеру, что бы он допилил макет и сделал его удобным для верстальщика и они перед эти все тонкости вместе обсудили.
                                                                                +1
                                                                                Перезалейте картинки, пожалуйста. Еле шуршат.
                                                                                Например на habrastorage.org/
                                                                                  0
                                                                                  Эффекты наложения


                                                                                  Если приперает что мама не горюй — флеш или www.pixastic.com/
                                                                                  PS и умничать тоже не нужно. Научится верстать необходимо немного, а второму научится без проблем бегать по слоям. И проблемы то… и нету…
                                                                                    0
                                                                                    по-моему, если у дизайнера и верстальщика реально возникают такие примеры-проблемы, то они тупо не умеют работать. я не понимаю, что это за дизайнер который не знает, например, про пункты 1, 4, 6 — это же основы-основ. тоже самое можно сказать и про верстальщика.
                                                                                      0
                                                                                      Заходим на free-lance.ru, в заказах смотрим раздел «HTML-вертска» — там таких дизайнеров каждый третий, если не второй :)
                                                                                      +2
                                                                                      Для решения проблемы нечетких писклей у вектора: snap to pixel в настройках (а некоторые дизайнеры еще и пытаются этим нечетким пикселем показать тень и за это я хочу убивать).
                                                                                      Насчет четких границ у теней, либо дизайнер указывает размер тени, либо если есть доступ к psd, можно посмотреть размер тени в эффектах слоя.
                                                                                      Но есть идеальный вариант, это комментарии дизайнера с размерами шрифтов, цветам и всей подобной информацией наложенной поверх макета и самостоятельно им нарезанные градиенты.
                                                                                        0
                                                                                        Градиенты — это уже лишнее, поскольку они уже есть в CSS и есть вот такой вот замечательный редактор: www.colorzilla.com/gradient-editor/
                                                                                        Хотя для сложных градиентов, конечно, не помешает знать, в какой точке начинается следующий переход
                                                                                          +1
                                                                                          Да, это конечно зависит от задачи. Обычно предпочитаю заранее спросить верстальщика, в каком виде ему удобнее получать макет.
                                                                                            0
                                                                                            Эх… вот бы мне всегда такие дизайнеры попадались :)
                                                                                              0
                                                                                              Я тоже не сразу пришла к такому, сначала были пробы и поиски)
                                                                                          0
                                                                                          Выделяем слой картинки с тенью. Сводим эффект с изображением. Ctrl+A -> Ctrl+N -> Ctrl+V. Фотошоп создаст новый документ как раз по размерам изображения находящегося в буфере, с учётом всяких полупрозрачных финтифлюшек.
                                                                                          +2
                                                                                          С решением, предложенным в п.7. не согласен. Не должны верстальщик с дизайнером калибровать мониторы одинаково, чтобы избежать подобных ситуаций. Ведь в итоге на все это будут смотреть абсолютно разные пользователи с абсолютно разными мониторами, и вполне может возникнуть ситуация, когда добрая часть юзеров просто не будет видеть слишком светлых элементов. Яркий тому пример — цвет подложки непрочитанных сообщений в контакте. Не знаю, меняли ли они его, или просто у меня теперь другой компьютер, но было время, когда я просто не видел этого выделения, и не знал, что оказывается можно узнать, прочитали твое сообщение или нет. Ну да, дизайнер надизайнил, верстальщик сверстал, а часть юзеров про этот функционал все равно не знали. Так что мне кажется, выход состоит в следующем: дизайнер должен проверять свои макеты на разных мониторах с разными настройками и типами матриц.
                                                                                            0
                                                                                            В данном случае речь идет о взаимодействии «дизайнер + верстальщик», и для нормального взаимодействия их мониторы должны иметь одинаковую настройку, как не крути. Какую именно — это другой вопрос, вы правы, учитывать нужно максимально широкий охват яркости. Но если дизайнер и верстальщик видит один и тот же макет по-разному, это караул.
                                                                                              0
                                                                                              И все же я считаю, что в данном примере ошибкой являются не разные настройки яркости у мониторов, а неправильно выбранный цвет. Ведь если даже дизайнер с верстальщиком настроят мониторы одинаково, и макет будет благополучно сверстан, заказчик все равно может остаться недовольным. Не будет же и он настраивать свой монитор, чтобы увидеть подложку светло-светло-серого цвета =)
                                                                                                0
                                                                                                Да верно все это, но в статье речь идет о понимании между верстальщиком и дизайнером а не между дизайнером и пользователем. Вы описываете ситуацию дизайнер/пользователь и в этом вы правы, однако, в случае дизайнер/верстальщик мониторы могут быть настроены неправильно, главное что бы одинаково неправильно, тогда наша связка хотя бы будет понимать друг друга. О пользователях в данном случае речь не идет, но ваша идея понятна )
                                                                                              0
                                                                                              1. Монитор должен быть откалиброван в любон случае. Всё-таки с графикой работаем.
                                                                                              2. Не понимаю, как невозможность разглядеть паттерн в макете, влияет на вёрстку? Верстальщик что, на глазок изображение руками лепит? Взял образец паттерна и замостил.
                                                                                              0
                                                                                              Еще одна важная вещь, я бы назвал ее номер 0 — умение говорить в рамках одних и тех же терминов.
                                                                                              Я вот к примеру, некоторое время искал полосы *НИЖЕ* текста «Если под этим текстом..», и только потом догадался, что имелось в виду *ЗА* текстом.

                                                                                              Так что даже просто слово «ПОД чем-то» может пониматься разными людьми по разному и быть потенциальным источником конфликтов.
                                                                                                0
                                                                                                У вас всего одна проблема: Дизайнер и Верстальщик патологически не могут общаться между собой
                                                                                                Большинство этих вещей вполне рабочие вопросы, которые решаются за несколько минут в процессе работы, а не когда ее уже нужно сдавать.
                                                                                                  0
                                                                                                  Иногда дизайн заказывают одним людям, а верстку на его основе — другим. Я не сторонник такого подхода, но в жизни такое встречалось.
                                                                                                  +1
                                                                                                  Все описанные проблемы от того, что дизайнер не удосужился изучить основы вёрстки. Я вообще не представляю, как можно дизайнить веб-интерфейсы и при этом не понимать хотя бы принципы того, как твой дизайн будет превращаться в вёрстку, и ещё уважать себя как профессионала после этого.
                                                                                                  Например, если дизайнер оставил в макете полупрозрачный текст, то значит, что этот текст по его задумке должен использовать цсс-прозрачность (только такой ход должен быть однозначно обоснован).А использовать прозрачность для подбора тупо цвета и отдавать в таком виде на вёрстку — как минимум непрофессионально.
                                                                                                    0
                                                                                                    Прям не могу промолчать :)

                                                                                                    Нечёткие границы — это банально проблемы с квалификацией. Если визуальщик не видит, что он не попадает в пиксель или ему это не кажется существенным, то это тупо отсутствие правильного воспитания :) Впрочем, как и макет, где нет ни одного layer set. Хотя были времена, когда все так рисовали, даже очень крутые парни :) Просто фотошоп тогда папок для слоёв не умел делать.

                                                                                                    Есть масса пожеланий здравых, но есть и весьма спорные утверждения. Я сам и рисовал и верстал, попробую посмотреть на ситуацию под другим углом. Я вот читаю статью и комментарии про то, что «дизайнер должен и то и это», но по факту работы, верстальщику приходится работать в граф. редакторе добрые 2/3 времени, в то время как дизайнер про код разве что только слышал. Так может есть смысл Вове просто немного прокачать свои технические навыки? Ведь да, можно тыкнуть пипеткой, какие проблемы? Если вы думаете, что кто-то заметит разницу в тоне, то можно взять базовый цвет текста, посмотреть на прозрачность и сделать прямоугольный блок небольшого размера с нужным цветом и прозрачностью, тыкнуть пипеткой и получить точный цвет. Отношение к теням убило просто :) Глубокие красивые тени научились реализовывать задолго до появляения box-shadow, и резиновые и какие угодно. Даже MS Windows научился рендерить более менее приличные тени под своими окнами. Призыв с ними бороться в 21 веке звучит не очень убедительно. Вон Дима 6 слоёв перевёл для придания нужной глубины и вообще старался. А кому-то лень «заморачиваться»? Даже если требуется 100% соотвествие, то нарубить блок с тенью вообще не составляет труда. Я их столько нарубил, не счесть :)

                                                                                                    Ещё хотелось бы по поводу эффектов наложения. Дизайнер ведь тоже немного програмист, поэтому стремится оптимизировать свою работу. Куда проще бросить дефолтный чёрно-белый градиент поверх цветной плашки и накрутить всякого. Получится вполне себе блок, который можно перекрасить в 2 клика мышки. При другом подходе, пришлось бы подбирать массу других цветов только для изменения базового цвета. И такие решения по своему красивы =) А вот если бы Вова просто позвал к себе Диму и на пальцах показал ему свою сложность, то велика вероятность, что дизайнер бы просто показал, как без потерь сконвертировать в нужный результат. А ещё есть вероятность, что увидев проблему своими глазами, Владимир тоже стал бы немного лучше. А у парней, судя по всему, несгибаемое самомнение, полное нежелание учиться и проблемы с коммуникацией :) Но я отвлёкся. Моя мысль в том, что если бы Вова не думал о себе всякое и просто выучил пару фокусов, то мир стал бы лучше.
                                                                                                      +1
                                                                                                      Я вот читаю статью и комментарии про то, что «дизайнер должен и то и это», но по факту работы, верстальщику приходится работать в граф. редакторе добрые 2/3 времени, в то время как дизайнер про код разве что только слышал. Так может есть смысл Вове просто немного прокачать свои технические навыки?

                                                                                                      А может и дизайнеру стоит прокачать свои навыки, нет? По моему скромному мнению, дизайнеры часто мнят себя непонятно кем. Я нарисовал макет с кастомными тенями и крутыми эффектами, а как верстать — дело ваше. Я давно не занимаюсь версткой, программирую и кошусь на верстальщиков — верстка часто не учитывает динамические варианты ее использования. Но осадочек остался.
                                                                                                        0
                                                                                                        Конечно, всем стоит постоянно учится чему-то, иначе деградация. Мне просто не понятны стенания верстальщиков по поводу сложности работы. Вёрстка сложного макета — небольшой вызов и хороший результат — повод для гордости. Работа дизайнера тоже не лишена сложностей. Попробуйте с таким раздутым эго сдать макет, пройдя 5-10-15 итераций, пока клиент не будет удовлетворён. Это тоже не просто.
                                                                                                          0
                                                                                                          Он не дизайнер, он — ВЕБ-дизайнер. А это знаете ли, налогает некие требования к выдаваемому результату. Если дизайнер воообще начнёт генерить эскизы от руки — апеллируя «я клиенту угодил, дальше твои проблемы»?
                                                                                                        0
                                                                                                        Решение проблемы с «нечеткими границами»:
                                                                                                        image
                                                                                                          0
                                                                                                          Для CS6 тоже есть, но чуть по другому:
                                                                                                            0
                                                                                                            Спасибо, Кэп!
                                                                                                          0
                                                                                                          По мне так проблемы именно у дизайнера. Сам увлекаюсь веб-дизайном и считаю, что каждый дизайнер должен знать азы верстки, как и что происходит. Так получилось, что сам я сначала познакомился именно с html/css, позже уже увлекся собственно рисованием макетов. Работал с несколькими верстальщиками/программистами и никто не ругался. Впрочем я и сам старался делать макеты простыми для верстки. Какие то отдельные задумки, которые казались мне сложными, может как то связанные с новшествами html/css я обговаривал заранее, но такое было редкостью. Чаще всего предварительные беседы относились уже к функциональности, т.е. это скрипты, админка сайта, но это уже программирование.
                                                                                                            0
                                                                                                            Дизайнеры, учитесь верстать (вы сами поймете, что и как надо рисовать)
                                                                                                            Верстальщики, учите photoshop (Сотня статей, где упоминаются одни и те же проблеммы, выучите уже наконец-то, где находятся «прозрачность»,«режимы наложения» и «настройки текста»)
                                                                                                            И вы будете читать эту статью с улыбкой на лице, как я
                                                                                                              0
                                                                                                              Улыбка быстро спадёт с лица, когда увидите в макете текст градиентом. А что, дизайнер слышал про «безболезненную реализацию градиентов в вёрстке», а верстальщик может посмотреть опорные цвета в настройках градиента. Только вот с реализацией… Кхм…
                                                                                                                0
                                                                                                                > текст градиентом

                                                                                                                В вебките можно делать так.
                                                                                                                  0
                                                                                                                  Замечательно — и к чему это? Для вебкита делаем так, а остальным все равно суём js или картинку.
                                                                                                                    0
                                                                                                                    Через пол года делаем везде так (или добавят в ИЕ и фокс, или вебкит окончательно станет «почти» единственным движком). Фишки в css растут быстрее, чем онные в фш, раньше вон помните, какие были дебаты, о том, как же все-таки верстать скругленные уголки. А хоть как-то украсить текст? А сейчас делаем text-shadow и не заморачиваемся.
                                                                                                                  0
                                                                                                                  не спадет: webew.ru/articles/279.webew
                                                                                                              • НЛО прилетело и опубликовало эту надпись здесь
                                                                                                                  –1
                                                                                                                  А еще бл… у браузера на ифоне сранм не 640 ширина а 480…
                                                                                                                    0
                                                                                                                    Чем меньше телодвижений дизайнера тем больше телодвижений верстальщика. Классика же.
                                                                                                                      –1
                                                                                                                      святые верстальщики, работавшие со мной, умудрялись каждый раз накосячить с уже порезанными картинками и описанными текстом цветами и размерами.

                                                                                                                      Отступ 20 пикселей? да нахер он тут нужен.
                                                                                                                      Что? жирный шрифт? зачем?
                                                                                                                      кастомный контрол? лишняя работа, виндовый не хуже.
                                                                                                                      скрытая папка с попапом? ничего не знаю, не видно — значит не надо.
                                                                                                                        –1
                                                                                                                        Я бы не стал на вашем месте приводить в пример плохую работу верстальщика. В прошлый раз, когда в подобной теме я сравнил подход «как надо» в реализации сервиса, с неудачным подходом программиста — меня люто заминусовали.

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

                                                                                                                          0
                                                                                                                          А Вы сами тут что забыли? Проповедуете, что хабр уже не торт для тех, кто сам еще этого не осознал?
                                                                                                                          Или Вы считаете, что обсуждение аудитории хабра в топике по дизайну способствует «интересным дискуссиям, новым знаниям...»?
                                                                                                                            –1
                                                                                                                            Я вспомнил о статье, опубликованной на хабре в 2008-ом году, в которой было комментариев 20 от силы и неимоверно много пользы, поскольку она освещала не проблемы взаимодействия между дизайнером/верстальщиком, а оптимизированный процесс совместной работы.

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

                                                                                                                            И относительно знаний и дискуссий. Тот топик действительно носит в себе знания о том, как взаимодействовать друг с другом, а в этом у нас «интересная дискуссия».
                                                                                                                              0
                                                                                                                              Разве тут в статье не написано как избежать ошибок при взаимодействии верстальщика и дизайнера?
                                                                                                                                0
                                                                                                                                Статья написана в духе: «Отрежьте Дмитрию руки».

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

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

                                                                                                                                  Ну как же, ведь в каждом случае написан параграф «Что делать?» где написано, что не надо отрезать никому руки, а надо взять и разобраться.

                                                                                                                                  Тогда остаётся вопрос, что делать, если верстальщик запорол дизайн по гайдлайнам во время вёрстки?

                                                                                                                                  Как что? Переделывать верстку конечно. Правда лично я мифического «дизайна по гайдлайнам» никогда не видел.

                                                                                                                                  Не знаю в курсе вы или нет, но вот на этом сайте, если нажать на большую кнопку «Download», можно скачать макет грида (почти для любого популярного графического редактора). Но я ни разу не встречал макета, основанного на гриде. Так же, я ни разу не встречал дизайнера, который прочитал бы этот PDF. А жаль…
                                                                                                                                    0
                                                                                                                                    В чем нужно разобраться? В непрофессионализме дизайнера? Не проще ему накидать ссылок по подготке макетов, чем каждый раз вылавливать новый косяк? Не проще ли сменить дизайнера, чем пытаться вырастить из него специалиста?

                                                                                                                                    Гайдлайны к дизайну пишутся в сопроводительном письме, в них включаются используемые шрифты, размеры, отступы, описание ховер/овер/актив элементов с цветами и эффектами.
                                                                                                                                    Неопытные верстальщики ничем не отличаются от неопытных дизайнеров и встают в позу — «я это верстать не буду».

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

                                                                                                                                    Возможно, вы не там искали дизайнеров или искали дизайнеров с стоимостью часа работы < 30$, в этом случае не вижу причин жаловаться на непрофессионализм.
                                                                                                                                      +1
                                                                                                                                      Разобраться надо в ошибках друг друга. Все мы когда-то были непрофессионалами и все мы как-то учились делать свое дело хорошо. Просто накидыванием ссылок проблему не решить, надо еще и объяснить почему так плохо, а эдак хорошо с технической точки зрения.

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

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

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

                                                                                                                                          Вы забываете, что основным фактором роста, является желание расти, по этой причине я и поинтересовался — зачем мучиться?

                                                                                                                                          Я не выбираю дизайнеров.
                                                                                                                          +1
                                                                                                                          Скрытая папка — Ваш косяк! Откуда мне знать, что в макете и по каким причинам скрыто? Может это неудачный вариант дизайна (чаще так и бывает). Прикладывайте png или jpeg для каждой страницы и какждого состояния элементов.
                                                                                                                            0
                                                                                                                            Вы правы, совершенно незачем знать.
                                                                                                                            Размер и цвет шрифта, например, тоже незачем. и отступы. и ховеры.
                                                                                                                            Вы же без проблем сверстаете полупрозрачный попап с тенью из джипега.
                                                                                                                              0
                                                                                                                              Кстати, да, приходилось и из жпегов самому рисовать…
                                                                                                                              Но суть Вы так и не поняли. Делается psd-макет для каждой «уникальной» страницы. А если в ней есть какие-то «динамичные» финтифлюшки как-то попапы, нестандартные контролы, «резина» и т.п. То их поведение надо представить приложенным жпегом. Сами слои в макете можете скрыть.
                                                                                                                              Чтобы было понятно — как выглядит страница для авторизвоанного/неавторизованного пользователя, как выглядит на разных разрешениях и т.п. Т.е. отобразить все воможные состояния элементов. Плодить для этого psd-макеты вовсе не обязательно. Впрочем дело Ваше. Только потом не кричите, что на Вас гнусные фронт-эндщики перекладывают свою работу.
                                                                                                                              0
                                                                                                                              layer comps — наш ответ
                                                                                                                              0
                                                                                                                              Знаете, вот так сходу, не взглянув на макет, сложно осуждать или оправдывать верстальщика или вас. Приведу пример по поводу отступа в 20 пикселей:

                                                                                                                              У меня частенько попадаются макеты (80% случаев) когда ни о каком вертикальном ритме дизайнер даже не подозревает. И получается так, что на разных страницах у разных элементов совершенно разные отступы. В таких случаях приходится или изобретать отступы самостоятельно или писать разные стили для одинаковых по сути блоков. При этом CSS-файл раздувается неимоверно.

                                                                                                                              По поводу жирного шрифта косяк явно верстальщика, но что-то мне с трудом верится, что он взял специально и не поставил bold. Может случайно забыл или была веская причина для этого?

                                                                                                                              С кастомными контролами тоже всё не однозначно. Вообще я противник стандартных контролов, я считаю что стилизованные контролы — это отлично. И жаль что многие со мной не согласны. Но еще есть техническая сторона: реализовать кастомный выпадающий список очень непростая задача, и, самое главное, нет готовых решений для этого. Т.е. скриптов для стилизации селектов в сети полно, но я не видел ни одного, который повторял бы полностью функционал браузера (кто-то не умеет работать с клавишей TAB, кто-то не дружит с динамическими данными, кто-то плохо отображается если форма «резиновая» и т.п.). Так что решение оставить системные контролы тоже может быть оправдано с технической стороны.
                                                                                                                              0
                                                                                                                              Боюсь если последний макет имеет елементы с слабо различимой контрасностью то и этот заказ они потеряют.
                                                                                                                              Потому-что большинстко пользователей сидят сейчас за TN-мониторами где яркось по умолчанию очень высока.
                                                                                                                                0
                                                                                                                                Дизайн (сборка макета) в InDesign в Fireworks может решить проблемы с режимами наложения слоев и проблемы с текстом (искажения) т. к. в них не предусмотрены такие средства. Дизайнеру есть повод все картинки сохранить уже отдельными файлами (тогда по идее верстальщику не надо ничего нарезать) и только прилинковать их.
                                                                                                                                0
                                                                                                                                Побывал во всех ситуациях, описанных в статье и даже больше) При появлении «сомнительного» макета предупреждаю заказчика (или дизайнера), что делать буду на своё усмотрение, вот и всё — опыт позволяет.
                                                                                                                                  –2
                                                                                                                                  Интересная статья, интересные каменты.
                                                                                                                                  Дмитрий недоволен работой Владимира, Владимир — Дмитрия, верстальщики грызутся дискутируют с дизайнерами…
                                                                                                                                  «Откалибруйте ваши мониторы по одному калибровочному тесту, и мир сразу станет добрее.»
                                                                                                                                  Я так понимаю — на этом празднике жизни пользователю делать нечего :-)
                                                                                                                                    0
                                                                                                                                    а проектировщики стоят в строне и наблюдают: )
                                                                                                                                      –2
                                                                                                                                      Ну а куда нам с таким рылом — к илите, со своими дурацкими потребностями…
                                                                                                                                      Веб же ж не проектировщиками для юзеров делается — а дизайнерами для верстальщиков.
                                                                                                                                    +1
                                                                                                                                    Недавняя ситуация с дизайнером заказчика

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

                                                                                                                                    похоже в данном случае у заказчика дизайнер работает с полиграфией… почему у нас обычно считают что у ИТишников одна профессия на всех?
                                                                                                                                      0
                                                                                                                                      Мне как-то приходилось такое приводить к адекватному виду, оно часто еще и конвертнуто в psd из векторного редактора бывает…

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

                                                                                                                                    Самое читаемое