От автора: в данном уроке мы создадим с нуля макет фото-портфолио. Макет не будет отличаться пестростью красок и колоссальным наличием графики. Главное здесь – лаконичность, нужно правильно подать то, ради чего сайт и создаётся: демонстрацию портфолио.
В ходе урока мы научимся разбивать наш макет направлящими, работать с различным градиентом, применять эффекты свечения, работать с текстом и полезным инструментарием Adobe Photoshop.
Если Вы готовы, то приступим!
План урока
1. Создание документа, разметка направляющими.
2. Работа с фоном, градиентом.
3. Создание логотипа.
4. Работа с шапкой.
5. Работа с основной областью, оформление слайдера и каталогов.
6. Работа с футером.
Детали учебника
Программа: Adobe Photoshop
Версия: CS 4
Примерное время выполнения: 1 час
Сложность: средняя
Скриншоты урока в хорошем качестве представлены в текстовых (pdf, doc, docx) версиях урока, которые Вы сможете скачать по ссылке выше.
Шаг 1. Создание документа
Создаём новый файл размером 1280 точек в ширину на 1400 в высоту. На деле, сайт будет работать от разрешений старых мониторов (1024х768) до разрешений 1280х720 и выше.
Шаг 2. Отсекаем основную часть
Очень важно изначально продумать совместимость сайта с различной графической конфигурацией конечного пользователя. Стоит учесть и наличие полос прокрутки на странице, частично отсекающих дизайн. С учетом этого, поставим первые направляющие(Просмотр – Новая направляющая):
Чтобы не путаться, будем добавлять направляющие по мере необходимости.
Также, стоит проверить настройки (Редактирование – Установки – Единицы измерения и линейки). Изначальная настройка для пункта Линейки – миллиметры. Нам же нужно пункты.
Шаг 3. Работаем с фоном
Для начала, зальём фон черным цветом, чтобы подчеркнуть будущие фотографии и не отвлекать внимание пользователя. (Слой — Новый слой-заливка — Цвет), соглашаемся, цвет RGB: 000
Далее, выделим нашу будущую шапку сайта. Устанавливаем основной цвет #cb0060
Создаём вертикальную направляющую посередине документа (640 пт). Она нужна, чтобы ровно применить градиент в следующем этапе урока.
Итак, выбираем инструмент Градиент (горячая клавиша G). В настройке инструмента из выпадающего набора выбираем От основного к прозрачному.
Тип градиента: радиальный
Не станем трогать уже имеющийся слой, создадим новый. Теперь, по нашей центровой направляющей, дадим градиент сверху, из-за холста, примерно на треть слоя. Получим такую картину:
Поздравляю, работа с фоном закончена!
Шаг 4. Начало работы с шапкой, создание лаконичного логотипа
Дадим горизонтальные направляющие в 30 пт и 140 пт, это будут границы нашей шапки
Лично я выбрал классические типографские шрифты для логотипа и заголовков на сайте – MS Serif и MS Sans Serif, довольно популярные в использовании веб-дизайнерами. Вы, конечно же, можете поэксперементировать со шрифтами.
Приступаем к логотипу. Для фотографа важно имя, на него мы и дадим акцент.
Создадим текстовый слой с именем фотографа – max diviani. Шрифт MS Serif, размер шрифта – 18, цвет белый. Увеличим отступ между буквами, для этого при редактировании текста нужно вызвать панель символов и абзацев и установить значение трекинга для выделенных символов: 830
Далее, справа снизу укажем род деятельности – photographer, шрифтом MS Sans Serif, размером 12. Трекинг – 25
Разместим то, что у нас вышло, ближе к левому краю шапки, между горизонтальными направляющими
Теперь, следует визуально отделить имя от фамилии. Для этого, сделаем подложку под имя – создаём новый слой, выбираем инструмент Овальная область, и с одновременно зажатыми Shift+Alt, выделяем имя из центра и заливаем черным цветом (инструмент Заливка). Устанавливаем непрозрачность слоя в 18%
Логотип готов!
Шаг 5. Продолжаем работать с шапкой
Я думаю, целесообразно будет установить статус занятости фотографа(Занят/Принимаю заказы/В отпуске и т.д.)
Для этого, создаём текстовый слой, в котором будет отображаться статус и разместим его ближе к правому краю нашей шапки, тем самым уравновесим левую часть. Шрифт для надписи – MS Serif, цвет белый, размер 18, трекинг 150.
Подсветим нашу надпись. Для этого, копируем слой с текстом(в меню слоя Создать дубликат…) и размещаем его в списке под оригиналом. Применяем Фильтр – Размытие – Размытие по Гауссу, соглашаемся на растрирование текста. В настройках фильтра указываем радиус размытия в 5 пикселей.
На этом, пока что, оставим шапку. К ней мы еще вернемся, чтобы гармонично вписать меню и флажки переключения языков.
Шаг 6. Основное фото и отражение
У нас уже есть разметка направляющими для вставки фото из основного каталога фотографа. Я использую фото из своих личных альбомов. Выбираем меню Файл – Поместить… и размещаем наше фото между двумя вертикальными направляющими и нижней направляющей шапки.
Копируем слой с фото. Отзеркаливаем его с помощью меню Редактирование – Трансформирование – Отразить по вертикали. С помощью инструмента Перемещение (горячая клавиша V) размещаем на холсте ровно под оригиналом слоя.
Далее, слегка применяем инструмент Редактирование – Трасформирование – Перспектива
Применяем черный градиент, от основного к прозрачному. Заливаем им отзеркаленный слой — снизу вверх (по центральной вертикальной направляющей!)
Шаг 7. Заголовок для фото
Подсказка: не забывайте время от времени сохранять документ! Желательно, в разные файлы. Это в разы увеличит шансы восстановить макет при зависаниях и вылетах программы!
Создаём горизонтальную направляющую в 205 пунктов. Тем самым, мы отсекли нашу будущую подложку размером 980 на 65.
Создаём новый слой, выделяем Прямоугольной областью образованное направляющими пространство и заливаем выделение черным цветом. Непрозрачность слоя устанавливаем на 40%.
Созадём текстовый слой ближе к левому краю подложки, шрифт MS Serif, размер 30, трекинг 150, цвет белый. Указываем название фотографии
В правой стороне подложки мы укажем некоторые технические данные – название галереи(или фотосессии), в которой лежит фотография, и дату съемки. Шрифт – MS Serif, цвет белый, размер 18, трекинг 140.
Шаг 8. Оформление слайдера
Предусмотрим наличие слайдера на нашем сайте, который будет каждые n секунд менять главную фотографию на следующую в списке. Визуально он будет включать в себя кнопку паузы и две фотографии – прошлую и следующую (видно которые будет на высоких разрешениях)
Для начала, создадим направляющие для уменьшенных копий фотографий(предыдущая-следующая). Фотографии будут идти ровно по центру основной фотографии, сбоку.
Направляющие: 331 и 611 по горизонтали, 110 и 1170 по вертикали(с учетом того, что наши фотографии будут иметь размер 420х280, стандартная классическая пропорция фотографий 3:2)
Осталось разместить работы! Снова же, берем фотографии из личной коллекции(меню Файл — Поместить) и уменьшаем до размеров, отсеченных направляющими(все материалы к уроку прилагаются).
Чтобы боковые фотографии не отвлекали внимание от центральной, установим значение непрозрачности 40%. Вот, что у нас есть на данном этапе урока:
Кнопку паузы нарисовать довольно легко – на новом слое создаём 2 рядомстоящих прямоугольника. Я ввёл размер каждого: 10х34 белого цвета, внутри — прямоугольник черного цвета размером 8х32.(Инструменты Прямоугольная область и Заливка). Это не принципиально, вы можете поэкспериментировать с вашей кнопкой.
Непрозрачность слоя 40%. Размещаем в правой нижней части фотографии
Попытайтесь сами в том же стиле нарисовать кнопку Play!
Шаг 9. Каталоги с фотографиями
Визуально оформим наши каталоги по подобию главного фото. Взяв за размер одной обложки 300х200 пикселей, мы легко уместим их 3 в одном ряду, с учетом отступов в 40 пунктов. На этом основании и сделаем направляющие:
Снова помещаем фотографии на холст, как делали на предыдущих этапах урока(меню Файл — Поместить):
Делаем подложку для наших каталогов. В ширину подложка равна ширине каждого фото, а в высоту – 40 пунктов. После задания новой направляющей у нас уже имеются блоки для подложки, которые нужно будет обвести и залить черным на новом слое:
Подсказка: чтобы выделить несколько областей сразу, нужно зажать Shift при использовании инструмента Прямоугольная область
Устанавливаем непрозрачность слоя с черной подложкой 40%
Теперь, подпишем наши каталоги. Ближе к левому краю подложки разместим текстовые слои с названиями. Параметры текста: шрифт MS Serif, размер 24,цвет белый, трекинг 100
Шаг 10. Создание футера
Сначала,отделяем наш футер направлящими. Вертикальные уже есть, остались горизонтальные:
Выделяем получившуюся область, заливаем на новом слое цветом #460021 (близкий к цвету шапки):
Помещаем на левую сторону футора текстовый слой, в которой укажем адрес студии фотографа и контактный номер телефона. Параметры текстового инструмента: шрифт MS Serif, размер 14, цвет белый, трекинг 80
В правой стороне футера мы разместим иконки социальных сетей и твиттера. Разобьём их направляющими. Направляющие построены по тому принципу, что иконки будут размером 24х24, с отступами в 10 пикселей:
Теперь, с помозью пункта меню Файл – Поместить… размещаем иконки на холсте (иконки прилагаются в материалах к уроку)
Сайт содержит много графической информации в виде фотографий, но мало текста. Это плохо скажется на индексации в поисковых системах. Для этого, под футером мы создадим текстовую область, не отвлекающую внимание, но содержащую некоторую информацию. Параметры текста: MS Serif, размер 12, цвет #460021, трекинг 120
Шаг 11. Продолжаем работу над шапкой и заканчиваем наш макет!
Нам не хватает меню на сайте, и кнопок для переключения языка. Снова вернемся к шапке и разместим их в её области. Меню у нас будет простое текстовое(снова же, вся графика у нас на сайте посвящена фотоработам автора) с подложкой активного пункта.
Создаём текстовый слой под слоем со статусом фотографа. Настройки текста: шрифт MS Sans Serif, размер 15, цвет белый, трекинг 250
Создаём новый слой, размещаем его в списке под нашим меню. Обводим Прямоугольной областью активный пункт меню (в данной случае — home), заливаем черным (инструмент Заливка).
Непрозрачность слоя 17%
Уже по имеющимся вертикальным направляющим для иконок социальных сетей, разместим иконки флагов – английский и украинский (в материалах к уроку прилагаются флаги различных стран). Изначально я хотел разместить флаги в правом верхнем углу, но остановился на варианте – на уровне статуса
Поздравляю Вас! Работа над макетом завершена! Вы создали своё портфолио фотографа!
Комментарии (2)