Какая из сеток имеет квадраты 8х8 пикселей
Обновлено: 07.07.2024
Чтобы вступить в уже существующее сообщество, нужно зайти в это сообщество и нажать кнопку «Вступить в сообщество».
Вступление в сообщество происходит автоматически без одобрения кандидатуры вступающего другими членами сообщества.
При обработке RAW файлов (не сжатые) в ACDSee Pro 4 в крупном масштабе явно видна "сетка" 8х8 пикселей внутри которой изображение формируется по каким-то "своим" законам (в основном горизонтальные или вертикальные полосы пикселей одинакового цвета). В итоге сам снимок состоит как бы из квадратов по 64 пикселя с довольно резкими цветовыми границами (особенно заметно при съемке портретов). Сильно нарушается детализация, особенно при резких цветовых переходах (тени на лице, контур лица, глаза и т.д.), при попытке вырезать фрагмент в 1/2 кадра (по площади) из исходного снимка и "растянуть" изображение до стандарта получается "помойка". Т.е. ощущение, что снимаю не на 12 мп матрицу, а на 3-4 мп.
Это редактор врет или что-то в настройках камеры не правильно? Это jpeg так выглядит. Любой. Если шарпнуть от души. Возмите правильный конвертор, который не в jpeg работает, а с 16 битным tiff - ом. Ну или смягчите картинку, чтоб не видеть этого безобразия. Да вроде шарпом по портретам не особо увлекаюсь.
А "правильный" конвертер - это например что?
Просто, почему выбрал ACDSee, потому что он доступный и интерфейс у него простой. Но для пользы дела готов отказаться. ;-)) Скажите, а Вы догадываетесь, что Запорожец - он ездить может. Но болидом Ф1 не станет никогда.
Автомобилем он от этого тоже уже не является?
А 600 Мерседес это автомобиль? А он тоже болидом Ф1 никогда не станет.
Назовите мне хоть один автомобиль который станет болидом Ф1 (кроме болида Ф1).
Павел Ионас писал(а):
Вот и АСДСее - конвертировать может, но основное назначение - вьюер.Нравиться Вам это или нет..
Единственное отличие Про версии это возможность конвертации РАВов. Сделали отдельную версию? За нее кто-то даже деньги платит. Значит пользует как конвертер. В остальном (включая показ РАВов) отличий от стандартной версии нет.
Да Вы не переживайте! Я работаю с крупными полиграф.фирмами, в т.ч. и в Новосибирске, которые мне очень быстренько разьяснили : шашечки или ехать. .Конвертирую родным конвертером , смотрю в АСДСее а на пальцы внимания не обращаю.Да помню я Вашу любовь к DPP.
Во многих случаях мне он тоже нравится.
Как любая система, сетка строится на основе модуля. Модуль в применении к сетке — некая минимальная единица измерения, которая ложится в основу всей структуры.
Прежде чем говорить о сетке, сразу хочется познакомить вас с термином EM — это величина, относительная единица измерения, которая используется в веб-вёрстке.
Почему именно EM? Этот термин пришёл из высокого набора, когда приходилось считать количество знаков. Тогда была придумала эта историческая единица, которая равняется самой большой букве (когда буквы были материальные, когда был высокий набор, литер вырезался из дерева или выливался из метала) и самой большой буквой в наборе была М. То есть это некоторая усредненная единица, равняющаяся среднему размеру буквы в шрифте.
Другими словами, это некая стандартная буква, усреднённая.
Как получаем числовой показатель? К примеру, представим строку, набранную 16 кеглем и высотой строки 24px. Если 24 разделить на 16 получится 1,5.
По классике книжной вёрстки оптимальная длина строки 45–75 знаков, а высота 1,4 em.
Примеры того, как это накладывается на современную строку на сайте:
Оптимально для мобильных устройств:
1,3–1,5 em — размер высоты строки.
Вывод: чем короче строка, тем меньше высота строки.
Из-за того, что в вебе человек не читает, а сканирует, высота строки на сайтах больше классической.
Итак, мы поговорили про строку и об основных её положениях. Теперь поговорим про сетку и то, зачем она нужна.
Часто, когда говорят про сетку, показывают газету.
Разберём её более детально.
Как любая система, сетка строится на основе модуля. Модуль в применении к сетке — это некая минимальная единица измерения, которая ложится в основу всей структуры.
При построении сетки мы обычно используем модуль 6 px, то есть в нём все размеры сетки кратны 6 px (в каких-то крайних случаях эти 6 px можно разделить надвое, и получается 3 px).
Высота колонки — кратна.
Отступы между колонками — кратны.
Отступы от краев — кратны.
То есть получается, высота строки любого текстового блока кратна либо 6 либо 3 px. За счёт этого вся система замыкается на себе и становится очень цельной. Кроме того, это экономит время и позволяет не думать о том, где должен стоять тот или иной блок — вы просто выравниваете его сначала по большой сетке (колоночной), потом по маленькой (модульной).
Это основные составляющие сетки. Ниже вы видите 12-колоночную сетку, где фиолетовая полоса представляют одну колонку.
Узкие жёлтые полоски являются формой микропробелов, которые дают сетке немного воздуха.
Важный момент: отступы от краёв сетки всегда должны быть больше, чем отступы между колонками. Благодаря этому у вас на сайте всегда будет соблюдаться правило внешних и внутренних отступов.
Они образуют прочную структуру, которая даёт последовательность и порядок из-за выравнивания.
Почему 12-колоночная сетка считается самой удобной? Потому что она хорошо делится на три, четыре и шесть столбцов, что достаточно гибко и подходит для разных типов контента.
1024–1400 px — это стандартная 12-колоночная сетка на десктопе.
На планшете количество колонок уменьшается в два раза. Этого более чем достаточно при работе с планшетом. Как и в случае с мобильными устройствами, всё становится менее динамичным, более спокойным и функциональным.
Также юзабельным вариантом считается четырёхколоночная сетка.
Она простая и надёжная, но из-за симметричности может выглядеть скучновато.
Трёхколоночная сетка — более смелый вариант.
В случае использования асимметричной сетки вам нужно разумно находить баланс для своего проекта.
Стоит помнить, что высота строки наборного текста никогда не должна быть равна или больше отступов между колонками. Если так происходит, то скорее всего, во время вёрстки будет тяжело работать с этой сеткой и блок будет сыпаться рядом с другим.
На мобильных устройствах есть один интересный момент — если в вашей типографике используются жирные заголовки и вам хочется сделать её богаче с большим количеством начертаний и контрастов, то можно заголовок второго уровня сделать такого же размера как наборный шрифт (то есть опустить его на ступень по модульной шкале размеров) и за счёт своей насыщенности он так же хорошо будет работать в макете.
Здесь дизайнер избавился от межколонных отступов и просто последовательно разделил весь экран на 12 колонок на десктопе — и на меньшее количество колонок на последующих устройствах. Это даёт интересный эффект.
В качестве отступов от контента мы делаем по одной колонке и отступы между блоками уже прописываем сами фиксировано, то есть они не резиновые. Можете попробовать сами, создаёт очень интересное впечатление от вёрстки. Кроме того, боковые отступы становятся более осмысленные и всегда подчиняются вашей логике, которую вы заложили при помощи сетки и поделили пространство.
Зачастую проблемы выявляются на больших разрешениях.
Это обусловлено тем, что все уже научились адаптировать свой макет к маленьким устройствам. Тем более, что там логика упрощается.
То есть дизайнер разрабатывает макет под 1024 px, не сильно стараясь прогнозировать то, что с ним произойдёт на разрешениях 1600 px и больше. Выделяя просто какую-то зону под дизайн, всю логику, красоту и вёрстку, а по бокам остаются неосмысленные куски пространства.
Пустое пространство — это мощный инструмент выразительности, управления вниманием, и оно всегда должно быть осознанным. Не оставляйте «висящие уши» по краям.
Такое случается, когда прекращают соблюдаться правила оптимального количества знаков в строке. За счёт этого макет становится растянутым и резиновым. Задача дизайнера в данном случае — не густо покрыть всё контентом, а всё-таки сделать текст читабельным.
Нет ничего страшного, если при помощи сетки у вас осознанно всё пространство и просто в какой-то момент текстовой блок упирается в невидимую стену, перестает деформироваться и остаётся в том диапазоне символов в строке, когда это удобно читается.
Другая распространённая ошибка, когда дизайнер имеет свободное пространство и тут же решает всё заполонить дизайном и контентом.
Когда пользователь видит такое обилие контента, ему не только сложно разобраться, где и что тут главное, где точка входа и за что зацепиться взгляду, но у него и не возникает желания этого делать. Пользователь видит слишком много информации и закрывает страницу.
У многих дизайнеров возникают трудности при создании адаптивных и мобильных версий сайта. Зачастую непонятно, где какие элементы располагать и какого размера они должны быть. В данной статье я хочу показать, что это не так уж и сложно, особенно если использовать в работе модульную сетку. Вообще модульные сетки — это прекрасный инструмент, который помогает дизайнеру сильно упростить работу, а результат сделать более профессиональным, эстетичным и приятным для восприятия. Поскольку на данный момент мониторы работают в разрешениях, начиная с 1024?768 рх и выше, я считаю самой удобной колоночную сетку, так как она идеально для них подходит. Размер каждой колонки составляет 60 рх, а отступы между ними — 20 рх.
Количество колонок можно легко увеличивать и уменьшать, в зависимости от нужного разрешения. Например, если ваша контентная область будет все 1920 рх, то запросто можно прибавить по 6 колонок с обеих сторон. А если 320 рх, то оставить всего 4 колонки.
Для большего удобства я предпочитаю дополнительно делить рабочую область вспомогательными базовыми линейками:
Предлагаю вам рассмотреть пример сайта с разрешением 1920?1080 и контентной частью в 960рх, так как на сегодняшний день они наиболее распространенные.
А вот как он выглядит с наложением сетки и линеек:
Мы видим, что абсолютно все элементы вписываются в сетку. Все четко и правильно, аккуратные ровные столбцы. Единственное, с чем могли возникнуть проблемы — это элементы, которые в примере обозначены звездами. Это могут быть как иконки с текстом, так и фотографии в портфолио, или просто столбцы с текстом. Чтобы правильно рассчитать расстояние, мне не пришлось делать сложных вычислений, вымерять каждый пиксель, плодить не нужные в будущем линейки и так далее. А все потому, что есть сетка. Итак, у меня 4 «звезды» и 12 колонок, следовательно, делим 12 на 4 и получаем по 3 колонки на каждый пункт. То есть центр каждой «звезды» должен располагаться посередине центральной из выделенных на нее колонок.
Но, к примеру, у вас не 4, а 11 таких пунктов. Скорей всего, они не поместятся в контентную часть в один ряд, значит, сделаем 2 ряда — 6 сверху и 5 снизу или наоборот. Берем наши 12 колонок и делим на 6. Получаем подве колонки на пункт, то есть центр каждого пункта будет располагаться посередине промежутка между двумя ее столбцами, прямо на линейке, и так далее. Разрешения меньше 1920 рх (вплоть до 960 рх) разбирать не будем. Так как контентная часть у нас 960 рх и перестраивать ничего не нужно, макет просто обрезается с обеих сторон.
Разрешения меньшие 1920 рх вплоть до 960 рх разбирать не будем. Так как контентная часть у нас 960 рх и перестраивать ничего не нужно — макет просто обрезается с обеих сторон.
Рассмотрим разрешение 768?1024. Здесь колонок уже 8. Начнем с шапки. Логотип, номер телефона и другие элементы просто сдвигаем к центру, а вот пункты меню у нас уже не постятся, так что само меню лучше сделать всплывающим:
Заголовок тоже великоват. Поэтому, если нет возможности переноса на другую строку, уменьшаем размер шрифта. Вообще все заголовки по сайту можно уменьшить так, чтобы огромные буквы не резали глаз, а вся страница смотрелась более гармонично.
Наши «звезды» здесь пришлось переместить. И теперь каждой досталось по 4 колонки, появилась возможность немного раздвинуть текст.
Следующий блок тоже перестроился:
В некоторых случаях приходится уменьшать изображение, в других урезать текст. Но всегда необходимо сохранять важную информацию в центре внимания. Далее оставляем все как есть. И вот что у нас получилось:
Снова все ровно, четко, красиво и вписывается в сетку. Полностью сохранена структура страницы. В меньших разрешениях, вплоть до 480 рх, все делается по тому же принципу, останавливаться на них не стоит. А вот что действительно заслуживает внимания и считается самым сложным — это мобильное разрешение в 320?480 рх, им и займемся. Сокращаем нашу сетку до колонок и формируем шапку. Если логотип слишком большой, можно его немного уменьшить. В своем примере я оставляю все как есть. А вот номер телефона уже не помещается — его можно переместить ниже, убрать во всплывающее меню, а можно как у меня — оставить только кнопку для звонка.
В этом разрешении нужно по максимуму сократить количество всяческих картинок, чтобы снизить время загрузки сайта. Но если без основной картинки на главном экране никак не обойтись, ее можно сохранить. Только постараться сделать ее как можно легче. Шрифты заголовков уменьшаем, но так, чтобы все-таки было ясно, что это заголовок, а не просто текст. Расстояние между блоками также стоит немного сократить, главное — чтобы вся страница смотрелась пропорционально и гармонично
Здесь наши пункты со звездами выстаиваются одна под одной. Но бывают случаи, когда картинка, которую заменяет звезда, не слишком важна по смыслу (например, — небольшая иконка). Тогда моно и перестроить этот блок по такому примеру:
Данный блок тоже был перестроен. Фоновая картинка удалена, если изображение не несет никакой смысловой нагрузки — его лучше убрать. Этим принципом всегда стоит руководствоваться при создании мобильной версии сайта.
Карту оставляем нетронутой, самое главное — чтобы она в высоту вписывалась в 480 рх. И подвал обычно сложностей не вызывает.
Итак, вот что у нас получилось: структура снова полностью сохранена, все элементы расположены ровно, даже мобильная версия легка и приятна для восприятия, нет никаких лишних деталей, все на своих местах.
Из всего вышесказанного можно сделать вывод: сетки кажутся лишними, неудобными и ненужными только если вы никогда ими не пользовались. Но стоит с ними немного поэкспериментировать, найти для себя наиболее подходящие, как уже не представляешь своей работы без них.
Модуль в 8 пикселей — базовая размерная единица интерфейсов Контура. На основе модуля строятся типографика и контролы, выбираются размеры для иконок, высчитываются отступы между элементами.
Мы используем модуль везде, где это не нарушает эстетики и не противоречит здравому смыслу.
Контур.Гайды поэтапно переходят на восьмипиксельный модуль, этот процесс займет какое-то время. Для простоты гайд написан так, как будто переход уже завершен.
Зачем нужен модуль
Использование модуля делает дизайн вычисляемым и более предсказуемым:
Модуль упрощает выбор размеров
Без модуля шагом становится 1px и выбирать приходится из избыточного количества вариантов. Модуль ограничивает выбор и экономит время на рутинных задачах верстки.
Модуль делает решения объяснимыми
Когда дизайнеры Контура выбирали радиус скругления кнопок, потребовалось провести голосование. Если системы нет, остается руководствоваться мнением большинства — в ретроспективе результаты таких решений выглядят малопонятными.
Модуль ускоряет перенос дизайна в код
Если разработчик знает, что все размеры должны быть кратны 8px, то отступ в 7px в макете не вызовет вопросов. Разработчик сам примет правильное решение и исправит ошибку без обращения к дизайнеру.
Почему 8
Исторически интерфейсы Контура верстались с отступами, кратными 5 и 10px, — стандартный выбор для небольших проектов, где удобство круглых цифр важнее системности. Но шаг 10px проигрывает 8px, когда речь заходит о построении на основе одного модуля всей дизайн-системы.
Модуль 8 пикселей:
- Можно более последовательно использовать во всех элементах дизайна: контролы, иконки, типографика
- Имеет меньший шаг — больше вариативности
- Имеет два подмодуля 4px и 2px, а не один, как у 10px
- Объекты с размером, кратным 0,5m, всегда можно разместить по центру, в отличие от 10px сетки, в которой подмодуль нечетный
- Это отраслевой стандарт
Принципы
Модуль 8px — основной, обозначается «m». В размерах до 40px допустимо использовать шаг в полмодуля, 0,5m.
Например, у шрифта размером 14px предусмотрено две высоты строки: 24px для основного набора и 20px для коротких подписей, где нужна компактность:
Модуль имеет прикладное значение — является ориентиром для выбора размеров, но самостоятельной ценности у него нет, поэтому макеты не нужно фанатично вписывать в восьмипиксельную сетку.
«Сетки объясняют не красоту макета, а его закономерности». Данил Ковчий
Подробнее о том, как использовать модуль в верстке, написано в гайде «Отступы и выравнивание».
Читайте также: