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

Автор:Дата:Основа веб дизайна сайта или блога это его цветовая гамма. Чтобы добавлять новые элементы, нужно знать html коды цветов

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

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

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

Наверняка, все осознают, что большинство сервисов, предлагающих поставить свой счетчик (например, 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 коды цветов

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

Оставайтесь на связи! Блоготей пришлет вам новые статьи на почту!
Введите свой E-MAIL:

     Katyaru 18.07.2012


    
Читайте БлоготеЙ! на Google+
Читайте БлоготеЙ! на Фейсбуке

К записи "Уроки непринужденного веб дизайна" оставлено 16 коммент.

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

    • katyaru:

      Ничего стыдного — я для этого и пишу) Кто-то поделится одним знанием, кто-то другим — вот обо всем и узнаем)))

  2. Спасибо добрым людям, подскажут :))

  3. А мне до фотошопа… как до марса… Я все делаю методом тыка…

    • katyaru:

      Ну вот я же показываю, как сделать простые вещи. Нужно переступить через свой страх, попробовать — все не так страшно!)))

  4. а я вместо фотошопа пользуюсь photofiltre, там тоже пипетка есть. программка более легкая, грузится быстро. основной функционал фотошопа в ней есть

    • katyaru:

      Вот! Вот поэтому я и написала «И даже если существуют другие графические редакторы, скажем, более простые, я советую взять на себя труд и подружиться с этой программой». Фотошоп — тоже не супер-пупер профессиональный софт. Он всеобщий. И это лидер в данной нише. Зачем ездить на чем-то, если можно ездить на Мерседес?:)

  5. Катрин, я тебя обожаю!!! ))) Интуитивно подозревала что-то подобное (в смысле возможностей), но потыкалась-потопталась и отложила до лучших времен… Умничка, пасибочки огромное!!! )))

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

    • katyaru:

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

  7. А я всё никак фотошоп не освою( Надо бы собраться с силами и восполнить этот пробел.

  8. Разжевали прям до мелочей! Я уже давно (с 2003 года) использую подобные методы при создании дизайнов. Думаю, новички это обязательно оценят!

  9. Димыч:

    Здравствуйте Катерина!
    Походу становлюсь частым гостем, нравится Ваш стиль изложения. По поводу точного подбора цвета, можно всё это сделать чуток быстрее, без танцев со скринами ( подойдёт тем кто как и я не особо дружен с фотошопом )для браузера Google Hrom есть плагин Eye Dropper это та самая пипетка,можно прямо на месте узнать код нужного цвета .

    • katyaru:

      :) Рада читателям всегда!:) Спасибо за инфу про плагин. Так, наверное, действительно быстрее.

      Просто я все стремлюсь пристрастить своих читателей к работе в фотошопе))) Разными путями — все веду в ту сторону. Ведь, вместо 10 разных программок и плагинов можно все делать в этом прекрасном графическом редакторе…

  10. Галина:

    Спасибо за хороший материал, Вы (как всегда) отлично объясняете. Для подбора цветов гармонирующих с основными цветами сайта я всегда пользуюсь сервисом colorsontheweb.com/colorwizard.asp (к сожалению он на английском) но там просто разобраться. Определяете цвет также как в статье, переходите на сайт, вводите значение цвета в поле Enter hex code и жмете set. Ну а дальше интуитивно все кнопочки «щупаете» :) Всем успехов!!!

Оставить свой комментарий


9 − четыре =

Палю тему!
Гугл в помощь
Надо подписаться!

Введите свой E-MAIL:

Delivered by FeedBurner

Дружите с Блоготеем в соцсетях


Смотрите все ВИДЕО Блоготея на YouTube


Blogotey | 


Спутник Блоготея в Tumblr

НаверхКарта Сайта