Как сделать сайт в фотошопе?

3 ноября 2014 г. Просмотров: 587
В фотошопе можно сделать макет сайта, по которому его уже создают в html. Процесс этот относительно несложный.

Вам понадобится

  • Программа Adobe Photoshop

Инструкция

  • Откройте фотошоп и создайте в нем документ размером 1020 на 1200 pic. Установите цвет фона #a8a995. Если сайт будет посвящен какой-либо фирме, то можно поместить ее логотип слева вверху в строке навигации. Оставьте справа место для ссылок для навигации по сайту.
  • Возьмите инструмент Rectangle Tool и создайте прямоугольник 80 на 54 pic в строке навигации по сайту. Он будет обозначать активный пункт меню в навигации по сайту.
  • Зайдите в меню Layer-Layer Style, поставьте там галочку Color Overlay, там же цвет #ADAE9E, Opacity – 100%, и галочку Stroke, там же Size – 1 px, Position – Outside, Opacity – 100%, цвет #CED0BB.
  • Поверх прямоугольника, что у вас уже есть, добавьте еще один с размерами 71 на 50 pic, закрасьте его цветом #cfbe28. Зайдите в меню Layer-Layer Style, выставьте следующие параметры для этого прямоугольника: Drope Shadow: Blend Mode – Multiply, цвет #000000, Opacity – 27%, Angle – 90, Distance – 1, Spread – 0, Size – 5; Inner Shadow: Blend Mode – Multiply, цвет #000000, Opacity – 27%, Angle – 90, Distance – 1, Choke – 0, Size – 18; Stroke: Size – 1, Position – Outside, Opacity – 100, Fill Type – Color, Color #D6C72C.
  • Добавьте тень для ссылок, находящихся в строке навигации. Для этого выделите слой с текстом этих ссылок, зайдите в меню Layer-Layer Style и выставьте следующие параметры: Drope Shadow: Blend Mode – Multiply, цвет #000000, Opacity – 75%, Angle – 90, Distance – 1, Spread – 0, Size – 1. Повторите эти действия с каждым слоем, на которых будет текст ссылок.
  • Теперь нужно сделать ознакомительную часть шаблона. Выберите инструмент Rectangle Tool и сделайте прямоугольник под логотипом, залейте его белым цветом, уменьшите прозрачность до 20%.
  • Выберите инструмент Ellipse Tool и сделайте овал под этим прямоугольником. Зайдите в меню Filter>Blur>Gaussian Blur и поставьте значение радиуса 7,8.
  • Возьмите инструмент Rectangular Marque Tool и выделите нижнюю часть прямоугольника и размытый овал. Удалите ее.
  • После этого впишите текст в прямоугольник-кнопку. Создайте линию прямо над ним со следующими параметрами: 866 на 1 pic.
  • Оцените статью!