Штирлиц — Сеть печатных салонов в Перми

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

Прямоугольник со скругленными углами: Прямоугольник со скруглёнными углами и Эллипс

Прямоугольник со скруглёнными углами и Эллипс

Автор Дмитрий Евсеенков На чтение 4 мин Просмотров 1.7к. Обновлено

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

Перейти на страницу стартового материала.

Первый инструмент в стеке векторных форм — это «Прямоугольник» (Rectangle Tool), подробная инструкция по работе с ним здесь.

В данном материале я расскажу о двух следующих инструментах векторных форм — Эллипсе и Прямоугольнике со скруглёнными углами.

Прямоугольник со скруглёнными углами (The Rounded Rectangle Tool)

Рассмотрим следующий инструмент в стеке инструментов формы Photoshop — это «Прямоугольник со скруглёнными углами» (The Rounded Rectangle Tool).

Выбор инструмента «Прямоугольник со скруглёнными углами».

 

«Прямоугольник со скруглёнными углами» очень похож на стандартный «Прямоугольник», за исключением того, что он позволяет нам добавлять к прямоугольнику закругления на углах. Значение округлости углов задаётся при помощи опции «Радиус» (Radius) в панели параметров. Чем выше значение, тем более округлыми становятся углы. Вы должны заранее установить значение опции «Радиус», прежде чем начнёте создавать вашу форму, так что я сейчас установлю его на 20 пикселей:

Используйте опцию «Радиус» (Radius), чтобы установить величину округлости углов.

 

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

Рисование прямоугольника со скруглёнными углами в Photoshop, методом протаскивания курсора, после установки значения радиуса углов в панели параметров.

 

Когда вы отпустите клавишу мыши, Photoshop завершит создание фигуры и заполнит её цветом:

Форма заполняется цветом, когда вы отпустите кнопку мыши.

 

Вот еще один пример прямоугольника с закругленными углами, на этот раз у меня значение радиуса установлено в 150 пикселей, что достаточно много в данном случае (радиус скругления больше половины высоты прямоугольника), так, что левая и правая стороны прямоугольника получились полностью изогнутыми:

Чем выше значение радиуса, тем больше скругление углов.

 

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

Все это означает, что рисование прямоугольников со скруглёнными углами является методом «проб и ошибок».

Если вы нарисуете такой прямоугольник и решите, что вам не нравится округлость углов, всё, что вы действительно можете сделать, это только отметить шаг, нажав Ctrl+Z и попытаться создать новый, предварительно задав другое значение радиуса скруглений в панели параметров.

Но в Photoshop CC редактирование скруглений уже возможно, и присутствуют другие приятные функции, об новшествах прямоугольника со скруглёнными углами в Photoshop CC подробно рассказано здесь.

Те же сочетания клавиш, которые мы узнали о для стандартного инструмента «Прямоугольник», также применяются и к «Прямоугольнику со скруглёнными углами». Применение клавиш Shift и Alt вместе или в отдельности позволит создавать правильный квадрат от угла или от центра.

Инструмент Эллипс (Ellipse Tool)

В Photoshop инструмент «Эллипс» позволяет нам создавать эллиптические или круглые формы. Я выберу его на панели инструментов:

Выбор инструмента «Эллипс» (Ellipse Tool)

 

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

Рисование эллиптической формы с помощью инструмента «Эллипс» (Ellipse Tool).

 

Отпустите кнопку мыши, чтобы завершить создание формы и Photoshop зальёт его выбранным цветом:

Заполненная цветом форма

 

Чтобы с помощью Ellipse Tool нарисовать круг правильной формы, во время протаскивания курсора зажмите клавишу Shift и отпустите её только после того, как закончите протаскивать курсор, т.е. точно по аналогии с созданием правильного квадрата инструментом «Прямоугольник». Чтобы начать рисовать эллиптическую форму от её центра, а не края, зажмите клавишу Alt:

Правильный круг, нарисованный инструментом «Эллипс» (Ellipse Tool).

 

В следующем материале я расскажу о двух оставшихся инструментах Photoshop — «Многоугольник» (Polygon Tool) и «Линия» (Line Tool), а также,о построении с помощью этих инструментов звёзд и указательных стрелок.

Создание квадратов и прямоугольников со скругленными углами с помощью инструмента «Прямоугольник со скругленными углами».

Руководство пользователя Отмена

Поиск

Последнее обновление Nov 15, 2022 09:23:12 AM GMT

  1. Руководство пользователя Illustrator
  2. Основы работы с Illustrator
    1. Введение в Illustrator
      1. Новые возможности в приложении Illustrator
      2. Часто задаваемые вопросы
      3. Системные требования Illustrator
      4. Illustrator для Apple Silicon
    2. Рабочая среда
      1. Основные сведения о рабочей среде
      2. Ускоренное обучение благодаря панели «Поиск» в Illustrator
      3. Создание документов
      4. Панель инструментов
      5. Комбинации клавиш по умолчанию
      6. Настройка комбинаций клавиш
      7. Общие сведения о монтажных областях
      8. Управление монтажными областями
      9. Настройка рабочей среды
      10. Панель свойств
      11. Установка параметров
      12. Рабочая среда «Сенсорное управление»
      13. Поддержка Microsoft Surface Dial в Illustrator
      14. Отмена изменений и управление историей дизайна
      15. Повернуть вид
      16. Линейки, сетки и направляющие
      17. Специальные возможности в Illustrator
      18. Безопасный режим
      19. Просмотр графических объектов
      20. Работа в Illustrator с использованием Touch Bar
      21. Файлы и шаблоны
    3. Инструменты в Illustrator
      1. Краткий обзор инструментов
      2. Выбор инструментов
        1. Выделение
        2. Частичное выделение
        3. Групповое выделение
        4. Волшебная палочка
        5. Лассо
        6. Монтажная область
      3. Инструменты для навигации
        1. Рука
        2. Повернуть вид
        3. Масштаб
      4. Инструменты рисования
        1. Градиент
        2. Сетка
        3. Создание фигур
      5. Текстовые инструменты
        1. Текст
        2. Текст по контуру
        3. Текст по вертикали
      6. Инструменты рисования
        1. Перо
        2. Добавить опорную точку
        3. Удалить опорные точки
        4. Опорная точка
        5. Кривизна
        6. Отрезок линии
        7. Прямоугольник
        8. Прямоугольник со скругленными углами
        9. Эллипс
        10. Многоугольник
        11. Звезда
        12. Кисть
        13. Кисть-клякса
        14. Карандаш
        15. Формирователь
        16. Фрагмент
      7. Инструменты модификации
        1. Поворот
        2. Отражение
        3. Масштаб
        4. Искривление
        5. Ширина
        6. Свободное трансформирование
        7. Пипетка
        8. Смешать
        9. Ластик
        10. Ножницы
    4. Быстрые действия
      1. Ретротекст
      2. Светящийся неоновый текст
      3. Старомодный текст
      4. Перекрашивание
      5. Преобразование эскиза в векторный формат
  3. Illustrator на iPad
    1. Представляем Illustrator на iPad
      1. Обзор по Illustrator на iPad.
      2. Ответы на часто задаваемые вопросы по Illustrator на iPad
      3. Системные требования | Illustrator на iPad
      4. Что можно и нельзя делать в Illustrator на iPad
    2. Рабочая среда
      1. Рабочая среда Illustrator на iPad
      2. Сенсорные ярлыки и жесты
      3. Комбинации клавиш для Illustrator на iPad
      4. Управление настройками приложения
    3. Документы
      1. Работа с документами в Illustrator на iPad
      2. Импорт документов Photoshop и Fresco
    4. Выбор и упорядочение объектов
      1. Создание повторяющихся объектов
      2. Объекты с переходами
    5. Рисование
      1. Создание и изменение контуров
      2. Рисование и редактирование фигур
    6. Текст
      1. Работа с текстом и шрифтами
      2. Создание текстовых надписей по контуру
      3. Добавление собственных шрифтов
    7. Работа с изображениями
      1. Векторизация растровых изображений
    8. Цвет
      1. Применение цветов и градиентов
  4. Облачные документы
    1. Основы работы
      1. Работа с облачными документами Illustrator
      2. Общий доступ к облачным документам Illustrator и совместная работа над ними
      3. Публикация документов для проверки
      4. Обновление облачного хранилища для Adobe Illustrator
      5. Облачные документы в Illustrator | Часто задаваемые вопросы
    2. Устранение неполадок
      1. Устранение неполадок с созданием или сохранением облачных документов в Illustrator
      2. Устранение неполадок с облачными документами в Illustrator
  5. Добавление и редактирование содержимого
    1. Рисование
      1. Основы рисования
      2. Редактирование контуров
      3. Рисование графического объекта с точностью на уровне пикселов
      4. Рисование с помощью инструментов «Перо», «Кривизна» и «Карандаш»
      5. Рисование простых линий и фигур
      6. Трассировка изображения
      7. Упрощение контура
      8. Определение сеток перспективы
      9. Инструменты для работы с символами и наборы символов
      10. Корректировка сегментов контура
      11. Создание цветка в пять простых шагов
      12. Рисование перспективы
      13. Символы
      14. Рисование контуров, выровненных по пикселам, при создании проектов для Интернета
    2. 3D-объекты и материалы
      1. Подробнее о 3D-эффектах в Illustrator
      2. Создание трехмерной графики
      3. Проецирование рисунка на трехмерные объекты
      4. Создание трехмерного текста
    3. Цвет
      1. О цвете
      2. Выбор цветов
      3. Использование и создание цветовых образцов
      4. Коррекция цвета
      5. Панель «Темы Adobe Color»
      6. Цветовые группы (гармонии)
      7. Панель «Темы Color»
      8. Перекрашивание графического объекта
    4. Раскрашивание
      1. О раскрашивании
      2. Раскрашивание с помощью заливок и обводок
      3. Группы с быстрой заливкой
      4. Градиенты
      5. Кисти
      6. Прозрачность и режимы наложения
      7. Применение обводок к объектам
      8. Создание и редактирование узоров
      9. Сетки
      10. Узоры
    5. Выбор и упорядочение объектов
      1. Выделение объектов
      2. Слои
      3. Группировка и разбор объектов
      4. Перемещение, выравнивание и распределение объектов
      5. Размещение объектов    
      6. Блокировка, скрытие и удаление объектов
      7. Копирование и дублирование объектов
      8. Поворот и отражение объектов
      9. Переплетение объектов
    6. Перерисовка объектов
      1. Кадрирование изображений
      2. Трансформирование объектов
      3. Объединение объектов
      4. Вырезание, разделение и обрезка объектов
      5. Марионеточная деформация
      6. Масштабирование, наклон и искажение объектов
      7. Объекты с переходами
      8. Перерисовка с помощью оболочек
      9. Перерисовка объектов с эффектами
      10. Создание фигур с помощью инструментов «Мастер фигур» и «Создание фигур»
      11. Работа с динамическими углами
      12. Улучшенные процессы перерисовки с поддержкой сенсорного ввода
      13. Редактирование обтравочных масок
      14. Динамические фигуры
      15. Создание фигур с помощью инструмента «Создание фигур»
      16. Глобальное изменение
    7. Текст
      1. Дополнение текстовых и рабочих объектов типами объектов
      2. Создание маркированного и нумерованного списков
      3. Управление текстовой областью
      4. Шрифты и оформление
      5. Форматирование текста
      6. Импорт и экспорт текста
      7. Форматирование абзацев
      8. Специальные символы
      9. Создание текста по контуру
      10. Стили символов и абзацев
      11. Табуляция
      12. Текст и шрифты
      13. Поиск отсутствующих шрифтов (технологический процесс Typekit)
      14. Обновление текста из Illustrator 10
      15. Шрифт для арабского языка и иврита
      16. Шрифты | Часто задаваемые вопросы и советы по устранению проблем
      17. Создание эффекта 3D-текста
      18. Творческий подход к оформлению
      19. Масштабирование и поворот текста
      20. Интерлиньяж и межбуквенные интервалы
      21. Расстановка переносов и переходы на новую строку
      22. Усовершенствования работы с текстом
      23. Проверка орфографии и языковые словари
      24. Форматирование азиатских символов
      25. Компоновщики для азиатской письменности
      26. Создание текстовых проектов с переходами между объектами
      27. Создание текстового плаката с помощью трассировки изображения
    8. Создание специальных эффектов
      1. Работа с эффектами
      2. Стили графики
      3. Создание тени
      4. Атрибуты оформления
      5. Создание эскизов и мозаики
      6. Тени, свечения и растушевка
      7. Обзор эффектов
    9. Веб-графика
      1. Лучшие методы создания веб-графики
      2. Диаграммы
      3. SVG
      4. Создание анимации
      5. Фрагменты и карты изображений
  6. Импорт, экспорт и сохранение
    1. Импорт
      1. Помещение нескольких файлов в документ
      2. Управление связанными и встроенными файлами
      3. Сведения о связях
      4. Извлечение изображений
      5. Импорт графического объекта из Photoshop
      6. Импорт растровых изображений
      7. Импорт файлов Adobe PDF
      8. Импорт файлов EPS, DCS и AutoCAD
    2. Библиотеки Creative Cloud Libraries в Illustrator 
      1. Библиотеки Creative Cloud Libraries в Illustrator
    3. Диалоговое окно «Сохранить»
      1. Сохранение иллюстраций
    4. Экспорт
      1. Использование графического объекта Illustrator в Photoshop
      2. Экспорт иллюстрации
      3. Сбор ресурсов и их массовый экспорт
      4. Упаковка файлов
      5. Создание файлов Adobe PDF
      6. Извлечение CSS | Illustrator CC
      7. Параметры Adobe PDF
      8. Информация о файле и метаданные
  7. Печать
    1. Подготовка к печати
      1. Настройка документов для печати
      2. Изменение размера и ориентации страницы
      3. Задание меток обреза для обрезки и выравнивания
      4. Начало работы с большим холстом
    2. Печать
      1. Наложение
      2. Печать с управлением цветами
      3. Печать PostScript
      4. Стили печати
      5. Метки и выпуск за обрез
      6. Печать и сохранение прозрачных графических объектов
      7. Треппинг
      8. Печать цветоделенных форм
      9. Печать градиентов, сеток и наложения цветов
      10. Наложение белого
  8. Автоматизация задач
    1. Объединение данных с помощью панели «Переменные»
    2. Автоматизация с использованием сценариев
    3. Автоматизация с использованием операций
  9. Устранение неполадок 
    1. Проблемы с аварийным завершением работы
    2. Восстановление файлов после сбоя
    3. Проблемы с файлами
    4. Поддерживаемые форматы файлов
    5. Проблемы с драйвером ГП
    6. Проблемы устройств Wacom
    7. Проблемы с файлами DLL
    8. Проблемы с памятью
    9. Проблемы с файлом настроек
    10. Проблемы со шрифтами
    11. Проблемы с принтером
    12. Как поделиться отчетом о сбое с Adobe
    13. Повышение производительности Illustrator

