Экспорт картинок для веб

Правильный экспорт картинок для веб.


Допустим у вас на сайте используется серый фон, с номером RGB #c1c1c1. Ни в коем случае не экспортируйте картинки с фоновым цветом, ибо это лишний вес картинки, а соотв. лишняя нагрузка на ваш сайт.

Да и вообще это дурной тон — использовать картинки с фоном. Модные дяди в вебе давно делают по-другому.


После того, как вы подготовили картинку, или текст для веб странички — отключите нижний слой background (в панели слоев).

Идем в File > Save for Web

Вот тут надо остановиться, ибо если в тупую кликнуть кнопку Save, то картинка у вас (или текст) сохранится с белой обводкой и выглядеть это будет так как на картинке слева, т.е. черный текст на сером фоне с белой обводкой.
(сорри, ошибся на сером фоне ))


Теперь попробуйте кликнуть на Matte, выбрать цвет фона (#c1c1c1) и сохранить, теперь обводка текста (картинки) стала # заданного цвета. Это может быть зеленый цвет, розовый.. какой угодно, в общем. Ну а далее дело верстки.

Если у вас IE попробуйте выделить картинку удерживая левую кнопку мыши, если Firefox правая кнопка на картинке — показать изображение.

Понятно, да?
Теперь картинка и фон отдельные, чтд.
(опять ошибся, на сером фоне ))

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

  • Простое отражение Самый простой прием отражения объектов.Запускаем Photoshop, создаем новый документ (Ctrl+N) произвольных размеров, пишем текст. Дублируем слой с текстом (тащим на […]
  • Голубой глобус Рисуем глобус, мало где пригодится, но принцип станет понятен. Открываем Photoshop, создаем новый файл - File > New (Ctrl+N) размером 500x500 px Выбираем инструмент […]
  • Отделяем волосы от фона Очень простой способ грамотно вырезать волосы из фона.Открываем фото в Photoshop, выбираем инструмент Background Eraser Tool (находится там же, где и Eraser Tool 🙂 В […]
  • Бейдж в стиле WEB2.0 Довольно много движений, если нет желания возится - можете воспользоваться готовыми стилямиВыбираем готовую форму Создаем документ, произвольных размеров, например […]
  • Эффект сепии Очень простой, но эффектный прием. Открываем фотографию в Photoshop, переводим изображение в черно-белое - Image > Adjustments > Desaturate (Strl+Shift+U) Далее […]

Комментарии закрыты..