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

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


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

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


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

Идем в File > Save for Web

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


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

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

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

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

  • Простое отражение Самый простой прием отражения объектов.Запускаем Photoshop, создаем новый документ (Ctrl+N) произвольных размеров, пишем текст. Дублируем слой с текстом (тащим на […]
  • Рвем фотографии 2 В прошлом уроке мы рвали фото пополам, теперь попробуем оторвать низ (кто хочет - верх) фотографии. В прошлом уроке мы рвали фото пополам, теперь попробуем оторвать низ […]
  • Четкость фото + выравниваем цвета Настраиваем четкость фотографии и добавляем несколько корректирующих слоев для настройки цветов. Бонус - прием, альтернатива слиянию слоев.Для начала настраиваем […]
  • Живопись С этим эффектом вы почувствуете себя, как минимум Пикассо Ван Гогом ) Берите фото у меня Открываем фото в PhotoshopСоздаем новый слой (Ctrl+Shift+N)Заливаем новый слой […]
  • Glow эффект Glow эффект так называемый, если постараться может получиться довольно симпатично. Быстренько сляпаем фон: Создаем новый документ с размерами 500х500px Выставляем […]
На правах рекламы:

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