Создание в фотошопе профессионального psd-макета для веб-сайта

Создание в фотошопе профессионального psd-макета для веб-сайта

Шаг 1: Макет

Прежде чем приступить к разработке дизайна, мы должны спланировать его внешний вид и функциональность. Затем нужно придуманную идею макета выполнить визуально, создать каркас.

Для отрисовки первоначального макета обычно используют только серые тона. Отсутствие ярких цветов помогает сконцентрироваться на плане в целом, и тщательно всё продумать. Это дает большую свободу действий, можно быстро менять и переставлять блоки местами.

Шаг 2: Настройка Холста

Создаем ширину макета в 960 пикселей. Создайте новый документ размером 1200 х 1500 пикселей.

Макет в 960 пикселей достаточно широкий, поэтому необходимо определить рабочую область. Нажмите комбинацию клавиш Ctrl + А, чтобы выделить весь холст целиком.

Перейдите в меню Выделение > Трансформировать выделенную область (Select > Transform Selection). Измените ширину выделения до 960 пикселей. Расположите выделение по центру холста.

Добавьте направляющие линии для выделенной области справа и слева.

Теперь нужно создать небольшие отступы между границей и содержанием макета, которое мы добавим позже! Снова перейдите в меню Выделение > Трансформировать выделенную область (Select > Transform Selection) и измените размер выделения до 920 пикселей в ширину. Тем самым отступ с каждой из сторон составит по 20 пикселей.

Добавьте направляющие линии.

Шаг 3: Создание шапки макета (хедера)

Сделаем выделение высотой в 465 пикселей

Залейте выделение серым цветом и в дальнейшем используйте стили слоя, чтобы добавить цвета и градиенты. Используйте подобные конструкции для поддержания визуальной иерархии макета.

Теперь добавим градиент для нашей шапки. Дважды щелкните на пиктограмме слоя. Выберите Наложение Градиента(Gradient Overlay). Создайте градиент, используя настройки, показанные на изображении ниже. Примените настройки.

Градиент должен выглядеть следующим образом.

Далее нужно добавить светлое пятно в шапку. Создайте новый слой, нажав комбинацию клавиш Ctrl + Alt + Shift + N. Возьмите мягкую кисть диаметром 600 пикселей. Установите цвет #19535a для кисти. И просто один раз нажмите на центр верхней части шапки.

Создайте сверху выделенную область высотой в 110 пикселей.

Нажмите клавишу Delete, чтобы удалить выделенную часть. У вас должно получится так же, как на изображении ниже.

Сожмите светлое пятно по вертикали, нажав комбинацию клавиш Ctrl + T.

Теперь нам нужно убедиться в том, что светлое пятно идеально центрировано в шапке макета. Выделите слой с пятном и нажмите клавишу "V" для переключения на инструмент Перемещение (Move Tool). На панели управления выбранным инструментом (Options) нажмите кнопку Выравнивание центров по горизонтали (Align Horizontal Centers).

Создайте новый слой, С помощью инструмента Карандаш (Pencil Tool ) нарисуйте горизонтальную линию толщиной в 1 пиксель и цветом #01bfd2.

Теперь скроем края линии с помощью маски градиента. Выберите инструмент Градиент (Gradient Tool), на панели управления выбранным инструментом (Options) выберите Редактор градиентов и создайте градиент как показано на изображении ниже.

Примените созданный градиент.

Шаг 5: Добавление логотипа

Создание фона шапки в большей степени завершено. Теперь добавим логотип. Но перед этим в то место, где он будет находиться, добавим небольшое светлое пятнышко. Возьмите мягкую кисть, установите цвет #19535a. Добавьте светлое пятно.

Добавим текст логотипа. Я использовал шрифт "Bebas Font". Скачать его можно абсолютно бесплатно.

Добавим некоторые эффекты к логотипу. Смотрите изображения ниже.

Шаг 6: Навигация

Добавляем навигационные ссылки.

Создайте навигационные кнопки. Используйте инструмент Прямоугольник (Rectangular Marquee Tool). Заполните любым цветом. Далее сделаем нижнюю часть прямоугольника полностью прозрачной.

Дважды щелкните на пиктограмме слоя, выберите Наложение градиента (Gradient Overlay). Используйте настройки, показанные на изображении ниже.

Шаг 7: Контент-слайдер

Создайте выделение размером в 580 х 295 пикселей.

Залейте выделенную область серым цветом.

Откройте изображение, которое вы хотите использовать. Добавьте его в слой, который мы создали выше.

Теперь добавим эффект тени под слайдер. Создайте новый слой. Выберите инструмент Кисть (Brush Tool), установите диаметр до 400 пикселей. Откройте Палитру кистей (Brushes palette), и в ней используйте следующие настройки.

Установите цвет кисти #000000 и нарисуйте ей в нужном месте .

Примените фильтр Размытие по Гауссу (Gaussian Blur), чтобы смягчить края.

Выделите нижнюю половину тени и удалите её.

Поместите тень чуть выше слайдера по середине.

Уменьшите её по вертикали. Далее необходимо центрировать тень со слайдером. Выберите оба слоя и на панели управления выбранным инструментом (Options) нажмите на кнопку Выравнивание центров по горизонтали (Align Horizontal Centers).

Сделайте дубликат слоя с тенью и разверните его вертикально. Поместите его на нижний край слайдера.

Далее создадим кнопки управления для слайдера с помощью инструмента Прямоугольник (Rectangular Marqee). Залейте их чёрным цветом (#000000).

Установите Непрозрачность (Opacity) кнопки в 50%.

Выберите инструмент Произвольная фигура (Auto shapes) и на панели управления выбранным инструментом(Options) выберите стрелку. Добавьте её в кнопки.

Добавляем полоску в нижней части слайдера. Заливаем её чёрным цветом (#000000).

Делаем Непрозрачность (Opacity) полоски в 50%.

Здесь мы можем добавить описание картинки.

Шаг 8: Добавление описания

Теперь добавим приветствие и краткое описание сайта.

Шаг 9: Заканчиваем с шапкой

Мы почти закончили шапку. Давайте добавим тонкий эффект тени чтобы завершить шапку! Создайте тень так же, как мы создавали её ранее для слайдера, используя инструмент Кисть (Brush Tool).

Оставьте разрыв в 1 пиксель между шапкой и тенью.

Preview of Final Results