Я уже немного писал про создание макетов сайтов в Adobe® Illustrator. А сегодня случайно набрёл на простой способ создания пиксельной графики.

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

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

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

Снимок экрана 3.png

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

Снимок экрана 6.png

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

shots-200.png

shots-3200.png

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

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

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

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

В далёкой-далёкой древности компания Adobe добавила в пакет Adobe CS2 файловый менеджер-каталогизатор Bridge. Мгногие недоумевали, зачем нужна эта непонятная софтина, которая ещё и регулярно падает? На самом деле — это мега-клёвая программулина.

Снимок экрана 8.png

Bridge позволяет управлять всем вашим графическим хозяйством, он может искать файлы по куче параметров, может фильтровать файлы внутри папки. Можно назначать файлам рейтинг (я это делаю в обязательном порядке прежде чем начать обрабатывать Raw-файлы), а если не полениться и добавить файлам мета-описание — в будущем будет сэкономлена куча времени на поиск нужного кадра.

Да просто просматривать файлы в Bridge — одно удовольствие. Хочу — смотрю большие картинки, хочу - вижу сразу все.

Однако, как и большинство программ от Adobe, Bridge изначально имеет не самые оптимальные настройки и требует доработки напильником.

Открываем настройки (Edit > Preferences или Bridge > Preferences). Слева категории, справа настройки, как и везде %)

Наша цель — сделать так, что бы всё работало быстрее. Заходим в категорию Cashe. В кеше Bridge хранить превью и служебную информацию. Соответственно чем больше превью будет браться из кеша — тем быстрее будут показываться ранее просмотренные картинки.

Снимок экрана 6.png

По умолчанию Bridge располагает кеш в домашнем каталоге пользователя (на Windows — Documents and Settings/%User%, на MacOS — /Users/%User%). Соответственно, если ваши диски размечены так, что диск с самым большим количеством свободного места — это не тот диск, на котором установлена операционка — кеш лучше перенести. Делаем в два этапа: сначала удаляем старый кеш. Для этого нажимаем на кнопке «Purge Cashe».

Теперь указываем в Location специально созданную папку на самом большом разделе на винчестере (если её ещё нет — самое время создать). В группе Manage можем указать максимальный размер папки для кеширования.

Снимок экрана 7.png

Теперь переходим к ускорению запуска программы. Поскольку Bridge стремится интегрироваться со всем подряд — он долго обрабатывает все эти интеграции при запуске. В категории Startup Scripts можно отключить ненужные. Здесь решать вам, я оставляю только Adobe Bridge, Adobe Fireworks, Illustrator и Photoshop.

В качестве бонуса — страшная сказка. После удаления Adobe Photoshop CS4 на домашнем компьютере Bridge CS3 перестал открывать .NEF-файлы в Photoshop. На самом деле всё просто — заходим в категорию File Type Association и устанавливаем нужные соотношения.

Bridge-file-assotiations.png

Технологическим стандартом де-факто для создания графических макетов сайтов стал Adobe Photoshop. Такой макет будет принят любым верстальщиком, если выполнить минимальный набор требований, да и все входы-выходы давно описаны. Поэтому я не буду их описывать, а дам несколько рекомендаций по созданию графических макетов в Adobe Illustrator.

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

С некоторого времени мои сайты, расположенные на одном аккаунте виртуального хостнга стали подвергаться атаке: в код страницы дописывался JavaScript-код, вызывающий загрузку вредного кода с другого сайта. Вариантов кода было несколько — и декодируемый, и просто iFrame.

Периодически я замечал такую пакость и вычищал соответствующую страничку, благо зловредный код располагался либо непосредственно после открывающего тега <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). Если хостинг не предоставляет возможности подключения по данному протоколу — тысячу раз подумайте перед тем, как переносить к нему свои ресурсы.

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

Решил (а точнее за меня решили %) вспомнить немного Flash и сваял за ночь вот такую незамысловатую игрушку. Дед Мороз катается на метро и периодически устраивает праздник.

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