ria pc game
translate to English   translate to Chinese
fle game engine - движок для создания игр
fle game engine - движок для создания игр


Balls and holes PC game / Balls and Holes PC игра
Вакансии
Игродельня
Сегодня
22 февраля 2019 16:24
Вход Регистрация Забыли пароль ?

megainformatic - Теория и практика 3d игр - Важные замечания
        [статьи] [как создать игру ну, погоди!] [к содержанию] [scene2game] [do
подробнее...

Теги создание сайтов, создание игр, дизайн, игры, информатика, уроки photshop, php, c++, музыка, delphi, cms, робосайт
Статьи сайта
megainformatic - Костя Коробкин - В гостях у тёти Светы (kk as) - онлайн комикс - страница 2

megainformatic - Костя Коробкин - В гостях у тёти Светы (kk as) - онлайн комикс - страница 3

megainformatic - Костя Коробкин - В гостях у тёти Светы (kk as) - онлайн комикс - страница 4

megainformatic - Костя Коробкин - В гостях у тёти Светы (kk as) - онлайн комикс - страница 5

megainformatic - первый независимый онлайн-журнал комиксов ККК Костя Коробкин Комикс номер 1 март 2016

megainformatic - Костя Коробкин - В гостях у тёти Светы (kk as) - онлайн комикс - страница 6

megainformatic - Костя Коробкин - В гостях у тёти Светы (kk as) - онлайн комикс - страница 7

megainformatic - Эмулятор БК-0010.01 версия 2.6 для Windows 9x/Me/2000/XP автор Юрий Калмыков 2002 год

megainformatic - api получения готового решения для решения различных задач возникающих при создании сайта

megainformatic - Костя Коробкин - В гостях у тёти Светы (kk as) - онлайн комикс - страница 8

роман Eternity Вечность - автор Синицин Андрей megainformatic

роман Eternity Вечность - автор Синицин Андрей megainformatic - страница 2

роман Eternity Вечность - автор Синицин Андрей megainformatic - страница 3

роман Eternity Вечность - автор Синицин Андрей megainformatic - Windows Sockets 2, ping, Windows SDK 7, чем открыть hxs файл - страница 4

megainformatic - Размещение Вашей рекламы на нашем сайте

megainformatic - Костя Коробкин - В гостях у тёти Светы (kk as) - онлайн комикс - страница 9

megainformatic - Костя Коробкин - В гостях у тёти Светы (kk as) - онлайн комикс - страница 10

роман Eternity Вечность - автор Синицин Андрей megainformatic - В чём отличие в применении символов & и * в языке c++ ? также продолжаем изучать Windows Sockets 2 и пример simple - страница 5

megainformatic - Костя Коробкин - В гостях у тёти Светы часть 2 Живые машины (kk as) - онлайн комикс - страница 11

megainformatic - игра Шарики на лифте Серия 1 Разгони Лифт / Balls on Lift Level 1 Run The Lift версия 0.9.2 05.10.2016 / version 0.9.2 05.10.2016

megainformatic - Костя Коробкин - В гостях у тёти Светы часть 2 Живые машины (kk as) - онлайн комикс - страница 12

роман Eternity - страница 6 + решение по анимации закрывающихся дверей лифта

megainformatic - Сообщить об ошибке

Balls on Lift Table of Records / Шарики на лифте Таблица рекордов

megainformatic - Костя Коробкин - В гостях у тёти Светы часть 2 Живые машины (kk as) - онлайн комикс - страница 13

Balls on Lift / Шарики на лифте - Как создать игру - серия уроков - Рисуем шарик / How make the game - series of lessons - draw ball

Balls on Lift / Шарики на лифте - Как создать игру - серия уроков - Содержание / How make the game - series of lessons - Index

Balls on Lift / Шарики на лифте - Как создать игру - серия уроков - Разные шарики / How make the game - series of lessons - Different balls

Balls on Lift / Шарики на лифте - Как создать игру - серия уроков - Анимация прыжков шарика / How make the game - series of lessons - Animation ball jumps

Balls on Lift / Шарики на лифте - Как создать игру - серия уроков - Создание фона заднего плана / How make the game - series of lessons - Creating background for back plane

Balls on Lift / Шарики на лифте - Как создать игру - серия уроков - Вставка созданной графики, звуков и музыки в игру - Inserting created graphics, sounds and music in the game.

Balls on Lift / Шарики на лифте + Как создать игру - бесплатная игра + комплект уроков о том, как создавать контент для игры - спрайты, фоны, звуки, музыку, и вставить его в игру - How to create a game - free game + package of lessons on how to create content for the game - sprites, backgrounds, sounds, music, and insert it into the game

Balls on Lift / Шарики на лифте + Как создать игру - бесплатная игра + комплект уроков о том, как создавать контент для игры - спрайты, фоны, звуки, музыку, и вставить его в игру - How to create a game - free game + package of lessons on how to create content for the game - sprites, backgrounds, sounds, music, and insert it into the game

Развитие проекта fle game engine

Бинарная философия / Binary Philosofy

megainformatic - Костя Коробкин - В гостях у тёти Светы часть 2 Живые машины (kk as) - онлайн комикс - страница 14

Вакансии

Коллекция php скриптов

megainformatic - Костя Коробкин - В гостях у тёти Светы часть 2 Живые машины (kk as) - онлайн комикс - страница 15

megainformatic - Приключения Кости Коробкина - В гостях у тёти Светы часть 1 - интерактивный комикс

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

fle game generator - fle генератор игр - fly snow 3d падающий снег - расширяемый генератор визуальных образов, с музыкой mp3, ogg и генерацией игр

fle game generator - fle генератор игр - fly snow 3d падающий снег - расширяемый генератор визуальных образов, с музыкой mp3, ogg и генерацией игр

megainformatic - Костя Коробкин - В гостях у тёти Светы часть 2 Живые машины (kk as) - онлайн комикс - страница 16

megainformatic Создание и размещение видео баннера mp4

megainformatic Использование баннер-ротатора

megainformatic fle game engine Simple game / Пример простой игры

megainformatic fle game engine Simple game / Пример простой игры - страница 1 - Спрайты

Creating game on fle game engine - Draw Line - This can be helpful/ Создание игры на fle game engine - Рисование линий - Это может пригодиться.

Платная подписка на fle game engine

megainformatic Создание игры на fle game engine - Simple game - страница 2 - Объекты / Пример простой игры

megainformatic Создание игры на fle game engine - Simple game - страница 3 - Объекты / Пример простой игры

Платная подписка на fle game engine

megainformatic Создание игры на fle game engine - Simple game - страница 4 - Код - Настройка параметров Scene Editor fge и написание кода для вывода спрайта шарика в вашем первом игровом приложении / Пример простой игры

megainformatic Создание игры на fle game engine - Simple game - страница 5 - Отображаем прыгающий шарик, узнаем как задается для спрайта его центр и знакомимся с векторной системой координат / Пример простой игры

megainformatic Создание игры на fle game engine - Simple game - страница 6 - Загрузка игровой сцены / Пример простой игры

подробнее

     
 

Видео урок посвященный созданию игры Ну, Погоди ! - рождение игры часть 3.

Покажет Вам простейшую элементарную игру и особенности её создания в delphi 7 на directx 8.1 api.

 
     
 
Урок 3 Оконный и полноэкранный режимы работы D3D-приложения. Управление игрой средствами DirectInput8
 
О том, что потребуется для данного урока читайте в основном разделе - уроки delphi directx 8.1
 
Далее у читателя подразумевается наличие базовых знаний языка Delphi.
 
[назад] [страница 1] [далее] [к содержанию]
 
 
 

Оконный и полноэкранный режимы работы имеются во всех современных играх написанных и в OpenGL и в DirectX.

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

Оконный режим подходит для небольших, казуальных игр, использующих немного ресурсов и не требующих максимального быстродействия. Однако имейте в виду, что оконный режим - это режим главным образом предназначенный для отладочных целей. Максимально достижимое быстродействие достигается ТОЛЬКО в полноэкранном режиме. Но этот режим не подходит для отладочных целей, т.к. в нём невозможно поймать и отследить все ошибки, кроме того, при некоторых особо фатальных ошибках возврат из этого режима вообще может оказаться невозможным без перезагрузки компьютера.

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

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

Размер рабочей области окна D3D в оконном режиме определяется размерами того окна, чей обработчик (Handle) задан при передаче параметров во время создания объекта IDirect3DDevice8

В этом легко убедиться заглянув в код методов TD3DGameApp.Create_ и TD3DGameApp.CreateDisplayObjects

 
Поэтому далее мы рассмотрим лишь код и особенности, которые необходимо учитывать при включении полноэкранного режима D3D-приложения и при переключениях между полноэкранным/оконным режимами.
 
Если взять в качестве основы проект, который мы создали в предыдущем уроке, то вот код, который необходимо добавить в модуль главной формы (MainForm) этого проекта для переключения приложения в полноэкранный режим.
 

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

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

О том, как создать и использовать такое меню описано в статье - Создание игрового меню

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

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

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

в пункт uses секции interface нужно подключить модуль DX8_DIUtil8.pas из библиотеки Delphi DirectX 8.1

в этой же секции описать константы, которые будут определять наборы клавиш клавиатуры и мыши задающие те или иные действия игрока в игровом приложении, например

const

ChangeWindowModeKey = isButton1; //константа isButton1 определена в модуле DX8_DIUtil8.pas

в описании класса D3D-приложения (класс TD3DGameApp в нашем случае) добавить поле

m_DXInput: TDXInput; //управление игрой через DirectInput

Также в описании класса нужно добавить несколько новых методов -

// Input functions
procedure SetDefaultDefKeys;
procedure CreateInputObjects;
procedure DestroyInputObjects;
procedure UpdateInput;

 

Далее в секции implementation нужно реализовать код данных методов -

procedure TD3DGameApp.SetDefaultDefKeys;
begin
FCustomKeyAssign := DefineDefaultKeys;
//процедуру DefineDefaultKeys нужно определить как локальную для модуля //главной формы Вашего проекта
end;

в секции интерфейса она записывается как

function DefineDefaultKeys: TKeyAssignList;

а в секции реализации как

function DefineDefaultKeys: TKeyAssignList;
begin
FillChar(Result, SizeOf(Result), 0);

AssignKey(Result, ChangeWindowModeKey, [Ord('W'), VK_F6]); //к данному действию привязываются клавиши W и F6

end;

далее реализуем код оставшихся методов

procedure TD3DGameApp.CreateInputObjects;
begin
SetDefaultDefKeys;
m_DXInput := TDXInput.Create(Self);
end;

procedure TD3DGameApp.DestroyInputObjects;
begin
FreeAndNil(m_DXInput);
end;

procedure TD3DGameApp.UpdateInput;
var
CurrentState: TUserInput;
begin
if not Assigned(m_DXInput) then Exit;

m_DXInput.Update;

if ChangeWindowModeKey in m_DXInput.States then {выполнить нужное действие};

end;

вызов метода CreateInputObjects нужно добавить внутри TD3DGameApp.OneTimeSceneInit

вызов метода DestroyInputObjects нужно добавить внутри TD3DGameApp.FinalCleanup или другом методе освобождения ресурсов, который вызывается из FormDestroy

вызов метода UpdateInput, в котором осуществляется обновление состояния устройств DirectInput и вызов методов обработки тех или иных действий пользователя нужно добавить внутри метода TD3DGameApp.FrameMove

 
Итак, переключение полноэкранного/оконного режимов D3D-приложения будет происходит по действию ChangeWindowModeKey. Данное действие будет вызываться клавишами [W] или [F6]. Можете использовать другие клавиши, если хотите.
 

Остается в строке кода

if ChangeWindowModeKey in m_DXInput.States then {выполнить нужное действие};

комментарий {выполнить нужное действие}

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

Таким методом является следующий -

procedure TOptionsMenu.AcceptOptions;
var
ScreenSizeMetric: TScreenSizeMetric;
begin
if g_d3dApp = nil then Exit;
ScreenSizeMetric := GetScreenSize;
if (not g_d3dApp.m_bFullScreen = Windowed) and
(g_d3dApp.m_dwScreenWidth = ScreenSizeMetric.Width) then Exit;

g_d3dApp.SwitchDisplayModes(not Windowed, ScreenSizeMetric.Width,
ScreenSizeMetric.Height);
end;

В данном случае такой метод реализован как метод объекта меню TOptionsMenu и вызывается при подтверждении смены заданных настроек приложения. В данном случае настройки достаточно просты. Проверяется заданное в настройках разрешение экрана и если произошла смена режима оконный/полноэкранный или изменилось заданное разрешение будет вызван метод SwitchDisplayModes объекта g_d3dApp, который является экземпляром класса TD3DGameApp.

В простейшем случае можно рассмотреть реализацию переключений между оконным режимом приложения и полноэкранным режимом с разрешением например 800x600 пикселей и максимальной частотой покадровой развертки поддерживаемой монитором (100 Hz или выше).

Предварительно добавьте данный метод в описание класса TD3DGameApp

function SwitchDisplayModes(bFullScreen: Boolean;
dwWidth, dwHeight: Cardinal): HRESULT;

Затем реализуйте его в коде следующим образом -

function TD3DGameApp.SwitchDisplayModes(bFullScreen: Boolean;
dwWidth, dwHeight: Cardinal): HRESULT;
var
hr: HResult;
begin
if not m_bIsActive or not m_bDisplayReady then begin
result := S_OK;
Exit;
end;

// Check to see if a change was actually requested
if bFullScreen then
begin
if ((m_dwScreenWidth = dwWidth) and (m_dwScreenHeight = dwHeight)) and
(m_bFullScreen = bFullScreen ) then
begin
result := S_OK;
Exit;
end;
end
else
begin
if not m_bFullScreen then begin
result := S_OK;
Exit;
end;
end;

// Invalidate the old display objects
m_bDisplayReady := FALSE;
InvalidateDisplayObjects;

// Set up the new presentation paramters
if bFullScreen then
begin
m_d3dpp.Windowed := FALSE;
m_d3dpp.hDeviceWindow := m_hWndMain;
m_dwScreenWidth := dwWidth;
m_d3dpp.BackBufferWidth := dwWidth;
m_dwScreenHeight := dwHeight;
m_d3dpp.BackBufferHeight := dwHeight;
m_d3dpp.BackBufferFormat := m_d3dfmtFullscreen;
end
else
begin
m_d3dpp.Windowed := TRUE;
m_d3dpp.hDeviceWindow := 0;
m_d3dpp.BackBufferWidth := 0;
m_d3dpp.BackBufferHeight := 0;

m_dwScreenWidth := dwWidth;
m_dwScreenHeight := dwHeight;

m_d3dpp.BackBufferFormat := m_DesktopMode.Format;
end;

// Reset the device
hr := m_pd3dDevice.Reset( m_d3dpp );
if SUCCEEDED(hr) then
begin
m_bFullScreen := bFullScreen;
hr := RestoreDisplayObjects;
if SUCCEEDED(hr) then
begin
m_bDisplayReady := TRUE;
result := S_OK;
Exit;
end;
end;

// If we get here, a fatal error occurred
PostMessage( m_hWndMain, WM_CLOSE, 0, 0 );
result := E_FAIL;
end;

Все недостающие поля, описанные в реализации данного метода необходимо добавить в класс TD3DGameApp и инициализировать их в методе конструктора TD3DGameApp.Create и других необходимых методах, где это понадобится.

Заметьте, что внутри данного метода каждый раз при переключении между полноэкранным/оконным режимами или при смене разрешения полноэкранного режима происходит инвалидация InvalidateDisplayObjects всех зависимых от Direct3DDevice ресурсов, вызывается метод сброса устройства Direct3DDevice, а затем происходит восстановление ресурсов RestoreDisplayObjects

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

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

 
Для лучшего понимания этих важных моментов, Вам обязательно нужно познакомиться с исходным кодом игры [Пример игры Donuts3D], а также со статьями и исходниками посвященными работе над проектом Нечто: Необъяснимое
 
В качестве практики предлагаю Вам внедрить вышеописанные технологии в код проекта своего D3D-приложения посвященного практической работе над данным уроком.
 
[назад] [страница 1] [далее] [к содержанию]
 
 
 
 
     
     
     
     
     
подробнее

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

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

(урок № 1)

Рассмотрим реальный пример. Мне требовался автомобиль для компьютерной игры Дорога в Город (Road To City). Я решил создать изображение при помощи программы для работы с растровой графикой – Adobe Photoshop.

Что собой представляют программы для работы с растровой графикой?

Любая программа ориентированная на работу с графикой в первую очередь имеет возможность работы с растровыми изображениями и растровой графикой. Растровое изображение состоит из разноцветных точек – пикселей. Пиксель – составное слово от английских picture и element или pixel. Если Вы вооружитесь самой обычной лупой и поднесете ее к Вашему монитору, то увидите, что изображение на экране состоит из отдельных точек разного цвета. Цветные точки формируются из трех составляющих – R G BRed, Green, Blue – т.е. Красного, Зеленого и Синего. Это связано с принципами формирования цветных изображений в телевизионных приемниках и мониторах. Любое растровое изображение отображается на экране как прямоугольная область, состоящая из отдельных пикселей. Каждый пиксель занимает в памяти определенный объем в зависимости от формата графического файла. Например, файл в формате BMP (Bitmap) с разрядностью пикселей 24 бит хранит каждый пиксель изображения в последовательности из трех байт (1 байт – 8 бит). Причем каждому цветовому компоненту пикселя в данном формате отводится ровно по 1 байту (т.е. по 8 бит). В связи с тем, что 1 байт может принимать значения от 0 до 255 (27), то получаем, что каждый пиксель в файле данного формата может хранить значения цветов от 0 до 255х256х256 , т.е. примерно 16,7 Млн. цветов (оттенков). Это множество цветов является достаточным для построения фотореалистичных изображений. Это же множество (называемое также режимом True Color – реалистичный цвет) используется во всех современных мониторах для отображения на экране.

Программы для работы с растровой графикой позволяют оперировать в каждый момент времени с любой точкой изображения как с отдельным элементом. С одной стороны это дает большую свободу действий, но с другой требует определенных навыков от художника-дизайнера. Так как Вы, скорее всего, сейчас будете рисовать предлагаемый автомобиль используя мышь, то Вам это может показаться несколько сложновато. Но это именно тот недостаток, который служит расплатой за большую свободу действия.

Итак, перед Вами вот такой автомобиль:

 

Окончательный вариант

Контур автомобиля

 

Мы попробуем нарисовать его в Adobe Photoshop. По большому счету неважно какой версией Вы воспользуетесь (6, 7 или 8). Во всех этих версиях Ваши действия по созданию такого автомобиля будут примерно одинаковы.

Если Вы уже запустили программу Adobe Photoshop, то можете приступать, если еще нет, то вот способы, которыми Вы можете воспользоваться, чтобы это сделать:

 

Запуск программы

Запуск программы Adobe Photoshop можно выполнить следующими способами:

- двойным щелчком по ярлыку на рабочем столе;

- через пункт меню (кнопку) Пуск > Программы > Adobe > Photoshop х.0 > Adobe Photoshop х.0;

- через Проводник из папки C:\Program Files\Adobe\Photoshop х.0\ двойным щелчком по файлу Photoshp.exe

 

(примечание: вместо значка х в обозначении Photoshop x.0 стоит обозначение соответствующего номера версии).

 

После успешного старта программы на экране отобразится окно его рабочей среды. Окно имеет вообщем-то, стандартный для любого Windows-приложения вид: строку заголовка, строку меню, панели инструментов и плавающие окна, рабочую область (для работы с изображениями) и строку состояния. Мы не будем подробно останавливаться на описании окна, предполагая, что основное назначение элементов рабочей среды Photoshop Вам известно, но если все же нет, то Вы можете узнать об этом более подробно щелкнув здесь.

 

Отображение необходимых управляющих окон (Инструменты, Настройки, Цвет …) производится через пункт меню Окно (Window), щелчком по соответствующему пункту, например: Показать/Скрыть инструменты – вызывает показ/скрытие панели инструментов.

 

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

 

Приступим к созданию нашего автомобиля

Создание нового растрового изображения выполняется выбором пункта меню Файл (File) > Новый (New)

-         В открывшемся диалоговом окне Имя (Name) в поле Имя (Name) необходимо задать имя создаваемого файла, например: my_first_image (или race_car)

-         В остальных полях задайте следующие параметры:

Ширина (width) = 40 пикселей

Высота (height) = 70 пикселей

Разрешение (resolution) = 72 пиксель/дюйм

Режим (mode) = RGB Color

 

Содержимое (contents) – т.е. цвет фона пустого изображения

·                 Прозрачный (transparent)

 

После этого щелкните по кнопке ОК

 

В левом верхнем углу экрана появится окно нового документа. Его можно размещать в любом удобном месте рабочей области окна Photoshop.

Разместите его примерно в центре экрана. Сделать это можно перетаскивая окно документа за заголовок.

 

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

 

Увеличение отображаемого масштаба изображения необходимо нам, чтобы точнее

рассмотреть детали изображения – при большом увеличении (более 400%) отдельные точки (пиксели) изображения отображаются в виде квадратиков. Это позволяет рисовать детали мелких изображений Итак, чтобы увеличить масштаб изображения (увеличивается только отображение, а первоначальные размеры 40х70 остаются неизменными!) на панели инструментов выберите инструмент лупа (zoom tool) , а затем переместите курсор в окно вашего изображения и щелкайте на нем до тех пор, пока масштаб не достигнет 800%. После этого измените размеры окна так, чтобы оно полностью отображало редактируемое изображение.

Теперь мы приступим к созданию наброска нашего изображения. Для рисования нужен инструмент карандаш и приступим к рисованию.

Примечание: чтобы уменьшить масштаб изображения нужно выбрать инструмент лупа и удерживая нажатой клавишу Alt щелкать по изображению, пока оно не уменьшится до нужного масштаба. Чтобы быстро увеличить изображение до размеров допускаемых рабочим пространством можно при активном инструменте лупа на панели ее свойств нажать кнопку Fit On Screen (подогнать по размерам экрана).

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

Поскольку левая и правая половинки автомобиля симметричны относительно вертикальной оси, то нам достаточно пока нарисовать только одну половинку, например вот так:

Чтобы Вам было удобнее рисовать увеличивайте масштаб изображения, вот так:

Рисовать мы будем черным цветом, поэтому на панели Цвет или Образцы щелкните левой кнопкой по черному цвету. Панель Цвет позволяет сделать это путем синтеза цвета или выбора его в открывающемся диалоговом окне. Панель Образец предоставляет выбор из набора готовых образцов. (Когда Вы находитесь в состоянии выбора цвета курсор мыши приобретает вид пипетки). Чтобы выбрать цвет в режиме диалога надо дважды щелкнуть по квадрату текущего цвета пера или фона см. ниже.

Приступим к непосредственному процессу рисования. Для этого наводим карандаш на нужную точку изображения и нажимаем один раз левую кнопку мыши. Это приводит к появлению точки заданного цвета (черного). Чтобы стереть точку (или целый фрагмент) можно использовать как минимум три способа: стереть ластиком (Eraser Tool), выделить рамкой (Marquee Tool) и очистить клавишей Delete, на вкладке окна History (история действий) выполнить отмену действия щелкнув на одно из предыдущих действий в окне стека действий.

Окно Истории действий сохраняет определенное количество выполненных действий в виде отдельных пунктов. По мере выполнения действий они откладываются в стеке сверху вниз. Выбор предыдущего действия вызывает отмену всех сделанных. Однако большое количество действий (особенно однотипных) может вызвать переполнение стека и тогда стек обнуляется, т.е. становится невозможной отмена. Поэтому, чтобы избежать каких-либо потерь рекомендуется (особенно если Вы еще недостаточно опытны) периодически сохранять промежуточные копии своей работы.

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

Создание второй (левой) симметричной половинки изображения автомобиля выполняется следующим образом:

-         На панели инструментов выберите инструмент прямоугольная область

-         Выделите только нарисованную часть автомобиля без припусков по левому краю (хотя можно и с припусками, т.к. у нас задан прозрачный фон!);

-         Щелкните сначала пункт меню Редактирование (edit) > Копировать (copy);

-         Затем Редактирование > Вставить (paste); Обратите внимание на панель Layer – Вы увидите появление нового слоя! Т.е. новая копия изображения была вставлена на НОВЫЙ слой! Так происходит ВСЕГДА! Поэтому чтобы копировать изображение содержащееся на слое можно и поступить иначе: дублировать слой щелкнув правой кнопкой на данном слое (см. ниже);

-         Перемещайте новый фрагмент в левую половину окна – для этого воспользуйтесь инструментом Move (Перемещение) или удерживая нажатой клавишу CTRL (Control);

-         Чтобы сделать зеркальное отражение выделенного фрагмента выберите пункт меню Редактирование > Трансформация (transformation) > Отразить по горизонтали (Flip Horizontal);

-         Теперь, переместите полученное изображение так, чтобы обе половинки состыковались и получилось цельное изображение.

Центрирование наброска

Если полученный рисунок находится не в центре холста, а как-то смещен, то это нужно исправить -

для этого выберите инструмент прямоугольная область и с нажатой клавишей Ctrl переместите его точно в центр. Для этой же цели можно использовать инструмент Перемещение (Move Tool). Однако Вы заметите, что перемещается только одна половинка автомобиля. Поэтому, когда Вы работаете с более, чем одним слоем НЕ ЗАБЫВАЙТЕ ПРО СЛОИ! Слои позволяют Вам дублировать (или повторять некоторое количество раз) одинаковые элементы, позволяют комбинировать несколько изображений в одном. Но начинающие часто путаются, забывая переключаться на нужный слой и удивляясь тому, что не могут изменить что-либо в своем рисунке. Поэтому НЕ ЗАБЫВАЙТЕ ПРО СЛОИ!

В нашем теперешнем случае Вам надо отменить перемещение половинки автомобиля или переместить ее на прежнее место (чтобы получался цельный вид), а затем, давайте склеим слои объединив их в один слой. Для этого: Layer > Merge Visible – и Ваши слои соединятся в один.

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

 

Для чего это нужно? Если рисунок (и особенно окончательный – оформленный и раскрашенный) не будет в центре, то это плохо по нескольким причинам:

1 – это нарушает гармонию рисунка;

2 – это вызовет технические сложности при программировании компьютерной игры с использованием такого рисунка – он все время будет находится не точно там, где требуются, а со смещением!

 

Сохранение наброска Наконец мы получили то, что нужно. Теперь осталось сохранить нашу первую работу на жесткий диск. Давайте сохраним наше изображение в двух форматах: psd и bmp. Сохранять будем на жесткий диск в предварительно созданную Вами личную папку (например, Мои_диз_работы). Для этого:

-         Выберите пункт меню Файл > Сохранить как (Save As); Если Вы сохраняете изображение в первый раз, то можно выбирать и пункт Save, тогда программа все равно запросит у Вас имя создаваемого файла (если Вы не заполняли поле Name при его создании). Команда Save As полезна также для сохранения файла под другим именем, т.е. тогда, когда Вы периодически сохраняете свою работу находясь на разных промежуточных стадиях.

-         В появившемся диалоговом окне «Сохранить как» выполните следующее:

·           Щелкните по выпадающему списку в поле Папка и выберите диск C:

·                 Щелкните по кнопке Создать новую папку

 

·                 Введите желаемое имя папки и нажмите [Enter]

·                 Откройте только что созданную папку (если она не открыта или не открылась автоматически);

·                 Сохраните Ваш файл в Вашу папку в формате psd – щелкните по кнопке Сохранить.

·                 Сохраните Ваш файл в Вашу папку в формате bmp – для этого проделайте те же действия (Файл > Сохранить как), но в поле Формат (Format) располагающемся в нижней части окна диалога (под полем имя) из выпадающего списка выберите BMP, затем щелкните по кнопке Сохранить.

Таким образом мы получаем на диске в Вашей папке два файла:

my_first_image.PSD

my_first_image.bmp

 

Формат файла psd – это внутренний формат файлов-изображений программы Photoshop. Он не позволяет использовать данное изображение ни в каких других программах (кроме самого Photoshop и некоторых других, например 3DS Max). Однако он удобен тем, хранит в себе целый ряд специфической информации (информацию о слоях, выделениях и т.п.), что позволяет хранить изображения в виде исходников (исходных заготовок для дальнейших изменений или видоизменений). Формат bmp – широкоупотребительный. Изображения в этом формате можно использовать для различных целей: в документах Word, Excel, Web-публикациях, для компьютерных игр и т.д. Кроме того, располагая изображением в формате psd его легко сохранить в любом другом формате. Формат же bmp не сохраняет никакой информации о слоях и т.п. Он применяется лишь для окончательных (готовых) изображений, для использования в других приложениях (web-дизайн, компьютерные игры, издательское дело, реклама и т.д.).

Таким образом, если резюмировать вышесказанное: рабочие или окончательные варианты всегда сохраняйте в «родном» формате PhotoshopPSD, только после этого сохраняйте файл и в каком-нибудь другом (требуемом Вам) общеупотребительном или нужном в конкретной ситуации формате. Формат PSD – это Ваш гарант качества и надежности, своего рода «исходник», который легко можно будет модифицировать (или вспомнить, когда потребуется, КАК ВЫ ЭТО СДЕЛАЛИ). Другие форматы будут нести гораздо меньше рабочей информации или вообще не нести ее, но зато будут более компактны и подходящи для окончательного (целевого) применения.

 

 

 

Понятие слоев. Работа с цветом. Цветовой тон. Полутоновые переходы. Работа с цветом и свето-тенью (Урок № 1 часть 2)

 

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

Что такое слои? Многослойные изображения. Слои – это отдельные изображения расположенные строго одно над другим, причем так, что можно регулировать прозрачность (flow) и непрозрачность (opacity) каждого слоя. Для базового 1 слоя (фона) прозрачность равна 0%, т.е. он является абсолютно непрозрачным и регулировка прозрачности к нему не применяется. До сих пор Мы с Вами рисовали изображения на 1 слое (фоне), не задумываясь о том, что поверх этого слоя можно создать другие слои.

Для чего же нам могут понадобиться слои? Что они дают? Слои – это как прозрачные (или полупрозрачные) пленки, на каждой из которых можно располагать свое изображение. Объединение в изображении нескольких слоев дает преимущество в сочетании нескольких изображений в одном без нарушения целостности исходного изображения (так как каждое изображение располагается на отдельном слое). Конечно, если два изображения будут располагаться на абсолютно непрозрачных слоях, загораживая друг друга, то никакого эффекта не будет. Эффект будет только в том случае, если вышележащие слои имеют определенную прозрачность и/или абсолютно прозрачный фон. Тогда, если располагать изображения одно над другим, можно добиться различных эффектов – неосуществимых или трудноосуществимых в тех случаях, когда вся работа сводится к рисованию лишь на одном слое (фоне).

 

1. Открытие созданного ранее документа. Чтобы открыть набросок машины, созданной нами в предыдущей работе выполните выбор пунктов Файл (File) > Открыть (Open) и откройте файл my_first_image.PSD, разместите его на экране удобным образом, увеличьте масштаб.

2. Для быстрого задания масштаба во весь экран:

-         Щелкните инструмент лупа;

-         Щелкните по кнопке По экрану (Fit On Scree) в панели настроек лупы (сразу под строкой меню в верхней части экрана).

-         Если требуется перетащите окно изображения в центр экрана.

3. Итак, Мы настроили наше изображение для удобной работы с ним, теперь давайте посмотрим как изменить режим поддерживаемых в изображении цветов, для этого:

-         Щелкните пункт меню Изображение (Image) > Режим (Mode) и Вы увидите, что напротив пункта RGB цвет (RGB Color) стоит галочка. Соответственно, если переставить галочку в другой пункт, например, Grayscale (Черно-белый или градации серого), то тем самым можно изменить цветовой режим, в котором будет обрабатываться и сохраняться изображение. Изменение режима не проходит бесследно. Оно резко сказывается на качестве и если бы не было возможности отмены изменения режима, то можно было пострадать от потери качества при неверном изменении режима. Так что, прежде чем экспериментировать с изменениями режима сначала сохраните Ваш рисунок под другим именем, а потом уже смело пробуйте!

Мы создавали полноцветное изображение (RGB Color), так что если Вы случайно выбрали иной режим, то перемените его на RGB Color.

4. Дублирование слоя выполняется посредством щелчка правой кнопки мыши в окне Слои на выделенной области с названием слоя (Фон) – см. рисунок. Далее, в появившемся контекстном меню нужно выбрать (теперь уже левой кнопкой мыши) пункт Дублировать Слой … В появившемся диалоговом окне нужно дать новому слою имя (отличное от имени базового слоя – Фон), например, Набросок и нажать ОК. Будет создан новый (полностью идентичный фону) слой над слоем Фон, о чем можно судить по появлению нового слоя в окне Слои.

Чтобы понять какой слой является текущим достаточно обратить внимание на панель слои. Слой, выделенный цветом, и есть текущий. Слева от каждого слоя располагаются два окошка-кнопки: Глаз и Кисть. Глаз позволяет временно скрывать слой. Кисть показывает текущий (используемый для рисования) слой. Кроме того, слои можно связывать друг с другом (link), т.е. добиваться каких-либо совместных действий с ними без их склеивания. Хотя можно и склеивать лишь связанные слои – для этого служит команда Layer > Merge Linked. Для связывания текущего слоя с каким-либо имеющимся достаточно просто щелкнуть в пустом квадратике (где у текущего слоя располагается изображение кисти), тогда в нем появится значок цепочки означающий, что текущий и данный слой являются связанными. Это было небольшое отступление. Связывание слоев нам пока не понадобится.

 

5. Очистка содержимого слоя Фон нам понадобится для выполнения эксперимента с использованием градиентной заливки для корпуса автомобиля. Для этого проделайте следующее:

-         Сделайте текущим слоем Фон;

-         Используя инструмент прямоугольная область выделите все изображение и нажмите клавишу [Delete] или выберите пункт меню Редактирование > Вырезать (Cut);

-         Чтобы удостовериться, что слой Фон очищен щелкните по кнопке Глаз слоя Набросок, если контур автомобиля исчезает, а при повторном нажатии Глаз’а появляется – мы сделали все верно.

После выполнения шагов 4 и 5 мы можем добиться следующего эффекта: так можно разблокировать заблокированный слой (обратите внимание на рисунок на шаге 4 – справа от названия слоя на текущем слое стоит изображение замочка). Это всегда так бывает, когда Вы открываете какое-либо однослойное изображение, например файл BMP. Заблокированный слой не даст Вам возможности пользоваться прозрачным фоном (потому что у файла BMP прозрачный цвет должен быть ОБЯЗАТЕЛЬНО ЗАМЕНЕН НА КАКОЙ-НИБУДЬ ДРУГОЙ, что всегда и делается (автоматически) при сохранении файла в этом формате. Непрозрачный цвет фона не даст Вам возможности пользоваться преимуществами комбинирования изображений на слоях. Вам надо научиться избавляться от закрашенного фона и менять его на прозрачный.

 

6. Замена (удаление) цвета слоя на прозрачный. Мы сделаем так, чтобы белый цвет слоя Набросок стал прозрачным (если это имеет место быть), чтобы иметь возможность заливать слой Фон и получать эффект заливки без нарушения контуров. Для этого:

-         Сделайте текущим слой Набросок (если он был скрыт, сделайте его видимым);

-         Выберите инструмент волшебная палочка (Magic Wand Tool) и задайте параметр Обратная чувствительность (tolerance) = 1. Щелкните по изображению. В изображении должны быть выделены все области, имеющие белый цвет точек. Если этого не происходит, значит в Вашем изображении имеются области имеющие на глаз белый, но на самом деле несколько отличный от белого цвет. Значит Вам нужно увеличить выделяемый разброс (диапазон), т.е. установить параметр Обратная чувствительность равным большему значению (например 10) и снова щелкнуть по изображению.

-         В нашем изображении были выделены области имеющие белый (и близкие к белому) цвет. Чтобы сделать эти области прозрачными вырежьте их (клавишей [Delete] или через Редактирование > Вырезать (Cut).

Чтобы проверить действительно ли данные области стали прозрачны попробуйте временно скрыть слой Фон. «Шахматка» которая обазует пространство вокруг контуров и внутри них и есть прозрачный (представляемый прозрачным) цвет.

 

Мы очищали содержимое слоя «Фон» для того, чтобы получить в распоряжении чистый пустой слой (прозрачный). Это же можно было сделать и по-другому: сначала удалить слой «Фон» - щелкнув по его названию правой кнопкой и выбрав пункт Delete Layer (удалить слой). Затем при помощи кнопки Create a new layer в нижней части панели Layer создать новый слой.

 

7. Градиентная заливка изображения:

-         Сделайте текущим нужный слой (в нашем случае - Фон);

-         Щелкните по инструменту Заливка (Paint bucket)   правой кнопкой и выберите вариант Градиент ;

-         На появившейся панели параметров заливки (под строкой меню) установите требуемые параметры (способ заливки и др.);

-         Поскольку заливка осуществляется путем плавного перехода от цвета пера к цвету фона, то Вам в окне Цвет нужно задать оба эти цвета;

-         Установите цвета, например: Ярко красный и темно красный.

-         В окне изображения нажмите в требуемой точке левую кнопку мыши и протаскивайте, указав тем самым направление и угол градиентной заливки. После отпускания левой кнопки мыши заливка будет произведена. Как видите, градиентная заливка представляет собой плавное перетекание от цвета переднего плана или пера (foreground) к цвету заднего плана или фона (background).

 

У Вас могут возникнуть вопросы или трудности по поводу задания цвета.

Как задать цвет?

Для задания текущих цветов переднего и заднего плана есть несколько способов. Самый простой из них: воспользоваться панелью Color.

На панели Color (должна быть открытой и вкладка Color), т.е. вот так:

На рисунке показано задание желтого цвета в цветовой модели (пространстве) HSB. Вы видите, что вокруг верхнего (желтого) квадрата, который как раз и представляет цвет переднего плана, имеется небольшая рамка. Она показывает, что мы можем изменять цвет переднего плана. Если щелкнуть левой кнопкой нижний (белый) квадрат, то можно будет изменять цвет заднего плана. Чтобы изменить цвет достаточно перемещать мышью треугольные движки (H S B). В данном случае это означает, что для задания цвета (и цветового пространства) используется модель HSB. В этой модели (также как и в модели RGB) для формирования цвета используются 3 компонента. Но их назначение (и следовательно способ задания цвета) иное. HHue – тон, т.е. значение цвета на цветовом круге (от 0 до 360 градусов). Значения этих тонов стандартизированы и представляют все цвета (и оттенки) цветов радуги. Второй компонент – SSaturation – насыщенность данного заданного тона – изменяется от 0 до 100%. Насыщенность (или иногда ее еще называют whiteness) представляет обратное насыщение до белого, т.е. если задать нулевое значение S, то при любом положении H и каком-либо положении B будут получаться оттенки серого, а вот если B поставить тоже в 0, то получится АБСОЛЮТНО ЧЕРНЫЙ цвет. Такой цвет представляет максимально возможный вариант черного цвета при отображении на экране. Мы подошли к назначению третьего компонента – B – это brightness (или ее еще называют blackness) – наличие в цвете черного. Также изменяется от 0 до 100. 0 значение при 0 S соответствует, как мы уже видели, черному цвету. Максимальное (100%) значение B при 0 S соответствует максимально отсутствующему черному (и максимально присутствующему белому в S), поэтому получается АБСОЛЮТНО БЕЛЫЙ цвет. При одном из крайних значений S или B (т.е. 0 или 100%) независимо от положения H и перемещая другой свободный движок можно получить множество всех нейтральных цветов (градаций серого).

Изменение используемой для задания цвета цветовой модели

Цветовая модель HSB удобна тем, что позволяет оперировать понятиями, привычными для нашего глаза – вспомните, чем Вы руководствуетесь при задании какого-либо цвета: Какого он будет тона? Насколько он насыщенный ? Насколько он яркий ? Кроме того, эта модель позволяет Вам сравнивать цвета не требуя дополнительных усилий по вычислениям или пересчету. Попробуйте-ка сравнить два цвета в модели RGB не зная соответствующих значений компонентов R-G-B. Теперь поняли?

 

Если у Вас задана иная цветовая модель, например, RGB (включается всегда по-умолчанию после установки программы), Вы можете ее изменить: для этого щелкните левой кнопкой маленькую черную стрелку в окне панели Color (см. рисунок – обведено кружком)

Теперь, можно поставить флажок напротив соответствующего режима цветовой модели: Grayscale, RGB, HSB, CMYK, Web или Lab sliders. Ниже можно выбрать цветовой охват (spectrum) используемой модели. Цветовой охват определяет широту возможных оттенков. Например, охват модели CMYK самый малый, это связано с тем, что модель CMYK представляет модель для задания печатных цветов. Все цветовые модели являются общепринятыми стандартами.

 

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

 

Продолжаем работу по раскрашиванию автомобиля

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

 

Теперь давайте попробуем как-то залить окна автомобиля.

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

- Переместите его так, чтобы он располагался под остальными слоями: для этого достаточно «захватить» слой мышью и перемещать до определенного предела вниз окна панели Layers.

- Задайте какие-либо другие цвета для заливки окон градиентом (например голубой и синий) и выполните заливку данного слоя. Поскольку слой находится ниже всех остальных слоев, то и по глубине его видимость – самый задний план. Чтобы увидеть результаты Вашей заливки можно временно скрыть вышележащий слой (см. шаг 4).

Мы пока еще не добились нужного результата – слой залит, но окна – нет.

-         Перейдите на самый верхний слой (Набросок) и используя инструмент волшебная палочка (с задаваемым путем пробы параметром Обратная чувствительность) выделите все контуры окон автомобиля. Для «приплюсовки» к имеющемуся выделению – щелкайте по другим контурам окон с нажатой клавишей [Shift].

-          Теперь перейдите на нижележащий слой – назовем его ПрорезиОкон и выполните операцию Вырезания (Редактирование > Вырезать) для выделенных областей. Это же можно выполнить клавишей [Delete].

-         Если делать это сразу на слое Набросок, то мы лишимся видимых контуров окон! Но нам они тоже будут больше не нужны, так что после создания прорезей на слое кузова (ПрорезиОкон) удалите их и со слоя Набросок.

В итоге у Вас должно получиться что-то вроде этого (в масштабе 1:1):

Теперь, для придания окончательного реалистичного внешнего вида нашему автомобилю нам потребуется проделать следующие шаги:

a)      Изменить черные контуры автомобиля на более плавно переходящие к фону, поработать со свето-тенью и полутоновыми переходами для создания объемного вида;

b)      Добавить дополнительные детали: фары, колеса;

c)       Для всех остальных цветовых точек (за пределами контура машины) задать единый (фоновый) цвет – который будет служить для эффекта прозрачности при дальнейшем применении изображения (например в компьютерной игре).

d)      Сохранить промежуточный результат работы в разложенной по слоям форме в формате PSD.

А сейчас рассмотрим описанные шаги более детально.

 

 

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

 

Как уже говорилось ранее слои имеют свойство полупрозрачности (параметр Opacity) в окне панели Layers. Чтобы сделать контуры автомобиля полупрозрачными, что придаст эффект плавности перехода к фону, перейдите на слой Набросок и изменяйте параметр Opacity для данного слоя.

 

Для придания кузову объема нужно учесть следующие моменты:

·                 предполагаемое направление источника света, откуда наш автомобиль освещается;

·                 приняв это направление за исходное нужно приступить к рисованию объемных контуров, в соответствии с придуманным нами направлением освещения;

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

Основываясь на указанных правилах попробуйте придать Вашей машине объемную форму. ВНИМАНИЕ! РАБОТУ ПО ОСВЕТЛЕНИЮ/ЗАТЕМНЕНИЮ ВЕДИТЕ НА СЛОЕ ПРОРЕЗИ ОКОН. Так как окна автомобиля должны тоже обрабатываться, то свяжите два этих слоя между собой и склейте их (как склеить и связать см. выше). Для осветления/затемнения областей используйте инструменты Осветление (Dodge Tool)   и Затемнение (Burn Tool) .

