Today I had an interesting debate with a developer regarding which is superior using tables or CSS. The particular website we were reviewing uses both, DIVs and tables, however the main structure/container is a table, with DIVs within. It has been known that developing websites with DIVs rather than tables creates a much faster load time, more SEO friendly, and is more 508 compliant. These are all somewhat true to a certain extent. Each website is subjective to how it is built, how many graphics are present, and how much data is involved. Also if your web sever is generally slow or you have to many users for how much bandwidth you have, will make a difference as well. I personally prefer to develop with CSS now, however there are several websites I update that still contain tables. The one nice thing about developing with CSS is that once you get your general structure down, you can easily change the look of your website in some cases without even touching the PHP, HTML, or ASP file you are working on. How is this so? The CSS file that is linked to your wesbite provides all of the styling, size, and looks. You can easily change the parameters of this CSS file with different graphics. CSS Zen Garden s a great reference for this. So, when are you going to say, hey look Mom, no more tables?
Posts Tagged ‘web design’
CSS vs Tables 2009
Thursday, April 16th, 2009How to mask images in PhotoShop
Sunday, March 8th, 2009Masking 101
Ever wanted to have an image within an image? Lets say you have a background image of something, yet you want a certain part of another picture to peek through it. You could easily cut part of the picture and paste, however masking gives you the benefit of moving around the image underneath, and re-aligning the “portal” that you are looking into.
First Step: Define the background image
Open an image that you want to use:
Second Step: Draw a portal. You can use just about any shape tool to do this and use a color that is easy to see against the background image. I will use the circle and select yellow as the color.
Third Step: Add another picture to the file. Choose another picture that you want to use. make sure it is larger than the portal, however smaller than the background. I recommend opening the image, resizing it to something smaller than the original background, then either copying the whole image onto the background or dragging it to the background image. You can easily re-size the image by pressing CTRL T and then while holding SHIFT, dragging the image. I would only recommend reducing. If you need enlarge it there may be pixelation.
Step 4: Applying the Clipping Mask. Open your Layers pallet. You should have 3 layers, one for the background image, 2 for the circle, and 3 for the overlaying image. Make sure that the top image is a layer above the shape, in our case the yellow circle. Right click on the top layer (the image) in the layers palette and select Create Clipping Mask.
Step 4: Save your file to whatever format you want, however make sure to keep a PhotoShop source file saved! If your image is not in the correct position, now worries, you can easily move either the masked image or the circle to your specifics. This is a lot easier than cutting and pasting. You can also adjust the size of your shape as well if it is too large or small.
Good luck masking!
