Как рисовать иконки

Илья Кукушкин

24 марта 2015

Здравствуйте.

Вы советуете рисовать пиктограммы в Фотошопе. Однако, когда выполняешь обводку контура, она получается «мягкой».

Скажите, как рисовать нормальные иконки. Покажите хотя бы на примере одной. До этого все пиктограммы рисовал в векторном редакторе.


Сергей Чикин
Я советую рисовать пиктограммы вектором в фотошопе в том случае, когда пиктограмма будет использоваться на экране.

Если сразу делать растр, то при масштабировании линии размоются и перестанут попадать в пиксели. А рисовать ещё где-то нет смысла: всё равно потом импортировать в макет в фотошопе.

Начнём с того, что проблема «мягкой» обводки решается настройками контура:

Теперь можно нарисовать что-нибудь.

Мне как раз нужна иконка газеты.

Сначала я изучаю изображаемый объект. Пропорции подсказывает гугл:

Особенности подмечаю на том, что есть под рукой:

Возьму для примера первую полосу из архива Нью Йорк Таймс. Сразу подгоняю размер под другие иконки. Тут важен визуальный вес, а не математические параметры:

Чтобы узловые точки прилипали к пиксельной сетке, нужно поставить галочку вот тут:

cmd+k

Для линий объектов, повёрнутых на угол не кратный 45°, прилипание к сетке может оказаться вредным, поэтому клавиши [cmd] и [k] могут быстро затереться 🙂

Уже видно, что газета получается «тяжелей» остальных объектов. Немного уменьшаю:

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

Добавляю деталей. Проверяю, укладываются ли 6 колонок так, чтобы поля газеты были равными (У меня случайно получилось, что — да. Иначе пришлось бы сделать газету на пиксель шире.)

Вот тут линии противно склеиваются, образуя тёмное пятно. При увеличении этого не видно, а на предыдущем скриншоте сразу бросается в глаза:

Теперь название. В моих иконках все линии одной толщины, поэтому я не могу себе позволить вместо заголовка нарисовать толстую линию. Быстро набрасываю буквы, детали игнорирую:

Уменьшаю до нужного размера и каждую букву загоняю в пиксельную сетку:

Наполняю газету:

Почти готово. Меня смущает количество чернил. Иконка получилась сильно плотней своих соседей. Разряжаю строки, убираю Титаник.

Газета снизу заворачивается. Чтобы усилить этот эффект нужна тень. Но тень использовать нельзя, так что я придумываю хитрый ход — ставлю нижние строки плотнее к краю газеты, чтобы около края плотность линий увеличивалась, создавая кажущееся затемнение.

Честно говоря, мне даже просто вот так нравится:

Я ещё подумаю какой вариант выбрать. На сегодня всё.

С помощью фотошопа можно не только редактировать собственные фотографии, но и создавать иконки для компьютера. Ими можно заменить стандартные виды папок. Как это сделать? Давайте рассмотрим в данной статье. Прежде всего, следует сделать доступным для себя формат ico. Для этого необходимо всего лишь установить в фотошоп соответствующий плагин. Его можно найти на портале itbc или на любом другом специализированном сайте. Определите, для какой системы Windows (32-х или 64-х разрядной) его нужно найти.

В скаченном архиве вы найдете файл, расширение которого значится как 8bi. Его нужно переместить в папку Фотошопа с плагинами. Когда это сделаете, перезапустите Photoshop. Теперь вы легко сможете работать с форматом ico.

После этого, наконец, можно переходить к работе над созданием иконки. Не составит труда первый шаг тем, кто неплохо рисует в программе. Откройте пустой документ и собственноручно создайте будущую иконку. Сделать это необходимо на прозрачном фоне. Разрешение установите примерно 512х512 пикселей. Не более! Саму иконку впоследствии сохраним в еще меньшем размере. Как вариант, если вы плохо рисуете, можно просто найти в интернете любую картинку на прозрачном фоне в формате png.

Ее также нужно открыть в программе, после чего следует изменить размер.

Подойдет — 256×256 пикселей. Можете также добавить что-то своего, дорисовав некоторые детали. Затем — сохраните в доступном теперь формате ico.

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

Отблагодарите нажатием на кнопку!

Оцените страницу кол-вом больших пальцев!

Loading…

.

Иконки, которые можно найти на сайте бывают нескольких видов.

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

 

Что следует учитывать при разработке небольшого значка для сайта:

  • Пользователь буквально ежедневно работает со значками в панели инструментов, поэтому важно, что бы ваш знак отличался от других и был запоминающимся, но в тоже время простым.
  • Сходство значка и фирменного стиля.

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

Оформление заказа

Заполните контактную информацию и мы свяжемся с вами в течении 1 часа и вы сможете оформить заказ удобным для вас способом

Добавить комментарий

Закрыть меню