Практическая часть
Создание программного продукта
Создание дизайна
Для того чтобы создать шаблон дизайна сайта необходимо нарисовать его в AdobePhotoshop. Выбор именно этого графического редактора для создания дизайна не случаен, каждый элемент шаблона необходимо располагать на своем слое с сопутствующим набором эффектов.
Итак, для начала создаётся новый файл размером 1920х1080 (FullHD). Окно создания нового файла представлено на рисунке 1.
Рисунок 1 – Создание нового файла
На первом слое создается наш фон, для этого нужно выбрать инструмент градиент и указать нужные цвета. Окно инструмента градиент представлено на рисунке 2.
Рисунок 2 – Использование градиента
Такой подбор цветов способствует меньшей усталости глаз. Теперь нужно создать наш лист текста, он должен быть белым и выделяться от фона. Для этого рисуется прямоугольник и в эффектах выставляется тень, не слишком темную, чтобы не отвлекала глаз.
Рисунок 3 – Эффект тени на основном листе
Для создания шапки используются два прямоугольника, большой как основа, и тонкий, как подводка. В шапке располагаю логотип учебника. Готовая основа шаблона представлена на рисунке 4.
Рисунок 4 – Основа шаблона
Теперь создается навигация страниц. Она для каждого типа страниц будет своя, но на шаблоне необходимо изобразить все что есть, чтобы позже не возникало проблем. Для кнопок навигации взяты цвета совместимые с основой. Рисуются прямоугольники, заполняются градиентами оттенков основных цветов, далее к ним применяется тень с теми же параметрами, как и у тени листа.
После этого необходимо нарисовать иконки кнопок. Главное условие минимализма – это минимум текста. Иконки исполнены пиксель-артом, что позволило вместить максимум информации в минимум пространства и исключить пояснительный текст.
Конечным штрихом послужит копирайт в правом нижнем углу. Чтобы он смотрелся необычно и привлекал внимание, он изображен в виде треугольника с буквами основного проекта (SeeMore). Конечный вид шаблона представлен на рисунке 5.
Рисунок 5 – Конечный вид шаблона
Написание HTML шаблона
Для написания HTML шаблона нам понадобится программа Dreamweaver. При открытии программа предлагает создать ряд файлов с разным назначением (рисунок 6).
Рисунок 6 – Выбор типа создаваемого файла
Следует выбрать пункт «Сайт Dreamweaver». Задается название проекту и локальная папку, где будет располагаться весь каталог (рисунок 7).
Рисунок 7 – Создание «сайта»
Создание именно сайта, а не отдельного файла, позволит выполнять работу структурировано, программа сама будет распределять файлы.
После этого создаю файл HTML, сохраняю его в корневом каталоге с названием index, выбор именно этого названия очень важен, так как при хостинге проекта сервер будет обращаться к файлу с именно этим названием.
Программа сгенерирует стандартный код шаблона:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
</head>
<body>
</body>
</html>
Теперь можно смело приступать к наполнению страницы элементами шаблона.
Код шапки:
<div class="top">
<div class="menu">
<div class="logo"><div>
<div class="logo_text"><strong>
3Ds MaX</strong><div class="logo_aftertext"><strong>lessons</strong></div></div>
</div>
</div>
То есть, создается контейнер с классом «top», в котором располагается контейнеры с эмблемой, и с текстами «3Ds MaX» и «lessons», оформленные разными стилями.
Для оформления нам понадобятся каскадные таблицы стилей. Подключаются они отдельным файлом сразу после тега <head>
<link href="css/style.css" rel="stylesheet" type="text/css" />
Это значит, что мы вставляем в файл набор стилей из файла style.css находящегося в папке css корневого каталога. Стиль созданных контейнеров описан в этом файле как:
.top{
background: #000; - черный фон
z-index: 5; - высота относительно других объектов 5
height:70px; -высота 70 пикселей
width:100%; -ширина во весь экран
position: fixed; -позиционирование зафиксировано
top:0px; -отступ от верхней границы экрана 0 пикселей
border-bottom: 7px solid #0088cc; нижняяобводка
}
.logo{
float:left; -прилеплено к левому краю
margin:10px; -отступ от других объектов 10 пикселей
margin-top:10px; -отступ сверху от объектов 10 пикселей
height:50px; -высота 50 пикселей
width:50px; -ширина 50 пикселей
background: url(img/logo.png); -фоновое изображение
background-repeat:no-repeat;} –неповторятьфон
.logo_text{
font: Arial, Helvetica, sans-serif; -шрифт
font-size:32px; -размершрифта
color:#FFF; -цветтекста
margin-top:20px; - отступсверху 20 пикселей
}
.logo_aftertext{
position:relative;-позиционирование относительно родителя
left:134px;-отступ слева 134 пикселя
top:-45px;-отсуп сверху -45 пикселей
font: impact; -шрифт
font-size:22px; -размершрифта
color: #0d99e4; -цвет шрифта
}
Далее создается контейнер, в котором будет лист, навигация и копирайт.
Важным аспектом в его классе стиля является отцентровка, она реализуется следующим образом:
margin: 0 auto;
Применение именно этого типа центровки очень важно в данном случае, так как эта центровка независима от других внешних и внутренних объектов.
Навигацию целесообразнее всего будет реализовать в виде списка.
<div id="menu_main">
<ul class="nav_main">
<li id="map" class="navig"><a href="map.html">
<div id="nav_icon" class="icon_map">
</div></a></li>
<li id="map1" class="navig">
<a href="#" title="перейти к списку уроков этого раздела">
<div id="nav_icon" class="icon_map1"></div>
</a></li>
<li id="prev" class="navig"><a title="предыдущийурок">
<div id="nav_icon" class="icon_prev"></div>
</a></li>
<li id="next" class="navig"><a title="следующийурок">
<div id="nav_icon" class="icon_next"></div>
</a></li>
</ul>
</div>
Следует отметить, что все изображения вынесены в стили, это сделано, чтобы пользователь случайно не перетащил их и не скопировал. В дополнение к этому такой подход позволяет использовать стиль с изображениями на всех страницах шаблона, облегчая код страниц.
Теперь создается лист.
<divclass="content">
<ul class="nav">
<li class="01"><a href="1_1.html">
<div class="icon"><imgsrc="css/img/Lesson.jpg" /></div>
<h3>Обучающий курс для лабораторных работ</h3>
<p>описание</p></a>
</li>
<li class="03"><a href="3_1.html">
<div class="icon"><imgsrc="css/img/vt_icon.jpg"s/></div>
<h3>Конкурсные видео уроки по 3D max от videotuts.ru</h3>
<p>описание</p></a>
</li>
<li class="03"><a href="glossary.html">
<div class="icon"><imgsrc="css/img/glossary.png"s/></div>
<h3>Глоссарий 3Ds Max</h3>
<p>Основные термины и элементы меню</p></a>
</li>
</ul>
</div>
Такая организация наполнения не случайна, в дальнейшем, при использовании динамической системы смены страниц, будет на много проще, достаточно будет просто заменять содержимое контейнера с классом «content».
Теперь реализую копирайт.
<divclass="C">
<a href="http://seemore.on.ufanet.ru/"></a>
<a href="http://seemore.uphero.com/"></a>
</div>
Возможно, подобная реализация вызывает много вопросов, да и выше по коду многое, как будто, не доделано. Это объясняется тем, что вся разметка, цвета и размеры у нас вынесены в стили, благодаря им код страницы который мы описали выше, стал таким маленьким и компактным.
Теперь рассмотрим основные аспекты стилей.
Тени с помошью CSS реализуются следующим образом
-moz-box-shadow: 0 0px 10px #999999;
-webkit-box-shadow: 0 0px 10px #999999;
box-shadow: 0 0px 10px #999999;
Первая цифра это смещение горизонталь, вторая вертикаль, третья это размер тени, далее цвет.
list-style: none;
эта опция отключает оформление списков, это актуально в нашей реализации меню.
Опция«a:hover» позволяет изменять стиль объекта, при условии что на него наведен курсор.
Градиенты реализовать в CSS сложнее, поэтому существует огромное количество генераторов градиентов. Рассмотрим самый (на мой взгляд) удобный из них.
Ultimate CSS Gradient Generatorhttp://www.colorzilla.com/gradient-editor (рисунок 8).
Рисунок 8 – Окно редактора UcssGG
В этом генераторе есть обширная база красивых градиентов, и можно самому установить нужные параметры цветов, их положения на градиенте и прозрачность, после чего вам будет выведен эскиз готового градиента и его CSS код.
Пример кода градиента фона:
background: #ffffff;
background: -moz-linear-gradient(left, #ffffff 0%, #f2fcff 100%, #d3e4e8 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ffffff), color-stop(100%,#f2fcff), color-stop(100%,#d3e4e8));
background: -webkit-linear-gradient(left, #ffffff 0%,#f2fcff 100%,#d3e4e8 100%);
background: -o-linear-gradient(left, #ffffff 0%,#f2fcff 100%,#d3e4e8 100%);
background: -ms-linear-gradient(left, #ffffff 0%,#f2fcff 100%,#d3e4e8 100%);
background: linear-gradient(left, #ffffff 0%,#f2fcff 100%,#d3e4e8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#d3e4e8',GradientType=1 );
В CSS можно реализовать анимацию, делается это следующим образом:
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
Здесь только один параметр, это скорость анимации. Анимация происходит следующим образом. Нужно установить изначальные параметры стиля с указанием времени анимации, затем параметры стиля на событие. При выполнении события будет происходить плавная смена стиля, это и есть анимация.
Анимацию в нашем шаблоне мы используем в реализации навигации. При наведении на кнопку она будет выдвигаться из-под листа, где будет написано назначение кнопки.
Так же анимация понадобится в копирайте. Как вы могли заметить, в копирайте у нас расположены ссылки, но на графическом шаблоне никаких ссылок нет. Это потому что ссылки будут скрыты до тех пор, пока пользователь не заинтересуется копирайтом и не наведет курсор. Это сделано с целью разгрузки внешнего вида страницы, да и так интереснее.
Прозрачность в CSS реализуется следующим образом
filter:alpha(opacity=100);
-moz-opacity: 1;
-khtml-opacity: 1;
opacity: 1;
Здесь числами мы задаем прозрачность от 0 до 100, или от 0 до 1. Как вы могли заметить, при установке тех или иных параметров используется несколько строчек, это разные реализации эффектов для разных браузеров.
Итак, шаблон создан, он подходит для всех типов страниц кроме одной, нужно дополнение для шаблона карты сайта. Карта сайта реализована списком, но с помощью CSS она приобретет древовидную структуру. Это делается нехитрой манипуляцией. Итак, рассмотрим шаблон для карты сайта.
<ulclass="map">
<li><a href="1_ul.html">Обучающий курс для лабораторных работ</a>
<ul>
<li><a href="1_1.html">Урок 1: Знакомство с интерфейсом</a>
</li>
</ul>
</li>
</ul>
К полученному списку с вложенным списком применяю следующий стиль:
.mapli{-стиль объекта карты сайта
list-style: none; } –список без стилизации
.maplia{
padding:10px; -разделение вложенных в список объектов
display:block; -отображение объектов как блок
text-decoration:none;} -отсутствие стилизации текста
.mapliulli{ -стиль внутреннего списка
border-left: 2pxsolid #999; создание вертикальной «ветки»
border-bottom: 2pxsolid #999; создание горизонтальной «ветки»
}
.map li ul li a{
position:relative;
top:20px; -смещение блока относительно родителя
left:20px;
}
В этих строчках и заключается весь фокус, список становится древовидным, что подчеркивает соотношение и делает список читаемым. Остается только настроить эффект наведения курсора на объекты.
Теперь осталось настроить только эффект приветствия. Для этого будет использована эмблема учебника на черном фоне, исчезающая после клика.
<div class="welcome"><div></div></div>
Класс:
.welcome{
filter:alpha(opacity=100);
-moz-opacity: 1;
-khtml-opacity: 1;
opacity: 1;
z-index:1000;
height:100%;
width:100%;
background:#000000;
position:absolute;
top:0px;
}
Как видно из стиля эмблема не прозрачна. Как же сделать, чтобы она исчезала? Это и другие интерактивные аспекты будут рассмотрены в следующем пункте пояснительной записки.
Написание скриптов
Итак, скриптовой основой была выбрана библиотека Jquery. Последнюю ее версию всегда можно найти в интернете. Она подключается так же как файлы стилей.
<scripttype="text/javascript" src="js/jquery.js"></script>
Зачем же понадобилась помощь этой библиотеки. Она будет использована для анимации меню учебника в стиле назойливых баннеров. Меню будет следовать за пользователем в процессе листания учебника. Это реализовано очень простым образом. Библиотека JQuery хороша тем, что к ней написано огромное количество модулей на все случаи жизни. Для текущей задачи существует как раз такой. Итак, подключим составной модуль:
<script type="text/javascript" src="js/ui.core.js"></script>
<script type="text/javascript" src="js/jquery.scrollFollow.js"></script>
<script type="text/javascript" src="jquery.scrollFollow.js"></script>
Для его использования понадобится написать всего несколько строчек кода:
$( document ).ready( function () {
$( '#menu_main' ).scrollFollow( { -«следящий» объект
speed: 500, - Скорость скольжение, мс
offset: 120, Кол-во пикселей, на которое будет отступать блок от верхней части браузера
} );
} );
Теперь собственно скрипт для работы с нашим приветствием:
$( document ).ready( function () {
$(".welcome").click( function(){ -срабатывать при клике на объект
$( '.welcome').animate({opacity: "0"}, function () { -прозрачность
$('.welcome').css('visibility','hidden'); -скрывать
})
})
} );
Создание обучающего курса
Обучающий курс состоит из лабораторных работ и видео уроков. Лабораторные работы дают основы работы в 3Ds Max, а видео уроки обучают работе в конкретных предметных областях.
Основной обучающий курс проводится последовательно по девяти темам:
- знакомство с интерфейсом;
- примитивы;
- редактируемые сетки;
- сплайны;
- материалы;
- системы частиц;
- рендеринг;
- освещение;
- камеры;
Эти знания необходимы и достаточны для комфортного начала работы. Кроме того эти знания не являются слишком глубокими, чтобы позже пришлось половину забыть.
Создание методических указаний к лабораторным работам
Для создания лабораторных работ использовался 3Ds Max 2010. Даже изучая этот программный пакет в 4й версии, работая в 8й, постепенно переходя к более новым версиям, ничего не будут упущено. Существенных изменений в версиях нет, отличаются версии определенными профессиональными модулями. Программный пакет 3Ds Max с каждой последующей версией стремится расслоиться на предметные области, именно поэтому была выбрана версия 2010.
Итак, для того чтобы начать создавать методические указания нужна конечная цель, каждый объект конечной сцены должен иметь назначение и место в какой-либо лабораторной работе. Например, примитив куб будет игральным кубиком, а шар – бейсбольным мячом.
Первый урок – знакомство с интерфейсом. В ходе этого урока необходимо рассказать об интерфейсе 3Ds Max и об его особенностях. Этот урок короткий, но несет в себе фундаментальные знания, поэтому нужно представить информацию максимально доступно.
Открываем программный пакет 3Ds Max и делаем скриншот основных элементов меню (рисунок 9).
Рисунок 9 – Скриншот главного меню программы
Текст пишется в MC Word, наполняется скриншотами, информации должно быть максимально малое количество, но при этом сжатие текста не должно пагубно сказаться на количестве информации, которую он несет.
После создания скриншотов основного меню программы, панели инструментов, окон проекции, панели работы с объектами и последующим их описанием первый урок окончен.
Второй урок – Примитивы. Этот урок обширен и содержит большое количество информации, здесь следует применять метод сжатия информации через комментирование изображений. Первое что должен сделать студент, это создать папку на рабочем столе назвав ее своим ФИО. Далее следует скриншот меню работы с геометрией, который предварительно нужно закомментировать в Adobe Photoshop (рисунок 10).
Рисунок 10 – Меню работы с геометрией
Далее студент должен создать объект Plane(плоскость) и задать нужные параметры (Рисунок 11). В процессе создания этого объекта студент продолжает знакомство с интерфейсом программы.
Рисунок 11 – Объект Plane (плоскость)
Далее студент создает объект сфера (Рисунок 12) с нужными параметрами и располагает его в сцене средствами Move. Этими действиями студент все лучше изучает интерфейс, именно поэтому первый урок был таким небольшим.
Рисунок 12 – Объект сфера
После этого создается объект Чайник и помещается на нужное место. Выбор и координаты объектов не случайны. Все созданное в сцене имеет свою конечную цель, с каждым уроком объекты будут преображаться, и сцена будет приобретать «краски».
Далее студент создает объект куб, после чего создает его копии и средством Move задает нужные координаты. На этом второй урок заканчивается (Рисунок 13).
Рисунок 13 – Законченный вид сцены второго урока
Следующий урок – редактируемые сетки. Студент должен создать кружку из цилиндра и трубы, редактируя вершины сетки. Итак, создаются цилиндр и труба (Рисунок 14).
Рисунок 14 – Цилиндр и труба в качестве основы для кружки
После создания этих объектов они преобразуются в редактируемые сетки. После чего вершины цилиндра редактируются для придания нужной формы. После этого редактируется труба, лишние вершины удаляются, и придается нужная форма. Далее с помощью инструмента Boolean удаляется внутренняя часть чашки. Далее настраиваются уровни сглаживания объектов, и применяется модификатор MeshSmooth с параметром Smoothing Groups. После студент объединяет два полученных объекта инструментом Boolean и получается чашка, которая пригодится в последующих уроках (Рисунок 15). На этом урок окончен.
Рисунок 15 – Готовая кружка
Таким же нехитрым способом создаются все остальные уроки, и конечный вид сцены, которую создаст каждый студент, не может не радовать глаз (рисунок 16).
Рисунок 16 – Законченная сцена
Далее файлы из MC Word импортируются в Dreamweaver. Для этого следует перетащить файл в поле редактирования дизайна, и, если настроены локальные хранилища изображений, файлы разместятся в нужной папке, и не будут замещаться при совпадении имен. Текст будет размещен в нужном положении, так как у нас настроены стили.
Осталось только создать ссылки в кнопках навигации в нужном порядке и лабораторные работы готовы. Весь курс лабораторных работ находится в методических указаниях по программному пакету 3Ds Max.
Использование сторонних видео уроков
Цель видео уроков в данном курсе – дать дальнейшее направления развития для ученика. Здесь следует выделить два вида деятельности, это статическая графика, то есть фотореалистичные изображения интерьеров и архитектуры, и динамические ролики, то есть графика для мультфильмов и создания спецэффектов.
Поэтому в первом блоке представлены видео уроки по Vray, это на мой взгляд мощнейший рендер, предоставляющий широкие возможности по визуализации. Более того, после изучения этого блока, ученик может найти себя в архитектурной деятельности и игровой индустрии.
Во втором блоке представлены уроки по совмещению отснятого видео и 3D графики. После просмотра ученик будет иметь представление о хромокее, нахождении опорных точек и наложении эффектов в конечном композинге.