Уроки непринужденного веб дизайна

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

Цветовая гамма нашего блога

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

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

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

Что такое код цвета в html

Большинство из нас знают, что цвета в компьютерной графике передает специальный html код. Как правило, он начинается со знака # а далее следует шесть цифр и букв. Например, код белого цвета #ffffff, а код яркого сочного красного цвета #ff0000.

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

Освоить веб дизайн поможет фотошоп

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

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

Вот скрин страницы Блоготея. На него должны попасть основные элементы уже существующего веб дизайна:

1. Цвет фона – это один из базовых цветов шаблона. Подобный же цвет (1а) использован для фона заголовков в сайдбаре;
2. Основной цвет меню – второй базовый цвет гаммы моего блога. Он же использован для формы поиска (2а) и для счетчиков (они не попали в скрин);
3. Второй цвет меню (открытой вкладки) – третий базовый цвет;
4. Цвет ссылок – он же используется для подзаголовков в статьях;

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

• Теперь открываем скрин своей страницы в Фотошопе:

1. Выбираем инструмент «Пипетка» — курсор принял вид этой самой пипетки;
2. Устанавливаем носик пипетки на нужный цвет и кликаем (в данном случае – на цвет фона – цвет №1 из примера выше);
3. В окошке основных цветов появился именно этот цвет (пипетка «набрала» нужной краски). Кликаем на окошко с цветом (прямо на цвет) – открывается диалоговое окно;
4. Здесь вы можете (и лучше это сделать) поставить галочку «Только Web-цвета» — исчезнут плавные переходы, но именно эти цвета будут адекватно индексироваться и передаваться браузерами;
5. И наконец, мы можем посмотреть html код цвета, который мы выбрали.

Итак, нежный сливочно-желтоватый цвет фона Блоготея записывается в html кодом #ffffcc. Теперь мы можем узнать и записать – в отдельном файле или в блокноте – какие цвета (их html коды) используются на нашем блоге. Делаем подобный список:

Фон1 – #……

Фон2 – #……

Меню1 – #……

Меню2 – #……

Заголовки – #……

и т.д.

И когда нам захочется поставить на страницу очередной счетчик или форму поиска – то не нужно больше гадать, в какой цвет его “раскрасить». Мы берем нужный html код из нашего списка цветов и вставляем его в окошко редактора.

Вот, например, изменение кода цвета счетчика и текста в Фиидбернер:

Предлагаемый нам счетчик (было) совсем не подходил Блоготею. Но мы добавили в поле «тела» счетчика html код основного цвета меню (2а), а в поле текста счетчика — html код цвета фона блога. Теперь счетчик выглядит так, как нам нужно (стало)!