Макет сайта в Фотошоп
Макет сайта в Фотошоп
Сложность урока: Средний
В этом уроке я покажу, как сделать красивый макет. Урок очень подробный и вряд ли покажется интересным продвинутым пользователям. В этом уроке я не упустил ни одну деталь, я объясню каждое свое действие. Удачи!
Вот превью того, что мы сегодня с вами сделаем. Кликните сюда, чтобы посмотреть превью в лучшем качестве.
![](/lessons/les2287/1.jpg)
Материалы для урока:
960 Grid
Набор иконок Aquaticus Social
Создание нового документа
Мы будем использовать систему 960 Grid. Качаем, открываем файл 960_grid_12_col.psd.
![](/lessons/les2287/2.jpg)
Работа над фоном
Давайте начнем работу с фона. Жмем G, в открывшемся редакторе градиента устанавливаем цвета – с #dcdcdc до #ffffff:
![](/lessons/les2287/3.jpg)
Теперь проводим линию градиента снизу вверх, как показано на рисунке:
![](/lessons/les2287/4.jpg)
У вас должно получиться что-то такое:
![](/lessons/les2287/5.jpg)
Работа над шапкой
Прежде чем мы начнем работу над фоном, мы должны определить верхнюю границу нашего макета. Жмём View > New Guide (Просмотр > Новая направляющая) и выставляем настройки, как показано ниже:
![](/lessons/les2287/6.jpg)
Теперь перейдем к лого; нам нужно создать выделение 280 на 40 пикселей, как показано ниже. Я использовал Polygonal Lasso Tool (Прямолинейное Лассо).
![](/lessons/les2287/7.jpg)
Теперь жмём Shift+Backspace, чтобы залить выделение белым цветом.
![](/lessons/les2287/8.jpg)
Наложим на наш прямоугольник стиль слоя Наложение градиента. Установите цвета, как показано ниже:
Теперь напишите ваше имя со следующими настройками:
Шрифт: Rockwell
Размер: 46px
Тип: Обычный
Цвет: #1e1e1c
![](/lessons/les2287/10.jpg)
Создаем еще одно выделение 270 на 40, должно получиться как-то так:
![](/lessons/les2287/11.jpg)
Залейте выделение, наложите сверху такой же градиент, а также создайте тень, используя следующие настройки:
Используя те же настройки текста, только изменив размер на 33 пикселя, создадим подзаголовок:
![](/lessons/les2287/13.jpg)
Прежде чем мы перейдем к следующему шагу, убедитесь, что все слои разбиты на группы и хорошо организованы:
![](/lessons/les2287/14.jpg)
Работа над навигацией
Мы начнём с создания небольшого прямоугольника – создадим его, используя Rounded Rectangle Tool (Прямоугольник со скругленными углами) радиусом 5 пикселей. Прямоугольник должен быть размером 65 на 30 пикселей.
![](/lessons/les2287/15.jpg)
Далее установим для слоя стили Обводка, Наложение градиента, Внутренняя тень:
Не забудьте добавить самое главное – текст. Я использовал цвета #ffffff и #1e1e1c.
![](/lessons/les2287/17.jpg)
Выделяем слой с текстом и слой с прямоугольником в списке слоёв.
![](/lessons/les2287/18.jpg)
И прежде чем двигаться далее, сгруппируйте их (Ctrl+G).
![](/lessons/les2287/19.jpg)
Добавление текста
Создаём две новые линеечки на расстоянии 50 пикселей, как показано на рисунке:
![](/lessons/les2287/20.jpg)
Для текста используем следующие настройки:
Шрифт: Rockwell
Размер: 30px
Тип: Обычный
Цвет: #e8204e – #676666
![](/lessons/les2287/21.jpg)
Добавляем ещё линейку:
![](/lessons/les2287/22.jpg)
Добавление картинок
Создаём выделение 250 на 150 пикселей и размещаем так, как показано на рисунке, ориентируясь на вертикальную и горизонтальную разметки:
![](/lessons/les2287/23.jpg)
Залейте выделение любым цветом, назовите новый слой удобным для вас именем и примените стиль Обводка для нового слоя:
Давайте добавим изображение. Для этого используйте File > Place (Файл > Поместить).
Убедитесь, что слой с добавленным вами изображением находится поверх слоя с рамочкой в списке слоёв.
Теперь кликаем по слою правой кнопкой мыши и жмём Create Clipping Mask (Создать слой-маску).
![](/lessons/les2287/25.jpg)
Самое время создать тень! С помощью Elliptical Marquee Tool (Овальная область) создаем выделение овала, как показано ниже, и заливаем выделение цветом #1e1e1c.
![](/lessons/les2287/26.jpg)
Теперь применяем фильтр Filter > Blur > Gaussian Blur (Фильтр > Размытие > Размытие по Гауссу) с радиусом 2 пикселя.
![](/lessons/les2287/27.jpg)
Копируем слои и создаем такую же иллюстрацию в правой части макета.
![](/lessons/les2287/28.jpg)
Центральное изображение сделаем больше – 340 на 200 пикселей, и размещаем так:
![](/lessons/les2287/29.jpg)
Повторяем предыдущие шаги. Должно получиться что-то вроде этого:
![](/lessons/les2287/30.jpg)
Не забывайте группировать слои!
![](/lessons/les2287/31.jpg)
Добавление стрелок для слайдера
Используя Custom Shape Tool (Произвольная фигура), создаём стрелку цветом #e8204e.
![](/lessons/les2287/37.jpg)
Устанавливаем стили Внутренняя тень, Обводка:
Размещаем в точности так, как на рисунке:
![](/lessons/les2287/39.jpg)
Дублируем стрелку и размещаем дубликат в правой части макета:
![](/lessons/les2287/40.jpg)
Добавление контента
Снова добавляем пару линеек, отступая по 50 пикселей:
![](/lessons/les2287/41.jpg)
Добавляем нужный текст, используя показанные ниже настройки:
![](/lessons/les2287/42.jpg)
Добавляем ещё две линейки:
![](/lessons/les2287/43.jpg)
Добавляем текст:
![](/lessons/les2287/44.jpg)
И ещё одну линейку, ориентируясь на картинку ниже:
![](/lessons/les2287/45.jpg)
Используя Rounded Rectangle Tool (Прямоугольник со скругленными углами), создаём фигуру радиусом 5 пикселей и размером 100 на 30. Применяем стили Внутренняя тень, Тиснение/Скос, Глянец, Наложение градиента:
Внутри кружочек со стрелкой:
![](/lessons/les2287/47.jpg)
Цветом #3e3e3e пишем необходимый текст внутри и применяем к нему стиль Тень:
Рисуем разделитель - две полоски, как показано ниже:
![](/lessons/les2287/49.jpg)
Размещаем так:
![](/lessons/les2287/50.jpg)
Пишем заголовок.
![](/lessons/les2287/51.jpg)
С помощью Ellipse Tool (Эллипс) создаем кружок 20 на 20 и применяем к нему стили Внутренняя тень, Обводка:
С помощью Custom Shape Tool (Произвольная фигура) размещаем галочку внутри:
![](/lessons/les2287/53.jpg)
Добавим тень! Создаем овальное выделение ниже, заливаем его чёрным цветом и применяем Filter > Blur > Gaussian Blur (Фильтр > Размытие > Размытие по Гауссу) с радиусом 2 пикселя.
![](/lessons/les2287/54.jpg)
Добавляем текст:
![](/lessons/les2287/55.jpg)
И копируем пару раз наши пункты:
![](/lessons/les2287/56.jpg)
Организовываем все слои по группам – слои каждого пункта в отдельную:
![](/lessons/les2287/57.jpg)
Работа над нижней частью контента
Начинаем, как всегда, с новой линейки, отступая 50 пикселей:
![](/lessons/les2287/58.jpg)
Создаем ещё один заголовок, и снова линеечки:
![](/lessons/les2287/59.jpg)
Ещё одну линейку, как показано ниже:
![](/lessons/les2287/60.jpg)
Пишем следующий текст со следующими настройками:
![](/lessons/les2287/61.jpg)
![](/lessons/les2287/62.jpg)
Дублируем:
![](/lessons/les2287/63.jpg)
Создадим разделитель – 2 горизонтальные полоски:
![](/lessons/les2287/64.jpg)
Я думаю, самый лучший способ правильно поместить разделитель – сделать его видимым. Для этого у меня есть свой способ. Создаём яркий прямоугольник, и, перемещая разделитель, перемещаем и прямоугольник, ориентируясь по нему.
![](/lessons/les2287/65.jpg)
Смотрите, как это работает! :)
Повторяем предыдущие шаги, чтобы получить что-то вроде этого:
![](/lessons/les2287/66.jpg)
Добавление иконок
Теперь добавим иконки социальных сетей и подписи к ним. Вы можете скачать набор иконок Aquaticus Social, сделанный Junwei.
![](/lessons/les2287/67.jpg)
Поместите иконку и текст относительно разметки так, как показано ниже:
![](/lessons/les2287/68.jpg)
Продублируйте:
![](/lessons/les2287/69.jpg)
Работа над футером
Создаём последнюю линейку в разметке:
![](/lessons/les2287/71.jpg)
Снова делаем разделитель:
![](/lessons/les2287/72.jpg)
Размещаем разделитель так, как показано ниже:
![](/lessons/les2287/72.jpg)
Добавляем текст, используя следующие настройки:
![](/lessons/les2287/73.jpg)
И последний штрих – копирайты:
![](/lessons/les2287/74.jpg)
И готово!
![](/lessons/les2287/1.jpg)
Вы можете скачать .PSD здесь.
Автор: Mkhaled
Источник: 1stwebdesigner.com
Комментарии 21
Кто может подсказать как сделать, чтобы на сайте фото переключались?
Спасибо!
Очень хороший урок!!!
Не понятны манипуляции с системой 960 Grid, поэтому разметку использовала на свой вкус. Спасибо за перевод.
Подскажите, какой лучше фотошоп брать! А то я новичок)))
Я тоже новичок. мне рекомендовали CS6
Спасибо!
Мой первый выполненный урок по созданию сайтов! Ураа! :)
Спасибо за урок!
Спасибо!
Вот так
Спасибо за урок
Спасибо за урок! Много для себя подчеркнул!
Спасибо - это очень полезный гайд
Спасибо, было интересно.
очень интересный урок
Спасибо за урок!
Руслан, спасибо за перевод!
Спасибо, полезный урок
спс
Верстальщик в моей душе сразу пустил слезу от восторга, увидев на 1м кадре сетку и далее все привязки к сетке.
Спасибо - это очень полезный гайд. Пожалуйста, верстая макеты сайтов - пользуйтесь им.