Pull to refresh
Comments 88
Я дизайнерам с которыми я работаю, объяснил, как нужно содержать слои, объяснил про папки header, content, sidebar, footer. Работать стало приятнее, теперь на эту тему поговорим с ними. Так что, все в ваших руках.
У меня без вмешательств посторонних сформировалась привычка делать так.
Да, это хорошая привычка. Правда, если бы еще окрашивать папки разными цветами, например, шапку, тело и подвал, то работать со слоями было бы еще удобнее. Я делаю так image
Это первый комментарий который я добавил в избранное.
Спасибо за отличный пример, буду показывать какие макеты я хочу.
Одно слово «Какашно» — уже «отлично»!

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

Дизайнеру удобно работать так, как вы называете «кашей», руководствуясь своей логикой расположения объектов. По хорошему следует разграничивать рабочий файл и «выходной», который должен отличаться от рабочего во-первых максимальным упрощением содержимого (объединением всего, что не будет сдвигаться или меняться в один слой), а во-вторых — возможно, иметь структуру, соответствующую будущей вёрстке («верх», «низ» и т.п.); а пока этого разделено не будет, дизайнер будет оставлять структуру для себя, верстальщик будет жаловаться на «кашу» и лишние элементы (слои).
Очень приятно верстать, когда сделано именно так.
Вот именно так и делаю — вплоть до заглавных букв в названиях крупных блоков и строчных у обычных слоев :)
Единственное, я как-то привык слои по английски называть… наверное, программистское прошлое.
Ну всякие скучные информационные сайты :)
Вообще, я не считаю дизайн своей самой сильной стороной и главной специализацией.
Но мои коллеги почему-то чаще заставляют меня именно рисовать, а не кодить.
видно, что у человека большой моник (или два) — места на экране не жалеет :)
У меня эта панелька скукожена до минимальных размеров
У кнопки также есть состояние нажатия, так что по факту у неё 4 состояния — idle, hover, pressed, disabled.
Тоже предпочитаю эти элементы выносить в отдельный файл, хотя, проходя чуть меньше года назад собеседование в Biggo, видела там другой подход — состояния выносились на поля макета за пределами контентной части.
Не pressed, a active (раз уж макет для верстальщиков), и по факту 5 состояний — еще focus (перемещение по tab).
Иногда еще отдельно для touch-устройств предусматривается.
Желательно не забывать про отображение сообщений об ошибках, если есть (например, при заполнении форм), подсказок, прелоадеров.

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

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

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

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

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



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

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

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

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

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

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

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

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

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

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

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

nomorebanding.com/
Не обязательно яркий, он может быть достаточно размашистый, чтобы были заметны дефекты подобного рода. В общем, поверьте, пишу не от балды, сталкивалась с такими казусами, дорабатывая внутренние страницы с чужой концепции.
я верю, знаю этот симптом, потому просто обхожусь без него
все бы так относились к своим коллегам! тема в мейле и то редкость
Это круто, такие дизайны верстать только одно удовольствие! А не искать пол дня нужный слой, кликая стрелочкой с автовыбором по элементам и не попадать на них, из-за каких-то других прозрачных слоев или теней.
так как дизайнерам не состовляет это труда, верстальщики могут научится точно так же)
Все правильно, UI должен быть отдельным файлом. Такого рода макеты приятно верстать и понимаешь, что дизайнер позаботился о том, чтобы не было никаких лишних вопросов.
Убирать подчеркивание при ховере — это ужас страшный!
Почему? Это дело вкуса, ведь главное при наведении показать реакцию ссылки на действие пользователя. Это можно сделать просто изменив цвет, но убирание/появление подчеркивания более явно показывает реакцию.
Интересно было бы провести опрос, кому приходится по вкусу такая реакция ссылки на наведение.
Ага, ощущение, как от кнопки, которая от курсора убегает.
Отличная статья и обсуждение. Может кто поделится подобными советами на английском? Отправлю заказчику, а то буквально на прошлой недели искал подобное, нашлась одна неказистая статья.
Ух, какой забавный сайт =) интересно а переводы переводов с хабры они делают?..
Хорошее вы слово «noactive» придумали ;) Тут либо inactive, либо disabled — верстальщику будет понятнее, особенно последнее.
Only those users with full accounts are able to leave comments. Log in, please.