Как создать фотопортфолио за 2 часа. Опыт фотографа

В мире цифровых и информационных технологий персональный сайт есть практически у всех компаний, не зависимо от рода деятельности. На сегодняшний день существует невероятное количество CMS (систем управления контентом), которые помогут создать сайт даже дедушке, который лет 10 как на пенсии :) Это конечно же шутка, но управление такими системами становится все проще и понятнее с выпуском каждой новой версии.

Я фотографирую уже несколько лет и всегда был далек от создания сайтов, но мне хотелось иметь персональный сайт или блог, в качестве портфолио. Также, хотелось бы выделяться среди толпы одинаковых сайтов Рунета и я решил создать сайт на флеше. На сайте меня убедили, что административная панель управления MotoCMS интуитивно понятна и проста в использовании. Под каждым шаблоном сайта в магазине есть огромная оранжевая кнопка «Бесплатно на 30 дней». Так как платить пока ни за что не нужно, я решил потратить свое драгоценное время и испытать этот флеш шаблон.

Обновление 21.07.2016: Следует заметить, что в 2016 года система получила значительный апдейт до версии Moto CMS 3.0. Новый интерфейс конструктора несколько отличается от представленных скриншотов ниже, но принцип работы похожий.

Также мы публиковали подборку из 10-ти отличных и ярких шаблонов портфолио — возможно, какой-то из них выберете для своего проекта.

Cоздаем фотопортфолио в MotoCMS

В общем, для работы я открыл витрину шаблонов, чтобы выбрать тот, который нравится, с удобной галереей и понятной навигацией.

Мне понравился вот этот стильный и достаточно скромный шаблон.

Что ж, остается заполнить форму, чтобы получить бесплатную демо-версию шаблона на месяц. Хорошо, что тут всего лишь имя и электронный адрес, обычно в такие формы добавляют массу абсолютно ненужной информации.

Вот так выглядит панель управления Moto CMS изнутри:

Хорошо, что в админке есть русскоязычная версия. Я нашел ее методом проб и ошибок. Вверху в меню есть вкладка Preferences>Website Preferences>Advanced Settings>Secect the сontrol panel language>Русский.

Итак, испробуем волшебный двойной щелчок мыши, неужели все так просто, как я об этом слышал. Два раза кликнув мышью на меню, открылось вот такое поле редактирования:

После некоторых нехитрых манипуляций, а именно удаления нескольких пунктов меню и их переименования, получилось следующее:

Теперь изменим надпись вверху, к примеру, напишем «Андрей Иванов». Заметку ниже «Professional Photografer» не будем менять, англоязычная надпись придаст своего особого шарма.

Теперь два раза кликаем по горизонтальной ленте изображений, то есть фото галерее, открылась медиатека (хранилище мультимедийных файлов):

Заменим стандартные изображения в галерее на свои собственные, используя кнопку «Добавить медиа» вверху.

Зажмите Ctrl, выбрав заранее нужные фотоснимки, и нажмите на кнопку «Выбрать» внизу страницы. У меня вышло вот что:

Не забудьте нажать на сохранение в верхней полосе настроек в панели управления. Справа находится кнопка «Предпросмотр», чтобы увидеть как будут смотреться все изменения на сайте в реальности:

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

Анимация, которая сопровождает появление меню и имя фотографа мне нравится, но хотелось бы изменить цвет. Снова двойной щелчок по скромному оранжевому квадрату слева и меняем цвет на голубой. Палитра цветов такая же, как в Фотошопе, то есть неограниченная. В настройках еще и пипетка есть.

Сохраняем и нажимаем кнопку «Предпросмотр».

Теперь можно попробовать отредактировать текстовый блок на странице «Обо мне». Переходим на страницу «Обо мне» с помощью верхнего выпадающего меню. Двойным кликом переходим в поле редактирования надписи и изменяем ее.

Теперь редактируем текстовое поле, оно выглядит вот так:

Далее необходимо заменить фотографию фотографа по умолчанию на свою собственную. Ее можно изменить с помощью встроенного в панель редактора изображений, который я случайно обнаружил в медиатеке. Для этого загрузите изображение в медиатеку и нажмите «Редактировать выбранный элемент» слева. Вы находитесь в редакторе изображений. Он достаточно прост, тут можно поиграть с яркостью, контрастностью и размером снимка, перед размещением на сайте.

После изменения размера фотографии, я добавила ее в текстовое поле, прямо над рассказом о себе.

На странице с формой обратной связи точно такой же текстовое поле и редактируется он аналогично, с помощью двойного клика мышкой.

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

После сохранения и нажатия кнопки «Предпросмотр», я увидела следующее:

Можно также создать новую страницу или всплывающее окно, чтобы наполнить их контентом. Для этого в верхнем меню необходимо нажать «Файл»>«Создать новую страницу».

К примеру, мне необходимо было создать всплывающее окно. Я заполнила очередной текстовое поле так, как следует.

В настройках всплывающего окна, я сделал так, что оно будет открываться при нажатии на надпись Privacy Policy внизу окна возле логотипа. После сохранения и нажатия кнопки «Предпросмотр»:

По-моему, шаблон изменен до неузнаваемость. Оцените что было “до” и что получилось “после”.

Мы разобрались, как добавить фотографии в шаблон, как изменить фон, содержимое альбомов, текстовые блоки и заголовки, создать новую страницу или всплывающее окно, редактировать форму обратной связи. Специалисты на сайте MotoCMS были правы, хотя изначально я не верил, что все настолько просто. Мы ведь никогда не ищем легких путей :) Не смотря на то, что я тратил время на создание скриншотов, у меня ушло всего 2 часа, чтобы изменить этот шаблон под нужды лично своего веб-проекта. Попробуйте и вы. После изменения шаблона в тестовом режиме, я купил шаблон. Чтобы все изменения остались, я обратился в техподдержку и мне отправили мои данные.