«Да» и «Нет» применение прозрачности в веб-дизайне.


Содержание материала:

Использование прозрачности PNG для решения различных вопросов

11 декабря 2009 2 Рубрика: HTML&CSS, Другое

« Предыдущая запись
Формы, часть 5, «Форма загрузки файлов на сервер»
Следующая запись »
Как сократить текст через PHP в стиле поисковых систем

В вебе используются два формата изображений, которые обладают прозрачностью: GIF (Graphics Interchange Format) и PNG (Portable Network Graphics). Эти два формата хранят изображение без потери качества. PNG пришёл на смену GIF, чтобы стать его полноценным приемником. Полноценного не получилось (не поддерживает анимацию), но в остальном стал зе бест.

PNG делится на PNG-8 и PNG-24. PNG-8 на практике тот же GIF — имеет палитру до 256 цветов. Какой использовать — нужно смотреть по ситуации. Обычно размер файла меньше в гифе, если мало цветов и изображение меньше. Если изображение имеет цветов больше и размер больше, то лучше пнг. Но всё равно, смотреть по ситуации надо.

А вот PNG-24 отличается. По сути это «безразмерный» по палитре ГИФ, который позволяет работать с полупрозрачными тенями. Однако вес файла может достигать больших размеров, если картинка большая и цветов много.

Собственно по форматам знать более и не надо. А кому интересно, может глянуть в википедии тут и тут .

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

Изображение с фоном

Есть банальный и тривиальный способ, который в голову сразу, увы, не приходит. Начну сразу с простого применения: нужно квадратной картинке, не меняя её, сделать какую-то рамочку, например, с копирайтом.

Делается это просто. Берётся рамочка и сохраняется в PNG (в примере PNG-24, так как есть тень), назовём её border.png. Затем на странице вставляем изображение рамки и через CSS прописываем ему бэкграунд — нужное нам изображение (пример по ссылке).

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

Тень для большого изображения

Способ предложен Владимиром Токмаковым (опубликован на сайте Лебедева) и заключается в разделении изображения на основную часть и на подложку с тенью.

Для чего это нужно? Во-первых гифка и пнг-шка-24 с малым количеством цветов будут суммарно весить меньше, чем просто пнг-шка-24. Во-вторых это комбо будет более сносно отображаться в IE версий 5,5 и ниже.

Актуальность? На момент публикации (январь 2005) это было бы актуально, но уже прошло почти 5 лет, скорость интернета возросла, что такое IE5.5 уже почти никто не знает, так что актуальность отсутствует. И это не говоря о том, что чтобы сделать такое комбо — нужно много возиться.

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

Другие применения

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

В завершении

PNG хорош всем, вот только шестой и младшие интернет эксплореры его не понимает, а точнее не понимают его полупрозрачность. Об этом я писал ранее, с чем и можно ознакомиться по ссылке — Как заставить работать прозрачность PNG в Internet Explorer.

На сегодня всё. Пишите темы, на которые вам бы было интересно почитать посты, будем писать=). Все счастливых выходных!

12 примеров text-shadow

Типографика — моя любимая игрушка, если дело доходит до веб-дизайна. Еще бы, с ее помощью можно привлечь внимание человека, всего лишь немного изменив начертание или кегль шрифта. Очень просто и очень эффективно, на эту тему написано очень много книг и сломано немало копий в спорах. Сегодня я не буду давать советов по типографике в целом — у меня не хватит квалификации, а вот как оформить текст вашего сайта — это всегда пожалуйста. Итак, сегодня я покажу несколько вариатов использования свойства CSS3 text-shadow, очень простого, но в умелых руках оно может творить чудеса.

Базовый синтаксис text-shadow

Это свойство CSS3 работает во всех свежих браузерах, без вендорных префиксов, типа -moz и -webkit. Даже IE можно научить понимать это свойство, нужно использовать Modernizr или аналоги.

Вот и весь базовый синтаксис. Первое значение — смещение по горизонтали, второе — по вертикали, размытие тени и цвет тени. Рассмотрим пример:

Сместили тень, размыли на 3 пиксела и назначили черный цвет с прозрачностью в 30%. Почему я использую альфа-канал или прозрачность? Это дает больше свободы в действиях, можно сделать чуть светлее или темнее просто поменяв значение прозрачности, не мучаясь с подбором цвета. Достаточно быстро получается, рекомендую.

Вдавленные буквы

Принцип работы тут такой — фон чуть светлее букв, светлая тень с небольшой прозрачностью. Результат на картинке, пробуйте.

Жесткая тень

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

Двойная тень

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

Вниз и подальше

Текст объёмный и как бы висит над фоном, не так ли? Тут использованы 4 тени с различным уровнем размытия и расположения. Вообще, чем больше используется теней, тем реалистичнее эффект, учитывайте это в своих проектах.

Небольшой 3D текст

Аналогично предыдущему примеру, три тени, но расположены ближе, отсюда эффект трехмерности и весомости текста.

3D текст от Mark Dotto

Наткнулся в сети на работу этого дизайнера и никак не мог пройти мимо. Впечатляющая реалистичность.

Вдавленный текст от Gordon Hall

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

Сияние текста

Тут тоже все просто — тень не смещаем, размываем посильнее и делаем ее белой. Вот и все сияние.

