DesignNotFound.ru

Веб-графика. План третьей лекции

h4 — Mon, 16 Nov 2009 22:25:31 +0000

План третьей лекции по «Веб-графике» в виде «Паучка».

Дополнительно: оригинал в формате xMind.

Веб-графика. 2 Лекция. Ссылки

h4 — Tue, 10 Nov 2009 21:54:04 +0000

Список сайтов, рассмотренных на второй лекции.

Как сделать такой список?

В Apple Safari:

Открыть нужные страницы в одном окне браузера
Главное меню Закладки > Добавить закладку для этих вкладок
Главное меню Файл > Импорт закладок…
Открываем полученный html-файл и выбираем нужный кусок

В Mozilla Firefox

Открыть нужные страницы в одном окне браузера
Главное меню Закладки > Добавить все вкладки в закладки
Главное меню Закладки > Управление закладками
Найти кнопку, в раскрывающемся меню которой будут «Экспорт в HTML…» (так на Mac OS, на Windows вроде есть более простой экспорт)
Открываем полученный html-файл и выбираем нужный кусок

Кстати, такое ощущение, что Safari делает вот так

…

Собственно список

Не смотря на 25 часов в сутках

h4 — Tue, 27 Oct 2009 01:07:49 +0000

Решительно ничего не успеваю писать. Поэтому сегодня покажу одну картинку.

Схема изменённой программы лекции по курсу «Разработка веб-узлов».

Так же доступен оригинал в формате xMind.

Вотафак?

h4 — Fri, 07 Aug 2009 23:01:16 +0000

Товарищи-вебдванольщики, очень надеюсь на вашу реабелитацию. Сайт-то ведь хороший.

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

h4 — Mon, 29 Jun 2009 23:54:21 +0000

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

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

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

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

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

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

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

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

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

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

Пройдёмся по мосту

h4 — Fri, 19 Jun 2009 22:16:29 +0000

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

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

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

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

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

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

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

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

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

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

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

h4 — Thu, 18 Jun 2009 21:53:13 +0000

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

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

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

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

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

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

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

Инвайт на MakePizdato

h4 — Mon, 08 Jun 2009 21:36:52 +0000

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

У меня оказалось в наличии одно приглашение на замечательный сайт посвящённый техдизайну (регистрация на сайте была закрыта зимой, если я не ошибаюсь). Инвайт получит первый, нарисовавший иконку для одного из разделов на странице курсов моего факультета. Размер иконки — до 100х100 пикселов. Стилистика и техника исполнения произвольная.

Картинку в формате png24 присылайте на почту mikhail@nevkontakte.ru или оставляйте ссылку здесь в комментариях.

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

h4 — Tue, 02 Jun 2009 21:52:07 +0000

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

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

640 x 480 пикселей

800 x 600 пикселей

1024 x 768 пикселей

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

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

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

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

Всемирный день веб-разработчика

h4 — Fri, 03 Apr 2009 21:38:54 +0000

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