lessons 24.03.2008

Создаем приятный простой шаблон сайта с помощью Фотошопа. Всего 12 шагов и ваш сайт готов.

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

create new document

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

gradient overlay
gradient editor

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

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

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

rectanqular marquee tool

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

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

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

rounded rectangle tool

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

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

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

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

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

gradient overlay
gradient editor

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

пишем текст

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

макет сайта

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

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

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

В данном уроке создадим свадебный макет сайта. Макет получится простеньким, зато быстро ;).

свадебный макет сайта в фотошопе

move

Шаг 1. Создаем новый документ (Ctrl+N) размером 760*770 пикселей. Помещаем в этот файл картинку со стока и перемещаем её в нужное место с помощью Инструмента Move (Перемещение (V)).

gradient overlay

Шаг 2. Далее, давайте добавим красивые свадебные фотографии и разместим их на слайдах. Чтобы переместить используем Инструмент Move, а для изменения Масштаба и Поворота Инструмент Free Transform (Свободная Трансформация (Ctrl+T)).

rectangle tool

Шаг 3. Выбираем Инструмент Rectangle Tool (Прямоугольник (U)) и рисуем им прямоугольник #dfdac7 цвета. После этого применим к слою с прямоугольником Стиль Слоя (Layer Styles) — Outer Glow (Внешнее Свечение), выбрав соответствующую кнопочку внизу Палитры Слоев.

прямоугольник
outer glow

прямоугольник со свечением копируем прямоугольник

Шаг 4. Для следующего шага нам понадобятся гранжевые кисти, их можно скачать с сайта Mud brush*|*brush-mania. com. Загружаем их в Фотошоп, создаем новый слой (Ctrl+Shift+Alt+N) и рисуем Инструментом Brush Tool (Кисть) (выбрав новые кисти) некую текстуру (см. рисунок). Режим Смешивания (Blending Mode) для данного слоя ставим Overlay (Перекрытие).

brush
рисуем текстуру

Шаг 5. Копируем прямоугольник и помещаем так, как показано на рисунке. Текстуру можно изменить, можно оставить.

rectangle
молодожены

Шаг 6. Рисуем ещё один прямоугольник #3a3a3a цвета. После этого украшаем его цветком и молодоженами.

type
текст

Шаг 7. Выбираем Инструмент Horizontal Type Tool (Горизонтальный Текст (T)) и добавляем текст на наш макет.

custom shape tool
произвольная фигура
цветочки

Шаг 8. Осталось совсем немного. Выбираем Инструмент Custom Shape Tool (Произвольная фигура (U)) и добавляем какие-нибудь красивые декоративные элементы (мы выбрали цветочки).

свадебный макет сайта

Шаг 9. Добавим ещё пару фоток и всё! Наш свадебный макет сайта готов!/td>

В предыдущем уроке я рассказывал про обработку большого количества фотографий с повторяющимися действиями, а сейчас я расскажу, как сохранить каждый слой отдельным файлом. В графической программе Фотошоп есть встроенная функция, которая позволит нажатием одной кнопки сохранить все слои в разный формат, а также можно сохранять только видимые слои. Очень удобно, например, для изготовления скриншотов. (продолжение…)