книги хакеры / журнал хакер / 086_Optimized

Î

ÑÍÎ

ÂÍ

ÎÉ

ÏÎ

ÊÀ

ÇÀ

ÒÅ

ËÜ

СИОНАЛИЗМА В WEB

ÏÐ

ÅÑ-

ÎÔ

ÀÊÊ

-Ä

ИЗАЙНЕ

—

ÓÐÀ

ÒÍÎÑ

ÒÜ È ×ÈÑÒ

ÎÒÀ ÑÒÈ

Ëß

XÀÊÅÐ 02 /86/ 06

039

Во-вторых, необходимо понять,

работы с сайтом. Что делает ра-

МЕЛОЧИ

как юзер будет «ползать» по сай-

боту более удобной и понятной.

В ДИЗАЙНЕ

ту, то есть определиться с навига-

Если меню сайта более длинное,

цией. Если рассматривать взаи-

то не факт, что его дочитают до

модействие человека и машины

конца. Любая задача должна ре-

Ç

несколько шире, чем набор кно-

шаться

минимальным

числом

подбираем со-

пок, то нужно отметить, что интер-

действий, логика этих действий

÷òî

мелочи

четание мето-

фейс — это не только система

должна быть

очевидной

äëÿ

апомни,

дом, основан-

навигации по сайту, но и часть ди-

пользователя, движения курсора

очень важны! Под мело-

íûì íà ñâîé-

зайна,

подчиняющаяся

своим

è

ãëàç

пользователя

должны

чами я имею в виду всяко-

ствах цветово-

специфичным требованиям. Все

быть оптимизированы.

ãî

ðîäà

выравнивания,

го круга, кото-

функции элементов интерфейса

В-третьих, создавая интернет-мага-

мелкие детали и цветовые

рый позволяет

должны быть интуитивно понят-

зин, нужно четко подобрать цвето-

нюансы, а также отсут-

подобрать ряд

ны. В рамках одного проекта дол-

вую гамму. Цвет — один из самых

ствие мелких «паразит-

цветов, имею-

жен использоваться только один

неоднозначных элементов веб-ди-

ных» деталей и связей.

щих разный

вариант дизайна интерфейса.

зайна. Цвет может подчеркнуть

Дизайнер, работая над сво-

оттенок

Интерфейс — это не реклама. Он

контекст, а может и оттолкнуть.

им проектом, может потра-

должен быть четко выражен, в

Для создания эффективного ди-

тить на оттачивание дета-

рамках общей концепции дизай-

зайна необходимо учитывать ряд

лей чуть ли не половину

на сайта, но не должен отвлекать

требований, налагаемых на выбор

всего времени работы над

от содержания страниц.

цветового решения: текст не дол-

ним. Такое положение дел

В проектах с большим объемом

жен сливаться с фоном, а заголов-

может удивить, но это стоя-

информации и сложной структу-

êè

— теряться;

использование

щее занятие. Дело в том,

подбираем

рой, кроме элементов навигации,

контрастных сочетаний вызываю-

÷òî

человек рассматривая

сочетание из

необходимо использовать эле-

щих напряжение глаз, также неп-

произведения искусства, в

двух цветов

менты индикации, показывающие

риемлемо; необходимо, чтобы цве-

котором много нюансов, по-

при выборе

местоположение данной страни-

товое решение

соответствовало

лучает большое

удоволь-

цветового ре-

цы в структуре сайта. Нужно соб-

форме подачи материала, его со-

ствие. Чем больше он смот-

шения для

людать и более общие требова-

держанию, аудитории сайта.

рит, тем больше деталей он

дизайна

íèÿ ê

дизайну, накладываемые

При поиске цветового решения

обнаруживает. Это занятие

физиологией человека.

важно

найти сочетание

цветов,

доставляет

разуму эстети-

Важная информация (элементы уп-

гармонирующих

äðóã ñ

другом.

ческое удовольствие. Срав-

равления) должны находиться на

Универсальных решений, приво-

нительно бедна нюансами

переднем плане. Интерфейс дол-

дящих к 100% успеху нет, но есть

реклама. Она нацелена на

жен строиться «вокруг» объектов,

методики, помогающее добиться

мгновенное восприятие, а

ради которых создавался сайт.

хороших результатов.

не на долгое рассматрива-

Меню, в той или иной степени,

При подборе сочетания из двух

ние, как картина. Исклю-

должно отражать структуру сайта,

цветов можно использовать ме-

чением из

этого

правила

это поможет понять, куда нужно

тодику, основанную на свойствах

может стать некоторые из

идти для получения искомой ин-

цветового круга. Если

выбрать

телевизионных

роликов,

формации. Попав пару раз не туда,

дополняющие

(комплиментар-

которые приятно смотреть

посетитель, скорее всего, покинет

ные) цвета, лежащие на круге

íå îäèí ðàç.

магазин, так и не став клиентом.

напротив, то каждый из них будет

Поэтому не ленитесь отта-

При работе с большим объемом

в сочетании с другим ярче и вы-

чивать детали в своем про-

информации понимание

ïðåä-

разительнее.

изведении. Только обрати-

почтительней запоминания.

При подборе гаммы из трех цве-

те внимание: «оттачивать»,

Кратковременная память челове-

тов также можно воспользовать-

а не добавлять что-то сов-

ка ограничена 7-ю элементами

ñÿ

свойствами цветового круга.

сем новое. Это может на-

информации. Семь — это усред-

Наложив на него равнобедрен-

рушить интеграцию. Уме-

ненное значение, обычно оно ме-

ный треугольник, получаем

òðè

íèå

расставлять

нюансы

няется в пределах от 5 до 9. Поэ-

цвета, лежащие под вершинами

приходит с опытом, и про-

подбираем

òîìó,

если есть возможность,

треугольника. Это один из самых

фессионалы делают это

сочетание

ориентироваться нужно на циф-

простых способов подбора триа-

практически машинально.

из трех цветов

ру 5, а не 7. Из этого вытекает,

ды гармонирующих цветов.

что в простом меню количество

Еще один метод, основанный на

для дизайна

нашего интер-

пунктов не должно превышать 7.

свойствах цветового круга, позво-

нет-магазина

Если пунктов меню больше, их

ляет подобрать ряд цветов имею-

надо разбить на группы. При

щих разный оттенок. В этом слу-

этом групп должно быть не более

чае используют цвета лежащие

7 и количество пунктов в одной

на круге рядом.

КАЧЕСТВЕННЫЕ

группе не должно превышать 7.

Эти методы подбора цвета мож-

ССЫЛКИ

Что это дает? Если меню сайта

но использовать как по отдель-

запоминается при первом взгля-

ности, так и в сочетании друг с

де, это сразу помогает понять, о

другом. При этом необязательно

Â

чем сайт (в первом приближе-

использовать именно указанные

нии), какую информацию он со-

сочетания цветов. Дизайн — про-

держит, где искать нужную ин-

цесс творческий, и только креа-

Интернете сложилась такая ситуация, при кото-

формацию. Кроме того,

ìåíþ

тивный подход может гарантиро-

практически каждый владелец интернет-мага-

сохраняется в памяти во время

вать успех.

зина считает себя «крутым дизайнером». Каждый

владелец более или менее успешного магазина —

вдвойне. И никто почему-то не хочет прислушивать-

ся к советам. Ну да ладно, оставим это на их совес-

ти. А сейчас поговорим лучше о правильных ссыл-

ках. Во-первых, нужно делать ссылки информаци-

îííî

значимыми. Например,

что значит ссылка

040

XÀÊÅÐ 02 /86/ 06

XÀÊÅÐ 02 /86/ 06

041

042

XÀÊÅÐ 02 /86/ 06

XÀÊÅÐ 02 /86/ 06

043

08

ПЕРНАТАЯ МАСКА:

06

ОКРЫЛЕННАЯ ХИЩНИЦА:

Êàê è

в случае с вырезанной львицей, поработаем

Откроем файл iStock_000000651420.jpg и обведем

Eraser, чтобы подправить края крыла, и Clone

ближайшее крыло, используя те же инструменты,

Stamp, чтобы исправить дефект в верхней правой

которыми мы пользовались в шагах 1 и 2. Преоб-

части. Теперь откроем iStock_000000651420.jpg,

разовав контур в выделение, скопируем крыло

07

ДОБАВИМ РЕЗКОСТИ:

выделим голову и тело птицы, используя инстру-

и вставим его в файл с львицей. Чтобы оно помес-

Добавленному в рисунок крылу явно не хватает

ìåíò Rectangular Marquee, скопируем их и вставим

тилось в нужное нам место коллажа, увеличим вы-

резкости. Воспользуемся фильтром: Filter >

в наш рисунок. Сделаем новый слой полупрозрач-

соту картинки до 1500 px, выбрав в меню Image >

Sharpen > Unsharp mask с параметрами Amount —

ным и начнем поворачивать попугая против часо-

Canvas size. При помощи Transform развернем

50% è Radius — 3.9 px (Threshold оставим на нуле).

вой стрелки при помощи Transform, чтобы его голо-

львицу, как показано на рисунке.

Нажмем на ÎÊ.

ва точно «пришлась в пору» к телу львицы.

10

РАЗНОЦВЕТНАЯ БЕСТИЯ:

Теперь

сделаем активным слой с львицей

и выберем Layer > Layer Style > Gradient Overlay.

Выберем в выпадающем меню Blend Mode òèï íà-

11

ЕЩЕ НЕМНОГО ПЕРЬЕВ:

ложения Color, чтобы раскрасить шерсть в яркие

09

БУДУЩАЯ ТЕКСТУРА:

цвета попугая. Теперь кликнем по цветовому пере-

Сделаем активным слой с телом попугая.

Теперь

аккуратно отделим тело попугая от головы,

õîäó Gradient и подберем цвет градиента. Кликнем

Используя Clone Stamp, перенесем несколько мел-

используя инструмент Polygonal Lasso. Вырежем

на нижний движок слева, по квадратику Color è

ких перьев с верхней части крыла на плечо нашего

его и затем вставим в новый слой, после чего под-

после появления диалогового окна палитры

монстра. Для того чтобы эффект не резал глаз, от-

винем инструментом Move. Очень скоро этот

по оперенью на шее попугая на нашем рисунке.

метим достаточно низкое значение Opacity. Ïîä êî-

фрагмент понадобится нам в качестве источника

Второй цвет может быть любым, мы сделали его

нец поработаем ластиком там, где это нужно, также

текстур, поэтому не будем его удалять.

желто-зеленым.

с достаточно небольшим значением Transparency.

12

БРЮКИ ПРЕВРАЩАЮТСЯ…

13

ФАНТАСТИЧЕСКИЕ КРЫЛЬЯ:

14

НЕКОШАЧЬИ КОГОТКИ:

Откроем iStock_000000463507.jpg и выделим ногу

Применим к слою с крыльями Gradient Overlay,

с когтями. Вставим ее в наш рисунок над слоем с те-

как мы это делали в шаге 10. На этот раз нам

Теперь нужно добавить когти на остальные лапы

лом и уменьшим так, чтобы она казалась маловатой

нужно вертикальное направление градиента,

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

для львиной лапы. Теперь, используя Eraser, сотрем

переходящего из цвета тела у основания крылье

несложно добавить все эти детали и привести их к

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

в в какой-нибудь другой яркий цвет на их кончиках.

единому виду. Возьмем немного шерсти с перед-

слою с телом попугая и «одолжим» у него немножко

Поскольку крылья изначально темнее туловища,

них лап, чтобы четче обозначить нерезкие края

перьев при помощи Clone Stamp, которые перене-

воспользуемся Color Overlay из этого же меню,

задних, после чего воспользуемся инструментом

сем на ноги. В новом слое инструментом Brush íàðè-

отметив в настройках белый цвет, Blend Mode —

Burn с низким значением Exposure, чтобы бросить

суем легкие тени, как показано на рисунке.

Normal, Opacity — 8%.

тень на правую заднюю лапу.

044

XÀÊÅÐ 02 /86/ 06