Студия Tolesson из Сан-Франциско.

P.S. В этом релизе, пожалуй самое значительное улучшение Adobe Photoshop со времён CS. Обзор писать лень.
P.P.S. OMG, я не писал в блог с июля 2011 года. Почти год прошёл. И в черновиках куча уже неактуального хлама…

Говорят, владельцы «андроидов» в среднем 15 минут в день тратят на объяснения почему они не купили iPhone.

Случилось то, чего никто не мог ожидать и никто не мог в это поверить. Даже я сам. Я купил смартфон на Android. Хотелось попробовать «как оно».

Выбирал из трёх моделей: HTC Desire HD, Samsung GT-I9000 Galaxy S и HTC Desire.

Первый «впечатлил» размерами экрана — такая «лопата» точно не для меня. Качество и разрешение этого экрана тоже оставляло желать лучшего.

Samsung весьма хорош и по дизайну (уж больно похож на айфон), и по экрану, но неоправданно дорог (сопоставим по стоимости с четвёртым айфоном).

Чтож, остался HTC Desire, который я и приобрёл в некой noname-лавочке из топа Яндекс.Маркета. Теоретически была возможность дождаться нового Desire S, но, к сожалению, телефон мне нужен был срочно.

Андроид в целом мне понравился. Но, со временем, по мере «нахождения» косяков, он мне нравился всё меньше и меньше.

Не забывайте, что я сравниваю девайс (соответственно, и ОС) трёхлетней давности (iPhone 2G) с девайсом годичной давности (HTC Desire). Айфоном я пользовался три года, Дизайром — 5 месяцев.

Немного про аппаратную часть

В сети сотни подробнейших обзоров HTC Desire, но, тем не менее, я пройдусь по некоторым особенностям, которые показывают «недостаточную продуманность» девайса от HTC. Возможно, умышленную, так как продукты HTC конкурируют между собой, а телефоны Apple — нет. Различных андроидофонов уже наклепали сотни, а айфон, в общем-то, один.

Все телефоны, что у меня были до айфона хрустели и Desire не исключение. Прохладный алюминий моего 2G был гораздо приятнее на ощупь и не было никакого хруста (не знаю как с этим у «пластиковых» 3G и 3GS, у 4-го тоже хрустеть вроде нечему — металл и стекло). Нижняя часть в буквальном смысле испорчена кнопками и оптическим трекболом. Какой кретин догадался объединить кнопку «назад» с «поиском»? Слева две маленькие кнопки, а справа одна длинная. В новом Desire S кнопки сделали сенсорными. Молодцы.

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

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

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

Экран наглухо слепнет на солнце, делая невозможной работу с телефоном на улице.

Батареи на моём трёхлетнем айфоне хватало на два дня, тут же каждый вечер приходится ставить на зарядку, иначе с утра индикатор заряда гарантированно будет «красненьким». Говорят, что это беда всех девайсов на андроиде.

Что просто чрезвычайно круто — это наличие аппаратного светодиода-индикатора. Когда приходит почта — мигает зелёным, когда пришло сообщение в IM+ — горит синим. Мне очень нравится, что во всех девайсах от Эппл ничего не светится, когда они включены. В отличие от девайсов других производителей, которые сверкают, мигают, переливаются. Но на айфоне, чтобы узнать о каких-либо событиях, надо обязательно нажать на кнопку Home. Я почти уверен, что это сделано умышленно, чтобы люди чаще «светили» своими яблочными девайсами.

После пропадания связи (например, в метро) или при переходе с WiFi на 3G/EDGE, зачастую потом несколько минут не работает интернет. Не знаю, аппаратная это или софтверная проблема. Надеюсь, что первое.

Linux и красноглазие

Уже на третий день я не выдержал, сделал root и начал прошивать всякие прошивки официальные и не очень.

Ставил и знаменитый cyanogenmod, поразивший меня своей бесвкусностью из коробки (чего стоят только 4 иконки в ряд в лаунчере) и количеством действительно ненужных настроек.

В итоге остановился на очень хорошей прошивке Oxygen, автор которой весьма консервативен и использует официальное ядро андроида 2.3 с минимумом изменений. Что как раз в моём вкусе. Так что всё нижеописанное будет написано с учётом того, что у меня андроид версии 2.3.4. И, что последняя iOS, которой я пользовался, была 3.2 (но знаком со всеми версиями вплоть до ещё не вышедшей 5.0)

Примерно через неделю я успокоился и больше уже ничего не менял. Совсем.

UPD. А ещё через несколько месяцев нашёл великолепную прошивку MIUI и был почти счастлив.

Интерфейс и софт

Бессмысленно спорить, что по красоте и удобности интерфейсов Apple впереди планеты всей.

Оболочка Sense от HTC мне сразу не понравилась.

До покупки Desire, Android я видел только на скриншотах. Мне нравилось в интерфейсе стильное сочетание чёрного, белого, оранжевого и, в меньшем количестве, зелёного цветов. Монохромные иконки тоже были к месту.

В оформлении же HTC Sense преимущественно используется зелёный цвет, «модные» стеклянные блики, нелепые огромные скругления углов, аляповатые разноцветные иконки. Выглядит как-то по-китайски что-ли… Хотя, не удивительно, ведь HTC — тайваньская компания. А оригинальный интерфейс Android делали, скорее всего, западные дизайнеры.

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

Единственное, что очень понравилось в HTC Sense — это виджет погоды с просто потрясающей красоты анимацией.

Самым непривычным в интерфейсе андроида после Айфона для меня было отсутсвие кнопки «Назад». На iOS эта кнопка всегда находится в верхнем-правом углу интерфейса. На моём Desire она аппаратная и располагается в правом нижнем углу корпуса. Приходится каждый раз отвлекаться от экрана и тянуться к кнопке. Причём, каждый производитель имеет своё мнение по поводу расположения этой кнопки (опять же, к разговору о целостности). Нет никакого контроля, кто как хочет, тот так и делает.

Официальные приложения, которые по большей части были у меня установлены на айфоне (Skype, Twitter, Dropbox, BeejiveIM, Facebook), на андроиде сделаны достаточно удобно и красиво, но… по-разному. Причём, что ужасно, некоторые из них в точности повторяют интерфейс айфоновской версии (QIWI кошелёк, Альфа-банк), нарушая андроидовские гайдлайны.

Я до сих пор бываю в шоке при посещении Google Market, когда вижу в топе продаваемых приложений что-то типа Titanium Backup Pro, MyBackup Pro или Mighty Grocery. Что тут говорить, скриншоты говорят сами за себя:

Сделайте мне это развидеть! Прям сразу вспоминается Windows Mobile. Какие гайды интерфейсов, вы что?

Избалован я АппСтором…

Софта уже достаточно много, но процент по-настоящему качественного гораздо меньше, чем в App Store. Больше всего я страдаю из-за отсутствия нормального todo-менеджера с десктопным приложением под мак. Для айфона и мака есть чрезвычайно клёвые Things и OmniFocus. Для андроида и близко ничего подобного нет. Пока остановился на связке EverNote и SpringPad. Хотя, первый годится только для заметок, а во втором нет проектов и десктопного клиента. Пичаль.

Синхронизация с сервисами Google (почта, календарь, контакты), сделана не хуже, чем на айфоне (что, в общем-то, не удивительно — удивительно, что не лучше).

Браузер чисто тактильно проигрывает Safari, сложно объявнить, но в Safari всё как-то плавнее и приятнее, а на новых айфонах по идее, всё вообще идеально должно быть. Flash на мобильных девайсах — тормозит и не нужен, это уже признают даже в Adobe. В iOS есть офигенная фича — при тапе по статусной панели или заголовку в браузере страница скроллится в самый верх. На андроиде я где-то месяц отвыкал от этой фичи.

Очень долго искал как вбить статический IP-адрес для вайфай-сети. Пришлось даже гуглить. Оказывается в настройках вайфая надо нажать кнопку Menu (вообще наличие этой кнопки — большая глупость, да и остальных кнопок в общем-то, тоже), там в меню будет пункт Advanced. Офигеть! Причём эти настройки не запоминаются для разных сетей, приходится каждый раз лезть туда…

Вот оно где!

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

Зачем нужны пустые рабочие столы? Почему нельзя добавлять их динамичекси? Почему их только пять? А вот виджеты чрезвычайно удобны — я использую четыре: погоду, пробки, настройки и твиттер. В iOS 5 некоторое подобие виджетов тоже появится, что не может не радовать. Но, чем ещё хорош андроид — можно заменять системные приложения другими, тот же лаунчер, менеджер сообщений, браузер и прочие. Другое дело, что эти приложения по качеству, зачастую, гораздо хуже системных…

У меня заполнено только три рабочих стола из пяти

«Живые обои»? Прикольно-прикольно. Через день уже поставил статическую картинку — время работы от батарее гораздо важнее переливающегося фона.

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

Скроллинг списков подтормаживает. Помнится, когда был анонсирован новый Android-девайс с двухядерным процессором на хабре в комментах кто-то написал: «может хоть на нём скроллинг не будет тормозить». Лол. Фейл.

Клавиатура в 2.3 достаточно удобна (а вот в HTC Sense раскладка клавиатуры просто отвратительна). На айфоне кнопки шире, так как соотношение сторон экрана там «более квадратное». Спустя четыре месяца пользования, на дизайре я всё равно делаю в наборе больше ошибок, чем на айфоне.

За всё время, что у меня андроид я не поставил ни единой игры. Так что в этом плане ничего сказать не могу.

То, чем я не пользовался на айфоне, этим я продолжаю успешно не пользоваться и на андроиде. Режим USB-флэшки, пресловутая многозадачность (хотя она появилась в новых версиях iOS), ни разу не передавал файлы по блютусу, ни разу не доставал карту памяти — это всё мне не нужно. Печалит отсутствие синхронизации с айтюнсом (тут меня закидают помидорами, но я к ней привык и она кажется мне удобной!).

Вердикт

В общем и целом, Android и iOS сейчас практически равны по возможностям, и у тех и у других, как полагается, есть свои плюсы и минусы (причём, что интересно, многие достоинства одной платформы стали бы недостатками на другой и наоборот).

На стороне iOS: интерфейс, качество и количество приложений, стабильность, разрешение и качество экрана (хоть это и аппаратная часть, но почти у всех андроидофонов разрешение экрана меньше, а сам экран больше и SIPS, ЕМНИП, больше никуда не ставят), время работы от батарей.
На стороне Android: большое количество устройств, нет привязки к iTunes, кастомизируемость (возможность замены системных приложений сторонними), лучшая поддержка сервисов Google.

Пользователям Маков (коим являюсь я) андроид однозначно противопоказан. На своём опыте могу сказать — лучше даже не пробовать. Гикам и особенно линуксоидам — наоборот, вполне даже «показан». Следует заметить, что андроид очень быстро развивается и через некоторое время (например, после выхода 4.0) данная статья будет уже не очень акутальна.

Я думаю, уже понятно, что мой выбор — iOS и, соответственно, iPhone. Посему, с андроидом я в ближайшее время распрощаюсь.

Пощупать бы ещё Виндовсосевенофон из любопытства, но, боюсь, что там совсем всё плохо… Заинтересовала Nokia n9, но перспективы её туманны…

P.S. Ах да, ради чего всё это было написано! Реклама: продам HTC Desire в состоянии нового — 10 000 рублей.

UPD. Айфон я всё-таки приобрёл — доволен аки слон. Оказалось, что со времён моего iPhone 2G очень многое изменилось. Desire пока не продал, и сейчас пользуюсь двумя телефонами. Просто небо и земля. Андроид в руки брать не хочется. После двух недель пользования перечитал этот пост, писать новый или обновлять этот пост особо смысла нет, така как всё что написано выше вполне актуально.

Наконец-то получил свой инвайт на Dribbble. Если кто не знает, это такой «Твиттер для картинок», созданный дизайнерами для дизайнеров. В Твиттере можно использовать 140 символов, в Дрибббблере же вам доступно 120 000 пикселей. Все клёвые западные, и многие наши дизайнеры уже там и не переставая постят разные картинки. К слову, свой инвайт я ждал около месяца, хотя и висел почти всё время в топе «перспективных» (prospects — список мечтающих получить инвайт).

Дизайнеры выкладывают то, над чем работают в данный момент: иллюстрации, интерфейсы, иконки, логотипы, шрифты. В общем, всё что может быть интересно любому дизайнеру. Естественно, картинки можно отмечать, нажимая «Like». Можно грабить корованы оставлять комментарии. Картинки с наибольшем количеством «лайков» появляются в топе. Тут ничего необычного:

Зачем это всё нужно? Да этот сайт — просто нескончаемый источник вдохновения. И своим вдохновением тоже можно и нужно делиться. И удовлетворять своё тщеславие, куда же без этого. :3

Дебютировал я на «Дрибббле» со своей задротской иконкой-переростком Canon 5D Mark II, набрал за сутки более ста «лайков» и полдня провисел на главной. :3 Что, в общем-то, предсказуемо, там такое любят. Правда, больше мне пока выкладывать нечего, всё новое очень сильно не дотягивает до «Марка», боюсь разочаровать фолловеров.

Я уже отметил «лайками» более 800 картинок. В основном это интерфейсы и иконки. Периодически пересматриваю и всячески вдохновляюсь, так сказать.

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

И ещё есть ember, но там открытая регистрация. Никакой «элитарности» — кому он такой нужен?

1. $('<div />', {
2. id: 'martini'
3. });

Раньше, как правило, делалось так:

1. $('<div id="martini"></div>');

Если создавать просто один div с id, то это вполне наглядно. А вот если требуется «биндить» события, то новый способ гораздо нагляднее (особенно если вспомнить про сравнение версий в SVN или GIT):

1. $('<div />', {
2. id: 'martini',
3. click: function(e) {
4. e.preventDefault();
5. $(this).animate({opacity: .1});
6. }
7. });

:3

Можно и так:

1. var anchor = $('<a />', {
2. className: 'more-whisky',
3. href: '#whisky',
4. text: 'More whisky',
5. click: function(e) {
6. e.preventDefault();
7. $(this).parent().slideToggle();
8. }
9. });
11. $('li').each(function() {
12. $(this).prepend(anchor.clone());
13. });

Красота! Зачем клонировать элемент? Потому, что переменная ссылается на одиночный элемент. Если вы его не склонируете, то в итоге получите только один вставленный элемент на странице.

И… Данная возможность в jQuery уже год.

Подробнее и ещё несколько примеров в документации.

Мощь! Внушает. Но… зачем?

Очевидно же — хотят заработать на футболках и стикерах.

Также были нарисованы иконки для семейства HTML5-технологий:

А вот эти уже и правда могут пригодиться…

Например, для членомерной кнопочки, которую можно сгенерить на этом же сайте:

Хм, действительно, выглядит довольно фаллично

Я не буду ставить этот шильдик у себя в блоге, хотя некоторые его части уже используют новые теги и CSS3. Потому что это мне чем-то это напоминает время когда все ставили картинки «Valid XHTML», «Valid CSS» (некоторые и до сих пор ставят), а ещё в более давнее время «Best viewed in Internet Explorer 6». Who cares?

P.S. Эх, немного саркастичный пост получился, на самом деле круто это всё. И сайт приятный и типографика. И вообще — нраица.

И вспомнил я, что давно хотел научиться рисовать большие иконки. В векторе… И тут меня переклинило (да так, что остальные иконки для сайта так до сих пор и не сделал ) — я начал изучать инструмент Gradient Mesh в Adobe Illustrator. А так как переклинило меня на иконке фотоаппарата, то через три дня получилось вот это:

Это не трейс. Всё ручками, ручками:

Векторная сетка

В фотошопе дорисовал только «кожаное» покрытие ручки и чуть покрутил кривые.

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

UPD. А вот это уже следующий уровень задроства.

По клику — большая картинка

UPD. Большая картинка на русском.

Больше всего изменился интерфейс. А в остальном — это старая добрая Miranda Me.

Miranda Me базируется на лучшем ICQ-клиенте — Miranda IM, который поддерживает и множество других популярных IM-протоколов, таких как Jabber, Mail.Ru, MSN и благодаря поддержке плагинов обладает практически неограниченными возможностями расширения.

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

Иконка приложения точно такая же как у всех приложений CS5

Интерфейс в новой версии практически не изменился:

Нововведений (по сравнению с Aperture 3, где было около 300 изменений) не очень много, но среди них есть довольно-таки существенные:

1. Улучшено качество RAW-конвертирования

В новой версии были значительно переработаны алгоритмы RAW-конвертации, подавления шумов и повышения резкости. Изменения в движке Lightroom 3 были настолько значительными, что в Adobe приняли решение ввести так называемые варианты обработки (Process Versions). На данный момент можно выбрать из двух: Process Vesrion 2010 и Process Vesrion 2003. Все фотографии, которые вы будете импортировать после обновления библиотеки до третьей версии, будут обрабатывться новой версией — Process Vesrion 2010, а старые (импортированные в Lightroom версий 1 и 2) — версией Process Vesrion 2003 (2003 и 2010 означают в каком году была введена технология обработки).

2. Новый алгоритм подавления шумов

Второе по важности нововведение. Шумы особенно заметны на фотографиях, сделанных при использовании высоких значений ISO. Цветной цифровой шум выглядит отвратительно. Для примера, приведу фотографию, сделанную с ISO 1600:

Впечатляет. Такие известные «шумодавильные» плагины как NoiseNinja и NeatImage теперь будут не нужны.
Яркостным шумодавом я стараюсь не пользоваться вообще, так как картинка, как правило, превращается в мыло.

3. Кривая по точкам

Прямо как в Photoshop:

Окошко редактирования маленькое и не увеличивается (собственно, как и в Photoshop)

Поканальных кривых до сих пор нет, а для меня это один из самых важных инструментов. Видимо, не хотят конкурировать со своим же Photoshop.

В Aperture и окошко редактирования кривых побольше и поканальные кривые в наличии.

4. Автоматическое исправление оптических аббераций

В Lightroom встроены профили для большинства популярных объективов и камер от Canon, Nikon, Sigma, Sony и Tamron. Теперь исправить геометрические искажения (бочко- и подушкообразные дисторсии), хроматические абберации и виньетирование можно одним кликом, причём нужный профиль выставляется автоматически (по EXIF). Ну и, конечно же, можно вручную крутить бубочки для достижения лучшего эффекта.

Автоматический режим

Ручной режим

Также появилась функция исправления перспектвных искажений.

В Aperture автоматического исправления аббераций по профилям нет. Ждём Aperture 4.

5. Эмуляция плёночного зерна (Grain)

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

6. Пост-кроп виньетирование (Post-Crop Vignetting)

Ещё один способ испортить улучшить фотографию — это так называемое художественное виньетирование:

Появилось три режима:

• Highlight Priority — стиль по умолчанию. Максимально повторяет эффект оптического виньетирования.
• Color Priority — подобен предыдущему стилю, но с применением коррекции оттенка в области виньетирования.
• Paint Overlay — эффект основан на градуированном смешении черного или белого.

7. Новый диалог импорта

Стало на порядок удобнее и понятнее:

8. Автоматическое добавление водяных знаков (копирайтов)

Появилась возможность при экспорте добавить на фотографию копирайт в виде текста или картинки с большим количеством настроек (размер, количество, тень и прозрачность).

Больше, ещё больше копирайтов на пол-фотографии!

Было в Aperture с первой версии.

9. Увеличена производительность

Lightroom 3 — полноценное 64-битное приложение. Заметно увеличена производительность интерфейса, а вот работа с фотографиями в новой версии стала помедленнее и превьюшки создаются дольше. Чтож, качество обработки требует жертв.

Если честно, я ожидал большей разницы с Aperture 3. Так и хочется написать, что производительность была увеличена также и в третьей версии Aperture.

10. Поддержка видео-файлов

Не самая нужная функциональность для фотографа… Тем не менее, владельцы камер с возможностью записывать видео будут довольны.

11. Создание слайд-шоу с музыкой

Теперь можно экспортировать слайд-шоу в видео-файл в формате MP4 (кодек H.264). Есть возможность оптимизации для мобильных устройств, а также автоматическая загрузка на онлайновые сервисы.

12. Интеграция с Flickr

Теперь можно закачивать фотографии на Flickr прямо из библиотеки Lightroom. Причём, когда друзья или контакты комментируют или отмечают фотографию, вы сможете это увидеть прямо в своей библиотеке.

Помимо поддержки Flickr, в третьей Aperture появилась поддержка Facebook.

13. Захват фотографий с подключенной камеры (Camera Tethering)

Подключив камеру с помощью USB или FireWire к вашему компьютеру, вы cможете получать фотографии c камеры прямо в базу Lightroom сразу после съёмки.

Пока поддерживаются только камеры от Canon и Nikon, но далеко не все:

*Данные камеры не поддерживаются в 64-битных версиях Windows.

Это ещё не все

Я описал только основные и самые важные изменения. Новая версия включает очень много мелких изменений, которые я не мог заметить, так как редко пользуюсь Lightroom. Если заметили какую-то неточность или хотите что-нибудь добавить, оставьте комментарий.

Вывод

Если вы давно пользуетесь Lightroom, то обновиться до третьей версии нужно как можно скорее. Скачать 30-дневную пробную версию Lightroom 3 можно по следующему адресу: https://www.adobe.com/cfusion/tdrc/index.cfm?product=photoshop_lightroom.

Если у вас Mac, и вы до сих пор не знаете что выбрать, я порекомендую купить Apple Aperture 3. Дешевле на 100 долларов, гораздо удобнее, да и по возможностям Aperture 3 значительно превосходит Lightroom 3. Рекомендую также ознакомиться с моим обзором Aperture 3.

Мне до сих пор выносит мозг разделение каталога и режима редактирования в Lightroom. Чуда не произошло, я остаюсь на Aperture.

Это иконка CSS Edit 2, хотя в статье не будет ни слова о CSS Edit 2

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

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

Для начала, пара провокационных советов:

1. Пришло время прекратить поддержку Internet Explorer 6

Возможно, меня закидают камнями, но, сколько можно? Этому браузеру 9… Да, девять лет! Сейчас им пользуется около пяти процентов пользователей рунета, Microsoft делает всё возможное для уменьшения этой цифры. К сожалению, предлагая скачать не намного более современную 8-ю версию своего браузера.
Нет, я не ратую за отказ в доступе к сайтам с устаревших браузеров. Лучшим решением представляется уведомление пользователя, например: «ваш браузер устарел и не поддерживается — функциональность данного сайта может быть ограничена» и ниже привести список рекомендуемых современных браузеров. Так уже сделали на YouTube, Google Docs (к концу 2010 года планируют прекратить поддержку в Google Mail и Calendar) и на многих других популярных сайтах и порталах. Я думаю, это очень хороший повод для того чтобы начать делать так же. А время, которое было бы потрачено на поддержку IE6, лучше потратить на разработку новой полезной функциональности.

2. CSS3

Большинство расценивает CSS3 только как возможность сделать закруглённые уголки и добавить тень. Но, на самом деле, возможностей гораздо больше: загружаемые шрифты, outline, транформации, flexible box layout, многоколоночная вёрстка, текстуры для контуров, медиа-апросы и многие-многие другие чрезвычайно полезные штуки.

Хотя CSS3 ещё в разработке, большинство современных браузеров уже поддерживают основные возможности, зачастую с префиксами (например: -moz-border-radius и -webkit-border-radius для Firefox и Safari/Chrome соотвественно).
Не стоит забывать, что по статистике большая часть пользователей до сих пор пользуется браузерами, не поддерживающими CSS3 (все версии Internet Explorer). Но начинать применять CSS3 стоит уже сейчас.

3. Сброс CSS (CSS Reset)

Причиной появления так называемых сбросов CSS явилось то, что отображение элементов не стандартизировано и в разных браузерах (и даже в одинаковых браузерах на разных системах) они могут выглядеть по-разному. CSS Reset устанавливает значения параметров для всех элементов в одинаковое состояние. В следствие чего, достигается лучший контроль над стилями и возникает гораздо меньше проблем с кроссбраузерностью, и, как ни странно, уменьшается объём кода. Я использовал CSS Reset на трёх последних проектах и планирую использовать дальше.

Как оказалось, я и раньше использовал сброс CSS, но он был очень простой и только для отступов:

1. * {
2. margin: 0;
3. padding: 0;
4. }

Сейчас используемый мной метод гораздо сложнее и объёмнее, его можно увидеть в моей вики на странице CSS Code Style. Да, это самый известный CSS Reset, предложенный известным экспертом по CSS Эриком Мэйером.

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

4. Способы так называемой «очистки потока»

Для того чтобы внешний контейнер (блок, в котором находятся другие блоки) полностью «обтягивал» вложенные плавающие блоки, я использую следующие способы:

1. Совершенно новый способ:

   1. .clearfix {
   2. visibility: hidden;
   3. display: block;
   4. font-size: 0;
   5. content: " ";
   6. clear: both;
   7. height: 0;
   8. }
   9. * html .clearfix { zoom: 1; }
   10. *:first-child+html .clearfix { zoom: 2; }

2. Стиль overflow: hidden; для контейнера (для IE потребуется добавить height: 1%;). C overflow надо быть поосторожнее, так как он скроет все элементы не поместившиеся в блок, для которого он задан.

3. Самый старый, но не очень красивый способ — в конце внешнего контейнера добавляется <div style="clear: both;"></div> или <br clear="all" />

5. Когда нужно прилепить «подвал» к нижней части страницы

HTML будет такой:

1. <html>
2. <body>
3. <div id="content">
4. <div id="footer-clear"></div>
5. </div>
6. <div id="footer"></div>
7. </body>
8. </html>

Стили, для «подвала» высотой в 40 пикселей:

1. html, body {
2. height: 100%;
3. }
4. #content {
5. min-height: 100%;
6. }
7. #footer {
8. height: 40px; margin-top: -40px; position: relative;
9. }
10. #footer-clear {
11. height: 40px; clear: both;
12. }

6. Выравнивание блока по горизонтали

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

1. /* Content */
2. #content {
3. width: 900px;
4. margin: 0 auto;
5. }

7. Блок, выровненный по центру страницы

Пример для блока размерами 400×300 пикселей (параметры margin-left и margin-top должны быть равны отрицательной половине ширины и высоты соответственно).

1. #content {
2. position: absolute;
3. top: 50%;
4. left: 50%;
5. width: 400px;
6. height: 300px;
7. margin-left: -200px;
8. margin-top: -150px;
9. }

8. Картинка, меняющая размер в зависимости от ширины блока

1. img {
2. max-width: 100%;
3. }

Картинка будет автоматически пропорционально уменьшаться, если внешний блок будет меньше размера самой картинки. Но только тогда, когда не указаны размеры картинки у тега <img> с помощью атрибутов width и height.

9. Замена текста картинкой

1. h1 {
2. text-indent: -9999px;
3. width: 200px;
4. height: 40px;
5. background: url('logo.png') no-repeat;
6. }

Мне не очень нравится этот способ из-за text-indent: -9999px, но он работает.

10. При ограничении максимальной ширины макета удобно задавать max-width в единицах em

Это позволит, при изменении размера шрифта в браузере, сделать длину строки постоянной. Хотя сейчас почти все браузеры по умолчанию изменяют размер страницы полностью, а не только текст.

11. Старайтесь меньше использовать флаг !important

!important повышает приоритет помеченного им свойства. Я использую его в очень редких случаях, в основном, когда требуется что-то быстро исправить. Лучше использовать более строгое наследование.

12. Указывайте несколько шрифтов

Я, например, работаю на платформе Mac и у меня нет многих шрифтов, которые предустановлены в Windows, как и наоборот (тоже самое и с Linux и прочими операционными системами). Поэтому рекомендуется задавать несколько похожих шрифтов, которые присутствуют в разных системах:

1. font-family: 'Lucida Grande', 'Segoe UI', Tahoma, Arial, sans-serif;

В конце указано ключевое слово sans-serif, что означает «шрифт без засечек». Бывают ещё serif (с засечками) и monospace (моноширинный). Шрифты по-умолчанию настраиваются в браузере.
В интернетах есть таблицы «похожести» шрифтов для разных операционных систем.

13. Сокращённые цвета

При задании шестнадцатеричного цвета можно использовать сокращённую запись: например, вместо #000000 записать #000, или вместо #aabbcc — #abc.
Я часто использую следующие цвета:

• Чёрный: #000
• Белый: #fff
• Тёмно-красный (для ошибок): #b00
• Cерый оттенки я всегда указываю в трёх цифрах, подбирая на глаз, Есть и любимые: #666 и #bebebe.

14. Всегда задавайте стиль для посещённых ссылок

Стиль можно задать с помошью селектора для ссылки :visited. Не заданный стиль для посещённых страниц — одна из самых распростронённых ошибок. Удивяет, когда посещённые ссылки не подсвечиваются в какой-либо документации или вики.

При указании стиля для разных состояний ссылки нужно помнить о правильном порядке задания правил: :link :visited :hover :active (есть даже специальная фраза для запоминания: LoVe HAte).

15. Не задавайте уже унаследованные свойства

У каждого элемента есть свойства унаследованные или заданные по-умолчанию. Нет никакого смысла их указывать повторно.
Например:

1. body {
2. color: #000;
3. }
4. p {
5. font-weight: normal;
6. color: #000;
7. }

Здесь свойство font-weight у элемента p по-умолчанию равно normal, а цвет текста color был уже задан глобально для body, и наследуется для всех вложенных элементов.

16. Используйте CSS-спрайты

CSS-спрайт — это картинка состоящая из несколько картинок, которые с помощью background-position можно присвоить различным элементам.
Использование спрайтов уменьшает количество запросов и увеличивает скорость загрузки страниц. Спрайты — это очень полезная штука, достойная отдельной статьи. Писать я её не буду, так как по запросу в гугле «CSS спрайты» выводится очень много подробных статей.

17. Старайтесь использовать относительные размеры шрифтов в em и %

Сейчас я всегда использую следующий способ задания размера для шрифтов: body { font-size: .65%; }
У остальных элементов размер задаю или процентами или em-ами. При этом, font-size: 130% будет равен 13 пикселям, .7em — соответственно, 7 пикселям.
То же применимо и к отступами, если не требуется попиксельного совпадения макета и вёрстки. Тогда при увеличении масштаба страницы отступы будут увеличиваться вместе со шрифтами.

18. Не стоит писать в стилях единицы измерения для нулевых значений

Единицы измерения для значения длины обязательны, кроме двух случаев: line-height и нуля. Ну с нулём всё понятно — нуль он и есть нуль, нет никакого смысла писать после него единицу измерения. А для line-height любое число без знака будет восприниматься как множитель от размера шрифта. Например, значение 1.5 установит полуторный межстрочный интервал.

19. Пробуйте выключать картинки, CSS и JavaScript

Обратите внимание как смотрится сайт и все ли ссылки работают с выключенными скриптами, нет ли белого текста на белом фоне из-за отключенных картинок.

20. Поиск ошибок

Элементарное средство поиска ошибок:

1. * {
2. outline: solid 100%;
3. }

Также я часто задаю либо бордеры, либо фоновый цвет для блока, с которым у меня какие-либо проблемы.
Настоятельно рекомендую разобраться с расширенями браузеров (FireBug в Firefox, Inspector в Safari/Chrome, Dragonfly в Opera) — очень упрощают написание кода и поиск ошибок.

21. Старайтесь красиво форматировать и комментировать код.

Многие верстальщики не ставят пробелы после двоеточий и запятых в CSS.
Смотрится немного кашеобразно:

1. background:#301b18;
2. line-height:1.5;
3. font:.8125em 'Helvetica Neue',Helvetica,Arial,sans-serif;
4. color:#fff;

Так, пожалуй, намного лучше:

1. background: #301b18;
2. line-height: 1.5;
3. font: .8125em 'Helvetica Neue', Helvetica, Arial, sans-serif;
4. color: #fff;

Насчёт комментариев… Кто-то предпочитает самодокументируемый код, кто-то половину времени тратит на написание комментариев. Не стоит комментировать каждую строчку, достаточно выделить основные блоки.

Мой Code Style для HTML и CSS можно глянуть в вики: Code Style.

22. Чувствительность к регистру

Применимо только к случаю, когда CSS используется вместе с XHTML — имена элементов и селекторы становятся чувствительны к регистру. Я всегда использую в селекторах нижний регистр и вам рекомендую.

23. Отступы для вложенных элементов в коде CSS

Неоднократно встречал такие отступы:

1. #content {
2. }
3. .entry {
4. }

Может кому-то будет удобно, я же предпочитаю классическое форматирование:

1. /* Content */
2. #content {
3. }
4. #content .entry {
5. }

24. Указывайте типы элементов только когда это явно нужно

Например, для указания разных стилей для элементов с одинковым классом:

1. span.active {}
2. em.active {}

А вот в данном случае вместо:

1. div#content {}
2. div#aside {}

Лучше писать:

1. #content {}
2. #aside {}

Есть случаи, когда тип элемента лучше оставить для наглядности и лучшей читаемости (особенно, если над проектом работаете не вы один):

1. ul li {}
2. ul li.active {}

Вторая строчка показывает то, что класс active должен задаваться именно для li, а не какого-либо другого элемента.

А вот для ссылки я уже напишу:

1. ul .active a {}

Тут я задаю стили для ссылки, которая находится в активном элементе, неважно в каком именно.

Для ID вообще нет смысла писать тег, так как этот элемент должен быть уникален на странице.

25. Несколько классов для элемента

В HTML можно задать несколько классов для одного элемента.
Пример: на странице есть боковая панель, в ней есть несколько блоков (я называю их виджетами). Сначала я задаю общий стиль для всех виджетов:

1. .widget a {}

Затем задаю стили для специфических виджетов:

1. .widget-news {}
2. .widget-links {}

Я мог бы не писать приставку “widget-”, но так выглядит гораздо нагляднее.
А затем в HTML пишу:

1. <div class="widget widget-news"></div>

26. Иногда можно (и даже нужно) отступать от Code Style в пользу наглядности

Например, когда надо задать размер шрифта у нескольких элементов подряд, можно написать стиль в одну строчку:

1. h1 { font-size: 2.4em; }
2. h2 { font-size: 1.8em; }
3. h3 { font-size: 1.4em; }

Читается гораздо лучше.

27. Указывайте ID или CSS у тега body

Это очень удобно в том случае, когда нужно задать специфические стили для определённой страницы. В данном случае на странице About заголовок будет красный, а на News — зелёный:

1. /* Content */
2. #about h3 {
3. color: #b00;
4. }
5. #news h3 {
6. color: #0b0;
7. }

28. Объединяйте свойства

Вместо двух свойств margin-left: 3px; margin-top: 6px; можно написать: margin: 5px 0 0 5px;

Свойства идут в порядке top right bottom left (для лучшего запоминания советуют слово TRouBLe).
Если задано два значения, то свойства объединяются: top-bottom и right-left.
Если три, то объединяются только правый и левый: top, right-left и bottom.

Тоже самое будет работать для padding и border-width.

Краткие записи существуют и для других свойств:
border-width: 1px;
border-style: solid;
border-color: #000;

В краткой записи будет выглядеть так:
border: 1px solid #000;

Для background (в порядке: color image repeat attachment position):
background: #333 url(bg.png) no-repeat fixed 0 0;

Для font (style variant weight size/line-height family):
border: italic small-caps bold 1em/1.1 'Lucida Grande', 'Segoe UI', Tahoma, Arial sans-serif;

Для list-style (type position image):
list-style: square inside url('li.png');

29. Разработайте свой, так называемый Тулбокс

Тулбокс — набор часто используемых стилей. Для примера, тулбокс от CSS-tricks. У каждого он свой.

30. Используйте условные комментарии (Conditional Comments) вместо хаков

Если есть потребность написать какой-нибудь код для IE определённой версии, то лучше использовать Conditional Comments вместо хаков. Я уже писал статью о хаках и условных комментариях.

31. Стоит делать код проще

Зачастую можно обойтись одним дивом вместо двух, трёх и более вложенных. Часто встречаю огромное количество вложенных дивов, которые были сделаны «на всякий случай», но затем не используются.

32. Редактор

Выбор редактора — довольно-таки важный момент. Не слушайте тех кто рекомендует вам блокнот.
Для меня главное в редакторе, это: подсветка синтаксиса, Zen Coding, сниппеты и подсказки по мере набора кода.
Я выбрал Espresso (моя статья про него). Для Mac я также могу порекомендовать Textmate и Coda. Под Windows — e-texteditor (подобие TextMate с поддержкой бандлов оного). А вообще лучше купить Mac. Я серьёзно.
А также Dreamweaver, Eclipse и Aptana, которые присутствуют для обоих платформ. Aptana — пожалуй, лучший редактор из бесплатных.

33. Изучайте чужой код

Именно изучайте, а не бездумно копируйте не предпринимая даже попытки разобраться.
Я лет 5 назад изучил код CSS сайта mozilla.org (и ещё многих других, которых уже не помню) вдоль и поперёк, уж очень он мне казался изяшным и навороченным. Очень многое мне оттуда пригодилось в дальнейшем.

34. Подпишитесь на RSS популярных блогов по веб-разработке

Всегда появляется что-нибудь новенькое. Вот недавно, например, опубликовали новую версию выпадающего меню на списках, без использования javascript, условных комментариев и каких-либо хаков. У блога, что вы сейчас читаете тоже есть RSS.

35. Коллекционируйте шаблоны кода

Собственно, эта статья и есть отличный пример — это часть моей коллекции решений.
Ещё у меня есть укромная папочка, в которой лежат шаблоны для Photoshop с различными сетками и заготовленной структурой папок слоёв. Папка с заготовкой проекта, в котором уже лежит CSS с часто используемыми блоками, пару HTML-страниц с подключенным jQuery, заголовками и стилями, папка для картинок и прочее.
Для этого даже поднял свою вики, в которой для общего доступа открыты две страницы с моим Code Style для HTML и CSS.

36. Изучайте jQuery.

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

37. Используйте семантическую вёрстку

Я уже писал небольшую статейку про семантическую вёрстку.

38. Не стоит слишком гоняться за стандартами

Здесь мнения часто расходятся, я нахожусь на стороне тех кто говорит, что главный валидатор — это браузер. Валидация ради шильдика «Valid XHTML & CSS» — лишняя трата времени, да и валидаторы ошибаются. Стандарты стоит знать и стараться им следовать, но без фанатизма.

39. Почитайте про SEO-оптимизацию

Каждый верстальщик должен знать как оптимизировать сайты.

40. Следите за дизайнером

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

41. Полезные ссылки

Консорциум Всемирной паутины (W3C) — там делают интернет. Оооочень много полезной информации (правда, на буржуйском). Там же можно найти валидатор.
Таблица совместимости браузеров.
Хабрахабр. Ну если вы ещё не знаете о этом сайте…

Уффф, это было долго — первая редакция подборки этой статьи появилась в декабре 2009 и постоянно допиливалась и дополнялась. Очень надеюсь, что хоть кому-нибудь статья будет полезна. А также принимаю поправки и дополнения.

Абсолютно неожиданно, компания Adobe выложила в свободный доступ триальную версию своего нового пакета Creative Suite 5 (CS5), о котором я уже неоднократно писал.

Сейчас доступны для скачивания две версии пакета: Creative Suite 5 Design Premium и Creative Suite 5 Master Collection.
Ну и отдельно приложения: Photoshop CS5 Extended, Illustrator CS5, Dreamweaver CS5, Flash Professional CS5, Premiere Pro CS5, After Effects CS5, InDesign CS5 ну и Acrobat 9 Pro.

Я тут же скачал первый пакет — CS5 Design Premium. Из всего пакета я пользуюсь только Illustrator и Photoshop (ну очень редко Flash и InDesign). О последнем я и решил написать этот обзор. Так как я счастливый пользователь Мака, естественно, что обозревать я буду маковскую версию.

Дрожащими руками жмакаем на новую иконку и видим новый сплэш:

Как и обещали, новый Photoshop CS5 под Mac был полностью переписан на фреймворк Cocoa и теперь нативно поддерживает 64 бита. Это становится заметно сразу после запуска: теперь нет проблем со Spaces (различные части окна не расползаются по разным рабочим столам). В целом интерфейс теперь работает гораздо шустрее и отзывчивее, окна и панельки перетаскиваются очень плавно, отлепляются и прилепляются без тормозов, как раньше.

Интерфейс

Для любителей пиксельхантинга предлагаю для сравнения два скриншота интерфейса Photoshop CS5 и CS4 (по клику откроется полноразмер):

Photoshop CS5

Photoshop CS4

Я минут десять переключал картинки чтобы увидеть все изменения в интерфейсе — настолько мне было любопытно что же они наменяли. А наменяли они достаточно. В частности изменилось положение контролов, они теперь расположены более аккуратно (хорошо видно, например, по лейблу Opacity в Layers — он теперь выровнен по центру).

Изменения в интерфейсе, которые я заметил с ходу:

• Кнопка закрытия вкладки в «маковой» версии теперь слева (аллилуйя)
• Новые иконки инструментов. Более тёмные, без контуров и менее контрастные
• Появились превьюшки в меню выбора начертания шрифта
• Все кнопки на панелях инструментов теперь плоские (хмм, вроде как это нарушает гайды Apple)
• Когда в панели Layers перетаскиваешь слой, то он становится полупрозрачным, раньше перетаскивался только контур
• При редактировании названия слоя или группы теперь работает горячая клавиша Cmd+A (выделить весь текст)
• Lens Correction переместили в корень меню Filter, раньше надо было ползти в Filter → Distort, и теперь ему присвоили горячую клавишу Cmd+Shift+R
• Странно, но в CS5 разделители пунктов меню занимают больше места, соответственно, до Flatten Image теперь тащить мышку (перо) дальше:
  

  Меню CS5 — слева

Редактирование изображения

Самыми главными фишками новой версии были объявлены функции Refine Selection Edge, Content-Aware Fill и Puppet Warp, о которых я напишу подробно:

Content-Aware Fill

Или заливка с учётом содержания. Продолжает функционал Healing Brush и Spot Healing Brush. Я уже писал об этом инструменте, посему перейдём к практике.

Возьмём, для примера, мою последнюю вертикальную панораму. Я делал её в CS4, отсутствующие части я «заделывал» штампом.

Попробуем заполнить недостающие части с помощью Content-Aware Fill:

Выделяем пустое пространство и вызываем меню Fill

