DesignNotFound.ru

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

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

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

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

В Apple Safari:

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

В Mozilla Firefox

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

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

<dl>
 <p>
  <dt>
  …
 </p>
</dl>

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

• 2Advanced Studios
  
• Lexus RX 350
  
• Сеть АЗС «Параллель»
  
• Временно.нет — статьи по верстке и веб-дизайну
  
• Deposit Files
  
• Русская медицинская баннерная сеть - Правила участия
  
• Реклама для Narod.Ru
  
• Smashing Magazine
  
• Apple
  
• Яндекс
  
• Интернет-магазин «Техносила»
  
• A List Apart: A List Apart
  
• § 155. Печать пиктограмм и скриншотов
  
• HYBRIDWORKS
  
• eBoy Blog » Blog Archive » MCS_Einstein_patentoffice.png (thumb)
  
• Flickr Photo Download: WN CityOfCrazyDolls Incomplete
  
• eBoy Blog » Pixorama
  
• FFFFOUND! | It’s Raining Drea.
  
• Блог Иконка.ру » Blog Archive » Xалтура
  
• Блог Иконка.ру » Blog Archive » Веселая белочка
  
• 40 Free and Useful GUI Icon Sets for Web Designers | Icons
  
• Mac Dev Center: Apple Human Interface Guidelines: Icons
  
• Icons
  
• We Love Icons: Mac, Windows and Linux PNG icons of the finest quality!
  
• GUIdebook: Graphical User Interface gallery
  
• The Skins Factory - The World’s Premier Interface Design Company
  
• Цены - Турбомилк
  
• Admiring Windows 7’s high-resolution device icons - istartedsomething
  
• 80 Creative and Well-designed Logos | Inspiration
  
• Вторая версия Веборамы
  
• Интернет-магазин «Евросеть» — Москва
  
• Как стать нашим клиентом
  
• Сочинение на тему отражений и рефлексов в иконках
  
• Веб-дизайн — Википедия
  
• Иммельман
  
• Profbuild — строительный инструмент
  
• Мир обоев
  
• Энергосберегающие лампы Leek — люминесцентные энергосберегающие лампы в Ростове-на-Дону
  
• Торговый дом Камсклес
  
• ОАО «Регистратор Р. О. С. Т.»
  
• <img> - Транспортная карта
  
• Flickr Photo Download: Resume infographic
  
• Помни всё. | Evernote Corporation
  
• Blondinka.Ru
  
• ANidea – powered by the minds at AgencyNet
  
• Error Message
  
• Carfreaks.net
  
• Wacom
  
• Apple
  
• ActiveState Home
  
• Aptana
  
• Мои Яндекс.Фотки
  

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

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

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

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

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

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

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

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

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

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

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

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

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

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