Верстка ваших проектов. HTML5, JavaScript. Разработка сайтов, рекламных компаний под iPhone

Как я делаю картинки-png

Дано

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

Картинка:

Источник

Решение

Скачиваем: файл Actions для фотошопа.

Вставляем эту картинку в новое окно.

Выбираем в панели actions действие transparenсy (!! фон должен быть прозрачным) и жмем пуск.

В результате должно получится два слоя:

изображение-png

сохраняем как foto.png

изображение gif

сохраняем как foto.gif

Теперь вставляем его в html.

<div class="foto"><div><!-- --></div></div>

И пишем стили для css

1
2
3
4

<style type="text/css">
.foto {background-image:url(картинка-png); width:301px; height:341px} 
.foto div {background-image:url(картинка-gif); width:301px; height:341px}
</style>

И пишем стили для ie5,6

1
2
3
4
5

<!--[if lt IE 7]>
<style type="text/css">
.foto {background-image:none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=картинка-png,sizingMethod=crop)} 
</style>
< ![endif]-->

Преимущества такого способа в том, что в ie5 все очень неплохо смотрится :)

Результат смотреть тут или тут

Написано: Апрель 6th, 2007 | Рубрика: css | Комментариев (7)

Комментариев (7) on “Как я делаю картинки-png”

  1. 1 Русский said at 3:46 пп on Апрель 18th, 2007:

    Спасибо, интересная статья

  2. 2 Серж said at 1:31 дп on Ноябрь 24th, 2007:

    Круть )

  3. 3 ded said at 11:40 дп on Январь 28th, 2008:

    Если ты начинающий верстальщик, то нормально… но только не замарачивайся на этом и больше экспериментируй

  4. 4 ЭФНО said at 11:37 пп on Август 2nd, 2008:

    Кажется в последнем коде должно быть не

    , а

    Т.е. пробел немного лишний

  5. 5 ЭФНО said at 11:39 пп on Август 2nd, 2008:

    Сорри теги “поедены” в комментарии.
    Я хотел сказать, что в последнем коде пробел перед
    ![endif]–
    не нужен, правильно без пробела

  6. 6 Esh-Tray said at 7:22 пп on Ноябрь 22nd, 2008:

    Ну что ж, неплохой способ… Главное – что эффект достигнут. А насчёт пробела ЭФНО прав

  7. 7 Banggg1 said at 5:52 дп on Декабрь 25th, 2011:

    Комментарий

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