Ждём несколько минут и… получаем это:

Ну чтож, я думал что будет намного хуже. В правой части фотографии получилось вообще отлично, слева — беда, смешались снег, вода и трава. Но признаю, что фотографию я выбрал сложную. А вот для удаления проводов, веток и прочих артефактов и заполнения недостающих однородных частей этот инструмент будет просто незаменим. Если раньше надо было долго приплясывать со штампом, сейчас (при наличии ровных рук) только обвести и нажать Fill.

Puppet Warp

Новый инструмент Puppet Warp, расположенный в меню Edit, предназначен для изменения формы объекта по контрольным точкам, причём процесс очень напоминает управление марионеточной куклой с помощью верёвок.

Долго искал подходящую фотографию в архиве, чтобы руки были видны, в итоге нашёл фотографию трюкача, которую я сделал на Старом Арбате. Надеюсь он не обидится. Воспользуемся усовершенствованным инструментом Quick Selection Tool (а затем и Refine Selection Edge, если нужно) чтобы отделить «модель» от фона, а затем заполним фон с помощью Content-Aware Fill:

Видно что после заливки фона у парня на заднем плане выросла вторая голова, но ничего страшного

И вот что может получиться:

Можно придать более выразительную позу или сделать карикатуру.

Я вообще, если честно, плохо представляю как сделать нечто подобное без этого инструмента. Разве что воспользоваться обычным Warp-ом.

Mixer Brush Tool

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

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

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

Инструмент Mixer Brush и новая кисть

Художники будут просто счастливы.

Ещё кое-что заметил в процессе работы над фотографиями:

• При увеличении размера холста, теперь можно выбрать цвет, которым будет заполнено увеличенное пространство
• Для инструмента Сrop можно включить сетку с третями
• Был в ужасе от того насколько быстро открылся диалог Save for Web
• При перемещении слоя теперь отображается его контур
• Наконец-то доработали Sharp Tool, теперь его использование не приводит к возникновению мерзких разноцветных артефактов, а также он теперь учитывает силу нажатия пера
• В Camera Raw появились два новых эффекта: зернистость (Grain) и виньетирование (Post Crop Vingetting).
  Сейчас многие (и даже я) любят всячески «портить» фотографии стилизируя их под плёнку: добавлять тёплый ламповый плёночный шум, пыль, царапины. И я подумал, ведь через несколько лет, когда появится Canon 5D Mark IX который не будет шуметь даже на ISO 100000, в Photoshop CS11 появятся специальные профили, которые будут эмулировать цифровой шум «старых» камер, таких как Canon 5D Mark II, Canon 500D и Nikon D90.
• Возможность изменить прозрачность нескольких слоёв одновременно
• Новая опция Straighten у инструмента линейка (Ruler Tool) для выравнивания заваленных горизонтов. Причём после выравнивания фотография автоматически кадрируется. Офигительно! Раньше же приходилось лезть в тормозной Lens Corrections, а потом ещё и кропить вручную.

Ну и как обычно, без ложки дёгтя не обошлось (даже без нескольких ложек):

• MiniBridge. При открытии панельки, в фоне открывается полноценное приложение Adobe Bridge, в панельке же показывается только часть его интерфейса. Вообще само приложение Bridge я недолюбливаю, тормозное и неудобное, мне проще и быстрее воспользоваться Finder. Но ещё потестирую — может моё мнение изменится
• Вместо Carbon-овых часиков вместо курсора, когда приложение чем-то занято, они сделали анимированную ромашку. Почему нельзя было сделать красивый системный разноцветный диск — непонятно.
• Я часто подключаю и отключаю внешний монитор. Проблема в CS4 заключалась в том, что когда работаешь в фотошопе с отключенным монитором, а затем подключаешь его и разворачиваешь Фотошоп на весь экран, то почему-то снизу от окна с картинкой остаётся около 200 пикселей пустого пространства. Помогает только закрытие и повторное открытие окна фотошопа. В CS5 это так и не исправили.
• Lens Correction уныл, чуть более чем полностью — профилей для линз мало (может пока что), так что PTLens — наше всё.
• В русской раскладке при нажатии Cmd+Shift+Opt+S открывается диалог Save As вместо Save for Web
• В idle-режиме новый фотошоп жрёт в средем на 0.3 процента процессорного времени больше:
  

  Сразу после запуска обоих версий фотошопа

Итог

Довольный я. Можно покупать.

P.S. Вот мне интересно, после выхода каждой версии в сообществах обязательно находятся люди, которые заявляют: «Ну вот опять, ничего нового, придётся ждать CS8, а пока я на CS3, CS, 7, 2.5, 1.0 (нужное подчеркнуть) посижу». Я вот только ради кнопки закрытия вкладки, перенесённой наконец влево, готов перейти на новый шоп. А тут просто мешок удобностей. И вот же, смотрю — опять кричат. Ну хотя да, это я.

Ещё заказал макрокольца, но о них как-нибудь в следующий раз… Больше ничего интересного у них в каталоге не обнаружилось.

По отзывам заказы оттуда приходят примерно через неделю-две. В наши Мухосрански, я предполагал, что где-нибудь за месяц дойдёт. Так и вышло. События развивались так: 9 марта я сделал заказ, 10-го ребята из GadgetInfinity его отправили, 12-го посылка уже покинула Гонконг. Дальнейшая судьба посылки мне была неизвестна, вплоть до 11-го апреля, когда посылка наконец-то начала трекаться на сайте Почты России, с 11 по 13-е число она была на обработке, 14-го была отправлена в Архангельск, 17-го (в субботу) я получил извещение и тут же сходил и забрал. Локально почта отработала быстро. По всей видимости, посылка долго проторчала на таможне.

Коробка довольно-таки стильная, триггеры внутри неё лежат в плотной пористой резине:

В комплекте

• Передатчик с антенной
• Приемник
• Три кабеля: на 3.5мм, на 6.35мм и PC-синхрокабель (CA-100)
• Две AAA алкалиновые батарейки GP
• Руководство пользователя
• Альбом «When Light Dances» с фотографиями, сделанными с помощью Cactus V4

Технические данные

• Радиочастота 433Mz
• 16 радиоканалов (переключаются на обоих триггерах)
• Время срабатывания: от 1/500 до 1/1000 секунды
• Скорость синхронизации: до 1/500 секунды (у меня срабатывает до 1/350)
• Максимальный радиус действия: 30 метров (пока не проверял)
• Рабочая температура: от -10°C до 45°C

Тестирование

Тестировал я их с камерой Canon 400D и вспышкой Canon Speedlite 430EX. Поддерживаются также и камеры Nikon и выспышки Nikon Speedlight.

Крепятся «кактусы» очень удобно и быстро, что передатчик к камере, что вспышка к приёмнику. Приёмник может выполнять роль подставки для вспышки, не очень устойчивой из-за небольших размеров:

Пыщь!

В пределах квартиры кактусы работали отлично, несрабатываний зафиксировано не было. Попробовал на улице: заявленные 30 метров отрабатывает — дальше уже работает нестабильно.

Добиться срабатывания на заявленной скорости синхронизации в 1/500 так и не удалось, на выдержках длиннее 1/350 вспышка видна уже не полностью. Но выдержки в 1/350 вполне достаточно, больше и не надо.

