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

В современной веб-дизайне и графике закруглённые углы — не просто модный тренд, а стандарт удобства и эстетики. Прямоугольники с плавными скруглениями используются в кнопках, карточках, баннерах, интерфейсах приложений и даже в печатной продукции. Adobe Photoshop, несмотря на свою многолетнюю историю, остаётся одним из самых мощных инструментов для создания таких элементов с точностью до пикселя. Многие пользователи, особенно новички, сталкиваются с трудностями: где найти нужный инструмент, как задать радиус скругления, почему углы не сглаживаются, или как изменить форму после создания. Эта статья подробно раскроет все способы создания прямоугольника с закруглёнными углами в Photoshop — от базового до продвинутого, с учётом актуальных версий программы на 2026 год.

Как создать прямоугольник с закруглёнными углами в Photoshop

Первый и самый надёжный способ — использовать инструмент «Прямоугольник» в режиме «Форма». Откройте Photoshop, создайте новый документ (Ctrl+N) и выберите инструмент «Прямоугольник» (U). В верхней панели инструментов появится панель параметров. Убедитесь, что активирована опция «Форма» (не «Пиксели» и не «Контур»). Теперь найдите поле «Радиус скругления» — оно находится справа от настроек формы. Введите нужное значение в пикселях: для веб-элементов достаточно 8–20 пикселей, для печати — 5–15.

Представьте, что вы создаёте кнопку для мобильного приложения. Если радиус будет слишком мал — углы выглядят резко, как в 2010-х. Если слишком большой — форма превратится в овал. Оптимальный баланс — 10–15 пикселей для экрана 1080p. Нажмите и удерживайте левую кнопку мыши, чтобы нарисовать прямоугольник. Удерживайте Shift, чтобы получить идеальный квадрат со скруглениями.

Если вы не видите поле «Радиус скругления», убедитесь, что вы действительно выбрали инструмент «Прямоугольник», а не «Прямоугольная область». Также проверьте, что в панели опций активна кнопка «Форма» — иконка с квадратом и точками по углам. Если вы случайно выбрали «Пиксели», скругление не появится — вы рисуете обычный прямоугольник, который потом невозможно скруглить без дополнительных манипуляций.

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

Один из главных мифов — что после рисования нельзя изменить радиус скругления. Это не так. Если вы создали прямоугольник как векторную форму (режим «Форма»), вы можете отредактировать его в любое время. Выберите слой с формой в панели слоёв. Затем снова активируйте инструмент «Прямоугольник» (U). На изображении появятся управляющие точки — кликните на одну из них, и вы увидите небольшой круглый значок рядом с углом. Перетащите его, чтобы визуально изменить радиус. Либо просто вернитесь в панель опций вверху — там по-прежнему отображается текущее значение радиуса. Измените его — и все углы мгновенно пересчитаются.

Если вы создали форму, но не помните, какое значение было задано, откройте панель «Свойства» (Window → Properties). Там вы найдёте все параметры формы: ширину, высоту, радиус скругления, цвет заливки и обводки. Это особенно полезно при работе с командой или в проектах с несколькими версиями одного элемента.

Для ещё большей гибкости можно использовать «Редактор формы»: дважды щёлкните по миниатюре слоя формы в панели слоёв — откроется панель с полным набором параметров. Здесь же можно задать разные радиусы для каждого угла! Включите опцию «Независимые углы» и введите разные значения для верхнего левого, верхнего правого и т.д. Это пригодится при создании дизайна с асимметричными элементами — например, карточек с вырезами или эффектом «разорванного» края.

Прямоугольник как форма или как слой пикселей

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

Если вы всё же случайно создали растровый прямоугольник, есть обходной путь: выберите слой, перейдите в меню «Выбор» → «Загрузить выбор из канала» (если вы использовали инструмент «Прямоугольная область»), затем примените фильтр «Размытие по Гауссу» с радиусом 1–2 пикселя, после чего используйте «Сглаживание» в «Выборе» → «Расширить» на 1–2 пикселя. Но это не точный метод — и не рекомендуется для профессиональной работы.

