Навигация
Главная страница Файловый архив Онлайн ролики Мониторинг Статьи Форум Топ сайтов Авторство
Категории раздела
Эффекты [0] Работа с текстом [0] Работа с фото [27]
Дизайн/Рисование [117] Графика для сайта [28] Анимация [24]
Мини-чат
Чтобы добавить сообщение, необходимо авторизоваться.
Наш опрос
Сколько Вам лет ?
Всего ответов: 1521
Статистика

Онлайн всего: 7
Гостей: 6
Пользователей: 1
osty
Главная » Файлы » PhotoShop уроки от нас » Графика для сайта

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


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

Создайте новый документ 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 боксы черного цвета с обводкой черно-белым градиентом.

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

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


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

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

19.12.2011
Комментариев: 0


Всего комментариев : 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]