Уроки Веб и приложения Руслан Гильзидинов 29 мая 2014

Красивый макет сайта в Фотошоп

Сложность урока: Средний

Содержание

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

Введение

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

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

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

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

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

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

Итак, мы можем начать!

Шаг 1. Работа с фоном

Фоном макета будет текстура величиной 500 на 500 пикселей, зацикленная по горизонтали и вертикали. Создадим документ со следующими параметрами.

Заливаем документ темно-бежевым цветом #d9cfc0.

Добавим текстуру бумаги. Я выбрал текстуру 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. Добавляем логотип и меню

Поработаем над меню. Я буду использовать шрифт Arial в 13 пикселей. Цвет - #506271.

В качестве лого я создал эллипс со следующими стилями:

Создаем новый слой; удерживая Ctrl, кликаем по эллипсу, чтобы создать выделение вокруг него. Жмем Select – Modify – Contrast (Выделение – Модификация - Сжать) и вводим значение 4 пикселя. Заливаем выделение градиентом от белого к прозрачному сверху вниз. Непрозрачность – 40%.

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

Шаг 4. Добавляем слоган

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

Я использовал комбинацию из трех шрифтов: Chunk для верхнего текста, Aniverse для нижнего, Gabrielle для запятой и амперсанда. Не забывайте использовать разметку, это значительно вам поможет.

Для запятой и амперсанда я использовал всё тот же синий #506271. Для стилей используем настройки, указанные ниже:

Дублируем все слои с текстами. Размещаем дубликаты под оригиналами, обнуляем все стили для них, меняем цвет на белый. Перетаскиваем на пиксель вправо и на пиксель вниз. Растеризуем дубликаты. Удерживая Ctrl, кликаем по оригинальному тексту, чтобы создать выделение вокруг него, жмем Delete (должен быть выделен слой с дубликатами).

Шаг 5. Блок «Последние работы»

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

Еще раз воспользуемся техникой «гравировки». Дублируем слои с текстом и полосками, располагаем дубликаты за оригиналами, меняем цвет на белый, уровень непрозрачности на 70%, и перемещаем дубликаты на пиксель вниз и на пиксель вправо.

Создадим контейнеры для картинок. Создаем прямоугольник 220 на 194. Сделайте видимой разметку и ориентируйтесь на неё, когда будете располагать прямоугольник.

Применим следующие стили для прямоугольника:

Дублируем прямоугольник и располагаем дубликат под оригиналом. Сбросьте все стили для дубликата и сделайте его полностью черным. Как вы поняли, мы будем делать тень. Итак, растеризуем дубликат. Далее жмем Edit – Transform – Distort (Редактирование – Трансформирование – Искажение). Поведите левый верхний угол немного влево и вниз, как показано на картинке ниже.

Применяем Filter – Blur – Gaussian Blur (Фильтры – Размытие – Размытие по Гауссу) с радиусом в 4 пикселя.

Теперь возьмите ластик и подотрите ненужные части тени. Также не помешает немного понизить параметр непрозрачности.

Создадим новый слой поверх слоя с контейнером. Удерживая Ctrl, нажмем на слой с контейнером, чтобы создать выделение соответствующей формы. Заливаем выделение цветом #64594d. Пока выделение еще активно, жмем Select – Modify – Contract (Выделение – Модификация – Сжать) и вводим значение 1 пиксель. Жмем Delete. Мы создали эффект однопиксельной внутренней обводки.

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

Шаг 5. Работа над футером.

Вот мы и подходим к концу. Все, что осталось, это футер или «подвал». Для того, чтобы сделать фон для футера, мы просто скопируем фон с шапки и отразим его по вертикали, переместив в самый низ шаблона. Поменяем цвет на синий #506271 и установим значение непрозрачности на 100%. Также я создал прямоугольник того же цвета и поместил его поверх.

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

Я поделил футер на три раздела: обратная связь, мои контакты и блок для твиттера. Шрифт – 18pt Arial.

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

Используем следующие стили для слоя:

Теперь используем ту же технику, что мы использовали при создании текста девиза, чтобы создать белую обводку слева и снизу. Размножьте поля и озаглавьте каждое поле, а также не забудьте про кнопку (попробуйте использовать для неё гранжевые кисти, как это сделал я).

В центральную колонку я просто добавлю ссылки на несколько социальных сетей. Я использовал вот эти иконки.

В правой части создадим форму с помощью стандартных инструментов, как показано ниже. Используем для слоя с формой те же стили, что мы использовали для полей в блоке обратной связи. Также добавим иконку Twitter’а – я использовал иконку отсюда.