How to become an author
Search
Write a publication
Pull to refresh

Comments 125

Этот jpg не элемент интерфейса, и несет сугубо информативный смысл. Так что переживем :)
Total votes 38: ↑2 and ↓36-34
*Здесь должна быть картинка «JPG vs PNG»*
Total votes 27: ↑24 and ↓3+21
*Здесь должна быть картинка «SVG vs PNG»*
Total votes 10: ↑2 and ↓8-6
Здесь написан текст и его достаточно!
Total votes 7: ↑7 and ↓0+7
Удалил ненавистный жпег. Да наступит дзен!
Total votes 5: ↑4 and ↓1+3
Запилил в пост.
Total votes 2: ↑1 and ↓10
Залейте картинку в svg, можно на английском. А то просто смех: картинка png vs svg сама в png
Total votes 2: ↑1 and ↓10
>> SVG vs PNG
>> сохранено в PNG

Ох лол. Хабр же позволяет внедрять svg. А если бы ещё и через object позволял, то можно было бы с текстом взаимодействовать (как на svgvspng.com).
Total votes 10: ↑10 and ↓0+10
UFO just landed and posted this here
А Comic Sans для скарказма использовали?
Total votes 4: ↑1 and ↓3-2
Это единственный широкодоступный рукописный (комиксный) шрифт в такой стилитике
Total votes 3: ↑2 and ↓1+1
Не хватает указание масштаба, например, «х2».
This comment wasn’t rated yet0
А вас не смущает, что png — сжатие без потерь? И картинка близко не имеет отношения к реальности…
This comment wasn’t rated yet0
UFO just landed and posted this here
Если вы хороший верстальщик, вас однозначно раздражают растровые изображения.

Не-а. Я верстаю бумажную газету :)
Total votes 33: ↑30 and ↓3+27
Пост в хабе «Веб-разработка», так что понятно о каком верстальщике идет речь ;)
Total votes 25: ↑13 and ↓12+1
Там проблема растровых изображений ещё актуальнее. Так как мало того, что зачастую изображения спорного качества, так часто ещё и в CMYK надо конвертировать и с чёрным цветом играться, чтобы не получить каку на выходе.
Total votes 3: ↑3 and ↓0+3
В 21 веке, причем в середине его второго десятилетия с CMYK и генерацией черного уже не играются. Profile-To-Profile, Color Model Conversion и другие страшные вещи давно переехали in RIP. Ручное цветоделение в Photoshop осталось актуальным только для фрилансеров, которые готовят макеты под конкретные и постоянно разные условия печати. Остальные (тем более газетные) давно пользуются всякими PDF-based Workflow и не забивают себе мозг цветоделением каждой картинки.
Total votes 2: ↑1 and ↓10
Это в Вашем идеальном мире Вашей Москве так, а когда я работал в этой области (2002-2008) в нашем небольшом городе не было даже ни одной типографии, которая могла бы на 100% цветами попасть.
This comment wasn’t rated yet0
Ну во-первых я не в Москве (а в Екатеринбурге), во-вторых я из полиграфии (профессиональной на фуллтайме) ушел в 2001. Тем не менее, уже в середине 2000-х цветоделение начало появляться в растровых процессорах (например Scitex Brisque, Heidelberg Delta), а сейчас вообще 98% работают с PDF процессом и умеют Profile-to-Profile делать.
This comment wasn’t rated yet0
>Интернет – векторный
И что характерно, гипертекстовый.
Total votes 75: ↑75 and ↓0+75
Кстати, обзор Avocode будет кому-нибудь интересен?
Total votes 25: ↑25 and ↓0+25
Присоединяюсь, до начала публичной беты было бы интересно узнать мнение того, кто успел пощупать :)
Total votes 5: ↑5 and ↓0+5
Как раз хотел расспросить о нем. Вы им уже пользовались, он может полностью корректно открыть PSD или еще есть косячки?
Total votes 1: ↑1 and ↓0+1
Только вот вес у сложного вектора гораздо больше. И шансов подвесить браузер тоже.
Total votes 17: ↑14 and ↓3+11
Насколько сложного?
Total votes 4: ↑2 and ↓20
Пробовал как-то нарисованный автомобиль весом около 500 килобайт. Firefox ооочень-ооочень долго его загружал.
Total votes 6: ↑5 and ↓1+4
В вашем случае это явно контент, а не верстка
Total votes 8: ↑7 and ↓1+6
Вот классический пример тигра на SVG. Там, конечно, не 500 Кб, но рисунок достаточно сложный и грузится весьма быстро.
Total votes 3: ↑3 and ↓0+3
UFO just landed and posted this here
— Что делать когда вектор полноцветный?

