Java, UX, HTML, CSS, WEB-design

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

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

Название: Этикет Photoshop для адаптивного веб-дизайна . Краткое описание: [ad_1] ⭐ Дэн Роу . Дата публикации: 03.02.2022 . Автор: Алишер Валеев .

Для чего создан сайт Novosti-Nedeli.ru

Данный сайт посвящен новостям мира и мира технологий . Также тут вы найдете руководства по различным девайсам.

Сколько лет сайту?

Возраст составляет 3 года

[ad_1]

  • Дэн Роуз

  • 0 Комментарии

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

  • 6 минут чтения

  • Графика, Рабочий процесс, Photoshop, Графический дизайн, Адаптивный дизайн

Краткое резюме ↬

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

Прошло почти пять лет с момента запуска 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.

Если можете, попробуйте использовать монтажные области, композиции слоев или смарт-объекты вместо управления кучей PSD.
Если можете, попробуйте использовать монтажные области, композиции слоев или смарт-объекты вместо управления кучей PSD.

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

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

Связанные смарт-объекты и библиотеки CC предоставляют множество возможностей для совместной работы.
Связанные смарт-объекты и библиотеки CC предоставляют множество возможностей для совместной работы.

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 находит отклик у многих организаций и отдельных лиц. Как это может помочь вам и вашей команде?

Сокрушительная редакция
(вф, иль)



[ad_2]
Source: https://smashingmagazine.com

Заключение

Вы ознакомились с статьей — Этикет Photoshop для адаптивного веб-дизайна

Пожалуйста оцените статью, и напишите комментарий.

Похожие статьи

Добавить комментарий

Ваш адрес email не будет опубликован.

Кнопка «Наверх»