С помощью инструмента «Прямоугольник со скругленными углами» можно рисовать квадраты и
прямоугольники со скругленными углами.

  1. Щелкните по значку инструмента Прямоугольник со скругленными углами.

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

  3. Перетащите любой из угловых маркеров внутри фигуры, чтобы сделать их более или менее закругленными. 

  4. Чтобы изменить размеры фигуры, выберите объект и введите значения параметров Высота и Ширина на панели Свойства.

Вход в учетную запись

Войти

Управление учетной записью

Создавайте квадраты и прямоугольники со скругленными углами с помощью инструмента «Прямоугольник со скругленными углами».

Руководство пользователя Отмена

Поиск

Последнее обновление: 16 ноября 2022 г. 04:57:41 по Гринвичу

  1. Руководство пользователя Illustrator
  2. Знакомство с Illustrator
    1. Введение в Illustrator
      1. Что нового в Illustrator
      2. Общие вопросы
      3. Системные требования Illustrator
      4. Иллюстратор для Apple Silicon
    2. Рабочее пространство
      1. Основы рабочего пространства
      2. Учитесь быстрее с помощью панели Illustrator Discover
      3. Создание документов
      4. Панель инструментов
      5. Сочетания клавиш по умолчанию
      6. Настройка сочетаний клавиш
      7. Введение в монтажные области
      8. Управление монтажными областями
      9. Настройка рабочего пространства
      10. Панель свойств
      11. Установить предпочтения
      12. Сенсорное рабочее пространство
      13. Поддержка Microsoft Surface Dial в Illustrator
      14. Отмена изменений и управление историей дизайна
      15. Повернуть вид
      16. Линейки, сетки и направляющие
      17. Специальные возможности в Illustrator
      18. Безопасный режим
      19. Посмотреть работу
      20. Использование сенсорной панели с Illustrator
      21. Файлы и шаблоны
    3. Инструменты в Illustrator
      1. Обзор инструментов
      2. Инструменты выбора
        1. Выбор
        2. Прямой выбор
        3. Выбор группы
        4. Волшебная палочка
        5. Лассо
        6. Монтажная область
      3. Инструменты навигации
        1. Рука
        2. Повернуть вид
        3. Зум
      4. Инструменты для рисования
        1. Градиент
        2. Сетка
        3. Конструктор форм
      5. Текстовые инструменты
        1. Тип
        2. Введите путь
        3. Вертикальный тип
      6. Инструменты для рисования
        1. Перо
        2. Добавить опорную точку
        3. Удалить опорную точку
        4. Анкерная точка
        5. Кривизна
        6. Линейный сегмент
        7. Прямоугольник
        8. Прямоугольник со скругленными углами
        9. Эллипс
        10. Полигон
        11. Звезда
        12. Кисть
        13. Кисть-клякса
        14. Карандаш
        15. Формирователь
        16. Срез
      7. Инструменты модификации
        1. Поворот
        2. Отражение
        3. Весы
        4. Ножницы
        5. Ширина
        6. Свободная трансформация
        7. Пипетка
        8. Смесь
        9. Ластик
        10. Ножницы
    4. Быстрые действия
      1. Ретро-текст
      2. Неоновый светящийся текст
      3. Старый школьный текст
      4. Перекрасить
      5. Преобразование эскиза в вектор
  3. Illustrator для iPad
    1. Знакомство с Illustrator для iPad
      1. Обзор Illustrator для iPad
      2. Illustrator на iPad: часто задаваемые вопросы
      3. Системные требования | Иллюстратор на iPad
      4. Что можно и что нельзя делать в Illustrator на iPad
    2. Рабочая область
      1. Рабочая область Illustrator на iPad
      2. Сенсорные клавиши и жесты
      3. Сочетания клавиш для Illustrator на iPad
      4. Управление настройками приложения
    3. Документы
      1. Работа с документами в Illustrator на iPad
      2. Импорт документов Photoshop и Fresco
    4. Выбрать и расположить объекты
      1. Создать повторяющиеся объекты
      2. Смешивание объектов
    5. Рисование
      1. Рисование и редактирование контуров
      2. Рисование и редактирование фигур
    6. Тип
      1. Работа со шрифтом и шрифтами
      2. Создание текстовых рисунков вдоль контура
      3. Добавьте свои собственные шрифты
    7. Работа с изображениями
      1. Векторизация растровых изображений
    8. Цвет
      1. Применение цветов и градиентов
  4. Облачные документы
    1. Основы
      1. Работа с облачными документами Illustrator
      2. Общий доступ и совместная работа над облачными документами Illustrator
      3. Делитесь документами для ознакомления
      4. Обновление облачного хранилища для Adobe Illustrator
      5. Облачные документы Illustrator | Общие вопросы
    2. Устранение неполадок
      1. Устранение неполадок при создании или сохранении облачных документов Illustrator
      2. Устранение неполадок с облачными документами Illustrator
  5. Добавление и редактирование содержимого
    1. Рисование
      1. Основы рисования
      2. Редактировать пути
      3. Нарисуйте пиксельную графику
      4. Рисование с помощью инструментов «Перо», «Кривизна» или «Карандаш»
      5. Рисование простых линий и фигур
      6. Трассировка изображения
      7. Упростить путь
      8. Определение сетки перспективы
      9. Инструменты для работы с символами и наборы символов
      10. Настройка сегментов пути
      11. Создайте цветок за 5 простых шагов
      12. Перспективный рисунок
      13. Символы
      14. Рисование путей с выравниванием по пикселям для веб-процессов
    2. 3D-объекты и материалы
      1. О 3D-эффектах в Illustrator
      2. Создание 3D-графики
      3. Изображение карты поверх 3D-объектов
      4. Создать 3D-текст
    3. Цвет
      1. О цвете
      2. Выберите цвета
      3. Использование и создание образцов
      4. Настройка цветов
      5. Использование панели «Темы Adobe Color»
      6. Цветовые группы (гармонии)
      7. Панель цветовых тем
      8. Перекрасьте свою работу
    4. Покраска
      1. О покраске
      2. Краска с заливками и штрихами
      3. Группы быстрой заливки
      4. Градиенты
      5. Щетки
      6. Прозрачность и режимы наложения
      7. Применить обводку к объекту
      8. Создание и редактирование рисунков
      9. Сетки
      10. Узоры
    5. Выбрать и расположить объекты
      1. Выбрать объекты
      2. слоев
      3. Группировать и расширять объекты
      4. Перемещение, выравнивание и распределение объектов
      5. Объекты стека    
      6. Блокировка, скрытие и удаление объектов
      7. Копировать и дублировать объекты
      8. Вращать и отражать объекты
      9. Переплетение объектов
    6. Изменение формы объектов
      1. Обрезка изображений
      2. Преобразование объектов
      3. Объединить предметы
      4. Вырезать, делить и обрезать объекты
      5. Марионеточная деформация
      6. Масштабирование, сдвиг и искажение объектов
      7. Смешивание объектов
      8. Изменение формы с помощью конвертов
      9. Изменение формы объектов с эффектами
      10. Создавайте новые фигуры с помощью инструментов Shaper и Shape Builder
      11. Работа с динамическими углами
      12. Усовершенствованные рабочие процессы изменения формы с поддержкой сенсорного ввода
      13. Редактировать обтравочные маски
      14. Живые фигуры
      15. Создание фигур с помощью инструмента «Создание фигур»
      16. Глобальное редактирование
    7. Тип
      1. Добавление текста и работа с текстовыми объектами
      2. Создание маркированных и нумерованных списков
      3. Управление текстовой областью
      4. Шрифты и типографика
      5. Тип формата
      6. Импорт и экспорт текста
      7. Формат абзацев
      8. Специальные символы
      9. Создать тип по пути
      10. Стили символов и абзацев
      11. Вкладки
      12. Текст и введите
      13. Поиск отсутствующих шрифтов (рабочий процесс Typekit)
      14. Обновление текста из Illustrator 10
      15. Арабский и еврейский шрифт
      16. Шрифты | Часто задаваемые вопросы и советы по устранению неполадок
      17. Создать 3D текстовый эффект
      18. Креативный типографский дизайн
      19. Тип масштабирования и поворота
      20. Межстрочный и межсимвольный интервал
      21. Переносы и разрывы строк
      22. Улучшения текста
      23. Орфографические и языковые словари
      24. Формат азиатских символов
      25. Композиторы для азиатских сценариев
      26. Создание текстового оформления с помощью объектов смешивания
      27. Создание текстового плаката с помощью Image Trace
    8. Создание спецэффектов
      1. Работа с эффектами
      2. Графические стили
      3. Создать тень
      4. Атрибуты внешнего вида
      5. Создание эскизов и мозаик
      6. Тени, свечение и растушевка
      7. Краткое описание эффектов
    9. Веб-графика
      1. Лучшие методы создания веб-графики
      2. Графики
      3. СВГ
      4. Создание анимации
      5. Срезы и карты изображений
  6. Импорт, экспорт и сохранение
    1. Импорт
      1. Размещение нескольких файлов
      2. Управление связанными и встроенными файлами
      3. Информация о ссылках
      4. Невстроенные изображения
      5. Импорт изображения из Photoshop
      6. Импорт растровых изображений
      7. Импорт файлов Adobe PDF
      8. Импорт файлов EPS, DCS и AutoCAD
    2. Библиотеки Creative Cloud в Illustrator
      1. Библиотеки Creative Cloud в Illustrator
    3. Сохранить
      1. Сохранить работу
    4. Экспорт
      1. Использование иллюстраций Illustrator в Photoshop
      2. Экспорт обложки
      3. Сбор активов и экспорт в пакетах
      4. Файлы пакетов
      5. Создание файлов Adobe PDF
      6. Извлечь CSS | Иллюстратор CC
      7. Опции Adobe PDF
      8. Информация о файле и метаданные
  7. Печать
    1. Подготовка к печати
      1. Подготовка документов к печати
      2. Изменить размер и ориентацию страницы
      3. Укажите метки обрезки для обрезки или выравнивания
      4. Начните работу с большим холстом
    2. Печать
      1. Надпечатка
      2. Печать с управлением цветом
      3. Печать PostScript
      4. Предустановки печати
      5. Следы принтера и кровотечения
      6. Распечатать и сохранить прозрачную иллюстрацию
      7. Ловушка
      8. Печать цветоделения
      9. Печать градиентов, сеток и цветовых сочетаний
      10. Белая надпечатка
  8. Автоматизация задач
    1. Объединение данных с помощью панели переменных
    2. Автоматизация с помощью скриптов
    3. Автоматизация с действиями
  9. Устранение неполадок
    1. Проблемы со сбоями
    2. Восстановление файлов после сбоя
    3. Проблемы с файлами
    4. Поддерживаемые форматы файлов
    5. Проблемы с драйвером устройства GPU
    6. Проблемы с устройством Wacom
    7. Проблемы с файлом DLL
    8. Проблемы с памятью
    9. Проблемы с файлом настроек
    10. Проблемы со шрифтами
    11. Проблемы с принтером
    12. Отправить отчет о сбое с помощью Adobe
    13. Повышение производительности Illustrator

