Создание гранджевого полупрозрачного дизайна веб сайта-портфолио

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

1 Шаг — Настраиваем шаблон

Давайте создадим документ. Я предпочитаю создавать свои сайты с фиксированной шириной в 960px. Для данного урока я выбрал также высоту в 800px, чтобы увериться в том, что у нас будет достаточно места для всех блоков контента, которые понадобятся на сайте. Создание документа точно по размерам будущего сайта облегчает нанесение сетки направляющих.

Теперь давайте настроим направляющие. С линеек документа перетяните на холст четыре направляющих и расположите их по его краям.

Добавим немного свободного места для фона, который мы будем создавать далее. Откройте Image > Canvas Size и раздвиньте документ до размеров 1100×1000px. Так мы получили массу свободного пространства для создания собственного уникального фона.

Теперь залейте нижний слой белым цветом (Shift + F5) и переименуйте его в “Background”. Ваш документ должен выглядеть как на картинке ниже.

2 Шаг — Создание градиентного фона

Кликаем правой кнопкой мыши по слою “Background” и выбираем из списка пункт Blending Options. Сейчас добавим на наш фон градиентную заливку. Я выбрал трехцветный градиент с бирюзовыми и бронзовыми оттенками, однако это не слишком существенно, и вы можете подобрать цвета по своему вкусу. Прелесть использования меню Blending Options (применение стилей к слою) заключается в том, что в любое время такой градиент можно переложить на другие цвета, либо с легкостью подкорректировать оттенки.

Теперь ваш документ должен выглядеть вот так:

Вы можете пропустить этот шаг, однако мне кажется, что для наших целей градиент сейчас слишком глянцевый. Поэтому давайте добавим фону шума, чтобы немного ослабить подобное впечатление. Создайте новый слой и назовите его “Noise”. Далее залейте слой белым цветом (Edit > Fill). Теперь к этому слою можно применить шум при помощи фильтра Filter > Noise > Add Noise. Задайте значения Amount — 400%, Distribution — Uniform, Monochromatic оставьте неотмеченным. С помощью этой мозаики цветов мы сможем придать фону дополнительной глубины.

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

3 Шаг — Добавление фоновых текстур

Для начала вам нужно скачать какие-нибудь акварельные кисточки, если у вас их до сих пор нет. К примеру, вот эти использовал я.

Создайте новый слой поверх слоев “Background” и “Noise”. Переименуйте этот слой в “Brush1” (нам предстоит создать еще несколько подобных). Режим наложения этого слоя выставьте в Multiply. Подберите какой-нибудь мягкий теплый цвет (для компенсации холодных тонов в голубом градиенте фона). Я остановился на теплом коричневом #996726. Выберите кисть, которой бы вы хотели начать работать и перенесите курсор мыши в район левого верхнего угла документа. И, внимание, рисовать вы должны начать за пределами направляющих линий — нужно чтобы фон выбивался за пределы рабочей области сайта.

Снизьте Opacity слоя до 50% (наружу должна прибиваться зернистость). Повторите предыдущие два шага, используя различные кисти по вашему вкусу. Ваш фон теперь должен походить на нечто следующее:

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

4 Шаг — Создание внутреннего просвечивающегося контейнера

Для начала переключитесь на Rounded Rectangle Tool с радиусом закругления углов 20px. Поверх всех других слоев (кисточки, шум, градиент) растяните такой прямоугольник как раз по направляющим линиям, которые мы устанавливали в начале урока. Этот прямоугольник должен получиться размерами 960×800px. Переименуйте этот слой в “Container”, выполните щелчок правой кнопкой мыши по слою и выберите пункт Rasterize Layer.

Для придания этому слою просвечивающегося вида, нам нужно сделать следующие вещи.

  1. Установите Fill слоя равным 0% (нам нужно убрать его цвет, потому что для этих целей мы будем использовать стиль Color Overlay).
  2. Теперь добавим стиль Drop Shadow: Opacity — 41%, Angle — 90, Distance — 0, Spread — 1, Size — 10.
  3. Bevel and Emboss: Style — Inner Bevel, Technique — Smooth, Depth — 100%, Direction — Up, Size — 20px, Soften — 0px, Angle — 135, Altitude — 58, Highlight Opacity — 27%, Shadow Opacity — 15%.
  4. Color Overlay: цвет White, Opacity — 73.
  5. Stroke: Size — 1px, Opacity — 100% (для придания дополнительной иллюзии объема).

Применив к слою все эти стили, ваш “Container” будет выглядеть как-то так:

5 Шаг — Настройка направляющих для отступов внутри блока

