Connect with us

Дизайн и прототипирование

Sketch туториал для iOS разработчиков

Готовьтесь улучшить свои дизайнерские навыки!

SwiftBook

Опубликовано

/

     
     

Будучи iOS разработчиком, я работал в нескольких проектах без дизайнера, и это, надо сказать, очень тяжело.

Но в процессе работы я понял, что для такого рода проектов, даже если вы работаете без дизайнера, дизайн очень важен — особенно сами итерации по дизайну.

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

Выбираете безопасный подход? Сначала определитесь с дизайном, потом пишите код.

Но как вы можете создать дизайн без дизайнера?! Отличный вариант – это Sketch (Скетч).

Sketch – отличный инструмент для создания логотипов и пользовательских иконок. Он векторный, а значит вы можете изменять размер без потери качества. Так как он включает Artboards (полотна) по размеру устройств iPhone и встроенный шаблон UIKit, то вы можете также использовать Скетч для создания макетов для итерации дизайна. Кроме того, Скетч достаточно прост для того, чтобы занятый разработчик быстро ухватил его суть.

В этом туториале вы узнаете, как:

  • Создать макет, используя шаблон UIKit.
  • Создать иконки с помощью Vector Tool.
  • Создать иконки, комбинируя основные фигуры.
  • Экспортировать изображения в Xcode.

А что лучше всего, это то, что вам будет интересно, даже, если вы уже разработчик, как я. Готовьтесь улучшить свои дизайнерские навыки!

2

Поехали!

Перво-наперво, вам нужен будет Sketch. Скачайте 14-дневную пробную версию на www.sketchapp.com. Активация лицензии стоит $99.

После того как вы установите Sketch, откройте его и расслабьтесь, вам предстоит интересное путешествие!

Далее я покажу вам, как использовать различные элементы пользовательского интерфейса в Sketch и вы сможете создавать различные элементы. Обратите внимание, что все, что вы делаете – это только обучение. После того, как вы создали что-то, вы можете это безопасно удалить, ведь дальше в туториале вам это уже не понадобится.

Итак приступим!

Шаблоны

Шаблон iOS UI Design представляет собой коллекцию компонентов UIKit в векторном формате. У него есть Tab Bar, Nav Bar, Table View, и многое другое. Вы можете использовать его в качестве “плацдарма” для создания макетов.

Давайте приступим. Выберите File\New From Template\iOS UI Design , и вы увидите следующее:

3

Обратите внимание, что существует опция Material Design для пользователей Android.

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

Artboards

Вы можете рисовать в любом месте бесконечного полотна Скетча, но если вы создаете тестовый шаблон приложения с несколькими экранами, то вам нужно использовать Artboards. Artboards организует слои внутри зафиксированного фрейма. Когда вы экспортируетеArtboards, все внутренние слои объединяются в один файл. Представляйте их как сцены View Controller на Storyboard.

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

  • С зажатым пробелом перетаскивайте курсор до тех пор, пока у вас не появится чистая площадь холста на экране.
  • Нажмите кнопку Insert и выберите Artboard из списка.
  • На правой панели выберите iPhone 6.
[icon-box icon=star-full width=1] Данное изображение и некоторые другие изображения в этой статье взяты из старой версии шаблона iOS UI. Хотя расположение элементов пользовательского интерфейса может поменяться, но инструкции туториала применимы.
[/icon-box]

4

Вы должны увидеть пустую Artboard под названием “iPhone 6” в портретном формате. По умолчанию, вновь созданная Artboard охватывает любые свободно плавающие элементы, которые она перекрывает. Если вам это не нужно, просто очистите холст.

Вы можете добавить столько Artboard, сколько вам нужно. У Скетча есть размеры для iPhone, Apple Watch, и даже для iPad Pro. Если вам когда-нибудь понадобится избавиться от Artboard, просто нажмите на название и нажмите “удалить”.

[icon-box icon=star-full width=1] Если вам нужна Artboard произвольного размера, вы выбираете Insert\Artboard , а затем растягиваете границы на любую длину на вашем холсте.
[/icon-box]

Скопировать и вставить

Теперь, когда у вас есть Artboard, перетащите несколько элементов из шаблона UIKit. Начните с Navigation Bar (панели навигации), Tab Bar (панели вкладок) и Table View Cell (ячейки таблицы).

Хотя в Скетче вы можете просто скопировать и вставить (⌘C и ⌘V), трудно предсказать, где вставленный элемент будет в конечном итоге. Вместо этого Option-Drag элемент, и ваша копия будет там, где ваша мышка ее оставит.

5

[icon-box icon=star-full width=1]

Сочетание клавиш ⌘D дублирует предыдущее действие. Option-Drag с ⌘D удобная комбинация для создания нескольких копий:

  • Option-Drag -ячейки таблицы непосредственно под собой
  • Спамьте ⌘D для создания оставшихся ячеек.
[/icon-box]

Основные фигуры

Во-первых, создайте для работы новую Artboard при помощи Insert\Artboard и нарисуйте квадрат в любом месте на холсте.

Теперь, давайте создадим несколько фигур! Нажмите Insert\Shape, чтобы открыть меню доступных опций.

6

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

  • L : линия
  • O : овал
  • T : текст
  • R : прямоугольник

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

7

[icon-box icon=star-full width=1] Удерживайте клавишу Shift при перетаскивании, чтобы пропорционально растягивать фигуры, например квадраты и круги.
[/icon-box]

Стилизация формы

Фигуры готовы, но клиент не будет впечатлен, если они красиво не оформлены! Вы можете использовать Inspector справа для изменения свойства слоя, например его цвета и радиуса границы. Инспектор можно сравнить с Attributes Inspector в Xcode.

8

Вот некоторые опции, с которыми вы познакомитесь в этом уроке:

  • Position/Size (Положение / Размер): Когда трудно перетащить мышкой в какое-то конкретное место, введите точное число. Нажмите на иконку замка, чтобы сохранить пропорциональность.
  • Radius (Радиус): Это слайдер для регулировки углового радиуса прямоугольника.
  • Opacity (Непрозрачность): Полезная фишка, помогающая отследить изображения. Подробнее поговорим об этом позже!
  • Fills (Заливка): Используйте “пипетку” для выбора цвета, чтобы изменить цвет заливки слоя, или снимите флажок и у вас будет прозрачная заливка.
  • Borders (Границы): Установите толщину и цвет границы, или отключите эту опцию полностью.
[icon-box icon=star-full width=1] Скетч имеет встроенную “пипетку” для выбора цвета, ее можно активировать с помощью Control-C. Она работает не только за пределами окна в Скетче, она автоматически устанавливает цвет выбранного фигуры.

9

[/icon-box]

 

Две иконки этого туториала используют pill shape (форму таблетки) в качестве строительного блока. Попробуйте создать сами одну из прямоугольника:

  • Создайте прямоугольник, используя горячую клавишу R.
  • Скруглите углы, установив Radius (радиус) на большое значение, например 100

10

Вы также можете изменить некоторые другие настройки, как упоминалось выше.

Список слоев

Laye List в левой части панели содержит все слои в файле. Слои, которые появляются в списке выше, перекрывают нижние. Это похоже наView Hierarchy в Storyboard.

Groups организуют слои логически. Вы также можете переместить несколько слоев, как единое целое, если они сгруппированы вместе. Вы также можете экспортировать группу слоев в одном изображении. В Layer List, группы представлены в виде иконок папок.

Вот список наиболее распространенных сочетаний клавиш для управления Layer List:

  • ⌘G : Группирует фигуры вместе. Используйте ⌘-Shift-G для их разгруппировки.
  • ⌘R : Переименовывает выбранный элемент.
  • ⌘-Option-Up/Down : Перемещает элемент вверх или вниз в списке слоев.
  • ⌘-Shift-L : Блокирует слой для того, чтобы он стал некликабельным. В следующем разделе мы покажем его пользу.

11

[icon-box icon=star-full width=1] Считается хорошей привычкой переименовывать слои в нечто значимое, например “Tab Bar”. После того, как он будет завален другими слоями, вы сможете легко найти его в списке слоев. Вы можете использовать ⌘-Option-Up для того, чтобы переместить его на передний план. Старайтесь не пользоваться простым перетаскиванием, потому что это может перемешать порядок слоев и вы непреднамеренно можете их сгруппировать. Поверьте, иногда это случается
[/icon-box]

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

Vector Tool

Рисование кругов, квадратов и линий — это, конечно, весело, но довольно ограничивающе. Но с Vector Tool вы сможете нарисовать любую форму, которую вы захотите!

Фигуры с прямыми линиями

Вы можете нарисовать любой многоугольник, просто “кликом”: точки, там где вы кликаете будут углами фигуры.

