Эскиз Учебники

10 хитростей, которые заставили бы Оуэна Уилсона сказать «Ух ты!» (Тонны гифок!)

Если вы не получили ссылку в заголовке, прошу вас посмотреть это видео. Пожалуйста :)

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

Пока не повезло.

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

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

1. Метод каракулей

Давай начнем все на ура, хорошо?

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

Начните с рисования карандашом с помощью карандаша (нажмите P на клавиатуре). Для более плотных участков набросайте кучу в одном месте. Не забывайте качаться из своей массы каракулей, чтобы создать некоторые выбросы.

Установите границу, чтобы иметь широкий зазор и изогнутые концы. Presto! Вы только что создали некоторые случайные данные разброса. Поместите это здесь, партнер

2. Границы радиуса на отдельных вершинах

Итак, теперь мы знаем, что вы можете установить различные радиусы границы в поле радиуса границы, используя косую черту:

БОЛЬШАЯ ДЕЛО. JK, довольно круто!

Но! Вы также можете одновременно выбирать отдельные вершины, что экономит время для более сложных полигонов.

3. Выровняйте повернутые фигуры, чтобы сбросить ограничивающую рамку

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

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

4. Option-Drag, затем Command-D для дублирования фигур и действий

Составление списка предметов? Прекратите копировать, вставлять и перемещать фигуры / группы, такие как тупица.

Удерживайте нажатой эту опцию, пока вы перетаскиваете фигуру / группу в ее предполагаемое положение, затем нажимаете Ctrl + D, чтобы дублировать ее. Это не только дублирует форму, но также копирует расстояние, которое вы переместили:

Pssst ... это работает и с арт-досками!

5. Измените настройки Pathfinder на комбинированных фигурах

Сколько раз это случалось с вами, когда вы пытались объединить несколько фигур в одну:

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

Ладно, дыши. Просто выберите комбинированные формы объектов и установите их в Union:

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

К счастью, Sketch умен и позволяет вам устанавливать различные операции слияния путей для каждой вложенной фигуры в объединенной форме, поэтому мы можем легко вычесть эти отверстия:

РЕДАКТИРОВАТЬ: Хотя по-прежнему приятно знать, что вы можете настроить отдельные операции слияния слоев, Штеффен Карспек великолепен и указал, что я мог бы избежать дыр в первом шаге, установив настройки предпочтения заливки. Я видел это сто раз, но никогда не удосужился прочитать то, что означают эти два варианта. Мог бы избавить себя от головной боли :)

Спасибо, Штеффен!

6. Укладка символов для состояний объектов

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

Использование символа для навигации в вашем приложении прекрасно, потому что вы можете поделиться им между страницами. Недостатком является то, что у вас всегда будет какой-то слой Selected Nav Item, чтобы показать активную страницу в Nav.

Давайте откажемся от дополнительного слоя, используя технику, которую я называю «Набор символов»:

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

Когда вы закончите, сделайте все это большим символом!

Поскольку Sketch позволяет настраивать текст в разных экземплярах символов, вы можете настраивать текст в каждом из слоев состояния. Чтобы отключить состояние, просто введите пробел, чтобы «очистить» это состояние текстового слоя. В приведенном ниже GIF-файле я хочу, чтобы настройки были выбраны, а остальные были белыми (мое состояние по умолчанию):

В приведенном выше GIF вы смотрите на четыре одинаковых символа, каждый из которых представляет разные состояния, используя технику наложения символов. Это замечательно, потому что теперь намного проще настраивать такие вещи, как шрифт и размер шрифта, потому что вам не нужно беспокоиться об обновлении слоя Selected Nav Item над ним.

7. Найти слой

Если слой не отображается в списке слоев, когда вы щелкаете мышью по объекту на монтажной области, вы не увидите его выделенным. Это довольно раздражает.

К счастью, есть частично скрытая функция, позволяющая открыть слой в списке слоев и вывести его в режим прокрутки. Используйте Command-Shift-J:

Это делает СУПЕР удобным, чтобы быстро перейти непосредственно к выбранному слою, а затем нажать Tab вокруг соседних слоев внутри этой группы.

Ctrl + клик по слою, затем нажмите Ctrl + Shift + J, чтобы отобразить слой в списке слоев.

Бонусный совет

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

Когда вы откроете список, который вы свернете, вы увидите, что дети также были свернуты.

8. Быстрые PNGs - 4 способа!

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

Вот 4 способа вытряхнуть PNG в Brilliant Technicolor GIF ™:

Способ 1: перетащите слой артбордаМетод 2: Перетащите Артборд Экспорт / СрезСпособ 3: перетащите отдельную группу или слойСпособ 4: перетаскивание из эскиза в другие приложения
Совет: если вы работаете над модальным дизайном, используйте PNG для «нижнего слоя». Это избавит вас от необходимости дублировать весь дизайн приложения под модальным и избавит вас от случайного нажатия на слои ниже.

Бонус! Тайлер Ховарт напомнил мне, что вы также можете экспортировать PNG, просто скопировав слой или артборд. Мы полностью разместили это в статье, поэтому Тайлер получает за это признание. Вот его дополнение:

Вы также можете скопировать / вставить любой артборд / группу / слой в Sketch и из него. Скопируйте артборд, переключитесь на Medium / Slack, вставьте и вперед!
- Тайлер

Хот-дог, чувак. Это одно правило!

9. Быстрые заливки

Это своего рода совет по сделке два-к-одному.

Совет 1: Чтобы создать бесшовный узор, создайте квадратный символ артборда и окружите его экземплярами самого себя. Это поможет вам понять, как будет выглядеть ваш готовый шаблон.

Совет 2: Чтобы быстро сделать это заполнением шаблона для другой фигуры, мы собираемся использовать технику, которую мы изучили в Шаге 8.

Выберите форму, которая будет заполнена вашим рисунком, откройте меню «Заполнить изображением» и перетащите артборд базового рисунка в окно предварительного просмотра изображения:

10. Объектив Боке

Очевидно, что вы всегда должны сохранять лучшее для последнего.

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

боке (n): визуальное качество областей, не сфокусированных на фотографическом изображении, особенно с точки зрения конкретного объектива.
(источник изображения)

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

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

Изображение ниже на 100%, без фотографии. Просто тонкий градиентный фон с тремя линиями «метода каракулей» разного цвета, непрозрачности и размытия по Гауссу. Добавьте слой шума, установленный на «Наложение», и наложите сверху какой-нибудь стеклянный текст (градиентная заливка с верхней и нижней внутренней границей). Вы получите довольно убедительный эффект боке:

Следуйте за мной в Medium / Twitter, подпишитесь на публикацию UX Power Tools и следите за нами в Twitter за обновлениями, новым контентом и другими интересными вещами. Любите, любите и делитесь, если хотите.

Люблю тебя, люди.