Достоинства

• Низкая цена
• Надёжное срабатывание
• Достаточно надёжный конструктив

Недостатки

• Плохо держится крышка батарейного отсека у приёмника (лучше сразу приклеить двухсторонним скотчем, а то потеряется)

Вывод

Идеальный вариант для начинающих стробистов, круче, пожалуй, только PocketWizard с TTL, за 400 долларов.

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

Очень красивые коробки

Ну чтож, свершилось — сегодня Adobe официально представила пакет Creative Suite 5 (CS5). С предсказанием иконок я таки облажался, да. У меня, конечно, была мысль, что они могут использовать третье измерение, но… В итоге они сделали нечто параллелепипедо-папкообразное. Передняя плоскость один в один повторяет то, что было в CS3 и CS4, а шрифт теперь обрёл цвет. Мне, конечно, больше нравится мой вариант с белым фоном, но эти тоже вполне ничего:

Не могу дождаться того момента, как они появятся в доке.

Шон Черис, главный дизайнер Adobe’s Desktop Brand, немного рассказал про то как создавался дизайн:

Когда мы начали думать о том, что бы мы хотели сделать для CS5, единственное, c чем мы все согласились, это было то, что мы хотели вернуть бренду чувство радости. Нашей целью было выйти за рамки монолитных образов в CS3 и CS4 и создать более динамичный образ. Мы хотели вернуть вдохновляющие и возвышенные качества системе идентификации, усиливая успешные модели, которые мы использовали в CS3 и CS4. Все скучали по причудливым образам, которые были большей частью наследия Adobe и хотели удивить и вдохновить наших пользователей и дать им что-то новое.

История развития бренда

Части грида, использованные в дизайне

Ладно, хватит уже о дизайне бренда, рассмотрим вкусности нового пакета. Начнём с самого интересного:

Photoshop CS5

Про нововведения подробно расписано на странице продукта.

Ничего кардинально нового и сильно полезного не появилось. Я уже писал, что особо ничего не жду, поэтому нисколько не разочарован.

К новым функциям Content-Aware Fill и Refine Edge отношусь скептически, хотя результат их работы и выглядит впечатляюще. Хотелось бы верить, что они будут работать так же как и на презентации.

Весьма интересна улучшенная обработка HDR, в диалоговом окне появилось много новых крутилок. В популярном плагине Фотоматикс их всё-таки побольше, так что ещё поживёт. Опять же, в интернетах после выхода CS5 значительно увеличится количество вырвиглазных HDR-фотографий.

Были замечены новые иконки инструментов и обесцветившийся логотип в панели инструментов, а также новая панелька Mini Bridge

Новый RAW-конвертер (Camera RAW 6) я уже успел пощупать в бета-версии третьего лайтрума. В нём меня очень порадовало то, как работает шумодав и то, как он обращается с цветным шумом. Плагин Noise Ninja теперь не нужен.

Такеже, весьма меня впечатлили профили в фильтре Lens Correction — теперь одним нажатием кнопки можно исправить искажения, вносимые объективом. Причём параметры дисторсии, виньетирования и хроматических аббераций будут выставлены автоматически из профиля объектива, который определяется из EXIF фотографии.

Photoshop CS5 включает в себя ряд инновационных технологий, которые пришли непосредственно из команды Adobe Labs. Одно из направлений разработки было названо «Just Do It» (JDI). Вместо кардинальных изменений они уделяли больше внимания мелочам. Для того чтобы выбрать функции, которые они могли бы выполнить в рамках JDI менеджер Брайан О’Нейл Хьюз использовал информацию из многих источников, таких как: блоги, пользовательские исследования, отдел продаж, служба поддержки и форумы. Группа рассмотрела огромный список пожеланий и сузило его до самых популярных 50 функций JDI.

Список некоторых функций, выполненные в рамках JDI:

• Добавлена возможность закрыть все изображения без сохранения
• Добавлено правило третей в Crop Tool и Color Picker
• Добавлена возможность менять заливку нескольких слоёв одновременно
• Наконец-то добавлена галочка «Не показывать это сообщение снова» для диалога «Максимальная совместимость»
• Уменьшено значение по-умолчанию для Shadows/Highlights
• Включена возможность двигать выделение, когда активный слой скрыт (аллилуйя!!!)
• Добавлена команда для удаления всех пустых слоёв
• Добавлена настройка выбора папки сохранения по-умолчанию
• Добавлена возможность перетащить файл на открытый PSD для того чтобы создать слой
• В панели Adjustments теперь работает горячая клавиша (Shift-Enter/Return) для того чтобы установить фокус на текстовых полях панели
• Добавлена возможность менять прозрачность нескольких слоёв одновременно
• Добавлен индивидуальные настройки стиля слоя по-умолчанию (настраивается пользователем)
• Добавлен пресет в Gradient Tool для нейтральной плотности
• Сделано 7 изменений в фильтре Lens Correction:
  • Отображение сетки теперь выключено по-умолчанию (аллилуйя!!!)
  • Параметры «показать сетку», «размер сетки» и «цвет сетки» теперь запоминаются
  • Размер сетки по-умолчанию теперь увеличен с 16 до 64 (аллилуйя!!!)
  • Слайдер хроматических аббераций теперь работает с точностью до десятых (ну надо же!)
  • Добавлен третий слайдер для исправления зелёных/фиолетовых аббераций
  • Заменён «Цвет фона» на «Чёрный цвет» и добавлен «Белый цвет» для опции заливки краёв
  • Сброс работает только для сброса настроек калибрования

«Оцените усовершенствованные ресурсы повышения продуктивности … благодаря внедрению десятков новых и улучшенных функций по просьбе пользователей Photoshop» — радует что в Adobe начали прислушиваться к пользователям.

Но больше всего меня интересует насколько быстро будет это всё работать (надеюсь на Cocoa и 64 бита). Как пишут в обзоре: «до десяти раз быстрее», но пока что-то слабо верится. Ещё надеюсь на изменения в интерфейсе, и что наконец перестанут появляться чёрные квадраты при включенной поддержке OpenGL и что будут наконец нормально поддерживаться Spaces.

Illustrator CS5

Вот тут описаны все новые фичи нового Иллюстратора.

На самом деле, «Люстрой» я пока что пользуюсь мало, и то, в основном для создания логотипов, так что не смогу адекватно оценить нужность новых возможностей, но некоторым я был рад:

«Четкость контуров в проектах для веб-приложений и мобильных устройств» — то чего так ждали большевики! Теперь можно рисовать графику для веба не беспокоясь о размытых краях.

Кисти, теперь и в Иллюстраторе! Также очень понравился инструмент «Создание фигур».

Dreamweaver CS5

Подробно нововведения расписаны тут.

Я давным-давно мигрировал со всяческих IDE на текстовые редакторы, но изменения в Dreamweaver мне всё равно интересны.

Поддержка CMS, проверка CSS и всяческие подсказки по коду. Всё.

Остальными продуктами мне пользоваться пока особо не приходилось.

P.S. И блин, постоянно читаю CS5 как CSS, уж очень похоже. Можно начинать ждать CS6.

UPD. Ну чтож, CS5 вышел, и я написал подробный обзор Adobe Photoshop CS5.