Как узнать line height в фотошопе
Один из основных критериев качества вашего проекта — соответствие макету. Макет — это план проекта, и важно ему следовать. Почему? Представьте, что архитектор тщательно спланировал пространство небольшой квартиры и сделал ванную комнату ровно такой, чтобы в неё поместились ванна, раковина, унитаз и стиральная машина. А строитель решил, что следовать проекту не обязательно, и подвинул стену на 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 CS6.
Линии являются векторами на слое формы.
Если я выберу линию с помощью инструмента выбора контура, я могу изменить цвет обводки на панели параметров вверху, но не ширину обводки (если я изменю ширину обводки, ничего не происходит).
Есть ли способ изменить ширину хода?
Это довольно раздражает. Это более надежно, если вы нажимаете ввод или вкладку после каждого ввода значения.Я думаю, что у вас проблема в том, что ваши линии настроены на обводку «изнутри», поэтому независимо от веса вы не увидите результат. Вам нужно щелкнуть стиль линии рядом с pt weight> затем больше параметров> затем там, где написано align, установить по центру или снаружи. Надеюсь, это поможет.
отметка
Это самый актуальный ответ, который я видел из 3 здесь. Вы должны установить свой ход за пределами вашей фигуры. PS по умолчанию это внутренний удар, а не внешний ход, поэтому независимо от того, насколько толстым вы его сделаете, он явно не будет отображаться, если для него установлен «внутренний ход» это решение, поэтому я принял его. Я также проголосовал за ответ @ Райана, потому что он правильно определяет основную проблему: по какой-то странной причине «линия» фактически нарисована в виде прямоугольника в Photoshop. если бы это была настоящая линия, то не было бы никакого «внутреннего» против «внешнего» удара Кстати . это действительно вариант с центральным ходом, который необходим здесь . внешний ход будет иметь отверстие в середине, где находится сама «линия»Это смущало меня много раз, потому что я думаю и хочу, чтобы это был путь удара, но это не так.
То, что вы на самом деле хотите в Photoshop с помощью этого Line инструмента, это вес .
Однако, как только Line в Photoshop создан a, он действует как a, Rectangular Shape поэтому Weight его нельзя изменить, отрегулировав числовое значение.
Теперь, Stroke Width на самом деле будет применять Stroke во всем Line , потому что снова Line в Photoshop в основном Rectangular Shape . Это линия веса 40px с 3pt обводкой:
Photoshop - это отличное программное обеспечение, используемое для множества изображений и видеоредактирования со всеми лучшими инструментами. Сегодня мы увидим использование инструмента «Линия» в Photoshop по нескольким причинам. Это один из эффективных инструментов, используемых художниками, особенно для В этом случае часть области на изображении, например, художник по редактированию газет или журналов, размещает свои статьи в кэше, чтобы привлечь и сделать так, чтобы пользователи читали их так, чтобы у них был хороший пользовательский опыт при чтении, а также при взгляде на расположение контента аналогичным образом. для нескольких целей для этой линии используется инструмент Photoshop.
Этот инструмент также интересен своими свойствами, которые подробно описаны далее в содержании. Для студента и начинающих пользователей Photoshop будет очень полезно узнать, как линейный инструмент используется для различных проектов в промышленности. Инструмент «Линия» используется для рисования линий, создания блок-схемы, разделения рабочего пространства на равное или настраиваемое количество разделений, для построения гражданских, электрических и сантехнических макетов для строительства, а также для многих других целей, это зависит только от проекта, для которого мы его используем. и это легко в использовании.
Как использовать Line Tool?
Однажды Photoshop и инструмент Line инструменты формы формы в меню инструментов. Перед тем, как начать рисовать линию в рабочей области, проверьте и настройте ее свойства в виде стрелки, если это необходимо в начале или конце, длины линий%, ширины% и вогнутости% стрелок, а также веса пикселей в строке. Мы можем использовать разные режимы, чтобы показать нашу линию на изображении с регулировкой непрозрачности% создания линии. Убедитесь, что свойства линии, которую мы должны создать, сконфигурированы до рисования, потому что после рисования мы можем изменить ее свойства, вместо этого мы должны стереть и заново нарисовать новую линию по мере необходимости.
Длительное нажатие клавиши Shift на клавиатуре помогает точно рисовать прямые линии от начала до конца. Техника клавиш Shift также может быть использована для рисования угловых стрелок под 45 градусов в любом направлении в соответствии с концами курсора мыши. Этот трюк помогает рисовать макеты, границы статей в газетах, создавать технические чертежи и многое другое. Стрелки могут быть установлены по мере необходимости перед рисованием. Существует 4 типа установки стрелок, в которых наши стрелки представляют собой просто линию, стрелки только в начале линии, стрелки по обеим сторонам линии и стрелки в конце линии. Ниже приведены примеры для всех из них.
Несколько более продвинутых опций - Mode, Opacity и Anti Alias. Режимы помогают в создании линий и создании линейного свечения (стирания) на слоях, пользователи должны протестировать все слои, чтобы понять, когда их использовать эффективно. Непрозрачность имеет дело с визуальным отображением появления линии на основе установленного%. Сглаживание всегда должно быть включено, поскольку оно помогает в непиксельной оценке цвета линии, проведенной к другим пикселям, что влияет на качество изображения.
Шаги со скриншотами
- После открытия Photoshop «U» является горячей клавишей для активации инструментов формы и выбора инструмента «Линия». Чтобы сделать линию на рабочей области. Инструмент расположен ниже текстового инструмента в строке меню инструмента. Это содержит все другие инструменты формирования в центре. После выбора инструмента «Линия» свойства инструмента «Линия» будут отображаться в верхней строке меню приложения.
- Щелкните стрелку раскрывающегося списка, чтобы получить список свойств стрелки для строки. Мы можем настроить их по мере необходимости в зависимости от спроса. Убедитесь, что свойства линии настроены перед рисованием, потому что в первый раз правильное выполнение будет более точным, чем чередование дизайна с использованием других инструментов.
- У нас есть свойство Линия, Весовая конфигурация пикселя согласно количеству пикселей может быть сделана. Мы можем установить режимы линии по мере необходимости, использовать непрозрачность, если это необходимо, и активировать сглаживание, чтобы избежать проблем с размытием пикселя линии на границах создания линии, что повышает качество выполненной работы.
- Давайте попробуем линию, используя клавишу Shift без стрелок, начальную и конечную линии, перетаскивая курсор мыши от начальной до конечной точек, чтобы нарисовать прямую линию. С помощью сдвига можно нарисовать прямые линии со смещением под углом 45 градусов к любой стороне рабочей зоны.
- Рисование от руки также может быть выполнено без использования клавиши Shift, что приводит к изменению пикселизации, что не рекомендуется многими профессиональными пользователями Photoshop.
- Линия со стрелкой в начале с необходимой шириной, длиной и вогнутостью. Мы видим, как начало стрелки активно.
- Линия нарисована стрелками в обоих направлениях, и мы видим, что и начало, и конец активны перед рисованием линии Точно так же мы можем отключить начальную стрелку и нарисовать только конечную стрелку на линии.
- Разные линии нарисованы с использованием разных% вогнутости.
- Активация сглаживания помогает избежать растрескивания линии по краям линии.
- Непрозрачность нарисованных линий может быть установлена для опорных границ.
- Режимы помогают получать сплошные линии, стирать данные в форме линий и т. Д.
- Вес линии - это не что иное, как количество пикселей в строке при рисовании в рабочей области.
Вывод
Линейный инструмент в Photoshop очень эффективен в использовании для решения многих профессиональных задач, таких как создание газет, текстурирование для игр и персонажей в VFX, и многие другие проекты могут быть выполнены с помощью линейного инструмента с хорошим качеством. Практика также очень необходима для каждого профессионала Photoshop. Это поможет пользователям узнать, как использовать инструмент «Линия» в Photoshop при пробовании различных свойств и изменений атрибутов линии. Создавать интересные вещи и воплощать фантазии в реальность может только художник, использующий Photoshop и его инструменты. Используйте инструмент «Линия» и изучите свой опыт в создании лучших визуальных результатов.
Рекомендуемые статьи
Это было руководство к инструменту Line в фотошопе. Здесь мы обсудим, как использовать линейный инструмент в фотошопе с соответствующими шагами и скриншотами. Вы также можете взглянуть на следующие статьи, чтобы узнать больше -
Интерлиньяж — это вертикальный интервал между строками текста . Для прямого шрифта интерлиньяж измеряется от базовой линии одной строки текста до базовой линии строки, расположенной над ней. Базовая линия — это невидимая линия, по которой выравнивается нижний край большинства букв. К одному абзацу может быть применено несколько значений интерлиньяжа, однако общее значение будет определяться значением наибольшего из них.
При работе с горизонтальным азиатским текстом можно указать, каким образом следует измерять интерлиньяж: либо между нижними линиями шрифта двух строк, либо от верха одной строки до верха следующей.
Задание интерлиньяжа
Выделите символы, которые надо изменить. Если не текст выделен, интерлиньяж применяется к вновь создаваемому тексту.Изменение применяемого по умолчанию значения автоинтерлиньяжа
В параметре «Автоинтерлиньяж» введите новое значение по умолчанию в процентах.Кернинг — это увеличение или уменьшение интервала между определенными парами символов. Трекинг — это расширение или сужение интервала между символами в выделенном тексте или во всем блоке текста.
Значения кернинга и трекинга применяются к текстам на японском языке, но, как правило, эти параметры используются и для настройки межсимвольного интервала между символами латиницы.
Кернинг текста можно настраивать автоматически с использованием метрического или оптического кернинга. При метрическом кернинге (называемом также автокернингом) используются пары литер, которые включены в большинство шрифтов. Эти пары литер содержат сведения о расстояниях между конкретными парами букв. Вот некоторые из них: LA, P., To, Tr, Ta, Tu, Te, Ty, Wa, WA, We, Wo, Ya и Yo. Метрический кернинг применяется по умолчанию, поэтому к конкретным парам букв кернинг применяется автоматически во время импорта или ввода.
Некоторые шрифты включают подробные спецификации кернинга. Однако если шрифт содержит только минимальные данные о кернинге или вообще их не содержит, либо если в слове или строке одновременно используются различные гарнитуры и кегли, может потребоваться применение оптического кернинга. При оптическом кернинге интервал между смежными символами подстраивается исходя из их формы.
A. Исходный текст B. Текст с оптическим кернингом C. Текст с установленным вручную кернингом между буквами «W» и «a» D. Текст с трекингом E. Совмещение кернинга и трекинга
Можно также воспользоваться ручным кернингом, что позволит идеально настроить расстояния между двумя соседними символами. Трекинг и ручной кернинг можно использовать вместе. Для этого сначала настраиваются отдельные пары букв, а затем блоки текста делаются более сжатыми или разреженными. Это не оказывает влияния на относительный кернинг пар букв.
Если поместить курсор вставки между двумя буквами, на панели «Символ» появляются значения кернинга. Аналогично этому при выделении слова или фрагмента текста на панели «Символ» появляются значения трекинга.
Как трекинг, так и кернинг измеряются в тысячных долях em — единицы измерения, которая определяется относительно текущего размера шрифта. Для шрифта размером 6 пунктов 1 em равен 6 пунктам. Для шрифта размером 10 пунктов 1 em равен 10 пунктам. Кернинг и трекинг строго пропорциональны текущему размеру шрифта.
Значения кернинга и трекинга применяются к текстам на японском языке, но вообще эти параметры используются и для настройки межсимвольного интервала между символами латиницы.
Читайте также: