Как сохранить фото для web в фотошопе: Photoshop . — Save For Web & Devices. —

Оптимизация изображений для web, основные характеристики и методы исправления

Информация о материале

Наш блог

Фотошоп

Просмотров: 1394

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

Что такое оптимизация изображений и для чего она нужна

Данный материал иллюстрирует одну из обязательных тем, которую подробно раскрывают наши курсы по фотошопу, и данный навык необходим в первую очередь web-дизайнерам, frontend-разработчикам, контент менеджерам, SEO и SMM специалистам, кому необходимо быстро и качественно обрезать изображения и оптимизировать их под определенные цели и задачи.

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

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

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

Сколько должно весить изображение для сайта

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

• кнопка, выполненная в виде изображения, обычно весит в пределах от 0,2 до 5 килобайт
• логотип, в пределах 5 — 30 килобайт
• картинки обычные на страницах сайта, иллюстрирующих статью, товар и прочее в этом духе весят в пределах 15 — 80 килобайт
• изображения на слайдерах большого формата могут достигать веса до 250 килобайт

Все эти данные довольно условны и зависят от множества факторов, но то что является очевидным, самое тяжелое изображение не должно быть тяжелее 250 килобайт. Наша студия проводила различные исследования в этой области, и нам получалось оптимизировать массу больших изображений до этого веса без критического снижения визуального качества. Иными словами, эти данные мы получили эмпирическим методом. Но, в идеале, диапазон веса, все-же, 80 — 120 килобайт на каждое изображение, которое не меньше 450 пикселей по самой маленькой стороне.

Размеры изображения для сайта

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

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

Есть ли идеальный размер для большинства изображений сайта

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

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

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

Таким образом мы оптимизируем изображение и под поиск, и под корректное отображение. Соответственно, если размер изображения, например, 5000 на 7000 пикселей, мы должны уменьшать самую малую сторону до 450 пикселей. Для изображений на страницах сайта это универсальный рецепт, который актуален в 95% случаев.

Как оптимизировать изображение для сайта по весу

В последних версиях Adobe Photoshop CC предусмотрено несколько возможностей оптимизации изображений, старый вариант — сохранить для Web (старая версия), быстрый экспорт в определенный формат и экспортировать как. Оба варианта хороши и актуальны. Чтобы не перегружать информационно данную статью, каждый из вариантов оптимизации изображений мы рассмотрим в последующих публикациях.

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

Позвоните чтобы узнать подробнее

+7(963)972-82-58

или отправьте письмо:

Спросите нас письменно

Базовый курс фотошоп для начинающих

Курс ретуши в фотошоп

Курс по фотошоп для фотографов

Оставить заявку

 

---

• Назад
• Вперед

Как быстро в Photoshop сохранить изображение без фона в формате PNG.

Как создать PNG с прозрачностью в Adobe Photoshop (версии CC и выше) 2 голоса

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

Это самая популярная функция в программе Photoshop, а потому я решил максимально подробно рассказать вам не только о самом процессе, но и том, как сохранить картинку в фотошопе без фона.

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

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

Более терпеливых я благодарю за понимание. Приступим.

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

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

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

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

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

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

Как правильно хранить прозрачные картинки

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

Видите, помимо шашки, в Google почти всегда вместе с нужными картинками можно увидеть это сочетание букв.

Затем выбираете нужный тип файла, png и готово. Он есть в любой версии. Если не видите – ищите внимательнее. Без него никак. Уверяю вас.

Зачем было нужно придумывать другой формат? Все дело в том, что популярный jpeg, не понимает, что такое прозрачность. Он меняет ее на привычный белый.

Как избавиться от фона: простой и довольно быстрый способ без лишних заморочек

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

Итак, открываем картинку.

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

Можете увеличить диаметр ластика, чтобы стирать было удобнее.

Теперь повозюкайте по ненужным элементам на картинке. Вы увидите, как шашка начинает проявляться, а цвет исчезать!

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

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

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

Думаете, что у вас не получится или вы слишком стары для этого дерьма? Не хватает времени? Поверьте, это все нелепые отговорки. Я юрист и зарабатываю достаточно, но … у вас есть хобби, любимое увлечение? Вы живете полной жизнью? Вам действительно не скучно?

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

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

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

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

