
Рисуем текстовую кнопку

В качестве примера беру дизайн кнопок из текущей игры.
Невзирая на простоту и древность используемых инструментов, уверен, тутор будет полезен.
Шаг 1. Фон и текст.
Набросаем фон для красоты и текст, из которого сделаем кнопочку. Сгодится любой bold/black шрифт. Я использовал свой, созданный специально для игры.
Шаг 2. Цвет и свет.
Чтобы кнопка приобрела цвет и намек на освещение, добавим эффект Gradient Overlay.

Шаг 3. Объем.
Для придания изображению «пухлости» часто используют эффект Bevel. Мне как-то ближе эффект Inner Shadow.
Шаг 4. Контур.
Ну стиль я выбрал такой, что кнопки обрисованы. Добавляем эффект Stroke.

Шаг 5. Smart Object.
Дальше мне понадобится применить к нашему тексту еще один эффект Stroke с другими настройками. Для того, чтобы это стало возможным, нам следует либо растеризовать всю нашу красоту (лишимся возможности просто поменять текст для создания новой кнопки), либо конвертироровать ее в Smart Object.
Шаг 6. Заканчиваем с этим.
Наша кнопка все еще доступна для редактирования (текст, эффекты), но уже представлена как «чистый» слой. Теперь мы можем нанести завершающие штрихи для реализации задуманного — добавляем эффекты Stroke и Outer Glow с «жестким» краем (такой себе нехитрый способ сделать две обводки).

Шаг 7. Профит.

- +6
- Zebestov
Комментарии (34)
Спасибо, очень понравилось
1. Увеличить самую внешнюю обводку вдвое
2. Drop Shadow + Scale (кнопка визуально выдвинется)
3. Изменить цвет
Что касаемо downState, я его не делаю обычно — он мало живет и скорее «мелькает», нежели красиво отображается. А если речь идет о тачскрине, то это состояние еще и перекрыто пальцем/рукой.
Вот, баловался как-то. Сделано эффектами Флеша. Таким образом, текстовое поле может быть динамическим (для локализации, например).
Растр зло! Только программный растр!
Возня с вектором приобретает смысл лишь в игрушках, подгружающих контент с сервера, например. Там оно еще оправдано: нагрузка на сервер существенно спадает. Плюс пользователю пофиг что там за индикатором загрузки кроется и мы можем нанычку тратить его время на растеризацию подгруженного контента. Можно еще пару примеров привести, но не про кнопки )
про экономию на спичках я подразумевал, когда писал про время загрузки. естественно, если размер файла вырастет незначительно, то вектором можно принебречь. хотя мне было бы влом лезть в фотошоп и что-то там рисовать для этого. просто в силу особенности своего фреймворка, проще забросить эти объекты в пул для растеризации… но это уже особенности архитектуры подручных вам средств.
Мы же не станем съезжать на «всю графику» в то время как разговор идет исключительно о кнопках )
Впрочем, в текущей игре остальные ассеты также находятся в предподготовленном состоянии, но причина такого решения уже несколько иная. Там как раз можно было бы и повозиться с вектором, но увы.
Но рисовать растровую графику, по крайней мере, логичней и проще в растровом редакторе.
P.S.
В бытность свою моушн-дизайнером на телевидении работал я с одним интересным во всех отношениях человеком. Прекрасный специалист, архитектор по образованию, художник по натуре, зубр в плане тогда еще совсем-совсем зарождающегося 3D и все такое. Так вот он титровки (самые дешевые рекламные ролики с текстом и слайдами для любого местечкового телеканала) делал в 3ds max ))) ну вот что уж тут уж ) привычка — и все тут!