Создание привлекательного сайта-портфолио для фотографа

Создание привлекательного сайта-портфолио для фотографа

От автора: в данном уроке мы создадим с нуля макет фото-портфолио. Макет не будет отличаться пестростью красок и колоссальным наличием графики. Главное здесь – лаконичность, нужно правильно подать то, ради чего сайт и создаётся: демонстрацию портфолио.

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

Если Вы готовы, то приступим!

План урока

    1. Создание документа, разметка направляющими.

    2. Работа с фоном, градиентом.

    3. Создание логотипа.

    4. Работа с шапкой.

    5. Работа с основной областью, оформление слайдера и каталогов.

    6. Работа с футером.

Детали учебника

Программа: Adobe Photoshop

Версия: CS 4

Примерное время выполнения: 1 час

Сложность: средняя

автор

Автор: Макс Дивиани

Увлекаюсь пленочной фотографией, живописью. Живу в городе Луганск, Украина. Работаю 4 года веб-дизайнером и рад делиться своим опытом. Всегда Ваш, Макс Дивиани.

скачать исходникискачать урок

Скриншоты урока в хорошем качестве представлены в текстовых (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%

Уже по имеющимся вертикальным направляющим для иконок социальных сетей, разместим иконки флагов – английский и украинский (в материалах к уроку прилагаются флаги различных стран). Изначально я хотел разместить флаги в правом верхнем углу, но остановился на варианте – на уровне статуса

Поздравляю Вас! Работа над макетом завершена! Вы создали своё портфолио фотографа!

Хотите быстро научиться создавать сайты и блоги на WordPress с уникальным дизайном?

Получите самую полную в Рунете бесплатную систему обучения создания сайтов на WordPress “Уникальный сайт с нуля”

Получить

Метки: ,

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (2)

  1. Евгения

    а можно будет продолжить вашу статью «Создание привлекательного сайта-портфолио» с версткой данного макета?

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree