Создание сайта класса (стр. 2 из 2)

12. Новый слой. Связываем этот слой со слоем трубы, нажимая на маленькую область около изображения глаза. Отправляемся в Layer > Mergelinked, чтобы слить связанные слои.

13. Выбираем BrushTool и указываем кисть с параметрами: Masterdiameter: 8 px. Убедитесь, что прозрачность слоя трубы отключено.

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

п. 4 Создание крови

1. Создаем новый документ 500х500 пикселей.

2. Применяем следующие фильтры: Filter> Render> Clouds. Filter> Blur> Motion BlurспараметрамиAngle: 0º; Distance: 999. Filter> Noise> Add Noiseспараметрами Amount: 10%; Distribution: Gaussian; Monochromatic: checked. Filter> Blur> Motion BlurспараметрамиAngle: 0º; Distance: 37

3. Изменяем размер холста Image>CanvasSize. Выставляем следующие значения:

Width: 450 pixels

Height: 500 pixels

Relative: Unchecked

Anchor: Middle

4. Создаемновыйслой, применяемкнемуFilter>Render>Cloudsивыставляемblending modeнаMultiply.

5. ПрименяемфильтрFilter> Render> FIbersсозначениямиVariance 16;

Strength 4.

6. ДалееImage> Adjustments> Brightness/Contrast, выставляемзначениеконтраста+85.

7. Ctrl+UлибоImage> Adjustments>Hue/Saturation, выставляемзначения:

Hue: 0; Saturation: 100; Lightness: 30. Не забываем установить галочку на Colorize.

8. Создаем новый слой, применяем фильтр Filter>Render>Clouds, режим смешивания устанавливаем на Overlay.

9. Применяем к новому слою Filter>Blur>Motion Blur со значениями: Angle: 90⁰ Distance: 50

3. Курсоры и иконки

Для создания анимированных курсоров на странице я использовал программу «AWiconsProv. 9.0.1» (Lokas Software, www.carlitus.net). Скриншот программы показан ниже (рис. 2). Преимущества программы состоят в простом и наглядном интерфейсе, простоте использования, широком спектре возможного использования, поддержка различных графических форматов, возможность ее интегрирования в программу Photoshop в качестве плагина.

Рис. 3

Для рисования курсоров преимущественно использован инструмент карандаш. Каждый курсор рисовался «пиксель за пикселем» с картинок оружия представленного в игре Half-life. По мере продвижения по сайту меняются и курсоры, если на главной станице это пистолет, то на странице «Творчество» это снайперский арбалет из игры.

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

Всего на странице 4 курсора. Они показаны ниже.

Пистолет –

, на главной странице

Автомат –

, на странице «О нас»

Дробовик –

, на странице «Творчество»

Снайперский арбалет –

. на странице «Наша гордость»

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

Рисуется сам арбалет.

. Далее, путем рисования или вырезания делается анимация, состоящая из нескольких кадров. На рисунке ниже показана цепочка кадров образующая движение.

Создание иконки.

Как уже отмечалось в § 1, при отображении сайта в браузере в заголовке окна стандартная иконка обозревателя

заменена на созданную мною иконку с логотипом сайта . Для создания иконки также использовалась программа AWiconProv. 9.0.1.

Литература

1. А. Хоумер. DynamicHTML. Справочник. СПб, Изд. «Питер-пресс», 2002.

2. Д. Кирсанов. Web‑дизайн. СПб, Изд. «Питер», 2005.

3. Чиртик Александр. HTML. Популярный самоучитель. СПб, Изд. «Питер», 2004.

4. Сергеев А.П., Кущенко С.В. Основы компьютерной графики. Adobe Photoshop и CorelDraw – два в одном. Изд. «Вильямс», 2005.

5. http://demiart.ru/forum/

6. http://www.web-silver.ru

7. http://www.artlebedev.ru

8. http://www.citforum.ru