С изобретением CSS3, должен ли веб-дизайнер использовать Photoshop?

13

Я вижу, что многие дизайнеры создают прекрасные работы по веб-дизайну в Photoshop, но теперь с появлением CSS3, когда они хотят изменить это на HTML и CSS, они просто начинают с нуля и создают что-то около 80% окончательного дизайна с использованием CSS3.

Например, они используют border-radius, непрозрачность, градиент фона, тень блока и тень текста, а также другие правила CSS3, чтобы получить то, что они создали в Photoshop. Много раз они импортируют только изображение из Photoshop, которое больше похоже на кисть, логотип или что-то в этом роде.

Мой вопрос заключается в том, должны ли веб-дизайнеры по-прежнему использовать Photoshop для создания чего-либо, из чего только 20% были бы им полезны?

Может ли веб-дизайнер создать весь дизайн непосредственно в HTML и CSS, не потрудившись добавить еще один средний слой создания дизайна в Photoshop, а затем просто создать оставшиеся элементы там?

Саид Нямати
источник
Разработка интерфейса сайта и разработка внешнего вида - это две разные темы. Photoshop делает ужасный инструмент из проволочной рамки; однако такие продукты, как MockFlow, создают ужасный визуальный инструмент. 99% моих клиентов НЕ МОГУТ точно интерпретировать проводную рамку относительно того, как эффект тени или цветовая схема будут работать вместе (или бесчисленное множество других визуально зависимых ситуаций).
Доусон
Это должен быть чат или хотя бы мета. У него нет конечного ответа.
b01

Ответы:

17

Должен не согласиться со всеми. Photoshop не инструмент для разработки веб-сайта. Это инструмент для зарисовки веб-сайта. Веб-сайт должен по-прежнему создаваться в среде, в которой он находится, - как правило, CSS, HTML и JS.

Это не значит, что вы не используете Photoshop. Но вы, конечно, не должны.

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

По общему признанию, в действительности, много времени вам все еще нужно показывать макеты JPG. Хорошо. Используйте Photoshop для этого. Но не надо тогда брать этот PSD-файл, нарезать его и нарезать кубиками на веб-сайте. Это имело смысл в 1999 году. Не так много сегодня. Вместо этого возьмите этот PSD и просто используйте его как руководство. Это примерно то, как должен выглядеть сайт, но следует учитывать тот факт, что он создается в CSS / HTML / JS и размещается по мере необходимости.

Итак, чтобы ответить на вопрос:

Может ли веб-дизайнер создать весь дизайн непосредственно в HTML и CSS, не потрудившись добавить еще один средний слой создания дизайна в Photoshop, а затем просто создать оставшиеся элементы там?

Да. Конечно, это можно сделать. Я видел это параллельно с дизайнерами PSD. Самая большая проблема с подходом PSD - это когда вы работаете в гибкой команде. Тяжелые файлы, используемые для документации (такие как PhotoShop), становятся довольно большим бременем для процесса Agile и в конечном итоге добавляют больше проблем, чем решают. Затем мы, как правило, работаем в обратном порядке ... мы рисуем в PS по мере необходимости, а затем проектируем и встраиваем HTML / CSS / JS. Когда нам нужно будет сделать быстрые визуальные обновления для собраний, мы просто сделаем снимок экрана с рабочей разметкой презентационного слоя, добавим ее в PhotoShop и быстро настроим.

DA01
источник
Я с тобой @ DA01. +1.
Саид Нямати
1
+1 отличная статья (хорошо, может быть, это не статья), но вы точно подвели ее! Я полностью согласен практически со всем, что вы сказали. Я лично ставлю перед собой задачу предоставить своим клиентам живые макеты HTML и CSS с полной функциональностью дизайна, чтобы они могли «испытать» дизайн!
Web_Designer
2
+1 за "снимок экрана с рабочей разметкой слоя презентации". Пока я не прочитал этот ответ, я думал сказать что-то подобное в своем собственном ответе, но мне нечего было бы добавить, поэтому я просто высказываю это вместо этого ...
Aᵂᴱ
+1 Я начал большую часть своей дизайнерской работы в браузере, используя css3, год назад и редко даже больше открывал Photoshop.
Chris_O
1
+1! Photoshop - это прежде всего программа для работы с растровыми изображениями. Для легкого, хорошо контролируемого кода нет лучшего способа, чем прямой html и css. Всегда будут вещи, которые должны измениться от PS к сети, и, как я вижу это; PS только добавляет усложняющий слой для клиента.
Benteh
7