Чтобы выбрать затемнение нужно щелкнуть правой кнопкой по кнопке используемого в данный момент инструмента и выбрать в открывшейся панели нужный (см. рисунок).

 

Свойства инструментов Осветление/Затемнение

Оба эти инструмента имеют одинаковый набор свойств:

Brush – определяет тип и размер используемой для осветления/затемнения кисти. Для выбора типа или размера нужно щелкнуть по маленькой черной стрелке в поле Brush и выбрать необходимый тип/размер.

Range – определяет получаемый цветовой оттенок при воздействии – попробуйте испытать его опытным путем.

Exposure – сила воздействия, т.е. насколько сильно воздействует эффект на обрабатываемое изображение.

 

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

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

 

Переименуйте слой ПрорезиОкон в Кузов. Перед выполнением каких-то критичных операций, могущих испортить то, что Вам до сих пор нравилось, сохраняйте промежуточные копии вашего изображения в формате PSD под различными именами (my_first_image_conture_tone, my_first_image_volume2, red_car_kuzov и т.д.).

Конечное изображение кузова:

Должно удовлетворять следующим условиям – иметь явно прослеживаемые детали объема (путем игры света и тени), не иметь слишком резких (выпадающих из общего цветового диапазона (тона)) цветовых переходов и пятен.

