Данный урок из категории уроки Web дизайна. Сегодня мы будем создавать простой, но элегантный дизайн сайта "Фриланс - моя жизнь". Предлагаем использовать его, как личное резюме.

Сложность: средняя

Навыки для "прокачки"
- создание структуры сайта
- работа с направляющими
- создание элементов и кнопок

Для повторения урока Вы можете использовать любую цветовую гамму, а также иконки и элементы. Ресурсы используемые в данном уроке :

Шрифт 1
Шрифт 2
Логотип
Иконки

Итак, давайте начнем. Для начала создадим новый документ размером 1200 * 1295.
Цвет фона для вашего документа  # 2f1901, используйте  инструмент   Paint bucket tool = Заливка, чтобы заполнить документ цветом . Далее мы будем добавлять немного текстуры на задний план. Перейдите в  Filter > Add Noise = Фильтр > Добавить шум  и используйте значения как показано на картинке ниже:



Создание заголовка.

Устоновите шрифты, которые Вы скачали в начале урока. Выберите инструмент Text tool = Текст, цвет текста белый, размер 94pt. Место / 27px с левой стороны нашего документа (в центре) и 41px сверху. Далее примените следующий стиль слоя Gradient Overlay = Наложение градиента.



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



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





Вот что у Вас должно получиться:



Создание меню.

Выберите инструмент Rounded rectangle tool = Прямоугольник со скругленными углами, цвет белый ( т.к далее будем применять стили ) и радиус 45px. Сделаем наш прямоугольник размерами 1150 * 60. Теперь мы создадим внешнюю поддержку к нашему округленному прямоугольнику. Выберите только схему нашего  прямоугольника. Чтобы сделать это, Вы удерживаете CTRL и щелкаете по уменьшенному изображению округленного слоя прямоугольника. Теперь создайте новый слой. Ваше выделение еще активно, Перейдите в Select > Modify > Expand = Выделение > Модификация >  Расширить и поставьте настройки  10px. Теперь, заполните свой прямоугольник черным цветом и понизьте Opacity > Непрозрачность на 30 %.



Теперь мы создадим 4 квадрата, вы должны сделать это очень точно. Квадраты должны иметь следующие цвета.
4 квадрата Размер: 312px широкий (каждый другого цвета)
Квадрат 1: # 14d500
Квадрат 2: # ff0000
Квадрат 3: # 009abb
Квадрат 4: # ff8400

Сделайте их поверх вашего прямоугольника.
Далее будем использовать тот же метод. Убедитесь, что вы находитесь на слое с разноцветными квадратиками, зажмите Ctrl и щелчок правой кнопкой мышки по миниатюре слоя, с нашим белым прямоугольником. У Вас появиться выделение, теперь выберите Select Inverse = Инверсия, затем нажмите Delete, должно получиться следующее :



Пришло время добавить стиль слоя нашим квадратикам. Наложение градиента.

Зеленый:



Красный:


Синий:



Оранжевый:



Создание кружков.

Теперь мы начнем создавать наши круги. Этот процесс является простым и легким.
Используя инструмент Circle shape tool = Произвольная фигура, нарисуйте небольшой круг.
Теперь создайте еще один круг, и поместите его внутри Вашего предыдущего слоя. Убедитесь, что круги в самом центре вашего зеленого квадрата.
У Вас должно быть что-то вроде этого:



Теперь, настало время для создания нашей линии. Выберите инструмент Create our line = Линия и нарисуйте линию 75 пикселей высотой и прикрепите ее к центру круга.



Создайте новую группу, нажав на значок папки в палитре слоев. Назовите группу Зеленые квадратики. Перетащите два слоя кругов  и слой линии в группу. Создайте дубликат группы и переименуйте ее в Красные квадратики. Выберите группу слоев и зайдите в Edit > Transform > Flip Vertical = Редактирование > Трансформирование > Отразить по вертикали. Теперь перетащите целую группу и поместите ее в центр нашего Красного квадратика.
Дублируйте обе группы (переименуйте их в соответствующие цвета) и перетащите их на квадратики.

Вот что должно получиться.



Теперь добавьте в меню то, что Вам хочется, используя шрифты Qlassik.



Давайте создадим наши детали между главными заголовками и информацией. Чтобы создать нашу промежуточную деталь активируйте инструмент Create our line = Линия  и вытяните линию, длинной 1135px , цвет белый  с 30 % Opacity = Непрозрачность. Rasterize = Растрируйте слой,  дублируйте его и перетащите линию клавишами стрелок.

Содержание.

Теперь мы приступим к созданию контента. Первое, что мы будем делать, это используем набор иконок которое скачали ранее. Нам нужен значок Мастер, в папке 128 128. Перенесите мастера на документ и разместите его, размером 27px с левой стороны документа, и 58 пикселей с вашей второй линией.

Добавьте картинке следующие стили:


Теперь добавим содержимое заголовка в документ. Мы будем использовать шрифт Терции, цвет белый, и размер 26pt. Отступите 20px от вашего мастера и напишите, что захотите. Автор  написал "Создание мира дизайна Волшебным", потому, что он подходит к нашему мастеру. Теперь, снизу, с использованием любых шрифтов вы можете написать, содержимое  о том, как сделать мир дизайна волшебным. Держите его расположение в  20px от вашего мастера и 30px от содержания текста заголовка.

Теперь используйте  значок, найденный здесь (http://www.custompowerdesigns.com/downloads/gallery.png) , и поместите его 27px с правой стороны документа и 85px из нижней части вашего последнего содержания. Используйте тот же процесс, чтобы написать содержание, как мы делали выше, только по правому краю текста.
Используйте тот же процесс, как и выше, только расстояние этого (http://www.custompowerdesigns.com/downloads/icontwo.png) значка 27px с левой стороны, и выравниванием по левому краю.

Вот что должно получиться:



Медиа.

Для начала нужно создать еще одну промежуточную деталь как ту, которую мы создали ранее. Вы можете либо в таком же порядке создать ее еще раз, или, чтобы сэкономить время, просто дублировать те слои и перетащите их вниз. Место / 70px из нижней  части содержимого.
Теперь, будем использовать иконку Twitter, которая находится в наших ресурсах выше. Вам необходимо открыть ее и удалить белый фон. Для этого вы можете использовать Magic Wand Tool = Волшебная палочка.

Измените размер  значка до 110 * 110. Теперь перетащите его на наш документ в пространстве  152 px слева от нашего документа и 20px из нашей второй распорной детали. Установите режим смешивания на Overlay = Перекрытие. Дублируйте иконку Twitter, чтобы она лучше смотрелась.
Теперь используя шрифт Терции , напишите текст белым цветом размер 21pt,  на своей иконке Twitter, затем дублируйте этот слой.
Сделайте то же самое с DeviantART логотипом .  Используте тот же процесс  (только расположите его справа, а не слева).

И наконец ваш конечный Результат!



Вот, чем так хороши уроки Web дизайна! До встречи!