Как сделать так, чтобы логотип светился на размытом фоне?

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

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

С текстом все в порядке, это просто логотип с яркими однотонными цветами.

Как мне это исправить?


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

введите описание изображения здесь

Что касается запроса полной фотографии и логотипа (обратите внимание, что они оба лицензированы, поэтому вы не можете использовать их в коммерческих целях), я прикрепил их ниже:

введите описание изображения здесь

введите описание изображения здесь

Очень похоже, если не на самом деле дубликат: graphicdesign.stackexchange.com/questions/29256/…
@AndrewLeach На самом деле, вот откуда у меня появилась идея для подтекста! Ха-ха.
Я бы высосал много синего из фоновой фотографии. Думаю, это одна из основных проблем. Предложение go-meek о большем количестве неба, похоже, тоже выглядит неплохо.
Можете ли вы отредактировать , чтобы мы могли видеть линию горизонта самостоятельно? Я хотел бы оставить ответ, но было бы намного проще, если бы у меня был город и логотип в виде отдельных изображений.
Я бы посоветовал вам предложить перекрасить логотип. Это как-то странно.
ха-ха. Вы не перекрашиваете логотип для этого, клиенты обычно ненавидят такие запросы и полностью сопротивляются этому; вы перекрашиваете окружающую среду, этот образ все равно вторичен. Это как предложить перекрасить дом, потому что цветы на балконе розовые.
@Ryan, я отредактировал фотографии и результат предложения горизонта от go-meek.
К сожалению, это не вариант, так как клиенту очень нравится этот логотип и цветовая схема @DA01.
Вот к чему я стремился, уменьшая синеву: i.stack.imgur.com/6oI7X.jpg Хотя просто запуск автоматических параметров Camera RAW Filterзаметно улучшил ее. Я использовал размытие радужной оболочки, внешнее свечение на логотипе, слой яркости после автоматической настройки, немного уменьшил синий цвет с помощью RAW-фильтра и немного увеличил размер слогана вашего логотипа.

Ответы (4)

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

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

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

Сначала я пойму, что речь идет об окнах и стекле. Отходя от правила Хичкока , это должно быть довольно большим пунктом. Дорога и трава менее важны, но помогают приземлить изображение, поэтому мы сделаем его очень маленьким. Тогда я знаю, что мне понадобится место и для логотипа. Так что, возможно, что-то вроде этого:

введите описание изображения здесь

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

введите описание изображения здесь

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

Итак, я могу добавить корректирующий слой Кривые , и вот что я сделал:

введите описание изображения здесь

Что дает нам гораздо больше контраста:

введите описание изображения здесь

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

введите описание изображения здесь

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

введите описание изображения здесь

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

Помимо того, что текст под логотипом маленький, это выглядит намного лучше, чем другие варианты IMO.
Согласен - объедините это с легким внешним свечением, чтобы выделить более темные оттенки - не так сильно, как предлагает @Alin, извините. Если вы поиграете с размером и непрозрачностью, вы найдете место, где само свечение не видно, но эффект его изоляции от фона все же проявляется.

Вы можете взглянуть на этот вопрос для некоторых идей:

Выделение текста перед изображениями .


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

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

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

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

Для этого не требуется много слоев, вам просто нужно использовать градиент на масках слоев в Photoshop, чтобы объединить небо с городом, и изменить режим наложения, ЕСЛИ вы хотите. Вы также можете вырезать город, чтобы небо идеально подходило за эту сцену, это зависит от вас.

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

Теперь он выглядит намного лучше благодаря добавлению большего количества неба вверху! Я просто подожду других ответов, но если других ответов нет, я обновлю свой вопрос, указав, как выглядит новая главная страница, и выберу этот ответ :)

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

Таким образом, где бы вы ни захотели разместить его на своем изображении, он все равно будет читабельным и красивым, см.:

введите описание изображения здесь

введите описание изображения здесь

Мне очень нравится эта идея. Он сильный, и вы его не заметите, если не попытаетесь его заметить, но он выглядит как более «универсальное» и безопасное решение. Я тоже попробую это!
@MarkGabriel Дело не в том, чтобы перестраховаться, а в том, чтобы сделать это простым и сосредоточиться на том, что действительно важно.
Это слишком выделяется для меня. Выглядит довольно дешево и поспешно, если вы спросите меня

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

моя идея

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