Как узнать размер шрифта в фотошопе для верстки

Обновлено: 05.05.2024

Недавно во время верстки одного проекта я обнаружил следующую проблему: размер шрифта в программе “Adobe Photoshop” не соответствует аналогичному размеру шрифта в таблице стилей. То есть надпись в “Adobe Photoshop” размером, например, 24 pt выглядит намного мельче, чем текст такого же размера в окне браузера.

Обнаружил я это в тот момент, когда стал переводить размер шрифта из pt в em.

Как известно пункты (pt) как и пиксели (px) - величины абсолютные, а em и проценты - динамические. Однако, размер em зависит от размера в px, установленной по-умолчанию. Например, по-умолчанию размер шрифта в браузере установлен в 16px, значит в данном случае 1em будет равен 16px.

Пользовался таблицей приведенной ниже:

CSS: таблица соответствия px, pt, em и %.

Points	Pixels	Ems	Percent
6 pt	8 px	0.5 em	50 %
7 pt	9 px	0.55 em	55 %
7.5 pt	10 px	0.625 em	62.5 %
8 pt	11 px	0.7 em	70 %
9 pt	12 px	0.75 em	75 %
10 pt	13 px	0.8 em	80 %
10.5 pt	14 px	0.875 em	87.5 %
11 pt	15 px	0.95 em	95 %
12 pt	16 px	1 em	100 %
13 pt	17 px	1.05 em	105 %
13.5 pt	18 px	1.125 em	112.5 %
14 pt	19 px	1.2 em	120 %
14.5 pt	20 px	1.25 em	125 %
15 pt	21 px	1.3 em	130 %
16 pt	22 px	1.4 em	140 %
17 pt	23 px	1.45 em	145 %
18 pt	24 px	1.5 em	150 %
20 pt	26 px	1.6 em	160 %
22 pt	29 px	1.8 em	180 %
24 pt	32 px	2 em	200 %
26 pt	35 px	2.2 em	220 %
27 pt	36 px	2.25 em	225 %
28 pt	37 px	2.3 em	230 %
29 pt	38 px	2.35 em	235 %
30 pt	40 px	2.45 em	245 %
32 pt	42 px	2.55 em	255 %
34 pt	45 px	2.75 em	275 %
36 pt	48 px	3 em	300%

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

Данный рисунок иллюстрирует мои поиски правильного способа расчета размера шрифта.

Итог таков — чтобы добиться схожести в размере текста, нужно размер шрифта в Adobe Photoshop разделить на 15,6 и округлить до целого числа.

Также могу посоветовать читателю воспользоваться онлайн-сервисом для пересчета размера шрифта в разные единицы измерения. С его помощью можно пересчитать размер шрифта из px в em, из px в %, из px в pt, а также из em в px и из em в %.

Надеюсь, что эта небольшая заметка поможет вам при верстке Ваших страничек.

Один из основных критериев качества вашего проекта — соответствие макету. Макет — это план проекта, и важно ему следовать. Почему? Представьте, что архитектор тщательно спланировал пространство небольшой квартиры и сделал ванную комнату ровно такой, чтобы в неё поместились ванна, раковина, унитаз и стиральная машина. А строитель решил, что следовать проекту не обязательно, и подвинул стену на 20 см. И вот уже либо стиралка не входит, либо вместо ванны придётся ставить душ.

Дизайнер спланировал пространство страницы и взаимодействие пользователя с сайтом. Теперь вам нужно это сверстать. Как? Стилизуйте небольшие компоненты, собирайте из них блоки побольше, потом ещё больше, а потом вся страница окажется готовой. Чтобы построить дом, нужно сделать кирпичи.

Я обычно стилизую страницу поблочно. Беру какую-нибудь кнопку и стилизую её до полного соответствия макету. Потом поле формы с подписью. Из полей и кнопок собираю форму. Стилизую шапку и футер. Вот уже и страница готова.

Начните с текста

Я имею в виду не только текстовые блоки. Текст везде: в меню, на кнопках, подписи к полям, подсказки в полях, подписи к картинкам, заголовки. Текст — основа вашей вёрстки. Если вы оставите параметры текста на потом, можете попасть в ловушку.

Взгляните на эти две кнопки:

Кнопки с разным интерлиньяжем