Инструмент «Прямоугольник со скругленными углами» позволяет рисовать квадраты и
прямоугольников со скругленными углами.

  1. Щелкните инструмент Прямоугольник со скругленными углами   .

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

  3. Перетащите любой из угловых маркеров в фигуре, чтобы сделать их более или менее закругленными.

  4. Чтобы изменить размеры фигуры, выберите объект и введите значения для Высота и Ширина в панели Свойства .

Войдите в свою учетную запись

Войти

Управление учетной записью

Закругленные углы и почему они никуда не делись

Поделиться

  • Поделиться
  • Твитнуть
  • Поделиться
  • Приколоть

Ресурсы Кит Брайант • 06 июня 2016 г. • 6 минут ПРОЧИТАТЬ

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

Закругленные углы приятны для глаз (и для мозга)

Нас научили доверять закругленным углам

Закругленные углы и когда их использовать

Кодирование закругленных углов: CSS3

HTML

CSS

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

Изображение

HTML

CSS

Вывод

Скругленные углы приятны для глаз (и для мозга)

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

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

Острые углы прерывают мысли. Чтобы визуализировать фигуру с острыми углами, мозг обрабатывает точку от А до точки В, делает небольшую паузу, а затем переходит от точки В к С и так далее, пока не завершит круг. В случае с прямоугольником вашему мозгу требуется 4 вычисления, чтобы распознать его. С закругленными углами резких пауз никогда не бывает, и ваш мозг выполняет только одно единственное вычисление, когда ваши глаза плавно сканируют его края.