Частые ошибки и как их избежать

Ошибки при создании скруглённых прямоугольников в Photoshop — одни из самых распространённых среди новичков. Вот пять основных:

• Неправильный режим инструмента. Выбран «Пиксели» вместо «Форма» — результат не редактируем. Решение: всегда проверяйте панель опций перед рисованием.
• Забыли включить радиус. Поле «Радиус скругления» осталось в нуле. Решение: установите значение не менее 5 пикселей даже для минимального скругления.
• Создали форму, но не сохранили слой. Слои переименованы в «Layer 1», и вы не знаете, где оригинал. Решение: сразу переименовывайте слои — «Button-Rounded», «Card-Design».
• Применили стили до изменения формы. Стили (тень, обводка) не масштабируются вместе с формой. Решение: применяйте стили после финального размера формы.
• Использовали «Растрирование» без необходимости. Это уничтожает вектор. Решение: если нужно наложить фильтр — используйте «Преобразовать в смарт-объект» (Right-click → Convert to Smart Object).

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

Продвинутые техники: градиенты, тени и маски

После того как вы создали идеальный прямоугольник с закруглёнными углами, пора добавить глубину. Дважды щёлкните по слою формы — откроется панель «Стили слоя». Здесь вы можете:

• Добавить «Тень» — установите угол 120°, расстояние 4–6 пикселей, размытие 8–10, чтобы создать естественное падение тени.
• Применить «Градиентную заливку» — выберите градиент от белого к серому, чтобы создать эффект объёмной кнопки.
• Использовать «Обводку» — тонкая белая обводка (1–2 пикселя) улучшает контраст на темном фоне.
• Добавить «Свечение» — для эффекта «подсветки» при наведении курсора (в веб-дизайне).

Если вы создаёте сложный интерфейс, используйте маски. Добавьте маску слоя (кнопка внизу панели слоёв) и нарисуйте чёрный градиент на краю — это создаст плавный переход к фону. Особенно эффективно при работе с фонами из фотографий.

Для анимации в After Effects или Figma сохраните слой как смарт-объект. Это позволит экспортировать его в другие программы без потери качества. Также можно экспортировать прямоугольник как SVG: щёлкните правой кнопкой по слою → «Экспортировать как» → выберите формат SVG. Это стандарт для современных веб-разработчиков.

Экспертное мнение

Марина работает с командами, которые разрабатывают приложения для банков, медицинских сервисов и государственных порталов. Её принцип — «одинаковый радиус для всех элементов в рамках одного интерфейса». Это создаёт визуальную гармонию. Она использует предустановленные шаблоны с радиусом 12 пикселей для кнопок, 8 пикселей для полей ввода и 20 пикселей для карточек. Такой подход ускоряет работу в 3–4 раза и исключает человеческие ошибки.

Вопросы и ответы

Заключение

Создание прямоугольника с закруглёнными углами в Photoshop — простая задача, если вы знаете, как правильно использовать инструменты. Главное правило: всегда рисуйте в режиме «Форма», а не «Пиксели». Это гарантирует, что вы сможете изменять радиус, масштабировать элемент, применять стили и экспортировать в векторные форматы без потерь. Современные дизайн-системы требуют точности и повторяемости — и Photoshop предоставляет все инструменты для этого.

• Используйте инструмент «Прямоугольник» в режиме «Форма» — это единственный надёжный способ.
• Радиус скругления задаётся в пикселях до или после рисования — векторные формы редактируемы.
• Всегда сохраняйте исходный слой формы — не растрируйте без необходимости.
• Применяйте стили (тени, градиенты) только после финального размера формы.
• Для веб-дизайна экспортируйте как SVG — это стандарт для разработчиков.