Штирлиц — Сеть печатных салонов в Перми

Весь комплекс печатных услуг в Перми. Общирная сеть печатных салонов в Перми. Цифровая печать, цветное и черно-белое копирование документов, сканирование документов, ризография в Перми

Нарисовать иконку онлайн: Пиктограммы | Создание иконки онлайн

Как сделать favicon-иконку для сайта

Вы здесь

Главная … Полезно для бизнеса … Как нарисовать иконку для сайта

Леонид Родинский

Копирайтер

7 January в 17:04

Категория значков для веб-ресурсов превращается в трендовое направление дизайнерской разработки. Страницы уже достаточно шаблонизированы и оставляют всё меньше места для внедрения уникальных авторских элементов. Иконки – одно из них.

Решения для привлечения клиентов

Вам будет интересно

Наборы

В составе любого сайта существует определённое количество визуальных компонентов.

  • Во-первых, фотографии – основной материал для построения картинки.
  • Во-вторых, фирменная атрибутика – логотипы, эмблемы, шрифты и прочая корпоративная айдентика.
  • В-третьих, анимация и видео – иллюстративные вставки в контентный ряд.

Плюсуем программные эффекты (скроллинг, модальные окна), добавляем цвет и получаем примерный перечень основных составляющих дизайна. Забыли всего один пункт – иконки.

Между прочим, на каждом сайте их по несколько десятков, обозначающих папки, телефоны, тематические разделы и коммерческие предложения. Художественное оформление маркированных списков и чек-листов – ещё одна позиция применения. В конце концов, традиционное обозначение присутствия в социальных сетях тоже не обходится без рассматриваемого элемента.

Разработка авторских коллекций таких иконок – дело непростое, затратное по времени и творческому потенциалу. Конечно, желающие могут самостоятельно экспериментировать с помощью какого-нибудь онлайн-конструктора (например, iconsflow.com) или приложения (AdobePhotoshop, Illustrator, CorelDraw). Но благоразумнее воспользоваться готовыми решениями, благо в сети они бесплатно представлены в достаточном количестве и любых изобразительных стилистиках. Другое дело – адаптировать коллекцию к нужному цветовому решению, создав структуру, гармонирующую с обликом сайта. Но эта задача решается довольно просто, при помощи коррекции оттенков, доступной новичкам в любом графическом редакторе.

Фавикон

В противовес предшествующему разделу, здесь рассматривается один-единственный элемент – небольшой значок, сопровождающий представление сайта в сниппете поисковой выдачи, на закладках браузера и в меню сохранённых страниц. Чаще всего такие иконки содержат графическую картинку или отдельную версию однобуквенного логотипа. Задача – брендировать веб-ресурс, выделить его из череды перечня других площадок интернета.

Процесс создания таких эмблем разбит на два сегмента.

  • В первом обращаемся к бесплатным сервисам-конструкторам.

Все они несут почти одинаковую нагрузку и предлагают аналогичный функциональный набор. Различия таятся лишь в деталях – размере сохраняемого файла, встроенном графическом онлайн-редакторе, предлагаемым библиотекам изображений. Например, площадка favicon.by даёт возможность загрузить или нарисовать собственную иконку, а bestwebservice.ru ограничивается уже готовым изображением, но оперирует большим (даже слишком) перечнем размеров.

  • Второй сценарий – воспользоваться приложением для создания (редактирования) графических файлов.

Существуют специализированные программы, заточенные только для фавиконов (например, FaviconCreate). Их достоинство состоит в простом интерфейсе и возможности проводить сохранение сразу в нужный формат ico. На этом привилегии заканчиваются. Потому что потенциал разработки в AdobePhotoshopнесоизмеримо выше с единственной оговоркой – придётся установить отдельный плагин для добавления соответствующего расширения. Но учитывая возможности онлайн-конструкторов это и не требуется. Интернет-площадки легко конвертируют любой популярный jpeg илиpngв иконку.

Вообще вся тема фирменного стиля – к которому относятся и фавиконы, и наборы значков – приобрела важное звучание. Сайты и аккаунты в социальных сетях перестали заниматься простым наращиванием контентной массы, переключившись на качественные параметры. А здесь никак не обойтись без корпоративной атрибутики или знаков личного бренда.

В следующей статье рассмотрим требования к логотипу на YouTube и приёмы, помогающие его создать.

Наши работы

