Рубрика: Photoshop Уроки | Урок прочитали: 698
 (голосов: 2)

Макет сайта в Фотошоп

В этом уроке я покажу, как сделать красивый макет. Урок очень подробный и вряд ли покажется интересным продвинутым пользователям. В этом уроке я не упустил ни одну деталь, я объясню каждое свое действие. Удачи!

Вот превью того, что мы сегодня с вами сделаем. Кликните сюда, чтобы посмотреть превью в лучшем качестве.

Создание нового документа

Мы будем использовать систему 960 Grid. Качаем, открываем файл 960_grid_12_col.psd.

Работа над фоном

Давайте начнем работу с фона. Жмем G, в открывшемся редакторе градиента устанавливаем цвета – с #dcdcdc до #ffffff:

Теперь проводим линию градиента снизу вверх, как показано на рисунке:

У вас должно получиться что-то такое:

Работа над шапкой

Прежде чем мы начнем работу над фоном, мы должны определить верхнюю границу нашего макета. Жмём View > New Guide (Просмотр > Новая направляющая) и выставляем настройки, как показано ниже:

Теперь перейдем к лого; нам нужно создать выделение 280 на 40 пикселей, как показано ниже. Я использовал Polygonal Lasso Tool (Прямолинейное Лассо).

Теперь жмём Shift+Backspace, чтобы залить выделение белым цветом.

Наложим на наш прямоугольник стиль слоя Наложение градиента. Установите цвета, как показано ниже:

Теперь напишите ваше имя со следующими настройками:
Шрифт: Rockwell
Размер: 46px
Тип: Обычный
Цвет: #1e1e1c

Создаем еще одно выделение 270 на 40, должно получиться как-то так:

Залейте выделение, наложите сверху такой же градиент, а также создайте тень, используя следующие настройки:

Используя те же настройки текста, только изменив размер на 33 пикселя, создадим подзаголовок:

Прежде чем мы перейдем к следующему шагу, убедитесь, что все слои разбиты на группы и хорошо организованы:

Работа над навигацией

Мы начнём с создания небольшого прямоугольника – создадим его, используя Rounded Rectangle Tool  (Прямоугольник со скругленными углами) радиусом 5 пикселей. Прямоугольник должен быть размером 65 на 30 пикселей.

Далее установим для слоя стили Обводка, Наложение градиента, Внутренняя тень:

Не забудьте добавить самое главное – текст. Я использовал цвета #ffffff и #1e1e1c.

Выделяем слой с текстом и слой с прямоугольником в списке слоёв.

И прежде чем двигаться далее, сгруппируйте их (Ctrl+G).

Добавление текста

Создаём две новые линеечки на расстоянии 50 пикселей, как показано на рисунке:

Для текста используем следующие настройки:
Шрифт: Rockwell
Размер: 30px
Тип: Обычный
Цвет:  #e8204e – #676666

Добавляем ещё линейку:

Добавление картинок

Создаём выделение 250 на 150 пикселей и размещаем так, как показано на рисунке, ориентируясь на вертикальную и горизонтальную разметки:

Залейте выделение любым цветом, назовите новый слой удобным для вас именем и примените стиль Обводка для нового слоя:

Давайте добавим изображение. Для этого используйте File > Place (Файл > Поместить).

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

Теперь кликаем по слою правой кнопкой мыши и жмём  Create Clipping Mask (Создать слой-маску).

Самое время создать тень! С помощью Elliptical Marquee Tool (Овальная область) создаем выделение овала, как показано ниже, и заливаем выделение цветом #1e1e1c.

Теперь применяем фильтр Filter > Blur > Gaussian Blur (Фильтр > Размытие > Размытие по Гауссу) с радиусом 2 пикселя.

Копируем слои и создаем такую же иллюстрацию в правой части макета.

Центральное изображение сделаем больше – 340 на 200 пикселей, и размещаем так:

Повторяем предыдущие шаги. Должно получиться что-то вроде этого:

Не забывайте группировать слои!

Добавление стрелок для слайдера

Используя Custom Shape Tool (Произвольная фигура), создаём стрелку цветом #e8204e.

Устанавливаем стили Внутренняя тень, Обводка:

Размещаем в точности так, как на рисунке:

Дублируем стрелку и размещаем дубликат в правой части макета:

Добавление контента

Снова добавляем пару линеек, отступая по 50 пикселей:

Добавляем нужный текст, используя показанные ниже настройки:

Добавляем ещё две линейки:

Добавляем текст:

И ещё одну линейку, ориентируясь на картинку ниже:

Используя Rounded Rectangle Tool (Прямоугольник со скругленными углами), создаём фигуру радиусом 5 пикселей и размером 100 на 30. Применяем стили Внутренняя тень, Тиснение/Скос, Глянец, Наложение градиента:

Внутри кружочек со стрелкой:

Цветом #3e3e3e пишем необходимый текст внутри и применяем к нему стиль Тень:

Рисуем разделитель - две полоски, как показано ниже:

Размещаем так:

Пишем заголовок.

С помощью Ellipse Tool (Эллипс) создаем кружок 20 на 20 и применяем к нему стили Внутренняя тень, Обводка:

С помощью Custom Shape Tool (Произвольная фигура) размещаем галочку внутри:

Добавим тень! Создаем овальное выделение ниже, заливаем его чёрным цветом и применяем Filter > Blur > Gaussian Blur (Фильтр > Размытие > Размытие по Гауссу) с радиусом 2 пикселя.

Добавляем текст:

И копируем пару раз наши пункты:

Организовываем все слои по группам – слои каждого пункта в отдельную:

Работа над нижней частью контента

Начинаем, как всегда, с новой линейки, отступая 50 пикселей:

Создаем ещё один заголовок, и снова линеечки:

Ещё одну линейку, как показано ниже:

Пишем следующий текст со следующими настройками:

Дублируем:

Создадим разделитель – 2 горизонтальные полоски:

Я думаю, самый лучший способ правильно поместить разделитель – сделать его видимым. Для этого у меня есть свой способ. Создаём яркий прямоугольник, и, перемещая разделитель, перемещаем и прямоугольник, ориентируясь по нему.

Смотрите, как это работает! :)

Повторяем предыдущие шаги, чтобы получить что-то вроде этого:

Добавление иконок

Теперь добавим иконки социальных сетей и подписи к ним. Вы можете скачать набор иконок Aquaticus Social, сделанный Junwei.

Поместите иконку и текст относительно разметки так, как показано ниже:

Продублируйте:

Работа над футером

Создаём последнюю линейку в разметке:

Снова делаем разделитель:

Размещаем разделитель так, как показано ниже:

Добавляем текст, используя следующие настройки:

И последний штрих – копирайты:

Вы можете скачать .PSD здесь.

           

Похожие файлы и публикации:

Макет сайта в Фотошоп
Как всегда, вот то, что мы получим в итоге:
Макет сайта в Фотошоп
В этом уроке вы узнаете, как создать детализированный аудиоресивер, используя возможности Photoshop. Начнем!
Макет сайта в Фотошоп
В этом уроке я покажу вам как создать классный необычный эффект для текста. Превью:
Макет сайта в Фотошоп
Если вам нужно сделать светящийся текст в Фотошопе, то этот урок для вас. Этот урок вам наглядно покажет, как превратить обычную цветную надпись в яркий заголовок, который добавит изюминку в вашу работу.
Макет сайта в Фотошоп
Создаем новый документ (Ctrl+N) , разрешением 600x450px, дублируем его (Ctrl +J) и применяем к нему стиль слоя - наложение градиента - Радиальный градиент (Layer Style - Gradient Overlay), как показано на рисунке ниже.
Макет сайта в Фотошоп
В этом уроке я собираюсь рассказать вам, как сделать элегантный текст. Итог урока:
Макет сайта в Фотошоп
Финальный результат
Макет сайта в Фотошоп
Шаг 1. Создайте новый документ 102*50 пикселей. Фон залейте цветом  #838383. Выберите инструмент Rounded tool (Прямоугольник со скругленными краями). Установите следующие настройки:
Макет сайта в Фотошоп
В этом уроке я покажу, как создать новогодний текст с эффектом 3D.
Макет сайта в Фотошоп
В этом уроке я покажу вам, как создать три mp3-плеера в стиле ретро. Каждый плеер будет выполнен в виде какого-то определенного типа носителя данных: CD, виниловая пластинка и аудиокассета.
Макет сайта в Фотошоп
В этом уроке мы с Вами будем рисовать зонт, используя различные инструменты, режимы наложения, стили слоя. Итак, приступим!
Макет сайта в Фотошоп
В этом уроке Вы узнаете, как создать стильный музыкальный мини плеер, используя векторные инструменты фотошоп и стили слоя.
Макет сайта в Фотошоп
В этом уроке мы будем рисовать прикольный текст в фотошопе.
Макет сайта в Фотошоп
В этом уроке вы узнаете, как с помощью Photoshop создать простое и стильное выпадающее меню.
Макет сайта в Фотошоп
Итоговый результат:
Макет сайта в Фотошоп
В этом уроке я использую только самый минимум цветов для создания темного дизайна для делового сайта. Немного изменив шаблон, вы также сможете использовать его и для блога на WordPress.
Макет сайта в Фотошоп
Вам понадобится Adobe Photoshop 7.0 или выше и примерно полтора часа времени.
Макет сайта в Фотошоп
В этом уроке я покажу вам, как создать впечатляющую новогоднюю открытку с неоновым эффектом в Фотошоп.