Макет сайта в Фотошоп
Макет сайта в Фотошоп
Сложность урока: Средний
В этом уроке я покажу, как сделать красивый макет. Урок очень подробный и вряд ли покажется интересным продвинутым пользователям. В этом уроке я не упустил ни одну деталь, я объясню каждое свое действие. Удачи!
Вот превью того, что мы сегодня с вами сделаем. Кликните сюда, чтобы посмотреть превью в лучшем качестве.
![](/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
Подскажите, какой лучше фотошоп брать! А то я новичок)))
Я тоже новичок. мне рекомендовали CS6
Спасибо!
Очень хороший урок!!!
Не понятны манипуляции с системой 960 Grid, поэтому разметку использовала на свой вкус. Спасибо за перевод.
Кто может подсказать как сделать, чтобы на сайте фото переключались?
Спасибо!
Мой первый выполненный урок по созданию сайтов! Ураа! :)
Спасибо за урок!
Спасибо!
Вот так
Спасибо за урок
Спасибо за урок! Много для себя подчеркнул!
Спасибо - это очень полезный гайд
Спасибо, было интересно.
очень интересный урок
Спасибо за урок!
Руслан, спасибо за перевод!
Спасибо, полезный урок
спс
Верстальщик в моей душе сразу пустил слезу от восторга, увидев на 1м кадре сетку и далее все привязки к сетке.
Спасибо - это очень полезный гайд. Пожалуйста, верстая макеты сайтов - пользуйтесь им.