Заставить людей говорить с Paint.NET

Мы сделаем изображения более выразительными, добавив филактеры, что делается довольно просто с Paint.NET. Но еще более интересный эффект произойдет, если пузыри появятся в результате действий пользователя.

1) Добавить пузырь на изображение

Простой метод

    С
  1. помощью инструмента «Эллипс» или скругленного прямоугольника нарисуйте фигуру с черным краем.
  2. Залить белым.
    3. С
  3. помощью инструмента обводки сформируйте угол. Используйте кисть и белый цвет, чтобы объединить этот угол с пузырем .
    Или нарисовать другие пузыри меньшего размера, чтобы выразить мысль персонажа.
  4. С помощью текстового инструмента добавьте содержимое, размер которого будет изменен, чтобы соответствовать размеру пузыря.

Выбрать шрифт

Некоторые шрифты лучше подходят для этого типа текста :

Это фонты Windows по умолчанию. В сети можно найти специализированные фондты для скачивания, такие как Balloon и т.д.

Более сложная методология

Использование слоев позволит настроить пузырь вокруг текста без удаления исходного изображения.

  1. Открыть окно слоев, если оно еще не открыто (Окно -> Слой или F7).
  2. Добавьте новый слой, нажав зеленую кнопку «+» внизу.
  3. Добавить другой слой.
    Нет необходимости переименовывать или менять свойства .
    4. В
  4. первом слое введите текст.
  5. Перейти ко второму слою. Добавьте вокруг текста овал или прямоугольник и отрегулируйте его размер.
  6. Добавьте хвост или небольшие пузыри, как описано выше.
  7. Заливка белым или выбранным цветом.
  8. Щелкните первый слой. Объединить («Слои» -> «Объединить»).
  9. Объединить второй слой.
  10. Сохранить изображение .

Использовать предустановленные выноски

Принцип заключается в том, чтобы добавить в систему шрифт-символ, буквы которого представляют собой пузыри разной формы.

Вместо того, чтобы рисовать пузырь во втором слое, можно перейти в текстовый режим и ввести букву-пузырь, которую размещают и изменяют размер под первым слоем, содержащим метку.

На Dingbat можно найти предустановленные пузыри (ищите «Komica Bubble») или создать свои с помощью редактора шрифтов.

2 Добавить интерактивность

Мы хотим, чтобы пользователь показал пузырь, нажав на изображение. Сценарий описанной на Xul.fr загадочной картины будет адаптирован для случая.

Принцип будет заключаться в наложении двух кадров, при этом первоначальное изображение находится под измененным кадром с помощью пузыря, или если предпочитается второй слой, только преобразованный в изображение с прозрачным фоном.

Второе изображение с пузырем становится невидимым при загрузке по стилю CSS. Она становится видимой, когда пользователь нажимает на нее и скрывает первоначальное изображение.

Вставляемый код выглядит следующим образом:

<div class="bbox" style="width:360px;height:360px" onClick="showPic('over')">
    <span id="over" class="over">
        <img src="over.jpg" width="360" height="360">
    </span>
    <span id="under" class="under">
        <img src="under.jpg" width="360" height="360">
    </span>
</div>

Код CSS и JavaScript поясняются в уже процитированной статье.

Демонстрация: обсуждение изображений

Плюс интерактивность...

Щелкните изображение, чтобы показать филактер.

См. также...