Создание сайта на тему "Экстремальные виды спорта"
Дипломная работа - Компьютеры, программирование
Другие дипломы по предмету Компьютеры, программирование
0.,,.,,">Логотип - важнейший элемент имиджа компании. Он служит, в первую очередь, для идентификации компании на рынке. Логотипы появились для того, чтобы отличать продукцию различных фирм в рамках одной отрасли. Зарегистрированная торговая марка защищает компанию от недобросовестной конкуренции и позволяет защитить её права в суде. В восприятии потребителя наличие логотипа или товарного знака фирмы, имеющей устоявшуюся репутацию, является гарантией качества товара. Товары, не имеющие известного логотипа, называют noname.
Для данного сайта был разработан следующий логотип:
Рисунок3.1 - Логотип сайта
Логотип выполнен в оранжевых тонах, в стиле заголовка сайта на шапке. В основе логотипа круг, и две буквы E и Z, первые буквы названия сайта ExtremeZone. На пересечении букв и круга пустое пространство, что придает логотипу более простой и немного агрессивный вид. В правом верхнем углу изображена фигура человека, отражающая тематику сайта (экстрим). В правом нижнем углу расположен адрес сайта ExtremeZone.by. Логотип разработан в программе AdobePhotoshopCS5.
Порядок создания логотипа:
1)Нарисовали круг произвольного диаметра, цвет заливки - оранжевый.
2)На отдельных слоях написали буквы E и Z подходящего размера.
)Расположили буквы относительно круга так, как показано на рисунке.
)На пересечении букв и круга удаляем части слоев.
)Объединяем имеющиеся слои.
)Вставляем в верхний левый угол логотипа фигуру летящего человека, заготовленную заранее.
)Применяем к получившемуся изображению эффект Тиснение для придания объема.
)Под фигурой человека делаем надпись с адресом сайта ExtremeZone.by.
)К надписи применяем эффект Тень, для того чтобы она отчетливо смотрелась на любом фоне.
3.2Создание анимированного баннера для сайта
Для создания баннера была выбрана программа AdobePhotoshopCS5, т.к. на мой взгляд, это оптимальный вариант для реализации данного элемента.
Последовательность создания баннера:
1)Создали новый документ размером 468х60 px, в соответствии со стандартами в области создания web-элементов.
2)Чтобы не повторяться оговорим сразу тот момент, что каждый элемент будет создаваться на отдельном слое.
)Установили фон, на котором будут отображаться необходимые нам надписи.
)С помощью инструмента Текст пишем необходимые надписи (опять же каждую на своем слое). Для отчетливости используем эффект Тень.
Рисунок 3.2 - Слои текста
)Далее необходимо создать закрывающиеся ставни в стиле дизайна нашего сайта. В начале создаем ставни, состоящие из двух частей, как показано на Рисунке 3.2. Обе части поместим в группу для более удобного дальнейшего использования. Создадим несколько копий группы слоев. В каждой последующей группе ставни отодвигаем на 4 рх (каждую часть вверх и вниз соответственно).
Рисунок 3.3 - Группы слоев
)Создаем копию слоя с закрытыми ставнями и пишем поверх него адрес сайта (EXTREMEZONE.BY). Применительно к тексту используем эффекты тиснения и свечения, тем самым добиваясь эффекта тиснения на металле.
)
Рисунок 3.4 - Тиснение текста
8)Создание анимации. В меню Окна выбираем пункт Анимация и в нижней части окна видим панель Анимация (покадровая). Создаем необходимое количество кадров и можно приступать непосредственно к их заполнению. Делаем активным первый кадр и на панели слои делаем видимым только один слой - фоновый (он будет видимым всегда). Выделяем следующий кадр и делаем видимым ещё один слой, в данном случае это текст Не хватает адреналина?. Выделяем третий кадр. Скрываем слой с этим текстом и делаем видимым следующий текст. Эту операцию проделываем с последующими кадрами, где выводится текст. После этого делаем активным очередной кадр и начинаем сдвигать наши ставни. Для этого помимо слоя с фоном делаем видимой группу слоев с практически полностью раздвинутыми ставнями. Далее поочередно вставляем на кадры слои с постепенно приближающимися ставнями до тех пор, пока они не сойдутся в центре баннера. Для этого кадра устанавливаем задержку 5 сек. для того, чтобы подчеркнуть эффект закрытия и не дать тексту преждевременно отобразиться. И наконец, последний кадр, делаем поверх ставней видимым текст EXTREMEZONE.BY и устанавливаем для него задержку около 10 сек. чтобы остановить внимание на адресе сайта перед повторным проигрыванием анимации.
)Сохранение анимации. Нажимаем Файл/Сохранить для Web и устройств (100%) или сочетание клавиш Alt+Shift+Ctrl+S. Увидим следующее окно:
Рисунок 3.5 - Окно сохранения web элемента
<