Главная » Компьютерная Азбука

Сохранение и оптимизация изображений для Web

сохранение картинок для webЧтобы открыть изображение в программе Adobe Photoshop CS5, нужно зайти в меню Файл — Открыть, и выбрать нужный файл. Также можно открыть изображение с помощью горячих клавиш Ctrl + O. Если ни одно изображение не открыто, можно сделать двойной клик по пустой рабочей области. Также можно открыть файл из папки с помощью нажатия правой клавишей мыши: нажимаете и выбираете пункт Открыть с помощью, а далее выбираете программу фотошоп.

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

оптимизация изображений для webЧтобы сохранить изображение в программе Adobe Photoshop CS5, нужно зайти в меню Файл — Сохранить, выбрать место, куда сохранять, прописать название и сохранить. Также созранение производится с помощью горячих клавиш Ctrl+S.

Кроме того, если Вы производите с изображением какие-либо действия, то можете сохранить не изображение, а его копию, выбрав меню Файл — Сохранить как, и прописав другое имя файла.

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

сохранение для webИзображение можно сохранять в разных форматах. Если мы поработали с изображением. и в итоге у нас в нем появилось несколько слоев, то по умолчанию нам предлагается сохранять изображение в формате PSD. Этот формат — формат фотошопа, он позволяет сохранять все слои, а также настройки их наложения друг на друга. Таким образом, Вы можете всегда сохранять изображение в этом формате, если планируете его редактировать в дальнейшем.

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

Откройте какое-либо изображение в программе Adobe Photoshop CS5, и сделайте на нем любую надпись с помощью инструмента Горизонтальный текст. Если Вы теперь посмотрите палитру Слои, то увидите, что изображение состоит теперь из двух слоев: фонового слоя, и слоя с текстом, которые лежат один над другим. Это позволяет в дальнейшем редактировать текст: например, исправить надпись, сделать ее другим цветом, или изменить расположение, не затрагивая фон. Или наоборот, мы можем изменять фон, не изменяя текст, работая над каждым слоем отдельно.

Если Вы сохраняете это изображение в самых распространенных форматах для просмотра: JPEG, GIF или PNG, то слои сольются в один, и при последнем открытии в программе фотошоп Вы их не увидите. А это означает, что возможности редактировать слои в картинке по отдельности у Вас уже не будет. Именно поэтому для дальнейшего редактирования изображение сохраняйте в формате PSD: когда Вы открываете его в программе фотошоп снова, Вы сможете со слоями работать.

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


Для размещения изображений в Интернете их сначала, как правило, оптимизируют — то есть уменьшают их вес. Оптимизация изображений производится с помощью меню Файл — Сохранить для Web и устройств. В этом пункте изображение можно оптимизировать — уменьшить его вес. Оптимизация изображения — это самая последняя операция перед размещением  в Интернете, ее делают после совершения всех остальных операций редактирования.

сохранение для webЗаходите в этот пункт и во вкладках на рабочей области выбираете различные варианты просмотра: можно посмотреть исходное изображение, изображение после оптимизации, оба варианта сразу, или четыре варианта оптимизации, которые предлагает программа. Изображения в окнах можно перемещать с помощью инструмента Рука, а также увеличивать или уменьшать с помощью инструмента Лупа.

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

Вес картинки, исходной и оптимизированной, Вы можете увидеть внизу, под изображением.

По окончании настройки оптимизации нажимаете внизу кнопку Сохранить.

Видео о том, как открыть, сохранить изображение, и сохранить его для Web


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

Также Вы можете подписаться на блог, и узнавать о всех новых статьях.
Это не займет много времени. Просто нажмите на ссылку ниже:
    Подписаться на блог: Дорога к Бизнесу за Компьютером

Вам понравилась статья? Поделитесь, буду весьма признателен:


Также приглашаю добавиться в друзья в социальных сетях:

<< Предыдущая статья Следующая статья >>
Проголосуйте и поделитесь с друзьями анонсом статьи на Facebook:  

Один комментарий »

  • Наталья Кочеткова пишет:

    А я все сохраняю в одном формате — будем учиться.

Оставьте свой комментарий и ответный визит Вам обеспечен