Понятие прозрачного цвета

При использовании изображений для наложения на другие изображения, например автомобиль поверх какого-то фона – дороги – всегда требуется, чтобы выводился лишь сам автомобиль, а не вся прямоугольная область, которую представляет рисунок. Как сделать прозрачным фон ? Прозрачность фона достигается программным способом при выводе изображения следующим способом: цвет, который задан как используемый под прозрачный просто не выводится. Поэтому если в изображении пожертвовать каким-либо цветом и залить этим цветом фон вокруг автомобиля, то можно будет использовать его затем в качестве прозрачного. Жертвуя всего лишь одним (если Вы помните из примерно 16,7 Млн. цветов) мы, вообщем-то, ничего не теряем. Мы даже не цветом жертвуем, а одним из оттенков. Используя в изображении выбранный прозрачным цвет, можно организовать вывод изображений любой формы и вида, даже с просветами. Достаточно лишь прорисовать эти участки выбранным за прозрачный цветом и они, при выводе изображения, превратятся в «дыры».

Вот окончательный вариант того, что у Вас может получиться:

Масштаб 1:1

Увеличенное изображение (8:1)

 

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

Как придать изображению нашего автомобиля более эффектный вид?

 

Мы рисовали наш автомобиль первоначально размером 40х70 пикселей. Попробуйте проделать все то же самое, но увеличив эти размеры до 160х280 (т.е. взяв в 4 раза больший размер). Конечно при этом толщину свойства Brush у карандаша не надо тоже увеличивать в 4 раза, т.е. делать равной 4 пикселям. Оставьте толщину равной 1 пикселю. При этом создаваемые Вами линии будут более тонкими и сглаженными. Если Вы повторите все, о чем говорилось ранее и получите законченный вид автомобиля, то можете уменьшить его ровно в 4 раза. Для этого: Image > Image Size и задайте нужный размер (40х70 вместо 160х280). Когда Вы сравните Ваш первый автомобиль и новый, то Вы увидите между ними существенную разницу. Это происходит из-за того, что при масштабировании происходит интерполирование пикселей, что создает более сглаженные, а не резкие переходы. Такого эффекта трудно добиться прямым рисованием, а вот путем масштабирования – довольно легко. Этот небольшой секрет Вы можете взять себе за правило: зная конечные размеры того изображения, которое Вам нужно получить можно увеличить эти размеры на некоторое целое число (в 2,3, 4 раза) – в зависимости от того, как грубо Вы планируете рисовать и какое качество хотите получить. Конечно слишком грубое рисование тоже ни к чему хорошему ни приведет, Вам все же придется постараться и самим! С другой стороны если Вам потребуется создать большое изображение – например, во весь экран, размером, скажем 1024х768 пиксель, то увеличение в 2 и более раз может сильно увеличить размер обрабатываемого файла, что может сказаться и на быстродействии (Photoshop станет «слишком задумчив» при выполнении даже простых операций). Линии которые Вы будете рисовать могут казаться Вам прерывистыми и т.д. В этом случае решением может быть рисование изображения не всего целиком сразу, а по частям – отдельными элементами. Потом уже можно будет собрать все что вы создали в одном изображении скомпоновав в единое целое (путем размещения на разных слоях) и т.д. Могут быть и другие варианты. Дело ограничивается только Вашей фантазией.

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

     
 

СССР - Создаем Сайт Своими Руками - конструируем свой сайт - полезные статьи для начинающих строителей сайтов.

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

Другие статьи на тему создания сайтов, PHP и MySQL смотрите в разделе Статьи

 
     
 

В первую очередь что нужно иметь под рукой:

1) набор Web разработчика denver - этот набор включает все необходимые Вам программы для отладки и разработки Вашего сайта, включая PHP, MySQL, Apache, PERL, PostgreSQL;

2) и конечно же Вам понадобится какой-либо удобный html-редактор, например неплохим выбором является Macromedia Dreamweaver;

 
     
  После того, как Вы скачаете всё необходимое на свой ПК, нужно установить эти программы и начать работу.  
     
 

Если пакет denver корректно установлен в Вашей системе, то при вызове браузера Internet Explorer и наборе в его адресной строке ссылки

http://localhost/

 
     
  Вы будете попадать на заглавную страницу denver'а.  
     
 

Рабочие примеры этого урока мы будем размещать в папке -

С:\WebServers\home\localhost\www\phpwork

 
     
  Где С:\WebServers расположение установленного пакета denver в Вашей системе по-умолчанию. Если Вы при установке denver'а задали другой путь - используйте его.  
     
  Введение в программирование на php - выводим дату и время  
     
 

