Сегодня
24 сентября 2018
5:15
Вход Sign In Регистрация Sign Up Забыли пароль ? Forgot password ?
VARVE - Глубины программирования на C++
Глубины программирования на C++
подробнее...

Теги

сайты, игры, дизайн, продвижение, php, html, css, my sql, c++, delphi, photoshop, 3ds max, fl studio, трекерская музыка, уроки

Статьи сайта

Создание компьютерных игр на основе DirectX в среде Delphi 6, 7

Создание компьютерных игр на основе DirectX в среде Delphi 6, 7 - Почему избраны DX8 и Delphi ?

Основы IDirectMusic8 в среде Delphi6-7

Основы DirectInput8 в среде Delphi 7

Основы DirectSound8 в среде Delphi6-7

Плагин для 3DS MAX из DX9 SDK

Мастер-класс: Создание модели и текстуры Коммандного Центра (как в StarCraft 2)

Мастер-класс: Создание модели и текстуры Коммандного Центра (как в StarCraft 2) Часть 2

Мастер-класс: Создание модели и текстуры Коммандного Центра (как в StarCraft 2) Часть 3

Мастер-класс: Создание модели и текстуры Коммандного Центра (как в StarCraft 2) Часть 4

Мастер-класс: Создание модели и текстуры Коммандного Центра (как в StarCraft 2) Часть 5

Мастер-класс: Создание модели и текстуры Коммандного Центра (как в StarCraft 2) Часть 6

Система управления сайтом - megainformatic cms e-shop

Моделируем девушку в 3ds max - Женская грудь

Моделируем девушку в 3ds max - Тело

Уроки 3ds max - Введение в 3ds max

ГАЛЕРЕЯ 3D-моделей

СОЗДАНИЕ МАКЕТА ПОМЕЩЕНИЯ

Создание макета помещения - этап 2

МОДЕЛИРОВАНИЕ НА УРОВНЕ МНОГОУГОЛЬНИКОВ

СОЗДАНИЕ ПРЕДМЕТОВ ОБСТАНОВКИ ПОМЕЩЕНИЯ

Моделирование обстановки помещения

Создание модели автомобиля

Создание текстурной развертки для модели автомобиля

Создание анимации вращающихся колес автомобиля

игра Нечто: Необъяснимое и в плену желаний

Основы 3D-анимации, экспорт скелетной анимации

Подготовка модели к использованию скелетной анимации

Продолжаем Создание скелета для данной модели

Построение ирерархических связей между объектами и основы 3d анимирования

Особенности экспорта моделей и анимации экспортером kWXPort080719 из 3ds max 2009 

Создание модели броневика (Хэд)

megainformatic cms e-mailer

Моделируем девушку в 3ds max - Моделируем руку

Моделируем девушку в 3ds max - Кисть руки

Бесплатная Система Управления Вашим Сайтом - megainformatic cms free

Путешествие в мир 3d

Путешествие в мир 3d - страница 2

Путешествие в мир 3d - страница 3

Путешествие в мир 3d - страница 4

Путешествие в мир 3d - страница 5

Путешествие в мир 3d - страница 6

Создание модели броневика (Хэд) - Анимация вращения колес

megainformatic cms express files

Моделируем девушку в 3ds max - Моделируем голову

Моделируем девушку в 3ds max - Моделируем голову страница 2

Уроки Photoshop - Чудеса

megainformatic cms express files - Развертывание сайта на Вашем хостинге

Настольная игра "Веселый Буквоежка"

Уроки delphi directx 8.1

Уроки delphi directx 8.1 - Урок 1 - Введение в Delphi DirectX 8.1. Создание шаблона стартового приложения.

Уроки delphi directx 8.1 - Урок 1 - Введение в Delphi DirectX 8.1. Создание шаблона стартового приложения. Страница 2

Урок 2 Создаем и обрабатываем команды меню.

Урок 2 Создаем и обрабатываем команды меню. Страница 2

Урок 3 Оконный и полноэкранный режимы работы D3D-приложения. Управление игрой средствами DirectInput8

Урок 3 Оконный и полноэкранный режимы работы D3D-приложения. Управление игрой средствами DirectInput8 - Страница 2

Урок 3 Оконный и полноэкранный режимы работы D3D-приложения. Управление игрой средствами DirectInput8 - Страница 3

Урок 4 Построение класса приложения

Урок 4 Построение класса приложения - Страница 2

Урок 5 Построение классов игровых объектов и других необходимых классов

Урок 5 Построение классов игровых объектов и других необходимых классов - Страница 2

Урок 6 Игровая логика