Занимайтесь чем-то новым. Если вы любите фотошоп – обратите внимание на курс Зинаиды Лукьяновой — «Фотошоп с нуля » и овладейте им в совершенстве. Очень быстро у вас появится прибыльное хобби. Не так уж увлечены дизайном? Обратите внимание на то, и создавайте свои проекты.

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

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

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

Я искренне желаю вам успехов в ваших начинаниях и надеюсь, что эта наша встреча будет не последней.

Приветствую Вас, дорогие читатели моего блога!

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

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

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

Покажу Вам на примере, вот такой картинки, убирать мы будем белый фон

Заходим в онлайн фотошоп. Я использовала вот этот PIXLR

Выбираем: Загрузить изображение с компьютера.

Теперь справа в окошке «СЛОИ» надо открыть замочек

Кликаем на него 2 раза левой кнопкой мыши, должна появиться галочка в квадратике.

Теперь идем на панели, которая находиться слева, выбираем инструмент «волшебная палочка» и толерантность ставим 21.

Вот вроде бы и все, но меня не устраивает полностью картинка, остались еще остатки фона, я снова кликаю на то место которое хочу убрать. Потом «редактировать»—-«очистить». И так пока не уберете все, что надо.

Доброго времени суток!
Вам когда-нибудь хотелось узнать как устроены файлы PNG? Нет? А я все равно расскажу.
Формат PNG(Portable Network Graphics) был изобретен в 1995 году, чтобы стать заменой GIF , а уже в 1996, с выходом версии 1.0, он был рекомендован W3C , в качестве полноправного сетевого формата. На сегодняшний день PNG является одним из основных форматов веб-графики.

Под катом вы найдете общее описание строения PNG-файла, некоторое количество картинок-схем, препарирование в hex-редакторе, и, конечно, ссылку на спецификацию.

Общее строение

Структура PNG в самом общем виде представлена на следующем рисунке.

То есть файл состоит из подписи и некоторого количества блоков(чанков, chunks), каждый из которых несет в себе некоторую информацию (спасибо КО!). Но почему подпись нельзя считать одним из чанков? Давайте разберемся поподробнее.

Подпись файла

Подпись PNG-файла всегда одинакова, состоит из 8 байт, и представляет собой (в hex-записи)

Что же это означает?

• 89 — non-ASCII символ. Препятствует распознаванию PNG, как текстового файла, и наоборот.
• 50 4E 47 — PNG в ASCII записи.
• 0D 0A — CRLF (Carriage-return, Line-feed), DOS-style перевод строки.
• 1A — останавливает вывод файла в DOS режиме (end-of-file), чтобы вам не вываливалось многокилобайтное изображение в текстовом виде.
• 0A — LF, Unix-style перевод строки.

Chunks

Чанки — это блоки данных, из которых состоит файл. Каждый чанк состоит из 4 секций.

Разберем эти секции по порядку.

Длина

Ну, с длиной вроде все ясно. Просто числовое значение длины блока данных.

Тип (имя)

С типом немного поинтересней. Тип представляет собой 4 чувствительных к регистру ASCII-символа. Регистры символов (пятый бит в числовой записи символа) в имени чанка различаются неспроста — это флаги, которые сообщают декодеру некоторую дополнительную информацию.

• Регистр первого символа определяет является ли данный чанк критическим(верхний регистр) или вспомогательным(нижний регистр). Критические чанки должны распознаваться каждым декодером. Если декодер встречает критический чанк, тип которого не может распознать, он обязан завершить выполнение с ошибкой.
• Регистр второго символа задает «публичность»(верхний регистр) или «приватность»(нижний регистр) чанка. «Публичные» чанки — официальные, задокументированные, распознаваемые большинством декодеров. Но если вдруг вам для каких-то своих нужд понадобится кодировать специфическую информацию, то просто в имени чанка сделайте второй символ маленьким.
• Регистр третьего символа оставлен для будущих свершений. Предполагается, что он будет использоваться для дифференциации различных версий стандарта. Для версий 1.0 и 1.1 третий символ должен быть большим. Если он (внезапно!) оказался маленьким, все нынешние декодеры должны поступать с чанком, так же как и с любым другим не распознанным (то есть выходить с ошибкой если чанк критический, или пропускать в противном случае).
• Регистр же четвертого символа означает возможность копирования данного чанка редакторами, которые не могут его распознать. Если регистр нижний, чанк может быть скопирован, вне зависимости от степени модификации файла, иначе (верхний регистр) он копируется только в случае, когда при модификации не были затронуты никакие критические чанки.

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

Ниже приведен список типов чанков с краткими пояснениями.
Критические чанки

• IHDR — заголовок файла, содержит основную информацию о изображении. Обязан быть первым чанком.
• PLTE — палитра, список цветов.
• IDAT — содержит, собственно, изображение. Рисунок можно разбить на несколько IDAT чанков, для потоковой передачи. В каждом файле должен быть хотя бы один IDAT чанк.
• IEND — завершающий чанк, обязан быть последним в файле.

Вспомогательные чанки

• bKGD — этот чанк задает основной фоновый цвет.
• cHRM используется для задания CIE 1931 цветового пространства.
• gAMA — определяет гамму.
• hIST — в этом чанке может храниться гистограмма или общее содержание каждого цвета в изображении.
• iCCP — цветовой профиль ICC
• iTXt — содержит текст в UTF-8, возможно сжатый, с необязательной языковой меткой. iTXt чанк с ключевым словом «XML:com.adobe.xmp» может содержать Extensible Metadata Platform (XMP) .
• pHYs — содержит предполагаемый размер пикселя и/или отношение сторон изображения.
• sBIT (significant bits) — определяет «цветовую точность» (color-accuracy) изображения (черно-белое, полный цвет, черно-белое с прозрачностью и т.д.), для более простого декодирования.
• sPLT — предлагает палитру для использования, если полный спектр цветов недоступен.
• sRGB — свидетельствует о использовании стандартной sRGB схемы.
• sTER — индикатор стереоскопических изображений.
• tEXt — может содержать текст в ISO/IEC 8859-1 формате, с одной name=value парой для каждого чанка.
• tIME — хранит дату последнего изменения изображения.
• tRNS — содержит информацию о прозрачности.
• zTXt — сжатый текст, с теми же ограничениям, что и tEXt.

Более подробную информацию можно найти в спецификации.

CRC

Контрольная сумма CRC-32 . Кстати на днях был топик о ее подсчете в Windows.

Минимальный PNG

С общей структурой разобрались. Теперь разберем содержание обязательных чанков. Но какие из них обязательные (не критические, критические обязаны распознаваться декодером, а не присутствовать в каждом файле), и как выглядит минимальный PNG-файл? А вот как:

IHDR

Блок данных в IHDR содержит следующие поля:

• Ширина, 4 байта
• Высота, 4 байта
• Битовая глубина (bit depth), определяет количество бит на каждый сэмпл(не пиксель), 1 байт
• Тип цвета, состоит из 3 флагов 1 (используется палитра), 2 (используется цвет, не монохромное изображение), and 4 (присутствует альфа-канал), 1 байт
• Метод сжатия. На данный момент доступно только значение 0 — сжатие по алгоритму deflate . Если значение отлично от 0, чанк считается нераспознанным, и декодер рапортует об ошибке. 1 байт
• Метод фильтрации. Так же, как и в случае сжатия, на данный момент может быть только нулем. 1 байт
• Interlace(переплетение) метод. Определяет порядок передачи данных. На данный момент доступно 2 значения: 0 (no interlace) и 1 (Adam7 interlace). 1 байт

Adam7 interlacing прекрасно демонстрирует картинка из википедии (да-да, GIF в статье про PNG):

IEND

Сигнализирует о конце файла, блок данных этого чанка не содержит ничего.

IDAT

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

Таким образом, простейший PNG-файл (на примере ) выглядит следующим образом.

Заключение

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

Топик на хабре про строение JPEG: habrahabr.ru/blogs/algorithm/102521
Топик на хабре про строение GIF: habrahabr.ru/blogs/algorithm/127083

Спасибо за внимание, буду рад любой критике!

05.06.16 27.2K

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

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

Создание файла

Первый шаг – это создание файла. Для этого откройте Adobe Photoshop и в меню «Файл » (File ) вверху страницы выберите «Создать » (New ).

Затем в появившемся окне «Новый документ » (New Document ) создайте файл нужного размера, и убедитесь, что разрешение документа составляет 72 пикселя на дюйм (поскольку файл предназначен для использования в веб ). А также, что вы выбрали значение «Прозрачный » (Transparent ) в выпадающем списке «Содержимое фона » (Background Contents ).

*Перед тем, как сделать PNG с прозрачностью в Фотошопе , нужно уточнить, что в этом примере мы создаем изображение для загрузки в качестве фона для сайта, поэтому размер документа задан следующим образом: ширина 3000 пикселей, высота 1730 пикселей, что является рекомендуемыми размерами для загрузки HD изображений:

После того, как вы задали значения параметров, нажмите «OK », чтобы открыть новый документ.

Затем в панели «Слои » (Layers ) убедитесь, что работаете на прозрачном слое, а не на фоновом:

После того, как вы завершили создание и готовы сохранить прозрачное изображение, в зависимости от используемой версии Photoshop , в меню «Файл » (File ) вы можете использовать один из возможных вариантов:

Photoshop версии ранее, чем CC 2015:

Сейчас мы расскажем, как сделать прозрачность картинки в Фотошопе , который вышел раньше CC 2015 . В этих версиях используют метод «Сохранить для Web » (Save for Web & Devices ), чтобы сохранить и оптимизировать PNG изображения для использования в вебе. Чтобы воспользоваться этим методом, просто зайдите в меню «Файл » (File ), и далее – «Сохранить для Web » (Save for Web & Devices ):

Затем в появившемся окне выберите PNG-24 из выпадающего меню возможных значений, а потом убедитесь, чтобы выбраны опции «Прозрачность » (Transparency ) и «Преобразовать в sRGB » (Convert to sRGB ). Это подтверждает, что изображение будет содержать прозрачный фон и его цветовой режим будет преобразован в sRGB , рекомендованное цветовое пространство для веб.
Поля «Размер изображения » (Image Size ) автоматически заполняются значениями, которые вы задали, когда создавали файл. Но если вы хотите изменить размер файла перед сохранением, то можно сделать это сейчас.

Photoshop версии CC 2015:

Перед тем, как сделать прозрачность фото в Фотошопе , нужно знать, что с версии CC 2015 опция «Сохранить для Web » (Save for Web & Devices ) в меню «Файл » (File ) помечена как Legacy (устаревшая ). И замещена на новую опцию «Экспорт » (Export ), которая предлагает идентичную функциональность с более быстрым сохранением в файле меньшего размера и в лучшем качестве. Чтобы воспользоваться опцией «Экспорт », нажмите меню «Файл » (File ), а затем — «Экспортировать как » (Export As ).

Примечание: Adobe по-прежнему предлагает опцию «Сохранить для Web » (Save for Web & Devices ) в Photoshop CC 2015 , и она доступна через меню Файл > Экспорт (File > Export ) или при использовании комбинации клавиш Command+Option+Shift+S (для Mac ) или Ctrl+Alt+Shift+S (для ПК ):

Затем в появившемся окне выберите PNG из выпадающего меню «Формат » (Format ) и убедитесь, что выбраны опции «Прозрачность » (Transparency ) и «Преобразовать в sRGB » (Convert to sRGB ).

Поля «Размер изображения » (Image Size ) и «Размер холста » (Canvas Size ) должны автоматически заполниться значениями, которые вы задали, когда создавали файл. Но при желании можно изменить эти параметры перед тем, как сделать эффект прозрачности в Фотошопе .

Оптимизация изображений для Интернета | Учебники по Adobe Photoshop

---

Версия для печати

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

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

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

Форматы изображений

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

Существует два вида сжатия изображения: с потерями и без потерь .

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

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

JPEG

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

Подходит для сохранения изображений с миллионами цветов, таких как фотографии, многоцветные рисунки, изображения содержащие градиенты и т. д.

Это пример изображения в формате JPEG:

GIF

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

GIF может содержать более одного кадра, поэтому его можно анимировать.

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

Это пример изображения GIF:

PNG

Этот формат был создан, чтобы стать новым и улучшенным GIF, потому что GIF был запатентовано. PNG — это формат без потерь.

Существует два типа файлов PNG: 8-битный и 24-битный. 8-битный может хранить до 256 цветов, как GIF. 24-битный может хранить миллионы цветов, а также имеет частичную прозрачность.

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

Это пример 8-битного изображения PNG:

Это пример 24-битного изображения PNG с прозрачным фоном:

Сохранение изображений для Интернета

Возможность экспорта изображений для Интернета найдено в разделе Файл > Сохранить для Интернета… — другое изображение у редакторов должно быть что-то подобное, возможно, под File > Export .

Сохранение многоцветных изображений

Исходное изображение сохранено с качеством 100 % [171 КБ]

1. Выберите Файл > Сохранить для Интернета. ..
2. Поскольку это фотография, выберите JPEG.
3. Вы можете выбрать опцию Progressive , если хотите, разница только в том, как будет выглядеть загрузка нравиться. Прогрессивные изображения сначала выглядят размытыми, а затем становятся более четкими по мере загрузки изображения. Непрогрессивный изображения загружаются построчно.
4. Сначала выберите уровень качества, Высокий , если изображение будет видимым, Средний или Низкий если это имел в виду фон.
5. Чтобы лучше контролировать качество, используйте ползунок или введите число в поле Качество
6. Посмотрите на размер файла и расчетное время загрузки, отображаемые в левом нижнем углу, при настройке параметров. В то же время посмотрите на изображение, чтобы решить, какое качество выглядит достаточно хорошо.
   • Если это фон, убедитесь, что размер файла не превышает 5 КБ, лучше до 2 КБ.
   • Если изображение является заголовком макета, допускается размер до 40 КБ.
   • Если это изображение, которое будет отображаться на странице, разумным будет размер до 70 КБ, в зависимости от размеров.
   • Картины и фотографии для вашего портфолио можно сохранять в лучшем качестве, так как люди, которые будут их смотреть, уже ожидают увидеть большие изображения. В этом случае нормально иметь размер файла от 100 до 200 КБ, но не более того.
7. Как только вы нашли идеальный баланс между качеством и сжатием, нажмите кнопку Сохранить

Изображение сохранено с качеством 60% [42 КБ]

При подключении со скоростью 56 кбит/с приведенное выше изображение загружается примерно через 8 секунд. Его качество не самое лучшее, некоторые области выглядят размытыми, но этого вполне достаточно для веб-целей, и мы использовали на 75 % меньше памяти, чем раньше. Вот как изображения с большим количеством цветов должны быть сохранены.

Сохранение одноцветных изображений и диаграмм

Исходное изображение, сохраненное в формате JPEG с качеством 100 % [177 КБ]

1. Выберите Файл > Сохранить для Интернета. ..
2. Поскольку в нем меньше цветов, выберите GIF.
3. Если изображение содержит пустые (прозрачные) пиксели, убедитесь, что установлен флажок Прозрачность .
4. Выберите количество цветов — постарайтесь сделать число как можно меньше, но в то же время изображение выглядит достойно.
5. Если изображение не в фокусе (т.е. фон), попробуйте добавить Lossyness , перетащив ползунок Направо. Это уменьшит размер файла.
6. Как только вы нашли идеальный баланс между качеством и размером, нажмите кнопку Сохранить

Изображение сохранено в формате GIF, 8 цветов, 50% с потерями [25 КБ]

Приведенное выше изображение будет загружаться примерно через 5 секунд при подключении со скоростью 56 кбит/с. Если вы присмотритесь, то заметите некоторые различия, но изображение по-прежнему выглядит достаточно хорошо, чтобы быть фоном — что более важно, это всего лишь 15% от исходного размера файла!

Сравнение форматов

Для более наглядного представления о различных форматах и ​​сжатиях приведена таблица:

«>

Графический тип	JPEG	GIF	PNG-8	PNG-24
Одноцветный	378 байт	156 байт	588 байт	809 байт
Сглаженный текст на сплошном фоне	1876 байт	566 байт	1015 байт	1791 байт
Сглаженный текст на прозрачном фоне	нет прозрачности	365 байт	867 байт	1538 байт
Градиент	742 байта	2331 байт	1072 байта	1299 байт
Плоские цвета	3006 байт	964 байта	1237 байт	2346 байт
Цветной мотив на прозрачном фоне	нет прозрачности	784 байта	1105 байт	2007 байт
Полноцветный мотив	2942 байта	2662 байта	2270 байт	4847 байт
Полноцветный мотив на прозрачном фоне	нет прозрачности	2373 байта	2333 байта	5211 байт
Анимация	без анимации	16086 байт	без анимации	без анимации
Фото	4208 байт	6995 байт	7521 байт	23810 байт

Понравился этот урок? Читайте больше уроков Photoshop!

---

Поделитесь этим руководством с друзьями!

---

Экспорт изображений для Facebook, Instagram и вашего веб-сайта из Photoshop — Академия ретуши

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

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

Все рассмотренные ниже случаи имеют общее значение: размер экспортируемого файла JPEG будет играть большую роль в скорости загрузки вашего веб-сайта. Это очень важно, потому что это повлияет на его рейтинг в Google и видимость в поиске ( . С 9 июля 2018 г. обновление Speed ​​Update официально выпущено для всех пользователей. В конце прошлой недели Google объявил о серьезных изменениях в своих факторах ранжирования мобильных устройств. скорость всегда была важным фактором… – Wordstream.com)

СВЯЗАННЫЕ: Форматы файлов изображений, разрешение и размер

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

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

Давайте сначала рассмотрим требования к размеру файла в Facebook и Instagram, а затем перейдем к оптимизации изображений для вашего собственного веб-сайта. И, наконец, какие настройки экспорта использовать в Photoshop для достижения наилучших результатов.

Facebook

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

СВЯЗАННЫЕ: Оптимизируйте свои фотографии для Facebook

Вдохновение от @sadowskaphoto на странице Академии ретуши в Facebook

Вот рекомендуемые настройки Facebook для сохранения наилучшего качества в небольших файлах:

На сегодняшний день, 24 июля 2018 г., указано: вашу фотографию в один из следующих поддерживаемых размеров:

• Обычные фотографии: 720 пикселей, 960 пикселей, или 2048 пикселей широкий
• Фото на обложке: 851px by 315px
• Чтобы избежать сжатия при загрузке обложки, убедитесь, что размер файла не превышает 100 КБ
• Сохраните изображение в формате JPEG с цветовым профилем sRGB

Если вы выполняете загрузку с помощью мобильного приложения Facebook, важно отметить, что по умолчанию ваше изображение загружается в низком качестве. Чтобы избежать этого, в Facebook есть так называемая настройка «HD», которая по умолчанию отключена, и ее необходимо включить. Просто перейдите к Мобильное меню FB > Настройки > Настройки учетной записи > Видео и фото и переместите ползунок вправо. После включения все готово!

Instagram

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

Справочный центр Instagram: Обмен фото и видео

Когда вы делитесь фотографией в Instagram, независимо от того, используете ли вы Instagram для iOS или Android, обязательно загружайте ее с максимально возможным разрешением (до ширины 1080 пикселей).

Когда вы делитесь фотографией шириной от 320 до 1080 пикселей, мы сохраняем исходное разрешение этой фотографии, пока соотношение сторон фотографии составляет от 1,91:1 до 4:5 (высота от 566 до 1350 пикселей с ширина 1080 пикселей).

Если соотношение сторон вашей фотографии не поддерживается, оно будет обрезано в соответствии с поддерживаемым соотношением сторон. Если вы делитесь фотографией с более низким разрешением, увеличьте ее до ширины 320 пикселей. Если вы делитесь фотографией с более высоким разрешением, уменьшите ее ширину до 1080 пикселей. – Instagram

 

Лента вдохновения в @retouchingacademy Instagram. Изображения @phnicolascuenca  и @sadowskaphoto

Веб-сайты

При экспорте изображений для онлайн-портфолио обязательно соблюдайте рекомендации по поисковой оптимизации (также известной как SEO).

Короче говоря, правильное SEO определяет, насколько хорошо ваш сайт будет проиндексирован поисковыми системами. Поисковые системы (такие как Google, Bing, Yahoo) используют «веб-сканеры», которые индексируют и ранжируют ваш сайт по сравнению с аналогичными веб-сайтами. Таким образом, чем лучше ваше SEO, тем выше рейтинг вашей поисковой системы, что позволит большему количеству потенциальных клиентов найти ваш сайт при поиске ретушера (или фотографа) в вашем районе.

Пример веб-сайта с онлайн-портфолио, созданного нашей собственной Кендрой Пейдж.

Чтобы оптимизировать изображения для поисковых систем, вы можете сделать две вещи:

1. Используйте описательные имена с ключевыми словами для каждого изображения, которое вы загружаете на свой веб-сайт. Ключевые слова SEO  – это ключевые слова и фразы в вашем веб-контенте, которые позволяют людям находить ваш сайт с помощью поисковых систем (Что такое ключевые слова SEO? от WordStream). Например, если ваше изображение представляет собой портрет женщины с голубыми глазами, имя файла может быть « professional_retouching_portrait_woman_blue_eyes.jpeg ”или что-то в этом роде. Подумайте, как потенциальные клиенты могут использовать ключевые слова при поиске ваших услуг в Интернете, и используйте их при именовании ваших файлов.
2. Не менее важно иметь «замещающий текст» (альтернативный текст), который будет сопровождать ваши изображения на вашем веб-сайте. Альтернативный текст изначально создавался как средство предоставления текстового дескриптора на тот случай, если веб-сайт не может загрузить изображение. Вместо изображения будет использоваться «альтернативный текст», позволяющий зрителю понять, что он в противном случае увидел бы. Главное — сделать так, чтобы зрители рассказали об изображении как можно больше, используя как можно меньше слов. Сегодня альтернативный текст играет важную роль, помогая поисковым системам сканировать и индексировать ваш сайт, тем самым повышая общий рейтинг вашего сайта. Таким образом, альтернативный текст для упомянутого выше изображения, загруженного на веб-сайт, может быть:  .  А если ваш сайт на WordPress, вы можете заполнить альтернативный текст в настройках загруженного изображения:

 

Экспорт изображений для Интернета с помощью Photoshop 

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

Теперь вы можете экспортировать изображения для социальных сетей и веб-сайтов в Photoshop несколькими способами: с помощью функций  Экспортировать как и Сохранить для Интернета .

Хотя Экспорт Поскольку  является новейшим вариантом, многие фотографы и ретушеры по-прежнему предпочитают использовать метод Сохранить для Интернета  . Сохранить для Интернета был спрятан в меню в последних версиях Photoshop и помечен как « Legacy », что означает, что он все еще работает, но больше не поддерживается и не обновляется и в конечном итоге будет полностью заменен Экспортировать как параметр .

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

Чтобы быстро получить доступ к устаревшему диалоговому окну экспорта для Интернета, выберите Файл > Экспорт > Сохранить для Интернета (устаревший) или нажмите Option + Shift + Command + S (Mac) , Alt+Shft +Ctrl+S (Победа) .

 

И пока он все еще выполняет свою работу, мы сохраняем кнопку Сохранить для Интернета (под названием Размер в Интернете ) в нижней части панели Beauty Retouch для удобного доступа одним нажатием к Сохранить для Интернета экспорта. меню:

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

• Формат файла: JPEG
• Качество: 60–70 % (снижение качества часто становится заметным ниже 60–70 %)
• Установите флажок Optimized (при использовании диалогового окна Safe For Web )
• Метаданные: сохраните информацию об авторских правах и контактную информацию, встроенную в ваши изображения (убедитесь, что они добавлены в Photoshop)
• Проверить Преобразовать в sRGB
• Размер изображения: 2048 (по длинному краю) или другие размеры файла, перечисленные выше.

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