Ещё больше уроков в нашей группе Вконтакте!





сортировать посты по: Рейтингу | Посещаемости | Комментируемые

Введите свои исправления:


Имя:
Комментарий:

Подсказка

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

*Ваши изменения будут отправлены администрации на модерирование.
*Поля "Имя" и "Комментарий" не обязательны.

Web-резюме

не нравится   +14   нравится

Конечный результат:


Web-резюме


Загрузите эти иконки:

Набор иконок Wefunction
Набор иконок Aquacticus Social


Начнём
Создайте новый документ размером 1200х1600 пикселей с белым фоном. Ширина самого листа будет 850 пикселей. Чтобы разметить область, отведём две направляющие на отметках 175 и 1025 пикселей.


Web-резюме

Web-резюме

Web-резюме


Создание фона
Установите цвет заливки - #132e47, цвет фона - #132434 и выберите инструмент Градиент (Gradient Tool), стиль – зеркальный.


Web-резюме

Web-резюме


Начните заливку с точки ниже верхней границы на 400 пикселей, и отведите её на половину вниз. Потом примените фильтр Добавить шум (Add Noise Filter):


Web-резюме


Инструментом Прямоугольная область (Rectangular Marquee Tool) создайте выделение сверху высотой 300 пикселей.


Web-резюме


Создайте новый слой над фоновым и залейте выделение цветом #05111b. Потом к этому слою тоже примените стиль Добавить шум (Add Noise Filter).


Web-резюме


Создайте ещё один слой и инструментом Прямоугольная область (Rectangular Marquee Tool) создайте две 1-пиксельные линии друг на друге. Цвет верхней - #000000, нижней - #1d456b. Линии должны быть на всю ширину холста и располагаться прямо под прямоугольником с шумом.


Web-резюме

Web-резюме


Создание внешнего прямоугольника
Инструментом Прямоугольная область (Rectangular Marquee Tool) создайте выделение шириной 850 пикселей в пределах направляющих. Оно должно отступать от верхней границы на 100 пикселей. Высоту выделения определите сами (в зависимости от количества контента).


Web-резюме


Создайте новый слой (Create New Layer) и залейте выделение белым цветом. Перейдите в меню Стилей слоя (Layer Style - Blending Options) и настройте так:

Параметры наложения:


Web-резюме


Отбрасывание тени (Режим – Умножение):


Web-резюме


Обводка (Положение – Снаружи, Режим – Нормальный, Тип обводки – Цвет):


Web-резюме

Web-резюме


Создание прямоугольника контента
Сделайте выделение слоя с прямоугольником, который создали в предыдущем шаге (Ctrl+Click), потом примените Сжатие (Modify – Contract) со значением 20 пикселей.


Web-резюме


Создайте новый слой (Create New Layer) и залейте выделение белым цветом. Примените такие стили слоя:

Наложение градиента (Режим – Нормальный, Стиль – Линейный):


Web-резюме


Обводка (Положение – Снаружи, Режим – Нормальный, Тип обводки – Цвет):


Web-резюме

Web-резюме


Заголовок резюме
Текстовым инструментом напишите заголовок, используя шрифт “Myriad Pro”. Потом примените к тексту стиль Отбрасывание тени (Layer Style - Drop Shadow):


Web-резюме


Малая навигация
Из набора “Wefunction” вставьте иконки справа от заголовка.


Web-резюме


Подпишите эти иконки снизу и примените к тексту стиль Отбрасывание тени (Layer Style - Drop Shadow):


Web-резюме

Web-резюме


Заканчиваем с шапкой
Под заголовком напишите небольшую статью о себе.


Web-резюме


Инструментом Прямоугольная область (Rectangular Marquee Tool) создайте две 1-пиксельные линии друг над другом. Установите Режим наложения этих линий – Перекрытие (Blending Mode – Overlay):


Web-резюме

Web-резюме


Добавление контента
Под разделительной линией добавьте первый раздел информации о себе.


Web-резюме


Потом добавьте синий круг из набора иконок “Wefunction” и рядом текст о ваших навыках (в зависимости от раздела).


Web-резюме


Потом допишите больше информации.


Web-резюме


Продолжаем заполнять


Web-резюме

Web-резюме

Web-резюме


Социальные сети
Создайте новый заголовок “My Social Network” и добавьте иконки из набора “Aquacticus Social.


Web-резюме


Финальный результат:


Web-резюме




Ссылка на источник урока

Добавление комментария

Ваше Имя

Ваш E-mail

Код:Включите эту картинку для отображения кода безопасности
обновить код

Введите код: