Создаем горизонтально ориентированный дизайн сайта

Автор урока Kubasto — молодой дизайнер, который за небольшой период времени утвердился как успешный стоковый дизайнер на ThemeForest. В описании к уроку значится «Для начинающих». Однако, это лукавство. Редакция хронофага испытывает сильные сомнения в том что начинающий дизайнер сможет создать дизайн сайта по этому уроку. Урок предполагает крепкое знание фотошопа. Опыт работы с вектором, понимание маски, стилей слоя. Если все это есть, урок не составит труда. И тем не менее мы наполнили перевод урока смысловыми ссылками на тематические статьи, которые помогут вам в изучении Фотошопа. Перевод подготовлен Hronofag.ru

[divider top=»0″]

Устали от однообразных сайтов? Мы проведем вас через процесс создания дизайна сайта Stuff — горизонтально ориентированного макета, который заточен под блог или портфолио. Посмотреть финальную версию сайта можно здесь.

Создаем новый документ в фотошопе

001

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

Создаем задний фон

Создаем слой заливки Solid Color, заливаем цветом #bfc6cd

002

Добавляем шум на задний фон

Конвертируем новый слой в смарт объект Правый клик > Convert to Smart Filter и добавляем фильтр Add Noise (настроить можно позже, все благодаря смарт фильтрам). Заблокируйте слой. Что бы держать проект в чистоте можно организовать слои, удалить маску и сделать слой слоем заднего фона по умолчанию (на ваш выбор).

003

Рисуем большую стрелку Stuff

Нарисуйте шеип стрелки при помощи инструмента Custom Shape Tool. При помощи инструмента Direct selection tool деформируйте шаблонную стрелку. Подвигайте векторные точки, сделайте стрелку симпатичнее.

004

Выбираем инструмент Free transform tool или жмем CTRL+T. Сдвигаем стрелку на 310 пикселей от верхней части рабочей области. После чего захватываем с линейки горизонтальный гайд. Крепим его к середине стрелки.

005

