Помогни ни да направим Uroci.net по - богат! Добави урок

Трик за лек полупрозрачен фон

Sunerphey   трудност:    видян: 15185

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

Като всички гениално прости и ефективни решения обаче и това стига трудно до мозъка в подходящия момент. Техниката наречена е semi-transparent background или от мен 50%(наполовина) прозрачен фон. Идеята е лек, лесен и винаги работещ начин за постигани на този ефект. За осъществяването му не ви трябват кой знае какви умения, така че пускайте Photoshop, winamp и четете нататък.

Идеята на полупрозрачния фон е някакъв слой(layer) да се запълни с gif изображение, което представлява 1 пиксел цвят, 1 празен и т.н.
Нека започнем с работата ни във Photoshop.

1. Започнете нов проект със размери 2х2 пиксела.
2. Запълнете горния ляв и долния десен пиксел с желание цвят (допустимо е и обратното).
primer1.gif

Разбира се може да пробвате и други форми ( за фон на текст горната )

уроци - primer2.gif уроци - primer3.gif

3. Отидете на Edit -> Define Pattern
4. Започнете нов проект с размери над 200х200 пиксела.
5. Запълнете празния фон Edit -> Fill -> изберете току-що направената текстура при Opacity 100%.
6. Запишете новосъздадения файл с разширение .gif като му позволите прозрачност
Аз използвам Save for Web, като на settings избирам Gif и отмятам Transparency.


ЗАБЕЛЕЖКА: Задължително спазвайте цялата процедура!
Някои смелчаги могат да пренебрегнат размера от 200х200 пиксела с цел да оптимизация, но това е недопустимо, защото след опити на 2х2 пиксела на по-слаби машини при бавно скролване насичаше ужасно (Само със Internet Explorer), като CPU usage при AMD Sempron 2600+ беше на 100%, а при Intel P D 820 Dual Core 86%. Явно запълването на многобройни полупрозрачни изображения трови процесора (Само със Internet Explorer), но на указания размер (или по-голям) няма абсолютно никакви проблеми. Увеличаването на размера на файла е минимален (остава си байтове).

Следващата фаза е използването на новосъздадената текстура в страницата ни.
Можем да използваме gif-a като фон на <div> или таблица.

Силно препоръчвам използването на ефекта върху картинка с подобна гама цветове и светлина. При силен контраст пикселите може да създадат нещо като решетка.
Et Voila!

автор: Sunerphey



Коментари (3)

charmed на 28.01 2007 в 02:54ч.
Ама това е урок за PhotoShop не за HTML
advokata на 18.03 2007 в 16:38ч.
Това се прави във фотошоп но като картинка може да се използва в HTML.
AnHiMiLaToR на 07.04 2007 в 19:27ч.
C'est super! Vraiment, c'est super!

Регистрирайте се, за да добавите коментар


Калдейта ЕООД - © 2003-2010. Всички права запазени.
Препоръчваме: IT Новини