Этикет Photoshop для адаптивного веб-дизайна

Прошло почти пять лет с момента запуска Photoshop Etiquette, что официально делает его реликвией в Интернете. Многое может произойти в сети за несколько лет, и последние пять лет продемонстрировали это лучше, чем большинство других.

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

Дальнейшее чтение на SmashingMag:

• Дизайн для Retina в Photoshop
• Продвинутая анимация в Photoshop
• Рабочий процесс Photoshop Retina Asset
• Генератор контрольных точек адаптивного изображения

Также произошел взрыв инструментов, пытающихся сделать адаптивный рабочий процесс более эффективным. Такие приложения, как Webflow и Macaw, сделали визуализацию точек останова доступной для тех, кто не любит код. Многие дизайнеры перешли от Photoshop в качестве рабочей лошадки к Sketch, Affinity Designer или аналогичным программам. Другие используют такие приложения, как Keynote, для создания прототипов.

«Этикет» все еще актуален?

Имея альтернативы тяжелому фотошопу, с которым мы, возможно, знакомы, справедливо задаться вопросом, нужен ли нам все еще этикет. Для этой статьи мы определим этикет как передачу файлов организованным, четким и разборчивым способом. Адаптивный дизайн обычно включает в себя множество движущихся частей: изображения @2x, объединенные файлы CSS и многое другое. Поскольку для публикации веб-сайта, казалось бы, нужно сделать больше, эффективность, несомненно, является высшим приоритетом, если мы хотим быть прибыльными.

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

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

Что нового в этикете Photoshop?

Photoshop Etiquette был обновлен студией дизайна Adjacent в Сиракузах, штат Нью-Йорк. Для тех, кто плохо знаком с этой концепцией, Photoshop Etiquette — это руководство по передовым методам, которое способствует повышению эффективности за счет ясности в веб-дизайне. Несмотря на то, что он разработан для Photoshop, многие из этих принципов применимы к Sketch и аналогичным инструментам проектирования на основе слоев.

Руководство разбито на следующие разделы:

• Организация файлов
• Структура слоя
• Экспорт активов
• Тип исполнения
• Применение эффекта
• Проверка качества

Те, кто знаком с сайтом, увидят множество знакомых рекомендаций, таких как типичные советы, такие как «Назовите свои слои» и «Точно назовите файлы», каждая из которых является попыткой избавить землю от таких практик, как «Копия слоя, копия 5» и «Клиент- final-v3.psd' соответственно. Если вы копнете немного глубже, вы найдете множество адаптивных ресурсов, прикрепленных к различным рекомендациям, и несколько советов по дизайну для нескольких устройств.

1. Консолидируйте свои PSD-файлы

Если вы делаете несколько композиций для нескольких страниц, в Photoshop теперь есть монтажные области, которые помогут вам придерживаться одного документа. Это помогает устранить путаницу в отношении того, какой PSD является правильным PSD.

2. Работайте вместе

С добавлением библиотек Creative Cloud и связанных смарт-объектов дизайнеры могут легко обмениваться ресурсами. Например, если вы создаете шаблон или руководство по компонентам в Photoshop, один дизайнер может работать над компонентом, в то время как другой дизайнер одновременно работает над другим. Эти компоненты могут совместно использоваться в библиотеке или в виде связанных смарт-объектов, которые втягиваются в основной PSD.

3. Не проектируйте для устройства

С этим можно поспорить, но если адаптивный дизайн предназначен для всех устройств, возможно, нам не следует использовать популярные предустановки устройств Apple в качестве размеров документов в Photoshop. Вместо этого позвольте вашему дизайну диктовать точки останова из-за нагрузки на макет, где бы она ни находилась. Исключение составляет случай, когда вы разрабатываете приложение для устройства или платформы, где полезно использовать такие предустановки.

4. Будьте неразрушающими

С ростом внедрения и поддержки SVG дизайнерам важно поддерживать векторные ресурсы в Photoshop, а не сводить их к минимуму. Photoshop теперь позволяет сохранять SVG, что дает нам еще одну причину не разрушать наши пиксели.

5. Помните о разрешении экрана

Говоря о SVG, он действительно стал отличным подходом к обслуживанию одного ресурса, который может адаптироваться к любому размеру и не терять точности. Рабочий процесс с активами Retina, будь то SVG или изображения @2x/@3x, стал частью рабочего процесса адаптивного практикующего врача.

6. Сжать

Производительность — это достойное дело не только для разработчика, но и для дизайнера. Я часто объяснял, что если я хочу включить тяжелые веб-шрифты и их функции Open Type в свои проекты, мне нужно будет компенсировать разницу, агрессивно сжимая мои изображения, чтобы оставаться в рамках бюджета производительности. Сторонние инструменты, такие как TinyPNG, упростили сжатие изображений.

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

Подпитывается сообществом

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

В связи с неточностями Google Translate, волонтеры сообщества также объявили открытый запрос на перевод.

Приятно видеть, как Photoshop Etiquette находит отклик у многих организаций и отдельных лиц. Как это может помочь вам и вашей команде?