Мой взгляд на дизайн иконок



Читая блог Иконосказ, а именно топики хабраюзеров grokru и INCWADRA, я подумал, что попал на некий конвейер дизайнеров Apple. Нет, в этом нет ничего плохого, но тем не менее эта назойливая мысль не покидала меня весь день.

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

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

Скачать .png + .psd:

#1 (значки слева-снизу)
#2 (значки по центру)
Dropbox ругается на трафик, поэтому выложил на ifolder.

UPD: Обновил архивы, исправил мелкие дефекты.
Поделиться публикацией
Комментарии 90
    +49
    Иконки браузеров навеяли мысль о WIndows 8
      +3
      Собственно, да
      >>Без бликов, градиентов и теней
      Метро, вот только на бэкграунде всё же есть градиент
        –2
        >вот только на бэкграунде всё же есть градиент
        Это ковёр.
          0
          Ниже уже сказали, что по духу больше напоминает Адобовские икноки.
          –1
          Но ведь красиво же, этого не отнимешь!
            +8
            Так себе. Более того, кое-где потерялась информативность. Например, по пьяни и не разберешь, что там значок Firefox (инь-янь какой-то, а не огнелис)


            Тем более, автор лукавит на счёт градиентов и теней. Слева — без градиентов и теней. Справа — вариант автора:


            А градиенты и тени добавляют живости и объема иконкам.
              +2
              Я хотел сказать «закруглений», но почему-то написал «градиентов».
              Впредь буду более внимательным. Спасибо.
                –1
                По пьяни за клаву лучше не садится. Чревато разными глупостями
                  +6
                  Правый значок файрфокса какая-то обосравшаяся лиса, извините.
              +4
              Для любителей минимализма сделал альтернативную версию.

              Можно ещё в ч/б перевести, но, раз вы выложили еще и psd, то каждый сможет сам.

              Спасибо!
                +12
                Горькая правда в том, что иконки получились очень низкого качества.
                  0
                  Согласен с вами. Это лишь набросок, показывающий как я вижу иконки.
                    +2
                    Зато здесь первый яндекс, который мне нравится. Но отстойнейший фейсбук.
                      –2
                      Покажите пример низкого и высокого качества, т.е. как Вы оценили их как низкого качества? (я не дизайнер)
                        +6
                        я взял несколько иконок и увеличил их для наглядности. в таком размере очевидно, что графика размытая и нечёткая, либо края сглажены слишком грубо. по исходникам видно, что сами очертания иконок делались быстро.

                        image
                          0
                          Вы правы, иконки делались в спешке: было стойкое желание «попасть в тему» и не пролететь в очередной раз с инвайтом.
                          Огромное Спасибо НЛО, впредь я постараюсь радовать вас качественными статьями и контентом.
                          +1
                          ещё один пример — иконка аськи. она единственная с жирной тёмной обводкой. хотя было бы логичнее сделать цветок без контуров, по образу и подобию остальных иконок.
                        +4
                        Опера похоже на МТС :-)
                          +7
                          Следующий автор решит что иконки были слишком квадратные и он их подпилит.
                          Машина иконописи запущена. )))
                            0
                            ЗЫ

                            Возможно, было бы круче делать в паке одинаковые иконки, а то у Оперы, RSS и т.д. тени есть (под разными углами), а у Эксплорера (думаю, будет не очень популярная иконка) тени нет.
                              0
                              Мой косяк. Добавил тень IE. Сейчас остальным подправлю угол
                              +1
                              Ждём треугольные иконки под треугольный планшет -)
                                0
                                А что, мне нравиться! Не всем же иконкам быть с закругленными уголками :) Может ещё тень добавить на манер парения в воздухе?
                                  0
                                  Иконка vk, очень плохая
                                    +2
                                    В оригинале она не лучше
                                    image
                                      0
                                      Полностью согласен. У Вас бы её по центру поставить.
                                        +1
                                        в конце страницы смотрите
                                        vkontakte.ru/help.php?page=about
                                          0
                                          Вечно блин копирайты замечаю) Вы наверное про psd логотипа, если я не ошибаюсь?
                                            0
                                            ага, можно использовать «В» для иконок
                                      +1
                                      (значки справа-снизу)

                                      Слева?..
                                        +1
                                        Упс…
                                        +1
                                        Честно говоря, так себе. Единственное — мне в целом понравились иконки браузеров (которые в углу), но и там есть куча косяков — например внутренняя тень только у Оперы, а у Файрфокса какой-то цветной мусор остался, хотя все остальные иконки контурные.
                                          0
                                          Да, подправил.
                                          0
                                          В «общение» и «браузеры» отступы очень страшноваты.
                                            +2
                                            На мой взгляд не самые лучшие шрифтовые решения для Вконтакта.

                                            Иконка хабра стала бы более узнаваема если инвертировать цвета.

                                            Если Вы делали универсальные иконки (как поступили с иконками Вконтакте), то для Яндекса возможен вариант с Yandex.com.

                                            У Facebook'a более жирное начертание чем на иконке.

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

                                            Вы убрали так привычный многим объем в иконках, сделали их плоскими, лежащими на поверхности. Одна лишь Опера выбивается из общего стиля внутренней тенью, но тут надо выбирать либо небольшая потеря узнаваемости, либо общий стиль :)
                                              +5
                                              По мне достаточно уныло, не могу объяснить почему…
                                                0
                                                Где привязка к сетке? Все набросано на глазок.
                                                Вот фон нравится :)
                                                  0
                                                  Скачал, хотел поставить некоторые на десктоп в Win7 — «файл значков не обнаружен». Конвертить в ico запала уже не хватило :) Это я к тому, что было бы неплохо и ico-версии включить в раздачу
                                                    +1
                                                    Fb == Flash Builder?? :D

                                                    А вообще хорошо получились, без градиентов даже поинтереснее.
                                                      +1
                                                      Вижу только значки. Они разные. Когда человек рисует несколько значков, а потом выкладывает их, он передает идею и стиль. Либо идея не проработана, либо Вы сильно поспешили.
                                                        0
                                                        Почему IE зелёный?
                                                          0
                                                          IE решил сделал цвета стандартных плиток «Восьмерки».
                                                            +2
                                                            А почему тогда Chrome белый? Он как белая ворона в этом ряду.
                                                            Помимо того, что он выбивается из общей темы, так еще и слeпит ;-)
                                                          +9
                                                          Хром для правого набора видится мне таким:

                                                            +6
                                                            Вы сделали тиснение, градиенты, цвета и называете это минимализмом?
                                                              +1
                                                              Минимально тиснения, градиентов и тени. «Раз их почти не видно значит их нет» — возможно такие мысли у автора
                                                                0
                                                                Минимально тиснения, градиентов и тени значит без тиснения, градиентов и тени в случае минимализма. А «совсем чуть чуть всего» — это далеко не минимализм.
                                                                  0
                                                                  Поясню: я просто не в интересах оправдывать автора, уж не обессудьте
                                                                +44
                                                                правильная иконка firefox
                                                                  +21
                                                                  Firefox+Firebug
                                                                    –1
                                                                    Похоже скоро на сет появится маленький файрфоксик :). Судя по животику.
                                                                      +8
                                                                      «Похоже, кто-то слишком много ест!»
                                                                        0
                                                                        Fennec?
                                                                          –1
                                                                          Хромофокс
                                                                        0
                                                                        Ой, я не могу! Порадовал!

                                                                        –2
                                                                        Иконка Skype в таком наборе выглядит слишком круглой…
                                                                          +1
                                                                          У вас квадратики не выровнены по границам пикселей (а интересно, в PS вообще есть привязка векторных узлов к границам пикселей?). Поскольку дизайн делался именно для экранного носителя, считаю это недочетом. Также, значок ICQ с черными линиями смотрится чужеродно. Вконтакте в виде vk — не узнаваемо. Также, кнопка с Оперой выпуклая, а все остальные браузеры плоские — это зачем? И значок Хрома, который большой, тоже почему-то стал рельефным. Крупный значок фаерфокса испорчен.

                                                                          На крупных кнопках размеры и положение значков и букв пляшут как хотят, не выровнены.

                                                                          Выложил дизайн на Хабр? Не жди пощады.
                                                                            0
                                                                            а интересно, в PS вообще есть привязка векторных узлов к границам пикселей?

                                                                            Snap to pixel
                                                                            +2
                                                                            В ваших иконках квадраты, как третья нога. Не понятно зачем они там нужны, как функцию играют, о каком минимализме идет речь тоже не понятно. Особенно поразительный иконки слева сверху, где пиктограмма занимает наверное 1/6 площади. Сами по себе иконки как-будто из разных наборов. А у бедных эпилептиков скорее всего случится шок. В общем, по моему мнению вы просто неудачно содрали идею интерфейса метро.
                                                                              0
                                                                              Единственное оправдание левых иконок — дополнительная информативность поверх них не затрагивая внутреннее строение.
                                                                                +13
                                                                                Если быть откровенным — очень достали вот такие статьи с иконками отвратительного качества.
                                                                                Перестаньте пожалуйста, ребята.
                                                                                В даном случае ужасно все. От шрифтов и формы до цветов и «попаданием» в пиксели.
                                                                                «Дизайнерам» совет. Когда будете в следующий раз рисовать квадрат в Photoshop — нажмите вот эту галочку.



                                                                                Извиняюсь перед ненавистниками Apple за скриншот под Mac os
                                                                                  –29
                                                                                  Может сами нарисуете? А то критиковать-то все мастера, а делают немногие. Я вот очень благодарен автору за его «отвратительное качество» как вы выразились. Я рисовать не умею, мне такие иконки очень даже нравятся
                                                                                    +21
                                                                                    Вот серьезно — не понимаю когда так отвечают. Когда я ем борщ в столовой — я же не должен готовить борщ лучше чтобы понять и сказать, что он совсем не вкусный.
                                                                                    Сам нарисовать я могу без проблем. А смысл? Кому нужны хорошие значки, тот готов потратить на это деньги и нанять хорошего дизайнера.
                                                                                    Ну и как главный аргумент — критика адресована не вам.
                                                                                    Читайте что пишет автор —
                                                                                    «С удовольствием выслушаю критику».
                                                                                      –11
                                                                                      Объясню почему я так отвечаю. Авторитеты, типа вас — всегда появляются в топиках и начинают рассказывать тем немногим, кто делает доброе дело, как они херово его делают и лучше бы вообще не позорились. Результат таких комментов, все меньше авторов готовы показывать и делится своей работой, т.к. опять придет умник, который знает как надо. И не очень-то похоже на критику, когда пишут «очень достали вот такие статьи с иконками отвратительного качества». Критика могла быть без таких выражений раздражения как минимум, если конечно вы вообще понимаете что такое критика. Ваш пример с борщом плох — вас никто не собирался насильно заставлять качать или использовать иконки из поста. Не нравится — пройди мимо, а то достали такие теоретики которые только пиздеть мастера
                                                                                        +7
                                                                                        Возьмем предыдущий пост с иконками как пример.
                                                                                        Автор пишет:
                                                                                        «И поскольку мне было скучно, я решил тоже вспомнить былое и наштампить иконок. Заняло все это порядка 18-20 минут»

                                                                                        Так вот если благодаря мне и «авторитетам» вроде меня (хотя я себя на Хабре авторитетом совсем не считаю) таких постов о том, как автору стало скучно и он наплодил паршивых иконок или картинок, станет меньше — я буду просто счастлив.

                                                                                        Тем более не место здесь вам. Тыкать и материться здесь не принято (кроме очень редких исключений). Даже если аргументов в ответ не осталось.
                                                                                          +1
                                                                                          И еще хочу добавить одну вещь.
                                                                                          Хорошему автору плохая критика безразлична.
                                                                                            –10
                                                                                            > Так вот если благодаря мне и «авторитетам» вроде меня (хотя я себя на Хабре авторитетом совсем не считаю) таких постов о том, как автору стало скучно и он наплодил паршивых иконок или картинок, станет меньше

                                                                                            Плохие посты не выходят на главную, вы место в БД хабра экономите? Я вас назвал авторитетом в сфере диванных теоретиков, оснований считать вас авторитетом на хабре не имею.

                                                                                            > Тыкать и материться здесь не принято (кроме очень редких исключений). Даже если аргументов в ответ не осталось

                                                                                            Я этого и так не делаю кроме редких исключений. Аргументы я вам привел, вам в них что-то непонятно, что вы решили что их нет? Да и избавьте меня от советов что мне делать, тут это тоже не принято
                                                                                      0
                                                                                      На рынке нету предложения. Вот спросом и малокачественные пользуются.
                                                                                      +4
                                                                                      Вот сколько раз уже просили рисователей:
                                                                                      Раз есть ICQ и Skype, то почему, $%^#@, нет Jabber и GTalk? Неужели, они такие сложные?
                                                                                        –2
                                                                                        А нафиг они никому не нужны, тем более у красноглазых проблем с иконками быть не должно — все запускается через консоль, не?
                                                                                          0
                                                                                          не.
                                                                                        +5
                                                                                        Набег дизайнеров-любителей на Хабр. Хотя, чем бы дитя не тешилось )
                                                                                          0
                                                                                          Фурифокс не тру.

                                                                                          А MS IE заслуживает следующей иконки:
                                                                                          t.co/HHoFwKs
                                                                                            0
                                                                                            И главное можно без теней, без градиентов, немного повёрнуто и не по центру за все костыли!
                                                                                            –3
                                                                                            Хорошо! Мои комментарии не прошли даром
                                                                                              +2
                                                                                              Картинка умерла?
                                                                                                0
                                                                                                Раскритиковали же как, вот видать обновляет. Только чёт долго, потому может и в правду умерла картинка.
                                                                                                  0
                                                                                                  This account's public links are generating too much traffic and have been temporarily disabled
                                                                                                    0
                                                                                                    Не думал, что дропбокс будет ругаться на трафик. Перезалил на ifolder.
                                                                                                    На свое FTP побоялся кидать, можете пожалуйста порекомендовать хороший хостинг?
                                                                                                    +18
                                                                                                    Может кому подойдут такие иконки в стиле Nokia. Запостил их еще в прошлом посте о иконках, но он уже спустился далеко вниз.

                                                                                                    image

                                                                                                    PNG и PSD (72x72 px) —
                                                                                                    cl.ly/3E3b2f3x2a1C2j2W2X22
                                                                                                      0
                                                                                                      Ооо… Спасибо. Интересное исполнение.
                                                                                                      А ЖЖ в этом же стиле есть?
                                                                                                        0
                                                                                                        Спасибо!
                                                                                                          0
                                                                                                          Класс! Жаль плюс вам дури не хватает поставить (:
                                                                                                          Мне вообще очень любы эти формы у нокиевских иконок, по-моему, они великолепны.
                                                                                                          +1
                                                                                                          Как по мне в наше время проблем с иконками нет. Бесплатных тучи, а нужно что-то индивидуальное — вам сделают. Рисовать грамотно не так и просто.
                                                                                                            0
                                                                                                            Выложите на habrastorage наконец! Давно не видел топики с фотками на радикале:)
                                                                                                              0
                                                                                                              Спасибо
                                                                                                              0
                                                                                                              Ну запилите сервис уже что ли. Настаиваем базовую форму, скругленность, фон, градиент фона, наличие и параметры блика, границы, главное изображение и его параметры отображения и все!)
                                                                                                                0
                                                                                                                ох-ох, опередили меня =)
                                                                                                                Я ведь в свой пак и квадратненькие еще хотел добавить, позже.
                                                                                                                  +1
                                                                                                                  на Х все оказывается «немного дизайнеры» с фотошопным прошлым)

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

                                                                                                                  Фаерфокс похож на дохлую кошку.

                                                                                                                  Хром в монохроме?.. не уверен что они бы одобрили…

                                                                                                                  Хотя в принципе я понимаю ваше стремление, оно позитивное, но недоделанное и неподготовленное. Сам мечтаю о едином месте где иконки можно брать уже, ну надоело что ничерта нету во всём интернете…
                                                                                                                    0
                                                                                                                    Меня коробит от иконок Нокии — не круглые и не со скругленными углами. Полностью квадратные иконки — не тру, хоть их ща и будет продвигать MS. Ну закруглите вы на пару пикселей, все же приятней будет)

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

                                                                                                                    Самое читаемое