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

Графика
Писанины особой не будет.
В качестве примера беру дизайн кнопок из текущей игры.
Невзирая на простоту и древность используемых инструментов, уверен, тутор будет полезен.
 
 
 
 
 

Шаг 1. Фон и текст.

Набросаем фон для красоты и текст, из которого сделаем кнопочку. Сгодится любой bold/black шрифт. Я использовал свой, созданный специально для игры.


Шаг 2. Цвет и свет.

Чтобы кнопка приобрела цвет и намек на освещение, добавим эффект Gradient Overlay.



Шаг 3. Объем.

Для придания изображению «пухлости» часто используют эффект Bevel. Мне как-то ближе эффект Inner Shadow.


Шаг 4. Контур.

Ну стиль я выбрал такой, что кнопки обрисованы. Добавляем эффект Stroke.



Шаг 5. Smart Object.

Дальше мне понадобится применить к нашему тексту еще один эффект Stroke с другими настройками. Для того, чтобы это стало возможным, нам следует либо растеризовать всю нашу красоту (лишимся возможности просто поменять текст для создания новой кнопки), либо конвертироровать ее в Smart Object.


Шаг 6. Заканчиваем с этим.

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



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

  • +6

Комментарии (34)

+1
Пошёл по стопам Nigthmarez'а? :)
  • vizgl
  • vizgl
  • ↓
0
Та да… достал пыльный фотошоп… понял, что если не я, то кто же… ну и все такое :)
0
Я использовал свой, созданный специально для игры.
Чем создаете?
+1
Буквы рисую в Corel DRAW, .ttf собираю в FontCreator, в .fnt преобразую с помощью Bitmap Font Generator, разукрашиваю в Adobe Photoshop, использую в Starling. Как-то так )
0
спасибо.
0

Спасибо, очень понравилось
0
Нуо! Симпатичный батончик вышел )
0
Какие эффекты теперь нужно применять на нажатие, и наведение. Чтобы реалистично реагировала?
0
От фантазии уже зависит. Варианты для overState, например:

1. Увеличить самую внешнюю обводку вдвое
2. Drop Shadow + Scale (кнопка визуально выдвинется)
3. Изменить цвет

Что касаемо downState, я его не делаю обычно — он мало живет и скорее «мелькает», нежели красиво отображается. А если речь идет о тачскрине, то это состояние еще и перекрыто пальцем/рукой.
0

Вот, баловался как-то. Сделано эффектами Флеша. Таким образом, текстовое поле может быть динамическим (для локализации, например).
0
Ух ярко здорово!
0
На торт похоже. Свечки вставь
+1
Таким образом, текстовое поле может быть динамическим
И жутко тормозить :)
0
Это точно!: )
+1
Можно отрисовать один раз или закешировать
0
Ну прикольно, но опять же — почему не флэш, все тоже, но в векторе!
Растр зло! Только программный растр!
+1
Ну почему же не флеш — он родимый! Просто вся графика готовится для Stage3D (Starling), которому вектор неведом. Все равно все сводится к растру. Новые времена, новые нравы.
0
времена те же ) никто не мешает переводить вектор в растр при запуске игры. время запуска увеличится, а размер файла игры уменьшится. вопрос в балансе. если время запуска игры будет запредельным, в сравнении с временем загрузки, тогда можно и на чистом растре остановиться )
+1
Экономия на спичках, атлас с десятком кнопок «весит» около 150 килобайт.
Возня с вектором приобретает смысл лишь в игрушках, подгружающих контент с сервера, например. Там оно еще оправдано: нагрузка на сервер существенно спадает. Плюс пользователю пофиг что там за индикатором загрузки кроется и мы можем нанычку тратить его время на растеризацию подгруженного контента. Можно еще пару примеров привести, но не про кнопки )
0
не вся графика в игре состоит из кнопок в 150Кб )
про экономию на спичках я подразумевал, когда писал про время загрузки. естественно, если размер файла вырастет незначительно, то вектором можно принебречь. хотя мне было бы влом лезть в фотошоп и что-то там рисовать для этого. просто в силу особенности своего фреймворка, проще забросить эти объекты в пул для растеризации… но это уже особенности архитектуры подручных вам средств.
0
У каждого свои предпочтения. Мне например лениво запускать Flash, чтобы нарисовать в нем что-то, что легче и приятней сделать в Photoshop. Да и лениво все это потом растеризовать, складывать в атлас, чтобы все по-уму. Ладно еще был бы смысл, но ради полтораста килобайт? Пустые траты.

