Инструкция

Новичку не стоит сильно углубляться в теорию, но обязательно стоит знать, что JPEG является форматом с алгоритмом сжатия. Файл данного формата может иметь разные расширения, например? .jpeg, .jfif, .jpg, .JPG, или.JPE. Он очень удобен тем, что занимает намного меньше места, нежели аналогичное изображение в формате TIFF или BMP. В отличие от последних, он имеет меньше информации об изображении. При просмотре исходного файла на мониторе это может быть не слишком заметно, но при печати фотографии в лаборатории или обработке результат может оказаться менее качественным, чем форматы с полной информацией.

Способ сохранения JPEG сильно зависит от ваших задач. Прежде чем сохранить картинку, определитесь, будете ли вы обрабатывать, печатать на фотобумаге или вам достаточно просто выложить картинку на страничку в интернет.

Для последующей обработки или печати в фотолаборатории сохраняйте изображение в максимальном качестве и размере. При сохранении искомого изображения откройте меню File (Файл) и выберите Save as (Сохранить как). Выберите директорию, куда будет сохранен файл. В первую строку впишите название, а во второй выберите формат JPEG и нажмите кнопу Save (Сохранить). Если вы делали манипуляции с файлом, то перед вами всплывет диалоговое окно с выбором качества сохраняемого изображения. Следует выбрать максимальное качество ползунком или соответствующей цифрой 12. Подтвердите выбор, нажав Ok. Если вы не производили манипуляций с изображением, то после его сохранения диалоговое окно с выбором качества JPEG не откроется.

При сохранении фотографии для публикации в интернет, современные ресурсы сами могут изменять размер и качество загружаемого JPEG. Тем не менее, в некоторых случаях это приходится делать самостоятельно. Перед сохранением картинки измените ее размер, для этого зайдите в меню Image (Изображение) и выберите Image size (Размер изображения). Убедитесь, что в поле Constrain Proportions (Сохранять пропорции) стоит галочка. Выберите удобную для вас единицу измерения: сантиметры, пиксели, дюймы или миллиметры, впишите цифрами необходимое значение одной из сторон и нажмите Ok (в большинстве случаев для веб-страниц используются картинки от 800 до 1500 пикселей по большей стороне). Сохраните результат, выбрав при этом меньшее качество. При его значениях от 8 до 10 и небольшом размере изображения, визуальные отличия от исходного размера минимальны, однако размер файла существенно сокращается.

Также в Adobe Photoshop существует специальный модуль для оптимизации и сохранения изображений для веб-страниц, который может оказаться более удобным. В меню File (Файл) выберите Save for Web (Сохранить для Web). В открывшемся диалоговом окне вам будет представлено окно просмотра сохраняемого изображения и несколько вариантов настроек. Выберите вкладку 4-up или 2-up. Программа представит вам четыре или два возможных варианта оптимизированного изображения. Чтобы сохранить подходящий, достаточно просто кликнуть на картинку и нажать Save (Сохранить). Если варианты вас не совсем устроили, то предварительно воспользуйтесь инструментами, расположенными справа от изображения.

Видео по теме

Русский язык богат, но не всегда им можно передать описание предмета или события целиком. Да и не зря говорится, что лучше один раз увидеть, чем сто раз услышать (прочитать). Легче дополнить свое сообщение на форуме изображением вместо того, чтобы описывать его словами. Оставлять картинки в своих постах можно разными способами.

Инструкция

На разных ресурсах разные формы . Если в вашем случае предусмотрена форма, позволяющая добавлять изображения, воспользуйтесь ею. Найдите поле «Прикрепить файл» и нажмите на кнопку «Обзор». В открывшемся диалоговом окне укажите директорию, в которой сохранено изображение на вашем компьютере. Выделив файл с картинкой левой кнопкой мыши, нажмите на кнопку «Открыть» и дождитесь, пока файл загрузится. Далее оформляйте свое сообщение как обычно. На англоязычных сайтах используйте поле Additional Options и кнопку Attach.

Если в форме сообщения нет опции для прикрепления изображения, воспользуйтесь сторонними ресурсами. Загрузите нужную картинку на фотохостинг и разместите в своем посте ссылку на нее. Не закрывая окно или вкладку с сообщением, откройте фотохостинг в отдельной вкладке или окне. Нажмите на кнопку «Обзор» в поле «Выберите файл изображения на своем компьютере», укажите путь к файлу. Далее нажмите на кнопку «Загрузить» и дождитесь окончания загрузки.

Сегодня мы поговорим о том, как правильно сохранить и оптимизировать картинку в фотошопе и в каком формате это лучше сделать. А ведь правильный выбор формата сохранения очень сильно влияет на качество и внешний вид картинки, а также на вес картинки в килобайтах. Это особенно важно для тех, кто учитывает расход трафика. Итак, давайте разберемся по порядку с jpg, gif и png.

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

Формат jpg. Пожалуй, самый распространенный формат. Подходит для сохранения сложных графических изображений со множеством цветов и оттенков и насыщенной текстурой. То есть фотографии лучше всего сохранять в этом формате. Среди его недостатков — не поддерживает прозрачность и очень чувствителен к красному цвету.

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

Формат png. Похож на предыдущий формат, но более продвинут и эффективнее сжимает картинки. В png очень удобно сохранять клипарты на прозрачном фоне. Существует в двух форматах png-8 (для простых картинок, поддерживает 256 цветов) и png-24 (для более сложных изображений, хорошо поддерживает цвета).

2. Сохраняем с помощью функции «Сохранить как…» (Save as…)
Можно сохранить картинку используя старый добрый способ через меню «Файл» -> «Сохранить как…» (Save as…) или комбинация клавиш «Shift+Ctrl+S». В выпадающем меню выбирается формат файла, в котором хотим сохранить файл. (Смотрим рисунок ниже) Этот способ используется когда сохраняемая картинка останется на вашем компьютере и не предназначается для публикации в интернете.

3. Сохраняем с помощью функции «Сохранить для Web» (Save for Web…)
Если же ваша картинка предназначена для того, чтобы быть вывешенной в интернете, то лучше воспользоваться функцией «Сохранить для Web» (Save for Web…). При таком способе картинка лучше и качественнее сохраняется именно для интернета и плюс там есть несколько удобных возможностей. Выбираем в меню «Файл» -> «Сохранить для Web…» (Save for Web…) или комбинация клавиш «Alt+Shift+Ctrl+S». Откроется диалоговое окно.

Для того, чтобы сохранить картинку в формате jpg в выпадающем меню (1) выбираем формат JPEG. Ставим качество сохранения (2) от 75% до 95%. Я всегда ставлю 75%. Устанавливаем, если надо, необходимые размеры картинки (3). В окошках слева показан изначальный размер картинки (4) и размер оптимизированной картинки (5). После этого нажимаем «Сохранить».

Для того, чтобы сохранить картинку в формате gif в выпадающем меню (1) выбираем формат GIF. Выбираем количество цветов для сохранения (2). Устанавливаем, если надо, необходимые размеры картинки (3). В окошках слева показан изначальный размер картинки (4) и размер оптимизированной картинки (5). После этого нажимаем «Сохранить».

Для того, чтобы сохранить картинку в формате png в выпадающем меню (1) выбираем формат PNG-8. Выбираем количество цветов для сохранения (2). Устанавливаем, если надо, необходимые размеры картинки (3). В окошках слева показан изначальный размер картинки (4) и размер оптимизированной картинки (5). Ставим галочку в чекбоксе «Прозрачность» (6) для того, чтобы фон был прозрачным. После этого нажимаем «Сохранить».

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

В этом уроке вы узнаете, как сохранить документ в фотошопе . После того как фотография была отредактирована то, скорее всего вы задались вопросом как ее сохранить? Для этого в фотошопе предусмотрены три команды: Save (Сохранить), Save As (Сохранить как) и Save for Web & Devices (Сохранить для Web и устройств):

