Как узнать border radius в фотошопе

Обновлено: 04.07.2024

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

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

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

Но вот появился CSS3 и дело значительно облегчилось, так как в этой спецификации есть свойство, специально созданное для отрисовки круглых углов у блоков. Оно называется border-radius .

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

Но речь в данной статье не об этом. Точнее, не о том, как создать скругленный угол в CSS3. А о том, как померить этот угол на psd-макете. Допустим, у нас есть присланный дизайнером макет сайта:

Видно, что художник постарался от души - скруглений хоть отбавляй. Ну, ничего сложного для верстальщика здесь нет. Блоки со скругленными углами - достаточно узнать радиус скругления этих углов, которые нарисовал дизайнер, и прописать для них свойство border-radius: 20px , к примеру.

А вот как его узнать? Не звонить же дизайнеру с вопросом - какой радиус ты заложил в макете?

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

Проведем в качестве вспомогательных линий две направляющие - вертикальную и горизонтальную. На рисунке они отображены тонкими синими линиями. Нам они будут необходимы для того, чтобы получить точку их пересечения. Затем выберем в панели инструментов Photoshop прямоугольное выделение (Rectangular Marqee).

И построим квадрат (зажав клавишу Shift ) так, чтобы его левый верхний угол совпал с точкой пересечения направляющих. Протянем его мышкой так, чтобы стороны расширяющегося квадрата совпали с касательными точками, о которых говорилось ранее. Как только линии квадрата и касательные точки совпадут, отпускаем мышь - построение закончено.

Можно выполнить построение другим способом. Начать выделение из одной точки (касательной) и закончить в другой, то есть, как бы по диагонали. Результат будет тот же самый, но не нужно создавать направляющие:

Теперь откроем панель “Инфо”, и взглянем на размеры построенного квадрата. Длины сторон и будут радиусом скругления для данного блока на макете:

Не верите? Это точно - любая из сторон построенного квадрата будет радиусом данного скругления! Чтобы еще немного разъяснить, я нарисовал в AutoCAD круг с радиусом 41мм , а затем построил квадрат с длинной стороны 41мм так, чтобы вписать его правый верхний угол в центр созданного круга. На рисунке хорошо видно, что любая из его сторон является радиусом круга, в который он вписан:

При построении квадрата выделения на psd-макете бывает, что невозможно точно попасть так, чтобы стороны квадрата совпали с направляющими guideline. Для себя нашел такой выход. Ну, не попал, так не попал.

Строю квадрат дальше. Когда он построен и мышь отпущена, я просто перемещаю выделение в нужное место с помощью клавиш-стрелок на клавиатуре. А дальше - все как и прежде. Смотрю на панель “Инфо” и получаю точный радиус скругления:

Как видно, все оказалось очень просто. Теперь, зная точное значение радиуса скругления, можно создать шаблон сайта, максимально соответсвующий psd-макету.

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

Почему на psd-макете радиус скругления равен 40px , а в AutoCAD - 41px ? Да просто промахнулся, когда рисовал круг. Сути дела это ведь не меняет, только еще нагляднее показывает верность подхода.

TypeScript - размеченные объединения

> Пользовательское объединение типов - что это и как можно использоватьПомимо объединения **примитивных** типов данных (например):

Примечание: все последующие примеры тестировались на Mozilla Firefox, Safari и Chrome.

Детали учебника

Программа: Любой редактор исходного кода (Dreamweaver, Photoshop)

Версия: CS5 (можно любая)

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma

Сложность: Базовый уровень

Примерное время выполнения: 1 час

До начала

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

Шаг 1: Закругленные углы в Photoshop

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

Создание эффекта закругленных углов довольно просто в любом графическом софте, но в Photoshop’е возникают некоторые трудности:

Точность: даже если вы можете установить радиус закругленного угла, встроенный движок устранения контурных неровностей Photoshop’а часто добавляет к графике один или два лишних пикселя. Многим из нас в прошлом приходилось вручную снижать количество пикселей закругленных углов на неточном изображении, для того, чтобы создать аккуратное соединение с, например, цветами фона.

Редактирование: это одна из самых больших проблем создания закругленного угла на основе изображения. Если вы создаете в Photoshop’е графику для угла радиусом в 10px, и по какой-то причине вам нужно увеличить радиус до 20px, сделать это можно, только перечертив фигуру, или вручную отредактировав все ее углы, теряя при этом время и точность. Изменение размера – еще одна огромная проблема, если вам нужно растянуть или увеличить фигуру, вам приходится применять инструмент Photoshop’а Выделение точки (Point Selection), потому что употребление Сетки трансформации (Transform Controls) может вызвать нежелательные искажения формы угла. Я даже не буду упоминать о том, что разделение углов на слои занимает приличное количество ценных минут.

Заливки и Рамки: создание заливки градиента внутри основанного на изображении блока закругленного угла всегда было непростой задачей даже без перекрывания границ – чтобы разделить на слои вовлеченные изображения, требуется хирургическая точность. Вам нужно создать по меньшей мере 3 изображения для каждого блока, одно для верхних углов, другое для нижних и горизонтальный или вертикальный градиент, а затем написать для них код. Другой проблемой заливки изображения является то, что контейнеру часто требуется увеличить высоту или ширину, получая при этом нежелательный эффект градиента (смотрите скриншот внизу).

Стили смешанных углов: в Photoshop’е создании стилей смешанных углов занимает время, в нем отсутствуют опции комбинирования стилей углов. Вам приходится вручную уменьшать/увеличивать радиус или комбинировать формы… а затем каждый угол разделять на слои.

Закругленные углы в CSS

Применение CSS3 для создания классических закругленных углов, основанных на изображении – отличная идея. Вот пара аргументов «за»:

Работает на всех современных браузерах (кроме IE 6,7,8), включая большинство популярных мобильных браузеров.

Чтобы заставить их работать, требуется всего пара строк в файле CSS

Увеличение/уменьшение радиуса, изменение размера, изменение заливки и границ занимают секунды, а в Photoshop’е – несколько минут

Давайте рассмотрим код для создания закругленных углов в CSS:

Нет времени, чтобы прочитать все это? Мы создали для вас визуальный инструмент. Он доступен здесь.

Вступление

В рамках конференции Frontend Conference в Цюрихе Рэйчел Эндрю рассказал об Использовании возможностей Grid Layout. В конце своего доклада она упомянула о старом свойстве CSS, и это застряло у меня в голове:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

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

Освоение border-radius

Одно значение

Каждый раз, когда вы используете только одно значение, все углы округляются по этому значению:

Как видно из приведенного выше примера, наряду с фиксированными значениями длины, такими как px, rem или em, вы также можете использовать проценты. В основном они используются для создания круга, устанавливая радиус в 50%. Процентное значение основано на ширине и высоте данного элемента. Поэтому, когда вы используете его для прямоугольника, у вас не будет симметричных углов. Вот пример, показывающий разницу между border-radius: 110px и border-radius: 30%, применяемым применяется к прямоугольнику.

Обратите внимание, что углы с правой стороны не симметричны и запомните это. Мы вернемся к этому моменту позже

Четыре разных значения

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

Восемь значений, разделенных косой чертой (вот что интересно)

Я думаю, что большинство из вас уже сделали все, что я объяснил выше. Теперь мы добираемся до интересной части. Что произойдет, если вы разделите значения косой чертой и укажете до восьми значений? Давайте посмотрим, что говорит об этом спецификация:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Таким образом, значения перед косой чертой отвечают за горизонтальные длины, тогда как значения после косой черты определяют вертикальные длины. Но что это значит? Помните процентные значения для прямоугольных фигур? У нас были разные абсолютные значения для вертикальных и горизонтальных длин и асимметрично закругленные углы, и это именно то, что вы получаете, когда используете синтаксис косой черты.

Поэтому, когда вы сравните радиус: 4em 8em с радиусом: 4em / 8em, результаты будут совершенно разные.

Симметричные углы слева образуют четверть круга, тогда как асимметричные углы справа являются частью элипса.

Честно говоря, фигуры, которые вы получаете с помощью этого, выглядят немного странно. Но вспомните круги, которые вы создаете с помощью border-radius: 50%. Вы получали круг, поскольку оба значения, определяющие одну сторону, составляют 100% (50% + 50% = 100%), и прямой линии нет. Если вы применяете ту же логику к синтаксису радиуса с восемью значениями, вы можете создать фигуру, которая немного похожа на плектр или органическую клектку:

В итоге это четыре перекрывающиеся эллипса, которые формируют окончательную фигуру. Не очень легко!

Мне потребовалось некоторое время, чтобы привыкнуть к этому синтаксису. Каким-то образом он не интуитивен. Чтобы сделать все немного проще для вас, мы создали небольшой инструмент, который поможет создавать собственные органические фигуры. FANCY BORDER RADIUS

(Не) скрещивайте лучи

The border-top-left-radius CSS property rounds the top-left corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner.

The rounding can be a circle or an ellipse, or if one of the value is 0, no rounding is done and the corner is square.

A background, being an image or a color, is clipped at the border, even a rounded one; the exact location of the clipping is defined by the value of the background-clip property.

Note: If the value of this property is not set in a border-radius shorthand property that is applied to the element after the border-top-left-radius CSS property, the value of this property is then reset to its initial value by the shorthand property.

Syntax

the value is a <length> or a <percentage> denoting the radius of the circle to use for the border in that corner.

With two values:

the first value is a <length> or a <percentage> denoting the horizontal semi-major axis of the ellipse to use for the border in that corner.
the second value is a <length> or a <percentage> denoting the vertical semi-major axis of the ellipse to use for the border in that corner.

Values

Denotes the size of the circle radius or the semi-major and semi-minor axes of the ellipse. As absolute length it can be expressed in any unit allowed by the CSS <length> data type. Percentages for the horizontal axis refer to the width of the box, percentages for the vertical axis refer to the height of the box. Negative values are invalid.

Formal definition

Initial value	0
Applies to	all elements; but User Agents are not required to apply to table and inline-table elements when border-collapse is collapse . The behavior on internal table elements is undefined for the moment.. It also applies to ::first-letter .
Inherited	no
Percentages	refer to the corresponding dimension of the border box
Computed value	two absolute <length> s or <percentage> s
Animation type	a length, percentage or calc();

Formal syntax

Examples

Arc of a circle

A single <length> value produces an arc of a circle.

Arc of an ellipse

Two different <length> values produce an arc of an ellipse.

Square element with percentage radius

A square element with a single <percentage> value produces an arc of a circle.

Non-square element with percentage radius

A non-square element with a single <percentage> value produces an arc of an ellipse.

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