Программы для дизайна сайта

 

Что может пригодиться для изменения дизайна шаблона

 

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

 

 

 

Пипетка

 

  С помощью этой программки можно быстро и легко определить цвет, вернее, шестизначный HTML — код RGB любой точки монитора. По умолчанию, после запуска программки, в верхнем левом углу появляется рабочее окошко программы. Для активации программы достаточно кликнуть левой клавишей мыши по цветному сектору в рабочем окне (на снимке он жёлтый). В правом секторе вверху, значения RGB (Red, Green, Blue – красный, зелёный, синий), а чуть ниже, шестизначный цветовой код. Если перемещать курсор мыши по экрану, код будет постоянно меняться, пока вы не установите его на нужном цвете и не кликните левой клавишей мыши. Цвет и его код зафиксируются в рабочем окне. Код можно выделить, скопировать и вставить в необходимое место. Чтобы переместить окошко программы, наведите курсор мыши на цветной сектор окошка и, зажав левую клавишу мыши, перетащите окно в удобное для вас, место. Чтобы убрать окно программы в трей, кликните два раза левой клавишей мыши по цветному сектору окна.

Скачать Пипетку можно ЗДЕСЬ.

 

HTML Colors 2000

 

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

После запуска программы откроется вот такое окно:

Как видно из снимка – в цветном окошке отображается цвет красного оттенка и в строке: HTML Code отображается шестизначный код этого цвета.

 

 

Интерфейс программы на английском языке, поэтому, рассмотрим вкратце, как работает программа. Может так случиться, что вы не обнаружите в стилях CSS шестизначного кода, а будет написано примерно так: color: green; вместо привычного: color: #008000; Чтобы узнать цифровой код указанного цвета, откройте список имён основных цветов и оттенков (Color Name: стрелка 1), найдите название цвета и кликните по нему левой клавишей мыши. В цветном окошке сразу отобразится выбранный цвет, а в кодовой строке, соответственно, код.

 

 

Если нужно подобрать желаемый цвет, нажмите кнопку Less (стр.2) В открывшемся окне 3, выберите из цветовой гаммы нужный оттенок и кликните по нему левой клавишей мыши. Если в цветовой гамме не нашлось желаемого оттенка, выберите близкий к нему и с помощью движков в окне 4, доведите цвет до желаемого оттенка. Скопировать готовый HTML код в буфер обмена можно нажатием на кнопку: Copy (стр 5), или более длинным путём, используя выделение кода мышкой. В программе так же есть функция: Пипетка. Чтобы активировать её, нажмите кнопку: Screen и в левом верхнем углу увидите рабочее поле пипетки. Чтобы определить цвет в любой точке монитора, наведите курсор мыши на определяемый цвет и кликните левой клавишей.

 

 

Для наглядности, был наведён курсор на зелёный оттенок (обведено красным) и зафиксировано кликом левой клавиши мыши. Рабочее поле пипетки исчезло, а в главном окне программы появился выбранный цвет и его HTML код.

Ну, и наконец, расскажу, как я определяю цвета скопированные в CSS стилях шаблона. Копирую шестизначный код (можно без решётки), открываю окно программы, кликаю левой клавишей мыши перед решёткой, устанавливая мигающий курсор (указано стрелкой) и, нажимаю комбинацию клавиш Ctrl + V. В кодовой строке появляется ваш скопированный код, а в цветном окошке отобразится цвет, соответствующий введённому коду.

 

 

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

 

Скачать HTML Color 2000 можно ЗДЕСЬ.

Clip2Net

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

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

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

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

 

 

 Достигнув края шапки виджета, снова, с помощью Лупы, установите перекрестье точно по краю шапки, после чего, в тёмном прямоугольнике, увидите получившийся размер, в данном случае: 222px – это ширина, высота может иметь любое значение, потому как, в данный момент нас интересует только ширина. Затем, нужно лишь выполнить несложные арифметические действия (вычитание, сложение), учитывая отступы и другие значения, указанные автором шаблона и вписать свои размеры вместо ранее установленных.

 

 

Отпустите клавишу мыши. Программа, естественно, откроет редактор с полученным скриншотом, который в данном случае нам не нужен, поэтому, закройте окно редактора одной из кнопок, показанных на снимке ниже.

 

 

Скачать программу можно ЗДЕСЬ.

 

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

   Графические редакторы: Photoshop и Paint Net

   Оптимизатор изображений: RIOT

   Программы работающие с файлами: Filezilla и Notepad++

 

Поделиться ссылкой: