Дизайн сайта в фотошопе
ШАГ 1.



Дизайн сайта в фотошопе

(что бы увеличить, нажмите на изображение)


Данный урок поможет Вам освоить технику создания макетов для корпоративных и бизнес-сайтов. Проделав все описанные операции, вы сможете самостоятельно без вспомогательной помощи разрабатывать и создавать собственные макеты веб-страниц.

На первом этапе следует создать новый документ размером 960х900 пикселей. Этот процесс можно выполнить путём совместного нажатия с клавиатуры Ctrl + Shift + N. Данный размер, является наиболее привычным и распространённым. Для удобства работы в программе Photoshop можно пользоваться функцией Сетка ( Grid).

Далее приступаем к созданию самого макета. Для этого следует выбрать инструмент Заливка (Paint Bucket ), в нашем примере мы выбираем цвет # f5f5f5, после чего необходимо нажать одним щелчком мыши в области вашего документа. Далее на панели инструментов выбирается инструмент Прямоугольник (Rectangle Tool), при помощи которого создаются две формы.

Дизайн сайта в фотошопе


ШАГ 2.

В нашем случае автор воспользовался инструментом Градиент (Gradient), входящего в набор. Данный набор инструментов один из самых многофункциональных, однако, доступ к нему имеют лишь VIP-члены сайта Grafpedia.

/>
При желании вы можете воспользоваться им, или дополнить набор следующими Стилями слоя (layer styles).

Дизайн сайта в фотошопе


Дизайн сайта в фотошопе


Дизайн сайта в фотошопе


Дизайн сайта в фотошопе


ШАГ 3.

Чтобы перейти к Стилям слоя (layer styles) нужно проделать следующий путь Слой-> Стиль слоя (Layer-> Layer Styles).

После всех проделанных операций результат должен выглядеть следующим образом.

Дизайн сайта в фотошопе


ШАГ 4.

Далее на панели инструментов следует выбрать инструмент Прямоугольник со скруглёнными углами (Rounded Rectangle Tool). На панели редактирования параметров необходимо выбрать радиус (Radius) до 6 пикселей.

Дизайн сайта в фотошопе


ШАГ 5.

При помощи данного инструмента необходимо создать 4 фигуры по подобию изображения.

Дизайн сайта в фотошопе


ШАГ 6.

После этого необходимо добавить приведённые ниже Стили слоя (layer styles). Данные настройки можно использовать для всех последующих фигур.

Дизайн сайта в фотошопе


Дизайн сайта в фотошопе


Дизайн сайта в фотошопе


Дизайн сайта в фотошопе


После всех действий у вас должно получиться следующее.

Дизайн сайта в фотошопе


ШАГ 7.

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

Первоначально при помощи инструмента Перо (Pen Tool) следует создать фигуру подобную картинке ниже. Далее чёрная фигура послужит помощником для создания тени.

Дизайн сайта в фотошопе


ШАГ 8.

Для создания тени одним нажатием правой кнопкой мыши на данном слое, находящемся в палитре слоев выбираем функцию Растрировать слой (Rasterize Layer).

Дизайн сайта в фотошопе


ШАГ 9.

На палитре инструментов выбираем инструмент Ластик (Eraser Tool). В настройках задаём приведённый ниже отпечаток кисти.

Дизайн сайта в фотошопе


ШАГ 10.

Далее удаляем верхнюю часть, созданной чёрной фигуры.

Дизайн сайта в фотошопе


ШАГ 11.

Для придания макету эффекта, приближенного к реальности, следует уменьшить значение Непрозрачности (Opacity)

Дизайн сайта в фотошопе


ШАГ 12.

После этого создаём 2 небольшие кнопки-закладки.
Примечание. Для этого используем метод, приведённый в уроке ранее.

Дизайн сайта в фотошопе


ШАГ 13.

Для выполнения следующего шага нам будет необходим набор пиксельных стрелок, содержащий в себе более 300 разновидностей. Данные стрелки просто незаменимы при работе над созданием макетов для веб-сайтов. Добавляем 2 небольшие стрелки на наш макет.

Дизайн сайта в фотошопе


ШАГ 14.

Далее необходимо активировать инструмент Горизонтальный текст (Horizontal Type Tool) на палитре инструментов. После чего следует написать необходимый текст в области макета. В уроке, главным образом применяются шрифты MS Trebuchet и Myriad Pro

Дизайн сайта в фотошопе


ШАГ 15.

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

Дизайн сайта в фотошопе

(что бы увеличить, нажмите на изображение)


Источник: grafpedia.com
Переведено специально для 8ART.RU


Информация
Комментировать статьи на нашем сайте возможно только в течении 10 дней со дня публикации.