Основные сведения

Все три команды можно выполнить через меню File (Файл):

Команда Save (Сохранить), позволяет сохранить документ, в том формате, в котором была открыта изначально. Ее рекомендуется использовать в том случае, когда вы редактируете изображение, что бы в случае зависания программы не потерять результаты. Следующая команда, Save As (Сохранить как), будет для вас наиболее полезна, она позволяет выбрать формат сохранения, качество и название. Команда Save for Web & Devices(Сохранить для Web и устройств) полезна для сохранения изображения веб ресурсов или каких либо устройств, позволяя сильно сжимать и менять размеры изображения. Что бы изучить настройки этой команды потребуется отдельный урок.

Сохранение файла в формате JPEG

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

Для соxранения изображения в этом формате нужно выбрать File (Файл)- Save As (Сохранить как), после чего откроется окно с настройками сохранения, о котором подробно будет рассказано ниже:

1. В верхней части расположено окно для выбора места сохранения вашем жестком диске.
2. Изменение имени файла
3. В поле Format (Формат) можно выбрать формат для файла. Выберите формат JPEG и нажмите сохранить.

Перед вами откроется окно с настройками файла:

В разделе Image Options можно выбрать качество и степень сжатия:Low (Низкое), Medium (Среднее), High (Высокое) и Maximum (Максимальное). Легче всего это сделать при помощи ползунка. Помните, что чем больше сжатие, тем хуже качество. Слева указан размер файла. В разделе Format Options можно выбрать один из трех методов сжатия:

• Baseline Standart (Базовый Стандартный) этот метод сжатия самый распространяемый, идеально понимаемый формат для устройств и веб браузеров.
• Baseline Optimizes (Базовый оптимизированный) метод который позволяет сжимать изображение, но при этом сохранять четкость и краски.
• Progressive (Расширенный) с помощью сoхранения этого метода изображение будет загружаться не построчно, а за несколько проходов по мере загрузки. В каждый из них будет выводится полное изображения, улучшаясь от прохода к проходу. Некоторые браузеры и устройства плохо с ним работают.

Оставьте Baseline Standart и нажмите OK

Сохранение файла в формате PSD

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

Сохраненную на компьютере, и научиться последнему штриху — как сохранить картинку (изображение, фотографию) в фотошопе .

Процесс сохранения картинки тесно связан с форматами графических файлов. Поскольку от того, какой вы выберите формат, будет зависеть многое (поддержка прозрачности, размер файла и количество отображаемых цветов). Я не буду повторяться и расписывать о каждом формате, поскольку вся эта информация уже подробно изложена в статье, посвященной используемых фотошопом.

Файл — Сохранить (Ctrl+S)

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

Если вы создали изображение с нуля, то эта команда будет работать как Сохранить как .

Файл — Сохранить как… (Shift+Ctrl+S)

Данная команда является основной и наделена множеством «сложностей».

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

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

Но это еще не все. Фотошоп покажет еще одно окно — Параметры . Содержимое данного окна будет напрямую зависеть от выбранного вами формата файла.

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

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

Также вам предлагается три разновидности формата:

• Базовый («стандартный») — это отображение изображений на экране построчно. То есть самый обыкновенный способ отображения содержимого JPG-файла.
• Базовый оптимизированный — это изображение с оптимизированной кодировкой Huffman.
• Прогрессивный — это формат, обеспечивающий показ с постепенным улучшением качества изображений по мере их загрузки.

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

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

Третий способ сохранения в фотошопе

Нажмите на крестик этого изображения (красная стрелочка), если хотите закрыть изображение, но остаться в фотошопе, либо на крестик самого фотошопа (синяя стрелочка), если хотите совсем закончить свою работу.. Спасибо!

