Сегодня
22 ноября 2024
13:40
Вход Sign In Регистрация Sign Up Забыли пароль ? Forgot password ?
VARVE - Урок 4 Построение класса приложения - Страница 2
       
подробнее...

Теги

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

Статьи сайта

Пишем свою соц. сеть - Реализация файлового хранилища предложений в csv-файле

Тестирование подключения к платежной системе ЕДИНЫЙ КОШЕЛЕК (w1.ru) с использованием скрипта эмулятора

Пишем свою cms - шаг 1

Пишем свою cms - шаг 2

Пишем свою cms - шаг 3

бесплатная флеш игра freeway fury 2 - разработчик Serius Games

бесплатные флеш игры сторонних разработчиков

Как я осваивал Flash

Список уроков на тему создания flash приложений и игр

Как я осваивал Flash - шаг 2 - Основы создания простейших flash - игр

проект портала Идеи Комфорта

игра Веселый Буквоежка

игра Веселый Буквоежка

Использование cron, crontab и планировщика задач

Совместное использование jquery и mootools или других js-фреймворков

Модуль content php performer для megainformatic cms

Пишем компактный слайдер

Что нужно знать для создания сайта ?

Что нужно знать для создания сайта ? Глава 2 - Кодировки и DOCTYPE

Что нужно знать для создания сайта ? Глава 3 - Идём дальше - нанизываем новый код - где объявляются стили css и код javascript

Что нужно знать для создания сайта ? Содержание

Что нужно знать для создания сайта ? css - стили

preg_match или Использование регулярных выражений в php

статьи Тимонина Андрея - Flash. Содержание

статья Тимонина Андрея - Flash. Подготовка к работе.

статья Тимонина Андрея - Flash. Hello world.

статья Тимонина Андрея - Flash. Экспорт SWC библиотеки.

Тимонин Андрей - Несколько слов о себе

статьи Тимонина Андрея - уроки из области веб программирования, создания казуальных игр

статья Тимонина Андрея - Обеспечиваем доступ к объекту из любой точки программы. Singleton

статья Тимонина Андрея - Хронология работы программы. Создаем Лог

статья Тимонина Андрея - Поиск файлов. Получаем список файлов каталога.

статья Тимонина Андрея - Исключения. Создаем класс обработки исключений.

статья Тимонина Андрея - States. Создаем менеджер состояний игры.

статья Тимонина Андрея - Регистрация. Часть 1. Создаем страничку регистрации на сайте.

статья Тимонина Андрея - Регистрация. Часть 2. Создаем обработчик, и заносим информацию о пользователе в Б.Д.

статья Тимонина Андрея - Таймер. Выводим время игры.

статья Тимонина Андрея - DirectX9. Создаем основной класс обработки графики.

статья Тимонина Андрея - DirectX9. Создаем первое приложение.

Что нужно знать для создания сайта ? float - использование в css - стилях

Уроки Fruity Loops Studio (FL Studio) - урок 2 - пишем свою композицию COLD

Уроки Fruity Loops Studio (FL Studio) - урок 3 - экспериментируем с композицией COLD

Что нужно знать для создания сайта ? Стандартные шрифты для сайта

Что нужно знать для создания сайта ? ASC II Коды символов

Уроки Fruity Loops Studio (FL Studio) - урок 4 - пишем первый вариант композиции COLD

Популяризация Современных Научных Знаний и Размышления на околонаучные темы. СОДЕРЖАНИЕ

Популяризация Современных Научных Знаний и Размышления на околонаучные темы. Энергетический кокон

Модуль галерей для любой cms

Уроки Photoshop - Быстрый старт

Мои Музыкальные Миры - страница 2

megainformatic cms rs

Мега Информатик - Примеры моих работ

Мега Информатик - Портфолио выполненных проектов сайтов и приложений

Уроки Photoshop - Текстуры

Уроки Photoshop - Создаем текстуру горной породы

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

Уроки Photoshop - Рисование текстуры травы

Уроки css - атрибут position

Уроки Photoshop - Рисование текстуры песка

Уроки Photoshop - Подготовка набора текстур

Уроки Photoshop - Рисование текстур глина, грязь

Новогодняя дискотека 2013 на megainformatic точка ru

Программируем на C++ с использованием MFC

Программируем на C++ с использованием MFC - Создание MFC приложения

