Работа с графическими объектами
Microsoft Word предоставляет достаточно большие возможности работы с графикой. Наличие графических объектов в текстовых документах часто желательно, а в некоторых случаях просто необходимо.
В нем можно работать как с объектами растровой (построенными с помощью отдельных точек – пикселей), так и векторной (построенными на основе геометрических кривых) графики.
Основные способы включения графики в документ – импорт графики из других приложений или создание графических объектов непосредственно в документе.
После титульного листа на странице 2, создайте заголовок первого уровня с текстом «1.Работа с графическими объектами».
Для этого наберите нужный текст и выделите его.
На вкладке Главная выберите меню Стили →Заголовок 1 .
Вставка объекта, созданного в другом графическом редакторе
Приведем пример для графического редактора Paint:
Создайте в графическом редакторе Paint какое-либо изображение, например, красный треугольник , для этого выберите Пуск → Программы → Стандартные → Paint ;
Выделите созданное вами изображение с помощью кнопки Выделить графического редактора Paint (рис. 4).
Рис. 4. Окно графического редактора Paint.
Кнопка выделить
Скопируйте выделенное вами изображение в буфер обмена . Для этого выполните команду Правка → Копировать или с помощью правой кнопки мыши.
Перейдите в редактор Word, для этого щелкните на соответствующей пиктограмме в панели задач Windows.
Вставьте из буфера изображение. Для это установите курсор в то место, где вам необходимо разместить изображение и нажмите кнопку Вставить на панели инструментов. Ваше изображение будет помещено в открытый документ.
Щелкните мышью на введенном объекте. Вокруг изображения появляются квадратные «узелки». Если щелкнуть левой кнопкой мыши на таком узелке и удерживать ее, то перемещая мышь можно изменить размер изображения. Установите нужные вам размеры изображения.
Создание графического примитива
Создайте в рабочей папке на диске С документ Word. Откройте его.
Кнопка Фигуры служит для быстрого создания графических примитивов (рис. 5).
Рис. 5. Вставка готовых фигур
Для создания нужного примитива выберите из выпадающего списка, например и нарисуйте его в документе протяжкой мыши с нажатой левой кнопкой.
Во время рисования удерживайте нажатой кнопку Shift , чтобы фигура имела правильные пропорции (рис. 6).
Рис. 6. Нарисованная фигура
Когда фигура нарисована, появляется контекстный инструмент Средства рисования с лентой Формат (рис. 7).
Рис. 7. Меню Формат
Графический примитив имеет по краям синие угловые маркеры.
Потяните фигуру за синие угловые маркеры (левая кнопка мыши должна быть при этом нажата) и измените размеры фигуры (рис. 7).
Желтый квадратик внутри примитива также служит для изменения геометрических размеров фигуры (рис. 7).
Измените геометрические размеры фигуры.
Фигуру можно вращать. Для этих целей служит зеленый кружочек, расположенный над фигурой.
Для вращения примитива установите курсор мыши на кружочек и, нажав левую кнопку, производите движения мышью. При этом фигура будет вращаться в ту или иную сторону.
Форматирование графического объекта
Окно панели Стили фигур содержит расширенные параметры форматирования Формат автофигуры . В этом окне можно произвести большинство настроек форматирования (рис. 8).
Рис. 8. Формат автофигуры
Наиболее часто встречающиеся настройки вынесены на ленту Формат .
Панель Стили фигур содержит набор уже готовых стилей, а также три кнопки: Заливка фигуры , Контур фигуры , Изменить фигуру (рис. 9).
Рис. 9. Панель Стили фигур
Измените цвет, размер, линии и положение своей автофигуры, измените стиль, поменяйте заливку и контур.
Кнопка Эффекты тени служит для настройки параметров тени фигуры (рис. 11).
Рис. 11. Панель Эффект тени
Добавьте для своей фигуры «эффект тени».
 |
Рис. 11. Панель Интерактивная настройка тени
Добавьте Интерактивная настройка тени .
Кнопка Объем позволяет применить трехмерные эффекты к фигуре. При этом можно настраивать такие параметры, как: Цвет объемной фигуры , Глубина , Направление , Освещение , Поверхность (рис. 12).
Рис. 12. Панель Объем
Для интерактивной настройки объема служат кнопки, расположенные в правой части панели Объем .
Настройте объем, как показано на рис. 13.
 |
