В этом уроке я покажу вам, как легко создать макет сайта с прозрачным фоном колонок. Такого рода схема графического дизайна была использована в последнее время, потому что это последняя тенденция в дизайне сайта. Для начала я покажу вам, как создать красочный фон, Потом превратит этот фон в Ницца макет.
Давайте начнем наш урок, создав новый документ со следующими размерами: 960 х 900 пикселей. Я использовал цвет на # 141414, а затем с помощью инструмента Paint Bucket Tool  нажмите один раз на нашем документе.

С помощью инструмента Brush Tool с гладкой щеткой создать 3 круга на нашем документе, в следующих цветах:

#a864a8 # a864a8
#ed1c24 # ed1c24
#662d91 # 662d91

Обратите внимание на размер кистей они должны быть размером - 600 пикселей

Далее идём в Filter > Noise > Add noise

Я использовал следующие параметры

Ваша схема будет выглядеть подобно этой

Далее идём в Filter > Blur > Motion Blur

В окне Motion blur я настроил угол до 90 градусов, а расстояние до 998

Это очень простой способ создать приятный фон для вашего сайта.

Создаём новый слой (нажмите CTRL + SHIFT + ALT + N)

Выбрать еще один инструмент Brush Tool, и выбрать белый цвет.
 

Далее выбираем большую гладкую кисть

Затем этой кистью с белым цветом – делаем ещё один круг как показано на рисунке

Потом изменить режим смешивания (blending mode) на этот Overlay

Теперь я начну создавать другую форму. Я буду создавать панель навигации. Для этого мне потребуется Rectangle Tool
С помощью этого инструмента, создайм простую форму как на рисунке
 

Выбрать Rounded Rectangle Tool, и задать радиус 6 пикселей

Я выбрал сетку – для того что бы лучше реализовать формы

Выберите Rounded Rectangle Tool. Пожалуйста, создайте 3 формы, как в следующих изображений

Сейчас я сделаю для всех слоев некоторые стили слоя

Теперь создадим ещё разные формы с помощью: Rounded Rectangle Tool

Для всех этих форм я добавил следующие стили слоя

Это мой результат

Пришло время добавить немного текста. С помощью Horizontal Type Tool я буду писать текст

Теперь добавим некоторое изображение в верхнию часть макета. Вы можете использовать любое изображение

В этом же районе я добавлю две стрелки с помощью инструмента Custom Shape Tool

Это мой окончательный макет. Я надеюсь Вам понравился этот урок и он не доставил Вам затруднений при изучение.

Источник: http://www.ps-webdesign.ru