Шаблон дизайна для музыкального сайта
РисуемСоздаем новый документ 760 на 770 пикселей с цветом фона #1e1e1e.
Выбираем инструмент Line. Ставим цвет переднего плана #999999. Ставим ширину линии 5 пикселей и рисуем две линии на вашем шаблоне.
Теперь этим же инструментом Line рисуем еще одну линию белого цвета с толщиной 1 пиксель.
Добавляем еще линию красного цвета толщиной 50 пикселей.
Теперь добавляем стили слоя для красной линии.
Результат
Выбираем инструмент Rectangle и рисуем большой прямоугольник под верхними линиями.
Добавляем стили слоя:
Результат
Создаем новый документ (для шаблона заливки). Увеличиваем его масштаб до 1600% и карандашом рисуем три точки. Edit > Define Pattern
Возвращаемся в исходный документ и создаем выделение как на рисунке:
Создаем новый слой( CTRL+SHIFT+ALT+N). Выбираем инструмент Paint Bucket с такими настройками:
Заливаем наше выделение. Добавляем стили слоя
Жмем CTRL+D чтобы снять выделение. Результат:
Жмем на кнопку Add layer mask внизу палитры слоя. Выбираем инструмент Gradient. Цвета переднего/заднего плана должны быть белый и черный. Проведите линию как на рисунке:
Добавляем несколько картинок и текст.
Добавляем детали. Берем инструмент линия и рисуем линию толщиной 1 пиксель.
Нажимаем на кнопку Add layer mask. Выбираем инструмент Gradient c такими настройками:
Рисуем линию как на рисунке по направлению стрелки:
Дублируем линию.(Ctrl+J).Выбираем инструмент Move и нажимаем один раз на стрелку вниз на клавиатуре. Меняем цвет линии на темно-красный #760000
Выбираем инструмент Rounded Rectangle с радиусом 2 пикселя и рисуем много фигур:
Добавляем стили слоя ко всем фигурам:
Результат
Выбираем инструмент Rectangular Marquee и рисуем такое выделение:
Создаем новый слой и заливаем выделение шаблоном заливки, который мы создали. Не забудьте также создать маску слоя и добавить стили слоя как мы это уже делали.
Добавляем текст и несколько картинок.
Добавляем линии к тексту, можно использовать инструмент Type и набрать точки или минусы.
С телом шаблона закончено. Вернемся к заголовку. Создаем простой прямоугольник с инструментом Rounded Rectangle
Применяем стили слоя к этому прямоугольнику:
Результат
Сюда можно вставить проигрыватель либо любой текст. Добавляем сюда несколько дополнительных фигур. Для кнопок использованы такие стили слоя:
Результат
Окончательный результат
Автор: Talk-mania
Перевод: Elensvs
Источник
Ps: Поскольку стили слоя часто повторяются проще их сохранить в библиотеке стилей и использовать многократно.