Чтобы иметь наверняка одинаковые по размеру поля на нашем слое “Container” (и не высчитывать пиксели каждый раз при помещении очередного элемента в блок), давайте добавим направляющие на расстоянии по 40px внутри основного блока.

6 Шаг — Навигация в выноске

Как вы могли видеть в финальном превью, нам нужно создать навигационное меню, будто бы вырезанное из слоя “Container”. Для этого нам предстоит лишь вырезать часть слоя, а все остальное выполнят за нас примененные к нему стили.

Для того чтобы создать выделение для выноски, нанесите на документ новую прямоугольную фигуру со скругленными углами в том месте, где должно быть навигационное меню. Радиус углам задайте равным 10px (что будет половиной радиуса слоя “Container”).

Если необходимо — выровняйте фигуру по верхней направляющей линии отступа. После того как вы управитесь с размещением прямоугольника, загрузите выделение по нему, выполнив клик правой кнопкой мыши по его иконке в палитре Layers. Затем переключитесь на слой “Container” и нажмите Delete. Теперь можно спрятать ваш прямоугольник, и вы увидите, как на слое “Container” появилась врезка, как на рисунке ниже.

Заметьте, насколько хорошо сгладились углы в прямоугольнике. Если бы мы просто создали прямоугольное выделение, а затем закруглили бы ему углы, мы бы не получили такого четкого результата. Ну и, конечно же, разве не здорово работают стили слоев, автоматически применяя эффекты к обрезанной кромке слоя “Container”?

Теперь нам нужно добавить немного текста. Я использовал свой любимый шрифт Rockwell (который поставляется сразу с пакетом MS Office, хотя вы его можете также найти в Сети). Распределите навигационные элементы по площади меню.

Чтобы ссылки не выглядели слишком плоскими, давайте заставим их аккуратно отбрасывать тень (хотя, можно также добавить и внутреннюю тень, но такой прием утоньшает начертание букв). Вот настройки для тени, которые я использовал:

7 Шаг — Активная ссылка, врезанная в страницу

Для достижения требуемого эффекта мы создадим новый слой, сразу под слоем с текстом, который мы использовали при создании навигационных ссылок. Назовите этот слой “Active Nav”. Создайте прямоугольное выделение по размеру показанного на рисунке шильдика и залейте его любым цветом (это не важно).

Далее нам нужно задать некоторые стили слою “Active Nav”. Все настройки я привел ниже (вам понадобится Drop Shadow, Gradient Overlay, Stroke и Inner Glow).

Теперь продублируем слой “Active Nav” (Ctrl + J) и сравняем все его стили (для этого создайте под дублем пустой слой и слейте дубль с этим слоем, чтобы растрировать все эффекты). Назовите получившийся слой “Active Nav Flattened”. Нам нужно будет жестко отрезать несколько частей от этого слоя, поэтому стили не должны влиять на конечный результат.

При помощи Selection Tool удалите контур и внутреннее свечение сверху и снизу слоя “Active Nav Flattened”.

Теперь добавим тени, чтобы создать иллюзию врезки ленты активной ссылки непосредственно в слой “Container”. Две эти тени мы выполним с помощью Ellipse Tool.

Создайте черный эллипс длиной на 20px больше прямоугольника “Active Nav Flattened” и приблизительно 5px высотой. Отцентрируйте этот эллипс по верхнему краю прямоугольника “Active Nav Flattened”. Кликните правой клавишей по слою и выберите пункт Rasterize Layer. Переименуйте слой в “Top Active Shadow”.

Теперь нам нужно немного размыть эллипс, для чего откройте Filter > Blur > Gaussian Blur и примените размывку с радиусом в 2px. Далее удалите верхнюю половину эллипса, чтобы он больше походил формой на тень.

Понизьте Opacity слоя “Top Active Shadow” до 75%. С верхней тенью мы закончили. Для создания нижней тени продублируйте этот слой (Ctrl + J) и примените нему трансформацию Edit > Transform > Flip Vertical, а затем переместите тень к низу фигуры “Active Nav Flattened”.

8 Шаг — Создаем логотип, заканчивая оформлять шапку

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

Нам нужно нарисовать такой разделитель, чтобы создавалось впечатление того, что слой “container” в этом месте протравлен по всей длине. Для создания такого эффекта нарисуйте горизонтальную линию толщиной в 1px, протяженностью по всей ширине блока “container”. Закрасьте линию темно-зеленым цветом и переименуйте слой в “Separating Line”.

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

Теперь создадим логотип. Я не являюсь опытным разработчиком логотипов, поэтому я просто нашел классный шрифт (Gill Sans) и нанес большими буквами произвольную надпись в верхнем левом углу. Затем в точности так, как мы создавали выноску с навигацией, загрузите выделение по тексту лого, а затем удалите эту область на слое “Container”. И снова стили слоя все сделают за нас, подстроившись под новую форму.

Далее я посадил красную звездочку за логотипом (будет видна на следующих рисунках — прим. пер.), используя во время работы те же техники, что и при создании навигационного элемента активной ссылки в выноске, врезанной в слой “Container”.

9 Шаг — Популярные примеры из портфолио

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

Растяните прямоугольник со скругленными углами радиусом 10px по плоскости основного “Container” блока. Убедитесь, что имеете отступы по 40px по каждой стороне (придерживайтесь созданных нами ранее направляющих).

Выполните Ctrl + клик по слою с прямоугольником для загрузки выделения по нему, затем перейдите на слой “Container” и нажмите Delete. Сам прямоугольник с круглыми углами можно удалить из документа, так как он нам больше не понадобится.

Далее нам нужно создать по каждой стороне прямоугольника стрелки, чтобы иметь возможность листать примеры из портфолио в любом направлении. Для этого с помощью Shape Tool создайте круг диаметром 40px и перенесите его на левую сторону вырезанной области, отцентрировав по ее краю.

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

Важно

Поскольку мы не работаем с векторными масками, и Fill слоя “Container” у нас выставлен в 0%, нужно на секунду все вернуть обратно.

Поэтому верните слою “Container” значение Fill равное 100%, и слейте теперь оба кружка со слоем ниже (пункт Merge Down в контекстном меню, либо Ctrl + E). После того, как вы все это проделаете, уберите Fill для “Container” снова в 0%. Вот полученный результат:

Посмотрите, как эти два кружка влились в слой “Container” и стали его частью.

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

Создайте прямоугольник с круглыми углами радиусом 3px, длиной 20px и высотой 6px и передвиньте его туда, где хотите видеть стрелку. Теперь поверните (Ctrl + T, затем — Rotate) его на 45 градусов против часовой стрелки. Так у нас получилась первая половина указателя. Теперь дублируйте этот прямоугольник (Ctrl + J) и отобразите его по вертикали (Edit > Transform > Flip Vertical). Поместите этот дубль так, чтобы левые кончики обоих половин накладывались друг на друга, создавая таким образом стрелочку. Выделите оба слоя на панели Layers и слейте их друг с другом (Ctrl + E). Переименуйте получившийся слой в “Left Arrow”. Вот как должен выглядеть результат:

Теперь нужно добавить несколько стилей к стрелке, чтобы гармонично вписать ее в дизайн страницы. И так, задайте слою значение Fill равным 0%, и включите стиль Inner Shadow с параметрами Opacity 50%, Angle 120, Distance 2, Choke 0, Size 3 и Noise 0.

Далее продублируйте слой “Left Arrow” (Ctrl + J) и выполните Edit > Transform > Flip Horizontal. Переименуйте дубль в “Right Arrow” и перенесите на правую часть выноски для портфолио.

Последнее что мы должны сделать, чтобы закончить наш блок для популярных примеров портфолио — придать ему глубины, добавив в нижнюю часть тень. И так, нанесите в эту область градиент от прозрачного к черному, как показано ниже.

Для удаления частей тени, выступающих за выноску, просто выполните Ctrl + клик по слою “Container” и нажмите Delete, находясь на слое с самой тенью. Под этот слой мы будем помещать скриншоты из портфолио, чтобы тень создавала ощущение глубины.

10 Шаг — Добавляем элемент из портфолио

Сделайте скриншот своего любимого сайта (я просто взял свое портфолио на ryanscherf.net) и перенесите его на новый слой в фотошоп. Переименуйте слой на “Screenshot”.

К слою “Screenshot” добавим стили Stroke и Inner Shadow:

Продублируем слой “Screenshot” и сольем его с его же стилями (для этого нужно слить слой “Screenshot Copy” с пустым новым слоем). Поверните “Screenshot Copy” на 45 градусов против часовой стрелки, как вы это делали со стрелками на шаге 9.

Поместите скриншот в нижнюю левую часть выноски для портфолио, сделав все так, чтобы правый верхний его угол выходил за ее пределы (работаем с глубиной композиции). Сейчас нужно создать видимость того, что скриншот как бы заткнут за слой “Container”. Удалите нижний угол “Screenshot Copy”, который выступает за контур выноски с портфолио, как показано на рисунке.

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

Создайте надпись практически полного белого цвета (либо очень светлого голубого/зеленого). К тексту примените тот же стиль Drop Shadow, что и для ссылок в навигации (Angle 60, Distance 1, Size 1).

