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





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

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


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

Подсказка

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

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

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



Сайт-портфолио Instagram фотографа


Ресурсы урока:


Горы

Шрифт «Kaushan Script»

Шрифт «Lato»

Социальные иконки

Фотографии на сайтах Unsplash и Refe

Подготовка документа



Шаг 1


Создайте новый документ в Фотошопе (Ctrl + N) с такими параметрами:

Сайт-портфолио Instagram фотографа


Сайт-портфолио Instagram фотографа


Шаг 2


Давайте разграничим холст. В этом нам помогут направляющие (Просмотр > Новая направляющая) (View > New Guide). Давайте оставим ширину в 1000 пикселей для холста. Создайте вертикальные направляющие на отметках 100, 600 и 1100 пикселей.

Сайт-портфолио Instagram фотографа


Шаг 3


Чтобы сохранять порядок на панели слоёв, нужно группировать слои и давать каждому слою и группе какое-нибудь понятно имя. Давайте создадим три группы «Header», «Photos» и «Contact».

Сайт-портфолио Instagram фотографа


Шапка сайта


Шапка сайта (Header) играет очень важную роль. От нее зависит первое впечатление посетителя. В нашем случае я решил вставить фотографию красивых гор, которая будет передавать атмосферу приключений.

Шаг 1


Внутри группы «Header» инструментом Прямоугольник (Rectangle Tool) создайте прямоугольник любого цвета размером 1200х600 пикселей в верхней части холста. Затем вставьте фотографию гор в верхнюю часть холста. Для изменения размера используйте режим Свободное трансформирование (Free Transform). Создайте обтравочную маску для слоя с горами (Ctrl + Alt + G), чтобы горы не выходили за пределы созданного прямоугольника (фона шапки).

Сайт-портфолио Instagram фотографа


Шаг 2


Создайте новый слой «Shadow» (Create New Layer) над слоем гор. Создайте обтравочную маску (Ctrl + Alt + G). Выберите инструмент Градиент (Gradient Tool): от чёрного к прозрачному. Протяните градиент от нижнего края фотографии гор к середине. Уменьшите непрозрачность до 40%.

Сайт-портфолио Instagram фотографа

Сайт-портфолио Instagram фотографа


Таким способом можно затемнить слишком яркие изображения, а затем добавить белый текст в верхнюю часть.

Шаг 3


Давайте добавим больше цвета. Создайте новый слой «Gradient» и выберите инструмент Градиент (Gradient Tool): #37056b - #ff01fc. Протяните линейный градиент из верхнего левого угла к правому нижнему. Уменьшите непрозрачность слоя градиента до 20%.

Сайт-портфолио Instagram фотографа


Шаг 4


Выберите инструмент Горизонтальный текст (Horizontal Type Tool) и напишите заголовок портфолио, например, своё имя или ник. Я использовал шрифт «Kaushan Script» размером 21 пиксель. Выровняйте заголовок по левой направляющей и опустите его на 50 пикселей от верхнего края холста.

Сайт-портфолио Instagram фотографа


Шаг 5


Вставьте социальные иконки и расположите их в правом верхнем углу, выровняйте по правой направляющей. Примените к ним стиль Наложение цвета (Layer Style – Color Overlay).

Сайт-портфолио Instagram фотографа


Заголовок и иконки должны быть на одном уровне.

Сайт-портфолио Instagram фотографа


Шаг 6


Выберите текстовый инструментом и шрифтом «Lato (Black) » размером 36 пикселей напишите «HELLO! I’M JONATHAN». На отдельной строке добавьте немного информации о себе, например, «I love to travel all around the world and design beautiful things». Используйте шрифт «Lato (Regular) » размером 16 пикселей.

Сайт-портфолио Instagram фотографа


Секция для фотографий


В этой области будут размещены фотографии с Instagram, чтобы показать примеры своих работ.

Шаг 1


Инструментом Прямоугольник (Rectangle Tool) создайте прямоугольник размером 1200х800 пикселей цветом #eeeeee. Это будет фоном для участка фотограий.

Сайт-портфолио Instagram фотографа


Шаг 2


Напишите заголовок «LATEST PHOTOS» шрифтом «Lato (Bold) » размером 12 пикселей цветом #9b9b9b. Отступ от изображения гор должен быть равен 80 пикселям.

Сайт-портфолио Instagram фотографа


Шаг 3


Создайте новую группу «Photo». Я решил ставить 4 фотографии в один ряд. Ширина нашего сайта – 1000 пикселей, поэтому нужно разделить её на 4 части по 250 пикселей. Но между фотографиями тоже должны быть отступы, скажем, в 20 пикселей. Поэтому расчёт будет таким: (1000-60) /4 = 235 пикселей.

Выберите инструмент Прямоугольник (Rectangle Tool) и создайте квадрат размером 235х235 пикселей. Поверх него вставьте фотографию с Instagram и создайте обтравочную маску (Ctrl + Alt + G).

Сайт-портфолио Instagram фотографа


Шаг 4


Теперь нужно добавить количество лайков и описание. Создайте новый слой «Shadow» над фотографией. У этого слоя должна быть отбравочная маска. Инструментом Градиент (Gradient Tool) затемните нижнюю часть фотографии. Уменьшите непрозрачность слоя до 60%.

Сайт-портфолио Instagram фотографа


Напишите количество лайков шрифтом «Montserrat» размером 13 пикселей на самой фотографии. Отступ от нижнего и левого края – 15 пикселей.

Сайт-портфолио Instagram фотографа


Под фотографией создайте белый прямоугольник. Напишите на нём хэш-теги, дату и название снимка. Шрифт «Montserrat» размером 12 пикселей. Отступ от краёв тоже 15 пикселей.

Сайт-портфолио Instagram фотографа


Шаг 5


Теперь Вам нужно создать несколько копий группы с фотографией и просто изменить их.

Сайт-портфолио Instagram фотографа


Контактная информация



Шаг 1


Под секцией фотографий напишите «GET IN TOUCH» шрифтом «Lato (Black) » размером 36 пикселей цветом #565d64. Добавьте пару строчек о своей деятельности шрифом «Lato (Regular) » размером 16 пикселей.

Сайт-портфолио Instagram фотографа


Шаг 2


Создайте тёмный прямоугольник и подпишите его, чтобы получилась кнопка.

Сайт-портфолио Instagram фотографа


Шаг 3


Проведите 1-пиксельную горизонтальную линию, чтобы отделить футер. Его ширина должна быть равна 90 пикселям. Шрифтом «Lato (Bold) » размером 12 пикселей цветом #9b9b9b напишите информацию о правах.

Сайт-портфолио Instagram фотографа


Мобильная версия



Шаг 1


Создайте новый документ размером 320х2100 пикселей. Создайте 3 вертикальные направляющие на отметках 20, 150 и 300 пикселей. Три папки из основного документа перенесите в новый.

Сайт-портфолио Instagram фотографа


Шаг 2


Раскройте группу «Header» и расположите заголовок и социальные иконки, как показано ниже.

Сайт-портфолио Instagram фотографа


Шаг 3


Уменьшите текст и расположите его так:

Сайт-портфолио Instagram фотографа


Шаг 4


В группе «LATEST PHOTOS» уменьшите ширину фонового прямоугольника до 280 пикселей. Измените размер фотографий и расположите их всех друг над другом.

Сайт-портфолио Instagram фотографа


Шаг 5


Увеличьте высоту фонового прямоугольника, так как мобильная версия получится длиннее, чем веб-версия.

Сайт-портфолио Instagram фотографа


Шаг 6


Также поправьте нижнюю часть сайта. Вам всего лишь нужно изменить количество строк.

Сайт-портфолио Instagram фотографа


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

Сайт-портфолио Instagram фотографа

Сайт-портфолио Instagram фотографа



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

написал : Макс123321313

Здравствуйте.
А подскажите откуда взять эту женскую руку с телефоном пожалуйста

---------------


написал : positive11

Макс123321313, автор урока не приложил эту фотографию, но Вы можете найти что-нибудь подобное в Интернете.

---------------


написал : andreevpix

написал : positive11

andreevpix, хорошо получилось. Покажем Вашу работу в нашей группе VK

---------------


написал : Egor_Spb

Добрый день!
Спасибо за классный урок.
По-больше бы уроков по веб-дизайну 64в современном стиле.

---------------


написал : positive11

Egor_Spb, очень рады были стараться. Мы обязательно обратим вниание на категорию веб-дизайна. Было бы здорово, если Вы смогли показать примерные работы того, что Вас интересует.

---------------


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

Ваше Имя

Ваш E-mail

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

Введите код: