Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   сборка массива цветов и их оттенков!!! (https://javascript.ru/forum/misc/76437-sborka-massiva-cvetov-i-ikh-ottenkov.html)

Блондинка 15.03.2019 13:32

Nexus,
вот так приблизительно должна выглядеть конечная ссылка http://сайт.ru/Kingdom/Subkingdo..._elongata.html

Блондинка 15.03.2019 14:55

Цитата:

Сообщение от laimas
То есть опции меню как радуга, это вполне удобно? Ну не знаю, я просто не представляю прелестей такого меню.

Если представить что див залит градиентом, от белого вверху, до чёрного внизу, а цвет текста не указан, тоесть чёрный, как прочитать весь текст? Можно конечно попробовать выделить текст и он подсветится, после этого прочитать

laimas 15.03.2019 15:04

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

Блондинка 15.03.2019 15:21

laimas,
Если фон залит уже градиентом, и на этом фоне надо написать текст? Так почему бы не писать градиентом.

laimas 15.03.2019 15:45

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

Блондинка 15.03.2019 16:35

Тут вопрос не в том "зачем усложнять", а "как сделать текст удобно читаемым" на градиенте?

А подобрать цвета для меню я пыталась на этой странице

laimas 15.03.2019 16:45

А зачем усложнять, чтобы потом бороться?

Я не понимаю, зачем в меню градиент.

Блондинка 15.03.2019 22:07

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

laimas 16.03.2019 04:19

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

Malleys 16.03.2019 05:33

Цитата:

Сообщение от Блондинка
"как сделать текст удобно читаемым" на градиенте?

Добавьте тексту тень...
<style>html {
	background: url('https://i.ytimg.com/vi/v1SabYdIlZI/maxresdefault.jpg') center / cover;
	text-align: center;
	font: bold 200% sans-serif;
	color: white;
	text-shadow: 1px 1px black, -1px 1px black, -1px -1px black, 1px -1px black, 0 0 1px black;
}</style>

abc123<br>abc123<br>abc123<br>abc123<br>abc123<br>abc123<br>abc123<br>abc123<br>abc123<br>abc123<br>abc123


UPD Вообще эта техника подходит к любому фону, именно так выглядят субтитры!

Блондинка 16.03.2019 17:37

Malleys,
неплохой вариант, буду иметь ввиду.

Блондинка 16.03.2019 17:47

laimas, по твоему мнению каким цветом лучше сделать ссылки, и плюс подсвеченные ссылки при условии что текст темно-синий 000080, а на втором сайте зелёный 008000, на светлосером фоне приблизительно е1е1е1 ?

laimas 16.03.2019 18:39

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

Но даже и теперь, пусть без градиента, это:

<div style="background-color: #e1e1e1;padding: 10px;"><a style="color: #008000;" href="#">tttt</a> <a style="color: #000080;" href="#">tttt</a></div>


выглядит, положив руку на сердце, скажем мягко, не очень, я такое воспринимаю как - :blink:

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

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

Если согласны, выложу все, что думаю. :)

Блондинка 16.03.2019 21:21

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

laimas 16.03.2019 21:39

Цитата:

Сообщение от Блондинка
одна голова хорошо а две лучше

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

laimas 16.03.2019 22:27

Преамбула

Тот, кто знает и не знает, что он знает - спящий. Разбуди его.

Как утверждает наука, практически из каждого из нас можно вырастить Шопенов и Энштейнов, ибо в каждом из нас есть начало для всего, его нужно только развить. То есть, вполне можно считать, что где-то в глубине ваших знаний есть то, что нужно – виденное вами неоднократно, и оно связано с той областью, в которой вы сейчас пытаетесь решить задачу. Но вы не используете этого в силу того, что не видите связи между этими познаниями и решаемой задачей, либо имеющиеся необходимые познания у вас не систематизированы, не имеют определенных ассоциаций, а значит, вы не можете обратиться к этим ячейкам своей памяти для их извлечения. Будем считать так и все написанное ниже, это не урок, а массаж для возбуждения необходимых связей.

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

laimas 16.03.2019 23:56

Фабула

Свет, цвет и пиксели.

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

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

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

Восприятие цвета человеком зависит как от его физиологических особенностей, так и от внешних факторов. Например, если берем в расчет дальтоников, а это не только полная невосприимчивость цвета, но и в разной степени понижение чувствительности определенного цвета, то конечный продукт должен быть комфортен для них тоже. Либо предлагаем выбрать им самим, то цветовое решение, в котором они будут чувствовать себя комфортно. Ну и время суток или комнатное освещение будет влиять на цвет отраженный, делая их более темными или черными. Также надо учитывать отраженный цвет от других предметов падающий на наблюдаемый предмет/предметы. Хотя последнее вы можете и не замечать, но это обязательно есть, и художники это «видят», учитывают в живописи, это же обязательно учитывается при просчете сцен в 3D моделировании.

А вот с мониторами иная картина. Восприятие цвета на них зависит не только от внешнего освещения, отражений внешнего окружения, но и от технологии, на которой построен сам экран, а для матричных мониторов еще очень сильно и от угла обзора. Мониторы, имеющие экран на ЭЛТ, к сожалению исчезнувшие для массового пользователя, по качеству очень разнятся с мониторами матричными – LED и прочие технологии. Конечно, за время своего развития матричные мониторы совершенствовались, качество цветопередачи их возрастает. Но ваш «массовый» монитор даже близко нельзя поставить с матричным монитором профессионального сегмента. Но это не означает, что купив монитор этого сегмента, вы автоматически получаете достоверность. Все дело в том, что профессиональный означает обширную область применения – от электронных изданий до печатной продукции. А чтобы печатная продукция была той же, что художник/дизайнер видит на своем мониторе, все оборудование, которое при производстве продукции может использоваться, обязательно калибруется. Подобную калибровку своих устройств вы тоже можете произвести. Она будет несколько проще, но тем не менее. Для этого существуют контрольные оттиски, по которому калибруются сканер -> монитор -> принтер так, чтобы оттиск на выходе (печать на принтере) по цветопередаче был тот же, что и контрольный.

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

Это был заказ, связанный с видео монтажом, конечным продуктом которого был фильм на DVD. Помимо самого монтажа я выполнял и печать на диске, делал буклет к нему, разрабатывал и печатал обложку для упаковки. На обложке были изображения, к которым применялся эффект растворения, что было сделано маской выделения с наложением градиента черного цвета к белому. На экране матричного монитора все выглядело, так как и задумывалось, а вот при печати стала видна четкая граница в месте, где изображение не полностью растворено в подложке. То есть, это как бы вместо движка 100% случайно было указано 98%. Просмотр проекта обложки на мониторе с ЭЛТ также показал эту границу и на экране.

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

В общем, зная, что конечный пользователь может видеть нашу разработку немного иной, и причины этого, и выбирается та или иная палитра для проекта. Я не буду углубляться в само понятие палитры, это вы сможете сделать и сами. Но выбирая ту или иную палитру или определяя общий колорит проекта, обязательно учитывается одно понятие. Давайте вернемся к вашему цветовому набору – серый, синий, зеленый. Этот набор вообще противоречит этому понятию – дополнительный цвет. И если вы будете пытаться решить проблему, делая светлее/темнее что-то из своего набора, вряд ли вы получите то, что в полной мере можно будет считать приемлемым вариантом. И отсутствие в вашем решении базирования на понятии дополнительный цвет, не единственная этому причина, есть и другие не менее важные, о которых далее.

laimas 17.03.2019 03:38

От античности до абстракционизма

Опустим наскальные рисунки, как первый творческий продукт человека, и начнем с эпохи античности, когда в изобразительном искусстве (хотя такого понятия тогда не существовало) были каноны, которых придерживались «художники» той эпохи (хотя в те времена их так не называли). Дальнейшая история породила массу течений в искусстве, которые были следствием мировоззрений и познаний, развития общества. Для целостности всего, что я тут пишу, я возьму малое из эпохи ренессанса (периода, когда возрос интерес к античности, отсюда и название эпохи - возрождение) – «Мона Лиза» да Винчи. Это, потому, что вам оно хорошо известно, но можно было бы взять и других не менее известных художников того времени и их произведения, но вы можете и не знать таких. Беру этого для того, чтобы обратить ваше внимание на то, что в изобразительном искусстве этой эпохи деталям уделялось большое внимание. Когда-либо посмотрите на Мону Лизу ни как на знаменитое полотно, а изучите его, и вы это заметите. Если вы таким же образом изучите другие полотна этой эпохи, вы отметите в них эту немаловажную деталь.

Середина 19-го века представила миру Барбизонскую школу, которая стала предтечей, по чисто моему вкусу, самого яркого течения в изобразительном искусстве – импрессионизма. На полотнах этого направления наоборот деталям вообще не придается никакого значения, главное, что преследовали художники этого течения, это передать мимолетное состояние природы. И даже будучи не знатоком живописи, вы сможете заметить большую разницу в технике письма полотен эпохи ренессанса и полотен импрессионистов. Но полотна обоих этих направлений выполняют свои задачи – одни дают нам представление о давней эпохе, другие дают ощущение свежести утреннего воздуха, пелены вечернего заката.

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

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

А взять «Неизвестная» Крамского и взгляд наблюдателя будет направлен на глаза незнакомки, детали – шапочка, шубка и т.д,, что важно и дополняет образ, это все потом. Согласитесь, и в этом полотне нет лишнего, каждая деталь важна для восприятия, но, тем не менее, они не главное. В процессе работы над полотном художник может делать большое количество набросков, зарисовок, вариантов композиции. Это творческий поиск. Но исходным является идея. Бесспорно, что-то мелкое, простая зарисовка чего-то, случайно увиденное или услышанное могут послужить толчком к зарождению идеи, что в конечном итоге выльется в произведение. Но всегда идея, удачно найденная композиция позволяющая воплотить идею, дают правильные направления в поиске мелких деталей ее дополняющих, и никак ни наоборот. Вряд ли бы мы могли наблюдать боярыню Морозову в Третьяковской галерее, если бы Суриков усердно трудился над цветками, к которым бы дорисовал накидку, к ней шапку, затем ее владелицу и т.д. до саней с боярыней. Не из чего не может родиться что-то.

Главное, что я изучал, это рисунок и живопись, хотя это были и графика, многое другое, но для краткости скажем так – для души. Но среди этого многообразия не было того, что в полной мере рассматривает вопросы дизайна. То чем мы занимались, и как то имело к этому отношение, мы называли, так как и музыканты – «халтурить», что приносило нам масло на наш кусок хлеба. Поэтому от меня не будет тезисов по данным вопросам, да они и не нужны – к литературе по ним вы можете обратиться сами, а многое общее, что связывает прикладные искусства, вполне позволит мне определить и указать вам на ваши ошибки. А последним шагом к этому определению будет небольшая прогулка по необычной галерее искусств, по Третьяковке, как я и обещал, мы же не ходили долго, но без посещения этой необычной не обойтись.

Блондинка 17.03.2019 13:05

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

laimas 17.03.2019 14:02

Галерея

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

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

Работая в стили импрессионизма, вы можете придать своему интерактивному полотну легкость и свежесть. Но при этом элементы управления этим полотном должны быть написаны ближе к стилю «Утро в сосновом бору», чтобы зритель мог четко различать на всем полотне трех мишек, и медведицу, как главный элемент управления, которой и принадлежат мишки. Но при этом в вашем «сосновом бору» должны отсутствовать лишняя детализация, не стоит прописывать листики на деревьях, они должны отсутствовать вообще. Это и есть ограничения, которые накладывает на ваше творчество среда, в которой будет демонстрироваться ваше творение. Здесь должно быть чувство меры, нужны познания, которые не позволят перейти тонкую грань между цельностью восприятия и непонятным хаосом. Можно обогатить управление деталями, и сделав их сюрреалистичными, насытить управление вензелями от барокко, и в итоге эта чрезмерная детализация скроет основное содержание, элементы управления уйдут на второй план, станут вторичными элементами на полотне.

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

laimas 17.03.2019 15:54

Финал

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

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

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

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

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

рони 17.03.2019 16:49

laimas,
гармония мира не знает границ ...
:thanks:


Часовой пояс GMT +3, время: 05:09.