Иконки для сайта, поиск и создание - Online

Тема в разделе "Мегафлуд", создана пользователем WiZXaK, 25 дек 2012.

  1. WiZXaK

    WiZXaK Причиняю добро

    Регистр.:
    8 сен 2012
    Сообщения:
    582
    Симпатии:
    800
    Иконки для сайта - "мелкая" деталь дизайна сайта которая меняет все!
    Основная задача иконок - упрощения процесса восприятия и обработки информации пользователем сайта.
    Считаю, что создание иконок должно производиться совместно с общим дизайном сайта (создаваться вами в графическом редакторе ), но в случаях острой необходимости (а скорее особой лени и экономии) необходимо найти готовые иконки для сайта.

    Генераторы иконок:
    http://iconbench.com/ - Отличный генератор иконок.
    http://makeappicon.com/ - Резайз изображений до иконки.
    http://kraken.io/ - Оптимизатор изображений.
    http://www.convertico.com/ - Конвертер иконок.
    http://cooltext.com/ - Интересный сервис текстовых иконок.
    http://www.simwebsol.com/ImageTool/ - Генератор Лого (иконок).
    http://iconfactory.com/ - Поиск и подбор иконок.
    http://loadergenerator.com/ - Настройка и формирования GIF индикатора процесса. (Загрузка...)

    Поиск иконок:
    http://www.iconsearch.ru/
    http://iconizer.net/
    http://www.iconfinder.com/
    http://findicons.com/
    http://www.iconseeker.com/
    http://icons-search.com/
    http://www.iconlet.com/
    http://www.iconspedia.com/

    Наборы иконок:
    http://www.iconarchive.com/ - Архив иконок.
    http://www.freeiconsweb.com/ - Большой набор иконок.
    http://www.mobiletuxedo.com/touch-gesture-icons/ - Жесты.
    http://www.endlessicons.com - Набор монохромных иконок.
    http://cambelt.co/ - Заглушки изображений и иконки.
    http://iconmonstr.com/ - Набор чернобелых иконок.
    http://copypastecharacter.com/ - Иконки "Символы" Юникод.
    http://thenounproject.com/ - Коллекция мнемографики.
    http://www.iconpot.com/ - Архив бесплатных иконок.
    http://www.freeiconsdownload.com/ - Набор иконок по категориям.

    Бонус:
    http://3d-pack.com/ - Онлайн генератор изображений 3D коробки

    Основные ошибки при создании иконок
    1) недостаточная различимость иконок (плохое качество)
    2) слишком много элементов в одной иконке (загруженность иконки)
    3) лишние элементы (иконка должна легко «читаться»)
    4) отсутствие единого стиля иконок (непохожие по размеру, цвету, типу графики и т.д. - это ужасно).
    5) ненужная перспектива и тени в мелких иконках (тень как клякса)
    6) слишком оригинальные метафоры (wtf кракозябры)
    7) нет учета национальных и социальных особенностей (непонимание картинок некоторыми людьми)
    8) не используйте изображения элементов интерфейса в иконках
    9) внимательней относитесь к тексту внутри иконок (это скорее замечание)
    10) мимо пикселей (размытые границы маленькой версии иконки).
    11) Использование готовых иконок из сети =)
    12) Стиль иконок должен соответствовать стилю всего сайта.
    13) Использования иконок не к месту - (иконки должны грамотно информировать или для удобства заменять текстовый смысл информации, для пользователя - это их основная задача).

    P.S: хорошая статья на тему: "Как использовать иконки в дизайне"
     
    White11Dragon нравится это.
  2. RST

    RST Писатель

    Регистр.:
    22 дек 2012
    Сообщения:
    4
    Симпатии:
    0
    а как сделать иконку прозрачной? я сделал иконку, например там кружок. а все кроме кружка - белое, как это оставить прозрачным?
     
  3. tdk25

    tdk25 Писатель

    Регистр.:
    31 авг 2012
    Сообщения:
    2
    Симпатии:
    1
    evolvent нравится это.
  4. arsen

    arsen НЕрядовой

    Регистр.:
    16 июн 2011
    Сообщения:
    861
    Симпатии:
    306
    Открой свою иконку в adobe photoshop
    1 Продублируй слой
    2 нижний слой отключи( значок глаза на панели слоев(ориентировочно правый угол)- ты получил прозрачный фон
    3 выдели верхний как рабочий(кликни по нему) и удали белое(или дурой фоновый цвет) стиркой или быстрым выделением
    4 сохраняй в формате PNG или GIF
     
    evolvent нравится это.