Ретро-стиль

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

Несколько источников света

Тут эффект множественных источников света, которые дают тени во все стороны.

Выпуклый текст

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

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

Похожие записи

В веб-дизайне частичная прозрачность также применяется и достигается за счёт формата цвета RGBA, который задаётся только для фона элемента

Здорово
Так держать! : )

Интересно а это крассбраузерный вариант?:)

Подставляйте вендорные префиксы, где требуется и вполне кроссбраузерно

Прекрасные примеры и руководство к действию!

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

Очень может быть. Можем сравнить закладки

ЮХ ТЭ. Да-с раньше на это свойство я внимания как то не обращал, хотя слышать приходилось. Думал что эффект от него будет мизерный, но то что сейчас увидел просто потрясло. Спасибо за статью!

Если в итоге покажете, что у вас получилось — буду благодарен

Спасибо!! Давно искала нечто подобное. Пошла пробовать!

10 ошибок дизайна сайта при работе с цветом

Нежелание внедрять психологические приемы

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

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

Зеленый цвет символизирует доверие, а что может быть важнее доверия, когда речь заходит о еде?

1. Слепое подражательство

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

Даже если вам очень нравится какой-то сайт, задумайтесь, прежде чем заказывать «точно такое же, но про мои товары».

2. Тусклый call-to-action

3. Избыточная цветовая палитра сайта

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

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

Советуем также использовать специализированные сайты. Здесь можно сформировать свою гамму или использовать одну из уже готовых.

На первом примере для оформления текста используется 3 цвета, на втором всего два. Именно второй вариант смотрится лучше и текст на нем проще читается.

4. Разный цвет у однотипных элементов

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

На примере две кнопки с одним и тем же назначением на одном сайте. Неудачное решение.

5. Одинаковые цвета у разнотипных элементов

6. Недостаток контраста


7. Нестандартный цвет ссылок

8. Блеклый минимализм не для импульсивных продаж

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

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

9. Неуместный черный

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

Наши привычки, как и методы маркетологов, перекочевывают из супермаркетов на просторы интернета, к примеру, сайт ювелирной компании, выполненный в черном цвете, выглядит элегантно и дорого:

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

10. Цветовые ограничения дизайнеру

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

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

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

Выводы

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

Для примера мы размыли первый экран Aviasales.ru — внимание привлекают блоки элементов 1, 2 и 3. После прочтения заголовка, т.е. формирования у пользователя правильных ожиданий, он (вспоминаем про правила контраста) будет смотреть на нужные элементы выбора параметров и call-to-action.

А посмотрите, как четко выделяется на размытом фоне основное действие на сайте ostrovok.ru.

Если ваши интерфейсы проходят подобные тесты на ура, то дальнейшие улучшения сайта необходимо проводить, основываясь на понимании пользовательской психологии, т.е. анализируя фидбек от реальных пользователей. С помощью вопросов вроде: “Куда вы посмотрели в первую очередь: на какие 3 элемента сайта, и в каком порядке? Куда вам хочется нажать в первую очередь и почему?” в AskUsers вы сможете понять не только как распределяется внимание пользователей, но и почему пользователи смотрят на те или иные элементы. Данная информация поможет выявить целый ряд проблем в текущем интерфейсе и найти оптимальные варианты их решения.

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

5 распространенных ошибок в веб-дизайне, которые бесят пользователей

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

Глянцевые изображения и ховеры больше не впечатляют пользователей. Анимации и гифки тоже – любой может сделать такое на своём телефоне. Так как же удивить своих пользователей? Как сделать их счастливыми и поддержать конверсию?

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

1. Слишком много инноваций

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

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

2. Запутанная навигация

С этой ошибкой сталкивается каждый из нас. Многие сайты начинают с приятного впечатления, но потом все портят из-за плохой навигации. Иногда создатели сайтов просто забывают о том, чтобы запихивать свои подразделы в логичные места. Но и это не самая большая проблема.

Очень часто в гонке за индивидуальностью вместо обычных названий выбираются максимально странные. Вместо шаблона «home, about, contact, blog» мы видим «наша вселенная, следуй за нашим путем» и т.д. Конечно, пользователи оценят вашу креативность в названиях – когда наконец-то смогут понять, что к чему относится.

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

3. Ненависть к пустому пространству

Давным-давно у разработчиков сайтов была тенденция: размещать на сайте максимальное количество информации. Реклама и тонна материалов были повсюду. Но сейчас это не так. Люди любят минимализм во всём – вот хороший пример.

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

Топ-пост этого месяца:  Как обновить Angular 6 до 7 новые функции и преимущества последней версии

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

4. Неиспользование контраста

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

Люди автоматически понимают, что меньшая кнопка менее важна, чем большая кнопка. Они понимают, что если буквы крупнее или подчеркнуты – значит, информация здесь важнее.

Дональд Эмерсон, дизайн-блогер в Writemyx

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

5. Сложные формы

Формы – это боль. Никто не любит их заполнять. Но они – необходимое зло, ведь являются оптимальным способом узнать пользователя получше.

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

Простота – залог успеха. Оставьте только имя-фамилия-электронная почта (и пароль, если этого требует ситуация). Не просите слишком много. И ради бога, проверьте и сами свою форму. Слишком часто в Интернете ты сталкиваешься с тем, что заполняешь форму, пропускаешь «необязательные пункты», которые потом подчеркиваются красным. Хм, разве так работает принцип необязательности?

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

