Форум PHP программистов > Полупрозрачные картинки

[ Поиск ] - [ Пользователи ] - [ Календарь ]

Полная Версия: Полупрозрачные картинки - похвалиться хочу :)

Страницы: 1, 2

sergeiss

15.12.2013 - 02:33

Научился тут делать полупрозрачный PNG. То есть не такой, где просто части невидимые. А где прозрачность может быть установлена от 0 до 100%. В качестве "образца" прикладываю одну из первых картинок, сделанных по этой методе.
Сделана она была в 2 этапа: сначала в CorelDraw сделал кнопку, а затем в CorelPhotoPaint добавил ей прозрачности. Границы для прозрачности сделал не совсем идеально, да. Но это ж первый эксперимент

Смотреть надо в браузере, на цветном фоне. Для данной картинки фон нужен не очень светлый. Можно, чтобы он был не однотонный.

PS. Сначала загрузил один файл, потом подредактировал и загрузил другой.

_____________
* Хэлп по PHP
* Описалово по JavaScript
* Хэлп и СУБД для PostgreSQL

* Обучаю PHP, JS, вёрстке. Интерактивно и качественно. За разумные деньги.

* "накапливаю умение телепатии" (С) и "гуглю за ваш счет" (С)

Invis1ble

15.12.2013 - 02:57

$('.attach:eq(0)')
    .clone()
    .css({position: 'absolute', left: '50%', top: 0})
    .appendTo('body');

_____________

Профессиональная разработка на заказ

Я на GitHub | второй профиль

Invis1ble

15.12.2013 - 03:01

Мне кажется или блики от "окна" прозрачные?

_____________

Профессиональная разработка на заказ

Я на GitHub | второй профиль

waldicom

15.12.2013 - 03:02

Нет, не кажется

_____________
Свои мозги еще никто не отменял.
Телепатов нету.

sergeiss

15.12.2013 - 03:03

Цитата (Invis1ble @ 15.12.2013 - 03:01)

Мне кажется или блики от "окна" прозрачные?

Похоже, что не кажется. Похоже, я неправильно сделал

Для них нужно было уменьшить прозрачность, а я увеличил.

_____________
* Хэлп по PHP
* Описалово по JavaScript
* Хэлп и СУБД для PostgreSQL

* Обучаю PHP, JS, вёрстке. Интерактивно и качественно. За разумные деньги.

* "накапливаю умение телепатии" (С) и "гуглю за ваш счет" (С)

sergeiss

15.12.2013 - 03:15

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

_____________
* Хэлп по PHP
* Описалово по JavaScript
* Хэлп и СУБД для PostgreSQL

* Обучаю PHP, JS, вёрстке. Интерактивно и качественно. За разумные деньги.

* "накапливаю умение телепатии" (С) и "гуглю за ваш счет" (С)

sergeiss

15.12.2013 - 03:27

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

_____________
* Хэлп по PHP
* Описалово по JavaScript
* Хэлп и СУБД для PostgreSQL

* Обучаю PHP, JS, вёрстке. Интерактивно и качественно. За разумные деньги.

* "накапливаю умение телепатии" (С) и "гуглю за ваш счет" (С)

sergeiss

15.12.2013 - 03:34

Или вот еще неоднородный бэкграунд

_____________
* Хэлп по PHP
* Описалово по JavaScript
* Хэлп и СУБД для PostgreSQL

* Обучаю PHP, JS, вёрстке. Интерактивно и качественно. За разумные деньги.

* "накапливаю умение телепатии" (С) и "гуглю за ваш счет" (С)

paul85

15.12.2013 - 07:18

Круто!

sergeiss, а вот этот эффект, как буд-то кнопка из полированного стекла, как раз с помощью CorelPhotoPaint делается (блики)?

YVSIK

15.12.2013 - 09:59

если правильно понял об чем тут речь

_____________
«Гнусное свойство карликовых умов приписывать
________________!свое духовное убожество другим!»
___О) как-же он прав=>__________________ © Оноре де Бальзак.
отличный хост(рекомендую !! )
My MVC-CMV

sergeiss

15.12.2013 - 13:18

Цитата (paul85 @ 15.12.2013 - 07:18)

а вот этот эффект, как буд-то кнопка из полированного стекла, как раз с помощью CorelPhotoPaint делается (блики)?

Блики, тень от буквы, разные полутона - это в CorelDraw (да-да, именно в векторной графике!). Затем экспортирую в битовую графику и делаю полупрозрачность в КорелФотоПейнте.

Вот, прикладываю "оригинал", полученный в КорелДро, до того, как его обработал в ФотоПейнте.

Цитата (YVSIK @ 15.12.2013 - 09:59)

если правильно понял об чем тут речь

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

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

_____________
* Хэлп по PHP
* Описалово по JavaScript
* Хэлп и СУБД для PostgreSQL

* Обучаю PHP, JS, вёрстке. Интерактивно и качественно. За разумные деньги.

* "накапливаю умение телепатии" (С) и "гуглю за ваш счет" (С)

DedMorozzz

15.12.2013 - 13:24

возникает вопрос полезности данных картинок. Я сходу прикинул и не нашел где(в вебе?) это применить
как правило дизайн сайта не основан на наложении друг на друга Н картинок
Да и сколько уходит времени на обработку 1й картинки?

PS: ну в целом, конечно круто

_____________
Если не говорить пользователям, что Linux это "Сложно и страшно", то им совершенно всё равно, в чём не разбираться

sergeiss

15.12.2013 - 13:57

Цитата (DedMorozzz @ 15.12.2013 - 13:24)

возникает вопрос полезности данных картинок Я сходу прикинул и не нашел где(в вебе?) это применить.

Может быть ты не замечал, но применяют. Если не такие, то подобные

Погугли по словам "стеклянные кнопки". Только одно дело, когда кнопка просто красивая, а другое дело - когда она годится под разные бекграунды.
Второе применение я недавно видел. Есть фотка некоего предмета. Ну вот тут http://ru.oriflame.com/products/product-de...?prodCode=27279 например. У объекта есть отражение от поверхности. И оно как раз полупрозрачное, к тому же с некоторым градиентом прозрачности (чем дальше вниз от объекта, тем больше прозрачность).
Если просто нарисовать отражение, то его сделаешь только для определенного фона. А если оно полупрозрачное, то при наложении на любой фон выглядит совершенно натурально.

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

А самое главное - если есть возможность, то можно найти и применение ей.

Цитата (DedMorozzz @ 15.12.2013 - 13:24)

Да и сколько уходит времени на обработку 1й картинки?

Если "рука набита", то немного.

_____________
* Хэлп по PHP
* Описалово по JavaScript
* Хэлп и СУБД для PostgreSQL

* Обучаю PHP, JS, вёрстке. Интерактивно и качественно. За разумные деньги.

* "накапливаю умение телепатии" (С) и "гуглю за ваш счет" (С)

sergeiss

15.12.2013 - 16:09

А как оно может выглядеть в динамике... Вот образец сделал: http://owndesign.ru/tests/transp/transp.php

Тут есть и картинка "со стеклом", и фон, и возможность перемещения картинки по фону (менюшка справа от картинки).

_____________
* Хэлп по PHP
* Описалово по JavaScript
* Хэлп и СУБД для PostgreSQL

* Обучаю PHP, JS, вёрстке. Интерактивно и качественно. За разумные деньги.

* "накапливаю умение телепатии" (С) и "гуглю за ваш счет" (С)

YVSIK

15.12.2013 - 21:42

Цитата (sergeiss @ 15.12.2013 - 13:18)

у которой просто один цвет прозрачный, фоновый. А я говорю о полу-прозрачности части картинки

ну не знаю про что ты говоришь))

на картинке видно, что слова полупрозрачные, и тени так-же полупрозрачные делаю скин прямо от сюда))
user posted image

может надо добавить не прозрачных, например полосок чтоб это было видно??
кстати ты показал я тоже показал, так подумалось, "не обиду"
это есть встроенные функции в фото-шопе, на которые никто не обращает внимания, и ещё))

user posted image

если просмотреть через браузер в разделе правки ЦСС-а там прямо в наладчике есть опция прозрачности той или иной заливки цвета,
например, опять-же прямо отсюда из форума делаю

media="all"
.pformright {
background-color: rgba(199, 115, 115, 0.97);
padding: 6px;
margin-top: 1px;
border-top: 1px solid #C2CFDF;

остается только подложить картинку под эту полу-прозрачность и будет желаемый результат.

Видимо я так и не понял про что речь идет)) :unsure:

во!! отался только один баг, который я так и не стал доводить до конца.
Увидел что это так, видимо что-то с дивами надо химичить, это уже будет ещё тот гемор
user posted image

Быстрый ответ:

Здесь расположена полная версия этой страницы.