Какой из них приятнее для глаз?

Нас научили доверять закругленным углам

Шел 1981 год, и Macintosh все еще находился на ранней стадии разработки. Местному мастеру графики Биллу Аткинсону только что удалось заставить свою ОС рисовать круги и эллипсы, и он гордился этим. Однако у Стива Джобса, отца Macintosh, была другая, более насущная просьба: прямоугольников со скругленными углами .

Для Джобса скругленные прямоугольники были дружественными, и он настаивал на том, что скругленные углы уже были повсюду. Джобс взял Аткинсона на прогулку, чтобы показать, что его просьба не была простой эстетической прихотью. Несколько круглых объектов и «Парковка запрещена» знак позже, Аткинсон был убежден.

Аткинсону удалось разработать необходимый код для рендеринга прямоугольников со скругленными углами с молниеносной скоростью. Кнопки и окна стали круглыми. Это помогло определить «безопасный» интерфейс Macintosh. Для клиентов Mac был более мягким и приветливым, что контрастировало с пугающей аурой продуктов IBM и Microsoft.

Наследие Apple со скругленными углами выходит за рамки программного обеспечения. Когда представили, iPhone был больше «карманный» , чем другие телефоны того времени. Точно так же iMac не был таким пугающим, как стандартный «персональный компьютер» того времени: Mac казался непринужденным другом; компьютер, мужчина в темном костюме.

