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

Спасибо, хороший совет!

Эх, мне бы таких дизайнеров

Да, ещё хорошо бы следовать правилам с сайта «ILOVEPSD»

У кнопки также есть состояние нажатия, так что по факту у неё 4 состояния — idle, hover, pressed, disabled.
Тоже предпочитаю эти элементы выносить в отдельный файл, хотя, проходя чуть меньше года назад собеседование в Biggo, видела там другой подход — состояния выносились на поля макета за пределами контентной части.

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

Еще никогда не помешает файлик со всеми стилями текста, нумерованными и маркерованными списками, заголовками и т.д.

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

Побольше бы дизайнеров, которые просто проявляют озабоченность тем, как все это будет дальше верстаться. Отношение в духе: «главное чтобы заказчик одобрил то, что видит на экране» — к большому сожалению, не редкость.
Однажды был случай — так и не удалось от нанятого дизайнера добиться, чтобы полупрозрачные элементы, лежащие поверх фона страницы, были в обязательном порядке с наложением Normal, а не Overlay/Lighten и т.п., он настаивал на том, что заказчику так больше нравится.

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

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

Я работаю в полиграфии, но мне видится более логичным иной вариант хранения таких элементов.
Начиная, как минимум с CS3 версии, Ps поддерживает смарт-объекты, а смарт-объекты, в свою очередь поддерживают, как видимые, так и невидимые слои, и как видимые, так и невидимые группы.

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



Наверху один подписанный элемент в макете, а внизу открытый в новом окне смарт-объект со своими слоями.

Спору нет, что нагляднее.

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

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

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

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

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

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

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

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

А никто не верстает макеты в illustrator-е? Ведь это намного удобней?

Пара копеек от меня, как от верстальщика, который часто ненавидит дизайнеров.
1) Вклеивайте элементы в макет, а не создавайте новый слой в самом макете и не рисуйте в нем. Это значит вот что: когда мне нужно выделить нужный элемент, я пытаюсь до него добраться правой кнопкой — это быстро и интуитивно. Но часто бывает так, что слоев куча, и они пересекаются, из-за этого в списке я вижу кучу слоев, которые в действительности просто «торчат», а графики в нем именно в этом пикселе — только альфа канал.
2) Не регулируйте цвет элемента прозрачностью слоя. У верстальщика нет времени сидеть и растрировать, подгонять что-то, чтобы выдрать нормальные цвета. Если используете сложные бекграунды, в виде градиента и текстуры на нем — разбивайте все по разным слоям, так как в эпоху ксс3 очень хочется подставить градиент, и на него сверху другим блоком положить текстуру.
3) Кладите рядом с макетом шрифты, и всегда уточняйте, будут ли в макете шрифты отличные от Arial, Tahoma, etc.
4) Сглаживайте шрифты. Мода на несглаженые шрифты в макетах была лет 5 назад, сейчас ситуация с браузерами поменялась, по этому сглаживайте шрифты.
5) Рисуя какую-то текстуру или паттерн всегда думайте, удастся ли ее заспрайтить и бесшовно наложить. Лучший вариант — кладете рядом с макетом вырезанные текстуры, чтобы верстальщик не тратил время, а сразу мог взять картинку в работу.
6) Думайте и понимайте то, что браузер — это не фотошоп, и если ваш макет без pixel perfect верстки будет ужасно выглядеть, то грош цена вашему макету. Хороший макет — это и тот макет, который будет выглядеть хорошо, если юзер жестко поменяет размер шрифта итд. Хотя это и к верстальщикам относится.
7) Думайте, всегда думайте, я не шучу.

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

все бы так относились к своим коллегам! тема в мейле и то редкость

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

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

Убирать подчеркивание при ховере — это ужас страшный!

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

Хорошее вы слово «noactive» придумали ;) Тут либо inactive, либо disabled — верстальщику будет понятнее, особенно последнее.