не вся графика в игре состоит из кнопок в 150Кб
Мы же не станем съезжать на «всю графику» в то время как разговор идет исключительно о кнопках )
0
Мы же не станем съезжать на «всю графику» в то время как разговор идет исключительно о кнопках )
пардон, никогда не делал различий между «одной» и «другой» графикой ) мне это всё больше воспринимается, как нечто единое ) на мониторе ведь всё из пикселей ))
0
У меня более широкий взгляд на графику. Это тянется со времен, когда я работал в рамках одного проекта с вектором, растром, видео, 3D, процедурными текстурами, запеченными текстурами ) вопрос целесообразности всегда стоял на первом месте. Ни к чему париться из-за кнопок, если они легко рисуются в привычной среде и собираются в атлас, готовый к использованию.
Впрочем, в текущей игре остальные ассеты также находятся в предподготовленном состоянии, но причина такого решения уже несколько иная. Там как раз можно было бы и повозиться с вектором, но увы.
0
вы не поверите, но у меня не менее широкий взгляд на графику со стороны программиста графики работавшего преимущественно в 3D проектах со всем вами перечисленным. )) поэтому воспринимаю работу с графикой в более широком смысле. текстура для UI ( кнопок ) и для трёхмерной модели ( или игровых объектов в 2D флэшке ) для меня ничем не отличается. вопрос в том, как построен рабочий процесс и какой инструментарий при этом используется. но это уже взгляд на вещи с другой стороны баррикад и выходит за рамки вашей темы. )
0
Вот мы и закончили тем, с чего начали — не стоит вектор той возни, если вся графика прекрасно подготавливается более простыми и, к тому же, универсальными способами.
0
если бы мне ещё пару лет назад предложили встроить в рендер написанный на C++, растеризатор векторной графики, я бы покрутил пальцем у виска )) а работая во флэше, просто грех такую фишку не иметь )
0
Тут да… с другой стороны и привыкать сильно не хочется — не флЭшем единым )
0
Растр зло? «Лол» — единственное, что приходит на ум.
0
«Лол» — это использовать фотошоп для таких простых вещей ))
+1
Инструмент не сильно важен, главное результат.
Но рисовать растровую графику, по крайней мере, логичней и проще в растровом редакторе.
+1
Чепуха. Такой подход к жизни можно простить лишь тем, кто Photoshop на комп вовсе не установил, либо таки привык рисовать все во Flash IDE — закостенелое предпочтение, тут не поспоришь.

P.S.
В бытность свою моушн-дизайнером на телевидении работал я с одним интересным во всех отношениях человеком. Прекрасный специалист, архитектор по образованию, художник по натуре, зубр в плане тогда еще совсем-совсем зарождающегося 3D и все такое. Так вот он титровки (самые дешевые рекламные ролики с текстом и слайдами для любого местечкового телеканала) делал в 3ds max ))) ну вот что уж тут уж ) привычка — и все тут!
0
Да, соглашусь. Я терпеть не могу создавать элементы интерфейса в ФШ, но это не значит, что он говно. Просто я привык работать с флешовым редактором, где можно легко оперировать с координатными величинами.
0
Когда-то тоже работал видео-дизайнером на ТВ и переболел болезнью «использовать везде 3дс макс» )) Мы все чтоли оттуда? ))
0
Ххех ) как у Жванецкого с консерваторией выходит ))
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.