Ваше собственное портфолио-веб-сайт

Здесь я собираюсь показать вам, как сделать оригинальный дизайн сайта, где вы можете разместить своё портфолио.
Во-первых, вы должны создать новый документ, в котором можно сделать этот веб-сайт. Для этого урока я буду использовать размер 1000?700 пикселей с разрешением по умолчанию 72. Затем вам нужно будет найти шаблон ,добавить на заднем фоне. Я нашел это . Также вы можете использовать ваши собственные шаблоны. Откройте файл и примените Редактирование Edit> Определить Узор Define Pattern ,чтобы сохранить это изображение как шаблон, после чего вернуться в наш основной документ и использовать Ведро Paint Bucket Tool ( использовать Образец-Узор Режим вместо Передний план).

Затем нажмите Ctrl + Shift + U, обесцвечивание

Применить Наложение цвета Color Overlay стиля слоя в слой фона.

Смотрите результат ниже:

Ок, мы закончили с фоном. Переход к следующему шагу. Создаём окно для содержания. Создайте новый слой, затем выберите Прямоугольная Область Rectangular Marquee Tool сделать выбор как на моих фотографиях ниже, и заполнить ее с цветом # f4f4f4.

Удалите выделение Ctrl + D. Делаем отверстия как в блокноте. Используйте Овальную Область Elliptical Marquee Tool .Сделать как на моих фотографиях ниже, и нажмите Удалить в выбранной области.

Держать ЛКМ и перемещая выделенную область жмём Удалить снова. Делать то же самое, пока не получится,как у меня.

Удалите выделение Ctrl + D и перейти к следующему шагу. Время делать листу области на трех основных частей: веб-сайтов, логотипов и иконок. Выберите Линия Line Tool и линия около 4 пикселей, а затем вытянуть соответствие с черным цветом. После этого сделать непрозрачность около 15% для этого слоя.

Добавить две линии побольше.(чтобы линия была прямая,вести её с зажатым Shift)

Время, чтобы добавить ярлыки. Создайте новый слой и создайте выделение с помощью Прямоугольная область Rectangular Marquee Tool. Заполните выбранную область цветом # e04e21.

Затем выберите Прямолинейное Лассо Polygonal Lasso Tool Чтобы создать еще одно выделение, как показано на моей картине ниже.

Затем с помощью Затемнителя Burn Tool (Brush: PX 45, диапозон: Midtones, Выдержка: 30%), чтобы добавить темные пятна в выбранной области этикетки.

Затем с помощью Осветлителя Dodge Tool (Brush: PX 45, диапозон: Midtones, Выдержка: 30%) довести эту форму метку тома.

После этого инвертировать выделение Ctrl + Shift + I и сделать работу немного больше.

Удалите выделение Ctrl + D и нажмите Ctrl + T чтобы вращать этикетку, а затем применить Редактирование-Трансформирование-Деформация Edit> Transform> Warp и поискажать.

Применить Тень Drop Shadow на текущий стиль слоя:

Затем щелкните правой кнопкой мыши на слое эскизы панели и выберите Создание слоя.

Жмём Ctrl+T и крутим как надо:

Затем я хотел бы добавить заголовок. Выберите Текст Horizontal Type Tool и впишите названия ярлыка.

Я использовал Bernhard Modern шрифт как шрифт выбора. Теперь поворот текста с помощью Ctrl + T.

Первая этикетка готова. Добавить еще две метки тем же способом.

Переходим к следующему шагу. Нам необходимо добавить содержимое. Я пошел к Google Images . Вы можете скачать его с здесь . Откройте изображение ,примените Рамку Crop Tool:

Кадрировать и снизить непрозрачность.

Применить Внутреннее Свечение Inner Glow стиля слоя к этому слою.

Результат должен быть следующим:

Теперь мне нужно добавить имя проекта с кратким описанием. Выберите Текст Horizontal Type Tool снова и вписать некий текст в несколько строк, используя цвет #45454 и Tahoma шрифтом.

Добавить больше содержания в тот же путь. Логотип фотографии можно загрузить по адресу здесь и значок фотографии можно загрузить по адресу здесь.
После чего перейти к следующему шагу. Я хотел бы вписать логотип с нашим портфолио. Выберите Horizontal Type Tool усиления и выписать текст с помощью цвета # b2d763 и Bernhard Modern шрифт снова.

После этого применяются Тень Drop Shadow и Наложение Градиента Gradient Overlay в стилях слоя на слой с текстом.


Вы можете увидеть результат на рисунке ниже:

И последнее , что мы должны добавить, контакты в нижней части сайта.

Я использовал Tahoma шрифт снова и выбранный цвет текста как # f4f4f4 и # d5ea9f. Вот получился сайт-визитка.

Перевод: swaego