Наша команда

  • Вадим Скопинцев

    Генеральный директор

    Сделаем лучшее решение для привлечения клиентов из интернета, сделаем продажи!

  • Дмитрий Карпинский

    Директор по пропаганде

    Экспонента, бизнес должен и будет расти по экспоненте! Продавать, будете продавать!

  • Евгений Белоусов

    Директор по продажам

    Предложу варианты решения ваших проблем- вам останется лишь выбрать!

  • Павел Шульга

    Старший специалист по контекстной рекламе

    Грамотно используем Ваш рекламный бюджет. Выйдем на максимум заявок!

  • Евгения Лю-Ти-Фу

    Руководитель PR направления

    Ваш имидж в наших руках. Если вас нет в Интернете, то вас нет в бизнесе!

  • Диана Зайцева

    UX/UI дизайнер

    «Протачиваем» Ваш ресурс для получения им продающих свойств. Захватываем клиентов для Вас

    !

  • Леонид Белкин

    Менеджер проектов

    Сделаем Ваш сайт продающим. Конверсия будет расти!

  • Дмитрий Трацевский

    Руководитель разработки

    Разработанные нами сайты работают как часы!

  • Татьяна Николаева

    Менеджер проектов, переводчик

    Пишем только уникальные и интересные тексты на русском и английском. Вам понравится!

  • Кирилл Миченус

    Разработчик

    Разработаем классный, продающий сайт

    . Внедрим интересные идеи!!

  • Марина Петренко

    Контент-менеджер

    Раскрываем все положительные стороны Вашего бизнеса для увеличения целевой аудитории!

  • Виктор Токмачев

    Менеджер по работе с иностранными клиентами

    Наши идеи подходят всем — иностранные клиенты охвачены!

  • Татьяна Ромакина

    Копирайтер

    Создадим уникальные продающие статьи. Лучший контент для Вашего сайта!

  • org/Person»>

    Леонид Родинский

    Копирайтер

    Написать уникальные тексты и заголовки – этого мало. Наполняем сайты неповторимым содержанием!

  • Анастасия Бондарева

    Копирайтер

    Правильно написанный рекламный текст способен творить чудеса! Удивительно, но слова могут продавать! И мы Вам это докажем!

  • Вячеслав Киосе

    Копирайтер

    Текст – это не просто слова. Посетители Вашего сайта получат информацию с внятным и понятным смыслом.

  • Стань одним Из нАс

    Трудоустройство

    Хочу работать!

Клиенты

Наши услуги

САМОЕ ИНТЕРЕСНОЕ НА СТРАНИЦЕ
“ЗЕКСЛЕР” В Facebook и ВКОНТАКТЕ

Как нарисовать иконки для лендинга в сервисах Canva и Crello

Рисуем иконки в Canva

Если у вас еще нет своего аккаунта в сервисе, то для начала нужно будет сделать два простых шага:

Теперь можно переходить к рисованию.

Первым делом нужно задать размер для будущей иконки. Для этого нажимаем кнопку «Использовать специальные размеры» и вписываем нужные цифры. Я для примера нарисую картинку 256 х 256 пикселей.

Внимание! Указывайте сразу тот размер, который вам нужен. Потому что если потом вы захотите изменить параметры картинки, то сделать это бесплатно не получится. Так можно только в платной версии.

Нажимаем кнопку «Создать» и попадаем на следующий экран. В левой его части находится меню, а в правой — рабочий лист.

Теперь начинаем рисовать. Заходим в меню «Элементы», и видим там целый список разных фигур. Какие-то из них можно использовать бесплатно, а за какие-то нужно платить. Но по этому поводу переживать не стоит — бесплатной версии Canva для работы вполне хватает.

Поэтому выбираем нужную фигуру — круг. Левой кнопкой мыши переносим его на рабочий лист, берем за угол и растягиваем на весь периметр.

Обратите внимание: если вдруг вы где-то ошиблись, то всегда можете отменить или вернуть свои действия с помощью кнопок в верхнем меню.

Теперь выбираем цвет. Кликом мыши выделяем нашу фигуру и нажимаем на черный квадратик в верхней части страницы. А в открывшемся меню задаем нужный цвет.

В результате цвет меняется не только у нашей фигуры, но и у цветового квадратика. А система еще и запоминает его во внутреннем меню.

Следующим шагом добавляем на рисунок остальные детали. Для этого можно опять полистать раздел с элементами или просто набрать в поиске нужный запрос.

Дальше действуем по той же схеме. Выбираем нужный элемент, перетаскиваем на лист и редактируем. Растягиваем, двигаем, поворачиваем, меняем цвет. Если рисуем сложную композицию (а как раз это мы и делаем), то повторяем всё то же самое с разными элементами.

