Что нам собственно нужно?

• Привязка линий строго по пиксельной сетке;
• Отсутствие сглаживания

Решение как всегда пришло конца. У меня на маке не оказалось достойного кириллического пиксельного шрифта. А те, что на скорую руку нашлись в интернете отображались в Illustrator просто отвратительно. Кроме того, в Illustrator, в отличие от Photoshop, никак нельзя управлять сглаживанием шрифта. В результате набрёл на такую настройку: Preferences > General; снимаем галку «Anti-aliased Artwork», далее работаем в режиме Pixel Preview (View > Pixel Preview).

В итоге получаем шрифты без антиалиасинга, что почти то, что мне хотелось.

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

Есть и ложка дёгтя. Пока что не удалось получить такой же результат при выполнении команды File > Save for web — картинка растеризуется так, как будто никто и не отключал антиалиасинг у Artboard. При этом при выполнении команды File > Export всё пучком.

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

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

P.S.: В статье использована картинка в к учебному пособию по курсу «Профессиональная вёрстка сайтов».

— Ну почему же вы не посмотрели на портфолио других дизайнеров?

— Каких? Лебедева?

И вот тут мне стало в очередной раз очень грустно. Артемий Андреевич Лебедев всё-таки сейчас уже не дизайнер в бытовом понимании этого слова, а руководитель и арт-директор Студии, и, как уже сказано в заголовке, «не Лебедевым единым». В России есть множество других замечательных веб-дизайнеров и дизайн-студий.

Где же найти этих замечательных дизайнеров и их сайты? В интернете, конечно.

Есть достаточно большое количество рейтингов и списков «самых лучших». Конечно, далеко не всегда эти рейтинги беспристрастны и объективны, но можно быть абсолютно уверенным, что в них попали действительно лучшие.

• Топ-100 ведущих студий за 2009 год
• Топ-100 ведущих студий за 2008 год
• Лучшие веб-разработчики рунета. Раздел веб-дизанеры
• Рейтинг фрилансеров в категории «Дизайн сайтов»

Смотрите. Оценивайте. Учитесь на хороших примерах. Ищите чужие ошибки не допускайте их. Это так просто — делать хорошо своё дело, и потом не стыдно.

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

• 640 x 480 пикселей
• 800 x 600 пикселей
• 1024 x 768 пикселей

В настоящее время наиболее распространенным разрешением экрана является 1024 x 768 пикселей

И ведь вроде бы взрослые люди, уже второе высшее образование заканчивают, а всё туда же — найти что-нибудь и передрать, не глядя. Прямой запрос в гугл — и вот мы получаем оригинал, опубликованный 19.03.2007 г..

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

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

Если верить Википедии, то сегодня — всемирный день веб-разработчика. А я и не против %)

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

Есть достаточно большое количество ситуаций, в которых работать с растровым редактором нерентабельно. Если на макете нет и не придвидится необходимости в слоевых масках, а есть только прямоугольники, линии, несколько картинок и текст — создать такой макет в Illustrator будет намного проще и быстрее. А уж если у нас не просто прямоугольники, а прямоугольники с круглыми уголками, то нас просто-таки спасёт Effect > Stylize > Round Corners… (хотя и в Photoshop можно создавать уголки с легко изменяемым радиусом, но об этом в другой раз). Средние и большие пиктограммы тоже удобнее рисовать в векторе.

Где больной?

В теории всё просто замечательно и радужно, но почему что же на практике? На практике мы имеем неизбежное преобразование векторного изображения в растровое. И вот на этом этапе заложена мина. Мина под названием «сглаживание». При работе над макетом в Illustrator нужно соблюдать хирургическую точность. Как только координаты точки перестают быть целыми числами мы теряем чистоту линий. Появляется грязь.

Проблема номер раз заключается в том, что в режиме отображения, установленном по умолчанию, мы видим картинку в максимальном качестве пригодном для полиграфии, а у монитора оно намного ниже. Для того, что бы видеть, как всё будет выглядеть после растеризации — включаем режим Pixel Preview (View > Pixel Preview). Если у вас есть второй монитор, или если есть один, но очень широкий — создаём копию окна (Window > New Window) и задаём разные режимы просмтотра для них.

Я уже упоминал про хирургическую точность — открываем палитру Transform и проверяем, что бы у нас всегда были целые значения для координат объекта и его размеров. Но это ещё не всё. Предположим, что мы создали прямоугольник размером 15х25 пикселов и расположили его в точку 150:200. Будут ли при этом чистота на границе? В состоянии по умолчанию — нет, потому что у нас нечётные значения ширины и высоты. Поэтому переводим точку привязки координат из центра в левый верхний угол. Вот теперь полный порядок.

upd: кроме того, необходимо включить привязку к пикселам (View > Snap to Grid) и задать особые настройки в Edit > Preferences:

• Категория General: Keyboard Increment > 0.5px
  
• Категория Units & Display Performance: Units > General > Pixels.

Это позволит точно позиционировать объекты с помощью кнопок клавиатуры, что, несомненно, быстрее и удобнее работы с палитрой Transform.

Линий нет, даёшь объекты

Следующая проблема — контуры толщиной в один пиксел почти всегда получаются «грязными». Причина кроется в том, что по умолчанию обводка рисуется в обе стороны от контура объекта. Выходов два: в Illustrator CS3 и выше задаём параметру Align Stroke значение «outside», либо вообще не пользуемся обводкой и создаём контуры через Оbject > Path > Offset Path. Второй способ лучше, потому что в этом случае мы получаем новый объект, у которого можем легко двигать опорные точки. Но теряем возможность быстро поменять толщину линии.

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

Итак, дорогие дизайнеры! Создавая захыватывающие дух макеты, не забывайте о том, что потом ваш макет будут мучать и резать. Что бы макет не изуродавали, подготовьте его ко взрослой жизни — проверьте все детали при большом увеличении в режиме Pixel Preview. При необходимости внесите коррективы.

Таки всё плохо, что делать?

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

Для исправления ситуации прежде всего избавляемся от обводок, нам нужны только объекты. Для этого делаем так: Object > Expand. После чего выравниваем всё с точностью до пиксела.

Итого

Делать макеты в Issustrator можно. Но очень важно уметь правильно их готовить. Как в изысканой кухне — прежде всего нужно соблюдать чистоту и точность.

Так же рекомендую к прочтению:

• Обращение верстальщика к дизайнеру (правильно, но спорно, чёрт возьми);
• Создание макета страницы в Illustrator и его вёрстка;
• Растрирование графики в Illustrator
• Настройка Illustrator для создания макетов сайтов (скринкаст, eng)

Периодически я замечал такую пакость и вычищал соответствующую страничку, благо зловредный код располагался либо непосредственно после открывающего тега <body>, либо в конце страницы. Код внедрялся либо на страницу index.htm/index.php, либо в какой-нибудь инклюд (admin_header для wordpress, например).

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

Поскольку происходила модификация кода от имени моего аккаунта (больше некому), то я просто решил изменить права доступа к файлам. Имея доступ по ssh это очень просто — воспользуемся командой chmod:

chmod 444 *.php *.inc *.html *.htm

В данном случае мы переводим в режим «только для чтения» все файлы, оканчивающиеся на php, inc, html и htm. К сожалению, данную команду пришлось запускать в каждом каталоге отдельно, поскольку рекурсивный обход файловой системы (chmod -R) почему-то не работал.

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

find * -mtime -120

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

Для того, что бы иметь возможность выполнять команды непосредственно на сервере нам потребуется подключение по протоколу SSH (Secure Shell). Если хостинг не предоставляет возможности подключения по данному протоколу — тысячу раз подумайте перед тем, как переносить к нему свои ресурсы.

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

Всех с наступающим! Всяческих удач!

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

• developer.mozilla.org — Mozilla developer center
• dev.opera.com — Dev Opera
• msdn.com —Internet Explorer Developer Center на MSDN
• developer.apple.com — Apple developer connection
• konqueror.org — один из популярных браузеров на Linux
• webkit.org — The WebKit Open Source Project

Совершенно неожиданно Apple Developer Connection оказался крайне аскетичен и даже сташноват относительно прочих ресурсов.

NB: по-возможности я указал ссылки на локализованные (русские) разделы, однако, как правило, там находится малая часть от айсберга, а на сайте Mozilla ещё и ссылки тоже переведены на русский и как результата — битые через одну. Поэтому лучше всё искать на базовых сайтах.