Простой дизайн сайта

В этом уроке я покажу вам, как при помощи простых фигур, нескольких кистей и изображений создать простой дизайн сайта в Фотошоп. Создавать дизайн для сайта не так трудно, как кажется на первый взгляд. На создание такого несложного дизайна сайта уйдет не более часа. Давайте приступим!

Дизайн сайта в конечном варианте:

Простой дизайн сайта

Откройте программу Фотошоп и загрузите готовую сетку 960 Grid System. Этот файл с готовыми сетками, часто использующийся в веб-дизайне для разметки холста. Она всегда поможет вам с размещением элементов на макете сайта.

Простой дизайн сайта

Продублируйте фон. Двойным кликом по копии откройте окно стилей и добавьте Наложение градиента.

Простой дизайн сайта

Простой дизайн сайта

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

В верхней части макета образуйте форму при помощи инструмента Прямоугольник со скругленными углами (U).

Простой дизайн сайта

Примените к нему следующие стили:

Внутреннее свечение:

Простой дизайн сайта

Наложение градиента:

Простой дизайн сайта

Простой дизайн сайта

Обводка:

Простой дизайн сайта

Далее нарисуйте большой прямоугольник тем же инструментом, цвет установите #001424.

Простой дизайн сайта

К созданной фигуре примените стиль Внутреннее свечение.

Простой дизайн сайта

Внутри него образуйте ещё один прямоугольник размером поменьше.

Простой дизайн сайта

В параметрах наложения уменьшите значение для непрозрачности заливки до 10% и примените стиль Внутреннее свечение.

Простой дизайн сайта

Простой дизайн сайта

Результат:

Простой дизайн сайта

Поверх последнего прямоугольника вставьте изображение, относящееся к тематике сайта. Чтобы изображение не выходило за границы прямоугольника, ограничьте его, используя обтравочную маску. Для этого расположите его выше слоя с прямоугольником. Убедитесь, что вы находитесь на слое с изображением и нажатием клавиш Ctrl + Alt + G создайте обтравочную маску. Но для изменения размера в моём случае, я решил воспользоваться командой Свободное трансформирование Ctrl + T.

Простой дизайн сайта

Образуйте выделение для слоя с изображением.

Простой дизайн сайта

Кистью (B) черного цвета на новом слое проведите горизонтальную линию. При создании удерживайте Shift, чтобы линия получилась идеально прямой. Если линия покажется вам слишком темной, то уменьшите её непрозрачность. Слайдер готов.

Простой дизайн сайта

Снимите выделение. Используя Прямоугольник со cкругленными углами (U), нарисуйте ещё две фигуры цветом #4b6e82. Одну для сайдбара, вторую для контекста.

Простой дизайн сайта

К первой фигуре примените следующие эффекты:

Простой дизайн сайта

Простой дизайн сайта

Образуйте Овал (U) черного цвета и расположите этот слой ниже сайдбара.

Простой дизайн сайта

К овалу примените фильтр Размытие по Гауссу с размытием 4,5 пикселя. Если у вас появится окошко о растрировании слоя, нажмите OK.

Простой дизайн сайта

Черный овал после применения фильтра превратился в тень, теперь добавим немного света. Инструментом Линия (U) шириной 1 пиксель проведите вертикальную линию на краю фигуры, подобно изображению ниже.

Простой дизайн сайта

Растрируйте слой с линией, кликнув по нему правой кнопкой мыши.

Простой дизайн сайта

Мягким ластиком (E) в 100 пикселей пройдитесь по верхней и нижней частям линии.

Простой дизайн сайта

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

Простой дизайн сайта

Чуть ниже белой линии нарисуйте черную.

Простой дизайн сайта

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

Простой дизайн сайта

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

Простой дизайн сайта

К этим квадратикам добавьте эффект Обводка:

Простой дизайн сайта

В белые квадратики поместите изображения и инструментом Текст (T) напишите заголовок и текст к каждому изображению.

Простой дизайн сайта

Между созданными постами проведите разделительные линии при помощи инструмента Текст (T). Настройки указаны ниже.

Простой дизайн сайта

Чуть ниже заголовков нарисуйте прямоугольники и поместите в них информацию о постах.

Простой дизайн сайта

Выше сайдбара нарисуйте панель для поиска в виде прямоугольника со скругленными углами. Обратите внимание, на скриншоте ниже видно, что я добавил навигационные ссылки.

Простой дизайн сайта

К окну поиска добавьте стили:

Простой дизайн сайта

Простой дизайн сайта

В окне поиска создайте строку поиска и добавьте значок лупы.

Простой дизайн сайта

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

Простой дизайн сайта

Примените к нему стили:

Простой дизайн сайта

Простой дизайн сайта

Простой дизайн сайта

Теперь нам нужно видоизменить левый край созданного прямоугольника. Возьмите Перо (P), зажмите Ctrl и дважды кликните по краю фигуры. В результате вокруг нее появятся опорные точки, которые можно редактировать.

Простой дизайн сайта

Зажмите Ctrl и кликните по нижней опорной точке, на изображении ниже она отмечена красным кружком.

Простой дизайн сайта

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

Простой дизайн сайта

При помощи эллипса (U) нарисуйте круг, подобно скриншоту ниже.

Простой дизайн сайта

Растрируйте слой с кругом, кликнув по нему правой кнопкой мышью и выбрав команду Растрировать слой. Опираясь на скриншот ниже, образуйте выделение инструментом Прямоугольная область (M).

Простой дизайн сайта

Убедитесь, что вы находитесь на слое с кругом и нажмите Delete, этот слой поместите выше фонового.

Простой дизайн сайта

На готовую полоску добавьте текст. Справа от нее нарисуйте две небольшие кнопки прямоугольником со скругленными углами (U). Используя инструмент Произвольная фигура (U) добавьте на эти две кнопки стрелочки.

Простой дизайн сайта

На сайдбаре создайте несколько прямоугольников различной формы.

Простой дизайн сайта

Добавьте к ним следующие эффекты:

Простой дизайн сайта

Простой дизайн сайта

В этих прямоугольниках расположите баннеры и значки социальных сетей.

Простой дизайн сайта

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

Простой дизайн сайта

Теперь создадим разделители для навигационной панели, расположенной вверху. Инструментом Линия (U) создайте две линии белого и черного цветов в 1 пиксель.

Простой дизайн сайта

Выделите два слоя с линиями и нажатием клавиш Ctrl + E объедините их в один слой. Ластиком с мягкими краями в 20 пикселей пройдитесь по краям линии.

Простой дизайн сайта

Режим для этого слоя смените на Мягкий свет. Полученный разделитель продублируйте и расположите между остальными категориями.

Простой дизайн сайта

Создайте логотип в верхнем левом углу сайта в виде текста (T).

Простой дизайн сайта

К логотипу примените стили со следующими настройками:

Простой дизайн сайта

Простой дизайн сайта

Простой дизайн сайта

Выберите инструмент Кисть (B) с мягкими краями и на новом слое поставьте большое светлое пятно в центре логотипа. Разместите пятно выше фонового.

Простой дизайн сайта

Для слоя с пятном режим наложения поменяйте на Мягкий свет.

Простой дизайн сайта

Вот такой простой и в то же время привлекательный дизайн сайта можно создать при помощи основных инструментов Фотошоп:

Простой дизайн сайта

Ссылка на источник урока.