Подготовка макета для верстальщика



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

    Поскольку разработка сайта — это командная, многоэтапная работа, то для достижения качественного результата на этапе дизайн-верстка, необходимо проработать не только визуальную часть дизайна, но и продумать интерактивные элементы. То есть те, которые изменяют свое состояние от действий пользователя. Это сразу откинет много вопросов верстальщика типа: «а как эта кнопка будет подсвечиваться?».

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

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

    Ниже пару моих примеров:



    Данная статья доступна еще и в украинском переводе.
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама

    Комментарии 88

      +2
      Спасибо, хороший совет!
        +14
        Минусуют дизайнеры :)
          +4
          Нет, минусуют «дизайнеры»
        +22
        Эх, мне бы таких дизайнеров
          +1
          Я дизайнерам с которыми я работаю, объяснил, как нужно содержать слои, объяснил про папки header, content, sidebar, footer. Работать стало приятнее, теперь на эту тему поговорим с ними. Так что, все в ваших руках.
            +3
            У меня без вмешательств посторонних сформировалась привычка делать так.
              +34
              Да, это хорошая привычка. Правда, если бы еще окрашивать папки разными цветами, например, шапку, тело и подвал, то работать со слоями было бы еще удобнее. Я делаю так image
                +7
                Это первый комментарий который я добавил в избранное.
                Спасибо за отличный пример, буду показывать какие макеты я хочу.
                  +1
                  картинка на дропбоксе, если что
                  +3
                  Одно слово «Какашно» — уже «отлично»!

                  Спасибо, улыбнулся с утра!
                    0
                    Это прям мечта верстальщика.
                    Почти все дизайнеры любят присылать кашу, часто бывает включен Multiply, вообще прекрасно.
                    А потом спрашивают, хули так долго верстаешь?
                      0
                      Думаю, что фокус вот в чём.

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

                            +1
                            видно, что у человека большой моник (или два) — места на экране не жалеет :)
                            У меня эта панелька скукожена до минимальных размеров
                              0
                              Да, так оно и есть. 22" монитор.
                          +7
                          Прям БЭМ в Photoshop, молодец!
                            0
                            image
                            я так
                        +3
                        Да, ещё хорошо бы следовать правилам с сайта «ILOVEPSD»
                          +1
                          Красная стрелка — кривая.
                          0
                          У кнопки также есть состояние нажатия, так что по факту у неё 4 состояния — idle, hover, pressed, disabled.
                          Тоже предпочитаю эти элементы выносить в отдельный файл, хотя, проходя чуть меньше года назад собеседование в Biggo, видела там другой подход — состояния выносились на поля макета за пределами контентной части.
                            0
                            Не pressed, a active (раз уж макет для верстальщиков), и по факту 5 состояний — еще focus (перемещение по tab).
                            Иногда еще отдельно для touch-устройств предусматривается.
                            Желательно не забывать про отображение сообщений об ошибках, если есть (например, при заполнении форм), подсказок, прелоадеров.

                            Вот отдельный файл или все в одном — без разницы.
                            +3
                            Всегда выношу интерактивные элементы в один файл. Моя философия проста — прояви заботу к верстальщику, и когда-нибудь он проявит заботу к тебе :)
                              0
                              Иногда просто нужно радовать верстальщика приятными мелочами.

                              +2
                              Еще никогда не помешает файлик со всеми стилями текста, нумерованными и маркерованными списками, заголовками и т.д.
                                +2
                                Отличный пример того, как надо работать в команде. Уважать труд своих коллег необходимо, будь ты крутым дизайнером или верстальщиком от бога.
                                  +1
                                  Побольше бы дизайнеров, которые просто проявляют озабоченность тем, как все это будет дальше верстаться. Отношение в духе: «главное чтобы заказчик одобрил то, что видит на экране» — к большому сожалению, не редкость.
                                  Однажды был случай — так и не удалось от нанятого дизайнера добиться, чтобы полупрозрачные элементы, лежащие поверх фона страницы, были в обязательном порядке с наложением Normal, а не Overlay/Lighten и т.п., он настаивал на том, что заказчику так больше нравится.
                                    0
                                    Overlay/Lighten и иже с ними не так уж страшны. Все верстаются)
                                    Зачастую сложно добиться нужно эффекта (будем считать критично важного) со стилем Normal.
                                      0
                                      Ну, «сделать можно всё», конечно. Но какой ценой?
                                      Там пришлось склеивать оформление блоков с графическим фоном, что намертво пригвоздило блоки к своим местам на странице, а при внесении каждого изменения (вроде выделения места под рекламный блок с перемещением остальных) — заново все резать. Гибкость можно было бы обеспечить, но это требовало бы дополнительного программирования работы с графикой (автоматическая нарезка).
                                      Самое смешное, что почти через год, когда заказчику надоело, что малейшие изменения вносятся долго, он согласился на обычные PNG с альфа-каналом.
                                        +1
                                        Я вот это про способ media.chikuyonok.ru/canvas-blending/

                                        Демо тут можно посмотреть: media.chikuyonok.ru/canvas-blending/
                                          0
                                          Ох, учитывая, что заказчик хотел (вполне обоснованно, опираясь на статистику предыдущей версии сайта) поддержки IE7, ни в какую не соглашаясь на деградацию интерфейса, использование таких вещей было просто несбыточной мечтой разработчиков.
                                        0
                                        с остальной частью комментария полностью согласен, сам долго Juniora переучивал
                                      +1
                                      Если верстальщик сверстает макет хорошо, не стыдно его потом показывать в портфолио. Так что дизайнер сам заинтересован в этом. А то иногда приходится доверстывать за верстальщиками.

                                      Еще большая проблема — веб-шрифты. Многие верстальщики совершенно не понимают, как правильно сконвертировать шрифт в веб-формат так, чтобы он хорошо выглядел, совершенно не шарят в хинтинге и оптимизации веб-шрифта, а там много нюансов. В итоге в psd-файле шрифт со сглаживанием Sharp (наиболее приближенным к сглаживанию в популярных браузерах) смотрится отлично, а сверстанный — ужасно. Хочется, чтобы этому все-таки больше внимания уделялось.
                                        0
                                        Напишите статью. Серьезно.

                                        ЗЫ: Может, у меня какие-то специфические настройки Винды, но к чему там приближен Sharp не понимаю совершенно.
                                          0
                                          Тоже с удовольствием почитал бы про правильную конвертацию и оптимизацию web шрифтов, может где то уже писали? Киньте полезных ссылок.
                                            –1
                                            fontsquirrel.com/fontface/generator
                                            всё еще нуждаетесь в статье?
                                          +8
                                          Я работаю в полиграфии, но мне видится более логичным иной вариант хранения таких элементов.
                                          Начиная, как минимум с CS3 версии, Ps поддерживает смарт-объекты, а смарт-объекты, в свою очередь поддерживают, как видимые, так и невидимые слои, и как видимые, так и невидимые группы.

                                          Рисуем кнопку —> Все элементы кнопки группируем —> Из группы создаем смарт-объект —> Двойным кликом по иконке в слоях открываем смарт-объект в новом окне —> Дорисовываем нужные нам элементы —> Логически группируем, подписываем группы, ставим режимы видимости для групп —> Ctr+S —> Ctr+W



                                          Наверху один подписанный элемент в макете, а внизу открытый в новом окне смарт-объект со своими слоями.
                                            0
                                            Хороший способ.
                                            Но страница allelements гораздо нагляднее
                                              0
                                              Я тоже похожий способ показывал тут.
                                                +1
                                                Не видел этот комментарий, но действительно принцип схож.
                                                Я смарт-объектами пользуюсь когда верстаю банеры 3х6 метра, из люстры ctr+c вектор в шоп ctr+v с параметром смарт-объект, тогда и для редактирования этот объект в люстре открывается, и при масштабировании качества не теряет, и большим количеством слоев в шопе не висит.
                                                  0
                                                  Значит способ работает, если появляются схожие идеи :)

                                                  За подсказку с банером спасибо, возможно пригодится.
                                                0
                                                .psb?
                                                +1
                                                Спору нет, что нагляднее.

                                                Не очень хорошо представляю, честно говоря, как шаблоны потом режутся, но мне кажется, кнопку в отдельном файле резать проще, ибо один раз все направляюющие для резки проставил, а дальше все вариации будь их хоть 50 режутся только изменением видимости групп.
                                                  0
                                                  Ну сейчас большинство кнопок просто стилями верстаются, даже и направляющих не надо.
                                                    0
                                                    Спасибо. Буду знать.
                                                  +5
                                                  Я регулярно бываю в обоих ролях — и дизайнера, и верстальщика. От себя добавлю ещё несколько мелочей:

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

                                                  2. По возможности для эффектов используйте режим наложения Normal, а не Multiplay, Overlay и т.п.
                                                  Как минимум для теней (конечно, за исключением тех, где слои точно будут слиты). Браузер накладывает картинки в режиме Normal, что иногда вынуждает муторно вручую подбирать другой цвет.

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

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

                                                    Так что как инженеру, который проектирует детали, стоит быть в курсе процесса их вытачивания на станках, так и дизайнеру кое-что представлять стоит.
                                                      0
                                                      А никто не верстает макеты в illustrator-е? Ведь это намного удобней?
                                                        +1
                                                        Нет. Нет!
                                                          +2
                                                          Пробовал. Не пошлО. Преимуществ не ощутил.

                                                          Некоторые советуют Fireworks — тоже пробовал. И тоже как-то не пошло. Хотя в его случае должен признать, что некоторые частные плюсы там действительно есть. Но в целом всё как-то топорнее и менее удобно.
                                                          Оговорюсь, FW пробовал относительно давно, возможно в новых версиях уже всё поменялось и стало круто.
                                                            0
                                                            Я нет… просто уже привычка работать в фотошопе. Да и какая разница, ведь главное, чтобы результат хороший за приемлемое время. Но вот пример того, как можна работать в люстре habrahabr.ru/company/turbomilk/blog/144770/
                                                              0
                                                              там же моя строгая критика)
                                                              0
                                                              Мне очень удобно верстать именно в иллюстраторе, во первых группировать и слайсить объекты намного удобней нежели при работе со слоями, коих в большом проекте набирается под сотню. Проблем с пикселизацией никогда не возникало. В иллюстраторе гораздо удобней работать как в конструкторе, вынося за артбоард ненужные элементы и перетаскивая оттуда нужные. Вообще удобств очень много, но самое главное, конечно, то что скейлить все можно как угодно и абсолютно без потерь
                                                              раз
                                                              два
                                                                0
                                                                Все так цепляются за этот мистический плюс «можно скейлить», хотя я уверен сами пользуются им в лучшем случае раз в год.
                                                                  0
                                                                  Скейлить абсолютно без потерь? А как же pixel perfect?
                                                                +3
                                                                Пара копеек от меня, как от верстальщика, который часто ненавидит дизайнеров.
                                                                1) Вклеивайте элементы в макет, а не создавайте новый слой в самом макете и не рисуйте в нем. Это значит вот что: когда мне нужно выделить нужный элемент, я пытаюсь до него добраться правой кнопкой — это быстро и интуитивно. Но часто бывает так, что слоев куча, и они пересекаются, из-за этого в списке я вижу кучу слоев, которые в действительности просто «торчат», а графики в нем именно в этом пикселе — только альфа канал.
                                                                2) Не регулируйте цвет элемента прозрачностью слоя. У верстальщика нет времени сидеть и растрировать, подгонять что-то, чтобы выдрать нормальные цвета. Если используете сложные бекграунды, в виде градиента и текстуры на нем — разбивайте все по разным слоям, так как в эпоху ксс3 очень хочется подставить градиент, и на него сверху другим блоком положить текстуру.
                                                                3) Кладите рядом с макетом шрифты, и всегда уточняйте, будут ли в макете шрифты отличные от Arial, Tahoma, etc.
                                                                4) Сглаживайте шрифты. Мода на несглаженые шрифты в макетах была лет 5 назад, сейчас ситуация с браузерами поменялась, по этому сглаживайте шрифты.
                                                                5) Рисуя какую-то текстуру или паттерн всегда думайте, удастся ли ее заспрайтить и бесшовно наложить. Лучший вариант — кладете рядом с макетом вырезанные текстуры, чтобы верстальщик не тратил время, а сразу мог взять картинку в работу.
                                                                6) Думайте и понимайте то, что браузер — это не фотошоп, и если ваш макет без pixel perfect верстки будет ужасно выглядеть, то грош цена вашему макету. Хороший макет — это и тот макет, который будет выглядеть хорошо, если юзер жестко поменяет размер шрифта итд. Хотя это и к верстальщикам относится.
                                                                7) Думайте, всегда думайте, я не шучу.
                                                                  +1
                                                                  Про текстуру еще можно советовать заливать текстурой слой через Blending Options, так будет сразу видно (если текстура не растянута на весь фон)
                                                                  0
                                                                  Почти все так и делают, другое дело, что часто я встречаю следующее оливье: градиент, текстура, а на всем этом через Blending Options еще и «шум», для красоты. Подобные штуки я считаю делают только те дизайнеры, которые вообще не представляют, что такое верстка.
                                                                    0
                                                                    Нойз не для красоты, а для сбивания такого реально уродского момента в градиентах как «ступеньки».
                                                                    Я лично это применяю, но применяю там, где нет других текстур.
                                                                    Никто мне на это никогда не жаловался, все всё прекрасно верстали.
                                                                      0
                                                                      Ну как я написал:
                                                                      градиент, текстура, а на всем этом через Blending Options еще и «шум»
                                                                        0
                                                                        Всё вместе, конечно, перебор. Хотя тоже может зависеть от итоговой картинки, возможно, будет осмысленней версать не модно, а олдскулом, но сохранить именно это отображение.
                                                                          0
                                                                          Верстать нужно по разному. Но в свете того, что у дисплеев разрешение становится круче, чем в полиграфии, то количество растровой графики нужно уменьшать.
                                                                        0
                                                                        есть галочка
                                                                        если пугает резкий градиент.
                                                                          0
                                                                            0
                                                                            галочка есть в верхнем меню при использовании инструменита градиент.
                                                                            В стилях слоя, удивительно, аналогичная галочка появилась только в cs6

                                                                              0
                                                                              Вот в том и дело, что я градиентную заливку использую только в работе с растровыми масками, для нанесения на объекты она не сильно удобна лично для меня. Тут, конечно, у каждого свои инструменты для своих алгоритмов работы. А на CS6 надо переползать, тут вы правы.)
                                                                                0
                                                                                не понятно то что у вас такой яркий градиент поверх слоя что он так явно должен выделяется?

                                                                                вот еще народ тоже паридся вот что сделал

                                                                                nomorebanding.com/
                                                                                  0
                                                                                  Не обязательно яркий, он может быть достаточно размашистый, чтобы были заметны дефекты подобного рода. В общем, поверьте, пишу не от балды, сталкивалась с такими казусами, дорабатывая внутренние страницы с чужой концепции.
                                                                                    0
                                                                                    я верю, знаю этот симптом, потому просто обхожусь без него
                                                                      +1
                                                                      все бы так относились к своим коллегам! тема в мейле и то редкость
                                                                        0
                                                                        Это круто, такие дизайны верстать только одно удовольствие! А не искать пол дня нужный слой, кликая стрелочкой с автовыбором по элементам и не попадать на них, из-за каких-то других прозрачных слоев или теней.
                                                                          0
                                                                          так как дизайнерам не состовляет это труда, верстальщики могут научится точно так же)
                                                                          0
                                                                          Все правильно, UI должен быть отдельным файлом. Такого рода макеты приятно верстать и понимаешь, что дизайнер позаботился о том, чтобы не было никаких лишних вопросов.
                                                                            0
                                                                            Убирать подчеркивание при ховере — это ужас страшный!
                                                                              0
                                                                              Почему? Это дело вкуса, ведь главное при наведении показать реакцию ссылки на действие пользователя. Это можно сделать просто изменив цвет, но убирание/появление подчеркивания более явно показывает реакцию.
                                                                                0
                                                                                Интересно было бы провести опрос, кому приходится по вкусу такая реакция ссылки на наведение.
                                                                                0
                                                                                Ага, ощущение, как от кнопки, которая от курсора убегает.
                                                                                  0
                                                                                  Или как будто земля под тобой проваливается)
                                                                                0
                                                                                Отличная статья и обсуждение. Может кто поделится подобными советами на английском? Отправлю заказчику, а то буквально на прошлой недели искал подобное, нашлась одна неказистая статья.
                                                                                0
                                                                                Хорошее вы слово «noactive» придумали ;) Тут либо inactive, либо disabled — верстальщику будет понятнее, особенно последнее.

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

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