Программируем на C++ с использованием MFC - Создание MFC приложения - hello, world !

Как создать игру ? - Пишем игровой движок с нуля

Как создать игру ? - Пишем игровой движок с нуля - Вступление

Как создать игру ? - Пишем игровой движок с нуля - Общая структура будущего игрового движка

Разное

Как создать игру ? - Пишем игровой движок с нуля - DXUTMainLoop - цикл работы DirectX-приложения

Варианты макетов Психолог 911

Шаблоны для сайтов - что это и какие они бывают ?

Уроки Photoshop - текстуры

Мои Музыкальные Миры - готовая музыка mp3 - новинки 2013 года

Уроки Photoshop - Огонь, создание огня

Уроки Photoshop - Создание растительных текстур и объектов

Fruity Loops Studio 9 - Как синтезировать свои сэмплы - изучаем возможности плагина Sytrus

Видоизменяем тему для Wordpress под свои нужды

Уроки Photoshop - Продолжаем создавать основные типы текстур - металл

Уроки Photoshop - Остановимся на создании элементно-упорядоченных текстур на примере создания чешуевидной текстуры

Уроки Photoshop - Займемся рисованием небесных текстур - небо и облака

Человеко-понятный УРЛ - рассматриваем достоинства и недостатки

Все уроки Photoshop на varve точка ru

Из жизни известных программистов - юмор

Dr Web проверка сайта на вирусы

Основы верстки

Что нужно знать для создания антивируса ?

С Днём Святого Валентина

С Днём рождения !

Мои Музыкальные Миры - готовая музыка mp3 - новинки 2013 года - музыка и звуки для игры Brain Storm / Мозговая Атака

С Праздником 8 Марта Вас Дорогие женщины !!!

Разное - 8 марта 2013 - Шашлыки :))))

Программирование на языке ассемблера - Урок 2 - первая полезная программа - выполнение арифметических вычислений - сложения, вычитания, умножения и деления

Программирование на языке ассемблера - содержание

Мои Музыкальные Миры - готовая музыка mp3 - новинки 2013 года - музыка и звуки для игры Zomby Brain Burger

Создание сайта бесплатно или под заказ

zbb

Программирование на языке ассемблера - Урок 3 - первая полезная программа - выполнение арифметических вычислений - сложения, вычитания, умножения и деления - разбираем логические ошибки

Мои Музыкальные Миры - готовая музыка mp3 - новинки 2013 года - альбом Бесконечное Движение

Уроки Photoshop - Создание тканеподобных текстур

Уроки Photoshop - Раскраска

Уроки Photoshop - Варианты раскраски

Как создать flash баннер ?

Модуль отзывов/комментариев для вашего сайта

Модуль короткие ссылки short link

Приключения Кости Коробкина - Как я провел лето - интерактивный комикс

Новогодняя вечеринка 2014 на varve.ru

Приключения Кости Коробкина - С новым годом - интерактивный комикс

megainformatic - Система управления сайтом на php - megainformatic cms admin files

varve Композиции музыкального альбома ОЖИДАНИЕ и ДЕЙСТВИЕ - автор Синицин Андрей aka cj andy megainformatic

cj megainformatic подборка композиций ЛЕТО 2014

varve.ru лицензионное соглашение с конечным пользователем

varve.ru Мои Музыкальные Миры - готовая музыка mp3 - НЕИЗВЕДАННАЯ ЗЕМЛЯ - авторская музыка + подборка композиций ЛЕТО 2014 - cj megainformatic - страница 2

varve.ru Мои Музыкальные Миры - готовая музыка mp3 - НЕИЗВЕДАННАЯ ЗЕМЛЯ - авторская музыка + подборка композиций ЛЕТО 2014 - cj megainformatic - страница 3

varve.ru Мои Музыкальные Миры - готовая музыка mp3 - ПОГОНЯ ЗА КРОЛИКОМ - pursuit of the rabbit - авторская музыка набор композиций Осень 2014 - cj megainformatic - страница 1

varve.ru Мои Музыкальные Миры - готовая музыка mp3 - ДРУГАЯ АЛЬТЕРНАТИВА - other alternative - авторская музыка, сборник композиций ЛЕТО 2015 - cj megainformatic - страница 1

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

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

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

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

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

Создайте изображение 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,1762