web master | Изображения
Главная » Изображения
    РейтингРейтингРейтингРейтингРейтинг

Изображения

Содержание:

  • § 1. Для чего нужны картинки
  • § 2. Где взять изображение
  •        2.1.Клипарты
  •        2.2.Услуги фотографа и иллюстратора
  •        2.3.Сделай сам
  • § 3. Технические особенности
  •        3.1.Формат
  •        3.2.Разрешение
  •        3.3.Размер
  •        3.4.Качество
  •        3.5.Цвет
  • § 4. Применение в макете
  •        4.1.Первичный осмотр и легкая ретушь
  •        4.2.Тонирование
  •        4.3.Кадрирование
  •        4.4.Обтравка
  •        4.5.Коллажирование

 

§ 1. Для чего нужны картинки

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

Для чего нужны картинки

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


§ 2. Где взять изображение

Все фотографии и иллюстрации откуда-то берутся.  Рассмотрим самые популярные способы раздобыть картинку "нелегальным" методом.
• На каком-нибудь сайте. Интернет бесплатен только для личных нужд, но если вы хотите сохранить картинку, увиденную на каком-то сайте, чтобы использовать ее в коммерческих целях, это уже незаконно. 
• В поисковых системах. Поисковые системы позволяют искать изображения по всему Интернету.  У каждой картинки есть автор. Задумайтесь, нужна ли вам для создания уникального дизайна фотография, которая уже висит на каком-то сайте?
• В журналах с последующим сканированием. Если это не журнал начала ХХ века, а вполне современное издание, вы нарушаете закон. 

 2.1.Клипарты

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

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

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

Список зарубежных микропейментовых фотобанков:

Несколько популярных бесплатных фотобанков:

 2.2. Услуги фотографа и иллюстратора

Часто бывает так, что фотография из фотобанка всем хороша, но вот чуть-чуть бы повернуть объект, и было бы совсем замечательно! При работе с фотографом вы заранее можете обсудить, что хотите получить, и даже нарисовать ему эскиз - как это должно выглядеть. То же самое касается иллюстратора и ЗD-моделлера.

 2.3.Сделай сам

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

Векторные иллюстрации на самом простом уровне можно научиться создавать всего за пару месяцев, посвятив этому достаточно времени. Для этого возьмите фотографию с хорошей композицией, "цепляющую" взгляд и обведите ее векторами в Corel Draw или Adobe Illustrator. После подобной обработки 10- 15 фотографий у вас уже будут получаться вполне коммерческие иллюстрации.

А если вы умеете рисовать руками, вам и фотография никакая не нужна!


 

§ 3. Технические особенности

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

 3.1.Формат

В веб-дизайне на стадии рисования макета (который вы с 90%-ной вероятностью будете рисовать в Photoshop) вы можете использовать изображения в любом формате, который поддерживается вашим графическим редактором. Компьютерные изображения  делятся на два класса: векторные и растровые. 

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

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

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

 3.2.Разрешение

Фотография или иллюстрация, которую можно использовать в веб-дизайне,  имеет разрешение (resolution) 72 точки на дюйм (dpi - dots per inch) или выше. Создайте в Photoshop один файл размером 300х300 точек с разрешением 30 dpi, а другой - 300х300 точек с разрешением 72 dpi - и на мониторе вы не увидите между ними никакой разницы. 

 3.3.Размер

Размер изображения по ширине и высоте для использования в веб-дизайне измеряется   пикселем.   Самые мелкие изображения, используемые в дизайне, могут иметь размеры от SxS пикселей и выше. Это пиктограммы, буллеты, стрелочки и тому подобная мелочь. Они тоже нужны, и их значимость не зависит от их размера. Главное, что нужно помнить о размерах изображений, - уменьшать фотографию можно, а вот увеличивать более чем на 1 5-20% - нет.

 3.4.Качество

Качество изображения складывается из субъективных и объективных параметров. Подобранное изображение воздействует на зрителя, чтобы фото не только было технически адекватным (т.е. фотографии, сделанные с мобильного телефона, вряд ли подойдут), но и "захватывало". Мы смотрим на композиционное решение, сочность красок, эмоциональность подачи объекта. Если это человек, у него на лице должны быть какая-то эмоция и осмысленность взгляда; если пейзаж, он должен обладать определенным настроением; если овощи, фрукты, еда - они должны вызывать аппетит. А сфотографированные предметы должны казаться почти настоящими.

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

 3.5.Цвет

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


§ 4. Применение в макете

Минуя все преграды, вы собрали большое количество фотоиллюстративного материала и теперь наверняка задаетесь вопросом "И что теперь делать со всем этим добром?" Поскольку иллюстрации - менее податливый материал и по большей части рисуются специально для проекта, дальше будем говорить только о фотографиях, их ретуши и способах внедрения в сайт. С фотографиями на самом деле можно делать все что угодно! Главное - иметь достаточно времени и большой исходный файл, например от 800х600 пикселей или около того. Чем больше "исходник", тем удобнее.

 4.1.Первичный осмотр и легкая ретушь

Почти все попадающие в руки дизайнера изображения подвергаются какойникакой ретуши – зто любые изменения, вносимые в фото и призванные улучшить картинку, помочь ей встать в макет сайта. Есть необходимость скорректировать цвета, яркость и контрастность: немного осветлить, добавить насыщенности, сделать фото более контрастным, чтобы чуть углубившиеся тени дали больше объема. Все эти вещи выполняются в Adobe Photoshop с помощью инструмента Levels (Уровни), доступ к которому можно получить с помощью команды меню l magec>Adj ustmentsc> Levels  Инструмент Levels работает так: вы видите диаграмму, а под ней три направленные вверх стрелочки - черную, серую и белую. Стрелочки отвечают соответственно за самые темные, средние и самые светлые области фото. Перетаскиваем стрелочку влево - уменьшаем показатель, вправо - увеличиваем. Самое простое, что можно сделать, - слегка перетащить вправо черную стрелку - так вы углубляете тени, они становятся темнее (влево стрелочка и не потянется, кстати). Если изображение недостаточно яркое в средних тонах, тянем серую стрелку влево, а если слишком светлое - вправо. Белую стрелку, отвечающую за самые светлые области, можно потянуть только влево, в сторону уменьшения этого параметра, т.е. затемнения самых светлых областей фото. Много белого на фото - значит, еще больше "засвечивать" его не нужно. Также не стремитесь путем выеветпения средней области тонов выявить в картинке максимум деталей. Часто это вовсе не нужно, ориентируйтесЪ на собственное зрение,чтобы фото в результате не было ни бледным, ни темным.

Диалоговое окно Levels, используемое для настройки уровней

Инструмент Levels по умолчанию всегда предлагает откорректировать сразу все каналы, Red, Green и Blue (значение в списке Channel - RGB). Перейдя на другой канал, т.е. выбрав с списке Channel нужное значение, вы можете исправить количество красного, зеленого и голубого цветов также в темных, средних и светлых областях фотографии.
А что насчет насыщенности? Для этого в Photoshop есть инструмент Hue/Saturation, доступ к которомуосуществляется с помощью команды меню lmage??Adjustments?? Hue/ Saturation. В окне этого инструмента за насыщенность отвечает ползунок Saturation, но если просто тянуть его вправо, то более насыщенными станут только определенные участки фото, тогда как нужные вам могут вовсе не окраситься. Для более тонкой работы перейдите из режима Master в тот цветовой канал, который кажется вам тусклее остальных. Также достоин внимания инструмент Replace Color, доступ к которому осуществляется с помощью команды меню lmage??Adjustments?? Replace Color. Этот инструмент позволяет одним движением изменить окраску больших областей одного цвета, например сделать их из желтовато-белых чисто белыми. Можно и радикально перекрашивать те или иные области, из синего в красный например.

 4.2.Тонирование

Часто можно  увидишь на сайтах такое:   холодные тона,  фотографии  теплые, причем это похоже не на дизайнерский изыск, а на банальный недосмотр. Чтобы такого не было, внедрив фотографию в макет, посмотрите, не нужно ли ее чуть-чуть "охладить" или, наоборот, "подогреть': Просто и быстро это делается с помощью инструмента Photo Filter, доступ к которому осуществляется с помощью команды меню lmage → Adjustments → Photo Filter. Дольше, но эффективнее - выполнить ту же работу вручную с помощью инструментов Color Balance и Channel Mixer. В целом не поленитесь изучить все инструменты в меню Adjustments: с их помощью вид картинки можно существенно улучшить и "вытянуть" многие не самые удачные изображения.

 4.3.Кадрирование

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

 4.4.Обтравка

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

 4.5.Коллажирование

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

Самое главное, что следует помнить при создании качественного коллажа, - все изображенное на нем должно казаться настоящим.  Для того чтобы воссоздать "кусочек" реальности в отдельно взятом макете, запомните следующие правила. 8 Угол 3рения. Все объекты должны быть сфотографированы под одним и тем же углом зрения. Нельзя, чтобы у каждого из них была своя перспектива. Эrо очень бросается в глаза и заставляет зрителя усомниться в реальности изображенного.

Обтравка. Точно, вплоть до мельчайших деталей, вырезайте объект из фона.

Цветовое и световое соответствие. Приведите все детали коллажа к единому цвету. По освещенности объекты также должны совпадать: в реальном мире тени на группе объектов отбрасываются одинаково, а не как попало. 

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

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


 

css template

Не забывайте написать ваш комментарий, понравилась ли статья. От вас пару слов, а мне — признание поисковых систем, что пишу нормальные человеческий статьи. Заранее спасибо вам!