Други уроци
Adobe Photoshop
Adobe Illustrator
Adobe Flash
Adobe Fireworks
DreamWeaver
CSS и HTML
Corel Draw
Image Ready
PHP
SEO
CMS
Microsoft Windows
Microsoft Word
Microsoft Excel
PowerPoint
Microsoft Access
Microsoft Publisher
Linux
Visual basic
JavaScript
Ajax
3ds Max
Maya 3D
C++
Sound Forge
Gimp
SWiSH
Трик за лек полупрозрачен фон
видян: 15257
Предполагам често ви се е искало или налагало да пишете върху част от изображение и сте се сблъсквали с проблема с контраста на надписа с картинката. Най-лесното решение е да редактирате самото изображение като му добавите поле с % Opacity, но в някои случаи и то не върши работа ако си имате за фон често повтаряща се текстура (лоши спомени), което например може да се случи при правене на графична тема на форум. Но за всичко си има лек (освен за някои болести..).
Като всички гениално прости и ефективни решения обаче и това стига трудно до мозъка в подходящия момент. Техниката наречена е semi-transparent background или от мен 50%(наполовина) прозрачен фон. Идеята е лек, лесен и винаги работещ начин за постигани на този ефект. За осъществяването му не ви трябват кой знае какви умения, така че пускайте Photoshop, winamp и четете нататък.
Идеята на полупрозрачния фон е някакъв слой(layer) да се запълни с gif изображение, което представлява 1 пиксел цвят, 1 празен и т.н.
Нека започнем с работата ни във Photoshop.
1. Започнете нов проект със размери 2х2 пиксела.
2. Запълнете горния ляв и долния десен пиксел с желание цвят (допустимо е и обратното).
Разбира се може да пробвате и други форми ( за фон на текст горната )
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