Как сделать суперэллипс в фотошопе
Давайте сыграем в игру. У нас есть два ряда знакомых всем пользователям iOS-иконок. На первый взгляд иконки сверху и снизу одинаковые. Но это не так. В одном ряду вы видите настоящие иконки, а в другом подделку.
Можете ли вы определить, где какие? Не торопитесь, посмотрите внимательно? Ну что, выбрали?
Настоящие иконки находятся сверху. Думаю многие из вас заметили, что с нижними иконками что-то не так. По какой-то причине их форма выглядят неаккуратно, будто где-то был отрезан лишний пиксель. Почему так происходит?
Дело в том, что поддельные иконки по форме — это квадраты с закруглёнными углами, ну и прямоугольник если говорить о серой подложке.
Но! В интерфейсе iOS нет ни одного квадрата с закруглёнными углами. Все элементы в iOS, это не квадраты и прямоугольники — это суперэллипсы!
Сегодня мы поговорим про секреты в дизайнах продуктов Apple. Что такое суперэллипс? В чём магия формы иконок? И почему HomePod — это суперяйцо.
Продукты Apple часто получаются противоречивыми и не лишенными недостатков. Но думаю никто не будет спорить, что в плане дизайна Apple заморачиваются наверное больше всех на рынке. И даже форма иконок в iOS взята не с потолка, а вычислена математически.
Она называется суперэллипсом или кривой Ламе, в честь математика Габриеля Ламе, который в 19 веке внёс большой вклад в теорию упругости, разработал общую теорию криволинейных координат, и придумал суперэллипсы. Что же это такое?
Это геометрическая кривая, которая строится при помощи уравнения вот такого вида:
Это уравнение задаёт замкнутую кривую, ограниченную прямоугольником. При этом меняя значение n мы можем регулировать степень выпуклости каждого угла (можно поиграться тут). При n меньше единицы, мы получаем вогнутые стороны, а форма напоминает звезду.
Увеличивая значение n, форма становится всё более выпуклой. При n=2 получается ровный круг. А при n равной 4 или 5 мы получаем привычную всем форму иконки.
У такой формы даже есть своё название — сквиркл. И, нет, сквиркл — это не ваш любимый раздел на PornHub. Это производное от слов square и circle. Т.е. по русски сквиркл — это квадрокруг или квадратный круг.
Кстати, формула описывающая иконку iOS выглядит вот так:
Т.е. иконка в iOS — это и не круг и не квадрат, а математически — это что-то среднее между ними.
Кольцо и суперяйцо
Историческая справка. Популяризировал суперэллипсы и сквирклы датский ученый Пит Хейн. В 60-х годах он спроектировал транспортное кольцо в Стокгольме в виде суперэллипса со значениями n = 2.5, a/b = 6/5.
Форма развязки стала хитом. И он начал делать, столы, посуду, но вершиной его творчества стало суперяйцо. Как понимаете — это трёхмерный суперэллипс, по форме похожий на яйцо.
Кстати, трехмерные суперэллипсы — это суперэллипсоиды. А всякие неправильные суперэллипсоиды — это суперквадрики.
Непрерывность кривизны
Но вернёмся к иконкам! Чем всё-таки квадрокруг отличается от скругленного квадрата? И чем он не угодил дизайнерами Apple? Давайте посмотрим!
Если сравнить настоящие иконки с фейковыми, мы увидим, что закругление у квадрокруга начинается раньше и степень закругления нарастает постепенно.
Лучше всего это можно визуализировать при помощи вот таких гребней кривизны.
Казалось бы, разница — пара пикселей. Но плавные переходы, позволяют добиться так называемой непрерывности кривизны. И это даёт потрясающий эффект — форма объекта из искусственной, как бы собранной из разных форм становится естественной и завершенной.
Именно поэтому Apple очень активно использует суперэллипсы не только в интерфейсе, но и в дизайне всех своих продуктов.
Mac Mini, Apple TV, iPhone, iPad, MacBook и конечно HomePod — своего рода всё это суперэллипсы. Даже в их новом кампусе нет ни одной прямой стены.
Плавное перетекание форм и отсутствие резких переходов делает продукты Apple не только привлекательными внешне. На этот счёт есть отличная статья Николая Геллара, которую я процитирую:
Вместо того, чтобы напоминать нам о промышленных цепочках поставок, конвейерном производстве и химических лабораториях, эти более мягкие формы напоминают о красоте природы. Это кажется органичным и вызывает приятные ощущения.
Например если сравнить по дизайну HomePod и Яндекс.Станцию, становится понятно в почему станция выглядит менее привлекательно, её как будто только выпустили с завода. А HomePod будто нашел в своём саду японский мастер суйсэки — искусства любования камнями.
Хотя сама Яндекс.Станция — девайс отличный. А HomePod красивый, но туповатый (русского не знает).
Примеры
Но, конечно, Apple тоже не сразу к этому пришли. Например, иконки и другие элементы интерфейса стали суперэллипсами только в начиная с iOS 7.
Такая же история с Apple Watch. В Series 4 увеличили не только дисплей, но и обновили форму. Да-да, Apple Watch с четвёртой версии это тоже — суперэллипс (как сам экран).
Другие компании
Естественно, не только Apple играется с суперэллипсами. Те же иконки в One UI на смартфонах Samsung, гораздо более явные квадрокруги, чем у Apple. Но, на мой взгляд, у Samsung выбранная форма не работает.
Но это не самое главное. Основная проблема в интерфейсе Samsung. Я говорю про отсутствие единства. Плавные суперэллипсы тут соседствуют с грубоватыми скруглёнными. Как внутри интерфейса так и в дизайне самих девайсов.
А именно единство подхода начиная от самого простого элемента интерфейса, заканчивая дизайном всей линейки продуктов, делает устройства Apple такими привлекательными и доставляющими в использовании. Да, наверное, это звучит рекламно. Но, мне пофиг, просто хочется отдать должное дотошности подхода ребят из Купертино.
Эти чуваки показали миру, что красивыми могут быть не только автомобили и предметы роскоши, но обычные ноутбуки и и телефоны. Поэтому вся техника сейчас так круто выглядит.
Узнайте, как создавать фигуры на холсте и использовать функцию «Свойства интерактивной формы» для взаимодействия с фигурами.
В Photoshop предусмотрена удобная функция рисования и редактирования векторных фигур. Также можно преобразовать векторную фигуру в растровую или пиксельную.
Выполните эти быстрые действия для создания фигур в Photoshop:
Выберите инструмент «Фигура»
На панели инструментов, нажмите и удерживайте значок группы инструментов Фигура (), чтобы вызвать различные варианты инструмента «Фигура» — Прямоугольник, Эллипс, Треугольник, Многоугольник, Линия и Произвольная фигура . Выберите инструмент для рисования нужной фигуры.
Настройка параметров инструментов группы «Фигура»
На панели параметров инструментов группы «Фигура» можно задать следующие настройки:
- Режим : задайте режим для инструмента «Фигура» — Фигура, Контур и Пиксели .
- Заливка : выберите цвет заливки фигуры.
- Обводка : выберите цвет, ширину и тип обводки фигуры.
- Ш и В : вручную задайте ширину и высоту фигуры.
- Операции с контуром : используйте операции с контуром для настройки взаимодействия фигур друг с другом.
- Выравнивание контура : используйте этот параметр для выравнивания и распределения компонентов фигуры.
- Упорядочение контура : используйте этот параметр для настройки порядка расположения создаваемых фигур.
- Дополнительные параметры фигур и контуров : щелкните значок шестеренки () для доступа к дополнительным параметрам фигур и контуров, чтобы задать такие атрибуты, как ширина и цвет отображаемого на экране контура, и параметры соблюдения пропорций при рисовании фигур.
Рисование фигуры
Чтобы нарисовать фигуру, выберите нужный инструмент группы «Фигура», затем щелкните кнопку мыши и перетащите указатель мыши на холсте. При этом автоматически создается новый слой-фигура на панели «Слои».
- Удерживайте клавишу Shift во время рисования, чтобы сделать фигуры пропорциональными.
- Выбрав слой-фигуру, используйте инструмент Перемещение , чтобы перемещать фигуру и менять ее расположение на холсте.
- Чтобы легко масштабировать, трансформировать или поворачивать фигуру, выберите Редактирование > Свободное трансформирование или нажмите клавиши Control+T (Win) / Command+T (Mac).
Редактирование свойств фигуры
Можно легко редактировать свойства фигуры прямо с помощью элементов управления на холсте или с помощью раздела Свойства фигуры на панели Свойства . Элементы управления на холсте позволяют взаимодействовать с фигурами на более интуитивном уровне.
Можно использовать элементы управления трансформированием и скруглением на холсте для коррекции внешнего вида фигуры. Модификаторы клавиатуры будут управлять трансформированием на холсте так же, как при использовании инструмента Трансформирование в Photoshop. Можно изменять радиус всех углов прямоугольника одновременно: удерживайте клавишу Alt (Win) или Option (Mac) во время перетаскивания для изменения радиуса одного угла. У треугольников изменяются все углы, даже если перетащить только один из них. С легкостью поворачивайте фигуру с помощью маркера поворота на холсте, который появляется при наведении курсора мыши на фигуру.
Щелкните значок сброса () на панели «Свойства», чтобы сбросить сразу все изменения.
Нарисуйте фигуру и используйте элементы управления на холсте, чтобы легко редактировать ее свойства.Нарисовав фигуру, можно щелкнуть любую точку холста, чтобы вызвать всплывающее диалоговое окно Создание фигуры и изменить параметры фигуры.
Те, кто создавал программы для IOS, рано или поздно сталкивались с тем, что нужно рисовать иконки для IPhone. Кто-то копирует дизайн интерфейсов IPhone. И тем, и тем первое, что нужно делать в этом деле - это нарисовать форму для иконки.
С чего началось
В интернете я случайно наткнулся на материал ребят из Droider. Их материал. Так как я знаю про IPhone с 2006 года (год появления первого IPhone), то мне было интересно как происходят иконки современных iOS. Так как я увлекаюсь и занимаюсь программированием, то создание приложений для IPhone возможно был бы вопросом времени. Касательно иконок iOS, они не просто рассказывали как происходят суперэллипсы, они показали формулу рисования иконок iOS.
Инструмент для рисования суперэллипсов
После этого я искал инструменты, которые рисуют суперэллипсы по формуле, введенной пользователем. Я вбил этот запрос в Google. По первой попавшейся ссылке я нашел нужный инструмент. Плюс этого инструмента заключается в том, что нарисованный по формуле суперэллипс можно экспортировать в векторный файл SVG, что облегчает дизайнерам иконок iOS-приложений задачу в рисовании формы. Значения A и B - 60. Степень N равна 5.
Получился суперэллипс аля иконки iOS. Инструмент
Что дальше?
Скаченный SVG-файл можно открыть в любом редакторе векторной графики. Я проверял на CorelDRAW и Inkscape. В вышеперечисленных программах возможно поработать с суперэллипсом для иконки. Но в CorelDRAW список слоёв полностью видит все слои, а в списке слоёв Inkscape слоёв как будто нет слоёв.
Если вы собираетесь писать приложение для iOS, то этот способ сделать форму иконок для IPhone будет простым и соответственно экономит вам время.
Сегодня я покажу вам, как создать панораму, используя алгоритмы Photoshop CS5. А затем, кто заинтересован в фотоманипуляциях, покажу, как создать сцену апокалипсиса с метеоритами и дымом. Вы можете использовать мои изображения или ваши фото. Если вы решили сами сделать панораму, не забывайте использовать штатив и фотографировать последовательно.
Материалы для урока:
Думаю, урок вам понравится!
Шаг 1. Для этого урока я применил свои личные фото. Вы можете использовать свой набор фото и сделать из них панораму подобно тому, как я покажу в следующих шагах. Вот мои фотки. Я использовал штатив, чтобы сделать их, что и вам рекомендую сделать.
Шаг 2. Теперь откройте Adobe Bridge в Photoshop: File > Browse in bridge (Файл > Обзор через bridge). Найдите ваши фотографии и затем там же нажмите Tools > Photoshop > Photomerge (Инструменты > Photoshop > Объединить фото)
Шаг 3. В появившемся окне примените настройки, как у меня:
Шаг 4. После окончания обработки у вас получиться что-то вроде того, что ниже. Сейчас я обрежу картинку, так как нам нужно ровное, прямоугольное изображение. Поэтому возьмите Crop Tool (Кадрирование) и оставьте вот этот участок:
Шаг 5. Если вы посмотрите в окно со слоями, то увидите, что каждая часть панорамы на отдельном слое и с использованием маски. Объединим все эти слои (Shift+Ctrl+E или Ctrl+Клик л.к.н. по каждому из слоёв > Клик п.к.н. по всем > Merge layers(Объединить слои)) и переименуйте новый слой в “background”:
Шаг 6. Перейдите в image > adjustments > brightness/contrast (Изображение > Коррекция > Яркость/Контрастность) и установите Contrast (контрастность) на 30, затем продублируйте слой “background” (Ctrl+J).
Шаг 7. Теперь нам нужно обесцветить новый слой, Image > adjustments >hue and saturation (Изображение > Коррекция > Цветовой тон и насыщенность) или просто Ctrl+U и переместите насыщенность (saturation) на -100. Затем установите Режим наложения слоя (Blending mode) на Замена тёмным (Darken).
Шаг 8. Теперь откройте изображение с морем и увеличьте его открыв Image > Image size (Изображение > Размер изображения) и изменив resolution на 800 px/inch. Далее, вырежьте небо с помощью rectangle marquee tool (Прямоугольная область выделения) и нажмите Ctrl+X. Вставьте небо в документ с панорамой (Ctrl+V) и измените его масштаб в размер холста (Ctrl+T), затем переименуйте новый слой и назовите его “Sky”.
Шаг 9. Создайте маску для слоя с небом и используя линейный (linear) градиент (gradient tool) от переднего плана до прозрачного, рисуйте по маске, как на рисунке ниже.
Шаг 10. Продублируйте слой с небом (“Sky”). Обесцветьте слой дубликат (Ctrl+U > Saturation (Насыщенность) на -100) и измените режим наложения слоя на Multiply (Умножение), затем объедините слои с небом в один (Выберите их > клик п.к.н. > merge layers (Объединить слои).
Шаг 11. Теперь у нас снова один слой с небом, поэтому снова переходим в Цветовой тон / Насыщенность (Hue / Saturation) нажатием Ctrl+U. Установите Цветовой тон (Hue) на -20 и Насыщенность (Saturation) на -20. Потом, измените режим наложения слоя на Умножение (Multiply) и непрозрачность на 90%.
Шаг 13. Теперь сделайте двойной клик л.к.м. для вызова стилей слоя. Используйте мои настройки для Внутренней тени (Inner Shadow) и Перекрытия градиентом (Gradient Overlay) (Переместите градиент в нижнюю часть дыма).
Примечание переводчика. Чтобы переместить градиент, при включенном окне с «Перекрытие градиентом» наведите курсор на дым. Когда курсор измениться тащите жёлтое пятно.
Шаг 14. Теперь добавим чёрного дыма. Создайте новый слой и назовите его “smoke 1”. Используя кисть “Smoke 2” из того же набора, с теми же цветами что и для “Smoke 1”, нарисуйте дым, меняя размер кисти от меньшего до большего. Сделайте как на рисунке ниже. Затем сделайте двойной клик л.к.н. по слою в палитре для вызова стилей слоя. Премините перекрытие градиентом с моими настройками:
Шаг 15. Теперь на очереди у нас создание главного метеорита, который будет выглядеть очень круто. Начните рисовать так же, как и предыдущие метеориты, используя кисть “Smoke 1” и те же цвета. Рисуйте на новом слое (назовите его “main fireball”) и не забывайте менять размеры кистей!
Шаг 16. Добавьте к этому слою те же стили, что и в шаге 13, но немножко измените настройки (примените мои или создайте свои)
Шаг 17. Добавим дыма, с такими же настройками, как в шаге 14. Создайте новый слой под слоем “main fireball” и назовите его “smoke 2” (используйте кисть “Smoke 2”). После этого, установите режим наложения слоя на Жёсткий свет (Hard light).
(нажмите на изображение, чтобы увеличить)
Шаг 18. Нам нужно ещё больше метеоритов, больших и маленьких. Теперь вы знаете, как это сделать, поэтому творите, используя разнообразные настройки, разные градиенты и т.п. Сверяйтесь со мной, разбирайтесь, это не так сложно, просто повторите действия предыдущих шагов.
Шаг 19. Сейчас я покажу вам, как сделать метеорит «пролетающим сквозь» здание. На новом слое нарисуйте метеорит кистью “Smoke 1”. Затем возьмите инструмент Многоугольное лассо (Polygonal lasso tool) выделите нужную часть здания, а затем удалите из слоя с метеоритом выделенную зону. Затем примените к метеориту те же стили, что и для других.
Шаг 20. Теперь добавим дыма (используя кисть “smoke 2”), как у меня. Затем примените стили такие же как и для слоя “smoke 1” и у вас должно получиться что-то подобное моему результату:
(нажмите на изображение, чтобы увеличить)
Шаг 21. Объедините три слоя фона (“background”, “background copy” и “sky”): Выберите их > Ctrl+E. Переименуйте получившийся слой в “background”. Теперь, приблизьте здание с башней, которая с правой стороны и, используя инструмент Многоугольное лассо (polygonal lasso tool), создайте выделение, как у меня, затем сделайте клик п.к.н. по выделению, и выберите скопировать на новый слой (layer via copy). Назовите новый слой “tower”.
Шаг 22. Нам снова понадобиться выделение башни, поэтому удерживая Ctrl, нажмите на миниатюру слоя “tower”, что создаст быстрое выделение. Сделайте слой с башней невидимым и перейдите на слой “background”. Возьмите инструмент клонирования (clone tool) и заполните выделение (используйте места для клонирования, чтобы выбрать место клонирования, удерживая Alt, кликните по области, которую хотите скопировать).
Шаг 23. Нарисуйте на новом слое метеорит с теми же настройками, что и всегда.
(нажмите на изображение, чтобы увеличить)
Шаг 24. Сделайте слой с башней видимым, затем поверните и передвиньте его (Ctrl+T), как на картинке ниже. Далее добавьте дыма на новом слое, под слоем с метеоритом, используя те же стили, что и в слое “smoke 1”.
Шаг 25. Добавьте ещё больше метеоритов в ваше изображение. Наше изображение станет ещё более креативным, если мы добавим несколько эффектов.
Шаг 26. Теперь можно добавить «искры», поэтому создайте новый слой и назовите его “flames”. Возьмите кисть “Smoke 2” и рисуйте, как я. Далее, добавьте слою стили такие же, как и в любом из метеоритов и поменяйте перекрытие градиентом на эти (убедитесь, что возле реверсировать (invert) стоит галочка):
Шаг 27. Установите белый - цвет переднего плана и чёрный – заднего плана. Нарисуйте кистями “Smoke 1” и “Smoke 2” дымную завесу. Применяйте разные размеры и разную непрозрачность, будьте креативным и старайтесь сделать всё как у меня или даже круче. Новый слой назовите “main smoke” и поместите его выше всех других. Затем поменяйте режим наложения слоя на Жёсткий свет (Hard light).
Шаг 28. Выберите все слои и продублируйте их, затем объедините все дубликаты, назовите получившийся слой “all layers”. Поместите его выше всех других. Измените режим наложения слоя на Мягкий свет (Soft light).
(нажмите на изображение, чтобы увеличить)
На этом всё! Надеюсь, этот урок был полезен.
(нажмите на изображение, чтобы увеличить)
Читайте также: