PRO веб-дизайн http://naikom.ru/blog Блог о современном веб-дизайне и создании сайтов. Веб-дизайн для новичков и профи. Wed, 22 Feb 2012 14:40:14 +0000 en hourly 1 http://wordpress.org/?v= naikom_rsshttp://feedburner.google.comSubscribe with Google?????? ? ??????.?????Привет! Рад видеть тебя здесь! Миллионы бесплатных векторов и изображений на Freepik.com http://feedproxy.google.com/~r/naikom_rss/~3/BZ2kzgfBAaE/5833 http://naikom.ru/blog/archives/5833#comments Wed, 22 Feb 2012 12:12:52 +0000 naikom http://naikom.ru/blog/?p=5833 Каждый из нас, дизайнеров, постоянно испытывает острую нужду в изображениях и векторах. И, чего уж [...]]]>

Каждый из нас, дизайнеров, постоянно испытывает острую нужду в изображениях и векторах. И, чего уж тут говорить, не все готовы каждый раз пользоваться платными сервисами. На помощь приходит сервис freepik.com

На Freepik.com собраны, как заявлено, миллионы бесплатных фотографий, картинок и векторов. Не совсем, конечно, так, ведь сайт действует по принципу поисковика по сайтам подобной халявы. Тем не менее, очень полезный ресурс для повседневного пользования.

© Найко Михаил для PRO веб-дизайн, 2012. | Ссылка | 3 Комментариев | Добавить в del.icio.us
теги: , , ,

]]> http://naikom.ru/blog/archives/5833/feed 3 http://naikom.ru/blog/archives/5833 Основы вёрстки HTML5 http://feedproxy.google.com/~r/naikom_rss/~3/kC0vBL5XLOQ/5597 http://naikom.ru/blog/archives/5597#comments Mon, 20 Feb 2012 07:04:48 +0000 naikom http://naikom.ru/blog/?p=5597 Сегодня я покажу основные моменты, которые стоит знать при работе с HTML5, и мы с [...]]]>

Сегодня я покажу основные моменты, которые стоит знать при работе с HTML5, и мы с вами сверстаем базовый HTML5-шаблон.

Начнём работу. Первое, что стоит прописать в новом документе — это DOCTYPE:

<!doctype html>

Сразу же бросаются в глаза длина написания и маленькие буквы. Так теперь можно. От регистра вообще ничего не зависит. В прежнем формате это выглядело примерно так:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Чувствуете разницу?

Идём дальше — меняем обозначение кодировки с вот такого

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

на такое: 

<meta charset=utf-8>

Немного о вольностях — HTML5 не придирается к отсутствию кавычек, и, как я уже упомянул, ему не важно, пишите вы прописными или строчными буквами. Также теперь не обязательно ставить слеш в конце непарных тегов.

Определяем язык, пишем вместо

<html lang="ru" dir="ltr" class="client-nojs" xmlns="http://www.w3.org/1999/xhtml">

это:

<html lang=ru>

Упростились также и ссылки на стили — атрибут type исчез, теперь это выглядит так

<link rel="stylesheet" href="style.css" />

Вместо прежнего 

<link rel="stylesheet" href="style.css" type="text/css" />

Не нужно добавлять атрибут type для элементов <script> и <style>. Если, конечно rel не однозначный, например, на rel=alternate.

Прежде чем перейти к контенту, стоит остановиться ещё на 1-м моменте. Это хак под IE. Explorer не понимает новых тегов, так что стоит прописать скрипт для фиксации:

<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Еще необходимо сделать новые элементы блочными (это уже в css-файле):

aside, nav, footer, header, section { display: block }

Тут вроде всё разобрали, двигаемся дальше. Рассмотрим конструкцию, например, блога, в HTML4 и HTML5, а дальше я поясню различия

HTML4

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="ru" dir="ltr" class="client-nojs" xmlns="http://www.w3.org/1999/xhtml">
     <head></head>
     <body>
          <div id="header"> Шапка
               <div id="navigation">Навигация</div>
          </div>

          <div id="content">
               <div id="post">Пост</div>
               <div id="sidebar">Боковая колонка</div>
          </div>

          <div id="footer">Подвал</div>
     </body>
</html>

И теперь взглянем по-новому:

HTML5

<!doctype html>
    <html lang=ru>
    <head></head>
    <body>
        <header> Шапка
             <nav>Навигация</nav>
        </header>

        <section id="content">
             <article>Пост</article>
             <aside>Боковая колонка</aside>
        </section>

        <footer>Подвал</footer>
    </body>
</html>

Как видно, всё порядком упростилось, а также появилось несколько новых тегов, которые более ясно отображают содержимое страницы для поисковых роботов.

  • <header> — шапка сайта.
  • <nav> — блок навигации. Лучше всего подходит для списка главных навигационных ссылок.
  • <aside> — боковая колонка
  • <article> — независимый текст, например, статья или 1-н комментарий.
  • <section> — раздел документа.
  • <footer> — футер сайта (подвал)

Cтоит отметить, что этот тег section во многих случаях заменяет div.

Правила по использованию тега section.

  • Не надо его использовать в качестве обёртки для скриптов или как стилистический блок.
  • Не надо его использовать, если по смыслу больше подходят article, nav или aside
  • Не надо его использовать, если внутри нет логического заголовка.

Тут, кстати, интересный момент — в каждом разделе может быть свой h1, то есть теперь их может быть несколько на странице.

Дополню этот список не столь важными, но тоже полезными тегами

  • <figure> — подпись к картинке или видео.
  • <hgroup> — блок заголовков. Например, заголовок и подзаголовок.
  • <mark> — выделение важного слова (желтенький тут не спроста — это <mark> в действии).
  • <output> — вывод программы или результаты вычислений.
  • <time> — время. Время нельзя писать буквами, например, 12 апреля 2012.

У картинок исчез атрибут title (остался alt). Для полей поиска появился полезный атрибут placeholder — если он установлен, то в поле поиска появляется фраза, которая исчезает при клике на него. Например, 

<input type="text" name="s" placeholder="Искать" />

Результат вы можете посмотреть у меня в боковой колонке, наверху страницы.

Это, конечно, не весь список, появилось много новых атрибутов, типов <input> и значений rel.

Конечный результат:

 <!doctype html>
<html lang=ru>
  <head>
      <meta charset=utf-8>
      <title>HTML5</title>
      <link rel="stylesheet" href="style.css" />
      <!--[if IE]>
          <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
      <![endif]-->
 </head>
 <body>
      <header> Шапка
           <nav>Навигация</nav>
      </header>

      <section id="content">
           <article>Пост</article>
           <aside>Боковая колонка</aside>
      </section>

      <footer>Подвал</footer>
   </body>
</html>

Я уже перевёл свой блог на HTML5, дело за вами!

© Найко Михаил для PRO веб-дизайн, 2012. | Ссылка | 11 Комментариев | Добавить в del.icio.us
теги: , ,

]]> http://naikom.ru/blog/archives/5597/feed 11 http://naikom.ru/blog/archives/5597 Подборка гранжевых текстур http://feedproxy.google.com/~r/naikom_rss/~3/SwZv0uK7JSo/5812 http://naikom.ru/blog/archives/5812#comments Sun, 19 Feb 2012 10:40:50 +0000 naikom http://naikom.ru/blog/?p=5812 Гранжевые текстуры находят себе применение в довольно большом количестве проектов, они помогают передать ретро-эффект, либо [...]]]>

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

Для перехода к странице текстуры кликните на изображение





© Найко Михаил для PRO веб-дизайн, 2012. | Ссылка | Комментариев пока нет | Добавить в del.icio.us
теги: ,

]]> http://naikom.ru/blog/archives/5812/feed 0 http://naikom.ru/blog/archives/5812 Как удалить белый фон у изображения (Mac) http://feedproxy.google.com/~r/naikom_rss/~3/JNuTzXdhdAE/5525 http://naikom.ru/blog/archives/5525#comments Fri, 17 Feb 2012 21:34:06 +0000 naikom http://naikom.ru/blog/?p=5525 Я уже писал ранее о том, как удалить белый фон у изображения , там говорилось, [...]]]>

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

Дело в том, что у Mac для этих же целей есть свой плагин, Peel Off White. Скачать его можно тут

Описание плагина Peel Off White

Надо сказать, что у плагина 3 режима:

  • Peel Off White — удаление белого
  • Gray To White — превращение серого в белый (3-я картинка в цепочке обозначает эффект, которого можно достичь при совмещении оригинального изображения и пропущенного через плагин)
  • Gray To Black — превращение серого в черный

Установка на Photoshop CS4/CS5

Хотелось бы немного подробней остановиться на установке на Photoshop CS4/CS5 (на остальные не пробовал, инструкция на английском есть в папке плагина).

Сначала нам потребуется другой плагин, Pixel Bender
Качаем и кликаем по файлу 2 раза — он установится сам.
Далее из папки Peel Off White/Photoshop CS4 to CS5 в папку Программы (Applications)/Photoshop CS5/Pixel Bender Files копируем все файлы с расширением «.pbk»

Теперь нам нужно перезагрузить Photoshop — далее следуем скриншотам:

© Найко Михаил для PRO веб-дизайн, 2012. | Ссылка | Комментариев пока нет | Добавить в del.icio.us
теги: , , , ,

]]> http://naikom.ru/blog/archives/5525/feed 0 http://naikom.ru/blog/archives/5525 Интервью с Алексом «Kadasarva» http://feedproxy.google.com/~r/naikom_rss/~3/Y3ft9W3eqJA/5722 http://naikom.ru/blog/archives/5722#comments Thu, 16 Feb 2012 07:37:16 +0000 naikom http://naikom.ru/blog/?p=5722 Сегодня у меня в гостях замечательный дизайнер (да ещё и музыкант!) Алекс Волков (Alex Volkov), [...]]]>

Сегодня у меня в гостях замечательный дизайнер (да ещё и музыкант!) Алекс Волков (Alex Volkov), известный также под ником Kadasarva. Его работы не раз мелькали в топе различных интернет-изданий, а сегодня вы можете почитать его интервью. Специально для моих читателей!

— Привет, Алекс. Расскажи немного о себе, как ты пришёл в графический дизайн?

— Всем привет! Мне 30 лет. Живу в Киеве, 10 лет занимаюсь дизайном, примерно столько — же музыкой, которая помогает отвлекаться от дизайна.
Пришел в дизайн довольно предсказуемо. Рисовал с раннего детства, на чем попало, потом четыре года вечерней художественной школы и три года средне-специальной художественной школы на архитектурном курсе. Лет шесть проработал, занимаясь преимущественно полиграфическим дизайном, в разных Рекламных агентствах и последние четыре года в большей степени занимаюсь диджитал-дизайном, сайтами, иконками, иллюстрациями…

Мой сайт: kadasarva.com

— На каких дизайнеров ты ориентируешься, чье творчество вдохновляет?

— Таких, на самом деле, много – Jonas Eriksson, Andreas Preis, Ирина Винник, Florian Nicolle… Очень вдохновляют работы студий «Ujean&Glazyrin», «Ars Thanea», очень много интересных работ на behance, dribbble, techdesigner.ru. Всегда есть к чему стремиться.

— Как ты достиг такого высокого уровня? Какая литература, уроки помогли тебе в этом?

— Много практики, как в анекдоте про повара: «Как вы так хорошо готовите?… Немного соли, немного перца и 20 лет у плиты».
Помогла художественная школа — многие полезные вещи часто вспоминаются, хотя можно всего добиться самому, нигде не обучаясь, было бы желание, примеры есть.
Книги во многом помогают, но чаще всего на них не хватает времени, поэтому выхватывается то, что интересует в данный конкретный момент в текущей работе.

— Как ты придумываешь концепцию будущей работы?

— Исходя из пожеланий заказчика, настроения и времени на реализацию.

— Как выглядит твоё рабочее место и какими инструментами, программами пользуешься во время работы?

— Основные инструменты это Photoshop и планшет Wacom Intuos 4. Изредка пользуюсь Иллюстратором и начинаю осваивать Cinema 4D.

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

— Какая из твоих работ тебе самому нравиться больше остальных?

— В данный момент это, наверное, обложка для моего музыкального альбома «Steamagination».

Хотя, наверное, та, которая понравится больше остальных, еще не сделана, и скорее всего не будет сделана никогда, потому что когда ты полностью удовлетворен работой становится не интересно. Всегда должен быть стимул узнать что-то новое, сделать еще лучше и интереснее.

— Расскажи немного о планах на будущее?

— Продолжать рисовать и писать музыку)

— Совет для начинающих. На что стоит обратить внимание.

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

— Назови 5 своих любимых сайтов

— behance.net, techdesigner.ru, tutsplus.com, graphic-exchange.com, dribbble.com

— Последнее слово, пожелания читателям

— Целеустремленности, терпения и не останавливаться на достигнутом.

Работы

