Modern Clean Style Layout

[web-design]

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


Создаём новый документ 760x770 px с серым фоном(#464646). Создаём новый слой(SHIFT+CTR+ALT+N). Выбираем инструмент Rounded Rectangle и рисуем белый прямоугольник(радиус 10 px). Следующая картинка уменьшена.



Добавляем стиль слоя:

С тем же инструментом создаём другой прямоугольник.Я буду использовать светло-серый цвет(чтобы вам было видно)

Добавляем стили слоя:




Результат

Теперь создаём еще три прямоугольника и помещаем их как на рисунке.

Как вы видите, использованы предыдущие стили слоя. Зажмите CTRL и нажмите на иконку слоя, помеченного стрелкой:

Так вы выделили прямоугольник.

Выбираем инструмент Rectangular Marquee. Нажимаем на Subtract From Selection и удаляем нижнюю часть выделения.

Когда вы отпустите кнопку мыши вы увидите такое выделение:

Уменьшаем выделенную область - Select > Modify > Contract и выбираем Contract by 2 pixels
Создаем новый слой(CTRL+SHIFT+ALT+N). Заливаем выделение белым цветом с инструментом Paint bucket. Жмем CTRL+D чтобы снять выделение.


Добавляем стиль слоя:





Результат


Теперь дублируем этот слой два раза и помещаем его на другие прямоугольники.

Создаём заготовку заливки.
Создаём новый документ 3 на 3 пикселя.Увеличиваем масштаб до 1600%. Рисуем точку размером в 1 пиксель в центре документа.


Сохраняем шаблон заливки Edit > Define Pattern
Возвращаемся в исходный документ. Создаём новый слой(CTRL+SHIFT+ALT+N). Выбираем инструмент Rectangular Marquee с этими настройками:

И создаём маленькое выделение:



Выбираем инструмент Paint Bucket(выбираем нашу заготовку шаблона заливки) и щелкаем внутри выделения. Жмем CTRL+D чтобы снять выделение.



Дублируем слой несколько раз.



Создаём новый слой(CTRL+SHIFT+ALT+N). С помощью инструмента Rectangular Marquee делаем вертикальное выделение:


Заливаем его точечной заливкой. Жмем CTRL+D чтобы снять выделение.


Также добавляем еще точечных линий, поместите их как вам надо
Результат:



Добавляем круги:

и стили слоя


Отдублируем кружочки:


Вы можете добавить еще кружков и поместить их по вашему желанию.



Добавляем еще прямоугольник:


Меняем настройку Fill на 0%.

Добавляем стиль слоя

Результат:


Дублируем эту фигуру и применяем стили слоя:



Добавляем свое фото:


Теперь добавляем текст и все готово:


Оригинал Talk-mania.com
перевод: Elensvs
источник: demiart.ru

@темы: Уроки, Web-дизайн

Comments

[Kenren]

Извините, а в какой это программе сделано? Я первый день в этом сообществе.

[web-design]

Kenren
Это Photoshop =) Добро пожаловать!

[Kenren]

web-design
Спасибо