войти зарегистрироваться

Я умный whois

индекс
0,00

Онлайн-генераторы графики WEB2.0 для новичков и не только

Последний раз при создании графических элементов для шаблона своего личного блога я отказался от графических редакторов установленных на компьютере. Отказался звучит громко, конечно я их использовал, но исключительно для склейки и подгонки размеров. Решил что блог это не рабочий сайт, поэтому можно экспериментировать. То что в итоге получилось нельзя назвать полностью "веб два нольным" форматом, ведь добавлялись лишь понравившиеся мне элементы, однако то что мне хотелось увидеть я добился исключительно при помощи онлайн-генерации.
Нельзя объять необъятное и разместить все элементы в один проект, но поделиться подборкой генераторов графических элементов в стиле WEB2.o можно, что я и делаю.


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

Генератор разнообразных символов WEB2.0


Генератор кнопок в стиле WEB2.0 с возможностью добавления на кнопку своих изображений


Генератор "полосатых" фонов (stripes) для страничек в стиле WEB2.0


Генератор GIF-картинок (круговых, линейных) отображающих процесс загрузки в стиле WEB2.0


Генератор иконок для сайта (favicon), картинок состояния загрузки Ajax в формате GIF, доменных имён - в стиле WEB2.0


Генератор закруглённых углов для полей с текстом и кнопок с возможностью задания закругления для каждого угла в отдельности и заливкой градиентом в стиле WEB2.0


Генераторы текстовых логотипов в стиле WEB2.0
1.
2.
3.
4.

Генератор фонов в стиле WEB2.0


Несколько генераторов индикации загрузки Ajax в стиле WEB2.0
1.
2.
3.

Генератор градиентной заливки поля, конвертер форматов графических файлов для web, генерация значков-табличек почтового адреса


Генератор облака тегов


Отличная библиотека готовых меню (CSS+HTML) на том же сайте по адресу

Удачи в онлайн-тюнинге сайтов и блогов!

Источник - переработан и частично дополнен.
+50
20 августа 2007, 20:22
konkoff