У них одинаковый шрифт, рамки и отступы. Почему они разной высоты? У них разный интерлиньяж (межстрочное расстояние, line‑height ). Если вы сначала добавите блоку отступы, а потом назначите line‑height , блок вдруг станет «не по макету», и придётся снова работать над отступами.

Чтобы не попасть в ловушку, сначала подключите правильный шрифт, потом установите блокам подходящие font‑size и line‑height , а после этого делайте всё остальное.

Стоит ли задавать line‑height однострочным блокам? Конечно! В разных браузерах значения по умолчанию могут быть разными, поэтому всегда выставляйте line‑height .

Как узнать параметры текста в Фотошопе

Как узнать, каким шрифтом набран текст, какого он размера и начертания? Выберите инструмент «Text» (нажмите латинскую T на клавиатуре) и кликните на текст, который вас интересует. Текст выделится рамкой, а в верхней панели покажутся параметры этого текста:

Здесь видно шрифт — «Open Sans», начертание — «Regular» и размер — 18px. Если у вас не установлен шрифт из макета, то Фотошоп при клике заменит шрифт на похожий. Будьте внимательны. Перед этим он покажет предупреждение, мол, шрифта такого-то нет:

Этот шрифт из предупреждения и используйте. Если вы нажмёте «Отмену», параметры шрифта всё равно отобразятся, и шрифт не изменится. Если вы нажали «ОК» и шрифт поменялся, верните тексту прежний вид: снимите выделение, нажав Escape , и отмените действие по Ctrl+Z ( Cmd+Z в Mac OS).

Про межстрочное расстояние вам расскажет иконка папки на панели текста:

Она откроет окошко с параметрами текста, там и написан интерлиньяж:

Свойства текста

Бывает, что вместо числа там написано «Auto». Как тогда узнать line-height ? Просто измерьте от верха строчных одной строки до верха строчных следующей. Или от низа, как вам удобнее. Это и будет line‑height :

Межстрочное расстояние

Шрифты на разных системах отображаются по-разному. На Маке шрифты выглядят немного толще, чем на Виндоуз. Если вы накладываете макет на вашу вёрстку и видите некоторое несовпадение шрифта — не пугайтесь. Просто возьмите параметры шрифта из макета. Не попадайтесь на удочку с жирностью. Если вам кажется, что надпись жирная, проверьте в свойствах текста в Фотошопе. Возможно она не жирная, просто у дизайнера Мак.

Приготовьте блоки

После текста поработайте с цветами, рамками и полями. Чтобы узнать цвет фона или рамки блока, используйте в Фотошопе инструмент «Color Picker». По умолчанию у него нет горячей клавиши, но можно настроить. Не берите пипеткой цвет текста, вы можете попасть в крайний пиксель, у которого цвет чуть слабее из-за сглаживания. Берите цвет из той же панели, откуда взяли начертание и размер:

Отступы удобно измерять инструментом «Marquee», он выбирается клавишей M . Рядом с курсором рисуется размер выделенной области. Если вы на пару пикселей промахнулись с верхним левым углом, не отпуская мыши зажмите пробел и подвиньте выделение. Не нужно чертыхаться и перевыделять.

Для Фотошопа есть плагин Size Marks, который позволяет на месте выделения оставить пометку с размером:

После установки плагина навесьте на него хоткей, у меня Cmd+Shift+P . Выделяете, жмёте свой хоткей, рисуются размеры текущим выбранным цветом. Следите, чтобы он не совпадал с цветом под выделением, а то ничего не увидите.

С отступами между блоками и горизонтальными отступами текста всё просто: сколько намерили, столько и ставите. С вертикальными отступами от текста до границ блока или другого текста сложнее: влияет line‑height .

Я в таких случаях на глаз вычитаю из измеренного половину расстояния между строк (не межстрочного расстояния, а расстояния между низом одной строки и верхом следующей), и для более точного измерения иду в браузер и накладываю макет на вёрстку.

Наложите макет на вёрстку

Есть плагины для браузера, которые накладывают картинку поверх страницы. Я использую PerfectPixel. Экспортируйте макет из Фотошопа в формат PNG, установите расширение и наложите PNG поверх страницы. Можно менять прозрачность и двигать картинку.

Нажмите на замок, и картинка не будет ловить клики. Можно тыкать на элементы страницы как обычно. Меняйте отступы в веб-инспекторе и двигайте макет, пока не попадёте. С опытом научитесь определять размеры точнее и будете в инспекторе только на несколько пикселей двигать.

