В этом материале мы рассмотрим создание шаблона автомобильного сайта в программе Photoshop CS6, хотя действия, описанные в материале, подойдут и для версий ниже.
Вот какой готовый шаблон (тему) сайта мы получим в результате:
Для начала создадим новый документ размером 1200 на 850 пикселей и зальём его чёрным цветом.
Логотип автомобильного сайта
Давайте начнём с логотипа. Создаём новую группу слоёв, называем "Logo", а в ней новый слой, называем его "Logo Glow". Это будет фон под текстом.
Выбираем обычную круглую кисть и задаём следующие параметры:
- Размер кисти (Brush size): 400px
- Жёсткость(Hardness): 0%
- Непрозрачность(Opacity): 100%
- Нажим (Flow): 40%
- Цвет: белый (#ffffff)
Ставим кистью пятно в левом верхнем углу:
Затем с помощью инструмента "Перемещение" (Move Tool) поднимаем слой с пятном несколько вверх и задаём слою непрозрачность 70%:
В инструментальной панели выбираем инструмент "Текст", в панели параметров жмём на иконку включения панели символов, где задаём следующие значения:
- Семейство шрифтов (Font Family): Avanti Regular (шрифт скачать по ссылке внизу)
- Высота кегля (Font Size): - 59пт
- Трекинг (Tracking): 5
- Масштаб по горизонтали (Horizontally Scale) - 115%
- Цвет (Color): #91d4f5
Для удобства включаем линейки (Ctrl+R) и ставим направляющие, горизонтальную 92 пикс, вертикальную - 104 пикс, в перекрестье направляющих и будет начальная позиция текста логотипа сайта. Пишем логотип "Автомобили" или типа того, на рисунке показан масштаб документа в натуральную величину:
Для шрифта слогана задаём следующие параметры:
- Семейство шрифтов (Font Family): Avanti Regular
- Высота кегля (Font Size): - 19пт
- Трекинг (Tracking): -35
- Масштаб по горизонтали (Horizontally Scale) - 100%
- Цвет (Color): #cdcdcd
Начальная позиция - 104 пикселя по ширине и высоте:
В левом верхнем углу, используя текст семейства Arial белого цвета и высотой 20пт напишите регистрационную форму и форму входа:
Горизонтальное меню
Создаём новую группу слоёв "Main Menu", где будут размещены все элементы горизонтального меню.
Создаём векторную фигуру шириной 980 и высотой 44 и радиусом скругления 5 пикселей, цвет заливки - чёрный. Левый верхний угол фигуры расположите на 140 пикс ниже и 110 пикс ниже и левее от краёв соответственно. Это будет рамка меню:
Добавим к фигуре стиль слоя "Обводку" (Stroke) с параметрами:
- Размер (Size) - 1 пикс
- Цвет обводки - #656565
- Положение - внутри (Inner)
- Непрозрачность (Opasity) - 75%
Активируем инструмент "Текст", задаём параметры:
- Семейство шрифтов (Font Family): Arial Regular
- Высота кегля (Font Size): - 14пт
- Масштаб по горизонтали (Horizontally Scale) - 110%
- Цвет (Color): белый
И пишем пункты меню. Вот как это будет выглядеть в натуральную величину:
Теперь следует разграничить пункты этого меню. Создаём новый слой, называем его "menu divider", берём инструмент "Карандаш" (Pencil Tool) диаметром 1 пиксель и цветом, как и у рамки, #656565, зажимаем клавишу Shift и проводим вертикальную полосу от верхнего края рамки до нижнего:
Затем копируем слой и инструментом "Перемещение" (Move Tool) перетаскиваем вправо для разграничения следующих пунктов. Повторяем это действие необходимое количество раз.
Делаем подсветку активного пункта меню. Для этого ниже слоя "menu divider" создаём новый слой и называем его "active".
Для того, чтобы подсветка получилась только на пункте меню, с помощью инструмента "Прямоугольная область" (Rectangular Marquee Tool) выделяем его. Граница выделения должна проходить внутри обводки пунков! Затем берём инструмент Кисть" с параметрами:
Размер кисти (Brush size): - равен ширине пункта
Жёсткость(Hardness): 15%
Непрозрачность(Opacity): 100%
Нажим (Flow): 100%
Цвет: #60c0f0
И ставим отпечаток вот таким образом:
С горизонтальным меню шаблона сайта всё. Приступаем к созданию пользовательского блок-меню.
Пользовательское блок-меню
Создаём новую группу слоёв и называем её "Users-block-menu".
Поставьте две вертикальные направляющие на расстоянии 110 и 1090 пикселей от левого края (так, чтобы они касались краёв рамки меню), и две горизонтальные на расстоянии 211 и 513 от верхнего края:
Берём инструмент "Линия" (Line Tool), задаём режим "Фигура", цвет заливки #656565, толщина - 1 пикс, и проводим две горизонтальные линии от перекрестья до перекрестья направляющих, как показывают оранжевые стрелки на рисунке:
Снимаем направляющие, нажав Ctrl+H и видим две горизонтальные параллельные линии серого цвета:
Т.к. материал по созданию шаблона сайта автомобильной тематики получается очень длинным из-за крупных изображений, продолжение читайте на следующей странице.
Скачать готовый PSD-файл и шрифт Avanti Regular:
Если Вам понравился материал, скажите свое "спасибо", поделитесь ссылками с друзьями в социальных сетях! Спасибо!
Похожие материалы:
 В этом материале мы рассмотрим создание макета сайта с помощью программы Adobe Photoshop.
В статье я буду использовать русскоязычную версию CS6, но...
|
 При фотомонтаже и создании коллажей одним из самых востребованных инструментов является инструмент выделения "Лассо" (Lasso Tool).
В Фотошопе имеется...
|
 В этом уроке я расскажу, как с помощью встроенных в Photoshop фильтров галереи размытия сделать мистический, или, наоборот, кукольный, игрушечный...
|
 В этом материале я расскажу, как легко можно добавить на фото радугу, и даже двойную радугу, а также как использовать готовый радужный градиент,...
|