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





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

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


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

Подсказка

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

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

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



Фотодневник путешественника


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


Фотография тигра

Фотография моря

Шрифт «PT SERIF»

Шрифт «PT SANS»

Иконка SHARE

Иконка Retweet

Иконка Like

Иконка YouTube


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



Шаг 1


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

Фотодневник путешественника


Шаг 2


Нам нужно создать направляющие, чтобы разграничить область холста. Ширина страницы сайта будет равна 1000 пикселям. Чтобы создать направляющую, перейдите в меню Просмотр > Новая направляющая (View > New Guide) и создайте направляющие на отметках 100px, 600px, 720px и 1100px.

Фотодневник путешественника


Шапка сайта



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

Шаг 1


Создайте новую группу «Header».

Фотодневник путешественника


Шаг 2


Навигацию мы расположим в самом верху, чтобы люди смогли без проблем переходить по страницам сайта. Выберите инструмент Горизонтальный текст (Horizontal Type Tool), выберите шрифт «PT Sans» размером 13 пикселей и напишите название сайта цветом #323232. Область рядом с заголовком подойдёт для логотипа. Если у Вас есть свой логотип, вставьте его туда же. Откройте панель Символ (Окно > Символ) (Window > Character) и увеличьте Трэкинг (Tracking) до 200. Над заголовком нужно оставить немного места. Расположите его на расстоянии 25 пикселей от верхнего края.

Фотодневник путешественника


Шаг 3


Добавьте другие ссылки на правую сторону. Активную страницу выделите цветом #666666.

Фотодневник путешественника


Шаг 4


Внутри группы «Header» инструментом Прямоугольник (Rectangle Tool) создайте прямоугольник любого цвета размером 1200х640 пикселей. Расположите его на расстоянии 25 пикселей от верхней навигации.

Фотодневник путешественника


Шаг 5


Вставьте фотографию моря в наш документ и расположите поверх прямоугольника. Создайте обтравочную маску (Ctrl + Alt + G), чтобы ограничить фотографию. Уменьшите непрозрачность фотографии до 75%. Это нужно для того, чтобы текст, который мы добавим текст на фотографию, был виден. Используйте режим Свободное трансформирование (Free Transform) для изменения размера.

Фотодневник путешественника


Шаг 6


На фотографии напишите текст приветствия и небольшую информацию о сайте. Используйте шрифт «PT Sans» размером 52 пикселя для приветствия. Затем уменьшите размер шрифта до 28 пикселей и напишите пару строк о сайте.

Фотодневник путешественника


Шаг 7


Инструментом Прямоугольник (Rectangle Tool) создайте кнопку белого цвета и напишите на ней «BROWSE PHOTOS».

Фотодневник путешественника


Текстовый блок



Сервис Tumblr, в стиле которого мы делаем на сайт, имеет много разных типов новостей для публикации.

Фотодневник путешественника


В этой части урока мы создадим четыре варианта новостей: текстовые, фото, видео и цитаты.

Шаг 1


Начнём с текстовой новости. Создайте новую группу «Text Unit» и инструментом Прямоугольник (Rectangle Tool) определите область новости цветом #f8f7f6 размером 1000х284 пикселя. Текстовым инструментом напишите заголовок новости шрифтом «PT Sans (Bold) » размером 32 пикселя. Расположите заголовок на расстоянии 50 пикселей от верхнего и левого края.

Фотодневник путешественника


Шаг 2


Выберите шрифт «PT Serif» размером 15 пикселей и напишите текст новости цветом #444444. Увеличьте высоту строки до 26 пикселей, чтобы улучшить читаемость текста.

Фотодневник путешественника


Шаг 3


Под текстом новости напишите дату публикации и хэштеги цветом #666666. Мы используем более светлый цвет, чтобы показать, что данная информация менее значимая.

Фотодневник путешественника


Шаг 4


Сейчас нам понадобятся три иконки: share, retweet и heart. Создайте новую группу «Icons» и вставьте в неё три иконки. Расположите их справа от хэштегов. Уменьшите непрозрачность группы до 30%, чтобы иконки не отличались по цвету от остальной информации.

Фотодневник путешественника


Фото блок



Шаг 1


Создайте копию группы «Text Unit» и назовите её «Photo Unit». Опустите её на 60 пикселей ниже от текстового блока. Удалите содержимое и измените заголовок, дату и теги. Активируйте режим Свободное трансформирование (Free Transform) и измените высоту блока так, чтобы сверху и снизу было по 50 пикселей свободного места.

Фотодневник путешественника


Шаг 2


Создайте копию блока и измените размер до 1000х510 пикселей. Вставьте фотографию тигра поверх этого блока и создайте обтравочную маску.

Фотодневник путешественника


Видео блок



Шаг 1


Создайте копию группы «Photo Unit» и назовите её «Video Unit». Опустите её на 60 пикселей ниже предыдущего блока. Измените заголовок, изображение, дату и теги. Поверх изображения расположите иконку YouTube.

Фотодневник путешественника


Блок с цитатой



Создайте копию группы «Text Unit» и опустите её под блок с видео. Удалите заголовок и текст новости. Шрифтом «PT Serif (Italic) » размером 35 пикселей цветом #323232 напишите цитату. Оставьте по 50 пикселей вокруг цитаты.

Фотодневник путешественника


Создайте копию блока с фотографией и опустите её под блок с цитатой, чтобы наш сайт был больше похож на Tumblr.

Остальные новости сайта выполните в том же стиле. Как Вы поняли, меняются только основные элементы: заголовок, текст, фотография или видео.

Футер



Сейчас мы добавим кнопку LOAD MORE и информацию о правах.

Шаг 1


Сверните все группы на панели слоёв. Создайте новую группу «Footer». Внутри группы «Header» найдите кнопку Browse Photos. Создайте копию этого прямоугольника и перенесите её в группу «Footer». Измените цвет кнопки на тот же, который использовался для фона фото блока.

Фотодневник путешественника


Шаг 2


Шрифтом «PT Serif» размером 15 пикселей цветом #444444 напишите информацию о правах. Соблюдайте одинаковое расстояние между блоками сайта, чтобы сохранять всё в порядке. В нашем случае расстояние между последним постом, кнопкой LOAD MORE и информацией о правах равно 60 пикселям.

Фотодневник путешественника


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



Фотодневник путешественника



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

написал : Polina-1092

ypoк был очень интересным, но копия блока с фотографией не поместилась(
так как no этомy ypoкy вnеpвые npoбовала делать дизайн может что-то не так рассчитала,но где могла бы быть ошибка когда и расстояния и картинки yказаних pазмеpoв т.т

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


написал : ELLY

Спасибо за урок. Познавательно и полезно.

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


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

Ваше Имя

Ваш E-mail

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

Введите код: