Как точно измерить расстояние между блоками на сайте?
Помогите точно определить расстояние между блоками. Способ измерения:
— берем скриншот,
— заливаем в фш,
— увеличиваем изображение, чтобы были видны пиксели
— линейкой измеряем расстояние между блоками.
Например, нужно узнать расстояние между черными блоками. Проблема в том, что есть переходные зоны, и не черные и не красные. К чему их относить? К зоне красного или к зоне черного?
spoiler
- Вопрос задан более трёх лет назад
- 3353 просмотра
Комментировать
Решения вопроса 1
iBird Rose @iiiBird Куратор тега CSS
Пока ты спишь — твой конкурент совершенствуется
это обычное размытие. в идеале именно макет должен выдаваться без размытия, но в таком виде макет выглядит очень убого. Вот прмиер:
Но при верстке этого размытия нет. (нет. оно конечно есть. и даже отличается у разных браузеров), но именно в самой верстке их не применяют. Значит размытые пиксели не нужно учитывать.
Ответ написан более трёх лет назад
Комментировать
Нравится 1 Комментировать
Marsy это онлайн инспектор файлов PSD для верстальщиков
Он позволяет получить всю информациию необходимую для комфортной работы верстальщика.
Работает в браузере и доступен абсолютно бесплатно.
Возможности инспектора
- Показывает стили элементов
- Показывает расстояния между элементами
- Есть пакетное скачивание изображений
- Быстрое копирование текста и стилей, причем можно копировать текст нескольких элементов, и в режиме мультикурсора вставлять его в разные места за один подход
- Возможность задавать переменные практически любой сложности
- Приводит список использованных шрифтов и цветов
- Для изображений возможно сохраниение в jpg или png
- Для векторных слоев можно получить svg файл или BASE64
- Доступны направляющие из Photoshop
- и другие возможности .
Обзор сервиса Marsy
Каждый, кому доводилось заниматься версткой html страниц, знает, что работа с макетом дизайна занимает довольно большое время, и чем сложнее макет, тем больше.
Некоторое время назад, когда не было ни avocode, ни zeplin, приходилось всю нужную информация о слоях и о самом макете получать из программ, не предусматривающих легкую конвертацию данных в представление необходимое для верстальщика, в данном случае — это Photoshop.
В какой-то момент я понял, что мне не хватает возможностей, которые дают имеющиеся инструменты, мне хотелось оптимизировать тут, добавить возможностей там, но ведь это невозможно, обычно у таких компаний есть четкий план, по которому они следуют.
А значит пришло время взять инициативу в свои руки. И вот уже довольно долгое время, а именно с 2017 года я занимаюсь развитием своего сервиса. Далее я расскажу о нем более подробно.
Сервис Marsy доступен абсолютно бесплатно, но если он вам нравится, вы всегда можете помочь мне материально на это странице.
Так же хочу сообщить, что каждый может предложить улучшение, и с большой вероятностью оно появится в Marsy.
Создание проекта и загрузка макетов
После простой регистрации мы попадаем на страницу со списком проектов, их может быть сколько угодно. Проект можно воспринимать как папку, в которой хранятся макеты.
На это странице можно создать новый проект или удалить существующий, важно отметить, что при удалении проекта удалятся все макеты из него, и восстановить их уже нельзя.
Форма создания проекта, здесь можно задать его название и описание
После создания проекта кликаем по элементу в списке и переходим в сам проект, хранилище макетов.
Для того чтобы загрузить новый макет, нужно кликнуть по кнопке «Добавить макет», после этого откроется форма для загрузки макетов.
Добавить макет для загрузки можно несколькими способами: перетащить макет на область формы или нажать кнопку «Добавить файл» и выбрать макет в инспекторе. Одновременно можно загружать несколько макетов.
Также в этой форме можно изменить название макета и добавить описание к нему.
Для каждого макета доступны некоторые действия:
- Скачать макет — кликнув по этой кнопке можно скачать макет себе на компьютер
- Положить в архив — позволяет убрать макет в архив, при этом обработанная информация о нем будет удалена, а сам макет пропадет с этой страницы. Посмотреть макеты в архиве можно нажав на кнопку «Показать архив», число на ней указывает количество макетов в архиве. Макет из архива можно достать, но после этого его снова придется отправить на обработку, нажав на соответствующую кнопку.
- Обновить — при нажатии на нее макет будет снова отправлен на парсинг, используется при выходе нового обновления, в котором есть изменение работы с файлами.
- Удалить — удаляет макет, восстановить его после удаления невозможно.
Теперь можем перейти к самому «вкусному», к редактору.
Работа с редактором Marsy
Основная информация и контекстное меню
Первое, что можно тут сделать — это кликнуть мышкой по экрану, и если вы попадете в слой, то он станет активным. Около него будет отображаться размеры и появится плавающее окно со стилями этого слоя. Если же теперь зажать левый ctrl и навести на другой слой, то мы увидим расстояние между ними. Если вместо этого кликнуть правой кнопкой мыши, то появится контекстное меню слоя, в котором в зависимости от его типа могут быть следующие пункты:
- Копировать текст — копирует текст выделенных тестовых слоев
- Копировать стили — копирует стили выделенных слоев
- Скачать — открывает диалог для скачивания выделенных слоев
- Открыть смарт — открывает smart object связанный со слоем
Панель инструментов
Слева расположена панель инструментов, простые инструменты я объединю в один раздел, а о сложных расскажу подробнее.
- Выделение рамкой — позволяет выделить слои, захватив их рамкой, так же на ее сторонах написаны ее размеры, что можно использовать для измерений.
- Пипетка — с ее помощью можно скопировать цвет любого элемента, кликнув по нему.
- Назад — вкладка, в которой расположились кнопки возврата к проектам
- Направляющие — включает/выключает отображение направляющих из Photoshop
- Поддержать — сборная вкладка, на которой расположены ссылки на справочные материалы и страницу донатов
На этом с простыми инструментами закончим, и переходим к более сложным. Далее буду располагать их в том же порядке, что и на сайте.
Список слоев
Слои и группы слоев можно скрывать, и самое главное- те слои, что были скрыты в Photoshop изначально, будут доступны, достаточно переключить их видимость.
Около группы слоев есть кнопка, при нажатии на которую будут выделены все дочерние слои.
При клике по слою в этом списке редактор центрируется на изображении этого слоя, что позволяет быстро определить его местоположение.
Экспорт изображений
Перейдя на вкладку скачивания изображений вы увидите две кнопки, обе они откроют окно экспорта изображений. Разница в том, что при клике по одной из них будет предложено — скачать изображения выделенных слоев, в то время как вторая предложит скачать изображения всех не текстовых слоев, что иногда бывает полезно.
Окно экспорта изображений
Основной элемент здесь это список изображений для экспорта.
Слева расположена миниатюра изображения, далее идет текстовое поле, в нем можно изменить название, с которым изображение будет сохранено. После названия идут поля выбора формата изображения (png, jpg и svg при наличии) и настройки качества, доступно только для jpg формата. Последним элементом идет чекбокс, который указывает на то, нужно ли экспортировать конкретный элемент.
Хочу отметит, что для слоев, в которых используется паттерн, будет отдельная строка с предложением — скачать его.
Над списком изображений есть элементы для группового редактирования. Воздействовать они будут лишь на те элементы у которых активна галочка для экспорта.
Первым идет редактор названия, позволяет называть однотипные элементы с нумерацией, например, если в нем написать «item_», то слои будут названы item_1, item_2, item_3 и т.д. Для того чтобы изменить стартовое число, нужно написать «item_» или «item_», и нумерация будет начинаться с 2 или с 8, соответственно.
Далее удит настройки качества, выбор формата изображения и кнопки переключения активности слоев.
Внизу расположена кнопка «скачать», если изображение одно, то скачается сразу файл, если их несколько, будет скачан архив со всеми изображениями, из списка.
На самом верху есть кнопка «Сохранить в один файл», переключив ее можно скачать слои, объединив их в один файл, расположены они будут относительно друг друга как и на макете.
Настройки
Большое внимание я уделяю кастомизации редактора под нужды пользователей. И в этой вкладке как раз собраны все эти настройки.
- Язык приложения
- Формат стилей css или sass — отличаются наличием «;» в конце строки стиля
- Показывать дубли для стилей текста — используется в текстовых слоях, у которых есть текст с разными стилями. Попробуйте изменить значение и поймете в чем суть, на словах это сложно рассказать.
- Плавающее окно стилей — скрывает окно со стилями, которое появляется при клике по слою
- Всегда показывать расстояние — выше я рассказывал о линейках, показывающих расстояние до другого слоя, так вот, при включении этой настройки не нужно зажимать ctrl, они всегда будут отображаться
- Показывать размеры блока — настраивает, когда показывать размеры слоя в его верхнем левом углу. По умолчанию при наведении и выделении слоя
- Настроить расположение вкладок — тут можно изменить порядок инструментов в панели, перенести их на правую сторону или вовсе скрыть неиспользуемые
- Настроить горячие клавиши — для многих действий (копирование стилей, текстов, скачивание изображений) я добавил горячие клавиши, в этом разделе вы можете перенастроить их.
Информация о слое
Тут расположена полная информация о слое полный текст, стили, изображения, svg и base64 представления при наличии.
Информация о макете
На этой вкладке расположились данные всего макета: список цветов, используемых в нем и всех шрифтов макета.
Так же здесь есть блок настройки переменных, с их помощью можно заменять слова или строки на другие. Переменные действуют в рамках всего проекта, при удалении макета они останутся доступны внутри других макетов.
Панель масштабирования
Масштабировать макет можно как кнопками на панели, так и колесом мыши при зажатом ctrl и клавишами «+» и «-» на клавиатуре.
При клике на цифру масштаба, он сбрасывается на 100%
Время для инноваций в вёрстке!
Представляем вам новый инструмент , который сделает вашу жизнь легче — получение HTML/CSS блоков из макета PSD стало проще, чем когда-либо!
Пользователей
занимаемый обьем
Вся информация о дизайне находится в пару кликов
Размеры & расстояния
Выберите несколько слоев и измерьте все в px, pct
Код & переменные
Сохраните стили и переменные в пару кликов
Выбор цвета
Выберите и экспортируйте цвета в HEX, RGBa, HSL
функции
Широкие возможности для верстальщика
Показывает стили элементов, показывает расстояния между элементами, дает возможность задавать переменные практически любой сложности, приводит список использованных шрифтов и цветов…
С помощью Marsy наши разработчики могут легко получить доступ ко всем элементам в исходных файлах дизайна, не заставляя дизайнеров специально подготавливать макет» .
Артем Шабудько
UX-разработчик
функции
Копирование текстов и стилей
Marsy – позволяет мгновенно копировать тексты и стили, причем можно копировать текст нескольких элементов, и в режиме мультикурсора вставлять его в разные места за один подход.
» Marsy служит основным центром для проектов 3 команд в нашей компании. Когда кому-то нужен доступ к дизайну — это в Marsy. «
Игорь Маслов
Руководитель фронтенд-группы в Ubimo
функции
Экспорт изображений
Пакетный экспорт изображений сэкономит ваше время кратно. Для изображений возможно выбрать формат сохранения в jpg или png . Для векторных слоев можно получить svg файл или BASE64
« Marsy необходим для нашей распределенной команды. Без него разработка Pixel Perfect была бы невозможна » .
Артур Диланян
Frontend разработчик
функции
Работа со слоями
Вкладка “Слои” открывает всю структуру макета – папки, слои. Пользователь может видеть иерархию, управлять видимостью слоя, осуществлять навигацию между элементами, выделяя их.
«Marsy превзошел мои ожидания. Поиск альтернативы Avocode казался бесперспективным. Теперь наша команда работает с Marsy».
Георгий Жвания
Frontend разработчик
Тарифы
Тарифные планы, разработанные с учетом ваших потребностей.
Начните бесплатно. Измените или отмените свой план в любое время.
Free
₽0
Тариф для ознакомления с сервисом
- Один активный проект
- Один активный макет
- Авто удаление через 60 дней*
Подписаться
Basic
₽300
Тариф для профессионального использование
- Лимит макетов 300 Мб
- Неограниченное количество макетов
- Неограниченное количество проектов
- Авто удаление через 150 дней*
- Список шрифтов
- Список цветов
- Размер блоков
- Пакетное редактирование при скачивании
- SVG
- Смарт объекты
Подписаться
VIP
₽500
Полнофункциональный тариф без ограничений
- Лимит макетов до 5 Гб
- Макеты не удаляются
- Список шрифтов
- Список цветов
- Размер блоков
- Пакетное редактирование при скачивании
- SVG
- Смарт объекты
- Переменные
- Настройка вкладок
- Горячие клавиши
- css/sass
- Скачать макет
Подписаться
VIP+
₽1400
Полнофункциональный тариф без ограничений
- Улучшение качества изображений
- Удаление фона изображений
- Конвертация в WEBP
- Лимит макетов до 5 Гб
- Макеты не удаляются
- Список шрифтов
- Список цветов
- Размер блоков
- Пакетное редактирование при скачивании
- SVG
- Смарт объекты
- Переменные
- Настройка вкладок
- Горячие клавиши
- css/sass
- Скачать макет
Подписаться
Ответы на вопросы
Вы можете выбрать бесплатный тариф . Для большинства проектов, не требующих расширенного функционала, он вполне подойдет.
Если вы хотите использовать расширенные функции Marsy, вы можете подписаться на наш тарифный план Basic и платить со скидкой в течение всего года или платить полную стоимость ежемесячно.
Тарифный план VIP отличается максимальным функционалом, и приоритетной поддержкой.
Вы можете использовать любую дебетовую или кредитную карту для оплаты подписки.
Если вы хотите использовать другой способ оплаты, например, банковский перевод, или PayPal, напишите нам по адресу sales@markupeasy.com . Обратите внимание, что мы принимаем эти способы оплаты только для годовой подписки.
Вы можете изменить свой тарифный план или расчетный период в любое время. Откройте настройки выставления счетов в Marsy и нажмите кнопку «Изменить план».
Вы можете отменить план подписки в любое время. Откройте настройки оплаты в Marsy и нажмите кнопку отмены подписки. Вы получите подтверждение по электронной почте после отмены. Списание средств за следующий месяц использования будет остановлен.
В данный момент поддерживается только один формат: PSD (формат Photoshop). Мы работаем над тем, чтобы в ближайшем будущем, сервис поддерживал Sketch, Adobe XD, AI.
На странице “История обновлений” вы найдет информацию обо всех обновлениях сервиса.
Переназначение горячих клавиш под общие стандарты графических редакторов
Drag’n’Drop загрузка макетов из страницы “Проекты”.
Авторизация через социальные сети, почте и номеру телефона