19 заметок с меткой иконка

Векторные иконки для ретины

Скоро буду делать адаптивную вёрстку сайта на моей основной работе. Один из этапов подготовки: перевод иконок в векторный формат SVG. Иконки сделаны по моде: плоские с лёгким намёком на объём.

Флэт иконки с бликами в формате SVGФлэт иконки с бликами в формате SVG

За основу взяты старые иконки:

Иконки в формате PNGИконки в формате PNG
PNG vs SVGPNG vs SVG

Предыдущие иконки рисовал тоже я, но многие идеи брал из гугла или ещё откуда-нибудь.

Подготовка к адаптивной вёрстке

Кроме иконок, нужно было постепенно упростить вёрстку сайта. Мы отказались от бокового фона и от колонок, вместо них более логично разбили сайт на горизонтальные этажи сверху вниз. Всё это делали не сразу, а путём АБ-тестов.

Адаптивная вёрстка для NENCOM

bg.nencom.com

Версии сайта для телефона, планшета и обычного компьютераВерсии сайта для телефона, планшета и обычного компьютера

Разделение версий

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

Мы решили, что планшет — даже если он большой — это всё тот же планшет, которым управляют жестами и читают, как книгу или журнал. Поэтому на вертикальном планшете отображается самая простая «мобильная версия» (такая же, как на телефонах), а в горизонтальной ориентации — промежуточная «планшетная версия».

▼ Читать дальше

Три медведя

Основной канал @AvtodetiRu в Твиттере разделился на три направления. Двум новым каналам @Avtodeti_forum и @Avtodeti_video потребовались узнаваемые иконки с использованием основного персонажа — медвежонка. Были решены две задачи: чтобы иконки хорошо различались в общей ленте, и чтобы при этом не пострадало их единство.

Три медведя, как в сказкеТри медведя, как в сказке

Если и правда по сказке, то расклад такой: с Айпадом играет Мишутка, самая общительная (посередине) — мама, а слева, получается, папа :)

Иконки в ленте ТвиттераИконки в ленте Твиттера

На роль цветового маркера (для отделения иконок друг от друга) отлично подошло автокресло.

Сайт huberits.ru

Нужно было сделать сайт, представляющий фирму M.Huber I.T.S. GmbH в России, сохранив фирменный стиль и улучшив вёрстку оригинального сайта.

Обязательные условия: ЧПУ, универсальность, красивый и читабельный вид на всех разрешениях от 1024 до 1920, отсутствие горизонтальной полосы прокрутки — в общем, стандартный джентельменский набор для современного сайта.

huberits.ru

Страница продукцииСтраница продукции

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

Вид сайта на разных экранахВид сайта на разных экранах

▼ Читать дальше

Favicon 2: medvedkovo.ru

Фабрика «Медведково» делает неплохие бюджетные сумки. А вот сайт у них не самый аккуратный (типографика, вёрстка, нюансы). Фавиконка получена грубым уменьшением до нужного размера. При ресайзе она «поплыла», потеряла в деталях и цвете. Сравните два варианта:

Исходный favicon против улучшенного вариантаИсходный favicon против улучшенного варианта

Данная фавиконка идеально отвечает условиям акции «Фавикон бесплатно», которая стартовала в моём блоге и продлится ещё долго. Оставляйте заявки в комментариях! ;)

▼ Читать дальше

Стартует акция «Фавикон бесплатно»!

Что-то у меня мало заказов на favicon’ы :) Поэтому запускаю инновационную наноакцию в формате 16×16 пикселей:

«Фавикон бесплатно»

Иконка первого участникаИконка первого участника

Акция будет проходить в три этапа:

Этап 1. Фавикон рисуется выбранному сайту из топа Яндекса.

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

Этап 2. Бесплатный редизайн favicon’а получают удачные примеры из комментариев. Пишите адрес сайта и, скорее всего, вам повезёт :)

Обязательные условия:
— хороший сайт с посещаемостью от 100 человек в день;
— концепция иконки не меняется.

Если же вам нужна принципиально новая фавиконка, то это уже за небольшую плату.

Этап 3. Примерно через полгода подведём итоги.

▼ Читать дальше

Транспортная компания GPFT

gpft.ru

Небольшой сайт для транспортной комании GP FreightTruck:

Главная страница сайтаГлавная страница сайта

Сайт будет развиваться, а пока его можно рассматривать как сайт-визитку. Дизайн нарисовала знакомая девушка, а я выполнил вёрстку, доработку мелочей (кнопочки, фавикон, стили) и подключение сайта к своей CMS.

▼ Читать дальше

Иконки-метки для анонсов новостей

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

Метки (тэги) в зависимости от типа новостиМетки (тэги) в зависимости от типа новости

▼ Читать дальше

Иконка ICQ

Когда-то давно мы все дружно пересели на квип (qip). Он был настолько хорош, что ему даже прощались периодические конфликты с icq-сетью. Потом в квипе появилась собственная регистрация, и из-за этого путаница в аккаунтах. Мой логин выглядел как 47748654-2, и мне совершенно не нравилось, что он не совпадает с номером аськи. Последней каплей для меня стало то, что в квипе появился баннер. В итоге при перестановке винды я полез на сайт icq. В новой версии аськи после тонкой настройки меня всё устраивает. Только вот иконка по-прежнему ужасно смотрится в мелком варианте. Сравните новую иконку и ту, что я сам нарисовал:

Оригинальная иконка ICQ вся размазываетсяОригинальная иконка ICQ вся размазывается

Если кому-то нужна моя иконка (16×16), скачивайте: icq.ico.

Как создавалась фавиконка для «Автодетей» (часть 2)

Любую фавиконку можно нарисовать в Paint’е: берём лупу ×8 и рисуем точечки, как в мозаике. Но такие удобные инструменты, как наложение градиента, произвольная прозрачность — в Paint’е недоступны. Поэтому лучше использовать фотошоп :)

Вот весь процесс:

ПлашкаГрадиентДве лапы готовыТо, на чём сидит мишкаВот такие рукиПравая лапаРуки готовыГоловаРисуем ременьТень и носикСочный градиентОбводка головыИтоговая версия фавиконки

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

Задача

Нужно заново отрисовать логотип Автодетей —

Мишка на оранжевой плашкеМишка на оранжевой плашке

— в размере 16 на 16 пикселей.

▼ Читать дальше

Как создавалась фавиконка для «Автодетей» (часть 1)

Как рисовать фавиконку? Покажу на реальном примере.

Старая фавиконка

На старой фавиконке, прослужившей верой и правдой несколько лет, красовались дети: Старая фавиконка (девочка постарше и мальчик помладше). Иконка на момент создания соответствовала тематике сайта.

Старая фавиконка была получена простым уменьшением знака «Осторожно, дети!» до размера 16×16 пикселей и раскрашиванием в фирменные цвета: серый и оранжевый.

Процесс создания предыдущей версии фавиконкиПроцесс создания предыдущей версии фавиконки

▼ Читать дальше

Фавиконки (favicon)

В этом посте собраны годные фавиконки старого образца (16×16 точек) за моим авторством:

  • astronel
  • avtodeti
  • avtodeti_v2
  • biobran
  • cs-fashion
  • cyberface
  • diaclub
  • dominus
  • ekofriend
  • nencom_v2
  • fitnes-marfino_v2
  • fnxp
  • gbip_v2
  • plunix
  • gdwl_v2
  • gpft
  • reaktivy
  • kupaemsa
  • mklider
  • naholste
  • nikermann
  • ofgp
  • packland
  • pajeroservice
  • proproduction
  • rainbow_v2
  • ranforce
  • rukodelnitsy
  • tfmarket
  • senpolia-nn
  • vishenka
  • vodalux
  • xumuk
  • avtodostavka
  • besson
  • camelot
  • ejonok
  • fotogravika
  • sanclinic
  • icq
  • sisibol
  • stinnol

▼ Читать дальше

Гарантия и подарок от «Автодетей»

Готовые иконки с подписямиГотовые иконки с подписями

▼ Читать дальше

Пиктограммы для XuMuK.ru

Незамысловатые и аккуратные:

Неорганические реакции Органические реакции Редактор формул Электронное строение атома Конвертер величин Уравнивание реакций

Пиктограммы для сайта «Финэксперта»

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

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

Сайт и форум «Строгинет»

strogi.net

Главная достопримечательность нового дизайна — это пиксельный рисунок района Строгино:

Главная страница портала «Строгинет»Главная страница портала «Строгинет»

▼ Читать дальше

Пиктограммы для сайта «Автодетей»

Для сайта «Автодетей» придумано и нарисовано около 100 пиктограмм, вот некоторые из них:

аварии многодетным семьям акция на троих лучшая цена скидки корпоративным клиентам краш-тесты раскраски детям детские сказки

▼ Читать дальше

Сайт «Автодетей»

avtodeti.ru

Апдейт. Эта страница уже неактуальна, так как после оптимизации в начале 2012 года сайт заметно изменился. О том, что было сделано, напишу в отдельном посте.

С компанией «Автодети» я сотрудничаю с момента её зарождения. За 5 лет сайт повзрослел, появились новые сервисы, разделы, акции, увеличился выбор товара, и в 2010 мы провели необходимый редизайн. Были решены 3 задачи на упрощение: навигация по сайту, подача материалов и процесс выбора товара.

Сайт «Автодетей», 2010Сайт «Автодетей», 2010

▼ Читать дальше

Иконки для форума «Строгинет»

Весь набор иконокВесь набор иконок

У каждого раздела форума теперь есть своя запоминающаяся иконка.

Иван ТитовИван Титов
Фрилансер, музыкант, физтех по жизни, семьянин, философ.
© 2004...2017