© Найко Михаил для PRO веб-дизайн, 2012. | Ссылка | 3 Комментариев | Добавить в del.icio.us
теги: , , ,

]]> http://naikom.ru/blog/archives/5722/feed 3 http://naikom.ru/blog/archives/5722 Быстрый пост: эффект виньетки в Photoshop http://feedproxy.google.com/~r/naikom_rss/~3/6CQdmUevSu4/5707 http://naikom.ru/blog/archives/5707#comments Wed, 15 Feb 2012 10:59:03 +0000 naikom http://naikom.ru/blog/?p=5707 Если вам нужно быстро, просто и эффектно обработать фото — этот урок для вас. Эффект [...]]]>

Если вам нужно быстро, просто и эффектно обработать фото — этот урок для вас. Эффект виньетки позволяет как минимум добавить фотографии загадочности и оригинальности. А сделать его можно за пару минут.

Итак, как же создать виньетку в Photoshop’е?

1) Открываем наше фото. Я взял это

2) Создаём новый слой, Ctrl+Shift+N. Теперь выбираем Elliptical marquee tool (M), кликаем по нему ПК и задаём размытие feather на 50-80px (чем больше картинка, тем больше feather)

3) Инвертируем выделение Ctrl+ Shift+ I и заливаем его чёрным цветом. Эффект готов.

А вот я немного растянул чёрную область и поиграл прозрачностью

И другие примеры

Интересно получается, не правда ли?

© Найко Михаил для PRO веб-дизайн, 2012. | Ссылка | 8 Комментариев | Добавить в del.icio.us
теги: , ,

]]> http://naikom.ru/blog/archives/5707/feed 8 http://naikom.ru/blog/archives/5707 Рисованные супергерои Мэтта Кауфенберга http://feedproxy.google.com/~r/naikom_rss/~3/__XKKWssjkw/5698 http://naikom.ru/blog/archives/5698#comments Tue, 14 Feb 2012 13:46:36 +0000 naikom http://naikom.ru/blog/?p=5698 Наверное, каждый из нас в детстве любил комиксы. Да и сейчас, уверен, в глубине души [...]]]>

Наверное, каждый из нас в детстве любил комиксы. Да и сейчас, уверен, в глубине души многие продолжают их любить. Мои слова подтверждает и рост объемов производства фильмов про супергероев. Эти сюжеты, хоть и ненадолго, делают нас детьми.

Мэтт Кауфенберг (Matt Kaufenberg) или просто skutterfly, иллюстратор из Миннесоты, очень любит рисовать весёлых персонажей и супергероев. Просматривая его работы, кажется, будто листаешь детскую книгу.

Блог Мэтта

© Найко Михаил для PRO веб-дизайн, 2012. | Ссылка | Комментариев пока нет | Добавить в del.icio.us
теги: , , , , , ,

]]> http://naikom.ru/blog/archives/5698/feed 0 http://naikom.ru/blog/archives/5698 Как правильно выбрать шрифт http://feedproxy.google.com/~r/naikom_rss/~3/C1F2YN57Bkw/5663 http://naikom.ru/blog/archives/5663#comments Mon, 13 Feb 2012 08:15:20 +0000 naikom http://naikom.ru/blog/?p=5663 Выбор шрифта — непростое занятие. Красота и сложность шрифта, в сочетании с неисчерпаемым запасом вариантов, [...]]]>

Выбор шрифта — непростое занятие. Красота и сложность шрифта, в сочетании с неисчерпаемым запасом вариантов, которые вам предстоит отобрать, могут вскружить вам голову. Но не отчаивайтесь. Хотя не существует простых правил по выбору лучшего шрифта, есть много проверенных на практике принципов, которые вы можете применять при выборе шрифта. Если вы постоянно будете использовать ниже предложенные советы, вы всегда сможете выбрать лучший шрифт в кратчайшие сроки. Итак, давайте начнем.

Какова ваша цель?

Первое, что вам нужно сделать для того, чтобы выбрать шрифт — в уме сформировать четкое представление о том, какую реакцию читателей на шрифт вы хотите получить. Это ваша цель, и она будет определять весь процесс. Вы можете сами придумать это впечатление, или оно может быть продиктовано вам вашим заказчиком, или вашей аудиторией. В любом случае, ваш выбор шрифта должен представлять собой отличное сочетание четкости и читабельности, оставаясь при этом подходящим для аудитории и сообщения. Каждая из этих характеристик требует отдельного рассмотрения. Как вы уже знаете из опыта, можно заострить свое внимание на чем-то ненужном, и загрузиться выбором шрифта надолго. Эта проблема может усугубляться по мере развития проекта.
Пожалуй, самая трудная часть процесса выбора шрифта — это понимание того, какие части работы являются более субъективными, а какие части — более объективным. После чтения и понимания текста вашего заказчика, легче начать с объективных аспектов выбора шрифта. Хотя нет точного разграничения спектра субъективных и объективных критериев. Давайте начнем с двух наиболее объективных признаков — четкость и читабельность.

Четкость

На первый взгляд может показаться, что четкость и читабельность одно и то же, но это не так. Четкость относится к дизайну шрифта, например к ширине штрихов, наличию засечек, наличию нового типа элементов дизайна и т.д. При разборчивом шрифте легко отличить одну букву от другой. Например, декоративные шрифты имеют низкую четкость, потому что они в первую очередь должны бросаться в глаза, а не читаться в длину. И наоборот, шрифты, предназначенные для романов или газет имеют очень высокую четкость. Вы должны разработать конкретную общую четкость на основе функции текста.
Рассмотрим следующий пример, где левая часть текста написана Tobin Tax, декоративным шрифтом с засечками. Сравните его с тем же текстом, написанным шрифтом Sabon, классическим и четким шрифтом с засечками. Какой из этих вариантов вы предпочтете?

Советы по четкости:

  • Выбирайте шрифты со стандартными буквами.
    Буквы с уникальными формами, художественными деформациями, чрезмерными украшениями или другими элементами дизайна заставляют читателей сначала обрабатывать увиденное, и мешают сразу воспринимать информацию. Новизна шрифта всегда мешает восприятию текста.
  • Выбирайте шрифты с хорошим интервалом.
    Близкое расположение букв заставляет глаза заполнять оставшееся пространство, что замедляет процесс восприятия информации. Хороший интервал между буквами позволит читателю воспринимать текст быстрее.
  • Выбирайте шрифты с хорошей высотой строчных знаков (x-height).
    Небольшая высота высота строчных знаков уменьшает четкость некоторых букв.
    Обратите внимание: высота строчных букв не должна быть «большой». Размер шрифта и ширина должны выбираться в зависимости от высоты строчных букв.

Читабельность

То, как ваш шрифт расположен, в сочетании с четкостью шрифта, и определяет уровень читабельности. Читабельность — это динамическое взаимодействие стиля, размера, межбуквенного расстояния (трекинг), расстояния между соседними строками абзаца (интерлиньяж), цвета и других характеристик, объединенных в одно общее впечатление. Они складываются в определенный типографский стиль, который обладает количественной степенью читабельности. Например, вы можете намеренно использовать стиль с низкой степенью читабельности для определенной цели передачи сообщения. Или вы можете сосредоточиться на обеспечении высокой степени читабельности, если ваше сообщение будет сложным, и вы не хотите, чтобы стиль текста препятствовал пониманию. В большинстве случаев восприятие текста будет важнее, чем стиль, так что читабельность в приоритете.
Возьмем наш предыдущий пример шрифта Sabon и изменим читабельность. Слева мы уменьшили размер шрифта, изменили межбуквенное расстояние и расстояние между соседними строками абзаца, осветлили цвет. У нас получился непригодный для чтения текст. Справа мы оставили текст неизменным для сравнения. Изменение нескольких независимых факторов, как видите, может привести к видимым результатам.

Советы по читабельности:

  • Выбирайте те шрифты, которые были разработаны с той целью, которую вы преследуете (шрифты для заголовков, шрифты для основного текста и т.д.). Шрифт, предназначенный для привлечения внимания, например для заголовков или плакатов, означает, что его нельзя так же эффективно применить в качестве шрифта для основного текста, где нужно читать большое количества текста. С другой стороны, шрифт, предназначенный для длительного чтения, теряет свое воздействие в большом размере.
  • Не выравнивайте текст по правому краю для получения правильных пробелов между словами. Избегайте justify-выравнивания в тексте (растягивания текста на всю строку, чтобы он выглядел более ровно по краям), — это создаёт некрасивые пробелы в тексте, которые мешают читателям правильно воспринимать текст. На данный момент в CSS нет свойства, позволяющего расставлять переносы, но вы можете использовать скрипт Hyphenator.js для правильной расстановки переносов.
  • Убедитесь, что расстояние между строками больше, чем размер вашего шрифта, особенно для многострочного текста. Читателям трудно будет отслеживать строчки и не перескакивать с одной на другую, если строчки расположены слишком близко. Можно спутать строчки при переходе с одной на другую. Сколько раз вы читали одну и ту же строчку текста дважды в тексте с хорошим расстоянием между строк? Наверное, один раз — если, конечно, содержание легко понять. Не заставляйте ваших читателей работать больше, чем им нужно.

Разобравшись с двумя наиболее субъективными факторами, давайте перейдем к аспектам соответствия текста.

Аспекты соответствия

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

Назначение дизайна

Очень полезно бывает принять во внимание назначение шрифта. Большинство популярных шрифтов имеют детальные обзоры, так что стоит узнать хоть что-то о шрифте, который вы выбрали. Если шрифт был предназначен для рекламных надписей, как Cooper Black, например, то он, пожалуй, вряд ли подойдет для основного текста книги. Этот пример может показаться слишком очевидным, но все же не упускайте из виду такую информацию о шрифте, который вы выбрали. Посмотреть в интернете или в книге по типографии информацию о шрифте займет у вас всего несколько секунд, зато эта информация сделает вас гораздо опытнее и умнее.

Эстетика

Ваш шрифт должен соответствовать эстетике, ожидаемой аудиторией, для которой предназначен дизайн. Например, если вы разрабатываете дизайн для банка, написание их логотипа или текста для рекламной кампании в шрифте Souvenir может показаться немного легкомысленным, а это не то качество, которое нужно ассоциировать с банкирами. А вот величественный и стабильный Bembo может быть лучшим выбором в этой ситуации. Чем больше вы соотнесете суть шрифта с вашей темой, тем лучше.
В этом примере мы создали две комбинации шрифтов. В первом случае Lithos и Souvenir создают эстетику, более подходящую для детского музея, чем для банка. Вторая комбинация из Clarendon и Bembo подходят этому случаю, как хорошо сшитый костюм — банкиру.

Советы по эстетике:

  • Посмотрите на шрифт и выпишите несколько слов, с которыми этот шрифт ассоциируется, а затем сравните их с целью вашего дизайна. Сходятся ли они? Поверьте, после такого анализа вы сможете сделать правильный выбор. Если вы не уверены до конца, не используйте этот шрифт.

Настроение

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

Советы по настроению:

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

Личный выбор

Часто так бывает, что шрифт вам кажется отлично подходящим. Ваше правое полушарие уверено в этом, а ваше левое полушарие не может понять, почему.
Например, вы выбрали OCR-А для обложки альбома, хотя OCR-A был разработан специально для оптических сканеров, чтобы компьютеры могли распознавать слова с помощью программного обеспечения. Так что с того, если компьютер может прочесть этот шрифт? Если он подходит для замысла вашего проекта, и вы можете сделать все правильно, сделайте это. Просто сделайте все качественно или выберите другой шрифт.

Советы по личному выбору:

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

Технические характеристики

Не упускайте из виду самых очевидных вещей. Например, если в вашем проекте будет много цифр, то нужно обязательно убедиться в том, что в выбранном вами шрифте есть те цифры, которые вы будете использовать. Некоторые шрифты используют Old Style (нижний регистр цифр), а некоторые шрифты используют Lining (верхний регистр цифр).

Вам может показаться, что большое количество цифр гораздо легче прочесть, если цифры будут в верхнем регистре, потому что у них не будет подстрочных элементов, и потому что они будут смотреться ровнее. Но если вам предстоит иметь дело с очень большими, близко расположенными цифрами, то нижний регистр будет выглядеть приятнее. Опять же, обратите внимание на настроение, которое хотите передать: цифры нижнего регистра выглядят старее. Это нужно использовать в нужном контексте.
К тому же, обратите внимание на то, есть ли в шрифте все лигатуры (соединение букв) и капители (малые заглавные буквы). При большом размере шрифта отсутствие лигатур может выглядеть некрасиво. Неправильные прописные буквы тоже смотрятся странно (да и вообще в русском алфавите они смотрятся странно). Если подвести итог, то лучше использовать шрифт с полным набором букв. Если вы выберете какой-нибудь бесплатный шрифт, то можете столкнуться с отсутствием необходимых вам дополнений. Так что при выборе бесплатного шрифта убедитесь, что в нем есть именно то, что вам необходимо, и что он лицензирован.

Советы по выбору шрифта

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

1. Продумайте иерархию

Во-первых, составьте свое представление о содержании и типографской иерархии вашего проекта. После тщательного анализа можно понять, что вам необходимо пять гарнитур (не шрифтов, разницу между понятиями гарнитура и шрифт читайте в статье основы типографики) для различных заголовков, подзаголовков и пр. Может ли ваш шрифт обеспечить достаточно заметные изменения с выделением, курсивом и капителью? Или вам нужно использовать два разных шрифта, чтобы создать более заметное различие в иерархии? Три? Набросайте обычную схему, прежде чем начать выбор шрифтов. Рассмотрим пример плохой и хорошей иерархии, используя тот же текст. Обратите внимание на роль белого пространства в иерархии. Используйте столько уровней, сколько вам нужно, чтобы было четкое различие и ясная цель вашего выбора.

2. Учитывайте опыт других людей

Вы увидите, что дизайнеры до вас уже выработали способы использовать те же шрифты, которые хотите применить вы, так что вам не нужно изобретать колесо. Посмотрите вокруг, и внимательно изучите то, что уже сделали другие. Сайт Fonts In Use, например, содержит информацию о выборах шрифтов, сделанных профессиональными дизайнерами в различных отраслях. И не стоит пугаться, когда вы сталкивались с такими же шрифтами в работе других дизайнеров. Зачастую слова «скучный» и «знакомый» — ваши лучшие друзья, когда речь заходит о выборе типа. Существуют веские причины, по которым некоторые шрифты используются так часто- они просто работают, и работают очень хорошо.

3. Попробуйте сделать проще

Вот несколько советов, которые помогут вам экспериментировать с вариантами шрифта быстро, но вдумчиво:

  • Настройте таблицы стилей и для интернета, и для печати. Это придаст мобильности, потому что их будет легко изменять. Вы можете также использовать для этой цели Web Font Specimen.
  • Поиграйте с иерархией, изменяя размер различных элементов для создания и снятия напряжения.
  • Оцените результаты и попробуйте что-то изменить, но изменяйте только одну вещь за раз.
  • Спросите мнения независимой стороны. Возможно, вы пропустили что-то очевидное.

4. Избегайте ляпов

Например, если вы не знаете истории шрифта, то это может в конечном итоге привести вас к тому, что вы используете его таким образом, что будете выглядеть глупо. Например, вы выбрали Trajan для титульного листа статьи о Древней Греции? Это было бы неуместной неточностью, так как Греция предшествует Риму, а Траян был римским императором. Шрифт Trajan был взят с колонны Траяна, которая является памятником военной победы около 100 года нашей эры. Если вы ответите «Trajan» на вопрос «Какой шрифт вы установите на обложке этой книги о Древней Греции?», то вы будете выглядеть глупо. Все стоит проверять по несколько раз. И иногда стоит быть нейтральным, выбрав какой-нибудь безопасный шрифт для академических тем, например Arno.

5. Избегайте банальных ассоциаций

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

  • Не используйте Papyrus, просто потому что ваша тема имеет отношение к древности, особенно к Древнему Египту. (А лучше вообще не используйте Papyrus)
  • Не используйте Comic Sans только потому, что ваша тема имеет отношение к юмору. ( А лучше вообще не используйте Comic Sans)
  • Не используйте Lithos только потому, что ваша тема имеет отношение к греческим ресторанам.
  • Не используйте Futura только потому, что ваша тема имеет отношение к будущему.

Стоит ли вообще использовать ассоциации, которые вызывают шрифты? Безусловно. Просто избегайте ассоциаций настолько очевидных, что они моментально приходят вам в голову. Признаком самых банальных ассоциаций будет являться то, что у вас есть коллекция декоративных шрифтов, которые вы часто просматриваем в вашем менеджере шрифтов, все время стараясь куда-нибудь их втиснуть. Если и вы не избежали подобных банальных ассоциаций в прошлом, не беда. Не живите прошлым, но не повторяйте ваших ошибок снова.

6. Подумайте об использовании расширенной версии шрифтов

Если ваш проект длительный и разносторонний, то было бы целесообразно рассмотреть вопрос о вложении в качественную расширенную (extended) версию шрифтов. Почему бы не поймать всех зайцев разом? Расширенные версии шрифтов, как правило, имеют версии с засечками и без засечек, наряду с несколькими видами выделения, полными наборами специальных символов и лигатур и т.д., которые гарантируют, что вы сможете найти подходящее решение практически для любого типографского задания. Расширенные группы шрифтов также позволят вам оформить все в едином настроении и эстетике, если это именно то, чего вы добиваетесь.

7. Придерживайтесь классических сочетаний

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

8. Используйте ограниченную палитру

Вы услышите много мнений по этому вопросу, но все же это не плохая идея — составить ограниченную палитру шрифтов, которые вам нравится больше всех из списка самых популярных шрифтов всех времен. Они являются наиболее популярными неспроста. Некоторые дизайнеры за время всей карьеры использовали в большинстве случаев менее двадцати шрифтов. Например, вы можете использовать FontShop’s 100 Best Typefaces (на немецком языке, также доступен в формате PDF) в качестве источника. Попытайтесь также добавить к этому списку классических шрифтов несколько новых. А также добавьте парочку уникальных, но универсальных современных шрифтов от независимых разработчиков.
В этом примере объединены Bembo и различные шрифты от Haptic Pro ( группа шрифтов, первоначально разработанной в 2008 году Henning Hartmut Skibbe). Сочетайте старое с новым, и вы сможете разработать свой уникальный стиль:

Последний совет: нарушайте правила

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

Постоянно применяя эти советы на практике, вы сможете добиться отличных результатов, которые качественно отразятся на будущих проектах.

via

© Найко Михаил для PRO веб-дизайн, 2012. | Ссылка | 5 Комментариев | Добавить в del.icio.us
теги:

]]> http://naikom.ru/blog/archives/5663/feed 5 http://naikom.ru/blog/archives/5663 Полезный ресурс: Подбор цветовых схем на design-seeds.com http://feedproxy.google.com/~r/naikom_rss/~3/oBIb_v8Hk3I/5631 http://naikom.ru/blog/archives/5631#comments Thu, 09 Feb 2012 19:35:22 +0000 naikom http://naikom.ru/blog/?p=5631 design-seeds.com — полезный такой ресурс, который многим упросит жизнь в подборе цветовой гаммы для будущего [...]]]>

design-seeds.com — полезный такой ресурс, который многим упросит жизнь в подборе цветовой гаммы для будущего проекта (об этом, я, кстати, писал в статье Теория цвета ч.3 — Создание собственной цветовой палитры). На этом сервисе можно указать любой интересующий цвет и подобрать под него гамму остальных цветов.

Выглядит всё это очень симпатично. Единственный минус — нельзя указать цвет цифровым кодом. Поэтому точность, кончено, теряется.

design-seeds.com

© Найко Михаил для PRO веб-дизайн, 2012. | Ссылка | Комментариев пока нет | Добавить в del.icio.us
теги: , ,

]]> http://naikom.ru/blog/archives/5631/feed 0 http://naikom.ru/blog/archives/5631 Эффект старого кино в Photoshop http://feedproxy.google.com/~r/naikom_rss/~3/93hZThwKz9s/5604 http://naikom.ru/blog/archives/5604#comments Wed, 08 Feb 2012 08:48:37 +0000 naikom http://naikom.ru/blog/?p=5604 Предлагаю ознакомится с быстрым и симпатичным способом получения эффекта старого кино 1) Для начала откроем [...]]]>

Предлагаю ознакомится с быстрым и симпатичным способом получения эффекта старого кино

1) Для начала откроем наше изображение. Оно должно быть большого размера и высокой яркости. Я взял вот это изображение

2) Обесцветим фото Image > Adjustments > Desaturate (Shift+Ctrl+U). На этом этапе можно поиграть уровнями (Levels, Сtrl +l) и яркостью/контрастностью (Brightness/Contrast) для улучшения результата.

3) Немного размоем изображение, Filter > Blur > Gaussian Blur на 0,7-1px

4) Осталось добавить только зернистости. Для этого переходим в Filter > Texture > Grain, и выставляем

Intensity: 5
Contrast: 1
Grain Type: Vertical

В принципе, на этом можно и остановиться.

Хотя всегда результат можно улучшить при помощи текстур. Я использовал эти

Ничего сложного, правда же?

© Найко Михаил для PRO веб-дизайн, 2012. | Ссылка | Комментариев пока нет | Добавить в del.icio.us
теги: , , ,

]]> http://naikom.ru/blog/archives/5604/feed 0 http://naikom.ru/blog/archives/5604