Джобс понял. Apple понимает. Мы запрограммированы избегать острых предметов и не любим их.

Какой из них вы бы позволили своему 4-летнему ребенку потрогать?

Острые углы говорят, «Уходи», «Не трогай меня» или «Я тебя поцарапаю» ; закругленные углы говорят: «Можешь меня обнять». В детстве нас учили держаться подальше от ножей и острых предметов, потому что они могут причинить нам боль.

Нейробиологи называют наше отвращение к острым углам «реакцией избегания», или «предвзятостью контура». Мы склонны развивать негативное отношение к визуальному объекту на основе его семантического значения (например, «используется для резки») и эмоций, которые он вызывает (например, угроза, боль, страх) . Нашему современному мозгу тысячи лет, но мы до сих пор не переросли эту первобытную реакцию.

Закругленные углы и когда их использовать

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

Закругленные углы вызывают теплоту и доверие. По этой причине многие называют их «дружественными прямоугольниками» . Именно поэтому многие кнопки призыва к действию (также известные как кнопки «купить сейчас» или «зарегистрироваться») разработаны таким образом. Это заставляет клиентов чувствовать себя в безопасности при ведении бизнеса с брендом.

Удобная домашняя страница Wufoo позволяет вам чувствовать себя уверенно при ведении бизнеса с ними.

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