В итоге получается готовая картинка.

Осталось только ее сохранить. Для этого в верхнем меню нажимаем кнопку «Скачать». Выбираем формат файла и снова нажимаем «Скачать». А в открывшемся окне указываем, в какую папку на компьютере мы хотим сохранить этот файл и как он будет называться.

Важно! В бесплатной версии Canva у вашей картинки будет белый фон. Прозрачный доступен только в платной подписке.

А что же насчет серии иконок?

А давайте нарисуем и их. Если теперь вернуться на главную страницу Canva, то мы увидим, что наш рисунок сохранился в профиле.

Нажимаем на эту картинку и опять попадаем на экран редактирования. Теперь, чтобы нарисовать другую иконку, мы просто выделяем ненужные элементы рисунка и удаляем их кнопкой Delete.

Получается вот такой шаблон:

Теперь остается только добавить нужные элементы и сохранить новый файл на компьютер.

Вот и всё. Давайте теперь посмотрим на второй сервис — Crello.

Рисуем иконки в Crello

Начало здесь такое же, как и в предыдущем случае. Регистрируемся в системе, выбираем в настройках русский язык и… всё. Начинаем работу.

В отличие от Canva, здесь размер изображения можно задать прямо на главном экране.

А чуть правее находится поле с последними размерами, которые вы использовали. Это удобно. В следующий раз, когда вы будете рисовать иконки для другого лендинга, сможете просто выбрать формат — к примеру 256 х 256 пикселей — и сразу начать работу.

Но давайте вернемся к нашей иконке. Задаем ее размер и переходим дальше, на рабочий экран.

Здесь всё выглядит почти так же, как и в Canva. Справа — рабочий лист, слева — меню. Но есть и отличия, которые облегчают работу.

Но давайте все-таки начнем рисовать.

Схему работы будем использовать ту же, что и при работе в Canva: брать нужные элементы, перетаскивать на лист и корректировать.

Итак, выбираем в списке элементов круг и переносим его на лист. При этом слева появляется меню, в котором можно:

Последняя опция здорово помогает, если разные элементы рисунка накладываются друг на друга. Когда я рисовала иконку в Canva, сверху оказался слой с большой шестеренкой. И, чтобы подправить другие элементы, мне пришлось сначала сдвинуть ее в сторону. А в Crello можно просто поменять слои местами и сразу редактировать то, что нужно.

Но давайте вернемся к нашей иконке.

Изменяем цвет круга и растягиваем его на весь лист. А дальше в левом меню заходим в раздел «Поиск» и набираем нужный запрос. В появившемся списке выбираем шестеренку и перетаскиваем ее на лист.

Так же, как и в Canva, здесь с фигурами можно делать что угодно — двигать, поворачивать, выбирать нужный цвет и размер. И так же какие-то фигуры можно использовать бесплатно, а за какие-то нужно платить.

Задаем нашей шестеренке нужный цвет, размер и копируем ее два раза. Новые шестеренки тоже подправляем так, чтобы получилась цельная картинка.

Теперь нужно ее сохранить. Нажимаем на кнопку «Скачать» в верхнем меню и выбираем формат.

Обратите внимание! Crello предлагает нам не 2, а 5 вариантов форматов, в том числе и .png с прозрачным фоном.

Для нас этот формат — самый удобный. Так мы сможем выбрать, на каком фоне делать блок с иконками — на белом или на цветном.

Теперь осталось только указать папку на компьютере и дать название файлу. Всё, картинка готова!

Дорисовываем остальные иконки из серии

Чтобы нарисовать остальные иконки, давайте перейдем обратно на главный экран (для этого можно нажать на логотип Crello в верхнем левом углу) и выберем «Мои проекты».

Система перебросит нас в личный кабинет, где хранятся наши работы.

А дальше действуем так же, как и в Canva. Нажимаем на картинку с шестеренками, удаляем из неё ненужные элементы, добавляем нужные и сохраняем. Так же рисуем и остальные иконки.

Впрочем, не забывайте, что не только иконки делают продающие тексты качественными. Для того чтобы ничего не упустить, воспользуйтесь нашим чек-листом. Полезная штука, говорят 🙂

Значок редактирования — Бесплатный онлайн-инструмент для рисования в пиксельной графике

Популярные

Новые

Избранные

Частные

Назад

Далее

:

Размер пикселя (1)

Х:0, Y: 0

Ширина: 256px
Высота: 144px

Ширина: 0, Высота: 0

Загрузка. .