EPS10 и его Preview для загрузки на стоки — Форум по Векторной Графике

Новое сообщение / Участники / Правила форума / Поиск / RSS
  • Страница 1 из 14
  • 1
  • 2
  • 3
  • 13
  • 14
  • »
Форум по Векторной Графике » Общие вопросы по Adobe Illustrator » Adobe Illustrator » EPS10 и его Preview для загрузки на стоки (Вопросы и нюансы при подготовке файлов)

EPS10 и его Preview для загрузки на стоки

sezam Дата: Понедельник, 15.04.2013, 00:35 | Сообщение # 1
Добрый день Вам, Ярослав, и всем обитателям форума.

Собираясь начать работу на стоках, и дабы избежать ненужных экспериментов с EPS 10, полазил по инету в поисках ответов на непонятные вопросы, и получил весьма противоречивую картину. Т.к. больше всего вразумительного нашел на вашем сайте, хочу задать вопросы Вам, Ярослав. (Извините, если их окажется много).

1) Что означает и о чем предупреждает окно при открытии EPS 10:
«Illustrator now honors 9-slice scaling of simbol. » и т.д.
Что за 9 частей символа (и какого?) он там принял в обработку (или приостановил ее?), и что же там тогда с остальными частями этого символа в это время происходит?
Это что, пере-интерпретация его же работы, отправленной в 10 EPS? Или же это какая-то ошибка (и чем она чревата для стоков)? Открывается-то без видимых проблем.
Если файл создавался в Ai SC6, сохранялся в 10 EPS, и затем был переоткрыт в SC6 для просмотра(проверки), есть ли гарантия того, что файл все-таки нормальный (при отсутствии ошибок),а не заново интерпретируется Иллюстратором как формат SC6 со всеми его плюшками?

2)Что касается эффектов, скажем, Feather и Inner Glow (читал даже, что у народа принимают даже Blur, в чем я очень сомневаюсь). При открытии 10-ки в SC6 все чудесно! Все экспанды ничего лишнего не показывают, НО в Document Info есть Embedded image — он в Opacity Mask!
Вопрос — можно ли в качестве Opacity Mask использовать растровые изображения сгенерированные Иллюстратором? (Ведь в таком качестве они по сути сродни Mesh’у с прозрачностями, и являются хоть и растровым, НО СКРЫТЫМ и вспомогательным объектом)? Здесь, правда, есть один технический нюанс, но спорный.

3) Есть ли какие-либо ограничения по применению прозрачностей (за исключением градиентов с прозрачностями, включая Stroke, и Opacity Mask(см. выше)? Mesh с прозрачностью, как я понимаю, вполне проходит. Так?

4) Режимы наложения прозрачностей тоже все можно использовать, и при любых значениях Opacity?

5) Open Path. Рассматривается ли как таковой, например, прямоугольник с обводкой? Или его линию тоже нужно в объект переводить?

6) Pattern. Обязательно ли должен быть его образец в Swatches, если паттерн-заливку всеравно нужно экспандить? Это же касательно кистей, стилей и символов?

7) Artboard нужен, не нужен? Если нужен, то какие должны быть параметры?
В Ai10 артбодов не было, а была страница документа. И если объекты вылетали за ее пределы — это считалось «некомильфо». Какие требования сейчас?

8) Совсем не понятно с превьюхами файлов (*.jpg). Какие все же необходимы параметры? Информация сильно разнится от 600х800px до 3000х3000px в качестве необходимых. Я подозреваю, что больше будет походить на правду приблизительно 1200х1000px при 72ppi и sRGB профиле. Так или нет?
Также не понятно сколько вообще джипегов должно быть по количеству?

9) На стоках превью векторных работ зачастую выглядят как обработанные в растровом редакторе. Например, паттерны с затемнением по краям, или лого на сложном текстурном фоне с тенями, бликами и прочими фишками. Вопрос такой: Может ли отличаться превью файла от оригинала (в разумных пределах)?
Другими словами, можно ли превью подавать в качестве Presentation, и доводить его до гламурного состояния в растровом редакторе, а векторный оригинал неперегружать этими ненужными украшательствами?

И еще. Вы с кем-то на форуме это уже обсуждали, но я не нашел ветку. Речь шла о паттернах. Так вот, если паттерн размножить на листе при помощи Transform, избавившись предварительно от Clipping Mask, и положив образец в Swatches, будет ли это принято, или обязательно нужна отэкспанденная заливка на весь формат?

Сведение прозрачного графического объекта

На этой странице

О сведении

Если документ или графический объект содержит прозрачность, то для печати такого документа обычно необходимо выполнить процедуру, называемую сведением. Эта процедура разделяет прозрачный графический объект на векторную и растрированную области. Чем сложнее становится графический объект (в результате смешения изображений, векторов, шрифта, плашечных цветов, наложения красок и т. д.), тем сложнее процедура сведения и ее результаты.

Сведение может потребоваться при печати, а также при сохранении или экспорте в другие форматы, не поддерживающие прозрачность. Если при создании файла PDF нужно сохранить прозрачность без сведения, сохраните файл в формате Adobe PDF 1.4 (Acrobat 5.0) или более поздней версии.

