С изобретением 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. +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.


Сожалею; это почему? Можете ли вы объяснить, что вы имеете в виду?
— Benteh

@boblet Пожалуйста, будьте конкретны в своем вопросе. Объяснить, что?
— Лорен-Клир-Моника-Ипсум

Ах, прости; Мне было интересно, почему вы говорите, что вам нужно немного PS из-за отсутствия согласованности браузера? Как-то не имеет смысла для меня.
— Benteh

@boblet Я имею в виду, что с некоторыми эффектами (например, закругленными углами) вы можете создать его в CSS или Photoshop. Но старые браузеры не могут обрабатывать закругленные углы CSS; они выходят как обычные углы коробки. Так что, если круглый угол действительно важен, вы должны использовать Photoshop, чтобы создать его в виде графики, чтобы все браузеры могли его видеть.
— Лорен-Клир-Моника-Ипсум

Ага! Это имеет немного больше смысла. Теперь я вижу, что это старый пост, и в наши дни css закругленные углы, тени и т. Д. Больше не проблема. Я был просто обеспокоен практикой создания восхитительных макетов в PS, а затем столкнулся с проблемами, переводящими это в разумный код. Клиентам часто трудно это проглотить; поскольку они часто не понимают мост, который должен закрыть разрыв между растровым изображением и кодом. Спасибо за объяснение.
— Benteh

2

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

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

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

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

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

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.