Давайте сделаем многоугольник:

  1. Нажмите V для активации Vector Tool.
  2. Начните, кликая там, где будут углы трапеции.
  3. Закройте контур фигуры, кликнув на исходную точку.
  4. Нажмите кнопку Edit, и передвигайте точки индивидуального вектора так как вам нравится, чтобы изменить фигуру.
  5. Добавьте Fill.
  6. Удалите Border.

12

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

Вращение копии

Обычная трапеция – простая фигура, но вы можете использовать ее, чтобы получить другие фигуры с помощью функции Rotate Copies(вращать копии). Rotate Copies создает несколько копий фигуры и располагает их вееером по кругу, как лепестки цветка. Давайте попробуем:

  1. Выберите Layer\Paths\Rotate Copies.
  2. Создайте 3 копии (вместе с первоначальной их должно быть 4).
  3. Перетащите белую точку, которая представляет собой центр круга, чтобы создать иконки такие как банковские логотипы, сюрикены, или вертушки.

13

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

Ножницы

Прямо над Rotate Copies есть еще одна дополнительная опция в меню, которая называется Scissors (ножницы). Здесь вы можете посмотреть, как легко можно создать индикатор активности WatchKit с помощью инструмента Ножницы:

  1. Создайте круг (для его создания используйте клавишу O удерживайте Shift + клик).
  2. Удалите Fill (Заливку).
  3. Увеличьте толщину Border (рамки) до 25.
  4. Выберите Layer\Paths\Scissors.
  5. Отрежьте сегмент круга, нажав на его верхнюю левую часть.
  6. Рядом с Borders, нажмите на кнопку Gear (шестеренка), чтобы увидеть всплывающее меню.
  7. Выберите опцию rounded ends (закругленные края).

14

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

[icon-box icon=star-full width=1] Вы можете сделать длину кольца любой, просто добавив дополнительную точку на окружности, прежде чем отрезать. Чтобы сделать это, нажмите кнопку Edit и однократно кликните в любом месте по направляющей круга.
[/icon-box]

Режимы и рычажки

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

Но постойте – прямоугольник также имеет четыре векторные точки. Что происходит? Разница между ними состоит в использовании кривых Безье.

15

Bezier Curves – это линии, которые вы можете согнуть в кривые, используя control points (контрольные точки). Скетч называет эти контрольные точки handles(рычажки). Каждая векторная точка идет с двумя рычажками, которые контролируют кривизну каждой стороны. Это означает, что кривизна линии определяется рычажком на каждом из ее концов. Это не так сложно, как кажется: в Скетче вы просто двигаете рычажки, пока кривая не будет выглядеть как вам нужно.

Скетч определяет четыре различных Modes (режимы) на основе положений рычажков векторной точки.

16

  • Straight (Прямой): Рычажки идут по сторонам от векторной точки, как если бы их не было совсем. Нет рычажков – нет кривизны.
  • Mirrored (Зеркальный): Рычажки имеют одинаковую длину и образуют прямую линию, как крылья самолета. Используйте это режим, чтобы создавать симметричные кривые.
  • Asymmetric (Асимметричный): Рычажки образуют прямую линию, но они могут быть разной длины.
  • Disconnected (Несвязанный): Рычажки расположены независимо друг от друга.

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

Теория Кривых Безье

Вам действительно не нужно знать всю “математику” кривых Безье, чтобы использовать Vector Tool – я в этом уверен! :] Но у меня есть без совершенно нематематическая аналогия, которая помогает мне понять, как компьютер рисует все это на экране.

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

17

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

18

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

Векторные рычажки в действии

Меньше слов, больше дела. Давайте используем наши новые навыки и создадим значок-маркер на карту:

  1. Создайте круг.
  2. Увеличение толщину Border до 15.
  3. Нажмите кнопку Edit и выберите нижнюю векторную точку.
  4. Измените режим с Mirrored на Straight .
  5. Перетащите нижнюю точку вниз, чтобы растянуть ее.
  6. Перетащите ползунок Corners на 35, чтобы закруглить углы.

19

Форма иконки – маркера на самом деле это просто круг с углом в качестве одной из своих точек. Легко! Вы еще встретитесь с этой иконкой дальше в туториале.

Создание пользовательских иконок

На этапе рождения идеи логотипа, лучше взять карандаш и бумагу или использовать онлайн изображение в качестве отправной точки. Затем вы можете реализовать задумку, используя Vector Tool.