Наш первый скрипт на php.

Сначала поясним для чего всё это нужно ? Хостинг с php, сам язык php, что всё это Вам дает ?

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

Мы создадим простейший скрипт, который будет просто выводить в окно браузера страничку с отображением текущей даты.

Освоив этот пример Вы узнаете:

- Как создаются php-скрипты и как они работают;

- Что собой представляет язык php.

 
     
 

Если у Вас есть под рукой HTML-редактор, то в нём нужно создать новый пустой документ и внести в него следующий код -

<HTML>
<HEAD>

<TITLE>Наш первый скрипт на PHP</TITLE>


<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1251">


</HEAD>


<BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>

<font color="#000000" size="2" face="Verdana, Arial, Helvetica, sans-serif">Сегодня</font>


<?php
echo date("j, F, Y, g:i a");

?>

</BODY>
</HTML>

 
     
 

Затем нужно сохранить созданный файл в папку

С:\WebServers\home\localhost\www\phpwork

под именем, например intro1.php

Далее в браузере набираем адрес

http://localhost/phpwork/intro1.php

Если Вы пока еще не обзавелись своим хорошим html-редактором, можно просто набрать данный текст в текстовом редакторе Блокнот, а затем сохранить с расширением php.

 
     
 

И получаем результат - в окне браузера будет выведена страница с заголовком

