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

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

Скачать бесплатно: 77 примеров блестящего веб -дизайна

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

Счет

Что такое фотографии сайта?

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

Типы сайтов

В дополнение к тому, какие типы изображений, которые я упоминал выше, являются другими типами веб -сайтов:

Логотипы

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

Джинсовая компания Levi’s включает в себя свой логотип в баннере сайта, и везде, где вы нажимаете или просматриваете, логотип по -прежнему постоянно присутствует. Логотип Levi позволяет мне, как потребитель, знать, что сайт, который я посещаю, является законным, поэтому я могу доверять тому, что я покупаю у правильного бренда.

Скриншот целевой страницы Леви, которая показывает его логотип в углу

Источник

Инфографика

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

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

ЧИТАТЬ  В седьмой раз мы поддерживаем людей в аутистическом спектре | Pl | Кушман и Уэйкфилд

инфографически показывать, как пожертвовать волосы

Источник

Gifs

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

3D рендеры

3D -рендеры — это 2D -изображения из 3D -моделей. Они обычно используются для предоставления виртуальных поездок в зданиях или для того, чтобы дать аудитории представление о том, как будет выглядеть 3D -объект в реальной жизни. Я часто вижу их, когда делаю покупки в Интернете для мебели, и, вероятно, у вас это тоже.

3D рендеринг гостиной

Источник

Советы по созданию отличных фотографий веб -сайта

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

Используйте гармонизирующие цвета.

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

Я люблю использовать Canvas Interactive Color Wheels Чтобы определить, какие цвета гармонизируют. Таким образом, мне просто нужно выбрать цвет и комбинацию, чтобы разработать цветную сбалансированную графику.

Скриншот инструмента цветного колеса Canva

Источник

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

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

Скриншот логотипа La Lakers

Источник

2. аналоговые цвета Рядом друг с другом на цветовом колесе, таких как золотисто -желтый, желтый и chartreuse. Вместе эти цвета могут создать чувство единицы и спокойствия для зрителя.

ЧИТАТЬ  Не пропустите эти 4 фильма, которые выйдут с Hulu в июне 2024 года, и более 90% их будут смотреть на Rotten Tomatoes.

См. Пример ниже. Еще чувствует себя спокойно?

Зеленое и желтое изображение цветов

Источник

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

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

Скриншот сайта с использованием зеленых, фиолетовых и оранжевых цветов

Источник

Используйте цвета бренда.

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

Снимок экрана целевой страницы Target.com

Источник

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

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

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

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

Как я использую Canva для фотографий сайтов

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

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

Если я кто -то взял интервью у поста, я сделаю удар по теме интервью и помесчу его на фоне.

ЧИТАТЬ  ABC News: Украина получила 90% поддержки США, объявленной Biden в рамках PDA

Затем я отрегулирую выстрел головки, удалив фон и нажав кнопку «Редактировать», изменяя цветное вождение и добавив любой эффект, который, я думаю, поможет он всплыть.

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

5 сетевых инструментов

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

1. Unsplash

UNSPLASH предлагает миллионы бесплатных фотографий с высоким уровнем с высоким разрешением, которые намного прохладнее, чем ваша средняя архивная фотография. Я не использую Unsplash для моего контента HubSpot, но я использовал его для своих страстных проектов и создания личного контента.

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

Скриншот веб -сайта Unsplash показывает ряд концертных фотографий

Источник

2. Pixlr

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

Снимок экрана Pixlr -проверки

Источник

3. Генератор изображений HubSpots AI

Что касается инструментов текста до изображения, то генератор изображений HubSpots AI является верхним уровнем и простым в использовании. Все, что мне нужно сделать, это опубликовать текстовую подсказку, а затем выбрать стиль и ориентацию. Оттуда будет сгенерирована картина, и я могу поместить ее в свой блог Hubspot.

Снимки экрана генератора изображений HubSpot AI

Источник

4. Pexels

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

Экраншот целевой страницы Pexel

Источник

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

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

Source