комментарии (61)

  • хорошая подборка! спасибо :)
    • Постараюсь её обновлять.
      • Классный материал.
        Когда то искал нечто подобное и нашел только 0stylr.
        Отлично, отлично.
        Плюсанул!
  • Я тоже новичок в Веб2.0, и в социальных сетях тоже недавно. Читаю Хабр, но только сейчас решился вступить в Хабрамир. Но в дизайне небольшой опыт есть, достаточный для того, что бы понять, что внешний вид и интерфейс Хабра - профессиональная разработка от идеи до того состояния, которое мы наблюдаем. А большинство подобных библиотек и генераторов — это вторсырьё, которое засоряет дизайном содержание. И почему?

    В моем понимании Веб2.0 — это эволюция эгоистичного персонализированного интернета (мода на персональные страницы, софтерные и сетевые монополисты) в невиданную ранне человеческую открытость, захлестнувшую многие слои общества, что явило собой сообщества по интересам, новый демократический институт и новую модель сознания как общества так и личности в отдельности. Веб2.0 на слуху, потому-что этот термин — детище IT-индустрии, но на самом деле эволюция затронула весь мир. Развитая часть мира (восточный запад, запад, америка и немного восток) меняет систему ценностей с закрытой на открытую. Обратите внимание на организацию жилых и офисных пространств в современных мегаполисах — больше места, света и простоты, меньше опорных столбов в высотках, большие оконные проемы, просторные прозрачные офисы. Мы устали быть сложными и индустриальными, мы все чаще генерируем и воспринимаем простые решения нашего развития, мы пост-индустриальное общество. Сегодняшние ценности — это коммуникации, общение, доступность, широта восприятия. Заброшенный производственный комплекс превратился в университет с музем и выставочными пространствами — это же удивительная коммуникация, которая связывает две разные эпохи в единую магистраль актуальности. Если внимательно посмотреть новости в разных областях сферы деятельности человечества, то во многом прослеживаются эти тенденции. Мир2.0 на дворе!

    Визуальное направление Веб2.0 должно передавать это ощущение открытости, доступности, простоты, коммуникаций. Но к сожалению, за столь короткий срок внешний вид страниц опять персонализировался, раскрасился, покрылся глянцевыми штучками, рекламными строчками, спрятанной в контент рекламой. Востребованы программисты2.0, веб-изайнеры2.0. Перед ними ставятся задачи такого плана: "чтоб было вкусно и привлекательно нам надо завлечь больше народу, разместить больше рекламы" или "наш стартап будет продавать воздух, ваша задача придумать как его продавать". То же можно сказать про маньяков делающих аля-контент, лишь-бы удерживать аудиторию, и привлечь рекламодателя. И это сегодняшний облик Веб-2.0 Конечно-же есть исключения, общество не без гения.

    Снова индустриальная эпоха — индустрия ИТ и коммуникаций, миллион от-туда, миллион сюда, доход триллион, богатеем.(Не подумайте я не завидую, богат сердцем и любовью) Я имею в иду общие тенденции, ощутимые сегодня ежечасно — скорость передачи информации растет, одна информация дорожает, другая падает в цене. Как и нефть — информация новая энергия, которая сильнее любого природного ресурса :) Владеешь информацией — владеешь миром. Вернемся к теме.

    Но ведь теряется суть тренда Веб2.0 — быть полезным обществу, открывать источник развития для тех кто еще нуждается в росте и динамически изменятся под уже подключенную общественность. В новой постиндустриально-новоиндустриальной гонке как-бы не упустить важное — содержание (суть проекта, главный его энергетический потенциал — идею) под сложившейся вокруг проекта инфраструктуры (контент, аудитория, реклама) и его формы (визуального представления, коммуникации с общественностью).

    Значит форма не должна доминировать. Призвание формы (как термина в дизайне и архетектуре) "формировать" содержание, доносить суть в актуальной "форме" лояльной к общественности. Соответственно главное призвание дизайна в том...

    "...чтобы найти наиболее удобный, простой и красивый способ решения поставленной задачи, не потеряв по дороге смысл." — цитирую всеми известного среди дизайнеров и не только

    Измышления являются спорными — не учтено множество фактов, но как общая тенденция — вполне возможны, я всеголишь попытался уловить развитие мысли и придать ей форму доступную не только мне. Мои первые слова на столь интересные темы в дивном Хабра-мире. Хе, хе! Занудствую.
    • "дизайн ради дизайна" vs "дизайн ради содержания"
    • Да, вторсырьё. Но с этим вторсырьём обычный пользователь может украсить свою домашнюю страничку куда приятнее, чем это было раньше.

      Ну а для серьёзных разработок эти генераторы конечно же не подойдут.
      • Домашняя страница, это уже не веб 2.0, это статика, забитая владельцем и изредка перемежаемая комментариями.
        Поражает вообще название - дизайн веб 2.0, что такое веб 2.0? Извините, но это никоим образом не дизайн. И говорить - дизайн в стиле веб 2.0, имхо, очень глупо.
        Любой разработчик, мало-мальски сведущий в том же избитом PHP, может накидать пару стандартных шаблонов для кнопочек в любом графическом редакторе, объединить это при помощи gdlib с текстом и заставить менять цвет фона + добавить png-шку с глянцевым градиентом.
    • Плюсадин. Особенно насчёт продажи воздуха...
      А про генераторы веб-два-нольной графики, конечно, улыбнуло :-)) Хорошая шутка. Вспомнился 1998 год, когда была масса программ, генерящих "трехмерные" заголовочки и кнопочки...
  • Интересная подборочка
  • Спасибо за статью, качественная подборка ресурсов для новичка.

    Замечу, что идеальный дизайн (насколько это возможно) - это дизайн, меньше всего отвлекающий человека от информации или выбора действий. Часто графика как раз это и делает - отвлекает.

    Согласен с , Хабрахабр - отличный пример Web 2.0 дизайна без картиночных понтов.
    • Да, идеальный дизайн сайта - минимум отвлекающих элементов-"манёвров" для посетителя, но ведь так хочется выделиться :)
      • Выделяться надо структурой и возможностями, а также отсутствием рекламы, неограниченностью пространств и красивой моделью сообщества. :)
        • И лавочку можно прикрывать=)))))...Банкротство)))
          • Не согласен. По моей информации, LiveJournal (я не имею в виду современный русский "вариант") был не банкротом.
            WikiPedia не банкрот и сейчас, никем не куплена.
            YouTube не был банкротом и до покупки Google-ом.
            • у всех у них были инвесторы :) и не факт что потом ваш проект ктото купит чтобы возвратить вложения инвестора и получить прибыль
              • Кто мешает найти инвестора и работать так же как это делали вышеописанные проекты? :)
                • никто не мешает, эти примеры - исключения из правил (кроме YouTube, там все таки была нацеленность на последующее появление рекламы либо на продажу, а деньги давали инвесторы), в основном происходит иначе если деньги заемные - либо основатели развивают все на свои деньги не особо надеясь на сиюминутную прибыль, либо работают на деньги инвесторов, которые хотят в итоге получить свои 200-300 и т.д. %
                  • В основном согласен.
                    Лично мне симпатична идеология таргетинговой рекламы, причем добровольной. Такая реклама и рекламой-то не чувствуется.
        • Как можно без рекламы?
          • Есть много способов иметь деньги на развитие проекта без баннерной и контекстной рекламы. Например:
            - Уже иметь бизнес, приносящий достаточную для этого прибыль и поддерживающий этот проект на иждевении (например, vkontakte.ru по моим данным)
            - Donations. У нас пока что не очень прокатывает, но в Америке эта практика повсеместно распространена. Та же WikiPedia.org
            - Платные аккаунты с дополнительным функционалом (lj опыт)
            - Футболки, майки, чашки с символикой сайта/ресурса
            • А почему бы и не покрутить немного качественной хорошо нацеленной рекламы, к которой пользоватли нормально относятся?
              • Нацеленная реклама даже полезна. Всем сторонам: сайту, посетителю, рекламодателю.
          • В эпоху Веб 2.0, общественность разделилась на новый типы профсоюзов, что позволяет делать рекламу нацеленной в рамках определенной отрасли. В итоге реклама не разражет, а начинает работать с мощными последствиями для всех. Кроме выгоды финансовой оба участника сделки и аудитория, для кого сделана реклама, получают большой +1. И появляются в сети коменты типа: “Спасибо тебе мой любимый сайт (блог и пр.), ты помог нам найти долгосрочного партнера, а теперь и друга в нашем сумасшедшем бизнесе : )” Мне это определенно нравится!
            • Жалко, что +1 поставить не могу. Так что текстом.

              ППКС. Реклама ведь в основном бесит тем, что она нецелевая, что её слишком много, что она слишком навязчивая. В случае близкого к идеальному таргетингу реклама не раздражает, а даже помогает.

              Хороший тому пример - контекстная реклама, по которой ведь кликают и проходят вглубь сайтов (это уже от сайта зависит).
  • Спасибо за отличную подборку. Обязательно буду пользоваться несколькими сервисами!
    • Самый любимый из них Stripe Generator, просто фантастика за секунды!
      • Да, согласен. Сервис хороший
        • прдон, зачем он нужен, если в Xara можно быстрее и удобнее то же самое сделать?
          • кто-то не умеет пользоваь Xara и фотошопом. Вот для таких людей и нужен
            • использовать фотошоп для рисования полосочек.. хм.. тонкое извращение. точно так же, ставить секретарше фотошоп для сканирования документов... интересный современный Российски подход.

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

                  но Фотошоп, как вы знаете, нужно покупать. Почти всегда. Поэтому, почему бы не покупать Фотошоп, чтобы рисовать полосочки, кнопочки и т.д?

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

                  однако, я не предлагал фотошоп как инструмент для рисования полосочек. это работа для более удобного и быстрого векторного редактора. мысль была в том. что исполнитель проекта точно знает как это рисовать и инструменты, приведённые вверху бесполезны.
                  • Соглашусь с вами относительно цены и, вообще, "нужности" приобретения Фотошопа для рисования web 2.0 элементов. Но, согласитесь, не все пользователи или начинающие дизайнеры могут им пользоваться хотя бы так, чтобы нарисовать представленные выше вещи. Лично я бы, если бы задача была нарисовать что-то из того, что за тебя моделируют (рисуют) сайты или сервисы "web 2.0", нарисую руками. Потому что для меня это привычней и быстрее. А для новичков быстрее - использовать чьи-то наработки. Но все это до поры до времени...
                    • соглашусь. но если бы я вдруг сел рисовать элемента веб2.0 я бы посмотрел туториолы как это делается, скачал примеры для той же хари или фотошопа (заведомо пиратского), научился делать, но никак бы не полез в олнайн конструкторы. причин много, главные - нет желания быть тем, на которого покажут - он для рисования этой дохлой логи для сайта использовал конструктор. ну и другая, скажем, научиться руками что-то самому делать. пригодиться это потом безусловно.

                      once again, я не представляю себе дизайнера или руководителя проекта (любого, хотя бы домашней страницы), который полезет в онлайн конструктор за замылеными кружочками, закруглёнными углами итд... не тот уровень, не тот подход, по моему...

                      вспонились бесконечные программы, которые предлагали тебе в 3-D написать и засунуть в веб название сайта! да та же Xara3D у меня вызвала непонимание, хотя она умела и, уверен, умеет куда больше, чем этот онлайн-ваятель.
                      • ""соглашусь. но если бы я вдруг сел рисовать элемента веб2.0 я бы посмотрел туториолы как это делается, скачал примеры для той же хари или фотошопа (заведомо пиратского), научился делать, но никак бы не полез в олнайн конструкторы.""
                        +1

                        ""once again, я не представляю себе дизайнера или руководителя проекта (любого, хотя бы домашней страницы), который полезет в онлайн конструктор за замылеными кружочками, закруглёнными углами итд...""
                        Видимо такие люди есть, причем их немало.
                      • кстати, вызвала эту тему аналогию с использованием loop'ов в электронной музыке, бесконечных бесплатных библиотек sample'ов или созданием всего этого добра своими руками. я всегда, помнится в Implulse Tracker, а потом ModPlug и Reason делал руками, из своих (собственоручно срипаных или записаных) семплов делал лупы (но не одним файлом\семплом, а прям на паттерне их создавал), шлифовал звучание, доводил до ума итд... всё в том числе и для того чтобы узнать как же изначально те самые общенароные лупы делались известными музыкантами, как та самая музыка, которая везде сейчас, делалась изначально, когда ничего подобного не было. что стоит тоьлко тот великий луп Jungle Brothers, с которого, по идее, начался бум музыкальный.

                        и я считаю этот подход правильный во всём.
  • Супер .)))
  • спасибо большое
  • Спасибо, порадовал!
  • Спасибо за подборку. Осмелюсь добавить:
    http://www.tartanmaker.com
    • В него можно попасть из Stripe Generator, а в списке он уже есть!
  • НЛО прилетело и опубликовало эту надпись здесь.
    • Ой, сорри, у меня в посте ссылка на первоисточник есть, добавляю, но хотелось бы заметить, что пост первоисточника переработан, так как некоторые ссылки там неработающие. Некоторые скрины сделал и добавил сам.
  • Подборка не плохая. А дизайн вашего блога - пример того как не надо делать.
    • Оффтоп: а что именно не так? Тяжёлый?
      • Нечитабельно, отвлекает внимание от контента. Белый текст на черном фоне априори тяжелее воспринимается глазом. Текст на фоновом изображении тоже нехорошо...
        • Да, да, да - знакомо. Ничего поделать не могу кроме как выбросить старый шаблон и прикрутить новый. Работа, время. А создать самому охота, поэтому тяну.
          • А по мне, так нормальный диз, учитывая что черный цвет на мониторе потребляет меньше энергии, чем белый, да и, читая на КПК, привык к светлым буквам на черном фоне =)
            • Спасибо! Но всё таки буду менять!
  • супер, за http://www.loadinfo.net/ огромное спасибо =)
    • Могу еще посоветовать http://ajaxload.info/
      Сам пару раз пользовался этим генератором.
      • ajaxload боян, заколебал уже =))) а вот loadinfo что-то новенькое...
        • Ну, на вкус и цвет... :)
  • Отличная подборка, спасибо!
  • Я профессионально (в смысле это моя профессия) занимаюсь созданием сайтов. Подобными генераторами никогда не пользовался и не буду, но считаю их отличным сервисом. Многим людям хочется иметь красивые кнопочки. Пусть делаю самостоятельно, бесплатно... :)
  • 1. Спасибо
    2. Ссылка на генератор иконок (favicon) немножко неточная, правильней: http://www.webscriptlab.com/favicongenerator.php
    3. Ещё в коллекцию, использовал генератор облаков: http://tagcrowd.com/
    • 1. Пожалуйста
      2.Ну давайте теперь придираться :)
      Это всё есть на одном и том же сайте,
      а путь прописывать к каждой опции излишне. :)
      3. добавляю.
  • А вы пробовали свой блог открыть в ИЕ?
    Хотел было посмотреть, как он выглядит через осла, а оный предлагает сохранить мне вашу страничку и ничего не открывает %) Мистика...
    P.S. IE 6.0
    • Открывается - ie7 - всё нормально!
  • Очень полезная статья) но:
    Предлагаю сделать заголовки в списке сервисов покрупнее да пожрнее, и увеличить отступы между сервисами. Для более комфортного восприятия, ато каша немножко. Это так, пожилание)
  • Простенький генератор flickr логотипов http://flickr.nosv.org/
Только авторизованные пользователи могут оставлять комментарии. Авторизуйтесь, пожалуйста.