Сохраняем изображения в Фотошопе. Чересстрочно в фотошопе


Оптимизация изображений PNG

Оптимизация изображений PNG

Если изображения, созданные или обработанные в Фотошоп, оптимизировались нами всё это время форматом JPG и однажды, нам захотелось попробовать сохранить (оптимизировать) их PNG или GIF, то мы действуем также как и в случае с оптимизацией JPG.

Щёлкнув по кнопке «Файл» верхнего меню мы развернём перечень опций, в котором выберем команду «Сохранить как…»:

Оптимизация PNG в Фотошоп

Запомнив сочетание клавиш Shift+Ctrl+S, мы сократим количество своих действий. Нажатие такого сочетания клавиш сразу же выводит окошко выбора места сохранения и типа файла:

Оптимизация PNG в Фотошоп

Давайте щёлкнем по стрелочке для раскрытия списка с типами файлов, где выберем тип PNG:

Оптимизация PNG в Фотошоп

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

После выбора формата PNG, Фотошоп предложит два варианта оптимизации и два варианта вывода уже оптимизированной картинки при просмотре, ну а наша задача сделать свой индивидуальный выбор:

Оптимизация PNG в Фотошоп 

Версия Фотошоп CS6 предусматривает дополнительное пользовательское сжатие на выбор, а предыдущая версия CS5 сжимает картинку самостоятельно автоматически, предлагая нам, лишь определиться с её выводом (появлением) при просмотре:

Оптимизация PNG в Фотошоп

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

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

Визуально изображение должно выглядеть достаточно качество и иметь не очень большой размер (как файл). К тому же у нас есть запасной вариант — JPG для обработанных фотографий. Длинные ресницы, осиная талия и всё такое.

Не будем забывать о супер возможности с помощью PNG при оптимизации, сохранить многоуровневую прозрачность, если наше изображение содержит слои с разной степенью прозрачности:

Оптимизация PNG в Фотошоп

Давайте воспользуемся имеющейся возможностью Фотошоп CS6 дополнительной регулировки степени сжатия и посмотрим на размер файлов в первом и втором вариантах сжатия, а также на то, каким будет наше зрительное восприятие.

Оптимизируем изображение по варианту сжатия «Нет/быстро»:

Оптимизация PNG в Фотошоп

А затем, по варианту «Самый маленький/медленно»:

Оптимизация PNG в Фотошоп

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

Посмотрим на картинку с первым вариантом оптимизации. Достаточно просто навести курсор мыши на изображение:

Оптимизация PNG в Фотошоп

Теперь переведём курсор мыши на изображение сжатое по второму варианту:

Оптимизация PNG в Фотошоп

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

Давайте посмотрим на оба варианта оптимизации с помощью средств операционной системы. Оптимизация по первому варианту сжатия:

Оптимизация PNG в Фотошоп

Теперь посмотрим на оптимизацию с более высокой степенью сжатия (вариант 2):

Оптимизация PNG в Фотошоп

Опять скажу о себе. При различном размере файлов мои глаза не видят отличий. При переключении с одной картинки на другую я не заметил перехода. Такое впечатление, будто кнопки переключения с изображения на изображение (вперёд/назад) не функционируют.

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

Чтобы провести этот сравнительный анализ нам нужно обратиться к пункту «Окно» верхнего меню и выбрать опцию «Упорядочить»:

Оптимизация PNG в Фотошоп

Где щелчком по стрелочке открыть окошко с перечнем вариантов:

Оптимизация PNG в Фотошоп

Поскольку в нашем примере изображений только два, то на вполне подойдёт режим двух окон. Мы можем выбрать горизонтальное расположение окон или же вертикальное. Выбираем тот вариант, который нам больше нравится и удобней:

Оптимизация PNG в Фотошоп

Оставить комментарий

pmweb.ru

Adobe Photoshop и Image Optimizer — Примеры

Содержание.

  1. Программа Adobe Photoshop.
  • Программа Image Optimizer.
  • Программа Blogger.
  • Сколько картинок проиндексировано?
  • Уникальность картинок для поисковых систем.
  • Программа Adobe Photoshop.

    Для того, чтобы ускорить загрузку блога, рекомендуется оптимизировать изображение, то есть при минимальном объёме файла, получить максимально качественную картинку. Лидером рынка в области редактирования web-изображений является редактор Adobe Photoshop (Фотошоп). Скачать последнею версию можно с сайта разработчика или воспользоваться услугами таких программ, как MediaGet. Я выбрала последнее. Вот скаченный мной файл Adobe_Photoshop_CS5_En-Ru-Ukr. При обозначении настроек принято использовать английский язык, поскольку перевод (русификация программы) может варьироваться. Я же буду указывать обозначения, задействованные в данной версии программы.

    Общие настройки сжатия изображения.

    После предварительной обработки фотографии, выбираем пункт "Файл"-"Сохранить для Web и устройств". Не стоит сохранять оптимизированные картинки поверх оригинала, исходные изображения лучше держать под рукой. При сохранении, имя файла присваиваем латинскими буквами без пробелов, используя в качестве разделителя слов тире, формат - "Только изображения".

    Открыть меню для оптимизации изображения Photoshop.
    Открыть меню для оптимизации изображения Photoshop.

    Определяемся с удобным способом предварительного просмотра результата оптимизации изо в сравнении с оригиналом:

    • Исходное,
    • Оптимизация,
    • 2 варианта,
    • 4 варианта.

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

    Сохранить настройки сжатия в Photoshop.
    Сохранить настройки сжатия в Photoshop.

    От показа метаданных я отказываюсь. Они увеличивают объём файла картинки.

    При необходимости можно изменить размер изображения. Нежелательный эффект: изменение пикселей в картинке ухудшает чёткость рисунка. Я для манипуляций размера использую программу Image Resize Guide Lite (скачать с сайта разработчика). На мой взгляд, итоговая картинка получается чётче, чем в Фотошопе. А скриншот, по-возможности, стараюсь сразу получить нужного размера, либо предварительно уменьшив размер программы (см, рис. ниже), либо изменив масштаб в браузере: "Вид"-"Масштаб".
    Image Resize Guide Lite.
    Image Resize Guide Lite.

    Оптимизация изображения в формате PNG-8.

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

    1. Перцепционная - за основу берутся текущие цвета скриншота, сохраняется целостность цвета, особое внимание уделяется восприятию цветовой палитры человеком.
    2. Селективная - предпочтение отдаётся Web-безопасным цветам (количество: 216), которые во всех браузерах выглядят одинаково.
    3. #000000#000033#000066#000099#0000CC#0000FF
      #003300#003333#003366#003399#0033CC#0033FF
      #006600#006633#006666#006699#0066CC#0066FF
      #009900#009933#009966#009999#0099CC#0099FF
      #00CC00#00CC33#00CC66#00CC99#00CCCC#00CCFF
      #00FF00#00FF33#00FF66#00FF99#00FFCC#00FFFF
      #330000#330033#330066#330099#3300CC#3300FF
      #333300#333333#333366#333399#3333CC#3333FF
      #336600#336633#336666#336699#3366CC#3366FF
      #339900#339933#339966#339999#3399CC#3399FF
      #33CC00#33CC33#33CC66#33CC99#33CCCC#33CCFF
      #33FF00#33FF33#33FF66#33FF99#33FFCC#33FFFF
      #660000#660033#660066#660099#6600CC#6600FF
      #663300#663333#663366#663399#6633CC#6633FF
      #666600#666633#666666#666699#6666CC#6666FF
      #669900#669933#669966#669999#6699CC#6699FF
      #66CC00#66CC33#66CC66#66CC99#66CCCC#66CCFF
      #66FF00#66FF33#66FF66#66FF99#66FFCC#66FFFF
      #990000#990033#990066#990099#9900CC#9900FF
      #993300#993333#993366#993399#9933CC#9933FF
      #996600#996633#996666#996699#9966CC#9966FF
      #999900#999933#999966#999999#9999CC#9999FF
      #99CC00#99CC33#99CC66#99CC99#99CCCC#99CCFF
      #99FF00#99FF33#99FF66#99FF99#99FFCC#99FFFF
      #CC0000#CC0033#CC0066#CC0099#CC00CC#CC00FF
      #CC3300#CC3333#CC3366#CC3399#CC33CC#CC33FF
      #CC6600#CC6633#CC6666#CC6699#CC66CC#CC66FF
      #CC9900#CC9933#CC9966#CC9999#CC99CC#CC99FF
      #CCCC00#CCCC33#CCCC66#CCCC99#CCCCCC#CCCCFF
      #CCFF00#CCFF33#CCFF66#CCFF99#CCFFCC#CCFFFF
      #FF0000#FF0033#FF0066#FF0099#FF00CC#FF00FF
      #FF3300#FF3333#FF3366#FF3399#FF33CC#FF33FF
      #FF6600#FF6633#FF6666#FF6699#FF66CC#FF66FF
      #FF9900#FF9933#FF9966#FF9999#FF99CC#FF99FF
      #FFCC00#FFCC33#FFCC66#FFCC99#FFCCCC#FFCCFF
      #FFFF00#FFFF33#FFFF66#FFFF99#FFFFCC#FFFFFF
    4. Адаптивная - цветовая таблица состоит из наиболее часто встречающихся цветов в исходном изо.
    Остальные варианты приводят к значительным искажениям картинки.
    Photoshop. Формат PNG-8.
    Photoshop. Формат PNG-8.

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

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

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

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

    Оптимизация изображения в формате PNG-24.

    Этот формат применяется для полноцветных изображений, использует более 16 миллионов цветов в файле, сохраняет чёткие детали рисунка, поддерживает многоуровневую прозрачность, в результате чего конечный объём графического файла получается наибольшим. Оптимизация проводится лишь в двух направлениях: присутствием прозрачности и наличием режима "Чересстрочно".

    Photoshop. Формат PNG-24.
    Photoshop. Формат PNG-24.

    Оптимизация изображения в формате GIF.

    Формат GIF поддерживает по кадровую смену изображений. Широко используется при создании баннеров и анимационной графики.

    Оптимизация изображения в формате JPEG.

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

    Перед осуществлением оптимизации фоторгафии, предварительно применяем команду "Фильтр"-"Шум"-"Уменьшить шум".

    Степень сжатия определяется:

    Photoshop. Формат JPEG.
    Photoshop. Формат JPEG.
    1. Значением поля "Качество" (при использовании очень мелких контрастных деталей, не стоит выставлять качество ниже 51),
    2. Желательным наличием режима "Прогрессивный" (постепенная загрузка изображения),
    3. Значением поля "Размытие",
    4. Не обязательным присутствием галочки "Встроенный профиль" (большинство браузеров не могут читать ICC-профиль).
    Пока я довольствуюсь этим материалом, что не мешает мне восхищаться работами профессионалов, которые применяют взвешенную оптимизацию и оптимизацию фрагментов. Также, для прочтения по данной теме рекомендую статьи "Студии Артемия Лебедева".

    Программа Image Optimizer.

    Для быстрой оптимизации изображений без потери качества в формате PNG и JPEG можно воспользоваться программой Image Optimizer (ссылка компьютерного портала RU-BOARD). После использования Фотошопа, я применяю также эту программу, что позволяет ещё уменьшить размер объёма файла. Для JPEG практикую цифру 2 (Прогрессивный), а для PNG - 3 (Чересстрочно). При Xtreme происходит наилучшее сжатие.

    Программа Blogger.

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

    При включении картинки в блог, Blogger автоматически размещает ссылку на её оригинальный размер и место расположения (левый/правый край, по центру). Код при этом выглядит следующим образом (для работы с кодом нужно при редактировании/создании сообщения выбрать вкладку "Изменить HTML"):

    <div> <a href="http://3.bp.blogspot.com/_ebKrCj8TLPk/TKT7q7GVJkI/AAAAAAAAAoM/Kbm08McseMk/s1600/tigr.jpg" imageanchor="1"><img border="0" src="http://3.bp.blogspot.com/_ebKrCj8TLPk/TKT7q7GVJkI/AAAAAAAAAoM/Kbm08McseMk/s320/tigr.jpg" /></a></div> Обратите внимание на часть адреса /s1600/ - он определяет размер изо. Оно может варьироваться по вашему усмотрению, а не только (маленький, средний, крупный, очень крупный, исходный). В данном случаем установлен "средний размер". Но, если выбрать "исходный размер", изображение уместится в ширину сообщения блога. То есть, можно безболезненно удалить ссылку, поскольку она не увеличивает рисунок и не улучшает качество просмотра. Я стараюсь уменьшить ненужную и неэффективную ссылочную массу, поэтому располагаю большую часть картинок в их исходном виде без использования тега .При выборе варианта размещения рисунка "Исходный размер", нет таких важных параметров, как alt, width, height. В остальных случаях задаётся фиксированное значение width и соответствующее ему height. Более подробно про значения размеров изображений можете прочитать здесь.Также мы видим тег , который определяет место расположения изображения. При большом рисунке, чтобы его границы были в рамках сообщения, или малом изображении, например, кнопки, в тексте, я удаляю этот элемент. Бесполезен данный код и при использовании возможности "Добавить подпись" к рисунку. В общих чертах:<table><tbody> <tr><td><img/></td></tr> <tr><td>Тигры</td></tr> </tbody></table> <div> <a></a></div> Как видите, в тег заключён только тег </a>, у которого нет анкора, т.е. ваша картинка не будет увеличиваться. А место размещения рисунка определяется атрибутом class тега .

    Конечный код оптимизированного изо будет иметь вид:

    <table align="center" cellpadding="0" cellspacing="0"><tbody> <tr><td><img alt="Тигры" border="0" src="http://3.bp.blogspot.com/_ebKrCj8TLPk/TKT7q7GVJkI/AAAAAAAAAoM/Kbm08McseMk/s1600/tigr.jpg" /></td></tr> <tr><td>Тигры</td></tr> </tbody></table> А это его отображение:
    Тигры
    Тигры

    Сколько картинок проиндексировано?

    Чтобы увидеть какие изображения вашего блога проиндексированы:
    1. Расширенный поиск Яндекс.Картинки.В графу "Находятся на сайте:" задаём URL(адрес, например, http://shpargalkablog.ru/).
    2. Поиск Google (результат: Картинки).В поле поиска задаём site:ваш_блог (например, site:shpargalkablog.ru). Здесь же можно загрузить фото через свой компьютер по нажатию на кнопку поиск по документу png, jpeg в Гугл и робот покажет его аналоги.

    Уникальность картинок для поисковых систем.

    И последнее, стараемся размещать свои оригинальные изображения. Поисковые системы имеют свои алгоритмы распознавания дублей, такие, например, как у онлайн-сервиса TinEye. Потренировавшись на нём, у меня получилось, что уникальной картинку можно сделать лишь путём зеркального отражения либо поворотом изображения, скажем на 15 градусов. Способ довольно известный и широко используемый. Больше всего меня удивил скриншот программы Image Resize Guide Lite (см. выше). TinEye без труда выдал несколько копий с изображением тигров. Ни уменьшение, ни обрезка, ни... результата не дали.

    Яндекс и Гугл могут определять похожие изображения. Для этого в поиске по картинкам рядом с изображением нужно щёлкнуть ссылку "Другие размеры" (в Яндексе ссылка под фото имеет вид "800×600 … 1600×1200").

    Похожие статьи:

    1. Фотошоп с нуля.
    2. Программа для снятия скриншота ScreenHunter 5.1 Free.
    3. Как сделать анимированный баннер в Photoshop.

    shpargalkablog.ru

    FAQ. 35 вопросов « Just Kitich

    Долго ничего не писал. Простите меня.

    И так как интересной темы у меня сегодня нет, решил обратиться к Google Analitics и проверить «хвост» поисковых запросов, по которым ко мне попадали. Там собраны самые интересные вопросы — попытаюсь дать на них ответы.

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

    1. як зробити самому колонки (как сделать самому колонки)

    В HTML — при помощи таблиц. Каждая таблица состоит из рядов, которые состоят из ячеек. Фактически, множество 1-х (2-х, 3-х, 10-х) ячеек в каждой строке и является колонкой. Какие теги нужны, чтобы это сделать, смотрите у Влада Мержевича.

    2. я дизайнер

    Я за Вас рад. А теперь сядьте и подумайте, зачем Вам это нужно.

    3. что такое кликабельный

    Кликабельный — это тот, по которому можно кликнуть, то есть нажать курсором мыши.

    4. что такое .png

    Графический формат. Подробнее о нём можно почитать в специальной статье.

    5. что лучше png или gif

    Смотря для чего. GIF анимированный и поддерживает 2-битный альфа-канал (прозрачность, бывает у него 2 видов — есть или нет), адекватно поддерживается всеми браузерами. PNG поддерживает полупрозрачность, но криво отображается старыми браузерами.

    Если не интересуют эти возможности, то обычные изображения, маленькие — лучше хранить в GIF, большие в PNG.

    6. что значит если на rewriterule выдается ошибка 500

    Значит, происходит ошибка на сервере. Скорее всего, правила в .htaccess заданы так, что сервер не может завершить работу и зацикливается при обработке адреса. То есть какое-то правило изменяет адрес так, что он снова подпадает под это же правило.

    7. чпу не передаются переменные get

    А вы их передаёте? Чтобы скрипт получил переменную, она должна посылаться ему из .htaccess в новом адресе. Сам по себе .htaccess её не придумает, значит должен получить значение переменной из «красивого» адреса и передать его в «некрасивый».

    Обратите внимание на адреса в этом блоге все части адреса являются переменными, которые передаются дальше скрипту и обрабатываются.

    8. чем открываeтся формат png (конвертируется)

    Любым нормальным графическим редактором или просмотрщиком. Если при просмотре вы видите чёрный угловатый фон, значит просмотрщик не поддерживает прозрачность формата — откройте браузером или Фотошопом.

    9. фотошоп прозрачность файла png

    Делается просто — отключением слоя с фоном. Видите серо-белые квадратики? Там будет прозрачность — сохраняйте.

    10. формат png потеря качество

    При сохранении в PNG потери качества не происходит. Для сжатия файла применяются обычные алгоритмы архивации. Такие же как ZIP и RAR, но специально заточенные для изображений.

    11. формат png лучше jpg

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

    12. у дизайнеров бывает что им не нравится собственный дизайн

    Бывает. Это значит, что вы могли бы сделать лучше. Но главное, чтобы нравилось заказчику. А лучше обоим.

    13. три колонки одинаковые по высоте блочная вёрстка

    Смотрите тут.

    14. чертежи табуретки

    У меня их НЕТ! Сколько повторять? :)

    15. сохранение в png черезстрочно что значит

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

    При черезстрочном сохранении картинка загружается: каждая 4-я строчка (и растягивается), каждая 2-я и т.д. А пользователю кажется, что он видит картинку сразу, но в плохом качестве, которое улучшается по мере загрузки.

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

    16. сменить дизайн на блоге

    Скачать бесплатный шаблон и установить. А лучше написать мне, заказать эксклюзивный дизайн и получить единственный и неповторимый блог :)

    17. сжимаем png

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

    18. с днем рождения нового светлого дня

    ...Снова новые радости,Всё от того.Я — заведующий всемИ всё из-за меня.Я — заведующий всемИ всё на одного...

    © АукцЫон

    19. портфолио дизайнера

    Находится Здесь.

    20. можно ли растянуть пиксель до большой картинки

    Можно. И получите большую картинку, залитую цветом одного этого пикселя (Чёрный квадрат?). Попробуйте, это прикольно.

    21. можно ли в 2009 году вешать на ёлку бардовые игрушки и зелёные

    Можно.

    22. много картинок png в jpg

    Можно конвертировать любым нормальным графическим просмотрщиком. Это называется «пакетная обработка» или «batch conversion». Я использую для этого Irfan View и там такой инструмент находится прямо в меню File.

    23. методика резиновой верстки

    Заключается в том, что ширина элементов страницы задаётся не в пикселях, а в процентах от родительского элемента (окна, внешнего блока).

    24. колонки одинаковой ширины

    Делаются просто: в свойстве width им задаётся одинаковая ширина :)

    25. колонки одинаковой высоты

    Делаются сложно: но так же, как и 3 колонки одинаковой высоты.

    26. какой блог лучше для дизайнера

    Чтобы писать — свой. Чтобы читать — мой :).

    27. как установить adobe fireworks

    Скачать файл установки, запустить и жать все время «Next» (Дальше), пока он не скажет, что закончил :)

    28. как сделать коллажи

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

    29. как сделать логотип кликабельный

    Вот так.

    30. как сделать коллаж по теме сайта

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

    31. из png в gif без потери качества

    Если в PNG была полноценная прозрачность или больше 256 цветов, то качество точно будет потеряно. Иначе — без проблем.

    32. задать фон колонкам

    С помощью свойства CSS background.

    33. блог Сергей М.

    Находится здесь.

    34. htaccess передать несколько get

    Запихать все get-переменные в секции «красивого» адреса, а потом распарсить скриптом или с помощью .htaccess.

    35. htaccess направить все запросы на один скрипт

    Можно так:

    RewriteCond %{REQUEST_URI} !^(.*)\.(.*)$RewriteRule ^(.*)$ /index.php [L]

    kitich.com

    Как сохранить фото в Фотошопе

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

    Сегодня поговорим о том, как сохранять готовые работы в Фотошопе.

    Первое, с чем необходимо определиться, прежде чем начать процедуру сохранения, это формат.

    Распространенных форматов всего три. Это JPEG, PNG и GIF.

    Начнем с JPEG. Данный формат универсален и подходит для сохранения любых фотографий и изображений, не имеющих прозрачного фона.

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

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

    Дальше идет формат PNG. Этот формат позволяет сохранить картинку без фона в Фотошопе. Изображение может также содержать полупрозрачный фон или объекты. Другие форматы прозрачность не поддерживают.

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

    Последний на сегодня представитель форматов – GIF. В плане качества это самый худший формат, так как имеет ограничение по количеству цветов.

    Вместе с тем, GIF позволяет сохранить анимацию в Фотошопе CS6 в один файл, то есть один файл будет содержать все записанные кадры анимации. Например, при сохранении анимации в PNG, каждый кадр пишется в отдельный файл.

    Давайте немного попрактикуемся.

    Для вызова функции сохранения необходимо перейти в меню «Файл» и найти пункт «Сохранить как», либо воспользоваться горячими клавишами CTRL+SHIFT+S.

    Сохраняем фото в Фотошопе

    Далее, в открывшемся окне, выбираем место для сохранения, имя и формат файла.

    Сохраняем фото в Фотошопе

    Это универсальная процедура для всех форматов, кроме GIF.

    Сохранение в JPEG

    После нажатия кнопки «Сохранить» появляется окно настроек формата.

    Сохраняем фото в Фотошопе

    Подложка

    Ка мы уже знаем, формат JPEG не поддерживает прозрачность, поэтому при сохранении объектов на прозрачном фоне, Фотошоп предлагает заменить прозрачность на какой-нибудь цвет. По умолчанию это белый.

    Параметры изображения

    Здесь выставляется качество картинки.

    Разновидность формата

    Базовый (стандартный) выводит изображение на экран построчно, то есть обычным способом.

    Базовый оптимизированный использует для сжатия алгоритм Хаффмана (Huffman). Что это такое, объяснять не буду, поищите сами в сети, это к уроку не относится. Скажу только, что в нашем случае это позволит немного уменьшить размер файла, что на сегодняшний день не сосем актуально.

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

    На практике чаще всего применяются первая и третья разновидность. Если не совсем ясно, для чего вся эта кухня нужна, выбирайте Базовый («стандартный»).

    Сохранение в PNG

    При сохранении в этот формат также выводится окно с настройками.

    Сохраняем фото в Фотошопе

    Сжатие

    Эта настройка позволяет значительно сжать итоговый PNG файл без потери качества. На скриншоте настроено сжатие.

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

    Сохраняем фото в ФотошопеСохраняем фото в Фотошопе

    Как видим, разница значительная, поэтому имеет смысл поставить галку напротив «Самый маленький/медленно».

    Чересстрочно

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

    Я пользуюсь настройками, как на первом скриншоте.

    Сохранение в GIF

    Для сохранения файла (анимации) в формате GIF необходимо в меню «Файл» выбрать пункт «Сохранить для Web».

    Сохраняем фото в Фотошопе

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

    Сохраняем фото в Фотошопе

    Надеюсь, что изучив этот урок, Вы составили максимально полное представление о сохранении изображений в Фотошопе.

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

    Помогла ли вам эта статья?

    Да Нет

    lumpics.ru


    Смотрите также