Что такое точка останова в фотошопе

Обновлено: 20.11.2024

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

"А как же Sketch?" ты спрашиваешь. Я проверил Sketch, и это отличная программа для верстки. Он может стать заменой Photoshop в ближайшем будущем, но пока этого не произошло. Я хотел бы, чтобы некоторые более тонкие элементы управления типографикой были добавлены, прежде чем я рассмотрю возможность полного перехода от Photoshop. Однако нет никаких сомнений в том, что такие новички, как Sketch, побудили Adobe внести столь необходимые изменения в свою флагманскую программу.

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

Артборды

Монтажные области были частью конкурента Photoshop, Sketch, с момента его запуска, и я не сомневаюсь, что этот факт убедил Adobe включить эту функцию в свою версию Photoshop CC 2015 года. Тем не менее монтажные области — отличное дополнение к Photoshop.

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

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

Связанные смарт-объекты

Photoshop CC представил эту функцию в 2014 году, но я только недавно начал ей пользоваться (Что я могу сказать? Я не являюсь первопроходцем). Эта функция сэкономила мне много времени при внесении изменений в универсальные элементы по сравнению с несколько файлов Photoshop. Например, когда я создаю заголовок для веб-страницы, я преобразовываю эти слои в связанный смарт-объект. При этом создается специальный редактируемый файл Photoshop (.psb). Если я внесу изменение в шапку позже (например, увеличу логотип клиента), это изменение будет автоматически отправлено во все экземпляры шапки, и мне не нужно открывать каждый шаблон страницы и вносить эти повторяющиеся изменения вручную (можете ли вы сказать дополнительный перерыв на кофе?).

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

Умные направляющие

Чтобы измерить расстояние между объектами в макете, я рисовал между ними выделенную рамку и проверял информационную палитру для измерения в пикселях. Позже я использовал плагин для Photoshop под названием SpecKing. Около года назад Photoshop добавил Smart Guides, и это значительно упрощает расположение элементов в макете. Удерживая нажатой клавишу Command (Mac), вы можете мгновенно увидеть расстояние между объектами в пикселях и привязать объекты друг к другу.

Интеграция с Typekit

В 2009 году веб-шрифты стали широко доступны, и вселенная веб-дизайна стала лучше. Typekit был одним из первых, кто предложил большую коллекцию веб-шрифтов по подписке. Adobe приобрела Typekit в 2011 году, а позже сделала его частью своего сервиса Creative Cloud. Если у вас есть учетная запись Creative Cloud, теперь вы можете синхронизировать шрифты из Typekit для непосредственного использования в Photoshop. Синхронизированные шрифты отображаются в списке шрифтов вместе с установленными шрифтами и имеют все те же функции (лигатуры, заглавные буквы и т. д.). Эта замечательная функция синхронизации избавит вас от необходимости покупать эквиваленты экранных шрифтов веб-шрифтов, которые вы используете в своих макетах.

Заключение

Это лишь некоторые из функций, которые Adobe добавила в Photoshop за последние 18 месяцев, и я рад, что это 25-летнее приложение получает столь необходимые обновления, особенно в области веб-дизайна. Последняя версия Photoshop (CC 2015) содержит предварительную версию технологии под названием Design Space с упрощенным интерфейсом и инструментами, специально созданными для дизайнеров экрана (неудивительно, что он очень похож на интерфейс Sketch). Я еще не пробовал Design Space, но когда это сделаю, дам вам знать, что я думаю.

В долгосрочной перспективе Sketch может превзойти Photoshop в качестве приложения для веб-дизайна, главным образом потому, что оно легкое, доступное (99 долларов США) и не требует подписки, как Adobe Creative Cloud. Sketch, безусловно, вызывает много шума в сообществе веб-дизайнеров, и будет интересно посмотреть, как со временем будет развиваться его вызов Photoshop.

Как это повлияет на процесс проектирования и утверждения?

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

Что такое точка останова?

Точки останова — это концепция адаптивного дизайна, которая работает в коде вашего веб-сайта и определяет, при какой ширине экрана различные элементы на странице изменяют положение, размер, цвет или любое другое свойство. Для каждого адаптивного веб-сайта в коде определяется набор точек останова, и в этих точках останова определяются свойства для различных элементов, которые необходимо настроить при изменении размера окна просмотра. Большинство веб-сайтов имеют одинаковый набор точек останова, и некоторые элементы, затронутые точками останова, являются общими для большинства сайтов, например, панель навигации в верхней части сайта обычно сворачивается при одинаковой точке останова (ширине экрана) на большинстве сайтов.

Как это повлияет на мои проекты дизайна?

