3157

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

Большой список сайтов, по получению основных цветов из картинки или просто подбору подходящей палитры Цвет, Палитра, Основные цвета картинки, Подбор цвета, Цветовой ряд, Гармоничные цвета, Дизайн, Ui, Длиннопост

Предисловие:


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


Если вы хотите получить подобную палитру на основе картинки оффлайн, то, думаю, самый простой способ сделать это - провести "пикселизацию" картинки. В Adobe Photoshop это делается с помощью инструмента "Мозаика" (пункт Фильтр > Оформление > Мозаика).


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


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


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


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


Так же некоторые из этих сайтов-сервисов позволяют сгенерировать css, для выбранной палитры или скачать цвета в файл ASE, ACO или в картинку png или jpg. Некоторые принимают только .jpg картинки, а некоторые даже .gif. Некоторые позволяют создать аккаунт и сохранять подборки цветов, другие не имеют такого сервиса. Различий, функций и критериев очень много, надеюсь вы найдете то, что вам поможет.

Категории:

Сайты для генерации палитры основных цветов по картинке

Сайты по поиску картинок определенного оттенка или цвета

Сайты для генерации палитры основных цветов определенного сайта

Сайты с палитрами для выбора цвета в RGB, CMYK, HSL, HEX и т.д.

Палитры с подобранными цветами Material Design и динамическими макетами Android приложения

Мультифункциональные сайты с разными инструментами для цвета

Сайты с картинками и готовыми палитрами цветов к ним

Сайты с просто подборками гармоничных цветов

Источники

Сайты для генерации палитры основных цветов по картинке:

https://color.adobe.com/

http://palettefx.com/

http://patorjk.com/color-palette-generator/

https://www.degraeve.com/color-palette/

https://lokeshdhakar.com/projects/color-thief/

https://www.colourlovers.com/photocopa

https://www.aminus3.com/color/scheme-generator/

http://labs.tineye.com/color/

https://www.imgonline.com.ua/get-dominant-colors.php

https://www.generateit.net/color-palette-generator/

http://www.cssdrive.com/imagepalette/index.php

http://colrd.com/create/image-dna/

https://colordrop.io/scan/

http://www.colorhunter.com/

https://bighugelabs.com/colors.php

http://www.colr.org/

http://materialmixer.co/#image

http://colorexplorer.com/imageimport.aspx

https://www.wisegeek.com/how-can-i-find-the-average-color-in...

https://dribbble.com/

https://coolors.co/app


Сайты по поиску картинок определенного оттенка или цвета:

https://dribbble.com/colors/

https://services.tineye.com/MulticolorEngine

https://www.aminus3.com/color/

http://colrd.com/


Сайты для генерации палитры основных цветов определенного сайта:

https://www.colorcombos.com/grabcolors.html

http://webcolourdata.com/


Сайты с палитрами для выбора цвета в RGB, CMYK, HSL, HEX и т.д.:

https://color.adobe.com/

http://paletton.com/

http://colorblender.com/

https://colorscheme.ru/

http://colorexplorer.com/colorpicker.aspx

http://colormixers.com/

https://coolors.co/app

http://www.ficml.org/jemimap/style/color/wheel.html

http://colrd.com/create/color/

https://meyerweb.com/eric/tools/color-blend/

https://www.sessions.edu/color-calculator/

http://colory.ru/colorgenerator

http://colory.ru/colorgenerator2

https://www.colorspire.com/

http://materialmixer.co/#color

http://mcg.mbitson.com/

https://www.materialpalette.com/colors

http://www.workwithcolor.com/hsl-color-picker-01.htm

http://www.workwithcolor.com/mm-color-blender-01.htm

http://www.workwithcolor.com/hsl-color-schemer-01.htm

http://www.workwithcolor.com/color-converter-01.htm


Палитры с подобранными цветами Material Design и динамическими макетами Android приложения:

(Там гармоничные, сочетающиеся цвета, но в основном эти сайты для Android UX дизайнеров)

https://www.materialpalette.com/

https://codecrafted.net/randommaterial/

http://materialmixer.co/


Мультифункциональные сайты с разными инструментами для цвета:

(На этих сайтах есть инструменты не только подбора цвета в виде обычной палитры, но и для генерации градиента, паттерна или чего-нибудь еще)

http://colrd.com/

https://www.colourlovers.com/

https://www.colorcombos.com/

https://www.degraeve.com/

https://colordrop.io/

https://coolors.co/

https://www.imgonline.com.ua/


Сайты с картинками и готовыми палитрами цветов к ним:

(Поможет, если вдруг не хватает фантазии)

https://colorpalettes.net/

https://color.romanuke.com/

http://www.colorhunter.com/

http://colrd.com/

http://www.cssdrive.com/

http://moviesincolor.com

https://www.design-seeds.com/

https://www.aminus3.com/color/


Сайты с просто подборками гармоничных цветов:

https://coolors.co/browser/latest/1

https://colordrop.io/

https://colorhunt.co/

http://www.colormunki.com/pantone

http://www.colormunki.com/munsell

https://colorup.tikkurila.com/index.html#/l/ru/6/8/colors

https://www.colorcombos.com/popular-color-combinations

http://colrd.com/palette/


Источники:

http://www.dejurka.ru/articless/color-swatches/

https://designshack.net/articles/inspiration/developing-a-co...

https://tin-liva.livejournal.com/89084.html

http://do.esprezo.ru/color-picking

https://vgrafike.ru/ochetaniya-cvetov-onlajn/

http://www.nautical.dorisyershova-design.ru/2014/07/14/%D1%8...

http://www.workwithcolor.com/more-online-color-tools.htm

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

Дубликаты не найдены

+220
Иллюстрация к комментарию
ещё комментарии
+69
Сохранил ,плюсанул , закрыл , забыл
раскрыть ветку 3
+21

А я ещё за сиськи плюсанул

раскрыть ветку 1
+1
А я ничего из этого не делал, только написал свой никому ненужный комментарий
0

Можешь подписаться, тогда не забудешь) https://vk.com/nnovosch

+37
Иллюстрация к комментарию
раскрыть ветку 2
+15
Иллюстрация к комментарию
0
Иллюстрация к комментарию
+46

Удивительно, что в такой огромной подборке нет известнейшего colormind.io

Очень рекомендую. Особенно удобен (лично мне) функцией блокировки цветов.


ТС - ты крут, завидую такой целеустремлённости )

+41
Вот читаю комментарии и у меня складывается ощущение, что я один зашёл сюда ради девушки на фото.
раскрыть ветку 14
+2
Я зашел чтобы найти твой коммент и не начать писать тоже самое
+4
так и есть
раскрыть ветку 4
+3
Мельчают пикабушники
раскрыть ветку 3
+1

Так же

0
instasamka в Инстаграм
раскрыть ветку 5
0
Это не она. На фото Настя Молкова. В инстаграм bupsikitty
раскрыть ветку 4
0
Тоже интересно
+69
Иллюстрация к комментарию
раскрыть ветку 41
+54
Моя боль(( так хочу увидеть его черно-синим, но ни разу не получилось
раскрыть ветку 36
+79

Держи черно-синее. Не благодари

Иллюстрация к комментарию
раскрыть ветку 15
+23
+только наоборот ,ни разу не видел бело золотым
+30

Короче только что, когда только открыл пост, увидел бело-золотое платье и такой: "какого чёрта, я же всегда его видел сине-чёрным", полез в гугл, вбил "сине-чёрное платье", по первой же ссылке увидел то, что я хотел увидеть, сине-чёрное платье, возвращаюсь сюда и вуаля, платье уже сине-чёрное. Я так и не понял, чё это за магия, сижу, пытаюсь снова увидеть бело-золотое, но уже не получается(

раскрыть ветку 6
+11

Ни разу не видел его бело-желтым ((

+5

я просто в фш пипеткой цвета проверила и успокоилась: серо-голубой и коричневый там

раскрыть ветку 1
+3
Наркоман что ли?
+2
Да и не парься, оно реально золотисто-голубоватое на фотке. А то, что кто-то додумывает искажения баланса белого - это уже их дело. Может, это фотка 6а другой планете и там вообще свет зелёный, давайте теперь думать - каким будет цвет платья при освещении солнечным светом.
+2
https://youtu.be/bg41XfnIBvk не благодари
0
Все уже давно доказано, какое оно. Даже не вздумай начинать это снова )))
раскрыть ветку 1
0

если у тебя ноутбук покачай экран туда сюда

раскрыть ветку 3
+1
Пытался заставить себя увидеть сине-чёрное, всматриваясь в фон, но все равно становится только золотисто-голубое
0
Что за магия, зашла в комменты, увидела бело желтое, спустилась вниз и обратно вверх оно сине черноееее
раскрыть ветку 2
+3

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

раскрыть ветку 1
+32
mr.pugo в инстаграме хорошие палитры выкладывает
Иллюстрация к комментарию
Иллюстрация к комментарию
раскрыть ветку 8
+13

И в dribbble: https://dribbble.com/mrpugo

+12

эх, эти палитры еще надо уметь применять

раскрыть ветку 6
+13
Ну смотри. Выбираешь один оттенок как основной. Используешь для шапки, заголовков, кнопок. Для фона и обычного текста используешь чёрно-белые цвета. Для начала этого хватит. Сайт будет хорошо смотреться.
Если надо что-то особенное выделить - то из палитры выбираешь ещё один цвет, контрастный к первому. И продолжаешь его использовать для всех выделений.
Как-то так.
P.S. У меня самого опыта немного, более опытные дополнять и исправять, надеюсь)
раскрыть ветку 2
0
Да, кто б научил...
раскрыть ветку 1
-1
Ты поллитры применять не умеешь? Приноси вечером вместе с закуской, научу.
+8

а вот крутанские штуки с градиентами

https://uigradients.com/#Piglet

https://www.eggradients.com/

раскрыть ветку 1
+1

А для чего они и как их использовать? С палитрами то понятно, а градиенты с сайтов?

p.s. ой здрасьте :D

Иллюстрация к комментарию
+7

Загрузил фото. Почему то не работает ни один сайт. Палитру забыли загрузить что ли? Не пойму...

Иллюстрация к комментарию
раскрыть ветку 6
+4

так тонко, что даже толсто.

Иллюстрация к комментарию
-1

В смысле "не работает"? Судя по вашему скриншоту сайт выделил из фотографии основные цвета и предоставил вам их коды и названия.

раскрыть ветку 4
+7

не каждый лишь может.

Иллюстрация к комментарию
раскрыть ветку 1
+1

Это была очень тонкая шутка :D извини за полученные минуса.

0
Спасибо вам огромное за пост!
+8
Увидев первую картинку - я надеялся на другой список сайтов с разнообразной "палитрой"
+3
Иллюстрация к комментарию
+3

https://www.w3schools.com/colors/colors_picker.asp

Там много полезного

+3
Есть паблик в ВК на такую тему, где бот публикует случайную картинку с наиболее важными на ней цветами. https://vk.com/nnovosch
+4

Для чего все это?

раскрыть ветку 5
+13

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

раскрыть ветку 3
+2

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

раскрыть ветку 1
0
Комментарий удален. Причина: данный аккаунт был удалён
+1
Я иногда такой инструмент использую для выбора цветов при разработке дизайна интерфейсов или полиграфи.
+2

Давным-давно скачал файлик с подобными палитрами. Сайты авторов уже недоступны, к сожалению. Желающие могут скачать здесь:

https://yadi.sk/d/YLJ9mx3fsIXH6w

Выглядит вот так:

Иллюстрация к комментарию
+2

Большое спасибо тебе за труды. )))

+2
ТС, ты - ахеренен! Спасибо, схоронил твой пост.
+2
В жопу палитру, беру девченку
+2

Да.. Умеешь ты заморочиться. (+)

раскрыть ветку 6
+8

Заморочиться - это мое кредо, к сожалению или к счастью :\

раскрыть ветку 5
+6
"Это твой дар, твоё проклятие"
+3
Человек! Спасибо. От лица художника спасибо вдвойне, порой на пустую голову эти сервисы очень спасают
+2

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

+2

Спасибо Вам! А уметь стараться — очень полезно в жизни. Всем советую!))

+2

Как то ник твой не соответствует манере. Смени на "Полировщик мечей", они люди весьма замороченные .)

+1

однажды пришел клиент и заказал сделать кнопки цветами вердепомовый и камелопардовый. так я узнал про сайт http://getcolor.ru - можно искать цвет по названию или вводить цвет по коду/из палитры и получать его название

+1

Где ты был две недели назад, когда я выебал себе все мозги подбирая шторы в комнату?

+1
Увидел девушку, начал читать заголовок "большой список сайтов..." и тут в моей голове взыграло воображение.
Вот что бывает, когда у тебя ломка по клубничке
+1
Простите, я из дикого леса... А зачем? Как это применимо?
раскрыть ветку 3
+1

Чтобы рисовать/дизайнерить в приятной глазу цветовой гамме

0
Можно хвастаться перед другими фотографами, что ты "в тренде", а на самом деле - стараться производить серийную съёмку в одном запоминающемся стиле.
0

Присоединяюсь к вопросу

+1

А почему там только по 5? Скажу честно, прошла не по всем ссылкам, а только по нескольким. Хотелось бы гармоничных схем для представления данных. Мне бывает нужно по десять разных категорий изображать на одном рисунке. Хотелось бы, что и гармонично и цвета достаточно различались.

раскрыть ветку 2
+2

В списке не мало сайтов, которые показывают палитру и не только из 5 цветов.
Вот примеры:
http://palettefx.com/
http://www.cssdrive.com/imagepalette/index.php

http://patorjk.com/color-palette-generator/

https://lokeshdhakar.com/projects/color-thief/

раскрыть ветку 1
0

Оооооо! Спасибо огромное!

+1

Офигенно. Плюс.

0

Ооооо.. Храни вас Бог!))

0

@moderator, подскажите, пожалуйста. Та цифра, которая отображается под постом возле иконки дискеты - это то, сколько раз пользователи (уникальные или если один юзер по 10 раз нажмет, то все нажимания засчитаются?) нажали на иконку сохранения поста или то, у скольких пользователей в данный момент этот пост находится в "Сохраненном"?

Иллюстрация к комментарию
раскрыть ветку 4
0

Это именно уникальные пользователи.

раскрыть ветку 3
0

Ок. А это количество нажатий на кнопку "Сохранить" или то, у скольких пользователей в данный этот пост находится в Сохраненном?

раскрыть ветку 2
0
У меня на глазах оно с бело-золотого стало черно-синим)Я маг?
И периодически вижу его в разных цветах)
0
Картинка, я так понимаю, для привлечения внимания
раскрыть ветку 2
0

Нет. Точнее не только. С этой картинки началось мое "расследование", которое вылилось в этот список. На слове "увидел" ссылка на пост в ВК, где была данная картинка.

раскрыть ветку 1
0
Если честно, я пост даже не читал
0
Иллюстрация к комментарию
0

Подходящий пост, чтобы написать свою задумку. Так как я не разработчик, то сам не смогу сделать. Суть: приложение на телефон, в которое можно загрузить фото и программа определит название цвета. Типа: киноварь, коралловый, серо-синий металлик, сливовый, серо-буро малиновый и.т.д. У нас как-то с девушкой был спор. Она говорила что кирпичная стена серая, а я немного дальтоник, видел красный, коричневый, бордовый, серый. В итоге я загрузил фото на сайт разбора палитры и тот выдал 4 основных цвета. Далее в фотошопе я подобрал похожие цвета и они оказались теми, что я назвал ранее. Видимо я дальтоник не на тёплые оттенки)

0
Когда-то мне понадобилось сделать такую картинку с интерьером. Пипетка и заливка решали)))))
0

Как раз мучаюсь над сложной картиной по фото, пользуюсь вот этим сайтом:
https://html-color-codes.info/colors-from-image/

0
Девушка в начале для привлечения внимания?))
раскрыть ветку 1
+1

Нет. Точнее не только. Эта картинка - нулевой пациент моего "расследования"

0

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

http://html-color-codes.info/cvetovye-kody-HTML

0

Очень интересно и здорово, спасибо!
Не подскажешь, есть ли вариант перевода пантона из TPX в C и т.д.?

0
Мсье, вы бешеный! Но очень молодец! Спасибо! Использую color.romanuke.com и то, потому что меня на него навели. Теперь можно целый день потратить на изучение новых сайтов с ЦП. (цветовой подборкой)
0
Иллюстрация к комментарию
0

И что, ни одного комментария с вопросом что за телочка?

раскрыть ветку 1
0

Да потому что это обычная инстасамочка, которая выкладывает себя в нижнем белье и пишет очень "умные мысли". Таких в инсте навалом)

0

А есть сервис, который проверяет сайты на вырвиглазность?

0
Я не могу на корлд зарегистрироваться, пишет что не имею права использовать этот сайт (((
0
Спасибо)
0
А ещё в иллюстраторе можно сделать трассировку
0

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

раскрыть ветку 1
+2

Да, я говорил об этом во втором абзаце, но фотошоп есть не у всех (в особенности у Linux пользователей) + это не маленькая и не быстро запускающаяся "махина"

0

Отмечусь

0

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

0
Низкий поклон
0

Спасибо!

0

Спасибо! Выдайте 2 женщины этому господину.

раскрыть ветку 4
+2
А мне хотя бы половину женщины можно
раскрыть ветку 3
+2
половину женщины по вертикали
0

Левую или правую?

0
Хорошо, сверху оно будет женщиной.
0

Спасибо огромное! Потрясающая подборка!

0

Фотошоп - это океан.

0

А есть сайты где можно смешивать цвета, например 10% белого, 60 красного и 30 черного?

раскрыть ветку 4
+5
РГБ. Белый это 255.255.255, черный 0.0.0, красный 255.0.0 возьмем одну часть белого, 6 красного и 3 черного. Всего 10 частей. А сумма цветов получилась 1785.255.255. Делим на 10. Получается такой цвет 179.26.26
раскрыть ветку 1
+3
Иллюстрация к комментарию
0

Чтобы прям в процентах смешивать, таких сайтов в ходе поиска всех ссылок я нашел  сайта по смешиванию цветов. Просто на странице поста нажмите Ctrl+F и напишите "blend", 2 и 3 ссылка это то, что нужно.
Там выбираете начальный цвет и конечный цвет и количество отрезков/промежутков и сервис генерирует "градиент" - несколько цветов (в зависимости от количества выбранных отрезков), которые идут в "линии" перехода от начального цвета к конечному.
Соответственно центральный цвет будет цветом, где равномерно смешаны первый и конечный цвета, ну а другие цвета уже другое процентное соотношение имеют, его рассчитывай сам))

-2

Ебануться как у тебя все непросто)), а пипеткой ткнуть в нужный цвет и квадрат им залить в шопе западло?

раскрыть ветку 1
+1

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

Похожие посты
64

Дизайнерские игры для работы с цветом

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

Color

Развитие цветового восприятия

Найди заданный оттенок на цветовой палитре. После каждого уровня палитра будет становиться больше. Смотри не растеряйся

Дизайнерские игры для работы с цветом Веб-Дизайн, Дизайн, Развивающее, Цвет, Длиннопост

Kolor

Соответствие цветов

Научит лучше различать оттенки. Следи за цветом большой полосы и ищи соответствие на палитре. Просто? Не тут то было.

Дизайнерские игры для работы с цветом Веб-Дизайн, Дизайн, Развивающее, Цвет, Длиннопост

