Опубликован: 27.05.2011 | Доступ: свободный | Студентов: 8212 / 1599 | Оценка: 4.07 / 3.85 | Длительность: 14:52:00
Специальности: Фотограф
Лекция 7:

Приемы редактирования фотографий на компьютере в программе Adobe Photoshop CS

< Лекция 6 || Лекция 7: 123456 || Лекция 8 >

Делаем макет страницы для сайта в Фотошоп

В этом Фотошоп уроке будем учиться рисовать лицо вашему сайту. За основу возьмем следующую структуру страницы (рис. 7.31).

Страница, выбранная в качестве макета

увеличить изображение
Рис. 7.31. Страница, выбранная в качестве макета

Как видим, в основе сайта заложена таблица следующего вида:

ЗАГОЛОВОК САЙТА
НАВИГАЦИЯ ОСНОВНОЕ СОДЕРЖАНИЕ ДОПОЛНИТЕЛЬНО
РЕКВИЗИТЫ РАЗРАБОТЧИКА

Сделаем нечто похожее сами.

Создаем фон страницы

Начните с создания нового документа размером 800 на 600 px – рис. 7.32.

Создаем в Фотошоп новый документ

Рис. 7.32. Создаем в Фотошоп новый документ

Залейте документ цветом #e6f2e6 (рис. 7.33).

Окно выбора цвета веб страницы

Рис. 7.33. Окно выбора цвета веб страницы

Создайте новый слой и внутри первого прямоугольника инструментом Rounded Rectangle Tool нарисуйте скругленный прямоугольник, залив его серым цветом. Нажмите на кнопку Add A Layer Styleкнопкавнизу палитры слоев и добавьте стили (по вашему выбору) – рис. 7.34.

Рисование навигации сайта

увеличить изображение
Рис. 7.34. Рисование навигации сайта

С помощью инструментакнопка, нарисуйте прямоугольное выделение в левом верхнем углу макета сайта. Перейдите в меню Select (Выделение) | Modify (Модифицировать) | Smooth selection (Сгладить), чтобы сгладить края прямоугольника (рис. 7.35.).

Задаем скругление прямоугольника.

Рис. 7.35. Задаем скругление прямоугольника.

Создайте новый слой, залейте выделение цветом #6755f0. Далее примените стили: Drop Shadow (Наружная тень). Создайте три таких кнопки на одинаковом расстоянии друг от друга (рис. 7.36).

Создаем навигационную панель из кнопок

увеличить изображение
Рис. 7.36. Создаем навигационную панель из кнопок

Рисунки для заголовка (хедера) и реквизитов

На этом шаге мы вставим два рисунка и изменим их прозрачность – рис. 7.37.

Основа макета сайта готова

увеличить изображение
Рис. 7.37. Основа макета сайта готова

Затем напишем текст для кнопок и для хедера. К тексту заголовка применим эффекты слоя – рис. 7.38.

Тексты написаны

увеличить изображение
Рис. 7.38. Тексты написаны
< Лекция 6 || Лекция 7: 123456 || Лекция 8 >
Марина Варавина
Марина Варавина

Курс несоответствует своей теме, заявленному названию... пример: "Какая из программ создания цифровых фотоальбомов имеет русский интерфейс?" ну как этот вопрос соотносится с основами фотографии?? Автор как будто вообще не знал, о чем сделать курс.

Егор Скрипко
Егор Скрипко

В 9 лекции автор учит как с помощью Word создать HTML страницу. Однако, Word категорически не рекомендуется использовать для создания веь-страничек потому что Word захламляет код страницы ненужными тегами. Для создания html-страниц лучше использовать Dreamweaver.

Галина Епифанцева
Галина Епифанцева
Россия, г. Бийск