Затем под слоем с текстом создайте полупрозрачный прямоугольник. Я делал так: нанес прямоугольник черного цвета, а затем понизил его Opacity до 30%. В результате мы должны получить вот что:

Создадим несколько навигационных точек в стиле iPhone. Должна быть одна активная точка с точно такими же стилями, как у слоя “Active Nav” и несколько неактивных точек со стилями слоя “Left Arrow”.

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

Создайте круг, используя Shape Tool диаметром 20px (мне нравится подобные элементы делать большими и удобными). Выполните клик правой клавишей мыши по слою “Active Nav” и выберите пункт Copy Layer Style. После этого перейдите на слой с кружком, кликните по нему правой клавишей мыши и выберите пункт Paste Layer Style. Так мы создали активный кружок.

Повторите эти шаги для всех неактивных кружков, которые у вас есть, но теперь используйте стили слоя “Left Arrow” вместо “Active Nav”.

11 Шаг — Прикрепим шильдик к блоку

Нам нужно пояснить посетителям, что же здесь все-таки находится. Создание шильдика будет включать в точности те же шаги, которые выполнялись при создании слоя “Active Nav”, описанные в шаге 7.

Единственным отличием будет то, что я решил задать чуть больший Opacity для тени, чтобы градировать элементы по удаленности от холста.

Чтобы закончить с этим блоком нам осталось продублировать (Ctrl + J) разделительную линию “Separating Line”, созданную нами на 8 шаге и переместить дубль на 40px ниже выноски с портфолио.

12 Шаг — Создание основного блока

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

Ширина сайта 960px — 80px на внутренние отступы = 880px доступного пространства под колонки. Также между колонками придется оставить еще место под 40px отступы, поэтому для трех колонок остается уже 800px. Делим 800 на 3, получаем 266px на одну колонку (у меня вышло 267px, 266px и 267px слева направо, чтобы сохранить баланс). Поэтому нанесите направляющие в соответствии с такой разметкой, соблюдая 40 px интервалы между каждой колонкой.

13 Шаг — Колонка последние записи

На палитре Layers создайте новую группу с названием “Latest from the Blog”. Сюда мы поместим все слои, относящиеся к данному блоку.

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

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

Для придания этим элементам объема, применим к ним некоторые стили: Color Overlay (#0e696a) и Inner Shadow (Opacity 63%, Angle 120, Distance 1px, Size 1px). Получиться должно в итоге вот что:

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

Для того чтобы придать объема тексту (хотя не понятно, как тогда его можно будет верстать в коде — прим. пер.) добавим ему стиль Drop Shadow белого цвета с нижней правой стороны. Результат от эффекта можно видеть ниже.

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

14 Шаг — Последние обновления Twitter

Здесь слишком сильно трудиться не придется. Продублируйте группу “Latest from the Blog” и переименуйте дубль в “Twitter Updates”.

Поработайте над текстом, чтобы он больше соответствовал обновлениям записей Twitter (ссылки, время и т.д.). Перенесите эту группу в центральную колонку и готово!

15 Шаг — Форма подписки на почтовые уведомления

Продублируйте группу “Twitter Updates” и переименуйте ее на “Newsletter”. Перенесите ее в последнюю правую колонку.

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

Для создания формы для ввода адреса нужно растянуть прямоугольник со скругленными углами радиусом в 10px и высотой в 40px. Шириной можете задавать 266px. Назовите этот слой “Input Form” и задайте такие стили:

В конце концов, нам нужна кнопка для отправки данных формы. Для создания такой кнопки все также используем стили слоя “Active Nav”, чтобы соблюдать постоянство внешнего вида элементов страницы.

Создайте для этого еще один прямоугольник со скругленными углами радиусом в 20px, высотой 40px и шириной в 140px. Переименуйте данный слой в “Button”.

Скопируйте стили слоя “Active Nav” и примените их к слою “Button”.

Продублируйте текст из навигационного меню (Ctrl + J) и измените его на “Subscribe”. Сместите эту надпись по центру кнопки. Результат показан на рисунке ниже.

16 Шаг — Добавляем информацию об интеллектуальной собственности

Она должна быть всегда, поэтому вынесите пару строчек за пределы границ “Container”.

Заключение

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

Поделитесь уроком

Чириканье Мыло Вконтактик Рожи ЖэЖэ Яша

Правовая информация

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

Переведено с сайта psd.tutsplus.com, автор перевода указан в начале урока.

Предложения партнеров: Козырьки, навес из поликарбоната над крыльцом . Телефон предприятия техевропласт. по лучшим ценам