** РЕДАКТИРОВАТЬ **

Новый клиент?

Абсолютно - если вы представляете дизайн для нового клиента / сайта. Мирянам, как правило, трудно понять, что у тебя в голове. Каркасы, чертежи и т. Д. Тоже не всегда обрезают это - поцарапайте это - они не обрезают это. Я слышу больше: «Я думал, что это будет делать X» от клиентов, когда все, что у них есть, это WF или эскиз, чем я, когда им дают макет с их логотипом, фотографиями, корпоративными шрифтами и пользовательским интерфейсом.

Любой другой сценарий:

Возможно, нет - если вы можете использовать существующий HTML / CSS / JS, который соответствует рабочим требованиям, или вы редактируете содержимое существующего клиента, вам будет лучше работать только в коде. Если нет, вы, вероятно, будете тратить огромное количество времени в Photoshop на очень небольшую отдачу. Есть такие случаи (например, как упоминалось @ DAO1), когда скриншот и настройка через Photoshop действительно могут ускорить процесс утверждения или выработки идеи, или три.

** конец **

Я говорю да -

Гораздо проще продавать свои дизайны (и гораздо быстрее создавать композиции) с визуальным эффектом, даже если он упрощен. Вот где PS наиболее полезен для моей работы.

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

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

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

Доусон
источник
«за долю времени, которое требуется для их кодирования», что действительно зависит от целого ряда вещей, включая набор навыков дизайнера. Я обнаружил, что часто быстрее вносить изменения / изменения в клиентские приложения непосредственно в CSS / HTML / JS, чем возвращаться в Photoshop. Но это зависит от многих факторов.
DA01
DA01 - абсолютно. Мой рабочий процесс меняется по мере развития проекта. После запуска PSD не затрагиваются.
Доусон
3

Можете ли вы гарантировать, что 100% ваших пользователей имеют браузеры, которые будут видеть ваш сайт именно так, как вы (или, что более важно, клиент) намерены его увидеть? Нет? Тогда какой процент? 90%? 80%?

Можете ли вы убедиться, что он хорошо работает, так что альтернативная версия, видимая оставшимися 10% (20%? 40%?), Является приемлемой?

Если одна или обе из этих проблем являются проблемой, вам нужен Photoshop.

Lauren-Clear-Монике Ipsum
источник
Сожалею; это почему? Можете ли вы объяснить, что вы имеете в виду?
Benteh
@boblet Пожалуйста, будьте конкретны в своем вопросе. Объяснить, что?
Лорен-Клир-Моника-Ипсум
Ах, прости; Мне было интересно, почему вы говорите, что вам нужно немного PS из-за отсутствия согласованности браузера? Как-то не имеет смысла для меня.
Benteh
@boblet Я имею в виду, что с некоторыми эффектами (например, закругленными углами) вы можете создать его в CSS или Photoshop. Но старые браузеры не могут обрабатывать закругленные углы CSS; они выходят как обычные углы коробки. Так что, если круглый угол действительно важен, вы должны использовать Photoshop, чтобы создать его в виде графики, чтобы все браузеры могли его видеть.
Лорен-Клир-Моника-Ипсум
Ага! Это имеет немного больше смысла. Теперь я вижу, что это старый пост, и в наши дни css закругленные углы, тени и т. Д. Больше не проблема. Я был просто обеспокоен практикой создания восхитительных макетов в PS, а затем столкнулся с проблемами, переводящими это в разумный код. Клиентам часто трудно это проглотить; поскольку они часто не понимают мост, который должен закрыть разрыв между растровым изображением и кодом. Спасибо за объяснение.
Benteh
2

Что нужно подумать:

  • Многое вкладывается в размещение этих причудливых дизайнов в сети. По крайней мере, для более сложных. Photoshop помогает быстрее увидеть конечный результат.

  • Для дизайнера, работающего на его работе, макетирование в Photoshop обычно выполняется быстрее и оправдано, так как вы не будете тратить целый день на взлом HTML и CSS3.

  • Как вы упомянули, они могут делать 80% этого в CSS3, но тогда им в конечном итоге понадобится Photoshop.

  • Я бы сказал, что вы отказываетесь делать макет в Photoshop, если вы дизайнер и разработчик, и это сэкономит время, в противном случае всегда делайте макет в Photoshop.

b01
источник