• ДИЗАЙН-АРТЕЛЬ •
In English

Веб-инструментарий дизайнера


— RedPost

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

redpost screenshot

— Color scheme designer

Сервис подбора цветовых комбинаций к заданному RGB-цвету. Делает выборку пятью методами, показывает прикидки выбранной схемы для страницы сайта и много чего еще полезного.

Color Scheme Designer screenshot

— Photo color palettes

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

Photo color palettes screenshot

Photo color palettes screenshot

— Kuler

Еще одно сообщество, детище Adobe, с готовыми цветовыми наборами и их обсуждениями.

Kuler screenshot

— degraeve.com

Многофункциональный ресурс, позволяющий создать цветовую палитру по картинке по ссылке (и вот, кстати, еще отдельный сайт для этого: colorhunter.com); cгенерировать фавыконку из загруженной картинки (с возможностью вырезать нужный кусочек и опять же получить цветовую палитру); сформировать и напечатать простетские, но аккуратные визитки с вашим лого; сгенерировать ASCII-картинку из фотографии и много чего еще не столь интересного.

degraeve screenshot

degraeve screenshot

degraeve screenshot

— Dynamicdrive

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

— PlaceIt

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

PlaceIt screenshot

— Screenfly

Сервис, позволяющий протестировать верстку сайта при различных разрешениях. В наборе — всевозмжные устройства современности. Это гораздо удобней, чем переключать разрешение на мониторе и иметь стопицот устройств. Хотя ретину сэмитировать не удастся.

screenfly screenshot

Также смоделировать разные разрешения можно в Firefox (сервис открывается по нажатию Ctrl+Shift+M, но он новый, и ресайзит пока не очень хорошо). Еще для Firefox и Google Chrome можно поставить плагины (Firesizer для Firefox и Resolution test, Wiindow resizer для Chrome (и Яндекс.браузера)), которые меняют размер окна, имитируя разные разрешения.

— qTip jQuery plugin

Сайт с подборкой демок возможностей jQuery будет полезен веб-дизайнерам при проектировании сайта. Удобно, когда сразу можешь посмотреть возможности технологии, чтобы рисовать то, что программист заведомо сможет сделать, и не надо будет на пальцах объяснять, как это работает — можно дать ссылку на конкретный jQuery модуль.

— The Shapes of CSS

Коллекция законченных кусков CSS3-кода для создания простых и сложных геометрических фигур (и их комбинаций), что позволит отказаться в некоторых случаях от использования картинок (что в свою очередь может помочь очень сильно сэкономить на объеме трафика без потери качества изображения).

The Shapes of CSS screenshot

— CSS3 Generator

Генератор CSS3 кода для форм и эффектов с настраиваемыми параметрами.

css3gen screenshot

— Cackle

Это (бесплатная в базовой версии) realtime система комментирования для сайта с возможностью авторизации через популярные социальные сети, такие как Google+, Facebook, Twitter, LinkedIn, «Вконтакте», «Одноклассники», «Мой Мир» и многие другие. Писать свой комментатор уже не обязательно.

Cackle screenshot

— Blind text generator

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

blind text generator screenshot

— Типографская раскладка Ильи Бирмана

Раскладка клавиатуры, которую довольно просто можно поставить вместо стандартной, позволяет удобными и легко запоминаемыми сочетаниями клавиш (типа Альт+пробел для неразрывного пробела и Альт± для тире) набирать часто используемые при верстке символы, которые обычно набирают с помощью допольнительных программ (на Mac) или сложных комбинаций типа Alt+0151 (на PC). Крайне упрощает жизнь верстальщика и сокращает время работы и утомляемость.

Типографская раскладка Ильи Бирмана скриншот

— Подбор шрифтовых комбинаций и бесплатные шрифты на paratype.ru

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

— Бесплатные веб-шрифты

Удивительно, но факт: до сих пор многие дизайнеры не пользуются доступными веб-шрифтами, чтобы разнообразить стандартный набор (Times, Georgia, Arial, Verdana, Tahoma). «Гугл» предлагает не очень широкий, но бесплатный кириллический набор.

Гугл веб-фонтс скриншот

Из личного опыта: не рекомендую использовать Open Sans и Ubuntu в жирных начертаниях, так как в деле они отображаются совсем иначе (и очень плохо), чем представлены на сайте гугла. Шрифт PT Sans в браузерах на Mac выводится на пару пикселей выше (это я про базовую линию), чем на PC. Шрифты семейства Playfair в деле себя показали отлично.

— Online Barcode Generator

Мега-вещь: генерирует любые виды баркодов, QR-кодов и прочих кодов и, что самое интересное, позволяет скачать результат не только в виде растровых картинок, но и в формате .EPS

online barcode generator screenshot

— whoyougle.ru

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

whoyougle

— formz.ru, quickdoc.ru, b-kontur.ru

Документы и бланки онлайн. Регистрируетесь и дальше бесплатно, легко и просто выставляете корректно составленные счета, акты сдачи-приемки и прочую необходимую индивидуальному предпринимателю документацию. Нумерация документов автоматическая. В профиле хранится история. Любой документ можно скопировать в новый, не набирая заново реквизиты и явки-адреса. Пользуюсь.

— Полезные ссылки на сайте Лебедева

Ископаемые — сборник ссылок на онлайн словари, справочники, а также сайты, посвященные шрифтам и типографике.

— Инструмент иллюстратора Дмитрия Нарожного

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

сайт Дмитрия Нарожного скриншот

Очень рекомендую раздел «Как я работаю». Там наглядно, в комиксе, автор рассказывает о принципах работы с клиентами и над иллюстрацией. Поможет и вам переосознать себя в вакууме, и клиента можно отослать сюда, чтобы не объясняться лишнего.

* * *

Если у вас тоже есть чем поделиться, в чем я уверен, не стесняйтесь кидать ссылки и описание в комментарии — буду благодарен. Самыми интересными по моему мнению ссылками я дополню этот пост.

Теги: Софт-обзор

или через RSS и не пропустите постов с фотоотчетами, работами новых артистов, дизайн-обзорами рекламы, упаковки, сайтов, логотипов, открыток и плакатов, обзорами полезных программ и приложений, новостями моей работы и советами дизайнерам.