Наверное самым мощным инструментом в «Наборе веб-разработчика на базе FireFox» является уникальное средство отладки веб-приложений.

Web Developer

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

MeasureIt

Расширение схожее по назначению с ColorZilla — измеряет расстояния на странице. С помощью него мы можем получить точные размеры произвольного прямоугольника.

Download helper

Download helper — средство загрузки медиа с Интернета.

ColorZilla

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

WindowResizer

Изменяет размеры рабочей области браузера для имитации разрешений монитора.

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

www.morguefile.com

Классный фотосток. Ищем фотки качаем на шару и свои можно заливать, после регистрации.

www.alamy.com

Шикарный сток с 18.07 миллионами фоток, но они платные. Если уж очень понадобится фотография для веба можно и использовать фотки :-)

www.bigstockphoto.com

Есть платные и бесплатные фотографии сток неплохой, но есть и получше.

www.everystockphoto.com

База из более чем 3-х миллионов фотографий. Хороший сток, хороший материал для работы.

Сейчас ведется настройка нового форума с изюминкой.

Позже буду отписываться как идут дела ну и так далее, а пока чтобы не было «многабукафф» — всё.

«Пространство по-вертикали членится иначе как горизонтальное. Вам нужно выбрать не только общую размерность (высоту колонки или страницы), но также и основную ритмическую единицу. Такой единицей является интерлиньяж, то есть расстояние от линии шрифта предыдущей строки до линии шрифта следующей.»

В механическом наборе между строками добавляется свинцовая полоска для регулирования интерлиньяжа. В css это регулируется с помощью свойства line-height. Например, тексту в 12 пунктов мы даем межстрочное расстояние плюс три единицы к размеру шрифта – 15 пунктов.
p { font-size: 12pt; line-height: 15pt }

Однако это плохой пример, поскольку межстрочное расстояние не должно указываться в абсолютных единицах. Если мы увеличим размер шрифта до 18, а межстрочный интервал останется равен 15, то не получим мы ничего хорошего.
Более лучшим подходом является использования уникального свойства css, когда ненулевое значение допускается без указания единицы измерения.
p { font-size: 12pt; line-height: 1.25 }

При этом высота линии будет равна 1.25 x 12 = 15 pt. Это более надежный метод в котором межстрочный интервал будет пропорционален размеру шрифта. Высота линии может быть указана в font:
p { font: 12pt/1.25 "Minion Pro", "Minion Web", serif }

Следует отметить, что для некоторых браузеров стоит подрегулировать межстрочное расстояние: Сафари, например, и ИЕ, тогда как в Camino и Огнелисе этого делать не нужно.

Текст для веб почти всегда нужно разрежать чуть более чем для печати – 1.3 или 1.5
В отличии от механического набора, где свинцовая подложка добавляется с одной стороны в цифровом наборе высота делиться пополам сверху и снизу.

Отрицательный интерлиньяж может быть выгодно использован для коротких (или рекламных) текстов.
.example { font-size: 1.5em; line-height: 0.85; text-indent: -0.5em }

Детали урока:
Программа: Photoshop CS
Сложность: легко
Время выполнения: 25-35 минут

Шаг 1

Создайте новый документ с такими настройками:

Шаг 2

Создайте новый набор слоев и назовите его «Перо». Выберете инструмент «Pen Tool» и
нарисуйте форму как показано ниже. Перед тем, как рисовать форму, включите в
функциях инструмента режим «Shape Layers». Назовите слой с формой «База» и
наложите градиент:

Шаг 3

Нарисуйте еще одну фигуру с помощью «Pen Tool» и назовите ее «Тело»:

Шаг 4

Теперь нужно добавить некоторые рефлексы к телу. Создайте новый слой, кликните по
слою «Тело» с зажатой клавишей Ctrl и заполните получившиеся выделение белым
цветом. Нажмите Ctrl+T и уменьшите ширину слоя на 75%. Теперь зайдите в «Filter > Blur
> Motion Blur» и нажмите «Ок» после выполнения настроек, показанных ниже.
Уменьшите непрозрачность слоя на 50% и наложите градиент.

Шаг 5

Используйте «Rectangle Tool» (U) или «Pen Tool» (P) чтобы создать форму, как показано
ниже и назовем ее «Шея». Также применяем стили слоя как на рисунке.

Шаг 6

Так же как и для тела пера, добавим рефлексов к шее. Только в данном случае для
оригинального слоя ставим непрозрачность 75%, а для дубликата оставляем 100%,
сохраняя пропорции при уменьшении.

Шаг 7

Далее используйте «Pen Tool», что бы сделать изогнутую полосу, как показано на
рисунке:

Щелкните на слое правой кнопкой и выберете пункт «Rastersize». Теперь примините такие
фильтры к слою:
«Filter > Blur > Gaussian Blur» (Radius = 0.5 px)
«Filter > Sharpen > Sharpen Edges»
Потом применим стили слоя:

Шаг 8

Создайте новый слой и назовите его «Тень». Поместите его под слой с полосой. Затем
кликните по слою с полосой с зажатой клавишей Ctrl и перейдите в «Select > Modify >
Expand». Поставьте радиус в 2 px и нажмите «Ок». Получившиеся выделение заполните
черным цветом, оставаясь на слое «Тень». Далее примените к слою «Filter> Blur> Gaussian
Blur» (Radius = 0,5 px).

Теперь нужно убрать лишнюю часть тени. Для этого кликните по слою «Тело», затем с
зажатой клавишей Shift кликните по слою «Шея». Перейдите в «Select> Modify> Contract»
поставьте в настройке 1 px и нажмите «Ок». Встаньте на слой «Тень», нажмите Shift+I и
затем Delete.

Шаг 9

Создайте форму, как показано ниже, с помощью «Pen Tool» (P) и наложите такой же
градиент как для слоя «База».

Шаг 10

Инструментами «Rectangular Marquee Tool» и «Elliptical Marquee Tool» создайте фигуру
как на рисунке, объедините их в один слой и заполните черным цветом. Оставаясь на этом
слое перейдите в «Layer > Add Layer Mask > Reveal All» и заполните черно-белым
градиентом сверху вниз как показано на рисунке.

Шаг 11

В этот шаге повторите шаги 7 и 8 чтобы создать полоску и тень для наконечника пера как
показано на рисунке.

Шаг 12

Продублируйте набор слоев «Перо». Затем скройте первоначальный набор (это будет
резервной копией) и объедините все видимые слои в один. Затем идем в «Edit> Transform>
Rotate» и поворачиваем слой на 45 градусов по часовой стрелке. В конце накладываем
несколько стилей слоя.

Оригинал урока
За перевод большое спасибо Zel'у

Что-то в этом есть :-)
Полная фотка 5 метров

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

Сам CSS не позволяет изменять ширины букв, но свойство letter-spacing позволяет изменять расстояние между буквами и неразумное использование может быть критичным:

<h2 class="squish">letterfit</h2>
h2.squish {letter-spacing: -0.1em }

Получаем:

Letterfit is important

Стилистически текст может выделится на сайте, но читабельность его многократно падает.

«Кернинг — изменение пространтсва между определенными парами букв, служит для упорядочивания межбуквенных пробелов. Например в таких словах как Washington или Toronto, в сочетаниях букв Wa и To применяется кернинг.»

В настоящее время нет рабочего механизма в CSS или HTML для конкретной работы с кернингом. Однако веб не требует таблично точных значений кернинга, а таблицы кернинга встроены в сам шрифт. В этих таблицах определено, какие пары необходимо корректировать и в какой степени, в зависимости от операционной системы.

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

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

Для ручной правки в «особых» местах нужно пользоваться inline элементом, таким как span и применять свойство letter-spacing, например:

<span class="kern">W</span>ashington
and <span class="kern">T</span>oronto
.kern {letter-spacing: -0.1em }

Получаем:

Washington and Toronto

Используя регулярные выражения можем автоматизировать расстановку кернинга:

$search = '/(T)(o)|(W)(a)/';
$replace = '<span class="kern">$1$3</span>$2$4';
$text = preg_replace($search,$replace,$text);

На будущее

В текстовом модуле CSS3 добавлены свойства kerning-mode и kerning-pair-threshold, но эти свойства еще не полностью поддерживаются браузерами и не до конца описаны.

Филипп Старк (фр. Philippe Starck, род. 18 января 1949) — известный французский дизайнер. Признанный с 80-х годов во всём мире дизайнер интерьера и потребительских товаров серийного производства.

Design for Life Episod 1

Design for Life Episod 2

Design for Life Episod 3

Design for Life Episod 4

Design for Life Episod 5

Design for Life Episod 6