Навигация

Партнеры


Комментариев: 0
 (голосов: 1)

CSS дизайн. Часть 21

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

Житель Ванкувера и известный писатель Дуглас Коупленд (Douglas Coupland) назвал свой родной город городом из стекла. Он привольно раскинулся у подножья горного хребта на западном побережье Канады. Навеянная морем тема с плавником и раковинами, дополненная несколькими осколками сшела, могла бы еще больше ассоциироваться с городом, если бы добавить несколько порций суши. Но дизайнер Дэйв Ши знал, где остановиться.
Графические образы, использованные в «Береговом бризе», были нарисованы вручную
в Adobe Photoshop, никаких предварительно отснятых фотографий не было. Пользуясь
различными инструментами, имеющимися в Photoshop, Ши сумел воспроизвести живописные текстурированные эффекты, не прибегая к фотографиям.

Отправная точка


Основные объекты были когда-то созданы для давно уже почившего в бозе сайта, созданного задолго до Zen Garden. Вернувшись к оригинальному, созданному в
2001 году с помощью Photoshop файлу, состоящему из 300 с лишним слоев, Ши выбрал из него элементы, необходимые для нового дизайна. Адаптировать графику оказалось сравнительно просто; проблема состояла в том, чтобы создать макет, в который
удачно вписался бы текст.
Исходный дизайн представлял собой почти квадратную область, размеченную с помощью HTML, а текст на сайте Zen Garden довольно длинный, поэтому верстка должна быть вытянута по вертикали. Предстояло как-то разрешить эту неувязку.
В качестве отправной точки у Ши была квадратная область. Оказалось, что приспособить ее к идее «Берегового бриза» проще всего, разрезав квадрат пополам
и растащив верхнюю и нижнюю половины. L-образные уголки эффектно обрамляют страницу, оставляя необходимое пустое пространство.

Технические приемы

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

Использование кистей и преобразований


Осколки стекла в правом верхнем углу страницы отбрасывают тень и кажутся прозрачными, как будто сквозь них просвечивает солнце. Чтобы достичь такого эффекта, нужно несколько больше, чем просто наложить имеющийся в Photoshop теневой слой. Впрочем, ненамного больше. Начнем с дублирования образа на переднем плане (выберите из меню Layer -» Duplicate Layer), в данном случае твердого
стекла. Расположим новый слой под исходным и зальем сплошным цветом. С помощью команды Free Transform (Edit -> Free Transform), позволяющей растягивать, сжимать, поворачивать и перекашивать геометрические фигуры, тень была сжата по вертикали,
скошена влево, после чего размыта, чтобы сгладить внешние края.
Чтобы сделать тень прозрачной, потребуются инструменты Eraser (ластик) и Smudge (растушевка). Тот и другой можно настроить, сделав больше или меньше, с мягкими или твердыми краями. Чтобы вручную стереть среднюю часть тени, была взята крупная кисть с мягкими краями; затем к результату была применена небольшая растушевка тоже с мягкими краями, чтобы сделать тень слегка неправильной. Идеально правильная тень, конечно, выглядит красиво, но в жизни объекты редко бывают безупречными, так что без дополнительной проработки деталей они будут
казаться нереалистичными. Для завершения эффекта пришлось еще слегка подпортить поверхность исходного объекта.

Использование инструментов Burn и Dodge


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

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


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

Покупка изображений


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

Работа на заказ и приобретение без отчислений от продаж


Чтобы найти местного фотографа или иллюстратора, придется покопаться в «желтых страницах», но часто лучших результатов можно достичь, общаясь с другими местными творческими личностями по сети.
Впрочем, нет нужды ограничиваться только местными талантами, существует множество сайтов, на которых клиенты могут договориться о работе с профессионалами. Один из самых известных - это Aquent, но есть и немало других, работающих более или менее эффективно.
Работа на заказ стоит дорого, и не много найдется сайтов, которые могут себе это позволить. Есть и более простой путь - посетить магазин готовых фотографий, где можно приобрести желаемое без отчислений от продаж. Это означает, что вы платите за изображение только один раз, а потом можете использовать его в любых целях при соблюдении условий лицензии.
Лицензия, как правило, позволяет делать все, что угодно, кроме перепродажи, так что раз купленное изображение можно вставлять в разные проекты. Правда, в магазин может зайти кто угодно, так что есть риск, что «профессиональная деловая женщина» из вашего последнего шедевра на другом сайте будет представлена как «физиотерапевт». Такое бывает. Если бюджет не позволяет обратиться в магазин изоб-
ражений, то зайдите на сайты, где исходный материал можно получить бесплатно. Давая фотографам и иллюстраторам-любителям возможность делиться друг с другом своими творениями, сообщества типа iStockPhoto и stockxchng создали впечатляющие каталоги фотографий и рисунков со средним и высоким разрешением,
которые широко распространяются в Web. Некоторые изображения продаются за небольшую цену, другие вовсе бесплатны, но так или иначе полезность таких
сайтов неоспорима.

