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

  Автор:
  2282

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

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

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

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

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

ШАГ 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.откройте браузер и в поиске Гугл наберите 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

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

   3 голоса
Средняя оценка: 5 из 5
Вы находите данную статью полезной или интересной? Поделитесь ею, пожалуйста, с другими - просто нажмите на кнопки ниже:
Самые Важные Оповещения Блога + Четкий Комплект Ценных Подарков ДЛЯ БЛОГЕРОВ И ФРИЛАНСЕРОВ
Комментарии на блоге
4 комментария
  1. Домашнее задание выполнила. Рисунков подобрала несколько, но цвета определила пока для одного рисунка. Расширение установила. Спасибо!

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

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

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

Комментарии в Фейсбук
Комментарии в Вконтакте