Настройка адаптивных сеток в Photoshop
У меня серьезные проблемы с пониманием одного аспекта адаптивного дизайна. Я понимаю почти все основы, но одна вещь, которая меня беспокоит, это настройка правильных сеток в Photoshop для различных точек останова. Из того, что я могу собрать, отзывчивый дизайн уменьшит вашу сетку при уменьшении ширины устройства. Это означает, что это не просто случай удаления нескольких столбцов, и ваша сетка вернулась пропорционально.
На данный момент единственное, что я могу придумать для дублирования адаптивной сетки, - это уменьшить масштаб документа в Photoshop, и тогда будут сохранены отношения между столбцами, желобами и полями. Я смотрел на то, как другие люди делают это, и никто, кажется, не делает это таким образом. Я искал на YouTube и нашел этого парня - он, кажется, просто использует ту же сетку, но меньшие ее части, вместо того, чтобы полностью изменить размер сетки, чтобы соответствовать точке разрыва. Кто-нибудь может пролить свет на это?
СмущенныйСкотт
Правда в том, что немногие используют Photoshop для макетирования целых сайтов. Это просто не то, как современный веб-дизайн сделан в моем опыте.
Создание каркасов стало гораздо более отправной точкой для дизайна, чем это было 5 лет назад. Дни, когда вы часами создавали идеальный макет в Photoshop, а затем воссоздали все заново в HTML, давно прошли. Все больше Photoshop (и другие) используются в качестве вспомогательного инструмента для создания каркасов, путем создания и экспорта листов спрайтов или изображений для использования в качестве фона CSS, в отличие от начальных точек для дизайна. По этой же причине такие архитектуры, как Twitter Bootstrap , стали более заметными.
Теория, лежащая в основе адаптивного дизайна, заключается в том, что по мере сужения экрана структура веб-страницы изменяется, чтобы лучше соответствовать узкому интерфейсу. Вы просто не можете выполнить эту динамическую способность в Photoshop. Единственный способ приспособиться к сокращению в любом приложении для редактирования растра - использовать только часть любой сетки, а не изменять ее размер.
То, как джентльмен из вашей ссылки на видео перемещает объекты в левую часть сетки, - это то, как вам нужно использовать Photoshop, если вы собираетесь настраивать целые страницы. Вы должны думать о том, чтобы все выкладывалось на максимальной ширине экрана, а затем просто перемещать , а не изменять размеры элементов на меньшую ширину. Адаптивный дизайн вообще ничего не масштабирует, он просто перемещает элементы. Это действительно только изображения (например, фотографии), которые динамически изменяются в адаптивном дизайне, текст, кнопки, значки и т. Д. Редко изменяются.
Донал ханафинСмущенный
«Адаптивный дизайн» - это модный термин для увеличения прибыли для дизайнеров, которые не умеют проектировать, но любят говорить о правилах.
РЕДАКТИРОВАТЬ: ДЛЯ ЭТОГО, ЧТО НЕ МОЖЕТ СЛЕДУЕТ ЗА СЛУЧАЙНЫМ ОБРАЗОМ: Адаптивный дизайн создает некоторые удивительные правила, способные определить, как дизайн должен правильно реагировать на изменение размера экрана в зависимости от плотности пикселей. Это просто невозможно, практично или даже отдаленно забавно. Это быстрее, чтобы настраивать макеты и дизайны для каждого размера экрана и плотности пикселей, на которых вы хотите сфокусироваться, и выдвигать это для каждого. И вы получите лучший результат.
--- Если в этом есть какая-то хитрость, то она достаточно долго общается с вашими клиентами, чтобы они считали чем-то дорогим покрывать ваше время. Конечно, наоборот. Дизайнеры, которые обычно используют это, делают вид, что они могут каким-то образом автоматически спроектировать для каждого устройства, и их секретный соус будет «адаптивно» адаптировать свой дизайн и компоновку ко всем разрешениям и изменениям размера / плотности экрана.
--- Нет ничего более далекого от правды. Пришло время взглянуть на факты о «отзывчивом дизайне» . что жаргон предвещает представлять что-то невозможное или неправдоподобно ограничивающее как возможную, так и хорошую идею, когда это ни то, ни другое.
--- Нужно приложить массу усилий, чтобы сайт или приложение работали над всеми возможными вариантами, и это предполагает множество компромиссов.
Дизайн и разработка "Соответствие стандартам" были последним из этих увлечений, до этого.
Подумай о том, что это . как глубоко. Адаптивный дизайн - это попытка заставить любую данную компоновочную и дизайнерскую идею работать на устройствах с разным разрешением, экранах, окнах браузера и т. П. Невозможно учесть все возможные варианты и различные фрагменты устройства, браузеров и экранов.
Таким образом, вы должны отступить еще дальше и рассмотреть контент, пользователей и их ожидания, а также поставщика контента и их амбиции.
Теперь . какие устройства, экраны и окна браузера вы хотите видеть этот контент, и каким образом?
Сетки могут быть руководством к вашим первоначальным идеям, но в силу своей жесткой природы они не решат проблему полностью, а просто дадут вам набор «ограничений», в рамках которых можно опробовать различные изменяемые контейнеры для контента.
Причина, по которой очень простые макеты и дизайн пользуются популярностью, заключается в том, что для их преобразования во все различные пространства и места, которые они будут видеть, требуется гораздо меньше усилий, а это значит, что еще предстоит много ручной работы, чтобы выяснить, как вы хотите содержание структурировано, выложено и многоуровнево.
Поэтому начните со всех размеров экрана, типов браузеров и их возможных размеров логических окон, а также размеров экрана вашего приложения (или чего бы то ни было) и в основном строите на заказ. Это так весело.
Кстати, ожидаемые поля, желоба, разделители столбцов и т. д. они варьируются от устройства к устройству, от экрана к экрану, от ОС к ОС . так что вам решать, как вы это делаете. Там на самом деле нет никаких правил.
То, что предлагает это видео, заключается в том, что существует общий (своего рода) LPI (строк на дюйм, вы можете использовать любую метрику, которая вам нравится здесь), так что это просто вопрос выяснения общности с размером экрана. Это « ВИД » работает, но вы можете также учесть, что телефон держат гораздо ближе к глазам, и у него теперь сумасшедший уровень разрешения . и т. Д.
Так что совсем не весело.
Вероятно, главное, что нужно учитывать, - это поддерживать визуальную согласованность на всех устройствах, экранах и в браузерах и просто думать об этом как о куче работы.