Как сделать эффект длинной тени в Sketch
Наш канал в

Эффект длинной тени – новый популярный стиль. Впервые он появился в дизайне Google. Реализовать длинную тень в Sketch не так просто, как добавить парочку эффектов в Инспекторе. В этой небольшой инструкции я покажу, как сделать длинную тень в Sketch.

Пока что в Sketch нет автоматической функции длинной тени. Для ее реализации вам понадобятся инструменты Motion Blur effect и masking.

В целях обучения давайте создадим длинную тень для логотипа Twitter.Скачайте его в формате EPS, затем откройте в Sketch.

Почистите логотип, удалив объект Clip 2. Переименуйте объект Fill 1 в Twitter Logo. Разгруппируйте элементы лого, если у вас они в слое Group. Нам будет проще работать без этого слоя, и мы не будем создавать много новых слоев.

Давайте уменьшим исходный логотип, задав ширину в 150 пикселей. Создайте новый артборд размером 600 пикселей в ширину и 500 пикселей в длину.

В артборде нарисуйте новый прямоугольник (объект Rectangular). Задайте для него цвет #73D7FD и измените название слоя на Background (фон). Передвиньте слой назад, под слой Twitter Logo. Затем выровняйте лого по центру артборда.

Теперь сделайте тень. Создайте круг (объект Oval) под Twitter Logo, закрасьте его в Черный цвет (#000000), без контура. Изменяйте размер до тех пор, пока овал не коснется своей границей клюва и хвоста Twitter Logo. Измените название слоя Oval на Shadow.

Как сделать эффект длинной тени в Sketch

Выберите эффект Motion Blur (размытие в движении) для объекта Shadow. Установите параметр количества (amount) на максимум в 50px, а угол тени (shadow angle) на 45º. Пока не беспокойтесь о форме тени. У вас должно получиться примерно следующее.

Shadow< Чтобы сделать тень более реалистичной, нам нужно обозначить, как тень от Twitter Logo должна падать на фон. Нажмите L (сокращенно от Line – линия), удерживайте Shift и нарисуйте линию пол углом 45º. Продублируйте линию еще трижды, разместите их так, как показано на рисунке. Сгруппируйте линии и закрепите их (опция lock).
Как сделать эффект длинной тени в Sketch

Далее нужно создать произвольную фигуру, чтобы замаскировать тень. Нажмите V (сокращенно от Vector Shape – векторная фигура). Начните с первой опорной точки на кончике клюва, нажмите Shift, чтобы нарисовать векторную фигуру по направлению диагонали 45º. Созданные ранее линии будут вашим ориентиром для размещения опорных точек. На картинке внизу показано, какую форму я придал векторному слою. Когда вы замкнули векторную фигуру, переименуйте слой в Mask (маска).

Как сделать эффект длинной тени в Sketch

Поместите слой Mask под слой Shadow. Кликните правой кнопкой на слое Mask, выберите Use as Mask . Теперь слои Twitter Logo и Shadow будут также замаскированы. Чтобы размаскировать Twitter Logo, кликните правой кнопкой мыши на слое Twitter Logo, выберите опцию Ignore Underlaying Mask.

Как сделать эффект длинной тени в Sketch

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

Вы почти у цели. Тень выглядит слишком насыщенной. Уменьшите интенсивность слоя Shadow, чтобы сделать более мягкое затенение (параметр opacity), 30% должно быть достаточно.

Как сделать эффект длинной тени в Sketch

Вот и все, мы закончили. Вы только что сделали эффект длинной тени в Sketch. Если хотите более длинную тень, просто увеличьте объект Shadow и отредактируйте слои Mask.

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

Подпишитесь на рассылку

Раз в неделю мы будем присылать на почту дайджест с лучшими материалами

Похожие записи

Полное руководство по дизайну iOS 9 в Sketch

iOS сильно выросла в течение последних лет. С ее iOS 9 апгрейдом, Apple представил новый системный шрифт под названием San Francisco, 3D Touch и многозадачность на iPad. В Xcode вы найдете Stack Views, фантастический инструмент для более адаптивных макетов, гораздо проще Auto Layout.

Самое подробное руководство по дизайну в Sketch

Работая со Sketch последние три года, я освоил ряд ключевых техник, которые значительно улучшили мой рабочий процесс. Так как я, помимо рисования, также обожаю прототипировать и кодить, мне нужен инструмент для быстрого выполнения дизайн-проектов и легкой генерации исходников. Sketch вместе с его плагинами и другие инструменты для прототипирования полностью справляются с этой задачей. Часть 1 Часть 3 Часть 4

Серия уроков Sketch (часть1 из 5): Настройка Sketch

Первое что нам следует изучить, это настройка Sketch. Если вы только начали создавать дизайны для веб и являетесь новичком в Sketch или Photoshop, или вы просто разработчик, желающий включить UI-дизайн в свой репертуар, эти простые уроки по настройке идеально подойдут для быстрого ознакомления с работой Sketch. Часть 2 Часть 3 Часть 4 Часть 5