The Color

Внимательность и восприятие

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

Дизайнерские игры для работы с цветом Веб-Дизайн, Дизайн, Развивающее, Цвет, Длиннопост

Brandseen

Прокачать зрительную память

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

Дизайнерские игры для работы с цветом Веб-Дизайн, Дизайн, Развивающее, Цвет, Длиннопост

Взято отсюда

Показать полностью 2
293

6 сервисов для игры с цветом

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


Adobe Color

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

6 сервисов для игры с цветом Веб-Дизайн, Дизайн, Колористика, Цвет, Графический дизайн, Векторная графика, Длиннопост

Material UI

На сайте собраны палитры Flat и Material-дизайна, Metro-интерфейса и цвета популярных соц.сетей. У сервиса есть аналог: flatuicolors.com

6 сервисов для игры с цветом Веб-Дизайн, Дизайн, Колористика, Цвет, Графический дизайн, Векторная графика, Длиннопост

Brandcolors

Большая коллекция фирменных цветов известных брендов, популярных сайтов и социальных сетей.

6 сервисов для игры с цветом Веб-Дизайн, Дизайн, Колористика, Цвет, Графический дизайн, Векторная графика, Длиннопост

Palettable

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

6 сервисов для игры с цветом Веб-Дизайн, Дизайн, Колористика, Цвет, Графический дизайн, Векторная графика, Длиннопост

Сoolors

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

6 сервисов для игры с цветом Веб-Дизайн, Дизайн, Колористика, Цвет, Графический дизайн, Векторная графика, Длиннопост

Сolourco

Это аналог предыдущего сайта. Существенное отличие – палитру можно сохранить в форматах .scss, .less и .pgn. Эта функция может быть полезна при верстке макетов.

6 сервисов для игры с цветом Веб-Дизайн, Дизайн, Колористика, Цвет, Графический дизайн, Векторная графика, Длиннопост

Взято отсюда

Показать полностью 4
148

Мелочи для жизни дизайнеров, фотографов и программистов часть №3

Многим читателям Пикабу понравилась мои прошлые статьи №1 и №2 на хорошие источники для дизайнеров и фотографов, сложно было собрать еще больше полезных сайтов, вроде бы получилось! Спасибо вам что читаете, пишите в комментариях свои сайты и я их учту!
Тут есть и ссылки из Комментов из прошлой сборки!


Блоги дизайнеров

disbiz.ru

yanakhodkina.com/blog

onjee.ru

bizikov.ru


Блоги дизайнеров (EN)

smashingmagazine.com

awwwards.com

webdesignerdepot.com

designrfix.com

dtelepathy.com

sitepoint.com

onextrapixel.com


psd-ц (бесплатные стоки psd и не только)

dbfreebies.co

freebbble.com

365psd.com

freebiesbug.com

pixeden.com

psddd.co

uispace.net

freepik.com

graphicsland.ru

decolore.net


Просто приятный дизайн сайтов

zendesign.ru

mstagency.ru

aic.ru

zendesign.ru

design.icu-agency.ru

artutkin.ru

airbnb.design


Книги:

trinosoft.com

narod.ru


В помощь программистам:

google.com (да, да именно он)

habr.com

stackoverflow.com

Генерирование регулярных выражений:

bablosoft.github.io


Поиск шрифтов

wordmark.it

https://fontstorage.com/blog/about-font-face-part-one/


сайт по сжатию графики и конвертации одного формата в другой

https://squoosh.app/


Unsplash.com - сайт с бесплатными стоковыми фото.

https://thenounproject.com - куча пиктограмм на любой вкус


cn-fan.tv - самые свежие мультики!


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


P.S. Если добавили в закладки - добавьте и плюсик)

Показать полностью
2873

Чуть-чуть ненависти

User Inyerface — мини-игра, посвященная проблемам современного веб-дизайна.
Студия Bagaar собрала худшие элементы сайтов в одной онлайн-форме.

Чуть-чуть ненависти Дизайн, Игры, Ужас, Ui

Каждый аспект игры призван «вызвать ярость»: в ней есть неправильно маркированные кнопки, сложные правила паролей, всплывающие окна, которые практически невозможно закрыть, постоянные CAPTCHA и другие раздражающие элементы, которые в том или ином виде присутствуют на сайтах реальных компаний.


По мнению The Verge, игру делает ужасающей даже не сама концепция набора плохих интерфейсов, а то, насколько она близка к реальности. Конечно, в интернете нет настолько плохих сайтов, но есть те, которые «подбираются очень близко к Inyerface, и в этом заключается истинный ужас», — считает издание.


https://userinyerface.com/

429

Использование черного и белого в дизайне. МиниСоветы

Рубрика Мини советы.

Сегодня поговорим про использование белого и черного цвета в дизайне. Замечаю, что многие начинающие и не только дизайнеры, при использовании черного и белого цвета, не парясь выкручивают цвет в палитре на полную катушку. Получая #000000 и #FFFFFF


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


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

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


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


Эта история подходит не для всех случаев) к примеру в информативных и черное на белом не режет глаз. А вот в промо сайте или баннерах вполне совет сгодится.

Использование черного и белого в дизайне. МиниСоветы Дизайн, Цвет, Черное, Белое, Photoshop, Длиннопост
Использование черного и белого в дизайне. МиниСоветы Дизайн, Цвет, Черное, Белое, Photoshop, Длиннопост
Использование черного и белого в дизайне. МиниСоветы Дизайн, Цвет, Черное, Белое, Photoshop, Длиннопост
Использование черного и белого в дизайне. МиниСоветы Дизайн, Цвет, Черное, Белое, Photoshop, Длиннопост
Использование черного и белого в дизайне. МиниСоветы Дизайн, Цвет, Черное, Белое, Photoshop, Длиннопост
Использование черного и белого в дизайне. МиниСоветы Дизайн, Цвет, Черное, Белое, Photoshop, Длиннопост
Использование черного и белого в дизайне. МиниСоветы Дизайн, Цвет, Черное, Белое, Photoshop, Длиннопост
Использование черного и белого в дизайне. МиниСоветы Дизайн, Цвет, Черное, Белое, Photoshop, Длиннопост
Показать полностью 8
362

Мелочи для жизни дизайнеров, фотографов и программистов часть №2

Многим читателям Пикабу понравилась моя прошлая статья с ссылками на хорошие источники для дизайнеров и фотографов, сложно было собрать еще больше полезных сайтов, но вроде бы получилось! Спасибо вам что читаете, пишите в комментариях свои сайты и я их учту!


Самые лучшие гайды для web-дизайнеров и разработчиков яблоко и гугл

alfabank.ru - Дизайн Альфа-Банка

kontur.ru - Контур.Гайды


Блоги

disbiz.ru - блог веб-дизайнера

nicothin.pro - блог о веб-разработке

projectorat.ru - блог прототипографа


Для работы с вдохновением

dribbble.com - для вдохновения и размещения портфолио

behance.net - для вдохновения и размещения портфолио

freebbble.com - тут все что есть бесплатное в dribbble

dribe.org - Накрутка лайков на dribbble, behance, medium, artstation

tympanus.net - для вдохновения дизайнера и программиста


Работа с форматами, картинками, цветами

wallhaven.cc - обои и картинки

cutepdf.com - редакторы PDF

pdfescape.com - Богатые бесплатные редакторы PDF

pngtree.com - иллюстрации и png

icons8.com – иконки

coolors.co – палитры

codelove.de - оптимизатор jpg

webgradients.com - градиенты и цвета

undraw.co - иллюстрации

squoosh.app - сайт по сжатию графики и конвертации

webhostinghub.com - сет векторных иконок.


Конструкторы логотипов

logogarden.com

logaster.ru


Релакс

radiooooo.com - можно выбрать любое десятилетие и страну и слушать музыку

cc-fan.tv – куча мультиков (когда устал от работы)

mynoise.net - шум моря и не только


Еще много хорошего

habr.com - 400 потрясающих бесплатных сервисов

habr.com - 300 потрясающих бесплатных сервисов


Уроки по 3d графике

videotuts.ru

videosmile.ru


Облегчим жизнь верстальщикам

zeplin.io – PSD to CSS

avocode.com - PSD to CSS

pixlr.com - GIMP в web


Редакторы диаграмм

websequencediagrams.com

mindmeister.com


В помощь программистам и всем, кто в web и it

devdocs.io - шпаргалка для web разработчика

nisnom.com - сборник HTML, CSS, JavaScript/jQuery компонентов

zilore.com — пока еще бесплатный anycast dns-хостинг с гео

themelock.com - сайт с шаблонами бесплатно

startbootstrap.com - еще Bootstrap шаблоны бесплатно

bplaced.net - бесплатный немецкий хостинг

wobzip.org - распаковать архив онлайн

sqlfiddle.com - поиграть с SQL запросами

regexpal.com - поиграть с регэкспами

mega.nz - облако до 50 гигов

toggl.com - тайм-трекер

halocoder.ilost.ru - онлайн редактор и файл-менеджер

mailchimp.com – сервис для e-mail рассылок

keys.so – аналитика конкурентных сайтов

Показать полностью
314

Мелочи для жизни дизайнеров и фотографов

Привет! Я web-дизайнер (и еще немного фотографирую) мне за долгое время работы было очень сложно порой найти нужный ресурс, решил облегчить жизнь юным дизайнерам, да и просто тем, кто любит красивые картинки на рабочий стол, собрал большинство ресурсов, которыми пользуюсь сам, для работы, заработка в интернете и упрощения жизни, надеюсь тебе будет полезно мой юный друг, который тянется к знаниям!

Блоги и статьи для дизайнеров, можно найти что почитать и чему поучиться:

disbiz.ru

antonz.ru

awdee.ru

infogra.ru

vc.ru

habr.com

maximsoldatkin.com

deadsign.ru

postovoy.net

bureau.ru

igorshtang.ru

rakh.im

artlebedev.ru

uwebdesign.ru


Хорошие обои на рабочий стол и jpg, иногда с лицензией на использование в работе:

chamberofcommerce.org

fuzzyaxolotl.com (осторожно, много голых теть)

pinterest.ru

500px.com


PNG – все сразу и без фона, подойдёт для фотохудожников и web-дизайнеров

kisspng.com

pngfly.com


Psd и Mockups – тем кто ленится делать все ручками

freebiesbug.com

psddd.co

pixelbuddha.net

dbfreebies.co

uispace.net

freepik.com

graphicsland.ru

freepik.com

freebiesupply.com

decolore.net


Подбор цвета \ цветовой круг

colorscheme.ru

color.adobe.com


Шрифты, наборы, пользуюсь сам и советую другим

fonts.google.com

allfont.ru

fontsquirrel.com

fontstorage.com


Icon и шрифтовые иконки

fontawesome.com

flaticon.com

iconfinder.com


Требования к PSD-макетам. Знать такое надо любому web- дизайнеру:

github.com/andrey-hohlov


Биржи фриланса \ Заработок в интернете

themeforest.net

work-zilla_com

freelance.ru

fl_ru

upwork.com


Временный файлообменник

dropmefiles.com


Где учится html и css + js

htmlacademy.ru

htmlbook.ru


Конструкторы сайтов (все ущербно, но для быстрого тяп-ляпа сойдет)

webflow.com

wix.com

bitrix24.ru


Спасибо за внимание, надеюсь статья была полезна хотя бы одной ссылкой!

P.S.
Учитесь и тянитесь к знаниям, ведь в наше время еще можно найти информацию в интернете!

Показать полностью
80

Один день = Один экран вымышленного приложения

Всем привет:)

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

Цель:

1) Собрать длинную страницу из дизайна iOs приложений разных тематик;

2) Практика в Sketch и Principle;

3) Разминка и небольшой отдых от основных проектов;

4) Тренировка скорости разработки, на прорисовку экрана я планирую тратить не более 40 минут времени;

Заканчивается первая неделя эксперимента и я хочу поделиться с вами результатом, а вы дайте обратную связь в комментариях и идеи для новых экранов:)


#1. Экран поиска посуточного жилья

04.02.2018

Один день = Один экран вымышленного приложения Ui, Дизайн, Приложение, Интерфейс, iPhone, Ux, Видео, Длиннопост

#2. Экран ожидания такси

05.02.2018

Один день = Один экран вымышленного приложения Ui, Дизайн, Приложение, Интерфейс, iPhone, Ux, Видео, Длиннопост

#3. Магазин наручных часов

06.02.2018

Один день = Один экран вымышленного приложения Ui, Дизайн, Приложение, Интерфейс, iPhone, Ux, Видео, Длиннопост

К этому экрану я заснял небольшое видео с анимацией интерфейса:

#4. Список задач на сегодня

07.02.2018

Один день = Один экран вымышленного приложения Ui, Дизайн, Приложение, Интерфейс, iPhone, Ux, Видео, Длиннопост

#5. Оформление заказа в интернет-магазине

08.02.2018

Один день = Один экран вымышленного приложения Ui, Дизайн, Приложение, Интерфейс, iPhone, Ux, Видео, Длиннопост

#6. Личный портфель криптовалют

09.02.2018

Один день = Один экран вымышленного приложения Ui, Дизайн, Приложение, Интерфейс, iPhone, Ux, Видео, Длиннопост

К этому экрану тоже есть видео:

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

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

Спасибо за внимание, если будет интересно, могу выкладывать каждую неделю пост с экранами:)

Показать полностью 6 2
420

Контраст

Пост по просьбе @HardcoreSon

Контраст (фр. contraste) — в оптике (сенситометрии и фотометрии) разница в характеристиках различных участков изображения.


Иоханнес Иттен в своей книге "Искусство цвета" насчитывает 7 видов контраста:

1. Контраст по цвету

2. Контраст светлого и темного

3. Контраст холодного и теплого

4. Контраст дополнительных цветов

5. Симультанный контраст

6. Контраст по насыщенности

7. Контраст по площади цветовых пятен.


Давайте разберем подробнее каждый

1. Контраст по цвету

Контраст Цвет, Искуство цвета, Иттен, Контраст, Дизайн, Фотография, Длиннопост

Один из самых простых, но самых "сильных" видов контраста. Сильно привлекает внимание, "бьет по глазам". Часто используется в дизайне, рекламной фотографии. Наиболее яркие представители Дэвид Лашапель, Энди Уорхол, весь поп-арт строится на этом виде контраста.


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

Контраст Цвет, Искуство цвета, Иттен, Контраст, Дизайн, Фотография, Длиннопост

2. Контраст светлого и темного (тональный)

Самый распространенный вид контраста. Строится на противоположности светлого и темного.

Фотографы прошлого столетия были вынуждены работать только с этим видом контраста (ЧБ плёнка). Ричард Аведон, Ирвин Пенн, Анри Картье-Брессон

Контраст Цвет, Искуство цвета, Иттен, Контраст, Дизайн, Фотография, Длиннопост
Контраст Цвет, Искуство цвета, Иттен, Контраст, Дизайн, Фотография, Длиннопост

3. Контраст холодного и теплого.

Противопоставление холодных и теплых оттенков. Часто встречается в пейзажах. Является "мягким" контрастом. Придает воздушность фотографии. Правило "тёплые света - холодные тени" один из вариантов применения этого вида контраста.

Контраст Цвет, Искуство цвета, Иттен, Контраст, Дизайн, Фотография, Длиннопост
Контраст Цвет, Искуство цвета, Иттен, Контраст, Дизайн, Фотография, Длиннопост

4.Контраст дополнительных цветов.

Контраст Цвет, Искуство цвета, Иттен, Контраст, Дизайн, Фотография, Длиннопост

Дополнительные цвета - это пара цветов которые при смешивании дают серый цвет. На цветовом круге такие цвета расположены друг напротив друга. Яркость и насыщенность таких цветов должна быть одинаковой.

Пара таких цветов "уравновешивают" друг друга.

Контраст Цвет, Искуство цвета, Иттен, Контраст, Дизайн, Фотография, Длиннопост

5. Симультанный контраст

Симультанный контраст  связан со зрительным восприятием и существует только субъективно: нет способа зафиксировать или точно измерить его.

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

Контраст Цвет, Искуство цвета, Иттен, Контраст, Дизайн, Фотография, Длиннопост

Квадрат №1 нейтрально-серый, два других одинаковы по цвету. Квадрат на фиолетовом фоне кажется нейтральным из-за примеси дополнительного цвета (желто-зеленый). Квадраты №2 и №3 имеют одинаковый цвет!

Давайте рассмотрим как это работает в жизни.


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

Контраст Цвет, Искуство цвета, Иттен, Контраст, Дизайн, Фотография, Длиннопост

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

Контраст Цвет, Искуство цвета, Иттен, Контраст, Дизайн, Фотография, Длиннопост

6. Контраст по насыщенности

Здесь всё достаточно просто. Разница между более/менее насыщенным цветом

Контраст Цвет, Искуство цвета, Иттен, Контраст, Дизайн, Фотография, Длиннопост

Про контраст по площади цветовых пятен сделаю еще один пост, т.к. там очень много информации.


Если вы имеете отношение к визуальному искусству, то книга Иттена "Искусство цвета" обязательна к прочтению

Показать полностью 11
414

Немного о работе с текстом

«Священная корова» типографики


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

Немного о работе с текстом Дизайн, Ui, Интерфейс, Текст, Длиннопост

При работе с текстом оперируйте блоками. Думайте блоками.

Немного о работе с текстом Дизайн, Ui, Интерфейс, Текст, Длиннопост

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

Сравните два блока текста ниже. Который из них выглядит более сбалансированным?

Немного о работе с текстом Дизайн, Ui, Интерфейс, Текст, Длиннопост

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

Немного о работе с текстом Дизайн, Ui, Интерфейс, Текст, Длиннопост

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

Немного о работе с текстом Дизайн, Ui, Интерфейс, Текст, Длиннопост

Используйте контрасты.

Немного о работе с текстом Дизайн, Ui, Интерфейс, Текст, Длиннопост

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

Немного о работе с текстом Дизайн, Ui, Интерфейс, Текст, Длиннопост

Cомневаетесь? Делите на два!

Немного о работе с текстом Дизайн, Ui, Интерфейс, Текст, Длиннопост

Будьте внимательны к межстрочным интервалам.

Немного о работе с текстом Дизайн, Ui, Интерфейс, Текст, Длиннопост

Наиболее органично выглядит текст с межстрочными интервалами 1,2х-1,5х от размера кегля шрифта. Смотрите:

Немного о работе с текстом Дизайн, Ui, Интерфейс, Текст, Длиннопост

Урезайте длину строк.

Немного о работе с текстом Дизайн, Ui, Интерфейс, Текст, Длиннопост
Немного о работе с текстом Дизайн, Ui, Интерфейс, Текст, Длиннопост
Немного о работе с текстом Дизайн, Ui, Интерфейс, Текст, Длиннопост

Дальнейшая информация — для фанатов своего дела.

Немного о работе с текстом Дизайн, Ui, Интерфейс, Текст, Длиннопост
Немного о работе с текстом Дизайн, Ui, Интерфейс, Текст, Длиннопост

Дефис используется в сложносоставных словах.

- – —

Немного о работе с текстом Дизайн, Ui, Интерфейс, Текст, Длиннопост

Короткое тире используется для обозначения диапазона или расстояния.

-

Немного о работе с текстом Дизайн, Ui, Интерфейс, Текст, Длиннопост

Длинное тире прекрасно заменяет запятые, скобки и двоеточия.

- –

Немного о работе с текстом Дизайн, Ui, Интерфейс, Текст, Длиннопост

И самое главное, не забывайте о кернинге.

Немного о работе с текстом Дизайн, Ui, Интерфейс, Текст, Длиннопост

При подготовке материала использована статья Pierrick Calvez: https://medium.muz.li/typography-that-sacred-cow-ea7a5909ca7...


Спасибо, что дочитали!


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

Показать полностью 17
112

Игры цвета. Часть III. Эффект Безольда

Игры цвета. Часть I

Игры цвета. Часть II. Симультанный контраст

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

Давайте попробуем разобрать этот эффект на примере. Создадим какой-нибудь узор (да-да, этот узор — кошмар, но для понимая самое то :D)

Игры цвета. Часть III. Эффект Безольда Цвет, Теория цвета, Игры цвета, Дизайн, Иллюзия, Безольд, Длиннопост

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

Игры цвета. Часть III. Эффект Безольда Цвет, Теория цвета, Игры цвета, Дизайн, Иллюзия, Безольд, Длиннопост

Как мы видим, вместе с заменой чёрного цвета мы получаем не только осветление обрамления узора, но также и меняется наше восприятие композиции в целом. Она становится более лёгкой, задний фон оптически становится светлее. Именно такие трансформации (во множестве вариаций) могут помочь дизайнеру в будущем корректировать свою цветовую композицию, изменяя всего один цвет.

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

Игры цвета. Часть III. Эффект Безольда Цвет, Теория цвета, Игры цвета, Дизайн, Иллюзия, Безольд, Длиннопост
Игры цвета. Часть III. Эффект Безольда Цвет, Теория цвета, Игры цвета, Дизайн, Иллюзия, Безольд, Длиннопост

Такое оптическое смещение возможно и немного на другом примере. К примеру, у вас есть композиция со светлым задником. Следовательно, на такой композиции доминировать будут более тёмные цвета, так как будут наиболее контрастировать с нашим фоном:

Игры цвета. Часть III. Эффект Безольда Цвет, Теория цвета, Игры цвета, Дизайн, Иллюзия, Безольд, Длиннопост

Теперь же сменой фона мы можем поменять наши «доминанты» местами. Поставим тёмный фон и увидим, как доминировать теперь стали полосы, а не круги. Это произошло за счёт возникновения нового контраста при изменении всего одного цвета:

Игры цвета. Часть III. Эффект Безольда Цвет, Теория цвета, Игры цвета, Дизайн, Иллюзия, Безольд, Длиннопост

Ну а теперь вопроизведём самый знаменитый пример эффекта Безольда, который наверняка всем знаком. Возьмём круг и разобьём его на 2 части. Сверху зелёный, снизу красный. Поверх круга у нас будут полоски, которые на протяжении всего круга будут одинакового цвета. И поизменяем цвет только этих полосок (цвета круга не меняются!)

Игры цвета. Часть III. Эффект Безольда Цвет, Теория цвета, Игры цвета, Дизайн, Иллюзия, Безольд, Длиннопост
Игры цвета. Часть III. Эффект Безольда Цвет, Теория цвета, Игры цвета, Дизайн, Иллюзия, Безольд, Длиннопост
Игры цвета. Часть III. Эффект Безольда Цвет, Теория цвета, Игры цвета, Дизайн, Иллюзия, Безольд, Длиннопост
Игры цвета. Часть III. Эффект Безольда Цвет, Теория цвета, Игры цвета, Дизайн, Иллюзия, Безольд, Длиннопост
Игры цвета. Часть III. Эффект Безольда Цвет, Теория цвета, Игры цвета, Дизайн, Иллюзия, Безольд, Длиннопост

Как вы видите, мы, меняя цвет лишь отдельно взятого элемента варируем нашу композицию. Ещё больше этот эффект заметен вдали.

Сохраните себе эти картинки на компьютер и поглядите на их превью. Вы увидите, что мы не только меняем светлоту композиции, но и меняем цвет внутри круга(оптически). Такой приём так же известен, как «оптическое смешение». Им искусно владели импрессионисты. Если вы внимательно посмотрите на их картины вблизи (только в живую, а не на фотках в инете! Сходите в галерею — это всегда полезно, особенно если вы увлекаетесь цветом. Смотрите на работы импрессионистов, пейзажистов разных эпох, а также на видных деятелей авангарда начала 20 века (Малевич, Кандинский и т.д.)), то сможете заметить, что они часто использовали этот приём. Вместо чистой зелёной краски они использовали жёлтую и синюю краску и делали ими небольшие мазки друг рядом с другом, что на удалении давало зелёный цвет.

На этом думаю с данным эффектом можно закончить :) Надеюсь вам было интересно! До новых встреч!

Показать полностью 11
94

Игры цвета. Часть II. Симультанный контраст

Игры цвета. Часть I


Привет всем пикабушникам!

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


Что бы лучше понять, что сейчас будет происходить — разберём понятие дополнительного цвета:


Дополнительный цвет — такой цвет, который при смешивании с нашим основным (выбранным) цветом даст ахроматический цвет. (в случае аддитивного (смешиваем пучки света, грубо говоря) смешивания — белым, в случае с субтрактивным (например, пигментов краски) — серым). Ну это всё сухая теория, которая мало кому интересна. На цветовом круге Иттена данные цвета располагаются друг напротив друга. Основными парами дополнительных цветов являются:


— Красный–Зелёный

— Синий–Оранжевый

— Жёлтый–Фиолетовый.


Остальные пары можно посмотреть на круге.

Игры цвета. Часть II. Симультанный контраст Цвет, Теория цвета, Игры цвета, Дизайн, Длиннопост

Теперь думаю можно вернуться к симультанному контрасту.

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


Давайте взглянем на 3 картинки внизу. Вглядывайтесь в название пикабу (секунд 10-20), желательно открыть саму картинку, что бы другие вас не отвлекали. Поймайте состояние, когда вы поймёте, что сама надпись пикабу на каждой картинке имеет разный оттенок. На синем фоне надпись приобретёт немного оранжевый оттенок (ключевое слово — «немного», не ждите, что цвет кардинально изменится, вы почувствуете лишь оттенок). На красном фоне появится зеленоватый оттенок, а на жёлтом чуть фиолетовый. Не бойтесь, если сразу не заметите отличия, это вполне нормально. Подсознательно вы всё равно будете чувствовать, что надпись имеет разные оттенки. Именно это явление и будет симультанным контрастом.

Игры цвета. Часть II. Симультанный контраст Цвет, Теория цвета, Игры цвета, Дизайн, Длиннопост
Игры цвета. Часть II. Симультанный контраст Цвет, Теория цвета, Игры цвета, Дизайн, Длиннопост
Игры цвета. Часть II. Симультанный контраст Цвет, Теория цвета, Игры цвета, Дизайн, Длиннопост

В качестве примера проблемы данного контраста, я приведу отрывок из книги Йоханнеса Иттена «Искусство цвета»:


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

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

Игры цвета. Часть II. Симультанный контраст Цвет, Теория цвета, Игры цвета, Дизайн, Длиннопост

Осталось ещё решить один вопрос — если симультанный контраст такая плохая вещь, то как же с этим бороться? Ведь ну мало ли мы хотим на красный фон добавить серую надпись? Ну заказчик попросил, всякое бывает. Что же, тогда есть одно простое решение — мы должны в наш серый добавить цвет, который является дополнительным к дополнительному, который видит наш мозг. Правда мило? :D Хорошо, скажем намного проще: нужно разбавить наш серый цветом фона. Только немного. Делается это уже на глаз. Кстати на примере ниже симультанный контраст выглядит ещё лучше на примере уравновешенного серого.

Верхняя надпись пикабу, как и на прошлых примерах является абсолютно серой и по RGB выглядит так: R:125, G:125, B:125. Нижняя же надпись уже выглядит достаточно серой на данном фоне, но вот её значения такие: R:155(!), G:125, B:125. Как видите — мы немного разбавили наш цвет красным и тем самым уравновесили его с фоном

Игры цвета. Часть II. Симультанный контраст Цвет, Теория цвета, Игры цвета, Дизайн, Длиннопост

Вот такая эта вещь — симультанный контраст. Кому-то она идёт во вред, когда не знаешь о его существовании, а иногда его используют осознанно. Надеюсь вам было интересно! :) До скорых встреч

Показать полностью 6
259

Игры цвета. Часть I

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


Я бы хотел этим постом начать цикл, который будет посвящён цвету и работе с ним. Хочется выйти за рамки стандартных вещей, а-ля выбора цвета по кругу Иттена, но его работами мы активно будем пользоваться, как и культовой работой Джозефа Альберса «Взаимодействие цвета». Рекомендую эту книгу всем тем, кто думает, что цвет (тон) — это не более, чем выбор 3-х характеристик:


— яркость,

— светлота,

— насыщенность.


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


— Хроматические цвета. Цвета, в которых присутствует конкретный оттенок (красный, зелёный, жёлтый и т.д.);

— Ахроматические цвета. Ими являются все оттенки серого (от чёрного к белому)


Яркость

Эта характеристика, которая показывает сколько света попадает в глаз человеку. Если взять начальным цветом белый и постепенно уменьшать его яркость (то есть уменьшать количество света, которое будет попадать в глаз наблюдателя), то на выходе мы получим чёрный цвет. На примере зелёного тона изменение яркости можно поглядеть на картинке:

Игры цвета. Часть I Цвет, Теория цвета, Игры цвета, Дизайн, Длиннопост

Светлота

Характеристика, которая определяет близость цвета к белому. Понятия светлоты и яркости часто путают, но мы же не будем этого делать, правда? :) Запомним, что каждый цвет (при условии максимальной насыщенности) имеет свою (скажем там дефолтный для него) светлоту. Это вообще достаточно субъективная характеристика, которая может изменяется не только в зависимости от вашего выбора, но и от освещения пространства, в котором мы наблюдаем за цветом.


Посмотрим на картинку ниже. Я взял основные цвета по модели HSB (цвета с шагом 60 градусов при максимальной светлоте и яркости) и потом поверх наложил чёрный цвет, вычел тоновую составляющую и насыщенность, что даёт нам понять, сколько светлоты в каждом из основных цветов. Например можно заметить, что жёлтый цвет имеет самое большое значение светлоты и именно он располагается ближе всех к белому цвету. Что бы его уравнять по светлоте с красным — нам придётся разбавить его (жёлтый) чёрным цветом.

Игры цвета. Часть I Цвет, Теория цвета, Игры цвета, Дизайн, Длиннопост

Насыщенность

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

Игры цвета. Часть I Цвет, Теория цвета, Игры цвета, Дизайн, Длиннопост

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

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

Игры цвета. Часть I Цвет, Теория цвета, Игры цвета, Дизайн, Длиннопост
Показать полностью 3
151

Лучшие инструменты для работы с цветом

Перевод статьи "The BEST free colour tools & sites online"

Источник: Wordyblend.com


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


:-D Мои фавориты, и те, которые я использую, отмечены смайликом


Исчерпывающий цветовой ресурс


:-D Colour Lovers – на мой взгляд, основной ресурс для цветов в целом. Он отлично подходит для выбора цветовой схемы, а также сайт отслеживает тенденции и дарит заряд энергии пользователям. Вы можете делиться новостями, читать статьи, сравнивать цветовые палитры и добавлять комментарии. Отлично!


Выбор цветовой схемы/палитры


CrazyDad – Интерактивная подборка цветов


:-D Color Blender – Бесплатная онлайн система подборки цветов и палитр. Вы можете выбрать один цвет, а система предложит вам его оттенки.


Ficml.org Colour Wheel – Привлекательный и очень красочный способ выбора цветовой схемы.


Colour Schemer – Это одна из условно бесплатных программ, но ее определенно стоит упомянуть. Это небольшая программа, которая реализует для вас цветовые схемы. На самом деле я не пробовал ее сам, но скриншоты выглядят отлично.


:-D Photo Colour Matcher – Это довольно удобный инструмент, в который вы можете загрузить картинку, и подобрать к ней цветовую палитру. Он отлично подходит для брошюр или вещей, которые должны соответствовать центральному изображению.


Colour Matching Sphere – Еще один классный способ выбрать цветовую палитру.


Вдохновение цветом


Стоковые фотографии – Используйте Flickr или iStockPhoto, чтобы получить вдохновение цветами. Попробуйте найти цвета, связанные с проектом, над которым вы работаете.


:-D UrbanCowboy и 57Even – Это два моих любимых художника, использующие восхитительные цветовые схемы в своих работах.


Другие инструменты


Web 2.0 Color Palette – Если вы ничего не знаете о Web 2.0, то я предлагаю вам попробовать его. Отличный инструмент для чего-нибудь Web 2.0.


Немного развлечений


Запрещенные цветовые схемы


Как цвет стен может влиять на настроение


:-D Самые страшные цвета – Говорит само за себя


Цвета лучших журналов


Почему красный так силён


Colourblind test – Тест на определение дальтонизма


Colours For Christmas – Рождественские цвета

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