Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 273
Жизненно.
А еще супер, когда дизайнер использует композиции слоев.
А еще супер, когда дизайнер использует композиции слоев.
Это всё не только к HTML относится. К дизайнерам десктопных и мобильных приложений это относится в той же степени. Только там есть ещё много специфики.
Подтверждаю, как мобильный девелопер с достаточно большим стажем. Особенно про режимы смешения (особенно Multiply) и настройки шрифтов. И да, вертикальные градиенты в блоках, которые должны растягиваться по высотке.
И еще одну просьбу добавлю, это касается в основном только мобильных — делайте по отдельной PSD-шке на экран, а не все вместе. Даже на моем относительно нестаром Macbook Pro с 8Гб оперативки, которого за глаза хватает для девелопмента, такие PSD-шки нещадно тормозят.
Также было бы клево аттачить все использованные шрифты в ttf!
И еще одну просьбу добавлю, это касается в основном только мобильных — делайте по отдельной PSD-шке на экран, а не все вместе. Даже на моем относительно нестаром Macbook Pro с 8Гб оперативки, которого за глаза хватает для девелопмента, такие PSD-шки нещадно тормозят.
Также было бы клево аттачить все использованные шрифты в ttf!
О да, как iOS девелопер полностью со всем согласен. Multiply/Overlay и вертикальные градиенты в резиновых блоках это прям хит какой-то, в каждом проекте встречается.
Еще дополню по поводу ретины, обычно макеты рисуются под ретину, а в дальнейшем разработчиком просто уменьшаются. Отсюда вытекают две проблемы, размеры элементов (97х39 px), нормально такой контрол уменьшить не получится, приходится либо править, либо добавлять пустые пиксели. И однопиксельные линии на бордерах/бликах/тенюшках/иконках, я не могу их уменьшить до 0.5px линии.
Ну а подход со стилями:
Мне дизайнер объяснил так: «Стили можно копировать»… А свою палитру под проект создать религия не позволяет??
Еще дополню по поводу ретины, обычно макеты рисуются под ретину, а в дальнейшем разработчиком просто уменьшаются. Отсюда вытекают две проблемы, размеры элементов (97х39 px), нормально такой контрол уменьшить не получится, приходится либо править, либо добавлять пустые пиксели. И однопиксельные линии на бордерах/бликах/тенюшках/иконках, я не могу их уменьшить до 0.5px линии.
Ну а подход со стилями:
зачем проставлять надписи один цвет, а потом использовать эффект «наложение цвета»???
Мне дизайнер объяснил так: «Стили можно копировать»… А свою палитру под проект создать религия не позволяет??
Кстати интересно было, а зачем изначально рисовать под ретину? Экран для айпада в таком случае не влезает на монитор, и как раз возникают такие проблемы с размерами. да и девелоперам проще смотреть комментарии на обычном разрешении, когда мокап с комментами влезает на экран. А увеличить для нарезки отдельные элементы не проблема. (Конечно это все учитывая, что дизайнер сам делает нарезку)
Сразу под ретину рисуется, потому, что слишком много растра и прочей графики, которую намного проще уменьшить.
А такое, что б дизайнер сам нарезал графику, я еще не видел. Нарезка даже стандартного UISegmentedControl довольно нетривиальная задача. А про сложные кастомные контролы я вообще молчу.
А такое, что б дизайнер сам нарезал графику, я еще не видел. Нарезка даже стандартного UISegmentedControl довольно нетривиальная задача. А про сложные кастомные контролы я вообще молчу.
Всегда свои макеты для iOs режу сам.
Да, вот макеты под андроид резать гораздо более увлекательная задача, если с ios я чертыхалась только один день, то с андроидом 3 и в итоге писала доку для себя же, что б не забыть всю эту радость с 9.path)
Согласен =) Хорошо, что под андроид мне приходится дизайнить очень редко =)
Радость называется 9patch. И там кстати есть тулза — draw9patch, которая позволяет смотреть что получится. Это если вы еще на глаз не можете растягивать.
Но это не уменьшает радости от пересохраннения этих кнопок во всех состояниях, для минимум трех размеров экранов. И название да, без точки точка пришла из того, что в файле это имеет окончание 9.png)
> Но это не уменьшает радости от пересохраннения этих кнопок во всех состояниях, для минимум трех размеров экранов.
Может есть смысл написать скрипт который сам во все разрешения будет сохранять?
> И название да, без точки точка пришла из того, что в файле это имеет окончание 9.png)
В названии patch а не path.
Может есть смысл написать скрипт который сам во все разрешения будет сохранять?
> И название да, без точки точка пришла из того, что в файле это имеет окончание 9.png)
В названии patch а не path.
Хм, боюсь написание скрипта совсем не входит в сферу моих возможностей :)
Вы видимо пользователь андроида?
Вы видимо пользователь андроида?
Это плохо что дизайнеры/художники не могут пользоваться своим же графическим пакетом.
Из чего вы сделали вывод что я пользователь андроида?
Из чего вы сделали вывод что я пользователь андроида?
Предположение, профиль, вывод: )
Вы предлагаете мне в графическом пакете с художественным образованием писать скрипт, когда как минимум скрипт для сохранения слоев в отдельные файлы уже есть, (что изрядно помогает, да)
и скрипт не решит мне проблемы с ресайзом с эффектов слоя)
Вы предлагаете мне в графическом пакете с художественным образованием писать скрипт, когда как минимум скрипт для сохранения слоев в отдельные файлы уже есть, (что изрядно помогает, да)
и скрипт не решит мне проблемы с ресайзом с эффектов слоя)
Просто в данном контексте не понятно к чему было про пользователя.
Почему то считается нормальным верстальщику/программисту уметь разобраться с фотошопом и самостоятельно все выгребсти от туда, разобрать слои, эфекты, сделать нарезки.
А художнику/дизайнеру, прочитать главу про автоматизацию нельзя?
Почему то считается нормальным верстальщику/программисту уметь разобраться с фотошопом и самостоятельно все выгребсти от туда, разобрать слои, эфекты, сделать нарезки.
А художнику/дизайнеру, прочитать главу про автоматизацию нельзя?
Про пользователя было так, наблюдение: )
Ну, я например так не считаю, и делаю нарезку ресурсов и подробные комментарии, мне можно не писать скрипт? )
Вообще, если говорить именно о вебе и верстальщиках, это ведь очень давний холливар, и в основном он касается начинающих верстальщиков и таких же начинающих дизайнеров. Либо фриласн, когда нет контакта друг с другом. При постоянной работе в команде вырабатывается удобный для всех способ передачи ресурсов.
И да, я за разделение труда, и не рвусь в верстку (для этого ведь есть замечательные профессионал в своем деле), а нынешнем случае еще более не рвусь в программирование под мобильные)
Упомянутая вами тулза, кстати, входит в пакет для разработки под андроид и отдельно не выкачивается и не ставиться как ни печально) Альтернатива только вот такая: android-ui-utils.googlecode.com/hg/asset-studio/dist/nine-patches.html
Ну, я например так не считаю, и делаю нарезку ресурсов и подробные комментарии, мне можно не писать скрипт? )
Вообще, если говорить именно о вебе и верстальщиках, это ведь очень давний холливар, и в основном он касается начинающих верстальщиков и таких же начинающих дизайнеров. Либо фриласн, когда нет контакта друг с другом. При постоянной работе в команде вырабатывается удобный для всех способ передачи ресурсов.
И да, я за разделение труда, и не рвусь в верстку (для этого ведь есть замечательные профессионал в своем деле), а нынешнем случае еще более не рвусь в программирование под мобильные)
Упомянутая вами тулза, кстати, входит в пакет для разработки под андроид и отдельно не выкачивается и не ставиться как ни печально) Альтернатива только вот такая: android-ui-utils.googlecode.com/hg/asset-studio/dist/nine-patches.html
По честному мне все равно сколько дизайнер будет там делать нарезку, 5 минут или 3 дня. Просто мне не нравится, что отсутствие знаний у дизайнера своего же пакета, выливается в жалобы, что надо выдавать картинку аж в 3х размерах! (кстати вы же тоже жаловались :) )
В итоге все та же проблема выливается дальше, если не дай бог нужно что то поправить в 30 слоях (или в одном слое, который задевает 30 других) и пере выгрузить для 3х разрешений. Работы по сути на 5 минут, но так как лень дизайнер будет сидеть день-два. Хотя казалось бы лень — двигатель прогресса, напиши скрипт в фотошопе :)
Просто считайте что андроид сдк это и есть тулза (draw9patch), если вам так будет проще представлять, тогда это вообще ни чем не будет отличаться от любой другой программы :)
В итоге все та же проблема выливается дальше, если не дай бог нужно что то поправить в 30 слоях (или в одном слое, который задевает 30 других) и пере выгрузить для 3х разрешений. Работы по сути на 5 минут, но так как лень дизайнер будет сидеть день-два. Хотя казалось бы лень — двигатель прогресса, напиши скрипт в фотошопе :)
Просто считайте что андроид сдк это и есть тулза (draw9patch), если вам так будет проще представлять, тогда это вообще ни чем не будет отличаться от любой другой программы :)
Возможность поныть, это весьма важная возможность)
Это выдавать картинку в минимум трех! И это претензия совсем не к девелоперам, а так глобально к такой вот сложной стороне жизни)
Но если вы думаете, что поправить что-то в 30 слоях это пять минут… И скрипт не решить проблему, когда например иконка должна изменяться в разных размерах, у нее может увеличиваться детализация например, скрипт за меня ее не додумает: ) Даже замечательная тулза slicy решает далеко не все и результат все равно надо отсматривать)
Но в моем случае, как говорила выше решение уже есть, у остальных приходит свое решение со временем)
Это выдавать картинку в минимум трех! И это претензия совсем не к девелоперам, а так глобально к такой вот сложной стороне жизни)
Но если вы думаете, что поправить что-то в 30 слоях это пять минут… И скрипт не решить проблему, когда например иконка должна изменяться в разных размерах, у нее может увеличиваться детализация например, скрипт за меня ее не додумает: ) Даже замечательная тулза slicy решает далеко не все и результат все равно надо отсматривать)
Но в моем случае, как говорила выше решение уже есть, у остальных приходит свое решение со временем)
Скажем подвинуть на пару пикселей, из-за которых нужно пере выгрузить 30 слоев — это на пять минут. Изменения не значительные, а нытья много будет, так как делаться будет все руками.
То что картинка может быть каждая своя, под каждое разрешение, тоже может быть и это правильно. Не каждый дизайнер захочет рисовать еще одну :)
Скрипт поможет быстро выгрузить все состояния иконки.
Простой пример — скины. В итоге имеем 3 файла, под каждое разрешение, в каждом по 30 слоев, каждый слой для одного элемента. Нужно что то поменять и все перевыгрузить. Будете руками делать? :)
То что картинка может быть каждая своя, под каждое разрешение, тоже может быть и это правильно. Не каждый дизайнер захочет рисовать еще одну :)
Скрипт поможет быстро выгрузить все состояния иконки.
Простой пример — скины. В итоге имеем 3 файла, под каждое разрешение, в каждом по 30 слоев, каждый слой для одного элемента. Нужно что то поменять и все перевыгрузить. Будете руками делать? :)
Если мне не сразу понятно, как лучше нарезать определенный контрол, я иду к разработчикам и прошу их пояснить в к каком виде им будет удобнее получить графику. Неразрешимых проблем у нас пока не было. Хотя я от добровольца на этот процесс вместо меня не отказалась бы, но реальность против: )
Насчет растра, откуда у вас в макетах растр? Это графика для игр, иллюстрации? Потому что у меня сейчас все решается векторными объектами, которые в cs6 фотошопе ресайзить стало гораздо проще.
Насчет растра, откуда у вас в макетах растр? Это графика для игр, иллюстрации? Потому что у меня сейчас все решается векторными объектами, которые в cs6 фотошопе ресайзить стало гораздо проще.
А трестируете мокапы вы потом просто на ретина-айпаде? Для меня критично еще и это, так как под рукой только обычный айпад и следовательно в его разрешении и смотреть удобнее.
Полгода назад я бы с вами согласился, но сейчас как раз работаю с дизайнером, который режет макет и знает про resizableImageWithCapInsets! Прямо чудо какое-то! Правда он сидит за столом напротив, что облегчает коммуникацию.
А про 0.5 пикселя — как оказалось, это не проблема, на 3Gs и втором айпаде, что более важно, рисуется 1px. Некратные размеры картинок идут от криворукости дизайнера — нормальным мобильный дизайнер выставляет сразу сетку по 8 пикселей и все ровняет по ней.
А про 0.5 пикселя — как оказалось, это не проблема, на 3Gs и втором айпаде, что более важно, рисуется 1px. Некратные размеры картинок идут от криворукости дизайнера — нормальным мобильный дизайнер выставляет сразу сетку по 8 пикселей и все ровняет по ней.
Хм, видимо Вам не повезло. Прекрасно видел как нарезают и по просьбе перенарезают.)
Пару раз приходилось убеждать дизайнера, что 12 и 17 — это не в 2 раза больше. После этого, что 12 и 19 — всё равно не в 2 раза больше…
Это не просто клево, это обязательно! Тем более, что при этом у шрифта не должно быть проблем с лицензией.
К сожалению об этом не задумываются очень многие, и пока я не представляю что можно сделать для решения проблемы в глобальном плане. Учитывая, что мне не всегда удавалось убедить дизайнеров работающих со мной не называть файлы малоосмысленными именами.
К сожалению об этом не задумываются очень многие, и пока я не представляю что можно сделать для решения проблемы в глобальном плане. Учитывая, что мне не всегда удавалось убедить дизайнеров работающих со мной не называть файлы малоосмысленными именами.
Но дизайнеры мобильных приложений разве не сами режут графику?
Ещё бесит, когда в psd-шнике какой-нибудь блок размером 239 пикселей.
Ну сделай ты четное красивое число, жалко тебе чтоли? И ведь не влияет ни на что (как правило).
Нет, залепил как пришлось, без сетки и потом подогнал по месту…
Вроде бы мелочь, а приходится подправлять.
Ну сделай ты четное красивое число, жалко тебе чтоли? И ведь не влияет ни на что (как правило).
Нет, залепил как пришлось, без сетки и потом подогнал по месту…
Вроде бы мелочь, а приходится подправлять.
А зачем это поправлять-то, ведь не влияет ни на что (как правило).
Очень влияет, т.к. при уменьшении на не-ретиновых дисплеях изображение будет некошерно размытым. Поэспериментируйте, если не лень, если лень — поверьте на слово :)
Где таких дизайнеров находят? Мне достаточно было изучить основы верстки, чтобы проникнуться спецификой этой работы и начать раскладывать слои/объекты в нужные папки иерархически для верстальщика.
Да и просто уважать надо чужой труд и работать командно.
Да и просто уважать надо чужой труд и работать командно.
А вот мне интересно где такие дизайнеры как вы водятся. Я таких никогда не встречал.
Есть класс дизайнеров-выходцев из технологов. Они как раз почти все такие.
Идеал только в теории, это же можно отнести и к верстке — этот прекрасный момент, когда звонит заказчик и вносит 26ю правку, уже влом и просто вписываешь в конец css. Так же бывает и с макетами, вроде как начало разложил, но раз менял, два меня и т.д. и вот уже не так чист макет :(
Правда когда верстать не мне, лично меня как в некотором роде технолога и почти программиста по образованию, начинает мучать совесть и я чищу и привожу в порядок макеты :) ну насколько возможно к данному этапу)
Правда когда верстать не мне, лично меня как в некотором роде технолога и почти программиста по образованию, начинает мучать совесть и я чищу и привожу в порядок макеты :) ну насколько возможно к данному этапу)
Таких нужно самим выводить.
У нас в компании принято от дизайнера требовать спец.страницу с кастомными элементами во всех состояниях (кнопки, радиобаттоны и т.п., при наведении, недоступные и прочее) а так же с наборами заголовков, таблиц и т.п. всей контентной шелухи, которая очень влияет на конечный вид рабочего сайта.
Я не верстальщик и не дизайнер. Но мне пару раз доводилось делать мелкие сайтики. Конечно, я понимаю, что совершенно разный объем работы и уровень т. д. Но! Мне даже в голову не пришло верстать в фш. Почему сразу не вставлять в макет? Понятно, что графика готовится в фш, но ведь ее сразу можно сохранить и вставить в css. Т. е. по сути создание шаблона сайта в фш (wysiwyg по сути) тоже самое, что описание в css. Но при этом можно сразу делать резину, видеть, как оно будет в реальности и т. д. Это исторически сложилось, что дизайнер и верстальщик — разные люди? Почему эти две профессии не пытаются совместить?
Потому что не надо смешивать. Не каждый хороший дизайнер окажется хорошим верстальщиком, и далеко не каждый грамотный верстальщик нарисует вам красивый дизайн.
Я, к примеру, неплохо вроде бы верстаю, но то, что я пытался надизайнить в ФШ, выглядит просто ужасно. Я вижу этот мрак, понимаю, что это мрак, но поделать ничего с собой не могу.
Речь в топике, скорее, о том, что если уж людям 2-х разных профессий приходится сотрудничать друг с другом, то неплохо было бы иметь хоть какое-то представление о сути работы напарника.
Я, к примеру, неплохо вроде бы верстаю, но то, что я пытался надизайнить в ФШ, выглядит просто ужасно. Я вижу этот мрак, понимаю, что это мрак, но поделать ничего с собой не могу.
Речь в топике, скорее, о том, что если уж людям 2-х разных профессий приходится сотрудничать друг с другом, то неплохо было бы иметь хоть какое-то представление о сути работы напарника.
Мне просто такая постановка работы напоминает ситуацию, когда например один программист пишет код на относительно высокоуровневом языке, например C, а второй, вручную все это переписывает на непосредственно ассемблер.
Если изначально дизайн делается в графическом редакторе, то почему этот редактор не может генерировать код сам? (На самом деле может, например тот-же Adobe Dreamweaver, насколько я понял из его описания, он это и делает, но то, насколько он широко используется и удобен в работе — я совершенно без понятия).
Если я не прав — поправьте.
Если изначально дизайн делается в графическом редакторе, то почему этот редактор не может генерировать код сам? (На самом деле может, например тот-же Adobe Dreamweaver, насколько я понял из его описания, он это и делает, но то, насколько он широко используется и удобен в работе — я совершенно без понятия).
Если я не прав — поправьте.
Dreamweaver — это WYSIWYG-редактор хтмл- и цсс-кода, да еще и с какой-то интеграцией с фотошопом. Штука, вообще-то, хорошая, я сам с него начинал. Но вот как-то так получается, что в итоге проще, быстрее и удобнее делать верстку в обычном хорошем текстовом редакторе, а не тыкать мышкой. Потому что код предсказуемый. Справедливости ради, у Dreamweaver-а с этим было неплохо, особенно по сравнению с тем, что генерил Ворд, но когда кидался что-то допиливать, понимал, что лучше бы сам писал.
Дело в том, что любой подобный редактор так или иначе навязывает вам свою логику, а ведь прогресс не стоит на месте, и то, что раньше в нём было делать приемлемо, сейчас делается просто по-другому, и руками опять же легче. Например, есть такая интересная штука как knockout.js (к стыду своему, узнал я о ней совсем недавно). Эта замечательная библиотека не только требует использования своих специфических атрибутов, но и требует местами вообще специфической вёрстки (с использованием циклов, условий и т.д.). Как это переварит Дримвивер, если пытаться сделать такое в WYSIWYG-режиме? Да никак не переварит. Ругаться он будет.
А насчёт постановки работы программистов… Это значит только то, что руководитель проекта идиот, потому что у него 2 программиста решают одну и ту же задачу. А верстальщик и дизайнер решают разные задачи.
Дело в том, что любой подобный редактор так или иначе навязывает вам свою логику, а ведь прогресс не стоит на месте, и то, что раньше в нём было делать приемлемо, сейчас делается просто по-другому, и руками опять же легче. Например, есть такая интересная штука как knockout.js (к стыду своему, узнал я о ней совсем недавно). Эта замечательная библиотека не только требует использования своих специфических атрибутов, но и требует местами вообще специфической вёрстки (с использованием циклов, условий и т.д.). Как это переварит Дримвивер, если пытаться сделать такое в WYSIWYG-режиме? Да никак не переварит. Ругаться он будет.
А насчёт постановки работы программистов… Это значит только то, что руководитель проекта идиот, потому что у него 2 программиста решают одну и ту же задачу. А верстальщик и дизайнер решают разные задачи.
Не по ФэнШую )
Вообще-то, инженер, делая чертеж детали, должен знать, как будет действовать токарь/фрезеровщик. Существует куча правил и ГОСТов, даже просто по нанесению размеров — все ради того чтобы исполнителю было проще. Поставите вы, скажем, вместо суммарного размера цепочку промежуточных — и токарю придется их складывать, чтобы понять, какой длины болванку взять. Примените нестандартную резьбу, когда можно было бы обойтись стандартной — и ее придется отдельно нарезать а себестоимость детали резко возрастет. То же самое и с архитектором — каменщик не выложит вам стенку толщиной в 3.22 кирпича.
Вообще-то «чистого» архитектора особо не волнует проблема «3,22 кирпича», его ответственность — эскизы да макеты, максимум чертежи с указанием общих габаритов. Проблема технической и технологической реализуемости волнует архитектора-проектировщика, в зоне ответственности которого лежит полный выпуск проектной документации. Наверное, «HTML-верстальщики так не любят веб-дизайнеров» за то, что последние считают себя «чистыми» дизайнерами, за то, что они не считают необходимым заботиться о технологичности их макетов, о цене (в прямом и переносном смысле) реализации их «полета мысли» верстальщиками и хоть каком-то облегчении их работы. В этом они сродни архитекторам (дизайнерам), которые на вопрос инженера-проектировщика (верстальщика) «каковы ширины проемов и пролетов?» (столбцов)(столбцов) отвечают «ширина фасада указана, возьми линейку, замерь, вычисли масштаб, замерь ширину проемов и пролетов и вычисли их ширины в натуре» («по пикселям посчитай»). Или на замечание «при таких размерах армирование бетонных конструкций должно осуществляться титановыми сплавами особой прочности, распространенные марки стали не подойдут, не говоря о стандартных деталях» («тут придется делать кучу растра, а не обычные правила CSS к куче вложенных блоков применять, не говоря о применение CSS к одному блоку») говорят «ну вы же нашли выход? какая разница во что это обойдется заказчику, даже лучше, больше прибыли в абсолютных цифрах при той же относительной норме».
Да, и давайте заставим чиновников работать.
)
)
Ребята, вы расслабились. За что деньги получаете?
Профессионализм верстальщика определяется тем, что из фигового макета он сможет сделать красивый сайт.
Да, это типичные ошибки дизайнеров, но это все исправимо. Поговорите с дизайнером — пусть заменит шрифты/сетку. Главное идти на диалог и как можно быстрей говорить об узких местах заказчику или напрямую дизайнеру.
Профессионализм верстальщика определяется тем, что из фигового макета он сможет сделать красивый сайт.
Да, это типичные ошибки дизайнеров, но это все исправимо. Поговорите с дизайнером — пусть заменит шрифты/сетку. Главное идти на диалог и как можно быстрей говорить об узких местах заказчику или напрямую дизайнеру.
Это не всегда возможно. Бывает и так, что заказчик сразу заказал дизайн у одного фрилансера, одобрил результат, не особо в этом разбираясь (картинка красивая, а техническое исполнение побоку), и отдал на верстку другому фрилансеру. И что с таким делать? Дизайнер уже свои деньги получил и, вполне возможно, на просьбу перерисовать ответит посылом нафиг.
А чем определяется профессионализм дизайнера?
«Ребята, вы расслабились. За что деньги получаете?». Эммм задам такой же вопрос Вам и всем дизайнерам, которые работают ради «фигового макета»… Вы деньги получаете — будьте добры отрабатывайте их
На это отвечу только одно — почему вы тогда берёте себе специализацию «ВЕБ-дизайнер», а не просто «дизайнер»? Специфика ни к чему не обязывает? Я же привёл только наиболее противные косяки. Я не требую, как, например, в одном из документов конторы, в которой я трудился "Дизайнер должен особо оговаривать, если для реализации закруглений и теней можно пользоваться средствами CSS3, без использования графики, пренебрегая отображением таких элементов в браузере IE." — я даже против — такую специфику дизайнер не обязан знать. CSS постоянно развивается — за этим надо следить. И следить должен именно верстальщик. Более того, дизайнер не должен быть в курсе того, кем (в контексте браузеров) поддерживаются данные свойства и т.д., поэтому не стоит ему выполнять львиную часть работы верстальщика, но уж привести макет в удобоваримый вид — будьте добры!
Вы зря меня спрашиваете, я front-end разработчик. И очень немало наверстал сайтов, и с плохими .psd и с хорошими. Ну да, приятней работать, когда у тебя все по сетке, слои именованы, сложены по папочкам, отдельно стайл-гайды и спрайты.
Но так бывает редко, и за это не нужно ненавидеть дизайнера — а просто советовать ему, как сделать лучше, для предотвращения дальнейших трудностей
Но так бывает редко, и за это не нужно ненавидеть дизайнера — а просто советовать ему, как сделать лучше, для предотвращения дальнейших трудностей
Хороший верстальщик от обычного тем и отличается, что может решать такие вопросы в рабочем порядке. Никакой дизайнер всего для вас не нарисует. Отнеситесь к проблеме творчески. К слову, веб-технологи Хабра умудрялись верстать и по бумажным эскизам.
Совершенно согласен — дизайнеры почти всегда допускают эти «косяки». С опытом исправляешь их просто на автомате, не задумываясь.
А потом: дизайнер справился за пять часов (молодец), а вы — криворукие разработчики — уже два дня колупаете! Потому что дизайнер прислал макет девелоперу в psd со свойствами слоя (у него Linux Mint и GIMP), слоя называются Слой 1… 146 и у контролов только один стейт — normal. Как они выглядят нажатыми и выделенными — выдумывай самостоятельно. Ну и конечно все нарисовано только в одном разрешении.
К слову, у меня есть куча вопросов и к технологам, и к верстальщикам, и к дизайнерам Хабра. Но это только к слову!
Мне кажется, что имея такую статью, можно показать ее дизайнеру один раз, когда одна из подобных проблем всплывает в процессе работы. И тогда половина возможных проблем во взаимоотношениях будут решены автоматически. Автор — молодец.
> б) Сглаживание шрифтов всегда должно быть отключено! И не надо меня «лечить» что кто-то из браузеров там что-то умеет.
Вы серьезно, какие хоть сколько-нибудь популярные браузеры не умеют сглаживать шрифты?
Вы серьезно, какие хоть сколько-нибудь популярные браузеры не умеют сглаживать шрифты?
Браузеры не умеют сглаживать как фотошоп, так что во избежание гемора в дальнейшем лучше его отключить.
На Маке практически один-в-один.
Один в один как что? Как Sharp, Crisp, Smooth или Strong?
Crisp.
На самом деле не важно где как, главное — без сглаживания почти нигде не осталось.
На самом деле не важно где как, главное — без сглаживания почти нигде не осталось.
только почему тогда каждый второй новый сайт отключает сглаживание?
Где это?..
-webkit-font-smoothing
вы преувеличили про «каждый второй»
Имелись ввиду сайты. Глупо было бы спрашивать про свойства — в каждом западном блоге о дизайне/вебе уже написали и про
Причем, ни один из сайтов, которые я видел, не отключал сглаживание, а выбирал значение
font-smoothing, и про text-rendering.Причем, ни один из сайтов, которые я видел, не отключал сглаживание, а выбирал значение
antialiased.Интересно, минусуют, наверное, те, кто сразу бежит отключать сглаживание шрифтов после установки винды?..
Вот-вот. Как это, шрифты без сглаживания? Как в Win98? Вот так?
Скрытый текст
У меня дома 19' ЭЛТ и ХР — вопросы? Или думаете таких мало? Или это не универсальное решение?
1600x1200
Ок, Ваше решение данной проблемы? Какой тип сглаживания следует использовать дизайнеру? чтобы это адекватно отображалось во всех браузерах и ОС? Да ещё с учётом того, что в той же «семёрке» это сглаживание какждый (кто долезает до этих настроек) подгоняет визуально под свой вкус и цвет?
С «none» в ФШ никогда проблем не было, с любым другим типом — куча, вплоть до невозможности вместить текст в жёстко заданные размеры блока.
Ок, Ваше решение данной проблемы? Какой тип сглаживания следует использовать дизайнеру? чтобы это адекватно отображалось во всех браузерах и ОС? Да ещё с учётом того, что в той же «семёрке» это сглаживание какждый (кто долезает до этих настроек) подгоняет визуально под свой вкус и цвет?
С «none» в ФШ никогда проблем не было, с любым другим типом — куча, вплоть до невозможности вместить текст в жёстко заданные размеры блока.
Конечно, нет. Т.е. вы предлагаете изначально дизайнеру (а за ним и верстальщику) брать за ориентир старую ОС и недоступность каких-то технологий? При том, что Natural ClearType включен везде на новых ОС сразу.
А «Natural ClearType» работает исключительно для браузеров, и игнорирует рендеринг текста в ФШ?
Crisp тоже создает проблемы, тот же ариал в 12 px bold при цвете #000000 выглядит как серый в фотошопе, но будет выглядеть как черный в вебе. Да и вообще этот crisp вызывает у меня субъективное ощущение что, с моим зрением что-то случилось и все расплылось )
Для меня проблема решала тем, что клиента предупреждали о подобной разнице, благо были сплошь адекватные клиенты )
Для меня проблема решала тем, что клиента предупреждали о подобной разнице, благо были сплошь адекватные клиенты )
Это фотошоп не умеет сглаживать как браузеры. Сглаживание шрифтов это вообще вещь патентованна разработчиков операционной системы. Фотошоп не имеет права юзать ту, что придумал microsoft. А на линуксе для меня так вообще вырви глаз а не сглаживание. Но это все сугубо индивидуально. Здесь много людей, кто считают сглаживание в линуксе хорошим.
Вероятно, вы не видели нормального линуксового сглаживания, например, с infinality. Я очень много настраивал и cleartype, и infinality, и скажу вам, что на шрифты в windows смотреть больше не могу.
Вот ваше сообщение с моими настройками:
Вот ваше сообщение с моими настройками:
Скрытый текст
Такое ощущение, что у вас межсимвольный интервал уменьшен. Видимо это субъективно, но читать сложнее.
Спасибо, смотрю 1 в 1. Не видел в линуксе я резких шрифтов как на винде и у вас не вижу). Да уже где то обсуждали это и голосовали, все вышло и выходит просто от привычки. Посути неважно, просто еще один повод понять, что нет стандартов в сглаживании на разных платформах
i.imgur.com/vPs3Vcu.png — вот вам с профилем win7
i.imgur.com/qL4Vbdc.png — и с настройками от win7
И мне так совершенно не нравится, читать неудобно. Правда, у меня маленький экран с DPI 125, поэтому «ужирнение» шрифтов здесь более подходит. И они еще затемняются (контраст чуть меньше стандартного).
i.imgur.com/qL4Vbdc.png — и с настройками от win7
И мне так совершенно не нравится, читать неудобно. Правда, у меня маленький экран с DPI 125, поэтому «ужирнение» шрифтов здесь более подходит. И они еще затемняются (контраст чуть меньше стандартного).
Патенты тут ни причем. Субпиксельное сглаживание могут делать все, а вот брать готовые реализации (тот же ClearType — только по лицензии). Так что никто не мешает фотошопу использовать тоже субпиксельное сглаживание. Просто разработчики фотошопа исходят из того принципа, что изображение должно быть в точности одинаковое на всем железе, а субпиксельное сглаживание — штука аппаратно зависимая (и зависит от расположения субпикселей на мониторе). В особенности любят экспериментировать с субпикселями на мобильных устройствах.
А вот вам пример разного расположения субпикселей:
Нажрался я с этим сглаживанием, в результате чего пришел к следующему приему, все шрифты, размер которых меньше 17pt, (в фотошопе), сглаживание отключается, т.е. none, а те шрифты, чьи размеры больше 17pt, оставляется обычное фотошоповское сглаживание. В результате получается картинка очень похожая на то, как отображают Crome, Opera и FireFox.
Потому что ну не возможно, на картинке дизайнеры рисуют все красиво, аккуратно, а когда начинают верстать, получается ужас.
Потому что ну не возможно, на картинке дизайнеры рисуют все красиво, аккуратно, а когда начинают верстать, получается ужас.
А уж тем более, что это делается и на уровне ОС в большинстве случаев. Во всех современных — вообще дефолтно.
Причём в разных ОС и сглаживание разное будет. В MacOS больше похоже на Crisp, в Ubuntu на Strong, в Windows… не помню уже точно.
В Windows похоже на Sharp.
И то у определенной гарнитуры) нет ничего похожего. У винды сглаживаение с цветами
Ну
Патент тут и все!
Ну
Патент тут и все!
Ну так это «радуга», в идеале это должно попадать точно в субпиксель, т.е. вы не должны видеть эту радугу на своем мониторе без зума, конечно же.
Мне не позволяет скромность нагнуть человека в монитор) Пошел по другому пути.
Я о том, что это не «сглаживание с цветами» и не у windows, это называется субпиксельным сглаживанием и реализуется везде примерно одинаково.
Увы! монополист здесь микрософт.
На линуксе вы не найдете радуги в шрифтах, и именно по этому они там особенные.
А так да, субпиксельное примерно одинаковое но не с радугой)
На линуксе вы не найдете радуги в шрифтах, и именно по этому они там особенные.
А так да, субпиксельное примерно одинаковое но не с радугой)
УУУУууууу
Microsoft has several patents in the United States on subpixel rendering technology for text rendering on RGB Stripe layouts. This had caused FreeType, the library used by most current software on the X Window System, to disable this functionality by default.[5]
Apple was able to use it in Mac OS X due to a patent cross-licensing agreement.[6]
en.wikipedia.org/wiki/Subpixel_rendering
Apple was able to use it in Mac OS X due to a patent cross-licensing agreement.[6]
en.wikipedia.org/wiki/Subpixel_rendering
а вот, вру я все же похоже.
habrahabr.ru/post/173271/?reply_to=6020577#comment_6020629
Но на счет легальности подобного, я все же не уверен до конца. ( Ну само собой это чисто для галочки )
habrahabr.ru/post/173271/?reply_to=6020577#comment_6020629
Но на счет легальности подобного, я все же не уверен до конца. ( Ну само собой это чисто для галочки )
Ну хрен знает
Скрытый текст
Да да да) Я прямо выше отписал уже. Но насколько мне известно, там вопрос о том чтобы это было доступно из коробки в той же ubuntu не стоит вроде все из за тех же патентов. Может я ужо устарел.
Во:
Font Hinting patent conflict
Some open source projects such as FreeBSD or Linux, have included FreeType with font hinting functionality disabled or degraded to avoid the issue of software patents held by Apple Incorporated.[12]
Since May 2010, the last of all conflicting software patents expired,[12] allowing FreeType's TrueType font hinter to be used in open source. Many of the operating systems which disabled the renderer now give the user the option to enable it. In Fedora, freetype-freeworld was switched from the proprietary yum repository to the free repository
en.wikipedia.org/wiki/FreeType
Похоже я устарел на 3 года хотя… может это вообще не про то)
Во:
Font Hinting patent conflict
Some open source projects such as FreeBSD or Linux, have included FreeType with font hinting functionality disabled or degraded to avoid the issue of software patents held by Apple Incorporated.[12]
Since May 2010, the last of all conflicting software patents expired,[12] allowing FreeType's TrueType font hinter to be used in open source. Many of the operating systems which disabled the renderer now give the user the option to enable it. In Fedora, freetype-freeworld was switched from the proprietary yum repository to the free repository
en.wikipedia.org/wiki/FreeType
Похоже я устарел на 3 года хотя… может это вообще не про то)
Было бы просто прекрасно, если бы дизайнеры рисовали руководствуясь этим!
Но они живут на Марсе и в 80% процентах случаев используют Myriad Pro…
Но они живут на Марсе и в 80% процентах случаев используют Myriad Pro…
Мириад про стоит на 80% компах с видной. Ставьте его + font-family и будет счастье
я понимаю Россия, на лицензии всем пофиг, но всё-таки adobe запретил использовать данный шрифт везде, кроме фотошопа и в pdf-е вроде отдавать можно…
Sans serif гугл вебфонтс и не парьтесь с myriad
Последний ставится вместе с каким либо продуктом от Адоби.
Последний ставится вместе с каким либо продуктом от Адоби.
И вокруг куча людей у которых стоит Photoshop или ещё что-то от Adobe?
Myriad Pro в некоторых случаях можно заменить на Trebuchet MS.
Myriad Pro в некоторых случаях можно заменить на Trebuchet MS.
в) С умом использовать эффекты — зачем проставлять надписи один цвет, а потом использовать эффект «наложение цвета»??? Зачем использовать внешнюю и внутреннюю тень одновременно? и т.п. Градиент — ладно, оговаривается отдельно…
Потому что можно красить текст тремя способами:
1. color overlay через свойства слоя
2. CMD+backspace
3. Выделение текста и закраска через панельку цветов
Далеко не всегда удобно пользоваться одним и тем же способом. Но я не вижу сложностей в том, чтобы узнать цвет этого слоя верстальщику.
А внешняя и внутренняя тень — потому-что нужно одновременно сделать блик и тень. Эти два свойства идеально подходят для текста, например.
б) В слоях и эффектах НИ В КОЕМ СЛУЧАЕ не использовать какой-либо режим наложения слоёв кроме Normal, поскольку он зависит от нижележащих слоёв — и это распространяется даже на сведение слоёв и вставку с помощью графики. Это вообще эпично! Как влепят какой-то overlay, и выход тут один — сводить все слои и обтравливать элемент, а это, надо заметить, порой сродни отрисовке в векторе — особенно если всякие свечения/тени с большим радиусом.
Абсолютное большинство эффектов прекрасно сливается. Есть исключения, конечно, но их нужно просто отправлять обратно дизайнеру, чтобы не тупил в следующий раз.
а) Хорошо бы иметь готовый css-спрайт со всеми оформительскими элементами и проставленными направляющими — но это из области НФ!
Если вы расскажете — как это делать, я буду делать это с удовольствием.
Потому что можно красить текст тремя способами:
1. color overlay через свойства слоя
2. CMD+backspace
3. Выделение текста и закраска через панельку цветов
Далеко не всегда удобно пользоваться одним и тем же способом. Но я не вижу сложностей в том, чтобы узнать цвет этого слоя верстальщику.
А внешняя и внутренняя тень — потому-что нужно одновременно сделать блик и тень. Эти два свойства идеально подходят для текста, например.
б) В слоях и эффектах НИ В КОЕМ СЛУЧАЕ не использовать какой-либо режим наложения слоёв кроме Normal, поскольку он зависит от нижележащих слоёв — и это распространяется даже на сведение слоёв и вставку с помощью графики. Это вообще эпично! Как влепят какой-то overlay, и выход тут один — сводить все слои и обтравливать элемент, а это, надо заметить, порой сродни отрисовке в векторе — особенно если всякие свечения/тени с большим радиусом.
Абсолютное большинство эффектов прекрасно сливается. Есть исключения, конечно, но их нужно просто отправлять обратно дизайнеру, чтобы не тупил в следующий раз.
а) Хорошо бы иметь готовый css-спрайт со всеми оформительскими элементами и проставленными направляющими — но это из области НФ!
Если вы расскажете — как это делать, я буду делать это с удовольствием.
1) Вам трудно сразу задать нужный цвет тексту — а мне выкручивать увеличение на максимум и протыкивать пипеткой? (именно протыкивать — поскольку ещё сглаживание «гадит»);
2) Это нереализуемо через css — вставляйте текст картинкой. Вам по душе такой вариант?
3) Абсолютное большинство эффектов прекрасно НЕ сливается — уж поверьте! Насмотрелся…
4) Берём всю оформительскую графику и копипастим её в новый документ. Различные состояния одного элемента (ховер, фокус, клик) распологаем друг под другом по вертикали. Причём именно сам элемент, поскольку эффект (тень, например) может выходить за рамки первоначального состояния. А потом уже проводим направляющие по границам «максимального» эффекта одного элемента.
2) Это нереализуемо через css — вставляйте текст картинкой. Вам по душе такой вариант?
3) Абсолютное большинство эффектов прекрасно НЕ сливается — уж поверьте! Насмотрелся…
4) Берём всю оформительскую графику и копипастим её в новый документ. Различные состояния одного элемента (ховер, фокус, клик) распологаем друг под другом по вертикали. Причём именно сам элемент, поскольку эффект (тень, например) может выходить за рамки первоначального состояния. А потом уже проводим направляющие по границам «максимального» эффекта одного элемента.
1. Зачем тыкать пипеткой?
Type Tool на текст и клик в поле цвета — вот вам и hex нужного цвета. Никуда пипеткой не нужно тыкать.
2. Нормальные ребята простой текст так не делают. Подобные эффекты обычно висят на кнопках.
3. Не верю, потому-что знаю. Вы просто не совсем понимаете механизм.
4. Я так понимаю — это условные спрайты? Исключительно для последующей нарезки?
Type Tool на текст и клик в поле цвета — вот вам и hex нужного цвета. Никуда пипеткой не нужно тыкать.
2. Нормальные ребята простой текст так не делают. Подобные эффекты обычно висят на кнопках.
3. Не верю, потому-что знаю. Вы просто не совсем понимаете механизм.
4. Я так понимаю — это условные спрайты? Исключительно для последующей нарезки?
1. Я про это говрю — я так и хочу. Но вместо этого дизайнер включает наложение цвета, наложение градиента и прочую муть… Вот и сиди «протыкивай пипеткой».
3. Механизм чего? Как работают режимы наложения?
4. В большинстве случаев да. А иногда действительно делают png из всего файла/слоя (если он приложен, конечно).
3. Механизм чего? Как работают режимы наложения?
4. В большинстве случаев да. А иногда действительно делают png из всего файла/слоя (если он приложен, конечно).
Может, это от лени, но жутко вымораживает любовь дизайнеров к кастомным селектам-чекбоксам-радиобаттонам! Особенно когда это нужно и под ИЕ
что мешает использовать label+input?
с селектом не покатит — нужно кастомный виджет использовать
для селектов существует куча разных готовых решений в связке html+js. Да и самому можно написать, делов-то: список ul и десяток строк на js / jquery.
Вообщем вопрос не в «дизайнеры козлы делают все кастомное», а в том, что верстаки ленивые или неумеющие.
Вообщем вопрос не в «дизайнеры козлы делают все кастомное», а в том, что верстаки ленивые или неумеющие.
Это потом после кучи таких решений страница сайта весит по 15 мб без учета графики, и при загрузке страницы чуть ли не вешает браузер?
ОК. Как Вы относитесь к тому, что по блажи дизайнера стандартный селект вдруг должен раскрываться исключительно вверх? Готовое решение мнеприведите пожалуйста!
Во-первых, написать кастомный селект, который будет обладать тем же функционалом, что и нативный — это вам не дульки воробьям показывать. Например, организовать обработку нажатий клавиш клавиатуры или выбор элемента при наборе его первых символов.
Во-вторых, насколько вижу по реакции верстальщиков (я сам программист), кастомизировать готовое решение — тот еще гемор.
А стандартные селекты очень даже ничего — в бутстрапе, например, их слегка обвешивают стилями, а выглядят прилично.
Во-вторых, насколько вижу по реакции верстальщиков (я сам программист), кастомизировать готовое решение — тот еще гемор.
А стандартные селекты очень даже ничего — в бутстрапе, например, их слегка обвешивают стилями, а выглядят прилично.
больше всего не люблю когда делают для слоя, предполагаемого прозрачность на шаблоне overlay или пр.
оригинал очень трудно получить.
оригинал очень трудно получить.
> Хорошо бы иметь готовый css-спрайт со всеми оформительскими элементами и проставленными направляющими
Это не задача дизайнера,
а задача верстальщика.
Кроме того, css спрайты чем дальше тем больше уходят в прошлое.
В условиях поддержки ИЕ8+ в css спрайтах нет никакой необходимости. Это архаизм.
Это не задача дизайнера,
а задача верстальщика.
Кроме того, css спрайты чем дальше тем больше уходят в прошлое.
В условиях поддержки ИЕ8+ в css спрайтах нет никакой необходимости. Это архаизм.
тоже интересно, чем ие8+ такие особенные
Нормальной поддержкой работы с data:image/
для которой спрайты не нужны как класс, и сохраняют всю гибкость работы как с обычными изображениями без ограничений связанными с работой со спрайтами и бэкграундами.
для которой спрайты не нужны как класс, и сохраняют всю гибкость работы как с обычными изображениями без ограничений связанными с работой со спрайтами и бэкграундами.
Вы описали не веб-дизайнера, а какого-то дурачка. Веб-дизайнер по определению знает про веб-технологии и учитывает их в разработке. Так что эта статья могла бы с тем же успехом называться «за что профессионалы не любят профессионалов» и состоять из двух слов: «За непрофессионализм».
увы, но действительность такова, что не все дизайнеры представляют что такое вёрстка и с чем её есть…
встречал лично psd, в которых шапка для стандартного шаблона в 1000px состояла из 300 неадекватно подписанных и не выделенных в отдельную папку слоёв… чуть ли не каждая загогулина а фигурках была отдельным слоем и как их искать для состыковки в общее целое для меня осталось загадкой…
вообщем такой дизайнер «пошёл» лесом…
встречал лично psd, в которых шапка для стандартного шаблона в 1000px состояла из 300 неадекватно подписанных и не выделенных в отдельную папку слоёв… чуть ли не каждая загогулина а фигурках была отдельным слоем и как их искать для состыковки в общее целое для меня осталось загадкой…
вообщем такой дизайнер «пошёл» лесом…
До сих пор искренне не понимаю, зачем под верстку и дизайн нужны разные люди. Всегда сразу начинал работать с живыми шаблонами и и живым прототипом, скорость разработки морды увеличивалась очень существенно, заодно получалось избегать кучи идиотских ошибок, а также на себе чувствовать сложность реализации создаваемого решения. Хороший пилотаж при этом — авторыба на faker,js или аналогичное решение. А уж как замечательно в таких случаях проводить согласование и внесение корректив.
Есть некоторый объем знаний о верстке, который нормальный специалист может и не освоить приблизительно за год в фоновом режиме, всякие хаки на совместимость со старыми браузерами, перекомпоновка с управлением js, учет в работе frontend тестирования и т.п. Это может стать поводом чтобы пригласить высококлассного узкого специалиста привести все в порядок, выполнив 5% от общего объема работ по морде в контрактном режиме.
Еще раз, если дизайнер не владеет версткой, это означает что ему лень было что-то почитать по вечерам, а значит ему будет лень работать и дыры в матчасти своей области скорее всего шире, чем знание html/css.
Есть некоторый объем знаний о верстке, который нормальный специалист может и не освоить приблизительно за год в фоновом режиме, всякие хаки на совместимость со старыми браузерами, перекомпоновка с управлением js, учет в работе frontend тестирования и т.п. Это может стать поводом чтобы пригласить высококлассного узкого специалиста привести все в порядок, выполнив 5% от общего объема работ по морде в контрактном режиме.
Еще раз, если дизайнер не владеет версткой, это означает что ему лень было что-то почитать по вечерам, а значит ему будет лень работать и дыры в матчасти своей области скорее всего шире, чем знание html/css.
А, конечно. И фронт-энд должен — скриптики там, оптимизацию клиентскую. И что бы летал еще. Вот дураки в крупнейших продакшн-хаусах страны собрались. )
Опыт наших даунхаусов мне не очень интересен, по идее у них все вертится вокруг организации крупных b2b проектов, где производственная часть и детали ее организации это дело десятое.
Вот выдержки из требований к разработчику интерфейсов Амазон:
Basic Qualifications
An online portfolio or samples of work demonstrating experience creating great user-centered design solutions and GUI design expertise is a requirement for application
5+ years of experience as a user experience designer, interaction designer, product designer or similar role designing mobile, web, and/or other on-device applications
Experience interacting on a collaborative team and working directly with developers to implement designs
Bachelor's degree in design or equivalent professional experience
Experience with a variety of design tools such as Photoshop, Illustrator, Fireworks, Visio, Axure and Dreamweaver
Preferred Qualifications
Ability to prototype in HTML, JavaScript, CSS, Flash
Visual design expertise demonstrated through mockups and style guides
Excellent communication, presentation, and interpersonal skills
Track record of good time management, prioritizing projects and estimating work
Поясню, от черновой компоновки в виде вайрфремов на основании анализа использования — к тому что можно пощупать. Требовать раскраски в фотошопе, претендующие на некую оформленную стадию там вряд ли придет кому ни будь в голову. Так и работают дикарями.
Вот выдержки из требований к разработчику интерфейсов Амазон:
Basic Qualifications
An online portfolio or samples of work demonstrating experience creating great user-centered design solutions and GUI design expertise is a requirement for application
5+ years of experience as a user experience designer, interaction designer, product designer or similar role designing mobile, web, and/or other on-device applications
Experience interacting on a collaborative team and working directly with developers to implement designs
Bachelor's degree in design or equivalent professional experience
Experience with a variety of design tools such as Photoshop, Illustrator, Fireworks, Visio, Axure and Dreamweaver
Preferred Qualifications
Ability to prototype in HTML, JavaScript, CSS, Flash
Visual design expertise demonstrated through mockups and style guides
Excellent communication, presentation, and interpersonal skills
Track record of good time management, prioritizing projects and estimating work
Поясню, от черновой компоновки в виде вайрфремов на основании анализа использования — к тому что можно пощупать. Требовать раскраски в фотошопе, претендующие на некую оформленную стадию там вряд ли придет кому ни будь в голову. Так и работают дикарями.
Покажите ваши дизайны, пожалуйста )
А, конечно.
Мелочь: lh5.googleusercontent.com/-x6enuC7dsdQ/Tujz4tLSakI/AAAAAAAABVM/_jS-hSkMDMk/s1412/galch1.jpg
Пожирнее: lh6.googleusercontent.com/-1rcOs59KXHY/TQVkTTXc7TI/AAAAAAAABBI/S_0bQMEH5vo/s847/clifton.png
Разумеется, изготовление отдельных графических элементов, контролов и т.п. может быть трудоемкими задачами. Но прототипы подобных штук реально создавать за несколько дней и существенно изменять за то время, пока в фотошоповском прототипе к каждому линку приделывается подчеркивание другого цвета или верстальщик пытается доказать дизайнеру что он охренел с гарнитурами шрифтов.
Сейчас, от этой области, как никакой другой подверженной вкусовщине и дурости заказчиков ушел и занимаюсь в основном бэком и отдельными интересными случаями фронта.
Мелочь: lh5.googleusercontent.com/-x6enuC7dsdQ/Tujz4tLSakI/AAAAAAAABVM/_jS-hSkMDMk/s1412/galch1.jpg
Пожирнее: lh6.googleusercontent.com/-1rcOs59KXHY/TQVkTTXc7TI/AAAAAAAABBI/S_0bQMEH5vo/s847/clifton.png
Разумеется, изготовление отдельных графических элементов, контролов и т.п. может быть трудоемкими задачами. Но прототипы подобных штук реально создавать за несколько дней и существенно изменять за то время, пока в фотошоповском прототипе к каждому линку приделывается подчеркивание другого цвета или верстальщик пытается доказать дизайнеру что он охренел с гарнитурами шрифтов.
Сейчас, от этой области, как никакой другой подверженной вкусовщине и дурости заказчиков ушел и занимаюсь в основном бэком и отдельными интересными случаями фронта.
Честно говоря статья написана по мотивам прошлого века, если так рассуждать, то можно вообще никакого дизайна не делать, а лепить все в разметке. Конечно отсутствие сетки и неоптимизированная графика с оверлеями это грубые косяки, но уж почему автор опалчился на font-face мне не понятно, нужно просто уметь его готовить. С интерлиньяжем туда же, перенести из одного окошечка значение в свойство line-height не такая уж сложная задача.
Я считаю, что все эти срачи от недостатка общей культуры, и дизайнер, и верстальщик, и руководитель проекта должны быть нацелены на создание качественного продукта, если подходить к решению этой задачи сообща, то все будет замечательно, а если каждый будет дергать одеяло на себя, то хорошего будет мало.
Я считаю, что все эти срачи от недостатка общей культуры, и дизайнер, и верстальщик, и руководитель проекта должны быть нацелены на создание качественного продукта, если подходить к решению этой задачи сообща, то все будет замечательно, а если каждый будет дергать одеяло на себя, то хорошего будет мало.
Как разработчик фронтенда согласен с вами на 100%.
То есть, если у дизайнера на машине стоит «семёрка» и он считает, что Calibri «безопасный шрифт» — мне всего-то делов как сгенерить font-face? Вы вообще в курсе сколько косяков с этим фонт-фэйсом? Как «незаметно» они отрисовываются («Фрилансим» откройте), как красиво выглядят «нестандартные кегли» — 17 пикс., например.
Перенести значение интерлиньяжа несложно, только что делать если двустрочный текст сделам двумя блоками с параметрами «16пикс/100пикс» просто сдвинутыми слоями?
Перенести значение интерлиньяжа несложно, только что делать если двустрочный текст сделам двумя блоками с параметрами «16пикс/100пикс» просто сдвинутыми слоями?
Я сомневаюсь что калибри — шрифт, разрешенный к использованию в своих проектах. Поэтому это уже причина для его отказа.
Font squirl, например, хренас два согласится сделать пакет из Myriad Pro, сославшись на лицензию.Во второых это не шрифт для веба.
Нужно же договорится, что есть шрифты для веба. Это безопасные + гугл веб фонтс. Все остальное — глюкаво и тяжеловесно.
Плюс, ниша пиксельных шрифтов уже занята arial +tahoma и врятли какой шрифт лучше впишеться в пиксельную сетку меньше 13px.
Font squirl, например, хренас два согласится сделать пакет из Myriad Pro, сославшись на лицензию.Во второых это не шрифт для веба.
Нужно же договорится, что есть шрифты для веба. Это безопасные + гугл веб фонтс. Все остальное — глюкаво и тяжеловесно.
Плюс, ниша пиксельных шрифтов уже занята arial +tahoma и врятли какой шрифт лучше впишеться в пиксельную сетку меньше 13px.
С фонт-фейсом все в порядке, есть проблема с некачественными шрифтами, сконверченными из растровых ттф, да такой фонт-фейс шрифт выглядит прилично только в стандартных размерах и обычно больших. Но ттф это старье, используйте otf и все будет отлично.
Да, тут придется подгонять, ясно что если мы говорим допустим о двухстрочном заголовке, такая конструкция выглядит несколько странно, но если это заголовок и параграф, то в фотошопе просто так удобнее работать с текстом.
Да, тут придется подгонять, ясно что если мы говорим допустим о двухстрочном заголовке, такая конструкция выглядит несколько странно, но если это заголовок и параграф, то в фотошопе просто так удобнее работать с текстом.
д) Из текстовых эффектов допустима лишь тень, и всё что с её возможностью можно эмулировать (свечение и обводку) — но что-то одно, сами понимаете — «работающее» свойство text-shadow можно задать только один раз.
Кэп подсказывает, что можно задавать несколько теней, через запятую. Так что, можно и обводу, и свечение реализовать одновременно
Причем, если не считать ИЕ (до 10), то уже года 2 можно.
Не надо докапываться до мелочей. Как Вы себе представляет нормальную вёрстку с
<!--[if lte IE 10]>???Прекрасно представляю, не все проекты требуют поддержки IE10-
А причём тут тогда эта конкретика? Порой и IE6 приходится поддерживать…
При чем тут поддержка ИЕ6, если человек пишет о том, что любой браузер, который поддерживает
В ИЕ6—9 вообще нет поддержки
text-shadow (причем, не только сегодня, но и вчера, и позавчера) дает вам возможность перечислить их сколько угодно и все будет работать.В ИЕ6—9 вообще нет поддержки
text-shadow, вы прекрасно сами знаете почему, а в 10 уже сразу реализовано и с multiple-фичами.
б) Сглаживание шрифтов всегда должно быть отключено! ...
Сейчас макеты с отключенным сглаживанием вызовут куда больше вопросов, чем небольшая разница в рендеринге текста в браузере и в макете. Клиентам привычней видеть сглаженные шрифты. Текст без сглаживания — это же вырвиглаз и ахтунг, особенно если шрифт с засечками и в малом кегле. Мы живем в 2013, а не в 2005, ку-ку!)
г) Отличный от дефолта (100%) межбуквенный/межсловный интервал тоже заставляет резко напрячься...
Напрягаться не нужно, ставьте в em-ах нужные значения. То же касается и интерлиньяжа. Чаще всего приходится изменять стандартные значения, например интерлиньяж в 1.1-1.2em, и кернинг на -0.01em. А то стандартные совсем не кайфовые.
д) Из текстовых эффектов допустима лишь тень, и всё что с её возможностью можно эмулировать (свечение и обводку)...
Зависит от задачи. Если подразумевается, что текст статичный и никогда изменяться не будет, то там можно хоть заливку горошком, и текст этот сделать картинкой.
Мне, как дизайнеру, 2 года верстки своих и чужих макетов, дали понять, что практически все верстаемо :)
Сейчас макеты с отключенным сглаживанием вызовут куда больше вопросов, чем небольшая разница в рендеринге текста в браузере и в макете. Клиентам привычней видеть сглаженные шрифты. Текст без сглаживания — это же вырвиглаз и ахтунг, особенно если шрифт с засечками и в малом кегле. Мы живем в 2013, а не в 2005, ку-ку!)
г) Отличный от дефолта (100%) межбуквенный/межсловный интервал тоже заставляет резко напрячься...
Напрягаться не нужно, ставьте в em-ах нужные значения. То же касается и интерлиньяжа. Чаще всего приходится изменять стандартные значения, например интерлиньяж в 1.1-1.2em, и кернинг на -0.01em. А то стандартные совсем не кайфовые.
д) Из текстовых эффектов допустима лишь тень, и всё что с её возможностью можно эмулировать (свечение и обводку)...
Зависит от задачи. Если подразумевается, что текст статичный и никогда изменяться не будет, то там можно хоть заливку горошком, и текст этот сделать картинкой.
Мне, как дизайнеру, 2 года верстки своих и чужих макетов, дали понять, что практически все верстаемо :)
Мне достаточно термина «совсем не кайфовые»…
Полностью согласен. Да и вообще проблема притянута за уши я считаю.
Текст без сглаживания — это же вырвиглаз и ахтунг, особенно если шрифт с засечками и в малом кегле. Мы живем в 2013, а не в 2005, ку-ку!)
Автор забыл указать, что нельзя использовать нестандартные сглаживания. Сглаживание шрифтов для отображения на экране никуда не денется. Это свойство ОС.
Чаще всего приходится изменять стандартные значения, например интерлиньяж в 1.1-1.2em, и кернинг на -0.01em.
0.01em будет работать только в firefox. В остальных это превратится 1px либо не даст эффекта.
Про резиновые макеты — в точку. Ужасно бесит, когда приходится додумывать самому, что тянуть а что нет.
Довольно много уже было подобных статей, но все упиралось в уровень компетенции одних — не могут объяснить как это сделать в фотошопе, а просто злятся. И других, которые понятия не имеют что такое html.
Рискую быть заминусованным в ноль, но… За свою практику я отрисовал штук 100 дизайнов, и примерно столько же отверстал (от визиток до веб-сервисов), как своих так и чужих. И все, что мне хочется сказать в ответ на ваш эпос: хватит ныть! Это и есть ваша работа.
Ну побольшому счету проблема есть, но она ровно в той степени в некомпетенции которой обвиняют друг друга верстальщики-дизайнеры.
Хотя сдается мне, что дизайнеру все же нужно больше знать что делает верстальщик, чем наоборот, ибо он идет перед верстальщиком и дожен избегать шагов назад.
Хотя сдается мне, что дизайнеру все же нужно больше знать что делает верстальщик, чем наоборот, ибо он идет перед верстальщиком и дожен избегать шагов назад.
Как выше было замечено — это вопрос обоюдной компетенции, взаимопонимания и выработанного техпроцесса. Если у кого-то вздуывается самомнение, или появлется мысль «а после меня хоть трава не расти», то это хреново и это ужасно скажется на результате.
Но я просто не верю, что у двух хороших профессионалов такие проблемы могут возникнуть, и видел тому множество доказательств.
Все, абсолютно, на мой взгляд тезисы в статье не «табу», а «ориентиры». И все можно смело нарушать, если понимать последствия. Собственно, я сам делал (и иногда делаю) по 15 оверлеев-градиентов на макет, и сам их верстал. И мне в голову не приходило думать, что «так делать не надо». Надо уметь работать в фотошопе, мне кажется.
Гнев и раздражение больше вызывает некомпетентность, пофигизм и непрофессионализм, а не оверлеи, непрорисованная резина и кастомные шрифты с интервалами.
Но я просто не верю, что у двух хороших профессионалов такие проблемы могут возникнуть, и видел тому множество доказательств.
Все, абсолютно, на мой взгляд тезисы в статье не «табу», а «ориентиры». И все можно смело нарушать, если понимать последствия. Собственно, я сам делал (и иногда делаю) по 15 оверлеев-градиентов на макет, и сам их верстал. И мне в голову не приходило думать, что «так делать не надо». Надо уметь работать в фотошопе, мне кажется.
Гнев и раздражение больше вызывает некомпетентность, пофигизм и непрофессионализм, а не оверлеи, непрорисованная резина и кастомные шрифты с интервалами.
Я в конце пояснил к чему это. Зачем пытаться обвинять верстальщика в не компетенции. Пусть даже на Ваш взгляд он сам должен лепить css-спрайты. Из всего софта, мне больше всего приходилось сидеть в ФШ (не только как верстальщику) — я смогу решить подавляющее большинство подобных проблем. Но я упираю на 2 момента:
1) Это время разработки. Верстальщику чтобы «въехать» в макет и реализовать все «плюшки» дизайнера, может понадобится и три дня. В то время как самому дизайнеру привести свой же собственный макет в удобоваримый вид вполне хватит и пары часов. Это не стоит учитывать?
2) Я не телепат. И я готов даже корректировать дизайн в соответсвии с технологией, но только чтобы потом дизайнер или заказчик не стали в позу и не стали обвинять «а тут мы хотели цветочки».
Проблемы отчасти решаются взаимодействием «по горизонтали» — когда можно напрямую обратится к дизайнеру. Но, во-первых, это не всегда возможно, а во-вторых, бывают не слишком вменяемые дизайнеры ("-Я хужожник, а у вас просто руки из одного места растут!").
1) Это время разработки. Верстальщику чтобы «въехать» в макет и реализовать все «плюшки» дизайнера, может понадобится и три дня. В то время как самому дизайнеру привести свой же собственный макет в удобоваримый вид вполне хватит и пары часов. Это не стоит учитывать?
2) Я не телепат. И я готов даже корректировать дизайн в соответсвии с технологией, но только чтобы потом дизайнер или заказчик не стали в позу и не стали обвинять «а тут мы хотели цветочки».
Проблемы отчасти решаются взаимодействием «по горизонтали» — когда можно напрямую обратится к дизайнеру. Но, во-первых, это не всегда возможно, а во-вторых, бывают не слишком вменяемые дизайнеры ("-Я хужожник, а у вас просто руки из одного места растут!").
Момент «Я не телепат» должен быть на первом месте. Если неэффективно, но все же с результатом потраченное время ещё более-менее приемлемо, то зря потраченное время из-за того, что кто-то не потрудился свою задумку объяснить (то же поведение макета при резине) приемлемым не должно быть.
1) Цифры с потолка какие-то. 3 дня, пару часов… пример бы какой-нибудь на тему 3 дней глянул. Если в проекте ~20 макетов, там одни слои можно день переименовывать, не говоря уже о сведении эффектов, разных макетов для резины и комментировании всех интервалов))
2) Есть же ТЗ, есть постановка задачи. Все что не декларировано явно, обычно интерпритируется в меру собственной испорченности и лени. Обычно так происходит. Сразу не сказал — сам дурак.
Честно говоря, я реально не понимаю, нафига делать 80% того, что вы описали. Просто не понимаю. На счет остальных 20% — искренне считаю, что это работа верстальщика. Ясен пень, что состояние кнопок надо показать, и динамические элементы надо обязательно продемонстрировать во всех состояниях — об этом и речи нет. Но какие-то пояснительные записки, 2 варианты макета для резины (адаптивка не в счет), то сводить, то не сводить…
2) Есть же ТЗ, есть постановка задачи. Все что не декларировано явно, обычно интерпритируется в меру собственной испорченности и лени. Обычно так происходит. Сразу не сказал — сам дурак.
Честно говоря, я реально не понимаю, нафига делать 80% того, что вы описали. Просто не понимаю. На счет остальных 20% — искренне считаю, что это работа верстальщика. Ясен пень, что состояние кнопок надо показать, и динамические элементы надо обязательно продемонстрировать во всех состояниях — об этом и речи нет. Но какие-то пояснительные записки, 2 варианты макета для резины (адаптивка не в счет), то сводить, то не сводить…
Дизайнеру наперед, конечно, думать необходимо. Но, мне кажется, что еще и верстальщику надо ориентироваться на задачу, а не пытаться прогибать дизайнера под любимые библиотеки, фреймворки, доступные шрифты, и незапарные «дефолтные» формы.
Собственно, это и есть работа фронтендщика и за это деньги платят. А то как был бы чудесен мир с одним браузером и дизайнами, которые заверстываются в одних стилях bootstrapa без строчки css.
Собственно, это и есть работа фронтендщика и за это деньги платят. А то как был бы чудесен мир с одним браузером и дизайнами, которые заверстываются в одних стилях bootstrapa без строчки css.
Надо в том случае если за «непрогибание» деньги платят. Грубо говоря, если его часовой рейт заказчика устроил и вопросов «а что так долго?» он задавать не будет, не понимая, что pixel perfect адаптивная кроссбраузерная (в разумных пределах) верстка в отдельных случаях может реализовываться на порядки дольше чем вроде бы на непрофессиональный взгяд сильно не отличающейся. Например, в случае требования чтобы все контролы форм во всех современных (начиная от IE6) браузерах в паре десятков ОС и DE выглядели одинаково.
Вообще, я рассуждал в контексте ситуации веб-студии или комманды разработки. В случае, если речь идёт о фрилансе, то тут вообще, на мой взгляд, ситуация иная: «быстро спи**ил и ушел...». Как то так.
По большому счету и дизайнер то тоже никому ничего не должен — он работу сделал, её приняли, деньги заплатили. Думать о том, кто и как это будет верстать, не в его шкурно-корыстных интересах. Дизайнеру то от этого даже косвенного профита нету, его задача картинку продать, что он и сделал.
Наверное, было бы професисонально, честно и благородно вылизать макет и потратить N-часов на ген-уборку, но… а дизайнеру за это заплатят?
По большому счету и дизайнер то тоже никому ничего не должен — он работу сделал, её приняли, деньги заплатили. Думать о том, кто и как это будет верстать, не в его шкурно-корыстных интересах. Дизайнеру то от этого даже косвенного профита нету, его задача картинку продать, что он и сделал.
Наверное, было бы професисонально, честно и благородно вылизать макет и потратить N-часов на ген-уборку, но… а дизайнеру за это заплатят?
Да даже не фриланс, а работа верстальщиком на окладе, а менеджер ходит и нудит «а что так долго? в прошлый раз за неделю сделал, а теперь месяц возишься». Или ему нужно ориентироваться на результат и задачу с отступлением от макета (и тот же менеджер, да ещё на пару с дизайнером начнут орать «тут пиксель не тот») или в неоплачиваемое время верстать?
Так вы поймите, менеджер так же ходит и нудит над дизайнером, который в попыхах сохраняет файл design_v12.5_complited_4.psd, с которым ему весь моск съели на протяжении последних 6 недель, и в гробу он видал счастье хоть еще раз отрыть этот макет в фотошопе.
Я не оправдываю дизайнеров, но несколько странно аппилировать к таким вещам) Его проблема нарисовать кастомный чекбокс, ваша — заверстать. И, да, это требует времени. За которое обычно платят. Если не платят/не понимают/гнут, значит, ваш КО, надо менять проект/менеджера/работу или учиться лучше продавать свои скиллы.
Я не оправдываю дизайнеров, но несколько странно аппилировать к таким вещам) Его проблема нарисовать кастомный чекбокс, ваша — заверстать. И, да, это требует времени. За которое обычно платят. Если не платят/не понимают/гнут, значит, ваш КО, надо менять проект/менеджера/работу или учиться лучше продавать свои скиллы.
Какая-то однобокая позиция. А над верстальщиком менеджер не ходит и не нудит? Только с Вашей позиции получается что дизайнеру надо побыстрее спихнуть «абы что», а верстальщику надо это «абы что» превратить в удобоваримый вид и ещё вложится по времени… А всем понравится если вёрстка будет со стандартными элементами форм? Ничего, на бэкэнде же поправят…
Да это у вас, простите, какая-то иждивенческая позиция: «раз дизайнер может упростить мне жизнь, значит должен». Все что дизайнер должен, так это сделан офигенный, шикарный, технчески грамотный дизайн. А фронтендщик сделать рабочий веб-интерфейс из макета.
Я чесслово не понимаю, нафига дизайнеру заморачиваться с перекрашиванием текстовых полей, сведением слоев только потому, что кому-то лень пипеткой ткнуть? Вы правда полгаете, что у других спецов проблем нет?
Это так же глупо, как программисты будут насиловать верстальщика в том, чтобы он заверстал все формы под стандартный вывод формпроцессор феймворка, который они используют. И хрен с ним, что займет 2 дня. А что?
Может, значит должен. Им ведь «еще дольше вывод форм по всему проекту оформлять». Или написать весь аякс на проекте с json-заглушками. Или верстку сдавать прямо в шаблонизаторе фреймворка или системы.
Я чесслово не понимаю, нафига дизайнеру заморачиваться с перекрашиванием текстовых полей, сведением слоев только потому, что кому-то лень пипеткой ткнуть? Вы правда полгаете, что у других спецов проблем нет?
Это так же глупо, как программисты будут насиловать верстальщика в том, чтобы он заверстал все формы под стандартный вывод формпроцессор феймворка, который они используют. И хрен с ним, что займет 2 дня. А что?
Может, значит должен. Им ведь «еще дольше вывод форм по всему проекту оформлять». Или написать весь аякс на проекте с json-заглушками. Или верстку сдавать прямо в шаблонизаторе фреймворка или системы.
То, что вы описали — это нормальная ситуация для связки программист-верстальщик.
Если нужно, верстальщик переделывает структуру, пока она не станет оптимальной для шаблонизатора, всяких js-плюшек и ajax-обновлений. Он же не знает наперед, как я буду организовывать все эти механизмы, поэтому работает параллельно со мной.
Также нет ничего странного в том, что верстальщик верстает прямо в студии поверх уже рабочих вьюх — это по-моему самый оптимальный вариант, когда работа идет через контроль версий, и программисту потом не нужно копаться в верстке.
Если нужно, верстальщик переделывает структуру, пока она не станет оптимальной для шаблонизатора, всяких js-плюшек и ajax-обновлений. Он же не знает наперед, как я буду организовывать все эти механизмы, поэтому работает параллельно со мной.
Также нет ничего странного в том, что верстальщик верстает прямо в студии поверх уже рабочих вьюх — это по-моему самый оптимальный вариант, когда работа идет через контроль версий, и программисту потом не нужно копаться в верстке.
Отчасти согласен с вами. Часто это бывает оптимально, особенно на последних стадиях, когда бекенд-фронтенд сливаются, особенно, когда верстальщик кое что понимает в бекенде. Хотя у нас верстка идёт отдельным репозиторием в ГИТе, и пилиться-фиксится-дорабатывается отдельно.
Но я пытаюсь подчернуть, что это частный случай и вопрос организации, сложившихся традиций, и навыков. И если так процесс складывает, и складывается эффективно — отлично. Если нет, то скорее всего этого требовать не нужно. На моей практике он всегда складывался удачно, но бывало и наоборот.
Но я пытаюсь подчернуть, что это частный случай и вопрос организации, сложившихся традиций, и навыков. И если так процесс складывает, и складывается эффективно — отлично. Если нет, то скорее всего этого требовать не нужно. На моей практике он всегда складывался удачно, но бывало и наоборот.
Да это у вас, простите, какая-то иждивенческая позиция: «раз дизайнер может упростить мне жизнь, значит должен». Все что дизайнер должен, так это сделан офигенный, шикарный, технчески грамотный дизайн. А фронтендщик сделать рабочий веб-интерфейс из макета.
Собственно топик о том, что многие дизайнеры по мнению верстальщиков делают пускай офигенные, шикарные, но технически неграмотные дизайны. Дизайнеры в большинстве своем считают себя (имхо) художниками, забывая что эта профессия художественно-техническая, что psd-файд это не инструмент передачи «скриншота» их видения, а часть проектно-технической документации, посредством которой они должны определить другим участникам проекта некоторые формальные качества (в том числе взаимосвязи элементов) продукта. С технически грамотным дизайном глядя на верстку всегда можно ткнуть пальцем и сказать «тут ты налажал, в дизайне не так зафиксировано», а не «тут ты налажал, дизайнер имел в виду другое, мог бы догадаться». С технически грамотным дизайном верстальщик должен выступать с предложениями типа «давайте сделаем поведение этого элемента в таких условиях немного другим, чуть проще, иначе этот элемент я три дня буду „рисовать“», а не с вопросами «а как этот элемент должен себя вести в таких условиях?».
А насчет верстки в шаблонизаторе фреймворка или системы — так одной из причин появления шаблонизаторов и было желание снять с программистов процесс натягивания верстки на основном языке системы, а одним из требований к шаблонизаторам «верстальщик должен быстро синтаксис освоить, ему не нужно вникать в тонкости языка общего назначения, в идеале шаблонизатор вообще не должен требовать навыков программирования больших чем нужно для собственно верстки» (в холиварах нативная шаблонизация против шаблонизаторов это очень частый аргумент). В идеале, программисту вообще нет нужды заглядывать в шаюлоны — у него есть документация, где описано что он должен шаблону передать и в каком виде, всё остальное не его забота.
Это называется не «телепатия», а «разработка». И когда люди занимаются «разработкой», то им как правило приходится придумывать оригинальные идеи, искать решения, и творчески мыслить.
Почему-то, все полагают, чуть ли не возлагают на дизайнера необходимость знания всех аспектов верстки, а верстальщик как бы не при делах — он в дизайне не в зуб ногой. И даже не в состоянии подобрать шрифтовую пару, определить интервал между строками, подсветить активную кнопку, и решить, что тянуть (или принять решение «не тянуть»). Верно?
Впрочем, если воспринимать верстальщика как обезъянку по конвертации psd > html, то да, все верно.
Почему-то, все полагают, чуть ли не возлагают на дизайнера необходимость знания всех аспектов верстки, а верстальщик как бы не при делах — он в дизайне не в зуб ногой. И даже не в состоянии подобрать шрифтовую пару, определить интервал между строками, подсветить активную кнопку, и решить, что тянуть (или принять решение «не тянуть»). Верно?
Впрочем, если воспринимать верстальщика как обезъянку по конвертации psd > html, то да, все верно.
Сейчас нарисовалась такая классная дискицплина как «дизайнер интерфейсов» — это когда человек придумывает интерфейс, оформляет его, и анимирует его. Это во многом правильный подход: специалист тянет свою мысль «от» и «до», не нуждяюсь в бесконечных объяснениях, согласованиях, спорах и т.д… Один минус — специалистов таких единицы.
Это к тому, что все зависит от внутренней согласованности связи «дизайнер&фронтендщик», внешних требований, бюджетов, сроков, загрузки обоих участников, выработанному процессу разработки внутри компании и обоюдной компетенции. Ну и личных привычек.
Оба специалиста решают общую задачу — сделать классный интерфейс, который будет отлично выглядеть и работать в браузере. Как они поделять зоны ответственности, доверие и обязательства друг между другом — вопрос уже внутренний. Зачастую, фронтендщик лучше чувствует «динамику» страницу, чем дизайнер, сам проявляет инициативу и делает решения, которые с восторгом одобряет дизайнер.
Это к тому, что все зависит от внутренней согласованности связи «дизайнер&фронтендщик», внешних требований, бюджетов, сроков, загрузки обоих участников, выработанному процессу разработки внутри компании и обоюдной компетенции. Ну и личных привычек.
Оба специалиста решают общую задачу — сделать классный интерфейс, который будет отлично выглядеть и работать в браузере. Как они поделять зоны ответственности, доверие и обязательства друг между другом — вопрос уже внутренний. Зачастую, фронтендщик лучше чувствует «динамику» страницу, чем дизайнер, сам проявляет инициативу и делает решения, которые с восторгом одобряет дизайнер.
Принимать такие решения — это 100% работа впустую, потому что потом придется переделывать.
Хм. Надо будет сказать своему верстальщику переделать макетов 200 за весь последний год, тогда. А то он не знал, что переделывать то надо, когда решения принимал…
Если у вас свой верстальщик, которому и вы доверяете, и он знает в чем вы ему доверяете, а что лучше у вас уточнить (и не побоится этого сделать) и при этом вы являетесь «высшей инстанцией», то проблемы практически нет (кроме чисто утилитарных вещей типа расстановки направляющих, которая отняла бы у вас меньше времени, чем у него, даже с учетом большего вашего почасового рейта). Но если у вас с верстальщиком связи вообще нет, то думаю, не исключены ситуации когда от общего заказчика (пускай даже внутреннего) вы потребуете удалить любое упоминание себя как автора дизайна как порочащую ваше репутацию сведения.
Ну, когда связи между этими двумя парнями нет, это или фриланс, где каждый сам за себя, или какая-то совсем невеняемая бюрократизированная организация.
О чём вы говорите, с таким встречался, да. И когда мы продаем клиентам свой дизайн (когда те говорят «скодим сами»), мы всегда настоятельно советуем купить и верстку. Сильно «советуем». Да. Но в случае «хрен пойми кто верстать будет», хоть замусоль макет до смерти со всех сторон — это не может гарантировать того, что его клево сверстают))
О чём вы говорите, с таким встречался, да. И когда мы продаем клиентам свой дизайн (когда те говорят «скодим сами»), мы всегда настоятельно советуем купить и верстку. Сильно «советуем». Да. Но в случае «хрен пойми кто верстать будет», хоть замусоль макет до смерти со всех сторон — это не может гарантировать того, что его клево сверстают))
О как! Да вы чуть ли не шантажем занимаетесь… Вы ещё, если клиент хочет «сам закодить» в жпегах дизайн отдавайте!
Какой шантаж? О качестве и результате заботимся. Нужен классный дизайн — надо понимать, что одной картинки недостаточно, вот и все.
Нужно понимать, что картинка только часть дизайна :) Дизайн — художественно-техническое решение, а не художественное. Часть общей проектной документации, документ, картинка в котором лишь часть, важная, но не единственная. Если в ТЗ на дизайн есть требование «резины», то в «картинке» или в поясняющей записке должно быть указано как дизайнер видит её реализацию, как должен макет изменяться при разных размерах окна. Если есть блоки одинаковой ширины, особенно геометрически явно не связанных (левый и правый сайд бар, например), то должно быть указано это случайность или при любых изменениях они должны быть одинаковой ширины. Если есть кастомные контролы, то это тоже должно быть указано, как и их изменения в различных состояниях, а не только в зафиксированном на картинке".
Вот бы здорово было, если бы вы написали о том, как легко решить указанные проблемы, вот например мои предложения:
Не остается места на вертикальный скроллбар? Попробуйте просто уменьшить ширину одного один из столбиков на 24px, делов-то. Не получается? Сделайте для тела страницы «overflow:hidden», пусть дизайнер с менеджером там разбираются кто из них не прав. На маке скроллбары на ширину содержимого кстати не влияют.
Нет направляющих, чтобы так «раз провести линейкой между ними»? И отлично! Используйте любые приблизительно подходящие значения: возраст вашей кошки, число Пи, любые круглые числа, никаких 239, сегодня вы в ударе!
Небезопасная гарнитура? Пишите «font-face: „Опасная гарнитура, клац-клац“, sans-serif» и вашей главной задачей станет выбор напитка, лучше всего подходящего для употребления на тот период, пока менее опытные сотрудники устраивают баталии. Ведь перечисление гарнитур через запятую как раз и предназначено для случаев, когда шрифты могут отсутствовать на клиентской системе.
Интерлиньяж указывается при помощи CSS свойства «line-height», межбуквенное расстояние — «letter-spacing». Легко!
Для оверлеев действительно нет верного алгоритма решения проблемы, но например режим наложения «Multiply», который по умолчанию используется для теней в Photoshop-е, гарантирует, что тень никогда не будет светлее фона, но ведь на то она и тень. Другими словами, если заливка слоя темнее фона, волноваться не о чем.
Для выделения элементов состоящих из множества слоев (если вы работаете в Photoshop-e), можно использовать Ctrl + выделение мышью. Выделятся все слои попавшие в прямоугольник выделения, затем Ctrl(Cmd)+E для их слияния.
Не все проблемы, конечно, можно решить самостоятельно, но в общем круто, на мой взгляд, когда технари стараются решить проблему эффективно, поигрывая умищем, не повышая энтропию и не делая при этом одолжения столь же важным для успешного результата гуманитариям.
Не остается места на вертикальный скроллбар? Попробуйте просто уменьшить ширину одного один из столбиков на 24px, делов-то. Не получается? Сделайте для тела страницы «overflow:hidden», пусть дизайнер с менеджером там разбираются кто из них не прав. На маке скроллбары на ширину содержимого кстати не влияют.
Нет направляющих, чтобы так «раз провести линейкой между ними»? И отлично! Используйте любые приблизительно подходящие значения: возраст вашей кошки, число Пи, любые круглые числа, никаких 239, сегодня вы в ударе!
Небезопасная гарнитура? Пишите «font-face: „Опасная гарнитура, клац-клац“, sans-serif» и вашей главной задачей станет выбор напитка, лучше всего подходящего для употребления на тот период, пока менее опытные сотрудники устраивают баталии. Ведь перечисление гарнитур через запятую как раз и предназначено для случаев, когда шрифты могут отсутствовать на клиентской системе.
Интерлиньяж указывается при помощи CSS свойства «line-height», межбуквенное расстояние — «letter-spacing». Легко!
Для оверлеев действительно нет верного алгоритма решения проблемы, но например режим наложения «Multiply», который по умолчанию используется для теней в Photoshop-е, гарантирует, что тень никогда не будет светлее фона, но ведь на то она и тень. Другими словами, если заливка слоя темнее фона, волноваться не о чем.
Для выделения элементов состоящих из множества слоев (если вы работаете в Photoshop-e), можно использовать Ctrl + выделение мышью. Выделятся все слои попавшие в прямоугольник выделения, затем Ctrl(Cmd)+E для их слияния.
Не все проблемы, конечно, можно решить самостоятельно, но в общем круто, на мой взгляд, когда технари стараются решить проблему эффективно, поигрывая умищем, не повышая энтропию и не делая при этом одолжения столь же важным для успешного результата гуманитариям.
Для оверлеев действительно нет верного алгоритма решения проблемы,
Есть. Но это флеш или js библиотека. Честно говоря, любой эффект наложения прекрасно дублируется через normal в соответсвующих вариациях параметров. Если есть примеры готов продемонстрировать. Сложности есть с color dodge но это обычно крайне малоразличимый эффект при подгонке через normal.
Как рационально! Дизайнер не удосужился нормально сгенерировать эффект — а мы будем лепить алгоритмы пересчёта RGB-триад…
любой multiply?
пытаться решить такие проблемы это хорошо, но очень часто это приводит к двойной трате времени, т.к. верстальщик исправил баг на то как ему это видится, а дизайнер с заказчиком просто негодуют «o_O!!! а что же ты тут наделал???». и затем приходится ожидать исправлений дизайнера и исправлять косяки, а порой и делать заново…
Конечно, это происходит не всегда, но в скользких случаях лучше сразу «пнуть» дизайнера, чем делать работу дважды и получать от заказчиков и начальства…
Конечно, это происходит не всегда, но в скользких случаях лучше сразу «пнуть» дизайнера, чем делать работу дважды и получать от заказчиков и начальства…
Какие, на ваш взгляд, из перечисленных мной рецептов могут привести к такого рода негодованию?
к примеру
С остальным полностью согласен)))
p.s. не любят они изменениясвоей прелести своих макетов)))
Попробуйте просто уменьшить ширину одного один из столбиков на 24px, делов-то..
С остальным полностью согласен)))
p.s. не любят они изменения
Прошу прощения, друзья, за дезинформацию касательно режима multiply. Этот режим перемножает цвета пикселей (src.rgb * dst.rgb), поэтому последнее предложение в абзаце не всегда истинно. Также вместо «font-face» подразумевалось свойство «font-family» (забыл заменить перед отправкой).
Ох вы себе не представляете со сколькими «дизайнерами» мне приходилось работать. Как вспомню — открываешь макет 4237x3917px с кучей какой-то непонятной хрени, которую ты (программист) бы мог нарисовать гораздно лучше — аж плакать хочется.
Так не работайте с такими: )
Зато прокачались не слабо, верно? Левой пяткой, наверное, по клаве вышабаете такое с закрытыми глазами?)
Самое веселое что никто не рисует по правилам потому что их нет. Точнее есть некое сообщество и выстраданный алгоритм действий, ну так чтобы официально где то было написано на каком то сайте… и все на него ссылаются — все правила — это сугубо от компьюнити или личный опыт большой. А в компьюнити попадешь когда чувствуешь в себе неуверенность, а откуда она у молодых львов?
Самое веселое что никто не рисует по правилам потому что их нет. Точнее есть некое сообщество и выстраданный алгоритм действий, ну так чтобы официально где то было написано на каком то сайте… и все на него ссылаются — все правила — это сугубо от компьюнити или личный опыт большой. А в компьюнити попадешь когда чувствуешь в себе неуверенность, а откуда она у молодых львов?
Ну, в основном все сюда ссылаются photoshopetiquette.com, только не включайте у них русский язык, там страх и ужас гуглопереводчика: )
Жду статьи с заголовком «За что программисты так не любят HTML-верстальщиков».
Уже далеко не первый пост на счету из серии проблем в цепочке дизайнер -> верстальщик -> программист.
Источник всех этих нестыковок на самом деле лежит в семимильными шагами растущем рынке,
когда количество кадров, сказывается на качестве.
Источник всех этих нестыковок на самом деле лежит в семимильными шагами растущем рынке,
когда количество кадров, сказывается на качестве.
Я придерживаюсь мнения, что дизайнер сайтов очень похож на архитектора или дизайнера автомобилей. Он должен не только красиво нарисовать, но и обязательно догадываться о тонкостях разработки. В крайнем случае, адекватно воспринимать их. Сайт — не баннер и не журнал. Хотя и ленивым верстальщикам тоже полезно закаляться сложными задачами и ограничениями.
По статье, считаю что сглаживание все-таки нужно включать. Хорошо об этом написал Илья Бирман. Несогласных с этим либо убеждаю, либо избегаю.
По статье, считаю что сглаживание все-таки нужно включать. Хорошо об этом написал Илья Бирман. Несогласных с этим либо убеждаю, либо избегаю.
А еще хорошие дизайнеры делают подобное описание для ситуаций, когда все должно быть так, как задумывалось.
Если есть постоянный дизайнер/заказчик/начальник, то многие проблемы можно решить разделами «Технологические требования» и «Требования к документации» в ТЗ на разработку дизайн-макета.
Не понимаю верстальщиков, которым не нравятся «нестандартные» шрифты. Это же роспись в собственной некомпетенции. Большинство современных дизайнов используют Футура ПТ, Проксима Нова, тот же Мириад Про или любой другой приличный шрифт.
Лицензия на тайпкит стоит жалки 50 долларов в год на неограниченное кол-во сайтов. Не хотите платить? Есть Гугл Веб Фонтс. Не хотите веб фонтс, есть тайп фейс. Не знаете где взять лицензию? Так найдите в гугле.
Почему дизайн должен страдать из-за такой мелочи?
Если вы вдвоем напару с дизайнером не можете объяснить как работает сглаживание (которое в любом случае будет не таким как в браузере, даже в отключеном виде), то стоит немного поучиться общению.
Жалоба на то, что какие-то вещи «приходится уточнять» это вообще что? Конечно что-то приходится уточнять, вы же не в вакууме работаете.
Лицензия на тайпкит стоит жалки 50 долларов в год на неограниченное кол-во сайтов. Не хотите платить? Есть Гугл Веб Фонтс. Не хотите веб фонтс, есть тайп фейс. Не знаете где взять лицензию? Так найдите в гугле.
Почему дизайн должен страдать из-за такой мелочи?
Если вы вдвоем напару с дизайнером не можете объяснить как работает сглаживание (которое в любом случае будет не таким как в браузере, даже в отключеном виде), то стоит немного поучиться общению.
Жалоба на то, что какие-то вещи «приходится уточнять» это вообще что? Конечно что-то приходится уточнять, вы же не в вакууме работаете.
Вопросами лицензирования уж точно не верстальщик должен заниматься, а также заменой одних шрифтов на другие, максимум указать «аварийный» типа sans serif.
И уточнять не всегда есть возможность.
И уточнять не всегда есть возможность.
По поводу не системных шрифтов. Это зло и дело даже не в сглаживании, с которым, можно еще как то бороться, а с кучей лишних файлов, которые надо хранить на сервере и которые будут подружатся вместе со страницей. Нафик надо?! Шрифт не должен обеспечивать красоту сайта, его красоту должна обеспечивать его оптимальность и юзабильность, а никак уж не шрифты.
Какая трагедия. Картинки не должны обеспечивать красоту сайта. Их же надо хранить на сервере и подгружать вместе с сайтом, о ужас!
Решение что должно храниться на сервере, а что нет должен принимать заказчик на этапе постановки задачи связке «дизайнер-верстальщик-фронтендер (программист клиент-сайд)». Если не решил или решил, но забыл донести, то профессионалы уточнят или конкретно по каждому вопросу, или спросят делегировано ли им право принимать такие решения, а дилетанты или профессионалы, думающие лишь о максимизации своих доходов/расходы, а не о решении проблем заказчика, сделают как им выгоднее.
А еще бесит куча лишних слоев, хоть и скрытых, но все же присутствующих, а еще если в добавок слои не разбиты по группам, с кучей не нужных слоев начинается ребус
Это всё булшит, котаны. Вот как надо:
Ни одного слова про Fireworks от Adobe. Хоть кто-то в нем рисует сайты? Вроде бы именно он и должен для этого использоваться, но все сидят в шопе.
P.S. Сам все никак не соберусь пересесть. =)
P.S. Сам все никак не соберусь пересесть. =)
Пусть он сначала шрифты как в фотошопе будет отображать а там подумаем. Он не для рисования а для интерфейсов.
А зачем «как в фотошопе»? Пусть лучше научится как в браузерах. Вроде бы все писали о проблеме, что шоп показывает не так, как браузер (или наоборот).
Веб-дизайн — это дизайн интерфейсов прежде всего (для сайтов или приложений, подразумевающих возврат пользователей из практических соображений). Пользователь привлеченный красотой, но ушедший из-за неудобства интерфейса, по идее хуже для владельца сайта, чем пользователь вообще не привлеченный. Это минус в «карму».
я вот рисую в Fireworks — весьма удобно. Сетка четкая получается, вектор, опять же, удобно контролировать размер, ресайз. Со шрифтами тоже бол-мен. Потом экспорт во что нужно, настроек каких хочешь. Удобный софт. Меня вот фш напрягает в этом плане.
Я работала с таким дизайнером, он придирался до каждого пикселя и всей душой радел за свой макет, на каждую страницу делал отдельный лояут, в котором можно было сразу видеть всю сетку сайта, с указанными размерами, отступами и прочих мелочей. Во общем, это было круто, мне очень нравилось, иногда он мне делал мигающие гифки того или иного контрола (в разных браузерах) у которого, было хоть какое-то различие в отображении. Все должно было быть четко по макету. Я так понимаю, все зависит от уровня самого дизайнера и на сколько ему самому важно, что бы его дизайн был выполнен грамотно верстальщиком. Потому что это его портфолио… Ну тогда я сама поняла, что я не дотягиваю до уровня этого дизайнера. Но это был крутой опыт) Но этот чувак, наверно, настрадался.
Мне кажется, что редко такое может быть, что бы и верстальщик и дизайнер оба были на высоте… Я бы даже сказала, что скорее верстальщики подводят, чем те же дизайнеры. Но, как показала практика, грамотные дизайнеры, как правило, всегда уже имеют на примете людей, которые четко сверстают им их макет.
Мне кажется, что редко такое может быть, что бы и верстальщик и дизайнер оба были на высоте… Я бы даже сказала, что скорее верстальщики подводят, чем те же дизайнеры. Но, как показала практика, грамотные дизайнеры, как правило, всегда уже имеют на примете людей, которые четко сверстают им их макет.
Веб-дизайнера, который один раз попробовал сверстать свой сайт, потом просто не узнать! Вообще я против универсальных солдат в больших компаниях, но каждый веб-дизайнер должен быть немного верстальщиком, а каждый верстальщик — немного веб-разработчиком.
Опросил кратко знакомых ветеранов вёрстки. Все высказались в том духе, что, мол, нам уже пофиг в чём и как присылают макеты. Вот это и есть профессионализм.
а) Гарнитуры. Есть всем известный список «безопасных шрифтов». Большинство в курсе его. Но порой лепят какой-нибудь Myriad Pro и понеслась… Начинаешь объяснять, что он не входит в стандартную поставку с ОС, несмотря на то, что дико популярен.
Их возможностей уже не хватает и они не универсальны: у Times New Roman слишком маленькое внутрибуквенное пространство, а у Georgia минускульные цифры, которые не годятся для таблиц и формул. Также нет узкого начертания Condensed. Кстати, Google отдал в свободное плаванье Roboto с 14 вариантами начертания :)
Свободных шрифтов уже очень много. У меня штук 50+ есть с поддержкой кириллицы. Когда-нибудь сделаю галерею-архив на своем сайте.
Если следовать всему безопасному, то скатимся еще и до 216 веб-безопасных цветов :)
б) Сглаживание шрифтов всегда должно быть отключено!
Это если заказчик в теме, что в браузере все будет ок. А если «обычный человек» заказал дизайн, то он будет в ужасе от отключенного сглаживания. В Фотошопе шрифты, конечно, ужасно сглаживаются. Меня это вечно напрягает и расстраивает.
Странно, что у топика 100+ голосов, но в ней не упомянуто самое главное: группировать слои и нормально называть слои и папки. Я версткой никогда не хочу заниматься, но 1 раз прислали PSD на переделку. 500 слоев без названий и группировки. /*triple facepalm*/
Странно, что у топика 100+ голосов, но в ней не упомянуто самое главное: группировать слои и нормально называть слои и папки. Я версткой никогда не хочу заниматься, но 1 раз прислали PSD на переделку. 500 слоев без названий и группировки. /*triple facepalm*/
ну там можно по изображению найти нужный слой просто щелкая на него и вызывая нужное меню, но не всегда это подходит.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
За что HTML-верстальщики так не любят веб-дизайнеров