SVG

Предложите инструменты для экспорта «вектора» из PSD в SVG.

File -> Export -> Paths To Illustrator

Total votes 2: ↑2 and ↓0+2
UFO just landed and posted this here
А вы думаете, что фрилансеры Фотошоп покупают? :)
Total votes 3: ↑2 and ↓1+1
Что вы. Конечно покупают!
Total votes 2: ↑2 and ↓0+2
Крякать это богопротивно. Я вот демку использую. С официального сайта скачал месяца 2 назад.
Total votes 2: ↑2 and ↓0+2
По поводу экспорта шейпов в CVG:

Я ещё не проверял, но вдруг поможет.
psd2svg — cloudconvert.org/psd-to-svg

И недавно увидел плагин к фотошопу за ~20$, который шейпы из макета в SVG экспортирует — zeick.com/ (но ещё не покупал, поэтому о качестве его работы ничего сказать не могу).
Total votes 2: ↑2 and ↓0+2
Про Zeick слышал, по отзывам – годный, но сам не юзал.
Также, в Photoshop CC есть File -> Generate -> Image Assets.
И вообще, нужно пересаживать дизайнеров на Sketch!
This comment wasn’t rated yet0
Image Assets генерирует только растр (GIF, PNG, JPG).
This comment wasn’t rated yet0
О как. Большое спасибо за информацию!
This comment wasn’t rated yet0
да sketch дико удобный, особенно 3 версия
This comment wasn’t rated yet0
У Зейка есть бесплатная демо-версия c вотермарком, который легко трется, этого вполне достаточно для того, чтобы оценить его работу.

Если интересно могу сделать 50% скидку, специально для Хабра.
Total votes 2: ↑2 and ↓0+2
Я уже вчера купил полную версию =)
Но, думаю, многим бы понравилась такая акция.
Total votes 1: ↑1 and ↓0+1
Вот тогда Zeick за пол цены: Gumroad и PayPal

Пару недель точно провесит.

UMAX, Спасибо
Total votes 2: ↑2 and ↓0+2
— Что делать когда вектор полноцветный?

Смотря сколько цветов. Иногда и стопки сгодятся.
Total votes 2: ↑2 and ↓0+2
Вот наш плагин для Photoshop CC и CC 2014 для экспорта шейпов и групп в SVG

Zeick — Photoshop SVG Export

Total votes 1: ↑1 and ↓0+1
В общем-то, верстальщики просто пользуются тем, что умеет средний браузер среднего пользователя.

Пятнадцать лет назад все верстали таблицами не потому, что все поголовно были идиотами, а потому, что нормальной поддержки CSS2 не было, и надёжно располагать элементы по странице можно было только таблицами. Когда все браузеры научились позиционированию — стали верстать более правильно с точки зрения семантики.

Так и сейчас. Удобного инструмента для векторных изображений нет, зачем придумывать костыли? Какие-то шрифты мастерить, кошмар вообще. Пусть консорциумы и браузеры продумаю правильное решение, и тогда все будут им пользоваться.
Total votes 52: ↑52 and ↓0+52
Есть у меня такое, на подсознательном уровне. Ощущение от сайта, из-за графики, что сделан в 2003 и уже не очень доверяешь контенту, кажеться, что устаревшая информация.
Total votes 5: ↑3 and ↓2+1
заметил ошибку, как только написал, но еще не научился редактировать.

UPD: уже научился.
Total votes 2: ↑2 and ↓0+2
А есть какая-нибудь вменяемая альтернатива многоцветным иконкам с тенями?
Total votes 2: ↑1 and ↓10
Не уверен, что понял вопрос. Вы имеете ввиду: альтернатива многоцветным иконкам, но без SVG?
This comment wasn’t rated yet0
Да — именно без SVG :)
Возьмем, например, форум и кучу мелких иконок вокруг каждого сообщения. Мои личные наблюдения показывают, что если .svg элементов на одной страничке больше 20, то браузер при прокрутке начинает жестоко тормозить при любой скорости процессора. Если же все иконки заменить на .svg, то в половине случаев страничка перестает открываться в десктопном фаерфоксе и начинает жесточайше тормозить в гуглохромах с периодическими зависаниями. Отсюда вопрос — чем заменить растр в случае если переход к одноцветным шрифтовым иконкам это «не вариант» по мнению заказчика, который всегда прав?
Плюс ко всему где взять дизайнера, который может толково рисовать что-то в векторе и насколько это будет дороже? :)
Total votes 8: ↑8 and ↓0+8
Вот странно. Я уже год каждый день смотрю на страницу где более 30 svg-элементов и ничего тормозит ни в одном из браузеров.
Total votes 1: ↑1 and ↓0+1
Ну возможно я тестировал на каких-то неправильных .svg… нужно повторить и виноват тогда
This comment wasn’t rated yet0
UFO just landed and posted this here
UFO just landed and posted this here
UFO just landed and posted this here
Я использую Inkscape — у него есть встроенный оптимизатор. Но даже максимально обрезанные и облегченные SVG в большом количестве вызывают тормоза при прокрутке в браузерах. В разных по-разному — но тормоза на глаз вполне заметные. При том, что файлы достаточно простые и весом в несколько килобайт. Так что мне вот тоже интересно, каков этот процесс «правильной оптимизации»?
Total votes 2: ↑2 and ↓0+2
Есть, запретить дизайнерам использовать многоцветные иконки с тенями
Total votes 8: ↑4 and ↓40
Всё хорошо, только топикастер не учитывает производительность сабжевых мобильных устройств. Я уж лучше полазаю по сайту с не очень хорошим качеством, но всё же полазаю, нежели по ресурсу с крутым ретина-лайк svg, двумя кадрами в секунду и откликом через пол часа =)

*проверено на фонгапе
Total votes 18: ↑17 and ↓1+16
UFO just landed and posted this here
Если на сайте все кнопки и меню свёрстаны векторно — я скорее всего не увижу этот сайт. Atom поднатужится и перегреется, ARM сожрёт всю батарею и повиснет при рендеринге очередной иконки. Боитесь растра? Думаю все, кто боится трафика, знают, где находится кнопка «отключить загрузку картинок».

А если серьёзно — фанатизм вас погубит. Гораздо раньше, чем этот ваш HTML5-вектор научится рендериться на видеокарте.
Total votes 11: ↑8 and ↓3+5
Эту страничку увидите? Как с производительностью?
Total votes 13: ↑2 and ↓11-9
Простите, но оно ужасно… Прыгающее в firefox меню вызывает неприятные ощущения.
Total votes 11: ↑9 and ↓2+7
Эта верстка еще в процессе. В FF не тестилось.
Total votes 1: ↑0 and ↓1-1
в Opera видимо тоже :-) (не та, которая Хром)
Total votes 3: ↑3 and ↓0+3
А что, кроме лого, на этой страничке в SVG?
Total votes 1: ↑0 and ↓1-1
Все иконки в векторе
This comment wasn’t rated yet0
Там выше спор идет именно за SVG. Иконочные шрифты здесь не в счет, а на представленной странице я увидел именно шрифты в псевдо-классах "::before" (кстати, если IE8 не поддерживаете, то имеет смысл писать псевдо-классы через двойное двоеточие ;)).
This comment wasn’t rated yet0
UFO just landed and posted this here
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.

Все же про вечность там не говорится и, быть может, в будущих версиях сию совместимость уберут.
This comment wasn’t rated yet0
UFO just landed and posted this here
Грузится пол часа… Закрыл страницу — просто не дождался загрузки, хотя хотел посмотреть, очень.
Total votes 5: ↑4 and ↓1+3
Ибо слайды тяжеленные
Total votes 4: ↑1 and ↓3-2
А разработчик об этом не подумал конечно же ;)
Total votes 2: ↑2 and ↓0+2
До продакшена далеко еще
Total votes 7: ↑1 and ↓6-5
И зачем это показывать тогда?
This comment wasn’t rated yet0
Вам пытаются намекнуть, что у SVG есть очень серьезные проблемы с производительностью.
Total votes 10: ↑10 and ↓0+10
Я не намекаю, а прямым текстом говорю о том, что сайт тормозит безбожно. Причину автор ресурса назвал — ему виднее.
Total votes 4: ↑4 and ↓0+4
До продакшена далеко еще [2]
Total votes 6: ↑0 and ↓6-6
Я, например, вижу, но мой мак-мини mid2011 стал очень шумно дышать кулером.
Total votes 4: ↑3 and ↓1+2
Так вот почему мой «Toshiba Portege R600» (январь 2010) последнее время постоянно шумит кулером, когда я нахожусь на некоторых вебсайтах. Я-то думал, что кулер засорился, и даже разобрал ноутбук и почистил кулер, а оказывается, что просто раньше сайты были растровые, но кто-то за меня решил, что они не совсем чёткие, и теперь они должны рендериться в векторе, отбирая 50-70% CPU.

Про десктоп на базе Intel D510MO, который я собрал для родителей в начале 2011 года, я вообще молчу — исправно проработав 3 года, в последние несколько месяцев стал тормозить на каждом втором сайте.
Total votes 4: ↑3 and ↓1+2
Присоединяюсь, очень раздражает, когда некоторые сайты тормозят даже на 4-ядерном AMD Phenom'е. А со старого нетбука на Селероне многими сайтами вообще невозможно пользоваться, отклик на попытку скроллинга по 10-15 секунд! Ещё тормозов добавляет, когда в браузере добавляешь масштаба (иногда ведь хочется почитать сайт откинувшись на спинку кресла и не щурясь), да и вся красота при этом частенько расползается… Эй, веб-мастера, верните мне Web 1.0! ;)
Total votes 6: ↑5 and ↓1+4
+1. Из того что я знаю, самое жестяцкое это комментарии на Ленте… 4 ядра, 4 гига оперативки, SSD под систему, а блок комментов грузится секунд 10 и дико тормозит при скроллинге, если там 100+ комментов. Умудрились же…
Total votes 5: ↑4 and ↓1+3
Менюшки не тыкаются, а так — нормально. Кроме фоток под метр, особенно, когда они потом расцветают всего лишь вот в таком размере:
This comment wasn’t rated yet0
У древнего Symbian весь интерфейс был векторный и иконки в SVG, и не тормозило на процессорах с 200 MHz. Тормоза в браузерах, вероятно, дело времени. Почти никто не использует SVG, вот его и не оптимизируют. А можно хотя бы растрированные картинки кэшировать (в Firefox уже что-то сделано), тогда множество одинаковых иконок тормозить браузер не будут. Впрочем, не всё так просто, в WebKit кэширование наоборот пришлось убрать.
This comment wasn’t rated yet0
Проблемы две:

1. Некоторые иконки нельзя передать в векторе
2. Вектор, по сути, переносит на устройство и умножает в количество-просмотров-раз нагрузку на отрисовку графики

Но прогресс не остановить, поэтому дополнительно:

1. Подробный доклад про SVG: Позвольте представить: SVG
2. Много хороших статей про SVG с примерами в блоге «Про CSS»
Total votes 8: ↑7 and ↓1+6
UFO just landed and posted this here
Например, здесь и тут пиктограммы, а иногда и графика векторные.
This comment wasn’t rated yet0
UFO just landed and posted this here
совет про веб-шрифты плохой. там начинаются проблемы с алиасингом и пр. если уж делать, то сразу в свг.
Total votes 4: ↑4 and ↓0+4
Всё это круто, но лишь на словах, потому что даже в этой статье сплошные PNG, а не SVG, как же так, автор, говорим одно, а делаем другое. Даже картинка сравнения SVG с PNG сама является PNG, где правая часть искусственно замутнена.

Я то за использования SVG, тем более, что работать в Inkscape для меня на порядок удобнее чем в GIMP (имеется в виду что-нибудь рисовать, а не обрабатывать фотографии), было бы здорово, чтобы размещать на странице картинку просто <img src=«my_image.svg» width=«100» height=«100»>, и чтобы не было никаких проблем ни с IE, ни с каким другим браузером, десктопным или мобильным.

Это чем-то похоже на табличную вёрстку, так верстали не потому, что так хотели, а потому, что по-другому для тех браузеров было невозможно верстать, даже две колонки нельзя было сделать без таблиц, хотя и пытались. Как только браузеры позволили делать «дивную» вёрстку, все на неё и перешли. Кстати, верстать таблицами было одно мучение, сейчас вёрстка на порядок легче, есть куча колоночных CSS фреймворков, и зачастую можно даже не проверять в зоопарке браузеров, скорее всего заработает как надо во всех.
Total votes 5: ↑3 and ↓2+1
даже в этой статье сплошные PNG, а не SVG

PNG в этой статье – это контент! Это не интерфейс!
Total votes 5: ↑4 and ↓1+3
<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'"/>
Total votes 2: ↑2 and ↓0+2
Не знал, большое спасибо!
This comment wasn’t rated yet0
UFO just landed and posted this here
Некоторые сайты смотрят на вашу статью как на незнамо что.
http://habrahabr.ru/post/133706/ (к сожалению, сей замечательный сайт уже не работает)
This comment wasn’t rated yet0
Жаль пропустил. Снэпшота не осталось?
Total votes 2: ↑1 and ↓10
Если интересно — могу рассказать о том, как я использую svg-спрайты через свг-шный «use» и автоматизации процесса сборки иконок в svg-спрайт.
This comment wasn’t rated yet0
С удовольствием посмотрел бы примеры хороших сайтов, где всё, кроме фотографий, сделано в SVG.
This comment wasn’t rated yet0
Добавлю свои пять копеек:
1) использование шрифтов для иконок чревато проблемами, но это не критично в некоторых случаях. Но я бы предпочел таки SVG, чем именно шрифт;
2) я удивлен, почему на каждом углу говорят про Avocode, который еле вышел, как я уже несколько месяцев благополучно пользуюсь убийцей PS непосредственно от Adobe — projectparfait.adobe.com. Project Parfait бесплатный, если все подумали, что сейчас придется еще что-то платить.
Total votes 2: ↑2 and ↓0+2
Золотая середина, золотое сечение — для программирования эти термины не пустой звук, как для любой дисциплины сложнее метломахательства вообще.

Фотографии местности, животных, людей и вообще фотографии — это JPEG. Его и изобретали для этого. Спрайты, полупрозрачные графические слои — PNG. ПОЛУпрозрачность в настоящий момент может реализовывать корректно только формат PNG. Баннеры, особенно анимированные — GIF. Анимация больше ни в одном типе изображений не поддерживается, насколько мне известно. Канвы для рисования, инфографика, динамические изображения (персонажи в браузерных играх) — SVG. Иконки — web-шрифты. С учётом современных тенденций в дизайне и поддержки веб-шрифтов подавляющим большинством браузеров использование оных становится очень целесообразным. Элементы интерфейса — CSS. Меня не меньше вашего бесит, когда я вижу нарисованные рамки, которые можно было сделать на CSS. Раньше я исхитрялся при помощи HTML4/CSS2 творить вырвиглазные трюки, приводившие в замешательство неопытных пользователей (например, создать иконку на табличной канве с ячейками 1 на 1 пиксель). Получалось. А сейчас я с негодованием лицезрею на некоторых сайтах, как простейшие рамки и линии делают при помощи PNG-графики.
Total votes 1: ↑0 and ↓1-1
Векторы-шмекторы… А вот можно с помощью SVG нарисовать 7 красных перпендикулярных линий, причем одну из них зелеными чернилами, а другую прозрачными? В-)

А вообще, самого как обычного (но логичного) пользователя всегда бесят десятки крошечных картинок на сайтах, которые составляют кнопки, рамки, заливки и прочее. Доходит до смешного — даже банальные гипертекстовые ссылки (подчеркнутый текст) иногда делаются картинками!
Total votes 1: ↑1 and ↓0+1
это типа сео-фишка, чтобы враги сцылку не смогли скомуниздить :). Приходилось видеть сайты на которых даже весь текст в картинки загнан был :)
Total votes 1: ↑1 and ↓0+1
Sign up to leave a comment.

Articles

Your account

Sections

Information

Services

Support
© 2006–2024, Habr