Можно задать параметры сведения, сохранить их и затем применить в качестве стилей обработки прозрачности. Сведение прозрачности выполняется в соответствии с параметрами выбранного стиля сведения.

Обработку прозрачности невозможно отменить после сохранения файла.

Дополнительную информацию о проблемах с прозрачностью при выводе см. на странице «Print Service Provider Resources» в Adobe Solutions Network (ASN) (только на английском языке), доступной на веб-сайте Adobe.

О стилях сведения прозрачности

Если приходится регулярно печатать или экспортировать документы, содержащие прозрачность, то сведение прозрачности можно автоматизировать. Для этого нужно сохранить соответствующие параметры в стиле обработки прозрачности. Можно затем применять эти параметры для вывода на печать, а также для сохранения и экспорта файлов в форматы PDF 1.3 (Acrobat 4.0), EPS и PostScript. Кроме того, в приложении Illustrator их можно применять при сохранении файлов для более ранних версий Illustrator или при копировании их в буфер обмена, а в приложении Acrobat их также можно применять при оптимизации PDF-файлов.

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

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

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

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

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

Применение стиля сведения прозрачности при выводе

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

Если документы, содержащие прозрачность, регулярно печатаются или экспортируются, процесс сведения прозрачности можно автоматизировать, сохранив настройки сведения прозрачности в виде стиля сведения прозрачности. Эти настройки можно применить при печати или экспорте в форматы PDF 1.3 (Acrobat 4.0) и EPS.

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

Используется для настольных цветопроб и для печати документов по запросу, если документы будут печататься на цветных принтерах Adobe PostScript.

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


Настройки сведения прозрачности используются только в том случае, если в графическом объекте содержится прозрачность или если выбран параметр «Имитировать наложение» в области «Вывод» диалогового окна «Экспорт PDF-файла».

Создание и изменение стиля обработки прозрачности

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

Для создания нового стиля нажмите кнопку «Новый».

Чтобы создать стиль на основе стиля по умолчанию, выберите его из списка и нажмите кнопку «Создать».

Для редактирования существующего стиля выберите стиль и нажмите кнопку «Изменить».

Стили сведения прозрачности по умолчанию изменить нельзя.

Экспорт и импорт пользовательского стиля обработки прозрачности

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

Для экспорта стиля в отдельный файл нажмите кнопку «Сохранить» (InDesign) или «Экспортировать» (Illustrator), выберите имя и место, затем нажмите кнопку «Сохранить».

Стили не следует сохранять в папке установок приложения, иначе при удалении установок они будут потеряны.

Для импорта стилей из файла нажмите кнопку «Загрузить» (InDesign) или «Импортировать» (Illustrator). Найдите и выберите файл, содержащий нужный стиль, затем нажмите кнопку «Открыть».

Переименование или удаление пользовательского стиля обработки прозрачности

Для переименования существующего стиля нажмите кнопку «Редактировать», введите новое имя и нажмите кнопку «OK».

Для удаления стиля нажмите кнопку «Удалить», затем нажмите кнопку «ОК», чтобы подтвердить удаление.

Стили по умолчанию удалять нельзя.

Сведение отдельного объекта

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

Во время печати или экспорта можно вернуть прежние настройки сведения прозрачности для документа или книги.

Стиль сведения прозрачности документа используется для данного разворота.

Не применять (игнорировать прозрачность)

Игнорирует прозрачность для разворота. Этот параметр полезен поставщику услуг при поиске неисправностей.

Открывает диалоговое окно «Заказные настройки сведения прозрачности на развороте» для введения параметров.

Игнорирование стиля сведения прозрачности для отдельного разворота

Палитра «Сведение прозрачности» («Окно» > «Вывод» > «Сведение прозрачности»).

Область «Дополнительные» диалогового окна «Печать» или «Экспорт Adobe PDF».

Параметры сведения прозрачных областей

Параметры сведения прозрачных областей можно задать при создании, изменении или просмотре стилей сведения в приложениях Illustrator, InDesign или Acrobat.

Параметры подсветки (просмотр)

Нет (просмотр в цвете)

Растрированные сложные области

Выделяет области, которые будут растрированы для повышения производительности (в зависимости от положения ползунка «Растры/векторы»). Учтите, что на границе области света больше вероятность появления нежелательного эффекта швов (в зависимости от настроек драйвера принтера и разрешения растрирования). Чтобы свести к минимуму проблемы, связанные с эффектом швов, установите параметр «Выполнить обтравку сложных областей».

Выделяет объекты, являющиеся источниками прозрачности, например, частично непрозрачные объекты (включая изображения с альфа-каналами), объекты с режимами наложения и объекты с непрозрачными масками. Кроме того, обратите внимание, что стили и эффекты могут содержать прозрачность, и наложенные друг на друга объекты могут рассматриваться как источники прозрачности, если их затрагивают прозрачные области или наложение необходимо свести.

Все обрабатываемые объекты

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

Затронутые связанные файлы EPS (только в Illustrator)

Выделяет все связанные файлы EPS, на которые влияет прозрачность.

Обрабатываемые изображения (только в InDesign)

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

Разобранные узоры (Illustrator и Acrobat)