Значения можно менять стрелками. Нажали на значение, там 65px. Жмёте вниз — число уменьшается, вверх — увеличивается. С зажатым шифтом шаг изменений не 1, а 10. Когда подобрали правильное значение, пропишите его в ваш CSS.

Методом наложения можно определять вообще всё: шрифт, межстрочное расстояние, отступы, рамки. Можно сверстать весь макет по PNG без Фотошопа. Но зачем, если большую часть параметров можно сразу точно измерить?

Насколько пиксель должен быть перфект

Если дизайнер нарисовал три как будто одинаковых кнопки, две из них высотой 40px и одна 39px, то у него дрогнула рука. Делайте все кнопки одной высоты.

Если расстояние между элементами 51px, можно сделать 50. Большие расстояния я округляю до 5. Большие — это как раз за 50. Средние позволяю себе округлять до чётных. Из 31 сделаю 32. Размеры шрифтов не округляю и вам не советую. Буквы при изменении кегля меняются не пропорционально. Числа меньше 28 тоже стараюсь не округлять: при таких размерах обычно каждый пиксель важен.

Самое главное: сделайте, чтобы каждый блок походил на свой портрет в макете. Когда вы округлили пару-тройку отступов, и поставили макет в левый верхний угол, что-то внизу страницы может не совпасть с макетом. Это не страшно. Главное, чтобы каждый блок попадал в макет с допустимой погрешностью, если макет на него надвинуть.

Соберите страницу из блоков

Включите направляющие хоткеем Ctrl+; ( ⌘+; в Маке). Разберитесь, как устроена сетка, померяйте расстояние между блоками, отступы от границ страницы до блоков.

Из полей и кнопок соберите форму, из ссылок соберите меню, крупные блоки расставьте по сетке, добавьте отступы. Ваша страница готова, а вы — супергерой!

Сверстать по макету — это просто и не больно, если у вас хорошая стратегия и если вы умеете пользоваться инструментами. Двигайтесь от меньшего к большему, мыслите блоками. Измеряйте всё что можно в Фотошопе, а что нельзя — подгоняйте в браузере. Используйте горячие клавиши. Вот самые главные:

Дизайнеры работают в разных программах, а самые популярные из них это Photoshop и Figma. Вам как верстальщику требуется доступ к этим программам, чтобы верстать по дизайну. Про Figma рассказывать не буду, там всё элементарно, ничего устанавливать не нужно, достаточно через браузер зайти в Figma.

А вот Photoshop требует небольшого обучения. И Photoshop — это самая популярная программа для создания дизайнов.

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

Photoshop нужно скачать и установить на компьютер.

Изучать Photoshop Вы будете на примере этого дизайна design.zip.

Скачайте архив. Внутри находится только 1 файл design.psd. Откройте этот файл в Photoshop.

При открытии файла у Вас появится несколько диалоговых окон:

Здесь нажмите "Сохранить слои".

Здесь нажмите "ОК".

3. И третьей окно, в котором написано "Некоторые текстовые слои содержат шрифты. ". Здесь нажмите "ОК".

После этого откроется дизайн.

Первое на что нужно обратить внимание, это чтобы в левой панели фотошопа был выбран курсор:

Дальше. Сейчас у Вас дизайн открыт в маленьком масштабе. Чтобы увеличивать или уменьшать масштаб нужно зажать клавишу Alt и крутить колесико мышки.

Чтобы быстро перемещаться по дизайну нужно зажать пробел (курсор превратится в руку) и перемещать дизайн мышью.

Извлечь определенную картинку из дизайна в Photoshop

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

Чтобы выбрать любой объект в дизайне нужно зажать клавишу ALT и щелкнуть по этому объекту правой кнопкой мыши. Поэтому зажмите клавишу Alt и щелкните правой кнопкой мыши по указанной картинке.

Посмотрите в правую панель фотошопа. Там выделена наша картинка:

Теперь здесь в правой панели нажмите на название этой картинки правой кнопкой мыши. Именно на название картинки, а не на квадратик. После нажатия появится окно, в котором нужно выбрать "Создать дубликат слоя. ".

Появится другое окно:

В этом окне нужно в поле Документ выбрать "Новый" и нажать кнопку ОК.

После этого картинка откроется в отдельном окне фотошопа:

Но вместе с картинкой иногда открывается лишняя область. Чтобы эту область убрать нужно сделать следующее. Зажать клавишу Ctrl и в правой панели фотошопа нажать мышкой на квадратик рядом с названием картинки:

