Как выглядит значок графического файла
Обновлено: 05.07.2024
Дизайн-студия iA опубликовала в своем блоге заметку о том, чем плохи графические символы в интерфейсе, почему нельзя заменить их на текстовые подписи и какие правила помогут дизайнеру при создании иконок.
Иконки экономят место и выглядят свежо. Иконки — это быстрый ответ на сложные вопросы:
- Как сделать это красивее?
- Как это забрендировать?
- Как сделать веселее?
Мы любим иконки — до тех пор, пока не начинаем в них путаться.
Есть много разных иконок: на продуктах, в архитектуре, в компьютерах, в списках, на кнопках, для веба и приложений, для iOS и Android. Иконки на панелях инструментов, подписанные и неподписанные, стилизованные и стандартизованные, цветные и монохромные, в шрифтах, файлах PNG или SVG.
Есть много бесплатных и платных наборов иконок, векторных и растровых, плоских и объемных, и если записывать правила работы с ними, потребуется тетрадка потолще. Иконок так много, что есть соблазн поверить, что они вытянут даже плохой дизайн.
Но будьте осторожны. Если вы станете любую дизайн-задачу решать с помощью иконок, то однажды в вашу дверь постучится Дон Норман, а когда вы ему откроете, пристально посмотрит в глаза и скажет:
Непонятные иконки замусоривают интерфейс, хотя исследования давно показали, что люди могут запомнить совсем немного значений иконок. Вы помните, что значит каждая иконка? Я — нет.
— Дон Норман
Так Норман поучал своего бывшего работодателя — Apple. Примеры «иконотоксикоза» Apple встречаются в iTunes, в почтовом клиенте и на панели управления iOS.
В Twitter iTunes-иконками пугают, как Бабой Ягой. Вот отличный пример из Apple Mail для OS X: сколько из этих иконок вы опознаете без подписи?
Этот пример показывает лишь то, что иконки экономят место и выглядят свежо. Назначение кнопок не вызывает вопросов только у дизайнера, разместившего иконки на этой панели. За иконкой может скрываться тысяча разных слов, и это главная проблема. Когда у слова тысяча значений, то избежать путаницы позволит только хорошее понимание контекста. Вот те же иконки, но с подписями:
С объяснениями интерфейс становится удобнее, поэтому некоторые бессердечные люди утверждают, что лучшая иконка — это текст. Логично, правильные подписи спасают от путаницы. Так почему бы не использовать только подписи без иконок?
Функционально «чисто текстовый» дизайн ясен как день (если информационные архитекторы справились со своей задачей). Но когда вы убираете изображения из интерфейса, то в нем что-то ломается, его покидает жизнь. Это не заботит дизайн-позитивистов, но волнует остальных людей. Мы проверили эту гипотезу, удалив иконки из iA Writer. Реакцией пользователей было решительное «Не надо!»
Может быть, лучше не выбирать между текстом и иконкой, а понять, когда использовать только иконки, когда только текст, а когда иконки с подписями. Давайте разберемся.
Только иконки
Иконки — это картинки. На картинках легко показать статические предметы. Подпись не нужна иконкам, на которых изображены легко узнаваемые объекты, представляющие знакомые понятия. Например, самолеты для аэропортов, человеческие фигуры для дверей туалетов, корзины для мест, где лежат документы, которые мы скоро выбросим.
Материальные объекты изобразить легко, а необходимость показать на иконке действие или абстрактное понятие заставила помучиться многих дизайнеров. Проблема в том, что при взаимодействии человека с компьютером большинство иконок — это как раз действия и абстракции.
Показать действие реально. Анимированная иконка отвлекает, поэтому лучше использовать метафору действия. В контексте рабочего стола компьютера иконка принтера значит «Печатать», мусорная корзина — «Удалить», ножницы — «Вырезать». У каждого из этих объектов есть одно конкретное назначение, поэтому целевое действие понять легко.
Со сложными действиями и абстракциями так уже не выйдет, и вряд ли в ближайшее время что-то изменится. За 40 лет взаимодействия человека с компьютером мы не нашли универсальных символов для базовых функций вроде сохранения, копирования и вставки.
Общая проблема пиктографических систем в том, что они ограничены количеством предметов из окружающего мира, которые можно показать на изображении.
— Джон Хадсон, «Будущее эмодзи»
Голые иконки на функциональных элементах интерфейса ухудшают юзабилити. Лучший способ сообщить о функции — слово, а не картинка. Еще лучше, если это глагол.
Лучшее, что есть у людей для несовершенного обмена мыслями, — это речь. Письменная речь придает мыслям долговечность и точность: в устной речи мы редко исправляемся, а это предложение я исправил несколько раз.
— Джон Хадсон, «Будущее эмодзи»
Визуально графические символы проще и привлекательнее слов. Но чем ближе, тем больше сирены становятся похожи на монстров. Когда вы пытаетесь их прочесть и понять, они превращаются в загадочные знаки из незнакомого вам языка, хватают взаимодействие и откусывают ему голову. «Голые» иконки без текста улучшают внешний вид интерфейса за счет того, что он становится менее понятным.
Иконка — это символ, одинаково непонятный на любом языке. Неважно, какие языки вы знаете, — до значения иконки придется догадываться. Люди не просто так придумали фонетические языки, где можно объединить несколько символов, чтобы создать любое слово.
Многие дизайнеры убеждали меня использовать иконки в интерфейсе. Я спрашивал их: «Это действительно лучший интерфейс из всех возможных или он сделан по привычке?». Дизайнеры просто застряли в этой парадигме и не замечают ее упадка.
— Джеф Раскин, инициатор проекта Macintosh
Иконки модно выглядят и решают проблемы с нехваткой места. Конечно, в злоупотреблении чистыми иконками виновата не только Apple. Фирменными символами отравлен и «Материальный дизайн» Google. Вот для сравнения Gmail:
Иконки Gmail выглядят просто, но они заставляют задуматься о назначении кнопок. Если сконцентрироваться, их значение можно расшифровать. Через некоторое время вам будет помогать мышечная память, но краткосрочная и долгосрочная память будут принимать иконки с таким же трудом. А ведь пользователю почтового приложения стоило бы сосредоточиться на понимании и написании текста, а не на расшифровке интерфейса.
Стоп, а разве Google не измеряет все на свете? Они наверняка знают, что делают, в компании же работают ученые. Раз в Google выбрали подход с иконками без подписей, значит, иконки — это правильно. Но то, что подходит Google или Facebook, может не подойти нам. Мы еще увидим, что Google могла найти причину вне естественных наук. Как бы то ни было, Gmail предлагает и вариант с одними только текстовыми подписями.
Только текст
Изображения можно интерпретировать по-разному. В зависимости от контекста даже вездесущая иконка с лупой читается и как «поиск», и как «увеличение». Значение слова тоже зависит от контекста, но читается оно всегда одинаково. Что если иконки заменить на текст? Логично, что такой интерфейс будет работать лучше иконочного. В настройках Gmail можно заменить панель с иконками на текстовую версию:
Смысл кнопок теперь понятен, но интерфейс стал холоднее, менее человечным и веселым. Теперь он напоминает рабочий инструмент и, на удивление, кажется более сложным. Как это возможно? Текстовый интерфейс объективно удобнее, но из-за эстетических нюансов он так не воспринимается.
Текст — это рациональный выбор. Разумно структурированные и подписанные функции — основа взаимодействия человека с компьютером.
Иконки — это эмоциональный выбор. Хорошо сделанные иконки добавляют позитива. Эмоциональное воздействие нельзя измерить, но от этого оно не пропадает.
Недостаточно создавать работающие продукты, которые понятны и просты в использовании. Надо создавать продукты, которые привносят в жизни людей восторг и возбуждение, радость и веселье и, конечно, красоту.
— Дон Норман, книга «Дизайн привычных вещей»
Люди — и рациональные, и эмоциональные создания: «Мозг не обрабатывает информацию, извлекает знания и сохраняет воспоминания. Короче говоря, мозг не компьютер» (Роберт Эпштейн, «Пустой мозг»). Если по теме удобства иконок что-то и доказано точно, так это то, что иконки вместе с подписями работают лучше, чем только иконки или только текст.
Иконки с подписями
Иконка с подписью и эмоциональна, и понятна. Иконки с подписями работают всегда. Если иконка непонятна, то подпись ее объяснит. Так почему бы не использовать эту пару победителей?
Проблема в том, что это компромисс. Он снижает эмоциональный посыл иконок и простоту чистого текста, не экономит место и не украшает интерфейс. Иконки вместе с подписями занимают больше места по вертикали и создают больше визуального шума, чем если бы они использовались по отдельности.
С точки зрения эмоций предпочтительнее иконки, а рационально лучше заменить иконки на текст. В теории иконка с подписью — беспроигрышный вариант, но на практике в дизайне нет «серебряных пуль». Беспроигрышных вариантов нет, но есть компромиссы получше и похуже.
Теория и практика
Дизайн — не естественная наука. Это практическая отрасль, извлекающая выгоду из науки и измерений, но качество дизайна нельзя оценить только объективными измерениями. Пользовательское тестирование и аналитика не заменяют дизайнеров, но проверяют дизайнерские предположения. Не все в продукте может продумать дизайнер, и не все в дизайне можно измерить. То, что нельзя продумать и измерить, поможет охватить только общение с людьми, которые используют продукт.
Взаимодействие человека с компьютером строится на рациональном фундаменте. Мы живые существа, наше поведение нельзя просчитать, но с нами можно поговорить. Иконки, цвета, ритм, воздух, типографика и другие красивые вещи делают интерфейс приятнее, и за счет этого улучшают взаимодействие. Он становится не таким рациональным и более человечным.
Простые правила
Не спешите добавлять иконки, если с дизайном что-то не так, если он работает хуже запланированного. Иконки не исправят плохую структуру сайта. Добавляйте иконки в самом конце, не играйте с ними во время работы над вайрфреймом. За одной картинкой может скрываться тысяча слов. Хорошая информационная архитектура помещает правильные слова в правильный контекст. Прежде чем переходить к эмоциональной части интерфейса, проработайте рациональную.
Прежде чем выбрать иконку, спросите себя: какое слово она будет обозначать? Это правильное слово, понятное? Оно будет работать в этом контексте? Иконка без труда может вмещать много разных понятий. Слова же в контексте не так пластичны: в отличие от иконок, они подчиняются многим правилам.
Когда структура готова и можно заняться иконками и всем остальным, следуйте простому правилу: добавьте лишь те иконки, что необходимы, но не меньше этого минимума.
Относитесь к иконками с максимальным вниманием. Их улучшение может занять все ваше время. Они должны быть узнаваемы сами по себе, должны четко иллюстрировать понятие, которое представляют, и работать в контексте с другими иконками и понятиями.
Иконки похожи на прилагательные и наречия в тексте. Если их убрать, текст не превратится, как по волшебству, в литературный шедевр. Удаляйте лишнее, ищите подходящее, заменяйте расплывчатые и вычурные формулировки на точные и лаконичные.
Иконка, значок, символ, образ — каких только названий нет у этих атрибутов. Зачем они нужны, как их правильно использовать и что нужно знать, чтобы не запутать пользователя – всё это расскажем ниже.
Значок интерфейса может быть близок к одному из основных форм: прямоугольник, ромб, круг, треугольник, квадрат. Размытие показывает, что они имеют равный визуальный вес, потому что они превращаются в более или менее одинаковые капли.
В зависимости от формы значка вставьте его в соответствующий кадр оптической сетки. Например, квадратные значки более компактны, чем треугольные или удлинённые.
Чем компактнее значок, тем меньше места ему нужно. Чем более острые края или мелкие детали имеют значок, тем больше занимает пространство для художественной области.
Будьте внимательны, сетка должна помогать, а не ограничивать. Если значок визуально лучше с некоторыми торчащими элементами, пусть так и будет.
Чтобы сделать иконки острыми на экранах с сеткой, придерживайтесь пикселей и отдавайте предпочтение двухпиксельным границам для значков строк. Центрированные двухпиксельные границы обеспечивают достаточную толщину и чёткие силуэты.
Если вы выбираете однопиксельные границы для значков, они должны быть либо внешними, либо внутренними, но не центрированными.
Сцентрированные однопиксельные границы делают значок размытым в масштабе 100%, однако он кажется чётче при увеличении масштаба.
Задайте начальную и конечную точки диагоналей в соответствии с сеткой пикселей. Диагонали с углами 45 °, 30 ° и 60 ° выглядят более острыми, чем диагонали с неравномерными углами, такими как 13,7 ° или 81 °.
Лучше начать набор значков с самого сложного значка. Он определит уровень детализации и поможет сделать иконки того же визуального веса.
Когда значки имеют разные уровни детализации, более резкие привлекают больше внимания пользователя и кажутся визуально более тяжёлыми.
Пространство между соседними элементами значка не должно быть слишком маленьким или непоследовательным во всем наборе. Определите минимальный зазор и держите его повсюду, чтобы избежать «прилипания» контура.
Для значков линий лучше сделать минимальное пространство, равное толщине линии. Линии должны быть либо чётко раздельными либо точно связанными.
В наборах иконок вы можете повторять детали. Избавьтесь от них, чтобы сосредоточить внимание пользователя на важном. Чем меньше графического шума вы показываете, тем яснее его понимание.
Если целевой пользователь уже понимает, с чем он или она работает, нет необходимости повторять это снова и снова. Например, без иконок «@» на конвертах люди всё равно знают, что речь идёт об электронной почте.
Это правило также относится к различным дополнениям — рамкам, фону — вокруг иконки. Если они не помогают читать значок, уберите их.
Не смешивайте отображаемый объём с фронтальным изображением в пределах одного набора иконок. Гармония стилей поможет пользователям распознавать значки и понимать, что они имеют одинаковое значение.
Этот же принцип работает с иконками строк и заполненными значками. Если вы их смешиваете, люди могут подумать, что они имеют разное значение или статус. Конечно, если вы этого не хотите. Например, заполненный значок предназначен для команды ключа, а значки строк — для других команд.
Лучше иметь два варианта каждого значка в интерфейсах. Значок линии — для отключённого или обычного состояния. Заполненный значок — для состояния щелчка.
Перфекционизм — не панацея. Никому не нужны пиксельные совершенные линии ради идеальных линий. Но это важно для правильного, а не искажённого отображения значков в конечном продукте. Имейте в виду минимальное необходимое количество анкеров и отсутствие зазоров между соседними элементами.
Та же история с раздражающими размерами «8.999 px» или «100.001 px». Если фиксирующие фигуры расположены точно, края иконок выглядят острыми. И вы не рискуете получить чрезмерные якоря и промежутки при объединении фигур.
Многие редакторы интерфейсов, такие как Sketch, могут создавать SVG с ненужными элементами — чрезмерными группами, цветными слоями и обтравочными масками.
Смотрите, в Sketch всё выглядит хорошо.
Откройте этот SVG в другом редакторе (например, Adobe Illustrator). Вы заметите пустые слои, ненужные группы и иногда обрезающие маски. Всё это может вызвать проблемы, когда фронтенд-разработчики конвертируют значки в иконку или используют SVG на веб-странице.
Вы можете удалить этот мусор и пересохранить иконку.
Как видите, Sketch SVG (picture.svg) и отредактированный Illustrator SVG (picture_new.svg) имеют разные предварительные просмотры в вашем средстве просмотра файлов. Кстати, можно избавиться от мусора в значке в редакторе кода. Если вы знаете, как выглядит SVG-код, попробуйте удалить ненужные строки данных напрямую.
Конечно, все эти рекомендации исключительно субъективны. Но рекомендуем обратить внимание, где строгие геометрические иконы не выглядят лучшим образом.
Незаполненное пространство. Если на сайте есть пустые места, к примеру, «Нет задач» или «Все электронные письма прочитаны», лучше проиллюстрировать их иконками эмоций или поместить только текст. Эмоциональные иконки могут заставить пользователей улыбаться, в то время как геометрические значки не добавят никакой ценности для взаимодействия.
Маскоты и иллюстрации. Если в вашем интерфейсе есть талисман или иллюстрация, этот тип графики должен быть эмоциональным. В таком случае сложно представить, как дизайнер может изображать персонажа ограниченным выбором форм и придерживаться сетки.
Статья переведена и адаптирована на русский язык студией Netlab. Оригинал тут.
С иллюстрациями разобрались, переходим к иконкам. Все знают Noun Project и Flaticon. Отличные сайты, но часто нужно, чтобы иконки были в одном стиле. Ловите большие наборы иконок (от 260 до 9000+), чтобы «консистенси» ваших през, сайтов или приложений было на высоте.
1185 иконок от IconScout. Формат: SVG. Можно качнуть полный пак с GitHub. Коммерческое и некоммерческое использование при указании авторства. Apache License 2.0.
9888+ иконок. Форматы: PNG, SVG. Можно использовать в коммерческих и некоммерческих проектах, но обязательна ссылка на сайт. Полный текст лицензии.
260 иконок. Формат: PPTX. Иконки полностью редактируемы внутри PowerPoint: меняйте цвет заливки, обводки, размер.
350 иконок в мультяшном стиле. Форматы: PNG, SVG, TTF, EPS, PSD. Использование в любых целях, ссылка на источник обязательна. Лицензия CC BY-SA.
500 анимированных иконок от Icons8. Форматы: GIF, AE. Можно использовать в коммерческих и некоммерческих проектах при указании ссылки на источник. Полный текст лицензии.
1588 иконок. Форматы: PNG, SVG, TTF. Можно скачать целиком с GitHub. Любое использование и модификация, указание источника обязательно. Полный текст лицензии.
2000+ иконок от Google. Форматы: PNG, SVG. Полный набор качается с GithHub. Коммерческое и некоммерческое использование при указании авторства. Apache License 2.0.
230 трехмерных иконок в изометрическом стиле. Формат: PNG. Бесплатно доступно только некоммерческое использование с указанием ссылки на сайт.
800+ иконок от Amazon. Форматы: PNG, SVG, PPTX, EPS. Иконки на тему IT. Для светлого и темного фонов. Явного запрета на использование не клиентами AWS не обнаружил, но это не значит, что его нет. Используйте на свой страх и риск.
1800 иконок. Форматы: PNG, SVG, EPS. Щедрый подгон от Alexandru Stoica. Лицензии, судя по всему, нет, автор просто выложил иконки в своем Dribbble и разрешил делать с ними что угодно.
Кстати, в моем телеграм-дневнике полно всякой эксклюзивной информации о фишках PowerPoint, а также мой бесценный опыт за 5 лет создания презентаций для всяких там корпораций и не только. Например, узнайте главное правило иконок.
Flaticon — любовь навсегда! Найдётся любая иконка)
Download all icons in SVG, PSD, PNG, EPS format or as webfontsС тех пор, как они убрали поддержку десктопного приложения, сайт стал нахуй не нужон
У Icons8 есть не только анимированные. Статичных iOS иконок больше 10к и это только один из 20+ стилей. И ещё они просто очень хорошие ребята.
Designers, download the design stuff for free — icons, photos, UX illustrations, and music for…I8 крутые, но они мне показались достаточно популярными, чтобы не включать их в пост. Хотелось поделиться не самыми очевидными ресурсами. Да и вроде бесплатно не всегда вектор отдают. ред.
А я вас понял! да, всё верно)
То, что лицензии нет, как раз говорит о том, что она неизвестна публично на сайте, а может быть коммерческой, использовать не стоит или ун после запроса условий лицензии ее у автора по почте
Спасибо, поправил пост.
Уже к иллюстрациям был комент про моего бота t.me/deshelp_bot
К иконкам он так же относится.
Материал в статье так себе, лучше использовать бота и присылать мне находки, я их загружу в бота. Нежели по 10 иконок на статью выложить и набрать лайки)
Откровенно говоря, вашим ботом пользоваться неудобно, это просто длиннююююююющий список сайтов. Мне что каждый раз идти по этому списку? А как мне не промахнуться по нужной ссылке? Не надо повсюду за мной ходить и писать про своего бота :)
Да, в сети миллион сайтов с иконками, но я отфильтровал: только качественные, бесплатные и чтобы много (в среднем в каждом наборе нск тысяч иконок). Чувствуете разницу между отборным контентом с превью для удобства и тупо свалкой ссылок? ред.
Ссылки из статьи так себе либо уже есть в боте. Ну ок, без превью. 🤷🏻♂️
так себе либо уже есть в боте
то есть если в вашем чудоботе ссылки нет, то так себе, ну ок :)
бот кстати не работает сейчас
Я добавить то могу, но считаю, что некоторые иконки из статьи не заслуживают места в боте. К тому же, часть всё же есть в боте)
Это бессмысленный спор. Мне не нравится ваша статья - я минусанул. Вам не нравится бот - не пользуйтесь.
Всё)
И минус поставили и бота своего порекламировали) Красиво! Не нравится пост - дело вкуса, минусите и проходите мимо. Зачем спамить своим ботом. ред.
Над превью уже работаю, просто сайтов много, поэтому так долго)
Всё это действительно так (почти всегда). Но обо всём по порядку: сегодня я вам подробно расскажу о том, что такое векторный формат и почему логотипы желательно делать в нем.
Что такое векторная графика
Векторная графика — это категория компьютерной графики, которая для представления изображения использует фигуры, построенные по математическим формулам.
Обещаю, скоро всё станет понятнее, нужно чуть-чуть потерпеть…
Помните, в школе на геометрии нужно было построить окружность в системе координат? Для этого достаточно было знать только координату центра окружности и её радиус, верно? Таким же образом рисуется окружность и в векторной графике.
Подобным же образом рисуются кривые, прямые, ломаные линии, многоугольники, эллипсы и прочие, так называемые графические примитивы.
Помимо координат и размеров этим элементам в программе для создания векторных изображений можно задать:
- цвет заливки (однотонный или цветовым переходом — градиентом);
- наличие, толщину, форму и цвет обводки;
- расположение относительно других объектов (слоём выше или ниже);
Но основными параметрами в векторной графики являются координаты опорных точек и направление (векторов) линий, проходящих через них. Отсюда и название.
Кстати, о названиях: несмотря на то, что графические примитивы зовутся именно так, порой они могут представлять собой очень сложный на вид объект.
Например рисунок ниже — это один единственный примитив, представленный замкнутой кривой линией:
А этот примитив ниже и вовсе поражает своей фотореалистичностью:
Я обещал, что станет проще, но, похоже, всё становится только сложнее… Сейчас исправлюсь!
Чем векторная графика отличается от растровой?
Векторная графика часто противопоставляется растровой. И правильно делает: они отличаются на фундаментальном уровне со всеми вытекающими.
Посмотрите примеры ниже:
Слева — векторный синий круг размером 200 на 200 пикселей. Да, хотя в векторной графике самих пикселей нет, размер изображения можно задать и в них.
Справа — растровый синий круг такого же размера.
При этом файл векторного круга весит 2,16 Кб, а растрового — 4,73 Кб. Разница небольшая, да. Если бы они оба были размером 100 на 100 пикселей, разница была бы ещё меньше: 2,16 Кб против 2,24. Но чем больше будет размер обоих картинок, тем значительнее будет разница в весе файла.
К примеру: вес векторного круга размером 1000 на 1000 пикселей будет всё так же 2,16 Кб, а вес растрового файла будет уже 27,6 Кб — в 12,5 раз больше! Если брать рисунки 10000 на 10000 пикселей, то веса файлов будут 2,16 против 640 Кб — растровый файл будет уже в 300 раз тяжелее векторного.
Почему это происходит? В то время, как растровому файлу в последнем случае приходится нести информацию о 100 миллионах точек (пикселей), векторному всё также нужно знать лишь 3 параметра — размер круга, его местоположение и цвет.
Что будет, если увеличить те двухсотпиксельные круги?
Увеличенный фрагмент векторного файла:
Увеличенный фрагмент растрового файла:
Пиксели. Они повсюду. Вы их точно увидите!
Однако, не стоит полагать, что растровая графика во всём уступает векторной. У обеих категорий есть как плюсы, так и минусы, и каждой своё применение.
Плюсы векторных изображений:
1. Сравнительно небольшой вес файлов (особенно для больших размеров);
2. Масштабируемость изображения без потерь в качестве;
3. Простой перевод в растровое изображение;
4. Сравнительно простое и более качественное редактирование;
5. Широкие возможности для нанесения на поверхности (печать, шелкография, гравировка, тиснение, фольгирование, вырубка и другие).
Минусы векторных изображений:
1. Сравнительно большой вес файлов маленького размера (например, иконки 32х32 px) и файлов со сложной графикой (например, фотореалистичные иллюстрации);
2. Сложность создания фотореалистичных иллюстраций;
3. Необходимость в специальном программном обеспечении для полномерного использования — большинство графических редакторов, просмотрщиков работают только с растровой графикой.
Распространённые векторные форматы это: SVG, PDF, EPS, AI и CDR. Последние два разработаны специально для программ Adobe Illustrator и CorelDRAW соответственно, и максимально верно поддерживаются именно ими. Оба эти формата могут читаться и редактироваться другим ПО, но с некоторыми ограничениями.
Наиболее распространённым форматом является SVG, его можно просматривать и редактировать в любом векторном редакторе, и он поддерживается всеми современными браузерами.
Обратите внимание! У каждой типографии и производителей сувенирной продукции свои технические требования, так что они могут требовать разные форматы файлов. Поэтому лично я подготавливаю для клиентов несколько форматов, чтобы для любого случая нашелся подходящий.
Характеристики растровых файлов — полная противоположность оных у векторных.
Плюсы растра:
1. Сравнительно небольшой вес файлов маленького размера (например, иконки 32 на 32 пикселя) и файлов со сложной графикой (фотографии, фотореалистичные иллюстрации);
2. Относительная простота создания фотореалистичных изображений;
3. Отсутствие нужды в специальном программном обеспечении — все графические редакторы (в том числе и векторные), просмотрщики изображений и браузеры работают с растровыми файлами.
Минусы растра:
1. Сравнительно большой вес файлов (особенно для больших размеров);
2. Невозможность масштабирования без потерь в качестве изображения;
3. Сложный перевод в векторное изображение;
4. Сравнительно сложное редактирование;
5. Узкие возможности для нанесения на поверхности — возможна только печать.
В двух словах (очень общо и без тучи возможных нюансов) можно сказать, что для фотографий и фотоподобных изображений лучше использовать растровую графику, для всего остального — векторную. Последнюю всегда можно легко переконвертировать в растровый формат любого размера.
К слову, популярные форматы растровых изображений — это хорошо знакомые всем PNG, JPG, GIF, а также TIFF, PSD, BMP.
А теперь я расскажу вам один секрет.
На самом деле, мы не можем увидеть действительно векторное изображение на современных дисплеях.
Даже если открыть векторный редактор и нарисовать в нём векторный синий круг, изображение, которое мы увидим будет растровым! Всё дело в том, что все современные дисплеи состоят из пикселей, и если открыть файл с векторным изображением, компьютер (плеер, телефон или другое устройство) преобразует его в растровое. Иначе просто не получится.
Поэтому настоящие векторные изображение живут только в наших умах и сердцах!
Почему логотип должен быть векторным
Несмотря на то, что, как я сказал, на современных дисплеях любое изображение будет представлено в растровом виде, логотипы и многую другую графику изначально стоит создавать в векторе.
Причины, по которым это необходимо, основываются на всех преимуществах векторных форматов.
Во-первых, это, конечно, вес файлов. Векторные файлы уступают растровым в этом параметре только при очень малых физических размерах или сложных фотореалистичных изображениях. Но в малых размерах и разница между весами будет минимальной, пусть даже и в пользу растровой графики. А фотоподобные логотипы встречаются крайне редко (лишь в исключительных случаях), и всё равно, начиная с определённого размера, вектор-таки начнёт выигрывать.
Разумеется, это не самое главное преимущество, но порой, например, в дизайне сайта (где необходима быстрая загрузка картинок) это может быть существенным.
Во-вторых, логотип в векторе — это безграничные возможности для масштабирования: любой векторный логотип можно напечатать хоть в километр шириной (был бы достаточно большой принтер ) и всё равно на печати не будет видно злополучных пикселей, которые так сильно портят впечатление от графики.
Типичный пример, когда для качественной печати изображения не хватило разрешения (векторный рисунок решил бы эту проблему). Думаю, вам частенько встречается подобное..
Но дело даже не в том, что вы можете сделать из векторного изображение очень большое растровое, а в том, что вы можете сделать изображения абсолютно любого размера! Скажем, для шапки сайта логотип нужен ровно 60 px в высоту, для фирменного бланка — 300 px в ширину, а для печати фирменных футболок — не менее 4000 px. И все эти размеры можно легко подготовить, используя всего один векторный файл.
В-третьих, относительно простое и более качественное редактирование. Это не значит, что векторный формат поощряет постоянные изменения логотипа. Но однажды вам может понадобиться анимированная или 3D-версия, какой-то особый праздничный вариант, или вы решите добавить в логотип слоган — и в этом случае работать с векторным файлом будет намного удобнее, а итоговый вариант будет качественнее.
В-четвёртых, это — широкие возможности использования. Из векторного лого легко сделать растровый, а вот перевести логотип в векторный формат из растра не так-то просто (но об этом ниже). По мимо этого, во многих областях применения подойдут только векторы. Хотите выжечь лого в дереве? Нужен вектор. Сделать гравировку? Вектор. Изготовить печать (штамп)? Вектор. Вышить, вырезать, оттиснить, залакировать, изготовить вывеску… Для всего этого понадобятся именно векторные файлы, а не тот JPG, который стоит у вас на сайте или на аватарке в соцсетях.
Вы ещё тут?) Тогда ещё один секретик… На самом деле, все картинки, которые я называл векторными в этой статье, — это тоже растровые изображения, но сохраненные из векторного файла. Но, надеюсь, я вас не запутал этой информацией…))
В общем, я всё сказал! В следующий раз кратенько расскажу, как сделать логотип векторным, если у вас на руках есть только растр.
Читайте также: