Создание автомобильного в сайта в Photoshop CS6

Пользовательское блок-меню (продолжение)

Начало здесь. Предполагается, что в этом блоке будут отображаться фотографии автомобилей. Давайте сделаем небольшое оформление для показа фото.

В группе "Users-block-menu" создайте новый слой, назовите его "Checkers" и, используя инструмент "Прямоугольная область" (Rectangular Marquee Tool) сделайте фигуру из квадратиков. Заливать их следует белым цветом, но при заливке устанавливать разную непрозрачность, у меня используется 25 и 7 процентов. Чёрные квадраты, естественно, ничем не залиты и являются пустыми участками слоя "Checkers":

Результат:

14

Теперь можно под слоем "Checkers" разместить фотографию авто и сделать какую-нибудь подпись. Для подписи я использовал шрифт Avanti Regular светло-серого цвета #f8f8f8 и высотой 30пт:

15

Теперь займёмся созданием пользовательского меню.
В группе "Users-block-menu" создайте новую группу слоёв и назовите её "Menu", а в ней создайте новый слой с именем, к примеру, "Back-menu".

Поставьте вертикальную направляющую на расстоянии 750 пикс от правого края и горизонтальную на расстоянии 220 пикс от верха. Создайте выделение размером 341 на 285 пикселей и залейте его любым цветов, в моём примере я взял серый, но в данном случае цвет не имеет значения:

16

Снимите выделение, нажав Ctrl+D и скройте направляющие, нажав Crrl+H. Теперь примените к слою "Back-menu" стиль слоя "Градиент" (Gradient Overlay) со следующими настройками:

277

Теперь квадрат должен выглядеть вот так:

17

Займёмся пунктами меню. Для начала сделаем разграничительные горизонтальные линии, таким же образом, как мы делали линии здесь, верхняя линия будет располагаться на высоте 289 пикс от верха, расстояние между линиями - 40 пикс.

Выровняйте линии по горизонтали по центру квадрата, о способах выравнивания подробно рассказывается здесь.

В итоге мы получим вот такой вид:

18

Далее вписываем оглавление и пункты меню. Для заголовка используем шрифт Arial Regular цветом #6699cc и размером 22 пт, для пунктов тот же шрифт белого цвета и размером 16 пт:

20

После чего под пункты меню добавляем две кнопки. Про то, как сделать кнопки для этого макета автомобильного сайта, рассказывается в этом материале. Теперь данный блок выглядит следующим образом:

2

Переходим к заключительной части - создание разделов.

Тематические разделы автосайта

Для начала создадим новую группу слоёв и назовём её "Sub Boxes". В ней создадим ещё одну группу и назовём её "Box1".
В группе "Box1" создаём фигуру с параметрами:

  • Тип - Фигура
  • Цвет заливки - чёрный
  • Высота - 243 пикс
  • Ширина - 315 пикс
  • Радиус скругления - 5 пикс

И разметим её на расстоянии 538 пикселей от верха и 110 от левого края.
Добавим к фигуре стиль слоя "Обводку" (Stroke) с параметрами:

  • Цвет обводки - #656565
  • Положение - внутри (Inner)
  • Размер (Size) - 1 пикс
  • Непрозрачность (Opasity) - 75%

Вот как должен выглядеть этот прямоугольник на макете:

18

В панели слоёв кликните по группе "Box1", чтобы снять выделение с фигуры прямоугольника. После этого на расстоянии 42 пикселя ниже верхнего края прямоугольника проведём горизонтальную разделительную линию длиной 297 пикселей, выровняем её по центру прямоугольника с помощью опций выравнивания. Добавим к линии стиль слоя "Обводка" с такими же параметрами, как у фигуры. Теперь квадрат имеет следующий вид:

22

Пишем заголовок раздела, используя шрифт Arial Regular высотой 16 пт и цветом #91d4f5.
Для оживления дизайна можно вставить картинку, в данном случае подойдёт изображение размером 100 на 75 пикселей.
И осталось добавить само содержание блока. Для этого воспользуемся блочным текстом.
Выбираем инструмент "Текст" (Type Tool), нажимает левой клавишей мыши в поле фигуры и протаскиваем курсор влево и вниз для создания рамки нужного размера. Затем выбираем шрифт Arial Regular высотой 14 пт белого цвета и вписываем нужный текст:

23

Собственно, первый блок готов. Дублируем группу "Box1", переименовываем в "Box2" и перетаскиваем её на 332 пикселя вправо.

24

Для разнообразия, этот блок сделаем без картинки, но со списком, в качестве маркеров списка используются простые векторные фигуры, об их создании рассказывается здесь.

Таким же образом создаём третий блок, для разнообразия добавим в него кнопку "Подробнее", о её создании также рассказывается здесь.

Остался подвал сайта. Но тут, думаю, вопросов возникнуть не должно, кнопки Twitter и Facebook создаём здесь.

Ну вот, собственно и всё, посмотрите ещё раз на макет автомобильного сайта:

001

Помощь сайту

Понравился сайт? Уроки оказались полезными? Вы можете поддержать проект, просто если скачаете и установите приложение "Фонарик" для Андроид. Приложение написал автор сайта и рассчитывает в дальнейшем публиковать свои приложения. Фонарик управляет светодиодом вспышки фотокамеры телефона, а также включает подсветку экраном на полной яркости.

Преимущества: гибкие настройки. Вы можете задать в настройках, чтобы фонарик сразу включался при запуске приложения и автоматическое включение таймера при запуске приложения. Настройки позволяют отключить блокировку экрана и блокировку фонарика кнопкой включения телефона. Также вы можете самостоятельно установить время таймера.

Если приложение наберёт популярность, это даст стимул автору на создание новых приложений с учётом пожеланий посетителей сайта.

Установить с Google Play.

Заранее благодарен, Дмитрий.

QR-код для установки:

Если Вам понравился материал, скажите свое "спасибо", поделитесь ссылками с друзьями в социальных сетях! Спасибо!

Похожие материалы:

Для этого материала лучше всего подойдёт изображение, которое содержит некий интересный узор или рисунок, поэтому здесь я буду использовать...
сюрреалистический 3D текст из кирпича
В этом уроке мы создадим в Photoshop 3D-текст с текстурой из кирпича, используя бесплатный экшен. На полученные 3D буквы текста мы добавим различные...
Предыдущая страница Итоговый результат Вы можете посмотреть на рисунке: Примечание. Для выполнения коллажа нам потребуются восемь исходных...
Предыдущая страница Шаг 3: Создание лучницы-убийцы Теперь мы будем добавлять на основной холст изображение лучницы-убийцы. Откройте изображение с...