Реклама на сайте

вход на сайт

Имя пользователя :
Пароль :

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

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

Создайте новый документ 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

Теги:
 (голосов: 0)
Новость опубликована 9-02-2011, 12:06, её прочитали 457 раз(а).
Понравилась тема? Посмотрите эти:
Комментарий #1 написал: Siniclish (14 февраля 2012 10:49)
Публикаций: 0, комментариев: 0, группа: Гости
Фото
Комментарий #4 написал: karguferti (27 августа 2012 14:46)
Публикаций: 0, комментариев: 14, группа: Посетители
Фото
Написать комментарий
Ваше Имя:


Ваш E-Mail:



Код:
Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Введите код: