Полезные инструменты для дизайнеров и разработчиков
17 апреля 2012 | Опубликовано в Веб-дизайн | 6 Комментариев »
В сети существует большое количество онлайн-сервисов и инструментов, которые могут значительно облегчить работу и ускорить процесс создания сайта. Сегодня мы поговорим о некоторых из них. Эти инструменты пригодятся вам при написании кода css, тестировании адаптивных сайтов, для работы с типографикой и создании каркаса таблиц и т.д.
Инструменты для работы с цветом
Colllor—очень полезный и удобный сервис: просто выберите нужный цвет и вы получите набор оттенков и комбинаций.
0to255—простой инструмент, который помогает подобрать цветовые hex-коды.
Инструменты для написания css
CSS Warp—позволяет создать css-текст по контуру. Когда установите все настройки, нажмите «GENERATE HTML», чтобы получить готовый код.
Css3 mikeplate—онлайн-площадка для написания css3-кода, которая поможет значительно облегчить и ускорить процесс работы.
prefixr—сервис, который проверяет, правильно ли вы указали все префиксы для браузеров.
DirtyMarkup—помогает легко почистить даже самый грязный код. Просто вставьте код в редактор и нажмите «CLEAN».
Bear CSS—загрузите ваш html-файл и получите файл css с названиями стилей.
Инструменты для работы с типографикой
Google Web Fonts—eсли вы ещё почему-то не пользуетесь этим сервисом, очень рекомендуем. Большое количество бесплатных шрифтов (и кириллических в том числе), которые легко подключаются к html-документу в режиме онлайн.
WhatTheFont—сервис для определения шрифта на картинке. Залейте изображение с шрифтом, чтобы узнать какой шрифт используется (вы также получите подборку похожих похожих вариантов).
CopyPasteCharacter—просто выберите нужный символ и скопируйте его как текст или как html-код.
Fontomas—даёт возможность выбрать нужные пиктограмы и построить свой собственный шрифт с иконками.
Em Calculator—позволяет конвертировать пиксели в относительные единицы em.
csstypeset—генерирует код css для шрифта в режиме онлайн.
Fontdragr—перетащите файл шрифта с компьютера на fontdragr, чтобы подобрать правильные сочетания. Вы также можете использовать галерею шрифтов fontdragr для этой цели.
Инструменты для создания структуры страниц
wirify—позволяет моментально конвертировать любую страницу в каркасную модель.
Gliffy—бесплатное программное обеспечение для построения каркаса страницы. Для того, чтобы приступить к работе, нажмите кнопку «TRY IT NOW».
The Pencil Project—инструмент для создания диаграм и прототипов GUI.
Другие инструменты
LoremPixum—при помощи этого сервиса вы можете вставлять картинки в ваш html-документ в режиме онлайн. Выберите категорию, а затем скопируйте код нужного изображения.
Myjqueryplugins—позволяет настраивать и создавать выпадающее jquery-меню в режиме онлайн.
Responsivepx—мы уже рассказывали вам о инструментах и плагинах для создания «отзывчивого» веб-дизайна. Сегодня хотелось бы добавить к этим подборкам ещё 1 новый и полезный сервис: введите адрес сайта и выберите любой размер ширины и высоты (от 10 до 3000px)это поможет протестировать ваш веб-сайт «по полной».
Автор подборки-Дежурка
Комментарии
Оставить ответ
Похожие статьи
-
Сайты, посвященные индустрии красоты
-
Микровзаимодействия: секрет крутых приложений
-
Графический дизайн в стиле гранж
-
15 бесплатных экшенов для ретуширования кожи
-
Крутая абстракция в веб-дизайне
-
Использование множественных фоновых изображений CSS: основы
-
Красивые примеры рисунков спиртовыми чернилами
-
Рисуем иконку мышки в Adobe Illustrator
-
Бесплатная типографика в ботаническом стиле
-
Простая фотоманипуляция рыцаря в огне в Adobe Photoshop
-
Новые примеры страниц О нас
-
Создание элементов, расположенных ровно по центру, с высотой и шириной, заданными в процентах
-
Концептуальная аэрофотосъемка Тома Хегена
-
Бесплатные текстуры для эффекта состаривания
Самые комментируемые
- Текст из крови в Adobe Photoshop
550
- Насколько важно сегодня использовать Web Safe цвета?
539
- 20 наборов кистей для Фотошопа, которые вам пригодятся
531
- Текст из воды в Adobe Photoshop
518
- 45 новых удивительных наборов кистей для творчества
423
- Более 40 фотореалистичных рисунков
205
- Ретро и винтажная типографика в веб-дизайне
194
- Футуризм в иллюстрации
192
17 апреля 2012 в 11:41
Для подбора цвета более удобным, чем названные, мне кажется этот сайт: colorschemedesigner.com
Ответить
апреля 17, 2012 at 11:48 дп
Да, спасибо! Мы уже писали здесь www.dejurka.ru/articless/color-swatches/ про инструменты для создания палитры. Просто collor является относительно новым сервисом и, возможно, не все о нём слышали. =)
Ответить
апреля 17, 2012 at 7:32 пп
Спасибо, эту статью не видела еще. Изучу)
Ответить
апреля 17, 2012 at 11:49 дп
Согласен, постоянно им пользуюсь)
Ответить
17 апреля 2012 в 11:55
а вообще большое спасибо за подборки, много полезного!
Ответить
29 апреля 2012 в 9:32
отличная подборка полезный статей!
сразу мыслишки зашевелились!
спасибо!
Ответить