В этом примере вы будете воссоздавать логотип Рея Вендерлиха.

  1. Скачайте версию логотипа прямо из Интернета с низким разрешением.
  2. Перетащите логотип на Sketch.
  3. Выбрав изображение, с помощью инспектора уменьшите непрозрачность до 20%, чтобы его было легче обводить.
  4. Заблокируйте слой, нажав Command-Shift-L, чтобы вы случайно не сдвинуть его. Вы должны увидеть значок замка рядом с именем слоя.
  5. Нажмите V для активации Vector Tool.
  6. Кликните на все углы логотипа. Вам не нужно нажимать на кривую “R”, но в конце снова кликните на первый угол, чтобы закрыть векторный контур.
  7. Дважды щелкните в любом месте вдоль пути для редактирования (Edit).
  8. Поправьте те точки, которые не стоят точно на месте. Щипком вы можете увеличить масштаб.

20

Чтобы создать кривую буквы “R”, мы применим все наши полученные знания о векторных точках и модах.

  1. Дважды щелкните на верхний левый угол, и он изменится с Straight на Mirrored.
  2. Изменените его на Disconnected.
  3. Потяните изогнутую кривую вправо.
  4. Подтяните другой рычажок к векторной точке.
  5. Найдите векторную точку на другом конце кривой “R” и дважды щелкните по ней.
  6. Измените ее снова на Disconnected и подвигайте рычажки. Вам, возможно, придется поработать с двумя точками кривой, прежде чем у вас получится правильно.

21

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

22

Комбинируем фигуры

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

В программировании есть логические операторы AND, OR, и XOR. В Скетче есть нечто подобное и называются они Boolean Operators, хотя и используют другую терминологию: такую как Union (объединение), Subtract (вычитание), Intersect (пересечение) и Difference (разница).

Union (объединение)

Union объединяет фигуры. Давайте используем эту функцию и объединим фигуры “таблетка” и “круг” для того, чтобы у нас получилось “облако”.

  1. Создаем “таблетку”, увеличив максимально Radius (радиус) прямоугольника.
  2. Создаем круг.
  3. Перемещаем круг так, чтобы он перекрыл таблетку.
  4. Выбираем оба изображения, и нажимаем кнопку Union.

23

Обратите внимание, как очертания двух фигур сливаются вместе. Вуаля! Получилось облако :]

Subtract (вычитание)

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

Иконка – маркер для карты из нашего предыдущего примера выглядит нормально, но все крутые ребята в настоящее время делают отверстие в виде пончика внутри. Вы можете сделать то же самое с помощью кнопки Subtract:

  1. Создаем иконку-маркер, но на этот раз убедитесь, что снята галочка с Border.
  2. Создаем небольшой круг и перетаскиваем его на маркер.
  3. В списке слоев перетащите слой с кругом на слой с маркером для того, чтобы объединить фигуры.
  4. Растяните треугольник на этом объединенном слое.
  5. Убедитесь, что слой с отверстием располагается над слоем с маркером.
  6. Нажмите на boolean-operator icon справа от имени слоя, чтобы увидеть всплывающее меню.
  7. Выберите в меню Subtract.
  8. Выберите подслой с отверстием в виде дырки от бублика и используйте клавиши со стрелками для того, чтобы выбрать точную позицию.

24

Вот так! Вычитание, конечно, сложнее. Но есть несколько важных моментов:

  • Вы можете ставить слои друг над другом, чтобы объединять их. Круто?
  • При объединении фигур, Скетч выдвигает предположение, какой именно оператор вы намеревались использовать. Если вы видите, что выбран вариант None (никакой не выбран), то Скетч автоматически выбирает какой-то один самостоятельно.
  • Для вычитания важен порядок. Убедитесь, что слой с отверстием всегда самых верхний. Если ваши фигуры исчезают, попробуйте изменить порядок подслоев в Layer List.

Заливка против Обводки

В этой части урока вам понадобится начальный проект для Sketch. Дважды щелкните по нему, чтобы открыть. Вы должны увидеть следующее:

25

Этот стартовый проект включает в себя одностраничный макет и несколько пользовательских векторных иконок — внимательно рассмотрите, как они были сделаны. Есть также несколько Artboards “до и после”, в том числе несколько иконок для tab bar, которые вы будете использовать в этом разделе.

Иконки для tab bar меняют цвет в зависимости от выбранного состояния, но у некоторых иконок много пустого пространства, и изменение цвета будет не явным. В таких ситуациях Apple Human Interface Guidelines рекомендует использовать выбранную версию иконки с заливкой как selectedImage. Макет приложения RWDevCon содержит иконки для Tab Bar как с заливкой, так и просто обведенные.

26

В стартовом файле проекта для Скетча, который вы уже загрузили, есть Artboard под названием Calendar Starter с несколькими “строительными” блоками, совместив которые, вы получите иконку календаря. Эти “строительные” блоки – прямоугольники и таблетки, и вы уже знаете, что нужно делать.

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

  1. Откройте файл и раскройте Calendar Starter Artboard в списке слоев.
  2. Выберите Calendar Body и подслои Separator.
  3. Нажмите на Subtract.
  4. Выберите Shift-ом слой Right Hole и Subtract его из приведенной выше фигуры.
  5. Также Subtract вычтите слой Left Hole.
  6. Выберите Shift-ом слой Right Ring и нажмите на Union.
  7. Добавьте слой Left Ring, используя Union.

27

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

Теперь, когда у вас есть иконка с заливкой, пора создать версию с обводкой путем изменения размера одного из подслоев.

  1. Найдите на холсте Calendar Fill Artboard.
  2. Раскройте Calendar Fill Artboard в списке слоев.
  3. Раскройте слой Calendar Body и выберите слой Separator.
  4. Увеличьте высоту Separator до 35.

28

Все, что нужно было сделать, чтобы создать версию иконки календаря-это изменить разделительную линию на квадрат. Если Скетч не позволяет вам перемещаться на точную высоту, вы можете просто ввести цифру в Inspector.

Круглые аватарки

В макете RWDevCon у каждого спикера круглая картинка в профиле. Для получения такого эффекта, вам нужно использовать функцию Mask, очень похожую на Subtract. Но вместо того, чтобы проделывать дырки, Mask обрезает то, что снаружи.

Давайте создадим аватарку:

  1. Раскройте Greg Before Artboard в списке слоев.
  2. Внутри этого Artboard создайте круг, достаточно большой, чтобы уместить его на лицо.
  3. Выберите слой greg и слой oval, который вы только что создали.
  4. Убедитесь, что маска слоя (в данном случае, овал) находится в самом низу.
  5. Нажмите на кнопку Mask.
  6. Раскройте только что объединенный слой greg и выберите слой Mask.
  7. Добавите Border, и с помощью клавиш со стрелками отрегулируйте положение.

29

Убедитесь, что masking layer самый нижний. Это противоположно действие вычитанию, когда слой с “дыркой” самый верхний.

Экспорт изображения

Вы можете экспортировать только один слой, нажав Make Exportable в правом нижнем углу экрана.

Если вы хотите экспортировать несколько слоев, есть несколько способов сделать это:

  • Group: Когда слои группируются вместе, вы можете экспортировать группу как единое изображение.
  • Artboard: Все слои внутри Artboard экспортируется как единое изображение. Размер изображения основывается на фрейме Artboard.

Прежде чем экспортировать, проверьте ширину (Width) и высоту (Height) в Inspector. Эти размеры определяют @1x размер экспортируемого изображения.

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

30

PNG

Скетч позволяет легко экспортировать изображения в различных форматах:

  1. В правом нижнем углу нажмите на Make Exportable.
  2. Нажмите на Plus, чтобы добавить копию @2x.
  3. Нажмите снова на Plus для того, чтобы добавить копию @3x.
  4. Нажмите на кнопку Export для того, чтобы сохранить файл в формате PNG на диск.

31

PDF

Вы, наверное, привыкли использовать копии @2x и 3x@ каждого изображения, но Скетч-это векторная программа, так что воспользуйтесь этим. Xcode принимает векторные изображения в формате PDF, которые похожи на SVG, но с информацией о размере.

  1. Нажмите на Make Exportable.
  2. Оставьте размер на 1x.
  3. Выберите PDF в качестве Format, и нажмите на Export.

32

Вы можете импортировать эту единственную иконку в PDF в Asset Catalog.

  1. Из Xcode откройте Images.xcassets.
  2. Создайте New Image Set.
  3. В Attributes Inspector изменените Scale Factors с Multiple на Single Vector.
  4. Сохраните вашу иконку в PDF в All изображения.

33

Xcode создаст соответствующие копии @2x и 3x@ PNG файлов во время билд-фазы. Вы также получите PNG файлы, что в конечно счете, облегчит управление меньшим количеством файлов.

Что дальше?

Дальше, вы можете продолжить изучать наши туториалы по мере их появления, а также, параллельно читать перевод официальной книги по языку программирования Swift. И, для более подробного изучения языка, вы можете пройти наши курсы!

Комментарии
Если вы нашли опечатку - выделите ее и нажмите Ctrl + Enter! Для связи с нами вы можете использовать info@apptractor.ru.
Advertisement
Click to comment

You must be logged in to post a comment Login

Leave a Reply

Дизайн и прототипирование

Создание шрифта с нуля за 24 часа

Графический дизайнер Джеймс Барнард бросил себе вызов – он захотел за 24 часа создать шрифт и отправить его в Google Fonts. Как он это сделал и что узнал в процессе — в нашем переводе статьи Джеймса.

Анна Гуляева

Опубликовано

/

Я большой фанат One Day Builds Адама Сэвиджа. В начале дня у него есть только материалы, а в конце он становится обладателем чего-то, что он хотел.

Поэтому я бросил себе вызов: создать с нуля абсолютно новый шрифт и отправить его в Google Fonts за 24 часа.

В старом блокноте у меня были эскизы нескольких букв. Я хотел создать узкий шрифт без засечек, который можно будет использовать на постерах или на других больших изображениях. Во время работы в Men’s Health я использовал шрифты вроде Tungsten или Heron, которые выглядят ужасно в тексте, но отлично смотрятся в заголовках или промоматериалах (которые и были моей основной работой). Это был стиль, который я и хотел создать.

Очень грубые наброски

13:00, среда

Я отправился в Adobe Illistrator с двумя-тремя буквами, которые были у меня в эскизах. Я создал сетку из пяти строк – для линии нижних выносных, базовой линии, линии строчных, линии прописных и линии верхних выносных букв. Затем я определил ширину прописных букв и толщину основного штриха.

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

  • Линия строчных = 2 × высота линии верхних выносных / высота линии нижних выносных
  • Ширина основного штриха = ¼ ширины прописной буквы
  • Ширина строчной буквы = ¾ ширины прописной буквы

Вот как это выглядит на иллюстрации

Сначала я создал буквы O и B. Я решил, что эти буквы будут иметь не форму овала, а форму скругленного угла. Многие буквы будут выглядеть, как высокий прямоугольник, но O, B и D будут иметь скругленные углы вместо овалов.

Внешний угол имеет радиус 12 мм, а внутренний — 6 мм. С этими правилами я начал создавать прописные буквы.

Мой шрифт был очень простым, но с одним «украшением». Любая апертура, то есть, срез концов полуовала, должна была быть отрезана под углом. Самыми сложными буквами стали G и K.

Затем я приступил к строчным буквам. Это было сложнее, но с установленными правилами работать было проще. Я использовал больше «украшений», особенно в верхних выносных и нижних выносных элементах. Самыми сложными стали буквы f, g, a и e, так как они были абсолютно новыми.

21:00, среда

Я перешёл к другим символам, таким как восклицательный и вопросительный знаки. Я стал работать быстрее и успел создать около 35 знаков.

Утро четверга

Утром я довольно быстро закончил цифры от 0 до 9 и начал создавать файл с шрифтом. Это было совершенно новым опытом. Мой знакомый каллиграф Иэн Барнард посоветовал для этого программу Glyphs. Я скачал программу, посмотрел несколько обучающих видео и понял, что неверно создал файл в Illustrator. Поэтому мне пришлось вставлять каждый символ вручную и подгонять его под правила программы.

10:00, четверг

Я начал заниматься интервалами и кернингом. Это было ужасно долго. Прежде чем заняться этим, нужно освоить множество сочетаний клавиш в программе. И перед кернингом вам нужно сделать интервал как можно ближе к тому, что вы хотите видеть в итоге. Для этого нужно измерить ширину отверстия в букве О и разделить ее на три. Такой интервал стоит поместить слева и справа от буквы.

11:00, четверг

С расставленными интервалами я приступил к кернингу. Это стало очень болезненным процессом. Сначала я зашёл на этот сайт и вставил в их текст для кернинга свой шрифт.

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

Затем я конвертировал текст в прописные буквы и сделал то же самое для них.

12:59, четверг

Я экспортировал шрифт и конвертировал его в файл .ttf, чтобы отправить в Google. Несколько символов отсутствовали (квадратные скобки и символ копирайта), и я был уверен, что шрифт не примут. У меня также не было времени добавить различные знаки для поддержки разных языков.

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

Название шрифта? Odibee Sans (произносится как oh-dee-bee), то есть, One Day Build — ODB.

Заключение

Я отправил Odibee Sans в Google в мае 2017, и он все ещё находится в очереди на добавление. Команда предложила мне пока уделить время дизайну шрифта, хотя они признали, что это противоречит духу проекта.

Я поработал над шрифтом ещё один день. Я добавил все нужные знаки, а также внёс изменения примерно в 30 символов.

Более того, сейчас в шрифте существует более 1500 кернинговых пар, что стало значительным улучшением шрифта. А также я создал сайт: odibeesans.com.

Комментарии
Продолжить чтение

Дизайн и прототипирование

Ультрафиолет стал цветом 2018 года: что он значит?

В конце каждого года институт цвета Pantone выбирает цвет, который будет определять наступающий год. В 2018 году таким цветом стал Ultra Violet — ультрафиолетовый. Какую символику несет в себе этот цвет и универсальны ли цветовые коды для людей по всему миру?

Анна Гуляева

Опубликовано

/

В конце каждого года институт цвета Pantone выбирает цвет, который будет определять наступающий год. Этот цвет не является отражением модных тенденций, а символизирует изменения в обществе. В 2018 году таким цветом стал Ultra Violet — ультрафиолетовый. Какую символику несет в себе этот цвет и универсальны ли цветовые коды для людей по всему миру?

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

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

Фиолетовый цвет, избранный Pantone в этом году, является одним из последних базовых цветов, который получает название в процессе развития языка. Ультрафиолетовый, согласно презентации на сайте института, символизирует безграничность космоса, побуждает нас к духовным размышлениям и раскрытию своего изобретательного потенциала и воображения, которые так необходимы в наше время. Этот цвет показывает оригинальность и творческую гениальность, благодаря чему часто привлекает неординарных людей, например, Принса или Дэвида Боуи.

Но это не единственное значение ультрафиолетового. Он имеет большое значение в качестве цвета, который использовался в символике движения суфражисток, для которых он символизировал преданность и упорную верность своей цели. Помимо этого, ультрафиолетовый является важным символом борьбы за права ЛГБТК-людей. Фиолетовый — это смесь голубого и розового цветов, несущих гендерную окраску, и он отражает размытие границ гендеров. Ультрафиолет позволяет нам увидеть вещи, невидимые в обычном освещении, и этот смысл действительно важен для 2018 года, как в стремлении к многообразию и равноправию разных групп общества, так и в напоминании о творческом потенциале людей и возможностях человеческого мышления.

Комментарии
Продолжить чтение

Дизайн и прототипирование

Как создание эмодзи Apple изменило мою жизнь

Одна из создательниц оригинального набора эмодзи Apple Анджела Гузман рассказала, как эти символы изменили не только способы общения между людьми, но и её собственную жизнь, подарив ей несколько ценных уроков и близкого друга.

Анна Гуляева

Опубликовано

/

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

Я была стажеркой, а Реймонд — это мой друг и ментор. За три месяца мы создали некоторые из самых используемых эмодзи: лицо со слезами от смеха, кучку какашек, красное сердце и хлопушку, а также ещё 460 менее используемых. Затем мне удалось сделать кое-что ещё в качестве сотрудницы Apple.

Это было лето 2008, и прошел только год с момента получения мной степени магистра графического дизайна в Школе дизайна Род-Айленда. Этим же летом я попала на стажировку в Apple и очень ждала знакомства с командой – той же самой, что была ответственна за iPhone, за это волшебное устройство, которое появилось годом ранее. Можете только представить, сколько бабочек было у меня в животе, когда я прилетела в Купертино и прибыла на 1 Infinite Loop. Я не знала, над каким проектом буду работать, размер команды, где я буду сидеть и смогу ли я действительно ездить на велосипеде на работу (я ужасно езжу на велосипеде).

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

Следующие три месяца мы с Реймондом делили офис и рисовали ряды лиц, мест, флагов, животных, блюд, одежды, символов, праздников, видов спорта, ну и вы, вероятно, знаете все остальное. Но до этого мне предстояло научиться создавать иконки в стиле Apple. Мы поделили задачи и урок скромности и мастерства начался.

Реймонд создал лицо со слезами радости и кучку какашек, а я нарисовала красное сердце и хлопушку.

Реймонд научил меня всему, что нужно было знать о дизайне иконок. Я не знала, что он, мой скромный наставник, был одним из лучших дизайнеров иконок в мире. Другими словами, я сидела рядом с одним из лучших создателей иконок, использовала его знания для обучения до тех пор, пока я не могла начать работать сама, и обменивалась с ним историями о взрослении в Южной Флориде и поездках в Pollo Tropical в поисках отличных подорожников. Урок скромности пройден.

Моим первым эмодзи стало обручальное кольцо, и я выбрала его из-за сложных текстур металла и граненого камня, которые было сложно нарисовать новичку. Металлическое кольцо заняло у меня целый день. Довольно скоро я могла бы сделать два таких кольца за день, потом три и так далее. Несмотря на то, что я могла бы быстро рисовать эмодзи, не слишком волнуясь о качестве, я постоянно следила за деталями: структурой древесины, крапинками на яблоках и баклажанах, жилками листьев на гибискусе, стежками кожи на мяче — деталей было бесконечно много. Я пыталась уловить каждый пиксель, потому что каждая деталь имела значение. За три месяца через мой экран прошли сотни эмодзи. В то же время у нас был первый обзор от Стива Джобса, который заставил нас напряженно ждать результата, но нашу работу утвердили. И если Стив сказал, что всё хорошо, я считаю, что урок в мастерстве тоже пройден.

Иногда эмодзи получались более комичными, чем было задумано, а у некоторых есть своя история. Например, Реймонд использовал форму счастливой какашки в качестве верха рожка мороженого. Теперь вы вряд ли об этом забудете. Никто из обнаруживших эту деталь об этом не забыл.

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

Забавные истории, понимание того, что наши школы находились менее чем в 30 милях друг от друга, общее прошлое и дни совместной работы привели к тому, что вместе мы постоянно смеялись до слез. Через десять лет после моей стажировки мы с Реймондом постоянно смеемся и он дает мне самые честные отзывы, и наоборот. Я верю, что эмодзи стали успешными благодаря нашей дружбе через дизайн.

Когда я заметила постоянно меняющийся камень в парке Бернал-Хайтс в Сан-Франциско, мы с Реймондом решили, что должны отдать дань волшебной кучке какашек. Фото 2016 года.

В этом году исполнится десять лет запуску оригинальных эмодзи Apple. Они вышли в Японии в ноябре 2008, вскоре после окончания моей стажировки в Apple. Я понятия не имела, что за несколько месяцев после окончания проекта способ коммуникации в нашей культуре изменится или что эмодзи в физическом виде появятся везде. Действительно везде: игрушки, одежда, наклейки, конфеты, музыкальные клипы, книги, украшения, достопримечательности, фильмы и есть множество других мест, где вы можете их видеть.

Стоит заметить, что хотя Реймонд и я, Анджела Гузман, являемся оригинальными создателями эмодзи, ответственными за 500 символов (на которые получили патент), конечно, в Apple есть и другие дизайнеры. Олли Вагнер создал около десятка эмодзи для оригинального набора после завершения моей стажировки и ещё больше — в следующем году. Сейчас количество эмодзи составляет примерно около 1000, и некоторые из них ещё и анимированы.

Десять лет назад мы с Реймондом работали над одним из моих самых любимых проектов, который привел меня к чувству своего икигай. Этот японский термин означает место, в котором страсть, миссия, призвание и профессия человека пересекаются; то, что можно назвать причиной просыпаться по утрам — это точно я в 2008. Я с радостью просыпалась, и если мне нужно было ехать на велосипеде, я несла его на три пролета вниз и ехала на работу с улыбкой на лице. Это магия!

Подарок от Реймонда на окончание моей стажировки — его реальная версия эмодзи. Апельсин, яблоко и баклажан были созданы мной.

Я хочу предложить любому дизайнеру, ищущему причину просыпаться по утрам, найти своего скромного ментора или стать ментором и отправиться по пути дружбы. Магия происходит, когда дизайн приводит вас к дружбе, а дружба — обратно к дизайну. С каждым эмодзи я узнавала что-то новое. С каждым эмодзи мы с Реймондом еще больше становились друзьями. Чем более близкими друзьями мы становились, тем лучше становилась я как дизайнер. В этом случае дружба и дизайн развивались с каждым созданным эмодзи. И этой историей стоит поделиться.

 

Комментарии
Продолжить чтение

Дизайн и прототипирование

Podlodka #42: Дизайн-системы

В последнее время в сообществе разработчиков все чаще упоминаются некие “дизайн-системы”.

Леонид Боголюбов

Опубликовано

/

Podlodka

С тем, что это такое и как это применимо к мобильному миру, нам помог разобраться Александр Зимин – iOS-разработчик из Badoo!

 

Комментарии
Продолжить чтение

Наша рассылка

Каждому подписавшемуся - "1 час на UI аудит": бесплатный ускоренный курс для разработчиков!

Нажимая на кнопку "Подписаться" вы даете согласие на обработку персональных данных.

Вакансии

Популярное

X

Спасибо!

Теперь редакторы в курсе.