Создание Документа и Фона
Создайте новый документ размером 1200 x 1120 pixels и с прозрачным фоном.
Когда то мы создавали деревянную текстуру от Matt Hamm. Скачайте ее, вставьте в работу и подвиньте в левый верхний угол документа.
Продублируйте слой, кликнув правой кнопкой мыши по его иконке и нажав "duplicate layer”. Отразите копию слоя по горизонтали и поместите справа от первой текстуры.
Повторите этот процесс и замостите слоями весь документ (после заполнения верхнего ряда, отражайте копии по вертикали, дабы состыковывать их снизу). В конце работы объедините все слои и назовите получившийся background. Обсцветьте слой background, выполнив image > adjustments > desaturate.
Создание Заголовка и Панели Навигации
Возьмите инструмент type tool  и создайте название будущего сайта в верхнем левом углу. Шрифт и параметры текста, которые использовал я, можно посмотреть на изображении:
Ко всему прочему для слоя с текстом добавьте следующие стили слоя (Layer > Layer Style):
В правой части документа, на одной линии с логотипом сайта создайте надписи навигации, используя цвет #b3b3b3. Первое слово сделайте белым (цвет — #ffffff).
Для линка с первой белой надписью Home мы создадим плавающую фигурку. Возьмите rounded rectangle tool  с размером 15 px.
На новом слое под слоем со словами вокруг первой гиперссылки создайте вот такую закругленную формочку:
Залейте выделение любым цветом и добавьте следующие стили слоя:
Результат должен быть таким:
Создание Внешней Центральной Области
Возьмите инструмент rectangular marquee tool  и создайте большой белый прямоугольник размером примерно 850 x 700 pixels. К данному слою добавьте 15% шум, выполнив filter > noise > add noise. Для удобства можно задать слою имя Outer Content Area.
Теперь к слою с забитым шумом прямоугольником примените такие стили слоя:
Получиться должно вот так:
Создание Внутренней Центральной Области
Кликните по иконке слоя Outer Content Area, удерживая клавишу Ctrl, чтобы загрузить выделение и перейдите select > modify > contract. В появившемся диалоговом окне выставьте значение 20pixels. На новом слое залейте выделение белым. Назовите слой Inner Content Area.
Стили слоя такие:
В результате мы имеем вот такой центр:
Создание Визуальной Центральной Области
Загрузите выделение слоя Inner Content Area, кликнув по его иконке, удерживая Ctrl. Сожмите выделение select > modify > contract на 20pixels и на новом слое залейте белым цветом. К получившемуся прямоугольнику добавьте стиль слоя Stroke (Layer > Layer Style) размером 1 px и цветом #e4e4e4.
Возьмите rectangular marquee tool или любой другой выделяющий инструмент и создайте выделение, большее размеров прямоугольника снизу и по бокам, но отступив сверху примерно 200 px и нажмите Delete. Это обрежет изначальную область снизу и оставит вот такой узкий прямоугольник:
Загрузите выделение этого прямоугольника и сожмите его на 5—10 px (select > modify > contract). Получился еще меньший прямоугольник. Залейте его белым цветом, предварительно создав новый слой и добавьте стиль Gradient Overlay.
Результат на данном этапе таков:
На иконке слоя только что созданного голубого прямоугольника кликните левой кнопкой мыши, удерживая Ctrl, тем самым загрузив его выделение. Дальше создайте новый слой и идите filter > render > clouds и затем filter > pixelate > mosaic, используя значения как на картинке снизу.
Blend Mode слоя поставьте на soft light, а его непрозрачность на 75%.
Теперь сюда можно добавить нужную информацию и какую-либо иконку.
Создание Кнопок
Создайте два кружка по бокам визуальной области. не делайте их слишком маленькими, но и большими тоже. Добавьте к слою с кнопками следующие стили:
Получиться должно так:
В заключении работы с кнопками создайте на них вот такие серые стрелочки:
Содержимое
Дальше я не буду объяснять шаг-за-шагом как добавлять текст при помощи type text tool. Сделайте голубые заголовки, текст серого цвета под ними, используйте место в визуальной части.
Внизу создайте прямоугольник, тем же способом, что и внешнюю центральную область. Стили слоя такие же. Заполните коробку чем-либо, можете вставить иконку, или даже две.
Создание Нижнего Колонтитула
Возьмите rectangular marquee tool и выделите область внизу работы поверх деревянной текстуры. Залейте ее черным цветом и поставьте параметр Fill слоя на 45%.
Примените к слою вот такие стили:
Используйте иконку Twitter и стандартные фигуры Photoshop и заполните нижний левый угол колонтитула.
Справа добавьте уже созданный логотип сайта, панель навигации, копирайт разработчика и любую другую информацию, которая может быть расположена в основании страницы.
Финальный результат:
|