Выделяет все узоры, которые будут разобраны, если они содержат прозрачность.

Обводку, преобразованную в кривые

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

Текст, преобразованный в кривые (Illustrator и InDesign)

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

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

Текст и контуры с растровой заливкой (только в InDesign)

Выделяет текст и обводку, получившие растровую заливку в результате сведения.

Все растрированные области (Illustrator и InDesign)

Выделяет объекты и пересечения объектов, которые будут растрированы, поскольку нет другого способа представления их в PostScript или сложность их структуры превышает пороговое значение, установленное ползунком «Растры/векторы». Например, пересечение двух прозрачных градиентов всегда будет растрироваться, даже если значение «Растры/векторы» равно 100. При установленном параметре «Все растрированные области» также отображаются растровые изображения (например, файлы Photoshop), в которых есть прозрачность, а также эффекты растрирования — тени и растушевка. Обратите внимание, что этот параметр требует больше времени для обработки, чем другие.

Параметры стиля обработки прозрачности

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

Баланс растровой/векторной графики

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

Объем растрирования зависит от сложности страницы и от типов наложенных друг на друга объектов.

Разрешение для штриховых и текстовых объектов

Растрирует все объекты, включая изображения, векторные графические объекты, текст и градиенты с применением выбранного разрешения. Acrobat и InDesign позволяют использовать максимальное разрешение 9600 пикс/дюйм для векторного объекта и 1200 пикс/дюйм для сетчатого градиента. Illustrator позволяет использовать максимальное разрешение 9600 ppi как для штриховых объектов, так и для сетчатого градиента. Разрешение влияет на точность областей пересечения при сведении. Разрешение векторных объектов и текста должно быть в пределах от 600 до 1200 пикс/дюйм для высококачественного растрирования, особенно при использовании шрифтов с засечками или малого размера.

Разрешение для градиента и сетки

Определяет разрешение градиентов и сетчатых объектов программы Illustrator, растрированных в результате сведения прозрачности. Диапазон значений — от 72 до 2400 пикс/дюйм. Разрешение влияет на точность областей пересечения при сведении. Разрешение для градиента и сетки должно быть в промежутке от 150 до 300 пикс/дюйм, так как качество градиентов, теней и растушевки не улучшится при более высоком разрешении, но время печати и размер файла увеличатся.

Преобразовать весь текст в контуры

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

Преобразовать все обводки в контуры

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

Выполнить обтравку сложных областей

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

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

(Только в Illustrator) Сохранять альфа-каналы (только в диалоговом окне «Обработка прозрачности»)

Сохраняет общую непрозрачность сведенных объектов. При выборе этого параметра режимы наложения теряются, но внешний вид обработанных графических объектов и уровень альфа-прозрачности (например, при растрировании графического объекта на прозрачном фоне) сохраняются. Сохранение альфа-каналов может понадобиться при экспорте SWF- или SVG-файлов, так как оба эти формата поддерживают альфа-прозрачность.

(Только в Illustrator) Сохранять плашечные цвета и наложение цветов (только в диалоговом окне «Обработка прозрачности»)

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

Сохранять наложение (только в Acrobat)

Смешивает цвет прозрачного изображения с фоновым цветом для создания эффекта наложения цветов.

Просмотр областей графического объекта, предназначенных для сведения

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

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

В приложении Illustrator выберите команду «Окно» > «Просмотр результатов сведения».

В приложении Acrobat выберите команду «Инструменты» > «Допечатная подготовка» > «Сведение прозрачности».

В приложении InDesign выберите команду «Окно» > «Вывод» > «Сведение прозрачности».

(Illustrator) Если параметры сведения недоступны, выберите для их отображения команду «Показать параметры» из меню палитры.

Чтобы увеличить изображение, в приложениях Illustrator и Acrobat щелкните область предварительного просмотра. Чтобы уменьшить масштаб вывода, щелкните область предварительного просмотра, удерживая клавишу Alt или Option. Для панорамирования предварительного просмотра нажмите клавишу «Пробел» и перетащите указатель мыши в области просмотра.

Обновление изображения в палитре «Контроль сведения прозрачности»


  • Для автоматического обновления изображения, когда оно уже неактуально, выберите «Автоматически обновлять индикацию».
  • Для обновления отображения вручную щелкните «Обновить».

В обоих случаях отображение обновляется в окне документа с учетом выбранных настроек сведения прозрачности.

Рекомендации по созданию эффекта прозрачности

В большинстве случаев сведение прозрачности дает потрясающие результаты при использовании правильного, заранее определенного набора параметров сведения прозрачности или при создании набора параметров с необходимыми для получения нужного результата настройками. Более подробные сведения о влиянии прозрачности на конечный продукт см. в документе «Achieving Reliable Print Output with Transparency» (только на английском языке) на веб-сайте Adobe.

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

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

Хотя сведенные объекты могут казаться прозрачными, на самом деле это не так и находящиеся под ними объекты не могут быть видны. Однако если имитация наложения не была применена, то во время сведения прозрачных областей могут сохраниться основные наложения цветов при экспорте в PDF или печати. В этом случае получатели итогового PDF-файла должны выбрать режим Наложение красок в Acrobat 5.0 или более поздней версии для точного отображения результатов наложения.

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

Плашечные краски и режимы наложения

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

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