Заметки по joomla - JFolder::create: Path not in open_basedir paths. Что это?

megainformatic cms express files - Добавление статей на сайт под управлением megainfromatic cms express files

Урок 7 2D-анимация

Урок 8 Загрузка/Сохранение текущей игры, режим паузы, режимы часов/будильника, запуск браузера Internet Explorer для показа сайта разработчика и других интернет-ресурсов

Урок 9 Тестирование и отладка приложения

Мои Музыкальные Миры

уроки Photoshop free

Создание фотореалистичной текстуры травы

megainformatic cms express

Моделируем девушку в 3ds max - Соединяем все части тела в единую модель

Моделируем девушку в 3ds max - Соединяем все части тела в единую модель страница 2

Моделируем девушку в 3ds max - Соединяем все части тела в единую модель страница 3

Методы создания растровых изображений в Adobe Photoshop

Рабочее пространство Adobe Photoshop

Бесшовные (тайловые) текстуры

Создание изображений огня, воды, неба

Создание текстур горных пород и суши (урок 5)

Рисование персонажей (урок 6)

Рисование фона (урок 6 часть 2)

Рельефные изображения

Добавление статей на сайт под управлением megainformatic cms express

Воспроизведение файлов в форматах it, xm, s3m, mod

Воспроизведение файлов в форматах it, xm, s3m, mod - страница 2

Воспроизведение в игре музыки в формате XM

Воспроизведение файлов в формате OGG Vorbis

игра "Веселый Буквоежка" - инструменты разработки

Игра "Веселый Буквоежка" - история создания проекта

Как анимировать паука ?

Моделируем девушку в 3ds max - Текстурируем модель

Моделируем девушку в 3ds max - Текстурируем модель страница 2

Моделируем девушку в 3ds max - Текстурируем модель страница 3

Моделируем девушку в 3ds max - Текстурируем модель страница 4

Моделируем девушку в 3ds max - Текстурируем модель страница 5

Что нужно для создания собственного сайта ?

Моделируем девушку в 3d используя 3ds max

Уроки Fruity Loops Studio - пишем свою музыку

Уроки Fruity Loops Studio - пишем свою музыку - урок 1 - Быстрый старт

Сброник статей по дизайну и компьютерной графике. Обзор.

Уроки 3d на delphi directx - Вывод Заставки

Добро пожаловать в систему управления сайтом megainformatic cms

Создание эскиза и макета страницы сайта

Верстка созданного макета

Добавление модулей обеспечивающих минимально необходимый функционал

Основы добавления контента на сайт, управления и поддержки сайта

Проверка работы сайта, установка на хостинг

Основы продвижения созданного сайта

Создание шаблонов

Создание интернет-магазина

Музыкальные мир - композиция Морозное утро - 10 версий

ЛЕТО

Нечто Необъяснимое - пре релиз

megainformatic cms admin

megainformatic cms admin

Основы создания 3d игр - проект Тайны Морских Глубин

     
  [к содержанию] [назад] [далее]  
     
 

Создание изображений огня, воды, неба

Рисование пламени, взрывов требует определенных навыков, но в целом это сводится к определенному набору инструментов и правил работы, что в конечном итоге даст Вам (при определенной сноровке) нужный результат.

На приведенном рисунке показано пламя от взрыва. Если Вы разберетесь с методикой создания сложных текстур и научитесь анализировать чужие работы (готовые изображения), то Вы сможете создавать и нечто новое или необычное.

Попробуем создать что-то подобное.

Создайте изображение 256х256 пиксель, с прозрачным фоном.

Изобразите сначала контуры вашего будущего пространства, заполненного огнем.

Выделите внутреннее пространство волшебной палочкой.

Создайте новый слой.

Определите два цвета: желтый – для цвета переднего плана и красный – для фона.

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

У Вас должно получиться что-то похожее на приведенном рисунке.

Теперь используя инструменты Осветление и Затемнение и нужные размер, форму и параметры кисти придайте пламени более реалистичный вид. Рисуйте как бы клубы линий-переходов.

Используя инструмент Клон-Штамп пересаживайте отдельные фрагменты красных областей в желтую зону и наоборот – это придаст большую реалистичность.

Используя инструмент ластик с нужными параметрами (Flow и Opacity) сделайте, чтобы пламя было по краям и немного изнутри слегка прозрачным или полупрозрачным.

Отмасштабируйте изображение уменьшив в 4 раза, т.е. задав новые размеры – 64х64.

Произведите цветокоррекцию, используя Изображение > Регулировки > Тон/Насыщенность, сделав пламя более насыщенным и ярким.

Используя те же пункты, но подпункт Уровни измените баланс освещенности – сместив точку белого в изображении на значение примерно 110-130.

