Создание в фотошопе профессионального 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) выберите Редактор градиентов и создайте градиент как показано на изображении ниже.
Примените созданный градиент.
Шаг 4: Создание текстурного шаблона
Теперь создадим простой шаблон текстуры и применим его к шапке. Возьмите инструмент Карандаш (Pencil Tool), установите размер кисти в 2 пикселя и добавить две точки, которые касаются друг друга углами. Выключите фон и выделите точки. Выберите пункт меню Редактирование > Определить узор (Edit > Define Pattern).
Создайте новый слой и поместите его под выделенный слой. Выделите область, к которой мы хотим применить текстуру. Нажмите Shift + F5, чтобы загрузить текстуру. Заполните диалоговое окно. Выберите текстуру, которую только что создали, нажмите ОК.
Выделение заполнилось текстурой. Приблизьте изображение, чтобы рассмотреть поближе.
Смешивание текстуры плавно переходит в шапке. Добавьте маску слоя к слою с текстурой. Возьмите кисть с большой мягкостью. Выберите белый (#FFFFFF) цвет для кисти. Уменьшите Непрозрачность (Opacity) кисти до 60% и рисуйте. Если вы слишком сильно нанесёте краску, то потом можно будет настроить прозрачность слоя отдельно.
Прекрасно получилось.
Шаг 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 пиксель между шапкой и тенью.
Шаг 10: Создание градиента для фона
Создайте градиент от светло-серого до белого цвета.
Создайте новый слой ниже шапки и примените градиент.
Шаг 11: Добавление элементов управления вращением слайдера
Создайте элементы слайдера.
Чтобы указать текущий активный элемент управления в слайдере примените к нему Внутреннюю тень (Inner Shadow).
Шаг 12: Создание разделителя
Выберите инструмент Карандаш (Pencil Tool) и нарисуйте линию в 1 пиксель. Цвет возьмите светло-серый (#aaaaaa).
Скройте края линии используя градиент маски.
Шаг 13: Добавление основного содержимого
Настал момент создать основную часть макета, место для контента. Нам нужно создать три равных столбца с небольшими отступами между ними. Я сделал простой расчет и разделил имеющееся пространство на 3 равные части с помощью прямоугольников и отступом между ними в 25 пикселей.
Добавьте направляющие линии для столбцов. Затем уберите прямоугольники. У вас останутся просто столбцы.
Добавьте услуги, которые будет оказывать будущий сайт. Подберите иконки из набора функциональных значков. Добавьте текст.
Теперь создадим простую кнопку "Подробнее". Выберите инструмент Прямоугольник со скруглёнными углами(Rounded Rectangle Tool). Нарисуйте кнопку на новом слое.
Нанесите на кнопку градиент и сделайте обводку.
Дублируйте кнопку.
Добавим ещё некоторые функциональные элементы. Я нарисовал три прямоугольника для изображений и сделал обводку в 3 пикселя.
Добавьте клипы изображений в прямоугольники.
Под каждым изображением сделайте тень, как мы это делали для слайдера.
Добавьте немного описаний к картинкам.
Давайте создадим иконку для твиттера. Найдите значок синей птички.
Добавьте анонс для твиттера.
Создадим кнопку для прочтения полного твитта.
.
Примените стили, показанные на изображении ниже.
Добавьте текст на кнопку.
Шаг 14: Создание подвала и заключительные штрихи
Выделите область для футера и залейте её серым цветом.
Перейдите в Наложение цвета (Color Overlay) и измените цвет.
Добавьте в футер ссылки навигации и информацию об авторских правах. Макет закончен. Взгляните на окончательный макет сайта.
Preview of Final Results
