Semi-Transparent .png Background in Photoshop
● Text shows up better and is easier to read when it's framed behind a semi-transparent backgournd.
✓ Learn Opacity in Photoshop✓ .png format✓ css code
Other People's Work:
This background is an example of work inspired by this tutorial.
Step #1: Open PhotoShop ~
✓ Create a new document by hitting the keyboard shortcut: Cmd(⌘)+N.
✓ Set the Width and Height to approximately 10x10 pixels.
Step #2: Fill with Color ~
✓ Fill the square with the color of your choice.
Step #3: Lower the Opacity ~
✓ Open Layers by hitting F7 (if it's not open already).
✓ Drag the Opacity slider down a little.
✓ Set it to approximately 40 percent for starters.
✓ You may need to change that later …
Step #4: Save as .png-24 ~
✓ Then go to: File > Save for Web … and save the document as a transparent_bakgrnd.png-24 IN THE ROOT FOLDER OF THE PROJECT.
Step #5: Insert it as a Repeating Backround ~
✓ Open the CSS Panel of Dreamweaver and double-click the #container div or #content div wherever you need a semi-transparent background.
✓ Click on Background and attach the semi-transparent .png file.
Step #6: View your Work ~
✓ Hit F12 or select to view your work.
✓ If you like what you see, you might want to turn off the background colors for your other divs …
Last Step: Save and Upload your site ~
✓ If you have a web server, save your pages, upload them and attach the link.