После этого картинка выделится пунктирной линией. Теперь нужно в левой панели выбрать инструмент "Рамка" и нажать на Enter 2 раза:

После этих действий у вас останется только картинка без лишней области. Осталось картинку сохранить на компьютер. Делается это сочетанием 4 клавиш: Ctrl+Alt+Shift+S. Вот так в фотошопе. Нужно постараться, чтобы сохранить картинку. Если не хотите нажимать эти 4 клавиши, то можно мышкой выбрать меню "Файл", а в нем выбрать "Сохранить для Web. ":

После этого откроется диалоговое окно для сохранения картинки:

Здесь нужно просто выбрать формат: обычно это JPEG или PNG-24. И нажать кнопку "Сохранить".

Определить код цвета в Photoshop

Следующее, что часто нужно будет делать — это точно определить цвет. Делается это очень просто. В левой панели фотошопа нужно выбрать инструмент "Пипетка":

И теперь этой пипеткой можно ткнуть в нужный цвет в дизайне. Ткнуть достаточно 1 раз. Нужный цвет можно будет посмотреть в левой панели фотошопа вот здесь:

Просто кликните 1 раз по этому квадратику и у Вас откроется диалоговое окно, где можно скопировать код цвета:

Определение шрифта в Photoshop

Часто нужно определить шрифт, его размер и цвет. А также, обычный стиль шрифта (Regular) или жирный (Bold).

Для этого, так же как и для выбора картинки нужно зажать клавишу Alt и правой кнопкой мыши нажать на нужный шрифт. Например, в нашем дизайне определим шрифт для навигации в самом верху. Зажмите Alt и правой кнопкой мыши нажмите на слово Home. В правой панели фотошопа выделится нужный шрифт. Здесь же в правой панели нажмите двойным кликом на квадрат с буквой Т рядом со шрифтом:

Сперва у Вас появится диалоговое окно, что у Вас нет такого шрифта. Так как сейчас Вы только учитесь, то ничего страшного, просто нажмите "ОК". В будущем же, нужно будет скачивать необходимые шрифты и устанавливать их на компьютер. Чтобы установленный шрифт появился в фотошопе, фотошоп необходимо перезапустить. Если в дизайне будут использоваться платные шрифты, то Вам ничего не останется, как просить нужный шрифт у дизайнера.

Сейчас Вы нажали "ОК" и у Вас выделился весь выбранный текст в дизайне. А вверху фотошопа появилась вся информация о выделенном шрифте:

Стрелками я указал, какая информация нам интересна. Слева направо:

семейство шрифтов (название шрифта). В CSS это font-family;
стиль и начертание шрифта. Если здесь указано Regular, то это обычный шрифт. Если Bold, это это жирный шрифт и в CSS у него будет font-weight: bold;. Если Italic, то это курсив, и в CSS нужно будет прописать font-style: italic;
размер шрифта. В CSS размер шрифта указывается свойством font-size;
цвет шрифта. В нашем случае здесь стоит знак вопроса, потому что не весь шрифт одного цвета. Слово Services в навигации отличается цветом. Чтобы узнать цвет конкретного слова, нужно выделить мышью именно это слово прямо в дизайне. Например, если Вы сейчас выделите слово Home, то знак вопроса пропадет. Чтобы получить цвет, нужно кликнуть мышью по этому прямоугольнику с цветом шрифта, и появится уже знакомое диалоговое окно с кодом цвета.

Кстати, в дизайне в навигации слово Services сделано другим цветом не просто так. Таким образом дизайнер показал, как в верстке должны будут выглядеть ссылки навигации при наведении на них курсора мыши. Ведь навигация на сайте представлена ссылками. Если говорить об этом дизайне, то на будущем сайте можно будет нажать на Home, About, Services и т.д.

Ну, а эффект наведения в верстке делается в CSS псевдоклассом :hover.

Помните, чтобы выделить текст, он должен быть сперва выбран в правой панели фотошопа. Если Вы просто в дизайне начнете стараться выделить каждый текст, как делаете это в Word, то у Вас ничего не получится. Нужно сперва зажать Alt и нажать на текст правой кнопкой мыши, и действовать далее, как уже описано выше.

Определить расстояние, размеры

