Что измеряется в пикселях: Что такое пиксель, его размеры и свойства. Понятие плотности пикселей в размерах картинки
Пиксель единица измерения. Что такое пиксели цифровых камер
Увеличенный участок растрового изображения.
Реконструкция из множества пиксельных значений, использование точек, линий, сглаживания
Матрица ЖК-монитора
Пи́ксель , пи́ксел (иногда пэл , англ. pixel, pel
— сокращение от piс tures el ement, которое в свою очередь сокращается до pix el ement, в некоторых источниках piс ture cel l — букв. элемент изображений ) или элиз (редко используемый русский вариант термина) — наименьший логический элемент двумерного цифрового изображения в растровой графике , или [физический] элемент матрицы дисплеев, формирующих изображение. Пиксель представляет собой неделимый объект прямоугольной или круглой формы, характеризуемый определённым цветом (применительно к плазменным панелям , газоплазменная ячейка может быть восьмиугольной [ ]). Растровое компьютерное изображение состоит из пикселей, расположенных по строкам и столбцам.
Чем больше пикселей на единицу площади содержит изображение, тем более оно детально. Максимальная детализация растрового изображения задаётся при его создании и не может быть увеличена. Если увеличивается масштаб изображения, пиксели превращаются в крупные зёрна. Посредством интерполяции ступенчатость можно сгладить. Степень детализации при этом не возрастает, так как для обеспечения плавного перехода между исходными пикселями просто добавляются новые, значение которых вычисляется на основании значений соседних пикселей исходного изображения.
Каждый пиксель растрового изображения — объект, характеризуемый определённым цветом , яркостью и, возможно, прозрачностью. Один пиксель может хранить информацию только об одном цвете, который и ассоциируется с ним (в некоторых компьютерных системах цвет и пиксели представлены в виде двух раздельных объектов, например, в видеосистеме ZX Spectrum).
Пиксель — это также наименьшая единица растрового изображения, получаемого с помощью графических систем вывода информации (компьютерные мониторы, принтеры и т. д.). Разрешение такого устройства определяется горизонтальным и вертикальным размерами выводимого изображения в пикселях (например, режим VGA — 640 × 480 пикселей). Пиксели, отображаемые на цветных мониторах, состоят из триад (субпикселей красного, зелёного и синего цветов, расположенных рядом в определённой последовательности). Для ЭЛТ-монитора число триад на один пиксель не фиксировано и может составлять единицы или десятки; для ЖК-монитора (при правильной настройке ОС) на один пиксель приходится ровно одна триада, что исключает муар . Для видеопроекторов и печатающих устройств применяется наложение цветов, где каждая составляющая (RGB для проектора или CMYK для принтера) целиком заполняет данный пиксель.
Кратные и дольные единицы
| Кратные | Дольные | ||||||
|---|---|---|---|---|---|---|---|
| величина | название | обозначение | величина | название | обозначение | ||
| 10 1 пикс | декапиксель | дапикс | dapel | 10 −1 пикс | деципиксель | дпикс | dpel |
| 10 2 пикс | гектопиксель | гпикс | hpel | 10 −2 пикс | сантипиксель | спикс | cpel |
| 10 3 пикс | килопиксель | кпикс | kpel | 10 −3 пикс | миллипиксель | мпикс | mpel |
| 10 6 пикс | мегапиксель | Мпикс | Mpel | 10 −6 пикс | микропиксель | мкпикс | µpel |
| 10 9 пикс | гигапиксель | Гпикс | Gpel | 10 −9 пикс | нанопиксель | нпикс | npel |
| 10 12 пикс | терапиксель | Тпикс | Tpel | 10 −12 пикс | пикопиксель | ппикс | ppel |
| 10 15 пикс | петапиксель | Ппикс | Ppel | 10 −15 пикс | фемтопиксель | фпикс | fpel |
| 10 18 пикс | эксапиксель | Эпикс | Epel | 10 −18 пикс | аттопиксель | апикс | apel |
| 10 21 пикс | зеттапиксель | Зпикс | Zpel | 10 −21 пикс | зептопиксель | зпикс | zpel |
| 10 24 пикс | иоттапиксель | Ипикс | Ypel | 10 −24 пикс | иоктопиксель | ипикс | ypel |
| применять не рекомендуется | |||||||
Этимология
Слово «пиксель» был впервые опубликовано в 1965 году Фредериком С.
Биллингсли из лаборатории реактивного движения, для описания графических элементов видеоизображений от космических аппаратов к Луне и Марсу. Однако Биллингсли не писал термин сам. Вместо этого он получил слово «пиксель» от Keith E. McFarland, по Link Division of General Precision in Palo Alto, который не знал, где слово возникло. Макфарлэнд просто сказал, что это «используется в то время» (около 1963).
Слово представляет собой сочетание пикс, для изображения и элемента. Слово пикс появилось в заголовках журнала Variety в 1932 году, как аббревиатура для текстовых изображений, по отношению к фильмам. К 1938 году «пикс» в настоящее время используется в отношении неподвижных изображений.
Понятие «элемент изображения» относится к самым ранним дням телевидения, например, как «Bildpunkt» (немецкое слово для пиксела, буквально «точка изображения») в 1888 году немецкий патент Пола Нипкова. По другой версии, самая ранняя публикация самого термина элемента изображения был в журнале Wireless World в 1927 году, хотя он использовался ранее в различных патентах США, поданных ещё в 1911 году.
Некоторые авторы объясняют пиксель как изображение клетки, а уже в 1972 г. в графике и обработки изображений и видео, PEL часто используется вместо пикселя. Например, IBM использовали его в своем Technical Reference для original PC.
Варианты произношения и написания
Относительно нормативности использовании термина в форме «пиксел» либо «пиксель» имеются различные мнения. Так «Русский орфографический словарь РАН » квалифицирует форму «пиксел» как общеупотребительную, а форму «пиксель» как характерную разговорной профессиональной или разговорной и профессиональной речи (в сокращениях словаря нет расшифровки для
При этом ГОСТ 27459-87 под термином «пиксель» понимает «наименьший элемент поверхности визуализации, которому может быть независимым образом заданы цвет, интенсивность и другие характеристики изображения ».Разрешение компьютерных мониторов
Компьютеры могут использовать пиксели для отображения изображения, часто абстрактное изображение, которое представляет собой графический интерфейс пользователя. Разрешение этого изображения называется разрешение дисплея и определяется видеокартой компьютера. ЖК-мониторы также используют пиксели для отображения изображения, и имеют родное разрешение. Каждый пиксель состоит из триад, причем число этих триад, определяется родным разрешением. На некоторых ЭЛТ-мониторы, скорость развертки луча может быть фиксированной, в результате чего фиксируется родное разрешение. Большинство ЭЛТ-мониторы не имеют фиксированную скорость развертки луча, то есть они не имеют родное разрешение вообще — вместо этого они имеют ряд разрешений, которые одинаково хорошо поддерживаются.
Для получения чёткого изображения на ЖК-дисплее, пользователь должен обеспечить разрешение дисплея компьютера соответствующее родному разрешению монитора.
Разрешение телескопов
Шкала пикселей использует в астрономии угловое расстояние между двумя объектами на небе, которые попадают в один пиксель друг от друга на детекторе (CCD или инфракрасного чипа). Шкала s измеряется в радианах отношением пиксельного р и фокусного расстояния F из предыдущих оптики, S = P / F. (Фокусное расстояние является произведением фокусного соотношения по диаметру соответствующей линзы или зеркала). Поскольку р обычно выражается в единицах угловых секунд на пиксель, потому что 1 радиан равен 180/π*3600≈206,265 секунды дуги, из-за диаметра часто даются в миллиметрах и размеров пикселей в микрометре, что дает ещё один фактор 1000, формула часто используется как s=206p/f.
Субпиксели
Многие дисплеи и изображения систем по разным причинам не способны отображать или воспринимать различные цветовые каналы в одном и том же месте.
Мегапиксель
Мегапиксель (MPx) составляет миллион пикселей; этот термин используется не только для количества пикселов в изображении, но и выражает количество сенсорных элементов изображения цифровых камер или числа дисплейных элементов цифровых дисплеев.
Пиксель представляет собой единицу измерения экрана любого современного монитора, будь то компьютер, ноутбук, мобильный телефон, навигатор и так далее. Другими словами, отвечая на вопрос о том, что такое пиксель, можно ответить, что это просто точка. То есть, если говорят, что размер картинки составляет 100*30 пикселей, значит, что эта картинка состоит из 100*30 точек. Таким образом, размер пикселя составляет одну точку на мониторе вашего компьютера или другого устройства. Пиксели могут быть черно-белыми или цветными. Благодаря им, управляя яркостью свечения, можно чертить, рисовать, строить различные графики, редактировать изображение, просматривать любимые фильмы.
Пиксели используются для оценки разрешения монитора. Чем большее количество пикселей способен отражать монитор вашего устройства, тем четче и лучше будет выглядеть изображение. В веб-дизайне они используются для того, чтобы обозначить размер изображения, фотографии, какого-либо отдельного объекта, ячейки таблицы. Для этого применяются такие параметры, как высота и ширина изображение.
Теперь вы имеете самое общее представление, что такое пиксель. Но сейчас мы постараемся разобрать данное понятие более подробно.
Элементы информации пикселя
Каждый пиксель включает пять элементов информации. Два из них отвечают за координаты пикселя, то есть его расположение по вертикали и горизонтали. Остальные три отвечают за цвет. Они определяют яркость красного, синего и зеленого цветов. Эти пять элементов в совокупности дают возможность считывающему устройству поместить точку в необходимом месте на экране и определить ее правильный цвет. Вместе пиксели на экране образуют кадр.
Мегапиксель — это один миллион точек, которые создают цельное изображение. Как правило, мегапиксели используются для измерения изображения, видеоматериала.
Что такое пиксель «битый» и «застрявший»?
Наверняка, вам приходилось слышать понятие «битый» пиксель. Постараемся разобраться, что это означает. Для начала разберемся, что собой представляют жидкокристаллические мониторы. Матрица такого монитора имеет огромное количество кристаллов, каждым из которых управляет тонкопленочный транзистор. В том случае, если тонкопленочный транзистор перестает правильно функционировать, то есть выходит из строя, на данном участке изображение отображаться не будет. Именно так появляются «битые» пиксели на телефоне, мониторе фотоаппарата, ноутбука или компьютера. Такой тип пикселя является наиболее сложным для ремонта и опасным для техники.
Следует сказать, что далеко не всегда нерабочий пиксель бывает черного цвета, поскольку пиксель — это набор их 3-х субпикселей — синего, зеленого и красного.
Изменение цвета достигается путем поворота кристалла. Если же этот кристалл застревает, то при смене изображения он будет отображать только тот цвет, на котором он «застрял». Часто «застрявшие» пиксели попросту не замечают. Устранить такую проблему можно при помощи специальной программы и определенного воздействия даже в домашних условиях.
Также существуют и другие типы пикселей, например, «зависящие» и «горячие». По сути, это вариации битого пикселя, которые будут проявляться при определенных условиях. В фильмах, играх, работе с изображениями подобные моменты, скорее всего, останутся неуловимы для глаза.
Теперь вы знаете, что такое пиксель и как он функционирует. И помните, что при возникновении поломки, то есть «битого» или «застрявшего» пикселя, лучше всего сразу обратиться в специализированную фирму по ремонту, чтобы при возможности вашему устройству продлили жизнь. Ведь никому не понравится смотреть на черные точки вместо красивых фотографий.
- Перевод
Пару месяцев назад, отдыхая от реализации новых возможностей вроде q_auto и g_auto, я прикалывался в нашем командном чате по поводу того, как различные форматы хранения изображений будут сжимать однопиксельную картинку.
В ответ Orly, редактор блога, попросила меня написать пост об этом. Я сказал: «Конечно, почему бы и нет. Но это будет очень короткий пост. Ведь что можно рассказать про один пиксель».
Похоже, я был сильно неправ.
В ранние годы веба однопиксельные картинки часто использовались как костыли для вещей, которые сейчас делаются через CSS. Создание отступов, линий, прямоугольников, полупрозрачных фонов – много чего можно сделать, просто масштабируя пиксель до нужных размеров. Ещё одно использование пикселей, дожившее до наших дней – маячки, средства для отслеживания и аналитики.
В отзывчивом веб-дизайне однопиксельные картинки используются как временные заглушки в ожидании загрузки страницы. Большинство браузеров не поддерживают HTTP Client Hints , поэтому некоторые варианты с отзывчивыми изображениями ждут полной загрузки страницы, чтобы подсчитать актуальный размер картинок, а затем заменяют однопиксельные картинки нужными изображениями при помощи JavaScript.
Сломанная картинка
Есть и ещё одно применение однопиксельных картинок: их можно использовать в качестве картинок «по умолчанию». Если нужное изображение по каким-то причинам невозможно найти, в некоторых случаях лучше показать один прозрачный пиксель, чем выдавать «404 — Not Found», которая будет видна в браузерах как «сломанная картинка». Нужное изображение вы в любом случае не увидите, но профессиональнее будет не акцентировать на этом внимание, выдавая иконку «сломанной картинки».
Хорошо, значит, однопиксельные картинки бывают полезными. И как же наилучшим образом закодировать изображение размера 1х1?
Очевидно, что для форматов сжатия изображений это пограничный случай. Если изображение состоит из одного пикселя, сжимать тут особенно нечего. Несжатых данных тут будет содержаться от одного бита до четырёх байт – в зависимости от интерпретации: черно-белый (1 бит), оттенки серого (1 байт), оттенки серого с альфой (2 байта), RGB (3 байта), RGBA (4 байта).
Но нельзя закодировать только лишь данные – в любом формате изображений нужно задать интерпретацию данных. По меньшей мере, нужно знать высоту и ширину изображения и количество бит на пиксель.
Обычно для кодирования высоты и ширины используется четыре байта: два на число (если бы это был один байт, то максимальная размерность картинки была бы 255×255). Допустим, нужен ещё байт для задания типа цветопередачи (оттенки серого, RGB или RGBA). В таком минималистичном формате однопиксельная картинка занимала бы не менее 6 байт (для белого пикселя), а максимум – 9 байт (для полупрозрачного пикселя произвольного цвета).
Но в заголовках реальных форматов обычно содержится гораздо больше информации. Первые несколько байт любого формата содержат уникальный идентификатор нужный лишь для того, чтобы сообщить, что «Эй! Я — файл вот конкретно такого формата!». Эта последовательность байт также известна, как «волшебное число». К примеру, GIF всегда начинается с GIF87a или GIF89a, в зависимости от версии спецификаций, PNG – с 8-байтной последовательности, включающей PNG, у JPEG есть заголовок, содержащий строку JFIF или Exif, и т.
д.
В заголовках может содержаться мета-информация. Это специфичные для данного формата данные, необходимые для раскодирования, определяющие, какой из подвидов формата используется. Некоторые из мета-данных не обязательно нужны для раскодирования, но тем не менее, используются для определения того, как показывать их на экране: цветовой профиль, ориентация, гамма, количество точек на пиксель. Это могут также быть производльные данные – комментарии, временные отметки, отметки об авторских правах, GPS-координаты. Это могут быть необязательные или обязательные данные, в зависимости от спецификации. Конечно, эти данные увеличивают объём файла. Давайте поэтому остановимся на минимальных файлах, откуда удалена вся необязательная информация – или мы будем тратить драгоценные байты на ерунду.
Кроме заголовков, в файлах может встречаться и другая дополнительная информация – маркеры, контрольные суммы (используемые для проверки правильности передачи или результата работы других процессов, которые могут испортить файл).
Бывает, что требуется включить в файл отступы, чтобы выровнять все данные.
Однопиксельные, минимально возможные картинки, показывают, сколько «лишней» информации содержится в формате файла. Смотрим.
Вот шестнадцатеричный дамп 67-байтного PNG-файла с одним белым пикселем.
00000000 89 50 4e 47 0d 0a 1a 0a 00 00 00 0d 49 48 44 52 |.PNG……..IHDR| 00000010 00 00 00 01 00 00 00 01 01 00 00 00 00 37 6e f9 |………….7n.| 00000020 24 00 00 00 0a 49 44 41 54 78 01 63 68 00 00 00 |$….IDATx.ch…| 00000030 82 00 81 4c 17 d7 df 00 00 00 00 49 45 4e 44 ae |…L…….IEND.| 00000040 42 60 82 |B`.|
Файл состоит из 8-байтного «волшебного числа» PNG, за которым следует отрезок заголовка IHDR из 13 байт, отрезок с данными об изображении IDAT с 10 байтами «сжатых» данных, и отметка об окончании IEND. Каждый отрезок данных начинается с 4-байтного отрезка с длиной и 4-байтного отрезка-идентификатора, и заканчивается контрольной суммой из 4 байт. Эти три отрезка данных обязательны, так что они в любом случае отъедают 36 байт у 67-байтного файла.
Чёрный пиксель тоже занимает 67 байт, прозрачный – 68, а произвольный цвет RGBA займёт от 67 до 70 байт.
Заголовок у JPEG длиннее. Минимальный однопиксельный JPEG занимает 141 байт, и он не бывает прозрачным, т.к. JPEG не поддерживает альфа-канал.
В смысле заголовков GIF самый компактный из трёх универсальных форматов. Белый пиксель можно закодировать в GIF 35 байтами:
00000000 47 49 46 38 37 61 01 00 01 00 80 01 00 00 00 00 |GIF87a……….| 00000010 ff ff ff 2c 00 00 00 00 01 00 01 00 00 02 02 4c |…,………..L| 00000020 01 00 3b |..;|
А прозрачный – 43:
00000000 47 49 46 38 39 61 01 00 01 00 80 01 00 00 00 00 |GIF89a……….| 00000010 ff ff ff 21 f9 04 01 0a 00 01 00 2c 00 00 00 00 |…!…….,….| 00000020 01 00 01 00 00 02 02 4c 01 00 3b |…….L..;|
Для всех перечисленных форматов можно изготовить и файлы поменьше, которые будут показываться в большинстве браузеров, но они будут сделаны с нарушением спецификаций, так что декодер изображений может в любой момент пожаловаться на то, что файл битый (и будет прав), и показать иконку «сломанной картинки» – а мы именно её и пытаемся избежать.
Так какой же наилучший формат однопиксельной картинки для веба? Есть варианты. Если пиксель непрозрачный, то GIF. Если прозрачный – тоже GIF. Если полупрозрачный, то PNG, поскольку у GIF прозрачность задаётся только как «да» или «нет».
Всё это мало что значит. Любой из этих файлов уместится в один сетевой пакет, поэтому разницы в скорости не будет, а разница для хранилища вообще пренебрежимо мала. Но тем не менее, с этим забавно разбираться – по крайней мере, любителям форматов.
Используя формат WebP, выбирайте его версию без потерь качества. Однопиксельная картинка без потери качества в формате WebP занимает от 34 до 38 байт. С потерей – от 44 до 104 байт, в зависимости от наличия альфа-канала. К примеру, вот полностью прозрачный пиксель в 34-байтном WebP без потери качества:
00000000 52 49 46 46 1a 00 00 00 57 45 42 50 56 50 38 4c |RIFF….WEBPVP8L|
00000010 0d 00 00 00 2f 00 00 00 10 07 10 11 11 88 88 fe |…./………..|
00000020 07 00 |.
.|
А вот тот же пиксель с потерей качества (по умолчанию) WebP, занимающий 82 байта:
00000000 52 49 46 46 4a 00 00 00 57 45 42 50 56 50 38 58 |RIFFJ…WEBPVP8X| 00000010 0a 00 00 00 10 00 00 00 00 00 00 00 00 00 41 4c |…………..AL| 00000020 50 48 0b 00 00 00 01 07 10 11 11 88 88 fe 07 00 |PH…………..| 00000030 00 00 56 50 38 20 18 00 00 00 30 01 00 9d 01 2a |..VP8 ….0….*| 00000040 01 00 01 00 02 00 34 25 a4 00 03 70 00 fe fb fd |……4%…p….| 00000050 50 00 |P.|
Разница в том, что WebP с потерей качества и прозрачностью хранится как две картинки в одном файле-контейнере: одна картинка с потерей качества, хранящая данные для RGB, и другая, без потери, с данными альфа-канала.
У формата BPG также есть режимы с потерей из без потери качества, и для него действует обратная закономерность. BPG с потерей хранит 1 пиксель в 31 байте – наименьший показатель из всех:
00000000 42 50 47 fb 00 00 01 01 00 03 92 47 40 44 01 c1 |[email protected]|
00000010 71 81 12 00 00 01 26 01 af c0 b6 20 bc b6 fc |q.
….&…. …|
BPG без потерь качества занимает 59 байт. Прозрачный пиксель займёт 57 байт в BPG
с потерями и 113 байт в BPG без потерь. Интересно, что в случае с одним белым пикселем BPG выиграет у WebP (31 байт против 38), а с одним прозрачным пикселем WebP выигрывает у BPG (34 байта против 57).
А ещё есть FLIF. Я, конечно, не могу забыть о нём, являясь главным автором бесплатного формата изображений без потери качества (Free Lossless Image Format). Вот 15-байтный FLIF для одного белого пикселя:
00000000 46 4c 49 46 31 31 00 01 00 01 18 44 c6 19 c3 |FLIF11…..D…|
А вот 14-байтный для чёрного:
00000000 46 4c 49 46 31 31 00 01 00 01 1e 18 b7 ff |FLIF11……..|
Чёрный пиксель получился меньше, потому что ноль сжимается лучше, чем 255. Заголовок простой: первые 4 байта всегда «FLIF», следующий – человеко-читаемое обозначение цвета и интерлейсинга. В нашем случае это «1», что значит, один канал для цвета (оттенки серого). Следующий байт – глубина цвета.
«1» значит один байт на канал. Следующие четыре байта – размерность картинки, 0x0001 на 0x0001. Следующие 4 или 5 – сжатые данные.
Полностью прозрачный пиксель тоже занимает 14 байт в FLIF:
00000000 46 4c 49 46 34 31 00 01 00 01 4f fd 72 80 |FLIF41….O.r.|
В этом случае у нас 4 цветовых канала (RGBA) вместо одного. Можно было бы ожидать, что раздел с данными будет длиннее (всё-таки каналов в четыре раза больше), но это не так: поскольку значение альфа равно нулю (пиксель прозрачный), значения RGB считаются неважными, и их просто не включают в файл.
Для произвольного цвета RGBA файл FLIF может занять до 20 байт.
Хорошо, значит FLIF лидер в категории «один пиксель» в соревновании на кодирование изображений. Если бы ещё это было какое-то важное соревнование:)
Но тем не менее, FLIF не будет лидером. Помните упомянутый мною минималистичный формат? Тот, который закодирует один пиксель в размер от 6 до 9 байт? Такого формата нет, поэтому он в счёт не идёт.
Но есть существующий формат, который довольно близко подходит к этому.
Он называется Portable Bitmap format (PBM), и представляет собою несжатый формат изображений из 1980-х. Вот как можно было бы закодировать один белый пиксель в PBM всего 8-ю байтами:
00000000 50 31 0a 31 20 31 0a 30 |P1.1 1.0|
Да тут и шестнадцатиричный дамп не нужен, этот формат человеко-читаемый. Его можно открыть в текстовом редакторе.
Первая линия (P1) обозначает, что картинка двухцветная. Не оттенки серого, а только два цвета – чёрный (цифра 1) и белый (0). Вторая линия – размерность картинки. А затем идёт разделённый пробелами список чисел, одно число на пиксель. В нашем случае 0.
Если вам нужно что-то другое, кроме чёрного и белого, можно использовать формат PGM для представления одного пикселя любого цвета всего 12-ю байтами, или PPM размером 14 байт. Это всегда меньше, чем соответствующий FLIF (или любой другой формат со сжатием).
В традиционном семействе форматов PNM (PBM, PGM и PPM) не поддерживается прозрачность.
Существует дополнение PNM под названием Portable Arbitrary Map (PAM), где есть прозрачность. Но для нас он не подходит из-за многословности. Самый маленький из файлов PAM, представляющий прозрачный пиксель, такой:
P7 WIDTH 1 HEIGHT 1 DEPTH 4 MAXVAL 1 TUPLTYPE RGB_ALPHA ENDHDR \0\0\0\0
На последней строке идёт четыре нулевых байта. Всего получается 67 байт. Можно было бы использовать оттенки серого с альфа-каналом вместо RGBA, это бы сберегло два байта в секции данных. Но получится файл из 71 байта, поскольку нужно будет сменить TUPLTYPE с RGB_ALPHA на GRAYSCALE_ALPHA. Кроме того, программе обработки может не понравится MAXVAL 1, и придётся поменять его на MAXVAL 255 (ещё два байта).
В общем, для однопиксельных изображений без прозрачности, самым маленьким будет PNM (от 8 до 14 байт для PNM против от 14 до 18 для FLIF), а с прозрачностью самым мелким будет FLIF (от 14 до 20 байт для FLIF против от 67 до 69 байт для PAM).
Вот сравнительная табличка с оптимальными размерами файлов для разных однопиксельных картинок:
Добавить метки
Что такое пиксель?
Представьте себе, что экран монитора поделен на много тысяч маленьких клеточек, как тетрадный лист, только много-много мельче.
Каждая такая клеточка на экране называется пиксель.
Если клеточки совсем мелкие, на экран монитора помещается их больше. Значит, они лучше передают оттенки цвета и мелкие детали рисунка. Чем больше пикселей помещается на экране, тем выше разрешение. При низком разрешении — пикселей меньше, соответственно, размер их больше, а качество изображения хуже. Переходы цвета получаются сделанными как бы из мозаики, рисунки состоят из маленьких квадратиков. Итак, чем больше пикселей и чем они мельче — тем больше разрешение, тем выше качество рисунков.
Битый пиксель:
Вам случалось слышать выражение «битый пиксель»? Наверняка. Что же это значит? А это значит, что одна из клеточек на мониторе (экране ЖК телевизора, мониторе компьютера или ноутбука, матрице цифрового фотоаппарата) перестала проводить свет. Выключилась. Сломалась. Если разрешение экрана высокое, то среди сотен тысяч других клеточек ее видно почти не будет. При низком разрешении экрана она видна, как черная точечка на экране.
Горячий пиксель:
Еще пиксели бывают «горячими». На однотонном фоне они выглядят как разноцветные точки, красные, оранжевые, зеленые — любые. Значит, пиксель не потерял работоспособности, с ним все в порядке, просто он «завис» на каком-то определенном цвете, и не может переключиться на другой. Иногда это «вылечивается» само по себе, при перезагрузке, если нет — советуют помассировать экран монитора на месте «горячего» пикселя пальцем или ватной палочкой. Только осторожно, чтобы не повредить соседние клеточки-пиксели. Это не относится к фотоаппаратам, на дисплее фотоаппарата отражаются пиксели матрицы, и просто ватной палочкой до нее не доберешься.
Работа с компьютерами и многими другими современными гаджетами напрямую связана с устройствами отображения цифровой информации — мониторами и дисплеями. Кроме этого, широкое распространение получили приборы фиксации образов предметов окружающего мира с последующей оцифровкой изображений — фотоаппараты и сканеры. Сложно, обращаясь с подобной техникой, не услышать и не увидеть слово пиксель.
Многие пользователи имеют поверхностное представление об этом понятии, однако знать, что такое пиксель, важно по той уже причине, что сохранить остроту зрения можно, правильно подобрав монитор и режим отображения информации на нём — одним из определяющих параметров в этом является количество пикселей на единицу длины.
Определение понятия
Минимальный физический элемент матрицы устройства формирования изображения называется пикселем (пикселом или точкой). Также этим понятием обозначают минимальный составной элемент растровой графики.
Точки в устройствах вывода
Для отображения цветных изображений используются сочетания точек с разным соотношением насыщенности красного, зелёного и синего цветов. Эти три цвета появляются в результате работы соответствующих субпикселей в матрице дисплея. Три разноцветных субпикселя в пикселе образуют триаду. ЖК-мониторы характеризуются отображением одной триады в одной точке. Чем меньше размеры пикселей, тем больше их расположено на единице длины, тем точнее можно передать детали изображений, разрешение таких мониторов выше.
Точки в изображениях
Минимальная структурная единица картинки заполнена цветом полностью, а не является результатом совокупного действия трёх субпикселей. Так же, как и в случае с дисплеями, относительно большое количество пикселов на единицу длины даёт лучшую детализацию графики, её разрешение выше.
Комфорт при просмотре
Глубокая детализация изображений обеспечивает человеку приятные ощущения при просмотре, поскольку отпадает необходимость напрягать зрение для выявления мельчайших элементов графики. Качественная прорисовка есть результат действия двух факторов: высокого разрешения монитора и картинки. Если разрешение того и другого совпадает, качество изображения наилучшее. При уменьшении масштаба картинки её детализация ухудшается по причине реструктуризации (не в лучшую сторону) элементов для вывода на экран. При увеличении масштаба может происходить дорисовка промежуточных пикселов — так называемая интерполяция, которая не может гарантировать точное воспроизводство деталей изображения.
Таким образом, знание того, что такое пиксель, какими свойствами он обладает и какую роль играет в построении изображения, даёт возможность создавать наиболее комфортную и безопасную для зрения графическую обстановку.
элемент изображения. понятие разрешение и размер
Пикселем называется наименьшая единица измерения двумерного цифрового изображения. Также пиксель является наименьшим элементом измерения матрицы дисплеев. Пиксель представляет собой неделимый объект прямоугольной или круглой формы. Если говорить о двумерном изображении, то пиксель является только количественной характеристикой, говорящей о размере изображения и его четкости. В матрицах дисплеев, пиксель является величиной, говорящей о ее размерах, а также о цветовой характеристике.
Содержание
- 1 Pixel — что это такое?
- 2 Пиксел — свойства
- 3 Пиксель и монитор — как они связаны
- 4 Из чего состоит пиксель?
- 5 Какой формы пиксель
- 6 Плотность пикселей на дюйм — ppi
- 7 Как пиксели выводятся на монитор
- 8 Разрешение
- 8.
1 Разрешение и размер – это одно и то же?
- 8.
- 9 Так количество означает качество?
- 10 Как определить цвет пикселя
- 10.1 Через Photoshop
- 10.2 Через Paint
- 10.3 Просмотр кода элемента в браузере
- 10.4 Использование программ и сервисов
- 11 Как изменить размер в Photoshop
- 12 Определение количества пикселей в 1 сантиметре
- 12.1 Формула для вычисления ppi
- 12.2 Как узнать размер изображения в пикселях
1 Разрешение и размер – это одно и то же?Pixel — что это такое?
Термин образован комбинацией первых частей английских слов pic-ture el-ement (деталь рисунка). Иногда в русском языке используется вариант «элиз» (элемент изображения).
Пиксель — это минимальная по размеру целостная логическая составляющая графического образа. Или, в случае дисплеев, формирующих картинку, — элемент фотоматрицы.
Подобно тому как мозаика складывается из отдельных частей одинаковой формы и размера, пиксели на мониторе формируют видимый образ.
Пиксел — свойства
Данный объект можно характеризовать расположением, цветом, яркостью, формой и прозрачностью.
В ряде компьютерных систем каждый элиз содержит информацию об одном цвете. А в других приборах — например, в цветных мониторах — он образуется из триад. То есть, субъединиц трех основных цветов, воспринимаемых сетчаткой глаза. При этом, в отдельно взятой тройке последовательность цветов задается с помощью кодирования.
В экранах электронно-лучевых трубок количество триад в одном элементе не ограничено. А в жидкокристаллических мониторах каждый pixel содержит одну тройку цветов.
Форма пикселя может представлять из себя многоугольник (4 или 8 сторон) или круг.
Пиксель и монитор — как они связаны
Если присмотреться к экрану монитора, то можно увидеть что он состоит из многомиллионной сетки пикселей. Также, мониторы имеют битовую глубину, от которой зависит то, сколько цветов может отображать каждый пиксель. Например, на 8-битовом дисплее каждый блок может отображать 8-битный цвет, равный 28 степеням или 256 цветам.
С 24-битными дисплеями каждый пиксель может отображать более 16 миллионов цветов.
Из чего состоит пиксель?
Хотя пиксели являются самыми маленькими целыми элементами изображения, они состоят из более мелких составляющих. К примеру, в стандартном RGB-мониторе каждый пиксель состоит из трех точек. А именно из красной, синей и зеленой, которые при необходимости создают нужный цвет.
Количество пикселей по горизонтали и вертикали, называется разрешением изображения. Чем больше пикселей находится на небольшой площади, тем сложнее различить отдельные элементы, это и называется разрешением высокого качества.
Какой формы пиксель
Из уроков математики мы знаем, что у точки нет ни формы, ни размера. Это лишь абстракция. Круглые точки потому, что такой след оставляет грифель карандаша или стержень ручки.
В цифровом растровом изображении пиксели считаются квадратными. Ведь это ячейки таблицы, которые расположены в вертикальных столбцах и горизонтальных строках строго друг за другом.
Пиксели на экранах устройств могут иметь разную форму — всё зависит от технологии производства экрана. Обычно один пиксель отображается с помощью трех цветных элементов (красного, зеленого и синего), которые могут светиться с разной интенсивностью. Форма и расположение этих элементов бывают разными. Также порой для корректной цветопередачи используется два элемента красного цвета, один зеленый и один синий; комбинации могут быть и другими.
Плотность пикселей на дюйм — ppi
Количество элементов на единицу площади или длины называется разрешающей способностью прибора. Оно определяет качество формируемого или выводимого изображения. Единицей измерения этой величины является ppi (pixels per inch). Ppi — это число пикселей на дюйм (1 дюйм=2.54 см).
Эта размерность показывает соотношение между 2D-параметрами экрана и его диагональю. 2D-параметры задаются количеством элементов изображения по двум измерениям (например, 1024х600). А диагональ выражается в дюймах (10.
1 i).
Физический смысл ppi — количество пикселей на диагонали дисплея, приходящихся на один дюйм ее длины.
Экран первой модели компьютера Mac содержал 72 ppi. А современные iPhone имеют плотность 458 пикселей на дюйм и выше.
Иногда для определения разрешения дисплея рассматривают не его диагональ, а ширину. При этом ppi рассчитывают по формуле:
R=P/L, где
- P — точечная ширина монитора;
- L — его физический размер в дюймах;
- R — разрешающая способность, выраженная в пикселях на дюйм.
Как пиксели выводятся на монитор
Из пикселей состоит все изображение, появляющееся на экране. Дисплей любого устройства можно сравнить с сотами: у него есть определенное количество ячеек, где могут выводиться пиксели. Это и есть фактическое разрешение экрана.
Сегодня наиболее востребованы устройства с такими разрешениями, как:
- HD — 1280 пикселей по горизонтали и 720 по вертикали;
- FullHD — 1920 на 1200 точек соответственно;
- 4K — 3840 на 2160 пикселей.
В начале двухтысячных годов в обиходе были VGA-дисплеи с разрешением 640 на 480 точек, но в наши дни такие устройства считаются уже раритетными.
За правильный вывод изображения на экран отвечает видеокарта. Когда разрешение экрана больше разрешения показываемой картинки, то в таком случае она автоматически растягивается до нужных размеров. Но при этом страдает ее качество.
Разрешение
Размер изображения в пикселях измеряет общее число пикселей по ширине и высоте.
Разрешение (Resolution) – величина, определяющая четкость деталей растрового изображения. Чаще всего она устанавливается в количестве пикселей на дюйм (Pixels Per Inch / PPI).
Чем больше пикселей на меру измерения, тем выше разрешение.
Чем выше разрешение, тем лучше качество печати.
Примечание
В Фотошопе можно посмотреть на соотношение размера и разрешения открытого изображения, перейдя через меню «Изображение — Размер изображения» (Image — Image Size / Сочетание клавиш «Atl+Ctrl+i»).
Рассмотрим на примере разницу разрешений.
Ниже представлено 2 варианта фотографии с разным разрешением.
Сравнение фотографии с разрешением 300-ppi и 30-ppi.
При создании документа в Фотошопе (Файл – Создать | File – New / Сочетание клавиш «Ctrl+N») можно установить параметр «Разрешение» (Resolution).
Параметр «Разрешение» (Resolution) при создании нового изображения в Фотошоп.
Оптимальное, рекомендованное значение – 72 пикс/дюйм (Pixels Per Inch / PPI).
Мы рассмотрели понятия «пиксель» и «разрешение» относительно растровых изображений и программы Фотошоп.
Разрешение и размер – это одно и то же?
Одно из самых больших недопониманий исходит из концепции разрешения. Если это ваш случай, поверьте мне, что вы не одиноки.
Проблема в том, что разрешение может относиться ко многим вещам, две из которых могут стать проблемой. Далее я объясню эти две концепции разрешения, однако у них есть одна общая черта, которую мне нужно прояснить в первую очередь.
Обе они имеют отношение к пикселям.
Вы, наверное, много слышали о пикселях, по крайней мере, когда покупали свою камеру. Это одна из самых понятных и «существенных» спецификаций на рынке, поэтому я начну с этого.
Так количество означает качество?
Из-за вышеупомянутой взаимосвязи между размером и разрешением многие думают, что мегапиксели означают качество. И в некотором смысле это происходит потому, что чем больше пикселей вы имеете, тем выше их плотность.
Однако, помимо количества, вы также должны учитывать глубину пикселей, это то, что определяет количество тональных значений, которое содержит ваше изображение. Другими словами, это количество цветов на пиксель. Например, 2-битная глубина может хранить только черный, белый и два оттенка серого, но более распространенное значение — 8 бит. Значения растут экспоненциально, например, с 8-битной фотографией (2 до 8 = 256), у вас будет 256 оттенков зеленого, 256 тонов синего и 256 тонов красного, что означает около 16 миллионов цветов.
Это уже больше того, что глаз может отличить, что означает, что 16-бит или 32-бит будут выглядеть для нас относительно одинаково. Конечно, это означает, что ваше изображение будет тяжелее, даже если размер одинаков, потому что в каждом пикселе содержится больше информации. Именно поэтому качество и количество не обязательно идентичны.
Поэтому количество имеет значение, но и размер и глубина каждого пикселя определяют качество. Вот почему вы должны смотреть все характеристики камеры и ее сенсора, а не только количество мегапикселей. В конце концов, существует ограничение на размер, который вы можете распечатать или просмотреть, более того, это приведет только к дополнительному размеру файла (мегабайт) и не повлияет на размер изображения (мегапиксели) или качество.
Как выбрать и контролировать размер изображения и размер файла?
Прежде всего, вам нужно определиться, какая максимальная плотность вам нужна. Если вы разместите свое изображение онлайн, вы сможете отлично справиться с разрешением всего 72 dpi, но это слишком мало для печати фотографии.
Если вы собираетесь печатать, вам нужно от 300 до 350 dpi.
Конечно, мы говорим обобщенно, потому что каждый монитор и каждый принтер будут иметь немного другие разрешения. Например, если вы хотите распечатать фотографию до 8 × 10 дюймов, вам нужно, чтобы изображение имело 300 точек на дюйм x 8 «= 2400 пикселей и 300 точек на дюйм x 10» = 3000 пикселей (поэтому 2400 × 3000 для печати 8 × 10 при 300 dpi). Все, что больше, будет лишь занимать место на жестком диске.
Как определить цвет пикселя
Если вам нужно узнать цвет пикселя, сделать это можно любым из описанных ниже способов.
Через Photoshop
Для этого нужно проделать следующие шаги:
- открыть через Photoshop изображение, содержащее нужные пиксели;
- на панели инструментов нужно найти инструмент под названием «Пипетка»;
- щелкнуть левой мышкой в той части изображения, цвет которого вас интересует;
- перейти в палитру и посмотреть код цвета.
Через Paint
Чтобы определить цвет пикселя через Paint, проделайте следующие шаги:
- открыть через Paint изображение, которое содержит пиксели нужного цвета;
- использовать инструмент «палитра»;
- перейти в изменение цветов, где будет указано содержание красного, зеленого и синего тонов (RGB, то есть Red, Green, Blue).
Просмотр кода элемента в браузере
Чтобы узнать код элемента в браузере, выполните следующие действия:
- выделить на сайте нужный элемент мышкой;
- щелкнуть по нему правой кнопкой мыши и выбрать «Просмотреть код страницы»;
- после открытия кода необходимо найти что-то похожее на «color».
Использование программ и сервисов
Сегодня есть много программ для определения цвета. Также можно определить цвет пикселя онлайн. В интернете есть несколько специальных бесплатных сервисов специально для этих целей. Например, этот. Подробнее смотрите в видео:
Смотрите это видео на YouTube
Как изменить размер в Photoshop
Откройте меню Размера изображения и во всплывающем окне вам нужно пометить поле «resample». Если вы не активируете «resample», вы будете перераспределять пиксели, как я объяснила в начале статьи.
Вы также можете выбрать галочку «Пропорция», если вы хотите, чтобы параметры регулировались в соответствии с вашими изменениями.
Таким образом, ширина изменяется при изменении высоты и наоборот.
8×10 дюймов при 300 ppi, это размер, необходимый для печати 8 × 10. Обратите внимание на размер пикселей 3000 x 2400.
750×500 пикселей при 72 ppi. Это веб-разрешение, и это точный размер всех изображений в этой статье. Размер в дюймах не имеет значения при публикации в Интернете — имеет значение только размер в пикселях.
В верхней части окна вы также увидите, как изменяется размер файла. Это несжатая версия вашего изображения, это прямая связь, о которой я говорила в первой части статьи: меньшее количество пикселей означает меньше информации.
Теперь, если вы все еще хотите изменить размер файла без изменения размера, то вы можете сделать это, когда сохраняете изображение. Перед сохранением фотографии вы можете выбрать нужный формат:
Если вы не хотите потерять какую-либо информацию, вам необходимо сохранить несжатый формат. Наиболее распространенным является TIFF.
Если вы не возражаете потерять небольшую информацию и иметь более легкий файл, перейдите в JPEG и выберите, насколько маленьким он должен быть. Очевидно, чем меньше значение вы устанавливаете, тем больше информации вы потеряете. К счастью, у него есть кнопка предварительного просмотра, чтобы вы могли видеть влияние вашего сжатия.
JPG высокое качество.
JPG низкое качество. Обратите внимание, как он пикселизирован и разбит? Если вы выберете очень низкое качество, вы рискуете ухудшить изображение слишком сильно.
Определение количества пикселей в 1 сантиметре
Для перехода в метрическую систему единиц измерения следует выразить количество элизов на дюйм в обратных сантиметрах.
Если учесть, что 1 дюйм =2.54 см, то перевести разрешение в пиксели на сантиметр можно, разделив его значение в обратных дюймах на 2.54.
Например, если для данного экрана ppi=109 элементов на дюйм, то на 1 сантиметр в нем приходится 109/2.
54=42 точки.
Формула для вычисления ppi
Зная пиксельную ширину A и высоту B экрана, можно по теореме Пифагора определить его диагональ L: L=(A2+B2)½, а затем, разделив L на длину диагонали D, выраженную в дюймах, получить разрешение: R=L/D.
Для дисплея Mac Cinema, имеющего параметры 2560х1440 точек и диагональ 27 дюймов имеем: L=(25602+14402)½=2943 элемента, R=2943/27=109 ppi=42 pixel/см.
Как узнать размер изображения в пикселях
На устройствах вывода, в частности, принтерах, качество изображения тоже характеризуется плотностью точек, т. е. их количеством на дюйм. Но эта величина называется не ppi, а dpi (dots per inch).
Этот параметр помогает вычислить размер картинки, которая выводится на печать. Поскольку стороны листа бумаги измеряют в метрических единицах, то в формулу перевода из пикселей в сантиметры входит коэффициент 2.54: l=(2.54*p)/dpi, где:
- p — длина стороны, выраженная в пикселях;
- l — размер стороны фотографии.
Например, необходимо распечатать изображение с разрешением 1440х1200 точек.
Хорошее качество печати можно получить на принтере с разрешением 150 dpi, отличное — если у печатающего устройства R=300 dpi.
Возьмем второй вариант и получим: A=(2.54*1440)/300=12 сантиметров в ширину; B=(2.54*1200)/300=10 см в высоту.
Для распечатки данного изображения понадобится фотобумага размером 10х12 см.
Когда требуется узнать размер в пикселях выводимого на печать рисунка, следует выразить p из формулы для l. Получаем: p=l*dpi/2.54.
Фотографии распечатываются в разных размерах. Если необходимо сделать изображение 9х12 см с разрешением принтера 150 dpi, то его параметры в пикселях будут следующими: Ap=150*12/2.54=709 — ширина фотографии; Bp=150*9/2.54=531 — ее высота.
То есть, в формировании этого изображения будет задействовано 709*531=376479 точек.
Пикселы в качестве единиц измерения
|
Заглавная страница
КАТЕГОРИИ: Археология ТОП 10 на сайте Приготовление дезинфицирующих растворов различной концентрации Техника нижней прямой подачи мяча. Франко-прусская война (причины и последствия) Организация работы процедурного кабинета Смысловое и механическое запоминание, их место и роль в усвоении знаний Коммуникативные барьеры и пути их преодоления Обработка изделий медицинского назначения многократного применения Образцы текста публицистического стиля Четыре типа изменения баланса Задачи с ответами для Всероссийской олимпиады по праву Мы поможем в написании ваших работ! ЗНАЕТЕ ЛИ ВЫ? Влияние общества на человека Приготовление дезинфицирующих растворов различной концентрации Практические работы по географии для 6 класса Организация работы процедурного кабинета Изменения в неживой природе осенью Уборка процедурного кабинета Сольфеджио. Все правила по сольфеджио Балочные системы. |
⇐ ПредыдущаяСтр 5 из 7Следующая ⇒ В Publisher 2003 включена возможность использования пикселов в качестве единиц измерения. Разрешение экрана измеряется в пикселях, пиксели являются также стандартными единицами измерения при разработке веб-страниц. Благодаря использованию пикселов в качестве единиц измерения можно гораздо точнее располагать элементы веб-страницы и проектировать графические элементы в соответствии со стандартными размерами. По умолчанию в качестве единиц измерения используются пикселы. Чтобы установить единицы измерения, выберите в меню Сервис команду Параметры и перейдите на вкладку Общие. Автоматическая настройка длины страниц При работе с Publisher 2003 больше не нужно беспокоиться о том, чтобы на странице не было слишком много или слишком мало информации. Совет. По умолчанию длина каждой страницы веб-публикации составляет 4608 пикселей (около пяти печатных страниц размера letter). Если для размещения материала требуется страница большей длины, можно изменить длину страницы. Для этого , выведите ее на экран. В меню Файл выберите команду Параметры страницы. В области Тип публикации щелкните Настроить. Для параметра Высота введите необходимое значение длины страницы и нажмите кнопку ОК. Имена файлов веб-страниц Publisher 2003 позволяет задавать имена файлов каждой веб-страницы публикации. Это особенно удобно, если вы собираетесь разместить вспомогательные файлы веб-узла в папке. Имена файлов отображаются в строке адреса веб-обозревателя. Благодаря заданию имен файлов для веб-страниц (например, файл страницы «О нас» может назваться aboutus. Примечания. По умолчанию в Publisher имена файлов для веб-страниц задаются автоматически при публикации веб-узла в Интернете. Если вы хотите самостоятельно выбрать имена для всех веб-страниц за исключением домашней страницы, выполните следующую процедуру. В качестве имени файла для домашней страницы лучше всего использовать «index.htm», поскольку в этом случае домашняя страница по умолчанию отображается, когда посетители вводят URL-адрес веб-узла. Если не использовать «index.htm» в качестве имени файла домашней страницы, посетителям веб-узла придется вводить URL-адрес и точное имя файла домашней страницы, например http://www.adventure-works.com/yourfilename.htm. Назначение имени файлу для веб-страницы, не являющейся домашней страницей. Перейдите к странице, для которой требуется назначить имя файла. 1. В меню Сервис выберите команду Параметры веб-страницы. 2. В поле Имя файла группы Публикация на веб-узлевведите имя веб-страницы. Имя файла не должно содержать пробелов и специальных знаков. Расположение вспомогательных файлов веб-узла во вложенных папках 1. В меню Сервис выберите команду Параметры. 2. Щелкните вкладку Веб. Установите флажок «Создать папку для вспомогательных файлов» и нажмите кнопку ОК. Добавочная загрузка Обслуживание веб-узла и обновление его содержания зачастую может отнимать больше времени и сил, чем его разработка. Publisher 2003 позволяет сэкономить время благодаря использованию новой функции добавочной загрузки. При использовании дополнительной функции добавочной загрузки Publisher создает на сервере особый XML-файл, с помощью которого осуществляется отслеживание изменений веб-страниц. Когда в веб-публикацию вносятся изменения и ее требуется повторно опубликовать, этот файл используется в Publisher для отслеживания измененных страниц и загрузки только соответствующих файлов. Если у вас небольшой веб-узел или вы планируете внести изменения во многие страницы веб-узла, использовать эту функцию не требуется. Однако эта возможность может обеспечить существенную экономию времени при обслуживании крупного веб-узла, загрузка которого занимает много времени, или если планируется внести изменения в небольшое число веб-страниц. Как использовать функцию добавочной загрузки 1. В меню Сервис выберите команду Параметры. 2. Щелкните вкладку Веб. Убедитесь, что установлен флажок Включить добавочные публикации в Интернете, и нажмите кнопку ОК. ⇐ Предыдущая1234567Следующая ⇒ Читайте также: Техника прыжка в длину с разбега Тактические действия в защите История Олимпийских игр История развития права интеллектуальной собственности |
|
Последнее изменение этой страницы: 2017-02-22; просмотров: 292; Нарушение авторского права страницы; Мы поможем в написании вашей работы! infopedia. |
Определение реакций опор и моментов защемления
Можно просто добавить свои материалы на страницу, а когда веб-узел опубликован в Вебе, отображается только заполненная часть страницы.
htm) обеспечивается более профессиональное оформление веб-узла.
su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь — 176.9.44.166 (0.012 с.)5.5. Измеритель
5.5. Измеритель5.5. Измеритель
Рисунок 14.177. Измеритель
Инструмент «Измеритель» используется для получения сведений о расстояниях в пикселях в рабочих изображениях. Нажав и протащив мышь, можно определить значение угла и число пикселей между точкой нажатия и местоположением курсора. Эта информация показывается в строке состояния, а также её можно посмотреть в «Информационном окне».
Частый случай использования «Измерителя» — расчёт угла поворота при неровном горизонте на фото. Начиная с версии GIMP-2.10.4, поворот для выравнивания горизонта больше не нужно выполнять вручную: после измерения угла, просто нажмите на новую кнопку Выровнять.
Эту кнопку можно использовать для выравнивания горизонтальных или вертикальных линий: у начальной точки есть маленький штрих, указывающий направление.
При прохождении указателя мыши над конечной точкой значок указателя меняется на значок указателя перемещения. Каждый последующий щелчок выполняет новый замер.
5.5.1. Строка состояния
Информация отображается в строке состояния, располагающейся в нижней части окна изображения:
расстояние между исходной точкой и указателем мыши, в пикселах;
угол, в каждом квадранте, от 0° до 90°;
координаты указателя относительно исходной точки.
5.5.2. Активация инструмента
Добраться до инструмента «Измерения» можно через меню изображения: Инструменты → Измерения,
или щёлкнув по значку инструмента на панели инструментов,
5.5.3. Клавиши-модификаторы (по умолчанию)
- Shift
Удерживая клавишу Shift, потащите из уже существующей крайней точки для создания второй линии измерения от этой крайней точки.
Будет показан угол между этими двумя линиями. Любую крайнюю точку можно переместить перетаскиванием. Таким образом можно измерить любой угол изображения:Рисунок 14.178. Модификатор Shift
Нажмите на начальную точку и тащите, следуя стороне угла.
Затем, удерживая клавишу Shift, щёлкните на начальной точке и тащите, следуя другой стороне угла: вы получите значение этого конкретного угла.
- Ctrl
Нажатие клавиши Ctrl позволяет создавать только линии с ориентацией до ближайших 15°.
Нажатие клавиши Ctrl и щелчок по одной из конечных точек создает горизонтальную направляющую. Указатель мыши над конечной точкой при этом будет выглядеть так: .
В режимах горизонтальной или вертикальной ориентации клавиша Ctrl также выполняет переключение между горизонтальной и вертикальной ориентацией
- Alt
Alt+щелчок по конечной точке создаст вертикальную направляющую.
- Ctrl+Alt
Эта комбинация клавиш включает режим перетаскивания уже нарисованной линии измерения целиком.
Нажатие комбинации клавиш Ctrl+Alt и щелчок по одной из конечных точек создаст в ней горизонтальную и вертикальную направляющие.
Будет показан угол между этими двумя линиями. Любую крайнюю точку можно переместить перетаскиванием. Таким образом можно измерить любой угол изображения:
5.5.4. Параметры
Рисунок 14.179. Параметры инструмента «Измеритель»
- Ориентация (Ctrl)
В режиме Авто (по умолчанию), кнопка Выровнять привязана к наименьшему углу между линией измерения и вертикальным или горизонтальным направлениями. По горизонтали и По вертикали отменяют это поведение и явно указывают, каким оно должно быть.
- Окно информации
Этот параметр запускает диалог информационного окна с подробными результатами инструмента «Измерения».
Эта информация является более полной, чем информация в строке состояния.- Выровнять
Преобразование, Интерполяция и Обрезка описываются в Раздел 3.1, «Общие свойства». Вот пример выпрямления контура:
Исходное изображение
Обводка по контуру
Сделать контур видимым
Нарисовать измерительную линию в том сегменте, который нужно выровнять
Выровнять
Рисунок 14.180. Параметры обрезки для «Выравнивания»
Нарисовать измерительную линию
Выравнивание с параметром «С полями»
Выравнивание с параметром «Без полей»
Выравнивание с параметром «В прямоугольник»
Выравнивание с параметром «Пропорциональная»
Выровнять: нажмите на эту кнопку, чтобы выполнить выравнивание
Эта информация является более полной, чем информация в строке состояния.5.
5.5. Измерение поверхностейИзмерять поверхности напрямую нельзя, но можно использовать Гистограмму, которая сообщает число пикселов в выделении.
Единицы измерения при дизайне мобильных приложений
April 19, 2021
При работе с Android системами обычно выбирается базовый фрейм 360×640, для адаптации под удлиненные экраны 18:9 можно использовать размер фрейма 360×720.
Размер фрейма для приложения на системе IOS чаще всего используется 375×812.
В большинстве случаев UI дизайнеру этого достаточно, но если вы хотите лучше понимать, что происходит с вашим дизайном после сдачи макетов и уверенно оперировать терминологией, то прочитайте эту статью.
Дизайн приложений Android и IOS
Для удобства все координаты в Figma представлены в px, а фреймы имеют размеры соответствующие базовому (Android) или логическому (iOS) разрешению экрана устройства. Это позволяет не беспокоиться о последующем представлении данных. Нужно только знать под какую модель iPhone требуется дизайн, нужна ли адаптация под другие модели и, если потребуется, с каким коэффициентом плотности (@x1,2,3,4) нужно подготовить ассеты.
Что такое DPI и PPI
Из-за неоднозначности термина «пиксель» часто возникает путаница с пониманием величин DPI и PPI. Она порой проявляется даже внутри крупных программных систем, так что здесь мы будем рассматривать только то, что относится к дизайну интерфейсов для iOS и Android.
Начнем с основных понятий:
Пиксель изображения (px) — это наименьший элемент, составляющий растровое изображение.
Пиксель экрана (также px)— это элемент матрицы дисплеев, формирующих изображение.
Размер экрана в пикселях относится к общему количеству пикселей на дисплее. Указывается как ширина x высота с единицами измерения в пикселях: например, 1080×1920
Разрешение экрана указывает на количество пикселей [экрана], которые умещаются в линию на одном дюйме по вертикали или горизонтали матрицы экрана устройства, называется «плотностью пикселей» и обозначается PPI экрана.
Так же этот показатель сообщает о том, насколько велики пиксели на реальном экране устройства — чем меньше значение, тем крупнее пиксель.
Разрешение изображения говорит о четкости деталей растрового изображения и так же исчисляется в пикселах на дюйм (PPI изображения). Для изображения, предназначенного для печати, используют обозначение DPI — количество точек на дюйм.
Логическое разрешение на iOS и пиксели, независимые от плотности (dp) на Android нужны для сохранения видимых размеров элементов интерфейса программ на новых устройствах с различными параметрами экрана.
Соотношение экранов различных моделей iPhone
Система Android
DPI устройства задаёт разрешениеизображения всего экрана, который будет показан на устройстве. Используется для масштабирования интерфейса. Значение DPI присвоено устройству и задается программно.
При масштабе интерфейса по умолчанию в 100% значения DPI и PPI равны.
В Android для различения значений вместо PPI изображения стали использовать DPI (возможно подразумевая, что вывод изображения на дисплей смартфона и печать на лист бумаги это подобные процессы), что, привело дизайнеров к еще большей запутанности.
Dp это логическая (абстрактная) еденица измерения — пиксель независимый от плотности.
Один dp равен одному пикселю на экране с плотностью 160 DPI. Масштабируемые пиксели sp это то же, что dp, но для шрифтов. Они нужны для того, чтобы система или пользователь могли изменить масштаб шрифта без изменения размеров интерфейса. По умолчанию значение sp равно dp.
Экран с плотностью 160 DPI взят за основу и ему присвоено значение плотности mdpi. В figma такой экран соответствует фрейму 360×640.
На данный момент существует несколько значений плотности для поддержки экранов от 120 до 640 DPI.
Их так же называют квалификаторы плотности. Моделей матриц экранов очень много, их плотность может не точно совпадать с квалификатором, так что производителями смартфонов устанавливается приближенное значение.
Квалификатор плотности указывает на соотношение пикселей. Практически, это число, показывающее во сколько раз нужно увеличить детализацию ассетов (@1x, @2x, @3x, @4x). Этот множитель называют коэффициентом масштабирования.
Квалификаторы плотности
Система IOS
Каждому устройству с iOS присвоено свое логическое разрешение. Оно приблизительно соответствует физическому разрешению экранов первых моделей iPhone и iPad. Логическое разрешение используется так же, как базовое разрешение mdpi в Android.
Логическое разрешение обозначается указанием ширины и высоты экрана в поинтах (pt).
Для размеров шрифта так же, как в Android, используется sp.
Pt это еденицы координат. Они используются только для размещения элементов интерфейса и никак не отображаются для пользователя.
Коэффициент (фактор) масштабирования (ретина-коэффициент) в iOS присваивается каждой новой модели в зависимости от характеристик экрана.
Подробная гайд-схема по разрешениям iPhone
Информация о дисплеях всех iPhone, iPad и iPod touch
Render
Конечное устройство на основе верстки и ассетов выполняет отрисовку в соответствии с заданными параметрами и преобразует её в пиксели изображения экрана. Этот процесс называют растеризация.
Downscale
Прежде чем полученное изображение можно будет отобразить, устройству необходимо уменьшить его разрешение до разрешения матрицы дисплея. Полученные таким образом пиксели отображаются на экране устройства пользователя.
Изменение едениц измерения на разных этапах представления интерфейса
Все это может показаться сложным и нам кажется, что так оно и есть, раз уж этот вопрос неизменно поднимается на различных форумах, посвященных дизайну.
Если после прочтения статьи вы все же не до конца разобрались в вопросе — не беспокойтесь, если вы опираетесь на гайдлайны и правильно используете современные инструменты UI дизайна, тогда вам не обязательно обладать техническими знаниями о том, как ваш дизайн будет работать за пределами Figma.
Спасибо за прочтение!
Подробнее
10 дней
Курс по гайдлайнам IOS и Android
Онлайн
старт 28 июля
На курсе по изучению гайдлайнов вы узнаете принципы систем IOS и Android, познакомитесь со всеми элементами интерфейса, сделаете проект для портфолио и сможете задать вопросы наставнику.
Почему дизайнеры должны переходить с px на rem – и как это сделать в Figma
Проектирование с учетом доступности.
Если вы чем-то похожи на меня, то в течение последних лет с радостью использовали в Sketch и Figma пиксели (px), не задумываясь об этом. Мы привыкли к этой единице измерения. Это правильно, а если нет – команда разработчиков сможет это исправить, да? Кроме того, многие люди говорят, что мой дизайн должен быть идеальным до пикселя, верно?
Не совсем так (если только вы не истолковали «идеальный до пикселя», как избегание полупикселей).
Приступим:
Так в чем же проблема использования значений в пикселях?
Пиксель – это абсолютная единица измерения, то есть 1 пиксель соответствует фиксированному физическому размеру (в зависимости от разрешения экрана). Теперь фиксированное значение кажется мечтой дизайнера. Оно означает полный контроль, поскольку мы проектируем 1x в Figma! Делаем так, чтобы все выглядело идеально! Однако использование px может создать серьезные препятствия для доступности (помимо других проблем). Например, переопределение настроек размера шрифта, установленных пользователями.
Font-Size Preference? Что это?
Каждый браузер имеет размер шрифта корневого элемента по умолчанию. Это означает, что текст без стиля будет отображаться с определенным размером, обычно 16px. Пользователи могут изменить размер шрифта корневого элемента в настройках браузера. Попробуйте сами Chrome → More Menu (три маленькие точки в верхнем правом углу) > Settings > Appearance > Custom fonts.
Особенно это пригодится пользователям с нарушением зрения!
Попробуйте в своем браузере!
Не только пользователи могут изменить это предпочтение. Разработчики также могут изменить размер шрифта корневого элемента с помощью CSS, используя тег html.
? Кстати: пользователи могут увеличить настройки масштабирования браузера вместо изменения размера шрифта корневого элемента. Это не вызовет проблем с px. Соответственно все будет масштабироваться. Однако точно так же, как мы не знаем, какой размер экрана будут использовать пользователи, мы не в курсе предустановленных ими вариантов, к тому же существуют четкие правила добавления масштабирования шрифтов от WCAG.
PX перезапишет пользовательские настройки
Позвольте мне показать пример. Итак, вы определили все размеры шрифта в пикселях. Предположим, что ваш заголовок h2 – 48px, а текст p – 16px. Похоже на разумные читабельные значения.
Значения в пикселях будут препятствовать пользовательским настройкам размера шрифта в браузере
Однако, поскольку значения в пикселях фиксированные, они перезаписывают любые настройки браузера.
Это, как если бы они урезали все до размера шрифта корневого элемента. Даже если пользователь изменит размер корневого элемента, в нашем примере с 16px на 24px, это не повлияет на отображаемый размер. Таким образом, вы создали барьер для юзабилити.
Что изменится, если я буду использовать REM единицы измерения?
rem – относительная единица, относящаяся к размерам шрифта корневого элемента (r в rem означает корень – англ. root). Таким образом, большую часть времени 1rem = 16px, однако, если размер шрифта корневого элемента был изменен (помните, что это могли сделать пользователи или разработчик), например, на 24px, тогда 1rem = 24px.
1rem = текущая настройка размера шрифта корневого элемента
Использование модулей rem учитывает пользовательские настройки браузера
Итак, чтобы преобразовать заголовок h2 из 48px в rem, мы делим 48px/16px (мы предполагаем, что размер корневого элемента по умолчанию) = 3rem. Если вам так проще, просто представьте это в виде %.
1 rem – это 100%, а 3 rem – это 300%.
REM не переводится в пиксели как таковые, но вы можете рассчитать значение пикселей на основе размера шрифта корневого элемента. Весь смысл его использования в том, что значение не является фиксированным.
Итак, чтобы ответить на наш первоначальный вопрос: «Что изменится в нашем дизайне при использовании rem вместо px». Ответ: для всех пользователей, не меняющих размер шрифта корневого элемента (а это, без сомнения, подавляющее большинство), абсолютно ничего не изменится, и ваш дизайн выглядит так же, как с px. Для меньшинства, которое полагается на изменение размера шрифта корневого элемента, весь текст (и в идеале все другие элементы, но об этом позже) будет масштабироваться пропорционально.
Прелесть в том, что, используя единицы rem для определения размера шрифта, вы как дизайнер сохраняете гармонию и иерархию шкалы шрифтов, но при этом предоставляете пользователям гибкость в адаптации размеров шрифта.
А что насчет EM?
И rem, и em относятся к размеру корневого элемента, но они не интерпретируют его одинаково во всем вашем дизайне.
rem → значение, кратное размеру шрифта корневого элемента вашего браузера, например, размер шрифта корневого элемента = 16px, тогда 1rem = 16px
em → значение, кратное размеру шрифта элемента, в котором оно используется, например, размер шрифта контейнера 2rem = 32px, таким образом, 1em = 32px внутри контейнера
Использование em-единиц учитывает настройки браузера пользователя, но относится к элементу, в котором они используются
Таким образом, он по-прежнему соблюдает настройки браузера, но всегда относится к следующему более высокому элементу, в некоторых случаях это может быть корневой элемент, но он также, как в нашем примере, может быть контейнером с установленным размером шрифта. Хорошо, я признаю, что в первый раз это сбивает с толку.
Я приготовил для вас заметку на codepen.
See the Pen REM EM and PX by moonlearning (@moonlearning) on CodePen.
? Примечание: вы много прочитаете, что они относятся к родительскому элементу. Да, em может наследовать настройки от родительского элемента, но по определению оно: «Равно вычисленному значению свойства шрифта элемента, в котором оно используется». Есть отличная статья, объясняющая это более подробно.
Так что это довольно увлекательный и динамичный способ настройки таких вещей, как внутренние отступы и поля. И rem, и em имеют свои сильные и слабые стороны в зависимости от варианта использования. Опытные фронтенд-разработчики прекрасно их объединяют. Однако, работая с Figma, вы можете заметить, что, хотя расчет rem прост, вычисление em становится довольно запутанным. Поэтому лично я, как дизайнер, придерживаюсь определения всех значений в rem и обязательно отмечаю, что команда разработчиков имеет полный контроль над конвертированием их в другие единицы, например, em, где это необходимо.
О том, как и зачем я это делаю, я расскажу чуть позже.
Вкратце
Но в Figma нет REM-модулей?! Что мне делать?
Это то, о чем большинство веб-разработчиков не знают: ни в одной программе проектирования интерфейса даже в таких продвинутых, как Sketch и Figma, мы в настоящее время не можем проектировать в rem / em единицах.
Итак, UX / UI дизайнеры вынуждены проектировать в px, в мире, где доступность является юридическим требованием… Да, это странно, да, это печально, учитывая, насколько продвинута Figma в других областях, и да, я уверен, что это будет исправлено в ближайшее время (задача не из легких, если только не добавить в Figma режим проверки, как быстрое исправление). И да, да, я знаю, что в идеальном мире все дизайнеры должны быть идеальными программистами, есть много статей об этом, но это не тема моей статьи. А пока давайте посмотрим, какие есть варианты у дизайнеров, использующих Figma, чтобы начать работать в относительных единицах.
Решение 1: Дизайн остается в PX и преобразуется в относительные единицы во время кодинга. И вся команда знает об этом!!!
Это хорошо работает, если вы работаете в тесной команде и четко распределяете обязанности. Разработчики должны знать о проблеме «в Figma только px» и переводить в CSS все пиксели в относительные единицы.
px в Figma, rem/em (или любые другие подходящие единицы) в CSS
На самом деле это неплохое решение, потому что, если вы работаете с хорошей технической командой, они будут гораздо более осведомлены о последних технологиях и требованиях доступности, которые, как уже упоминалось, представляют собой гораздо больше, чем просто относительные единицы. Они также могут не возражать против получения значений в пикселях, поскольку есть несколько помощников, позволяющих избежать утомительных вычислений:
Метод 62,6%
При этом размер шрифта корневого элемента в CSS установлен на 62,5%. Таким образом, вы как бы подделываете размер корневого элемента в 10px, но продолжаете выдавать правильные значения.
Нет, вы не трогаете реальный размер шрифта корневого элемента. Вы просто настраиваете его в своей разметке с помощью относительных измерений, и никто никогда ничего не узнает. Очень круто и хорошо объяснено в этой статье.
html {font-size: 62.5%;
/* 62.5% of the base size of 16px = 10px./
}
body {
font-size: 1.6rem;
/ reset 10*1.6 = 16px, to make sure you do not get any 10px around /
}
.someClass {
font-size: 2.4rem;
/ 10*2.4 = 24px */
}
Увійти у повноекранний режимВихід із повноекранного режимуSass Mixin
Сама Figma рекомендует этот Sass Mixin для простого преобразования px в rem. Вы также найдете там немного магии метода 62,6%, если немного проскроллите вниз.
Источник: screenshot mixin
Решение 2. Используйте инструмент передачи проекта разработчикам (например, Zeplin)
Прелесть Figma в том, что вам больше не нужен другой инструмент для передачи проекта разработчикам.
Однако, если вы используете для передачи такой инструмент, как Zeplin, он предоставляет фантастический способ просто переключить единицы измерения на rem. Мне нравится, что есть отдельная таблица стилей для блоков интервалов, которая автоматически отображается в rem.
Использование rem в Zeplin. Источник: сайт поддержки Zeplin
Все равно стоит указать команде, что исходные файлы Figma остаются в пикселях. Я немного расстроен, что не вижу такого конвертера rem в режиме проверки Figma, но, зная Figma, я уверен, что он вскоре появится.
Вы также можете использовать любой другой инструмент передачи проекта с этой опцией, например, Avocode, Anima и многие другие. Лично мне нравится Zeplin.
Решение 3. Определите значения PX и REM в таблицах стилей
Я предпочитаю именно это решение.
В любом случае я добавляю эти значения в свои таблицы стилей, особенно когда работаю на фрилансе со сменяющимися разработчиками. UX в UX / UI дизайне исходит из юзабилити, поэтому я обязан убедиться, что проектирую для каждого пользователя.
Точно так же, как я использую «on color» в своей таблице стилей цветов, чтобы напоминать себе и всем остальным о необходимости проверять контрастность для доступности. Этот прием помогает напомнить всем, что конечный результат должен быть в относительных единицах.
Таблица стилей типографики
Поэтому, когда дело доходит до перехода от дизайна к разработке, я просто добавляю значения rem к значениям px в таблицу стилей типографики. Важно иметь оба значения, поскольку дизайнерам, работающим с файлом, понадобятся пиксели.
Таблица стилей типографики. Источник moonlearing.io
Кстати, в Figma фактические единицы пикселей безразмерны, я предполагаю, что это нужно, чтобы не путать пиксели, используемые для дизайна, и пиксели разрешения экрана (в Figma мы проектируем так называемое 1x, где 1px = 1pt, но это тема для отдельной статьи, следите за обновлениями и подписывайтесь на автора).
Не забудьте также перевести высоту строки в относительные единицы! В этом случае вам не нужно использовать rem, вы можете просто использовать безразмерное число, например, 1.5. Оно рассчитает высоту строки из заданного размера шрифта. Поэтому размер шрифта 16px и высота строки 1.5 приведут к 16px * 1.5 = высота строки 24px.
Вычисления в Figma
Если вы не знаете, то вы можете рассчитать что угодно прямо на панели свойств. Таким образом, вы можете просто разделить заданный размер шрифта на 16px и записать новое значение в таблицу стилей. Вам нужно снова умножить его на 16px, чтобы восстановить значение в пикселях. Для высоты строки, я просто использую %, так как для меня это намного проще, а затем перевожу их в таблице стилей, например, 150% в 1.5.
Используйте панель свойств как калькулятор
Используйте плагин Hand››over
Вы также можете использовать этот отличный плагин, который сделает всю работу за вас. В Figma просто выберите элемент, и он покажет вам значения в rem.
Вы можете скачать его бесплатно в Figma Community. Оставьте размер корневого элемента 16px.
Плагин Hand >> over переведет для вас px в rem
Используйте онлайн-конвертер
Есть много конвертеров, например, nekoCalc. Вы также можете использовать определенное соотношение и попробовать что-то вроде этого. Подробнее об использовании шкал адаптивного типа читайте здесь.
Вычисление rem из предполагаемого базового размера 16px
Система интервалов и компоненты
Я использую систему интервалов 8pt для большинства своих проектов. Это означает, что все кратно 8 (обязательно подпишитесь на автора, статья об этом вскоре появится). Теперь это прекрасно работает с предполагаемым размером корневого элемента по умолчанию 1rem = 16px. Как вы могли заметить, я также делаю размер шрифта и высоту строки кратными 8 (иногда нужно выбирать значение кратное 4), поэтому я редко получаю сумасшедшие rem десятичные дроби.
Система интервалов 8pt, выбранные блоки в px, rem и описательное именование
Итак, как только моя система настроена, я просто применяю ее к своим компонентам.
Компонент с измерениями
Я добавляю rem только для того, чтобы напоминать себе и всем остальным использовать относительные единицы. Тем не менее, я добавляю примечание, в котором ясно указывается, что последнее слово в выборе компонентов и модулей остается за командой разработчиков. Иногда em могут быть более разумным решением.
Имейте в виду, что когда дело доходит до интервала, em иногда может быть гораздо лучшим решением, чем rem.
Тестирование и вычисление em в Figma было бы кошмаром, поэтому лучше доверить настройку реальных компонентов экспертам. Тем не менее, буду рад услышать другие решения!
? Несколько слов об именах интервальных блоков
Существует множество различных подходов, и некоторые дизайн-системы уже имеют заданную систему и именование интервалов.
Идеальное соглашение об именах – описательное, легкое для запоминания и… вот здесь появляется сложность… масштабируемое.
При настройке интервала я использую три группы S, L и M, где S – это мелкие элементы, например, внутри компонента, M – расстояния внутри групп и L – для разделения секций (грубо говоря). Внутри этих групп я добавляю размеры (всегда кратные 8) по мере необходимости, например. S-200 = 16px = 1rem. Сейчас я не использую 1, 2, 3 по той причине, что в будущем могу добавить или убрать размеры. Я не использую 10, 20, 30, так как их путают с пикселями, поэтому, как и с цветовыми вариантами, я использую шаг в 100 единиц, что дает мне большую гибкость. Однако, это не устоявшееся правило, а просто способ, который с течением времени мне показался наиболее удобным.
Не переживайте по поводу контура в 1px!
Это совершенно нормально! Нет проблем с наличием контура в 1px. Речь идет о том, чтобы сделать контент масштабируемым и пригодным к потреблению.
А как насчет точек останова?
Как UX / UI дизайнер, вы редко будете отвечать за выбор системы сеток (если только вы не используете настраиваемую CSS сетку, которая является моей любимой). Поэтому вам, скорее всего, будет предоставлен набор возможных точек останова для использования в вашем дизайне (всех или некоторых из них, зависит от вас).
Таблица стилей типографики с точками останова. Источник: moonlearing.io
Boostrap, например, сохраняет все точки останова в px, при этом определяя большинство других размеров в rem и em, «это потому, что ширина области просмотра в пикселях и не изменяется с размером шрифта». Другие, такие как Zurb foundation, используют em (обратите внимание, что здесь, похоже, em побеждает rem). Я решил, что буду указывать, как и в других моих таблицах стилей, px, а также em (не rem).
Точка останова и единицы измерения – непростая задача (по крайней мере, для меня, как дизайнера), поскольку есть еще кое-что, что нужно учитывать, например, браузеры, которые вы используете.
.. и множество мнений вокруг. Если вы захотите подробнее узнать об этой теме, вот отличная статья.
Хорошо, я понял, но на самом деле изменение размера шрифта корневого элемента требует больших усилий для такого небольшого количества людей!
Верно (хотя это не займет так много времени, как только вы осознаете это). Так почему же UX / UI дизайнер должен беспокоиться об относительных единицах? Потому что вы хороший человек и не станете парковаться на стоянке для инвалидов просто потому, что так удобнее (по крайней мере, я надеюсь, что вы не станете). Если вам нужна другая причина, по закону вы обязаны сделать свой веб-сайт доступным, и одна небольшая часть этого требования (среди многих других, объясненных WCAG) позволяет пользователям масштабировать текст. В разделе 1.4.4 WCAG заявляет «1.4.4 Изменение размера текста: …размер текста можно изменять без вспомогательных технологий до 200 процентов без потери содержимого или функциональности. (Уровень AA)»
Итак, в двух словах: создание «идеального до пикселя дизайна» стало просто преступлением… и мне это никогда не нравилось.
Спасибо за прочтение!
Перевод статьи uxdesign.cc
единиц — Point vs Pixel: в чем разница?
Спросил
Изменено 1 год, 8 месяцев назад
Просмотрено 331k раз
В чем разница между точками и пикселями?
0
Пиксель — это один квадратный «элемент изображения» (отсюда пиксель), т. е. одна точка на вашем изображении. Изображение 10×10 состоит из набора пикселей в сетке шириной 10 и высотой 10, что в сумме составляет 100 пикселей.
Пункт (pt), с другой стороны, является единицей длины, обычно используемой для измерения высоты шрифта, но технически способной измерять любую длину. В приложениях 1 пт равна ровно 1/72 дюйма; в традиционной печати технически 72pt составляет 0,996264 дюйма, хотя я думаю, что вы будете прощены за округление!
Количество пикселей = 1pt зависит от разрешения вашего изображения.
Если ваше изображение 72ppi (пикселей на дюйм), то одна точка будет равна ровно одному пикселю.
12
Пункт — это физическая единица длины, используемая в типографике. Это равно 1/12 Пика, а 1 Пика = 1/6 дюйма. Итак, 1 pt = 1/72 дюйма.
Следовательно, на дисплее с разрешением 72 ppi 1 точка = 1 пиксель.
В CSS
pt равен 1/72 дюйма, а px равен 1/96 дюйма.
Следовательно, px равен 0,75 pt [источник] .
В CSS все несколько абстрагировано, поэтому единица измерения, такая как «pt», не обязательно соответствует физическому размеру в один пункт, особенно на экран , «in» не обязательно имеет размер один дюйм и так далее. Даже «px» больше не обязательно имеет размер в один пиксель. В CSS все масштабируется, чтобы соответствовать виртуальному устройству с разрешением 96 пикселей на дюйм, просматриваемому с нормального расстояния чтения. На экранах и пиксельных устройствах, которые значительно отличаются от 96 пикселей на дюйм или которые не читаются с нормального расстояния чтения, единица px будет масштабироваться с некоторым коэффициентом, и все остальные единицы сохраняют те же отношения к ней соответственно, то есть , единица измерения по-прежнему будет 96 пикселей, а единица pt по-прежнему будет составлять 1/72 от единицы in.
В печатных изданиях
В печатных изданиях точка традиционно составляла примерно от 1/67 дюйма до 1/72,5 дюйма.
В цифровых носителях стало стандартом де-факто для точки быть ровно 1/72 дюйма в настоящее время, хотя все еще существуют менее распространенные альтернативные измерения, которые немного отличаются от 1/72, но не намного.
При печати вы обычно не измеряете в пикселях, потому что они представляют собой техническую информацию о целевом принтере или устройстве, которая не является абсолютным измерением. Например, дизайн может быть напечатан с разрешением 125 dpi, 300 dpi или 1200 dpi и при этом иметь те же физические размеры.
4
Точка — это типографская мера, то есть физическая мера длины , такая как мили, дюймы, метры или астрономическая единица. Исторически длина точки варьировалась в зависимости от региона и культуры, но с появлением настольных издательских систем и интернационализацией было установлено следующее соглашение:
.В конце 1980-х — 1990-х годах традиционная точка была вытеснена настольной издательской точкой (также называемой точкой PostScript), которая определялась как 72 точки на дюйм (1 точка = 1⁄72 дюйма = 25,4⁄72 мм = 0,3527 мм).
Пиксель — это наименьшая единица данных цифрового изображения . Это то же самое, что сказать, что пиксель не имеет реального физического размера. Пиксели используются для отображения изображения на экране или его печати, преобразуя информацию об изображении в пикселях в физическое представление. Плотность пикселей экранов измеряется в ppi (пикселей на дюйм), тогда как печатные изображения измеряются в dpi (точек на дюйм) — для обоих одинаковое количество пикселей изображения может привести к очень разным физическим размерам, например, 100 X 100 пикселей. изображение будет огромным при отображении на экране наружной рекламы или крошечным при печати на бумаге с разрешением 300 dpi.
Как правило, предыдущие ответы точны с точки зрения различия между печатным и цифровым форматом.
Однако новые устройства внесли дополнительную сложность.
Apple имеет обыкновение использовать термин «точка» для более эффективного обозначения «эталонных пикселей». Из библиотеки Apple для разработчиков iOS:
.точек по сравнению с пикселями
В iOS существует различие между координатами, которые вы указываете в ваш код рисования и пиксели основного устройства. Когда используешь собственные технологии рисования, такие как Quartz, UIKit и Core Animation, координатное пространство чертежа и координатное пространство вида оба логические координатные пространства с расстояниями, измеряемыми в пунктах. Эти логические системы координат отделены от координат устройства пространство, используемое системными фреймворками для управления пикселями на экране.
Система автоматически сопоставляет точки в пространстве координат вида с пикселей в пространстве координат устройства, но это отображение не всегда один к одному. Такое поведение приводит к важному факту, что вы должны всегда помни:
Одна точка не обязательно соответствует одному физическому пикселю.
Любой термин указывает на значение, которое отличается от фактической плотности пикселей устройства: Apple втиснула четыре пикселя в точку, чтобы эффективно повысить резкость изображения. На других устройствах (например, на некоторых от HTC) эта плотность еще выше, до шести пикселей на точку — выше, чем при печати!
Знакомство с измерением в ImageJ
Знакомство с измерением в ImageJПерейти к основному содержаниюПерейти к навигации
На этой странице
Знакомство с измерением в ImageJ
- Пространственные измерения
- Измерение плотности
- Пространственная калибровка (Шкала настройки)
Выберите то, что вы хотите измерить (задайте измерения)
Определение масштаба изображения
Установка масштаба с использованием существующей масштабной линейки
Установка масштаба с использованием известного расстояния
Установка масштаба с использованием разрешения изображения
Добавление линейки масштаба
Изучение масштаба и измерения изображения
Ресурсы
Фильмы на этой странице
- Как скачать фильмы
- Версии Flash-видео
- Версии iPod
к началу страницы
Знакомство с измерением в
ImageJ В разделе Введение в ImageJ вы узнали, что цифровое изображение представляет собой прямоугольный массив чисел, отображаемый в виде строки чисел.
по справочной таблице. Вы также узнали о трех измерениях изображения: ширине, высоте и битовой глубине. Сила обработки изображений заключается в ее способности проводить измерения в следующих измерениях:
Пространственные измерения Измерения расстояния, площади и объема. К ним относятся первые два измерения изображения, его ширина и высота.
Измерения плотности Измерения, включающие третье измерение, значений пикселей . Пиксельные значения могут представлять температуру, высоту над уровнем моря, соленость, плотность населения или практически любое явление, которое вы можете измерить.
Прежде чем вы сможете проводить значимые измерения, вам необходимо откалибровать изображение , то есть «сообщить» программному обеспечению, что пиксель представляет в реальном мире с точки зрения размера или расстояния ( пространственная калибровка ), с точки зрения того, что означают значения пикселей ( калибровка плотности ), или оба.
В этом разделе вы узнаете, как выполнять пространственную калибровку цифровых изображений.
- Запустите ImageJ , дважды щелкнув его значок на рабочем столе или щелкнув его значок в доке (Mac) или на панели запуска (Win).
- Выберите File > Open… , перейдите в папку или каталог Week 2 и откройте изображение lake_mead_2004_color.jpg , которое вы загрузили в разделе Intro to ImageJ.
Это снимок озера Мид, штат Невада, сделанный спутником Landsat в мае 2004 года.
Пространственная калибровка расстояния и площади в единицах, отличных от пикселей, называется пространственно калиброванное изображение .
к началу страницы
Выберите, что вы хотите измерить
ImageJ может выполнить ряд измерений для вас. Прежде чем вы начнете устанавливать весы и проводить измерения, вам необходимо определиться с вариантами измерений.
- Выберите Анализ > Задать измерения… .
- Откроется окно Задать измерения. Проверьте Площадь и Периметр (длина), чтобы собрать эти измерения. Затем нажмите ОК.
к началу страницы
Найти масштаб изображения
Если вы измеряете расстояния или площади на цифровом изображении, ваши результаты будут выражены в пикселей и квадратных пикселей . («Подождите, — говорите вы, — разве все пиксели не квадратные?» На самом деле, нет. Но это тема для другого раза…) Если вы хотите измерять характеристики изображения в таких единицах, как метры или квадратные мили, вам нужно конвертировать пиксели в их эквивалентные единицы «реального мира». Вы можете сделать это самостоятельно с помощью калькулятора, или у вас может быть ImageJ сделает всю работу за вас. («Yesssssss!») Предоставление ImageJ информации, необходимой для преобразования пикселей в другие единицы измерения, называется установкой масштаба .
Чтобы установить масштаб в ImageJ , вам нужно знать, что такое масштаб . Вот несколько способов узнать масштаб изображения:
- Масштабная линейка печатается на изображении.
- На изображении есть известное расстояние, например расстояние между двумя ориентирами.
- Имеется письменное заявление о масштабе, обычно в документации к изображению. В этом случае масштаб может также называться изображением с разрешением . Например, если в документации к изображению указано, что разрешение составляет 30 метров, то масштаб будет «1 пиксель = 30 метров».
- Скопируйте масштаб из другого изображения того же масштаба, на котором есть масштабная линейка или известное расстояние.
к началу страницы
Установка масштаба с использованием существующей масштабной линейки
Кто-то был достаточно любезен, чтобы добавить масштабную линейку к этому изображению озера Мид, поэтому мы будем использовать ее для установки масштаба.
- Используйте инструмент выбора прямой линии чтобы провести линию через масштабную линейку. Выберите Analyze > Set Scale… Откроется окно Set Scale. Отобразится расстояние, измеренное вами в пикселях. Введите 45 в качестве известного расстояния и км или километры в качестве единицы длины. Чтобы переделать линию, нажмите на инструмент со стрелкой, затем еще раз нажмите на инструмент выбора линии. Это эффективно сбрасывает инструмент.
- Использование инструмента выбора прямой линии , щелкните на одном конце линейки масштаба, перетащите на другой конец линейки масштаба и щелкните еще раз. (Совет: если удерживать нажатой клавишу Shift при выделении с помощью этого инструмента, выделение будет строго горизонтальным.)
- Выберите Анализ > Задать масштаб… .
- Откроется окно «Установить масштаб». Отобразится расстояние, измеренное вами в пикселях. В данном случае мы получили 261 пиксель. Ваш пробег, например пикселей , будет варьироваться, но он должен быть близок к этому. Введите 45 в качестве известного расстояния и км или километры в качестве единицы длины. Для справки масштаб (в данном случае 5,8 пикселя на километр) отображается внизу окна. Затем нажмите ОК.
Ваш пробег, например пикселей , будет варьироваться, но он должен быть близок к этому. Введите 45 в качестве известного расстояния и км или километры в качестве единицы длины. Для справки масштаб (в данном случае 5,8 пикселя на километр) отображается внизу окна. Затем нажмите ОК.- Чтобы проверить установленный масштаб, используйте инструмент выбора прямой линии , чтобы снова провести линию через линейку масштаба. Выберите Анализ > Измерить . Вы должны получить что-то очень близкое к 45 км в окне результатов. Если нет, сбросьте весы.
Покажи мне, как
Скрыть
- Использование инструмента выбора прямой линии
, щелкните на одном конце линейки масштаба, перетащите на другой конец линейки масштаба и щелкните еще раз. (Совет: если вы удерживаете клавишу Shift при выделении с помощью этого инструмента, выделение будет строго горизонтальным или вертикальным. )
- Выберите Анализ > Измерить .
- Откроется окно результатов. Вы должны получить что-то очень близкое к 45 км. Если нет, сбросьте весы.
)Покажите мне видео о настройке и проверке весов
Скрыть
Для просмотра этого видео включите JavaScript и рассмотрите возможность обновления веб-браузера до поддерживает HTML5 видео
- Измерьте расстояние между двумя небольшими островами на озере Мид.
Покажи мне какие острова
Скрыть
Эти маленькие острова.
Покажите мне результат
Скрыть
Расстояние между островами примерно 25,46 км.
Ваше расстояние может немного отличаться, в зависимости от того, как именно вы установили масштаб и где вы нажимали на острова. При необходимости используйте инструменты масштабирования и панорамирования, чтобы приблизиться к островам.
Покажите мне видео об измерении расстояния между ориентирами
Скрыть
Для просмотра этого видео включите JavaScript и рассмотрите возможность обновления веб-браузера до поддерживает HTML5 видео
- Попрактикуйтесь в измерении расстояний и площадей с помощью различных инструментов выделения на панели инструментов ImageJ . Маленькие красные треугольники на некоторых кнопках инструментов указывают на то, что доступны дополнительные инструменты выбора. Щелкните правой кнопкой мыши (Win) или щелкните, удерживая клавишу Control (Mac), эти кнопки, чтобы получить доступ к этим «скрытым» инструментам.
Покажите мне пример
Скрыть
Инструмент «Линия от руки» позволяет провести вдоль береговой линии озера.
- Закройте изображение lake_mead_2004_color.jpg , когда закончите.
начало страницы
Установка масштаба с использованием известного расстояния
Некоторые изображения не имеют масштабных полос. Однако, если вы знаете расстояние между двумя ориентирами, которые хорошо видны на обоих изображениях, вы можете использовать это расстояние для задания масштаба. Хорошие ориентиры должны быть четкими, относительно небольшими, максимально удаленными друг от друга и очевидными. Вы можете использовать любые ориентиры, какие хотите, но, поскольку мы уже знаем расстояние, мы будем использовать два небольших острова, которые мы измерили в предыдущем разделе.
- Загрузите изображение ниже, щелкнув ссылку правой кнопкой мыши (Win) или удерживая клавишу Control (Mac) и сохранив связанный файл в каталоге или папке Week 2.
lake_mead_2004.tif (TIFF, 2,9 МБ, 27 января 10) - Выберите File > Open , перейдите в папку Week 2 и откройте изображение lake_mead_2004. tif .
Это спутниковое изображение является увеличенной версией того, с которым вы только что работали. Он имеет более высокое разрешение, что означает, что он содержит больше пикселей, что позволяет нам видеть больше деталей. - Используйте инструмент выбора прямой линии чтобы выбрать расстояние от одного маленького острова до другого.
- Выберите Анализ > Задать масштаб… .
- Введите 25,4 в качестве известного расстояния и км в качестве единицы длины. Сравните масштаб в пикселях на километр с масштабом меньшего изображения.
- Теперь, когда у вас есть масштаб на этом изображении, увеличьте масштаб одного из маленьких островов и измерьте его. Возможность сделать это измерение демонстрирует ценность изображений с высоким разрешением.
- Закройте изображение lake_mead_2004.tif .
tif . начало страницы
Установка масштаба с использованием разрешения изображения
Часто вам придется узнать больше об изображении, чтобы вы могли установить масштаб, непосредственно введя разрешение изображения.
Вы можете найти разрешение в файле ReadMe или в метаданных изображения . (Метаданные в общих чертах определяются как данные о данных ). Разрешение может быть указано прямо в названии файла, или вы даже можете узнать его по телефону у человека, предоставившего вам изображение. (В крайнем случае, конечно!)
- Щелкните миниатюру справа, чтобы открыть полноразмерную версию изображения lake_mead_250m.jpg в новом окне. Затем щелкните правой кнопкой мыши (Win) или щелкните, удерживая клавишу Control (Mac), полноразмерное изображение и выберите «Файл» > «Сохранить изображение как… » и сохраните его в каталоге или папке Week 2. Закройте окно изображения после того, как вы скачали его файл.
- Выберите File > Open , перейдите в папку Week 2 и откройте файл lake_mead_250m.jpg изображение.
- Выберите Анализ > Задать масштаб… . Введите известное разрешение. В данном случае разрешение указано в названии файла изображения 250м на пиксель. Установите масштаб на 1 пиксель, равный 250 метрам. Введите 1,0 для расстояния в пикселях, 250 для известного расстояния и метры для единицы длины. Заявленный масштаб составляет 0,004 пикселя на метр, что соответствует 4 пикселям на километр.
- Затем измерьте расстояние между теми же двумя островами. Сравните свой результат с результатом на первом изображении с масштабной линейкой.
- Ваши результаты должны быть примерно такими же, как и предыдущие измерения, 25400 м (25,4 км). Однако, поскольку разрешение этого изображения ниже, чем у предыдущего, трудно точно сказать, где находятся маленькие острова.
В данном случае разрешение указано в названии файла изображения 250м на пиксель. Установите масштаб на 1 пиксель, равный 250 метрам. Введите 1,0 для расстояния в пикселях, 250 для известного расстояния и метры для единицы длины. Заявленный масштаб составляет 0,004 пикселя на метр, что соответствует 4 пикселям на километр.
начало страницы
Добавить масштабную линейку
С установленным масштабом ImageJ теперь может печатать линейку масштаба на изображениях для вас.
- Выберите Анализ > Инструменты > Масштабная линейка… и введите настройки масштабной линейки. Масштабная линейка на изображении обновляется автоматически, чтобы показать вам результаты ваших изменений.
- Выберите «Файл» > «Сохранить как » и сохраните файл с добавленным набором масштабов и масштабными линейками в папку «Неделя 2» в формате TIFF . Это важно, потому что другие форматы изображений не сохраняют информацию о масштабе вместе с изображением. Запомните имя файла — вам нужно будет открыть его в следующем упражнении.
Масштабная линейка на изображении обновляется автоматически, чтобы показать вам результаты ваших изменений.TIFF (Tagged Image File Format) — единственный формат файла, используемый ImageJ , который поддерживает пространственно калиброванный изображений. Другими словами, если изображение пространственно откалибровано, формат TIFF сохраняет масштаб вместе с изображением, поэтому изображение уже откалибровано каждый раз, когда вы его открываете. (JPG, GIF, PNG и другие форматы, с которыми вы знакомы, не сохраняют эту информацию в файле.)
Что такое теги в файле изображения с тегами?
Покажи мне, что это такое
Скрыть
Теги являются информационными полями в файле, в дополнение к самим данным изображения, которые используются для хранения размеров изображения, битовой глубины, информации о калибровке, таблицы поиска, информации об авторских правах, широты и долготы и т.
д. Это делает TIFF очень гибким форматом и одним из самых безопасных для сохранения всего содержания научных изображений.
к началу страницы
Изучение масштаба изображения и измерения
Посетите один или несколько источников данных изображений, перечисленных ниже, и найдите интересное изображение, особенно такое, которое может подойти для вашей учебной программы. Найдите изображение, на котором напечатана масштабная линейка, объект или ориентиры с известным расстоянием, или описательная информация, указывающая на масштаб или размер изображения. Загрузите изображение в папку «Неделя 2» и используйте методы, которые вы изучили здесь, чтобы установить масштаб для изображения. Если на изображении еще нет масштабной линейки, добавьте ее. Сохраните изображение с добавленной масштабной линейкой, если ее изначально не было, в папку «Неделя 2».
Gateway to Astronaut Photography
Галерея изображений Landsat
Галерея изображений MODIS
Коллекция изображений Земной обсерватории НАСА (масштабные линейки представлены только на предварительных изображениях — не в полном разрешении)
[ссылка https://neo.
Пары изображений из Обсерватории Земли
Обсерватория Земли: мир перемен
Изображения EarthKam для исследования
gsfc.nasa. gov/ ‘Наблюдения за Землей НАСА (NEO)’ new]
Разместите выбранное изображение с добавленной масштабной линейкой, если ее еще нет , в своей группе обсуждения в формате JPEG с объяснением того, почему вы выбрали это изображение и что ваши ученики должны сделать с ним или как вы бы использовали его в своем классе.
Ключевой момент: если изображение не было откалибровано в пространстве, если известно пространственное разрешение или расстояние между двумя ориентирами на изображении, можно задать масштаб.
начало страницы
Ресурсы
- Загрузите и изучите больше изображений с пространственной калибровкой. Галерея изображений MODIS
- Узнайте больше о работе с неразрушающими наложениями в ImageJ.
- Оттачивайте свои навыки, выполняя исследование из сборника инструментов исследования Земли «Аннотирование изменений на спутниковых снимках».
- Закрепите свое понимание масштаба и измерений с помощью исследования «Измерение расстояния и площади на спутниковых изображениях» из справочника по исследованию Земли.
начало страницы
фильмов на этой странице
Как скачивать фильмы
- Щелкните ссылку, чтобы перейти к списку библиотеки мультимедиа SERC для фильма. Запись откроется в новом окне.
- На странице медиатеки SERC щелкните правой кнопкой мыши (Win) или щелкните, удерживая клавишу Control (Mac), ссылку (под фильмом на страницах Flash-версии), чтобы загрузить файл фильма на жесткий диск.
начало страницы
Версии флэш-видео
Загрузите эту версию, чтобы играть на своем компьютере. Для просмотра файла вам потребуется соответствующий проигрыватель фильмов, например Flash Player, Real Player (Mac/Win) или Adobe Media Player.
Установить малый масштаб
Измерить ориентиры
к началу страницы
Версии iPod
Загрузите эту версию, чтобы играть на iPod или iPhone.
Установить малый масштаб
Измерить ориентиры
« Предыдущая страница Следующая страница »
Единицы и измерения — Компоновка
Плотность пикселей Развернуть и свернуть содержимоеСтрелка, указывающая вниз при сворачивании и вверх при раскрытии.
Количество пикселей, умещающихся в дюйме, называется «плотностью пикселей». Экраны с высокой плотностью имеют больше пикселей на дюйм, чем экраны с низкой плотностью. В результате элементы пользовательского интерфейса (например, кнопки) кажутся физически больше на экранах с низкой плотностью и меньше на экранах с высокой плотностью.
Разрешение экрана относится к общему количеству пикселей на дисплее.
плотность экрана = ширина экрана (или высота) в пикселях / ширина экрана (или высота) в дюймах
Оптимизируйте свой дизайн для экранов различной плотности.
Единицы измерения, поддерживаемые Android.
Экран высокой плотности
Экран низкой плотности
Пиксели, не зависящие от плотности (dp) Развернуть и свернуть содержимоеСтрелка, указывающая вниз при сворачивании и вверх при раскрытии.
«Независимость от плотности» относится к единообразному отображению элементов пользовательского интерфейса на экранах с различной плотностью.
Пиксели, не зависящие от плотности (произносится как «провалы») — это гибкие единицы, которые масштабируются до одинаковых размеров на любом экране. При разработке приложения для Android используйте dp для равномерного отображения элементов на экранах с разной плотностью.
dp равен одному физическому пикселю на экране с плотностью 160.
Для расчета dp:
dp = (ширина в пикселях * 160) / плотность экрана
При написании CSS используйте px везде, где указано dp или sp. Dp нужно использовать только при разработке для Android.
Screen density | Screen width in pixels | Screen width in density-independent pixels |
120 | 180 px | 240 dp |
160 | 240 пикселей | |
240 | 360 пикселей |
Масштабируемые пиксели (sp) Развернуть и свернуть содержимоеСтрелка, указывающая вниз при сворачивании и вверх при раскрытии.
При разработке для Android масштабируемые пиксели (sp) выполняют ту же функцию, что и dp, но для шрифтов. Значение по умолчанию sp совпадает со значением по умолчанию для dp.
Основное различие между sp и dp заключается в том, что sp сохраняет пользовательские настройки шрифта. Пользователи, у которых есть более крупные настройки текста для специальных возможностей, увидят, что размер шрифта соответствует их предпочтениям размера текста.
Разработка макетов для дп Развернуть и свернуть содержимоеСтрелка, указывающая вниз при сворачивании и вверх при раскрытии.
При разработке макетов для экрана рассчитайте размеры элемента в dp:
dp = (ширина в пикселях * 160) / плотность
Например, значок размером 32 x 32 пикселей с плотностью экрана 320 равен 16 х 16 дп.
Масштабирование изображения Развернуть и свернуть содержимоеСтрелка, указывающая вниз при сворачивании и вверх при раскрытии.
Images can be scaled to look the same across different screen resolutions by using these ratios:
Screen resolution | dpi | Pixel ratio | Image size (Pixels) | ||||
XXXHDPI | 640 | 4,0 | 40059777777777777777777777777777777777777777777777777777777777777777777777777н. | xxhdpi | 480 | 3.0 | 300 x 300 |
xhdpi | 320 | 2.0 | 200 x 200 | ||||
hdpi | 240 | 1.5 | 150 x 150 | ||||
mdpi | 160 | 1,0 | 100 x 100 |
0564Инструмент линейки пикселей онлайн | Justfreetools
Шаг 1: Захватите экран или окно, нажав PrtScn или Alt + PrtScn
Шаг 2: Вставьте на эту страницу, нажав Ctrl + V0 9 пикселей Шаг 3: V 0 9 пикселей чтобы получить длину
Шаг 1: Захватите экран или окно, нажав ⌘ Command + ⇧ Shift + 3 или ⌘ Команда + ⇧ Shift + 4
Шаг 2: Вставка на этой странице, нажав ⌘ Команда + V
Шаг 3: Get Gets 2: get get step 3.
Шаг 1: Сделайте снимок экрана, нажав Home ▢ + Кнопки Hold / Power
Шаг 2: Вставьте на эту страницу долгим нажатием и нажатием кнопки Вставить .
Шаг 3: Нажмите на 2 пикселя, чтобы получить длину
Шаг 1: Сделайте снимок экрана, нажав Увеличение громкости + Питание кнопки
Шаг 2: Вставьте на эту страницу, нажав кнопку Вставить .
Шаг 3: Нажмите на 2 пикселя, чтобы получить длину
| размер изображения |
Нужно измерить расстояние на экране? Этот бесплатный онлайн-инструмент для измерения пиксельной линейки поможет вам измерить расстояние/длину по горизонтали, вертикали и даже по диагонали. Попробуйте прямо сейчас!
Лучшее в этой онлайн-линейке то, что ее не нужно скачивать!
Как использовать онлайн-линейку пикселей
Как использовать онлайн-линейку пикселей Этот инструмент может оказаться полезным, когда вам нужно загрузить изображение определенного размера, например баннер блога или фотографию профиля.
Вы можете перетащить линейку в любое место на экране, чтобы совместить нулевую отметку с левым краем объекта, который вы хотите измерить.
Затем наведите указатель на линейку в том месте, где она совпадает с правым краем объекта, чтобы увидеть ширину в пикселях.
Что такое пиксель
Что такое пиксель Пиксель — это единица длины, которая на большинстве устройств имеет примерно одинаковый размер. Как правило, это примерно 1/100 дюйма. Это не имеет ничего общего со светящимися точками на вашем экране, если только у вас нет старого компьютера с очень большими точками на экране.
Чтобы точно понять, что такое пиксель, нужно понять, что происходит, когда компьютер рендерит экран, потому что в этом процессе задействованы разные типы пикселей:
Логические пикселиВизуализированные пикселиФизические пиксели
Кратко: Логические пиксели, заданные как свойства компонента, представляют собой единицы длины, примерно одинаковые по размеру на разных устройствах, а не реальную цветную точку.
Логические пиксели сначала преобразуются в визуализированные пиксели, а затем масштабируются до реальных пикселей устройства, которые затем могут быть реальными пикселями с тремя разными субпикселями. На самом деле этот уровень детализации предоставляется только в информационных целях: все, что вам нужно знать, это то, что то, что мы называем «пикселем», на самом деле не является физическим пикселем на экране. Вместо этого это единица длины, которая примерно одинакового размера на разных устройствах.
В настоящее время у нас есть около 5611 калькуляторов, таблиц преобразования и полезных онлайн-инструментов и программных функций для студентов, преподавателей и учителей, дизайнеров и просто для всех.
Вы можете найти на этой странице финансовые калькуляторы, ипотечные калькуляторы, калькуляторы для кредитов, калькуляторы автокредита и калькуляторы лизинга, калькуляторы процентов, калькуляторы выплат, пенсионные калькуляторы, калькуляторы амортизации, инвестиционные калькуляторы, калькуляторы инфляции, калькуляторы финансов, калькуляторы подоходного налога , калькуляторы сложных процентов, калькулятор зарплаты, калькулятор процентной ставки, калькулятор налога с продаж, калькуляторы фитнеса и здоровья, калькулятор ИМТ, калькуляторы калорий, калькулятор жировых отложений, калькулятор BMR, калькулятор идеального веса, калькулятор темпа, калькулятор беременности, калькулятор зачатия беременности, срок родов калькулятор, математические калькуляторы, научный калькулятор, калькулятор дробей, калькулятор процентов, генератор случайных чисел, калькулятор треугольника, калькулятор стандартного отклонения, другие калькуляторы, калькулятор возраста, калькулятор даты, калькулятор времени, калькулятор часов, калькулятор среднего балла, калькулятор оценок, конкретный калькулятор, подсеть калькулятор, генератор паролей калькулятор преобразования tor и многие другие инструменты, а также для редактирования и форматирования текста, загрузки видео с Facebook (мы создали один из самых известных онлайн-инструментов для загрузки видео с Facebook).
Мы также предоставляем вам онлайн-загрузчики для YouTube, Linkedin, Instagram, Twitter, Snapchat, TikTok и других сайтов социальных сетей (обратите внимание, что мы не размещаем видео на своих серверах. Все видео, которые вы загружаете, загружаются с Facebook, YouTube, Linkedin, CDN в Instagram, Twitter, Snapchat, TikTok. Мы также специализируемся на сочетаниях клавиш, ALT-кодах для Mac, Windows и Linux и других полезных советах и инструментах (как написать смайлики онлайн и т. д.)
Есть много очень полезных бесплатных онлайн-инструментов, и мы будем рады, если вы поделитесь нашей страницей с другими или пришлете нам какие-либо предложения по другим инструментам, которые придут вам на ум. Также, если вы обнаружите, что какой-либо из наших инструментов не работает должным образом или нуждается в лучшем переводе, сообщите нам об этом. Наши инструменты сделают вашу жизнь проще или просто помогут вам выполнять свою работу или обязанности быстрее и эффективнее.
Ниже приведены наиболее часто используемые многими пользователями по всему миру.
Бесплатные онлайн-калькуляторы и инструментыКалькуляторы часовых поясов/часов/датБесплатные онлайн-калькуляторы преобразования единицБесплатные онлайн-инструменты для веб-дизайнаБесплатные онлайн-инструменты для электричества и электроникиМатематика6 Инструменты для работы с текстом- Инструменты PDF
- Код
- Экология
- Прочее
- Бесплатные онлайн-загрузчики для социальных сетей
- Web Colors
- Web HTML
- CSS
- Javascript
- Web Tools
- Web Development
- Web hosting
- 301 redirect code generator
- Base64 decoder
- Base64 encoder
- Base64 to Image decode
- Color tester
- HTML editor
- Генератор HTML-кода ссылок
- Генератор HTML-таблиц
- Средство проверки заголовков HTTP
- Средство проверки состояния HTTP
- Кодирование изображения в Base64
- Онлайн-линейка пикселей
- Разрешение экрана
- Тестер разрешения экрана
- Средство просмотра/редактирования SVG
- Декодер URL
- Кодировщик URL
- Размер окна
Онлайн 6 Инструменты для работы с текстом И мы все еще разрабатываем больше.
Наша цель — стать универсальным сайтом для людей, которым нужно быстро рассчитать или найти быстрый ответ для основных конверсий.
Кроме того, мы считаем, что Интернет должен быть источником бесплатной информации. Поэтому все наши инструменты и сервисы абсолютно бесплатны и не требуют регистрации. Мы кодировали и разрабатывали каждый калькулятор индивидуально и подвергали каждый из них строгому всестороннему тестированию. Однако, пожалуйста, сообщите нам, если вы заметите малейшую ошибку — ваш вклад чрезвычайно ценен для нас. Хотя большинство калькуляторов на Justfreetools.com предназначены для универсального использования во всем мире, некоторые из них предназначены только для определенных стран.
Нашли ошибку? Дайте нам знать!
Нашли ошибку? Дайте нам знать! Мы получили ваше сообщение, мы свяжемся с вами в ближайшее время.
Ой! Что-то пошло не так, обновите страницу и повторите попытку.
Размер и разрешение изображения Photoshop
Размер и разрешение изображения Photoshop Руководство пользователя
Отмена
Поиск
Руководство пользователя PhotoshopЗнакомство с Photoshop- Мечтай. Сделай это.
- Что нового в Photoshop
- Отредактируйте свою первую фотографию
- Создание документов
- Фотошоп | Общие вопросы
- Системные требования Photoshop
- Перенос предустановок, действий и настроек
- Знакомство с Photoshop
- Мечтай.
Photoshop и другие продукты и услуги Adobe- Работа с иллюстрациями Illustrator в Photoshop
- Работа с файлами Photoshop в InDesign
- Материалы Substance 3D для Photoshop
- Photoshop и Adobe Stock
- Используйте встроенное расширение Capture в Photoshop
- Библиотеки Creative Cloud
- Библиотеки Creative Cloud в Photoshop
- Использование панели Touch Bar с Photoshop
- Сетка и направляющие
- Создание действий
- Отмена и история
Photoshop на iPad- Photoshop на iPad | Общие вопросы
- Знакомство с рабочим пространством
- Системные требования | Фотошоп на iPad
- Создание, открытие и экспорт документов
- Добавить фото
- Работа со слоями
- Рисовать и раскрашивать кистями
- Выделение и добавление масок
- Ретушь ваших композитов
- Работа с корректирующими слоями
- Отрегулируйте тональность композиции с помощью Кривых
- Применение операций преобразования
- Обрезка и поворот композитов
- Поворот, панорамирование, масштабирование и сброс холста
- Работа с текстовыми слоями
- Работа с Photoshop и Lightroom
- Получить отсутствующие шрифты в Photoshop на iPad
- Японский текст в Photoshop на iPad
- Управление настройками приложения
- Сенсорные клавиши и жесты
- Сочетания клавиш
- Измените размер изображения
- Прямая трансляция во время создания в Photoshop на iPad
- Исправление недостатков с помощью Восстанавливающей кисти
- Создавайте кисти в Capture и используйте их в Photoshop
- Работа с файлами Camera Raw
- Создание смарт-объектов и работа с ними
- Отрегулируйте экспозицию ваших изображений с помощью Dodge and Burn
Photoshop в Интернете, бета-версия- Общие вопросы | Photoshop в Интернете, бета-версия
- Знакомство с рабочей областью
- Системные требования | Photoshop в Интернете, бета-версия
- Сочетания клавиш | Photoshop в Интернете, бета-версия
- Поддерживаемые типы файлов | Photoshop в Интернете, бета-версия
- Открытие и работа с облачными документами
- Сотрудничать с заинтересованными сторонами
- Применение ограниченных правок к облачным документам
Облачные документы- Облачные документы Photoshop | Общие вопросы
- Облачные документы Photoshop | Вопросы по рабочему процессу
- Управление и работа с облачными документами в Photoshop
- Обновление облачного хранилища для Photoshop
- Невозможно создать или сохранить облачный документ
- Устранение ошибок облачного документа Photoshop
- Сбор журналов синхронизации облачных документов
- Делитесь доступом и редактируйте свои облачные документы
- Делитесь файлами и комментируйте в приложении
Рабочее пространство- Основы рабочего пространства
- Настройки
- Учитесь быстрее с помощью панели Photoshop Discover
- Создание документов
- Поместить файлы
- Сочетания клавиш по умолчанию
- Настройка сочетаний клавиш
- Инструментальные галереи
- Параметры производительности
- Использовать инструменты
- Предустановки
- Сетка и направляющие
- Сенсорные жесты
- Используйте сенсорную панель с Photoshop
- Сенсорные возможности и настраиваемые рабочие области
- Превью технологий
- Метаданные и примечания
- Сенсорные возможности и настраиваемые рабочие области
- Поместите изображения Photoshop в другие приложения
- Линейки
- Показать или скрыть непечатаемые дополнения
- Укажите столбцы для изображения
- Отмена и история
- Панели и меню
- Позиционные элементы с привязкой
- Положение с помощью инструмента «Линейка»
Дизайн веб-сайтов, экранов и приложений- Photoshop для дизайна
- Артборды
- Предварительный просмотр устройства
- Копировать CSS из слоев
- Разрезать веб-страницы
- Опции HTML для фрагментов
- Изменить расположение фрагментов
- Работа с веб-графикой
- Создание фотогалерей в Интернете
Основы изображения и цвета- Как изменить размер изображения
- Работа с растровыми и векторными изображениями
- Размер и разрешение изображения
- Получение изображений с камер и сканеров
- Создание, открытие и импорт изображений
- Просмотр изображений
- Недопустимая ошибка маркера JPEG | Открытие изображений
- Просмотр нескольких изображений
- Настройка палитр цветов и образцов
- Изображения с высоким динамическим диапазоном
- Подберите цвета на изображении
- Преобразование между цветовыми режимами
- Цветовые режимы
- Стереть части изображения
- режимов наложения
- Выберите цвет
- Настройка индексированных таблиц цветов
- Информация об изображении
- Фильтры искажения недоступны
- О цвете
- Настройка цвета и монохрома с использованием каналов
- Выберите цвета на панелях «Цвет» и «Образцы»
- Образец
- Цветовой режим или Режим изображения
- Цветной оттенок
- Добавить условное изменение режима к действию
- Добавить образцы из HTML CSS и SVG
- Битовая глубина и настройки
Слои- Основы слоев
- Неразрушающий монтаж
- Создание и управление слоями и группами
- Выберите, сгруппируйте и свяжите слои
- Поместите изображения в рамки
- Непрозрачность слоя и смешивание
- Слои маски
- Применение смарт-фильтров
- Композиции слоев
- Переместить, сложить и заблокировать слои
- Слои-маски с векторными масками
- Управление слоями и группами
- Эффекты слоя и стили
- Редактировать маски слоя
- Извлечение активов
- Отображение слоев с помощью обтравочных масок
- Создание ресурсов изображения из слоев
- Работа со смарт-объектами
- Режимы наложения
- Объединение нескольких изображений в групповой портрет
- Объединение изображений с помощью Auto-Blend Layers
- Выравнивание и распределение слоев
- Копировать CSS из слоев
- Загрузить выделение из границ слоя или маски слоя
- Knockout для отображения содержимого других слоев
- Слой
- Выпрямление
- Композитный
- Фон
Выборки- Рабочая область выбора и маски
- Сделать быстрый выбор
- Начало работы с выборками
- Выберите с помощью инструментов выделения
- Выберите с помощью инструментов лассо
- Выберите диапазон цветов в изображении
- Настройка выбора пикселей
- Преобразование между путями и границами выделения
- Основы канала
- Перемещение, копирование и удаление выбранных пикселей
- Создать временную быструю маску
- Сохранить выделение и маски альфа-канала
- Выберите области изображения в фокусе
- Дублировать, разделять и объединять каналы
- Вычисления каналов
- Выбор
- Ограничительная рамка
Настройки изображения- Деформация перспективы
- Уменьшить размытие изображения при дрожании камеры
- Примеры восстанавливающих кистей
- Экспорт таблиц поиска цветов
- Настройка резкости и размытия изображения
- Понимание настроек цвета
- Применение регулировки яркости/контрастности
- Настройка деталей теней и светлых участков
- Регулировка уровней
- Настройка оттенка и насыщенности
- Настройка вибрации
- Настройка насыщенности цвета в областях изображения
- Быстрая корректировка тона
- Применение специальных цветовых эффектов к изображениям
- Улучшите изображение с помощью регулировки цветового баланса
- Изображения с высоким динамическим диапазоном
- Просмотр гистограмм и значений пикселей
- Подберите цвета на изображении
- Как обрезать и выпрямить фотографии
- Преобразование цветного изображения в черно-белое
- Корректирующие слои и слои-заливки
- Регулировка кривых
- Режимы наложения
- Целевые изображения для прессы
- Настройка цвета и тона с помощью пипеток «Уровни» и «Кривые»
- Настройка экспозиции и тонирования HDR
- Фильтр
- Размытие
- Осветление или затемнение областей изображения
- Выборочная настройка цвета
- Заменить цвета объекта
Adobe Camera Raw- Системные требования Camera Raw
- Что нового в Camera Raw
- Знакомство с Camera Raw
- Создание панорам
- Поддерживаемые объективы
- Эффекты виньетирования, зернистости и удаления дымки в Camera Raw
- Сочетания клавиш по умолчанию
- Автоматическая коррекция перспективы в Camera Raw
- Как сделать неразрушающее редактирование в Camera Raw
- Радиальный фильтр в Camera Raw
- Управление настройками Camera Raw
- Открытие, обработка и сохранение изображений в Camera Raw
- Исправление изображений с помощью инструмента Enhanced Spot Removal Tool в Camera Raw
- Поворот, обрезка и настройка изображений
- Настройка цветопередачи в Camera Raw
- Обзор функций | Adobe Camera Raw | 2018 выпусков
- Обзор новых функций
- Версии обработки в Camera Raw
- Внесение локальных корректировок в Camera Raw
Исправление и восстановление изображений- Удаление объектов с фотографий с помощью Content-Aware Fill
- Исправление и перемещение с учетом содержимого
- Ретушь и исправление фотографий
- Исправить искажение изображения и шум
- Основные действия по устранению неполадок для устранения большинства проблем
Преобразование изображений- Преобразование объектов
- Настройка обрезки, поворота и размера холста
- Как обрезать и выпрямить фотографии
- Создание и редактирование панорамных изображений
- Деформация изображений, форм и путей
- Точка схода
- Используйте фильтр «Пластика»
- Масштабирование с учетом содержимого
- Преобразование изображений, форм и контуров
- Деформация
- Трансформация
- Панорама
Рисование и раскрашивание- Рисование симметричных узоров
- Рисование прямоугольников и изменение параметров обводки
- О чертеже
- Рисование и редактирование фигур
- Инструменты для рисования
- Создание и изменение кистей
- Режимы наложения
- Добавить цвет к путям
- Редактировать пути
- Краска с помощью миксерной кисти
- Наборы кистей
- Градиенты
- Градиентная интерполяция
- Выбор заливки и обводки, слоев и контуров
- Рисование с помощью инструментов «Перо»
- Создание шаблонов
- Создание узора с помощью Pattern Maker
- Управление путями
- Управление библиотеками шаблонов и пресетами
- Рисуйте или раскрашивайте на графическом планшете
- Создание текстурированных кистей
- Добавление динамических элементов к кистям
- Градиент
- Нарисуйте стилизованные мазки с помощью Art History Brush
- Краска с рисунком
- Синхронизация пресетов на нескольких устройствах
Текст- Добавить и отредактировать текст
- Единый текстовый движок
- Работа со шрифтами OpenType SVG
- Символы формата
- Формат абзацев
- Как создавать текстовые эффекты
- Редактировать текст
- Интервал между строками и символами
- Арабский и еврейский шрифт
- Шрифты
- Устранение неполадок со шрифтами
- Азиатский тип
- Создать тип
- Ошибка Text Engine при использовании инструмента «Текст» в Photoshop | Windows 8
- Добавить и отредактировать текст
Видео и анимация- Видеомонтаж в Photoshop
- Редактировать слои видео и анимации
- Обзор видео и анимации
- Предварительный просмотр видео и анимации
- Рисование кадров в слоях видео
- Импорт видеофайлов и последовательностей изображений
- Создать анимацию кадра
- Creative Cloud 3D-анимация (предварительная версия)
- Создание анимации временной шкалы
- Создание изображений для видео
Фильтры и эффекты- Использование фильтра «Пластика»
- Используйте галерею размытия
- Основы фильтра
- Артикул эффектов фильтра
- Добавить световые эффекты
- Используйте адаптивный широкоугольный фильтр
- Используйте фильтр масляной краски
- Эффекты слоя и стили
- Применить определенные фильтры
- Размазывание областей изображения
Сохранение и экспорт- Сохранение файлов в Photoshop
- Экспорт файлов в Photoshop
- Поддерживаемые форматы файлов
- Сохранение файлов в графических форматах
- Перемещение дизайнов между Photoshop и Illustrator
- Сохранение и экспорт видео и анимации
- Сохранение файлов PDF
- Защита авторских прав Digimarc
- Сохранение файлов в Photoshop
Печать- Печать 3D-объектов
- Печать из фотошопа
- Печать с управлением цветом
- Контактные листы и презентации в формате PDF
- Печать фотографий в макете пакета изображений
- Плашечные цвета для печати
- Дуотоны
- Печать изображений на коммерческой типографии
- Улучшение цветных отпечатков из Photoshop
- Устранение проблем с печатью | Фотошоп
Автоматизация- Создание действий
- Создание графики, управляемой данными
- Сценарии
- Обработка пакета файлов
- Воспроизведение и управление действиями
- Добавить условные действия
- О действиях и панели действий
- Инструменты записи в действиях
- Добавить условное изменение режима к действию
- Набор инструментов пользовательского интерфейса Photoshop для подключаемых модулей и сценариев
Управление цветом- Понимание управления цветом
- Поддержание согласованности цветов
- Настройки цвета
- Работа с цветовыми профилями
- Документы с управлением цветом для онлайн-просмотра
- Управление цветом документов при печати
- Импортированные изображения с управлением цветом
- Пробные цвета
Подлинность контента- Узнайте об учетных данных контента
- Идентичность и происхождение для NFT
- Подключить учетные записи для атрибуции креативов
3D и техническое изображение- Photoshop 3D | Распространенные вопросы о снятых с производства 3D-функциях
- Creative Cloud 3D-анимация (предварительная версия)
- Печать 3D-объектов
- 3D живопись
- Усовершенствования 3D-панели | Фотошоп
- Основные концепции и инструменты 3D
- 3D-рендеринг и сохранение
- Создание 3D-объектов и анимации
- Стопки изображений
- Рабочий процесс 3D
- Измерение
- DICOM-файлы
- Photoshop и MATLAB
- Подсчет объектов на изображении
- Объединение и преобразование 3D-объектов
- Редактирование 3D-текстур
- Настройка экспозиции и тонирования HDR
- Настройки панели 3D
Сделай это. Щелкните любую из этих тем, чтобы узнать больше о различных аспектах размера и разрешения изображения:
Разрешение напечатанного изображенияРазмер файлаСпецификации разрешения для печати изображений
Разрешение монитораРазрешение принтераПередискретизация
Размеры — это общее количество пикселей по ширине и высоте изображения.
Разрешение – это количество пикселей изображения, присваиваемое каждому дюйму при печати изображения, измеряемое в пикселях на дюйм (ppi). Таким образом, чем больше пикселей приходится на изображение на дюйм, тем больше будет его разрешение. Кроме того, изображение с высоким разрешением обеспечит лучшее качество печати.
При изменении размеров или разрешения помните, что данные изображения остаются постоянными, пока вы не передискретизируете их. Если вы измените разрешение, ширина и высота изменятся соответственно, чтобы сохранить тот же объем данных изображения.
Обратите внимание на взаимосвязь между размером изображения и разрешением в диалоговом окне «Размер изображения».
Чтобы перейти к диалоговому окну "Размер изображения", выполните следующие действия:
Выберите Изображение > Размер изображения.Перейдите к диалоговому окну «Размер изображения»Флажок Resample установлен по умолчанию. Используйте его, чтобы настроить размеры вашего изображения.Диалоговое окно "Размер изображения" в PhotoshopВ диалоговом окне "Размер изображения" отображается множество параметров интерполяции, которые можно использовать, чтобы изображения выглядели четкими и четкими даже после их увеличения.
Слева от вас находится окно предварительного просмотра, в котором отображается предварительный просмотр того, как изображение будет выглядеть в зависимости от выбранных настроек. Справа от вас находятся сами настройки.
Используйте его, чтобы настроить размеры вашего изображения. Чтобы узнать больше о флажке Resample, перейдите к его подробному описанию. Вы также можете просмотреть следующую таблицу:
Не проверяйте параметр Resample | Проверьте параметр Resample |
Если вы снимете флажок с опции Resample, вы сможете изменить размер или разрешение изображения, перераспределив существующие пиксели | Опция Resample отмечена по умолчанию, что означает, что вы можете регулировать размеры изображения, добавляя или убирая пиксели из ширины и высоты |
Вы можете настроить ширину и высоту изображения двумя способами: либо в пикселях для изображений, которые будут использоваться в Интернете, либо в дюймах (или сантиметрах) для изображений, которые будут напечатаны.
Щелкните значок ссылки, чтобы выделить ее и сохранить пропорции, что поможет вам автоматически регулировать высоту при изменении ширины. Если вы не нажмете на ссылку, чтобы сохранить пропорции, вы получите высокое, тонкое или низкое, широкое изображение, которое выглядит растянутым при изменении одного измерения.
Узнайте больше о различных методах интерполяции, обратившись к Ресэмплингу.
Отрегулируйте ширину и высоту изображения двумя способами. Выберите параметр "Автоматически", который поможет вам с интерполяцией по умолчанию. Для более точного управления вы также можете выбрать другие параметры. Каждый из этих вариантов предназначен для определенных рабочих процессов увеличения или уменьшения изображения.
Автоматическая и другие параметры интерполяции в диалоговом окне «Изменение размера изображения» Просмотр текущего размера изображения Чтобы быстро отобразить текущий размер изображения, используйте информационное поле в нижней части окна документа.
Затем вы можете навести указатель мыши на поле с информацией о файле и удерживать левую кнопку мыши.
Разрешение монитора измеряется в пикселях. Если разрешение монитора и размеры изображения в пикселях совпадают, изображение будет заполнять экран при просмотре в масштабе 100%.
Факторы, определяющие размер изображения на экране
- Размер вашего изображения в пикселях
- Настройки размера и разрешения вашего монитора
В Photoshop можно изменить масштаб изображения на экране, чтобы можно было легко работать с изображениями любых размеров в пикселях.
Изображение размером 620 на 400 пикселей, отображаемое на мониторах различных
размеры и разрешения. При подготовке изображений для просмотра на экране следует учитывать наименьшее разрешение монитора, на котором ваша фотография может быть просмотрена.
Размер файла изображения — это цифровой размер файла изображения, измеряемый в килобайтах (К), мегабайтах (МБ) или гигабайтах (ГБ). Размер файла пропорционален размеру изображения в пикселях. Изображения с большим количеством пикселей могут давать больше деталей при заданном размере печати, но для их хранения требуется больше места на диске, а их редактирование и печать могут быть медленнее. Таким образом, разрешение изображения становится компромиссом между качеством изображения (с сохранением всех необходимых данных) и размером файла.
Другим фактором, влияющим на размер файла, является формат файла. Из-за различных методов сжатия, используемых форматами файлов GIF, JPEG, PNG и TIFF, размеры файлов могут значительно различаться для одних и тех же размеров в пикселях. Точно так же битовая глубина цвета и количество слоев и каналов в изображении влияют на размер файла.
Photoshop поддерживает максимальный размер 300 000 на 300 000 пикселей на изображение. Это ограничение накладывает ограничения на размер печати и разрешение, доступные для изображения.
Разрешение принтера измеряется в точках на дюйм (dpi). Чем выше разрешение, тем качественнее будет результат печати. Большинство струйных принтеров имеют разрешение примерно от 720 до 2880 dpi.
Разрешение принтера отличается от разрешения изображения, но связано с ним. Для печати качественной фотографии на струйном принтере разрешение изображения не менее 220 ppi должно обеспечивать хорошие результаты.
Частота экрана — это количество точек принтера или полутоновых ячеек на дюйм, используемое для печати изображений в градациях серого или цветоделений. Частота экрана, также известная как линейка экрана или линейный экран , измеряется в строках на дюйм (lpi) или в строках ячеек на дюйм на полутоновом экране. Чем выше разрешение устройства вывода, тем более тонкую линейку экрана вы можете использовать.
Соотношение между разрешением изображения и частотой экрана определяет качество детализации напечатанного изображения. Чтобы получить полутоновое изображение высочайшего качества, обычно используется разрешение изображения, примерно в 1,5–2 раза превышающее частоту экрана.
Для некоторых изображений и устройств вывода более низкое разрешение может дать хорошие результаты. Чтобы определить частоту экрана вашего принтера, обратитесь к документации по принтеру или обратитесь к поставщику услуг.
Некоторые фотонаборные устройства и лазерные принтеры с разрешением 600 dpi используют растрирование
технологии, отличные от полутонового изображения. Если вы печатаете
изображение на неполутоновом принтере, обратитесь к поставщику услуг
или в документации к вашему принтеру для рекомендуемых разрешений изображения.
Примеры частоты экрана A. 65 линий на дюйм: крупный трафарет, обычно используемый для печати информационных бюллетеней.
и продуктовые талоны B. 85 lpi:
Средний экран, обычно используемый для печати газет C. 133 lpi:
Высококачественный трафарет, обычно используемый для печати четырехцветных журналов D. 177 lpi:
Очень тонкий экран, обычно используемый для годовых отчетов и изображений в искусстве. книги
Разрешение 300 пикселей на дюйм является отраслевым стандартом для высококачественной печати. Это разрешение гарантирует, что ваше изображение будет выглядеть четким и детализированным при печати.
Разрешение 300 пикселей на дюйм идеально подходит для просмотра небольших отпечатков с близкого расстояния, но вы также можете выбрать более низкое разрешение для больших отпечатков, если они предназначены для просмотра издалека. Например, если вы печатаете рекламный щит, который будет установлен на шоссе, вы можете напечатать его с более низким разрешением без ущерба для качества, поскольку высокое разрешение становится менее важным по мере удаления от изображения.
Разрешение по умолчанию в принтерах
Обычно принтеры имеют разрешение печати по умолчанию 300 пикселей на дюйм, и если вы печатаете изображение с более низким разрешением, они настраивают свои параметры изображения для печати вашего изображения с разрешением по умолчанию.
Это означает, что вы не можете распечатать изображение с разрешением меньше, чем разрешение принтера по умолчанию, и если вы не увеличите изображение, ваш принтер это сделает.
Просмотр размера отпечатка на экране
Для просмотра размера отпечатка на экране можно выполнить любое из следующих действий: либо выберите «Просмотр» > «Размер отпечатка». Или выберите инструмент «Рука» или «Масштаб» и нажмите «Размер печати» на панели параметров.
Изображение повторно отображается в приблизительном размере для печати, указанном в области «Размер документа» диалогового окна «Размер изображения». Размер и разрешение вашего монитора влияют на размер изображения на экране.
Передискретизация — это изменение объема данных изображения при изменении размеров в пикселях или разрешения изображения.
Понижающая выборка уменьшает количество пикселей — при понижении разрешения информация удаляется из изображения.
Повышение дискретизации увеличивает количество пикселей — при повышении разрешения добавляются новые пиксели.
Вы указываете метод интерполяции, чтобы определить, как пиксели добавляются или удаляются.
Передискретизация пикселей A. Пониженная выборка B. Исходная C. Передискретизированная
вверх (выбранные пиксели отображаются для каждого набора изображений)
Имейте в виду, что повторная выборка может привести к ухудшению качества изображения. Например, при изменении размера изображения в пикселях изображение теряет некоторые детали и резкость. Применение фильтра «Контурная резкость» к изображению с передискретизацией может помочь перефокусировать детали изображения.
Вы можете избежать повторной выборки, отсканировав или создав изображение с достаточно высоким разрешением. Если вы хотите просмотреть эффекты изменения размеров в пикселях на экране или распечатать пробные оттиски с другим разрешением, передискретизируйте дубликат вашего файла.
Photoshop изменяет размер изображения с помощью метода интерполяции, чтобы присвоить значения цвета любым новым пикселям на основе значений цвета существующих пикселей. Вы можете выбрать свой метод в диалоговом окне Размер изображения.
- Ближайший сосед Быстрый, но менее точный метод, который воспроизводит пиксели изображения. Этот метод предназначен для использования с иллюстрациями, содержащими несглаженные края, чтобы сохранить резкие края и создать файл меньшего размера. Однако этот метод может привести к неровным эффектам, которые становятся очевидными, когда вы искажаете или масштабируете изображение или выполняете несколько манипуляций с выделенным фрагментом.
- Билинейный Метод, добавляющий пиксели путем усреднения значений цвета окружающих пикселей. Он дает результаты среднего качества.
- Бикубический Более медленный, но более точный метод, основанный на анализе значений окружающих пикселей. Используя более сложные вычисления, бикубический режим производит более плавные тональные градации, чем ближайший сосед или билинейный.
- Bicubic Smoother Хороший метод увеличения изображений, основанный на бикубической интерполяции, но предназначенный для получения более сглаженных результатов.
- Bicubic Sharper Хороший метод уменьшения размера изображения на основе бикубической интерполяции с повышенной резкостью. Этот метод поддерживает детали в изображении с передискретизацией. Если Bicubic Sharper повышает резкость некоторых областей изображения, попробуйте использовать Bicubic.
Можно указать метод интерполяции по умолчанию, который будет использоваться всякий раз, когда программа Photoshop выполняет передискретизацию данных изображения. Выберите «Правка» > «Установки» > «Основные» (Windows) или «Photoshop» > «Установки» > «Основные» (MacOS), а затем выберите метод в меню «Методы интерполяции изображения».
Изменение размеров изображения в пикселях влияет не только на его размер на экране, но также на качество изображения и характеристики печати — размеры печати или разрешение изображения.
Выберите «Изображение» > «Размер изображения».
Чтобы сохранить текущее соотношение ширины пикселя к высоте пикселя, выберите «Сохранить пропорции». Этот параметр автоматически обновляет ширину при изменении высоты.
В разделе "Размеры в пикселях" введите значения ширины и высоты. Чтобы ввести значения в процентах от текущих измерений, выберите Процент в качестве единицы измерения. Новый размер файла изображения отображается в верхней части диалогового окна «Размер изображения», а старый размер файла указан в скобках.
Убедитесь, что выбран параметр «Пересэмплирование изображения», и выберите метод интерполяции.
Если в изображении есть слои с примененными к ним стилями, выберите «Масштабировать стили», чтобы масштабировать эффекты в измененном размере изображения. Этот параметр доступен, только если вы выбрали «Сохранить пропорции».
Когда вы закончите настройку параметров, нажмите ОК.
Для достижения наилучших результатов при изготовлении
изображение, понизьте разрешение и примените фильтр «Контурная резкость». Производить
изображение большего размера, повторите сканирование изображения с более высоким разрешением.
При создании изображения для печати полезно указать размер изображения с точки зрения размера печати и разрешения изображения. Эти два измерения, называемые размером документа 90 797 , определяют общее количество пикселей и, следовательно, размер файла изображения.
Размер документа также определяет базовый размер, при котором изображение помещается в другое приложение. Вы можете дополнительно управлять масштабом печатного изображения с помощью команды «Печать»; однако изменения, которые вы вносите с помощью команды «Печать», влияют только на напечатанное изображение, а не на размер документа в файле изображения.
Если вы включите повторную выборку для изображения, вы можете независимо изменять размеры печати и разрешение (и изменять общее количество пикселей в изображении). Если вы отключите повторную выборку, вы можете изменить либо размеры, либо разрешение — Photoshop автоматически настраивает другое значение, чтобы сохранить общее количество пикселей.
Для получения наилучшего качества печати рекомендуется сначала изменить размеры и разрешение без передискретизации. Затем пересэмплируйте только по мере необходимости.
Выберите «Изображение» > «Размер изображения».
Измените размеры печати, разрешение изображения или и то, и другое:
Чтобы изменить только размеры печати или только разрешение и пропорционально настроить общее количество пикселей в изображении, выберите «Пересэмплировать изображение», а затем выберите метод интерполяции.
Чтобы изменить размеры и разрешение печати без изменения общего количества пикселей в изображении, снимите флажок «Пересэмплировать изображение».
Чтобы сохранить текущее соотношение ширины и высоты изображения, выберите «Сохранить пропорции». Эта опция автоматически изменяет ширину при изменении высоты.
В разделе Размер документа введите новые значения высоты и ширины. При желании выберите новую единицу измерения. Для параметра «Ширина» параметр «Столбцы» использует ширину и размеры промежутков, указанные в настройках «Единицы и линейки».
В поле Разрешение введите новое значение. При желании выберите новую единицу измерения.
Чтобы восстановить первоначальные значения, отображаемые в диалоговом окне «Размер изображения», удерживайте нажатой клавишу «Alt» (Windows) или «Option» (MacOS) и нажмите «Сброс».
Размер файла зависит от размера изображения в пикселях и количества содержащихся в нем слоев. Изображения с большим количеством пикселей могут давать больше деталей при печати, но для их хранения требуется больше места на диске, а их редактирование и печать могут занять больше времени.
Убедитесь, что ваши файлы не слишком велики — для больших файлов уменьшите количество слоев в изображении или измените размер изображения.
Информацию о размере файла изображения можно просмотреть в нижней части окна приложения.
Больше похоже на это
- Краткие советы: как изменить размер изображения в Photoshop
- Расширенная обрезка, изменение размера и передискретизация
- Изменение размера изображений
- Отображение информации о файле в окне документа
- О настольной печати
- Подготовка изображений к печати
- Рекомендации по заточке
- Расположение и масштабирование изображений
- Печать изображений
- Укажите столбцы для изображения
- Управление слоями
- Информация об изображении
- Бесплатный инструмент для изменения размера изображения
Купите Adobe Photoshop или начните бесплатную пробную версию .
Войдите в свою учетную запись
Войти
Управление учетной записью
Измерение пикселей — Моментальные статьи — Документация
Измерение конкретных событий на пути подписчика с помощью пикселя Facebook для ваших статей (как для мобильных устройств, так и для настольных компьютеров) является требованием программы подписки на мгновенные статьи. Хотя процесс привязки учетной записи включает некоторые из этих событий, в этом документе рассматриваются другие соответствующие события и их параметры. Без дополнительных событий вы не сможете надежно измерить ценность, которую интеграция привносит в вашу публикацию.
Настройте Facebook Pixel
Пожалуйста, обратитесь к документации Facebook Pixel Events для получения информации о том, как настроить базовый код Facebook Pixel, который является предварительным условием для правильной работы любого из событий. Использование пикселя Facebook регулируется Условиями использования бизнес-инструментов Facebook.
События пути подписчика
Полный набор событий Pixel, которые охватывают путь подписчика:
- ViewContent
- Вьюметр
- ViewPaywall
- Создать учетную запись
- Войти в учетную запись
- инициировать проверку
- Подписаться
- Отменить
События привязки учетных записей, выделенные жирным шрифтом , см. в разделе документации о привязке учетных записей. В таблице ниже подробно описаны события, не связанные с учетной записью, которые должны быть включены в вашу интеграцию.
В отличие от событий привязки учетных записей, которые требуют использования тега img, перечисленные выше события можно отправлять с помощью тега img или Javascript.
При использовании Javascript предоставленные типы событий Standard и Custom указывают на первое значение функции fbq() при запуске событий либо с ' track ', либо ' trackCustom ' соответственно. Дополнительную информацию можно найти в документации Facebook Pixel.
Рекомендации по событиям
В этом документе события классифицируются как критические и необязательные в зависимости от их значимости для получения информации об эффективности подписки на мгновенные статьи. Критические события — это те события, которые необходимы для понимания рабочих процессов подписки, происходящих из Моментальных статей. Необязательные события полезны для более глубокого анализа воронок, а также для определения точек оптимизации в ваших рабочих процессах подписки.
* Параметры в BOLD являются обязательными параметрами
** Если вы уже используете событие «Покупка/подписка» в маркетинговых целях, используйте отдельный идентификатор пикселя для рабочего процесса «Подписки на IA», чтобы сохранить событие конверсии. и параметров от конфликтующих друг с другом
Измеренных
Параметры0005 {offer_code/campaign_code: <тип предложения подписки, выбранный пользователем>}
Убедитесь, что эти параметры зеркально отражены во всех устройствах iOS/Android и IA/mWeb Мероприятие Мотивация ViewPaywall
Critical This enables the comparison of Paywall hits from IA vs mWeb iOS IA
Parameters
{ surface: 'IA' }
iOS mWeb
Parameter
{ поверхность: ,
meter_count:<счетчик метров> } Android IA
Не требуется. Будет доступен в группе источников событий FBA в качестве события страницы Android mWeb
Parameter
{ surface: ,
meter_count: } Subscribe
Critical Включает анализ конверсий конкретно из IA iOS IA
Параметры
{currency: ,
value, 9cost of подписка0005
offer_code: ,
subscription_id:
} iOS mWeb
Parameters
{currency: ,
value: <стоимость подписки>,
offer_code: <тип предложения подписки, выбранный пользователем>,
subscribe_id: <уникальный идентификатор пользователя>
} Android IA
Параметры
{Currence: ,
subscribe_id: <уникальный идентификатор пользователя>
} Android mWeb
Параметры
{currency: ,
value: <стоимость подписки>,
offer_code: <тип предложения подписки, выбранный пользователем>,
subscribe_id: <уникальный идентификатор пользователя>
} InitiateCheckout
Критический Позволяет измерять потери в процессе оформления заказа и оптимизировать улучшения процесса оформления заказа iOS IA
iOS mWeb
Android IA
Android mWeb
9 LogIntoAccount0 906
Критический Помогает отфильтровать пользователей, которые просматривали платный доступ, но не совершили покупку, поскольку уже были подписанными пользователями iOS IA
Параметры0005
Подписка_ид: <уникальный идентификатор для пользователя>
} IOS MWEB
Параметры
{
IS_SUBSCRIBER: ,
IS_SUBSCR: ,
59 IS_SUBSCR
Android IA
Параметры
{
is_subscriber: ,
subscribe_id: <уникальный идентификатор пользователя>} Android MWEB
Параметры
{
IS_SUBSCRIBE
Необязательно Полезно для измерения удержания и оттока {subscription_id: <уникальный идентификатор пользователя>,
Reason: <причина отмены>} ViewContent
Необязательный Позволяет анализировать всю воронку действий пользователей, начиная с события чтения в дополнение к обращениям к платному доступу. Также позволяет понять, какой тип контента помогает пользователям получать доступ к платному доступу и дальше. Будет доступно в группе источников событий FBA как событие страницы iOS mWeb
Параметры
{ article_content_tier:,
is_subscriber:} Android IA
Не требуется. Будет доступно в группе источников событий FBA в виде события страницы Android mWeb
Параметры
{ article_content_tier:,
7 is_90alse:8}
Фримиум
Мероприятие Мотивация ViewPaywall
Critical This enables the comparison of Paywall hits from IA vs mWeb iOS IA
Parameters
{ surface: 'IA' }
iOS mWeb
Parameter
{ поверхность: ,
meter_count:<счетчик счетчиков> } Android IA
Не требуется. Will be available in the FBA Event Source Group as a page event Android mWeb
Parameter
{ surface: ,
meter_count: } Подписаться
Critical Позволяет анализировать конверсии специально для IA 9.0568 IOS IA
Параметры
{Currence: ,
: <уникальный идентификатор пользователя>
} iOS mWeb
Параметры
{currency: <валюта>,
> value: <стоимость подписки0005
offer_code: <тип предложения подписки, выбранный пользователем>,
subscribe_id: <уникальный идентификатор пользователя>
} Android IA
2, 90rency:
5 90rency5 Параметры
5 90rency:
value: <стоимость подписки>,
offer_code: <тип предложения подписки, выбранный пользователем>,
subscribe_id: <уникальный идентификатор пользователя>
} Android mWeb
Параметры
{currency: <валюта>,
value: <стоимость подписки>,
offer_code: <тип подписки offer id:052,
, выбранный пользователем> уникальный идентификатор пользователя > } InitiateCheckout
Critical Позволяет измерять потери в процессе оформления заказа и оптимизировать процесс оформления заказа IOS IA
IOS MWEB
Android IA
Android MWEB
Parameters
{Предоставление_кода/Кампания для всех iOS/Android и IA/mWeb
Войти в учетную запись
Критический Помогает отфильтровать пользователей, которые просматривали платный доступ, но не совершили покупку, поскольку уже были подписанными пользователями IOS IA
Параметры
{ IS_SUBSCRIBE
{
is_subscriber: ,
subscribe_id: <уникальный идентификатор пользователя>} Android IA
Параметры
{
is_subscriber: ,
subscription_id: } Android mWeb
Parameters
{
is_subscriber: ,
subscribe_id: <уникальный идентификатор пользователя>} Отмена (событие на стороне сервера)
Дополнительно Полезен для измерения удержания и текучести кадров {subscription_id: <уникальный идентификатор пользователя>,
Reason: <причина отмены>} ViewContent
Критический Позволяет анализировать всю воронку пользовательской активности, начиная с события чтения в дополнение к обращениям к платному доступу.
Размер файла пропорционален размеру изображения в пикселях. Изображения с большим количеством пикселей могут давать больше деталей при заданном размере печати, но для их хранения требуется больше места на диске, а их редактирование и печать могут быть медленнее. Таким образом, разрешение изображения становится компромиссом между качеством изображения (с сохранением всех необходимых данных) и размером файла.
Чем выше разрешение, тем качественнее будет результат печати. Большинство струйных принтеров имеют разрешение примерно от 720 до 2880 dpi.
книги
Вы можете выбрать свой метод в диалоговом окне Размер изображения.
Этот параметр автоматически обновляет ширину при изменении высоты.
При желании выберите новую единицу измерения. Для параметра «Ширина» параметр «Столбцы» использует ширину и размеры промежутков, указанные в настройках «Единицы и линейки».
Хотя процесс привязки учетной записи включает некоторые из этих событий, в этом документе рассматриваются другие соответствующие события и их параметры. Без дополнительных событий вы не сможете надежно измерить ценность, которую интеграция привносит в вашу публикацию.
в разделе документации о привязке учетных записей. В таблице ниже подробно описаны события, не связанные с учетной записью, которые должны быть включены в вашу интеграцию.
Необязательные события полезны для более глубокого анализа воронок, а также для определения точек оптимизации в ваших рабочих процессах подписки.
Будет доступен в группе источников событий FBA в качестве события страницы
Также позволяет понять, какой тип контента помогает пользователям получать доступ к платному доступу и дальше. Будет доступно в группе источников событий FBA как событие страницы
Will be available in the FBA Event Source Group as a page event