Здравствуйте, уважаемые читатели блога Start-Luck! На связи Андрей Зенков и мои практические советы по веб-дизайну. Сегодня мы поговорим о тех самых ключиках, без которых ваш сайт никогда не откроет дверь в мир браузерных закладок (а ведь для пользователя так важно помечать «звёздочкой» полюбившиеся страницы).

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

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

С воодушевлением вы подгоняете все изображения под , сохраняете и… видите, что усилия напрасны. Пиксели напрочь убивают кропотливо созданные «лапки», а на картинки в движении нельзя взглянуть без слёз. Фотошоп автоматически перемещается в список программ на удаление, а вы даёте себе обещание найти настоящего умельца. Зачем? Всё можно сделать самостоятельно, узнав главный секрет, которым я всегда пользуюсь.

Алгоритм сохранения изображений в оптимальном качестве зависит от их формата. Не хочется вдаваться в подробности, рассказывая о том, какие относятся к растровым, а какие - к векторным. Тем более вы можете изменить их в пару кликов. Об этом я уже писал в одной из своих статей, делясь с читателями менять форматы изображений.

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

Основные группы изображений в веб-дизайне

Графический контент сайтов условно делится на три категории.

Коллажи и фотографии

Для них характерен формат JPG - к слову, самый встречающийся на веб-просторах. Эти изображения отличаются небольшим размером, что позволяет использовать их в оформлении сайта, не опасаясь медленной загрузки страниц. К примеру, один и тот же пейзаж, сохранённый в JPG и PNG, значительно отличается по весу:

Иконки, кнопки и баннеры

Для этих элементов дизайна предпочтителен PNG. Он позволяет вырезать объект и сохранить изображение без фона, используя вместо него в дальнейшем «подложку» сайта. Я бы порекомендовал этот формат и для изображений, которые не могут похвастать огромной палитрой. К примеру, создаём документ в фотошопе и - название сайта:

Сохраняем изображение в двух форматах и сравниваем результат:

Анимация

GIF предназначен для создания анимированных изображений, состоящих из двух и более слоёв. Это можно сделать не только при помощи фотошопа, но и . Я бы назвал этот формат самым капризным, поскольку при сохранении в нём сложно добиться хорошего качества. К счастью, у меня есть лайфхак, благодаря которому вы обзаведетесь анимациями с минимальной пикселизацией. Заинтригованы? Читайте дальше!

Пошаговая инструкция по сохранению изображений

Начнём с JPG: с ним получить фотографию без потери качества очень просто. Для этого нажимаем «Файл» - «Сохранить как». При желании можно воспользоваться комбинацией клавиш Shift+Ctrl+S:

В появившемся окне ищем выпадающий список «Тип файлов» и выбираем строчку JPEG. Обычно она стоит по умолчанию:

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

Изучите открывшееся окно. Ваша задача - убедиться в том, что в выпадающем списке выбран пункт PNG-24, а напротив строк «Прозрачность» и «Чересстрочно» стоят галочки:

Обратите внимание: последняя галочка сокращает время загрузки изображения на сайте, но вместе с тем увеличивает его вес. Если вас это не беспокоит, жмите «Сохранить». В выпавшем окне выбирайте путь файла и вновь нажимайте заветную кнопку, чтобы получить изображение PNG и как можно скорее выложить его на сайт!

Анимация сохраняется через тот же пункт меню, но только теперь в выпадающем списке нужно выбрать вариант GIF. Огромное количество параметров и непонятных слов может вызвать недоумение или даже испуг. Не стоит! Просто установите параметры, которыми пользуюсь я:

Подводим итоги

Работа с графикой требует постоянного совершенствования навыков, не зацикливаясь при этом на одном-двух направлениях. Как быть? В своё время настоящей находкой для меня стал набор из пяти мини-курсов от проекта «Фотошоп-мастер». Из них я почерпнул не один байт полезной информации.

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

На этом всё. Не забудьте подписаться на группу ВКонтакте и обновления блога для еженедельной порции свежих и полезных статей.

С вами был Андрей Зенков. До новых встреч!