Веселые картинки

п рактически ни один сайт, исключая совсем минималистичные, не обходится без иллюстративного материала, в качестве которого используются фотографии, рисованные иллюстрации, диаграммы и схемы. Последние два типа нам не очень интересны, а вот о фотографиях и иллюстрациях стоит поговорить особо. Чаще всего в дизайне сайтов используются фотографии, во-первых, потому что их проще добыть и, во-вторых, потому что фотоматериал более реалистичен и нагляден. Рисованная иллюстрация требует либо наличия у дизайнера художественных навыков, либо привлечения профессионального иллюстратора, что приводит к удорожанию стоимости работы. Заказчик же в большинстве случаев не готов доплачивать "за эксклюзив и ручную работу': поэтому в проектах средней ценовой категории дизайнер старается не заморачиваться и ищет фотографию. К слову сказать, мастерски отретушированное фото ничем не уступает иллюстрации по "рукотворности" и не требует особых усилий. 152 Часть II. Ловкость рук An• чеrо нужнь1 картинки Внимательно посмотрев на несколько сайтов разной направленности и стиля, можно понять, что любые имеющиеся на них картинки делятся по функциональности на две группы. Первая группа - исключительно иллюстративный материал, например когда в тексте новости или статьи приводятся фотографии и иллюстрации, чтобы яснее донести мысль автора до читателя. Вторая - картинки, которые создают неповторимый облик сайта, работают в сфере эмоций и призваны рассказать без слов, о чем этот сайт и каково его настроение. Картинки из первой группы взаимозаменяемы: уберите их - и в общем и целом ничего не изменится. Совсем другое дело - картинки из второй группы. Презентационный дизайн часто строится на одних только картинках: это могут быть фотоколлажи, иллюстрации, а также сочетание рисованного и сфотографированного. Исходя из этого естественного деления на главные и второстепенные, к картинкам и относятся по-разному. Самые главные изображения более тщательно подбираются, ретушируются, работа над ними отнимает много времени. Второстепенные, иллюстративные, ищутся во вторую очередь, и впоследствии заказчик не раз может заменить ОДНО фото другим. rде взять изображение Глава 1 1 . Веселые картинки 1 53 Все фотографии и иллюстрации откуда-то берутся. Ниже мы рассмотрим самые популярные способы раздобыть картинку относительно честным путем, а сейчас - "нелегальные" методы. • На каком-нибудь сайте. Интернет бесплатен только для личных нужд, но если вы хотите сохранить картинку, увиденную на каком-то сайте, чтобы использовать ее в коммерческих целях, это уже незаконно. В крайнем случае свяжитесь с владельцем изображения и попросите у него разрешения. Об этой простой вещи многие даже не догадываются, а ведь за спрос денег не берут. • В поисковых системах. Поисковые системы позволяют искать изображения по всему Интернету. Тем не менее это не бесплатный сборник картинок, как ктото мог подумать. У каждой картинки есть автор. К тому же задумайтесь, нужна ли вам для создания уникального дизайна фотография, которая уже висит на каком-то сайте? • В журналах с последующим сканированием. Если это не журнал начала ХХ века, а вполне современное издание, вы нарушаете закон. Уважающий себя журнал заплатил фотографу или иллюстратору за право напечатать эту картинку, почему вы не поступаете так же? В общем, идея вам ясна: не берите чужого. Все, что уже используется, кому-то принадлежит. Кпипарты Когда люди говорят "клипарт': то под этим словом они подразумевают следующее: это бесплатная или платная фотография либо иллюстрация, которую можно найти в специальных хранилищах клипартов (фотобанках) . Клипарты создают фотографы и иллюстраторы не специально для конкретного проекта, а "вообще", для различных дизайнерских нужд. Это, можно сказать, полуфабрикат: когда дизайнеру некогда, лень или это не заложено в бюджете сайта, он обращается в каталог с клипартами, по ключевым словам находит приблизительно подходящее изображение и вставляет его в дизайн. Нужно нам яблоко, кусок пирога, улыбающаяся во все тридцать два зуба девушка или завораживающий зимний пейзаж на новогоднюю открытку - все это можно найти, не сходя с места. Сейчас уже вполне можно выкинуть все заботливо собранные ранее компакт-диски с клипартами, потому что абсолютно все можно найти в Интернете. Вопрос только в том, готовы ли вы платить деньги, и сколько. В фотобанках все изображения снабжены множеством ключевых слов, а также разбиты на категории, и поэтому вы легко и просто найдете нужную картинку, не мучая себя пролистыванием каталогов. 1 54 Часть II. Ловкость рук Для сайтов среднего бюджета наилучшим решением будет использовать фото, купленные в микропейментовых фотобанках или микростоках. Любое фото хорошего, печатного качества можно купить за 1 -50 долларов. Низкая цена на снимки и иллюстрации обусловлена тем, что купленное вами изображение не убирается из банка, оно продается снова и снова. Следовательно, автор получает деньГи (небольшой процент от стоимости) после каждой покупки. Но также это значит, что вы не приобретаете эксклюзивные права на изображение и не можете требовать, даже гипотетически, у сайта-конкурента, чтобы он убрал такую же, как у вас, картинку с сайта только потому, что вы ее "раньше купили': Поэтому строить масштабные рекламные кампании на основе продукции из микростоков категорически не рекомендуется: эти фото, иллюстрации, флеш-заставки и видео не уникальны. Я слышала об одном очень печальном случае, когда крупная сеть косметических магазинов использовала иллюстрацию из фотобанка в крупной рекламной акции. Автор картинки узнала свою работу и написала, что с ней не был заключен договор выкупа прав. Репутация фирмы несколько пострадала как минимум потому, что в считанные дни в Интернете распространилось множество негативных отзывов. Но если вы делаете небольшую работу, микростаки - ваше все. Это легально, недорого и качественно. Обратите внимание: предупреждайте клиента об источниках фотографий. Закладывайте стоимость клипарта в стоимость дизайна. Используйте для предварительных макетов картинки с водяными знаками, если не хотите покупать фото до их утверждения. Вот небольшой список зарубежных микропейментовых фотобанков. • Depositphotos (www . depo s i tpho t o s . сот) • Fotolia (www . f o t o l i a . сот) • Shutterstock ( s hu t t e r s t o c k . com) • BigStockPhoto (www . Ь i g s t o c kpho t o . сот) • IStockPhoto(www . i s t o c kpho t o . com) Еще одна группа сайтов - бесплатные фотобанки. Они, конечно, уступают по количеству фотографий коммерческим фотобанкам, однако слово "бесплатно" здесь ключевое. Здесь, помимо скачивания чужих фотографий, вы можете поделиться и своими, если не жалко. Вот несколько популярных бесплатных фотобанков. • www . s x c . hu • www . phot l . сот • www . mo rgue f i l e . com • www . ph o t o c a s e . com 8 www . image a f t e r . com 8 free range s t o c k . com Глава 1 1 . Веселые картинки 1 55 Бесплатные фотобанки, как правило, не столь наполнены. Если ваша задача - сделать бюджетный дизайн, то это вполне неплохой вариант. Если же нужно найти клипарт быстро и максимально подходящий (и клиент доплачивает), то придется обратиться в микростоки. Самое главное, о чем необходимо помнить, работая с клипартами, - они либо должны быть бесплатными, либо купленными легально, так как ответственность за авторство всех изображений в дизайне несете вы, если не подписан договор, утверждающий обратное. Ycnyrи фотоrрафа 11 иппюстратора Несмотря на то что на постсоветском пространстве все еще принято тянуть в дом все, что плохо лежит, практика честной работы постепенно приживается и у нас. Если бюджет позволяет, потратьте деньги не на клипарты, а на фотографа, иллюстратора или ЗD-моделлера. Таким образом вы сможете избежать сразу несколько проблем: поиска "именно той" фотографий в нужном ракурсе и правовой ответственности за не совсем легальное использование изображения. Часто бывает так, что фотография из фотобанка всем хороша, но вот чуть-чуть бы повернуть объект, и было бы совсем замечательно! При работе с фотографом вы заранее можете обсудить, что хотите получить, и даже нарисовать ему эскиз - как это должно выглядеть. То же самое касается иллюстратора и ЗD-моделлера. Cдenai сам В начале книги я говорила о том, что веб-дизайнер должен уметь делать что-то еще, помимо дизайна сайтов: это существенно расширяет его профиль. Два самых популярных направления, которые я наблюдаю в своей профессиональной деятельности, - это фотография и векторная иллюстрация. Действительно, многие фотографии для сайта вы вполне можете сделать сами, не прибегая к услугам ни фотобанков, ни фотографов. Вы полностью контролируете весь процесс, являетесь владельцем полученных изображений и экономите деньги. Вот вам пример. Делаем сайт о блинах. Печем блины сами либо зовем на помощь подругу или маму и фотографируем. Результаты кадрируем и ретушируем по своему вкусу и вставляем на сайт. Оставшиеся удачные кадры откладываем про запас или продаем в фотобанк. И так со многими вещами, особенно это касается предметов, легко добываемых в обычных бытовых условиях. Конечно, если вам нужны пальмы и прекрасная таитянка, а вы в Иркутске, делать нечего - добро пожаловать в фотобанк! А если вы можете справиться сами, вставайте со стула и фотографируйте! Даже простым полностью автоматическим 156 Часть Il. Ловкость рук цифровым фотоаппаратом можно сделать множество разнообразных фотографий, пригодных для использования на сайтах Техн111еск•е особенност• С точки зрения дизайнера, веб-дизайн отличается от полиrрафического в лучшую сторону, главным образом двумя вещами: во-первых, если вы допустили ошибку, ее никогда не поздно исправить (в полиrрафии исправить ошибку после сдачи макета в печать очень трудно), а во-вторых, технические требования к изображениям значительно ниже. Вот и поговорим об этих требованиях. Формат В веб-дизайне на стадии рисования макета (который вы с 90%-ной вероятностью будете рисовать в Photoshop) вы можете использовать изображения в любом формате, который поддерживается вашим графическим редактором. После импорта в вашу основную программу изображение становится частью макета. Компьютерные изображения в целом делятся на два класса: векторные и растровые. Растровые изображения - это абсолютно все фотографии, а также рисованные иллюстрации, созданные в растровых графических редакторах, полученные со сканера или же просто экспортированные в этот формат из векторных. Проще говоря, растровые изображения состоят из множества цветных точек (растра), отличаются богатством цветовых оттенков и очень плохо переносят изменение их размеров в сторону увеличения. Практика показывает, что с более-менее приемлемыми результатами увеличить размер растрового изображения можно максимум на 20%, а дальше качество будет быстро ухудшаться. 1 58 Часть II. Ловкость рук Когда вы рисуете макет в Photoshop, то по большей части работаете с растровой графикой , используя лишь отдельные векторные объекты, в частности фигуры lshapesl и текстовые блоки. Векторные изображения создаются вручную или же посредством трассировки растровых изображений в векторных редакторах. (Преобразовать, т.е. трассировать, растр в вектор позволяют, например, пакеты Corel Draw и Adobe Illustrator, начиная с версии CS2.) Все растровые изображения состоят не из отдельных пикселей, а из математического описания их элементов-кривых (curves), благодаря чему они обладают замечательным свойством: позволяют практически бесконечно их уменьшать или увеличивать без какой-либо потери качества. В основную рабочую программу векторные изображения могут импортироваться как в векторном виде, так и в растровом. Все зависит от вашего желания и возможностей графического редактора. Разрешение Фотография или иллюстрация, которую можно использовать в веб-дизайне, традиционно имеет разрешение (resolution) 72 точки на дюйм (dpi - dots per inch) или выше. Однако понятие разрешения в случае графики для веба играет не такую важную роль, как в случае полиграфической печати. Создайте в Photoshop один файл размером 300х300 точек с разрешением 30 dpi, а другой - 300х300 точек с разрешением 72 dpi - и на мониторе вы не увидите между ними никакой разницы. Разница будет видна лишь при их распечатке, а на мониторах можете проставить хоть 10 dpi! Но все-таки традиционно принято использовать разрешение 72 dpi, поэтому не нужно оригинальничать. Размер Размер изображения по ширине и высоте для использования в веб-дизайне измеряется не дюймами и не сантиметрами, а естественной для мониторов единицей - пикселем. Ни минимума, ни максимума здесь нет: все зависит только от того, сколько места для изображения вы собираетееЪ выделить в макете. Если это будет дизайн с фиксированной версткой, шириной 760-780 пикселей, то понятно, что вставленная в макет картинка не может быть больше всей ширины сайта (но возможны и исключения). Самые мелкие изображения, используемые в дизайне, могут иметь размеры от SxS пикселей и выше. Это пиктограммы, буллеты, стрелочки и тому подобная мелочь. Они тоже нужны, и их значимость не зависит от их размера. Главное, что нужно помнить о размерах изображений, - уменьшать фотографию можно, а вот увеличивать более чем на 1 5-20% - нет! Качество Глава 1 1 . Веселые картинки 1 59 Качество изображения складывается из субъективных и объективных параметров. Раньше, когда я только училась, я считала достаточно качественными все картинки, на которых не было заметно побочных эффектов от сжатия, так называемых JРGартефактов, а также "ступенчатых" градиентов, свойственных фотографиям, сохраненным в формате GIF. Это объективные критерии качества изображений, которые актуальны для меня и сейчас. Скажем в дизайне "нет" любым компрессированным до безобразия картинкам - раньше так поступали, чтобы сэкономить интернет-трафик пользователя, ну а сейчас JРG-сжатие более чем на 1 5-20% не дает никакой выгоды по сравнению с упущенным эффектом свежести, яркости и "настоящести" фотографии. Каковы субъективные критерии? У каждого дизайнера они свои. Кто-то может взять в работу слишком темную или пересвеченную, зашумленную или блеклую фотографию и, отретушировав ее, сделать из нее замечательную картинку. Но если есть возможность найти технически более совершенное фото, зачем искать себе лишнюю работу по ретуши? Итак, первый субъективный критерий отбора фотографий по качеству - наличие или отсутствие технического брака, допущенного при съемке или сканировании фотографии. Дальше - больше. Поскольку во многом хорошо подобранное изображение воздействует на зрителя сильнее, чем все остальное на сайте, нужно, чтобы фото не только было технически адекватным (т.е. фотографии, сделанные с мобильного телефона, вряд ли подойдут), но и "захватывало". Мы смотрим на композиционное решение, сочность красок, эмоциональность подачи объекта. Если это человек, у него на лице должны быть какая-то эмоция и осмысленность взгляда; если пейзаж, он должен обладать определенным настроением; если овощи, фрукты, еда - они должны вызывать аппетит. А сфотографированные предметы должны казаться почти настоящими: вот-вот сойдут с экрана. Научиться искать адекватный клипарт и вообще видеть подобные вещи - первостепенная задача дизайнера, касающаяся работы с фотоизображениями. Если вы научитесь так же хорошо фотографировать, это просто замечательно! Что касается субъективного качества иллюстраций, то этот вопрос остается открытым. Лично для меня качественной иллюстрацией будет, в первую очередь, та, на которой сразу понятно, что она изображает и какую мысль и эмоциональный заряд несет. Также я учитываю ее соответствие модным тенденциям. О моде в сфере иллюстрирования вы можете узнать сами, понаблюдав за тем, какие иллюстрации создаются в ведущих дизайн -студиях. Qвет О цвете говорить много не надо. Поскольку сейчас у подавляющего большинства пользователей цветные мониторы (даже не верится, что когда-то это было не так! ) , зритель в массе своей предпочитает цветное черно-белому, поскольку в этом случае мозг получает больше информации и эмоций. Сайты также все больше цветные, отсюда и простой вывод: иллюстрации и фотографии, за редким исключением, нужны цветные. Расширенный вывод: цвет на фотографиях должен быть приятным, естественным и достаточно насыщенным. Вы наверняка замечали, что изображения, полученные с мобильных телефонов и простейших моделей фотоаппаратов, не поражают яркостью красок и достаточной четкостью. "Вывести" цвета, сделать их более насыщенными, получается не всегда. А вот на профессиональные фотографии, которые обычно и продаются в фотобанках, приятно посмотреть. Более того, даже над ними иногда приходится работать, чтобы довести их цвета до состояния "лучше, чем в жизни". Можно даже сказать (только не воспринимайте буквально), что в целом для веба работает правило "цвет лучше, чем в жизни': Применение в макете Минуя все преграды, вы собрали большое количество фотоиллюстративного материала и теперь наверняка задаетесь вопросом "И что теперь делать со всем этим добром?" Поскольку иллюстрации - менее податливый материал и по большей части рисуются специально для проекта, дальше будем говорить только о фотографиях, их ретуши и способах внедрения в сайт. С фотографиями на самом деле можно делать все что угодно! Главное - иметь достаточно времени и большой исходный файл, например от 800х600 пикселей или около того. Чем больше "исходник", тем удобнее. Первичный осмотр 11 пеrкан ретушь Почти все попадающие в руки дизайнера изображения подвергаются какойникакой ретуши. Под этим словом я понимаю любые изменения, вносимые в фото и призванные улучшить картинку, помочь ей встать в макет сайта. Первое, что я делаю, - смотрю на цвета, яркость и контрастность фото. Почти всегда есть необходимость скорректировать именно эти параметры: немного осветлить, добавить насыщенности, сделать фото более контрастным, чтобы чуть углубившиеся тени дали больше объема. Все эти вещи выполняются в Adobe Photoshop с помощью инструмента Levels (Уровни), доступ к которому можно получить с помощью команды меню l magec>Adj ustmentsc> Levels (рис. 1 1 .4). Инструмент Levels работает так: вы видите диаграмму, а под ней три направленные вверх стрелочки - черную, серую и белую. Стрелочки отвечают соответственно за самые темные, средние и самые светлые области фото. Перетаскиваем стрелочку влево - уменьшаем показатель, вправо - увеличиваем. Самое простое, что можно сделать, - слегка перетащить вправо черную стрелку - так вы углубляете тени, они становятся темнее (влево стрелочка и не потянется, кстати). Если изображение недостаточно яркое в средних тонах, тянем серую стрелку влево, а если слишком светлое - вправо. Белую стрелку, отвечающую за самые светлые области, можно потянуть только влево, в сторону уменьшения этого параметра, т.е. затемнения самых светлых областей фото. Много белого на фото - значит, еще больше "засвечивать" его не нужно. Также не стремитесь путем выеветпения средней области тонов выявить в картинке максимум деталей. Часто это вовсе не нужно, ориентируйтесЪ на собственное зрение, чтобы фото в результате не было ни бледным, ни темным. Инструмент Levels по умолчанию всегда предлагает откорректировать сразу все каналы, Red, Green и Blue (значение в списке Channel - RGB). Перейдя на другой канал, т.е. выбрав с списке Channel нужное значение, вы можете исправить количество красного, зеленого и голубого цветов также в темных, средних и светлых областях фотографии. А что насчет насыщенности? Для этого в Photoshop есть инструмент Hue/Saturation, доступ к которомуосуществляется с помощью команды меню lmage