Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 110
Просто дизайнер в какой-то момент изменил размер своего скругленного прямоугольника с помощью функции Transform, изменив его пропорции. В результате углы оказались вовсе не скругленными, а «овальными».
border-radius поддерживает «овальные углы», достаточно указать два значения через слэш.
Речь шла именно об ошибочном овальном скруглении. Овальное скругление используют, как правило, именно для создания овалов
У веб-дизайнеров две самые распространенные ошибки: Фотошоп и незнание верстки. Потому что отстаем малость от цивилизованного мира.
Действительно. Предположу, что многие дизайнеры делают «плохо» не из-за осознанного желания нагадить верстальщику, а именно потому, что плохо понимают как потом верстальщик будет работать, как это будет выдано браузером, что можно, а что нет и т.п.
Не просто «плохо понимают», а ещё и не хотят понимать. Типа: «зачем мне вникать в чужую работу».
Ну а разве проблема верстать со своими допущениями в дизайне?)
Для меня не проблема в 90% случаев. Но иногда попадается особо придирчивый дизайнер, который начинает докапываться «почему тут не так», «почему там не эдак». Ему начинаешь объяснять, что тут не так потому что непонятно, что он имел в виду, там не эдак потому что браузер так не умеет. Объясняешь ему, говоришь: «запомни на будущее, чтобы потом у нас с тобой не было разногласий». Он говорит: «запомню», и в следующий раз делает все те де самые ошибки.
Например у меня регулярно приходят макеты шириной 1039px, 744px и т.п. Вот говоришь всем, что мол делайте 960 всегда если не оговорена отдельно иная ширина, так нет, некоторые упёрлись и лепят кто во что горазд.
Не проблема поговорить с дизайнером раз, не проблема поговорить два раза, но когда они тебя просто не хотят слышать, то это проблема.
Например у меня регулярно приходят макеты шириной 1039px, 744px и т.п. Вот говоришь всем, что мол делайте 960 всегда если не оговорена отдельно иная ширина, так нет, некоторые упёрлись и лепят кто во что горазд.
Не проблема поговорить с дизайнером раз, не проблема поговорить два раза, но когда они тебя просто не хотят слышать, то это проблема.
В типографиях не боятся заворачивать макеты на доработку, если они не отвечают требованиям.
Можно попробовать эту тактику.
Можно попробовать эту тактику.
Фотошоп вам чем не угодил?
Да всем угодил, просто не для проектирования сайтов он. Отсюда куча проблем у верстальщиков с дизайнерами
Разные времена, разные нраны.
В дизайне уходили из плоскости в объем и обратно из объема в плоскость. Где то нужен вектор, где то растр.
Если правильно пользоваться — PS вполне подходит.
Не подходит когда начинают разводить «грязь» кисточками, ластиками и т.д.
В дизайне уходили из плоскости в объем и обратно из объема в плоскость. Где то нужен вектор, где то растр.
Если правильно пользоваться — PS вполне подходит.
Не подходит когда начинают разводить «грязь» кисточками, ластиками и т.д.
Тут, видимо, каждому свое. Думаю, правильно пользоваться Фотошопом как инструментом для веба — это неправильно пользоваться Фотошопом как инструментом обработки фото (а для этого вроде его и делали).
Меня напрягает процесс «дизайнер рисует красоту -> передает.псд верстальщику -> верстальщик режет красоту на сайт». Подозреваю, что это лишняя трата ресурсов, денег и нервов. Исторически устаканившийся, но в нынешнее время уже не разумный подход.
Меня напрягает процесс «дизайнер рисует красоту -> передает.псд верстальщику -> верстальщик режет красоту на сайт». Подозреваю, что это лишняя трата ресурсов, денег и нервов. Исторически устаканившийся, но в нынешнее время уже не разумный подход.
Возможно, предложите более рациональную цепочку.
Я сейчас внимательно присматриваюсь к возможностям Sass+Compass. Возможностей вполне достаточно, чтоб делать как low-fi, так и high-fi прототип, но для финальных версий продукта имеет смысл всё-таки привлекать опытного верстальщика-технолога. Главный минус этого подхода в том, что он подходит для лэндингов и massive-content сайтов, но не подходит для многих других типов (промо, корпоративный, креативный и т.д.).
Фотошоп — крайне привычный инструмент. InDesign и Fireworks(больше не поддерживается) — это какое-то извращение над дизайнером, особенно работа с цветом в InDesign (не главный аспект, конечно, но это так бесит), быстрее ручками в mixin'ах менять стили элементов, пожалуй.
Фотошоп — крайне привычный инструмент. InDesign и Fireworks(больше не поддерживается) — это какое-то извращение над дизайнером, особенно работа с цветом в InDesign (не главный аспект, конечно, но это так бесит), быстрее ручками в mixin'ах менять стили элементов, пожалуй.
Насчет «делать сразу код» полностью поддерживаю, насчет инструментов, как обычно, не согласен. Индизайн, Фаерворкс и даже Иллюстратор с проектированием справляются лучше Фотошопа. Ползунками крутить цвет — не такой уж и страшный процесс. А еще есть macaw.co.
Я писал про инструмент в котором я сейчас работаю. Нет, я не делаю в нём прототипы, я делаю в нём макеты. Прототипы я делаю на бумаге, а потом сразу макетирую. Поэтому в моём случае, для некоторого типа заказов, фотошоп вполне можно заменить Sass.
Относительно инструментов. Сейчас у меня есть выбор — Индизайн или Sass. И мне проще выучить семантику Sass, нежели биться каждый раз о gui Индизайна, логика которого отличается от моей логики проектирования.
Относительно инструментов. Сейчас у меня есть выбор — Индизайн или Sass. И мне проще выучить семантику Sass, нежели биться каждый раз о gui Индизайна, логика которого отличается от моей логики проектирования.
Про Fireworks я бы поспорил, и сильно. Пока не нашёл аналогичного инструмента, в котором можно было бы нарисовать макет (причём для рисования у него возможностей чуть ли не больше, чем у фотошопа, просто они другие) и сделать его интерактивным. Фактически, прототипирование + дизайн в одном инструменте. Это удобно. А работа с master page позволяла не делать множество psd с дублирующимися элементами для разных страниц сайта.
Удобная была штука.
Удобная была штука.
Есть интересный инструмент (правда пока beta версия) Google Web Designer. Пока мало компонент и недостает некоторых инструментов. Но мне кажется вариант развития событий — делать макет сразу в html формате имеет право на жизнь.
Есть и обратная сторона медали. Дизайнер, который может и заверстать всё, что отдизайнил, делает классные макеты и передаёт их верстальщикам. Верстальщики забивают на гайдлайны, установленные в макетах и! внимание! на свой нрав меняют элементы и их стили. В итоге дизайнер не может дать ссылку на сайт в портфолио, ввиду того, что от его макетов там осталось 60-70%, но это даже не главная проблема. Проблема в том, что продукт испорчен людьми, которые посчитали, что их познания в дизайне стоят больше. И да, предвосхищая возможный комментарий, я сам смотрел psd-шки и могу сказать, что если б 10% вебдизайнеров так оформляли макеты, то жизнь верстальщиков перешла бы на качественно новый уровень, а проекты стали бы приносить радость.
*Комментарий основан на реальных событиях. Проект и дизайнер пострадали.
*Комментарий основан на реальных событиях. Проект и дизайнер пострадали.
Осталось расписать, что же такое проектирование сайта)
А что лучше по вашему мнению подходит для создания макета сайта? Вообще люди делают макеты и в кореле и в ворде, кому где удобнее, я считаю это извращением, видимо потому что умею работать только в PS и считаю его очень удобным инструментом. Сейчас CSS позволяет очень многое, верстальщику достаточно просто видеть картинку и снимать показания с макета, в другом случае многие показания могут быть переданы в виде текста.
Ну, плохому танцору, знаете ли...) Да, изначально он создавался не для этого, но еще в cs6 появилась привязка к пиксельной сетке, интеграция с edge reflow… в последней версии можно даже одним кликом копировать в буфер css-код слоя, и прочие плюшки.
Веб-дизайнер должен примерно представлять механизмы вёрстки и отображения разных элементов в браузере. В идеале — самостоятельно сверстать за свою жизнь хоть одну простую страничку (это довольно быстро вправляет мозг, в том числе, относительно каши в слоях и структуры psd). Иначе его как-то иначе следует называть, не веб-дизайнером точно.
Веб-дизайнер должен примерно представлять механизмы вёрстки и отображения разных элементов в браузере. В идеале — самостоятельно сверстать за свою жизнь хоть одну простую страничку (это довольно быстро вправляет мозг, в том числе, относительно каши в слоях и структуры psd). Иначе его как-то иначе следует называть, не веб-дизайнером точно.
А еще русским интерфейсом на скриншотах в статье. До сих пор не могу понять как люди им могут пользоваться.
Fireworks больше не развивается. Какие есть альтернативы? PS, кстати, потихоньку наполняется нужными для web-дизайна нововведениями. Например, недавно добавили связанные смарт-объекты. Конечно хотелось бы чтобы они стали еще более «смарт», скажем, чтобы можно было нарисовать прототип кнопки и переопределять различные свойства в отдельных экземплярах.
Проблемы с направляющими и нечеткими границами можно решить, используя в качестве единицы измерения пиксель, а не сантиметр или дюйм.
У меня стоят пиксели, но это не мешает мне установить направляющую посередине пикселя
Чтобы попадать в пиксели с направляющими держите нажатым Shift
Обладаю скиллом попадать в нужный пиксель при выставлении внезапной направляющей. Однако необходимости вставлять все направляющие таким образом нет — для этого и разрабатываются дизайн-системы со своими правилами, а направляющие выставляются отредактированным скриптом, ну или если работаешь не на своей машине — вручную через «добавить горизонтальную/вертикальную направляющую».
Я просто ставлю направляющие только при масштабе 100%. И рисую блоки тоже, чтобы избежать размытых краев.
Для опытного дизайнера это все довольно очевидные вещи.
Меня вообще удивляет, что люди не готовят макеты для верстальщиков. Я никогда не группирую и не называю слои, когда работаю с макетом — просто мне так удобнее и это тема отдельной статьи — почему так.
Но я НИКОГДА не отправляю разработчику этот мусор, пока не причешу все — не удалю пустые и скрытые слои, не сгруппирую логически все по папкам.
И на месте разработчиков, я бы просто отправлял не приведенные в порядок макеты назад с фразой «спасибо, не надо».
Меня вообще удивляет, что люди не готовят макеты для верстальщиков. Я никогда не группирую и не называю слои, когда работаю с макетом — просто мне так удобнее и это тема отдельной статьи — почему так.
Но я НИКОГДА не отправляю разработчику этот мусор, пока не причешу все — не удалю пустые и скрытые слои, не сгруппирую логически все по папкам.
И на месте разработчиков, я бы просто отправлял не приведенные в порядок макеты назад с фразой «спасибо, не надо».
В Photoshop CC можно менять размер прямоугольника со скругленными углами без потери радиуса скругления. И направляющие там привязываются к пиксельной сетке.
Просто веб-дизайнеры, которым лень потратить пару дней на изучение основ верстки — не нужны нафиг.
Наверное, таких записей уже с десяток на Хабре. Ничего нового.
1. Проблема верстальщика. Он не снял галочку, которая обрезает все под sRGB. Зачем дизайнеру все ограничивать древним sRGB, если уже много устройств с хорошими дисплеями. Вообще многие советуют отключать управление цветовыми профилями RGB в фотошопе и не привязывать профиль.
2. При 100% масштабе направляющие перемещаются на 1 пиксель в Photoshop’e
1. Проблема верстальщика. Он не снял галочку, которая обрезает все под sRGB. Зачем дизайнеру все ограничивать древним sRGB, если уже много устройств с хорошими дисплеями. Вообще многие советуют отключать управление цветовыми профилями RGB в фотошопе и не привязывать профиль.
2. При 100% масштабе направляющие перемещаются на 1 пиксель в Photoshop’e
Древним sRGB?) Это как?))))) А есть новое?)
sRGB создан совместно компаниями HP и Microsoft в 1996 году для унификации использования модели RGB в мониторах, принтерах и Интернет-сайтах[1].
ru.wikipedia.org/wiki/SRGB
Это что-то на подобии усредненного безопасного профиля элт-монитора, который должен везде отображаться одинаково. Но многие мониторы уже выдают больше цветов.
Возможно, кто-то более просвещенный меня поправит.
Этот стандарт был нужен, чтобы красный на вашем мониторе, был таким же красным или очень похожим на другом любом мониторе.
Может какие то мониторы и способны выдавать расширенный sRGB цветовой диапазон, но вы рисуете в 8 битном режиме, что значит ваш макет имеет 256 единиц красного, 256 единиц зеленого и 256 единиц синего.
Какой профиль вы не выберете, он просто сместит спектр, а не расширит его.
Может какие то мониторы и способны выдавать расширенный sRGB цветовой диапазон, но вы рисуете в 8 битном режиме, что значит ваш макет имеет 256 единиц красного, 256 единиц зеленого и 256 единиц синего.
Какой профиль вы не выберете, он просто сместит спектр, а не расширит его.
Но зачем всем обрезать цвета в картинках? Можно оставить без профиля. Пусть ОС или браузер этим занимаются. Уже и мобилки по 100уе с IPS
Если я ставлю sRGB, то ColorPicker у меня в фотошопе становится весь покореженный.
Если я ставлю sRGB, то ColorPicker у меня в фотошопе становится весь покореженный.
Если хотите, чтобы ваши изображения были тусклыми из за глюков при отсутствии поддержки adobe RGB на 99% устройств (браузеры, вьюверы), cохраняйте в adobe RGB.
>Если я ставлю sRGB, то ColorPicker у меня в фотошопе становится весь покореженный.
>покореженный
Это как?
>покореженный
Это как?
На нем появляются полоски, если в управлении цветом в ФШ я ставлю sRGB
Поэтому я оставляю профиль монитора
Поэтому я оставляю профиль монитора
Нужно делать покрытие дизайн-макета тестами… ну и макет-ревью
Казалось бы сто раз уже все обсуждалось, но статья действительно актуальна. Отправил дизайнерам с работы, т.к. до сих пор встречаю в макетах «Adobe RGB» и размер шрифта в пунктах.
Бесит когда цвет текста в макете сделан не цветом текста в фотошопе, а с помощью color overlay у слоя.
Это архаизм. Сейчас уже появились средства для контроля типографики в фш, а ранее, приходилось использовать color overlay в макетах с большим количеством стилей, поскольку скопировать стиль слоя и вставить его для 80 элементов много проще, чем, нежели, протыкивать каждый текстовый блок, кликать на цвет, вставлять нужный вариант (а потом приходит депеша от заказчика — измените-де стили для текста в соответствии с новой версией фирстиля, утвержденной такого-то числа).
Впрочем, это может быть оправдано и сейчас, если макеты передаются в версии ниже CS6.
Впрочем, это может быть оправдано и сейчас, если макеты передаются в версии ниже CS6.
Хо-хо, это еще что.
Одна моя коллега в своем макете имела привычку некоторые куски текста в psd-макете зажирнять через Faux Bold, а не через Font Style:Bold.
Себе-то она жизнь упростила — конечно, проще было тыкнуть на кнопочку, чем залезть в выпадающее меню Font-Style.
А верстальщик берет потом макет, видит — font-style: regular, так и прописывает, а на сайте почему-то выглядет не так, как на макете.
И следуют разборки.
Но однажды она себя превзошла — поставила Faux Bold нестандартному шрифту, у которого Font-style:bold в помине не было.
Мне было потом очень весело объяснять заказчику, что это нарисованное нечто проблематично будет воплотить.
Одна моя коллега в своем макете имела привычку некоторые куски текста в psd-макете зажирнять через Faux Bold, а не через Font Style:Bold.
Себе-то она жизнь упростила — конечно, проще было тыкнуть на кнопочку, чем залезть в выпадающее меню Font-Style.
А верстальщик берет потом макет, видит — font-style: regular, так и прописывает, а на сайте почему-то выглядет не так, как на макете.
И следуют разборки.
Но однажды она себя превзошла — поставила Faux Bold нестандартному шрифту, у которого Font-style:bold в помине не было.
Мне было потом очень весело объяснять заказчику, что это нарисованное нечто проблематично будет воплотить.
А дизайнер не пишет комментарии с цветом текста (ну и всех прочих элементов/фонов) поверх самого дизайна? Это же в разы делает работу проще всем.
Если не хочется писать руками, есть плагины которые пишут все эти комментарии.
Если не хочется писать руками, есть плагины которые пишут все эти комментарии.
На мой взгляд в п.1 лучше вообще не использовать цветовой профиль, никакой. Такая возможность есть.
В п. 3 забыли две очень важных вещи: не растеризовать шрифты и оставлять кусок фона для тайлинга.
Вычленять из сложного фона то, из чего он был сделан — мучительное занятие.
И еще, для шрифтов использовать Sharp антиалиасинг. Стандартный ФШ Smooth почти не повторить в браузере.
Я бы не ставил такой безоговорочный знак равенства в п. 7 между эффектами в браузерах и в фотошопе. например, ФШ когда рисует тень для слоя, то острые углы смягчаются. Браузер использует чисто прямоугольник.
А вообще, я уже давно не полагаюсь на благоразумие дизайнеров:
ширина блока 178 пкс? округляем до 180.
отступ слева 22, справа 24? значит везде 22.
цвет обводки отличается, хотя выглядит однотонно? значит будет один цвет в CSS
и т.д.
В п. 3 забыли две очень важных вещи: не растеризовать шрифты и оставлять кусок фона для тайлинга.
Вычленять из сложного фона то, из чего он был сделан — мучительное занятие.
И еще, для шрифтов использовать Sharp антиалиасинг. Стандартный ФШ Smooth почти не повторить в браузере.
Я бы не ставил такой безоговорочный знак равенства в п. 7 между эффектами в браузерах и в фотошопе. например, ФШ когда рисует тень для слоя, то острые углы смягчаются. Браузер использует чисто прямоугольник.
А вообще, я уже давно не полагаюсь на благоразумие дизайнеров:
ширина блока 178 пкс? округляем до 180.
отступ слева 22, справа 24? значит везде 22.
цвет обводки отличается, хотя выглядит однотонно? значит будет один цвет в CSS
и т.д.
И еще, для шрифтов использовать Sharp антиалиасинг. Стандартный ФШ Smooth почти не повторить в браузере.
Еще появились в ФШ Windows LCD и Windows. Но в целом сглаживание шрифтов до 24-28пт все равно не имеет ничего общего с браузерами.
это в какой версии? у меня CS4
Никакие режимы отображения не соответствуют реалу. Только если отключить сглаживание в винде и фотошопе, тогда да.
Почему-то при их использовании буквы становятся сильно шире. Так что тоже не вариант.
1. Ширина блока в 178 пикселей может быть оправдана модульной сеткой.
2. Если значения отступов отличаются, то это значит, что подразумевается ассиметричность блока, как правило, в таких блоках звернут текст, который при отступе 24 справа — выглядит отлично, а при отступе 22 — превращается в традиционный кириллический забор.
3. Не совсем понял про цвет обводки, скорее всего здесь речь об имитации блика/тени — поздравляю, испорчена визуализация. Если же речь идёт о подчёркивании ссылок/заголовков, то это более чем оправдано — уменьшается визуальный шум, но какое вам до этого дело?
Если все эти условия не выполнены, то вы работаете с дизайнерами-дилетантами и ваша позиция вполне оправдана.
2. Если значения отступов отличаются, то это значит, что подразумевается ассиметричность блока, как правило, в таких блоках звернут текст, который при отступе 24 справа — выглядит отлично, а при отступе 22 — превращается в традиционный кириллический забор.
3. Не совсем понял про цвет обводки, скорее всего здесь речь об имитации блика/тени — поздравляю, испорчена визуализация. Если же речь идёт о подчёркивании ссылок/заголовков, то это более чем оправдано — уменьшается визуальный шум, но какое вам до этого дело?
Если все эти условия не выполнены, то вы работаете с дизайнерами-дилетантами и ваша позиция вполне оправдана.
странная модульная сетка, которая не дает круглых значений. а зачем она нужна тогда? а если аналогичные блоки пляшут в размерах на разных макетах, это модульная сетка или косяк дизайнера уже?
22/24 px отступа на кнопке это странная, никому не нужная ассиметрия на мой взгляд.
Обводка, читай border. Очень часто вижу, что не попало в пиксель и линия собирается из соседних. копировать цвет в этом случает не вижу смысла. Если дизайнер осознанно сделал линии разноцветными, то вопросов нет.
У Яндекса как-то был доклад в духе «Хорошо дизайнит тот, кто дизайнит последним». Я пытался найти ссылку на него, но не получилось. Смысл в том, что дизайнеры ко всему вышеперечисленному очень часто забывают прорисовать состояния для элементов: hover, active, focus, disabled и т.д.
Верстальщик может конечно бегать за каждым цветом к дизайнеру, но порой проще придумать их самим, отталкиваясь от общего стиля.
Т.е. как дизайнер должен быть слегка верстальщиком, так и верстальщик должен быть немного дизайнером. Для успешной работы.
22/24 px отступа на кнопке это странная, никому не нужная ассиметрия на мой взгляд.
Обводка, читай border. Очень часто вижу, что не попало в пиксель и линия собирается из соседних. копировать цвет в этом случает не вижу смысла. Если дизайнер осознанно сделал линии разноцветными, то вопросов нет.
У Яндекса как-то был доклад в духе «Хорошо дизайнит тот, кто дизайнит последним». Я пытался найти ссылку на него, но не получилось. Смысл в том, что дизайнеры ко всему вышеперечисленному очень часто забывают прорисовать состояния для элементов: hover, active, focus, disabled и т.д.
Верстальщик может конечно бегать за каждым цветом к дизайнеру, но порой проще придумать их самим, отталкиваясь от общего стиля.
Т.е. как дизайнер должен быть слегка верстальщиком, так и верстальщик должен быть немного дизайнером. Для успешной работы.
Перечитайте последнюю строчку моего комментария.
По модульной сетке. Большинство сеток в типографике дают дробные значения и это нормально, чтоб понять как они работают нужно почитать про построение сеток, основанных на пропорциях элементов, ну или хотя бы краткий курс по вёрстке газетных полос. Вот вам хороший материал. Из него вы узнаете, что и почему.
Если не попало в пиксель — это косяк дизайнера, какие могут быть вопросы. Ещё раз прочитайте последнюю строчку моего комментария.
Поведение элементов «забывают» сделать дилетанты.
Цвет. Без обид, но систему цвета никто не «придумывает». Эта система подчиняется строгим законам и правилам. Да не все дизайнеры её знает, работают с ней вообще меньшинство, но… Это не даёт вам повод считать, что «проще придумать».
3 месяца чтений статей про блочную модель, паттерны и фишки на alistapart, Sid Mayers css trics, ещё пара ресурсов и я начал неплохо валидно верстать небольшие сайты. Полгода углубленного изучения и постоянная верстка и вот у меня уже имеются свои шаблоны, паттерны кода, набор мини-фреймворков для проектов. Чтоб стать средним верстальщиком — мне потребовался год. Но у меня были весьма хорошие познания в области дизайна: типографика, модульные сетки, колористика, поэтому мне было несколько проще.
Чтоб стать дизайнером (не тем дизайнером, который ваяет лэндинги и строгает магазины) требуются огромные вложения денег, времени, нужно много работать, читать, делать выводы. Я потратил на самообразование в этой сфере 9 лет и считаю, что мне нужно ещё многому научиться. А вы говорите, что верстальщик должен быть немного дизайнером и в том же комментарии спрашиваете «зачем нужны модульные сетки, которые не дают круглых значений».
По модульной сетке. Большинство сеток в типографике дают дробные значения и это нормально, чтоб понять как они работают нужно почитать про построение сеток, основанных на пропорциях элементов, ну или хотя бы краткий курс по вёрстке газетных полос. Вот вам хороший материал. Из него вы узнаете, что и почему.
Если не попало в пиксель — это косяк дизайнера, какие могут быть вопросы. Ещё раз прочитайте последнюю строчку моего комментария.
Поведение элементов «забывают» сделать дилетанты.
Цвет. Без обид, но систему цвета никто не «придумывает». Эта система подчиняется строгим законам и правилам. Да не все дизайнеры её знает, работают с ней вообще меньшинство, но… Это не даёт вам повод считать, что «проще придумать».
3 месяца чтений статей про блочную модель, паттерны и фишки на alistapart, Sid Mayers css trics, ещё пара ресурсов и я начал неплохо валидно верстать небольшие сайты. Полгода углубленного изучения и постоянная верстка и вот у меня уже имеются свои шаблоны, паттерны кода, набор мини-фреймворков для проектов. Чтоб стать средним верстальщиком — мне потребовался год. Но у меня были весьма хорошие познания в области дизайна: типографика, модульные сетки, колористика, поэтому мне было несколько проще.
Чтоб стать дизайнером (не тем дизайнером, который ваяет лэндинги и строгает магазины) требуются огромные вложения денег, времени, нужно много работать, читать, делать выводы. Я потратил на самообразование в этой сфере 9 лет и считаю, что мне нужно ещё многому научиться. А вы говорите, что верстальщик должен быть немного дизайнером и в том же комментарии спрашиваете «зачем нужны модульные сетки, которые не дают круглых значений».
не надо тащить вашу б-мерзкую типографику в наш уютный веб 3.0 )
проще придумать в моем понимании это обычно темнее на 30%; светлее на 30%; инверсия градиента. никто по цветовому кругу не бегает. для этого дизайнеры есть.
Простой пример приключений цветов. Задача была приглушить цвета в модном хипстерском стиле. Результат справа. Попутно можно наблюдать как изменяются блики, полутени и pure-цвет. Финальную палитру пока не могу показать, там 12 цветов на все случаи жизни.
Относительно типографики. Ну, ретина-дисплеи и многообразие разрешений намекают, что книжно-газетная типографика наоборот, станет более актуальной, а дизайн-системы, основанные на пропорциях элементов — станут новой 960gs:)
Вы забыли как вариант «суперплюса» — «сговорчивость» дизайнера, когда ему верстальщик говорит, мол, вот это я сделаю так, как мне удобнее/как возможно/как будет быстрее грузиться, а дизайнер не цепляется тупо за «сделать точно как я сделал» (от чего и появляются все эти «14 с половиной пикселей»), а соглашается, да еще и (побольше бы таких!) выводы для себя делает и в другой раз подобных косяков не сдает в верстку.
Вот и имеем на выходе — либо дизайнер человек опытный, и потому не косячит, либо опытный, и потому понимающий, где уступить, либо — неопытный, и от того увеличивающий энтропию вселенной.
А PS или не PS для рисования использовать — дело десятое. Главное, чтобы программа не создавал лишние проблемы, а то видел макеты в .cdr, где буквально ни единой точки не растеризовалось ровно. Причем дизайнер честно хотел сделать удобно для верстки, но Corel просто не позволил ему этого, заставляя оперировать в логике типографии, где, как обычно, одна точка растра не особо волнует.
Вот и имеем на выходе — либо дизайнер человек опытный, и потому не косячит, либо опытный, и потому понимающий, где уступить, либо — неопытный, и от того увеличивающий энтропию вселенной.
А PS или не PS для рисования использовать — дело десятое. Главное, чтобы программа не создавал лишние проблемы, а то видел макеты в .cdr, где буквально ни единой точки не растеризовалось ровно. Причем дизайнер честно хотел сделать удобно для верстки, но Corel просто не позволил ему этого, заставляя оперировать в логике типографии, где, как обычно, одна точка растра не особо волнует.
А умеют ли верстальщики уже работать с Иллюстратором?
Мне кажется, что в нем намного удобнее было бы делать. Сразу в 1 документе можно расположить все страницы/экраны.
Мне кажется, что в нем намного удобнее было бы делать. Сразу в 1 документе можно расположить все страницы/экраны.
весь вопрос насколько там просто взять и сохранить объект/кусок объекта в растр. в ФШ это выделение->копирование->cохранение.
Понял.
Там тоже слайсы есть, но растрировать не также просто.
Там тоже слайсы есть, но растрировать не также просто.
слайсами, честно говоря, уже давно не пользовался. как-то нет нужды
В Фотошопе ЦЦ можно включить одну настройку и, если правильно называть группы, то он вам будет сам аккуратно каждый элемент сохранять в папку с нужным названием, размерами и параметрами сжатия при каждом изменении этого элемента.
Photoshop Generator
Я пока не юзал. Только изучаю верстку (и надеюсь, что особо верстать не буду)
Photoshop Generator
Я пока не юзал. Только изучаю верстку (и надеюсь, что особо верстать не буду)
Обязательно верстайте как можно больше. Дизайн подтяните, сразу говорю
Спасибо за совет! :)
Не нравится она мне. В свое время намучался с IE6, когда простой сайт на PHP на диплом писал в 2006 (дизайн с прозрачностями был).
В верстке постоянно какие-то нелогичные сюрпризы. Например, прописывать overflow:hidden родительскому контейнеру float-элементов, чтобы он не схлопывался. Кроссбраузерность — отдельный вопрос.
Но понимаю, что без нее никуда. Хочу свой сайт на WP перенести и сделать интересный дизайн :)
Не нравится она мне. В свое время намучался с IE6, когда простой сайт на PHP на диплом писал в 2006 (дизайн с прозрачностями был).
В верстке постоянно какие-то нелогичные сюрпризы. Например, прописывать overflow:hidden родительскому контейнеру float-элементов, чтобы он не схлопывался. Кроссбраузерность — отдельный вопрос.
Но понимаю, что без нее никуда. Хочу свой сайт на WP перенести и сделать интересный дизайн :)
А что, отличная идея! *Только вот после десятой страницы все начнёт тормозить, а после двадцатой — получим на выходе файл >2 Гб, который невероятно удобно переслать по e-mail, и который гарантированно откроется на любом железе *sarcasm.
offtop. Определил страну комментирующего по его работам.
offtop. Определил страну комментирующего по его работам.
Сейчас в моде плоский дизайн.
Если его в иллюстраторе сделать в основном на одних векторных объектах, то файл будет очень маленький.
Если его в иллюстраторе сделать в основном на одних векторных объектах, то файл будет очень маленький.
Вы ошибаетесь. Flat уходит из моды.
Вы судите, исходя из специфики своей работы, насколько я понял, вы делаете небольшие сайты за скромное вознаграждение (3-8 страниц). В случае с сервисом или корпоративным сайтом у вас будет 20-70 шаблонов (не страниц), добавим к ним брендированные фото/картинки, добавим к ним поведение форм, поведение сервисных страниц и их будет уже свыше 100. Файл будет очень большой.
Вы судите, исходя из специфики своей работы, насколько я понял, вы делаете небольшие сайты за скромное вознаграждение (3-8 страниц). В случае с сервисом или корпоративным сайтом у вас будет 20-70 шаблонов (не страниц), добавим к ним брендированные фото/картинки, добавим к ним поведение форм, поведение сервисных страниц и их будет уже свыше 100. Файл будет очень большой.
За каждый просчёт дизайнера в макете повышайте ценовую планку и обосновывайте такую цену. Рано или поздно заказчику просто станет не выгодно заниматься своим пиксель-пёрфектом.
А может кто-нибудь знает плагинчик/расширение для PS, позволяющее для каждого документа задавать свою сетку? Вообще странно, почему до сих пор так не сделали.
Проблема с єффектами наложения слоев (оверлей и т. д.) решается просто — конвертим эту группу слоев в смарт-объект и вуаля, все накладывается в режиме „нормал“. Пусть «дизайнер» ругается и адаптирует свою картинку теперь, чтобы смотрелось нормально.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Распространённые ошибки веб-дизайнеров или как угодить верстальщику