"Наш первый скрипт на PHP"

и текстом на самой странице

Сегодня 13, July, 2010, 11:29 am

 
     
  У Вас конечно же будет выведена другая текущая дата и время  
     
 

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

Отличием является - расширение php вместо html и наличие кода в новых тегах -

<? php

?>

Всё, что находится между этими двумя тегами не попадает в выводимую Web-страницу - убедитесь сами - попробуйте сохранить сформированную страницу из браузера на диск, а затем посмотрите её код.

Вы увидите, что это обычная статичная html-страница.

 
     
  Как видим php-скрипты выполняются на стороне сервера и сам код скрипта не попадает в создаваему в окне клиента страничку.  
     
 

Смысл использования php становится Вам понятен - язык php - используется для динамического формирования содержимого web-страниц.

Это дает достаточно широкие возможности по автоматизации и упорядочению информации Вашего сайта.

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

Ну а код, который я привел содержит всего одну операцию -

echo date("j, F, Y, g:i a");

Функция date запрашивает на сервере текущую дату и время, а функция echo выводит результат на web-страничку.

Запись в кавычках "j, F, Y, g:i a"

представляет набор параметров функции date и определяет что и в каком виде нужно выводить -

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

 
     
 

Применив этот скрипт на страничках Вашего сайта - код

