Источник данных о погоде: Минск погода на 7 дней
Мы находимся:
Беларусь, Минск
Связь с редакцией. Email:
883388a@gmail.com
Беларусь, Минск
883388a@gmail.com
Создайте новый документ в Фотошопе (Ctrl + N) с такими параметрами:
Нам нужно создать направляющие, чтобы разграничить область холста. Ширина страницы сайта будет равна 1000 пикселям. Чтобы создать направляющую, перейдите в меню Просмотр > Новая направляющая (View > New Guide) и создайте направляющие на отметках 100px, 600px, 720px и 1100px.
Шапка сайта в наши дни играет очень важную роль. От неё зависит, останется ли человек на сайте, и вернётся ли снова. Для фотодневника путешественника мы вставим в шапку красивую фотографию морского берега, чтобы создать настроение приключений и подсознательно передать посетителям информацию о том, что это сайт о путешествиях.
Создайте новую группу «Header».
Навигацию мы расположим в самом верху, чтобы люди смогли без проблем переходить по страницам сайта. Выберите инструмент Горизонтальный текст (Horizontal Type Tool), выберите шрифт «PT Sans» размером 13 пикселей и напишите название сайта цветом #323232. Область рядом с заголовком подойдёт для логотипа. Если у Вас есть свой логотип, вставьте его туда же. Откройте панель Символ (Окно > Символ) (Window > Character) и увеличьте Трэкинг (Tracking) до 200. Над заголовком нужно оставить немного места. Расположите его на расстоянии 25 пикселей от верхнего края.
Добавьте другие ссылки на правую сторону. Активную страницу выделите цветом #666666.
Внутри группы «Header» инструментом Прямоугольник (Rectangle Tool) создайте прямоугольник любого цвета размером 1200х640 пикселей. Расположите его на расстоянии 25 пикселей от верхней навигации.
Вставьте фотографию моря в наш документ и расположите поверх прямоугольника. Создайте обтравочную маску (Ctrl + Alt + G), чтобы ограничить фотографию. Уменьшите непрозрачность фотографии до 75%. Это нужно для того, чтобы текст, который мы добавим текст на фотографию, был виден. Используйте режим Свободное трансформирование (Free Transform) для изменения размера.
На фотографии напишите текст приветствия и небольшую информацию о сайте. Используйте шрифт «PT Sans» размером 52 пикселя для приветствия. Затем уменьшите размер шрифта до 28 пикселей и напишите пару строк о сайте.
Инструментом Прямоугольник (Rectangle Tool) создайте кнопку белого цвета и напишите на ней «BROWSE PHOTOS».
Сервис Tumblr, в стиле которого мы делаем на сайт, имеет много разных типов новостей для публикации.
В этой части урока мы создадим четыре варианта новостей: текстовые, фото, видео и цитаты.
Начнём с текстовой новости. Создайте новую группу «Text Unit» и инструментом Прямоугольник (Rectangle Tool) определите область новости цветом #f8f7f6 размером 1000х284 пикселя. Текстовым инструментом напишите заголовок новости шрифтом «PT Sans (Bold) » размером 32 пикселя. Расположите заголовок на расстоянии 50 пикселей от верхнего и левого края.
Выберите шрифт «PT Serif» размером 15 пикселей и напишите текст новости цветом #444444. Увеличьте высоту строки до 26 пикселей, чтобы улучшить читаемость текста.
Под текстом новости напишите дату публикации и хэштеги цветом #666666. Мы используем более светлый цвет, чтобы показать, что данная информация менее значимая.
Сейчас нам понадобятся три иконки: share, retweet и heart. Создайте новую группу «Icons» и вставьте в неё три иконки. Расположите их справа от хэштегов. Уменьшите непрозрачность группы до 30%, чтобы иконки не отличались по цвету от остальной информации.
Создайте копию группы «Text Unit» и назовите её «Photo Unit». Опустите её на 60 пикселей ниже от текстового блока. Удалите содержимое и измените заголовок, дату и теги. Активируйте режим Свободное трансформирование (Free Transform) и измените высоту блока так, чтобы сверху и снизу было по 50 пикселей свободного места.
Создайте копию блока и измените размер до 1000х510 пикселей. Вставьте фотографию тигра поверх этого блока и создайте обтравочную маску.
Создайте копию группы «Photo Unit» и назовите её «Video Unit». Опустите её на 60 пикселей ниже предыдущего блока. Измените заголовок, изображение, дату и теги. Поверх изображения расположите иконку YouTube.
Создайте копию группы «Text Unit» и опустите её под блок с видео. Удалите заголовок и текст новости. Шрифтом «PT Serif (Italic) » размером 35 пикселей цветом #323232 напишите цитату. Оставьте по 50 пикселей вокруг цитаты.
Создайте копию блока с фотографией и опустите её под блок с цитатой, чтобы наш сайт был больше похож на Tumblr.
Остальные новости сайта выполните в том же стиле. Как Вы поняли, меняются только основные элементы: заголовок, текст, фотография или видео.
Сейчас мы добавим кнопку LOAD MORE и информацию о правах.
Сверните все группы на панели слоёв. Создайте новую группу «Footer». Внутри группы «Header» найдите кнопку Browse Photos. Создайте копию этого прямоугольника и перенесите её в группу «Footer». Измените цвет кнопки на тот же, который использовался для фона фото блока.
Шрифтом «PT Serif» размером 15 пикселей цветом #444444 напишите информацию о правах. Соблюдайте одинаковое расстояние между блоками сайта, чтобы сохранять всё в порядке. В нашем случае расстояние между последним постом, кнопкой LOAD MORE и информацией о правах равно 60 пикселям.
Предлагаем посмотреть другие страницы сайта:
← Текст в космосе 3D | Чёрно-белый рисунок в Фотошопе →
