Краткое руководство по фотографии веб-сайта

Опубликовано: 2020-04-24

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

Однако иногда дизайнерам не обязательно принимать такое решение. Например, вам когда-нибудь вручали не очень хорошее изображение от клиента? Они могут настаивать на его использовании, даже если это портит общую эстетику их веб-сайта.

Но даже в этом случае есть шанс спасти положение. Все дело в лучшем понимании роли фотографии в веб-дизайне. Если мы сможем обучить как наших клиентов, так и самих себя, мы сможем избежать тех зернистых, нестандартных изображений, которые ваш клиент снял на свой 10-летний мобильный телефон. На его месте будет привлекательная и актуальная фотография, которая добавит общего впечатления.

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

Учитывайте предмет

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

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

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

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

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

Мужчина просматривает веб-сайт на планшетном устройстве.

Подумайте о цвете и постобработке

Благодаря чудесам таких инструментов, как Adobe Photoshop и даже CSS, цвет, который мы изначально находим в изображении, не обязательно должен оставаться таким. Мы можем изменить оттенок, насыщенность или даже преобразовать изображение в черно-белое.

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

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

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

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

Мужчина сравнивает распечатанную фотографию с фотографией на экране компьютера.

Размер и ориентация имеют значение

Независимо от того, делаете ли вы свои собственные фотографии или загружаете их со стокового сервиса, вполне вероятно, что выбранные вами изображения будут обрезаны до меньшего размера, прежде чем они будут добавлены на ваш веб-сайт. Даже при широкополосном подключении и мониторах 4k гигантские изображения (с такими же большими размерами загрузки) не очень удобны для пользователя.

Поэтому важно учитывать, как вы планируете использовать конкретное изображение на своем сайте. Как на это повлияет кадрирование? Здесь в игру вступают размер пикселя изображения и его ориентация.

Возьмем, к примеру, фоновое изображение в основной области. В этом случае часто лучше использовать широкие пейзажные фотографии. Попытка превратить высокое портретное фото в короткое и широкое обычно упускает слишком много деталей.

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

И не забывайте про мобильный! В зависимости от того, как вы используете изображение, вам может потребоваться настроить стили, чтобы на маленьких экранах все выглядело идеально с точностью до пикселя. Также возможно, что изображение отлично выглядит на больших экранах, но плохо работает на маленьких. Это может означать необходимость найти другое изображение, которое будет работать с вашим адаптивным шаблоном.

Изображение обрезается в Photoshop.

Об ужасном фото вашего клиента

Ранее мы упоминали о тех ситуациях, когда клиент настаивает на использовании определенной фотографии (так называемой « неправильной » фотографии). В таких случаях легко просто отмахнуться от этой идеи как от плохой, и, возможно, так оно и есть. Но также разумно осознавать как их чувства, так и мыслительный процесс.

Чтобы лучше понять это, вам, возможно, придется немного покопаться. Начните с того, что честно и вежливо заявите о своих опасениях по поводу изображения. Может быть, размер не подойдет или качество просто не на высоте. В любом случае, лучше высказать свои мысли открыто.

Обсуждая это дальше, постарайтесь выяснить, что именно им нравится в фотографии. Вы можете обнаружить, что они используют его, потому что он единственный, который у них есть, или что он имеет некоторую сентиментальную ценность. Маловероятно, что они пытаются «испортить» ваш шедевр (хотя, если они утверждают, что причина в этом, уходите как можно быстрее).

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

В большинстве случаев вы обнаружите, что клиенты проявляют гибкость, когда дело доходит до изображений. И как только они увидят, что вы работаете в их интересах, они с большей вероятностью встретятся с вами посередине. Поэтому не принимайте их первоначальный запрос как окончательное решение — скорее всего, есть место для компромисса.

Женщина пожимает руку.

Лучшие фотографии = лучший веб-сайт

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

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

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

Фотография — это элемент, который действительно может выделить ваш сайт. Поэтому не торопитесь и выбирайте с умом!