Кодирование закругленных углов: CSS3

Многие дизайнеры избегают использования CSS3 из-за его ограниченной совместимости с браузерами, особенно с IE. Тем не менее, есть основные свойства CSS3, которые уже работают во всех современных браузерах, включая IE 9 и выше. Одним из них является border-radius , который позволяет нам добавлять скругленные углы к элементу, просто указав радиус.

Радиус границы — одно из основных свойств CSS3, поддерживаемое большинством современных браузеров.

HTML

Разметка для блока состоит из одного div и двух классов. Класс коробки определяет размеры коробки, а класс закругленный имеет дело с углами.

<div class="закругленный прямоугольник">
   <p>Позволь мне не допускать препятствий к браку истинных умов</p>
</дел>

CSS

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

.коробка {
ширина: 200 пикселей;
высота: 150 пикселей;
цвет фона: #FC5D8A;
цвет: #fff;
поле: 3em авто;
}

.круглый {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
радиус границы: 10px;
}

По сути, используя border-radius , например, наложив четыре круга с радиусом 10 пикселей на углы блока и вырезав область переполнения, как показано на изображении ниже (щелкните его, чтобы просмотреть демонстрацию ) .

Поскольку браузеры постепенно внедряют совместимость с CSS3, некоторые из них предоставляют только экспериментальную поддержку, которую можно реализовать с помощью префиксов поставщиков . В нашем случае мы использовали -webkit для Safari и Chrome и -moz для Firefox. IE использует стандартное свойство без префикса.

Порядок имеет значение. Всегда ставьте актуальное CSS-свойство без префикса последним. Это гарантирует, что ваш код будет работать в будущем, когда браузеры, наконец, реализуют официальную поддержку этого свойства. Реальное свойство, как только браузер его поддержит, переопределит экспериментальные объявления над ним.

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

До появления CSS3 были углы карате. Дизайнер Кайл Шеффер популяризировал эту технику, в которой используется только одно изображение в формате PNG и не используются сценарии.

Изображение

Для этой демонстрации мы создадим оранжевый прямоугольник со скругленными углами. Чтобы создать 10-пиксельные закругленные углы, нам нужно сделать изображение круга диаметром 20 пикселей. Круг должен иметь тот же цвет, что и фон контейнера, например:

HTML

Код HTML сложнее, чем эквивалент CSS3, но все же достаточно прост. Здесь у нас есть внешний div для представления самой коробки и еще 4 внутри нее для представления углов. Пятый div служит оболочкой для текста.

<div class="круглая рамка">
    <div class="угол СЗ"></div>
    <div class="угол северо-восток"></div>
    <div class="угол ЮЗ"></div>
    <div class="угол ЮВ"></div>
    <div class="содержимое с закругленными углами">
        <p>Любовь – это не та любовь, которая меняется, когда ее находят изменения. </p>
    </дел>
</дел>

Класс NW представляет верхний левый угол коробки, NE — верхний правый угол, и так далее для SW и SE . Мы будем использовать CSS для размещения классов в каждом из углов контейнера.

УСБ 

.круглая коробка {
положение: родственник;
фон: #FC5D8A;
ширина: 100%;
}

.угол {
положение: абсолютное;
ширина: 10 пикселей;
высота: 10 пикселей;
фон: url('corners.gif') без повторов;
размер шрифта: 0%;
}

.rounded-box-content {
отступ: 10 пикселей;
}

.NW {
сверху: 0;
слева: 0;
фоновая позиция: 0 0;
}
.NE {
сверху: 0;
справа: 0;
фоновая позиция: -10px 0;
}
.SW {
внизу: 0;
слева: 0;
фоновая позиция: 0-10px;
}
.SE {
внизу: 0;
справа: 0;
фоновая позиция: -10px -10px;
}

При желании вы можете добавить несколько дополнительных стилей для настройки текста. Вот результат, аналогичный тому, что мы получили с помощью CSS3 (нажмите на изображение ниже, чтобы увидеть живую демонстрацию):

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

Оставить комментарий

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *