Есть ли более удобные инструменты для дизайна сайтов, чем фотошоп?

Question

[shedy2]

Привет тостерчане)

В общем проблема такая: у меня скопилось около 50-ти макетов текущего проекта и как только возникает какое-то нововведение в дизайне, то все 50 макетов становятся не актуальными, их необходимо вручную переделывать или хранить бардак из разных дизайнов. Как с этой проблемой бороться?

Подскажите, может кто знает какой-нибудь редактор изображений типа фотошопа, но который может поддерживать целостность стиля большого количества макетов? Хочется иметь возможность совершать массовые операции над слоями:

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

Мне бы хотелось иметь функционал CSS в фотошопе, но не могу найти (может сайты рисовать в Axure, там есть подобный функционал, правда другого там не хватает)?

Answer 1

[Vanger]

Для CSS в фотошопе, Вам думаю поможет CSS Hat 2 смотреть тут csshat.com

Comments

[shedy2]

Вроде бы то, что надо :)

[shedy2]

Забыл совсем поблагодарить. Спасибо)

Answer 2

[Natalia]

Sketch App - более удобен для интерфейсов. Здесь можно сохранять атрибуты CSS
К нему есть дополнение Zeplin, автоматизирующее спецификацию и передачу стилей цветов и шрифтов. Скоро обещают добавить автонарезку графики

Answer 3

[Вячеслав]

Удобнее Фотошопа нет.

Единственный достойны вариант еще — Sketch App. Но вам потребуется:

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

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

Есть варианты:

1. Если вы занимаетесь мобильными приложениями, то тут и говорить нечего сами прекрасно знаете: можно обойтись одним файлом и грамотно работать с смартобъектами
2. Старайтесь не плодить макетов там, где это не нужно: большенство страниц можно паковать в один макет с 70% общих элементов
3. В крайней версии фотошопа, не помню как именно называются, смартобъекты нового типа: вы работаете со вложенностями одного PSD в другие. Таким образом вы можете, например, обновить футер на во всех макетах за раз. Но! Для работы с такими смартобъектами другим членам команды разработчиков потребуется освоить самую свежую версию фотошопа. В условиях фриланса, когда разработчики разные и привыкли работать по раному (многие верстальщики сидят до сих пор на CS3, например) эта схема не работает т.к. коммерчески выгоднее все переделать ручками. Но в условиях собственной команды можно экспериментировать.
4. Стройте свою работу так, что бы не возникало таких ситуаций. Утверждайте определенные элементы заранее, разделяйте работу с сайтом на этапы и интерации. Делайте выносные макеты, UI-kit'ы, которые имеют преоретет для разработчиков выше того, что вы забыли обновить в макетах.

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

Answer 4

[Павел Радьков]

Считаю, что для интерфейсов нет ничего лучше Adobe Fireworks на Винде (на Маке есть Sketch).
Очень жаль, что Adobe забросила этот продукт и не предложила ничего взамен. Файерворксу не хватает пары инструментов/возможностей Фотошопа, а Фотошопу не хватает половины возможностей Файерворкса. По сравнению с Иллюстратором Файерворкс попроще и подружелюбнее будет, хотя я мало работал с Иллюстратором, могу и ошибаться.

Доводы ЗА Fireworks:

• Fireworks — это полностью векторный редактор, заточенный под растровый вывод. В нём удобные инструменты работы с кривыми (path), выравнивание точек по пиксельной сетке. Рисовать резкие пиксельные иконки очень легко. Быстро и легко можно скруглять и распрямлять углы у прямоугольников, все вместе и по одному, ресайзить прямоугольники (даже растровые) без превращения круглых углов в овальные. Всё это вызывает боль в Фотошопе.
• Отличная интеграция с Adobe Illustrator. Можно copy/paste туда обратно с возможностью редактирования. При помощи стороннего бесплатного плагина можно импортировать и экспортировать SVG.
• В Fireworks есть стили для текста и векторных объектов, которые работают как CSS. Можно задать стили основному тексту, заголовкам, кнопкам, полям форм, а потом поменять данный стиль и распространить изменения на все страницы и состояния проекта.
• В Fireworks все страницы (экраны) хранятся в одном документе. Разные страницы могут иметь разный размер, цвет фона, свои гайды. Каждая страница может иметь несколько состояний. Слои можно делать общими для нескольких страниц и/или состояний: например шапку и футер можно расшарить на все страницы, а можно сделать «символом» — элементом библиотеки наподобие смартобъекта в Фотошопе. В состояниях удобно хранить варианты одной и той же страницы, контент табов, каруселей, всплывающие подсказки, ошибки валидации форм и т.д.
• В Fireworks есть библиотека символов. Туда удобно складывать всякие ресурсы, клипарты, картинки высокого разрешения, чтобы это не валялось в невидимых слоях. Но можно линковать и внешние файлы. На этапе проектирования, когда создаются wireframes, удобно для каждой иконки создать в библиотеке символ с плейсхолдером, потом собрать все эти символы на отдельной странице и отрисовывать по одной — иконки появляются на всех страницах, а вайрфреймы плавно превращаются в дизайн.
• Fireworks умеет экспортировать стили в CSS (как CSS Hat), умеет генерировать CSS-спрайты. Правда из-за того, что Adobe положила хер на Fireworks, в CSS много уже не нужных префиксов и устаревший синтаксис градиентов.
• Слайсы в Файерворксе могут пересекаться
• Есть еще менее значимые фишки, но мне надоело писать

Доводы ПРОТИВ Fireworks:

• Корявое сглаживание шрифтов (некоторые шрифты сильно отличаются от того, что потом увидишь в браузере), не хватает некоторых эффектов текста: надстрочные, подстрочные, все заглавные, зачеркнутый текст.
• Примитивные инструменты рисования и ретуширования (баннеры и коллажи я рисую в Фотошопе и импортирую в Fireworks)
• Нельзя просто так взять и перетащить слой с прозрачностью из Фотошопа в Fireworks — прозрачность заливается белым (надо экспортировать в png файл и импортировать из него — вот это реально бесит!)
• Нельзя задавать размер страницы больше, чем 6000×6000px (иногда высоты не хватает)
• Фотошоп пошустрее будет, Файерворкс притормаживает

P.S. «Всяк кулик своё болото хвалит». Дизайнеру-dribbble'ру Fireworks не понравится, а вот для проектировщика интерфейсов это чуть ли не идеальный инструмент.

Answer 5

[GreatRash]

https://www.adobe.com/ru/products/muse.html

Answer 6

[arsenty]

Вам менять не ПО, а подход. Для начала начините с создания отдельной спецификации на все макеты, после начнёте понимать, как быть дальше.

Comments

[Вячеслав]

Ответ «на отъе*ись» xD

[NotLogo]

Приведите пример спецификации