Четверг #4. А как ты используешь маски?
На дворе середина недели, пора написать инфопослание для дизайнеров.
С прошлого раза прошло уже достаточно много времени, но поступил сигнал что тема всё-таки не раскрыта.
Потому сегодня снова пара конкретных интерфейсных примеров, где и как я использую фотошопную функицю «Масок».
Картинка для привлечения внимания:
(спасибо Серёжке за предоставленную фотку, и гуглу за оставшиеся куски изображения)
Собственно пример.
Кнопка, сделанная одним шейпом и его стилями, простой текст лежит поверх.
Я стараюсь никогда не растрировать шейпы, на случай если их нужно будет деформировать. Раньше эта процедура была достаточно трудоёмкой, приходилось выставлять линеечки чтобы точно переместить край шейпа, например, на 20 пикселей от последнего символа текста. При задаче, ограничивающийся веб-интерфейсом можно было шейп и растрировать, отрезая и двигая уже отдельные пикселы с прмощью стрелок курсора ←↑→, что давало их точное перемещение на известное количество точек. Пять раз нажал → и выделение подвинулось на пять пикселов.
К невероятному счастью в шестой версии Адобовского пакета появился просто замечательный информер и привязка к пиксельной сетке, потому последние крохи смысла растрирования элементов исчезли:
Потому давайте векторной кнопке нарисуем векторный блик! Использую я для этого, как вы уже догадались, маску слоя.
Для начала копируем шейп, убираем с него все стили, выбираем белый в качестве цвета заливки. Сдвигаем белый шейп на нужное количество пикселей вверх - он вскоре станет «стеклянным» бликом. Делаем из основного шейпа выделение, любым из вам известных способов. Я просто делаю ⌘+клик по иконке слоя.
Сделав это выделение выбираем снова наш белый шейп и нажимаем на иконку Add layer mask.
Тем самым мы создали маску, которая ограничила белый слой формой слоя с кнопкой.
Далее берём инструмент градиентной заливки и чёрным односторонним градиентом заливаем кнопку снизу вверх.
В результате заливка на маске должна будет выглядеть как-то вот так:
Результат:
А вот почему всё это лучше не растрировать, а оставлять в виде векторных шейпов:
Простая трансформация, никакого машеннства.
Ну или например нужно нарисовать блик на картинке. Делаем те-же действия. Шейп→Создание маски→Заливка маске по градиенту до нужной прозрачности.
Заливка на маске может оказаться сложносочинённой, это не имеет особого значения, главное чтобы результат нас устраивал.
Если вы рисуете презенташки для клиента, или, например, дизайн приложения сразу в экране девайса, то маска по размеру экрана, применённая к папке с проектом, поможет сэкономить время и значительно упростит оценку результата.
Просто нужно положить весь в одну папку и создать на ней нужную маску. Если её отключить то видно, что интерфейс простирается за пределы экрана устройства.
Включаем её обратно - и экран заканчивается там, где нужно.
А градинетная заливка снова пригодится при имитации «пропадающего» в прокрутке контента:
Надеюсь вам было полезно!
;)
С прошлого раза прошло уже достаточно много времени, но поступил сигнал что тема всё-таки не раскрыта.
Потому сегодня снова пара конкретных интерфейсных примеров, где и как я использую фотошопную функицю «Масок».
Картинка для привлечения внимания:
(спасибо Серёжке за предоставленную фотку, и гуглу за оставшиеся куски изображения)
Собственно пример.
Кнопка, сделанная одним шейпом и его стилями, простой текст лежит поверх.
Я стараюсь никогда не растрировать шейпы, на случай если их нужно будет деформировать. Раньше эта процедура была достаточно трудоёмкой, приходилось выставлять линеечки чтобы точно переместить край шейпа, например, на 20 пикселей от последнего символа текста. При задаче, ограничивающийся веб-интерфейсом можно было шейп и растрировать, отрезая и двигая уже отдельные пикселы с прмощью стрелок курсора ←↑→, что давало их точное перемещение на известное количество точек. Пять раз нажал → и выделение подвинулось на пять пикселов.
К невероятному счастью в шестой версии Адобовского пакета появился просто замечательный информер и привязка к пиксельной сетке, потому последние крохи смысла растрирования элементов исчезли:
Потому давайте векторной кнопке нарисуем векторный блик! Использую я для этого, как вы уже догадались, маску слоя.
Для начала копируем шейп, убираем с него все стили, выбираем белый в качестве цвета заливки. Сдвигаем белый шейп на нужное количество пикселей вверх - он вскоре станет «стеклянным» бликом. Делаем из основного шейпа выделение, любым из вам известных способов. Я просто делаю ⌘+клик по иконке слоя.
Сделав это выделение выбираем снова наш белый шейп и нажимаем на иконку Add layer mask.
Тем самым мы создали маску, которая ограничила белый слой формой слоя с кнопкой.
Далее берём инструмент градиентной заливки и чёрным односторонним градиентом заливаем кнопку снизу вверх.
В результате заливка на маске должна будет выглядеть как-то вот так:
Результат:
А вот почему всё это лучше не растрировать, а оставлять в виде векторных шейпов:
Простая трансформация, никакого машеннства.
Ну или например нужно нарисовать блик на картинке. Делаем те-же действия. Шейп→Создание маски→Заливка маске по градиенту до нужной прозрачности.
Заливка на маске может оказаться сложносочинённой, это не имеет особого значения, главное чтобы результат нас устраивал.
Если вы рисуете презенташки для клиента, или, например, дизайн приложения сразу в экране девайса, то маска по размеру экрана, применённая к папке с проектом, поможет сэкономить время и значительно упростит оценку результата.
Просто нужно положить весь в одну папку и создать на ней нужную маску. Если её отключить то видно, что интерфейс простирается за пределы экрана устройства.
Включаем её обратно - и экран заканчивается там, где нужно.
А градинетная заливка снова пригодится при имитации «пропадающего» в прокрутке контента:
Надеюсь вам было полезно!
;)