<?php
echo date("j, F, Y, g:i a");

?>

можно вставить в любом месте создаваемого шаблона web-страницы

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

 
     
  В следующей нашей статье мы рассмотрим Как выводить русскоязычное название месяца, а также время в 24 часовом формате, мы также познакомимся с оператором switch языка php.  
     
подробнее

Flash приложения и игры - Шаг 3 - управляемый шарик

Как я осваивал Flash - содержание

Прошло уже значительное количество времени, с того момента, как был сделан шаг номер 2. Пришла пора нам с вами двигаться дальше.

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

Как оказалось второй шарик, который создавался в уроке Шаг 2 совсем не нужен.

Давайте сначала посмотрим пример -





Фокус ввода для области в котором размещено флеш-приложение на страничке сайта.

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

Этот простой механизм решает сразу 2 задачи: Ваша флеш игра получает фокус ввода от клавиатуры и стартует игровой процесс.

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

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

Это и есть тот самый фокус ввода.

     
  Создание макета помещения - этап 2  
     
     
  [Все уроки 3ds max] [Галерея моделей] [далее]  
     
  каркасный вид макета помещениясплошной вид макета помещения  
     
  Щелкнув по изображению можно скачать модель в формате 3ds max 7.0 (в виде архива Win-Rar 3.3)  
     
 

Способы обзора моделей (изменение точки зрения наблюдателя):

- Вращение наблюдателя ;

- Перемещение наблюдателя по экрану (Pan) . 

Отмена действия с изменением точки наблюдения – [Shift] + [z].

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

Панорама (Pan) - простое перемещение наблюдателя (как бы сдвиг рукой). Вращение имеет некоторые нюансы - когда вы выберете вращение наблюдателя в окне вида появится управляющий элемент - в виде желтой окружности. Если Вы будете наводить курсор мыши на разные элементы вид курсора будет изменяться, показывая в какой плоскости можно совершать вращение. Само вращение осуществляется перемещением мыши с нажатой левой кнопкой (аналогично действию других инструментов).

В ходе экспериментов с изменением наблюдения объекта Вы можете зайти в тупик задав очень неудобное положение. Отменить изменения можно нажав комбинацию клавиш [Shift] + [z] столько раз, сколько это необходимо.

Замечание: инструменты обозревания изменяют только положение наблюдателя! Положение объекта в пространстве (его пространственные или мировые координаты) при это остается неизменным! Помните это! Для изменения положения объекта в пространстве применяются другие инструменты. Например, Select And Move, которым Вы уже пользовались. Но обо всём этом далее.

Выше уже говорилось о том, что объекты изнутри "пусты" - т.е. невидимы. Чтобы убедиться в этом - попробуйте увеличивать лупой вид на объект так, чтобы оказаться внутри. Вы увидите, что изображение исчезает. Однако нам нужна видимая изнутри комната.

Добиться видимости изнутри можно несколькими способами. Один из них, часто применяемый при создании замкнутого объема закрытых или открытых пространств - это "выворачивание" видимых граней "наизнанку". Т.е. нормали граней отражаются и объект становится видимым изнутри, но невидимым снаружи. Это находит применение в компьютерных играх - когда создается так называемый "небесный куб" или помещение представляющее замкнутое пространство. Игрок никогда не выйдет за пределы этого пространства, что и дает возможность сделать внешние грани невидимыми, т.к. их никогда не потребуется отображать. Пример небесного куба представлен в разделе разработки компьютерных игр (урок 11).

Однако при этом способе толщина стен самая минимальная и ограничена толщиной простой плоскости, т.е. где-то 1 пиксель. В нашем примере, чтобы получить стены большей толщины, а именно - в 0,5м, мы изберем другой способ.

Создайте в любом месте еще один box.

 
     
  Select By Name - выбор объекта по имениИспользуя кнопку Select By Name выберите второй бокс и переименуйте в room_box  
     
  Align - выравнивание объектов в пространстве и друг относительно другаВыделите меньший бокс и, нажав кнопку Align щелкните мышью по второму (большему) боксу. Нам нужно выровнять боксы так, чтобы  
     
  окно параметров выравнивания  
     
 

меньший располагался точно внутри большего. Для этого, в появившемся окне задайте параметры как показано на рисунке.

При этом текущий объект будет выровнен по отношению к указанному объекту по координатам X и Z относительно центра.

Возникает вопрос: а нужно ли выравнивать объекты относительно координаты Y ? Возможно, да.

Как это проверить? В окне Perspective viewport включите режим отображения Wireframe – клавиша F2. Покрутите фигуры и посмотрите требуется ли выравнивание по Y. Если да, то произведите выравнивание.

Теперь мы получили две фигуры – одна внутри другой.

 
     
 

Режим Wireframe - отображение каркаса модели - т.е. отображение только ребер без отображения граней.

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

Количество сегментов будет таким же, если нет – задайте как у первого Box’а.

 
     
  малый бокс внутри большого (каркасный вид).  
     
 

Вы заметили, что на этом рисунке окно перспективы занимает всю площадь. Как это сделать? На панели изменения обзора - в правом нижнем углу окна программы найдите кнопку Maximize Viewport Toggle кнопка максимизации/минимизации текущего окна вида. Повторное ее нажатие приводит к восстановлению привычного Вам вида - всех 4-х окон проекций.

Произведем удаление пространства занимаемого малым боксом внутри большего:

- Выделите больший бокс, чтобы убедиться в том, что это действительно он – посмотрите его размеры на Modify panel;

- на панели Create в выпадающем списке выберите Compound Objects и нажмите кнопку Boolean;

 
     
  выбор объектов наполнения  
     
  объект наполнения - Boolean - логические операции  
     
 

Работая в 3DS MAX Вы обнаружите новый вид панелей - прокручиваемые панели. Т.к. Вам необходимо добраться до указанных ниже параметров, то произведите прокрутку панели - в момент когда курсор над панелью приобретает вид руки можно нажать левую кнопку мыши и прокрутить панель.

- в раскрывшейся панели Parameters задайте:

Pick Boolean

-         Move

Operation

-         Subtraction (A-B)

 
     
  заданные параметры для операции логического вычитания  
     
 

и щелкните по кнопке Pick Operand B.

Поскольку внутренний бокс сейчас не виден укажите его следующим образом: нажмите на Main Toolbar кнопку Select By Name и в окне укажите имя объекта, а затем кнопку Pick.

Если вы сделали все верно, то в других 3-х окнах вида (фронтальном, левом и верхнем) увидите изменения.

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

 

Теперь можете сохранить проделанную работу в файл my_room1.max и можно двигаться дальше!

 
     
  [Все уроки 3ds max] [Галерея моделей] [далее]  
     

 

megainformatic live chat
Начать беседу
X
 

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



fle game engine - движок для создания игр
fle game engine - движок для создания игр


Something: Unexplained 2 captive of desires / Нечто: Необъяснимое 2 в плену желаний
Костя Коробкин Комикс Коллекционное издание - 6 комиксов, 81 страница, 220 mp3 треков
megainformatic Размещение баннерной рекламы у нас
Время загрузки: 0,1596