Рисуем в Photoshop веб дизайн с нуля.

Создать красивый сайт – мечта многих. Но не каждый может на это решиться. И основная причина для этого отсутствие необходимых знаний. Но, на самом деле нарисовать сайт в Adobe Photoshop не так уж и сложно, следующий урок покажет как это сделать. Самое главное это желание учиться и осваивать что-нибудь новое.
Научившись рисовать на компьютере можно не только реализовать себя как художника, но и получить престижную работу веб-дизайнера.
Итак, начнем осваивать азы работы в программе Adobe Photoshop, и нарисуем не сложный дизайн для сайта.

Шаг 1.
В начале создадим узор для заливки нашего будущего сайта. Для этого открываем документ размер которого 20Х900 px. Выделяем весь холст (Ctrl-A) и заливаем его светло-кремовым цветом (F6F3EA). Далее берем инструмент «прямоугольное выделение», и выделяем область правой части холста и определяем для нее цвет EFEBE1. Затем с в меню «редактирование > определить узор» сохраняем свой шаблон как «creamstripespattern».

веб дизайн с нуля

 

Шаг 2.
Создаем новый документ общим размером 960Х960px. В этом документе создадим новый уровень под названием «фон» (background) и заполняем его произвольным цветом. В параметрах стиля слоя выбираем пункт наложение узора и заливаем его созданным нами узором «creamstripespattern».

f2

 

Шаг 3.
Теперь вставим в наш макет изображение оторванного картона. Всевозможные изображения для сата можно найти пройдя по ссылке на сайт: http://depositphotos.com. Выделим белый фон с помощью инструмента «волшебная палочка», и удалим его. Получившееся изображение размещаем вверху холста. Назовем этот слой «Заголовок».

f3

 

Шаг 4.
Обесцветим наш картон. Для этого идем в «режим > градации серого», и применяем настройки.

f4

 

Шаг 5.
В настройках слоя найдем параметры смешивания, и используем наложение градиента, начиная от очень темного. Следом уменьшаем прозрачность слоя до 90% таким образом, чтобы чуть-чуть проглядывал нижний фон. Устанавливаем режим наложения – оверлей.

f5

Шаг 6.
В следующем шаге продублируем «Заголовок», назовем его «Нижний колонтитул». Потом во вкладке редактирование > трансформация отразим заготовку по вертикали и передвинем получившееся изображение вниз до конца холста. Нижнюю часть можно немного обрезать, чтобы уменьшить макет в высоту. И, наконец сделаем подвал немного тоньше при помощи меню редактирование>трансформация>масштаб.

f8

Шаг 7.
Создаем новый уровень. Назовем его «Градиент заголовка». Берем радиальный градиент с настройками от белого к прозрачному, и размещаем его в левом верхнем углу темного заголовка.

f7

Шаг 8.
Снижаем непрозрачность слоя до 15%. Это позволило нам создать эффект тонкого выделения в верхнм левом углу заголовка.

f8

Шаг 9.
Теперь наберем текстовый логотип. Для этого подойдет любой из понравившехся вам шрифтов. Для логотипа используем настройки как на рисунках ниже.

f10a
f10b
f10c
f10d

Шаг 10.
Создадим оригинальную иконку для логотипа. Для этого рисуем прямоугольник со скругленными углами. Выше рисуем еще один прямоугольник (как вариант можно сделать дубль). Затем в меню выделение выбираем трансформацию выделенной области и изменяем размер изображения на 4 px и удаляем. У нас получился портфель сделанный с помощью двух фигур. И, напоследок скопируйте настройки слоя с логотипом.

f11a

f11b

f11c

Шаг 11.
Добавим меню. Для этого я взял шрифт Arial

f12

Шаг 12.
Сделаем разделители между пунктами меню. Для этого в новом слое набираем линию нужной длинны из точек, затем при помощи команд трансформации поворачиваем ее на 90 по часовой стрелке. Далее дублируем линию нужное количество раз и размещаем между пунктами меню.

f13

Шаг 13.
Пишем текст в подвале (футере).

f14

Шаг 14.
Вставляем эскиз из своего портфлоио. В меню редактирование>трансформация>масштаб подгоняем размер рисунка под размер эскиза. В настройках слоя применим режим обводки со следующими параметрами:

f15a

f15b

Шаг 15.
Напишем сопроводительный текст слева от миниатюры. Обязательно сделаем текст контрастным, чтобы выделить его на светлом фоне.

f16

Шаг 17.
Напоследок нарисуем кнопку при помощи инструмента «форма» (прямоугольник со скругленными углами). Применим к нему параметры смешивания показанные ниже:

f17a

f17b

f17c

И вот, наконец мы закончили. Ниже можно посмотреть на результат нашей работы. На мой взгляд получилось довольно не плохо. А вы как думаете?

f17d

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