Поиск альтернативных источников


Если вы готовы раскинуть сети пошире, то можно найти и другие источники зображений без отчислений от продаж. В некоторых странах закон об авторском праве распространяется на несколько прошлых десятилетий, но обычно момент, когда произведение искусства становится общественным достоянием, отстоит от момента его создания не слишком далеко.
Так, в США в середине 2004 года авторским правом уже не защищались роизведения, опубликованные ранее 1923 года. Открыты для использования были также работы, опубликованные в период между 1923 и 1963 годом, если авторское право не было специально продлено.
Работы, являющиеся всеобщим достоянием, можно использовать в любых целях, коммерческих или личных, так что если вам нужно изображение, созданное
давно, то стоит подумать и о таком методе. Чтобы найти подходящее произведение, достаточно набрать в поисковой системе запрос public domain. В библиотеках и художественных галереях есть каталоги общедоступных творческих работ. В вашей местной библиотеке может быть даже составленный там же каталог общедоступных фотографий. Но вовсе необязательно залезать так далеко в прошлое, поскольку есть проекты, ставящие себе целью сделать всеобщим достоянием и новые работы. Так, организация Creative Commons «стремится расширить круг произведений искусства,
доступных всем для совместного использования и в качестве основы для новых работ». Хотя в 2004 году основной задачей сайта было убедить художников делиться своими произведениями, вы найдете там работы, опубликованные на условиях

Вердикт: нарисованный облик

«Береговой бриз» - впечатляющий пример того, что можно сделать, имея капельку таланта и много свободного времени. По оценке Ши, на создание графики для этого дизайна было потрачено более 80 часов работы в Photoshop.
О клиенте, который согласился бы платить за такое времяпрепровождение, можно только мечтать. Для коммерческого проекта аналогичного результата можно было бы достичь с помощью фотографии. Пользуясь подходящими инструментами, удалось бы создать идентичную атмосферу, не подрывая бюджет. Нарисованные вручную картинки, конечно, отличаются, но на практике именно бюджет определяет, где
надо остановиться в работе над проектом. Придавать неповторимость сайту лучше за счет деталей и мелких штрихов.
Лицензия Creative Commons. Впрочем, пользуйтесь ими осторожно, поскольку лицензия предусматривает различные уровни, и не все можно просто так
стянуть.








css





css

Добавить статью в:
0



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



Поиск

***

Онлайн
Всего на сайте: 44
Гостей: 26
Пользователи: ADoboptiobe, ABadaceceds, Koaress
Роботы: MSN Bot, robot Bot, robot Bot, Google Bot, Yandex Bot, robot Bot, Yahoo Bot, robot Bot, robot Bot, robot Bot, robot Bot, crawl Bot, robot Bot, robot Bot, robot Bot

20-ка посетителей: ABadaceceds, luiszb11, ADoboptiobe, Koaress, dannyjl69, AUterperori, robertwf16, Richardorino, Tatyana MJ, Aheadiabreave, christopherrv60, AFuSFruicbeer, melvapz60, lunar.elf, HenryCJ, shadowmoon, AdiguePoobiob, Jamesvum, Inogen, delmetahr


Партнеры

Мы в социальных сетях
Популярные статьи

Последние комментарии
Файлы почтой

Облако тегов
Abstract, ai, background, backgrounds, clipart, design, eps, Flyer, frame, frames, Graphic, jpg, photo, Photoshop, PNG, PSD, scrap, Stock, template, vector, Wallpapers, Вектор, Графика, Дизайн, Клипарт, Обои, Рамка, Рамки, Цветы, Шаблон, исходники, картинки, кисти, новый год, скрап, фоны, фото, фоторамка, фотошоп, шаблоны

Показать все теги