Наш канал в

В общем, я видел ошибки новичков. А дизайнеры просто используют размытость по гауссу с маской, чтобы наложенная кнопка приобретала текстуру размытого фона подложки. Это так просто, но как же вы можете узнать об этом, как не прочитать здесь?)

Позвольте мне поделиться секретом, который сэкономит кучу вашего времени. Чтобы создать (blur) размытие iOS в Sketch вам необходимо:

Первое:

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

(blur) размытость iOS в Sketch

Я выбрал слой в форме таблетки под моим таймером в видео

Далее справа вы увидите редактор или графический инспектор. В этом разделе экрана будет множество опций, но нас интересует всего одна. Выберите последнюю опцию (Gaussian Blur – гауссово размытие), вы увидите крошечные стрелочки, указывающие вверх и вниз… Кликните на них.

(blur) размытость iOS в Sketch

Затем:
Выберите опцию “Background Blur” (размытие фона), но перед этим убедитесь, что вы выделили нужный графический объект.

(blur) размытость iOS в Sketch

Теперь можно поиграться с плотностью пикселей с помощью бегунка Amount внизу. Я остановился на 10px (немного перебор для эффекта, который я хотел). Если вы проведете бегунком до правого края, то заметите действительно кардинальные перемены. А если проведете его в левый край… ну, вы догадались, что результат будет полностью противоположным.
Полюбуйтесь на результат с размытием фона на моем белом таймере. Специально для вас я постарался сделать эффект повыразительнее ☺

(blur) размытость iOS в Sketch

Надеюсь, это поможет вам. У меня есть еще масса полезных советов и трюков, которыми я рад поделиться!

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

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

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

Полное руководство по дизайну 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