Когда вы нанимаете нас для создания своего сайта, одним из первых шагов (конечно, после обнаружения) является утверждение первых эскизов дизайна. Обычно мы предоставляем до трех первоначальных черновиков с учетом того, что мы узнали о вашем бизнесе, листа для нового клиента и других факторов. Все наши первоначальные наброски разрабатывались с расчетом на настольный монитор шириной 1920 пикселей. Существует вариант дизайна для мобильных устройств, то есть мы сначала разработаем ваш сайт с учетом браузера мобильного телефона, а затем доработаем дизайн до размера рабочего стола, но мы считаем, что классический подход, ориентированный на рабочий стол, лучше всего подходит для большинства наших клиентов. . Мы разрабатываем все наши сайты таким образом, чтобы они хорошо смотрелись на экранах самых маленьких мобильных телефонов с шириной всего несколько сотен пикселей и до дисплеев iMac с высоким разрешением 4096 x 2304 пикселей.

Взгляните на два верхних снимка экрана на изображении. Верхняя часть представляет собой типичный настольный дисплей шириной 1920 пикселей (разрешение HD). Как видите, панель навигации и некоторые нижние элементы страницы закреплены внутри контейнера, который на самом деле имеет ширину около 1280 пикселей. Это означает, что независимо от ширины экрана панель навигации и обычные элементы контента никогда не будут расширяться за пределы максимальной ширины 1280 пикселей.Многие сайты создаются с такими ограничениями на важные элементы, чтобы обеспечить удобную навигацию по сайту и доступность за счет размещения связанных элементов достаточно близко и одинаковой ширины. Кроме того, эти ограничения не позволяют текстовым блокам становиться слишком большими и затруднять их использование.

Третий скриншот — iPad, повернутый горизонтально, создающий ширину экрана 1024 пикселя. Как вы можете видеть, экран теперь меньше, чем максимальная ширина нашего основного контейнера в 1280 пикселей, в результате чего контейнер теперь сжимается до ширины экрана. Теперь все элементы будут занимать одинаковую ширину экрана по всей странице. Как видите, вертикальные iPad и iPhone еще больше сжимают контейнер, пока панель навигации окончательно не свернется в удобное для мобильных устройств раскрывающееся меню на телефоне.

Куда нам двигаться дальше?

Это далеко не исчерпывающее исследование использования точек останова в адаптивном дизайне. Если вам нужна дополнительная информация об адаптивном веб-дизайне и разработке, мы будем рады поговорить с вами. Есть много способов начать разговор, включая электронную почту, текстовые сообщения, Facebook и Instagram, и мы надеемся, что вы скоро свяжетесь с вами.

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

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

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

Дополнительная литература на SmashingMag:

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

Познакомьтесь с потрясающими онлайн-семинарами по внешнему интерфейсу и пользовательскому интерфейсу с практическими выводами, сеансами в прямом эфире, видеозаписями и дружескими вопросами и ответами. О дизайн-системах, CSS/JS и UX. С Кэри Фишер, Стефаном Баумгартнером и многими другими.

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

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

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

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

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

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

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

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

Те, кто знаком с сайтом, увидят множество знакомых рекомендаций, таких как типичные советы, такие как "Назовите свои слои" и "Точно назовите файлы", каждая из которых является попыткой избавить мир от таких практик, как "Копия слоя, копия 5" и 'client-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 находит отклик у многих организаций и отдельных лиц. Как это может помочь вам и вашей команде?

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

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

Точки останова CSS весьма полезны для создания адаптивного веб-дизайна, так как они обеспечивают отличное взаимодействие с пользователем на экранах разных размеров.Это достигается путем разделения дизайна на версии веб-сайта меньшего размера в зависимости от размера экрана устройства.

В этом блоге мы подробно расскажем о контрольных точках CSS и о том, как их можно использовать для создания адаптивного дизайна. Конечный результат — веб-сайт (или веб-приложение) с первоклассным интерфейсом для пользователей на разных экранах устройств.

Начнем!

СОДЕРЖАНИЕ

Что такое точки останова CSS?

Точки останова CSS — это точки, добавленные в код, контент веб-сайта реагирует на эти точки в зависимости от размера экрана устройства. Это помогает отображать идеальный макет для конечного пользователя. Точки останова CSS используются вместе с медиа-запросом, из-за чего он также известен как точки останова медиа-запроса CSS.

Другими словами, точки останова мультимедийных запросов CSS – это значения пикселей, которые разработчик может указать в коде CSS. Внесена корректировка, чтобы обеспечить удобство работы пользователей, когда адаптивный веб-сайт сталкивается с такими значениями пикселей.

Давайте посмотрим на веб-сайт LambdaTest в различных окнах просмотра устройств, чтобы понять основные принципы работы с контрольными точками CSS.

Вид на рабочем столе

Когда мы просматриваем веб-сайт на обычном экране рабочего стола, все меню навигации отображается в верхней части страницы.

Мобильный просмотр

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

Как установить точку останова CSS?

Самая сложная часть — это выбор контрольных точек медиазапроса CSS. Стандартных правил или синтаксиса не существует, поскольку разные платформы используют разные точки останова.

Вот два подхода к применению точек останова CSS:

Точки останова на уровне устройства
Точки останова на основе содержания

Точки останова на уровне устройства

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

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

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

Читайте также: