Карьера веб-дизайнера с нуля до первой продажи за 14 дней. Урок №6 — «Подбираем цветовую гамму»

Приветствую Вас, дорогой друг!

В этом видеоуроке я вам покажу, как очень легко и быстро подобрать удачную цветовую гамму. Рассматривать мы будем все на том же примере с дизайном сайта по стоматологии. Принцип точно такой же как с генерацией идей, то есть, мы ничего сами не придумываем, а просто-напросто уже заимствуем удачные цветовые гаммы, то есть, не просто какую-то там где-то взяли – используем, а именно уже ту удачную, которая сделана профессионально. Почему? Ну, просто потому, что когда вы только-только начинаете заниматься веб-дизайном, у вас еще не развито чувство вкуса, вы еще не умеете подбирать такие гармоничные цветовые гаммы, скорее всего, у вас будут с этим косяки. По крайней мере это было у меня и это есть у 95% начинающих дизайнеров. Только лишь у тех людей, которых есть талант от природы, у тех оно получается, как бы само собой, но, тем не менее,  всем остальным необходимо практиковаться. Сейчас наша основная цель – быстро получить заказы на фрилансе, поэтому мы какие-то сложные варианты разбирать не будем, а пойдем очень простым и легким путем.

Итак, что вам необходимо сделать. Зайдите в любую из поисковых систем либо Google, либо Яндекс, далее вводите ключевое слово по вашему сайту, допустим, это может быть стоматология, какая-то недвижимость, грузовые перевозки и какие-то услуги по созданию сайта, по копирайтингу, школа танцев и так далее. То есть, вбили свое ключевое слово и далее пишете дизайн сайта. Нажимаем «поиск», после этого переходим в картинки, у нас открываются, соответственно, какие-то сайты и здесь мы просто-напросто просматриваем, ищем какие-то сайты, которые нам по душе. У каждого человека есть какое-то внутреннее чувство, которое подсказывает, что вот этот вот сайт, допустим, профессиональный, на нем легко читается информация, здесь красивая картинка, все блоки расставлены гармонично, много свободного пространства и так далее. То есть, ориентируйтесь по своим ощущениям, то есть, нравится/не нравится сайт. Соответственно, вот так вот просматривайте и находите несколько сайтов, которые вам нравятся. И, соответственно, после того, как вы отобрали парочку сайтов, вы можете уже посмотреть на данный сайт. Давайте откроем в полном размере, ну, к примеру, вот такой вот, и ваша задача сейчас определить 2-3 цвета основных, которые занимают порядка 80-90%. То есть, на любом сайте всегда есть два основных цвета, которые такое количество процентов занимают, то есть, 80-90% отданы им. Если на сайте более 3х цветов, то данный сайт, сразу говорю, не профессиональный и вам стоит сразу выкинуть его в мусорку и не делать такие сайты.

Итак, если мы посмотрим на данную картинку, визуально мы можем разделить ее на две части. Первая часть у нас, в основном, состоит из каких-то синих, голубых оттенков, и вторая более и менее из такого белого и серого. То есть, мы можем сделать вывод, что здесь порядка 90% от всего сайта по цветам занимают всего лишь два цвета: это синий (голубой) и белый с оттенками серого.

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

Давайте поищем другой. Вот, неплохой сайт. Открываем в полном размере. Точно так же вы просто визуально смотрите на страничку и определяете, сколько здесь цветов. Вот часть большая занимает какой-то отдельный цвет и, собственно говоря, вся остальная часть это практически белый. То есть, порядка, наверное, 70-60% цвета у нас белый, порядка 30-40%, ну, порядка 35 — это у нас зеленый и весь остальной цвет, который у нас присутствует дополнительный, он исключительно в тексте – это такой темно-синий, ну, порядка 5%, наверное. То есть, мы можем сделать, что здесь тоже присутствует 2 основных цвета, то есть, это зеленый и белый и какой-то один дополнительный синий, темно-синий. То есть, как вы видите, ну, практически на всех сайтах, если посмотреть, присутствуют в основном 2 цвета: один для фона, в основном это всегда белый с оттенками какими-то, серый, голубой, такие светлые тона и какой-то второй – это главный цвет, ну, чаще всего либо голубой, либо зеленый, потому что они более такие приятные для глаза и не вызывают раздражения, как, допустим, красный, черный и так далее. Если мы посмотрим на все эти картинки, то увидим, что большая часть как раз-таки в этих цветовых гаммах. Есть, конечно, такие извращенцы, которые делают с оттенками красного, непонятно для чего. Такие цвета, кстати говоря, красный, коричневый и так далее хорошо подходят для каких-то бизнес-тематик и услуг, допустим, по юридическим каким-то услугам, по бухгалтерским и так далее, там, где очень деловая среда, где надо быстро что-то показать, там, где работа с людьми, какие-то решения проблем. Где у людей куча страхов и сомнений, то лучше использовать как раз такие голубые, зеленые цвета, потому что они присутствуют в природе, голубые облака, допустим, а зеленые – это зелень и трава, которые расслабляют зрение, глаза и человек, грубо говоря, расслабляется, поэтому для таких сайтов лучше их использовать. Ну что ж, вот такой простой способ подбора цветов. Просто-напросто идем в поисковик любой, вбиваем ключевое словосочетание, дизайн сайта и смотрим какие есть цвета на сайтах, определяем какие-то лучшие. Соответственно, если таких картинок нет, просто переходите в сам поиск и проходитесь по, непосредственно, сайтам работающим, а не картинкам и здесь уже смотрите, определяете для себя какой-то более и менее красивый. Но можно часто встретить в таких работающих сайтах далеко не лучшие примеры, то есть, какие-то черные, серые оттенки. Лучше использовать вот такой способ, через картинки искать. И, собственно говоря, исходя из данного способа подбора цветовой гаммы, давайте сразу выведем правило, которого вы должны придерживаться. В вашем дизайне всегда должно быть максимум 3 цвета. То есть, 1-2 основных и один еще дополнительный, допустим, для текста. То есть, первый цвет у нас идет под фон, второй под различные блоки и третий под текст. Но опять же, на первоначальном этапе я рекомендую использовать только два цвета, то есть, текст сделать точно таким же, как, допустим, блоки либо черным. Ну, черный, скажем так, мы за цвет не считаем, потому что он нейтральный в любом случае белый текст белым цветом на белом фоне мы делать не будем, потому что его просто нереально будет прочитать. Вот такое вот простое правило используйте только 2-3 основных цвета и всегда у вас будут сайты получаться гармоничные, даже потом, когда вы научитесь делать более красивые сайты, все равно вы будете использовать такое количество цветов, потому что когда вы начинаете превышать данное количество, получаются какие-то детские сайты. Ну и, соответственно, после того, как вы определили для себя какие-то сочетаемые цвета, цветовую гамму вы определили, вы можете перейти, непосредственно, в макет в фотошоп и здесь уже пораскрашивать. Делается это очень просто. Давайте сетку пока уберем, она нам не нужна, увеличим немножко масштаб, выбираем инструмент «перемещение», обязательно убедитесь, что бы у вас стояла галочка напротив «автовыбор», что бы когда мы кликаем по какому-то элементу, в палитре со слоями он у нас автоматически выделялся, то есть, я кликаю и у нас нашелся данный прямоугольник. Так, как мы рисовали именно данными фигурами, здесь у нас есть миниатюрки, кликая по которым мы можем сразу изменить цвет. Давайте, допустим, сделаем зеленый. Опять же, когда вы выбираете какой-то цвет, вы можете подобрать его не совсем правильно, не совсем сделать какой-то слишком яркий, болотный и так далее. На первоначальном этапе я рекомендую просто-напросто взять какой-то сайт, где уже вам понравился какой-то оттенок, сохранить себе данную картинку куда-нибудь на рабочий стол, допустим, после этого открываете в фотошопе, выбираете инструмент «пипетка», щелкаете по этому цвету, он у вас определяется, переходите, непосредственно, в данный цвет, копируете название данного цвета, далее переходим в данную миниатюрку и вставляем, то есть, у нас уже подобрался хороший цвет, ничего экспериментировать не нужно. То есть, точно так же мы можем выделить какие-то другие блоки. Допустим, можно сделать, оставить синим шапку и подвал, а все остальные части составные, блоки  контента сделать зелеными. Давайте точно так же сделаем и с кнопочкой. То есть, с помощью инструмента «перемещение» передвигаем ее, переходим Ctrl+V, делаем зеленой. Здесь, единственное, этот оттенок чуть потемнее, поэтому мы пойдем следующим путем. Точно так же сначала вставляем зеленый цвет и потом просто делаем чуточку более темным. Все отлично. Ну и точно так же по аналогии находим какой-то следующий элемент и делаем его зеленым. Очень простые действия, которые позволяют нам буквально за 2 минуты изменить цветовую гамму нашего сайта. Так, к сожалению так сразу одинаковыми объекты не получается заменить, приходится все делать по одному вручную. Ну и в результате вот что у нас получилось, то есть, все такие элементы сайта внутри нашего контента зеленые, а шапка, точнее не шапка, а меню  верхнее и подвал – синие. В принципе, тоже будет смотреться не плохо.

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

На этом все. Спасибо за внимание и до встречи!

Пройдите курс "Профессия веб-дизайнер" за 10 дней бесплатно:



Понравилась статья?
Сделайте доброе дело — поделись ей со своими друзьями и коллегами, кликнув по всем кнопкам соц.сетей:

Нравится
comments powered by HyperComments