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

 

С чего начать

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

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

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

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

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

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

 

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

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

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

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

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

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

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

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

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

 

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

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

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

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

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

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

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

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

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

 

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

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

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

 

 

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

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

 

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

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

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

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

 

 

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

 

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

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

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

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

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

 

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

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

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

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

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

 

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

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

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

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

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

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

 

 

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

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

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

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

 

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

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