Пиксельная графика в Illustrator

Я уже немного писал про создание макетов сайтов в 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.: В статье использована картинка в к учебному пособию по курсу «Профессиональная вёрстка сайтов».

Не Лебедевым единым

Приём очередного курсового. Очередное портфолио начинающего дизайнера. Очередное смешение стилей, громоздкость… Да и вообще, ощущение, что оказался в 2000 году. Фрагмент диалога:

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

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

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

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

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

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

Ложь, наглая ложь и статистика

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

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

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

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

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

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

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

Макет сайта в Illustrator. Можно, но осторожно

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

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