Уроки по Photoshop, Illustrator, Flash и 3ds max. Статьи по дизайну и фотографии.

Создаем приятный простой шаблон сайта в Фотошоп

приятный простой шаблон сайта

Шаг 1. Первый делом, создаем новый документ (Ctl+N), размером 1000*600 пикселей.

create new document

Шаг 2. Создаем новый слой (Ctrl+Shift+N) и идем в Layer Styles (Стили Слоя) двойным щелчком по иконке слоя на Палитре Слоев. А там в пункте Gradient Overlay (Наложение Градиента) задаем следующие параметры (тем самым мы закрасили весь слой приятным зеленым градиентом):

gradient overlay gradient editor

Шаг 3. Добавим текстуру. Для этого скачаем ее отсюда, вставим в новый слой и поменяем Режим Смешивания (Blending Mode) на Linear Burn (Линейный Затемнитель).

текстура земли

Шаг 4. Теперь, выбираем Инструмент Rectanqular Marquee Tool (Прямоугольная Область(M)) и выделяем им область, как на рисунке внизу. Создаем новый слой (Ctrl+Shift+N) и, перейдя на него, заливаем прямоугольник зеленым (#75a414) цветом.

rectanqular marquee tool

Шаг 5. Повторяем предыдущий шаг для создания новой области. Заливаем его #639013.

выделенная область

Шаг 6. Выбираем Инструмент Rounded Rectangle Tool (Прямоугольник со скругленными углами (U)) с радиусом скругления около 5 пикселей и рисуем белую область:

Rounded Rectangle Tool

Шаг 7. Тем же Инструментом Rounded Rectangle Tool (U) рисуем навигационную область и после этого, выбрав Инструмент Type Tool (Текст (T)), пишем слово "home" (или любое другое), используя #639013 цвет.

навигационная панель

Шаг 8. Если надо, рисуем ещё навигационные кнопки тем же способом.

навигационные кнопки

Шаг 9. Покажем, что созданная в предыдущем шаге кнопка неактивна в данный момент. Для этого закрасим её в отличный от белого цвет. Идем в Стили Слоя (Layer Styles) слоя с кнопкой (кликнув дважды по иконке слоя) и задаем следующие параметры:

gradient overlay gradient editor

Шаг 10. Добавлем белый текст неактивным кнопкам.

пишем текст

Шаг 11. После того, как мы подпишем все кнопки, наш шаблон сайта будет выглядеть так:

макет сайта

Шаг 12. Осталось только добавить текст и картинки. Наш макет сайта готов.

рисуем макет сайта

Урок переведен автором сайта и при цитировании его на русском языке ссылка на сайт обязательна. Автор DesignReviver. Оригинал статьи на английском

Другие уроки Фотошоп >>