Как и обещали, новый урок! Он посвящен созданию макета на сайт. Рекомендум использовать новый Фотошоп 2017. Красивый макет – немалая доля в успешном продвижении вашего сайта. Речь пойдет и о структуре сайта, ее мы будем создавать на основе стандартной разметки. Так же вас ждет несколько секретов (вроде гравированного текста), так что будет интересно.

Макет сайта с помощью Photoshop

 

С чего начать

Чтобы создать качественный макет, нужно немало постараться. Ведь он должен составляться из разных компонентов, а смотреться, как целостное произведение. Поэтому изначально важно осознавать, что именно вы хотите в итоге получить. Тут важно все: на какую аудиторию будет рассчитан сайт, каково его назначение и многое другое. Для примера мы используем сайт-портфолио.

Макет сайта с помощью Photoshop

Это примерный набросок на бумаге, он полезен своей простой наглядностью: уже понятно, что где должно располагаться и как в итоге выглядеть. Ведь основа веб-дизайна – это структура. Несмотря на то, что целью этой статьи не является научить вас правильному структурированию сайта, несколько советов по правильной организации контента таки дам.

  • Первое. Для хорошего веб-дизайнера важно знать хотя бы основы css и html, так как рано или поздно ваш макет сайта будет сверстан, то есть примет форму кода. И важно, чтобы вы умели делать свои текстуры. Их можно скопировать и из других источников, но там они, как правило, «много весят».

В итоге наш макет не будет особо легким, ведь мы применим немало разных текстур. Но современный скоростной Интернет позволяет не слишком заботиться о «весе».

  • Второе. После того, как структура спланирована, стоит полазить по различным сайтам-галереям в поисках образа сайта, которых вас вдохновит. В нашем примере за ориентир принят сайт Йеруна Хомана.
  • Третье. Немаловажное значение имеет цветовая составляющая, поэтому вам придется продумать, какие цвета будут использоваться в оформлении вашего сайта. Это одна из вещей, которые должны быть спланированы загодя. В сети можно найти массу сервисов, позволяющих подбирать цветовые комбинации.

На этом вводную часть статьи можно завершать, двигаемся к практическим урокам.

 

Действие 1: работаем с фоном

Для макета выбираем фон размером 500 х 500 пк, текстура зациклена (то есть бесконечно повторяется) и по вертикали, и по горизонтали. Параметры документа создаем, как на иллюстрации:

Макет сайта с помощью Photoshop

Для заливки применяем неброский бежевый цвет #d9cfc0.

Макет сайта с помощью Photoshop

Для того, чтобы добавить бумажную текстуру, я применил набор 12 high-res paper textures (текстура paper15). Ее нужно слегка уменьшить, а резкость, наоборот, с помощью фильтра увеличить. Чтобы обесцветить ее, нажмите одновременно Ctrl, Shift и U, а наложение текстурного слоя поменяйте на затемнение (Multiply). Непрозрачность устанавливайте 20%. Получится как-то так:

Макет сайта с помощью Photoshop

Далее применяем редактирование (Edit), чтобы сделать документ текстурой, для этого в соответствующем разделе выбираем определение узора (Define Pattern).

Макет сайта с помощью Photoshop

Для разметки скачайте шаблон 960 Grid System site.

Макет сайта с помощью Photoshop

Задача разметки – помочь правильно осуществить организацию контента, не держа все пункты в памяти. Для этого открывайте 16-ти колоночный шаблон, из списка слоев уберите » layer1″. Группа вертикальных линий располагается сверху, ее можно сделать невидимой, но включать ее во время работы над организацией и структурой контента нужно всегда. В нашем примере высота шаблона увеличена до 1470 пк. Ниже демонстрирую картинку полученного результата с разметкой.

Макет сайта с помощью Photoshop

Кликаем на редактирование заливки (Edit – Fill) и заливаем макет заранее подготовленной текстурой.

Макет сайта с помощью Photoshop

В новом слое мягкой большой белой кистью нужно нарисовать блик (см. иллюстрацию). Непрозрачность устанавливаем 30%. Так выделяется зона для логотипа и шапки. Делаем очередной слой и с помощью кистей WG Grunge Brushes прорисуем нужные эффекты. Все слои фона нужно выделить в отдельную группу с названием background. Результат должен получиться примерно такой:

Макет сайта с помощью Photoshop

 

Действие 2: создаем шапку

Когда фон готов, можно начать создание шапки. Красивую структуру для этой цели можно сделать самому. Для этого делаем документ 20 х 60 пк и заливаем его белой заливкой. Для разметки добавляем горизонтальную линию по нижнему краю, с отступом в 10 пк.

Макет сайта с помощью Photoshop

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

Макет сайта с помощью Photoshop

Добавляем маску для слоя, для этого жмем нужную клавишу с одновременным удержанием Alt.

Макет сайта с помощью Photoshop

Создаем круг с размерами 20х20. Это можно сделать с помощью специальных функций, как на примере:

Макет сайта с помощью Photoshop

Круг помещаем внизу документа, жмем на редактирование (Edit) и определение узора (Define Pattern). Так делаем из документа текстуру.

Макет сайта с помощью Photoshop

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

Макет сайта с помощью Photoshop

Выделенная область заливается вновь созданной текстурой, непрозрачность устанавливается на 50%.

Макет сайта с помощью Photoshop

Делаем новое прямоугольное выделение в 5 пк высотой, окрашиваем его в цвет #506271 и помещаем сверху нашего шаблона.

Макет сайта с помощью Photoshop

 

Действие 3: меню и логотипы

В работе с меню мы используем шрифт Ариал, размер 13 пк. Цвет шрифта — #506271.

Макет сайта с помощью Photoshop

Для логотипа в нашем примере создан эллипс, стили смотрите на примере:

Макет сайта с помощью Photoshop

 

Макет сайта с помощью Photoshop

 

Макет сайта с помощью Photoshop

Теперь нужно создать новый слой, для этого держим нажатым Ctrl и кликаем на эллипс, создавая вокруг него выделение. Путь следующий: выделение (Select), модификация (Modify), сжатие (Contrast), на 4 пк. Выделенную зону заливаем белым, растушевывая от белого к прозрачному (градиентом). Непрозрачность устанавливаем на 40%.

Макет сайта с помощью Photoshop

Пишем текст для логотипа и размещаем его в эллипсе. В примере использован шрифт Anivers, он бесплатный и прекрасно смотрится. Стили раскрашены так же градиентом, как и эллипс. Чтобы надпись была глубже, помещаем копию текста над первой надписью, только окрашиваем ее в белый цвет. Смещаем строчку на один пиксель вниз и вправо.

Макет сайта с помощью Photoshop

 

Действие 4: слоган – это очень важно

Слоган важен, поскольку именно он – первое, что бросится в глаза посетителю сайта, нужно чтобы он впечатлял и застревал в памяти.

В примере для слогана были выбраны три шрифта: верхний подписан шрифтом Chunk, нижний – Aniverse, ампресанд (значок &) и запятая  — Gabrielle. При работе очень помогает разметка – не забывайте про нее.

Макет сайта с помощью Photoshop

Цвет запятой и & — #506271 (синий). Настройки стилей смотрите на примере:

Макет сайта с помощью Photoshop

 

Макет сайта с помощью Photoshop

 

Макет сайта с помощью Photoshop

Все текстовые слои дублируем и размещаем копии над оригиналом, стили обнуляем, делаем цвет былым. И перетаскиваем вправо и вниз на пиксель – то же самое, что с логотипом. Дубликаты растрируем – удерживая Ctrl, жмем на оригинал теста, чтобы выделить область, выделяем слой с дубликатами, нажимаем на Delete.

Макет сайта с помощью Photoshop

 

Действие 5: последние шаги

Блок с примерами работ и слоган нужно разделить. С этой целью добавляем текст и две полоски горизонтально. Используем шрифт Ариал 18 размера. Для того, чтобы сделать края полосок бледнее середины, используем маску. Создаем маску слоя с линиями и применяем градиент «от черного к белому».

Макет сайта с помощью Photoshop

Опять применяем гравировку, то есть, дублируем слои с полосками и текстом, размещаем копии за оригиналом и делаем белыми. Непрозрачность 70%, смещение копии на пиксель вниз-вправо.

Макет сайта с помощью Photoshop

Для картинок нужны контейнеры. Делаем прямоугольник 220х194 пикселя. Разметку делаем видимой, чтобы было легко на нее ориентироваться, размещая треугольник.

Макет сайта с помощью Photoshop

Для прямоугольника можно использовать разные стили (смотрим примеры):

Макет сайта с помощью Photoshop

 

Макет сайта с помощью Photoshop

Прямоугольник так же дублируем, копию размещаем под оригиналом, сбрасываем стили и закрашиваем черным. Это нужно, чтобы создать тень. Дубликат нужно сначала растрировать, затем совершаем следующую последовательность действий: редактирование (Edit), трансформация (Transform), искажение (Distort). Левый верхний угол смещаем вниз-влево, как на примере.

Макет сайта с помощью Photoshop

Далее жмем фильтры (Filter), размытие (Blur), размытие по Гауссу (Gaussian Blur), радиус 4 пк.

Макет сайта с помощью Photoshop

Ластиком затрите ненужные эффекты тени, непрозрачность тоже не мешало бы понизить.

Макет сайта с помощью Photoshop

Поверх слоя с контейнером делаем новый слой. Чтобы создать нужное выделение, держа нажатым Ctrl кликаем слой с контейнером. Для выделения исползаем цвет заливки #64594d. При активном выделении совершаем следующий ряд действий: выделение (Select), модификация (Modify), сжатие (Contract), значение 1 пк. Нажимаем Delete. Так создается однопиксельная обводка изнутри.

Макет сайта с помощью Photoshop

Создайте нужное количество контейнеров, чтобы поместить в них изображения. Все слои с контейнерами объединяем в группу gallery.

Макет сайта с помощью Photoshop

 

Работаем над футером – один из последних шагов

Заканчивая работу, нужно создать подвал, или футер. Фоном футера создается, копируя фон шапки, его нужно отразить вертикально, поместив внизу шаблона. Цвет меняем на #50627 (синий), непрозрачность делаем 100%. На примере так же создан прямоугольник с тем же цветом, помещенный сверху.

Макет сайта с помощью Photoshop

Чтобы футер логично смотрелся, нужно добавить текстуру гранжа. Для этого берем кисть grunge, непрозрачность – низкая.

Макет сайта с помощью Photoshop

В данном примере футер поделен на три части: твиттер, контакты и связь. Все оформлено шрифтом Аrial 18 размера.

Макет сайта с помощью Photoshop

Начнем оформление с формы связи. Сначала создаем прямоугольник (поле ввода).

Макет сайта с помощью Photoshop

Для слоя используются нижеприведенные стили:

Макет сайта с помощью Photoshop

 

Макет сайта с помощью Photoshop

 

Макет сайта с помощью Photoshop

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

Макет сайта с помощью Photoshop

Центральная колонка состоит из ссылок на соцсети. Иконки можете выбрать сами, в примере они отсюда.

Макет сайта с помощью Photoshop

Справа нужно создать форму, применяя для этого стандартные инструменты, как в примере. Для слоя с формой применяются те самые стили, что мы применяли в полях блока обратной связи. Добавляем значок Twitter, иконку можно выбрать здесь.

Макет сайта с помощью Photoshop

Практически закончили, напоследок добавим копирайты и сгруппируем слои подвала в группе footer.

Макет сайта с помощью Photoshop

 

Окончание работ

Собственно, теперь урок закончен. Надеемся, он вам помог начать разбираться в конструировании сайтов. Комментируйте, вносите предложения, будем ждать! Желаем успеха!

Макет сайта с помощью Photoshop