Серия уроков Sketch (часть 2 из 5): Символы и стили

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

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

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

Когда вы посмотрите на свой список стилей, заметите, что они не стоят в порядке создания. Придерживаясь названий primaryColor и secondaryColor, можно быть уверенным, что эти стили будут сгруппированы. Стили также можно задавать и для текстов. В них можно указать, как именно нужно отображать заголовки, основной текст, ссылки и все остальное. Аналогично стилям выше, шрифтовые стили будут перечислены на страничке Style Guide в Sketch.

Все, что нужно сделать, — воссоздать данное нам руководство в Sketch. Теперь вы не ограничены только стилем заголовка, подзаголовка и основного текста, как в моем примере. У меня были проекты с 10 и более стилями текста. Символы могут быть слабым местом для новичков в Sketch. К тому же, в прошлом были некоторые проблемы с их использованием. Символы — это особый вид групп. Они отображаются, как группа в списке слоев, но вместо синей иконки отмечена фиолетовой.

Представьте, вы создали iOS-приложение, и на всех макетах вам сказали изменить время в статусной строке с 9:41 на 12:51. Всего у вас 74 экрана. И эта магия работает на любых элементах, превращенных в символ: статусные строки, иконки, разделители и прочее.

На страничке Assets в Sketch-документе нарисуем круг 60×60-pt. Круто, затем разукрасим круг во второй цвет из руководства по бренду (и тут на сцену выходят стили!).

Я буду создавать свою иконку ‘+’, комбинируя два прямоугольника и применяя к ним стиль supportColorGrey/solid. Просто дважды кликните на названии слоя для входа в режим редактирования. Add позволит группировать все с таким же префиксом в папке символов, в то время как /normal указывает на положение (состояние) кнопки. Когда будем создавать символ для положения нажатой кнопки, назовем его fabAdd/pressed, активное положение будет названо fabAdd/active и т.д.

Сохраняем цвета в палитру

Но клиент пришел, и потребовал, чтобы все кнопки FAB были окрашены в главный цвет бренда (primaryColor), а не во второй оттенок, как было раньше. Как вы видите, все сущности этого символа обновились.

Использование маски, и эти красивые иконки

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

Этот новый символ не имеет теперь никакой связи с тем, что мы создавали в начале, так что правки в нем не должны затронуть первый символ. Применим стиль primaryColor/pressed/solid к новому символу. И вот, у вас теперь несколько символов! Если вам понадобится вставить один из символов в дизайн, вы можете найти их, нажав ‘Insert’ в панели меню. Префиксы действительно помогают удобно организовать все символы.

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

Надеюсь, теперь вы чувствуете себя немного увереннее в Sketch?

Так что если вы хотите, чтобы слой вел себя, как растровая картинка, нужно перейти в панель меню и выбрать опцию Layer > Flatten Selection to Bitmap. Если вы хотите добавить какое-то конкретное изображение в свой дизайн, нужно будет сделать это вручную.

Давайте создадим стили

Картинка вставится строго в область, очерченную фигурой. Изображение будет находиться внутри слоя фигуры, так что если вы хотите трансформировать его в растр, выделите этот слой, и из меню кликните Layer > Flatten Selection to Bitmap. Теперь слой будет вести себя, как обычное изображение, можно будет делать настройки цвета, вырезать и проводить прочие манипуляции в панели инспектора. Итак, мы вставили большое изображение для хедера (пока что пусть оно остается в векторе.

Супер. Это даст нам хороший контраст, когда добавится текст (в нашем случае белый и ярко-салатовый) поверх изображения. Теперь мы создадим верхнюю панель меню, которая будет содержать лого и главные элементы навигации. Настало время добавить 4 элемента навигации в меню. Я стараюсь соблюдать максимальную простоту для этой серии уроков.

Для этого нужно выделить оба прямоугольника, и нажать Cmd+G. Все выделенные элементы будут помещены в папку, и тут уже можно превратить группу в символ. Чтобы создать сами стили, нужно выделить объект и нажать на кнопку ‘No Shared Style’ в правой стороне окна Sketch.

Еще про iPhone:

  • Как пополнить счёт в Гугл ПлейКак пополнить счёт в Гугл Плей В этом видео я поделюсь собственным опытом и сделаю сравнение, какая партнёрская программа лучшая на YouTube. 5.Заходим в Google Play и выбираем любое платное приложение. Лучшая партнерка […]
  • Microsoft office скачать бесплатноMicrosoft office скачать бесплатно Скачайте бесплатно Microsoft Office с официального сайта Microsoft. Скачать Офис 2013 – это получить качественный усовершенствованный продукт от известного разработчика! Скачать Ворд 2013 […]
  • Устройство USB не опознаноУстройство USB не опознано Попробуйте подключить флешку к другому компьютеру. Открыть Диспетчер устройств, правой кнопкой мыши на USB-контроллеры, а затем нажмите на свойства. Впрочем, есть и ещё один ответ на […]
  • Навязчивая реклама при разблокировке смартфонаНавязчивая реклама при разблокировке смартфона Всплывало это окошко с рекламой и в играх, и в приложениях, и просто на главном экране. Однако периодически и на Андроиде выскакивает на экране реклама. Как убрать простую рекламу, которая […]