В CSS существуют внешние и внутренние отступы (margin и padding). Когда Вы будете делать верстку по дизайну, нужно будет прописывать отступы между элементами в соответствии с дизайном. Определить расстояние между элементами в Photoshop можно разными способами. Один из самых простых — это использовать инструмент "Прямоугольная область" в левой панели фотошопа.

В левой панели фотошопа выберите инструмент "Прямоугольная область":

И теперь попробуйте определить расстояние между словами Home и About в дизайне:

Для этого нужно просто зажать левую кнопку мышки и провести мышкой от одного слова до другого. Вам сразу покажется ширина и высота получившегося прямоугольника. То есть таким же образом можно определять и вертикальное расстояние, если нужно.

Потом, чтобы убрать получившийся прямоугольник, просто нажмите сочетание клавиш Ctrl+D.

Чтобы получать наиболее точные расстояние увеличивайте масштаб дизайна зажав Alt и крутя колесико мышки.

Инструментом "Прямоугольная область" можно также определять размеры элементов и радиус закругления элемента (в CSS это свойство border-radius).

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

Еще немного о Photoshop

Получается, для того, чтобы верстать из Photoshop Вам нужно уметь пользоваться несколькими инструментами в левой панели и выбирать нужный элемент дизайна в правой панели.

Обратите еще внимание на правую панель. А именно на иконки глаза. Если Вы выключите иконку глаза у какого-либо элемента, то в дизайне он станет невидимым. Если выключите эту иконку у всей папки, то пропадет всё, что есть в этой папке:

И когда Вы верстаете, обращайте внимание, не скрыто ли что-то. Часто дизайнеры скрывая элемент, показывают, как он будет виден на сайте при наведении мыши (:hover в CSS). То есть Вам нужно нажать на иконку глаза, чтобы посмотреть элемент дизайна.

Иногда можно увидеть скрытый слой под название grid. Его верстать не надо — это вспомогательная прослойка в дизайне. Эта прослойка помогает как дизайнеру ровно размещать элементы, так может помочь и Вам быстро определять отступы.

Вместо слоя grid дизайнер мог использовать направляющие:

Их тоже верстать не надо. Чтобы их скрыть или отобразить нужно нажать сочетание клавиш Ctrl+;. Или можно вверху фотошопа зайти в "Просмотр", там выбрать "Показать" и там кликнуть на "Направляющие.

Еще момент. Иногда удобно видеть рамку вокруг элемента, с которым Вы работаете. Для этого в верхней панели Photoshop нужно нажать галочку "Показать упр. элем.":

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

Дальше. В левой панели почти у всех инструментов есть сопутствующие инструменты. Чтобы их увидеть нужно на инструмент нажать правой кнопкой мыши:

Ну, и последнее, прямо сейчас поменяйте пункты на пиксели. После этого шрифт у Вас будет измеряться в пикселях (px), а не в пунктах (pt). Для этого зайдите в "Редактирование" → "Установки" → "Основные":

Данная статья посвящается всем тем, кто только-только взялся за изучение верстки макетов, и тем, кто пока плохо разбирается в Adobe Photoshop. Моя цель рассказать откуда брать данные из PSD-файлов и научить приёмам, которые будут полезны всем верстальщикам.

Как вырезать и сохранять картинки?

Простые картинки, которые состоят из геометрических фигур, лучше всего описывать посредством CSS. Такой метод не будет нагружать сайт, а значит скорость загрузки не пострадает.

Итак, чтобы вырезать картинку из макета, надо, во-первых, найти слой с картинкой.

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

Жмем Enter. Наша картинка готова.

Сохраняем ее в режиме web. Чтобы так сохранить в Photoshop CC надо нажать на Файл -> Экспортировать -> Сохранить для Web (старая версия). Для более ранних версий Photoshop можно было сохранить еще проще: Файл -> Сохранить для Web

Как правило, картинки сохраняют в JPEG и PNG-24.

Сохранение SVG картинок в Photophop

Информация о font-family, font-size, line-height, color

Информация о margin и padding

Этот метод я использую, как правило, чтобы узнать о высоте или ширине определенного элемента. Но для того, чтобы соблюсти pixel-perfect всего макета, обычно я использую расширение для Chrome с одноименным названием PerfectPixel. Чтобы его установить, нажмите здесь.

Информация об opacity

Горячие клавиши Photoshop для верстака

P.S. Скриншоты, приводимые в статье сделаны в программе Photoshop CC.

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