Тёмный дизайн для шаблона авто-сайта

[web-des]

Ну все, я вернулась, меня можно поздравить с получением диплома))))))) Ну это не в тему, а теперь продолжаем уроки

Car Layout

Рисуем

Приветствую всех. Сегодня будет урок, где я собираюсь сделать стильный автомобильный блог. Хотя, конечно, его можно будет использовать не только для автомобилей, но и для любого вашего контента.

Итак, начнем.

Создайте новый документ 850х830 px с любым цветом фона. Установите (#3b3b3b ) как основной цвет и (#181818 ) как вторичный. Выберите Gradient Tool с настройкой Radial Gradient. Проведите градиент сверху вниз от края до края холста.



Сверху разместите логотип вашего сайта и слоган:



Для слоя с логотипом используйте следующие стили:







Между логотипом и слоганом добавьте небольшую красную линию 1х2 пикселей и примените такие стили слоя:





Выберете Rounder Rectangle Tool с радиусом 10 px. Нарисуйте панель навигации под логотипом.



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







Теперь измените прозрачность слоя с навигацией до 25%. Нажмите и удерживайте Ctrl клавишу. Кликните по иконке слоя с навигатором. Появится выделение вокруг вашей панели. Теперь создайте новый слой над слоем с навигатором (выделение не снимайте). Select – Modify – Contract. Параметр на 6px. Теперь залейте выделение черным.



Скопируйте стили слоя с навигатором и вставьте их на слой с черным прямоугольником (правый клик по слою с навигатором, copy layer style, правый клик по слою с прямоугольником — paste layer style), смените прозрачность слоя с прямоугольником на 100%.



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



Удерживайте клавишу Ctrl и нажмите по иконке слоя с навигатором. Отпустив Ctrl выберите слой с белым прямоугольником. Инвертируйте выделение (shift+ctrl+i) и нажмите клавишу Del. Смените прозрачность слоя до 4%. Ваша панель навигации должна выглядеть примерно так:



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



Далее дело вашей фантазии. Выберите изображение удовлетворяющее контенту вашего сайта (я взял фото Barabus). Вставьте изображение на новый слой поверх общего шаблона сайта, Ctrl+клик по слою с вашим изображением, Edit – Copy, далее я Ctrl+click по слою с большой рамкой, Edit – Paste into. Таким образом ваше изображение можно будет передвигать внутри поля, но за края выходить оно не будет. Если изображение не подходит под размеры поля измените его.



Добавьте к вставленному изображению следующие стили слоя:





Мы можете добавить еще блоки для контекта.



Для каждого блока информации создайте с помощью Rounder Rectangle Tool боксы черного цвета с обводкой черно-белым градиентом.

Далее добавьте для блоков заголовки. После каждого заголовка на новом слое добавьте небольшую полоску (как между логотипом и слоганом).



Вот и все. Блог готов. Теперь осталось только добавить текст.




Автор-оригинал тут
Перевод: PloCoon
Источник