Рис. 13. Фигура с интерактивным объемом
Инструменты, расположенные на панели Упорядочить, предназначены для настройки параметров взаимодействия фигуры с текстом документа (рис. 14.).
Рис. 14. ПанельУпорядочить
Говорят, что изображение может сказать больше, чем тысяча слов - но, как выясняется, оно также может способствовать большему заработку для вас или вашего бизнеса.
Хотя обеспечивать работу своего личного или бизнес сайта - непростая задача, приложить немного усилий, добавив визуальный контент на ваш сайт, окупится с лихвой.
Это не только поможет тому, что посетители будут чаще заходить и им будет интересно, но, по статистическим данным, собранным Tech.Co и NewsCred, это также:
Но будет трудно получить какие-либо из этих преимуществ, если ваши изображения не отображают то, что нужно. Поэтому следуйте нижеприведенному руководству, чтобы избежать распространенных ошибок, с которыми сталкиваются многие люди при попытке форматирования изображений для своих сайтов.
Проблема № 1: Вы загрузили изображения без их оптимизации для сети, и теперь ваш сайт работает медленно
Решение: Найдите “золотую середину” размера изображения.
Размер изображения имеет большое влияние на производительность вашего сайта. Чтобы быть точным, мы говорим в основном о размере файла в мегабайтах (mb), килобайтах (kb) и т.д. - не о фактических размерах изображения (таких, как 800 х 600 пикселей), хотя они часто взаимосвязаны. Если размеры файлов слишком большие, страницам требуется много времени для загрузки, и вы рискуете потерять посетителей, у которых нет терпения. Слишком маленький размер - и вы подвергаете опасности визуальное качество изображения. Вам нужно найти компромисс между фактическим размером и качеством (разрешением), которые в совокупности определяют общий размер файла.
Совет: Вы можете проверить, как различные размеры изображения влияют на скорость загрузки страницы при помощи бесплатных инструментов, таких, как этот.
Проблема № 2: Изображение нехорошо смотрится на экране
Решение: Узнайте разрешение изображения.
Разрешение это то, что определяет, насколько хорошо ваше изображение выглядит на экране. Говоря простыми словами, это количество отображаемых пикселей на определенном пространстве экрана (пикселей на дюйм, или PPI, иногда пикселей на сантиметр). Тем не менее, так как экраны на устройствах, которые мы используем сегодня, имеют заранее определенные разрешения, мы ограничили контроль над тем, как наши изображения отобразятся. Но это нормально, потому что это упрощает процесс сохранения изображения. Разрешение 72 PPI считается общим стандартом для веб-изображений с приемлемым качеством, но разрешение между минимум 72 PPI до максимум 120 PPI, достаточно для подавляющего большинства экранов. Согласно дизайнеру Google Sebastien Gabriel, сохранение PPI в этом диапазоне “обеспечивает то, что ваша работа будет примерно такого же соотношения везде”. Это также помогает управлять размером файла.
Что еще более важно, до тех пор, как вы сохраняете свои изображения в правильных размерах (в пикселях) для предполагаемого предназначения, вы должны избегать любой пикселизации. Пикселизация (размытость, искажение, потеря качества) возникает, когда цифровое изображение отображается на сайте размером больше, чем его первоначальный размер (например, попытка растянуть фото 50 х 50 пикселей на пространство 500 х 500 пикселей).
Совет: Если вы пытаетесь задать PPI файла изображения и видите только вариант “DPI”, не паникуйте.
Эти термины часто (хотя и ошибочно) используются как взаимозаменяемые. В самом деле, многие люди и программы используют DPI, как общий термин для обозначения разрешения изображения.
Проблема № 3. Узнайте разрешение изображения. Часть 2: Сжатие
Сжатие изображения в программе для редактирования фотографий является одним из способов настройки разрешения и размер файла. Например, при использовании “Сохранить для веб и устройств”, чтобы сохранить JPG изображения в Photoshop, вы можете выбрать предустановленные настройки качества (низкий, средний, высокий, очень высокий, и максимум), или более настроить качество с соответствующим роликом прокрутки от 0 (минимум) и 100 (максимум). Это позволит уменьшить (или сжать) размер файла (для подходящего времени загрузки страницы), но также это уменьшит визуальное качество (чем ниже, тем хуже).
Совет: В диалоговом окне Сохранить для веб и устройств, вы можете просмотреть и сравнить несколько версий вашего изображения (с различными типами файлов, настроек и т.д.). Вы даже можете просмотреть примерное время загрузки или просмотреть изображение в любом веб-браузере вашей системы. Здесь подробная информация об этих вариантах.
Проблема № 4: Основная часть изображения незаметна
Решение: Обрезайте с умом.
Обрезка изображения может быть очень важным шагом в процессе форматирования, особенно для фотографий. Вы не хотите обрезать ничего важного, но не стесняйтесь обрезать, чтобы улучшить фокус или настроение изображения. С другой стороны, вы не хотите обрезать так, что ваша фотография исказится (чем больше пикселей вы удалите, тем ниже будет разрешение); если вы хотите сделать это, вам нужно начать с изображения с довольно высоким разрешением.
Совет: Если вы планируете разместить свое изображение на социальном сайте, вы можете спасти себя от неправильной обрезки, обрезав до соответствующих размеров заранее (ознакомьтесь с руководством инфографики по размерам изображений для всех самых популярных социальных сетей). Таким образом, вы точно знаете, как ваша фотография будет выглядеть, когда она будет выложена, и не будете удивлены, что что-то обрежется или растянется.
Проблема №5: Плохая композиция изображения
Решение: Используйте фрейм для максимального эффекта.
Тесно связанный с обрезкой, фрейминг идеально подходит для случаев, когда вы фотографируете или создаете изображение (и лучше во время процесса, а не после). Он имеет много общего с традиционными правилами композиции, с которыми считаются художники, фотографы, дизайнеры и другие мастера. Некоторые из них содержат в себе:
Все это сводится к созданию изображения - захватывающего, интересного и визуально привлекательного, именно того, что вы хотите для изображений на вашем сайте.
Совет: Во многих камерах, даже в смартфонах, есть сетка правила третей, которую вы можете наложить на дисплей во время фотографирования (или использовать для обрезки после). Просто совместите самые важные части вашего изображения с одним из четырех мест, где пересекаются линии, и вы на пути к хорошей композиции.
Проблема № 6. Используйте фрейм для максимального эффекта. Часть 2: Обходные пути
Если фрейминг фото, которое вы выбрали, оставляет желать лучшего, то вы можете исправить это обрезкой. Или, вместо того, чтобы вырезать часть изображения, вы можете добавить что-нибудь. Фото с пространством может быть заполнено цитатой или вдохновляющим высказыванием - отличный вариант для социальных сетей.
Вы также можете поэкспериментировать с ориентацией изображения (если композиция изображения позволяет), от вертикального к горизонтальному (или наоборот); поворот изображения; или обрезка круглой или другой формой. Изображения различных форм и размеров добавят визуальный интерес к вашему веб-сайту. Не используйте все время один и тот же процесс форматирования изображений; будьте креативными!
Совет: Canva создает изображения для социальных сетей, как цитата в картинке. Просто откройте подходящий по размеру шаблон, в зависимости от того, какой сайт вы используете, выберите из бесплатных или платных (стоимостью в $1) фотографий (или загрузите свою собственную), добавьте текст (здесь есть более 100 бесплатных шрифтов), и - вуаля! - Вы сделали это.
Проблема №7: Изображение выглядит искаженным
Решение: Масштабируйте пропорционально.
Наиболее распространенной причиной искаженных изображений на веб-сайтах является то, что они были растянуты, чтобы заполнить определенное пространство. Самый простой способ избежать этого - сохранить исходные пропорции изображения при масштабировании его вверх или вниз, а не растягивая длину или ширину.
Некоторые платформы, в которых вы публикуете изображения, могут автоматически масштабировать изображение, чтобы оно соответствовало их собственным требованиям. Так что, если вы публикуете изображения не на своем веб-сайте, узнайте рекомендуемый размер загрузки и заранее отформатируйте свое изображение по этим данным.
Совет: В большинстве программ и приложений для редактирования фото есть инструменты, которые помогут вам убедиться, что вы масштабируете изображения пропорционально. В диалоговом окне, где вы масштабируете или регулируете размер изображения, часто бывает маленький значок замка, на который вы можете нажать, что “зафиксирует” исходные пропорции, или окошко с чем-то вроде “масштабировать пропорционально” или “сохранить пропорции”.
Проблема №8: Вы сохранили изображение в неправильном формате файла
Решение: Изучите различия между типами файлов.
Все эти сокращения могут запутать вас - Какая разница между JPG и PNG? Это имеет значение? Есть ли определенные форматы файлов, которые лучше использовать?
Не все форматы файлов создаются в равной степени. Каждый из них имеет свои специфические применения, со своими плюсами и минусами. Мы сделаем краткий обзор типов файлов, которые подходят для веб-использования, которые должны дать вам достаточно информации, чтобы убедиться, что изображения на вашем сайте выглядят наилучшим образом.
И один, который стоит избегать …
Совет: Касаемо изображений, которые могут быть использованы для печати или веб-проектов (например, JPG-файлы и PDF-файлы), вы должны убедиться, что вы создаете или конвертируете их в правильном цветовом пространстве для веб-использования - RGB. Если вы сохраните в CMYK (который используется только для печати), цвета вашего изображения будут выглядеть очень странно, когда вы загрузите его на свой веб-сайт. Если вы используете Canva для форматирования изображения, этот процесс упрощается: просто нажмите “Скачать”, где вы выберете либо “Как изображение” (файл RGB для веб-использования) или “PDF высокого качества” (CMYK файл для печати).
Проблема № 9: Вы купили стоковые фотографии для вашего сайта, но видите их везде
Решение: Избегайте стоковых фотографий или потратьте время на поиски уникальных.
Если у вас нет времени или ресурсов, чтобы создавать свои собственные изображения, стоковые фотографии - удобный вариант. Тем не менее, там есть много фотографий, которые уже используются, и есть риск увидеть выбранное вами фото в других местах, возможно, даже на веб-сайте конкурента. Очевидным решением было бы вовсе не использовать стоковые фотографии, а вместо этого создавать свои собственные оригинальные изображения, но если это невозможно, вы можете, по крайней мере поискать дальше первой страницы результатов поиска, чтобы найти то, что будет отличаться, и, что более важно, то, что действительно подойдет для вашего бренда или цели.
Совет: Все больше и больше ресурсов бесплатных стоковых фотографий появляются в последние годы, и (несмотря на то, что они бесплатны) до сих пор не используются так часто, как платные сайты. Кроме того, в них часто можно встретить творческие и не заурядные варианты, если вы готовы потратить немного времени на их поиски. Ознакомьтесь со статьей, “Бесплатные стоковые фото: 74 лучших сайтов великолепных бесплатных изображений“, для списка рекомендованных ресурсов.
Бесплатные стоковые фото из Unsplash.
Проблема № 10: Вы не знаете, как добавить информацию к вашим изображениям
Решение: Используйте параметры метаданных.
Метаданные это просто модное слова для дополнительной информации, встроенной в файл изображения, или то, что вы можете добавить (как заголовок или описание). Часть этой информации создается автоматически, например, техническая информация. Другая часть текстовой информации - названия изображений и описания, ключевые слова, заголовки - являются необязательными или могут быть изменены. Так зачем тратить дополнительное время, включая эту информацию? Включение некоторых базовых сведений о ваших изображений часто улучшает ux; но добавление этого типа данных может также помочь вашим изображениям появляться все чаще в подобных результатах поиска. И немного больше трафика веб-сайта никогда не помешает.
Совет: Различные блоги и веб-хостинг платформы будут предоставлять различные варианты для добавления метаданных, как подписи и ключевые слов для ваших изображений - и вы должны воспользоваться любой возможностью, чтобы добавить значение, которое предлагает ваша платформа. Alt text (сокращенно альтернативный текст, который иногда называют “alt tag” или “alt attribute”) является одним из наиболее распространенных вариантов.
Это поле, где вы можете ввести слово или фразу, описывающую то, что представляет ваше изображение. Это важно, потому что: 1) Это играет важную роль в улучшении SEO (search engine optimization) вашего сайта; 2) Если изображение не отображается по какой-то причине, альтернативный текст появится, чтобы подсказать то, что там должно быть; и 3) Альтернативный текст используется слепыми и слабовидящими пользователями, которые используют аудио в браузерах для работы в интернете.
Каждое изображение должно иметь свой собственный уникальный, соответствующий альтернативный текст; и лучше краткий. Но не злоупотребляйте инструментом - загрузка поля альтернативного текста с поисковыми словами, которые вы считаете популярными (известные как “alt spam” или “keyword stuffing”), не помогут вам, и на самом деле могут снизить поисковой рейтинг вашего сайта.
Варианты метаданных изображения в WordPress (название, заголовок, альтернативный текст и описание).
Проблема № 11: Вы думаете, что вашу фотографию можно отредактировать, но вы не хотите переусердствовать
Решение: Не используйте много эффектов.
Иногда, при работе с изображением, вы хотите немного его улучшить: отрегулировать контрастность или яркость, повысить насыщенность, настроить резкость. Нет проблем.
Тем не менее, большинство программ для редактирования фотографий могут сделать намного больше, чем это. И очень легко увлечься драматическими эффектами и фильтрами; есть тонкая грань между умеренным и броским редактированием. Если вы окажетесь перед выбором эффекта только потому, что “это выглядит забавно/странно/неординарно”, вам лучше просто оставить изображение в его первоначальном виде.
Совет: Авторедактирование (цвет, контраст и т.д.) не всегда помогает достичь лучших результатов. Если вы думаете, что что-то выглядит “не очень”, доверяйте своим собственным ощущениям, а не машине, и лучше вручную внесите коррективы.
Проблема № 12: Цвета нехорошо смотрятся на экране вашего компьютера
Решение: Откалибруйте свой монитор.
Если вы работаете с цифровыми изображениями, важно, чтобы цвета правильно отображались. Когда вы выбираете цвет, вы хотите увидеть изображения такими, какие они будут на сайте, и вы не сможете этого сделать, если ваш экран или монитор неточно отображает цвета. Simon Prais в DigitalArts советует:
“Откалибруйте монитор так, чтобы яркость была установлена между 90 и 120 кд/м2.
Хотя это ограничит контрастность дисплея, это, вероятно, больше выразит то, что целевая аудитория испытает на многих мониторах различных версий и качества”.
Совет: В операционных системах Windows и Mac есть встроенные инструменты калибровки. Здесь вы можете найти пошаговую инструкцию того, как их использовать.
Масштабирование изображений относительно их исходного размера не очень хорошая идея, хотя бы потому, что качество картинки очень сильно ухудшается. Тем не менее, для некоторых видов изображений, к примеру, содержащих геометрические фигуры или абстракцию, масштабирование можно применять вполне эффективно.
Иллюстрации к тексту часто выравнивают по центру веб-страницы, при этом текст располагается до и после изображения. Такое расположение элементов позволяет разбить большой текст на смысловые блоки и привлечь внимание к рисункам.
Вначале рассмотрим выравнивание изображения по центру. Для этого к селектору P
следует применить стилевое свойство text-align
со значением center
. При этом тег
должен располагаться внутри абзаца (тег
). Чтобы не получилось так, что все абзацы на странице начали выравниваться по центру, введем свой класс figure , и все действия будем производить с ним. В примере 1 показано, как это сделать.
Обтекание картинки текстом обычно используется для компактного размещения материала и связывания между собой иллюстраций и текста. Само обтекание создается с помощью стилевого свойства float , добавляемого к селектору IMG . Значение left выравнивает изображение по левому краю, right - по правому. Обтекание при этом происходит по другим, свободным сторонам (пример 1).
Подпись под фотографией обычно применяется для комментирования изображения и краткого его описания. Хотя добавить подпись можно с помощью обычного абзаца, этот способ не работает, как только фотографию необходимо расположить по правому или левому краю веб-страницы. Подпись должна быть неразрывна с изображением, независимо от способа его расположения на странице.
По умолчанию, фотография на странице располагается по левому краю окна браузера, а близлежащий текст выравнивается по нижней кромке изображения. Чтобы задать выравнивание по правому краю для селектора IMG следует установить стилевое свойство float со значением right .
Иногда нам необходимо изменить формат изображения. К примеру, у нас есть изображение формата BMP, а мы хотим его преобразовать в формат JPG (джипег). Как изменить формат изображения, мы подробно расскажем в этой статье.
К основным форматам графических файлов можно отнести JPG (JPEG), GIF, PNG, BMP и TIFF. При создании веб-сайтов используются три первых формата, т.е. JPG, GIF, PNG. В этих файлах хранятся изображения с потерей качества. По этой причине, размер файлов JPG, GIF и PNG меньше, чем файлов BMP и TIFF.
Некоторые начинающие веб-мастера умудряются использовать на своих веб-страницах файлы BMP, что приводит к медленной загрузке страницы. Что же делать, если в вашем распоряжении файл формата BMP, а вам необходим файл формата JPG? В этом случае необходимо конвертировать (преобразовать) BMP в JPG. Существуют даже такое слово как «джипежить», которое означает процесс конвертирования файлов в JPG (JPEG).
Для изменения формата изображения, можно воспользоваться даже простейшим графическим редактором Paint. Предположим, что у нас сохранен скриншот (снимок экрана) в формате BMP, а нам его необходимо превратить в JPG. Для этого открываем изображение в Paint, а затем, в меню Файл выбираем команду Сохранить как . В выпадающем меню Тип файла выбираем JPEG и нажимаем кнопку Сохранить .
Изменение формата файла с BMP на JPG (JPEG)
Как показал этот пример, то изменить формат изображения не составляет особого труда.
Что касается размера файла, то в формате BMP был 2,47 Мб, а в формате JPG стал 125 Кб, т.е. примерно в 20 раз меньше.
Размер файла в формате JPG стал в 20 раз меньше чем в BMP
Однако надо учитывать тот факт, что качество изображения в формате JPG стало хуже, чем было в формате BMP.
На практике случается, что необходимо изменить формат сразу большого количества файлов. Для этих целей можно использовать графические редакторы, которые позволяют производить пакетную обработку изображений. К примеру, очень быстро конвертировать изображения из формата BMP в формат JPG можно при помощи бесплатной программы FastStone Image Viewer, которую можно скачать бесплатно по этой ссылке .
Для пакетного конвертирование графических файлов из одного формата в другой, достаточно добавить необходимые для обработки файлы, а также:
После этого необходимо нажать кнопку Старт , после чего начнется обработка изображений.
Евгений Мухутдинов
Как гласит народная мудрость, лучше один раз увидеть, чем сто раз услышать. И это действительно так. Люди помнят примерно 80% из того, что они увидели или лишь 20% из того, что они прочитали. Из услышанного запоминается лишь 10%. Таким образом, если нужно донести какую-либо мысль до аудитории, лучше всего это сделать, сопроводив текст изображениями. При этом иллюстрация должна быть композиционно сбалансированной и соответствовать теме текста. Сегодня, когда в интернете ежедневно появляется огромное количество визуального контента, умение работать с изображениями может стать конкурентным преимуществом фрилансера, даже если по роду деятельности он далек от дизайна. Однако при форматировании изображений, которые будут размещены в сети, нужно соблюдать ряд правил, о которых многие попросту не знают. Чаще всего ошибки допускают новички и именно для них эта статья.
СОВЕТ 1: УМЕНЬШИТЕ «ВЕС» ИЛЛЮСТРАЦИИ
Размер изображения очень сильно влияет на то, как быстро загружается веб-страница. А современный пользователь очень не любит ждать. И если страница загружается слишком медленно, большинство посетителей попросту ее закрывают и почти никогда не открывают повторно. Чтобы избежать этого, картинки нужно обязательно оптимизировать для сети. Если иллюстрация весит слишком много, нужно постараться сделать ее полегче, при этом сохранив ее качество. Загрузка слишком тяжелых изображений является наиболее распространенной ошибкой, так как пользователи, особенно начинающие, никогда не обращают внимания на размер файла. И совершенно напрасно.
СОВЕТ 2: ИСПОЛЬЗУЙТЕ ИЗОБРАЖЕНИЯ С ОПТИМАЛЬНЫМ РАЗРЕШЕНИЕМ
У любого изображения есть такое свойство, как разрешение. Чем выше разрешение – тем лучше картинка смотрится на мониторе или на дисплее мобильного устройства. Однако слишком высокое разрешение сильно увеличивает размер файла и желательно его снизить насколько это возможно. При снижении разрешение качество иллюстрации падает и нужно постараться найти компромиссный вариант. Стандартом для веба является разрешение в 72 пикселей на дюйм (PPI). Однако сегодня вполне допустимо увеличение разрешения примерно до 120 PPI. При этом нужно помнить, что при оптимизации изображения нужно избегать любой пикселизации. Многие пользователи совершают ошибку, пытаясь растянуть картинку размером 50 на 50 пикселей до размера 500 на 500 пикселей. В этом случае иллюстрация распадается на отдельные пиксели и становится непонятно, что на ней изображено.
СОВЕТ 3: ОПТИМИЗИРУЙТЕ ИЛЛЮСТРАЦИЮ ЗА СЧЕТ СЖАТИЯ ИЗОБРАЖЕНИЯ
Вес файла зависит от разрешения изображения и его размеров в пикселях. Однако сделать картинку полегче можно при помощи программы Photoshop. Для этого при сохранении изображения нужно выбрать «Save For Web & Devices» и поэкспериментировать с настройками качества. Во многих случаях изображение практически не меняется, если выбрать среднее качество, при этом файл заметно легчает. Но стремясь максимально снизить размер файла, многие сильно увлекаются, в результате чего на изображении появляются искажения, так называемые артефакты. Этого нельзя допускать – если на картинке появились артефакты, нужно немного поднять качество.
СОВЕТ 4: КАДРИРУЙТЕ С УМОМ
Обрезка изображения может иметь большое значение при форматировании изображений, в частности, фотографий. Кадрирование позволяет убрать несущественные детали и сфокусировать внимание пользователя на чем-то важном. При обрезке изображений нужно всегда помнить о разрешении и размерах исходной фотографии, иначе может получиться так, что при кадрировании картинка станет слишком маленькой и не подойдет для размещения на веб-странице.
СОВЕТ 5: ИСПОЛЬЗУЙТЕ «ПРАВИЛО ТРЕТЕЙ»
При кадрировании изображения очень важно сохранить композицию кадра. Для этого нужно правильно использовать сетку третей, которая появляется при кадрировании. Кадр должен быть выстроен так, чтобы все важные элементы фотографии были расположены на пересечении линий сетки. Правильно скомпонованная иллюстрация вызывает гораздо более сильный эмоциональный отклик – почему бы этим не воспользоваться при кадрировании?
СОВЕТ 6: ДОБАВЛЯЙТЕ К ИЗОБРАЖЕНИЮ ДОПОЛНИТЕЛЬНЫЕ ЭЛЕМЕНТЫ
Порой иллюстрацию можно улучшить, добавив к ней текст или какое-либо дополнительное изображение. Для этого не требуется быть великим мастером фотошопа – сопроводить картинку текстом может каждый. Главное, чтобы это не навредило композиции и смотрелось уместно. Можно, к примеру, добавить к картинке рамку и смешную подпись – и получится демотиватор. А можно просто текст – получится плакат.
СОВЕТ 7: СОХРАНЯЙТЕ ИЗОБРАЖЕНИЕ В ПРАВИЛЬНОМ ФОРМАТЕ
Сегодня в интернете встречаются изображения, сохраненные в самых разных форматах. Каждый из них имеет как свои плюсы, так и свои минусы. Для большинства иллюстраций прекрасно подойдет формат JPG (или GPEG). Данный формат отличается широким спектром цветопередачи, что позволяет использовать его при сохранении детализированных изображений. Однако в некоторых случаях JPEG не стоит использовать, особенно, если на картинке много текста, написанного мелким шрифтом.
Формат PNG обеспечивает высокое качество изображения и хорошую цветопередачу. Главное достоинство PNG заключается в том, что он поддерживает прозрачность. Также этот формат отлично подходит для таких изображений, как графики, диаграммы, логотипы и т.д. В отличие от JPEG, иллюстрации в формате PNG не теряют качества при сжатии, что можно использовать для того, чтобы не допустить появления артефактов.
Формат GIF чаще всего используется при создании анимированных изображений. Сегодня он встречается достаточно редко, так как поддерживает только 256 цветов. Зато Gif можно использовать при сохранении простой графики, особенно, если нужно максимально снизить размер файла.
SVG – это векторный формат, который нужно использовать, если требуется, чтобы изображение одинаково хорошо смотрелось на любом устройстве. Так как вектор масштабируется без потери качества, SVG стоит использовать везде, где это представляется возможным.
Сохранять файл в формате PDF лучше всего, если требует разместить в сети какой-либо документ или электронную книгу. Как и SVG, формат PDF обеспечивает качественное масштабирование независимо от размеров изображения. Однако при сохранении в PDF нужно учитывать все советы по оптимизации изображений.
И, наконец, TIFF. Тут все просто – если вы хотите опубликовать изображение в сети, никогда не сохраняйте его в TIFF.
