Как подобрать цвет для внешний вид сайта / блога на WordPress используя фоновое изображение

  Автор:
  4 комментария
  6753

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

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

ШАГ 1 — поиск изображения для фона

1. Вы можете воспользоваться поиском Google или Яндекс и по ключевым запросам подобрать большое изображение, которое будет отражать суть вашего блога. Обязательно в инструментах укажите размер изображения, чтобы Google подобрал для вас именно большие изображения (минимальный размер 1280px по ширине).
2. Если вы хорошо фотографируете, вы можете использовать свое произведение
3. Также вы можете сфотографироваться в студии и использовать в качестве фона фото с вашим изображением

Для примера, я использую фото с Google.

ШАГ 2 — сгенерировать палитру цветов изображения

1. зайдите на сервис http://www.cssdrive.com/imagepalette/index.php
2. Загрузите свое изображение, которое вы будете использовать в качестве фона
3. нажмите на кнопку «Get Palette»

image-fon

Ниже появится палитра цветов данного изображения.
1. Выберите цвет который, вы бы хотели сделать основным, кликните по нему левой кнопкой мыши
2. справа под изображением в поле «Selected color:» скопируйте номер данного цвета

image-fon1

 

ШАГ 3 — подобрать второстепенный цвет

1. зайдите на сервис http://colorscheme.ru/
2. внизу под цветовым кругом в поле «RGB» нажмите на код цвета
3. вставьте в 4-е поле после знака # скопированный код основного цвета (скопировали в предыдущем шаге)
4. нажмите «Закрыть»

image-fon2

image-fon3

Справа вы увидите палитру цветов, которые сочетаются с основным цветом. Выберем контрастный цвет. Для этого:

1. Вверху слева переключите на сочетания цветов «Триада»
2. Второстепенным цветом будет второй от основного.

Также вы можете использовать и третий цвет в качестве дополнительного.

image-fon4

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

ШАГ 4 — установить ColorZilla

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

1.откройте браузер и в поиске Google наберите colorzilla

2. перейдите на сайт www.colorzilla.com

colorzilla1

3. перейдите в раздел «ColorZilla for Chrome and Firefox»

colorzilla2

4. убедитесь, что открыта вкладка браузера, в котором вы работаете

5. нажмите на кнопку «Install colorzilla»

colorzilla10

 

6. во всплывшем окне нажмите на кнопку «Установить расширение»

colorzilla8

 

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

colorzilla9

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

В следующей статье «Изменение дизайна блога на шаблоне AB-Inspiration с помощью изображения и 2-х цветов» мы приступим к настройке внешнего вида блога.  Мы разместим фоновое изображение в шапке блога и настроим внешний вид в соответствии с полученными цветами. Блог будет выглядеть вот так:

Шаблон AB-inspiration 6.0 - фоновое изображение в шапке

Для создания такого варианта, вам понадобиться только шаблон AB-Inspiration 6.0.

А пока задание:

  1. Найдите изображение, которое вы хотите сделать основным на вашем блоге. Воспользуйтесь поиском Гугл, Яндекс, убедитесь, что изображение бесплатное и большого размера (по ширине не меньше 1280px). Или используйте свое фото.
  2. Сгенерируйте палитру цветов используя сервис cssdrive.com (ссылка выше), и скопируйте код цвета из палитры, который вы хотите сделать основным.
  3. Определите контрастный второстепенный цвет с помощью сервиса colorscheme.ru (ссылка выше)
  4. Если сочетание вам не понравилось, попробуйте выбрать другой основной цвет из палитры
  5. Установите расширение colorzilla в браузер. Оно нам пригодиться для копирования кода цвета.

Если есть вопросы, пишите в комментариях.

P.S. Еще раз напомню.

Конкурс на самый эффектный дизайн блога на шаблоне — конструкторе AB-Inspiration будет с длиться 1 неделю. В понедельник 11 января мы заканчиваем конкурс. К этому времени нужно выслать все работы (ссылки на ваши блоги) в комментариях к этой статье или последующих статьях.

11 января мы сделаем скриншоты блогов участников и опубликуем на этом блоге. Далее путем голосования читателей блога и наших подписчиков мы определим лучшие работы.

Узнать больше о конкурсе можно здесь: Конкурс на самый эффектный дизайн блога на шаблоне AB-Inspiration

 


Создать сайт для заработка с нами — легко и быстро!

За помощью обращайтесь в нашу службу поддержки 24/7

 

Нужен качественный хостинг для сайта на WordPress?
Рекомендую, проверенные годами, хостинг Timeweb:
Надежный проверенный годами хостинг для сайта на WordPress
а также, хостинг Beget:
Хостинг Beget

 

Как подобрать цвет для внешний вид сайта / блога на WordPress используя фоновое изображение

   3 голоса
Средняя оценка: 5 из 5
Находите эту информация полезной и интересной? Тогда смело жмите на кнопки соцсетей и поделитесь этой информацией со своими друзьями и знакомыми:

Анфиса Бреус

Анфиса Бреус - специалист по Wordpress с 2007 года. Создатель и разработчик шаблона "AB-Inspiration" для самостоятельной и профессиональной настройки сайтов на WordPress для бизнеса. Основатель клуба "Мастер WordPress" и автор эксклюзивных курсов по WordPress. Фрилансер. Спикер.

Подпишись на меня в Telegram! Только важные новости и лучшие статьи
Оставьте свой комментарий:

Комментарии на Блог
4 комментария
  1. Домашнее задание выполнила. Рисунков подобрала несколько, но цвета определила пока для одного рисунка. Расширение установила. Спасибо!

  2. Ирина

    Анфиса, спасибо за отличную статью! У меня вопрос: если использовать слайдер и 3 изображения, то их следует подбирать в одной цветовой гамме? Или взять за основу одну картинку, которая больше нравится и подбирать цвет второстепенный к ней. А с остальными двумя уже, как получится?

    • Да, обычно, так и делают. Под одно изображение подбирают цвет, но стараются и другие изображения в слайдером сделать похожими по тону. Иногда я вижу такое решение: на все изображения в слайдером накладывают прозрачный цветной фон (цвет тона — берут основной цвет)

  3. Лебедева Наталия

    Анфиса, спасибо за интересную информацию. При создании открыток тоже неоходимы такие сервисы по подбору цвета. Хочу вам предложить еще очень интересный сервис https://color.adobe.com/ru/create/color-wheel/. Думаю пригодится и Вам и Вашим читателям.

Добавить комментарий для Галина Лушанова Отменить ответ

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