Редактируйте значки SVG онлайн и бесплатно, выбрав одно из приложений ниже
Выберите редактор
Как редактировать значок SVG
Выберите приложение
Вверху над окном редактора вы можете увидеть кнопки выбора приложения. Щелкните по одному из них, чтобы запустить приложение. Позже вы можете переключить это и попробовать другое приложение.
Следуйте шагам
Теперь вы можете использовать приложение внутри редактора для редактирования значка SVG. Следуйте инструкциям, которые вы увидите внутри приложения. Если вам не нравится это приложение, попробуйте другое.
Наслаждайтесь результатом
Теперь, когда у вас есть понравившееся изображение, не забудьте сохранить его на свой компьютер. Также добавьте наш сайт в закладки и на главный экран вашего устройства, чтобы не потерять ссылку.
Почему SVG идеально подходит для создания иконок
Адаптивный дизайн — популярная тема. Экраны давно вышли за рамки стандартных разрешений, и сайты можно просматривать как на устройствах размером с ладонь, так и на больших мониторах. Сайт должен выглядеть одинаково независимо от размера устройства и плотности пикселей. Существует множество различных техник и технологий для адаптации дизайна и контента.
Как сделать иконки на компьютере с Windows из скриншота и фото
Векторная графика, SVG, на мой взгляд, одна из самых интересных тем в этом направлении. Графические значки — ключевой элемент практически любого веб-сайта или приложения. Как правило, они немного весят, но вопрос выбора формата все равно остается актуальным. Помимо стандартных форматов изображений, у разработчиков есть два основных варианта: использовать SVG или иконочные шрифты.
Что лучше? Давайте разберемся ниже.
Сайт должен выглядеть одинаково независимо от размера устройства и плотности пикселей. Этого можно добиться с помощью формата векторной графики — SVG. SVG отлично подходит для иконок. Хороший выбор для начинающих и продвинутых пользователей SVG. Интерфейс аккуратный и не загроможден множеством инструментов, которые вы не будете использовать.
Редактор хорошо подходит для тех, кто плохо знаком с векторной иллюстрацией. Пользователь не должен теряться среди инструментов, которым непонятно, для чего они используются. Он содержит весь базовый набор для создания обычного изображения: формы, текст, слои, тени, рамки, фон и т. Д. Он не может сравниться с полноценным настольным редактором, но его более чем достаточно для быстрого дизайна и редактирования. Вы можете создать изображение с нуля или загрузить уже существующее.
Другие редакторы и инструменты
Редактор экспозиции
Измените экспозицию ваших фотографий онлайн в два клика. Наш бесплатный онлайн-редактор экспозиции позволит вам изменить экспозицию любого изображения.
Редактор яркости изображения
Измените яркость ваших фотографий онлайн в два клика. Наш бесплатный онлайн-редактор яркости позволит вам увеличить или уменьшить яркость любого изображения.
Изменить контраст
Отрегулируйте контраст ваших фотографий онлайн в два клика. Наш бесплатный онлайн-редактор яркости позволит вам изменить контрастность любого изображения.
Как Сменить Значок Ярлыка или Создать его на Компьютере
Резкость изображения
Повышайте резкость своих фотографий онлайн и бесплатно. С помощью нашего простого фоторедактора ваши каскадерские фотографии станут еще четче и профессиональнее.
Фильтры Instagram
Добавьте фильтры Instagram к своим фотографиям, чтобы получить идеальные снимки. У нас есть все фильтры из приложения Instagram, и даже больше, причем совершенно бесплатно.
Редактор иконок
Редактируйте свои SVG-иконки бесплатно с помощью нашего мощного инструмента. Бесплатно меняйте цвет целого или отдельных элементов, вращайте, кадрируйте, меняйте фон и многое другое.
Удалить фон
Автоматическое удаление фона за секунды. Здесь вы можете удалить фон с изображения и изменить его на прозрачный или белый.
Источник: photoretrica.com
Как рисовать иконки: с нуля, упрощение, разная степень редкости
Самый детальный разбор со всеми нюансами я сделаю для первого случая, а остальные два имеют тот же пайплайн, но со своими особенностями.
Инструменты
- Pinterest для сбора референсов
- Adobe Photoshop для работы с цветом и формами иконок
- 3D-редактор Blender или SketchUp для быстрого и более точного создания сложных объектов, как замена построению от руки в Photoshop
- Unity для интеграции итогового арта в сцену. Например, художники в CM Games сами выгружают арты в движок. Так можно облегчить работу технических художников или программистов, сэкономить время и избежать недопонимания при передаче ассетов.
Придумать иконку предмета с нуля
Идеи и эскизы
Работа над иконкой, как и над любой артовой задачей, начинается с технического задания. Для меня оно бывает 2 типов — нестандартные мозговыносящие идеи и обычные предметы, типа сундуков. В первом варианте работа идет своим чередом, а вот для выполнения второго есть хинт — добавить фан в виде интересных деталей, неожиданного решения в дизайне или альтернативных идей реализации. Не всегда получается, но чем чаще пробовать, тем ближе к успеху. В итоге можно пройти путь комментариев от лида “чёт мне ниче не нравится” до “я целýю твои мысли”, когда робкие попытки настоять на своей идее переходят в полное доверие коллег к исполнителю.
- семечко
- саженец
- лейка
- розовый цветок
- лазурный цветок
- бутылочка с лазурной эссенцией
- бутылочка с розовой эссенцией
Чтобы обозначить главные особенности иконок, делаем мудборд. Это могут быть небольшие зарисовки, желаемые детали, другие иконки, референсы или характеристики, которые помогут придерживаться заданного стиля.
Приступаю к поиску форм, чтобы каждая иконка отражала свою функцию. На этом этапе собираю референсы игровых иконок в Pinterest, а еще дополняю их фотками из Google.
Делаю несколько вариантов одной иконки, собираю их на 1 лист и самостоятельно анализирую. Для этого проще обозначить, что не нравится в иконке, перейти к следующей и найти тот вариант, который точно понравится. Если такого не вышло сразу, выбираю самый удачный вариант, меняю в нем элементы и отсекаю лишние детали, затем снова оцениваю. Далее спрашиваю фидбэк у людей, чтобы оценить иконку непредвзято и выбрать лучший силуэт.
Блокинг
Строю иконки в цвете простыми формами, используя Перо и Эллипсы.
Первый векторный слой делаю как общий контур иконки. Следующие векторные слои я создаю с обтравочной маской, чтобы затем обводить с помощью них нужный контур внутри формы. Верхний слой в этой иерархии создаю растровым. Обвожу быстрыми клавишами один из векторных слоев и заливаю растр нужным цветом.
Многие художники придерживаются правила рисовать на большом полотне, чтобы в конце уменьшить картинку и тем самым скрыть дефекты. Хороший подход, но с иконками есть риск потратить больше времени на гипер-проработку. Поэтому делаю их меньше 512х512px и всегда конвертирую слои в 1 смарт-объект, чтобы видеть иконку в нужной сцене в 100% разрешении, а лучше меньше.
Детализация
2 варианта — пользоваться только векторными инструментами или использовать растровые слои с обтравочной маской на каждом векторе.
В первом случае можно увеличить или уменьшить иконку без потери качества. Особенно полезно, если печатать иконку как наклейку, плакат и другую канцелярию. Либо использовать эту иконку в более видном месте игры, где она будет сильно крупнее, чем задумывалось изначально.
Но я воспользуюсь вторым вариантом, потому что это экономит время и у меня получаются более живые переходы внутри формы с помощью кисти нежели пера.
От детализации 2 цели — добиться объема и материальности. Объём я получаю светом, полусветом, собственной тенью, полутенью и рефлексом.
Настраиваю цвет у света, тени и рефлекса. Я стараюсь делать свет теплого оттенка, тень менее насыщенной, а рефлекс холодным и средней насыщенности между светом и тенью. В больших иллюстрациях такой приём не всегда работает правдоподобно, но в малых формах необходимо не делать сильного контраста, чтобы избежать провалов в форме и грязного цвета.
Задаю степень отражения в материалах. На блестящих предметах (металлы, стекло, влажные поверхности) рисую блик с четкими краями, а рефлекс делаю относительно ярким с размытыми краями. Матовые материалы (дерево, ткань) наоборот создаю с размытым бликом, если он будет вообще, и с сероватым рефлексом, близким по тону к собственной тени, так же без четких краев.
На прозрачных материалах, например стекле, рисую свет на том месте, где на непрозрачном предмете была бы тень, а тень на месте света. Оба с размытыми краями. Но блик останется неподвижен и с четкими границами, если стекло блестящее или с размытыми, когда стекло матовое.
По таким правилам продолжаю рисовать каждую иконку для садоводства.
Финализация
Делаю обводку эффектом на каждый цвет и придерживаюсь схожих тонов. Таким образом в маленьком размере будет выглядеть, что это одна цельная обводка с разными оттенками.
Проверяю картинку обводкой на наличие артефактов. Векторные инструменты в свою очередь позволяют избежать их появления. К тому же так легче и быстрее редактировать форму, которая требует четких и плавных краев. А чем меньше иконка, тем важнее этот аспект.
При необходимости можно применить падающую тень. Ее можно сделать эффектом, как обводку, но я чаще настраиваю ее в Unity компонентом Shadow. Это позволяет поставить тень именно в тех окнах, где она нужна, и скрыть, если мешает.
Тень другого характера можно нарисовать вектором и увести в альфу с помощью маски. Но соответственно такую тень нельзя отключить и ее будет видно везде.
Оставляю как можно меньше пустого места внутри картинки. Имя и размер при импорте в игру задаю по договоренности с командой. Я обычно делаю 256х256px и в Unity выставляю сжатие поменьше, если требуется. Контролирую этот момент в каждой картинке через параметр Max Size в меню Inspector.
Упростить здание для иконки
Задача. Сделать иконку домика оранжереи, сократить элементы, заменить цвет на более чистый и яркий.
Проблема. Исходный объект хорошо выглядит в 3D-сцене, но не выигрышно смотрится в меню магазина.
Подготовка
Сбор референсов здесь опционален, так как у меня достаточно информации для скетчирования. Поэтому открываю 3D-редактор и размещаю готовую модель здания в нужном ракурсе.
Эскиз
Для упрощения иконки выясняю, что первое выделяется в здании, какие элементы отличают его от других, чтобы обозначить главные детали и убрать второстепенные. Решётка на окнах — мелочь, золотые завитки — можно упростить, цветочки на деревьях — ерунда, кирпичики на фундаменте — сокращаю с 8 до 2. Еще можно оставить по 1 камню вместо 3 по бокам, но мне нравится ритм из оригинала, поэтому оставляю.
После разбора у меня получается эскиз из составных простых форм с раскладкой ключевых цветов. Так из исходного зелёного цвета будет другой оттенок зеленого, который подобран в нужном диапазоне палитры.
Блокинг
Из эскиза строю здание, используя простые формы. Как и в первом задании, делаю это при помощи векторных инструментов.
Придерживаюсь метода работы со Смарт-объектами, чтобы сразу понимать, как смотрится иконка во всех необходимых окнах.
Детализация
Аналогичный этап рисования прослеживается в первом задании. Прорабатываю объем в каждой детали и настраиваю свет.
Иконки разной степени редкости
- маленький
- средний
- большой
Скетчи
Решила делать акцент на количестве монет в каждой иконке, а также на разнообразии цвета и силуэта.
Чтобы придумать образы, я представляю, как монеты используется в жизни. Обычно их бережно складывают в кошелек или копилку, мелочь сбрасывают в стеклянную банку, крупную валюту хранят в сейфе. Первую иконку изображаю несколькими монетами, сложенными в стопку, как покерные фишки. Их вроде немного, но и не слишком мало, чтобы пренебрегать ими. Вторую иконку делаю в кошельке.
Он не большой, зато забит до края, а значит сумма там приличная. Красный цвет кошелька приятно сочетается с золотыми монетами и выгодно отличает от первой стопки. Третью иконку рисую в сундуке, чтобы подчеркнуть высокую ценность как в фэнтези сеттинге. Пурпурный королевский цвет подчеркивает его уникальность.
Монеты должны быть одного цвета, а окружающие предметы другого. Так зритель легче отличит главную сущность от обрамления, тем самым сначала увидит монеты, затем кошелек и сундук на втором плане.
Силуэты должны быть разные по ритму композиции. Первый идёт в вертикаль, второй округлый, а третий немного рубленный. Это еще больше усилит различие иконок. Лучше вписывать иконки в квадрат, что поможет без труда ставить их в любое окно игры.
Моделирование
Иконка отражает суть предмета, а декоративность лишь дополняет ее. Например, игрок будет взаимодействовать с монетами, а не рассматривать отдельно каждый изгиб. По этой причине полируем 2 вещи — органичность и читаемость. В данных иконках достаточно добавить след кошачьей лапки как декор, потому что игра про кошек.
Чтобы ускорить процесс рисования, я моделю относительно сложные объекты в Blender или беру их из игры, если есть уже готовые. Например, сундук достаточно выставить в нужном ракурсе и сделать скриншот, чтобы потом вставить в свою иконку.
Блокинг
Как и в предыдущих двух заданиях делаю векторный блокинг иконок, чтобы потом приступить к детализации кистью. В данном случае достаточно сделать одну монету, сконвертировать ее в смарт-объект и размножить. Группировать кучки в одну папку и, где нужно, маской положить падающую тень.
Финализация
Рисую остальные монеты для пака похожим образом. Если не подходит ракурс, немного редактирую.
Заключение
Резюмируя, главными правилами в создании иконок будут легко читаемый силуэт, чистота цвета и не контрастный объем. Звучит просто, но чтобы прийти к этому выводу мне потребовались годы практики. Приходили в помощь учителя, друзья, руководители и, конечно, интернет. Но некоторые навыки необходимо наработать практикой.
Например, от скетчирования будет зависеть качество иконки в целом. Ведь зритель должен за секунду понять силуэт микро-картиночки. Раньше я делала столько вариантов одной и той же иконки, сколько позволяло воображение. Со временем это перестало быть необходимым, почти сразу знаю, что и как изобразить. Но период проработки вариантов необходим для правильного мышления.
Я научилась комбинировать варианты между собой, отсекать непонравившиеся детали, спрашивать фидбэк и снова рисовать новые скетчи. И в какой-то момент заметила, что трачу на скетч всего несколько минут, быстрее вижу главное и легче доношу свою идею до зрителя.
621 0 850 16
Хорошая статья! Скажите пожалуйста, случалось лив вашей практике, что приходилось обрисовывать по готовой модели, где она уже вся детализирована?
Степан Степанов (STIKA) Хорошая статья! Скажите пожалуйста, случалось лив вашей практике, что приходилось обрисовывать по готовой модели, где она уже вся детализирована?
Добрый день. Спасибо за отзыв) Да, сталкивалась. Такой случай как раз описан в пункте про упрощение здания для иконки, если вы берете модель из своего проекта. Но если вы нашли идеально подходящий референс и хотите на основе него сделать иконку, то я рекомендую брать только ракурс, а дизайн полностью разрабатывать свой.
Источник: render.ru
Рисуем набор иконок в Фотошоп
В этом уроке мы создадим в Фотошоп набор иконок на одну тему.
Сложность урока: Средний
- #1. Подготовка рабочей области
- #2. Создаём основу
- #3. Тень
- #4. Добавляем значки к иконкам
- #Заключение
- # Комментарии
что получится в итоге
В этом уроке мы создадим набор иконок в Фотошопе. Набор иконок должен иметь одинаковый фон и одну тему. Для тренировки мы создадим иконки с солнцем, снежинкой и значком RSS. Давайте начнём.
1. Подготовка рабочей области
Шаг 1
Начнём с создания нового документа размером 350 px на 350 px. Кликните в белом квадрате возле настройки Содержимое фона (Background Contents), чтобы выбрать новый цвет фона рабочей области.
Шаг 2
В диалоговом окне Цветовая палитра (Color Picker) выберите серый цвет фона рабочей области (#e0e0e2).
Шаг 3
Всегда хорошо, когда работа с самого начала структурирована. Создайте группу слоёв и назовите её «Солнце» (Sun). Там будут размещаться все слои, относящиеся к созданию иконки с солнцем.
2. Создаём основу
Шаг 1
С помощью инструмента «Прямоугольник со скруглёнными углами» (Rounded Rectangle Tool ) нарисуйте прямоугольник с размерами 83 px × 64 px и установите радиус 8 px. Для получения более точного результата воспользуйтесь панелью Свойства (Properties). Здесь вы сможете просто ввести точные размеры.
Шаг 2
Удерживайте Shift, а затем нарисуйте ещё один прямоугольник со скруглёнными углами. Эта новая фигура будет добавлена к предыдущей. Установите её размер 36 px × 36 px с радиусом 3 px.
Шаг 3
Нажмите сочетание ctrl+T для трансформирования фигуры, а затем нажмите и перетащите за пределы ограничительной рамки, чтобы повернуть ее на 45 °.
Шаг 4
Убедитесь, что фигура находится в центре предыдущего прямоугольника. В CC 2014 вы можете проверить положение фигуры, перетащив её и привязав к направляющей в центре предыдущей фигуры.
Шаг 5
Нажмите Enter, чтобы сохранить результат. Вы можете обнаружить, что в диалоговом окне подтверждения вас информируют о том, что фигура превратится в обычный контур. Это означает, что вы больше не сможете редактировать её с помощью панели «Свойства». Просто нажмите «Да» (Yes).
Шаг 6
Расположите фигуру как показано на рисунке ниже.
Вот результат в масштабе 100%.
Шаг 7
Нарисуйте аналогичную фигуру поверх предыдущей, которая на 1 px меньше. Вы можете сделать это, дублируя фигуру, а затем изменяя её точки или просто создав новую фигуру.
Шаг 8
Задайте цвет #57adf8.
Шаг 9
Дважды щелкните по фигуре, а затем примените Обводку (Stroke) и Наложение градиента (Gradient Overlay), используя следующие настройки.
Для градиента используйте следующее расположение цветов. Чтобы открыть редактор градиента и изменить настройки градиента, щелкните окно предварительного просмотра градиента.
Шаг 10
Уменьшите уровень заливки (Fill) до 11%. Содержимое слоя будет прозрачным и останется неизменным.
3. Тень
Шаг 1
Создайте новый слой под основой. Активируйте инструмент «Кисть» (Brush Tool) (В) и затем под иконкой нарисуйте тень.
Шаг 2
По-прежнему используя инструмент «Кисть» (Brush Tool) (В), добавьте более сильную тень прямо под кончиком иконки.
Шаг 3
Зажав CTRL, кликните меньшую по размеру пиктограмму, чтобы выделить меньшую фигуру. Создайте новый слой и используйте белый цвет поверх выделенной области. Убедитесь, что вы используете мягкую кисть Жёсткость (Hardness)-0%.
Шаг 4
Когда закончите, снимите выделение (Ctrl+D) и уменьшите непрозрачность (Opacity) слоя.
Шаг 5
Создайте новый слой и снова выделите меньшую основу иконки. Заполните выделение градиентом от белого к черному. Измените режим наложения (Blend Mode) слоя на Перекрытие (Overlay), а затем уменьшите его непрозрачность (Opacity).
Шаг 6
Добавьте ещё один слой. Создайте большое эллиптическое выделение в нижней части иконки, а затем нажмите Ctrl на слое основы, чтобы пересечь его. Заполните выделение градиентом от белого к черному. Измените режим смешивания (Blend Mode) слоя на «Экран» Screen и уменьшите его непрозрачность (Opacity).
Так выглядит результат в масштабе 100%.
Шаг 7
Зажав Ctrl, кликните по миниатюре слоя-основы. Создайте сверху новый слой, затем выберите Редактирование > Обводка (Edit > Stroke). Установите светло-голубой цвет и ширину (Width) 1 px.
Ниже вы можете видеть разницу до и после добавления обводки внутри иконки.
Шаг 8
Добавьте маску к слою с обводкой. Залейте её чёрным цветом, чтобы спрятать все контуры. Проведите по некоторым участкам линии белым цветом, чтобы показать их. Таким образом, теперь у нас выделен край иконки.
На изображении ниже можно детально рассмотреть выделение края.
Шаг 9
Добавьте корректирующий слой Цветовой баланс (Color Balance) выше иконки. Мы используем его, чтобы изменить цвет фона.
Чтобы упростить управление слоями, давайте изменим имя слоя на Изменение цвета (color changer).
Шаг 10
Залейте маску корректирующего слоя чёрным. Выделите основу иконки, а затем заполните её белым. Таким образом, корректирующий слой влияет только на значок. Перетащите ползунки, чтобы изменить цвет.
Шаг 11
Дублируйте все слои основы иконки и поменяйте параметры в корректирующем слое Цветовой баланс (Color Balance) по отдельности.
4. Добавляем значки к иконкам
Шаг 1
Для нашей первой иконки мы добавим значок солнца. Начните с рисования желтого круга.
Шаг 2
Примените стили слоя Внутренняя тень (Inner Shadow) и Внутреннее свечение (Inner Glow), используя следующие настройки. Используйте цвет #7b6708 и установите оба режима наложения Умножение (Multiply).
Шаг 3
Используйте более светлый жёлтый цвет в центре солнца.
Шаг 4
Добавьте эллипс более яркого жёлтого цвета в верхнюю часть солнца.
Шаг 5
Нарисуйте тонкую, светлую фигуру на верхней правой стороне солнца, чтобы выделить её. Удалите лишнее с помощью мягкого ластика, чтобы придать естественности.
Шаг 6
Дальше нужно добавить солнцу сияние. Начните с рисования двух желтых треугольников, как показано ниже. Поместите их за солнцем.
Шаг 7
Выделите обе векторные фигуры и затем продублируйте их: Ctrl+C, а затем Ctrl+V. Поверните новые фигуры на 45 °.
Шаг 8
Продолжайте дублировать и вращать фигуры, пока у нас не будет достаточно лучей.
Шаг 9
Примените Внутреннюю тень (Inner Shadow) с цветом # b48f0b и Внешнее свечение (Outer Glow) с цветом # f9dc7e.
Шаг 10
Скройте солнце, нажав значок глаза возле слоя. Нарисуйте больше жёлтых треугольников, как показано ниже.
Добавьте круговую фигуру в центр треугольников и установите режим траектории Вычесть переднюю фигуру (Subtract).