Воспользуйтесь другим режимом наложения или отключите режим наложения. Избегайте следующих режимов наложения при работе с плашечными цветами: «Разница», «Исключение», «Цветовой тон», «Насыщенность», «Цвет» и «Яркость».

Используйте триадный цвет там, где это возможно.

При применении прозрачности к объектам на развороте все цвета будут преобразованы в выбранное пространство при обработке прозрачности (»Редактирование» > «Пространство при обработке прозрачности») либо в RGB документа или в CMYK документа, даже если в них не используется прозрачность. Преобразование всех цветов приведет к согласованию между двумя цветными объектами и позволит избежать неожиданных результатов при наложении цветов на краях прозрачных областей. Цвета преобразовываются «на ходу», во время рисования объектов. Цвета помещаемой графики, которая взаимодействует с прозрачными областями, также преобразовываются в пространство наложения. При этом изменяется то, как цвета выглядят на экране и при печати, но не то, как цвета определены в документе.

В зависимости от рабочего процесса выполните одно из следующих действий:

При создании документов только для печати выберите «CMYK документа» для пространства наложения.

При создании документов только для публикации в Интернете выберите «RGB документа».

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

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

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

В этом случае выполните одно из следующих действий:

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

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

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

При работе с рабочим процессом OPI следует воспользоваться программой InDesign для замены изображений перед сохранением документа в формате PostScript. Для этого необходимо указать параметры при помещении графики EPS и при ее выводе. При помещении графики EPS выберите параметр «Читать ссылки на встроенные OPI-изображения» в диалоговом окне «Параметры импорта EPS». Во время вывода выберите параметр «Замена изображений по OPI» в области «Дополнительные» диалогового окна «Печать» или «Экспорт EPS».

Если прозрачный объект накладывается на объект с плашечными цветами, то при экспорте в формат EPS может быть получен нежелательный результат, поэтому следует преобразовать плашечные цвета в триадные цвета для печати или проведения цветоделения в приложениях, отличных от InDesign.

В таких случаях во избежание проблем используйте диспетчер красок для преобразования плашечных цветов в эквиваленты триадных красок перед экспортом из InDesign. Можно избежать проблем другим способом, убедившись в том, что плашечные краски одинаковы в исходном приложении (например, Adobe Illustrator) и в InDesign. Это может означать, что потребуется открыть документ Illustrator, преобразовать плашечные цвета в триадные цвета и снова экспортировать его в EPS, а потом поместить EPS-файл в документ InDesign.

Файлы Adobe PDF

Во время экспорта в Acrobat 4.0 (Adobe PDF 1.3) всегда происходит сведение прозрачности документа, во время которой может измениться внешний вид прозрачных объектов. Непрозрачное содержимое проходит обработку сведением, только если выбран параметр «Имитировать наложение» в области «Вывод» диалогового окна «Экспорт Adobe PDF». Поэтому при экспорте документа InDesign с прозрачным областями в документ Adobe PDF выполните одно из следующих действий:

Если это возможно, выберите совместимость с Acrobat 5.0 (Adobe PDF 1.4), Acrobat 6.0 (Adobe PDF 1.5) или Acrobat 7.0 (Adobe PDF 1.6) в диалоговом окне «Экспорт PDF-файла» для сохранения прозрачностей в полностью редактируемом виде. Убедитесь, что типография работает с файлами Acrobat 5.0, Acrobat 6.0 или Acrobat 7.0.

Если необходимо использовать совместимые с Acrobat 4.0 документы, а документ содержит плашечные цвета и для просмотра на экране необходимо создать PDF-файл (например, для клиента), следует выбрать параметр «Имитировать наложение» в области «Вывод» диалогового окна «Экспорт PDF-файла». Этот параметр имитирует области прозрачности и плашечных цветов. Получателям такого PDF-файла не нужно выбирать параметр «Просмотр наложения красок» для правильного отображения документа. Параметр «Имитировать наложение» преобразует все плашечные цвета в эквиваленты триадных цветов для итогового PDF-файла, однако при создании конечного PDF-файла убедитесь, что этот параметр отключен.

Попробуйте использовать предустановленный стиль Adobe PDF «[Качество печати]». Этот стиль содержит настройки сведения прозрачных областей, необходимые для работы со сложными документами, предназначенными для печати с высоким разрешением.

Сведение прозрачности может преобразовывать векторные изображения в растровые. Треппинг, применяемый к графическим объектам в Adobe Illustrator при помощи обводки и помещаемый в InDesign, при этом будет сохранен. Треппинг, примененный к нарисованным в InDesign и растрированным впоследствии векторным графическим объектам, может не сохраниться.

Для сохранения максимально большого количества векторных объектов выберите стиль сведения прозрачности «[Высокое разрешение]» в области «Дополнительные» диалогового окна «Печать» или «Экспорт PDF-файла».

Справки по другим продуктам

На посты, размещаемые в Twitter™ и Facebook, условия Creative Commons не распространяются.

Роль цвета в оформлении сайтов

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

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

Для начала рассмотрим, почему именно сегодня вопрос о выборе цветового решения сайта особенно актуален. В последнее время все более популярными становятся яркие, насыщенные цвета. Эта тенденция распространяется на различные сферы бизнеса, в том числе и на новостные сайты, сайты промышленных компаний, для которых уже сформировались традиционные цветовые решения. Такому изменению способствуют два важных фактора: совершенствование разрешений, цветопередачи дисплеев и растущая популярность плоского дизайна. Новые технологии существенно расширили возможности в количестве используемых цветов, они же позволили проводить более глубокий и четкий анализ восприятия цвета людьми. Плоский и материальный дизайн предполагают использование ярких цветов. С популярными палитрами материального дизайна можно ознакомиться здесь ( http://www.materialui.co/ ).

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

Как «работают» разные цвета

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

Синий цвет

Данный цвет достаточно часто используется в веб-дизайне благодаря тем эмоциям, с которыми он ассоциируется. Синий цвет выражает доверие, порядок, вызывает чувство спокойствия, безмятежности. Можно наблюдать использование этого цвета крупными компаниями, для которых важны прозрачность и доверие, например, Facebook и PayPal. Однако этот цвет имеет ограничение – его не следует использовать для сферы питания, так как в природе существует мало продуктов этого цвета, а иногда синий цвет ассоциируется с ядом.

Красный цвет

Этот цвет ассоциируется с опасностью, страстью, огнем, красотой, счастьем, гневом. Красный вызывает сильные чувства, в связи с чем мы можем наблюдать его частое использование в оформлении сайтов СМИ. Существует множество разнообразных оттенков этого цвета, но сложно связать определенные чувство и настроения с каким-то конкретным оттенком. Красный может быть одним из самых ярких цветов, символом счастья, но при этом и самым агрессивным цветом. Сложность в поиске грани между этими противоречивыми ассоциациями порой заставляет дизайнеров отказаться от использования этого цвета.

Желтый цвет

Для данного цвета также можно выделить ассоциации, которые являются противоречивыми. С одной стороны, желтый – это цвет предупреждения, привлечения внимания. Неспроста мы можем наблюдать в окружающей среде различные предупреждающие знаки желтого цвета. Поэтому не следует использовать данный цвет в больших количествах, чтобы не вызвать излишнего беспокойства. С другой стороны, желтый ассоциируется с радостью, счастьем. Это можно объяснить тем, что желтый цвет оказывает определенное влияние на наш мозг, в результате чего наши эмоции и реакция усиливаются, и порой мы можем принять эти ощущения за радость. Также восприятие цвета связано с нашим предыдущим опытом, поэтому желтый цвет может вызывать ощущения радости в связи с ассоциациями из нашей памяти (например, некоторые люди часто радуются при виде солнца).

Зеленый цвет

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

Оранжевый цвет

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

Черный цвет

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

Белый цвет

Обильное использование белого цвета на сайте способно создать ощущение простора, свободы. Использование белого пространства является важным элементом дизайна и активно применяется в популярном плоском и материальном дизайне.

Более подробную информацию об этих цветах ищите здесь .

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

Особенности цветового решения в зависимости от аудитории

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

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

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

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

Ограничения

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

Теория цвета и веб-дизайн

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

Однако многие дизайнеры, работая над подбором цветовых сочетаний, часто забывают о том, что не все люди воспринимают цвета одинаково. Существует небольшое количество людей, которые не различают какой-либо цвет, поэтому, работая над дизайном сайта, нужно помнить о пользователях-дальтониках. Ведь порой очень красиво оформленный сайт может просто не работать для этой категории пользователей, так как они не смогут на нем ориентироваться. И это действительно проблема: среди мужчин процент дальтоников может достигать 8%, а среди женщин – примерно 1%. Так что лучше не рисковать потерей 9% аудитории и подобрать цветовую гамму сайта так, чтобы он нормально воспринимался всеми людьми, в том числе и дальтониками.

ТЕОРИЯ ЦВЕТА МОЖЕТ УЛУЧШИТЬ ДОСТУПНОСТЬ САЙТА

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

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


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

КАК СОЗДАТЬ САЙТ С ВЫСОКИМ ПОКАЗАТЕЛЕМ ДОСТУПНОСТИ

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

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

КАКИЕ ЦВЕТА НУЖНО ИСПОЛЬЗОВАТЬ?

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

При этом нужно быть осторожным и стараться не использовать некоторые оттенки. Большинство дальтоников плохо различают сочетания красный/зеленый и желтый/синий. Вот еще несколько опасных цветовых комбинаций:

  • коричневый/зеленый
  • зеленый/синий
  • фиолетовый/синий
  • серый/синий
  • зеленый/серый
  • черный/зеленый
  • желтый/светло зеленый

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

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

КОМПЛИМЕНТАРНЫЕ ОТТЕНКИ

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

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

МОНОХРОМНЫЕ ПАЛИТРЫ

Работая над доступной цветовой гаммой, нужно все время следить, чтобы рядом не использовались элементы из неудачных цветовых пар. А чтобы создать наверняка дружественную по отношению к дальтоникам страницу, лучше всего использовать монохромную палитру. Неважно, как пользователь будет воспринимать цвет – он будет ориентироваться лишь на контраст. К тому же, монохром сегодня в моде, такие палитры сегодня очень часто используют на сайтах с минималистским дизайном.

ИНСТРУМЕНТЫ ДЛЯ ПОДБОРА ЦВЕТОВЫХ ПАЛИТР

Vischeck – это симулятор, с помощью которого можно протестировать веб-страницы на доступность для дальтоников. С помощью этого инструмента можно узнать, как люди с разными типами цветовой слепоты видят конкретный сайт и, если потребуется, быстро внести изменения в дизайн.

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

Еще один инструмент для онлайн-проверки сайтов на доступность для дальтоников. Можно проверить, как палитра, составленная из 216 цветов, воспринимается людьми с разными типами цветовой слепоты.

ВЫВОД

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

10 ошибок дизайна сайта при работе с цветом

Нежелание внедрять психологические приемы

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

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

Зеленый цвет символизирует доверие, а что может быть важнее доверия, когда речь заходит о еде?

1. Слепое подражательство

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

Даже если вам очень нравится какой-то сайт, задумайтесь, прежде чем заказывать «точно такое же, но про мои товары».

2. Тусклый call-to-action

3. Избыточная цветовая палитра сайта

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

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

Советуем также использовать специализированные сайты. Здесь можно сформировать свою гамму или использовать одну из уже готовых.

На первом примере для оформления текста используется 3 цвета, на втором всего два. Именно второй вариант смотрится лучше и текст на нем проще читается.

4. Разный цвет у однотипных элементов

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

На примере две кнопки с одним и тем же назначением на одном сайте. Неудачное решение.

5. Одинаковые цвета у разнотипных элементов

6. Недостаток контраста

7. Нестандартный цвет ссылок

8. Блеклый минимализм не для импульсивных продаж

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

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

9. Неуместный черный

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

Наши привычки, как и методы маркетологов, перекочевывают из супермаркетов на просторы интернета, к примеру, сайт ювелирной компании, выполненный в черном цвете, выглядит элегантно и дорого:

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

10. Цветовые ограничения дизайнеру

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

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

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

Выводы

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

Для примера мы размыли первый экран Aviasales.ru — внимание привлекают блоки элементов 1, 2 и 3. После прочтения заголовка, т.е. формирования у пользователя правильных ожиданий, он (вспоминаем про правила контраста) будет смотреть на нужные элементы выбора параметров и call-to-action.

А посмотрите, как четко выделяется на размытом фоне основное действие на сайте ostrovok.ru.

Если ваши интерфейсы проходят подобные тесты на ура, то дальнейшие улучшения сайта необходимо проводить, основываясь на понимании пользовательской психологии, т.е. анализируя фидбек от реальных пользователей. С помощью вопросов вроде: “Куда вы посмотрели в первую очередь: на какие 3 элемента сайта, и в каком порядке? Куда вам хочется нажать в первую очередь и почему?” в AskUsers вы сможете понять не только как распределяется внимание пользователей, но и почему пользователи смотрят на те или иные элементы. Данная информация поможет выявить целый ряд проблем в текущем интерфейсе и найти оптимальные варианты их решения.

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

18 ошибок. Начинающему веб-дизайнеру

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

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

Что сподвигло на написание этой статьи? Дело в том, что часто читатели присылают письма с вопросами, и просьбой посмотреть тот или иной макет, который они разработали подсказать какие-то мелочи, которые обычным делом допускаются новичками.

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

Нет логической структуры в дизайне сайта. Очень часто непонятно что, куда, зачем и почему, в макете располагается. Структура не продумывается, все создается по принципу пусть будет, или а давай и это засунем. Пользователь не может с первого раза понять, что будет, если он произведет определенное действие. Должна быть логика в макете и пользователь с первого раза должен понимать, что значит тот или иной блок и что произойдет, если он будет с ним взаимодействовать.

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

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

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

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

Не используется модульная сетка. Наверное, 90% начинающих веб-дизайнеров, если не больше не используют модульную сетку при разработке дизайн макетов сайтов. А зря, так как модульная сетка это очень удобный, полезный инструмент для веб-дизайнера. Чем она полезна, расписано в статье о модульной сетке.

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

Не откликающиеся элементы дизайна. Еще одна ошибка, новички практически никогда не отрисовывают элементы дизайна в разных состояниях. Статичное состояние, наведение, нажатие и другое. Часто не показывают, как поведет себя элемент при действие пользователя, а ведь верстальщик не умеет читать мысли, он сделает только то, что отрисованно и все. И дизайн будет не живой.

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

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

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

Несоразмерность элементов и блоков в макете. Если не использовать модульную сетку, то многие блоки смотрятся несоразмерными. И выглядят нелепо из-за того, что их размеры не вписываются в макет. Вот вам и еще один + по поводу использования модульной сетки.

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

Создавайте элементы дизайна (иконки, кнопки, тизеры и т.д.) сами. Разрабатывая такие элементы, вы набиваете руку и придаете большую уникальность дизайну. Конечно, бывают случаи, когда нет смысла изобретать велосипед, но в большинстве своем учитесь рисовать элементы дизайна сами.

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

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

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

Знание стилей слоя, которые легко создаются средствами css. Уделите немного времени изучению css3 и вы поймете какие стили слоя с легкостью можно сделать через css, а какие нет. Используйте эти знания на благо своих макетов.

Если у кого есть дополнения по поводу статьи, дополняйте в комментариях.

Топ-пост этого месяца:  Пагинация в AngularJS
Добавить комментарий