Добавляем 4 стиля слоя к стрелке (двойной клик по слою). Drop shadow, inner shadow, outer glow и gradient overlay (от #cbcbcb до #ffffff).

006

007

008

009

Поверх стрелки добавляем текстовой слой.

010

Добавляем стили к тексту: Inner shadow, gradient overlay и stroke. Для усиления глубины, сделайте окантовку Stroke видимой лишь в нижней части текста при помощи настройки градиента. В настройках градиента окантовки сведите альфа канал видимости до значения 0.

011

012

013

Внутренняя и внешняя тени создают трехмерный вид, но давайте внесем еще одно дополнение. Векторный блик. Создаем новый шейп инструментом Rectangle Tool и конвертируем его углы инструментом Convert point tool. Замаскируем шеип поверх стрелки, создав гламурный бликовый эффект.

014

В заливке слоя Fill ставим значение 0% Применяем стиль слоя Градиент со слабым переходом в белый цвет.

015

Чтобы удалить белый блик за пределами стрелки делаем CTRL+клик по векторной маске стрелки. Это создаст выделение. Далее выделяем слой с бликом и нажимаем иконку с маской.

016

Добавляем задний свет

Чтобы сфокусировать внимание посетителя на логотипе, создадим задний свет, который выделит стрелку. Методы можно использовать совершенно примитивные.

  • Создаем новый слой CTRL+SHIFT+N
  • Выбираем инструмент Gradient Tool
  • Сброс настроек D, поменять цвета градиент X
  • Выбираем белый к невидимому и радиальный градиент.

017

Удерживаем SHIFT и рисуем линию, создавая градиент.

018

Новому слою присваиваем невидимость 80%

Создаем макет контента

Нарисуйте прямоугольник шириной 240 пикселей (высота должна быть выше высоты документа)

019

Продублируйте его CTRL+D и поменяйте цвета — это будет область фотографии.

Трансформируем вторую фигуру до размеров 216 на 130 пикселей, выравниваем по центру относительно первой фигуры.

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

020

Добавляем текст

Над фотографией добавляем область текста, вписываем туда заголовок поста. Я использовал шрифты League Gothic (free at the League of Moveable Type). Под фотографией напишите новый текст как основной контент.

021

Стилизуем область контента

Делаем выделение и создаем новую маску для большого прямоугольника. Измените видимость маски до 80%

022

Добавьте стили слоя Outer и Inner Glow . Внешнее и внутренне свечение для более трехмерного вида. Черный цвет для внешнего свечения и белый для внутреннего.

023

024

Добавляем мета текст

Добавляем мета информацию над постом. Я применил шрифт Georgia Italic размером 12 пикселей и 17 пикселей межстрочное расстояние. Используйте направляющие, чтобы текст был выравнен с остальными элементами.

025

Создаем кнопку “Читать дальше”

Под областью поста рисуем кнопку “Читать дальше”.

026

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

027

Добавьте стили слоя — градиент и окантовку. Сделайте окантовку с настройкой внутрь (Inside) чтобы получить идеально резкие края кнопки.

028

029

Прикрепите градиент и к тексту.

030

Стикер на картинку поста

Чтобы создать стикер нарисуйте еще один прямоугольник и текст (шрифт Arial). Разверните оба элемента на 45 градусов.

031

Маской скройте ненужные углы.

032

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

033

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

034

Меню

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

035

Для создания горизонтальной линии вместо инструмента Line Tool, используйте нижнее подчеркивание “_” отключив режим сглаживания anti-aliesed. Линия всегда будет максимально резкая и вы сможете легко контролировать её при помощи настроек межстрочного расстояния.

036

Поставьте прозрачность слоя 15% и добавьте белую тень.

037

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

038

Рисуем поисковую форму

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

039

Добавьте внутреннее свечение inner shadow, а заливка эффекта Fill на 70% прозрачности.

040

Поверх формы напишите текст и, а инструментом Custom Shape Tool нарисуйте подтверждающую стрелочку. К форме поиска добавляем стиль слоя Inner Shadow.

041

Где достать логотипы социальных сетей?

В большинстве случаев я нахожу все нужные мне векторные логотипы для популярных брендов на сайте www.brandsoftheworld.com. Откройте логотип в Иллюстраторе, скопируйте фигуру и сделайте пэист в Фотошоп как векторный шеип.

042

Поставьте прозрачность заливки слоя до 0% и добавьте стили слоя drop shadow, inner shadow и color overlay. Для активного состояния изменим цвет и насыщенность стиля слоя Color Overlay.

043

044

045

Скопируйте стиль слоя и сделайте Пэист на остальные логотипы. Правый клик по слою и команда Copy Layer Style из выпадающего меню.

046

Создаем окно комментариев

Чтобы добавить комментарии создадим еще одну фигуру с округлыми краями шириной в 520 пикселей. Добавим стиль слоя тени Drop Shadow

047

048

Выделяем большую часть и добавим маску слоя.

049

Дублируем и инвертируем маску слоя. Измените заливку слоя fill до 25% невидимости.

050

В настройках режимов наложения добавляем галочку на опцию Layer Mask Hide Effects, чтобы ликвидировать стили слоя со стороны обрезания маской.

051

Создаем черную вертикальную лини, как границу между этими двумя областями. Невидимость 25% и добавляем 1 пиксельную белую тень с правой стороны.

052

Добавьте аватарку и текст.

053

Стрелочки для слайдера портфолио

Нарисуйте округлые фигуры и скопируйте стили слоя с стрелки логотипа. Инструментом Custom Shape Tool выбейте в окружностях дырки в виде стрелочек.

054

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

055

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

056

Выделите все слои для кнопки и слейте их в один Смарт объект.

057

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

058

Вот и все!

Все остальные элементы сайта созданы путем копирования и изменения размеров созданных элементов. Шрифт League Gothic, как и массу других крутых и бесплатных шрифтов можно скачать на www.fontsquirrel.com

При желании готовую сверстанную тему можно даже купить на стоке. Надеюсь этот урок был вам полезен!