Откройте фотошоп, создайте новый документ размерами 800x700px и 72dpi.
Установите главный цвет - #131313, возьмите Paint Bucket Tool (G) и залейте весь документ.
![Профессиональный сайт *](http://demiart.ru/tutorials/2/profi-site/1.jpg)
Создайте новый слой, возьмите Ellipse Tool (U), попробуйте создать элемент для заголовка сайта, сделайте овальное выделение и залейте его белым цветом.
![Профессиональный сайт *](http://demiart.ru/tutorials/2/profi-site/2.jpg)
Параметры слоя:
Blending Options>Outer Glow![Профессиональный сайт *](http://demiart.ru/tutorials/2/profi-site/3.jpg)
Получили:
![Профессиональный сайт *](http://demiart.ru/tutorials/2/profi-site/4.jpg)
Применяя предыдущий инструмент, пробуйте сделать следующий слой, принадлежащий к заголовку сайта. Изменение формы делаем с Convert Point Tool.
![Профессиональный сайт *](http://demiart.ru/tutorials/2/profi-site/5.jpg)
Параметры слоя:
Blending Options>Inner Glowцвет #143453.
Blending Options>Gradient Overlay
Gradients parameters:![Профессиональный сайт *](http://demiart.ru/tutorials/2/profi-site/8.jpg)
Получили:
![Профессиональный сайт *](http://demiart.ru/tutorials/2/profi-site/9.jpg)
Сделайте копию нового сделанного слоя и выберите Free Transform и изменинте его так чтобы было похоже на это:
![Профессиональный сайт *](http://demiart.ru/tutorials/2/profi-site/10.jpg)
Параметры слоя:
Blending Options>Gradient Overlay
Gradient’s parameters:![Профессиональный сайт *](http://demiart.ru/tutorials/2/profi-site/12.jpg)
Получили:
![Профессиональный сайт *](http://demiart.ru/tutorials/2/profi-site/13.jpg)
Создайте новый документ, размерами 20x20px и 72dpi, инструментом Rectangle Tool создайте три прямоугольника и с помощью Free Transform поверните их под углом, чтобы создать паттерн белого цвета..
![Профессиональный сайт *](http://demiart.ru/tutorials/2/profi-site/14.jpg)
![Профессиональный сайт *](http://demiart.ru/tutorials/2/profi-site/15.jpg)
Сохраните узор:
![Профессиональный сайт *](http://demiart.ru/tutorials/2/profi-site/16.jpg)
Сделайте новый слой используя Rectangle Tool (U) и создайте широкую полоску, которая будет фоном сайта.
![Профессиональный сайт *](http://demiart.ru/tutorials/2/profi-site/17.jpg)
Параметры слоя:
Blending Options>Gradient Overlay
Gradient’s parameters:
Blending Options>Pattern Overlay![Профессиональный сайт *](http://demiart.ru/tutorials/2/profi-site/20.jpg)
Получили:
![Профессиональный сайт *](http://demiart.ru/tutorials/2/profi-site/21.jpg)
Сделайте копию недавно созданного слоя и выберите Free Transform, переместите копию в правую сторону и смотрите на рисунок:
![Профессиональный сайт *](http://demiart.ru/tutorials/2/profi-site/22.jpg)
Возьмите Rounded Rectangle Tool (U), представьте форму заголовка сайта, на которой будут его кнопки, покрасьте её в #010101.
![Профессиональный сайт *](http://demiart.ru/tutorials/2/profi-site/24.jpg)
![Профессиональный сайт *](http://demiart.ru/tutorials/2/profi-site/25.jpg)
Параметры слоя:
Blending Options>Outer Glow![Профессиональный сайт *](http://demiart.ru/tutorials/2/profi-site/26.jpg)
![Профессиональный сайт *](http://demiart.ru/tutorials/2/profi-site/27.jpg)
Сделайте копию нового сделанного слоя и выберите Free Transform чтобы сделать её меньше немного и изменить у этой копии параметры:
![Профессиональный сайт *](http://demiart.ru/tutorials/2/profi-site/28.jpg)
Параметры слоя:
Blending Options>Gradient Overlay
Gradient’s parameters:![Профессиональный сайт *](http://demiart.ru/tutorials/2/profi-site/30.jpg)
Получили:
![Профессиональный сайт *](http://demiart.ru/tutorials/2/profi-site/31.jpg)
Возьмите Ellipse Tool (U) и пробуйте нарисовать вспышку на правой стороне всех кнопок, расположенных на заголовке сайта.
![Профессиональный сайт *](http://demiart.ru/tutorials/2/profi-site/32.jpg)
Параметры слоя:
Fill 0%Blending Options>Gradient Overlay
Gradient’s parameters:![Профессиональный сайт *](http://demiart.ru/tutorials/2/profi-site/34.jpg)
Получили:
![Профессиональный сайт *](http://demiart.ru/tutorials/2/profi-site/35.jpg)
Зажмите клафишу Alt, нажмите мышью между слоем вспышки и кнопочной группой, после этого вспышка будет применена в пределах заголовка с кнопками.
![Профессиональный сайт *](http://demiart.ru/tutorials/2/profi-site/36.jpg)
![Профессиональный сайт *](http://demiart.ru/tutorials/2/profi-site/37.jpg)
Сделайте копию нового сделанного слоя и переместите копию в лево, как показано на рисунке:
![Профессиональный сайт *](http://demiart.ru/tutorials/2/profi-site/38.jpg)
Выберите Rectangle Tool (U), чтобы создать и покрасить самую низкую часть фона сайта, этим цветом #1A1A1A.
![Профессиональный сайт *](http://demiart.ru/tutorials/2/profi-site/39.jpg)
Параметры слоя:
Blending Options>Outer Glow
Blending Options>Bevel and Emboss![Профессиональный сайт *](http://demiart.ru/tutorials/2/profi-site/41.jpg)
Получили:
![Профессиональный сайт *](http://demiart.ru/tutorials/2/profi-site/42.jpg)
Возьмите Rounded Rectangle Tool (U) чтобы создать слой где будет одна из секций сайта.
![Профессиональный сайт *](http://demiart.ru/tutorials/2/profi-site/43.jpg)
![Профессиональный сайт *](http://demiart.ru/tutorials/2/profi-site/44.jpg)
Параметры слоя:
Blending Options>Drop Shadow
Blending Options>Gradient Overlay
Gradient’s parameters:![Профессиональный сайт *](http://demiart.ru/tutorials/2/profi-site/47.jpg)
Получили:
![Профессиональный сайт *](http://demiart.ru/tutorials/2/profi-site/48.jpg)
Сделайте копию в последний раз сделанного слоя и обратитесь снова к Free Transform, чтобы сделать копию более маленькой, после изменяем её параметры.
![Профессиональный сайт *](http://demiart.ru/tutorials/2/profi-site/49.jpg)
Параметры слоя:
Fill 0%Blending Options>Stroke![Профессиональный сайт *](http://demiart.ru/tutorials/2/profi-site/50.jpg)
Получили:
![Профессиональный сайт *](http://demiart.ru/tutorials/2/profi-site/51.jpg)
Потом нам придется выбрать два инструмента и создать один элемент, который будет на магистрале сайта. Выберите Rectangle Tool (U) и создайте первоначальный слой, а затем щелкните по кнопке Alt, в тоже вермя возьмите Ellipse Tool (U) и выделите 2 раза (как показано на рисунке), чтобы вырезать ненужные элементы.
![Профессиональный сайт *](http://demiart.ru/tutorials/2/profi-site/52.jpg)
Параметры слоя:
Blending Options>Gradient Overlay
Gradient’s parameters:![Профессиональный сайт *](http://demiart.ru/tutorials/2/profi-site/55.jpg)
Получили:
![Профессиональный сайт *](http://demiart.ru/tutorials/2/profi-site/56.jpg)
Теперь создайте другой элемент магистрали, который должнен быть размещен сверху и посередине. Сделать его мы должны с помощью Rectangle Tool (U).
![Профессиональный сайт *](http://demiart.ru/tutorials/2/profi-site/57.jpg)
![Профессиональный сайт *](http://demiart.ru/tutorials/2/profi-site/58.jpg)
Параметры слоя:
Blending Options>Gradient Overlay
Gradient’s parameters:![Профессиональный сайт *](http://demiart.ru/tutorials/2/profi-site/60.jpg)
Получили:
![Профессиональный сайт *](http://demiart.ru/tutorials/2/profi-site/61.jpg)
Используйте
Line Tool (U), пробуйте сделать две вертикальных линии вдоль краев недавно созданной полосы, покрасьте их в #8D8D8D.
![Профессиональный сайт *](http://demiart.ru/tutorials/2/profi-site/62.jpg)
![Профессиональный сайт *](http://demiart.ru/tutorials/2/profi-site/63.jpg)
Возьмите Pencil Tool (
![cool.gif](http://demiart.ru/forum/html/emoticons/cool.gif)
чтобы подвести двойную вертикальную черту на форме, где будут кнопки, смотрим скрин:
![Профессиональный сайт *](http://demiart.ru/tutorials/2/profi-site/64.jpg)
Параметры слоя:
Blending mode-Soft Light![Профессиональный сайт *](http://demiart.ru/tutorials/2/profi-site/65.jpg)
Сделайте дубликат слоя и поставьте его справа, паралельно этому.
![Профессиональный сайт *](http://demiart.ru/tutorials/2/profi-site/66.jpg)
Возьмите Ellipse Tool (U) и создайте слой для логотипа сайта.
![Профессиональный сайт *](http://demiart.ru/tutorials/2/profi-site/67.jpg)
Параметры слоя:
Blending Options>Outer Glow
Blending Options>Gradient Overlay
Gradient’s parameters:![Профессиональный сайт *](http://demiart.ru/tutorials/2/profi-site/70.jpg)
Получили:
![Профессиональный сайт *](http://demiart.ru/tutorials/2/profi-site/71.jpg)
Используя предыдущий инструмент, создайте следующий слой, также для логотипа.
![Профессиональный сайт *](http://demiart.ru/tutorials/2/profi-site/72.jpg)
Параметры слоя:
Fill 0%Blending Options>Gradient Overlay
Gradient’s parameters:![Профессиональный сайт *](http://demiart.ru/tutorials/2/profi-site/74.jpg)
Получили:
![Профессиональный сайт *](http://demiart.ru/tutorials/2/profi-site/75.jpg)
Возьмите Ellipse Tool (U), создайте ещё один слой поменьше, опять же для логотипа. Красим в #0A0F12.
![Профессиональный сайт *](http://demiart.ru/tutorials/2/profi-site/76.jpg)
Параметры слоя:
Blending Options>Stroke![Профессиональный сайт *](http://demiart.ru/tutorials/2/profi-site/77.jpg)
Получили:
![Профессиональный сайт *](http://demiart.ru/tutorials/2/profi-site/78.jpg)
Выберите в последний раз Ellipse Tool (U), чтобы нарисовать вспышку на логотипе.
![Профессиональный сайт *](http://demiart.ru/tutorials/2/profi-site/79.jpg)
Параметры слоя:
Fill 0%Blending Options>Gradient Overlay
Gradient’s parameters:![Профессиональный сайт *](http://demiart.ru/tutorials/2/profi-site/81.jpg)
Получили:
![Профессиональный сайт *](http://demiart.ru/tutorials/2/profi-site/82.jpg)
Зажмите кнопку Alt и нажмите мышью между слоями, после этого вспышка будет применена в пределах слоя с логотипом.
![Профессиональный сайт *](http://demiart.ru/tutorials/2/profi-site/83.jpg)
Получили:
![Профессиональный сайт *](http://demiart.ru/tutorials/2/profi-site/84.jpg)
Выберите Ellipse Tool (U), чтобы создать слой, для дополнения логотипа.
![Профессиональный сайт *](http://demiart.ru/tutorials/2/profi-site/85.jpg)
Параметры слоя:
Fill 0%Blending Options>Outer Glow
Blending Options>Inner Glow
Blending Options>Stroke![Профессиональный сайт *](http://demiart.ru/tutorials/2/profi-site/88.jpg)
Получили:
![Профессиональный сайт *](http://demiart.ru/tutorials/2/profi-site/89.jpg)
Следующий шаг включает создание специальной секции, расположенной с левой стороны сайта.
Берём Rectangle Tool (U) для этой операции.
![Профессиональный сайт *](http://demiart.ru/tutorials/2/profi-site/90.jpg)
![Профессиональный сайт *](http://demiart.ru/tutorials/2/profi-site/90.jpg)
Параметры слоя:
Fill 0%Blending Options>Gradient Overlay
Gradient’s parameters:![Профессиональный сайт *](http://demiart.ru/tutorials/2/profi-site/92.jpg)
Получили:
![Профессиональный сайт *](http://demiart.ru/tutorials/2/profi-site/93.jpg)
Сделайте копию нового сделанного слоя и выберите Free Transform, чтобы повернуть копию и разместить её парралельно, смотрите следующий рисунок:
![Профессиональный сайт *](http://demiart.ru/tutorials/2/profi-site/94.jpg)
Используя три линии , созданные из черточек , вызовите панель настройки шрифтов и установите такие параметры как на скрине..
![Профессиональный сайт *](http://demiart.ru/tutorials/2/profi-site/95.jpg)
(самая низкая линия)
![Профессиональный сайт *](http://demiart.ru/tutorials/2/profi-site/96.jpg)
(Высшие линии).
Blending Options>Drop Shadow![Профессиональный сайт *](http://demiart.ru/tutorials/2/profi-site/97.jpg)
Получили:
![Профессиональный сайт *](http://demiart.ru/tutorials/2/profi-site/98.jpg)
Вот такой у вас должен получится результат:
![Профессиональный сайт *](http://demiart.ru/tutorials/2/profi-site/99.jpg)
Идем дальше...
Введите после этого названия кнопок для на загаловке сайта.
![Профессиональный сайт *](http://demiart.ru/tutorials/2/profi-site/100.jpg)
![Профессиональный сайт *](http://demiart.ru/tutorials/2/profi-site/101.jpg)
Напишите также заглавие логотипа сайта, как на скрине.
![Профессиональный сайт *](http://demiart.ru/tutorials/2/profi-site/102.jpg)
![Профессиональный сайт *](http://demiart.ru/tutorials/2/profi-site/103.jpg)
Параметры слоя:
Blending Options>Gradient Overlay
Gradient’s parameters:![Профессиональный сайт *](http://demiart.ru/tutorials/2/profi-site/105.jpg)
Получили:
![Профессиональный сайт *](http://demiart.ru/tutorials/2/profi-site/106.jpg)
Назовите секции сайта, смотрим скриншёты.
(about me)
![Профессиональный сайт *](http://demiart.ru/tutorials/2/profi-site/108.jpg)
(portfolio)
![Профессиональный сайт *](http://demiart.ru/tutorials/2/profi-site/109.jpg)
Вставьте текст в названную секцию "about me”, смотрите скриншёт:
![Профессиональный сайт *](http://demiart.ru/tutorials/2/profi-site/110.jpg)
(orange text)
![Профессиональный сайт *](http://demiart.ru/tutorials/2/profi-site/111.jpg)
(the rest of the text)
![Профессиональный сайт *](http://demiart.ru/tutorials/2/profi-site/112.jpg)
Вставьте скриншёты наших проектов в следующую секцию "portfolio”.
Параметры слоев(смотрим скриншёты)
Blending Options>Stroke![Профессиональный сайт *](http://demiart.ru/tutorials/2/profi-site/113.jpg)
![Профессиональный сайт *](http://demiart.ru/tutorials/2/profi-site/114.jpg)
Последняя стадия включает добавление авторского права сайта:
![Профессиональный сайт *](http://demiart.ru/tutorials/2/profi-site/115.jpg)
![Профессиональный сайт *](http://demiart.ru/tutorials/2/profi-site/116.jpg)
Готово!
Полный размер