Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 125
Retina, говорите? А чего такой ужасный jpg?
Этот jpg не элемент интерфейса, и несет сугубо информативный смысл. Так что переживем :)
*Здесь должна быть картинка «JPG vs PNG»*
*Здесь должна быть картинка «SVG vs PNG»*
Здесь написан текст и его достаточно!
Запилил в пост.
>> SVG vs PNG
>> сохранено в PNG
Ох лол. Хабр же позволяет внедрять svg. А если бы ещё и через object позволял, то можно было бы с текстом взаимодействовать (как на svgvspng.com).
>> сохранено в PNG
Ох лол. Хабр же позволяет внедрять svg. А если бы ещё и через object позволял, то можно было бы с текстом взаимодействовать (как на svgvspng.com).
Прошло больше месяца, пока никто не перезалил: habrahabr.ru/post/226637/#comment_7696299
А Comic Sans для скарказма использовали?
Не хватает указание масштаба, например, «х2».
А вас не смущает, что png — сжатие без потерь? И картинка близко не имеет отношения к реальности…
Если вы хороший верстальщик, вас однозначно раздражают растровые изображения.
Не-а. Я верстаю бумажную газету :)
Пост в хабе «Веб-разработка», так что понятно о каком верстальщике идет речь ;)
Там проблема растровых изображений ещё актуальнее. Так как мало того, что зачастую изображения спорного качества, так часто ещё и в CMYK надо конвертировать и с чёрным цветом играться, чтобы не получить каку на выходе.
В 21 веке, причем в середине его второго десятилетия с CMYK и генерацией черного уже не играются. Profile-To-Profile, Color Model Conversion и другие страшные вещи давно переехали in RIP. Ручное цветоделение в Photoshop осталось актуальным только для фрилансеров, которые готовят макеты под конкретные и постоянно разные условия печати. Остальные (тем более газетные) давно пользуются всякими PDF-based Workflow и не забивают себе мозг цветоделением каждой картинки.
Это в Вашем идеальном мире Вашей Москве так, а когда я работал в этой области (2002-2008) в нашем небольшом городе не было даже ни одной типографии, которая могла бы на 100% цветами попасть.
Ну во-первых я не в Москве (а в Екатеринбурге), во-вторых я из полиграфии (профессиональной на фуллтайме) ушел в 2001. Тем не менее, уже в середине 2000-х цветоделение начало появляться в растровых процессорах (например Scitex Brisque, Heidelberg Delta), а сейчас вообще 98% работают с PDF процессом и умеют Profile-to-Profile делать.
>Интернет – векторный
И что характерно, гипертекстовый.
И что характерно, гипертекстовый.
Кстати, обзор Avocode будет кому-нибудь интересен?
Только вот вес у сложного вектора гораздо больше. И шансов подвесить браузер тоже.
Насколько сложного?
Вот классический пример тигра на SVG. Там, конечно, не 500 Кб, но рисунок достаточно сложный и грузится весьма быстро.
— Что делать когда вектор полноцветный?
SVG
Предложите инструменты для экспорта «вектора» из PSD в SVG.
File -> Export -> Paths To Illustrator
По поводу экспорта шейпов в CVG:
Я ещё не проверял, но вдруг поможет.
psd2svg — cloudconvert.org/psd-to-svg
И недавно увидел плагин к фотошопу за ~20$, который шейпы из макета в SVG экспортирует — zeick.com/ (но ещё не покупал, поэтому о качестве его работы ничего сказать не могу).
Я ещё не проверял, но вдруг поможет.
psd2svg — cloudconvert.org/psd-to-svg
И недавно увидел плагин к фотошопу за ~20$, который шейпы из макета в SVG экспортирует — zeick.com/ (но ещё не покупал, поэтому о качестве его работы ничего сказать не могу).
Про Zeick слышал, по отзывам – годный, но сам не юзал.
Также, в Photoshop CC есть File -> Generate -> Image Assets.
И вообще, нужно пересаживать дизайнеров на Sketch!
Также, в Photoshop CC есть File -> Generate -> Image Assets.
И вообще, нужно пересаживать дизайнеров на Sketch!
У Зейка есть бесплатная демо-версия c вотермарком, который легко трется, этого вполне достаточно для того, чтобы оценить его работу.
Если интересно могу сделать 50% скидку, специально для Хабра.
Если интересно могу сделать 50% скидку, специально для Хабра.
не в ту ветку
Вот наш плагин для Photoshop CC и CC 2014 для экспорта шейпов и групп в SVG
Zeick — Photoshop SVG Export
Zeick — Photoshop SVG Export
В общем-то, верстальщики просто пользуются тем, что умеет средний браузер среднего пользователя.
Пятнадцать лет назад все верстали таблицами не потому, что все поголовно были идиотами, а потому, что нормальной поддержки CSS2 не было, и надёжно располагать элементы по странице можно было только таблицами. Когда все браузеры научились позиционированию — стали верстать более правильно с точки зрения семантики.
Так и сейчас. Удобного инструмента для векторных изображений нет, зачем придумывать костыли? Какие-то шрифты мастерить, кошмар вообще. Пусть консорциумы и браузеры продумаю правильное решение, и тогда все будут им пользоваться.
Пятнадцать лет назад все верстали таблицами не потому, что все поголовно были идиотами, а потому, что нормальной поддержки CSS2 не было, и надёжно располагать элементы по странице можно было только таблицами. Когда все браузеры научились позиционированию — стали верстать более правильно с точки зрения семантики.
Так и сейчас. Удобного инструмента для векторных изображений нет, зачем придумывать костыли? Какие-то шрифты мастерить, кошмар вообще. Пусть консорциумы и браузеры продумаю правильное решение, и тогда все будут им пользоваться.
Есть у меня такое, на подсознательном уровне. Ощущение от сайта, из-за графики, что сделан в 2003 и уже не очень доверяешь контенту, кажеться, что устаревшая информация.
Хочется согласиться с вами, но не могу, не доверяю… Из-за этого.
А есть какая-нибудь вменяемая альтернатива многоцветным иконкам с тенями?
Не уверен, что понял вопрос. Вы имеете ввиду: альтернатива многоцветным иконкам, но без SVG?
Да — именно без SVG :)
Возьмем, например, форум и кучу мелких иконок вокруг каждого сообщения. Мои личные наблюдения показывают, что если .svg элементов на одной страничке больше 20, то браузер при прокрутке начинает жестоко тормозить при любой скорости процессора. Если же все иконки заменить на .svg, то в половине случаев страничка перестает открываться в десктопном фаерфоксе и начинает жесточайше тормозить в гуглохромах с периодическими зависаниями. Отсюда вопрос — чем заменить растр в случае если переход к одноцветным шрифтовым иконкам это «не вариант» по мнению заказчика, который всегда прав?
Плюс ко всему где взять дизайнера, который может толково рисовать что-то в векторе и насколько это будет дороже? :)
Возьмем, например, форум и кучу мелких иконок вокруг каждого сообщения. Мои личные наблюдения показывают, что если .svg элементов на одной страничке больше 20, то браузер при прокрутке начинает жестоко тормозить при любой скорости процессора. Если же все иконки заменить на .svg, то в половине случаев страничка перестает открываться в десктопном фаерфоксе и начинает жесточайше тормозить в гуглохромах с периодическими зависаниями. Отсюда вопрос — чем заменить растр в случае если переход к одноцветным шрифтовым иконкам это «не вариант» по мнению заказчика, который всегда прав?
Плюс ко всему где взять дизайнера, который может толково рисовать что-то в векторе и насколько это будет дороже? :)
Вот странно. Я уже год каждый день смотрю на страницу где более 30 svg-элементов и ничего тормозит ни в одном из браузеров.
Ну возможно я тестировал на каких-то неправильных .svg… нужно повторить и виноват тогда
Я использую Inkscape — у него есть встроенный оптимизатор. Но даже максимально обрезанные и облегченные SVG в большом количестве вызывают тормоза при прокрутке в браузерах. В разных по-разному — но тормоза на глаз вполне заметные. При том, что файлы достаточно простые и весом в несколько килобайт. Так что мне вот тоже интересно, каков этот процесс «правильной оптимизации»?
Попробуйте использовать SVGO github.com/svg/svgo
А тут рассказ про него tech.yandex.ru/events/yagosti/wsd-msk-nov-2012/talks/453/
Прошу прощения за такие ссылки, Карма по-другому не позволяет выставлять.
А тут рассказ про него tech.yandex.ru/events/yagosti/wsd-msk-nov-2012/talks/453/
Прошу прощения за такие ссылки, Карма по-другому не позволяет выставлять.
Есть, запретить дизайнерам использовать многоцветные иконки с тенями
Всё хорошо, только топикастер не учитывает производительность сабжевых мобильных устройств. Я уж лучше полазаю по сайту с не очень хорошим качеством, но всё же полазаю, нежели по ресурсу с крутым ретина-лайк svg, двумя кадрами в секунду и откликом через пол часа =)
*проверено на фонгапе
*проверено на фонгапе
Если на сайте все кнопки и меню свёрстаны векторно — я скорее всего не увижу этот сайт. Atom поднатужится и перегреется, ARM сожрёт всю батарею и повиснет при рендеринге очередной иконки. Боитесь растра? Думаю все, кто боится трафика, знают, где находится кнопка «отключить загрузку картинок».
А если серьёзно — фанатизм вас погубит. Гораздо раньше, чем этот ваш HTML5-вектор научится рендериться на видеокарте.
А если серьёзно — фанатизм вас погубит. Гораздо раньше, чем этот ваш HTML5-вектор научится рендериться на видеокарте.
Эту страничку увидите? Как с производительностью?
Простите, но оно ужасно… Прыгающее в firefox меню вызывает неприятные ощущения.
А что, кроме лого, на этой страничке в SVG?
Все иконки в векторе
Там выше спор идет именно за SVG. Иконочные шрифты здесь не в счет, а на представленной странице я увидел именно шрифты в псевдо-классах "::before" (кстати, если IE8 не поддерживаете, то имеет смысл писать псевдо-классы через двойное двоеточие ;)).
For compatibility with existing style sheets, user agents must also accept the previous one-colon notation for pseudo-elements introduced in CSS levels 1 and 2— www.w3.org/TR/selectors/#pseudo-elements.
Все же про вечность там не говорится и, быть может, в будущих версиях сию совместимость уберут.
Грузится пол часа… Закрыл страницу — просто не дождался загрузки, хотя хотел посмотреть, очень.
Я, например, вижу, но мой мак-мини mid2011 стал очень шумно дышать кулером.
Так вот почему мой «Toshiba Portege R600» (январь 2010) последнее время постоянно шумит кулером, когда я нахожусь на некоторых вебсайтах. Я-то думал, что кулер засорился, и даже разобрал ноутбук и почистил кулер, а оказывается, что просто раньше сайты были растровые, но кто-то за меня решил, что они не совсем чёткие, и теперь они должны рендериться в векторе, отбирая 50-70% CPU.
Про десктоп на базе Intel D510MO, который я собрал для родителей в начале 2011 года, я вообще молчу — исправно проработав 3 года, в последние несколько месяцев стал тормозить на каждом втором сайте.
Про десктоп на базе Intel D510MO, который я собрал для родителей в начале 2011 года, я вообще молчу — исправно проработав 3 года, в последние несколько месяцев стал тормозить на каждом втором сайте.
Присоединяюсь, очень раздражает, когда некоторые сайты тормозят даже на 4-ядерном AMD Phenom'е. А со старого нетбука на Селероне многими сайтами вообще невозможно пользоваться, отклик на попытку скроллинга по 10-15 секунд! Ещё тормозов добавляет, когда в браузере добавляешь масштаба (иногда ведь хочется почитать сайт откинувшись на спинку кресла и не щурясь), да и вся красота при этом частенько расползается… Эй, веб-мастера, верните мне Web 1.0! ;)
Менюшки не тыкаются, а так — нормально. Кроме фоток под метр, особенно, когда они потом расцветают всего лишь вот в таком размере:
У древнего Symbian весь интерфейс был векторный и иконки в SVG, и не тормозило на процессорах с 200 MHz. Тормоза в браузерах, вероятно, дело времени. Почти никто не использует SVG, вот его и не оптимизируют. А можно хотя бы растрированные картинки кэшировать (в Firefox уже что-то сделано), тогда множество одинаковых иконок тормозить браузер не будут. Впрочем, не всё так просто, в WebKit кэширование наоборот пришлось убрать.
Проблемы две:
1. Некоторые иконки нельзя передать в векторе
2. Вектор, по сути, переносит на устройство и умножает в количество-просмотров-раз нагрузку на отрисовку графики
Но прогресс не остановить, поэтому дополнительно:
1. Подробный доклад про SVG: Позвольте представить: SVG
2. Много хороших статей про SVG с примерами в блоге «Про CSS»
1. Некоторые иконки нельзя передать в векторе
2. Вектор, по сути, переносит на устройство и умножает в количество-просмотров-раз нагрузку на отрисовку графики
Но прогресс не остановить, поэтому дополнительно:
1. Подробный доклад про SVG: Позвольте представить: SVG
2. Много хороших статей про SVG с примерами в блоге «Про CSS»
совет про веб-шрифты плохой. там начинаются проблемы с алиасингом и пр. если уж делать, то сразу в свг.
Можно ещё добавить на тему SVG недавнюю подборку: «A Compendium of SVG Information»
Всё это круто, но лишь на словах, потому что даже в этой статье сплошные PNG, а не SVG, как же так, автор, говорим одно, а делаем другое. Даже картинка сравнения SVG с PNG сама является PNG, где правая часть искусственно замутнена.
Я то за использования SVG, тем более, что работать в Inkscape для меня на порядок удобнее чем в GIMP (имеется в виду что-нибудь рисовать, а не обрабатывать фотографии), было бы здорово, чтобы размещать на странице картинку просто <img src=«my_image.svg» width=«100» height=«100»>, и чтобы не было никаких проблем ни с IE, ни с каким другим браузером, десктопным или мобильным.
Это чем-то похоже на табличную вёрстку, так верстали не потому, что так хотели, а потому, что по-другому для тех браузеров было невозможно верстать, даже две колонки нельзя было сделать без таблиц, хотя и пытались. Как только браузеры позволили делать «дивную» вёрстку, все на неё и перешли. Кстати, верстать таблицами было одно мучение, сейчас вёрстка на порядок легче, есть куча колоночных CSS фреймворков, и зачастую можно даже не проверять в зоопарке браузеров, скорее всего заработает как надо во всех.
Я то за использования SVG, тем более, что работать в Inkscape для меня на порядок удобнее чем в GIMP (имеется в виду что-нибудь рисовать, а не обрабатывать фотографии), было бы здорово, чтобы размещать на странице картинку просто <img src=«my_image.svg» width=«100» height=«100»>, и чтобы не было никаких проблем ни с IE, ни с каким другим браузером, десктопным или мобильным.
Это чем-то похоже на табличную вёрстку, так верстали не потому, что так хотели, а потому, что по-другому для тех браузеров было невозможно верстать, даже две колонки нельзя было сделать без таблиц, хотя и пытались. Как только браузеры позволили делать «дивную» вёрстку, все на неё и перешли. Кстати, верстать таблицами было одно мучение, сейчас вёрстка на порядок легче, есть куча колоночных CSS фреймворков, и зачастую можно даже не проверять в зоопарке браузеров, скорее всего заработает как надо во всех.
даже в этой статье сплошные PNG, а не SVG
PNG в этой статье – это контент! Это не интерфейс!
<img src=«my_image.svg» width=«100» height=«100»>, и чтобы не было никаких проблем ни с IE, ни с каким другим браузером, десктопным или мобильным<img src="my-awesome-logo.svg" onerror="this.onerror=null; this.src='my-awesome-logo.png'"/>
Некоторые сайты смотрят на вашу статью как на незнамо что.
http://habrahabr.ru/post/133706/ (к сожалению, сей замечательный сайт уже не работает)
http://habrahabr.ru/post/133706/ (к сожалению, сей замечательный сайт уже не работает)
Если интересно — могу рассказать о том, как я использую svg-спрайты через свг-шный «use» и автоматизации процесса сборки иконок в svg-спрайт.
С удовольствием посмотрел бы примеры хороших сайтов, где всё, кроме фотографий, сделано в SVG.
Я уверен, что такого добра навалом на http://www.awwwards.com/
Векторный гипертекстовый интернет ©
Добавлю свои пять копеек:
1) использование шрифтов для иконок чревато проблемами, но это не критично в некоторых случаях. Но я бы предпочел таки SVG, чем именно шрифт;
2) я удивлен, почему на каждом углу говорят про Avocode, который еле вышел, как я уже несколько месяцев благополучно пользуюсь убийцей PS непосредственно от Adobe — projectparfait.adobe.com. Project Parfait бесплатный, если все подумали, что сейчас придется еще что-то платить.
1) использование шрифтов для иконок чревато проблемами, но это не критично в некоторых случаях. Но я бы предпочел таки SVG, чем именно шрифт;
2) я удивлен, почему на каждом углу говорят про Avocode, который еле вышел, как я уже несколько месяцев благополучно пользуюсь убийцей PS непосредственно от Adobe — projectparfait.adobe.com. Project Parfait бесплатный, если все подумали, что сейчас придется еще что-то платить.
Золотая середина, золотое сечение — для программирования эти термины не пустой звук, как для любой дисциплины сложнее метломахательства вообще.
Фотографии местности, животных, людей и вообще фотографии — это JPEG. Его и изобретали для этого. Спрайты, полупрозрачные графические слои — PNG. ПОЛУпрозрачность в настоящий момент может реализовывать корректно только формат PNG. Баннеры, особенно анимированные — GIF. Анимация больше ни в одном типе изображений не поддерживается, насколько мне известно. Канвы для рисования, инфографика, динамические изображения (персонажи в браузерных играх) — SVG. Иконки — web-шрифты. С учётом современных тенденций в дизайне и поддержки веб-шрифтов подавляющим большинством браузеров использование оных становится очень целесообразным. Элементы интерфейса — CSS. Меня не меньше вашего бесит, когда я вижу нарисованные рамки, которые можно было сделать на CSS. Раньше я исхитрялся при помощи HTML4/CSS2 творить вырвиглазные трюки, приводившие в замешательство неопытных пользователей (например, создать иконку на табличной канве с ячейками 1 на 1 пиксель). Получалось. А сейчас я с негодованием лицезрею на некоторых сайтах, как простейшие рамки и линии делают при помощи PNG-графики.
Фотографии местности, животных, людей и вообще фотографии — это JPEG. Его и изобретали для этого. Спрайты, полупрозрачные графические слои — PNG. ПОЛУпрозрачность в настоящий момент может реализовывать корректно только формат PNG. Баннеры, особенно анимированные — GIF. Анимация больше ни в одном типе изображений не поддерживается, насколько мне известно. Канвы для рисования, инфографика, динамические изображения (персонажи в браузерных играх) — SVG. Иконки — web-шрифты. С учётом современных тенденций в дизайне и поддержки веб-шрифтов подавляющим большинством браузеров использование оных становится очень целесообразным. Элементы интерфейса — CSS. Меня не меньше вашего бесит, когда я вижу нарисованные рамки, которые можно было сделать на CSS. Раньше я исхитрялся при помощи HTML4/CSS2 творить вырвиглазные трюки, приводившие в замешательство неопытных пользователей (например, создать иконку на табличной канве с ячейками 1 на 1 пиксель). Получалось. А сейчас я с негодованием лицезрею на некоторых сайтах, как простейшие рамки и линии делают при помощи PNG-графики.
Векторы-шмекторы… А вот можно с помощью SVG нарисовать 7 красных перпендикулярных линий, причем одну из них зелеными чернилами, а другую прозрачными? В-)
А вообще, самого как обычного (но логичного) пользователя всегда бесят десятки крошечных картинок на сайтах, которые составляют кнопки, рамки, заливки и прочее. Доходит до смешного — даже банальные гипертекстовые ссылки (подчеркнутый текст) иногда делаются картинками!
А вообще, самого как обычного (но логичного) пользователя всегда бесят десятки крошечных картинок на сайтах, которые составляют кнопки, рамки, заливки и прочее. Доходит до смешного — даже банальные гипертекстовые ссылки (подчеркнутый текст) иногда делаются картинками!
потёрто
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Изображения в верстке. Хватит это терпеть