Онлайн инструменты дизайнеру — сентябрь 2015

В интернете можно найти немало онлайн-инструментов, которые значительно облегчают решение задач, стоящих перед веб-дизайнером. На страницах Дизайн Мании стараемся о некоторых из них вам рассказывать. Это уже третья подборка подобного типа, до нее были июльские сайты помощники и вдохновляющие майские проекты. Формат публикации с краткими обзорами мне лично нравится, т.к. получается охватить достаточно разные по направленности сервисы, немного поведав о каждом. Встречаем очередную подборку за сентябрь 2015.

Cut&Slice me

Cut&Sliceme – бесплатный плагин для Photoshop, позволяющий экспортировать свои графические работы на различные устройства послойно и сохранять в png формате. С его помощью можно осуществлять экспорт изображений группами и подгруппами, для объединения в которые нужно добавить в конце имени каждого элемента специальный значок:

• @ — для экспорта помеченных слоев и обрезки всего ненужного;
• # — для придания изображениям размера в соответствии с выделенным образцом;
• BTN – для экспорта статусов кнопок.

I Want Hue

I Want Hue – один из разделов ресурса tools.medialab.sciences-po.fr, где собраны разнообразные инструменты для оформления научных работ, наглядного представления данных. I Want Hue (или «Мне нужны оттенки») – это сервис для создания палитр с максимально четкими, чистыми цветами. Можно выбрать темный или светлый фон и одну из набора готовых палитр, разложить ее на заданное количество цветов, сохранять или удалять отдельные цвета. Для каждого цвета автоматически генерируются коды, позволяющие использовать его в json, CSS, Javascript.

PlaceIt

PlaceIt – интересный инструмент, позволяющий вставлять любые изображения в готовые шаблоны. В разделе «Цифровые устройства» собрано более тысячи фотографий и коротких видеороликов, на которых в разной обстановке изображены смартфоны, планшеты, ноутбуки и прочие устройства, имеющие экран. На экране есть надпись, означающая «залейте изображение сюда», и указан его размер.

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

Style Tiles

Style Tiles (буквально «плитки стиля») – инструмент для разработки и визуализации дизайна сайта, позволяющий веб-дизайнеру без лишних затрат времени и труда продемонстрировать заказчику, как может выглядеть макет сайта, внести в шаблон коррективы в соответствии с его пожеланиями. Этот инструмент визуализации не такой громоздкий, как moodboard («доска настроений»), и не настолько детализированный, как mockup, это промежуточное решение.

На сайте можно скачать шаблон и в Photoshop создать с его помощью презентацию макета, добавив возможные цвета, фоны, шрифты.

W3 Markup

W3 markup – платный сервис для верстки, быстрой и простой конвертации авторской графики в коды HTML/CSS и JavaScript, а также создания сайтов на базе разных SMC и шаблонов почты. На выходе вы получаете отлично читабельный код, совместимый со всеми браузерами, почтовыми клиентами.

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

Mother Effing Animated GIF

MotherEffingAnimatedGIF – проект сообщества H5BP для создания GIF анимации, работающий по принципу «перетащи и залей». Приложение совместимо со всеми браузерами, в него можно перетащить или загрузить неограниченное количество изображений, менять их порядок, размеры, поворачивать, устанавливать интервал между демонстрацией кадров. Из чередующихся картинок получается анимированное изображение, которое можно предварительно просмотреть или сохранить на бесплатном хостинге изображений imgur.com, получив ссылку для просмотра.

Надеюсь, данная подборка онлайн инструментов оказалась для вас полезной. Следующая ожидается уже в октябре. Кстати, вы можете предлагать ссылки на интересные сервисы в комментариях — обязательно их рассмотрим.