Сохраните полученный результат в личную папку.

Поэкспериментируйте с изменением вида имеющегося пламени:

Изменение Яркости/Контраста

Изменение цветового баланса

Изменение уровней освещенности (Уровни)

Изменение цвета – вид облака – Тон/Насыщенность

Рисование воды

Рисование воды можно осуществить теми же методами, что и пламя. Единственное отличие – использовать другие исходные цвета – не красный и желтый, а, например синий и голубой или зеленый и синий и т.д.

Попробуйте создать кусочек водной поверхности подобный приведенному на рисунке.

Замечание: попробуйте выделять отдельные фрагменты в изображении при помощи лассо, а затем заливать градиентом. Затем размажьте участки используя инструмент Палец (Smudge).

Усовершенствуйте изображение, применив те же методики, которые Вы использовали при создании пламени.

Замечание: попробуйте менять не только размеры, но и форму кистей в инструментах Dodge, Burn, Eraser, Clone, Smudge. Попробуйте также использовать инструменты Sharpen, Blur, Sponge.

Рисование воды по стадиям:

Стадия 1 – выделенные при помощи лассо области заливались различными цветами при помощи градиентной заливки (радиальной и линейной).

Стадия 2 – после применения инструментов Smudge (Палец) и Sponge (Губка). Губка работала в режиме насыщения (Saturate).

Стадия 3 – после применения инструментов Dodge (Осветление) и Burn (Затемнение). Затемнение производилось большими размашистыми штрихами, группа воздействия на цвет – Shadows (Тени).

Стадия 4 – после применения Blur и Sharpen (Размытия и Резкости).

 

Стадия 5 – после применения фильтра: Filter > Distort > Ocean Ripple

(Океанская рябь).

Альтернатива стадии 5 – Стадия 5АFilter > Distort > Wave.

Попробуйте также применить эти 2 фильтра последовательно – один за другим. Сравните результаты.

 

Заключительная стадия – масштабирование изображения (уменьшение в 4 раза).

Замечание: если после масштабирования по периметру появляется рамка из более светлоокрашенных пикселей, то избавиться от нее можно следующим образом: отмените масштабирование, проведите новое масштабирование, но с приплюсовкой по 2 пикселя к высоте и ширине (т.е., например, не 64х64, а 66х66). После проведения операции при помощи рамки выделите область 64х64, внутри получившейся пиксельной рамки, так, чтобы последняя в нее не попадала и скопируйте в новое изображение.

Зацикливание текстуры

Если Вы сейчас зададите Вашу воду в качестве шаблона для заливки (Edit > Define pattern), а потом проведете с помощью него пробную заливку тестового изображения (например, 1024х768), то ясно заметите наличие у текстуры резких переходов – швов.

Как создать бесшовную текстуру?

Для зацикливания Вашей текстуры водной поверхности используйте Filter > Other > Offset; укажите нужные размеры (половина ширины и высоты) и пункт Wrap around – заворачивание (т.е. зацикливание, что нам и требуется). Результат приведен на рисунке.

Естественно, что после такой операции швы перейдут вовнутрь текстуры – образуя как бы крест. Чтобы избавиться от него используйте следующие методики:

Метод 1 – использование «засадки» Клоном – При помощи Clone Stamp копируются фрагменты и аккуратно располагаются на перекрестии. Ваша задача – не только скрыть «крест», но и позаботиться об однородности тайла, иначе на новом месте может получиться новый крест из кусочков образцов штампа.

На рисунках приводится:

Слева - неудачный вариант закрытия;

Ниже – более удачный вариант.

 

 

Метод 2 – использование выделения областей при помощи волшебной палочки и их зацикливание на отдельном слое.

Для этого – создайте новый слой и скопируйте на него какую-либо цветовую область. Затем зациклите ее.

Здесь задача заключается в том, чтобы не «переборщить» с выделением области. Если установить параметр Tolerance (обратная чувствительность) так, что выделяется почти всё, то никакого эффекта не будет – всё тот же крест, только уже на новом слое.

Комбинация методов – после проведений тестовых заливок созданными текстурами Ваш результат может оказаться все еще неудовлетворительным. Тогда попробуйте комбинировать 2 этих метода: сначала примените Метод 2, а затем Метод 1 – для нового (верхнего) слоя. В Методе 1 вместо Клон-Штампа попробуйте использовать ластик.

Можно поступить и так: дублировать слой, зациклить его, используя ластик спиралеобразно стереть крест.

Другие методы создания водных текстур

Запустите Corel Draw, создайте изображение 256х256, в нем прямоугольник 256х256. Уберите у него обводку. Залейте прямоугольник какой-либо текстурой – Ocean water, Swimming pool или другой. Экспортируйте созданное изображение в BMP и откройте из Photoshop. Поэкспериментируйте с видоизменением параметров текстуры сначала в Draw (вкладка Object Properties > Заливка > Кнопка Edit). Затем в Photoshop – применяя Изображение > Регулировки > Уровни, или Тон/Насыщенность или другие.

А также попробуйте применять различные фильтры. Создайте тайловую (т.е. цикличную) текстуру.

Создание анимированной текстуры

Такие среды как вода, пламя, небо в реальных условиях находятся в постоянном движении – происходит постепенное изменение их вида.

Чтобы реализовать это в текстуре достаточно создать анимированную текстуру – т.е. содержащую несколько статичных кадров, меняющихся во времени. Затем подобную текстуру можно сохранить в формате анимированный GIF или BMP с вертикальным или горизонтальным расположением кадров. Тогда данная текстура превратится в анимированную.

Все что нам требуется – это создать несколько изображений одной и той же текстуры с немного измененным видом на отдельных слоях. Сохранить полученный файл в PSD. Открыть его из Image Ready, произвести раскадровку и сохранить в GIF. Результат можно просмотреть из стандартной программы просмотра изображений Windows или прямо в Image Ready нажав кнопку Play.

В пакете Corel Graphics Suite 11 для создания анимаций используется программа Corel Rave.

Итак, приступим к выполнению нашей задачи средствами Photoshop. Дублируйте слой, содержащий изображение поверхности воды.

Создайте таким образом 8 слоев. Дайте слоям имена 1,2, …, 8.

Используя Filter > Liquify произведите постепенное видоизменение вида слоев.

Скройте все слои кроме 1-го. На панели инструментов нажмите кнопку Jump To Image Ready.

На панели Animation щелкните кнопку Duplicate Current frame столько раз, сколько требуется создать кадров. Но перед этим скройте все слои кроме первого (если Вы еще не делали этого). Установите величину временной задержки кадра (например 0,2 с). В каждом кадре установите отображение только соответствующего слоя.

Сохраните файл под именем swin_anim.PSD,

А затем используя пункт Save Optimized As в формате GIF.

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

Замечание: порядок отображения слоев в ваших кадрах должен циклично меняться. Например у Вас 4 слоя, значит будет 6 кадров:

1-2-3-4-3-2. Так как анимация текстур производится циклично, то будет казаться, что опять происходит возврат к началу (1 кадр со слоем 1).

Файлы в формате GIF хорошо использовать в WEB-публикациях – т.к. Internet Explorer поддерживает анимированные GIF-файлы – убедитесь сами – запустите IE и откройте ваш GIF.

Но иногда, Вам может потребоваться размещение анимации в BMP-файле.

Это делается просто – все кадры размещаются в одном изображении в вертикальном или горизонтальном порядке. При этом ширина или высота исходного изображения увеличивается на ширину(высоту) одного кадра * на число кадров. (см. рисунки).

 

Как выполнить такую раскадровку средствами Photoshop?

Предположим Вы хотите расположить кадры вертикально. Размеры кадра 256х256. Число кадров – 6.

Создайте новое изображение размерами 1536х256.

В исходном изображении выделите все (Select > All) и последовательно копируйте содержимое каждого слоя и вставляйте в новое изображение. В новом изображении отпозиционируйте изображения на слоях, так чтобы они шли один за другим.

Склейте все слои и сохраните результат в формате BMP.

Создание анимированной текстуры неба

Создайте изображение 256х256.

Залейте фон небесно-голубым цветом.

Дублируйте слой.

Используя инструмент Осветление (Dodge), нужную форму кисти, нужную группу и степень воздействия нарисуйте облака.

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

Создайте анимированное движение облаков – для этого на каждом новом слое постепенно сдвигайте изображение вправо и вниз.

Чтобы уходящие за пределы изображения облака появлялись с противоположной стороны:

выделите опустевшее пространство (на сдвигаемом слое).

 

Вернитесь на исходный слой и переместите область выделения вправо. Скопируйте выдвигаемую область.

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

Аналогично выполняется восстановление того, что сдвигается сверху - вниз.

При этом будет возникать иллюзия непрерывного движения облаков.

Созданное многослойное изображение анимируйте в Image Ready, сохраните в PSD и GIF, просмотрите результат анимирования.

 

 

 

 
     
  [к содержанию] [назад] [далее]  
     
     
 

Оставленные комментарии



Рейтинг@Mail.ru
Время загрузки: 0,0340