Как измерить пиксели в браузере

Обновлено: 28.06.2024

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

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

Вот 8 бесплатных опций, которые помогут вам найти множество различных измерений как в реальном мире, так и виртуально на экране.

Прежде чем начать:

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

Вам необходимо знать разрешение текущего дисплея (например, 1920 x 1080) и его точный видимый размер в дюймах. (например, 21,5). Использование значения 22 дюйма, когда размер вашего монитора на самом деле составляет 21,5 дюйма, приведет к неточному измерению и должно быть как можно более точным.

Получив эту информацию, посетите веб-страницу PPICalc или DPI / PPI Calculator и введите горизонтальное и вертикальное разрешение, а также размер экрана по диагонали.

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

<р>1. Экранная линейка JS

JS Screen Ruler может отображать пиксели, дюймы, пики или сантиметры, а размер линейки можно просто увеличить, перетащив небольшой ползунок. Меню правой кнопки мыши дает вам возможность перевернуть линейку с горизонтальной на вертикальную, отметить точный центр линейки, привязать ее к левому краю экрана рабочего стола и установить количество пикселей на дюйм для более точного измерения, как указано выше. .

Есть также условно-бесплатная версия Pro в zip-архиве с 15-дневной пробной версией, хотя она предлагает только такие функции, как изменение цвета и вращение линейки, которые вам, вероятно, не понадобятся. JS Screen Ruler является переносимым и работает в 64-разрядных версиях Windows 95 и 7.

iRuler – это обычная и простая веб-страница со статической линейкой с эффектом дерева, по которой можно измерять объекты реального мира или изменять размер окна браузера и перетаскивать его в нужное место. Убедитесь, что размеры вашего монитора соответствуют линейке.

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

<р>3. Линейка для Windows

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

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

<р>4. Онлайн-линейка

Онлайн-линейка очень удобна для калибровки, поскольку в дополнение к использованию стандартного метода пикселей на дюйм также есть параметры для измерения относительно реального объекта. Вы можете использовать бумагу формата A4, банкноту в 1 доллар, банкноту в 50 евро, банкноту в 10 фунтов стерлингов, компакт-диск или обычную кредитную/банковскую карту. Поднесите объект к экрану и перетащите отметки линейки, чтобы они соответствовали объекту, затем нажмите «Сохранить», чтобы сохранить настройку в следующий раз. Запишите значение PPI для будущего использования с этой или другими линейками.

<р>5. Бесплатная онлайн-линейка

Эта онлайн-линейка довольно проста в использовании и имеет размеры в миллиметрах, сантиметрах и дюймах до 1/16 дюйма. Вы также можете щелкнуть и перетащить линейку по окну браузера, а также, удерживая Ctrl, вращать ее на 360°. Есть флажки для включения/выключения маркеров сантиметров и дюймов, а также возможность перевернуть линейку по горизонтали.

Нажмите «Калибровать», чтобы откалибровать линейку по реальному объекту. Вы можете использовать кредитную/банковскую карту, доллар США, лист бумаги формата A4 или Letter или использовать другой предмет, точный размер которого известен. Перетащите линейку так, чтобы отметки совпали с объектом, который вы держите на экране, а затем снова нажмите ссылку калибровки, когда это будет сделано.

<р>6. MB-линейка

В MB-Ruler доступно довольно много расширенных опций. В дополнение к измерению расстояний от одной точки до другой с использованием 6 различных шкал измерения, он также может вычислять углы с помощью транспортира и включает в себя собственную сложную систему измерения координат. Автономную портативную версию можно создать в меню параметров.

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

<р>7. Экранная линейка

Помимо того факта, что Screen Ruler все еще находится в активной разработке, у него есть ряд полезных функций, которые должны охватывать большинство случаев использования. Одним из наиболее интересных является «окно измерения», которое прикрепляется к открытому окну на рабочем столе, задавая его ширину и высоту. Screen Ruler может отображать измерения в пикселях, точках, сантиметрах, дюймах и процентах (от ширины экрана) и доступен в переносной версии и версии для установки.

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

<р>8. ВыбратьВыбрать

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

Вы можете выбрать вертикальную или горизонтальную компоновку, измерять в пикселях, дюймах или сантиметрах, выбирать из четырех цветовых скинов и иметь прозрачность. Линейку можно точно перемещать с помощью клавиш со стрелками. Для калибровки вы можете выбрать одну из четырех настроек DPI (или PPI) или ввести свою собственную. Значение PPI с десятичным разрядом не указывается, но округление до ближайшего целого числа должно быть достаточно близким.

PixelZoomer – это расширение для Google Chrome, позволяющее быстро измерять расстояния и выбирать значения цвета. Он создает скриншот открытого веб-сайта и предоставляет различные инструменты для анализа. Это сделано для веб-сайтов, которые должны быть идеально реализованы в пикселях. Расширение предназначено для разработчиков и веб-дизайнеров. PixelZoomer бесплатен и может быть добавлен в Chrome через Интернет-магазин Chrome.

Прямая интеграция с Chrome

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

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

Именно здесь в игру вступает PixelZoomer: расширение для Chrome создает скриншот веб-сайта и напрямую включает анализ на основе пикселей. Вы можете легко увеличить скриншот с помощью встроенной лупы. Измерение расстояний и подбор цветов теперь несложная задача.

Возможности

Измерение расстояний

Основным инструментом PixelZoomer является измерительный инструмент, виртуальная линейка. С помощью мыши вы можете легко создавать выделения на скриншоте. PixelZoomer отображает ширину и высоту выделения пикселей на панели инструментов. Вы также можете перемещать текущий выбор, нажимая клавиши со стрелками или перемещая мышь.

Выберите цвета

Когда вам нужно выбрать определенное цветовое значение веб-сайта, требуется точность до пикселя. С помощью встроенной лупы и пипетки вы можете легко выбрать значение цвета пикселя под курсором мыши. Значение цвета отображается в формате HEX и RGB.

Увеличить до 3200%

PixelZoomer позволяет увеличить скриншот веб-сайта до 3200%. Расстояние между пикселями можно точно измерить при любом уровне масштабирования. Интеллектуальная лупа позволяет увеличить область под курсором мыши. Увеличенную область также можно перемещать с помощью мыши.

Только одна панель инструментов

Все инструменты PixelZoomer объединены в одну панель инструментов, расположенную в верхней части окна. Панель инструментов разделена на три части: инструменты для анализа, информация и настройки масштабирования. Расширение разработано таким образом, что панель инструментов является лишь вспомогательным средством: собственно работа со скриншотом осуществляется с помощью мыши и клавиатуры. Доступ к каждой функции можно получить с помощью сочетания клавиш, а взаимодействие с мышью работает интуитивно. Вы можете перейти к снимку экрана, просто используя колесико мыши.

< бр />

Виртуальная линейка

Виртуальная линейка PixelZoomer активируется при создании выделения: создайте прямоугольные области по желанию, и вы сможете прочитать ширину и высоту выделения на панели инструментов. Возможен выбор и при увеличенном скриншоте сайта. Созданное выделение также можно перемещать за границу окна – видимая область изображения перемещается расширением автоматически. Вы также можете создавать квадратные выделения, удерживая клавишу SHIFT.

Наконец, вы можете перемещаться по любому выделенному фрагменту в режиме реального времени: нажав клавишу ПРОБЕЛ и перемещая мышь, вы можете легко изменить положение текущего выделенного фрагмента. Таким образом, вам не нужно заново создавать весь выбор, если вы пропустили край пикселя.

Работа дизайнера очень интересна и полна творчества. Тем не менее, каждая работа в определенной степени связана с хлопотами и скучным ручным трудом. Чтобы сделать вашу жизнь немного проще, мы перечислили 15 наших любимых расширений Chrome, которые повышают эффективность, расширяют творческие возможности или делают работу более увлекательной. По общему признанию, три инструмента внизу на самом деле не являются расширениями Chrome. Однако они нам так понравились, что мы все же включили их в этот список.

1. Колорзилла

Никто не любит проблем с шестнадцатеричным кодом. Вы захотите создать медийную рекламу с теми же фирменными цветами, что и на веб-сайте. Брендбук не всегда под рукой. По крайней мере, для цветов вам не нужно, если у вас установлен Colorzilla. С помощью ColorZilla вы можете получить показания цвета из любой точки вашего браузера, быстро настроить этот цвет и вставить его в другую программу. Он также имеет множество других отличных функций, что делает его наиболее полным доступным средством выбора цвета.

2. Палитра сайта

Если вам нужны все цвета с веб-сайта, вам подойдет Site Palette. Site Palette генерирует цветовые палитры на основе кодировки веб-сайта. Он также позволяет создавать общие ссылки и загружать автоматически сгенерированные шаблоны Sketch.

3. Какой шрифт

Вы когда-нибудь пытались выяснить, какой шрифт используется на веб-сайте, который вам действительно нравится? И как часто вы появлялись с пустыми руками? WhatFont распознает шрифт, используемый для любой копии, с которой вы сталкиваетесь в своем браузере, наведя на нее курсор. Очень полезно, когда вы работаете в агентстве, и ваш клиент забыл название шрифта, который он хочет использовать в своих медийных объявлениях.

4. Загрузчик изображений

Если вам когда-либо понадобится массово загружать изображения с веб-страницы, Image Downloader — это расширение для вас. Это особенно полезный инструмент для агентств и издателей, которые создают большой объем медийной рекламы для клиентов малого и среднего бизнеса, не располагающих слишком большими ресурсами. Image Downloader имеет некоторые дополнительные функции, которые позволяют фильтровать изображения на странице по ширине, высоте и URL-адресу или настраивать ширину отображения изображения, столбцы, размер границы и цвет.

5. Страничка

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

6. Дизайнерская линейка

Designers Ruler – это простая экранная линейка, с помощью которой дизайнеры могут измерять что угодно в Интернете. Действительно просто, хотя он включает в себя несколько очень полезных опций, таких как раскрывающееся наложение и размер шрифта.

7. Корпоративный ипсум

Не уверен, что мы решаем здесь настоящую проблему, но Corporate Ipsum генерирует случайную корпоративную чепуху, которая отличается от обычных текстов lorem ipsum. Что особенно полезно в этом инструменте, так это то, что он генерирует контент-заполнитель по словам или абзацам. Определенная экономия времени!

8. Изменение размера окна

Цифровые дизайнеры хотят знать, подходят ли их проекты для разных разрешений экрана. Window Resizer позволяет вам эмулировать разрешение экрана или браузера, чтобы вы могли тестировать свои проекты в любом из них. Отличный инструмент для окончательной проверки вашего дизайна.

9. Темный читатель

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

10. Расширение Pexels для Chrome

Все ценят толику вдохновения время от времени. Расширение Pexels для Chrome показывает вам красивую фотографию каждый раз, когда вы открываете новую вкладку браузера. Это расширение заставит вас удивляться пару раз в день. Pexels — один из многих отличных поставщиков стоковых фотографий, который предлагает множество бесплатных материалов.

11. Простой захват экрана

Этот инструмент для захвата экрана является отличной альтернативой большинству существующих решений, поскольку он часто обновляется и позволяет сохранять снимки экрана в форматах PNG и PDF или делиться ими напрямую. Easy Screen Capture также позволяет вам определить папку по умолчанию для ваших скриншотов, а расширение предлагает некоторые основные инструменты редактирования, так что вам не нужно будет открывать, редактировать и сохранять файл.

12. RescueTime для Google Chrome™

Вы заняты весь день, почти всю неделю. Однако к концу недели трудно вспомнить, что именно вы делали. Не говоря уже о конце месяца. Звучит знакомо? RescueTime помогает получить представление о проделанной работе. Например, если вы тратите свое время на создание медийной рекламы для клиентов, вы сможете увидеть, сколько часов вы потратили на какие проекты для каких клиентов.

13. TinyJPG/TinyPNG

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

14. Фонтсквиррел

Не все файлы шрифтов очень стабильны в Интернете. По этой причине Bannerwise принимает только файлы шрифтов .ttf. Если у вас нет файла .ttf вашего шрифта, вы можете преобразовать его с помощью генератора веб-шрифтов Fontsquirrel. Обратите внимание, что ваши шрифты должны иметь законное право на веб-встраивание. Это означает, что в определенной степени вы должны владеть авторскими правами на используемый вами шрифт.

15. Coolors.co

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

И последнее, но не менее важное: мы хотели бы отметить, что наша платформа Bannerwise также является довольно удобным инструментом. Это поможет вам создать красивые персонализированные медийные объявления в один миг. Ознакомьтесь с некоторыми примерами или узнайте больше, связавшись с нами!

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

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

2 ответа 2

Как проверить расстояние между элементами на отображаемой странице.

Бесплатная виртуальная линейка для экрана вашего компьютера

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

Линейка инструментов разработчика Firefox

открыть панель инструментов (я часто использую ctrl+shift+I для быстрого переключения инструментов, но это только у меня, F12 тоже работает, и, конечно, часто бывает так, что щелчок правой кнопкой мыши на странице и выбор «проверить элемент» простой способ сделать это)
перейдите на панель параметров (это значок шестеренки на панели инструментов справа или Ctrl+Shift+O),
здесь есть много вариантов, не пугайтесь, просто прокрутите вниз до раздела «Доступные кнопки панели инструментов» и убедитесь, что установлен флажок «Переключить линейки для страницы»,
после этого у вас появится симпатичный маленький значок на панели инструментов, который можно просто щелкнуть, чтобы переключить линейки.

Но я хочу расширение для браузера!

Хром

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

Изображения и элементы HTML

Измерение между следующими элементами: изображениями, полями ввода, кнопками. , видео, гифки, текст, иконки. Вы можете измерить все, что видите в браузере.

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

Файрфокс

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

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