Nixland.org

[[gimp:3d_logo]]

Вы посетили: » 3d_logo

Авторизация

В данный момент вы не в системе. Авторизируйтесь при помощи следующей формы. Замечание: для работы у вас должны быть включены cookies.

Войти

У вас еще нет аккаунта? Извольте получить: Зарегистрироваться

Nixland.org

Valid XHTML 1.0 Transitional

Текст и изображения Copyright (C) 2002 Mel Boyce и не могут быть использованы без разрешения автора.

Вступление

Это руководство ориентировано на начинающего пользователя GIMP. Некоторые методы могут заинтересовать и более опытных пользователей. Эту же процедуру я использовал для создания логотипа на своей домашней странице, хотя с некоторыми другими настройками. Продвигаясь дальше я укажу на различия. Для ясности этого руководства я добавил много скрин-шотов, так что - наслаждайтесь :-)

Шаг 1

:gimp:3dlogo_logo-00.png Загрузите The GIMP и создайте новое изображение. Я использовал изображение с белый фоном шириной в 500px и высотой в 200px. Я посчитал эти размеры подходящими, т.к. на момент написания этой статьи на моем сайте использовались таблицы шириной в 500px.

Шаг 2

:gimp:3dlogo_logo-01.png Начнем с создания некоторого текста шириной в 400px и не сильно тонкого. Я использовал шрифт, который называется Pricedown. Текст должен быть создан как новый слой. Если вы используете GIMP FreeType, тогда это уже сделано за вас, в противном случае нажмите на кнопку Новый слой в диалоге “Слои, Каналы, Контуры” (кнопка выглядит как пустой листок бумаги). Теперь нужно установить размеры слоя равным размерам изображения. Сделайте это с помощью меню Слоев (правый клик или Control+Click на необходимом слое) и выберите Слой к размеру изображения (Layer to Imagesize - если Gimp не руссифицирован, - прим.).

Шаг 3

:gimp:3dlogo_logo-02.png Дважды создайте копию слоя с текстом. Одна для создания эффекта осветления, другая для эффекта затенения. Слой с осветлением должен быть белым, так что выбираем его, включаем переключатель “Сохранять прозрачность” в диалоге “Слои, Каналы, Контуры” и заливаем белым цветом. Это легко делается перетаскиванием белого цвета из Панели инструментов (Toolbox) на изображение (при условии, что цветной слой в данный момент выделен) (такого же эффекта можно достичь перетаскиванием цвета сразу на слой в диалоге “Слои, Каналы, Контуры” - прим.). “Сохранять прозрачность” гарантирует нам, что все трансформации или заполнения этого слоя будут применяться только к непрозрачной части изображения.

Шаг 4

:gimp:3dlogo_logo-03.png Создайте копию текстового слоя еще раз и переместите ее на самый верх стека слоев (используйте маленькую стрелку вверх внизу диалога “Слои, Каналы, Контуры”). Убедитесь, чтосне включено и примените к этому слою “размывание”. Я использовал “Гауссово размывание” (Gaussian Blur, - прим.) (RLE) в 10px. Когда я создавал оригинальный логотип, оно было установлено в меньшее значение для того, чтобы сделать еффект менее округлым.

Вы должны удостовериться, что граница слоя больше чем слой, тогда “размывание” ложится красиво. Это упоминается во втором шаге.

Шаг 5

:gimp:3dlogo_logo-04.png Сделайте одну копию “размытого” слоя (tmp1 и tmp2). Эти слои используются для создания светлой границы текста.

Шаг 6

:gimp:3dlogo_logo-05.png Переместите один из “размытых” слоев вниз и вправо на 5 пикселей. Точное количество пикселей зависит от того, как было проделано “размытие” и от того, как размытие должно распологаться вокруг текста, словом, выбирайте на свой вкус. Вы можете перемещать слои используя инструмент “Перемещение слоев и выделенных областей” (Move) и клавиши-стрелки на вашей клавиатуре. Неважно, какой из “размытых” слоев вы использовали на данном шаге, но другой вы не должны перемещать.

Шаг 7

:gimp:3dlogo_logo-06.png Теперь создадим веделенную область используя “размытый” слой (который мы двигали в шаге 6), используя “Альфа-канал в выделенную область” (Alpha to Selection). Это точное выделение слоя, включающее информацию о прозрачности. Полезная вещь. Я напоминаю, что выключил другой “размытый” слой, это было сделано для того, чтобы видеть как далеко я перемещаю слой в шаге 6.

Шаг 8

:gimp:3dlogo_logo-07.png Теперь мы выделили слой...

Шаг 9

:gimp:3dlogo_logo-08.png Выберите осветленный слой и ...

Шаг 10

:gimp:3dlogo_logo-09.png Вырежите (Правка/Вырезать или CTRL+X на PC или Command+X на Mac). Это уберет выделенную область “размытого” слоя из осветленного слоя. Вы можете использовать маски каналов, но я человек с простыми потребностями и необходимостями. Следующий шаг, который я не буду описывать из-за того, что он повторяет шаги 6-10, сделайте то-же с другим “размытым” слоем (см. шаги 5 и 6). Переместите этот слой в противоположном направлении (вверх и влево на 5 пикселей), после этого нужно вырезать этот слой из затененного слоя. После того, как вы это сделали, удалите оба “размытых” слоя (tmp1 и tmp2).

Шаг 11

:gimp:3dlogo_logo-10.png Мне нравится делать перерывы во время создания изображений, сейчас как раз такой момент. Хорошее время выпить кофе, выкурить сигарету. Так же я удаляю промежуточные слои.

Шаг 12

:gimp:3dlogo_logo-11.png Теперь добавим первые элементы трехмерности логотипу. Оригинальный слой с текстом - слой для цвета, который вы хотите добавить. Я использовал серый, но вы можете использовать любой цвет на ваше усмотрение. Хорошая мысль поиграть с этим - вы можете получить отличный логотип. Проверьте, что “Сохранять прозрачность” включено для этого слоя.

Шаг 13

:gimp:3dlogo_logo-12.png Как вы видите - это становится на что-то похожим.

Шаг 14

:gimp:3dlogo_logo-13.png Создайте новый прозрачный слой, назовем его outline. Перемещайте его вниз в стеке слоев, пока он не окажется под слоем с оригинальным текстом.

Шаг 15

:gimp:3dlogo_logo-14.png Выберите оригинальный текстовый слой (цвет которого вы изменяли) и повторите “Альфа-канал в выделенную область” снова. Нажмите правой кнопкой на изображении, выберите “Выделение” →“Увеличение”. Это сделает новую область выделения больше на указанное количество пикселей. Я использовал значение в 2 пикселя. Теперь, когда у вас есть выделенная область переключитесь на слой outline чтобы можно было залить его (шаг 17). Вы увидите это ниже.

Шаг 16

:gimp:3dlogo_logo-15.png Сейчас это выглядит так.

Шаг 17

:gimp:3dlogo_logo-16.png Залейте слой outline черным цветом и отмените выделение (CTRL+SHIFT+A на PC или Command+SHIFT+A на Mac). Как вы можете видеть, теперь у изображения более контрастный фон. Сейчас создайте копию слоя и переместите ее ниже оригинального слоя (outline). Проверьте, что “Сохранять прозрачность” выключено и примените к новому слою “Размытие”. Мне нравятся мягкие тени, поэтому я использовал “Гауссово размывание” (RLE) радиусом в 30 пикселей. Переместите слой вниз на 50 пикселей и передвигайте вправо и вниз пока это не станет смотреться хорошо.

Хороший способ заливки выделенных областей или слоев, у которых включено “Сохранять прозрачность”, - это простое перетаскивание цвета из панели инструментов в область слоя.

Шаг 18

:gimp:3dlogo_logo-17.png Сейчас диалог “Слои, Каналы, Контуры” должен быть таким.

Шаг 19

:gimp:3dlogo_logo-18.png Я сделал копии осветленного и затененного слоев и смешал их с нижними слоями, используя режим перекрытия. Это сделало края более обьемными.

Шаг 20

:gimp:3dlogo_logo-19.png Создайте новый прозрачный слой, назовем его rust, и выберите инструмент “Создание и редактирование контуров” (bezier tool).

Шаг 21

:gimp:3dlogo_logo-20.png Делаем что-то похожее на это...

Шаг 22

:gimp:3dlogo_logo-21.png Это. Создайте из контура выделенную область. Используйте Выделение → Растушевка (<Image> Select → Feather, - ориг.) чтобы размыть (округлить) выделенную область. Я использовал значение 10 пикселей.

Шаг 23

:gimp:3dlogo_logo-22.png Выбираем красивый оранжевый или коричневый цвет для слоя rust. Для логотипа моего сайта я использовал красно-коричневый цвет, но сейчас выбираю ярко-оранжевый. Заливаем выделенную область этим цветом. Используя известный нам “Альфа-канал в выделенную область”, получаем выделение оригинального текстового слоя. После этого делаем активный слой rust. Инвентируем выделение (CTRL+I или Command+I) и вырезаем. Это должно оставить только ту часть слоя rust, которая перекрывает буквы и ничего более.

Шаг 24

:gimp:3dlogo_logo-23.png Измените режим слоя rust на умножение (Muliply).

Шаг 25

:gimp:3dlogo_logo-24.png Изображение должно быть похоже на это. Не беспокойтесь - скоро оно станет красивее.

Шаг 26

:gimp:3dlogo_logo-25.png Добавляем маску слоя rust (он должен быть активным).

Шаг 27

:gimp:3dlogo_logo-26.png Проверьте, что вы сбросили цвета на панели инструментов, используйте инструмент “Градиент” на маску слоя. Вы получите что-то, похожее на это.

Шаг 28

:gimp:3dlogo_logo-27.png Изображение выглядит вот так.

Заключение

:gimp:3dlogo_logo-28.png Немного манипуляций и вы получите это. Я скопировал слой rust и переместил их (оригинал и копию) вниз по стеку так, чтобы осветленный и затененный слои были выше их. Так же я сделал копию оригинального текстового слоя, включил “Сохранять прозрачность” и использовал Фильтры → Рендеринг → Облака → Сплошной шум (<Image> Render → Clouds → Solid Noise).

 
© 2006 Права принадлежат творческой группе Nixland.org